TNPW1 Technologie pro publikování na webu

1. TNPW1Technologie pro publikování na webu Organizační úvod Základní pojmy Přednáška č. 1 Ing. Martin Adámek Katedra informačních technologií FIM UHK

2. Kontakt • Ing. Martin Adámek • www.adamek.cz/fim • e-mail: martin.adamek na uhk.cz • dveře č. 344 (naproti J22 a J23) • konzultace po dohodě nebo kratší mezi výukou • WebCT (Olivu) pro TNPW1 nepoužíváme • Facebook: „Martin Adámek – výuka“ • Některá cvičení a přednášky Ing. Jiří Štěpánek • Některá cvičení Mgr. Tomáš Rychetský Přednáška TNPW1 – Martin Adámek

3. TNPW1 – smysl a náplň předmětu • technologie • vnitřek webu (kód), ne atraktivita vnějšího vzhledu • laik obvykle neocení • vytvoření kvalitního webu vyžaduje zvládnout • technologii (řešíme) • přehlednost, použitelnost, ef. webdesign (řešíme velmi okrajově) • přístupnost (řešíme velmi okrajově) • grafiku • zajímavý obsah • text bez pravopisných chyb (učivo SŠ, část hodnocení projektu) • a další • pro dynamický web navíc: • jeho naprogramování (TNPW2, Mgr. Vacek) • databáze (DBS1 a 2) Přednáška TNPW1 – Martin Adámek

4. TNPW1 – smysl a náplň předmětu • TNPW jen jedna část z mnoha=> pro kompletní schopnost tvorby webu nutno přidat další znalosti • Řešíme to pod kapotou, ne tvar karoserie. • Řešíme funkci, ne estetiku. • Pěkná grafika v projektu sice nevadí, ale body nepřidá. • TNPW1 nepodceňujte ! • Zkušenosti s tvorbou webu WYSIWYG (např. ve Frontpage) se hodí cca. při prvních dvou cvičeních, pak téměř ne. Přednáška TNPW1 – Martin Adámek

5. Organizace předmětu • přednášky • teorie • účast nepovinná, ale velmi doporučená(aby bylo co procvičovat) • cvičení • procvičení, příp. podrobnosti k teorii • povinná – prezenční úkoly přímo ve cvičení => body ke zkoušce Přednáška TNPW1 – Martin Adámek

6. Organizace předmětu • semestrální projekt (webová prezentace) • zadání koncem semestru • předběžná podoba podrobného zadání: na webu v XLS tabulce s výsledky ze cvičení • odevzdává se cvičícímu do konce semestru • za projekt body a zápočet • vyvarujte se pokusů o odevzdání cizího projektu ! • na závěr zkouška • body z teoretického testu ve zkouškovém období (hodnotí se odborné znalosti a schopnosti, nikoliv oděv) • součet bodů ze cvičení, projektu a zkoušky => známka Přednáška TNPW1 – Martin Adámek

7. Bodové hodnocení předmětu • semestrální projekt: 40 bodů (max. 41) • cvičení za celý semestr: 14 bodů • zkouška: 46 bodů Hodnocení Přednáška TNPW1 – Martin Adámek

8. Obory a semestry • letní i zimní semestr • pro snížení dramatičnosti zápisu na cvičení rozděleno podle oborů • dodržení doporučeného studijního plánu není vyžadováno • při nedostatku místa pro ty, kdo teď TNPW mít mají,bude vyškrtnut potřebný počet těch, kdo ho teď mít nemají • Zimní semestr: obor AI3 • Letní semestr: obor IM3, IM5 • Patřičné obory mají přednost, zbylé obory mají možnost dle kapacity Přednáška TNPW1 – Martin Adámek

9. Kapacita cvičení • TNPW1 se učí oba semestry • kdo je oficiálně zapsán v Událostech ISITu, má přednostní nárok na účast na cvičení • když se vejdete, můžete mezi mými dvěma cvičeními libovolně přebíhat a fluktuovat Přednáška TNPW1 – Martin Adámek

