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

Rozměr: px

Začít zobrazení ze stránky:

Download "Připravil: Ing. Jiří Lýsek, Ph.D. Verze: 24.4.2015 Webové aplikace"

Žaneta Dvořáková
před 9 lety
Počet zobrazení:

1 Připravil: Ing. Jiří Lýsek, Ph.D. Verze: Webové aplikace Návrh webové stránky responsivní design

2 strana 2 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

3 strana 3 WEB Dříve: Zvládnutí HTML a později 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í a postupů

a CSS jsou dílčí technologie hlavní jsou: Skripty,

4 strana 4 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

5 strana 5 Rozdělení technologií Server side Technologie na straně serveru Volíme si sami Client side Technologie na straně klienta Velmi rozdílné Nedá se spolehnout na dostupnost ani funkci

6 strana 6 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č Někdy neexistuje pro danou verzi/platformu

Nativní podpora v prohlížečích Flash, Silverlight, Shockwave,

7 strana 7 Návrh webové aplikace Hrubé zadání Specifické zadání Volba technologií Prototyp (část aplikace) Realizace Údržba

8 strana 8 Analýza Předpokládané zatížení a využití webu globálně/lokálně Návrh entit alespoň ER diagram Use case (někdy to není potřeba) a sekvenční diagramy

9 strana 9 Realizace Návrh databáze Tvorba server side programů HTML šablony JavaScriptové funkce Efekty Logika Propojení

10 strana 10 Tvorba grafického vzhledu Zjištění, na kterých zařízeních chceme aplikaci zobrazovat Prototyp Realizace grafického návrhu Grafický návrh je převeden na HTML a CSS kód JavaScript se používá pro efekty

Prototyp Realizace grafického návrhu Grafický návrh

11 strana 11 Responsivní design Různý vzhled prezentace pro různá zařízení Rozlišení obrazovky Rozměry a orientace Způsob ovládání (Netýká se jen webu)

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

Obrázky (bitmapové) Musí měnit velikost CSS media

13 strana 13 Postup tvorby responsivního webu 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 Změna layoutu Odstranění nadbytečných prvků Volba breakpointů

nejmenší verze Při dotvoření do stávajícího projektu

14 strana 14 Dynamický layout stránky CSS Float CSS Flexbox Počítat s možností změny velikostí, pozic a vzhledu jednotlivých prvků CSS frameworky Bootstrap Foundation

15 strana 15 Vhodná volba rozložení a chování prvků řádkové menu se změní na sloupcové klikací plochy se zvětší pro dotek obsah se zalomí obrázky se zmenšují podle šířky může se zmenšit písmo CSS frameworky Bootstrap Foundation

zvětší pro dotek obsah se zalomí obrázky se zmenšují

16 strana 16 CSS flexbox Automatická distribuce šířky jednotlivých prvků a případné zalomení možnost nastavit prioritu růstu možnost i vertikálního uspořádání je to nové existuje stará a nová syntaxe

17 strana 17 Relativní jednotky Používáme jednotky %, em, rem, ex, Výpočet procentuální velikosti pro převod z grafického návrhu: požadováno[ px] velikost[%] 100 kontext [ px]

18 strana 18 Relativní/absolutní jednotka absolutní cm, mm, in, pt, pc relativní em, rem, ex, ch, vw, vh, vmin, vmax něco mezi px - absolutní na obrazovce, relativní ve skutečnosti (podle DPI/PPI)

19 strana 19 CSS pixely poměr mezi hardwarovým pixelem a obrazovým (např. Retina) např. zobrazují obrazový pixel přes 4 hardwarové

20 strana 20 Relativní jednotky Jednotka % je vždy vztažena k nadřazenému prvku někdy nejde definovat výšku, protože není známá kontejner, který má proměnlivou výšku by se nekonečně zvětšoval

21 strana 21 Relativní jednotky Jednotka em/rem je definována jako aktuální velikost písma rodiče/kořene písmo nastavujeme např. v jednotkách pt (jako ve Wordu) pt = 1/72palce dá se zjistit přes DPI zobrazovacího zařízení základní písmo nastavíme na <html> a potom používáme už jen jednotky em/rem

22 strana 22

23 strana 23 Relativní jednotky Reálně vznikne nějaká kombinace absolutních a relativních jednotek bitmapová grafika border: 1px solid #...; nejtenčí rámeček na daném zařízení problém s výpočtem šířky pro standardní box model width: calc(25% - 2px) dá se přepnout

24 strana 24

25 strana 25 Obrázky Nastavíme CSS: img { max-width: 100%; height: auto; je vhodné použít větší bitmapu než odhadujeme maximální px velikost kvůli CSS pixelům

26 strana 26 DEMO Ukázka obrázku

27 strana 27 CSS media queries Typ média, nejčastěji screen print screen { body print { body {

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

29 strana 29 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

30 strana 30 DEMO Ukázka media query

31 strana 31 Metainformace viewport definuje chování na malých zařízeních <meta name="viewport" content=" " /> width=device-width hodnota initial-scale=1 maximum-scale=5 minimum-scale=0.5 user-scalable=yes no

32 strana 32 Ladění Možnost zvolit sadu CSS podle média např. WebDeveloper Toolbar pro FF Možnost změny velikosti pohledu Zabudováno do prohlížeče

33 strana 33 CSS pro tisk Ideální tiskový výstup z HTML neexistuje problém s velikostmi (každá tiskárna má individuální rozměry okrajů) problém se zalomením stránky (v HTML nic takového neexistuje) Možnost použít PDF PDF knihovny umí počítat velikosti textových bloků

34 strana 34 CSS pro tisk Netisknout menu, hlavičky, loga, navigaci, formuláře, pozadí apod. Naopak vytisknout zdroj např. jako skrytý prvek viditelný jen pro tisk

35 strana 35 CSS a ikonové sety/ikonové fonty Možnost ušetřit mnoho HTTP požadavků Pomocí CSS nastavujeme pozici pozadí do prvku o dané velikosti Font pomocí CSS content: "a"

36 strana 36 CSS a ikonové sety/ikonové fonty ikony možno realizovat pomocí SVG proti fontu: barvy proti bitmapě: škálovatelnost

37 strana 37 Další možnosti výstupu CSV Možnost generovat XML formáty Office Open XML *.docx, *.xlsx, Open Document Format *.ods, *.odt, Možnost generovat PDF

38 strana 38 Zabalení aplikace do nativního balíku Apache Cordova/Adobe Phonegap WebView je nutné oddělit frontend a backend všechny HTML, JS, CSS a obrázky staticky komunikace přes AJAX/AJAJ použití frontend frameworku např. Angular JS (příště) - umožní šablony nelze generovat šablony

39 strana 39

40 strana 40 CSS preprocesory - LESS pro velké projekty je CSS složité rozdělení do více souborů preprocesor použití proměnných možnost zanořit kód možnost použít třídu jako "funkci"

41 strana 41 Použití LESS v NetBeans npm install -g less vyžaduje cestu k lessc.cmd automaticky soubory převede dir/*.less do dir/*.css jinak přes CLI, Grun nebo Gulp

42 strana 42 LESS #FFFFFF; div { header {

43 strana 43 CSS x LESS zanoření kódu header { header img { header>nav a { header { img { &>nav a {

44 strana 44 CSS x LESS mixin #pokus {.clrfix { <div id="pokus" class="clrfix"> </div> #pokus {.clrfix; <div id="pokus"> </div>

45 strana 45 i s { div {.box-shadow(0 0 5px, 30%)

Podobné dokumenty

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

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í