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 .NET-based Microsoft Visual Studio Generic web-based Borland JBuilder Sun NetBeans Eclipse 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: Requires the proper framework Client (browser) Middle (business logic, EJBs) Back-end (database) 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-G5IP-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 Commercial – go for the academic pricing! Direct (mozilla.org, netscape.com, eclipse.org, etc.) http://sourceforge.net 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)