Fortran Language Educational Consultancy SYS-ED SYSED Computer Education Techniques

Programming Language Educational Consultancy SYS-ED SYSED Computer Education Techniques

Website Design and Development

Computer and Web Apps Training Sitemap

Submit Web Design Questions

Knowledge Transfer

Programming Language Schedule

Definition of Service

Delivery Medium

Web-based Training Services

     
HTML5 and CSS Website Development
Operational Challenge HTML5 Offline Caching
CSS3 - Grid Layout and Media Queries Font Resizing with REMs CSS Animations
Copyright Acknowledgement
 

Operational Challenge

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.


HTML5

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.


Offline Caching

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


Grid Layout and Media Queries

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.


Font Resizing with REMs

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 */


CSS Animations

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;
     }
}


Copyright Acknowledgement

SYS-ED makes no representations regarding ownership and intellectual rights associated with the software that it provides training on.