Thayer CSIS South China Sea CSIS South China Sea.pdf · 3"(#$(&&&&& (& >?& ...
CSIS -390: Web Application Development Important Background about the field of Web Design
description
Transcript of CSIS -390: Web Application Development Important Background about the field of Web Design
![Page 1: CSIS -390: Web Application Development Important Background about the field of Web Design](https://reader035.fdocuments.us/reader035/viewer/2022081517/568163fd550346895dd59611/html5/thumbnails/1.jpg)
CSIS-390: Web Application DevelopmentImportant Background about the field of Web Design
Dr. Breimer
![Page 2: CSIS -390: Web Application Development Important Background about the field of Web Design](https://reader035.fdocuments.us/reader035/viewer/2022081517/568163fd550346895dd59611/html5/thumbnails/2.jpg)
Outline1. Web Design is a diverse field2. Standards are important
• 4 reasons3. Web Design teach critical concepts
• Separation of content, structure and style.
4. Internet Explorer isn’t the only browser?• Browser History
![Page 3: CSIS -390: Web Application Development Important Background about the field of Web Design](https://reader035.fdocuments.us/reader035/viewer/2022081517/568163fd550346895dd59611/html5/thumbnails/3.jpg)
Definition•Web design is the design of websites and
web applications using HTML, CSS and images.
![Page 4: CSIS -390: Web Application Development Important Background about the field of Web Design](https://reader035.fdocuments.us/reader035/viewer/2022081517/568163fd550346895dd59611/html5/thumbnails/4.jpg)
Definition•Websites can be very diverse.
E-trade Playhouse DisneyFacebook Protein Databank
![Page 5: CSIS -390: Web Application Development Important Background about the field of Web Design](https://reader035.fdocuments.us/reader035/viewer/2022081517/568163fd550346895dd59611/html5/thumbnails/5.jpg)
Web Design Career #1Visual Designer•Uses
▫Adobe PhotoShop, ▫Fireworks, ▫Flash, etc.
•Expertise in graphic design, layouts, color theory, etc.
![Page 6: CSIS -390: Web Application Development Important Background about the field of Web Design](https://reader035.fdocuments.us/reader035/viewer/2022081517/568163fd550346895dd59611/html5/thumbnails/6.jpg)
Web Design Career #2Interface Designer•Expertise in
▫graphical programming, ▫human computer interaction and ▫interfaces
•Background in behavioral science, ergonomics, etc.
![Page 7: CSIS -390: Web Application Development Important Background about the field of Web Design](https://reader035.fdocuments.us/reader035/viewer/2022081517/568163fd550346895dd59611/html5/thumbnails/7.jpg)
Web Design Career #3Software 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 -390: Web Application Development Important Background about the field of Web Design](https://reader035.fdocuments.us/reader035/viewer/2022081517/568163fd550346895dd59611/html5/thumbnails/8.jpg)
Web Design Career #4Database 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 -390: Web Application Development Important Background about the field of Web Design](https://reader035.fdocuments.us/reader035/viewer/2022081517/568163fd550346895dd59611/html5/thumbnails/9.jpg)
Web Design Career #5Web 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 -390: Web Application Development Important Background about the field of Web Design](https://reader035.fdocuments.us/reader035/viewer/2022081517/568163fd550346895dd59611/html5/thumbnails/10.jpg)
Web Design Career #6Marketing & 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 -390: Web Application Development Important Background about the field of Web Design](https://reader035.fdocuments.us/reader035/viewer/2022081517/568163fd550346895dd59611/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 -390: Web Application Development Important Background about the field of Web Design](https://reader035.fdocuments.us/reader035/viewer/2022081517/568163fd550346895dd59611/html5/thumbnails/12.jpg)
HTML•HTML was supposed to be a structural or
“semantic” language, ▫But, the Browser Wars led to the
introduction of “style” or formatting tags.▫“style” tags are bad!▫They have been removed from the HTML
standards (called deprecation).
![Page 13: CSIS -390: Web Application Development Important Background about the field of Web Design](https://reader035.fdocuments.us/reader035/viewer/2022081517/568163fd550346895dd59611/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 1996 and 2004.
![Page 14: CSIS -390: Web Application Development Important Background about the field of Web Design](https://reader035.fdocuments.us/reader035/viewer/2022081517/568163fd550346895dd59611/html5/thumbnails/14.jpg)
Why are “style” tags bad?•The best answer is very complicated•Short Answer:
▫It is hard to maintain and even harder to change.
![Page 15: CSIS -390: Web Application Development Important Background about the field of Web Design](https://reader035.fdocuments.us/reader035/viewer/2022081517/568163fd550346895dd59611/html5/thumbnails/15.jpg)
Semantic vs StyleSemantic =
Has MeaningStyle =
Specifies Appearance
![Page 16: CSIS -390: Web Application Development Important Background about the field of Web Design](https://reader035.fdocuments.us/reader035/viewer/2022081517/568163fd550346895dd59611/html5/thumbnails/16.jpg)
Semantic vs StyleSemantic 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 -390: Web Application Development Important Background about the field of Web Design](https://reader035.fdocuments.us/reader035/viewer/2022081517/568163fd550346895dd59611/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 -390: Web Application Development Important Background about the field of Web Design](https://reader035.fdocuments.us/reader035/viewer/2022081517/568163fd550346895dd59611/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 -390: Web Application Development Important Background about the field of Web Design](https://reader035.fdocuments.us/reader035/viewer/2022081517/568163fd550346895dd59611/html5/thumbnails/19.jpg)
History Lesson: The Good Times•Standardization was very important in the
initial design of HTML (1991-1994)▫HTML was meant to only
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 -390: Web Application Development Important Background about the field of Web Design](https://reader035.fdocuments.us/reader035/viewer/2022081517/568163fd550346895dd59611/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 -390: Web Application Development Important Background about the field of Web Design](https://reader035.fdocuments.us/reader035/viewer/2022081517/568163fd550346895dd59611/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 -390: Web Application Development Important Background about the field of Web Design](https://reader035.fdocuments.us/reader035/viewer/2022081517/568163fd550346895dd59611/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 -390: Web Application Development Important Background about the field of Web Design](https://reader035.fdocuments.us/reader035/viewer/2022081517/568163fd550346895dd59611/html5/thumbnails/23.jpg)
Why Standards?Advantages1. Accessibility2. Forward Compatibility3. Simpler and Faster Development4. Faster Download & Display
![Page 24: CSIS -390: Web Application Development Important Background about the field of Web Design](https://reader035.fdocuments.us/reader035/viewer/2022081517/568163fd550346895dd59611/html5/thumbnails/24.jpg)
Why Standards?1. Accessibility2. Forward Compatibility3. Simpler and Faster
Development4. Faster Download &
Display
• Standardized web pages look good on all browsers.
• And on all different types of devices.▫ Cell phones▫ Handheld computers▫ Screen readers for the
visually impaired
![Page 25: CSIS -390: Web Application Development Important Background about the field of Web Design](https://reader035.fdocuments.us/reader035/viewer/2022081517/568163fd550346895dd59611/html5/thumbnails/25.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”
browsers.• Internet Explorer and Firefox still support these tags, but
not for long.
![Page 26: CSIS -390: Web Application Development Important Background about the field of Web Design](https://reader035.fdocuments.us/reader035/viewer/2022081517/568163fd550346895dd59611/html5/thumbnails/26.jpg)
Why Standards?1. Accessibility2. Forward Compatibility3. 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 27: CSIS -390: Web Application Development Important Background about the field of Web Design](https://reader035.fdocuments.us/reader035/viewer/2022081517/568163fd550346895dd59611/html5/thumbnails/27.jpg)
Why Standards?1. Accessibility2. Forward Compatibility3. Simpler and Faster
Development4. 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 28: CSIS -390: Web Application Development Important Background about the field of Web Design](https://reader035.fdocuments.us/reader035/viewer/2022081517/568163fd550346895dd59611/html5/thumbnails/28.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 29: CSIS -390: Web Application Development Important Background about the field of Web Design](https://reader035.fdocuments.us/reader035/viewer/2022081517/568163fd550346895dd59611/html5/thumbnails/29.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 30: CSIS -390: Web Application Development Important Background about the field of Web Design](https://reader035.fdocuments.us/reader035/viewer/2022081517/568163fd550346895dd59611/html5/thumbnails/30.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 a phone with a 133 MHz processor.
![Page 31: CSIS -390: Web Application Development Important Background about the field of Web Design](https://reader035.fdocuments.us/reader035/viewer/2022081517/568163fd550346895dd59611/html5/thumbnails/31.jpg)
Standards: Big Motivation• Without standards, you
would have to test how your website looked on many different browsers.
1. Microsoft IE 60%2. Mozilla Firefox 23%3. Apple Safari 11%4. Google Chrome 4%5. Netscape < 1%6. Opera < 1%7. AOL Explorer8. Amaya9. Camino10. Epiphany11. Maxthon12. Shiira13. HotJava14. Nintendo DS15. PlayStation PWB16. Lynx17. Voyager18. Micro Browser19. Omniweb
![Page 32: CSIS -390: Web Application Development Important Background about the field of Web Design](https://reader035.fdocuments.us/reader035/viewer/2022081517/568163fd550346895dd59611/html5/thumbnails/32.jpg)
Standards: Big Motivation•Not a problem:
98% 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.
![Page 33: CSIS -390: Web Application Development Important Background about the field of Web Design](https://reader035.fdocuments.us/reader035/viewer/2022081517/568163fd550346895dd59611/html5/thumbnails/33.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 34: CSIS -390: Web Application Development Important Background about the field of Web Design](https://reader035.fdocuments.us/reader035/viewer/2022081517/568163fd550346895dd59611/html5/thumbnails/34.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 35: CSIS -390: Web Application Development Important Background about the field of Web Design](https://reader035.fdocuments.us/reader035/viewer/2022081517/568163fd550346895dd59611/html5/thumbnails/35.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 36: CSIS -390: Web Application Development Important Background about the field of Web Design](https://reader035.fdocuments.us/reader035/viewer/2022081517/568163fd550346895dd59611/html5/thumbnails/36.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 37: CSIS -390: Web Application Development Important Background about the field of Web Design](https://reader035.fdocuments.us/reader035/viewer/2022081517/568163fd550346895dd59611/html5/thumbnails/37.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 38: CSIS -390: Web Application Development Important Background about the field of Web Design](https://reader035.fdocuments.us/reader035/viewer/2022081517/568163fd550346895dd59611/html5/thumbnails/38.jpg)
Browser History•2002: Kelly Clarkson (not Dr. B) wins
American Idol!•2003: Some programmers 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+: Developers start to make web pages the correct way as TBL envisioned in 1991
![Page 39: CSIS -390: Web Application Development Important Background about the field of Web Design](https://reader035.fdocuments.us/reader035/viewer/2022081517/568163fd550346895dd59611/html5/thumbnails/39.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!