HTML5 Lecture for Mobile Applications at Hyper Island Karlskrona

CONNECTING THE DOTS

HTML5 RESPONSIVEDESIGN

CSS3

Cas [email protected]://cas.lemmens.me@Castemelijn

[email protected]

http://somewhat.cc@Somewhat_Mobile

mailto:[email protected]


http://cas.lemmens.me




http://somewhat.cc

http://somewhat.cc

CAS?> Hyper Island Interactive Art Direction Graduate 2011> Digital Conceptor at Design Is Dead (Antwerp, Belgium)> Creative Technologist at Somewhat_ (London, UK)> Concepting, UX and UI, prototyping, ... > Broad perspective on programming languages

> http://cas.lemmens.me> @Castemelijn

> http://somewhat.cc> @Somewhat_Mobile



http://twitter.com/castemelijn

http://twitter.com/castemelijn

http://somewhat.cc

http://somewhat.cc

http://twitter.com/somewhat_mobile

http://twitter.com/somewhat_mobile

HTML5 / BASIC MARKUP

HTML5?> Next version of familiar HTML language> Semantically improved> Better performance> Better integration of media and data

> Still not completely cross platform> Some features are really easy> Some features are really dif!cult

> Mobile-proof> Webapps

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head><title>Sample Title</title><meta http-equiv="Content-Type" content="text/html;charset=utf-8" /><link rel="stylesheet" href="style.css" type="text/css" media="screen" charset="utf-8" />

</head><body>

<script src="script.js" type="text/javascript"></script>

</body></html>

<!doctype html>

<head><title>Sample Title</title><meta charset="utf-8">

<link rel="stylesheet" href="style.css">

</head><body>

<script src="script.js"></script></body></html>

Document de!nition and HTML declaration

Meta-tags

Link-tags

Script-tags

<!doctype html>

<head><title>Sample Title</title><meta charset="utf-8">

<link rel="stylesheet" href="style.css">

</head><body>

<script src="script.js"></script></body></html>

Header

Navigation

Main content Sidebar

Footer

<body><div id=”header”>

</div>Header

Navigation


Footer

</div>

<div id=”navigation”>

</div>

Header

Navigation


Footer

</div>


</div>

<div id=”content”><div id=”main”>

</div>

Header

Navigation


Footer

</div>


</div>


</div><div id=”sidebar”>

</div>

Header

Navigation


Footer

</div>


</div>



</div></div>

<div id=”footer”>

</div></body>

Header

Navigation


Footer


</div>


</div>



</div></div>


</div></body>

#header

#navigation

#content #main #content #sidebar

#footer

<body><div id=”top-bar”>

</div>

<div id=”menu”>

</div>

<div id=”main”><div id=”articles”>

</div><div id=”bar-left”>

</div></div>

<div id=”bottom-bar”>

</div></body>

#top-bar

#menu

#main #articles #main #bar-left

#bottom-bar

<body><div id=”huge-header”>

</div>

<div id=”extended-dropdown-menus”>

</div>

<div id=”what-its-about”><div id=”stuff”>

</div><div id=”irrelevant-stuff”>

</div></div>

<div id=”who-reads-this”>

</div></body>

#huge-header

#extended-dropdown-menus

#what-its-about #stuff

#what-its-about

#irrelevant-stuff

#who-reads-this

<body><div id=”red-jason”>

</div>

<div id=”yellow-trini”>

</div>

<div id=”power”><div id=”black-zack”>

</div><div id=”pink-kimberly”>

</div></div>

<div id=”blue-billy”>

</div></body>

#red-jason

#yellow-trini

#power #black-zack#power #pink-

kimberly

#blue-billy

header

nav

#main section #main aside

footer


</header>


</nav>



</aside></div>


</footer></body>


</header>


</nav>



</aside></div>


</footer></body>

Header tags is used for titles, subtitles, ... Sometimes even navigation.

Navigation should contain the main navigation of your site, preferable using <ul> or <ol>

Sections can be used to identify different parts of your site, if needed with a unique ID to keep them seperate.

Aside is used for information that stands aside of the main content of the page.

Footer contains content such as secondary menus, contact information, mini site-maps, ...

OUT WITH THE OLD, IN WITH THE NEWDeprecated

<frame><frameset><noframes><acronym><font><big><center>...

New

