1. Copyright © 2004 ProsoftTraining, All Rights Reserved. Lesson 11: Advanced Web Technologies

2. Lesson 11 Objectives Identify client-side and server-side scripting technologies Connect Web pages to databases Use CSS to apply formatting to Web pages Identify the benefits of Dynamic HTML (DHTML) Define the function of the Document Object Model (DOM) and its relationship to browsers Discuss how to develop Web pages for PDAs and smart clients Define Web application frameworks Create aliases with TinyURL Use advanced "Web 2.0" technologies to create Web pages Compare the use of a service provider to hosting your own Web site

3. Extending HTML Client-side and server-side scripting Additional ways to apply Cascading Style Sheets (CSS) Dynamic HTML (DHTML) Web pages for PDAs and smart clients Web application frameworks Aliases with TinyURL Advanced Web technologies made possible through Web 2.0 and Ajax

4. Server-Side and Client-Side Languages Programming concepts – Not required knowledge, but essential terminology is useful to understand Programming statements – if/then – if/then/else – do while – do until – break

5. Server-Side Languages Attributes of server-side language: – Code is executed by the Web server, not the Web browser – Code executes because an interpreter has been installed and activated on the Web server Server-side scripts are used for various purposes: – Browser detection – Database connectivity – Cookie creation and identification – Logon scripts – Hit counters – File uploading and downloading

6. PHP Hypertext Preprocessor (PHP) An interpreted server-side scripting language for creating dynamic Web pages Embedded in HTML pages but usually executed on a Web server Example of PHP code: <?php $envVars = array("HTTP_USER_AGENT"); foreach($envVars as $var) { print " PHP CGI Example Hello, World! Your user agent is: ${$var}. "; } ?>

7. Practical Extraction and Report Language (Perl) Another server-interpreted language Older, but very popular Example of Perl code: #!/usr/bin/perl use CGI qw/:all/; $cgi_object = CGI::new(); print "Content-type: text/html\n\n"; print " \n \n \nPerl CGI Example\n \n \n Hello, World! \nYour user agent is: \n"; print $cgi_object->user_agent(); print ". \n";

8. Active Server Pages (ASP) using VBScript Microsofts original server-side scripting solution Example of ASP code using VBScript: ASP CGI Example Hello, World! <% path = Request.ServerVariables("PATH_INFO") pagename = Request.ServerVariables("HTTP_HOST") method = Request.ServerVariables("REQUEST_METHOD") browser = Request.ServerVariables("HTTP_USER_AGENT") user = Request.ServerVariables("REMOTE_ADDR")

9. The C Language A procedural programming language (relies upon subprograms to accomplish a task in an application) C is a time-honored language, usually used to create stand-alone applications and operating systems (e.g., Linux/UNIX) Can also be used for CGI Example of C code: #include int main() { printf("Hello, World!\n"); return 0; } Note this code includes a reference to a library called stdio.h

10. C++ Object-oriented programming language – A style of programming that links data to the processes that manipulate it – May include procedural elements, but instead of using subprograms to accomplish a task, will create an object that can then be manipulated throughout the program – Once an object is created, it can be reused Platform dependent: – Must be compiled to a specific architecture (e.g, IBM- compatible, PowerPC)

11. Java Object-oriented programming language Compiled Platform-independent – Marketing: Write once, run anywhere – Reality: Write once, test everywhere Java can be used to write: – Stand-alone applications – Servlets – JavaServer Pages (JSP)

12. Visual Basic A compiled programming language developed by Microsoft Corporation Used for stand-alone applications and server-side Web applications Once only procedural, now has object- based elements

13. C# Object-oriented programming language Compiled Platform-dependent Used for Microsoft.NET program

14. Server Side Includes (SSIs) An instruction inside of an XHTML/HTML page that directs the Web server to perform an action An alternative to CGI SSI instructions are in SGML Can be used to: – Place the results of a database query into a page – Execute other programs – Indicate the last time a document was modified – Insert footer text at the bottom of a page – Add the current date as a timestamp to a page

