Weekly Assignment

CS2513: Client-Side Programming
CSP10: Chapter 10 - Touchscreen and Mobile Devices

Objective:

Integrate mouse, touch, and pointer events into a web app
Obtain and work with a user’s geolocation information
Optimize a mobile web app to accommodate the common constraints experienced by mobile users

Points

Full Credit: 40 Points
Late/Resubmit Credit: 36 Points

Situation

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

Specifications

Code for this assignment and future assignments may not be minified.
Any code that is minified will not be considered when grading which could result in a 0 for the assignment.
Grading requires that the code can easily be read.

Hands-on Projects

Required Projects

Hands-on Project 10-1 (p. 730)
Hands-on Project 10-5 (p. 737)
Project 10-3 (p. 735) and Project 10-4( p,737) will need to be completed in order to do Project 7-5 but only the URL for 10-5 will be submitted for grading.

Errata for 10-3:
- HO 10-3, p. 736 # 6 provides the following code
  <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true&callback=geoTest"></script>
- Perhaps the code in the api has changed, but this callback now causes an error and a map of the current location will not load.
- Possible solution:
  - Delete the code in green (the callback to geotest)
  - Add an event listener/attach event to call geotest when the page loads.
    Be sure to test the page so that the map of the current location displays and well as the location when the buttons are clicked (Beijing, Paris, Rio). Other code "may" need to be added.
Supplement for 10-4:
- HO 10-4, p.737, #9
- The instructions state "Geocode a point in downtown Beijing China and then save the coordinates... Repeat for a point in downtown Paris, France, and a point in downtown Rio de Janeiro, Brazil"
- Page 713 indicates that there are many free web services that allow you to geocode an address. To save sometime you are welcome to use one of the following (As with any website, use at your own risk):
  - GPS Visualizer http://www.gpsvisualizer.com/geocoding.html (limited number of uses per day)
  - Bing Maps http://www.bing.com/maps/ (Lists the latitude and longitude in the left side bar under the city name)
  - worldKit Decoder http://worldkit.org/geocoder

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.

JavaScript(6e) Hands-on Projects: Chapter 10

Website Project

Overview

Depending on the device and browser users will select text to be highlighted by touching/pointing, double touching/pointing, clicking, or dragging. At the completion of the gesture, all instances of that text (withing a specified area) will be highlighted in yellow. No additional action is required. The matches will be case sensitive. There will also be a clear button which when touched or clicked will remove all of the highlighting.

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 10-TouchScreens and Mobile Devices

The video was done on a Toshiba laptop with Windows 10 and touch screen capabilities. Unfortunately there is no visual representation of the actual touches. Also on one or more of the browsers you may see the insertion point. The mouse was not used, it was all done with touch. Although this was tested, on an iPad, iPhone, Lenovo Tablet, and iMac videos of those actions have not been included in the video.

Disclaimer: http://whichbrowser.net was used to identify the browsers in the video. It will be obvious that the site has some formatting issues, but for just a quick look at the current browser it works fine.

Specifics

This week's work will required testing for touch, pointer, and mouse gestures. If you do not have a mobile device that uses a touch screen (phone, tablet, laptop) the computers in the SCC are touch screen and you are welcome to use those. I do have a tablet that uses a pointer, you are welcome to stop by during office hours if you wish. If you would like me to run a quick check for you on my tablet, email me the URL. I will not troubleshoot, just tell you if it works or not. Allow 24 hours for a response. Emailing me late Saturday or Sunday will not be sufficient turn-around time.

Make a copy of the JSChapter09 and rename it JSChapter10. This week's work will be done using the files in this folder.

Make a copy of state.htm/l and name it touch.htm/l. Delete the contents from the main area since it will be replaced by this week's work.

Page Content

In the main content area create a <div> area with an unique id. This will be the area targeted for the highlighting actions. In the video there is a border around the div area. This is for reference only and does not need to be included in your site. With that being said, limit the height and width of the div to the minimum required for the content. Be sure to check on more than one device. If the user uses a gesture in a blank area of the div, strange things may happen.

