Web Design Redux

•Download as PPTX, PDF•

0 likes•478 views

John Griffiths

taster of HTML5, CSS3 and offline storage

Technology Design

Rounded Corners
border-radius: 10em;
-moz-border-radius: 10em;
-webkit-border-radius: 10em;

Text-shadow
text-shadow: #color x-coord y-coord blur-radius;
text-shadow: #0084d7 1px 1px 2px;
Hello

Web Fonts
@font-face “Neutraface”, Helvetica
Providers:
TypeKit
FontDeck
Typotheque
Kernest
Google

-moz-transform: rotate(7deg);
-webkit-transform: rotate(7deg);
-o-transform: rotate(7deg);

<!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>

<video src=“inception.m4v" controls>
Sorry, we’re going to have to fallback to Flash
</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

Support?
Working
Firefox
Safari
Google Chrome
Opera
Fails
IE 9

1. Determine High-level Requirements
2. Find Browser baseline
3. Degrade accordingly

1. Augment your reset stylesheet for HTML5
2. Use modernizr to test browser capabilities
3. Use navigator.onLine to enhance chat, forums, etc.

offline.atompad.com
www.themaninblue.com/experiment/wds10
futureofwebdesign.com/404
www.p01.org/releases/Tilt-shift_photo_effect_in_Canvas

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

Viewers also liked

Advice from an Account ManagerJoyce Cowles

Cloud 5 context and behavioursJohn Griffiths

10 Things I’Ve Learned As A PlannerJohn Griffiths

Baby SimplifyJohn Griffiths

The world doesn't need another account manager 4 as talk july 2012Gino Borromeo

Key-Account-Manager vs. WebStefan Nickel

Do's and Don'ts for the Account Manager of tomorrow. Jef Leysen

Rawnet Lightning talk - 'A Day in the Life of an Account Manager'Rawnet

Rethinking Information Architecture for SEO and Content MarketingJoe Hall

Viewers also liked (9)

Advice from an Account Manager

Cloud 5 context and behaviours

10 Things I’Ve Learned As A Planner

Baby Simplify

The world doesn't need another account manager 4 as talk july 2012

Key-Account-Manager vs. Web

Do's and Don'ts for the Account Manager of tomorrow.

Rawnet Lightning talk - 'A Day in the Life of an Account Manager'

Rethinking Information Architecture for SEO and Content Marketing

Similar to Web Design Redux

Html5Satoshi Kikuchi

Introduccion a HTML5Pablo Garaizar

html5NebberCracker01

HTML5 y CSS3InterGraphicDESIGNS

C3 웹기술로만드는모바일앱NAVER D2

Implementing Awesome: An HTML5/CSS3 WorkshopShoshi Roberts

Html5 introWilfred Nas

HTML5: A primer on the web's present and futureDaniel Stout

Html5 ux londonTodd Zaki Warfel

HTML5, the new buzzwordFrédéric Harper

Familiar HTML5 - 事例とサンプルコードから学ぶ身近で普通に使わているHTML5Sadaaki HIRAI

HTML 5 - OverviewMarcelio Leal

HTML Web Devlopment presentation css.pptraghavanp4

css.pptDakshPratapSingh1

css.pptSana903754

Using HTML5 and CSS3 todaythebeebs

Creating Art with Codes - CSS3Sayanee Basu

5 ways to embrace HTML5 todayDaniel Ryan

Basics of html5, data_storage, css3Sreejith Nair

HTML5+CSS3 (入門編)博史高木

Similar to Web Design Redux (20)

Html5

Introduccion a HTML5

html5

HTML5 y CSS3

C3 웹기술로만드는모바일앱

Implementing Awesome: An HTML5/CSS3 Workshop

Html5 intro

HTML5: A primer on the web's present and future

Html5 ux london

HTML5, the new buzzword

Familiar HTML5 - 事例とサンプルコードから学ぶ身近で普通に使わているHTML5

HTML 5 - Overview

HTML Web Devlopment presentation css.ppt

