Week 7

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 the Node Command Prompt from the Start menu.
   3. cd to the location of your favorite gene folder.
      • In this command line, the command to list files is dir, not ls.
   4. Run this command: npm install—you will only need to do this once after freshly copying your favorite gene folder.
   5. Run this command: npm start
   6. Connect to http://localhost:3474/your-favorite-gene-HTML-filename-here
      • I.e., open your browser and paste or type the URL shown above.
3. Revise your original submission
   • Follow the feedback that was given to you from Week 4.
   • See the "Common Points of Improvement" section for a list of top notes from the Week 4 feedback.
   • See the "Spruce Up Your Page" section for a list of enhancements to add to your page.
   • See the "Content" section below for a checklist of content to add or improve upon.
   • See the "Web API Preview" below for a checklist of additional functionality to add to your page from the ajax-starter code.
4. 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.
5. 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

Common Points of Improvement

The following points of improvement were frequently noted from the class's aggregate Week 4 gene pages:

• Name your folder and files after your favorite gene—don’t forget to retain the naming conventions. Also, gene names don’t have hyphens before their numbers (if any).
• Store your images in the same location as your HTML file, and link to them with a relative src attribute.
• Cite your data sources within the text more liberally.
• Format your references as formal scholarly citations, just as you would with a research paper.
• Provide adequate margins, especially from the edges of the browser window.
• Use a fixed-width font (the code or pre elements will suffice) for nucleotide and amino acid sequences.

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.

• Notably, if you are missing a summary paragraph about your gene, please add it.
• Make sure that your image has a title and a descriptive legend so the viewer knows what he or she is looking at.
• Your page should have appropriate in text citations throughout to the source of your information. The references list at the end should be formatted in APA format. Citations to websites should have active links in their URLs with a date of last access.

Web API Preview

Integrate two of the four Ajax sources—one XML and one JSON—from ajax-starter into your page.

1. Copy the ajax-starter.js file from the ajax-starter folder into your page’s folder; rename this after your favorite gene (but with a .js extension).
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 sample Ajax user interface; 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.
   • You might need to return to the gene database websites in order to figure out the right ID to supply in the URL requests to your chosen source’s web services.

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.
  • Refer to the above sections for a checklist of items to include with your enhanced page.
  • Don’t forget to delete node_modules and package-lock.json before creating the .zip file.
• 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).

Reflect

At this point in the course, you have been exposed to some ways for handling digital data which may have been unfamiliar to you before:

• The format of data and the program that manipulates this format is no longer a one-to-one connection (i.e., double-clicking a file is not the only viable option)
• Data may have the same content and meaning (semantics) but be provided in different formats (syntax)
• The use of the right tool (e.g., sed) can transform data from one syntax to another in order to make it usable by different systems (e.g., Week 3 HTML cleanup exercise; Week 5’s A Quick Relational Database Tour)
• Biological databases such as from the NAR Database Issue may store data with similar content (particularly if they are secondary sources) but do not have a completely uniform or standard set of formats available for download
• Even for data meant to be exchanged between computers, such as the ones you saw in this assignment, formats may vary (e.g., XML and JSON)

Given this context, answer the following questions:

1. How confident do you feel at this point about handling this data diversity? If you were given data in one format, do you feel that you would be able to find ways to read this format or to convert the data to a different one?
2. Do you think there will ever be “one true data format” for biological databases? Why or why not?
3. Considering your emphasis coming into this class (e.g., biology, computer science, etc.), how would you evaluate your exposure beyond your comfort zone so far? Is it too much? Too little? Just right? Any specific areas that you would like to encounter?