what’s different about html 5 ?

Html 5 is quite a large step in the evolution of the html standard. Support has been provided for features that figure in most modern web applications.

The guide by Mark Pilgrim is excellent. This is a summary of what I learnt from there.

HTML5 is fully backward compliant to HTML4 , meaning a browser which supports  html5 will continue to support your html4 content.

New features:

Canvas
A canvas is a rectangle in your page where you can use JavaScript to draw anything you want. HTML5 defines a set of functions (“the canvas API”) for drawing shapes, defining paths, creating gradients, and applying transformations.
Video
HTML5 defines a new element called <video> for embedding video in your web pages. Embedding video used to be impossible without third-party plugins such as Apple QuickTime or Adobe Flash.
Local Storage
HTML5 storage provides a way for web sites to store information on your computer and retrieve it later. The concept is similar to cookies, but it’s designed for larger quantities of information.
Web workers

Web Workers provide a standard way for browsers to run JavaScript in the background. With web workers, you can spawn multiple “threads” that all run at the same time, more or less.

Offline Web Applications

Offline web applications start out as online web applications. The first time you visit an offline-enabled web site, the web server tells your browser which files it needs in order to work offline. These files can be anything — HTML, JavaScript, images, even videos. Once your browser downloads all the necessary files, you can revisit the web site even if you’re not connected to the Internet. Your browser will notice that you’re offline and use the files it has already downloaded. When you get back online, any changes you’ve made can be uploaded to the remote web server.

Geolocation

Geolocation is the art of figuring out where you are in the world and (optionally) sharing that information with people you trust.

New Input Types
New Input Types in forms

  1. <input type=”search”> for search boxes
  2. <input type=”number”> for spinboxes
  3. <input type=”range”> for sliders
  4. <input type=”color”> for color pickers
  5. <input type=”tel”> for telephone numbers
  6. <input type=”url”> for web addresses
  7. <input type=”email”> for email addresses
  8. <input type=”date”> for calendar date pickers
  9. <input type=”month”> for months
  10. <input type=”week”> for weeks
  11. <input type=”time”> for timestamps
  12. <input type=”datetime”> for precise, absolute date+time stamps
  13. <input type=”datetime-local”> for local dates and times
Microdata
Microdata is a standardized way to provide additional semantics in your web pages. For example, you can use microdata to mark up an “About Me” page. Browsers, browser extensions, and search engines can convert your HTML5microdata markup into a vCard, a standard format for sharing contact information. You can also define your own microdata vocabularies.

Lastly, Minor tweaks like placeholder text and form autofocus.

Flash: the (very) basics

I was getting my head around the various formats and products in the Flash Ecosystem.

fla: The typical file format you use to save a project when using adobe flash. This file contains the components of the flash elements that are displayed.

swf: This is a compressed format that is generated from an fla file. An fla file is compiled into an swf and then displayed to the user. To edit the file you would have to edit the fla file. swf stands for Small Web Format.

swc: This is an archive format. These files contain swf files and a catalog.xml along with un-complied files like property files and assets like css. This is usually used to share resources and functionality. You can use a swc from a team member or the internet in your project to use elements in that archive.

Adobe Flash: is the IDE used in projects where scripting is not the main focus.

Flex is also an IDE used to work on ActionScript intensive projects.

Device awareness I

Retina Display 大勝~

Image by Kent-Chen via Flickr

With the myriad of devices out in the wild today, ensuring your work is seen as you intended it to be is quite a challenge. Here’s a basic toolkit you would need to start addressing this problem.

1) User Agent Switcher – Testing tool. Firefox add-on. To hit your application with requests like they were coming from the devices you want to design for.

2) WURFL api – mechanism to detect and dynamically modify your UI according to the requesting device.

User Agent Switcher

First off, you will need a means to simulate requests as if they were coming from all the devices you want to consider. The Firefox plugin User Agent Switcher is an indispensable tool for the same. After you have installed the plugin, you will notice that you can simulate the iphone and a handful of other devices. You will want a more complete list of devices to simulate. A google search should reveal several such downloadable lists. I found this one adequate. Download this xml and import it as shown below (click on the pictures to see them better):

step 1

Step 2

Step 3

Step 4

Now, just select the device that you want to simulate and browse as usual. The requests from this browser will now be formed as if coming from the device it is emulating. Below is a screenshot of me selecting a kindle version for emulation.

using the emulator

I wrote a small html page that spits out the request headers so I can see my new addon in action. The code for that page is here (do a right click and view source). Below is a screenshot of my Firefox impersonating an iPhone :)

emulating an iPhone

My next post will be ablout the WURFL api that allows you to dynamically adapt to the device requesting your page. Over and out.