Statistics Visualization in News Media and Education

Full text

(1)LiU-ITN-TEK-A--11/024--SE. Statistics Visualization in news media and education Per Lind 2011-05-11. Department of Science and Technology Linköping University SE-601 74 Norrköping , Sw eden. Institutionen för teknik och naturvetenskap Linköpings universitet 601 74 Norrköping.

(2) LiU-ITN-TEK-A--11/024--SE. Statistics Visualization in news media and education Examensarbete utfört i medieteknik vid Tekniska högskolan vid Linköpings universitet. Per Lind Handledare Tobias Åström Examinator Mikael Jern Norrköping 2011-05-11.

(3) Upphovsrätt Detta dokument hålls tillgängligt på Internet – eller dess framtida ersättare – under en längre tid från publiceringsdatum under förutsättning att inga extraordinära omständigheter uppstår. Tillgång till dokumentet innebär tillstånd för var och en att läsa, ladda ner, skriva ut enstaka kopior för enskilt bruk och att använda det oförändrat för ickekommersiell forskning och för undervisning. Överföring av upphovsrätten vid en senare tidpunkt kan inte upphäva detta tillstånd. All annan användning av dokumentet kräver upphovsmannens medgivande. För att garantera äktheten, säkerheten och tillgängligheten finns det lösningar av teknisk och administrativ art. Upphovsmannens ideella rätt innefattar rätt att bli nämnd som upphovsman i den omfattning som god sed kräver vid användning av dokumentet på ovan beskrivna sätt samt skydd mot att dokumentet ändras eller presenteras i sådan form eller i sådant sammanhang som är kränkande för upphovsmannens litterära eller konstnärliga anseende eller egenart. För ytterligare information om Linköping University Electronic Press se förlagets hemsida http://www.ep.liu.se/ Copyright The publishers will keep this document online on the Internet - or its possible replacement - for a considerable time from the date of publication barring exceptional circumstances. The online availability of the document implies a permanent permission for anyone to read, to download, to print out single copies for your own use and to use it unchanged for any non-commercial research and educational purpose. Subsequent transfers of copyright cannot revoke this permission. All other uses of the document are conditional on the consent of the copyright owner. The publisher has taken technical and administrative measures to assure authenticity, security and accessibility. According to intellectual property law the author has the right to be mentioned when his/her work is accessed as described above and to be protected against infringement. For additional information about the Linköping University Electronic Press and its procedures for publication and for assurance of document integrity, please refer to its WWW home page: http://www.ep.liu.se/. © Per Lind.

(4) Abstract This thesis work was done at NComVA AB (Norrköping Communicative Visual Analytics) a spin-off company from the Norrköping Visualization Centre at Linköping University. It aims at developing a client-side web application for creating dynamic reports that uses Vislets for storytelling. A WYSIWYG (What You See Is What You Get) page editor that could use Vislets generated by the Statistics Publisher to create dynamic reports is implemented. The focus of the application is allowing the generation of dynamic reports in HTML without requiring any knowledge of HTML. The implemented editor is a client-side web application written in JavaScript using the jQuery library.. v.

(5)

(6) Contents 1 Introduction 1.1 Vislet publishing . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1.2 Aim . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1.3 Method . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. 1 1 1 1. 2 Background 2.1 Vislet Author-Publishing System . . . . 2.1.1 Statistics eXplorer . . . . . . . . 2.1.2 Statistics Publisher . . . . . . . . 2.2 Client-side Scripting . . . . . . . . . . . 2.2.1 WYSIWYG Rich HTML Editing. . . . . .. . . . . .. . . . . .. . . . . .. . . . . .. . . . . .. . . . . .. . . . . .. . . . . .. . . . . .. . . . . .. . . . . .. . . . . .. . . . . .. . . . . .. 3 3 3 4 4 4. 3 Implementation 3.1 Features . . . . . . . . . . . . . . 3.2 Implementing Rich-text Editing . 3.3 Adding and Manipulating Vislets 3.4 Editing Vislets . . . . . . . . . . 3.5 Page navigation . . . . . . . . . . 3.6 Web Storage . . . . . . . . . . . 3.7 Exporting Files . . . . . . . . . .. . . . . . . .. . . . . . . .. . . . . . . .. . . . . . . .. . . . . . . .. . . . . . . .. . . . . . . .. . . . . . . .. . . . . . . .. . . . . . . .. . . . . . . .. . . . . . . .. . . . . . . .. . . . . . . .. . . . . . . .. 7 7 8 9 12 12 14 14. 4 Results 4.1 The Application . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4.1.1 Interaction . . . . . . . . . . . . . . . . . . . . . . . . . . .. 17 17 17. 5 Conclusion 5.1 Discussion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5.2 Future work . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. 23 23 23. Bibliography. 25. vii. . . . . . . .. . . . . . . .. . . . . . . .. . . . . . . ..

