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,416 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,416
Views on SlideShare
1,880
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