html & css for the gaming board game title score stats board controls #grid { display: -ms-grid;...
TRANSCRIPT
HTML5 & CSS3 latest features in action!David RoussetTechnical Evangelist – Microsoft FranceSession 3-114
What we’ll see
• Microsoft is committed to standards• IE10 provides compelling & immersive
experiences• IE10 is great with touch
• Use the same technologies to build Windows 8 apps
• CSS3 layouts and animations
• New HTML5 APIs• Touch support
Agenda
CSS3 layouts and animations
Internet Explorer 10 : CSS & SVG features
CSS 2D TransformsCSS 3D TransformsCSS AnimationsCSS Backgrounds & BordersCSS ColorCSS FlexboxCSS FontsCSS Grid AlignmentCSS Hyphenation
CSS Image Values (Gradients)CSS Media QueriesCSS multi-column LayoutCSS NamespacesCSS OM ViewsCSS Positioned Floats (Exclusions)CSS Selectors
CSS TransitionsCSS Values and UnitsICC Color ProfilesSVG Filter EffectsSVG, standalone and in HTML
CSS grid layout as a scramble game
HTML & CSS for the gaming board
<div id="grid"> <div id="title">Game Title</div> <div id="score">Score</div> <div id="stats">Stats</div> <div id="board">Board</div> <div id="controls">Controls</div> </div>
<style type="text/css"> #grid { display: -ms-grid;
-ms-grid-columns: auto 1fr; -ms-grid-rows: auto 1fr auto; }
#title { -ms-grid-column: 1; -ms-grid-row: 1 } #score { -ms-grid-column: 1; -ms-grid-row: 3 } #stats { -ms-grid-column: 1; -ms-grid-row: 2; -ms-grid-row-align: start } #board { -ms-grid-column: 2; -ms-grid-row: 1; -ms-grid-row-span: 2 } #controls { -ms-grid-column: 2; -ms-grid-row: 3; -ms-grid-column-align: center } </style>
Demo: simple usage of CSS grid layout
Merging grid & media queries @media (orientation: landscape) { #title { -ms-grid-column: 1; -ms-grid-row: 1 } #score { -ms-grid-column: 1; -ms-grid-row: 3 } #stats { -ms-grid-column: 1; -ms-grid-row: 2; -ms-grid-row-align: start } #board { -ms-grid-column: 2; -ms-grid-row: 1; -ms-grid-row-span: 2 } #controls { -ms-grid-column: 2; -ms-grid-row: 3; -ms-grid-column-align: center } }
@media (orientation: portrait) { #title { -ms-grid-column: 1; -ms-grid-row: 1 } #score { -ms-grid-column: 1; -ms-grid-row: 2 } #stats { -ms-grid-column: 2; -ms-grid-row: 1; -ms-grid-row-span: 2 } #board { -ms-grid-column: 1; -ms-grid-row: 3; -ms-grid-column-span: 2 } #controls {-ms-grid-column: 1; -ms-grid-row: 4; -ms-grid-column-span: 2; -ms-grid-column-align: center } }
Demo: CSS grid layout & media queries
CSS3 for transforms & content flow • CSS3 3D Transform
• Enhancement to CSS Transforms in three dimensions
• CSS3 Multi-column and Hyphenation• Split text into columns and hyphenate to improve readability
• CSS3 Positioned Floats• Flow content around positioned elements
Demo: CSS3 3-D transforms, columns & positioned floats
Animations with CSS3
Specification Transitions Animations
Characteristics DelayDurationTiming functionProperties to transition
DelayDurationTiming function
Eventstransitionend animationstart
animationendanimationiteration
How it worksChange property value and browser takes over. “Fire and forget”.
Keyframes: which properties to change, to what values, at what times.
Demo: CSS3 animations & transforms
Integrating inside a game
New HTML5 APIs
Internet Explorer 10 : HTML5 & DOM APIs
Animation FramesData URIDOM Element TraversalDOM HTMLDOM Level 3 CoreDOM Level 3 EventsDOM StyleDOM Traversal and RangeDOMParser and XMLSerializerECMAScript 5File Reader APIFile SavingFormData
HTML5 Application CacheHTML5 asyncHTML5 CanvasHTML5 Drag and dropHTML5 Forms and ValidationHTML5 GeolocationHTML5 History APIHTML5 ParserHTML5 SandboxHTML5 SelectionHTML5 semantic elementsHTML5 video and audio
ICC Color ProfilesIndexedDBPage VisibilityPointer (Mouse, Pen, and Touch) EventsResource TimingSelectors API Level 2Timing callbacksWeb MessagingWeb SocketsWeb WorkersXHTML/XMLXMLHttpRequest (Level 2)
HTML5 application cache
• Manifest-based caching to enable offline scenarios
• Choose the files to cache: HTML, CSS, JavaScript & resources
• Improve availability of resources beyond local HTTP cache
• Resynchronize files by updating the manifest
<html manifest=“test.appcache">
<head>
...
<link href="yourstyles.css“ rel="stylesheet"> <script src="yourcode.js"></script> </head> <body>
...
<video … src=“yourvideo.mp4” …>
</video>
...
</body>
</html>
Usage of app cache via manifest fileCache Manifest#10/26/2012 v8Cache:index.htmlyourstyles.cssyourcode.js...yourvideo.mp4
Network:*
HTML File Manifest File
MIME Type: text/cache-manifest
File API• Read data from files chosen by the user
• New objects to represent data• Blob, File, FileReader
• New methods to access data • readAsArrayBuffer• readAsBinaryString• readAsText• readAsDataURL
Read text using FileReaderfunction startRead() { // Obtain input element through DOM. var file = document.getElementById('file').files[0]; if (file) { getAsText(file); }}
function getAsText(readFile) { var reader = new FileReader();
// Read file into memory as UTF-16 reader.readAsText(readFile, "UTF-16");
// Handle progress, success, and errors reader.onprogress = updateProgress; reader.onload = loaded; reader.onerror = errorHandler;}
Drag-n-drop & forms
• HTML5 Drag/drop• Make any element draggable
• Drag files from the desktop to the browser
• HTML5 Forms• Replace repetitive JavaScript form validation with HTML
• Use built-in validation UX or customize using validation events
Demo: HTML5 forms
Integrating inside a game
IndexedDB• Store, index, and query data on the client
• Full key-value pair object stores
• Index using object attributes
• No dependency on the browser’s database implementation
Demo: using IndexedDB to store images
Single page web application
WebWorkers• The JavaScript multi-threading approach
• Free the UI thread by sending requests to workers
• Communicating with workers via postMessage()
• No DOM access
Demo: using WebWorkers to apply filters to images
Touch support
Pointer (touch, pen, mouse) events• Write once for touch, pen, and mouse
• Sites written only for mouse work automatically
• Follow the familiar pattern of DOM mouse events, with extensions for touch properties and interaction principles
Build great touch apps and sites• Use MSPointer events to code for touch,
mouse, and pen in a unified way• Use MSGesture events to get easy access to
the Windows 8 touch language• Use CSS pan and zoom properties to configure
the Windows 8 touch personality• http://msdn.microsoft.com/en-US/library/ie/hh920761.aspx
• Microsoft submission to W3C: http://www.w3.org/Submission/pointer-events/
Demo: using pointers
What we’ve seen
• Microsoft is committed to standards• IE10 provides compelling & immersive
experiences• IE10 is great with touch
• Use the same technologies to build Windows 8 apps
Resources• Check out our demos: ie.microsoft.com/
testdrive• Hands On: Windows 8 HTML5 Platform: ie.microsoft.com/testdrive
/Graphics/hands-on-css3/ • Some of them explained on the IE Blog: blogs.msdn.com/ie
• Internet Explorer 10 Guide for Developers
• My blog: blogs.msdn.com/davrous • You’ll find articles and the source code of the platformer game
Q/A
• Develop: http://msdn.microsoft.com/en-US/windows/apps/br229512
• Design: http://design.windows.com/
• Samples: http://code.msdn.microsoft.com/windowsapps/Windows-8-Modern-Style-App-Samples
• Videos: http://channel9.msdn.com/Windows
Resources
Please submit session evals by using the Build Windows 8 appor at http://aka.ms/BuildSessions
© 2012 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.