Website Design, Development and Maintenance ONLY TAKE DOWN NOTES ON INDICATED SLIDES What you will learn from this Unit Website Design The Design Process Multimedia HTML and Graphics Production Graphic Design Interface Design Programming and Scripting Information Design What is the purpose of a website? What makes a website GOOD? 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 Website Design Plan Design Develop Evaluate The Design Process 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 Graphic Design Information Design is an often overlooked area of Web design that includes the organization of the content and how you get to it. Information Design 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 Interface Design COPY How these three interact 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. HTML and Graphics Production Producing dynamic Web pages requires programming skills for writing scripts, programs, applications and for working with databases and servers. Programming and Scripting The Internet vs. The World Wide Web 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 Internet COPY 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 World Wide Web COPY pt 1&2 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 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". Continued 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 Web The Web has been described by the experts as: The Anatomy of a Website 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. Servers 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,The directory or other location on the host site to look in to find the specific file that contains the information. URL Uniform Resource Locator 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 URL Understanding Parts of the URL http ://www.nba.com/news/nbadaily.html http :// The type of protocol that will be used for the transfer of the informationThe 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. Pieces of the URL Let's look at a real example: HTTP is implied so it is left out. Index.html is another implied part of a URL This means that if you type inthe browser will try to retrieve the document Naming the top-level document in your directory "index.html" will allow you to keep your URL simple. URL The Hidden Index file You view this page as one, complete page. However, it is actually made up of two separate files: A Webpage The breakdown 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. A Webpage Source Files & Graphics 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. They explain how the text is to be displayed, where the graphics should go and where links occur! HTML Hyper Text Markup Language Meta tags are optional. They allow search engines to determine the DESCRIPTION and KEYWORDS of your document. the tag itself doesn't end with like other tags Meta Tags 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". Browsers 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. How the site gets on your Screen Platform Window size/monitor resolution Connection speed Color support Font support Individual preferences The User 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. The Browser Factors What are some of the things that make a website good? What are some of the things that make a website bad? Web Design Evaluation Assignment -website-designs/http://www.manolith.com/2009/08/25/worst -website-designs/ Poor Websites