Transcript ppt - Computer Science

CSIS-401: Web Design
Dr. Breimer
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
• Web design is the design of websites and
web applications using HTML, CSS and
images.
Definition
• Websites can be very diverse.
E-trade
 Playhouse Disney
Facebook  Protein Databank
Web Design Career #1
Visual Designer
• Uses
– Adobe PhotoShop,
– Fireworks,
– Flash, etc.
• Expertise in graphic design, layouts, color
theory, etc.
Web Design Career #2
Interface Designer
• Expertise in
– graphical programming,
– human computer interaction and
– interfaces
• Background in behavioral science,
ergonomics, etc.
Web Design Career #3
Software Developer
• Most modern software has web-based
components.
• Most new applications are entirely webbased.
• Programmers need to know HTML, CSS,
etc.
Web Design Career #4
Database Administrator
• Almost all Databases interface with web
technologies.
• Large website are entirely databasedriven.
• Database Administrators also need to
know HTML, CSS, XML, etc.
Web Design Career #5
Web Master/Web Authoring
• Larger websites require extensive content
management.
• Developing and managing content is a
specialty.
• Writing conventions and styles are
different on the web.
Web Design Career #6
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
• HyperText Markup Language
• A simple text document can be “markedup” with tags to specify how it should be
interpreted.
• <h1>Level 1 Header</h1>
HTML
• HTML was supposed to be a structural or
“semantic” language,
– But, the Browser Wars lead to the introduction
of “style” or formatting tags.
– “style” tags are bad!
– They are being removed from the HTML
standards (called deprecation).
CSS
• Cascading Style Sheets
• 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 =
Has Meaning
Style =
Specifies
Appearance
Semantic vs Style
Semantic  Meaning
Style   Appearance
<img src=“tiger.jpg”>
<img src=“tiger.jpg”>
<span class=“caption”>
This is a picture of a tiger
</span>
<font type=“Arial”
style=“italic” size=“10pt”>
This is a picture of a tiger
</font>
A caption is meaningful.
Images typically have a
caption that describes the
image.
Here, we specify how to
display the caption but
not the fact that it’s
actually a caption.
Semantics + CSS is better!
<span class=“caption”>Figure 1</span>
<span class=“caption”>Figure 2</span>
<span class=“caption”>Figure 3</span>
…
<span class=“caption”>Figure 99</span>
.caption {
font-size: 10pt;
font-style: italic;
}
This is why the font tag sucks!
(it’s a style tag)
<font type=“Arial” style=“italic” size=“10pt”> Figure 1 </font>
<font type=“Arial” style=“italic” size=“10pt”> Figure 2 </font>
<font type=“Arial” style=“italic” size=“10pt”> Figure 3 </font>
…
<font type=“Arial” style=“italic” size=“10pt”> Figure 999 </font>
<font type=“Arial” style=“bold” size=“10pt”> Sub-title </font>
Imaging if you wanted to change the font size to 12pt for all
image captions?
Good luck!
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
(<font> 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
W3C – What is it anyway?
• The World Wide Web Consortium (W3C)
– international consortium of web developers
– sub-organizations, full-time staff, and regular people
• Work together to develop Web standards
• Mission:
– To lead the World Wide Web to its full potential by
developing protocols and guidelines that ensure
long-term growth for the Web.
www.w3.org
Current Web Standards
• Structural Standards
– XHTML 1.0 – This is actually HTML 4.01 rewritten
according to XML standards.
– XML – set of rules for creating custom markup
languages.
• Presentation Standards
– CSS 1 (Since 1996) fully supported by almost all
browsers
– CSS 2 current standard, extends CSS1
– CSS 3 the future, extends CSS2
Current Web Standards
• Behavioral Standards
– Document Object Model (DOM) – allows
programs to control HTML documents.
• Each part of an HTML document has a name
• Each part can be manipulated by name
– JavaScript – uses the DOM to manipulate
web pages on the client’s browser.
– PHP, JSP, ASP, ColdFusion, etc. can use
the DOM to manipulate web pages on the
web server
Why Standards?
Advantages
1. Accessibility
2. Forward Compatibility
3. Simpler and Faster Development
4. Faster Download & Display
Why Standards?
1.
Accessibility
2.
3.
Forward Compatibility
Simpler and Faster
Development
Faster Download & Display
4.
• Standardized web pages
look good on all browsers.
• And on all different types of
devices.
– Cell phones
– PDA’s
– Screen readers for the
visually impaired
Why Standards?
1.
Accessibility
2.
Forward
Compatibility
3.
Simpler and Faster
Development
Faster Download &
Display
4.
• Future standards are built on
top of current standards
• Thus, Web pages made
today will work in the future
Note:
• Browser Wars created html tags that were not standard
• These tags won’t display properly in many “standard”
browswers.
• Internet Explorer and Firefox still support these tags, but
not for long.
Why Standards?
1.
2.
Accessibility
Forward Compatibility
3.
Simpler and Faster
Development
4.
Faster Download & Display
• Faster: You don’t have to
build separate websites for
separate browsers/devices
• Concurrent Development:
Content and style can be
developed separately by
different teams.
Why Standards?
1.
2.
3.
Accessibility
Forward Compatibility
Simpler and Faster
Development
4.
Faster Download &
Display
• Style/Appearance tags are
bloated
• Rather than load bloated
HTML for every page, just
load one style sheet for an
entire website
• Example:
<center> <b> <font face="Georgia, Times New Roman, Times, serif"
color=“#880000" size="+2">Sub-title</font> </b> </center>
Rendering Engines
• Browsers actually have different rendering
engines for parsing standard and nonstandard HTML code.
• The <!doctype> or <html> tag tells the browser
which engine to use.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
Rendering Engines
• Standard, validated HTML code can be
rendered faster.
– Rendering engine doesn’t have to handle
special cases and errors
• Most web browsers can display Nonstandard HTML,
– but a more complex rendering engine must be
used
– More complex mean slower rendering.
Who cares if the rendering engine
is a little slow?
• True, on modern PCs you won’t notice the
difference.
• However, consider that the device
rendering the web page could be cell
phone with a 33 MHz processor.
Standards: Big Motivation
• Without standards, you
would have to test how
your website looked
on many different browsers.
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
Microsoft IE 67%
Mozilla Firefox 19%
Apple Safari 9%
Google Chrome 2%
Netscape < 1%
Opera < 1%
AOL Explorer
Amaya
Camino
Epiphany
Maxthon
Shiira
HotJava
Nintendo DS
PlayStation PWB
Lynx
Voyager
Micro Browser
Omniweb
Standards: Big Motivation
1.
2.
3.
4.
Microsoft IE 67%
Mozilla Firefox 19%
Apple Safari 9%
Google Chrome 2%
• Not a problem:
96% of the world uses
four browsers.
• But, more and more people are browsing on
different devices
• Consider cell phones, PDA’s, GPS devices, and
even refrigerators…
– All use different browser variations.
• W3C wants the web to fully work on any kind of
device.
– Even today, many websites won’t display properly on
small devices.
Internet-enable devices
• Portable Media Players
– To buy music
• Automobiles
– To send info to mechanics
• Refrigerators
– To buy more groceries
• What will they think of next?
Validate Validate Validate
• http://validator.w3.org/
• It’s a pain but…
• At least you know that your web page will
display properly on about 400 different
browser variations.
Tim Berners-Lee (TBL)
• Widely recognized as
– The inventor of HTML
– First implementor of hypertext concept
– Implemented first web browser (text based)
and more importantly, first web server (unix
daemon).
• Should be a billionaire but then the WWW
wouldn’t be so cool!
• I love the man! You should love him too.
Web Browser History
• 1991: TBL makes the first web browser in his
physics labs. Dr. B gets his braces off and
discovers Clearasil.
• 1993: Mosaic (the first real graphical browser) is
built. Free, open source, works for Mac’s,
Windows, and UNIX. The birth of free porn.
• 1994: Netscape forms, they develop a browser
and immediately start adding proprietary tags.
• 1995: Microsoft wakes up, makes a browser,
and decides they need to monopolize the
browser market
Browser History
• 1996-1999: Browser Wars…different versions
of JavaScript, CSS, and HTML emerge. While
standards go down the toilet…at least a lot cool
sh*t was developed.
• 1998: Netscape screws Microsoft in a big way
by making its code Open Source.
Microsoft fights back by integrating its browser
into the Windows 98 and 2000.
• 2000: Microsoft wins! Netscape gets bought by
AOL. The .com Bust happens!
Dr. B contemplates becoming a pop star but
then decides to be a professor.
Browser History
• 2002: Kelly Clarkson (not Dr. B) wins
American Idol!
• 2003: Some managers who once worked
for Netscape form the Mozilla Foundation
• 2005: Firefox busts out on the scene.
First browser to make a serious dent in
Microsoft’s monopoly.
• 2006: Dr. B finally learns CSS.
Summary
• Originally HTML was meant to be a
structural/semantic language
• The Browser wars lead to the destandardization of HTML.
– Proprietary style tags were added.
• Standardization and semantic HTML has
made a comeback
– Old school web design is back!