SlideShare une entreprise Scribd logo
1  sur  228
OREILLYMEDIA             2011



         HTML5
          D E S I G N
                        ❦


Christopher Schmitt | http://twitter.com/@teleject
THINGS ARE GOOD
BETWEEN US, XHTML,
RIGHT?
I MEAN. WE GET ALONG WELL.
AND WE BOTH LIKE STUFF.
               2
               3
“IMAGINE YOU MADE A
    BROWSER THAT ONLY
RENDERED SITES AUTHORED
 IN VALID HTML OR XHTML.
  HOW MUCH OF THE WEB
WOULD YOUR USERS BE ABLE
   TO SEE? 1%? 0.1%? LESS?”
            MARK PILGRIM
http://dev.opera.com/articles/view/mama-markup-validation-report/
                                  3
4
“THE ATTEMPT TO GET THE
 WORLD TO SWITCH TO XML,
INCLUDING QUOTES AROUND
   ATTRIBUTE VALUES AND
 SLASHES IN EMPTY TAGS AND
  NAMESPACES ALL AT ONCE
       DIDN’T WORK.”
 SIR TIM BERNERS-LEE
            5
http://www.flickr.com/photos/teleject/432030263/
                       6
[O'Reilly] HTML5 Design
91
http://www.w3.org/TR/html4/index/elements.html
9
http://microformats.org/
           10
11
12
13
BLUEPRINTS VS REALITY




 http://www.amazon.com/gp/product/0140139966
                      14
“TAKE CARE
   OF THE LUXURIES AND
 THE NECESSITIES WILL TAKE
  CARE OF THEMSELVES.”
FRANK LLOYD WRIGHT

            15
AGENDA ITEMS

• What’s     different from XHTML to HTML5

• Building   with HTML5 (You are here.)

  • BasicSyntax, Progressive Markup, Accessibility, Geolocation,
    Audio/Video, Web Forms

• Prizes!         http://goo.gl/so6Am


                                  16
BUILDING
WITH HTML5
    17
DOCTYPE



   18
HTML 4.01 Transitional DTD:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">

XHTML 1.0 Transitional DTD:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">




                               19
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>AUSTIN, TX BBQ RESTAURANTS</title>
</head>
<body>
 <h1>....</h1>
 <p>...</p>
 </body>
</html>

                     20
EXERCISE
•   Go to HTML validator at
    http://validator.w3.org/#validate_by_input

•   Then type the following HTML (below) and hit validate:

                <!DOCTYPE html>
                <title>Small HTML5</title>
                <p>Hello world</p>




                                     21
22
23
CHARACTER SET



      24
<meta http-equiv="Content-Type"
content="text/html; charset=UTF-8" />




                  25
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>AUSTIN, TX BBQ RESTAURANTS</title>
</head>
<body>
 <h1>....</h1>
 <p>...</p>
 </body>
</html>
 http://shiflett.org/blog/2005/dec/googles-xss-vulnerability
                             26
SPECIFY YOUR
 LANGUAGE



     27
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>AUSTIN, TX BBQ RESTAURANTS</title>
</head>
<body>
 <h1>....</h1>
 <p>...</p>
 </body>
</html>

                     28
INCLUDING
<SCRIPT> & <STYLE>



        29
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <link rel="stylesheet" href="styles.css" />
 <script src="scripts.js"></script>
 <title>AUSTIN, TX BBQ RESTAURANTS</title>
</head>
<body>
 <h1>....</h1>
 <p>...</p>
 </body>
                     30
SYNTAX



  31
<img src=“file.png” />



          32
<IMG SRC=file.png />



         33
<iMg SrC=file.png />



         34
<IMG SRC=file.png />



         35
<video controls=controls>




            36
EVERYTHING THAT
WAS BAD IN 1999
IS GOOD AGAIN




           37
RELEARNING SYNTAX
•   Attribute quotes “not really” required

•   UPPERCASE and lowercase HTML elements allowed

    •   So is CaMeLcAse typing.

•   No more need to do self-closing tags like <IMG /> or <BR />

•   Also, no more minimalization. So, this is okay: <dl compact>

•   Basically, everything that was bad from HTML4 in XHTML5 is good again.

    •   Full circle, baby! One more time.

                                            38
BRINGING BACK <B>
 AND OTHER TAGS



        39
<p>My name is
<em>Jane</em>, not
    John.</p>


        40
<p>Sally thought to
herself, <i>when will IE6
     die?</i></p>


            41
<p><strong>Registration is
required</strong> for this
       event.</p>


            42
<p><b>Once upon a
time,</b> there was a man
  who lost his mind.</p>


            43
<p><small>The owner of
this blog is not responsible
 for mind blowage. Please
   consume at your own
     risk.</small></p>

             44
<abbr title="Accessible
    Rich Internet
Applications">ARIA</
         abbr>

      No more <acronym>
              45
THE COOLEST THING
EVER ABOUT HTML5.
      (TO ME.)


        46
<h1>
<a href="http://example.com">
 HTML5, for Fun &amp; Profit
</a>
</h1>

<a href="http://example.com">
<img src="logo.png" alt="HTML5 for
Fun and Profit" />
</a>

                 47
<a href="http://example.com">
<h1>HTML5, for Fun &amp; Profit</
h1>
<img src="logo.png" alt="HTML5 for
Fun and Profit" />
</a>



                 48
FIGURES & CAPTIONS



        49
<figure>
! <img src="chart.png" alt="Chart of
increasing awesomeness" />
! <figcaption>The increasing amount of
awesome that this blog
demonstrates.</figcaption>
</figure>


                  50
FIGURE

•   Not restricted to containing IMGs

    •   Tables

    •   Audio

    •   Video

    •   Charts

    •   Code snippets

                                        51
COLLAPSABLE CONTENT



         52
53
<details>
 <summary>Upcoming Topics</summary>
 <p>For the new year, we have a great line up
of articles!</p>
 <ul>
 <li>Understanding the
Outline Algorithm</li>
 <li>When to Use
! <code>hgroup</code></li>
 <li>Machine Semantics with Microdata</li>
</ul>
</details>
Only works in Chrome; all others - https://gist.github.com/370590
                               54
NUMBERING
  LISTS



    55
56
<ol start="3">
<li>Apples</li>
<li>Oranges</li>
<li>Bananas</li>
</ol>




                   57
58
<p>The results are in for your favorite fruit,
and we have a tie for first place!</p>
<ol>
<li value="1">Bananas</li>
<li value="1">Oranges</li>
<li value="2">Apples</li>
</ol>




                       59
EDITABLE ELEMENTS



        60
61
<div contenteditable>
<p>Quick Fox Jumped Over the Lazy Dog</
p>
</div>




                    62
http://markdotto.com/playground/3d-text/
                    63
DRAG N DROP



     64
<h2 draggable>Block-Level Links</h2>




      http://html5doctor.com/native-drag-and-drop/
                           65
HTML5, MICROFORMATS
    & METADATA



         66
67
“Designed for humans first and
       machines second,
microformats are a set of simple,
 open data formats built upon
      existing and widely
      adopted standards.”




               68
“HTML design patterns for common
chunks of content that web builders need
           to markup anyway.”

“Oh, and Google understands them, too.”




                   69
70
REPLACING ABBR

•   <ABBR> element is used by screenreaders to expand abbreviations
    like “lbs” or “NCAAP”

•   However unintended consequences occurred trying to workaround
    browser bugs for other HTML elements

•   What happens when a screenreaders text like this:

    •   “Let’s go to <abbr class="geo"
        title="30.300474;-97.747247">Austin, TX</abbr>”


    http://www.brucelawson.co.uk/2009/microformats-accessibility-html-5-again/
                                        71
<div class="vevent">
 <a class="url" href="http://www.web2con.com/">http://
www.web2con.com</a>
 <span class="summary">Web 2.0 Conference</span>:
 <abbr class="dtstart"
title="2007-10-05">October 5</abbr>-
 <abbr class="dtend" title="2007-10-20">20</
abbr>,
at the <span class="location">Argent Hotel, San Francisco,
CA</span>
</div>


                            72
<div class="vevent">
 <a class="url" href="http://www.web2con.com/">http://
www.web2con.com</a>
 <span class="summary">Web 2.0 Conference</span>:
 <time class="dtstart"
datetime="2007-10-05">October 5</time>-
 <time class="dtend"
datetime="2007-10-19">19</time>,
at the <span class="location">Argent Hotel, San Francisco,
CA</span>
</div>


http://www.brucelawson.co.uk/2009/microformats-accessibility-html-5-again/
                                    73
POSTSCRIPT


•   <ABBR> issue has ben resolved with new pattern (dropping <ABBR>
    altogether):
    http://microformats.org/wiki/value-class-pattern

    •   <p>Let’s go to <span class="geo">51° 30' 48.45", -0° 8'
        53.23" (<span class="value">51.513458;-0.14812</
        span>)</span> </p>



                                    74
DATA-ATTRIBUTE

•   You can set data-attribute to any element you want.

•   Set meta information that can be utilized by JavaScript or CSS later on.

                <img src=“john-smith.jpg”
                data-imgtype=“mugshot”
                alt=“John Smith’s mugshot”>




                                       75
ATTR SELECTOR


img[data-imgtype=“mugshot”] {
/* CSS rules go here */
}




              76
PAGE STRUCTURE



      77
DIV ID=“header”
               DIV ID=“nav”


DIV ID=“section”




                           DIV ID=“sidecolumn”
DIV ID=“article”




              DIV ID=“footer”
                    78
<HEADER>
             <NAV>


<SECTION>




                       <ASIDE>
<ARTICLE>




            <FOOTER>
               79
ARTICLE VS ASIDE VS
                 SECTION

•   Marc Grabsanki says:

    •   Article is unique content to that document

    •   Section is a thematic grouping of content, typically with a heading -
        pretty generic

    •   Aside is content that is tangentially related, like a sidebar
        div has no meaning whatsoever, so there is nothing semantic about
        divs

                                      80
ARTICLE VS ASIDE VS
                    SECTION
•   Bruce Lawson says:

    •   Aside is for something tangentially related to its parent element. Or, if a
        sibling to the main content, it can be used to make sidebars of navigation,
        recent comments, colophons, author bios etc.

    •   Article is a discrete piece of content that could be syndicated - a blog
        post, a news item, a comment, a widget

    •   Section can also contain articles. for example, you could have a page with a
        <section> full of entertainment articles, and a section of political news etc.

                                            81
ARTICLE VS ASIDE VS
                   SECTION

•   Molly Holzschlag, Opera standards evangelist, says:

    •   <section> clarifies <div>

    •   <article> 'replaces' <div id="content">

    •   <aside> 'replaces' <div id="sidebar">

•   Chris Mills, Opera browser employee, plays it safe:
    http://boblet.tumblr.com/post/130610820/html5-structure1

                                       82
WHAT ABOUT THE DIVS?

