WebStandards

Information about WebStandards

Published on January 30, 2008

Author: Taddeo

Source: authorstream.com

Content

Benefits of Web Standards:  Benefits of Web Standards Daniel M. Frommelt University of Wisconsin - Platteville Benefits of Web Standards:  Benefits of Web Standards Presentation and documentation are online @ http://www.uwplatt.edu/~web/webstandards Benefits of Web Standards:  Benefits of Web Standards Concept of Web Standards Concept of DIV “skeleton” structure Concept of CSS “skins” markup Reasons to make the switch “Web Standards?”:  “Web Standards?” http://www.w3.org Web Standard Basics “So what are Web Standards?”:  “So what are Web Standards?” XHTML 1.0 or higher CSS Level 1 & CSS Level 2 DOM Level 1 & DOM Level 2 ECMAScript 262 (current JavaScript) http://www.webstandards.org/about/ Web Standard Basics Web Recommendations Standards “What the heck is XHTML?”:  “What the heck is XHTML?” “The Extensible HyperText Markup Language (XHTML™) is a family of current and future document types and modules that reproduce, subset, and extend HTML, reformulated in XML. XHTML Family document types are all XML-based, and ultimately are designed to work in conjunction with XML-based user agents. XHTML is the successor of HTML, and a series of specifications has been developed for XHTML.” http://www.w3.org/MarkUp/ Web Standard Basics “How do I convert to XHTML?”:  “How do I convert to XHTML?” Declare the DOCTYPE Tag and attributes in lower case Attributes must have quoted values All tags must have an end tag (<br />) Nest tags correctly Validate the page (http://validator.w3.org) Web Standard Basics “Any Benefits to XHTML?”:  “Any Benefits to XHTML?” More Accessible Eliminates silly mistakes in code Renders more accurately in browsers Backward AND forward compatible First step toward Web Standards Web Standard Basics XHTML is the Future:  XHTML is the Future XHTML 1.0 Transitional XHTML 1.0 Strict XHTML 1.1 XHTML 2.0 (W3C Working Draft) No more development of HTML! Web Standard Basics Table Design:  Table Design Tables can build a nice layout Tables are predictable However, Tables bloat the code Can we eliminate tables? DIV “skeleton” structure Table Purpose:  Table Purpose “Tables should not be used purely as a means to layout document content as this may present problems when rendering to non-visual media. Additionally, when used with graphics, these tables may force users to scroll horizontally to view a table designed on a system with a larger display. To minimize these problems, authors should use style sheets to control layout rather than tables.” http://www.w3.org/TR/html4/struct/tables.html#h-11.1 DIV “skeleton” structure Alternative Design Method:  Alternative Design Method DIVs can be an alternate to <table> DIVs are a container like a table cell CSS can position the DIV <div id="article">xxx</div> #article{ width:250px; padding:5px; float:right;} DIV “skeleton” structure DIV Design:  DIV Design Use DIVs to create the skeleton of the page. There should be no display-specific information in the XHTML The Goal: separate the information from the layout / presentation of the page Layout is entirely controlled by CSS DIV “skeleton” structure DIV Design:  DIV Design Identify major sections of the page Masthead (Logo and Title) Menu Content Search Footer Don’t overuse the DIVs! Don’t worry about positioning in the XHTML! DIV “skeleton” structure DIV Structure?:  DIV Structure? Learning curve of DIV Future of browsers is uncertain WYSIWYG Editors Current Topics Skinning Concept:  Skinning Concept CSS “skinning” The skin is the design placed over the skeleton structure It’s like a cell phone Model of phone is the skeleton Face plates are the skins You can swap face plates Skinning Concept:  Skinning Concept CSS “skinning” Like a cell phone, web pages can have “face plates” (skins) that are changeable The CSS skins have nothing to do with the XHTML markup External CSS file Easily modifiable Faster Redesign Overview of New Structure:  Overview of New Structure CSS “skinning” XHTML DIVs are like the parts of the phone (antenna, buttons, speaker, etc.) Layout CSS is like the different models of phones (where parts are positioned) Skin CSS is like the face plates CSS Zen Garden:  CSS Zen Garden The best example showing the power of CSS skinning! http://www.csszengarden.com Web Standards don’t have to be ugly! CSS Skinning Topics Slide22:  CSS Skinning Topics Slide23:  CSS Skinning Topics Slide24:  CSS Skinning Topics Slide25:  CSS Skinning Topics Slide26:  CSS Skinning Topics “How do I build this?”:  “How do I build this?” Style sheets for a skinnable website: Base CSS – simple structure Advanced CSS – final structure @import Skin CSS – design/presentation @import Fonts CSS Printer Friendly CSS Developing Skins “Why so many CSS files?”:  “Why so many CSS files?” Setting the stage for forward AND backward compatibility @import - fix non-standard browsers Layout CSS separate from Skin Fonts can now be adjusted quickly Printer Friendly without the hassle! It’s just too cool!  Developing Skins Emphasis on Information:  Emphasis on Information In 1995, Al Gore coined the phrase: “Information Superhighway” NOT “Design Superhighway” http://www.nortropic.com/lis341/cgold/superway.html Reasons to follow Web Standards Emphasis on Information:  Emphasis on Information Web is about delivering information Design must be secondary You cannot control what user agent will open the page, so you must be ready Backward and forward compatibility is essential Reasons to follow Web Standards Backward Compatibility:  Backward Compatibility Compliant with older browser without having to make a separate set of pages Design fails gracefully – It’s not pretty, but the information is there! Reasons to follow Web Standards Slide34:  Reasons to follow Web Standards Forward Compatibility:  Forward Compatibility More compliant user agents get better designed / presented information Not committed to one platform / browser Ready for what the future brings PDA Cell phone TV Screenreaders Reasons to follow Web Standards Slide36:  Reasons to follow Web Standards Slide37:  Reasons to follow Web Standards Bandwidth Savings:  Bandwidth Savings Using web standards saves on bandwidth Code reduction with limited markup provides cleaner and simpler code CSS files are cached Reasons to follow Web Standards Slashdot Example:  Slashdot Example Slashdot is a well known site: Copied the index on July 22, 2003 HTML 3.2 code Table driven design Reasons to follow Web Standards Slashdot Example Stages:  Slashdot Example Stages There are four stages (folders): Original file as of July 22, 2003 XHTML with no markup Re-structured XHTML – identify data Web Standards Version Additional information and example zip file is online at: http://www.uwplatt.edu/~web/webstandards/slashdot.html Reasons to follow Web Standards Slide41:  Reasons to follow Web Standards Slashdot Bandwidth Savings:  Slashdot Bandwidth Savings Actual savings per page: Without caching CSS: ~2KB With caching CSS: ~9KB That’s not a lot, however it adds up! Reasons to follow Web Standards Slashdot Bandwidth Savings:  Slashdot Bandwidth Savings Slashdot serves 50 million pages a month, which is ~18 pages per second. (http://slashdot.org/faq/slashmeta.shtml#sm300) Savings per day: Without caching CSS: ~3.15 GB With caching CSS: ~14.0 GB Reasons to follow Web Standards Personal Bandwidth Story:  Personal Bandwidth Story Over a year ago… we made the leap. Saved a few KB, and thought “big deal.” Network team PANICKED because of unexpected drop in server load. Everyone is much happier / wiser now! Reasons to follow Web Standards In Conclusion:  In Conclusion Web Standards is a journey Not a quick fix, so don’t expect it Major benefits! Forward / Backward compatible Bandwidth savings Easier transitions for future updates Printer Friendly! Web Standards “Don’t Panic”:  “Don’t Panic” Web Standards Personal Speaking Story:  Personal Speaking Story WebDev Share Presenter 2003 Met Jeffrey Zeldman, A List Apart Asked to write “Retooling Slashdot” http://www.alistapart.com/articles/slashdot/ Which immediately got “Slashdotted” Web Standards Presentation & Documentation Info @ http://www.uwplatt.edu/~web/webstandards:  Presentation & Documentation Info @ http://www.uwplatt.edu/~web/webstandards Benefits of Web Standards

