Web Design Redux
-
Upload
john-griffiths -
Category
Technology
-
view
999 -
download
3
description
Transcript of Web Design Redux
![Page 1: Web Design Redux](https://reader036.fdocuments.in/reader036/viewer/2022062418/55515083b4c905c6268b5549/html5/thumbnails/1.jpg)
Web Design Redux
![Page 2: Web Design Redux](https://reader036.fdocuments.in/reader036/viewer/2022062418/55515083b4c905c6268b5549/html5/thumbnails/2.jpg)
Rounded Corners
border-radius: 10em;-moz-border-radius: 10em;-webkit-border-radius: 10em;
CSS3
![Page 3: Web Design Redux](https://reader036.fdocuments.in/reader036/viewer/2022062418/55515083b4c905c6268b5549/html5/thumbnails/3.jpg)
Text-shadow
text-shadow: #color x-coord y-coord blur-radius;text-shadow: #0084d7 1px 1px 2px;
Hello
CSS3 – cont.
![Page 4: Web Design Redux](https://reader036.fdocuments.in/reader036/viewer/2022062418/55515083b4c905c6268b5549/html5/thumbnails/4.jpg)
Web Fonts@font-face “Neutraface”, Helvetica
Providers:TypeKit FontDeckTypothequeKernest Google
CSS3 – cont.
![Page 5: Web Design Redux](https://reader036.fdocuments.in/reader036/viewer/2022062418/55515083b4c905c6268b5549/html5/thumbnails/5.jpg)
-moz-transform: rotate(7deg);
-webkit-transform: rotate(7deg);
-o-transform: rotate(7deg);
CSS3 – cont.
LOST
![Page 6: Web Design Redux](https://reader036.fdocuments.in/reader036/viewer/2022062418/55515083b4c905c6268b5549/html5/thumbnails/6.jpg)
<!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>
![Page 7: Web Design Redux](https://reader036.fdocuments.in/reader036/viewer/2022062418/55515083b4c905c6268b5549/html5/thumbnails/7.jpg)
<video src=“inception.m4v" controls>Sorry, we’re going to have to fallback to Flash
</video>
HTML5 Video
![Page 8: Web Design Redux](https://reader036.fdocuments.in/reader036/viewer/2022062418/55515083b4c905c6268b5549/html5/thumbnails/8.jpg)
<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
![Page 9: Web Design Redux](https://reader036.fdocuments.in/reader036/viewer/2022062418/55515083b4c905c6268b5549/html5/thumbnails/9.jpg)
Support?
WorkingFirefoxSafariGoogle ChromeOpera
FailsIE 9
Offline Cache – cont.
![Page 10: Web Design Redux](https://reader036.fdocuments.in/reader036/viewer/2022062418/55515083b4c905c6268b5549/html5/thumbnails/10.jpg)
1. Determine High-level Requirements2. Find Browser baseline3. Degrade accordingly
Building the future…
![Page 11: Web Design Redux](https://reader036.fdocuments.in/reader036/viewer/2022062418/55515083b4c905c6268b5549/html5/thumbnails/11.jpg)
1. Augment your reset stylesheet for HTML52. Use modernizr to test browser capabilities3. Use navigator.onLine to enhance chat,
forums, etc.
Pointers..
![Page 12: Web Design Redux](https://reader036.fdocuments.in/reader036/viewer/2022062418/55515083b4c905c6268b5549/html5/thumbnails/12.jpg)
offline.atompad.com
www.themaninblue.com/experiment/wds10
futureofwebdesign.com/404
www.p01.org/releases/Tilt-shift_photo_effect_in_Canvas
Demos
![Page 13: Web Design Redux](https://reader036.fdocuments.in/reader036/viewer/2022062418/55515083b4c905c6268b5549/html5/thumbnails/13.jpg)
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
![Page 14: Web Design Redux](https://reader036.fdocuments.in/reader036/viewer/2022062418/55515083b4c905c6268b5549/html5/thumbnails/14.jpg)
Q & A