web design

          There are some requirements to have a good website. It should have design so that other people can look to your site better. If you followed this checklist you will find your website  whole lot better.  It makes our website more attractive and presentable to the viewer.It will guide us in designing our own website. Here are some checklist to have a good web design.

Background Information

• URL:
• Audience:
• Subject:
• Developer:

Page Layout

1. Appealing to target audience
2. Consistent site header/logo
3. Consistent navigation area
4. Informative page title that includes the company/organization/site name
5. Page footer area — copyright, last update, contact e-mail address
6. Good use of basic design principles: repetition, contrast, proximity, and alignment
7. Displays without horizontal scrolling at 1024x768 and higher resolutions
8. Balance of text/graphics/white space on page
9. Good contrast between text and background
10. Repetitive information (header/logo and navigation) takes up no more than one-quarter to one-third of the top portion of the browser window at 1024x768 resolution
11. Home page has compelling, interesting information above the fold (before scrolling down) at 1024x768
12. Home page downloads within 10 seconds on dial-up connection

Browser Compatibility

1. Displays on popular versions of Internet Explorer (7+)
2. Displays on popular versions of Firefox (3+)
3. Displays on popular versions of Opera (9+)
4. Display on popular versions of Safari (both Mac and Windows)

Navigation

1. Main navigation links are clearly and consistently labeled
2. Navigation is easy to use for target audience
3. If images, Flash, or DHTML is the main navigation, clear text links are in the footer section of the page (accessibility)
4. Navigation is structured in an unordered list (accessibility)
5. Navigation aids, such as site map, skip navigation link, or breadcrumbs are used (accessibility)
6. All navigation hyperlinks "work" — are not broken

Color and Graphics

1. Use of different colors in page backgrounds/text is limited to a maximum of three or four colors plus neutrals
2. Color is used consistently
3. Color has good contrast with associated text
4. Color is not used alone to convey meaning (accessibility)
5. Use of color and graphics enhances rather than distracts from the site
6. Graphics are optimized and do not significantly slow download
7. Each graphic used serves a clear purpose
8. Image tags use the alt attribute to configure alternate text to display if the browser or user agent does not support images (accessibility)
9. Animated images do not distract from the site and either do not repeat or only repeat a few times

Multimedia

1. Each audio/video/Flash file used serves a clear purpose
2. The audio/video/Flash files used enhance rather than distract from the site
3. Captions are provided for each audio or video file used (accessibility)
4. Download times for audio or video files are indicated
5. Links to downloads for media plug-ins are provided

Content Presentation

1. Common fonts such as Arial or Times New Roman are used
2. Techniques of writing for the Web are used: headings, bullet points, short sentences in short paragraphs, use of white space, etc.
3. Fonts, font sizes, and font colors are consistently used
4. Content provides meaningful, useful information
5. Content is organized in a consistent manner
6. Information is easy to find (minimal clicks)
7. Timeliness: The date of the last revision and/or copyright date is accurate
8. Content does not include outdated material
9. Content is free of typographical and grammatical errors
10. Content provides links to other useful sites
11. Avoids the use of "Click here" when writing text for hyperlinks
12. If standard link colors are not used, hyperlinks use a consistent set of colors to indicate visited/nonvisited status
13. If graphics and/or media is used to convey meaning, the alternate text equivalent of the content is provided (accessibility)

Functionality

1. All internal hyperlinks work
2. All external hyperlinks work
3. All forms function as expected
4. No JavaScript errors are generated

Accessibility

1. If images, Flash, or DHTML is the main navigation, clear text links are in the footer section of the page
2. Navigation is structured in an unordered list
3. Navigation aids, such as site map, skip navigation link, or breadcrumbs are used
4. Color is not used alone to convey meaning
5. Image tags use the alt attribute to configure alternate text to display if the browser or user agent does not support images
6. If graphics and/or media is used to convey meaning, the alternate text equivalent of the content is provided
7. Captions are provided for each audio or video file used
8. Use attributes designed to improve accessibility such as title and summary when appropriate
9. Use the id and headers attributes to improve the accessibility of table data
10. If the site uses frames, use frame titles and place meaningful content in the noframes area
11. To assist screen readers configure the html element's lang and xml:lang attribute to indicate the spoken language of the page.                                                               

C.R.A.P

          We learned that good design is based on the C.R.A.P. principles where C.R.A.P. stands for Contrast Repetition Alignment Proximity.


           Contrast- is to avoid elements on the page that are merely similar. If the elements  are not the same, then make them very different. Contrast is often the most important visual attraction on a page.


         Repetition-repeat visual elements of the design throughout the piece. You can repeat color, shape, texture, spatial relationships, line thicknesses, sizes, etc.


          Alignment-nothing should be placed on the page. Every element should have some visual connection with another element on the page. This creates a clean, sophisticated, fresh look.


          Proximity-items relating to each other should be grouped close together. When several items are in close proximity to each other, they become one visual unit rather than several separate units. 

personal site..

         Personal site was created by an individual. An individual can express herself/himself by making personal website. He or she can do what he/she want to do. He/she can put his/her background information. This type of site may contain short fiction such as short stories or samples of artwork. Many personal pages will include information about the author's hobbies and interests and information of interest only to friends and family of the author. Sometimes when we are not busy we can make personal website to entertain us. It is entertaining because other people can see what you are doing. You can post many things like the happenings in your life. Personal website can serves as your diary but other people can see it. Many people are making websites not only for entertainment but for income too. They can earn money by the advertisements in their site. If your site is most viewed by the people there are company that offers you to put their advertisements  in your site, in that way they will pay you in every click that your viewer do.

know the basics

          What is a website? It is a collection of related web pages containing images, videos or other digital assets. A web page is a document, typically written in plain text interspersed with formatting instructions of Hypertext Markup Language (HTML, XHTML).HTML, which stands for HyperText Markup Language, is the predominant markup languages for web pages. HTML is the basic building-blocks of webpages. HTML is written in the form of HTML elements consisting of tags, enclosed in angle brackets.




           Making webpage is not easy.  There are many things that we should learn like the file names and site structures. Site structures is the framework of a site. There are basic document structures that are consist of Doctype, html, head, title and body elements. Doctype is refer to a DTD. DTD specifies the rules for the markup language so that browser render the content correctly. Html  is a standerdized system for tagging text files to achieve font, color, graphic and hyper link effects on www pages. Head is the container for all the head elements. Title defines the title of the document.
Body element defines the document's body. The body element contains all the contents of an HTML document, such as text, hyperlinks, images, tables, lists, etc.


          I have learned all of that for this week. I hope that I can use this knowledge in the future. Hope that I can make a beautiful website.

rainy days!!!

          What a rainy days! It's raining cats and dogs.The flood becomes higher and higher! Many people are affected in this typhoon. The typhoon was named FALCON. The classes were suspended because of heavy rain and flood.


          All students were very happy because they can play and sleep well. Other students were gallivanting to the areas that have flood. They took a bath under the the rain and other swam into the flooded area. Many students enjoyed the ! week vacation because it often when the classes were suspended in 1 week.


         We experienced heavy rain, thunder and lightning. We were all scared at this time. In times of calamity  we should not panic and we should think positive. We should help each other so that all will be safe. Let us thanks God for the guidance,care and for all the blessings He had given us.