Posts Tagged ‘HTML5’

Exploring browser animation options: Part three, Canvas

Published by | Saturday, October 6th, 2012

Over the past few weeks my blog posts have been exploring different animation options available in modern browsers. First, I looked at using CSS, and then jQuery. In this article I want to take a look at a third option, Canvas, and talk about some of the advantages and limitations of working with this part of the HTML5 specification.

All about Branden Hall, interactive architect and digital maker

Published by | Monday, March 5th, 2012

This week we celebrated the release of a new series entitled Branden Hall: Interactive Architect and Digital Maker. The series features an in-depth interview that lynda.com co-founder Lynda Weinman conducted with Branden last year, along with a tour of some of Branden’s most interesting work.

So who is Branden Hall, and why did we think it was important to talk with him?

     • Branden has been associated with lynda.com for a long time, having been a featured speaker at many of the early Flash Forward conferences. This photo is from the 2004 conference in San Francisco. Notice the exciting technological advance that Branden was describing: the transition from ActionScript 1 to ActionScript 2!

     • Branden has long been a thought leader in the use of digital technologies, including, and perhaps especially, Flash. Along with some other young developers and designers, he was responsible for exploring what Flash was able to do in its early years, beyond even what Macromedia originally envisioned.

     • Along with Joshua Davis, he was one of the guys who gave IBM’s Watson the animated “face” that “he” uses to celebrate “his” defeat of human Jeopardy! opponents. When Watson’s face moves and changes, it’s because of the team of programmers and designers who made it do that.

     • As the web has evolved, Branden’s work has evolved with it. His Endless Mural project shows how combining the web with new technologies like HTML5 can create crowd-sourced art collections that are available to all.

Over the years, Branden has led the way in showing how technologies like Flash and HTML5 can be used in innovative and exciting ways. In this mini-documentary, Branden gets to tell us a bit about how he comes to his ideas and how they’re realized. I could go on and tell you more, but this video series lets Branden tell you about it himself. We hope you enjoy it.

 

Interested in more?
• The full Branden Hall: Interactive Architect and Digital Maker segment
• All developer courses on lynda.com

Suggested courses to watch next:
Flash Professional CS5 Essential Training
Building Mobile Apps for Multiple Devices with Flash Professional
HTML5 First Look
HTML5: Messaging and Communications in Depth
Big Spaceship, Digital Creative Agency

13 courses to help you learn HTML5 on lynda.com

Published by | Wednesday, February 15th, 2012

Recently I’ve been asked by some very influential people why lynda.com hasn’t published an HTML5 essential training course yet. Isn’t HTML5 an enormously important topic? Isn’t HTML5 at the core of how the web is being transformed and adapted to the new reality of modern web browsers on desktops, cell phones, and tablets? Isn’t HTML5 changing how rich media (audio and video) is delivered on the Internet? And isn’t HTML5 on its way to replacing web browser plugins such as Flash Player and Silverlight that we’ve depended on for many years? (Whether HTML5 will completely replace the plugins on the web, and how long it will take, is a matter of debate—but that’s for another discussion and another day.)

How could lynda.com have ignored this critical topic? If lynda.com is such a forward-looking educational company, how could we have missed this tectonic shift in the web development landscape??

No worries; we didn’t miss the boat. Simply put, we decided last year that HTML5 was too large a subject to cover in a single course. HTML5 isn’t a single technology; it’s an umbrella term that’s used by the W3C (the Worldwide Web Consortium, a standards-setting body in Switzerland that’s theoretically in charge of how the web works) to describe a set of specifications that let you manage all sorts of things in a web page or application with relatively simple code. (These specifications include both HTML tags and a set of powerful JavaScript APIs.)

We broke down the subject into a series of courses, each taught by an instructor who was able to specialize in one or more aspects of HTML5, and started publishing the courses in mid-2011. We then continued periodically releasing these smaller, focused courses with a new deep dive into some aspect of HTML5 until the last of the 13-course series was released in January 2012, declaring our first pass at coverage of HTML5 to be officially complete. And so, this seems like a good time to review what we’ve created.

