Category Archives: Uncategorized

School Websites

I recently updated the website for a school I work with so thought I’d share how it works so others can copy what I think are its nice features and hopefully I’ll get feedback to make it even better. Maybe take a quick look at the site before reading on: belgroveseniorgirls.ie

We’ve had a WordPress website up since 2008 but its theme wasn’t particularly nice and when we looked at the analytics, we found that 40% of traffic is now mobile. I took it as an opportunity to find a responsive theme and brighten things up. After a quick Google search I found the Romangie theme and I started a child theme in my WordPress install, changed the colours to suit the school’s own and created a new page template for our homepage.

I’ve tried to make everything as functional as possible – almost everything on the homepage is a link – and keep with UX conventions. The school name links back to the homepage from every page. The school address is a link to Google Maps and the email address is naturally a mailto: hyperlink. When viewed on mobile, the phone number is clickable to call the school. I’ve also used some CSS – white-space: nowrap – to ensure the phone number never breaks onto two lines on narrower screens and the same with “Dublin 3”.

School Name and Contact

(I assume) these three pieces of information are what a significant number of parents are coming to the website to find so I’ve added the meta description tag so this information shows up in Google search results.

Google search result

The banner photos should be clickable to show the photos full size but that’s yet to make it to the top of the list! The main page template is afterwards just three widget containers.

The first column contains the Simple Google Calendar Widget and Simple Twitter Tweets plugins. The calendar widget is very heavily customised by me and I’ve yet to have the time to share my changes with the original author. To update the content, the principal or secretary just has to add the event to the shared Google Calendar.

Simple Google Calendar Widget

The title is a link to the full calendar page on the website which contains the school holidays as sent home at the beginning of the year and the full Google Calendar embedded below. In the homepage widget, if a calendar entry has a hyperlink as its description, the title links to that page, typically a notice that has gone home to parents. The dates are links to the individual Google Calendar entry so parents can quickly save it to their own calendar. When the website is viewed on mobile, a “Subscribe to Calendar” link appears.

Individual Calendar Entry

Simple Twitter Tweets does exactly as expected – it displays the school’s Twitter feed. One of its primary benefits is that the principal can easily use the Twitter app on her phone to update the website. It was also a good selling point to encourage the school to start using Twitter itself!

Simple Twitter Tweets

Again, I’ve done lots to customise it. The title links directly to Twitter and the timestamps link to the individual tweets. In this case, I’ve sent pull requests to the original author so hopefully all my changes will be included in the next version. It’s quite frustrating when updates come out for plugins I have customised because they will overwrite any changes I have made.

I’ve put a shortcut on the principal’s desktop and phone’s homescreen to https://mobile.twitter.com/compose/tweet which I figured is the quickest route to updating after dismissing a number of desktop clients that have too many features for our need.

Update Twitter

The second column contains the Category Posts widget, used three times, which we’re using to neatly display the most recent notices, newsletters and class blogs. I’ve made changes to the plugin to allow the option of showing the author’s name in the list; allow different date formats, e.g. the newsletters only need the month shown; turn the date into a hyperlink; and to allow selecting empty categories for the plugin, e.g. there’s a Book Club widget on the page ready for the first post. I’ve some pull requests for these accepted and some debated, hopefully they’ll all be accepted.

Category Posts Widget

For posts to appear in the correct section, they need to be categorised properly. This needs to be made a little easier for the teachers. WordPress, under Settings, Writing, allows a site-wide default category, but I have added the Default Category plugin so I can have teachers’ posts default to Class Blogs and the principal and secretary’s posts default to Notices.

The third column uses standard WordPress menus (configured under Appearance/Menus) but I needed the Better Menu Widget to get everything appear as I wanted, particularly around the booklists and agreement form links. This plugin also enabled setting the title to a link, which made sense in two of its three uses.

Better Menu Widget

The links in the third column are in a collapsed menu at the top of every other page, but for the homepage I was trying to make everything as easy to find as possible.

We also have Google Analytics in the footer so we can determine what links parents want to see (the calendar!). While there are plugins for setting this up, I just edited the theme’s footer.php file and copied and pasted in the JavaScript provided by Google. On a typical weekday the website gets around 30 visitors (there are just over 400 students in the school).

We have disabled comments across the entire site. For future posts this can be done under Settings, Discussion, unselect the Allow people to post comments on new articles option. For existing posts, under Posts, select all posts, choose Edit under Bulk Actions and toggle Comments to Do Not Allow. For the sake of appearance, I have edited the theme’s single.php to remove any mention of comments below each post.

