Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Download 1. Intro to Web Design student version
Transcript
ONLY TAKE DOWN NOTES ON INDICATED SLIDES Website Design, Development and Maintenance Website Design What you will learn from this Unit 1 The Design Process 2 Graphic Design 3 Information Design 4 Interface Design 5 HTML and Graphics Production 6 Programming and Scripting 7 Multimedia What is the purpose of a website? What makes a website GOOD? Website Design • We will focus our attention in these areas: (the basics of websites) – – – – – – Graphic Design Information Design Interface Design HTML and Graphics Production Programming and Scripting Multimedia The Design Process • • • • Plan Design Develop Evaluate Graphic Design • The Web is a visual medium so you must pay attention to the visual presentation which is everything you see on the page including: • • • • Graphics Colour Layout Typography Information Design • Information Design is an often overlooked area of Web design that includes the organization of the content and how you get to it. Interface Design COPY • This area of Web design focuses on how the page "works" rather than how it looks, focusing on methods for doing things including: • Buttons • Links • Navigation devices How these three interact HTML and Graphics Production • A fair amount of the Web design process involves the creation of the HTML documents that make up a Web site. • Graphics need to be produced in a way that is optimized for Web delivery. Programming and Scripting • Producing dynamic Web pages requires programming skills for writing scripts, programs, applications and for working with databases and servers. The Internet vs. The World Wide Web The Internet COPY • Any time you connect two or more computers together so that they can share resources, you have a computer network. • Connect two or more networks together and you have an internet. The Internet COPY • The Internet is a massive network of networks. It connects millions of computers together globally, forming a network in which any computer can communicate with any other computer as long as they are both connected to the Internet. • Information that travels over the Internet does so via a variety of languages known as protocols such as: • HTTP (Hypertext Transfer Protocol) • SMTP (Simple Mail Transfer Protocol) • FTP (File Transfer Protocol) The World Wide Web COPY pt 1&2 • The World Wide Web, simply known as the Web, is a way of accessing information over the medium of the Internet. – It is an information-sharing model that is built on top of the Internet. • Uses the HTTP protocol to transmit data. • The http protocol is only one of the many languages spoken over the Internet. The Web • The Web also makes use of browsers such as Firefox and Google Chrome to access Web pages. • These Web pages are linked to each other via hyperlinks. Web documents can also contain graphics, sound, text and video. The Web Continued • It is the millions of hypertext documents and their links that form the huge "web" of connected information that we refer to as "the Web". The Web The Web has been described by the experts as: • Interactive, which means: • Being able to "talk back to the Web server" • Selecting a link and jumping to another page somewhere else on the Web • Being able to communicate with the publisher of the pages you are visiting and with other readers of those pages • Dynamic, which means: • The information that is on the Web can be updated at any time. • Once updated, users do not have to install a new version or call technical support to get the updated information. The Web The Web has been described by the experts as: • Cross-platform, which means: • If you can access the Internet, you can access the World Wide Web, regardless of the type of computer you have. • Global and Distributed, which means: • Information is distributed globally across thousands of Web sites. The Web The Web has been described by the experts as: • Graphical & easy to navigate, which means: • Both text and graphics can be displayed in full colour on the same page. • Web browsers provide capabilities for graphics, sound, video, multimedia and embedded applications to be incorporated with the text. • Users can easily navigate, jumping from link to link, from page to page, across Web sites and servers using an easy-to-use browser interface. The Anatomy of a Website Servers • A Web site resides on a Web server. • The server is responsible for replying to Web browser requests for files. • You need a Web server to publish documents on the Web. URL Uniform Resource Locator • A URL is a pointer (address) to a specific bit of information on the Internet. • URLs contain information about: • Which protocol to use to find the information (for example, FTP, HTTP, HTTPS). • The host name to show how to get to the information (for example, http://www.nhl.com/schedules/index.html) • The directory or other location on the host site to look in to find the specific file that contains the information. URL Understanding Parts of the URL • A complete URL is generally made up of four components and appears in the following format: • • • • protocol - identifies the type of file transfer used domain_name - identifies the web server to connect to directory_name - specifies the directories to look into find the file file_name - the name of the file that will be displayed Pieces of the URL Let's look at a real example: http://www.nba.com/news/nbadaily.html • http:// – The type of protocol that will be used for the transfer of the information • www.nba.com – The domain name that identifies the server that must be connected to, to retrieve the requested information • /news/ – The pathname that specifies the directory on the server that contains the information you have requested • nbadaily.html – The name of the file that you have requested – It is this file that will be displayed by your browser. URL The Hidden Index file • HTTP is implied so it is left out. • Index.html is another implied part of a URL • This means that if you type in www.sony.com, the browser will try to retrieve the document www.sony.com/index.html. – Naming the top-level document in your directory "index.html" will allow you to keep your URL simple. A Webpage The breakdown • You view this page as one, complete page. However, it is actually made up of two separate files: A Webpage Source Files & Graphics • A source file otherwise known as an HTML document (in this case, called TheBasicPage.html) • A graphic file (in this case, a gif image called BasicPage.gif) • The browser brings these two separate elements together in the window. HTML Hyper Text Markup Language • This is the plain-text HTML document that makes up our sample Web page. • It contains the text content of the page and codes (tags), indicated by the angle brackets < and >. They explain how the text is to be displayed, where the graphics should go and where links occur! Meta Tags • <META NAME=xxxx> Meta tags are optional. They allow search engines to determine the DESCRIPTION and KEYWORDS of your document. – the tag itself doesn't end with </META> like other tags Browsers • The browser reads through the HTML document file and displays the text and images as it encounters them. Think of the images and text as "individuals waiting in a line-up". How the site gets on your Screen • The user requests a Web page by typing the URL into the browser, or by clicking a link. • The browser contacts the Web server indicated in the URL and requests a specific file. • If no file name is specified, the server will look for a default index.html file. • The Web server searches for the file and returns it. • The browser displays the file in its window or, if file cannot be found, the browser returns a file-not-found error. • If the page contains graphics, the browser again contacts the Web server to obtain each graphic. The User Factors • • • • • • Platform Window size/monitor resolution Connection speed Color support Font support Individual preferences The Browser Factors • The World Wide Web Consortium (W3C), is an organization that monitors and guides the development of the Web. It has set standards for how the Web should work. These standards include the smallest details of HTML and how browsers should interpret them. Web Design Evaluation Assignment • What are some of the things that make a website good? • What are some of the things that make a website bad? Poor Websites • http://www.manolith.com/2009/08/25/worst -website-designs/
