Spring User Group Meeting Webs that Work Wednesday, May 29th, 2013
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
Introductions • Schoolwires Team • Dirk Hamilton – Sr. Manager of Client Relationships • Michael Gabel – Client Success Representative
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
Service Updates • Support Reminders • For fastest service, collect as much information as possible prior to contacting our team • Email firstname.lastname@example.org for website support • 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.org • Email: email@example.com/call: (716) 821-7355
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).
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.
Websites and Browser Compatibility Robert Warchocki Manager of Messaging, Website, & Web Development Services
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.
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: <body>, <a>, <p>, <br>, <table>, etc. • Many Website Content Management systems (ie; SchoolwiresCentricity 2) use a rich text (WYSIWYG) editor, to simplify the process of adding content to a website. • Sample web page
What is CSS? • Web browsers also refer to Cascading Style Sheets (CSS) to define the appearance and layout of text and other content. • CSS: <style>, 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. • SchoolwiresCentricity 2 uses CSS to control the appearance of many elements within the website template.
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.
End of the Rainbow • Now the storm clouds move in and frustration begins…
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
IE Compatibility Mode (View) Compatibility Mode On Compatibility Mode Off
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
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”
Internet Explorer Firefox Notice the differences in font style, formatting and the height of the cells.
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.
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).
Innovative Ideas District Sharing
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)
Did you know? • All Cell Phones have a corresponding email address: • AT&T – firstname.lastname@example.org • T-Mobile – email@example.com • Verizon – firstname.lastname@example.org • Sprint – email@example.com or firstname.lastname@example.org • Nextel – email@example.com • Tracfone – firstname.lastname@example.org
Tips & Tricks in C2 Rebecca Zdon, Mindy Gigantelli, & Lynne Widmer
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. • Tables should not be used to position the contents on the page in some way (ie; add spacing around an image). • Insert a table between blank lines in the editor so that there is at least one blank line above and below the table.
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
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.
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.
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
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
Working with Apps • Building Pages with Multiple Apps • Samples: • Wellsville – Curriculum & Instruction • North Tonawanda – Common Core • Demo Site - Sample 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
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
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.
WYSIWYG Editor Tips • Tip 1: Shift + Enter – can resolve spacing issues • Tip 2: Set horizontal/vertical spacing around an image • Tip 3: Use the Edit Link Properties to quickly create or modify hyperlinks • Tip 4: Use element tags to remove or change formatting • Tip 5: Use the Formatting button for more advanced styling • Tip 6: Remove formatting from text with Paste Plain Text and Clear Formatting • Tip7: Don’t use the space bar/tab key to adjust spacing!!!
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
Centralizing District Forms (cont.) • Using Centricity 2 to Organize District Forms • Minibase with clickable links • File Library Apps organized by category
Updates Michael Gabel
New Products • Template Library • Mobile App
Template Library • Standard Templates • 2 Free Templates • Express Templates • 6 Templates • MyWay Templates • 20 Templates • MyWay Premium Templates • 3 templates (2 Responsive, 1 Seasonal)
Mobile Options • Web App • Mobile App • Branded Mobile App • Responsive Design • Ruby • Sapphire
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 website • Designed specifically for smartphones, so information is easy to view • Offers standard themes or custom theme to match the look of your website
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 ($)
Self-Branded App • Gives your district the prestige of having a branded mobile app on iTunes or Google Play
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
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
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