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>Getting the Most Out of Google Scholar - SkillShop - Humboldt State University Library</title>
</head>
<body>
  
<section class="titleSection">
  <div class="content slide active firstContent container-fluid title firstTitle">
    <div class="row">
      <div class="col-sm-3"></div>
      <div class="col-sm-9 titles">
        <h1>Getting the Most Out of Google Scholar</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> 
          <br>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-1"></div>
        <div class="col-sm-10 bump">
          <h3 class="center">What do YOU want to learn?</h3>
        </div>
        <div class="col-sm-1"></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>explore how Google Scholar works</li>
            <li>connect your results to HSU</li>
            <li>talk about search strategies</li>
            <li>use some advanced search features</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>How it works</h2>
      <div class="row noBump">
        <div class="col-sm-1"></div>
        <div class="col-sm-4">
          <h3>Google...</h3>
          <ul>
            <li>scans the web for information using programs called 'web crawlers.'</li>
            <li>stores this information so that it can be searched.</li>
          </ul>
        </div>
        <div class="col-sm-6 imageCenter">
           <a href="https://www.flickr.com/photos/_after8_/3128047307/" target="_blank" title="Global internet map’09 by Régis Gaidot, on Flickr"><img src="https://farm4.static.flickr.com/3123/3128047307_15911f4efd.jpg" alt="Global internet map’09 by Régis Gaidot, on Flickr" class="imgBig"></a>
          <div class="cc">Global internet map’09 - CC BY-NC 2.0 - by <a href="https://www.flickr.com/photos/_after8_/" target="_blank" title="Régis Gaidot on Flickr">Régis Gaidot</a></div>
        </div>
        <div class="col-sm-1"></div>
      </div>
    </div>
  </section>
  
  <section>
    <div class="parallax">
    </div>
    <div class="content slide container-fluid title">
      <h2>Metadata</h2>
      <div class="row">
        <div class="col-sm-1"></div>
        <div class="col-sm-4">
          <ul>
            <li>'data about data'</li>
            <li>describes information</li>
            <li>web crawlers look for metadata</li>
          </ul>
        </div>
        <div class="col-sm-6">
          <figure class="imageCenter">
            <img src="http://users.humboldt.edu/tmiller/images/metadataFlickr.png" alt="Screenshots of Flickr metadata for a photo">
          </figure>
        </div>
        <div class="col-sm-1"></div>
      </div>
    </div>
  </section>
  
  <section>
    <div class="parallax">
    </div>
    <div class="content slide container-fluid title">
      <h2>Article Metadata</h2>
      <div class="row">
        <div class="col-sm-1"></div>
        <div class="col-sm-4">
          <ul>
            <li>title, author, publication date, journal</li>
            <li>abstract</li>
            <li>text</li>
            <li>cited by</li>
          </ul>
        </div>
        <div class="col-sm-7">
          <figure class="imageCenter">
            <img src="http://users.humboldt.edu/tmiller/images/GSresult.png" alt="Screenshot of article information from Google Scholar">
          </figure>
        </div>
      </div>
    </div>
  </section>
  
  <section>
    <div class="parallax">
    </div>
    <div class="content slide container-fluid title">
      <h2>Think Like Google</h2>
      <div class="row">
        <div class="col-sm-1"></div>
        <div class="col-sm-4">
          <h3>Use the metadata in your search</h3>
        </div>
        <div class="col-sm-6">
          <figure class="imageCenter imgBig">
            <img src="http://users.humboldt.edu/tmiller/images/GSresult.png" alt="Screenshot of article information from Google Scholar">
          </figure>
          <div class="row">
            <div class="col-xs-1"></div>
            <div class="col-xs-5">
              <ul class="bullets">
                <li>racist</li>
                <li>gun control</li>
                <li>laws</li>
              </ul>
            </div>
            <div class="col-xs-5">
              <ul class="bullets">
                <li>1994</li>
                <li>Cramer</li>
              </ul>
            </div>
            <div class="col-xs-1"></div>
          </div>
        </div>
        <div class="col-sm-1"></div>
      </div>
    </div>
  </section>
  
  <section>
    <div class="parallax">
    </div>
    <div class="content slide container-fluid title">
      <h2>World Wide Web</h2>
      <div class="row noBump">
        <div class="col-sm-1"></div>
        <div class="col-sm-4">
          <ul>
            <li>written in HTML &amp; CSS</li>
            <li>additional format types: pdf, docx, jpeg</li>
            <li>inaccessible areas: 'Hidden Web'</li>
              <ul>
                <li>~500 times larger than searchable web</li>
                <li>made up of databases, documents, other formats</li>
              </ul>
