Your SlideShare is downloading. ×
0
Unobtrusive Javascript
Unobtrusive Javascript
Unobtrusive Javascript
Unobtrusive Javascript
Unobtrusive Javascript
Unobtrusive Javascript
Unobtrusive Javascript
Unobtrusive Javascript
Unobtrusive Javascript
Unobtrusive Javascript
Unobtrusive Javascript
Unobtrusive Javascript
Unobtrusive Javascript
Unobtrusive Javascript
Unobtrusive Javascript
Unobtrusive Javascript
Unobtrusive Javascript
Unobtrusive Javascript
Unobtrusive Javascript
Unobtrusive Javascript
Unobtrusive Javascript
Unobtrusive Javascript
Unobtrusive Javascript
Unobtrusive Javascript
Unobtrusive Javascript
Unobtrusive Javascript
Unobtrusive Javascript
Unobtrusive Javascript
Unobtrusive Javascript
Unobtrusive Javascript
Unobtrusive Javascript
Unobtrusive Javascript
Unobtrusive Javascript
Unobtrusive Javascript
Unobtrusive Javascript
Unobtrusive Javascript
Unobtrusive Javascript
Unobtrusive Javascript
Unobtrusive Javascript
Unobtrusive Javascript
Unobtrusive Javascript
Unobtrusive Javascript
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Unobtrusive Javascript

560

Published on

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
560
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
15
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Unobtrusive
JavaScript
  • 2. Dave
Verwer http://daveverwer.com http://shinydevelopment.com
  • 3. What
is
UJS?
  • 4. 

Did
it
have
full
functionality? No 

Was
it
as
quick? No 

Was
it
as
pretty? No 

Was
it
as
usable? No 

Did
it
basically
work? Yes
  • 5. Why
should
you
care?
  • 6. Accessibility
  • 7. Mobile
Browsing
  • 8. SEO
  • 9. As
of
1st
September
2005,
every
web
 site
built
for
a
dutch
government
 agency
is
required
by
law
to
conform
to: 
Valid
HTML
4.01
or
XHTML
1.0 
CSS
and
semantic
HTML
and
separation
of
structure
and
presentation 
Progressive
enhancement 
The
W3C
DOM
(instead
of
the
old
Microsoft
document.all) 
Meaningful
values
of
class
and
id 
Meaningful
alt
attributes
on
all
images 
Scripts
that
work
on
links
should
extend
the
basic
link
functionality
(think
accessible
popups) 
If
a
link
makes
no
sense
without
a
script,
it
shouldn't
be
in
the
HTML
(but
be
generated
by
JavaScript) 
Use
of
forms
or
scripts
as
the
only
means
of
getting
certain
information
is
prohibited 
Removing
the
focus
rectangle
on
links
is
prohibited 
Information
offered
in
a
closed
format
(think
Word)
should
also
be
offered
in
an
open
format 
The
semantics
of
many
HTML
elements
are
explicitly
defined
  • 10. Point
3: Progressive
Enhancement.
  • 11. Point
7: Scripts
that
work
on
links
 should
extend
the
basic
 link
functionality.
  • 12. Point
8: If
an
element
makes
no
 sense
without
a
script,
it
 shouldn't
be
in
the
HTML.
  • 13. Point
9: Use
of
forms
or
scripts
as
 the
only
means
of
getting
 certain
information
is
 prohibited.
  • 14. So
JavaScript
is
evil,
 right?
  • 15. Good
JavaScript
  • 16. Bad
JavaScript
  • 17. The
Dark
Ages of
the
Web
  • 18. Seperating
content
 from
design
  • 19. <b><font size=quot;5quot;><font color=quot;#0000FFquot;>THIS SITE IS UNDER CONSTRUCTION!!</font></font></b> <style> p.construction { color: #00f; font-size: 1.5em; font-weight: bold; } </style> <p class=quot;constructionquot;> THIS SITE IS UNDER CONSTRUCTION!! </p>
  • 20. Seperating
content
 from
design and
behaviour
  • 21. target=“_blank” demo
  • 22. Prototype
&
LowPro
  • 23. <a class=“external”>
  • 24. Event.addBehavior({ quot;a.external:clickquot;: function(event) { window.open(this.href, quot;extquot;); return false; } });
  • 25. Setting
a
class
becomes
 an
indicator
of
behaviour
 not
just
style
  • 26. Make
sure nothing
breaks
  • 27. Start
minimal
and
show
UI or Start
big
and
hide
UI
  • 28. JS
Specific
UI demo
  • 29. UJS
plugin
for
Rails demo
  • 30. Summary
  • 31. Does
it
really
need
it?
  • 32. Do
links
still
work?
  • 33. Does
this
break
the
 back
button?
  • 34. Don’t
rely
on
alert()
 for
confirmations
  • 35. Scripts
hidden
away
 when
possible?
  • 36. Enhancing
Accessibility
 with
JavaScript?!?
  • 37. Questions? dave.verwer@shinydevelopment.com

×