95-733 Internet Technologies Tuesday, May 31, 2016 Projects 2 and 3 Due Date : 11:59 PM, Tuesday June 21, 2016 This assignment will be graded as two separate projects. The first part (Project 2) involves the construction of a server side mashup using an XSLT transformation of RSS XML into HTML. The second part (Project 3) is an experiment with an internet of things (IoT) application using HTML5 WebSockets and MQTT (Message Queue Telemetry Transport). Each project is worth 100 points. Project 2 ========= Project 2 begins at Part 6. Parts 1 - 5 are for instruction only. It is strongly recommended that you work through Parts 1 - 5. In this project we will be programming in a transformation language called XSLT. XSLT is used to transform one XML document into another XML document (with a different structure). In order to write programs in XSLT, we need an XML parser (XSLT programs are XML documents) and an XSLT interpreter. The parser is called "Xerces". The interpreter is called "Xalan" (Xalan uses Xerces). The required jar files for XSLT processing using Xalan are : xalan.jar, xercesImpl.jar, xml-apis.jar and xsltc.jar and serializer.jar. These may be downloaded from the Apache Foundation. Part 1 Command Line XSLT ======================== For DOS based machines, create a directory called "bats" and place a batch file called "xalan.bat" in that directory. Place the path to your bats directory in the system path variable. Note, this is the "path" variable, not the "classpath" variable. I recommend that you actually type the xalan.bat file into a text editor. The copy and paste approach has been troublesome. The file xalan.bat will hold the following: java org.apache.xalan.xslt.Process -IN %1 -XSL %2 -OUT %3 This java command will run the code in the Process class. You will need to have the jar files mentioned above on your classpath before running xalan.bat. For Unix based machines, you will use a script file called xalan with execute permissions. My xalan jar files are saved in /Users/mm6/Applications/xalan. My xalan script is shown below. #!/bin/sh export XALAN_HOME=/Users/mm6/Applications/xalan export CP=$XALAN_HOME/xalan.jar:$XALAN_HOME/xercesImpl.jar:$XALAN_HOME/xml- apis.jar:$XALAN_HOME/xsltc.jar:$XALAN_HOME/serializer.jar java -classpath $CP org.apache.xalan.xslt.Process -IN $1 -XSL $2 -OUT $3 Testing. The following is an xml file called books.xml that contains data on books. It's a copy of the file found on Page 70 of the XSLT Programmer's Reference by Michael Kay. Nigel Rees Sayings of the Century 8.95 Evelyn Waugh Sword of Honour 12.99 Herman Melville Moby Dick 8.99 J. R. R. Tolkien The Lord of the Rings 22.99 We would like to transform this file into an HTML document as shown here (result.html):

A list of books

1	Nigel Rees	Sayings of the Century	8.95
2	Evelyn Waugh	Sword of Honour	12.99
3	Herman Melville	Moby Dick	8.99
4	J. R. R. Tolkien	The Lord of the Rings	22.99

In order to carry out this transformation, we will use the XSLT programming language. While it is the case that XSLT is Turing complete, that is, we can solve a wide variety of problems using XSLT, it is especially good at performing XML transformations. Our first XSLT program looks like this (booklist.xsl):

A list of books

Place the two files (books.xml and booklist.xsl) into a directory and make sure that xalan is working properly by running the following command. The output file should look like result.html. xalan books.xml booklist.xsl result.html When debugging XSLT programs, it is often much more helpful to view your output in an editor like Notepad rather than to view your output in a browser like Firefox or IE or Safari. Look at the HTML document in a browser only after you are satisfied with the way it looks in Notepad. The browser view is often quite deceiving and makes a poor debugging tool. Part 2 Handling Namespaces ========================== Many documents make use of XML namespaces to remove ambiguity. The following is our books example with a namespace assigned to the namespace prefix p. Nigel Rees Sayings of the Century 8.95 Evelyn Waugh Sword of Honour 12.99 Herman Melville Moby Dick 8.99 J. R. R. Tolkien The Lord of the Rings 22.99 The same XSLT program that we wrote above needs to be adapted to handle these namespace qualified elements. Be sure to test this new program against the books file with namespaces.

A list of books

