Web Editor Overview

1. Web Editor Overview Adam Cavotta and Christine L. Vucinich ITS Training Services http://its.psu.edu/training/

2. Objectives • Examine the difference between using an HTML editor and hand coding Web pages • Learn about Dreamweaver, FrontPage, GoLive, Flash, Contribute, and the Web editing features of ANGEL • Discuss specific features/problems with each system for Penn State use

3. Basic Web Page Creation • Two Options • Hand coding of Hypertext Markup Language (HTML) • HTML Editor, usually “What You See Is What You Get” (WYSIWYG)

4. Hand Coding - Pros • Provides greater control of the finite aspects of a Web page • Usually needed to make a more complex Web page cross platform / cross browser compatible • Allows for good HTML formatting • You don’t have to rely on specific software—can use any text editor!

5. Hand Coding - Cons • Must have knowledge of HTML and file structure • Must be comfortable hand coding • Easy to make typing mistakes • Often much slower development time

6. HTML Editors • What You See Is What You Get (WYSIWYG) • Examples: Netscape Composer, Microsoft FrontPage, Adobe GoLive, Macromedia Dreamweaver • Two most commonly used HTML editors: • Dreamweaver • FrontPage

7. HTML Editor - Pros • Quick development time • Little knowledge of HTML needed for basic pages • Works much like any popular word processor • Controls file structure within the program

8. HTML Editor - Cons • May have browser bias especially for complex pages • Many still not well accomplished at writing dynamic pages • Some programs (like Dreamweaver, FrontPage, GoLive have site management features) others are only page editors.

9. Knowing HTML • You should try to know some HTML no matter what you do..find some good online references and keep up to date! • Provides an understanding of the HTML structure, should something ever need to be tweaked • Makes designing good, usable Web pages easier, even if you use an HTML Editor • You can learn how to code HTML while working with an editor

10. Stick With One HTML Editor • Which ever program you decide to use, stick with it • If you work in a group, try to use the same editor • In group settings, most HTML editors have features that make working together easier if you use the same program • File sharing/locking • Design notes, revision control • File manipulation (move, delete, rename) is done inside of the program • Does your department support/prefer you to use one program over the other? • Do you already have the software or do you need to order it? • Some programs add more “junk” than others and could begin to get in your way

11. Using Netscape/Mozilla Composer as your Web Page Editor

12. Advantages • Its easy to make HTML based documents—works like a word processor. • Can access it right from the Netscape Web browser. • Includes HTML code validation utility • Can be used to debug JavaScript • Spell checking feature. • Image importer converts images into a Web format automatically. • You can show all tags, look at HTML source or preview any one page. • It is free!

13. Disadvantages • It has a publishing feature but does not allow you to see remote and local copy. • Not a site management system. You would need to keep track off all of your pages, links, images, etc. • Help is the same help for Netscape so you have to sort through the information. • You have to open page in Composer. (Previous versions would allow you to browse for a page, edit, then publish).

14. Demo of Composer

15. Using Microsoft FrontPage as your Web Site Editor

16. Advantages • WYSIWYG editor with similar Toolbars/Interface to other Microsoft Programs • Easily Preview how your Web Site looks in Internet Explorer • Collection of Themes, Templates, Wizards, and Clip Art (like other Microsoft Programs) • Allows you to add/track tasks, see a report view, check links • Can edit the HTML code • Can see the directory structure/navigation of your site • Check in/out system for working with others.

17. Disadvantages • The code isn’t as clean/easy to read as it is in other web design programs for advanced pages • The Penn State Personal Server does not have FrontPage Server Extensions

18. Demo of FrontPage

19. Using Macromedia Dreamweaver as your Web Site Editor

20. Dreamweaver Advantages • Standards compliant- Accessibility checker for Section 508 compliance • Organizes Web pages by “site” • Creates easily readable code without much junk • Very robust syntax checker- Cleans “busy” code from other sources like FrontPage or Word • Free reference for HTML, JavaScript, CSS • Easy to use and create templates

21. Dreamweaver Advantages • Helps a collaborative project by allowing file “check-in” and “check-out” • Integrates with Fireworks and Flash for visual design of Web pages, keeping formatting and dynamic content • Does not change previously created code but will suggest cleanups and changes for better compatibility • Interface is highly customizable

