|ntroduct|on to webs|te des|gn|ng |ntroduct|on to webs|te des|gn|ng

W A good website must make the best use oI

the inIrastructure on the web, to design
such a site , you need to have an
understanding oI the web medium.
1echnical infrastructure
Elements of the web
Web Sites.
W A set oI interconnected WebPages
W Displaying related inIormation on a speciIic subject
W Homepage is a starting point , an overview oI the
contents oI the site, links to rest oI the pages
Web Documents.
W nIormation on www is stored in the web documents
residing on servers
W Web documents / Web page is electronic document that
stores a set oI related inIormation
W HTML document
acilities ruvided by the web
W ommunity building
W Resource sharing
W Entertainment
W Business transactions
Resource sharing:
W Excellent medium Ior people in search oI
inIormation, and Ior those how are sharing
inIormation
W Web is bigger & Iaster then any library or
encyclopedia.
W What are the advantages oI publishing on the web?
ntertainment
W The Iield oI entertainment is one oI the Iastest
growing categories oI the web usage.
W Extensive resource oI multimedia music, videos,
animation, Iilm industry, gaming
ommunity building:
The web provides a convenient mechanism Ior the
People across the world to communicate and share
inIormation
Email, web chat, M,
Video conIerencing
Business transaction:
The web is ideal medium to attract potential
customers
E-commerce websites
1yes uf websites
$tatic website:
W t simply presents pre-deIined inIormation to the user
W Just like a printed newspaper
W oded in HTML
W No database
Example: Lahore school oI economics
W ynamic websites:
W The web page content changes automatically
W t may accept a user's input and respond to the request
(task based).
W Database at the backend
W oded in JSP,ASP, F ML
Example: online banking, social networking,
e-learning, email sites
ommerce:
W Any business transactions on the web
W An e commerce sit can be a commercial organization,
educational institution, government organization or
individual
W Providing a product or service on the web
www.ebay.com,www.dell.com
orporate:
W A orporate website is a site that serve as the
strategic interIace on the web Ior the purpose oI
promoting its products & services
W Market inIormation Ior investor and share holders
W Data Ior employees
W nIormation on products & services oIIered
W Example:
W www.britishcouncil.org
W www.Iedx.com
!ortal:
W A portal is web site that gathers bits & pieces
oI inIormation Irom diIIerent sources.
W The user can search Ior any type oI
inIormation Irom a single location.
ommon features.
W Search engine, email services
W News, weather inIormation,
W Advertising
W List oI sub-sites & links.
examples: http://student.lahore school.edu.pk, www.msn.com
!ersonal:
W A personal web site is a site built up by an
individual Ior purpose oI sharing inIormation
with others on web.
Example: www.atiIaslam.com
LCommerce ] L8us|ness
(828 82C C2C C28)
8uslness Models
eCommerce
W commerce
8uylng and selllng producLs or servlces
W eCommerce
8uylng and selllng producLs and servlces
elecLronlcally
W mode|s
828 (8uslness Lo 8uslness)
82C (8uslness Lo Consumer)
C2C (Consumer Lo Consumer)
C28 (Consumer Lo 8uslness)
828
W 8usiness to 8usiness {828)
en a buslness sells producLs and servlces Lo
cusLomers o are prlmarlly oLer buslnesses
Lyplcally a manufacLurersuppller relaLlonslp
!,5er su55lier
828
82C
W 8usiness to consumer {82c)
en a buslness sells producLs and servlces Lo
lndlvlduals
MosL consumers deal dlrecLly lL a cosen
buslness on Le lnLerneL
Some Lroug emarkeLplaces llke ebay
82C Po do you geL Lo Le company?
le Po do companles aLLracL us?
W MarkeLlng Mlx 1ools
seL of markeLlng Lools a company uses Lo pursue
lLs markeLlng ob[ecLlves ln reaclng and aLLracLlng
poLenLlal cusLomers
W 8eglsLerlng lL searc englnes
W Cnllne ads
W vlral markeLlng
W AfflllaLe programs
82C Po do you geL Lo Le company?
Po do companles aLLracL cusLomers?
vlral markeLlng
W encourages users of a producL or servlce supplled by a
82C buslness Lo encourage frlends Lo [oln ln as ell
W eg bluemounLalncom
rovldes a llnk so LaL Le reclplenL can send an ecard back Lo
Le sender
82C Po Lo pay?
W credit cords
name
credlL card number
explry daLe
does noL requlre Le
card older's slgnaLure!
inoncio/ cybermediory
lnLerneLbased company LaL makes lL
easy for one person Lo pay anoLer person
or organlzaLlon over Le lnLerneL
eg ayal (paypalcom)
CreaLe an accounL lL personal credlL card and
banklng lnformaLlon
1o pay money
Co Lo Le ayal slLe
LnLer Le amounL
LnLer lnformaLlon of Le reclplenL
C2C
W coosomettocoosomet
lndlvlduals selllng and buylng dlrecLly lL eac
oLer vla a Web slLe
MosLly ln form of aucLlons
W 1o maln forms of LransacLlons
laceLoface
8uyers pay Lo bank + sellers mall Le lLems LrusLorLy?
C28
W coosometto8osloess
Consumers (lndlvlduals) speclfy Lelr needs Lo companles and Le
companles offer producLs Lo Lem
W osslble?
?ou speclfy your experLlse and your expecLaLlons (by posLlng your resume
onllne) Some company ldenLlfles you and offers you a [ob
8everse aucLlon
?ou speclfy your needs
Companles compeLe Lo obLaln buslness
eg LLp//prlcellnecom/


Lxerclse
hjlj 00 l0[0tI
W Analysis
W Design
W Development
W mplementation
W Evaluation & Maintenance
I)IlI
efining the site ubjectives
$ite functions & features
W DeIine the Ieatures that allow users to perIorm
various useIul Iunction.
W What unique Ieature a site can oIIer?
W What would enhance user perIormance on the site?
W What dose a user expect Irom the site?
Book ordering Ieature, prices oI a book, ordering Iorm
Analysls ueslgn uevelopmenL lmplemenLaLlon
LvaluaLlon
MalnLenance
efining the media elements
W Add a visual appeal(images, audio, video and
animation)
W dentiIy the concepts that can be complimented
through the use oI media elements
W Bandwidth limitations
!roject Magnitude:
W DeIine the website magnitude or the scope oI
the project.
W The wider the scope more resource required
Ior its development
W Flower shop website/ nternational human rights
organization website (range oI inIluence)
dentify the site attributes:
W #eal world experience.
W Study the real characteristics oI real world entity to
identiIy the attributes or Ieatures that can be
incorporated in the website
W ook cover
W Task Analysis
W dentiIy the steps involved in perIorming various
tasks on a website
W Provide shortcuts to Irequently perIormed activities
nalyzing other similar sites.
W Explore other existing similar websites
W Does not mean replicate existing websites
W SuccessIul websites / unsuccessIul websites
dentifying the 1arget udience
Week z AerIvIrIes Week z AerIvIrIes
W lve oo exomple of cotpotote webslte llst J Jlstloqolsbloq feotote tbot tbls slte
ptovlJes to web osets?
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
na|yze the requ|rement of your webs|te
W ueflne Le ebslLe Loplc u8L
W efloe slmllot websltes totqet ooJleoce
W efloe tbe slte objectlves
W efloe tbe slte sttoctote (lloeot nletotcbol web)
W 5lte oovlqotloool scbeme
W 5obmlt o popet Jeslqo of yoot webslte sbowloq tbe loyoot plocemeot of coottols
vlsool elemeots
W ubmit o report on 19
th
I- Wednesday Sec I 20
th
I- 1hursday Sec G
W lmporLanL noLe no laLe submlsslon of asslgnmenLs and reporL lll be accepLed
W ;D - 1 LLC1u8L 1234 on 19 !an Wednesday Sec l 20 !an 1ursday Sec C
W no qulz reLake
W lve oo exomple of cotpotote webslte llst J Jlstloqolsbloq feotote tbot tbls slte
ptovlJes to web osets?
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
na|yze the requ|rement of your webs|te
W ueflne Le ebslLe Loplc u8L
W efloe slmllot websltes totqet ooJleoce
W efloe tbe slte objectlves
W efloe tbe slte sttoctote (lloeot nletotcbol web)
W 5lte oovlqotloool scbeme
W 5obmlt o popet Jeslqo of yoot webslte sbowloq tbe loyoot plocemeot of coottols
vlsool elemeots
W ubmit o report on 19
th
I- Wednesday Sec I 20
th
I- 1hursday Sec G
W lmporLanL noLe no laLe submlsslon of asslgnmenLs and reporL lll be accepLed
W ;D - 1 LLC1u8L 1234 on 19 !an Wednesday Sec l 20 !an 1ursday Sec C
W no qulz reLake