SlideShare una empresa de Scribd logo
1 de 7
Descargar para leer sin conexión
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
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
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
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
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
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
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

Más contenido relacionado

Similar a web%20design-08-fall

So You Want to Teach Ruby and Rails...
So You Want to Teach Ruby and Rails...So You Want to Teach Ruby and Rails...
So You Want to Teach Ruby and Rails...bryanbibat
 
Getting started with CSS frameworks using Zurb foundation
Getting started with CSS frameworks using Zurb foundationGetting started with CSS frameworks using Zurb foundation
Getting started with CSS frameworks using Zurb foundationMelanie Archer
 
Contentful with Netgen Layouts workshop
Contentful with Netgen Layouts workshopContentful with Netgen Layouts workshop
Contentful with Netgen Layouts workshopIvo Lukac
 
Web Development Certificate
Web Development CertificateWeb Development Certificate
Web Development CertificateGene Babon
 
MC435: Web Design
MC435: Web DesignMC435: Web Design
MC435: Web Designbutest
 
Artdm 171 Week12 Templates
Artdm 171 Week12 TemplatesArtdm 171 Week12 Templates
Artdm 171 Week12 TemplatesGilbert Guerrero
 
Trends and innovations in web development course
Trends and innovations in web development course Trends and innovations in web development course
Trends and innovations in web development course Dr. Shikha Mehta
 
1st Term - SY 10-11 - Webdev Week1
1st Term - SY 10-11 - Webdev  Week11st Term - SY 10-11 - Webdev  Week1
1st Term - SY 10-11 - Webdev Week1ayehl612
 
Week1 1t webdev2
Week1 1t webdev2Week1 1t webdev2
Week1 1t webdev2ayehl612
 
Online course content siebel open ui
Online course content siebel open uiOnline course content siebel open ui
Online course content siebel open uiNOVA ITLABS
 
A Work Day Of A Web Developer
A Work Day Of A Web DeveloperA Work Day Of A Web Developer
A Work Day Of A Web DeveloperEdureka!
 
Online Platforms for ICT Content Development - Empowerment Technologies
Online Platforms for ICT Content Development - Empowerment TechnologiesOnline Platforms for ICT Content Development - Empowerment Technologies
Online Platforms for ICT Content Development - Empowerment TechnologiesMark Jhon Oxillo
 
Adobe Dreamweaver1
Adobe Dreamweaver1Adobe Dreamweaver1
Adobe Dreamweaver1nkinoshi
 
David W Richards Net Resume
David W Richards Net ResumeDavid W Richards Net Resume
David W Richards Net Resumedavidwrichards
 
Developing branding solutions
Developing branding solutionsDeveloping branding solutions
Developing branding solutionsThomas Daly
 
1291 fa13 syllabus
1291 fa13 syllabus1291 fa13 syllabus
1291 fa13 syllabusNYCCTfab
 
Introduction to Ruby on Rails
Introduction to Ruby on RailsIntroduction to Ruby on Rails
Introduction to Ruby on RailsAlessandro DS
 

Similar a web%20design-08-fall (20)

Week1 2t
Week1 2tWeek1 2t
Week1 2t
 
So You Want to Teach Ruby and Rails...
So You Want to Teach Ruby and Rails...So You Want to Teach Ruby and Rails...
So You Want to Teach Ruby and Rails...
 
Getting started with CSS frameworks using Zurb foundation
Getting started with CSS frameworks using Zurb foundationGetting started with CSS frameworks using Zurb foundation
Getting started with CSS frameworks using Zurb foundation
 
Contentful with Netgen Layouts workshop
Contentful with Netgen Layouts workshopContentful with Netgen Layouts workshop
Contentful with Netgen Layouts workshop
 
Web Development Certificate
Web Development CertificateWeb Development Certificate
Web Development Certificate
 
MC435: Web Design
MC435: Web DesignMC435: Web Design
MC435: Web Design
 
Artdm 171 Week12 Templates
Artdm 171 Week12 TemplatesArtdm 171 Week12 Templates
Artdm 171 Week12 Templates
 
syllabas-mohamedelzanty
syllabas-mohamedelzantysyllabas-mohamedelzanty
syllabas-mohamedelzanty
 
Trends and innovations in web development course
Trends and innovations in web development course Trends and innovations in web development course
Trends and innovations in web development course
 
