CSIS-401: Web Design Dr. Breimer

Outline 1.Web Design is a diverse field 2.Standards are really important 3.Web is going “old school” 4.Why is the separation thing so freakin’ important? 5.Wait Internet Explorer isn’t the only browser?

Definition Web design is the design of websites and web applications using HTML, CSS and images.websites web applicationsHTMLCSS Websites can be very diverse. E-tradeE-trade  Playhouse Disney Playhouse Disney Facebook  Protein Databank

Web Design Careers Visual Designer Expertise in PhotoShop, Fireworks, Flash, etc. Interest in visual arts, graphic design, etc. Interface Designer Expertise in graphical programming, human computer interaction and interfaces Interest in behavioral science, ergonomics, etc. Software Developer Most modern software has web-based components. Applications can be entirely web-based

Web Design Careers Database Administrator Most DB systems interface with web technologies. Larger website are entirely database-driven. 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. Marketing Online marketing is an entire field. Web technology can help marketers achieve new innovations.

HTML HyperText Markup Language A simple text document can be “marked- up” with tags to specify how it should be interpreted. HTML was supposed to be a structural or “semantic” language, –but it is now also a “style” or formatting language.

Semantic vs Style Semantic  Meaning This is a picture of a tiger A caption is meaningful. Images typically have a caption that describes the image. Style   Appearance This is a picture of a tiger Here, we specify how to display the caption but not the fact that it’s actually a caption.

Semantics descriptions are better! Figure 1 Figure 2 Figure 3 … Figure 99.caption { font-size: 10pt; font-style: italic; }

Semantics descriptions are better! Figure 1 Figure 2 Figure 3 … Figure 999 Image if you wanted to change the font size to 12pt? Good luck!

History Lesson: The Good Times Standardization was very important in the initial design of HTML ( ) –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 ( 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 ( ) –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” was formedwww.webstandards.org

W3C – What is it anyway? The World Wide Web Consortium (W3C)World Wide Web Consortium –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.

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.1 current standard –CSS 3.0 is under development

Current Web Standards Behavioral Standards –Document Object Model (DOM) – allows scripts and programs to access and update content and structure of an HTML document. Formal names are given to each part of an HTML document Each part has attributes and functions that can be manipulated. –JavaScript – can use the DOM to manipulate web pages right from the client’s browser. –Languages like PHP, JSP, ASP, ColdFusion, etc. can use the DOM but usually just create web pages from scratch.

Why Standards? Advantages 1.Accessibility 2.Forward Compatibility 3.Simpler and Faster Development 4.Faster Download & Display

Why Standards? 1.Accessibility 2.Forward Compatibility 3.Simpler and Faster Development 4.Faster Download & Display Standardized web pages will look and behave the same way on all browsers. And on all different types of devices. –Cell phones –PDA’s –Screen readers for the visually impaired

Why Standards? 1.Accessibility 2.Forward Compatibility 3.Simpler and Faster Development 4.Faster Download & Display Future standards are built on current standards Web pages made today will work in the future Note: Browser Wars created html tags that “should not be” The new standards eliminate them

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.

Why Standards? 1.Accessibility 2.Forward Compatibility 3.Simpler and Faster Development 4.Faster Download & Display Style/Appearance tags are bloated Table-based layouts are difficult to render especially for compact devices. Load one style sheet for an entire website rather than loading bloated HTML over and over again. Example: Sub-title

Rendering Engines Browsers actually have different rendering engines for standard and non-standard HTML code. The or tag tells the browser which engine to use.

Rendering Engines A rendering engine is the actual parser that interprets html code, JavaScript, and other embedded code. Does Size Matter? –Firefox.exe is 6MB –If you take out the non-standard parser, Firefox is less than 1MB. Does Speed Matter? –A 3.0 GHz process can parse a million lines of html code in about 4 seconds. –But, an iPod only has a 90MHz processor, 33 times slower.

Standards: Big Motivation Without standards, you would have to test and verify on many different browsers. Not a problem: 94% of the world uses two browsers. But, more and more people are browsing on different devices –Consider cell phones, PDA’s, GPS devices, and even refriderators… –W3C wants the web to fully work on any kind of device. –A vast majority of website won’t display properly on small devices. 1.Microsoft IE 86% 2.Mozilla Firefox 8% 3.Apple Safari 2% 4.Netscape 1% 5.Opera 1%

Validate Validate Validate It’s a pain but know that your web page will display properly on about 400 different browser variations.

Browser History : TBL makes the first browser in his physics labs. Dr. B gets his braces off and discovers Clearasil. 1993: Mosaic (the first real graphical browser) is built. Works for Mac’s, Windows, and UNIX. The birth of free porn. 1994: Netscape is born and they immediate start f**king with html. 1996: Microsoft wakes up and decides they need to monopolize this market.

Browser History : Browser Wars…different versions of JavaScript, CSS, and html emerge. While standard go down the toilet…at least a lot cool sh*t was developed. 1998: Netscape F’s Microsoft in a big way by making its code Open Source. Microsoft fights back by integrating its browser into the OS. 2000: Microsoft wins! Netscape sells out to AOL..com Bust! 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: The people who once worked for Netscape form the Mozilla Foundation (funded by AOL). 2005: Firefox busts out on the scene. First browser to make a serious dent in Microsoft’s monopoly. 2006: Dr. B finally learns CSS.

Summary Originally HTML was meant to be a structural/semantic language The Browser wars lead to the de- standardization of HTML. –Style tags were added. Standardization has made a comeback –This is why you have to learn CSS.