Sorting data from a Google sheet in a webpage

We were asked if it was possible to import data from a Google Sheet in to a webpage that would allow the user to sort the data. The idea was that staff could go on to the webpage, check their data, email any amends back to the administrators, which could then be changed on the Google Sheet and would then appear live back on the webpage.

Database in a webpage

Database in a webpage

Sorted data

Sorted data

We found a solution someone had posted on a blog and modified it for our own use. Unlike other Google Sheet Add-ons this one requires some knowledge of HTML, the will to edit PHP and the software to edit and upload the pages to a server. It’s not for the faint-hearted, more a tutorial to refresh our own memory and show what can be done with Google Sheets.


If you want to try this yourself here goes.

Firstly, create a Sheet on your Google Drive and import your data in to it. This may already be in an Excel document which you can just cut and paste into a Google Sheet.

If you want the data to be visible to anyone make sure you set the sharing permissions to ‘Public’. Otherwise you will have to put a reminder on your webpage that users should be logged in to the Universities system before they can see the data.

Next create a web page in a software package such as Dreamweaver. I created a framework using the code (HTML), stylesheets (CSS) and script s (js) that is used by the main University website to keep the university branding. When you have created your page, save it to your computer as a PHP file.

Remember to add a refresh button so that the full database can be reshown after a search has been made.

Save your file as a PHP document

Save your file as a PHP document

Go back to your Google Sheet and click on ‘File’, in the dropdown select ‘Publish to web’.

In this dialogue box copy the ‘Document link’ code and paste it in a text editor such as notepad. The code will look similar to that below.

https://docs.google.com/spreadsheets/d/1BgPLV5LIoBe8c2pGwOL_W2XZUhckL-pjEdDPYc3GVmk/pubhtml

The part of the code you will need later is highlighted in red. This is the unique reference code for your Google sheet.

Next, where you wish the database to appear on your page copy in the following PHP code.

<!– CODE STARTS  –>

<?php
$search= $_REQUEST[‘search’];
if ($search > ”){ $search = $search;} else { $search = ”;}
?>

<script type=”text/javascript” src=”http://www.google.com/jsapi”></script>
<script type=”text/javascript”>
google.load(‘visualization’, ‘1’, {packages: [‘table’]});
</script>

<script type=”text/javascript”>
var visualization;

