Připravil: Ing. Jiří Lýsek, Ph.D. Verze: Webové technologie

Transkript

1 Připravil: Ing. Jiří Lýsek, Ph.D. Verze: Webové technologie Tworba webu, Hybridní aplikace, Responsivní design, HTML5, nová API

2 strana 2 Úvod IPI Úkol Cvičení

3 strana 3 WEB Dříve: místo pro prezentaci a umístění dat prohlížeče pouze na PC Nyní: platforma pro běh aplikací aplikace běží v prohlížečích a na webových serverech spouští se na různých zařízeních

4 strana 4 WEB Dříve: Zvládnutí HTML a CSS stačilo k tvorbě kompletních prezentací Nyní: HTML a CSS jsou dílčí technologie hlavní jsou: Skripty, databáze, propojení mnoha různých technologií, postupů a služeb

5 strana 5 WEB Dříve: Velké aplikace vytvářely jen velké společnosti Bylo to drahé a složité Nyní: Pomocí hotových nástrojů lze udělat velkou aplikaci i menším týmu s méně zkušenými pracovníky

6 strana 6 Rozdělení technologií Server side Technologie na straně serveru Program + databáze Cloud (škálování výkonu) Client side Technologie na straně klienta Velmi rozdílné Nedá se spolehnout na dostupnost ani funkci

7 strana 7 Server side technologie skriptování Program schopný komunikace přes HTTP protokol (Apache, IIS, ) Posílá data přes HTTP protokol Integruje podporu pro: PHP,.net, JavaScript, Java, Ruby, Perl stará se o komunikaci s databází a řeší požadavky návštěvníků

8 strana 8 Server side technologie DB Databáze MySQL PostgreSQL SQLite Druhy Relační SQL jazyk Ostatní (nosql)

9 strana 9 Server side technologie - PHP Bezpečnost nové hashovací funkce Rychlost, Cloud PHP7, HHVM, HippyVM Syntaxe: jmenné prostory, anonymní funkce, traits, nové operátory,

10 strana 10 PHP7 typ. kontrola pro skalární typy (volitelně) operátor?? echo $_GET[" "]?? "vychozi hodnota" operátor <=> pro řazení (vrací 0, -1, 1) $v = 1 <=> 2; -1 anonymní třídy zrušeno rozhraní MySQL rychlost!

11 strana 11 Server side technologie - frameworky obsahují obvykle ORM Návrhový vzor Data Access Oobject (DAO) nebo ActiveRecord (AR) některé mají generátory kódu, CLI reagují na nové možnosti PHP důraz na správný styl psaní

12 strana 12 Který si vybrat moderní, bezpečný a vyvíjený věnujte pozornost délce podpory vybrané verze vhodný pro můj cíl s dobrou dokumentací používající nástroje, které znám Composer, Git, PhpUnit, s velkou (aktivní) komunitou

13 strana 13

14 strana 14 Client side technologie HTML, CSS, zobrazení obrázků, SVG, video, audio, PDF, Víceméně standard JavaScript Nativní podpora v prohlížečích Flash, Silverlight, Shockwave, Jako plugin pro prohlížeč - nepoužívat

15 strana 15 Client side technologie - frameworky Přesun logiky aplikace na klienta a komunikace se serverem pomocí REST API Angular JS - MVC další přednáška React + Flux

16 strana 16 Komunikace server klient HTTP přenos bezstavový Různé formáty XML, JSON AJAX, AJAJ WebSocket

17 strana 17 Hybridní aplikace pro mobilní zařízení obalení webové aplikace nativním kontejnerem, který zpřístupní nativní API zařízení používá známé a dostupné technologie nemá plný přístup k zařízení Apache Cordova/PhoneGap

18 strana 18

19 strana 19

20 strana 20 Hybridní aplikace Existují JS+CSS systémy simulující grafiku a chování nativních GUI Material design -> Angular Material Ionic Angular 2

