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

Web Publishing Web Publishing OverviewOverview

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

Learn about Fireworks, Photoshop and Learn about Fireworks, Photoshop and ImageReadyImageReady

Getting Started with Web PagesGetting Started with Web Pages

Penn State eportfolio:Penn State eportfolio:

http://eportfolio.psu.edu/http://eportfolio.psu.edu/

Applying for WebSpace Applying for WebSpace https://www.work.psu.edu/webspace/https://www.work.psu.edu/webspace/

1-1 Help Provided by University Learning 1-1 Help Provided by University Learning CentersCenters

http://www.ulc.psu.edu/http://www.ulc.psu.edu/

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

Considerations for Choosing a Considerations for Choosing a Photo Editing ProgramPhoto Editing Program

Cost Cost (software and training)(software and training)

Hardware requirements Hardware requirements (such as platform, (such as platform, operating system, processor, RAM, Hard-disk space, operating system, processor, RAM, Hard-disk space, and display)and display)

UsabilityUsability FunctionalityFunctionality Purpose for using it Purpose for using it (web graphics or print)(web graphics or print)

Demo of PhotoshopDemo of Photoshop

Demo of ImageReadyDemo of ImageReady

Demo of FireworksDemo of Fireworks

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://http://

www.macromedia.com/software/dreamweaverwww.macromedia.com/software/dreamweaver// 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?