(7)

(8) Chapter 1. Introduction 1.1. Vislet publishing. This thesis work was done at NComVA AB (Norrköping Communicative Visual Analytics) a spin-off company from the Norrköping Visualization Centre at Linköping University. NComVA develops interactive statisics storytelling software for the web. Their embeddable dynamic visualization solution called the Vislet consists of visual components created with the in-house developed GAV Flash framework [13]. In this thesis work creation of dynamic reports containing Vislets are explored.. 1.2. Aim. This thesis work aim at developing a client-side web application for creating dynamic reports that uses Vislets for storytelling, see figure 1.1. A WYSIWYG page editor that could use Vislets generated by the Statistics Publisher to create dynamic reports is to be implemented. A WYSIWYG application allow the user to directly manipulate the layout of a document and visualize what the document will look like when published. The application should allow generating dynamic reports as HTML documents without requiring any knowledge of HTML.. 1.3. Method. The editor were implemented in JavaScript with the jQuery library using the Eclipse IDE. Debugging was done in Firefox using Firebug and in Internet Explorer using the IE Developer Tools. The jQuery UI library was used for styling interface components and for controlling Vislet positioning. Suggestions for improvements were made and documented in the report.. 1.

(9) 2. Introduction. Figure 1.1. An illustration of where the page editor is supposed to fit in the Vislet publishing process.

(10) Chapter 2. Background This chapter will give some background of the existing system and give more details about Vislets. It will motivate implementation choices and introduce the rich-text editing web browser implemented support.. Figure 2.1. An overview of the step-by-step process of authoring and publishing Vislets. Image by NcomVA AB. 2.1. Vislet Author-Publishing System. The Author-Publishing system created by NComVA is meant to enable the user to author and publish embeddable interactive geospatial visual representations for the web. It consists of the Statistics eXplorer used for creating stories by exploring the data and the Statistics Publisher used for creating embeddable Vislets, see figure 2.1.. 2.1.1. Statistics eXplorer. The Statistics eXplorer is a tool for interactively analyzing spatial-temporal and multivariate regional demographic data. It focuses on storytelling, creating stories that communicates gained insights about the regional data in a sense-making 3.

(11) 4. Background. easy to understand manner. Stories can be a helpful way to communicate gained insights to policy and decision makers, researchers or citizens, giving better understanding of a region’s performance and territorial trends. Statistics eXplorer uses a snapshot mechanism that helps the analyst highlight views of particular interest and guide others to follow important discoveries. The snapshot tool makes visualization captures during the exploration process. When capturing a snapshot all the properties of the visualization components and details on which data was used are stored in a XML file. A story can contain series of snapshots inside chapters that are all stored in the XML file. Snapshots can be browsed through using navigation buttons in the vislet or can be loaded using hyperlinks in the chapter metatext [9].. 2.1.2. Statistics Publisher. Using the Publisher, a Vislet can be created by setting some parameters, such as what story file and which visualization representations to be used. The publisher imports story files created with the Statistics eXplorer and produces Flash based Vislets as embeddable HTML code that can be published on any site thanks to a backend publisher server [14] [7].. 2.2. Client-side Scripting. Running an application in the browser using a client-side scripting language such as JavaScript rather than on a remote server means that actions are handled faster which results in a more responsive application. The alternative to JavaScript would be creating the "rich Internet application" in a language such as Adobe Flash, Java or Microsoft Silverlight, which rely on a software framework being installed in the browser. JavaScript however is already supported in all modern browsers and only need to be enabled in the web browser to run scripts embedded in HTML documents. To help in creating JavaScript application there are a wide range of available free libraries and frameworks to choose from. One of the most popular JavaScript libraries for DOM-oriented client-side HTML scripting is jQuery. jQuery is a cross-browser JavaScript library that simplifies much of the scripting [3].. 2.2.1. WYSIWYG Rich HTML Editing. Several JavaScript implemented WYSIWYG rich-text editors exists, among these TinyMCE and CKEditor are two popular editors under the LGPL License. They both uses the contentEditable property to turn textareas into rich text editors, with some extra JavaScript methods for maintaining cross-browser compatibility [6]. The contentEditable is a DOM property that is finally being standardized by the W3C in the HTML5 specification. If an HTML element has the contentEditable attribute set to true, it and all underlying elements with the property set to the inherit state will be treated as editable. An editable host object will act similar to a rich text editor. When an editable host object has focus, a caret will.