21 strana 21 Responsivní design Různý vzhled prezentace pro různá zařízení Rozlišení a barevnost obrazovky Rozměry a orientace Způsob ovládání

22 strana 22 Responsivní design Realizace pomocí CSS Obrázky (bitmapové) Musí měnit velikost Relativní jednotky %, em, rem, vw, vh CSS media queries Realizace pomocí JavaScriptu To co nejde přes CSS, individuální

23 strana 23 CSS media queries Typ média, nejčastěji screen print screen { body { font-size: 12px; } print { body { font-size: 12pt; } }

24 strana 24 CSS media queries upřesnění Možnost zvolit CSS sadu i podle vlastností screen and (min-width: 801px) { #container { width: 990px; } screen and (max-width: 800px) { #container { width: 760px; } }

25 strana 25 CSS media queries upřesnění Možnost volit dle: Šířka/výška prohlížeče Šířka/výška zařízení Orientace Poměr stran Počet zobrazitelných barev Rozlišení v DPI

26 strana 26 Responsivní design - postup Při tvorbě nové stránky Nabalování nových funkcí Začínáme od nejmenší verze Při dotvoření do stávajícího projektu Odstranění nadbytečných prvků

27 strana 27 Responsivní design - Ladění Možnost zvolit sadu CSS podle média např. WebDeveloper Toolbar pro FF Možnost změny velikosti pohledu Zabudováno do FF

28 strana 28 Responsivní design často pomůžou CSS frameworky jako Bootstrap apod. vhodné pro layout případně pro prototyp grid systémy

29 strana 29 CSS novinky animace, transformace calc() např. calc(80% - 6px) jednotky rem vw, vh

30 strana 30 CSS novinky CSS preprocesory - LESS, SASS nutný překlad do CSS výhody proměnné funkce zanoření

31 strana 31 HTML5 a nová API Balík inovací (nejen) v HTML Reálně obsahuje: Nové HTML tagy CSS3 definice Nové JS API integrované v prohlížečích Lepší možnosti ovládání prohlížeče Modifikace elementů Možnost vytvořit nové (bohatší) chování RIA

32 strana 32 HTML5 a nová API Různá úroveň podpory v jednotlivých prohlížečích Nutné je myslet na alternativní obsah pro starší/mobilní prohlížeče i pro zařízení se sníženou možností prezentace (např. méně barev) co je starší prohlížeč?

33 strana 33 Tag <canvas> Implementuje plátno, na které je možné zobrazit bitmapovou grafiku Neukládá nakreslené tvary jako objekty! Cvičení

34 strana 34 Tag <svg> Zobrazení vektorové grafiky Ukázka _svg.asp

35 strana 35 Tag <audio> Ukázka _audio.asp

36 strana 36 Tag <video> Ukázka _video.asp

37 strana 37 Nové vstupní prvky pro <form> Implementace je v různém stádiu v různých prohlížečích Date Time Number Range URL

38 strana 38 Nové vstupní prvky pro <form> Výchozí atribut type je u formulářových prvků vždy text I pokud prohlížeč nový typ nezná Validace je nutná VŽDY i na straně serveru

39 strana 39 JS History API Modifikace obsahu adresního řádku a historie prohlížeče. history.pushstate window.onpopstate Ukázka

40 strana 40 JS Local Storage API Úložiště klíč-hodnota Ukázka

41 strana 41 JS Drag&Drop API Ukázka

42 strana 42 JS File API Přístup k souborům na lokálním disku. Přes drag&drop Pomocí formulářového vstupu type=file Ukázka

43 strana 43 JS Geolokace API Spolupráce s GPS Ukázka _geolocation.asp

44 strana 44 Web Workers API Vlákna pro JS Běží na pozadí, hlavnímu vláknu zasílá zprávy

45 strana 45 WebGL API OpenGL v prohlížeči ThreeJS Unity Ukázka webgl

46 strana 46 WebSocket API obousměrné spojení dokáže vyvolat událost