1 / 10

Overview and Demo Steps for Information Technologies Project – Week 12

In this lecture, we provide a detailed overview and recap of key concepts covered in Week 12 of the Information Technologies course. The session includes a project demonstration, highlighting the step-by-step process for creating web pages using various technologies. Topics covered include setting up primary and secondary navigation, integrating forms with PHP, disabling HTML5 validation, and creating an intuitive user experience with "you are here" indicators. Students will learn how to organize their project files, customize page titles, and upload their completed projects for testing.

ouida
Télécharger la présentation

Overview and Demo Steps for Information Technologies Project – Week 12

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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

More Related