Info + Web Tech Course

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

2. Lecture 12 - Overview Recap of Key Concepts Project Demo Lectures – Week 12 Contenthttp://comminfo.rutgers.edu/~aspoerri/Teaching/InfoTech/Lectures.html#week12

3. Project– Demo Steps • Step-by-Step files: 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. 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. 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. 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. 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<form … novalidate> • Make sure to use no required inside of form inputs • Make sure to include JavaScript code used to validate form • Customize Page Title

8. 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. 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. 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