52
Webový front-end ve službách mobilního vývojáře
| Date post: | 08-Jul-2015 |
| Category: |
Technology |
| Upload: | martin-michalek |
| View: | 1,631 times |
| Download: | 0 times |
Webový front-end ve službáchmobilního vývojáře
Martin Michálekvzhurudolu.cz/martin
Jako front-end vývojář pomáhám tvořit weby.
Jako front-end vývojář pomáhám tvořit weby.
Píšu o tom.vzhurudolu.cz
Píšu o tom.twitter.com/machal
Školím.webexpo.cz/academy
Program:
1. Proč se o web zajímat?2. Snadný život s prohlížečem?3. Pracovní metody4. Nástroje5. HTML5 sémantika6. Konec doby bitmapové7. CSS3 vlastnosti
Proč se o web zajímat?
1
— obsahuje prohlížeč*
* * * *
Zdro
j: ht
tp:/
/ww
w-0
1.ib
m.c
om/s
oftw
are/
mob
ile-s
olut
ions
/wor
klig
ht/f
eatu
res/
Web je všude.
webaři
nativciversus
webaři
nativciversus?
Technologie je nástroj,ne náboženství.
Snadný život s prohlížečem?
2
31%
7%
10%24%
4%1%
17%
4%1%FF4+
FF3.xIE9IE8 IE7IE6ChromeOperaSafari
Desktop prohlížeče I/2012
Data pro .cz — zdroj: rankings.cz
Mobilní prohlížeče IV/2012
Pohoda s WebKitem?
'ere is no “WebKit on mobile!”
http://www.flickr.com/photos/madciapka/5030092326/
Webový front-end 2012:Pracovní metody
3
Fallback („záložní řešení”)
Náhradní řešení pro prohlížečeco nepodporují novou
technologii.
Prefix („předpona”)
Vendor prefix — předpona CSS vlastnosti v testovací fázi
implementace.
1) Řešení ve starší technologii2) Vylepšení pro moderní technologie
Postupné vrstvení technologie— progressive enhancement
zdola nahoru
staré
nové
Postupné vrstvení technologie— progressive enhancement
http://responsivedesign.ca/blog/progressive-enhancement-a-technique-for-building-future-friendly-websites
Postupné vrstvení technologie— progressive enhancement
http://responsivedesign.ca/blog/progressive-enhancement-a-technique-for-building-future-friendly-websites
Webový front-end 2012:Nástroje
4
Aktuální prefixové deklarace CSS3 vlastností.
CSS: JS:
http://modernizr.com/
Testuje podporu HTML5 a CSS3 v prohlížeči.
Radí jak používat HTML5 a CSS3 vlastnosti.
Radí kdy a kde používat HTML5 a CSS3.
Ultimátní prototypovací/responsive nástroj.
Vynikající škola, ale raději ne univerzální výchozí šablona.
Nakódujte si „nativní” rozhraní pro web app.
Naklikejte si „nativní”rozhraní pro web app.
HTML5sémantika
5
Super-užitečné blbinky:Zjednodušení a blbuvzdornost
★ <!DOCTYPE html> zapíná striktní režim★ Kódování <meta charset="utf-8">★ Velká i malá písmena★ <br> i <br />★ <p> , <li> a další netřeba uzavírat
Super-užitečné blbinky:Doplnění z praxe
★ <a> může obalit i blok★ Přednastavený type=”” —
<link rel=”stylesheet” href=”index.css”><script src=”script.js”></script>
Velký formulářový třeskI ♥ Opera
http://www.456bereastreet.com/lab/html5-input-types/
Velký formulářový třeskAndroide, makej!
http://wufoo.com/html5/
Podporu to nemá. Proč používat už teď?
Podporu ne. Polyfill ano!
Konec doby
bitmapové
6
Samá grafika?Samá bitmapa?
4 ⨉bitmapa
Vše ostatní CSS3:
★ kulaté rohy★ stíny★ RGBa★ barevné přechody
Konec doby bitmapovéPříklad s kolovrátkem
Animovaný GIF PNG32 + CSS animace
http://dabblet.com/gist/1689261
Bitmapy neřež. A neřeš.
★ Button generator★ Icon Fonts★ CSS speech bubble★ spin.js★ více…
CSS3 vlastnosti
http://www.vzhurudolu.cz/css3
7
Otázky?
Díky!twitter.com/machal
mdc.conferoo.com
Ohodnoťte
prosím!