I have effected single sign on for the teachers by hooking into our Google Apps for Education setup. We have Google Apps Directory Sync and Google Apps Password Sync on the domain controllers in our school so teachers can sign into Google using the same username and password they use for the school computers. Then I’ve used the Nextend Google Connect plugin for WordPress to allow account creation and login based on Google authentication. I’ve had to edit the plugin to only allow users from our school domain to sign up.

Nextend Google Connect

To improve the ease of writing posts, I’ve installed the Image Elevator plugin which allows pasting images directly into posts. In our case, the principal writes the newsletter in Word and to get the pictures into WordPress I previously had to save each image and upload them. Now it’s effortless!

I’ve also customised the 404 page to use Google Custom Search in an effort to find what the user was looking for.

Google Custom Search

While it’s taken a long time to get this far, there’s still more I’d like to do. One project in progress is to determine when the school photocopier has copied something >40 times and notify someone to ensure it gets added to the website. Eventually, I’d like the Newsletter section replaced with a Principal’s Blog which would then be the source for the printed newsletter’s content. In the past I looked into the Postie plugin to allow the principal post to the website by just sending an email. Unfortunately the plugin didn’t work on the hosting we were using at the time and I haven’t had time to revisit it. Teachers haven’t been overly fussed about writing a class blog. I’ve given them each printed instructions and a quick walkthrough at a staff meeting, but I think showing each teacher individually would increase the uptake.

I hope you found this useful. I’m curious to learn others’ tweaks to WordPress. I’m sure there are some other nice touches I could add to make this one better for parents and staff.

Advertisement

Enable SafeSearch Chrome Extension

The web-filter provided to all schools in Ireland enabled, this September, a check on all web-searches to force users to enable SafeSearch in Google, YouTube and Bing. It didn’t enable it for them, just prevented searches when it wasn’t enabled, so when teachers and students tried to use “the Internet” I began to get calls telling me “the Internet’s not working”. In fairness to the PDST, the instructions were fairly (though not completely) clear on the error page. When asked to help people remove this warning, I had to creatively re-word the actual error message so as not to appear condescending when instructing them:

You have attempted to perform a search without enabling SafeSearch.
Click here to modify your search preferences ensuring that you click the Save button.

I say the message wasn’t completely clear because of the reference to YouTube when users were performing any search:

Screen Shot 2014-12-11 at 19.43.26I printed out an explanation of what was happening and gave it out to many teachers, posted it on the noticeboards and shared it online. Still, I knew an extension could probably be written to fix it. There was one in the Chrome Web Store, SafeSearch ParentsAround.com, but it didn’t work to convince the PDST filter that SafeSearch was on. I believe it works by adding &safe=active and &vm=r to any search URLs. There’s also a Chrome Group Policy SafeSearch option that I tried but was ineffective:

Chrome Group Policy SafeSearch OptionThe Chrome extension I wrote is available at https://chrome.google.com/webstore/detail/force-safesearch/obnpnngcaflompjfnafkfghiikokkapc

And its code is on GitHub at https://github.com/BrianHenryIE/EnableSafeSearchChrome

Its function is quite simple: in the background, it loads the settings page for each search engine, finds a unique id for the user, then sends that along with an ‘on’ setting back to the search engine which returns the necessary cookie. It was quite easy to determine what was going on by using the network tab of the Chrome developer tools.

Chrome Developer ToolsTo get the extension onto users PCs, assuming you have a Windows domain, use Group Policy to deploy the Google Chrome for Enterprise MSI, then add the policy templates (ADMX), and configure the ExtensionInstallForcelist setting with the value:

obnpnngcaflompjfnafkfghiikokkapc;https://clients2.google.com/service/update2/crx

The first half is the extension id and the second half is the Chrome Web Store update address. Entering it in the GPO looks something like this:

Force Install Extension GPO SettingAnd the GPO itself afterwards:

Google Chrome GPOIf you’re already force-installing extensions like this, you’ll have to deploy both from the same GPO or only one will install (the first one encountered during Group Policy processing). I’ve filed a bug to report this, as it’s defeating the “group” part of Group Policy.

What this doesn’t do is lock SafeSearch which would require signing into a Google account in the browser, enabling SafeSearch and then logging out. It does load, i.e. re-enable, each time the browser is opened. Lock SafeSearch isn’t important in terms of the PDST block.

