COMM1T Web Engineering Dr. Giles Oatley

1
COMM1T Web EngineeringDr. Giles Oatley

• Web Development Tools
• Overview
• 1. Web servers / FTP
• 2. Browsers
• 3. Page design EXTRAS
• (HTML Editors)
• 4. Database tools
• 5. Putting it all together
• (web commerce)

2
DEFINITIONS
Freeware Shareware Buyware www.winfiles.com www
.download.com Macromedia, Borland, Microsoft
3
Some Web Authoring Tools.. (from
winfiles.com) Database connectivity
tools Automated Web Publishing Tools CGI
Programming Tools HTML and Link Verification
Tools HTML Color Pickers HTML Editors HTML
Index Generators HTML Text Styling Tools HTML to
ASCII Converters Image Mapping Tools Java
Programming Tools Multimedia Web Authoring Tools
Scripting Tools Search Authoring Tools Site
Mapping Tools Style Sheets Authoring Tools Web
Commerce Building Tools Web Site Promotion Tools
4
1. WEB SERVERS
Original Win32 web server WebSite Professional
- quickly gained a fast and loyal following
among webmasters worldwide. Whether delivering up
web pages for leading Internet sites, powering
corporate intranets, or driving web applications,
O'Reilly Associates (http//website.oreilly.co
m/) APACHE (http//www.apache.org) MS IIS
(http//www.microsoft.com) Operating systems
Microsoft Windows NT Server 4.0Red Hat Linux
5.2
5
2. WEB BROWSERS

• Netscape, MS Explorer etc.
• Create your own !..

6
3. PAGE DESIGN HTML EDITORS

• Range from Free to Very Expensive
• (Notepad..)
• Hotdog
• HotMetal (Macromedia)
• DreamWeaver (Macromedia)
• FrontPage (Microsoft)
• PageMill
• Teach me HTML
• http//www.pinsoft.com.au/teachhtml.htm

7
3. PAGE DESIGN EXTRAS
MapEdit (http//www.boutell.com/mapedit/)
Imagemap editor. Can make client side imagemaps,
which work without any special configuration in
all modern web browsers. Just open your HTML
document directly with Mapedit and start adding
hotspots to your image, then hit save to add the
imagemap directly to your page. No need for
separate map files. Boutell.Com, Inc. SHAREWARE
25.00 MapThis (http//www.abdn.ac.uk/tools/ibmpc
/mapthis/) FREEWARE program to create both
client-side and server-side imagemaps, using
either GIF or JPG image files.
8
3. PAGE DESIGN EXTRAS
OJ Button - for creating Roll-Over buttons for
web-pages. Make a few images, or load a
template, and let OJ Button create and maintain
the JavaScript for you FREEWARE Magic Buttons
(http//www.pagetutor.com/) Tutorial on how to
make javascript mouseovers and clickable buttons
for use in your web page. FREEWARE
9
3. PAGE DESIGN EXTRAS
JavaScript Maker (http//www.byte-sizesoftware.co
m/jsc.htm) Make HTML functions that can
dynamically change the content of pages. If the
original HTML code works in your browser, so will
the function JavaScript Maker creates. Works on
HTML with mixed single and double quotes and
embedded scripts. SHAREWARE 5.00 Applet Glide
Navigation Pro (http//www.usingit.com/products/ja
va/applet/agnpro/index.html) Applet-producing
design tool for creating gliding menu on Web
pages. You can define text, image, font, color,
URL and more for the applet. You don't need to
write any code by yourself. USINGIT.COM SHAREWARE
49.95 JOUST.com COOLTANK (!)
10
3. PAGE DESIGN EXTRAS
Apycom Menu Applets (http//www.apycom.com/apmenu
/) Provides attractive menus you can add to your
Website. Lightweight (4kb each) java applets
apMenu - apButtonMenu - apPopupMenu Menu
Applets Pack includes excellent documentation and
lots of examples to get you up and running in a
hurry. Applets are free for non-commercial
purpose, java source code is available (for a
price..) FREEWARE
11
3. PAGE DESIGN EXTRAS
Javalyzer (http//www.bold.net.au/ianduff/) Java
class file disassembler for Windows platforms,
presented in a simple, attractive and intuitive
graphical interface. Does not require java to run
- must have utility for all scholars of java
bytecode reverse engineering (!!!). FREEWARE
Ulead JavaRazor (http//www.ulead.com/jr/runme.h
tm) JavaRazor lets you create interactive Java
graphics in just a few clicks without having to
know Java code. FrontPage Friendly. The JavaRazor
components work as both stand-alone tools and as
Microsoft FrontPage plugins. SHAREWARE 60.00
12
3. PAGE DESIGN EXTRAS
Javascript Tutor (http//www.pagetutor.com/ )
Set of 25 lessons covering basic javascript
programming. The student will get a firm
grounding in a number of concepts and be ready to
move on to more ambitious projects. This free
tutorial assumes no previous programming
experience and contains many hands-on exercises
designed to reinforce the topics covered.
FREEWARE
13
3. PAGE DESIGN EXTRAS
Hot Potatoes (http//web.uvic.ca/hrd/halfbaked/) A
pplets to create interactive multiple-choice,
short-answer, gap-fill, crossword and
jumbled-sentence exercises using HTML and
JavaScript -- don't need to know any HTML or
JavaScript. A suite of 5 authoring tools to help
educators, teachers and materials-writers putting
educational material on the Web. Half-Baked
Software FREEWARE
14
3. PAGE DESIGN EXTRAS
Multimedia Web Authoring Tools Video performance,
image stuff, sound files dynamic digital content
design pixel-perfect control high-performance
playback (..ADOBE PHOTOSHOP, PAINTSHOP
PRO..) CrossArtist (http//www.crossartist.com/)
Design tool that makes it simple for creative
professionals to design and deliver dynamic
digital content without programming. FREEWARE
15
3. PAGE DESIGN EXTRAS
ConeGen (http//www.stack.nl/vincentn/ConeGen/in
dex.html) Generates VRML2 cone-trees from
hierarchical data. You can adjust the
positioning of objects in the VRML2 world by
adjusting their placing-formula's. Browse
through your data, rotate remove of show the
filesize of your objects in the generated VRML2
world. FREEWARE
16
3. PAGE DESIGN EXTRAS
SEARCH AUTHORING TOOLS AnalogX CGISearch
(http//www.analogx.com/) FREEWARE A powerful,
fast, simple to use search engine that can be
installed onto any webserver that support CGI
executables (such as IIS or Apache). Allows
inclusion, exclusion, phrase matching, result
sorting (date, percent, or weight), extracting of
meta information and page titles, and much more.
Does not require an index to be built it
performs all it's searching on the fly.
17
3. PAGE DESIGN EXTRAS
STYLE SHEETS AUTHORING TOOLS Style Sheet Fx -
style sheet editor that offer full support css
level 1, css level 2, IE3, IE 4, IE 5, IE 5.5,
opera3.6, Netscape 4, Browser 4. xStyle
(http//www.greenmojo.com/ ) is a visual style
sheet editor. FREEWARE CSS Style Generator
(http//www.10002.org/Download/ ) FREEWARE
18
3. PAGE DESIGN EXTRAS
CGI Programming Tools http//www.cgiexpert.com/ M
ailForm is an easy-to-use and highly configurable
CGI program for Windows that sends the results of
a submitted form as an email message.
http//www.lss.com.au/lss/windows/mf/mf_ins.htm
Visual Perl Editor (http//www.xarka.com/vpe.html
) Helps create CGI scripts in Perl. Two panels,
one to edit the script and another that previews
the CGI in an internal web browser. It supports
code-templates to add to your script, a Query
editor to easily create Querys for a GET method,
HTML Editor, URL encoder, bookmarks, FTP
uploader, unlimited sized scripts. Xarka
Software SHAREWARE
19
3. PAGE DESIGN EXTRAS
Scripting Tools Nathan Leveck's HTML Parser
(http//nl-html-parser.sourceforge.net/) Takes
naked HTML and parses it into a Perl or VB
script. Can optionally include Shebang line and
HTTP header. Version 2 adds the ability to retain
your HTML formatting or compress it into a single
line for smaller page sizes. FREEWARE
20
4. DATABASE CONNECTIVITY TOOLS
SCRIPTING PHP - Hypertext Preprocessor
(http//www.php.net/) COLDFUSION ColdFusion
Server - ColdFusion Studio (http//www.allaire.com
) ACTIVE SERVER PAGES CODING ACTIVEX BORLAND
JBUILDER JAVA IDE CGI (PERL, VB, C)
21
4. DATABASE CONNECTIVITY TOOLS
PHP Version 3.0 HTML-embedded scripting
language Much of its syntax is borrowed from C,
Java and Perl Some unique PHP-specific features
thrown in. Allows web developers to write
dynamically generated pages quickly. 1994 -
quick Perl hack by Rasmus Lerdorf Next 2-3
years, evolved into PHP/FI 2.0 1997- Zeev Suraski
and Andi Gutmans developed new parser, leading to
PHP 3.0 Introduction http//www.zend.com/zend/ar
t/intro.php
22
lt?php /
/ / PHP simple
text counter mail notice / /
coded (c) 1999 by rofus
/ /
rofus_at_mindless.com / /

/ / Special thanks for all to
Stevenson! (the crazybrain P) / /

/ /
/ counter_file
"/path/to/your/dir/to/yourfile.txt" /
--------------------------------------------------
-------------- / / This variable
(counter_file) should point to a SIMPLE text
file / / in your directory on the server. You
MUST create it, writing / / in ONLY the
number from which you want the counter starts.
/ / If you don't know your dir on the server
or you haven't / / permissions to
write in please ask your system administrator.
/ / --------------------------------------------
-------------------- / function
counter(counter_file) aprif
fopen(counter_file,"r") hits
fgets(aprif, 16) hits 1
rewind(aprif)
fputs(aprif,hits)
fputs(aprif,"\n")
fclose(aprif) / -------------------------------
--------------------------------------------------
---- / / Fill in this variables with your data
/
/ -----------------
/
address
"your_at_email.here" name_website "name
of your website" date_start
"31/12/1999" / -----------------

/ / With this setting the counter send you
an email every 10 hits (10,20,30 etc..)
/ / Replace the 10 (ONLY IT!) with your value
ie. if you put 15 the script send you / /
an email every 15 hits (15,30,45 etc..), if you
put 7 every 7 (7,14,21,28) etc... / /
-----------------
/ hit_check
bcdiv(hits, 10, 5) / --------------------------
--------------------------------------------------
--------- / if
(ereg("0-9\.0", hit_check))
mail(address, "Log hits from
name_website", "Number of hits from date_start
hits") print "hits \n"
else print "hits \n"
counter(counter_file) ?gt
Example PHP code PHP3 counter with a
particularity it can send you an email every X
hits, easily configurable in the script. From
http//php.resourceindex.com/ Tutorials http//p
hp.resourceindex.com/Documentation/Examples_and_Tu
torials/
23
4. DATABASE CONNECTIVITY TOOLS
PHP 4 Architecture Major architecture changes
since version 3. Language parser
self-contained component called The Zend
Engine. PHP function modules, now called PHP
extensions, are also basically self-contained. Web
server abstraction layer called SAPI that
greatly simplifies the task of adding native
support for new Web servers. PHP 4's
architecture Top border of the figure represents
the programmer's interface (meaning all except
for the Web server)
24
4. DATABASE CONNECTIVITY TOOLS
Microsoft Active Server Pages http//csbs.utsa.ed
u/users/gjeffery2/doit/ lta href"startit.asp"gtst
artit.asplt/agt lt ' Open database Set Conn
Server.CreateObject("ADODB.Connection") Conn.Open
Request.Form("dbfname") gt
25
4. DATABASE CONNECTIVITY TOOLS
ATAF can automatic convert a MS-Access or ODBC
database Like MS-SQL server, Oracle, IBM DB2 or
Lotus Notes database table in to a HTML form with
fields you select, create the necessary Active
server pages code (ASP), and navigation bottoms.

26
5. PUTTING IT ALL TOGETHER WEB COMMERCE
Selling things! Database of products in
Table Forms Shopping carts Safe credit
card transactions - secure login Tracking
customers across site - cookies
(www.cookiecentral.com) Web statistics Website
promotion
27
5. PUTTING IT ALL TOGETHER WEB COMMERCE
WEB STATISTICS - uses website server log
cookies forms - simple charts and
statistics ..most commonly accessed page ..most
common routes through site ..where came from,
where went to E.g. WEBTRENDS
28
5. PUTTING IT ALL TOGETHER WEB COMMERCE
CASH - secure order providers Authorize.net,
CyberCash Auction support Ebay.com Quick shop
contact HumanClick and IcQ
29
5. PUTTING IT ALL TOGETHER WEB COMMERCE
Gamma GenCat (http//www.gamma-burst.com/gencat/i
ndex.html) Create an online store Enter product
information into the program and generate catalog
based on provided store templates Can use
catalogs created with GenCat on any web server in
the world, including those with strict
limitations, such as AOL, GeoCities or
theglobe.com. Good for small businesses/ web
designers on a budget FREEWARE
30
5. PUTTING IT ALL TOGETHER WEB COMMERCE
Web Site Promotion Tools AddandSubmit can submit
websites to 1000's of search engines (YAHOO, AOL
etc). Submits the website and shows the ACTUAL
results from each search engine. Multiple urls
can be submitted at the same time. Multiple
keywords can be ranked at the same time. Can
rank your websites and help optimize the
website's position in a Top 20 Search Query List.
Web pages can be analyzed and compared against
competitors. Urls and metatags can be extracted
from web pages to make web submissions easy.
31
5. PUTTING IT ALL TOGETHER WEB COMMERCE
Web Site Promotion Tools Auto Search Submitter
(http//download.snoop.dk/freew.html) This
program helps user submitting his site to search
engines. There are 25 search engines in the list.
FREEWARE
32
5. PUTTING IT ALL TOGETHER WEB COMMERCE
SECURITY Gate Keeper (http//www.pagetutor.com/)
JavaScript code that you can use to restrict
access to some or all of your web pages without
the need for any CGI scripting or server-side
authentication. Anyone who wishes to visit the
protected pages will have to know the password.
FREEWARE
33
TUTORIAL

• Sources in lecture..
• Macromedia Flash, Dreamweaver, Fireworks
• Borland Jbuilder
• .. applets
• Investigate
• www.winfiles.com
• www.download.com
• www.cookiecentral.com