0025 todo lo_que_queria_saber_de_html5_y_no_se_animaba_a_preguntar
TRANSCRIPT
![Page 2: 0025 todo lo_que_queria_saber_de_html5_y_no_se_animaba_a_preguntar](https://reader037.vdocuments.mx/reader037/viewer/2022102400/54513c8caf795902348b580f/html5/thumbnails/2.jpg)
The HTML5 Web:Graphically- and Media-Rich
Evolution of the Web
The AJAX Web: JavaScript + DOM + Asynchronous Requests
Web “2.0”
The Content Web: HTML & CSS
Web “1.0”
![Page 3: 0025 todo lo_que_queria_saber_de_html5_y_no_se_animaba_a_preguntar](https://reader037.vdocuments.mx/reader037/viewer/2022102400/54513c8caf795902348b580f/html5/thumbnails/3.jpg)
A Browser Decomposed
Display Tree
“DOM”
HTML Objects
CSS PropertiesScript Edits
Events Animates
AnimationTimer
Layout Display
Input streams
HTMLCSSScriptXHTML
Parsed
![Page 4: 0025 todo lo_que_queria_saber_de_html5_y_no_se_animaba_a_preguntar](https://reader037.vdocuments.mx/reader037/viewer/2022102400/54513c8caf795902348b580f/html5/thumbnails/4.jpg)
HTML introductionBasis for any webpageWeb evolution HTML evolution
4
![Page 5: 0025 todo lo_que_queria_saber_de_html5_y_no_se_animaba_a_preguntar](https://reader037.vdocuments.mx/reader037/viewer/2022102400/54513c8caf795902348b580f/html5/thumbnails/5.jpg)
HTML5: What’s in it for me
5
Beautiful
Dynamic “Next” Web Semantic
Rich
![Page 6: 0025 todo lo_que_queria_saber_de_html5_y_no_se_animaba_a_preguntar](https://reader037.vdocuments.mx/reader037/viewer/2022102400/54513c8caf795902348b580f/html5/thumbnails/6.jpg)
HTML5: New media elements and APIs
<video> tagExample:
<video src=“video.mp4” controls /><audio> tag
Example: <audio src=“sample.wav” />
6
![Page 7: 0025 todo lo_que_queria_saber_de_html5_y_no_se_animaba_a_preguntar](https://reader037.vdocuments.mx/reader037/viewer/2022102400/54513c8caf795902348b580f/html5/thumbnails/7.jpg)
Rich Media Integration—Without Plugins
HTML5 <video> elementIndustry-standard MPEG-4/H.264 videoVideo can be composited with anything else on the page
HTML content, images, SVG graphicsGPU-based implementation capable of maintaining 60fps full-screen at full HD resolution
Supports both DXVA and full hardware video decoders
HTML5 <audio> elementIndustry-standard MP3 and AAC audio
<video width="800" height="450" src="myvideo.mp4" autoplay>
No video for you</video>
![Page 8: 0025 todo lo_que_queria_saber_de_html5_y_no_se_animaba_a_preguntar](https://reader037.vdocuments.mx/reader037/viewer/2022102400/54513c8caf795902348b580f/html5/thumbnails/8.jpg)
HTML5: New media elements and APIs
<canvas> tagExample:
<canvas id=“my_canvas” width=100 height=100 /><script>
var my_canvas = document.getElementById(“my_canvas”);if (my_canvas.getContext) context = my_canvas.getContext("2d");// draw
</script>
8
![Page 9: 0025 todo lo_que_queria_saber_de_html5_y_no_se_animaba_a_preguntar](https://reader037.vdocuments.mx/reader037/viewer/2022102400/54513c8caf795902348b580f/html5/thumbnails/9.jpg)
HTML5: Semantic markupNew elements:
<section>, <header>, <article>, <nav>, …
9
![Page 10: 0025 todo lo_que_queria_saber_de_html5_y_no_se_animaba_a_preguntar](https://reader037.vdocuments.mx/reader037/viewer/2022102400/54513c8caf795902348b580f/html5/thumbnails/10.jpg)
HTML5: Semantic markupDeprecated elements:
<font>, <center>, <frame>
10
![Page 11: 0025 todo lo_que_queria_saber_de_html5_y_no_se_animaba_a_preguntar](https://reader037.vdocuments.mx/reader037/viewer/2022102400/54513c8caf795902348b580f/html5/thumbnails/11.jpg)
HTML5: SVG (Vector Graphics) <svg> element
Example:<svg>
<rect x=0 y=0 width=100 height=100 fill="red" /><rect x=100 y=0 width=100 height=100 fill="green" /><rect x=0 y=100 width=100 height=100 fill="blue" /><rect x=100 y=100 width=100 height=100 fill="yellow" />
</svg>
11
![Page 12: 0025 todo lo_que_queria_saber_de_html5_y_no_se_animaba_a_preguntar](https://reader037.vdocuments.mx/reader037/viewer/2022102400/54513c8caf795902348b580f/html5/thumbnails/12.jpg)
HTML5: Forms improvementsInput element types:
Tel, search, url, email, date, number, range, color
New form functions:Autofocus, multiple files upload
12
![Page 13: 0025 todo lo_que_queria_saber_de_html5_y_no_se_animaba_a_preguntar](https://reader037.vdocuments.mx/reader037/viewer/2022102400/54513c8caf795902348b580f/html5/thumbnails/13.jpg)
HTML5: Related technologies overview
CSS3SVGWebFonts
13
![Page 14: 0025 todo lo_que_queria_saber_de_html5_y_no_se_animaba_a_preguntar](https://reader037.vdocuments.mx/reader037/viewer/2022102400/54513c8caf795902348b580f/html5/thumbnails/14.jpg)
IE9 support for HTML5
14
IE9
HTML5Pe
rform
ance
Sam
e M
arku
p
GPU
Ac
cele
ratio
n
Platf
orm
Pre
view
![Page 15: 0025 todo lo_que_queria_saber_de_html5_y_no_se_animaba_a_preguntar](https://reader037.vdocuments.mx/reader037/viewer/2022102400/54513c8caf795902348b580f/html5/thumbnails/15.jpg)
Top Objectives of Internet Explorer 9
Interoperable HTML5 MarkupInterpret the same HTML and CSS markup the same wayRun the same JavaScript the same way
GPU-powered HTML5 Graphics and MediaHTML5 demands a high-performance graphics subsystem
Across-the-board High Performance HTML5JavaScript executionPage layoutPage display
![Page 16: 0025 todo lo_que_queria_saber_de_html5_y_no_se_animaba_a_preguntar](https://reader037.vdocuments.mx/reader037/viewer/2022102400/54513c8caf795902348b580f/html5/thumbnails/16.jpg)
Internet Explorer 9 Platform Preview
![Page 17: 0025 todo lo_que_queria_saber_de_html5_y_no_se_animaba_a_preguntar](https://reader037.vdocuments.mx/reader037/viewer/2022102400/54513c8caf795902348b580f/html5/thumbnails/17.jpg)
Flying Images – One Animation
17
IE8
IE9
![Page 18: 0025 todo lo_que_queria_saber_de_html5_y_no_se_animaba_a_preguntar](https://reader037.vdocuments.mx/reader037/viewer/2022102400/54513c8caf795902348b580f/html5/thumbnails/18.jpg)
Call To ActionFollow the standard on W3C. Microsoft is participating as a co-chair of HTML Working GroupTry Internet Explorer 9 Platform PreviewCheck demos on http://ietestdrive.comWait and try IE 9 Beta – More news this week !More info: http://blogs.msdn.com/ie
![Page 20: 0025 todo lo_que_queria_saber_de_html5_y_no_se_animaba_a_preguntar](https://reader037.vdocuments.mx/reader037/viewer/2022102400/54513c8caf795902348b580f/html5/thumbnails/20.jpg)
© 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions,
it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.
![Page 21: 0025 todo lo_que_queria_saber_de_html5_y_no_se_animaba_a_preguntar](https://reader037.vdocuments.mx/reader037/viewer/2022102400/54513c8caf795902348b580f/html5/thumbnails/21.jpg)
ADDITIONAL SLIDES JUST FOR REFERENCE
![Page 22: 0025 todo lo_que_queria_saber_de_html5_y_no_se_animaba_a_preguntar](https://reader037.vdocuments.mx/reader037/viewer/2022102400/54513c8caf795902348b580f/html5/thumbnails/22.jpg)
Markup and Programming Model in Internet Explorer Platform PreviewCategory Feature Today ComingMarkup Inline SVG in HTML
XHTML/XML
CSS Infrastructure CSS3 Selectors
CSS3 Namespaces
DOM Core
Events
Style
Range
HTML5 Selection
![Page 23: 0025 todo lo_que_queria_saber_de_html5_y_no_se_animaba_a_preguntar](https://reader037.vdocuments.mx/reader037/viewer/2022102400/54513c8caf795902348b580f/html5/thumbnails/23.jpg)
SVG in Internet Explorer Platform Preview
SVG Feature Today ComingDocument Structure
Basic Shapes
Paths
Text
Transforms
Painting, Filling, Color
Scripting
Styling
Gradients and Patterns
Clipping and Masking
Markers and Symbols
![Page 24: 0025 todo lo_que_queria_saber_de_html5_y_no_se_animaba_a_preguntar](https://reader037.vdocuments.mx/reader037/viewer/2022102400/54513c8caf795902348b580f/html5/thumbnails/24.jpg)
GPU-Powered HTML5High Performance
JavaScript executionDOM interaction and layoutGPU-powered rendering
Cross-browser Interoperability
HTML5 markupCSS3 markupDOM programmability
Graphics Capabilities
Alpha color & opacityRound corners & multiple backgroundsHTML5-integrated SVG graphics
Media Capabilities
<video> element with MPEG-4/H.264<audio> element with MP3/AAC<img> with JPEG-XR, color profiles