• Like

Loading…

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

HTML5 in CSS3 v praksi

  • 2,041 views
Uploaded on

Slide deck z mojega predavanja na #h5c3 o praktični izkušnji implementacije HTML5 in CSS3 na današnji zbirki brskalnikov, podprto z mnogo linki do rešitev, in nekaj provokativne filozofije o pristopu …

Slide deck z mojega predavanja na #h5c3 o praktični izkušnji implementacije HTML5 in CSS3 na današnji zbirki brskalnikov, podprto z mnogo linki do rešitev, in nekaj provokativne filozofije o pristopu k oblikovanju uporabniške izkušnje.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
2,041
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
15
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. HTML5 in CSS3 v praksi
    @krofdrakula
    #praksa
  • 2. HTML5
    CSS3
    WebGL
    Offline
    Geolocation
    Buzzwordi so povsod okoli nas.
    Slika: http://www.flickr.com/photos/theeerin/4860241134
  • 3. OMGZ!
    Slika: http://dashtardplz.deviantart.com/
  • 4. Meh.
    Slika: http://www.flickr.com/photos/tiffanyday/4233056466
  • 5. Zakaj takšen odziv?
    Slika: http://www.flickr.com/photos/nettsu/791875561
  • 6. „Ne, ker IE6 tega ne podpira. “
    Kolikokrat smo že to slišali?
    Slika: http://www.flickr.com/photos/wrong/52877262
  • 7. Enaka uporabniška izkušnjaza vse.
    One size fits all?
  • 8. Vsak brskalnik ima svoj nabor funkcij in lastnosti.
  • 9. Če lastnost ni podprta povsod, potem je ne smemo uporabiti nikjer.
    Ali je to pošteno do vseh?
    Slika: http://www.flickr.com/photos/tatraskoda/3677449835/
  • 10. Razmerje brskalnikov se je postavilo na glavo v zadnjih šestih letih.
    Januar 2004
    Vir: w3schools.com
  • 11. Danes je ekosistem zelo raznovrsten.
    September 2010
    Vir: w3schools.com
  • 12. Zakaj torej ne bi izkoristili polnega potenciala brskalnika, ko je to možno?
    Slika: http://www.flickr.com/photos/pdeperio/3891451054
  • 13. Prihodnost je tukaj.
    Slika: http://is.gd/gpiaC
  • 14. 80/20 pravilo ne velja več.
    Zakaj bi nabor funkcij manjšine določal nabor funkcij večine brskalnikov?
  • 15. Podpora standardov se izboljšuje iz dneva v dan.
    Vir: html5readiness.com
  • 16. Še nikoli niso bile implementacije funkcij tako konsistentne.
    Zakaj jih ne uporabljamo?
    Slika: http://www.flickr.com/photos/baking_in_pearls/1171410778/
  • 17. HTML5
  • 18. CSS3
  • 19. Dodatne funkcije (niso del HTML5 ali CSS3!)
  • 20. Okay... But does it runLinux in IE?
    * Yes. But that's not the point.
    Slika: http://wallpaper-s.org/15__Western_Screech_Owl,_Montana.htm
  • 21. Nova paradigma:
    Uporabniška izkušnja, prilagojena zmožnostim brskalnika.
    Slika: http://blog.us.cision.com/wp-content/uploads/2009/04/mobile-browsing.jpg
  • 22. Začnemo z najboljšim ...
    ... in se prilagodimo vsem ostalim nižje na lestvici.
    Slika: http://www.cyclingweekly.co.uk/imageBank/r/RICCO%20WINS.jpg
  • 23. Kako pa te nove funkcije prenesemo na starejše brskalnike?
    Slika ©Rialto Entertainment (Kate Harcourt)
  • 24. Če določena funkcija ni podprta, najdemo alternativo.
    http://dowebsitesneedtolookexactlythesameineverybrowser.com/
  • 25. Kako se pa to obnese
    v praksi?!
    Slika: http://is.gd/gpiKe
  • 26. HTML5 semantika
  • 27. Problemi z IE6-8
    Prikaže vsebino značke, a ne oblikuje neznanega elementa.
    Rešitev:
    (function() {
    var e = "section,article,header,footer".split(",");
    for(var i = 0; i < e.length; i++) {
    document.createElement(e[i]);
    }
    })();
  • 28. IE < 9 ne klonira hčerinskih elementov
    Če želimo v dokumentu klonirati HTML5 element in celotno poddrevo, IE ignorira vse potomce tega elementa.
    Rešitev?
    Ročno kloniranje
    poddrevesa.
    Na žalost.
  • 29. Novi tipi <input> značke
    CSS engine v IE vedno zazna neznani tip polja kot [type=text], ne glede na vrednost atributa.
    Če brskalnik ne podpira določenega tipa vnosnega polja, le-ta postane type="text".
    Rešitev?
    Uporaba dodatenga class="..." atributa
    v kombinaciji z JS zaznavo (za IE).
  • 30. HTML5 <audio> in <video>
    Rešitev:
    Brskalnik ne podpira teh dveh značk.
    <audio>
    <!-- Flash ali Silverlight fallback -->
    </audio>
    ... ali:
    Uporabi eno izmed Javascript knjižnic za alternativno implementacijo.*
    * npr. http://mediaelementjs.com/; uporablja Flash ali Silverlight kot nadomestek. Dostop do audio API: dynamicaudio.js
  • 31. SVG
    Rešitev:
    IE < 8 ne podpira SVG.
    svgweb
    http://code.google.com/p/svgweb/
  • 32. Canvas
    Rešitev:
    IE < 8 ne podpira <canvas> elementa.
    excanvas
    http://code.google.com/p/explorercanvas/
    FlashCanvas
    http://flashcanvas.net/
    silverlight bridge
    http://goo.gl/tDij
  • 33. WebGL
    Podpirajo samo v najnovejših različicah Chroma, Safarija, Firefoxain N900.
    Rešitev:
  • 34. Predennadaljujemo ...
    ... spočijmo malce oči.
    Sliki: http://is.gd/gpiQo in © Old Spice
  • 35. @font-face
    Podpirajo jih vsi sodobni brskalniki.
    ... tako ali drugače.
    http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/
  • 36. 2D transformacije
    Podprto v vseh brskalnikih.
    Res!
    http://www.useragentman.com/blog/2010/03/09/cross-browser-css-transforms-even-in-ie/
  • 37. 3D transformacije
    Podprto samo v najnovejših različicah WebKita in Firefox 4.
    Žal.
  • 38. Tranzicije (in animacije)
    Tranzicije so podprte v Firefoxu, Chromu, Safariju in Operi.
    Animacije so podprte samo v Safariju 5.
    Rešitev:
    Uporaba ene izmed Javascript knjižnic za emulacijo tranzicij in animacij.*
    * Scripting CSS3 properties, CSS Sandpaper, Transformie
  • 39. Media query
    Podprti praktično povsod.Razen v IE < 9.
    Rešitev:
    css3-mediaqueries-js
    http://code.google.com/p/css3-mediaqueries-js/
  • 40. Večplastna ozadja in prelivi
    Podprto povsod.*
    Rešitev?
    Če uporabljamo samo 2 plasti, lahko uporabimo filter CSS atribut.
    * ...če izvzamemo IE < 9.
    Za več ozadij potrebujemo več gnezdenih HTML elementov (velja tudi za druge, starejše brskalnike).
  • 41. HSLA in RGBA barve
    RGBA podprte povsod, HSLA tudi.
    Z izjemo IE.
    Rešitev?
    Za barvo ozadja lahko uporabimo filter CSS atribut; za barvo teksta pa ni rešitve.
  • 42. Zaobljeni robovi in sence
    Delujejo povsod.
    Celo v IE 9!
    Rešitev?
    Horda študentov!
    Slika: http://www.dukemagazine.duke.edu/alumni/dm18/sweatshop1.jpg
  • 43. CSS3 selektorji
    Podpora zelo različna, a hitro narašča.
    IE pa rahlo zaostaja.
    Rešitev:
    selectivizr
    http://selectivizr.com/
  • 44. Malce zadihajmo.
    Spočiti? Samo še malo!
  • 45. Izgubljeni?
    Niste edini.
  • 46. Razmisliti moramo, kaj lahko naredimo s temi orodji.
  • 47. Nekaj konceptov je že zraslo okoli teh novih funkcionalnosti
    Responsive Design
    Mobile First
    Feature Set Adaptation
  • 48. Eksperimentirajte.
    Če deluje, uporabite.
  • 49. HTML5in CSS3
    Danes.
  • 50. HTML5 in CSS3 v praksi
    @krofdrakula
    #praksa