Lesson 10: Designing for Mobile Devices

Hi viewers,
This week, we will be discussing Mobile Design. Under the topic we will we will be discussing Mobile Websites vs. Mobile Apps, Designing Websites for Mobile Devices, Validating and Testing Mobile Web Pages,  and Responsive Web Design.
We first discuss Mobile website vs. Mobile apps.
Mobile Website: A Website designed for viewing on mobile device browsers. Mobile Website browsers function similarly to desktop browsers, except they are designed for a much smaller screen size.
Mobile app: An application designed for a specific mobile operating system. Examples of operating systems  mobile apps  run on are Android, Windows Phone or iOS. Each mobile app must be downloaded and installed.
Mobile Web sites have several advantages over mobile apps. Some of these advantages are
Mobile Web sites are easier to develop because they are written with HTML.
 They are Easier to develop, which  can save costs
Mobile Web sites work on any device with a browser. Mobile app are made for specific operating systems.
 Mobile Web sites can also increase your potential market because people can find your site using search engines.

 Designing Websites for Mobile Devices

Designing websites for mobile devices are a little similar to designing a website for a computer.

When you are designing Websites for use on mobile devices, you must also consider some additional challenges:

 Smaller screen sizes: Be aware of the size and resolution of current smartphone screens. You must balance your site so it works on all resolutions.

 Touchscreen use: Because mobile devices have smaller screens, you must lay out your pages differently than you would for a page that will be viewed primarily on larger screens.  Demand for quicker action "on the go" : Complex page designs with lots of formatting and links can be quite interesting when used on a large monitor. On a mobile site, however, complex designs hamper usability and increase wait time.

Validating and Testing Mobile Web Pages:

Before you publish your website, you should validate and test your mobile pages.

 Validation : ensures that your code complies with standards. Compliance helps your site perform better over more platforms, and prepares your pages for compatibility with evolving and future technologies.

 Testing: shows you how your pages will render and perform on various platforms doing various tasks. Well-tested sites are more likely to perform as intended for your users, which helps you win and keep customers.

 Responsive Web Design.

A Web design approach to create sites that adapt to many different devices. Web sites that incorporate RWD adapt their layouts to various viewing environments, such as different devices, browsers and screen sizes. a site developed with Responsive Web Design adjusts itself gracefully to fit on desktop, tablet and smartphone browsers by using:

Grid-based layouts: The grid is an invisible (to the user) set of vertical guidelines that help the developer place the page elements. 

Resizable images: responsive design uses a fluid image technique that adapts an image’s size to the device’s screen size. 

Media queries: A CSS3 technique for checking a client device, or media type, then limiting the scope of the page design to a specific range in order to target styles based on the device's properties, such as screen size. 

if you are able to master these techniques and ways of designing a mobile website, then you are ready to start creating wonderful mobile web pages. i hope you learned something from here.

Lesson 9: Completing, Submitting and Validating User Input Forms

Hi viewers,

This week we will be learning about Completing, Submitting and Validating User Input Forms. This lesson is a continuation of developing HTML5 forms. In this lesson we will be discussing Concepts and Techniques for Validating User Input,The HTML5 pattern attribute, and Submitting Forms with the <button> Element. 

We will first discuss Submitting Forms with the <button> Element, since it is the first step before validating and pattern attribute.
The HTML <button> element with a type attribute value of "submit" creates a Submit button that submits a user's completed form data to the server for processing. You can use some global attributes such  as autofocus: applies focus on the <button> element when the page loads;

 form : specifies the form(s) on the page in which the <button> element appears by

binding the button to the form, to make the process easier. 

The second topic is Concepts and Techniques for Validating User Input:

User input validation ensures that user-entered data is properly formatted and complete. There are two main ways of validating a form. The two ways are

Inline validation occurs when each form field is validated as the user completes it, before the Submit button is clicked. The other is pogo-sticking: Occurs when users must submit and resubmit a form until it validates.

Tips for successful inline validation: 

Premature error messages can frustrate users: Allow an appropriate delay before providing feedback. Persistent messages that show success are most helpful for users: These are messages that are always visible to the user.

Success messages should be placed outside of form fields: Do not place them inside form fields, where they may confuse users

 Including inline validation wherever practical makes forms easier and faster for users to complete.

The HTML5 pattern attribute

The HTML5 pattern attribute helps ensure that certain types of form data are entered correctly, such as dates, email addresses, prices and URLs. The pattern input reminds the how each individual should be formatted. The pattern the incorrect, the computer send an error message. 

Desired User Input:
Pattern Attribute Example using JavaScript Regular Expressions

Country code:
<input type="text" pattern="[A-Za-z]{3}"> 

Date (dd/mm/yyyy):
<input type="text" pattern="\d{1,2}/\d{1,2}/\d{4}">

E-mail address :
<input type="email" pattern="^.+@.+quot;

Latitude / longitude :

<input type="text" pattern="-?\d{1,3}\.\d+">

Price :
<input type="text" pattern="\d+(\.\d{2})?">

URL :
<input type="url" pattern="https?://.+"> 

This the end of another lesson I hope that you now have a little knowledge about  Completing, Submitting and Validating User Input Forms.

Lesson 8: Developing HTML5 Forms

Hi viewers
This week, we will be learning about developing HTML5 forms.
An HTML form are used to collect user input. HTMl has form element that help with data input. There are so many different types of input elements, checkboxes, radio buttons, submit buttons, and more.
 Radio buttons: round buttons in a group of mutually exclusive pre-determined choices
 Check boxes: square buttons in a group of pre-determined choices from which the user can select more than one choice
Drop-down select list:rectangular field that can expand upon user interaction and allow users to select one or more pre-determined choices
 Text box : rectangle field into which users can type alphanumeric characters of their choice
