Transcript Lec12Handout - Rutgers University

Info + Web Tech Course
Information
Technologies
Anselm Spoerri PhD (MIT)
SC&I @ Rutgers University
[email protected]
[email protected]
Info + Web Tech Course
© Anselm Spoerri
Lecture 12 - Overview
Recap of Key Concepts
Project Demo
Lectures – Week 12 Content
http://comminfo.rutgers.edu/~aspoerri/Teaching/InfoTech/Lectures.html#week12
Info + Web Tech Course
© Anselm Spoerri
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
Info + Web Tech Course
© Anselm Spoerri
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
Info + Web Tech Course
© Anselm Spoerri
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
Info + Web Tech Course
© Anselm Spoerri
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
Info + Web Tech Course
© Anselm Spoerri
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
Info + Web Tech Course
© Anselm Spoerri
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
Info + Web Tech Course
© Anselm Spoerri
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
Info + Web Tech Course
© Anselm Spoerri
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
Info + Web Tech Course
© Anselm Spoerri