Přednáška 5 1. Stručný přehled vývoje html H T m l (HTML...XML... html5), (Web API, JSON, REST,AJAX) 2. Některé související IT IP adresa, doménová adresa, name servery JavaScritp, Jquery, Angular PHP vs JavaScript 3. Nástroje pro tvorbu www stránek konferenční systémy Počítačová Podpora Studia wiki systémy editory html, webové nástroje a online editory další nástroje: ipython notebook, Django, Sphinx 4. Úvod do html tagy, struktura html stránky, lokální definice stylů CSS, tabulka, tag <div>, vzorce v html (LaTeX pmocí MathJax) 1 2 Stručný přehled vývoje html 1990... HTLM navrženo v CERN jako jednoduchý nástroj pro tvorbu dokumentů 1991... CERN zprovozňuje první web 1993... MOSAIC, první prohlížeč s grafickým rozhraním 1996... Vývoj XML 1998... Konsorcium W3C oficiálně doporučuje XML 1.0 1999... W3C vydává html 4.01 od cca 1999 snahy o xhtml 18.10. 2014 vydáno html 5 (osud xml není vyhraněn) 20.11.2014... W3C vydává edici standardů pro webové a aplikace na mobilech (API pro sensory) Web jako platforma pro vývoj aplikací. (převzato z [2]) [2] Standards for Web Applications on Mobile: current state and roadmap, W3C, 11/2014... ( http://www.w3.org/2014/10/mobile-web-app-state/)
API, Web API API Rozhraní pro programování aplikací (Application Programming Interface) API - Tento termín používá softwarové inženýrství. Jde o sbírku procedur, funkcí, tříd či protokolů nějaké knihovny (ale třeba i jiného programu nebo jádra operačního systému), které může programátor využívat. API určuje, jakým způsobem jsou funkce knihovny volány ze zdrojového kódu programu [3] Web API Web API (obecně webová služba) je hlavně definováno protokolem HTTP (soubor pravidel pro komunikaci mezi serverem a klientem => JSON, REST) [3] Wikipedie: Otevřená encyklopedie: API [online]. c2014 [citováno 21. 11. 2014]. Dostupný z WWW: <http://cs.wikipedia.org/w/index.php?title=api&oldid=11432141> JSON JSON (např. v aplikacích AJAX komunikace mezi serverem a klientem)...javascript Object Notation (JavaScriptový objektový zápis, JSON) je způsob zápisu dat (datový formát) nezávislý na počítačové platformě, určený pro přenos dat, která mohou být organizována v polích nebo agregována v objektech. Vstupem je libovolná datová struktura (číslo, řetězec, boolean, objekt nebo z nich složené pole), výstupem je vždy řetězec. Složitost hierarchie vstupní proměnné není teoreticky nijak omezena. [4] Příklad využití v Pythonu (obdobně i v PHP a dalších jazycích): import json data = [ { a: y=sin(t)', t :arange(0,60,0.1), y':sin(t) } ] data_string = json.dumps(data) # převede data do formátu json [4] Wikipedie: Otevřená encyklopedie: JavaScript Object Notation [online]. c2013 [citováno 21. 11. 2014]. Dostupný z WWW: <http://cs.wikipedia.org/w/ index.php?title=javascript_object_notation&oldid=10872112> REST Representational State Transfer (REST) je cesta jak jednoduše vytvořit, číst, editovat nebo smazat informace ze serveru pomocí jednoduchých HTTP volání. Representational State Transfer (REST) je koncept pro design distribuované architektury. Distribuovaná architektura v tomto smyslu znamená, že části programu běží na různých strojích a pro svoji komunikaci využívají síť. Pod programem si můžete představit například webovou aplikaci, kde internetový prohlížeč komunikuje s webovým serverem, kde dochází k vzájemnému volání mezi servery. [5] [5] Wikipedie: Otevřená encyklopedie: Representational State Transfer [online]. c2014 [citováno 21. 11. 2014]. Dostupný z WWW: <http://cs.wikipedia.org/w /index.php?title=representational_state_transfer&oldid=11933222>
AJAX AJAX (Asynchronous JavaScript and XML) je v informatice obecné označení pro technologie vývoje interaktivních webových aplikací, které mění obsah svých stránek bez nutnosti jejich kompletního znovunačítání za pomoci asynchronního zpracování webových stránek pomocí knihovny napsané v JavaScriptu. Na rozdíl od klasických webových aplikací poskytují uživatelsky příjemnější prostředí, ale vyžadují použití moderních webových prohlížečů. [6] JSON + REST (+ AJAX) se stává standardem pro dnešní Web API [6] Wikipedie: Otevřená encyklopedie: AJAX [online]. c2014 [citováno 21. 11. 2014]. Dostupný z WWW: <http://cs.wikipedia.org/w/index.php?title=ajax&oldid= 11690632> IP adresa, doménová adresa, name server http://www.cvut.cz. http://147.32.3.133 JavaScript JavaScript se provádí v prohlížeči na straně klienta O JavaScript http://cs.wikipedia.org/wiki/javascript Online materiály (česky) http://www.tvorba-webu.cz/javascript/ Příklad využití http://www1.fs.cvut.cz/cz/u12110/pps/cv5/pps_c5_4.ht m
Jquery jquery je javascriptová knihovna s širokou podporou prohlížečů, která klade důraz na interakci mezi JavaScriptem a HTML. Byla vydána Johnem Resigem v lednu 2006 na newyorském BarCampu. jquery je svobodný a otevřený software pod licencí MIT. [6] jquery simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. (http://www.tutorialspoint.com/jquery/jquery-overview.htm ) [6] Přispěvatelé Wikipedie, JQuery [online], Wikipedie: Otevřená encyklopedie, c2014, Datum poslední revize 7. 08. 2014, 11:40 UTC, [citováno 21. 11. 2014] <http://cs.wikipedia.org/w/index.php?title=jquery&oldid=11723755> Angular AngularJS Superheroic JavaScript MVW Framework od Google angularjs.org www.zdrojak.cz/clanky/zaciname-s-angularjs www.w3schools.com/angular PHP PHP se provádí na straně serveru Může vytvářet soubory a pracovat s nimi na serveru (javascript ne) http://cs.wikipedia.org/wiki/php Umožňuje vytvářet vlastní editační systémy aspicc.fs.cvut.cz arap.cz...
Nástroje pro tvorbu www stránek konferenční systémy WordPress Drupal ( viz např. web : control.fs.cvut.cz ) wiki servery... editory html, webové nástroje a online editory... další nástroje: ipython notebook Django Sphinx Úvod do html struktura html stránky tagy párové, nepárové lokální definice stylů CSS tabulka tag <div> vzorce v html (LaTeX pmocí MathJax) html5 tag <video> tag <canvas> nové tagy zděděné z div podklady online podklady k předmětu PPS www.jakpsatweb.cz, www.tvorba-webu.cz www.w3schools.com, www.tutorialspoint.com MAPLE Příště Informační zdroje Dotazy, shrnutí probrané látky k závěrečnému testu Děkuji za pozornost