<small><canvas><article><time><mark><meter><progress><hgroup>...

HTML5 / AUDIO & VIDEO

AUDIO & VIDEO> Easy integration of audio and video> No Flash required> Highly customisable

> Problems lies both in !le formats and browser compatibility

> Not supported by IE8 or lower

> Flash can be used as a fallback

AUDIO & VIDEOVideoVideoVideo AudioAudioAudio

Ogg H.264 WebM Ogg MP3 Wave

Explorer 9

Firefox

Chrome

Safari

Safari iOS

Android

Opera

✘* ✔ ✘* ✘ ✔ ✔

✔ ✘ ✔ ✔ ✘ ✔

✔ ✔ ✔ ✔ ✘ ✘

✘* ✔ ✘* ✘ ✔ ✔

✘ ✔ ✘ ✘ ✔ ✔

✘ ✔ ✔ ✔ ✘ ✘

✔ ✘ ✔ ✔ ✘ ✔

* unless installed manually

<video src=”movie.mp4” width=”360” height=”240”></video>

<video src=”movie.mp4” width=”360” height=”240” controls></video>

<video src=”movie.mp4” width=”360” height=”240” poster=”holder.jpg”></video>

<video src=”movie.mp4” width=”360” height=”240” poster=”holder.jpg”><source src=”movie.ogg” type=”video/ogg”><source src=”movie.mp4” type=”video/mp4”>

</audio>

<audio src=”audio.mp3”></audio>

<audio src=”audio.mp3” autoplay></audio>

<audio src=”audio.mp3” loop></audio>

<audio src=”audio.mp3” controls></audio>

<audio src=”audio.mp3” preload=”auto”></audio>

<audio controls><source src=”audio4firefox.ogg”><source src=”audio4safari.mp3”>

</audio>

HTML5 / FORMS

<input id=”status1” name=”status1” type=”text”></input>

<input id=”status2” name=”status2” type=”text” autofocus></input>

<input id=”status3” name=”status3” type=”text” placeholder=”Fill in status here”></input>

<input id=”status4” name=”status4” type=”text” required></input>

<input id=”status5” name=”status5” type=”text” autofill=”off”></input>

<input id=”search” name=”search” type=”search”>

<input id=”mail” name=”mail” type=”email”>

<input id=”website” name=”website” type=”url”>

<input id=”phone” name=”phone” type=”tel”>

<input id=”range” name=”range” type=”range” min=”0” max=”10”>

<input id=”range2” name=”range2” type=”number” min=”0” max=”10”>

<input id=”date” name=”date” type=”date”>

<input id=”color” name=”color” type=”color”>

CSS3 / SELECTORS

ATTRIBUTE SELECTORSE[foo]

E[foo="bar"]

E[foo~="bar"]

E[foo^="bar"]

E[foo$="bar"]

E[foo*="bar"]

E[foo|="en"]

an E element with a "foo" attribute

an E element whose "foo" attribute value is exactly equal to "bar"

an E element whose "foo" attribute value is a list of whitespace-separated values, one of which is exactly equal to "bar"

an E element whose "foo" attribute value begins exactly with the string "bar"

an E element whose "foo" attribute value ends exactly with the string "bar"

an E element whose "foo" attribute value contains the substring "bar"

an E element whose "foo" attribute has a hyphen-separated list of values beginning (from the left) with "en"

STRUCTURAL PSEUDO-CLASSESE:root

E:nth-child(n)

E:nth-last-child(n)

E:nth-of-type(n)

E:nth-last-of-type(n)

E:first-child

E:last-child

an E element, root of the document

an E element, the n-th child of its parent

an E element, the n-th child of its parent, counting from the last one

an E element, the n-th sibling of its type

an E element, the n-th sibling of its type, counting from the last one

an E element, !rst child of its parent

an E element, last child of its parent

STRUCTURAL PSEUDO-CLASSESE:first-of-type

E:last-of-type

E:only-child

E:only-of-type

E:empty

an E element, !rst sibling of its type

an E element, last sibling of its type

an E element, only child of its parent

an E element, only sibling of its type

an E element that has no children (including text nodes)

STRUCTURAL PSEUDO-CLASSESE:link

E:visited

E:active

E:hover

E:focus

E:enabled

E:disabled

an E element being the source anchor of a hyperlink of which the target is not yet visited

