1 / 75

Today’s objectives

Today’s objectives. Our network Defining web design Introduction to design precepts Markup. Our network: User Name and Password. To connect to our servers from within either of our two labs (205 or 345): Ctrl-Alt-Delete Username: Dori username PW: Dori password.

zaria
Download Presentation

Today’s objectives

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. Today’s objectives • Our network • Defining web design • Introduction to design precepts • Markup

  2. Our network: User Name and Password • To connect to our servers from within either of our two labs (205 or 345): • Ctrl-Alt-Delete • Username: Dori username • PW: Dori password

  3. Our network: User Name and Password • Labs (205, 345) - login with your DORI username and password (i.e. the email part, up to the @ symbol). • If you don't know your password, need to go to the computer help desk in the union. • OR simply go to the "forgot your password" screen on DORI from any logged-in computer. (Here's the link: https://apps.duq.edu/webapps/multipass/ ).

  4. Our network: FTP and Z Drives • Student URLS now match DORI login. My old site www.jma.duq.edu/users/gibbs/pub/whatever, • would now be www.jma.duq.edu/users/gibbsw/pub/whatever • Students will use Dori login with no prefix. Logins DO NOT need the jma\ prefix.

  5. Our network: FTP and Z Drives • Z drives for students who were registered as of 8/20 have been created. • Later registrants may not have a z drive. • If you do not have a Z drive, write down your name and Dori ID so it can be created. • FTP address is your DORI name, not simply your last name.

  6. Our network: Server www.jma.duq.edu • Your private folder • It’s a subfolder of users folder • www.jma.duq.edu/users/DoriUsername • Save files (drag and drop files) while in either lab (CH205, CH345) • You can also FTP to there from home…

  7. Our network: How do I access the server? • Access from either CH345 and CH205 • Start >> Computer (Z: Drive) • \\jma1\users\username

  8. Our network: How do I access the server? From dorm or home ftp://www.jma.duq.edu/users/YourDoriUsername • Example: ftp://www.jma.duq.edu/users/gibbsw/ • You will be prompted for your user name and password • Use the same name and password you used to login to Dori

  9. Our network: How do I access the server? (from dorm or home) • Folders and files display • Transfer (put) files from your computer, • Download (get) files to your computer.

  10. User Folder The PUB folder

  11. PUB www.jma.duq.edu Your Space User folder Folder Folder File File Folder File File

  12. PUB www.jma.duq.edu Your Space User folder All files for the Web must be in PUB Folder Folder File File Folder File File

  13. User Folder • Your folder on server has a child folder named pub • Inside that folder you should create a folder for each course that requires a web site • In this course, create a sub folder named JMA318 or JMA574

  14. The PUB folder • You might create subfolders, for each course. • Double-click on pub • Right-click on any unused white area

  15. Web URL • The URL to your website(s) depend on how you structured your home folder • Using earlier example http://www.jma.duq.edu/users/gibbsw/pub/JMA318/FileName.htm • Assuming your file name is default.htm, or index.htm in the jma318 folder the address would be: http://www.jma.duq.edu/users/gibbsw/pub/JMA318/index.htm

  16. Defining Web Design

  17. Define Web Design • Good web design is much more than creating pretty pages. • Basic concepts of • color theory • typography • layout , and • usability are all part of a good design. (Hogan, 2009)

  18. Define Web Design Everyone has some sense of what Web design is... but what is it really. • Visual and graphic design • Programming • Information architecture(creation and organization of content), • Usability? • All part of any discussion - but their importance in design and development varies from person to person and from site to site.

  19. Define Web Design • Web design is a multidisciplinary field. • Influenced by: • library science • graphic design • programming • networking • user interface design • usability • human computer interaction • psychology • and a host of other fields.

  20. Define Web Design • More recent disciplines… • Where do these fit into Web design? • User Experience design (UXD), • Interaction design (IxD), and • User Interface design (UID)

  21. User Experience, Interaction, and User Interface design • Often, when we think of design, we think about how something looks. • On the Web, must also thing about how the site works. • Before picking colors and fonts, must identify the • site’s goals • how it will be used, and • how visitors move through it.

  22. User Experience, Interaction, and User Interface design • Interaction designer makes program as easy, efficient, and delightful to use as possible. • Interface designer focused on the functionality of the interface as well as the specific tools (buttons, links, menus, and so on) that users use to accomplish tasks. • UX designer takes holisticview-ensuring entire experience with the program is favorable, based on understanding of users and their needs.

  23. User Experience, Interaction, and User Interface design Documents an IxD, UI, or UX designer might produce include • User research and testing reports • Wireframe diagrams • Site diagram • Storyboards and user flow charts

  24. Visual design • Web is a visual medium • Web pages require attention to presentation and design. • Visual designer creates the “look and feel” of site—logos, graphics, type, colors, layout, etc.

  25. Define Web Design Web design encompass a number of disciplines: • Visual (graphic) design • User interface and experience design • Web document and style sheet production • Scripting and programming • Content strategy • Multimedia

  26. Define Web Design Common frontendtasks: • Visual design and image production • Interface design • Information design as it pertains to the user’s experience of the site • HTML document and style sheet development and JavaScript

  27. Define Web Design • A definition: …multidisciplinary pursuit pertaining to the planning and production of Web sites, including, but not limited to, technical development, information structure, visual design, and networked delivery. Powerll, T.

  28. Define Web Design • At it’s core, design is all about visual communication. • To be an effective designer, you have to be able to clearly communicate your ideas to users or else lose their attention. (Jones, 2011)

  29. Components of Web Design

  30. Components of Web design • Content - information (text, images, etc.) and how it is organized and structured. • Visuals - screen layout and graphic used in a site. • Technology - HTML, CSS, interactive elements, programming techniques, languages. • Delivery - speed and reliability of a site’s delivery over the Internet. • Purpose - reason for the site. Should drive all decisions involving site. Powell, T. , Web Design

  31. Define Web Design • Amount each component influences a site varies according to the type of site being built.

  32. Web sites are primarily a client-server network model with three common elements: • Server-side - server hardware and software as well as other elements (e.g., Java based applications and databases). • Client-side - browser and supported technologies (e.g., HTML, CSS, and JavaScript). • Network -Connectivity elements utilized to deliver Web site to a user (e.g., various networks on the public Internet or private connections within an intranet.) Powell, T. , Web Design

  33. Types of Web Sites

  34. Types of Web Sites Abstract Groupings • First, consider if a site is • Information focused (w3Schools | Duquesne), document-centered • Task (Kuler |TypeTester) focused, application-centered. • Hybrid sites do a little of both (Amazon) Powell, T. , Web Design

  35. Types of Web Sites Broad categories of sites – based on type information: • Informational - provide information about a particular subject, very common type of sites. • Transactional - used to conduct some transaction (E-commerce). • Community - provide information and interaction between likeminded individuals. • Entertainment - games or forms of entertaining interaction. • Other - artistic, experimental sites, personal sites, blogs. Powell, T. , Web Design

  36. Types of Web Sites Categories of sites - based on type of organization: • Commercial - site built for commercial gain. • Government - a government organization • Educational - educational institution, to support learning or research. • Charitable – nonprofit or the charitable organization. • Personal – individual or some person, outlet of personal expression. Powell, T. , Web Design

  37. Types of Web Sites Site Genres • PERSONAL E-COMMERCE • BLOGS • WEB APPS • STIMULATING ARTS & ENTERTAINMENT • EDUCATIONAL FORUMS • GRASSROOTS INFORMATION SITES • NONPROFITS AS NETWORKS OF HELP • GOVERNMENT Design of Sites, Douglas K. van Duyne, James A. Landay and Jason I. Hong

  38. Some principles behind web design

  39. Web Design • Do people read web sites? • People are fickle. • Given large block of information, chances are they won’t read it.

  40. We think people read our sites like this...

  41. But they probably see this…

  42. Web Design …people will see our designs in terms of relationships…

  43. What do you see?

  44. What do you see?

  45. You likely see a large red box and a small blue box, not just two boxes.

  46. People try to differentiatebetween objects, size, color or other differences – to help them distinguish between objects and give them unique meanings. You likely see a large red box and a small blue box, not just two boxes.

  47. Greater complexity, greater need to “distinguish” objects in terms of relationships.

  48. Greater complexity, greater need to “distinguish” objects in terms of relationships. • What objects are related? How are they related? • Shape • Color • Size • Position

  49. Greater complexity, greater need to “distinguish” objects in terms of relationships.

  50. Proximity why are some close to each other – must be related.

More Related