c# pdfsharp fill pdf form : How to make pdf editable form reader software SDK project winforms wpf windows UWP HTML5-Case-Studies-full2-part1074

HTML5 Case Study 2:
CWD: The Common Web Design
Document details 
Author : 
Sam Adams 
Date: 
21 May 2012 
Version: 
V1.0 
Rights 
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. 
How to make pdf editable form reader - 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
extracting data from pdf into excel; how to make pdf editable form reader
How to make pdf editable form reader - 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
pdf data extraction; extract pdf form data to excel
Contents
1.
About This Case Study 
1
Target Audience 
1
What Is Covered 
1
2.
History of the Common Web Design 
1
3.
Use Case 
5
4.
Solution 
6
Media Queries 
6
Semantic, Accessible Markup 
9
Personalisation and Messages 
10
Server Enhanced Geolocation 
10
5.
Challenges 
10
6.
Lessons Learnt 
11
7.
Conclusions 
11
C# PDF Convert to Text SDK: Convert PDF to txt files in C#.net
to convert target PDF document to other editable file formats should be noted here is that our PDF to text Thus, please make sure you have installed VS 2005 or
pdf form field recognition; extracting data from pdf forms to excel
VB.NET Image: Add Callout Annotation on Document and Image in VB.
document and image formats, such as PDF, Word, TIFF mainly contains two parts-that are editable text area guide that tells you how to make callout annotation
exporting pdf form to excel; extract data from pdf forms
CS-2: 1 
1.  About This Case Study 
The Common Web Design (CWD) is the new presentation for the University of Lincoln's online 
services. Developed with HTML5 and CSS3 technologies, the University of Lincoln’s Common 
Web Design enables rapid development of attractive, interactive and modern Web sites. Served 
from a content delivery network and optimised with speed, accessibility and progressive 
enhancement in mind, the Common Web Design also includes libraries for working with 
authentication, geo-location, and mobile content. 
This case study looks at how the Common Web Design came into being, design decisions, the 
underlying technological architecture and how it plays a fundamental part in our Web design 
toolkit, allowing us to develop rapidly effective and powerful Web sites and applications. 
The Common Web Design (CWD) can be found at http://cwd.online.lincoln.ac.uk/ 
Target Audience 
The intended audience of this case study are Web site managers and developers working at 
Higher Education institutions who wish to explore some of the new features that HTML5 and its 
associated technologies offers. It will also interest practitioners looking for work-arounds for 
some of the situations they may encounter when working with the new technology. 
What Is Covered 
This case study addresses the following areas: 
History of the Common Web Design 
Use of HTML5 (and other modern technologies) in CWD3 
Implementation of the CWD for http://gateway.lincoln.ac.uk 
Challenges 
What we learnt 
2.  History of the Common Web Design 
In January 2010, the author 
joined the University of Lincoln’s Online Services
Team (OST) in 
the IT Services Department (IT). One of the first project activities was Posters at Lincoln
18
, a 
repository and showcas for posters displayed around the University. This project, along with 
others, came out of a student focus group about improving student communications run by 
Marketing and IT. 
At the time the author was also carrying out freelance work for the Careers and Employability
19
department and provided speculative design for a new corporate home page. This provided an 
awareness 
of the University’s branding guidelines 
which led to work on a more modern design 
than the one used by the IT services department at the time. 
18
Posters at Lincoln, http://posters.lincoln.ac.uk/ 
19
University of Lincoln Careers & Employability, http://www.ulcareers.co.uk/ 
VB.NET PDF Convert to Text SDK: Convert PDF to txt files in vb.net
VB.NET control for batch converting PDF to editable & searchable users will be able to convert a PDF file or Before you get started, please make sure that you
extract pdf form data to excel; export pdf form data to excel
VB.NET Create PDF Library SDK to convert PDF from other file
Create and save editable PDF with a blank page, bookmarks, links Creating a PDF document is a good way to share your ideas because you can make sure that
how to make pdf editable form reader; extract data from pdf
CS-2: 2 
Figure 1. Original, unfinished speculative design for a new corporate Web site. 
Posters at Lincoln was the first of a number of Web sites due to be developed at the time by 
OST and we recognised that this was an opportunity to create a new presentation for our Web 
sites and services. Out of the speculative design we had worked on for the corporate site, we 
created the Common Web Design (CWD). This was 
dubbed version “2.0” because there had 
been a sort of common design before however it was a hack, and was only similar in terms of its 
colour scheme and placement of t
he University’s logo.
Figure 2. Posters at Lincoln was the first site to use the new Common Web Design 
Over the course of 2010, this design was refined, introducing more features of the modern Web 
such as CSS3 and geo-location, and we worked hard on making the design render as elegantly 
as possible on Internet Explorer and even forayed into responsive design with a basic mobile 
layout for small-screen devices. 
VB.NET Excel: How to Covert Excel Doc to PDF in VB.NET Application
document is not editable and the Excel document is editable. So when using Excel or PDF document on your for VB.NET programming, you need to make sure whether
saving pdf forms in acrobat reader; cannot save pdf form in reader
Process Multipage TIFF Images in Web Image Viewer| Online
Export multi-page TIFF image to a PDF; More image viewing & multipage TIFF files in Web Document Viewer, make sure that Load, Save an Editable Multi-page TIFF.
exporting data from pdf to excel; sign pdf form reader
CS-2: 3 
Figure 3. Print From My PC
20
was another early site to use the new Common Web Design. 
Figure 4. First attempt at automatic responsive web design using CSS3 media queries. 
Over the course of 2011, the CWD 2 design was rolled out to about 25 Web sites and services. 
A WordPress theme
21
was developed which became the new default theme and is today used 
by hundreds of blogs on our network. 
20
Printing at Lincoln, http://print.lincoln.ac.uk/ 
21
Wordpress Codex: Using Themes, http://codex.wordpress.org/Using_Themes 
VB.NET TIFF: Convert TIFF to HTML Web Page Using VB.NET TIFF
information of TIFF file in a more editable file format This online article aims to make a detailed instruction on to HTML converters, like VB.NET PDF to HTML
pdf form data extraction; java read pdf form fields
VB.NET Image: Barcode Generator to Add UPC-A to Image, TIFF, PDF &
REFile.SaveDocumentFile(doc, "c:/upc-a.pdf", New PDFEncoder()). Word document is the most editable format for us. image and document, but also we can make a UPC
extract data from pdf to excel; extracting data from pdf to excel
CS-2: 4 
Figure 5. The CWD-based default WordPress theme, used here on http://alexbilbie.com/ 
We also rolled out three major updates to CWD2, v2.1 “Balblair” which contained many bug 
fixes for Internet Explorer, v2.2 “Caperdonich” which introduced some CSS3 drop shadows, 
gradients and b
order images and finally v2.3 “Dallas Dhu”
22
which had a responsive design and 
introduced geo-location look-up and enhancements for newer browsers.  
Our work on the JISC-funded Total ReCal Project
23
led to an exploration of alternative designs; 
one of the frustrating aspects of the CWD2 layout was that the content was contained in a box 
and it proved difficult to develop an elegant Web application in such a small space. Significant 
time was spent with alternative design which 
was inspired by the BBC’s new G
EL framework
24
. 
In early 2011, CWD v3.0 “Fettercairn”
25
was deployed which featured a brand-new responsive 
design, comprised HTML5 at the core, exploited new features of CSS3, worked in all modern 
browsers and was supported back to Internet Explorer 7. It had a flexible grid system that was 
not contained in a box, so the number of potential designs we could develop significantly 
increased, and had some impressive CSS helper classes to achieve beautiful, flexible and clean 
designs. Finally the accessibility of the framework was enhanced using WAI-ARIA attributes on 
the HTML mark-up while also developing guidelines for writing for, and designing, Web sites. 
22
The Common Web Design: Version 2.3 Dallas Dhu, http://cwd.online.lincoln.ac.uk/2.3/ 
23
Total ReCal, http://blog.totalrecal.org/ 
24
BBC - GEL (Global Experience Language,) http://bbc.co.uk/gel 
25
The Common Web Design: Version 3.0 Edradour, http://cwd.online.lincoln.ac.uk/3.0/ 
CS-2: 5 
Figure 6. The Common Web Design v3.0 “Fettercairn”.
Since the release of v.3.0 “Fettercairn” in <month> 2011, Lincoln’s OST has moved CWD3 to 
Rackspace Cloud Files
26
content delivery network (CDN) which uses the Akamai network. The 
CSS, JavaScript (JS) and images are served from a lightning-fast service with edge nodes 
across the world which makes an appreciable difference to the performance on mobile 
networks. It also adds very welcome redundancy to the framework because the CDN is 
distributed around the world instead of being hosted on a server internally. 
Looking to the future, we will work on improving the accessibility with roaming display 
preferences. We will also connect sites to our future messaging framework (similar to Facebook 
notifications but across all CWD3-based sites). 
One important aspect of the approach adopted with the CWD was that it was not designed for 
the lowest common denominator (i.e. IE7, our corporate browser). Instead, we tried to push the 
modern browsers into showing off their new features, while ensuring that the design and 
features gracefully degraded when they failed to do so. Although none of the developers are 
trained designed, the CWD has enabled us to develop Web sites and applications rapidly, while 
ensuring they have consistent branding, a clean design, and browser compatibility and 
accessibility ‘baked in’.
3.  Use Case 
Gateway
27
is University of Lincoln
ICT Service’s online portal to the numerous services we offer. 
The site regularly receives over 250,000 visitors a month, making it one of the our most 
accessed Web sites next to the corporate Web site
28
and our Blackboard installation
29
. 
26
Cloud Files, Cloud Storage: Rackspace Cloud, http://www.rackspace.co.uk/cloud-
hosting/cloud-products/cloud-files/ 
27
Gateway: University of Lincoln, http://gateway.lncn.eu/ 
28
University of Lincoln home page http://www.lincoln.ac.uk/ 
29
Blackboard Learn, http://blackboard.lincoln.ac.uk/ 
CS-2: 6 
Over the summer of 2011 we redeveloped Gateway from the ground up, making use of the 
CWD3, hooking it up to our single-sign-on (SSO) platform and integrating a number of our other 
services to develop a new site that was personalised, informative and modern. 
There were a number of requirements for this new site: 
●
It had to work consistently across all the major desktop browsers including Internet 
Explorer going back to version 7 (which is currently our corporate browser). 
●
It had to be usable on a wide variety of mobile devices, not just smart phones, for 
example. 
●
The site should be personalised to the user 
●
It should display more ‘useful’ information than the current site
A decision was also made to host this new site externally, using Rackspace Cloud Servers, 
which offers:  
redundancy against outage in our internal server farms;  
a very flexible platform upon which to build; and,  
in the event of emergency on campus, Gateway can still broadcast messages. 
4.  Solution 
When we developed the new Gateway site we made use of the CWD. The framework had a 
number of features that benefited us when implementing a site that needed to work cross-
platform, cross browser and be accessible to all. 
Media Queries 
During its development, CWD3 was designed to work on both desktop and mobile devices. This 
was achieved by using “reponsive Web design” principles, which include making use of CSS 
media queries and carefully constructing designing layouts so that block elements are 
appropriately positioned when the 
devices’ screen size is adjusted.
At the core of CWD3 is a CSS grid system based on the 960gs framework. The grid allows for 
12 columns of 62px width with a 20px gutter between each column. This grid
30
is an open 
source component so that others can make use of it. 
30
grid.css at master from alexbilbie/Base-CSS-grid 
–
GitHub, 
https://github.com/alexbilbie/Base-CSS-grid/blob/master/grid.css 
CS-2: 7 
Figure 7. The CWD3 grid system. 
Using media queries
31
(specifically crafted for mobile and table layouts) the grid is un-floated 
and columns take an equal width. With careful layout planning this means that if you have your 
main content in a column on the left and your sidebar in a smaller column on the right (see 
Figure 8), when the media queries are activated the content column (which is more important 
than the sidebar) will lie above the sidebar (see Figure 9).
Figure 8. Desktop layout example. 
31
grid.css media query unfloater 
–
Gist, https://gist.github.com/027664f20b09df0fc01a 
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. 
Documents you may be interested
Documents you may be interested