Web Publishing 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 Learn about Fireworks, Photoshop and ImageReady Learn about Fireworks, Photoshop and ImageReady

Getting Started with Web Pages Penn State eportfolio: Penn State eportfolio: Applying for WebSpace Applying for WebSpace Help Provided by University Learning Centers 1-1 Help Provided by University Learning Centers

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

Considerations for Choosing a Photo Editing Program Cost (software and training) Cost (software and training) Hardware requirements (such as platform, operating system, processor, RAM, Hard-disk space, and display) Hardware requirements (such as platform, operating system, processor, RAM, Hard-disk space, and display) Usability Usability Functionality Functionality Purpose for using it (web graphics or print) Purpose for using it (web graphics or print)

Demo of Photoshop

Demo of ImageReady

Demo of Fireworks

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?