Quality Development with HTML5
Upcoming SlideShare
Loading in...5
×
 

Quality Development with HTML5

on

  • 15,364 views

Work on HTML5 began in 2004 to improve the existing markup language which has been in place for the past decade. In this decade the web has grown and evolved quite a bit, leaving web designers and ...

Work on HTML5 began in 2004 to improve the existing markup language which has been in place for the past decade. In this decade the web has grown and evolved quite a bit, leaving web designers and developers much to ask for. HTML5 responds to those request and helps pave the way for a new frontier in front-end development. HTML5 introduces new elements, a more semantic structure, improved form functionality, better media control and more for the growing web.

Statistics

Views

Total Views
15,364
Views on SlideShare
2,058
Embed Views
13,306

Actions

Likes
6
Downloads
199
Comments
0

14 Embeds 13,306

http://www.shayhowe.com 13120
http://www.learn.shayhowe.com 97
http://coderwall.com 45
http://localhost 17
http://translate.googleusercontent.com 14
http://127.0.0.1 4
http://feedwrangler.net 2
http://www.google.com 1
http://digg.com 1
http://172.17.8.9 1
http://www.m.shayhowe.com 1
http://webcache.googleusercontent.com 1
http://t.co 1
http://www.shayhowe.com&_=1408687886941 HTTP 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Quality Development with HTML5 Quality Development with HTML5 Presentation Transcript

  • QUALITY DEVELOPMENTWITH HTML5Shay HoweSeptember 2011www.shayhowe.com – @letscounthedays
  • SHAY HOWE www.shayhowe.com – @letscounthedaysQuality Development with HTML5 & CSS3 @letscounthedays
  • HTML5 CSS3 Markup language to give Presentation language to content structure and give content style and meaning. appearance.Quality Development with HTML5 & CSS3 @letscounthedays
  • Quality Development with HTML5 & CSS3 @letscounthedays
  • HTML5Quality Development with HTML5 & CSS3 @letscounthedays
  • HTML5 IS SIMPLEQuality Development with HTML5 & CSS3 @letscounthedays
  • DOCTYPEHTML<!DOCTYPE  html  PUBLIC  "-­‐//W3C//DTD  HTML  4.01   Transitional//EN"  "http://www.w3.org/TR/ html4/loose.dtd">HTML5<!DOCTYPE  html>Quality Development with HTML5 & CSS3 @letscounthedays
  • LANGUAGEHTML<html  xmlns="http://www.w3.org/1999/xhtml"   lang="en"  xml:lang="en">HTML5<html  lang="en">Quality Development with HTML5 & CSS3 @letscounthedays
  • CHARACTER ENCODINGHTML<meta  http-­‐equiv="Content-­‐Type"  content="text/ html;  charset=UTF-­‐8">HTML5<meta  charset="UTF-­‐8">Quality Development with HTML5 & CSS3 @letscounthedays
  • CSSHTML<link  rel="stylesheet"  type="text/css"   href="file.css">HTML5<link  rel="stylesheet"  href="file.css">Quality Development with HTML5 & CSS3 @letscounthedays
  • JAVASCRIPTHTML<script  type="text/javascript"  src="file.js"></ script>HTML5<script  src="file.js"></script>Quality Development with HTML5 & CSS3 @letscounthedays
  • GETTING STARTEDQuality Development with HTML5 & CSS3 @letscounthedays
  • GETTING STARTEDHTML5 Shiv<!-­‐-­‐[if  IE]> <script  src="http://html5shiv.googlecode.com/ svn/trunk/html5.js"></script><![endif]-­‐-­‐>CSSarticle,  aside,  footer,  header,  hgroup,  nav,  section  { display:  block;}Quality Development with HTML5 & CSS3 @letscounthedays
  • HTML5 IS SEMANTICQuality Development with HTML5 & CSS3 @letscounthedays
  • NEW ELEMENTS• article • footer • rt• aside • header • ruby• audio • hgroup • section• canvas • keygen • source• command • mark • summary• datalist • meter • time• details • nav • video• embed • output • wbr• figcaption • progress• figure • rpQuality Development with HTML5 & CSS3 @letscounthedays
  • STRUCTURAL ELEMENTS• header• nav• article• section• aside• footerQuality Development with HTML5 & CSS3 @letscounthedays
  • STRUCTURAL ELEMENTS<body> <header>...</header> <nav>...</nav> <article> <section>...</section> </article> <aside...</aside> <footer>...</footer></body>Quality Development with HTML5 & CSS3 @letscounthedays
  • STRUCTURAL ELEMENTSQuality Development with HTML5 & CSS3 @letscounthedays
  • HGROUP<header> <hgroup> <h1>Shay  Howe</h1> <h2>Man,  Myth  or  Legend</h2> </hgroup></header>Quality Development with HTML5 & CSS3 @letscounthedays
  • HGROUPQuality Development with HTML5 & CSS3 @letscounthedays
  • TIME<time  datetime="15:00">3pm</time><time  datetime="2011-­‐08-­‐24">August  24th,  2011</ time><time  datetime="2011-­‐08-­‐24T15:00">August  24th,    2011  at  3pm</time><time  datetime="2011-­‐08-­‐24"  pubdate>August    24th,  2011</time><time>2011-­‐08-­‐24</time>Quality Development with HTML5 & CSS3 @letscounthedays
  • TIMEQuality Development with HTML5 & CSS3 @letscounthedays
  • FIGURE & FIGCAPTION<figure> <img  src="shay.jpg"  alt="Shay  Howe"> <figcaption>Shay  Howe  the  Man</figcaption></figure><figure> <img  src="june.jpg"  alt="June"> <img  src="july.jpg"  alt="July"> <img  src="august.jpg"  alt="August"> <figcaption>Summer  Months</figcaption></figure>Quality Development with HTML5 & CSS3 @letscounthedays
  • FIGURE & FIGCAPTIONQuality Development with HTML5 & CSS3 @letscounthedays
  • MARK<h1>Search  results  for  chicago</h1><ol> <li><a  href="http://www.shayhowe.com/"> Shay  is  from  <mark>Chicago</mark>. </a></li></ol>Quality Development with HTML5 & CSS3 @letscounthedays
  • METER<meter>7  out  of  10  stars</meter><meter  max="10">7  stars</meter><meter  min="0"  max="105"  low="5"  high="65"        optimum="45"  value="47">The  car  is  moving  at      a  decent  average  mile  per  hour.</meter>Quality Development with HTML5 & CSS3 @letscounthedays
  • PROGRESSYou  are  <progress>50%</progress>  complete.<progress  min="0"  max="100"  value="50">Hold      tight,  your  getting  there.</progress>Quality Development with HTML5 & CSS3 @letscounthedays
  • AUDIOQuality Development with HTML5 & CSS3 @letscounthedays
  • AUDIO<audio  src="song.mp3"></audio><audio  src="song.mp3"  autoplay  controls  loop      preload="auto"></audio>Quality Development with HTML5 & CSS3 @letscounthedays
  • AUDIO CONTROLS<audio  id="player"  src="song.mp3"></audio><div> <button  onclick="document.getElementById(player).play()"> Play </button> <button  onclick="document.getElementById(player).pause()"> Pause </button> <button  onclick="document.getElementById(player).volume  +=  0.1"> Volume  Up </button> <button  onclick="document.getElementById(player).volume  -­‐=  0.1"> Volume  Down </button></div>Quality Development with HTML5 & CSS3 @letscounthedays
  • AUDIO FALLBACKS<audio  controls> <source  src="song.ogg"  type="audio/ogg"> <source  src="song.mp3"  type="audio/mpeg"> <object  type="application/x-­‐shockwave-­‐flash"   data="player.swf?soundFile=song.mp3"> <param  name="movie" value="player.swf?soundFile=wild-­‐ thing.mp3"> <a  href="song.mp3">Download  song</a> </object></audio>Quality Development with HTML5 & CSS3 @letscounthedays
  • VIDEOQuality Development with HTML5 & CSS3 @letscounthedays
  • VIDEO<video  src="movie.mp4"  controls  height="390"   width="640"></video><video  src="movie.mp4"  controls  height="390"      width="640"  poster="image.jpg"></video>Quality Development with HTML5 & CSS3 @letscounthedays
  • FORMSQuality Development with HTML5 & CSS3 @letscounthedays
  • NEW INPUTS• color • range• date • search• datetime • tel• datetime-­‐local • time• email • url• month • week• numberQuality Development with HTML5 & CSS3 @letscounthedays
  • COLOR<input  id="color"  name="color"  type="color">Quality Development with HTML5 & CSS3 @letscounthedays
  • DATE & TIME• date:  2011-­‐08-­‐24• datetime:  2011-­‐08-­‐24T12:00:00+01  • datetime-­‐local:  2011-­‐08-­‐24T12:00:00• month:  2011-­‐08• time:  12:00:00• week:  2011-­‐W34<input  id="birthday"   name="birthday"   type="datetime-­‐local">Quality Development with HTML5 & CSS3 @letscounthedays
  • DATE & TIMEQuality Development with HTML5 & CSS3 @letscounthedays
  • EMAIL<input  id="email"  name="email"  type="email">Quality Development with HTML5 & CSS3 @letscounthedays
  • EMAILQuality Development with HTML5 & CSS3 @letscounthedays
  • NUMBER<input  id="cost"  name="cost"  type="number"   min="10"  max="100">Quality Development with HTML5 & CSS3 @letscounthedays
  • RANGE<input  id="rating"  name="rating"  type="range"   min="1"  max="10">Quality Development with HTML5 & CSS3 @letscounthedays
  • SEARCH<input  id="query"  name="query"  type="search">Quality Development with HTML5 & CSS3 @letscounthedays
  • TEL<input  id="phone"  name="phone"  type="tel">Quality Development with HTML5 & CSS3 @letscounthedays
  • TELQuality Development with HTML5 & CSS3 @letscounthedays
  • URL<input  id="website"  name="website"  type="url">Quality Development with HTML5 & CSS3 @letscounthedays
  • URLQuality Development with HTML5 & CSS3 @letscounthedays
  • NEW ATTRIBUTES• autocomplete • min• autofocus • multiple• formaction • novalidate• formenctype • pattern• formmethod • placeholder• formnovalidate • readonly• formtarget • required• list • spellcheck• max • stepQuality Development with HTML5 & CSS3 @letscounthedays
  • AUTOCOMPLETE<form  action="#"  autocomplete="off"><input  id="destination"  name="destination"      type="text"  autocomplete="off">Quality Development with HTML5 & CSS3 @letscounthedays
  • AUTOFOCUS<input  id="name"  name="name"  type="text"      autofocus>Quality Development with HTML5 & CSS3 @letscounthedays
  • DATALIST<input  id="city"  name="city"  type="city"      list="cities"><datalist  id="cities"> <option  value="Chicago"> <option  value="Los  Angeles"> <option  value="New  York"></datalist>Quality Development with HTML5 & CSS3 @letscounthedays
  • MIN, MAX & STEP<input  id="score"  name="score"  type="number"   min="0"  max="10"  step="2">Quality Development with HTML5 & CSS3 @letscounthedays
  • PLACEHOLDER<input  id="destination"  name="destination"   type="text"  placeholder="Your  destination">Quality Development with HTML5 & CSS3 @letscounthedays
  • PLACEHOLDERQuality Development with HTML5 & CSS3 @letscounthedays
  • REQUIRED<input  id="name"  name="name"  type="text"      required>Quality Development with HTML5 & CSS3 @letscounthedays
  • REQUIREDQuality Development with HTML5 & CSS3 @letscounthedays
  • PATTERN<input  id="phone"  name="phone"  type="tel"   pattern="^[0-­‐9]+[-­‐  ]*[0-­‐9]+$">Quality Development with HTML5 & CSS3 @letscounthedays
  • PATTERNQuality Development with HTML5 & CSS3 @letscounthedays
  • CHANGED ELEMENTSQuality Development with HTML5 & CSS3 @letscounthedays
  • AOLD<p><a  href="http://www.shayhowe.com/">Shay      Howe</a>  is  a  front-­‐end  web  designer  and      developer.</p>NEW<a  href="http://www.shayhowe.com/"> <h1>Shay  Howe</h1> <p>Front-­‐end  web  designer  and  developer.</p></a>Quality Development with HTML5 & CSS3 @letscounthedays
  • BOLDText rendered as bold.NEWText stylistically offset without importance.Quality Development with HTML5 & CSS3 @letscounthedays
  • CITEOLDReference to another source.NEWSpecifically a reference to a title of work.Quality Development with HTML5 & CSS3 @letscounthedays
  • HROLDRender a horizontal rule.NEWA paragraph-level thematic break.Quality Development with HTML5 & CSS3 @letscounthedays
  • IOLDText rendered as italic.NEWText in an alternative voice or tone.Quality Development with HTML5 & CSS3 @letscounthedays
  • MENUOLDA single column menu list.NEWA group of controls, most commonly used within webapplications.Quality Development with HTML5 & CSS3 @letscounthedays
  • SOLDText rendered with a line through it.NEWText struck from the content that is no longer accurate orrelevant.Quality Development with HTML5 & CSS3 @letscounthedays
  • SMALLOLDText rendered as small.NEWText within side comments or small print.Quality Development with HTML5 & CSS3 @letscounthedays
  • OBSOLETE ELEMENTS & ATTRIBUTESQuality Development with HTML5 & CSS3 @letscounthedays
  • OBSOLETE ELEMENTS• acronym • frame• applet • frameset• basefont • isindex• big • noframes• center • strike• dir • tt• font •uDeprecated from HTML 4.0Quality Development with HTML5 & CSS3 @letscounthedays
  • OBSOLETE ATTRIBUTES• align • frame • profile• alink • frameborder • scrolling• background • hspace • shape• bgcolor • link • size• border • name • target• cellpadding • nohref • text• cellspacing • noshade • type• coords • nowrap • valignQuality Development with HTML5 & CSS3 @letscounthedays
  • HOMEWORKMicroformatshAtom, hCalendar, hCard, hReviewWAI-ARIA Rolesbanner, complementary, contentinfo, main, navigation,searchQuality Development with HTML5 & CSS3 @letscounthedays
  • QUESTIONS? Thank you!Quality Development with HTML5 & CSS3 @letscounthedays