CS-2: 8 
Figure 9. Mobile layout example. 
When designing the new Gateway we made use of the two-third/one-third layout shown in 
Figure 8 above, specifically so this action would execute on smaller devices. 
Figure 10. Screenshot of the Gateway 
Figure 10 shows a screenshot of the Gateway 
with annotations showing the ⅔
-
⅓ d
esign and 
how the sidebar will be pushed below the main content in a mobile layout. 
Thanks to thorough testing both by the original developers of 960.gs, and our own testing of the 
modifications we made to the grid system, the desktop layout works consistently in all modern 
desktop browsers mentioned above, and Internet Explorer back to version 7. 
Pdf data extraction open source - extract form data from PDF in C#.net, ASP.NET, MVC, Ajax, WPF
Help to Read and Extract Field Data from PDF with a Convenient C# Solution
extract table data from pdf; extract data from pdf form
Pdf data extraction open source - VB.NET PDF Form Data Read library: extract form data from PDF in vb.net, ASP.NET, MVC, Ajax, WPF
Convenient VB.NET Solution to Read and Extract Field Data from PDF
java read pdf form fields; pdf data extractor
CS-2: 9 
With mobile browsers it is a slightly different story. The site looks great on the iPhone’s Safari 
browser (Figure 11) thanks to its solid standards support. The Android browser renders the site 
almost as well, the only disappointing feature is that Android insists on using Droid Sans as its 
sans-serif font rather than Helvetica or Arial. 
Figure 11. Gateway on iPhone. 
The next most popular mobile browser, Opera M
obile “just worked” too, thanks to its excellent 
support of standards. Support for Opera Mobile is a big win because it is the most commonly 
deployed browser on ‘dumb phones’.
Windows Phone 7 browser (at the time of writing the Mango update which introduces the IE9 
rendering engine to the phone has yet to be released) does not support media queries. We 
therefore had to use JavaScript to detect smaller screen sizes and a class of “mobile” to the 
HTML tag which would then re-trigger the media queries and un-float the grid. 
Blackberry 5 and 6 browsers have varying degrees of success, however thanks to the well 
thought-out semantic mark-up, both browsers render a basic but usable site. We have also 
been able to test on a number of other devices such as newer Nokia phones and a Samsung 
Taco. As with the Blackberry browsers, these render a very basic usable site. 
Semantic, Accessible Markup 
The CWD makes heavy use of the new semantic tags. The tag layout describes the semantic 
structure
32
of the site and this benefits users with less capable mobile browsers who will receive 
a logical usable layout. 
For users relying on accessibility tools such as screen-
readers, we’ve made heavy use of 
Accessible Rich Internet Application (ARIA) role attributes which further describe, in a 
standardised way
33
, the building block of the page to help the tools appropriately contextualise 
the content. For example, the above top-level tag structure looks like this when you include the 
role attributes: 
32
WAVE accessibility findings for Gateway, 
http://wave.webaim.org/report?view=textonly&url=http%3A%2F%2Fgateway.lncn.eu 
33
Accessible Rich Internet Applications (WAI-ARIA) 1.0:  W3C Candidate Recommendation 18 
January 2011, http://www.w3.org/TR/wai-aria/ 
C# PDF Text Extract Library: extract text content from PDF file in
using RasterEdge.XDoc.PDF; Please have a quick test by using the following C# example code for text extraction from PDF page. // Open a document.
pdf form field recognition; extract data from pdf file
VB.NET PDF Page Extract Library: copy, paste, cut PDF pages in vb.
Except provides PDF page extraction method in VB.NET, this page also gives VB This VB.NET code below can help you extract all images from PDF. ' Open a document
how to save a pdf form in reader; pdf form data extraction
CS-2: 10 
Personalisation and Messages 
The CWD is one of three tools in our internal development toolbox alongside our Nucleus 
datastore APIs
34
and our Oauth-based
35
based single-sign-on (SSO) platform. 
Users can sign in to Gateway which then personalises the main screen, for example displaying 
their library fine balance, and their print credit balance. In the future we will display other 
personalised content as we connect more university services to Nucleus. 
Additionally once a user is signed into the SSO platform the CWD itself becomes personalised 
across all sites that use CWD3: 
Visually, this helps users see that they are signed in, but this personalisation is part of a long-
term strategy to develop a communications framework that will allow users to be informed cross 
platform (e.g. email, Facebook, Twitter), cross-device (e.g., mobile, desktop), and cross-site 
(any site using CWD3). 
Part of the new Gateway’s remit is to act as an emergency broadcast system and we developed 
a system dubbed ‘Bullhorn’ which displays a large warning message on Gateway when 
activated. However, Bullhorn also has an API to which we intend to connect CWD3; this will 
mean all CWD3-based sites can display emergency information when required. 
Both the Bullhorn messaging system and the CWD personalisation platform currently use 
JSON-P calls. However, we have also been investigating the use of Web sockets
36
in order to 
be able to push messages out immediately to the more capable browsers. 
Server Enhanced Geolocation 
Our Server Enhanced Geolocation (SEG) platform enhances the HTML5 geo-location
37
APIs by 
attempting to determine users’ location based on their IP address first. Consequently we spent 
considerable time with our network team establishing all of the internal IP ranges for each 
building, campus and wireless network of the University of Lincoln. 
When the SEG is called, the user’s IP address is captured and if we can match it against one of 
our internal IP ranges then we can immediately establish where the user is, and thanks to our 
Nucleus Locations datastore, we retain latitude and longitude co-ordinates for every building. If 
the user’s IP 
fails to match one of our ranges, then we still try to approximate their location 
using Maxmind’s IP to location databases,
38
which gives us an approximate latitude and 
longitude. Then if their browser supports it, we can narrow their location down further using the 
HTML5 geo-
location APIs. When we have the users’ location, we can then work out their 
nearest library and campus (if they are not already on campus) which means that we can then 
create ‘campus
-
aware’ 
Web sites. 
In terms of Gateway, our plan is to push out campus-specific Bullhorn messages (where 
appropriate). 
Another advantage SEG confers is slightly more detailed site analytics because we can 
determine the University site on or close to which users are located. As a result, we can ensure 
that the information they receive is as relevant as possible to their current position. 
5.  Challenges 
The biggest challenges, as with any major site, are testing across lots of different browsers and 
- as it is a mobile-accessible site too - devices. 
Fortunately, testing desktop browsers has become increasingly painless as Webkit and Gecko 
teams are working hard on implementing the new HTML5 standards in a consistent way. 
34
University of Lincoln Open Data,
http://data.lincoln.ac.uk/ 
35
OAuth 2.0,
http://oauth.org/2 
36
WebSocket.org -- A WebSocket Community,
http://websocket.org/ 
37
W3C : Geolocation API Specification: Editor's Draft 10 February 2010, 
http://dev.w3.org/geo/api/spec-source.html 
38
Geolocation and Online Fraud Prevention from MaxMind, http://www.maxmind.com/  
VB.NET PDF Text Extract Library: extract text content from PDF
'Please have a quick test by using the following example code for text extraction from PDF file in VB.NET program. ' Open a document.
extracting data from pdf forms to excel; extracting data from pdf into excel
VB.NET PDF Image Extract Library: Select, copy, paste PDF images
below. DLLs for PDF Image Extraction in VB.NET. Document. Sample for extracting all images from PDF in VB.NET program. ' Open a document.
edit pdf form in reader; exporting pdf form to excel
CS-2: 11 
Therefore we feel that we are close to the point where we can truly code once and it will work 
anywhere.  
When we designed the CWD3 we decided to end support for Internet Explorer (IE) 6 
compatibility, because IE6 represents less than 0.1% of browsers visiting *.lincoln.ac.uk sites (in 
October 2011); the purpose of this design decision was to give us more time to devote to the 
test and debugging of the more frequently used versions of Internet Explorer. 
A further decision was made only to support the most recent versions of the alternative 
browsers (Chrome, Firefox, Opera and Safari) because in our experience (based on our 
analytics), users of these browsers demonstrate a greater tendency to keep their browsers 
regularly updated. 
6.  Lessons Learnt 
There is a wealth of guidelines, best practice, and tutorials available on the Web about HTML, 
JavaScript and CSS technologies, however there are a number of sites that really stand out in 
terms of the quality of advice they offer, including the Mozilla Developer Network
39
and HTML5 
Doctor
40
. These sites proved invaluable during development, offering useful pointers and ways 
to overcome browser inconsistencies. 
We also discovered a number of third-party frameworks and libraries that have eased the pain 
of development such as Modernizr
41
, Respond.js
42
. The HTML5 Boilerplate
43
Project was useful 
as well to demonstrate current best practice across a number of different technologies. The 
advantages of using these frameworks and libraries are that they have been well tested and 
researched by hundreds, and in some cases, thousands of people. 
Most of us are now using Mac computers which makes testing on Internet Explorer difficult. We 
tried using a number of different solutions for testing IE including using emulators under Wine
44
which proved unreliable and buggy and IE Tester
45
which works but does not always represent 
true rendering. In the end we set up virtual machines for Windows XP, Vista and 7 each with 
snapshots of the individual versions of IE available to it (i.e. for XP IE 6, 7 and 8, Vista IE 7, 8 
and 9, and 7 IE 8, 9 and 10). It was a long process to get them set up but it does mean we can 
easily test combinations of OS and browser.  
7.  Conclusions 
As an integral part of our toolkit, the Common Web Design has allowed us to develop beautiful, 
mobile-ready, University of Lincoln-branded interfaces to our rapid innovation projects in a short 
space of time. 
Every element of the framework, from the mobile-ready grid system, the interactive user 
interface widgets, to the clean typography has been thoroughly tested across a multitude of 
browsers and devices, thereby giving us confidence in its use. Such rigorous testing means we 
can concentrate on creating great user experiences, instead of wondering if some great new 
design will actually work in Internet Explorer.  
From the organisation’s standpoint, the benefits are clear: anyone can easily create a branded 
Web site, application or blog. The framework’s testing has reduced the number of problems 
reported to the ICT Support Desk from users experiencing problems in specific browsers. We 
are also encouraging the use of semantic accessible mark-up which has benefits in terms of 
search engine optimisation (SEO) and accessibility. 
39
Mozilla Developer Network,
https://developer.mozilla.org/ 
40
HTML5 Doctor,
http://html5doctor.com/ 
41
Modernizr, http://modernizr.com/ 
42
scottjehl / Respond 
GitHub, https://github.com/scottjehl/Respond 
43
HTML5 Boilerplate, http://www.html5boilerplate.com/ 
44
WineHQ, http://winehq.com/ 
45
My DebugBar:  IETester / Browser Compatibility Check for Internet Explorer Versions from 
5.5 to 10  http://www.my-debugbar.com/wiki/IETester/HomePage 
C# PDF Image Extract Library: Select, copy, paste PDF images in C#
C# Project: DLLs for PDF Image Extraction. In Document. C# programming sample for extracting all images from PDF. // Open a document.
how to save filled out pdf form in reader; extract pdf data into excel
C# PDF File Merge Library: Merge, append PDF files in C#.net, ASP.
Merge Microsoft Office Word, Excel and PowerPoint data to PDF form. PDF document splitting, PDF page reordering and PDF page image and text extraction.
make pdf form editable in reader; exporting pdf data to excel
HTML5 Case Study 3:
Re
-
Implementation of the Maavis 
Assistive Technology Using HTML5
Document details 
Author : 
Steve Lee 
Date: 
21 May 2012 
Version: 
V1.0 
Rights 
Copyright 2011 OpenDirective. This work has been published under a 
Creative Commons attribution-sharealike 2.0 licence.  
About 
This case study is one of a series of HTML5 case studies funded by the JISC 
which provide examples of development work in use of HTML5 to support a 
range of scholarly activities. 
Acknowledgements 
UKOLN is funded by the Joint Information Systems Committee (JISC) of the Higher and Further 
Education Funding Councils, as well as by project funding from the JISC and the European 
Union. UKOLN also receives support from the University of Bath where it is based. 
C# PDF Page Extract Library: copy, paste, cut PDF pages in C#.net
document processing SDK supports PDF page extraction, copying and The portable document format, known as PDF document, is file that allows users to open & read
extracting data from pdf files; collect data from pdf forms
C# PDF Password Library: add, remove, edit PDF file password in C#
PDFDocument doc = PDFDocument.Open(intputFilePath, userPassword); // Define IsFillForm = true; // Content extraction is allowed true; // Add password to PDF file
pdf data extraction to excel; save pdf forms in reader
Contents 
1
About This Case Study 
1
Target Audience 
What Is Covered 
What Is Not Covered 
2
Use Case 
3
3
Solution 
4
Widgets 
Audio and Video Players 
Text to Speech 
Local and Session Storage 
4
Impact 
6
5
Challenges 
7
Browser Support for HTML5 
Security Issue with Cross-domain Access 
User Control of Web Page Display 
Support for Accessibility Switch Users 
Keyboard Access Issues 
Embedded Text-to-speech Support 
6
Lessons Learnt 
9
7
Conclusions 
9
C# PDF - Extract Text from Scanned PDF Using OCR SDK
Field Data. Data: Auto Fill-in Field Data. Field: Insert Recognize scanned PDF document and output OCR result to class source code for ocr text extraction in .NET
how to fill out pdf forms in reader; cannot save pdf form in reader
C# TIFF: Use C#.NET Code to Extract Text from TIFF File
SDKs, C# users can easily add and perform text extraction functionality into Certainly, you may also render it to a PDF, Word or SVG Set the training data path
how to make a pdf form fillable in reader; extract pdf form data to excel
CS3: 1 
1.  About This Case Study 
Target Audience 
The target audience of this case study is those interested in applications that provide alternative 
or innovative user experiences using HTML5 Web applications. The focus is on assistive 
technology which is designed to enable wider access to media, apps and other online 
technology. This access may be for users who have varying access requirements, such as older 
users or those with physical or cognitive impairment. Alternatively it may be for use in 
environments that require alternative interaction styles, for example in bright light or with 
restricted access to a mobile device.  
This case study also provides an insight into the development of applications that can run on a 
wide range of devices, without the need to cater for a variety of platforms. It also covers the 
benefits of applications that are composed of reusable user interface (UI) components in the 
form of W3C Widgets. Such widgets allow rapid development and innovation through 
recombination in different configurations. 
What Is Covered 
This case study considers how to create an HTML5 app version of an existing assistive 
technology program called Maavis 
http://maavis.fullmeasure.co.uk  Maavis was designed by 
Peter Cudd at the University of Sheffield School of Health and Related Research (ScHARR)
46
which works on enabling people with dementia to engage with ICT. This has since been 
extended to support other users including older learners with mental health problems and 
children with multiple disabilities.  
This original Maavis application can only be installed and run on machines with Windows, thus 
limiting its use. Creating a new version using HTML5 and Widgets allows Maavis to run on the 
many platforms that have a Web browser. This includes mobile and tablet devices that are 
becoming increasingly popular with users since they greatly increase the number of locations 
and situations in which Maavis can be employed. In addition, HTML5 skills are widely available 
which broadens the potential developer bass by lowering the technical entry requirements. Thus 
it will reach more users and attract more developers, both of whom are required if open 
innovation in software through open development methods is to succeed. Indeed, there is a 
great need for such open innovation in the accessibility field in order to provide useful solutions 
for users’ individual requ
irements. 
Figure 1. Screens displayed to users of the original Maavis system.  
46
University of Sheffield School of Health and Related Research (ScHARR), 
http://www.sheffield.ac.uk/scharr 
CS3: 2 
HTML5 and other open Web standards such as widgets provide an eco-system that develops 
rapidly, is adopted widely and supports contributions to the specification. For example, the 
addition of open video playing and formats has removed several important barriers to media 
access, including proprietary lock-in to specific tools that only work on some platforms. One 
instance of such lock-in is Windows Media which cannot be played on non-Windows platforms 
without an extra (free) component installed (assuming a player is available for the platform).  
Building the application to comprise several widgets provides reusable UI components which 
can then be deployed individually or in combination with other applications. Widgets also 
provide methods of sharing and reusing components, and so encourage good practice through 
example. Moreover, accessibility is 'baked in', thereby ensuring it is more widely available.  
The approach taken was to prototype key elements of the original desktop Maavis application 
which provides simple access to media and communications. These prototyped elements have 
been decomposed into potentially useful widgets and hard-coded into a simulated version of 
Maavis with specific screens. This shows that a HTML5 version of Maavis is feasible and clearly 
demonstrates how it may be used to create innovative applications. 
Figure 2. HTML5 Maavis versions of the four screens depicted in Figure 1. 
In particular, the HTML5 audio and video elements are used with custom HTML 'controls' 
designed to be part of a standard interaction scheme that provides user selection of various 
activities or resources. The local storage facilities of HTML5 are also investigated as a means of 
saving both state and settings. 
Note that the original Maavis application was developed in Mozilla XUL (XML User Interface 
Language)
47
which is very similar to HTML, Javascript and CSS, but supports full platform 
access. XUL was chosen for initial development since, although a Web solution was favoured, 
requirements such as off-line use, and the state of HTML technology meant it could not be 
used. Since Maavis was developed, touch-screen and mobile-Web technologies have 
significantly matured, while many of the problems originally solved in Maavis now have other 
implementations, such as using HTML5 storage and responsive layouts. 
What Is Not Covered 
This case study does not explore general accessibility of HTML apps or how to use HTML5 
features to improve it. Web accessibility is well understood (although not always well 
implemented) and HTML5 adds several new facilities that aid and enhance general 
accessibility. It is naturally planned that a HTML Maavis will include accessibility best practice 
as described by the Rave in Context widget project's WidgetAccessibilityBestPractices in order 
to ensure maximum utility for as many people as possible. Note that Rave in Context has also 
defined a widget template system that has now moved into the Apache Wookie (Incubating) 
Project. 
47
Mozilla XML User Interface Language (XUL), https://wiki.mozilla.org/XUL:Home_Page 
CS3: 3 
Also excluded is coverage of any issues that arise in creating HTML applications that are usable 
and accessible on a wide range of devices and platforms. For example some platforms have 
gaps in the full accessibility stack support. This is a key topic for further phases of work and 
OpenDirective are actively supporting the open development of widely accessible cross platform 
HTML apps and widgets, e.g Apache Wookie (Incubating), Apache Rave (Incubating) and Rave 
in Context. 
No attempt was made to reproduce several original Maavis features. For example, running local 
applications, including Skype integration for video calls, is not possible as browser security 
forbids running programs (unless you want to risk using ActiveX in IE on Windows only). The 
integrated scanning for use with accessibility switch control is also excluded. These features 
require facilities not currently available in the sandboxed browser environment in which HTML 
apps run. It is interesting to note that Mozilla is exploring joystick support which will allow 
alternative device input such as switches. 
2.  Use Case 
Providing simplified access to media and information offers far greater ease of access to people 
with cognitive or physical impairments. Such support is also greatly valued when users need to 
access technology under difficult conditions such as a poorly lit environment, or when operating 
a device with limited methods of interaction.  
The academic use case is to facilitate access to online course and/or research materials by 
more people, in a wider variety of situations and in novel ways. If, for example, virtual learning 
environments (VLEs) adopted this approach, then students with various impairments will have 
an enriched learning experience through being able to access content in ways appropriate to 
their specific preferences and requirements. 
An HTML application (or Web app) that provides simplified access will be available to users on 
more platforms, including tablets and smartphones, as long as a suitable browser exists. 
Development and maintenance will be simplified as a single platform is targeted (at least in 
theory). However HTML runs in a restricted browser environment, which for security reasons 
has limited access to the host platform facilities. Thus there are questions about whether such a 
tool can be created with all the functionality that requires local access. However, on the other 
hand it is evident that more content, media and interaction now happens online or in the cloud, 
which means that using an HTML5 tool to mediate access looks increasingly feasible, even 
beneficial.  
Maavis provides access features through a simple touch, pointer or accessibility switch access 
interface using groups of buttons and media 'players' arranged into screens. Viewers are 
provided to access music, video, photos and Web information (Web sites). Maavis is designed 
for use by people with cognitive or physical impairments, which includes older users. In fact, 
Maavis was originally designed for people with dementia in a managed care environment. Thus 
simplicity of interaction is of paramount importance. Subsequent development phases added 
features for adults with learning difficulties and children with physical impairments, both in 
educational settings.  
A key feature of Maavis which makes it interesting here is that a facilitator can easily collect 
related media and provide them for access by the end-users. This makes it a suitable tool for 
providing access to a cohesive collection of content. For example, Maavis has been used to 
provide interactive Tai Chi lessons. 
By re-implementing Maavis in HTML5 we will make it available to a wider audience. For 
example, an elderly woman with limited typing ability due to arthritis of the hands wishes to stay 
in communication with her family. She is very resistant to using a generic desktop or laptop 
computer, but is happy with touch-enabled tablet devices. 
CS3: 4 
3.  Solution 
We have developed a prototype
48
that implements key features of the original XUL Maavis in 
HTML5 and also uses W3C widgets. The current Maavis product was analysed for 
decomposition into suitable widgets and a simple, functional, but hard-wired HTML5 prototype 
was created to demonstrate how this might be implemented. This was not intended to be a full 
replacement, but rather a code 'spike' to explore the issues. The protoype may be found at 
http://maavis.opendirective.net. 
This prototype then generated discussion and ideas on further development within the Maavis 
project team. Such discussions can be found on the mailing list archives which are accessible 
via the Maavis Web site.
49
Key functional areas of Maavis performance were targeted and provided with an HTML5 
implementation, which proved they could be made to work. Those functional areas were: 
Screens of buttons containing text and images and arranged in grids 
Screens with only buttons that provide navigation and selection 
'Player' screens containing a viewer (or audio player) plus control button sets, 
specifically for audio, videos, still image slideshows and information (browser). 
A simple speech screen that speaks words when buttons are pressed  
A text-to-speech processor to read aloud screen titles and other information when 
requested 
Keyboard access (tab and enter keys to move around and activate screen options) 
Widgets 
According to the W3C Widget specification
50
 
