-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathprogressive_enhancement.html
90 lines (88 loc) · 3.89 KB
/
progressive_enhancement.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Progressive Enhancement</title>
<link rel="stylesheet" type="text/css" href="lib/yui/reset-fonts-grids/reset-fonts-grids.css">
<link rel="stylesheet" type="text/css" href="progressive_enhancement.css">
</head>
<body>
<div class="faq slideshow" id="mySlideshow">
<div class="table-of-contents slide">
<h1>Progressive Enhancement</h1>
<h2>October 2008 LA Ruby User Group</h2>
<h3>Table of Contents</h3>
<ul class="table-of-contents-links">
<li><a href="#Slide1">What is Progressive Enhancement?</a></li>
<li><a href="#Slide2">Why should I?</a></li>
<li><a href="#Slide3">What you get for free</a></li>
<li><a href="#Slide4">Freedom to move ahead</a></li>
<li><a href="#Slide5">It's not more work, it's a different way of looking at your development</a></li>
<li><a href="#Slide6">Where does Ruby on Rails come in?</a></li>
<li><a href="#Slide7">There are lots of different ways to do this</a></li>
<li><a href="#Slide8">Will they blend?</a></li>
</ul>
</div>
<div class="slide" id="Slide1">
<h3>What is Progressive Enhancement?</h3>
<ul class="steps">
<li class="transition:drop">"Progressive enhancement is a strategy for web design that emphasizes accessibility, semantic markup, and external style-sheet and scripting technologies." <cite>Wikipedia</cite></li>
<li>Coined by Steven Champeon for Webmonkey and the SXSW Interactive conference in 2003 <cite>Wikipedia</cite></li>
</ul>
</div>
<div class="slide" id="Slide2">
<h3>Why should I?</h3>
</div>
<div class="slide" id="Slide3">
<h3>What you get for free</h3>
<ul class="steps">
<li class="transition:show">Compatibility with <strong>everything</strong> that supports HTML</li>
<li>Your code will make more sense to more people</li>
<li>Better compatibility with future platforms</li>
</ul>
</div>
<div class="slide" id="Slide4">
<h3>Freedom to move ahead</h3>
<ul class="steps">
<li class="transition:show">Not much has changed much in JavaScript or HTML since 1999</li>
<li>Fear of "breaking the web" is a top reason</li>
<li>This does not need to be an issue</li>
</ul>
</div>
<div class="slide" id="Slide5">
<h3>It's not more work, it's a different way of looking at your development</h3>
<ul class="steps">
<li>Strip down the metaphors. Do you remember the Nob control?</li>
<li>What is the standard HTML supported way of accomplishing the same goal</li>
<li><strong>Question:</strong> What is the standard HTML supported way of accomplishing the drag and drop interface in Basecamp?</li>
</ul>
</div>
<div class="slide" id="Slide6">
<h3>Where does Ruby on Rails come in?</h3>
<ul class="steps">
<li>Simplicity of creating HTML and JSON views from one controller?</li>
<li>Adherence to REST interfaces</li>
<li>Forward thinking developers</li>
<li><strong>Question:</strong> Anything else?</li>
</ul>
</div>
<div class="slide" id="Slide7">
<h3>There are lots of different ways to do this</h3>
<ul class="steps">
<li>Some sites can totally degrade and some cannot</li>
<li>Some features are not needed at all. Curves maybe?</li>
<li>Information sites should make all information available to every user</li>
<li>Web Apps should make sure that there is at least end to end functionality</li>
</ul>
</div>
<div class="slide" id="Slide8">
<h3>Will they blend?</h3>
<img src="img/willitblend.jpg">
</div>
</div>
<script src="lib/yui/yahoo-dom-event/yahoo-dom-event.js" type="text/javascript" charset="utf-8"></script>
<script src="lib/stapx/stapx.js" type="text/javascript" charset="utf-8"></script>
<script src="progressive_enhancement.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>