EASING
INTO WEB
DEVELOPMENT
1 Introduction
1. I t d ti
1 INTRODUCTION
2 HTML
3 TABLES
4 FORMS
5 HTTP
6 CSS
7 CSS FRAMEWORKS
8 DIGITAL MEDIA
2 9 USABILITY
Overview of Web Applications
3
Web applications refers to all types of applications
in which some part of the application is hosted
within a web browser.
Evolution of Internet
4
O
Over the
h past ten years, the
h Internet
I has
h evolved
l d from
f
a hypertextual information system offering static
information,,
to a
marketplace for the buying and selling of goods and
services,
and now to a
widely-used
id l d iinfrastructure
f t t for
f the
th development
d l t and
d hhosting
ti
of software applications within an enterprise.
Thus,, over time,, the Internet has moved from p
principally
p y
static page content to dynamically-generated content
via programs running on web servers.
Intranets
5
An Intranet is a private network that uses web
technology and that can be accessed only by
authorized persons, usually members or employees
of that organization
How Does the Web Work?
6
The browser (or client) requests and displays
information.
Browsers make requests of servers, then servers
process those requests
p q based on a set of rules
(called a protocol).
On the server
server, a web server software processes the
requests and returns information to the client.
Web
Server Other
D t b
Databases
Server Scripts Servers
Process Forms for accessing
resources on
Dynamic Pages server
HTTP for
p
Transport
HTML/CSS/Javascript
p y
for Display
The Internet
HTML
B
Browsers
7
Web Site Structure
8
A web
b site
it is
i typically
t i ll composed
d off many fil
files.
A web site will have:
HTML files
These are ASCII text files. Most sites will have many HTML files.
These HTML files may also include client-side scripting (usually Javascript).
image
g files (optional)
( p )
There are two file formats (GIF and JPG) that are supported by all browsers.
object files (optional)
Files that require a helper application or plug
plug-in.
in.
Sound files, video files, Flash files, Java files, etc
server-side scripts (optional)
programs for accessing server-based resources such as databases.
databases
Typically CGI-Perl, ASP, ASP.NET, JSP, Cold Fusion, etc.
Web Site Structure
9
programs.htm
index.htm courses.htm
faculty.htm
index.html
Javascript
for image
roll-over
Links to
Image other HTML
files files
Link to
server side
server-side
script
Links to
server-side
scripts
10 Javascript to
validate form input
Basic Web Development Process
11
1 Create
1. C t HTML file(s)
fil ( ) 2 Test
2. T t llocally
ll on browser(s)
b ( )
<HTML><HEAD></HEAD><BODY
BACKGROUND="images/mainback.gif"
BGCOLOR="#999966" TOPMARGIN="8"
LEFTMARGIN="8">
<TABLE BORDER="0" WIDTH=544 CELLSPACING=0>
<TR><TD WIDTH="31"><IMG SRC="images/pixel.gif"
WIDTH="31" HEIGHT="8"></TD><TD
WIDTH="58"><IMG SRC="images/pixel.gif"
WIDTH="58" HEIGHT="8"></TD><TD
WIDTH="30"><IMG SRC="images/pixel.gif"
WIDTH "30" HEIGHT
WIDTH="30" HEIGHT="8"></TD>
"8" /TD
</TR></TABLE>
3. Upload file(s) to web server 4. Test page(s) on web server
upload via FTP
Web server
your computer
What You Need for the Basics
12
Several Web Browsers
HTML Editor
R
Required
i d
Image Editor
FTP
More Complex IDE
Flash Optional
Media editors
Why Several Browsers?
13
The original
Th i i l iintention
i b behind
hi d HTML was that
h iti describes
d ib
meaning, not formatting.
That is, it is up to the browser to determine the formatting of
tags.
Thus, the same tags can be displayed differently on
different browsers.
browsers
As well, Netscape, and then later, Microsoft, added
their own proprietary tags.
Many of these special tags added physical formatting,
tables, frames, etc.
The browsers can vary in how they display pages.
CSS and Javascript, in particular, vary on the browsers.
Different Browsers, Different
14
Pages?
Given the different capabilities of the different
browsers, it is almost impossible to design a web
page that will look the same for all viewers.
Different Browsers, Different Pages?
15
St t i for
Strategies f dealing
d li with
ith differing
diff i b browsers:
Different versions for different browsers
Too difficult and time-consuming
g
Lowest common denominator design
Design for safest HTML standard (HTML 3.2)
Current version design
Design for most current versions of browsers
Splitting the difference
Design web pages that take advantage of newest
features, but are still usable and attractive for those
with older browsers.
Standards-based design
Design pages for current web standards, regardless
of browser support.
Use CSS and XHTML 1.0
Browser Market Share
16
Test, Test, Test
17
Always test your pages on as many browsers as
possible.
Always test your pages on as many computer
platforms as possible.
p p
Static vs Dynamic Web Pages
Most web pages that you view are not static HTML
pages.
Instead they are output from programs that run on
web servers.
Theseprograms can interact with server resources like
databases and XML Web services.
18
Static Web Content
19
Dynamic Web Content
20
Dynamic Web Technologies
There are quite
Th i a number
b off different
diff technologies
h l i for f
dynamically generating Web content.
ASP.NET
ASP
CGI
ColdFusion
JSP
PHP
Ruby on Rails
All of these technologies share one thing in common:
Using programming logic, they generate HTML on the server
and send it back to the requesting browser.
21
Web Frameworks
22
More and more web development is being done
M
within pre-existing web frameworks, such as Content
M
Management t SSystems
t (CMS) and
d Blog
Bl engines,
i or
Javascript frameworks such as JQuery.
CMSs
CMS and
d Bl
Blogs are complex
l programs running i on th
the
server that construct pages by combining content
residing within databases on the server with HTML
HTML+CSS
CSS
templates.
While no to little p
programming
g g knowledge
g is required,
q ,
HTML and CSS knowledge is still required in order to
use these frameworks effectively.
Web Frameworks
23
Template Industry
24
Not everyone has visual design skills.
Because of this,, there are many
y web template
p sites
available from which one can purchase or freely
use.
Again, HTML and CSS knowledge is still required in
order to use or customize these templates.
If you make use of someone else’s template you MUST
attribute it in the footer and within the HTML.
Template Industry
25
