Friday, 21 October 2011

Web Fonts (Font types)

There are many fonts used on the web and in everyday life, but the challenge is to use the most suitable font for the situation.


It's all about grabbing the viewers attention but in the correct way, you would not use a font like comic sans on formal letters or on anything formal, because comic sans is seen as quite an immature font, but you would not use such a formal font as Arial on a flyer for young children because they might not find it very catchy to read.


These rules apply not just in the real world but also a lot in the development of webpage's. The right type of font has to be chosen to fit what the webpage is 'selling'.

Document Object Model (DOM)

Document Object Model, what is this? Well lets brake it down ....

Document: In web development, when a developer refers to a document they are talking about the/a webpage.

Object: The object is like the building blocks, it makes up the basic elements of the webpage.

Model: A model is very similar to a sitemap, except instead of being a sitemap for files, this sitemap is for html code.

So an overall view... The Document is the Webpage, the Object is the pieces in the middle and the Model is the agreed plan. a DOM is a set agreed plans on how a webpage will be designed.

Programs such as CSS uses the DOM system to present HTML whereas, programs such as JavaScript use the DOM system to interact with HTML.

Saturday, 15 October 2011

Information Architecture

Information architecture or IA as it also known is sometimes an overlooked area in web design. IA can be looked at as "The art of expressing a model of information used to detail complex systems" (wikipedia). 
Tall Maple.com : Samara 2.0
There is a difference between sitemaps and IA is that IA is used to help organise much more complex systems such as library systems, used interaction database, content management systems and much more.


The information architectural system is to help its specified audiences understand easier and quickly and then locate information they are searching easier as well. The main organisation of this structure is usually hierarchical but can be found to be in different structure formats such as concentric or chaotic.

Sitemaps

To build the structure of any website developers use what is known as a sitemap. 


Six Revisions: Information Architecture 101: Techniques and Best Practices
A sitemap is a list of files which are laid out in a 'tree' format with files branching off each other, this is so developers know where everything will be.


Its a basic tool which many developers will and does use to build the basic foundation of any website.

Friday, 7 October 2011

What is CSS?

Before this lesson I had no idea what CSS was, I had never heard about it but used in on a regular basis without even knowing. CSS stands for Cascading Style Sheet, this is the language used to describe the presentation of web pages.


Back when web pages were being build, a box model layout was used to create web pages. The box model layout is a web page which is made up of boxes using a mix of CSS and HTML.

A look at HTML

Many of you may look at this post and ask .. "Well what is HTML?" well I shall answer you.
Hyper Text Mark up Language (HTML) is considered as the building blocks which build up web pages. HTML language is recognised by tags which are enclosed within angled brackets, an example would be <h1>. Most tags come in pairs, this is to signify the opening tag and closing tag, they look like <h1> </h1>. 

A simple HTML anatomy would look like this:

<!Doctype HTML>
<html>
<head>
<title> Document </title>
</head>
<body>
This is an exmaple of HTML
</body>
</html>

As you can see for every open tag there is a closed tag at the end.The <head> section is a header so that is why you would put a <title> tag inside that. The <body> tag is simply for the main bulk of information to be entered, tags such as <p> (this stands for paragraph) would be used within the <body> tags to show where each paragraph begins and ends the end of a paragraph is signified with a </p> tag.