Related presentations


Other presentations created by Taddeo

Famous GLBT People
15. 04. 2008
0 views

Famous GLBT People

app PCT 020906
11. 01. 2008
0 views

app PCT 020906

pptleadership 20041
12. 01. 2008
0 views

pptleadership 20041

resilience youth development
13. 01. 2008
0 views

resilience youth development

Indiana
09. 01. 2008
0 views

Indiana

Babies
15. 01. 2008
0 views

Babies

Faith Christian Church Picnic
15. 01. 2008
0 views

Faith Christian Church Picnic

Language Attitude
17. 01. 2008
0 views

Language Attitude

Confined Space Entry
17. 01. 2008
0 views

Confined Space Entry

KillerRobot2005
23. 01. 2008
0 views

KillerRobot2005

africancolonialism
10. 01. 2008
0 views

africancolonialism

vincent gulotta the wizards bowl
24. 01. 2008
0 views

vincent gulotta the wizards bowl

Soul of the Duelist
29. 01. 2008
0 views

Soul of the Duelist

cult branding
07. 02. 2008
0 views

cult branding

EGNRET26 Japan
13. 02. 2008
0 views

EGNRET26 Japan

The Epic Hero powerpoint
18. 02. 2008
0 views

The Epic Hero powerpoint

13 PHP intro
21. 02. 2008
0 views

