Category: Software | Apps

HTML 5 – What does it mean to me? #elearning #web development #creative #lrnchat

HTML 5 is a major step forward for the web and the ability for developers to create the next generation of tools and applications for users. There’s been a lot of talk over the last couple of weeks with Adobe and Apple and I think there is a lot of confusion out there so I hope this assists in clarifying what it will mean to you. 
Overview
HTML 5 is a open standard that is still in development but the major browsers FireFox, Safari, Chrome and Opera have jumped in to support it. While the standards are still being developed there are features that are common among them and over the next several months we’ll see improved support as updates come quick from the browsers. You’ll notice one browser is missing, did you catch it? Microsoft announced a beta version of Internet Explorer at the Mix conference earlier this year. You can download the latest rev at: http://www.ietestdrive.com/

Does HTML 5 replace Flash?
HTML 5 is not designed as a replacement for Flash but does provide new tags for directly dropping in audio and video without 3rd party plug-ins. This is a huge improvement and makes it easier for content developers to deliver their content to users. A great example of this is how YouTube can be currently viewed in HTML 5 or via Flash and HTML 4. 

HTML 5 also supports animation, vector graphics and several new standards which overlap with Flash and would strongly be considered before using Flash because of their ease of integration and delivery within the browser. Flash will not go away but will continue to grow and be used as a language for delivering content and interactive experiences and applications.

This provides developers with additional tools to have users interact with content, information and improve web based applications.

HTML 5 brings 4 major improvements to the browser:


1. Graphics – improve graphics and animation support without additional codecs within the browser


2. Location – create an API for being able to show where you currently located or what is around you for mobile devices


3. Storage – ability to store offline locally within the browser data so that you do not have to have a constant connection to a site


4. Speed – improve browser speed in working with content, running scripts in the background and improving user experience

The HTML 5 committee wants to insure:

1. Support Existing Content so whatever was created in the past will still continue to work


2. Insure Interoperability between browsers and technologies so that it would be easier to create apps. 


3. Support of Standards – these are still being developed but they are off to a great start, explained below. Hopefully the major browsers will see this the same way. For example, when you shop for a car, its standard for a car to come with wheels and brakes.

Pastedgraphic-9


4. Improved Error Handling – when a browser encounters a error, instead of crashing the browser, a dialog box will appear asking you if want to continue or stop the action. 


5, Evolve, not recreate what we already have – which translates to not just creating new standards for the sake of it, they want to focus on building and developing standards that will improve the language and improve developers as well as viewers experience with the web.

There are 5 major areas that you can start to play with and take advantage of the technology today.

Pastedgraphic-3

1. Canvas & SVG
HTML 5 includes support for two new graphic formats:


Scalable Vector Graphics – SVG
– this allows you to embed Illustrator graphics/content or EPS files in the SVG format and directly support it via the browser. Because of the vector format, these graphics are scalable, look great and appear to the user as a rendered JPEG. This means you can use one product or company logo and instead of saving in multiple files and sizes you are able to use one SVG graphic and resize via code without additional file size or graphics to maintain or load on the users browser. 


Canvas API – provides a new way to deliver graphics and animation via the browser with interactivity. Examples:

First Person Gifter – in this example you walk around a maze using the arrow keys on your keyboard. Notice the alpha channel on the flowers as you move around. Excuse my collisions with the walls. 

Canvas and SVG are currently supported in: 

Pastedgraphic-1

Pastedgraphic-4

2. Video
Currently when we think of video playback on the web we think of Flash as our major delivery technology. HTML 5 introduces a new tag for directly embedding video onto a page just like we include a graphic currently.

// HTML 5 makes <video> as easy as <img>
versus a Flash embed:

Pastedgraphic-5

Currently there are two main codes competing, H264 supported by Apple and Chrome and OGG Theora supported by Chrome, FireFox and Opera. Interesting tidbit – OGG Theora codec was named after Theora Jones, Edison Carter’s Controller on the Max Headroom television program.OGG was released into the open source community by On2 Technologies which was acquired by Google late last year. Google is suppose to announce a newer version of the On2 codecs. Steve Jobs made a comment last week that the OGG codec has issues with licensing and patents just as the H264 has. Currently, from what I’ve read the H264 content is ok to use until 2015 when licensing could become a issue again. 

H264 is supported by all major video technologies and what’s nice for video content developers is that the same compressed video can be supported via Flash and HTML 5 so you can have one video running in both environments and not have to compress multiple versions.

QuickTime supports the export of H264 easily and you can export to OGG via a free add-on to QuickTime at http://xiph.org/quicktime/download.html.

Another great feature HTML 5 video is going to support is the ability to click anywhere within a download stream, prior to it being cached which will provide a nice way for viewers to jump around in video content and cache from the point that they want to view.

Video tag currently supported in: 

Pastedgraphic-6

3. Geolocation API
The geolocation api brings browser based location to applications. This will allow you, while viewing browser content and a map to show your current location on it or while walking down the street you can search for a restaurant or based on your interest in eating lunch your phone or mobile devices shows you several stores or locations on a map.

Example: http://htmlfive.appspot.com/static/whereami.html

Geolocation currently supported in: 
 (currently mobile safari only supported)

Pastedgraphic-7

4. App Cache and local database storage provides a way for users that are viewing or working with content to continue while offline. This will allow developers to sync or move data to the local side, allow the user to edit and then automatically upload once an internet connection is available.

App cache and local database currently supported in: 

