[opendtv] Geek 101: HTML5, CSS3, and You
- From: Craig Birkmaier <craig@xxxxxxxxx>
- To: OpenDTV Mail List <opendtv@xxxxxxxxxxxxx>
- Date: Sat, 8 May 2010 07:26:58 -0400
http://www.pcworld.com/article/188834/geek_101_html5_css3_and_you.html
Geek 101: HTML5, CSS3, and You
James Mulroy
May 7, 2010 5:48 pm
HTML is the standard language used to build Web pages. It isn't going
anywhere, but some new technologies--such as HTML5 and CSS3--are
already changing how you interact with Web sites. Here's what these
technologies are, what they can do, and why you should care.
HTML and CSS: The Basics
In the early days of the Internet, your tools for building a Web site
were HTML and little else. But trying to design a site with nothing
more than HTML can be tedious and limiting. This is where CSS comes
in.
Cascading Style Sheets, also known as CSS, are files that tell the
Web browser how to display an HTML page. Basically, the HTML page
serves as the skeleton--the basic framework of a Web page--while the
CSS document specifies how the specific elements of a page should
look. CSS lets you control the fonts, font colors, background styles,
and so forth, of an HTML page.
CSS makes it easier to design and build a Web site. Before CSS, you
had to use HTML to specify how all individual headers and components
of a page looked and acted. While there were ways around this, HTML
was often misused and the web developer would have to go in and
individually change every page element on every page. CSS made it
drastically less complex and less time consuming to change the styles
on a Web page; you could make the change to one document and apply
the change across your entire site.
What's Next: HTML5 and CSS3
HTML5 and CSS3 are the latest of markup programming. HTML5's video
element--which simplifies adding video to a Web page--has been
getting all the attention, but HTML5 has many features that will put
it ahead of the game and make it great for users and Web developers
alike.
Flash-free Video and Animation
HTML5 will allow you to watch videos without using a plugin like
Flash or Silverlight. .
So what's the big deal with the new video feature of HTML5? Well for
one, it's free to use and doesn't require the Adobe Flash plugin.
Second, Flash can slow down their computer (though the
hardware-accelerated Flash 10.1--now in beta--should help matters);
it's one more piece of software running and eating up system
resources, after all. With HTML5, the video feature is built right in.
This new video feature of course will be of great help to Apple
iPhone users, because Apple pretty much refuses to let any of its
control over the iPhones be turned over to another application (this
type of control is normally known as an absolute monarchy). But
hopefully HTML5 will be beneficial to Blackberry phones as well, most
of which are not able to support flash. In fact, Apple's pushing
HTML5 video so much that they have a page highlighting so-called
"iPad-ready" Web sites.
An HTML5 video on Vimeo playing on an iPad.
One important thing to note about HTML5 video is that it's still in
flux. For example, Safari, Chrome, and the upcoming Internet Exporer
9 will support embedded HTML5 video that uses the H.264 format.
Firefox, on the other hand, only currently supports HTML5 video that
uses the Ogg Vorbis format; the folks behind Firefox claim that
H.264's closed-source nature could cause problems with licensing in
the future, so it may be a little while before the dust settles here.
Also, HTML5 and CSS3 will make it easier for Web designers to create
animations and interactive games without a single bit of Flash. For
some great examples of what you can do with HTML5, CSS3, and a little
help from JavaScript, see Akihabra Games and this animated Star Wars
AT-AT Walker. Design Shack has several other CSS3 animation examples
too.
It isn't going to entirely replace Flash just yet, but there's tons
of promise for HTML5 and CSS3 on this front.
Offline Storage: Web Apps Take the Next Step
Web apps are becoming increasingly sophisticated, and some new
features in HTML5 will help them continue to improve. HTML5 gives Web
apps the ability to store information and Internet utilities for use
when you're offline. This feature will allow you to store and access
data like e-mails, calendars, and other utilities through Web apps,
even when you're offline, making Web apps that much better and more
useful.
When you log back online these apps will load faster because the
structure of the page will already be saved in your browser's cache.
In theory, any changes you made to the Web app while offline should
remain when you log back on.
With the offline storage feature you should be able to specify in the
browser which sites or types of sites you want the browser to
continually cache without individually saving each page; in other
words, in the past you would have to "File-Save As" any page that you
wished to save while offline-using the new system you will be able to
set your browser to automatically save a certain type of pages
(perhaps all belonging to one Web site, for example).
This will also speed up loading time when you are online because part
of the page will already be in memory, so you won't have to wait for
the entire page to refresh.
Google announced in December that it will begin utilizing HTML5 in
its Web apps, instead of its own Google Gears framework.
New Design Tools
HTML5 and CSS3 also makes for more attractive Web apps and sites.
HTML5 has newly added features which make Web application building
much easier and easily more tailored. Some examples are more color
and gradient support, shadowing, rounded corners (instead of forcing
Web designers to use images to mimic rounded corners), and of course,
offline storage. These all make for a more pleasant looking Web page,
and something closer to what the creator originally had in mind.
The State of HTML5 Compatibility
While HTML5 and CSS3 aren't yet finalized, they're already changing
the face of the Web. Some browsers--such as the current versions of
Safari and Chrome--have already implemented some features from the of
the draft versions of HTML5 and CSS3. And with the use of these
browsers you can see many websites which also use HTML5 and CSS3 like
CNN.com, The New York Times, YouTube (in beta), and Vimeo -- all of
which use the new video player.
The current version of Internet Explorer, IE 8, had very limited
HTML5 support, however, IE 9 will support h.264 video, embedded audio
(no plug-in required!), scalable vector graphics, and CSS3.
Also, HTML5 is still in "working draft" stage; even though some of
the technolgy is making it into browsers and Web pages now, it'll
still be a while until the specification is finalized.
HTML5 and CSS3--combined with other Web technologies like
JavaScript--can be very useful for the style, format and operating
speed of any Web page if used correctly. The two languages will
revolutionize the way we program and view the internet do to their
advanced all-in-one features which can remove the use of many third
party applications (like Flash).
This is only a fraction of what HTML5 and CSS3 has to offer. For more
technical information on both see the World-Wide Web Consortium's
HTML5 and CSS3 overviews.
----------------------------------------------------------------------
You can UNSUBSCRIBE from the OpenDTV list in two ways:
- Using the UNSUBSCRIBE command in your user configuration settings at FreeLists.org
- By sending a message to: opendtv-request@xxxxxxxxxxxxx with the word
unsubscribe in the subject line.
Other related posts:
- » [opendtv] Geek 101: HTML5, CSS3, and You - Craig Birkmaier
