Difference between revisions of "Cwong34 Week 7"

From LMU BioDB 2017
Jump to: navigation, search
(Edited electronic notebook format)
(Edited format)
Line 6: Line 6:
 
==Page Corrections==
 
==Page Corrections==
 
'''Changing uploaded .zip'''
 
'''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.
 
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'''
 
'''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.
 
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'''
 
'''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.
 
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'''
 
'''Adding to compare/contrast'''
 +
 
I added more details about what the different databases included for the compare/contrast section.
 
I added more details about what the different databases included for the compare/contrast section.
 +
 
'''Fixed references'''
 
'''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.
 
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'''
 
'''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 <code><nowiki><div class="container"></nowiki></code> at the beginning of the body and <code><nowiki></div></nowiki></code> at the end of the body.
 
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 <code><nowiki><div class="container"></nowiki></code> at the beginning of the body and <code><nowiki></div></nowiki></code> at the end of the body.
 +
 
'''Spacing DNA sequence'''
 
'''Spacing DNA sequence'''
 +
 
We put <code><nowiki><code></nowiki></code> and <code><nowiki></code></nowiki></code> before and after the sequence to automatically line up the text, so it fits nicely in a box.
 
We put <code><nowiki><code></nowiki></code> and <code><nowiki></code></nowiki></code> before and after the sequence to automatically line up the text, so it fits nicely in a box.
 
==Enhancing Page==
 
==Enhancing Page==
 
'''Installed Node Command Prompt'''
 
'''Installed Node Command Prompt'''
 +
 
We typed <code>cd</code> and went to our favorite gene folder. Then we ran the command, <code>npm install</code> and then <code>npm start</code>. Then we connected to the localhost page for our webpage to operate from.
 
We typed <code>cd</code> and went to our favorite gene folder. Then we ran the command, <code>npm install</code> and then <code>npm start</code>. Then we connected to the localhost page for our webpage to operate from.
 +
 
'''Using flexbox'''
 
'''Using flexbox'''
 +
 
We placed our in text citations for sections on our page in flex boxes. We entered <code><nowiki><div class="d-flex justify-content-end"></nowiki></code> and then <code><nowiki><div class="p-2>"our citation"</div></nowiki></code>. We closed the rest of the flex box with <code><nowiki></div></nowiki></code>.
 
We placed our in text citations for sections on our page in flex boxes. We entered <code><nowiki><div class="d-flex justify-content-end"></nowiki></code> and then <code><nowiki><div class="p-2>"our citation"</div></nowiki></code>. We closed the rest of the flex box with <code><nowiki></div></nowiki></code>.
 +
 
'''Using grid layout'''
 
'''Using grid layout'''
 +
 
We put our gene's name information and ID's in grids. To do this, we entered: <pre><nowiki><div class="container">
 
We put our gene's name information and ID's in grids. To do this, we entered: <pre><nowiki><div class="container">
 
   <div class="row">
 
   <div class="row">
Line 38: Line 56:
 
   </div>
 
   </div>
 
</div></nowiki></pre>
 
</div></nowiki></pre>
 +
 
'''Adding collapse elements'''
 
'''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:
 
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:
 
<pre><nowiki>
 
<pre><nowiki>

Revision as of 02:49, 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

We put our gene's name information and ID's in grids. To do this, we entered: 
<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

Journal Entries:

Shared Journals:

Group Project

Retrieved from "https://xmlpipedb.lmucs.io/biodb/fall2017/index.php?title=Cwong34_Week_7&oldid=2843"