1 / 38

TNPW1 Technologie pro publikování na webu

TNPW1 Technologie pro publikování na webu. Tipy k projektům (časté chyby) Absolvování, zkouška Použitelnost webu W4D K čemu je PHP. Přednáška č. 11-12. Ing. Martin Adámek Katedra informačních technologií FIM UHK. Tipy k projektům (Časté chyby v projektech). Přístupnost.

nellie
Download Presentation

TNPW1 Technologie pro publikování na webu

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  1. TNPW1Technologie pro publikování na webu Tipy k projektům (časté chyby) Absolvování, zkouška Použitelnost webu W4D K čemu je PHP Přednáška č. 11-12 Ing. Martin Adámek Katedra informačních technologií FIM UHK

  2. Tipy k projektům (Časté chyby v projektech) Přednáška TNPW1 – Martin Adámek

  3. Přístupnost • stránky musí být použitelné (přístupné) • při zapnutých/vypnutých stylech • při zapnutých/vypnutých obrázcích • vyzkoušejte všechny 4 kombinace • obrázky musí mít správný alt popis • vizte manuál v přednášce č.3, slide25 • barevný kontrast popředí a pozadí • i pro alternativní popis obrázků • snadná zkouška: • stažení jasu (brightness, sluničko) monitoru a posvícení lampičkou na monitor; příp. pohled z mírně jiného úhlu Přednáška TNPW1 – Martin Adámek

  4. Přístupnost • rozložení stránek se nesmí rozsypat • při 2x Ctrl+ ve FF při 1280x1024px • nesmí se zobrazit horizbar (vodorovný posuvník) • při 800x600px a normální velikosti písma • ohlídejte si i vliv případného svislého posuvníku na šířku stránky • platí pro FF i IE • stejná fce. v IE i FF Přednáška TNPW1 – Martin Adámek

  5. Písmo Generická rodina písma v CSS • musí být uvedena právě jedna rodina • serif (patkové) • sans-serif (bezpatkové) • monospace (neproporciální) • příp. cursive, fantasy • před rodinou může být 0 až N konkrétních písem, která do té rodiny patří Přednáška TNPW1 – Martin Adámek

  6. Písmo • správně např.: • font-family: Arial, Arial CE, Verdana, sans-serif; • font-family: Times, serif; • font-family: sans-serif; • font-family: serif; • špatně např. • font-family: Times, Arial, serif; /*směs patkového a bezpatkového*/ • font-family: Times, sans-serif; /*směs patkového a bezpatkového*/ • font-family: Times; /*chybí definice generické rodiny*/ • font: Times; /*chybí definice generické rodiny*/ • http://www.adamek.cz/fim/tvorba-webu/tipy-rady/ Přednáška TNPW1 – Martin Adámek

  7. Obrázky, kód Obrázky mají uvedenu skutečnou velikost • náhledy vyrobíte skutečným zmenšením v graf. editoru Čistota kódu • validita podle XHTML 1,0 Strict nebo XHTML 1,1 • nezneužití tabulek pro definici rozložení Přednáška TNPW1 – Martin Adámek

  8. Styl pro tiskový výstup • Skrýt hlavní menu • pomocí display:none; • (ale neskrývejte nadpisy webu a stránky!) • Odstranit prázdné prostory po skrytých menu • zrušit margin • V samostatném css souboru • z XHTML nalinkován jako styl pro tisk(pak je při tisku automaticky použit) • připojit k xhtml soubory více způsoby, pro fci ve FF i v IE • vizte např. hlavičku www.adamek.cz • Zkontrolujte hlavně ve FF, tam tisk často zlobí (konce vnořeného obtékání) • Obtékání obrázků a formátování nadpisů je vhodné zachovat jako v zobrazení pro monitor Přednáška TNPW1 – Martin Adámek

  9. Respektování formátu textu • odřádkování v původním textu (ve zdrojovém kódu) znamenají, že jeho autor určil hranice odstavců • každý odstavec (který je fyzicky v textovém souboru, zdrojovém kódu definován odřádkováním) je jako odstavec označkován, aby byl jako odstavec interpretován • musejí tam být <p> a </p>, příp. někde <br /> • zdrojový kód s odřádkováními textu, které se neprojeví na stránce => chyba • a podobně používání h2 a h3 • aby text na stránce nebyl slit v jednom odstavci – musí být přehledně strukturován Přednáška TNPW1 – Martin Adámek

  10. Nevhodné znaky • do URL (názvů souborů a adresářů) se nehodí diakritika, velká písmena, mezery • u nadpisů a u záhlaví tabulek nepoužívejte dvojtečky Přednáška TNPW1 – Martin Adámek

  11. Odevzdání projektu • adresu neuvádějte se zbytečným názvem souboru • www.novak.cz/index.html • na vizitku ani do katalogu se to tak nepíše • a tedy ani jinam • uvádějte www.novak.cz • URL bez subdomény www je někdy vhodné uvádět s protokolem • http://lide.uhk.cz/novak • díky „http://“ pozná eml klient, že jde o odkaz, i bez subdomény „www“ Přednáška TNPW1 – Martin Adámek

  12. Odevzdání projektu • URL v textu eml. zprávy (viz předchozí snímek) • přiložte zip (příp. rar) archiv se všemi XHTML a CSS soubory • obrázky ani jiné velké soubory (doc, pdf, ...) nepřibalujte; přibalte jen zdrojové kódy (.htm, .html, .css, příp. .php) • (velká příloha => smazání zprávy) • při použití php přibalte nejen php soubory, ale i vygenerované výsledné html soubory • správný předmět Přednáška TNPW1 – Martin Adámek

  13. Různé • raději nepoužívejte wz.cz (nespolehlivý, pomalý) • využijte lide.uhk.cz • description a title definujte různé pro jednotlivé stránky • u projektů nad cca. 10 stránek v e-mailu při odevzdání uveďte, které konkrétní stránky (5 až cca.10) odevzdáváte jako projekt • příliš mnoho kontrolovaných stránek: • zdlouhavé hledání požadovaných prvků • větší šance nalézt chybu Přednáška TNPW1 – Martin Adámek

  14. Různé • Jazyková kultura • Web nejsou interní poznámky • Web je něčí prezentace • Nezapomínejte na diakritiku • Velká písmena na začátku nadpisu, description, title, záhlaví tabulky, položky menu, věty, ... • Tématická ucelenost • na osobním webu nemohou být stránky nazvané „Tabulka“ nebo „Seznam“ • má jít o praktický web o něčem, na zvolené téma • ne soubor úloh z TNPW • Pro tabulky nastavte v CSS čáry • pro přehlednost a základní úpravu • Pseudotřidou :hover měňte jen barvu • zásah do velikosti, podtržení, pozice, proložení nebo řezu písma => odkazy se pod myší budou hýbat! (utíkat zpod ní) Přednáška TNPW1 – Martin Adámek

  15. Různé • Před odevzdáním zkontrolujte na jiném PC • jiné rozlišení, prohlížeč, operační systém (písma) ... • nepoužije se :visited (záznam lze smazat v developer toolbaru) • obrázky nejsou nataženy v chache (lze smazat) • Tabulky: Popisek „caption“, záhlaví „th“ Přednáška TNPW1 – Martin Adámek

  16. Další časté chyby • vizte prezentaci k cvičení č.6 (CSS) • nadpisy • písma • barvy • projděte si xls tabulku s hodnoceními projektů na webu + přečtěte si komentáře buněk Přednáška TNPW1 – Martin Adámek

  17. Duplicitní souhrn toho životně nejdůležitějšího:A few very basic rules for making of static website • Name file with main page of site "index.htm" or "index.html" • so page at file "something/index.htm" will be available at address "something/" or "something" • Do not use dangerous characters (like space, capital letters, letters with national diacritic) in names of files and folders (ergo in URL/address/link) • Use easily visible title of site and title of page at top part of each page • name of page will be in tag h1 • name of main page can be simply substituted by name of site • Use consistent navigation • the same place and style of the menu and headers at each page of the website • Define alternative text (tag alt) for images • Really resize images used in page (edit file with image using graphic editor) – attributes width and height in an xhtml code has to be equal to real size of image • Keep color contrast (big enough colour difference) between text and background • Insert a link to an xhtml validator into each page, • check validity of each page (checking of an (X)HTML validity is separate, always for one page – not for whole site) • correct errors (always solve the first error at list only; then recheck validity and continue with new first error from new list) • [ www.adamek.cz/en/fim/tnpw1 ] Přednáška TNPW1 – Martin Adámek

  18. Absolvování předmětu,zkouška Přednáška TNPW1 – Martin Adámek

  19. Absolvování předmětu • Místo cvičení 11 jsou dobrovolné konzultace projektů pro zájemce • Odevzdání projektů • do konce semestru • svému cvičícímu • info: www.adamek.cz/fim , resp. pokyny cvičícího • Zkouška • písemný test • převážně teorie z přednášek • 2 praktické příklady (psaní XHTML a CSS kódu) • každý u svého cvičícího Přednáška TNPW1 – Martin Adámek

  20. Tipy ke zkoušce • večer před zkouškou si projděte zdrojové kódy projektu (připomenutí syntaxí) • projděte si úkoly ze cvičení(a prezentace z přednášek a cvičení :) ) • znakové sady: • win-1250 (CP-1250) – středoevropská • win-1251 – azbuka+základní latinka (bez češtiny) • UTF-8 – univerzální (mírně datově náročnější) • ISO 8859-2 – Latin2 • přibližně slovanská latinka • podobná jako win-1250, ale starší Přednáška TNPW1 – Martin Adámek

  21. Použitelnost webu(efektivní webdesign) Přednáška TNPW1 – Martin Adámek

  22. Základy použitelnosti • použitelnost webu = efektivní webdesign • intuitivní pochopitelnost webu, jeho struktury a navigace pro návštěvníka • nečte návody „jak použít tento obchod“ • obvykle nečte ani obsah stránky ! • prolétává očima, kouká na nadpisy, na obrázky, na začátky textů • testuje se na dobrovolnících pomocí zátěžových testů • je jednou z disciplín v rámci tvorby webu • vedle: • technické kvality (učivo TNPW, validita kódu, ... ) • přístupnosti pro zdravotně či technicky znevýhodněné návštěvníky • obsahu webu, jeho formy a struktury (formulace textů, ...) • grafiky • SEO je tvořeno kombinací všech! (jen příchod z vyhledávače nestačí – zmatený návštěvník odchází bez nákupu či jiného užitku) Přednáška TNPW1 – Martin Adámek

  23. Základy použitelnosti • nutné požadavky: • konzistence webu, hlavně navigace • všude stejný vzhled stránky • všude stejné umístění a struktura menu (a nadpisů) • odevšud odkaz o jednu úroveň výš a na hlavní stránku • Google přivádí dovnitř webu, nelze užít „zpět“ • odkaz na hlavní stranu: obvykle logo nahoře nebo vlevo nahoře • odkazy vedoucí na jeden cíl mají stejný popis • odkazy vedoucí na různé cíle mají různé popisy • úzce souvisí s přístupností (pro zdravotně či technicky handicapované) • odkazy popsány výstižně • odkazy podtrženy • zvlášť označeny odkazy vedoucí • mimo web • na soubor (místo na stránku) + uvedení velikosti • do nového panelu nebo okna (to ale nedělat zbytečně) Přednáška TNPW1 – Martin Adámek

  24. Základy použitelnosti • volitelně (velmi vhodné): • Drobečková navigace • „Nacházíte se: web > sekce > podsekce > .. > stránka“ • každý drobeček je odkazem na patřičnou stránku/sekci • výhody • link na hlavní stránku • link o úroveň výš • informace „kde jsem“ • informace „kde najdu podobné/obecnější“ • snadná realizace • příklad: www.adamek.cz/basne/moderni-pohadky/vlk-na-lovu Přednáška TNPW1 – Martin Adámek

  25. (W4D) • W3 (WWW): • World Wide Web • W4 • Worth World Wide Web • Worth: • kvalitní, hodnotný, dostatečně důležitý pro ospravedlnění své existence • Zásady W4D nejsou pro kvalitní web nezbytné. • Jejich dodržování však snižuje rizika omezení jeho přístupnosti a použitelnosti. • Respektování W4D automaticky znamená dodržování technických standardů • Výtah podstatného z W4D byl postupně zmíněn během semestru Podrobnosti: http://www.pixy.cz/dogma/dogmaw41/cs/ Přednáška TNPW1 – Martin Adámek

  26. K čemu je PHP? Přednáška TNPW1 – Martin Adámek

  27. PHP – Základní princip • přípona .php • v souboru XHTML kód, navíc do něj dle potřeby místy vloženo PHP • „dynamická“ stránka (opak statické) • „skript na straně serveru“ • php, asp.net, perl, ... • xhtml kód se finálně vytváří při každém zavolání URL, do prohlížeče jde výsledek zpracování skriptu serverem • versus „skript na straně prohlížeče“ • javascript • vykonáván prohlížečem • uživatel má přístup ke zdrojovému kódu • nejistota fce v různých prohlížečích • vhodný např. pro ověření obsahu formuláře před jeho odesláním • příp. validní otevření odkazu v novém panelu/okně • web na něm nesmí být závislý! musí použitelně fungovat i bez něj! Přednáška TNPW1 – Martin Adámek

  28. K čemu je PHP • vložení části kódu stránky • centralizace XHTML šablony (!) • podobně jako styly na jednom místě v CSS,i společné XHTML může být na jednom místě • vložení konkrétního obsahu stránky dle potřeby • podle parametru v URL ( &stranka=produkty ) • vždy volán např. www.web.cz/index.php&clanek=1158 • pomocí mod-rewrite možno parametry zamaskovat jako pěknou URL typu: www.web.cz/sekce/podsekce/stranka • menu, title, apod. pro menší projekty (cca.10 stran) může být natvrdo v index.php, pro větší projekty využití databází (SQL) • zpracování formuláře, e-shop, ... • doplňkové drobnosti • automatický text, práce s časem, log Přednáška TNPW1 – Martin Adámek

  29. Více o PHP • následující slidy po Ing.Freylichovi • http://www.adamek.cz/fim/tvorba-webu/odkazy/ • Google • (příp. TNPW2) Přednáška TNPW1 – Martin Adámek

  30. Co je PHP? Skriptovací jazyk, umožňující programování na straně serveru. Stránka je při každém požadavku na její zobrazení v prohlížeči vygenerována (příkazy PHP skriptu jsou interpretovány) generování stránky probíhá na serveru – nikoliv v prohlížeči hovoříme o tzv. dynamicky generovaných stránkách nebo o tzv. dynamice na straně serveru Přednáška TNPW1 – Martin Adámek

  31. PHP – vložení do (X)HTML Kód PHP lze volně vkládat do zdrojového kódu HTML Úsek PHP kódu uzavíráme do sekvence znaků <? php_kód ?> <?php php_kód ?> Alternativní vložení: Pokud v konfiguračním souboru php.ini povolíme direktivu asp_tags, můžeme používat také sekvenci <% ... %> Přednáška TNPW1 – Martin Adámek

  32. PHP – využití PHP využíváme pro specifické úpravy a automatizované vytvoření vlastní HTML stránky před jejím odesláním uživateli. generování stránky probíhá na serveru – nikoliv v prohlížeči hovoříme o tzv. dynamicky generovaných stránkách nebo o tzv. dynamice na straně serveru Přednáška TNPW1 – Martin Adámek

  33. PHP – využití Velmi častým využitím PHP je komunikace s databází a její obsluha (databáze tvoří datovou základnu dynamického webu) • Z databáze se vyextrahují potřebná data • Předvedou se do požadovaného formátu, provedou se s nimi případné výpočty, uspořádají se, ... • Využijí se pro vytvoření a naplnění obsahu generované (X)HTML stránky Typickým příkladem je použití PHP v kombinaci s MySQL databází – lze však využít i jiné DB (PostgreSQL, MSSQL, ...) Přednáška TNPW1 – Martin Adámek

  34. PHP – syntaxe PHP skript je složen z jednotlivých příkazů. Příkazy PHP jsou odděleny středníkem. Mezi příkazy lze vkládat libovolný počet mezer, tabelátorů, atd. <p>Textový odstavec v HTML kódu</p> <? příkaz 1; příkaz 2; ?> <p>Textový odstavec číslo <? echo $cislo; ?></p> <p>Textový odstavec v HTML kódu</p> Přednáška TNPW1 – Martin Adámek

  35. PHP - proměnné Slouží k uchování hodnot, které používáme ve skriptech. Každá proměnná začíná znakem "$", po kterém následuje název proměnné. První znak názvu proměnné musí být písmeno nebo znak "_". Deklarace proměnné a přiřazení hodnoty: $promenna = "Hello world!"; V PHP není potřeba proměnnou deklarovat předem. V okamžiku přiřazení do proměnné se automaticky určí její typ. Přednáška TNPW1 – Martin Adámek

  36. PHP – typy proměnných integer celé číslo double desetinné číslo string znakový řetězec array pole object objekt Typy proměnných nemusíme explicitně deklarovat. Podle potřeby se automaticky přetypují. Přednáška TNPW1 – Martin Adámek

  37. PHP –výpis hodnoty proměnné Výpis hodnoty proměnné nebo textového řetězce: <? echo $promenna ?> <? echo "Nějaký text" ?> Spojování řetězců (výrazů): V PHP lze vypsat více řetězců a proměnných najednou Je třeba je spojit znakem "." <? echo $prom1." nějaký text ".$prom2 ?> Přednáška TNPW1 – Martin Adámek

  38. PHP – komentáře v kódu Jednořádkový komentář: // text komentáře Víceřádkový komentář /* Text komentáře */ Přednáška TNPW1 – Martin Adámek

More Related