•   Marc Grabanski, jQuery and HTML5 guy:

    •   “div has no meaning whatsoever, so there is nothing semantic about
        divs”

•   Bruce Lawson, Opera browser employee:

    •   “Like all semantic questions, it depends on the context. If your only
        reason for wanting an element is to group stuff for styling, it's a div.”


                                          83
<body>
 <header>
 <h1>Heading </h1>
 </header>
 <nav>
 <h3>Site Navigation</h3>
 <ul>...</ul>!
 </nav>
 <section>
  <article>
 <h3>Weblog Entry</h3>
  </article>
 </section>!
 <aside>
  <p>You are reading "Chocolate Rain", an entry posted on <time datetime="2009-03-05">5
March, 2009</time>, to the <a href="#">Misty collection</a>. See other posts in <a
href="#">this collection</a>.</p>
 </aside>
 <footer>
 <p>...</p>
 </footer>
</body>

                                           84
85
86
<script type="text/javascript">
document.createElement('header');
document.createElement('nav');
document.createElement('section');
document.createElement('article');
document.createElement('aside');
document.createElement('footer');
</script>




              http://ejohn.org/blog/html5-shiv/
                             87
88
PROGRESSIVELY
ENHANCED HTML5
(INFUSED WITH SHIM)


         89
90
http://modernizr.com/
          91
<script src="-/js/modernizr.min.js" type="text/
javascript" ></script>




                          92
<html lang="en" class=" canvas canvastext
geolocation rgba hsla multiplebgs borderimage
borderradius boxshadow opacity cssanimations
csscolumns cssgradients cssreflections
csstransforms csstransforms3d csstransitions
video audio localstorage sessionstorage
webworkers applicationcache fontface">




                       93
.audio #error {
 display: none;
}
.no-audio #error-box {
 background-color: #ffffcc;
 padding: 1px 10px;
 color: #000;
 border: 5px solid #ffff66;
}



                  CSS Feature Detection
                              94
<script>
if (Modernizr.audio) {
 function playPause() {
  var myAudio = document.getElementsByTagName('audio')
[0];
if(myAudio.paused)
 myAudio.play();
  else
 myAudio.pause();
}
}
</script>
                 JS Feature Detection
                          95
Modernizr.load({
  test: Modernizr.geolocation,
  yep : 'geo.js',
  nope: 'geo-polyfill.js'
});




                    JS Feature Detection
                                 96
97
Pick and Choose Features to Detect
                98
AUDIO/VIDEO



     99
HTML5 AUDIO



     100
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Basic HTML5 Web Document Structure</title>
! </head>
! <body>
<h1>Video Example</h1>
<audio src="html5test.ogg" autoplay controls>
! <a href="html5test.ogg">Download audio</a>
</audio>
! </body>
</html>



                             101
DEMO
 102
HTML5 AUDIO

•   AUDIO element attributes are SRC, AUTOBUFFER, AUTOPLAY,
    LOOP, CONTROLS

•   If you don’t have CONTROL, player becomes transparent




                                   103
HTML5 AUDIO SUPPORT

         FF3.5+   S4+         Ch3+   Op10.5+   IE9+

 Ogg
           Y                   Y       Y
Vorbis

MP3               Y            Y                Y


WAV        Y      Y                    Y

                        104
SUPPORTING AUDIO

<audio controls autobuffer>
 <source src="html5audio.mp3" />
 <source src="html5audio.ogg" />
 <!-- include Adobe Flash player EMBED and OBJECT code
here -->
</audio>




             Use Flash for older versions of IE
                             105
SUPPORTING AUDIO

•   If you do insert audio, setting the file to autoplay is not recommended,
    as it interferes with the experience for web surfers using screen
    readers.

•   Don’t use WAV file type.

    •   Better to ship a compact disc to the user instead.




                                        106
HTML5 VIDEO



     107
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Basic HTML5 Web Document Structure</title>
!    </head>
!    <body>
<h1>Video Example</h1>
<object width="425" height="344"><param name="movie"
value="http://www.youtube.com/v/4GuKSqAg5xI&hl=en&fs=1"></
param><param name="allowFullScreen" value="true"></
param><param name="allowscriptaccess" value="always"></
param><embed src="http://www.youtube.com/v/
4GuKSqAg5xI&hl=en&fs=1" type="application/x-shockwave-flash"
allowscriptaccess="always" allowfullscreen="true" width="425"
height="344"></embed></object>
!    </body>
</html>



                              108
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Basic HTML5 Web Document Structure</title>
! </head>
! <body>
<h1>Video Example</h1>
<video src="html5test.ogg"
! width="320" height="240" controls
! poster="html5testvideoposter.jpg">
! <a href="html5testvideo.ogg">Download movie</a>
</video>
! </body>
</html>


                               109
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Basic HTML5 Web Document Structure</title>
! </head>
! <body>
<h1>Video Example</h1>
<video src="html5test.ogg"
! width="320" height="240" controls
! poster="html5testvideoposter.jpg">



          DEMO
! <a href="html5testvideo.ogg">Download movie</a>
</video>
! </body>
</html>


                               110
HTML5 VIDEO

•   WIDTH and HEIGHT should be required, IMO, but movie plays anyway
    based on the values in the video file itself.

•   Video formats may have their own posterframe. The browser should
    use that by default unless overridden by valid POSTER attribute value.

•   Text can be included within VIDEO element to allow user to download
    video if their browser doesn’t support.

•   If you want to give users control, use CONTROL attribute.

                                      111
HTML5 VIDEO


•   Video can start automatically if using the AUTOPLAY=”1” attribute and
    value.

•   Spec provides for LOOP, AUTOBUFFER which also take a value of O
    or 1.

•   Codecs support...



                                    112
HTML5 VIDEO
“It would be helpful for interoperability if all browsers could
support the same codecs.
However, there are no known codecs that satisfy all the
current players: we need a codec that is known to not require
per-unit or per-distributor licensing, that is compatible with the
open source development model, that is of sufficient quality as
to be usable, and that is not an additional submarine patent
risk for large companies.
This is an ongoing issue and this section will be updated once
more information is available.”
- http://www.whatwg.org/specs/web-apps/current-work/#video-and-
                 audio-codecs-for-video-elements
                                113
CODECS
•   Ogg (or “Vorbis”)

    •   No need to worry about patents

•   H.264

    •   Created by the MPEG group

    •   If you have blu-ray disc player, you are using it

•   WebM

    •   A wrapper for the VP8 video and Ogg audio streams

                                          114
VIDEO CODEC SUPPORT

        FF3.6+   S         Ch5+     Op10.6+   IE9+


Ogg       Y                  Y        Y


H.264            Y          Y*                 Y


WebM (W4.02+)              (Ch6+)     Y


                     115
LESSONS LEARNED
•   To get most <video> support, you need 2 video files: H.264
    and .OGG.

    •   iOS Devices can handle MP4 (H.264)

    •   Safari, IE, Flash can deliver MP4 (H.264)

    •   Firefox, Opera can deliver .OGG

    •   Then hit them with FLV video, which supports H.264

        http://camendesign.com/code/video_for_everybody


                                      116
http://firefogg.org/


        117
http://www.videolan.org/vlc/
             118
http://handbrake.fr/


         119
LESSONS LEARNED

•   Use VLC or Firefogg to encode common movie files types to OGG

•   H.264 encoding? Use Handbrake

•   If you are hot to trot for HTML5 Video, like, right now, check out Mark
    Pilgrim’s tutorial:
    http://diveintohtml5.org/video.html

    •   Good primer:
        http://dev.opera.com/articles/view/introduction-html5-video/


                                       120
121
122
!   <script>
!   function playPause() {
!     var myVideo = document.getElementsByTagName('video')[0];
!     if (myVideo.paused)
!       myVideo.play();
!     else
!       myVideo.pause();
!   }
!   </script>




                                 123
<input type=button onclick="playPause()" value="Play/Pause"
tabindex="0" />




                               124
HTML5 VIDEO & CAPTIONS



          125
For students with LD and struggling or
beginning readers, the use of captions or
subtitles can lead to increases in:
  •reading speed,
  •word knowledge,
  •decoding,
  •vocabulary acquisition,
  •word recognition,
  •reading comprehension, and
  •oral reading rates.



                     126
[Captioning] has been shown to improve
reading skills among adults who are non-
readers.




http://www.ldonline.org/article/35793
                    127
128
DEMO
 129
QUICK & DIRTY
CAPTIONING



      130
http://github.com/johnmcc/jCaps
              131
132
133
SRT FILES
• SRT files are text files used in video playback; therefore, they do
 not contain any video data.

• Text
     file containing subtitles used by various video playback
 programs; supported by DivX, DVD, and other video formats;

  • Includesthe time each subtitle should be displayed followed by
   the text of the subtitles.

  • Subtitlefiles are often named according to the language of the
   subtitles, i.e. "moviename-eng.srt" for English and
   "moviename-ger.srt" for German subtitles.
                                 134
TRANSCRIPT-EN.SRT
1
00:00:00,000 --> 00:00:6,000
Allow me to introduce myself My name is Tay It's T-A-Y, T-A-Y to the Z

2
00:00:06,000 --> 00:00:9,000
This is the web and it's gonna murder your TV It was Chocolate Rain

3
00:00:09,500 --> 00:00:11,500
Wrote a song about that history Chocolate Rain

4
00:00:12,000 --> 00:00:15,000
Now I'm paid a hefty hefty fee Chocolate Rain
                                    135
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.js">
</script>
<script src="jquery.jcap.js"></script>




                                      136
 <video id="myVid" width="400" src="cherry-chocolate-
rain.ogv" autobuffer controls>
  <track src="transcript-en.srt" type="text/srt" language="en"
role="textaudesc"></track>
  <track src="transcript-gr.srt" type="text/srt" language="gr"
role="textaudesc"></track>
  <p>Alternative text...</p>
</video>




                               137
 <video id="myVid" width="400" src="cherry-chocolate-rain.ogv"
autobuffer controls>
  <track src="transcript-en.srt" type="text/srt"
language="en" role="textaudesc"></track>
  <track src="transcript-gr.srt" type="text/srt"
language="gr" role="textaudesc"></track>
  <p>Alternative text goes here.</p>
</video>




                                   138
HTML5 GEOLOCATION



        139
OH, PATHOS!




 http://youtu.be/_naLuRykun8
             140
141
142
143
144
145
if (navigator.geolocation) {
!
navigator.geolocation.getCurrentPosition(show_coordinat
es);
!
function show_coordinates(position){
! alert('Your latitude is ' + position.coords.latitude + ' ' +
! 'and your longitude is ' + position.coords.longitude +
'.');
! }
}                                       Modernizr.load({
                                          test: Modernizr.geolocat
                     ...or use Modernizr! yep : 'geo.js',
                                          nope: 'geo-polyfill.js'
                              146
                                        });
