MatSays

HTML5: The Facts And The Myths

September 23rd, 2010

Original article by Bruce Lawson and Remy Sharp for Smashing Magazine

You can’t escape it. Everyone’s talking about HTML5. it’s perhaps the most hyped technology since people started putting rounded corners on everything and using unnecessary gradients. In fact, a lot of what people call HTML5 is actually just old-fashioned DHTML or AJAX. Mixed in with all the information is a lot of misinformation, so here, jQuery expert Remy Sharp and Opera’s Bruce Lawson look at some of the myths and sort the truth from the common misconceptions.

First, Some Facts

Once upon a time, there was a lovely language called HTML, which was so simple that writing websites with it was very easy. So, everyone did, and the Web transformed from a linked collection of physics papers to what we know and love today.

Most pages didn’t conform to the simple rules of the language (because their authors were rightly concerned more with the message than the medium), so every browser had to be forgiving with bad code and do its best to work out what its author wanted to display.

In 1999, the W3C decided to discontinue work on HTML and move the world toward XHTML. This was all good, until a few people noticed that the work to upgrade the language to XHTML2 had very little to do with the real Web. Being XML, the spec required a browser to stop rendering if it encountered an error. And because the W3C was writing a new language that was better than simple old HTML, it deprecated elements such as <img> and <a>.

A group of developers at Opera and Mozilla disagreed with this approach and presented a paper to the W3C in 2004 arguing that, “We consider Web Applications to be an important area that has not been adequately served by existing technologies… There is a rising threat of single-vendor solutions addressing this problem before jointly-developed specifications.”

Read more…

Khoi Vinh on User Experience

September 17th, 2010

Khoi Vinh (subtraction.com), former Design Director at New York Times, speaking at “FRIETAG am Donnerstag,” a breakfast lecture series in Zurich about his experiences at the position, which he left 2 months ago, and the failures of the industry to see how important the issue of user experience is in this digital age and in thinking that the traditional model of distribution is the problem.  The video was put together by Tina Roth Eisenberg (swissmiss.com).  Love the quote:

“Great journalism is its own justification! But great journalism is not a substitute for great user experience.”

Continue Reading →

Very Cool Idea: Lettering.JS

September 16th, 2010

Four obviously talented dudes with much more time on their hands than I can seem to muster have a very slick and ingenious means of performing “radical Web Typography.” For those who don’t already know, typography is one of the new “IT” things right now, particularly since the availability of importing TTF typefaces and now Google Font Directory (and other competing service providers).

In any event, the gist of it is that in order to style individual characters within a single word or phrase, designers were often stuck having to do something like this:

<h1>
  <span>S</span>
  <span>o</span>
  <span>m</span>
  <span>e</span>
  <span></span>
  <span>T</span>
  <span>i</span>
  <span>t</span>
  <span>l</span>
  <span>e</span>
</h1>

Which is a real pain – it’s a lot of code and a lot of thinking just to inject the style.  Plus it makes future change very tedious (for example, what if each letter was downsized 1px – what if you change the word or skip one class ordering?).

Lettering Dot JS is a jQuery plugin (fortunately I use jQuery more than most of the other frameworks at this point) which extends a single class across each individual letter, so instead of the code above, you would have:

<script src="path/to/jquery-1.4.2.min.js"></script>
<script src="path/to/jquery.lettering.min.js"></script>
<script>
$(document).ready(function() {
  $(".fancy_title").lettering();
});
</script>
<h1>Cool Title</h1>

Which would result in (output):

<h1>
  <span>C</span>
  <span>o</span>
  <span>o</span>
  <span>l</span>
  <span></span>
  <span>T</span>
  <span>i</span>
  <span>t</span>
  <span>l</span>
  <span>e</span>
</h1>

There are also .word# and .line# classes for word and line wrapping, plus kerning improvements, and reportedly works well with WordPres.

Check out the release page on Dave Rupert’s blog and the Github distro page.

Great job!

