SlideShare a Scribd company logo
1 of 29
Download to read offline
Avoiding the
       JavaScript:void(''):
Accommodating 1.0 Users in a Web 2.0
             World




         Jason Pitoniak
Rochester Institute of Technology

    HighEdWebDev ▪ TPR 4
       October 15, 2007
What's wrong with this code?



     <a href= “javascript:void('')” onclick=
“window.open('popup.html', 'popup', height=500,
     width=300);”>more information</a>
What is a 1.0 User?

Any user who, for whatever reason, cannot take
advantage the the advanced features of the sites we
build .

1.0 Users include:
 Users with JavaScript turned off
 Users of older browsers
 Users of mobile devices
 Users of assistive technology devices
Problems? What problems?

What kind of problems arise from using advanced
web design techniques?

     The site stops working if...

Can it be solved?

     Of course...that's why you're here,
     isn't it?
Example of a Problem
Yahoo!'s popular Upcoming.org community events
 database uses an advanced AJAX/JavaScript
 interface to let event organizers select venues.
What happens when you try to add an event without
 JavaScript support? Let's see...
What you won't learn today...
This is not a general accessibility lecture.

This is not a lecture on web standards, JavaScript,
 AJAX, or any related technology.

You will not learn the “best” way to create an
 accessible Web 2.0 site.
But you will leave with unanswered questions!
Some Questions

Is there a difference between a
web site and a web application?
Some Questions

             Is it acceptable to launch two
             versions of a web application?

Text-only pages are generally considered a bad idea
We launch Mac and PC versions of software
Google Maps and GMail
APIs/MVC to the rescue?
Hints for Doing it Right
Understand your audience
Code like it's 1999
Use DOM scripting to enhance the page
on the client
Consider using a JavaScript library
Understand Your Audience
An app that will be restricted to only the
computers in the registrar's office probably
doesn't need to be coded with mobile devices in
mind.
An app for students to check their homework
assignments probably should.
Both apps should address the needs of users with
disabilities.
Code Like It's 1999
Think lowest common denominator when
designing your basic page structure.
Follow web standards to ensure consistant
display.
Use DOM Scripting
Newer browsers can manipulate the page on the
client end.
Add the bells and whistles through JavaScript.
If a browser doesn't understand the manipulations
they will be ignored, but the user will have a
fulling working page nonetheless.
DOM Scripting Limitations
Many irregularities still exist between platforms
Proper care must be taken to prevent script errors
in older JS compliant browsers.
Consider a JavaScript Library
JavaScript libraries...
  Standardize browser irregularities
  Add support for “missing” events
  Often provide easy-to-use AJAX interfaces
  Sometimes provide cool widgets and page
  enhancements
JS Libraries: Many to Choose
And the Winner is...
Y I Chose YUI
Open source (BSD license)‫‏‬
Developed by Yahoo! for use on their properties
Actively being developed
DOM utilities, AJAX handlers, and widgets
Extremely flexible API
Lightweight
Namespacing system prevents naming conflicts
YUI Features
Standardized event model
onAvailable, onContentReady, and
onDOMReady events
DOM utilities like getElementsByClassName()‫‏‬
Many UI widgets: calendars, auto completes,
tabs, menus, data grids, color picker, etc.
YUI Issues
Namespacing model makes for very long lines of
code:
YAHOO.widget.calendar(...);
Flexible API = lots of doing things by hand
Componentialized code makes for lots of JS files
to include on web pages.
AJAX: The Web Developer's
       Four Letter Word
OMG, you used AJAX in an accessibility lecture!
Is AJAX really inaccessible?
If not, then what is?
But, you used DOM scripting in the example!
Avoiding DOM Scripting*
     Can we expect users that don't want advanced
     features of our sites to turn off JavaScript?
     Do we use JS in beneficial ways that don't
     manipulate the DOM?
     Is posting instructions on how to turn off JS a
     reasonable way to make our app accessible?



*when necessary
Accessibility Mode
Consider options to let users turn advanced, non-
acessible features off
−   Top of all pages?
−   On a user preferences page?
Simple check box and cookie?
Thoughts on Screen Readers
Screen readers tend not to notice runtime changes
in the DOM
Screen readers DO understand JavaScript
Screen readers DO understand CSS
Screen readers DON'T like JS “panels”
Screen readers DO work with popup windows
The Solution
<a href= “info.html” id=“mypopup”>more info</a>
document.getElementById(“mypopup”).onclick =
  function (e) {
      e = (window.event) ? window.event : e;
      window.open(this.href, “popup”,
        “height=200,width=300”);
      e.preventDefault();
  }
Yellow Box
When changing anything on the page, highlight it
with a yellow background
Fade the background to white slowly
Helps low-sighted users follow changes to the
page
Originally used by Basecamp
http://webiscope.com/archives/2007/09/19/how-usability-affects-products-part-2-
basecamp/
Accessibility Links
WAI: http://www.w3.org/WAI/
Section 508: http://www.section508.gov/
NYS Web Accessibility Standard:
http://www.oft.state.ny.us/policy/s04-001/index.htm
Mobile Device Links
W3C MobileOK Tests:
http://www.w3.org/TR/mobileOK-basic10-tests/
Challenges of Interface Design for Mobile
Devices:
http://yuiblog.com/blog/2007/10/02/challenges-
of-interface-design-for-mobile-devices/
JavaScript Library Links
YUI: http://developer.yahoo.com/yui
Prototype: http://www.prototypejs.org/
Scriptaculous: http://script.aculo.us/
jQuery: http://www.jquery.com/
DEDChain: http://dedchain.dustindiaz.com/
MooFX: http://moofx.mad4milk.net/
Adobe Spry: http://labs.adobe.com/technologies/spry/
Mochikit: http://mochikit.com/
Dojo: http://dojotoolkit.org/
Ext: http://extjs.com/
In Conclusion
Understand your audience
Code for the LCD
Modify on the client when the client supports it
and the user wants it
Consider accessibility issues and work-arounds
Only exploit technology when it serves a
legitimate purpose

