Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

3,110 views

Published on

Published in: Technology
  • Be the first to comment

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

  1. 1. Webový front-end ve službách mobilního vývojáře
  2. 2. Martin Michálekvzhurudolu.cz/martin
  3. 3. Jako front-end vývojářpomáhám tvořit weby.
  4. 4. Jako front-end vývojářpomáhám tvořit weby.
  5. 5. Píšu o tom.vzhurudolu.cz
  6. 6. Píšu o tom.twitter.com/machal
  7. 7. Školím.webexpo.cz/academy
  8. 8. 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
  9. 9. 1Proč se o web zajímat?
  10. 10. *— obsahuje prohlížeč * * * * Zdroj: http://www-01.ibm.com/software/mobile-solutions/worklight/features/
  11. 11. Web je všude.
  12. 12. webaři versusnativci
  13. 13. webaři ? versusnativci
  14. 14. Technologie je nástroj,ne náboženství.
  15. 15. 2 Snadný živots prohlížečem?
  16. 16. 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
  17. 17. Mobilní prohlížeče IV/2012
  18. 18. Pohoda s WebKitem?
  19. 19. There is no“WebKit on mobile!” http://www.flickr.com/photos/madciapka/5030092326/
  20. 20. 3Webový front-end 2012: Pracovní metody
  21. 21. Fallback („záložní řešení”) Náhradní řešení pro prohlížeče co nepodporují novou technologii.
  22. 22. Prefix („předpona”)Vendor prefix — předpona CSS vlastnosti v testovací fázi implementace.
  23. 23. Postupné vrstvení technologie — progressive enhancement 1) Řešení ve starší technologii2) Vylepšení pro moderní technologie nové zdola nahoru staré
  24. 24. Postupné vrstvení technologie — progressive enhancementhttp://responsivedesign.ca/blog/progressive-enhancement-a-technique-for-building-future-friendly-websites
  25. 25. Postupné vrstvení technologie — progressive enhancementhttp://responsivedesign.ca/blog/progressive-enhancement-a-technique-for-building-future-friendly-websites
  26. 26. 4Webový front-end 2012: Nástroje
  27. 27. Aktuální prefixovédeklarace CSS3 vlastností.
  28. 28. Testuje podporu HTML5 a CSS3 v prohlížeči.CSS: JS: http://modernizr.com/
  29. 29. Radí jak používat HTML5 a CSS3 vlastnosti.
  30. 30. Radí kdy a kdepoužívat HTML5 a CSS3.
  31. 31. Ultimátní prototypovací/ responsive nástroj.
  32. 32. Vynikající škola, ale raději neuniverzální výchozí šablona.
  33. 33. Nakódujte si „nativní”rozhraní pro web app.
  34. 34. Naklikejte si „nativní”rozhraní pro web app.
  35. 35. 5 HTML5sémantika
  36. 36. 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
  37. 37. 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>
  38. 38. Velký formulářový třesk I ♥ Operahttp://www.456bereastreet.com/lab/html5-input-types/
  39. 39. Velký formulářový třesk Androide, makej! http://wufoo.com/html5/
  40. 40. Podporu to nemá.Proč používat už teď? Podporu ne. Polyfill ano!
  41. 41. 6 Konec dobybitmapové
  42. 42. Samá grafika?Samá bitmapa?
  43. 43. 4⨉bitmapa
  44. 44. Vše ostatní CSS3:★ kulaté rohy★ stíny★ RGBa★ barevné přechody
  45. 45. Konec doby bitmapové Příklad s kolovrátkemAnimovaný GIF PNG32 + CSS animace http://dabblet.com/gist/1689261
  46. 46. Bitmapy neřež. A neřeš. ★ Button generator ★ Icon Fonts ★ CSS speech bubble ★ spin.js ★ více…
  47. 47. 7 CSS3 vlastnostihttp://www.vzhurudolu.cz/css3
  48. 48. Otázky?
  49. 49. Díky! twitter.com/machal no ťteO hod m! pr osí  mdc.conferoo.com

×