Write a minimum of three paragraphs on mouse, touch, and pointer events (three paragraphs total not three on each topic). Each paragraph must a minimum of three sentences. Remember that information on the Internet cannot be copy/pasted. The information must be in your own words.

In CSP.js

Update the top and bottom navigation such that the generic name of CH 10 is replaced by Touch and the corresponding links will link to the new page, touch.htm/l.

At the top of the code (just below the initial comments) add a comment something similar to

/* ~~~~~~~~~~~ Chapter 10: Programming for Touchscreen and Mobile Devices~~~~~~~~~~~~
The JavaScript code is located in touch.js

In touch.js

There are other ways of accomplishing this but one is as follows:

retrieve the selected text string and assign it to a variable (maybe selectedText)

modify the string so that is styled with a class (Hint: modifiedText = "<span class='highlight'>" + selectedText + "</span>";)

replace() all instances of selectedText with modifiedText

When the web page is reloaded, the highlighting will no longer appear on the web page. Knowing this will make the code in the clear highlighting function very short - one line of code.

Include code for mouse, touch, pointer, and Microsoft pointer gestures

Think about which event would be most logical for each variation (example: touchstart? touchmove? touchend?) Create the event listeners accordingly. Be sure to include mouse, touch, pointer, and the prefixed pointer for Internet Explorer 10 and Internet ExplorerMobile 10 (p. 697).

The event listeners for the clear button must also include mouse, touch, pointer, and prefixed pointer.

Retrieving the selected text may a bit more involved. One way is to use the getSelection() and createRange() methods. Since those methods have not been specifically covered in this class a little research on the web may be needed.

Another slightly trickier (but very cool!) item will be replacing the selectedText with the modifiedText through out the the totalText

totalText is all of the text within the <div> area.

new RegExp()will be used as the parameter for the .replace() method.(p. 576 contains related information . The example is not the same situation, but it may help)

RegExp()will accept variable names (as opposed to hard coded strings) and will utilize the global property (p. 575) .

Please do not make this harder than it is. No REGEX meta-characters (other than g for global) are required in this code.

Students are welcome to create the touch.js themselves or to download the template and use those as starter file
JS6eAssignmentFiles_Chapter10Touch.zip

Recurring Specifications

Web pages must validate for HTML5 and CSS3 must validate. If errors are generated the entire assignment will not be graded.
Hands On Projects
- Pages must validate for CSS3 and HTML5
- Comments in the HTML code must be updated to include the student name and date
- Additional comments, meta tags, and documentation are not required.
- Students are not required to move in-line JavaScript code to a separate .js file in the Hands-on Projects.
Personal Website
- All pages in the site must contain the same header, footer, and navigation.
- All pages in the site must be formatted with CSS so they are consistent with other pages in the site and professional in appearance.
- All formatting must be done using an external style sheet.
- The function/s are to be located in a .js file which is linked to the web page. No in-line JavaScript is allowed.
- Required and appropriate documentation and comments must be included for all HTML, CSS, and JS files
- Tables may NOT be used unless otherwise stated.
- Meta tags, date last modified, and OCCC disclaimer, as described in Class Programming Standards must be included.
- The navigation bar for all pages in the site must be updated to include working links for all of the pages that have been created thus far.

Assignment Submission

Upload all three folders (two [2] for the hands-on projects and one [1] for JSChapter##) to your apollo1 account.
Note: ## is to be replaced by the two digit chapter number - Example: 01, 02, 11, 12.
View the web pages in Chrome, Firefox and, if possible, Safari and Internet Explorer
Re-validate (HTML5 and CSS3) and double check to make sure all items are visible from all computers. (Reminder: When grading, the Validation tool in Chrome and/or FireFox's Web Developer Tool Bar is used. All pages MUST validate using this method.
Submit the URLs for all three items in the LMS.
Submission links must open web page in a new window (not inside of the LMS) and display the page.
Assignments not meeting the previous requirements (opening in a new window and HTML5/CSS3 Validation) cannot be graded.
If it is still within the late/resubmit period, the assignments can be resubmitted (10% penalty). If it is after the final deadline, the work can no longer be submitted which could result in a zero for the assignment.

CS2513: Client-Side Programming CSP10: Chapter 10 - Touchscreen and Mobile Devices