More Related Content

What's hot

10 things to make you a Great Mobile Web Developer
10 things to make you a Great Mobile Web Developer10 things to make you a Great Mobile Web Developer
10 things to make you a Great Mobile Web DeveloperChris Love
 
Intro to Web Development from Bloc.io
Intro to Web Development from Bloc.ioIntro to Web Development from Bloc.io
Intro to Web Development from Bloc.ioDouglas Wright
 
WebMatrix jQuery Mobile Web
WebMatrix jQuery Mobile WebWebMatrix jQuery Mobile Web
WebMatrix jQuery Mobile WebChris Love
 
From desktop to mobile web
From desktop to mobile webFrom desktop to mobile web
From desktop to mobile webChris Love
 
Now you see me... Adaptive Web Design and Development
Now you see me... Adaptive Web Design and DevelopmentNow you see me... Adaptive Web Design and Development
Now you see me... Adaptive Web Design and DevelopmentJonas Päckos
 
Why Game Developers Should Care About HTML5
Why Game Developers Should Care About HTML5Why Game Developers Should Care About HTML5
Why Game Developers Should Care About HTML5Bramus Van Damme
 
Mobile tech briefing 2013
Mobile tech briefing 2013Mobile tech briefing 2013
Mobile tech briefing 2013Scotty Logan
 
Accessibility in pattern libraries
Accessibility in pattern librariesAccessibility in pattern libraries
Accessibility in pattern librariesRuss Weakley
 
Using Ajax to improve your user experience at Web Directions South 2009
Using Ajax to improve your user experience at Web Directions South 2009Using Ajax to improve your user experience at Web Directions South 2009
Using Ajax to improve your user experience at Web Directions South 2009Peak Usability
 
Beyond Responsive Web Design
Beyond Responsive Web DesignBeyond Responsive Web Design
Beyond Responsive Web Designarborwebsolutions
 
Accessibility - A feature you can build
Accessibility - A feature you can buildAccessibility - A feature you can build
Accessibility - A feature you can buildMonika Piotrowicz
 
That's crazy! how to build single page web apps
That's crazy! how to build single page web appsThat's crazy! how to build single page web apps
That's crazy! how to build single page web appsChris Love
 
Mobile app with sencha touch
Mobile app with sencha touchMobile app with sencha touch
Mobile app with sencha touchfch415
 
501 Talks Tech: WordPress for Nonprofits
501 Talks Tech: WordPress for Nonprofits501 Talks Tech: WordPress for Nonprofits
501 Talks Tech: WordPress for Nonprofits501 Commons
 
How to build a website... the accessible way
How to build a website... the accessible wayHow to build a website... the accessible way
How to build a website... the accessible wayIsabel Brison
 
Wordpress To Go Democamp Mtl2009
Wordpress To Go Democamp Mtl2009Wordpress To Go Democamp Mtl2009
Wordpress To Go Democamp Mtl2009Brendan Sera-Shriar
 
20 mLearning Tools in 60 Minutes - mLearnCon 2010
20 mLearning Tools in 60 Minutes - mLearnCon 201020 mLearning Tools in 60 Minutes - mLearnCon 2010
20 mLearning Tools in 60 Minutes - mLearnCon 2010B.J. Schone
 
Responsive web design
Responsive web designResponsive web design
Responsive web designRuss Weakley
 
Web Accessibility - A feature you can build
Web Accessibility - A feature you can buildWeb Accessibility - A feature you can build
Web Accessibility - A feature you can buildMonika Piotrowicz
 
How HTML5 and WAI-ARIA Can Improve Virtual Space of Universities
How HTML5 and WAI-ARIA Can Improve Virtual Space of UniversitiesHow HTML5 and WAI-ARIA Can Improve Virtual Space of Universities
How HTML5 and WAI-ARIA Can Improve Virtual Space of UniversitiesRadek Pavlíček
 

What's hot (20)

10 things to make you a Great Mobile Web Developer
10 things to make you a Great Mobile Web Developer10 things to make you a Great Mobile Web Developer
10 things to make you a Great Mobile Web Developer
 
Intro to Web Development from Bloc.io
Intro to Web Development from Bloc.ioIntro to Web Development from Bloc.io
Intro to Web Development from Bloc.io
 
WebMatrix jQuery Mobile Web
WebMatrix jQuery Mobile WebWebMatrix jQuery Mobile Web
WebMatrix jQuery Mobile Web
 
From desktop to mobile web
From desktop to mobile webFrom desktop to mobile web
From desktop to mobile web
 
Now you see me... Adaptive Web Design and Development
Now you see me... Adaptive Web Design and DevelopmentNow you see me... Adaptive Web Design and Development
Now you see me... Adaptive Web Design and Development
 
