Web Editor Choices for Faculty Christine L. Vucinich Training Specialist, 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, and the Web editing features of ANGEL Learn about Dreamweaver, FrontPage, 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

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 slower development Often slower development

HTML Editors What You See Is What You Get (WYSIWYG) What You See Is What You Get (WYSIWYG) 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 May have browser bias Many still not well accomplished at writing dynamic pages (ASP, PHP, JSP, ColdFusion) Many still not well accomplished at writing dynamic pages (ASP, PHP, JSP, ColdFusion) Complex pages can easily be composed that do not follow standards and therefore are not cross platform / cross browser compatible Complex pages can easily be composed that do not follow standards and therefore are not cross platform / cross browser compatible

Knowing HTML You should know some HTML no matter what you do You should know some HTML no matter what you do Provides an understanding of the HTML structure, should something ever need tweaked Provides an understanding of the HTML structure, should something ever need tweaked Makes designing good, usable Web pages easier, even if you use a HTML Editor Makes designing good, usable Web pages easier, even if you use a 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 Find some good online references and keep up to date! Find some good online references and keep up to date!

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 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? 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 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

Stick With One HTML Editor Understand and know the programs tool/method for site management Understand and know the programs tool/method for site management Most HTML editors do best when nearly all file manipulation is done “inside” the program Most HTML editors do best when nearly all file manipulation is done “inside” the program File name change File name change Move files Move files Delete files Delete files

Cross Platform / Cross Browser Compatibility One major problem with any web page, especially those created with a HTML editor, is cross platform/cross browser compatibility One major problem with any web page, especially those created with a HTML editor, is cross platform/cross browser compatibility Frontpage prefers Internet Explorer Frontpage prefers Internet Explorer Dreamweaver tries to be more compatible Dreamweaver tries to be more compatible There is virtually a 100% chance of having some formatting/compatibility problem with any HTML editor There is virtually a 100% chance of having some formatting/compatibility problem with any HTML editor

Design and Planning Any web page will only be as good as the time spent planning the design Any web page will only be as good as the time spent planning the design Know what the lowest-common-denominator is and try to design for it (Netscape 4.7) Know what the lowest-common-denominator is and try to design for it (Netscape 4.7) Know the various tools available to help with “page layout” Know the various tools available to help with “page layout” Tables Tables Layers Layers Accessibility (A PSU requirement for official pages) Accessibility (A PSU requirement for official pages) Know who your audience is…how will they be connecting to the Internet? Know who your audience is…how will they be connecting to the Internet?

Web Servers There are two main types of Web servers There are two main types of Web servers Unix Unix Windows Windows Most servers are Unix ( Most servers are Unix This presents a problem for most of the FrontPage extensions that allow for some dynamic behavior This presents a problem for most of the FrontPage extensions that allow for some dynamic behavior Unix servers might have problems with Windows/Mac files that are not formatted properly (especially scripts) Unix servers might have problems with Windows/Mac files that are not formatted properly (especially scripts)

Using FrontPage as your Web Site Editor

Examples of Web Sites created in FrontPage tion/gallery.htm tion/gallery.htm tion/gallery.htm tion/gallery.htm

Advantages WYSIWYG editor with similar Toolbars/Interface to other Microsoft Programs WYSIWYG editor with similar Toolbars/Interface to other Microsoft Programs Easily Preview your Web Site Easily Preview your Web Site Collection of Themes and Clip Art (like other Microsoft Programs) Collection of Themes and Clip Art (like other Microsoft Programs) Allows you to add/track tasks, see a report view, check links and work with others Allows you to add/track tasks, see a report view, check links and work with others 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

Disadvantages The code isn’t as clean/easy to read as it is in other Web Design Programs The code isn’t as clean/easy to read as it is in other Web Design Programs 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

Learning FrontPage Microsoft’s Web site: (you can download a demo, a tutorial and participate in discussions/on-line community) Microsoft’s Web site: (you can download a demo, a tutorial and participate in discussions/on-line community) Web-Based Training and ITS Free Seminars (free to PSU students, staff and faculty): Web-Based Training and ITS Free Seminars (free to PSU students, staff and faculty):

Using Dreamweaver as your Web Site Editor

Dreamweaver Incorporates many advanced features Incorporates many advanced features Accessibility Support Accessibility Support Dynamic language support Dynamic language support Code Editing Code Editing XML support XML support Growing JavaScript Library Growing JavaScript Library

Examples of Web Sites created with Dreamweaver /dream_index.html 002/dream_index.html 002/dream_index.html 002/dream_index.html

Dreamweaver Advantages Standards compliant Standards compliant Organizes webpages by “site” Organizes webpages by “site” Creates easily readable code without much junk Creates easily readable code without much junk Cleans “busy” code from other sources like Frontpage or Word 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 templates Easy to use 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 MX for visual design of Web pages, keeping formatting and dynamic content Integrates with Fireworks MX 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 Highly customizable Highly customizable

Dreamweaver Advantages Accessibility checker for Section 508 compliance Accessibility checker for Section 508 compliance Very robust HTML syntax checker Very robust HTML syntax checker

Dreamweaver Disadvantages Bigger learning curve than FrontPage Bigger learning curve than FrontPage As with other more advanced editors, a lot of options, many a general user might not use or use incorrectly As with other more advanced editors, a lot of options, many a general user might not use or use incorrectly Help files do not always give needed background on the bigger picture Help files do not always give needed background on the bigger picture Highly customizable (novice user) Highly customizable (novice user)

Demo of Dreamweaver

Learning Dreamweaver Macromedia’s Web site: Macromedia’s Web site: Web-Based Training and ITS Free Seminars (free to PSU students, staff and faculty): Web-Based Training and ITS Free Seminars (free to PSU students, staff and faculty):

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

What is Penn State’s Course Management System? ANGEL ( ANGEL ( Penn State's Course Management System, A New Global Environment for Learning (ANGEL), is responsive to the needs of students and instructors for course management and interactive learning strategies. ANGEL is easy for computer novices and is superior for the technologically savvy. ANGEL has essential course management features such as syllabus space, lesson space, teams, discussion, quizzing, surveys, drop boxes, and grading, along with unique faculty tools to track student work and transform learning processes. Penn State's Course Management System, A New Global Environment for Learning (ANGEL), is responsive to the needs of students and instructors for course management and interactive learning strategies. ANGEL is easy for computer novices and is superior for the technologically savvy. ANGEL has essential course management features such as syllabus space, lesson space, teams, discussion, quizzing, surveys, drop boxes, and grading, along with unique faculty tools to track student work and transform learning processes.

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

Learning ANGEL ANGEL’s Web site: ANGEL’s Web site: ITS Free Seminars: ITS Free Seminars:

ANGEL vs. HTML Editor ANGEL is a Course Management System ANGEL is a Course Management System Dreamweaver and FrontPage are HTML Editors Dreamweaver and FrontPage are HTML Editors They work really well together! They work really well together!

Resources

HTML Editors EditPlus2 EditPlus Frontpage Frontpage Dreamweaver Dreamweaver 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?