Ac#ve
Web
Development

      Divya
Manian
     Open
Web
Vigilante
         nimbu.in




                          Philipp
...
WHO?
html5boilerplate.com
html5readiness.com
nimbupani.com




                5
WHAT?
2003
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
/
...
I
DON’T
KNOW
HOW
DID
THIS
HAPPEN?
Deadlines




            Wendy
Seltzer
hSp://www.flickr.com/photos/wseltzer/5217885/
Knowledge
becomes
Supers##on




                   S.Diddy
hSp://www.flickr.com/photos/spence_sir/2292721692/
No
Incen#ves




        Randy
von
Liski

hSp://www.flickr.com/photos/myoldpostcards/3670908596/
Outsourced

 Learning



                                      Sourabh
Rath

  hSp://www.flickr.com/photos/bobloo17/3155888...
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.
Mai...
New
dra^s
keep
ge_ng
published!
45
CSS
dra^s,
17
HTML
&
related
dra^s.

Browsers
implement
features
even
more
rapidly.
Mai...
How?
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...
Create
Support
chart
for
new
features

Bling:
Features
that
will
render
only
if
browsers

support
them.
E.g.
border‐radius...
Create
Support
chart
for
new
features

Bling:
Features
that
will
render
only
if
browsers

support
them.
E.g.
border‐radius...
SAMPLE
          Open
Web
Support
Chart
for
June
2010

Feature             Bling                Needs
Fallback       Canno...
Keep
UpdaAng
the
chart
every

          month
Keep
UpdaAng
the
chart
every

          month

           At
least.
Learning
Rituals
            Hellebardius
hSp://www.flickr.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
official
browser
specificaAons
...
Set
aside
2
hours
every
week
to
test
new
features.

–
THIS
IS
NOT
NEGOTIABLE.

Always
look
up
official
browser
specificaAons
...
Official
Browser
DocumentaAon
Opera:

      opera.com/docs/specs/productspecs/
Firefox:
      developer.mozilla.org/en/HTML/...
Bed
Time
Reading
Differences
between
HTML4
and
HTML5
   www.w3.org/TR/html5‐diff/

HTML5
The
Markup
Language
  www.w3.org/TR...
ParAcipate




             E01
hSp://www.flickr.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
W...
Mailing
Lists
Worth
Your
Time
CSS
Mailing
List:

  lists.w3.org/Archives/Public/#www‐style


WHATWG
Mailing
List:
  lists....
Community
Worth
Your
Time
Opera:
dev.opera.com/
MDN:
developer.mozilla.org/

Chrome:
html5rocks.com/
MSDN:


 msdn.microso...
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.o...
PRACTICE




       By
Jan
Egil
KrisAansen
hSp://www.flickr.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...
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?
...
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?
...
Evaluate
Your
Demo
What
browsers
does
it
work
on?
How
does
it
degrade

on
browsers
that
do
not
support
required
features?
...
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

Op...
Share!

Post
your
code/markup
on
Github.

Have
a
monthly
meet‐up
with
other

developers
in
your
organizaAon
to
discuss

Op...
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
audienc...
Watch
Out!

Authors,
OrganizaAons
all
have
bias
that
they

may
or
may
not
be
aware
of.
Always
BEWARE.

Your
target
audienc...
DESIGNERS
DESIGNERS
CSS/HTML
is
not
sufficient!
DESIGNERS
CSS/HTML
is
not
sufficient!

Many
of
the
new
APIs
of
HTML5
are
only

available
in
JavaScript.
DESIGNERS
CSS/HTML
is
not
sufficient!

Many
of
the
new
APIs
of
HTML5
are
only

available
in
JavaScript.

Learn
JavaScript.

DESIGNERS
CSS/HTML
is
not
sufficient!

Many
of
the
new
APIs
of
HTML5
are
only

available
in
JavaScript.

Learn
JavaScript.

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

Active Web Development
Active Web Development
Active Web Development
Active Web Development
Active Web Development
Active Web Development
Active Web Development
Upcoming SlideShare
Loading in...5
×

Active Web Development

5,428

Published on

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.

Published in: Education
3 Comments
6 Likes
Statistics
Notes
No Downloads
Views
Total Views
5,428
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
29
Comments
3
Likes
6
Embeds 0
No embeds

No notes for slide












































































  • Active Web Development

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

    2. 2. WHO?
    3. 3. html5boilerplate.com
    4. 4. html5readiness.com
    5. 5. nimbupani.com 5
    6. 6. WHAT?
    7. 7. 2003
    8. 8. 2008 Is
there
more
to
web
design?
    9. 9. SemanAc
Markup
    10. 10. SemanAc
Markup Use
CSS
    11. 11. SemanAc
Markup Use
CSS Use
jQuery
for
what
CSS
cannot
do
    12. 12. SemanAc
Markup Use
CSS Use
jQuery
for
what
CSS
cannot
do PSD
to
XHTML
    13. 13. First
DraB
of
HTML5
Published Jan
28
2008
    14. 14. WHAT
DID
I
KNOW?
    15. 15. Why
use
a
doctype?
    16. 16. Why