Why Game Developers Should Care About HTML5
Why Game Developers Should Care About HTML5Why Game Developers Should Care About HTML5
Why Game Developers Should Care About HTML5
 
Mobile tech briefing 2013
Mobile tech briefing 2013Mobile tech briefing 2013
Mobile tech briefing 2013
 
Accessibility in pattern libraries
Accessibility in pattern librariesAccessibility in pattern libraries
Accessibility in pattern libraries
 
Using Ajax to improve your user experience at Web Directions South 2009
Using Ajax to improve your user experience at Web Directions South 2009Using Ajax to improve your user experience at Web Directions South 2009
Using Ajax to improve your user experience at Web Directions South 2009
 
Beyond Responsive Web Design
Beyond Responsive Web DesignBeyond Responsive Web Design
Beyond Responsive Web Design
 
Accessibility - A feature you can build
Accessibility - A feature you can buildAccessibility - A feature you can build
Accessibility - A feature you can build
 
That's crazy! how to build single page web apps
That's crazy! how to build single page web appsThat's crazy! how to build single page web apps
That's crazy! how to build single page web apps
 
Mobile app with sencha touch
Mobile app with sencha touchMobile app with sencha touch
Mobile app with sencha touch
 
501 Talks Tech: WordPress for Nonprofits
501 Talks Tech: WordPress for Nonprofits501 Talks Tech: WordPress for Nonprofits
501 Talks Tech: WordPress for Nonprofits
 
How to build a website... the accessible way
How to build a website... the accessible wayHow to build a website... the accessible way
How to build a website... the accessible way
 
Wordpress To Go Democamp Mtl2009
Wordpress To Go Democamp Mtl2009Wordpress To Go Democamp Mtl2009
Wordpress To Go Democamp Mtl2009
 
20 mLearning Tools in 60 Minutes - mLearnCon 2010
20 mLearning Tools in 60 Minutes - mLearnCon 201020 mLearning Tools in 60 Minutes - mLearnCon 2010
20 mLearning Tools in 60 Minutes - mLearnCon 2010
 
Responsive web design
Responsive web designResponsive web design
Responsive web design
 
Web Accessibility - A feature you can build
Web Accessibility - A feature you can buildWeb Accessibility - A feature you can build
Web Accessibility - A feature you can build
 
How HTML5 and WAI-ARIA Can Improve Virtual Space of Universities
How HTML5 and WAI-ARIA Can Improve Virtual Space of UniversitiesHow HTML5 and WAI-ARIA Can Improve Virtual Space of Universities
How HTML5 and WAI-ARIA Can Improve Virtual Space of Universities
 

Viewers also liked

R31%20Strong%20A%20Web-based%20Comparative%20Genomics%20tutorial%20Microbiolo...
R31%20Strong%20A%20Web-based%20Comparative%20Genomics%20tutorial%20Microbiolo...R31%20Strong%20A%20Web-based%20Comparative%20Genomics%20tutorial%20Microbiolo...
R31%20Strong%20A%20Web-based%20Comparative%20Genomics%20tutorial%20Microbiolo...tutorialsruby
 
Tutorial%20-%20Content%20Management%20System
Tutorial%20-%20Content%20Management%20SystemTutorial%20-%20Content%20Management%20System
Tutorial%20-%20Content%20Management%20Systemtutorialsruby
 
T11_effects_of_peripheral_stim
T11_effects_of_peripheral_stimT11_effects_of_peripheral_stim
T11_effects_of_peripheral_stimtutorialsruby
 

Viewers also liked (8)

manual
manualmanual
manual
 
Lab_2_2009
Lab_2_2009Lab_2_2009
Lab_2_2009
 
tutorial7
tutorial7tutorial7
tutorial7
 
Tesi_Adamou
Tesi_AdamouTesi_Adamou
Tesi_Adamou
 
R31%20Strong%20A%20Web-based%20Comparative%20Genomics%20tutorial%20Microbiolo...
R31%20Strong%20A%20Web-based%20Comparative%20Genomics%20tutorial%20Microbiolo...R31%20Strong%20A%20Web-based%20Comparative%20Genomics%20tutorial%20Microbiolo...
R31%20Strong%20A%20Web-based%20Comparative%20Genomics%20tutorial%20Microbiolo...
 
Tutorial%20-%20Content%20Management%20System
Tutorial%20-%20Content%20Management%20SystemTutorial%20-%20Content%20Management%20System
Tutorial%20-%20Content%20Management%20System
 
web20
web20web20
web20
 
T11_effects_of_peripheral_stim
T11_effects_of_peripheral_stimT11_effects_of_peripheral_stim
T11_effects_of_peripheral_stim
 

Similar to TPR4

Techniques For A Modern Web UI (With Notes)
Techniques For A Modern Web UI (With Notes)Techniques For A Modern Web UI (With Notes)
Techniques For A Modern Web UI (With Notes)patrick.t.joyce
 
Ajax Abuse Todcon2008
Ajax Abuse Todcon2008Ajax Abuse Todcon2008
Ajax Abuse Todcon2008Jesse Rodgers
 
Professional web development with libraries
Professional web development with librariesProfessional web development with libraries
Professional web development with librariesChristian Heilmann
 
