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 multi-linear set of objects, building a network by using logical links (the so-called 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 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.

Today’s lab Publish a KML service KML: Keyhole Markup Language (KML), an XML notation for expressing geographic annotation and visualization within Internet-based, two-dimensional maps and three-dimensional Earth browsers. KML was developed for use with Google Earth. KML became an international standard of the Open Geospatial Consortium in 2008.