Lesson 11:
Advanced Web Technologies
Copyright © 2004 ProsoftTraining, All Rights Reserved.
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, IBMcompatible, 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 objectbased 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 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
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
