Automating Google Workspace (GWS) & more with Apps Script
[HEWEBAR 2012] Beyond Desktop Browsing (HTML5)
1. #HEWEBAR 2012
BEYOND
D E S K T O P
BROWSING
❦
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
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
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.)
• Semantics, HTML5 Forms, Canvas, Accessible Graphs
• Adaptive Images, Problem with Retina
• Prizes! http://goo.gl/so6Am
16
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
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
25. “Designed for humans first and
machines second,
microformats are a set of simple,
open data formats built upon
existing and widely
adopted standards.”
25
26. “HTML design patterns for common
chunks of content that web builders need
to markup anyway.”
“Oh, and Google understands them, too.”
26
28. 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/
28
29. <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>
29
30. <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/
30
31. 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>
31
32. 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”>
32
37. 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
37
38. 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.
38
39. 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
39
40. 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.”
40
41. <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>
41
60. HTML5 AUDIO
• AUDIO element attributes are SRC, AUTOBUFFER, AUTOPLAY,
LOOP, CONTROLS
• If you don’t have CONTROL, player becomes transparent
60
61. HTML5 AUDIO SUPPORT
FF3.5+ S4+ Ch3+ Op10.5+ IE9+
Ogg
Y Y Y
Vorbis
MP3 Y Y Y
WAV Y Y Y
61
62. 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
62
63. 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.
63
68. 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.
68
69. 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...
69
70. 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
70
71. 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
71
72. VIDEO CODEC SUPPORT
FF3.6+ S Ch5+ Op10.6+ IE9+
Ogg Y Y Y
H.264 Y Y* Y
WebM (W4.02+) (Ch6+) Y
72
73. 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
73
77. 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/
77
85. 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.
85
86. 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
86
121. <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>
121
128. ACCESSIBLE CANVAS ISSUES
• Setting user interface elements in canvas
• Setting images in canvas
• Setting text in canvas
http://www.paciellogroup.com/blog/?p=362
128
129. 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
129
150. 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!
150
151. THANK YOU!
Christopher Schmitt
schmitt@heatvision.com
http://twitter.com/teleject
151