web%20design-08-fall
- 1. ENDS 474 Designing for the Web MAC lab Langford C Instructor: Howard Eilers, Langford C 3036D, 845-4685, 778-8603 (h) h-eilers@tamu.edu T-R 8-10:30 Office hours: 8:30 a.m.+ M W F SYLLABUS I. COURSE DESCRIPTION ENDS 474 Special Topics in Web Design. (2-4). Credit 3. A course on web page and site creation: design, typography for the web. Building on a sound foundation of web technologies, the emphasis of the course will be in page/site design: controlling the page real estate through cascading style sheets (CSS). Imaging for the web: creation and use of color and graphics. Emphasis will be on the visual presentation on the web using web standards design. Build complete web sites. II. INSTRUCTOR Howard F. Eilers 306D Langford C 979-845-4785, 778-8603 h-eilers@tamu.edu III. PREREQUISITES none IV. INTRODUCTION ENDS 474 is a course that emphasizes the technical, creative and compositional aspects of web design. Topics include the Internet and the web, terminology, HTML document type definition and standards, web technologies, basics of web design, controlling page real estate, cascading style sheets, ADA accessibility standards and the building and management of complete web sites. V. COURSE OBJECTIVES The objectives of this course are as follows: • to understand the power and utility of the web • to explore the creative potential for the web • to control presentation by the use of positioning • to introduce good coding practices through the use of web standards • to learn how to separate content and format styling • to create an awareness for ADA standards and the necessity for compliance • to create an entire web site; explore web site management 1
- 2. VI. COURSE SCHEDULE: Because this is a new course I am working out, the schedule is only my suggested weekly outline of topics. In general M-W will be times of demonstration/discussion. Fridays will be “lab time” for students to work on tutorials and projects. I Intro HTML demo 26-27 Aug Get logged-in/browse web sites do HTML project Look at Web sites II Web Graphics: PhotoShop and Semantic structure - XHTML 2-4 Sept Illustrator work on graphics project do graphics project III Basics of CSS Fonts – letter styling 9-11 Sept do basic CSS tutorial do type-backgrounds tutorial IV White-space: Layouts: concepts: 16-18 Sept margins/padding/borders Positioning basics:absolute, relative, -- The Box Model fixed, static. 2-col/3-col/centering do White-space tutorial do Centering and Positioning do Box Model tutorial basics tutorials V Work on AP (absolute positioning) Multi-column liquid: 23-25 Sept project floating columns float with negative margin Faux columns Main content top of HTML Jello-molds Do liquid tutorial VI Work on liquid layout project Using grids for layout 30-Sept – Styling for print 2 Oct do print styling project VII Styling tables and lists Lists as menu: styling buttons 7-9 Oct do tables and lists tutorials do buttons tutorial suggest North Pole tutorial VIII Simple drop-down menu Multiple drop-down menu 14-16 Oct Do fly-outs and menu drop- do drop-down project down tutorials IX Work on drop-down project Creating tooltips 21-23 Oct do tooltips project X Image replace text CSS Zengarden discussion 28-30 Oct Positioning the background do CSS Zengarden project Fixing the background do Shell tutorial 2
- 3. XI Work on CSS Zengarden project Building a whole Web site 4-6 Nov Site management - DreamWeaver XII Web animation: GIF animation and Work on animation project 11-13 Nov Flash animaton do animation project XIII Work on web site Work on web site 18-20 Nov XIV Work on web wite Thanksgiving 25-27 Nov XV CSS3 intro 2 Dec Work on web site Procedures We will hold class in the MAC lab in Langford C (1st floor). Most of the class will completed with an ordinary text editor. Towards the end of the semester we may use Dreamweaver for site control and will make a short web animation. – On all projects/tutorials, put all your parts together in a folder with your name and project/tutorial name. Turn this folder into your ARCH accounts for this class. As such you may work on our MACS or your own laptops. The recommended browsers are Firefox and Safari; also always check all your web pages on IE (win – you can always check things on one of the Architecture PC computers if you need access to one).. VII. PERFORMANCE EVALUATION: Students enrolled in ENDS 474 will be evaluated according to the following criteria: Projects and instructor designed exercises/tutorials 85 % (web site 25%) (CSS Zengarden 20%) (creative projects 40%) Tutorials 12 % Class participation exams 3% Projects/tutorials for the web course: Basic HTML things: Web Pages – Create web pages incorporating shape layout, color and design techniques designed in class. Include text, still images and sound. Link more than one page together. Create graphics for inclusion in basic web pages. 3
- 4. Styling – Interface design: A series of exercises and creative projects to style web pages with multi-column layouts, floats, various link (menu) configurations, incorporating different design, layout (fixed column and fluid/elastic), imagery, typography, and special effects using background images, transparency and layering. Content integration: Web site and management: Create and publish a web site applying strategies integral to the corporation. Tutorials Projects Basics of CSS Basic HTML construction White space (margins/padding) Web graphics Box model Type-White-Space Styling type (type-background) AP (absolute position) fixed layout Centering a design Liquid/fluid/elastic page layout Position basics (AP) Styling for print Floating columns (liquid) Drop-down menu page Styling tables Tooltips Lists as menu Web animation Buttons – moving Flyouts Major projects Menu – simple drop-down CSS Zengarden Community MX North Pole Web site Positioning background (Shell) VIII. TEXT Primary references Clarke, Andy and Holzschlag, Molly Transcending CSS: The Fine Art of Web Design New Riders 2006 Shea, Dave and Holzschlag, Molly the Zen of CSS design: visual enlightenment for the web New Riders 2005 Adams, Cameron; Boulton, Mark; Clarke, Andy; Collison, Simon; Croft, Jeff; Featherstone, Derek; Lloyd, Ian; Marcotte, Ethan; Rubin, Dan; Weychert, Rob, Web Standards Creativity: Innovations in Web Design with XHTML, CSS, and DOM Scripting Friends of Ed 2007 Wyke-Smith stylin’ with CSS New Riders Publishing 2007 Krug, Steve Don’t Make Me Think New Riders 2005 4
- 5. Other References Budd, Andy, CSS Mastery: Advanced Web Standards Solution Friends of Ed 2006 Baker, Donna CSS For Web Designers Only Wiley 2006 Beaird, Jason The Principles of Beautiful Web Design Sitepoint 2007 Cederholm, Dan Bulletproof Web Design New Riders 2005 Cederholm, Dan Web Standards Solution: the Markup & Style Handbook Apress L.P 2004 Cooper, Alan The Essentials of Interaction Design Wiley 2003 Comer, Douglas E. The Internet Book: Everything You Need to Know About Computer Networking and How the Internet Works (3rd Edition). Upper Saddle River, NJ: Prentice Hall, 2000. Eccher, Clint, Hunley, Eric and Simmons Erik Advanced Professional Web Design: Techniques and Templates Charles River Media 2006 Graham, Ian S. HTML Stylesheet Sourcebook. New York, NY: Wiley, 1997. Grannell, Craig Essential Guide to CSS & HTML Web Design Friends of Ed 2007 Holzschlag, Molly El Cascading Style Sheets: The Designer’s Edge Sybex 2003 Holzschlag, Molly Spring into HTML & CSS Adison-Wesley, 2005 Homer, Alex, Chris Ullman and Steve Wright. Instant HTML Programmer’s Reference, 2nd Edition. Birmingham, UK: Wrox Press, 1998. Jamsa, Kris, Konrad King and Andy Anderson. HTML & Web Design Tips and Techniques. Boston, MA: McGraw-Hill Osborne Media, 2002. Kay, Michael. XSLT : Programmer's Reference (Programmer to Programmer). Birmingham, UK: Wrox Press, 2001. Loyd, Ian The Ultimate HTML Reference Sitepoint 2008 Mangano, Sal. XSLT Cookbook. Cambridge, MA: O'Reilly & Associates, 2002. Meadows, Mart S, Pause and Effect: The Art of Interactive Narrative. Indianapolis, IN: New Riders Publishing, 2002 Marini, Joe. Document Object Model: Processing Structured Documents. Berkley, CA: Osborne/McGraw-Hill, 2002. Meyer, Eric CSS Web Site Design Peachprint Press 2002 Meyer, Eric More on CSS New Riders Publishing 2004 5
- 6. Meyer, Eric On CSS: Mastering the Language of Web Design New Riders Publishing 2003 Meyer, Eric. Cascading Style Sheets 2.0 Programmer's Reference. Boston, MA: McGraw-Hill Osborne Media, 2001. Meyer, Eric. Cascading Style Sheets: The Definitive Guide. Cambridge, MA: O'Reilly & Associates, 2000. Meyer, Eric. Mastering the Language of Web Design. Indianapolis, IN: New Riders Publishing, 2002. Niederst, Jennifer. Web Design in a Nutshell. Upper Saddle River, NJ:Prentice Hall, 2001. Nielsen, Jakob Designing Web Usability Peach Press 1999 Norman, Don The Design for Everyday Things Basic Books 2002 Norman, Don The Design of Future Things Basic Books 2007 Olsson, Tommy The Ultimate CSS Reference Sitepoint 2008 Ruse, Kevin Web Standards Design Guide Charles River Media 2005 Rosenfeld, Louis Information Architecture for the World Wide Web: Designing Large-Scale Web Sites O’Reilly 2006 Schafer, Steven Web Standards Programmer’s Reference: HTML, CSS, JavaScript, Python & PHP Wiley 2005 Schengili-Roberts, Keith. Core CSS: Cascading Style Sheets. Upper Saddle River, NJ: Prentice Hall PTR, 2003. Shiflett, Chris. HTTP Developer's Handbook. Carmel, IN: SAMS, 2003. Schmitt, Christopher. Designing CSS Web Pages. Indianapolis, IN: New Riders Publishing, 2002. Schmitt, Christopher. CSS Cookbook. Cambridge, MA: O'Reilly & Associates, 2004. Tidwell, Jennifer Designing Interfaces: Patterns for Effective Interaction Design O’Reilly 2005 Weinmann, Lynda and William Weinmann. Creative HTML Design.2 nd (2 Edition). Indianapolis, IN: New Riders Publishing, 2001 Weinmann, Lynda Designing Web Graphics New Riders 2003 Whitehead, Paul HTML: Your Visual Blueprint for Designing Web Pages with HTML, CSS and HTML Wiley 2005 Williams, Robin Web Design Workshop Peachprint 2002 Wroblewski, Luke Site-Seeing: A Visual Approach to Web Usability Wiley 2002 Wyke-Smith, Charles Codin’ for the Web New Riders 2006 Zeldman, Jeffrey Taking Your Talent to the Web Peachpit 2001 6
- 7. IX. MATERIALS No special materials are required for this course beyond those required for note taking. X. COSTS Beyond the suggested books, the only costs will be for backup media. blank CDs or a memory “key” is convenient and recommended with a cost between $10 and $30. CD-ROM and DVD burners are available. Media costs between a few cents to a few dollars each. XI. AMERICANS WITH DISABILITIES ACT The Americans with Disabilities Act (ADA) is a federal anti-discrimination statute that provides comprehensive civil rights protection for persons with disabilities. Among other things, this legislation requires that all students with disabilities be guaranteed a learning environment that provides for reasonable accommodation of their disabilities. If you believe you have a disability requiring an accommodation, pleas contact the Department of Student Life, Services for Students with Disabilities in Room 126 of the Koldus Building, or call 845-1637. XII. AGGIE HONOR CODE “An Aggie does not lie, cheat or steal or tolerate those who do” Upon accepting admission to Texas A&M University, a student immediately asumes a commitment to uphold the Honor Code, to accept responsibility for learning and to follow the philosophy and rules of the Honor System. Students will be required to state their commitment on examinations, research papers and other academic work. Ignorance of the rules does not exclude any member of the Texas A&M University community from the requirements or the processes of the Honor System. For additional information please visit: www.tamu.edu/aggiehonor/. “On my honor, as an Aggie, I have neither given nor received unauthorized aid on this academic work.” 7