Master Class June 2013

Contents
Media By Pass3 Multiple Uploading.5 Photo Smarts Aligning Images.6 Photo Smarts Text Wrapping...9 Working with Articles11 Working with Anchors..16 Copy & Paste Techniques........20 Uploading Videos..21 Using the Calendar Smarts - Locations30 Using the Calendar Smarts Event RSVP..32 Creating & Embedding a Form.37 Easy to Load Web Apps Translator...43 Easy to Load Web Apps Interactive Map48 Advanced e-Newsletter51 Viewable PDF Newsletter Scribd55 e-Newsletter Using Articles60

Media by Pass
Currently most users are double handling their media. These steps will outline how you can by pass the Media folder when you are loading information onto your site. 1. Go to the page you wish your media to land. 2. Type the name of file that you would like to display on your site. Highlight this name and click on the chain icon (insert/edit link)

3. Click on the browse button to take you to the Ajax File Manager. You will notice that there is a button in the corner called Upload. When you click on this you can browse your files from your computer and load them directly into the media folder.

4. Once you have selected your file, click on upload. When the red spinning wheel stops and your media bar is empty, you can hit close and this takes you back to the Ajax File Manager. 5. In most cases the newly uploaded file will appear at the bottom of page 1. If you have to search, use a part of the file name and click on search. Tick the box and insert your media directly onto your page!

Handy Hint
This process works the same for images. Just use the tree icon (insert/edit image).

Multiple Uploading
Using the media by pass you will notice a green + located on the File Upload Form

Click on this button and it will add another browse box. You can now browse and upload multiple items at once.

Handy Hint
Remember the Ajax File Manager saves your files with the original name they are given on your computer. If there are spaces use _! It is often easier to search for partial names instead of athletics day 2013 you might want to search for ath or 2013 to narrow down your results.

Photo Smarts Aligning Images

Want to plant 3 images in a row on your site all at the same height??? 1. Load your media into the Ajax file manager (via Media folder or Media By Pass) 2. Go to the page you wish to plant your photos and put your cursor where you want your first image to appear. 3. Click on the tree button (insert edit image) and search for your first image. Tick the box and select it in the Ajax File Manager.

4. In the next screen, click on the Appearance tab.

5. Dimensions 200 px width. Vertical & Horizontal spacing at 2.

6. Click insert. You will land back on your page with your first photo. Repeat the same process with your next two images.

7. The edit screen may display your images in two rows, ignore and update your page.

8. Visit your site and check your handy work!

Handy Hint
You can change the dimensions of your images if you would like greater spacing between the images or if you would like to line up more than 3 images in a row. Vertical spacing: The space between the content directly above and below the image. Horizontal spacing: The space between the content directly beside the image.

Photo Smarts Text Wrapping

Want to place an image with text wrapping neatly around it? 1. Go to the page you wish to plant your photo. Put your cursor exactly where you would like the photo to land.

2. Click on the tree (insert/edit media) and select the image you wish to use from the Ajax File Manager. 3. Click on the Appearance tab and select your alignment (in this case we would like the photo to appear on the left).

4. Check the dimensions of your image are a width of somewhere between 150 & 300 px (ideally) and change accordingly. 5. Horizontal and vertical spacing should be somewhere around 5.

6. Click on Update and view your image on your page.

