Lesson 11: Advanced Web Technologies

Lesson 11:Advanced Web Technologies

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

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

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

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

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 " <html><head><title>PHP CGI Example</title></head><body> <h1>Hello, World!</h1> Your user agent is:<strong>${$var}.</strong> <br/> </body></html> "; } ?>

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 "<html>\n<head>\n<title>\nPerl CGI Example\n</title>\n<body>\n<h1>Hello, World!</h1>\nYour user agent is: <b>\n"; print $cgi_object->user_agent(); print "</b>.</html>\n";

Active Server Pages (ASP) using VBScript • Microsoft’s original server-side scripting solution • Example of ASP code using VBScript: <%@ LANGUAGE=vbscript %> <html> <head> <title>ASP CGI Example</title> </head> <body> <h1>Hello, World!</h1> <% 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")

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 <stdio.h> int main() { printf("Hello, World!\n"); return 0; } • Note this code includes a reference to a library called stdio.h

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)

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)

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

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

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

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

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

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

JavaScript (cont'd) • Can be placed in an HTML/XHTML document • Use the <script> 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

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

VBScript • Microsoft’s 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

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

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

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

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

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

Styling Techniques with CSS • Types of CSS include: • Linked style sheet • The <style> and <font> tags in the HTML/XHTML file will override style sheets • Inline style • Embedded style • Imported style sheet

Declaring an Inline Style • The <span> tag • Can span multiple elements: <span style="background: red"> CIW Associate </span> • The style attribute • Used inside a tag: <h1 style="color: magenta; font-family: arial"> CIW Associate </h1>

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

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) <head> <title> CIW Associate </title> <style type="text/css"> @import url(import.css); </style>

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

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)

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

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

Developing Web Pagesfor 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

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

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

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

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

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

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

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

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

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

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

Comparing Options • Configuring your own hosting solution • Benefits • Drawbacks • Using an ISP • Benefits • Drawbacks • Using an ASP • Benefits • Drawbacks

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

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

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

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

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

Lesson 11: Advanced Web Technologies