Everything you need to know about HTML5 in 15 min
5 likes5,346 views
The document outlines key aspects and the evolution of HTML5, emphasizing that it is not a single entity but a set of features beneficial for web development. It introduces new elements like <video> and <canvas>, details storage capabilities with HTML5 storage, and explains web workers for background processing. Additionally, it highlights the introduction of new input types and the modular nature of CSS3, providing a concise overview of HTML5's significance and functionality in modern web applications.
Everything you need to know about HTML5 in 15 min
- 1. Everything you need to know about HTML5 in 10 min @edgarparada
- 2. 5 Things you should know about HTML5 1. It’s not one big thing 2. You don’t need to throw anything away 3. It’s easy to get started 4. It already works 5. It’s here to stay
- 3. Timeline of HTML from 1997 to 2004 First draft of W3C published XHTML XHTML Extended HTML 4.0 Modularization forms 1997 1999 2001 1998 2000 2003 W3C XHTML 1.0 HTML Working reformulated published as a Group published HTML into XML W3C the first version of (XHTML 1.0) recomendation XForms 1.0
- 4. Timeline of HTML from 2004 and beyond... Workshop on W3C adopts HTML5 specs to Web Apps and WHATWG’s reach candidate Compound Docs work (HTML5) status (projected) 2004 2007 2012 2005 2009 2022 Web Applications Last call issued for HTML5 to reach 1.0 Working Draft the HTML5 recommendation published Working Draft status (projected) Public Interest in HTML5 increases
- 5. We are on 2012, so is HTML5 ready yet?
- 6. WHAT Working Group? The Web Hypertext Applications Technology Working Group is a loose, unofficial, and open collaboration of Web browser manufacturers and interested parties.
- 7. Video HTML5 defines a new element called <video> for embedding video in your web pages. Embedding video used to be impossible without third-party plugins such as Apple QuickTime or Adobe Flash. The <video> element is designed to be usable without any detection scripts. You can specify multiple video files, and browsers that support HTML5 video will choose one based on what video formats they support.
- 8. Flash & HTML5 Fallback FLV fallback is used to provide a regular FLV video for those Flash clients that do not support support HTML5 video. MP4 support was added to Flash in version 9.115 and lower versions can only play FLV files. You should note that the FLV format is not a bad format. It provides a small file size with relatively good quality. the FLV format can be optimized with a technology called "on2"
- 9. Local Storage HTML5 storage provides a way for web sites to store information on your computer and retrieve it later. The concept is similar to cookies, but it’s designed for larger quantities of information. Cookies are limited in size, and your browser sends them back to the web server every time it requests a new page (which takes extra time and precious bandwidth). HTML5 storage stays on your computer, and web sites can access it with JavaScript after the page is loaded.
- 10. Web Workers Web Workers provide a standard way for browsers to run JavaScript in the background. With web workers, you can spawn multiple “threads” that all run at the same time, more or less. (Think of how your computer can run multiple applications at the same time, and you’re most of the way there.) These “background threads” can do complex mathematical calculations, make network requests, or access local storage while the main web page responds to the user scrolling, clicking, or typing.
- 11. Geolocation Geolocation is the art of figuring out where you are in the world and (optionally) sharing that information with people you trust. There is more than one way to figure out where you are — your IP address, your wireless network connection, which cell tower your phone is talking to, or dedicated GPS hardware that calculates latitude and longitude from information sent by satellites in the sky.
- 12. Modernizr, an HTML5 detection library Modernizr is an open source, MIT-licensed JavaScript library that detects support for many HTML5 & CSS3 features. At the time of writing, the latest version is 1.5.You should always use the latest version. To use it, include the following <script> element at the top of your page. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Dive Into HTML5</title> <script src="modernizr.min.js"></script> </head> <body> ... </body> </html>
- 13. Input Types You know all about web forms, right? Make a <form>, add a few <input type="text"> elements and maybe an <input type="password">, and finish it off with an <input type="submit"> button. You don’t know the half of it. HTML5 defines over a dozen new input types that you can use in your forms. search, number, range, color, tel, url, email, date, month, week, time datetime, datetime-local
- 15. Canvas HTML5 defines the <canvas> element as “a resolution-dependent bitmap canvas that can be used for rendering graphs, game graphics, or other visual images on the fly.” A canvas is a rectangle in your page where you can use JavaScript to draw anything you want. HTML5 defines a set of functions (“the canvas API”) for drawing shapes, defining paths, creating gradients, and applying transformations.
- 16. Canvas what’s good for? Analysis, planning & prototypes Product strategy, user-centered workflow design, concept demos and UI prototypes Brand, visual & infographics Brand and identity, visual and icon system design, data visualization and infographicst: Website and application UI design Website and application information architecture, system modeling, and detailed user interface design
- 17. CSS3 Today CSS3 is actually a series of modules that are designed to be implemented separately and independently from each other. This segmented approach has enabled portions of the spec to move faster (or slower) than others, and has encouraged browser vendors to implement the pieces that are further along before the entirety of CSS3 is considered finished. The benefit here for us web designers is that along with experimentation and faster release cycle comes the ability to use many CSS3 properties before waiting until they become Candidate Recommendations.
- 18. Extra tips...
- 19. Everything you need to know about HTML5 in 15 min @edgarparada