Info + Web Tech Course
Information
Technologies
Anselm Spoerri PhD (MIT)
SC&I @ Rutgers University
aspoerri@rutgers.edu
anselm.spoerri@gmail.com
Info + Web Tech Course
© Anselm Spoerri
Lecture 2 – Overview
Web Services
– Screencasting
– Survey Tools
– Google Docs : Shared Spreadsheet for Exercise 1
– Widgets: Screencast MediaRoll
RSS  XML
and Metadata
– RSS Feed and Reader
– What is the Structure of RSS feed?
– XML
– Metadata
Image Editing Demo
– Flickr + Pixlr
Lectures – Week 2 Content
http://comminfo.rutgers.edu/~aspoerri/Teaching/InfoTech/Lectures.html#week2
Info + Web Tech Course
© Anselm Spoerri
Screencasting
Jing
- simple recording tool
(free and pro version)
– http://www.techsmith.com/jing.html
– Tutorial: http://www.techsmith.com/tutorial-jing.html
– Demo
– Task
– Create account
Screencast.com
- hosting tool
(free and pro version)
– http://www.screencast.com/
– Tour: http://www.screencast.com/controls/lightboxes/overview.aspx
– Tasks
– Create account
Camtasia
| MediaRoll widget for Ex1
– recording and editing tool
(fee based)
– http://www.techsmith.com/camtasia.asp
– Narrated Lectures and Video Demos recorded using Camtasia
Info + Web Tech Course
© Anselm Spoerri
Survey Tools
Survey Tools
– Search for “free survey tools”
– Google: http://www.google.com/search?q=free+survey+tool
– Tools
– surveymonkey.com
– Task
– Create account
Info + Web Tech Course
| Create Survey for Ex1
© Anselm Spoerri
Web Services – Google Docs: Spreadsheet
Step 1 – Create Google Drive account
– Log into Google Account
– Click on Drive in top toolbar
– “Try something new” and select Drive
– Click “Products” and then “All Google Products” at bottom of screen
http://www.google.com/intl/en/options/ and navigate to Drive
Step 2 – Create Google Doc Spreadsheet
– Create > Spreadsheet
– Specify Column Headings for data to collect
– File > Save
Step 3 – Share Spreadsheet
– Click “Share” top right corner
– Select preferred option for sharing
– Allow anyone with the link to view (no sign-in required)
– Invite by email
Info + Web Tech Course
© Anselm Spoerri
Widgets – MediaRoll Widget
Screencast’s MediaRoll Widget
Demo
– Log into your Screencast account
–
–
–
–
Select MyLibrary (top left corner)
Select Create Playlist and create playlist and select settings
Click on Share icon for created playlist
Select the MediaRoll embed code
– Go to your page in class Wiki
–
–
–
–
–
–
Click Edit page and place cursor at bottom page
Insert horizontal line
Click “Insert” in toolbar
Select “HTML / JavaScript”
Paste code and select “Allow JavaScript …” checkbox
Save page
– Repeat similar steps to insert a specific screencast
and insert on page
Info + Web Tech Course
© Anselm Spoerri
RSS
RSS = Really Simple Syndication
– http://en.wikipedia.org/wiki/RSS
Why?
Pull Web and New content into One Place
Tools
– News Readers
– Mozilla Live Bookmarks
– Feedly
– Blogines
– Personalized Start Pages
– Netvibes
What is RSS?
– http://www.commoncraft.com/rss_plain_english
Info + Web Tech Course
© Anselm Spoerri
RSS Feed - Structure
What is the Structure of RSS Feed?
For
http://www.thedigitalshift.com/feed/
In Browser selected
Firefox: Tools > Web Developer: Page Source
What do we notice?
Info + Web Tech Course
© Anselm Spoerri
XML
XML = Extensible Markup Language
http://en.wikipedia.org/wiki/XML
Why?
Represent documents in machine-readable form
Key Concepts
•
(Unicode) Character
XML document is a string of characters.
Almost every legal Unicode character may appear in an XML document.
•
Processor and Application Software
XML parser processes XML document
•
Markup and Content
Characters of XML document are divided into markup and content.
Markup = begin
"<" end with ">", or begin with "&" end with ";".
Content = characters which are not markup.
Info + Web Tech Course
© Anselm Spoerri
XML – Key Concepts
•
(cont.)
Tag "<" … ">“
start-tags, for example <section>
end-tags, for example </section>
empty-element tags, for example <line-break/>
•
Element
Begins with start-tag , ends with matching end-tag,
or empty-element tag.
Content = characters between start- and end-tags.
<Greeting>Hello, world.</Greeting>.
•
Attribute
Markup construct consisting of name/value pair that exists within a
start-tag or empty-element tag.
<step number="3">Connect A to B.</step>
•
XML Declaration
XML document may begin by declaring some information about itself.
Info + Web Tech Course
© Anselm Spoerri
XML - Well-Formedness and Error-Handling
Well-Formedness and Error-Handling
XML specification defines an XML document as a text which is well-formed
if satisfies list of syntax rules provided in specification.
Key points
‒
It contains only properly-encoded legal Unicode characters.
‒
None of the special syntax characters such as "<" and "&" appear except
when performing their markup-delineation roles.
‒
The begin, end, and empty-element tags which delimit the elements are
correctly nested, with none missing and none overlapping.
‒
The element tags are case-sensitive; the beginning and end tags must
match exactly.
‒
There is a single "root" element which contains all the other elements.
An XML processor which encounters violations is required to report such
errors and to cease normal processing. This policy, occasionally referred to
as draconian, stands in notable contrast to the behavior of programs which
process HTML, which are designed to produce a reasonable result even in
the presence of severe markup errors.
Info + Web Tech Course
© Anselm Spoerri
XML – Schemas and Validation
Schemas and Validation
XML document may be valid.
XML contains reference to Document Type Definition (DTD)
XML elements and attributes are declared in that DTD and
follow grammatical rules for them that the DTD specifies.
XML Tutorial
http://www.w3schools.com/xml/default.asp
DTD is an example of a schema or grammar.
Schema languages typically constrain the set of elements
that may be used in a document, which attributes may be
applied to them, the order in which they may appear, and the
allowable parent/child relationships.
DTD Tutorial
http://www.w3schools.com/dtd/default.asp
XML processors are classified as validating or non-validating
whether they check XML documents for validity.
Info + Web Tech Course
© Anselm Spoerri
Metadata
Metadata = Data about Data = Data
http://en.wikipedia.org/wiki/Metadata
Metadata = Automated or Manual Creation
Metadata = Structured and has Standards & Models
– controlled vocabularies, taxonomies, thesauri …
Digital Libraries employ it in Library Management Systems
Tags are a form of Metadata
Info + Web Tech Course
© Anselm Spoerri