Part 3 Running Xalan from within Java ============================================ While command line xalan makes a very nice tool, it is often necessary to make calls for XSLT processing from within other programs. Here is a Java program that performs the same transformation as above. But this time the transformation is performed under application program control. This program would be executed with the command: java ProduceHTML books.xml booklist.xsl result.html // ProduceHTML.java is a simple program that demonstrates how XSLT programs // can be executed from within Java. import java.io.IOException; import java.io.OutputStream; import java.io.FileInputStream; import java.io.FileOutputStream; import javax.xml.transform.Source; import javax.xml.transform.stream.StreamSource; import javax.xml.transform.stream.StreamResult; import javax.xml.transform.Result; import javax.xml.transform.TransformerFactory; import javax.xml.transform.Transformer; import javax.xml.transform.TransformerException; public class ProduceHTML { public static void main(String a[] ) { Source xmlDoc, xslDoc; Result result; try { FileInputStream xml = new FileInputStream(a[0]); FileInputStream xsl = new FileInputStream(a[1]); FileOutputStream out = new FileOutputStream(a[2]); xmlDoc = new StreamSource(xml); xslDoc = new StreamSource(xsl); result = new StreamResult(out); TransformerFactory factory = TransformerFactory.newInstance(); Transformer trans = factory.newTransformer(xslDoc); trans.transform(xmlDoc,result); } catch(TransformerException e) { System.out.println("Transformer Probem" + e); } catch(IOException e) { System.out.println("An I/O problem"); } } } Part 3.5 Passing parameters from Java into an XSLT program ========================================================== The Java example in Part 3 simply executes the XSLT and tells XSLT program what its input and output is. There are times where we want to pass values into the XSLT program at run time. Just prior to calling trans.transform(xmlDoc, result) we can do the following: trans.setParameter("Some_name", "Some string with data"); Within the XSLT, we can do the following: This assigns to Some_name the value passed in - "Some string with data". To access the data, we would use $Some_name to dereference the parameter. Part 4. Running XSLT from within a Java servlet. ================================================ Suppose we want to use a local stylesheet called XSLTransformerCode.xsl to process a remote XML file at some URL. Using Netbeans and Glassfish, add the xsl stylesheet file to the project's Web Pages folder. A doGet method might have the following code: PrintWriter out = response.getWriter(); // get the xsl stored in this project ServletContext context = getServletContext(); InputStream xsl = (InputStream) (context.getResourceAsStream("/XSLTransformerCode.xsl")); // We need two source objects and one result // get an external xml document using a url in a // string format Source xmlDoc = new StreamSource(urlAsString); Source xslDoc = new StreamSource(xsl); Result result = new StreamResult(out); // Prepare to transform TransformerFactory factory = TransformerFactory.newInstance(); Transformer trans = factory.newTransformer(xslDoc); trans.transform(xmlDoc,result); // The transformed document is returned to the browser. Part 5. An Atom document from the W3C ===================================== The following document was accessed from the W3C's main web page by clicking on the syndicate link. It is meant to be read by a news reader. We will use it as our input file for the homework problems below. The current W3C feed may be accessed here: http://www.w3.org/blog/news/feed/atom W3C News Leading the Web to its Full Potential 2015-06-01T15:18:15Z http://www.w3.org/blog/news/feed/atom WordPress Coralie Mercier http://coraliemercier.wordpress.com/ <![CDATA[W3C Advisory Committee Elects Advisory Board]]> http://www.w3.org/blog/news/?p=4727 2015-06-01T15:18:15Z 2015-06-01T15:18:15Z

]]>

The W3C Advisory Committee has filled five open seats on the W3C Advisory Board. Created in 1998, the Advisory Board provides guidance to the Team on issues of strategy, management, legal matters, process, and conflict resolution. Beginning 1 July 2015, the nine Advisory Board participants are Tantek Çelik (Mozilla), Michael Champion (Microsoft), Virginie Galindo (Gemalto), Jay (Junichi) Kishigami (NTT), Charles McCathieNevile (Yandex), Soohong Daniel Park (Samsung Electronics), David Singer (Apple), Chris Wilson (Google) and Judy Zhu (Alibaba). Many thanks to Art Barstow, whose term ends this month. Read more about the Advisory Board.

]]> 0 Coralie Mercier http://coraliemercier.wordpress.com/ <![CDATA[Call for Review: Geolocation API Specification Proposed Edited Recommendation Published]]> http://www.w3.org/blog/news/?p=4725 2015-05-28T15:24:19Z 2015-05-28T15:24:19Z

]]>

