URI GSLIS ~ Lauren H. Mandel, PhD ~ Fall 2019
This class has 10 required lab assignments. Click the Lab Title to view the instructions (click again to hide the instructions):
Lab 1 has two key tasks:
Through the completion of these tasks, students will demonstrate achievement of the following learning objectives:
First, go to the Wayback Machine. This is a website sponsored by the Internet Archive (a nonprofit). It stores multiple versions of websites going back many years. All you have to do is paste a URL in the search box to retrieve the history of that page.
For example, type uri.edu in the box and hit browse history and see what you get. When I did this in July, I saw that this site had been saved 2,929 times between February 23, 1997 and July 21, 2019. You should get something similar. You can then click into any year and any of the saved versions for that year to view the page. Check out the first available version in January 2009. You can see URI has been using the same logo for at least the past 10 years, but the website used to be much darker than it is now because of the blue background that was in use in Jan. 2009 vs. the white background in use today. Those are two comparisons from 2009 to 2019: one a similarity and one a difference
What you are going to do is pick a library website and view that website today, the first available version in 2014 (e.g., Jan. 1), and the first available version in 2009 (e.g., Jan. 1). Write one paragraph about the aesthetic feel, navigation options, and breadth of content in each iteration and a fourth paragraph comparing all 3 versions (4 paragraphs total). Include the link to each iteration in the paragraph about it. You also need a list of 3-5 key changes you see over time and a list of the 3 biggest/most important changes from most important to least. For the next lab, you will also need a table showing a timeline of the changes and screenshots to illustrate your points. Take the screenshots as you are working, along with sufficient notes to generate the timeline, and save everything where you can find it later.
The main focus of this semester is on helping you build a website. Let's get started! A web page is created using a markup language, most commonly Hyper Text Markup Language, or HTML. That is what we are going to use (along with CSS and JavaScript, coming later). Use the HTML5 Tutorial available from W3Schools to start building your webpage; see the HTML Introduction page for the code for a "simple HTML document."
Writing HTML code requires the use of a text editor. For now, use the text editor that came with your operating system: Notepad on PC and TextEdit on Mac. You can find instructions for getting started with each in the HTML Editors page of the HTML5 Tutorial. Make sure to read and follow the instructions regarding naming the file. You should name this file index.html as suggested on the HTML5 Tutorial.
The HTML Basic page in the tutorial contains enough information to build a simple HTML document that includes the following items:
Submit this assignment as an attachment in Sakai Assignments, Lab 1. This is the only lab you will submit through Sakai. All other labs will be submitted through your live website (see Lab 2).
Lab 1 complete!Lab 2 has two key tasks:
Through the completion of these tasks, students will demonstrate achievement of the following learning objectives:
Use the HTML5 Tutorial available from W3Schools to continue building your webpage; see HTML Paragraphs, HTML Styles, HTML Colors, HTML Images, HTML Tables, and HTML Lists for specific instructions for the different aspects of this lab (but really you should read everything in the HTML5 Tutorial from HTML HOME to HTML Lists this week).
Notepad and TextEdit are OK text editors, but they're not great when you start advancing beyond the basics. I recommend the use of Atom, available for free here. This is what I use so it's what you will see in the Lessons. It does some automatic fill of syntax, elements, attributes, etc. And it uses a little color coding to differentiate HTML elements, attributes, CSS properties (coming soon), etc.
For this lab, you need to modify your index.html file from Lab 1. Do NOT rename the file. If you really want to save the old version from Lab 1 as a separate file, save the old version as index_Lab1.html and save this current version as index.html. You need it to be index.html to work as the home page of your site.
Make the following changes to your web page:
Ok, now you need to share your HTML page with the world! In order to do this, you need to use an SFTP program, or Secure File Transfer Protocol program. The one I recommend (and provide instructions for in this week's Lesson) is FileZilla. So start by downloading FileZilla for your operating system and following the instructions in the Lesson to load it on your system and use it to log into the back end of your web page. You will need the information you received from Chi Shen (host, port, user, and password).
Once you have FileZilla installed on your computer and you are logged into your page, you can upload your index.html file in your folder. FileZilla supports drag-and-drop uploading, so you can navigate to your index.html file on your computer and click-and-drag it into your folder in FileZilla (again, see Lesson for visual instructions). Once you've done this, your page should be live. Check it out using the URL assigned specifically to you. Once you see it working, you're all set. You don't have to do anything else to submit your Lab 2 assignment.
Lab 2 complete!You read about usability testing in the textbook. Now you are going to run your own usability test. This lab has three key tasks:
Through the completion of these tasks, students will demonstrate achievement of the following learning objectives:
For this task, you will need to design and implement a usability test of the current (2019) version of the website used in Labs 1 and 2. You are required to get 5 users to participate in your usability test.
I recommend recruiting your 5 participants right away so you know you have 5 and can schedule the tests with them. Your 5 participants could be classmates, friends, co-workers, family, etc.
Next, you will design the usability test protocol. Start by brainstorming 8-10 tasks users are likely to need to complete on this website. Try the tasks on the website and settle on 4 tasks to use for you usability test. Determine what the standard of success is for each task (e.g., time to completion, clicks, satisfaction, combination of factors, etc.). Prepare a script to use during the test.
Next you will run the usability test, taking observational notes as you go. Remember you also need to track the success rates for each participant for each task.
Now, you will analyze the results of your usability test, looking at your standards for success and overall impressions from the test results.
For the next task, you are going to need at least one table and one chart (like a bar chart or pie chart) to accompany your results, so think about those while you are conducting the analysis.
So far, you have styled your web page using inline styles. As you add more content to your page, it can get tedious to have to style every paragraph, every header, every table, etc. This is the benefit of CSS.
Right now, you only have the one page so it makes sense to style that using internal CSS via the style element (in the head element) of your HTML code. This topic is covered in the HTML5 Tutorial under HTML CSS, which you should have already read.
Based on what you've done so far on your web page, you have styled paragraphs, headers, ordered and unordered lists, and a table. Rather than continuing to use inline styles for each element, convert all of your styling code into internal CSS via the style element in the head element, following the instructions in the Tutorial.
Your style element should contain CSS style properties for:
You will report your results on your web page. As with the previous lab, you need to modify your index.html file from Lab 2. Do NOT rename the file. If you really want to save the old version from Lab 2 as a separate file, save the old version as index_Lab2.html and save this current version as index.html. You need it to be index.html to work as the home page of your site.
You will need to add the following to your web page to fulfill the requirements of this lab:
You already know how to upload your .html file from Lab 2. You will have to re-upload it (overwrite the original file) with your revised index.html file to share your work. You also need to upload in the same place the image you are using as your chart. Make sure you used the correct file name for the image in your code and that everything displays as excpected when you access the URL assigned specifically to you. Once you see it working in the live website, you're all set. You don't have to do anything else to submit your Lab 3 assignment.
Lab 3 complete!Lab 4 has three key tasks:
Through the completion of these tasks, students will demonstrate achievement of the following learning objectives:
The first step is to chunk your content into separate pages. For now, you need three pages:
There is no need to retype anything. See the Lesson for a demonstration, but you can set up the new pages in Atom, keep all three files open at once, and copy & paste from index.html to the other two new pages. Then you just delete out the parts of the code that no longer belong on each page. This means you really won't have any content left on index.html so add a paragraph or two about yourself, along with a photo of yourself or something that represents you. This will be the new content of your index page. The content of your comparison page is everything from the Comparison of X Website header until the Usability Test of X Website header. Then the usability page is everything from the Usability Test of X Website header down to the bottom.
You need to help your user navigate among your three pages. For now, let's do this via links at the bottom of the page. So, on your index page, add links for your comparison and usability pages. Since you are going to upload everything in the same folder, you should be able to do this using comparison.html and usability.html as the URLs.
Now go to your comparison page and add links at the bottom for your home page (index) and your usability page. Then go to your usability page and add links for your home page (index) and your comparison page. Save the files and refresh your browser to make sure everything is working properly.
Unless you deleted out the coding in your style element in the head element, your pages should still have all the same styling as each other, which you can view by saving your three pages and opening them each in your browser window. But, what happens when you start creating new pages? Do you really want to have to copy/paste the style element to each new page, and then when you add a new style element to a new page, you'll have to go back and update it on every other page. There is an easier way...
Use the HTML5 and CSS Tutorials available from W3Schools to continue building your webpage; see HTML CSS and CSS Introduction, CSS Syntax, CSS How To (see External Style Sheet), CSS Colors, CSS Borders, CSS Text, CSS Fonts, CSS Links, CSS Lists, and CSS Tables for specific instructions for the different aspects of this lab (but really you should read everything in the CSS Tutorial from CSS HOME to CSS Tables this week).
As you read in the CSS Tutorial, you can create one stylesheet, then link to that stylesheet in the head tag of innumerable HTML pages, and style them all the same just by making the changes in one place (your stylesheet). When you make an update to the stylesheet, it automatically updates on every page that links to that stylesheet. So, now that you have a three-page website, it's time to set up your stylesheet.
External CSS stylesheets are text files that end with the extension .css. You can create them in any text editor, and since we are using Atom, you can create it there. Start a new document in Atom, and save is at stylesheet.css. Make sure you save it in the same folder where all your .html files are so your computer can find everything properly when you are viewing your pages offline via a local browser.
You've already done a lot of the work of creating what goes in your external stylesheet. That code is currently in the style element of the head element of your three pages. Copy it from your index page and paste it in your CSS document. Read through it carefully to make sure everything is how you want it and follows CSS syntax. Then edit your three pages to remove the style element and replace it with a link in the head that links to your stylesheet. Save everything, then refresh your pages in your browser and make sure everything looks right.
If you want to add comments to help identify the different elements being styled in different parts of the code in your CSS file, go ahead and do that as well.
Ok, now you need to share all of your website with the world through FileZilla. You already know how to do this from the previous 3 labs. It's just that now you have to make sure all three html files, your css file, and all your image files are uploaded in the lsc548webserver via FileZilla.
Once you've done this, your website should be live. Check it out using the URL assigned specifically to you. Once you see it working, you're all set. You don't have to do anything else to submit your Lab 4 assignment.
Lab 4 complete!Lab 5 has three key tasks:
Through the completion of these tasks, students will demonstrate achievement of the following learning objectives:
The first step is make a list of all the pages in the website. You already took LSC 508 so you have some familiarity with both Google Sheets and Microsoft Excel. Depending on which of those products you prefer, choose one of them to create a new spreadsheet you can use to collect the data on all the pages in your website. In order to create a treemap from this data, you are going to need the following columns (you can use different terms but you need this general information):
The specificity here depends on the content and structure of the website you are using. For example, top level content is probably on the navigation menu on the website and might be terms like About, Contact, Collections, Events, etc. Then you have to go to each page in the website to get the title of the page and figure out where it belongs in the organizational structure of the website. Those are the level 2-4 (or more) content.
This task is probably going to take you several hours to complete. Be thorough!
Use Sheets or Excel to produce a treemap from your data. Here are instructions for creating a treemap in Excel. Here are instructions for creating a treemap in Sheets.
Make sure you are happy with how your treemap looks when you're done. You can adjust the colors in both Excel and Sheets, and you may have to adjust your data if your treemap doesn't look right. When you are done and satisfied with your treemap, take a screenshot of it (and please crop your image so we just see the treemap and not extra cells in the background).
Ok, now you need to add your treemap to your website. Of course this requires a few steps, as follows:
Now you need to share all of your website with the world through FileZilla. You already know how to do this from the previous 4 labs. Make sure all four html files, your css file, and all your image files are uploaded in the lsc548webserver via FileZilla.
Once you've done this, your website should be live. Check it out using the URL assigned specifically to you. Once you see it working, you're all set. You don't have to do anything else to submit your Lab 5 assignment.
Lab 5 complete!Lab 6 has three key tasks:
Through the completion of these tasks, students will demonstrate achievement of the following learning objectives:
At this point, your website has a homepage (your index.html file), your comparison page, usability test results page, and treemap page. So far, you've been linking to them through plain links at the bottom of each page. This week, you are going to create a navigation menu that will help the user navigate your multi-page website.
There are lots of ways to create a navigation menu. You are going to do it using CSS. Start by refreshing yourself on the CSS Navigation Bar tutorial. For this lab, you can choose to do a vertical navigation bar or a horizontal navigation bar. I did a horizontal navigation bar across the top of the pages on the class website, but there is also a vertical navigation bar example on the Student Websites page. In the lesson, I demonstrate a basic vertical navbar.
You need to include in your navigation bar ALL of the pages on your site. This means that on your index.html page your navbar should include links for the Homepage (your index.html page), as well as all of your other pages. Use the Navigation Bar = List of Links example on the CSS Navigation Bars tutorial page to get you started. I recommend placing the code for the navbar as the first element inside the body tag on your index.html page.
Some things to note:
Once you have the navbar that you want to implement across your entire site, you are ready to move on. Don't forget to keep checking how things look in your browser window as you work.
You have a navbar! But it needs to be on all of your pages and it needs to look and operate correctly on each page. Since your CSS to style your navbar is in your stylesheet.css file, the styling will appear the same on every page in your website.
So what you need to so is place the HTML code for the navbar (the list of links) in the same place in your HTML code on each page. If you put it as the first element inside the body tag on your index.html page, then you also need to put it in that same place on every other page. Don't worry, you can copy and paste it. And remember, you can have all your pages open in Atom at once to make this even easier. If you chose a navbar example with active/current navigation link to be highlighted, then for each page in your site, you have to adjust the HTML code accordingly to mark which item in the list gets the active class in addition to the navbar class (do this using class="navbar active").
Save all of your HTML files and your stylsheet.css file, refresh your browser, and check that the navbar looks right and links correctly on each page.
Now you need to share all of your website with the world through FileZilla. You already know how to do this from the previous 5 labs. Make sure all html files, your css file, and all your image files are uploaded in the lsc548webserver via FileZilla.
Once you've done this, your website should be live. Check it out using the URL assigned specifically to you. Once you see it working, you're all set. You don't have to do anything else to submit your Lab 6 assignment.
Lab 6 complete!Lab 7 has three key tasks:
Through the completion of these tasks, students will demonstrate achievement of the following learning objectives:
You have multiple pages on your website and a good design approach to help the user find things on every page is to delpoy a uniform layout across the pages. So to do this, you first have to consider the content of each page and how it would be best laid out for the viewer. Start there.
Then review the different layout options in the CSS Website Layout tutorial. There are some other options in the CSS Templates, or lots of others are available freely on the Web. Choose the layout that best fits the content of the pages on your website.
Most likely, you are going to be changing your navbar to fit with the layout you selected. The layouts in the templates use a lot of div tags, and they put the navbar in a div. That's OK (it's actually how the navbar is coded on the class website).Once you have the layout that you want to implement across your entire site, you are ready to move on.
The CSS code to style your layout goes in your stylesheet.css file so that the styling of the layout appears the same on every page in your website. If you added a header or footer, make sure to put some content in those tags on each page of your website. If the template you chose also sets a style for content (which it probably does), you'll also need to adjust your code on each page to add a div with class content for this.
Save your stylesheet.css file and any changes you made to your HTML files, and refresh your browser to check the layout appears correctly on all pages of your website.
Now you need to share all of your website with the world through FileZilla. You already know how to do this from the previous 6 labs. Make sure all html files, your css file, and all your image files are uploaded in the lsc548webserver via FileZilla.
Once you've done this, your website should be live. Check it out using the URL assigned specifically to you. Once you see it working, you're all set. You don't have to do anything else to submit your Lab 7 assignment.
Lab 7 complete!Lab 8 has three key tasks:
Through the completion of these tasks, students will demonstrate achievement of the following learning objectives:
You are going to create a button on your homepage that a user can click to determine whose page this is. The button will need to ask Whose page is this? And when a user clicks the button, your page needs to return your full name (first and last with a space between them).
This task requires you to do the following:
You are going to change your Comparison of X Website page so that when a user drags their mouse over your header, the header changes from the color you chose to red.
This task requires you to do the following:
Now you need to share all of your website with the world through FileZilla. You already know how to do this from the previous labs. Make sure all html files, your css file, and all your image files are uploaded in the lsc548webserver via FileZilla.
Once you've done this, your website should be live. Check it out using the URL assigned specifically to you. Once you see it working, you're all set. You don't have to do anything else to submit your Lab 8 assignment.
Lab 8 complete!Lab 9 has three key tasks:
Through the completion of these tasks, students will demonstrate achievement of the following learning objectives:
Go to Intro to App Lab. You have to create an account so that you can share your app when it's complete.
Complete steps 1-9 in Intro to App Lab. Watch the videos as you move along to help you with the tasks.
Complete steps 10-15 in Intro to App Lab. Watch the videos as you move along to help you with the tasks. You can build any app you want.
Unlike most of the labs in this class, Lab 9 is submitted via Sakai. So, when you're done with your app, go to share it and get the link. Copy that and paste it in the Lab 9 Assignment in Sakai. All you have to do is paste that link and you're all set.
I do recommend you try the link to make sure it's working so you know I'll be able to view it. A great way to ensure it's working is to try pasting the link into a different browser from the one in which you completed Intro to App Lab.Lab 10 has three key tasks:
Through the completion of these tasks, students will demonstrate achievement of the following learning objectives:
You are starting to build your final project this week, a portfolio of your work in this class and in GSLIS, plus your reflection on this class and plans for continuing your technology education.
The first thing you are going to do is move all of your lab work to a new page called labs.html. If you want to paste all the lab work there on a long page, that's fine. If you want to create subpages under the labs.html page so that your labs.html page links to your comparison.html, usability.html, and treemap.html pages, that's fine too. The second approach is probably less work for you.
For your final project, your website needs to have the following pages:
You don't have to create the content of all these pages right now. You have the remainder of Module 4 for that. But for this lab you do have to create the shells for these pages. Each shell should have the following:
Now that you moved your lab work to a new page and created shells for all your new pages in your portfolio, you need to update your navbar. Make sure it links correctly to all your main pages and looks the same across all pages on the site.
If you created the labs.html page as a general overview of your labs with links to your other lab work pages, you might add drop-down menus in your navbar for your subpages.
Then, share all of your website with the world through FileZilla. You already know how to do this from the previous labs. Make sure all html files, your css file, and all your image files are uploaded in the lsc548webserver via FileZilla.
Once you've done this, your website should be live. Check it out using the URL assigned specifically to you. Once you see it working, you're all set. You don't have to do anything else to submit your Lab 10 assignment.
Lab 10 complete!