1. How Web Servers Work Browser ClientServer Web Server HTML File Image File HTML File Image File Internet URL

2. Web Formats & Languages Direct Browser Support: –HTML: Web page content –JavaScript: Scripting web pages –CSS: Style sheets –Images: GIF, PNG, JPEG Plug-ins: –PDF: Final product distribution AJAX (JavaScript to Server) –XML

3. XML-Type Languages Extensible Markup Language Single tag: Tag with attributes: Tag with content: Includes: HTML, KML, and many more

4. HTML Hyper Text Markup Language This is my page Some text that will appear on the page

5. Hyperlinks Google My Page

6. Images in HTML

7. Accessibility Attributes DreamWeaver will ask you for attributes for those with disabilities Provides text that will be spoken for those with impaired vision. Don’t worry about this for this assignment

8. Image Maps Create background image in ArcGIS –Create a map that looks good on the screen –Export or Screen Capture Define polygonal areas as “image maps” in DreamWeaver –Circles for points –Simple polygons for polygons –Polygons for polylines? Good for 10 to 20 areas

9. Image Maps

11. Can also have… Paragraphs Horizontal rules Tables data Divs (boxes) Headings: Heading Text with: –Bold –Italic –And “Styles” with much more

12. MacroMedia DreamWeaver Now part of Adobe CS HTML Editor Excellent tutorials Makes HTML editing similar to MS-Word Allows “publishing” pages to the web Work flow: –Edit web pages locally –Review in browser –Upload/publish to a server

13. Tips for Maps in HTML Pages Use a white or light background with dark or black text (easy to read). The alternative is to use a black or dark background but then the text must be light. Make the maps for the web: –They have to be simpler than paper maps –Text must be large enough to read –You can break up site maps, titles, and even legends into separate images

14. Dynamic Web Sites Browser ClientServer Web Server HTML File Image File HTML File Image File Internet URL GIS Data Scripts

15. Server-Side Scripting Languages: –PHP –Python Databases: –MySQL –PostgreSQL –SQL Server –Oracle Web Servers –Apache –IIS Operating Systems –Windows –Linux (e.g. Ubuntu) –UNIX

16. GIS Web Servers Browser ClientServer Web Server HTML File Image File HTML File Image File Internet URL GIS Server Database Scripts GIS Data JavaScript AJAX

17. GIS Web Servers ArcGIS Server –Expensive –Slow –Buggy (reboot each night) MapServer –Free –Moderately fast –Hard to configure GeoServer –Free –Client: OpenLayers –Looking pretty good Custom solutions –Have to assemble –Can be very fast

18. GIS Web Servers ArcServer Examples: –Greeley Colorado’s GIS Website http://gis.greeleygov.com/origin/propinfo.html GeoServer Examples: –National Map Viewer http://viewer.nationalmap.gov/viewer/ –NOAA’s ERMA http://tinyurl.com/cafwp54

19. Problem with Performance 1.User zooms or pans the map 2.Client requests a new area from the server 3.Server renders the area to a raster file (takes a relatively long time) 4.Server returns the raster to the client 5. Back to 1 With lots of users, the server cannot keep up!

20. Tile-Based Servers Topozone tiled the USGS 24k topo maps into 256x256 cells at multiple zoom levels GoogleMaps copied this approach with the entire world in “Google Mercator” –Now “World Mercator” Very fast –No rendering –Images can be cached locally (they don’t change) Cannot symbolize the layers

21. GIS Web Servers Browser ClientServer Web Server HTML File Image File HTML File Image File Internet URL JavaScript AJAX Tile Server

22. GoogleMaps API Performance limited to about 400 points features –Example: EDDMaps.org Can also provide rendered “tiles” with GoogleMaps (harder) –Example: NIISS.org

23. GIS Web Servers Browser ClientServer Web Server HTML File Image File HTML File Image File Internet URL GIS Server Database Scripts GIS Data JavaScript AJAX Tile Server

24. Hybrid Systems National Institute of Invasive Species Science (www.niiss.org).www.niiss.org Other sites based on International Biological Information System (ibis.colostate.edu)

25. Latest Developments Arcata: Online GIS PortalOnline GIS Portal Crime Spotters –http://sanfrancisco.crimespotting.org/http://sanfrancisco.crimespotting.org/ Cloud Made: –http://maps.cloudmade.com/http://maps.cloudmade.com/ Open Street Map –http://www.openstreetmap.org/http://www.openstreetmap.org/ EROS EarthExplorer –http://edcsns17.cr.usgs.gov/EarthExplorer/http://edcsns17.cr.usgs.gov/EarthExplorer/

26. Future Web Heavy Clients? –C++ based plug ins Arcata: Online GIS PortalOnline GIS Portal Java Applets? HTML 5 –“Heavy” on JavaScript

27. “Heavy Clients” Browser ClientServer Web Server HTML File Image File HTML File Image File Internet URL GIS Server Database Scripts GIS Data Plug-in/ HTML 5 Tile Server

28. HTML 5 New HTML Standard – : 2D drawing –Elements for media control:, –Support for local storage –Additional Elements:,,,, –New form controls: calendar, date, time, email, url, search No browser currently supports the entire standard

29. Minimum HTML 5 Title of the document Content of the document......

30. HTML 5 Examples 21 Ridiculously Impressive HTML5 Canvas Experiments –http://net.tutsplus.com/articles/web- roundups/21-ridiculously-impressive-html5- canvas-experiments/http://net.tutsplus.com/articles/web- roundups/21-ridiculously-impressive-html5- canvas-experiments/ GIS Cloud http://raphaeljs.com/australia.html http://www.scale18.com/canvas4.html

31. Future? Browser Client Server HTML File Image File HTML File Image File Web Server URL GIS Server Data Stores Scripts Spatial Database JavaScript Tile Cache Scripts Web Service

32. Creating a GIS Web Site 1.Understand and define the user needs 1.Talk to the users 2.Select the technology that meets the needs with minimum complexity 3.Deliver in stages when possible 4.Use experienced people when possible 5.Web site must be intuitive or users will go elsewhere 1.Help is built in 6.Test, rework, test, rework, …