HTML + CSS + JavaScript » HTML

I’m Going to Be Talking About HTML5 at the Enterprise 2.0 Conference, June 23

Rob Larsen — Thu, 05 May 2011 15:48:28 +0000

Here’s the description of the panel I’m on:

HTML5 and its Impact on Enterprise Architecture (Location: Room 1)

Although not yet ratified as an official standard, HTML5 support is showing up across a variety of different browsers. And for very good reason: HTML5 includes support for an important range of functionality – much of which has a direct bearing on Enterprise 2.0 applications.

Join a panel of experts who will critically review the prospects for HTML5 across three areas:

* Enterprise Architectures
* Social Computing Applications
* Mobile

HTML5 is not a panacea, but it should simplify application development and help enterprises support a much wider set of mobile platforms. Come find out how.
Moderator – Jarrod Gingras, Analyst, Real Story Group
Panelist – Jonas Jacobi, Co-Founder and CEO, Kaazing Corporation
Panelist – Rob Larsen, Interface Architect, Isobar

I’ll be focusing on the mobile angle. I’ll be doing a 20-25 minute presentation and then will stick around to answer some questions.

It should be interesting as the audience for this is going to be far different than my regular open source and developer-centric audience. The really interesting part is that I’m going to be able to sell HTML5 to a crowd that might not be totally hip to the fun we’re already having.

A New Site I Worked on is Live: Tauck.com

Rob Larsen — Tue, 22 Mar 2011 19:06:28 +0000

Check it out:

Tours and guided world travel adventures available at Tauck.com.

Here’s a press release:

Tauck and Isobar Bring Sights, Sounds and Social Side of
Travel to Life Online

NORWALK, CT, and BOSTON, MA, March 22, 2011 — The world’s leading guided travel operator, Tauck, and global creative agency Isobar announced today the launch of the new Tauck online experience: www.tauck.com. The new site combines artistry and digital technology to immerse travel consumers in the “Tauck difference,” enabling Tauck consumers to connect, explore and share their experiences online and extend their journey before and after the trip like never before.

Travel is a very personal and exciting experience. Consumers spend months and weeks planning and anticipating their travel adventures, and are eager to share and recount their memories with friends, family and other trip members long after they return home. For the first time, Tauck travelers can share their excitement and experiences pre- and post-trip through a rich interactive journey that captures exquisite photography, elegant and descriptive content, breathtaking video, full-bodied itineraries, and social media. In addition, the site is designed to capture the essence of the Tauck brand and help new visitors understand the wide range of premium travel experiences the company offers.

“For 86 years, Tauck has embodied exceptional quality, value and attention to every last detail,” said Dan Mahar, CEO of Tauck. “Isobar worked closely with our in-house team to bring those qualities to life online in a very real, full-on-sensory way. If one of our journeys could be turned into a website, this is what it would look like.”

Among the site’s features are flexible, easy-to-use search tools that let travelers search for the perfect trip by location, interests and dates. Travel forums bring like-minded travelers together to not only share ideas, experiences, and advice, but connect before and after the trip to share photos and memories that enable lasting relationships.

“Just as with every Tauck land journey or cruise, the site is designed to make travelers feel engaged, inspired and exceptionally well cared for,” said Michael Nicholas, Chief Strategy Officer at Isobar. “Combining both a beautiful, elegant front-end user experience with some powerful back-end digital and social technologies, the online experience has the ability to satisfy and delight the visitor on many different levels.”

About Tauck
Tauck is the world’s leading guided travel operator. The company has been named the “World’s Best Tour Operator & Safari Outfitter” three times by the readers of Travel & Leisure magazine, and it enjoys the travel industry’s highest return-guest rate. Headquartered in Norwalk, Connecticut, the company offers nearly 100 expertly-choreographed itineraries in 65 countries and on all seven continents, including Tauck World Discovery land journeys, river and small-ship ocean cruises, Tauck Bridges family travel adventures, and active, immersive Culturious journeys designed for boomer-aged travelers. Every Tauck travel experience is authentic, life-enriching and inspirational, and each is complemented by exceptional value and dedicated do-it-for-you service that have formed the cornerstone of the company since its launch in 1925.

