Programuotojams

Tomas Dabašinskas
Microsoft MVP
Pranešimo planas

Darbastali
Našumas o HTML 5 Testavimas
integracija
Vaizdo apdorojimo spartinimas
(„GPU Acceleration“)
Kaip tai veikia?
Paprasti puslapių
3 elementai piešiami WEB
puslapio buferyje

Sudėtingi puslapio
2 elementai (SVG, Canvas)
piešiami į GPU buferius

Paveikslėliai ir video
elementai parsiunčiami,
1 dekoduojami ir perkeliami
į GPU buferius GPU buferiai sujungiami
Windows Desktop
su tiesiogiai nupieštu
4 turiniu, kad sudarytų pilną 5 Window Manager (DWM)
atvaizduoja galutinį vaizdą
WEB puslapio vaizdą
Chakra
(„JavaScript Engine“)
Kaip JavaScript veikė iki IE9

Pirmam plane...
Pirminis Analizatori Interpretatori
AST BaitKodas
kodas us us
 Kaip JavaScript veikia IE9

Pirmam plane...
Pirminis Analizatori Interpretatori
AST BaitKodas
kodas us us

Foninis
Native
kompiliatoriu
Foniniam plane... s
kodas

Išnaudojami visi
Sukompiliuotas JavaScript Vyksta fone
branduoliai
Demo:
Chakra
Prisegamos kortelės
(„Pinned Tabs“)
 Demo:
Prisegamos kortelės
Peršokimo sąrašų užduotys

<meta name="msapplication-task" content="name=Užduotis 1;action-

uri=/puslapis1;icon-uri=Piktograma1.ico" />
<meta name="msapplication-task" content="name=Užduotis 2;action-
uri=/puslapis2;icon-uri=Piktograma2.ico" />
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); // Aktyvus ir
matomas
window.external.msSiteModeUpdateThumbBarButton(btn3, true, false); // Aktyvus, bet
nematomas
Piktogramos
Aukštos kokybės puslapio piktograma:

<link rel="shortcut icon" href="piktograma.ico" />

Piktograma su persidengimu:
window.external.msSiteModeSetIconOverlay('Piktogram
a', 'Tekstas');

Navigacijos mygtukų spalva:

<meta name="msapplication-navbutton-color"
content="#FFFFFF" />
HTML 5
(„HyperText Markup Language 5“)
HTML5 naujovės IE9
naršyklėje
Juodraštinio HTML5 varianto palaikymas

Vaizdo palaikymas (<video>)

Garso palaikymas (<audio>)

„Canvas“ palaikymas
<Audio> ir <Video>
1. h.264 formato video
2. MP3 ir ACC formatų audio
<video id="movie" width="320" height="240" preload controls>
<source src="video.mp4" />
<source src="video.webm" type='video/webm; codecs="vp8,
vorbis"' />
<source src="video.ogv" type='video/ogg; codecs="theora,
vorbis"' />
</video>
 Canvas elementas
HTML Elementas, leidžiantis piešti 2D grafiką, naudojant
JavaScript:
<canvas id="myCanvas" width="200" height="200">
Jusu narsykle Canvas elemento nepalaiko
</canvas>

<script type="text/javascript">
var example = document.getElementById("myCanvas");
var context = example.getContext("2d");
context.fillStyle = "rgb(255,0,0)";
context.fillRect(30, 30, 50, 50);
</script>

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

Rezultatas:
 Demo:
SVG 1.1
CSS 3
(„Cascading Style Sheets 3“)
CSS3 naujovės IE9 naršyklėje
Suapvalinti kampai („border-radius“)

Fono ir rėmelių naujovės

Permatomumas („opacity“)

RGBA, HSL ir HSLA spalvų modeliai

Media užklausos („media queries“)

Naujų šriftų formatų palaikymas

Suapvalinti kampai

border-radius: 152px 304px 228px

152px;
border-style: dashed;
border-width: 6px;
padding: 48px;
 WOFF šriftų formatai
1. Nebereikia apsiriboti tik „saugiais“ šriftais
2. WOFF („Web Open Font Format“) leidžia norimus šriftus
pateikti kiekvienam vartotojojui
3. Supakuojama OpenType ir TrueType šriftų informacija
4. Formatas remiasi W3C Fonts Working Group specifikacija
<style type="text/css">
@font-face {
font-family: Pavadinimas;
src: url('Sriftas.woff');
}
</style>

<div style="font: 24pt Pavadinimas, sans-serif;">

Tekstas bus matomas Sriftas.woff šriftu
</div>
Programų kūrėjo įrankiai
(„Developer Tools“)
 Kas tai?
Įvairių įrankių, palengvinančių kuriamo tinklalapio testavimą ir
klaidų aptikimą, rinkinys:

HTML
Validacija
Redag.

Konsolė
... CSS Redag.

Tinklo JS
stebėjimas testavimas
 Pasikeitimai nuo IE8
• Našumo patobulinimai
• Konsolės kortelė („Console Tab“):
• JavaScript klaidų pranešimų peržiūra
• JavaScript funkcijų vykdymas
• Tinklo kortelė („Network Tab“):
• HTTP/HTTPS srauto stebėjimas
• Užklausų ir atsakų peržiūra ir išsaugojimas
• Papildoma informacija apie gautus duomenis
• User-Agent keitimo įrankis („UA Switcher Tool“)
 Demo:
Programų kūrėjo įrankiai
Pabaigai: Apibendrinimas
(„Summary“)
Internet Explorer 9

Veikianti Dėmesį sutelkianti Veikianti su tuo

ypatingai greitai į Jūsų tinklalapį pačiu kodu

Išnaudoja pilną Jūsų Paprasta, „švaresnė“ Patobulintas standartų

kompiuterio pajėgumą, vartotojo sąsaja bei palaikymas. Tas pats kodas
pasitelkdama GPU integracija su operacine vienodai veikia
spartinimą bei naująjį sistema leidžia sutelkti skirtingose naršyklėse.
JavaScript variklį – dėmesį į puslapį – ne į Jį lengva testuoti.
Chakra. naršyklę.
 Resursai
• Oficialus „Internet Explorer“ puslapis:
http://msdn.microsoft.com/en-us/ie/default.aspx

• Pristatomasis „Internet Explorer 9“ puslapis („Beauty of the

WEB“):
http://www.beautyoftheweb.com

• „Internet Explorer 9“ testavimo puslapis („Test Drive“):

http://ie.microsoft.com/testdrive

• „Internet Explorer 9“ Beta gidas programuotojams („Internet

Explorer 9 Beta Guide for Developers“):
http://msdn.microsoft.com/en-us/ie/ff468705.aspx

• Informacija apie prisegamų kortelių kūrimą:

http://msdn.microsoft.com/en-us/library/gg131029%28VS.85%29.aspx
 Ačiū už dėmesį
http://www.dabasinskas.net
Programuotojams tomas@dabasinskas.net
@Dabasinskas