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.
Overview
Okay, in the main content of Chapter 12 we learned about traversing the DOM and validating forms, Now let's have some fun! Select a jQuery plugins. Students will select a jQuery plugin from the Internet and incorporate it into his/her website. Code and items covered in the text or in the class samples may not be used.
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 12 - jQuery
Note: The above example is to view how a plugin could be implemented. Each student will use a plugin of his/her choosing. No student may use the one incorporated in this video.
Specifics
- Make a copy of the JSChapter10 and rename it JSChapter12. This week's work will be done using the files in this folder.
- Make a copy of TouchMobile.htm/l and name it jQuery.htm/l. Delete the contents from the main area since it will be replaced by this week's work.
- Search the Internet for a jQuery plugin that interests you. Using a plugin may take a little research on your part in terms of how the plugin operates and the possible modifications. At this point in the course, it is expected that this would be part of the natural progression for students. Students are NOT expected to create their own unique plugin, rather implement one development by someone else.
Possible resources include:
- jQuery Plugin Library: http://plugins.jquery.com/
- iQueryUI http://jqueryui.com/ (Not sure if interactions, widgets, and effects would technically be categorized as plugins but they are acceptable for this assignment)
- Best jQuery Plugins http://www.myjqueryplugins.com/
- CAVEAT:
- It may be hard to decide on which plugin 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 plugin completely on their own. Since there is a plethora of plugins, 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.
- Change the content of the plug in. (Example: Change images, modify the text, change the labels, update the navigation, and so on). There must be a minimum of three changes.
- A CDN must be used instead of downloading and storing the jquery-#.##.#.js file on our server. See video under Tutorials in this week's Course Content as well as pp. 815-816 in the text.
Requirements for this assignment
- Access the jquery ,js file using a CDN (not stored locally on our server)
- In the main content area of jQuery.htm/l
- Enter the name of the plugin and a short description.
- Below that provide a working example of the plugin with your personalizations and customizations.
- Below the plugin enter the following
- Working link to the jQuery download page. The URL must be displayed on the screen and the link must open in a new page/tab.
- List of the three or more changes to the CSS file
- List of the three or more customizations/personalizations of the plugin
Information as displayed on the sample page.
Name of Plugin: Sortable
Description: Sort/drag items from one list into another and vice versa
Download Site: http://jqueryui.com/sortable/
Changes to CSS File:
- Changed font for buttons to Arial
- Increased the width of the button
- Changed button colors
Changes to Plugin
- Customized to make into a ToDo list
- Added column headings
- Added buttons
- Changed text/formatting on existing buttons
- Changed default so there were no buttons in the right column
In CSP.js
In jqueryPlugin.js