Move to HTML5 is easy if you know how
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Move to HTML5is easy
if you know how
Jorge del Casar@jorgecasar
Co-founder Frontend Spain@FrontendSpain
Co-founder ShoTools.com@ShoTools
Professional profile:linkedin.com/in/jorgecasar
What is NOT HTML5?
CSS3
JS APIs (GEOlocation, workers, Drag&Drop, Web storage...)
Web Apps
What is NOT HTML5?
All that is out of markup
What is HTML5?
Markup lenguage
Web Forms
Video & Audio
Canvas
SVG
What is HTML5?
The basis forweb applications
HTML5
JS APis
canvasvideo
audio
web forms
SVG
GEOlocation
Drag & Drop
Storage CSSCSS1
CSS2.1
CSS3
Silverlight Flash
Web Apps
Advantages
Semantic elements
Backwards compatibility
Web application oriented
Faster rendering
Progressive Enhancement
Graceful Degradation
Where to start?
XHTML 1.0 Strict
HTML5
!DOCTYPE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html>
XHTML 1.0 Strict
HTML5
Encoding
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta charset="utf-8" />
XHTML 1.0 Strict
HTML5
Links
<link rel="stylesheet" type="text/css" href="style.css"/>
<link rel=stylesheet href=style.css>
XHTML 1.0 Strict
HTML5
Script
<script type="text/javascript" src="jquery.js"></script>
<script src=jquery.js></script>
Polyfills
html5shim
<!-- [if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
Old structure<div id=”header”>
<div id=”nav”>
<div id=”sidebar”>
<div id=”footer”>
<div id=”main”>
<div class=”post”>
<div class=”post”>
New structure<header>
<nav>
<aside>
<footer>
<section>
<article> <article>
sectionnav
section
header nav
asidearticle article article
footer
figure figurevideo
figcaptionfigcaptionheader header header
header
New tags
articleaside
audio
canvasda
talist
command
detailsfigure
figcaption
footer
header
hgro
up
keygen
nav meter
outputvideo
time
source
summary
Related Documents
