1. Webs that Work Wednesday, May 29th, 2013

2. Introductions WNYRIC Webs that Work Team Team Lead - Rob Warchocki Supervisor of Web Site & Messaging Services Support - Webs That Work Becky Zdon – Implementation Specialist Mindy Gigantelli - Application Support/Training Lynne Widmer - Application Support/Training Bill Brown/John Marren – Server Support

3. Introductions Schoolwires Team Dirk Hamilton – Sr. Manager of Client Relationships Michael Gabel – Client Success Representative

4. Agenda Service Updates Websites and Browser Compatibility Innovative Ideas! District Sharing Tips & Tricks in C2 Working with Tables All about Apps WYSIWYG Editor Building a Searchable Forms Minibase Schoolwires Updates

5. Service Updates Support Reminders For fastest service, collect as much information as possible prior to contacting our team Email wtw@e1b.org for website supportwtw@e1b.org Or call the WNYRIC Service Desk at (716) 821-7171 After hours support (before 8 am or after 4:30 pm) Remind editors of the appropriate district support contact. Do not contact Schoolwires directly! Service & Pricing Information Web: www.wnyric.orgwww.wnyric.org Email: rzdon@e1b.org/call: (716) 821-7355

6. Service Updates Training Reminders C2 Customers receive 2 FULL days of training per year C2 Essential Customers receive 2.5 days of training per year. Training hours do not carry forward from one year to the next Refer to the Training Service Level Agreement for detailed guidelines (included in training packet).

7. Service Updates Trainings are available for both C2 and C2 Essential: Section Editor – Level 1 Section Editor – Level 2 Homepage & Calendar Editor Training for New Site Directors Custom Site Director Training (select from list of topics) C2 Essential Orientation Training for Site Directors Training for New Subsite Directors Custom Subsite Director Training (select from list of topics) Additional training requests will be considered Note: Training packets include an agenda for each offering listed above.

8. Robert Warchocki Manager of Messaging, Website, & Web Development Services

9. What is a Web Browser? A computer program used for accessing sites or information on the internet. Retrieves code – usually written in HTML and CSS – from a web server, interprets this code, and renders (displays) it as a web page for you to view.

10. What is HTML? HTML is a set of codes or tags that provide a web browser with directions on how to structure a web page’s information and content. HTML tags:,,,,, etc. Many Website Content Management systems (ie; Schoolwires Centricity 2) use a rich text (WYSIWYG) editor, to simplify the process of adding content to a website. Sample web page

11. What is CSS? Web browsers also refer to Cascading Style Sheets (CSS) to define the appearance and layout of text and other content. CSS:, font=arial, background=pic.jpg, etc. Keeping content (HTML) and design (CSS) separate from one another is the most efficient way to build a website. Schoolwires Centricity 2 uses CSS to control the appearance of many elements within the website template.

12. Sample CSS Styles

13. Browser Functionality Each browser has a different (though similar) base set of functionality, such as rendering text and displaying images. Most browsers’ functionality can be extended to include additional capabilities. These are called plugins, add-ons, or extensions. spell checking, Flash animation, run Java programs, block pop-ups, etc.

14. End of the Rainbow Now the storm clouds move in and frustration begins…

15. Common Issues There are many web browsers (over 30) Each determines how to render HTML & CSS and this causes formatting to vary across each browser Browsers continuously update to new versions, each with its own unique set of standards Individual user preferences/browser settings Fonts & Colors, Security Settings, zoom level, etc. Although plug-in and add-ons can enhance the experience for the user, they can also cause issues with website content Example: Flash, not installed or needing updates

16. IE Compatibility Mode (View) Compatibility Mode On Compatibility Mode Off

17. Common Plugin Issues All plugins cannot be installed in all browsers For example, Safari for Mac can’t install the ActiveX plugin as ActiveX can only run on Windows machines Because plugins are optional, someone may not have it installed on their browser Certain videos may not play (wmv or swf) When there is more than one browser on a machine, each browser has their own set of installed plugins Installing a plugin to one browser does not mean it’s available to all browsers Some plugins can have multiple versions installed in a browser Example: Java can have versions 5, 6, and 7, and 32-bit, 64-bit versions

18. Other Common Viewing Issues In addition to browser/plug-in concerns, the following items can also affect how your website will display: OS (operating system) Display Resolution Installed fonts Standard vs. Widescreen Devices The “Mobile Market”