About Isobar
Isobar is a global creative agency that brings people and brands together like never before. We fuse creative thinking with technology know-how to uncover the best ideas and execute them across any platform or channel anywhere in the world. Our unique combination of creatives and creators ensures the best ideas never end up on the cutting room floor, empowering us to consistently deliver innovative and intensely relevant brand experiences for the world’s largest brands. With locations in Boston, New York and San Francisco, Isobar US is an Aegis Media Group Company and part of the global Isobar network of over 50 offices in 30 markets. For more information, please visit http://na.isobar.com.

A New Site I Worked On is Live (officially)

Rob Larsen — Wed, 01 Dec 2010 02:25:28 +0000

We finally launched the new Isobar North America site. It had been in a soft-launch phase for several weeks as we worked out the kinks. Now it’s official.

I worked on it and, amazingly enough for an internal project I’m happy with it.

I’ve actually had a good string with that, actually, having worked on two really fun internal projects at Cramer. It still seems like a miracle when it works out.

Anyway, it’s an HTML5 + CSS3 + WordPress monster of technical awesome. Adam and I had a lot of fun on the project, figuring out how to smash WordPress into shape. Good times.

High fives for all involved.

(And while you’re here, why don’t you read Heather’s post that properly launches the thing?)

HTML5: What You Should Be Using Right Now

Rob Larsen — Mon, 09 Aug 2010 16:01:44 +0000

Continuing our examination of HTML5, this time we’ll take a slightly deeper look at the state of HTML5 support in browsers. We’ll step through several major features, examine the technical hurdles in place, identify the level of browser support and finally provide some recommendations on whether or not to pull the trigger with that shiny new feature.

New Semantic Elements

HTML5 has added many new semantic elements. These both codify existing, common patterns and offer new, meaningful ways mark up your content. So, for example, going forward, instead of using

we will now just use

. Some other examples (with definitions culled from the specification) include:

section

The section element represents a generic document or application section. A section, in this context, is a thematic grouping of content, typically with a heading.

Examples of sections would be chapters, the various tabbed pages in a tabbed dialog box, or the numbered sections of a thesis. A Web site’s home page could be split into sections for an introduction, news items, contact information.

footer

The footer element represents a footer for its nearest ancestor sectioning content or sectioning root element. A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.

nav

The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links.

article

The article element represents a component of a page that consists of a self-contained composition in a document, page, application, or site and that is intended to be independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.

That’s far from a complete list, but it should serve to give you the flavor of what’s available.

Support

This is a curious case. If, by “support” we mean “doesn’t break anything” then the support here is broad. Using the HTML5 Shiv code snippet or the full blown Modernizr library every browser that matters supports the HTML5 elements. If you’re expecting user agents to do something interesting with your new elements, then the support level is much lower.

The Verdict

Do it. This very site is built using the new semantic elements and it’s the fourth such site I’ve built in the past year. I’m happy to report- I’m still standing. While there’s a slightly higher degree of difficulty and there’s less certainty around HTML5 best practices than exists for earlier flavors of HTML; the hands-on experience with the new elements is enough reason to start using them as soon as possible. All the tutorials in the world can’t stand up to using the new elements against your site and solving your own problems with them.

How-to

Pretty easy, really. To allow the styling of the new elements in Internet Explorer (other browsers automatically allow unknown elements to be styled), either include the HTML5 Shiv

This is a reasonable solution because you only have to encode and store one mp4 version of the video and it will cover pretty much any browser/OS combination that matters.

Additionally, outfits like BrightCove are working similar techniques into their platform work. Worth keeping in mind if you’re shopping for video solutions.

*Technically we have a third camp, as Google, with their Chrome browser, actually supports both.
**Hopefully everyone will come together under the WebM banner, since it solves both the patent and quality arguments of the two warring camps, but that’s for the future to decide.

Geolocation

Geolocation, a method of informing a website or web application of a user’s geographical location, isn’t “proper” HTML5, but it is of interest these days and is generally included as part of the informal specification, so I’m including it here.

Support

The new navigator.geolocation object is supported by Firefox 3.5+, Chrome 5.0+, Safari 5.0+, iPhone 3.0+ and Android 2.0+. Beyond that, using something like Google Gears, or even just the user’s IP address, it’s possible to get some location data using other sources. Here’s a quick demo using the YQL Geo Library. It should do something in pretty much any browser.

The Verdict

