Active Web Development

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

html5boilerplate.com

html5readiness.com

nimbupani.com 5

2008 Is there more to web design?

SemanAc Markup

SemanAc Markup Use CSS

SemanAc Markup Use CSS Use jQuery for what CSS cannot do

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

First DraB of HTML5 Published Jan 28 2008

WHAT DID I KNOW?

Why use a doctype?

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

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

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

I DON’T KNOW

HOW DID THIS HAPPEN?

Deadlines Wendy Seltzer hSp://www.ﬂickr.com/photos/wseltzer/5217885/

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

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

Outsourced  Learning Sourabh Rath  hSp://www.ﬂickr.com/photos/bobloo17/3155888852/

Why is it important?

New dra^s keep ge_ng published!

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

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

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.

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!

Create a CONSTITUTION Create rituals for learning

Cons#tu#on

Create Support chart for new features

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. 

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.

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.

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

Keep UpdaAng the chart every  month

Keep UpdaAng the chart every  month At least.

Learning Rituals Hellebardius hSp://www.ﬂickr.com/photos/libaer2002/3134119860/

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

Set aside 2 hours every week to test new features.  – THIS IS NOT NEGOTIABLE. Always look up oﬃcial browser speciﬁcaAons if a  feature does not work on a browser.

Set aside 2 hours every week to test new features.  – THIS IS NOT NEGOTIABLE. Always look up oﬃcial browser speciﬁcaAons 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/

Oﬃcial 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

Bed Time Reading Diﬀerences between HTML4 and HTML5 www.w3.org/TR/html5‐diﬀ/ 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

ParAcipate E01 hSp://www.ﬂickr.com/photos/e01/2291431743/

Subscribe/ParAcipate to web standards mailing  lists.

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

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

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

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/

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

File Browser Bug Reports

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

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

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/

PRACTICE By Jan Egil KrisAansen hSp://www.ﬂickr.com/photos/styrheim/203311896/

Get dropbox dropbox.com

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

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? 

Evaluate Your Demo

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

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?

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?

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?

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?

Share!

Share! Post your code/markup on Github.

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.

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 ﬁndings.

Watch Out!

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

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  diﬀerent from experts you trust.

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  diﬀerent from experts you trust. “Cool” demos almost always have caveats that  need to be invesAgated.

DESIGNERS

DESIGNERS CSS/HTML is not suﬃcient!

DESIGNERS CSS/HTML is not suﬃcient! Many of the new APIs of HTML5 are only  available in JavaScript.

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

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

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

http://nimbupani.com	1782
http://feeds.feedburner.com	180
http://www.webdirections.org	159
http://lanyrd.com	63
http://paper.li	26
http://speakerrate.com	24
http://translate.googleusercontent.com	13
http://localhost	4
http://dl.dropbox.com	3
http://a0.twimg.com	3
http://static.slidesharecdn.com	1
http://www.netvibes.com	1
http://xss.yandex.net	1
http://webcache.googleusercontent.com	1

Active Web Development

by Divya Manian

Accessibility

Categories

Upload Details

Usage Rights

14 Embeds 2,261

Statistics

Active Web Development Presentation Transcript