Web Editor Choices Web Editor Choices for Facultyfor Faculty

Christine L. VucinichChristine L. VucinichTraining Specialist, ITS Training ServicesTraining Specialist, ITS Training Services

http://its.psu.edu/training/http://its.psu.edu/training/

ObjectivesObjectives

Examine the difference between using an Examine the difference between using an HTML editor and hand coding Web pages HTML editor and hand coding Web pages

Learn about Dreamweaver, FrontPage, Learn about Dreamweaver, FrontPage, and the Web editing features of ANGEL and the Web editing features of ANGEL

Discuss specific features/problems with Discuss specific features/problems with each system for Penn State use each system for Penn State use

Web Page CreationWeb Page Creation

Two OptionsTwo Options Hand coding of Hypertext Markup Language Hand coding of Hypertext Markup Language

(HTML)(HTML) HTML Editor, usually “What You See Is What HTML Editor, usually “What You See Is What

You Get” (WYSIWYG)You Get” (WYSIWYG)

Hand Coding - ProsHand Coding - Pros

Provides greater control of the finite Provides greater control of the finite aspects of a web pageaspects of a web page

Usually needed to make a more complex Usually needed to make a more complex web page cross platform / cross browser web page cross platform / cross browser compatiblecompatible

Allows for good HTML formattingAllows for good HTML formatting You don’t have to rely on specific softwareYou don’t have to rely on specific software

—can use any text editor!—can use any text editor!

Hand Coding - ConsHand Coding - Cons

Must have knowledge of HTML and file Must have knowledge of HTML and file structurestructure

Must be comfortable hand codingMust be comfortable hand coding Easy to make typing mistakesEasy to make typing mistakes Often slower developmentOften slower development

HTML EditorsHTML Editors

WWhat hat YYou ou SSee ee IIs s WWhat hat YYou ou GGet et (WYSIWYG)(WYSIWYG)

Two most commonly used HTML editors:Two most commonly used HTML editors: DreamweaverDreamweaver FrontPageFrontPage

HTML Editor - ProsHTML Editor - Pros

Quick development timeQuick development time Little knowledge of HTML needed for basic Little knowledge of HTML needed for basic

pagespages Works much like any popular word Works much like any popular word

processorprocessor Controls file structure within the programControls file structure within the program

HTML Editor - ConsHTML Editor - Cons

May have browser biasMay have browser bias Many still not well accomplished at writing Many still not well accomplished at writing

dynamic pages (ASP, PHP, JSP, dynamic pages (ASP, PHP, JSP, ColdFusion)ColdFusion)

Complex pages can easily be composed Complex pages can easily be composed that do not follow standards and therefore that do not follow standards and therefore are not cross platform / cross browser are not cross platform / cross browser compatiblecompatible

Knowing HTMLKnowing HTML

You should know some HTML no matter what You should know some HTML no matter what you do you do

Provides an understanding of the HTML Provides an understanding of the HTML structure, should something ever need tweakedstructure, should something ever need tweaked

Makes designing good, usable Web pages Makes designing good, usable Web pages easier, even if you use a HTML Editoreasier, even if you use a HTML Editor

You can learn how to code HTML while working You can learn how to code HTML while working with an editorwith an editor

Find some good online references and keep up Find some good online references and keep up to date!to date!

Stick With One HTML EditorStick With One HTML Editor Which ever program you decide to use, stick with itWhich ever program you decide to use, stick with it If you work in a group, try to use the same editorIf you work in a group, try to use the same editor Does your department support/prefer you to use one Does your department support/prefer you to use one

program over the other?program over the other? Some programs add more “junk” than others and could Some programs add more “junk” than others and could

begin to get in your waybegin to get in your way In group settings, most HTML editors have features that In group settings, most HTML editors have features that

make working together easier if you use the same make working together easier if you use the same programprogram File sharing/lockingFile sharing/locking Design notes, revision controlDesign notes, revision control

Stick With One HTML EditorStick With One HTML Editor

Understand and know the programs Understand and know the programs tool/method for site managementtool/method for site management

Most HTML editors do best when nearly all Most HTML editors do best when nearly all file manipulation is done “inside” the file manipulation is done “inside” the programprogram File name changeFile name change Move filesMove files Delete filesDelete files

Cross Platform / Cross Cross Platform / Cross Browser CompatibilityBrowser Compatibility

One major problem with any web page, One major problem with any web page, especially those created with a HTML especially those created with a HTML editor, is cross platform/cross browser editor, is cross platform/cross browser compatibilitycompatibility

Frontpage prefers Internet ExplorerFrontpage prefers Internet Explorer Dreamweaver tries to be more compatibleDreamweaver tries to be more compatible There is virtually a 100% chance of having There is virtually a 100% chance of having

some formatting/compatibility problem with some formatting/compatibility problem with any HTML editorany HTML editor

