Web tech­nologies are evolving at such a frenetic pace that it becomes almost mandatory to learn on your own. A lot of us still depend on other people to do this learning for us, and we tend to use their answers to solve our everyday problems. Inconsistent imple­men­ta­tions, rapidly evolving specs, ques­tionable perfor­mance impacts and main­te­nance impli­ca­tions mean we cannot always depend on others for answers but must involve ourselves actively in the process of devel­oping spec­i­fi­ca­tions for new Web tech­nologies. But how do we go about it? There are some simple rituals we can all do, which can have us be better-​​informed and also better inform the people and groups who are most directly involved in the devel­opment of new Web tech­nologies.

1. Ac#ve Web Development
Divya Manian
Open Web Vigilante
nimbu.in
Philipp Salzgeber

2. WHO?

3. html5boilerplate.com

4. html5readiness.com

5. nimbupani.com
5

6. WHAT?

7. 2003

9. 2008
Is there more to web design?

11. SemanAc Markup

12. SemanAc Markup
Use CSS

13. SemanAc Markup
Use CSS
Use jQuery for what CSS cannot do

14. SemanAc Markup
Use CSS
Use jQuery for what CSS cannot do
PSD to XHTML

15. First DraB of HTML5 Published
Jan 28 2008

16. WHAT DID I KNOW?

18. Why use a doctype?

19. Why use a doctype?
Why do I use XHTML doctype?

20. Why use a doctype?
Why do I use XHTML doctype?
What are inline elements/block‐level elements?

21. Why use a doctype?
Why do I use XHTML doctype?
What are inline elements/block‐level elements?
What is display:inline / display:block?

22. I DON’T KNOW

23. HOW DID THIS HAPPEN?

24. Deadlines
Wendy Seltzer hSp://www.flickr.com/photos/wseltzer/5217885/

25. Knowledge becomes Supers##on
S.Diddy hSp://www.flickr.com/photos/spence_sir/2292721692/

26. No Incen#ves
Randy von Liski hSp://www.flickr.com/photos/myoldpostcards/3670908596/

27. Outsourced
Learning
Sourabh Rath
hSp://www.flickr.com/photos/bobloo17/3155888852/

28. Why is it important?

30. New dra^s keep ge_ng published!

31. New dra^s keep ge_ng published!
45 CSS dra^s, 17 HTML & related dra^s.

32. New dra^s keep ge_ng published!
45 CSS dra^s, 17 HTML & related dra^s.
Browsers implement features even more rapidly.

33. New dra^s keep ge_ng published!
45 CSS dra^s, 17 HTML & related dra^s.
Browsers implement features even more rapidly.
Maintainable, beSer‐performing code.

34. New dra^s keep ge_ng published!
45 CSS dra^s, 17 HTML & related dra^s.
Browsers implement features even more rapidly.
Maintainable, beSer‐performing code.
Help push open web standards forward!

35. How?

36. Create a CONSTITUTION
Create rituals for learning

37. Cons#tu#on

38. Create Support chart for new features

39. Create Support chart for new features
Bling: Features that will render only if browsers
support them. E.g. border‐radius, box‐shadow,
gradients, text‐shadow.

40. Create Support chart for new features
Bling: Features that will render only if browsers
support them. E.g. border‐radius, box‐shadow,
gradients, text‐shadow.
Needs Fallback: Features you will use, but with
some kind of fallback for browsers that do not
support it: HTML5 form elements, Canvas, SVG.

41. Create Support chart for new features
Bling: Features that will render only if browsers
support them. E.g. border‐radius, box‐shadow,
gradients, text‐shadow.
Needs Fallback: Features you will use, but with
some kind of fallback for browsers that do not
support it: HTML5 form elements, Canvas, SVG.
Cannot Use Now: Features you won’t use yet:
Websockets.

42. SAMPLE
Open Web Support Chart for June 2010
Feature Bling Needs Fallback Cannot Use
Border Radius X ‐ ‐
Box Shadow X ‐ ‐
HTML5 Forms ‐ X – HTML5Widgets ‐
Canvas ‐ X – excanvas ‐
Web Workers ‐ ‐ X
Web Sockets ‐ ‐ X
More fallback scripts: github.com/Modernizr/Modernizr/wiki/Shims‐and‐fallbacks

43. Keep UpdaAng the chart every
month

44. Keep UpdaAng the chart every
month
At least.

45. Learning Rituals
Hellebardius hSp://www.flickr.com/photos/libaer2002/3134119860/

47. Set aside 2 hours every week to test new features.
– THIS IS NOT NEGOTIABLE.

48. Set aside 2 hours every week to test new features.
– THIS IS NOT NEGOTIABLE.
Always look up official browser specificaAons if a
feature does not work on a browser.

49. Set aside 2 hours every week to test new features.
– THIS IS NOT NEGOTIABLE.
Always look up official browser specificaAons if a
feature does not work on a browser.
If unsure of how to use a feature, look up W3C
Cheat sheet: www.w3.org/2009/cheatsheet/

