Cwong34 Week 7

From LMU BioDB 2017
Jump to: navigation, search

Enhanced Favorite Gene Page

Our Webpage 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>

Using figure format for images

We used the code for figures, so we could add a caption to our images. To do this we entered: 

<figure class="figure">
  <img src="..." class="figure-img img-fluid rounded" alt="A picture of ...">
  <figcaption class="figure-caption">Our figure caption.</figcaption>
</figure>

Adding Web API Preview

We copied the ajax-starter file into our page's folder and renamed it spt15.js. Then we updated the jQuery script tag in our page to what's in ajax-starter.html and added our new java script source script tag to our page. We added the sections of the databases we wanted (UniProt and SGD) from the ajax-starter.html code to our page. We changed the links in the spt15.js to load our gene's page.

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
  2. Saccharomyces Genome Database. (2017). SPT15/YER148W Overview. Retrieved October 16, 2017, from https://www.yeastgenome.org/locus/S000000950
  3. NCBI. (2017). SPT15 TATA-binding protein [ Saccharomyces cerevisiae S288C ]. Retrieved October 16, 2017, from https://www.ncbi.nlm.nih.gov/gene/856891
  4. Ensembl. (2017). Gene: SPT15 YER148W. Retrieved October 16, 2017, from https://www.ensembl.org/Saccharomyces_cerevisiae/Gene/Summary?db=core;g=YER148W;r=V:465303-466025;t=YER148W
  5. UniPort. (2017). UniProtKB - P13393 (TBP_YEAST). Retrieved October 16, 2017, from http://www.uniprot.org/uniprot/P13393

cwong34

BIOL/CMSI 367-01: Biological Databases Fall 2017

Assignments

Journal Entries:

Shared Journals:

Group Project

Retrieved from "https://xmlpipedb.cs.lmu.edu/biodb/fall2017/index.php?title=Cwong34_Week_7&oldid=2861"