Advantages and disadvantages of an ajax based client application
Advantages and disadvantages of an ajax based client applicationAdvantages and disadvantages of an ajax based client application
Advantages and disadvantages of an ajax based client applicationPlacinta Alin
 
(In)Security Implication in the JS Universe
(In)Security Implication in the JS Universe(In)Security Implication in the JS Universe
(In)Security Implication in the JS UniverseStefano Di Paola
 
Responsive web design & mobile web development - a technical and business app...
Responsive web design & mobile web development - a technical and business app...Responsive web design & mobile web development - a technical and business app...
Responsive web design & mobile web development - a technical and business app...Atos_Worldline
 
Skill Session - Web Multi Device
Skill Session - Web Multi DeviceSkill Session - Web Multi Device
Skill Session - Web Multi Devicefilirom1
 
Developing For The Web
Developing For The WebDeveloping For The Web
Developing For The Webaleemb
 
Making your site mobile-friendly - DevCSI Reading 21.07.2010
Making your site mobile-friendly - DevCSI Reading 21.07.2010Making your site mobile-friendly - DevCSI Reading 21.07.2010
Making your site mobile-friendly - DevCSI Reading 21.07.2010Patrick Lauke
 
BACnet HMI5 - BACnet Touch Panel - BACnet Touch Screen - HMI
BACnet HMI5 - BACnet Touch Panel - BACnet Touch Screen - HMIBACnet HMI5 - BACnet Touch Panel - BACnet Touch Screen - HMI
BACnet HMI5 - BACnet Touch Panel - BACnet Touch Screen - HMIbacmove
 
Front End Development | Introduction
Front End Development | IntroductionFront End Development | Introduction
Front End Development | IntroductionJohnTaieb
 
HTML5 Can't Do That
HTML5 Can't Do ThatHTML5 Can't Do That
HTML5 Can't Do ThatNathan Smith
 
Doing Modern Web, aka JavaScript and HTML5 in the Enterprise NYC Code Camp
Doing Modern Web, aka JavaScript and HTML5 in the Enterprise NYC Code CampDoing Modern Web, aka JavaScript and HTML5 in the Enterprise NYC Code Camp
Doing Modern Web, aka JavaScript and HTML5 in the Enterprise NYC Code CampChris Love
 
Bruce lawson-over-the-air
Bruce lawson-over-the-airBruce lawson-over-the-air
Bruce lawson-over-the-airbrucelawson
 
iWeb NJECC June 28, 2011 DAndrea
iWeb NJECC June 28, 2011 DAndreaiWeb NJECC June 28, 2011 DAndrea
iWeb NJECC June 28, 2011 DAndreaD'Andrea
 
Seven Steps To Better JavaScript
Seven Steps To Better JavaScriptSeven Steps To Better JavaScript
Seven Steps To Better JavaScriptDen Odell
 

Similar to TPR4 (20)

Techniques For A Modern Web UI (With Notes)
Techniques For A Modern Web UI (With Notes)Techniques For A Modern Web UI (With Notes)
Techniques For A Modern Web UI (With Notes)
 
Ajax Abuse Todcon2008
Ajax Abuse Todcon2008Ajax Abuse Todcon2008
Ajax Abuse Todcon2008
 
Professional web development with libraries
Professional web development with librariesProfessional web development with libraries
Professional web development with libraries
 
Advantages and disadvantages of an ajax based client application
Advantages and disadvantages of an ajax based client applicationAdvantages and disadvantages of an ajax based client application
Advantages and disadvantages of an ajax based client application
 
(In)Security Implication in the JS Universe
(In)Security Implication in the JS Universe(In)Security Implication in the JS Universe
(In)Security Implication in the JS Universe
 
Responsive web design & mobile web development - a technical and business app...
Responsive web design & mobile web development - a technical and business app...Responsive web design & mobile web development - a technical and business app...
Responsive web design & mobile web development - a technical and business app...
 
Skill Session - Web Multi Device
Skill Session - Web Multi DeviceSkill Session - Web Multi Device
Skill Session - Web Multi Device
 
Developing For The Web
Developing For The WebDeveloping For The Web
Developing For The Web
 
Making your site mobile-friendly - DevCSI Reading 21.07.2010
Making your site mobile-friendly - DevCSI Reading 21.07.2010Making your site mobile-friendly - DevCSI Reading 21.07.2010
Making your site mobile-friendly - DevCSI Reading 21.07.2010
 
orcreatehappyusers
orcreatehappyusersorcreatehappyusers
orcreatehappyusers
 
orcreatehappyusers
orcreatehappyusersorcreatehappyusers
orcreatehappyusers
 
Real solutions, no tricks
Real solutions, no tricksReal solutions, no tricks
Real solutions, no tricks
 
BACnet HMI5 - BACnet Touch Panel - BACnet Touch Screen - HMI
BACnet HMI5 - BACnet Touch Panel - BACnet Touch Screen - HMIBACnet HMI5 - BACnet Touch Panel - BACnet Touch Screen - HMI
BACnet HMI5 - BACnet Touch Panel - BACnet Touch Screen - HMI
 
Front End Development | Introduction
Front End Development | IntroductionFront End Development | Introduction
Front End Development | Introduction
 
HTML5 Can't Do That
HTML5 Can't Do ThatHTML5 Can't Do That
HTML5 Can't Do That
 
