EME 6207 – Lesson: Evolution of Web Standards

Sep 15th, 2016 at 1:51 am
Textbook Reference(s)
This lesson is based on a book by Jeffery Zeldman: Designing with Web Standards

The content below are notes that you can refer back to from the video introduction. I tried to keep it short but there is so much going on here it does take a long time to develop what I am trying to convey to you. In order to make it easier on you, I broke this up into three parts. Part one takes you up to a movie clip that demonstrates a point I am trying to make (about 1/2 way through the one half hour lesson). Then I continue with the clip and then into part two (which runs about another 14 minutes.).

Bear with me as you watch the videos and try to keep in mind the evolution of Web 2.0 and possibly how that might not have happened without the changes that came about first with standardization. Finally, pardon the technical issues with these videos.. I recorded on Keynote and getting it to synch with Flash was a real struggle…but I had invested close to an hour recording it and wanted to get it to you in time for this cycle. I will probably have to re-record it down the road but for now I think it will help you understand the gist of what I am trying to say about Web Standards.

Web Standards – Part 1 (approx 15 minutes)



Video Clip: 6th Day (This movie came out in 2000, more than 13 years ago!)


Web Standards - Part 2 (Approx 15 minutes)



After viewing the video, read over these notes... They are in outline form for easier reading and to get to the point faster. You will begin to see some trends.. and (hopefully) begin to realize that WEB 2.0 WAS NO ACCIDENT...it came about as a consequence of a standards movement that was aimed at separating form from content... without which no semantic Web could be possible... it led to social networking and more recently 'big brother' knowing everything about you... What you will see is that the book '1984' really happened in about 2002-2004.... In order to truly understand all of this you need to progress through the other lessons in their suggested order (i.e., php xml, etc.)

Why standards?

Considerations:

  1. Reduces overhead (bandwidth)
  2. Saves time and money during re-design
  3. Provides greater access
  4. Forward compatibility

1) Reduces Overhead

  • A 60K page doesn’t sound like much but…

 

Take a look at this seemingly harmless small page:

[one_third]..[/one_third][one_third]
[/one_third][one_third_last]..[/one_third_last]

How big is it really? (lots of coding!)

[one_third]..[/one_third][one_third]yahoo-under-300x205[/one_third][one_third_last]..[/one_third_last]

What about Word-converted files?

[one_third]..[/one_third][one_third][/one_third][one_third_last]..[/one_third_last]

How big are they really? (Lots of hidden code)

[one_third]..[/one_third][one_third][/one_third][one_third_last]..[/one_third_last]

  • How many hits will your site receive?
  • How much are you paying per megabyte of file transfers?

 

How about line costs?

  • If a site that is receiving a several hundred hits at a given moment can reduce overhead 50% (page weight reduced from 60K to 30K).. It is conceivable that they could save $1,500/month in line costs…
  • How much wasted code?

2) Saves time & money during re-design

  • Think what would happen if you simply made a typo with the ‘font’ tag and named it ‘ont’ instead and then replicated that tag throughout your site??..
  • With a style sheet, the following tag lines can be reduced..

"Write once, publish  everywhere”
 

Evaluation criteria

  • Who is the audience? Is the site audience centered?
  • Communication
  • Navigation
  • Visual Appeal
  • Utilitarian Design

 

The three I’s of the digital world

  1. Intelligence

    Example: Your personal pvr

  2. Interactivity

    Example: Your personal profile, eliminate unwanted content, match people who want to buy things with sellers, feedback

  3. Interoperability

    Example: forward & backward compatibility with all platforms & operating systems

    Provides greater access

Backwards compatibility

 

  • Not all browsers act alike:

For example, Internet Explorer is different than
[one_third]..[/one_third][one_third][/one_third][one_third_last]..[/one_third_last]
Most versions of Opera:
[one_third]..[/one_third][one_third][/one_third][one_third_last]..[/one_third_last]

  • What appears fine in one browser may not work in another.. this includes Chrome, Mozilla, and Netscape (no one is immune)
  • Not even all versions of browsers are compatible...

3) Provides greater access

  • Struggling to cope with ever-widening incompatibilities, designers came up with the practice of authoring customized versions of mark-up..

 

So what do we do?

  • Do we design different versions for each site?
  • Proprietary ActiveX and Java Script
  • What about accessibility issues?
  • SMS services

 
Even WYSIWYG editors added to confusion..

Dreamweaver, GO Live and FrontPage all have their own proprietary scripts and non-semantic mark-up structures (not optimized for all browsers.) (Dreamweaver IS getting better at this btw)