function drawVisualization() {
var query = new google.visualization.Query(

‘https://docs.google.com/a/my.shu.ac.uk/spreadsheet/tq?key=1BgPLV5LIoBe8c2pGwOL_W2XZUhckL-pjEdDPYc3GVmk&hl=en_GB’);

 

query.setQuery(‘SELECT A, B, C, D, E, F, G, H, I, J, K, L, M, N, O, P, Q, R, S, T, U, V, W, X, Y  where upper(A) like upper(“%<?php echo $search; ?>%”) or upper(B) like upper(“%<?php echo $search; ?>%”) or upper(C) like upper(“%<?php echo $search; ?>%”) or upper(D) like upper(“%<?php echo $search; ?>%”) or upper(E) like upper(“%<?php echo $search; ?>%”) or upper(F) like upper(“%<?php echo $search; ?>%”) or upper(G) like upper(“%<?php echo $search; ?>%”) or upper(H) like upper(“%<?php echo $search; ?>%”) or upper(I) like upper(“%<?php echo $search; ?>%”) or upper(J) like upper(“%<?php echo $search; ?>%”) or upper(K) like upper(“%<?php echo $search; ?>%”) or upper(L) like upper(“%<?php echo $search; ?>%”) order by A asc label A “Course”, B “Course Code”, C “Department”, D “Course Leader”, E “CL Ext”, F “CL Email”, G “Student Support Officer”, H “SSO Ext”, I “SSO Email”, J “Student Administration”, K “SA Ext”, L “SA Email”, M “Fees”, N “Professional Bodies”, O “Field Trips”, P “14/5 Tgts Home Y1”, Q “14/5 Tgts Oseas Y1”, R “14/5 Tgts Home Y2”, S “14/5 Tgts Oseas Y2”, T “14/5 Tgts Home Y3”, U “14/5 Tgts Oseas Y3”, V “14/5 Tgts Home Y4”, W “14/5 Tgts Oseas Y4”, X “Assessment”, Y “Notes”‘);

query.send(handleQueryResponse);

}

function handleQueryResponse(response) {
if (response.isError()) {
alert(‘Error in query: ‘ + response.getMessage() + ‘ ‘ + response.getDetailedMessage());
return;
}

var data = response.getDataTable();

visualization = new google.visualization.Table(document.getElementById(‘table’));

visualization.draw(data, {legend: ‘bottom’});

}

google.setOnLoadCallback(drawVisualization);

</script>

<!– CODE ENDS  –>


 

There are two parts of the code you need to modify. Firstly your unique key needs to be pasted in to the code, marked up in red. Secondly the search criteria needs to be amended to reflect your data and search on the fields you wish to interrogate, marked up in blue.

In my data I have 25 columns A through to Y, all of which are displayed on the webpage and can be searched. You do not have to display and sort all of the fields.

The search code is broken down in to three sections.

(‘SELECT A, B, C, D, E, F, G, H, I, J, K, L, M, N, O, P, Q, R, S, T, U, V, W, X, Y (Selects columns)

where upper(A) like upper(“%<?php echo $search; ?>%”) or upper(B) like upper(“%<?php echo $search; ?>%”) or upper(C) like upper(“%<?php echo $search; ?>%”) or upper(D) like upper(“%<?php echo $search; ?>%”) or upper(E) like upper(“%<?php echo $search; ?>%”) or upper(F) like upper(“%<?php echo $search; ?>%”) or upper(G) like upper(“%<?php echo $search; ?>%”) or upper(H) like upper(“%<?php echo $search; ?>%”) or upper(I) like upper(“%<?php echo $search; ?>%”) or upper(J) like upper(“%<?php echo $search; ?>%”) or upper(K) like upper(“%<?php echo $search; ?>%”) or upper(L) like upper(“%<?php echo $search; ?>%”)  (makes columns searchable)

 

order by A asc label A “Course”, B “Course Code”, C “Department”, D “Course Leader”, E “CL Ext”, F “CL Email”, G “Student Support Officer”, H “SSO Ext”, I “SSO Email”, J “Student Administration”, K “SA Ext”, L “SA Email”, M “Fees”, N “Professional Bodies”, O “Field Trips”, P “14/5 Tgts Home Y1”, Q “14/5 Tgts Oseas Y1”, R “14/5 Tgts Home Y2”, S “14/5 Tgts Oseas Y2”, T “14/5 Tgts Home Y3”, U “14/5 Tgts Oseas Y3”, V “14/5 Tgts Home Y4”, W “14/5 Tgts Oseas Y4”, X “Assessment”, Y “Notes”‘); (adds headers on the spreadsheet)

If your sheet only has 6 columns you would only need

(‘SELECT A, B, C, D, E, F

Likewise

where upper(A) like upper(“%<?php echo $search; ?>%”) or upper(B) like upper(“%<?php echo $search; ?>%”) or upper(C) like upper(“%<?php echo $search; ?>%”) or upper(D) like upper(“%<?php echo $search; ?>%”) or upper(E) like upper(“%<?php echo $search; ?>%”) or upper(F) like upper(“%<?php echo $search; ?>%”)

and

order by A asc label A “Course”, B “Course Code”, C “Department”, D “Course Leader”, E “CL Ext”, F “CL Email”‘);

If you only need to see five of the six columns delete the code relating to that column, such as B in all three parts. Likewise for four, or three etc…

In the third part of the code the text between the quotation marks “xxxxxx” is the text for the headers on each column. This can be edited to reflect your data.

Once you have amended your page upload it to your server (It will not work on a local machine unless it is set up to be a test server).  When you update the Google sheet any amends will be reflected on the webpage.


Sorting data from a Google sheet in a webpage – another way

There are other ways to achieve the same result. Instead of using PHP and server-side scripting you can use Twitter Bootstrap and and JQuery to achieve the same result, in fact it displays the data in a better format, especially for data-tables that have only five or six columns.

Once again, this isn’t ideal for a novice as you will need to edit the Javascript in one of the files. The beauty of this code is that you can decide how many rows are displayed on the page, the data will automatically adjust itself as you type in the search box and removing all the text in the search box returns the data to the table, without you having to make a request or refresh the database. An example of what it looks like can be seen below.

Data displayed in the JQuery table

Data displayed in the JQuery table

Webpage showing just ten lines of data per page

Webpage showing just ten lines of data per page

Alternatively, is this is something you’d like to develop email j.ruffell@shu.ac.uk and we can discuss your requirements.

If you want to give this way a go you can download these source files to see how it works from Github.

Posted in E-Learning, Google Apps | Tagged , , , | Leave a comment

Creating Infographics

Infographics

Infographics are a graphical representation of data. They are a great way to display information to make connections between different statistics. There are several online sites that allow you to create your own infographic. They include a range of tools to add charts, pictograms, icons, text and images.

The basic, free service, of online sites only gives you access to a few templates, but with a bit of creativity they can be modified to create a wide range of graphical options.

Two of the best and easiest services to use are:

Piktochart

http://piktochart.com/

The free version of Piktochart allows you to download your infographic as a low-res Jpeg or PNG or share it on social media. It can also be embedded within a Blackboard site within an <iframe>.

Piktochart

Piktochart

Venngage

https://venngage.com/

The free version of Venngage only allows you to share your infographic via social media.
As with all free software, any infographic you create will be visible to everyone so any sensitive data should not be included.

Venngage

Venngage


To create your own infographic go to either site and register for a free account. Then pick a template to start creating. Either a blank canvas or one of the free templates.  The tools available are self-explanatory and easy to use. You can upload your own images or charts or create them using the inbuilt tools.

Create your infographic using the online tools

Create your infographic using the online tools

It is advisable to have all your data to hand before starting work to speed up the process and allow you to create suitable charts.

Piktochart has the most features available to the basic user.

Data can be imported to create a chart. This can be from either a .csv or.xslx file. This means that once your data has been organised in spreadsheet it can be uploaded without needing to be re-input.

Download infographic as a Jpeg or PNG

Download infographic as a Jpeg or PNG

Once completed your infographic can be downloaded as Jpeg or PNG file. More options are available in the Pro version of the software.

You can publish your infographic so that it can be embedded in to Blackboard

You can publish your infographic so that it can be embedded in to Blackboard

Infographics created in Piktochart can be published and embedded in to a Blackboard site by the use of an <iframe>.

Below is are examples of  infographics made in Piktochart.

Infographcis

Infographcis

Posted in E-Learning | Tagged , , | Leave a comment

PowerPoint – importing slides into a Master Slide template

PowerPoint – importing slides

(Information adapted from office.microsoft.com)

How do you give your PowerPoint presentation the theme of a SHU Master Slide?

You can format your slides by importing them into your Master Slide presentation. Do the following:

Begin by opening the presentation that you want to add a slide to – e.g. your Master Slide Template.

1.  On the Home tab, click the arrow next to New Slide.

2.  Below the layout gallery, click Reuse Slides.

1.PowerPoint crop

3.  In the Reuse Slides task pane, under Insert slide from, click Browse to find the presentation or slide library that has the slides you want. Then click the arrow to open those slides in the task pane.

4.  When you find the slide you want, take notice of the Keep source formatting check box, at the very bottom of the pane. If you want to retain the exact look of the slides you’re inserting, be sure this check box is selected before you insert the slide. If you don’t select Keep source formatting, the inserted slides inherit the look, or theme, that your current slides use, (which is what you want if you are using a Master Slide Template).

5.  Click each slide you want to insert. Each one is copied into the open presentation, below the currently selected slide or below your cursor, if you’ve positioned it beneath a slide thumbnail.

6.  To add all of the slides, right-click any slide, and then click Insert All Slides on the shortcut menu.

2.PowerPoint crop
Please find links to SHU PowerPoint Master Slide templates that you can download below:

(Created by Jason Ruffell)

Slide_Master_White

Slide_Master_Dark 

Slide Master White Alternative

Slide Master White Alternative 2

Posted in E-Learning | Leave a comment

Deconstructing a PowerPoint

Have you ever wanted to deconstruct a PowerPoint? To be able to extract all the images and embedded multi-media resources, videos and audio. Here’s a way that you can easily get access to all the materials.

1. Create a copy of the presentation you wish to deconstruct.

Copy the PowerPoint file

Copy the PowerPoint file

2. Change the file extension name from.pptx to .zip

Change the extension to ZIP

Change the extension to ZIP

3. This will create a ZIP folder.

4. Open the folder and you will see a range of sub folders.

Open the ZIP file

Open the ZIP file

5. Click on the ppt folder and then on the media folder and all the embedded media and images will be accessible.

6. Copy these resources in to a new folder and they are ready to re-use.


But what about YouTube videos?

YouTube videos are not embedded within a PowerPoint, they are streamed in from the YouTube server and so will need linking separately. But how do you find out the links to videos that have been inserted in to a PowerPoint?

This is my solution as I haven’t been able to find an easier way. If anyone has a better way please let us know.

Firstly follow the instructions above, steps 1 to 5. Instead of opening the Media folder click on the slides folder instead. Drag this folder out of the ZIP folder so that you can open the documents.

In the slides folder there will be a series of .xml files. There is one for each slide in the presentation.

Open up a text editor such as notepad (PC) or TextEdit (Mac) and go to file and open. Navigate to the ‘Slides’ folder. When you get to the folder nothing will be visible apart from a folder called _rels. In the text editor ‘open’ dialogue box select ‘All files’ and the xml files will become visible.

Open an XML file

Open an XML file

Open the slide(s) corresponding to the slide(s)on which you have placed the videos(s) on. A whole load of code will be displayed. Copy this and paste it in to a Word Processor such as MS Word as this will make it easier to work with.

It may look daunting and a load of non-sense but all we are after is a small snippet of code which points to our video.

The piece of code we are looking for is marked up in yellow and the piece we need is highlighted in red.

XML code opened up in Notepad

XML code opened up in Notepad

Open up any video in YouTube and click on ‘Share’ and then ‘Embed’. If you are embedding the video in to Blackboard use the new embed code <iframe>, if PowerPoint the old <object> code.

New Code

<iframe. width=”560″ height=”315″ src=”//www.youtube.com/embed/cbd21dGAPMM” frameborder=”0″ allowfullscreen></iframe.>

Old Code

<object width=”560″ height=”315″><param name=”movie” value=”//www.youtube.com/v/cbd21dGAPMM?hl=en_GB&amp;version=3″></param><param name=”allowFullScreen” value=”true”></param><param name=”allowscriptaccess” value=”always”></param><embed src=”//www.youtube.com/v/cbd21dGAPMM?hl=en_GB&amp;version=3″ type=”application/x-shockwave-flash” width=”560″ height=”315″ allowscriptaccess=”always” allowfullscreen=”true”></embed></object>

The code we have copied in the xml file will need to replace the code highlighted in the embed code.

The <iframe> code will work in Blackboard. The old embed code will need a little tweaking for it to work in PowerPoint. Click here to download a help sheet on how to do this. Embedding Video in to PowerPoint

Posted in E-Learning | Leave a comment

Integrating a Padlet wall into your Blackboard site

Integrating a Padlet wall into your Blackboard site

Grab your student’s attention on your Blackboard site.

You can add functionality, interactivity and aesthetics to your Blackboard Module site by embedding iframes into it. This can include websites, Pinterest and Padlet walls.

Padlet embedded in Blackboard

Padlet embedded in Blackboard

What is Padlet?

“Padlet is a free application to create an online bulletin board that you can use to display information for any topic. Easily create an account and build a new board. You can add images, links, videos, and more.” TeachersFirst Review – Padlet

  • It is useful for collaborating and sharing ideas.
  • It can be public, or locked down with different privacy settings.

This is a screencast about using Padlet.

Why Use it?

Recently a member of staff asked for a way of having a Frequently Asked Questions (FAQ) area on her Blackboard site. The requirements were that the tool:

  • Allowed students to both ask and answer questions.
  • Encouraged everyone to contribute what they knew, not just the tutor.
  • Allowed them to post anonymously if they wished.
  • Was easy to use.
  • Looked attractive and inviting.

We thought Padlet would do the job.

How? ( do you embed a Padlet Wall into your Blackboard site).

In Padlet

  1. Open a Browser and type in padlet.com
  2. Open an account/use your existing one. (It’s free and quick to set one up).
  3. Create a Padlet Wall.
  4. Modify the settings:

a) Name: make it specific, e.g. ‘Module X FAQ’

