Planning Site Navigation (lect)

Before making a website. We have to understand how to plan the navigation in the website.
example, we have to create a site map;

Site Map

in making navigation, endeavored to be good and easy to use and understand user.

for more concern : download

Incorporating Graphics and Color ( lect)

Today , i learn about Incorporating Graphics and Color.

1. Graphics Format
2. Use <img> element
3. Control image , background with CSS

Graphics Format

GIF

   GIF (Graphics Interchange Format) is an 8-bit image supports 256 colors and can only be used in grayscale mode, bitmaps, and color index. Image with this format supports the use of multiple bitmaps in one file so that it can be used to create animated images (animation). In addition, the GIF format also supports Transparency and Interlacing.

PNG

    Image with PNG (Portable Network Graphics) was first developed in 1995. This format uses lossless compression method, which is a method of compressed images with not too much reducing its quality. At first the PNG format is designed to be a lack of GIF.

JPG / JPEG

    JPEG was developed in the early 1980s by the Joint Photographic Experts Group (JPEG). JPEG is the most commonly used format on the internet. Such as GIF, JPEG format also uses a compression system, but the algorithm is different; much more complex and lossy.
    Because it is a lossy compression process it is not recommended if we edit it repeatedly. Why? Because in every process there will be a compress-decompress the original image information is lost (wasted) and can not be saved, especially if there is a process of "crop" or "shift" of the image.


For more concern : download

Designing Page Layout (lect)

Today, I get a lesson about designing page layouts and understand it:
1. Normal flow.
2. Using division element to the make Contain containers.
3. Create floating layouts.
4. Build flexible and fixed layouts

Normal flow.
Normal flow is the way that elements are displayed in a web page in most circumstances. All elements in HTML are inside boxes roomates are either inline boxes or block boxes.

Division Element.

Use <div> to make elements :

Floating element 

A common problem with float-based layouts is that the floats' container doesn't want to stretch up to accomodate the floats. If you want to add, say, a border around all floats (ie. a border around the container) you'll have to command the browsers somehow to stretch up the container all the way.

More concern : download

(Using The CSS Box Model (lecturing)

Today I get a lesson about css box models.

When you set the width of an element, the element can actually appear bigger than what you set: the element's border and padding will stretch out the element beyond the specified width. Look at the following example, where two elements with the same width value end up different sizes in the result.

For more concern : download

Typography Website (lecturing)

What is Typography?

Typography is a combination of art and engineering to set the paper so as to make the meaning of the text is well conveyed visually. Typography is a complementary element in the design of which must be considered. For example, if the wrong type of font, font size, alignment posts, they will make you feel bland design, ridiculed, less readable, even in jest reader for writing disheveled.

Processing typography is not only limited by the selection of fonts, font size, kerning, leading, decor & so on, but also on the fit between the theme and the impression you want to show. Many web designers so do not understand and do not care about typography in web design. As a result of their web design work seemed bland because there is no fusion of typography even difficult to read the article. Then the question we create a website to share information through articles in the form of text what just show off the design with images bejibun number?

What should be noted in Web Design

   Read Article Before Di Publish
Read the article to be published, it is important that we know how the text will be integrated into the website, so that between text and design fused and messages conveyed properly.

   Draw the structure Hireaki The Clear
Show me a clear hierarchy, Illustration like this, when you see a website, which parts are directly you see? Next to where? With the clarity like this, your website typography will look more regularly to be seen. You can try to choose the size of the font size, shape attractive and clear, then the placement of the letter should also be adjusted properly.

   Choosing Fonts & Colors Background
Choose the color of the letters are comfortable to be seen or read. Then the color of the letters also be different from the background color, not necessarily with a contrasting color, but can be a color that is more clearly visible so easy to read. Do not occasionally choose red color for text with black background. It can make our eyes tired to read. Find font color comfortable as possible adapted to the background color.

for more concern : download

Introduction to CSS (lecturing)

What is CSS?

CSS stands for Cascading Style Sheets. If you read in the dictionary, it means the cascading waterfall. But in this case, the intent is, the flow from one code to another code interconnected.

So if a complete written in Indonesian roughly meaning CSS is: a collection of sequential codes and interconnected to set the format / display an HTML page.

Advantages of Using CSS

If you have multiple pages where you use arial font for writing, then one day you get bored with the arial and want to change to a trebuchet, you have to change one by one page of your website and change the font type of arial be trebuchet.

By using css, where all the web pages use the same CSS, you simply change one line of code css to change the font on all web pages of arial to the trebuchet.

Thus, the advantages of using CSS, more practical!

Disadvantages of Using CSS

Not all browsers interpret the CSS code in the same way. So sometimes, the web interface with CSS looks good in one browser, but messy in other browsers. So you must check the display to look good in all browsers and add special codes specific browser if necessary in order to display your website looks good in all browsers.

for more concern : download

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