Successful Teams  follow standards Christian Heilmann Paris Web 2007 November 2007, Paris
The great thing about web development is that browsers rock.
All you need is to put some HTML together, and let the browser do its stuff.
<HTML> <DIV style=“width:300px;background:gray”>  Section Header<BR><BR>  Section Body<BR><BR> Section Footer<BR><BR>  </div> </HTML>
 
Done. Nothing to worry about.
An attitude that supports a whole market segment: Web Development
However, not all web developers subscribe to it.
A small, but constantly growing group tends to disagree.
 
They want to move ahead.
They do that by relying on a secret weapon.
Following agreed standards and practices.
This takes time and effort.
It also takes dedication and stamina.
Especially when it comes to following the W3C recommendations.
… as browsers do not really care.
Small wins are great
Does this mean that following standards means unnecessary overhead?
Are we agile enough?
Yes, we are!
First of all, browsers are forgiving, but not in the same manner.
This is not that much of a problem, if you are not too fussed about the display being perfect.
However, some people do.  With good reason.
We work with another department that cares a lot.
Design
We also work with another department that does not care as much.
The Business
However, everybody is a designer. (or thinks so)
How to achieve consistency?
By not letting browsers do guesswork but telling them what is what.
<!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01//EN&quot; &quot;http://www.w3.org/TR/html4/strict.dtd&quot;> <html dir=&quot;ltr&quot; lang=&quot;en&quot; > <head> <meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot;>  <title>Page Demo</title> </head> <body> <div id=&quot;intro&quot;>  <div class=&quot;hd&quot;>Section Header</div>  <div class=&quot;bd&quot;>Page Section Body</div>  <div class=&quot;ft&quot;>Page Section Footer</div>  </div> </body> </html>
How can you improve the product turnaround time?
Allowing for work in parallel.
You can achieve this by separating work streams and use the right technologies for the right job.
sep·a·ra·tion HTML = structure “ what is what” CSS = look and feel  “ how should it be displayed” JS/Flash = behaviour “ how should it react”
The main driver of successful web products?
The ability to change and adapt to market demands.
Your web product is never finished.  The media moves too fast for that.
The web is evolving and moving away from the web we know now.
New platforms, new browsers, new technologies are always around the corner.
iPhone
Nazb… Naba…  that bunny thing.
C’est la Wii
Businesses who don’t understand that need to watch out.
The way to support upcoming technologies and platforms in a predictable manner is?
Follow a standard.
What is a standard?
A standard is an agreement of various groups or individuals to solve a problem in a  consistent manner.
An example - The Screw
To be used with a screwdriver
Or…
Which leads to…
We do the same to web sites.
The W3C recommendations are the screwdriver for browsers and assistive technology.
WYSIWYG or “let’s see if it works on my browser” aren’t.
Following a standard means: Predictable results Validation as a quality control  Safe re-use of code and ideas Consistency (which leads to easy bug-fixing)
Validation is the start of a quality control process, not the end of it!
You can create perfectly valid and at the same time terribly bad code.
You cannot validate semantics  automatically.
Following W3C recommendations is also the start for your own code standards.
Defining a standard is hard work.
The benefits however are great. Flexible allocations (every product is built the same) Standard QA practices Modular Development via re-use of code from other products. A lot less maintenance work
Following a standard makes us ready for change.
<!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01//EN&quot; &quot;http://www.w3.org/TR/html4/strict.dtd&quot;> <html dir=&quot;ltr&quot; lang=&quot;en&quot; > <head> <meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot;>  <title>Page Demo</title> <link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;http://yui.yahooapis.com/2.3.1/build/reset-fonts-grids/reset-fonts-grids.css&quot;> <link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;http://yui.yahooapis.com/2.3.1/build/container/assets/container.css&quot;> <link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;http://yui.yahooapis.com/2.3.1/build/container/assets/skins/sam/container.css&quot;> </head> <body class=&quot;yui-skin-sam&quot;> <div id=&quot;intro&quot;>  <div class=&quot;hd&quot;>Section Header</div>  <div class=&quot;bd&quot;>Section Body</div>  <div class=&quot;ft&quot;>Section Footer</div> </div> <script type=&quot;text/javascript&quot; src=&quot;http://yui.yahooapis.com/2.3.1/build/yahoo-dom-event/yahoo-dom-event.js&quot;></script> <script type=&quot;text/javascript&quot; src=&quot;http://yui.yahooapis.com/2.3.1/build/dragdrop/dragdrop-min.js&quot;></script> <script type=&quot;text/javascript&quot; src=&quot;http://yui.yahooapis.com/2.3.1/build/container/container-min.js&quot;></script> <script> var demopanel = new YAHOO.widget.Panel('intro',{close:true,visible:true,modal:true,draggable:true});  demopanel.render(); </script> </body> </html>
 