While newer versions are more compliant, they still require some developer knowledge to do so

Originally FLASH was abused and misused.

MX versions of Flash became the breakthrough... far less proprietary and more accessibility oriented (Support CSS)

But, they all do require plug-ins,

Some sites are set up to require Internet Explorer

News sites, portals, shopping sites, institutional sites, community sites, magazines, directories and others that emphasize text or involve practical interactivity may still be best served with XHTML, CSS and/or other standards
 

In 2002 - WYSIWYG came of age

Deamweaver/Flash MX (Macromedia's Last version prior to be purchased by Adobe)

  • Produced valid markup
  • Helped with accessibility
  • Rendered CSS2 reasonably well (although positioning was somewhat problematic)
  • No longer corrupted CSS layouts
  • Encouraged use of XHTML and CSS standards validation

 

Except for FrontPage

  • FrontPage is/was essentially
    • An Internet Explorer editor
    • Spewed proprietary code and mark-up
    • Created need for much hand-written mark-up corrections

 

Accessibility issues

THE question you’ve all been waiting to ask…

  • Is it better to study server-side technologies like PHP,ASP or ColdFusion, rather than piddle hours away re-thinking client side mark-up rudiments?
  • The answer is yes and no…
  • They, too, need to be utilitarian
  • Load times are an issue
  • Need standards of their own
  • Still require plug-ins

 

4) Transitional Forward compatibility

  •  XHTML is used for mark-up (HTML 4.01 can also be used)
  • CSS (version 2) is used for control of typography, color, margins, etc
    • Light use of XHTML tables for layouts, letting CSS do some of the work
    • Transition to CSS table-less layout
    • DOM-based JavaScript/ECMAScript, w/ code forking to accommodate 4.0 versions of IE and Navigator (i.e., NY Public Library)
  • Accessibility attributes and testing

    •  

    Benefits

    • Backward compatibility (reasonably so)
    • Forward compatibility
    • Paves way for eventual transition to XML-based mark-up and pure CSS layout
    • Fewer maintenance problems (remove proprietary code)
    • Increased accessibility
    • Partially restores document structure to documents
    • Begins restoring elegance, clarity, and simplicity

So if Microsoft has over 100 million Customers, is it not a really the 'de-facto' Standard?

Well, that is the 800 pound gorilla in the room and certainly a question Microsoft would love to have you all to answer it unanimously with a resounding YES!
But the truth is that much of this standards thing has evolved as a direct counter-reaction to Microsoft, and a resistance to allowing them to take total control of our destiny.

If the basic tenet of Internet is to provide democratic access, then it follows that most folks do not want one company or person to control the whole thing. Microsoft would love to have you consider them to be all you need. After all, they were the ones who broke the backs of Netscape's business plan by providing free access to Internet Explorer... and became the focus of all the anti-trust suits because, as it was the omnipotent operating system in which IE was (the only) packaged browser.

We have seen what non-standard html coding can do to the innards of websites. But that is not the extent of it... the thing you need to know is that Microsoft are not the only folks who haven't quite figured this standards thing out.

Case in point.. take a look at this chart ( Click on the image to expand it ):
[one_third]..[/one_third][one_third]
[/one_third][one_third_last]..[/one_third_last]

