Web Standards
Andrew Assarattanakul
Overview
- What is Web Standards?
- Definitions
- What is XHTML?
- What is CSS?
- What are DIVs and SPANs?
- Table Layout vs DIV
- Pros & Cons
- Epic Systems Remake
- References
What Is Web Standards?
- There truly is none because the recommendations aren't mandatory.
- This causes a problem with different browsers having a different take on the way things should be displayed.
- But there are specifications and recommendations set up by World Wide Web Consortium (W3C).
- More known specifications from W3C are HTML, XML, HTTP, CSS, and XHTML.
Definitions
- Specifications: Rules of a language that is currently being developed by W3C working groups.
- Recommendations: Indicates that consensus has been reached among the W3C Members that a specification is appropriate for widespread use.
- Standards: Full compliance is mandatory, if not met, products don't ship.
What is XHTML?
- XHTML stands for Extensible HyperText Markup Language.
- XHTML is HTML reformulated to the same style as XML to allow it be used with any XML-Based program.
- Basically means for every open tag there must be a corresponding closing tag.
- Also Introduced
- CSS for layout and styling.
- DIV and SPAN tags.
Types of XHTML
- XHTML 1.0 Strict - Used for clean structural mark-up, free of any markup associated with layout. Use this together with W3C's CSS language to get the layout and style you want.
- XHTML 1.0 Transitional - Used for transition from HTML to XHTML with small adjustments and allowing the use of CSS.
- XHTML 1.0 Frameset - Use this when you want to use Frames to partition the browser window into two or more frames.
What is CSS?
- CSS stands for Cascading Style Sheets.
- CSS is a simple mechanism for adding style to Web documents. For example fonts, colors, and spacing.
What are DIVs and SPANs?
- DIVs is a block style container.
- SPANs is a inline style container.
DIV Example Code
<div>Text1</div>
<div>Text2</div>
DIV Example Display
Text1
Text2
Span Example Code
<span>Text1</span>
<span>Text2</span>
Span Example Display
Text1Text2
Table Layout vs DIV
- Table layout can be messy and time consuming.
- Table layouts can be larger than DIV layouts.
- DIV layout allows for easier templating.
- Separation of content and layout.
Pros
- Easier to make templates.
- Easier and faster to change the style of the site.
- Removes the need for printer friendly page.
- Saves money on server space and bandwidth.
- Faster loading times for the user.
- XHTML Validator and CSS Validator.
Cons
- There are no WYSIWYG editors that can fully do this.
- Dreamweaver MX does the best out of any editors that I know of. But fails at CSS.
- Initial development might take longer to do.
- More training is required for web developers.
- In consistencies in the behavior of CSS in different browsers.
- W3C makes recommendations not standards and cannot enforce the rules that they make.
Epic Systems Remake
- Roughly 12 hours to remake to be viewed the same in all browsers.
- Would be faster if it wasn't done to look the same as the original.
- Differences from the original:
- HTML & CSS Files: 6,855 bytes (40.40% smaller)
- Images: 14,918 bytes (25.35% smaller)
- Additions:
- Blind Browser Compatible.
- Printer friendly.
- PDA, Cell Phone Browsers are able to read it better.
Epic Systems Remake Saving Assumptions
- 10,000 hits per day.
- $20 per Gigabyte of bandwidth from SCVNET.
- 30 Days in a month.
Epic Systems Remake Saving
- Front Page Savings
- 0% Cached Images: 6.08 Gigabytes per month or $121.60 per month ($1,459.20 a year)
- 70% Cached Images: 3.16 Gigabytes per month or close to $63.20 a month savings ($758.40 a year)
- Front Page accounts for 2% total bandwidth
- 0% Cached Images: 304 Gigabytes per month $6,080.00 per month ($72,960.00 a year)
- 70% Cached Images: 158 Gigabytes per month $3,160.00 per month ($37,920.00 a year)