Successfully reported this slideshow.

Web Design Stuff

736 views

Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Web Design Stuff

  1. 1. HTML/Web Design Tools Jim Weekley [email_address]
  2. 2. Overview <ul><li>Web servers </li></ul><ul><li>Web browsers </li></ul><ul><li>J2EE-based tools </li></ul><ul><li>.NET tools </li></ul><ul><li>Web authoring tools </li></ul><ul><li>Low budget alternatives </li></ul><ul><li>Web design resources </li></ul>
  3. 3. Web Browsers <ul><li>Microsoft Internet Explorer </li></ul><ul><li>Netscape 7, Mozilla (Gecko engine) </li></ul><ul><li>Mozilla Firefox </li></ul><ul><li>Konqueror (KDE) </li></ul><ul><li>Lynx (text browser) </li></ul><ul><li>Safari (OS X) </li></ul>
  4. 4. Open Source Browsers <ul><li>Mozilla </li></ul><ul><ul><li>Windows, Linux, OS X </li></ul></ul><ul><ul><li>Complete suite: browser, mail/news/chat client, composer </li></ul></ul><ul><ul><li>Neat features: </li></ul></ul><ul><ul><ul><li>Tabbed browsing </li></ul></ul></ul><ul><ul><ul><li>Customizable sidebar (bookmarks, history) </li></ul></ul></ul><ul><ul><ul><li>Pop-up blocking </li></ul></ul></ul><ul><ul><ul><li>Search capability in the toolbar </li></ul></ul></ul><ul><ul><ul><li>Cookie, image, popup, form, password, download managers </li></ul></ul></ul><ul><ul><ul><li>JavaScript and Java consoles, DOM inspector, JavaScript debugger </li></ul></ul></ul><ul><ul><li>http://channels.netscape.com/ns/browsers/default.jsp </li></ul></ul><ul><ul><li>http://www.mozilla.org </li></ul></ul><ul><li>Firefox (nee Firebird) </li></ul><ul><ul><li>Browser-only: smaller, faster </li></ul></ul><ul><ul><li>Additional features: </li></ul></ul><ul><ul><ul><li>Extension management (new features, new functions) </li></ul></ul></ul><ul><ul><ul><li>Page loading in the background </li></ul></ul></ul><ul><ul><li>http://www.mozilla.org/products/firefox </li></ul></ul>
  5. 10. Tools <ul><li>J2EE-based </li></ul><ul><ul><li>Borland JBuilder </li></ul></ul><ul><ul><li>Sun NetBeans </li></ul></ul><ul><ul><li>Eclipse </li></ul></ul><ul><li>.NET-based </li></ul><ul><ul><li>Microsoft Visual Studio </li></ul></ul><ul><li>Generic web-based </li></ul><ul><ul><li>Microsoft FrontPage </li></ul></ul><ul><ul><li>Macromedia Dreamweaver </li></ul></ul><ul><li>Extremely low-budget </li></ul><ul><ul><li>Composer </li></ul></ul><ul><ul><li>XEmacs </li></ul></ul><ul><ul><li>vim </li></ul></ul><ul><ul><li>textpad </li></ul></ul>
  6. 11. J2EE-Based Tools <ul><li>Java 2 Platform, Enterprise Edition </li></ul><ul><li>Set of specifications for developing multi-tiered applications </li></ul><ul><li>Generally three tiers: </li></ul><ul><ul><li>Client (browser) </li></ul></ul><ul><ul><li>Middle (business logic, EJBs) </li></ul></ul><ul><ul><li>Back-end (database) </li></ul></ul><ul><li>Requires the proper framework </li></ul><ul><ul><li>http://www.bea.com (BEA WebLogic, free developer licenses for a year) </li></ul></ul><ul><ul><li>http://www.ibm.com (IBM WebSphere, free six-month trials) </li></ul></ul><ul><ul><li>http://jakarta.apache.org (open source) </li></ul></ul><ul><li>Resources </li></ul><ul><ul><li>http://java.sun.com/j2ee/index.jsp (all the specifications are available) </li></ul></ul><ul><ul><li>Deepak Alur, John Crupi, and Dan Malks, Core J2EE Patterns: Best Practices and Design Strategies , Prentice Hall, 2003. </li></ul></ul><ul><ul><li>William Crawford and Jonathan Kaplan, J2EE Design Patterns , O’Reilly and Associates, 2003. (NB – All the O’Reilly (“Animal”) books are good) </li></ul></ul><ul><ul><li>Bruce Tate, Bitter Java , Manning Publications, 2002. </li></ul></ul><ul><ul><li>Bruce Tate, Mike Clark, et al ., Bitter EJB , Manning Publications, 2003. </li></ul></ul>
  7. 12. Borland JBuilder <ul><li>Full-featured IDE with support for specific J2EE functions </li></ul><ul><li>Integrates with certain enterprise software (BEA WebLogic) </li></ul><ul><li>Downloads available for 30-day trial, foundation software free: </li></ul><ul><ul><li>http://www.borland.com/products/downloads/download_jbuilder.html </li></ul></ul>
  8. 13. Sun NetBeans <ul><li>Free version that provides an IDE and supports J2SE (Java 2 Platform, Standard Edition) and web application development: </li></ul><ul><ul><li>http://www.netbeans.org </li></ul></ul><ul><li>The full-featured edition is Sun Java Studio Standard 5 (~$700 list) </li></ul>
  9. 14. Eclipse <ul><li>Open source software supported by a consortium of industry leaders (Borland, IBM, Red Hat, SuSE, Oracle… not Sun… </li></ul><ul><li>A “universal tool platform” </li></ul><ul><ul><li>Designed to be generic </li></ul></ul><ul><ul><li>Most work has been done in IDEs </li></ul></ul><ul><li>www.eclipse.org </li></ul>
  10. 15. .NET Tools <ul><li>An alternative to J2EE for enterprise applications </li></ul><ul><li>Centers on Microsoft technology </li></ul><ul><li>Tons of resources and good tools </li></ul><ul><ul><li>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 ) </li></ul></ul><ul><li>Start at http://msdn.microsoft.com/asp.net/default.aspx </li></ul>
  11. 16. Microsoft FrontPage <ul><li>IDE for web site development </li></ul><ul><li>Provides both WYSIWYG and HTML editing capabilities </li></ul><ul><li>Provides tools for layouts, graphics, coding, HTML, scripting </li></ul><ul><li>Good for small web sites </li></ul><ul><li>Common look and feel with other Office applications </li></ul><ul><li>Integrates well with other Microsoft applications but also works with standard web servers </li></ul><ul><li>Not included in the Office suite on the MEEC purchase, but academic pricing is ~$100 </li></ul>
  12. 18. Macromedia Dreamweaver <ul><li>An integrated web development tool </li></ul><ul><li>Leverages other Macromedia technologies such as Flash </li></ul><ul><li>Free 30-day trial download available at http://www.macromedia.com/software/dreamweaver/?promoid=home_prod_dw_082403 </li></ul>
  13. 19. Low Budget Alternatives <ul><li>You can code a web page by hand: </li></ul><ul><ul><ul><li><html> </li></ul></ul></ul><ul><ul><ul><li><head> </li></ul></ul></ul><ul><ul><ul><li><title>Jim Weekley's home page</title> </li></ul></ul></ul><ul><ul><ul><li></head> </li></ul></ul></ul><ul><ul><ul><li><body> </li></ul></ul></ul><ul><ul><ul><li>Under construction (chill!) </li></ul></ul></ul><ul><ul><ul><li></body> </li></ul></ul></ul><ul><ul><ul><li></html> </li></ul></ul></ul><ul><li>What’s helpful: </li></ul><ul><ul><li>Syntax highlighting </li></ul></ul><ul><ul><li>A file bar </li></ul></ul>
  14. 20. Composer <ul><li>Available with Netscape or Mozilla </li></ul><ul><li>Provides some GUI capabilities </li></ul><ul><ul><li>Can view pages in normal, HTML tag, or HTML source formats </li></ul></ul><ul><ul><li>A few features to add tables, lines, links, formatting </li></ul></ul><ul><ul><li>HTML editing does not have syntax highlighting </li></ul></ul>
  15. 21. Composer
  16. 22. XEmacs <ul><li>Available from www.sourceforge.net and other servers </li></ul><ul><li>Provides syntax highlighting </li></ul><ul><ul><li>Doesn’t provide highlighting for JavaScript </li></ul></ul><ul><li>See www.xemacs.org for more information </li></ul>
  17. 23. XEmacs
  18. 24. vim <ul><li>The enhanced vi editor </li></ul><ul><li>Standard on most Linux distributions </li></ul><ul><li>Available for Windows from www.vim.org (charityware) </li></ul><ul><li>Syntax highlighting for HTML </li></ul><ul><ul><li>Highlights keywords some other items in JavaScript </li></ul></ul>
  19. 25. vim
  20. 26. TextPad <ul><li>General purpose editor </li></ul><ul><li>Evaluation copies can be downloaded from http://www.textpad.com . </li></ul><ul><li>Does syntax highlighting for HTML but not JavaScript. </li></ul><ul><ul><li>Syntax highlighting can be tailored for different languages </li></ul></ul><ul><li>Lots of different modes </li></ul><ul><li>Installs itself as a right-click option </li></ul><ul><li>Has a document selector panel </li></ul>
  21. 27. TextPad
  22. 28. Web Design Resources <ul><li>Basic user interface design principles: http://msdn.microsoft.com/library/default.asp?url=/nhp/default.asp?contentid=28000443 </li></ul><ul><li>Specific web interface design principles: http://www.webstyleguide.com/index.html?/contents.html </li></ul><ul><li>Not really a design resource, but the place to go to find all the standards: http://www.w3c.org </li></ul>
  23. 29. Where To Get Stuff <ul><li>Open source </li></ul><ul><ul><li>Direct (mozilla.org, netscape.com, eclipse.org, etc.) </li></ul></ul><ul><ul><li>http://sourceforge.net </li></ul></ul><ul><li>Commercial – go for the academic pricing! </li></ul><ul><ul><li>UMBC Bookstore </li></ul></ul><ul><ul><li>http://www.newegg.com (excellent site, mostly hardware, some software at academic prices; web form for academic proofs) </li></ul></ul><ul><ul><li>http://www.shoptrc.com (caters to academia; fax or e-mail them your academic proofs) </li></ul></ul><ul><ul><li>http://www.journeyed.com (not tried) </li></ul></ul><ul><li>Books </li></ul><ul><ul><li>www.bookpool.com (excellent site, usually has the best prices) </li></ul></ul><ul><ul><li>www.amazon.com (where else?) </li></ul></ul><ul><ul><li>www.bn.com (sometimes cheaper than amazon, but check) </li></ul></ul>

×