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

transcript

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.

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?

— obsahuje prohlížeč*

* * * *

Web je všude.

webaři

nativciversus

webaři

nativciversus?

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

Snadný život s prohlížečem?

10%24%

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

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é

http://responsivedesign.ca/blog/progressive-enhancement-a-technique-for-building-future-friendly-websites

Webový front-end 2012:Nástroje

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

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=”” —

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é

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

Otázky?

Díky!twitter.com/machal

mdc.conferoo.com

Ohodnoťte

prosím!

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

Technology