Programuotojams<br />Tomas Dabašinskas<br />Microsoft MVP<br />
Pranešimo planas<br />
Vaizdo apdorojimo spartinimas<br />(„GPU Acceleration“)<br />
Kaip tai veikia?<br />Paveikslėliai ir video elementai parsiunčiami, dekoduojami ir perkeliami į GPU buferius<br />Sudėtin...
(„JavaScript Engine“)<br />Chakra<br />
Kaip JavaScript veikė iki IE9<br />Pirmam plane...<br />Pirminis kodas<br />Analizatorius<br />AST<br />Interpretatorius<b...
Kaip JavaScript veikia IE9<br />Pirmam plane...<br />Pirminis kodas<br />Analizatorius<br />AST<br />Interpretatorius<br /...
Demo:Chakra<br />
(„Pinned Tabs“)<br />Prisegamos kortelės<br />
Demo:Prisegamos kortelės<br />
Peršokimo sąrašų užduotys<br /><metaname="msapplication-task"content="name=Užduotis 1;action-uri=/puslapis1;icon-uri=Pikto...
Miniatiūros mygtukai<br />btn1 =window.external.msSiteModeAddThumbBarButton('Piktograma1.ico','Mygtukas 1');<br />btn2 =wi...
Piktogramos<br />Aukštos kokybės puslapio piktograma:<br /><linkrel="shortcut icon" href="piktograma.ico" /><br />Piktogra...
(„HyperText Markup Language 5“)<br />HTML 5<br />
HTML5 naujovės IE9 naršyklėje<br />
<Audio> ir <Video><br />h.264formato video<br />MP3 ir ACC formatų audio<br /><videoid="movie" width="320" height="240" pr...
Canvas elementas<br />HTML Elementas, leidžiantis piešti 2D grafiką, naudojant JavaScript:<br /><canvasid="myCanvas" width...
Demo:HTML 5<br />
(„Scalable Vector Graphics 1.1“)<br />SVG 1.1<br />
SVG palaikymas<br />Galimybė kurti vektorinę 2D grafiką, naudojant XML<br />Paremtas SVG 1.1 (2 leidimas) pilna specifikac...
Demo:SVG 1.1<br />
(„Cascading Style Sheets 3“)<br />CSS 3<br />
CSS3 naujovės IE9 naršyklėje<br />
Suapvalinti kampai<br />border-radius:152px 304px 228px 152px;<br />border-style:dashed;<br />border-width:6px;<br />paddi...
WOFF šriftų formatai<br />Nebereikia apsiriboti tik „saugiais“ šriftais<br />WOFF („Web OpenFontFormat“) leidžia norimus š...
(„Compatibility“)<br />Suderinamumas<br />
X-UA-Compatible<br />Standartus atitinkantiems, veikiantiems puslapiams:<br /><metahttp-equiv="X-UA-Compatible" content="I...
User-Agent eilutė<br />Padidinta aplikacijos versija iš Mozilla/4.0 įMozilla/5.0<br />Versijos žymė padidinta iš MSIE 8.0 ...
(„Developer Tools“)<br />Programų kūrėjo įrankiai <br />
Kas tai?<br />Įvairių įrankių, palengvinančių kuriamo tinklalapio testavimą ir klaidų aptikimą, rinkinys:<br />...<br />
Pasikeitimai nuo IE8<br /><ul><li>Našumo patobulinimai
Konsolės kortelė („Console Tab“):
JavaScript klaidų pranešimų peržiūra
Upcoming SlideShare
Loading in …5
×

Internet Explorer 9 Apžvalga Programuotojams

801
-1

Published on

Review of the new IE9 features for developers.

Presentation made on 2010-10-19.

Published in: Technology, Art & Photos
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
801
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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

×