If you don’t need absolute precision for all users or then by all means, work some secondary geolocation features into your site or web application. You can do a reasonable job in a wide range of browsers. If you’re trying to get high quality location data then your options are a little more limited in the browser.

How-to

Using a library like geo.js or the previously mentioned YQL Geo Library smooths out the rough patches between the geolocation api itself and the various fallback methods. For a quick illustration of how easy it is to get basic data, here’s the entire script used in the above demo:


document.getElementById("geolocate").onclick= function() {
      yqlgeo.get('visitor',function(o){
			var result = document.getElementById("result");
			result.innerHTML += " " + o.place.name + "," + o.place.country.content +  " (" + o.place.centroid.latitude + "," + o.place.centroid.longitude + ")";
			result.style.display="block";
		}
	)
}

Not much to it, but using that you’ve got a friendly place name (which is provided by a yql service, not the geolocation api itself) and lat/long (the heart of the actual geolocation api). From there you’ve ready to spin a web of location-based wonder and amazement.

Looking to the future, using the actual underlying geolocation api isn’t much more verbose with the navigator.geolocation.getCurrentPosition providing a straightforward interface to the browser’s location data.

Web Storage

Web Storage is a method of storing data, in the form of name/value pairs, locally on a user’s machine. File this one under: not flashy, but super useful.

Support

Stunningly, the latest version of every major browser supports localStorage. You get 5MB of persistent storage across the board. For IE7 and IE6, if you really had to figure out a local storage solution, you could potentially leverage userData or Gears, both of which offer similar functionality.

The Verdict

With such broad support, it makes sense to start enhancing pages with localStorage. Saving trips to the server is always good, so storing more (non-sensitive*) data on the client side is going to be a positive for your users.

How-to

At the most basic level, there are three things you need to know about, setting items, getting items and the storage event.


//use modernizr to test for support
if (Modernizr.localstorage) {
    // window.localStorage is a go!
    function setGet(){
        //set some data. It's stored as a String, btw.
        localStorage.setItem("dharma.station.swan.status", "destroyed",);
        //get some data
        var swanStatus = localStorage.getItem("dharma.station.swan.status");
    }
    //we can also listen for storage events
    function omgStorage(){
        alert("someone stored something. Just though you should know.");
    }
window.addEventListener("storage", omgStorage, false);
}

PersistJS

PersistJS is an excellent, cross-browser interface to the fll spectrum of localStorage and related solutions. Providing a single interface to the W3C version, Internet Explorer’s, Gear’s and even Flash’s implementation, Persist is a solid solution for the current fragmented local storage landscape.

Here’s what a simple example of Persist looks like in action:


var store = new Persist.Store("MyData");store.set("MyName", "Rob Larsen")
store.get("MyData", function(ok,data){
	if(ok){
	    	console.log(data);
	   }
   })

*data is saved unencrypted on disk

Canvas

To quote the spec, Canvas is “a resolution-dependent bitmap canvas which can be used for rendering graphs, game graphics, or other visual images on the fly.” It’s one of the most exciting of the new HTML5 features because it promises the ability to do really advanced graphics, games and visualizations right in the browser- without the aid of a plugin. Staying within the web standards stack we can now start to do some of the things we relied on Flash for up until now.

Support

The latest version of every browser but Internet Explorer supports Canvas natively. Thankfully, support for IE can be provided by the Explorercanvas library, a clever bit of coding that transforms Canvas methods into VML. The downside to that is, of course, speed. Performance for more complicated Canvas scripting is very slow on IE. This is especially true for animations and interactive elements. In addition there are several canvas features that simply don’t translate. Still, it’s a viable solution.

The Verdict

If you’re willing to sacrifice a little bit of speed in IE and aren’t pushing the boundaries of what Canvas is capable of, it’s pretty safe to start using Canvas right now. Explorercanvas works pretty well, and in browsers that support it natively, the experience can be great.

There are also concerns about accessibility, which is definitely something to keep in mind.

How-to

A proper how-to for the canvas element is beyond the scope of this article. In place of that here’s an extremely simple demo and some code that will hopefully illustrate basic concepts.

Here’s the demo. It converts a data table into a bar chart using some canvas methods.

Wow, that was fun.

Let’s look at the code.

