1. Chapter 1 Highlights CSIS-390

2.  A graduate of Oxford University  wrote the first web client and server in 1990.  His specifications of URIs, HTTP and HTML were refined but are still used as the backbone of the WWW TIM BERNERS-LEE

3. 1.You enter http://server.com into your browser’s address bar. 2.Your browser looks up the IP address for server.com. 3.Your browser issues a request for the home page at server.com. 4.The request crosses the Internet and arrives at the server.com web server. 5.The web server, having received the request, looks for the web page on its hard disk. 6.The server retrieves the web page and returns it to the browser. 7.Your browser displays the web page. REQUEST/RESPONSE PROCEDURE

4. Request/respo nse process BASIC

5. 1.You enter http://server.com into your browser’s address bar. 2.Your browser looks up the IP address for server.com. 3.Your browser issues a request to that address for the web server’s home page. 4.The request crosses the Internet and arrives at the server.com web server. 5.The web server, having received the request, fetches the home page from its hard disk. REQUEST/RESPONSE PROCEDURE

6. 6.With the home page now in memory, the web server notices that it is a file incorporating PHP scripting and passes the page to the PHP interpreter. 7.The PHP interpreter executes the PHP code. 8.Some of the PHP contains MySQL statements, which the PHP interpreter now passes to the MySQL database engine. 9.The MySQL database returns the results of the statements back to the PHP interpreter. 10.The PHP interpreter returns the results of the executed PHP code, along with the results from the MySQL database, to the web server. 11.The web server returns the page to the requesting client, which displays it. REQUEST/RESPONSE PROCEDURE

7. Request/respo nse process DYNAMIC

8.  Content (not really a layer)  The text, images, audio, and video 1.Structural Layer  Semantic markup with HTML 2.Presentational Layer  CSS code to decorate the HTML elements 3.Behavioral Layer  JavaScript code that can make a web page dynamic by responding to user interaction THE LAYERS OF A WEB PAGE

9. 1.Client Tier  The web browser, rendering engine, web viewer.  Sometimes rendering engines/agents can be embedded in other applications.  Examples: Chrome, Firefox, Safari, Internet Explorer, Opera  Responsible for displaying a web page  HTML and CSS rendering  JavaScript interpreter TIERS OF A WEB APPLICATION

10. 2.Server Tier  The web server, daemon software  Examples: Apache, Microsoft IIS, nginx, Google’s GWS, Java System Web Server, Node JS  Responsible for responding to HTTP requests and server-side processing  Server-side scripting languages: PHP, ASP, JSP, ColdFusion, Ruby, Perl, Python, etc. TIERS OF A WEB APPLICATION

11. 3.Database Tier  Database server  Examples: MySQL, Microsoft’s SQL Server, Oracle 8i or rDB, IBM’s DB2, PostgreSQL, SQLite, etc.  Responsible for content management TIERS OF A WEB APPLICATION

12. HyperText Markup Language  A simple text document can be “marked-up” with tags to specify how it should be interpreted. Level 1 Header This is a paragraph… HTML

13. SEMANTICS  HTML was supposed to be a structural or semantic language,  Browser Wars led to the introduction of “style” or formatting tags.  Formatting tags have been removed from the HTML standards (called deprecation).

14. 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 abandoned between 1996 and 2004.

15. CSS p { text-indent: 16px; margins: 12px 0px; padding: 0px; } table { border: 1px solid black; }

16.  …nothing to do with the Java programming languages  Originally called LiveScript  developed by Netscape in 1994  In 1996, Microsoft developed Jscript for IE  In 1996, a standard called ECMAScript was proposed.  In 1999, most major web browsers started to follow the ECMA standard, even though we still use the term JavaScript JAVASCRIPT

17. function displayDate() { document.getElementById("demo").innerHTML=Date(); } My First JavaScript This is a paragraph. Display Date HTML & JAVASCRIPT

18.  A somewhat popular server-side scripting language  http://php.net http://php.net  Comes with Apache (popular free web server software)  Example:http://www.w3schools.com/php/showphp.asp?filename =demo_loop_forhttp://www.w3schools.com/php/showphp.asp?filename =demo_loop_for  PHP stands for P HP H ypertext P re-processor, where  …. PHP

19. SEMANTIC VS STYLE Semantic = Has Meaning Style = Specifies Appearance

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

21. SEMANTICS + CSS IS BETTER! Figure 1 Figure 2 Figure 3 … Figure 99.caption { font-size: 10pt; font-style: italic; }

22. THIS IS WHY THE FONT TAG SUCKS! (IT’S A STYLE TAG) Figure 1 Figure 2 Figure 3 … Figure 999 Sub-title Imaging if you wanted to change the font size to 12pt for all image captions? Good luck!