(12) 2.2 Client-side Scripting. 5. be positioned in the element to specify the current editing position and it will also be possible to make selections inside the editable object, for all user editing actions see 7.5.1 User editing actions in the HTML5 W3C Working Draft [5]. Even though HTML5 is still a working draft almost all major browsers has for a long time offered a de facto support for rich text editing, which makes the entire DOM document editable. Usually any frame, iframe or window can be turned into a rich text editor, by setting the designMode or the contentEditable property to true. The contentEditable work similar to designMode with the difference that it only makes a HTML element editable instead of the whole document. The editable content can be modified by executing commands on the current document, current selection, or the given range using the browser implemented JavaScript method execCommand() [15][12]. Commands like "bold," "italic," "underline," "create a link," "change foreground color","undo", "redo" are well supported cross-browser, for a full list of commands see [1]. The lack of a specification on how editing should be implemented have resulted in varying support and differing behavior of the user editing actions in web browsers, for further reading about differences between browsers [10]..

(13)

(14) Chapter 3. Implementation 3.1. Features. After becoming accustomed with the existing author-publishing system, discussions about the wanted features of the application were held with my supervisor Tobias Åström. The following features were requested: • Editing the content online within the web browser • Generating the dynamic report as a HTML document • WYSIWYG text editing • WYSIWYG editing of the HTML DOM using JavaScript • Ability to add snapshots to text in HTML elements • Inserting the metatext from the Vislet into HTML by parsing the XML file (story) • Must support the web browser Internet Explorer The editor will use a predefined CSS layout in an external style sheet for the HTML document template, which is time-saving when editing and can easily be replaced with other CSS layouts. Changes to CSS layout on a page are made with inline styles, so there is no need to save a new external style sheet for each HTML document. JavaScript is used in the generated HTML document for navigation and for functions to load captures and chapters from Vislets. The Vislet uses the ExternalInterface class for JavaScript-ActionScript communication. The jQuery library is used for DOM manipulation, handling events, as well as loading and parsing of XML files with AJAX [3]. The jQuery UI library is used for styling interface components and for controlling Vislet positioning by manipulating the DOM [4]. The user needs to be able to control the layout of Vislets, and also the adding of snapshots and metatext in HTML instead of embedded in the Vislet. Permitting 7.

(15) 8. Implementation. the user to either show the metatext or add their own text and insert links to load the snapshots. A first step in the implementation was to manually create an example of how the generated dynamic report should look and this was then used as a reference for the DOM generataion. For saving drafts of reports locally inside the browser the HTML5 attribute localStorage is used. The localStorage attribute is a client-side key-value database, that is stored in the browser. To enable exporting dynamic reports as XHTML 1.0 Transitional PHP is used to create a downloadable ZIP archive and open the browser save dialog. The debugging were done in the browsers using Firebug (Firefox), Firebug Lite (Chrome) and Internet Explorer Developer Tools (IE). The browsers tested were limited to Internet Explorer 8 and later, Mozilla Firefox 3 and Google Chrome.. 3.2. Implementing Rich-text Editing. Figure 3.1. The page template loaded inside the editor. As previously mentioned WYSIWYG text editing is a feature that should be supported in the editor and such behavior could easily be enabled in the browser using the contentEditable property, see sections 2.2.1. To avoid using iframes a div element is instead used as a editable host object, a work area for showing the document preview. The contentEditable property is used instead of designMode, since no frames are used. The editor has a design similar to a word processor, i.e. Microsoft Word. When opening the editor the template document is loaded using the jQuery load() method and inserted in the work area using the append() method, see 3.1. The template can be reloaded by pressing the "New Page" button, doing so all unsaved work will be lost.. Figure 3.2. The text editing toolbar. A text editing toolbar was created using the jQuery UI interface widgets, see figure 3.2. Common editing commands are connected to a text editing toolbar.

