Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
<link href="//code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" type="text/css" />
<script src="//code.jquery.com/jquery.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.4.0/animate.min.css" rel="stylesheet" type="text/css" />
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="//cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.5/darkly/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-smooth-scroll/1.5.5/jquery.smooth-scroll.min.js"></script>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
  <title>Reading Scholarly Articles - SkillShop - Humboldt State University Library Library</title>
</head>
<body>
  
<section class="titleSection">
  <div class="content slide active firstContent container-fluid title firstTitle">
    <div class="row">
      <div class="col-sm-4"></div>
      <div class="col-sm-8">
        <h1>Reading Scholarly Articles</h1>
        <h2>Tim Miller &middot; twm2 &middot; 707.826.4959 &middot; Library 02 (Lower Level)</h2>
        <div class="attrib">All text, html, css &amp; js <a rel="license" href="http://creativecommons.org/licenses/by/4.0/"><img class="license" alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by/4.0/80x15.png" /></a> <a href="http://libguides.humboldt.edu/prf.php?account_id=55835" target="_blank" title="Profile for Tim Miller">Tim Miller</a> &middot; All photos &copy; <a href="https://www.flickr.com/photos/humboldtstate" target="_blank" title="HSU Flickr site">Humboldt State University</a></div>
      </div>
    </div>
  </div>
      <div class="transition"></div>
