web design & development

Web Design & DevelopmentAsif Hussain

1Asif Hussain

Asif Hussain

2Asif Hussain

• Project Manager & Lead Business AnalystSapphire Consulting Services [www.sapphirecs.net]http://pk.linkedin.com/in/asifhossainSkype: aasifhussain

• Bahria University [BE, Computer]• CBM (IoBM) [MBA, Marketing ]• PMP & Oracle Siebel CRM Certified• CRM , Online Stock Trading & Islamic Financial Consultant

http://pk.linkedin.com/in/asifhossain

http://pk.linkedin.com/in/asifhossain

Asif Hussain 3

Website Design & Development

• What is HTML?• What is CSS?• How Do I Set Up a Web Host?• Website design process• What makes a website good?• Response Time

Web development

• Web development is a broad term for the work involved in developing a web site for the Internet (World Wide Web) or an intranet (a private network).

• This can include – web design, – web content development, – client liaison, – client-side/server-side scripting, – web server – network security configuration,– e-commerce development.

4Asif Hussain

Web development

• However, among web professionals, "web development" usually refers to the main non-design aspects of building web sites: writing markup and coding.

• Web development can range from developing the simplest static single page of plain text to the most complex web-based internet applications, electronic businesses, or social network services.

5Asif Hussain

Client Side Coding• Ajax Asynchronous JavaScript provides new methods of using JavaScript, and other

languages to improve the user experience.• Flash Adobe Flash Player is an browser plugin• JavaScript is a ubiquitous client side platform for creating and delivering rich Web

applications that can also run across a wide variety of devices.• JQuery Cross-browser JavaScript library designed to simplify and speed up the client-

side scripting of HTML.• Microsoft Silverlight Microsoft's browser plugin that enables animation, vector

graphics and high-definition video playback, programmed using XAML and .NET programming languages.

• Real Studio Web Edition is a rapid application development environment for the web. The language is object oriented and is similar to both VB and Java. Applications are uniquely compiled to binary code.

• HTML5 and CSS3 Latest HTML proposed standard combined with the latest proposed standard for CSS natively supports much of the client-side functionality provided by other frameworks such as Flash and Silverlight

6Asif Hussain

Server Side Coding• ASP (Microsoft proprietary)• ColdFusion (Adobe proprietary, formerly Macromedia, formerly

Allaire)• CGI• Java, e.g. Java EE or WebObjects• Perl (open source)• PHP (open source)• Python (open source)• Real Studio Web Edition• Ruby (open source)• Websphere (IBM proprietary)• .NET and .NET MVC Frameworks (Microsoft proprietary)

7Asif Hussain

Database Technology

• Apache Derby• DB2 (IBM proprietary)• Firebird• Microsoft SQL Server• MySQL• Oracle• PostgreSQL• SQLite• Sybase

8Asif Hussain

What is HTML?

• Hyper Text Markup Language. – This is the basic format for the scripting language

that is used to construct the Web. – Here is an example of what the current HTML

code would look like if you were adding an image. • <img src="image_name.jpg" width="251"

height="143" />

9Asif Hussain

What is CSS?

• CSS stands for Cascading Style Sheets. • It is a style sheet language used to describe the design

elements of the websites such as the layout, color, font size, etc.

• It can allow multiple pages to share the same formatting. • This is what it would look if you wanted to define the