10. Zjednodušené absolvování • možnost do 3.cvičení (2 týdny) odevzdat vyhovující projekt • při neúspěchu • normální účast na cvičení a normální průběh studia předmětu • při úspěchu (min. 30 bodů za projekt) • není nutno chodit na cvičení, za ně se přičte 8 bodů • zkouška s ostatními za stejných podmínek • bude se řešit na cvičení Přednáška TNPW1 – Martin Adámek

11. Zdroje informací • přednášky (ideálně s osobní účastí) • cvičení • další tipy, odkazy na další vhodné zdroje: • www.adamek.cz/fim/tvorba-webu • projděte si alespoň stránku „Tipy a rady“ • řešení konkrétních problémů: Google Přednáška TNPW1 – Martin Adámek

12. (Doplňková literatura) Kosek J., Tvorba dokonalých HTML stránek Kučera M., HTML – kouzla na webu Musciano Ch., Kennedy B., HTML a XHTML – kompletní průvodce Naik D. C., Internet standards and protocols Prokop M., CSS - kaskádové styly pro webdesignéry Přednáška TNPW1 – Martin Adámek

13. Prostředí WWW World Wide Web – nejznámější, nejrozšířenější služba internetu Celosvětová dostupnost stránek Nezávislost na platformě (PC + Windows, Apple + Mac OS, Unix s nadstavbou X-Window, smartphony, MDA) Internet nemá „majitele“ Aplikuje se legislativa jednotlivých zemí šance vzdělávat se, získávat a publikovat informace, pracovat na dálku, bavit se, páchat zločiny, … Přednáška TNPW1 – Martin Adámek

14. (Pravěk WWW) Skupina vědců z Evropského centra pro jaderný výzkum navrhla jazyk pro sdílení elektronických dokumentů přes Internet HTML = Hypertext Mark-up Language sjednocení obrázků, zvuku a textu díky WWW umožněno hypertextové propojení První webový prohlížeč: MOSAIC vytvořen v Národním centru pro superpočítačové aplikace na universitě v Illinois měl fce pro přístup k službám FTP a Gopher Přednáška TNPW1 – Martin Adámek

15. WWW - přítomnost Internet má své standardy (RFC, Request For Comment) Základem stále HTML – Hypertext Mark-up Language Struktura hypertextu stojí na URL adresách a odkazech Hlavním komunikačním protokolem je HTTP Odlišujte dva pojmy: webová prezentace (web, webové stránky, web site) celý web jedné firmy, celý osobní web jednoho člověka, portál, server; obvykle obsah jedné domény skládá se z více stránek webová stránka (web page) jeden konkrétní html soubor s konkrétní URL adresou Přednáška TNPW1 – Martin Adámek

16. (HTML – vývoj jazyka) HTML 0.9 - Tim Berners Lee (1991) Logické členění textu, úrovně, odkazy, obrázky HTML 2.0 Vytvořen Level 1 a Level 2 (RFC 1866) Podpora formulářů HTML 3.0 – vytvořena DTD (Document Type Definition) v univerzálním značkovacím jazyce SGML Standard vytvořen z rozšíření jazyka HTML+ (rok 1995) Podpora tabulek a matematických vzorců Kompletní podpora pouze u experiment. prohlížeče ARENA Přednáška TNPW1 – Martin Adámek

17. (HTML – vývoj jazyka) HTML 3.2 (rok 1996) Verze 3.0 byla mohutným skokem, ale bez potřebné podpory ze strany prohlížečů. W3C rozhodlo o vlastnostech z verze 3.0, kterými se rozšíří verze 2.0 Vzniká nové „oficiální HTML 3.0“ (kódové jméno Wilbur) s konečným označením HTML 3.2 Podpora tabulek, Java apletů, lepší kontrola formátování HTML 4.0 (rok 1997) rozšíření HTML 3.2 s kódovým označením Cougar Podpora frames, skriptů, vkládaných objektů, vícejazyčných dokumentů Přednáška TNPW1 – Martin Adámek

18. Aktuální standardy HTML ! • Různé normy pro konkrétní syntaxi jazyka HTML • Definuje W3C (WWW Consorcium) – www.w3.org • Document Type Declaration, doctype, DTD • Běžně se používá HTML 4,01 • Zveřejněn koncept HTML 5 • umožňuje přímé vložení multimediálního obsahu • Běžně se používá XHTML 1,0 a 1,1 • Zastaven vývoj XHTML 2 • Součástí konceptu HTML 5 je i definice XHTML 5 Přednáška TNPW1 – Martin Adámek