PS: And I learned a new term – FOUT: Flash of Unstyled Text. We see it all the time with the new, well styled typography, guess I just never thought anyone would put a term to it.  Dave’s post has a good explanation but an even better best practices commentary.

Impatience and the User Experience

September 16th, 2010

Any student of UX or UCD should know about “the myth of the average user.”  There is no such thing – we learn that early on.  What we don’t often talk about is some of the things that we share in common.  While we spend time worrying about target audiences and their interests, there are still some things we can generalize about most users.

Tonight I delivered a lecture to my Web Concepts class at UNLV – second time delivering the same lecture – but for some reason I was struck by my own words and reminded that we sometimes lose sight of the fundamentals of living life in an age of the Web.  The lecture topic was about how users influence Web design in terms of characteristics of modern life.  A lot of these ideas were thrown together from a range of UX gurus – Garrett, Krug, Nielsen – but I think this list really says it all.

We don’t read, we scan assimilate

Krug says we scan, meaning we only glance through text content looking for words and colors that jump out at us.  Through Nielsen’s eye tracking studies we know that most users don’t fixate on any specific part of a page for very long and that eyes follow similar patterns across web pages, frequently focusing on very selective areas.

In addition, scanning increases speed and efficiency, and it’s frequently influenced by personal choices and behaviors such as selection of monitor size, how large we make browser windows, whether we zoom, do we scroll, and so on.  (Scrolling, incidentally, is a topic for a whole other post.)

Modern man…impatience at it’s finest

Modern life, with all its technology, speed, and information has done little to improve our lives other than to inundate us with so muchstuff that we have to do everything fast.  I, myself, fall into this category – trying to hold down 4 jobs, school, volunteer work and what little social life that leaves me.  So I know that what I get out of it is an huge amount of impatience.

With all this stuff to do, to look at, to deal with, we’ve become an impatient society.  Fast food, increased speed limits, convenience stores – it seems like everything our lives are hurtling faster and faster.  But with regard to our users, why not use this to our advantage? Let’s take this list of character traits as a starting point:

 

  • We look for the fastest solutions to any problem
  • We only “read” what interests us
  • We lose patience very quickly
  • We don’t like our patience to be squandered

So what does this mean for user experience?  Can we successfully make our sites like a 7-11 store where we can find any suitable product or opinion or data quickly and easily?  If so, it would lend itself to meeting the demands of modern man.

Ultimately the goal of many web sites is to make money.  Period.  A web site is a business, or at least a really small version of one.  Unless we’re pushing captive audience live video or we’re Facebook and can keep our users engaged on a single web page for hours, it is unlikely that we can keep eyes on the page for very long.

And a few quandaries

And of course there’s always the quirks of modern life.  Once again, a list:

  • We follow our intuition, even if it is wrong
  • We like (presumed) “credibility”
  • We like serendipitous browsing

I relate the intuition question to the guy who refuses to ask for directions and would rather drive for hours than swallow his pride.  For some reason, even in our own personal space without any repercussion, we tend to continue down the path we think is right rather than double back and refocus.  Crazy.  The question for an experience designer is…how can we redesign navigation to help guide the user?

Reviews – we all read them, we sometimes believe them, and yet we follow them.  And serendipity – well, there is that quirk of life that we actually like to stumble onto things.  I myself love StumbleUpon because it’s just friggin’ fun to find crap.

So the question is – what can we do to improve the experience of our web site for the impatient user?  Can you, in fact, use this to your advantage?  Would love to hear any stories….

Usability v. User Experience

September 15th, 2010

Right now, usability and user experience are all the rage, in the same way that Web 2.0 was several years back.  I (used to) teach a series on User Centered Design where the focus is on the progression of design and development to create engaging and communicative web sites (re: J.J. Garrett).

But as I continue to get the hundreds of Twitter posts with links to all these articles, it becomes increasingly clear that there is a big difference between USABILITY and USER EXPERIENCE that we seem to gloss over, and maybe even use interchangeably.  While ideally they are similar, they are not the same thing.