Design and PlanningDesign and Planning Any web page will only be as good as the time spent Any web page will only be as good as the time spent

planning the designplanning the design Know what the lowest-common-denominator is and try to Know what the lowest-common-denominator is and try to

design for it (Netscape 4.7)design for it (Netscape 4.7) Know the various tools available to help with “page Know the various tools available to help with “page

layout”layout” TablesTables LayersLayers

Accessibility (A PSU requirement for official pages)Accessibility (A PSU requirement for official pages) Know who your audience is…how will they be Know who your audience is…how will they be

connecting to the Internet?connecting to the Internet?

Web ServersWeb Servers There are two main types of Web serversThere are two main types of Web servers

UnixUnix WindowsWindows

Most Most ITS@PennStateITS@PennState servers are Unix ( servers are Unix (www.personal.psu.eduwww.personal.psu.edu))

This presents a problem for most of the This presents a problem for most of the FrontPage extensions that allow for some FrontPage extensions that allow for some dynamic behaviordynamic behavior

Unix servers might have problems with Unix servers might have problems with Windows/Mac files that are not formatted Windows/Mac files that are not formatted properly (especially scripts)properly (especially scripts)

Using FrontPageUsing FrontPage

as your Web Site Editoras your Web Site Editor

Examples of Web Sites created Examples of Web Sites created in FrontPagein FrontPage

http://www.microsoft.com/frontpage/evaluahttp://www.microsoft.com/frontpage/evaluation/gallery.htmtion/gallery.htm

AdvantagesAdvantages WYSIWYG editor with similar Toolbars/Interface WYSIWYG editor with similar Toolbars/Interface

to other Microsoft Programsto other Microsoft Programs Easily Preview your Web SiteEasily Preview your Web Site Collection of Themes and Clip Art (like other Collection of Themes and Clip Art (like other

Microsoft Programs)Microsoft Programs) Allows you to add/track tasks, see a report view, Allows you to add/track tasks, see a report view,

check links and work with otherscheck links and work with others Can edit the HTML codeCan edit the HTML code Can see the Directory Structure/Navigation of Can see the Directory Structure/Navigation of

your Siteyour Site

DisadvantagesDisadvantages

The code isn’t as clean/easy to read as it The code isn’t as clean/easy to read as it is in other Web Design Programsis in other Web Design Programs

The Penn State Personal Server does not The Penn State Personal Server does not have FrontPage Server Extensionshave FrontPage Server Extensions

Demo of FrontPageDemo of FrontPage

Learning FrontPageLearning FrontPage

Microsoft’s Web site: Microsoft’s Web site: http://www.microsoft.com/frontpage/http://www.microsoft.com/frontpage/ (you (you can download a demo, a tutorial and can download a demo, a tutorial and participate in discussions/on-line participate in discussions/on-line community)community)