Doing Modern Web, aka JavaScript and HTML5 in the Enterprise NYC Code Camp
Doing Modern Web, aka JavaScript and HTML5 in the Enterprise NYC Code CampDoing Modern Web, aka JavaScript and HTML5 in the Enterprise NYC Code Camp
Doing Modern Web, aka JavaScript and HTML5 in the Enterprise NYC Code Camp
 
Bruce lawson-over-the-air
Bruce lawson-over-the-airBruce lawson-over-the-air
Bruce lawson-over-the-air
 
Fewd week4 slides
Fewd week4 slidesFewd week4 slides
Fewd week4 slides
 
iWeb NJECC June 28, 2011 DAndrea
iWeb NJECC June 28, 2011 DAndreaiWeb NJECC June 28, 2011 DAndrea
iWeb NJECC June 28, 2011 DAndrea
 
Seven Steps To Better JavaScript
Seven Steps To Better JavaScriptSeven Steps To Better JavaScript
Seven Steps To Better JavaScript
 

More from tutorialsruby

&lt;img src="../i/r_14.png" />
&lt;img src="../i/r_14.png" />&lt;img src="../i/r_14.png" />
&lt;img src="../i/r_14.png" />tutorialsruby
 
TopStyle Help &amp; &lt;b>Tutorial&lt;/b>
TopStyle Help &amp; &lt;b>Tutorial&lt;/b>TopStyle Help &amp; &lt;b>Tutorial&lt;/b>
TopStyle Help &amp; &lt;b>Tutorial&lt;/b>tutorialsruby
 
The Art Institute of Atlanta IMD 210 Fundamentals of Scripting &lt;b>...&lt;/b>
The Art Institute of Atlanta IMD 210 Fundamentals of Scripting &lt;b>...&lt;/b>The Art Institute of Atlanta IMD 210 Fundamentals of Scripting &lt;b>...&lt;/b>
The Art Institute of Atlanta IMD 210 Fundamentals of Scripting &lt;b>...&lt;/b>tutorialsruby
 
&lt;img src="../i/r_14.png" />
&lt;img src="../i/r_14.png" />&lt;img src="../i/r_14.png" />
&lt;img src="../i/r_14.png" />tutorialsruby
 
&lt;img src="../i/r_14.png" />
&lt;img src="../i/r_14.png" />&lt;img src="../i/r_14.png" />
&lt;img src="../i/r_14.png" />tutorialsruby
 
Standardization and Knowledge Transfer – INS0
Standardization and Knowledge Transfer – INS0Standardization and Knowledge Transfer – INS0
Standardization and Knowledge Transfer – INS0tutorialsruby
 
0047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa060269
0047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa0602690047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa060269
0047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa060269tutorialsruby
 
0047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa060269
0047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa0602690047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa060269
0047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa060269tutorialsruby
 
BloggingWithStyle_2008
BloggingWithStyle_2008BloggingWithStyle_2008
BloggingWithStyle_2008tutorialsruby
 
BloggingWithStyle_2008
BloggingWithStyle_2008BloggingWithStyle_2008
BloggingWithStyle_2008tutorialsruby
 
cascadingstylesheets
cascadingstylesheetscascadingstylesheets
cascadingstylesheetstutorialsruby
 
cascadingstylesheets
cascadingstylesheetscascadingstylesheets
cascadingstylesheetstutorialsruby
 

More from tutorialsruby (20)

&lt;img src="../i/r_14.png" />
&lt;img src="../i/r_14.png" />&lt;img src="../i/r_14.png" />
&lt;img src="../i/r_14.png" />
 
TopStyle Help &amp; &lt;b>Tutorial&lt;/b>
TopStyle Help &amp; &lt;b>Tutorial&lt;/b>TopStyle Help &amp; &lt;b>Tutorial&lt;/b>
TopStyle Help &amp; &lt;b>Tutorial&lt;/b>
 
The Art Institute of Atlanta IMD 210 Fundamentals of Scripting &lt;b>...&lt;/b>
The Art Institute of Atlanta IMD 210 Fundamentals of Scripting &lt;b>...&lt;/b>The Art Institute of Atlanta IMD 210 Fundamentals of Scripting &lt;b>...&lt;/b>
The Art Institute of Atlanta IMD 210 Fundamentals of Scripting &lt;b>...&lt;/b>
 
&lt;img src="../i/r_14.png" />
&lt;img src="../i/r_14.png" />&lt;img src="../i/r_14.png" />
&lt;img src="../i/r_14.png" />
 
&lt;img src="../i/r_14.png" />
&lt;img src="../i/r_14.png" />&lt;img src="../i/r_14.png" />
&lt;img src="../i/r_14.png" />
 
Standardization and Knowledge Transfer – INS0
Standardization and Knowledge Transfer – INS0Standardization and Knowledge Transfer – INS0
Standardization and Knowledge Transfer – INS0
 
xhtml_basics
xhtml_basicsxhtml_basics
xhtml_basics
 
xhtml_basics
xhtml_basicsxhtml_basics
xhtml_basics
 
xhtml-documentation
xhtml-documentationxhtml-documentation
xhtml-documentation
 
xhtml-documentation
xhtml-documentationxhtml-documentation
xhtml-documentation
 
CSS
CSSCSS
CSS
 
CSS
CSSCSS
CSS
 
0047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa060269
0047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa0602690047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa060269
0047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa060269
 
0047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa060269
0047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa0602690047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa060269
0047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa060269
 