Usability, in design, describes the ease in which people can employ or use an object to achieve a goal.  This means that they get from start to finish with minimal difficulty, using intuition and minimal heuristics.  In a narrow context, that might be something akin to completing a purchase on an online store.

User experience, however, describes the emotions and feelings attached to that interaction, including perceptions, affectations, subjective influence and so forth. Some consider usability to be part of user experience, just as information architecture and graphic design might be, but I think that functional aspects of usability, while lending itself to the experience as a whole, don’t drive it, in the same way that our feelings don’t improve the usability of something.

Within the same narrow context of an online purchase, take this example. Suppose we have an online store and we’ve designed every field, every piece of copy, and every interaction to make purchasing fast and with minimal thoughts and actions on the user’s part.  However, let’s say the email confirmation doesn’t list an itemization of the purchase so the user is left bewildered.  In this case, all the usability in the world didn’t end with a good user experience (necessarily).

I’ve seen and built tons of media (video) players, which all suffer the very same – many have complete usability but terrible user experience, while others are the exact opposite.  Visual design is certainly not an excuse for user experience, and definitively not for usability.  Visual design should be a means of conveying and improving those aspects.

The point is that in our drive to improve the design and use of our sites, consider that the two are completely worlds apart, even if there are many aspects that are intertwined. When testing, segregate the ideas of usability (in terms of performance of task) and user experience (how did we feel about it) and build both into the test pattern.

Pantone Visa Cards – Awesomeness

September 12th, 2010

It’s a Pantone chip! It’s a credit card! Stop, you’re both right! The color authority is making its iconic color samples available as Visa cards in a range of hues that looks borrowed from the Crayola “bold colors” markers box but is in fact a quintet of shades tapped by Pantone as fashionably hot—or cool, as the case may be—for spring 2011. Shopaholics can opt for blazing Firecracker (Pantone 16-1452), which the company associates not with pyromania but the spicy virtues of “cheerful, dynamic, and tuned in.” That does a pretty good job of describing sassy wunderkind Christian Siriano, who combined deep fiery red and saturated paprika tones with neutral khaki in a spring collection influenced by African, Indian, and Asian culture (think safari shorts, kimono-sleeved jackets, and of course, gowns). Cooler heads and seafaring types can opt for Regatta (Pantone 18-4039)—a cadet blue that showed up in designer Lela Rose‘s spring collection, which was inspired by richly woven Peruvian textiles, and the preptastic 25th anniversary line-up ofTommy Hilfiger. Also trending cool was Carmen Marc Valvo, who dipped into the Blue Curacao (Pantone 15-4825) for a collection designed in part to boost colon cancer awareness, which has made blue its official color. The aquamarine hue, which makes us thirsty for some Bombay Sapphire and Pantone finds “sensuous, tender, and inviting,” also found a fan in young designer Nary Manivong, who looked to his Laotian heritage and the Amish culture he saw growing up in Ohio to whip up pieces such as an ocean-toned corset wrap dress. Meanwhile, a Beeswax (Pantone 14-0941) Visa is bound to stand out in your wallet while subtly signaling to merchants that you’re “warm, sincere, and generous.” Transaction approved! The mustardish shade found a supporter in Tibi’s Amy Smilovic, who mixed graphic blacks and whites with ochre and cool grape (if you fancy a Lavender Visa) for spring 2011. She declares the must-have ensemble “an ochre top with matching ochre pant.”

Reported by Stephanie Murg on MediaBistro

On the Concept of Process

September 11th, 2010

This is a really great article written by Matt Ward for DesignM.ag.

I’m going to start this discussion of by revealing a secret about my own design work: I don’t have a process. At least, I don’t have a rock solid, time tested step by step formula that I follow for all my projects. That’s not to say that I shoot from the hip or fly by the seat of my pants, to use a couple of cliched old sayings. I certainly take the time to think things through and to be both thorough and methodical in my work.

I just don’t follow the same steps every time.

There are a couple of different reasons for this. The first is the nature of the project. Using web design as a primary example, there are some projects which just lend themselves better to being done primary through a combination of my code editor of choice (Coda) and the browser, using Photoshop only to create really simple graphics. For other projects, however, I just find that it’s better to start mocking things up in Photoshop.

