TNPW1 Technologie pro publikování na webu

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