an E element being the source anchor of a hyperlink of which the target is already visited

an E element during certain user actionsan E element during certain user actionsan E element during certain user actions

a user interface element E which is enabled or disableda user interface element E which is enabled or disabled

STRUCTURAL PSEUDO-CLASSESE:checked

E:lang(fr)

E::before

E::after

a user interface element E which is checked (for instance a radio-button or checkbox)

an element of type E in language "fr" (the document language speci!es how language is determined)

generated content before an E element

generated content after an E element

STRUCTURAL PSEUDO-CLASSESE:not(s)

E > F

E + F

E ~ F

an E element that does not match simple selector s

an F element child of an E element

an F element immediately preceded by an E element

an F element preceded by an E element

CSS3 / NEW STUFF

VENDOR-SPECIFIC PREFIXES

-webkit-border-radius

-moz-border-radius

-o-border-radius

-khtml-border-radius

-ms-border-radius

3+ 1+ 3+ 9+ 10.5+

1.1+ 3.1+ 2+ 10+ 9.5+

1.3+ 3.6+ 2+ 9+ 10.5+

3+ 3.5+ 3+ 9+ 10.5+

.class {border-radius: 10px

}

p {text-shadow: 1px 1px 2px #999;

}

body {background: url(image.png) no-repeat top left,url(image2.png) repeat-x bottom left,url(image3.png) repeat-y top right;

}

.class {box-shadow: 1px 1px 2px #999;

}

1.2+ 1.5+ 1+ 9+ 9+

3.2+ 3+ 3+ 9+ 10+

.class {opacity: 0.5;

}

p {color: rgba(255,255,255,0.75);

}

body {background: url(image.svg) no-repeat top left

} 4+ 4+ 4+ 9+ 10+

body {background: gradient(linear, left-top, right top, from(#F00), color-stop(0.3, #0F0), to(#00F))

}4+ 3.6+ 4+ 10+ 11.1+

CSS3 / TRANSITIONS

a.foo {padding: 5px 10px;background-color: #7CFFDD;

}

a.foo:hover {background-color: #5EBFA5;

}

Press me!Press me!

a.foo {padding: 5px 10px;background-color: #7CFFDD;-webkit-transition-property: background;-webkit-transition-duration: 0.3s;-webkit-transition-timing-function: ease;

}


}

Press me!Press me!

a.foo {padding: 5px 10px;background-color: #7CFFDD;-webkit-transition-property: background;-webkit-transition-duration: 0.3s;-webkit-transition-timing-function: ease; -webkit-transition-timing-delay: 0.5s;

}


}Press me!Press me!

a.foo {padding: 5px 10px;background-color: #7CFFDD;-webkit-transition: background 0.3s ease 0.5s;

}


}

Press me!Press me!

a.foo {padding: 5px 10px;background-color: #7CFFDD;-webkit-transition: background 0.3s ease 0.5s;-moz-transition: background 0.3s ease 0.5s;-o-transition: background 0.3s ease 0.5s;transition: background 0.3s ease 0.5s;

}


}Press me!Press me!

3.2+ 4+ 3+ 10+ 10.5+

a.foo {padding: 5px 10px;background-color: #7CFFDD;-webkit-transition: background 0.3s ease 0.5s;-moz-transition: background 0.3s ease 0.5s;-o-transition: background 0.3s ease 0.5s;transition: background 0.3s ease 0.5s;

}

a.foo:hover, a.foo:focus, a.foo:active {background-color: #5EBFA5;

}Press me!Press me!

a.foo {padding: 5px 10px;background-color: #7CFFDD;-webkit-transition: background 0.3s ease,color 0.3s linear;

-moz-transition: background 0.3s ease,color 0.3s linear;

-o-transition: background 0.3s ease,color 0.3s linear;

transition: background 0.3s ease,color 0.3s linear;

}

a.foo:hover {background-color: #5EBFA5;color: #FFF;

}

Press me!Press me!

a.foo {padding: 5px 10px;background-color: #7CFFDD;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;-o-transition: all 0.3s ease;transition: all 0.3s ease;

}


}Press me!Press me!

CSS3 / TRANSFORMATIONS

img:hover {-webkit-transform: scale(1.2);-moz-transform: scale(1.2);-o-transform: scale(1.2);transform: scale(1.2);

}

