Web Design - Web Design and Development - Lecture Slides, Slides of Web Design and Development

Download Web Design - Web Design and Development - Lecture Slides and more Slides Web Design and Development in PDF only on Docsity!

Web Design

Some Background & History

1. Web Design is a diverse field
2. Standards are important
   • 4 reasons
3. Web Design is going “ old school ”
   • Separation of structure and style.
4. Internet Explorer isn’t the only browser?
   • Browser History

Definition

• Websites can be very diverse.

E-trade  Playhouse Disney Facebook  Protein Databank

Web Design Career

Visual Designer

• Uses
  • Adobe PhotoShop,
  • Fireworks,
  • Flash, etc.
• Expertise in graphic design, layouts, color theory, etc.

Web Design Career

Software Developer

• Most modern software has web-based components.
• Most new applications are entirely web- based.
• Programmers need to know HTML, CSS, etc.

Web Design Career

Database Administrator

• Almost all Databases interface with web technologies.
• Large website are entirely database-driven.
• Database Administrators also need to know HTML, CSS, XML, etc.

Web Design Career

Marketing & Advertising

• Online marketing is an entire field.
• Web technology can help marketers achieve new innovations.
• Marketers & Advertisers need to know about fundamental web technologies.

HTML

• H yper T ext M arkup L anguage
• A simple text document can be “marked-up” with tags to specify how it should be interpreted.
• Level 1 Header

CSS

• C ascading S tyle S heets
• Used to specify the style/appearance of structural elements (HTML tags).
• CSS was part of the original design of the web,
• but its use was almost entirely abandoned between 1997 and 2003.

Why are “style” tags bad?

• The best answer is very complicated
• Short Answer:
  • Leads to bloated HTML code that is hard to maintain.

Semantic vs Style

Semantic  Meaning

This is a picture of a tiger

A caption is meaningful. Images typically have a caption that describes the image.

Style   Appearance

This is a picture of a tiger

Here, we specify how to display the caption but not the fact that it’s actually a caption.

Semantics + CSS is better!

Figure 1 Figure 2 Figure 3 … Figure 99

.caption { font-size: 10pt; font-style: italic; }

History Lesson: The Good Times

• Standardization was very important in the initial design of HTML (1991-1994) - Initially, HTML was structural/semantic - The presentation of web pages was left up to the user, via web browser settings.
• Netscape & Microsoft created “evil” tags ( **** for example) so that web page designers could control the presentation of their web pages.

History Lesson: Browser Wars

• Netscape & Microsoft added many proprietary enhancements to HTML (1994-1999) - Proprietary == Only works for a specific browser - Proprietary == Not Open == Not standard
• Web authors would use HTML tags to control the visual presentation, but pages would look completely different on different browsers.
• In 1998, the web development community and W3C said “Enough is enough”
• www.webstandards.org was formed