b) Description: Leave instructions for students telling them how to use it (double-click on the wall to post), encouraging them to answer each other’s questions, and managing expectations for your involvement e.g.“I will look at the Padlet Wall regularly and post answers to your questions”.

c) Privacy: Hidden Link

d) Layout: Stream (Easier to manage within the confines of Blackboard).

e) Address: Give the wall a name that identifies it for you in your Padlet list.

Padlet privacy_layout image joined

Padlet privacy_layout image

5. Go into Share, and copy the embed code.

Share_Embed Padlet image

Share or Embed a Padlet wall

In Blackboard

  1. Create a new content area and name it suitably e.g. ‘Frequently asked questions’
  2. Build Content → Create Item within that content area.
  3. Click on HTML button and paste the Padlet Wall embed code into the HTML window.
HTML button in Blackboard

HTML button in Blackboard

4.  Amend the code so just the first section including the iframe remains; so that it will be visible on all Browsers:

Padlet embed code in iframe in Blackboard

Embed code in iframe in Blackboard

5.  Click Update and Submit.

  • Your Padlet Wall will appear, embedded in Blackboard.
  • It resizes as you expand or contract your Blackboard window.
  • To use it, just double-click on the wall, and add text and multimedia to the post.

Another way to integrate Padlet Walls into Blackboard.

