webgis For M.Sc._Med20000000000000000000.pptx

webgis For M.Sc._Med20000000000000000000.pptx

1. Post Graduate Faculty M.S.c In Geo-Informatics Instructional Materials GEG1121 Web GIS & Internet GIS Dr.Samir Mahmoud 1

2. Table of contents No Topics Slide no I  Title  1 Ii  Instructor  2 Iii  Table of content  3 1 Basic Concept of Internet, Web and Web GIS.  4 2 Internet GIS ( Web Principles)  34 3 Web GIS architecture and components  57 4 Web GIS Resent Technology  72 5 Internet GIS applications& Issues in the Development  94 6 HTML Programming  114 7 CSS 3 and JavaScript  116 8 Geospatial web services  121 2

3. 01-Basic Concept of Internet, Web and Web GIS. 3

4. Overview Main topics introduces the Internet, the World Wide Web, the mobile Web, and GIS. presents early examples of Web GIS and how it has evolved in the Web 2.0 era. the definition and characteristics of Web GIS. functions of Web GIS and its applications in e-business, e-government, e-science, and daily life. 4

5. Introduction The Web changes everything, and GIS is no exception. Web GIS, as the combination of the Web and geographic information system(s) or science (GIS). GIS has turned into a compelling Internet application that has prompted many people to take advantage of the Web. The vast majority of Internet users use simple mapping or other spatially enabled applications over the Web at some point, though many are not aware of it. The Web has unlocked the power of GIS, from offices to laboratories. It has put GIS in the homes of millions and in the hands of billions, and made it usable across all industries, from government and business to education and research. 5

6. What is the Internet Internet: refers to Inter connecting Net works. Is a massive network of networks that connects millions of computers around the world. 6

7. History of Internet During the Cold War in the 1960s, the U.S. Department of Defense Advanced Research Project Agency (ARPA) initiated a research project to create a network of geographically separated computers that could exchange information even if some of the nodes stopped functioning or were destroyed in the event of nuclear attack. In 1969, this research successfully connected the main frames of four western universities Stanford University; University of California, Santa Barbara; University of California, Los Angeles; and Utah State University leading to the invention of the Internet. 7

8. ARPANet , which successfully connected the mainframes of four western universities, is recognized as the predecessor of the global Internet. 8 Advanced Research Project Agency Net

9. History of Internet - con The network, Advanced Research Project Agency (ARP) Net, was the predecessor of the global Internet (Internet Society 2003). New computers were gradually added to the network, including those of government agencies, universities, and research institutes, bringing the number of "nodes" to fifty-seven in 1975. The networks of these agencies are interconnected, thus forming the Internet. By the end of 1989, more than 100,000 computers were globally connected to the Internet. 9

10. History of Internet - con The Internet didn't gain popularity until the 1990s. Before then, the services available over the Internet mainly consisted of e-mail, Usenet News (a way to provide news to Internet users before the Web was invented), file transfer, and Telnet (a protocol that allows you to log in to another computer and operate the computer remotely). The Internet was complex to use, its content was not nearly as rich as it is today, and its users were mostly professionals from research institutes and government agencies. 10

11. How does the Internet works The Internet network, computers are linked through wires or wireless . The Internet is a global network of computers each computer connected to the Internet  must  have a unique address. Internet addresses are in the form  nnn.nnn.nnn.nnn  where nnn must be a number from 0 - 255. The address is known as an IP address. (IP stands for Internet Protocol). 11

12. Two computers connected to the Internet; your computer with IP address 1.2.3.4 and another computer with IP address 5.6.7.8. The Internet is represented as an abstract object in-between.  12

13. World Wide Web (www) In 1990, Tim Berners-Lee, a researcher at European Organization for Nuclear Research (CERN) dramatically changed the way the Internet was used. While trying to find an easy way to share and exchange documents with his colleagues, Berners-Lee invented HTTP (Hypertext Transfer Protocol), HTML (Hypertext Markup Language), and the URL (Uniform Resource Locator). He developed the world's first Web server and a Web browser, naming his invention the World Wide Web. With the birth of the World Wide Web, Berners-Lee is undisputedly recognized as the "father of the Web“. The Web has made the Internet interesting, easy, and fun to use; it has forever changed the way we live and work; and it has changed the computer's role from calculation to one of communication and entertainment. 13

14. World Wide Web (www) A basic Web application is essentially a client/server (C/S) architecture, in which the computers are divided into web clients and web servers. Web Client : Your web browser, When you type an URL, the web browser connects to the web server and brings and shows that particular information to you. Web Server : to share your information in the internet, information stored in web servers. You use URL to access these information. 14