The HTML is nothing special. The Canvas element just sits there until JavaScript brings it to life.

15	25	10	25	50

Here’s the JavaScript. Comments inline.


document.getElementById("canvas-controller").addEventListener("click", writeCanvas, false);

function writeCanvas(e){
//we need a reference to the canvas. Typical DOM stuff
    var canvas = document.getElementById("canvas-sample");
//Then we get the "context." It's the reference
//to the drawing surface itself.
var context = canvas.getContext("2d"); 
//get the data cells
    var tds = document.getElementById("data-table").getElementsByTagName("td");
//set up a list of colors
    var colors = ["#3366FF",
        "#6633FF",
        "#003DF5",
        "#002EB8",
        "#66FF33"
    ];
//Let's draw some grid lines
    for (var y = 0; y < canvas.offsetHeight; y += 10) {
//moveTo and lineTo are pretty clearly named functions.
//move the "point" to a new place
	    context.moveTo(0, y);
//and plot a line
    	context.lineTo(canvas.offsetWidth, y);
    }
//what's not clear is that running the above commands doesn't
//actually draw anything. These next two commands do.
//set a style for line "stroke"
    context.strokeStyle = "#ccc";
//and then call the function that makes the lines happen
    context.stroke();
//set a bunch of variables
    var basewidth, spacing, width, height, posx, posy;
//loop through
var i = tds.length;
	while (i--) {
//calculate a uniform "base" width for the bars
   	basewidth = canvas.offsetWidth/tds.length;
//set up some spacing
    	spacing = basewidth/4;
//calculate the actual width of the bars
    	width = basewidth - spacing;
//set up a height. This isn't actually to any scale.
//It just looked good 
    	height = parseInt(tds[i].innerHTML)*3;
//calculate the x position with some spacing between the bars
    	posx = (i * basewidth) + spacing/2;
//pin the bars to the bottom of the canvas
    	posy= canvas.offsetHeight-height;
//set the color
    	context.fillStyle = colors[i];
//and then fill it.
//The fillRect takes (x,y,width,height) as arguments
    	context.fillRect(posx, posy, width , height );
    }
//stop the clicks.
    e.preventDefault();
}

And that’s that.

Hopefully you’ve come away with a better understanding of the current support levels for HTML5. All in all, it’s really not that bad. The landscape is manageable for many of the newest technologies and if we can light a fire under Microsoft to release IE9 it’ll only get better.

So basically, pick your spots, understand the risks, and dive right in.

This post originally appeared on the Isobar North America blog

How To Make a Web Site the Modern Way. Part 11: The New HTML5 Elements

Rob Larsen — Mon, 10 May 2010 15:43:00 +0000

I promised one last post on HTML elements. This is it. This one will be a quick tour through some of the new semantic HTML5 elements. I’ve been using them regularly for a while now and I’m still trying to wrap my head around the best way to use some of them (in this, I’m not alone.) Hopefully sharing what I’ve learned will help jump start your own work with the new stuff and will help my clarify my own thoughts on the new elements.

This should really be fun.

header

This is one of the most straightforward of the new elements.

becomes

. Done. When I’ve presented on HTML5 people just nod when I point this element out. Hopefully this one just makes sense.

One experimental note

One thing we’ve been experimenting with at work is using multiple headers on a page. The pattern looks like this:




  site logo

    
      This is our section header
    
  
    
      This is our article header
    
  	 this is our article
    
      this is the post footer
    
   

  site footer

The idea being- this is truly a copy and paste waiting to happen. The article is truly standalone. I’m not quite sure if I like it or not yet, but it’s a perfect example of why I’ve started using HTML5 wherever possible. There’s a lot to take in, so I figure the best way to wrap your head around it all is to roll up your sleeves and write some code.

footer

If header makes sense, footer should as well. There are a lot of

s out there.

nav

nav is for navigation elements. Looking at my markup for the blog@drunkenfist.com, you’ll see where I like to use nav and where I’ll stick to an unadorned UL.

I use it for the main site navigation (the clearest use), for the post-navigation (back and next, another clear use) and for the social media/contact links (the weakest use.) The first two are perfect, I think. The third use is a weaker case to me and looking at it today, I’m tempted to remove it from that section. The idea there was that it’s meta navigation, dealing with the breadth of my internet presence, not just the site. Chewing on that one…

