Difference between revisions of "Week 7"

Revision as of 07:41, 10 October 2017

This journal entry is due on Tuesday, October 17, at 12:01 AM PDT.

Overview

The purpose of this assignment is:

1. To have you enhance the gene page that you created in Week 4.
2. To introduce you to Ajax—the technique that allows web browsers to fetch data in a manner that is similar to curl.
3. To give you additional practice time with editing and managing files, editing HTML from first principles, and getting to know the data stored in biological databases.

Resources

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

• Bootstrap home page
• jQuery’s get function
• jQuery’s getJSON function
• Ajax starter code
• Handling Compressed Files

Grading

For this assignment, points will be assigned as follows:

• 10 points for your individual journal entry.
• 3 points for your shared journal entry.

Each partner will receive the same number of points for the shared web page. The individual journal entry and shared journal entry will be graded on an individual basis.

Individual Journal Assignment

• Store this journal entry as "username Week 7" (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.
  • To be clear, on your individual wiki page, you will document your individual process in your electronic lab notebook.
  • From this week onward, please use the individual journal page for your electronic lab notebook instead of a separate notebook page.
  • The deliverable, your gene's web page, will be shared. One web page per pair of students, linked to from your individual pages.

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.

Because you will be enhancing the web page that you created in Week 4, you get a second go-round with your homework partner from that week:

• Eddie Azinge, Antonio Porras (CLN1)
• Eddie Bachoura, Nicole Kalcic (ACT1)
• Mary Balducci, Arash Lari (HSF1)
• Dina Bashoura, John Lopez (ADH1)
• Blair Hamilton, Katie Wright (ASP1)
• Hayden Hinsch, Zach Van Ysseldyk (BRO1)
• Quinn Lanners, Emma Tyrnauer (ADA2)
• Corinne Wong, Simon Wroblewski (SPT15)

Favorite genes from that week are retained as well.

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.

• Note that opening a compressed file to view the contents is not the same as decompressing it. Files may not work properly if they are not decompressed.

“My Enhanced Favorite Gene”

With your homework partner, enhance the gene web page that you built in Week 4 using direct HTML code and Bootstrap.

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 ajax-starter.
   3. If necessary, download your “favorite gene” submission from Week 4.
2. Fire up your web server
   1. Copy the package.json file from the ajax-starter folder into your favorite gene folder.
   2. Run this command: npm install
   3. Run this command: npm start
   4. Connect to http://localhost:3474/your-favorite-gene-HTML-filename-here
3. Revise your original submission
   • Follow the feedback that was given to you from Week 4.
   • Change filenames if necessary.
   • Observe notes on missing or incorrect content.
4. Integrate one of the Ajax sources from ajax-starter into your page
   1. Copy the ajax-starter.js file from the ajax-starter folder into your page’s folder; rename as you see fit.
   2. Update the jQuery script tag to the one included in ajax-starter.html.
   3. Add the new script tag that loads the Ajax starter .js file into your web page.
   4. Feel free to revise the layout of the Ajax section; integrate it well into your pre-existing content.
   5. Modify the JavaScript code so that it loads your favorite gene instead of the hardcoded PBS2 gene.
5. Homework partners are to collaborate on one “favorite gene” page together, but still submit individual journal entry pages with their own acknowledgments and references sections. The individual journal entry pages would then link to the same uploaded .zip file.
6. Before creating your .zip file, make sure to delete the following items that were created by the npm install command:
   • node_modules folder
   • package-lock.json file

Spruce Up Your Page

• Make use of Bootstrap’s grid layout capabilities
• Make use of Bootstrap’s flexbox capabilities

Implement at least two (2) additional advanced Bootstrap features, such as but not limited to:

• Media object
• Tables
• Figures (i.e., images with captions)
• Cards (preformatted image + title + text combination)
• Carousel (slideshow-style image presentation)
• Collapsible elements
• Navigation elements
• Popovers

This aspect was optional in Week 4. This week, it’s required.

Content

Your favorite gene content should not change except for revisions requested by your Week 4 feedback.

Summary of Deliverables

Your Week 7 submission page should include:

• An uploaded .zip file of the folder containing the enhanced favorite gene page and any images used by your page, one per homework partner pair.
  • Don’t forget to delete node_modules and package-lock.json.
• Individually, your electronic notebook recording how you went about working on this assignment, with the requisite Acknowledgment and References sections as specified by the Week 1 assignment.

Note again that you are to work on the enhanced favorite gene page in pairs, with both of your journal entry pages linking to the same final upload. The rest of the content—electronic notebook, acknowledgments, references—remain individual.

Shared Journal Assignment

• Store your journal entry in the shared Class Journal Week 7 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

Reflect