Připravil: Ing. Jiří Lýsek, Ph.D. Verze: 21.1.2016 Webové technologie Tworba webu, Hybridní aplikace, Responsivní design, HTML5, nová API
strana 2 Úvod http://akela.mendelu.cz/~lysek/ IPI Úkol Cvičení
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
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
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
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
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ů
strana 8 Server side technologie DB Databáze MySQL PostgreSQL SQLite Druhy Relační SQL jazyk Ostatní (nosql)
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,
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!
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í
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
strana 13
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
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
strana 16 Komunikace server klient HTTP přenos bezstavový Různé formáty XML, JSON AJAX, AJAJ WebSocket
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
strana 18
strana 19
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
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í
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í
strana 23 CSS media queries Typ média, nejčastěji screen print all @media screen { body { font-size: 12px; } } @media print { body { font-size: 12pt; } }
strana 24 CSS media queries upřesnění Možnost zvolit CSS sadu i podle vlastností média @media screen and (min-width: 801px) { #container { width: 990px; } } @media screen and (max-width: 800px) { #container { width: 760px; } }
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
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ů
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
strana 28 Responsivní design často pomůžou CSS frameworky jako Bootstrap apod. vhodné pro layout případně pro prototyp grid systémy
strana 29 CSS novinky animace, transformace calc() např. calc(80% - 6px) jednotky rem vw, vh www.caniuse.com
strana 30 CSS novinky CSS preprocesory - LESS, SASS nutný překlad do CSS výhody proměnné funkce zanoření
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
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č?
strana 33 Tag <canvas> Implementuje plátno, na které je možné zobrazit bitmapovou grafiku Neukládá nakreslené tvary jako objekty! Cvičení
strana 34 Tag <svg> Zobrazení vektorové grafiky Ukázka http://www.w3schools.com/html/html5 _svg.asp
strana 35 Tag <audio> Ukázka http://www.w3schools.com/html/html5 _audio.asp
strana 36 Tag <video> Ukázka http://www.w3schools.com/html/html5 _video.asp
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 Email URL
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
strana 39 JS History API Modifikace obsahu adresního řádku a historie prohlížeče. history.pushstate window.onpopstate Ukázka
strana 40 JS Local Storage API Úložiště klíč-hodnota Ukázka
strana 41 JS Drag&Drop API Ukázka
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
strana 43 JS Geolokace API Spolupráce s GPS Ukázka http://www.w3schools.com/html/html5 _geolocation.asp
strana 44 Web Workers API Vlákna pro JS Běží na pozadí, hlavnímu vláknu zasílá zprávy
strana 45 WebGL API OpenGL v prohlížeči ThreeJS Unity Ukázka https://www.chromeexperiments.com/ webgl
strana 46 WebSocket API obousměrné spojení dokáže vyvolat událost