Of course, depending on how I begin the project, the follow through will also be different. If I start in the browser, development will progress in one way and if I start in Photoshop, it will develop in a slightly different way.

I am also impacted by my continuing education. I try to be as active as possible in the design community and am always picking up on new concepts, tricks, ideas and methodologies when it comes to both design and development. This continued learning invariably effects my thinking, which may alter my approach and ultimately change the process for a given project.

As this learning is an ongoing journey for me, I find that every time I start a new project, I am coming at it from a slightly different angle. As such, I don’t think I’ve ever used the exact same design process for any two projects in my entire career.

I’ve been pondering that notion a lot lately, and it’s got me thinking about the whole concept of the design process, and the possible advantages and disadvantages of formulaic and/or free-form processes, which is what I want to look at over the course of this particular article.

Formulaic Process

The formulaic process is exactly the sort of thing that I typically haven’t done. It presents a clear, step by step methodology that is intended to be followed from conception, through execution and all the way to the final completion. It’s organized, often based on extensive experience and may have the impressive support of numerous satisfied customers.

Read the rest on the original post here, or just click more…
(more…)

Being Thankful

September 11th, 2010

Today Jen and I got a chance to help out volunteering at Calvary Downtown Outreach. If you are sitting at a computer (like me), likely in air conditioned comfort, sipping on a cool drink or watching the tube, be thankful. Be thankful that you know where your next meal is coming from. Be thankful that even despite the recession or whatever difficult financial troubles you face, that there actually is a dollar in your pocket. Be thankful that you know you will be safe tonight, know where you will be sleeping, know that tomorrow you won’t wake up to face the harsh life that others might.

The faces of those I met were thankful.  I had seen many of the same ones at Las Vegas Rescue Mission.  I am thankful that our church gives us these incredible opportunities to both help and to realize how good we truly have it.

Within all the “troubles” I face every day, I realize how trite usability problems, schoolwork, lecturing, traffic, what to cook for dinner and how hot it is outside really is.  Be thankful.  Be thankful for what you have, protect it but share it.  We are in this together.

HTML5 video player comparison

September 10th, 2010

source: HTML5 video players
made by Philip Bräunlich for praegnanz.de

Name License JS Library MP4/OGG
Fallback
Flash
Fallback
iOS Full Screen Easy to Integrate Easy to Theme
Projekktor GPL 3 jQuery Y Y Y noish Y Y
FlareVideo MIT jQuery Y Y - Y* Y Y
Video JS GPL 3 jQuery Y Y Y browser window Y Y
JW Player PUEL jQuery Y Y Y - Y Y
Kaltura GPL 2 jQuery Y Y Y browser window Y Y
html5media GPL 3 - Y Y Y Y* Y -
jMediaelement MIT jQuery Y Y Y - Y Y
OIPlayer GPL 3 jQuery Y Y Y browser window noish Y
HVideo custom jQuery Y - Y Y* noish Y
jQuery Video ? jQuery Y - - - Y -
Video for Everybody CC jQuery Y Y Y Y* Y -
Open Video Player custom jQuery Y Y Y browser window - maybe
HTML5 Video Player ? MooTools Y - Y - Y Y
OSM Player GPL 3 jQuery maybe Y triple click to play browser window hell no -

* true fullscreen if browser supports that.

HTML5 Video on IE9

September 2nd, 2010

There’s been a whole slew of articles written about HTML5 performance on the upcoming IE9 including initial reports that it would only support WebM (when the user has the VP8 codec already installed) but as of now, it appears that there will be H.264 support in an unspecified format. Makes development a real bitch. Either way, what I really found interesting across the board is that any article that talks about fallbacks for Internet Explorer mentions Flash.

Why? Even in this age where we know Flash is starting to lose ground to DOM-based solutions using HTML (sometimes 5 but not exclusively) combined with some slick coding or a framework (like jQuery), why do developers still end up falling back to Flash whenever animation or video is mentioned? Particularly with IE, why wouldn’t we fall back to Silverlight instead? I dunno, just seems like a more logical route to take.

