HTML5 and Examples

What’s HTML5?

HTML 5 is “the 5th major revision of the core language of the World Wide Web: the Hypertext Markup Language (HTML).” W3C Working Draft 10 June 2008. The new language is generally considered a step forward from the previous version, HTML 4.01. Basically, HTML 5 is being created to fix some problems and improve “interoperability” between different “user agents”.

Current layout with  HTML:

Layout with HTML 5:

There are a few other interesting additions too. For example, the dialog element will allow better representation of conversations in HTML. For example, a WP Twitter plugin could output code like this:

<dialog id="Twittering">
<dt> <time>14:22</time> richardbaxter
<dd> Has anyone seen the latest Battlestar?
<dt> <time>14:23</time> ZakaZaka
<dd> @richardbaxter Get on with your job!
</dialog>

Why HTML5?

HTML 5 is “the 5th major revision of the core language of the World Wide Web: the Hypertext Markup Language (HTML).” W3C Working Draft 10 June 2008. The new language is generally considered a step forward from the previous version, HTML 4.01. Basically, HTML 5 is being created to fix some problems and improve “interoperability” between different “user agents”. In plain English, this means a few things:

• HTML5 will allow for better cross browser compatibility between mobile, desktop, netbook, pda, Ereader and whatever else can display a web page
• HTML5 gives web developers new functionality to make for a more dynamic, improved user experience
• The language should allow for some performance improvements in page load as the need for additional code in web pages is thinned down a little

All in all, HTML5 sounds like a good thing and there has been much more mainstream coverage of the language’s development of late. Wondering what’s under the bonnet of a HTML5 page? I found some live HTML5 examples for you to take a look at:

“Embedded” Video

HTML5 allows for embedded video content inside the <video> tag. Interestingly there’s some debate as to which codec should be used as standard, read more on that here. In the meantime, here’s an example of a HTML5 embedded video, where the browser is able to display the MP4 file just like it would an image:

Note the <article> and <footer> elements in the source – we’ll get back to those later.

Youtube have built a HTML5 demo version of their site and use much the same markup to embed a video file in MP4:

Another awesome example of HTML5 video players is the new Sublime HTML5 video player which, I believe is still in beta but demos nicely in Google Chrome: http://jilion.com/sublime/video

Document structure

HTML5 gives us a more disciplined framework to define basic web page layout. We mentioned the <article> and <footer> elements earlier. Here’s how the specification intends a HTML5 page to be structured:

To show you just what a HTML5 web page looks like, what better example could we choose than a HTML5 WordPress theme?

In this screenshot, we see the <header> element opened and closed, rather than something like my site, which would uses <div id="header"> to do the same thing:

You can see the <article> element begins slightly below the <nav> element, all new elements introduced by HTML5. It’s worth noting at this point that a large scale implementation of these HTML5 elements would greatly reduce the typical inconsistency between different front end web developments, allowing for (potentially) better block analysis by the search engines, a different approach to on-page SEO and easier HTML / web page scraping with XPath.

Here’s a <footer> element out in the wild which, again is new to HTML5. You’ll also notice the rel=”tag” attribute:

Rel=”tag” is a Microformat that you could read more about on Microformatique, John Allsop’s blog. John is author of Microformats: Empowering Your Markup for Web 2.0 – worthwhile reading if you’re looking to max out your Microformats knowledge!

Editable content

Enjoy playing with this example of HTML5 driven editable content. On a HTML5 editable page,  the content contributor can add and edit text on the web page, without having to use an editor. Typically, a Wiki or Web page editing tool today would force the user to a new “edit” page, while often demanding basic knowledge of WikiMarkup or basic HTML. In this example, a visitor is able to edit text live on the page. This could have some impressive implications for public, collaborative web page editing:

RGraph / HTML5 Canvas Graphs

Using a combination of the HTML5 CANVAS tag and some clever JavaScript, RGraph allows the web developer to construct graphs on the fly inside the browser. Typically, this would have been carried out by the web server or an image would have to be embedded in the document. As RGraph constructs its graph in the browser, page load time is significantly improved and the charts can be interactive!

From the RGraph website:

RGraph is a HTML5 canvas graph library. It uses features that became available in HTML5 (specifically, the CANVAS tag) to produce a wide variety of graph types: bar chart, bi-polar chart (also known as an age frequency chart), donut chart, funnel chart, gantt chart, horizontal bar chart, LED display, line graph, odometer, pie chart, progress bar, pseudo radar chart, scatter graph and traditional radar chart.

Here’s an example, but I recommend you check out their site to examine the interactivity of the charts:

Browser GEO Location

HTML5 makes use of the Geo Location API allowing “scripted access to geographical location information associated with the hosting device”. Here’s a live example of just that:

Try visiting FindMebyIp.com’s “IP Address” details page with your Firefox 3.5 browser. You’ll see the page grab your IP address, GEOLocation and Map location thanks to Browser GEO location.

If you’re interested in more HTML5 examples, I recommend you take a look at these sites – have fun!

5 Clever uses of the CANVAS tag – CSS Ninja

HTML5 Canvas Examples – PHPguru

HTML5 Boilerplates – HTML5 Doctor

Coding A HTML 5 Layout From Scratch – Smashingmagazine.com

HTML5 and the Future of the Web – Smashingmagazine.com

