Web Publishing: An Overview of Tools and Service

Editor's Notes

• #2: Welcome to Web Publishing: An Overview of Tools & Resources This class is a broad introduction to various aspects of Web publishing. Its intent is not to turn you into a Web expert, but rather to give you a \"big picture\" view of Web publishing.At the end of today's class you will have a general understanding of the overall process of Web authoring and publishing, and you will have a sense of what you would like to study in more detail, and what you may already know. <number>
• #3: Basic TermsThere are some basic terms that are useful to know when working with Web publishing. The World Wide Web (WWW), or \"the Web\" is a service available on the Internet that displays specially-formatted documents called Web pages. A Web page is a single electronic document, stored on a machine that is part of the World Wide Web. A Web site is a collection of Web pages related to one another and stored on the same computer. A Web Server is a computer dedicated to storing and managing Web pages and Web accounts. Hypertext Transfer Protocol (HTTP) is a standard format used to pass information between a Web server and a Web browser. The call to this protocol is the beginning of all Web addresses, or Uniform Resource Locators (URLs). Links (Hypertext Links) allow a user to quickly move between pages or sites by clicking selected text or graphics. Hypertext Markup Language (XHTML) is a coding language used for creating Web pages. It provides Web browsers with instructions on how to display Web pages. In the past, XHTML was used to define both the structure of a document as well as the formatting of that page. The latest iteration of this language, Extensible Hypertext Markup Language (XHTML), no longer combines structure and format together. Instead, XHTML is used to structure the content of Web pages and a special formatting language called Cascading Style Sheets (CSS) is used to define the format of the page. <number>
• #4: ApplicationsIf you are interested in creating a personal home page or a site that advertises your program or department, there are several items you need to have at your disposal.In order to create a Web page, you'll need to use a Web Authoring tool. IU/IUPUI provides access to many such applications for free. We'll review the advantages, disadvantages and features of some commonly used authoring tools in the next few pages. You'll need to use a Secure Shell (SSH) Client to connect to your account on the Web server. Here you can set-up your account to accept Web page files and to set permissions for your Web pages. Once you've connected to your account, you'll need to use a Secure FTP (File Transfer Protocol) Client, such as WinSCP or MacSFTP, to move files from your hard drive to your account. Usually, Secure FTP is bundled with Secure Shell applications. You will need a Web Browser, such as Internet Explorer, Mozilla Firefox or Safari (Mac), to verify that the pages you created and moved to your account show up correctly. If you need to create a website for an IU project or class, you may consider using Oncourse CL, IU's online collaboration and learning environment, which supports teaching and learning, committees, projects, research, and portfolios for Indiana University's community of students, faculty, and staff. Another way to create a personal webpage is using a service like Google Page Creator or Blogger, tools that allow you create pages using simple templates designed by the host companies. These services do not require knowledge of XHMTL, web authoring tools, nor FTP software. <number>
• #5: Accounts and ConnectionsIn order to publish Web Pages and verify they work, there are basic types of accounts and connections that you will need.In order to have others view your Web pages, you'll need to place them on a Web server. IU provides several types of Web server accounts to suit the needs of various constituencies on campus. Mercury supports personal home pages, while Webserve is dedicated to official IU departments and groups. In order to connect to the server, you will need a working Internet Connection. On campus, most computers are already connected to the Internet. From off-campus or from a dorm, you may need to use a dial-up modem, DSL, or cable Ethernet connection. This also may require an account from an Internet Service Provider, such as AOL, AT&T, Kiva, Comcast, etc. <number>
• #6: Text EditorsSome Web authoring tools, called Text Editors, allow direct coding in a text-only environment. These tools are not designed specifically for XHTML editing and have very few features, but can be useful when editing XHTML, especially on-line.Advantages: These tools not only tend to make XHTML-coding easier, but they also tend to make it faster. XHTML Editors tend to make the code more readable by providing line numbers, indenting nested information, and by specifying code as one color and content as another. Disadvantages: Text editors do not have graphical interfaces, which means that coding XHTML can be time consuming. Unlike other tools which can provide line numbers or color-coding of XHTML tags, these tools do not differentiate formatting for XHTML code and content, which means that the files can be difficult to read and time-consuming to edit. Examples: Notepad - Windows TextEdit, TextWrangler - Mac <number>
• #7: XHTML EditorsThese applications usually provide more features than straight text editors. They often include tools that check XHTML code to ensure syntactic accuracy or identify outdated (deprecated) XHTML tags. They also utilize a more graphical interface that provides help in inserting code. Advantages: These tools not only tend to make XHTML-coding easier, but they also tend to make it faster. XHTML Editors tend to make the code more readable by providing line numbers, indenting nested information, and by specifying code as one color and content as another. Disadvantages: To use most of these tools on your home or work computer, you usually must purchase a licensed copy of the software. These tools do not allow you to view your Web page (as it will look in a web browser) as you're building it. Examples: Komodo Edit - Windows and Mac BBEdit - Mac Hypertext Builder - Windows <number>
• #8: WYSIWYG ApplicationsWYSIWYG stands for \"What You See Is What You Get.\" This group of tools allows users to view the Web page within the application and uses a graphical interface to simplify the formatting process. These applications make creating Web Pages more like creating documents in a word processing program, like Microsoft Word.Advantages: With these tools, you don't have to know any XHTML (although it almost always helps to know some basic XHTML). Most WYSIWYG editors have built-in XHTML editors for those times when you need to edit XHTML code directly. These editors usually also include additional tools for site maintenance and group work. Disadvantages: To use most of these tools on your home or work computer, you must purchase a licensed copy of the software. Examples: Dreamweaver - Windows and Mac Microsoft Expression (replaces Microsoft FrontPage) - Windows Nvu - Windows, Mac, and Linux <number>
• #9: Microsoft Office ApplicationsMany of the Microsoft Office applications (e.g. Word, Excel, Powerpoint) contain a \"Save as Web Page\" or \"Save as XHTML\" option which converts the document into an XHTML file.Advantages: These applications are useful if you need to make an existing document visible to Web browsers quickly. Web pages created this way can then be downloaded from the Web and back-converted into their original format. Disadvantages: To enable back-conversion the software adds large amounts of \"proprietary code\", which is used only by the Office applications, and increases the file size quite a bit. As a consequence of the proprietary code, the XHTML becomes very difficult to edit. If you intend to edit Web pages after publishing them, this is not an appropriate way to generate the XHTML initially. Examples: Word - Windows and Mac Excel - Windows and Mac PowerPoint - Windows and Mac <number>
• #10: Added ToolsMany XHTML editors and WYSIWG applications contain added tools that perform special tasks on your Web pages. When determining which authoring tool to use, it is important to consider whether or not you will want to use any of the following features.If you have a complex site structure, it might be helpful to use a Site Maintenance Tool. These allow you to view a map of the functional organization of the Web site. You can also use this to automatically update URLs when you move a page. Dreamweaver, Microsoft Expression, BBEdit, and Nvu all have some Site Maintenance capabilities. Some authoring tools also contain an integrated FTP Client, so that moving files from your local computer to your server account will be easier. Dreamweaver, Microsoft Expression, BBEdit, and Nvu all have built-in FTP features. If you are working on a Web site with other people, you may want to use an authoring tool that facilitates collaborative development. Group Work Tools can be used to assign privileges, to prevent file conflicts, and to foster uniformity across the design of many independent pages. Dreamweaver offers some of these features as does as a companion product of Microsoft Expression, Microsoft Expression Blend. Adobe Contribute is an example of a stand-alone group work application that allows authors to quickly and easily update existing websites.<number>
• #11: Utilities and Cross CheckingLots of planning is needed for the creation of an attractive accessible and functional Web site. There are some additional utilities that are widely available that will help ensure your Web pages work for as many users as possible. Also, once you are done designing your Web pages, it is important that you cross-check that your pages work in different browsers and on different platforms. It is important to keep accessibility issues in mind, whenever you are designing and building Web pages. A very important tool is WebXACT, a web-based tool that checks the quality, accessibility, and privacy issues of your Web page. WebXACT is at http://webxact.watchfire.com/ A tool designed to improve web page development for colorblind viewers is Vischeck. You can enter your URL and Vischeck returns a version of your page as it would appear to a colorblind viewer. Vischeck is at http://www.vischeck.com/ As mentioned already, the Web browsers have the job of interpreting XHTML and displaying the formatted content. As such, different browsers may interpret XHTML slightly differently. It is important, therefore, to check your Web pages in at least three main browsers, Mozilla Firefox, Internet Explorer, and Safari (Mac). Just as the same Web page may display differently in two browsers, so too might it display differently on two different platforms (mainly Windows and Macintosh), even within the same browser. You should periodically check the page in different browsers on different platforms. Several web-based utilities exist for browser/platform compatibility and to validate your code. See, for example: W3C XHTML Validator: http://validator.w3.org/ Links to other checkers and validators may be found at: http://www.webreference.com/authoring/languages/XHTML/validation.XHTML <number>
• #12: How do we bring all of these things work together to make viewable web pages? Let’s look at the processes: First, we’ll talk about posting the created files to a Web server, and then we’ll look at how others can access our files using browsers or other devices.<number>
• #13: Files that are destined for the Web are sent to a Web server using a system available over the Internet called File Transfer Protocol. Let’s examine how this works. Computers that are connected to the Internet can send and receive all sorts of files to and from remote Web servers. Sending files to a server is commonly called uploading, and receiving is called downloading. What we can send and receive is determined by specific permissions that the Web server has set for us. These permissions are recognized when we log in.<number>
• #14: First, we want to put our files on a Web server so others can see them. In order to upload files to the server, we must log in. The login allows us to place the files in our own folders on the Web server.The Web server recognizes our login and grants us access.<number>
• #15: At this point, we need to know how other Internet users gain access to our Web pages. Files that are destined for the Web are sent to a Web server using a system available over the Internet called Secure File Transfer Protocol (SFTP). Let’s examine how this works. We send the Web server the files we want to be viewed or downloaded by other Internet users. When we do so, we also set permissions for who may view them.Once the files have been uploaded to the server, we can see how they appear to other Internet users. These files may be sound, images, text, and various other file types. Now that our files are on the Web server and permissions have been set, we log out of the server.At this point, we need to know how other Internet users gain access to our Web pages.<number>
• #16: Let’s see how Internet users view Web pages on their browsers. When we view Web pages we use an Internet system called HTTP, or Hypertext Transfer Protocol process. As we know, web pages use a special language called Hypertext Markup Language, or more recently, Extensible Hypertext Markup Language. They have been sent to a Web server to make them world-readable. We’ll take a look at the HTTP process by which they are “served up.”We view a Web page by requesting it from the server using its HTTP address, also called a Uniform Resource Locator or URL. HTTP is like the postal service, and the URL is much like a postal address. We request to see the files by using this addressing process. <number>
• #17: When we send the HTTP request for the XHTML page, the server sees our request and sends the file to our computer, which in turn displays the file in our browser.Pages to be seen by the World Wide Web generally consist of XHTML pages. An XHTML page is a kind of plain-text container that calls up URLs of other file types including Cascading Style Sheets or CSS files that contain formatting commands, image files, and multimedia files. 16
• #18: In this case, this XHTML page calls up formatting characteristics as specified a CSS file. The page also contains coding that instructs a browser to insert a JPEG image in a certain place, If the image is unavailable, we can’t view it until it has been specified in the code and has been placed on the server. 17
• #19: First, let’s take a look at the first two file types, each of which has its own URL. We know that an XHTML page contains the textual content of the page. To see formatting including colors and borders, we need to take the CSS file into account. The CSS file is also on the server, and has been called up in the coding of the XHTML file.With the XHTML file and the CSS file working together, we can see the text and some formatting in our browser. However, the image file must be on the web server and where it is to appear must be in the coding so it will be displayed according to the specifications in the XHTML code and the CSS file. With the image specified in the code and placed on the server, when we request the URL from the server again, we can view the finished page, including the text, the formatting, and the image.To summarize: In order to make up a Web page, we must send all three page components (and sometimes others such as JavaScript files) to the server. These usually consist of an XHTML page, which contains our text, a Cascading Styles sheet that determines formatting, and an image file. Together they form the complete Web page.<number>
• #20: IU Resources for Web DevelopmentIndiana University provides many other useful resources for Web development to anyone interested in creating a Web site or Web page at IU.The IU Webmaster site contains valuable information about all aspects of Web creation for authors at IU, including copyright policies, account creation information, technical support and design resources. They can be accessed at: http://webmaster.iu.edu. The IU Visual Identity Site provides research, development and testing services to IU constituencies. Working closely with UITS and other IU Administrative units, they publish information on benchmarks for accessibility, templates, graphics and important policy information. To Learn more, go to: http://visualidentity.iu.edu/. As mentioned earlier, it is important that you be attentive to the needs of Web users with disabilities. For more helpful tips and a comprehensive description of IU's Accessibility Policies, see: http://visualidentity.iu.edu/media/standards.sXHTML. <number>
• #21: Training Options at IUThere are several ways to gain more experience in Web design and authoring at IU.IT Training & Education offers instructor-led hands-on classes for both Web authoring and Web development, from beginning to advanced levels. We recommend two series: Web Markup & Style Coding focuses on XHTML and CSS coding. Web Site Development Fundamentals focuses on Dreamweaver and its companion graphics application, Fireworks. For further information, go to: http://ittraining.iu.edu/. IT Training & Education also makes over 1,200 self-study IT courses available to the IU community - online. To explore these trainings, go to: http://ittraining.iu.edu/online/. At IUB Teaching and Learning Technology Lab (TLTL) provides a single point of access for faculty and instructors to explore and develop technology within their teaching. To learn more, go to: http://www.indiana.edu/~tltl/. At IUPUI The Office for Professional Development (OPD) integrates resources from several campus units to provide a full range of professional development services for faculty and academic staff, including one-on-one consulting and practical experience in applying teaching and learning technologies in the classroom. To learn more, go to: http://opd.iupui.edu/ <number>
• #22: Now that we understand what is needed to create a Web page and where to get help, we can discuss the process involved in developing Web pages. There are 3 basic steps in Web Publishing: Planning the design and content of the page Creating the web page Publishing the completed web page to a web server <number>