Bebo White: direct from SLAC itself! From various web pages: Bebo White is a Departmental Associate (retired) at the Stanford Linear Accelerator Center (SLAC). In recent years, his work has been dominated by World Wide Web technology, is involved with the International World Wide Web Conference and other such webby conferences, and he also plays banjo, jug, and washboard in The Tarantulas Jug Band. And I want to also say he really knows his stuff!
Bebo likes his presentations to be rather interactive. He asked us how how much we know about HTML, have we written HTML? (Note from Dave: I know HTML pretty well, but a lot of us here are not so technical, but we were still listening, our presenter has an entertaining and jocular speaking voice.)
We see a lot of talk about HTML. Steve Jobs claims that with HTML5, Adobe Flash is no longer necessary to watch video or consume any kind of web content. Devices such as the iPad do not use Flash. (Note from Dave: I have not really missed it on my iPad.)
So. Is HTML5 a Flash killer?
What is HTML? Hypertext Markup Language: the tags that tell what is on a web page. Links, headers, images, paragraphs, tables, etc. on a web page are all coded in HTML tags.
HTML5 is the new standard for HTML, XHTML, and the HTML DOM. The previous version of HTML came in 1999, the web has changed a lot since then. HTML is still a work in progress. And in web years, the years since 1999 are measured in centuries! A lot of what we expect HTML to do has changed. In 1999, we did not foresee an iPad. (Note from Dave: Well, some people did. On Star Trek: The Next Generation, 1987-1994, the crew of the Starship Enterprise carried around pads that linked with the ship's computer, a precursor to the iPad and iCloud?) They did not know what to do with Web 2.0 and the mobile web, so W3C and WHATWG decided to cooperate and design an HTML for the future.
He showed how HTML5 got started. There are two groups, W3C and WHATWG, going in two different directions. WHATWG was working with web forms and apps, W3C working with XHTML 2.0 Nobody knew what to do with web 2.0 and mobile web. On mobile web, on some web pages, forms can get so small can't easily enter data.
What was broken that needed to be fixed? There was too much markup language being misused. Web pages might use tables, but web pages are not really what tables should be used for. It looks right, but it is misused. Doing double columns in tables? Web searches might read that in different ways.
And multimedia was a MESS. People had to add helper applications to see video, audio, etc. on a web page. All of these technologies changing so fast that browsers connote keep up.
CSS3: Cascading Style Sheets, version 3. CSS tells how to display the content of a web page. Suppose you have a web page, and you want the same content displayed on desktop and on an iPhone. It is good to have a stylesheet that knows if this web page is being displayed on an iPhone or on a desktop computer, and displays the web page in a way best for the device (small iPhone screen, or large desktop screen).
Document Object Model. He is giving us a little HTML here. The DOM is a hierarchical representation of every object and element on the page and the relationship between them. For example, if you see this image, you should be able to follow a path to show the section to that image, and follow the path from that image to the top of the document (web page).
HTML has the head part and the body part. It has heading tags, paragraph tags, etc.
At the very top of web pages is the DOCTYPE tag (note from Dave: these tags tend to be filled with lot of JUNK that I do NOT understand!!!!), which is a pointer to the rules for the web page. Some people designing web pages ignore that.
With HTML5, the DOCYTPE just says <!DOCTYPE html>. (Note from Dave: Hey, this is a lot cleaner!) And this is designed to completely backward compatible!
Although HTML5 is new, you can start using it now. It is a work in progress.
HTML5 semantics. If you have written HTML before HTML5, you have header tags such as h1, h2, etc. but there is no context about these! Maybe you put chapter headers as H1, others put them as h2! There is no semantic association between them, no context with respect to use them, what you use them for. In HTML5, there is a new tag: <header>. Everything in that relates to header. Inside that tag, you define the context.
<h1>Web Site Name</h1>
With the <header> tag, you can easily make changes to all your headers, for example, make all headers blue.
The Nav element. In old HTML, you look at contents of the markup, and it is hard to tell what elements describe navigation. Now navigation happens to be parts of the scheme.
<article> You see a lot of articles on web pages, like blog posts. Now you say with an HTML tag that this is an article! You can decide how to display articles on your web page. Now you see what is the context. That is is an object, it shows up in the DOM, now you can look through the page, engines like Google can more easily search for articles, they do not have to guess, because it now understands the context.
In HTML5, we are defining the pieces that make up web pages, how they are used, how they are displayed.
<time> defines time elements exactly how you want them. I can do calculations on time.
<aside> This is the stuff on the side of a web page. Before you had to do this with tables. In HTML5, you can specifically define the side matter and make decisions as to how you display it. For example, if you are looking at the web page on an iPhone, maybe you might leave off the side matter, or display it differently.
Now you can write a program that can scan an HTML5 document and pull out articles and sections, just look for those tags.
HTML5 and Multimedia. The <audio> element he showed had a tag that said download this song. it does not have to understand plug-ins and did not have to know codecs, we are getting away from that sort of thing. This says give me the controls, like value controls, and tag to download this song.
<video> is just as easy. The video type is ogv, but you do say how big you want the video window to be. This is still a very simple way to embed video and audio, and it does not need plug-ins. The ogv type is built into every browser, he chose it because he did not want to show a preference for a particular video type.
You should keep up with what the status of HTML5 is on each browser. Just keep updating your browser. The level of support is a major issue. But what do you expect browsers to do? It will try the easy and most powerful thing first. HTML5 is still a work in progress.
<canvas> will not find support on a lot of browsers. He had one define size of box, and you can draw in it, and it becomes part of that page. This is great for artists, it is like an etch-a-sketch in a web page! We did not have that before. Imagine what app developers will do with this, being able to draw on web pages!
You can get a design tool called Hype on the App Store for $30 (at the time of this presentation). What is cool about Hype is that it is Hypercard for 2011! Now you do Hypercard on the web. It will take animations. We should be able to convert old Hypercard stacks to HTML5, if we can still read those old 3.5 floppies!
He showed the Welcome to Hype 1.0. Well, he could not get the video to play, but it would have shown hypercard type stuff, and you could create HTML5 animations because you understand hypercard concepts.
HTML5 storage: cookies on the web. sessionStorage sets fields. You have a web window open, you type in elements in a field, and when you close the tab, this data is not saved. localStorage: you open a form on Amazon, and two windows that are open can share data because localStorage recognize that the two windows are on Amazon, and unlike cookies, no data is transferred to the server. Before HTML5, Amazon sez, oh you read this book, you might like this one! (Note from Dave: And they NEVER get that right! Just because I like Spongebob does NOT mean I like Team Umizoomi, I already know how to count to ten!!!!!!!) That comes from cookies, and other web sites want those cookies! This is data shared between client and server. But with localStorage, it is all on the client side, it is all local, others can't get that data.
On the latest version of Safari, he showed the HTML compliance page. Lots of elements like Geolocation, nav, ruby, etc. He hates when a website says, "this page best viewed with some browser." (Note from Dave: That is annoying!)
And with the old HTML frames, web sites can open a frame that is one pixel by one pixel, and have stuff in that frame that captures your keystrokes. (Note from Dave: And therefore steals your passwords!)
Status of HTML5: May 2011 is the WC3 last call: speak now or forever hold your peace.
Projects that 2014 is the target date for W3C, by then, the elements of HTML5 should be cast in stone. Hopefully all browsers will be compliant.
I (Dave) asked about Chrome, which is my web browser of choice now. He tends to use Webkit, which is like beta Safari. He expects a lot of change. Imagine that you have hundreds of geeks in dark rooms writing ways to add HTML5 to Firefox since it is open source. (Note from Dave: This is not hard to imagine.)
Do you have a website? It is an issue to have someone host website, to pay someone for that. Now there is a free service called DropPages (droppages.com), you use your DropBox (dropbox.com) as a web server. You do not have to write HTML; if you do that, it is generated to you from DropPages. You can do a view source to see the HTML5. (Note from Dave: I should look into this. I have a Dropbox.)
Dave Strom, SMUG Vice President