Graphic Element Only: Blogger Jan-Feb 2020

Have a Unique Topic to Share or Just Want to Comment on How We're Doing

January Topics & Tips

Reviewing Home Page Standards

HAPPY ANNIVERSARY!

It's been 6+ months since our initial Launch and the start of a new year - how time flies. Following tradition, it's good timing to take a step back and review, as we welcome the new year in.

Seven Sections:

Header
State Data
Masthead
Calendar
News
Spotlight
Footer

(Note: Some pages differ slightly due to approved display changes/additions)

REMINDER:

It's important to remember that our Home Pages were designed to provide the end-user a "snapshot" or "highlight" of news and other important events. Along with that, we purposefully built each page with unique sections to display these items and provide a uniformity across each home page. When items are deleted or added to the homepage, it puts a wrinkle in that uniformity. Let's Review.

Home Page Standards

HOME PAGE

As we celebrate the 6th month anniversary of our Launch to Finalsite, it's a great time to review our Home Page Standards. This information can also be found in your Webmaster's Guidebook.

As always, If you have any questions regarding the Home Page Standards or anything regarding your site, please contact a District Web Admin - Melissa, Kerry or Linda.

Home Page Panels

Header

The Header is comprised of the school logo, name, location description and navigation menus, along with design elements. Webmasters have access to edit the MENU, PARENTS and STUDENTS lists. The district manages the template and the population of the STAFF and SCHOOLS menus. All other items are managed by District Admin.

Note: Some sites have additional or different navigation menus, per approval, that they manage.

Header copied from Smith Middle School site.

STATE DATA

Masthead

The Masthead is comprised of 2 main elements:

Flyout Navigation Menus
Slideshow Panel

Webmasters have access to edit the Quicklinks Flyout and the Slideshow panel. Prospective Families Flyout is managed by District Admin. The Slideshow panel can be comprised of images and videos. At least 1 image or video should be displayed, at all times. Use the drone shot of your building as a placeholder, if you do not have images. SINGLE images or videos can be added via the Edit Gear, from a Resources Folder. If you use more than 1 item, they need to be added to a Gallery Folder to be viewed as a SLIDESHOW.

It's recommended that all images and videos fall within the set standard size to keep consistency and the Flyout menus from falling off the masthead.

Image/Video Standard Size: 1440px x 640px

Add text, titles and links to each image/video by adding text to the Description area of the Resource and adjusting the controls in the Formatting or Controls in the Resource edit panel.

Please do not edit the flyout menus on the masthead or move them about the page. They have embedded script to expand and collapse from their location.

Note: Some sites have additional or changed flyouts, per approval.

Masthead copied from Hamilton Elementary site.

Adding a Description

To add images and/or video:

Click on the Edit Gear for the Masthead
Create a Gallery, if using a grouping of images and/or videos. *Single items can be used, if placed in a Gallery Folder or from a Resource Folder.
Browse for the Resource or Gallery.
To add a Title, link or text, you'll open the Resource and add it to the Description field. To turn it on in the Masthead, expand the All settings and click the Description box and Display Resource selected to Title.

Adjusting Additional Element Settings

Calendar

The Calendar is managed through the Calendar Manager or imported iCal (Google Calendar). At minimum, the Troy School District-Wide Calendar must be displayed, if you do not have a school calendar.

To link a Calendar to display, click the Edit Element gear and select the calendar.
Calendar event details (Time, Location , Summary, etc...) can be turned on/off per the Edit gear.
TIP: If event descriptions appear too long, turn Truncate ON to "shorten" titles.
The Troy District Calendar must be set to display during the summer on your school homepage, as most school calendars do not have events scheduled.

How to Build and Manage Calendars will be an upcoming Blogger topic - Stay Tuned!

Calendar copied from Boulan Park Middle School site.

News

News & Announcements (Posts)

The News & Announcements panel displays Board Posts that are built and managed in the Posts Module.

There are 18 image slots available for posts to display on the home page. These are accessed via arrows and/or dots that can be turned off/on in the Edit Element gear. Dots are added at the bottom of the panel and arrows on both sides of the "View All News" design sub-title link at the top of the panel. You must have at least 3 posts added to your page, at all times.
Each Post is made up of the following elements:
- Title (Preview on the Hover-Over)
- Body copy (to be used for 1 paragraph or less)
- Summary (used if there is more than 1 paragraph of text)
- Publish Date ( Featured and Expire dates can also be set)
- Thumbnail Image (use the recommended image size so that images are not cut-off or appear distorted)

Image Size recommendations: 380px x 285px