15. Server Side Includes (SSIs) (cont'd) Standard SSI file name extensions: –.shtml –.shtm SSI support in Web servers – Most Web servers include code that enables SSI – However, the SSI feature may be disabled You may have to activate the feature You may also have to define a MIME type

16. Client-Side Languages Issues with client-side languages – Some clients do not support JavaScript or any other such scripting language – Users can deactivate script execution in browsers that normally support it

17. JavaScript Object-based scripting language Adds interactivity to Web pages Can also be used on the server side (Server-Side JavaScript [SSJS]) On the client side, can be used to: – Detect browsers – Create cookies – Create mouse rollovers JavaScript advantages – Platform-independent – Vendor-neutral – Relatively simple

18. JavaScript (cont'd) Can be placed in an HTML/XHTML document – Use the tag Browser detection (using JavaScript or any other scripting technology) is useful for: – Presenting different versions of a site to different browsers – Informing users in a corporate intranet to upgrade their browsers to a supported version – Ensuring accessibility to disabled users

19. JavaScript (cont'd) JavaScript and cookies – Cookies are stored on the hard drive – Cookies can be used to: Store passwords Store user preferences Choose which Web pages will be displayed based on browser version

20. VBScript Microsofts answer to JavaScript Can be used on the client side or the server side If used on the client side, only Internet Explorer can render the script

21. Connecting to a Database For a database to work, you must: – Provide a way for the Web server and database to recognize each other Microsoft systems can use ODBC Other methods include PHP scripts – Provide permissions to the database so it can be read and/or written to You must also supply SQL scripts

22. CGI and Permissions Aside from improper coding, CGI scripts usually fail to execute because: – The Web server does not have the permissions to execute files and scripts – The file or script used has incorrect permissions, which prohibits the server from executing the file

23. ISPs and CGI If working with an Internet Service Provider (ISP), you generally need to: – Request CGI services – Request that the ISP: Enables execute permissions on your scripts Creates a directory that contains available CGI scripts Provides user name and passwords with enough permissions to work the system

24. N-Tier Applications When discussing databases, three elements are generally involved: – Data The database file or multiple database files – Business logic The SQL coding necessary to create relationships with the data stored in the database – Presentation The way that data and business logic are presented on the user screen

25. N-Tier Applications (cont'd) In n-tier, all three database elements are separated

26. Styling Techniques with CSS Types of CSS include: – Linked style sheet The and tags in the HTML/XHTML file will override style sheets – Inline style – Embedded style – Imported style sheet

27. Declaring an Inline Style The tag – Can span multiple elements: CIW Associate The style attribute – Used inside a tag: CIW Associate

28. Embedded Styles An embedded style sheet uses the tag within the section: CIW Associate h1 {color: magenta; font-family: arial; font-size: 20pt} The style will remain in force until overridden (e.g., by an inline style)

29. Imported Style Sheets Like a linked style sheet, refers to a separate file Created using the @import statement with the following syntax: @import url(filename.css) CIW Associate @import url(import.css);

30. Style Sheets and Browser Compatibility Styles can cause problems with older browsers – Imported styles can especially cause problems – Test your code in multiple browsers Most modern browsers are designed to support style sheets

31. Dynamic HTML (DHTML) An enhancement that provides animation, interactivity and dynamic updates in pages DHTML capabilities include: – Automatic adjustment of font sizes and colors – Absolute positioning – New document content – Granular control over animation, audio and video Requires XHTML 1.0 or HTML 4.01, CSS, and a way to access the Document Object Model (DOM)

32. Document Object Model (DOM) A vendor-neutral, cross-platform application programming interface (API) Specifies how objects in a document can be referred to and manipulated through scripting languages Describes the elements, or objects, within a document rendered by a user agent (e.g., Web browser) A W3C standard

33. Document Object Model (DOM) (cont'd) Accessing a browser's DOM – Use a scripting language JavaScript VBScript – DOM compliance At one time, several DOMs, depending upon browser manufacturers W3C standardization Choosing a DOM-compliant browser Undefined object error and the DOM XHTML, the DOM and browser compatibility

34. Developing Web Pages for PDAs and Smart Clients When you develop a Web site for viewing on mobile devices: – Keep your Web pages simple and uncluttered – Prioritize your content – Optimize your site to a smaller screen size

35. Web Application Frameworks Web application framework – a set of software tools or code that is commonly used in the creation and management of online applications Popular Web application frameworks: – Django – Ruby on Rails

36. Creating Aliases with TinyURL TinyURL – a free Web service that generates short aliases for long URLs Short URL aliases are useful because they are easier to remember and type Short URL aliases are subject to linkrot

37. Working with Advanced Web Technologies Web 2.0 – changing trends in the use of WWW technology and Web design that have led to the development of information-sharing and collaboration capabilities Ajax – enables Web applications to interact with users in much the same way they do with desktop applications

38. Browsers as Application Delivery Platforms Access to hosted applications and services on Web sites that enable you to perform computing tasks without the need to download and install any software Cloud computing – a computing paradigm in which users are able to access software and services over the Internet instead of from their desktops Software as a Service (SaaS): – Another term for cloud computing – The software cannot be downloaded or owned by the end user – The software becomes available as a service either for free or for a fee

39. Browsers as Application Delivery Platforms (cont'd) Advantages – Flexibility – Scalability – Cost reduction Disadvantages – Connectivity – Speed – Lockout

40. Personalizing a Web Page with Third-Party Applications The functionality and usability of your Web page can dramatically increase without the need for you to create programs Adding such applications may slow page rendering speeds and can easily be overused Example: iGoogle Gadgets

41. Web Feeds Web feed – a data format for delivering Web content that is updated frequently Content syndication – RSS (Really Simple Syndication, RDF Site Summary or Rich Site Summary) – Atom

42. Podcasts Podcast – the use of audio or video digital-media files that are distributed through Web feeds to subscribed users – Similar to an RSS feed – Podcast files can be syndicated, subscribed to and downloaded automatically

43. Typosquatting Typosquatting – an unethical practice in which a typosquatter capitalizes on typing mistakes that users make when entering the URL of a Web site Also known as URL hijacking Typosquatters frequently use their alternative sites to distribute adware, spyware, viruses or other types of malware

44. Hosting and Web Service Providers Internet Service Provider (ISP) – Provides basic services Internet connectivity Web server – You need your own experts Application Service Provider (ASP) – Provides more advanced services Messaging (i.e., e-mail) Databases Spam filtering Telephony services

45. Comparing Options Configuring your own hosting solution – Benefits – Drawbacks Using an ISP – Benefits – Drawbacks Using an ASP – Benefits – Drawbacks

46. Co-Location, Dedicated Hosting and Virtual Servers Co-location Dedicated hosting (co-hosting) Virtual server

47. Costs of Using an ASP Often based on: – Amount of traffic – Amount of support you require Database connectivity Per-service costs Bandwidth Customer support Security Application development

48. Negotiating Web Services and Communicating Needs Be prepared to detail your needs Negotiate prices by providing information: – Potential amount of traffic – Hard drive space needed – Database and CGI needs – Additional services (e.g., custom applications) As you work with ISP and ASP sales representatives: – Communicate your needs – Talk to the sales representative manager – Have your manager talk to the ISP/ASP manager

49. Information You Need from Your Service Provider Account information IP addresses and DNS names of the server Instructions about file and directory locations Service provider's contact information Additional information: – ISP/ASP security policies – ISP/ASP support procedures – Procedures for reporting problems – Average timelines for resolving problems

50. Lesson 11 Summary Identify client-side and server-side scripting technologies Connect Web pages to databases Use CSS to apply formatting to Web pages Identify the benefits of Dynamic HTML (DHTML) Define the function of the Document Object Model (DOM) and its relationship to browsers Discuss how to develop Web pages for PDAs and smart clients Define Web application frameworks Create aliases with TinyURL Use advanced "Web 2.0" technologies to create Web pages Compare the use of a service provider to hosting your own Web site