University Scans Student ID Cards to Take Attendance at Lectures

August 30th, 2010

As both a private college and university instructor, I’ve frankly often deliberated on this issue.  At the college, attendance is taken and tracked, while at the university it is not.  It isn’t a question of trust or control, it has to do with the learning process and test scores and their effects on both cumulative education as well as Federal funding.

As a student (neither undergrad nor graduate), I don’t think I’ve ever been under an attendance-taking process but I’m still intrigued at that question: Would required attendance actually improve learning?

And the follow-up question: What other processes would help to enhance it in either case?

Weigh in please!

Original article by Lee Bains on Switched:

High schoolers have long grown broad-smiled and wide-eyed when regaled with their older friends’ college stories — parties, sleeping late, football games, and, amazingly to think, no attendance requirements. While those youngsters need not fear that all-night ragers and tailgating will fade into obscurity anytime soon, it may be a different story with class attendance. At least one college, Northern Arizona University, has begun using electronic scanners to track students’ attendance at lectures.
“We do have to say to a lot of students that it really is important that you do show up to class,” NAU associate professor Brandon Cruickshank told NPR. “You are not going to do well if you’re not here.” Buttressed by the arguments of professors like Cruickshank, NAU has decided that, starting today (the first day of the academic year), students will be required to swipe their ID cards upon arrival at large lecture classes. Citing low graduation rates and large numbers of five-year students, the university may be secure in its decision, but many of its students are not.

“I don’t see why we need to be told what to do anymore,” junior Rachel Brackett told NPR. “I feel like it’s a move toward… treating us as though we were juveniles.” While we are pretty sure that, as college students, we would have reacted in a similar way, we are absolutely sure that, when we were college freshmen, we sometimes ignored the pleas of professors like Cruickshank, and inevitably paid the consequences. Take that for what it’s worth, kiddies. It will be on the exam.

Creating Effective Semantic Markup

August 30th, 2010

by Mani Sheriar | November 13, 2009 | Script Junkie

[cross section]

[image from article]

WHAT ARE WEB STANDARDS?

One of my favorite descriptions of Web standards comes from Russ Weakley, of MaxDesign:

“The term web standards can mean different things to different people. For some, it is “table-free sites”, for others it is “using valid code”. However, web standards are much broader than that. A site built to web standards should adhere to standards (HTML, XHTML, XML, CSS, XSLT, DOM, MathML, SVG etc) and pursue best practices (valid code, accessible code, semantically correct code, user-friendly URLs etc).

In other words, a site built to web standards should ideally be lean, clean, CSS-based, accessible, usable and search engine friendly..”

To me, more than anything else, Web standards mean a total separation of style and content, as well as content that is accessible across all platforms, browsers, and devices and available to the widest possible spectrum of users and user agents.

WHY SHOULD YOU CARE?

As a person writing front-end or back-end code, you have several reasons to care about the quality of the (X)HTML you create. Among them, writing high-quality code can do the following:

  • Make it easier (and thus faster and cheaper) for yourself or others in the future to update, add on to, or redesign the site or application you’re working on
  • Reap the well-touted benefits of faster downloads, higher SEO rankings, better accessibility, and future-proofing
  • Gain the respect of your colleagues and clients (which, you know, can help you make a living)

And, my personal favorite if you are a back-end person:

  • Make front-end colleagues love you and love working with you (which, again, can translate into more work and thus more money, because folks like me are going to be much more stoked about working with you again).

HOW DO YOU DO IT?

I like to try to write my code as if I might get hit by a bus tomorrow. I enjoy the idea that anyone with a modicum of coding knowledge could come in, get up to speed, and take over where I left off in a minimal amount of time (and with minimal frustration). I accomplish this in a few ways …

Envision the Unstyled Document

