Václav Dajbych Microsoft Student Partner

Novinky v Václav Dajbych Microsoft Student Partner @Dajbych dajbych.net feed.dajbych.net events.dajbych.net

Obsah • PinnedSite • GPU • Chakra • HTML5 • CSS3 • SVG @Dajbych dajbych.net feed.dajbych.net events.dajbych.net

Desktopová aplikace

Připnuté weby • Tlačítka v náhledu • Barva tlačítek • Překryvná ikona • Velikost okna • Jméno aplikace • Výchozí URL • Úlohy • Akce

Připnuté weby Demo http://ie.dajbych.net

Vykreslovací režimy v IE9 Networking JavaScript Rendering Marshalling DOM Formatting HTML CSS Collections IE 4/5 Quirks Layout Marshalling DOM Formatting HTML CSS Collections IE 6/7Strict Marshalling DOM Formatting Block Building Layout HTML CSS Collections IE 8Hybrid DOM Formatting Block Building Layout HTML CSS Collections Rendering JavaScript IE 9Standards

Přepínání vykreslovacích režimů • <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"> • X-UA-Compatible: IE=8 • <!DOCTYPE html> • application/xhtml+xml • IE=5 • IE=EmulateIE7 • IE=7 • IE=EmulateIE8 • IE=8 • IE=edge

Vykreslování na GPU Demo FlyingImages

Běžné vykreslování Images Text Video SVG Canvas CSS3

IE9 – vykreslování na GPU Images Text Video SVG Canvas CSS3 DirectX, Direct2D aDirectWrite

FlyingImages – IE8

Flyingimages – IE8 vs IE9 • JavaScript • COM call • Layout • Display subsystem • Composition Internet Explorer 8 Internet Explorer 9

FlyingImages – IE9

Jiný „HW akcelerovaný“ prohlížeč Images Text Video SVG Canvas CSS3

Vykreslování na GPU Demo Speed Reading

Silverlight & Flash • Všechny ActiveX prvky mohou být vykreslovány přes GPU (ISurfacePresenter) • Silverligh 3 <param name="enableGPUAcceleration" value="true"> • Flash 10.2 Beta

JavascriptovýengineChakra Internet Explorer 9 VBScript • Bez COM call • Sdílený DOM • ECMAScript 5 • Běh v UI Thread • Optimalizace na pozadí COM DOM JavaScript(Chakra) DOM ES5

ECMAScript 5 • Getter, setter • Reflexe • Detekce pole • Readonly, sealed

ECMAScript 5 var people = ["Bob", "Jane", "Mary", "Chris"]; for (var person in people) processPerson(people[i]); people.forEach(processPerson); Array.prototype.indexOf Array.prototype.lastIndexOf Array.prototype.every Array.prototype.some Array.prototype.forEach Array.prototype.map Array.prototype.filter Array.prototype.reduce Array.prototype.reduceRight

HTML5

<video> • Pro streamováníSilverlight • Nativně • H.264 • DirectShow • Ogg • WebM

<video> Demo SpaceShuttle Atlantis

Nové možnosti přes JavaScript • getElementsByClassName • window.location.hash • window.addEventListener("hashchange", …) • var parser = newDOMParser(); • var xhr = newXMLHttpRequest(); • var doc = parser.parseFromString(xhr.responseText, "text/xml"); • var serializer = newXMLSerializer(); • var xmlString = serializer.serializeToString(doc);

Featuredetection if (window.DOMParser) { // Coderelying on DOMParser support } else { // Fallbackcode }

Featuredetection if (window.XMLSerializer) { // Coderelying on XMLSerializer support } else { // Fallbackcode }

Featuredetection if (localStorage) { var data1 = 'zapamatováníhodná data'; varkey = 'data'; localStorage.setItem(key, data1); var data2 = localStorage.getItem(key); }

Featuredetection if (window.addEventListener) { window.addEventListener('load', Init, false); } elseif(window.attachEvent) { window.attachEvent('onload', Init); } functionInit() { }

DocumentObject Model Events • window.addEventListener

<canvas> • 2D • Grafy • Diagramy • Animace • 3D • Technologické demonstrátory

<canvas> Demo CanvasPad

CSS3 • 2D Transforms • Backgrounds & Borders • Color • Fonts • Media Queries • Namespaces • Selectors

CSS3 2D Transforms Demo MoraineLake

CSS3 Color Module • background-color: rgba(255,0,0,0.5); • background-color: rgba(100%,0%,0%,0.5); • background-color: hsl(0,100%,50%); • background-color: hsla(0,100%,50%,0.5); • opacity: 0.6; • opacity: 80%;

Web Open Font Format • Mozilla, Opera, Microsoft • Podpora ve všech hlavních prohlížečích • WOFF • TrueType • OpenType • Open Font Format

Web Open Font Format Demo Ubuntufont

CSS3 Media Queries Module • @media screen and (max-width:400px) • @media screen and (max-width:400px) and … • min- / max- • width • height • device-width • device-height • resolution • aspect-ratio • device-aspect-ratio • color • color-index • monochrome • orientation • scan • grid

CSS3 Selectors Demo CSS3 Selectors Test

SVG • Kód v HTML či XHTML • Přístup přes DOM pomocí JavaScript

SVG Demo The Microsoft Dynamics Customer Model

Shrnutí a dotazy • PinnedSite • GPU • Chakra • HTML5 • CSS3 • SVG @Dajbych dajbych.net feed.dajbych.net events.dajbych.net

Václav Dajbych Microsoft Student Partner