height, width and background color of a specific div tag. .div_tag_name{ background-color: #000000; width: 500px; height: 500px; }

10Asif Hussain

How Do I Set Up a Web Host?

• A web hosting service is a type of Internet hosting service that allows individuals and organizations to make their own website accessible via the World Wide Web.

11Asif Hussain

http://en.wikipedia.org/wiki/File:Paris_servers_DSC00190.jpg

Website Design Process

Production

Design Refinement

Design Exploration

Discovery

… followed by implementation & maintenance

[this set of slides from James Landay]

12Asif Hussain

Web Design Process

13Asif Hussain

Design Process: Discovery

Assess needs* understand client’s

expectations* determine scope of

project* characteristics of

users* evaluate existing site

and/or competition

Production

Design Refinement

Design Exploration

Discovery

14Asif Hussain

Design Process: Design Exploration

Production

Design Refinement

Design Exploration

DiscoveryGenerate multiple designs

* visualize solutions to discovered issues

* information & navigation design

* early graphic design* select one design for

development

15Asif Hussain

Design Process: Design Refinement

Production

Design Refinement

Design Exploration

DiscoveryDevelop the design

* increasing level of detail* heavy emphasis on

graphic design* iterate on design

16Asif Hussain

Prepare design for handoff

* create final deliverable* specifications, guidelines,

and prototypes* as much detail as

possible

Design Process: Production

Production

Design Refinement

Design Exploration

Discovery

17Asif Hussain

Artifacts of Design Practice

• Designers create representations of sites at multiple levels of detail

• Web sites are iteratively refined at all levels of detail

Site Maps Storyboards Schematics Mock-ups

18Asif Hussain

Site Maps• High-level, coarse-grained view of entire site

19Asif Hussain

Storyboards• Interaction sequence, minimal page level detail

20Asif Hussain

Schematics• Page structure with respect to information & navigation

21Asif Hussain

Mock-ups• High-fidelity, precise representation of page

22Asif Hussain

What makes a website good?

• Graphic design?• Design criteria?• Subjective

23Asif Hussain

Response Times:The 3 Important Limits

• 0.1 second is the limit for having user feel system is reacting instantaneously

• 1.0 second is the limit for user’s flow of thought to stay uninterrupted (no feedback necessary, but user will lose feeling of operating directly on data)

• 10 seconds is limit for keeping user’s attention focused on page (for longer delays, percent-done progress indicator should be used)[Nielsen 1997, Miller 1968, Card et al. 1991]

24Asif Hussain

Domain Registrar

• A company that provides domain name registration services for a fee.

• Maintain database which maps domain names to IP’s

• Propagate new domain name/IP address information across the internet

25Asif Hussain

Creating a Web Site

1. Choose a domain name2. Register with a Registrar3. Choose a hosting service4. Tell Registrar the IP address5. Create web content6. Store (publish) onto hosting server (FTP)7. Submit new site to search engines

26Asif Hussain

12 Principles of good web design1. Visitor-centric, clear purpose2. Progressive disclosure3. Displays quickly4. Browser compatible5. Intuitive navigation6. Spelling, grammar, writing7. Secure (eCommerce)8. Attractive design, easy to read9. Cultural bias? (Regional? Domestic? International?)10. No technical problems (broken links, buggy scripts)11. Maintainable (separate content from style)12. Search Engine Accessible

27Asif Hussain

Creating your Web SiteTechnologies & Tools

• Markup Languages – HTML, DHTML, XML, XSLT, etc....

• Cascading Style Sheets (CSS)• Scripting languages

– perl,javascript,php, etc....• Web creation and editing software

– Notepad, FrontPage, Coldfusion, Flash, Hotmetal, Site Builder, etc..

28Asif Hussain

Markup Languages - HTML

Derived from SGML (Standard Generalized Markup Language )

• HyperText Markup Language

29Asif Hussain

HTML Fundamentals

• Clear text, case insensitive• Ignores white space• Comprised of tags <tag />• Open tags and closed tags

30Asif Hussain

HTML - Fundamentals

• Open tags– <name attributes/>– <hr/>, <br/>– <img src=“url” width=‘100px’ height=’60px’/>

• Closed tags– <name attributes> stuff </name>– <b>text to be bolded</b>– <h1>level 1 heading text</h1>

• Comments < ! - - comment text -- >

31Asif Hussain

HTML – FundamentalsDocument Structure

Header

Body

< / HTML>

< HTML >

32Asif Hussain

HTML – FundamentalsBasic Structure

<html><head>

<title> The title of your html page </title><meta_tags/>

</head><body>

<! - - your web page content and markup - ->

</body></html>

33Asif Hussain

HTML - Fundamentals

header

<body>

Hello world

</body>

34Asif Hussain

HTML - Fundamentalsheader

<body>

Mike TylerPO Box 190387Hungry Horse, Mt 59919

</body>

35Asif Hussain


<body>

<b>Mike Tyler</b><br>PO Box 190387<br>Hungry Horse, Mt 59919<br>

</body>

36Asif Hussain


<body>

<font face=“Arial,Times,Courier” color=“red” size=“3”><b>Mike Tyler</b><br>PO Box 190387<br>Hungry Horse, Mt 59919<br></font>

</body>

37Asif Hussain


<body><p align=‘center’><font face=“Arial,Lucida Sans” color=“red” size=“3”><b>Mike Tyler</b><br>PO Box 190387<br>Hungry Horse, Mt 59919<br></font></p>

</body>

38Asif Hussain


<body><p align=‘center’><font face=“Arial,Lucida Sans” color=“red” size=“3”><b>Mike Tyler</b><br>PO Box 190387<br>Hungry Horse, Mt 59919<br></font></p><img src=‘http://www.myserver.com/images/mike.jpg’/>

</body>

39Asif Hussain

HTML - Fundamentalsheader<body>

<p align=‘center’><font face=‘Arial,Lucida Sans’ color=‘red’ size=3><b>Mike Tyler</b><br>PO Box 190387<br>Hungry Horse, Mt 59919<br></font></p><img src=‘http://www.domain.com/images/mike.jpg’><a href=‘biopage.html’>Read my Bio</a>

</body>

40Asif Hussain

HTML - Fundamentals

41Asif Hussain

HTML - Fundamentals

ANCHORS (Hypertext Link)

<A href=“url” attributes>Displayed text </A>

Attributes• NAME = “text” • TITLE = "text" • TARGET = “frame_name|window_name”

42Asif Hussain

HTML – FundamentalsHypertext links

Click this link

opens mywebpage.html in the window / frame named “window2”

<a href=“mywebpage.html” target=“window2” >Click this link </a>

window2

43Asif Hussain

HTML – FundamentalsHyperlink Colors

<BODY LINK=color, VLINK=color, ALINK=color >

<BODY LINK=“blue”, VLINK=“purple”, ALINK=“red” >

<BODY LINK=“#0000FF”, VLINK=“#FF00FF”, ALINK=“#FF0000” >

44Asif Hussain

HTML – FundamentalsColors

• Cathode Ray Tubes (CRT)

45Asif Hussain

HTML – FundamentalsColors

color = “red” (Browser compatibility issues)color = “#FF0000”values vary from 00 to FF (hexadecimal)0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f

Red

Green

Blue

#FF FF FF

46Asif Hussain

HTML – FundamentalsHeadings

• Renders text as a heading, the rendering depending on the level of heading selected. Headings should be automatically spaced from the body text.

<h1>Heading 1 level text</h1><h2>Heading 2 level text</h2><h3>Heading 3 level text</h3><h4>Heading 4 level text</h4><h5>Heading 5 level text</h5><h6>Heading 6 level text</h6>

47Asif Hussain

HTML – FundamentalsLists

Unordered list

<ul><li>apples</li><li>bananas</li><li>grapes</li><li>strawberries</li>

</ul>

Ordered list

<ol type=‘i’ start=‘2’><li>apples</li><li>bananas</li><li>grapes</li><li>strawberries</li>

</ol>48Asif Hussain

HTML – FundamentalsLists

Unordered list

• apples• bananas• grapes• strawberries

Ordered list

II. applesIII. bananasIV. grapesV. strawberries

49Asif Hussain

HTML – FundamentalsTables

<TABLE><CAPTION ALIGN="bottom">Class Grades</CAPTION><TR>

<TH>Student</TH><TH>Grade</TH>

</TR><TR>

<TD>Tom</TD><TD>B+</TD>

</TR><TR>

<TD>Sue</TD><TD>A-</TD>

</TR></TABLE>

50Asif Hussain


51Asif Hussain


• BORDER=value

• ALIGN=left|right|center

• CELLSPACING=value

• CELLPADDING=value

• WIDTH=value|percent

52Asif Hussain


<TABLE BORDER=1 WIDTH=“50%" CELLPADDING=“6” CELLSPACING=“2” ALIGN="RIGHT"><CAPTION ALIGN="bottom">Class Grades</CAPTION><TR>

<TH>Student</TH><TH>Grade</TH>

</TR><TR>

<TD>Tom</TD><TD>B+</TD>

</TR><TR>

<TD>Sue</TD><TD>A-</TD>

</TR></TABLE>

53Asif Hussain

Asif Hussain 54


Student Grade

Tom B-

Sue A+

Class Grades

Asif Hussain 55


rowspan and colspan

HTML – Fundamentals<TABLE BORDER=1 WIDTH="50%" CELLPADDING=5 ALIGN="center">

<TR><TD colspan=2 align='center'>

<font color="red"><b>Student Grades</b></font></TD>

</TR><TR>

<TD><b>Student</b></TD><TD><b>Grade</b></TD>

</TR><TR>

<TD>Tom</TD><TD rowspan=2>A</TD>

</TR><TR>

<TD>Sue</TD></TR>

</TABLE>

56Asif Hussain

Asif Hussain 57

HTML – Fundamentals

Student Grades

Student Grade

TomA

Sue

Screen Compatibility1280 x 1024

1024 x 768

800 x 600

640 x 480

58Asif Hussain

Asif Hussain 59


• Tables are frequently used to layout the basic web page design.

640

1280

HTML – FundamentalsFrames

• Basic Frames• Floating Frames (inline frames)• Picture in picture

• Frames let you divide a screen into windows with each window viewing a different web page.

60Asif Hussain

Asif Hussain 61

HTML – FundamentalsBasic Frames

Banner

Menu Content

Footer

Asif Hussain 62


Basic tags• <frameset> ..</frameset>• <frame />• <noframes> .. </noframes>

Basic attributes• cols = “values”• rows = “values”• name = “frame_name”• src = “frame_source(url)”• target = “frame_name”

Asif Hussain 63


Banner

Menu Content

Footer


<frameset rows=“80,*,80”><frame src=“banner.html” /><frameset cols = “25%,75%” >

<frame src=“menu.html” /><frame src=“content.html” />

</frameset><frame src=“footer.html” />

</frameset>

64Asif Hussain


<frameset rows=“80,*,80”><frame src=“banner.html” /><frameset cols = “25%,75%” >

<frame src=“menu.html” /><frame src=“content.html” />

</frameset><frame src=“footer.html” />

<noframes> <body>

Welcome to my page. <A HREF="noframes.htm">Continue</A>to the frame-free version.

</body></noframes> </frameset>

65Asif Hussain


FRAMESET attributes

• FRAMEBORDER="yes|no"|0• BORDER=pixels• BORDERCOLOR="#hexcolor|colorname"

< frameset rows="80,*,80" border=2 bordercolor=“red" >....

</frameset>

66Asif Hussain


Individual FRAME attributes

• SCROLLING="yes|no|auto" • NORESIZE • MARGINWIDTH=pixels • MARGINHEIGHT="pixels" • BORDERCOLOR="color" • FRAMESPACING="pixels" • FRAMEBORDER="yes|no"|0 • NAME=“frame_name”

67Asif Hussain

HTML – FundamentalsFloating Frames

• Floating frames allow you to create a frame within the boundaries of a page

Basic Frames Floating Frames

68Asif Hussain


<IFRAME attributes ></IFRAME>Attributes• SRC=URL• HEIGHT=pixels|percent,• WIDTH=pixels|percent• HSPACE=pixels• VSPACE=pixels• ALIGN=left|right• FRAMEBORDER=0

69Asif Hussain


<IFRAME NAME=“frame_name”ALIGN="right" HSPACE=“40” VSPACE=“40” WIDTH="75%" HEIGHT=“150” FRAMEBORDER=0SRC=http://www.mysite/mypage.htm >

</IFRAME>

70Asif Hussain

http://www.mysite/mypage.htm

HTML – FundamentalsHypertext links

<a href=“page.html” target=“blank” >Click this link </a>– Creates new window for the page

<a href=“page.html” target=“parent” >Click this link </a>– Opens page in the parent frame/wind of this frame/window

<a href=“page.html” target=“top” >Click this link </a>– Opens page in top most frame/window

71Asif Hussain

HTML – FundamentalsDIV and ILAYER

• Allows you create a position-able block of content.

Content

positioned

within this

block

72Asif Hussain

HTML – FundamentalsDIV

<div attributes> content </div>

attributes• ID=“name”• STYLE = “style parameters re: CSS”

73Asif Hussain


< DIV ID=“fred”STYLE = “POSITION:absolute|relative;

VISIBILITY:visible:hidden;Z-INDEX:number;WIDTH:width in pixels;HEIGHT:height in pixels;TOP:pixels from top of page or block;LEFT:pixels from left edge of page or block;PADDING:margin in pixels;other style attributes; “ >

content</DIV>

74Asif Hussain


contentc content

content

content

contentcontent

content

75Asif Hussain

<div style="position:absolute; left:100px; top:100px; width:100px; height:100px; background-color:#ffffff; ">


76Asif Hussain

HTML – FundamentalsCASCADING STYLE SHEETS (CSS)

• Styles enable you to define a consistent 'look' for your documents by describing once how headings, paragraphs, quotes, etc. should be displayed.

• Style sheet syntax is made up of three parts:

selector {property: value}

selector = element.class

77Asif Hussain


H1 {text-align: center; color: blue}

A {color:green; font-familiy:arial,courier; font-weight:bold;}

td { align:center; background-color:grey; border-color:red;}

div {position:absolute; visibily:hidden; margin:10px }

font {color:navy; font-size:2pt; font-face:trebuchet; }

hr {color:#ff0000; width:80%; align:center; }

table {width:80%; align:center; border:2px; padding:5px; }

78Asif Hussain


H1 {text-align: center; color: blue} H1.widget {text-align: center; color: red; font-size:80%; }

A {color:green; font-familiy:arial,courier; font-weight:bold;}A.menu {color:cyan; font-familiy:arial,courier; font-style:italics;}

td { align:center; background-color:grey; border-color:red;}td.figure { align:right; background-color:white; border-color:black;}

font {color:navy; font-size:2pt; font-face:trebuchet; }font.fred {color:blue; font-size:2pt; font-face:trebuchet; font-weight:bold; }

element.class {property:value; }

79Asif Hussain


Embedded

<head><title> My Page Title </title>

<style TYPE="text/css ><! - -element.class { property:value; }element.class { property:value; }- - ></style>

</head>

80Asif Hussain


Linked

Styles can be defined in a separate file

<font style=“property:value; “> text </font><font class=“fred”> text </font>

mystyles.css

<head><LINK REL="stylesheet" HREF="mystyles.css“ TYPE="text/css"></head>

81Asif Hussain


/* Example style sheet file (note how this comment was created) */

BODY {background: #FFFFD8; margin-top: 20}

A:link {color: #400080; background: #FFFFD8}

H1 {font-weight: bold; text-align: center; color: #006000; background: #FFFFD8; font-family: Gill Sans, Arial, sans-serif; }

font.caption {font-family: Gill Sans, Arial, sans-serif; font-style: italic; }

/* End of example style sheet file */

82Asif Hussain


Inline

Styles can be placed within individual elements

<font style=“color:red; font-face:ariel;” >

83Asif Hussain


Inline > Embedded > Linked

Defining the style of your text• linked -> font-family:arial,georgia;• embedded-> color:navy;• inline -> font-size:2pt;

84Asif Hussain


Using IDs

• IDs enable you to define a unique style which you can apply to a number of elements.

<STYLE><!–

#copyright {font-style:italic; font-size:smaller; } --> </STYLE>

<p ID=“copyright”> Any textual content </p>

85Asif Hussain

HTML – FundamentalsImages

<img src=“images/pic1.jpg” width=75px, height=50px />

<img class=“pics” src=“images/pic1.jpg” />

img.pics { width:75px; height:50px; border-width:3px }

86Asif Hussain

HTML – FundamentalsUsing Images

• Images take longer to download than text• The larger the image, the slower the page• Use optimization software• Use thumb nail images

87Asif Hussain

HTML – FundamentalsOther uses of Images

• Page background (not recommended)– <body background-image = “url” >– <body class=“background”>

– body.background { background-image:$url; }

• Table background– <table background-image=“url”>– <table class=“background”>

– table.background { backlground-image:url; }

• DIV background– <div style={ background-image:url; } >

88Asif Hussain

89Asif Hussain

A

Q&