I don’t use it for the WordPress archive and links lists. I don’t really feel like those are navigation. They’re more informational. So, no nav.

section

Section is defined like this:

The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content, typically with a heading.

Examples of sections would be chapters, the various tabbed pages in a tabbed dialog box, or the numbered sections of a thesis. A Web site’s home page could be split into sections for an introduction, news items, contact information.

Authors are encouraged to use the article element instead of the section element when it would make sense to syndicate the contents of the element.

The section element is not a generic container element. When an element is needed for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead. A general rule is that the section element is appropriate only if the element’s contents would be listed explicitly in the document’s outline.

So the general rule of thumb I use is to try to define the section, in terms of the content contained therein, before actually using one. That separates out a lot of structural uses. To look at DrunkenFist.com again, I use sections on my home page for events, site updates and my little collection of blog updates:

The outline is pretty good:

Rob Larsen
1. Home
  1. Art Portfolio
    1. Graffiti Art
    2. Comic Book Art
    3. Color Art
    4. Black and White Art
    5. Pencil Drawings
  2. Movies
    1. Hong Kong Cinema Articles, Reviews and Interviews
    2. Hollywood Film Reviews and Interviews
    3. Japanese Cinema Reviews
    4. Independent and Foreign Film Reviews
    5. An Index of Every Film Reviewed on The Site
  3. No Mod Required, Rob’s blog
  4. More about Rob Larsen and DrunkenFist.com
2. Upcoming Speaking Engagements
3. Current Art Shows
4. New at the Site
5. Blog Headlines
  1. No Mod Required
  2. HTML + CSS + JavaScript
  3. It’s All Just Comics
6. Untitled Section
  1. Links:
7. Untitled Section

article

If it’s content and I can imagine someone copying and pasting the entire

…

then it’s an article.

One thing I haven’t tried is this, suggested in the spec:

When article elements are nested, the inner article elements represent articles that are in principle related to the contents of the outer article. For instance, a blog entry on a site that accepts user-submitted comments could represent the comments as article elements nested within the article element for the blog entry.

One of the ongoing debates is how to mark up blog comments. This is an interesting approach to that particular issue. Maybe on my current project?

Yes.

If you want an in-depth view of the differences between article and section, then check out Bruce Lawson’s article on the subject.

time

time represents, well, time. One thing to note is when using it within an article you should set the pubdate flag to indicate that it’s a publication date.

Here’s what that looks like:


How To Make a Web Site the Modern Way. Part 11: The New HTML5 Elements
    
      May 8th, 2010
      by Rob Larsen

aside

aside is a tricky one. Is it a sidebar? The more I think about it, the less I think it is. One reason is visible above. The first of the “Untitled sections” in the outline is an aside. So that mixed with a closer reading of the spec have lead me away from using asides for most generic sidebars. Depending on the content, some of them still might be asides, some might be sections, some might be navs and plenty will be generic divs.

One place I am comfortable with asides is visible in the context of a movie review on Drunkenfist.com.

To me, that seems like a good use case as defined in the spec:

[an aside is] a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content.”

figure

A figure, combined with a figcaption is meant to mark up a note, be it text or visual, illustrating a portion of an article. The figure is the added content and the figcaption is a semantically linked text accompanying caption. The figure can contain text, image(s) or video(s).

And that’s that.

The above is clearly not a comprehensive introduction to HTML5. There are a lot of pieces of the specification that it ignores. Still it should give you a good sense of the new semantic elements and how they’re used. I can’t stress how easy and how useful it is to start using these elements right now. There’s a lot to learn about and starting as soon as possible is the way to go.

And with that, we end our tour of HTML elements. It’s taken a while, but I think it’s been worth it.

Now, time for CSS

HTML + CSS + JavaScript » HTML

I’m Going to Be Talking About HTML5 at the Enterprise 2.0 Conference, June 23

A New Site I Worked on is Live: Tauck.com

Tauck and Isobar Bring Sights, Sounds and Social Side of Travel to Life Online

A New Site I Worked On is Live (officially)

HTML5: What You Should Be Using Right Now

New Semantic Elements

How To Make a Web Site the Modern Way. Part 11: The New HTML5 Elements

header

Tauck and Isobar Bring Sights, Sounds and Social Side of
Travel to Life Online