css.ppt

Using HTML5 and CSS3 today

Creating Art with Codes - CSS3

5 ways to embrace HTML5 today

Basics of html5, data_storage, css3

HTML5+CSS3 (入門編)

Recently uploaded

Axa Assurance Maroc - Insurer Innovation Award 2024The Digital Insurer

TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc

Scaling API-first – The story of a global engineering organizationRadu Cotescu

Handwritten Text Recognition for manuscripts and early printed textsMaria Levchenko

From Event to Action: Accelerate Your Decision Making with Real-Time AutomationSafe Software

Top 5 Benefits OF Using Muvi Live Paywall For Live StreamsRoshan Dwivedi

Salesforce Community Group Quito, Salesforce 101Paola De la Torre

Exploring the Future Potential of AI-Enabled Smartphone Processorsdebabhi2

How to convert PDF to text with Nanonetsnaman860154

Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...Neo4j

Kalyanpur ) Call Girls in Lucknow Finest Escorts Service 🍸 8923113531 🎰 Avail...gurkirankumar98700

Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...Igalia

[2024]Digital Global Overview Report 2024 Meltwater.pdfhans926745

Breaking the Kubernetes Kill Chain: Host Path MountPuma Security, LLC

Developing An App To Navigate The Roads of BrazilV3cube

Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Miguel Araújo

08448380779 Call Girls In Civil Lines Women Seeking MenDelhi Call girls

Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...Neo4j

08448380779 Call Girls In Friends Colony Women Seeking MenDelhi Call girls

Presentation on how to chat with PDF using ChatGPT code interpreternaman860154

Recently uploaded (20)

Axa Assurance Maroc - Insurer Innovation Award 2024

TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments

Scaling API-first – The story of a global engineering organization

Handwritten Text Recognition for manuscripts and early printed texts

From Event to Action: Accelerate Your Decision Making with Real-Time Automation

Top 5 Benefits OF Using Muvi Live Paywall For Live Streams

Salesforce Community Group Quito, Salesforce 101

Exploring the Future Potential of AI-Enabled Smartphone Processors

How to convert PDF to text with Nanonets

Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...

Kalyanpur ) Call Girls in Lucknow Finest Escorts Service 🍸 8923113531 🎰 Avail...

Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...

[2024]Digital Global Overview Report 2024 Meltwater.pdf

Breaking the Kubernetes Kill Chain: Host Path Mount

Developing An App To Navigate The Roads of Brazil

Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...

08448380779 Call Girls In Civil Lines Women Seeking Men

Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...

08448380779 Call Girls In Friends Colony Women Seeking Men

Presentation on how to chat with PDF using ChatGPT code interpreter

Web Design Redux

2. Rounded Corners border-radius: 10em; -moz-border-radius: 10em; -webkit-border-radius: 10em;

3. Text-shadow text-shadow: #color x-coord y-coord blur-radius; text-shadow: #0084d7 1px 1px 2px; Hello

4. Web Fonts @font-face “Neutraface”, Helvetica Providers: TypeKit FontDeck Typotheque Kernest Google

5. -moz-transform: rotate(7deg); -webkit-transform: rotate(7deg); -o-transform: rotate(7deg);

6. <!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>

7. <video src=“inception.m4v" controls> Sorry, we’re going to have to fallback to Flash </video>

8. <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

9. Support? Working Firefox Safari Google Chrome Opera Fails IE 9

10. 1. Determine High-level Requirements 2. Find Browser baseline 3. Degrade accordingly

11. 1. Augment your reset stylesheet for HTML5 2. Use modernizr to test browser capabilities 3. Use navigator.onLine to enhance chat, forums, etc.

12. offline.atompad.com www.themaninblue.com/experiment/wds10 futureofwebdesign.com/404 www.p01.org/releases/Tilt-shift_photo_effect_in_Canvas

13. 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

Web Design Redux

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (9)

Similar to Web Design Redux

Similar to Web Design Redux (20)

Recently uploaded

Recently uploaded (20)

Web Design Redux