550 InfoTech Course Site - Summer

Exercises & Project for Introduction to Information Technologies

Online - Summer 2024

Important Note: individual instructors of a 550 course section may make slight changes to the content of the assignments and/or their respective percentage of course grade. What is presented here provides you with a clear sense what you will be asked to do in the assignments.

Discussions (7.5% of Course Grade)

Discussions will be conducted online, using Learning Management Systems such as Sakai or Canvas, because the online format leads to everybody contributing and better comprehension of the content. There will be three graded discussions and the section instructor will provide more specific discussion instructions.

  • Topic 1: InfoTech Skills Needed by Information Professionals and Librarians - Week 2
  • Topic 2: Innovative Uses of Info Tech in Information Organizations and Libraries- Week 8
  • Topic 3: Reflections on Learning How to Program - Week 13

Quizzes (7.5% of Course Grade)

Quizzes will be "open book" to help you to check your understanding of key technical concepts and facts. Quizzes will be accessible via eCollege or Sakai.

  • Quiz 1: HTML and CSS - Week 6
  • Quiz 2: Bootstrap and JavaScript - Week 10
  • Quiz 3: MySQL and PHP - Week 14

Exercise 1: HTML & Multimedia – Create Information Resource with Multimedia (12.5% of Course Grade)

For a topic of your choice, create an information resource that consists of three web pages that contain text, images, screencast and hyperlinks.

  • Create Multimedia and Survey
  • Find large images related to topic of information resource on flickr.com (or other images resource) and Perform these tasks:
    Select images that have a "Creative Commons" license so that you are free to use it. Download images to your computer.
  • Edit Images using pixlr.com
    Scale image to create a thumbnail image that is 50 pixels wide and the aspect ratio is preserved. Crop large image to create an image of a detail that is 200 pixels wide and high. You decide the most appropriate image file format to use.
  • Flickr + Pixlr (4:48) How to find images on flickr.com with a Creative Commons license and to use Pixlr to crop image or create thumbnail.
  • Create 1-2min Screencast about Image Detail.
    Specify capture area so that it only contains the image of the detail. Create screencast describing why you picked this detail and upload to YouTube.
  • Screencasting (5:05) How to use Screencast-O-Matic to do create screencast, Upload it to YouTube and get embed code.
  • Create Survey using surveymonkey.com on a topic of your choice and include hyperlink to survey in your Exercise 1 page.
  • Surveymonkey Help Center | Tutorials: Design | Analysis
  • Create Web Pages that contain images (large and thumbnail images), embedded screencast and survey and upload the page to your public_html folder on server used in this course.
  • Create at least 3 web pages using HTML5 doctype.
  • Use a table to structure the page so that it has:
  • 3 columns: 50 | 500 | 100 pixels wide
  • 4 rows: 50 | 50 | 500 | 50 pixels high
  • Have one h1 per page and at least one h2 and at least two p per page.
    Use a sans-serif font (e.g. Arial) and at least one word is bolded and/or italicized in each paragraph of text.
  • Include at least one absolute hyperlink per page (the more links the better, since you are creating an information resources and all the links need to work).
  • Create a simple navigation structure using relative hyperlinks that has a clear "you are here" indicator.
  • Edit images found on flickr.com (or other images resources) using a free online image editing tool.
  • Insert images (200x200 detail and/or thumbnail images) in pages and have text flow all around them.
  • Embed screencast and survey link on one of the pages.
  • Upload web pages to your public_html folder on the server.
  • Validate pages using HTML validator: http://validator.w3.org/
  • The instructor will inform you which validation errors can be ignored.
  • Exercise 1 step-by-step video demos:
  • Example of what first page can look like when completed.

Exercise 2: CSS – Enhance Information Resource with CSS (12.5% of Course Grade)

