SlideShare une entreprise Scribd logo
1  sur  72
Télécharger pour lire hors ligne
QUALITY DEVELOPMENT
WITH HTML5


Shay Howe
September 2011
www.shayhowe.com – @letscounthedays
SHAY HOWE
               www.shayhowe.com – @letscounthedays




Quality 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
HTML5
Quality Development with HTML5 & CSS3   @letscounthedays
HTML5 IS SIMPLE



Quality Development with HTML5 & CSS3   @letscounthedays
DOCTYPE
HTML
<!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
LANGUAGE
HTML
<html	
  xmlns="http://www.w3.org/1999/xhtml"	
  
  lang="en"	
  xml:lang="en">

HTML5
<html	
  lang="en">




Quality Development with HTML5 & CSS3         @letscounthedays
CHARACTER ENCODING
HTML
<meta	
  http-­‐equiv="Content-­‐Type"	
  content="text/
  html;	
  charset=UTF-­‐8">

HTML5
<meta	
  charset="UTF-­‐8">




Quality Development with HTML5 & CSS3            @letscounthedays
CSS
HTML
<link	
  rel="stylesheet"	
  type="text/css"	
  
  href="file.css">

HTML5
<link	
  rel="stylesheet"	
  href="file.css">




Quality Development with HTML5 & CSS3              @letscounthedays
JAVASCRIPT
HTML
<script	
  type="text/javascript"	
  src="file.js"></
  script>

HTML5
<script	
  src="file.js"></script>




Quality Development with HTML5 & CSS3        @letscounthedays
GETTING STARTED



Quality Development with HTML5 & CSS3   @letscounthedays
GETTING STARTED
HTML5 Shiv
<!-­‐-­‐[if	
  IE]>
  <script	
  src="http://html5shiv.googlecode.com/
         svn/trunk/html5.js"></script>
<![endif]-­‐-­‐>

CSS
article,	
  aside,	
  footer,	
  header,	
  hgroup,	
  nav,	
  
section	
  {
  display:	
  block;
}



Quality Development with HTML5 & CSS3                   @letscounthedays
HTML5 IS SEMANTIC



Quality 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                                • rp




Quality Development with HTML5 & CSS3                          @letscounthedays
STRUCTURAL ELEMENTS
• header
• nav
• article
• section
• aside
• footer




Quality 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 ELEMENTS




Quality 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
HGROUP




Quality 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
TIME




Quality 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 & FIGCAPTION




Quality 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
PROGRESS
You	
  are	
  <progress>50%</progress>	
  complete.

<progress	
  min="0"	
  max="100"	
  value="50">Hold	
  
	
  	
  tight,	
  your	
  getting	
  there.</progress>




Quality Development with HTML5 & CSS3              @letscounthedays
AUDIO



Quality 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
VIDEO



Quality 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
FORMS



Quality Development with HTML5 & CSS3           @letscounthedays
NEW INPUTS
• color                                 • range
• date                                  • search
• datetime                              • tel
• datetime-­‐local                      • time
• email                                 • url
• month                                 • week
• number




Quality 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 & TIME




Quality Development with HTML5 & CSS3   @letscounthedays
EMAIL
<input	
  id="email"	
  name="email"	
  type="email">




Quality Development with HTML5 & CSS3           @letscounthedays
EMAIL




Quality 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
TEL




Quality Development with HTML5 & CSS3   @letscounthedays
URL
<input	
  id="website"	
  name="website"	
  type="url">




Quality Development with HTML5 & CSS3           @letscounthedays
URL




Quality Development with HTML5 & CSS3   @letscounthedays
NEW ATTRIBUTES
• autocomplete                          • min
• autofocus                             • multiple
• formaction                            • novalidate
• formenctype                           • pattern
• formmethod                            • placeholder
• formnovalidate                        • readonly
• formtarget                            • required
• list                                  • spellcheck
• max                                   • step




Quality 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
PLACEHOLDER




Quality Development with HTML5 & CSS3   @letscounthedays
REQUIRED
<input	
  id="name"	
  name="name"	
  type="text"	
  
	
  	
  required>




Quality Development with HTML5 & CSS3               @letscounthedays
REQUIRED




Quality Development with HTML5 & CSS3   @letscounthedays
PATTERN
<input	
  id="phone"	
  name="phone"	
  type="tel"	
  
  pattern="^[0-­‐9]+[-­‐	
  ]*[0-­‐9]+$">