22. Dreamweaver Disadvantages • Steep learning curve compared to FrontPage • Help files do not always give needed background on the bigger picture

23. Demo of Dreamweaver

24. Using Adobe GoLive as your Web Site Editor

25. GoLive • WYSIWYG editor • One of the first big HTML editors to hit the market • Many advanced tools like Dreamweaver

26. GoLive Advantages • Mostly Standards compliant • Easily organizes site • Integrates with Photoshop/ImageReady easily • Sites created in Photoshop can be transferred into GoLive for final editing • Allows “place anywhere” design

27. GoLive Advantages • Has a well developed “workgroup server” to help in collaborative projects • Helps with revision management • File control • Accessibility checker for Section 508 compliance • HTML syntax checker

28. GoLive Disadvantages • Interface can be more confusing to novice users • Unclear help files

29. Demo of GoLive

30. Using Macromedia Contribute A tool to manage Web sites for the Web novice

31. Contribute • Intended for basic editing and maintenance • Features a browse and edit interface • Few options, few tools, less confusion

32. Contribute Advantages • Easy for novice users to make text edits • Restricts users from editing complicated code • Can be customized by the Webmaster to allow/restrict certain features and access rights. • Ideal for large, well established Web sites that are managed by a team of content providers.

33. Contribute Disadvantages • Can’t be used to edit code so there is a need for at least one HTML code editor application for your site. • Webmaster must set access rights and distribute “keys” to give access to the site.

34. A look at Contribute

35. Using Macromedia Flash Dynamic content and Interactivity without all the code

36. Flash Examples • http://www.libraries.psu.edu/maps/ • Sample files provided by Macromedia- http://www.macromedia.com/software/flash/

37. Flash • Has become the Web standard for streaming media. • Familiar interface for Macromedia product users.

38. Flash Advantages • No HTML or JavaScript coding necessary • Can create interactive content with a couple of mouse clicks • Entire “Web site” can be contained in a single Flash file. • Easy to use templates and pre-made user interface components help create an attractive and functional user interface.

39. Flash Disadvantages • Flash player plug-in required, not “universally” compatible. • Intended for visually rich Web experience, not ideal for accessibility. • Advanced features have a steep learning curve.

40. Flash Demonstration

41. Using ANGEL as your Course Management System

42. What is a Course Management System? • A course management system (CMS) is a system used to manage course content. It typically allows the content manager or author to modify the content without knowing HTML. • It may also include various communication tools such as a chat room, bulletin boards, e-mail, quizzes, etc. • ANGEL- http://cms.psu.edu/

43. ANGEL Advantages • Built in HTML editor on the PC • Import/Export pages easily from one course to the next • Includes utilities to batch upload Web files • You can easily change permissions (password protect, limit to certain teams, temporarily hide files)

44. ANGEL Advantages • Limit access to the students/faculty of the course • Easily link to Web sites outside of ANGEL

45. ANGEL Disadvantages • Does not have an HTML editor on the MAC. You need to know HTML or copy/paste from HTML editor • Does not work on Mac OS X using Internet Explorer (for now) • You can only build Web information page by page, not an entire site • Difficult to export a Web site from ANGEL to a local machine to then edit using FrontPage or Dreamweaver • Have to be connected to the Internet to work on pages • Difficult to have advanced layout control • You will not have a URL on the Web to direct others to

46. Demo of ANGEL

47. Resources

48. Web-Based Training Available at: https://wbt.psu.edu/ • Web editor comparison course available: • CIW Site Design Part 3: Using FrontPage, Dreamweaver, and HomeSite.

49. HTML Editors • EditPlus2- http://www.editplus.com • Netscape Composer-http://wp.netscape.com/communicator/composer/v4.0/index.html • Frontpage- http://www.microsoft.com/frontpage/ • Dreamweaver-http://www.macromedia.com/software/dreamweaver/ • Adobe GoLive-http://www.adobe.com/products/golive/main.html

50. Codeless Tools • Flash- http://www.macromedia.com/software/flash/ • Contribute-http://www.macromedia.com/software/contribute/ • ANGEL- http://cms.psu.edu