390 likes | 534 Views
CSIS -390: Web Application Development Important Background about the field of Web Design. Dr. Breimer. Outline. Web Design is a diverse field Standards are important 4 reasons Web Design teach critical concepts Separation of content, structure and style.
E N D
CSIS-390: Web Application DevelopmentImportant Background about the field of Web Design Dr. Breimer
Outline • Web Design is a diverse field • Standards are important • 4 reasons • Web Design teach critical concepts • Separation of content, structure and style. • 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 web-based. • Programmers need to know HTML, CSS, etc.
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.
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 • HyperTextMarkup Language • A simple text document can be “marked-up” 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 led to the introduction of “style” or formatting tags. • “style” tags are bad! • They have been 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 1996 and 2004.
Why are “style” tags bad? • The best answer is very complicated • Short Answer: • It is hard to maintain and even harder to change.
Semantic vs Style Semantic = Has Meaning Style =Specifies Appearance
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.
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) • 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.
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
Why Standards? Advantages • Accessibility • Forward Compatibility • Simpler and Faster Development • Faster Download & Display
Why Standards? • Accessibility • Forward Compatibility • Simpler and Faster Development • 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
Why Standards? • Accessibility • Forward Compatibility • Simpler and Faster Development • 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.
Why Standards? • Accessibility • Forward Compatibility • Simpler and Faster Development • 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.
Example: <center> <b> <font face="Georgia, Times New Roman, Times, serif" color=“#880000" size="+2">Sub-title</font></b></center> Why Standards? • Accessibility • Forward Compatibility • Simpler and Faster Development • 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
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">
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.
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.
Standards: Big Motivation • Without standards, you would have to test how your website looked on many different browsers. • Microsoft IE 60% • Mozilla Firefox 23% • Apple Safari 11% • Google Chrome 4% • Netscape < 1% • Opera < 1% • AOL Explorer • Amaya • Camino • Epiphany • Maxthon • Shiira • HotJava • Nintendo DS • PlayStation PWB • Lynx • Voyager • Micro Browser • Omniweb
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.
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: BrowserWars…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 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
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!