Session 15: Grab Bag

Harvard Extension School  
Fall 2020

Course Web Site: https://cscie12.dce.harvard.edu/

brown bag

Topics

  1. Wrapping Up
  2. Search Engines and Optimization
  3. Most Relevant JavaScript Functions for a Webpage
  4. HTTP Cookies
  5. HTML5 Microdata (part of Semantic Web)
  6. Accessibility
  7. Oh, The Places You'll Go!

Session 15: Grab Bag, slide1
Wrapping Up, slide2
Search Engines and Optimization, slide3
Content: meta tags, slide4
Search Robots, Crawlers, Spiders, slide5
robots.txt and Examples, slide6
Robots meta element in markup, slide7
Most Relevant JavaScript Functions for a Webpage, slide8
HTTP Cookies, slide9
Cookie Example, slide10
Cookies and Session IDs, slide11
HTML5 Microdata (part of Semantic Web), slide12
HTML5: microdata, slide13
Accessibility, slide14
Accessibility: Getting Started, slide15
Oh, The Places You'll Go!, slide16

Presentation contains 16 slides

Wrapping Up

Search Engines and Optimization

Content: meta tags

meta tags and Metadata Guidelines (W3 EOWG)

meta elements from Harvard University:

<meta property="twitter:account_id" content="1491443782" />
<meta name="twitter:site" content="@harvard">
<meta name="twitter:creator" content="@harvard">
<meta name="twitter:card" content="summary_large_image">

<meta property="og:site_name" content="Harvard University"/>
<meta property="og:type" content="university"/>
<meta property="og:title" content="Harvard University"/>
<meta property="og:url"
  content="https://www.harvard.edu"/>
<meta property="og:description" content="Harvard University is devoted to excellence in
teaching, learning, and research, and to developing leaders
in many disciplines who make a difference globally.
Harvard University is made up of 11 principal academic units."/>
<meta property="og:image"
  content="https://www.harvard.edu/sites/default/files/default_images/harvard-social1200.jpg"/>

Search Robots, Crawlers, Spiders

Three mechanisms to instruct robots that visit your site:

  1. robots.txt file
  2. robots meta tag
  3. rel="nofollow" for a elements

robots.txt and Examples

Two directives:
Note: robots.txt must be at the root level of the server.

Check out some real robots.txt files!

Robots meta element in markup

<meta name="robots" content="noindex,nofollow" />

The Robots meta element can be used on a per document basis.

HTTP Header: X-Robots-Tag

Most Relevant JavaScript Functions for a Webpage

HTTP Cookies

HTTP Cookies

HTTP is a stateless protocol. Cookies provide a mechanism to "maintain state", track users, and provide personalization.

Cookie Example

ESPN Cookies

set-cookie: edition=espn-en-us; path=/; Expires=Thu, 30 Jul 2020 20:18:00 GMT;
set-cookie: edition-view=espn-en-us; path=/; Expires=Thu, 30 Jul 2020 20:18:00 GMT;
set-cookie: connectionspeed=full; path=/; Expires=Thu, 30 Jul 2020 20:18:00 GMT;
set-cookie: country=us; path=/;
set-cookie: region=unknown; path=/; Expires=Thu, 30 Jul 2020 20:18:00 GMT;
set-cookie: _dcf=1; path=/; Expires=Thu, 30 Jul 2020 20:18:00 GMT;
set-cookie: SWID=13DEEEC4-564E-4A9A-CA91-D6978548D894; path=/; Expires=Mon, 23 Jul 2040 20:18:00 GMT; domain=espn.com;

Your Cookies

Firefox Cookies
Firefox Cookie Manager

Chrome - Cookies
cookies in chrome

Cookies and Session IDs

A UserID or SessionID (a long character/number string that is uniquely assigned) is often stored in cookie. The SessionID is used as the key or identifier when storing information about the user or session.

For example, a user logs in to a site. If the username and password match, the server sets a cookie ("Set-Cookie") in the browser that contains a session id; the server also makes an entry in website database that maps the session id to the username. When the cookie is returned, the session id is read and the username is looked up in the database.

http cookie illustration

HTML5 Microdata (part of Semantic Web)

The Semantic Web

In addition to the classic "Web of documents" W3C is helping to build a technology stack to support a “Web of data,” the sort of data you find in databases. The ultimate goal of the Web of data is to enable computers to do more useful work and to develop systems that can support trusted interactions over the network. The term “Semantic Web” refers to W3C’s vision of the Web of linked data. Semantic Web technologies enable people to create data stores on the Web, build vocabularies, and write rules for handling data. Linked data are empowered by technologies such as RDF, SPARQL, OWL, and SKOS.

Semantic Web Content

HTML5: microdata

Vocabularies for:

See schema.org for more informatino about vocabularies

Microdata Example


<div itemscope="" itemtype="https://schema.org/WebPage">
  <h1 itemprop="name">Lecture 12: Graphs, networks, incidence matrices</h1>
  <p itemprop="description">These video lectures of Professor Gilbert
    Strang teaching 18.06 were  recorded in Fall 1999 and do not
    correspond precisely to the current  edition of the textbook.</p>
  <div itemprop="publisher" itemscope="" itemtype="https://schema.org/CollegeOrUniversity">
    <h4 class="footer">About <span itemprop="name">MIT OpenCourseWare</span></h4>
  </div>
  <a itemprop="license"
    rel="license" href="http://creativecommons.org/licenses/by-nc-sa/3.0/us/deed.en_US"><img
    src="/images/cc_by-nc-sa.png" alt="Creative Commons logo with terms BY-NC-SA." /></a>
</div>

Lecture 12: Graphs, networks, incidence matrices

These video lectures of Professor Gilbert Strang teaching 18.06 were recorded in Fall 1999 and do not correspond precisely to the current edition of the textbook.

About MIT OpenCourseWare
Creative Commons logo with terms BY-NC-SA.

Accessibility

The power of the Web is in its universality.
Access by everyone regardless of disability is an essential aspect.

Tim Berners-Lee, W3C Director and inventor of the World Wide Web

Things to know about:

Accessibility: Getting Started

Oh, The Places You'll Go!

oh the places you'll go