Web Editor Choices for Faculty Christine L. Vucinich Training Specialist, ITS Training Services
-
Upload
verity-joseph -
Category
Documents
-
view
214 -
download
0
Transcript of Web Editor Choices for Faculty Christine L. Vucinich Training Specialist, ITS Training Services
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)
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
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/
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)
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/
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
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!
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/