Quality Development with HTML5 & CSS3               @letscounthedays
PATTERN




Quality Development with HTML5 & CSS3   @letscounthedays
CHANGED ELEMENTS



Quality Development with HTML5 & CSS3   @letscounthedays
A
OLD
<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
B
OLD
Text rendered as bold.

NEW
Text stylistically offset without importance.




Quality Development with HTML5 & CSS3           @letscounthedays
CITE
OLD
Reference to another source.

NEW
Specifically a reference to a title of work.




Quality Development with HTML5 & CSS3          @letscounthedays
HR
OLD
Render a horizontal rule.

NEW
A paragraph-level thematic break.




Quality Development with HTML5 & CSS3   @letscounthedays
I
OLD
Text rendered as italic.

NEW
Text in an alternative voice or tone.




Quality Development with HTML5 & CSS3   @letscounthedays
MENU
OLD
A single column menu list.

NEW
A group of controls, most commonly used within web
applications.




Quality Development with HTML5 & CSS3         @letscounthedays
S
OLD
Text rendered with a line through it.

NEW
Text struck from the content that is no longer accurate or
relevant.




Quality Development with HTML5 & CSS3             @letscounthedays
SMALL
OLD
Text rendered as small.

NEW
Text within side comments or small print.




Quality Development with HTML5 & CSS3       @letscounthedays
OBSOLETE ELEMENTS
     & ATTRIBUTES


Quality Development with HTML5 & CSS3   @letscounthedays
OBSOLETE ELEMENTS
• acronym                               • frame
• applet                                • frameset
• basefont                              • isindex
• big                                   • noframes
• center                                • strike
• dir                                   • tt
• font                                  •u


Deprecated from HTML 4.0




Quality 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        • valign




Quality Development with HTML5 & CSS3                             @letscounthedays
HOMEWORK
Microformats
hAtom, hCalendar, hCard, hReview

WAI-ARIA Roles
banner, complementary, contentinfo, main, navigation,
search




Quality Development with HTML5 & CSS3          @letscounthedays
QUESTIONS?
                                        Thank you!




Quality Development with HTML5 & CSS3                @letscounthedays

Contenu connexe

En vedette

Quality Development with CSS3
Quality Development with CSS3Quality Development with CSS3
Quality Development with CSS3Shay Howe
 
Mastering CSS3 Selectors
Mastering CSS3 SelectorsMastering CSS3 Selectors
Mastering CSS3 SelectorsRachel Andrew
 
HTML5 Semantics
HTML5 SemanticsHTML5 Semantics
HTML5 SemanticsShay Howe
 
Smacking Git Around Advanced Git Tricks
Smacking Git Around   Advanced Git TricksSmacking Git Around   Advanced Git Tricks
Smacking Git Around Advanced Git Tricksrailsconf
 
CSS: selectors and the box model
CSS: selectors and the box modelCSS: selectors and the box model
CSS: selectors and the box modelIdan Gazit
 
Yes, Designer, You CAN Be a Product Leader
Yes, Designer, You CAN Be a Product LeaderYes, Designer, You CAN Be a Product Leader
Yes, Designer, You CAN Be a Product LeaderShay Howe
 
HTML5 and the web of tomorrow!
HTML5  and the  web of tomorrow!HTML5  and the  web of tomorrow!
HTML5 and the web of tomorrow!Christian Heilmann
 
Writing for the Web: The Right Strategy
Writing for the Web: The Right StrategyWriting for the Web: The Right Strategy
Writing for the Web: The Right StrategyShay Howe
 
An Intro to HTML & CSS
An Intro to HTML & CSSAn Intro to HTML & CSS
An Intro to HTML & CSSShay Howe
 
Git in a nutshell
Git in a nutshellGit in a nutshell
Git in a nutshellNelson Tai
 
Git and GitHub
Git and GitHubGit and GitHub
Git and GitHubJames Gray
 
Advanced Git
Advanced GitAdvanced Git
Advanced Gitsegv
 
Getting Git Right
Getting Git RightGetting Git Right
Getting Git RightSven Peters
 

En vedette (20)

Quality Development with CSS3
Quality Development with CSS3Quality Development with CSS3
Quality Development with CSS3
 
Mastering CSS3 Selectors
Mastering CSS3 SelectorsMastering CSS3 Selectors
Mastering CSS3 Selectors
 