13 PHP intro

10451
19. 01. 2008
0 views

10451

Kopecek ISC Tallinn
23. 01. 2008
0 views

Kopecek ISC Tallinn

biwebinar
05. 02. 2008
0 views

biwebinar

Chinese Politics
14. 02. 2008
0 views

Chinese Politics

9 Pandemic Influenza Reinhardt
20. 03. 2008
0 views

9 Pandemic Influenza Reinhardt

Early Human Culture
03. 04. 2008
0 views

Early Human Culture

UN Gobal Compact
13. 01. 2008
0 views

UN Gobal Compact

March 2007
04. 02. 2008
0 views

March 2007

espnclassic
14. 04. 2008
0 views

espnclassic

medication
17. 04. 2008
0 views

medication

chiral
22. 04. 2008
0 views

chiral

Lecture 3
22. 04. 2008
0 views

Lecture 3

energy e3 0711
24. 04. 2008
0 views

energy e3 0711

DarrylLuesby e
07. 05. 2008
0 views

DarrylLuesby e

Presentation Session 6
08. 05. 2008
0 views

Presentation Session 6

ancient
02. 05. 2008
0 views

ancient

modern art
03. 03. 2008
0 views

modern art

004
02. 05. 2008
0 views

004

AFPs
07. 02. 2008
0 views

AFPs

WorkstationErgo
07. 03. 2008
0 views

WorkstationErgo

Event Logs Management InfoSecHK
21. 01. 2008
0 views

Event Logs Management InfoSecHK

African Tale 22 September
24. 01. 2008
0 views

African Tale 22 September

elizabeth
06. 02. 2008
0 views

elizabeth

IPSec 4 ISAKMP IKE
08. 02. 2008
0 views

IPSec 4 ISAKMP IKE

13 chaturvedi
22. 01. 2008
0 views

13 chaturvedi

CoverttoOvert
04. 02. 2008
0 views

CoverttoOvert

p3430
04. 02. 2008
0 views

p3430

martyrdom final draft
16. 01. 2008
0 views

martyrdom final draft

august14
13. 01. 2008
0 views

august14

UrbanWoodUtilconf
12. 02. 2008
0 views

UrbanWoodUtilconf

Cotton Wool Kids LR
28. 01. 2008
0 views

Cotton Wool Kids LR

DDLCollectInternal
25. 01. 2008
0 views

DDLCollectInternal

IET RKF Y2 SanDiego CY 2002 CP
22. 01. 2008
0 views

IET RKF Y2 SanDiego CY 2002 CP

N6 Sutherst
16. 01. 2008
0 views

N6 Sutherst