Tuesday, June 23, 2015

HTML5

HTML5 will be the new standard for HTML, XHTML, and the HTML DOM. The previous version of HTML came in 1999. The Web has changed a lot since then. HTML5 is still a work in progress. However, most modern browsers have some HTML5 support.

Some rules for HTML5 were established.

New features should be based on HTML, CSS, DOM, and JavaScript.
The need for external plugins (like Flash) should be reduced.
There should be better error handling.
There should be more markup to replace scripting.
HTML5 should be device independent.
The development process should be visible to the public.

New Features

The canvas element for drawing
The video and audio elements for media playback
Better support for local offline storage
New content-specific elements, such as article, footer, header, nav, and section
New form controls, such as calendar, date, time, e-mail, URL, and search

New Elements In HTML5

Friday, June 19, 2015

Javascript

Introduction to Javascript

JavaScript is most commonly used as a client side scripting language. This means that JavaScript code is written into an HTML page. When a user requests an HTML page with JavaScript in it, the script is sent to the browser and it's up to the browser to do something with it. JavaScript is a full-featured programming language that allows a developer to perform calculations and handle looping, selection and repetitive tasks, arrays, and manipulation of the browser object model and the document object model.JavaScript can be placed in the head or body tags within an HTML document using script tags. This method of adding JavaScript to a Web page is considered inline scripting. For inline scripting, the general standard is to place the scripts within the head tag. JavaScript code also can reside in a separate file with a .js extension; this method is known as external scripting.

JavaScript code can be written using a text editor, such as Windows Notepad++, or an HTML editor, such as Dreamweaver. The script element is used to contain scripts and has a type attribute that specifies the language used to write the script. The browser uses the value ("text/javascript") specified by the type attribute to read the script.External scripting is more modular than inline scripting, allowing several Web pages to use the functions in the external JavaScript file.JavaScript uses the three basic structured programming control structures: sequential, selection, and iteration.

JavaScript can be placed in the <body> and the <head> sections of an HTML page.In HTML, JavaScript code must be inserted between <script> and </script> tags.
When using variables, remember the following:

Variable declarations start with var.
Variable names can include only letters, numbers, the underscore (_), or a dollar sign ($).
Variable names cannot start with a number.
Reserved words cannot be used.
The assignment operator (=) is used to modify the value of the variable.

jQuery

jQuery is just one among a number of libraries or frameworks available for JavaScript, but it's the most widely used and I've not come across a compelling reason to use another one. There is excellent introductory material at http://www.w3schools.com/jquery/default.asp One of the most difficult things about jQuery is the syntax, even though in reality it's fairly simple: http://www.w3schools.com/jquery/jquery_syntax.asp Note that the "$" character is just the name of a function, but a crucially important one. In particular, it has nothing to do with variables and is not related to the "$" character as used in PHP! It's really useful to get a clear idea of the range of selectors available: http://www.w3schools.com/jquery/jquery_selectors.asp (the "first", "even", "odd" etc. can be especially useful). (The example of how to use the first-child selector, for instance, has a good example of embedded anonymous functions as commonly used in jQuery: http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_sel_ullifirstchild) Again, anonymous functions are the usual approach to defining methods that will be called in response to interactive events: http://www.w3schools.com/jquery/jquery_events.asp

Sunday, June 14, 2015

Forms

HTML Forms

Forms let us build interactive Web pages that collect information from a user.There are different types of form objects that we can place on our form, including text fields, radio buttons, check boxes, menus (list boxes), and buttons. Basic form elements that are commonly supported by the major Web browsers include the following.

<form>
<input>
<select>
<textarea>

The <form> element defines an HTML form.HTML forms contain form elements.Form elements are different types of input elements, checkboxes, radio buttons, submit buttons, and more.The <input> element is the most important form element.The <input> element has many variations, depending on the type attribute. <input type="text"> defines a one-line input field for text input.

Form Processing Basics

When deciding which controls to use, consider the information that you want to collect, use the following progression of controls.

Start by finding out whether you can collect pieces of information using check boxes and radio buttons, because they are the quickest and easiest methods of input for the user, requiring only a click of the mouse.
Look for a place where you can use a list, which is also easy to use. But try to make the list as short as possible.
Then use text fields to collect short text input.
Finally, include text areas only if visitors need to give longer responses using their own words.

In general, radio buttons, check boxes, and select lists are all better choices for accepting input than text areas are. If you can provide choices and let users choose from them, do so.To process a form, you must include a button for the user to submit the information that was entered into the form. When someone clicks the Submit button, all of the information that he or she has filled in is sent, in a standard format, to an Internet address that you specify in the form itself. You then have a special forms-processing program at that address that was coded to process that information on the server.

Tag/Attribute Description action="..." Specifies the file, usually a program on the HTTP server that will process the output from the form method="..." Tells the browser how to send the data to the server, with either the POST or GET method. The end result is the same, and the distinction is how the information is provided to the server, either through the URL or through a form object. The action = and method = attributes depend on the server-side program that processes the form.The documentation that came with your form - processing script or with your Web server hosting account will tell you what to use whether POST or GET is the value for the method attribute.
The POST method is almost always used because it instructs the browser to send the form entry results as part of the document header, hiding the data being passed. The GET method is the default value for the method attribute, and is the method used if the method attribute is not specified in the form's opening tag. The GET method appends the data to the end of a URL to pass the data to the server. The GET method is much less secure, but using GET does have some advantages.

Form Controls

Controls are the things that we use to collect user data. They consist of text boxes, buttons, check boxes, and radio buttons, and we will use them to collect and display data.

Radio buttons give visitors an opportunity to choose one, and only one, item
Check boxes allow visitors to select one item, no items, or several items from a list.
Select lists are lists from which the visitor can choose one or more items.
Text fields are for short text input, such as names, search terms, or e-mail addresses.

Monday, June 1, 2015

Tables

TABLES

Tables

A table consists of rows and columns; a good visual example is a Microsoft Excel spreadsheet. A cell is an intersection of a row and a column. We can create table structures that contain rows and columns and then merge the rows and columns to create the grid layouts.By default, all major browsers display table headings as bold and centered:

Tables are defined with the <table> tag.
Tables are divided into table rows with the <tr> tag.
Table rows are divided into table data with the <td> tag.
A table row can also be divided into table headings with the <th> tag.

Navigation Guidelines

Site identification - This includes company name, logo, page title, and page purpose. This will keep customers from getting confused, no matter how they arrived at the page.
Home Page link - This is pretty simple. Customers should always be able to return to the home page at a single click of a button.
Links to second-level pages - If you consider the home page the first, or top, level of the navigation hierarchy, then there will be a set of second-level pages that are the start pages for the primary use case scenarios. You should provide links to these pages because doing so allows a customer to begin an operation with one click, and it also provides a visual map of the website structure.
Contact information - This is a link to a Contact Us page. You will want to provide the appropriate level of contact information, and you should not provide information that you will not support.

Navigation Principles

Create Simple, Visible, and Consistent Navigation
Leverage The Customers' Experience
Keep It Simple
Provide Alternatives
Provide Active Feedback
Make Navigation Easy to Change

Hyperlinks

There are two types of hyperlinks that websites use: text links and graphical links. Both text and graphical links are important in website design. Text-based links have the advantage of taking up less screen space and loading faster. Graphical links have the advantage of adding a nice look and feel to a site.The href attribute specifies the destination address. The link text is the visible part.Clicking on the link text, will send you to the specified address.