HTML/Web Design Tools Jim Weekley

Overview Web servers Web servers Web browsers Web browsers J2EE-based tools J2EE-based tools.NET tools.NET tools Web authoring tools Web authoring tools Low budget alternatives Low budget alternatives Web design resources Web design resources

Web Browsers Microsoft Internet Explorer Microsoft Internet Explorer Netscape 7, Mozilla (Gecko engine) Netscape 7, Mozilla (Gecko engine) Mozilla Firefox Mozilla Firefox Konqueror (KDE) Konqueror (KDE) Lynx (text browser) Lynx (text browser) Safari (OS X) Safari (OS X)

Open Source Browsers Mozilla Mozilla Windows, Linux, OS X Windows, Linux, OS X Complete suite: browser, mail/news/chat client, composer Complete suite: browser, mail/news/chat client, composer Neat features: Neat features: Tabbed browsing Tabbed browsing Customizable sidebar (bookmarks, history) Customizable sidebar (bookmarks, history) Pop-up blocking Pop-up blocking Search capability in the toolbar Search capability in the toolbar Cookie, image, popup, form, password, download managers Cookie, image, popup, form, password, download managers JavaScript and Java consoles, DOM inspector, JavaScript debugger JavaScript and Java consoles, DOM inspector, JavaScript debugger Firefox (nee Firebird) Firefox (nee Firebird) Browser-only: smaller, faster Browser-only: smaller, faster Additional features: Additional features: Extension management (new features, new functions) Extension management (new features, new functions) Page loading in the background Page loading in the background

Tools J2EE-based J2EE-based Borland JBuilder Borland JBuilder Sun NetBeans Sun NetBeans Eclipse Eclipse.NET-based.NET-based Microsoft Visual Studio Microsoft Visual Studio Generic web-based Generic web-based Microsoft FrontPage Microsoft FrontPage Macromedia Dreamweaver Macromedia Dreamweaver Extremely low-budget Extremely low-budget Composer Composer XEmacs XEmacs vim vim textpad textpad

J2EE-Based Tools Java 2 Platform, Enterprise Edition Java 2 Platform, Enterprise Edition Set of specifications for developing multi-tiered applications Set of specifications for developing multi-tiered applications Generally three tiers: Generally three tiers: Client (browser) Client (browser) Middle (business logic, EJBs) Middle (business logic, EJBs) Back-end (database) Back-end (database) Requires the proper framework Requires the proper framework (BEA WebLogic, free developer licenses for a year) (BEA WebLogic, free developer licenses for a year) (IBM WebSphere, free six-month trials) (IBM WebSphere, free six-month trials) (open source) (open source) Resources Resources (all the specifications are available) (all the specifications are available) Deepak Alur, John Crupi, and Dan Malks, Core J2EE Patterns: Best Practices and Design Strategies, Prentice Hall, Deepak Alur, John Crupi, and Dan Malks, Core J2EE Patterns: Best Practices and Design Strategies, Prentice Hall, William Crawford and Jonathan Kaplan, J2EE Design Patterns, O’Reilly and Associates, (NB – All the O’Reilly (“Animal”) books are good) William Crawford and Jonathan Kaplan, J2EE Design Patterns, O’Reilly and Associates, (NB – All the O’Reilly (“Animal”) books are good) Bruce Tate, Bitter Java, Manning Publications, Bruce Tate, Bitter Java, Manning Publications, Bruce Tate, Mike Clark, et al., Bitter EJB, Manning Publications, Bruce Tate, Mike Clark, et al., Bitter EJB, Manning Publications, 2003.

Borland JBuilder Full-featured IDE with support for specific J2EE functions Full-featured IDE with support for specific J2EE functions Integrates with certain enterprise software (BEA WebLogic) Integrates with certain enterprise software (BEA WebLogic) Downloads available for 30-day trial, foundation software free: Downloads available for 30-day trial, foundation software free: wnload_jbuilder.html wnload_jbuilder.html wnload_jbuilder.html wnload_jbuilder.html

