INTERNET A SÍTĚ Ing. Pavel Smutný, Ph.D. Kancelář: H305 Telefon: 3511 Email: pavel.smutny@vsb.cz Role při tvorbě webových aplikací 1996 2009 GIF HTML CSS CGI analytik, informační architekt, grafik, programátor serverové části, kodér, programátor klientských skriptů, specialista na SEO, odborník na marketing, copywriter Rozhodovací vrstvy při tvorbě webových aplikací povrch kostra struktura obsah strategie konkrétní výstup abstraktní pohled [J.J. GARNETT, 2002] 1
Rozhodovací vrstvy při tvorbě webových aplikací Povrch tvořívýsledný estetický obraz stránky pro uživatele. Jedná se o soustavu grafických a textových prvků, které zpřístupňují návštěvníkovi stránek přehlednou formou jednotlivé služby a přístup k informacím. Kostra soustava tabulek, tlačítek, fotografií a textu rozvržených optimálně na stránce tak, aby byla dosažena jejich maximální efektivita použití. Struktura zatímco kostra stránky je konkrétním výstupem, strukturní vrstva je více abstraktní pojem. Kostra stránky určuje, kde bude na stránce umístěn např. navigační panel, strukturní vrstva definuje jednotlivé položky navigačního menu. Rozsah jsou to konkrétní informace, data, služby, které jsou uživatelům poskytovány prostřednictvím webu. Strategie představuje filozofii stránek, hlavní poslání stránek pro uživatele, čím chce autor stránek zaujmout cílové návštěvníky. PSPAD (www.pspad.com) Titulek stránky Titulek stránky se zobrazuje: v titulkovém pruhu prohlížeče (modrý úplně nahoře) v textu oblíbené položky v historii prohlížeče v záložkách prohlížeče v liště Windows jako název otevřeného okna prohlížeče při přepínání oken přes Alt+Tab ve výsledku vyhledávání jako odkaz Příklad použití: <title>titulek stránky</title> 2
Kódování češtiny V poslední době převládají tři kódování češtiny: ISO 8859-2 Windows-1250 UTF-8 Příklad použití: <meta http-equiv="content-type" content="text/html; charset=iso-8859-2" /> <meta http-equiv="content-type" content="text/html; charset=windows-1250" /> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> Obrázky JPG, JPEG vhodný pro ukládání fotografií a obrázků s velkou barevnou hloubkou. JPG neumožňuje dělat průhledné nebo animované obrázky. Používá ztrátovou kompresi. GIF používá neztrátovou kompresi, soubory jsou relativně větší než JPG, ale zato jsou přesné (zachovávají barvy a kontury). Může se v něm vyskytovat maximálně 256 barev. Jedna z barev se může označit jako průhledná (tu prohlížeč potom nezobrazí), gify též podporují animace. Obrázky - datový objem Celkový datový objem stránky by neměl přesáhnout 100 kb. forma tlačítko pozadí stránky optimum 2 kb 2 kb snesitelné maximum 5 kb 10 kb reklamní baner 8 kb 20 kb fotografie 15 kb 40 kb zmenšenina fotky 5 kb 10 kb obrázkový nadpis 3 kb 8 kb 3
Jak udělat obrázek Stáhnout z webu pomocí příkazu uložit obrázek jako (save image as) a uložit na disk. Vlastní fotografie nebo použít sbírky obrázků. www.flickr.com, office.microsoft.com, www.bluevertigo.com.ar Nakreslit si obrázek myší v grafickém programu a uložit to jako gif nebo jpg. Naskenovat a uložit, také v grafickém programu. Sejmout obrazovku z nějakého programu a upravit v grafickém programu. Obrázky na webové stránce Značka img <img src="nejaky_obrazek.gif alt= popis obrazku /> Další atributy width udává šířku obrázku (uvádí si v pixelech,%) height udává výšku obrázku (uvádí si v pixelech,%) Úkol: Vytvořte galerii obrázků Bude obsahovat 2 fotografie ze složky images Náhledy budou mít stejnou výšku 150px Po kliknutí na náhled se zobrazí obrázek v plné velikosti <a href=./images/obr1.jpg > <img src=./images/obr1.jpg height= 150px alt= Náhled na fotografii /> </a> Kaskádové styly (CSS) větší možnosti formátování dokumentu snadné vytvoření konzistentního stylu oddělení stuktury a stylu větší přístupnost dokumentů dynamická práce se styly možnost formátovat XML dokumenty 4
Kaskádové styly (CSS) Přímý styl <p style="color: red"> Tento odstavec bude červený.</p> Stylopis <style type="text/css"> body {background: #ccc;} </style> Externí stylopis <link rel="stylesheet" href="styl.css" /> Kaskádové styly - syntaxe Přímý styl <tag style="zápis vlastností">stylovaný element</tag> Ve stylopisu tag {zápis vlastností} 2.tag {zápis vlastností} Zápis vlastností vlastnost: hodnota; 2.vlastnost: 2.hodnota; Kaskádové styly - příklad body { background:beige; } h1 { color: yellowgreen; font-family: sans-serif; } p { color: lightskyblue; text-indent: 50px; } http://www.wellstyled.com/tools/colorscheme2/ 5