Slide 1OutlineDefinitionDefinitionWeb Design Career #1Web Design Career #2Web Design Career #3Web Design Career #4Web Design Career #5Web Design Career #6HTMLHTMLCSSWhy are “style” tags bad?Semantic vs StyleSemantic vs StyleSemantics + CSS is better!This is why the font tag sucks! (it’s a style tag)History Lesson: The Good TimesHistory Lesson: Browser WarsW3C – What is it anyway?Current Web StandardsCurrent Web StandardsWhy Standards?Why Standards?Why Standards?Why Standards?Why Standards?Rendering EnginesRendering EnginesWho cares if the rendering engine is a little slow?Standards: Big MotivationStandards: Big MotivationInternet-enable devicesValidate Validate ValidateTim Berners-Lee (TBL)Web Browser HistoryBrowser HistoryBrowser HistorySummaryCSIS-390: Web Application DevelopmentBackgroundDr. BreimerOutline1. Web Design is a diverse field2. Standards are important•4 reasons3. Web Design is going “old school”•Separation of structure and style.4. Internet Explorer isn’t the only browser?•Browser HistoryDefinition•Web design is the design of websites and web applications using HTML, CSS and images.Definition•Websites can be very diverse.E-trade  Playhouse DisneyFacebook  Protein DatabankWeb Design Career #1Visual Designer•Uses –Adobe PhotoShop, –Fireworks, –Flash, etc.•Expertise in graphic design, layouts, color theory, etc.Web Design Career #2Interface Designer•Expertise in –graphical programming, –human computer interaction and –interfaces•Background in behavioral science, ergonomics, etc.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.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.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.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.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>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 StyleSemantic = Has MeaningStyle =Specifies AppearanceSemantic 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.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 formedW3C – 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.orgCurrent 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 CSS2Current 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 serverWhy Standards?Advantages1. Accessibility2. Forward Compatibility3. Simpler and Faster Development4. Faster Download & DisplayWhy Standards?1. Accessibility2.