http://ion.christopherschmitt.com/geolocation/
                      147
THAT’S GREAT, BUT


•I   don’t read longitude and latitude.

     • More  importantly, my clients or site visitors don’t comprehend
      longitude and latitude.

• And   I don’t love the code!



                                    148
http://2010.incontrolconference.com/eats/
                   149
http://atxwebshow.com/coffeeshops/
                150
http://atxwebshow.com/coffeeshops/
                151
STEP #1
Muck-N-Dave's Texas BBQ
1603 South Congress
Austin, TX 78704 USA
512-590-3387

Old School BBQ and Grill
2326 E Cesar Chavez St
Austin, TX, 78702 USA
512-974-6830

The Shed BBQ Rolling Joint
1816 E 6th Street.
Austin, TX, 78702 USA
              152
STEP #2

• Convert   addresses to hCard microformats




            http://microformats.org/code/hcard/creator
                                153
<div class="vcard">
! <a class="url fn n" href="http://www.theqcard.com/">
! <span class="given-name">Jane</span>
! <span class="additional-name"></span>
! <span class="family-name">Smith</span>
! </a>
! <div class="org">Old School BBQ and Grill</div>

! <div class="adr">
! ! <div class="street-address">2907 E MLK Jr Blvd.</div>
! ! <span class="locality">Austin</span>,
! ! <span class="region">TX</span>,
! ! <span class="postal-code">78702</span>
! ! <span class="country-name">USA</span>
! </div>
! <div class="tel">512-974-6830</div>
! <div class="note distance">
! </div> http://microformats.org/code/hcard/creator
</div>
                                  154
STEP #3
  hCard


  hCard


  hCard


  hCard
    155
STEP #3
<ol>
   <li>
            hCard
                    </li>
   <li>
            hCard
                    </li>
   <li>
            hCard
                    </li>
   <li>
            hCard
              156
                    </li>
STEP #4
<div id="locations">
! <ol>
! ! <li><!-- Microformats address 1 --></li>
! ! <li><!-- Microformats address 2 --></li>
! ! <li><!-- Microformats address 3 --></li>
! ! <li><!-- Microformats address 4 --></li>
! ! ...
! </ol>
</div>




                                 157
STEP #5




http://github.com/teleject/HTML5-GeoLocation-jQuery-Plugin
                            158
STEP #6

<script type="text/javascript" src="https://
ajax.googleapis.com/ajax/libs/jquery/1.6.4/
jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-
location.js"></script>




                            159
STEP #7




http://code.google.com/apis/maps/signup.html
                     160
STEP #8
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/
jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-location.1.0.0.js"></script>
<script type="text/javascript">
! $(document).ready(function()
! {
! ! $('#locations2').location({
! !       'apiKey' : 'YOUR_API_KEY_HERE'
! ! });!
! });
</script>




                                      161
STEP #9 PROFIT!



       162
ONE MORE THING...



        163
<div class="vcard">
! <a class="url fn n" href="http://www.theqcard.com/">
! <span class="given-name">Jane</span>
! <span class="additional-name"></span>
! <span class="family-name">Smith</span>
! </a>
! <div class="org">Old School BBQ and Grill</div>

! <div class="adr" data-longitude="-97.723410" data-
latitude="30.262098">
! ! <div class="street-address">2907 E MLK Jr Blvd.</div>
! ! <span class="locality">Austin</span>,
! ! <span class="region">TX</span>,
! ! <span class="postal-code">78702</span>
! ! <span class="country-name">USA</span>
! </div>
! <div class="tel">512-974-6830</div>
! <div class="note distance">
! </div>
                        http://geocoder.us/
</div>                           164
$('#locations').location(
! {
! ! apiKey: 'YOUR_API_KEY_HERE',
! ! geodata: '#geodata', // site visitor’s location
! ! notification: '.notification', // progress indicator
! ! recheck: '.recheck',
! ! distance: '.distance', //where the distance appears
! ! geoAdr: '.geoAdr', // longitude and latitude
! ! listElement: 'li' // different listing element?
! } );




                            165
WEB FORMS



    166
167
<form>
<p><label>Search <input type="search"
name="query"></label></p>
<p><button type="submit">Submit</
button></p>
</form>




                    168
169
<form>
<fieldset>
<legend>Contact Information</legend>
<p><label>E-mail address
 <input type="email" name="email">
</label></p>
<p><label>Web site
 <input type="url" name="website">
 </label></p>
 <p><label>Telephone number
 <input type="tel" name="phone">
 </label></p>
</fieldset>
<p><button type="submit">Submit</button>
</p>
</form>             170
171
<form>
<p>
<label>Appointment Date and Time
<input type="datetime"
name="dateAndTime"></label>
</p>
</form>




                     172
173
<form>
<fieldset>
<legend>Appointment Request</legend>
<p><label>Date <input type="date"
name="date"></label></p>
<p><label>Time <input type="time"
name="time"></label></p>
</fieldset>
<p><button type="submit">Submit</button></
p>
</form>

 Support in Chrome 10+, Safari 4+, Opera 9+, iOS, Android


                            174
175
<form>
<p><label>Quantity <input type="number"
name="quantity"></label></p>
<p><button type="submit">Submit</button></
p>
</form>


 Support in Chrome 10+, Safari 4+, Opera 9+, iOS, Android


                            176
177
<form>
<p><label>Quantity (must order in pairs of 2)
<input type="number"
name="quantity" min="2" max="20"
step="2"></label></p>
<p><button type="submit">Submit</button></
p>
</form>




                      178
179
<form>
<p><label>Volume <input type="range"
name="volume" min="0" max="10" step=".5"
value="5"></label></p>
</form>




                     180
181
<form>
<p><label>Background color <input
type="color" name="bg"></label></p>
<p><label>Foreground color <input type="color"
name="fg"></label></p>
<p><button type="submit">Submit</button></
p>
</form>




                      182
183
<form>
<p><label>Donation amount <input type="text"
name="donation"
list="donations"></label></p>
<datalist id="donations">
<option value="10.00">10.00</option>
<option value="25.00">25.00</option>
<option value="50.00">50.00</option>
</datalist>
<p><button type="submit">Submit</button></
p>
</form> Support in Firefox 4+, Opera 10+

                     184
185
<form>
<p><label for="donation">Donation amount</
label>
<datalist id="donations">
<select name="donation"><option></option>
<option value="10.00">10.00</option>
<option value="25.00">25.00</option>
<option value="50.00">50.00</option>
<option>Other</option>
</select>
If other, please specify:
</datalist>
<input type="text" id="donation"
name="donation" list="donations"></p>
             http://adactio.com/journal/4272/
<p><button type="submit">Submit</button></
p>
</form>               186
187
<form>
<fieldset>
<legend>Login</legend>
<p><label>Username <input type="text"
name="username" required></label></p>
<p><label>Password <input type="password"
name="pwd" required></label></p>
</fieldset>
<p><button type="submit">Submit</button></
p>
</form> IE 10+, FF 4+, Chrome 10+, Safari 5+,
               Opera 10+, iOS, Andriod

                      188
189
<p><label>E-mail address <input type="email"
name="email"
placeholder="user@domain.com"></label></p>
<p><label>Web site <input type="url"
name="website" placeholder="http://
www.domain.com/"></label></p>
<p><label>Telephone number <input type="tel"
name="phone"
placeholder="123-123-1234"></label></p>




                     190
<form>
<p><label>Search <input type="search"
name="query" autofocus></label></p>
<p><button type="submit">Submit</button></
p>
</form>




                    191
<form>
<fieldset>
<legend>Login</legend>
<p><label>Username <input type="text"
name="username"></label></p>
<p><label>Password <input type="password"
name="pwd"
autocomplete="off"></label></p>
</fieldset>
<p><button type="submit">Submit</button></
p>
</form>

                    192
193
<form>
<p><label>Telephone number <input type="tel"
name="phone"
pattern="[2-9][0-9]{2}-[0-9]{3}-[0-9]{4}"
title="North American format: XXX-XXX-
XXXX"></label></p>
<p><button type="submit">Submit</button></
p>
</form>



                     194
HTML5 CANVAS



     195
<canvas id="myCanvas" width="300" height="150">
Fallback content, in case the browser does not support Canvas.
</canvas>




                               196
<script type="text/javascript"><!--
window.addEventListener('load', function () {
 // Get the canvas element.
 var elem = document.getElementById('myCanvas');
 if (!elem || !elem.getContext) {
   return;
 }

 // Get the canvas 2d context.
 var context = elem.getContext('2d');
 if (!context) {
   return;
 }

  // Now you are done! Let's draw a blue rectangle.
  context.fillStyle = '#00f';
  context.fillRect(0, 0, 150, 100);
}, false);
// --></script>


                                            197
198
// Get the canvas element.
 var elem = document.getElementById('myCanvas');
 if (!elem || !elem.getContext) {
   return;
 }

 // Get the canvas 2d context.
 var context = elem.getContext('2d');
 if (!context) {
   return;
 }

 context.fillStyle = '#00f';
 context.strokeStyle = '#f00';
 context.lineWidth = 4;

  // Draw a right triangle.
  context.beginPath();
  context.moveTo(10, 10);
  context.lineTo(100, 10);
  context.lineTo(10, 100);
  context.lineTo(10, 10);
  context.fill();
  context.stroke();
  context.closePath();
}, false);




                                            199
200
// Get the canvas element.
 var elem = document.getElementById('myCanvas');
 if (!elem || !elem.getContext) {
   return;
 }

 // Get the canvas 2d context.
 var context = elem.getContext('2d');
 if (!context) {
   return;
 }

 context.fillStyle = '#00f';
 context.strokeStyle = '#f00';
 context.lineWidth = 4;

  // Draw a right triangle.
  context.beginPath();
  context.moveTo(10, 10);
  context.lineTo(100, 10);
  context.lineTo(10, 100);
  context.lineTo(10, 10);
  context.fill();
  context.stroke();
  context.closePath();
}, false);




                                            201
http://flickr.com/photos/dunstan/3099313036/
                    202
BUT IS IT ACCESSIBLE?



          203
ACCESSIBLE CANVAS ISSUES

• Setting   user interface elements in canvas

• Setting   images in canvas

• Setting   text in canvas




            http://www.paciellogroup.com/blog/?p=362
                                    204
PROGRESSIVE ENHANCEMENT
         & CANVAS
   “Progressive enhancement is a strategy for web design that
emphasizes accessibility, semantic HTML markup, and external style
                 sheet and scripting technologies.”
      http://en.wikipedia.org/wiki/Progressive_enhancement
                                205
https://github.com/mezzoblue/PaintbrushJS
                 206
http://csssummit.com/
       207
• Take   mugshot

• Make   it black and white

• Compress    with ImagOptim

                   http://imageoptim.pornel.net/
                                208
<img class="mugshot filter-tint" data-pb-tint-
opacity="0.2" data-pb-tint-colour="#517777"
src="filename.png" />



                       209
