J D Gauchat - Html5 for Masterminds: How to Take Advantage of Html5 to Create Amazing Websites and Revolutionary Applications

forMasterminds

(1st Edition)

J.D Gauchat

Copyright 2011 Juan Diego Gauchat

All Rights Reserved

Edited by: Laura Edlund

www.lauraedlund.ca

No part of this work may be reproducedor transmitted in any form or by any means, electronic ormechanical, including photocopying, recording, or by anyinformation storage or retrieval system, without the prior writtenpermission of the copyright owner.

Companies, services, or products namesused in this ebook are for identification purposes only. Alltrademarks and registered trademarks are the property of theirrespective owners.

The information in this ebook isdistributed on an as is basis, without warranty. Although everyprecaution has been taken in the preparation of this work, neitherthe author nor Mink Books shall have any liability to any person orentity with respect to any loss or damage caused or alleged to becaused directly or indirectly by the information contained in thiswork.

The source code for this ebook isavailable at www.minkbooks.com

Registration Number: 1086517

Smashwords Edition 2011

,,

, , ,

Organization,

, , , , , , ,

,, ,

,

Block Elements, BoxModels

Inline Styles,Embedded Styles, External Files, References, Referencing byKeyword, Referencing by the Id Attribute, Referencing by the ClassAttribute, Referencing by Any Attribute, Referencing byPseudo-Classes, New Selectors, Applying CSS to OurTemplate

Template, UniversalSelector *, New Heading Hierarchy, Declaring New HTML5 Elements,Centering the Body, Creating the Main Box, The Header, NavigationalBar, Section and Aside, Footer, Last Touches, Box-Sizing

Display, Box-Orient,Box-Direction, Box-Ordinal-Group, Box-Pack, Box-Flex,Box-Align

Flexible Box Model,Pseudo-Classes and Selectors

CSS3 Goes Crazy,Template, Border-Radius, Box-Shadow, Text-Shadow, @font-face,Linear Gradient, Radial Gradient, RGBA, HSLA, Outline,Border-Image, Transform and Transition, Transform: Scale,Transform: Rotate, Transform: Skew, Transform: Translate,Transforming All at Once, Dynamic Transformations,Transitions

Inline, Embedded,External File

querySelector(),querySelectorAll()

Inline EventHandlers, Event Handlers as Properties, The addEventListener()Method

Canvas API, Drag andDrop API, Geolocation API, Storage APIs, File APIs, CommunicationAPIs, Web Workers API, History API, Offline API

jQuery, GoogleMaps

Elements, Selectors,Events, APIs

The Element, Attributes

The Design, The Code,The Events, The Methods, The Properties,

The Element

Elements, Attributes,Video Attributes, Events, Methods,Properties

The

Element, The Element, Email Type, Search Type, URLType, Tel Type, Number Type, Range Type, Date Type, Week Type,Month Type, Time Type, Datetime Type, Datetime-local Type, ColorType

placeholderAttribute, required Attribute, multiple Attribute, autofocusAttribute, pattern Attribute, form Attribute

The

Introduction

HTML5 is not a new version of an oldmarkup languagenot even an improvement on this already ancienttechnologybut instead a new concept for the construction ofwebsites and applications in the era of mobile devices, cloudcomputing and networking.

It all started a long time ago with asimple version of HTML proposed to create the basic structure ofweb pages, organize their content and share information. Thelanguage and the web itself were born primarily with the intentionof communicating information through text.

The narrow scope of HTML motivatedcompanies to develop new languages and software to addcharacteristics to the web that had never been seen before. Theseinitial developments grew into powerful and popular plugins. Simplegames and animated jokes soon turned into sophisticatedapplications, providing new experiences that changed the concept ofthe web forever.

Of the options proposed, Java and Flashwere the most successful; they were massively adopted and widelyconsidered to be the future of the Internet. However, as soon asthe number of users increased and the Internet changed from a wayto interconnect computer lovers to a primary field for business andsocial interaction, limitations present in both technologies provedto be a death sentence.

The main inconvenience of Java and Flashmay be described as a lack of integration. Both were conceived fromthe beginning as plugins, something that is inserted into astructure but basically shares with that structure only some spaceon the screen. There was no communication and integration betweenapplications and documents.

The lack ofintegration turned out to be critical and paved the way for theevolution of a language that shares space in the document with HTMLand that is not affected by plugin limitations. Javascript, aninterpreted language embedded in browsers, clearly was the way toimprove the users experience and provide functionality for theweb. However, after a few years of failed attempts to promote it andmisuses, the market never fully adopted the language and itspopularity declined. The detractors had good reasons to oppose itsadoption. At that moment, Javascript couldnt replace thefunctionality of Flash and Java. And even when it was evident thatJava and Flash were limiting the scope of web applications andisolating the webs content, popular features such as videostreaming were becoming a big part of the web and were onlyeffectively offered through those technologies.

Despite this success, Java wasdeclining. The languages complex nature, slow evolution and thelack of integration diminished its importance to the point thattoday Java is hardly used any more in mainstream web applications.Without Java, the market turned its attention to Flash. However,the fact that Flash shares the same basic characteristics with itscompetitor on the web makes it also susceptible to the samefate.

Meanwhile, the software to access theweb continued to evolve. Along with new features and fastertechniques for Internet access, browsers also were improving theirJavascript engines. More power brought more opportunities, and thisscripting language was ready to embrace them.

At some point during this process, itbecame evident to some developers that neither Java nor Flash wouldbe enough to provide the tools they needed to create theapplications demanded by an increasing number of users. Thesedevelopers started to apply Javascript in their applications in away that was never seen before. The innovation and the amazingresults attracted the attention of more programmers. Soon what wascalled the Web 2.0 was born, and the perception of Javascript inthe developers community radically changed.

Javascript was clearly the language thatallowed the developers to innovate and do things that nobody haddone before on the web. Over the last years, programmers and webdesigners all over the world came up with the most incredibletricks to overcome the limitations of this technology and itsinitial deficiencies in portability. Javascript along with HTML andCSS was obviously the most perfect combination for the necessaryevolution of the web.

HTML5 is, actually, the improvement ofthat combination, the glue that puts everything together. HTML5proposes standards for every aspect of the web and also a clearpurpose for each technology involved. From now on, HTML providesthe structural elements, CSS is concentrated on how to turn thatstructure into something visibly attractive and usable andJavascript has all the power necessary to provide functionality andbuild full web applications.

Boundaries between websites andapplications have finally disappeared. The required technologiesare ready. The future of the web is promising, and the evolutionand combination of these three technologies (HTML, CSS andJavascript) into one powerful specification is turning the Internetinto the leading platform for development. HTML5 is clearly leadingthe way.