Session 15: Grab Bag

Harvard Extension School  
Fall 2021

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

brown bag

Topics

  1. Wrapping Up
  2. Most Relevant JavaScript Functions for a Webpage
  3. Microdata, RDFa, JSON-LD - Linked Data in HTML5
  4. data-* Attributes of HTML5
  5. JavaScript Frameworks - Vue, React, Angular, Ember
  6. Oh, The Places You'll Go!
  7. Thank You

Session 15: Grab Bag, slide1
Wrapping Up, slide2
Most Relevant JavaScript Functions for a Webpage, slide3
Microdata, RDFa, JSON-LD - Linked Data in HTML5, slide4
HTML5: microdata, slide5
data-* Attributes of HTML5, slide6
JavaScript Frameworks - Vue, React, Angular, Ember, slide7
CSCI E-12 Resources, slide8
Approaches to eCommerce, slide9
Oh, The Places You'll Go!, slide10
Thank You, slide11

Presentation contains 11 slides

Wrapping Up

Most Relevant JavaScript Functions for a Webpage

JavaScript for Web Designers

book cover

From Harvard Library: Marquis. (2016). JavaScript for Web Designers (1st edition). A Book Apart.

A Book Apart: JavaScript for Web Designers

 

Microdata, RDFa, JSON-LD - Linked Data in HTML5

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 from MIT OpenCourseWare

<div class="grid_12 alpha omega" itemprop="publisher" itemscope="" itemtype="http://schema.org/CollegeOrUniversity">
    <h4 class="footer">About <span itemprop="name">MIT OpenCourseWare</span></h4>
    <p itemprop="description">MIT
        OpenCourseWare is an online publication of materials from over 2,500 MIT courses, freely sharing knowledge with
        learners and educators around the world. <a href="/about/">Learn more &raquo;</a></p>
</div>
<div id="foot-copy" class="grid_12 alpha omega">
    <a rel="license"
        itemprop="useRightsUrl"
        href="http://creativecommons.org/licenses/by-nc-sa/4.0/">
        <img
            src="/images/cc_by-nc-sa.png"
            alt="Creative Commons logo with terms BY-NC-SA." />
    </a>
    <p>Your use of the MIT OpenCourseWare site and materials is subject
        to our <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" rel="license">Creative Commons License</a>
        and other <a href="/terms/" rel="cc:morePermissions">terms of use</a>.</p>
</div>

data-* Attributes of HTML5

data-* attributes in used jQuery Tablesorter

senate-tablesorter.html

<body>
  <h1>United States Senate</h1>
  <table id="senatetable" class="tablesorter">
     <thead>
        <tr>
           <th>Name</th>
           <th>State</th>
           <th>Party</th>
           <th data-date-format="mmddyy">Birthday</th>
           <th>Gender</th>
        </tr>
     </thead>...

data-* attributes used in Lightbox 2

<ul class="gallery">
    <li><a data-lightbox="solarsystem" data-title="Sol" data-alt=""
            href="solarsystem/001-sol.jpg">
            <img
                src="solarsystem/thumbnail/001-sol.jpg" alt="Sol" />
            </a>
        <br />Sol
    </li>
    <li><a data-lightbox="solarsystem" data-title="Mercury" data-alt=""
            href="solarsystem/002-mercury.jpg">
            <img
                src="solarsystem/thumbnail/002-mercury.jpg" alt="Mercury" />
            </a>
        <br />Mercury
    </li>
    ...

JavaScript Frameworks - Vue, React, Angular, Ember

Understanding client-side JavaScript frameworks | MDN

JavaScript frameworks are an essential part of modern front-end web development, providing developers with tried and tested tools for building scalable, interactive web applications.

CSCI E-12 Resources

Snippet of Vue code that formats list of resources:


<ul class="resources">
    <li v-for="r in urls" class="resource">
        <a v-bind:href="r.url">
          <img v-if="r.image" v-bind:src="r.image" />
        </a>
        <div class="title">
          <a v-bind:href="r.url">{{ r.title }}</a>
        </div>
        <div class="hostname">{{ r.hostname }}</div>
        <div class="description">{{ r.description }}</div>
    </li>
</ul>

And the JSON data (snippet) that powers it:

{
  "urls": [
    {
      "url": "https://alistapart.com/",
      "title": "A List Apart",
      "description": "For people who make websites",
      "image": "https://i2.wp.com/alistapart.com/wp-content/uploads/2019/03/cropped-icon_navigation-laurel-512.jpg?fit=512%2C512&ssl=1"
    },
    {
      "url": "https://learn.jquery.com/",
      "title": "jQuery Learning Center",
      "keywords": "javascript, library",
      "image": "https://cscie12.dce.harvard.edu/images/site-card-jquery.png"
    },
    {
      "url": "https://developer.mozilla.org/en-US/docs/Web/HTTP/Overview",
      "title": "An overview of HTTP | MDN",
      "description": "HTTP is a protocol for fetching resources such as HTML documents. It is the foundation of any data exchange on the Web and it is a client-server protocol, which means requests are initiated by the recipient, usually the Web browser. A complete document is reconstructed from the different sub-documents fetched, for instance, text, layout description, images, videos, scripts, and more.",
      "image": "https://developer.mozilla.org/en-US/docs/Web/HTTP/Overview/fetching_a_page.png"
    },
    {
      "url": "http://www.w3.org/",
      "title": "World Wide Web Consortium (W3C)",
      "description": "The World Wide Web Consortium (W3C) is an international community where Member organizations, a full-time staff, and the public work together to develop Web standards.",
      "image": "https://www.w3.org/Icons/WWW/w3c_home_nb-v.svg"
    }, ... ]}

Approaches to eCommerce

Shopify

Shopify is a hosted ecommerce solution. It uses the “liquid” templating language (similar to Mustache or Handlebars, but more capable).

{% for image in product.images %}
   <img src="{{ image | img_url: '300x300' }}">
{% endfor %}

Commerce.js

Commerce.js describes itself as “Build eCommerce applications in vanilla JavaScript with our JS SDK and APIs. Create custom product displays, shopping carts, and checkouts with Commerce.js.

WooCommerce

WooCommerce is a popular ecommerce plugin used in WordPress

Oh, The Places You'll Go!

oh the places you'll go

Thank You

<h1 data-to="Fall 2021 Class"
    data-from="David">
  Thank You!
</h1>