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