HowTo_CSS
HowTo_CSSHowTo_CSS
HowTo_CSS
 
HowTo_CSS
HowTo_CSSHowTo_CSS
HowTo_CSS
 
BloggingWithStyle_2008
BloggingWithStyle_2008BloggingWithStyle_2008
BloggingWithStyle_2008
 
BloggingWithStyle_2008
BloggingWithStyle_2008BloggingWithStyle_2008
BloggingWithStyle_2008
 
cascadingstylesheets
cascadingstylesheetscascadingstylesheets
cascadingstylesheets
 
cascadingstylesheets
cascadingstylesheetscascadingstylesheets
cascadingstylesheets
 

Recently uploaded

20140402 - Smart house demo kit
20140402 - Smart house demo kit20140402 - Smart house demo kit
20140402 - Smart house demo kitJamie (Taka) Wang
 
How to release an Open Source Dataweave Library
How to release an Open Source Dataweave LibraryHow to release an Open Source Dataweave Library
How to release an Open Source Dataweave Libraryshyamraj55
 
Q4 2023 Quarterly Investor Presentation - FINAL - v1.pdf
Q4 2023 Quarterly Investor Presentation - FINAL - v1.pdfQ4 2023 Quarterly Investor Presentation - FINAL - v1.pdf
Q4 2023 Quarterly Investor Presentation - FINAL - v1.pdfTejal81
 
Key Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdfKey Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdfCheryl Hung
 
The Importance of Indoor Air Quality (English)
The Importance of Indoor Air Quality (English)The Importance of Indoor Air Quality (English)
The Importance of Indoor Air Quality (English)IES VE
 
IT Service Management (ITSM) Best Practices for Advanced Computing
IT Service Management (ITSM) Best Practices for Advanced ComputingIT Service Management (ITSM) Best Practices for Advanced Computing
IT Service Management (ITSM) Best Practices for Advanced ComputingMAGNIntelligence
 
TrustArc Webinar - How to Live in a Post Third-Party Cookie World
TrustArc Webinar - How to Live in a Post Third-Party Cookie WorldTrustArc Webinar - How to Live in a Post Third-Party Cookie World
TrustArc Webinar - How to Live in a Post Third-Party Cookie WorldTrustArc
 
3 Pitfalls Everyone Should Avoid with Cloud Data
3 Pitfalls Everyone Should Avoid with Cloud Data3 Pitfalls Everyone Should Avoid with Cloud Data
3 Pitfalls Everyone Should Avoid with Cloud DataEric D. Schabell
 
Patch notes explaining DISARM Version 1.4 update
Patch notes explaining DISARM Version 1.4 updatePatch notes explaining DISARM Version 1.4 update
Patch notes explaining DISARM Version 1.4 updateadam112203
 
Keep Your Finger on the Pulse of Your Building's Performance with IES Live
Keep Your Finger on the Pulse of Your Building's Performance with IES LiveKeep Your Finger on the Pulse of Your Building's Performance with IES Live
Keep Your Finger on the Pulse of Your Building's Performance with IES LiveIES VE
 
Explore the UiPath Community and ways you can benefit on your journey to auto...
Explore the UiPath Community and ways you can benefit on your journey to auto...Explore the UiPath Community and ways you can benefit on your journey to auto...
Explore the UiPath Community and ways you can benefit on your journey to auto...DianaGray10
 
LF Energy Webinar - Unveiling OpenEEMeter 4.0
LF Energy Webinar - Unveiling OpenEEMeter 4.0LF Energy Webinar - Unveiling OpenEEMeter 4.0
LF Energy Webinar - Unveiling OpenEEMeter 4.0DanBrown980551
 
My key hands-on projects in Quantum, and QAI
My key hands-on projects in Quantum, and QAIMy key hands-on projects in Quantum, and QAI
My key hands-on projects in Quantum, and QAIVijayananda Mohire
 
How to become a GDSC Lead GDSC MI AOE.pptx
How to become a GDSC Lead GDSC MI AOE.pptxHow to become a GDSC Lead GDSC MI AOE.pptx
How to become a GDSC Lead GDSC MI AOE.pptxKaustubhBhavsar6
 
The New Cloud World Order Is FinOps (Slideshow)
The New Cloud World Order Is FinOps (Slideshow)The New Cloud World Order Is FinOps (Slideshow)
The New Cloud World Order Is FinOps (Slideshow)codyslingerland1
 
UiPath Studio Web workshop series - Day 4
UiPath Studio Web workshop series - Day 4UiPath Studio Web workshop series - Day 4
UiPath Studio Web workshop series - Day 4DianaGray10
 
Top 10 Squarespace Development Companies
Top 10 Squarespace Development CompaniesTop 10 Squarespace Development Companies
Top 10 Squarespace Development CompaniesTopCSSGallery
 
Oracle Database 23c Security New Features.pptx
Oracle Database 23c Security New Features.pptxOracle Database 23c Security New Features.pptx
Oracle Database 23c Security New Features.pptxSatishbabu Gunukula
 
Graphene Quantum Dots-Based Composites for Biomedical Applications
Graphene Quantum Dots-Based Composites for  Biomedical ApplicationsGraphene Quantum Dots-Based Composites for  Biomedical Applications
Graphene Quantum Dots-Based Composites for Biomedical Applicationsnooralam814309
 