(16) 3.3 Adding and Manipulating Vislets. 9. using jQuery event handlers. By triggering the event handlers in the text editing toolbar, the appropriate editing commands are executed using the execCommand() method, with the exception of "Add Link". The execCommand() method is used to manipulate editable HTML elements, see section 2.2.1. Instead of executing the "createLink" command, the "Add Link" button opens up the Add Link dialog, see figure 3.6. A link can be created from a text selection or is otherwise added to the bottom of the page. One example of the difference between how commands are executed between web browsers would be "insertparagraph", which in Mozilla adds a paragraph around the selected block, while the other browsers delete the selected block and insert an empty paragraph. So instead of this command the append() method is used in the editor for adding a new paragraph with the toolbar button "Add Text". Of course it is still also possible to add paragraphs using the Enter key. In Internet Explorer the backspace key is used as a hotkey for the browsing to the previous page when the focus is not in a text entry field. This may result in the browser leaving the editor if the text loses focus while the backspace is pressed and cause all work that is not saved to be lost. To try and prevent this and other involuntary exiting of the editor, the "onbeforeunload" event was added which opens a prompt dialog when leaving the page.. 3.3. Adding and Manipulating Vislets. The first step in adding Vislets was examining the HTML code generated by Statistics Publisher. The HTML snippet contain an embed element nested in an object element, as seen here: <object c l a s s i d=" c l s i d : D27CDB6E−AE6D−11 c f −96B8−444553540000 " id=" B o o k l e t " width=" 100\% " height=" 400 " codebase=" h t t p : / / fpdownload . macromedia . com / . . . "> <param name=" movie " value=" h t t p : / /www. ncomva . s e / . . . "></param> <param name=" q u a l i t y " value=" h i g h "></param> <param name=" a l l o w S c r i p t A c c e s s " value=" a l w a y s "></param> <embed src=" h t t p : / /www. ncomva . s e / f l a s h / e x p l o r e r / . . . " q u a l i t y=" h i g h " width=" 100\% " height=" 400 " name=" B o o k l e t " a l i g n=" m id dl e " p l a y=" t r u e " l o o p=" f a l s e " a l l o w S c r i p t A c c e s s=" a l w a y s " type=" a p p l i c a t i o n /x−shockwave−f l a s h " f l a s h V a r s=" components=(ChoroplethMap , . . . " p l u g i n s p a g e=" h t t p : / /www. adobe . com / . . . " bgcolor="\# f f f f f f "> </embed> <param name=" b g c o l o r " value="\# f f f f f f "></param> </ object>.

