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

Přednáška TNPW1 – Martin Adámek 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*/

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 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 a, příp. někde  musejí tam být a, příp. někde  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 – –na vizitku ani do katalogu se to tak nepíše –a tedy ani jinam uvádějte URL bez subdomény www je někdy vhodné uvádět s protokolem – díky „ 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 u 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) [ ]

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: 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 – 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:

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:

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ř. –pomocí mod-rewrite možno parametry zamaskovat jako pěknou URL typu: –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 webu/odkazy/ 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ů Alternativní vložení: Pokud v konfiguračním souboru php.ini povolíme direktivu asp_tags, můžeme používat také sekvenci 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) 1)Z databáze se vyextrahují potřebná data 2)Předvedou se do požadovaného formátu, provedou se s nimi případné výpočty, uspořádají se,... 3)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. Textový odstavec v HTML kódu Textový odstavec v HTML kódu <? příkaz 1; příkaz 2; ?> Textový odstavec číslo Textový odstavec v HTML kódu Textový odstavec číslo Textový odstavec v HTML kódu

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: 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 "."

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 Text komentáře komentáře*/