User Guide
Editing & maintaining the district website at SFUSD.edu
Table of Contents 1
Part 1: The Basics
5
What can I do? . . . . . . . . . . . . . . . . . . . . . 6 User Groups . . . . . . . . . . . . . . . . . . . . . 6
Login . . . . . . . . . . . . . . . . . . . . . . . . . 7 The admin interface . . . . . . . . . . . . . . . . . . .
7
Working with text . . . . . . . . . . . . . . . . . . . . 10 Headings & paragraphs. . . . . . . . . . . . . . . . 10 Lists & numbering . . . . . . . . . . . . . . . . . . 11 Watch out! . . . . . . . . . . . . . . . . . . . . . 11
Links . . . . . . . . . . . . . . . . . . . . . . . . . 12 Linking to webpages . . . . . . . . . . . . . . . . . 12 Linking to files (PDF, Word, etc.). . . . . . . . . . . . 13 Inserting email links. . . . . . . . . . . . . . . . . . 15
Images. . . . . . . . . . . . . . . . . . . . . . . . 16 Choosing the main, top-of-page image. . . . . . . . . . 16 Other images. . . . . . . . . . . . . . . . . . . . 17
Home page. . . . . . . . . . . . . . . . . . . . . . 18 Updating audience tabs . . . . . . . . . . . . . . . . 18 Updating random photos & captions . . . . . . . . . . . 19
2
Part 2: Sidebars & Sitewide Promotion
20
Sidebar & promotion layout. . . . . . . . . . . . . . . . 21 Choosing sidebars for a page. . . . . . . . . . . . . . . . 22 Editing a page-specific sidebar. . . . . . . . . . . . . . . 22 Section sidebars. . . . . . . . . . . . . . . . . . . . . 23 Creating a section sidebar. . . . . . . . . . . . . . . . 23 Editing a section sidebar . . . . . . . . . . . . . . . . 24
Audience sidebars . . . . . . . . . . . . . . . . . . . . 25 Creating an audience sidebar. . . . . . . . . . . . . . 25 Editing an audience sidebar . . . . . . . . . . . . . . . 25
Sitewide promotions . . . . . . . . . . . . . . . . . . . 25 Editing the sitewide promotion. . . . . . . . . . . . . 25 Creating a new sitewide promotion. . . . . . . . . . . . 26 Swapping & pausing sitewide promotions . . . . . . . . . 26
3
Part 3: Page Management & Menu Order
27
Making a new page . . . . . . . . . . . . . . . . . . . 28 Deleting a page . . . . . . . . . . . . . . . . . . . . 28 Moving a page . . . . . . . . . . . . . . . . . . . . . 29 Making, moving, & deleting sections. . . . . . . . . . . . 29 Re-arranging the menu order. . . . . . . . . . . . . . . . 29 Auto-publish & auto-unpublish . . . . . . . . . . . . . . 30
4
Part 4: News & Other Dated Stories
31
Which sections contain news/dated stories? . . . . . . . . . . 32 Adding a story. . . . . . . . . . . . . . . . . . . . . 32 Editing or deleting a story . . . . . . . . . . . . . . . . 33 Adding news to a section that doesn’t have news . . . . . . . . 33
5
Part 5: Special Files & Board Meetings
34
What makes these files special?. . . . . . . . . . . . . . . 35 Menus . . . . . . . . . . . . . . . . . . . . . . . . 36 Public Notices . . . . . . . . . . . . . . . . . . . . . 36 Board Meeting Notices, Agendas, Minutes, & Resolutions. . . . 37 Upcoming board meetings . . . . . . . . . . . . . . . 38
6
Part 6: School & Building Information
39
What pages use this data? . . . . . . . . . . . . . . . . 40 Adding a school/building. . . . . . . . . . . . . . . . . 40 Editing school/building info . . . . . . . . . . . . . . . . 40 Deleting a school/building. . . . . . . . . . . . . . . . 40
7
Part 7: Multilingual Content
41
Best practices. . . . . . . . . . . . . . . . . . . . . . 42 Configuration. . . . . . . . . . . . . . . . . . . . . . 44 Making a translation . . . . . . . . . . . . . . . . . . . 44 Accessing a translation. . . . . . . . . . . . . . . . . . 45 Work in progress. . . . . . . . . . . . . . . . . . . . 45
8
Part 8: Advanced
46
Drop-down menus. . . . . . . . . . . . . . . . . . . . 47 CSS & javascript. . . . . . . . . . . . . . . . . . . . 47 Modx documentation. . . . . . . . . . . . . . . . . . 47
9
Part 9: Problems & Solutions
10 Part 10: Tips & Best Practices
48 51
5
Part 1: The Basics
proprietary and confidential
6
| Part 1: The Basics
What can I do? What you can do depends on your role. There are four types of roles, listed below. Editors can: ♦♦ ♦♦ ♦♦ ♦♦ ♦♦
Edit text Upload and insert images; upload and link files Insert and remove links Turn sidebars off and on for each page Edit section-wide sidebar and page sidebar
Editors can also create new sections, pages, and other resources, but will need to ask a Manager to “publish” before they can be viewed on the live website. Managers can do everything above, plus: ♦♦ ♦♦ ♦♦ ♦♦
Make new sections & pages live Move pages Change Published On dates Auto-publish and auto-unpublish
Webmasters can do everything above, plus: ♦♦ ♦♦ ♦♦ ♦♦ ♦♦
Edit sitewide promotion and audience sidebars Delete sections and pages Re-arrange the global left-hand menu Create new sections/pages at the “root” of the website (outside of existing section) Edit home page
Web developers can do everything above, plus: ♦♦ ♦♦ ♦♦ ♦♦
Rename images, files, and image/file folders Delete files and images from the web server Create, edit, and delete other users Just about anything else you can think of!
User Groups Each user also belongs to a User Group that determines which pages and sections s/he has access to. For instance, EPC staff all belong to the EPC Group, which allows them to edit any page of the Enrollment section and school data, but does not allow them to edit other pages.
7
Login To login, go to https://www.sfusd.edu/manager/ and enter the username and password you’ve been assigned. (Note, during the pre-launch period before the new website is live, login here instead: https://156.1.240.50/manager/) Be sure to keep your username and password secure. If you ever forget your login, you can click the “Forgot your login?” link and enter your SFUSD email address.
The admin interface Once you login, you’ll see a home screen that looks something like this. You may see slightly different options based on your login. Notice how the menu on the left mirrors the global navigation menu of the website. Again, you may not see all pages, depending on your login. You can click on a page in the menu to edit it.
proprietary and confidential
8
| Part 1: The Basics
Changes you make will not show on the live website until you click Save. Only pages that are published appear on the live public website.
The Title is the text that appears in the global navigation, and as the main page heading, and as the text in the very top of the browser window. If you ever have reason to change this text, the Spanish and Chinese “cousin” pages (if they exist) should also be updated to match. Resource Content is the guts” of the page
Once you click on a page, you’ll see a screen something like this:
9
These are the corresponding areas of the live public page:
Title is used in these three places
Resource Content
proprietary and confidential
10 | Part 1: The Basics
Working with text You can type, copy, and paste in the Resource Content window. You can apply bold, italic, bullets, and number lists by highlighting text and then clicking the appropriate icons. There are also icons to undo, spell check (English and Spanish), and insert special characters. If you hover over each icon for a moment, you’ll see a label that explains what that button does.
The quote button may not look like it does much, but if you save your work and then look at the live page, you’ll see that it styles the quote in blue, enlarges the quote marks, automatically aligns the name to the right (as long as it’s in a new paragraph).
Headings & paragraphs The first dropdown menu allows you to turn regular text into headings, or headings into regular text (paragraphs).
11
Lists & numbering The second dropdown allows you to apply special styles. At the time of this writing, the only special styles created for text are for styling ordered (number or alpha) lists. To create an ordered list, first highlight text and click the number list icon. Then, choose the type of numbering you want from the Styles dropdown.
To create a bullet list, choose the bullet list icon (next to the number list icon). There’s no need to apply special styles from the dropdown menu.
Watch out! If you see text in brackets, like [[[$This_is_the_Choose_A_School_ Dropdown]]], it’s just what it says — a dropdown menu or other special chunk of code. Don’t edit or remove these. (If you do, ask a Web Developer to restore a backup of the page, or to re-insert the bracketed text. They’ll have a list of the small handful of pages that contain these special pieces, as well as exactly what the text should be.)
proprietary and confidential
12 | Part 1: The Basics
Links Linking to webpages To insert a link to a webpage (whether it’s within sfusd.edu or an outside site), first navigate to that page. Then, highlight and copy the entire URL from the address bar.
Next, in the admin interface, highlight the text you’d like to link, and click the chain link icon. A little window will pop up. Paste the URL into the URL field, and type a title that explains where that link will go. Then, click Insert.
13
Linking to files (PDF, Word, etc.) Highlight the text you’d like to link, and then click the chain link icon. In the window that pops up, click the icon labeled browse.
This launches a new window that lets you browse files. If the file already exists on the website, you can navigate to it, select it, and click OK.
If the file does not already exist on the website, first make sure you have the correct folder selected, then click the upload icon.
A note about folders As of the time of this writing, it was not yet possible to direct users straight to the folder that applies to their section of the website. That’s why you see so many folders in the graphic at left. Every section of the website has its own folder, with a name that matches the section name. You should only use the folder that belongs to the section you’re editing. Within that folder, there is an images folder for graphics only, and a files folder for PDFs, Word docs, and everything else.
proprietary and confidential
14 | Part 1: The Basics
File Names It’s best to re-name files if needed before uploading, to make sure that they have a clear name that’ll be understood by anyone else browsing or linking to files later.
This launches another window that lets you upload files from your computer. Click the Add button.
Spanish & Chinese: Recommend saving these files with names identical to the English version, then adding -SP or -CH at the end of the file name. That way, anyone can tell at a glance which languages a files is available in. Replacing files: Whenever possible, use exactly the same file name for a new version of the file, and overwrite the existing file. This will ensure that all links pointing to the file automatically point to the current version. It will also prevent web visitors from seeing “page cannot be found” errors when clicking links or clicking from search results.
(What are we waiting for? The Waiting... message means it’s waiting for you to choose files.) Navigate to the file you want, and double-click it. (You can click Add again to queue multiple files if you like.) Click the Upload button to copy the file from your computer to the website.
Click the Close button when you’re done. Then select the file and click OK to insert the link to it. (See the second graphic on the previous page.)
15
Inserting email links Highlight the text you’d like to link, then click the chain link icon. Type or paste the email address in the Link URL field, and enter a title something like the one below.
A warning window will pop up and ask you if you’d like to “insert the required mailto: prefix” for email addresses. Click Yes. (Otherwise, the link won’t work.)
proprietary and confidential
16 | Part 1: The Basics
Images Choosing the main, top-of-page image Important
First, click the Main Photo tab. Then, click the arrow.
The image you choose for this spot should be exactly 470 pixels wide. (It can be any length.) We recommend that images of that width be labeled with -470 in the file name to make them easy to spot at a glance. Adobe Fireworks is a great tool for web image resizing. This launches a window to browse existing website images. Choose an image from the images subfolder of your section folder. Or, click the Upload icon to upload an image from your computer (see pages 13-14). (If it’s available to you, you may also choose an image from the _site-wide folder.) Be sure to enter a meaningful Photo Title to describe the image. This is essential for website accessibility. Write the description as if you’re describing the image to someone who can’t see it. (Chances are, your text will end up doing just that.) To remove the image, just use your mouse to highlight the entire image path, and delete it.
17
Other Images You can insert other images anywhere you like on the page. Place your cursor where you’d like the image, then click the image icon.
Choose an existing image from within your section’s images folder or click the Upload icon to upload an image from your computer (see pages 13-14). Be sure to enter a meaningful Image description to describe the image. This is essential for website accessibility. Be sure any image you insert is less than 440 pixels wide (that’s the max width for the main content area). To wrap text around an image, click the image, then select either image-align-left or image-align-right from the styles dropdown menu.
The result should look something like...
proprietary and confidential
18 |  Part 1: The Basics
...this:
Home Page Updating audience tabs If you select Home from the left-hand admin menu, you’ll see that it has special boxes for updating these tabs. (These fields only display for those who have access permission.) Do watch out, per note on page 11.
19
Updating random photos & captions Click Home from the left-hand admin menu. Then click on Main Photo tab. This works just like the Main Photo for other pages (see page 16), except that: ♦♦ ♦♦ ♦♦
the required dimensions are different (and must be followed to ensure layout doesn’t break) there are multiple photo slots (a photo is pulled at random each time someone visits the home page) there’s an optional caption slot, which contains the text that displays on top of the photo
proprietary and confidential
20
Part 2: Sidebars & Sitewide Promotion
21
Sidebar & promotion layout The page-specific sidebar content, if it exists, displays first The section sidebar content, if it exists, and if it is turned on for this page
Audience sidebar content, for each audience selected for this page
Site-wide promotion, if it is turned on for this page The Spotlight displays on every page (this could change in the future; web developers may remove this or insert other items that display in this slot on every page)
The site-wide promotion also displays on the home page.
proprietary and confidential
22 | Part 2: Sidebars & Sitewide Promotion
Choosing sidebars for a page Click the Sidebar tab. Here, you can add or edit page-specific sidebar content, and add or remove sitewide promotion, section sidebars, and audience sidebars.
It’s recommended that you always keep Sitewide Promotion and Section Sidebars checked. They’re optional just in case one of them promotes this page — then, you might not want to include it. Note, some pages have two or more section sidebars available. In this case, choose the most relevant one. It’s also recommended that you always include the sidebar for the relevant audience(s), since this enables promotion of critical items.
Editing a page-specific sidebar You can edit the page specific sidebar anytime by clicking on the Sidebar tab and editing the content that displays in the box labeled Page-specific sidebar. (See above.)
23
Section sidebars Creating a section sidebar To create a new section sidebar, right-click (or control-click on Mac) the Section sidebars folder (located inside Sidebars folder). Choose Create > Create a Document Here.
proprietary and confidential
24 | Part 2: Sidebars & Sitewide Promotion
Give the sidebar a title that includes its section name, starting with Sidebar:. If it’ll be used for a sub-section, include the parent section name, too, like: Sidebar: Programs: Special Education. (Website visitors will not see the title; it’s just for your reference.) Next, choose the section you’d like this sidebar to be available to. (Note, for the sidebar to begin showing in that section, you’ll need to enable it on a page-by-page basis.) You can assign multiple sidebars to any section, for instance, if you want sub-section sidebars to be available. (See how Section Sidebar: Programs: English Language Learners is set up.)
As always, make sure the Published box is checked, and click the Save button when done.
Editing a section sidebar You can edit section sidebar content any time by navigating to it in the left-hand menu (Sidebars > Section-specific sidebars), and then clicking on it. The content appears in the Resource Content area, just like it would for a page.
25
Audience sidebars Creating an audience sidebar Creating an audience sidebar is very similar to creating a section sidebar (pages 23-24). Instead of right-clicking on the Section sidebars folder, you’ll right-click on the Audience sidebars folder (located inside Sidebars). Unlike Section sidebars, there’s no drop-down to assign the audience sidebar to a certain section of the site. That’s because it can be used on any page.
Editing an audience sidebar You can edit an audience sidebar any time by navigating to it in the left-hand menu (Sidebars > Audience sidebars), and then clicking on it. The content appears in the Resource Content area, just like it would for a page.
Sitewide promotions Editing the sitewide promotion You can edit the current sitewide promotion by opening the Promotions folder in the left-hand menu, and then clicking on it. You’ll see a Resource Content field, just like you see for pages and other elements.
The promo spot on the homepage has been designed to hold an image 162 pixels wide by 100 pixels tall, or a small amount of text that takes about that much space. However, programming has been developed to automatically insert a slim scrollbar in the event that a longer chunk of content is needed for the promotion. (Recommend always keeping it as brief as possible; it’s just an attention grabber to direct people to the page where the full info is.) Be sure to link the image or text you insert!
proprietary and confidential
26 | Part 2: Sidebars & Sitewide Promotion
Why not multiple promotions? The sitewide promotion was designed to be the single-most important message that needs to be communicated. If there were multiple promotions, they would dilute one another’s importance.
Creating a new sitewide promotion You can create a new promotion the same way you create other new items. You right-click on the Promotions folder, and choose Create > Create a Document Here.
Swapping & pausing sitewide promotions Once you understand how sitewide promotions work, you’ll be able to: ♦♦ ♦♦ ♦♦ ♦♦
Temporarily replace a sitewide promotion for a certain length of time, and then revert back to the original Permanently replace a sitewide promotion Program promotions to swap in the future Create a draft promotion and save it until you’re ready to have it display on the site
This is the logic that governs the sitewide promotion: ♦♦ ♦♦ ♦♦
Only one promotion can show at a time A promotion that is not published will not display If more than one promotion is published, the promotion with the most recent published on date will be the one that displays
Notes: ♦♦ ♦♦
It’s okay not to have any promotions; this will not cause empty slots to display on home or interior pages. To change publish dates or set auto-publish or auto-unpublish, edit dates in the Page Settings tab. For more information, see page 30.
27
Part 3: Page Management & Menu Order
proprietary and confidential
28 | Part 3: Page Management & Menu Order
Making a new page You can make a new page anywhere you’re authorized by right-clicking on the folder where you’d like to insert the page. Choose Create > Create a Document Here.
If you don’t want the page contained in an existing folder, just rightclick the web folder instead; this’ll create a main-level page at the “root” of the site. Be sure to give the page a Title. If you’d like to save it and work on it without it appearing on the live public website, be sure to uncheck the Published checkbox. (See page 8 for a refresher on these items.) (If you’re an Editor, you won’t be able to publish, but you can save your draft and have a Manager, Webmaster, or Web Developer publish it.)
Deleting a page To temporarily remove a page from the live website, just uncheck the Published button. To permanently remove it, right-click it in the menu and choose Delete Resource. You’ll notice it will disappear from the live website but it will continue to show in the admin menu with a red line through it. Users with appropriate access can click the trashcan icon to permanently remove deleted resources. Until that happens, a page can be un-deleted by right-clicking again and choosing Undelete Resource. Be sure to delete Spanish and Chinese versions, too, if they exist.
29
Moving a page Dragging and dropping pages within the left-hand menu of the admin area will allow you to: ♦♦ ♦♦ ♦♦
move a page from one section to another move a main-level page into a section move a page out of a section and make it a main-level page
Making, moving, & deleting sections You can add, delete, or move sections following the same steps you use to add, delete, or move pages. (See previous page.) Two things to remember about sections: ♦♦
♦♦ ♦♦
Website visitors cannot click on a section; they can only click on a page within a section. So there’s no reason to enter Resource Content or main page photo. If you’d like a starter/landing page for a section, you can name the first page something like Overview or Introduction. Any page can become a section by having a page placed inside it. Any section can become a page by having its subpages removed. If the menu doesn’t look right after you’ve made a section into a page or vice-versa, you can check or uncheck the Container checkbox in the Page Settings tab (check for sections; uncheck for pages).
Re-arranging the menu order You can re-arrange the menu on the live website by dragging and dropping pages and folders to change the order in which they appear in the admin area menu. Any changes you make will instantly be visible on the live site. (Note, there’s one situation in which this won’t work. If you’ve edited the menu-sorting display to something other than the default, you’ll want to first re-set it. Click the Sorting Options icon, then choose Menu Order from the Sort By: dropdown.)
An Important Note About Translated Pages Changes you make to the arrangement of English page also need to be manually made to the Chinese and Spanish pages. It’s important that arrangement of all three continue to mirror one another. (In case you’re wondering, the Spanish and Chinese pages will continue to stay linked to their English cousins, even if you move them around.)
Yet Another An Important Note About Translated Pages Basically same as above... if the English menu is rearranged, the Spanish and Chinese menus need to be re-arranged to match.
proprietary and confidential
30 | Part 3: Page Management & Menu Order
Auto-publish & auto-unpublish If you want a page to go live on a certain day, uncheck the Published checkbox (under Create/Edit Document tab), then enter the publication date and time you want under Publish Date. As always, be sure to click the Save button when you’re done. If you want a page to disappear on a certain day, enter the day and time you want under Unpublish Date.
Note, you should exercise great care in unpublishing. This can cause users to get “Page Cannot Be Found” errors if links have been created that point to the page. The vast majority (if not all) pages should never be unpublished, or at least not automatically unpublished. Auto-unpublishing should not be used to set a date at which content needs to be updated. Instead, put a reminder on your calendar or use another outside system to manage update dates. On that date, if all of the new information isn’t ready yet, you can replace current content with a note that reads something like, “Please check back. More information coming soon!” Pages should only be unpublished when they’ll be removed for good.
31
Part 4: News & Other Dated Stories
proprietary and confidential
32 | Part 4: News & Other Dated Stories
Annual Update Each new year, you’ll want to make a small edit. Click on each parent news folder (Current News, Spotlight, Nutrition News, etc.) and locate the Symlink field under the first tab. Replace the number that’s there with the numeric ID of the new current year folder. For instance, in 2012, the Current News Symlink should be 298
Additional Folders If additional folders are needed (for 2009 or 2016, etc.), just duplicate an existing folder set by right-clicking. Be sure that it has no stories in it, or else manually delete those stories after duplicating.
Which sections contain news/dated stories? The information in this section will enable you to update the following sections: ♦♦ ♦♦ ♦♦ ♦♦
Current News Spotlight Hot Topics Nutrition News
Notice, each of these sections contains subpages that don’t appear in the left-hand menu of the public site, and each of these pages is “newsy” or only makes sense with a publication date. Another thing these items have in common is that any of them can be pulled into the home page, sidebars, or other pages dynamically. This means automated programming can grab the most recent story blurb (or a set of the most recent titles) and automatically display anywhere in the site. For instance, no one has to manually go in and update the list of news story links that display on the home page, or the Spotlight blurb that displays in sidebars.
Adding a story Navigate to the particular news area you want, then expand the menu to the year and month you want to place the story in. Right-click and choose Create > Create a Document Here (just as you would for a regular page).
(Web Developers can also just create new folders from scratch. All the folders need to work correctly is the correct template applied.) You’ll see all of the same options and fields as a normal page, including Title, Resource Content area, Sidebar, and Main Photo. If you add a main photo, you’ll notice that in addition to appearing at the top of that news story page, a smaller version will automatically appear anywhere that the news story blurb appears. There are two additional fields that are especially important for news stories...
33
The Summary field is for the blurb you want to display for the story.
The date that displays with the story on the public website comes from the Published On field, found on Page Settings tab. No special action needed here, unless you want to backdate a story.
Editing or deleting a story Edit any story the same way you would edit a regular page: find it in the left-hand menu by expanding its parent sections, then right-click and choose Edit Resource. Delete a story the same way you would a regular page: right-click it in the left-hand admin menu, and choose Delete Resource.
Adding news to a section that doesn’t have news To add news functionality to another section of the site, just duplicate an existing news folder (such as Current News), and then move to the place where you want to create news. Keep duplicate children checked. Delete any individual stories from the duplicated folder. You can rename the folder to whatever you want to call the new news section. Note, it’s important to keep year and month folders intact. (A Web Developer may find it easier to create new folders from scratch and apply the appropriate templates.) If you want Spanish and Chinese versions of any new news sections you make, you’ll create those by clicking Create Translation for each folder and subfolder, and any story pages you want to translate. (This also can be done via the database.)
proprietary and confidential
34
Part 5: Special Files & Board Meetings
What makes these files special? The files discussed below are special because they have one or more of the following characteristics: ♦♦
specific date associated with the file (for instance, the date for any meeting minutes file is a critical piece of info for that file)
♦♦
many documents of the same category (for instance, there are many resolutions)
♦♦
document list needs to be pulled into more than one area of the site (for instance, lunch menus are available on the home page in addition to the Nutrition & Meals section)
For any of these documents, it would be a real hassle for someone to manual create and update links to them. For instance, someone would have to get up early and login first thing New Year’s Day to remove the December lunch menu and post the January on started displaying. They’d also have to edit the same set of links in at least two places.
35
A note about terminology The system on which your admin interface is built, modx, uses document to refer to anything in the left-hand menu of the admin area, including pages, sidebars, and special files. On this page, we’ve also used document to refer to a file (PDF, Word, etc.). This guide uses the words document and file interchangeably because neither one seems to fit perfectly all of the time.
As of the time of this writing, the are several groups of special documents: ♦♦ ♦♦ ♦♦
Menus Public Notices Board Meeting info & files, including Notices, Agendas, Minutes, Resolutions, & K Resolutions
In case you’re wondering, school-related files (SARCs, etc.) are updated in the same place that all other school info is updated. See School Information, starting on page 39.
proprietary and confidential
36 |  Part 5: Special Files & Board Meetings
Menus To upload a menu, open Nutrition & School Meals, then School Menus in the left-hand admin menu. Then click Upload School Menus. Choose the correct options from each drop-down menu, then click the Choose File button to upload a file from your computer.
To replace an existing menu document, simply upload a new PDF with the same meal, school type, year, and month. Current menus will automatically display on the home page and in date order on the Menus page; there’s no need to update either of these manually.
Public Notices To upload a notice, open News & Calendars, then Public Notices in the left-hand admin menu. Then click Upload Public Notices. Click the Choose File button to upload a file from your computer, then give the notice a title, and choose date and language.
37
Note, if the notice is in Spanish or Chinese, the title must also be in Spanish or Chinese. (And it should be the actual title, rather than the name of the language.) The Public Notices page will automatically display only notices for the last year, in reverse chronological order.
Board Meeting Notices, Agendas, Minutes, & Resolutions To upload meeting documents, first create a meeting. Choose About SFUSD, then Board of Education, then Meetings, Info, & Files in the left-hand admin menu. Right-click the appropriate year folder and choose Create a Document Here. Enter the month and date as a title Be sure to choose Meeting Type and enter Date. All other fields are optional. (If you choose Other, then be sure to enter the type of meeting in the text field.)
When inserting files, be sure choose the appropriate folder for each file. For instance, minutes should go in board-minutes folder; agendas should go in board-agendas folder, etc. (Note to Web Developers: Modx functionality does not currently allow us to automatically direct these to a particular folder. However, that functionality is planned for version 2.1.) Once a meeting exists, you can edit files and other information for that meeting by clicking it in the menu and updating any fields you like.
proprietary and confidential
38 | Part 5: Special Files & Board Meetings
Upcoming board meetings You actually update all meeting info here. Use the same procedure described on previous page. The system will automatically pull only upcoming meetings into home page and Upcoming Meetings section of the Board Meetings page; there’s no need to manually go in and remove old dates. Adding an upcoming meeting date without adding a file: This is no problem. If you’d like to post dates on the website, and there are no associated files, just complete the form without uploading any files.
39
Part 6: School & Building Information
proprietary and confidential
40 | Part 6: School & Building Information
What pages use this data? All of the pages in the Schools & Facilities section use this data. But it’s also used by these pages: ♦♦
ADA Access > Access Guides for Schools & Buildings
♦♦
Enroll in SFUSD Schools > Interactive School Selector
♦♦
Transportation > School Bus Schedules (dynamically pulls a list of all bus schedule PDFs, each labeled with school name)
♦♦
Programs > After School Programs > School Sites
Adding a school /building To add a school or building, open Schools & Facilities in the left-hand admin menu. Right-click School Information and select Create > Create a Document Here.
Editing school/building info To edit a school or building, open Schools & Facilities > School Information in the left-hand admin menu, and click the name of the school/ building you want to edit. Note, even if the info you want to edit appears elsewhere — for instance, the ADA Access Guides page, you still edit it from this location. You can edit anything that shows on a school page from here — map, photo, contact info, blurbs, documents, etc.
Deleting a school/building Find the school or building in the left-hand admin menu. Right-click it and choose Delete Resource.
41
Part 7: Multilingual Content
proprietary and confidential
42 | Part 7: Multilingual Content
Best Practices The architecture and user interface of your website was designed based on current research regarding optimum setup for multilingual websites, and was carefully planned with best practices in mind. (Your CMS provides you with full flexibility to move outside these best practices if/when you deem necessary. We recommend giving careful consideration before doing so.) Some of these best practices include: 1. Keep the user in the language s/he has chosen. Once a user enters the Spanish or Chinese site, core navigation and everything else they see should be in that language. If a user has entered the Spanish or Chinese site, they shouldn’t be mysteriously switched back to English when they click to another page. (One exception to “everything” being in that language: the links in the top right of the white content box of each page, which allow for number 2 below.) 2. Let the user move in any direction s/he chooses, with as few clicks as possible. (This rule applies to single-language website, as well.) Once in the Chinese site, the user should always have the power to flip over to the English version of the page they’re on. Users shouldn’t have to click to the English home page first, then hunt around for the English version of the Chinese subpage they were just on. To make this possible, the system always shows links to the “cousins” of each page (if cousins exist) in the upper right corner of the white content area of each page. Remember that often about half of web visitors don’t start on the home page. (They start their visit on another page after clicking from a search engine or entering a special URL directly.) This system is important for them. It’s also especially important for bilingual web visitors, who should be given the freedom to toggle if they choose. 3. Always keep content organization among languages parallel. Often, it may not be practical to include all of the info that’s on the English page on the Spanish version of the page. It’s okay for a parallel page to have somewhat less content than its “cousin”. However, if ABC content exists as a single page on the English site, and there is some ABC content in Spanish, it should have its own page on the Spanish site. It should never be combined with content from another short page. To put it another way, there should never be one Chinese page that’s equivalent to three English pages. It doesn’t matter how short the page is. Even very short pages are always preferable to combined pages that break the parallel, cousin-to-cousin setup. Additionally, this enables content owners and translators to monitor content much more closely, and update and maintain content much
43
more efficiently. It also ensures that the right slots will be available for future additions. 4. Link text should be written in the language of the page it’s pointing to. In addition, it should never be or include the language name, like: Chinese, or Spanish version, or click here for Spanish page (even if the text itself is in that language). For example, the English link pointing to the Strategic Plan page reads, Strategic Plan: Beyond the Talk. Likewise, the link that points to the Spanish version of the page reads, El plan estratégico: Más allá de las Palabras. 5. Never place a Spanish or Chinese downloads or text on the English pages, or vice versa. With Spanish and Chinese sites, no one will know to search the English pages for a download in Spanish or Chinese. The download should be placed on Spanish/Chinese page, even it requires a page that has nothing else on it. 6. Be transparent. This is part of why numbers 2 and 3 are so important. Users shouldn’t have to wonder “what’s on the other side”. The hierarchy and sitemap, and the relationship among “cousin pages” should always be clear. 7. Don’t give the Translation Department ten times more work than is humanly possible. Or, to put it another way, keep the system manageable. In a perfect world, the Spanish and Chinese sites would each be a perfect mirror of the English site. (However, the new setup with partial content in Spanish and Chinese is a huge improvement over the old site, and will surely provide a much better user experience for web visitors browsing in Spanish and Chinese.) The best system is one that is practical and that can be maintained and kept up to date. That’s why the site was built in such a way that multilingual content is optional on a per-page basis. It’s best to keep only as much multilingual content as can be kept up-to-date.
proprietary and confidential
44 | Part 7: Multilingual Content
Configuration The system is designed as follows: ♦♦ Every element (section, page, sidebar, sitewide promotion, news story, etc.) can have a parallel “cousin” in another language. ♦♦
These cousins are linked in the database.
♦♦
By default, pages only pull items such as sidebars and promotions in their own languages.
What’s automated: ♦♦ If you create a page translation, and if it’s published, a link to it will display on each of its “cousin” pages. ♦♦
If you create a translation, the system will insert it in the same place in the hierarchy as the page you created the translation from... That is, if the parent section(s) already existed in the new language — see below.
What’s not automated: ♦♦ If you make a translation of page B (a subpage of section A), but section A doesn’t exist in the other language... the system will just place the translated version of the page as a main-level, “root” item. It won’t be able to make a translation of section A in an automated way. Therefore, before you make a translated version of any page, you should first make translated version(s) of any/all of its parent sections. (If you make a mistake, you can always make a section afterwards and move the page into it by dragging and dropping in menu.) ♦♦
If the English menu is re-arranged, or English pages or sections are moved or re-arranged, the Spanish and Chinese pages need to be manually adjusted to match.
Making a translation Unlinking You may see this option, depending on your access level. It’s strongly recommended that you never “unlink” cousin pages, or make pages in Spanish or Chinese that do not have a parallel English page.
You can make a translation of anything (page, sidebar, etc.) that displays in the left-hand admin menu by opening it, then clicking the Spanish or Chinese button at the top of the page. Next, click Create translation.
45
Accessing a translation If a translated version of the page already exists, you can access it by opening the English page, then clicking the Spanish or Chinese button. Note that if a translation already exists, those buttons are green.
It’s also possible to access Spanish and Chinese pages using the lefthand admin menu, by opening the Spanish and Chinese folders at the bottom of the menu. If you use this method, take care not to create new translations here, but to do so following the method on page 44. Files (PDFs, Word docs, etc.) in Spanish and Chinese are stored in the same folders as the English versions. We recommend consistently applying the following naming convention: ♦♦ ♦♦
exactly the same file name as the English version, then add -SP or -CH at the end of the file name
Work in progress If a translation is in progress, needs to be reviewed by others, or is already live and needs to be temporarily hidden, just unpublish the page the same way you would any other page. (Uncheck the Published checkbox under the Create/Edit Document tab.) This will allow staff to review, edit, save, etc., while keeping it off of the public site. Unpublishing also removes the automatic links (from main menu and from cousin pages). Publishing will re-insert those links.
proprietary and confidential
46
Part 8: Advanced
47
Drop-down menus Dropdown menus (How do I, Quick Links, etc.) use code (html), so Web Developers can update them. To edit the options in the dropdown menus, go to the Elements tab. Open Chunks > Forms, and choose the dropdown menu you’d like to edit.
CSS & javascript To edit CSS or javascript, download and upload individual stylesheets via FTP. Stylesheets are located in /assets/css subfolder; javascript in the /assets/js subfolder.
Modx documentation For full modx documentation, visit http://rtfm.modx.com/display/ revolution20/. You can also find links to the Support Forum and more at modxcms.com.
proprietary and confidential
48
Part 9: Problems & Solutions
49
I can’t copy and paste! This only affects some people, and only happens when using the mouse. Try using Ctrl +V to paste instead. When I paste content into a page, it doesn’t look right. Try highlighting the text, and then clicking the eraser icon to remove formatting. You can also clear out formatting by pasting into Notepad first, then copying and pasting from Notepad. (You’ll probably find this program in Start > Programs > Accessories) I’m trying to make a heading, but the style just seems to seems to spread to all of the surrounding text. This means you have soft breaks between paragraphs and headings, rather than hard returns. To fix it, delete all of the space between paragraphs. Then, hit the Enter key to insert hard returns. I made a quote and styled it by clicking the quote button, but it doesn’t look styled on the website, even after I saved my work and then refreshed the public page. The style requires that there be a paragraph tag inside the blockquote tag, and that the person’s name be in a paragraph tag outside the blockquote. This usually happens by itself. If not, a web developer can adjust the code for you. There also can’t be extra spaces in the html. (For web developer reference, the code should look like: <blockquote><p>“) I really want to do some fancy customization and have more fun with fonts on my pages. Why doesn’t the CMS let me do this? It’s not because the CMS is not advanced enough to allow font manipulation. Most font formatting options (other than bold, italic, and pre-set heading styles) were intentionally removed from the interface. This helps ensure a consistent look and feel across all pages and sections of the site. Otherwise, if everyone could do their own thing, over time it would result in some pages with big text, some small, and there would be a lot of different colors and fonts... basically, too many different looks and styles. Later, if the decision is made to change styles, all pages can be changed at one time with a few edits to the stylesheets. I’d like to center my text. Why isn’t there a button for this? Centered text, although it may feel special, is actually a lot harder to read than left-aligned text, especially on web pages. One of the consistent rules applied across the entire website is that text is left-aligned. I have an image that’s aligned to one side, but now other images or text slide up next to it, and it looks funny. Select the text that you want to move down past the image. Then select move-below-image from the Styles dropdown menu. I want an image to be linked and also to align left or right. It doesn’t seem to work. The order in which you do the steps affects the code that’s generated. To fix the problem, do the steps in a different order. First, apply the alignment style. Then apply the link.
proprietary and confidential
50 | Part 9: Problems & Solutions
I really want to insert a table in a page. Why can’t I? One of the web developers can insert a table for you if one is needed. Tables should only be inserted for the purpose of holding tabular data, such as a list of dates with corresponding locations, or a list of schools with corresponding statistics — basically, information that comes in “sets”. Tables should not be used to create layout columns, insert break-out boxes, or style a page in any way. There are many reasons this practice is no longer acceptable, including accessibility. Once you have a table in your page, you’ll see little icons in the interface that will allow you to add and remove columns. I accessed the html window in the editor, and now everything in the WYSIWYG editor is spread out and funny-looking. This doesn’t actually affect the code or the page display on public site, although it is annoying. It seems to be a bug that is only triggered in Firefox. The solution is to save the page once you’re done editing html. Then reload it if you want to do WYSIWYG editing again; it’ll look normal when you reload. I made a new page, but it doesn’t show up on the site. Make sure you have the Published checkbox checked. (You’ll find this under the Create/Edit Document tab). If you already had it checked, try refreshing the public webpage. If that doesn’t work, ask a web developer to clear site cache (under Site in main menu). A page has that little arrow in the menu, even though it doesn’t have any subpages. Admin must edit that section, choose Page Settings tab, and then uncheck the Container checkbox. I made a new section with subpages, but it doesn’t have that little arrow in the menu that other sections have. Admin must edit that section, choose Page Settings tab, and then check the Container checkbox. I deleted a page but later changed my mind. So I undeleted it, but when I edit and re-save, it shows as deleted again. Uncheck the Deleted checkbox under Page Settings tab and re-save. The page I want to edit says it’s locked by someone else, but that person isn’t editing it anymore. If you both logout and log back in, the problem should clear itself. Assorted problems with News sections: I inserted a new News item, and now it shows up in the main menu, plus the main News link doesn’t work! Or, something else strange happens with the links. Check the box that reads hide from menu on the Create/Edit tab of the parent year folder. Uncheck the container box under Page Settings tab of the parent year folder.
51
Part 10: Tips & Best Practices
proprietary and confidential
52 | Part 10: Tips & Best Practices
Resist the urge to place content as a top-level item in the menu just because it’s a hot item, sensitive, critical, super-important, etc. It may seem like adding it as a main link will help people notice it... But the truth is that the more items that display in the menu (in its collapsed state), the harder it is for visitors to find what they want. Research shows that users will actually find content more easily when pages and subsections are grouped logically and filed under appropriate main-level headings. Remember that if something needs extra promotion, you can advertise it in Parent/Student sidebar that appears on almost every page; Community sidebar; home page, or Quick Links. It could also be made the Sitewide Promotion. Or, you could add a blurb about it as a Hot Topic item (that then points to the page for full info). Create content where it will live forever, not where you want it to show for right now. Remember that you can add a link to it from any other page, so when you’re deciding where to add new content, create it where it really “lives” and belongs. Then, just link to it from other places that are related. For instance: If there’s a new initiative, the page about it shouldn’t be created under Hot Topics, even if it’s a really hot topic. Instead, it should be created under Initiatives in the About SFUSD section, because that’s its logical permanent home. Then, you can add an intro blurb about it as a Hot Topics item. (The intro blurb then links to it.) You can still add a link from the Parents or Community sidebars. Another example: You want to create a Spotlight item featuring the new placement policy. Rather than post all of the info about the policy within the Spotlight article, you can create a Placement Policy page under the Enroll in SFUSD section, because that’s where the Placement Policy info will “live” forever. Then, you can create a Spotlight item with a brief teaser, or the perhaps the time-sensitive portion of the info (such as, “The Board voted this week…”). Then, you add a link at the end of your teaser that’ll take people to the Placement Policy page to read the full details. Before linking to a PDF, ask whether that content should really be a web page instead. PDFs are great for some things like forms or official documents. But real web pages are much more user-friendly than multiple PDFs for regular content. Use meaningful link text. Avoid using “click here”, such as “click here for Placement Policy”. Instead, use the destination as the text for the link, such as just “Placement Policy”. Or, if you want it in sentence form, you can say something like “Read more about the Placement Policy.” Check the live page after you make an update. Make sure it looks right, make sure the links work, etc. Even the experts who edit websites every day have to do this (every time!).
53
Don’t type in ALL CAPS, and use bold sparingly. Web visitors don’t wants to feel like they’re in trouble when they visit the website. Additionally, headings typed in ALL CAPS actually break the defined styles created for the website. Visitors should see headings styled exactly the same way on every single page of the website, because that’s part of the consistent look and feel. Keep accessibility in mind. These items will help keep the website content accessible: ♦♦
♦♦ ♦♦ ♦♦
♦♦
♦♦
♦♦ ♦♦
Always enter meaningful text in the “alt” field when you insert an image. This text should describe exactly what you see. For instance “photo of two girls talking on the stairs”, or “cover of the enrollment guide”. Don’t insert Flash, because Flash content is not accessible to all.
Don’t insert text in an image. Again, the text will not be accessible to all. Only text that is typed directly is accessible. Don’t insert new font styling on a page, even if you can figure out how to work around the system. (Only web developers should do this. They can apply it sitewide and ensure that it’s done in an accessible way, including good contrast.)
Ensure your code is structurally/semantically correct. Most of this is up to the Web Developers. But for basic webpage editing, this just means using heading styles and bullet lists appropriately: > Don’t apply a heading just to make something stand out. Use headings to illustrate the outline of the content on the page, nesting each heading level accordingly. So if a page has three main parts, each has a Heading 2 as it’s heading. Then, if those three parts each of subparts, they should be Heading 3. > If you’re inserting a list, use the list buttons to style automatically, rather than inserting your own dingbats or numbers. Don’t insert tables to style a page, create columns, or change layout. Do insert tables for data or sets of info. Do use row and column header tags as appropriate. (Web Developers)
Ensure the site still works and all components are accessible without javascript (again, this probably affects only Web Developers). If forms are added, ensure that they can be completed with assistive technologies.
Don’t add pages more than two levels deep in menu, if it can be avoided. Groups and subgroups are good, but having to drill down too far isn’t user-friendly. (If it’s determined that additional levels really are needed in the future, some small CSS tweaks may be needed to style that level of the menu.) proprietary and confidential
Prepared by The Grossbauer Group
www.meetGG.com
February 2011