When I am writing my (X)HTML and I come across any question in my mind about the best way to code something (whether to use a blockquote or a div, a definition list or a table, a heading or bolded text), I ask myself one surprisingly simple question, which almost always yields the proper response: “How would I code this if I were doing so for a text-only browser?” Of course, on some level you need to consider your design, but as a designer, I say to you consider it very little when you are writing your markup. Consider it in terms of the containers and the minimal hooks for CSS that you might need to accomplish your layout, but otherwise, when it comes to figuring out the semantics of your actual tags, don’t consider it at all.

Read the rest of this article at the source.

HTML[5]

August 30th, 2010

“[HTML5] is in its infancy right now, but I think the browser will be the next widely recognized artistic medium. It allows such a larger dialog with the viewer. There’s actual two-way communication going on between the art and the observer.”

Chris Milk in Wired

Royalty-free H.264 is a big win for HTML5, big loss for Flash

August 27th, 2010

reblogged from Chris Rawson via TUAW

So far, one of the main arguments against widespread implementation of HTML5 video has been the uncertain licensing future of theH.264 standard. Proponents of Flash video and organizations committed to license-free software, like the Mozilla foundation, said that while H.264 was currently royalty-free (and would remain so until 2015), there was no guarantee that MPEG LA wouldn’t start charging licensing fees later on. 

In that event, if HTML5 had supplanted Flash as the de facto standard for video on the web, it would have meant that organizations and possibly even end users would have found themselves saddled with onerous fees after 2015.

That theoretical stumbling block has disappeared. MPEG LA has announced that H.264 will be royalty-free forever so long as video encoded with the standard is free to end users. This means sites like YouTube and vimeo will never be charged licensing fees to serve video on the web; presumably, it also means that Apple will continue to pay licensing fees to sell videos in the iTunes Store.

Mozilla’s Firefox browser doesn’t currently support HTML5 video (via H.264, that is -Ed); the uncertainty of H.264′s licensing future meant Mozilla wanted to stick with Ogg Theora, a video codec Mozilla believed would be unencumbered by patenting issues. With MPEG LA’s announcement that H.264 will be royalty-free in perpetuity, it’s likely only a matter of time before Firefox joins browserslike Safari, Chrome, and Internet Explorer 9 in fully supporting HTML5.

This is good news for almost everyone except Adobe. Adobe’s main argument against moving away from the current Flash-dominated web video landscape to one with a truly open standard like HTML5 is now invalid. While Flash may continue to hold onto its grip on interactive web content, MPEG LA’s announcement likely points to an end to Flash’s dominance in video. This is also the last nail in the coffin for any possibility of Flash running in iOS — with possibly the biggest obstacle to widespread implementation of HTML5 video now gone, there’s zero incentive for Apple to hitch its wagon to Flash.

[also see this article at Macworld]

HTML5 Video for iPad (p3)

August 26th, 2010

OK, so roll ahead, here’s the end solution. With a very small amount of very simple jQuery, the player will pop to full screen over the existing page elements, and has instant replay and GO LIVE capabilities when in live mode. The scrubber control in VOD mode is not fluid because seek capability is limited. And wouldn’t you know, volume control and bitrate metering for m3u8 segmented dynamic video is not supported on iPad at all (thanks Ken Hanson for helping me out of the frustration and leading me back in the right direction).

iStreamPlanet HTML5 Video for iPad solution with dynamic stream capability

My efforts to keep updating the progress failed – deadlines and classes thwarted me to death, but hopefully I’ll catch up one of these days.  In any case, I had to revise the HTML a bit and add in the jQuery…without giving away the farm, here’s some of it. (more…)

iBenz

August 26th, 2010

OK, I admit I’ve always had a preference for Mercedes.  Now this.  Oh man, I need one.  Maybe I’m not the biggest Apple fan but daaannng…

via Bornrich:

