Assignments will consist of two parts: Hands-on Projects and an ongoing individual case project.
The Hands On Projects will from the end of each chapter. Although it is recommended that students complete all of the projects only a limited number will be submitted for grading.
In addition, students will create a comprehensive web site that will be enhanced and modified throughout the class. Please take this very seriously not only for the purposes of this assignment/class but also for possible inclusion in your web work portfolio. This week the emphasis will be on creation of the site including styles. navigation, and documentation. All pages must be adequately documented and validate. Be sure to read and adhere to the Class Coding Standards
Hands-on Projects
Required Projects
Follow the instructions in the text and as outlined in the General Instructions in the Chapter 1 Assignment. The data files which accompany the text will be required for these assignments. They can be downloaded from http://academic.cengage.com/resource_uploads/downloads/1305078446_432240.zip . Within the downloaded files there will be a folder for each project.
Need a Visual Reference?
The following are videos are of all of the Hands-on projects for this chapter, not just the ones required for this assignment. If you see something that is contradictory to our class assignments, please ask. Do not assume that since it is on the video that it is 100% correct. Please note that the hands-on projects must validate for HTML5 and CSS3.
Website Project
Overview
An AJAX component of your selection will be added to your website. Code from the Chapter, the Hands-On, or any class examples may not be used. This must be something new and original. Finding an API with sufficient documentation was not as simple (In My Humble Opinion) as the text makes it seem. So start early... do not... I repeat DO NOT...wait until the weekend to start this project. While this assignment has a late due date, it is only a couple of days past the full credit date, not the usual week. This is because of the last test and the end of the semester.
Need a Visual Reference?
The following video displays the basic functionality of the assignment and not the entire web page. Each student's site will be tailored to meet their talents and style. The following is just the most basic. If you see something that is contradictory to our class assignments, please ask. Do not assume that since it is on the video that it is 100% correct. All pages and items must validate for HTML5 and CSS3.
JavaScript(6e) Personal Website: Chapter 11-AJAXSpecifics
- Make a copy of the JSChapter12 and rename it JSChapter11. This week's work will be done using the files in this folder.
- Make a copy of jquery.htm/l and name it AJAX.htm/l. Delete the contents from the main area since it will be replaced by this week's work.
- The assignment will follow along the lines of the Individual Case Project located on page 811 of the text. For your convenience the text states:
Identify data provided by an Ajax service that you’d like to include in your personal website. You should choose a web service other than those used in the chapter and the Hands- on Projects. If you have an idea for data you’d like to access but are unsure what service might provide that data, perform a web search on a description of the data plus “ API.” For instance, if you were looking for a source of tide tables, you might search for “ tide tables API.” Use the documentation for the web service to construct an Ajax request and to display selected data from the service on your website. Note that if you don’t have experience with writing PHP, you may need to examine a number of potential APIs to identify one that allows JSON- P or CORS requests, which don’t require you to run a proxy.
- CAVEAT:
- It may be hard to decide on which API to choose. It is conceivable that a student spend all week looking for the "PERFECT" one only to find his/herself panicking on Sunday because they have not even started incorporating it into the site.
- RECOMMENDATION:
- Set a date and time by which you will make your selection and then just go with it... do not keep thinking about what might have been..
- NOTICE:
- Students will be responsible for implementing the API completely on their own. Since there is a plethora of APIs, there is no way the SCC staff or I can not the intricacies of all of them. So it will be the student's responsibility to make it work.
- Modification Requirements
- The CSS styles must coordinate with your site. Change a minimum of three styles to accomplish this.
- There must be evidence of AJAX (examples: Choose a city, update the information at set intervals, look up a value)
- Requirements for this assignment
- If you are experienced with php, you may use it in your code. However, you will be responsible for writing and debugging it.
- In the main content area of AJAX.htm/l
- Credit the source of the API - who is providing the information
- Then in a special assignment section include
- The download site for the API including the URL
- The data (by name) that has been retrieved from the site and used in the web page
- The format of the data (Example: XML, JSON, JSON-P)
- Statement on the use of a proxy server
Information as displayed on the sample page.
Assignment Information:
- Source: Weather API from Weather Underground
URL: http://www.wunderground.com/weather/api/d/docs- Data Features/Fields/Values Used in Demonstration:
webcams: City, Country, CURRENTIMAGEURL, and CAMURL- Format of Response Data Format: JSONP
- Proxy Required: No
In CSP.js
- Update the top and bottom navigation such that the generic name of CH 11 is replaced by AJAX and the corresponding links will link to the new page, jQuery.htm/l.
- At the top of the code (just below the initial comments) add a comment something similar to
/* ~~~~~~~~~~~ Chapter 11: Updating Web Pages with AJAX~~~~~~~~~~~~
The JavaScript code is located in the ajax.js */In ajax.js
- Include any code needed for this week's assignment