7. You can play around with the alignment if you have several photos to go in the same body of text, or if you want something different. (This image is now aligned to the right.

10

Working with Articles

Articles are like the front page of a newspaper a place to host your most important information that changes often. You dont want your articles to go stale changing your articles often ensures your users know that you are constantly updating your site.

Create an article
WEBSITE CONTENT Articles Create new

Give the article a title, a date and select an author from the menu. If you need to create an author click on the + button and create an author. It is often best to make an author with your school name.

11

The summary box is where you type a brief introduction to your article. The first sentence or two is plenty. You only want to give the reader a teaser, as if you have more than 2 or 3 articles, the reader has to scroll down their screen to view the rest of the articles, the less text you have, the more articles you can fit without scrolling! The content box is where you place the body of your article. This appears as an automatic read more button on your site. Make sure you give your article a KEYWORD or else you wont be able to publish it! In this instance it will be footy tipping.

Once you have completed your article, save it as PUBLISHED and visit your site.

12

Using the Small Pic/Big Pic Option

Articles can be enhanced by images. You will notice when creating an article there is an option to add a small pic or big pic. Choose the style that you prefer and stick with this for all your articles. In this instance, we will use the small pic style.

The dimensions of these photos can be found underneath the browse button. You will more than likely need to resize your images to suit the dimensions required, we recommend using http://www.resize.it/

13

Using www.resize.it you can browse your computer for the image you would like to appear in your article. Input the dimensions in both fields, in this case 70 height and 100 width.

Move the crop box to the area you wish to display in your article and then click on CROP IT above your image. You then right click on the image to Save As on your desktop.

CMS Website Content Articles Edit the article of choice, and browse your computer for the small pic style image, click on the Crop Image button and UPDATE your page.

14

Now that you have loaded the image style into your article, the final step is to change the display style of your articles on your site. SET UP Site Layout The last option in this area is Manage Homepage Article Display Style. In this instance, tick the Small Pic option. UPDATE your changes and visit your site.

If you create an article without an image in the small pic section, your article will display like this:

15

Working with Anchors

You may find yourself with a large page full of text with important details throughout. The Sponsor-ed system has a way of indexing this information so that through the click of a button, the user is taken to the relevant information on that page. This is done through the use of anchors. The important information is indexed at the top of the page, and once clicked on, the user is linked to the area of interest.

Step One Creating and Index

Open your page and create and index of important terms at the top. In this instance, we are using the history of the various sport teams at a school. Type your Index at the top of your page like this

16

Step Two Inserting Anchors

Once you have decided upon your index you must find the relevant pages to anchor. Gold Team is our first Anchor. Find the information that is relevant to Gold Team (in this case, to the left of the heading Gold Team and click on the Anchor button. Insert your Anchor here

Give your anchor a simple, relevant name. In this case Gold

You will see the Anchor Icon once completed.

Repeat this step for the remaining indexed items.

17

Step Three Linking your index to the anchors

Once you have inserted anchors for your index items, go back to your index and highlight the first item then click on Insert/Edit link button.

You will see there is a drop down menu for Anchors use this menu to select the anchor for the index item you are currently working with.

Click on insert.

18

You will see that your first index item is now a hyperlink.

Repeat this step for remaining index items.

Step Four Review your work

Now its time to save your changes and visit your site to see your Anchors in action! Click on your index items and be taken to the relevant area of the page!

In this instance I clicked on Green Team.

19

Copy & Paste Techniques

You may want to copy content from another document or web page but the formatting just wont work for you. Here are a few simple tricks: On your toolbar there are some icons that will come in handy:

Eraser: removes all formatting

Paste as plain text : copies all text and no formatting

Paste from word: keeps the formatting from word when pasted into site

20

Uploading Videos
Videos on your site can maximise communication with your families and prospective families. Some schools like to take the user on a virtual tour of the school, others like to demonstrate a typical day in the school or highlight special events that have taken place at school. Your sponsor-ed website can support videos hosted by third-party sites such as YouTube, Vimeo, Teacher Tube and School Tube.

Choose a site to host your video

School Tube: http://www.schooltube.com/ Teacher Tube: http://www.teachertube.com/ Vimeo: https://vimeo.com/ You Tube: http://www.youtube.com/ In this case we will use You Tube.

You Tube
YouTube Ad Blocking
You can block ads on your YouTube account by going to this address: http://www.youtube.com/account?feature=mhum#playback/annotations Select Do not allow advertisements to be displayed alongside my videos and save your changes.

21

Disabling YouTube Recommended Videos

Watch this video to learn how to turn off recommended videos. http://www.youtube.com/watch?v=T5pCXc_I2fQ Assuming that you already have a You Tube account login and upload the video you wish to display on your site. Depending on the size of your video and the speed of your internet connection, upload times may vary. This four minute video took approximately 5 minutes to upload.

Click on the link to view your uploaded video.

22

Copy the URL of the video that you have just loaded.

Inside the CMS

Go to the page where you would like to host the video and click on Insert/Edit Embedded Media icon.

23

Paste the copied URL where it says File/URL

Your page will then appear like this:

Make sure to SUBMIT or UPDATE your page, so the changes are saved.

24

Click on Visit Site to have a look at your video!

Vimeo
Assuming you already have an account, login and click on Upload a video

25

Choose the video you wish to upload and then click on Upload Selected Videos

While your video is uploading, you can enter information about your video.

26

You will see this screen once the video has been uploaded.

Vimeo will let you know via email when your video has been converted and ready to load.

In the far right corner of your video (you may need to hover your mouse over the top of the video) you will see a Share button click on this.

27

Copy the code underneath the heading Embed

Inside the CMS

Complete the steps outline above pasting this code into your page via the HTML button.

28

Additional Information
Teacher Tube & School Tube
Some schools have reported success using TeacherTube and SchoolTube. If using these accounts copy the Embeddable Player and paste this into your page using the HTML button.

YouTube Ad Blocking
You can block ads on your YouTube account by going to this address: http://www.youtube.com/account?feature=mhum#playback/annotations Select Do not allow advertisements to be displayed alongside my videos and save your changes.

YouTube Recommended Videos

Watch this video to learn how to turn off recommended videos. http://www.youtube.com/watch?v=T5pCXc_I2fQ

29

Using the Calendar Smarts Locations

Often overlooked creating a location within your event calendar adds a bit of wow factor for your audience. This location can be presented as an interactive google map within your site, offering another layer of cleverness to your audience.

Add a location
SET UP Events Location Create New Fill in the details Tick the box Show on Google Map

30

Displaying the location within an event

1. EVENTS Create New 2. Fill in the relevant details and use the drop down menu Choose Location to select your newly created location.

3. Visit your site calendar to see your handiwork.

31

Using the Calendar Smarts Event RSVP

Your Gen 2 site allows you to create an RSVP for your calendar events. The RSVPs can then be exported to a .csv for use outside your site.

Create your event with RSVP function

1. EVENTS Create New Enter the relevant details for your event if you have added a location, choose this from your drop down menu.

2. It is preferable that you select a co-ordinator for the event. This will allow enquiries to be directed to the appropriate staff member. If you dont already have the details in the CMS you can Create A New Coordinator

32

3. You can ignore much of the ticketing information and scroll down to RSVP Required. Tick this box.

4. Submit your event and visit your site to check your event calendar.

Using the RSVP Function

1. The first 200 characters are shown on the landing screen click on the event name to view the rest.

33

2. You will notice the event co-ordinators email address is displayed. Your audience can direct enquiries to them. To RSVP to the event click on the RSVP Here button.

3. When a user clicks on RSVP they will need to fill out the details below and click Proceed.

34

4. A Booking Details page will pop up click on submit.

5. They will then get the following confirmation message:

Viewing & Exporting RSVP in the CMS

1. EVENTS scroll down to the event in question. In Attendees you will see a bold number.

35

2. Click on the number, you will see the following details:

3. Up the top, click on Export to CSV

4. The file will open in exel for you to save or modify to your needs.

36

Creating & Embedding a Form

You may be inundated with telephone calls to report an absence. You may need to ask for volunteers to help with the Parent Association. You may want to ask for feedback. Creating a form and embedding it on your site is relatively easy and all the responses can come directly to your inbox!

Creating and absentee form with Wufoo

1. We use Wufoo Form Manager its free! www.wufoo.com Go to wufoo and create an account.

2. Click on New Form

37

3. Using Add a field you can start creating your form.

4. When you have completed adding your fields click on Save Form

4. Click on email notifications and fill in where you would like the form responses to be sent.

38

5. Click on the Forms tab at the top and your newly created form will appear.

6. Click on the Code button. 7. Choose Embed Form Code on the left and copy the iFrame Version

39

Embedding the form on your site

1. Now that you have the code from Wufoo, go to the CMS and edit/create the page you wish your form to appear.

2. Click on the HTML button and paste in your code.

3. Your page will look like this update your page.

40

4. Visit your site and try out your new form!

5. Once the parent has completed the form, they will receive this message screen (you can modify the message to suit your needs).

6. As administrator you will receive an email instantly when the form has been filled out.

41

42

Easy to load Web Apps - Translator

HTML Code might sound a step ahead of you rest assured, it is not! If you know how to copy and paste you can load HTML code into the CMS and see some amazing widgets on your site!

Google Translator
Want to connect with your community but you find that there is a language barrier? Now you can share all information on your site with families that speak/read a different language at home. Simply load the Google Translator onto your site and it will translate each page to any language of choice!

Step 1: Visit the Sponsor-ed Website

Visit our website and click on SUPPORT Short code http://www.sponsor-ed.com.au/page/62/Short-Code We have already got the code for the google translator on our site highlight this code and copy it.

43

Step 2: Inside the CMS

Google translator works best in a section this way you can add it to multiple pages easily. WEBSITE CONTENT Section Create New

Name and description fields should be entered. You can add a category like we did above, or you can select a pre-loaded category for your new widget. In the content box toolbar there is a HTML button. Click on this and paste your copied HTML code into the editor. Click on UPDATE.

44

You may not notice any difference on your page just click on ADD SECTION.

Your section now appears on your Manage Sections list:

Step 3: Adding your section to pages

To add your section to the HOMEPAGE click on: Website Content Homepage Section and select your Translator from the drop down menu.

You will have to give your section a number value to order it from top to bottom.

45

Step 4: Check your work!

Visit your site to see the translator section.

And now you can use the translator to translate all the text on the homepage!

46

Step 5: Adding the translator to pages within your site

The translator will only translate the page that it appears on. Once clicking through the site the text will revert to English. You will need to have the translator placed on each page you would like to use it. WEBSITE CONTENT Pages Choose the page you wish to add the translator to and click the pencil (edit) icon. Scroll down until you reach a drop down menu titled SECTION and choose the translator from your list of sections.

Now visit your site to check your translator!

Repeat this process for all relevant pages on your site.

47

Easy to load web apps Interactive map

An interactive map on your website will make it easier for your site visitors to find your school as they can enter their address and get directions directly from your site! 1. Go to this site: http://www.gmodules.com/ig/creator?synd=open&url=http%3A%2F%2 Fwww.gstatic.com%2Fig%2Fmodules%2Fmapsearch%2Flocalsearch_v2. xml&lang=en

2. Change the title to your school name and change the default location to your school address.

48

3. Click on Preview Changes. The map will now reside over your address.

4. Click on Get the Code and copy the code from the panel below.

49

5. Go to your site and edit your Contact Us page. Click on the HTML button on your toolbar.

6. Pop your cursor on the line underneath all the code and paste the new code in (this allows the map to appear underneath your contact information typed on the page). Update your changes.

7. Visit your site to use your interactive map!

50

Advanced e-Newsletter
You have mastered the simple e-Newsletter and now you are ready to try some of the smarts. Try the following steps to add a real Wow Factor for your school community.

Attaching an article, webpage and calendar

Within the e-Newsletter, you will see a list of Usable Constants in Body Content.

Underneath your original text, you can use these constants to attach various elements to your e-Newsletter.

51

Type @@articles@@ into the content. Scroll down to the drop down menu beside Attach Article and select your article of choice.

Save your work. We can now SHOW or preview our e-Newsletter with attached article.

52

You can brighten your article up by choosing a different display mode. Default is set at words but you have the option of a small picture or large picture display. These can be changed in: o SET UP - Site Layout - Manage Homepage Article Display Style

If you choose to change your article display style you will then have to go back to your article and insert an image in the corresponding area.

53

Now that we have changed the display style to small pic and added our small image into the corresponding area, we will also attach the calendar to our newsletter. Edit your mail. Underneath the code for attaching your article, copy and paste the link to events code.

Save your work and SHOW.

The next time you send your e-Newsletter out you may not want to attach an article, simply deselect the article. There is no need to delete the article code [@@article@@], it will not attach an article unless one is selected. 54

Viewable PDF Newsletter - Scribd

Traditionally schools create their newsletter as a pdf and load it onto their site. This method has been used for many years and you might not be ready to ditch this just yet but you are ready to take a baby step forward. You can load your newsletter as a viewable PDF on your site this means one less click for your audience. What is offers you is a lot more information in regards to your newsletter! You can see how many people have opened the newsletter and when information that may surprise you! You can also see the average time spent reading the newsletter, whether the newsletter was shared using social media and much more.

Step 1: Loading your newsletter using Scribd

1. Create your newsletter and save it as a PDF. 2. www.scribd.com (Create an account its FREE)

3. Once logged in, click on the UPLOAD button and browse your computer for the file.

55

4. While your file is uploading you can give it a title and description.

5. Once it is loaded and converted (approximately 3-5 minutes depending on size of newsletter) you will see a preview on the left. Click on Preview in a new tab for more options

6. You will see this screen, click on Embed

56

7. Copy the code from the embed field.

8. Go to your CMS and edit the page you wish to display your PDF newsletter and click on the HTML button.

9. Paste the HTML code into the page.

57

10. Update your page and visit your site to see your newsletter in its glory!

Scribd Analytics
You can login to scribd at anytime to view some analytics in regards to the readership of your newsletter.

58

Keeping your Scribd Newsletters tidy

Having a viewable PDF newsletter is a great idea, however when you are ready to publish your next newsletter, we suggest you remove your last Viewable PDF. You might not be ready to hit the delete button yet so you can create an archive of these newsletters in a section on the newsletter page. 1. Create a section called Newsletters and type in the name of your existing newsletter. 2. Hyperlink this name to your uploaded newsletter (via Media folder or easy upload). 3. Delete your Scribd newsletter from your page (select it all and hit delete/backspace). 4. Load you new newsletter into scribd and your site! 5. It will end up looking something like this:

59

e-Newsletter using Articles

Traditionally schools have been creating their newsletter using Word or Publisher and then converting it to a PDF. The PDF is then pasted onto the website. Whilst this step is a move away from distributing paper newsletters which saves money, time and the environment, many schools still complain that their newsletter readership is poor. We know why. Have you ever tried reading a PDF newsletter on a computer? Invariably people print them if they can find them which knocks out the sustainability feature of going electronic. Have you ever tried reading a PDF on a mobile phone? Next to impossible. The answer is to present your content in little bit size chunks allowing people to find the content most relevant and then if they are interested, they read more for the full article. Have a look at how a newspapers website looks for a clue. Our ambition for schools is to write everything in the website so only one publishing medium is used. Today youre managing two; creating your newsletter in Word and then updating the website. But even if you dont want to drop your paper based newsletter, you can begin by using some of the smarts in your sponsor-ed Generation 2 website. Use the Articles feature. Articles on your homepage are for displaying recent news and should be updated regularly. You can work on your articles throughout the week because articles can be created and marked as drafts so that they are not viewable on your site until you are ready to send out your e-Newsletter.

60

Articles is the content that appears on your homepage under Recent News. Whatever you write there can be automatically copied into your newsletter to look like the sample further below.

Articles

Sample of e-newsletter with content automatically lifted from homepage Articles

61

Create your articles

WEBSITE CONTENT o Articles As mentioned previously, mark your article as a draft if you are not yet ready for it to be published.

62

You can brighten up your articles by attaching an image for each article decide which option you prefer, small picture or large picture (must be the same for all articles) and insert your images in to the corresponding area.

You will also have to change this option for your site: SET UP - Site Layour - Manage Homepage Article Display Style

63

Launch e-Newsletter with Articles

Once you have created all your articles, it is time to launch your e-Newsletter. COMMUNICATE Newsletters Add Mail To attach articles as your main newsletter: 1. In the content box type your e-newsletter welcome and then: @@articles@@

2. Select all the articles you wish to add using the attach articles menu. To select more than one article you will have to hold down the shift key. 3. Select the group/s that you will be sending the mail to, and save.

64

Preview your e-Newsletter

65

And here is one without images:

66