Another member of staff wished to use Padlet Walls for group work for seminars.

What she wanted was a link on her Blackboard Module Site to a Padlet Wall for each seminar.

In Padlet

  1. Set up the Walls in the steps described above.
  2. Change the layout to ‘Freeform’, so that you can move posts and sort them into groups as they come in.
  3. Copy the URL of the Padlet Wall.

In Blackboard

  1. Create a new content area and name it suitably e.g. ‘Padlet Wall Links’
  2. Build Content → Create Item within that content area.
  3. Create the link in the text editor.
  4. It is also possible to add an image of the QR code (available in the Wall ‘Share’ area), but this is probably ‘overkill’ as students can just click on the link.
Padlet Wall link and QR code

QR code

Once the seminar is over you can close the Wall by changing Privacy settings from ‘Hidden Link’ to ‘Private’. This will prevent after-the-event  vandalism and unwanted graffiti.  If you want students to be able to see the Padlet Wall, but no longer write on it, you can change the Hidden Link option from ‘Can Write’ to ‘Can View’:

Hidden link can view

Hidden link can view

Posted in E-Learning | Leave a comment

Using Google Maps to display information

Google Maps can be used to plot data graphically. Custom maps can be created and data inputted to show the locations of organisations/information. Data collected via a Google Form and stored in a Google Spreadsheet can be used to populate the map.

