Web Design Redux

1,136 views

Published on

taster of HTML5, CSS3 and offline storage

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,136
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Web Design Redux

  1. 1. Rounded Corners border-radius: 10em; -moz-border-radius: 10em; -webkit-border-radius: 10em;
  2. 2. Text-shadow text-shadow: #color x-coord y-coord blur-radius; text-shadow: #0084d7 1px 1px 2px; Hello
  3. 3. Web Fonts @font-face “Neutraface”, Helvetica Providers: TypeKit FontDeck Typotheque Kernest Google
  4. 4. -moz-transform: rotate(7deg); -webkit-transform: rotate(7deg); -o-transform: rotate(7deg);
  5. 5. <!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>
  6. 6. <video src=“inception.m4v" controls> Sorry, we’re going to have to fallback to Flash </video>
  7. 7. <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
  8. 8. Support? Working Firefox Safari Google Chrome Opera Fails IE 9
  9. 9. 1. Determine High-level Requirements 2. Find Browser baseline 3. Degrade accordingly
  10. 10. 1. Augment your reset stylesheet for HTML5 2. Use modernizr to test browser capabilities 3. Use navigator.onLine to enhance chat, forums, etc.
  11. 11. offline.atompad.com www.themaninblue.com/experiment/wds10 futureofwebdesign.com/404 www.p01.org/releases/Tilt-shift_photo_effect_in_Canvas
  12. 12. caniuse.com html5boilerplate.com html5doctor.com Html5rocks.com (Google) html5-reset.css modernizr www.stevesouders.com/blog/2010/02/15/browser-performance-wishlist www.accessibleculture.org/research-files/html5-aria/html5Aria.html

×