Webový front-end
  ve službách
   mobilního
   vývojáře
Martin Michálek
vzhurudolu.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í metody
4.   Nástroje
5.   HTML5 sémantika
6.   Konec doby bitmapové
7.   CSS3 vlastnosti
1
Proč 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
 versus

nativci
webaři
  ?
 versus

nativci
Technologie je nástroj,
ne náboženství.
2
 Snadný život
s prohlížečem?
Desktop prohlížeče I/2012


                                  4%         31%
FF4+
                           17%     1%
FF3.x
IE9
IE8                  1%
IE7                  4%
                                                   7%
IE6
Chrome
Opera                     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/
3
Webový front-end 2012:
  Pracovní metody
Fallback („záložní řešení”)


 Náhradní řešení pro prohlížeče
     co nepodporují novou
          technologii.
Prefix („předpona”)


Vendor prefix — předpona CSS
  vlastnosti v testovací fázi
       implementace.
Postupné vrstvení technologie
       — progressive enhancement




    1) Řešení ve starší technologii
2) Vylepšení pro moderní technologie
              nové
                  zdola nahoru
              staré
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
4
Webový front-end 2012:
      Nástroje
Aktuální prefixové
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 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.
5
 HTML5
sé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 ♥ Opera




http://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.
               Polyfill ano!
6
  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…
7
    CSS3
  vlastnosti

http://www.vzhurudolu.cz/css3
Otázky?
Díky!
                twitter.com/machal




      no  ťte
O hod m!
   pr osí
                  mdc.conferoo.com

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