HTML5 Semantics
HTML5 SemanticsHTML5 Semantics
HTML5 Semantics
 
Smacking Git Around Advanced Git Tricks
Smacking Git Around   Advanced Git TricksSmacking Git Around   Advanced Git Tricks
Smacking Git Around Advanced Git Tricks
 
Git in a nutshell
Git in a nutshellGit in a nutshell
Git in a nutshell
 
The git
The gitThe git
The git
 
CSS: selectors and the box model
CSS: selectors and the box modelCSS: selectors and the box model
CSS: selectors and the box model
 
Yes, Designer, You CAN Be a Product Leader
Yes, Designer, You CAN Be a Product LeaderYes, Designer, You CAN Be a Product Leader
Yes, Designer, You CAN Be a Product Leader
 
HTML5 and the web of tomorrow!
HTML5  and the  web of tomorrow!HTML5  and the  web of tomorrow!
HTML5 and the web of tomorrow!
 
Writing for the Web: The Right Strategy
Writing for the Web: The Right StrategyWriting for the Web: The Right Strategy
Writing for the Web: The Right Strategy
 
An Intro to HTML & CSS
An Intro to HTML & CSSAn Intro to HTML & CSS
An Intro to HTML & CSS
 
CSS Selectors
CSS SelectorsCSS Selectors
CSS Selectors
 
Git in a nutshell
Git in a nutshellGit in a nutshell
Git in a nutshell
 
Intro To Git
Intro To GitIntro To Git
Intro To Git
 
Git and GitHub
Git and GitHubGit and GitHub
Git and GitHub
 
Fundamental CSS3
Fundamental CSS3Fundamental CSS3
Fundamental CSS3
 
Advanced Git
Advanced GitAdvanced Git
Advanced Git
 
Git Tutorial 教學
Git Tutorial 教學Git Tutorial 教學
Git Tutorial 教學
 
Getting Git Right
Getting Git RightGetting Git Right
Getting Git Right
 
Intro to CSS3
Intro to CSS3Intro to CSS3
Intro to CSS3
 

Similaire à Quality Development with HTML5

UI Design with HTML5 & CSS3
UI Design with HTML5 & CSS3UI Design with HTML5 & CSS3
UI Design with HTML5 & CSS3Shay Howe
 
HTML5 & Friends
HTML5 & FriendsHTML5 & Friends
HTML5 & FriendsRemy Sharp
 
Training Html5 -CSS3 New things
Training Html5 -CSS3 New thingsTraining Html5 -CSS3 New things
Training Html5 -CSS3 New thingsJimmy Campos
 
Top 10 HTML5 features every developer should know!
Top 10 HTML5 features every developer should know!Top 10 HTML5 features every developer should know!
Top 10 HTML5 features every developer should know!Gill Cleeren
 
Progressively Enhancing WordPress Themes
Progressively Enhancing WordPress ThemesProgressively Enhancing WordPress Themes
Progressively Enhancing WordPress ThemesDigitally
 
Curtin University Frontend Web Development
Curtin University Frontend Web DevelopmentCurtin University Frontend Web Development
Curtin University Frontend Web DevelopmentDaryll Chu
 
Course Tech 2013, Sasha Vodnik, A Crash Course in HTML5
Course Tech 2013, Sasha Vodnik, A Crash Course in HTML5Course Tech 2013, Sasha Vodnik, A Crash Course in HTML5
Course Tech 2013, Sasha Vodnik, A Crash Course in HTML5Cengage Learning
 
WHAT IS HTML5? (at CSS Nite Osaka)
WHAT IS HTML5? (at CSS Nite Osaka)WHAT IS HTML5? (at CSS Nite Osaka)
WHAT IS HTML5? (at CSS Nite Osaka)Shumpei Shiraishi
 
What you need to know bout html5
What you need to know bout html5What you need to know bout html5
What you need to know bout html5Kevin DeRudder
 
HTML5 History & Features
HTML5 History & FeaturesHTML5 History & Features
HTML5 History & FeaturesDave Ross
 
Darwin web standards
Darwin web standardsDarwin web standards
Darwin web standardsJustin Avery
 
Top 10 HTML5 features
Top 10 HTML5 featuresTop 10 HTML5 features
Top 10 HTML5 featuresGill Cleeren
 