News copied from Martell Elementary site.

Spotlight

SPOTLIGHT

The Spotlight Panel is made up of several common elements:

Each Image/Video container in this section has been sized to fit and display a SINGLE resource of your choice. These containers are meant to provide a glimpse into your school and highlight weekly, monthly or yearly achievements or events.
Images/videos can be edited and added via the Edit Element Gear. Galleries of multiple resources (slideshows, etc) CANNOT be added. To view a gallery of resources, have your image link to a site page.
Although you have access as a page editor, DO NOT delete the video/image containers, replace the resources. Do not delete the Twitter feed from this section.
If you have mistakenly deleted element any homepage elements or Spotlight containers, please contact Melissa, for support.
TIP: Use the larger containers for video elements and the smaller ones for images.
The recommended image sizes, per container are listed below. Video should reduce correctly for the larger containers with some cut-off outside the container. Smaller containers will adjust and cut-off video, per the container size. Although these are suggested sizes, other sizes can be used in the containers. Images will adjust to the container size by cropping or stretching. It is not recommended using photos or videos above 385px in height, as it extends the Spotlight container beyond normal responsive viewer standards.

Image Size recommendations (Small containers): 325px x 285px

Image Size Recommendations (Larger containers) 525px x 285px

Spotlight copied from Larson Middle School site.

Footer

As with the Header, the Footer has a lot of identifying information, including the District OneTroy tagline, school name and contact information. Also included is, webmaster contact info, school logo, and social media links. Most of these items are set on the main template and managed by the district, but, you have edit/managing access to the Social Media Links. Each Social Media Link is pre-set with the icon, you just need to add the link.

Note: The blue circle-guy icon (lower right) is the Audio Eye icon and evaluates our site for accessibility issues, such as, Alt Text, Color, Title, etc. problems. Audio Eye will be discussed in a future Blogger issue.

Note: Some sites have additional or different navigation menus, per approval, that they manage.

Footer copied from Wattles Elementary site.

Customizing Tabs & Accordions

Accordions and Tabs are a wonderful way to display and organize a large amount of content on a single interior page. You are only bound by the size of the container or page as to how many accordions or tabs you can apply. And, you can switch between the two in the Layout Edit setting next to the Edit Gear of your element. Note: You can lose content, if you have accordions within accordions and your switch to tabs. First, add an Accordion or Tabs element to the page or banner. You'll find them in the “Layout” section of the elements menu.

Each tab or accordion is named "New Panel" and will have to be renamed. To add Tabs or Accordions to an existing set, just click the “Add Panel” or “Add Tab” button. To edit a panel's title, click the corresponding panel settings icon. Note: Each panel has a settings icon, and the tabs or accordion element itself has its own settings icon.

Once your tab or panel has been created, you can customize it by adding content within. Expand or click on the panel/tab and add your elements. New panels/tabs have create a Content element within, this can be used or deleted.

How to Link to a Panel/Tab Rather Than Entire Page

With so much content on one page, you may find you want to link to a specific panel rather than the page itself. Each panel has a built-in anchor link that you can use to automatically expand a particular panel on the page.

To find this link, visit the live version of the page with the Tabs or Accordion element. Right-click on the panel title and select “Copy Link Address” (Chrome), “Copy Link” (Safari), “Copy Link Location” (Firefox), or its equivalent in your browser of choice. On the Add Link menu, paste the link into the URL field.

Note: This link will not work for Tabs or Accordion elements that are inside of other Tabs or Accordion elements. Only panels that are initially displayed on the page when it is loaded will respond to the anchor link.

Reminder: Page Load Speeds

As with all of our pages, it's always a good idea to keep in mind the end-user. Not all users have updated video cards or a ton of memory. So, some pages, especially those with a lot of content can create lag times. The same for content that you put inside a Tabs or Accordion. These elements will load when the page loads, even though they are hidden inside the panel/tab and not immediately visible when the page is loaded! Basically, if you add it to the page, no matter if it is visible or not, it all loads at the same time when the browser requests the page load. This can slow page load speeds. Just something to keep in mind. If you have a lot of content (videos, HD photo galleries) on a page, you may want to think about creating additional sub-pages.

JUST FOR FUN - ADDING VOICE-OVER CHARACTERS

Just for fun - try adding a voice-over character to your site to read the birthday's for the month or announce a special event. Voki is just one of the many that offer a few free characters.

Once you've created your online character, embed it using an "iframe" script.

Here's the one I used for the Voki Blogger Bear. Feel free to copy this one and change the portions that fit your use.

