Internetové publikování

Transkript

1 Internetové publikování Doc. Ing. Petr Zámostný, Z Ph.D. místnost: A-72aA tel.: 4222, 4167 (sekretari( sekretariát ústavu 111) petr.zamostny@vscht vscht.czcz

2 Osnova předmp» Úvod - principy fungování webových serverů a browserů» HTML - základní struktura stránky» HTML - základní konstrukce, přenos dat pomocí FTP na server» HTML - formuláře» CSS» CSS vs. HTML konstrukce, pro a proti» JavaScript - základy» Grafická data a multimédia - formáty (GIF, PNG, JPEG), vhodnost použití» Usability - domovská stránka» Usability - navigace, vyhledávání, JavaScript» Usability - návrh stránek respektujících i potřeby handikepovaných uživatelů (zrakově či motoricky postižení, starší osoby)» Anonymita uživatelů Internetu, problematika ochrany osobních dat, zneužívání dat, spam» Právnía morálníaspekty -citování, odkazování, odpovědnost za zveřejněná data» Prezentace vytvořených prací

3 Kontrola studia» Projekt WWW stránky na vlastní téma» Hodnocení zadaných WWW stránek»volitelnáforma»písemně v rozsahu jednostránkové eseje» Ústní prezentace formou přednášky na poslední hodině cvičení v semestru» Zkouškový test ověřující znalosti získané během semestru

4 Zápočet a zkouška ka»zápočet» Bude zapsán na základě předloženého projektu splňujícího všechny exaktně ověřitelné požadavky (viz dále)» Zkouška» Projekt, hodnocení i test budou bodovány samostatně» Celkový výsledek bude dán váženým součtem» 0,3*Projekt + 0,2*Hodnocení + 0,5*Test» Všechny složky musí mít klasifikaci E a lepší» Klasifikace» A... > 90 %» B... > 80 %» C... > 70 %» D... > 60 %» E... > 50 %

5 Projekt» Povinné požadavky (exaktně ověřitelné)» Strukturovaný dokument» Alespoň 3 dokumenty» XHTML nebo HTML 4.01 dokumenty.» Dokumenty musí být validní ( Použijte externí kaskádové styly (CSS).» Obrázky umístěte do zvláštního adresáře.» Projekt umístěn na Další požadavky, které jsou také povinné, ale nelze je zcela exaktně definovat» Minimalizujte formátování pomocí atributů XHTML, snažte se co nejvíce formátování přesunout do CSS.» Dodržujte pravidla pro návrh stránek pro osoby s handicapem (

6 Hodnocení dokumentu» Technické zpracování» Kvalita navigace - umístění, srozumitelnost, logika,...» Obsah, informační hodnota» Srozumitelnost výkladu» Hypertextové odkazy» Bloky textu» Strukturovanost - je vytvořena hierarchie informací (kapitoly, seznamy, tabulky)?» Jazyková stránka» Pravopis» Sloh» Objektivita» Grafika, návrh:» Velikost fontu» Barevné kontrasty, celková čitelnost» Členění a rozvržení stránek» Vliv velikosti monitoru, rychlosti připojení (= čas stahování)» Umělecký dojem» Konzistentnost - slovní výrazy, velká/malá písmena na začátcích hesel, atd.

7 Informační zdroje» Studijní informační systém» Materiály ke cvičením» Literatura» Jiří Kosek: HTML -- tvorba dokonalých WWW stránek -- podrobný průvodce. Grada Publishing 1998.»... nebo jiná, na trhu je bohatá nabídka» Jakob Nielsen: Web design, SoftPress 2002.» WWW standardy» Webdesign»

8 Historie WWW» 50. léta Douglas Engelbert provázané dokumenty» 1980 Ted Nelson projekt Xanadu» 1989 CERN Ženeva - Tim Berners-Lee» Program pro tvorbu hypertextových dokumentů» Název World-Wide Web» infrastruktura internetu» technologie HTML, HTTP, URL

9 Webový ý prohlížeč

10 Základ fungování služby WWW» Přenos souborů, protokol HTTP» Globální adresace souborů - URL» Hypertext, jazyk HTML

11 World-Wide Wide Web WWW server Klient HTTP požadavek - URL HTTP odpověď - dokument» Prohlížeč (browser)» Obsluha protokolu HTTP» Zobrazování obsahu» Obsah (dokumenty, data)» Statický» Dynamický

12 Uniform Resource Identifier/Locator» JAK? KDE? CO? /seznam/seznamvscht /index.html Shéma komunikace Zdroj, server Umístění v rámci zdroje» úplná definice URI je mnohem komplexnější (viz např. Wikipedia)

13 Schéma 1/2» HyperText Transfer protocol» ftp://ftp.vscht.cz/pub/antivir/blaster/fixblast.exe» File Transfer Protocol» file:///» file:///c /windows/win.ini» Lokální soubor»mailto:»

14 Schéma 2/2» Schéma není zcela formální» ftp://ftp.vscht.cz/pub/antivir/blaster/fixblast.exe» inteligentně doplňují schéma chybí-li

15 Server»IP adresa» Řád domény

16 Umíst stění (cesta)»odpovídáskutečné nebo virtuální cestě na serverovém systému» Velikost písmen hraje roli»

17 Obsah» Statický» Souborový systém» Trvale existující dokumenty» Reprezentace obecných informací» Dynamický» Databáze» Dynamicky generované dokumenty» Zobrazení informací specifických pro uživatele, dobu, apod.

18 Prohlížeč» Obsluhuje přenos a interpretuje obsah» Hlavní prohlížeče» Microsoft Internet Explorer» Firefox» Opera» Safari»

19 WWW stránka» WWW stránka dokument (soubor) s informacemi a pokyny pro jejich zobrazení»určena pro WWW prohlížeč interpret WWW dokumentu»standardizace» W3C World Wide Web Consortium»

20 Co obsahuje WWW stránka?» HyperText Markup Language HTML» Text» Značky (tagy)» Pokyny pro interpretaci dokumentu» Informace o struktuře dokumentu» Odkazy na další (binární) data <html> <head> <title>title of page</title> </head> <body> This is my first homepage. <b>this text is bold</b> </body> </html>

21 Vývoj HTML» Značkovací jazyk založený na SGML» Standard Generalized Markup Language ISO 8879:1986» 2.0 první verze s formální specifikací» 3.0 neimplementovaný návrh» Příliš složitá specifikace» 3.2 standard na základě podmnožiny nestandardních řešení různých výrobců» 4.0, 4.01 poslední verze» Kaskádové styly CSS

22 Problémy s WWW současnosti» Prolínání obsahu a formy v HTML» Problémy se strukturou dokumentu» Problematické vyhledávání

23 XHTML» extensible HyperText Markup Language» Upravená verze HTML 4.01» Vyhovuje standardu XML» Nevyžaduje podporu XML na straně prohlížeče» Striktnější

24 XML» extensible Markup Language»SGML light» Orientace na informační hodnotu dokumentu» Možnost definovat další jazyky založené na XML» Striktnější syntaxe

25 Tvorba/Editace stránek» Textové editory» Notepad, PSPad» HTML editory»homesite» WYSIWYG editory»frontpage

26 FrontPage

27 Notepad

28 HomeSite

29 Přehledný HTML kódk

30 Méně přehledný HTML kódk

31 Porovnání editorů» WYSIWYG» Zpravidla snadná a komfortní obsluha» Dokonalá kontrola nad vzhledem, ale slabší platformová nezávislost» Problémy s dodržováním standardů» Netransparentnost tvorby dokumentu» Závislost na použití konkrétního software

32 Porovnání editorů» Textové a HTML editory» Je třeba znát alespoň částečně standardy» Dokonalá kontrola nad kódem» Tvorba dokumentů se může zdát pracnější, ale při důsledném oddělení obsahu a formy a u větších webu je to spíše naopak» Specializované HTML editory nebývají zdarma