550 InfoTech Course Site

Exercises & Project for Introduction to Information Technologies

On-campus and Online

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 two 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.
  • 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 6
  • 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 Square 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. 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 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 at a library 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:
  • How find tool? You can use the "Top 20" tech resource blogs identified by the class or search the Web to find an open source tool. Some general info about open source tools.
  • Claim your tool: you need to list the tool you have identified in the shared Google spreadsheet (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, which can use HTML5 or XHTML, that satisfies these requirements (where each requirement is at least a separate paragraph):
  • Describe briefly why the selected tool is or could be used in a library 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 same size.
  • Create JavaScript code for at least two image rollovers on evaluation page.
    (see Week 7: JavaScript (20:24) which shows you at the end how to create an image rollover).
  • Form page
  • Need to use XHTML and can use this page and external CSS file as your starting point).
  • Form asks page visitors for information related to the open source tool being reviewed.
  • Need: Text, Email, Menu, Radio Buttons, Checkboxes, Submit, Reset elements in form.
  • Organize form elements into at least two sets.
  • Submit causes form data to be emailed to you.
  • Required data: Name, email, state and other needed form elements.
  • JavaScript to Validate Form Elements
  • Fields not empty.
  • Radio button selected.
  • At least two checkbox selected
    (see Ex4 Demo - Next Step 1 (x:xx) Key validation tasks; Customize function to test that at least two checkboxes are selected).
  • Proper email specified.
  • State field contains exactly two letters.
    (see Ex4 Demo - Next Step 2 (x:xx) Create function to test that State field has two characters).
  • Ex4 lecture and video demos:
  • JavaScript to Validate Form (x:xx)
  • Cascading Style Sheet
  • Develop External Style Sheet: that contains CSS rules used in the same way on all pages and controls appearance of form and page with images:
  • Have “CSS Clean Slate” and "HTML5 Reset" code at start of external css file.
  • Develop needed CSS rules (page needs left margin and apply what you have learned in Exercise 3).
  • Develop CSS rules for specific pages (which can be stored in an external style sheet or internally on the respective pages):
  • CSS rules only used on the report page.
  • CSS rules for form elements.

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 the current sum and average of the scores recorded. The code for this exercise will be used in the project site.

  • Form
  • Create a form that consists of 10 sets of 5 radio buttons.
  • Make sure that form data is validated and you can use HTML5 and its built-in Form Validation.
    (See demo Step 5 (x:xx) JavaScript validation functions and how to extend for 10 tools.
  • Specify PHP page to receive data and method to use 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.
  • Integrate CSS code so that display of sum and average scores is formatted.
  • 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 specify appropriate background color (so all the summary info will sit inside a div element for which you will specify a border and background color).
  • Make sure there sufficient contrast between text and background color, which needs to be light and not very saturated.
  • Make sure there is sufficient padding inside the element that contains all of the summary info for all the tools.
  • See Example.
  • Dynamically display HTML, CSS and MySQL data and include HTML and CSS code inside of PHP code, making sure string data is properly escaped.

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 8 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
  • See Step 0 (x:xx) Collect needed Ex3, Ex4 and Ex5 pages and external CSS files, images etc.
  • See Step 1 (x:xx) Use Ex3 pages as starting point; Create Primary Navigation: Home | Info Tech | Interest | About.
  • See Step 2 (x:xx) Create Info Tech - Intro, Interests - Intro and About pages.
  • Navigation Requirements
  • Primary Navigation: has 4 primary categories (Home | Info Tech | Interest | About). You can use different word for "Interest", yet the word you use has to be general in meaning similar to "Info Tech".
  • See Step 1 (x:xx) Use Ex3 pages as starting point; Create Primary Navigation: Home | Info Tech | Interest | About.
  • Secondary Navigation: 2 secondary categories for "Info Tech" and "Interest" in addition to intro page.
  • See Step 3a (x:xx) Info Tech page: Create Secondary Navigation.
  • Both primary & secondary navigation are placed horizontally and the secondary navigation is right below the primary navigation.
  • PHP page contains the primary and secondary navigation and "Survey Results" is shown as an additional secondary navigation element (with "you are here" indicator).
  • See Step 4 (x:xx) Create "you are here" indicator for Info Tech - Results page.
  • Content Requirements
  • Home Page: provides brief overview
  • Info Tech: intro + 2 secondary pages + PHP results page
  • 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.
  • One page 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.
  • See Step 3b (x:xx) Create Info Tech page: Open-Source tool + Validated Form = Ex4; Disable HTML5 built-in validation and use JavaScript.
  • One page 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 range of options that can be selected.
  • A MySQL table needs to be created with the appropriate fields and variable type specifications.
  • You will need to develop the "submit" function in JavaScript so that form data is posted to PHP page.
  • Make sure all sets of radio buttons have valid selections (like in Exercise 5).
  • Make sure the selected values are recorded into a MySQL table.
  • When users click on "Submit" button, they are directed to PHP page that only shows a summary of the survey results.
  • See Step 3c (x:xx) Create Info Tech pages: InfoTech + Form to PHP and PHP Results = Ex5.
  • PHP page that shows summary of survey results.
  • See Step 3c (x:xx) Create Info Tech pages: InfoTech + Form to PHP and PHP Results = Ex5.
  • Interest: intro + 2 secondary pages (= Exercise 3), where one 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; Primary & secondary navigation; Content area; Footer, one h1 tag; at least one h2 tag; no use of two consecutive line breaks.
  • Optional: Header; Banner.
  • 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 page: page width; appearance of primary & secondary navigation; 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.
  • "Interest" 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 "Interest" pages need to have (slightly) different visual "look & feel" in terms of font and color choices (primary navigation the same; secondary navigation can look different).
  • Create CSS rules to control display of form elements (label etc) and the display of MySQL database summary results.
  • Images have margins as needed.
  • PHP Requirements
  • Create code to check that $_POST contains the expected 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.
  • Insert data into appropriate MySQL tables.
  • Display data 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 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.