Submit and Reset buttons: buttons typically found at the bottom of forms used for either submitting the form or clearing all user input from the form.
HTML5 Form Input Types: HTML5 has three main input types that  helps a developer create forms easily. These input types are <form>, <input>, and <button>.
 The <form> tag is still used to designate the beginning of a form on a page.
 The <input> tag is still used to create many types of form fields.
 The <button> tag is still used to create buttons associated with a particular form, as well as other types of clickable buttons.
HTML5 also uses some form elements that enhance the creation of web forms. these elements are:
<datalist>
Specifies a list of predefined choices for an <input> element.
<keygen>
Adds security to a form through asymmetric encryption by creating a key-pair generator field in the form.
<output>
Displays the result when a calculation is performed.
HTML forms use other helpful elements, such as <fieldset>, <legend>, <label>, <select> and <textarea>. These HTML5 elements are known as Global Attributes.
The <fieldset> element is used to group elements so that related fields are placed together in a form.
The <legend> element allows you to add a caption for a group of items created by the <fieldset> element.
The <label> element is especially useful for semantics and accessibility, which are current concerns in Web page design.
 The <select> element creates a drop-down selection list, and it uses the <option> element to identify your list options.
 The <textarea>
element allows an unlimited character length, but developers usually define the size by adding the rows and cols attributes.
I hope you learned something from here.

Lesson 7: Using HTML5 APIs

Hi viewers
This week we will be discussing the HTML5 APIs.

First of all what is APIs and HTML5 APIs? 

An application programming interface (API) is a set of universal commands, calls and functions that allows developers to communicate with an application or operating system. HTML5 APIs provide an open environment for developing Web applications that does not rely on proprietary browser plugins. It consist of the Web Development trifecta, which are HTML5, CSS and JavaScript. The Web development trifecta create web pages that easily adapt to any kind of device when used together. In order to use and understand how to use HTML5 APIs, you must know and understand the Document Object Model (DOM). The DOM is a standard that specifies how objects in a Web document can be referred to and manipulated through scripting languages. Basically, the DOM is a standard that enables you to access, change, add or delete HTML elements in a Web document. Now that we have a basic knowledge of what DOM is let us revisit HTML5 APIs. Some functions of the HTML5 APIs include:
Media (audio and video).
Document editing.
 Cross-document messaging.
 MIME type and protocol handler registration.
 Web storage.

To Understand how The HTML5 APIs works we will look at some common HTML5 APIs. Some popular APIs that we will be discussing are:
 Canvas
Offline Application Cache
 Geolocation

 Drag-and-Drop

The File API

the History API

 Canvas: 

An HTML5 API used for rendering visual images on the fly by providing scripts with a bitmap canvas.
It requires an advanced Web application developer to fill it with multimedia content that he or she has created. How the Canvas API works: The canvas element is defined in HTML with the <canvas></canvas> tag. The <canvas> element uses two new HTML5 attributes:
 height
width
The Offline AppCache API:
A program that permits the user to continue working with Web sites and documents even when a network connection is unavailable. It uses application cache to store data from web pages locally.An application cache is directory on a computer where applications, such as Internet apps, can be stored and run without access to the original application.The Offline AppCache API also uses a manifest to tell the browser which files to store locally, which allows the user to continue working without the connection. Manifest is a list of the files that are needed for the Web application to work offline.
How the Offline AppCache API works: To set up a site and its applications to work offline, you must first create a mandatory manifest file. This manifest lists the files needed for the Web application to work offline. The manifest file name uses a file name extension of .appcache. Example home.appcache.
The Geolocation API:

defines an advanced interface for location information associated only with the device hosting the application, such as latitude and longitude. The HTML5 Geolocation API is used to obtain geographic information about a user this process known as geolocation. Geolocation is the ability to determine a user's location. The user's IP address, wireless network, and  GPS hardware on the user's device are used to determine a persons location. How the Geolocation API works: Geolocation can Determine a user's current position,  can monitor the user's location , and can update any changes to that location. Geolocation uses three methods to get a users location. These Methods are: 

getCurrentPosition(): retrieves the current geographic location of the user.

watchPosition(): retrieves periodic updates about the current geographic location of the user.

clearWatch(): cancels an ongoing watchPosition() call.

 The Drag-and–Drop API.

 Drag-and-Drop is a functionality that allows a user to grab an object on a computer screen and move it to a different location on the screen. How the Drag-and-Drop API works:

Adding drag-and-drop functionality to your Web pages requires several steps:

First, you must specify the HTML element(s) that you want to become draggable.

Next, you must add an event listener for the dragstart event on any of the HTML draggable elements.

 Lastly, you must add an event listener for the dragover and drop events on any elements that will accept a dragged item.

To begin, you define an element as able to be dragged by setting its draggable attribute to the value "true". You must add the ondragstart event listener to trigger the drag event.

Finally, you must define a drop zone on the page. This is done by creating two events:

dragover called when you drag a page element

drop called when a page element is dropped after being dragged

The File API

The HTML5 File API provides a standard way to interact with files on the client machine using a Web browser. It provides access to a local file system on a client for Web applications to use. 

How the File API works:

The File API allows you to interact with files using three interface types:

 FileList: provides a directory list of file objects. You can list information such as the filename, MIME type and size.

FileReader: provides read-only access to individual files, such as images.

Blob: provides the ability to divide a file into byte ranges.

Last but not the list the History API

The HTML5 History API allows Web designers to control the browser history. Most users will probably not notice the addition of the History API to your Web site, but this control can help make your site more user-friendly. How the History API works: the History API allows you to add, change and delete URLs and titles in the browser history field. This is the end for this week lesson I hope you learn something from here.