Advanced Web Techniques

<body> <h1>No frames</h1> <blockquote>Your browser does not support frames. Here's the list of slides, but they are graphical, so you will not get the maximum benefit without being able to use frames. </blockquote> <html> <head> <meta name=ProgId content=PowerPoint.Slide> <meta name=Generator content="Microsoft PowerPoint 9"> <link id=Main-File rel=Main-File href="./"> <link rel=Preview href=preview.wmf> <script>  </script> <meta name=Robots content=NoIndex> </head> <body bgcolor=white text=black link=black vlink=black alink=black> <p><font face="Arial,Helvetica" size=2><b><a href="javascript:parent.GoToSld('v3_slide0001.html');">Advanced Web Techniques <font face=Wingdings>1</font></a></b></font> <table> <tr> <td width=5 nowrap></td> <td width="100%"></td> </tr> <tr> <td colspan=1></td> <td colspan=1><font face="Arial,Helvetica" size=2>Incorporating Dynamic Content into Web Presentations</font></td> </tr> <tr> <td colspan=1></td> <td colspan=1><font face="Arial,Helvetica" size=2>Paco Hope</font></td> </tr> </table> </p> <p><font face="Arial,Helvetica" size=2><b><a href="javascript:parent.GoToSld('v3_slide0002.html');">Goal of this Series</a></b></font> <table> <tr> <td width=5 nowrap></td> <td width="100%"></td> </tr> <tr> <td colspan=1></td> <td colspan=1><font face="Arial,Helvetica" size=2>Provide a clear framework to categorize existing technologies</font></td> </tr> <tr> <td colspan=1></td> <td colspan=1><font face="Arial,Helvetica" size=2>Provide clear differentiation between technologies</font></td> </tr> <tr> <td colspan=1></td> <td colspan=1><font face="Arial,Helvetica" size=2>Introduce the basic structure and syntax of three key technologies</font></td> </tr> <tr> <td colspan=1></td> <td colspan=1><font face="Arial,Helvetica" size=2>Provide foundation which can be sup-plemented by existing documentation</font></td> </tr> </table> </p> <p><font face="Arial,Helvetica" size=2><b><a href="javascript:parent.GoToSld('v3_slide0003.html');">Dynamic versus Static</a></b></font> <table> <tr> <td width=5 nowrap></td> <td width="100%"></td> </tr> <tr> <td colspan=1></td> <td colspan=1><font face="Arial,Helvetica" size=2>Dynamic</font></td> </tr> <tr> <td colspan=1></td> <td colspan=1><font face="Arial,Helvetica" size=2>Reacts to stimuli (date, time, database, weather, user input)</font></td> </tr> <tr> <td colspan=1></td> <td colspan=1><font face="Arial,Helvetica" size=2>Sometimes slower</font></td> </tr> <tr> <td colspan=1></td> <td colspan=1><font face="Arial,Helvetica" size=2>Requires computation (sometimes an issue)</font></td> </tr> <tr> <td colspan=1></td> <td colspan=1><font face="Arial,Helvetica" size=2>Reduces effectiveness of caching</font></td> </tr> <tr> <td colspan=1></td> <td colspan=1><font face="Arial,Helvetica" size=2>Static</font></td> </tr> <tr> <td colspan=1></td> <td colspan=1><font face="Arial,Helvetica" size=2>File contents served<br> as is</font></td> </tr> <tr> <td colspan=1></td> <td colspan=1><font face="Arial,Helvetica" size=2>No processing done</font></td> </tr> <tr> <td colspan=1></td> <td colspan=1><font face="Arial,Helvetica" size=2>Fastest delivery (13 system calls in apache under Solaris)</font></td> </tr> <tr> <td colspan=1></td> <td colspan=1><font face="Arial,Helvetica" size=2>Benefits from caching</font></td> </tr> </table> </p> <p><font face="Arial,Helvetica" size=2><b><a href="javascript:parent.GoToSld('v3_slide0006.html');">Two Classes of Dynamism</a></b></font> <table> <tr> <td width=5 nowrap></td> <td width="100%"></td> </tr> <tr> <td colspan=1></td> <td colspan=1><font face="Arial,Helvetica" size=2>Client-side</font></td> </tr> <tr> <td colspan=1></td> <td colspan=1><font face="Arial,Helvetica" size=2>(handled by web browser or software on local machine)</font></td> </tr> <tr> <td colspan=1></td> <td colspan=1><font face="Arial,Helvetica" size=2>Java</font></td> </tr> <tr> <td colspan=1></td> <td colspan=1><font face="Arial,Helvetica" size=2>JavaScript</font></td> </tr> <tr> <td colspan=1></td> <td colspan=1><font face="Arial,Helvetica" size=2>ActiveX</font></td> </tr> <tr> <td colspan=1></td> <td colspan=1><font face="Arial,Helvetica" size=2>Shockwave</font></td> </tr> <tr> <td colspan=1></td> <td colspan=1><font face="Arial,Helvetica" size=2>RealAudio (video, etc)</font></td> </tr> <tr> <td colspan=1></td> <td colspan=1><font face="Arial,Helvetica" size=2>Server-side</font></td> </tr> <tr> <td colspan=1></td> <td colspan=1><font face="Arial,Helvetica" size=2>(handled by web server)</font></td> </tr> <tr> <td colspan=1></td> <td colspan=1><font face="Arial,Helvetica" size=2>CGI</font></td> </tr> <tr> <td colspan=1></td> <td colspan=1><font face="Arial,Helvetica" size=2>SSI</font></td> </tr> <tr> <td colspan=1></td> <td colspan=1><font face="Arial,Helvetica" size=2>PHP</font></td> </tr> <tr> <td colspan=1></td> <td colspan=1><font face="Arial,Helvetica" size=2>ASP</font></td> </tr> <tr> <td colspan=1></td> <td colspan=1><font face="Arial,Helvetica" size=2>Cold Fusion</font></td> </tr> <tr> <td colspan=1></td> <td colspan=1><font face="Arial,Helvetica" size=2>Domino</font></td> </tr> </table> </p> <p><font face="Arial,Helvetica" size=2><b><a href="javascript:parent.GoToSld('v3_slide0007.html');">Taxonomy of Technologies</a></b></font></p> <p><font face="Arial,Helvetica" size=2><b><a href="javascript:parent.GoToSld('v3_slide0004.html');">Static Web Content Illustrated</a></b></font> <table> <tr> <td width=5 nowrap></td> <td width="100%"></td> </tr> <tr> <td colspan=1></td> <td colspan=1><font face="Arial,Helvetica" size=2>1. Web browser makes HTTP request</font></td> </tr> <tr> <td colspan=1></td> <td colspan=1><font face="Arial,Helvetica" size=2>2. Web server matches URL against file system</font></td> </tr> <tr> <td colspan=1></td> <td colspan=1><font face="Arial,Helvetica" size=2>3. Web server finds corresponding file</font></td> </tr> <tr> <td colspan=1></td> <td colspan=1><font face="Arial,Helvetica" size=2>4. Web server reads file off disk</font></td> </tr> <tr> <td colspan=1></td> <td colspan=1><font face="Arial,Helvetica" size=2>5. Web server sends file contents to browser in HTTP response</font></td> </tr> <tr> <td colspan=1></td> <td colspan=1><font face="Arial,Helvetica" size=2>6. Web browser renders HTML graphically</font></td> </tr> </table> </p> <p><font face="Arial,Helvetica" size=2><b><a href="javascript:parent.GoToSld('v3_slide0005.html');">Server-side Dynamic Example</a></b></font></p> <p><font face="Arial,Helvetica" size=2><b><a href="javascript:parent.GoToSld('v3_slide0017.html');">The Rendering Process</a></b></font></p> <p><font face="Arial,Helvetica" size=2><b><a href="javascript:parent.GoToSld('v3_slide0008.html');">Tour of Technology</a></b></font> <table> <tr> <td width=5 nowrap></td> <td width="100%"></td> </tr> <tr> <td colspan=1></td> <td colspan=1><font face="Arial,Helvetica" size=2>JavaScript</font></td> </tr> <tr> <td colspan=1></td> <td colspan=1><font face="Arial,Helvetica" size=2>Java</font></td> </tr> <tr> <td colspan=1></td> <td colspan=1><font face="Arial,Helvetica" size=2>Active X</font></td> </tr> <tr> <td colspan=1></td> <td colspan=1><font face="Arial,Helvetica" size=2>ASP</font></td> </tr> <tr> <td colspan=1></td> <td colspan=1><font face="Arial,Helvetica" size=2>SSI</font></td> </tr> <tr> <td colspan=1></td> <td colspan=1><font face="Arial,Helvetica" size=2>CGI</font></td> </tr> <tr> <td colspan=1></td> <td colspan=1><font face="Arial,Helvetica" size=2>PHP</font></td> </tr> </table> </p> <p><font face="Arial,Helvetica" size=2><b><a href="javascript:parent.GoToSld('v3_slide0009.html');">JavaScript: What is it?</a></b></font> <table> <tr> <td width=5 nowrap></td> <td width="100%"></td> </tr> <tr> <td colspan=1></td> <td colspan=1><font face="Arial,Helvetica" size=2>Scripting language</font></td> </tr> <tr> <td colspan=1></td> <td colspan=1><font face="Arial,Helvetica" size=2>Interpretted by browsers</font></td> </tr> <tr> <td colspan=1></td> <td colspan=1><font face="Arial,Helvetica" size=2>Can do useful housekeeping and interactivity tasks</font></td> </tr> <tr> <td colspan=1></td> <td colspan=1><font face="Arial,Helvetica" size=2>Not standardized</font></td> </tr> </table> </p> <p><font face="Arial,Helvetica" size=2><b><a href="javascript:parent.GoToSld('v3_slide0010.html');">JavaScript</a></b></font> <table> <tr> <td width=5 nowrap></td> <td width="100%"></td> </tr> <tr> <td colspan=1></td> <td colspan=1><font face="Arial,Helvetica" size=2>Good</font></td> </tr> <tr> <td colspan=1></td> <td colspan=1><font face="Arial,Helvetica" size=2>Adds spice</font></td> </tr> <tr> <td colspan=1></td> <td colspan=1><font face="Arial,Helvetica" size=2>Readily available</font></td> </tr> <tr> <td colspan=1></td> <td colspan=1><font face="Arial,Helvetica" size=2>Improves usability of web pages</font></td> </tr> <tr> <td colspan=1></td> <td colspan=1><font face="Arial,Helvetica" size=2>Many examples and cookbooks available</font></td> </tr> </table> </p> <p><font face="Arial,Helvetica" size=2><b><a href="javascript:parent.GoToSld('v3_slide0011.html');">Java: What is it?</a></b></font> <table> <tr> <td width=5 nowrap></td> <td width="100%"></td> </tr> <tr> <td colspan=1></td> <td colspan=1><font face="Arial,Helvetica" size=2>Programming language not necessarily web-related</font></td> </tr> <tr> <td colspan=1></td> <td colspan=1><font face="Arial,Helvetica" size=2>Interpretted by browsers</font></td> </tr> <tr> <td colspan=1></td> <td colspan=1><font face="Arial,Helvetica" size=2>Powerful and extendable</font></td> </tr> <tr> <td colspan=1></td> <td colspan=1><font face="Arial,Helvetica" size=2>Standards are shaky</font></td> </tr> </table> </p> <p><font face="Arial,Helvetica" size=2><b><a href="javascript:parent.GoToSld('v3_slide0012.html');">Java</a></b></font> <table> <tr> <td width=5 nowrap></td> <td width="100%"></td> </tr> <tr> <td colspan=1></td> <td colspan=1><font face="Arial,Helvetica" size=2>Good</font></td> </tr> <tr> <td colspan=1></td> <td colspan=1><font face="Arial,Helvetica" size=2>Powerful</font></td> </tr> <tr> <td colspan=1></td> <td colspan=1><font face="Arial,Helvetica" size=2>Flexible, extensible</font></td> </tr> <tr> <td colspan=1></td> <td colspan=1><font face="Arial,Helvetica" size=2>Offloads computation</font></td> </tr> <tr> <td colspan=1></td> <td colspan=1><font face="Arial,Helvetica" size=2>Can perform complex tasks</font></td> </tr> <tr> <td colspan=1></td> <td colspan=1><font face="Arial,Helvetica" size=2>Robust security</font></td> </tr> <tr> <td colspan=1></td> <td colspan=1><font face="Arial,Helvetica" size=2>Good development environments</font></td> </tr> </table> </p> <p><font face="Arial,Helvetica" size=2><b><a href="javascript:parent.GoToSld('v3_slide0015.html');">ActiveX</a></b></font> <table> <tr> <td width=5 nowrap></td> <td width="100%"></td> </tr> <tr> <td colspan=1></td> <td colspan=1><font face="Arial,Helvetica" size=2>Client-side, Windows, IE only (not even Mac)</font></td> </tr> <tr> <td colspan=1></td> <td colspan=1><font face="Arial,Helvetica" size=2>Provides complete program functionality</font></td> </tr> <tr> <td colspan=1></td> <td colspan=1><font face="Arial,Helvetica" size=2>Full access to client system</font></td> </tr> <tr> <td colspan=1></td> <td colspan=1><font face="Arial,Helvetica" size=2>Can be developed in several languages (Basic, C, C++)</font></td> </tr> <tr> <td colspan=1></td> <td colspan=1><font face="Arial,Helvetica" size=2>Rotten security model</font></td> </tr> </table> </p> <p><font face="Arial,Helvetica" size=2><b><a href="javascript:parent.GoToSld('v3_slide0016.html');">ActiveX</a></b></font> <table> <tr> <td width=5 nowrap></td> <td width="100%"></td> </tr> <tr> <td colspan=1></td> <td colspan=1><font face="Arial,Helvetica" size=2>Good</font></td> </tr> <tr> <td colspan=1></td> <td colspan=1><font face="Arial,Helvetica" size=2>Easy to develop (if you already work in Windows languages, like VB and VC++)</font></td> </tr> <tr> <td colspan=1></td> <td colspan=1><font face="Arial,Helvetica" size=2>Easy to integrate with Windows products</font></td> </tr> <tr> <td colspan=1></td> <td colspan=1><font face="Arial,Helvetica" size=2>Full access can solve some otherwise difficult problems</font></td> </tr> <tr> <td colspan=1></td> <td colspan=1><font face="Arial,Helvetica" size=2>Bad</font></td> </tr> <tr> <td colspan=1></td> <td colspan=1><font face="Arial,Helvetica" size=2>Windows IE only</font></td> </tr> <tr> <td colspan=1></td> <td colspan=1><font face="Arial,Helvetica" size=2>Large downloads like Java</font></td> </tr> <tr> <td colspan=1></td> <td colspan=1><font face="Arial,Helvetica" size=2>Security model encourages costly applet signing or lax browsing practices</font></td> </tr> </table> </p> <p><font face="Arial,Helvetica" size=2><b><a href="javascript:parent.GoToSld('v3_slide0013.html');">Active Server Pages (ASP)</a></b></font> <table> <tr> <td width=5 nowrap></td> <td width="100%"></td> </tr> <tr> <td colspan=1></td> <td colspan=1><font face="Arial,Helvetica" size=2>Windows only, server-side dynamic content</font></td> </tr> <tr> <td colspan=1></td> <td colspan=1><font face="Arial,Helvetica" size=2>Connects seamlessly to Windows products</font></td> </tr> <tr> <td colspan=1></td> <td colspan=1><font face="Arial,Helvetica" size=2>Lots of modules available</font></td> </tr> <tr> <td colspan=1></td> <td colspan=1><font face="Arial,Helvetica" size=2>Includes database connectivity</font></td> </tr> <tr> <td colspan=1></td> <td colspan=1><font face="Arial,Helvetica" size=2>Rapid development environment</font></td> </tr> </table> </p> <p><font face="Arial,Helvetica" size=2><b><a href="javascript:parent.GoToSld('v3_slide0014.html');">ASP</a></b></font> <table> <tr> <td width=5 nowrap></td> <td width="100%"></td> </tr> <tr> <td colspan=1></td> <td colspan=1><font face="Arial,Helvetica" size=2>Good</font></td> </tr> <tr> <td colspan=1></td> <td colspan=1><font face="Arial,Helvetica" size=2>Easy to develop</font></td> </tr> <tr> <td colspan=1></td> <td colspan=1><font face="Arial,Helvetica" size=2>Easy to integrate with Windows products</font></td> </tr> <tr> <td colspan=1></td> <td colspan=1><font face="Arial,Helvetica" size=2>Development environment is nice</font></td> </tr> <tr> <td colspan=1></td> <td colspan=1><font face="Arial,Helvetica" size=2>Many simple apps are easily developed</font></td> </tr> </table> </p> <p><font face="Arial,Helvetica" size=2><b><a href="javascript:parent.GoToSld('v3_slide0018.html');">Server Side Includes</a></b></font> <table> <tr> <td width=5 nowrap></td> <td width="100%"></td> </tr> <tr> <td colspan=1></td> <td colspan=1><font face="Arial,Helvetica" size=2>Processes simple �comments� to execute commands</font></td> </tr> <tr> <td colspan=1></td> <td colspan=1><font face="Arial,Helvetica" size=2>Includes some control flow (if, else, variables)</font></td> </tr> <tr> <td colspan=1></td> <td colspan=1><font face="Arial,Helvetica" size=2>Enables invokation of programs or decisions based on a few trivial criteria</font></td> </tr> </table> </p> <p><font face="Arial,Helvetica" size=2><b><a href="javascript:parent.GoToSld('v3_slide0019.html');">Server Side Includes</a></b></font> <table> <tr> <td width=5 nowrap></td> <td width="100%"></td> </tr> <tr> <td colspan=1></td> <td colspan=1><font face="Arial,Helvetica" size=2>Good</font></td> </tr> <tr> <td colspan=1></td> <td colspan=1><font face="Arial,Helvetica" size=2>Quick and simple</font></td> </tr> <tr> <td colspan=1></td> <td colspan=1><font face="Arial,Helvetica" size=2>Building block for more sophisticated content</font></td> </tr> <tr> <td colspan=1></td> <td colspan=1><font face="Arial,Helvetica" size=2>Enables modular site design</font></td> </tr> <tr> <td colspan=1></td> <td colspan=1><font face="Arial,Helvetica" size=2>Does not defeat caching</font></td> </tr> </table> </p> <p><font face="Arial,Helvetica" size=2><b><a href="javascript:parent.GoToSld('v3_slide0020.html');">Common Gateway Interface</a></b></font> <table> <tr> <td width=5 nowrap></td> <td width="100%"></td> </tr> <tr> <td colspan=1></td> <td colspan=1><font face="Arial,Helvetica" size=2>Allows execution of arbitrary programs</font></td> </tr> <tr> <td colspan=1></td> <td colspan=1><font face="Arial,Helvetica" size=2>Any language can be used with CGI</font></td> </tr> <tr> <td colspan=1></td> <td colspan=1><font face="Arial,Helvetica" size=2>Not platform-specific</font></td> </tr> <tr> <td colspan=1></td> <td colspan=1><font face="Arial,Helvetica" size=2>Source code is protected</font></td> </tr> </table> </p> <p><font face="Arial,Helvetica" size=2><b><a href="javascript:parent.GoToSld('v3_slide0021.html');">CGI</a></b></font> <table> <tr> <td width=5 nowrap></td> <td width="100%"></td> </tr> <tr> <td colspan=1></td> <td colspan=1><font face="Arial,Helvetica" size=2>Good</font></td> </tr> <tr> <td colspan=1></td> <td colspan=1><font face="Arial,Helvetica" size=2>Maximally flexible</font></td> </tr> <tr> <td colspan=1></td> <td colspan=1><font face="Arial,Helvetica" size=2>Allows developer to use their favorite environment</font></td> </tr> <tr> <td colspan=1></td> <td colspan=1><font face="Arial,Helvetica" size=2>Easily portable</font></td> </tr> <tr> <td colspan=1></td> <td colspan=1><font face="Arial,Helvetica" size=2>Can protect secrets or access proprietary data</font></td> </tr> </table> </p> <p><font face="Arial,Helvetica" size=2><b><a href="javascript:parent.GoToSld('v3_slide0022.html');">PHP</a></b></font> <table> <tr> <td width=5 nowrap></td> <td width=20 nowrap></td> <td width="100%"></td> </tr> <tr> <td colspan=1></td> <td colspan=2><font face="Arial,Helvetica" size=2>Powerful scripting language</font></td> </tr> <tr> <td colspan=1></td> <td colspan=2><font face="Arial,Helvetica" size=2>Like C, Perl, shell scripts</font></td> </tr> <tr> <td colspan=1></td> <td colspan=2><font face="Arial,Helvetica" size=2>Lots of modules standard</font></td> </tr> <tr> <td colspan=2></td> <td colspan=1><font face="Arial,Helvetica" size=2>Oracle</font></td> </tr> <tr> <td colspan=2></td> <td colspan=1><font face="Arial,Helvetica" size=2>MySQL</font></td> </tr> <tr> <td colspan=2></td> <td colspan=1><font face="Arial,Helvetica" size=2>MS SQL</font></td> </tr> <tr> <td colspan=2></td> <td colspan=1><font face="Arial,Helvetica" size=2>Informix</font></td> </tr> <tr> <td colspan=2></td> <td colspan=1><font face="Arial,Helvetica" size=2>Etc�</font></td> </tr> <tr> <td colspan=1></td> <td colspan=2><font face="Arial,Helvetica" size=2>Integrates into web server</font></td> </tr> <tr> <td colspan=1></td> <td colspan=2><font face="Arial,Helvetica" size=2>Can be modular and efficient</font></td> </tr> </table> </p> <p><font face="Arial,Helvetica" size=2><b><a href="javascript:parent.GoToSld('v3_slide0023.html');">PHP (personal home page)</a></b></font> <table> <tr> <td width=5 nowrap></td> <td width="100%"></td> </tr> <tr> <td colspan=1></td> <td colspan=1><font face="Arial,Helvetica" size=2>Good</font></td> </tr> <tr> <td colspan=1></td> <td colspan=1><font face="Arial,Helvetica" size=2>Powerful, fast, small</font></td> </tr> <tr> <td colspan=1></td> <td colspan=1><font face="Arial,Helvetica" size=2>Source is hidden</font></td> </tr> <tr> <td colspan=1></td> <td colspan=1><font face="Arial,Helvetica" size=2>Includes support for tons of databases</font></td> </tr> <tr> <td colspan=1></td> <td colspan=1><font face="Arial,Helvetica" size=2>Easy to incorporate into HTML</font></td> </tr> <tr> <td colspan=1></td> <td colspan=1><font face="Arial,Helvetica" size=2>Similar to familiar languages</font></td> </tr> </table> </p> </body> </html> </body>