I think related to the PDST being unable to turn on SafeSearch was the “SSL search is off” notification that would accompany Google searches. I guess they were disabling SSL search so they could check for SafeSearch.

SSL Search is offIn October, Google published An update to SafeSearch options for network administrators which said it would be possible to require SafeSearch on SSL searches. A linked article explains a way to use DNS to use SafeSearch servers instead of the usual google.com searches:

To force SafeSearch for your network, you’ll need to update your DNS configuration. Set the DNS entry for http://www.google.com … to be a CNAME for forcesafesearch.google.com.

I think the PDST may be testing this, as I noticed the following message this week in one school:

Your network has turned on SafeSearch to filter explicit contentAlthough SafeSearch was turned on for Google, it wasn’t automatically on for YouTube or Bing, so the extension should still be useful.

Though, who’s using Bing on Chrome?! I did look into writing the extension for Internet Explorer, and that’s probably where it would be of most use, but didn’t get close! I tried a cross-browser extension development platform called CrossRider but it didn’t work in Internet Explorer when the same code was working in Chrome. I abandoned that approach to try and understand how to write a pure Internet Explorer extension, a Browser Helper Object (BHO). Unfortunately, I’ve no experience with Windows development and haven’t had the time to really attempt this. If anyone wants to try it some weekend, I might be up for it.

The reason I haven’t bothered with Firefox is because my users are more likely to be using Chrome. Also, Firefox isn’t enterprise friendly, relatively. There is a third-party MSI available but the lack of official support led me to believe it would be more difficult to get working and it would be useful to fewer people.

At the time of writing, the extension is using jQuery to perform the calls. It could be slimmed down by using Chrome’s own JavaScript methods, though it’s only 60kb with icons included. The Bing SafeSearch is applied with the rest of Bing’s default settings so will overwrite any personalised changes there, and tbh, I haven’t fully tested its interaction with existing settings on Google, though there it should only set SafeSearch and leave any other options on the preferences page alone.

Once it was written and working for me (and deployed internally in one school which required setting up a web-server and extension update settings) I went to publish it in the Chrome Web Store. That required a small fee which took 8 hours to process. If this proves popular, I’ll updated the listing with the required promotional images. For now, the icons are from a Creative Commons search. I was looking for a safe but settled on a lock. I was also forced to select a language while configuring the entry in the store, even though there’s no UI!

That covers most of it. If it’s popular I’ll post some statistics in a few months.

Setting up a Dropwizard + Gwt:SuperDevMode project on OS X using Eclipse, Maven and GitHub

Until now, I’ve been using Gwt on App Engine, developing alone and using an old version of Firefox so I could continue using Gwt’s dev-mode. I’ve never used Maven before and it’s about time I figured out Superdevmode. Dropwizard will hopefully act as a suitable replacement for App Engine.

I’m running OS X 10.9.4.

This document could do with a lot of work, but should be enough to get anyone off the ground.  My own project that’s using this is VeinToBrain whose pom.xml you maybe want to see. The code below here is all on GitHub at https://github.com/BrianHenryIE/GwtDropwizard/

Download Eclipse

I’ve been using the 64 bit version. I’m not sure of any reason to use 32 bit unless developing apps for 32 bit computers.

  • For now, get 4.3 (Kepler) because the Google Plugin for Eclipse hasn’t been updated for 4.4 yet.
  • There’s no installer, you just drag and drop the uncompressed archive into your Applications folder.
  • For security reasons, OS X will prevent you from running Eclipse until you right-click it and select Open and then dismiss the security warning.

Eclipse Security Warning

Download GPE

As of 14 July 2014, Eclipse 4.4 has been released but the Google Plugin for Eclipse hasn’t been updated for it, so we’re using Eclipse 4.3 for now. (TBH, I’m not 100% sure GPE is even needed.)

In Eclipse, go to Help, Install New Software, paste in the following download site and select the Google Plugin for Eclipse. Don’t worry about the Gwt SDK as it’s not offering the latest version and Maven should take care of it anyway.

https://dl.google.com/eclipse/plugin/4.3

Eclipse Install New Software Menu

If you get the following error after restarting (probably a fresh install of OS X and Eclipse) you’ll need to download a newer JDK. 1.7 is ideal for this project.

Eclipse Java  Version Error

Go through the normal install process and then go to Eclipse/Preferences, Java/Installed JREs, press Search and select Java SE 7. Press edit and copy the location of JRE home. Also in Eclipse/Preferences go to Java/Compiler and set Compiler compliance level to 1.7.

Maven

