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

Osnova předmětu http://www.vscht.cz/informatika-chemie Ú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 Zápočet Zkouška 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 %

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.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. Snažte se o přístupnou prezentaci Pokuste se o grafický návrh odpovídající cílové skupině Vaší prezentace

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 Materiály ke cvičení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/ Internet www.jakpsatweb.cz 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 jednoduchý bezstavový protokol Globální adresace souborů – URL jedno URL = jeden dokument Hypertext, jazyk HTML

World-Wide Web Prohlížeč (browser) Obsah (dokumenty, data) WWW server HTTP požadavek - URL Klient 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 úplná definice URI je mnohem komplexnější (viz např. Wikipedia) JAK? KDE? CO? http:// www.vscht.cz /seznam/SeznamVSCHT/index.html Shéma komunikace Zdroj, server Umístění v rámci zdroje

Schéma 1/2 file:/// mailto: http:// https:// ftp:// 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

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

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

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

Obsah Statický Dynamický 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 2.0 – první verze s formální specifikací 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 MS Word

FrontPage

Notepad

HomeSite

Přehledný HTML kód

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

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

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