Review of the new IE9 features for developers. Presentation made on 2010-10-19.

1. Programuotojams Tomas Dabašinskas Microsoft MVP

2. Pranešimo planas

3. Vaizdo apdorojimo spartinimas („GPU Acceleration“)

4. Kaip tai veikia? Paveikslėliai ir video elementai parsiunčiami, dekoduojami ir perkeliami į GPU buferius Sudėtingi puslapio elementai (SVG, Canvas) piešiami į GPU buferius Paprasti puslapių elementai piešiami WEB puslapio buferyje GPU buferiai sujungiami su tiesiogiai nupieštu turiniu, kad sudarytų pilną WEB puslapio vaizdą Windows Desktop Window Manager (DWM) atvaizduoja galutinį vaizdą 1 2 3 4 5

5. („JavaScript Engine“) Chakra

6. Kaip JavaScript veikė iki IE9 Pirmam plane... Pirminis kodas Analizatorius AST Interpretatorius BaitKodas

7. Kaip JavaScript veikia IE9 Pirmam plane... Pirminis kodas Analizatorius AST Interpretatorius BaitKodas Foninis kompiliatorius Native kodas Foniniam plane... Sukompiliuotas JavaScript Vyksta fone Išnaudojami visi branduoliai

8. Demo:Chakra

9. („Pinned Tabs“) Prisegamos kortelės

10. Demo:Prisegamos kortelės

11. Peršokimo sąrašų užduotys <metaname="msapplication-task"content="name=Užduotis 1;action-uri=/puslapis1;icon-uri=Piktograma1.ico" /> <metaname="msapplication-task"content="name=Užduotis2;action-uri=/puslapis2;icon-uri=Piktograma2.ico" />

12. Miniatiūros mygtukai btn1 =window.external.msSiteModeAddThumbBarButton('Piktograma1.ico','Mygtukas 1'); btn2 =window.external.msSiteModeAddThumbBarButton('Piktograma1.ico','Mygtukas 2'); btn1 =window.external.msSiteModeAddThumbBarButton('Piktograma1.ico','button 3'); window.external.msSiteModeUpdateThumbBarButton(btn1,false,true); // Neaktyvus, bet matomas window.external.msSiteModeUpdateThumbBarButton(btn2,true,true);// Aktyvusirmatomas window.external.msSiteModeUpdateThumbBarButton(btn3,true,false); // Aktyvus, bet nematomas

13. Piktogramos Aukštos kokybės puslapio piktograma: <linkrel="shortcut icon" href="piktograma.ico" /> Piktograma su persidengimu: window.external.msSiteModeSetIconOverlay('Piktograma','Tekstas'); Navigacijos mygtukų spalva: <metaname="msapplication-navbutton-color" content="#FFFFFF" />

14. („HyperText Markup Language 5“) HTML 5

15. HTML5 naujovės IE9 naršyklėje

16. <Audio> ir <Video> h.264formato video MP3 ir ACC formatų audio <videoid="movie" width="320" height="240" preload controls> <sourcesrc="video.mp4" /> <sourcesrc="video.webm"type='video/webm; codecs="vp8, vorbis"' /> <sourcesrc="video.ogv"type='video/ogg; codecs="theora, vorbis"' /> </video>

17. Canvas elementas HTML Elementas, leidžiantis piešti 2D grafiką, naudojant JavaScript: <canvasid="myCanvas" width="200" height="200"> Jusunarsykle Canvas elemento nepalaiko </canvas> <scripttype="text/javascript"> varexample = document.getElementById("myCanvas"); varcontext = example.getContext("2d"); context.fillStyle = "rgb(255,0,0)"; context.fillRect(30, 30, 50, 50); </script> Rezultatas:

18. Demo:HTML 5

19. („Scalable Vector Graphics 1.1“) SVG 1.1

