1 / 44

Website Design

Learn the fundamentals of website design, including the Web, websites, web pages, web servers, and components like clients, servers, domains, and IPs. Understand how users think, why people visit websites, and the importance of knowing your audience.

stjohn
Download Presentation

Website Design

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Website Design Lesson1: Understanding Website Design Concepts Dr. Husam Al-Osta 2013

  2. What is the Web? • The Web known as World Wide Web(“WWW”,”W3” or “Web”) is the universe of network-accessible information, the embodiment of human knowledge. • In simple terms, The World Wide Web is a way of exchanging information between computers on the internet, tying them together into vast collection of interactive multimedia resources.

  3. What is a Website ? • Is a collection of related web pages containing images, videos or other digital assets. • Websites are hosted on at least one web server, accessible via the Internet and can be accessed through an Internet address known as a Uniform Resource Locator (URL). • Websites are accessible through the World Wide Web (WWW)

  4. What is a Web Page ? • Is a document, typically written in plain text interspersed with formatting instructions of HyperText Markup Language (HTML) • Web pages are accessed and transported with the Hypertext Transfer Protocol (HTTP), which may optionally employ encryption (HTTP Secure, HTTPS) to provide security and privacy for the user of the web page content. 

  5. What is Web Server? • Every Web site sits on a computer known as a Web server. This server is always connected to the internet. Every Web server that is connected to the Internet is given a unique address made up of a series of four numbers between 0 and 256 separated by periods.for example, 68.178.157.132 ro 68.122.35.127.

  6. Web Components • Clients and Servers • Internet Service Providers • Web Site Hosting Services • Domains Names, URL’s and IPs • Registrars

  7. Clients & Servers Clients (Browser) • Internet Explorer • Firefox • Chrome • Netscape • Opera • AOL • MSN Servers • Apache • Microsfot • Netscape • Zeus • AOL Server • JavaWebServer • Oracle

  8. Web Components • Clients and Servers • Internet Service Providers • Web Site Hosting Services • Domains Names, URL’s and IPs • Registrars

  9. Internet Service Providers (ISPs)Connect Clients to the Internet • Phone Company • Du • Etesalat • TalkTalk • Virgin Media • AOL • Sky • O2 • Basic internet connection • Dialup/DSL/Cable/Sat • Email

  10. Web Components • Clients and Servers • Internet Service Providers • Web Site Hosting Services • Domains Names, URL’s and IPs • Registrars

  11. Web Hosting ServicesConnects Web Sites to the Internet • Computer (server) farm • Web server software • Firewall hardware and software • IT services • (Backup, troubleshooting, hardware repair) • Disk space • Bandwidth / connection to internet • Routers and switchers • Email server / storage

  12. Web Components • Clients and Servers • Internet Service Providers • Web Site Hosting Services • Domains Names, URL’s and IPs • Registrars

  13. Domain’s URL’s and IPs • Domain name: The specific address of a computer on the Internet • microsoft.com • Yahoo.co.uk • Uniform Resource Locator (URL): • http://www.microsoft.com/faqs.html • Internet protocol (IP) address • 192.168.1.1

  14. Domain’s URL’s and IPs • Consider the web address : • http://www.googleguide.com/searchEngines/google/searchLeader.html • Here’s what it all means:

  15. Domain’s URL’s and IPs • Here’s a list of some common top-level domain names. Note that some sites don’t follow these conventions:

  16. Domain’s URL’s and IPs • Countries have their own two letter codes as the top level of their domain names:

  17. Web Components • Clients and Servers • Internet Service Providers • Web Site Hosting Services • Domains Names, URL’s and IPs • Registrars

  18. Domain Registrar • A company that provides domain name registration services for a fee. • Maintain database which maps domain names to IP’s • Broadcast new domain name/IP address information across the internet

  19. Why Do People Visit Websites? • To find information they need • student looking for pictures of frogs for a school project • to finding the latest stock quotes • To find the address of the nearest Chinese restaurant • To complete a task • Visitors may want to buy the latest best-seller • download a software program • participate in an online discussion

  20. How do users think? • Users don’t read, they scan • Users are impatient and insist on instant satisfaction • Users don’t make optimal choices • Users follow their instinct • Users want to have control http://www.youtube.com/watch?v=lo_a2cfBUGc

  21. Know the Users • Know your users • Expert • Regular • Occasional • Special needs • Have a clear goal for your Website • Informative • Services • Community

  22. What is the website purpose • Public servicenonprofit groups • Organizations • Government • Commercial • Educational • Editorial • Reference • Institutional promotion • Transactional • Self-promotion • Hybrid/experimental • Gaming • Entertainment • Video sharing • Photo sharing • Blogs • Communities • Social networking • Professional networking • Intranet • What if we have • Several purposes ?

  23. Planning for a website • Develop a vision for your Web site and storyboard it before construction begins • Website structure. How big/deep is the site? • User interface. How friendly and easy to use • Font design • Attractive graphical design to users • Keywords that help search engines to present your website

  24. Website Maintenance • Updates • New images/videos/news/info • Backup • Testing • Links/audio/video/navigation • Documentation • Latest updates • Latest tests • All activities

  25. Principles of good web design Main basic concepts • Alignment • Proximity • Repetition • Contrast • Navigation • Spelling • Bad spelling and bad grammar can destroy the professional effect of your web site • Use spell checker

  26. Alignment • Items on the page are lined up with each other • Two types of alignment: • Horizontal alignment • Vertical alignment • CHOOSE ONE. Choose one alignment and use it on the entire page. Don’t mix alignment • Get the text away from the left edge • Centre alignment makes finding the beginning of a new line of text much more difficult

  27. Proximity • Relationships that items develop when they are close together, in close proximity. • Be aware of the space between elements. • Group together • Space them apart

  28. Repetition • Associate elements by repeating a common stylistic feature or arrangement • Throughout a project you repeat certain elements that tie all the disparate parts together • Repetition elements that unify the entire site: • Navigation buttons • Colors • Style • Illustrations • Format • Layout • Typography

  29. Contrast • What draws your eyes onto the page. • Contrasting elements guide your eyes into the page, create a hierarchy of information, and enable you to skim through the vast array of information and pick out what you need • Contrast elements: • Style • Colors • Graphic signposts • Spatial arrangement

  30. this is an example of poor contrast another example of how contrast provides a warning contrast to make something stand out white on black is harder to read than black on white Use active white space to make your contentstand out on the page.

  31. Navigation • Where are you now? • Where can you go? • Buttons to travel around a site should be easy to find – towards the top of the page and easy to identify • They should look like navigation buttons and be well described. • The text of a button should be pretty clear as to where it’s taking you.

  32. Creating a Web Site • Choose a domain name • Register with a Registrar • Choose a hosting service • Tell Registrar the IP address • Create web content • Store (publish) onto hosting server (FTP) • Submit new site to search engines

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

  34. HTML Introduction

  35. What is HTML ? HTML is a language for describing web pages • HTML stands for  Hyper Text Markup Language • HTML is not a programming language, it is a markup language • A markup language is a set of markup tags • HTML uses markup tags to describe web pages

  36. What is HTML ? • Hyper Text Markup Language • Hypertext refers to the way in which Web pages (HTML documents) are linked together • When you click a link in a Web page, you are using hypertext. • Markup Language describes how HTML works • With a markup language, you simply "mark up" a text document with tags that tell a Web browser how to structure it to display.

  37. HTML Tags ? • HTML tags are keywords surrounded by  angle brackets like <html> • HTML tags normally come in pairs like <b> and </b> • The first tag in a pair is the start tag <i>, the second tag is the end tag </i> • Start and end tags are also called opening tags and closing tags

  38. HTML FundamentalDocument Structure < HTML > Header Body < / HTML>

  39. HTML FundamentalBasic Structure <html> <head> <title> The title of your html page </title> </head> <body> <! - - your web page content and markup - -> </body> </html>

  40. Example of HTML page <html> <head> <title>My Page</title> </head> <body> <h2>Welcome in Heading</h2> <p> My first paragraph. <br> it is a <b>simple basic</b> page. </p> </body> </html>

  41. Thank you

More Related