Brabus, one of the most respected tuning companies in the world, has now unveiled its latest creation, the Brabus iBusiness. Based on the Mercedes-Benz S600, the Brabus iBusiness four-seater luxury sedan packs in a range of multimedia features, including two iPads in the rear seats with Bluetooth keyboards and mouse, an ultra-small Mac minicomputer under the rear shelf and a 64GB Apple iPod Touch. The German super tuners have fitted the Mercedes S600 iBusiness with a 15.2-inch TFT display with 16:9 aspect ratio and USB 2.0 ports in the rear compartment to hook up peripherals to the Mac. You can connect to the internet via UMTS and HSDPA. The two iPads control the complete BRABUS multimedia system and the car’s standard S-Class COMAND system with all functions such as radio, navigation system and telephone.

(more…)

HTML5 Video for iPad (p2)

August 23rd, 2010

A couple of things to remember when designing your layout is that you’re working with some slightly odd dimensions.  Consequently you’ll want to plan your visual layout to maximize visibility, and carry those to the bitrate profiles when encoding.

In landscape mode, the window dimensions are 981×661, which gives you enough space to do a “fullscreen” (really “full page”) when you’re showing 16:9 (and still have room for the controls) but if your video is 4:3 you may want to reduce the video to 816×612 which will still give you room for the controls.  Remember that unlike mouse hover controls that have become the standard over the last couple of years, iPad doesn’t have a “hover” state so your controls have to be visible pretty much all the time.  Still, since you really only have a minimal number to play with, you could work on alternate layouts.

In portrait mode, the inner dimensions grow to 980×1208 which gives you a lot of room to work with but since many users would opt to go with the largest viewable video window, it’s probably unlikely that they’d choose to watch the video in portrait mode unless you provide some compelling, potentially interactive content.

Some things to consider:

  • Do I expect to allow multiples sizes (standard and “fullscreen”) or just one?
  • Do I intend to have banner advertising?  Is it being triggered by the video? Can I use spiders or overlays instead?  Do I need a 728×90 or can some other size work better?
  • Will my delivery page have content other than the player?
  • How will the video interact with other content on the page?
  • How does the shrinkage when moving to portrait mode affect the hit range of the controls?  Do I need to enlarge them in that mode?

Next we’ll look at some of the possible solutions depending on the case scenarios.

HTML5 Video on iPad

August 18th, 2010

Yesterday I embarked on developing an HTML5 <video> player specifically for iPad with live HTTP video (m3u8).  I had been toying with both OVP and Projekktor for about a week but the minute I opened it on the iPad, everything went to hell.  Fortunately, the notes on Apple’s website got me back on track and now I’m sitting on a pretty good solution. Admittedly I ended up using jQuery to smooth out the user experience with small animations and queues to the user when the playback lags, but nowadays, its almost expected.

Over the next couple of days I plan to write about what went into getting it to work and some of the interesting notes that I’ve compiled with this struggle to get the product up.  By far the worst problem with <video> is that there is so little compatibility across platforms.  The biggest thing was to keep the player from reverting back to Quicktime when it opened the TS files, which is more or less the fallback.  The second was to provide some semblance of design – not just the basic <video> controls.

I have to say that I am impressed with both OVP and Projekktor though neither were able to conform to these specs.  OVP is excellent for its flexibility while Projekktor is super easy to implement.  I’ll probably write about these more as I continue to work with them.

So for starters…get your head wrapped around the idea of starting from the basics – a simple HTML5 page with minimal styling, jQuery and a basic video tag:

<!DOCTYPE html>
<html>
<head>
  <title>My HTML5 Live Stream Player</title>
  <script type="text/javascript" src="http://code.jquery.com/jquery-
   1.4.2.min.js"></script>
  <script type="text/javascript" src="script.js"></script>
  <link rel="stylesheet" type="text/css" src="style.css"/>
</head>
<body>
  <video id="video-player" width="640" height="360"
   src="path-to-m3u8"
   poster=""></video>
  <div id="video-timeline">
    <div id="played">
      <div id="playThumb"></div>
    </div>
  </div>
  <div id="video-controls">
    <div id="btnGroup1">
      <div id="btn-Replay"></div>
      <div id="btn-Previous"></div>
      <div id="btn-PlayPause"></div>
      <div id="btn-Next"></div>
    </div>
    <div id="btnGroup2">
      <div id="btn-FullScreen"></div>
    </div>
  </div>
