Počítačová Podpora Studia. Přednáška 5 Úvod do html a některých souvisejících IT. Web jako platforma pro vývoj aplikací

, vzorce v html (LaTeX pmocí MathJax)

PPS

2014

PPS – P5

Úvod do html a některých souvisejících IT

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)

PPS

2014

PPS – P5

Úvod do html a některých souvisejících IT

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/) PPS

2014

PPS – P5

Úvod do html a některých souvisejících IT

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: PPS

2014

PPS – P5

Úvod do html a některých souvisejících IT

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: PPS

PPS – P5

2014

Úvod do html a některých souvisejících IT

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: PPS

2014

PPS – P5

Úvod do html a některých souvisejících IT

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: PPS

2014

PPS – P5

Úvod do html a některých souvisejících IT

IP adresa, doménová adresa, name server

http://www.cvut .cz

….

http://147.32.3.133

PPS

2014

PPS – P5

Úvod do html a některých souvisejících IT

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

PPS

2014

PPS – P5

Úvod do html a některých souvisejících IT

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] PPS

2014

PPS – P5

Úvod do html a některých souvisejících IT

Angular „AngularJS — Superheroic JavaScript MVW Framework“ od Google – angularjs.org – www.zdrojak.cz/clanky/zaciname-s-angularjs – www.w3schools.com/angular

PPS

2014

PPS – P5

Úvod do html a některých souvisejících IT

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

• ... PPS

2014

PPS – P5

Úvod do html a některých souvisejících IT

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

PPS

2014

PPS – P5

Úvod do html a některých souvisejících IT

Úvod do html • •

struktura html stránky tagy

– párové, nepárové • • • •

lokální definice stylů CSS tabulka tag

vzorce v html – (LaTeX pmocí MathJax)

•

html5 – – –

•

tag