For example, you’ve decided that you want to collect information about the various sports organisations, teams and facilities in Sheffield. The first step would be to create a Form to collect your information. Remember to have a field for the postcode (set to required) as Google Maps will use this to plot the information.

You’ve decided that you want to break down the information in three categories, venues/facilities, organisations/teams and retailers. Publish your form and contact the organisations and ask them to complete the form. Once all the data is collected, sort it in the spreadsheet and put each set of data on a different sheet.

Create your custom Google Map, and in each layer you can import your data (saving it out a separate .CSV file for each layer). The data will be mapped automatically and then you can edit the markers to suit your needs. Each layer can be turned off independently so you can see the sorted data and how they correlate altogether.

Your custom map can be embedded on a web page to make it accessible to the public if required.

Below is a guide to how to do it.


Google Maps is not available through a University account. To create a map you will need to create your own Google account.

Create your own account and go to Goole Maps and sign in (https://www.google.co.uk/maps).

In the top left-hand corner click on the search box and in the dropdown menu click on create custom map. This will open up a new window. In the top left-hand box there will be a dialogue box in to which you can edit the name of your map and add a description.

Create a custom map by clicking on the dialogue box in the top left-hand corner.

Create a custom map by clicking on the dialogue box in the top left-hand corner.

In the free version of Google Maps you can have up to three layers on a single map. You can change the name of each layer by clicking on the layer name and then editing the text. You can then upload your data to google maps. It can be uploaded as a CSV, XSLX or KML file.  Each layer will require a different spreadsheet, so organise your data beforehand. Decide what you want to be displayed on each layer and create a new spreadsheet for each.

Information can be uploaded from a Spreadsheet that is saved in either the CSV or XLSX or from a KML (Keyhole Markup Language) file format.

Information can be uploaded from a Spreadsheet that is saved in either the CSV or XLSX or from a KML (Keyhole Markup Language) file format.

In your spreadsheet you will need to create a column for the co-ordinates for each location. This can either be the postcode of the place or the longitude/latitude co-ordinates. Then create a column for each piece of data you want to appear in the dialogue box on the map.  This could be the name of the organisation, location, type, and then any other information you wish to be displayed. This will appear in a pop-up when you hover over the pin marker on the map.

When you upload your spreadsheet Google Maps will ask you to tell it which column to use to position your place marks. Use the post code or longitude/latitude column. It will then ask you for the column to use for the title of each place marker. Pick the column that defines the location. Google Maps will automatically add your place marks on the map.

Select the location column…

Select the location column…

... then the descriptor for the pin.

… then the descriptor for the pin.

The location markers will then show up on your custom map.

The location markers will then show up on your custom map.

In the dialogue box you can then alter the style, data and labels that appear on the map. New locations can be added by clicking on the data tab, right clicking on the table that appears and then inserting a new row. You can alter this for each layer. The paid version of Maps allows you to have up to ten layers and 10,000 lines in each spreadsheet.

Boundaries can also be drawn on the map to define areas and give your map an extra dimension.

Google Maps can also be embedded in a webpage. Make sure that before embedding, the privacy is set to Public, on the web.

An example of a custom map embedded on the Nutrition societies' page. Note that users can turn on and off different layers to display the information they require.

An example of a custom map embedded on the Nutrition societies’ page. Note that users can turn on and off different layers to display the information they require.

 

Posted in E-Learning, Google Apps | Tagged , , , | Leave a comment

SEO Good Practice – Submitting your site to Google and Bing (Yahoo) for indexing.

Submitting your site to Google and Bing (Yahoo) for indexing.

It is a good idea to create a sitemap and submit your site to both Google and Bing to make sure that your site is indexed correctly and appears in their search. Google and Bing will both attempt to index your site, however it doesn’t hurt to submit them manually to be sure they are added. This can be done by creating an XML site map, uploading it to your site and submitting it to both search engines.


Creating an XML sitemap

First, you’ll need to create an XML site map. Go to: http://www.xml-sitemaps.com/ . This site will allow you to create a free sitemap for a website that has less than 500 pages. In the site map generation box type in your site address, you can ignore the other settings, then press ‘Start‘.

Create an XML Sitemap

Create an XML Sitemap

A variety of different site maps will be produced. You will need to download two, the sitemap.xml and sitemap.html. Choose the uncompressed versions if your site is not very large.

Open up your ftp client and put both files in your root folder. The xml file is the one that will be used by both Google and Bing to index your page. The HTML version is useful to have in case you want to create a sitemap that users can see.

It is also an idea to create a .txt file called ‘robots‘ which points to the xml file so that other search engines can find your sitemap. Below is the text that needs to be added.

user-agent: *
Disallow: /modules/
Disallow: /plugins/
Sitemap: http://www.site-url-in-here/sitemap.xml

Create a new file in notepad called ‘robots’ and add the text above, remembering to change the sitemap address, save it, and upload this file in to the root folder as well.

The next step is to register your site with both Google and Bing.


Registering with Google

Go to http://www.google.com/webmasters/ and create a new account if you do not have a Google account, if you do, login with your normal Google username and password.

Register with Google's Webmaster tool

Register with Google’s Webmaster tool

Once on the dashboard, click on ‘Add a site‘. Type in your URL and press continue. You will be then be asked to verify that you own this site. There are several ways to do this, but the easiest way is to download the Google code which in an HTML file. This is just for verification purposes. Upload (via ftp) this HTML file in to the root of your website then click on verify. Google Webmaster will look for the file and will allow you to proceed if it finds it. Alternatively you can download the code and put it in a meta-tag in the head of your homepage (index.html), see below for an example.

<meta name=”google-site-verification” content=”9qZAUwh2Oyl8xN5M7OErCF9Q2WnlI3HMRz5dn-0jmEE” />

You will then need to link your XML sitemap which you have already uploaded.
In the dashboard click on the site you wish to submit the sitemap for. This will take you to a new page. Click on the ‘Sitemaps‘ tab. This will take you to a new page. On this page click on ‘Add/Test sitemap‘, the red button in the top right-hand corner. Add the name of the sitemap, which will be something like, sitemap.xml, and then click on submit sitemap.

Your site has now been registered with Google. It may take a few days to be indexed so check back later and look at the other options the Webmaster tools give you.


Registering with Bing (Yahoo)

Go to: http://www.bing.com/toolbox/webmaster and create a new account if you do not have one. In the dashboard type your URL in the ‘add-a-site’ box and click ‘Add‘. You can then download a Bing authorisation code (BingSiteAuth.xml). Upload (via ftp) this XML file in to the root of your website. Click on verify so that Bing knows that you are the owner of this site and then go back to the dashboard, ‘My sites‘ and click on your website.

Register with Bings' Webmaster

Register with Bing’s Webmaster

In this dashboard, click on ‘Submit a sitemap’, and enter the location of your sitemap which will look something like this: http://www.your-web-site.com/sitemap.xml

Click ‘submit‘ and your sitemap will be indexed with Bing. Again, like with google it may take a few days to be indexed.

Whilst both Google and Bing may automatically index your site it is good practice to manually add them to make sure. It doesn’t take long. Plus you will get the added benefit of being to analyse the data they collect.

Posted in E-Learning | Leave a comment

Collecting information via a form embedded on a website

Collecting data via a form is easy enough to do. Google forms can be embedded in to any webpage that supports iframes. This includes stand-alone HTML pages, WordPress sites and most Content Management Systems (CMS).

Once you have created your Form go to ‘File’, then ‘Embed’. In the new dialogue box you will be presented with your iframe code which will look something like this:

<iframe src=”https://docs.google.com/a/my.shu.ac.uk/forms/d/
1RLJH9Oz5CNOj9geucsIYqLXexoG262RkM1V_ySEEPYs/
viewform?embedded=true” width=”760″ height=”500″ frameborder=”0″ marginheight=”0″ marginwidth=”0″>Loading…</iframe>

Copy and paste this code in to your HTML code or code editor within your site. The width and height of the iframe may need altering to get the form to fit nicely on your page depending on how long or short your form is.

Any updates you make to your from will automatically be reflected on your site. Any data entered will be input directly to the corresponding Spreadsheet.

Copying the iframe code

Copying the iframe code


Eat Sheffield  – A case study

The East Sheffield awards are run every year to acknowledge the best independent restaurants, cafes, pubs and food and drink retailers in Sheffield and the surrounding area. Several of the categories are open to a public vote.

The Eat Sheffield Site was developed in WordPress, it lists the independent retailers that make the Sheffield food scene the success that it is. This meant embedding the Forms iframe was easy.

Google Forms were used to collect the public votes. Five Forms were created, each with a drop down selection of all the restaurants/organisations in that category. The lists were generated from the organisations listed on the Eat Sheffield website. A free text area was also included in each form to collect any nominations that were not included on the lists. These organisations, if they met the Eat Sheffield criteria were then contacted to see if they wished to be included on the site.

Eat Sheffield Website

Eat Sheffield Website

Five forms were embedded on a single page within the site to collect votes on the five categories the public could vote for, Great Restaurants, Great Cafes, Great Traditional Pub, Great Food – Retail & Producer and Best Event. Each form was linked to a different Sheet so that the votes could be easily counted.

The winners were notified and invited to an awards ceremony in October.

Posted in E-Learning | Leave a comment

Mobile Apps? Tablets in the Classroom? What App?

sea of ipads

 Is this what you see when you look at your students?

Do you want to utilise more mobile technology in the classroom?

 

Following the introduction of iPads into the classroom for academic year 2013/14, we now have a significant number of iPads available for this academic year for loan.

Why not book in with the TEL team for a 1-2-1 tutorial to see how you could utilise iPads in the classroom?

What App?

Choosing the right app to engage / capture students and activity in the classroom can be tricky. To help you with this process We have developed a catalogue of Apps, for a range of uses (as categorised below). This is not an exhaustive list, however it is designed to give you a flavour of the different applications that can be used to achieve an output from the below categories. Click here to see our guide

I have also found the below adaptation of Bloom’s Taxonomy Wheel – updated to include a myriad of apps capable of delivering a certain function or learning outcome. 
ipad bloom

 

Posted in E-Learning | Leave a comment

An Introduction to Sheets and Forms

A Google Spreadsheet is a great alternative to Excel.  it is also cross compatible . You can copy data out of excel and add it in to a spreadsheet and you can also download a Google Spreadsheet as an .xlsx file. A Google Spreadsheet is created within your Google Drive. A spreadsheet can be shared with others and collaborators, given access, can also work on the document.

This post is a brief overview of how Google Spreadsheets and Forms work with each other and in follow-up posts we shall delve deeper in to the other aspects that give a spreadsheet and any attached Forms greater functionality.

These include:

  • Collecting information via a form embedded on a website
  • Installing the Flubaroo ‘Add-on’ to create and automatically grade a quiz
  • Using the ‘Add-on’ script editor to create a form that automatically emails the user and other recipients the data that has been entered
  • Adding data on to a Google Map
  • Generating live data from a spreadsheet within a webpage that is also sortable
An example of a set of data in a Google Spreadsheet

An example of a set of data in a Google Spreadsheet

To create a Form or Spreadsheet, go to your Drive and click on the red create button in the top of the left hand column. A new Form , Spreadsheet, or both will appear in your Drive.

When data is entered in to a form the spreadsheet is automatically updated. Forms can be used to collate data or as a quiz to test student’s knowledge. When you create a Form a related Spreadsheet is generated automatically. You can un-link the Form and Spreadsheet and get the Form to link to a new spreadsheet or a new sheet within a Spreadsheet.

To change the destination of the data, in the Form click on ‘Responses’, then ‘Change response destination’.

Forms and Sheets

How to change the response destination of a Google Form

In the new dialogue box, select ‘New Spreadsheet’ and then type the name you wish to give the new Spreadsheet. Alternatively you can get the data to be added to a new sheet on an already existing Spreadsheet.  Click on this option and you will be asked in to which Spreadsheet you want the new sheet to be created.  Select your destination and your data will appear in a new sheet.

To un-link a form from a spreadsheet, in the Form, click on ‘Responses’ and them in the drop-down, ‘Unlink Form’. If the form is not turned off people can still enter responses which will be logged but not stored anywhere you can view them. To view them you need to link them to a Spreadsheet.

This post has been a basic overview of using Sheets and Forms. In the next post we will look at the more advanced features available.

Posted in E-Learning, Google Apps | Tagged , , , , | Leave a comment