 |
|
| Website Design and Development |
Programming Language Schedule |
||
| HTML5 and CSS | Website Development |
| Operational Challenge | HTML5 | Offline Caching |
| CSS3 - Grid Layout and Media Queries | Font Resizing with REMs | CSS Animations |
A website developer will be responsible for the evaluation, selection, and implementation of hardware, software, and coding techniques. The variety of small mobile devices and larger desktop workstations, present challenges in designing a website that is attractive and functional across devices. In addition to being developed for the screen resolution common to the primary target audience, planning requires flexible and fluid layouts that can be adapted to a different screens. The technical issues central to effective web design include remote device response time, grid-based layout that uses relative sizing, media queries and media query listeners, and flexible images and media supplied through dynamic resizing or CSS.
In December 2012, the W3C: Worldwide Web Consortium announced that HTML5 is feature complete. It is the newest version of Hypertext Markup Language; the implementation of WebSockets provides significantly faster web page load times. Based on HTML, CSS, DOM, and JavaScript, HTML5 makes it easier to: 1- browse multimedia content without downloading extra software. 2- check e-mail offline. 3- access web search. 4- perform transactions on a smartphone. Mobile web apps written in HTML5 will have to be coded for a specific brand of smartphone or tablet device; the application can be used cross platform. Video, audio and images can written right into the code, eliminating the need for any third party software.
HTML5 provides offline caching. The client browser can be instructed to cache some pages in order that a visitor will be able to view it again, even if it is not connected to the Internet. In order to cache a page, add this to the .htaccess file:
AddType text/cache-manifest .manifest
This directive ensures that every .manifest file is served as text/cache-manifest. If the file is not served as text/cache-manifest, then the entire manifest will have no effect and the page will not be available offline.
Example:
This directive creates a named, offline.manifest:
CACHE MANIFEST
CACHE
index.html
style.css
image.jpg
After the CACHE declaration, each file to be made available offline will need to be listed. The manifest file is then linked to the html document:
<html manifest="/offline.manifest">
If the client browser supports this technology, then the page will be cached.
CSS3 Implementation
The CSS3 Grid Layout provides a grid system capability comparable to XAML or Silverlight. Regions can be defined for in a layout with columns and rows, spanning, spacing, padding, and grid templates, and other presentation precision. It serve to enforce separation of concerns between HTML elements and CSS. HTML primitives can be placed into grid regions separate from actual content. The CSS3 Grid Layout and media queries combine to create fluid, responsive applications.
Media queries are used for scoping styles to specific capabilities and applying different styles based on the capabilities that match a query. Queries can be combined for testing multiple features through the use of the AND and NOT semantic operators. Features include width, height, max-width, max-height, device-height, orientation, aspect-ratio, resolution and more.
Media queries can be implemented by 1. Using the @import rule to import style rules from other style sheets. 2. Putting media queries directly in the style sheet. 3. Including a query in a linked style sheet’s media attribute.
The CSS3 specification provides for the definition of styles specific to a display size. This code applies a specific style for a display which is smaller than 700px.
@media screen and (max-width:700px){
#container{
width:320px;
}
header h1#logo a{
width:320px;
height:44px;
background:url(image-small.jpg) no-repeat 0 0;
}
}
The @media screen informs the web browser that this code only applies for screens; the resizing does not apply to printing. The and (max-width:700px) specifies that the screen must have a 700px max width.
If these requirements are met, then the code within the parenthesis is taken into consideration by the browser, and previous styles are redefined.
CSS3 includes the rem “root em” unit. An em is a unit of typography measurement, equal to the currently specified point size. The em unit is relative to the font-size of the parent. The rem unit is relative to the root- or the html- element. A single font size can be defined on the html element; with all rem units defined as a percentage of the html element.
html { font-size: 62.5%; }
body { font-size: 1.4rem; } /* =14px */
h1 { font-size: 2.4rem; } /* =24px */
The leading web browsers support CSS animations. CSS can be used to create simple animations, without the help of a client-side programming language such as JavaScript.
Example:
This code implements a background color change. Some proprietary properties such as -moz-keyframes are being used.
#logo {
margin: 15px 15px 0 15px;
background: red;
float: left;
/* Firefox 4+ */
-moz-animation-name:
colour-change;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
-moz-animation-duration: 30s;
/* Webkit */
-webkit-animation-name: colour-change;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 30s; }
@-moz-keyframes colour-change {
0% {
background: red;
}33% {
background: green;
}66% {
background: blue;
}
} @-webkit-keyframes colour-change {
0% {
background: red;
}
33% {
background: green;
}
66% {
background: blue;
}
}
SYS-ED makes no representations regarding ownership and intellectual rights associated with the software that it provides training on.