Web Editor Web Editor OverviewOverview

Web Editor Web Editor OverviewOverview

Adam Cavotta and Adam Cavotta and Christine L. VucinichChristine L. Vucinich

ITS Training ServicesITS Training Serviceshttp://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, GoLive, Flash, Contribute, and the Web GoLive, Flash, Contribute, and the Web editing features of ANGEL 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

Basic Web Page CreationBasic Web 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 much slower development timeOften much slower development time

HTML EditorsHTML Editors

What You See Is What You Get What You See Is What You Get (WYSIWYG)(WYSIWYG)

Examples: Netscape Composer, Microsoft Examples: Netscape Composer, Microsoft FrontPage, Adobe GoLive, Macromedia FrontPage, Adobe GoLive, Macromedia DreamweaverDreamweaver

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 bias especially for May have browser bias especially for complex pagescomplex pages

Many still not well accomplished at writing Many still not well accomplished at writing dynamic pages dynamic pages

Some programs (like Dreamweaver, Some programs (like Dreamweaver, FrontPage, GoLive have site management FrontPage, GoLive have site management features) others are only page editors.features) others are only page editors.

Knowing HTMLKnowing HTML

You should try to know some HTML no matter You should try to know some HTML no matter what you do..find some good online references what you do..find some good online references and keep up to date!and keep up to date!

Provides an understanding of the HTML Provides an understanding of the HTML structure, should something ever need to be structure, should something ever need to be tweakedtweaked

Makes designing good, usable Web pages Makes designing good, usable Web pages easier, even if you use an HTML Editoreasier, even if you use an 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

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 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 programmake working together easier if you use the same program File sharing/lockingFile sharing/locking Design notes, revision controlDesign notes, revision control File manipulation (move, delete, rename) is done inside of the File manipulation (move, delete, rename) is done inside of the

programprogram 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? Do you already have the software or do you need to order Do you already have the software or do you need to order

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

Using Using Netscape/Mozilla Netscape/Mozilla

ComposerComposeras your Web Page Editoras your Web Page Editor

AdvantagesAdvantages Its easy to make HTML based documents—works like a Its easy to make HTML based documents—works like a

word processor.word processor. Can access it right from the Netscape Web browser.Can access it right from the Netscape Web browser. Includes HTML code validation utilityIncludes HTML code validation utility Can be used to debug JavaScriptCan be used to debug JavaScript Spell checking feature.Spell checking feature. Image importer converts images into a Web format Image importer converts images into a Web format

automatically.automatically. You can show all tags, look at HTML source or preview You can show all tags, look at HTML source or preview

any one page.any one page. It is free!It is free!

DisadvantagesDisadvantages

It has a publishing feature but does not allow It has a publishing feature but does not allow you to see remote and local copy.you to see remote and local copy.

Not a site management system. You would need Not a site management system. You would need to keep track off all of your pages, links, images, to keep track off all of your pages, links, images, etc.etc.

Help is the same help for Netscape so you have Help is the same help for Netscape so you have to sort through the information.to sort through the information.

You have to open page in Composer. (Previous You have to open page in Composer. (Previous versions would allow you to browse for a page, versions would allow you to browse for a page, edit, then publish).edit, then publish).

Demo of ComposerDemo of Composer

Using Microsoft Using Microsoft FrontPageFrontPage

as your Web Site Editoras your Web Site Editor

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

Microsoft ProgramsMicrosoft Programs Easily Preview how your Web Site looks in Internet Easily Preview how your Web Site looks in Internet

ExplorerExplorer Collection of Themes, Templates, Wizards, and Clip Art Collection of Themes, Templates, Wizards, and Clip Art

(like other Microsoft Programs)(like other Microsoft Programs) Allows you to add/track tasks, see a report view, check Allows you to add/track tasks, see a report view, check

links links Can edit the HTML codeCan edit the HTML code Can see the directory structure/navigation of your siteCan see the directory structure/navigation of your site Check in/out system for working with others.Check in/out system for working with others.

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 programs for is in other web design programs for advanced pagesadvanced pages

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

Using Macromedia Using Macromedia DreamweaverDreamweaver

as your Web Site Editoras your Web Site Editor

Dreamweaver AdvantagesDreamweaver Advantages

Standards compliant- Accessibility checker for Standards compliant- Accessibility checker for Section 508 complianceSection 508 compliance

Organizes Web pages by “site”Organizes Web pages by “site” Creates easily readable code without much junkCreates easily readable code without much junk Very robust syntax checker- Cleans “busy” code Very robust syntax checker- Cleans “busy” code

from other sources like FrontPage or Wordfrom other sources like FrontPage or Word Free reference for HTML, JavaScript, CSSFree reference for HTML, JavaScript, CSS Easy to use and create templatesEasy to use and create 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 and Flash for Integrates with Fireworks and Flash for visual design of Web pages, keeping visual design of Web pages, keeping formatting and dynamic contentformatting and 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

Interface is highly customizableInterface is highly customizable

Dreamweaver DisadvantagesDreamweaver Disadvantages

Steep learning curve compared to Steep learning curve compared to FrontPageFrontPage

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

Demo of DreamweaverDemo of Dreamweaver

Using Adobe GoLiveUsing Adobe GoLive

as your Web Site Editoras your Web Site Editor

GoLiveGoLive

WYSIWYG editorWYSIWYG editor One of the first big HTML editors to hit the One of the first big HTML editors to hit the

marketmarket Many advanced tools like DreamweaverMany advanced tools like Dreamweaver