The Geolocation Working Group has published a Proposed Edited Recommendation of Geolocation API Specification. This specification defines an API that provides scripted access to geographical location information associated with the hosting device. Comments are welcome through 25 June. Learn more about the Ubiquitous Web Applications Activity.

]]> 0 Maria Auday <![CDATA[Last Call: Canonical EXI]]> http://www.w3.org/blog/news/?p=4717 2015-05-21T18:02:59Z 2015-05-21T14:32:25Z

]]>

The Efficient XML Interchange Working Group has published a Last Call Working Draft of Canonical EXI. Any EXI document is part of a set of EXI documents that are logically equivalent within an application context, but which vary in physical representation based on differences permitted by the Efficient XML Interchange (EXI) Format 1.0 (Second Edition). This specification describes a relatively simple method for generating a physical representation, the canonical form, of an EXI document that accounts for the permissible changes. An example of the applications targeted by this specification is one that needs to guarantee non-repudiation using XML Signature yet allows certain flexibility for intermediaries to reconstitute the documents before they reach final destination without breaking the signatures. Note that two documents may have differing canonical forms yet still be equivalent in a given context based on more elaborate application-specific equivalence rules which is out of scope of this specification. Comments are welcome through 16 July. Learn more about the Extensible Markup Language (XML) Activity.

]]> 0 Maria Auday <![CDATA[HTML5: Techniques for providing useful text alternatives Note Published]]> http://www.w3.org/blog/news/?p=4723 2015-05-21T14:32:24Z 2015-05-21T14:32:24Z

]]>

The HTML Working Group has published a Group Note of HTML5: Techniques for providing useful text alternatives. This document contains best practice guidance for authors of HTML 5 documents on providing text alternatives for images. Learn more about the HTML Activity.

]]> 0 Maria Auday <![CDATA[Notes on Using ARIA in HTML Draft Published]]> http://www.w3.org/blog/news/?p=4720 2015-05-21T14:32:24Z 2015-05-21T14:32:24Z

]]>

The HTML Working Group has published a Working Draft of Notes on Using ARIA in HTML. This document is a practical guide for developers on how to add accessibility information to HTML elements using the Accessible Rich Internet Applications specification WAI-ARIA-1.1, which defines a way to make Web content and Web applications more accessible to people with disabilities. This document demonstrates how to use WAI-ARIA in HTML51, which especially helps with dynamic content and advanced user interface controls developed with Ajax, HTML, JavaScript, and related technologies. Learn more about the HTML Activity.

]]> 0 Coralie Mercier http://coraliemercier.wordpress.com/ <![CDATA[Visit the W3C Track at WWW 2015]]> http://www.w3.org/blog/news/?p=4713 2015-05-28T15:22:53Z 2015-05-20T06:45:36Z

]]>

At this year’s International World Wide Web Conference – WWW2015, W3C organizes a W3C track, where conference participants are invited to learn from, meet and discuss with W3C’s team of experts. On 20 and 21 May 2015, the W3C Track program highlights current standards work developed thanks to the support of European projects: TV and multi-screens scenarios from MediaScape, Web apps and rich Web APIs from HTML5Apps, Web security architecture from Strews and Web of data from BigDataEurope. We hope to see you in Florence, Italy!

]]> 0 Coralie Mercier http://coraliemercier.wordpress.com/ <![CDATA[CSS Basic User Interface Module Level 3 (CSS3 UI) Draft Published]]> http://www.w3.org/blog/news/?p=4711 2015-05-20T06:11:17Z 2015-05-20T06:11:17Z

]]>

The Cascading Style Sheets (CSS) Working Group has published a Working Draft of CSS Basic User Interface Module Level 3 (CSS3 UI). This specification describes user interface related properties and values that are proposed for CSS level 3 to style HTML and XML (including XHTML). It includes and extends user interface related features from the selectors, properties and values of CSS level 2 revision 1 and Selectors specifications. It uses various selectors, properties and values to style basic user interface elements in a document. Learn more about the Style Activity.

]]> 0 Maria Auday <![CDATA[W3C Invites Implementations of Web Notifications]]> http://www.w3.org/blog/news/?p=4706 2015-05-28T15:23:24Z 2015-05-19T15:34:34Z

]]>