Sun NetBeans Free version that provides an IDE and supports J2SE (Java 2 Platform, Standard Edition) and web application development: Free version that provides an IDE and supports J2SE (Java 2 Platform, Standard Edition) and web application development: The full-featured edition is Sun Java Studio Standard 5 (~$700 list) 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… Open source software supported by a consortium of industry leaders (Borland, IBM, Red Hat, SuSE, Oracle… not Sun… A “universal tool platform” A “universal tool platform” Designed to be generic Designed to be generic Most work has been done in IDEs Most work has been done in IDEs

.NET Tools An alternative to J2EE for enterprise applications An alternative to J2EE for enterprise applications Centers on Microsoft technology Centers on Microsoft technology Tons of resources and good tools Tons of resources and good tools Microsoft Visual Studio.NET – available from the MEEC purchase (log in to myUMBC, then IP-PC9P87I) Microsoft Visual Studio.NET – available from the MEEC purchase (log in to myUMBC, then IP-PC9P87I) IP-PC9P87I IP-PC9P87I Start at Start at

Microsoft FrontPage IDE for web site development IDE for web site development Provides both WYSIWYG and HTML editing capabilities Provides both WYSIWYG and HTML editing capabilities Provides tools for layouts, graphics, coding, HTML, scripting Provides tools for layouts, graphics, coding, HTML, scripting Good for small web sites Good for small web sites Common look and feel with other Office applications Common look and feel with other Office applications Integrates well with other Microsoft applications but also works with standard web servers 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 Not included in the Office suite on the MEEC purchase, but academic pricing is ~$100

Macromedia Dreamweaver An integrated web development tool An integrated web development tool Leverages other Macromedia technologies such as Flash Leverages other Macromedia technologies such as Flash Free 30-day trial download available at weaver/?promoid=home_prod_dw_ Free 30-day trial download available at weaver/?promoid=home_prod_dw_ weaver/?promoid=home_prod_dw_ weaver/?promoid=home_prod_dw_082403

Low Budget Alternatives You can code a web page by hand: You can code a web page by hand:<html> Jim Weekley's home page Jim Weekley's home page Under construction (chill!) Under construction (chill!) </html> What’s helpful: What’s helpful: Syntax highlighting Syntax highlighting A file bar A file bar

Composer Available with Netscape or Mozilla Available with Netscape or Mozilla Provides some GUI capabilities Provides some GUI capabilities Can view pages in normal, HTML tag, or HTML source formats Can view pages in normal, HTML tag, or HTML source formats A few features to add tables, lines, links, formatting A few features to add tables, lines, links, formatting HTML editing does not have syntax highlighting HTML editing does not have syntax highlighting

Composer

XEmacs Available from and other servers Available from and other serverswww.sourceforge.net Provides syntax highlighting Provides syntax highlighting Doesn’t provide highlighting for JavaScript Doesn’t provide highlighting for JavaScript See for more information See for more informationwww.xemacs.org

XEmacs

vim The enhanced vi editor The enhanced vi editor Standard on most Linux distributions Standard on most Linux distributions Available for Windows from (charityware) Available for Windows from (charityware) Syntax highlighting for HTML Syntax highlighting for HTML Highlights keywords some other items in JavaScript Highlights keywords some other items in JavaScript

vim

TextPad General purpose editor General purpose editor Evaluation copies can be downloaded from Evaluation copies can be downloaded from Does syntax highlighting for HTML but not JavaScript. Does syntax highlighting for HTML but not JavaScript. Syntax highlighting can be tailored for different languages Syntax highlighting can be tailored for different languages Lots of different modes Lots of different modes Installs itself as a right-click option Installs itself as a right-click option Has a document selector panel Has a document selector panel

TextPad

Web Design Resources Basic user interface design principles: url=/nhp/default.asp?contentid= Basic user interface design principles: url=/nhp/default.asp?contentid= url=/nhp/default.asp?contentid= url=/nhp/default.asp?contentid= Specific web interface design principles: ntents.html Specific web interface design principles: ntents.html ntents.html ntents.html Not really a design resource, but the place to go to find all the standards: Not really a design resource, but the place to go to find all the standards:

Where To Get Stuff Open source Open source Direct (mozilla.org, netscape.com, eclipse.org, etc.) Direct (mozilla.org, netscape.com, eclipse.org, etc.) Commercial – go for the academic pricing! Commercial – go for the academic pricing! UMBC Bookstore UMBC Bookstore (excellent site, mostly hardware, some software at academic prices; web form for academic proofs) (excellent site, mostly hardware, some software at academic prices; web form for academic proofs) (caters to academia; fax or them your academic proofs) (caters to academia; fax or them your academic proofs) (not tried) (not tried) Books Books (excellent site, usually has the best prices) (excellent site, usually has the best prices) (where else?) (where else?) (sometimes cheaper than amazon, but check) (sometimes cheaper than amazon, but check)