filltpAss #Lab #Proj #

Chapter.

ASSIGNMENT CPMS 218 with Publishing on the WEB I Fall 19

Due Points

All case study projects should be submitted according to 1_Project Submittals.doc posted at http://classes.jgspectrum.com/classes/218_F19/Guidelines/. The assignments are posted at http://classes.jgspectrum.com/classes/218_F19/Assignment.doc/. Friendly reminder notes:1. You have to read a chapter in the textbook (and the Lecture Notes if they are

available), which will be covered at the next class meeting. After each lecture/lab session you have to study first the Lecture Notes and the corresponding sections in the textbook one more time.

2. Moreover, you need to do the Hands-On Practice (HOP) exercises listed by your instructor at home. Your work must be saved on your USB drive and you should be ready to show exercises to your professor at the very beginning of class.

3. Circle each HTML, CSS code fragment and each web page screenshot in red with the number corresponding to the specification number of the Case Study task (for example T2-4a which stand for Task 2, item 4a).

4. Each time when we finish a chapter go through a review question section and know all answers to questions.

5. Remember: one folder per group, two reports, one USB with two directories. Your USB project directory and a file should be named as follows:ch#+P# or L#+ F19+AssignmentTitle+yourLastName. For example: ch2+P1+F17+Prime_Properties+yourLastName

6. If you want to capture the screen use ALT + PrntScrn keys, and paste into your word doc. using CTRL + V.

7. Tip: If you have a problem to save a file from Firefox or Chrome use Internet Explorer and right click on the file and select “save target as”.

8. Validate your HTML website using http://validator.w3.org – Markup Validation Service.

9. Validate your CSS with HTML or CSS documents using http://jigsaw.w3.org/css-validator/.

10. Validate your web site using web accessibility evaluation tool http://wave.webaim.org/ or http://achecker.ca/checker/index.php.

11. How to change Screen Resolution & Display settings in Windows 10 - http://www.thewindowsclub.com/change-screen-resolution-windows-10-2

12. Resize the window: Windows Developer bar => Resize => View Responsive Layout.

Ch1 1. Be prepared to give me your partner’s name and sit next to him/her on Thursday.2. Study chapter 1 first from the Lecture Notes and then the textbook.

8-29Thurs

Ch1 - 2

1. Study the Summary section and the Review Questions section of chapter 1. Review questions and know all the answers. You don’t need to submit it.

2. Be prepared for a closed book/notes (multiple choice) quiz (chapter 1).3. Chapter 2: Do Hands-On Practice (HOP) 2.2 - 2.4 and read all corresponding

sections in the textbook up to section 2.12 (up to p.40 at least, better to read all chapter). You should be ready to show HOP 2.2 – 2.4 exercises (saved on your USB flash drive or e-mailed to yourself) to your professor at the very beginning of class. Your any startup templates are available at http://classes.jgspectrum.com/classes/218_F19/examples/. For example go to ch2 and right click on template.html in Chrome or Mozilla. Select “Save link as..” to download the code to your computer. Open the Notepad editor and drag and drop your template.html to the Notepad.

9-3Tue

JG CMPS 218 9/15/19 1

Lab2.1in class

Hands-On Practice (HOP) 2.5 - 2.8. (p.39 – 45) 9-3

Home Ch2 Study chapter 2 (Lecture Notes and the textbook) and practice HOP 2.9-2.12 and bring it to class on your USB drive.

9-5 1

Lab2.2 Hands-On Practice (HOP) 2.13 - 2.15 9-5 1#1 PROJ_ch2:

Ch2-Ch3

1. Study chapter 2 first from the Lecture Notes and then the textbook. Study the Summary section and the Review Questions section of chapter 2. Review questions and know all answers. Be prepared to take a chapter 2 quiz.

2. Hands-On-Practice (HOP): I posted all needed start up files at http://classes.jgspectrum.com/classes/218_F19/examples/. For those who haven’t finished the lab assignment from chapter 2 in class please provide screenshots (in your project folder) of a Mozilla Firefox output and a code for each HOP you haven’t completed in class. Please number each HOP per one page with your name. Include the Mozilla Firefox output and the corresponding code together, one per word doc page. Use a page divider separate two students HOPS. Using a marker highlight the new key component/attributes (the textbook usually shows it in blue) for any output and any code. Include all the above HOPs per student in your print project and on your USB drive as well.

3. Study chapter 3 at least up to p.81 and practice HOP 3.1 – 3.3 (bring it to your class on your USB drive).

4. Case Study – Ch2. Create web pages for the Path of Light Yoga Studio according to the description on p.77-80. Turn in your project according to 1_Project Submittal.doc located at http://classes.jgspectrum.com/classes/218_F19/Guidelines/.