Make sure you set your iframe to allow full screen, so you can change the size
Add a border by changing the 0 to a number (this number represents how many px = pixels wide the border will be)
Set your height and width (same as with border, this is represented in pixels)
You'll have to go to Voki to select your character and add a voice. Change the URL in the iframe below to embed your character or request an embed code to add.
Have Fun!

<div><iframe allowfullscreen="" frameborder="0" height="500" src="https://www.voki.com/site/pickup?scid=15951101&chsm=da0bc4bad2cb35cd96bfe9f6a38c1df6" width="500"></iframe></div>

February Topics & Tips

INTRODUCTION TO THE CALENDAR MANAGER

Calendar Manager:

Is designed to display and manage event information on your website. This section will introduce you to the Calendar Manager tool to create calendars and display events. Also, how to add calendars to pages and filter the events. We'll take an introductory journey into the tabbed panels on the Calendar Manager dashboard. We'll learn more editing and advanced features in future editions of The Blogger.

Calendar Manager can be accessed through the 4-Square Manager toolbar to the left of your Composer screen.

Calendar Tools

DASHBOARD TAB

Calendar Manager - Dashboard Tab:

The Dashboard consists of the Recent, Daily and Upcoming event entries. The Dashboard also has the builders tool tabs along the top:

Dashboard
Calendars
Events
Import
Export
Settings

The Dashboard Quick Links management buttons are also available. However, it is recommended that you use these buttons from your Calendar and not the dashboard, as you may unintentionally publish or add something to another schools calendar.

Graphic Element Only: QUICKLINKS_BUTTONS_CALENDAR_TOOL

Graphic Element Only: DASHBOARD_TAB_CALENDAR_TOOL

Graphic Element Only: DASHBOARD_TAB_CALENDAR_TOOL_2

CALENDAR TAB

Calendar Manager - Calendar Tab:

The Calendar Tab displays all of the calendars that you have access to view and/or edit. We have created four Calendar Groups to add calendars:

Department Calendars
Elementary & Secondary Calendars
IA Campus Calendars
TSD Community Calendars

Also on this tab is the Quick Link tool buttons.

TOOLS

Create New Calendar

Each school has a Finalsite Calendar created for them. This New Calendar button will be used to create a department, iCal or accessory calendar. Click the New Calendar button.

The New Calendar Settings panel will pop up and allow you to add your calendar details.

Calendar Tab Elements

Calendar Type

There are 4 options listed. Normal and Live iCal are the selections that you will be using.

Group

The group is the section or designation. Choose one of the pre-set groups from the list.

Allow Site Visitors

If we were using the app, the calendar could be set to restrict or allow certain users from viewing the calendar.

None
Public
Specific Roles

Icon

The group is the section or designation. Choose one of the pre-set groups from the list.

Calendar Title

Name will appear in the Group in the Calendar Manager

Key

Sets the color of your calendar for alerts and filtering. Add a Hex(idecimal) color by it's code (https://www.color-hex.com/) in the box or click the square and select from the color palette. Click Select Color button when done.

Category Manager

Sets the calendar into a sub group or category, for example: Wass Kindergarten Calendars would be a sub group of Wass Elementary Calendar.

LMS/App Availability

If we were using the app, the calendar could be set to restrict or allow certain users from viewing the calendar.

None
Public
Specific Roles

Create or Cancel

Click the green Create button when ready to create your New Calendar or Cancel to quit.

Create New Group

Accessing Events Editor from the Calendar Tab

To edit your new calendar or an active calendar from the Calendars tab. Click on the pencil to the left of your calendar.