Rich and Beautiful: Making Attractive Apps in HTML5 [Wpg 2013]
Rich and Beautiful: Making Attractive Apps in HTML5 [Wpg 2013]Rich and Beautiful: Making Attractive Apps in HTML5 [Wpg 2013]
Rich and Beautiful: Making Attractive Apps in HTML5 [Wpg 2013]David Wesst
 
HTML5: It goes to ELEVEN
HTML5: It goes to ELEVENHTML5: It goes to ELEVEN
HTML5: It goes to ELEVENMathias Bynens
 
Pubcon Las Vegas 2012 CSS and HTML coding
Pubcon Las Vegas 2012 CSS and HTML codingPubcon Las Vegas 2012 CSS and HTML coding
Pubcon Las Vegas 2012 CSS and HTML codingTodd Keup
 
DevFest Makerere html5 presentation by caesar mukama
DevFest Makerere html5 presentation by caesar mukamaDevFest Makerere html5 presentation by caesar mukama
DevFest Makerere html5 presentation by caesar mukamaEmily Karungi
 
HTML5+CSS3 (入門編)
HTML5+CSS3 (入門編)HTML5+CSS3 (入門編)
HTML5+CSS3 (入門編)博史 高木
 

Similaire à Quality Development with HTML5 (20)

UI Design with HTML5 & CSS3
UI Design with HTML5 & CSS3UI Design with HTML5 & CSS3
UI Design with HTML5 & CSS3
 
Html5 public
Html5 publicHtml5 public
Html5 public
 
HTML5 & Friends
HTML5 & FriendsHTML5 & Friends
HTML5 & Friends
 
Training Html5 -CSS3 New things
Training Html5 -CSS3 New thingsTraining Html5 -CSS3 New things
Training Html5 -CSS3 New things
 
Html5
Html5Html5
Html5
 
Top 10 HTML5 features every developer should know!
Top 10 HTML5 features every developer should know!Top 10 HTML5 features every developer should know!
Top 10 HTML5 features every developer should know!
 
Progressively Enhancing WordPress Themes
Progressively Enhancing WordPress ThemesProgressively Enhancing WordPress Themes
Progressively Enhancing WordPress Themes
 
Looking into HTML5 + CSS3
Looking into HTML5 + CSS3Looking into HTML5 + CSS3
Looking into HTML5 + CSS3
 
Curtin University Frontend Web Development
Curtin University Frontend Web DevelopmentCurtin University Frontend Web Development
Curtin University Frontend Web Development
 
Course Tech 2013, Sasha Vodnik, A Crash Course in HTML5
Course Tech 2013, Sasha Vodnik, A Crash Course in HTML5Course Tech 2013, Sasha Vodnik, A Crash Course in HTML5
Course Tech 2013, Sasha Vodnik, A Crash Course in HTML5
 
WHAT IS HTML5? (at CSS Nite Osaka)
WHAT IS HTML5? (at CSS Nite Osaka)WHAT IS HTML5? (at CSS Nite Osaka)
WHAT IS HTML5? (at CSS Nite Osaka)
 
What you need to know bout html5
What you need to know bout html5What you need to know bout html5
What you need to know bout html5
 
HTML5 History & Features
HTML5 History & FeaturesHTML5 History & Features
HTML5 History & Features
 
Darwin web standards
Darwin web standardsDarwin web standards
Darwin web standards
 
Top 10 HTML5 features
Top 10 HTML5 featuresTop 10 HTML5 features
Top 10 HTML5 features
 
Rich and Beautiful: Making Attractive Apps in HTML5 [Wpg 2013]
Rich and Beautiful: Making Attractive Apps in HTML5 [Wpg 2013]Rich and Beautiful: Making Attractive Apps in HTML5 [Wpg 2013]
Rich and Beautiful: Making Attractive Apps in HTML5 [Wpg 2013]
 
HTML5: It goes to ELEVEN
HTML5: It goes to ELEVENHTML5: It goes to ELEVEN
HTML5: It goes to ELEVEN
 
Pubcon Las Vegas 2012 CSS and HTML coding
Pubcon Las Vegas 2012 CSS and HTML codingPubcon Las Vegas 2012 CSS and HTML coding
Pubcon Las Vegas 2012 CSS and HTML coding
 
DevFest Makerere html5 presentation by caesar mukama
DevFest Makerere html5 presentation by caesar mukamaDevFest Makerere html5 presentation by caesar mukama
DevFest Makerere html5 presentation by caesar mukama
 
