One of my guest speaker sessions at universities

1. Web Design & Development
Asif Hussain
1Asif Hussain

2. Asif Hussain
2Asif Hussain
• Project Manager & Lead Business Analyst
Sapphire Consulting Services
[www.sapphirecs.net]
http://pk.linkedin.com/in/asifhossain
Skype: aasifhussain
• Bahria University [BE, Computer]
• CBM (IoBM) [MBA, Marketing ]
• PMP & Oracle Siebel CRM Certified
• CRM , Online Stock Trading & Islamic Financial Consultant

3. 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

4. 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

5. 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

6. 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

7. 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

8. Database Technology
• Apache Derby
• DB2 (IBM proprietary)
• Firebird
• Microsoft SQL Server
• MySQL
• Oracle
• PostgreSQL
• SQLite
• Sybase
8Asif Hussain

9. 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

10. 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

11. 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

12. Website Design Process
Production
Design Refinement
Design Exploration
Discovery
… followed by implementation & maintenance
[this set of slides from James Landay]
12Asif Hussain

13. Web Design Process
13Asif Hussain

14. 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

15. Design Process:
Design Exploration
Production
Design Refinement
Design Exploration
Discovery
Generate multiple
designs
* visualize solutions to
discovered issues
* information & navigation
design
* early graphic design
* select one design for
development
15Asif Hussain

16. Design Process:
Design Refinement
Production
Design Refinement
Design Exploration
Discovery
Develop the design
* increasing level of detail
* heavy emphasis on
graphic design
* iterate on design
16Asif Hussain

17. 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

18. 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

19. Site Maps
• High-level, coarse-grained view of entire site
19Asif Hussain

20. Storyboards
• Interaction sequence, minimal page level detail
20Asif Hussain

21. Schematics
• Page structure with respect to information & navigation
21Asif Hussain

22. Mock-ups
• High-fidelity, precise representation of page
22Asif Hussain

23. What makes a website good?
• Graphic design?
• Design criteria?
• Subjective
23Asif Hussain

24. 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

25. 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

26. Creating a Web Site
1. Choose a domain name
2. Register with a Registrar
3. Choose a hosting service
4. Tell Registrar the IP address
5. Create web content
6. Store (publish) onto hosting server (FTP)
7. Submit new site to search engines
26Asif Hussain

27. 12 Principles of good web design
1. Visitor-centric, clear purpose
2. Progressive disclosure
3. Displays quickly
4. Browser compatible
5. Intuitive navigation
6. Spelling, grammar, writing
7. Secure (eCommerce)
8. Attractive design, easy to read
9. 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

28. Creating your Web Site
Technologies & 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

29. Markup Languages - HTML
Derived from SGML
(Standard Generalized Markup Language )
• HyperText Markup Language
29Asif Hussain

30. HTML Fundamentals
• Clear text, case insensitive
• Ignores white space
• Comprised of tags <tag />
• Open tags and closed tags
30Asif Hussain

31. 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

32. HTML – Fundamentals
Document Structure
Header
Body
< / HTML>
< HTML >
32Asif Hussain

33. HTML – Fundamentals
Basic 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

34. HTML - Fundamentals
header
<body>
Hello world
</body>
34Asif Hussain

35. HTML - Fundamentals
header
<body>
Mike Tyler
PO Box 190387
Hungry Horse, Mt 59919
</body>
35Asif Hussain

36. HTML - Fundamentals
header
<body>
<b>Mike Tyler</b><br>
PO Box 190387<br>
Hungry Horse, Mt 59919<br>
</body>
36Asif Hussain

37. HTML - Fundamentals
header
<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

38. HTML - Fundamentals
header
<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

39. HTML - Fundamentals
header
<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

40. HTML - Fundamentals
header
<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

41. HTML - Fundamentals
41Asif Hussain

42. HTML - Fundamentals
ANCHORS (Hypertext Link)
<A href=“url” attributes>Displayed text </A>
Attributes
• NAME = “text”
• TITLE = "text"
• TARGET = “frame_name|window_name”
42Asif Hussain

43. HTML – Fundamentals
Hypertext 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

44. HTML – Fundamentals
Hyperlink Colors
<BODY LINK=color, VLINK=color, ALINK=color >
<BODY LINK=“blue”, VLINK=“purple”, ALINK=“red” >
<BODY LINK=“#0000FF”, VLINK=“#FF00FF”, ALINK=“#FF0000” >
44Asif Hussain

45. HTML – Fundamentals
Colors
• Cathode Ray Tubes (CRT)
45Asif Hussain

46. HTML – Fundamentals
Colors
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

47. HTML – Fundamentals
Headings
• 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

48. HTML – Fundamentals
Lists
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

49. HTML – Fundamentals
Lists
Unordered list
• apples
• bananas
• grapes
• strawberries
Ordered list
II. apples
III. bananas
IV. grapes
V. strawberries
49Asif Hussain

50. HTML – Fundamentals
Tables
<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