The Web Notification Working Group invites implementation of the Candidate Recommendation of Web Notifications. Web notifications defines an API for end-user notifications. A notification allows alerting the user outside the context of a web page of an occurrence, such as the delivery of email. Learn more about the Rich Web Client Activity.

]]> 0 Maria Auday <![CDATA[HTML5 Web Messaging is a W3C Recommendation]]> http://www.w3.org/blog/news/?p=4704 2015-06-01T15:18:10Z 2015-05-19T15:34:33Z

]]>

The Web Applications Working Group has published a W3C Recommendation of HTML5 Web Messaging. The Web Messaging specification defines two mechanisms for communicating between browsing contexts in HTML documents. The cross-document postMessage API allows documents to communicate with each other regardless of their source domain, in a way designed to not enable cross-site scripting attacks. To enable independent pieces of code (e.g. running in different browsing contexts) to communicate directly, authors can use the MessageChannel and MessagePort APIs. Communication channels in this mechanism are implemented as two-way pipes, with a port at each end. Messages sent in one port are delivered at the other port, and vice-versa. Messages are delivered as DOM events, without interrupting or blocking running tasks. Learn more about the Rich Web Client Activity.

]]> 0 Maria Auday <![CDATA[W3C Invites Implementations of TTML Text and Image Profiles for Internet Media Subtitles and Captions 1.0]]> http://www.w3.org/blog/news/?p=4701 2015-05-28T15:23:16Z 2015-05-19T15:34:33Z

]]>

The Timed Text Working Group invites implementation of the Candidate Recommendation of TTML Text and Image Profiles for Internet Media Subtitles and Captions 1.0. This document specifies two profiles of TTML1: a text-only profile and an image-only profile. These profiles are intended to be used across subtitle and caption delivery applications worldwide, thereby simplifying interoperability, consistent rendering and conversion to other subtitling and captioning formats. The text profile is a superset of TTML Simple Delivery Profile for Closed Captions (US). Learn more about the Video in the Web Activity.

]]> 0 Maria Auday <![CDATA[Last Call: HTML Canvas 2D Context]]> http://www.w3.org/blog/news/?p=4692 2015-05-20T06:51:33Z 2015-05-14T18:28:48Z

]]>

The HTML Working Group has published a Last Call Working Draft of HTML Canvas 2D Context. This specification defines the 2D Context for the HTML canvas element. The 2D Context provides objects, methods, and properties to draw and manipulate graphics on a canvas drawing surface. Comments are welcome through 11 June. Learn more about the HTML Activity.

]]> 0 Maria Auday <![CDATA[Dataset Descriptions: HCLS Community Profile Note Published]]> http://www.w3.org/blog/news/?p=4681 2015-05-19T17:44:22Z 2015-05-14T18:28:48Z

]]>

The Semantic Web Health Care and Life Sciences Interest Group has published a Group Note of Dataset Descriptions: HCLS Community Profile. Access to consistent, high-quality metadata is critical to finding, understanding, and reusing scientific data. This document describes a consensus among participating stakeholders in the Health Care and the Life Sciences domain on the description of datasets using the Resource Description Framework (RDF). This specification meets key functional requirements, reuses existing vocabularies to the extent that it is possible, and addresses elements of data description, versioning, provenance, discovery, exchange, query, and retrieval. Learn more about the Data Activity.

]]> 0 Maria Auday <![CDATA[Last Call: CSS Flexible Box Layout Module Level 1]]> http://www.w3.org/blog/news/?p=4685 2015-05-19T17:44:14Z 2015-05-14T18:28:47Z

]]>

The Cascading Style Sheets (CSS) Working Group has published a Last Call Working Draft of CSS Flexible Box Layout Module Level 1. This specification describes a CSS box model optimized for user interface design. In the flex layout model, the children of a flex container can be laid out in any direction, and can “flex” their sizes, either growing to fill unused space or shrinking to avoid overflowing the parent. Both horizontal and vertical alignment of the children can be easily manipulated. Nesting of these boxes (horizontal inside vertical, or vertical inside horizontal) can be used to build layouts in two dimensions. CSS is a language for describing the rendering of structured documents (such as HTML and XML) on screen, on paper, in speech, etc. Comments are welcome through 11 June. Learn more about the Style Activity.

]]> 0 Maria Auday <![CDATA[New version of WAI-ARIA Authoring Practices; Updates to WAI-ARIA 1.1 and Core Accessibility API Mappings]]> http://www.w3.org/blog/news/?p=4683 2015-05-19T17:44:07Z 2015-05-14T18:28:43Z

]]>