(17) 10. Implementation. The generated HTML snippet does not validate as either HTML 4.01 Transitional or XHTML 1.0 Transitional. The Embed element is a HTML element that has not been specified before HTML5. Using what have been called the "Flash Satay" method, the embed tag can be removed from the Vislet code and the Param element changed to a self-closing tag, making it valid XHTML 1.0 [11]. In the implementation the markup used for embedding the Flash looks like this: <object type=" a p p l i c a t i o n /x−shockwave−f l a s h " id=" B o o k l e t 1 " c l a s s=" V i s l e t " data=" h t t p : / /www. ncomva . s e / f l a s h / e x p l o r e r=\# f f f f f . . . . "> <param name=" movie " value=" h t t p : / /www. ncomva . s e / . . . . " /> <param name=" q u a l i t y " value=" h i g h " /> <param name=" a l l o w S c r i p t A c c e s s " value=" a l w a y s " /> <param name=" b g c o l o r " value="\# f f f f f f " /> <param name=" wmode " value=" opaque " /> </ object>. Notice the added "wmode" Param element with the value set to opaque, this solves the issue of the Flash movie always being on top regardless of the stacking order [2]. Using jQuery UI dialog widgets were created for importing and adding Vislets. The "Add Vislet" dialog is accessible from the Vislet toolbar, see figure 3.3. Inside the Add Vislet dialog is a list with all currently imported Vislets and two buttons; "Import" and "Remove", figure 3.4. Importing a Vislet is done in the Import Vislet dialog, figure 3.5. The code snippet generated by the Statistics Publisher is pasted in the dialog, using JavaScript the code is parsed and changed to XHTML 1.0 Transitional valid markup. An imported Vislets can be selected in Add Vislet dialog and can then be added to the page. When a Vislet is added to the page, its associated XML file (story) is parsed. Since AJAX cannot make cross domain calls a PHP proxy script was used to retrieve the story file from the NComVA server, before it being parsed with AJAX. The parsed metatext is appended to a div element created using the DOM createElement method. Before the metatext div can be added to the page however, snapshots need to replace each respective Flash function with its JavaScript counterpart for loading chapters and captures. All the snapshots in the parsed file are then also added to an array associated with the Vislet that are stored using the jQuery data() method. The data() method stores arbitrary data associated with the specified DOM element. When all this is done, the metatext is added to the page.. Figure 3.3. The vislet toolbar with all buttons enabled. From right to left: Add Vislet, Toggle Resizeable, Toggle Sortable, Toggle Metadata, Add Snapshot, Float Left, Float Right, Float None, Remove Vislet. To allow manipulation of Vislets the jQuery UI library was used, which handles interaction such as drag-and-drop, as well as resizing of DOM elements. When.

(18) 3.3 Adding and Manipulating Vislets. Figure 3.4. The Add Vislet dialog widget. Figure 3.5. The Vislet Import dialo widget. 11.

(19) 12. Implementation. added to the document the Vislets are first wrapped inside a div element with a small border around the Vislet. The wrapping div element uses the jQuery UI interaction methods sortable() and resizeable(), which allows for positioning and resizing using the mouse pointer. Further manipulation can be done using the Vislet Toolbar, see figure 3.3. In Firefox certain manipulation of the DOM structure of embedded Flash movies forces them to be reloaded. This causes the editor to become unresponsive while the Vislets are reloading after being moved or when using the navigation to browse between sections in the document. To solve this the Vislets are hidden and an image is instead shown in its place while editing. When exporting the document the image is replaced with the actual Vislet. Using a placeholder image significantly speeds up the responsiveness of the editor, also eliminating the usual wait time when the Vislet initially loads.. 3.4. Editing Vislets. To access the snapshots associated with a Vislet it needs to be selected, this is done by double-clicking. A selected Vislet is highlighted by changing the color of the wrapping div. Selecting a Vislet causes the Vislet specific buttons in the Vislet editing toolbar; Toggle Metatext, Add Snapshot, Float Left, Float Right, Float None, Remove Vislet; to be enabled. Before the Add Snapshot dialog is opened the stored snapshot list is inserted in the dialog. Selecting a snapshot in the list its name and URL is set in the respective text fields, see figure 3.6. In the snapshot dialog only the name input field is editable, though just like with other hyperlinks it is possible to create a snapshot with either a text selection or without one. When either a link or snapshot is added to the generated document it is wrapped inside a span element. The anchor element is set to editable. Using the jQuery delegate() method all the wrapping span elements have the "click" event listener added. When the span element is clicked on a toolbar is displayed under the link, see figure 3.7.. 3.5. Page navigation. The option to add page sections was implemented to permit splitting up the content with divs and thereby avoid the need to scroll long documents. Navigation between sections is handled by JavaScript methods, showing only one page section at a time. When sections are added to the generated document browsing links to those sections are also added at the bottom of the page. The browsing links calls JavaScript methods that handle the navigation, i.e. href="javascript:gotoPage(1)". The user can add page sections to a document by using "Add Page" option in the document toolbar, see figure 3.8..

(20) 3.5 Page navigation. 13. Figure 3.6. From the left to right: The Add link dialog widget and the Add snapshot dialog widget. Figure 3.7. The link toolbar; Open Link, Edit Link, Unlink Selection. Figure 3.8. The editor toolbar; New Page, Save As, Load, Add Page, Remove Page, Export HTML, About.

