-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
318 lines (273 loc) · 12.5 KB
/
index.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
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js ie6" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js ie7" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js ie8" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>xavijam | FOSS4G</title>
<meta name="description" content="FOSS4G 2011 presentation about 'HTML5 for Rich Geospatial applications on the web' at Denver">
<meta name="keywords" content="jmedina,jamedina,xavijam,Javier Álvarez,Javier,Álvarez,Informática,science,vizzuality,maps,biodiversity,front-end,html5,informatics,developer,foss4g,HTML5 rich web applications,geocat">
<meta name="distribution" content="Global">
<meta name="author" content="Javier Álvarez Medina">
<meta name="detail" content="Javier Álvarez Medina personal webpage">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta charset="UTF-8">
<meta name="DC.title" content="Javier Álvarez Medina">
<meta name="geo.region" content="ES-M">
<meta name="geo.placename" content="Madrid">
<meta name="geo.position" content="40.4166909, -3.7003454">
<meta name="ICBM" content="40.4166909, -3.7003454">
<meta name="viewport" content="width=1024, user-scalable=no">
<link rel="shortcut icon" href="http://xavij.am/favicon.ico" />
<!-- Core and extension CSS files -->
<link rel="stylesheet" href="css/libs/reset.css">
<link rel="stylesheet" href="css/libs/deck.core.css">
<link rel="stylesheet" href="css/libs/deck.goto.css">
<link rel="stylesheet" href="css/libs/deck.menu.css">
<link rel="stylesheet" href="css/libs/deck.navigation.css">
<link rel="stylesheet" href="css/libs/deck.status.css">
<link rel="stylesheet" href="css/libs/deck.hash.css">
<!-- Theme CSS files -->
<link rel="stylesheet" id="style-theme-link" href="css/foss4g.css">
<link rel="stylesheet" id="transition-theme-link" href="css/transition/horizontal-slide.css">
<script src="js/libs/modernizr.custom.js"></script>
<script type="text/javascript">
Modernizr.load([{
load: {
'jquery': '//ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.js',
'core': 'js/libs/deck.core.js',
'menu': 'js/libs/deck.menu.js',
'goto': 'js/libs/deck.goto.js',
'status': 'js/libs/deck.status.js',
'navigation': 'js/libs/deck.navigation.js',
'hash': 'js/libs/deck.hash.js',
'foss4g': 'js/foss4g.js',
'maps': 'https://maps.google.com/maps/api/js?sensor=true&callback=startPresentation'
},
complete: function () {
if ( !window.jQuery ) {
Modernizr.load('js/libs/jquery.js');
}
}
}]);
</script>
</head>
<body>
<div id="map"></div>
<div class="deck-container">
<span class="loader"></span>
<section class="slide" id="lets-start">
<div class="central first">
<h1>_HTML5 for Rich Geospatial applications on the web</h1>
<p class="point">FOSS4G Denver 2011</p>
</div>
</section>
<section class="slide right" id="me">
<div class="right">
<h2>_Javier Alvarez</h2>
<ul>
<li><p>Frontend developer <a href="http://vizzuality.com" target="_blank"><strong class="g1">@Vi</strong><strong class="g2">zz</strong><strong class="g3">ua</strong><strong class="g4">li</strong><strong class="g5">ty</strong></a></p></li>
</ul>
</div>
</section>
<section class="slide" id="before-start">
<div class="central features">
<h2>_Introduction</h2>
<ul>
<li><p>CartoSet on wednesday: great geospatial framework → <a href="http://twitter.com/jatorre" target="_blank">@jatorre</a></p></li>
<li><p>CartoDB on thursday: awesome geospatial DB → <a href="http://twitter.com/tokumin" target="_blank">@tokumin</a></p></li>
<li><p>DesignMaps on thursday as well: how to design best maps → <a href="http://twitter.com/saleiva" target="_blank">@saleiva</a></p></li>
</ul>
</div>
</section>
<section class="slide" id="what-to-do">
<div class="central features">
<h2>_What is this about?</h2>
<ul class="short">
<li><p>How HTML5 can improve web mapping</p></li>
<li><p>Demo some projects made by <a href="">Vizzuality</a></p></li>
</ul>
</div>
</section>
<section class="slide" id="html5?">
<div class="central features">
<h2>_What is HTML5?</h2>
<ul>
<li><p class="quotes"><strong>"</strong>HTML5 is a language for structuring and presenting content for the World Wide Web, a core technology of the Internet...<strong>"</strong><sub>(Wikipedia)</sub></p></li>
<li><p>HTML5 is great for developing web applications</p></li>
</ul>
</div>
</section>
<section class="slide" id="where-use-html5">
<div class="central features">
<h2>_Where can I use HTML5?</h2>
<ul class="browsers">
<li><a class="safari" href="http://www.apple.com/safari/" target="_blank">Safari +4</a></li>
<li><a class="chrome" href="http://www.google.com/chrome" target="_blank">Chrome +10</a></li>
<li><a class="ie" href="http://windows.microsoft.com/en-US/internet-explorer/products/ie/home" target="_blank">IE +9</a></li>
<li class="last"><a class="firefox" href="http://www.mozilla.org/en-US/firefox/new/" target="_blank">Firefox +4</a></li>
</ul>
<p class="margin center">Some technologies appeared before than others in different browsers versions</p>
</div>
</section>
<section class="slide" id="evolution-of-the-web">
<div class="central features project">
<h2>_Evolution of the Web</h2>
<span class="image">
<a href="http://evolutionofweb.appspot.com" target="_blank"><img src="img/evolutionoftheweb.jpg" title="Evolution of the Web" alt="Evolution of the Web"/></a>
</span>
</div>
<a href="view-source:http://evolutionofweb.appspot.com" target="_blank" class="github no">NO-OPEN-SOURCE</a>
</section>
<section class="slide" id="geocat">
<div class="central features project">
<h2>_Introducing GeoCAT</h2>
<span class="image">
<a href="http://rlatstage.ipq.co" target="_blank"><img src="img/geocat_home.jpg" title="GeoCAT" alt="GeoCAT"/></a>
</span>
</div>
<a href="https://github.com/Vizzuality/GeoCAT" target="_blank" class="github">OPEN-SOURCE</a>
</section>
<section class="slide" id="geocat-demo">
<div class="central features project">
<h2>_GeoCAT!</h2>
<span class="image no">
<a href="http://rlatstage.ipq.co/editor" target="_blank"><img src="img/geocat.jpg" title="GeoCAT" alt="GeoCAT"/></a>
</span>
</div>
<a href="https://github.com/Vizzuality/GeoCAT" target="_blank" class="github">OPEN-SOURCE</a>
</section>
<section class="slide" id="geocat-features1">
<div class="central features project">
<h2>_CSS3</h2>
<span class="highlight">
<img src="img/geocat-feature-1.jpg" />
<ul>
<li><p>CSS3 new options</p></li>
<li><p>Box-shadow</p></li>
<li><p>Background gradients</p></li>
<li><p>...</p></li>
</ul>
</span>
</div>
</section>
<section class="slide" id="geocat-features2">
<div class="central features project">
<h2>_Canvas</h2>
<span class="highlight">
<img src="img/geocat-feature-2.jpg" />
<ul class="short">
<li><p>Using Canvas on markers</p></li>
<li><p>Custom OverlayView in Gmaps v3, Leaflet, OSM,...</p></li>
<li><p>...</p></li>
</ul>
</span>
</div>
</section>
<section class="slide" id="geocat-features3">
<div class="central features project">
<h2>_Layers</h2>
<span class="highlight">
<img src="img/geocat-feature-3.jpg" />
<ul class="short">
<li><p>Add/remove</p></li>
<li><p>Hide/show</p></li>
<li><p>Sort</p></li>
<li><p>... layers in the map</p></li>
</ul>
</span>
</div>
</section>
<section class="slide" id="visual-raster">
<div class="central features project comparation">
<h2>_Visual Raster</h2>
<span class="compare">
<a class="project" href="http://www.mountainbiodiversity.org/" target="_blank"><img src="img/gmba.jpg" alt="GMBA" title="GMBA"></a>
<img src="img/flash.png" alt="flash" title="flash"/>
</span>
<p class="big">→</p>
<span class="compare">
<a href="http://visualraster.appspot.com/" target="_blank"><img src="img/visualraster.jpg" alt="Visual raster" title="Visual raster"></a>
<img src="img/html5.png" alt="flash" title="flash"/>
</span>
</div>
</section>
<section class="slide" id="imazon">
<div class="central features project">
<h2>_Imazon</h2>
<span class="image">
<img src="img/imazon.jpg" title="Imazon" alt="Imazon"/>
</span>
</div>
<a class="github no">NO-OPEN-SOURCE</a>
</section>
<section class="slide" id="cartodb">
<div class="central features project">
<h2 class="special">_OMT -> Web workers</h2>
<span class="highlight">
<img src="img/cartodb-feature-1.jpg" />
<ul class="short">
<li><p>Asynchronous - "Additional threads not blocking user-interface"</p></li>
<li><p>Server side vs client side for georeferencing</p></li>
</ul>
</span>
</div>
</section>
<section class="slide" id="my-tools">
<div class="central features project">
<h2>_Front-end recommendations</h2>
<ul class="short">
<li><p>jQuery framework</p></li>
<li><p>Modernizr plugin</p></li>
<li><p>Efforts</p></li>
<li><p>...and love!</p></li>
</ul>
</div>
</section>
<section class="slide" id="conclussions">
<div class="central features project">
<h2>_Conclusions</h2>
<ul>
<li><p>HTML5 brings superb possibilities for web-mapping</p></li>
<li><p>Canvas enables client side rendering of maps</p></li>
<li><p>CSS3 help to create great user interfaces</p></li>
<li><p>IE<9 sucks!</p></li>
</ul>
</div>
</section>
<section class="slide" id="thanks">
<div class="central features project">
<h2>_Thanks!</h2>
<p>Javier Álvarez</p>
<p>Vizzuality, @xavijam</p>
<p><br/></p>
<p>This presentation is available at <a href="http://xavijam.github.com/html5-foss4g">xavijam.github.com/html5-foss4g</a></p>
</div>
</section>
<!-- DECK STUFF -->
<a href="#" class="deck-prev-link" title="Previous">←</a>
<a href="#" class="deck-next-link" title="Next">→</a>
<p class="deck-status">
<span class="deck-status-current"></span>
/
<span class="deck-status-total"></span>
</p>
<form action="." method="get" class="goto-form">
<label for="goto-slide">Go to slide:</label>
<input type="number" name="slidenum" id="goto-slide">
<input type="submit" value="Go">
</form>
<a href="." title="Permalink to this slide" class="deck-permalink">#</a>
<!-- END DECK STUFF -->
</div>
<a class="twitter" href="http://twitter.com/xavijam" target="_blank">xavijam</a>
<script>
window._gaq = [['_setAccount','UA-6602253-10'],['_trackPageview'],['_trackPageLoadTime']];
Modernizr.load({
load: ('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js'
});
</script>
</body>
</html>