Webs that Work Wednesday, May 29th, 2013. Introductions WNYRIC Webs that Work Team Team Lead - Rob...
74
Spring User Group Meeting Webs that Work Wednesday, May 29th, 2013
Webs that Work Wednesday, May 29th, 2013. Introductions WNYRIC Webs that Work Team Team Lead - Rob Warchocki Supervisor of Web Site & Messaging Services
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
Slide 3
Introductions Schoolwires Team Dirk Hamilton Sr. Manager of
Client Relationships Michael Gabel Client Success
Representative
Slide 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
Slide 5
Service Updates Support Reminders For fastest service, collect
as much information as possible prior to contacting our team Email
[email protected] for website [email protected] 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:
[email protected]/call: (716) 821-7355
Slide 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).
Slide 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.
Slide 8
Robert Warchocki Manager of Messaging, Website, & Web
Development Services
Slide 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.
Slide 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 pages 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
Slide 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.
Slide 12
Sample CSS Styles
Slide 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.
Slide 14
End of the Rainbow Now the storm clouds move in and frustration
begins
Slide 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
Slide 16
IE Compatibility Mode (View) Compatibility Mode On
Compatibility Mode Off
Slide 17
Common Plugin Issues All plugins cannot be installed in all
browsers For example, Safari for Mac cant 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
its 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
Slide 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
Slide 19
Notice the differences in font style, formatting and the height
of the cells. Internet Explorer Firefox
Slide 20
Push back the clouds
Slide 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! Dont copy and paste from office documents! That brings in
formatting junk that doesnt work for the web. Use the special
copy/import buttons instead. Enter the contents text first, then go
back and format.
Slide 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 Dont 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).
Slide 23
District Sharing
Slide 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)
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.
Slide 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
Slide 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.
Slide 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.
Slide 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
Slide 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
Slide 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
Slide 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
Slide 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.
Slide 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: Dont use the space bar/tab key
to adjust spacing!!!
Slide 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
Slide 38
Centralizing District Forms (cont.) Centralized Forms Library
Cafeteria Forms Athletics Forms Guidance Forms
Slide 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
Mobile Options Web App Mobile App Branded Mobile App Responsive
Design Ruby Sapphire
Slide 44
Web App A fast and easy way to give everyone in your district
immediate access to your site and the apps youre 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
Slide 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 whats happening in your district. Easily
downloaded from iTunes and Google Play app stores Lets you use apps
youve already set up in Centricity2 on your smartphone Can brand
the app to match the colors, font, and logo on your website
($)
Slide 46
Self-Branded App Gives your district the prestige of having a
branded mobile app on iTunes or Google Play
Slide 47
Responsive Design The templates change to accommodate different
screen sizes, and elements on the page can be hidden or displayed
depending on the screens 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 theres no need to
purchase multiple templates Quick and easy access to your most
important information on mobile devices
Slide 48
Responsive Design
Slide 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
Slide 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
Slide 51
MyWay Premium Templates
Slide 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
Slide 53
Winter Release 1 Template Library Google Page Maps
Slide 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.
Slide 55
Winter Release 2 Mobile App New Apps Universal Connector
Enhancements
Slide 56
New Apps for C2 About Teacher Doc Viewer Embed Code School
Directory Staff Directory
Slide 57
About Teacher About Teacher App This new app allows teachers to
easily display their pictures and relevant information in their
sections.
Slide 58
About Teacher
Slide 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.
Slide 60
Doc Viewer Contd
Slide 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.
Slide 62
Embed Code
Slide 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
Slide 64
School Directory
Slide 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.
Slide 66
Staff Directory
Slide 67
Enhancements Calendar Tagging Mini Base Forms and Surveys
Slide 68
Calendar You can filter the Event Queue to display events that
are approved, declined or awaiting approval.
Slide 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.
Slide 70
Tagging Headline App
Slide 71
Mobile Notification Display a mobile notification banner at the
top of every mobile site in your district!
Slide 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.
Slide 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
Slide 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