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

1,864
-1

Published on

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,864
On Slideshare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
17
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×