img:hover {-webkit-transform-origin: bottom left;-moz-transform-origin: bottom left;-o-transform-origin: bottom left;transform-origin: bottom left;-webkit-transform: scale(1.2);-moz-transform: scale(1.2);-o-transform: scale(1.2);transform: scale(1.2);

}

img {-webkit-transition: -webkit-transform 0.5s ease-in-out;

-moz-transition: -moz-transform 0.5s ease-in-out;

-o-transition: -o-transform 0.5s ease-in-out;

transition: transform 0.5s ease-in-out;

}

img:hover {-webkit-transform: scale(1.2);-moz-transform: scale(1.2);-o-transform: scale(1.2);transform: scale(1.2);

}





}

img:hover {-webkit-transform: scale(1.2) rotate(-10deg);-moz-transform: scale(1.2) rotate(-10deg);-o-transform: scale(1.2) rotate(-10deg);transform: scale(1.2) rotate(-10deg);

}





}

img:hover {-webkit-transform: scale(1.2) translate(50px, 60px);

-moz-transform: scale(1.2) translate(50px, 60px);

-o-transform: scale(1.2) translate(50px, 60px);

transform:scale(1.2) translate(50px, 60px);

}

CSS3 / ANIMATIONS

Input field

@-webkit-keyframes pulse {0% {-webkit-box-shadow: 0 0 12px rgba(102,204,255,0);

}50% {-webkit-box-shadow: 0 0 12px rgba(102,204,255,0.9);

}}

input[type=”submit”]:hover {-webkit-animation-name: pulse;-webkit-animation-duration: 1s;-webkit-animation-iteration-count: infinite;-webkit-animation-timing-function: ease-in-out;

}

Input field

Input field



}}

input[type=”submit”]:hover {-webkit-animation: pulse 1s infinite ease-in-out;

}

Input field

Input field



}}

input[type=”submit”]:hover {-webkit-animation: pulse 1s infinite ease-in-out;

-moz-animation: pulse 1s infinite ease-in-out;

-o-animation: pulse 1s infinite ease-in-out;

animation: pulse 1s infinite ease-in-out;

}

Input field

RESPONSIVE DESIGN

RESPONSIVE DESIGN / SCALING

RELATIVITY!

TARGET / CONTEXT = RESULT

FONT SCALING> Use a reset stylesheet to start of equally in all browsers.

Check resources for some good examples.> A browser adjusts to its device already.> Follow this trend by using em

> Go from px to em with the known rule

TARGET (in px) / CONTEXT (in px) = RESULT (in em)

<h1>This is my headeline</h1>

<h2>And here is my subtitle</h2>

<p> Perhaps a small paragraph full of irrelevant text might make this page a bit more interesting. You can stop reading now. Seriously, if you’re this far and still reading, I’m either really boring or you’re just not interested in what I’m saying. Or both. Anyway, that will be sufficient for now. </p>

This is my headline.And here is my subtitle.

Perhaps a small paragraph full of irrelevant text might make this page a bit more interesting. You can stop reading now. Seriously, if you’re this far and still reading, I’m either really boring or you’re just not interested in what I’m saying. Or both. Anyway, that will be sufficient for now.

<h1>This is my headeline</h1>

<h2>And here is my subtitle</h2>

<p> Perhaps a small paragraph full of irrelevant text might make this page a bit more interesting. You can stop reading now. Seriously, if you’re this far and still reading, I’m either really boring or you’re just not interested in what I’m saying. Or both. Anyway, that will be sufficient for now. </p>



48px

36px

24px

body {font-family: Georgia, serif;font-size: 100%;

}

h1 {font-size: 48px;margin: 0;

}

h2 {font-size: 36px;margin: 0 0 36px 0;font-weight: normal;

}

p {font-size: 24px;margin: 0 0 24px 0;

}



48px

36px

24px


}

h1 {font-size: 3em;margin: 0;

}

h2 {font-size: 2.25em;margin: 0 0 36px 0;font-weight: normal;

}

p {font-size: 1.5em;margin: 0 0 24px 0;

}



48px

36px

24px


}

h1 {font-size: 3em;margin: 0;

}

h2 {font-size: 2.25em;margin: 0 0 36px 0;font-weight: normal;

}

p {font-size: 1.5em;margin: 0 0 24px 0;

}



48px

36px

24px

