Successful Teams follow Standards

Slide 1: Successful Teams follow standards Christian Heilmann Paris Web 2007 November 2007, Paris

Slide 2: The great thing about web development is that browsers rock.

Slide 3: All you need is to put some HTML together, and let the browser do its stuff.

Slide 4: <HTML> <DIV style=“width:300px;bac kground:gray”> Section Header<BR><BR> Section Body<BR><BR> Section Footer<BR><BR> </div> </HTML>

Slide 6: Done. Nothing to worry about.

Slide 7: An attitude that supports a whole market segment: Web Development

Slide 8: However, not all web developers subscribe to it.

Slide 9: A small, but constantly growing group tends to disagree.

Slide 11: They want to move ahead.

Slide 12: They do that by relying on a secret weapon.

Slide 13: Following agreed standards and practices.

Slide 14: This takes time and effort.

Slide 15: It also takes dedication and stamina.

Slide 16: Especially when it comes to following the W3C recommendations.

Slide 17: …as browsers do not really care.

Slide 18: Small wins are great

Slide 19: Does this mean that following standards means unnecessary overhead?

Slide 20: Are we agile enough?

Slide 21: Yes, we are!

Slide 22: First of all, browsers are forgiving, but not in the same manner.

Slide 23: This is not that much of a problem, if you are not too fussed about the display being perfect.

Slide 24: However, some people do. With good reason.

Slide 25: We work with another department that cares a lot.

Slide 26: Design

Slide 27: We also work with another department that does not care as much.

Slide 28: The Business

Slide 29: However, everybody is a designer. (or thinks so)

Slide 30: How to achieve consistency?

Slide 31: By not letting browsers do guesswork but telling them what is what.

Slide 32: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html dir="ltr" lang="en" > <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Page Demo</title> </head> <body> <div id="intro"> <div class="hd">Section Header</div> <div class="bd">Page Section Body</div> <div class="ft">Page Section Footer</div> </div> </body> </html>

Slide 33: How can you improve the product turnaround time?

Slide 34: Allowing for work in parallel.

Slide 35: You can achieve this by separating work streams and use the right technologies for the right job.

Slide 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”

Slide 37: The main driver of successful web products?

Slide 38: The ability to change and adapt to market demands.

Slide 39: Your web product is never finished. The media moves too fast for that.

Slide 40: The web is evolving and moving away from the web we know now.

Slide 41: New platforms, new browsers, new technologies are always around the corner.

Slide 42: iPhone

Slide 43: Nazb… Naba… that bunny thing.

Slide 44: C’est la Wii

Slide 45: Businesses who don’t understand that need to watch out.

Slide 46: The way to support upcoming technologies and platforms in a predictable manner is?

Slide 47: Follow a standard.

Slide 48: What is a standard?

Slide 49: A standard is an agreement of various groups or individuals to solve a problem in a consistent manner.

Slide 50: An example - The Screw

Slide 51: To be used with a screwdriver

Slide 52: Or…

Slide 53: Which leads to…

Slide 54: We do the same to web sites.

Slide 55: The W3C recommendations are the screwdriver for browsers and assistive technology.

Slide 56: WYSIWYG or “let’s see if it works on my browser” aren’t.

Slide 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)

Slide 58: Validation is the start of a quality control process, not the end of it!

Slide 59: You can create perfectly valid and at the same time terribly bad code.

Slide 60: You cannot validate semantics automatically.

Slide 61: Following W3C recommendations is also the start for your own code standards.

Slide 62: Defining a standard is hard work.

Slide 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

Slide 64: Following a standard makes us ready for change.

Slide 65: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html dir="ltr" lang="en" > <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Page Demo</title> <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.3.1/build/reset-fonts- grids/reset-fonts-grids.css"> <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.3.1/build/container/assets/container.css"> <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.3.1/build/container/assets/skins/sam/container.css"> </head> <body class="yui-skin-sam"> <div id="intro"> <div class="hd">Section Header</div> <div class="bd">Section Body</div> <div class="ft">Section Footer</div> </div> <script type="text/javascript" src="http://yui.yahooapis.com/2.3.1/build/yahoo-dom-event/yahoo-dom- event.js"></script> <script type="text/javascript" src="http://yui.yahooapis.com/2.3.1/build/dragdrop/dragdrop- min.js"></script> <script type="text/javascript" src="http://yui.yahooapis.com/2.3.1/build/container/container- min.js"></script> <script> var demopanel = new YAHOO.widget.Panel('intro',{close:true,visible:true,modal:true,draggable:true}); demopanel.render(); </script> </body> </html>

Slide 67: Following a standard makes us an example for others.

Slide 68: Imagine starting in a company that has an agreed way of working.

Slide 69: People can work, can get sick or go on vacation.

Slide 70: There is no downtime or long hand-over periods.

Slide 71: You don’t work for yourself but for everybody else and the person to replace you.

Slide 72: You can work across the globe, taking advantage of time differences.

Slide 73: “Homework”

Slide 74: Foster internal communication.

Slide 75: Lightning Talks: – 5 Minutes presentation – 5 minutes demo – 5 minutes discussion Every Thursday 11.45 – 12.00

Slide 76: http://dev.opera.com/articles/view/progressive-enhancement-and-the-yahoo-u/

Slide 77: No more bad surprises. No more heroes. Let’s work together.

Slide 78: MERCI! Christian Heilmann http://wait-till-i.com http://icant.co.uk/ http://pluglondon.org chris.heilmann@gmail.com http://slideshare.net/cheilmann

Slideshare.net (beta)