CSCI E-12 - May 5, 2010 - Grab Bag, Part 2 http://tomcat.localhost/cocoon/course_webdev/slides/20100505/handout.html
CSCI E‐12 Fundamentals of Website Development
Table of Contents | All‐in‐One | Link List | Lecture Notes Home | CSCI E‐12 Home
A form for lecture feedback is available from the course web site. Please take two minutes to fill it out after you have seen the lecture.
May 5, 2010
Harvard University Extension School
Course Web Site: http://cscie12.dce.harvard.edu/
Instructor email: [email protected] Course staff email: [email protected]
1 of 69 5/5/2010 1:27 PM CSCI E-12 - May 5, 2010 - Grab Bag, Part 2 http://tomcat.localhost/cocoon/course_webdev/slides/20100505/handout.html
©opyright Semantic Web (Microformats and RDFa) Security and Privacy (SSL, XSS, Phishing, PICS) Web Content Management Systems (CMS, WCM) Mobile Web HTML 5 Where to go from here?
2 of 69 5/5/2010 1:27 PM CSCI E-12 - May 5, 2010 - Grab Bag, Part 2 http://tomcat.localhost/cocoon/course_webdev/slides/20100505/handout.html
US Copyright Office Copyright and Fair Use (Stanford University Libraries) Copyright and Fair Use (Harvard OGC) Copyright Crash Course (Univeristy of Texas OGC)
Lawrence Lessig has written many interesting books about technology, copyright & public domain and culture.
Lawsuit over website links in spotlight Copyright violation or fair use to be decided By Robert Weisman Globe Staff / January 23, 2009
3 of 69 5/5/2010 1:27 PM CSCI E-12 - May 5, 2010 - Grab Bag, Part 2 http://tomcat.localhost/cocoon/course_webdev/slides/20100505/handout.html
Creative Commons
Creative Commons is a nonprofit corporation dedicated to making it easier for people to share and build upon the work of others, consistent with the rules of copyright.
Creative Commons provides free licenses and other legal tools to mark creative work with the freedom the creator wants it to carry, so others can share, remix, use commercially, or any combination thereof.
The Creative Commons Licenses:
Attribution
This license lets others distribute, remix, tweak, and build upon your work, even commercially, as long as they credit you for the original creation. This is the most accommodating of licenses offered, in terms of what others can do with your works licensed under Attribution.
View License Deed | View Legal Code
Attribution Share Alike
This license lets others remix, tweak, and build upon your work even for commercial reasons, as long as they credit you and license their new creations under the identical terms. This license is often compared to open source software licenses. All new works based on yours will carry the same license, so any derivatives will also allow commercial use.
View License Deed | View Legal Code
Attribution No Derivatives
This license allows for redistribution, commercial and non‐commercial, as long as it is passed along unchanged and in whole, with credit to you.
View License Deed | View Legal Code
Attribution Non‐Commercial
4 of 69 5/5/2010 1:27 PM CSCI E-12 - May 5, 2010 - Grab Bag, Part 2 http://tomcat.localhost/cocoon/course_webdev/slides/20100505/handout.html
This license lets others remix, tweak, and build upon your work non‐commercially, and although their new works must also acknowledge you and be non‐commercial, they don't have to license their derivative works on the same terms.
View License Deed | View Legal Code
Attribution Non‐Commercial Share Alike
This license lets others remix, tweak, and build upon your work non‐commercially, as long as they credit you and license their new creations under the identical terms. Others can download and redistribute your work just like the by‐nc‐nd license, but they can also translate, make remixes, and produce new stories based on your work. All new work based on yours will carry the same license, so any derivatives will also be non‐commercial in nature.
View License Deed | View Legal Code
Attribution Non‐Commercial No Derivative
This license is the most restrictive of our six main licenses, allowing redistribution. This license is often called the "free advertising" license because it allows others to download your works and share them with others as long as they mention you and link back to you, but they can’t change them in any way or use them commercially.
View License Deed | View Legal Code
5 of 69 5/5/2010 1:27 PM CSCI E-12 - May 5, 2010 - Grab Bag, Part 2 http://tomcat.localhost/cocoon/course_webdev/slides/20100505/handout.html
Digital Right Management from Wikipedia Digital Rights Management information from Electronic Freedom Foundation (EFF)
6 of 69 5/5/2010 1:27 PM CSCI E-12 - May 5, 2010 - Grab Bag, Part 2 http://tomcat.localhost/cocoon/course_webdev/slides/20100505/handout.html
News story: Family Surprised At Czech Meaning Of 'Say Cheese'
Lower‐resolution Hacks and Obfuscations Watermarks Visible Obtrusive Unobtrusive Invisible
Resources:
Watermark.com How to protect your digital images with watermarks and without watermark: comparison of methods from Watermarker.com AiS Watermark Picture Protector Digimarc for Images
7 of 69 5/5/2010 1:27 PM CSCI E-12 - May 5, 2010 - Grab Bag, Part 2 http://tomcat.localhost/cocoon/course_webdev/slides/20100505/handout.html
W3C 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.
Linked Data Vocabularies Query Inference Vertical Applications
Semantic Web, 2001
The Semantic Web Tim Berners‐Lee, James Hendler and Ora Lassila Scientific American, May 2001. A new form of Web content that is meaningful to computers will unleash a revolution of new possibilities.
Revisited, 2006
The semantic web revisited
8 of 69 5/5/2010 1:27 PM CSCI E-12 - May 5, 2010 - Grab Bag, Part 2 http://tomcat.localhost/cocoon/course_webdev/slides/20100505/handout.html
Human‐Centric Web
Application‐Centric Web
9 of 69 5/5/2010 1:27 PM CSCI E-12 - May 5, 2010 - Grab Bag, Part 2 http://tomcat.localhost/cocoon/course_webdev/slides/20100505/handout.html
What is RDF? on XML.com (updated July 2006)
Built around
subject predicate object
RDF Example
English version:
Scott Brown is a senator from Massachusetts.
RDF representations:
XML syntax:
Notation 3 (N3):
10 of 69 5/5/2010 1:27 PM CSCI E-12 - May 5, 2010 - Grab Bag, Part 2 http://tomcat.localhost/cocoon/course_webdev/slides/20100505/handout.html
Dublin Core Metadata Initiative Dublin Core Metadata Element Set, Version 1.1
15 metadata elements of "Dublin Core"
contributor coverage creator date description format identifier language publisher relation rights source subject title type
11 of 69 5/5/2010 1:27 PM CSCI E-12 - May 5, 2010 - Grab Bag, Part 2 http://tomcat.localhost/cocoon/course_webdev/slides/20100505/handout.html
RDFa Primer (W3C) RDFA in XHTML: Syntax and Processing RDFa.info
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.
12 of 69 5/5/2010 1:27 PM CSCI E-12 - May 5, 2010 - Grab Bag, Part 2 http://tomcat.localhost/cocoon/course_webdev/slides/20100505/handout.html
Rendered:
This work is licensed under a Creative Commons Attribution‐Noncommercial‐Share Alike 3.0 License .
Markup ( rel=license ):
This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 License .
RDF Triple
13 of 69 5/5/2010 1:27 PM CSCI E-12 - May 5, 2010 - Grab Bag, Part 2 http://tomcat.localhost/cocoon/course_webdev/slides/20100505/handout.html
Examples from the RDFa Primer:
The trouble with Bob
Alice
14 of 69 5/5/2010 1:27 PM CSCI E-12 - May 5, 2010 - Grab Bag, Part 2 http://tomcat.localhost/cocoon/course_webdev/slides/20100505/handout.html
named tags (e.g. sakai09) @davidh upcoming:event=12345
Semantic Tagging
upcoming:event=4495904
Upcoming Event: http://upcoming.yahoo.com/event/4495904/ Flickr Photos tagged with upcoming:event=445904
Meta Tags: The Poor Man's RDF?
15 of 69 5/5/2010 1:27 PM CSCI E-12 - May 5, 2010 - Grab Bag, Part 2 http://tomcat.localhost/cocoon/course_webdev/slides/20100505/handout.html
microformats.org About Microformats
Designed for humans first and machines second, microformats are a set of simple, open data formats built upon existing and widely adopted standards.
16 of 69 5/5/2010 1:27 PM CSCI E-12 - May 5, 2010 - Grab Bag, Part 2 http://tomcat.localhost/cocoon/course_webdev/slides/20100505/handout.html
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
Microformat for Project Presentation event:
17 of 69 5/5/2010 1:27 PM CSCI E-12 - May 5, 2010 - Grab Bag, Part 2 http://tomcat.localhost/cocoon/course_webdev/slides/20100505/handout.html
Tuesday, December 15, 2009. 7:30pm to 7:30pm — Final Project Presentations— at 1 Story Street, Room 310, Cambridge, MA Groups will present their final projects.
18 of 69 5/5/2010 1:27 PM CSCI E-12 - May 5, 2010 - Grab Bag, Part 2 http://tomcat.localhost/cocoon/course_webdev/slides/20100505/handout.html
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:[email protected] URL:http://cscie153.dce.harvard.edu/ TEL;617-555-1212:617-555-1212 END:VCARD
hCard Microformat
Rendered:
David Philip Heitmeyer Harvard University, Division of Continuing Education [email protected] 1 Story Street, Room 310 Cambridge , MA , 02138 United States 617‐555‐1212
Markup:
view plain print ? 1.
Bookmarklet:
19 of 69 5/5/2010 1:27 PM CSCI E-12 - May 5, 2010 - Grab Bag, Part 2 http://tomcat.localhost/cocoon/course_webdev/slides/20100505/handout.html
20 of 69 5/5/2010 1:27 PM CSCI E-12 - May 5, 2010 - Grab Bag, Part 2 http://tomcat.localhost/cocoon/course_webdev/slides/20100505/handout.html
21 of 69 5/5/2010 1:27 PM CSCI E-12 - May 5, 2010 - Grab Bag, Part 2 http://tomcat.localhost/cocoon/course_webdev/slides/20100505/handout.html
Yahoo! into Semantic Web Yahoo! announces support of semantic web standards (including Microformats and RDFa) (March 2008) Google Announces Support for Microformats and RDFa. O'Reilly Radar (May 2009) Obama Team Challenges Web Developers (November 2009)
The White House is planning to make increasing use of RDFa, a way of tagging metadata to content that could make hard‐to‐find data more searchable. "We have a lot of primary source content and have it exposed in ways that traditionally hasn't been done by government," Cole said. "Instead of just having PDFs that are scanned, we're trying to reverse that trend.
Google News Search: Google News search for "RDFa" Google News search for "Microformats"
22 of 69 5/5/2010 1:27 PM CSCI E-12 - May 5, 2010 - Grab Bag, Part 2 http://tomcat.localhost/cocoon/course_webdev/slides/20100505/handout.html
User / Client
Fraud. The server or site is "who" it appears to be. "Phishing" Safe content. Content received is safe ‐‐ it is not dangerous or malicious. Cross Site Scripting (XSS) Privacy Infringement.. Information given to server will be kept private.
Provider / Server
Break‐in. Server machine will not be broken into. "Webjacking". Content will not be altered. Denial‐of‐Service (DOS) Attacks. Server will be available. Authentication / Authorization. Users will not access documents not meant for them. Fraud. Users are who they claim to be.
Common
Eavesdropping. Third parties are not eavesdropping on the information sent between the client and server. Tampering. Information sent between the client and server arrives intact.
23 of 69 5/5/2010 1:27 PM CSCI E-12 - May 5, 2010 - Grab Bag, Part 2 http://tomcat.localhost/cocoon/course_webdev/slides/20100505/handout.html
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 emails:
Example site:
24 of 69 5/5/2010 1:27 PM CSCI E-12 - May 5, 2010 - Grab Bag, Part 2 http://tomcat.localhost/cocoon/course_webdev/slides/20100505/handout.html
25 of 69 5/5/2010 1:27 PM CSCI E-12 - May 5, 2010 - Grab Bag, Part 2 http://tomcat.localhost/cocoon/course_webdev/slides/20100505/handout.html
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.
Javascript SSI PHP, or other any other server‐side technology
XSS Example
Simple example for illustration:
Blog post on a site that allows JavaScript content:
view plain print ? 1.
Which could render as:
view plain print ? 1.
26 of 69 5/5/2010 1:27 PM CSCI E-12 - May 5, 2010 - Grab Bag, Part 2 http://tomcat.localhost/cocoon/course_webdev/slides/20100505/handout.html
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
Certificate Authorities (CAs) bundled with Firefox
27 of 69 5/5/2010 1:27 PM CSCI E-12 - May 5, 2010 - Grab Bag, Part 2 http://tomcat.localhost/cocoon/course_webdev/slides/20100505/handout.html
28 of 69 5/5/2010 1:27 PM CSCI E-12 - May 5, 2010 - Grab Bag, Part 2 http://tomcat.localhost/cocoon/course_webdev/slides/20100505/handout.html
Plaintext Ciphertext Key Cryptographic Algorithm
29 of 69 5/5/2010 1:27 PM CSCI E-12 - May 5, 2010 - Grab Bag, Part 2 http://tomcat.localhost/cocoon/course_webdev/slides/20100505/handout.html
30 of 69 5/5/2010 1:27 PM CSCI E-12 - May 5, 2010 - Grab Bag, Part 2 http://tomcat.localhost/cocoon/course_webdev/slides/20100505/handout.html
31 of 69 5/5/2010 1:27 PM CSCI E-12 - May 5, 2010 - Grab Bag, Part 2 http://tomcat.localhost/cocoon/course_webdev/slides/20100505/handout.html
32 of 69 5/5/2010 1:27 PM CSCI E-12 - May 5, 2010 - Grab Bag, Part 2 http://tomcat.localhost/cocoon/course_webdev/slides/20100505/handout.html
33 of 69 5/5/2010 1:27 PM CSCI E-12 - May 5, 2010 - Grab Bag, Part 2 http://tomcat.localhost/cocoon/course_webdev/slides/20100505/handout.html
Digital Envelopes
Public key cryptography is much slower than symmetric key cryptography. In practice, the two systems are usually combined:
Establish a common session key Browser generates a "session key". Browser encrypts "session key" with Server's public key. Browser sends encrypted session key to Server. Server decrypts session key with Server's private key Send Messages Browser and Server use common session key to encrypt and decrypt message.
34 of 69 5/5/2010 1:27 PM CSCI E-12 - May 5, 2010 - Grab Bag, Part 2 http://tomcat.localhost/cocoon/course_webdev/slides/20100505/handout.html
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
CyberTrust Verisign Thawte
35 of 69 5/5/2010 1:27 PM CSCI E-12 - May 5, 2010 - Grab Bag, Part 2 http://tomcat.localhost/cocoon/course_webdev/slides/20100505/handout.html
Content Management Systems (CMS) Web Content Management (WCM)
Components
Non‐technical Organizational Behavioral Technical
36 of 69 5/5/2010 1:27 PM CSCI E-12 - May 5, 2010 - Grab Bag, Part 2 http://tomcat.localhost/cocoon/course_webdev/slides/20100505/handout.html
Add and Edit Content Workflow Versioning Diversity of content
37 of 69 5/5/2010 1:27 PM CSCI E-12 - May 5, 2010 - Grab Bag, Part 2 http://tomcat.localhost/cocoon/course_webdev/slides/20100505/handout.html
Why Content Management Fails
Over and over I’ve heard the same complaint about these projects, "Turns out, after all the budget and time we spent, we really didn't need a content management system at all. We just needed some editors."
Why Content Management Systems Suck!
Going to the time, money and effort of installing the typical CMS is like fitting wheels to a tomato ‐ time consuming and completely unnecessary.
38 of 69 5/5/2010 1:27 PM CSCI E-12 - May 5, 2010 - Grab Bag, Part 2 http://tomcat.localhost/cocoon/course_webdev/slides/20100505/handout.html
"Tactical Guidelines for Narrowing Your Choices When Evaluating WCM Vendors", December 2008
Key Findings:
WCM vendor selection processes are prolonged unnecessarily because organizations focus too quickly on lists of requirements that can be met by many vendors in the market. More than 65% of the WCM teams that contacted Gartner during 2008 were unaware of their organizations' high‐level, nontechnical objectives. More than 95% of WCM‐related inquiries with Gartner clients involved teams that had not identified specific, measurable metrics for their WCM initiatives.
39 of 69 5/5/2010 1:27 PM CSCI E-12 - May 5, 2010 - Grab Bag, Part 2 http://tomcat.localhost/cocoon/course_webdev/slides/20100505/handout.html
Stand‐alone or integration needs? Out‐of‐the‐box or platform for development? Open Source or Not? Existing infrastructure or services
40 of 69 5/5/2010 1:27 PM CSCI E-12 - May 5, 2010 - Grab Bag, Part 2 http://tomcat.localhost/cocoon/course_webdev/slides/20100505/handout.html
41 of 69 5/5/2010 1:27 PM CSCI E-12 - May 5, 2010 - Grab Bag, Part 2 http://tomcat.localhost/cocoon/course_webdev/slides/20100505/handout.html
42 of 69 5/5/2010 1:27 PM CSCI E-12 - May 5, 2010 - Grab Bag, Part 2 http://tomcat.localhost/cocoon/course_webdev/slides/20100505/handout.html
43 of 69 5/5/2010 1:27 PM CSCI E-12 - May 5, 2010 - Grab Bag, Part 2 http://tomcat.localhost/cocoon/course_webdev/slides/20100505/handout.html
Wiki Markup
Wiki Markup
* This is '''item one''' * [[ Items | Find out more information about Items ]] * Item the ''third''
44 of 69 5/5/2010 1:27 PM CSCI E-12 - May 5, 2010 - Grab Bag, Part 2 http://tomcat.localhost/cocoon/course_webdev/slides/20100505/handout.html
Adobe Adobe Dreamweaver Adobe Contribute Microsoft Microsoft Expression Web Open Source Kompozer Amaya
45 of 69 5/5/2010 1:27 PM CSCI E-12 - May 5, 2010 - Grab Bag, Part 2 http://tomcat.localhost/cocoon/course_webdev/slides/20100505/handout.html
Common regions across pages "Editable" and "Protected" areas
Using templates:
1. Create template 2. Create page based on template 3. Template changes are propagated to pages 4. Contribute/Dreamweaver editors recognize "editable" and "protected" areas of page which are defined by the template
Templates simply use comments:
view plain print ? 1. 2.
Lorem ipsum dolor sit amet, ...
3.46 of 69 5/5/2010 1:27 PM CSCI E-12 - May 5, 2010 - Grab Bag, Part 2 http://tomcat.localhost/cocoon/course_webdev/slides/20100505/handout.html
Gartner Research:
Increasingly a viable option for the enterprise Can be a good fit for smaller organizations or within departments. Treat OS WCM somewhere between "build" and "buy" Open Source Content Management in "technology trigger phase," with a 2‐5 year period to mainstream adoption (2007) Open Source Collaboration tools in "peak of inflated expectations," with a 5‐10 year period to mainstream adoption (2007).
47 of 69 5/5/2010 1:27 PM CSCI E-12 - May 5, 2010 - Grab Bag, Part 2 http://tomcat.localhost/cocoon/course_webdev/slides/20100505/handout.html
Typical features:
Content and media management User management Role‐based permission model Multiple languages Browser‐based editing Menu and Navigation management Search Syndication (RSS, Atom) Themes, Templates, or Skins Polls Blogs, threaded comments, discussion forums Functionality extended through modules/extensions that are optionally installed
48 of 69 5/5/2010 1:27 PM CSCI E-12 - May 5, 2010 - Grab Bag, Part 2 http://tomcat.localhost/cocoon/course_webdev/slides/20100505/handout.html
Examples of types of sites:
Corporate Web sites or portals Corporate intranets and extranets Online magazines, newspapers, and publications E‐commerce and online reservations Government applications Small business Web sites Non‐profit and organizational Web sites Community‐based portals School and church Web sites Personal or family homepages
49 of 69 5/5/2010 1:27 PM CSCI E-12 - May 5, 2010 - Grab Bag, Part 2 http://tomcat.localhost/cocoon/course_webdev/slides/20100505/handout.html
LAMP Java .NET Bricolage Alfresco Cuyahoga Drupal Apache Lenya DotNetNuke eZ Publish Hippo ECM JMDCMS Joomla Magnolia mojoPortal Midgard MMBase N2 MovableType OpenCms Umbraco MySource Matrix Rainbow Plone/Zope VWD‐CMS TYPO3 XML Nuke WordPress Xaraya
Known use at Harvard: Alfresco, Apache Lenya/Cocoon, Cascade, Drupal, Expression Engine, eZ Publish, Joomla, MovableType, Plone, TYPO3, Vignette, WordPres.
50 of 69 5/5/2010 1:27 PM CSCI E-12 - May 5, 2010 - Grab Bag, Part 2 http://tomcat.localhost/cocoon/course_webdev/slides/20100505/handout.html
JavaScript‐powered WYSIWYG editors
51 of 69 5/5/2010 1:27 PM CSCI E-12 - May 5, 2010 - Grab Bag, Part 2 http://tomcat.localhost/cocoon/course_webdev/slides/20100505/handout.html
"Static" site with WYSIWYG tools to edit WCM system Custom solutions Stand‐alone Within WCM system Mix of any of these Integrate at technology level Integrate at user experience level
52 of 69 5/5/2010 1:27 PM CSCI E-12 - May 5, 2010 - Grab Bag, Part 2 http://tomcat.localhost/cocoon/course_webdev/slides/20100505/handout.html
If you want to experiment with technical solutions to WCM, here is my short‐list of places to start:
Drupal Joomla MovableType Wiki Media
53 of 69 5/5/2010 1:27 PM CSCI E-12 - May 5, 2010 - Grab Bag, Part 2 http://tomcat.localhost/cocoon/course_webdev/slides/20100505/handout.html
"The mobile device will be the primary connection tool to the internet for most people in the world in 2020." The Future of the Internet Pew Internet & American Life Project "Students are leading the change in many ways through … the continued use of consumer IT devices." Mobile and personal devices are positioned for "transformational" benefit with "less than 2 years" to mainstream adoption. Hype Cycle for Higher Education Gartner Group "For many users, broadband mobile devices like the iPhone have already begun to assume many tasks that were once the exclusive province of portable computers." The 2009 Horizon Report The New Media Consortium and EDUCAUSE Learning Initiative
Devices iPhone Blackberry Smart phones PSP Cell phones Palm Others... Connectivity WiFi cellular/data network HTTP Clients
54 of 69 5/5/2010 1:27 PM CSCI E-12 - May 5, 2010 - Grab Bag, Part 2 http://tomcat.localhost/cocoon/course_webdev/slides/20100505/handout.html
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.
55 of 69 5/5/2010 1:27 PM CSCI E-12 - May 5, 2010 - Grab Bag, Part 2 http://tomcat.localhost/cocoon/course_webdev/slides/20100505/handout.html
We will focus on XHTML Mobile Profile and XHTML Basic.
XHTML Mobile Profile XHTML Mobile Profile Specification (PDf, from Openwave) XHTML Mobile Profile ‐ Documentation from DTD XHTML Basic XHTML Basic Specification (W3C) XHTML Basic 1.0 ‐ Documentation from DTD Wireless Markup Language (WML) Compact HTML (cHTML) Handheld Device ML (HDML) "Handheld Friendly" HTML others...
Image used with permission from David Höffer
Reading:
History of XHTML Mobile Profile (Openwave) Overview of Mobile Versions of XHTML (Little Springs Design)
56 of 69 5/5/2010 1:27 PM CSCI E-12 - May 5, 2010 - Grab Bag, Part 2 http://tomcat.localhost/cocoon/course_webdev/slides/20100505/handout.html
Opera Mini (online) iPhone Simulator (online) Opera Browser (small screen view) Openwave Phone Simulator Nokia Tools and SDKs for Content Authoring Installing the BlackBerry Simulator for Mobile Web Testing
57 of 69 5/5/2010 1:27 PM CSCI E-12 - May 5, 2010 - Grab Bag, Part 2 http://tomcat.localhost/cocoon/course_webdev/slides/20100505/handout.html
XHTML Modularization Overview Modularization of XHTML, W3C Recommendation 10 April 2001 XML.com: Mix and Match Markup: XHTML Modularization XML.com: Extending the Web: XHTML Modularization
Abstract modules defined by XHTML Modularization:
Structures (core) Text (core) Hypertext (core) List (core) Applet Text Extension Forms Table Image Client‐side Image Map Server‐side Image Map Object Frames Target Iframe Intrinsic Events Metainformation Ruby Annotations Scripting Style‐sheet Style Attribute Link Base Name Identification
58 of 69 5/5/2010 1:27 PM CSCI E-12 - May 5, 2010 - Grab Bag, Part 2 http://tomcat.localhost/cocoon/course_webdev/slides/20100505/handout.html
view plain print ? 1.
XHTML Basic consists of the following XHTML modules:
Structure Module* body, head, html, title
Text Module* abbr, acronym, address, blockquote, br, cite, code, dfn, div, em, h1, h2, h3, h4, h5, h6, kbd, p, pre, q, samp, span, strong, var
Hypertext Module* a
List Module* dl, dt, dd, ol, ul, li
Basic Forms Module form, input, label, select, option, textarea
Basic Tables Module caption, table, td, th, tr
Image Module img
Object Module object, param
Metainformation Module meta
Link Module link
Base Module base
59 of 69 5/5/2010 1:27 PM CSCI E-12 - May 5, 2010 - Grab Bag, Part 2 http://tomcat.localhost/cocoon/course_webdev/slides/20100505/handout.html
view plain print ? 1. Reading:
History of XHTML Mobile Profile (Openwave) XHTML MP Style Guide (Openwave)
CSS and SVG for Mobile Profile
Mobile SVG Profiles: SVG Tiny and SVG Basic CSS Mobile Profile Flash Lite from Adobe
60 of 69 5/5/2010 1:27 PM CSCI E-12 - May 5, 2010 - Grab Bag, Part 2 http://tomcat.localhost/cocoon/course_webdev/slides/20100505/handout.html
Smaller screen size images tables layout "Chunked" or "Paged" content Navigation to content
m.mit.edu
61 of 69 5/5/2010 1:27 PM CSCI E-12 - May 5, 2010 - Grab Bag, Part 2 http://tomcat.localhost/cocoon/course_webdev/slides/20100505/handout.html
Dive into HTML 5 by Mark Pilgrim A Preview of HTML 5 by Lachlan Hunt, A List Apart WHATWG ‐ Web Hypertext Application Technology Working Group HTML 5 (including next generation additions still in development) Draft Standard — 5 May 2010 W3C HTML5: A vocabulary and associated APIs for HTML and XHTML Editor's Draft 5 May 2010 HTML 5 Reference: A Web Developer's Guide to HTML 5 W3C Editor's Draft 23 March 2009
62 of 69 5/5/2010 1:27 PM CSCI E-12 - May 5, 2010 - Grab Bag, Part 2 http://tomcat.localhost/cocoon/course_webdev/slides/20100505/handout.html
HTML and XHTML versions structure in elements: header, nav, article, section, footer video and audio Forms input elements can be typed Placeholder text canvas Microdata Conceptually similar to microformats and RDFa Browser‐side data cache for web applications
63 of 69 5/5/2010 1:27 PM CSCI E-12 - May 5, 2010 - Grab Bag, Part 2 http://tomcat.localhost/cocoon/course_webdev/slides/20100505/handout.html
Instead of using "class" or "id" to mark headers, sections, navigation, and footers, HTML5 provides these as elements.
Instead of:
view plain print ? 1. ... 2.
Ed's Weenies
HTML5 provides elements:
view plain print ? 1. ... 2. Ed's Weenies
64 of 69 5/5/2010 1:27 PM CSCI E-12 - May 5, 2010 - Grab Bag, Part 2 http://tomcat.localhost/cocoon/course_webdev/slides/20100505/handout.html
HTML 5 Video (Kaltura) Dive into HTML5: Video by Mark Pilgrim
view plain print ? 1.
65 of 69 5/5/2010 1:27 PM CSCI E-12 - May 5, 2010 - Grab Bag, Part 2 http://tomcat.localhost/cocoon/course_webdev/slides/20100505/handout.html
HTML5 Form Example placeholder text autofocus input types for email url number range date and time
66 of 69 5/5/2010 1:27 PM CSCI E-12 - May 5, 2010 - Grab Bag, Part 2 http://tomcat.localhost/cocoon/course_webdev/slides/20100505/handout.html
67 of 69 5/5/2010 1:27 PM CSCI E-12 - May 5, 2010 - Grab Bag, Part 2 http://tomcat.localhost/cocoon/course_webdev/slides/20100505/handout.html
Canvas Example with ChemDoodle Web Components (DNA)
68 of 69 5/5/2010 1:27 PM CSCI E-12 - May 5, 2010 - Grab Bag, Part 2 http://tomcat.localhost/cocoon/course_webdev/slides/20100505/handout.html
Learn it Yourself (LIY)
Add to and build on the fundamental knowledge gained from your learning and work in CSCI E‐12.
Design Programming (PHP, databases, etc.) Content Frameworks
Courses
CSCI E‐7 Exposing Digital Photography (Fall) CSCI E‐14 Understanding and Developing Multimedia (Spring) CSCI E‐30 Introduction to Web Content Management Systems Site Development (Spring) CSCI E‐52 Intensive Introduction to Computer Science Using C, PHP, and JavaScript (Fall) CSCI E‐75 Building Dynamic Websites (Fall) CSCI E‐113 Introduction to C, Unix/Linux, and CGI Programming (Fall) CSCI E‐153 Web Development Using XML (Fall) CSCI E‐168 Building Web‐Based Software with Ruby and Ruby on Rails (Fall) CSCI E‐241 Web Development Using ASP.NET, Silverlight, and Ajax (Spring) CSCI E‐253 Developing Web‐Based Database Applications (Fall)
Table of Contents | All‐in‐One | Link List | Lecture Notes Home | CSCI E‐12 Home
Copyright © 1998‐2010 David P. Heitmeyer
69 of 69 5/5/2010 1:27 PM