The Protocols and Formats Working Group has published a First Public Working Draft of WAI-ARIA Authoring Practices 1.1 and updated Working Drafts of Accessible Rich Internet Applications (WAI-ARIA) 1.1 and Core Accessibility API Mappings (Core-AAM) 1.1.

WAI-ARIA Authoring Practices recommends approaches to help web application developers make widgets, navigation, and behaviors accessible using WAI-ARIA roles, states, and properties. This new version has been substantially reworked in order to provide guidance specific to WAI-ARIA 1.1. WAI-ARIA provides an ontology of roles, states, and properties that define accessible user interface elements. It is designed to improve the accessibility and interoperability of web content, particularly web applications. Core-AAM describes how user agents should expose semantics of content languages to accessibility APIs across multiple content technologies (including much of WAI-ARIA) and serves as the basis for other specifications to extend the mappings to specific technologies. Learn more from the call for review e-mail and read about the Web Accessibility Initiative (WAI).

]]> 0 Coralie Mercier http://coraliemercier.wordpress.com/ <![CDATA[W3C Celebrates 20 Years in Europe]]> http://www.w3.org/blog/news/?p=4671 2015-05-20T06:45:27Z 2015-05-05T06:52:31Z

]]>

While the Web was born in Europe in 1989, today W3C celebrates twenty years of work accomplished by European stakeholders within W3C, the organization that helps keep the Web open, free and accessible to all.

The W3C European host was established in Sophia Antipolis, France, in April 1995. The first draft of the WCAG guidelines, the promise of the mobile Web and more recently the Web payments work were all initiated by the W3C Europe staff. Sir Tim Berners-Lee, W3C director and Web inventor, together with a panel of luminaries, will share his vision of the future Web.

The event is supported by Inria and ERCIM, former and current W3C Europe hosts. We also thank Hachette Livre for its generous support of W3CEurope@20.

]]> 0 Maria Auday <![CDATA[IndieUI: Events and IndieUI: User Context Updated Working Drafts Published]]> http://www.w3.org/blog/news/?p=4654 2015-05-19T15:26:58Z 2015-04-30T18:22:19Z

]]>

The IndieUI Working Group has published a Working Draft of IndieUI: Events 1.0 – Events for User Interface Independence and IndieUI: User Context 1.0 – Contextual Information for User Interface Independence. These drafts include a reduction in scope for the 1.0 version of Events, and minor property and interface changes in User Context. IndieUI: Events defines a way for different user interactions to be translated into simple events and communicated to Web applications. IndieUI: User Context defines a set of preferences that users can choose to expose to web applications, and an API for user agents to access the preferences and listen for changes. Both IndieUI specifications will make it easier for Web applications to work in a wide range of contexts — different devices (such as mobile phones and tablets), different assistive technologies (AT), different user needs. With these technologies, Web application developers will have a uniform way to design applications that work for multiple devices and contexts. The IndieUI Working Group is currently exploring moving this work to other Working Groups; however, comments on these drafts are still welcomed, preferably by 29 May 2015. Learn more from the IndieUI Overview; and read about the Web Accessibility Initiative (WAI).

]]> 0 Maria Auday <![CDATA[Call for Review: SCXML Proposed Recommendation Published]]> http://www.w3.org/blog/news/?p=4661 2015-05-14T18:09:30Z 2015-04-30T18:20:04Z

]]>

The Voice Browser Working Group has published a Proposed Recommendation of State Chart XML (SCXML): State Machine Notation for Control Abstraction. This document describes SCXML, or the “State Chart extensible Markup Language”. SCXML provides a generic state-machine based execution environment based on CCXML and Harel State Tables. Comments are welcome through 30 May. Learn more about the Voice Browser Activity.

]]> 0 Maria Auday <![CDATA[Credential Management Level 1 Draft Published]]> http://www.w3.org/blog/news/?p=4663 2015-05-14T18:09:43Z 2015-04-30T18:16:55Z

]]>

The Web Application Security Working Group has published a Working Draft of Credential Management Level 1. This specification describes an imperative API enabling a website to request a user’s credentials from a user agent, and to help the user agent correctly store user credentials for future use. Learn more about the Security Activity.

]]> 0 Maria Auday <![CDATA[Last Call: W3C DOM4]]> http://www.w3.org/blog/news/?p=4651 2015-05-14T18:10:00Z 2015-04-28T17:02:31Z

]]>