A. Remember to include a cover page (remember to include a cover page (see 1_Cover-Page+Proj-Grade-Rubric.docx),

B. a site map (p.77 of the textbook), a wireframe p.77C. a website file organization on a USB drive D. screenshots of outputs including html validation screenshot for each

webpage and a corresponding code place next to the output. Copy output, code, validator screenshots (of the single web page) into one word page.

E. Remember to enter the comment at the beginning of your home (index.html) page (read paragraph starting from “At the beginning” on p.3 of 1_Project Submittal.doc) - otherwise you will lose 10% of your project grade.

<!--*place in your main source code as first few lines********* Name: Alex Berdkowski (main contributor), John Smith* Class: CPMS 218, student group ID:* Assignment #: PROJ_ch2: Case Study: Path of Light Yoga Studio* Date Due: 9/10/19

* Problem: Create web pages for the Path of Light Yoga Studio according to the description on p.77-80.***************************************************** - - >

F. Circle each HTML, CSS code fragment and each web page screenshot in red with the number corresponding to the specification number of the Case Study task. Task 2 p. 79 item 4c should be described T2-4c. See 1_Circle-References+Project-ch2-Example.docx. The penalty for the partial absence of circles with detail reference numbers is 10%.

G. Include TEST TABLE 2 with all headers and all hyperlinks you tested

9-10 2

JG CMPS 218 9/15/19 2

(once again see my templates 1_Project_Submittals-TEST_PLAN+with_screenshots_ch2P.docx or a generic template 1_Project_Submittals-TEST_PLAN+RESULTS.docx). Show that you tested all hyperlinks with either Mozilla Firefox or Chrome.a. Make sure you put 5 hyperlinks in Test TABLE 2 (Home, Classes,

Schedule, Contact and the e-mail) for each webpage. The total test items in your test table is 5 hyperlinks x (2 different pages) = 10.For example: Schedule text link => not implementedContact text link => not implementedAt the footer of your Web pages put two emails, the 1st one should be the one who contributed the most to the project. Each alternate week the email’s order should be changed.

H. Your USB project directory and a file should be named as follows:ch#+P#+F19+ProjectName+Your_Initial_First_Name.Last_Name+. Your_Initial_First_Name.Last_Name.docx. A project directory should include all website files: index.html etc., your project document and the HOP files for each student - if you missed HOPs in class.

I. Each student must code the Path of Light Yoga Studio website but place only one implementation in the project report.

Your group transparent folder should include a hard copy of the output and code screenshots. Attach firmly your USB drive to your folder.

Lab3.1 Ch3 In class: Hands-On Practice (HOP) 3.4. Use Notepad++ to all next HOPs. Download it from https://notepad-plus-plus.org/download/ (current version) by clicking the DOWNLOAD button for 32 bit x86. While you get the file on your computer click it on follow the instructions. You can download from my class website as well. The location is the same as your start files are.

9/10

Home Ch3 Learn chapter 3, practice HOP 3.5-3.8 and bring it to class on your USB drive (and e-mail to yourself or to your cloud drive).

9/12

Lab3.2 Hands-On Practice (HOP) 3.9 – 3.11 9/12 1#2PROJ _ch3:

Ch2-Ch3

1. Study chapter 3 first from the Lecture Notes and then the textbook. Study the Summary section and the Review Questions section of chapter 3. Review questions and know all answers. Be prepared to take a chapter 3 quiz.

2. Hands-On-Practice (HOP): I posted all needed start up files at http://classes.jgspectrum.com/classes/218_F19/examples/. For those who haven’t finished the lab assignment from chapter 3 in class please provide screenshots (in your project folder) of a Mozilla Firefox output and a code for each HOP you haven’t completed in class. Please number each HOP per one page with your name. Include the Mozilla Firefox output and the corresponding code together, one per word doc page. Use a page divider separate two students HOPS. Using a marker highlight the new key component/attributes (the textbook usually shows it in blue) for any output and any code. Include all the above HOPs in your print project per student and on your USB drive as well.

3. Study chapter 4 at least up to p.151 and practice HOP 4.1 – 4.5 (bring it to your class on your USB drive).

4. Case Study – Ch3. Goal: create a new version of Project ch2 that uses an external CSS styles to configure text and color. Create web pages for the Path of Light Yoga Studio according to the description on p.130-133. Turn in your project according to 1_Project Submittal.doc located at http://classes.jgspectrum.com/classes/218_F19/Guidelines/.

A. Remember to include a cover page (remember to include a cover page (see 1_Cover-Page+Proj-Grade-Rubric.docx),

B. a site map (p.77 of the textbook), a wireframe p.77

9-17 2

JG CMPS 218 9/15/19 3

C. a website file organization on a USB drive D. screenshots of outputs including html validation screenshot for each webpage

and a corresponding code place next to the output. Copy output, code, validator screenshots (of the single web page) into one word page.a. Remember to enter the comment at the beginning of your home

(index.html) page (read paragraph starting from “At the beginning” on p.3 of 1_Project Submittal.doc) - otherwise you will lose 10% of your project grade.<!--*place in your main source code as first few lines********* Name: Alex Berdkowski (main contributor), John Smith* Class: CPMS 218, student group ID:* Assignment #: PROJ_chx: Case Study: Path of Light Yoga Studio* Date Due: 9/x/19

* Problem: Create web pages for the Path of Light Yoga Studio according to the description on p. p.130-133.***************************************************** - - >

b. Circle each HTML, CSS code fragment and each web page screenshot in red with the number corresponding to the specification number of the Case Study task. Task 2 p. 79 item 4c should be described T2-4c. See 1_Circle-References+Project-ch2-Example.docx. The penalty for the partial absence of circles with detail reference numbers is 10%.

E. Include TEST TABLE with all headers and all hyperlinks you tested (once again see my templates 1_Project_Submittals-TEST_PLAN+with_screenshots_ch2P.docx or a generic template 1_Project_Submittals-TEST_PLAN+RESULTS.docx). Show that you tested all hyperlinks with either Mozilla Firefox or Chrome.a. Make sure you put 5 hyperlinks in Test TABLE 2 (Home, Classes, Schedule,

Contact and the e-mail) for each webpage. The total test items in your test table is 5 hyperlinks x (2 different pages) = 10. Moreover, one more test item is for yoga.css

b. For example test for each page: Schedule text link => not implementedContact text link => not implementedAt the footer of your Web pages put two emails, the 1st one should be the one who contributed the most to the project. Each alternate week the email’s order should be changed.

F. Your USB project directory and a file should be named as follows:ch#+P#+F19+ProjectName+Your_Initial_First_Name.Last_Name+. Your_Initial_First_Name.Last_Name.docx. A project directory should include all website files: index.html etc., your project document and the HOP files for each student - if you missed HOPs in class. Your group transparent folder should include a hard copy of the output and code screenshots. Attach firmly your USB drive to your folder.

G. Each student must code the Path of Light Yoga Studio website but place only one implementation in the project report.

H. Please use a rule: one word page per all screenshots of a single web page. So, have a Firefox output screenshot, code screenshot for Firefox (with circles) and HTML, CSS validation screenshots of the same web page per a word page – added after grading.

JG CMPS 218 9/15/19 4

HOME Ch4 Hands-On Practice (HOP) 4.6 – 4.7. Sept-17

Lab 4.1 Ch2-4 1. Practice HOP 4.8-4.12 and bring it to class on your USB drive (and/or e-mail to yourself).

Sept-19

2

Lab4.2 Ch4 Hands-On Practice (HOP) 4.13 – 4.16.Make changes in your code. Test your web page in a browser and observe what happens in each HOP. Highlights changes in your code.

Sept-19

1

#3PROJ _ch4:

Ch4 - 5

1. Study chapter 4 first from the Lecture Notes and then the textbook. Study the Summary section and the Review Questions section of chapter 4. Review questions and know all answers. Be prepared to take a chapter 4 quiz.

2. Study chapter 5.1 – 5.5 (no HOPs for chapter 5).3. Hands-On-Practice (HOP): For those who haven’t showed the lab assignment

from chapter 4 in class please provide screenshots (in your project folder) of a Mozilla Firefox output and a code for each HOP. Please number each HOP per one page. Include the Mozilla Firefox output and the corresponding code together, one per word doc page. Use a page divider separate two students HOPS. Using a marker highlight the new key component/attributes (the textbook usually shows it in blue) for any output and any code. Moreover, highlight the following, 1. HOP 4.11- 4.12: double values and convert all to negatives values for the

horizontal and vertical offset of the text-shadow and the box-shadow2. HOP 4.13: use opacity = 0.7 3. HOP 4.14: use transparency = 0.84. HOP 4.15: use alpha = 0.75. HOP 4.16: use a different ending color

Include all the above HOPs in your print project and on your USB drive as well.

4. Case Study – Ch4. Goal: Modify the design of the pages and create a new page, the Schedule page. Create web pages for the Path of Light Yoga Studio according to the description on p.198-202. Turn in your project according to 1_Project Submittal.doc located at http://classes.jgspectrum.com/classes/218_F19/Guidelines/.

Remember to include a cover page (remember to include A. a cover page (see 1_Cover-Page+Proj-Grade-Rubric.docx), B. a site map (p.77 of the textbook), a wireframe p.77C. a website file organization on a USB drive D. screenshots of outputs including html validation screenshot for each webpage

and a corresponding code place next to the output. Copy output, code, validator screenshots (of the single web page) into one word page.1. Remember to enter the comment at the beginning of your home

(index.html) page (read paragraph starting from “At the beginning” on p.3 of 1_Project Submittal.doc) - otherwise you will lose 10% of your project grade.<!--*place in your main source code as first few lines********

* Name: Alex Berdkowski (main contributor), John Smith* Class: CPMS 218, student group ID:* Assignment #: PROJ_chx: Case Study: Path of Light Yoga Studio* Date Due: 9/x/19

* Problem: Create web pages for the Path of Light Yoga Studio according to the description on p. p.198-202.***************************************************** - - >2. Circle each HTML, CSS code fragment and each web page screenshot in

red with the number corresponding to the specification number of the Case Study task. Task 2 p. 79 item 4c should be described T2-4c. See

Sept 24

2

JG CMPS 218 9/15/19 5

1_Circle-References+Project-ch2-Example.docx. The penalty for the partial absence of circles with detail reference numbers is 10%.

E. Include TEST TABLE with all headers and all hyperlinks you tested (once again see my templates 1_Project_Submittals-TEST_PLAN+with_screenshots_ch2P.docx or a generic template 1_Project_Submittals-TEST_PLAN+RESULTS.docx). Show that you tested all hyperlinks with either Mozilla Firefox or Chrome.

a. Make sure you put 5 hyperlinks in Test TABLE 2 (Home, Classes, Schedule, Contact and the e-mail) for each webpage. The total test items in your test table is 5 hyperlinks x (3 different pages) = 15. Moreover, one more test item is for yoga.css (added after collection).

b. For example test for each page: Schedule text link => not implemented Home txt link => home pageMenu txt link => Menu pageMusic text link => not implementedContact text link => not implemented

E-mail => popup an e-mail form At the footer of your Web pages put two emails, the 1st one should be the one who contributed the most to the project. Each alternate week the email’s order should be changed.

F. Your USB project directory and a file should be named as follows:ch#+ P#+F19+ProjectName+Your_Initial_First_Name.Last_Name+. Your_Initial_First_Name.Last_Name.docx. A project directory should include all website files: index.html etc., your project document and the HOP files for each student - if you missed HOPs in class. Your group transparent folder should include a hard copy of the output and code screenshots. Attach firmly your USB drive to your folder.

NOTE:For your benefits all students should code all webpages according to the text for the current project and submit only one website. The main responsible student in the current project for each group is a student with ending 1 in class ID. Example: The main responsible student for group 5 is one with ID = 51. The main responsible student for the next project after the current one is one with ID = 52 and we will keep responsibility alternatively.

Extra (10%):Students will include comments for any new (NEW) or modification (MOD) or deletion (DEL) or replacement (REP). Follow the following format for Personal Comments as a proof of understanding the HTML and CSS code.//[date] [your name] [NEW/MOD/DEL/REP] [efected # of lines] [ Task#- item in the text book: if aplied] [short description of the code] Example for HTML: <!-- 09/15/19 JSmith NEW 3L – T4-2: define the text based navigation highlight a new or modified or replaced code in your hard copyhighlight a new or modified or replaced code in your hard copyhighlight a new or modified or replaced code in your hard copy Example for file.css (Task 2 item 2)

/* 09/15/19 JSmith NEW 4L – T2-3: Configure the left column navig area */ nav { text-align: center; float: left; /* T2-3 */ width: 100px; /* T2-3 */

font-weight: bold; /* T2-3 */ padding-top: 10px; /* T2-3 */

JG CMPS 218 9/15/19 6

}HOME Ch5 Study chapter 5 first from the Lecture Notes and then the textbook. Be prepared to

answer questions and be prepared to use TABLE 5.1 for our school website at http://laverne.edu/.

Sept 24

Ass1 Ch5-6 1. Study ch6.1 – 6.9, p.247 - 269.2. Practice HOP 6.2– 6.6 (bring it to class on your USB drive only)3. Hands-on Exercise 1a-c, g p.237-8. Review and evaluate a home page of your

school - http://laverne.edu/. Try to fit all assignment on 2-3 pages individually and turn it in without any binder. Use the Best Practices Checklist (see Table 5.1 p.233 – 234 available at http://terrymorris.net/bestpractices) to evaluate the page. Describe the results for each item.

Please print all your findings (answers) with full checklist items. Copy a checklist with corresponding numbers and subtitles , put in bold all text but your answer shouldn’t be in bold . Type up the assignment on a word document in two column table. The 1st column will have questions in bold only and the 2nd column will have an answer. Use at least a sentence for each item in the table or state N/A (not applicable) for the items below. In addition you may attach an electronic version of it as well on your USB drive.

o You can state N/A for the Page Layout section item 14. Item 13 refers to p.328 <meta name=”viewport” content=…>

o You can omit the Multimedia section if you like. o You can state N/A for last two items of the Functionality

section and items 11-13 of the Accessibility section.o Internal links are related to Laverne websites.

HINT: To validate the ULV web page use the Firefox/Chrome and Web Developer tools as add-ons to Firefox. You will need to use the Web Developer which is a very useful tool.How to install an adds-on for Firefox:Go to the Firefox Add-ons menu (Tools => Adds-on) and search for the Web Developer. Click on the Add to Firefox button and the Software Installation window will appear after the add-on has been downloaded. Click the Install button if it is not installed automatically. Reopen the browser and check Tools => Adds-on if the Web Developer is there. To use it go to the ULV web site and look for the Web Developer icon from the icon bar of the browser.Examples how to find answers for the following sections of Table 5.1:

Navigation => 5 (or Accessibility): right click on ULV web page menu (e.g. Current Students) => select Inspect Element => watch for <ul> and <li>

Color and graphics => 8: use Web Developer => Images=>Display alt Attributes

Functionality => 1, 2: get a partial answer => use Web Developer => Images=>Find Broken Images (others you need to test manually

How to change Screen Resolution & Display settings in Windows 10 - http://www.thewindowsclub.com/change-screen-resolution-windows-10-2 or

Resize the window: Windows Developer => Resize => Resize Window.

Oct 1 1

Lab 6.1 Ch6 In class: Practice HOP 6.7 Oct 1 0.1Home Ch6 Practice HOP 6.8– 6.9 (bring it to class on your USB drive only), and learn ch6

from the Lecture Notes and the textbook.Oct 1 0.2

Lab 6.2 Ch6 In class: Practice HOP 6.10- 6.11. Oct 3 0.2Project 4 /PROJ_ch6:

Ch6-7 1. Study chapter 6 first from the Lecture Notes and then the textbook. Study the Summary section and the Review Questions section of chapter 6. Review questions and know all answers. Be prepared to take a chapter 6 quiz.

Oct 8 2

JG CMPS 218 9/15/19 7

2. Study and learn chapter 7.1 – 7.3 p. 305-320.3. Practice HOP 7.1 – 7.5 (bring it to class on your USB drive). 4. Case Study – Ch6. Goal: Implement a wireframe for a two-column CSS page

layout. Create web pages for the Path of Light Yoga Studio according to the description on p. 299-303. Turn in your project according to 1_Project Submittal.doc located at http://classes.jgspectrum.com/classes/218_F19/Guidelines/. All other requirements are the same as it was for the previous project (Project 3/ch4).

Extra (10%):Students will include comments for any new (NEW) or modification (MOD) or deletion (DEL) or replacement (REP). Follow the following format for Personal Comments as a proof of understanding the HTML and CSS code.//[date] [your name] [NEW/MOD/DEL/REP] [efected # of lines] [ Task#- item in the text book: if aplied] [short description of the code] Example for HTML: <!-- 09/15/19 JSmith NEW 3L – T4-2: define the text based navigation highlight a new or modified or replaced code in your hard copyhighlight a new or modified or replaced code in your hard copyhighlight a new or modified or replaced code in your hard copy Example for file.css (Task 2 item 2)

/* 09/15/19 JSmith NEW 4L – T2-3: Configure the left column navig area */ nav { text-align: center; float: left; /* T2-3 */ width: 100px; /* T2-3 */

font-weight: bold; /* T2-3 */ padding-top: 10px; /* T2-3 */

}Lab7.1 Ch7 Hands-On Practice (HOP) 7.6 (Print display) Oct 8 0.2

HOME Ch7 At home: Study chapter 7 (read pages 326 – 352), Lecture Notes and practice HOP 7.7 – 7.11 and bring it to class on your USB drive.

Oct 10

0.5

Lab7.2 Ch7 HOP 7.12 Oct 10

0.2

Project 5 /#5 PROJ_ch7:

Ch7 1. Study chapter 7 first from the Lecture Notes and then the textbook. Study the Summary section and the Review Questions section of chapter 7. Review questions and know all answers. Be prepared to take a chapter 7 quiz.

2. Hands-On-Practice (HOP): Please provide screenshots (in your project folder) with new CSS properties highlighted for HOP 7.12 if you haven’t finished in class.

3. Case Study – Ch7 Goal: Configure the Path of Light Yoga Studio website according to the description on p.369-372 in such a modern responsive way that will cover a mobile, tablet and desktop display. Turn in your project according to 1_Project Submittal.doc located at http://classes.jgspectrum.com/classes/218_F19/Guidelines/. Provide wireframes for a mobile, tablet and desktop. Moreover, a mobile, tablet and desktop screenshot for each web page – added after grading. All other requirements are the same as it was for the previous project. Each student should implement the Path of Light Yoga Studio website but place in the project report only one implementation.

A. Moreover, include the test TABLE with all headers and all hyperlinks you tested. Make sure you put 5 hyperlinks in Test TABLE 2 (Home, Classes,

Oct 15

2

JG CMPS 218 9/15/19 8

Schedule, Contact and the e-mail) for each webpage. The total test items in your test table is 6 hyperlinks including tel. # (3 different pages) = 18. Moreover, one more test item is for yoga.css. Test your webpages according to the resolutions specified in the last three columns of TABLE 2 of 1_Project_Submittals-TEST_PLAN+RESULTS.docx. Show that you tested all hyperlinks with either Mozilla Firefox or Chrome.

B. Remember: Circle each HTML, CSS code fragment and each web page screenshot in red with the number corresponding to the specification number of the Case Study task.

C. Each student must code the Path of Light Yoga Studio website but place only one implementation in the project report.

D. Upload your project to your web server and then test on your computer and on your smartphone. The URL should be included in your test screenshots on the cover page next to each name.

E. Your web server project directory should be PROJ_ch7 (right click to create it) and a project file should be named as follows: Ch7+P5+F19+Yoga_Studio+yourLastName. Each directory should include all project files (C, D, E added after grading).

Lab7.3 Ch7 Download and install WinSCP if it is not installed => see 1_WinSCP-install+app-setup+dir-setup.docx (or item 1 of FTP_guidelines.doc) at http://classes.jgspectrum.com/classes/218_F19/Guidelines/.

o Copy GL_ed9.zip - (HOP 7.12) from http://classes.jgspectrum.com/classes/218_F19/examples/ => to your desktop and then unzip it.

o Setup WinSCP according to 1_WinSCP-install+app-setup+dir-setup.docx

o Then drag and drop the unzipped file into the server under the directory public_html

o Test the HOP 7.12 website.

Oct 15

Midterm Ch 1 - 7

See the Guide_Midterm.doc on the class website at http://classes.jgspectrum.com/classes/218_F19/Guidelines/.

Oct 17

Home Ch 8 1. Study chapter 8 p. 373 – 384 (or 388), practice HOP 8.1 – 8.3 and bring it to class on your USB drive.

Think about your final project with your partner and be prepared to answer orally questions of Phase 1 in section “3 FINAL PROJECT MILESTONES and REQUIREMENTS” of 1_Project Submittals_Final-Proj.doc posted at http://classes.jgspectrum.com/classes/218_F19/Guidelines/.

Oct 22

Lab8 Hands-On Practice (HOP) 8.4.Using the web developer in Mozilla browser

1. go to CSS -> Edit CSS and change the background color for the table header and every odd row.

2. Go to miscellaneous -> edit HTML and change the width and the border for the table as well

Oct 22

1

HOME Ch8 Study and learn ch8 Lecture Notes/text and be prepared for a test – write a code for a given table. Bring a print card.

Oct 24

1

Ass2 Ch9 Create a Web page as follows: Oct 24

1

JG CMPS 218 9/15/19 9

with the following wireframe:

Title 1 Title 2 Row2.Cells1 & 2

Rows3 & 4.Cell 1Row3.Cell 2

Row4.Cell 2

Row5.Cell 1 Row5.Cell 21. Use embedded CSS style sheets for the table and configure color red, margin

1px, text align center, use a structural pseudo-class that will apply the style to the 1st row to have a dark blue background and to have a gray background of the odd-numbered table rows. In addition, implement your e-mail at the footer with a proper embedded CSS style.

2. Moreover, use in line attributes for the whole table to configure border color green, border 4, align center, 7 pixels of cellpadding and 3 pixels of cellspacing.

3. Highlight in yellow all styles.#6 PROJ_ch8: + Phase 1 - 2

Ch8 1. Review Lecture Notes ch8. Study the Summary section and the Review Questions section of chapter 8. Review questions and know all answers. Be prepared to take a chapter 8 quiz.

2. Study ch9 p.401-421, practice HOP 9.1 – 9.4 and bring it to class on your USB drive.

3. Submit your website proposal according to phase 1 and phase 2 of 1_Project Submittals_Final-Proj.doc (page 7) under section 3. FINAL PROJECT MILESTONES and REQUIREMENTS at http://classes.jgspectrum.com/classes/218_F19/Guidelines/.

a. Phase 1. Conceptualization (6 questions) b. Phase 2. Planning Analysis Sheet (4 items)

Make just one page of a word document with questions/items and your answers in bold. Turn in the word document one per student group with 2 names, circle the leader of the group. Divide the page into two sections with the headers: Phase 1. Conceptualization and Phase 2. Planning Analysis Sheet. Use single-spaced lines and the Times New Roman 12 point type.

Your final project topic for CMPS 218 should be related to “real” business. If you don’t have access to real business without having a website you need to pretend that you are developing the website for the real business which doesn’t have a website.

4. Case Study – Ch8: Configure the Path of Light Yoga Studio website according to the description on p.397-399. Modify the style sheet and the schedule page.

Oct 29

1

1

JG CMPS 218 9/15/19 10

Provide wireframes and schedule web page screenshots for a mobile, tablet and desktop because the changes in the style sheet will effect only the table of the schedule page. Turn in your project according to 1_Project Submittal.doc located http://classes.jgspectrum.com/classes/218_F19/Guidelines/. Your same chapter website (as I said) should be posted and tested on the ULV server at http://students.laverne.edu/~userLogin/CMPS218/PROJ_ch8/ for each student in your group. All other requirements are the same as for the previous project.

a. Each student must code the Path of Light Yoga Studio website but place only one implementation in the project report.

b. Upload your project to your web server and then test on your computer and on your smartphone. The URL should be included in your test screenshots on the cover page next to each name.

c. Your web server project directory should be PROJ_ch8 (right click to create it) and a project file should be named as follows: Ch8+P6+F19+Yoga_Studio+yourLastName. Each directory should include all project files (a, b, c added after grading).

Lab9.1 Ch9 Hands-On Practice (HOP) 9.5 Oct 29

0.2

Home Ch9 1. At home: Study chapter 9 Lecture Notes. Practice HOP 9.6 and bring it to class on your USB drive.

2. Be ready to code the form page with many different form controls. 3. Be ready to code the “Contact Us” page for your final project.

Oct 31

0.2

Lab9.2Ass2

Ch9 1. Use the Opera Mobile Emulator to display the Grid Layout HOP 7.12 from your web server side – enter your website URL. (HOP 7.12 is also available at http://classes.jgspectrum.com/classes/218_F19/examples/ => GL_ed9.zip, unzip it and post on your web server side).

2. From Web Developer in Firefox for the Grid Layout use CSS => Edit CSS to change the code in yellow for CSS

body {font-family: Verdana, Arial, sans-serif; background-color: #3300FF;}header, h1, #wrapper{ margin-top: 0; }#wrapper { background-color: #F4E8BC;

width: 90%;margin: auto;

color: #3300FF; use Outline => Outline Block Level Elements use Information => Display Element Information use Information => Display Division Order use Information => Display Division Dimension use Information => Display id & Class Details

3. Expand the Grid Layout by implementing contact.html. (a) Save index.html as contact.html in the website directory. (b) Then copy your HOP 9.6 form code into the main section by replacing the main section there. (c) Then implement your web page of your Grid Layout with your navigation, your main and footer sections. The main section should include HTML 5 controls as follows:

Feedback Form … Let Us Know What You Think1. Salutation: in the drop down list box (Mr., Mrs., Miss…)2. First Name:3. Last Name:4. E-mail Address:5. Phone Number:

Oct 31

1

JG CMPS 218 9/15/19 11

6. Number: Street Name: Apt #:7. City:8. Zip Code:9. Subject:10. Comments:11. Please check here if you wish to receive an e-mail reply:

Moreover, add for each possible field1. fieldset with legend 2. accesskey, 3. tabindex, 4. required and 5. placeholder.

#7PROJ_ch9:

Ch9,11

1. Review Lecture Notes ch9. Study the Summary section and the Review Questions section of chapter 9. Review questions and know all answers. Be prepared to take a chapter 9 quiz.

2. Study Web Multimedia, ch11 p. 475-492 and practice HOP 11.1 – 11.5 (bring it to class on your USB drive).

3. Case Study – Ch9: Configure the Path of Light Yoga Studio website according to the description on p. 450-452 using form controls. Turn in your project according to 1_Project Submittal.doc located at http://classes.jgspectrum.com/classes/218_F19/Guidelines/. a. Each student must code the Path of Light Yoga Studio website but place

only one implementation in the project report.b. Upload your project to your web server and then test on your computer and

on your smartphone. The URL should be included in your test screenshots on the cover page next to each name.

c. Your web server project directory should be PROJ_ch9 (right click to create it) and a project file should be named as follows: Ch9+P7+F19+Yoga_Studio+yourLastName. Each directory should include all project files.

d. Provide screenshots of a mobile, tablet and desktop display for the Contact page. Please use a rule: one word page per all screenshots of a single web page. So, have a Firefox output screenshot (with circles for the mobile, tablet, desktop displays), code screenshot for Firefox (with circles) and HTML, CSS validation screenshots of the same web page per a word page.

e. Implement the following fields in the form of contact.html using HTML 5 controls and have references to this document (for example: #3e-2 for the First Name):1. Salutation: in the drop down listbox (Mr., Mrs., Miss…)2. First Name:3. Last Name:4. E-mail Address:5. Phone Number:6. Number: Street Name: Apt #:7. City:8. Zip Code:9. Subject:10. Comments:11. Please check here if you wish to receive an e-mail reply:

Moreover, add for each possible field12. fieldset with legend 13. accesskey, 14. tabindex,

Nov 5

2

JG CMPS 218 9/15/19 12

15. required and 16. placeholder.

d. Include results in TEST TABLE “Test plan and results”. Make sure you put 20 hyperlinks (Home, Classes, Schedule, Contact and an e-mail) for each webpage. The test items in your test table is 5 hyperlinks x (4 different pages) = 20 plus one more test item is for yoga.css. In addition to provide extra screenshots for checking error messages for each format field implemented above starting from the 1st field, 2nd field and so on. Test each field from top-down with an empty value, then with an error value entered, so add 2 screenshots per field if applicable, otherwise your score will be deducted by 10% of your project grade. At the end provide the screenshot when all fields are corrected filled out and the button submit is pressed. See example 1_Project_Submittals-TEST_PLAN+RESULTS.docx at http://classes.jgspectrum.com/classes/218_F19/Guidelines/.

e. All other requirements are the same as for the previous project (see PROJ_ch7).

Lab11.1 Ch11 Hands-On Practice (HOP) 1. HOP 11.6: Change the transform: rotate value to 30deg and box-shadow: 15px

15 px 15px #0000FF; Moreover #offer change to transform: scale to 3.2. HOP 11.7: Change

1. transition: to 5s and use ease instead of linear2. figure box-shadow to -10px -10px 10px

See slide 50 and 51 and implement1. figure transform: rotate: rotate to 45 deg2. figure:hover transform: rotate to 0 deg.

Nov 5

Phase 3 Design Phase 3. Provide (a) a title, (b) a website map, (c) wireframes and (d) content sheets Figure 10.3 (read p.458-459) to document each page. Use a word processor, PowerPoint, or Visio to draw a map site of your website that shows the hierarchy of pages and relationships between the pages. Submit your website proposal according to phase 3 of 1_Project Submittals_Final-Proj.doc (page 7) under section 3. FINAL PROJECT MILESTONES and REQUIREMENTS at http://classes.jgspectrum.com/classes/218_F19/Guidelines/. Use max 3-4 pages.

Nov 7 1

Lab11.2 Ch11 Hands-On Practice (HOP 11.8 and 11.9) Test your web page in a browser and observe what happens in each following exercise. Highlights changes in your code. HOP 11.8 – change

1. figure {opacity: 0.15}2. #gallery span{opacity 0.10; transition-duration: 8s; transition-delay: easy-out}3. #gallery a:hover span {opacity 0.9; left: 450 }

HOP 11.9 – add an additional details and summary section.

Nov 7 0.2

Quiz +Phase 4

Ch2-13

1. Review Lecture Notes ch11. Study the Summary section and the Review Questions section of chapter 11. Review questions and know all answers. Be prepared to take a chapter 11 quiz.

2. Production Phase 4. Production according to 1_Project Submittals_Final-Proj.doc at http://classes.jgspectrum.com/classes/218_F19/Guidelines/.On Tuesday 11/12 turn in your website title and your website map with numbers (see Phase 3 of 1_Project

Submittals_Final-Proj.doc - page 8) Please be ready to show 10 web pages per partner group to your professor on Tuesday 11/12. So, you need to show at least 5 web page website (including 3 - 4 main menu pages) per student (show your individual name).

Your startup website can be either Ch9 Path of Light Yoga Studio project

Nov 12

1

JG CMPS 218 9/15/19 13

or HOP 7.11 (FlexBox_ed9.zip) or HOP 7.12 (GL_ed9.zip - Grid Layout) or HOP 11.7 (Background_color_menu_change.zip) at http://classes.jgspectrum.com/classes/218_F19/examples/.

Include your home page and your contact page with the implemented attributes accesskey, tabindex, required and placeholder for each possible field (see PROJ_ch9).

Add audio controls as is shown in HOP 11.3 (or case study chapter 11) with audio {display: block; margin-top: 1em;} and possible video controls shown in HOP 11.4.

3. On Thursday 11/14, place all your 12 web pages screenshots (9 main menus) on 3-5 word document pages with all student names next to each web page. Number your page according to your website map.

Nov 14

Lab12 Ch13 1. Visit a link popularity checking service web site http:// linkpopularity.com - verify http://www.laverne.edu/ .

2. Generate the QR (Quick Response) Code from http://www.qrstuff.com for your website and incorporate QR in your Website.

1. HOP 13.1 – create index.html for the starter at http://classes.jgspectrum.com/classes/218_F19/examples/ch13/ - use three html files posted there. Look for the code on one of the last slides of my Lecture Notes for chapter 13. Show it on Thursday if you didn’t do it.

2. Go to National Do Not Call Registry => https://www.donotcall.gov and click on a lock icon to find the certification info and other ones as well.

3. Visit well-known Certificate Authorities:◦ Verisign

http://www.verisign.com ◦ Thawte

http://www.thawte.com

Nov 12

0.5

HOME On Thursday 11/14, turn in1. The website title in upper cases + your website starter name (ch9 project

etc.)2. The website map that shows each web page with a consecutive number and a

student name inside each web page rectangle. Moreover, place in each rectangle numbers in purple from TABLE 0 of 1_Project Submittals_Final-Proj.doc located at http://classes.jgspectrum.com/classes/218_F19/Guidelines/. Remember to include meta tags (keywords and a description) and the QR as we have learned in chapter 13.

3. All your 12 web pages screenshots (9 main menus) for the desktop size on 3-6 word document pages with all student names next to each web page. Moreover, at least 2 more screenshots (<=added after grading) if you apply the same desktop, tablet and mobile wireframes to all webpages you need to turn in screenshots only for the index.html, otherwise turn in additional screenshots everywhere you have different wireframes. Number your web page according to your website map.

Nov 14

1

Ass3 Ch10 I just showed it for the university website. Not done (focus on your final project): Hands-on Exercise: exc. 2 p.472 – a page per a class group (2 students). Use the following table for the results:

http://wave.webaim.org www.achecker.ca/checker

1. Differences 2. Similar errors3. Results of the test4. Recommendation

s for

Nov 14

JG CMPS 218 9/15/19 14

improvement the home school’s website

Phase 5, 6

Ch2-13

1. No chapter 10 quiz.2. Phase 5. Testing your final website project – go through 11 items specified at

http://classes.jgspectrum.com/classes/218_F19/Guidelines/ => 1_Project Submittals_Final-Proj.doc p.10 -11. Collect all your results for your final project report in four tables: Download Times TABLE above, TABLE 0, TABLE 3 below and TABLE 5.1 (p.233) in your final project. Your project should meet your/client website goals!!! Your website CONTENT should present a VALUE for your website visitors!

Turn in:a. a WEBSITE MAP with reference numbers from TABLE 0 of 1_Project

Submittals_Final-Proj.doc and b. TABLE 3: Test plan and results. See 1_Project Submittals_Final-

Proj.doc at http://classes.jgspectrum.com/classes/218_F19/Guidelines/.3. Phase 6. Publishing. Publish your project to the ULV website server at

http://students.laverne.edu/~userLogin/CMPS218/PROJ_FINAL and test again. The folder should be named (with all participant names) as follows

19F+Title_of_your_project+First_Name_Initial.Your_Last_Name_Name(+YourWebServerLoginName). Example: 19F+Pizza_House+J.Sum+students.laverne.edu/~jsum

Be prepared to show your posted website to your professor.

4. On Tuesday I will ask you to show me each item implementation of TABLE 0 of 1_Project Submittals_Final-Proj.doc. Turn in TABLE 0. Secondly, your project should be running on the ULV server using a lead student account. Thirdly, each group member can be asked to explain a running code of your partner, be prepared.

Nov 19

1

Project Presentation,Phase 7

all Preparation for your final project presentation:1. Final project presentations – read requirements in section 6 Class

Presentation of 1_Project Submittals_Final-Proj.doc located at http://classes.jgspectrum.com/classes/218_F19/Guidelines/. Each group will have a presentation for up to 15 min and up to 5 min for a discussion.

2. A power point template 1_Template_ex_of_pages_stud+++++.pdf (the minimum content) is posted at http://classes.jgspectrum.com/classes/218_F19/Guidelines/.

3. Test your final project from the web server for the desktop, tablet and smartphone resolutions and provide corresponding screenshots in TABLE 3.

4. Bring to your website reviewer and to me your website title, your phase 1 – 2 report and the website map with references to TABLE 0.

5. A reviewer role is evaluation of a final project and a project presentation – review the goals set for the website and whether a website meets them. Secondly, as a reviewer provide

o critical and constructive feedback, ask 1 – 2 questionso fixes request found (at least 2), o modifications request, o additions request, and o new sections request.

The reviewer should take all notes and email it to me and a reviewed group with an email header “G# X; Reviewed Notes for G# Y” by the end of the day of a presentation in the table format as follows (see 3. Reviewer_Notes+Answering_Students_Action_Taken.docx):

Nov 21,26

5%

JG CMPS 218 9/15/19 15

Reviewer’s Website Title:Gr# XReviewer’s Student Name(s) + id Date:

Gr# YAnswering Student Name(s) + idDate:

Reviewer’s Notes    Action taken

1. Menu item=>problem blank2. Menu item=>problem blank

… blankThe reviewed group should do all modifications/insertion to their website and have a presentation a week later in the same order as a week before.

Project Presentation – 2nd round,Phase 8

After reviewing the goal set for the website and whether your website meets them and all project requirements during your 1st round presentation we move the next phase.

Evaluation and Maintenance (phase 8) – request fixes found, modifications, additions, and new sections.1. The leader of the group will fill out the 2nd column of the same reviewer’s table

and will email to the corresponding reviewer by the 2nd round presentation.2. The reviewed group leader will turn in the response (table) to the instructor

before the 2nd round presentation starts (all headers of the TABLE will have all INFO).

Reviewer’s Website Title:Gr# XReviewer’s Student Name(s) + id Date:

Gr# YAnswering Student Name(s) + idDate:

Reviewer’s Notes    Action taken

3. Menu item=>problem Need to be filled out4. Menu item=>problem …

… …

5. The 2nd round presentation will review your previous presentation briefly and focus on your correction and on your code. Moreover, you need to create slides showing: 1. your corrections in the order of the reviewer’s notes2. 1 - 2 rows of the TABLE 0 per slide. The slide should include the code in the

red frame and the output page. The order of the slides are determined by the reference # in the 2nd column of the TABLE 0.

Dec 3 and 5

5%

FINAL Project

1. Turn in your final project and your power point presentation (both hard and soft copies are required) according to 1_Project Submittals_Final-Proj.doc at http://classes.jgspectrum.com/classes/218_F19/Guidelines/.

2. Include TABLE 0 (Features location) right after the cover page.3. Your project folder on the USB drive should be named (with all participant

names) as follows 19F+Title_of_your_project+First_Name_Initial.Your_Last_Name_Name+ First_Name_Initial.Your_Last_Name_Name (+YourWebServerLoginName).

Example: 19F+JavaJam_Coffee_House+J.Sum+A.Sharf+~jsum

Dec 5 15%

JG CMPS 218 9/15/19 16

Your Power Point presentation file should have the same above name with an extension for the Power Point.

4. Moreover, Publish your final project website and your final report in your corresponding final project directory at http://students.laverne.edu/~userLogin/ CMPS218/FINALProj

http://students.laverne.edu/~userLogin/ CMPS218/FINALProj_Doc  (replace the userLogin by your user login)

Final Ch. 1 -13

See the Guide_Final.doc on the class website at http://classes.jgspectrum.com/classes/218_F19/Guidelines/.

20%

[1] Terry Felke-Morris, Web Development & Design Foundations with HTML 5 9/E, Addison Wesley Higher Education - Pearson, 2019, Print ISBN-10: 0134801148, Print ISBN-13: 978-0134801148.

JG CMPS 218 9/15/19 17