</section>
  
  <section>
    <div class="parallax">
    </div>
    <div class="content slide container-fluid title">
      <h2>Goals</h2>
      <div class="row">
        <div class="col-sm-2"></div>
        <div class="col-sm-8 bump">
          <h3 class="center">What do <strong>YOU</strong> hope to learn today?</h3>
        </div>
        <div class="col-sm-2"></div>
      </div>
    </div>
  </section>
  
  <section>
    <div class="parallax">
    </div>
    <div class="content slide container-fluid title">
      <h2>Goals</h2>
      <div class="row">
        <div class="col-sm-2"></div>
        <div class="col-sm-8 bump">
          <ul>
            <li>what does 'scholarly' mean?</li>
            <li>how can we find scholarly articles?</li>
            <li>what is the best way to read &amp; understand these articles?</li>
          </ul>
        </div>
        <div class="col-sm-2"></div>
      </div>
    </div>
  </section>
  
  <section>
    <div class="parallax">
    </div>
    <div class="content slide container-fluid title">
      <h2>What does 'scholarly' mean?</h2>
      <div class="row">
        <div class="col-sm-2"></div>
        <div class="col-sm-8">
          <ul>
            <li>Written by experts- usually academics or professionals</li>
            <li>Reflect research (study, literature review, observations)</li>
            <li>Written in a systematic and scientific manner</li>
          </ul>
        </div>
        <div class="col-sm-2"></div>
      </div>
    </div>
  </section>
  
  <section>
    <div class="parallax">
    </div>
    <div class="content slide container-fluid title">
      <h2>Scholarly articles
        may...</h2>
      <div class="row">
        <div class="col-sm-2"></div>
        <div class="col-sm-8 smaller">
          <ul>
            <li>Be 'Authoritative'
              <ul>
                <li>written by scholars or researchers in the field</li>
                <li>include technical terms and concepts</li>
                <li>peer-review: 
                  <blockquote>a peer-reviewed journal article is reviewed by other experts who check to ensure that the information is unbiased, the methodology is sound, and the information included is reliable and valid.</blockquote>
                </li>
              </ul>
            </li>
            <li>Include statistics, graphs, tables</li>
            <li>Refer to past &amp; future research
              <ul>
                <li>points of reference</li>
                <li>new areas to explore</li>
              </ul>
            </li>
          </ul>
        </div>
        <div class="col-sm-2"></div>
      </div>  
    </div>
  </section>
  
  <section>
    <div class="parallax">
    </div>
    <div class="content slide container-fluid title">
      <h2>Finding scholarly articles</h2>
      <div class="row">
        <div class="col-sm-2"></div>
        <div class="col-sm-8">
          <h3>Database filters limit to:</h3>
          <dl class="indent">
            <dt>scholarly</dt>
            <dd>written by scholars or professionals who are experts in their fields</dd>
          </dl>
          <dl class="indent">
            <dt>peer-review</dt>
            <dd>reviewed and evaluated by other experts</dd>
          </dl>
        </div>
        <div class="col-sm-2"></div>
      </div>  
    </div>
  </section>
  
  <section>
    <div class="parallax">
    </div>
    <div class="content slide container-fluid title">
      <h2>Filters in Ebsco</h2>
      <div class="row noBump">
        <div class="col-sm-2"></div>
        <div class="col-sm-8">
          <div class="imageCenter">
            <img src="http://users.humboldt.edu/tmiller/images/peerReviewAndDateFilters.gif" alt="">              
          </div>
        </div>
        <div class="col-sm-2"></div>
      </div>
    </div>
  </section>
  
  <section>
    <div class="parallax">
    </div>
    <div class="content slide container-fluid title">
      <h2>Filters in ProQuest</h2>
      <div class="row">
        <div class="col-sm-2"></div>
        <div class="col-sm-8">
          <div class="imageCenter">
            <img src="http://users.humboldt.edu/tmiller/images/peerReviewAndDateFiltersPQ.gif" alt="">              
          </div>
        </div>
        <div class="col-sm-2"></div>
      </div>
    </div>
  </section>
  
  <section>
    <div class="parallax">
    </div>
    <div class="content slide container-fluid title">
      <h2>Identifying scholarly articles</h2>
      <div class="row">
        <div class="col-sm-2"></div>
        <div class="col-sm-8">
          <ul>Look for:
            <li>plain format</li>
            <li>technical jargon- written for readers familiar with the field</li>
            <li>large number of citations &amp; references</li>
            <li>structure: abstract, introduction, methods, results, discussion, conclusion, references</li>
            <li>little or no advertising</li>
          </ul>
        </div>
        <div class="col-sm-2"></div>
      </div>
    </div>
  </section>
  
  <section>
    <div class="parallax">
    </div>
    <div class="content slide container-fluid title">
      <h2>Think about the author</h2>
      <div class="row">
        <div class="col-sm-2"></div>
        <div class="col-sm-8">
          <h3>While reading, think about:</h3>
          <ul>
            <li>What is the author's hypothesis/view?</li>
            <li>What does the abstract indicate?
              <ul>
                <li>Purpose</li>
                <li>Methods</li>
                <li>Conclusions</li>
              </ul>
            </li>
          </ul>
        </div>
        <div class="col-sm-2"></div>
      </div>
    </div>
  </section>
  
  <section>
    <div class="parallax">
    </div>
    <div class="content slide container-fluid title">
      <h2>Think about your needs</h2>
      <div class="row">
        <div class="col-sm-2"></div>
        <div class="col-sm-8">
          <ul class="bump">Before you begin reading the article:
            <li>What do you need from the article?</li>
            <li>What is the purpose of your paper/presentation?</li>
            <li>Evidence
              <ul>
                <li>Background information</li>
                <li>Support your hypothesis/view</li>
                <li>Recommendations</li>
                <li>Conclusions</li>
              </ul>
            </li>
          </ul>
        </div>
        <div class="col-sm-2"></div>
      </div>
    </div>
  </section>
  
  <section>
    <div class="parallax">
    </div>
    <div class="content slide container-fluid title">
      <h2>Structure of a Scholarly Article</h2>
      <div class="row">
        <div class="col-sm-2"></div>
        <div class="col-sm-8">
          <div class="noBullets clickydl">
            <dl>
              <dt class="concept">Abstract</dt>
              <dd class="explanation sr-only">&hellip;summary of the article</dd>
            </dl>
            <dl>
              <dt class="concept">Introduction</dt>
              <dd class="explanation sr-only">&hellip;background &amp; purpose</dd>
            </dl>
            <dl>
              <dt class="concept">Methods</dt>
              <dd class="explanation sr-only">&hellip;how the research was carried out</dd>
            </dl>
            <dl>
              <dt class="concept">Results</dt>
              <dd class="explanation sr-only">&hellip;the author's findings</dd>
            </dl>
            <dl>
              <dt class="concept">Discussion</dt>
              <dd class="explanation sr-only">&hellip;meaning of the results</dd>
            </dl>
            <dl>
              <dt class="concept">Conclusion</dt>
              <dd class="explanation sr-only">&hellip;the implications</dd>
            </dl>
            <dl>
              <dt class="concept">References</dt>
              <dd class="explanation sr-only">&hellip;what the author read</dd>
            </dl>
          </div>
        </div>
        <div class="col-sm-2"></div>
      </div>
    </div>
  </section>
  
  <section>
    <div class="parallax">
    </div>
    <div class="content slide container-fluid title">
      <h2>Reading</h2>
      <div class="row">
        <div class="col-sm-2"></div>
        <div class="col-sm-8">
          <ul class="noBullets">Skip around
            <li>You do not need to read EVERYTHING</li>
            <li>Read what applies to your topic</li>
          </ul>
          <ul class="noBullets">Look for useful content
            <li>Ideas that you might cite</li>
            <li>Specifics to help you narrow your topic</li>
          </ul>
          <h3>Example paper: <a href="https://output.jsbin.com/jazuva" class="button">jsbin.com/jazuva</a></h3>
        </div>
        <div class="col-sm-2"></div>
      </div>
    </div>
  </section>
