95-733 Internet Technologies Thursday, January 21, 2016 Project 2 Due Date : 11:59 PM, Tuesday, February 9, 2016 This assignment has several objectives. The first objective of this project is to teach the student to transform XML documents using a functional programming language - XSLT. A second objective is to expose the student to building a server side mashup using XSLT, Java, JSP, CSS, Javascript, and RSS. A third objective is to experiment with client side state management (using HTML5 Web Storage). The student will also learn to build a cloud based application using Heroku. This application will demonstrate how third party code may be accessed via Javascript on the browser. Systems such as Google Analytics may be built this way. Finally, students will learn how to build a simple non-html web site using RSS 2.0. The actual Project begins at Part 7. Parts 1 - 5 are for instruction only. Part 6 is an input file to your XSLT programs in Part 7. Part 8 asks you to build two web applications based on the work we did in Project 1 Part 4. It is strongly recommended that you work through parts 1 - 5. At the very least, study over each example. Part 1 Command Line XSLT Part 2 Handling Namespaces within XSLT Part 3 Running Xalan (XSLT processing) from with Java Part 4 Passing parameters into XSLT from Java Part 5 Running XSLT from within a servlet Part 6 An ATOM document with namespaces Part 7 XSLT Exercises (1-7) Part 8 Programming (8,9,10,11) Submission Summary Part 1 Command Line XSLT ======================== In this lab 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. 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. I recommend that you actually type the contents of 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. (The web is a forgiving place but we want exact answers here.) 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 4 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 5. 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 6. An Atom document from the W3C ===================================== The W3C provides both ATOM feeds and RSS feeds. Here, in order to work directly with namespaces, we will work with an old ATOM feed. The following document was accessed from the W3C's main web page by clicking on the syndicate link in January of 2015. It is meant to be read by a news reader application. We will use it as our input file for the problems below. The current W3C feed may be accessed here (use Firefox): 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 7 Introductory XSLT Programming (30 Points) ================================================ The questions that follow refer to the Atom feed in Part 6. 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 "Titles.xsl". Note that the code developed here is used again in question 7. (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 "SortedTitles.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 "TitlesVar.xsl". (4) 5 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 "EntryCount.xsl". (5) 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. 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 "TitleLinks.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 "TermAttribute.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 are required to use an "XSLT:IF" to test if a comma should be generated or not. Name your XSLT program "ToJSON.xsl". Part 8. SERVER SIDE MASHUP Reading RSS ====================================== (8) 35 Points. This is an extension of Project 1 question 4. In that project, you were asked to read RSS data from an external site and display it as text to the browser. In this project, you are being asked to transform that RSS (using XSLT running on the server) into a form that is convenient for the client side (Javascript) programmer. In Project 1, question 4, you were provided with six URL's. In this project, you must find an additional four URL's and your final application should work with these ten. As one of these ten, you may use the additional URL that you had to find for yourself in Project 1. (If an RSS feed returns a 403 Error, don't use it, find another). The overall functionality of this application is to allow a user to specify which news feeds should be included in the newspaper displayed on the browser. The user will be able to select any subset of the ten URL's. Your Netbeans project will be named ServerSideMashup1 and will include the following components: Source Packages including: CartServlet.java synchronized doGet This method takes a single parameter which is an itemCode for some item in the catalog of RSS URL's. This method dereferences a single URL (the URL associated with the itemCode) and transforms the RSS using an XSLT stylesheet. The resulting HTML document is returned to the caller. 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. The caller is making a single AJAX request. This AJAX request may be followed rapidly by several others. These requests are being generated because the user has clicked the "Generate newspaper" button. To enforce mutual exclusion, the synchronized keyword is being used. The synchronized keyword will only allow one thread at a time within this method. doPost This method selects this user's session and cart and allows the user to add or remove selected items. It returns an XML or JSON representation of the cart of selected feeds. This method was completed in Project 1 Part 4. Cart.java I found it useful to modify this class so that it uses a hash map defined as follows: private HashMap contents; Catalog.java This class uses a HashMap to hold ten Item objects as defined here and in Project 1 Part 4. Item.java At a minimum, each Item will contain private String code; private String name; private String description; private String url; Web Pages include: XSLTTransformerCode.xsl Code is provided that transforms an RSS feed to an XML format that is easily manipulated by the Javascript code on the browser. ajax1.js Javascript code provided by P. McCarthy's article. cart.js Javascript code modified from P. McCarthy's article. The original article provided one callback handler called updateCart. This modified code provides two handlers - updateCart as before but also updateNews. The updateNews method reads the XML from the XSLT transformation and generates anchor elements in the browser's DOM tree. When one of these anchors is clicked by the user, an entire article is fetched from a remote source and displayed. Note: when the user is done adding and deleting articles from their cart, they typically will hit the Generate Newspaper button. This button will cause an event handler called getDocsFromCart() to be called. getDocsFromCart() may need to create more than one XHR object (the user may be interested in several feeds). This results in several calls to the doGET method in the CartServlet. It will be necessary for you to maintain a Javascript array to hold onto codes of interest for this user. index.jsp JSP code modified from P. McCarthy's article. newscss.css Cascading style sheet code displaying all h2 elements in navy blue, 20 pixels from the left margin. The table is displayed in blueviolet with a yellow background color and a left margin of 20 pixels. The other settings are of your own design. The page will appear well organized and attractive. (9) 20 Points. One problem with our newspaper in question (8) is that it will not scale. The reason for this is that the server is maintaining state associated with each user. Each user is presenting a cookie to the server and the server is maintaining a hash table (the cart) for each user. This server-side state maintenance is a problem we might wish to avoid. Suppose the client maintained the state instead of the server. If the client were to present its data on each request, we could easily scale this application - just copy the application to many servers and let the client visit one that is not busy. The server's job would be to fetch the required RSS feeds, perform the transformations and return these XML documents to the clients. With this client side state approach, we could forget about maintaining the correct session data on the correct server. In this application (named ServerSideMashup2), you will continue to utilize a catalog of available feeds. This catalog will reside on the server and will be used as before. On the initial visit, the catalog of feeds will be displayed, along with an add and delete button per feed (as before). However, in this application, you will no longer make use of a server side cart. Instead, use HTML5's Web Storage API. When a feed is added to the cart, your Javascript code will write the cart to the browser's local storage. When a feed is deleted from the cart, the cart is modified and written to the browser's local storage. On the right side of the page, the cart is shown to update as before. There are no calls to the server for each change - as we did before when the cart resided on the server. There is no need to contact the server until the user has selected the Show Newspaper button. At that point, n requests are made to the server - one for each of the n items in the local cart. Note: you don't need to pass a cookie along with these requests. HTML5's Web Storage API is accessed with commands like the following: // set myselectedCodes1 to an empty Javascript object as a string localStorage.setItem('mySelectedCodes1', JSON.stringify({})); // retrieve an object saved as a string var selectedCodesString = localStorage.getItem('mySelectedCodes1'); selectedCodes = JSON.parse(selectedCodesString); The external CSS stylesheet used for this application must have at least the following settings: table { color: whitesmoke; margin-left: 20px; background-color: black; font-family: helvetica; } body { background-color: black; } The rest of the CSS is of your own design but the page will appear well organized and attractive. (10) 10 Points. Build a simple JSONP web site and publish it to Heroku. This web site will count the number of visits made to the application in question 9. The web application in question 9 will need to be modified to generate a JSONP request to Heroku upon each visit to its index.jsp page. (We are not counting the AJAX requests made back to the Newspaper app. We are only counting the number of visits to the index.jsp page.) Provide a text file in your submission directory named Heroku.txt. This file will contain the Heroku URL of your counter application. Note, in order to publish a JEE war file to Heroku, you will need to do the following: a) Register with a Heroku and download the tool belt - a command line interface (CLI) tool for managing Heroku apps. b) $heroku login c) $heroku create d) $heroku plugins:install https://github.com/heroku/heroku-deploy e) $heroku deploy:war --war --app The app_name is an existing app. You created it with $heroku create. The path_to_war_file is under the /dist directory. Use the CLI to find that directory. Visit the Heroku web app with a browser to see the number of visits made to your web application running on Netbeans. Here is a sample interaction describing question 10: A user uses her browser to visit the Newspaper application. The newspaper application is deployed on Glassfish and is available over localhost. It behaves as before - allowing her to make reading selections and viewing a "newspaper". Behind the scenes, as soon as she visits the newspaper application, a dynamic script tag is used to contact an application running on Heroku. The servlet within the Heroku application increments a counter (counting the number of visits made to the newspaper site). As part of the Heroku application, there is an index.jsp page which, when visited, reports on the number of visits to the Newspaper application. Again, the newspaper application is not running on Heroku. The newspaper application makes calls to heroku via a dynamic script tag. The heroku application provides two ways in. One the one hand, the servlet runs when a visit to the newspaper application occurs. On the other hand, the index.jsp page is accessed to determine what the total count is. (11) 5 Points. Build a simple RSS 2.0 web site using Netbeans. Call the project MyRSSProject. Instead of building a web site with HTML, use RSS in its place. When this page is visited, it will display RSS. Include a link to this site in the application that you built in question 10. That is, populate the catalog with this new source of RSS data and include it in your newspaper application. Submission Summary ================== Place these files into a single directory and zip that entire directory to a file named Project2.zip. Upload Project2.zip to the Assignment section of Blackboard. Good documentation is required. Remember to comment your code. (1) Titles.xsl 2.5 Points (2) SortedTitles.xsl 5 Points (3) TitlesVar.xsl 5 Points (4) EntryCount.xsl 5 Points (5) TitleLinks.xsl 5 Points (6) TermAttribute.xsl 5 Points (7) ToJSON.xsl 2.5 Points (8) Netbeans Project named ServerSideMashup1 35 Points (9) Netbeans Project named ServerSideMashup2 20 Points (10) Netbeans Project named ServerSideMashup3 Netbeans Project named HerokuCounter and Heroku.txt with a working URL to HerokuCounter on Heroku. 10 Points (11) Netbeans Project named MyRSSProject. 5 points