20. SVG palaikymas Galimybė kurti vektorinę 2D grafiką, naudojant XML Paremtas SVG 1.1 (2 leidimas) pilna specifikacija Pilnas DOM priėjimas prie SVG elementų Struktūra, transformavimas, stilizavimas, figūros, spalvos ir t.t. <svgwidth="400" height="200" xmlns="http://www.w3.org/2000/svg"> <rectfill="red" x="20" y="20" width="100" height="75" /> <rectfill="blue" x="50" y="50" width="100" height="75" /> </svg> Rezultatas:

21. Demo:SVG 1.1

22. („Cascading Style Sheets 3“) CSS 3

23. CSS3 naujovės IE9 naršyklėje

24. Suapvalinti kampai border-radius:152px 304px 228px 152px; border-style:dashed; border-width:6px; padding:48px;

25. WOFF šriftų formatai Nebereikia apsiriboti tik „saugiais“ šriftais WOFF („Web OpenFontFormat“) leidžia norimus šriftus pateikti kiekvienam vartotojojui Supakuojama OpenType ir TrueType šriftų informacija Formatas remiasi W3C FontsWorkingGroup specifikacija <styletype="text/css"> @font-face{ font-family:Pavadinimas; src:url('Sriftas.woff'); } </style> <divstyle="font: 24pt Pavadinimas, sans-serif;"> Tekstas bus matomas Sriftas.woff šriftu </div>

26. („Compatibility“) Suderinamumas

27. X-UA-Compatible Standartus atitinkantiems, veikiantiems puslapiams: <metahttp-equiv="X-UA-Compatible" content="IE=9"> arba: <metahttp-equiv="X-UA-Compatible" content="IE=edge"> Standartų neatitinkantiems, su „Internet Explorer 9“ nesuderinamiems puslapiams: <metahttp-equiv="X-UA-Compatible" content="IE=EmulateIE7"> arba: <metahttp-equiv="X-UA-Compatible" content="IE=EmulateIE8">

28. User-Agent eilutė Padidinta aplikacijos versija iš Mozilla/4.0 įMozilla/5.0 Versijos žymė padidinta iš MSIE 8.0 į MSIE 9.0 Atvaizdavimo variklio („Trident“) žymė padidinta iš Trident/4.0 į Trident/5.0 Internet Explorer 9 siųs štai tokią User-Agent eilutę: Aplikacijos vardasir versija Versijosžymė Atvaizdavimo variklio(„Trident“) žymė Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; WOW64; Trident/5.0) Suderinamumožymė Platforma(OS versija ir architektūra)

29. („Developer Tools“) Programų kūrėjo įrankiai

30. Kas tai? Įvairių įrankių, palengvinančių kuriamo tinklalapio testavimą ir klaidų aptikimą, rinkinys: ...

32. Konsolės kortelė („Console Tab“):

33. JavaScript klaidų pranešimų peržiūra

34. JavaScript funkcijų vykdymas

35. Tinklo kortelė („Network Tab“):

36. HTTP/HTTPS srauto stebėjimas

37. Užklausų ir atsakų peržiūra ir išsaugojimas

38. Papildoma informacija apie gautus duomenis

40. („Summary“) Pabaigai: Apibendrinimas

41. Internet Explorer 9 Veikianti ypatingai greitai Dėmesį sutelkianti į Jūsų tinklalapį Veikianti su tuo pačiu kodu Išnaudoja pilną Jūsųkompiuterio pajėgumą, pasitelkdama GPUspartinimą bei naująjį JavaScriptvariklį – Chakra. Paprasta, „švaresnė“ vartotojo sąsaja beiintegracija su operacine sistema leidžia sutelktidėmesį į puslapį – ne į naršyklę. Patobulintas standartųpalaikymas. Tas pats kodasvienodai veikiaskirtingose naršyklėse.Jį lengva testuoti.

43. Pristatomasis „Internet Explorer 9“ puslapis („Beauty of the WEB“):http://www.beautyoftheweb.com

44. „Internet Explorer 9“ testavimo puslapis („Test Drive“):http://ie.microsoft.com/testdrive

45. „Internet Explorer 9“ Beta gidas programuotojams („Internet Explorer 9 Beta Guide for Developers“):http://msdn.microsoft.com/en-us/ie/ff468705.aspx