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.

Windays 11 - IE9 i HTML5

515 views

Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Windays 11 - IE9 i HTML5

  1. 2. Internet Explorer 9 i HTML5 Matija Šmalcelj Pet Minuta www.fiveminutes.eu Lead Developer, Mobile/Web
  2. 5. Sadržaj predavanja <ul><li>Internet Explorer 9 </li></ul><ul><li>HTML5 </li></ul><ul><li>Drugi nadolazeći standardi </li></ul>
  3. 6. Windows Internet Explorer 9 2000 2005 2011 1995
  4. 7. Najvažnije novosti <ul><li>Podrška za standarde i HTML5 </li></ul><ul><li>Radikalno povećanje performansi </li></ul><ul><li>Novi dizajn sučelja i unaprijeđeni tabovi </li></ul><ul><li>Integracija web-stranica s Windowsima 7 </li></ul><ul><li>Download M anager </li></ul><ul><li>Sub-pixel renderiranje teksta </li></ul><ul><li>Demo </li></ul>
  5. 8. Standardi <ul><li>IE8 Acid 3: 20/100 </li></ul><ul><li>IE9: </li></ul>
  6. 9. Performanse <ul><li>Chakra - novi Java S cript engine </li></ul><ul><ul><li>Vrlo brz </li></ul></ul><ul><ul><li>Izvodi J ava S cript na zasebnoj jezgri procesora </li></ul></ul><ul><ul><li>Nema čekanja na interpretiranje Java S cripta </li></ul></ul><ul><ul><li>Java S cript se prevodi u nativni kod </li></ul></ul><ul><ul><li>Samo u 32 bitnoj verziji </li></ul></ul>
  7. 11. Performanse <ul><li>Hardverski ubrzana multimedija </li></ul><ul><ul><li>MPEG-4 i H.264 za video </li></ul></ul><ul><ul><li>MP3 i AAC za audio </li></ul></ul><ul><li>Koristi grafičku karticu i DirectX </li></ul><ul><li>Ubrzan start </li></ul>
  8. 12. DEMO <ul><li>Flying images </li></ul><ul><li>Muzej </li></ul><ul><li>BMW </li></ul>
  9. 13. Web stranice kao aplikacije <ul><li>Podržano u Windows 7 </li></ul><ul><li>Integracija u Start menu i na Taskbar </li></ul>application-name msapplication-tooltip msapplication-starturl msapplication-navbutton-color msapplication-window msapplication-task + favicon
  10. 14. DEMO <ul><li>Integracija </li></ul>
  11. 15. + ostale novotarije...
  12. 16. Što je novo u HTML5? <ul><li>28 novih tagov a (header, footer, section, ...) koji naglašavaju semantiku </li></ul><ul><li>Novi atributi (required, autofocus, data-*, ...) </li></ul><ul><li>Regularni izrazi u formama </li></ul><ul><li>Jednostava pohrana podataka na klijentu </li></ul><ul><li>canvas element za crtanje </li></ul>
  13. 17. Drugi nadolazeći standardi <ul><li>CSS3 </li></ul><ul><li>Geolokacija </li></ul><ul><li>DBMS pohrana podataka na klijentu (zasebna specifikacija) </li></ul><ul><li>SVG (v ektorska grafika ) </li></ul>
  14. 18. Sintaksa <ul><li>Doctype </li></ul><ul><li>Script i Link tagovi više ne trebaju “type” attribut </li></ul><! DOCTYPE html > < link rel ='stylesheet' href ='path/to/stylesheet.css' /> < script src ='path/to/script.js'></ script >
  15. 19. Sintaksa <ul><li>Navodnici nisu obavezni </li></ul><ul><li>Case-insensitive </li></ul>< p class =mojaKlasa id =mojId></ p > < P ClAsS =MojaKlasa id =MOJID></ P >
  16. 20. Naglasak na semantici < div id ='header'> ... </ div > < div id ='content'> < img src ='...' /> < p > Opis slike </ p > </ div > < div id ='sidebar'> ... </ div > < div id ='footer'> ... </ div > < header > ... </ header > < article > < figure > < img src =‘...’ /> < figcaption > Opis slike </ figcaption > </ figure > </ article > < aside > ... </ aside > < footer > ... </ footer >
  17. 21. data-... atributi <ul><li>Za spremanje proizvoljnih podataka </li></ul><ul><li>Prolaziti će validaciju ako je “data-” na početku imena </li></ul>< p id ='clanak' data-article-id ='12345' ></ p > // dohvat var clanak = document.getElementById( 'clanak' ); var id = clanak.dataset.articleId;
  18. 22. <ul><li>localStorage – trajna pohrana </li></ul><ul><li>sessionStorage – do zatvaranja stranice </li></ul>window.localStorage.setItem ( 'kljuc' , 'vrijednost' ); window.localStorage. getItem ( 'kljuc' ); window.localStorage. removeItem ( 'kljuc' ); window.localStorage. clear () Jednostavna pohrana podataka
  19. 23. Multimedija <ul><li><audio> </li></ul><ul><li><video> </li></ul>< audio controls autoplay loop preload > < source src ='file.ogg' /> < source src ='file.mp3' /> < a href ='file.mp3’> Preuzmi datoteku. </ a > </ audio > < video height width poster audio > < source src ='http://www.youtube.com/.../'> < p > HTML 5 video nije podrzan </ p > </ video >
  20. 24. Geolokacija <ul><li>Bez GPSa dosta neprecizno </li></ul><ul><li>O visi o implementaciji u pregledniku </li></ul>navigator.geolocation.getCurrentPosition ( function (pos) { alert( pos.coords.latitude + ', ' + pos.coords.longitude ); }, function (err){ alert( 'Doslo je do greske: ' + err); });
  21. 25. CSS3 <ul><li>Zaobljeni kutevi elemenata </li></ul><ul><li>Sjenčanje teksta i elemenata </li></ul><ul><li>Animacije i transformacije </li></ul><ul><li>Gradijenti i RGBA boje </li></ul><ul><li>Stupci </li></ul>box-shadow : ... -moz-box-shadow: ... -webkit-box-shadow: ... -o-box-shadow: ...
  22. 26. Trenutno stanje* * ne uključuje beta verzije Izvor: Wikipedia
  23. 27. Modernizr <ul><li>Lightweight JS library za detekciju podrške </li></ul>< body class ='no-multiplebgs'> .multiplebgs div p { /* OK */ } .no-multiplebgs div p { /* nema podrske */ } if (Modernizr.localstorage) { // OK } else { // Nema podrske } http://www.modernizr.com/
  24. 28. DEMO <ul><li>Modernizr </li></ul>
  25. 29. Finalna specifikacija 2022 ? 10 godina 8 mjeseci 26 dana

×