1. LEARNING WEB DESIGN Beginner’s Guide to HTML, Graphics and Beyond

2. Getting Started  Where Do I Start?  Understand the fundamentals of how the Web works Learn working knowledge of HTML Role of the Web server Importance of the browser  What Do I Need to Learn?  Graphic design  Information design  Interface design  HTML production  Programming and scripting  Multimedia

3. Getting Started  Do I Need to Learn Java?  NO  Only requirements are HTML and style sheets

4. Getting Started  HTML  Hyper Text Markup Language Language used to write web page documents Not programming – word processing in longhand  Style Sheets  Official and standard mechanism for text and page formatting  Great tool for automating production, because you can make a change to a single style sheet document and have it affect all the documents in your site.

5. Getting Started  What Do I Need to Buy?  Equipment A solid up-to-date computer. Extra memory A large monitor A second computer A scanner and/or digital camera

6. Getting Started  What Do I Need to Buy?  Software Web-authoring WYSIWYG (What You See Is What You Get) Dreamweaver Adobe GoLive Microsoft FrontPage HTML Editors Macromedia HomeSite (Windows only). BBEdit by Bare Bones Software (Macintosh only).

7. Getting Started  What Do I Need to Buy?  Software Graphics Software Image-editing program Adobe Photoshop Adobe ImageReady Macromedia Fireworks Adobe Illustrator JASC Paint Shop Pro (Windows only)

8. Getting Started  What Do I Need to Buy?  Software Multimedia Tools Macromedia Flash Adobe LiveMotion Apple Quicktime Apple Final Cut Pro Macromedia Director Internet Tools A variety of web browsers A file-transfer program Telnet

9. How The Web Works  The Internet vs. The Web  Internet – a network of connected computers  World Wide Web – One of the ways information can be shared. Subset of information on the Internet, and it has its own protocol  Serving Up Your Information  Because they “serve” up documents upon request, these computers are known as servers  More accurately, the server is the software (not the computer itself) that allows the computer to communicate with other computers.  HTTP – Hypertext Transfer Protocol Web server software that allows it to “speak” the language

10. How The Web Works  Web Page Addresses (URLs)  Uniform Resource Locator  Made up of four components http:// Define protocol that will be used for that particular transaction www.jendesign.com Indicates what the server is suppose to connect to /2003/samples Indicates a path through directory levels to a specific file First.html Name of the file itself. It must end in.htm or.html in order to be recognized as an HTML document  Our example URL is saying it would like to use the HTTP protocol to connect to a web server on the Internet called jendesign.com and request the document first.html (located in the samples directory, which is in the 2003 directory).

11. How The Web Works  URL Shortcuts  http:// Sometimes omitted because it is implied because all web pages use the Hypertext Transfer Protocol  Index files Another implied part of a URL is any reference to a document called index.html

12. Getting Your Pages on the Web  Publishing on the Web requires that you transfer your web documents from your desktop computer to your web server computer.  Files are transferred between computers on the Internet via a protocol called FTP (File Transfer Protocol).  Step-by-Step 1. Start with a web page 2. Connect to the server with an FTP program 3. Upload the file 4. Check the page in a browser

13. Why Web Design Isn’t Like Print Design  Designing for the “unknown”  Unknown browsers Different browsers will display the same page differently Internet Explorer Mozilla Fire Fox  Unknown platforms Operating system of the computer Each operating system has its own characteristics and quirks that affect how your page will look and perform There are slight discrepancies between the functionality of browsers across different platforms

14. Why Web Design Isn’t Like Print Design  Designing for the “unknown”  Unknown user preferences Browsers are built with features that enable users to set the default appearance of the pages they view Might opt to turn off graphics, change colors, etc.  Unknown window size or monitor resolution Available space is determined by the size of the browser window when the page is opened Web pages are more fluid than print; they reflow to fill the available space

15. Why Web Design Isn’t Like Print Design  Designing for the “unknown”  Unknown connection speed Larger amounts of data will require more time to arrive High speed Internet vs. dial up Keep files as small as possible!  Unknown colors Computers handle varying colors different ways Example: some greens show up as black  Unknown fonts The way text appears is a result of browser settings, platform, and user preferences

16. The Web Design Process  Web Design Process 1. Conceptualize and research 2. Create and organize content 3. Develop the “look and feel” 4. Produce graphics and HTML documents 5. Create a working prototype 6. Test, Test, Test !!!! 7. Upload and test again 8. Maintain

17. The Web Design Process 1. Conceptualize and Research  Start with a core idea  Brainstorm how it’s going to manifest as a web page Sketches Asking questions Identify clients needs Conduct case studies, interviews and market research Define budget

18. The Web Design Process 2. Create and Organize Content  Content creation Clients are usually responsible for supplying content of the web site Take into account copyright laws and patents  Information design Design a diagram (site map) that reveals the overall “shape” of the site Site maps give designers a sense of the scale of the site and how sections are related Aids in navigation design

19. The Web Design Process 3. Develop the “Look and Feel”  Sketch it Can be sketched or designed in Photoshop, Word, or Publisher 4. Produce Graphics and HTML Documents  Use graphic tools to create the graphics needed  Format content into HTML documents  Produce multimedia elements

20. The Web Design Process 5. Create a Working Prototype  Create “alpha” First prototype Made available only to people within the web team for review and revisions  Create “beta” Second release Version that is sent to client for approval

21. The Web Design Process 6. Test, Test, Test!!!!  Test your page under as many conditions as possible View using Fire Fox, Internet Explorer, Safari, etc. View on different computers with different monitor resolutions and sizes 7. Upload and Test Again  Once all kinks are worked out upload to final server and make available to the world 8. Maintain  Keep content current  Determine life span

22. Questions 1. What is the difference between a web authoring program and an HTML-editing tool? 2. What is HTML? 3. What is HTTP? 4. What is an URL? 5. What is FTP?

23. Questions 6. Describe how each of these factors affects your role as a web designer:  The variety of browsers in use  Different operating systems  Each user’s browsers preferences  Resizable browser windows  The fonts installed on a user’s computer

24. Questions 7. What is a wire frame for? At what point in the process would you make one? 8. What is the “look and feel?” 9. What pieces go into a working prototype? 10. Name at least three ways to test your web pages.