​
          </ul>
        </div>
        <div class="col-sm-6 imageCenter">
          <a href="https://www.flickr.com/photos/frauleinschiller/4702688723/" title="Flickr page for photo" target="_blank"><img src="https://c1.staticflickr.com/5/4054/4702688723_b2acc8de49_b.jpg" alt="Artist's drawing of world wide web" class="imgBig"></a>
          <div class="cc">Tim Berners-Lee: The World Wide Web - Opportunity, Challenge, Responsibility - CC BY-NC-ND 2.0 - by <a href="https://www.flickr.com/photos/frauleinschiller/" title="Anna Lena Schiller on Flickr" target="_blank">Anna Lena Schiller</a></div>
        </div>
        <div class="col-sm-1"></div>
      </div>  
    </div>
  </section>
  
  <section>
    <div class="parallax">
    </div>
    <div class="content slide container-fluid title">
      <h2>Article Databases</h2>
      <div class="row">
        <div class="col-sm-1"></div>
        <div class="col-sm-4">
          <ul>
            <li>subscription (pay) services</li>
            <li>store &amp; index full text copies of articles</li>
            <li>Google Scholar is NOT a database</li>
            <li>GS only links to full text copies of articles</li>
          </ul>
        </div>
        <div class="col-sm-6 imageCenter">
          <img src="http://users.humboldt.edu/tmiller/images/dbSearchBoxes.png" alt="Screenshots of database search boxes">
        </div>
        <div class="col-sm-1"></div>
      </div>
    </div>
  </section>
  
  <section>
    <div class="parallax">
    </div>
    <div class="content slide container-fluid title">
      <h2>Google Scholar</h2>
      <div class="row">
        <div class="col-sm-1"></div>
        <div class="col-sm-4">
          <h3>Finding full text</h3>
          <ul>
            <li>searches for and provides links to articles</li>
            <li>some links are paid</li>
            <li>others are old or bad</li>
          </ul>
        </div>
        <div class="col-sm-6">
          <figure class="imageCenter">
            <img src="http://users.humboldt.edu/tmiller/images/GSpay404.png" alt="Screenshots of Google 404 error and paywall for database">
          </figure>
        </div>
        <div class="col-sm-1"></div>
      </div>
    </div>
  </section>
  
  <section>
    <div class="parallax">
    </div>
    <div class="content slide container-fluid title">
      <h2>Google Scholar</h2>
      <div class="row">
        <div class="col-sm-1"></div>
        <div class="col-sm-4">
          <h3>Link your results to HSU</h3>
          <ul>
            <li>link to HSU free full text</li>
            <li>Chrome extension</li>
          </ul>
        </div>
        <div class="col-sm-6">
          <figure class="imageCenter imgBig">
            <img src="http://users.humboldt.edu/tmiller/images/GSlinks.png" alt="Screenshots of Google links and plugin">
          </figure>
        </div>
        <div class="col-sm-1"></div>
      </div>
    </div>
  </section>
  
  <section>
    <div class="parallax">
    </div>
    <div class="content slide container-fluid title">
      <h2>GS Search Strategies</h2>
      <div class="row">
        <div class="col-sm-2"></div>
        <div class="col-sm-3">
          <h3>Searching</h3>
          <ul>
            <li>Advanced search</li>
            <li>Operators</li>
            <li>filter to date</li>
          </ul>
        </div>
        <div class="col-sm-6">
          <figure class="imageCenter imgBig">
            <img src="http://users.humboldt.edu/tmiller/images/GSadvSearch.png" alt="Screenshot of Google Scholar advanced search options">
          </figure>
        </div>
        <div class="col-sm-1"></div>
      </div>
    </div>
  </section>
  
  <section>
    <div class="parallax">
    </div>
    <div class="content slide container-fluid title">
      <h2>GS Search Strategies</h2>
      <div class="row">
        <div class="col-sm-2"></div>
        <div class="col-sm-3">
          <h3>Deeper Searching</h3>
          <ul>
            <li>related articles</li>
            <li>cited by</li>
            <li>author</li>
          </ul>
        </div>
        <div class="col-sm-6">
          <figure class="imageCenter">
            <img src="http://users.humboldt.edu/tmiller/images/GSdetails.png" alt="Screenshot of Google Scholar search results details" class="imgBig">
          </figure>
        </div>
        <div class="col-sm-1"></div>
      </div>
    </div>
  </section>
  
  <section>
    <div class="parallax">
    </div>
    <div class="content slide container-fluid title">
      <h2>GS Search Strategies</h2>
      <div class="row">
        <div class="col-sm-2"></div>
        <div class="col-sm-3">
          <h3>Saving</h3>
          <ul>
            <li>full text</li>
            <li>grab citation</li>
            <li>my library</li>
          </ul>
        </div>
        <div class="col-sm-6">
          <figure class="imageCenter">
            <img src="http://users.humboldt.edu/tmiller/images/GSlibrary.png" alt="Screenshot of Google Scholar 'My Library'" class="imgBig">
          </figure>
        </div>
        <div class="col-sm-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: #F14E1B;
  font-family: roboto;
  font-size: 1rem;
  color: #fff;
}
​
h1 {
  color: #000;
  font-family: roboto;
  margin-top: 2em;
  font-size: 3rem;
  text-align: right;
}
​
h2 {
  font-size: 2.5rem;
  text-align: center;
  font-family: oswald;
}
​
.titleSection h2 {
  text-align: right;
  font-size: 1rem;
  color: #000;
}
​
​
h3 {
  font-family: roboto;
  font-size: 2rem;
}
​
h4 {
  font-family: roboto;
  font-size: 1.1rem;
}
​
.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;
}
​
.cc {
  font-size: 1vw;
  color: #fff;
}
​
.cc a {
  color: #fff;
  text-decoration: none;
  border-bottom: 6px solid rgba(255,255,255,0.5);
}
​
.cc a:link, .cc a:hover, .cc a:visited, .cc a:active {
  color: #fff;
  text-decoration: none;
  border-bottom: 6px solid rgba(255,255,255,0.5);
}
​
.cc a:hover {
  border-bottom: 6px solid rgba(255,255,255,0.9);
}
​
img.license {
  border: none;
  border-radius: 0;
  width: 6vw;
}
​
ul {
  font-weight: 700;
  list-style-type: none;
  font-size: 1rem;
}
​
ul.bullets {
  list-style-type: disc;
}
​
ol {
  font-weight: 700;
  font-size: 1rem;
}
​
ol>li {
  padding-left: 0;
  font-size: 1rem;
}
​
li {
  font-weight: 400;
  padding-left: 1em;
  text-indent: -1em;
}
​
dl {  
  font-size: 1rem;
}
​
dd {
  padding-left: 2em;
  text-indent: -1em;
}
​
.sectionA {
  background-image: url("https://c1.staticflickr.com/9/8508/8580654507_0581f07d4b_o.jpg");
  background-position: center;
}
​
.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;
}
​
.sectionE {
  background-image: url("https://c2.staticflickr.com/6/5756/23208425344_4dd3c2c3c3_k.jpg");
  background-position: center top;
}
​
.titleSection {  
  background: url(https://c2.staticflickr.com/6/5506/11427908923_32dcccb5d1_o.jpg);
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
  background-attachment: fixed;
  margin-bottom: 0;
  filter: grayscale(100%);
}
​
section {
  position: relative;
  background-attachment: fixed;
  border-bottom: 10px solid rgba(241, 78, 27,1);
}
​
.content {
  background: rgba(241, 78, 27,0.9);
  border-top: 10px solid rgba(241, 78, 27,1);
}
​
.row {
  padding-top: 1em;
}
​
.row .row {
  padding-top: 0.25em;
}
​
.noBump {
  padding-top: 0;
}
​
img {
  max-width: 80%;
}
​
.imageCenter {
  text-align: center;
}
​
.imageCenter img {
  max-width: 60%;
}
  
.imgBig img {
  max-width: 100%;
  width: 90%;
}
​
.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+100&0+0,1+90 */
background: -moz-linear-gradient(-45deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 90%, rgba(255,255,255,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 90%,rgba(255,255,255,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 90%,rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
​
.parallax {
  background: transparent;
  height: 10px;
  width: 100%;
}
​
a {
  color: rgba(100, 100, 100, 1);
  border-bottom: 1px dotted rgba(100, 100, 100, 1);
}
​
a:hover {
  color: rgba(100, 100, 100, 1);
  text-decoration: none;
  border-bottom: 2px solid rgba(100, 100, 100, 1);
}
​
a.arrow:hover {
  background: rgba(57, 57, 57,0.7);
  color: #fff;
}
​
a.arrow {
  position: fixed;
  font-size: 32px;
  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;
  border: 4px solid rgb(50,50,50);
  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);
  height: 100px;
  width: 100px;
  line-height:1.5;
}
​
a.arrow.end {
  color: rgba(217, 83, 79, 1);
  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;
}
​
.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;
}
​
.videoWrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    height: 0;
}
​
.videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
​
@media (min-width: 768px) { 
  
  html {
    font-size: 2.5vw;
  }
  
  a.arrow {
    font-size: 4vw;
    line-height: 1.3;
  }
  
  img {
    max-width: 100%;
  }
​
  .imageCenter img {
    max-width: 100%;
    width: 80%;
  }
  
  .imgBig {
    max-width: 100%;
    width: 100%;
  }
  
}
Output

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

Dismiss x
public
Bin info
sometimesmotionpro
0viewers