If you’re just getting started with HTML5, you might first watch HTML5 First Look taught by lynda.com senior staff author James Williamson. In this course, James offers a birds-eye view of the purpose and usage of HTML5, and includes invaluable references to sites and other resources you can use to keep up with HTML5’s ongoing evolution.

For your first hands-on course, I suggest HTML5: Structure, Syntax and Semantics, also taught by James Williamson. Here, you’ll see how basic HTML code looks, and how to set the stage for all the fun stuff you’ll learn to do later.

From there you can sample a broad array of juicy HTML5 dishes. Each of the remaining courses focuses on a single aspect of HTML5, and you can watch them in any order. To animate your pages, watch HTML5: Graphics and Animation with Canvas taught by Joe Marini. To add drag and drop interactions, look at HTML5: Drag and Drop in Depth taught by Bill Weinman. And for rich media, check out HTML5: Video and Audio in Depth taught by Steve Heffernan.

Want to work with advanced data entry forms (HTML5: Web Forms in Depth) or in-line document editing (HTML5: Document Editing in Depth)? We’ve got that. How about network communications (HTML5: Messaging and Communications in Depth), multi-threading (HTML5: Background Processes with Web Workers), working with the user’s physical location (HTML5: Geolocation in Depth), managing browser history (HTML5: Managing Browser History), or working with local databases (HTML5: Local Storage and Offline Applications in Depth) and text files (HTML5: File API in Depth). Yes, we’ve got all that too.

The 13 courses in this series cover nearly all aspects of the HTML5 specifications. By designing the courses in this modular fashion, we’ve hopefully made it easier for you to find and learn the specific skills you need to satisfy the needs of your web project, your job, or your curiosity. Taken together, they’re the equivalent of a single master-class in HTML5 development—essentially, “HTML5 Essential Training” from lynda.com.

And as we promised when the series was launched, we’re keeping an eye on the evolution of both the HTML5 specs and and how the web browsers implement them. When we see significant changes, we’ll update these courses with the latest information.

So no, we didn’t fall asleep at the switch. HTML5 is a fast-moving set of technologies, and we’ll keep on doing what’s needed to help you incorporate the latest technologies into your web sites and applications.

What HTML5 courses will you add to your lynda.com queue first?

Interested in more?
• All developer courses on lynda.com
• All courses from David Gassner on lynda.com

Suggested courses to watch next:
HTML5 First Look
Dreamweaver CS5: Getting Started with HTML5
iOS 4 Web Applications with HTML5 and CSS3
HTML5: Local Storage and Offline Applications in Depth
HTML5: Graphics and Animation with Canvas

Talking HTML5: Graphics and Animation with Canvas with Joe Marini

Published by | Friday, June 3rd, 2011

To round out our week of HTML5 content, today we’re releasing Joe Marini’s new course, HTML5: Graphics and Animation with Canvas. Joe also created HTML5: Web Forms in Depth, which we released on Tuesday, and has created many other lynda.com courses on web development subjects. Here’s what he had to say:

Q: What got you interested in HTML5?
A: The new scenarios that it unlocks. The web is marching inexorably toward being a true distributed application platform, and HTML5 is another milestone in that progress. Already we’re seeing web sites take advantage of the new features, and I think that’s great.

Q: Where do you get your information about HTML5?
A: I usually go straight to the source—either the W3C or the WHATWG specifications. Other than that, I try to keep up with the various vendor-related web sites that document what they are doing in their specific browsers. There’s so much to keep up on, I created a tab group in Internet Explorer just focused on these sites. I typically visit each one of the sites in the group once a week or so.

Q: What are some of your favorite HTML5-oriented web sites or blogs?
A: Well, I document what we’re doing in IE Mobile on the Windows Phone Developer Blog , but I read most of the other vendors’ blogs as well. I also keep up on what the other authors are doing here on lynda.com as well. There are some really great example sites out there too—html5demos.com and the IE Test Drive are some of my favorites.

Q: What is your favorite gadget? What do you wish you owned?
A: My Windows Phone 7. But I really wish I owned a Light Saber or maybe a cloak of invisibility.