use
a
doctype? Why
do
I
use
XHTML
doctype?
    17. 17. Why
use
a
doctype? Why
do
I
use
XHTML
doctype? What
are
inline
elements/block‐level
elements?
    18. 18. Why
use
a
doctype? Why
do
I
use
XHTML
doctype? What
are
inline
elements/block‐level
elements? What
is
display:inline
/
display:block?
    19. 19. I
DON’T
KNOW
    20. 20. HOW
DID
THIS
HAPPEN?
    21. 21. Deadlines Wendy
Seltzer
hSp://www.flickr.com/photos/wseltzer/5217885/
    22. 22. Knowledge
becomes
Supers##on S.Diddy
hSp://www.flickr.com/photos/spence_sir/2292721692/
    23. 23. No
Incen#ves Randy
von
Liski

hSp://www.flickr.com/photos/myoldpostcards/3670908596/
    24. 24. Outsourced
 Learning Sourabh
Rath
 hSp://www.flickr.com/photos/bobloo17/3155888852/
    25. 25. Why
is
it
important?
    26. 26. New
dra^s
keep
ge_ng
published!
    27. 27. New
dra^s
keep
ge_ng
published! 45
CSS
dra^s,
17
HTML
&
related
dra^s.

    28. 28. New
dra^s
keep
ge_ng
published! 45
CSS
dra^s,
17
HTML
&
related
dra^s.
 Browsers
implement
features
even
more
rapidly.
    29. 29. 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.
    30. 30. 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!
    31. 31. How?
    32. 32. Create
a
CONSTITUTION Create
rituals
for
learning
    33. 33. Cons#tu#on
    34. 34. Create
Support
chart
for
new
features
    35. 35. 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.

    36. 36. 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.
    37. 37. 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.
    38. 38. 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
    39. 39. Keep
UpdaAng
the
chart
every
 month
    40. 40. Keep
UpdaAng
the
chart
every
 month At
least.
    41. 41. Learning
Rituals Hellebardius
hSp://www.flickr.com/photos/libaer2002/3134119860/
    42. 42. Set
aside
2
hours
every
week
to
test
new
features.
 –
THIS
IS
NOT
NEGOTIABLE.
    43. 43. 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.
    44. 44. 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/
    45. 45. 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
    46. 46. 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
    47. 47. ParAcipate E01
hSp://www.flickr.com/photos/e01/2291431743/
    48. 48. Subscribe/ParAcipate
to
web
standards
mailing
 lists.
    49. 49. Subscribe/ParAcipate
to
web
standards
mailing
 lists. File
bug
reports.
    50. 50. Subscribe/ParAcipate
to
web
standards
mailing
 lists. File
bug
reports. Create
demos.
    51. 51. Subscribe/ParAcipate
to
web
standards
mailing
 lists. File
bug
reports. Create
demos. Share
your
code/meet
other
Open
Web
 cra^smen.
    52. 52. 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/
    53. 53. Community
Worth
Your
Time Opera:
dev.opera.com/ MDN:
developer.mozilla.org/
 Chrome:
html5rocks.com/ MSDN:
 
 msdn.microso^.com/en‐us/scriptjunkie/
    54. 54. File
Browser
Bug
Reports
    55. 55. File
Browser
Bug
Reports If
a
behavior
is
inconsistent
with
the
standard.
    56. 56. File
Browser
Bug
Reports If
a
behavior
is
inconsistent
with
the
standard. If
the
bug
is
not
already
documented.
    57. 57. 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/
    58. 58. PRACTICE By
Jan
Egil
KrisAansen
hSp://www.flickr.com/photos/styrheim/203311896/
    59. 59. Get
dropbox
dropbox.com
    60. 60. Get
dropbox
dropbox.com Use
template:
e.g.
html5boilerplate.com

    61. 61. 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?

    62. 62. Evaluate
Your
Demo
    63. 63. Evaluate
Your
Demo What
browsers
does
it
work
on?
How
does
it
degrade
 on
browsers
that
do
not
support
required
features?
    64. 64. 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?
    65. 65. 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?
    66. 66. 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?
    67. 67. 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?
    68. 68. Share!
    69. 69. Share! Post
your
code/markup
on
Github.
    70. 70. 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.
    71. 71. 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.
    72. 72. Watch
Out!
    73. 73. Watch
Out! Authors,
OrganizaAons
all
have
bias
that
they
 may
or
may
not
be
aware
of.
Always
BEWARE.
    74. 74. 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.
    75. 75. 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.
    76. 76. DESIGNERS
    77. 77. DESIGNERS CSS/HTML
is
not
sufficient!
    78. 78. DESIGNERS CSS/HTML
is
not
sufficient! Many
of
the
new
APIs
of
HTML5
are
only
 available
in
JavaScript.
    79. 79. DESIGNERS CSS/HTML
is
not
sufficient! Many
of
the
new
APIs
of
HTML5
are
only
 available
in
JavaScript. Learn
JavaScript.

    80. 80. 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!
    81. 81. nimbu.in Star
Trek
screenshots
from
CBS
hSp://www.youtube.com/show/startrek?s=1

    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×