HTML/Web Design Tools - PowerPoint PPT Presentation

html web design tools n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
HTML/Web Design Tools PowerPoint Presentation
Download Presentation
HTML/Web Design Tools

play fullscreen
1 / 29
HTML/Web Design Tools
109 Views
Download Presentation
ashling
Download Presentation

HTML/Web Design Tools

- - - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

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

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

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

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

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

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

  7. 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/download_jbuilder.html

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

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

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

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

  12. 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/dreamweaver/?promoid=home_prod_dw_082403

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

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

  15. Composer

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

  17. XEmacs

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

  19. vim

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

  21. TextPad

  22. 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?/contents.html • Not really a design resource, but the place to go to find all the standards: http://www.w3c.org

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