Web Editor Overview Adam Cavotta and Christine L. Vucinich ITS Training Services

Objectives Examine the difference between using an HTML editor and hand coding Web pages 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 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 Discuss specific features/problems with each system for Penn State use

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

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

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

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

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

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

Knowing HTML You should try to know some HTML no matter what you do..find some good online references and keep up to date! 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 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 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 You can learn how to code HTML while working with an editor

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

Using Netscape/Mozilla Composer as your Web Page Editor

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

Disadvantages It has a publishing feature but does not allow you to see remote and local copy. 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. 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. 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). You have to open page in Composer. (Previous versions would allow you to browse for a page, edit, then publish).

Demo of Composer

Using Microsoft FrontPage as your Web Site Editor

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

Disadvantages The code isn’t as clean/easy to read as it is in other web design programs for advanced pages 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 The Penn State Personal Server does not have FrontPage Server Extensions

Demo of FrontPage

Using Macromedia Dreamweaver as your Web Site Editor

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

Dreamweaver Advantages Helps a collaborative project by allowing file “check-in” and “check-out” 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 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 Does not change previously created code but will suggest cleanups and changes for better compatibility Interface is highly customizable Interface is highly customizable

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

Demo of Dreamweaver

Using Adobe GoLive as your Web Site Editor

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

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

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

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

Demo of GoLive

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

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

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

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. 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. Webmaster must set access rights and distribute “keys” to give access to the site.

A look at Contribute

Using Macromedia Flash Dynamic content and Interactivity without all the code

Flash Examples Sample files provided by Macromedia- Sample files provided by Macromedia-

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

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

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

Flash Demonstration

Using ANGEL as your Course Management System

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. 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, , quizzes, etc. It may also include various communication tools such as a chat room, bulletin boards, , quizzes, etc. ANGEL- ANGEL-

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

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

ANGEL Disadvantages Does not have an HTML editor on the MAC. You need to know HTML or copy/paste from HTML editor 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) 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 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 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 Have to be connected to the Internet to work on pages Difficult to have advanced layout control Difficult to have advanced layout control You will not have a URL on the Web to direct others to You will not have a URL on the Web to direct others to

Demo of ANGEL

Resources

Web-Based Training Available at: Web editor comparison course available: Web editor comparison course available: CIW Site Design Part 3: Using FrontPage, Dreamweaver, and HomeSite. CIW Site Design Part 3: Using FrontPage, Dreamweaver, and HomeSite.

HTML Editors EditPlus2- EditPlus Netscape Composer- x.html Netscape Composer- x.html x.html x.html Frontpage- Frontpage- Dreamweaver- Dreamweaver- Adobe GoLive- Adobe GoLive-

Codeless Tools Flash- Flash- Contribute- Contribute- ANGEL- ANGEL-

Web Design Webmonkey Webmonkey earthWebdeveloper.com earthWebdeveloper.com HTML Goodies HTML Goodies Web Developers Virtual Library Web Developers Virtual Library Web Developer.com Web Developer.com

DevShed.com DevShed.com Builder.com Builder.com

Questions?

Web Case Scenarios Activity