Web-Based Training and ITS Free Web-Based Training and ITS Free Seminars (free to PSU students, staff and Seminars (free to PSU students, staff and faculty): http://its.psu.edu/training/faculty): http://its.psu.edu/training/

Using DreamweaverUsing Dreamweaver

as your Web Site Editoras your Web Site Editor

DreamweaverDreamweaver

Incorporates many advanced featuresIncorporates many advanced features Accessibility SupportAccessibility Support Dynamic language supportDynamic language support Code EditingCode Editing XML supportXML support Growing JavaScript LibraryGrowing JavaScript Library

Examples of Web Sites created Examples of Web Sites created with Dreamweaverwith Dreamweaver

http://www.macromedia.com/http://www.macromedia.com/ http://www.intranetjournal.com/articles/http://www.intranetjournal.com/articles/

200002/dream_index.html200002/dream_index.html

Dreamweaver AdvantagesDreamweaver Advantages

Standards compliantStandards compliant Organizes webpages by “site”Organizes webpages by “site” Creates easily readable code without Creates easily readable code without

much junkmuch junk Cleans “busy” code from other sources Cleans “busy” code from other sources

like Frontpage or Wordlike Frontpage or Word Free reference for HTML, JavaScript, CSSFree reference for HTML, JavaScript, CSS Easy to use templatesEasy to use templates

Dreamweaver AdvantagesDreamweaver Advantages

Helps a collaborative project by allowing Helps a collaborative project by allowing file “check-in” and “check-out”file “check-in” and “check-out”

Integrates with Fireworks MX for visual Integrates with Fireworks MX for visual design of Web pages, keeping formatting design of Web pages, keeping formatting and dynamic contentand dynamic content

Does not change previously created code Does not change previously created code but will suggest cleanups and changes for but will suggest cleanups and changes for better compatibilitybetter compatibility

Highly customizableHighly customizable

Dreamweaver AdvantagesDreamweaver Advantages

Accessibility checker for Section 508 Accessibility checker for Section 508 compliancecompliance

Very robust HTML syntax checkerVery robust HTML syntax checker

Dreamweaver DisadvantagesDreamweaver Disadvantages

Bigger learning curve than FrontPageBigger learning curve than FrontPage As with other more advanced editors, a lot As with other more advanced editors, a lot

of options, many a general user might not of options, many a general user might not use or use incorrectlyuse or use incorrectly

Help files do not always give needed Help files do not always give needed background on the bigger picturebackground on the bigger picture

Highly customizable (novice user)Highly customizable (novice user)

Demo of DreamweaverDemo of Dreamweaver

Learning DreamweaverLearning Dreamweaver

Macromedia’s Web site: Macromedia’s Web site: http://www.macromedia.comhttp://www.macromedia.com

Web-Based Training and ITS Free Web-Based Training and ITS Free Seminars (free to PSU students, staff and Seminars (free to PSU students, staff and faculty): http://its.psu.edu/training/faculty): http://its.psu.edu/training/

Using ANGELUsing ANGEL

as your Course Management as your Course Management SystemSystem

What is a Course Management What is a Course Management System?System?

A course management system (CMS) is a A course management system (CMS) is a system used to manage course content. It system used to manage course content. It typically allows the content manager or typically allows the content manager or author to modify the content without author to modify the content without knowing HTML. It may also include knowing HTML. It may also include various communication tools such as a various communication tools such as a chat room, bulletin boards, e-mail, chat room, bulletin boards, e-mail, quizzes, etc.quizzes, etc.

What is Penn State’s Course What is Penn State’s Course Management System?Management System?

ANGEL (http://cms.psu.edu)!!ANGEL (http://cms.psu.edu)!! Penn State's Course Management System, A New Penn State's Course Management System, A New

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

ANGEL AdvantagesANGEL Advantages

Built in HTML editor on the PCBuilt in HTML editor on the PC Import/Export pages easily from one Import/Export pages easily from one

course to the nextcourse to the next Includes utilities to batch upload Web filesIncludes utilities to batch upload Web files You can easily change permissions You can easily change permissions

(password protect, limit to certain teams, (password protect, limit to certain teams, temporarily hide files)temporarily hide files)

ANGEL AdvantagesANGEL Advantages

Limit access to the students/faculty of the Limit access to the students/faculty of the course course

Easily link to web sites outside of ANGELEasily link to web sites outside of ANGEL

ANGEL DisadvantagesANGEL Disadvantages Does not have an HTML editor on the MAC. You need to Does not have an HTML editor on the MAC. You need to

know HTML or copy/paste from HTML editorknow HTML or copy/paste from HTML editor You can only build web information page by page, not an You can only build web information page by page, not an

entire siteentire site Difficult to export a Web site from ANGEL to a local Difficult to export a Web site from ANGEL to a local

machine to then edit using FrontPage or Dreamweavermachine to then edit using FrontPage or Dreamweaver Have to be connected to the Internet to work on pagesHave to be connected to the Internet to work on pages Difficult to have advanced layout controlDifficult to have advanced layout control You will not have a URL on the Web to direct others toYou will not have a URL on the Web to direct others to

Demo of ANGELDemo of ANGEL

Learning ANGELLearning ANGEL

ANGEL’s Web site: http://cms.psu.edu/ANGEL’s Web site: http://cms.psu.edu/

ITS Free Seminars: ITS Free Seminars: http://its.psu.edu/training/http://its.psu.edu/training/

ANGEL vs. HTML EditorANGEL vs. HTML Editor

ANGEL is a Course Management SystemANGEL is a Course Management System Dreamweaver and FrontPage are HTML Dreamweaver and FrontPage are HTML

EditorsEditors They work really well together!They work really well together!

ResourcesResources

HTML EditorsHTML Editors EditPlus2EditPlus2

http://www.editplus.comhttp://www.editplus.com FrontpageFrontpage

http://www.microsoft.com/frontpagehttp://www.microsoft.com/frontpage DreamweaverDreamweaver

http://www.macromedia.com/software/dreamweaverhttp://www.macromedia.com/software/dreamweaver ANGELANGEL

http://cms.psu.eduhttp://cms.psu.edu

Web DesignWeb Design

WebmonkeyWebmonkey http://hotwired.lycos.com/webmonkey/http://hotwired.lycos.com/webmonkey/

earthWebdeveloper.comearthWebdeveloper.com http://webdeveloper.earthweb.com/http://webdeveloper.earthweb.com/

HTML GoodiesHTML Goodies http://www.htmlgoodies.com/http://www.htmlgoodies.com/

Web Developers Virtual LibraryWeb Developers Virtual Library http://www.wdvl.com/http://www.wdvl.com/

Web Developer.comWeb Developer.com http://www.webdeveloper.com/http://www.webdeveloper.com/

DevShed.comDevShed.com http://www.devshed.com/http://www.devshed.com/

Builder.comBuilder.com http://builder.com.com/http://builder.com.com/

Questions?Questions?