1 / 74

Spring User Group Meeting

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

cana
Download Presentation

Spring User Group Meeting

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Spring User Group Meeting 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 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: 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. Websites and Browser Compatibility 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: <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

  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: <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.

  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. Internet Explorer Firefox Notice the differences in font style, formatting and the height of the cells.

  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. Innovative Ideas 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.net • T-Mobile – 7165555555@tmomail.net • Verizon – 7165555555@vtext.com • Sprint – 7165555555@messaging.sprintpcs.com or 7165555555@pm.sprint.com • Nextel – 7165555555@messaging.nextel.com • Tracfone – 7165555555@mmst5.tracfone.com

  26. Tips & Tricks in C2 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. • 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.

  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 & 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

  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 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!!!

  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.)

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

  40. Updates 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 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

More Related