Plainning The Site (lecturing)

Today I get lectures about planning the sites. The goal is:

1. To understand the development of a website.
2. Creating a website specification.
3. identify the purpose formation of a website.
4. Establish a team to create a website.

Understand the development of a website.

Before creating a website, we have to understand how to develop the website itself. Therefore we need to know before we make whether it's about navigation, appearance, structure and others.

Creating a website specification.

We as developers must understand how to create a website useful specifications in accordance with our clients.

Identify the purpose formation of a website.

We must understand the purpose of the establishment of a website itself, whether its for business purposes, for sale, or for personal.

Establish a TEAM.

In order for the website that we do quality, we have to have a great team to divide each task. We have to be smart to choose a person to be able to join in our team.


for more concern : download

Layout 

In the world of design, layout talked about how the arrangement of elements within a page correctly. Just like typography, there are so many elements to the layout, which certainly can not be discussed in this section alone. Discussion of the overall layout would require a separate book. We will only see the layout of the elements commonly found in web documents, and how to make these elements with HTML and CSS.

A web document generally have the following elements:


element Header 
As the name suggests, is an element that contains the title and other explanatory documents. Usually this element is loaded with website logo, global menus (such as login and logout), and the name of the currently displayed page.
element Navigation 
Navigation elements, which provide navigation access to other pages on the web.
element Sidebar 
Support element content, the content can be a navigational aide, or a variety of other things like a list of other content, advertisements, or additional menus. Sidebar can be left or right in the content, or even on the left and right of the content, according to the designer's creativity.
element content 
The main contents of web documents. Users usually come to the web to see the text that is in this section.
Footer elements 
The concluding section of the website, which may contain other information on the website, such as the use of the license, sitemap, or links to other websites.
How can we create a general layout as shown in the picture elements in the Document Layout above site? Before you create a layout, of course, we first have to know how to measure elements in the HTML. Because without being able to measure the elements correctly, we will not be able to make a nice layout.

                                                      For more information : here

CSS Box Model

Margin 
How to write the following CSS
margin: 3px 3px 3px 3px;
The order of the numbers is Up, Right, Down, Left, or you can write one by one like this:
margin-top: 3px;
margin-right: 3px;
margin-bottom: 3px;
margin-left: 3px;

Padding
For writing CSS Padding is similar to the margin we only need to change the "margin" to "padding" like this:
padding: 3px 3px 3px 3px;

Border
How to write the following CSS
border: 4px solid # 000;
# 000 is the color code of the HTML, you can change this to black or another color coding HTML. To find the HTML color code, please enter here. If you want to give a border only on one side please use code like this:
border-top: 4px solid # 000;
border-left: 4px solid # 000;
border-bottom: 4px solid # 000;
border-right: 4px solid # 000;


Various Kinds of Border Style 

Download example of my code : here

Font in CSS

There are many fonts that are contained in the CSS. So, to set the font css style of writing contained in the html. Many fonts are available in CSS for example Arial, Times New Roman and many others.

Style and Selector

       Okay, today I will show you what I did yesterday about css and selector.
HTML is an Internet programming language that can display images and information with a good view, but to support it all, required to use css
CSS can be divided into three: 

1. Internal Css 

2. Inline css

3. External Css

For more information : here

HTML 5 NEW ELEMENTS

HTML5 is a core technology markup language of the Internet used for structuring and presenting content for the World Wide Web. It is the fifth revision of the HTML standard (created in 1990 and standardized as HTML 4 as of 1997) and, as of December 2012, is a candidate recommendation of the World Wide Web Consortium (W3C).

What is new in HTML5:

1. New Elements

2. New Attributes

3. Full CSS3 Support

4. Video and Audio

5. 2D/3D Graphics

6. Local Storage

7. Local SQL Database

8. Web Applications

9. This is example of syntax HTML5

Canvas tag in html5

Canvas tag is Defined graphic drawing using JavaScript.

Example

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">

Your browser does not support the HTML5 canvas tag.

</canvas>

New media element:

New form element:

Example of JavaScript of canvas:

<script> 

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

ctx.fillStyle="#FF0000";

ctx.fillRect(0,0,150,75);

</script>

GRAPHIC TOOLS

Graphical tools are software tools that link resources together in an online visual collaboration to author rich web presentations, upload and share visual content among team or customers inside a visual workspace.It can help link people’s experiences from across the globe and foster collaboration by providing a dynamic workspace to draw, annotate and review shared designs and documents.

The design concept

There are three objectives of designing concept :

To Inform

To Identify

To Persuade

Graphic

Graphics are visual images or designs on some surface, such as a wall, canvas, screen, paper, or stone to inform, illustrate, or entertain. In contemporary usage it includes: pictorial representation of data, as in computer-aided design and manufacture, in typesetting and the graphic arts, and in educational and recreational software.

There are two graphics, they are:

Bitmaps

 Vector

Graphic tool

There are many graphic tool can we find, such us: 

               Tool box :

              Layout tool