Scenario Library et REX Discover industry- and role- based scenarios
Scenario Library et REX Discover industry- and role- based scenariosScenario Library et REX Discover industry- and role- based scenarios
Scenario Library et REX Discover industry- and role- based scenariosErol GIRAUDY
 

Recently uploaded (20)

20140402 - Smart house demo kit
20140402 - Smart house demo kit20140402 - Smart house demo kit
20140402 - Smart house demo kit
 
How to release an Open Source Dataweave Library
How to release an Open Source Dataweave LibraryHow to release an Open Source Dataweave Library
How to release an Open Source Dataweave Library
 
Q4 2023 Quarterly Investor Presentation - FINAL - v1.pdf
Q4 2023 Quarterly Investor Presentation - FINAL - v1.pdfQ4 2023 Quarterly Investor Presentation - FINAL - v1.pdf
Q4 2023 Quarterly Investor Presentation - FINAL - v1.pdf
 
Key Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdfKey Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdf
 
The Importance of Indoor Air Quality (English)
The Importance of Indoor Air Quality (English)The Importance of Indoor Air Quality (English)
The Importance of Indoor Air Quality (English)
 
IT Service Management (ITSM) Best Practices for Advanced Computing
IT Service Management (ITSM) Best Practices for Advanced ComputingIT Service Management (ITSM) Best Practices for Advanced Computing
IT Service Management (ITSM) Best Practices for Advanced Computing
 
TrustArc Webinar - How to Live in a Post Third-Party Cookie World
TrustArc Webinar - How to Live in a Post Third-Party Cookie WorldTrustArc Webinar - How to Live in a Post Third-Party Cookie World
TrustArc Webinar - How to Live in a Post Third-Party Cookie World
 
3 Pitfalls Everyone Should Avoid with Cloud Data
3 Pitfalls Everyone Should Avoid with Cloud Data3 Pitfalls Everyone Should Avoid with Cloud Data
3 Pitfalls Everyone Should Avoid with Cloud Data
 
Patch notes explaining DISARM Version 1.4 update
Patch notes explaining DISARM Version 1.4 updatePatch notes explaining DISARM Version 1.4 update
Patch notes explaining DISARM Version 1.4 update
 
Keep Your Finger on the Pulse of Your Building's Performance with IES Live
Keep Your Finger on the Pulse of Your Building's Performance with IES LiveKeep Your Finger on the Pulse of Your Building's Performance with IES Live
Keep Your Finger on the Pulse of Your Building's Performance with IES Live
 
Explore the UiPath Community and ways you can benefit on your journey to auto...
Explore the UiPath Community and ways you can benefit on your journey to auto...Explore the UiPath Community and ways you can benefit on your journey to auto...
Explore the UiPath Community and ways you can benefit on your journey to auto...
 
LF Energy Webinar - Unveiling OpenEEMeter 4.0
LF Energy Webinar - Unveiling OpenEEMeter 4.0LF Energy Webinar - Unveiling OpenEEMeter 4.0
LF Energy Webinar - Unveiling OpenEEMeter 4.0
 
My key hands-on projects in Quantum, and QAI
My key hands-on projects in Quantum, and QAIMy key hands-on projects in Quantum, and QAI
My key hands-on projects in Quantum, and QAI
 
How to become a GDSC Lead GDSC MI AOE.pptx
How to become a GDSC Lead GDSC MI AOE.pptxHow to become a GDSC Lead GDSC MI AOE.pptx
How to become a GDSC Lead GDSC MI AOE.pptx
 
The New Cloud World Order Is FinOps (Slideshow)
The New Cloud World Order Is FinOps (Slideshow)The New Cloud World Order Is FinOps (Slideshow)
The New Cloud World Order Is FinOps (Slideshow)
 
UiPath Studio Web workshop series - Day 4
UiPath Studio Web workshop series - Day 4UiPath Studio Web workshop series - Day 4
UiPath Studio Web workshop series - Day 4
 
Top 10 Squarespace Development Companies
Top 10 Squarespace Development CompaniesTop 10 Squarespace Development Companies
Top 10 Squarespace Development Companies
 
Oracle Database 23c Security New Features.pptx
Oracle Database 23c Security New Features.pptxOracle Database 23c Security New Features.pptx
Oracle Database 23c Security New Features.pptx
 
Graphene Quantum Dots-Based Composites for Biomedical Applications
Graphene Quantum Dots-Based Composites for  Biomedical ApplicationsGraphene Quantum Dots-Based Composites for  Biomedical Applications
Graphene Quantum Dots-Based Composites for Biomedical Applications
 
Scenario Library et REX Discover industry- and role- based scenarios
Scenario Library et REX Discover industry- and role- based scenariosScenario Library et REX Discover industry- and role- based scenarios
Scenario Library et REX Discover industry- and role- based scenarios
 