Q: What’s one thing you’d love to see in future web technologies?
A: Being able to build applications that push outside the boundaries of the traditional browser. That will really enable some great scenarios and allow developers to broadly expand the kinds of applications that they can create.

Discussing HTML5 video and audio with author Steve Heffernan

Published by | Thursday, June 2nd, 2011

As part of our series of courses on HTML5, we’ve released a new course called HTML5: Video and Audio in Depth. I had a chance to catch up with new author Steve Heffernan to talk to him about this topic. Steve Heffernan is a web front-end developer with 12 years of experience, and an HTML5 video enthusiast. He has spoken on HTML5 video at the Open Video Conference, and is the creator of the popular HTML5 video player, VideoJS. He is also co-founder of Zencoder, a cloud-based video encoding service.

Q: What got you interested in HTML5 video and audio?
A: Years ago I built a Flash video player for the university I was working for. I enjoyed that project a lot, and learned a ton about web video in the process. While Flash is a great platform, I’ve always preferred browser-native technologies (HTML/CSS/JS), so when the opportunity came to use an HTML-based player I jumped on it. I was on a team in the ’09 Rails Rumble, and we were attempting to build a video platform in 48 hours. HTML5 video was still very young at the time and so probably not the best choice for such a time-sensitive project, but we got it working, and I’ve been working with it ever since.

Bill Weinman discusses HTML5: Local Storage and Offline Applications in Depth

Published by | Wednesday, June 1st, 2011

The latest course in our series on HTML5, HTML5: Local Storage and Offline Applications in Depth, is all about local storage: using the new features being implemented in modern web browsers that enable saving and managing data on a local client, whether it’s a desktop computer or mobile device. Author Bill Weinman has created many courses for lynda.com on web, database, and mobile application development subjects. Here are his thoughts on HTML5.

Q: What got you interested in HTML5?

A: I’ve been interested in HTML since the early ’90s. HTML is what makes the web accessible for anyone who wants to publish something and find an audience. Early versions of HTML served that purpose well, for those whose major expression is the written word, but for everyone else HTML had to evolve. By the time Lynda and I wrote the first edition of Creative HTML Design (New Riders, 1997) we could use the web for some rudimentary presentation, and we could publish other forms of media by using ‘helper’ programs that would be launched by the browser, but HTML5 finally brings reality to the promise of the web: a fully interactive rich media experience.

Author James Williamson discusses his new HTML5 course on structure, syntax, and semantics

Published by | Tuesday, May 31st, 2011

We’re very excited to be releasing a series of courses on HTML5 this week. Senior staff author James Williamson kicks off the content with a new course releasing today, HTML5: Structure, Syntax, and Semantics. This course is designed as the starting point; other courses will teach how to use HTML5 web forms, local storage, rich media, and graphics with the HTML5 <canvas> tag. Let us know what else you’re interested in learning about HTML5 by leaving us a comment with this post.

I had a chance to ask James about his experiences preparing for this course.

Q: What got you interested in HTML5?
A: When it seemed that the implementation of XHTML 2 just wasn’t going to happen. I remember hearing about the founding of WHATWG and how they planned to keep working on HTML. At the time I viewed it as a pleasant curiosity, but as we can see, they were on the right track.

Q: What are some of the most surprising uses of HTML5 you’ve seen?
A: I have to be really careful here, because there are a lot of demos and examples floating around out there that, while amazing executions of HTML and JavaScript, aren’t technically HTML5. Overall, I’d have to say I’m most surprised at how quickly Canvas is maturing. Although the Canvas API is in its own spec in the W3C, the canvas element is native to HTML5. Check out Hakim El Hattab’s demo page and you’ll see how far some people are pushing the envelope.

Can you use CSS3 now?

Published by | Wednesday, November 17th, 2010

Chances are, if you are a web designer or developer, you’ve at least heard of CSS3. If you haven’t had the time to dive into the modules yourself, you’re no doubt wondering if it’s ready to use now. Well, the short answer is yes, it is! There is, of course, more to it than that. As with any emerging technology, you need to develop a strategy for deploying CSS3 on your sites that accounts for either inconsistent or non-existent support between browsers or devices.

