Exercises & Project for Information Technologies for Libraries and Information Agencies

On-campus and Online

Discussions: Due Week 2 | Week 8 | Week 13
Quizzes: Due Week 6 | Week 10 | Week 14

Exercise 1 | Due Week 3 | Revision Due Week 6
Exercise 2 | Due Week 5 | Revision Due Week 8
Exercise 3 | Due Week 7 | Revision Due Week 10
Exercise 4 | Due Week 9 | Revision Due Week 12
Exercise 5 | Due Week 11 | Revision Due Week 14

Term Project | Due Week 15

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, either using Sakai or eCollege, 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 in Libraries - Week 2
Topic 2: Innovative Uses of Info Tech in 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: Forms and JavaScript - Week 10
Quiz 3: MySQL and PHP - Week 14

Exercise 1: Web Services and Wiki – Collaborate and Create Wiki Page with Widgets (10% of Course Grade)

Identify RSS Feed for a website or blog that has not been already been entered in a shared Google spreadsheet created by the instructor (who will share URL with you) and covers: a) how and which information technologies are being used in libraries, b) the future trends and/or c) "Libraries 2.0" that you find useful. This will help us create a "Top Libraries & Information Technology" information sources.
Locate RSS Feed (3:43) How to find RSS Feed for website or blog and copy its RSS URL.
Find Large Image You Like on flickr.com and Perform these tasks:
Select image that has a "Creative Commons" license so that you are free to use it. Download the large image to your computer and then Upload to Class Wiki.
Flickr + Pixlr (4:46) How to find images on flickr.com with a Creative Commons license and to use Pixlr to scale and crop images.
PBworks Support for Educational Edition.
Edit Large Image using pixlr.com
Scale large 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:46) How to find images on flickr.com with a Creative Commons license and to use Pixlr to scale and crop images.
Create 1min Screencast about Image Detail using Jing.
Specify capture area so that it only contains the image of the detail. Create 1min screencast describing why you picked this detail and upload to screencast.com
Jing (4:28) How to use Jing to do screen capture and create screencasts and upload them to screencast.com.
Create Playlist on screencast.com that include "Why this Detail" screencast.
Identify embed code to be able to embed MediaRoll widget in your Exercise 1 page.
Widgets (4:06) How to create Screencast MediaRoll widget and embed in a Wiki page.
Create Survey using surveymonkey.com on a topic of your choice and include hyperlink to survey in your Exercise 1 page.
Help Center
Create a Wiki page for your Exercise 1 in Class Wiki and insert large and thumbnail images and embed Screencast MediaRoll and screencast.
Edit Class Wiki (4:50) How to create page and links.
PBworks Support for Educational Edition: Add Image in PBworks.
Widgets (4:06) How to create Screencast MediaRoll widget and embed in a Wiki page.
Screencast Embed Code (1:24) How to find embed code for a screencast.

Exercise 2: HTML – Create Information Resource (10% of Course Grade)

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

Create at least 3 web pages.
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
Each page has one h1 tag, at least one h2 tag and uses a sans-serif font (e.g. Arial) and at least one word is bolded and/or italicized in each paragraph of text.
Create a simple navigation structure using relative hyperlinks and has a clear "you are here" indicator.
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).
Edit images found on flickr.com using a free online image editing tool.
Embed at least one floating image per page that has text flow all around it.
Validate all pages using HTML validator: http://validator.w3.org/
The instructor will inform you which validation errors can be ignored.
(Optional) Create Google Analytics account and create and embed tracking code on your pages.

Exercise 2 can be created using XHTML or HTML5 and step-by-step video demos have been created for both options:
Ex2 Demo Overview (5:18) | Ex2 - HTML5 (2:40) How to transition to HTML5 | Ex2 Demos: Using XHTML or HTML5.
Example of what first page can look like when completed.

Exercise 3: CSS & Multimedia Basics – Enhance Information Resource with CSS & Multimedia (15% of Course Grade)

For a topic of your choice (can be the same as for Exercise 2), 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 to describe 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 6: 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 6: CSS Cascade (17:40) which shows you starting at 7:30 how to construct such a CSS rule).
Make sure to use sans-serif font
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 - HTML5 video: Steps 6 + 7 (3:05) Create navigation structure, Create "You are here" indicator).
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 embed code to what you want (you need to do it in two places, as shown in Ex3 demo, if your using <embed> tag; only in one place if you are using <iframe>)
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/

Exercise 3 is created using HTML5 and step-by-step video demos have been created:
Ex3 & Demo Overview (9:22) | Ex3 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 (22:25) which shows you starting at 19:12 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 (5:05) 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 (6:18) Create function to test that State field has two characters).
Ex4 lecture and video demos:
JavaScript to Validate Form (24:20) | Ex4 Demos

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.
Colors used in form are different than the ones used in class example.

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 XHTML and JavaScript OR HTML5 and its built-in Form Validation.
(See demo Step 5 (1:48) for XHTML & JavaScript validation functions and how to extend for 10 tools;
and see demo Step5_HTML5 (3:37) for convert XHTML page into HTML5 and how to use HTML5 Form validation).
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.

Exercise 5 can be created using XHTML or HTML5 and step-by-step video demos have been created:
Ex5 Demo Overview (18:38) | Ex5 Form Using HTML5 (1:20) | Ex5 Demos

Starter Pages: use XHTML Step-by-Step files or HTML5 Step-by-Step files as your starting point for your Exercise 5.

Term Project: Dynamic Web – Create Dynamic Website using HTML, CSS, JavaScript, PHP and MySQL (20% 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 (1:02) Collect needed Ex3, Ex4 and Ex5 pages and external CSS files, images etc.
See Step 1 (4:54) Use Ex3 pages as starting point; Create Primary Navigation: Home | Info Tech | Interest | About.
See Step 2 (2:58) 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 (4:54) 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 (2:54) 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 (2:38) 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 (8:45) 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 (8:15) Create Info Tech pages: InfoTech + Form to PHP and PHP Results = Ex5.
PHP page that shows summary of survey results.
See Step 3c (8:15) 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.

Project needs to use HTML5 and step-by-step video demos have been created:
Project Demos
You can use YOUR Ex3, Ex4 and Ex5 pages and their content to create your project.