<!--  
  <section>
    <div class="parallax">
    </div>
    <div class="content slide container-fluid title">
      <h2>Abstract</h2>
      <div class="row">
        <div class="col-md-2"></div>
        <div class="col-md-8 center">
          <img src="http://users.humboldt.edu/tmiller/images/readingAbstract.png" alt="Screen shot of the abstract of a scholarly article">
        </div>
        <div class="col-md-2"></div>
      </div>
    </div>
  </section>
  
  <section>
    <div class="parallax">
    </div>
    <div class="content slide container-fluid title">
      <h2>Introduction</h2>
      <div class="row">
        <div class="col-md-2"></div>
        <div class="col-md-8 center">
          <img src="http://users.humboldt.edu/tmiller/images/readingIntroduction.png" alt="Screen shot of the beginning of the introduction section of a scholarly article">
        </div>
        <div class="col-md-2"></div>
      </div>
    </div>
  </section>
  
  <section>
    <div class="parallax">
    </div>
    <div class="content slide container-fluid title">
      <h2>Discussion/Conclusion</h2>
      <div class="row">
        <div class="col-md-2"></div>
        <div class="col-md-8 center">
          <img src="http://users.humboldt.edu/tmiller/images/readingDiscussion.png" alt="Screen shot of the beginning of the discussion section of a scholarly article">
        </div>
        <div class="col-md-2"></div>
      </div>
    </div>
  </section>
  
  <section>
    <div class="parallax">
    </div>
    <div class="content slide container-fluid title">
      <h2>Methods</h2>
      <div class="row">
        <div class="col-md-2"></div>
        <div class="col-md-8 center">
          <img src="http://users.humboldt.edu/tmiller/images/readingMethods.png" alt="Screen shot of the beginning of the methods section of a scholarly article" class="imgBig">
        </div>
        <div class="col-md-2"></div>
      </div>
    </div>
  </section>
  
  
  <section>
    <div class="parallax">
    </div>
    <div class="content slide container-fluid title">
      <h2>Results</h2>
      <div class="row">
        <div class="col-md-2"></div>
        <div class="col-md-8 center">
          <img src="http://users.humboldt.edu/tmiller/images/readingResults.png" alt="Screen shot of the beginning of the results section of a scholarly article" class="imgBig">
        </div>
        <div class="col-md-2"></div>
      </div>
    </div>
  </section>
  -->
  
  <section>
    <div class="parallax">
    </div>
    <div class="content slide container-fluid title">
      <h2>Try It Out</h2>
      <div class="row">
        <div class="col-md-3"></div>
        <div class="col-md-6">
          <h3>In small groups, find:</h3>
          <ol>
            <li>Purpose of the article</li>
            <li>Overall conclusions</li>
            <li>Findings of their study</li>
            <li>Recommendations</li>
          </ol>
        </div>
        <div class="col-md-3"></div>
      </div>
    </div>
  </section>
  
  
  <section>
    <div class="parallax">
    </div>
    <div class="content slide container-fluid title">
      <h2>Writing</h2>
      <div class="row">
        <div class="col-md-1"></div>
        <div class="col-md-10">
          <dl>
            <dt>Quote - exact language
              <dd>enclose in quotation marks</dd>
              <dd>cite the source (in-text &amp; reference list)</dd>
            </dt>
          </dl>
          <dl>
            <dt>Paraphrase - your own words
              <dd>use significantly different language</dd>
              <dd>Cite the source (in-text &amp; reference list)</dd>
            </dt>
          </dl>
        </div>
        <div class="col-md-1"></div>
      </div>
    </div>
  </section>
  
  
  <section>
    <div class="parallax">
    </div>
    <div class="content slide container-fluid title">
      <h2>Writing</h2>
      <div class="row">
        <div class="col-md-1"></div>
        <div class="col-md-10">
          <dl>
            <dt>Avoid Plagiarism
            <dd>cite every idea you get from someone else</dd>
            <dd>use quotation marks with quotes</dd>
            <dd>make your paraphrasing significantly different from the original author's words</dd>
            </dt>
          </dl>
        </div>
        <div class="col-md-1"></div>
      </div>
    </div>
  </section>
