Geography 455 Web GIS: Web GIS Lab 4

Goal and Background

The goal of this lab was to introduce us to the languages that required when creating a Web GIS application with the ArcGIS API for JavaScript. We learned the syntax and basic methods of Hypertext Markup language (HTML), cascading style sheets (CSS), and JavaScript. These langauges are commonly used in the development of of webpages. The overall goal was that by the end of the lab we would be able to create a basic website on our own from scratch using these languages.

Methods

Part 1 Developing a web page using HTML tags

At the beginning of the lab we were given the following scenario by Dr. Wilson.

"You have spent a year working with Virtual Geospatial Analytics and you have gained enough experience including liquid capital and are at the brink of setting up your own geospatial company. Every company needs a website through which its services can be disseminated to its customers. In this lab, you will develop a basic website that will be improved upon and later used by your geospatial company. The basic website should contain the following:"

The name of your proposed company and other relevant information.
Company Logo
Links to resources that will be useful to your end-users.
Link to the Web GIS application you developed in Lab 3.
A form that will enable end-users to comment on the usability of your website and company services.
Pictures and images that are of importance to your proposed company.

The first part was to get us familiar with using HTML and writing the basic text, using tags we learned in class, that would become our homepage of our website. The first step is open Notepad ++ which is the software that all the coding for the website is written in. In the very first line of the code you have to tell the software that this is an HTML code. We then used some of the tags we learned in class to create the header for the webpage. Then we inserted a div and labeled this section of code header. This id will be used with the CSS later on. Then 4 lines of text were added for title, class, department, and University. All of this text will be displayed in the header and ordered by h1 through h3 which tells the program how big the text should be. We then added two more lines after a div one was italicized or emphasized and the other is bold. Figure 1 the what the code actually looks like for what I am describing. The resulting web page is Figure 2.

Figure 1 The basic HTML code for the header and first portions of my website.

Figure 2 This is the resulting web page for the code in Figure 1.

We then added a list under the bold text "These are my hobbies". We also added a comment above the list which is used to describe what is going on in the script for someone who is reading it. This text is not read buy the software as part of the code. Figure 3 is what the code looks like when you add a list to the code along with that comment.

Figure 3 This is the code for an unsorted list in a web page as well as adding a comment in the HTML code.

Showing credits or putting links in the text of a webpage is pretty common and that is what we learned to do next. In order to do this a href tag is used which allows you to highlight the text in your website you want linked and also attach the link to that text. Basically this allows the user to click linked words on your webpage and it opens the intended link. Figure 4 is the code for this tag. Figure 5 is what the webpage looks like now with the list and credits added to it.

Figure 4 This is the HTML for adding credits with links to your web page.

Figure 5 This is the the web page with the list and credits added to it. Still very plain.

Part 2 Styling your web page with the use of CSS

The web page is very plain and has no color right now it is just text. CSS is where we make changes to the color if the webpage. In order to this we opened a new sheet in Notepad ++ and saved it as a CSS file. At the top of the code we entered a comment just saying what this document is for. Figure 6 is what it looks like when changes are made in the style of the webpage. The blue text corresponds to the section of the web page the style applies to. This is where the ids in the HTML code come into play. This CSS file is referenced by the HTML code. Figure 7 shows the code in the CSS to make style changes. In the CSS file we set the style for the body, wrapper, header, sidebar, image borders and footer. Any id can be added in the HTML to style any portion of the web page a certain way and the CSS is where you tell the web page how it should look.

Figure 6 This is the webpage after some changes are made in the CSS file with the colors.

Figure 7 This is what the CSS file looks like where you change the style of different chunks of the website under the id from the HTML file.

We then added an image to the web page. As well used the code for creating a link. We created a web app in Lab 3 and want to put a link to it in our web page. In order to insert an image,back in HTML, we use the img tag and inside that we put src= which is where the file name is pasted. The webpage then grabs the image from the file location and displays it. Again like earlier we used the href to highlight a few words which are linked to the web web from lab 3. This allows the website user to click on the words and the map is opened. Figure 8 the image we coded in and the link in a sentence to open the web map.

Figure 8 This is a screenshot image of the web map created in lab 3 which we brought into the webpage. The link to the application is also added in text.

Next was to enter a results box into the web page. In order to this we enter a new id in the HTML and called resultsbox. Then in the CSS file we edited the style so we had a box above our image (Figure 9) where comments will go later on in the lab.

Figure 9 This is the results box which we later wrote the code for in JavaScript.

Part 3 Introduction to JavaScript

Part is all about how to use JavaScript. JavaScript is what will give the results box created in HTML and CSS its functionality. Again we add a blank sheet to Notepad ++ and save it as a .js file. Figure 10 is what the code looks like that makes the results box function. In the first line when it says function we are telling the webpage what this script is for. It is for writing results in the box we created. Basically what is happening in that code is that whatever gets submitted into the input box will show up in the results box on the page and a lot of details of exactly how the results should show up on the page. Just like with the CSS sheet we have to reference the JS file in the HTML code (Figure 11).

Figure 11 This is the JavaScript code that gives the results box its functionality. Without this code it would not work.

Figure 12 In order for the JS or CSS codes to work they need to be referenced in the HTML code. This is how that is done.

Part 4 Building a customized webpage

The last part of the lab is where we got to create our own webpage using the skills we learned in parts 1-3. We were given the following scenario by Dr. Wilson.

You have just started a company that provides Web GIS solutions to customers in a county and state of your choice. One of the most important method of disseminating your company’s services to existing and prospective customers is through a website. You will develop a webpage with the following features.

The name of your proposed company and other relevant information.
Company Logo.
Links to resources that will be useful to your end-users.
Links to the Web GIS application you developed in Lab 3 and two non-secured Web GIS applications from Esri JavaScript website.
An ordered list of six services that your company will be delivering. These services should be highlighted with a catchy color other than black.
A form that will enable end-users to search your website and company services.
At least two pictures that are of importance to your proposed company.

Figure 13 is my customized webpage. Figures 14,15 and 16 are the code files which make up the website.