1. © Anselm SpoerriInfo + Web Tech Course Information Technologies Info + Web Tech Course Anselm Spoerri PhD (MIT) SC&I @ Rutgers University aspoerri@rutgers.edu anselm.spoerri@gmail.com

2. © Anselm SpoerriInfo + Web Tech Course 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 http://comminfo.rutgers.edu/~aspoerri/Teaching/InfoTech/Lectures.html#week2

3. © Anselm SpoerriInfo + Web Tech Course Screencasting Jing - simple recording tool (free and pro version) –http://www.techsmith.com/jing.htmlhttp://www.techsmith.com/jing.html –Tutorial: http://www.techsmith.com/tutorial-jing.htmlhttp://www.techsmith.com/tutorial-jing.html –Demo –Task –Create account Screencast.com - hosting tool (free and pro version) –http://www.screencast.com/http://www.screencast.com/ –Tour: http://www.screencast.com/controls/lightboxes/overview.aspx http://www.screencast.com/controls/lightboxes/overview.aspx –Tasks –Create account | MediaRoll widget for Ex1 Camtasia – recording and editing tool (fee based) –http://www.techsmith.com/camtasia.asphttp://www.techsmith.com/camtasia.asp –Narrated Lectures and Video Demos recorded using Camtasia

4. © Anselm SpoerriInfo + Web Tech Course Survey Tools –Search for “free survey tools” –Google: http://www.google.com/search?q=free+survey+toolhttp://www.google.com/search?q=free+survey+tool –Tools –surveymonkey.com –Task –Create account | Create Survey for Ex1

5. © Anselm SpoerriInfo + Web Tech Course 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 http://www.google.com/intl/en/options/ 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

6. © Anselm SpoerriInfo + Web Tech Course 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

7. © Anselm SpoerriInfo + Web Tech Course RSS RSS = Really Simple Syndication –http://en.wikipedia.org/wiki/RSShttp://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_englishhttp://www.commoncraft.com/rss_plain_english

8. © Anselm SpoerriInfo + Web Tech Course 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?

9. © Anselm SpoerriInfo + Web Tech Course 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.Unicode Processor and Application Software XML parser processes XML document Markup and Content Characters of XML document are divided into markup and content. Markup = begin " ", or begin with "&" end with ";". Content = characters which are not markup.

10. © Anselm SpoerriInfo + Web Tech Course XML – Key Concepts (cont.) Tag " “ start-tags, for example end-tags, for example empty-element tags, for example Element Begins with start-tag, ends with matching end-tag, or empty-element tag. Content = characters between start- and end-tags. Hello, world.. Attribute Markup construct consisting of name/value pair that exists within a start-tag or empty-element tag. Connect A to B. XML Declaration XML document may begin by declaring some information about itself.

11. © Anselm SpoerriInfo + Web Tech Course 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.

12. © Anselm SpoerriInfo + Web Tech Course 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 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 http://www.w3schools.com/dtd/default.asp XML processors are classified as validating or non-validating whether they check XML documents for validity.

13. © Anselm SpoerriInfo + Web Tech Course 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