15. How does the Web works A user uses a Web client, usually a browser, and initiates a request to the Web server by typing a URL in the browser address bar or clicking a URL link on a Web page. The Web server receives the request, parses the URL, locates the corresponding document or script, and returns the document or else executes scripts and returns the result of the script to the client as a response. The response is commonly in HTML format. The Web client (the browser) receives the response, renders it, and presents it to the user. 15

16. Web client initiates a request to the Web server, Web server receives the request and returns the document to the client as a response. 16

17. Internet vs Web The terms Internet and the World Wide Web are synonymous in the minds of many, but they have different meanings. Internet: a massive network of networks that connects millions of computers worldwide using a number of protocols: HTTP, SMTP (Simple Mail Transfer Protocol), FTP, IRC(Internet Relay Chat), IM (instant messaging), Telnet, and P2P(peer-to-peer). World Wide Web(WWW): a system of interconnected hypertext documents and programs that can be accessed via the Internet primarily by using HTTP. So it is that the Web is the "face" of the Internet (Douglas 2008). Web is still quickly expanding, from wired networks into wireless networks, fed by the popularity of the mobile Web, or wireless Web. The advances of mobile devices such as smart phones and wireless communications technologies, have facilitated its spread. 17

18. GIS GIS is a system of computer hardware, software, and procedures that capture, store, edit, manipulate, analyze, and visualize geo-referenced data. The first operational GIS (Canada G.I.S.- CGIS) was developed in 1962 by Roger Tomlinson (“father of GIS”) for land inventory and planning. GIS capabilities go beyond mapping. GIS offers a rich set of analytical functions. The emergence of Web GIS is unlocking the power of GIS to a wider audience. 18

19. GIS - con GIS abstracts the real world into data models consisting of multiple layers, where each layer represents a different theme of real-world data. This data can be presented in 2D or 3D maps, and GIS can be used to perform analysis to solve real-world problems such as finding the areas that are at high flood risk, what the total property damage would be, and what alternative plans can be made to mitigate the risk. 19

20. Web GIS origin and Evolution In 1993, the Xerox Corporation Palo Alto Research Center (PARC) developed a web-based map viewer, marking the origin of Web GIS . Users could use the map viewer in a web browser and click a link to a function. The browser sends an HTTP request to the web server, the server receives the request, performs mapping operations, generates a new map, and returns it to the browser. The browser displays the map as a map image. 20

21. 21 Fig. 1. Typical 3-tier system architecture (left) compared with SaaS & desktop GIS architecture (right) on the example of Esri solutions.

22. The PARC Map Viewer is recognized as the first Web GIS application. It allowed people to use basic map functions from anywhere with an Internet connection without having to install GIS software and data locally. 22

23. Google map Now https://www.google.com/maps/@13.6234282,25.2508337,1410m/data=!3m1!1e3?hl=en-US 23

24. 24 Fig. The Visual Pollution app. map layer design: a) legend (hidden) switched to charts windows; b) main map c) map toolbar with filtering function; d) pop-up window with trend information and GeoForm questions overview chart .

25. 25 Fig. 4. 3D viewer mode of Visual Pollution app with pop-up window displaying single USU source datasets.

26. Web GIS Concepts Web GIS started off as GIS running in Web browsers and has evolved into Web GIS serving desktop and mobile clients. Web GIS is any GIS that uses Web technology to communicate between components: server (identified by URL) and client (a browser, a desktop application, or a mobile application). The communication is via HTTP. The format of the response can be an HTML, binary image, XML(Extensible Markup Language), or JSON(JavaScript Object Notation). The simplest architecture: 2-tier client-server (C-S) system. Server program runs on the Web or in the cloud. C-S can be on one computer. Multi-tier system: 3 tier (including a data tier), 3 tiers in mashup Web GIS. 26

27. The simplest architecture of Web GIS should have at least a Web application server and a client, which can be a Web browser, desktop client, or mobile client. The server and the client communicate via HTTP. 27

28. Web GIS & Desktop GIS Web GIS and desktop GIS are increasingly intertwined. Web GIS relies on desktop GIS to author resources. Desktop GIS, on the other hand, has expanded its functionality to make use of the resources on the Web. For instance, as an ArcGIS desktop user, you can use basemaps available over the Web, such as those served by USGS or Microsoft Bing Maps, without having to have your own copy of the data on your local computer. 28

