semantics vs. style importance of standards

24
Semantics vs. Style Importance of Standards Why we follow the rules

Upload: kaida

Post on 22-Feb-2016

30 views

Category:

Documents


0 download

DESCRIPTION

Semantics vs. Style Importance of Standards. Why we follow the rules. Semantic vs Style. Semantic  Meaning This is a picture of a tiger A caption is meaningful. Images typically have a caption that describes the image. . - PowerPoint PPT Presentation

TRANSCRIPT

Page 1: Semantics vs. Style Importance of Standards

Semantics vs. StyleImportance of Standards

Why we follow the rules

Page 2: Semantics vs. Style Importance of Standards

Semantic vs Style

Semantic Meaning

<img src=“tiger.jpg”>

<span class=“caption”>This is a picture of a tiger</span>

A caption is meaningful.Images typically have a caption

that describes the image.

Style Appearance

<img src=“tiger.jpg”>

<font type=“Arial” style=“italic” size=“10pt”>

This is a picture of a tiger</font>

Here, we specify how to display the caption but not the fact that it’s actually a caption.

Page 3: Semantics vs. Style Importance of Standards

Semantics + CSS

<span class=“caption”>Figure 1</span><span class=“caption”>Figure 2</span><span class=“caption”>Figure 3</span>…<span class=“caption”>Figure 99</span>

.caption {font-size: 10pt;font-style: italic;

}

Page 4: Semantics vs. Style Importance of Standards

Problem with Presentational HTML

<font type=“Arial” style=“bold” size=“10pt”> Sub-title 1</font><font type=“Arial” style=“italic” size=“10pt”> Figure 1 </font><font type=“Arial” style=“bold” size=“10pt”> Sub-title 2</font><font type=“Arial” style=“italic” size=“10pt”> Figure 2 </font><font type=“Arial” style=“italic” size=“10pt”> Figure 3 </font>…<font type=“Arial” style=“bold” size=“10pt”> Sub-title 99 </font><font type=“Arial” style=“italic” size=“10pt”> Figure 999 </font>

How would you change the font-size of all the figure captions but not the sub-titles?

Page 5: Semantics vs. Style Importance of Standards

History Lesson: The Good Times

• Standardization was very important in the initial design of HTML

• HTML was 100% structural/semantic• Designers would create style sheets that could be

used, but• The presentation was determined by the device and

the user settings• Users could define their own style sheet – Favorite background color– Preferred font type and size

Page 6: Semantics vs. Style Importance of Standards

History Lesson: The Bad Times

• Netscape & Microsoft Internet Explorer supported style tags (<font> for example) so that web page designers could control the presentation.

• CSS existed, but presentation HTML was supported for novice designers

• Eventually, presentation HTML become more commonly used than CSS

Page 7: Semantics vs. Style Importance of Standards

History Lesson: Browser Wars

• Netscape vs. Microsoft Internet Explorer• Added many proprietary enhancements to HTML (1994-

1999)– Proprietary = Not Open Source– Not standard = Only works in specific browsers

• Web designers would use HTML tags to control the visual appearance, but these tags were implemented differently on each browsers.

• Web pages that looked good on one browser would break on other browsers.

• In 1998, the web development community and W3C said “Enough is enough”

Page 8: Semantics vs. Style Importance of Standards

W3C – What is it anyway?

• The World Wide Web Consortium (W3C)– international consortium of web developers– sub-organizations, full-time staff, web experts

• Work together to develop Web standards• http://validator.w3.org/

Page 9: Semantics vs. Style Importance of Standards

HTML5 and WHATWG

• Web Hypertext Application Technology Working Group– Pioneers of HTML5, which better supports web

applications, and the idea of a living standard.• founded by individuals of Apple, the Mozilla

Foundation, and Opera Software in 2004 who were increasingly concerned about the W3C’s direction with XHTML, lack of interest in HTML and apparent disregard for the needs of real-world authors.

Page 10: Semantics vs. Style Importance of Standards

Fixed vs. Living standard

Fixed• Example HTML 3.0

• Once the rules are established, they cannot be changed.

• After some time, all the good ideas are implemented in a new standard – HTML 4.0

Living• Example HTML 5

• Initial standard is established based on previous work

• Good ideas can be immediately adopted into the living standard– progressive improvement

rather than incremental.

Page 11: Semantics vs. Style Importance of Standards

Fixed standard

Pro• Companies implement browsers,

servers and tools using a specific standard (HTML 4.0)

• Developers make website and applications using the same specific standard (HTML 4.0).

