Ajax Bulletproof progressive enhancement behaviour JavaScript - - PowerPoint PPT Presentation

▶
ajax bulletproof
SMART_READER_LITE
LIVE PREVIEW

Ajax Bulletproof progressive enhancement behaviour JavaScript - - PowerPoint PPT Presentation

Aug 24, 2023 258 likes •637 views

Bulletproof Ajax Bulletproof progressive enhancement behaviour JavaScript presentation CSS structure HTML content <p> This is the introduction </p> <p style="font-weight:bold"> This is the introduction

slide-1
SLIDE 1

Bulletproof

Ajax

slide-2
SLIDE 2

progressive enhancement

Bulletproof

slide-3
SLIDE 3

structure

presentation

behaviour

content

HTML

CSS

JavaScript

slide-4
SLIDE 4

<p> This is the introduction </p> <p style="font-weight:bold"> This is the introduction </p> <p class="intro"> This is the introduction </p> .intro { font-weight:bold; }

slide-5
SLIDE 5

<a href="help.html"> Need help? </a> <a href="help.html"

  • nclick="window.open

(this.href); return false;"> Need help? </a> <a href="help.html" class="help"> Need help? </a>

slide-6
SLIDE 6

link.onclick = function(){ window.open(this.href); return false; }; window.onload = function() { }; // get links with class help // loop through links

slide-7
SLIDE 7

<a href="javascript:..."> <a href="#" onclick= "...">

beware

slide-8
SLIDE 8

Ajax

communicating with the server without refreshing the whole page.

slide-9
SLIDE 9

frames iframe Flash XMLHttpRequest

communicating with the server without refreshing the whole page.

slide-10
SLIDE 10

XMLHttpRequest Microsoft

MozillaSafariOpera

IE5 W3C

slide-11
SLIDE 11

browser server XHR

  • pen

send status responseT ext

XMLHttpRequest

slide-12
SLIDE 12

speed

slide-13
SLIDE 13

thin client

slide-14
SLIDE 14

browser server data processing displaying

thin client

slide-15
SLIDE 15

fat client

slide-16
SLIDE 16

browser server XHR data processing displaying

fat client

slide-17
SLIDE 17

dumb waiter

slide-18
SLIDE 18

XMLHttpRequest using

progressive enhancement

slide-19
SLIDE 19

Hijax

progressive enhancement

slide-20
SLIDE 20

browser server data processing displaying

slide-21
SLIDE 21

browser server XHR data processing displaying

deceptively fat client

slide-22
SLIDE 22
slide-23
SLIDE 23

navigation search main content log on form shopping cart footer

{

browser server

slide-24
SLIDE 24

XHR

navigation search main content log on form shopping cart footer

browser

slide-25
SLIDE 25

implement Ajax at the end plan for Ajax from the start

paradox?

slide-26
SLIDE 26

pattern recognition

log on add to cart rate this add a comment search results? pagination?

slide-27
SLIDE 27

documents applications

slide-28
SLIDE 28

design challenges

slide-29
SLIDE 29

WTF?

what is happening? what just happened?

slide-30
SLIDE 30

beyond the browser the back button bookmarking

slide-31
SLIDE 31

user testing

slide-32
SLIDE 32

Accessibility Just Ain’t eXciting

slide-33
SLIDE 33

“Unless a way can be found to notify screen readers of updated content, Ajax techniques cannot be considered accessible.”

slide-34
SLIDE 34

“This Ajax application is usable by screen- reader users some

  • f the time. They

aren’t totally shut

  • ut, but it isn’t

totally easy for them, either.”

slide-35
SLIDE 35

“The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.”

slide-36
SLIDE 36

k thx bai

adactio.com

http://flickr .com/photos/chuckbiscuito/161971512/ http://flickr .com/photos/bizzygirl/291918549/ http://flickr .com/photos/benchan/150094224/ http://flickr .com/photos/flydown/42047131/ http://flickr .com/photos/rogerjones/121736518/