For a topic of your choice (can be the same as for Exercise 1), you need to create a navigation structure that has a clear "you are here" indicator and at least three pages that require no scrolling. These pages will be integrated into the project site.

  • HTML Tasks
  • DIVs to control presentation:
  • pageContent, mainContent, rightSidebar.
  • HTML5 for semantics:
  • header, nav, main, article, figure, aside, footer.
  • Place images and media content inside of figure element.
  • HTML: use p, h1, h2, a and table, tr, td tags:
  • Have one h1 per page and at least one h2 and at least two p per page.
  • CSS Tasks
  • Develop External Style Sheet that controls overall appearance of pages:
  • Contains “Clean Slate” and "HTML5 Reset"code.
    (see in Week 4: CSS Reset (2:26) "Clean Slate" CSS, Make HTML5 Backwards Compatible, HTML5 shiv.
  • CSS rules for DIVs, HTML5 and standard HTML tags.
  • Specify float and clear properties as needed for specific divs or HTML5 elements.
  • Specify borders, margins and padding as needed.
  • Specify CSS rules for these tags: p, h1, h2, a and table, tr, td.
  • Create a CSS rule for h2 that is specific for h2 appearing inside the right sidebar.
  • Create complex CSS rule so that the first letter of the first paragraph is much larger than the other letters and has a different color (and please move CSS rule to internal style sheet for all pages because of Firefox browser quirk and see in Week 4: CSS Cascade (17:40) shows you starting at 7:30 how to construct such a CSS rule).
  • Make sure to use sans-serif font.
  • Create simple navigation structure using relative hyperlinks with "you are here" indicator using CSS class .here.
  • Use Internal Styles to specify unique visual display features for a specific page:
  • Border color of the right sidebar is different for each page.
  • Layout Tasks
  • Overall page width is 800px (incl. 50px left margin) and page height is 700px
  • Create an overall hierarchical structure for logical & semantic sections of the page:
  • Header
  • Navigation (with subtle background color)
  • Create a "you are here" indicator by creating a CSS "here" and apply to span tag (see Ex2 - Videos).
  • Content
  • Image floating on left, enough text flowing around image
  • Embed YouTube video or screencast
  • Floating sidebar on the right
  • Footer does not float next to anything (or put differently, nothing floats next to the footer)
  • Content Tasks
  • Create one 1-2min screencast related to the page content of one page.
  • Find and Embed one YouTube video related to the page content of another page.
  • Make sure to change width and height in the iframe code to what you want.
  • Design Tasks
  • Low saturated colors for larger visual areas
  • Apply the Basic Wed Design Principles discussed in Lecture 4
  • Validation Tasks
  • Validate all pages using HTML validator: http://validator.w3.org/
  • You can ignore validation errors caused by video and screencast embed codes.
  • Validate external CSS style sheet using CSS Validator: http://jigsaw.w3.org/css-validator/
  • (Optional) Create Google Analytics account and create and embed tracking code on your pages.
  • Exercise 2 step-by-step video demos.

Exercise 3: Front-End Frameworks – Create Information Resource with Responsive Layout (12.5% of Course Grade)

For a topic of your choice (can be the same as for Exercise 2), you need to create a web page that has a responsive layout and uses Bootstrap navigation element, contains a slideshow and circular images with collapsible content. This page will be integrated into the project site.

  • Create Responsive Grid Layout using Bootstrap 4
  • Create responsive column layout as outlined in these wireframes for extra large, large, medium and small displays.
  • Create first needed structure of fluid containers and rows that contains sufficient number of columns.
  • Next, apply need col-SIZE-SPAN to the columns.
  • Resources
  • bootstrap_grid_basic | grid_examples
  • Create Collapsible Navigation with Dropdown
  • Place navigation in 1st row inside of nav element
  • Home | Info Tech | Interests + Dropdown (Interest 1, Interest 2, Interest 3) | About
  • Interests has a "you are here" indicator.
  • Resources
  • Navigation  navbar 
  • Dropdowns  dropdowns
  • Collapse  collapse
  • Add Slideshow - images to use
  • Place slideshow (carousel) with at least four images and title & captions in 2nd row.
    Make sure carousel code uses id="slideshow" (instead of "demo").
  • Resources
  • Carousel  carousel
  • Control image size: .carousel-inner img { width: 100%; height: 100%;}
  • Add Text Content
  • In 3rd row, add content for two nested column and sidebar (see wireframes)
  • Add Cards and Circle Images
  • Place 6 Circle Images in 4th row
  • Resources
  • Cards  bootstrap_cards
  • Images  images | class="img-fluid"
  • Add Toggleable / Dynamic Tabs
  • In 1st nested column and customize ids ("item1" etc as in demo).
  • Resources
  • Tabs  nav_with_tabs
  • Add Table
  • In 1st nested column, place table inside 2nd tab of toggable tabs.
  • Resources
  • Table tables
  • Link Collapsible Content to Circular Images in Cards
  • Make link image to divs with unique ids (remember an id can be used only once in a web page).
  • Resources
  • Collapse  collapse
  • Exercise 3 step-by-step video demos.

Exercise 4: Open Source, Forms & JavaScript – Identify & Evaluate Open Source Info Tech Tool, Create Form and Validate with JavaScript (15% of Course Grade)

The goal of this assignment is to identify and evaluate open-source info tech tool that is being or can be used in libraries or relevant workplace. Two pages with a navigation structure need to be created. The first page contains the open-source evaluation and at least two image rollovers; the second page contains a form that asks page visitors for information related to the open source tool being reviewed. The evaluation needs to be written as a concise report that could be used by a library director or person in charge of tech development to help them decide whether to adopt the tool that you have identified. The two pages of this exercise will be integrated into the project site.

  • Evaluation Report of selected open source tool:
  • Some general info about open source tools in Resources Tab.
  • Claim your tool: you need to list the tool you have identified in the shared Google spreadsheet (same as used for Class Exercises and select sheet = "Open-source") to reserve the tool on a "first reserve, yours to review" basis. A specific tool can be reviewed only by one student. (Open-source info tech tools already taken: PHP, MySQL, Apache and other tools covered in class so far).
  • Download the tool if possible (select tool that is supported by your preferred OS if possible): be mindful of distinction between executable program (this is what you want to download) and the downloading the source code so that you can modify it. If it is difficult to easily test it (e.g. it requires access to a server to install it) then study the user comments, but select such tool only if you get a good idea from how the tool works from manual and user comments.
  • Create report page that satisfies these requirements (where each requirement is at least a separate paragraph; also have h2 headings for the major topics covered):
  • Describe briefly why the selected tool is or could be used in a library or relevant workplace setting.
  • Showcase / Discuss at least two uses that you find interesting and relevant to libraries (ideally you can link to page that describes how it is being used).
  • Assess how extensively the tool is currently being used (number of downloads, size of user community etc).
  • Discuss the advantages and disadvantages of using open-source tools in general (research on web).
  • Discuss the advantages and disadvantages of using the selected tool (monitor discussion forums, blogs, web).
  • Image Rollovers
  • Select images related to open source tool being evaluated and crop so that they have same size. Text needs to flow around the images.
  • Create JavaScript code for at least two image rollovers on evaluation page (Step 1 (5:40) How to create image rollovers).
  • Form page
  • You can use this page as your starting point. You need to add Collapsible Navigation and the correct "you are here" indicator.
  • Form asks page visitors for information related to the open source tool being reviewed.
  • Required: First Name, Last Name, Email, State, Zipcode, Radio Buttons (at least 4), Checkboxes (at least 4), Submit, Reset elements in form.
  • Organize form elements into at least two fieldsets.
  • Submit causes following form data to be emailed to you.
  • First & Last Name, email, state, zipcode, selected radio button and selected checkboxes.
  • HTML5 Form Validation
  • Use required except for checkboxes.
  • Use pattern attribute for State (two letters all caps) and Zipcode (five digits) and use title attribute to provide hints to user. Also make sure Email is validated and has the needed pattern.
  • Step 2a (5:18) Review Form code and use Bootstrap Form Styles, Create State input and use pattern & title attributes for validation.
  • JavaScript to Validate Form Elements
  • Make sure at least two checkboxes are selected.
  • Step 4 (5:28) Create checkboxesSelected function, Create validate function that calls checkboxesSelected, Use onsubmit to call validate to make sure at least one checkbox is selected (Note: your task will to modify the code to make sure at least two checkboxes are selected), Next Steps.
  • Modify DOM by adding text below radio buttons (see below the different Step 3 videos).
  • Boostrap 4
  • Create Collapsible Navigation building on navigation structure used in Ex3.
  • Add Dropdown for "Info Tech" and make sure it has the "you are here" indicator.
    Step 1 (5:40)Discuss Bootstrap Collapsible Navigation with Dropdowns for "Info Tech" requirement.
  • Use Bootstrap 4 Form Styles for the form elements and that label and input are displayed as inline:
  • Step 2a (5:18) Review Form code and use Bootstrap Form Styles, Create State input and use pattern & title attributes for validation.
  • Step 2b (3:55) Review Radio Button code and use Bootstrap Form Styles, Create Radio Button and Checkbox inputs, Importance of name attribute, Next Steps.
  • JavaScript
  • Create two Image Rollovers: Step 1 (5:40).
  • Modify DOM on the Form page by adding text below radio buttons (see the different Step 3 videos):
  • Create modifyDOM function so that only one DIV is added below radio buttons when they are clicked.
  • Step 3a (3:00) Begin design of modifyDOM function, Create onclick for radio buttons.
  • Step 3b (3:00) Refine modifyDOM function by adding elements to DOM below radio buttons.
  • Step 3c (2:30) Add id and Bootstrap Form and CSS classes to element be shown below radio buttons.
  • Step 3d (3:50) Test if infoNode exists, Modify modifyDOM function so that only one element added to DOM below radio buttons, Test and Debug code.
  • Show text related to currently selected radio button.
  • Step 3e (6:25) Create textToDisplay function, Use if / else if control structure to return text related to selected radio button, Test and Debug code.
  • Form Validation:
  • Create checkboxesSelected function to make sure at least 2 checkboxes are selected.
  • Create validate function that is called when form is submitted and informs user if certain fields need to be com.
  • Step 4 (5:28) Use JavaScript to validate checkboxes, Create checkboxesSelected function, Create validate function that calls checkboxesSelected, Use onsubmit to call validate to make at least one checkbox is selected (Note: your task will to modify the code to make sure at least two checkboxes are selected), Next Steps.

Exercise 5: MySQL and PHP Basics – Create Form and PHP Page to Record Form Data in MySQL Table and to Display Form Data (15% of Course Grade)

In this assignment, you will select 10 of the info technologies / tools that have been covered in this class to collect feedback from page visitors via a form that consists of 10 sets of radio buttons. You will decide what question you want to ask page visitors and what the five point scale of a set radio buttons represents. You will need to create a MySQL table that stores the data submitted for the 10 tools. The form data needs to be validated and then posted to a PHP page that submits the “cleansed” data to a MySQL database. The PHP page will also display whether the data has been successfully recorded in the MySQL table and show the current sum and average of the scores recorded. This exercise will be integrated in the project site.

  • Form
  • Create a form that consists of 10 sets of 5 radio buttons.
  • A numerical scale of 1 to 5 is associated with set of 5 radio buttons and define what the scale means.
  • Provide one sentence description of what tool does before related set of radio buttons.
  • Make sure that form data is validated using HTML5.
  • Specify PHP page to receive data and use POST method to transmit data.
  • MySQL Requirements
  • Create MySQL table with the appropriate fields and variable type specifications.
  • Develop the "submit" function so that data for all 10 tools is stored.
  • Use MySQL Workbench to check that form data is recorded in table.
  • PHP Requirements
  • Create code to check that $_POST contains the expected data.
  • Cleanse data to make sure it does not contain malicious code.
  • Provide login credentials in a separate PHP file.
  • Connect to MySQL database and test if successfully connected.
  • Insert data into MySQL table.
  • Display data in MySQL table to make sure data is successfully inserted and there are no "bugs" in the code.
  • Display current sum and average scores for each tool.
  • Bootstrap and CSS Requirements
  • Create Collapsible Navigation for the form and results pages, building on navigation structure used in Ex4, that has Dropdown for "Info Tech" and make sure it has the "you are here" indicator.
  • The form and resuls pages are listed in the Dropdown of "Info Tech" (including working links).
  • Dynamically display HTML and MySQL data and include HTML, CSS and Bootstrap code inside of PHP code, making sure string data is properly escaped.
  • Integrate CSS code to style the display of the summary information:
  • Show first and bold tool name, then SUM and the score bolded and AVE and score bolded.
    Example: MySQL: SUM = 44 and AVE = 4.40.
  • Surround the summary info for all the 10 tools with a border and make sure there is sufficient padding inside the element that contains all of the summary info for all the tools.
  • Use a Bootstrap 4 Table (striped rows) to display the summary information on the results page.
  • See Example (bounding box needs to 400-500px width).

Term Project: Dynamic Web – Create Dynamic Website using HTML, CSS, JavaScript, PHP and MySQL (17.5`% of Course Grade)

The term project brings together what has been covered in this course and what you have practiced in the exercises to create at least 9 HTML pages and at least 1 PHP page.

Important: section instructor may add further requirements for the project and inform you what they will be.

  • How to Get Started
  • Collect needed Ex2, Ex3, Ex4 and Ex5 pages and external CSS files, images etc.
  • Use your Ex3 (or Ex4 or Ex5) page as a starting page.
  • Create "Home", "Info Tech - Intro", "Interests - Intro" and "About" pages.
  • Navigation Requirements
  • Primary Navigation: has 4 primary categories (Home | Info Tech | Interests | About). You can use different word for "Interests", yet the word you use has to be general in meaning similar to "Info Tech".
  • Create Bootstrap 4 - Collapsible Navigation with Dropdowns for your pages, building on the navigation structure used in Ex3 and make sure it has the "you are here" indicator.
  • Secondary pages for "Info Tech" and "Interests" are accessible via Dropdown and have also a "you are here" indicator.
  • Content Requirements
  • Home Page: project overview.
  • Info Tech: intro + 2 secondary pages + PHP results page.
  • "Info Tech - Intro" page describes where to find up-to-date information about how info tech is being used in libraries (page requires no scrolling). Provide links two websites and two blogs.
  • "Intro Tech - Open Source" is related to an open-source tool that is or can be used in libraries (this page can require scrolling). See Exercise 4 for specific requirements.
  • The form created for Exercise 4 is placed at the bottom of the page.
  • The form data is validated and then emailed to you.
  • "Info Tech - Tools" is devoted to the info tech / tools that you learned to use in this class (this page can require scrolling). Intro paragraph and briefly mention that you would like visitors to fill out survey.
  • Provide bullet list of info tools covered and attach local / anchor hyperlink to h2 headline for tool.
  • For each info tool, h2 headline and paragraph that describes what the info tech tool is all about; which specific feature you found especially useful and tips for students learning how to use it.
  • Provide URL for tool and URL for useful info / tips.
  • At the end of page, include a brief survey that will collect feedback from page visitors for each tool (see Exercise 5 for specific instructions and tips). It is also possible to place the radio buttons related to a specific tool right after the paragraph describing the tool.
  • The survey uses a set radio buttons for each of the 10 info tech tools and offers user a five-point scale that can be selected.
  • Make sure all sets of radio buttons have valid selections (like in Exercise 5).
  • When users click on "Submit" button, they are directed to PHP page that stores the survey results in MySQL table and then only shows a summary of the AVERAGE scores of the survey results for each tool.
  • Interests: intro (new) + 3 secondary pages (= Exercise 2s), where one secondary page contains YouTube video and another page contains Screencast.
  • About: info about you; at least two image rollovers; one screencast about topic of choice.
  • HTML Requirements
  • Each page uses HTML5: DOCTYPE declaration; Navigation; Content area; Footer, one h1 tag; at least one h2 tag; no use of two consecutive line breaks.
  • CSS Requirements
  • Apply "clean slate" CSS code and include "HTML5 Reset" code.
  • Use sans-serif font (unless have good design reason to use serif font).
  • External style sheet controls on ALL pages: headlines (h1, h2, h3 have same visual gaps, respectively) and h1 is larger than h2 which is larger than h3 which larger than p (in terms of font size and top and bottom margins); paragraph; list tags; other tags and/or ids or classes.
    Set min width to 320px and max width to 1200px for body element and make sure that the page is centered.
  • "Interests" secondary pages have right floating side bar and left floating image.
  • "Info Tech - Tools" page will use bulleted list and you need to create CSS rules to control its appearance.
  • "Info Tech" and "Interests" pages need to have (slightly) different visual "look & feel" in terms of font and color choices.
  • Create CSS rules to control display of MySQL database summary results.
  • Images have margins as needed.
  • Bootstrap 4 Requirements
  • Collapsible Navigation with Dropdowns.
  • "Home" contains Jumbotron and three Cards that contain an image and collapsible content + link to related theme as well as 3 column responsive layout for medium display size.
  • "Interests - Intro" contains Carousel and 3 column responsive layout for medium display size.
  • "Info Tech - Intro" contains an Info Alert that can be closed and has a main column and sidebar responsive layout for medium display size.
  • "Info Tech - Open-Source + Form" use Bootstrap form styling.
  • "Info Tech - PHP Results" uses a striped Table to display summary info.
  • "About" uses Tabs to organize the content: 1st tab contains intro; 2nd tab the image rollovers; 3rd tab the screencast.
    Also uses a main column and sidebar responsive layout for medium display size.
  • JavaScript Requirements
  • Both "Info Tech - Open Source" and "About - 2nd tab" pages need to contain two Image Rollovers.
  • "Info Tech - Open Source" uses JavaScript to validate that at least two checkboxes are selected in the form.
  • "Info Tech - Open Source" uses JavaScript to manipulate the DOM to show related information when a radio button choice is selected.
  • PHP & MySQL Requirements
  • Create code to check that $_POST contains data.
  • Cleanse data to make sure no malicious code can be submitted.
  • Provide login credentials in a separate PHP file.
  • Connect to MySQL database and test if successfully connected.
  • Create MySQL table with the appropriate field names and variable type specifications.
  • Insert data into a MySQL table.
  • Display data stored in MySQL table to make sure data is successfully inserted and there are no "bugs" in the code.
  • Comment out code used for “debugging” purposes (in Exercise 5).
  • Display only summary data for Info Tech Tools Survey and integrate CSS code and Boostrap Table (striped) to format the display of the average scores (sum data does not need to be displayed as in Exercise 5).
  • Dynamically display HTML, CSS and MySQL data and include HTML and CSS code inside of PHP code, making sure string data is properly escaped.
  • Google Analytics (optional)
  • Create Google Analytics Account.
  • Insert Google Analytics embed code at the bottom all of your pages.