Maven is a collaboration tool so required libraries are downloaded from the same source and the same build procedure (i.e. tests & compilation) is followed by each member of the team. It centres around a file, pom.xml — the project object model. When a new library is needed in the project, one member updates the pom and when everyone pulls that commit, everyone is immediately using the new library from the correct source (You can browse the jars Maven has downloaded in ~/.m2/repository/). Maven also provides Archetypes which are basically templates for projects. Download the binary .tar.gz (same as zip but better compression) from: http://maven.apache.org/download.cgi

In Finder menu Go, Go to Folder… /usr/local and make a new folder “apache-maven” and extract the archive in here. You’ll need admin permission.

Open a Terminal window, type nano ~/.bash_profile to edit the Bash profile (think autoexec) and add the following:

export M2_HOME=/usr/local/apache-maven/apache-maven-3.3.9
export M2=$M2_HOME/bin
export MAVEN_OPTS=”-Xms256m -Xmx512m”
export PATH=$M2:$PATH
export JAVA_HOME=/Library/Java/JavaVirtualMachines/jdk1.8.0_77.jdk/Contents/Home
export PATH=$JAVA_HOME/bin:$PATH

Run source ~/.bash_profile to load the changes and then mvn -v to check everything’s working.

Add Maven support to Eclipse (M2Eclipse) by installing the following using Help/Install New Software… Work with:

http://download.eclipse.org/m2e-wtp/releases/

m2e – Maven integration for Eclipse
m2e-wtp – Maven Integration for WTP

If you select the latest version but you’re on Eclipse 4.3, it will notice and suggest the correct version for your environment.

GitHub

Set up a repository on GitHub. Tick Initialize this repository with a README.

Download the GUI client, copy to Applications, run, enter your GitHub username and password, Install Command Line Tools when asked. It will ask you to install some XCode tools (small enough).

Your new repository should appear in the app and you can Clone To Computer, making sure to put it in your Eclipse workspace. Then in Eclipse, New/Project, General/Java Project, Next, put the same name as the git cloned project and it will immediately recognise it as a a Git project.

Also in the GUI app, under Settings, Ignored files, copy the contents of my .gitignore file (and change line 21 to match your own project name) so you don’t end up uploading loads of crap to GitHub.

Once it’s done, right click project, Configure, Convert to Maven Project.

In Terminal, set your GitHub details.

# Set your username
$ git config –global user.name “Your Name Here”
# Set your email address
$ git config –global user.email “your_name@domain.com”

Dropwizard

Follow the Getting Started tutorial. Import it to Eclipse in using File/Import… then Maven/Existing Maven Projects