How HTML5 Will Change the Way You Use the Web – Lifehacker

Source : SEO Gadget

Top 10: Future Outlook, 2010

Since 1985, THE FUTURIST editors have selected the most thought-provoking ideas and forecasts featured in the magazine for their annual Outlook report. Over the years, Outlook has spotlighted the emergence of such epochal developments as the Internet, virtual reality, and the end of the Cold War. Visit The World Future Society’s website, publishers of THE FUTURIST magazine.

Here are their Top 10, 2010 Forecasts:

Everything you say and do will be recorded by 2030.
By the late 2010s, ubiquitous, unseen nanodevices will provide seamless communication and surveillance among all people everywhere. Humans will have nanoimplants, facilitating interaction in an omnipresent network. Everyone will have a unique Internet Protocol (IP) address. Since nano storage capacity is almost limitless, all conversation and activity will be recorded and recoverable. — Gene Stephens, “Cybercrime in the Year 2025,” July-Aug 2008

Bioviolence will become a greater threat as the technology becomes more accessible.
Emerging scientific disciplines (notably genomics, nanotechnology, and other microsciences) could pave the way for a bioattack. Bacteria and viruses could be altered to increase their lethality or to evade antibiotic treatment. Another long-term risk comes from nanopollution fallout from warfare. Nanoparticles could potentially cause new diseases with unusual and difficult-to-treat symptoms, and they will inflict damage far beyond the traditional battlefield, even affecting future generations. — Barry Kellman, “Bioviolence: A Growing Threat,” May-June 2008; Antonietta M. Gatti and Stefano Montanari, “Nanopollution: The Invisible Fog of Future Wars,” May-June 2008

The car’s days as king of the road may soon be over.
More powerful wireless communication that reduces demand for travel, flying delivery drones to replace trucks, and policies to restrict the number of vehicles owned in each household are among the developments that could thwart the automobile’s historic dominance on the environment and culture. If current trends were to continue, the world would have to make way for a total of 3 billion vehicles on the road by 2025. — Thomas J. Frey, “Disrupting the Automobile’s Future,” Sep-Oct 2008

Careers, and the college majors for preparing for them, are becoming more specialized.
An increase in unusual college majors may foretell the growth of unique new career specialties. Instead of simply majoring in business, more students are beginning to explore niche majors such as sustainable business, strategic intelligence, and entrepreneurship. Other unusual majors that are capturing students’ imaginations: neuroscience and nanotechnology, computer and digital forensics, and comic book art. Scoff not: The market for comic books and graphic novels in the United States has grown 12 percent since 2006. — World Trends & Forecasts, Sep-Oct 2008

There may not be world law in the foreseeable future, but the world’s legal systems will be networked.
The Global Legal Information Network (GLIN), a database of local and national laws for more than 50 participating countries, will grow to include more than 100 counties by 2010. The database will lay the groundwork for a more universal understanding of the diversity of laws between nations and will create new opportunities for peace and international partnership. — Joseph N. Pelton, “Toward a Global Rule of Law: A Practical Step Toward World Peace,” Nov-Dec 2007

Professional knowledge will become obsolete almost as quickly as it’s acquired.
An individual’s professional knowledge is becoming outdated at a much faster rate than ever before. Most professions will require continuous instruction and retraining. Rapid changes in the job market and work-related technologies will necessitate job education for almost every worker. At any given moment, a substantial portion of the labor force will be in job retraining programs. — Marvin J. Cetron and Owen Davies, “Trends Shaping Tomorrow’s World, Part Two,” May-June 2008

The race for biomedical and genetic enhancement will-in the twenty-first century — be what the space race was in the previous century.
Humanity is ready to pursue biomedical and genetic enhancement, says UCLA professor Gregory Stock, the money is already being invested, but, he says, “We’ll also fret about these things — because we’re human, and it’s what we do.” — Gregory Stock quoted in “Thinking Globally, Acting Locally, Living Personally,” Nov-Dec 2007

Urbanization will hit 60 percent by 2030.
As more of the world’s population lives in cities, rapid development to accommodate them will make existing environmental and socioeconomic problems worse. Epidemics will be more common due to crowded dwelling units and poor sanitation. Global warming may accelerate due to higher carbon dioxide output and loss of carbon-absorbing plants. — Marvin J. Cetron and Owen Davies, “Trends Shaping Tomorrow’s World, Part One,” Mar-Apr 2008

The Middle East will become more secular while religious influence in China will grow.
Popular support for religious government is declining in places like Iraq, according to a University of Michigan study. The researchers report that in 2004 only one-fourth of respondents polled believed that Iraq would be a better place if religion and politics were separated. By 2007, that proportion was one-third. Separate reports indicate that religion in China will likely increase as an indirect result of economic activity and globalization. — World Trends & Forecasts, Nov-Dec 2007

Access to electricity will reach 83 percent of the world by 2030.
Electrification has expanded around the world, from 40 percent connected in 1970 to 73 percent in 2000, and may reach 83 percent of the world’s people by 2030. Electricity is fundamental to raising living standards and access to the world’s products and services. Impoverished areas such as sub-Saharan Africa still have low rates of electrification; for instance, Uganda is just 3.7 percent electrified. — Andy Hines, “Global Trends in Culture, Infrastructure, and Values,” Sep-Oct 2008

Author : Discovery Channel