19. Notice the differences in font style, formatting and the height of the cells. Internet Explorer Firefox

20. Push back the clouds…

21. Some Advice to Avoid Frustration Follow these hints and tips for the best results with content. For important content, try it out on more browsers and other machines! Instead of posting office documents, convert them to PDF format and then post. Tables are meant for rows and columns of data, not formatting or positioning text! Don’t copy and paste from office documents! That brings in formatting “junk” that doesn’t work for the web. Use the special copy/import buttons instead. Enter the content’s text first, then go back and format.

22. More Advice… Adobe Flash Player is not supported on Apple devices like iPhones and iPads. Stick with common file types like mpeg, pdf, and jpegs. Not sure of the browser support? Search the web! For example, search for: Adobe Flash browser support Don’t know the company or product? Search for the file extension and browser support. For example:.swf browser support Use Google Analytics to see how visitors are accessing your website (browser, O/S, device).

23. District Sharing

24. Exemplary uses of Website Tools Lockport On-line Ticket Order Form CSAT Wiki Pine Valley Creative Caption & Video Library Ellicottville ECS Live Dunkirk Video On Demand! Barker Scholarship Page Barker Awards, Recognition, Records and Champions Barker Link 2 – Athletics Archive Akron Sub Summary Form Avoca Technology Page Lancaster Gets Smart Lancaster Content Alerts via Text (handout)

25. Did you know? All Cell Phones have a corresponding email address: AT&T – 7165555555@txt.att.net7165555555@txt.att.net T-Mobile – 7165555555@tmomail.net7165555555@tmomail.net Verizon – 7165555555@vtext.com7165555555@vtext.com Sprint – 7165555555@messaging.sprintpcs.com or 7165555555@pm.sprint.com7165555555@messaging.sprintpcs.com 7165555555@pm.sprint.com Nextel – 7165555555@messaging.nextel.com7165555555@messaging.nextel.com Tracfone – 7165555555@mmst5.tracfone.com7165555555@mmst5.tracfone.com

26. Rebecca Zdon, Mindy Gigantelli, & Lynne Widmer

27. Table Editing Tips & Tricks Table Editing Tips: Copying & pasting tables into the WYSIWYG editor from other applications can cause many issues down the road Try other techniques to incorporate a table into your website Use the Document Viewer, embed, attachment/hyperlink, create the table using the table tools in the WYSIWYG. Tables should only be used for rendering data that belongs naturally in a grid. naturally Tables should not be used to position the contents on the page in some way (ie; add spacing around an image).not Insert a table between blank lines in the editor so that there is at least one blank line above and below the table.

28. Working with Tables Table Editing Tips: Save formatting for LAST! Complete your data entry before you consider the formatting Apply common formats to the entire table rather than cell by cell Avoid adding extra returns or spaces in a cell There are two separate editors when dealing with tables. DO NOT use the WYSIWYG toolbar/formatting options, unless you need to format a row/cell differently than the rest of the table DO use the Table Options/Properties To edit your table using the Table Options/Properties Right-click anywhere in the table Select Table Options and then Properties

29. Common Table Properties Cell spacing controls the distance between the cells. Cell padding controls the distance between the text in the cell and edge of the cell. Rules specifies which parts of the inside borders that should be visible. Set Rules to ALL for a border around every cell! Collapse table border - the space and the borders between table cells collapse so there is only one border and no space between cells. If not checked- all table cells have their own independent borders and there may be space between those cells as well.

30. Common Table Properties Width can be set in pixels or percent. Do not exceed 600 pixels Enter 100% to force the table to auto-fit the page width Alignment will control the position of the table. Center, Left, or Right Text Alignment will control the position of the text within the cell. Float will allow you to wrap text to the left or right of the table.

31. Style Builder Use the Style Builder to control the appearance of text within the table and adjust other settings: Font Family, Size, Style & Decoration Alignment, Spacing - Word, Character, & Line Height List Options – Bullets and Numbering Additional Border Options, Margins, & Padding Custom CSS

32. Common Table Issues Sample table formatting/reformatting applied to each individual cell excessive code can cause issues when updating content Suggestions to fix existing tables: Recreate the table Try the Clear Formatting button Remove excessive tags