HTML5+CSS3 (入門編)
HTML5+CSS3 (入門編)HTML5+CSS3 (入門編)
HTML5+CSS3 (入門編)
 

Plus de Shay Howe

Collaboration Practices
Collaboration PracticesCollaboration Practices
Collaboration PracticesShay Howe
 
Modular HTML, CSS, & JS Workshop
Modular HTML, CSS, & JS WorkshopModular HTML, CSS, & JS Workshop
Modular HTML, CSS, & JS WorkshopShay Howe
 
How Constraints Cultivate Growth
How Constraints Cultivate GrowthHow Constraints Cultivate Growth
How Constraints Cultivate GrowthShay Howe
 
Modular HTML & CSS
Modular HTML & CSSModular HTML & CSS
Modular HTML & CSSShay Howe
 
Modular HTML & CSS Workshop
Modular HTML & CSS WorkshopModular HTML & CSS Workshop
Modular HTML & CSS WorkshopShay Howe
 
Modular HTML & CSS Turbo Workshop
Modular HTML & CSS Turbo WorkshopModular HTML & CSS Turbo Workshop
Modular HTML & CSS Turbo WorkshopShay Howe
 

Plus de Shay Howe (6)

Collaboration Practices
Collaboration PracticesCollaboration Practices
Collaboration Practices
 
Modular HTML, CSS, & JS Workshop
Modular HTML, CSS, & JS WorkshopModular HTML, CSS, & JS Workshop
Modular HTML, CSS, & JS Workshop
 
How Constraints Cultivate Growth
How Constraints Cultivate GrowthHow Constraints Cultivate Growth
How Constraints Cultivate Growth
 
Modular HTML & CSS
Modular HTML & CSSModular HTML & CSS
Modular HTML & CSS
 
Modular HTML & CSS Workshop
Modular HTML & CSS WorkshopModular HTML & CSS Workshop
Modular HTML & CSS Workshop
 
Modular HTML & CSS Turbo Workshop
Modular HTML & CSS Turbo WorkshopModular HTML & CSS Turbo Workshop
Modular HTML & CSS Turbo Workshop
 

Dernier

UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1DianaGray10
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Brian Pichman
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDELiveplex
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfinfogdgmi
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding TeamAdam Moalla
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Websitedgelyza
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Commit University
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesMd Hossain Ali
 
UiPath Clipboard AI: "A TIME Magazine Best Invention of 2023 Unveiled"
UiPath Clipboard AI: "A TIME Magazine Best Invention of 2023 Unveiled"UiPath Clipboard AI: "A TIME Magazine Best Invention of 2023 Unveiled"
UiPath Clipboard AI: "A TIME Magazine Best Invention of 2023 Unveiled"DianaGray10
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024D Cloud Solutions
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UbiTrack UK
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsSeth Reyes
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdfPedro Manuel
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8DianaGray10
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfJamie (Taka) Wang
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7DianaGray10
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintMahmoud Rabie
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsSafe Software
 
IEEE Computer Society’s Strategic Activities and Products including SWEBOK Guide
IEEE Computer Society’s Strategic Activities and Products including SWEBOK GuideIEEE Computer Society’s Strategic Activities and Products including SWEBOK Guide
IEEE Computer Society’s Strategic Activities and Products including SWEBOK GuideHironori Washizaki
 

Dernier (20)

UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdf
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Website
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
 
UiPath Clipboard AI: "A TIME Magazine Best Invention of 2023 Unveiled"
UiPath Clipboard AI: "A TIME Magazine Best Invention of 2023 Unveiled"UiPath Clipboard AI: "A TIME Magazine Best Invention of 2023 Unveiled"
UiPath Clipboard AI: "A TIME Magazine Best Invention of 2023 Unveiled"
 
201610817 - edge part1
201610817 - edge part1201610817 - edge part1
201610817 - edge part1
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and Hazards
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdf
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership Blueprint
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
 
IEEE Computer Society’s Strategic Activities and Products including SWEBOK Guide
IEEE Computer Society’s Strategic Activities and Products including SWEBOK GuideIEEE Computer Society’s Strategic Activities and Products including SWEBOK Guide
IEEE Computer Society’s Strategic Activities and Products including SWEBOK Guide
 

Quality Development with HTML5