box-shadow: 1px 1px 4px
#fff, 2px 2px 4px #fff, 3px
3px 2px #333;
border-radius: 300px;




                      210
http://www.filamentgroup.com/lab/
jquery_visualize_plugin_accessible_charts_graphs_from_tables_html5_canvas/
                                    211
http://www.filamentgroup.com/lab/
jquery_visualize_plugin_accessible_charts_graphs_from_tables_html5_canvas/
                                      212
<table >
!     <caption>My Push Ups</caption>
!     <thead>
<tr>
!     <td></td>
!     <th>M</th>
!     <th>Tu</th>
!     <th>W</th>
!     <th>Th</th>
!     <th>F</th>
!     <th>Sa</th>
</tr>
!     </thead>
!     <tbody>
<tr>
!     <th>Chris</th>
!     <td>56</td>
!     <td>30</td>
!     <td>50</td>
!     <td>0</td>
!     <td>45</td>
!     <td>120</td>
!     <td>0</td>
</tr>
!     </tbody>
</table>

                  213
214
<link type="text/css" rel="stylesheet"
href="visualize.jQuery.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/
jquery/1.3.2/jquery.min.js"></script>
<!--[if IE]><script type="text/javascript" src="excanvas.compiled.js"></
script><![endif]-->
<script type="text/javascript" src="visualize.jQuery.js"></script>
<script type="text/javascript">
$(function(){
! $('table').addClass('accessHide');
! $('table').visualize({type: 'line', colors: ['#fff']});
! });
</script>



                                     215
<link type="text/css" rel="stylesheet" href="visualize.jQuery.css"/>
<script type="text/javascript" src="http://
ajax.googleapis.com/ajax/libs/jquery/1.3.2/
jquery.min.js"></script>
<!--[if IE]><script type="text/javascript" src="excanvas.compiled.js"></
script><![endif]-->
<script type="text/javascript" src="visualize.jQuery.js"></script>
<script type="text/javascript">
$(function(){
! $('table').addClass('accessHide');
! $('table').visualize({type: 'line', colors: ['#fff']});
! });
</script>



                                     216
<link type="text/css" rel="stylesheet" href="visualize.jQuery.css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/
jquery/1.3.2/jquery.min.js"></script>
<!--[if IE]><script type="text/javascript"
src="excanvas.compiled.js"></script><![endif]-->
<script type="text/javascript" src="visualize.jQuery.js"></script>
<script type="text/javascript">
$(function(){
! $('table').addClass('accessHide');
! $('table').visualize({type: 'line', colors: ['#fff']});
! });
</script>




                                      217
http://msdn.microsoft.com/en-us/library/bb250524(VS.85).aspx
                             218
<link type="text/css" rel="stylesheet" href="visualize.jQuery.css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/
jquery/1.3.2/jquery.min.js"></script>
<!--[if IE]><script type="text/javascript" src="excanvas.compiled.js"></
script><![endif]-->
<script type="text/javascript"
src="visualize.jQuery.js"></script>
<script type="text/javascript">
$(function(){
! $('table').addClass('accessHide');
! $('table').visualize({type: 'line', colors: ['#fff']});
! });
</script>



                                     219
<link type="text/css" rel="stylesheet" href="visualize.jQuery.css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/
jquery/1.3.2/jquery.min.js"></script>
<!--[if IE]><script type="text/javascript" src="excanvas.compiled.js"></
script><![endif]-->
<script type="text/javascript" src="visualize.jQuery.js"></script>
<script type="text/javascript">
$(function(){
! $('table').addClass('accessHide');
! $('table').visualize({type: 'line', colors: ['#fff']});
! });
</script>




                                     220
table.accessHide {
 position: absolute;
 left: -999999px;
}
table { height: 100px; width: 250px;}




                              221
<link type="text/css" rel="stylesheet" href="visualize.jQuery.css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/
jquery/1.3.2/jquery.min.js"></script>
<!--[if IE]><script type="text/javascript" src="excanvas.compiled.js"></
script><![endif]-->
<script type="text/javascript" src="visualize.jQuery.js"></script>
<script type="text/javascript">
$(function(){
! $('table').addClass('accessHide');
! $('table').visualize({type: 'line', colors: ['#fff']});
! });
</script>




                                     222
223
http://flickr.com/photos/dunstan/3099313036/
                    224
XHTML, ...I THINK I WANT TO SEE
ANOTHER MARKUP SPEC.
                  225
RECOMMENDED
         Design for Web Applications by Matt May and Wendy
• Universal
 Chisholm

• Bulletproof Ajax   by Jeremy Keith

• Designing   with Progressive Enhancement by Filament Group

• Microformats   Made Simple by Emily Lewis

• How   Buildings Learn by Stewart Brand

• HTML5   Cookbook by a whole bunch of people!

                                       226
UPCOMING EVENTS
• AIGA   In Control Conference on Feb. 20-21st.

 •2   days, 1 track

 • HTML5, CSS3, jQuery, Mobile      Design, Content Strategy, and
   much more

 • Orlando, FL

 • http://2012.incontrolconference.com/


                              227
THANK YOU!
   Christopher Schmitt
schmitt@heatvision.com
http://twitter.com/teleject
             228

Contenu connexe

Tendances

Pediatric Drowning; Pediatrics 2018
Pediatric Drowning; Pediatrics 2018Pediatric Drowning; Pediatrics 2018
Pediatric Drowning; Pediatrics 2018Kareem Alnakeeb
 
Learn javascript easy steps
Learn javascript easy stepsLearn javascript easy steps
Learn javascript easy stepsprince Loffar
 
Leukemia in Children
Leukemia in ChildrenLeukemia in Children
Leukemia in ChildrenCSN Vittal
 
Hemolytic uremic syndrome
Hemolytic uremic syndromeHemolytic uremic syndrome
Hemolytic uremic syndromeNajib Suhrabi
 
Diabetic Ketoacidosis in Children (DKA)
Diabetic Ketoacidosis in Children (DKA)Diabetic Ketoacidosis in Children (DKA)
Diabetic Ketoacidosis in Children (DKA)Hardi Tahir
 
Php Using Arrays
Php Using ArraysPhp Using Arrays
Php Using Arraysmussawir20
 
Basics of Front End Web Dev PowerPoint
Basics of Front End Web Dev PowerPointBasics of Front End Web Dev PowerPoint
Basics of Front End Web Dev PowerPointSahil Gandhi
 
Status Asthmaticus In Children
Status Asthmaticus In ChildrenStatus Asthmaticus In Children
Status Asthmaticus In ChildrenDang Thanh Tuan
 

Tendances (12)

Pediatric Drowning; Pediatrics 2018
Pediatric Drowning; Pediatrics 2018Pediatric Drowning; Pediatrics 2018
Pediatric Drowning; Pediatrics 2018
 
PHP NOTES FOR BEGGINERS
PHP NOTES FOR BEGGINERSPHP NOTES FOR BEGGINERS
PHP NOTES FOR BEGGINERS
 
Learn javascript easy steps
Learn javascript easy stepsLearn javascript easy steps
Learn javascript easy steps
 
Javascript validating form
Javascript validating formJavascript validating form
Javascript validating form
 
Leukemia in Children
Leukemia in ChildrenLeukemia in Children
Leukemia in Children
 
Hemolytic uremic syndrome
Hemolytic uremic syndromeHemolytic uremic syndrome
Hemolytic uremic syndrome
 
Diabetic Ketoacidosis in Children (DKA)
Diabetic Ketoacidosis in Children (DKA)Diabetic Ketoacidosis in Children (DKA)
Diabetic Ketoacidosis in Children (DKA)
 
Php Using Arrays
Php Using ArraysPhp Using Arrays
Php Using Arrays
 
Web technology lab manual
Web technology lab manualWeb technology lab manual
Web technology lab manual
 
Basics of Front End Web Dev PowerPoint
Basics of Front End Web Dev PowerPointBasics of Front End Web Dev PowerPoint
Basics of Front End Web Dev PowerPoint
 
CSS Basics
CSS BasicsCSS Basics
CSS Basics
 
Status Asthmaticus In Children
Status Asthmaticus In ChildrenStatus Asthmaticus In Children
Status Asthmaticus In Children
 

Similaire à [O'Reilly] HTML5 Design

Similaire à [O'Reilly] HTML5 Design (20)

[heweb11] HTML5 Makeover
[heweb11] HTML5 Makeover[heweb11] HTML5 Makeover
[heweb11] HTML5 Makeover
 
[edUi] HTML5 Workshop
[edUi] HTML5 Workshop[edUi] HTML5 Workshop
[edUi] HTML5 Workshop
 
[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design
 
[HEWEBAR 2012] Beyond Desktop Browsing (HTML5)
[HEWEBAR 2012] Beyond Desktop Browsing (HTML5)[HEWEBAR 2012] Beyond Desktop Browsing (HTML5)
[HEWEBAR 2012] Beyond Desktop Browsing (HTML5)
 
HTML5 Design
HTML5 DesignHTML5 Design
HTML5 Design
 
The Devil and HTML5
The Devil and HTML5The Devil and HTML5
The Devil and HTML5
 
[In Control 2010] HTML5
[In Control 2010] HTML5[In Control 2010] HTML5
[In Control 2010] HTML5
 
[Access U 2010] HTML5 & Accessibility
[Access U 2010] HTML5 & Accessibility[Access U 2010] HTML5 & Accessibility
[Access U 2010] HTML5 & Accessibility
 
TOSSUG HTML5 讀書會 新標籤與表單
TOSSUG HTML5 讀書會 新標籤與表單TOSSUG HTML5 讀書會 新標籤與表單
TOSSUG HTML5 讀書會 新標籤與表單
 
[edUiconf] HTML5 does all that… and i can haz cheeseburger? You bet!
[edUiconf] HTML5 does all that… and i can haz cheeseburger? You bet![edUiconf] HTML5 does all that… and i can haz cheeseburger? You bet!
[edUiconf] HTML5 does all that… and i can haz cheeseburger? You bet!
 
HTML5 & CSS3 Flag
HTML5 & CSS3 FlagHTML5 & CSS3 Flag
HTML5 & CSS3 Flag
 
HTML5
HTML5HTML5
HTML5
 
Html5 public
Html5 publicHtml5 public
Html5 public
 
[amigos] HTML5 and CSS3
[amigos] HTML5 and CSS3[amigos] HTML5 and CSS3
[amigos] HTML5 and CSS3
 
Html5
Html5Html5
Html5
 
JavaScript For People Who Don't Code
JavaScript For People Who Don't CodeJavaScript For People Who Don't Code
JavaScript For People Who Don't Code
 
HTML5, just another presentation :)
HTML5, just another presentation :)HTML5, just another presentation :)
HTML5, just another presentation :)
 
2022 HTML5: The future is now
2022 HTML5: The future is now2022 HTML5: The future is now
2022 HTML5: The future is now
 