The HTML Working Group has published a Last Call Working Draft of W3C DOM4. DOM defines a platform-neutral model for events and node trees. Comments are welcome through 19 May. Learn more about the HTML Activity.

]]> 0 Maria Auday <![CDATA[UI Events (formerly DOM Level 3 Events) Draft Published]]> http://www.w3.org/blog/news/?p=4649 2015-05-14T18:09:51Z 2015-04-28T17:02:31Z

]]>

The Web Applications Working Group has published a Working Draft of UI Events (formerly DOM Level 3 Events). This specification defines UI Events which extend the DOM Event objects defined in DOM4. UI Events are those typically implemented by visual user agents for handling user interaction such as mouse and keyboard input. Learn more about the Rich Web Client Activity.

]]> 0 Maria Auday <![CDATA[Language Tags and Locale Identifiers for the World Wide Web Draft Published]]> http://www.w3.org/blog/news/?p=4644 2015-04-30T20:07:07Z 2015-04-23T17:59:29Z

]]>

The Internationalization Working Group has published a Working Draft of Language Tags and Locale Identifiers for the World Wide Web. This document describes the best practices for identifying or selecting the language of content as well as the the locale preferences used to process or display data values and other information on the Web. It describes how document formats, specifications, and implementations should handle language tags, as well as extensions to language tags that describe the cultural or linguistic preferences referred to in internationalization as a “locale”. Learn more about the Internationalization Activity.

]]> 0 Maria Auday <![CDATA[Linked Data Platform 1.0 Primer Note Published]]> http://www.w3.org/blog/news/?p=4646 2015-04-30T20:06:58Z 2015-04-23T17:59:28Z

]]>

The Linked Data Platform (LDP) Working Group has published a Group Note of Linked Data Platform 1.0 Primer. This primer provides an introduction to the Linked Data Platform (LDP), with examples illustrating the principal concepts such as the notion of an LDP resource, and the LDP container and how they can be used by Web clients. Two sample scenarios show how an LDP client can interact with an LDP server in the context of a read-write Linked Data application, i.e. how to use HTTP for accessing, updating, creating and deleting resources from servers that expose their resources as Linked Data. Learn more about the Data Activity.

]]> 0 Maria Auday <![CDATA[First Public Working Draft: CSS Cascading and Inheritance Level 4]]> http://www.w3.org/blog/news/?p=4641 2015-04-30T20:04:30Z 2015-04-21T15:49:09Z

]]>

The Cascading Style Sheets (CSS) Working Group has published a Working Draft of CSS Cascading and Inheritance Level 4. CSS is a language for describing the rendering of structured documents (such as HTML and XML) on screen, on paper, in speech, etc. This CSS module describes how to collate style rules and assign values to all properties on all elements. By way of cascading and inheritance, values are propagated for all properties on all elements. Learn more about the Style Activity.

]]> 0 Maria Auday <![CDATA[Clipboard API and events; File API Drafts Published]]> http://www.w3.org/blog/news/?p=4639 2015-04-30T20:06:20Z 2015-04-21T15:49:09Z

]]>

The Web Applications Working Group has published a Working Draft of Clipboard API and events. This specification defines the common clipboard operations of cutting, copying and pasting, in such a way that they are exposed to Web Applications and can be adapted to provide advanced functionality. Its goal is to provide for compatibility where possible with existing implementations.

The Group also published a Working Draft of File API. This specification provides an API for representing file objects in web applications, as well as programmatically selecting them and accessing their data. Learn more about the Rich Web Client Activity.

]]> 0 Maria Auday <![CDATA[Updated Candidate Recommendation for CSS Cascading and Inheritance Level 3]]> http://www.w3.org/blog/news/?p=4620 2015-04-28T16:48:43Z 2015-04-16T18:03:59Z

]]>

