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.

Internet Explorer 9 Apžvalga Programuotojams

969 views

Published on

Review of the new IE9 features for developers.

Presentation made on 2010-10-19.

Published in: Technology, Art & Photos
  • Be the first to comment

  • Be the first to like this

Internet Explorer 9 Apžvalga Programuotojams

  1. 1. Programuotojams<br />Tomas Dabašinskas<br />Microsoft MVP<br />
  2. 2. Pranešimo planas<br />
  3. 3. Vaizdo apdorojimo spartinimas<br />(„GPU Acceleration“)<br />
  4. 4. Kaip tai veikia?<br />Paveikslėliai ir video elementai parsiunčiami, dekoduojami ir perkeliami į GPU buferius<br />Sudėtingi puslapio elementai (SVG, Canvas) piešiami į GPU buferius<br />Paprasti puslapių elementai piešiami WEB puslapio buferyje<br />GPU buferiai sujungiami su tiesiogiai nupieštu turiniu, kad sudarytų pilną WEB puslapio vaizdą<br />Windows Desktop Window Manager (DWM) atvaizduoja galutinį vaizdą<br />1<br />2<br />3<br />4<br />5<br />
  5. 5. („JavaScript Engine“)<br />Chakra<br />
  6. 6. Kaip JavaScript veikė iki IE9<br />Pirmam plane...<br />Pirminis kodas<br />Analizatorius<br />AST<br />Interpretatorius<br />BaitKodas<br />
  7. 7. Kaip JavaScript veikia IE9<br />Pirmam plane...<br />Pirminis kodas<br />Analizatorius<br />AST<br />Interpretatorius<br />BaitKodas<br />Foninis kompiliatorius<br />Native kodas<br />Foniniam plane...<br />Sukompiliuotas JavaScript<br />Vyksta fone<br />Išnaudojami visi branduoliai<br />
  8. 8. Demo:Chakra<br />
  9. 9. („Pinned Tabs“)<br />Prisegamos kortelės<br />
  10. 10. Demo:Prisegamos kortelės<br />
  11. 11. Peršokimo sąrašų užduotys<br /><metaname="msapplication-task"content="name=Užduotis 1;action-uri=/puslapis1;icon-uri=Piktograma1.ico" /><br /><metaname="msapplication-task"content="name=Užduotis2;action-uri=/puslapis2;icon-uri=Piktograma2.ico" /><br />
  12. 12. Miniatiūros mygtukai<br />btn1 =window.external.msSiteModeAddThumbBarButton('Piktograma1.ico','Mygtukas 1');<br />btn2 =window.external.msSiteModeAddThumbBarButton('Piktograma1.ico','Mygtukas 2');<br />btn1 =window.external.msSiteModeAddThumbBarButton('Piktograma1.ico','button 3');<br />window.external.msSiteModeUpdateThumbBarButton(btn1,false,true); // Neaktyvus, bet matomas<br />window.external.msSiteModeUpdateThumbBarButton(btn2,true,true);// Aktyvusirmatomas<br />window.external.msSiteModeUpdateThumbBarButton(btn3,true,false); // Aktyvus, bet nematomas<br />
  13. 13. Piktogramos<br />Aukštos kokybės puslapio piktograma:<br /><linkrel="shortcut icon" href="piktograma.ico" /><br />Piktograma su persidengimu:<br />window.external.msSiteModeSetIconOverlay('Piktograma','Tekstas');<br />Navigacijos mygtukų spalva:<br /><metaname="msapplication-navbutton-color" content="#FFFFFF" /><br />
  14. 14. („HyperText Markup Language 5“)<br />HTML 5<br />
  15. 15. HTML5 naujovės IE9 naršyklėje<br />
  16. 16. <Audio> ir <Video><br />h.264formato video<br />MP3 ir ACC formatų audio<br /><videoid="movie" width="320" height="240" preload controls><br /><sourcesrc="video.mp4" /><br /><sourcesrc="video.webm"type='video/webm; codecs="vp8, vorbis"' /><br /><sourcesrc="video.ogv"type='video/ogg; codecs="theora, vorbis"' /><br /></video><br />
  17. 17. Canvas elementas<br />HTML Elementas, leidžiantis piešti 2D grafiką, naudojant JavaScript:<br /><canvasid="myCanvas" width="200" height="200"><br />Jusunarsykle Canvas elemento nepalaiko<br /></canvas><br /><scripttype="text/javascript"><br />varexample = document.getElementById("myCanvas");<br />varcontext = example.getContext("2d");<br />context.fillStyle = "rgb(255,0,0)";<br /> context.fillRect(30, 30, 50, 50);<br /></script><br />Rezultatas:<br />
  18. 18. Demo:HTML 5<br />
  19. 19. („Scalable Vector Graphics 1.1“)<br />SVG 1.1<br />
  20. 20. SVG palaikymas<br />Galimybė kurti vektorinę 2D grafiką, naudojant XML<br />Paremtas SVG 1.1 (2 leidimas) pilna specifikacija<br />Pilnas DOM priėjimas prie SVG elementų<br />Struktūra, transformavimas, stilizavimas, figūros, spalvos ir t.t.<br /><svgwidth="400" height="200" xmlns="http://www.w3.org/2000/svg"><br /><rectfill="red" x="20" y="20" width="100" height="75" /><br /><rectfill="blue" x="50" y="50" width="100" height="75" /><br /></svg><br />Rezultatas:<br />
  21. 21. Demo:SVG 1.1<br />
  22. 22. („Cascading Style Sheets 3“)<br />CSS 3<br />
  23. 23. CSS3 naujovės IE9 naršyklėje<br />
  24. 24. Suapvalinti kampai<br />border-radius:152px 304px 228px 152px;<br />border-style:dashed;<br />border-width:6px;<br />padding:48px;<br />
  25. 25. WOFF šriftų formatai<br />Nebereikia apsiriboti tik „saugiais“ šriftais<br />WOFF („Web OpenFontFormat“) leidžia norimus šriftus pateikti kiekvienam vartotojojui<br />Supakuojama OpenType ir TrueType šriftų informacija<br />Formatas remiasi W3C FontsWorkingGroup specifikacija<br /><styletype="text/css"><br /> @font-face{<br />font-family:Pavadinimas;<br />src:url('Sriftas.woff');<br />}<br /></style><br /><divstyle="font: 24pt Pavadinimas, sans-serif;"><br />Tekstas bus matomas Sriftas.woff šriftu<br /></div><br />
  26. 26. („Compatibility“)<br />Suderinamumas<br />
  27. 27. X-UA-Compatible<br />Standartus atitinkantiems, veikiantiems puslapiams:<br /><metahttp-equiv="X-UA-Compatible" content="IE=9"><br />arba:<br /><metahttp-equiv="X-UA-Compatible" content="IE=edge"><br />Standartų neatitinkantiems, su „Internet Explorer 9“ nesuderinamiems puslapiams:<br /><metahttp-equiv="X-UA-Compatible" content="IE=EmulateIE7"><br />arba:<br /><metahttp-equiv="X-UA-Compatible" content="IE=EmulateIE8"><br />
  28. 28. User-Agent eilutė<br />Padidinta aplikacijos versija iš Mozilla/4.0 įMozilla/5.0<br />Versijos žymė padidinta iš MSIE 8.0 į MSIE 9.0<br />Atvaizdavimo variklio („Trident“) žymė padidinta iš Trident/4.0 į Trident/5.0<br />Internet Explorer 9 siųs štai tokią User-Agent eilutę:<br />Aplikacijos vardasir versija<br />Versijosžymė<br />Atvaizdavimo variklio(„Trident“) žymė<br />Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; WOW64; Trident/5.0)<br />Suderinamumožymė<br />Platforma(OS versija ir architektūra)<br />
  29. 29. („Developer Tools“)<br />Programų kūrėjo įrankiai <br />
  30. 30. Kas tai?<br />Įvairių įrankių, palengvinančių kuriamo tinklalapio testavimą ir klaidų aptikimą, rinkinys:<br />...<br />
  31. 31. Pasikeitimai nuo IE8<br /><ul><li>Našumo patobulinimai
  32. 32. Konsolės kortelė („Console Tab“):
  33. 33. JavaScript klaidų pranešimų peržiūra
  34. 34. JavaScript funkcijų vykdymas
  35. 35. Tinklo kortelė („Network Tab“):
  36. 36. HTTP/HTTPS srauto stebėjimas
  37. 37. Užklausų ir atsakų peržiūra ir išsaugojimas
  38. 38. Papildoma informacija apie gautus duomenis
  39. 39. User-Agent keitimo įrankis („UA Switcher Tool“)</li></li></ul><li>Demo:Programų kūrėjo įrankiai<br />
  40. 40. („Summary“)<br />Pabaigai: Apibendrinimas<br />
  41. 41. Internet Explorer 9<br />Veikianti ypatingai greitai<br />Dėmesį sutelkianti į Jūsų tinklalapį<br />Veikianti su tuo pačiu kodu<br />Išnaudoja pilną Jūsųkompiuterio pajėgumą, pasitelkdama GPUspartinimą bei naująjį JavaScriptvariklį – Chakra.<br />Paprasta, „švaresnė“ vartotojo sąsaja beiintegracija su operacine sistema leidžia sutelktidėmesį į puslapį – ne į naršyklę.<br />Patobulintas standartųpalaikymas. Tas pats kodasvienodai veikiaskirtingose naršyklėse.Jį lengva testuoti.<br />
  42. 42. Resursai<br /><ul><li>Oficialus „Internet Explorer“ puslapis:http://msdn.microsoft.com/en-us/ie/default.aspx
  43. 43. Pristatomasis „Internet Explorer 9“ puslapis („Beauty of the WEB“):http://www.beautyoftheweb.com
  44. 44. „Internet Explorer 9“ testavimo puslapis („Test Drive“):http://ie.microsoft.com/testdrive
  45. 45. „Internet Explorer 9“ Beta gidas programuotojams („Internet Explorer 9 Beta Guide for Developers“):http://msdn.microsoft.com/en-us/ie/ff468705.aspx
  46. 46. Informacija apie prisegamų kortelių kūrimą:http://msdn.microsoft.com/en-us/library/gg131029%28VS.85%29.aspx</li></li></ul><li>Ačiū už dėmesį<br />http://www.dabasinskas.nettomas@dabasinskas.net@Dabasinskas<br />Programuotojams<br />

×