HTML5: The Future of Web Development with IE9, IE10 and Windows 8

Provides new semantic vocabularyfor parts of a page previouslyserved by DIVs with ID and Classattributes.

Allows for associating captionswith embedded content, includingvideos, audio, pullquotes, orimages.

<video src="test.ogg" autoplay="autoplay" controls="controls">Allows for associating captions Your browser does not support the video element. This could also include object andwith embedded content, including embed codes for legacy browsers.videos, audio, or images. </video>

METER Contained content is a measurement, like length.PROGRESS Contains current process toward a goal, like a percentage.TIME Time.COMMAND Represents something a command a user may execute.DATAGRID Represents data. Non-tabular or otherwise.OUTPUT Displays the output of a program or process.RUBY Allows input of rubi/ruby annotations for Asian languages.

DATETIME Allows input of a date and a time.DATETIME-LOCAL Allows input of a date and a time, in local time.NUMBER Allows input of a number.RANGE Input is verified to be within a range.EMAIL Confirms the input to be a valid email.URL Ensures input is a valid URL.COLOR Provides a mechanism for the user to input an RGB color.

The HTML 5 doctype is way <!DOCTYPE html>easier than any other doctype.Ever!Just type the parts you remember,and you‟ll probably be right.

HTML 5 supports the standardHTML syntax (formerly SGML),but also allows for an XML-basedvariant XHTML5. <html> vs.Since it‟s XML, XHTML should <html xmlns="http://www.w3.org/1999/xhtml">be served as application/xml orapplication/xhtml+xml. Warning:this means browsers freak ifthere‟san error.

Allows objects (images and links,by default) to be dragged andthendropped onto a target.The target is enabled by cancelingthe „dragover‟ (for sane browsers)or „dragenter‟ (for IE) events forthe drop target. Then listen for a„drop‟ event which contains a„dataTransfer‟ object with info.

The sessionStorage DOM attributestores session data for a singlewindow, like cookies on crack. <inputThe localStorage DOM attribute type="checkbox"allows each site to store onchange=" localStorage.insurance=checkedmegabytes of data across sessions "to improve performance. />Both methods store only strings.

<html manifest=”/cache.manifest”>Allow the client to refer directly to CACHE MANIFESTits cache, authoritatively, for index.htmlcertain resources, even if the help.html style/default.cssbrowser is offline. images/logo.png images/backgound.pngResources listed in the “network” NETWORK:section are never cached. server.cgi

<canvas id="canvas" width="150" height="150"> fallback content </canvas>Provides an API for drawingdirectly in the browser window, function draw() {using instructions that define var canvas = document.getElementById("canvas");vector-based shapes and lines. if (canvas.getContext) { var ctx = canvas.getContext("2d");This allows SVG-like graphics to ctx.fillStyle = "rgb(200,0,0)";be created on the fly in the ctx.fillRect (10, 10, 55, 50); ctx.fillStyle = "rgba(0, 0, 200, 0.5)";browser, with fallback content Ctx.fillRect (30, 30, 55, 50);(like Flash?) provided to legacy }browsers. }

Adjusts the opacity of the selectedelement‟s presentation on screen.Takes values between 0.0 (fullytransparent) and 1.0 (fullyopaque)

Like RGB color definitions, butallows a fourth field, defining the div { color: rgb(0,255,0); }alpha value of the color beingapplied.Like opacity, the alpha value isbetween 0.0 (fully transparent)and 1.0 (fully opaque). div { color: rgba(0,255,0,0.5); }

Defines the size at which thebrowser should display thespecified background image. div { background-size: 100px 65px; }Accepts all normal size definitionsas width followed by height.In shorthand, this appears afterbackground-position values. div { background-size: 400px 65px; }

Allows for multiple border colorsto be specified, one pixel at a border: 5px solid #000;time. The last specified color is border-color: #000 transparent transparent #000;repeated if necessary.This cannot be used in the bordershorthand syntax.

Border-imageBorder-radiusBox-shadow

Creates a drop shadow beneaththe selected text.The first argument is thehorizontal offset, the second is thevertical offset, the third is the blurradius, and the final argument isthe color to be used as theshadow. Multiple shadowdefinitions may be separated text-shadow: 10px 10px 10px #333;using commas.

Allows a font file to be associatedwith a font name for later use infont-family declarations. @font-face {IE supports only .eot Embedded font-family: Helvy; src: local("Helvetica Neue Bold"),OpenType files, while the other local("HelveticaNeue-Bold"),browsers support any TTF and url(MgOpenModernaBold.ttf); font-weight: bold;OTF font files. } p.specialFont { font-family: Helvy, sans-serif; }

Rotates the selected element atthe defined angle, defined indegrees.The rotation doesn‟t affect layout, transform: rotate(30deg);and elements that aretransformed are treated similarlyto position:relative.

Scales the element in questionbased on the specified unit-lessnumbers given for the X and Y transform: scale(0.5,2.0);axes. If only one number isgiven, it is applied to both axes.

PERSPECTIVE The distance, in pixels, of the z=0 plane from the viewer.MATRIX3D Allows creation of a 3d transformation matrix.ROTATE3D Rotate the matched element in three dimensions.SCALE3D Performs a three-dimensional scale operationTRANSLATE3D Allows the matched element to be moved along three axes.

HTML 5 Doctor http://html5doctor.com/HTML 5 Spec http://dev.w3.org/html5/spec/Overview.htmlALA Article http://www.alistapart.com/articles/previewofhtml5IE9 Experience http://beautyoftheweb.com/Your PresenterShaymaa Al-Terkait, shaymaa@microsoft.com @ahamshay

HTML5: The Future of Web Development with IE9, IE10 and Windows 8

by Shaymaa

Accessibility

Categories

Upload Details

Usage Rights

2 Embeds 581

Statistics

HTML5: The Future of Web Development with IE9, IE10 and Windows 8 Presentation Transcript

http://www.scoop.it	578
http://translate.googleusercontent.com	3