51. HTML – Fundamentals
Tables
51Asif Hussain

52. HTML – Fundamentals
Tables
• BORDER=value
• ALIGN=left|right|center
• CELLSPACING=value
• CELLPADDING=value
• WIDTH=value|percent
52Asif Hussain

53. HTML – Fundamentals
Tables
<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

54. HTML – Fundamentals
Tables
Student Grade
Tom B-
Sue A+
Class Grades
54Asif Hussain

55. HTML – Fundamentals
Tables
rowspan and colspan
55Asif Hussain

56. 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

57. HTML – Fundamentals
Student Grades
Student Grade
Tom
A
Sue
57Asif Hussain

58. Screen Compatibility
1280 x 1024
1024 x 768
800 x 600
640 x 480
58Asif Hussain

59. HTML – Fundamentals
Tables
• Tables are frequently used to layout the basic web page design.
640
1280
59Asif Hussain

60. HTML – Fundamentals
Frames
• 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

61. Asif Hussain 61
HTML – Fundamentals
Basic Frames
Banner
Menu Content
Footer

62. Asif Hussain 62
HTML – Fundamentals
Basic Frames
Basic tags
• <frameset> ..</frameset>
• <frame />
• <noframes> .. </noframes>
Basic attributes
• cols = “values”
• rows = “values”
• name = “frame_name”
• src = “frame_source(url)”
• target = “frame_name”

63. Asif Hussain 63
HTML – Fundamentals
Basic Frames
Banner
Menu Content
Footer

64. HTML – Fundamentals
Basic Frames
<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

65. HTML – Fundamentals
Basic Frames
<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

66. HTML – Fundamentals
Basic Frames
FRAMESET attributes
• FRAMEBORDER="yes|no"|0
• BORDER=pixels
• BORDERCOLOR="#hexcolor|colorname"
< frameset rows="80,*,80" border=2 bordercolor=“red" >
..
..
</frameset>
66Asif Hussain

67. HTML – Fundamentals
Basic Frames
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

68. HTML – Fundamentals
Floating Frames
• Floating frames allow you to create a frame
within the boundaries of a page
Basic Frames Floating Frames
68Asif Hussain

69. HTML – Fundamentals
Floating Frames
<IFRAME attributes ></IFRAME>
Attributes
• SRC=URL
• HEIGHT=pixels|percent,
• WIDTH=pixels|percent
• HSPACE=pixels
• VSPACE=pixels
• ALIGN=left|right
• FRAMEBORDER=0
69Asif Hussain

70. HTML – Fundamentals
Floating Frames
<IFRAME
NAME=“frame_name”
ALIGN="right"
HSPACE=“40”
VSPACE=“40”
WIDTH="75%"
HEIGHT=“150”
FRAMEBORDER=0
SRC=http://www.mysite/mypage.htm >
</IFRAME>
70Asif Hussain

71. HTML – Fundamentals
Hypertext 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

72. HTML – Fundamentals
DIV and ILAYER
• Allows you create a position-able block of
content.
Content
positioned
within this
block
72Asif Hussain

73. HTML – Fundamentals
DIV
<div attributes> content </div>
attributes
• ID=“name”
• STYLE = “style parameters re: CSS”
73Asif Hussain

74. HTML – Fundamentals
DIV
< 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

75. HTML – Fundamentals
DIV
contentc content
content
content
content
content
content
75Asif Hussain

76. <div style="position:absolute; left:100px;
top:100px; width:100px; height:100px;
background-color:#ffffff; ">
HTML – Fundamentals
DIV
76Asif Hussain

77. HTML – Fundamentals
CASCADING 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

78. HTML – Fundamentals
CASCADING STYLE SHEETS (CSS)
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

79. HTML – Fundamentals
CASCADING STYLE SHEETS (CSS)
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

80. HTML – Fundamentals
CASCADING STYLE SHEETS (CSS)
Embedded
<head>
<title> My Page Title </title>
<style TYPE="text/css >
<! - -
element.class { property:value; }
element.class { property:value; }
- - >
</style>
</head>
80Asif Hussain

81. HTML – Fundamentals
CASCADING STYLE SHEETS (CSS)
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

82. HTML – Fundamentals
CASCADING STYLE SHEETS (CSS)
/* 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

83. HTML – Fundamentals
CASCADING STYLE SHEETS (CSS)
Inline
Styles can be placed within individual elements
<font style=“color:red; font-face:ariel;” >
83Asif Hussain

84. HTML – Fundamentals
CASCADING STYLE SHEETS (CSS)
Inline > Embedded > Linked
Defining the style of your text
• linked -> font-family:arial,georgia;
• embedded -> color:navy;
• inline -> font-size:2pt;
84Asif Hussain

85. HTML – Fundamentals
CASCADING STYLE SHEETS (CSS)
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

86. HTML – Fundamentals
Images
<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

87. HTML – Fundamentals
Using 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

88. HTML – Fundamentals
Other 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

89. 89Asif Hussain
A
Q