Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Web Editor Choices for Faculty Christine L. Vucinich Training Specialist, ITS Training Services http://its.psu.edu/training/ Objectives Examine the difference between using an HTML editor and hand coding Web pages Learn about Dreamweaver, FrontPage, and the Web editing features of ANGEL Discuss specific features/problems with each system for Penn State use Web Page Creation Two Options Hand coding of Hypertext Markup Language (HTML) 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 Usually needed to make a more complex web page cross platform / cross browser compatible Allows for good HTML formatting 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 be comfortable hand coding Easy to make typing mistakes Often slower development HTML Editors What You See Is What You Get (WYSIWYG) Two most commonly used HTML editors: Dreamweaver FrontPage HTML Editor - Pros Quick development time Little knowledge of HTML needed for basic pages Works much like any popular word processor Controls file structure within the program HTML Editor - Cons May have browser bias Many still not well accomplished at writing dynamic pages (ASP, PHP, JSP, ColdFusion) Complex pages can easily be composed that do not follow standards and therefore are not cross platform / cross browser compatible Knowing HTML You should know some HTML no matter what you do Provides an understanding of the HTML structure, should something ever need tweaked Makes designing good, usable Web pages easier, even if you use a HTML Editor You can learn how to code HTML while working with an editor Find some good online references and keep up to date! Stick With One HTML Editor Which ever program you decide to use, stick with it If you work in a group, try to use the same editor Does your department support/prefer you to use one program over the other? Some programs add more “junk” than others and could begin to get in your way In group settings, most HTML editors have features that make working together easier if you use the same program File sharing/locking Design notes, revision control Stick With One HTML Editor Understand and know the programs tool/method for site management Most HTML editors do best when nearly all file manipulation is done “inside” the program File name change Move files Delete files Cross Platform / Cross Browser Compatibility One major problem with any web page, especially those created with a HTML editor, is cross platform/cross browser compatibility Frontpage prefers Internet Explorer Dreamweaver tries to be more compatible There is virtually a 100% chance of having some formatting/compatibility problem with any HTML editor Design and Planning Any web page will only be as good as the time spent planning the design Know what the lowest-common-denominator is and try to design for it (Netscape 4.7) Know the various tools available to help with “page layout” Tables Layers Accessibility (A PSU requirement for official pages) Know who your audience is…how will they be connecting to the Internet? Web Servers There are two main types of Web servers Unix Windows Most ITS@PennState servers are Unix (www.personal.psu.edu) This presents a problem for most of the FrontPage extensions that allow for some dynamic behavior Unix servers might have problems with Windows/Mac files that are not formatted properly (especially scripts) Using FrontPage as your Web Site Editor Examples of Web Sites created in FrontPage http://www.microsoft.com/frontpage/evalua tion/gallery.htm Advantages WYSIWYG editor with similar Toolbars/Interface to other Microsoft Programs Easily Preview your Web Site Collection of Themes and Clip Art (like other Microsoft Programs) Allows you to add/track tasks, see a report view, check links and work with others Can edit the HTML code Can see the Directory Structure/Navigation of your Site Disadvantages The code isn’t as clean/easy to read as it is in other Web Design Programs The Penn State Personal Server does not have FrontPage Server Extensions Demo of FrontPage Learning FrontPage Microsoft’s Web site: http://www.microsoft.com/frontpage/ (you can download a demo, a tutorial and participate in discussions/on-line community) Web-Based Training and ITS Free Seminars (free to PSU students, staff and faculty): http://its.psu.edu/training/ Using Dreamweaver as your Web Site Editor Dreamweaver Incorporates many advanced features Accessibility Support Dynamic language support Code Editing XML support Growing JavaScript Library Examples of Web Sites created with Dreamweaver http://www.macromedia.com/ http://www.intranetjournal.com/articles/200 002/dream_index.html Dreamweaver Advantages Standards compliant Organizes webpages by “site” Creates easily readable code without much junk Cleans “busy” code from other sources like Frontpage or Word Free reference for HTML, JavaScript, CSS Easy to use templates Dreamweaver Advantages Helps a collaborative project by allowing file “check-in” and “check-out” Integrates with Fireworks MX 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 Highly customizable Dreamweaver Advantages Accessibility checker for Section 508 compliance Very robust HTML syntax checker Dreamweaver Disadvantages Bigger learning curve than FrontPage As with other more advanced editors, a lot of options, many a general user might not use or use incorrectly Help files do not always give needed background on the bigger picture Highly customizable (novice user) Demo of Dreamweaver Learning Dreamweaver Macromedia’s Web site: http://www.macromedia.com Web-Based Training and ITS Free Seminars (free to PSU students, staff and faculty): http://its.psu.edu/training/ Using ANGEL as your Course Management System What is a Course Management System? A course management system (CMS) is a system used to manage course content. It typically allows the content manager or author to modify the content without knowing HTML. It may also include various communication tools such as a chat room, bulletin boards, e-mail, quizzes, etc. What is Penn State’s Course Management System? ANGEL (http://cms.psu.edu)!! Penn State's Course Management System, A New Global Environment for Learning (ANGEL), is responsive to the needs of students and instructors for course management and interactive learning strategies. ANGEL is easy for computer novices and is superior for the technologically savvy. ANGEL has essential course management features such as syllabus space, lesson space, teams, discussion, quizzing, surveys, drop boxes, and grading, along with unique faculty tools to track student work and transform learning processes. ANGEL Advantages Built in HTML editor on the PC Import/Export pages easily from one course to the next Includes utilities to batch upload Web files You can easily change permissions (password protect, limit to certain teams, temporarily hide files) ANGEL Advantages Limit access to the students/faculty of the course Easily link to web sites outside of ANGEL ANGEL Disadvantages Does not have an HTML editor on the MAC. You need to know HTML or copy/paste from HTML editor You can only build web information page by page, not an entire site Difficult to export a Web site from ANGEL to a local machine to then edit using FrontPage or Dreamweaver Have to be connected to the Internet to work on pages Difficult to have advanced layout control You will not have a URL on the Web to direct others to Demo of ANGEL Learning ANGEL ANGEL’s Web site: http://cms.psu.edu/ ITS Free Seminars: http://its.psu.edu/training/ ANGEL vs. HTML Editor ANGEL is a Course Management System Dreamweaver and FrontPage are HTML Editors They work really well together! Resources HTML Editors EditPlus2 http://www.editplus.com Frontpage http://www.microsoft.com/frontpage Dreamweaver http://www.macromedia.com/software/dreamweaver ANGEL http://cms.psu.edu Web Design Webmonkey earthWebdeveloper.com http://www.htmlgoodies.com/ Web Developers Virtual Library http://webdeveloper.earthweb.com/ HTML Goodies http://hotwired.lycos.com/webmonkey/ http://www.wdvl.com/ Web Developer.com http://www.webdeveloper.com/ DevShed.com http://www.devshed.com/ Builder.com http://builder.com.com/ Questions?