Revision as of 02:42, 17 October 2017

Enhanced Favorite Gene Page

[insert .zip file]

Electronic Notebook

Page Corrections

Changing uploaded .zip

We changed the originally uploaded .zip, so that when it is opened, it goes to a folder instead of directly to the .html file. We also changed the name from our usernames to the name of our gene, and used all lowercase for our file names.

Adding images to page

We uploaded the images to Atom and inserted their file names into the code for the page, so the images were files instead of URL links.

Fixed gene ID links

We changed the hyperlinks, so when clicking on the gene ID, it goes straight to the gene's page instead of the database's main page.

Adding to compare/contrast

I added more details about what the different databases included for the compare/contrast section.

Fixed references

We fixed the Wikipedia link for first image, using the original Wikipedia page link instead of the Wikipedia file link. We also inserted in-text citations for all of the information on the page.

Spacing text on page

We placed all of the body code into a container, so the text on the page is spaced more in the center instead of right up against the side. To do this, we put <div class="container"> at the beginning of the body and </div> at the end of the body.

Spacing DNA sequence

We put <code> and </code> before and after the sequence to automatically line up the text, so it fits nicely in a box.

Enhancing Page

Installed Node Command Prompt

We typed cd and went to our favorite gene folder. Then we ran the command, npm install and then npm start. Then we connected to the localhost page for our webpage to operate from.

Using flexbox

We placed our in text citations for sections on our page in flex boxes. We entered <div class="d-flex justify-content-end"> and then <div class="p-2>"our citation"</div>. We closed the rest of the flex box with </div>.

Using grid layout

<div class="container">
  <div class="row">
    <div class="col">
      text 1
    </div>
    <div class="col">
      text 2
    </div>
    <div class="col">
      text 3
    </div>
  </div>
</div>

Adding collapse elements

We put our DNA and protein sequences in collapsing paragraphs with a link for the DNA sequence and a button for the protein sequence. To do this, we entered:

<p>
  <a class="btn btn-primary" data-toggle="collapse" href="#dnaseq" aria-expanded="false" aria-controls="dnaseq">
    DNA Sequence
  </a>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#protseq" aria-expanded="false" aria-controls="protseq">
    Protein Sequence
  </button>
</p>
<div class="collapse" id="dnaseq">
  <div class="card card-body">
    Our gene's DNA sequence
  </div>
</div> 
<div class="collapse" id="protseq">
  <div class="card card-body">
    Our gene's protein sequence
  </div>
</div>

Acknowledgments

1. I met with my partner, Simon Wroblewski, to work on our gene page together.
2. While I worked with the people noted above, this individual journal entry was completed by me and not copied from another source.

Cwong34 (talk) 15:39, 16 October 2017 (PDT)

References

1. LMU BioDB 2017. (2017). Week 7. Retrieved October 10, 2017, from https://xmlpipedb.cs.lmu.edu/biodb/fall2017/index.php/Week_7

cwong34

BIOL/CMSI 367-01: Biological Databases Fall 2017

Assignments

• Week 1
• Week 2
• Week 3
• Week 4
• Week 5
• Week 6
• Week 7
• Week 8
• Week 9
• Week 10
• Week 11
• Week 12
• Week 14
• Week 15

Journal Entries:

• cwong34 Week 2
• cwong34 Week 3
• cwong34 Week 4
• cwong34 Week 5
• cwong34 Week 6
• cwong34 Week 7
• cwong34 Week 8
• cwong34 Week 9
• cwong34 Week 10
• cwong34 Week 11
• cwong34 Week 12
• cwong34 Week 14
• cwong34 Week 15

Shared Journals:

• cwong34 Week 1 Journal
• cwong34 Week 2 Journal
• cwong34 Week 3 Journal
• cwong34 Week 4 Journal
• cwong34 Week 5 Journal
• cwong34 Week 6 Journal
• cwong34 Week 7 Journal
• cwong34 Week 8 Journal
• cwong34 Week 9 Journal
• cwong34 Week 10 Journal

Group Project

• Gene hAPI
• Gene hAPI Deliverables