1 / 40

CSIS-401: Web Design

CSIS-401: Web Design. Dr. Breimer. Web Design is a diverse field Standards are important 4 reasons Web Design is going “ old school ” Separation of structure and style. Internet Explorer isn’t the only browser? Browser History. Some Background & History.

shelby
Download Presentation

CSIS-401: Web Design

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. CSIS-401: Web Design Dr. Breimer

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

  3. Web design is the design of websites and web applications using HTML, CSS and images. Definition

  4. Websites can be very diverse. E-trade Playhouse Disney Facebook  Protein Databank Definition

  5. Visual Designer Uses Adobe PhotoShop, Fireworks, Flash, etc. Expertise in graphic design, layouts, color theory, etc. Web Design Career #1

  6. Interface Designer Expertise in graphical programming, human computer interaction and interfaces Background in behavioral science, ergonomics, etc. Web Design Career #2

  7. 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 #3

  8. 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 #4

  9. 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 #5

  10. 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. Web Design Career #6

  11. 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> HTML

  12. 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). HTML

  13. 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. CSS

  14. The best answer is very complicated Short Answer: Leads to bloated HTML code that is hard to maintain. Why are “style” tags bad?

  15. Semantic = Has Meaning Style =Specifies Appearance Semantic vs Style

  16. 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. Semantic vs Style

  17. <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; } Semantics + CSS is better!

  18. <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! This is why the font tag sucks!(it’s a style tag)

  19. 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: The Good Times

  20. 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 History Lesson: Browser Wars

  21. 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 W3C – What is it anyway?

  22. 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

  23. 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 Current Web Standards

  24. Advantages Accessibility Forward Compatibility Simpler and Faster Development Faster Download & Display Why Standards?

  25. 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 PDA’s Screen readers for the visually impaired Why Standards?

  26. 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 Why Standards? • 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.

  27. 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. Why Standards?

  28. 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 • Example: <center> <b> <font face="Georgia, Times New Roman, Times, serif" color=“#880000" size="+2">Sub-title</font></b></center> Why Standards?

  29. 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

  30. 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. Rendering Engines

  31. 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. Who cares if the rendering engine is a little slow?

  32. Without standards, you would have to test how your website looked on many different browsers. 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

  33. 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. Microsoft IE 67% Mozilla Firefox 19% Apple Safari 9% Google Chrome 2% Standards: Big Motivation

  34. Portable Media Players To buy music Automobiles To send info to mechanics Refrigerators To buy more groceries What will they think of next? Internet-enable devices

  35. 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. Validate Validate Validate

  36. 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.

  37. 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 Web Browser History

  38. 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

  39. 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. Browser History

  40. 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! Summary

More Related