Download - CSIS-401: Web Design
![Page 1: CSIS-401: Web Design](https://reader036.vdocuments.us/reader036/viewer/2022081503/568135d7550346895d9d46c8/html5/thumbnails/1.jpg)
CSIS-401: Web Design
Dr. Breimer
![Page 2: CSIS-401: Web Design](https://reader036.vdocuments.us/reader036/viewer/2022081503/568135d7550346895d9d46c8/html5/thumbnails/2.jpg)
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
![Page 3: CSIS-401: Web Design](https://reader036.vdocuments.us/reader036/viewer/2022081503/568135d7550346895d9d46c8/html5/thumbnails/3.jpg)
Definition
• Web design is the design of websites and web applications using HTML, CSS and images.
![Page 4: CSIS-401: Web Design](https://reader036.vdocuments.us/reader036/viewer/2022081503/568135d7550346895d9d46c8/html5/thumbnails/4.jpg)
Definition
• Websites can be very diverse.
E-trade Playhouse Disney
Facebook Protein Databank
![Page 5: CSIS-401: Web Design](https://reader036.vdocuments.us/reader036/viewer/2022081503/568135d7550346895d9d46c8/html5/thumbnails/5.jpg)
Web Design Career #1
Visual Designer
• Uses – Adobe PhotoShop, – Fireworks, – Flash, etc.
• Expertise in graphic design, layouts, color theory, etc.
![Page 6: CSIS-401: Web Design](https://reader036.vdocuments.us/reader036/viewer/2022081503/568135d7550346895d9d46c8/html5/thumbnails/6.jpg)
Web Design Career #2
Interface Designer
• Expertise in – graphical programming, – human computer interaction and – interfaces
• Background in behavioral science, ergonomics, etc.
![Page 7: CSIS-401: Web Design](https://reader036.vdocuments.us/reader036/viewer/2022081503/568135d7550346895d9d46c8/html5/thumbnails/7.jpg)
Web Design Career #3
Software Developer
• Most modern software has web-based components.
• Most new applications are entirely web-based.
• Programmers need to know HTML, CSS, etc.
![Page 8: CSIS-401: Web Design](https://reader036.vdocuments.us/reader036/viewer/2022081503/568135d7550346895d9d46c8/html5/thumbnails/8.jpg)
Web Design Career #4
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.
![Page 9: CSIS-401: Web Design](https://reader036.vdocuments.us/reader036/viewer/2022081503/568135d7550346895d9d46c8/html5/thumbnails/9.jpg)
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.
![Page 10: CSIS-401: Web Design](https://reader036.vdocuments.us/reader036/viewer/2022081503/568135d7550346895d9d46c8/html5/thumbnails/10.jpg)
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.
![Page 11: CSIS-401: Web Design](https://reader036.vdocuments.us/reader036/viewer/2022081503/568135d7550346895d9d46c8/html5/thumbnails/11.jpg)
HTML
• HyperText Markup Language
• A simple text document can be “marked-up” with tags to specify how it should be interpreted.
• <h1>Level 1 Header</h1>
![Page 12: CSIS-401: Web Design](https://reader036.vdocuments.us/reader036/viewer/2022081503/568135d7550346895d9d46c8/html5/thumbnails/12.jpg)
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).
![Page 13: CSIS-401: Web Design](https://reader036.vdocuments.us/reader036/viewer/2022081503/568135d7550346895d9d46c8/html5/thumbnails/13.jpg)
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.
![Page 14: CSIS-401: Web Design](https://reader036.vdocuments.us/reader036/viewer/2022081503/568135d7550346895d9d46c8/html5/thumbnails/14.jpg)
Why are “style” tags bad?
• The best answer is very complicated
• Short Answer: – Leads to bloated HTML code that is hard to
maintain.
![Page 15: CSIS-401: Web Design](https://reader036.vdocuments.us/reader036/viewer/2022081503/568135d7550346895d9d46c8/html5/thumbnails/15.jpg)
Semantic vs Style
Semantic = Has Meaning
Style =Specifies Appearance
![Page 16: CSIS-401: Web Design](https://reader036.vdocuments.us/reader036/viewer/2022081503/568135d7550346895d9d46c8/html5/thumbnails/16.jpg)
Semantic vs Style
Semantic Meaning
<img src=“tiger.jpg”>
<span class=“caption”>This is a picture of a tiger</span>
A caption is meaningful.Images typically have a
caption that describes the image.
Style Appearance
<img src=“tiger.jpg”>
<font type=“Arial” style=“italic” size=“10pt”>
This is a picture of a tiger</font>
Here, we specify how to display the caption but not the fact that it’s actually a caption.
![Page 17: CSIS-401: Web Design](https://reader036.vdocuments.us/reader036/viewer/2022081503/568135d7550346895d9d46c8/html5/thumbnails/17.jpg)
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;
}
![Page 18: CSIS-401: Web Design](https://reader036.vdocuments.us/reader036/viewer/2022081503/568135d7550346895d9d46c8/html5/thumbnails/18.jpg)
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!
![Page 19: CSIS-401: Web Design](https://reader036.vdocuments.us/reader036/viewer/2022081503/568135d7550346895d9d46c8/html5/thumbnails/19.jpg)
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.
![Page 20: CSIS-401: Web Design](https://reader036.vdocuments.us/reader036/viewer/2022081503/568135d7550346895d9d46c8/html5/thumbnails/20.jpg)
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
![Page 21: CSIS-401: Web Design](https://reader036.vdocuments.us/reader036/viewer/2022081503/568135d7550346895d9d46c8/html5/thumbnails/21.jpg)
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
![Page 22: CSIS-401: Web Design](https://reader036.vdocuments.us/reader036/viewer/2022081503/568135d7550346895d9d46c8/html5/thumbnails/22.jpg)
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
![Page 23: CSIS-401: Web Design](https://reader036.vdocuments.us/reader036/viewer/2022081503/568135d7550346895d9d46c8/html5/thumbnails/23.jpg)
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
![Page 24: CSIS-401: Web Design](https://reader036.vdocuments.us/reader036/viewer/2022081503/568135d7550346895d9d46c8/html5/thumbnails/24.jpg)
Why Standards?
Advantages
1. Accessibility
2. Forward Compatibility
3. Simpler and Faster Development
4. Faster Download & Display
![Page 25: CSIS-401: Web Design](https://reader036.vdocuments.us/reader036/viewer/2022081503/568135d7550346895d9d46c8/html5/thumbnails/25.jpg)
Why Standards?
1. Accessibility2. Forward Compatibility
3. Simpler and Faster Development
4. Faster Download & Display
• 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
![Page 26: CSIS-401: Web Design](https://reader036.vdocuments.us/reader036/viewer/2022081503/568135d7550346895d9d46c8/html5/thumbnails/26.jpg)
Why Standards?
1. Accessibility
2. Forward Compatibility
3. Simpler and Faster Development
4. Faster Download & Display
• 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.
![Page 27: CSIS-401: Web Design](https://reader036.vdocuments.us/reader036/viewer/2022081503/568135d7550346895d9d46c8/html5/thumbnails/27.jpg)
Why Standards?
1. Accessibility
2. 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.
![Page 28: CSIS-401: Web Design](https://reader036.vdocuments.us/reader036/viewer/2022081503/568135d7550346895d9d46c8/html5/thumbnails/28.jpg)
Why Standards?
1. Accessibility
2. Forward Compatibility
3. 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>
![Page 29: CSIS-401: Web Design](https://reader036.vdocuments.us/reader036/viewer/2022081503/568135d7550346895d9d46c8/html5/thumbnails/29.jpg)
Rendering Engines
• Browsers actually have different rendering engines for parsing standard and non-standard 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">
![Page 30: CSIS-401: Web Design](https://reader036.vdocuments.us/reader036/viewer/2022081503/568135d7550346895d9d46c8/html5/thumbnails/30.jpg)
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 Non-standard HTML, – but a more complex rendering engine must be
used– More complex mean slower rendering.
![Page 31: CSIS-401: Web Design](https://reader036.vdocuments.us/reader036/viewer/2022081503/568135d7550346895d9d46c8/html5/thumbnails/31.jpg)
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.
![Page 32: CSIS-401: Web Design](https://reader036.vdocuments.us/reader036/viewer/2022081503/568135d7550346895d9d46c8/html5/thumbnails/32.jpg)
Standards: Big Motivation
• Without standards, you would have to test how your website looked on many different browsers.
1. Microsoft IE 67%
2. Mozilla Firefox 19%
3. Apple Safari 9%
4. Google Chrome 2%
5. Netscape < 1%
6. Opera < 1%
7. AOL Explorer
8. Amaya
9. Camino
10. Epiphany
11. Maxthon
12. Shiira
13. HotJava
14. Nintendo DS
15. PlayStation PWB
16. Lynx
17. Voyager
18. Micro Browser
19. Omniweb
![Page 33: CSIS-401: Web Design](https://reader036.vdocuments.us/reader036/viewer/2022081503/568135d7550346895d9d46c8/html5/thumbnails/33.jpg)
Standards: Big Motivation
• 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.
1. Microsoft IE 67%
2. Mozilla Firefox 19%
3. Apple Safari 9%
4. Google Chrome 2%
![Page 34: CSIS-401: Web Design](https://reader036.vdocuments.us/reader036/viewer/2022081503/568135d7550346895d9d46c8/html5/thumbnails/34.jpg)
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?
![Page 35: CSIS-401: Web Design](https://reader036.vdocuments.us/reader036/viewer/2022081503/568135d7550346895d9d46c8/html5/thumbnails/35.jpg)
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.
![Page 36: CSIS-401: Web Design](https://reader036.vdocuments.us/reader036/viewer/2022081503/568135d7550346895d9d46c8/html5/thumbnails/36.jpg)
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.
![Page 37: CSIS-401: Web Design](https://reader036.vdocuments.us/reader036/viewer/2022081503/568135d7550346895d9d46c8/html5/thumbnails/37.jpg)
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
![Page 38: CSIS-401: Web Design](https://reader036.vdocuments.us/reader036/viewer/2022081503/568135d7550346895d9d46c8/html5/thumbnails/38.jpg)
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.
![Page 39: CSIS-401: Web Design](https://reader036.vdocuments.us/reader036/viewer/2022081503/568135d7550346895d9d46c8/html5/thumbnails/39.jpg)
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.
![Page 40: CSIS-401: Web Design](https://reader036.vdocuments.us/reader036/viewer/2022081503/568135d7550346895d9d46c8/html5/thumbnails/40.jpg)
Summary
• Originally HTML was meant to be a structural/semantic language
• The Browser wars lead to the de-standardization of HTML.– Proprietary style tags were added.
• Standardization and semantic HTML has made a comeback– Old school web design is back!