introduction to website design

Introduction to Website DesignPrepared by Anas Khaitou26/12/2012

About Me :D

1) My Name is Anas Khaitou2) Gradated From SVU 2010 BIT specification3) Preparing for master about Internet Quality in

SVU, MQM specification4) Web supervisor at E-lcom ISP5) Author of book Lean Drupal in Arabic6) 7 years experts as web design and

programming using PHP, CMS, frameworks ..etc.7) Works with more than 7 companies inside and

outside Syria8) Lunch and programming more than 50 websites

inside and outside Syria

About Me :D

INDEX

History of internet Benefits of having

website What is the Web What is HTTP What is HTML Web browser

history How web browser

works

Website types What is website

design Website

programming language

Start a website HTML example End

The History of the Internet

1969: Arpanet On the October 29, 1969, computers at Stanford and UCLA connected for the first time

1972: CYCLADES: France began its own Arpanet-like project in 1972, called CYCLADES. the host computer should be responsible for data transmission rather than the network itself.

1973: The first trans-Atlantic connection and the popularity of emailing

The History of the Internet

1974: The beginning of TCP/IP which would have no central control and would work around a transmission control protocol

1990: World Wide Web protocols finished The code for the World Wide Web was written by Tim Berners-Lee, based on his proposal from the year before, along with the standards for HTML, HTTP, and URLs.

1991: First web page created 1993: Mosaic – first graphical web browser

for the general public

Benefits of Having a Website

1. You stop being invisible.

2. You create another sales tool

3. Two-Way Communicative Marketing

4. Cheap Market Research

5. Improve credibility

What is WWW

The term WWW refers to the World Wide Web or simply the Web.

The World Wide Web consists of all the public Web sites connected to the Internet worldwide, including the client devices that access Web content.

The World Web is based on these technologies:

1. HTML - Hypertext Markup Language 2. HTTP - Hypertext Transfer Protocol 3. Web servers and Web browsers

What is HTTP

HTTP - the Hypertext Transfer Protocol - provides a standard for Web browsers and servers to communicate.

HTTP is an application layer network protocol built on top of TCP.

HTTP clients (such as Web browsers) and servers communicate via HTTP request and response messages.

The three main HTTP message types are GET, POST, and HEAD.

What is HTML

HTML stands for Hypertext Markup Language.

HTML is used to define the structure and layout of a Web page

HTML used tags that have attributes.

Tim Berners-Lee was the primary author of html, however, you do the results.

Web browsers History

A browser is a software application for retrieving, presenting and traversing information resources on the World Wide Web

The first web browser was invented in 1990 by Tim Berners-Lee. It was called WorldWideWeb

1993 Mosaic released 1994 Netscape 1995 Internet Explorer 1996 Opera 1998 Mozilla 2003 Safari 2004 Firefox 2008 Google chrome

Web browsers History

How Browsers Work

Request a page from server

Request pass through the network using a protocol like http

The resource is usually an HTML document

How Browsers Work

User

Server

Google.com

We browserDNS Server

Google.com

192.168.1.4

192.168.1.4

HTML & other files

Web Page

HTML Parser

The job of the HTML parser is to parse the HTML markup into a parse tree.

The vocabulary and syntax of HTML are defined in specifications created by the W3C organization.

HTML Example

Website programming languages

There are a lot of programming languages used for website design.

Languages are classified as: Client – Side Server – Side

Client side

Client-side is used to make Web pages change after they arrive at the browser.

It is useful for making pages a bit more interesting and user-friendly.

Examples: HTML – Java Script

Server side

Server-side tends to be used for allowing users to have individual accounts and providing data from databases

PHP and ASP.net are the two main technologies for server-side scripting.

Website Type

This classification is based on the technology running the website.

This method decides the way the website deals with its data, content and provides an interface to its visitors.

According to the Building Method we have two types:I. Static websitesII. Dynamic websites

Static website

AdvantagesFlexibility is the main advantage of a

static siteEvery page can be different if desired

Disadvantages Update the content Scalability

Dynamic website

AdvantagesConnect to databasesCreate a content management system

Disadvantages The design of a dynamic site is more

fixed than a static one Costs are higher initially than for a static

site.

Static Vs Dynamic

STATIC SITE

1. fixed amount of pages2. information is

presented in HTML

3. The content on a static webpage will never change unless the change is applied manually

DYNAMIC SITE

1. Unlimited amount of pages

2. Information is presented in programming languages and DB

3. The content generally changes every time the page loads with you having to manually make those changes.

Website Type

Dynamic Websites Types

Adding interactivity to a web site attracts user attention and tends to brings them to the website again.

Interaction on a website can be classified in two categories:

1. Single User Interaction2. Multi-User Interaction

Normal is Boring

Single User Interaction

display the content in a way which would attract users to spend more time on a website.

Use flash and Jquery to represent your website

Multi-User Interaction

Allowing site visitors to interact with each other Most common examples are blogs, polls, discussions, sharing presentations, chat site, images and links etc.

What is Website design

website design is planning, creation and updating websites.

Website design involves also information architecture, website structure, website layout, colors, and fonts well as icons design.

building the front-end of a web page.