Once it’s working, we’ll change it so the REST application sits under server.com/api/* and the root server.com/ serves static files. Add a folder called gwt under src/main/resources where we’ll later configure the Gwt compiler to output to. Edit the main DropwizardApplication class so all our REST calls go to company.com/api/

public void run(…)

  environment.jersey().setUrlPattern(“/api/*”);

And so it serves the index.html from the root.

public void initialize(…)

  bootstrap.addBundle(new AssetsBundle(“/gwt”, “/”, “index.html”, “gwt”));

When we add Gwt to the project setup, the dependencies will clash (specifically javax.validation). To solve this, we create profiles in Maven. Wrap the <dependencies> and <build> sections with

<profiles>

  <profile>

    <id>server</id>

    …

  </profile>

</profiles>

Test rebuilding your project with mvn package -P server. You should be able to visit http://localhost:8080/api/hello-world?name=brian and json will be returned

{“id”:1,”content”:”Hello, brian!”}

In Eclipse, I also had to go into the project properties, then Maven and put client,server in the Active Maven Profiles section.

Active Maven Profiles

Gwt

Create a client profile in your pom for Gwt and add the core Gwt dependency (see: Maven GWT Plugin – Project organisation)

<dependencies>

  <dependency>

    <groupId>com.google.gwt</groupId>

    <artifactId>gwt-user</artifactId>

    <version>${gwt.version}</version>

    <scope>provided</scope>

  </dependency>

</dependencies>

It also needs to be added to the server profile so the compiler knows what your client .java files mean, but the javax.validation library Gwt provides clashes with the one that Dropwizard provides, so we exclude that:

<dependency>

  <groupId>com.google.gwt</groupId>

  <artifactId>gwt-user</artifactId>

  <version>${gwt.version}</version>

  <scope>provided</scope>

  <exclusions>

    <exclusion>

      <artifactId>validation-api</artifactId>

      <groupId>javax.validation</groupId>

    </exclusion>

  </exclusions>

</dependency>

You need an index.html page in your src/main/resources/gwt folder which will be served by Dropwizard and fetch Gwt’s compiled JavaScript. The key line in it is:

Configure your client profile’s build section in the pom to execute the Gwt Maven plugin (i.e. Gwt compiler) and to output to your static files folder:

<build>

  <plugins>

    <plugin>

      <groupId>org.codehaus.mojo</groupId>

      <artifactId>gwtmavenplugin</artifactId>

      <version>${gwt.version}</version>

      <configuration>

        <webappDirectory>${basedir}/src/main/resources/gwt</webappDirectory>

      </configuration>

      <executions>

        <execution>

          <goals>

            <goal>compile</goal>

          </goals>

        </execution>

      </executions>

    </plugin>

  </plugins>

</build>

You need a ProjectName.gwt.xml in your project root package. This file tells the Gwt compiler which libraries to use, which packages contain code to be compiled and which class of yours contains the Entrypoint (Gwt’s public static void main(String[] args) ).

  <inherits name=’com.google.gwt.user.User’/>

  <entry-point class=’ie.brianhenry.gwtdropwizard.client.GwtDropwizardClient’/>

  <source path=’client’/>

  <source path=’shared’/>

The entrypoint class is a bit long to go into here. It’s an edited version of the Google Plugin for Eclipse sample code except it’s using RequestBuilder to GET json from your Dropwizard app rather than using Gwt RPC.

All client/server communication is asynchronous, so requests are given an AsyncCallback object that they call the .onSuccess method on once the request has completed.

When the data is returned, it’s just a http string of text, so we need to turn it into a Java object by using a Javascript overlay.

public class HelloWorld extends JavaScriptObject {

  protected HelloWorld() {}

  public final native String getId() /*-{

    return this.id;

  }-*/;

  public final native String getContent() /*-{

    return this.content;

  }-*/;

}

and parsing it with JsonUtils in our request’s onResponseReceived(…) method.

callback.onSuccess(JsonUtils.<HelloWorld>safeEval(response.getText()));

To get all this running, compile the Gwt code using mvn package -P client then recompile the server side to include the newly created Gwt files with mvn package -P server and run the server again, but just visit http://localhost:8080/ this time.

SuperDevMode

For continuous development without a complete recompile process, we can use Gwt’s SuperDevMode. First, add the following line to your ProjectName.gwt.xml

<add-linkername=”xsiframe”/>

Repackage client and server, run the server and in your project root folder run:

mvn gwt:run-codeserver -P client

The first time you run this, you’ll be told to visit the codeserver at http://localhost:9876/ to copy a bookmarklet to your bookmarks bar which you’ll then use to recompile the app after each small change.

SuperDevMode Recompile

More

What’s above should get you going but, as with any project, there’s bound to be more to configure.

When you begin testing, because the dependencies are split, you’ll have to configure Maven to only test the client code with the client dependencies, by putting this in the build/plugins section:

<plugin>

  <groupId>org.apache.maven.plugins</groupId>

  <artifactId>mavensurefireplugin</artifactId>

  <version>2.17</version>

  <configuration>

    <includes>

      <include>**/Test/**/client/*</include>

    </includes>

  </configuration>

</plugin>

I’d like to have the run configurations set in Eclipse to possibly not need Terminal at all, but I haven’t looked into this at all yet.

Keep an eye on my actual project’s pom.xml which will be frequently updated (for a while!) and less likely to contain bugs.

Suggested edits to this blog are of course welcome! I’m no senior software developer yet, so appreciate any tips.

References

Various pages I read while learning all this myself.

http://www.badlogicgames.com/wordpress/?p=3073

http://ars-codia.raphaelbauer.com/2014/02/from-gwt-devmode-to-superdevmode-and.html

http://www.scottlogic.com/blog/2012/08/03/gwt-super-dev-mode-a-new-kind-of-hero.html

http://alexboyd.me/2013/08/gwt-source-maps/

http://stackoverflow.com/questions/11356714/getting-started-with-the-superdevmode

Share run configurations:

http://eclipsesnippets.blogspot.ie/2007/07/tip-creating-and-sharing-launch.html

http://pgt.de/2012/12/19/gpe-eclipse-and-maven-never-ending-story-done/

 

Nice article that covers a Dropwizard setup 101: http://kielczewski.eu/2013/04/developing-restful-web-services-using-dropwizard/