</body>
</html>
</body>

Add some basic styling to style.css

/* style.css */
html, body { padding: 0; margin: 0; }
body { background: #333; color: #fff; }
.video-class { width: 640px; position: relative; margin: 0px auto; }
#btnGroup1 { position: absolute; left: 0px; height: 44px; }
#btnGroup2 { position: absolute; right: 0px; height: 44px; }
#btnGroup1 div { float: left; margin-right: 2px; width: 44px; height: 44px; }
#btnGroup2 div { float: right; margin-left: 2px; width: 44px; height: 44px; }

And start up the jQuery with a few listeners and function shells in script.js

var myVideo;
$(document).ready(function(){
  myVideo = $('video')[0];
  addListeners();
});
function addListeners(){
}
function togglePlayPause(){
}
function toggleFullScreen(){
}
function showTimeline(){
}

Tomorrow (or Friday) more on how to style the buttons and get your functions working with the element.

Future of the Internet

August 14th, 2010

by Dan Redding at Smashing Magazine.  Read this fantastic article in its entirety here.

“In only a few short years, electronic computing systems have been invented and improved at a tremendous rate. But computers did not ‘just grow.’ They have evolved… They were born and they are being improved as a consequence of man’s ingenuity, his imagination… and his mathematics.” — 1958 IBM brochure

The Internet is a medium that is evolving at breakneck speed. It’s a wild organism of sweeping cultural change — one that leaves the carcasses of dead media forms in its sizeable wake. It’s transformative: it has transformed the vast globe into a ‘global village’ and it has drawn human communication away from print-based media and into a post-Gutenberg digital era. Right now, its perils are equal to its potential. The debate over ‘net neutrality’ is at a fever pitch. There is a tug-of-war going on between an ‘open web’ and a more governed form of the web (like the Apple-approved apps on the iPad/iPhone) that has more security but less freedom.

An illustration of a computer from a 1958 IBM promotional brochure titled ‘World of Numbers’

So what’s the next step in its evolution, and what’s the big picture? What does the Internet mean as an extension of human communication, of the human mind? And forget tomorrow — where will the web be in fifty years, or a hundred? Will the Internet help make the world look like something out of Blade Runner or Minority Report? Let’s just pray it doesn’t have anything to do with The Matrix sequels, because those movies really sucked.

Read more

Save MySQL from the Dark Side

January 4th, 2010

[thanks Mark R for passing this on...verbatim from the source site]

IF ORACLE BUYS MYSQL AS PART OF SUN, DATABASE CUSTOMERS WILL PAY THE BILL.

In April 2009, Oracle announced that it had agreed to acquire Sun. Since Sun had acquired MySQL the previous year, this would mean that Oracle, the market leader for closed source databases, would get to own MySQL, the most popular open source database.

If Oracle acquired MySQL on that basis, it would have as much control over MySQL as money can possibly buy over an open source project. In fact, for most open source projects (such as Linux or Apache) there isn’t any comparable way for a competitor to buy even one tenth as much influence. But MySQL’s success has always depended on the company behind it that develops, sells and promotes it. That company (initially MySQL AB, then Sun) has always owned the important intellectual property rights (IPRs), most notably the trademark, copyright and (so far only for defensive purposes) patents. It has used the IPRs to produce income and has reinvested a large part of those revenues in development, getting not only bigger but also better with time.

If those IPRs fall into the hands of MySQL’s primary competitor, then MySQL immediately ceases to be an alternative to Oracle’s own high-priced products. So far, customers had the choice to use MySQL in new projects instead of Oracle’s products. Some large companies even migrated (switched) from Oracle to MySQL for existing software solutions. And every one could credibly threaten Oracle’s salespeople with using MySQL unless a major discount was granted. If Oracle owns MySQL, it will only laugh when customers try this. Getting rid of this problem is easily worth one billion dollars a year to Oracle, if not more.