Skip to content
June 14, 2010 / Danii Oliver

HTML 5

HTML5
Ajax hit the server get data return it and not refresh the page.

HTML5 and CSS3 go hand in hand.
Does what Flash Does, but works in the browser is more friendly to mobile devices and is lighter weight.

HOW:
Database:
Can Have a data base in the client and can be accessed a lot faster.
Data has been saved in cookie which has been bad b/c it slows things down.
API is similar to SQLlite
Queries can still be made offline in the browser.

Storage:
Much like cookies stores data in the browser.
Used for simple things that a whole database is not need for.
Json like XML used to transfer data back and forth but Javascript makes it an object. Json.stringify to call and to get it back json.parse

Cache:
Allows to keep static stuff in memory so that those element html, css,js images don’t need to be re-downloaded
It’s great for offline usability

Web Sockets:
Open a connection with a server and keep it open so that the server can send you stuff. when it comes in. It adds things to your browser in realtime… the home page of Facebook (the friend feed).

Cross Document Messaging:
Eliminates the the functionality of other sites posting things on your behalf.
You can now do so in a secure and safe manner.
Your only passing strings not cookies.
You can also talk between tabs. Like adding things to your google calendar while its open in another tab. Basically cross tab automatic cut and paste.
Browsers are going to become working operating systems. i.e. Google’s computer that will run Chrome as the operating system.

Browser History:
allows you to change the url and some other stuff ???
apparently you can push objects and store states… again ???

Video Element:
<video src=”somevideo.mp4″ id=”thevideo” controls=”controls”></video>
VERY SIMPLE!!!
Can be controlled by Javascript.
Controls come from the browser.
**does not work in Firefox but works in Chrome and Safari. Safari 5 has a full screen option.
H.264 is the current codec for Chrome and Safari.
Google has their own codec that they bought and open sourced it.
H.264 has a royalty fee associated with it. Apple and Samsung and Sony are a part of the profiteers.

Audio:
<audio src=”someaudio.mp3″ id=”theaudio” controls=”controls”></audio>
Simply mp3 but still some codec issues like video.

Firefox is put the ability to do more things with audio in the browser. Play with pitch, get the data etc.

**When in doubt fall back to Flash

Drag and Drop:
Self explanatory. Always you to natively drag things in the browser and drop on to something else.
i.e: GMail’s ability to drag files from desktop to the attachments or body of email.

File:
Used with JavaScript able to read files and tag before or as uploading.
You can read the contents of file without having to load or upload the file.
its a File and Read API.

Web Worker:
Allows to work with threads.

Canvas:
Allows you to draw in the browser and track interaction with the graphic.

WebGL:
3D for the web. This is what web and iphone games are now build in.
Look up Open GL

Range Input
Can range the output of data based on developer assigned functions like a slider bar.

Geolocation:
Has the ability to get the user’s location in latitude and longitude and well as speed and direction. Basically an in browser compass or GPS. More precise than IP address.
It uses wi fi data on computers and GPS on the phone. The browser will ask permission first.

CSS3
Rounded Corners:
-webkit-border-radius:5px;
-moz-border-radius:5px;
No more divs and images and padding and yatta yatta yatta.
If you have IE screw you. Your just gonna see a square.

Gradients:
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #CFCFCF), color-stop(0.5, #BFBFBF), color-stop(1, #8B8b8b));
background: -moz-linear-gradient(left top, left bottom, color-stop(0, #CFCFCF), color-stop(0.5, #BFBFBF), color-stop(1, #8B8b8b));
You give the hard value/steps and the browser will fill in the rest for you.

Mulitple Backgrounds:
background : url(http://static.extension.fm/playbutton.png) no-repeat 5px 4px, -webkit-gradient(linear, left top, left bottom, color-stop(0, #CFCFCF), color-stop(0.5, #BFBFBF), color-stop(1, #8B8b8b));

Text Overflow:
overflow : hidden;
white-space : nowrap;
text-overflow : ellipsis;

Web Fonts:
You need to point to where the font lives online. Please do not use fonts that aren’t free. We don’t need Napster like class action lawsuits on font pirating!! @font-face {
font-family: ‘The New Font’;
src: url(‘http://www.example.net/newfont/&#8217;);
}

.webfont {
font-family : “The New Font”;
}
Here is a nice font

Transition:
-webkit-transition-property: width, height;
-webkit-transition-duration: 0.5s;

Like tweening, it does transitions for you and you set the time that the animation takes to happen.

Transformation:
-webkit-transform: translate(100px, 50px) rotate(-65deg) scale(1.5);
More for Designers in stead of having to build memory heavy images you can create and style in the browser.

Animation (on hover):
@-webkit-keyframes pulse {
0% {
background-color: red;
opacity: 1.0;
-webkit-transform: scale(1.0) rotate(0deg);
}
50% {
background-color: blue;
opacity: 0.75;
-webkit-transform: scale(1.1) rotate(-5deg);
}
100% {
background-color: red;
opacity: 1.0;
-webkit-transform: scale(1.0) rotate(0deg);
}
}
.animationdiv {
-webkit-animation-name: pulse;
-webkit-animation-duration: 4s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in-out;
}

Now Out:
A native app to Chrome that as you go to websites with mp3s it will record the location of the mp3 and build a library for you that will play all the songs for you. It will be a www mp3 player. It is a Chrome extension called extenstionFM. Only possible with HTML 5, it only works online and doesn’t download anything just points to where it live on line. Find it at http://www.extension.fm/

Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: