html/web design tools jim weekley [email protected]
TRANSCRIPT
OverviewOverview
Web serversWeb servers Web browsersWeb browsers J2EE-based toolsJ2EE-based tools .NET tools.NET tools Web authoring toolsWeb authoring tools Low budget alternativesLow budget alternatives Web design resourcesWeb design resources
Web BrowsersWeb Browsers
Microsoft Internet ExplorerMicrosoft 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 BrowsersOpen Source Browsers MozillaMozilla
Windows, Linux, OS X Windows, Linux, OS X Complete suite: browser, mail/news/chat client, composerComplete suite: browser, mail/news/chat client, composer Neat features:Neat features:
Tabbed browsingTabbed browsing Customizable sidebar (bookmarks, history)Customizable sidebar (bookmarks, history) Pop-up blockingPop-up blocking Search capability in the toolbarSearch capability in the toolbar Cookie, image, popup, form, password, download managersCookie, image, popup, form, password, download managers JavaScript and Java consoles, DOM inspector, JavaScript debuggerJavaScript and Java consoles, DOM inspector, JavaScript debugger
http://channels.netscape.com/ns/browsers/default.jsphttp://channels.netscape.com/ns/browsers/default.jsp http://www.mozilla.orghttp://www.mozilla.org
Firefox (nee Firebird)Firefox (nee Firebird) Browser-only: smaller, fasterBrowser-only: smaller, faster Additional features:Additional features:
Extension management (new features, new functions)Extension management (new features, new functions) Page loading in the backgroundPage loading in the background
http://www.mozilla.org/products/firefoxhttp://www.mozilla.org/products/firefox
ToolsTools J2EE-basedJ2EE-based
Borland JBuilderBorland JBuilder Sun NetBeansSun NetBeans EclipseEclipse
.NET-based.NET-based Microsoft Visual StudioMicrosoft Visual Studio
Generic web-basedGeneric web-based Microsoft FrontPageMicrosoft FrontPage Macromedia DreamweaverMacromedia Dreamweaver
Extremely low-budgetExtremely low-budget ComposerComposer XEmacsXEmacs vimvim textpadtextpad
J2EE-Based ToolsJ2EE-Based Tools Java 2 Platform, Enterprise EditionJava 2 Platform, Enterprise Edition Set of specifications for developing multi-tiered applicationsSet 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 frameworkRequires the proper framework http://www.bea.comhttp://www.bea.com (BEA WebLogic, free developer licenses for a (BEA WebLogic, free developer licenses for a
year)year) http://www.ibm.comhttp://www.ibm.com (IBM WebSphere, free six-month trials) (IBM WebSphere, free six-month trials) http://jakarta.apache.orghttp://jakarta.apache.org (open source) (open source)
ResourcesResources http://java.sun.com/j2ee/index.jsphttp://java.sun.com/j2ee/index.jsp (all the specifications are available) (all the specifications are available) Deepak Alur, John Crupi, and Dan Malks, Deepak Alur, John Crupi, and Dan Malks, Core J2EE Patterns: Best Core J2EE Patterns: Best
Practices and Design StrategiesPractices and Design Strategies, Prentice Hall, 2003., Prentice Hall, 2003. William Crawford and Jonathan Kaplan, William Crawford and Jonathan Kaplan, J2EE Design PatternsJ2EE Design Patterns, O’Reilly , O’Reilly
and Associates, 2003. and Associates, 2003. (NB – All the O’Reilly (“Animal”) books are good)(NB – All the O’Reilly (“Animal”) books are good) Bruce Tate, Bruce Tate, Bitter JavaBitter Java, Manning Publications, 2002., Manning Publications, 2002. Bruce Tate, Mike Clark, Bruce Tate, Mike Clark, et alet al., ., Bitter EJBBitter EJB, Manning Publications, 2003., Manning Publications, 2003.
Borland JBuilderBorland JBuilder
Full-featured IDE with support for Full-featured IDE with support for specific J2EE functionsspecific J2EE functions
Integrates with certain enterprise Integrates with certain enterprise software (BEA WebLogic)software (BEA WebLogic)
Downloads available for 30-day trial, Downloads available for 30-day trial, foundation software free:foundation software free: http://www.borland.com/products/downlhttp://www.borland.com/products/downl
oads/download_jbuilder.htmloads/download_jbuilder.html
Sun NetBeansSun NetBeans
Free version that provides an IDE Free version that provides an IDE and supports J2SE (Java 2 Platform, and supports J2SE (Java 2 Platform, Standard Edition) and web Standard Edition) and web application development:application development: http://www.netbeans.orghttp://www.netbeans.org
The full-featured edition is Sun Java The full-featured edition is Sun Java Studio Standard 5 (~$700 list)Studio Standard 5 (~$700 list)
EclipseEclipse
Open source software supported by Open source software supported by a consortium of industry leaders a consortium of industry leaders (Borland, IBM, Red Hat, SuSE, (Borland, IBM, Red Hat, SuSE, Oracle… not Sun…Oracle… not Sun…
A “universal tool platform”A “universal tool platform” Designed to be genericDesigned to be generic Most work has been done in IDEsMost work has been done in IDEs
www.eclipse.orgwww.eclipse.org
.NET Tools.NET Tools
An alternative to J2EE for enterprise An alternative to J2EE for enterprise applicationsapplications
Centers on Microsoft technologyCenters on Microsoft technology Tons of resources and good toolsTons of resources and good tools
Microsoft Visual Studio .NET – available from Microsoft Visual Studio .NET – available from the MEEC purchase (log in to myUMBC, then the MEEC purchase (log in to myUMBC, then https://my.umbc.edu/meec/purchase?encr=70-https://my.umbc.edu/meec/purchase?encr=70-AD-5O-G5-IP-PC9P87IAD-5O-G5-IP-PC9P87I) )
Start at Start at http://msdn.microsoft.com/asp.net/default.http://msdn.microsoft.com/asp.net/default.aspxaspx
Microsoft FrontPageMicrosoft FrontPage IDE for web site developmentIDE for web site development Provides both WYSIWYG and HTML editing Provides both WYSIWYG and HTML editing
capabilitiescapabilities Provides tools for layouts, graphics, coding, Provides tools for layouts, graphics, coding,
HTML, scriptingHTML, scripting Good for small web sitesGood for small web sites Common look and feel with other Office Common look and feel with other Office
applicationsapplications Integrates well with other Microsoft Integrates well with other Microsoft
applications but also works with standard web applications but also works with standard web serversservers
Not included in the Office suite on the MEEC Not included in the Office suite on the MEEC purchase, but academic pricing is ~$100purchase, but academic pricing is ~$100
Macromedia Macromedia DreamweaverDreamweaver
An integrated web development toolAn integrated web development tool Leverages other Macromedia Leverages other Macromedia
technologies such as Flashtechnologies such as Flash Free 30-day trial download available Free 30-day trial download available
at at http://www.macromedia.com/softwarhttp://www.macromedia.com/software/dreamweaver/?e/dreamweaver/?promoid=home_prod_dw_082403promoid=home_prod_dw_082403
Low Budget AlternativesLow Budget Alternatives You can code a web page by hand:You can code a web page by hand:
<html><html>
<head><head> <title>Jim Weekley's home page</title><title>Jim Weekley's home page</title> </head></head>
<body><body> Under construction (chill!)Under construction (chill!) </body></body>
</html></html>
What’s helpful:What’s helpful: Syntax highlightingSyntax highlighting A file barA file bar
ComposerComposer
Available with Netscape or MozillaAvailable with Netscape or Mozilla Provides some GUI capabilitiesProvides some GUI capabilities
Can view pages in normal, HTML tag, Can view pages in normal, HTML tag, or HTML source formatsor HTML source formats
A few features to add tables, lines, A few features to add tables, lines, links, formattinglinks, formatting
HTML editing does not have syntax HTML editing does not have syntax highlightinghighlighting
ComposerComposer
XEmacsXEmacs
Available from www.sourceforge.net Available from www.sourceforge.net and other serversand other servers
Provides syntax highlightingProvides syntax highlighting Doesn’t provide highlighting for Doesn’t provide highlighting for
JavaScriptJavaScript See www.xemacs.org for more See www.xemacs.org for more
informationinformation
XEmacsXEmacs
vimvim
The enhanced vi editorThe enhanced vi editor Standard on most Linux distributionsStandard on most Linux distributions Available for Windows from Available for Windows from
www.vim.org (charityware)www.vim.org (charityware) Syntax highlighting for HTMLSyntax highlighting for HTML
Highlights keywords some other items Highlights keywords some other items in JavaScriptin JavaScript
vimvim
TextPadTextPad
General purpose editorGeneral purpose editor Evaluation copies can be downloaded from Evaluation copies can be downloaded from
http://www.textpad.com.http://www.textpad.com. Does syntax highlighting for HTML but not Does syntax highlighting for HTML but not
JavaScript.JavaScript. Syntax highlighting can be tailored for different Syntax highlighting can be tailored for different
languageslanguages Lots of different modes Lots of different modes Installs itself as a right-click optionInstalls itself as a right-click option Has a document selector panelHas a document selector panel
TextPadTextPad
Web Design ResourcesWeb Design Resources
Basic user interface design principles: Basic user interface design principles: http://msdn.microsoft.com/library/default.http://msdn.microsoft.com/library/default.asp?url=/nhp/default.asp?asp?url=/nhp/default.asp?contentid=28000443contentid=28000443
Specific web interface design principles: Specific web interface design principles: http://www.webstyleguide.com/index.htmlhttp://www.webstyleguide.com/index.html?/contents.html?/contents.html
Not really a design resource, but the place Not really a design resource, but the place to go to find all the standards: to go to find all the standards: http://www.w3c.org http://www.w3c.org
Where To Get StuffWhere 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.nethttp://sourceforge.net
Commercial – go for the academic pricing!Commercial – go for the academic pricing! UMBC BookstoreUMBC Bookstore http://www.newegg.comhttp://www.newegg.com (excellent site, mostly hardware, (excellent site, mostly hardware,
some software at academic prices; web form for academic some software at academic prices; web form for academic proofs)proofs)
http://www.shoptrc.comhttp://www.shoptrc.com (caters to academia; fax or e-mail (caters to academia; fax or e-mail them your academic proofs)them your academic proofs)
http://www.journeyed.comhttp://www.journeyed.com (not tried) (not tried) BooksBooks
www.bookpool.comwww.bookpool.com (excellent site, usually has the best (excellent site, usually has the best prices)prices)
www.amazon.comwww.amazon.com (where else?) (where else?) www.bn.comwww.bn.com (sometimes cheaper than amazon, but check) (sometimes cheaper than amazon, but check)