By now, you’ve probably come to terms with the fact that web sites don’t look exactly the same across different devices and browsers. If you’ve been designing sites for a while, you probably already have a strategy in place for dealing with browser inconsistencies. In most cases, your existing workflow for dealing with these will work just fine when adding CSS3 to your sites.  However, there are some specific considerations you need to be aware of when dealing with CSS3, so let’s take a moment to discuss strategies for introducing CSS3 into your sites.

First, make sure that using CSS3 makes sense for your site. Occasionally we get so caught up in using the latest features and technology that we lose sight of the needs of our users. Before using any of the new capabilities of CSS3 make sure that using them actually enhances your design.

Once you’ve settled on using CSS3, it’s best to approach it as a means of enhancing the design of your site, rather than driving it. Make sure you have a solid layout and design without relying on CSS3 techniques to make it work. Then gradually enhance your design with CSS3 to present a much more robust experience to those using supporting devices.  This will allow you to present functional designs to your users regardless of the device they are using. This approach, called progressive enhancement, is a common way of dealing with device inconsistencies for both styling and behavior, and is a great foundation for any CSS3 deployment strategy. It’s worth mentioning here as well that if you are providing fallback content for non-supported devices, make sure the absence of CSS3 features doesn’t harm your design. Features like multiple backgrounds, transparency, and drop shadows can cause content to either look odd when absent or cause readability issues with your text. In those cases, make sure that alternate styles are presented that ensure the clarity of your content.

In learning about CSS3, you are bound to come across many solutions for enforcing or adding support for CSS3 features in older browsers. While there are some great solutions out there, keep in mind that many of theses workarounds are time consuming, result in larger and slower pages, and can cause rendering errors if not executed properly. Make sure that the extra effort is worth it. In many cases, simply providing those users with a more basic, functional site is the better solution.

Any current discussion on utilizing CSS3 would be incomplete without dealing with Internet Explorer. While Firefox, Opera, Safari, and Chrome have all been gradually adding support for CSS3 to their browsers, the same is not true for Internet Explorer. Until version 9 is released, many of the new features in CSS3 will not work in Internet Explorer at all. That alone is enough for some designers to ignore CSS3, and frankly, that’s a shame. One browser’s shortcomings should not prevent you from enhancing the design of your sites.

When dealing with Internet Explorer, you have a few choices in how to progressively enhance your designs. First, you can simply write CSS 2.1 base styling and let it ignore the selectors or properties it doesn’t support. For more complex designs, or for cases where the lack of CSS3 styling would cause rendering issues, you could pass alternate style sheets to Internet Explorer through the use of conditional comments. Conditional comments are a widely used technique for addressing the specific styling needs of Explorer, and are a great way of overwriting unsupported CSS3 styling.

Another way to use CSS3 with Internet Explorer is to use the Progressive Internet Explorer or CSS3 PIE library. PIE is a small javascript library that adds limited CSS3 support to older versions of Internet Explorer. It’s free, easy to use, lightweight, and gives you a way to use CSS3 features such as border-radius, box-shadow, and gradients through a single line of code.

I also recommend taking a look at using Modernizr. Modernizr is free, small javascript library that provides detection support for a wide range of next generation web capabilities. Not surprisingly, CSS3 is among them. Although Modernizr won’t add capabilities to non-supporting browsers, it does make it much easier to provide fallback content to these browsers and devices. What’s more, it adds detection capabilities for HTML5 as well, making it a smart choice for anyone wanting to start working in HTML5 and CSS3.

CSS3 gives designers an exciting set of new and enhanced features to use when styling page content. However, it’s evolving nature and inconsistent support requires you to have a solid strategy for using it. Be sure to carefully plan which features you want to use, and how you are going to account for this styling in unsupported devices. Having such a strategy in place will allow you to enhance your user experience in modern browsers while still providing solid functionality to older browsers and devices. Keep an eye out for our upcoming CSS3 course to learn more about these techniques, and many of the new features and capabilities in CSS3. In the meantime, the accompanying video from my HTML5 First Look course gives a good basic overview of CSS3.