Following a standard makes us an example for others.
Imagine starting in a company that has an agreed way of working.
People can work, can get sick or go on vacation.
There is no downtime or long hand-over periods.
You don’t work for yourself but for everybody else and the person to replace you.
You can work across the globe, taking advantage of time differences.
“ Homework”
Foster internal communication.
Lightning Talks: 5 Minutes presentation 5 minutes demo 5 minutes discussion Every Thursday 11.45 – 12.00
http://dev.opera.com/articles/view/progressive-enhancement-and-the-yahoo-u/
No more bad surprises. No more heroes.  Let’s work together.
MERCI! Christian Heilmann http://wait-till-i.com http://icant.co.uk/ http://pluglondon.org [email_address]   http:// slideshare.net/cheilmann

Successful Teams follow Standards

  • 1.
    Successful Teams follow standards Christian Heilmann Paris Web 2007 November 2007, Paris
  • 2.
    The great thingabout web development is that browsers rock.
  • 3.
    All you needis to put some HTML together, and let the browser do its stuff.
  • 4.
    <HTML> <DIV style=“width:300px;background:gray”> Section Header<BR><BR> Section Body<BR><BR> Section Footer<BR><BR> </div> </HTML>
  • 5.
  • 6.
    Done. Nothing toworry about.
  • 7.
    An attitude thatsupports a whole market segment: Web Development
  • 8.
    However, not allweb developers subscribe to it.
  • 9.
    A small, butconstantly growing group tends to disagree.
  • 10.
  • 11.
    They want tomove ahead.
  • 12.
    They do thatby relying on a secret weapon.
  • 13.
  • 14.
    This takes timeand effort.
  • 15.
    It also takesdedication and stamina.
  • 16.
    Especially when itcomes to following the W3C recommendations.
  • 17.
    … as browsersdo not really care.
  • 18.
  • 19.
    Does this meanthat following standards means unnecessary overhead?
  • 20.
    Are we agileenough?
  • 21.
  • 22.
    First of all,browsers are forgiving, but not in the same manner.
  • 23.
    This is notthat much of a problem, if you are not too fussed about the display being perfect.
  • 24.
    However, some peopledo. With good reason.
  • 25.
    We work withanother department that cares a lot.
  • 26.
  • 27.
    We also workwith another department that does not care as much.
  • 28.
  • 29.
    However, everybody isa designer. (or thinks so)
  • 30.
    How to achieveconsistency?
  • 31.
    By not lettingbrowsers do guesswork but telling them what is what.
  • 32.
    <!DOCTYPE HTML PUBLIC&quot;-//W3C//DTD HTML 4.01//EN&quot; &quot;http://www.w3.org/TR/html4/strict.dtd&quot;> <html dir=&quot;ltr&quot; lang=&quot;en&quot; > <head> <meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot;> <title>Page Demo</title> </head> <body> <div id=&quot;intro&quot;> <div class=&quot;hd&quot;>Section Header</div> <div class=&quot;bd&quot;>Page Section Body</div> <div class=&quot;ft&quot;>Page Section Footer</div> </div> </body> </html>
  • 33.
    How can youimprove the product turnaround time?
  • 34.
    Allowing for workin parallel.
  • 35.
    You can achievethis by separating work streams and use the right technologies for the right job.
  • 36.
    sep·a·ra·tion HTML =structure “ what is what” CSS = look and feel “ how should it be displayed” JS/Flash = behaviour “ how should it react”
  • 37.
    The main driverof successful web products?
  • 38.
    The ability tochange and adapt to market demands.
  • 39.
    Your web productis never finished. The media moves too fast for that.
  • 40.
    The web isevolving and moving away from the web we know now.
  • 41.
    New platforms, newbrowsers, new technologies are always around the corner.
  • 42.
  • 43.
    Nazb… Naba… that bunny thing.
  • 44.
  • 45.
    Businesses who don’tunderstand that need to watch out.
  • 46.
    The way tosupport upcoming technologies and platforms in a predictable manner is?
  • 47.
  • 48.
    What is astandard?
  • 49.
    A standard isan agreement of various groups or individuals to solve a problem in a consistent manner.
  • 50.
    An example -The Screw
  • 51.
    To be usedwith a screwdriver
  • 52.
  • 53.
  • 54.
    We do thesame to web sites.
  • 55.
    The W3C recommendationsare the screwdriver for browsers and assistive technology.
  • 56.
    WYSIWYG or “let’ssee if it works on my browser” aren’t.
  • 57.
    Following a standardmeans: Predictable results Validation as a quality control Safe re-use of code and ideas Consistency (which leads to easy bug-fixing)
  • 58.
    Validation is thestart of a quality control process, not the end of it!
  • 59.
    You can createperfectly valid and at the same time terribly bad code.
  • 60.
    You cannot validatesemantics automatically.
  • 61.
    Following W3C recommendationsis also the start for your own code standards.
  • 62.
    Defining a standardis hard work.
  • 63.
    The benefits howeverare great. Flexible allocations (every product is built the same) Standard QA practices Modular Development via re-use of code from other products. A lot less maintenance work
  • 64.
    Following a standardmakes us ready for change.
  • 65.
    <!DOCTYPE HTML PUBLIC&quot;-//W3C//DTD HTML 4.01//EN&quot; &quot;http://www.w3.org/TR/html4/strict.dtd&quot;> <html dir=&quot;ltr&quot; lang=&quot;en&quot; > <head> <meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot;> <title>Page Demo</title> <link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;http://yui.yahooapis.com/2.3.1/build/reset-fonts-grids/reset-fonts-grids.css&quot;> <link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;http://yui.yahooapis.com/2.3.1/build/container/assets/container.css&quot;> <link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;http://yui.yahooapis.com/2.3.1/build/container/assets/skins/sam/container.css&quot;> </head> <body class=&quot;yui-skin-sam&quot;> <div id=&quot;intro&quot;> <div class=&quot;hd&quot;>Section Header</div> <div class=&quot;bd&quot;>Section Body</div> <div class=&quot;ft&quot;>Section Footer</div> </div> <script type=&quot;text/javascript&quot; src=&quot;http://yui.yahooapis.com/2.3.1/build/yahoo-dom-event/yahoo-dom-event.js&quot;></script> <script type=&quot;text/javascript&quot; src=&quot;http://yui.yahooapis.com/2.3.1/build/dragdrop/dragdrop-min.js&quot;></script> <script type=&quot;text/javascript&quot; src=&quot;http://yui.yahooapis.com/2.3.1/build/container/container-min.js&quot;></script> <script> var demopanel = new YAHOO.widget.Panel('intro',{close:true,visible:true,modal:true,draggable:true}); demopanel.render(); </script> </body> </html>
  • 66.
  • 67.
    Following a standardmakes us an example for others.
  • 68.
    Imagine starting ina company that has an agreed way of working.
  • 69.
    People can work,can get sick or go on vacation.
  • 70.
    There is nodowntime or long hand-over periods.
  • 71.
    You don’t workfor yourself but for everybody else and the person to replace you.
  • 72.
    You can workacross the globe, taking advantage of time differences.
  • 73.
  • 74.
  • 75.
    Lightning Talks: 5Minutes presentation 5 minutes demo 5 minutes discussion Every Thursday 11.45 – 12.00
  • 76.
  • 77.
    No more badsurprises. No more heroes. Let’s work together.
  • 78.
    MERCI! Christian Heilmannhttp://wait-till-i.com http://icant.co.uk/ http://pluglondon.org [email_address] http:// slideshare.net/cheilmann