HTML5-Days™ Tutorial

HTML5 is an umbrella term describing a set of HTML, CSS and JavaScript specifications designed to enable developers to build the next generation of Web sites and applications. What’s notable in that definition is its three parts: HTML, CSS and JavaScript. They define how developers use improved markup, richer style capabilities and new JavaScript APIs to make the most of new Web development features. Simply put, HTML5 = HTML + CSS + JavaScript.

When combined, these technologies form the core of modern user experience on the web. Modern browsers support many HTML5 features for developers and web designers to build a common experience across devices.

HTML5 is huge! Formally defined by an international standards body known as the World Wide Web Consortium (W3C), HTML5 consists of more than 100 specifications that relate to the next generation of Web technologies.

Technologies include new HTML tags, Canvas, Scalable Vector Graphics (SVG), Audio and Video, Geolocation, Web Storage and many new CSS3 modules.

On 28 October 2014, the specification for the core HTML5 was released as a W3C Recommendation, which means that the specification process is complete. In this version, new features are introduced to help Web application authors, new elements are introduced based on research into prevailing authoring practices, and special attention has been given to defining clear conformance criteria for user agents in an effort to improve interoperability.

Other parts of the specification are at other stages. But what matters is to developers… does it work?

To get a good idea of what features are available for which browsers and devices, see CanIUse.com.

Getting Started

This blog provides a set of tutorials and sample code to help get you started writing HTML5, CSS3, JavaScript. The postings provide links to other sites and to help you dive deeper. The sample code is available on GitHub for you to try out.

When I was learning, I found snippets to be helpful, but I also wanted the context of how and where the feature fits into a project. That’s the goal of the code that is the DevDays GitHub repository.

• Changes between HTML4 and HTML5. What are the key changes between HTML4 and HTML5?
• Semantic Tags. The new tags (and the old ones) available in HTML5.
• CSS3 Introduction. Quick introduction to the features of Cascading Style Sheets (CSS)
• CSS Positioning. How all those nagging positioning attributes work to place your elements on the page.
• CSS3, JQuery Selectors. How to use selectors with both CSS3 and jQuery.
• Boilerplates. Getting started using a baseline for your Web page.
• <Custom Fonts. How to embed custom fonts in your Webpage.
• CSS3: Which Style Wins. How your browser chooses which style to use.
• Modernizr, Polyfills, and YepNope. Provide backward compatibility to your pages.
• Drawing on Canvas. Using JavaScript to draw onto the Web page.
• HTML5 Form Tags. New tags help you build forms for user input.
• WebSocket on the Client. WebSocket standard simplifies much of the complexity around bi-directional web communication and connection management.
• WebSocket on the Server. What to do on the server to facilitate WebSocket.
• SignalR. Introduction to SignalR, which offers a simple and clean API to write real time web applications where the server needs to continuously push data to clients.
• Web Workers. How you can allow running scripts in the background without blocking or freezing the user interface.
• Getting Started with SVG. Introduction to SVG, what it is, how it works.
• SVG Shapes, Path, Text, Viewport, Fonts. Basic introduction to how you can build basic shapes and text in SVG.
• SVG Eventing. How your users can interact with SVG.
• SVG Clipping and Gradients. How to use clipping and gradients in your SVG.
• SVG Filter Effects & Animation. Introduction to using filter effects and animation for SVG.
• Local Storage. Store data on the client.
• AppCache for Offline Apps. Provide a good experience for users even when they are not online.
• Video, Audio Multimedia. Incorporate video and audio using HTML5 standards with fallbacks to Flash.
• Custom Controls. Create your own controls to play video and audio.
• Captioning for Video. How to provide captions for your multimedia.
• Asynchronous Script Execution. Use the async attribute in HTML to run your scripts asynchronously.
• Geolocation. Find the user location (or other locations using longitude and latitude).
• Introduction to Mapping. Learn how to incorporate maps in your page using Bing Maps and Google Maps.
• Drag and Drop. How to drag and drop elements on the client.
• Drag and Drop with Files. How to drag and drop a file onto the web client in HTML and JavaScript.
• Uploading Files Using Drag and Drop. How to upload a file from the HTML client to the server using ASP.NET with links to other servers.
• Messaging. Provides you a way to communication between web applications (and iFrames).

Sample Code

Sample code to help you get started with HTML5 is available in the DevDays GitHub repository. See https://github.com/devdays/html5-tutorials