Lecture 2: Technical Basics
•
•
•
•
Web Fundamentals
Web GIS architecture and components
Thin vs. thick client
User experience design
Web Fundamentals
Web principles
• A basic Web application is a client/server architecture.
• Workflow (Fig. 2.1). User, request, URL, parse, process, return results (e.g.
HTML format).
• The three foundational technologies of the WWW are HTTP, URL, and
HTML.
• The Hypertext Transfer Protocol (HTTP) is an application protocol for
distributed, collaborative, hypermedia information systems. HTTP is the
foundation of data communication for the WWW. Hypertext is a multilinear set of objects, building a network by using logical links (the socalled hyperlinks) between the nodes (e.g. text or words). HTTP is the
protocol to exchange or transfer hypertext.
• Hypertext Transfer Protocol Secure (HTTPS) is a widely
used communications protocol for secure communication over a computer
network. It is the result of simply layering the HTTP on top of the SSL
(Secure Sockets Layer) protocol.
• URL: A uniform resource locator, also known
as web address, is a specific character string that
constitutes a reference to a resource on the
Internet. A URL is technically a type of uniform
resource identifier (URI), but URL is often used as
a synonym for URI.
• URL syntax:
proctocol://hostname[:port]/filepathname?query
_string#anchor
Protocol: HTTP, HTTPS, FTP, and MMS
• HTML: HyperText Markup Language is the
main markup language for creating web
pages and other information that can be displayed
in a web browser.
Related technology for Web application development
1. Server-side technology
• Web application server. E.g.:
Apache Web Server and Tomcat
MS IIS
• Server-side programming languages:
JavaEE(Java Enterprise Edition), Servelet, JSP, and
JSF(JavaServer Faces)
ASP.Net: developed by Microsoft to allow programmers to
build dynamic web sites, web applications and web services. It
was first released in January 2002 with version 1.0 of the .NET
Framework, and is the successor to Microsoft's Active Server
Pages (ASP) technology.
2. Client/Browser side technology
• Web browser: interface of the Web. It is a client that implements HTTP,HTML and
JavaScript specifications. IE, Mozilla Firefox, Apple Safari, Google Chrome.
• Browser-side programming technology
- JavaScript: simple, nonprofessional programmers can work with it; platform
independent
- AJAX( Asynchronous JavaScript and XML) is a group of interrelated web
development techniques used on the client-side to create asynchronous web
applications. With Ajax, web applications can send data to, and retrieve data from,
a server asynchronously (in the background) without interfering with the display and
behavior of the existing page.
- Adobe Flex: Flex is a highly productive, open source application framework for
building and maintaining expressive web applications that deploy consistently on all
major browsers, desktops, and devices.
- Microsoft Silverlight: a powerful development tool for creating engaging,
interactive user experiences for Web and mobile applications. Silverlight is a free
plug-in, powered by the .NET framework and compatible with multiple browsers,
devices and operating systems, bringing a new level of interactivity.
- Oracle/Sun JavaFX: JavaFX is a software platform for creating and delivering rich
internet applications (RIAs) that can run across a wide variety of devices. The current
release has support for desktop computers and web browsers on Windows, Linux,
and Mac OS X.
3. Data exchange format
- XML (Entensible Markup Language)
- JSON (JavaScript Object Notation)
- AMF (Action Message Format)
Web GIS architecture and components
Web GIS server
• The most important component in a Web GIS.
Its functionability, ability to be customized,
scalability, and performance are critical to the
success of the Web GIS application.
• ESRI technology: ArcGIS Server
GIS database
• Is the underlying support for the Web GIS applications.
• Capabilities:
- Stores spatial data
- Applies sophisticated rules and relationships to the
data
- Defines geospatial relational models: topolgy, road
network
- Maintains integrity of data
- Multiple user access: versioning
- Robust data security, backup, recovery, and rollback
Web GIS clients
• Two roles:
- end user interface
- if the client is thick, perform some geospatial processing tasks.
• Web browser clients
- Main type of Web GIS clients
- AJAX, Flex, Silverlight and Java FX can create RIA.
- With additiional APIs (ESRI’s ArcGIS API for Javascript, Flex, Silverlight), Web
browsers are able to easily perform many types of GIS functions.
- Example of Web browser clients: ArcGIS Explorer Online
• Desktop application client
-Desktop applications such as those developed with Java, ,NET, or other
programming languages can act as Web GIS clients.
- These full-featured applications do not run inside a Web browser.
- Examples: ArcGIS Explorer Desktop, Google Earth, ArcGIS Desktop.
• Mobile client
- Two categories: browser based and native application based.
- Browser based: capabilities vary, from simple to fully fledged.
- Native based client: developed with .NET Mobile, Java Mobile Edition (Java
ME), or other languages, can access local peripheral devices such GPS.
- Examples: AcrGIS Mobile, ArcGIS for iPhone, MS Bing Maps Mobile, G Earth
Mobile, and Mapquest Mobile.
Thin vs. thick client
Thin client architecture
 Server-side strategies allow users (clients) to
submit requests for data and analysis to a
Web server. The server processes the requests
and returns data or a solution to the remote
client.
Thick client architecture
 Client-side strategies allow the users to
perform some data manipulation and analysis
locally on their own machines.
Best pattern for workload partitioning:
http://gis.cityofboston.gov/solarboston/#
User experience (UE) design
Three main principles of UE design: making Web
applications fast, easy, and fun to use
• Ease of use
- “Do not make me think”
- How to make a Web GIS easy to use:
Hide complexity
Provide feedback
• Make it fun: rich internet application(RIA)
- RIA refers to Web applications that provide a rich and
engaging user experience comparable to desktop
applications.
- RIAs are developed with AJAX, Flex, Silverlight.