50. Official Browser DocumentaAon
Opera:
opera.com/docs/specs/productspecs/
Firefox:
developer.mozilla.org/en/HTML/HTML5
IE:
bit.ly/ieopenweb
Safari:
bit.ly/safarihtml
bit.ly/safaricss

51. Bed Time Reading
Differences between HTML4 and HTML5
www.w3.org/TR/html5‐diff/
HTML5 The Markup Language
www.w3.org/TR/html‐markup/
Using XHTML in HTML5
www.w3.org/TR/html‐polyglot/
CSS Selectors
www.w3.org/TR/css3‐selectors/#selectors

52. ParAcipate
E01 hSp://www.flickr.com/photos/e01/2291431743/

54. Subscribe/ParAcipate to web standards mailing
lists.

55. Subscribe/ParAcipate to web standards mailing
lists.
File bug reports.

56. Subscribe/ParAcipate to web standards mailing
lists.
File bug reports.
Create demos.

57. Subscribe/ParAcipate to web standards mailing
lists.
File bug reports.
Create demos.
Share your code/meet other Open Web
cra^smen.

58. Mailing Lists Worth Your Time
CSS Mailing List:
lists.w3.org/Archives/Public/#www‐style
WHATWG Mailing List:
lists.whatwg.org/htdig.cgi/whatwg‐whatwg.org/
Mobile Web:
tech.groups.yahoo.com/group/mobile‐web/

59. Community Worth Your Time
Opera: dev.opera.com/
MDN: developer.mozilla.org/
Chrome: html5rocks.com/
MSDN:
msdn.microso^.com/en‐us/scriptjunkie/

60. File Browser Bug Reports

61. File Browser Bug Reports
If a behavior is inconsistent with the standard.

62. File Browser Bug Reports
If a behavior is inconsistent with the standard.
If the bug is not already documented.

63. File Browser Bug Reports
If a behavior is inconsistent with the standard.
If the bug is not already documented.
ejohn.org/blog/a‐web‐developers‐responsibility/

64. PRACTICE
By Jan Egil KrisAansen hSp://www.flickr.com/photos/styrheim/203311896/

66. Get dropbox dropbox.com

67. Get dropbox dropbox.com
Use template: e.g. html5boilerplate.com

68. Get dropbox dropbox.com
Use template: e.g. html5boilerplate.com
Create demos for new features which might be of
use to you as web developer:
How can I use canvas for image animaAon?
How can I create arrows with only CSS?
Can I create an accordion without JavaScript?
How about fancy radio buSons?

69. Evaluate Your Demo

70. Evaluate Your Demo
What browsers does it work on? How does it degrade
on browsers that do not support required features?

71. Evaluate Your Demo
What browsers does it work on? How does it degrade
on browsers that do not support required features?
Does it require intensive processing?

72. Evaluate Your Demo
What browsers does it work on? How does it degrade
on browsers that do not support required features?
Does it require intensive processing?
Does it slow down the browser?

73. Evaluate Your Demo
What browsers does it work on? How does it degrade
on browsers that do not support required features?
Does it require intensive processing?
Does it slow down the browser?
What are the alternaAves for browsers that do not
support the features required?

74. Evaluate Your Demo
What browsers does it work on? How does it degrade
on browsers that do not support required features?
Does it require intensive processing?
Does it slow down the browser?
What are the alternaAves for browsers that do not
support the features required?
Does my ConsAtuAon need updaAng?

75. Share!

76. Share!
Post your code/markup on Github.

77. Share!
Post your code/markup on Github.
Have a monthly meet‐up with other
developers in your organizaAon to discuss
Open Web Standards and your ConsAtuAon.

78. Share!
Post your code/markup on Github.
Have a monthly meet‐up with other
developers in your organizaAon to discuss
Open Web Standards and your ConsAtuAon.
Autopsy demos you have found interesAng
and share your findings.

79. Watch Out!

80. Watch Out!
Authors, OrganizaAons all have bias that they
may or may not be aware of. Always BEWARE.

81. Watch Out!
Authors, OrganizaAons all have bias that they
may or may not be aware of. Always BEWARE.
Your target audience browsers might be vastly
different from experts you trust.

82. Watch Out!
Authors, OrganizaAons all have bias that they
may or may not be aware of. Always BEWARE.
Your target audience browsers might be vastly
different from experts you trust.
“Cool” demos almost always have caveats that
need to be invesAgated.

83. DESIGNERS

84. DESIGNERS
CSS/HTML is not sufficient!

85. DESIGNERS
CSS/HTML is not sufficient!
Many of the new APIs of HTML5 are only
available in JavaScript.

86. DESIGNERS
CSS/HTML is not sufficient!
Many of the new APIs of HTML5 are only
available in JavaScript.
Learn JavaScript.

87. DESIGNERS
CSS/HTML is not sufficient!
Many of the new APIs of HTML5 are only
available in JavaScript.
Learn JavaScript.
Tell the Open Web Standards Editors what you
want!

88. nimbu.in
Star Trek screenshots from CBS hSp://www.youtube.com/show/startrek?s=1