Widgets are full-fledged client-side applications that are authored using Web standards 
such as [HTML] and packaged for distribution. They are typically downloaded and 
installed on a client machine or device where they run as stand-alone applications, but 
they can also be embedded into Web pages and run in a Web browser. Examples range 
from simple clocks, stock tickers, news casters, games and weather forecasters, to 
complex applications that pull data from multiple sources to be "mashed-up" and 
presented to a user in some interesting and useful way 
For distribution, the Web contents of a widget are bundled up into an archive (actually a ZIP 
archive). When a widget is required, a request is made of a widget server such as Apache 
Wookie (incubating), The server extracts the files and makes them available to the browser 
which then displays them to the user. 
In addition to running in a browser or as a stand-alone application, Widgets can also be used to 
provide reusable UI 'components' to be shared between applications. This idea is explored in 
the prototype by choosing a wide range of widget decompositions. 
At the time of writing, the widgets used in the prototype are not packaged, but exist as discrete 
files included in iframes that represent the widgets. This approach allows rapid development by 
avoiding widget packaging and serving. However, as a result, it is also deprived of some of the 
advantages of widgets and fails to demonstrate their utility to the full. It is expected that further 
development based on this protoype will soon create useful widgets which will be made 
available as open source components, perhaps as part of the Wookie Project. 
The following images demonstrate some of the widgets selected in the design. 
48
HTML5 Maavis, prototype 
http://opendirective.net/maavis/html/
49
Maavis, http://maavis.fullmeasure.co.uk/ 
50
Widget Packaging and XML Configuration, W3C Recommendation, September 27, 2011. 
http://www.w3.org/TR/widgets/ 
Documents you may be interested
Documents you may be interested