Lesson 11: Advanced Web Technologies

burnwholeInternet and Web Development

Feb 5, 2013 (4 years and 7 months ago)

112 views

Copyright © 2004 ProsoftTraining, All Rights Reserved.


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