masuul yare

1
UNIVERISTY OF SOMALIA
- - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - -
College of Engineering and Computer Science
COURSE WEB DEVELOPMENT WITH PHP
---------------------------------------------
Class CS12C
Course code N/A
INTRODUCTION TO WEB DEVELOPMENT
First week
Course time
REVEALING THE SECRET OF WEB DESIGN
03-09-2016
01 00 -4 00
Lecturer Mohamed-Nur Hussein Abdullahi Hame
(M.Sc in CSE)
You can download the course contents from
www.iM252.com/uniso/courses/php
2
COURSE OBJECTIVES
THE GOALS OF THE COURSE TO BE ACHIEVED

• To understand website terms
• Differencing between web, site and website
• Differencing between a web designer and web
  developer
• Defining web and website jobs
• To plan a new site requirements
• How to plan and design a new site
• To organize the site before designing it (site
  map)
• How to design the visual design of the website.

3
WEB DEVELOPMENT WITH PHP COURSE
WELCOME TO THE
4
WEB SITE DESIGN
DEFINING THE WEB TERMS

• What is a web site, web or site?
• A website is an address (location) on the World
  Wide Web that contains your web pages. Basically,
  a website is your personal online communications
  connection to the rest of the world.
• A website is totally different from any other
  type of publishing, advertising or communications
  media.

5
WEB DESIGNER OR WEB DEVELOPER?
YOU CAN BE BOTH, TWO JOBS - ONE GOAL
6
WEB SITE DESIGN
STEPS OF WEB DESIGN

• Once you have decided to establish a web site
  there are three steps to getting it online.
• 1 - Get a domain name - This is your
  personal/private address on the Web.
• 2 - Find a web hosting service- Here is where
  your website will reside. Remote hosting vs.
  colocation vs. Private Web Hosting.
• 3 - Design, build and upload your website - The
  process of website creation.

7
BEFORE WE GET STARTED
WE HAVE TO ANALYSE THE NEW WEBSITE

• What sites are you working on?
• Whats the purpose of your site?
• What audience(s) are you trying to reach?

8
SITE PLANNING
IF YOU FAIL TO PLAN, YOU PLANNED TO FAIL
Design your new site
Know your own abilities and resources
Analyze your audience
Map the current site
Analyze the competition

• Determine site goals

9
ORGANIZING THE SITE STRUCTURE
ORGANAZING THE SITE WITH SITEMAP FIGURES

• There are three main elements in the organization
  of a web site. They are
• 1 - Structure The form of your web site and its
  navigation
• 2 - Content The substance of your web site
• 3 - Layout The theme or method of presenting
  your web site

10
TYPES OF SITE ORGANIZATION
Hierarchical, Linear, Linear reciprocal, Random,
and database navigation
11
SITE MAP
DEFINING THE ROADS

• All the pages, all the links of the current site.
• Boxes for pages, lines for links
• Shows how deep your site is

12
HIERARCHICAL ORGANIZATION
THE MOSTLY USED SITE NAVIGATION

• A clearly defined home page
• Navigation links to major site sections
• Often used for commercial and corporate Web sites

13
HIERARCHICAL ORGANIZATION
NOT TOO SHALLOW NOR TOO DEEP

• Be careful that the organization is not too
  shallow nor too deep.
• Too many choices a confusing and less usable web
  site
• User Interface Three Click Rule

???? ???? TOO DEEP
???? TOO SHALLOW ????
14
LINEAR ORGANIZATION
LINK AFTER ONE

• A series of pages that provide a tutorial, tour,
  or presentation.
• Sequential viewing

15
LINEAR RECIPROCAL LINKS
LINKS LIE IN EVERY PAGE OF THE WEBSITE

• Reciprocal navigation allows the visitor to move
  back and forth between a series of pages.
• Set-up your links with a start page an end page
  and links tying the pages together that lie
  between them.

16
RANDOM ORGANIZATION
UNCLEAR PATH

• Sometimes called Web Organization
• Usually there is no clear path through the site
• May be used with artistic or concept sites
• Not typically used for commercial sites.

17
DATA BASE NAVIGATION
USED FOR LARGE AMOUNTS OF DATA

• The database or grid design is made up of
  multiple divisions and each division has its own
  structure.

18
ITS YOUR TURN
SKETCH THE LAYOUT AND SITE-STRUCTURE WITH
DEFINING THE TYPE OF ORGANIZATION USED
1- Team A Laashin.com 2- Team B
Newhorizon.so 3- Team C Somalitalk.com 4- Team
D Bbcsomali.com
WITHIN 8 MINUTES
19
VISUAL DESIGN
CONSISTENCY (UNIFORMITY) IS A GOOD GOAL FOR ANY
DESIGN PSYCHOLOGY OF COLOR
20
CONCLUSION
TOP 10 WEBSITE DESIGN TIPS - CHECKLIST

1. Know your audience
2. Keep web pages short
3. Limit the amount of text
4. Avoid large images
5. Use web safe colors
6. Clearly identify all links
7. Check spelling
8. Use a site map or directory page
9. Update and check all links
10. Include contact information

21
SO, ARE YOU GOING TO BUILD YOUR OWN WEBSITE?
JUST TAKE CARE OF THIS COURSE, YOU CAN AND YOU
WILL!
22
THANK YOU!
23
ANY QUESTIONS?
24
References

• Site Map generic Site example www.ku.edu/acs/docs
  /wkshop/webdesign
• Color Theory from Poynter.org www.poynter.org/spe
  cial/colorproject/colorproject/color.html
• Cultural color meanings from About.com
  webdesign.about.com/library/weekly/aa070400c.htm
• Color study resources from Sanford
  www.sanford-artedventures.com/study/g_color.html

25
ABOUT THE LECTURER
Mohamed-Nur Hussein Master of science in
Computer Science Engineering _at_ Daffodil
International
(Dhaka Bangladesh) ----------------------------
--------------------- Freelancer and website
designer Part-time lecturer at University of
Somalia (UNISO) ---------------------------------
----------------
ANY FEEDBACK OR SUGESSIONS?
FEEL FREE TO CONTACT ME
? PLEASE LET ME KNOW IF YOU HAVE ANY FEEDBACK
REGARDING THE COURSE. THANKS!
252 69 5 713333
--------------------------------------------------
--------------------------------------------------
---------------------
252 62 5 713333
252 61 5 713333
www.im252.com
im252.com_at_gmail.com
_at_mohanur252
Facebook.com/hame2011 Facebook.com/im252
--------------------------------------------------
--------------------------------------------------
------------------------------
Recommendation The following fonts are required
for better presentation resolution (Aachen BT,
Franklin Gothic Demi Cond, Rockwell, Calibri,
Calibri Light (Headings), Arial)