Internetové publikování Doc. Ing. Petr Zámostný, Z Ph.D. místnost: A-72aA tel.: 4222, 4167 (sekretari( sekretariát ústavu 111) e-mail: petr.zamostny@vscht vscht.czcz
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í http://www.vscht.cz/informatika-chemie
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
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 %
Projekt» Povinné požadavky (exaktně ověřitelné)» Strukturovaný dokument» Alespoň 3 dokumenty» XHTML nebo HTML 4.01 dokumenty.» Dokumenty musí být validní (http://validator.w3.org).» Použijte externí kaskádové styly (CSS).» Obrázky umístěte do zvláštního adresáře.» Projekt umístěn na http://web.vscht.cz/» 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 (http://www.w3.org/wai/quicktips/).
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.
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. Grada Publishing 1998.»... nebo jiná, na trhu je bohatá nabídka» Jakob Nielsen: Web design, SoftPress 2002.» WWW standardy» http://www.w3.org/» Webdesign» www.interval.cz
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
Webový ý prohlížeč
Základ fungování služby WWW» Přenos souborů, protokol HTTP» Globální adresace souborů - URL» Hypertext, jazyk HTML
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ý
Uniform Resource Identifier/Locator» http://www.vscht.cz/seznam/seznamvscht/index.html JAK? KDE? CO? http:// www.vscht.cz /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)
Schéma 1/2» http://» http://www.vscht.cz/kot/cz/index.html» HyperText Transfer protocol» http://» https://mailex.vscht.cz»ftp://» ftp://ftp.vscht.cz/pub/antivir/blaster/fixblast.exe» File Transfer Protocol» file:///» file:///c /windows/win.ini» Lokální soubor»mailto:» mailto:petr.zamostny@vscht.cz
Schéma 2/2» Schéma není zcela formální» ftp://ftp.vscht.cz/pub/antivir/blaster/fixblast.exe» http://ftp.vscht.cz/pub/antivir/blaster/fixblast.exe» https://ifis.vscht.cz/» http://ifis.vscht.cz/»prohlížeče inteligentně doplňují schéma chybí-li
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
Umíst 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
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. http://www.vscht.cz/informatika-chemie http://www.google.com/search?q=internet
Prohlížeč» Obsluhuje přenos a interpretuje obsah» Hlavní prohlížeče» Microsoft Internet Explorer» Firefox» Opera» Safari»
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/
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>
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
Problémy s WWW současnosti» Prolínání obsahu a formy v HTML» Problémy se strukturou dokumentu» Problematické vyhledávání
XHTML» extensible HyperText Markup Language» Upravená verze HTML 4.01» Vyhovuje standardu XML» Nevyžaduje podporu XML na straně prohlížeče» Striktnější
XML» extensible Markup Language»SGML light» Orientace na informační hodnotu dokumentu» Možnost definovat další jazyky založené na XML» Striktnější syntaxe
Tvorba/Editace stránek» Textové editory» Notepad, PSPad» HTML editory»homesite» WYSIWYG editory»frontpage
FrontPage
Notepad
HomeSite
Přehledný HTML kódk
Méně přehledný HTML kódk
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
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