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

Like this? Share it with your network

Share

Active Web Development

on

  • 5,566 views

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

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.

Statistics

Views

Total Views
5,566
Views on SlideShare
3,138
Embed Views
2,428

Actions

Likes
6
Downloads
29
Comments
3

14 Embeds 2,428

http://nimbupani.com 1903
http://feeds.feedburner.com 180
http://www.webdirections.org 170
http://lanyrd.com 98
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
More...

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

CC Attribution License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />

Active Web Development Presentation Transcript

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

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

  • 28. New
dra^s
keep
ge_ng
published! 45
CSS
dra^s,
17
HTML
&
related
dra^s.
 Browsers
implement
features
even
more
rapidly.
  • 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. 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. How?
  • 32. Create
a
CONSTITUTION Create
rituals
for
learning
  • 33. Cons#tu#on
  • 34. Create
Support
chart
for
new
features
  • 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. 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. 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. 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. Keep
UpdaAng
the
chart
every
 month
  • 40. Keep
UpdaAng
the
chart
every
 month At
least.
  • 41. Learning
Rituals Hellebardius
hSp://www.flickr.com/photos/libaer2002/3134119860/
  • 42. Set
aside
2
hours
every
week
to
test
new
features.
 –
THIS
IS
NOT
NEGOTIABLE.
  • 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. 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. 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. 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. ParAcipate E01
hSp://www.flickr.com/photos/e01/2291431743/
  • 48. Subscribe/ParAcipate
to
web
standards
mailing
 lists.
  • 49. Subscribe/ParAcipate
to
web
standards
mailing
 lists. File
bug
reports.
  • 50. Subscribe/ParAcipate
to
web
standards
mailing
 lists. File
bug
reports. Create
demos.
  • 51. Subscribe/ParAcipate
to
web
standards
mailing
 lists. File
bug
reports. Create
demos. Share
your
code/meet
other
Open
Web
 cra^smen.
  • 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. Community
Worth
Your
Time Opera:
dev.opera.com/ MDN:
developer.mozilla.org/
 Chrome:
html5rocks.com/ MSDN:
 
 msdn.microso^.com/en‐us/scriptjunkie/
  • 54. File
Browser
Bug
Reports
  • 55. File
Browser
Bug
Reports If
a
behavior
is
inconsistent
with
the
standard.
  • 56. File
Browser
Bug
Reports If
a
behavior
is
inconsistent
with
the
standard. If
the
bug
is
not
already
documented.
  • 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. PRACTICE By
Jan
Egil
KrisAansen
hSp://www.flickr.com/photos/styrheim/203311896/
  • 59. Get
dropbox
dropbox.com
  • 60. Get
dropbox
dropbox.com Use
template:
e.g.
html5boilerplate.com

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

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