View
1.002
Download
3
Category
Preview:
DESCRIPTION
taster of HTML5, CSS3 and offline storage
Citation preview
Web Design Redux
Rounded Corners
border-radius: 10em;-moz-border-radius: 10em;-webkit-border-radius: 10em;
CSS3
Text-shadow
text-shadow: #color x-coord y-coord blur-radius;text-shadow: #0084d7 1px 1px 2px;
Hello
CSS3 – cont.
Web Fonts@font-face “Neutraface”, Helvetica
Providers:TypeKit FontDeckTypothequeKernest Google
CSS3 – cont.
-moz-transform: rotate(7deg);
-webkit-transform: rotate(7deg);
-o-transform: rotate(7deg);
CSS3 – cont.
LOST
<!DOCTYPE html>
<html>
<head>
<meta content='text/html; charset=utf-8' http-equiv='Content-Type' />
<title>demo</title>
</head>
<body>
<header></header>
<nav></nav>
<article>
<header></header>
<section></section>
<aside></aside>
<footer></footer>
</article>
<footer></footer>
</body>
</html>
HTML5 <structure>
<video src=“inception.m4v" controls>Sorry, we’re going to have to fallback to Flash
</video>
HTML5 Video
<html manifest=“cache.manifest”>
CACHE MANIFEST
# version 1.5
# All other resources (e.g. sites) require the user to be online.
NETWORK: *
# fallback.html will be displayed if the user is offline
FALLBACK:
/ /fallback.html
# Additional resources to cache
CACHE:
/css/html5reset-1.6.css
/css/screen.css
/css/mobile.css
/images/eagle_40.png
/images/feed-icon-28x28.png
http://somewhere.outthere/img/favicon.ico
Offline Cache
Support?
WorkingFirefoxSafariGoogle ChromeOpera
FailsIE 9
Offline Cache – cont.
1. Determine High-level Requirements2. Find Browser baseline3. Degrade accordingly
Building the future…
1. Augment your reset stylesheet for HTML52. Use modernizr to test browser capabilities3. Use navigator.onLine to enhance chat,
forums, etc.
Pointers..
offline.atompad.com
www.themaninblue.com/experiment/wds10
futureofwebdesign.com/404
www.p01.org/releases/Tilt-shift_photo_effect_in_Canvas
Demos
caniuse.comhtml5boilerplate.comhtml5doctor.comHtml5rocks.com (Google)
html5-reset.cssmodernizr
www.stevesouders.com/blog/2010/02/15/browser-performance-wishlist
www.accessibleculture.org/research-files/html5-aria/html5Aria.html
Further Reading
Q & A
Recommended