48px / 16px = 336px / 16px = 2.2524px / 16px = 1.5

GRID SCALING> Grids are great to keep you site easy to adjust, maintainable and easier to

build. Check resources for some good examples.> It needs to scale with every device

> Go from px to % with the known rule

TARGET (in px) / CONTEXT (in px) = RESULT (in %)

Header

Navigation

Footer

<body>

<section>


</aside>

</body>


<header>

</header>


</nav>

<div id=”main”>

</div>


</footer>

<body>



</aside>

</body>


960px

750px 210px

body {width: 960px;margin: 0 auto;

}

section {float: left;width: 750px;

}

aside {float: right;width: 210px;

}Main content Sidebar

960px

750px 210px

body {width: 960px;margin: 0 auto;

}

/* 750px / 960px = 78% */section {float: left;width: 78%;

}

/* 210px / 960px = 22% */aside {float: right;width: 22%;


960px

750px 210px

body {width: 100%;margin: 0 auto;

}

/* 750px / 960px = 78% */section {float: left;width: 78%;

}

/* 210px / 960px = 22% */aside {float: right;width: 22%;


960px

750px 210px

RESPONSIVE DESIGN / MEDIA QUERIES

One css-!le to rule them all

<!doctype html><head><title>Sample Title</title><meta charset="utf-8">

<link rel="stylesheet" href="style.css" />

</head><body><script src="script.js"></script>

</body></html>

@media screen {/* screen css goes here */

}

@media print {/* screen css goes here */

}

These media queries can be added to your CSS-!le.Less calls to make, but problem of detail persist.

@media screen and (min-width: 1024px) {/* screen css goes here */

}

@media print {/* screen css goes here */

}

That’s more like it...

DEVICE FEATURES USED IN MEDIA QUERIESwidth

height

device-width

device-height

orientation

aspect-ratio

device-aspect-ratio

Width of the display area min- max-

Height of the display area min- max-

Width of the device rendering surface min- max-

Height of the device rendering surface min- max-

Accepts portrait and landscape values

Ratio of the display area’s width over its height. min- max-

Ratio of the device’s rendering surface width over its height. min- max-

DEVICE FEATURES USED IN MEDIA QUERIEScolor

color-index

monochrome

resolution

scan

grid

The number of bits per color component of the devices min- max-

The number of entries in the color lookup table of the output device. min- max-

Similar to color, the monochrome feature lets us test the number of bits per pixel in a monochrome device. min- max-

Tests the density of the pixels in the device min- max-

For tv-based browsing, measures wether the scanning process is either progressive or scan

Tests wether the device is grid-based

@media only screen and (min-width: 800px) { /* Desktop browser styles go here */}

@mediaonly screen and (-webkit-min-device-pixel-ratio: 1.5),only screen and (-o-min-device-pixel-ratio: 3/2),only screen and (min--moz-device-pixel-ratio: 1.5),only screen and (min-device-pixel-ratio: 1.5) { /* iPhone 4, Opera Mobile 11 and other high pixel ratio devices */}

@media only screen and (min-width: 600px) and (max-width: 960px) {/* Good for styling tables */

}

@media only screen and (max-width: 600px) {/* Good for styling mobile devices */

}

RESPONSIVE DESIGN / VIEWPORT

Viewport




</body></html>

600px




</body></html>




</body></html>

320px




</body></html>

VIEWPORT PROPERTIESwidth

height

initial-scale

maximum-scale

minimum-scale

user-scalable

Controls the size of the viewport. Can be either a set number, e.g. 600px or device-width (the width of the screen in CSS pixels at a scale of 100%)

Controls the size of the viewport. Can be either a set number, e.g. 600px or device-height (the height of the screen in CSS pixels at a scale of 100%)

Controls the zoom level when the page is !rst loaded. E.g. 1.0

The maximum a user can zoom in

The minimum a user can zoom in

Allows yes or no. Determines wether a user can scale the page or not.

RESPONSIVE DESIGN / TOUCH ICONS

114 x 114 pxiPhone retina

72 x 72 pxiPad

57 x 57 pxiPhone non-retina

Other phones

Normal icon Precomposed icon

<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png"><link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-72x72-precomposed.png"><link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png><link rel="shortcut icon" href="apple-touch-icon.png">


</body></html>

Place these icons with the exact same name in your root folder, and the iOS browser will !nd them by default, no extra HTML needed.

RESPONSIVE DESIGN / WEB APPS

<meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black">

<link rel="apple-touch-startup-image" href="img/startup.png” />


</body></html>

RESOURCES

GENERAL INFOMobile Web Best PracticesPoly!llsHTML5 LogoHTML5 Rocks

COMPATIBILITYHTML5 PleaseCan I UseHTML5 Readiness

DUMMY STUFFNot Lorem IpsumLoremifyBasic HTMLPlaceKittenDummy ImageGrid Builder

CODE TEMPLATESHTML5 BoilerplateMobile BoilerplateBootstrapSkeletonLessHTML5 ResetCSS3 Please

DEVICE ASPECTSMobile MatricesEmulators & SimulatorsResize my browser

VALIDATIONCSSLintW3C Validator

VIDEOPopcornSublimeVideoJWPlayerVideo for everyone

HTML5 FOR A PROWhat’s new

FONTSGoogle WebfontsFont Squirrel

JAVASCRIPTJQuery MobileModernizrSelectivizrSensa TouchJQTouch

http://mobilewebbestpractices.com/

http://mobilewebbestpractices.com/

https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills

https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills

http://www.w3.org/html/logo/

http://www.w3.org/html/logo/

http://www.html5rocks.com/en/

http://www.html5rocks.com/en/

http://html5please.us/%0D

http://html5please.us/%0D

http://caniuse.com/

http://caniuse.com/

http://html5readiness.com/

http://html5readiness.com/

http://notloremipsum.com/%0D

http://notloremipsum.com/%0D

http://tobiasahlin.com/blog/introducing-loremify/

http://tobiasahlin.com/blog/introducing-loremify/

http://www.blindtextgenerator.com/snippets

http://www.blindtextgenerator.com/snippets

http://placekitten.com/

http://placekitten.com/

http://dummyimage.com/

http://dummyimage.com/

http://gridr.atomeye.com/

http://gridr.atomeye.com/

http://html5boilerplate.com/

http://html5boilerplate.com/

http://html5boilerplate.com/mobile

http://html5boilerplate.com/mobile

http://twitter.github.com/bootstrap/

http://twitter.github.com/bootstrap/

http://www.getskeleton.com/

http://www.getskeleton.com/

http://lessframework.com/

http://lessframework.com/

http://html5reset.org/

http://html5reset.org/

http://css3please.com/

http://css3please.com/

https://github.com/h5bp/mobile-boilerplate/wiki/Mobile-Matrices

https://github.com/h5bp/mobile-boilerplate/wiki/Mobile-Matrices

https://github.com/h5bp/mobile-boilerplate/wiki/Mobile-Emulators-%2526-Simulators

https://github.com/h5bp/mobile-boilerplate/wiki/Mobile-Emulators-%2526-Simulators

http://resizemybrowser.com/

http://resizemybrowser.com/

http://csslint.net/

http://csslint.net/

http://validator.w3.org/

http://validator.w3.org/

http://mozillapopcorn.org/

http://mozillapopcorn.org/

http://sublimevideo.net/

http://sublimevideo.net/

http://www.longtailvideo.com/players/

http://www.longtailvideo.com/players/

http://camendesign.com/code/video_for_everybody

http://camendesign.com/code/video_for_everybody

http://html5-demos.appspot.com/static/html5-whats-new/template/index.html

http://html5-demos.appspot.com/static/html5-whats-new/template/index.html

http://www.google.com/webfonts

http://www.google.com/webfonts

http://www.fontsquirrel.com/

http://www.fontsquirrel.com/

http://jquerymobile.com/

http://jquerymobile.com/

http://www.modernizr.com/

http://www.modernizr.com/

http://selectivizr.com/

http://selectivizr.com/

http://www.sencha.com/products/touch/

http://www.sencha.com/products/touch/

http://jqtouch.com/

http://jqtouch.com/

THANKS!GOD BLESS!QUESTIONS?

Cas [email protected]://cas.lemmens.me@Castemelijn

[email protected]

http://somewhat.cc@Somewhat_Mobile







http://somewhat.cc

http://somewhat.cc

HTML5 Lecture for Mobile Applications at Hyper Island Karlskrona

Self Improvement

Transcript of HTML5 Lecture for Mobile Applications at Hyper Island Karlskrona