• Like
  • Save
Successful Teams follow Standards
Upcoming SlideShare
Loading in...5
×

Successful Teams follow Standards

  • 19,685 views
Uploaded on

My presentation for Paris Web 2007 in Paris, France. I had no idea about the audience, so I kept it non-tech.

My presentation for Paris Web 2007 in Paris, France. I had no idea about the audience, so I kept it non-tech.

More in: Business , Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
19,685
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
0
Comments
0
Likes
28

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Successful Teams follow standards Christian Heilmann Paris Web 2007 November 2007, Paris
  • 2.
    • The great thing about web development is that browsers rock.
  • 3.
    • All you need is 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 to worry about.
  • 7.
    • An attitude that supports a whole market segment:
    • Web Development
  • 8.
    • However, not all web developers subscribe to it.
  • 9.
    • A small, but constantly growing group tends to disagree.
  • 10.  
  • 11.
    • They want to move ahead.
  • 12.
    • They do that by relying on a secret weapon.
  • 13.
    • Following agreed standards and practices.
  • 14.
    • This takes time and effort.
  • 15.
    • It also takes dedication and stamina.
  • 16.
    • Especially when it comes to following the W3C recommendations.
  • 17.
    • … as browsers do not really care.
  • 18.
    • Small wins are great
  • 19.
    • Does this mean that following standards means unnecessary overhead?
  • 20.
    • Are we agile enough?
  • 21.
    • Yes, we are!
  • 22.
    • First of all, browsers are forgiving, but not in the same manner.
  • 23.
    • This is not that much of a problem, if you are not too fussed about the display being perfect.
  • 24.
    • However, some people do.
    • With good reason.
  • 25.
    • We work with another department that cares a lot.
  • 26.
    • Design
  • 27.
    • We also work with another department that does not care as much.
  • 28.
    • The Business
  • 29.
    • However, everybody is a designer.
    • (or thinks so)
  • 30.
    • How to achieve consistency?
  • 31.
    • By not letting browsers 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 you improve the product turnaround time?
  • 34.
    • Allowing for work in parallel.
  • 35.
    • You can achieve this 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 driver of successful web products?
  • 38.
    • The ability to change and adapt to market demands.
  • 39.
    • Your web product is never finished.
    • The media moves too fast for that.
  • 40.
    • The web is evolving and moving away from the web we know now.
  • 41.
    • New platforms, new browsers, new technologies are always around the corner.
  • 42.
    • iPhone
  • 43.
    • Nazb… Naba…
    • that bunny thing.
  • 44.
    • C’est la Wii
  • 45.
    • Businesses who don’t understand that need to watch out.
  • 46.
    • The way to support upcoming technologies and platforms in a predictable manner is?
  • 47.
    • Follow a standard.
  • 48.
    • What is a standard?
  • 49.
    • A standard is an agreement of various groups or individuals to solve a problem in a consistent manner.
  • 50.
    • An example - The Screw
  • 51.
    • To be used with a screwdriver
  • 52.
    • Or…
  • 53.
    • Which leads to…
  • 54.
    • We do the same to web sites.
  • 55.
    • The W3C recommendations are the screwdriver for browsers and assistive technology.
  • 56.
    • WYSIWYG or “let’s see if it works on my browser” aren’t.
  • 57.
    • 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)
  • 58.
    • Validation is the start of a quality control process, not the end of it!
  • 59.
    • You can create perfectly valid and at the same time terribly bad code.
  • 60.
    • You cannot validate semantics automatically.
  • 61.
    • Following W3C recommendations is also the start for your own code standards.
  • 62.
    • Defining a standard is hard work.
  • 63.
    • 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
  • 64. Following a standard makes 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 standard makes us an example for others.
  • 68.
    • Imagine starting in a company that has an agreed way of working.
  • 69.
    • People can work, can get sick or go on vacation.
  • 70.
    • There is no downtime or long hand-over periods.
  • 71.
    • You don’t work for yourself but for everybody else and the person to replace you.
  • 72.
    • You can work across the globe, taking advantage of time differences.
  • 73.
    • “ Homework”
  • 74.
    • Foster internal communication.
  • 75.
    • Lightning Talks:
      • 5 Minutes presentation
      • 5 minutes demo
      • 5 minutes discussion
    • Every Thursday
    • 11.45 – 12.00
  • 76. http://dev.opera.com/articles/view/progressive-enhancement-and-the-yahoo-u/
  • 77.
    • No more bad surprises.
    • No more heroes.
    • Let’s work together.
  • 78.
    • MERCI!
    Christian Heilmann http://wait-till-i.com http://icant.co.uk/ http://pluglondon.org [email_address] http:// slideshare.net/cheilmann