1 / 41

Novinky v

Novinky v. Václav Dajbych Microsoft Student Partner. http://dajbych.net. Obsah. Pinned Site GPU Chakra HTML5 CSS3 SVG. Prezentace ke stažení na ie.dajbych.net. Desktopová aplikace. Připnuté weby. Tlačítka v náhledu Barva tlačítek Překryvná ikona Velikost okna. Jméno aplikace

yoshi
Download Presentation

Novinky v

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Novinky v Václav Dajbych Microsoft Student Partner http://dajbych.net

  2. Obsah • PinnedSite • GPU • Chakra • HTML5 • CSS3 • SVG Prezentace ke stažení na ie.dajbych.net

  3. Desktopová aplikace

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

  5. Připnuté weby Demo

  6. 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

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

  8. Vykreslování na GPU Demo FlyingImages

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

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

  11. FlyingImages – IE8

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

  13. FlyingImages – IE9

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

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

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

  17. Vykreslování na GPU Demo Speed Reading

  18. 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

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

  20. HTML5

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

  22. <video> Demo SpaceShuttle Atlantis

  23. 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);

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

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

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

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

  28. DocumentObject Model Events • window.addEventListener

  29. <canvas> Demo CanvasPad

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

  31. CSS3 2D Transforms Demo MoraineLake

  32. 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%;

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

  34. Web Open Font Format Demo Ubuntufont

  35. 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

  36. CSS3 Selectors Demo CSS3 Selectors Test

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

  38. SVG Demo The Microsoft Dynamics Customer Model

  39. Shrnutí a dotazy • PinnedSite • GPU • Chakra • HTML5 • CSS3 • SVG Prezentace ke stažení na ie.dajbych.net

More Related