(21) 14. 3.6. Implementation. Web Storage. The HTML5 localStorage attribute is used for persistent storage on the client side, similar to HTTP session cookies [8]. Unlike cookies that are limited to about 4kb, the localStorage attribute is limited to a local storage area of about 5mb by default for each origin. Key-value pairs associated with the URL are stored in local storage area. All data are stored as strings and not in their original format. In most browsers if cookies are disabled so is localStorage, and clearing stored cookies also clears the local storage area. In order to save backups of drafts the HTML5 localStorage attribute is used. To store or load a page respectively the Save As or Load options that can be found in the document toolbar are used, see figure 3.8. In the "Save As" dialog widget, the current document can be saved when a title is set. The saved documents currently stored are shown in the dialog widget, making it possible to select and overwrite previously saved document drafts, see figure 3.9. By pressing the "Clear" button all data will be cleared from localStorage. Loading a page is done similarly to saving by opening the load dialog and selecting the page to be loaded, see figure 3.10. When saving a document draft, the snapshot data associated with the Vislets is also stored in localStorage(). The jQuery html() method is used to parse the entire DOM to be stored as a string. The html() method uses the DOM HTML innerHTML property and works well in most browsers even though XHTML markup is used, the exception being Internet Explorer which only returns the HTML DOM elements. To fix this a modified version of the jqxhtml() extension written by Alaa-eddine Kaddouri was used, it utilize regular expressions to make markup corrections to the string.. 3.7. Exporting Files. When the user is satisfied with the results, he can choose to export the document and will be able to download it as a ZIP file by using the "Export Page" option from the document toolbar, see figure 3.8. This is done by submitting the page to a PHP script that creates a ZIP archive containing all necessary files to view the page; the HTML document, JS scripts, images and style sheet..

(22) 3.7 Exporting Files. 15. Figure 3.9. The Save As dialog widget. Figure 3.10. The Load dialog widget.

(23)

(24) Chapter 4. Results 4.1. The Application. In this chapter the demo WYSIWYG page editor for generating HTML pages containing text and Vislets will be presented along with a dynamic report example created with the editor. The page editor allows editing HTML elements using a JavaScript interface and also permits editing text using the web browsers native rich-text editing implemented support, it is presented in figure 4.1. Adding text and positioning DOM elements are done directly in the workspace on the page preview, additional editing of the layout and adding of elements is done using a toolbar. The generated pages are exported as XHTML 1.0 Transitional, see figure 4.2. An example showing a Vislet published on a blog using the process shown in figure 2.1 with the same story as in figure 4.2 is presented in figure 4.3. Notice that the height of the textarea is fixed and that context is lost from the text being hidden because of overflow. The option to adjust the height of the textarea is not available in the Statistics Publisher, and increasing the height would cause the metatext to intrude on the space used by the other components. This motivates using the parsing of metatext and adding it to an external div, while maintaining working snapshots. When copying text and pasting it into the editor, the text first need to be stripped of formatting tags for markup to remain well-mannered, that is not requirng clean up scripts such as the HTML TIDY library. It is possible to access the clipboard in IE and strip all the formatting tags, however the clipboard is not accessible in Firefox and Chrome. The only safe choice is to manually strip out all of the markup, i.e. make it plain text, before pasting.. 4.1.1. Interaction. Using the web browsers native rich-text editing support give slightly different results between web browsers as mentioned in sections 2.2.1 and 3.2. For one thing, Google Chrome and Internet Explorer adds some fairly standard formatting 17.

(25) 18. Results. hotkeys for text selections in editable elements; bold(ctrl-b), italic (ctrl-i) and underline (ctrl-u). A persistent issue in Google Chrome is that it is not possible to parse the story file cross domain using the PHP proxy. The AJAX call does not return a response and no errors are thrown, debugging this bug was time-consuming. In the end the choice to only support Internet Explorer and Mozilla Firefox was made, since being able to parse the XML file is a key feature in the editor and the two most popular browsers are still supported..

(26) 4.1 The Application. Figure 4.1. Screenshot of the HTML editor. 19.

(27) 20. Results. Figure 4.2. An example of a exported dynamic report with snapshots outside of the embedded Flash..

(28) 4.1 The Application. 21. Figure 4.3. A Vislet published on a blog with metatext inside the embedded Flash.