33. Working with Apps Building Pages with Multiple Apps Samples: Wellsville – Curriculum & InstructionCurriculum & Instruction North Tonawanda – Common CoreCommon Core Demo Site - Sample Teacher SiteSample Teacher Site There are three ways to create a multi-app page: Design a page from scratch in the section workspace Take existing content and combine into one page Create Page Layouts to share with your editors

34. Working with Apps Review Default Page Types (Single App Pages) Create Additional Page Type Create “Classroom Resources” page with 4 apps. Flex Editor, Book List, Link Library and File Library Add Custom Page Layout to Section Edit the Custom Page App Sharing Add a Shared App to an existing page

35. WYSIWYG Editor Tips The WYSIWYG editor is not a word processing application It is a WEB content editor, not a print content editor Editors behave differently in different browsers and browser versions Unnecessary code is copied into the editor when you copy from a Word document Even the Paste from Word button is not meant to make a picture perfect copy of what you see in Word.

36. WYSIWYG Editor Tips Tip 1: Shift + Enter – can resolve spacing issuesShift + Enter Tip 2: Set horizontal/vertical spacing around an imagehorizontal/vertical Tip 3: Use the Edit Link Properties to quickly create or modify hyperlinks Tip 4: Use element tags to remove or change formattingelement tags Tip 5: Use the Formatting button for more advanced stylingFormatting button Tip 6: Remove formatting from text with Paste Plain Text and Clear FormattingRemove formatting Tip 7: Don’t use the space bar/tab key to adjust spacing!!!

37. Centralizing District Forms Forms are located in various sites/sections. This makes it difficult for the user to find what they need. Where are your district forms? Food Services/Cafeteria: Application for Free and Reduced Price School Meals/Milk Health Services: Parent and Physician Authorization for Administration of Medication Guidance Office: Scholarship Applications, Transcript Release Request Athletics/Activities: Concession Consent Form, Extracurricular Eligibility Rules & Permission Form

38. Centralizing District Forms (cont.) Centralized Forms Library Cafeteria Forms Athletics Forms Guidance Forms

39. Centralizing District Forms (cont.) Using Centricity 2 to Organize District Forms Minibase with clickable links Minibase File Library Apps organized by category File Library Apps

40. Michael Gabel

41. New Products Template Library Mobile App

42. Template Library Standard Templates 2 Free Templates Express Templates 6 Templates MyWay Templates 20 Templates MyWay Premium Templates 3 templates (2 Responsive, 1 Seasonal)

43. Mobile Options Web App Mobile App Branded Mobile App Responsive Design Ruby Sapphire

44. Web App A fast and easy way to give everyone in your district immediate access to your site — and the apps you’re already using in Centricity2TM — without having to download an app to their mobile phone. No need for users to download an app to their phone Gives smartphone users easy access to your district websitedistrict website Designed specifically for smartphones, so information is easy to view Offers standard themes or custom theme to match the look of your website

45. Mobile App Available for download via iTunes® or Google Play®, our mobile app gives smartphone users easy access to your site so they can keep up with what’s happening in your district. Easily downloaded from iTunes and Google Play app stores Lets you use apps you’ve already set up in Centricity2 on your smartphone Can brand the app to match the colors, font, and logo on your website ($)

46. Self-Branded App Gives your district the prestige of having a branded mobile app on iTunes or Google Play

47. Responsive Design The templates change to accommodate different screen sizes, and elements on the page can be hidden or displayed depending on the screen’s resolution. Provides an optimal viewing experience — with a minimum of resizing, panning and scrolling — across a wide range of devices, from desktops to smartphones. Access to your entire website on a wide range of mobile devices and browsers A consistent branding experience on desktop and mobile devices One template design offers five different views, so there’s no need to purchase multiple templates Quick and easy access to your most important information on mobile devices

48. Responsive Design

49. Ruby Custom Templates Our Ruby custom templates feature responsive web design and provide an exclusive look and feel. Our Ruby custom templates offer: Responsive web design Same color for each site Custom global icons Custom MyStart bar Custom footer Dedicated designer

50. Sapphire Custom Templates Our Sapphire custom templates feature responsive web design and allow each school to have its own unique color scheme while keeping branding consistent across your district. Our Sapphire templates offer: Responsive web design Exclusive look and feel Different colors for each site Custom global icons Custom MyStart bar Custom footer Dedicated designer

51. MyWay Premium Templates

