We are adding the ability to turn on/off social links in the Contact Module along with the option to add a custom link in place of the web contact email to this module.
Web Services Blog
Copying folders from your old site
We found a situation where a user may copy a folder from an old site. This is great in helping get your content over, but will not give you the proper meta data on the folder. To combat this, please create all folders from your new redesign site and copy any potential files like images into the newly created folder to ensure the proper meta data is there. This meta data is needed to help build the navigation.
Interior Page Template Update – Hero Image
I wanted to make everyone aware of a recent update to the Interior Page Template Hero Image. We were brought aware of the idea that it could be difficult to find that many images for each interior page. These interior page banner images were originally meant to be more of a “masthead” for the page and be consistent throughout each of your folders/sections/departments of your site. This is why we have made the switch to set this on the folder level instead of per page. You will still set images on landing page templates, this only affects Interior Pages.
Prior:
- The Hero Banner Image was set per page
Now:
- The Hero Banner Image is set in the options block
**NOTE: Any built interior pages prior to this email will not carry over the set image. Please update your options block with your desired banner image to reflect the change and republish any interior pages to reflect the update.
Cascade Upgrade
OWS recently completed upgrading the Cascade Server content management system service to version 8.1. This long-awaited upgrade allows us more functionality, a new UI with a faster feel, as well as the ability to easily locate documentation.
If you experience any issues with your content please reach out to ows@g.clemson.edu and we’ll help you sort it out.
Cascade CMS Knowledge Base can be found here at hannonhill.com/cascadecms/latest
Understanding Common Web Abbreviations
If you’ve been on the web for more than a day, you’ve noticed that people tend to speak in groupings of letters that have no rational meaning—web developers use a lot of abbreviations and acronyms. In fact, in some cases, you can’t even pronounce them.
These are some of the more commonly used abbreviations (and a few acronyms) that are used on the web and in web developmet and design.
When you know what they mean, you’ll be better prepared to learn to use them.
AJAX — ASYNCHRONOUS JAVASCRIPT AND XML
AJAX offers a way to harness the power of JavaScript and XML to enhance interactivity in web pages.
CGI — COMMON GATEWAY INTERFACE
CGI (Common Gateway Interface) programs/scripts run on the server and are usually designed to add functionality to a web site.
CMS — CONTENT MANAGEMENT SYSTEM
A content management system offers a way for a user to edit the content of a web site from within a browser-based interface, without any HTML skills required. Clemson University uses “Cascade Server” as the content management systems for most of the official University webpages.
CSS — CASCADING STYLE SHEETS
Style sheets are directives for browsers to display web pages exactly how the designer would like to display them. They allow for very specific control over the look and feel of a web page. Web sites can be built without CSS (it came many years after HTML), but CSS gives the web designer more power to control how the content is displayed. The main benefit of CSS is that it splits the content from the presentation. Site-wide style changes can be performed by editing the style sheet rather than every page individually.
DHTML — DYNAMIC HTML
This is a combination of the Document Object Model (DOM), Cascading Style Sheets (CSS), and JavaScript that allows HTML to interact more directly with the readers. In many ways DHTML is what makes web pages fun.
DOM — DOCUMENT OBJECT MODEL
This is the specification for how the HTML, JavaScript, and CSS interact to form Dynamic HTML. It defines the methods and objects available for web developers to use.
FTP — FILE TRANSFER PROTOCOL
FTP is how files are moved across the internet. You can use FTP to connect to your web server and put your web files there. You can also access files via a browser with the ftp:// protocol. If you see that in a URL it means that the file requested should be transferred to your hard drive rather than displayed in the browser.
GIF — GRAPHIC INTERCHANGE FORMAT
GIF is a popular image format for the web. The GIF format is limited to 256 colors and supports transparency, which makes it suitable for simple graphics such as logos or buttons, but not for complex graphics such as photos.
GUI — GRAPHICAL USER INTERFACE
GUI is short for graphical user interface. It’s that part of an application (or web site) that’s intended for the user. Also called the “front end”.
HTML — HYPERTEXT MARKUP LANGUAGE
Web pages are written in hypertext, this is not because the text moves quickly, but rather because it can interact (a little) with the reader. A book (or a Word document) will always stay the same each time you read it, but hypertext is meant to be easily changed and manipulated so that it can ultimately be dynamic and change on the page.
HTTP — HYPERTEXT TRANSFER PROTOCOL
You will most often see the abbreviation HTTP in a URL at the front, e.g. http://www.clemson.edu.When you see this in a URL, it means that you are asking the web server to show you a web page. HTTP is the method that the internet uses to send your web page from its home to your web browser. It is the way the “hypertext” (web page information) is transferred to your computer.
HTTPS — HTTP OVER TRANSPORT LAYER SECURITY
HTTPS is a communications protocol for secure communication over a computer network which is widely used on the internet. The main motivation for HTTPS is authentication of the visited website and protection of the privacy and integrity of the exchanged data.
JPG/JPEG — JOINT PHOTOGRAPHIC EXPERTS GROUP
JPG format is an image format that is commonly used in web site design. It’s best for images that use gradients or that contain a large number of colors, such as photos.
MP4 — MOVING PICTURE EXPERT GROUP 4
The MP4 standard was released in 1998. It builds on the earlier MPEG format, with additional features added on, notably Virtual Reality Markup Language (VRML) support.
PHP — PHP: HYPERTEXT PREPROCESSOR
PHP is a popular, general-purpose, server-side scripting language especially suited to web development. It is used extensively in web development to produce dynamic pages.
PNG — PORTABLE NETWORK GRAPHICS
PNG is an image format suitable for use on the web. It supports transparency and compression.
SEO — SEARCH ENGINE OPTIMIZATION
The act of creating or changing web pages so that their ranking in search engine results pages improve. Search engine optimization is not quite the same as search engine marketing (SEM). The latter is a collective name for all search engine marketing activities including SEO, pay per click marketing, link building etc.
URL — UNIFORM RESOURCE LOCATOR
This is the web page address. The internet works very much like the post office in that it needs an address to send information to and from. The URL is the address that the web uses. Every web page has a unique URL.
W3C — WORLD WIDE WEB CONSORTIUM
W3C’s mission is to “lead the Web to its full potential” by developing Web standards. W3C consists of a staff of technical experts, members and invited experts from the public. The larger webmaster community also has a role to play in providing input on the standards developed by W3C.
WIKI — WHERE INTERNET KNOWLEDGE INDEX
A collaborative website which can be directly edited using only a web browser, often by anyone with access to it.
WYSIWYG — WHAT YOU SEE IS WHAT YOU GET
A WYSIWYG HTML editor allows the web designer to work on the web site without editing the code directly. The WYSIWYG editor has a user-friendly interface which allows the designer to place images, change attributes etc. without having to write the HTML markup. It is worth noting that most WYSIWYG editors are somewhat limited and that professional designers should have a good command of the language in order to be able to edit the code directly.
XML — EXTENSIBLE MARKUP LANGUAGE
This is a markup language that allows developers to develop their own markup language. XML uses structured tags to define content in a human- and machine-readable format. It is used for maintaining websites, populating databases, and storing information for web programs.
Writing for Web Accessibility
Here are some of the basic considerations to help you get started writing web content that is more accessible to people with disabilities. These tips are good practice to help you meet accessibility requirements.
Provide informative, unique page titles
For each web page, provide a short title that describes the page content and distinguishes it from other pages. The page title is often the same as the main heading of the page. Put the unique and most relevant information first; for example, put the name of the page before the name of the organization. For pages that are part of a multi-step process, include the current step in the page title.
Use headings to convey meaning and structure
Use short headings to group related paragraphs and clearly describe the sections. Good headings provide an outline of the content.
Make link text meaningful
Write link text so that it describes the content of the link target. Avoid using ambiguous link text, such as ‘click here’ or ‘read more.’ Indicate relevant information about the link target, such as document type and size, for example, ‘Proposal Documents (PDF, 20MB).’
Write meaningful text alternatives for images
For every image, write alternative text that provides the information or function of the image. For purely decorative images, there is no need to write alternative text. Alternative text is usually not visible. Include Clemson University, Clemson, SC in the text for SEO purposes.
Create transcripts and captions for multimedia
For audio-only content, such a podcast, provide a transcript. For audio and visual content, such as training videos, also provide captions. Include in the transcripts and captions the spoken information and sounds that are important for understanding the content, for example, ‘door creaks.’ For video transcripts, also include a description of the important visual content, for example ‘Athan leaves the room.’
Provide clear instructions
Ensure that instructions, guidance, and error messages are clear, easy to understand, and avoid unnecessarily technical language. Describe input requirements, such as date formats.
Keep content clear and concise
Use simple language and formatting, as appropriate for the context.
- Write in short, clear sentences and paragraphs.
- Avoid using unnecessarily complex words and phrases. Consider providing a glossary for terms readers may not know.
- Expand acronyms on first use. For example, Clemson Computing and Information Technology (CCIT).
- Consider providing a glossary for terms readers may not know.
- Use list formatting as appropriate.
- Consider using images, illustrations, video, audio, and symbols to help clarify meaning.
Acrobat and Accessibility
Although you can create accessible PDF files in several programs, Adobe Acrobat Professional is required to evaluate, repair, and enhance the accessibility of existing PDF files.
Tags Pane
The Tags pane allows you to view, reorder, rename, modify, delete, and create tags. Many of these actions can be completed more easily using the TouchUp Reading Order tool, but there are some actions that can only be accomplished in the Tags pane.
To view the Tags pane, select . This pane displays the all the tags within the PDF, organized in a tree structure. This tags tree can be navigated, expanded, and collapsed using a mouse or the arrow keys on the keyboard.
Many of the tags are similar, if not identical to HTML. The most notable exception is the tag, which is similar to the tag in HTML.
How To
Highlight Content
- When the Highlight Content option is selected in the Options menu, selecting a tag should highlight the corresponding text, image, or other element in the PDF file.
Find Tag from Selection
- Just as selecting a tag highlights the content in the body of the PDF file, there is a way to accomplish the opposite effect of highlighting the tag that corresponds to selected content. First, click on the Select Tool. Next, select text, an image, or a table. Finally, select the Options menu at the top of the Tags pane and then select Find Tag from Selection. This will highlight the tag or tags that contain the content you previously selected.
Change Tags
- At times, you will encounter a PDF file that contains incorrect tags. You can modify these by right-clicking the tag you want to change, selecting Properties, then the Tag, and then selecting the appropriate new tag type from the dropdown list labeled Type.
Add tags to an Untagged Document
- To add tags to an untagged document, choose from the right-hand menu, then select . This process can sometimes be time-consuming, and you will almost certainly have to edit some of the tags, but it is usually faster than doing all the work manually. This is especially true if the document contains tables.
PDF Accessibility
PDF files are not typically created in Acrobat. They are usually created in another program and converted to PDF. There are dozens or probably hundreds of programs that can create PDF files, but very few of them produce tagged PDF files. If you are using Microsoft Word or PowerPoint, OpenOffice.org Writer, or Adobe tools such as InDesign, you can often create accessible, tagged PDF files without opening Acrobat. Of course, the accessibility of the PDF depends on the accessibility of the original document.
Microsoft Word
The majority of the PDF files on the web were probably created in Microsoft Word. The good news is that it is possible to create accessible PDF files in Office, as long as the following requirements are met:
- The file must be accessible. That includes providing alternative text for images, proper headings, appropriate link text, etc. For more information, read the WebAIM tutorial on Microsoft Word.
- Office 2000-2003 users must have Acrobat installed, as well as the add-in.
Office 2007 users must have either Acrobat or the Microsoft PDF add-in installed.
Office 2010 users can create tagged PDF files natively or with the Adobe add-in. - The file must be exported correctly. If a file is created by printing to PDF, it will not be correctly tagged.
These instructions can also be used to convert PowerPoint files to PDF.
Convert to PDF in Acrobat
If you are having trouble converting a document to tagged PDF in Office, or if you want to merge multiple documents into one tagged PDF file, you can convert a file to PDF in Acrobat. There are several ways to do this; one of the easiest is to select (in Acrobat X, ). If the file format is supported (i.e. the file is created in a Microsoft or Adobe product), the file should be tagged as it is converted. If no tags are present, select , choose the correct format, select , and ensure that is selected.
If you want to combine multiple files into one PDF, select (in Acrobat X, ). A dialog box will appear. Select and then select .
Defining Acrobat PDF Accessibility
Before discussing the accessibility of PDF files, it is important to distinguish between Adobe, Acrobat and PDF. These terms are often used interchangeably, but they are not the same.
- Adobe is a company; they are the creators of Acrobat.
- Acrobat is a tool for creating, editing and viewing PDF files.
- PDF is a format or type of document. It stands for Portable Document Format. The PDF format was created by Adobe.
The terms Adobe, Acrobat, and PDF are related in the same way as Microsoft, Word, and doc.
Tips and Tricks for Images
Tips and Tricks
- Choosing appropriate text alternatives:
Imagine that you’re reading the web page aloud over the phone to someone who needs to understand the page. This should help you decide what (if any) information or function the images have. If they appear to have no informative value and aren’t links or buttons, it’s probably safe to treat them as decorative.Decorative images don’t add information to the content of a page. For example, the information provided by the image might already be given using adjacent text, or the image might be included to make the website more visually attractive.In these cases, a null (empty)alttext should be provided (alt="") so that they can be ignored by assistive technologies, such as screen readers. Text values for these types of images would add audible clutter to screen reader output or could distract users if the topic is different from that in adjacent text. Leaving out thealtattribute is also not an option because when it is not provided, some screen readers will announce the file name of the image instead. - Prioritize information in text alternative:
Aim to put the most important information at the beginning. Include “Clemson University, Clemson South Carolina” in the alt tag for SEO purposes. - Length of the text alternative:
Thealttext should be the most concise description possible of the image’s purpose. If anything more than a short phrase or sentence is needed, it would be better to use one of the long description methods.Complex images contain substantial information using long description methods are typically:- graphs and charts, including flow charts and organizational charts;
- diagrams and illustrations where the page text relies on the user being able to understand the image;
- maps showing locations or other information such as weather systems.
In these cases, a two-part text alternative is required. The first part is the short description to identify the image and, where appropriate, indicate the location of the long description. The second part is the long description – a textual representation of the essential information conveyed by the image. Remember that complex images can be difficult to understand by many people – in particular people with learning disabilities and people with low vision. Long descriptions benefit many people, and it is good practice to make them available to everyone, for example, as part of the main content. It may also be possible to reduce unnecessary complexity in your images and make them easier to understand for everyone.
It is also good practice to refer to and summarize more complex images from the accompanying text. For example, a reference such as “The following graph shows that visitors were lost in the first quarter, but the numbers recovered in the second quarter” helps to point out the relevant information that the image is intended to present.
- Punctuation within
altattributes:- As for any text, using punctuation in the text alternative makes the information easier to understand. In particular, remember to add space characters in the
alttext when there’s no space character between the image and adjacent text, to avoid having words running together when they are read by a screen reader. - If you use a null (empty) text alternative (
alt="") to hide decorative images, make sure that there is no space character in between the quotes. If a space character is present, the image may not be effectively hidden from assistive technologies. For instance, some screen readers will still announce the presence of an image if a space character is put between the quotes.
- As for any text, using punctuation in the text alternative makes the information easier to understand. In particular, remember to add space characters in the
- Superfluous information in the text alternative:
Usually, there’s no need to include words like “image”, “icon”, or “picture” in the alt text. People who can see will know this already, and screen readers announce the presence of an image. In some situations, it may be important to distinguish between paintings, photographs, or illustrations, etc., but it’s best to avoid the more generic use of the terms. - SVG graphics: Scalable Vector Graphics (SVG) is an XML-based vector image format for two-dimensional graphics with support for interactivity and animation. The SVG specification is an open standarddeveloped by the World Wide Web Consortium (W3C) since 1999.SVG images and their behaviors are defined in XML text files. This means that they can be searched, indexed, scripted, and compressed. As XML files, SVG images can be created and edited with any text editor, as well as with drawing software.All major modern web browsers—including Mozilla Firefox, Internet Explorer, Google Chrome, Opera, Safari, and Microsoft Edge—have SVG rendering support.
- SVG graphics can be referenced in the
srcattribute of an<img>element like other image formats (PNG, JPEG, GIF). - As SVG images consist of tags like HTML, their code can also be used in HTML5 directly. In this case you can provide a text alternative in a
<title>element within the SVG image. To improve accessibility support, that title should be referenced from anaria-labelledbyattribute of the<svg>element, for example:<svg aria-labelledby="svgtitle1"> <title id="svgtitle1">Settings</title> [other svg code] </svg>
- SVG graphics can be referenced in the
- Logos:
Logo images with text are exempt from some of the accessibility requirements. For instance, there is no minimum contrast requirement.