TPR4

  • 1. Avoiding the JavaScript:void(''): Accommodating 1.0 Users in a Web 2.0 World Jason Pitoniak Rochester Institute of Technology HighEdWebDev ▪ TPR 4 October 15, 2007
  • 2. What's wrong with this code? <a href= “javascript:void('')” onclick= “window.open('popup.html', 'popup', height=500, width=300);”>more information</a>
  • 3. What is a 1.0 User? Any user who, for whatever reason, cannot take advantage the the advanced features of the sites we build . 1.0 Users include: Users with JavaScript turned off Users of older browsers Users of mobile devices Users of assistive technology devices
  • 4. Problems? What problems? What kind of problems arise from using advanced web design techniques? The site stops working if... Can it be solved? Of course...that's why you're here, isn't it?
  • 5. Example of a Problem Yahoo!'s popular Upcoming.org community events database uses an advanced AJAX/JavaScript interface to let event organizers select venues. What happens when you try to add an event without JavaScript support? Let's see...
  • 6. What you won't learn today... This is not a general accessibility lecture. This is not a lecture on web standards, JavaScript, AJAX, or any related technology. You will not learn the “best” way to create an accessible Web 2.0 site. But you will leave with unanswered questions!
  • 7. Some Questions Is there a difference between a web site and a web application?
  • 8. Some Questions Is it acceptable to launch two versions of a web application? Text-only pages are generally considered a bad idea We launch Mac and PC versions of software Google Maps and GMail APIs/MVC to the rescue?
  • 9. Hints for Doing it Right Understand your audience Code like it's 1999 Use DOM scripting to enhance the page on the client Consider using a JavaScript library
  • 10. Understand Your Audience An app that will be restricted to only the computers in the registrar's office probably doesn't need to be coded with mobile devices in mind. An app for students to check their homework assignments probably should. Both apps should address the needs of users with disabilities.
  • 11. Code Like It's 1999 Think lowest common denominator when designing your basic page structure. Follow web standards to ensure consistant display.
  • 12. Use DOM Scripting Newer browsers can manipulate the page on the client end. Add the bells and whistles through JavaScript. If a browser doesn't understand the manipulations they will be ignored, but the user will have a fulling working page nonetheless.
  • 13. DOM Scripting Limitations Many irregularities still exist between platforms Proper care must be taken to prevent script errors in older JS compliant browsers.
  • 14. Consider a JavaScript Library JavaScript libraries... Standardize browser irregularities Add support for “missing” events Often provide easy-to-use AJAX interfaces Sometimes provide cool widgets and page enhancements
  • 15. JS Libraries: Many to Choose
  • 16. And the Winner is...
  • 17. Y I Chose YUI Open source (BSD license)‫‏‬ Developed by Yahoo! for use on their properties Actively being developed DOM utilities, AJAX handlers, and widgets Extremely flexible API Lightweight Namespacing system prevents naming conflicts
  • 18. YUI Features Standardized event model onAvailable, onContentReady, and onDOMReady events DOM utilities like getElementsByClassName()‫‏‬ Many UI widgets: calendars, auto completes, tabs, menus, data grids, color picker, etc.
  • 19. YUI Issues Namespacing model makes for very long lines of code: YAHOO.widget.calendar(...); Flexible API = lots of doing things by hand Componentialized code makes for lots of JS files to include on web pages.
  • 20. AJAX: The Web Developer's Four Letter Word OMG, you used AJAX in an accessibility lecture! Is AJAX really inaccessible? If not, then what is? But, you used DOM scripting in the example!
  • 21. Avoiding DOM Scripting* Can we expect users that don't want advanced features of our sites to turn off JavaScript? Do we use JS in beneficial ways that don't manipulate the DOM? Is posting instructions on how to turn off JS a reasonable way to make our app accessible? *when necessary
  • 22. Accessibility Mode Consider options to let users turn advanced, non- acessible features off − Top of all pages? − On a user preferences page? Simple check box and cookie?
  • 23. Thoughts on Screen Readers Screen readers tend not to notice runtime changes in the DOM Screen readers DO understand JavaScript Screen readers DO understand CSS Screen readers DON'T like JS “panels” Screen readers DO work with popup windows
  • 24. The Solution <a href= “info.html” id=“mypopup”>more info</a> document.getElementById(“mypopup”).onclick = function (e) { e = (window.event) ? window.event : e; window.open(this.href, “popup”, “height=200,width=300”); e.preventDefault(); }
  • 25. Yellow Box When changing anything on the page, highlight it with a yellow background Fade the background to white slowly Helps low-sighted users follow changes to the page Originally used by Basecamp http://webiscope.com/archives/2007/09/19/how-usability-affects-products-part-2- basecamp/
  • 26. Accessibility Links WAI: http://www.w3.org/WAI/ Section 508: http://www.section508.gov/ NYS Web Accessibility Standard: http://www.oft.state.ny.us/policy/s04-001/index.htm
  • 27. Mobile Device Links W3C MobileOK Tests: http://www.w3.org/TR/mobileOK-basic10-tests/ Challenges of Interface Design for Mobile Devices: http://yuiblog.com/blog/2007/10/02/challenges- of-interface-design-for-mobile-devices/
  • 28. JavaScript Library Links YUI: http://developer.yahoo.com/yui Prototype: http://www.prototypejs.org/ Scriptaculous: http://script.aculo.us/ jQuery: http://www.jquery.com/ DEDChain: http://dedchain.dustindiaz.com/ MooFX: http://moofx.mad4milk.net/ Adobe Spry: http://labs.adobe.com/technologies/spry/ Mochikit: http://mochikit.com/ Dojo: http://dojotoolkit.org/ Ext: http://extjs.com/
  • 29. In Conclusion Understand your audience Code for the LCD Modify on the client when the client supports it and the user wants it Consider accessibility issues and work-arounds Only exploit technology when it serves a legitimate purpose