1. © Anselm SpoerriInfo + Web Tech Course Information Technologies Info + Web Tech Course Anselm Spoerri PhD (MIT) SC&I @ Rutgers University aspoerri@rutgers.edu anselm.spoerri@gmail.com

2. © Anselm SpoerriInfo + Web Tech Course Lecture 12 - Overview Recap of Key Concepts Project Demo Lectures – Week 12 Content http://comminfo.rutgers.edu/~aspoerri/Teaching/InfoTech/Lectures.html#week12 http://comminfo.rutgers.edu/~aspoerri/Teaching/InfoTech/Lectures.html#week12

3. © Anselm SpoerriInfo + Web Tech Course Project– Demo Steps Step-by-Step files: http://comminfo.rutgers.edu/~aspoerri/Teaching/InfoTech/Lectures/Lec12/Steps/ http://comminfo.rutgers.edu/~aspoerri/Teaching/InfoTech/Lectures/Lec12/Steps/ Step 0 – Collect needed Ex3, Ex4 and Ex5 files Step 1 – Use Ex3 Intro page; Create Primary Navigation Step 2 – Create Info Tech - Intro, Interests - Intro and About pages Step 3a – Info Tech page: Create Secondary Navigation Step 3b – Create Info Tech page: Open-Source tool + Validated Form = Ex4; Disable HTML5 built-in validation and use JavaScript Step 3c – Create Info Tech pages: InfoTech + Form to PHP and PHP Results = Ex5 Step 4 – Create "you are here" indicator for Info Tech - Results page Step 5 – Upload Project and Test in Browser

4. © Anselm SpoerriInfo + Web Tech Course Step 1 – Create Primary Navigation Step 1 ‒ Use Ex3 Intro Page (HTML5) and Rename = page1.html ‒ Rename external CSS file = project.css and update external link ‒ Create Primary Navigation ‒ Create div element side of nav element ‒ Home | Info Tech | Interests | About ‒ Assign URLs: page1.html | page2.html | page3.html | page4.html ‒ Customize Page Title

5. © Anselm SpoerriInfo + Web Tech Course Step 2 – Create Primary Pages Step 2 ‒ Use Save As to Create Primary Pages ‒ Info Tech page = page2.html ‒ Interests page = page3.html ‒ About page = page4.html ‒ Customize Page Titles and h1 ‒ You will modify page structure and CSS as necessary

6. © Anselm SpoerriInfo + Web Tech Course Step 3a – Info Tech page: Create Secondary Navigation Step 3a ‒ Create DIV inside of nav element ‒ Intro | Open Source | Tools ‒ Assign URLs: page2.html | page2a.html | page2b.html ‒ You decide how to style the secondary navigation

7. © Anselm SpoerriInfo + Web Tech Course Step 3b – Open-Source Page with Form Step 3b ‒ Use Save As to Create page2a.html ‒ Copy & Paste your Ex4 form ‒ Make sure that form CSS file is properly linked to page and contained in project folder ‒ Create article element and place form inside ‒ Disable HTML5 built-in validation ‒ Use novalidate at the end of opening form element ‒ Make sure to use no required inside of form inputs ‒ Make sure to include JavaScript code used to validate form ‒ Customize Page Title

8. © Anselm SpoerriInfo + Web Tech Course Step 3c – Tools Form and PHP Results page Step 3c ‒ Use Save As to Create page2b.html ‒ Copy & Paste your Ex5 form ‒ Make sure that form CSS file is properly linked to page and contained in project folder ‒ Create article element and place form inside ‒ Make sure that you have: action="page2c.php" ‒ Rename copy of Ex5 Results PHP as page2c.php ‒ Make sure that your login.php is in project folder ‒ Create external link to project.css ‒ Copy & Paste needed HTML elements before PHP code ‒ Copy & Paste needed HTML elements after PHP code ‒ Customize Page Title

9. © Anselm SpoerriInfo + Web Tech Course Step 4 – Create "you are here" for Info Tech - Results page Step 4 ‒ Add | Results to secondary navigation ‒ Create “you are here” indicator in secondary navigation ‒ Remove link (or make sure that there is no link) ‒ Create and apply CSS class “here” ‒ Create “you are here” indicator in primary navigation ‒ Bold “Info Tech” in primary navigation ‒ Use similar approach for other secondary pages

10. © Anselm SpoerriInfo + Web Tech Course Step 5 – Upload Pages and Test in Browser Step 5 ‒ Connect to studentweb server ‒ Create “project” folder in your folder on server ‒ Set Permissions = 755 ‒ Upload your project pages and Set Permissions ‒ SHIFT Select and Set Permissions = 755 ‒ Test in Browser