Slow kinda sucks
Slow kinda sucksSlow kinda sucks
Slow kinda sucks
 
Take Your Markup to 11
Take Your Markup to 11Take Your Markup to 11
Take Your Markup to 11
 

Plus de Christopher Schmitt

Keeping Colors from Killing Your Product
Keeping Colors from Killing Your ProductKeeping Colors from Killing Your Product
Keeping Colors from Killing Your ProductChristopher Schmitt
 
[funka] Adaptive Images in Responsive Web Design
[funka] Adaptive Images in Responsive Web Design[funka] Adaptive Images in Responsive Web Design
[funka] Adaptive Images in Responsive Web DesignChristopher Schmitt
 
[Austin WordPress Meetup] Adaptive Images in Responsive Web Design
[Austin WordPress Meetup] Adaptive Images in Responsive Web Design[Austin WordPress Meetup] Adaptive Images in Responsive Web Design
[Austin WordPress Meetup] Adaptive Images in Responsive Web DesignChristopher Schmitt
 
[CSSDevConf] Adaptive Images in Responsive Web Design 2014
[CSSDevConf] Adaptive Images in Responsive Web Design 2014[CSSDevConf] Adaptive Images in Responsive Web Design 2014
[CSSDevConf] Adaptive Images in Responsive Web Design 2014Christopher Schmitt
 
[rwdsummit] Adaptive Images in Responsive Web Design
[rwdsummit] Adaptive Images in Responsive Web Design[rwdsummit] Adaptive Images in Responsive Web Design
[rwdsummit] Adaptive Images in Responsive Web DesignChristopher Schmitt
 
[artifactconf] Github for People Who Don't Code
[artifactconf] Github for People Who Don't Code[artifactconf] Github for People Who Don't Code
[artifactconf] Github for People Who Don't CodeChristopher Schmitt
 
[cssdevconf] Adaptive Images in Responsive Web Design
[cssdevconf] Adaptive Images in Responsive Web Design[cssdevconf] Adaptive Images in Responsive Web Design
[cssdevconf] Adaptive Images in Responsive Web DesignChristopher Schmitt
 
[parisweb] Adaptive Images in Responsive Web Design
[parisweb] Adaptive Images in Responsive Web Design[parisweb] Adaptive Images in Responsive Web Design
[parisweb] Adaptive Images in Responsive Web DesignChristopher Schmitt
 
[peachpit] Adaptive Images in Responsive Web Design
[peachpit] Adaptive Images in Responsive Web Design[peachpit] Adaptive Images in Responsive Web Design
[peachpit] Adaptive Images in Responsive Web DesignChristopher Schmitt
 
[jqconatx] Adaptive Images for Responsive Web Design
[jqconatx] Adaptive Images for Responsive Web Design[jqconatx] Adaptive Images for Responsive Web Design
[jqconatx] Adaptive Images for Responsive Web DesignChristopher Schmitt
 
[wvbcn] Adaptive Images in Responsive Web Design
[wvbcn] Adaptive Images in Responsive Web Design[wvbcn] Adaptive Images in Responsive Web Design
[wvbcn] Adaptive Images in Responsive Web DesignChristopher Schmitt
 
[drupalcampatx] Adaptive Images in Responsive Web Design
[drupalcampatx] Adaptive Images in Responsive Web Design[drupalcampatx] Adaptive Images in Responsive Web Design
[drupalcampatx] Adaptive Images in Responsive Web DesignChristopher Schmitt
 
[refreshpitt] Adaptive Images in Responsive Web Design
[refreshpitt] Adaptive Images in Responsive Web Design[refreshpitt] Adaptive Images in Responsive Web Design
[refreshpitt] Adaptive Images in Responsive Web DesignChristopher Schmitt
 
[psuweb] Adaptive Images in Responsive Web Design
[psuweb] Adaptive Images in Responsive Web Design[psuweb] Adaptive Images in Responsive Web Design
[psuweb] Adaptive Images in Responsive Web DesignChristopher Schmitt
 
GitHub for People Who Don't Code
GitHub for People Who Don't CodeGitHub for People Who Don't Code
GitHub for People Who Don't CodeChristopher Schmitt
 