29. Web GIS & Internet GIS Web GIS is closely related to two other terms: Internet GIS and the geospatial Web. Internet GIS and Web GIS are often used synonymously. however, the two are slightly different. The Internet supports many services, and the Web is only one of them. GIS that uses any of the Internet services, and not just the Web, can be considered Internet GIS making Internet GIS theoretically broader than Web GIS. In reality, the Web is the chief attraction of the Internet and is the most commonly used Internet service. Thus, Web GIS is the most pervasive form of Internet GIS. 29

30. Web GIS & GeoWeb The geospatial Web, or GeoWeb , is another term used to refer to Web GIS. However, the definition of GeoWeb is not identical to Web GIS. One definition of the GeoWeb is the merging of geospatial information with abstract ( nongeospatial ) information (e.g.; Web pages, photos, videos, and news) that currently dominates the Web ( Haklay , Singleton, and Parker 2008). 30

31. Web GIS and other related GIS terms A GIS basically consists of hardware, software, data, and users. It is interesting to see how the distance between these physical components has increased over the years. In the 1960s and 1970s, these components were usually collocated on one computer. In the 1980s and early 1990s, distributed GIS emerged with the adoption of a local area network (LAN). These components no longer needed to be collocated and were commonly located separately in one or multiple buildings of an organization. With the birth of Web GIS, these components are now separated even further apart. Most GIS users sitting on one side of the globe can access a server located on the other side of the globe. With the emergence of newer technologies such as Web services and mas hups , a client can use data from one server and functions from another. The server of one client can be the client of another server, further separating and distributing the components of a GIS. 31

32. Web GIS is shown in relation to other related GIS terms. While Internet GIS has a slightly broader coverage, Web GIS is the most widely used form of Internet GIS. Thus, many people use the terms synonymously. 32

