Difference between revisions of "Week 4"

Revision as of 01:23, 17 September 2017

This journal entry is due on Tuesday, September 26, at 12:01 AM PDT.

Overview

The purpose of this assignment is:

1. To have you build a web page in code from first principles, with solely the help of one popular web authoring toolkit, Bootstrap.
2. To acquaint you with the information that is typically documented, gathered, or collected regarding a gene.
3. To give you additional practice time with editing and managing files.

These resources will be of direct help in completing the assignment:

• Bootstrap home page
• Starter files
• Handling Compressed Files

Individual Journal Assignment

• Store this journal entry as "username Week 4" (i.e., this is the text to place between the square brackets when you link to this page).
• Link from your user page to this Assignment page.
• Link to your journal entry from your user page.
• Link back from your journal entry to your user page.
• Don't forget to add the "Journal Entry" category to the end of your wiki page.
  • Note: You can easily fulfill all of these links by adding them to your template and then using your template on your journal entry.
• For your assignment this week, you will keep an electronic laboratory notebook on your individual wiki page. An electronic laboratory notebook records all the manipulations you perform on the data and the answers to the questions throughout the protocol. Like a paper lab notebook found in a wet lab, it should contain enough information so that you or someone else could reproduce what you did using only the information from the notebook.

Homework Partners

For most weeks in the semester, you will be assigned a "homework partner" from a complementary discipline. You will be expected to consult with your partner, sharing your domain expertise, in order to complete the assignment. However, unless otherwise stated, each partner must submit his or her own work as the individual journal entry (direct copies of each other's work is not allowed). You must give the details of the interaction with your partner in the Acknowledgments section of your journal assignment. Homework partners for this week are:

• Eddie Azinge, Antonio Porras
• Eddie Bachoura, Nicole Kalcic
• Mary Balducci, Arash Lari
• Dina Bashoura, John Lopez
• Blair Hamilton, Katie Wright
• Hayden Hinsch, Zach Van Ysseldyk
• Quinn Lanners, Emma Tyrnauer
• Corinne Wong, Simon Wroblewski

Software Requirements for this Assignment

The computers in Seaver 120 are already set up for this assignment, and do not require any setup for you to do this week’s work:

• Google Chrome with Developer Tools for viewing your work in progress
• A code-ready editor for editing your work in progress; this includes but is not limited to:
  • Atom
  • Microsoft Visual Studio Code
• A file compression/decompression utility that can compress/decompress .zip files. Many operating systems also have this functionality built-in; the Seaver 120 computers also have 7-Zip installed.

If you would like to do this work on your computer, you will need the same applications as listed above. All applications are available for both Windows and macOS. Each operating system also capable of handling .zip files out of the box.

“My Favorite Gene”

Author a web page using direct HTML code and Bootstrap that displays the relevant information for a “favorite gene.” (OK, so maybe you don’t really have a favorite gene—but it makes for a fun assignment title)

Method

1. Prepare your files
   1. Download the starter files that have been uploaded to this wiki.
   2. Unzip the file using 7zip or an equivalent utility. You should get a folder called bootstrap-starter.
   3. Rename the folder to your chosen gene (see below). Keep the name in lowercase and separate words with hyphens (like bootstrap-starter itself). This is a naming convention that is typically used for files that are intended to be served from a website.
   4. Rename the starter-page.html file within the folder to that of your chosen gene with a file extension of .html. Use the same naming convention as the containing folder.
   5. Delete the grnsight-screenshot.png file.
2. Work on your page—this is not strictly sequential; it will consist of some combination of:
   • Edit pre-existing HTML (such as the title) to customize its content for your gene.
   • Browse the Bootstrap website for presentation styles or formats that appeal to you. Copy and paste the sample HTML into your page and edit/customize as needed.
   • Download any applicable images to your working folder and use img tags to display them on your page.
   • Keep your HTML file open in a web browser and refresh it every time you make an edit, in order to see how it looks.
3. Compress your folder into a .zip file and upload it to the wiki.
4. Provide a downloadable link to this file on your individual journal page. Because the .zip file comprises the entire deliverable for this assignment, you may also use this individual journal page as your electronic notebook for this week.

Things to Try

For this assignment, we are focused primarily on simplicity and content. However, you are free to experiment with various Bootstrap features if you find them interesting and would like to use them in your page. Using a Bootstrap feature is fairly straightforward:

1. Locate the sample code for the feature.
2. Copy the sample code into your HTML file.
3. Customize the sample code to suit your content.

Features of interest, with corresponding links:

• Grid layout
• Media object
• Headings, text formats, lists
• Tables
• Figures (i.e., images with captions)
• Cards (preformatted image + title + text combination)
• Carousel (slideshow-style image presentation)
• Collapsible elements
• Borders and rounded corners
• Preset colors
• Text alignment, capitalization, and style

Note, this aspect is optional. If it feels overwhelming, then just stick to the basics and focus on the information about your chosen gene.

Content

Summary of Deliverables

Your Week 4 submission page should include:

• A downloadable link to the .zip file of the folder containing your favorite gene page and any images used by your page
• The electronic notebook recording how you went about working on this assignment

Shared Journal Assignment

• Store your journal entry in the shared Class Journal Week 4 page. If this page does not exist yet, go ahead and create it (congratulations on getting in first 👏🏼)
• Link to your journal entry from your user page.
• Link back from the journal entry to your user page.
  • NOTE: You can easily fulfill the links part of these instructions by adding them to your template and using the template on your user page.
• Sign your portion of the journal with the standard wiki signature shortcut (~~~~).
• Add the "Journal Entry" and "Shared" categories to the end of the wiki page (if someone has not already done so).

Read/Watch

• What is Code Parts 3 and 4: “Why are Programmers So Intense About Languages?” and “Why are Coders Angry?” (are you?)
• Official award citation to Sir Tim Berners-Lee, the 2016 Turing Award winner
• Weaving the Web: A profile and video to commemorate Sir Tim Berners-Lee’s award
• Tim Berners-Lee et al, The World-Wide Web (1994), Communications of the ACM, Volume 37, Issue 8, pp. 76–82.

Reflect

1. Based on these readings:
   • Did you code in a language for this assignment?
   • Did you use a standard library?
   • Do you understand what Paul Ford meant about coders being “angry?”
2. How similar or different do you think Tim Berners-Lee’s original vision for The World-Wide Web is from today’s web? State ways where you think today’s web is better, and today’s web is worse.