What this says that each browser supports at it own level the differing media standards. The hope is that, once HTML5 becomes more fully supported (right now it is at approximately 40%.. with the hope that it reaches maximum majority by the end of next year), things will come around. Microsoft has even given it up by stating it will support standards (although I bet you dollars to donuts that it will be its own "version" of support)... Adobe recently announced it has given up on trying to support Flash for mobile devices (giving in also the the standards concept, thanks in part to Apple's refusal to support Flash... and many other Adobe products a story that needs to be told but to do so here would be a diversion... so, all I can say is "more to follow"...

The Standards Umbrella (The so-called "Holy Trinity" of Standardization)

trinity

The "TRINITY" Model enables designers to do the following…

  • Attain more precise control over layout, placement, and typography
  • Develop sophisticated behaviors across multiple browsers.
  • Comply with accessibility laws w/o sacrificing beauty
  • Cut down redesign time
  • Support multiple browsers w/o multiple versions
  • Support non-traditional devises
  • Deliver sophisticated printed versions of any web page w/o having to create “printer friendly” page versions
  • Separate style from structure
  • Transition from HTML to XHTML
  • Forward and backward compatibility

 

Importance of Tags

  • 1st came about universally with Internet Explorer5/MAC
  • 1st teasing of web standards
  • Support for XHTML and ECMAScript, and nearly all CSS1 standards, and DOM
  • Varied display and performance according to listed at the top of a web page’s mark-up (DOCTYPE switching)
  • Offered text zoom for accessibility
  • Caused Netscape 6 to do same

 

XML and HTML Compared

  • Same parent technology
  • HTML is basic language for mark-up with fixed number of tags and rules
  • HTML is merely a formatting language with no information about content
  • XML is a “super” mark-up language from which programmers can develop other custom mark-up languages (such as XHTML)
  • XML (Extensible Mark-up Language) is bound by consistent rules and can be used beyond the web…
  • OSX uses it to store files and for preferences
  • Flash & Dreamweaver use it under the covers
  • Quark & Adobe use it to store preferences
  • Carries info about content (use in database exchanges)
  • Customizable
  • Ability to transform data from one format to another
  • Universal in nature (interoperable), making all XML applications compatible

 

What is XHTML?

    • A reformulation of HTML (replaces HTML 4.0)
    • A bridge between HTML and XML
    • An XML-based mark-up language that works and looks like HTML with a few differences:
      • Tighter “house” rules (if you open a tag, you must close it)
      • An outcome of XML.. Can’t serve raw XML on most browsers
      • Able to transform data, including Scalable vector graphics, and other objects.
      • Works in most new Internet devices (like Palm Pilots)
    • Works consistently with CSS
    • Will progress to the point where it won’t be backward compatible w/ HTML
    • Will include new tags (LINE vs BR, HLINK vs A HRef)
    • If use in conjunction with CSS, will be consistent in all browsers

 

CSS Progression

      • CSS1 was initiated (1996) to change fonts, colors, etc, but…
      • Initially IE and Navigator performed differently
      • Also used as an attempt to overcome compatibility issues..
      • Can change what means, for example
      • Some used CSS to impose standards, others to override them
      • Some abandoned CSS with structural mark-up
      • instead of
      • Main feature of CSS is inheritance… streamlining production and reduces bandwidth by enabling general rules to percolate down the document tree
      • CSS2 came along (2001) to impose some structure
      • Use XHTML for structure; CSS for layout; scriptg for interactivity, and eventually, php, xml for context

 

CSS Redesign

• Goals:

  • Equally usable in graphical and non-graphical environments
  • Permit mark-up to be free of all layout tagging
  • Be compact and valid
  • Contribute to accessibility designs in all browsers
  • Deliver branded look w/o bloated bandwidth and other resources
  • Visual interactivity and color matching (no longer required to be 'web safe')
  • User customization (THE beginnings of the Semantic WEB
  • Thoughtful handling of text
  • Clearer navigation rules

 

Scripting

  • Some Scripts are more equal than others…
  • Netscape’s JS vs ActiveX vs Jscript
  • Led to some sites becoming valid with Internet Explorer-only…

 

What is DOM?

  • Browser independent, platform neutral language neutral interface that allows“programs and scripts to dynamically access and update the content, structure, and style of documents…. The document can be further processed and the results of that processing can be incorporated back into the presented page.”
  • In plain English, DOM makes other standard components of your page (style sheets, mark-up elements, and scripts) accessible to manipulation.
  • DOM is a standard way to make web pages behave like applications
  • Allows the page to act independently of the server… for example – to permit a page to be sorted or translated into another language without a server connection.
  • Dynamic menus
  • Style switching

To summarize: Using a movie metaphor:

 

  • XHTML is the screenwriter
  • CSS is the Art Director
  • Scripting languages are the special effects and interactivity
  • DOM is the director who oversees the entire production
Do This:

Once you have reviewed these materials, it is time to move on to looking at the individual elements of this evolution. But first, please take a few moments to record a few impressions about all of this (you may use the audio response but please keep things to about five minutes or so.. be precise and crisp with your responses:

  1. What was your overall impression of all of this? Were you aware of how the standards movement (as related to the so-called ‘Web 2.0’) all came about?

  2. Did you make the connection between creating a context-based environment through the use of xml coding (that interfaces with databases) and the rise of social media?

  3. What about the rise in competing appliance-based operating systems… (i.e., Android vs iOS vs Windows Surface)? Are we again searching for serendipity (i.e., a standardized, open environment)? Is their a need for standardization in operating systems, GUI? Are we simply chasing ‘windmills here or do you think that serendipity will ever come about? Explain.


Now on to the ‘techie’ part of all of this…

First review the lesson on CSS Style sheets (we have already covered HTML/XHTML), then on to Java scripting… followed by the eventual evolution of php and xml… the final missing link (context) to the development of the semantic Web.

In Lessons-6207. Both comments and pings are currently closed.

Comments are closed.