• Since everyone is using the same fixed standard, websites and applications are more stable and less buggy.

Con• Even if the W3C likes a new

innovation, they might still want to consider other innovations before they publish a new standard (4.01)

• Developers end up waiting along time before they can use the innovation in a standard way.

Page 12: Semantics vs. Style Importance of Standards

Living standard

Pro• Companies update

browsers based on the current live standard, which is progressively improving.

• Thus, designers can start using innovations faster.

Con• Designers and vendors

aren’t using the exact same standard, so things are more likely to break

• It is often unclear if a browser supports a new innovation. Fixed standards were clearer and more transparent.

Page 13: Semantics vs. Style Importance of Standards

Why Living may be better than fixed

Fixed• Web browsers need to be

backward compatible with old standards, i.e., HTML 1.0, 2.0, 3.0, etc., otherwise old websites will break.

• Thus, browsers need to support too many old standards and they get too complex and bloated

• Old websites should really be updated to the latest standard

Living• Web browsers only need to

support the current living standard.

• But, the current standard does its best to be backward compatible.

• If something gets dropped from the standard it is for good reason, and designers should stop using it.

• Websites may break, but it may be for very good reasons.

Page 14: Semantics vs. Style Importance of Standards

Why Standards?

Advantages1. Accessibility2. Forward Compatibility3. Simpler and Faster Development4. Faster Download & Display

Page 15: Semantics vs. Style Importance of Standards

Why Standards?

1. Accessibility2. Forward Compatibility3. Simpler and Faster Development4. Faster Download & Display

• Standardized web pages look good on all browsers.

• And on all different types of devices.– iPhone, Android– Tablets, watches– Screen readers for the

visually impaired

Page 16: Semantics vs. Style Importance of Standards

Why Standards?

1. Accessibility

2. Forward Compatibility3. Simpler and Faster Development4. Faster Download & Display

• Future standards are built on top of current standards

• Thus, Web pages made today should work in the future

• Unless there is a really good reason to make them break.

Page 17: Semantics vs. Style Importance of Standards

Why Standards?

1. Accessibility2. Forward Compatibility

3. Simpler and Faster Development4. Faster Download & Display

• Faster: You don’t have to build separate websites for separate browsers/devices

• Concurrent Development:Content and style can be developed separately by different teams.

Page 18: Semantics vs. Style Importance of Standards

Why Standards?

1. Accessibility2. Forward Compatibility3. Simpler and Faster Development

4. Faster Download & Display

• Style/Appearance tags are bloated

• Rather than load bloated presentational HTML for every page, just load one style sheet for an entire website

Page 19: Semantics vs. Style Importance of Standards

Rendering Engines

• Some web browsers actually have different rendering engines for parsing different versions of HTML.

• The <!doctype> and <html> tag can tell a browser which engine to use.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

Page 20: Semantics vs. Style Importance of Standards

Rendering Engines

• Standard, validated HTML code can be rendered faster.– Rendering engine doesn’t have to handle special

cases and errors• Most web browsers can display Non-standard

HTML, – The rendering engine must actually try to

autocorrect you HTML syntax errors– auto correction slow things down and doesn’t

always work

Page 21: Semantics vs. Style Importance of Standards

Standards: Big Motivation

• The devices we use are becoming more diverse• Tablets, phones, iPods, watches, huge displays• W3C wants WWW to fully work regardless of devices

properties.• Non-standard websites may NOT display properly on

many types of devices.• More importantly, non-standard page page may NOT

be able to be parsed or process when they are used in larger applications.

Page 22: Semantics vs. Style Importance of Standards

Validate Validate Validate

• http://validator.w3.org/

• It’s a pain but…• At least you know that your web page will display

properly on hundreds of different browser variations that now support HTML5.

Page 23: Semantics vs. Style Importance of Standards

Summary

• Originally HTML was meant to be a standard structural/semantic language

• The browser wars lead to the de-standardization of HTML, CSS, and JavaScript.– Proprietary code and technology (Flash for example) became

popular.• Standardization has made a comeback and HTML5 + CSS +

JavaScript is all you need on the client tier to make web applications.

• There are no standards for the server tier, i.e., you can use whatever you want (PHP, ASP, JSP, Ruby, Python).

Page 24: Semantics vs. Style Importance of Standards

Key Question

• As a web application developer, why is it so important to have standard languages for the client-side, but not the server-side?

• Seriously, aside for the fact that web servers have to follow the HTTP protocol, there are no standardized languages that must be used on the server-side. You can use whatever ever language you want. Why?

• Why are standards less important on the server?