1st Term - SY 10-11 - Webdev Week1
1st Term - SY 10-11 - Webdev  Week11st Term - SY 10-11 - Webdev  Week1
1st Term - SY 10-11 - Webdev Week1
 
Week1 1t webdev2
Week1 1t webdev2Week1 1t webdev2
Week1 1t webdev2
 
Online course content siebel open ui
Online course content siebel open uiOnline course content siebel open ui
Online course content siebel open ui
 
A Work Day Of A Web Developer
A Work Day Of A Web DeveloperA Work Day Of A Web Developer
A Work Day Of A Web Developer
 
Ruby Rails Web Development.pdf
Ruby Rails Web Development.pdfRuby Rails Web Development.pdf
Ruby Rails Web Development.pdf
 
Online Platforms for ICT Content Development - Empowerment Technologies
Online Platforms for ICT Content Development - Empowerment TechnologiesOnline Platforms for ICT Content Development - Empowerment Technologies
Online Platforms for ICT Content Development - Empowerment Technologies
 
Adobe Dreamweaver1
Adobe Dreamweaver1Adobe Dreamweaver1
Adobe Dreamweaver1
 
David W Richards Net Resume
David W Richards Net ResumeDavid W Richards Net Resume
David W Richards Net Resume
 
Developing branding solutions
Developing branding solutionsDeveloping branding solutions
Developing branding solutions
 
1291 fa13 syllabus
1291 fa13 syllabus1291 fa13 syllabus
1291 fa13 syllabus
 
Introduction to Ruby on Rails
Introduction to Ruby on RailsIntroduction to Ruby on Rails
Introduction to Ruby on Rails
 

Más de tutorialsruby

<img src="../i/r_14.png" />
<img src="../i/r_14.png" /><img src="../i/r_14.png" />
<img src="../i/r_14.png" />tutorialsruby
 
TopStyle Help & <b>Tutorial</b>
TopStyle Help & <b>Tutorial</b>TopStyle Help & <b>Tutorial</b>
TopStyle Help & <b>Tutorial</b>tutorialsruby
 
The Art Institute of Atlanta IMD 210 Fundamentals of Scripting <b>...</b>
The Art Institute of Atlanta IMD 210 Fundamentals of Scripting <b>...</b>The Art Institute of Atlanta IMD 210 Fundamentals of Scripting <b>...</b>
The Art Institute of Atlanta IMD 210 Fundamentals of Scripting <b>...</b>tutorialsruby
 
<img src="../i/r_14.png" />
<img src="../i/r_14.png" /><img src="../i/r_14.png" />
<img src="../i/r_14.png" />tutorialsruby
 
<img src="../i/r_14.png" />
<img src="../i/r_14.png" /><img src="../i/r_14.png" />
<img src="../i/r_14.png" />tutorialsruby
 
Standardization and Knowledge Transfer – INS0
Standardization and Knowledge Transfer – INS0Standardization and Knowledge Transfer – INS0
Standardization and Knowledge Transfer – INS0tutorialsruby
 
0047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa060269
0047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa0602690047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa060269
0047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa060269tutorialsruby
 
0047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa060269
0047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa0602690047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa060269
0047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa060269tutorialsruby
 
BloggingWithStyle_2008
BloggingWithStyle_2008BloggingWithStyle_2008
BloggingWithStyle_2008tutorialsruby
 
BloggingWithStyle_2008
BloggingWithStyle_2008BloggingWithStyle_2008
BloggingWithStyle_2008tutorialsruby
 
cascadingstylesheets
cascadingstylesheetscascadingstylesheets
cascadingstylesheetstutorialsruby
 
cascadingstylesheets
cascadingstylesheetscascadingstylesheets
cascadingstylesheetstutorialsruby
 

Más de tutorialsruby (20)

<img src="../i/r_14.png" />
<img src="../i/r_14.png" /><img src="../i/r_14.png" />
<img src="../i/r_14.png" />
 
TopStyle Help & <b>Tutorial</b>
TopStyle Help & <b>Tutorial</b>TopStyle Help & <b>Tutorial</b>
TopStyle Help & <b>Tutorial</b>
 
