asp.net pdf viewer component : Can't see pdf thumbnails Library control class asp.net web page windows ajax HTML5%20-%20Responsive%20Web%20Development1-part1254

11 
taken from the project to demonstrate the clear structures of the web pages, using the semantic 
element <nav> with the respective styling scripts.
Table 1. HTML5 semantic elements <nav> 
Source mark-up  
<!DOCTYPE html> 
<head> 
... 
... 
<link rel="stylesheet" type="text/css" media="all" 
href=css/styles.css> 
</head> 
<body> 
... 
<nav> 
<ul> 
<li><a href="designers.html">+DESIGNERS </a></li> 
<li><a href="aboutus.html">+ABOUT US </a></li> 
<li><a href="portfolio.html">+PORTFOLIO</a></li> 
<li><a href="press.html">+PRESS </a></li> 
<li><a href="contactus.html">+CONTACT US</a></li> 
</ul> 
</nav> 
</body> 
Style Sheet 
nav li a {   
font-family: 'Letter Gothic STD' sans-serif; 
font-size: 3em; 
font-weight:bold; 
color:#000; 
text-decoration:none; 
margin:0 20px; 
nav li a:hover{ 
text-decoration:none; 
border-bottom:2px solid #88AAA7;}
2.2 Graphics in HTML5  
Can't see pdf thumbnails - Library control class:C# PDF Thumbnail Create SDK: Draw thumbnail images for PDF in C#.net, ASP.NET, MVC, Ajax, WinForms, WPF
Support Thumbnail Generation with Various Options for Quick PDF Navigation
www.rasteredge.com
Can't see pdf thumbnails - Library control class:VB.NET PDF Thumbnail Create SDK: Draw thumbnail images for PDF in vb.net, ASP.NET, MVC, Ajax, WinForms, WPF
Support Thumbnail Generation with Various Options for Quick PDF Navigation
www.rasteredge.com
12 
The visual medium is a dominant content feature of the web. However, in the last ten years, the 
visual development was limited on CSS and JavaScript. Graphics tools introduced by HTML5 
utilised  both  CSS3  and  JavaScript which  are solutions  for huge range  of web graphical 
conditions.  Semantic features  as  on  interactive  designing  serve  beyond  the  limitation  of 
browsers and device fragmentation. Interactive designs exclude the need for external plug-ins 
and better interaction with users’ platforms. 
Canvas and SVG
In HTML5 specification, the <canvas> element is one of the new major specifications. HTML5 
introduces the <canvas> element to provide the whole experience of rendering graphs, game 
art graphics and other visual objects. The canvas element has neither its own content nor 
border. It serves as a tool for sketching specific paths, transformations and animated pictures. 
As Figure 3 explains, a graphical object is created in as part of HTML document.
On the other hand, Scalable Vector Graphics (SVG) are a set of vectors gathered to create a 
line object that is editable in the original scale. Vector graphics are good ways to balance the 
quality of images in a slow bandwidth environment. The quality of an image in different sized 
devices can be supported with the help of vector graphics. The core advantage of vector objects 
is their stable resolutions while resized.
Figure 3.  Scalable Vector graphics in HTML5
13 
Multimedia
Multimedia is another limited specification of the web development. In the  last 20 years, 
embedding a video in a website needed strong bandwidth and additional heavy software. 
Embracing plug-in into the anatomy of a browser was one option to compromise the bandwidth 
flaws. Media plug-in players such as Adobe Flash and Real Player have been the multimedia 
deliverer of web documents since 2005[10]. However, after the introduction of HTML5, it 
became easier to display video and other animated media in websites with a simple tag. The 
HTML5 tag for video is as easy as <video>.
Figure 4. Video and audio introduction
In addition to the above main expansions, HTML5 came out with a different standard and 
attributes. API development [11] allows HTML5 to extend in Application technologies and put 
up a hope to future web frameworks. 
Table 2. HTML5 implementations
HTML5 
JavaScript 
HTML 
CSS 
HTML5 
API 
mark-up 
CSS3 
Canvas 
DOCTYPE 
Transform 
Multimedia 
<canvas> 
Colour 
Web storage 
<audio> 
Animation 
File API 
<video> 
Text effects 
Drag & Drop 
<section> 
Web fonts 
App cache 
<header> 
Backgrounds 
Geolocation 
<footer> 
Gradients 
<article> 
Borders 
14 
2.3 Storage in HTML5
Data storage includes the concept of storing single pages, page tracking keys, and credential 
keys on user preferences. Up until early 2000s, data storage in web App is executed on client 
linked server storages space [12]. In the process of such storage, browser cookies come to the 
image. The browser maximum space on storing cookies extends to 4 kilobytes per domain.
The broad challenge of web performance and web security is a result of the session data in 
cookies. According to research carried out by Yahoo! [13], 1000-byte cookie adds 16ms of 
response time on a single request made over a broadband DSL connection. For instance, let 
us assume that a web page consists of 1 external CSS file and 2 external JS files and 4 images. 
With a total of eight requests, a 1000 byte cookies will add 128ms to the response time of the 
request. This result is a significant performance lag on web services. 
On the other hand, the security of a session data stored in cookies consumes a lot through 
encryption of the cookie value or authentication process of the server. To overcome the above 
challenges of using Cookie sessions, HTML5 introduces storing data on the client side device. 
HTML5 local storage is a space within the client
’s
web browser for storing named key/value 
pairs abstaining from resorting to plug-ins. This local storage saves the data and allows an 
application to work offline and sync back the data during an available network. The introduction 
of HTML5 local storage 
has solved the exiting challenge of storing user’s data on a server, as 
it is possible now to allow Apps to save data on t
he client’s device. 
The major options for web storages include: 
o
Web Storage 
o
Web SQL Database 
o
Indexed DB   
15 
2.4 Speed  
One major factor of web performance in online experience is the display time. Display time 
measures the time spent from a user’s 
click until the page is fully loaded to the screen. In 
several situations, after a page has loaded to the users
screen, sites continue to perform 
background work in response to 
the user’s initial action. In such cases, browsers continue to 
perform downloa
ding a user’s document which has 
a significant impact on the responsiveness 
of the page. Therefore, the speed of a website is determined by this elapsed time in combination 
with display time and CPU processing time. 
Considering the risks of timing, the core solution relies on understanding a specific network in 
which a website is to be launched. In most web development cases, it is an initial step to study 
the network and calculate the resource and user access that is available in a particular medium. 
As far as a standard speed is concerned, there are few ways that will improve the performance 
of display time quality.  
o
Efficiently structure mark-up  
o
Minimize byte to download 
o
Optimize media usage 
o
Avoid quirks mode[14] 
In addition, image and SVG usage ought to be chosen carefully for web development. JPEG 
formats are preferred to present pictures and photography visual objects. On the other hand, 
PNG formats are the best options in graphical arts as they are efficient to balance compatibility 
and CPU decoding.  
2.5 Location 
A location of a user is calculated with several methods including IP address, wireless network 
connection and signal exchanging towers or an implanted GPS hardware. Geolocation API [15] 
generates an updated communication between a users’ 
location and a local server. It creates 
a link on exchanging a location (latitude and longitude) and gives back related information with 
location area. 
16 
3 RESPONSIVE WEB DESIGN 
A basic introduction of responsive design [16] could be a mind-set design of a structural layout 
considering the further enhancement possibilities of a page. Adoption to various screen sizes 
is a major factor considered as an identity of a responsive design. Screen size identification of 
responsive web development involves either server-side or client-side detection of a device 
type. Designing a responsive page primarily starts from understanding the variety of users and 
devices of the implementation.
Picture 1. Responsive web design 
A responsive web development involves three core elements. A web platform is considered to 
fulfill the requirements of a responsive design if it contains the following core elements. 
o
Flexible and Fluid grids 
o
Dynamic contents 
o
CSS3 Media queries
Above all the steps of the designing process, the foundation of the design is required to meet 
flexible and fluid layouts that include grids. Girds hugely assist in the process of breaking and 
redisplaying proper portions of a website.  Secondly, a responsive design is planned to show a 
dynamic reflection in its content. For instance, an image as content needs to be flexible with 
the specific design requirement. 
17 
3.1 Media queries 
Media queries are a section in a Cascade Style Sheet that specifies the media match type of a 
device or orientation. Media queries were introduced in CSS3 in 2011. As a result, they check 
the condition of a query on a return value of true or false. The condition specifies the type of 
orientation or screen size. It is possible to add logical operators like ‘and’, ‘not’, and ‘only’ to 
combine, negate, and restrict respectively. Below are some examples of using these logical 
operations.
Table 3: Logical operators in media queries
@media(min-width:700px) and (orientation:landscape) {...} 
@media(not all)and(monochrome) {...} 
<link rel=”stylesheet” media=”only screen and (color)” href=”style.css”>
3.1.1 min-width
After the introduction of media queries, the “device width” that is specified is described with 
minimum and maximum width measurement limits. 
Table 4: Example on min-width media queries
@media only screen and (min-width:320px)
{...}     
If [device width] is greater than or equal to ‘i’, then the CSS style sheet will be applied to the 
screen (monitor or device). For instance, a screen size of 310px will fall in the regular style 
sheet instead since it has a value less than 320px.
3.1.2 max-width
Table 5: Example on max-width media queries
@media only screen and (max-width:320px)
{...} 
18 
The above section is translated in the condition of screen (monitor and device) with a screen 
size of 320 or less is required to inherit the style sheet. As a result, all other wider-than-this 
screen sizes are dropped. To fill the gap of the screen that can be left out, it is possible to 
integrate two media scripts. 
Table 6: Examples of completing gaps in different sizes
@media only screen and (mix-width:480px)and(max-width:640px)
{...} 
@media only screen and (max-width:479px)
{...} 
These queries define the design translation rules in HTML5 and CSS3 based on the devices’ 
screen width. 
3.2 Display Resolution and orientation 
The variation of mobile devices is directly affecting the display resolution of digital devices. The 
display resolution of a digital device is the number of distinct pixels in each dimension that can 
be displayed. Trends in screen sizes [17] show a noticeable gap in a rapid speed. In general, 
the  screen  sizes of most  devices  that  are  currently  in  the  market  are  adopting portrait, 
landscape or even a complete square. Many new devices have 100 different screen sizes in 
between ranges. 
Figure 5. Mobile screen trends
19 
As the usage figure might vary in any instance, assuming the screen size possibilities with the 
future devices is one solution. Grouping a certain range of similar screen sizes can be another 
solution. Although it is a possible measure, involving over a hundred of screen size and 
resolution in a test can be overwhelming. On the other hand, the orientation of a device is 
another definition of display property, which classifies the layout of the web page in horizontal 
and vertical orientation of smart devices.
20 
4 USER EXPERIENCE 
The experience of a visitor on a web page deploys an impact on the evaluation of a web 
development process. User experience is an emotional impact that is ingrained in the web 
design with the intention of achieving a maximum user satisfaction.
4.1 Utility and usability 
Utility is the fundamental element for measuring the functional quality of a website. The major 
question every company wishes to answer is ‘how interesting or useful a website is to its user?’. 
Pre-knowledge on the interest of the targeted audience is a starting point to meet the goal in 
the utility and usability. 
Usability [18] on the other hand is how difficult or easy a website is to use by the targeted users. 
It is about providing an equal amount of information regardless of the device fragmentation or 
designed layout. Decision on hiding contents and functionality is affected by the knowledge on 
the targeted audience. Other technical rules include the three click rule of designing apply in 
this section of the designing phase. The three-click rule suggests that a user should be able to 
find the information they are seeking with no more than three clicks.
4.2 Graphic design
Graphic design in responsive website is initially employed with three elements that determine 
the identity of the site. Graphic design is required to embrace content, performance and 
usability in the process of visual development.  Respectively, the very first step of any graphic 
design is to absorb a draft template that reflects the prioritized elements of a site. Background 
outlines or clear sketches placed from the beginning are main structures that can craft the final 
page. 
Respectively, the visual components of a website consist of the appropriate colour and style 
which can engage with the user’s emotional experience. Well-balanced contrast of colours and 
consistent use of fonts and presentation deploys a graceful brand that will magnify positive 
impression. Monochromatic colour set is an optical concept material that shows the sensitive 
power of one colour. Some examples of this technique are shown in Picture 2 [19]. 
Documents you may be interested
Documents you may be interested