1. HTML/Web Design Tools Jim Weekley weekley1@umbc.edu

2. 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

3. 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)

4. 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 http://channels.netscape.com/ns/browsers/default.jsp http://channels.netscape.com/ns/browsers/default.jsp http://channels.netscape.com/ns/browsers/default.jsp http://www.mozilla.org http://www.mozilla.org http://www.mozilla.org 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 http://www.mozilla.org/products/firefox http://www.mozilla.org/products/firefox http://www.mozilla.org/products/firefox

10. 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

11. 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 http://www.bea.com (BEA WebLogic, free developer licenses for a year) http://www.bea.com (BEA WebLogic, free developer licenses for a year) http://www.bea.com http://www.ibm.com (IBM WebSphere, free six-month trials) http://www.ibm.com (IBM WebSphere, free six-month trials) http://www.ibm.com http://jakarta.apache.org (open source) http://jakarta.apache.org (open source) http://jakarta.apache.org Resources Resources http://java.sun.com/j2ee/index.jsp (all the specifications are available) http://java.sun.com/j2ee/index.jsp (all the specifications are available) http://java.sun.com/j2ee/index.jsp Deepak Alur, John Crupi, and Dan Malks, Core J2EE Patterns: Best Practices and Design Strategies, Prentice Hall, 2003. 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) 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, Bitter Java, Manning Publications, 2002. Bruce Tate, Mike Clark, et al., Bitter EJB, Manning Publications, 2003. Bruce Tate, Mike Clark, et al., Bitter EJB, Manning Publications, 2003.

12. 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: http://www.borland.com/products/downloads/do wnload_jbuilder.html http://www.borland.com/products/downloads/do wnload_jbuilder.html http://www.borland.com/products/downloads/do wnload_jbuilder.html http://www.borland.com/products/downloads/do wnload_jbuilder.html

13. 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: http://www.netbeans.org http://www.netbeans.org http://www.netbeans.org The full-featured edition is Sun Java Studio Standard 5 (~$700 list) The full-featured edition is Sun Java Studio Standard 5 (~$700 list)

14. 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 www.eclipse.org www.eclipse.org www.eclipse.org

15. .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 https://my.umbc.edu/meec/purchase?encr=70-AD-5O-G5- IP-PC9P87I) 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) https://my.umbc.edu/meec/purchase?encr=70-AD-5O-G5- IP-PC9P87I https://my.umbc.edu/meec/purchase?encr=70-AD-5O-G5- IP-PC9P87I Start at http://msdn.microsoft.com/asp.net/default.aspx Start at http://msdn.microsoft.com/asp.net/default.aspx http://msdn.microsoft.com/asp.net/default.aspx

16. 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

18. 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 http://www.macromedia.com/software/dream weaver/?promoid=home_prod_dw_082403 Free 30-day trial download available at http://www.macromedia.com/software/dream weaver/?promoid=home_prod_dw_082403 http://www.macromedia.com/software/dream weaver/?promoid=home_prod_dw_082403 http://www.macromedia.com/software/dream weaver/?promoid=home_prod_dw_082403

19. 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

20. 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

21. Composer

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

23. XEmacs

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

25. vim

26. TextPad General purpose editor General purpose editor Evaluation copies can be downloaded from http://www.textpad.com. Evaluation copies can be downloaded from http://www.textpad.com. http://www.textpad.com 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

27. TextPad

28. Web Design Resources Basic user interface design principles: http://msdn.microsoft.com/library/default.asp? url=/nhp/default.asp?contentid=28000443 Basic user interface design principles: http://msdn.microsoft.com/library/default.asp? url=/nhp/default.asp?contentid=28000443 http://msdn.microsoft.com/library/default.asp? url=/nhp/default.asp?contentid=28000443 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 Specific web interface design principles: http://www.webstyleguide.com/index.html?/co ntents.html http://www.webstyleguide.com/index.html?/co ntents.html 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 Not really a design resource, but the place to go to find all the standards: http://www.w3c.orghttp://www.w3c.org

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