Confirm the settings (these were pre-set when you created your calendar. Click on View Events button, this will take you to the Events tab.

Note: If you go directly to the events tab, you will not be attached to a calendar and have to select it from the settings panel before adding events. This is not recommended, as you have more opportunity to inadvertently add items to others calendars without knowing it.

Events Tab

Since there are multiple calendars on the Calendar tab, it is best to add events by selecting your calendar (click the pencil) and then clicking the View Events button. This guarantees that you will be adding events to the correct calendar.

However, you can add and manage events through the Events Tab.

There are many features and tools on the Events Tab that are useful in deciding how to add and preview your events:

Mini Grid Calendar with Selector:

Month Selector:

Publish & Info Display:

Preview Selector:

Group & Other Calendar Display Panel:

Grid Display Area:

Managing & Editing Calendars

How to Add an Events to a New or Active Calendar
Preview Selector Options

How to Add an Events to a New or Active Calendar

There are a few options for adding events to a new or active calendar. If you did not select your calendar from the Calendars Tab, expand the list of Available Calendars and check the box next to the calendar or calendars that you want to add events. Click Update View to active the calendar.

The, either click in the date square to add a quick event (limited description and information) or click Create Event button for a more detailed event entry.

SELECT-CALENDAR-FROM-GROUP-LIST-EVENTS-TAB

Preview Selector Options

Import Tab

Export Tab

Settings

GRAPHIC ELEMENT ONLY: 4-SQUARE_CALENDAR_TOOL

Making Container Elements Exciting

The basic Container Element was designed to build pages, not much else, but I've come up with a few ways you can use it for other things.

Use it to group elements together, so you can move them on your page or to other pages as a unit when cloning.
- Create the Container, add your elements and panels to the container, then if you want to move items, just clone the Container. It clones everything within it to another location.
Using Containers to add backgrounds and content elements (see example below)

Adding Backgrounds using Containers/Content Elements

By adding background images to your layout, it provides a unique way to display information.

Add a Container Element

In the Settings, add the image under Design as a Background image

Add a Content Element or other Element within the Container, like this Content box with text. Be aware that your background image will duplicate if the items get too long within your Content Element. Scroll to the bottom to see the image duplicate. Use the Indent to move the text or items from the edge of your element. If your Resource has a description added, it will appear on the background image, if selected to display in the settings.

snow day

No school today!

Accordion

Accordion panels can be added

New Panel

Tabs

tabs can be added
New Panel

tabs can be added

New Panel

Who likes reading boring PDF's?

This section is not just a review of the Standards Guidebook, it is an opportunity to get you to look at simple PDF's as graphic elements. The adage that "Less is More" applies in most cases, unless the only object on your page is a lonely PDF, then a little pizzazz might be what is needed.

You've learned a little about I-Frames and adding HTML code in previous Blogger issues, so let's put it to good use and create a Flipbook. We'll use the Webmaster Standards Guidebook to demonstrate. It's my sneaky way to get you to review it for website standards. ; )

We'll use a flipbook creator that can be found online: FlipHTML - https://fliphtml5.com/ to create the HTML embed code for our book. There are many Flipbook creators online, but not all are free, so browse carefully - Free trial, means it will expire. FlipHTML, although free, has the site brand at the top and advertising at the bottom (that can be closed); This site works well, if you don't mind the branding.

It's a known fact that users that read on mobile devices like the ability to "turn" or "flip" pages rather than clicking to advance.

General flip book

Lightbox flip book

Browser flip book w/outline

Give a shout out to your school data

Your school is full of extraordinary history, why not shout it out from the rooftops. We know it's not realistic, you'd never read the amount of viewers you'd want to, unless that it you made it on the nightly news.

What about thinking outside the box and using the slideshow viewer to display all of your school data that is just waiting to be displayed. See the example on how Athens is using this cool tool in a unique way.

Here are some rules to get your started so you can be proud and show or shout your facts.

Create images that are all consistent in size
Set the CONTROLS settings
- Scrolling (Horizontal or Vertical)
- Autoplay (on or off)
- Play/Pause (on or off)
- How many slides will play per second
- Items per slide (take into consideration the length or size of your item and if you are using it in a column or the entire length of your page)
- Transition effect
Set the FORMATTING settings
- Order of images
- Display

EXAMPLE OF AN INFOGRAPHIC USING SLIDESHOW GALLERY

Disclaimer - although this is cool, As with all items, such as banners, panels and additional slideshows, these can only be added to Interior Pages, unless you get prior approval from Kerry, Melissa or Linda, to have it added to the Home page.

Your Questions & Comments Answered

Thank you for your questions and comments, we appreciate the opportunity to provide suggestions, open the forum to other webmasters for support and improve where needed.

Webmaster Question:

"What types of things can I put in my Masthead Slideshow other than pictures or the drone video?"

Suggestions:

Use iMovie on your iPad to create a short "Introduction to your school video". Ask a teacher to have students help for extra credit. Run a contest monthly or bi-monthly so students can get involved. It's also a great marketing technique to drive more views to your page, when you involve others and keeps your page fresh.

iMovie has great pre-set tools and effects that can lend themselves to creating a unique masthead video and students and staff have access to it on their iPads. Gather snippets of school history, student or staff interviews or photos, upcoming events or past achievements. Showcase your schools pride. Just keep in mind that there is an upload limit. You may also want create two videos - a "trailer" or "Snippet" of your video for the Masthead and a full video that can be linked and played on an interior page. This will eliminate the load time on your homepage.