Embed Size (px)
Citation preview
How Web Servers Work
Browser
Client Server
Web Server
HTML File
Image File
HTML File
Image File
Internet
URL
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
XML-Type Languages
• Extensible Markup Language
• Single tag: <tag />
• Tag with attributes: <name attribute=‘value’ />
• Tag with content:<name>
<contentname/>
</name>
• Includes: HTML, KML, and many more
HTML
• Hyper Text Markup Language<html>
<head>
<title>This is my page</title>
</head>
<body>
Some text that will appear on the page
</body>
</html>
Hyperlinks
<a href=‘www.google.com’>Google</a>
<a href=‘WebPage.html’>My Page</a>
<a href=‘LargeImage.png’><img src=‘SmallImage.png’>
</a>
Images in HTML
<img src=‘MyImage.png’>
<img border=‘0’ src=‘MyImage.png>
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
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
Image Maps• <img src="planets.gif" width="145" height="126"
alt="Planets" usemap="#planetmap">
• <map name="planetmap">• <area shape="rect" coords="0,0,82,126"
href="sun.htm" alt="Sun">• <area shape="circle" coords="90,58,3"
href="mercur.htm" alt="Mercury">• <area shape="circle" coords="124,58,8"
href="venus.htm" alt="Venus">• </map>
Can also have…
• Paragraphs <p>
• Horizontal rules <hr>
• Tables <table><tr><td>data</td></tr></table>
• Divs (boxes) <div>
• Headings: <h1>Heading</h1>
• Text with:– Bold <b>– Italic <i>– And “Styles” with much more
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
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
Dynamic Web Sites
Browser
Client Server
Web Server
HTML File
Image File
HTML File
Image File
Internet
URL
GIS Data
Scripts
Server-Side• Scripting Languages:
– PHP– Python
• Databases:– MySQL– PostgreSQL– SQL Server– Oracle
• Web Servers– Apache– IIS
• Operating Systems– Windows– Linux (e.g. Ubuntu)– UNIX
GIS Web Servers
Browser
Client Server
Web Server
HTML File
Image File
HTML File
Image File
Internet
URL
GIS Server
Database
Scripts
GIS Data
JavaScriptAJAX
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
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
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!
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
GIS Web Servers
Browser
Client Server
Web Server
HTML File
Image File
HTML File
Image File
Internet
URL
JavaScriptAJAX
Tile Server
GoogleMaps API
• Performance limited to about 400 points features– Example: EDDMaps.org
• Can also provide rendered “tiles” with GoogleMaps (harder)– Example: NIISS.org
GIS Web Servers
Browser
Client Server
Web Server
HTML File
Image File
HTML File
Image File
Internet
URL
GIS Server
Database
Scripts
GIS Data
JavaScriptAJAX
Tile Server
Hybrid Systems
• National Institute of Invasive Species Science (www.niiss.org).
• Other sites based on International Biological Information System (ibis.colostate.edu)
Latest Developments
• Arcata: Online GIS Portal
• Crime Spotters– http://sanfrancisco.crimespotting.org/
• Cloud Made:– http://maps.cloudmade.com/
• Open Street Map– http://www.openstreetmap.org/
• EROS EarthExplorer– http://edcsns17.cr.usgs.gov/EarthExplorer/
Future Web
• Heavy Clients?– C++ based plug ins
• Arcata: Online GIS Portal
• Java Applets?
• HTML 5– “Heavy” on JavaScript
“Heavy Clients”
Browser
Client Server
Web Server
HTML File
Image File
HTML File
Image File
Internet
URL
GIS Server
Database
Scripts
GIS DataPlug-in/HTML 5
Tile Server
HTML 5
• New HTML Standard– <canvas>: 2D drawing– Elements for media control: <video>, <audio> – Support for local storage– Additional Elements: <article>, <footer>,
<header>, <nav>, <section>– New form controls:
• calendar, date, time, email, url, search
• No browser currently supports the entire standard
Minimum HTML 5 <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
</head>
<body>
Content of the document......
</body>
</html>
HTML 5 Examples
• 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
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
ScriptsWeb Service
Creating a GIS Web Site
1. Understand and define the user needs1. 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, …
