HORRY COUNTY BASIC ONLINE WEB EDITING WORKSHOP TRAINER

HORRY COUNTY BASIC ONLINE WEB EDITING WORKSHOP TRAINER: HANNAH KLOSCAK 1

At the end of today’s hands-on workshop you will : • Understand the Basic Principles of Accessibility • How to Add Photos to Homepages • How to Enter School News • Add Alternative Text to Images and Links • Add website content within Basic Apps • Manage and update Staff Directory • Organize and Change layouts • How to Insert Files, Links and Images • Add Meta descriptions to pages

WHAT IS ACCESSIBILITY? Accessibility is a word to describe whether or not something can be accessed by people with all abilities and disabilities. Examples of Accessibility: Ramps are added to buildings. Extra time for students taking exams Text on a website is black and white The goal of accessibility is creating equal access for all.

• Get in front • Get Closer HOW TO TAKE GOOD PHOTO S • Always include People • Take advantage of the background • Make boring shot Interesting (change angle of the shot) • Always take horizontal photos • Beware of your surroundings • Take your time • Subjects should be in focus 4

ACTIVITY : RESIZE PHOTO GALLERY IMAGES Resize Photos to: 1192 PX X 518

PHOTO RESIZING TOOLS HTTPS: //WWW. BEFUNKY. COM/CREA TE/RESIZE-IMAGE/ HTTPS: //TEMPLATELIBRARY. SCHOO LWIRES. NET/IMAGEEDITOR? W=1192 &H=518

ACTIVITY : RESIZE HEADLINES AND NEWS PHOTOS Resize Accent Photo to : 330 X 205

ACTIVITY : CREATE A NEWS ITEM 2 1 3 If Adding an Accent Image Resize Photo to 330 X 205 Now It’s Your Turn.

SECTION WORKSPACE Summary Tab Edit/organize current pages Create new pages Access the recycle bin

ACTIVITY: ADD A CONTENT PAGE TYPE Now It’s Your Turn.

ACTIVITY: ADD TEXT, IMAGE, AND LINKS In your Content App – Add Text (type or paste) – Add an Image – Add a Link or File – Save Now It’s Your Turn.

Why use heading Structure? HEADI NGS Makes content especially in longer documents easier to access. Allows screen reader to jump around within the article Provides additional benefits of Consistency & Automated generation of Table of Contents Guidelines for Heading Structure: Use a logical and consistent heading structure Use built-in heading styles Don’t use bold, italic, underline, color or font size/style to emulate headings

Links should be marked up as actual links (do not just list a URL out in plain text) LINKS Making the clickable text on links longer makes them easier to access by people who may have mobility issues. The link should have alt text that describes: the target (opens in a new window or not) Context about the link (what it is beyond the URL and name)

GUIDE LINES FOR ALT. TEXT ON IMAGE S Text should be clear, concise, and descriptive. Do not use the same text for every image Do not add images onto the page that do not go with the provided content. Decorative text should not be included as part of an image. If image is an example of something mentioned in the content then the description needs to describe what it is based upon the relationship to the content. If image is used to provide more information, supplement or accompany content then a comprehensive description that contains all information present in the image and should also include any non decorative text present in the image. If the image is an infographic you should Write a narrative telling the same story users get from the visual Provide a link to view the text alternative

INSER TING ACCES SIBLE FILES There are several ways to add files to your website Linking to a file within the content app Adding a series of files in the file library Uploading a file into a document viewer app Before you upload a file in any of these ways you need to be sure that the file itself is accessible, otherwise stakeholders who utilize screen readers will not be able to understand it. Appropriate Documents for the website • PDF’s • No Word documents or Power. Point

GUIDE LINES FOR ACCES SIBLE WEB CONTE NT 1. Write Plainly 6. Keep sentences short Use contractions and simple words Aim for readability level of grade 8 or lower 7. 2. Utilize a built in heading structure rather than creating your own headings with font styles. 3. Add alternative descriptions for images and links. 4. Only use tables for tabular data not display structure. 5. When creating lists use the built in list formatting. Make sure that any documents you upload, link or display on your website are accessible as well before adding them. Make sure videos that you are embedding include some sort of captioning.

Announcements App - Short and timely reminders COMM ONLY USED APPS Content App - Text, images, links, files Photo Gallery App - Slide show for multiple images Site Shortcuts App - Links to popular pages or external sites Blog App- A way to present newsletters and other communications to Parents

HOW TO USE THE BLOG APP FOR NEWSLET • TERS Add Blog App to the Page • Create a new Entry • Choose a date • Choose a title • Enter information into app

MODIFYING THE STAFF DIRECTORY • To quickly change information in the Staff Directory App choose Export • The Export will open in Excel • Take the information and update the sheet to remove Room Numbers • Save the sheet • Once Saved bring the sheet back to the App and Reimport the sheet