[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web DesignChristopher Schmitt
 
[HEWEBFL] Adaptive Images in Responsive Web Design
[HEWEBFL] Adaptive Images in Responsive Web Design[HEWEBFL] Adaptive Images in Responsive Web Design
[HEWEBFL] Adaptive Images in Responsive Web DesignChristopher Schmitt
 
[refreshaustin] Adaptive Images in Responsive Web Design
[refreshaustin] Adaptive Images in Responsive Web Design[refreshaustin] Adaptive Images in Responsive Web Design
[refreshaustin] Adaptive Images in Responsive Web DesignChristopher Schmitt
 
[sxsw2013] Extremely Compressed JPEGs
[sxsw2013] Extremely Compressed JPEGs[sxsw2013] Extremely Compressed JPEGs
[sxsw2013] Extremely Compressed JPEGsChristopher Schmitt
 
[html5tx] Adaptive Images in Responsive Web Design
[html5tx] Adaptive Images in Responsive Web Design[html5tx] Adaptive Images in Responsive Web Design
[html5tx] Adaptive Images in Responsive Web DesignChristopher Schmitt
 

Plus de Christopher Schmitt (20)

Keeping Colors from Killing Your Product
Keeping Colors from Killing Your ProductKeeping Colors from Killing Your Product
Keeping Colors from Killing Your Product
 
[funka] Adaptive Images in Responsive Web Design
[funka] Adaptive Images in Responsive Web Design[funka] Adaptive Images in Responsive Web Design
[funka] Adaptive Images in Responsive Web Design
 
[Austin WordPress Meetup] Adaptive Images in Responsive Web Design
[Austin WordPress Meetup] Adaptive Images in Responsive Web Design[Austin WordPress Meetup] Adaptive Images in Responsive Web Design
[Austin WordPress Meetup] Adaptive Images in Responsive Web Design
 
[CSSDevConf] Adaptive Images in Responsive Web Design 2014
[CSSDevConf] Adaptive Images in Responsive Web Design 2014[CSSDevConf] Adaptive Images in Responsive Web Design 2014
[CSSDevConf] Adaptive Images in Responsive Web Design 2014
 
[rwdsummit] Adaptive Images in Responsive Web Design
[rwdsummit] Adaptive Images in Responsive Web Design[rwdsummit] Adaptive Images in Responsive Web Design
[rwdsummit] Adaptive Images in Responsive Web Design
 
[artifactconf] Github for People Who Don't Code
[artifactconf] Github for People Who Don't Code[artifactconf] Github for People Who Don't Code
[artifactconf] Github for People Who Don't Code
 
[cssdevconf] Adaptive Images in Responsive Web Design
[cssdevconf] Adaptive Images in Responsive Web Design[cssdevconf] Adaptive Images in Responsive Web Design
[cssdevconf] Adaptive Images in Responsive Web Design
 
[parisweb] Adaptive Images in Responsive Web Design
[parisweb] Adaptive Images in Responsive Web Design[parisweb] Adaptive Images in Responsive Web Design
[parisweb] Adaptive Images in Responsive Web Design
 
[peachpit] Adaptive Images in Responsive Web Design
[peachpit] Adaptive Images in Responsive Web Design[peachpit] Adaptive Images in Responsive Web Design
[peachpit] Adaptive Images in Responsive Web Design
 
[jqconatx] Adaptive Images for Responsive Web Design
[jqconatx] Adaptive Images for Responsive Web Design[jqconatx] Adaptive Images for Responsive Web Design
[jqconatx] Adaptive Images for Responsive Web Design
 
[wvbcn] Adaptive Images in Responsive Web Design
[wvbcn] Adaptive Images in Responsive Web Design[wvbcn] Adaptive Images in Responsive Web Design
[wvbcn] Adaptive Images in Responsive Web Design
 
[drupalcampatx] Adaptive Images in Responsive Web Design
[drupalcampatx] Adaptive Images in Responsive Web Design[drupalcampatx] Adaptive Images in Responsive Web Design
[drupalcampatx] Adaptive Images in Responsive Web Design
 
[refreshpitt] Adaptive Images in Responsive Web Design
[refreshpitt] Adaptive Images in Responsive Web Design[refreshpitt] Adaptive Images in Responsive Web Design
[refreshpitt] Adaptive Images in Responsive Web Design
 
[psuweb] Adaptive Images in Responsive Web Design
[psuweb] Adaptive Images in Responsive Web Design[psuweb] Adaptive Images in Responsive Web Design
[psuweb] Adaptive Images in Responsive Web Design
 
GitHub for People Who Don't Code
GitHub for People Who Don't CodeGitHub for People Who Don't Code
GitHub for People Who Don't Code
 
[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design
 
[HEWEBFL] Adaptive Images in Responsive Web Design
[HEWEBFL] Adaptive Images in Responsive Web Design[HEWEBFL] Adaptive Images in Responsive Web Design
[HEWEBFL] Adaptive Images in Responsive Web Design
 
[refreshaustin] Adaptive Images in Responsive Web Design
[refreshaustin] Adaptive Images in Responsive Web Design[refreshaustin] Adaptive Images in Responsive Web Design
[refreshaustin] Adaptive Images in Responsive Web Design
 
[sxsw2013] Extremely Compressed JPEGs
[sxsw2013] Extremely Compressed JPEGs[sxsw2013] Extremely Compressed JPEGs
[sxsw2013] Extremely Compressed JPEGs
 
[html5tx] Adaptive Images in Responsive Web Design
[html5tx] Adaptive Images in Responsive Web Design[html5tx] Adaptive Images in Responsive Web Design
[html5tx] Adaptive Images in Responsive Web Design
 

Dernier

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
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...Aggregage
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXTarek Kalaji
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdfPedro Manuel
 
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
 
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
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemAsko Soukka
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfAijun Zhang
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostMatt Ray
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...DianaGray10
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?IES VE
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URLRuncy Oommen
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IES VE
 
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
 
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 Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfDianaGray10
 
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
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024SkyPlanner
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-pyJamie (Taka) Wang
 

Dernier (20)

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
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
 
20230104 - machine vision
20230104 - machine vision20230104 - machine vision
20230104 - machine vision
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBX
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdf
 
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
 
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...
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystem
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdf
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URL
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
 
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)
 
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 Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
 
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
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-py
 

[O'Reilly] HTML5 Design

  • 1. OREILLYMEDIA 2011 HTML5 D E S I G N ❦ Christopher Schmitt | http://twitter.com/@teleject
  • 2. THINGS ARE GOOD BETWEEN US, XHTML, RIGHT? I MEAN. WE GET ALONG WELL. AND WE BOTH LIKE STUFF. 2 3
  • 3. “IMAGINE YOU MADE A BROWSER THAT ONLY RENDERED SITES AUTHORED IN VALID HTML OR XHTML. HOW MUCH OF THE WEB WOULD YOUR USERS BE ABLE TO SEE? 1%? 0.1%? LESS?” MARK PILGRIM http://dev.opera.com/articles/view/mama-markup-validation-report/ 3
  • 4. 4
  • 5. “THE ATTEMPT TO GET THE WORLD TO SWITCH TO XML, INCLUDING QUOTES AROUND ATTRIBUTE VALUES AND SLASHES IN EMPTY TAGS AND NAMESPACES ALL AT ONCE DIDN’T WORK.” SIR TIM BERNERS-LEE 5
  • 9. 9
  • 11. 11
  • 12. 12
  • 13. 13
  • 14. BLUEPRINTS VS REALITY http://www.amazon.com/gp/product/0140139966 14
  • 15. “TAKE CARE OF THE LUXURIES AND THE NECESSITIES WILL TAKE CARE OF THEMSELVES.” FRANK LLOYD WRIGHT 15
  • 16. AGENDA ITEMS • What’s different from XHTML to HTML5 • Building with HTML5 (You are here.) • BasicSyntax, Progressive Markup, Accessibility, Geolocation, Audio/Video, Web Forms • Prizes! http://goo.gl/so6Am 16
  • 18. DOCTYPE 18
  • 19. HTML 4.01 Transitional DTD: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd"> XHTML 1.0 Transitional DTD: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 19
  • 20. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>AUSTIN, TX BBQ RESTAURANTS</title> </head> <body> <h1>....</h1> <p>...</p> </body> </html> 20
  • 21. EXERCISE • Go to HTML validator at http://validator.w3.org/#validate_by_input • Then type the following HTML (below) and hit validate: <!DOCTYPE html> <title>Small HTML5</title> <p>Hello world</p> 21
  • 22. 22
  • 23. 23
  • 26. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>AUSTIN, TX BBQ RESTAURANTS</title> </head> <body> <h1>....</h1> <p>...</p> </body> </html> http://shiflett.org/blog/2005/dec/googles-xss-vulnerability 26
  • 28. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>AUSTIN, TX BBQ RESTAURANTS</title> </head> <body> <h1>....</h1> <p>...</p> </body> </html> 28
  • 30. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="styles.css" /> <script src="scripts.js"></script> <title>AUSTIN, TX BBQ RESTAURANTS</title> </head> <body> <h1>....</h1> <p>...</p> </body> 30
  • 37. EVERYTHING THAT WAS BAD IN 1999 IS GOOD AGAIN 37
  • 38. RELEARNING SYNTAX • Attribute quotes “not really” required • UPPERCASE and lowercase HTML elements allowed • So is CaMeLcAse typing. • No more need to do self-closing tags like <IMG /> or <BR /> • Also, no more minimalization. So, this is okay: <dl compact> • Basically, everything that was bad from HTML4 in XHTML5 is good again. • Full circle, baby! One more time. 38
  • 39. BRINGING BACK <B> AND OTHER TAGS 39
  • 40. <p>My name is <em>Jane</em>, not John.</p> 40
  • 41. <p>Sally thought to herself, <i>when will IE6 die?</i></p> 41
  • 43. <p><b>Once upon a time,</b> there was a man who lost his mind.</p> 43
  • 44. <p><small>The owner of this blog is not responsible for mind blowage. Please consume at your own risk.</small></p> 44
  • 45. <abbr title="Accessible Rich Internet Applications">ARIA</ abbr> No more <acronym> 45
  • 46. THE COOLEST THING EVER ABOUT HTML5. (TO ME.) 46
  • 47. <h1> <a href="http://example.com"> HTML5, for Fun &amp; Profit </a> </h1> <a href="http://example.com"> <img src="logo.png" alt="HTML5 for Fun and Profit" /> </a> 47
  • 48. <a href="http://example.com"> <h1>HTML5, for Fun &amp; Profit</ h1> <img src="logo.png" alt="HTML5 for Fun and Profit" /> </a> 48
  • 50. <figure> ! <img src="chart.png" alt="Chart of increasing awesomeness" /> ! <figcaption>The increasing amount of awesome that this blog demonstrates.</figcaption> </figure> 50
  • 51. FIGURE • Not restricted to containing IMGs • Tables • Audio • Video • Charts • Code snippets 51
  • 53. 53
  • 54. <details> <summary>Upcoming Topics</summary> <p>For the new year, we have a great line up of articles!</p> <ul> <li>Understanding the Outline Algorithm</li> <li>When to Use ! <code>hgroup</code></li> <li>Machine Semantics with Microdata</li> </ul> </details> Only works in Chrome; all others - https://gist.github.com/370590 54
  • 56. 56
  • 58. 58
  • 59. <p>The results are in for your favorite fruit, and we have a tie for first place!</p> <ol> <li value="1">Bananas</li> <li value="1">Oranges</li> <li value="2">Apples</li> </ol> 59
  • 61. 61
  • 62. <div contenteditable> <p>Quick Fox Jumped Over the Lazy Dog</ p> </div> 62
  • 65. <h2 draggable>Block-Level Links</h2> http://html5doctor.com/native-drag-and-drop/ 65
  • 66. HTML5, MICROFORMATS & METADATA 66
  • 67. 67
  • 68. “Designed for humans first and machines second, microformats are a set of simple, open data formats built upon existing and widely adopted standards.” 68
  • 69. “HTML design patterns for common chunks of content that web builders need to markup anyway.” “Oh, and Google understands them, too.” 69
  • 70. 70
  • 71. REPLACING ABBR • <ABBR> element is used by screenreaders to expand abbreviations like “lbs” or “NCAAP” • However unintended consequences occurred trying to workaround browser bugs for other HTML elements • What happens when a screenreaders text like this: • “Let’s go to <abbr class="geo" title="30.300474;-97.747247">Austin, TX</abbr>” http://www.brucelawson.co.uk/2009/microformats-accessibility-html-5-again/ 71
  • 72. <div class="vevent"> <a class="url" href="http://www.web2con.com/">http:// www.web2con.com</a> <span class="summary">Web 2.0 Conference</span>: <abbr class="dtstart" title="2007-10-05">October 5</abbr>- <abbr class="dtend" title="2007-10-20">20</ abbr>, at the <span class="location">Argent Hotel, San Francisco, CA</span> </div> 72
  • 73. <div class="vevent"> <a class="url" href="http://www.web2con.com/">http:// www.web2con.com</a> <span class="summary">Web 2.0 Conference</span>: <time class="dtstart" datetime="2007-10-05">October 5</time>- <time class="dtend" datetime="2007-10-19">19</time>, at the <span class="location">Argent Hotel, San Francisco, CA</span> </div> http://www.brucelawson.co.uk/2009/microformats-accessibility-html-5-again/ 73
  • 74. POSTSCRIPT • <ABBR> issue has ben resolved with new pattern (dropping <ABBR> altogether): http://microformats.org/wiki/value-class-pattern • <p>Let’s go to <span class="geo">51° 30' 48.45", -0° 8' 53.23" (<span class="value">51.513458;-0.14812</ span>)</span> </p> 74
  • 75. DATA-ATTRIBUTE • You can set data-attribute to any element you want. • Set meta information that can be utilized by JavaScript or CSS later on. <img src=“john-smith.jpg” data-imgtype=“mugshot” alt=“John Smith’s mugshot”> 75
  • 78. DIV ID=“header” DIV ID=“nav” DIV ID=“section” DIV ID=“sidecolumn” DIV ID=“article” DIV ID=“footer” 78
  • 79. <HEADER> <NAV> <SECTION> <ASIDE> <ARTICLE> <FOOTER> 79
  • 80. ARTICLE VS ASIDE VS SECTION • Marc Grabsanki says: • Article is unique content to that document • Section is a thematic grouping of content, typically with a heading - pretty generic • Aside is content that is tangentially related, like a sidebar div has no meaning whatsoever, so there is nothing semantic about divs 80
  • 81. ARTICLE VS ASIDE VS SECTION • Bruce Lawson says: • Aside is for something tangentially related to its parent element. Or, if a sibling to the main content, it can be used to make sidebars of navigation, recent comments, colophons, author bios etc. • Article is a discrete piece of content that could be syndicated - a blog post, a news item, a comment, a widget • Section can also contain articles. for example, you could have a page with a <section> full of entertainment articles, and a section of political news etc. 81
  • 82. ARTICLE VS ASIDE VS SECTION • Molly Holzschlag, Opera standards evangelist, says: • <section> clarifies <div> • <article> 'replaces' <div id="content"> • <aside> 'replaces' <div id="sidebar"> • Chris Mills, Opera browser employee, plays it safe: http://boblet.tumblr.com/post/130610820/html5-structure1 82
  • 83. WHAT ABOUT THE DIVS? • Marc Grabanski, jQuery and HTML5 guy: • “div has no meaning whatsoever, so there is nothing semantic about divs” • Bruce Lawson, Opera browser employee: • “Like all semantic questions, it depends on the context. If your only reason for wanting an element is to group stuff for styling, it's a div.” 83
  • 84. <body> <header> <h1>Heading </h1> </header> <nav> <h3>Site Navigation</h3> <ul>...</ul>! </nav> <section> <article> <h3>Weblog Entry</h3> </article> </section>! <aside> <p>You are reading "Chocolate Rain", an entry posted on <time datetime="2009-03-05">5 March, 2009</time>, to the <a href="#">Misty collection</a>. See other posts in <a href="#">this collection</a>.</p> </aside> <footer> <p>...</p> </footer> </body> 84
  • 85. 85
  • 86. 86
  • 88. 88
  • 90. 90
  • 93. <html lang="en" class=" canvas canvastext geolocation rgba hsla multiplebgs borderimage borderradius boxshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions video audio localstorage sessionstorage webworkers applicationcache fontface"> 93
  • 94. .audio #error { display: none; } .no-audio #error-box { background-color: #ffffcc; padding: 1px 10px; color: #000; border: 5px solid #ffff66; } CSS Feature Detection 94
  • 95. <script> if (Modernizr.audio) { function playPause() { var myAudio = document.getElementsByTagName('audio') [0]; if(myAudio.paused) myAudio.play(); else myAudio.pause(); } } </script> JS Feature Detection 95
  • 96. Modernizr.load({ test: Modernizr.geolocation, yep : 'geo.js', nope: 'geo-polyfill.js' }); JS Feature Detection 96
  • 97. 97
  • 98. Pick and Choose Features to Detect 98
  • 100. HTML5 AUDIO 100
  • 101. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Basic HTML5 Web Document Structure</title> ! </head> ! <body> <h1>Video Example</h1> <audio src="html5test.ogg" autoplay controls> ! <a href="html5test.ogg">Download audio</a> </audio> ! </body> </html> 101
  • 103. HTML5 AUDIO • AUDIO element attributes are SRC, AUTOBUFFER, AUTOPLAY, LOOP, CONTROLS • If you don’t have CONTROL, player becomes transparent 103
  • 104. HTML5 AUDIO SUPPORT FF3.5+ S4+ Ch3+ Op10.5+ IE9+ Ogg Y Y Y Vorbis MP3 Y Y Y WAV Y Y Y 104
  • 105. SUPPORTING AUDIO <audio controls autobuffer> <source src="html5audio.mp3" /> <source src="html5audio.ogg" /> <!-- include Adobe Flash player EMBED and OBJECT code here --> </audio> Use Flash for older versions of IE 105
  • 106. SUPPORTING AUDIO • If you do insert audio, setting the file to autoplay is not recommended, as it interferes with the experience for web surfers using screen readers. • Don’t use WAV file type. • Better to ship a compact disc to the user instead. 106
  • 107. HTML5 VIDEO 107
  • 108. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Basic HTML5 Web Document Structure</title> ! </head> ! <body> <h1>Video Example</h1> <object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/4GuKSqAg5xI&hl=en&fs=1"></ param><param name="allowFullScreen" value="true"></ param><param name="allowscriptaccess" value="always"></ param><embed src="http://www.youtube.com/v/ 4GuKSqAg5xI&hl=en&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed></object> ! </body> </html> 108
  • 109. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Basic HTML5 Web Document Structure</title> ! </head> ! <body> <h1>Video Example</h1> <video src="html5test.ogg" ! width="320" height="240" controls ! poster="html5testvideoposter.jpg"> ! <a href="html5testvideo.ogg">Download movie</a> </video> ! </body> </html> 109
  • 110. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Basic HTML5 Web Document Structure</title> ! </head> ! <body> <h1>Video Example</h1> <video src="html5test.ogg" ! width="320" height="240" controls ! poster="html5testvideoposter.jpg"> DEMO ! <a href="html5testvideo.ogg">Download movie</a> </video> ! </body> </html> 110
  • 111. HTML5 VIDEO • WIDTH and HEIGHT should be required, IMO, but movie plays anyway based on the values in the video file itself. • Video formats may have their own posterframe. The browser should use that by default unless overridden by valid POSTER attribute value. • Text can be included within VIDEO element to allow user to download video if their browser doesn’t support. • If you want to give users control, use CONTROL attribute. 111
  • 112. HTML5 VIDEO • Video can start automatically if using the AUTOPLAY=”1” attribute and value. • Spec provides for LOOP, AUTOBUFFER which also take a value of O or 1. • Codecs support... 112
  • 113. HTML5 VIDEO “It would be helpful for interoperability if all browsers could support the same codecs. However, there are no known codecs that satisfy all the current players: we need a codec that is known to not require per-unit or per-distributor licensing, that is compatible with the open source development model, that is of sufficient quality as to be usable, and that is not an additional submarine patent risk for large companies. This is an ongoing issue and this section will be updated once more information is available.” - http://www.whatwg.org/specs/web-apps/current-work/#video-and- audio-codecs-for-video-elements 113
  • 114. CODECS • Ogg (or “Vorbis”) • No need to worry about patents • H.264 • Created by the MPEG group • If you have blu-ray disc player, you are using it • WebM • A wrapper for the VP8 video and Ogg audio streams 114
  • 115. VIDEO CODEC SUPPORT FF3.6+ S Ch5+ Op10.6+ IE9+ Ogg Y Y Y H.264 Y Y* Y WebM (W4.02+) (Ch6+) Y 115
  • 116. LESSONS LEARNED • To get most <video> support, you need 2 video files: H.264 and .OGG. • iOS Devices can handle MP4 (H.264) • Safari, IE, Flash can deliver MP4 (H.264) • Firefox, Opera can deliver .OGG • Then hit them with FLV video, which supports H.264 http://camendesign.com/code/video_for_everybody 116
  • 120. LESSONS LEARNED • Use VLC or Firefogg to encode common movie files types to OGG • H.264 encoding? Use Handbrake • If you are hot to trot for HTML5 Video, like, right now, check out Mark Pilgrim’s tutorial: http://diveintohtml5.org/video.html • Good primer: http://dev.opera.com/articles/view/introduction-html5-video/ 120
  • 121. 121
  • 122. 122
  • 123. ! <script> ! function playPause() { ! var myVideo = document.getElementsByTagName('video')[0]; ! if (myVideo.paused) ! myVideo.play(); ! else ! myVideo.pause(); ! } ! </script> 123
  • 124. <input type=button onclick="playPause()" value="Play/Pause" tabindex="0" /> 124
  • 125. HTML5 VIDEO & CAPTIONS 125
  • 126. For students with LD and struggling or beginning readers, the use of captions or subtitles can lead to increases in: •reading speed, •word knowledge, •decoding, •vocabulary acquisition, •word recognition, •reading comprehension, and •oral reading rates. 126
  • 127. [Captioning] has been shown to improve reading skills among adults who are non- readers. http://www.ldonline.org/article/35793 127
  • 128. 128
  • 132. 132
  • 133. 133
  • 134. SRT FILES • SRT files are text files used in video playback; therefore, they do not contain any video data. • Text file containing subtitles used by various video playback programs; supported by DivX, DVD, and other video formats; • Includesthe time each subtitle should be displayed followed by the text of the subtitles. • Subtitlefiles are often named according to the language of the subtitles, i.e. "moviename-eng.srt" for English and "moviename-ger.srt" for German subtitles. 134
  • 135. TRANSCRIPT-EN.SRT 1 00:00:00,000 --> 00:00:6,000 Allow me to introduce myself My name is Tay It's T-A-Y, T-A-Y to the Z 2 00:00:06,000 --> 00:00:9,000 This is the web and it's gonna murder your TV It was Chocolate Rain 3 00:00:09,500 --> 00:00:11,500 Wrote a song about that history Chocolate Rain 4 00:00:12,000 --> 00:00:15,000 Now I'm paid a hefty hefty fee Chocolate Rain 135
  • 137.  <video id="myVid" width="400" src="cherry-chocolate- rain.ogv" autobuffer controls>   <track src="transcript-en.srt" type="text/srt" language="en" role="textaudesc"></track>   <track src="transcript-gr.srt" type="text/srt" language="gr" role="textaudesc"></track>   <p>Alternative text...</p> </video> 137
  • 138.  <video id="myVid" width="400" src="cherry-chocolate-rain.ogv" autobuffer controls>   <track src="transcript-en.srt" type="text/srt" language="en" role="textaudesc"></track>   <track src="transcript-gr.srt" type="text/srt" language="gr" role="textaudesc"></track>   <p>Alternative text goes here.</p> </video> 138
  • 141. 141
  • 142. 142
  • 143. 143
  • 144. 144
  • 145. 145
  • 146. if (navigator.geolocation) { ! navigator.geolocation.getCurrentPosition(show_coordinat es); ! function show_coordinates(position){ ! alert('Your latitude is ' + position.coords.latitude + ' ' + ! 'and your longitude is ' + position.coords.longitude + '.'); ! } } Modernizr.load({ test: Modernizr.geolocat ...or use Modernizr! yep : 'geo.js', nope: 'geo-polyfill.js' 146 });
  • 148. THAT’S GREAT, BUT •I don’t read longitude and latitude. • More importantly, my clients or site visitors don’t comprehend longitude and latitude. • And I don’t love the code! 148
  • 152. STEP #1 Muck-N-Dave's Texas BBQ 1603 South Congress Austin, TX 78704 USA 512-590-3387 Old School BBQ and Grill 2326 E Cesar Chavez St Austin, TX, 78702 USA 512-974-6830 The Shed BBQ Rolling Joint 1816 E 6th Street. Austin, TX, 78702 USA 152
  • 153. STEP #2 • Convert addresses to hCard microformats http://microformats.org/code/hcard/creator 153
  • 154. <div class="vcard"> ! <a class="url fn n" href="http://www.theqcard.com/"> ! <span class="given-name">Jane</span> ! <span class="additional-name"></span> ! <span class="family-name">Smith</span> ! </a> ! <div class="org">Old School BBQ and Grill</div> ! <div class="adr"> ! ! <div class="street-address">2907 E MLK Jr Blvd.</div> ! ! <span class="locality">Austin</span>, ! ! <span class="region">TX</span>, ! ! <span class="postal-code">78702</span> ! ! <span class="country-name">USA</span> ! </div> ! <div class="tel">512-974-6830</div> ! <div class="note distance"> ! </div> http://microformats.org/code/hcard/creator </div> 154
  • 155. STEP #3 hCard hCard hCard hCard 155
  • 156. STEP #3 <ol> <li> hCard </li> <li> hCard </li> <li> hCard </li> <li> hCard 156 </li>
  • 157. STEP #4 <div id="locations"> ! <ol> ! ! <li><!-- Microformats address 1 --></li> ! ! <li><!-- Microformats address 2 --></li> ! ! <li><!-- Microformats address 3 --></li> ! ! <li><!-- Microformats address 4 --></li> ! ! ... ! </ol> </div> 157
  • 159. STEP #6 <script type="text/javascript" src="https:// ajax.googleapis.com/ajax/libs/jquery/1.6.4/ jquery.min.js"></script> <script type="text/javascript" src="js/jquery- location.js"></script> 159
  • 161. STEP #8 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/ jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript" src="js/jquery-location.1.0.0.js"></script> <script type="text/javascript"> ! $(document).ready(function() ! { ! ! $('#locations2').location({ ! ! 'apiKey' : 'YOUR_API_KEY_HERE' ! ! });! ! }); </script> 161
  • 164. <div class="vcard"> ! <a class="url fn n" href="http://www.theqcard.com/"> ! <span class="given-name">Jane</span> ! <span class="additional-name"></span> ! <span class="family-name">Smith</span> ! </a> ! <div class="org">Old School BBQ and Grill</div> ! <div class="adr" data-longitude="-97.723410" data- latitude="30.262098"> ! ! <div class="street-address">2907 E MLK Jr Blvd.</div> ! ! <span class="locality">Austin</span>, ! ! <span class="region">TX</span>, ! ! <span class="postal-code">78702</span> ! ! <span class="country-name">USA</span> ! </div> ! <div class="tel">512-974-6830</div> ! <div class="note distance"> ! </div> http://geocoder.us/ </div> 164
  • 165. $('#locations').location( ! { ! ! apiKey: 'YOUR_API_KEY_HERE', ! ! geodata: '#geodata', // site visitor’s location ! ! notification: '.notification', // progress indicator ! ! recheck: '.recheck', ! ! distance: '.distance', //where the distance appears ! ! geoAdr: '.geoAdr', // longitude and latitude ! ! listElement: 'li' // different listing element? ! } ); 165
  • 166. WEB FORMS 166
  • 167. 167
  • 169. 169
  • 170. <form> <fieldset> <legend>Contact Information</legend> <p><label>E-mail address <input type="email" name="email"> </label></p> <p><label>Web site <input type="url" name="website"> </label></p> <p><label>Telephone number <input type="tel" name="phone"> </label></p> </fieldset> <p><button type="submit">Submit</button> </p> </form> 170
  • 171. 171
  • 172. <form> <p> <label>Appointment Date and Time <input type="datetime" name="dateAndTime"></label> </p> </form> 172
  • 173. 173
  • 174. <form> <fieldset> <legend>Appointment Request</legend> <p><label>Date <input type="date" name="date"></label></p> <p><label>Time <input type="time" name="time"></label></p> </fieldset> <p><button type="submit">Submit</button></ p> </form> Support in Chrome 10+, Safari 4+, Opera 9+, iOS, Android 174
  • 175. 175
  • 176. <form> <p><label>Quantity <input type="number" name="quantity"></label></p> <p><button type="submit">Submit</button></ p> </form> Support in Chrome 10+, Safari 4+, Opera 9+, iOS, Android 176
  • 177. 177
  • 178. <form> <p><label>Quantity (must order in pairs of 2) <input type="number" name="quantity" min="2" max="20" step="2"></label></p> <p><button type="submit">Submit</button></ p> </form> 178
  • 179. 179
  • 180. <form> <p><label>Volume <input type="range" name="volume" min="0" max="10" step=".5" value="5"></label></p> </form> 180
  • 181. 181
  • 182. <form> <p><label>Background color <input type="color" name="bg"></label></p> <p><label>Foreground color <input type="color" name="fg"></label></p> <p><button type="submit">Submit</button></ p> </form> 182
  • 183. 183
  • 184. <form> <p><label>Donation amount <input type="text" name="donation" list="donations"></label></p> <datalist id="donations"> <option value="10.00">10.00</option> <option value="25.00">25.00</option> <option value="50.00">50.00</option> </datalist> <p><button type="submit">Submit</button></ p> </form> Support in Firefox 4+, Opera 10+ 184
  • 185. 185
  • 186. <form> <p><label for="donation">Donation amount</ label> <datalist id="donations"> <select name="donation"><option></option> <option value="10.00">10.00</option> <option value="25.00">25.00</option> <option value="50.00">50.00</option> <option>Other</option> </select> If other, please specify: </datalist> <input type="text" id="donation" name="donation" list="donations"></p> http://adactio.com/journal/4272/ <p><button type="submit">Submit</button></ p> </form> 186
  • 187. 187
  • 188. <form> <fieldset> <legend>Login</legend> <p><label>Username <input type="text" name="username" required></label></p> <p><label>Password <input type="password" name="pwd" required></label></p> </fieldset> <p><button type="submit">Submit</button></ p> </form> IE 10+, FF 4+, Chrome 10+, Safari 5+, Opera 10+, iOS, Andriod 188
  • 189. 189
  • 190. <p><label>E-mail address <input type="email" name="email" placeholder="user@domain.com"></label></p> <p><label>Web site <input type="url" name="website" placeholder="http:// www.domain.com/"></label></p> <p><label>Telephone number <input type="tel" name="phone" placeholder="123-123-1234"></label></p> 190
  • 191. <form> <p><label>Search <input type="search" name="query" autofocus></label></p> <p><button type="submit">Submit</button></ p> </form> 191
  • 192. <form> <fieldset> <legend>Login</legend> <p><label>Username <input type="text" name="username"></label></p> <p><label>Password <input type="password" name="pwd" autocomplete="off"></label></p> </fieldset> <p><button type="submit">Submit</button></ p> </form> 192
  • 193. 193
  • 194. <form> <p><label>Telephone number <input type="tel" name="phone" pattern="[2-9][0-9]{2}-[0-9]{3}-[0-9]{4}" title="North American format: XXX-XXX- XXXX"></label></p> <p><button type="submit">Submit</button></ p> </form> 194
  • 195. HTML5 CANVAS 195
  • 196. <canvas id="myCanvas" width="300" height="150"> Fallback content, in case the browser does not support Canvas. </canvas> 196
  • 197. <script type="text/javascript"><!-- window.addEventListener('load', function () { // Get the canvas element. var elem = document.getElementById('myCanvas'); if (!elem || !elem.getContext) { return; } // Get the canvas 2d context. var context = elem.getContext('2d'); if (!context) { return; } // Now you are done! Let's draw a blue rectangle. context.fillStyle = '#00f'; context.fillRect(0, 0, 150, 100); }, false); // --></script> 197
  • 198. 198
  • 199. // Get the canvas element. var elem = document.getElementById('myCanvas'); if (!elem || !elem.getContext) { return; } // Get the canvas 2d context. var context = elem.getContext('2d'); if (!context) { return; } context.fillStyle = '#00f'; context.strokeStyle = '#f00'; context.lineWidth = 4; // Draw a right triangle. context.beginPath(); context.moveTo(10, 10); context.lineTo(100, 10); context.lineTo(10, 100); context.lineTo(10, 10); context.fill(); context.stroke(); context.closePath(); }, false); 199
  • 200. 200
  • 201. // Get the canvas element. var elem = document.getElementById('myCanvas'); if (!elem || !elem.getContext) { return; } // Get the canvas 2d context. var context = elem.getContext('2d'); if (!context) { return; } context.fillStyle = '#00f'; context.strokeStyle = '#f00'; context.lineWidth = 4; // Draw a right triangle. context.beginPath(); context.moveTo(10, 10); context.lineTo(100, 10); context.lineTo(10, 100); context.lineTo(10, 10); context.fill(); context.stroke(); context.closePath(); }, false); 201
  • 203. BUT IS IT ACCESSIBLE? 203
  • 204. ACCESSIBLE CANVAS ISSUES • Setting user interface elements in canvas • Setting images in canvas • Setting text in canvas http://www.paciellogroup.com/blog/?p=362 204
  • 205. PROGRESSIVE ENHANCEMENT & CANVAS “Progressive enhancement is a strategy for web design that emphasizes accessibility, semantic HTML markup, and external style sheet and scripting technologies.” http://en.wikipedia.org/wiki/Progressive_enhancement 205
  • 208. • Take mugshot • Make it black and white • Compress with ImagOptim http://imageoptim.pornel.net/ 208
  • 209. <img class="mugshot filter-tint" data-pb-tint- opacity="0.2" data-pb-tint-colour="#517777" src="filename.png" /> 209
  • 210. box-shadow: 1px 1px 4px #fff, 2px 2px 4px #fff, 3px 3px 2px #333; border-radius: 300px; 210
  • 213. <table > ! <caption>My Push Ups</caption> ! <thead> <tr> ! <td></td> ! <th>M</th> ! <th>Tu</th> ! <th>W</th> ! <th>Th</th> ! <th>F</th> ! <th>Sa</th> </tr> ! </thead> ! <tbody> <tr> ! <th>Chris</th> ! <td>56</td> ! <td>30</td> ! <td>50</td> ! <td>0</td> ! <td>45</td> ! <td>120</td> ! <td>0</td> </tr> ! </tbody> </table> 213
  • 214. 214
  • 215. <link type="text/css" rel="stylesheet" href="visualize.jQuery.css"> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/ jquery/1.3.2/jquery.min.js"></script> <!--[if IE]><script type="text/javascript" src="excanvas.compiled.js"></ script><![endif]--> <script type="text/javascript" src="visualize.jQuery.js"></script> <script type="text/javascript"> $(function(){ ! $('table').addClass('accessHide'); ! $('table').visualize({type: 'line', colors: ['#fff']}); ! }); </script> 215
  • 216. <link type="text/css" rel="stylesheet" href="visualize.jQuery.css"/> <script type="text/javascript" src="http:// ajax.googleapis.com/ajax/libs/jquery/1.3.2/ jquery.min.js"></script> <!--[if IE]><script type="text/javascript" src="excanvas.compiled.js"></ script><![endif]--> <script type="text/javascript" src="visualize.jQuery.js"></script> <script type="text/javascript"> $(function(){ ! $('table').addClass('accessHide'); ! $('table').visualize({type: 'line', colors: ['#fff']}); ! }); </script> 216
  • 217. <link type="text/css" rel="stylesheet" href="visualize.jQuery.css"/> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/ jquery/1.3.2/jquery.min.js"></script> <!--[if IE]><script type="text/javascript" src="excanvas.compiled.js"></script><![endif]--> <script type="text/javascript" src="visualize.jQuery.js"></script> <script type="text/javascript"> $(function(){ ! $('table').addClass('accessHide'); ! $('table').visualize({type: 'line', colors: ['#fff']}); ! }); </script> 217
  • 219. <link type="text/css" rel="stylesheet" href="visualize.jQuery.css"/> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/ jquery/1.3.2/jquery.min.js"></script> <!--[if IE]><script type="text/javascript" src="excanvas.compiled.js"></ script><![endif]--> <script type="text/javascript" src="visualize.jQuery.js"></script> <script type="text/javascript"> $(function(){ ! $('table').addClass('accessHide'); ! $('table').visualize({type: 'line', colors: ['#fff']}); ! }); </script> 219
  • 220. <link type="text/css" rel="stylesheet" href="visualize.jQuery.css"/> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/ jquery/1.3.2/jquery.min.js"></script> <!--[if IE]><script type="text/javascript" src="excanvas.compiled.js"></ script><![endif]--> <script type="text/javascript" src="visualize.jQuery.js"></script> <script type="text/javascript"> $(function(){ ! $('table').addClass('accessHide'); ! $('table').visualize({type: 'line', colors: ['#fff']}); ! }); </script> 220
  • 221. table.accessHide { position: absolute; left: -999999px; } table { height: 100px; width: 250px;} 221
  • 222. <link type="text/css" rel="stylesheet" href="visualize.jQuery.css"/> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/ jquery/1.3.2/jquery.min.js"></script> <!--[if IE]><script type="text/javascript" src="excanvas.compiled.js"></ script><![endif]--> <script type="text/javascript" src="visualize.jQuery.js"></script> <script type="text/javascript"> $(function(){ ! $('table').addClass('accessHide'); ! $('table').visualize({type: 'line', colors: ['#fff']}); ! }); </script> 222
  • 223. 223
  • 225. XHTML, ...I THINK I WANT TO SEE ANOTHER MARKUP SPEC. 225
  • 226. RECOMMENDED Design for Web Applications by Matt May and Wendy • Universal Chisholm • Bulletproof Ajax by Jeremy Keith • Designing with Progressive Enhancement by Filament Group • Microformats Made Simple by Emily Lewis • How Buildings Learn by Stewart Brand • HTML5 Cookbook by a whole bunch of people! 226
  • 227. UPCOMING EVENTS • AIGA In Control Conference on Feb. 20-21st. •2 days, 1 track • HTML5, CSS3, jQuery, Mobile Design, Content Strategy, and much more • Orlando, FL • http://2012.incontrolconference.com/ 227
  • 228. THANK YOU! Christopher Schmitt schmitt@heatvision.com http://twitter.com/teleject 228