HTML/Web Design Tools

shopfitterpsithurismSoftware and s/w Development

Nov 10, 2012 (4 years and 9 months ago)

195 views

HTML/Web Design
Tools

Jim Weekley

weekley1@umbc.edu

Overview


Web servers


Web browsers


J2EE
-
based tools


.NET tools


Web authoring tools


Low budget alternatives


Web design resources



Web Browsers


Microsoft Internet Explorer


Netscape 7, Mozilla (Gecko engine)


Mozilla Firefox


Konqueror (KDE)


Lynx (text browser)


Safari (OS X)



Open Source Browsers


Mozilla


Windows, Linux, OS X


Complete suite: browser, mail/news/chat client, composer


Neat features:


Tabbed browsing


Customizable sidebar (bookmarks, history)


Pop
-
up blocking


Search capability in the toolbar


Cookie, image, popup, form, password, download managers


JavaScript and Java consoles, DOM inspector, JavaScript debugger


http://channels.netscape.com/ns/browsers/default.jsp


http://www.mozilla.org



Firefox (nee Firebird)


Browser
-
only: smaller, faster


Additional features:


Extension management (new features, new functions)


Page loading in the background


http://www.mozilla.org/products/firefox





Tools


J2EE
-
based


Borland JBuilder


Sun NetBeans


Eclipse


.NET
-
based


Microsoft Visual Studio


Generic web
-
based


Microsoft FrontPage


Macromedia Dreamweaver


Extremely low
-
budget


Composer


XEmacs


vim


textpad

J2EE
-
Based Tools


Java 2 Platform, Enterprise Edition


Set of specifications for developing multi
-
tiered applications


Generally three tiers:


Client (browser)


Middle (business logic, EJBs)


Back
-
end (database)


Requires the proper framework


http://www.bea.com

(BEA WebLogic, free developer licenses for a year)


http://www.ibm.com

(IBM WebSphere, free six
-
month trials)


http://jakarta.apache.org

(open source)


Resources


http://java.sun.com/j2ee/index.jsp

(all the specifications are available)


Deepak Alur, John Crupi, and Dan Malks,
Core J2EE Patterns: Best Practices and Design
Strategies
, Prentice Hall, 2003.


William Crawford and Jonathan Kaplan,
J2EE Design Patterns
, O’Reilly and Associates, 2003.
(NB


All the O’Reilly (“Animal”) books are good)


Bruce Tate,
Bitter Java
, Manning Publications, 2002.


Bruce Tate, Mike Clark,
et al
.,
Bitter EJB
, Manning Publications, 2003.




Borland JBuilder


Full
-
featured IDE with support for specific
J2EE functions


Integrates with certain enterprise software (BEA
WebLogic)


Downloads available for 30
-
day trial, foundation
software free:


http://www.borland.com/products/downloads/do
wnload_jbuilder.html


Sun NetBeans


Free version that provides an IDE and supports
J2SE (Java 2 Platform, Standard Edition) and
web application development:


http://www.netbeans.org



The full
-
featured edition is Sun Java Studio
Standard 5 (~$700 list)

Eclipse


Open source software supported by a
consortium of industry leaders (Borland, IBM,
Red Hat, SuSE, Oracle… not Sun…


A “universal tool platform”


Designed to be generic


Most work has been done in IDEs


www.eclipse.org


.NET Tools


An alternative to J2EE for enterprise applications


Centers on Microsoft technology


Tons of resources and good tools


Microsoft Visual Studio .NET


available from the MEEC
purchase (log in to myUMBC, then
https://my.umbc.edu/meec/purchase?encr=70
-
AD
-
5O
-
G5
-
IP
-
PC9P87I
)


Start at
http://msdn.microsoft.com/asp.net/default.aspx


Microsoft FrontPage


IDE for web site development


Provides both WYSIWYG and HTML editing
capabilities


Provides tools for layouts, graphics, coding, HTML,
scripting


Good for small web sites


Common look and feel with other Office applications


Integrates well with other Microsoft applications but
also works with standard web servers


Not included in the Office suite on the MEEC
purchase, but academic pricing is ~$100



Macromedia Dreamweaver


An integrated web development tool


Leverages other Macromedia technologies such
as Flash


Free 30
-
day trial download available at
http://www.macromedia.com/software/dream
weaver/?promoid=home_prod_dw_082403


Low Budget Alternatives


You can code a web page by hand:

<html>



<head>


<title>Jim Weekley's home page</title>


</head>



<body>


Under construction (chill!)


</body>


</html>



What’s helpful:


Syntax highlighting


A file bar

Composer


Available with Netscape or Mozilla


Provides some GUI capabilities


Can view pages in normal, HTML tag, or HTML
source formats


A few features to add tables, lines, links, formatting


HTML editing does not have syntax highlighting


Composer

XEmacs


Available from
www.sourceforge.net

and other
servers


Provides syntax highlighting


Doesn’t provide highlighting for JavaScript


See
www.xemacs.org

for more information

XEmacs

vim


The enhanced vi editor


Standard on most Linux distributions


Available for Windows from
www.vim.org

(charityware)


Syntax highlighting for HTML


Highlights keywords some other items in JavaScript

vim

TextPad


General purpose editor


Evaluation copies can be downloaded from
http://www.textpad.com
.


Does syntax highlighting for HTML but not JavaScript.


Syntax highlighting can be tailored for different languages


Lots of different modes


Installs itself as a right
-
click option


Has a document selector panel

TextPad

Web Design Resources


Basic user interface design principles:
http://msdn.microsoft.com/library/default.asp?
url=/nhp/default.asp?contentid=28000443


Specific web interface design principles:
http://www.webstyleguide.com/index.html?/co
ntents.html


Not really a design resource, but the place to go
to find all the standards:
http://www.w3c.org


Where To Get Stuff


Open source


Direct (mozilla.org, netscape.com, eclipse.org, etc.)


http://sourceforge.net


Commercial


go for the academic pricing!


UMBC Bookstore


http://www.newegg.com

(excellent site, mostly hardware, some software
at academic prices; web form for academic proofs)


http://www.shoptrc.com

(caters to academia; fax or e
-
mail them your
academic proofs)


http://www.journeyed.com

(not tried)


Books


www.bookpool.com

(excellent site, usually has the best prices)


www.amazon.com

(where else?)


www.bn.com

(sometimes cheaper than amazon, but check)