The objective of this lab was to introduce us to languages including JavaScript in order to give us a better understanding of how to develop Web GIS applications using the ArcGIS API for JavaScript. Not only were students exposed to the basic coding techniques and syntax of HTML (hypertext markup language) and JavaScript but also CSS (cascading style sheets). The overall goal of this lab was to give us the ability to develop our own website using all three languages from scratch.
Methods
Part 1: Developing a Web Page Using HTML Tags
In this first part of the lab we used Notepad++ to write basic HTML tags in order to introduce our web page with some basic information. Notepad++ is a text editor which is used for coding and editing various script languages including HTML, JavaScript and more. The first part of our code (Fig. 1: left) and the output (Fig. 1: right) defined the script as HTML code as well as created a set of three headers. Every additional header from the first one is smaller than the next because of their hierarchical nature.
(Fig. 1) This image shows the first set of code we created on the left and the output of this code in a web browser on the right. |
(Fig. 2) On the left is the code used to create the output HTML page on the right. |
Once the base of the webpage is created we created the CSS to stylize it. To do this we again used Notepad++ but created a new document which we titled "overall design" in order to keep track of what the purpose of each text file was. We started out buy giving the body a background color as well as defining the font for the webpage text. Then we adjusted the wrapper and header. After the CSS file has been created the next step is to link it to the HTML file created in Part 1. Once this is done we can see the results of the styling code in the HTML code (Fig. 3). We are then able to continue to edit the CSS by adjusting the settings of the footer and sidebar.
The next thing we can do to improve our webpage is adding forms to the HTML code. To do this we simply use the <form> tag and specifying the labels for the input value and the type of information to be inputted into the form field. The code for this step can be seen in Fig. 4 on the left and the output can be seen in Fig. 4 on the right.
(Fig. 4) On the left hand side of this image the coding used to create the form field can be seen while the result of the code can be seen on the webpage on the right. |
(Fig. 5) This image shows the complete list of code for the CSS. |
In part 3 of this lab we developed a simple way to fix the results box which was not formatted correctly in step 2. To do this we created a new Notepad++ file and declared the JavaScript language by applying the function of write results. The writeResults function in JavaScript gives a function a definition or parameter named a result. Then the variables which are declared and the arguments are executed by the function and are written within the { curly brackets }. We then wrote out our code and added comments to describe each step so if we reviewed it later we would understand our process. The Code for this process can be seen in Fig. 6. The final step in this process was to link the JavaScript file to the original HTML document we created in step 1 to include the code of the JavaScript file.
(Fig. 6) The screen on the left shows the working HTML code used to produce the webpage and the image on the right displays the JavaScript which was created and linked to the HTML code. |
The ultimate goal of this lab was for us to be able to create our own customized webpage. After being given the following scenario:
"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. DR. CYRIL WILSON UNIVERSITY OF WISCONSIN-EAU CLAIRE 28
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."
The result of this portion of the lab and the final goal can be seen in the image below along with the code which was used to create it.
NOTE: I did have some fun with this activity and it is a bit silly. I did that by choosing a fun design and the idea, the skills I learned really stuck with me.
(Fig. 7) The webpage I created from scratch using the skills I learned throughout this lab exercise. |
The UWEC logo was obtained from the UW-Eau Claire website and part of the codes which were used in developing the applications were from Sylvia Richardson of Girl Develop It via Github (2015).
No comments:
Post a Comment