Webový front-end ve službách mobilního vývojáře

Martin Michálekvzhurudolu.cz/martin

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

1Proč se o web zajímat?

*— obsahuje prohlížeč * * * * Zdroj: http://www-01.ibm.com/software/mobile-solutions/worklight/features/

Web je všude.

webaři versusnativci

webaři ? versusnativci

Technologie je nástroj,ne náboženství.

2 Snadný živots prohlížečem?

Desktop prohlížeče I/2012 4% 31%FF4+ 17% 1%FF3.xIE9IE8 1%IE7 4% 7%IE6ChromeOpera 24% 10%Safari Data pro .cz — zdroj: rankings.cz

Mobilní prohlížeče IV/2012

Pohoda s WebKitem?

There is no“WebKit on mobile!” http://www.flickr.com/photos/madciapka/5030092326/

3Webový front-end 2012: Pracovní metody

Fallback („záložní řešení”) Náhradní řešení pro prohlížeče co nepodporují novou technologii.

Preﬁx („předpona”)Vendor preﬁx — předpona CSS vlastnosti v testovací fázi implementace.

Postupné vrstvení technologie — progressive enhancement 1) Řešení ve starší technologii2) Vylepšení pro moderní technologie nové zdola nahoru staré

Postupné vrstvení technologie — progressive enhancementhttp://responsivedesign.ca/blog/progressive-enhancement-a-technique-for-building-future-friendly-websites

4Webový front-end 2012: Nástroje

Aktuální preﬁxovédeklarace CSS3 vlastností.

Testuje podporu HTML5 a CSS3 v prohlížeči.CSS: JS: http://modernizr.com/

Radí jak používat HTML5 a CSS3 vlastnosti.

Radí kdy a kdepoužívat HTML5 a CSS3.

Ultimátní prototypovací/ responsive nástroj.

Vynikající škola, ale raději neuniverzální výchozí šablona.

Nakódujte si „nativní”rozhraní pro web app.

Naklikejte si „nativní”rozhraní pro web app.

5 HTML5sémantika

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řesk I ♥ Operahttp://www.456bereastreet.com/lab/html5-input-types/

Velký formulářový třesk Androide, makej! http://wufoo.com/html5/

Podporu to nemá.Proč používat už teď? Podporu ne. Polyﬁll ano!

6 Konec dobybitmapové

Samá graﬁka?Samá bitmapa?

4⨉bitmapa

Vše ostatní CSS3:★ kulaté rohy★ stíny★ RGBa★ barevné přechody

Konec doby bitmapové Příklad s kolovrátkemAnimovaný 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…

7 CSS3 vlastnostihttp://www.vzhurudolu.cz/css3

Otázky?

Díky! twitter.com/machal no ťteO hod m! pr osí mdc.conferoo.com

http://petrhouzar.tumblr.com	97
http://flavors.me	34
http://www.linkedin.com	7
http://www.tumblr.com	3
https://si0.twimg.com	3
http://de.flavors.me	2
http://us-w1.rockmelt.com	1
http://www.bing.com	1
http://pt.flavors.me	1

Webový front-end ve službách mobilního vývojáře

by Martin Michálek on May 26, 2012

Accessibility

Categories

Upload Details

Usage Rights

9 Embeds 149

Statistics

Webový front-end ve službách mobilního vývojáře Presentation Transcript