• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content

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.

Like this presentation? Why not share!

HTML5 in CSS3 v praksi

on

  • 2,299 views

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 ...

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.

Statistics

Views

Total Views
2,299
Views on SlideShare
1,763
Embed Views
536

Actions

Likes
0
Downloads
15
Comments
0

6 Embeds 536

http://gregag.com 274
http://gregag 219
http://lanyrd.com 38
http://www.gregag.com 3
http://paper.li 1
https://lanyrd.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    HTML5 in CSS3 v praksi HTML5 in CSS3 v praksi Presentation Transcript

    • HTML5 in CSS3 v praksi
      @krofdrakula
      #praksa
    • HTML5
      CSS3
      WebGL
      Offline
      Geolocation
      Buzzwordi so povsod okoli nas.
      Slika: http://www.flickr.com/photos/theeerin/4860241134
    • OMGZ!
      Slika: http://dashtardplz.deviantart.com/
    • Meh.
      Slika: http://www.flickr.com/photos/tiffanyday/4233056466
    • Zakaj takšen odziv?
      Slika: http://www.flickr.com/photos/nettsu/791875561
    • „Ne, ker IE6 tega ne podpira. “
      Kolikokrat smo že to slišali?
      Slika: http://www.flickr.com/photos/wrong/52877262
    • Enaka uporabniška izkušnjaza vse.
      One size fits all?
    • Vsak brskalnik ima svoj nabor funkcij in lastnosti.
    • Č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/
    • Razmerje brskalnikov se je postavilo na glavo v zadnjih šestih letih.
      Januar 2004
      Vir: w3schools.com
    • Danes je ekosistem zelo raznovrsten.
      September 2010
      Vir: w3schools.com
    • Zakaj torej ne bi izkoristili polnega potenciala brskalnika, ko je to možno?
      Slika: http://www.flickr.com/photos/pdeperio/3891451054
    • Prihodnost je tukaj.
      Slika: http://is.gd/gpiaC
    • 80/20 pravilo ne velja več.
      Zakaj bi nabor funkcij manjšine določal nabor funkcij večine brskalnikov?
    • Podpora standardov se izboljšuje iz dneva v dan.
      Vir: html5readiness.com
    • Še nikoli niso bile implementacije funkcij tako konsistentne.
      Zakaj jih ne uporabljamo?
      Slika: http://www.flickr.com/photos/baking_in_pearls/1171410778/
    • HTML5
    • CSS3
    • Dodatne funkcije (niso del HTML5 ali CSS3!)
    • 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
    • Nova paradigma:
      Uporabniška izkušnja, prilagojena zmožnostim brskalnika.
      Slika: http://blog.us.cision.com/wp-content/uploads/2009/04/mobile-browsing.jpg
    • 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
    • Kako pa te nove funkcije prenesemo na starejše brskalnike?
      Slika ©Rialto Entertainment (Kate Harcourt)
    • Če določena funkcija ni podprta, najdemo alternativo.
      http://dowebsitesneedtolookexactlythesameineverybrowser.com/
    • Kako se pa to obnese
      v praksi?!
      Slika: http://is.gd/gpiKe
    • HTML5 semantika
    • 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]);
      }
      })();
    • 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.
    • 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).
    • 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
    • SVG
      Rešitev:
      IE < 8 ne podpira SVG.
      svgweb
      http://code.google.com/p/svgweb/
    • 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
    • WebGL
      Podpirajo samo v najnovejših različicah Chroma, Safarija, Firefoxain N900.
      Rešitev:
    • Predennadaljujemo ...
      ... spočijmo malce oči.
      Sliki: http://is.gd/gpiQo in © Old Spice
    • @font-face
      Podpirajo jih vsi sodobni brskalniki.
      ... tako ali drugače.
      http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/
    • 2D transformacije
      Podprto v vseh brskalnikih.
      Res!
      http://www.useragentman.com/blog/2010/03/09/cross-browser-css-transforms-even-in-ie/
    • 3D transformacije
      Podprto samo v najnovejših različicah WebKita in Firefox 4.
      Žal.
    • 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
    • Media query
      Podprti praktično povsod.Razen v IE < 9.
      Rešitev:
      css3-mediaqueries-js
      http://code.google.com/p/css3-mediaqueries-js/
    • 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).
    • 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.
    • Zaobljeni robovi in sence
      Delujejo povsod.
      Celo v IE 9!
      Rešitev?
      Horda študentov!
      Slika: http://www.dukemagazine.duke.edu/alumni/dm18/sweatshop1.jpg
    • CSS3 selektorji
      Podpora zelo različna, a hitro narašča.
      IE pa rahlo zaostaja.
      Rešitev:
      selectivizr
      http://selectivizr.com/
    • Malce zadihajmo.
      Spočiti? Samo še malo!
    • Izgubljeni?
      Niste edini.
    • Razmisliti moramo, kaj lahko naredimo s temi orodji.
    • Nekaj konceptov je že zraslo okoli teh novih funkcionalnosti
      Responsive Design
      Mobile First
      Feature Set Adaptation
    • Eksperimentirajte.
      Če deluje, uporabite.
    • HTML5in CSS3
      Danes.
    • HTML5 in CSS3 v praksi
      @krofdrakula
      #praksa