52. Latest Releases Winter Release 1 Template Library Google Page Maps Winter Release 2 Mobile App New Apps Universal Connector Enhancements Winter Release 1 & 2 Resolved Issues

53. Winter Release 1 Template Library Google Page Maps

54. PageMaps We added Google specific mark-up to organize content by site ID. This will help improve indexing of search engine results for pages within the website. The pagemap attribute sets the site name (site id) in the source code of the page. Google will now be able to better determine that /page/125 is associated with Happy Valley High School. By adding the pagemap, we can also consider future functionality such as filters allowing for school specific searching.

55. Winter Release 2 Mobile App New Apps Universal Connector Enhancements

56. New Apps for C2 About Teacher Doc Viewer Embed Code School Directory Staff Directory

57. About Teacher About Teacher App This new app allows teachers to easily display their pictures and relevant information in their sections.

58. About Teacher

59. Doc Viewer You can display a document in its entirety using the Document Viewer App. You can display DOC, DOCX, XLS, XLSX, PPT, PPTX, PDF and PAGES file types in this app. You simply browse for the file you wish to display and follow the Insert File wizard. The file is uploaded to your Files & Folders. Visitors to the end-user website use controls to manipulate how the document displays.

60. Doc Viewer Cont’d

61. Embed Code Many third party services such as YouTube™ or TeacherTube® provide embed code for objects such as videos that are posted on their sites. This code normally includes code for a player as well. You can use this code to insert or embed the video and its player into a page on your site. Visitors can then watch the video on your page and not have to navigate to the site where the video is hosted in order to view it. We recommend that you insert third party embed code into the Embed Code app and not into the HTML View of the Schoolwires Editor.

62. Embed Code

63. School Directory The School Directory app allows you to add and maintain information about each of your schools and the District site. You can: include information such as the school name, school type, contact information and even upload a picture of your school or your mascot create school records manually or you can import them using a CSV file export information from the app into a CSV file, modify this file and use it to update school information or import into a new School Directory App

64. School Directory

65. Staff Directory The Staff Directory App allows you to add and maintain information about each of your staff members. You can: include names, phone numbers, extensions, email addresses and room numbers create staff records manually or you can import them using a CSV file export information from the app into a CSV file, modify this file and use it to update staff information or import into a new Staff Directory App.

66. Staff Directory

67. Enhancements Calendar Tagging Mini Base Forms and Surveys

68. Calendar You can filter the Event Queue to display events that are approved, declined or awaiting approval.

69. Tagging Tagging allows you to categorize and filter records in Headlines, Blogs and Podcasts. Once attached, your tags will display as a filtered list on the right side of your page. You use these tags to filter which app records display on the end-user website. If you choose, you can display the tags by which you filtered an app as clickable links on the end-user website or simply display the filtered records without displaying the tags.

70. Tagging Headline App

71. Mobile Notification Display a mobile notification banner at the top of every mobile site in your district!

72. Resolved Issues Adding an assignment to the calendar used to show an end time of 0:00 am. File Library – FF never allowed a user the choice to open the file, it always downloaded. The end user now has the option to open or download. Forms and Surveys – Main FIX – Users will be redirected to a sign-in page when they attempt to access a protected form or survey. Also several defects fixed – to include More button on report shares, folder dropdown in Shared Image in Styles, Form expiration date consistent with other dates (expires at end of day). Homepage Editors cannot upload files to some apps in the Site Workspace. Unable to use Home breadcrumb after using View Website in a Flex App. Comment sorting appears to be sorting by comment ID and not by date.

73. Resolved Issues, continued Content Moderation – when creating a new group the name does not save the first time. Hidden Channels (ie: teacher channels) – Breadcrumbs not working properly. C2E* ONLY – Able to edit Shared App through the Mobile tab as a subsite director. Bullets not displaying properly. All registered users group not functioning properly with Commenting and Community Contribution. E-Alert not working on NEW flex editor apps. User Email and Phone Info. needs to be mapped when updating the user store otherwise the existing information for email/phone will be deleted. For a complete list of enhancements/defect fixes included in the Winter 1 & 2 releases, please visit http://c2upgrade.schoolwires.net/c2upgrade. http://c2upgrade.schoolwires.net/c2upgrade

74. Additional Info C2 Release info http://c2upgrade.schoolwires.net/C2ReleaseInfo IE 10 Issues Summer Release Questions Comments? Please direct future questions on products, services, and features to WNYRIC