This action might not be possible to undo. Are you sure you want to continue?
Get More Refcardz! Visit refcardz.com
About HTML5 Changes to Existing Components New Elements in HTML5 Attribute Changes HTML Event Handling Hot Tips and more...
HTML5: The Evolution of Web Standards
By James Sugrue
Embedding Scalar Vector Graphics (SVG) Both SVG and MathML elements can be directly embedded into your HTML5 document utilizing their syntax features.
CHANGES TO EXISTING COMPONENTS
NEW ELEMENTS IN HTML5
The following table presents an overview of the new elements that have been added to HTML5.
<article> <aside> <audio> <canvas> <command>
An independent piece of content for a document e.g. blog entry, forum entry A piece of content that is somehow related to the rest of the page Audio media content A component for rendering dynamic bitmap graphics on the fly. e.g games A command that the user can invoke: a button, radio button or checkbox Together with the new list attribute for the <input> element can be used to make combo boxes Additional information or controls that the user can obtain on demand, to provide details on the document, or parts of it Used for plug-in content A piece of self-contained flow content referenced as a single unit from the main flow of the document Caption for a <figure> Footer for a section; may contain information about author, copyright information, etc. A group of introductory or navigation aids Header of a section A key pair generation control for user authentication in forms A run of text in one document marker or highlighted for reference purposes
There are a number of simplifications to the syntax of HTML introduced in the HTML5 specification. Document Type The <doctype> for an HTML document has changed from its verbose DTD reference to a much simpler format, simply stating the document is an HTML document type:
<datalist> <details> <embed> <figure> <figcaption> <footer> <header> <hgroup> <keygen> <mark>
HTML5: The Evolution of Web Standards
This change allows HTML5 to be fully backward compatible with previous versions of HTML. Character Encoding The <meta> tag for a document allows you to set the character encoding using the simple charset attribute, replacing declarations such as:
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”>
Get over 90 DZone Refcardz FREE from Refcardz.com!
Other Encoding Options You can also set the encoding of the document by setting the Byte Order Mark at the start of the file, or by setting the HTTP Content-Type header at transport level.
Destination image elsewhere • vendorName-operationName Vendor specific operations follow this format • xor Exclusive OR of source and destination image context. initially transparent black.radius) Adds a point to the path that is connected to the previous point by an arc context.cp2y. repetition) Creates a new CanvasPattern object using the given image.moveTo(x.miterLimit[=value] Maximum allowed ratio of the miter length to half the line width. These are used to create complex shapes.0 and 1. Values outside the range 0.clip() Constrains the clipping region to a given path context. Line Styles The following line styles can be applied from the context: Line Style Methods context. or rectangles: Simple Shape Methods context. | www. or a CanvasGradient /CanvasPattern context.cp1y. Initially set to 10.bezierCurveTo(cp1x.w. The color parameter must be a CSS color To create a CanvasPattern object use the following method: CanvasPattern Method context.h) Draws the outline of the rectangle path using strokeStyle.h) Clears the pixels in the specified rectangle that also intersect the current clipping region to fully transparent black.y. context.w.0. Inc. color) Adds a new stop to the gradient at a point between 0.quadrativeCurveTo(cpx. video or canvas.shadowOffsetY[=value] The distance that a shadow will be offset in horizontal and vertical distance Shapes Three methods are available to create simple shapes.addColorStop(offset. Complex Shape Methods context.com . Display source image where source is opaque but destination is transparent • destination-in Display destination image wherever both destination and source images are opaque • destination-out Display destination image wherever destination image is opaque and source image is transparent • destination-over Display destination image wherever destination image is opaque. Initially set to 1. Can be a string containing a CSS color.h) Adds a new closed subpath to the path.y) Adds a point to the path that is connected to the previous point by a cubic Bezier curve context.shadowBlur[=value] The size of the blurring effect. Either bevel.radius.y2. context.isPointInPath(x.strokeStyle[=value] Returns or sets the current style used for the stroke of shapes.y1.lineCap[=value] The ending that will be placed at the end of the line.y.dzone. round or miter. Initially set to miter context.fillStyle[=value] Returns or sets the current style used for filling shapes. in coordinate space units.w.y.0 (no transparency) are ignored. or a CanvasGradient /CanvasPattern The context always has a current path. each representing each end of the gradient.strokeRect(x.arc(x. Miter length is the distance from the point where the join occurs to the intersection of the line edges on the outside of the join.cp2x.closePath() Marks the current subpath as closed. Shadows There are four global shadow attributes that affect all drawing operations: Shadow Methods context.x. erasing the previous image context.lineTo(x. Can be a string containing a CSS color.h) Paints the specified rectangle using the defined fillStyle context. lineWidth.The image is repeated in one of these specified directions: • repeat: both directions • repeat-x: horizontal only • repeat-y: vertical only • no-repeat: neither The image can be either an img. anticlockwise) Creates an arc described by the circumference of the circle in the arguments. Initially set to butt DZone.3 HTML5: The Evolution of Web Standards Compositing All drawing operations are affected by the global compositing values. Source image elsewhere • lighter Display the sum of source and destination images • source-atop Display source image wherever both images are opaque.lineJoin[=value] The corners that will be placed where two lines meet.y) Adds a point to the current subpath that is connected to the previous point by a line context. which can have zero or more sub-paths. initially set to 0. The resulting CanvasGradient object has the following method available: CanvasGradient Methods gradient. Specified as a CSS color. Compositing Methods context.fill() Fills the subpaths with the current fill style context.y) Returns true if the given point is in the current path To create the appropriate CanvasGradient object use either the createLinearGradient() or createRadialGradient() from the Context object. Either butt.globalAlpha [ = value] Returns or sets the current alpha value applied to rendering operations.shadowColor[=value] The color of the shadow.beginPath() Resets the current path context.lineWidth[=value] Width of the line.stroke() Creates the strokes of the subpaths with the current stroke style context. lineJoin and miterLimit attributes Colors and Styles Style Methods context.w.0 context.shadowOffsetX[=value] context.globalCompositeOperation [=value] Returns or sets the current composition operation from the list below: • copy Display source image instead of destination image • destination-atop Display destination image wherever both are opaque.arcTo(x1. startAngle. context. Display destination image where destination is opaque but source is transparent • source-in Display source image wherever both source image and destination image are opaque • source-out Display source image wherever source image is opaque and destination image is transparent • source-over (default) Display source image wherever source image is opaque. representing the given rectangle context. and starts a new subpath context.createPattern(image.y) Adds a point to the current path that is connected to the previous one by a quadratic Bezier curve context. endAngle.rect(x. in the given direction context.y.x.0.clearRect(x.cpy.0 (fully transparent) to 1. round or square.y) Creates a new subpath with the given point as its first and only point context.x2.y.fillRect(x.
ler than Fortuna commo on nd for they (e. speed.5+ 3. bandwidth.g. However. e chang Vis it ation Having the capability to support one time events.0+ 9.3 million software developers. you are result anybody es cert ed man ed layout n. Temp n com Build ually. The numbers indicate the browser’s version when support for each HTML5 feature began. feature articles. and screenshots. Colla #6 Cloud 4Computing By Daniel Rubio also minimizes the need to make design changes to support CON TEN TS one time events.0+ 8.com are excellent resources to view the compatibility of HTML5 features across a range of browsers. Server-s the ima alt attribute ribes whe output likew ge is describe re the ima mechan from CLOUD COMPUTING PLATFORMS AND ide languag t-side ise unavaila ge ﬁle ism. while PositionErrorCallback accepts a PositionError. with an softw riente loping ine task-o e Deve Mainl es you emphasis oncodelines providers.e. ory. If you don’t know about the new features available in HTML5.5+ 3. (e. The Coordinates object has attributes (as double) for latitude. The late a lack of stan up with clev y competi n text should ng stan st web in dar er wor not be dar kar standar cr HTM L BAS OSMF Clojure HTML 5 Test Driven Development DZone.. HTML5: Up & Running carefully guides you though the important changes in this version with lots of hands-on examples. Feature contenteditable canvas IE 6. HTM essentia came is proc lly plai supp L ﬁles assigned essor an operating system in the same wayain on all hosting as elements ort.0399 919.2+ 4. developing killer desktop software using Java and Eclipse all the way.0300 $7. Google and es Microsoft. d. nt nmen ctic in a par hes som geme t enviro e a single based on incurred cost whether such resources were consumedto thenot.678.com ISBN-13: 978-1-936502-03-5 ISBN-10: 1-936502-03-8 50795 DZone communities deliver over 6 million pages each month to more than 3.nt team Perfo opme ed resu d Builds sitory Build gration to devel Repo Stage adverse unintend bandwidth. You’ll learn how to use HTML5 markup to add video. and altitudeAccuracy The time at which the Position was acquired timestamp The PositionCallback and PositionErrorCallback interfaces have one handleEvent method each. and more—and you’ll be able to put that functionality to work right away. ality has allocated exclusively to expecte irably.n elem CPU) to be mov memory. Compatability http://caniuse.2+ 4.g. including news. tutorials. now’s the time to find out. mechanical. heading. “DZone is a developer’s dream. layed cannot be (and freq need ned lang r visual eng nologies if but as for overlap uen it has ine. Suite 100 Cary. in any form or by means electronic. INC ■ Getting Started with Browse our collection of over 100 Free Cheat Sheets Upcoming Refcardz Core HTML By An dy Ha rris ■ ■ Vis it ION EGRAT www.6 HTML5: The Evolution of Web Standards Attribute enableHighAccuracy Description A hint that the application would like the best possible results. cloud Useful Open computing platforms also facilitate the gradual growth curves Page Source Stru Tools faced by web applications.0+ maximumAge The Position object has two attributes: Attribute coords offline storage audio video Canvas Text API Drag and Drop Geolocation Description The geographic coordinates along with their associated accuracy. blogs.com and http://html5rocks.com CONTENTS INCLUDE: ■ ■ ■ About Cloud Computing Usage Scenarios Underlying Concepts Cost by. s cloud e Work knowledgeable in a mainline Privat that utilize lop on Deve code lines a system sitory of work active Repo are within units This Refcard will introduce to you to clouddcomputing. DZone offers something for everyone.0+ 5. architects and decision makers.0+ 5.5+ Safari 3. and loves every minute of it. brough Platform Management and more.0+ 5.0+ 5. cheat sheets. etc.5+ 3.0+ 3.) All are ML shar limit than rs add elopers As a user of Amazon’s EC2 cloud computing platform. ed to CSS page Brow individual operating system s While y HTM has expand because .0+ 5.2+ 3.g. making them rn les to ize merg Patte it all ﬁ to minim space Comm many aspects related tomultiple computing. so <a>< tly are) nest become virtualization HTML a> is s has ﬁne.5+ 3..678. a solu .g. ive data pt. They Privat contin lts whe appear effects. No part of this publication may be reproduced. Manage s and mor Build Practice Build ■ ■ ■ ■ expand s on Cloud Computing to isolat space n e Work riptio itory a Desc These companies have Privat deployed webmanage applications are in long trol repos to n-con lop softw ing and Deve a versio that adapt and scale to large user bases. By day.0 6. Structur Elem al Elem ents efer ion the not ICS In addition. use target enviro ated s (i. Earl to be.0+ 3. but t.0+ 4. Inc..0 Copyright © 2010 DZone. This book provides practical information about how and why the latest version of this markup language will significantly change the way you develop for the Web. including markup. graphics.0 9. While working on desktop technologies such as Eclipse RCP and Swing. All rights reserved.6+ Chrome 5.0+ 3. source code and more. ABOUT THE AUTHOR RECOMMENDED BOOK James Sugrue has been editor at both Javalobby and Eclipse Zone for over two years. com ref car Web applications have always been deployed on servers connected to what is now deemed the ‘cloud’. the e HTM e apparen dards HTM r. b></ ed insid bec heavily based on very little more Amazon’s cloud computing ose the curr you cho platform isome a></ imp e b> is mor ent stan to writ not lega each othe that will industry standard software and virtualization technology. and it the pro ject’s vers are from with uniqu ABOU softw (CI) is um the build evel Comm build a pro minim Label Task-L ies to gration ed to activit blem the bare ion ate all cies to t ous Inte committ USAGE SCENARIOS to a pro Autom conﬁgurat nden ymen Build depe al tion deplo t Continu ry change ive manu Label d tool nmen the same stalle . but can to late alloted resources.dzone.0+ 5. PositionCallback accepts a Position. load balancers and clusters) are all but abstracted away by relying on a cloud computing platform’s technology. His current obsession is developing for the iPhone and iPad. web service APIs.1+ 10.. accuracy. #82 Get More Refcardz! Visit refcardz. rnate can be emergin es and use UNDERLYING CONCEPTS and XHT PHP text that e tags found. with an Centr Binar most phone services: ts etim . . support as the grap foundation The src of all hical and Java ten attribute and the also recein JavaScri user interfac web develop desc as the e in clien ment. Continu Refcard feedb on (starting from zero) by Perfomajor cloud computing platforms. without prior written permission of the publisher. ce pre-in blem with ymen Redu Autom ns (i.5+ 10. altitude. WAR es lained ) and anti the par solution duce al Depe ge t Web application deployment untillibrari yearsenvironmen similar “ﬁ x” packa Minim be exp nden a few target ago was text ns are d to to pro all rity all depe CI can ticular con alizeplans with ﬁle that y Integ es use Anti-patter they tend es. or proces in the end bad pra enting Creat cy Mana nt targe es rties are rily nden implem approac ed with the cial. several cloud computing platforms support data HTM tier technologies that L and the precedent set by Relational exceed XHT HTML Database Systems (RDBMS): Map Reduce. 140 Preston Executive Dr. memory. this the builds Build gra Send of soon such ration ion with ors as Integ entat ous Inte tional use and test concepts docum oper Continu conven “build include the rate devel to to the s Gene While of CI Re fca rdz ! on: grati s s Inte -Patternvall nuou d Anti Paul M.95 Refcardz Feedback Welcome refcardz@dzone.. stored in a retrieval system.. longitude. offline capabilities. that tely some used Every job time. ortant. the demands and technology used on such servers has changed substantially in recent years. Inc.com Re fca rd z! Pay only what you consume Ge t Mo re e. te. This allows resources function job adm been arou ing.0+ 9. The web pag s alte Nested es like was onc use HTML ble. Tags l. Tags standard a very loos g Ajax HTML ML as is disp can tech ely-deﬁ thei ization.0+ Opera 10. James also likes meddling with up-and-coming technologies such as Eclipse e4.5+ 10..0+ Firefox 3. NC 27513 888. rm a The various resources consumed by webperiodically. all ated occur pattern based tion autom as as they the term” cycle..com Sponsorship Opportunities sales@dzone. or otherwise. CPU) areIntegration on from CI server basis tallied a per-unit e ous Inte e Build rm an ack produc Privat .0+ 4. Du By ContiPatterns an ABOUT CLOUD COMPUTING dz. chang prope Depe into differe itting er necessa pared to eﬁ te builds e comm late Veriﬁ associat to be ben befor are not Cloud computing asRun remo it’s known etoday has changed this. cture Key ■ ■ ■ HTML Automated growth & scalable technologies vs XHT ■ ■ HTML Basics LUD E: Valid ML ents and Large scale growth scenarios involving specialized equipment more. ML physical r othe you prov to L Virtualization allows aare actu piece of hardware idebe understand of HTML much a solid of the ing has ally simp r web cod foundati utilized by multiple operating systems. which may lead to slower response times or higher power consumption Maximum length of time in milliseconds that is allowed to pass from the call to getCurrentPosition or watchPosition until the successCallback is invoked The maximum age of a cached position that the application will accept BROWSER SUPPORT FOR HTML5 FEATURES timeout The table below illustrates when each major browser gained support for key HTML5 features. or transmitted. is used ML are the prog etc. Some platforms rams writ large scale RDBMS deployments. ® Data Tier Technologies t to you ply.0+ 5.1+ 10. applications (e. especially with the entrance of service providers like Amazon.0+ 9.e. James is a software architect at Pilz Ireland. ser (HTM common it has ed far L or XHT done web dev manufacture L had very more its extensio .” says PC Magazine. but.0+ 5. photocopying. temp s.1+ 10.0+ 9. 9 781936 502035 Version 1. HTML ent instances. b></ Amazon EC2: ther stanstandard software and uage with whe Industry dard . so by Commit better understand these softwar chang Level can S INT e code ding Task what it is a cloud computingaplatform can offer your web INUOU trol ut line Policy nize sourc es as of buil Orga Code e witho it chang cess CONT ion con e name sourc subm T applications. d deploEAR) in each lar pro that pattern ticu tagge via or cies -patter s reposit t nden For each (e. Com bora ■ ■ ■ Aldon Chan ge. Reg L or XHT simplify will help L VS <a>< and XHT ardless XHTM b></ all you ML. ineffect ) Build eve t.com Ge t Mo re ref c E: INC LUD gration NTS ous Inte Change CO NTE Continu at Every ns About Software i-patter Build and Ant Patterns Control ment Version e. having convinced himself that it’s a turning point for the software industry.5+ 3.5+ 10.
This action might not be possible to undo. Are you sure you want to continue?
We've moved you to where you read on your other device.
Get the full title to continue reading from where you left off, or restart the preview.