33. Characteristics of Web GIS Global reach by HTTP. Support a large number of users simultaneously: requires high performance and scalability. Better cross-platform capability: Easy to use for end users. “If I do not know how to use your site, it is your fault”. Unified system update. Diverse applications. Neogeopgarphy , ("new geography“), is commonly applied to the usage of geographical techniques and tools used for personal and community activities or for utilization by a non-expert group of users. 33

34. Functions of Web GIS Mapping/visualization and query (attribute or spatial). Collaborative collection of geospatial information.e.g OpenStreetMap,Googleearth Geospatial analysis: measurement, optimal driving path, routing, pollution dispersion modeling, retail site selection. 34

35. Uses of Web GIS Web GIS as a new business model and a new type of commodity: Web GIS as an engaging and powerful tool for e-government. E.g., A new infrastructure for e-science: E-Science  (or  eScience ) is computationally intensive science that is carried out in highly distributed network environments, or science that uses immense data sets that require grid computing (the federation of computer resources from multiple administrative domains to reach a common goal). Web GIS provides an infrastructure for geo-science research collaboration. 35

36. Uses of Web GIS - con Web GIS in daily life: location-based service (LBS) supported by mobile Web, smart phones and tablets. LBS include services to identify a location of a person or object, such as discovering the nearest banking cash machine or the whereabouts of a friend or employee. LBS include parcel tracking and vehicle tracking services. LBS can include mobile commerce when taking the form of coupons or advertising directed at customers based on their current location. They include personalized weather services and even location-based games. 36

37. 02-Internet GIS ( Web Principles) 37

38. Lecture 02 - Overview Main topics Web principles. Lab 01 HTML Programming 38

39. WEB PRINCIPLES A basic Web application is essentially a client/server (C/S) architecture, in which the client is specifically called a Web client, and the server is called a Web server. Basic Web applications usually have a three-tier architecture consisting of the data tier, logical tier, and presentation tier. The Web client is typically a Web browser thus, the basic Web architecture is also referred to as the browser/server (B/S) architecture. 39

40. The basic architecture of a Web application includes three tiers. 40

41. WEB PRINCIPLES - con The basic workflow of a Web application is as follows: A user uses a Web client, usually a browser, and initiates a request to the Web server by typing a URL(Uniform Resource Locator) in the address bar or clicking a URL link on a Web page. The Web server receives the request, parses the URL, locates the corresponding document or script, and returns the document or else executes scripts and returns the result of the script to the client as a response. The response is commonly in HTML format. The Web client (the browser) receives the response, renders it, and presents it to the user. 41

42. WEB PRINCIPLES - con The three foundational linchpins of the World Wide Web (WWW) are HTTP, the URL, and HTML. These protocols were invented by Tim Berners-Lee in 1990. These technologies are now international standards, and their specifications are managed and maintained by W3C (World Wide Web Consortium). 42

43. HTTP As a protocol, HTTP (Hypertext Transfer Protocol) defines a set of rules and procedures that both Web clients and Web servers use to communicate with each other. HTTP defines eight methods of request: GET, POST, HEAD, PUT, DELETE, TRACE, OPTIONS, and CONNECT. GET and POST are the two most commonly used requests. Both HTTP request and response messages have headers and bodies. 43

44. HTTP - con The following information is typical of what can be found in an HTTP response header: Cache control: specifies directives that the client must obey (e.g., no cache) Content type: the MIME (Multipurpose Internet Mail Extensions) type indicates whether the message body is HTML (text/html), a MEG image (image/jpeg), an MP3 audio file (audio/ .mpeg3), or other file type Status code: denotes the status of the response (e.g., 200 means success, 403 means forbidden, and 500 means server error). 44

45. HTTP characteristics HTTP is characterized as simple, stateless, and flexible: Simple: In general, an HTTP communication scenario has three steps: an HTTP client makes a connection to a Web server and sends a request method to the HTTP server the server processes the client's request while the client waits for the server's response the server responds with the status code in the response header and data (if any) to the client and closes the connection. 45

46. HTTPS HTTPS (Secure Hypertext Transfer Protocol) refers to the use of ordinary HTTP over an encrypted Secure Sockets Layer (SSL) connection. With a plain HTTP connection, the data transferred between the client and the server can be intercepted. HTTPS avoids eavesdropping by encrypting the data. This ensures reasonable protection over the Internet, which is largely an insecure network. HTTPS is often used to transfer sensitive data such as personal user profiles, login passwords, and credit card information.. 46

47. URL A URL (Uniform Resource Locator) is a subset of the URI (Uniform Resource Identifier) that specifies where an identified resource is available on the Internet and the mechanism for retrieving it. A URL is often called a Web address. Every Web page has a globally unique URL. Just as a street address is used to locate a household in the real world, a Web address is used to locate a Web page on the World Wide Web, which holds billions of Web pages. Without a URL, Web clients would not be able to reach a Web server or the desired resources on the Web server. Without URLs, the Web resources could not be interlinked to form the Web. 47

48. URL Syntax Proctocol://hostname[:port]/filepathname?query_string#anchor Protocol specifies the transport protocol between the client and the server. Typical examples include HTTP, HTTPS, FTP, and MMS. The hostname or IP address specifies the Web server to be reached. Sometimes, before the host name, there is a user name and a password. The port number is optional. When the option is omitted, the default port for the protocol is used. The file path indicates the directory and file name of a resource on the Web server. Sometimes, the file path is an alias instead of a real directory or a real file name. The query string is optional and is one way to pass parameters to a script on the Web server. 48

49. HTML HTML (Hypertext Markup Language) is the main language for creating Web pages and is the source code for most Web pages. Similar to a Word document, HTML contains contents, a layout, and formatting information. When a Web page is loaded into a Web browser, the Web browser interprets the HTML code and displays the Web page the way the Web designer intended it to look. As a markup language, HTML is essentially plain text marked by a set of tags, such as head, body, table, center, and fonts. 49

50. HTML basic Syntax: <html> <head> <title> Page Title </title> </head> <body> <h1> My First Heading </h1> <p> My first paragraph. </p> </body> </html> 50

51. HTML EDITOR 51

52. The <!DOCTYPE html> declaration defines this document to be HTML5. The <html> element is the root element of an HTML page The <head> element contains meta information about the document. The <title> element specifies a title for the document The <body> element contains the visible page content The <h1> element defines a large heading The <p> element defines a paragraph 52

53. 53

54. HTML Tags: HTML tags are element names surrounded by angle brackets: < tagname > content goes here... </ tagname > HTML tags normally come  in pairs  like <p> and </p> The first tag in a pair is the  start tag (opening tag),  the second tag is the  end tag (closing tag). The end tag is written like the start tag, but with a  forward slash  inserted before the tag name. 54

55. Version Year HTML 1991 HTML 2.0 1995 HTML 3.2 1997 HTML 4.01 1999 XHTML 2000 HTML5 2014 55 HTML Versions: Since the early days of the web, there have been many versions of HTML:

56. HTML Editor: Web pages can be created and modified by using professional HTML editors. However, for learning HTML we recommend a simple text editor like Notepad (PC) or TextEdit (Mac). We believe using a simple text editor is a good way to learn HTML. Follow the four steps below to create your first web page with Notepad or TextEdit . 56

57. HTML Editor – Step 1 - Open Notepad (PC) : Windows 8 or later: Open the  Start Screen  (the window symbol at the bottom left on your screen). Type  Notepad . Windows 7 or earlier: Open  Start  >  Programs >   Accessories >   Notepad   57

58. HTML Editor – Step 2 - Write Some HTML : Write or copy some HTML into Notepad. <!DOCTYPE html> <html> <body> <h1> My First Heading </h1> <p> My first paragraph. </p> </body> </html> 58

59. Server-Side Technology Web application servers host the Web sites that you read and serve the data for other Web applications to use. They are responsible for accepting HTTP requests from clients and serving clients with HTTP responses. Since they comply with HTTP specifications, Web application servers know how to communicate with Web clients. Web application servers are also containers that allow certain scripts such as JSP ( JavaServer Pages), Java Servlet , and ASP.NET to run inside. 59

60. Server-Side Technology - con Examples of Web application servers include the following: Apache Web Server and Tomcat from the Apache Software Foundation: Apache is an open-source Web server characterized by simple, fast, and stable performance. IIS (Internet Information Services, formerly Internet Information Server), from Microsoft: is a Web server application for use with Microsoft Windows . 60

61. Client-Side Technology Web clients include a variety of programs and applications that can run inside or outside the browser, including desktop applications and mobile applications, which run outside the browser. A Web browser is a software application for retrieving and presenting information resources on the Web. It provides a means for looking at and interacting with the Web. For most users, Web browsers represent the "face" of the Web. Technically, a Web browser is a client that implements HTTP specifications, HTML specifications, and JavaScript specifications, meaning that it knows how to communicate with Web servers, how to display an HTML, and how to interpret and execute JavaScript. 61

62. Web Programming Web scripts run in one of two places, the client side, also called the front-end, or the server side, also called the back-end. Server-side programs execute on the Web server and within the Web application server container. Client-side programs execute on the Web Browser. 62

63. Web Applications can be developed with a variety of options 63

64. Server-Side Programming The main programming languages include: JavaEE (Java Enterprise Edition), Servlet , JSP, and JSF ( JavaServer Faces), technologies of the Java family: These technologies are widely used for developing Web applications. Java is similar to the C++ programming language, ASP.NET, an important part of the Microsoft .NET framework: The .NET framework is a common environment for building, deploying, and running Web services and Web applications. The .NET framework has technologies for both server-side and client/browser-side programming development. ASP.NET has a set of libraries that facilitate users writing ASP.NET Web pages (. aspx ) in C# (a language that is different from C++ and Java though built with similar syntax and semantics to C++ and Java) and VB.NET. 64

65. Client-Side Programming 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. 65

66. Data Exchange Format The data format used for exchanging messages between the server and the client can greatly influence the load to bandwidth and therefore the efficiency of the application. There are three main formats for exchanging data over the Web: XML (Extensible Markup Language) is a markup language that allows you to define your own tags and attributes. XML has many strengths in that it is platform independent because it is a plain text file; it is self-descriptive since its tags and attributes usually have easy-to-understand names; it can be processed automatically, because it is well structured; and it can be validated against its schema. Because of these advantages, XML is probably the most commonly used data exchange format on the Web. However, it also has some disadvantages. It is bulky because it uses tags to delimit the data. And parsing XML (i.e., extracting values from certain nodes in an XML) is not efficient, especially in languages such as JavaScript, the most commonly used scripting language on the Web. 66

67. Data Exchange Format - con JSON (JavaScript Object Notation) is a lightweight computer data interchange format. It is derived from the object literals of JavaScript, as defined in the ECMA (European Computer Manufacturers Association) Script Programming Language Standard. JSON is smaller in size than XML, and it is more efficient to parse in JavaScript where JSON is a native data type. The main application of JSON is in Web application programming, where it serves as an alternative to the XML format. AMF (Action Message Format), developed by Adobe, is a binary format used primarily for exchanging data between Adobe Flex/Flash Web client applications and Web servers. AMF is a native data type in Flex, making it more efficient to process than JSON. Compared with XML, which is a native data type in Flex as well, AMF is much smaller than XML, making AMF more efficient to transfer and process. Although AMF is mostly used in Flex applications, there are implementations of AMF in PHP, Java, and .NET as wells 67

68. Uses XML and JSON to describe the same information concerning the names and hobbies of two students. 68