(29)

(30) Chapter 5. Conclusion 5.1. Discussion. Examining the different frameworks used for client-side web applications it became apparent that HTML and JavaScript has become the preferred model for creating responsive, cross-platform, very interactive, desktop like applications. The choice of JavaScript library came down to jQuery or prototype, after comparing the two, jQuery became the chosen javascript library because of its ease of use and reliability. Using jQuery in the implementation resulted in the application being highly responsive. However, to be able to use the editor cookies and scripting need to be enabled in the web browser. Being able to use the snapshots in the generated documents also rely on scripting being enabled. Using the contentEditable property for the WYSIWYG rich-text editing made the application become very responsive. The implementing of this property however ended up becoming much trial-and-error, since the implementation differs between web browsers and not all the editing commands are supported in all of them. As can be seen by comparing figure 4.2 and 4.3 parsing the story and inserting the snapshots in HTML elements instead of having them embedded in the Flash adds to the readability of the metatext and improves navigation of the story. The time parsing the story becomes proportional to the length of the text.. 5.2. Future work. A future improvement of the adding of Vislets would be integrating the editor in the Statistics Publisher to make it possible to add Vislet code snippets without switching between applications and thereby simplify the publishing pipeline. Another improvement would be exporting the generated content as XML markup and use XSLT to transform it to the desired markup, ensuring well-formed markup. Most of the wanted features were implemented, however more work can be done on the HTML editing interface. Features such a color picker, image loader 23.

(31) 24. Conclusion. or CSS editor could be added. The parsing of the story file could be improved by finding an alternative to using a PHP proxy for the retrieval of the story file that would work in Google Chrome..

(32) Bibliography [1] Command Identifiers. Retrieved 2010-11-03 from http://msdn.microsoft. com/en-us/library/ms533049\%28v=vs.85\%29.aspx. [2] Flash movie ignores stacking order and plays on top of dhtml layers, 2010. Retrieved 2010-10-18 from http://kb2.adobe.com/cps/155/tn_15523.html. [3] jquery documentation, 2010. http://docs.jquery.com/Main_Page. [4] jquery ui - demos and documentation, 2010. http://jqueryui.com/demos/. [5] W3C Working Draft, 2010. Retrieved 2010-11-03 from http://www.w3.org/ TR/html5/editing.html#contenteditable. [6] Rich Text Editing in Mozilla, 2011. Retrieved 2010-09-29 from https:// developer.mozilla.org/en/rich-text_editing_in_mozilla. [7] Monica Brezzi and Mikael Jern. Narrating regions: New Storytelling technique helps increasing people’s analysis and information sharing, 2010. Retrieved 2010-09-15 from http://www.ncomva.se/presentationer/New_ Storytelling_technique_helps_increasing_peopleâĂŹs_analysis_ and_information_sharing.pdf. [8] Ian Hickson. Web Storage, 2010. Retrieved 2010-11-15 from http://dev. w3.org/html5/webstorage/. [9] Mikael Jern. Visual Statistics Storytelling, 2010. Retrieved 201009-15 from http://www.ncomva.com/wp-content/uploads/2010/09/ Visual-Statistics-Storytelling-in-Statistics-eXplorer-and-Publisher. pdf. [10] Olav Junker Kjaer. Rich HTML Editing in the browser, 2008. Retrieved 2010-09-29 from http://dev.opera.com/articles/view/ rich-html-editing-in-the-browser-part-1/. [11] Drew McLellan. Flash Satay: Embedding Flash While Supporting Standards, 2011. Retrieved 2010-09-17 from http://www.alistapart.com/articles/ flashsatay. 25.

(33) 26. Bibliography. [12] Microsoft. Contenteditable attribute. Retrieved 2010-09-29 from http:// msdn.microsoft.com/en-us/library/ms537837%28VS.85%29.aspx. [13] NComVA. GAV Flash, 2009. Retrieved (2011-03-22) from http://ncva.itn. liu.se/tools?l=en. [14] NComVA. Publisher - Methods and technology, 2010. [15] Mark Pilgrim. the Road to html 5 - Contenteditable, 2009. Retrieved 2010-09-29 from http://blog.whatwg.org/ the-road-to-html-5-contenteditable..

(34)

No results found