​
​
  
  <!--
  <section>
    <div class="parallax">
    </div>
    <div class="content slide container-fluid title">
    </div>
  </section>
  -->
  
  <a href="" class="arrow"><span class="ion-chevron-down"></span><span class="hidden">Next</span></a>
  <div id="fullscreen"><span class="ion-arrow-expand"></span><span class="sr-only">Full screen</span></div>
  
  <div class="progress">
    <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="">  
    </div>
  </div>
  
</body>
</html>
 
@import url(//fonts.googleapis.com/css?family=Oswald:400,300,700);
@import url(//fonts.googleapis.com/css?family=Lato:400,300,700);
@import url(https://fonts.googleapis.com/css?family=Roboto:400,500,700,900,300);
​
html {
  font-size: 4vw;
}
​
body {
  background: #0F3542;
  font-family: roboto;
  color: #fff;
}
​
h1 {
  text-align: center;
  color: #000;
  font-family: roboto;
  font-size: 3rem;
  margin-bottom: 0;
  text-align: right;
}
​
h2 {
  font-size: 2.5rem;
  text-align: center;
  font-family: oswald;
}
​
.titleSection h2 {
  text-align: right;
  font-size: 1rem;
  color: #000;
}
​
.attrib {
  text-align: right;
  color: #000;
  font-size: 0.5rem;
}
​
.attrib a {
  text-decoration: none;
  border: none;
  color: #00396F;
}
​
.attrib a:hover {
  border: none; 
  color: #333;
}
​
img.license {
  border: none;
  border-radius: 0;
  width: 6vw;
}
​
h3 {
  font-family: roboto;
  font-size: 2rem;
}
​
h4 {
  font-family: roboto;
  font-size: 1.1rem;
}
​
ul, ol {
  font-weight: 700;
  font-size: 1rem;
}
​
ul {
  list-style-type: none;
}
​
ol>li {
  padding-left: 0;
}
​
li {
  font-weight: 400;
  padding-left: 1em;
}
​
dl {  
  font-size: 1rem;
}
​
dd {
  padding-left: 2em;
  text-indent: -1em;
}
​
.sectionA {
  background-image: url("https://c2.staticflickr.com/6/5506/11427908923_b8a04866ae_k.jpg");
  background-position: center top;
}
​
.sectionB {
  background-image: url("https://c2.staticflickr.com/6/5458/17225593305_209b316f52_k.jpg");
  background-position: center top;
}
​
.sectionC {
  background-image: url("https://c1.staticflickr.com/3/2931/13992140310_c4b404ca5d_k.jpg");
  background-position: center top;
}
​
.sectionD {
  background-image: url("https://c2.staticflickr.com/6/5156/13992117479_10cdc64939_k.jpg");
  background-position: center top;
}
​
.sectionE {
  background-image: url("https://c2.staticflickr.com/6/5756/23208425344_4dd3c2c3c3_k.jpg");
  background-position: center top;
}
​
section {
  position: relative;
  background-attachment: fixed;
  border-bottom: 10px solid rgba(15, 53, 66,1);
}
​
.content {
  background: rgba(15, 53, 66,0.9);
  border-top: 10px solid rgba(15, 53, 66,1);
}
​
.row {
  padding-top: 1em;
}
​
.noBump {
  padding-top: 0;
}
​
img {
  max-width: 90%;
}
​
.imgBig {
  width: 100%;
}
​
.imageCenter {
  text-align: center;
}
​
.imageCenter img {
  max-width: 80%;
}
​
.firstContent {
  background: none;
}
​
.firstTitle {
  text-align: right;
  background: rgba(255,255,255,0.5);
  position: absolute;
  width: 100%;
  border-top: none;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+1&0+0,0+0,0+0,1+100 */
background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.01) 10%, rgba(255,255,255,0.9) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.01) 10%,rgba(255,255,255,0.9) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,0.01) 10%,rgba(255,255,255,0.9) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 */
}
​
.titleSection {  
  background: url(https://c2.staticflickr.com/8/7446/16220079779_00e5f357ca_k.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  margin-bottom: 0;
  filter: grayscale(100%);
}
​
.parallax {
  background: transparent;
  height: 10px;
  width: 100%;
}
​
a {
  color: rgba(255,255,255, 1);
  border-bottom: 1rem solid rgba(255,255,255, 0.5);
}
​
a:hover {
  color: rgba(255,255,255, 0.8);
  text-decoration: none;
  border-bottom: 1rem solid rgba(255,255,255, 1);
}
​
a.arrow:hover {
  background: rgba(57, 57, 57,0.7);
  color: #fff;
}
​
a.arrow {
  position: fixed;
  bottom: 0.5vw;
  text-align: center;
  left: 47%;
  min-width: 45px;
  min-height: 45px;
  width: 5vw;
  height: 5vw;
  border-radius: 500px;
  line-height: 1.4;
  font-size: 32px;
  border: 4px solid #0F3542;
  background: rgba(255, 255, 255,0.4);
  color: rgba(50,50,50, 1);
  z-index: 1001;
}
​
.titleSlide a.arrow {
  bottom: -0.5em;
  background: rgba(255, 255, 0, 0.7);
  font-size: 4vw;
  height: 100px;
  width: 100px;
  line-height:1.5;
}
​
a.arrow.end {
  color: rgba(217, 83, 79, 1);
  font-size: 4vw;
  color: #fff;
  line-height: 0.4;
  background: none;
  border: none;
  bottom: 0.5em
}
​
a.arrow.end:hover {
  color: rgba(255, 255, 0, 1);
}
​
#fullscreen {
  position: fixed;
  bottom: 3%;
  right: 1%;
  text-align: center;
  line-height: 1.15;
  font-size: 3vw;
  width: 1.1em;
  height: 1.1em;
  border-radius: 50%;
  color: rgba(255, 255, 255, 1);
  background: rgba(31, 31, 31, 0.5);
}
​
#fullscreen:hover {
  cursor: pointer;
}
​
.pointer {
  cursor: pointer;
}  
​
.center {
  text-align:center;
}
​
.indent {
  padding-left: 1em;
}
​
blockquote {
  margin: 1em;
  padding: 0 0.5em;
  font-size: 0.75rem;
  background: rgba(0,0,0,0.3);
  border-left: 5px solid rgba(0,0,0,0.5);
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#1e5799+0,7db9e8+100&1+88,0+100 */
background: -moz-linear-gradient(left, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.3) 88%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0.3) 88%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0.3) 88%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
​
.progress {
  position: fixed;
  bottom: -2px;
  width: 100%;
  height: 14px;
  border-radius: 0;
  margin-bottom: 0;
}
​
.progress-bar {
  font-size: 14px !important;
  line-height: 0.95 !important;
  text-align: left;
}
​
ul.clickydl li {
  padding-left:none;
}
​
.concept {
  cursor:pointer;
  border: none;
  padding: 0;
  border-radius: none;
}
​
.clickydl dt, .clickydl dd {
  display: inline-block;
  margin-right: 1em;
}
​
.clickydl dd {
  color: yellow;
  margin-left: -2em;
}
​
a.button:link, a.button:hover, a.button:active, a.button:visited {
  background: rgb(60, 137, 63);
  border: 4px solid #fff;
  border-radius: 15px;
  padding: 5px 15px;
}
​
a.button:hover {
  border: 4px solid #fff;
  background: rgb(76, 175, 80);
}
​
@media (min-width: 768px) { 
  
  html {
    font-size: 2vw;
  }
  
  a.arrow {
    font-size: 4vw;
    line-height: 1.3;
  }
  
  ul, dl {
    font-size: 1.5rem;
  }
  
  .smaller ul {
    font-size: 1.2rem;
  }
  
  .clickydl dl {
    font-size: 1rem;
  }
​
  .clickydl dd {
    margin-left: 0em;
  }
  
  img {
    max-width: 100%;
  }
​
  .imageCenter img {
    max-width: 100%;
    width: 80%;
  }
  
  .imgBig {
    max-width: 100%;
    width: 100%;
  }
  
  .concept {
    cursor:pointer;
    border: 3px solid #fff;
    padding: 5px 15px;
    border-radius: 15px;
  }
  
}
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
sometimesmotionpro
0viewers