Internetové publikování

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

2. Osnova předmětu • Ú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í http://www.vscht.cz/informatika-chemie

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 • 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,4*Projekt + 0,1*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é dokumenty, musí zde být nějaký skutečný obsah, část z něj musí být textová • Alespoň 3 dokumenty • XHTML nebo HTML 4.01dokumenty. • Dokumentymusíbýtvalidní (http://validator.w3.org). • Použijteexterníkaskádovéstyly (CSS). • Obrázkyumístěte do zvláštníhoadresáře. • Projekt umístěn na http://web.vscht.cz/… • Další požadavky, které jsou také povinné, ale nelze je zcela exaktně definovat  • Minimalizujteformátovánípomocíatributů XHTML, snažte se co nejvíceformátovánípřesunout do CSS. • Snažte se o přístupnou prezentaci • Pokuste se o grafický návrh odpovídající cílové skupině Vaší prezentace

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 • http://student.vscht.cz • Materiály ke cvičením • http://www.vscht.cz/kot/cz/studijni-materialy.html#ipub • Literatura • Jiří Kosek: HTML -- tvorba dokonalých WWW stránek -- podrobný průvodce. GradaPublishing 1998. • ... nebo jiná, na trhu je bohatá nabídka • Jakob Nielsen: Web design, SoftPress 2002. • WWW standardy • http://www.w3.org/ • Internet • www.jakpsatweb.cz • www.interval.cz

8. HistorieWWW • 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 • jednoduchý bezstavový protokol • Globální adresace souborů – URL • jedno URL = jeden dokument • Hypertext, jazyk HTML

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

12. Uniform Resource Identifier/Locator • http://www.vscht.cz/seznam/SeznamVSCHT/index.html • úplná definice URI je mnohem komplexnější (viz např. Wikipedia)

13. Schéma 1/2 • http:// • http://www.vscht.cz/kot/cz/index.html • HyperText Transfer protocol • https:// • https://mailex.vscht.cz • ftp:// • ftp://ftpin.vscht.cz/pub/ • File Transfer Protocol • file:/// • file:///c|/windows/win.ini • Lokální soubor • mailto: • mailto:petr.zamostny@vscht.cz

14. Schéma 2/2 • Schéma není zcela formální • ftp://ftpin.vscht.cz/ • http://ftpin.vscht.cz/ • Prohlížeče „inteligentně“ doplňují schéma chybí-li

15. Server • IP adresa • http://147.33.15.10/ • Doménové jméno • http://3-uroven.2-uroven.1-uroven • http://www.vscht.cz • http://student.vscht.cz Řád domény

16. Umístění (cesta) • Odpovídá skutečné nebo virtuální cestě na serverovém systému • Velikost písmen hraje roli • http://www.vscht.cz/homepage • http://www.vscht.Cz/homepage • http://www.vscht.cz/Homepage

17. 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. Obsah http://www.google.com/search?q=internet http://www.vscht.cz/informatika-chemie

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

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 • http://www.w3.org/

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 • MS Word

26. FrontPage

27. Notepad

28. HomeSite

29. Přehledný HTML kód

30. „Méně“ přehledný HTML kód

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 • Omezené využití pro publikační systémy

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