The Art Institute of Atlanta IMD 210 Fundamentals of Scripting <b>...</b>
The Art Institute of Atlanta IMD 210 Fundamentals of Scripting <b>...</b>The Art Institute of Atlanta IMD 210 Fundamentals of Scripting <b>...</b>
The Art Institute of Atlanta IMD 210 Fundamentals of Scripting <b>...</b>
 
<img src="../i/r_14.png" />
<img src="../i/r_14.png" /><img src="../i/r_14.png" />
<img src="../i/r_14.png" />
 
<img src="../i/r_14.png" />
<img src="../i/r_14.png" /><img src="../i/r_14.png" />
<img src="../i/r_14.png" />
 
Standardization and Knowledge Transfer – INS0
Standardization and Knowledge Transfer – INS0Standardization and Knowledge Transfer – INS0
Standardization and Knowledge Transfer – INS0
 
xhtml_basics
xhtml_basicsxhtml_basics
xhtml_basics
 
xhtml_basics
xhtml_basicsxhtml_basics
xhtml_basics
 
xhtml-documentation
xhtml-documentationxhtml-documentation
xhtml-documentation
 
xhtml-documentation
xhtml-documentationxhtml-documentation
xhtml-documentation
 
CSS
CSSCSS
CSS
 
CSS
CSSCSS
CSS
 
0047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa060269
0047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa0602690047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa060269
0047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa060269
 
0047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa060269
0047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa0602690047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa060269
0047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa060269
 
HowTo_CSS
HowTo_CSSHowTo_CSS
HowTo_CSS
 
HowTo_CSS
HowTo_CSSHowTo_CSS
HowTo_CSS
 
BloggingWithStyle_2008
BloggingWithStyle_2008BloggingWithStyle_2008
BloggingWithStyle_2008
 
BloggingWithStyle_2008
BloggingWithStyle_2008BloggingWithStyle_2008
BloggingWithStyle_2008
 
cascadingstylesheets
cascadingstylesheetscascadingstylesheets
cascadingstylesheets
 
cascadingstylesheets
cascadingstylesheetscascadingstylesheets
cascadingstylesheets
 

Último

CNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of ServiceCNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of Servicegiselly40
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Scriptwesley chun
 
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure serviceWhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure servicePooja Nehwal
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonAnna Loughnan Colquhoun
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationSafe Software
 
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityBoost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityPrincipled Technologies
 
Slack Application Development 101 Slides
Slack Application Development 101 SlidesSlack Application Development 101 Slides
Slack Application Development 101 Slidespraypatel2
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Miguel Araújo
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationRadu Cotescu
 
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...Igalia
 
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024The Digital Insurer
 
Breaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path MountBreaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path MountPuma Security, LLC
 
Top 5 Benefits OF Using Muvi Live Paywall For Live Streams
Top 5 Benefits OF Using Muvi Live Paywall For Live StreamsTop 5 Benefits OF Using Muvi Live Paywall For Live Streams
Top 5 Benefits OF Using Muvi Live Paywall For Live StreamsRoshan Dwivedi
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slidevu2urc
 
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking MenDelhi Call girls
 
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsEnterprise Knowledge
 
How to convert PDF to text with Nanonets
How to convert PDF to text with NanonetsHow to convert PDF to text with Nanonets
How to convert PDF to text with Nanonetsnaman860154
 
08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking MenDelhi Call girls
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...apidays
 
The Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptxThe Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptxMalak Abu Hammad
 

Último (20)

CNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of ServiceCNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of Service
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
 
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure serviceWhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
 
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityBoost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
 
Slack Application Development 101 Slides
Slack Application Development 101 SlidesSlack Application Development 101 Slides
Slack Application Development 101 Slides
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
 
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
 
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024
 
Breaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path MountBreaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path Mount
 
Top 5 Benefits OF Using Muvi Live Paywall For Live Streams
Top 5 Benefits OF Using Muvi Live Paywall For Live StreamsTop 5 Benefits OF Using Muvi Live Paywall For Live Streams
Top 5 Benefits OF Using Muvi Live Paywall For Live Streams
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
 
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
 
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI Solutions
 
How to convert PDF to text with Nanonets
How to convert PDF to text with NanonetsHow to convert PDF to text with Nanonets
How to convert PDF to text with Nanonets
 
08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
 
The Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptxThe Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptx
 

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