The Cascading Style Sheets (CSS) Working Group has published an updated Candidate Recommendation of CSS Cascading and Inheritance Level 3. This CSS module describes how to collate style rules and assign values to all properties on all elements. By way of cascading and inheritance, values are propagated for all properties on all elements. CSS is a language for describing the rendering of structured documents (such as HTML and XML) on screen, on paper, in speech, etc. Learn more about the Style Activity.

]]> 0 PART 6 Introductory XSLT Programming ==================================== In solving the Atom puzzles below, I used the following in each of my XSLT programs. Note, Atom uses namespaces. (1) 2.5 Points. Using command line XSLT, write an XSLT program that displays the contents of each title that is a direct child of feed/entry. This list of titles will appear as an HTML unsigned list. No variables may be used in your style sheet. It will appear something like this (newlines added for readability):

W3C Atom Document

W3C Advisory Committee Elects Advisory Board
Call for Review: Geolocation API Specification Proposed Edited Recommendation Published

Name your XSLT program "one.xsl". Note that the code developed here is used again in question 7. (2) 2.5 Points. Modify the program in question (1) so that the titles are in sorted order. This first two titles in my browser are: Call for Review: Pointer Events Proposed Recommendation Published Call for Review: RDFa 1.1 is a Proposed Edited Recommendation Name your XSLT program "two.xsl". (3) 5 Points. This is exactly the same as question 1 but you are required to use a global variable in your XSLT style sheet. See the article "What kind of language is XSLT?" by Michael Kay (writing for IBM on the course schedule). It is required that you use the following variable declaration: You will then dereference the variable in the element. Name your XSLT program "three.xsl". (4) 10 Points. Using command line XSLT, write an XSLT program that displays the number of Atom entry elements that appear in the document. You must use the XSLT count function in your solution. Your output will be marked up as HTML and will appear in a browser as follows: Counting Atom entry items 25 Name your XSLT program "four.xsl". (5) 10 Points. Using command line XSLT, write an XSLT program that displays the contents of each title that is a direct child of feed/entry. Your output will be marked up as HTML and will appear in a browser with the titles underlined as hypertext links. If the user clicks on a link the browser will fetch the associated document that is pointed to by the link element. The output on the browser will appear as follows (in a browser, these show up as clickable links.) Titles (with links) W3C Launches Web of Things initiative First Public Working Draft: Frame Timing Navigation Timing 2 Draft Published Name your XSLT program "five.xsl". (6) 5 Points. Using command line XSLT, write an XSLT program that displays the contents of each title and the value of the term attribute of each category associated with that title. The output will be marked up nicely in HTML. A browser will display something like the following: Titles and Categories W3C Launches Web of Things initiative Browsers and Authoring Tools Home Page Stories Top Story Web Design and Applications Web of Devices Web of Services First Public Working Draft: Frame Timing Browsers and Authoring Tools Home Page Stories Publication Web Design and Applications Name your XSLT program "six.xsl". (7) 2.5 Points. This is the same as question (1) but generate a JSON object instead of HTML. When generating JSON, you will need to change your XSLT program so that its heading looks like this: The output will look exactly like this (note, we are dropping the HTML from question 1 altogether). We will have a result that is a JSON object holding an array of strings: { [ W3C Launches Web of Things initiative, First Public Working Draft: Frame Timing, Navigation Timing 2 Draft Published, : : Last Call: XML Inclusions (XInclude) Version 1.1 ] } Note, the final string in the array is NOT terminated by a comma. You area required to use an "XSLT:IF" to test if a comma should be generated or not. Name your XSLT program "seven.xsl". SERVER SIDE MASHUP Reading RSS ============================== (8) 30 Points. Write a JSP page that asks the user to enter a topic from a list of topics shown in a drop down list. The three topics will be Business, Technology and World News. Once a selection is made your browser will make a call on a Java servlet passing along the topic. The topic is simply a string passed to the servlet from the browser. The servlet will fetch the appropriate RSS 2.0 feed from the NY Times web site. It will apply a style sheet that will generate HTML to the browser. The HTML display will show each news title of each item. Each news title will be displayed as a link. The user will be able to click links to visit the associated page. Note that there are no namespaces defined on the main elements in RSS 2.0. New York Times feeds may be found at http://www.nytimes.com/services/xml/rss/index.html A full page refresh is required. Name this Netbeans project "Project2Question8". Make a copy of this project to a new Netbeans Project with the new name "Project2Question9". (9) 5 Points. Within the Netbeans project named "Project2Question9", add a “source of feeds” drop down box to the application that was built in question 8. Thus, the user will be able to select a topic and a source. At a minimum, you will need to provide for three sources. In my solution, I used the BBC, the New York Times and the Sydney Morning Herald. The BBC feeds are discussed here: http://news.bbc.co.uk/1/hi/help/3223484.stm The Sydney Morning Herald feeds are discussed here: http://www.smh.com.au/rssheadlines For this application, a full page refresh is required. Make a copy of this project to a new Netbeans Project with the new name "Project2Question10". (10) 15 points. Within the Netbeans project named "Project2Question10", add AJAX to your solution in question 9. Be creative and redesign the site so that there is no need for a full page refresh. Use the Javascript XHR object in Javascript. Make a copy of this project to a new Netbeans Project with the new name "Project2Question11". (11) 12.5 points. Within the Netbeans project named "Project2Question11", modify your solution to question 10 by using the JQuery library for the AJAX calls. Here is an introduction to JQuery that shows how the library can be included in your Netbeans project: http://netbeans.org/kb/docs/web/js-toolkits-jquery.html Place these four projects into a single directory. The root of this directory will contain the seven XSL files and the four Netbeans projects. Zip this single directory. Submit one zip file called Project2.zip to the assignment section of Blackboard. Project2.zip will contain all of the projects and files described above. Project 3 ========= The internet of things (IOT) often collects real time data from sensors and transmits these data to a service offering publish and subscribe capabilities. The service is sometimes called a broker. The sensor acts as a publisher. The sensor has no idea who its subscribers are. It simply transmits data to the broker. The subscriber subscribes to messages from the broker and, in this way, is able to read data from the sensors. In Project 1, we used a whiteboard application from Oracle to build an application that allowed us to collaborate in real time without polling. We leveraged HTML WebSockets and wrote our own server side code that sent a message to all listeners. If we wanted to, we could write a more involved service that would allow for publishing and subscribing as outlined above. But this would a bigger challenge than it seems. And, fortunately, we don't have to. We have many to choose from. In Project 3, we will not write our own server side code. Instead, we will use an open source MQTT broker called Mosquitto. Mosquito can be downloaded from here: http://mosquitto.org/download/. You can install Mosquitto on your MAC using brew. See http://brew.sh and then use "brew install mosquito". There are directions on the Mosquito web site for Windows users. When you run Mosquito, it will run with its default configuration. We need to change its configuration to allow for WebSocket connections (we want to visit the server from Javascript). To change the configuration of Mosquitto, we can modify the configuration file found at /usr/local/etc/mosquitto/mosquitto.conf (on a MAC). Make one change to this file. Change the line that reads "protocol mqtt" to "protocol websockets" (without the quotes). My copy of Mosquito is located at /usr/local/sbin. If I change to that directory, I can run Mosquito (picking up the configuration file) with the command mosquitto -c /usr/local/etc/mosquitto/mosquitto.conf -v Once you have Mosquito running, we want to connect to the server from Javascript running in a browser. We do not want to write the client side MQTT code ourselves. Even though we have easy access to WebSockets, it would be far better to use an existing Javascript library that provides a convenient API to MQTT. The implementation of the API will, of course, use Websockets below the scenes. In our web pages, we will include the Javascript library from Paho. It is called mqttws31.js. There is a very nice getting started section at the following link. It has a simple example of a Javascript client that will run in a web page : https://eclipse.org/paho/clients/js/ The mqttws31.js Javascript library can be directly downloaded from here: https://raw.githubusercontent.com/eclipse/paho.mqtt.javascript/master/src/mqttws31.js There is a nice discussion here on MQTT. https://www.ibm.com/support/knowledgecenter/#!/SSFKSJ_7.5.0/com.ibm.mm.tc.doc/tc60302_.htm Your task in Project 3 is to: 1) 20 Points. Build a Netbeans project named Project3Basic with the code found here: http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onmousemove Note that every time the mouse moves (within the box) an event is generated and the x and y coordinates are displayed. We want to sense the mouse movements. 2) 40 Points. Copy Project3Basic to a new Netbeans project called Project3MouseTrackerPublisher. This will need to be modified so that every mouse movement publishes coordinates to Mosquito. It makes good use of mqttws31.js. Mosquito is our broker. 3) 40 Points. Create a new Netbeans project called Project3MouseTrackerSubscriber. It will make use of mqttws31.js to subscribe to events published to Mosquito. It will simply display the coordinates being received (there will be no box as is shown in Project3MouseTrackerPublisher).