Pastedgraphic-8

Web workers defines an API for running background scripts.

Web workers currently supported in: 

How do I get Started?

http://www.html5doctor.com 

Great place to learn about and get started with HTML 5

http://www.caniuse.com/ 

To learn about what works in each browser, a great resource

http://www.html5demos.com

Resource for examples and how to’s

http://html5gallery.com/

See mainstream examples of sites using HTML 5 today

http://www.css3.info

Learn about CSS 3

http://www.kesiev.com/akihabara/

A 2D gaming engine for HTML 5

There are also javascript libraries that you can use today to test if the browser is compliant and if not switch to an alternate version of the content or page based on the browser.

Looking Ahead
With the latest from Apple and Google building upon the webkit browser, the future looks great for developers and users to get the best in content delivery. Blackberry also announced last month that their OS 6 releasing this summer will be built on the Webkit browser as well so look for consistency there now as well.

Hope that helps you get started and gets you thinking about how to incorporate into your next project!

SnagIt for the Mac Beta now available – Screen Capture Utility

Snagit is a great screen capture and annotation product that has been available for Windows for several years and TechSmith is just announced an open beta for the mac version. If you haven’t used it I would recommend taking it for a test drive, it provides several great features in capturing screens as well as adding annotations during reviews or sharing information with clients or internal teams. Remember TechSmith also offers the free jing screen capture for stills and video at: http://www.jingproject.com/.

Snagit-icon

Download the beta at : http://www.techsmith.com/snagitmac/

Learn more by watching the video:

Snagit_mac_beta-1




For Windows: Learn more at: http://www.techsmith.com/screen-capture.asp


TechSmith also introduced Camtasia: mac earlier this year for $99. You can download a test drive, it works great for training videos, screencasts as well as marketing pieces. http://www.techsmith.com/camtasiamac/

Camtasia_for_mac

TweetDeck .25: The Twitter Desktop Tool and so much more….

If you are using Twitter and looking for a desktop tool, take a look at TweetDeck. It’s in beta, it’s free and it’s available for both mac and windows.

The interface can be used as a simple 1 column feed and tweeter or you can customize it to include groups of friends, Facebook Status, Direct Messages and include several columns of information based on the size of your monitor and your needs.

http://www.tweetdeck.com/
 
For a quick tutorial, check out this getting started video by Cali Lewis/Geekbrief.tv <a href="http://www.geekbrief.tv/gbtv-517-how-to-tweetdeck-like-a-pro.

http://www.geekbrief.tv/gbtv-517-how-to-tweetdeck-like-a-pro.</p>

Safari 4 Beta – Play with it Today!

The latest beta release for the Safari browser looks great and is fast. When you first try it out, the tabs (now above the title bar) seem a little out of place but once you play with it for a while I’ve come to the conclusion it is an improvement. So far I have not run into any problems on my routine daily sites, blogs and apps.

 As you type in a url or in the search area, a auto-drop down appears with choices which is a great time saver. There is also built in spell and grammar checking now. The new zoom in/out page view is nice implemented as well. The beta is available for both mac and windows. Full feature list at: http://www.apple.com/safari/features.html

 Learn more at http://www.apple.com/safari/

Pastedgraphic

TweetDeck – Application for Twitter & Tutorial Link

If you are looking for a desktop app for mac or windows, check out TweetDeck at http://www.tweetdeck.com/. Its an Adobe Air based application that lets you split your feeds into smaller bites to allow for easier management as well as posting tweets. Its currently in Beta and available for free.

 Also check out this great getting started video by Cali Lewis/Geekbrief.tv <a href="http://www.geekbrief.tv/gbtv-517-how-to-tweetdeck-like-a-pro.

http://www.geekbrief.tv/gbtv-517-how-to-tweetdeck-like-a-pro.<p>

Pastedgraphic

Silverbackapp.com – Usability Testing software for the Mac

Silverback is described as “guerilla usability tests” by its makers Clearleft, it allows you to use a mac and the app to record the user onscreen movements as well as their facial expressions using the built in camera on your mac. Its pretty incredible, for $49.95 and you can try it for 30 days for free. It auto highlights each click and allows you to review user activity and movements. I think its a great way to introduce to your team or clients to the ability during testing or focus group testing to also record inexpensively the movements and use the test data to help perfect your web site or product. Check it out at http://is.gd/12wf

Pastedgraphic

Quick overview of what it does and how it works.

0pastedgraphic

Jingproject.com – free screen and video screen recording tool.

I’ve been using the Jing application on a mac and pc for several months now. They have had several updates and if you installed the original version last year, you should download and reinstall because the original version, at least on the mac, did not auto-check for updates. The latest rev has several bug fixes and refinements in its interface. Jing can auto start and be available with a click of a button or by a keyboard shortcut. What’s great about Jing is you can select to grab the entire screen or a portion of the screen as a still or as a video. Looking at the still grabs you can easily annotate with text, add arrows or highlights which makes it a great for bug recording or pointing out parts of graphics that you need your team to address, adjust or work on. The video tool allows you to easily save a screencast to share with a client or friend and either post, email or use the Jingproject.com site to instantly share via a link. Strongly recommend adding this free tool to your toolset and taking advantage of its features. Jing now offers a pro version to enable better video compress plus several additional Pro features. Jing was created by Techsmith.com which has several great windows products including Camatasia, Snagit, Morae, and Uservue.

Jingproject

Example of a marked up screen:

Jingsample