GoLive AdvantagesGoLive Advantages

Mostly Standards compliantMostly Standards compliant Easily organizes siteEasily organizes site Integrates with Photoshop/ImageReady Integrates with Photoshop/ImageReady

easilyeasily Sites created in Photoshop can be transferred Sites created in Photoshop can be transferred

into GoLive for final editinginto GoLive for final editing Allows “place anywhere” designAllows “place anywhere” design

GoLive AdvantagesGoLive Advantages

Has a well developed “workgroup server” Has a well developed “workgroup server” to help in collaborative projectsto help in collaborative projects Helps with revision managementHelps with revision management File controlFile control

Accessibility checker for Section 508 Accessibility checker for Section 508 compliancecompliance

HTML syntax checkerHTML syntax checker

GoLive DisadvantagesGoLive Disadvantages

Interface can be more confusing to novice Interface can be more confusing to novice usersusers

Unclear help filesUnclear help files

Demo of GoLiveDemo of GoLive

Using Macromedia Using Macromedia ContributeContribute

A tool to manage Web sites for the A tool to manage Web sites for the Web noviceWeb novice

ContributeContribute

Intended for basic editing and Intended for basic editing and maintenancemaintenance

Features a browse and edit interfaceFeatures a browse and edit interface Few options, few tools, less confusionFew options, few tools, less confusion

Contribute AdvantagesContribute Advantages

Easy for novice users to make text editsEasy for novice users to make text edits Restricts users from editing complicated Restricts users from editing complicated

codecode Can be customized by the Webmaster to Can be customized by the Webmaster to

allow/restrict certain features and access allow/restrict certain features and access rights.rights.

Ideal for large, well established Web sites Ideal for large, well established Web sites that are managed by a team of content that are managed by a team of content providers.providers.

Contribute DisadvantagesContribute Disadvantages

Can’t be used to edit code so there is a Can’t be used to edit code so there is a need for at least one HTML code editor need for at least one HTML code editor application for your site.application for your site.

Webmaster must set access rights and Webmaster must set access rights and distribute “keys” to give access to the site.distribute “keys” to give access to the site.

A look at ContributeA look at Contribute

Using Macromedia Using Macromedia FlashFlash

Dynamic content and Interactivity Dynamic content and Interactivity without all the codewithout all the code

Flash ExamplesFlash Examples

http://www.libraries.psu.edu/maps/http://www.libraries.psu.edu/maps/ Sample files provided by Macromedia- Sample files provided by Macromedia-

http://www.macromedia.com/software/flash/http://www.macromedia.com/software/flash/

FlashFlash

Has become the Web standard for Has become the Web standard for streaming media.streaming media.

Familiar interface for Macromedia product Familiar interface for Macromedia product users.users.

Flash AdvantagesFlash Advantages

No HTML or JavaScript coding necessaryNo HTML or JavaScript coding necessary Can create interactive content with a Can create interactive content with a

couple of mouse clickscouple of mouse clicks Entire “Web site” can be contained in a Entire “Web site” can be contained in a

single Flash file.single Flash file. Easy to use templates and pre-made user Easy to use templates and pre-made user

interface components help create an interface components help create an attractive and functional user interface. attractive and functional user interface.

Flash DisadvantagesFlash Disadvantages

Flash player plug-in required, not Flash player plug-in required, not “universally” compatible.“universally” compatible.

Intended for visually rich Web experience, Intended for visually rich Web experience, not ideal for accessibility.not ideal for accessibility.

Advanced features have a steep learning Advanced features have a steep learning curve.curve.

Flash DemonstrationFlash Demonstration

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. knowing HTML.

It may also include various communication It may also include various communication tools such as a chat room, bulletin boards, tools such as a chat room, bulletin boards, e-mail, quizzes, etc.e-mail, quizzes, etc.

ANGEL- http://cms.psu.edu/ANGEL- http://cms.psu.edu/

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 Does not work on Mac OS X using Internet Explorer (for Does not work on Mac OS X using Internet Explorer (for

now)now) You can only build Web information page by page, not You can only build Web information page by page, not

an entire sitean entire 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

ResourcesResources

Web-Based TrainingWeb-Based Training

Available at: https://wbt.psu.edu/Available at: https://wbt.psu.edu/ Web editor comparison course available:Web editor comparison course available:

CIW Site Design Part 3: Using FrontPage, CIW Site Design Part 3: Using FrontPage, Dreamweaver, and HomeSite.Dreamweaver, and HomeSite.

HTML EditorsHTML Editors

EditPlus2- EditPlus2- http://www.editplus.comhttp://www.editplus.com Netscape Composer-Netscape Composer-

http://wp.netscape.com/communicator/composer/v4.0/indehttp://wp.netscape.com/communicator/composer/v4.0/index.htmlx.html

Frontpage- Frontpage- http://www.microsoft.com/http://www.microsoft.com/frontpagefrontpage// Dreamweaver-Dreamweaver-http://www.macromedia.com/software/http://www.macromedia.com/software/

dreamweaverdreamweaver// Adobe Adobe

GoLive-GoLive-http://www.adobe.com/products/golive/main.htmlhttp://www.adobe.com/products/golive/main.html

Codeless ToolsCodeless Tools

Flash- Flash- http://www.macromedia.com/software/flash/http://www.macromedia.com/software/flash/

Contribute-http://www.macromedia.com/Contribute-http://www.macromedia.com/software/contribute/software/contribute/

ANGEL- ANGEL-

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?

Web Case Scenarios ActivityWeb Case Scenarios Activity