23. HISTORY LESSON: THE GOOD TIMES  Standardization was very important in the initial design of HTML (1991-1994)  HTML was meant to be only structural/semantic  The presentation of web pages depended on the device.  Netscape & Microsoft created style tags ( for example) so that web page designers could control the presentation of their web pages.

24. 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 www.webstandards.org

25. 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  http://validator.w3.org/ http://validator.w3.org/

26.  Web Hypertext Application Technology Working Group  Pioneers of HTML5, which better supports web applications, and the idea of a living standard.  founded by individuals of Apple, the Mozilla Foundation, and Opera Software in 2004 who were increasingly concerned about the W3C’s direction with XHTML, lack of interest in HTML and apparent disregard for the needs of real- world authors. HTML5 AND WHATWG

27. Fixed  Example HTML 3.0  Once the rules are established, they cannot be changed.  After a period of time, all the new ideas that are considered good are implemented in a new standard  HTML 4.0 Living  Example HTML 5  Initial rules are established based on previous work  Good changes can be immediately adopted into the living standard, i.e., progressive improvement rather than incremental. FIXED VS. LIVING STANDARD

28. Fixed  Vendors develop browsers and tools for a specific standard (HTML 4.01)  Designers can develop web pages and applications for the same specific standard (HTML 4.01).  Since the standard won’t change, everything will work forever, right? Living  Vendors develop and update browsers based on the current live standard, which is always adding new innovations.  Thus, designers can develop a web applications using the latest innovations, i.e., they don’t have to settle on a specific version, i.e. 4.01.  Since the standard is constantly changing, old websites might break or become obsolete as browsers evolve with the living standard. FIXED VS. LIVING STANDARD

29. Fixed  Web browsers need to be backward compatible with old standards, i.e., HTML 1.0, 2.0, 3.0, etc.  Or, the have to specify that the old standards are no longer supported.  Designers get trapped in an old standard that may no longer be supported.  Websites will still break, eventually! Living  Web browsers only need to support the current living standard.  But, the current standard always tries to be backward compatible.  If an element gets dropped from the standard it is for good reason, and designers shouldn’t expect it to work in the future.  Websites break, but for good reasons. FIXED VS. LIVING STANDARD

30. WHY STANDARDS? Advantages 1.Accessibility 2.Forward Compatibility 3.Simpler and Faster Development 4.Faster Download & Display

31. WHY STANDARDS? 1.Accessibility 2.Forward Compatibility 3.Simpler and Faster Development 4.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

32. 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  Unless there is a really good reason to make them break.

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

34. WHY STANDARDS? 1.Accessibility 2.Forward Compatibility 3.Simpler and Faster Development 4.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

35. RENDERING ENGINES  Some web browsers actually have different rendering engines for parsing different versions of HTML.  The and tag can tell a browser which engine to use.

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

37. WHO CARES IF THE RENDERING ENGINE IS A LITTLE SLOW?  True, on modern devices you won’t notice the difference.  However, consider that the device rendering the web page could be an old cellphone with a 133 MHz processor.

38. STANDARDS: BIG MOTIVATION  More and more people are browsing on different types of devices  Tablets, phones, iPods, and now watches.  W3C wants the web to fully work on any kind of device.  Many non-standard websites won’t display properly on certain devices.

39. VALIDATE VALIDATE VALIDATE  http://validator.w3.org/ http://validator.w3.org/  It’s a pain but…  At least you know that your web page will display properly on hundreds of different browser variations that now support HTML5.

40. 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 stuff.  1995: Microsoft wakes up, makes a browser, and decides to add even more proprietary stuff.

41. 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 S was developed.  1998: Netscape screws Microsoft 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.

42. BROWSER HISTORY  2002: Kelly Clarkson (not Dr. B) wins American Idol!  2003: Some programmers who once worked for Netscape form the Mozilla Foundation  2005: Mozilla’s Firefox busts out on the scene. First browser to make a serious dent in Microsoft’s monopoly.  2006: Standards become important; Developers really start to make web pages the correct way as TBL envisioned in 1991.  2012: W3C finally aggress that a living HTML5 standard is the way to go. Google’s Chrome finally unseats IE as the #1 browser. Life is good again.

43. SUMMARY  Originally HTML was meant to be a standard structural/semantic language  The Browser wars lead to the de-standardization of HTML, CSS, and JavaScript.  Proprietary code and technology (Flash) become popular.  Standardization has made a comeback and HTML5 + CSS + JavaScript is all you need on the client tier to make web applications.