19. Aktuální standardy HTML ! • HTML vs. XHTML • XHTML je přísnější • kód XHTML je čistší, lépe odděluje grafiku od obsahu • XHTML = HTML respektující syntaxi XML • XHTML = Extensible Hypertext Markup Language • elementy v HTML jsou velkými písmeny, v XHTML malými Přednáška TNPW1 – Martin Adámek

20. Aktuální standardy HTML ! • Podle přísnosti (čistoty kódu) – od nejméně přísného: • HTML 4,01 • XHTML 1,0 Transitional (Frameset) – „pro přechod“ obsahuje i staré nedoporučované elementy • XHTML 1,0 Strict – jen elementy,které nejsou v HTML 4,0 označeny jako nedoporučené – např. nepovoluje rámy (framy) • XHTML 1,1 – nepovoluje a name (skok na id), vyžaduje lepší záhlaví tabulek • XHTML 2 • V TNPW1 vyžadováno XHTML 1,0 Strict, • možné je použít i přísnější XHTML 1,1 Přednáška TNPW1 – Martin Adámek

21. URL – Uniform Resource Locator • jednotný způsob označování objektů (WWW stránek, souborů v FTP archivech, mailových adres, …) na Internetu • URL odkazy: řešení odkazů na jednotlivé WWW stránky a další objekty v rámci hypertextového dokumentu • Příklad URL odkazu: http://www.uhk.cz/heslo.asp • URL odkaz zahrnuje informace o: • WWW serveru • cílovém adresáři • jménu a příponě cílového souboru Přednáška TNPW1 – Martin Adámek

22. URL – Uniform Resource Locator • Schéma URL odkazu <protocol>://<user>:<password>@<host>:<port>/<path> <user> … uživatelské jméno (neanonymní FTP přihlášení) <host>… doménové jméno cíle nebo jeho IP adresa <port>… číslo IP portu (př: http://mail.mujserver.cz:8383) (např. u průmyslových kamer) <path>… cesta k cílovému souboru v rámci WWW serveru ftp://obchodnik:tux007@obchod.papirnictvi.cz/zbozi/ceniky_zip/propisky.zip Doménové jméno = symbolický název v systému DNS Přednáška TNPW1 – Martin Adámek

23. Složení URL(Uniform Resource Locator) • protokol • http, https, ftp • ftp, resp. sftp užíván mj. pro upload obsahu webu na server • SW: web. prohlížeč, Total Commander, WinSCP • doménové jméno • subdoména • www, posta, isit • doména • uhk • topdoména (topleveldoména, TLD) • národní (cz) x generická (com) • cesta • jako v souborovém systému na HDD (pevném disku), jen „/“, ne „\“ • struktura souborů webu na serveru = struktura souborů webu na HDD • adresář • konkrétní soubor, vč. přípony (htm, html, php, cgi, asp, ...) Přednáška TNPW1 – Martin Adámek

24. Používáte Facebook? několikrát denně 1x denně několikrát týdně 1x týdně méně často přestal(a), ale nesmazal(a) účet smazal(a) účet nezačal(a) Přináší vám někdy něco užitečného, např. smysluplné informace, tedy nikoliv jen zábavu? vůbec (nic užitečného) výjimečně občas často téměř výhradně (užitečné informace) Anketa – Sociální sítě (nesouvisí s TNPW) Přednáška TNPW1 – Martin Adámek

25. Anketa – Sociální sítě (nesouvisí s TNPW) • Používáte jiné sociální sítě? • ne • ano + jaké? • Máte zájem o využívání FB k předávání doplňkových informací souvisejících s výukou? • resp. odkazy na zajímavosti, bez kterých se dá přežít • Doplňující informace a aktuality k TNPW • Krajta • patrně bude založena FB fan page Přednáška TNPW1 – Martin Adámek

26. Příští přednáška • Architektura internetu, DNS servery • (X)HTML editory Přednáška TNPW1 – Martin Adámek