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.”
-TIM BERNERS-LEE
32. LESSONS LEARNED
• New HTML5 elements are treated as inline elements.
• Need to use CSS property-value display:block
• IE6
and IE7 need to be nudged to recognize HTML elements in
order to have CSS be applied
• document.createElement(‘html5element’);
• Dean Edwards IE7 script doesn’t help
• There isn’t a jQuery plugin to make it “easier”
33. LESSONS LEARNED
• For Firefox 2 and Camino (Gecko 1.9)
• HTML5 pages need to be served as XHTML
• Content-Type: application/xhtml+xml;
• ...Let the irony set for a bit.
38. HTML5 AUDIO
• AUDIO element attributes are SRC, AUTOBUFFER, AUTOPLAY,
LOOP, CONTROLS
• If you don’t have CONTROL, player becomes transparent
• Only able to play OGG format in nightly build of Firefox.
• Could not get player to use MP3 audio
39. AUDIO FILE SUPPORT
Chrome 3
Firefox 3.5 Safari 4 Opera 10
Beta
Ogg Vorbis Y Y
MP3 Y Y
WAV Y Y Y
40. <!DOCTYPE HTML>
<HTML LANG="EN">
<HEAD>
<META CHARSET="UTF-8">
<TITLE>BASIC HTML5 WEB DOCUMENT STRUCTURE</TITLE>
</HEAD>
<BODY>
<H1>VIDEO EXAMPLE</H1>
<AUDIO CONTROLS AUTOBUFFER>
<SOURCE SRC="HTML5AUDIO.OGG" />
<SOURCE SRC="HTML5AUDIO.MP3" />
<!-- INCLUDE ADOBE FLASH PLAYER EMBED AND OBJECT
CODE HERE -->
</AUDIO>
</BODY>
</HTML>
44. VIDEO DEMOS
• Personal demo
• http://tinyvid.tv/
• http://www.mozbox.org/jdll/video.xhtml
45. 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.
• Alternative text is placed inside VIDEO element.
• If you want to give users control, use CONTROL attribute.
46. HTML5 VIDEO
• Video can start automatically if using the AUTOPLAY=”1”
attribute and value.
• Specprovides for LOOP, AUTOBUFFER which also take a value of
O or 1.
• Codecs support...
47. 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
48. VIDEO CODEC SUPPORT
Firefox 3.5 Safari iPhone Android Chrome 3
Theora
+Vorbis Y Y
+Ogg
H.264
+AAC Y Y Y
+MP4
http://diveintohtml5.org/video.html
49. LESSONS LEARNED
• Works in nightly builds of Firefox (3.2b) and only for OGG
format.
• Other browsers that said they supported the VIDEO format I
could not get to work on my machines.
• Used VLC to encode common movie files types to OGG
• Toget cross-browser, you will need to encode in more than one
file format. Is it really needed?
• People really, really, really want this to work.
51. REPLACING ABBR
• ABBRis used by screenreaders to expand abbreviations like “lbs”
or “NCAAP”
• Howeverunintended consequences occurred trying to
workaround browser bugs for other HTML elements
• What happens when a screenreaders text like this:
• “Let’sgo to <abbr class="geo"
title="30.300474;-97.747247">Austin, TX</
abbr>”
http://www.brucelawson.co.uk/2009/microformats-accessibility-html-5-again/
52. REPLACING ABBR
• ABBRis used by screenreaders to expand abbreviations like “lbs”
or “NCAAP”
• Howeverunintended consequences occurred trying to
workaround browser bugs for other HTML elements
• What happens when a screenreaders text like this:
• “Let’sgo to <abbr class="geo"
title="30.300474;-97.747247">Austin, TX</
abbr>”
http://www.brucelawson.co.uk/2009/microformats-accessibility-html-5-again/
53. <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">19</ABBR>,
AT THE <SPAN CLASS="LOCATION">ARGENT HOTEL, SAN FRANCISCO, CA</SPAN>
</DIV>
54. <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-20">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/
57. <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>
58.
59. // 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);
60.
61. // 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);
75. LESSONS LEARNED
• Proprietary CSS extensions in Firefox and Safari.
• JavaScriptsolution through a jQuery plugin:
http://welcome.totheinter.net/2008/07/22/multi-column-layout-
with-css-and-jquery/
79. LESSONS LEARNED
• Supported in Firefox 1.5+, Opera 9+, Safari 1.2+ and Chrome.
• IE5.5+ requires the use of its own alpha filter in order for the
effect to be cross-browser.
•A drawback to using the opacity filter is that the value is inherited:
• If a parent element is set to be 10% transparent, the child
elements’ transparency is also going to be 10%.
• Watch out for legibility issues within the Web page.
84. LESSONS LEARNED
• Firefox 3+, Opera 10+, and Safari support RGBA
• Requires another background-color property for cross-browser
support.
• IE Support!
86. LESSONS LEARNED
• First
step is to convert the RGB value of the color to
hexadecimal. In this example, rgb(255,255,0) converts to #FFFF00.
• Next, convert the alpha transparency value to hexadecimal
string . In this example, the value is 66.
• E.g., alpha value of .3 equals 4D in hexadecimal values
• Then assemble the hexadecimal value for transparency and the
color together in one string, starting with the transparency:
#66FFFF00.
This is going to prove to you I don't know anything about Flash and how important I think it is.
Are you kidding me?
What is XHTML is a recasting of HTML 4 as XML? But is XML helping us out?
As I saw it, the goal of XHTML was XML and that there wouldn&#x2019;t need to be a need for an upgrade to HTML4. However, there comes a point when what&#x2019;s planned doesn&#x2019;t turned out to be true. Like the architect&#x2019;s blueprint--it can never foresee the needs of the occupants 40-50 years from now. Therefore the owners adapt the house to suit their needs.
Even with Flash and Silverlight, HTML and XHTML has its limitations. We need new elements to mark up content in a true semantic manner.
Microformats tries to solve or overcome some of these limitations, but co-opting HTML elements and attributes is a strategy that can only be squeezed to far even with the best of intentions.
BBC removed the hCalendar from it&#x2019;s site due to for-machine only code reading out and keeping other industries that need ABBR tag like travel.
We have Web sites that offer software like applications, we have Web sites that sport audio and video like it&#x2019;s candy machine. Like chocolate rain.
It&#x2019;s Pretty easy to get bored with international, ALMOST- instant communication.
(ONE CAN ONLY READ SO MUCH WIKIPEDIA.)
As Frank Lloyd Wright once said... you take care of the stuff that will make your life easier, everything else will work itself out. What does this mean? It means we have basic Web formatting of text down and we&#x2019;ve bought into this theory that this ex
So what new things will we get out of HTML5?
So what new things will we get out of HTML5?
Pretty simple DOCTYPE; I have to copy and paste XHTML Doctypes cause I don&#x2019;t remember them. And a character set, pretty common.
Pretty simple DOCTYPE; I have to copy and paste XHTML Doctypes cause I don&#x2019;t remember them. And a character set, pretty common.
The W3C validator has a beta!
A common setup for a page layout. Use of DIVs and pretty typical values for ID attributes.
With HTML5, there&#x2019;s an acceptance of these types of Web document structures. HTML5 has elements for HEADER, for ARTICLE, for SECTIOn, for ASIDE, for FOOTER.
Using Opera as our testing browser, we can see a basic layout with CSS added for color works when applied to our new HTML5 elements.
However, in IE6 (and IE7, not pictured) the browser doesn&#x2019;t recognize these values. With IE taking up a huge market share of the browser market, it&#x2019;s important that we at least an attempt to style the page.
WIth these events, the browser recognizes the elements and the CSS properties can be applied. Tried the Dean Edwards IE7 script and it doesn&#x2019;t work.
With HTML5, there&#x2019;s an acceptance of these types of Web document structures. HTML5 has elements for HEADER, for ARTICLE, for SECTIOn, for ASIDE, for FOOTER.
these are the two main lessons I learned; granted I didn&#x2019;t push the envelope by any stretch of the imagination. I feel based on my initial working there could be some problem with CSS inheritance, but you might be able to force that through
these are the two main lessons I learned; granted I didn&#x2019;t push the envelope by any stretch of the imagination. I feel based on my initial working there could be some problem with CSS inheritance, but you might be able to force that through
these are the two main lessons I learned; granted I didn&#x2019;t push the envelope by any stretch of the imagination. I feel based on my initial working there could be some problem with CSS inheritance, but you might be able to force that through
Very straightforward method for including video. Notice width and height attribute, poster attribute, and alternative text. PULL UP VIDEO DEMO!!
Show demo in mindield
Also, the code is pretty much the HTML5 video element without height and width attributes
Cross browser version.
Basic Flash HTML to include a flash movie; straight from YouTube
Very straightforward method for including video. Notice width and height attribute, poster attribute, and alternative text. PULL UP VIDEO DEMO!!
Originally spec said for browsers venders to use the Ogg Theora video and Orr Vorbis audio and the Ogg Container format, but vendors like Apple rejected on the grounds of submarine patents. FYI, This text is all in red when you get to the page.
I felt that the video support is a lot like SVG. There is a lot more potential for support for video since everyone can see the value of HTML5 videos--but it needs to make a case for a clean break from the infrastructure that companies have in Flash.
I want to touch base with the microformats issue and the BBC. If you recall, it centered on the ABBR element being a bit overused.
Click forward to hear audio
HTML4 based hCalendar microformat from spec
Replace with TIME element and use the DATETIME attribute
Canvas is a new element in HTML5 allowing for an easier, powerful way to draw graphics using JavaScript. Is it like SVG?
You want to check to make sure the browser supports HTML5 canvas. Then set the context--this is set for 2d, but browsers can make their own. Like Opera is testing out 3d. Then you can use
canvas is supported in Opera, Firefox, and Safari--esp. in the iPhone. This is done by Dunstan Orchard. A Web-app he&#x2019;s building for the iphone for tracking his workout routine.
http://webkit.org/misc/DatabaseExample.html
It&#x2019;s still a work in progress-- and it&#x2019;s a piece of work. It has to bend backwards to support HTML4 as well as lean forward to support the future of the Web as it sees fit. Which if XHTML tells you anything, it&#x2019;s a guess game. So, XHTML is still, I believe, the way to go.
Now is the time to stop talking about structure of documents, the fiber of the web, and start talking about looking good.
So what new things will we get out of HTML5?
I want to touch base with the microformats issue and the BBC. If you recall, it centered on the ABBR element being a bit overused.
I felt that the video support is a lot like SVG. There is a lot more potential for support for video since everyone can see the value of HTML5 videos--but it needs to make a case for a clean break from the infrastructure that companies have in Flash.
I want to touch base with the microformats issue and the BBC. If you recall, it centered on the ABBR element being a bit overused.
I felt that the video support is a lot like SVG. There is a lot more potential for support for video since everyone can see the value of HTML5 videos--but it needs to make a case for a clean break from the infrastructure that companies have in Flash.
I want to touch base with the microformats issue and the BBC. If you recall, it centered on the ABBR element being a bit overused.
I felt that the video support is a lot like SVG. There is a lot more potential for support for video since everyone can see the value of HTML5 videos--but it needs to make a case for a clean break from the infrastructure that companies have in Flash.
I felt that the video support is a lot like SVG. There is a lot more potential for support for video since everyone can see the value of HTML5 videos--but it needs to make a case for a clean break from the infrastructure that companies have in Flash.
I want to touch base with the microformats issue and the BBC. If you recall, it centered on the ABBR element being a bit overused.
I want to touch base with the microformats issue and the BBC. If you recall, it centered on the ABBR element being a bit overused.