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.

Lesson 6: JavaScript Events, Functions and Methods

Hello everyone

This week we will be discussing JavaScript Events, Functions and Methods.

First we will discuss functions. Function is a named set of statements that performs a task or calculates a value. Functions are fundamental tools in JavaScript. By plugging data into a function, a value will return either to the screen, to a variable, or to another function. Functions enable you to write code and place it into a single unit that can perform a specific task repeatedly throughout the program, as needed in order to use functions effectively,you must know how to:

• Define (or declare) functions.

• Pass arguments to them.

• Call them.

• Return function results.

Defining function:You define a function when you encompass a group of script statements into a function block.

Pass argument to them: The curly braces must encompass any statements that are to execute as part of that function. This statement is known as argument.

Argument: a value or expression containing data or code that is passed on to a function or procedure. Also called a parameter.

Call them: A function's statements are processed when the function is called

Calling Statement: a statement that transfers program execution to a subroutine, procedure or function. Return function results: ends function execution and specifies a value to be returned to the function caller.

Whether they are submitting forms or navigating Web pages, users generate events. JavaScript contains predetermined event handlers that deal with these events. Some of these are mouseOver, mouseOut, reset, select, submit, unload.

The next thing we will discuss is Methods. Methods are what the objects in Javascript can do.

Errors In JavaScript Load-time errors 

In relation to a computer programming, scripting or markup language, a "bug" is an error in the code. There are several types of bugs:

Commonly called compiler or interpreter errors, these are typically syntax errors. Load-time errors usually cause error alerts.

 Run-time errors — After the script has loaded and is running, an error occurs. These are typically caused by improper use of commands. Run-time errors usually cause error alerts as well.

 Logic errors — These are mathematical errors, casting errors, errors in proper command usage or errors in the structure of the script, which result in the script running improperly. Logic errors do not cause error alerts. The script may return unexpected results or may fail to execute at all.

Lesson 5: Introduction to JavaScript

Hello everyone

This week we will be discussing introduction to JavaScript.
JavaScript is a a script language. A script language is a programming designed to enable computer users to write useful programs easily. Scripting languages include JavaScript, perl, PHP(PHP Hypertext preprocessor), TCl Tool Command Language) ColdFusion, VBScript and REXX. In this discussing we will focus on only JavaScript.
JavaScript is a scripting language that adds dynamic interactivity to web pages. JavaScript is considered a scripting language because it supports scripts, which are programs that interpret and automate task execution.
Javascript characteristics:
JavaScript is object based: This means that functions come from objects
JavaScript is event-driven: Scripts are driven by events(cursor clicking)
JavaScript is a platform-independent: Works in most browsers, but may render differently.

JavaScript enables quick development: Because JavaScript does not require time-consuming compilation, scripts can be developed quickly.

JavaScript is relatively easy to learn: JavaScript does not have all of the complex rules associated with Java or other full object-oriented languages. 
                                JavaScript vs. Other Languages
JavaScript has similarities to some other scripting languages. Today we will clarify the relationships between JavaScript and some other languages to which it is often compared.
JScript: Microsoft version of JavaScript. JavaScript and JScript have several difference. If you mistakenly use one instead of the other, there might be some  compatibility problems. 
VBScript: Both VBScript and JavaScript extend the capabilities of static Web pages.

Java: Advanced programming language. It is generally used to create stand-alone applications and a special type of mini-application called a Java applet. JavaScript has no relation to Java.
                        Objects, Properties, methods, and Variables
objects: parts of JavaScript. Each object has three groups of attributes. These attributes are
 properties,values, and methods 

Properties: various attributes of an object, such as height, color, font size, sentence length and so forth.
Values: the specific qualities of properties. E.g. the statement color="yellow" assigns a value to a property.
 Methods:the actions that an object can be made to perform, such as a calculation, an onscreen move or the writing of text into a window. Methods often describe the actions that an object performs with its properties. Here are some commonly used methods
alert(): creates a pop-up box with the specified message string, which the user can dismiss by clicking a button in the box.
 prompt(): creates a pop-up box with the specified message string and requests user input into a text field in the box.
 confirm(): creates a pop-up box with the specified message string and requests user confirmation (yes or no) by clicking the OK or Cancel button in the box.
document.write(): writes the specified message string in the page.
Variables: A named space of memory that holds a value. The value can change depending on a condition or information passed to the program, or by reassignment of a new value.
Naming variables: The first character of the variable must be a letter, the underscore ( _ ) character or the dollar sign ( $ ). No other initial characters are allowed. Subsequent characters can be letters, numbers and/or underscore characters.
Variables can hold numbers: numerical values, strings: text message, boolean: true or false, object: an object, null: hasn't been defined yet.
                             Expressions and Operators 
expression: Part of a statement this is evaluated as a value; it can use any combination of variables, operators, and other expressions.
operator: A symbol character used in programming expressions to instruct the program how to store or manipulate (operate on) a value.
operand: Data that is to be operated upon or manipulated in some manner.
                      JavaScript If /Else Statements
Conditional statements are used to perform different actions based on different conditions.
 The if() condition helps  you check conditions, while for() allows you to go through a set of data and do the same with each piece of data.
Last but not the least, to code JavaScript into web documents the code is placed between <script> tags( in either head or body)
You can also put JavaScript into web documents through inline scripting. Inline scripting is attributed to a specific element. I hope you learned something about JavaScript


Sources:
http://www.quirksmode.org/js/state.html  
http://www.w3schools.com/js/js_if_else.asp
http://education.certification-partners.com/CIW/

tables, orderlists, unordered lists

Hi everyone
This week we have done a lot of codecademy, we learned how to make tables, order lists and unordered lists. We also learned how to use span and divs.
First let us talk about tables. Tables are used to store tabular data so it is easy to read. To make a table you must first set a table tag which is <table>, then add a table row tag which is <tr>. You don't really create columns in <table> instead, you tell each row how many cells to have, and that determines your number of columns.The second thing we learned was how to make order lists. An ordered list is simply a list that is numbered. to make an order list, you first begin with the opening tag <ol>. <ol> means order list. the next thing you do is to open a list item tag <li>. Everything you list must have a new <li>. always make sure that you close all your <li>s and <ol>s. the closing should alway look like this </li> and </ol>. The next thing we learned was how to make unordered lists. Unordered list are lists that are not very important. Unordered list some time go under ordered lists. To make an unordered list you must first open an unordered list tag <ul>, you then make <li> again always remember to close every tag you open. The next thing we learned was divs and spans.Divs allow you to section off a part of your webpage for individual styling. An example code for Divs will be

<div id="header">
<h1>school</h1>
<p>I love school </p>
</div>. CSS can now be used to give both lines of text a different background, border, font, etc. from the rest of the page using Divs

Spans: are used to target one specific word or group of words that might be a part of an overall paragraph. An example code of span is

<p>my school's name is<span style="color:blue;font-weight:bold">Fairmont Heights High School.</span> You could now use CSS to target that what you want to change. That all we did this week. I hope you learned something about making tables, order and unordered lists, spans and divs. For a more detailed information you can visit codecademy.