Access

Over the coming years we look to make Schoolbox more accessible in more situations and expose more information in open formats.  We hope to enable our users to access information the way they want, when they want.  Specifically this will include the development of a specialised mobile interface delivering information to hand held devices in and outside the school.  Supporting this we will expose the entire filesystem of Schoolbox via the WebDav protocol to enable mobile devices and desktops to save and edit directly to the CMS and LMS.  We will also continue our efforts to implement export and import functions that support a wide range of formats; RSS, vCAL, CSV, XML and SCORMM.

Technology

The technology landscape is always changing and education has always quickly adapted to teaching utilising the latest tools.  Schoolbox is committed to adopting and integrating the latest technologies as they become available.  We may not be able to predict the next big thing, but we will be among the first to implement it into our product. We have already adapted wiki’s, podcasts and online chat.  In the future we see social media being a large influence.  We will continue to integrate existing social networks and develop our own internal social services such as ePortfolio’s.  There is a trend towards increased participation in collaborative content generation from not just the teachers but the students aswell. We hope to support this trend with tools that will enable people to contribute, collaborate and share content.

Learning Experience

The last and most important goal for Schoolbox is to improve the learning experience and optimise the process.  From the perspective of teachers we would like to see a reduction in paper handouts, more efficient grading process and streamlined reporting.  Teachers should be freed of the mundane classroom administration to enable them to teach and interact directly with students.  Meanwhile students will learn via access to dynamic and creative resources in a range of different environments.  Our system should provide assistance with time management and workload, ensuring all students are keeping upto date with the curriculum.  Students will also be encouraged to learn not only from their teachers but their peers, parents and the internet.  Our vision recognises the important role parents play in the educational outcomes achieved by the student.  In the future parents will be actively engaged in the day to day activities of their students.  Parents will be able to freely communicate and access resources to assist them in achieving the best outcomes for their children.

Over the next few years we hope that our vision becomes real and that online technology becomes part of every classroom across the country.  We still have a long way to go but with a clear roadmap and a stable product we believe we can make it happen.

• Was appointed to the Victorian Whole of Government eServices Panel
• Expanded our reach to New Zealand with our core product Schoolbox by exhibiting at the Bienniel ASBA Conference in Auckland.
• Launched Schoolbox into 7 of Australia’s most prestigious Independent Schools including:
  • John Paul College
  • Marist Brothers St Josephs College
  • Bialik College
  • The Kings School
  • Moriah College
  • Donvale Christian College
  • Ascham School
• Were awarded a Multimedia Victoria Export grant from the Victorian Government
• Launched the new Alaress website and built a mobile friendly version of the website to demonstrate our move into mobile web development.
• Won a series of awards with Interactive Media and AWWWards
• Completed a suite of new websites including:
• Hotels.com.au major upgrade
• DFP Recruitment
• Ormond College
• JB’s Wear
• Tintern Grammar
• Townley Drop Forge
• Invested over 2000 hours into our Schoolbox learning management system

We want to thank all of our clients as without their support we could not have achieved these outcomes and also want to welcome all of the wonderful new clients that joined us this year!

We look forward to the conversations and opportunities we will share with you in 2012. We’ve got plenty planned and are sure you will have too.

Our team will be wrapping up on Christmas Eve, December 23^rd and will be back on 3^rd January 2012.

Thanks a million, enjoy the celebrations and festivities and a Happy New Year to all.

From all the Alaress team, we hope you take time to relax, have a super festive season with your family and friends and an even better new year.

This was a big decision for Alaress having previously only exhibiting in Australian events within the education industry.

Leading up to the conference we had been working closely with our strategic technology partner Synergetic to strenghten both our ongoing relationship and the way in which we work together to improve our solutions for our clients through tighter integration of our two systems.

As part of both our organisation’s commitment to work more collaboratively toghether we decided to exhibit together at ASBA.

For those that don’t know, Schoolbox is our online collaboration and eLearning system empowering K-12 schools to create an environment that is a rich, engaging and effective learning experience. It can be customised to meet each community’s unique requirements and is proven to improve school communication and foster student learning.

Synergetic is a comprehensive school management system for schools and other educational organisations that has been developed using proven technology based on our experience of more than 30 years dedicated involvement with schools.

Schoolbox is tightly integrated with Synergetic’s database and this trip to New Zealand offered our teams to spend some quality time together getting to know each other better and discuss and plan the future of our continued partnership.

Here are some photo’s from the time we spent abroad:

The conference also provided our digital agency a great opportunity to talk with dozens of key decision makers from a wide selection of independent schools across Australia, New Zealand and a select number of international schools all looking for the kind of high quality solutions for their schools that we offer.

Overall a great experience and we are thoroughly looking forward to catching up with our new friends from CDA in the near future.

Doctrine2 allows us to have a full blown ORM, treating all our database rows as full OO objects with complete hydration and lazy loading built in. In the past doctrine added massive overhead to projects reducing speed and scalability making it a tough decision to utilise.  The latest version of Doctrine2 has stripped down the code, removed the magic and focused on speed.  This coupled with native support in Symfony has made the decision to utilise the ORM much easier.

Twig has been on Alaress’ radar for a while, however for some time now we have been supporting the simple but powerful PHPLIB Template engine.  It provided the separation of display from code but was limited in that blocks and data mapping was still done by hand.  Twig provides us with the ability to map our Doctrine objects directly to the front-end developer who can then iterate, filter and conditional over the data objects.  Giving the power back to the front-end developer to control how the data is presented.

Following the announcement we noticed that the old plugin framework did not support Symfony2.  In Symfony2 plugins have been renamed to bundles.  After a bit of hunting we found the following site that hosts links to all the symfony2 bundles.  It also seems that github is the new centre of the Symfony2 universe so a quick search on github will bring up lots of results.

We have reviewed some of these bundles and here are our favourite so far.  We look forward to working with these bundles in projects shortly.

Assetic
css/javascript/image precompiler/filter with twig integration

Imagine
image handling, resize/draw/filter

Sonata
admin builder

DoctrineExtensions
trees, sluggable (now with tree and m-1 support) and timestamps

FOSSUserBundle
user auth, email validation, password reset

PagerBundle
pagination

Google
anayltics, maps, adwords

Facebook

Twitter

Alaress is always looking to hire talented Symfony developers so if you have the skills please contact us.

The appointment will enable our digital agency to provide a range of valuable services including digital strategy, web design and development, information and application architecture, maintenance and support and more.

The eServices panel was established to streamline purchasing of Information Technology services to the whole of Victorian Government. It is designed to simplify the procurement process for the Victorian Government when engaging Approved Service Providers across a range of specialist IT service categories and reduce the administration costs involved in tendering to the mutual benefit of both parties.

As of March this year, prior to the tender process, 253 companies were listed on the eServices Panel. The new panel has been drastically slimmed, now consisting of only 188 companies, a reduction of 65 companies.

The panel ensures much of the Victorian Departments and agencies being mandated to procure services from the panel, which has fired up some of the previously approved suppliers no longer on panel and other sour grapes.

After the list of successful suppliers was announcement on Friday 1st, Alaress' Managing Director Sean Richards said:

This is a big step forwards for Alaress and a great win for our dedicated team. We worked extremely hard to be awarded placement on the eServices panel. Being recognised and placed on this competitive list demonstrates how our digital agency has matured into a force to look out for within the digital space.

Over the next four years, Alaress plans to make the most of our appointment to eServices by working with key Victorian Government agencies to provide exceptional digital solutions.

While the post from Viget deals with transforming a single file input in reality what a developer needs is a plugin, something that can allow any file input to be styled simply by giving it a class or ID. Essentially I wanted to turn the following slightly awkward solution;

$('.file-wrapper input[type=file]').bind('change focus click', VIGET.fileInputs);

into

$('input[type=file]').prettyFileInput();

My other objective was to allow the plugin to be flexible. This meant having appropriate options that would allow a developer to very easily style the look and feel of the button in both its default state and selected state. To start with you’ll need the following css as a base:

.file-input {
cursor: pointer;
display: inline-block;
overflow: hidden;
position: relative;
float:left;
z-index:10;
font-family:Helvetica, Arial, serif;
}
.file-input input {
text-transform:capitalize;
cursor: pointer;
font-size: 100px;
height: 100%;
filter: alpha(opacity=1);
-moz-opacity: 0.01;
opacity: 0.01;
position: absolute;
right: 0;
top: 0;
z-index:20;
outline:none;
}
.file-input .btn{
background: #79130e;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
cursor: pointer;
display: inline-block;
font-size: 11px;
font-weight: bold;
padding: 4px 18px;
text-transform: uppercase;
color:#fff;
float:left;
}
.file-input .file-holder{
margin-top:4px;
display: block;
float: left;
margin-left:4px;
font-size:11px;
}

This is a modified version of the code on the Viget blog, it’s essentially the bare bones that will allow you to see the effect the plugin has as soon as you install it. Once you’ve included the plugin in your page and set it to work on a file input you should see the normal markup

<input name="file" type="file" /> 

turn into

<span class="file-input">
<input name="file" type="file" />
<span class="btn btn-file-input">Choose File</span>
</span>

When a file has been selected the markup changes again to:

<span class="file-input">
<input name="file" type="file" />
<span class="btn btn-file-input btn-file-input-active">File selected</span>
<span class="file-holder">filename.jpg</span>
</span>

Sneaky, no? Now you’ve got a working redo of the file input let’s take a look at the default options that you can modify to change the look and appearance of the end result.

//this is the css class that wraps the file input, button and file name text.
inputHolderClass: 'file-input',
//the class of the button that the user interacts with.
buttonClass: 'btn',
//any additional classes that are also on the button, this is here for the scenario where you only want to slightly modify a site wide button style.
additionalButtonClasses: 'btn-file-input',
//this class is appended to the button when a file has been successfully selected via the file browser.
buttonActiveClass: 'btn-file-input-active',
//the class to be given to a span that appears when a file has been successfully selected via the file browser.
fakeFileHolderClass: 'file-holder',
//the text for the button.
defaultText: 'Choose file',
//the text for the button while a file has been selected.
defaultFileSelectedText: 'File selected'

The end result can be seen at this JSFiddle I’ve set up here. Thanks again to VIGET for sharing their code, I hope this plugin can go on and be expanded to be more modular and have even more options. Let me know how you all go with it!

On top of the user’s feedback let’s assume that any order that has been completed needs to be added to your own personal database for record keeping and invoicing. This is where the paypal documentation gets a little bit hectic and difficult to decipher. The aim of this blog is to explain how to deal with this situation using a mix of two types of paypal auto-responder, IPN and PDT.

In the above diagram we see what we can achieve through the use of the two scripts. The reason we use two separate cases is that IPN is executed instantly after payment has completed, whereas PDT is executed after you’ve been redirected back to your site. Because we want to guarantee that a record of the transaction exists on our database we use the IPN script. This means that even if the user closes the window before they are redirected back to your site we still get a record of it in our database and perhaps an email sent off to both the seller and the user who completed the paypal request.

Setting up Paypal

Now let’s have a look at the slightly convoluted process with a practical case. To do this we’re going to use two scripts called “IPN.php” (for the IPN script) and “thankyou.php”(the PDT script) . Paypal needs to know where these are kept so first let’s set up the thankyou.php responder. Login to paypal and go to the “Profile” section.

Next use the following settings in on the page you land on:

What we’re setting up here is essentially the front-end receipt page for the user. When they complete a payment, they will be redirected to the auto return URL specified. At this point it’s important to take note of the “Identity Token” which I’ve blurred out in the above case, at this point it would save time to copy this into a notepad file so we don’t have to come back to paypal. Next let’s head off to another screen to fill in the URL for the IPN script so we can complete what we need to do in paypal and move onto the scripts.

Now simply fill in your URL, save and logout.

The Scripts

Unzip these files and place them in the root of your site. Notice that I’ve included the PHPMailer library; this will be used to send off email notifications as we require them. This robust class is the best free one I’ve used (but I’d like to see one that’s better, if you know of one don’t hesitate to comment!). I’ve created a zip file with all the necessary scripts here:

IPN_PDTandPHPMailer

Now if you open up the scripts you’ll notice there are a few things to adjust. First off open up the “IPN.php” file and modify all of the Mailer details (SMTP server, username, password etc) in order for the script to be able to send an email! Then make sure if you’re using the paypal sandbox testing environment that the link to the sandbox is correctly uncommented(you’ll see this in the file).

Now open up the “thankyou.php” file and do the same sandbox check. Lastly you’ll need to place the identity token that I highlighted earlier near the top of this script. This is for secruity reasons. Now if you’ve completed all of this and made sure your PHP scripts are void of errors you should have a fairly functional (yet crude looking) dual auto-responder setup. If you’d like to add flair such as email templates and such just have a look here. In terms of the code for adding an order to your database it is a bit more complex and won’t be covered here. You could however get a start by heading to this guide on PDO MySQL scripting. It is important to note that the information these auto responders can provide is all based around the variables you extract in the paypal scripts. These can be found here.

While this solution may seem a little crude for the uninitiated with little time and effort you can have a working database connection that fills out as your paypal orders come flooding in.

The largest residential college for The University of Melbourne and founded in 1881 by the Presbyterian Church with the hallmarks of open entry and liberal education, Ormond College aspires to be a leader in residential collegiate learning in Australia.

Managing Director, Sean Richards said “We have thoroughly enjoyed our partnership with Ormond College for the past four years through the provision of their eLearning solutions from our flagship learning management system Schoolbox. The opportunity to work with Ormond College on their new website and digital strategy, means Alaress can apply our expertise building high-end websites to create a true full service solution for the College and it’s community.

James Leckie, Technical Director said “Our flexible process will ensure the clients requirements are met within budget and time-frame.”

This further supports Alaress’ position as the best digital partner for the education space, having secured clients including Melbourne Grammar School, Melbourne Girls Grammar School, Bialik College, Sydney Church of England Grammar School (Shore) and Tintern Girls Grammar to name a few.

Alaress has just deployed the most recent and impressive milestone update of the Schoolbox eLearning platform for Ormond College. Since 2001 Schoolbox has been transforming learning in major Australia Independent schools for staff, teachers and parents. Schoolbox ’s interactive community portal utilises advanced technology, making it a complete communication and content distribution system.
Schoolbox supports the school administrator with infinite control to provide a secure area for the entire school community to communicate, collaborate, manage information, share resources, control content and approve changes and modifications.

Administrators have an easy to use, feature rich and flexible framework in which to build a complete communication and content distribution system. Information management includes: Document and Image libraries, version control, work-flow and approvals.

Schoolbox delivers content to users based on their current enrollment status. It also provides access to information regarding timetables, student contact information, calendar, email and numerous other custom built systems (internet usage, sports fixtures, forms, resources, library). Alaress’ vision for Schoolbox is to provide a single, central home for all information relevant to the whole of school community.

When it comes to digital services Alaress understands what schools and college’s need. The combined solution of Schoolbox with a new website Alaress have commenced designing and developing means that Ormond College has a trusted digital partner to realise their digital strategy.

The judges also recommended the website for inclusion in the ‘School’ category (in addition to ‘Education’). This recommendation was made for reasons relating to quality and relevance and has been approved by IMC.

The Best in Class award is the highest honour bestowed by the Interactive Media Awards. It represents the very best in planning, execution and overall professionalism. In order to win this award level, the MG website had to successfully pass through the comprehensive judging process, achieving very high marks in each of the judging criteria — an achievement only a fraction of websites in the IMA competition earn each year.

You can view the Alaress awards gallery, our IMA School award and IMA Education award.

Sean Richards, Managing Director of Alaress, said, “After working tirelessly on the website with MG, it’s an honour to have our work recognized by the Interactive Media Awards. We were confident that we had created a high-end website for Mentone Grammar both from a technology and functionality perspective and also from a creative standpoint.

We feel strongly that our digital strategies and projects are world-class examples of how the web can be used to extend the school community, support brands and offer functionality not previously accessible. Having our website awarded along side other high class digital solutions by the Interactive Media Awards is testament to the true standard of excellence by which Alaress operates.”

Alaress’ Creative Director Matthew Sambell said, “This project was a joy to work on as Mentone’s stakeholders sat with our directors to flesh out and plan each element for their new site, from the get-go. We were able to define the site’s design/look and feel and key user groups, ensuring their new interface made each necessary service easily accessible. Our in-depth meetings and focus groups made way for an organised project with easily achievable creative and functional goals.” Due to the success of the web solution, Alaress now provide all of the print design and digital advertising for MG.

The MG website also secured a Australian Web Awards Finalist nomination for 2010 and the ADAPE 2010 Web Excellence Award for education. It has been an impressive twelve months for Alaress experiencing rapid growth in both new clients partnerships and new team members increasing the company to eleven full-time staff. The team now represent some of the countries best digital technologists, including Managing Director Sean Richards, Creative Director Matthew Sambell and Technical Director and founding creator of the Schoolbox learning management system, James Leckie.

Alaress has been forging relationships with a range of traditional advertising, marketing and public relations agencies to help fuel their selection to work on known brands and have recently been selected as the digital provider for The Guest Group and Ormond College (University of Melbourne).

Through Alaress’ web based eLearning platform Schoolbox, Alaress provides digital services for Melbourne Grammar, Melbourne Girls Grammar School, Tintern Schools, Bialik College and Sydney Church of England Grammar School (Shore).

Special congratulations to our core team who worked on this project including:

• Janine Mayer: Marketing Manager at Mentone Grammar School. We love you.
• Matthew Sambell: Creative Director and lead designer on this project,
• James Leckie, Ryan Hughes: Senior Programmers,
• Matt Cordell: Front end genius and
• Sean Richards: Senior Account Manager

Relevant Links:

• http://www.aimia.com.au/home/news/member-news/alaress-wins–best-in-class–at-interactive-media-awards-2011

DPI for dummies

DPI, or Dots-per-Inch, is a measurement for print quality, with the more dots printed in each square inch increasing the quality of the image produced. When looking at screens, DPI usually means pixels-per-inch, but the “more is better” paradigm still applies, and I will use the two interchangeably.

To give you an idea of the values involved, here are the specifications for some devices you may have seen hipsters using on the train:

Clearly the pixel-densities of the devices are as varied as the devices themselves, but generally the higher the screen resolution, the lower the PPI. Now compare the above to the following common computer displays:

Screen size	Screen Resolution	Pixels-Per-Inch
15.4″	1280×800px	95
17″	1280×1024px	96.42
21″	1600×1200px	95
23″	1920×1080px	96

The reason they're so much smaller? Simple, you use your monitor from further away than your phone. Likewise, a 40′ HDTV only has a PPI of 55.07, whereas my 17′ laptop has 129.58.

Compensating for something

Since mobile devices have a much higher PPI, under normal conditions text and images scaled for desktop would be too small to see clearly. To illustrate this, on a 96PPI display 16px text would appear about 2.6/16ths of an inch tall. On a 265PPI display, the same text would appear 1/16th of an inch tall. Clearly, this is too small to read comfortably.

The solution? Mobile browsers compensate by zooming in on the page. The end result is still smaller than on your monitor, but again, your monitor is probably further away, so it’s all relative.

The problem? Now your nice crisp image have been zoomed in too, which causes them to appear blurry.

Delivering clear images for unclear DPI's

1. The SVG Method

SVG, or Scalable Vector Graphics, is as the name suggests, a vector image format. This means that instead of telling you where each pixel is like a raster image, the image is closer to a set of instructions to draw it. This means an SVG or other vector can be redrawn at any size without losing quality, whilst a raster can only be resized by degrading the quality.

SVG can be used as a background image or images in Safari and Opera, but unfortunately do not work in the Android browser or Windows Phone 7. Apparently Honeycomb will bring this functionality to 'droid, and the next version of WP7 will include IE9 instead of IE7, which has great support for SVG.

SVG also does not render crisply in Opera Mobile. I could be wrong, but I assume this is because of the browsers zoom value — so it renders the page, crisp SVG and all, then zooms in on it, making the image blurry once more.

You can use jQuery to test for SVG support with the following, then script a replacement accordingly, but your raster images will still be blurry.

function supportsSVG() {
    	return !!document.createElementNS && !!document.createElementNS('http://www.w3.org/2000/svg', "svg").createSVGRect;
}

Google activates 350,000 Android devices each day. Therefore a solution that does not work in Android is not a solution.

2. The double-size image method

An alternative to vectors is simply providing a higher-resolution image to match the higher-resolution of the device, then scaling it down. So you serve a larger picture, tell it to be smaller, the phone is smaller, so tells the page to be larger, and everything sort of balances out.

The default zoom multiplier for most high-DPI phones is between 1.5 and 1.6, so making your images double the size should easily be enough to keep them crisp.

On images themselves you can do this easily with the height and width properties. So for example, if you wanted a 32px image, save it as 64px and set height and width to 32.

<img src="example.png" height="64" width="64" alt="Example of image height and width" />

On your screen you mightn't see any difference from a 32px image, but on your device the extra pixels will sneak in when the browser zooms the page, and your image is sharp again. The only downside from this technique is that there is no way to deliver a smaller image on low-DPI displays without scripting.

But what about backgrounds?

Of course, this would be too good to be true, so the kicker comes with sizing background images. Whilst CSS3 introduces the background-size property, it doesn't work on Opera Mini or IE.

.example {
	background: url('example.png') no-repeat top left;
	background-size: 32px 32px;
	-webkit-background-size: 32px 32px;
}

IE has an easy workaround — because it doesn't support multiple backgrounds either, you can serve a low and high-quality image separately with the following snippet:

.example { background-image: url('example.png'); background-image: none, url('example-hq.png'); }

Unfortunately, Opera Mini does support multiple backgrounds, but not background sizing, so will deliver your image at its original double-size.

Using @media queries

You probably also want to use media-queries to only serve the high-res image to high-DPI devices, and not every user. For the sake of inconvenience, both Webkit and Opera support only their own vendor prefixes and format (ratio vs fraction), so you'll have to define this twice.

@media screen and (-webkit-min-device-pixel-ratio: 1.5) { background-image {[...}}

@media screen and (-o-min-device-pixel-ratio: 3/2) { background-image {[...}}

An easier method might be combining your high-DPI styles into separate stylesheet, then use an @import to attach this to the page. You will create an extra network request, but will save yourself doubling up on your styles.

@media screen and (-webkit-min-device-pixel-ratio: 1.5) { @import url('high-dpi.css');
@media screen and (-o-min-device-pixel-ratio: 3/2) { @import url('high-dpi.css');

Not a perfect world

So far, both techniques involve providing additional assets, and neither works across the field. SVG can still appear blurred in Opera Mobile, and won't appear in Webkit or Windows Phone, and background-size doesn't work in Mini or Windows Phone.

Furthermore, any media queries have to be defined twice to work in both Opera and Webkit browsers, so having created two images, you must declare them twice as well!

Summary

So what have we learnt and where does this leave us?

1. Images can be upsized and scaled back by setting a height and width
2. You can use SVG if you’re comfortable scripting a fallback for Android and WP7
3. You can use background-size if Opera Mini isn’t a concern
4. Media Queries are a must to save bandwidth

Today, there are a plethora of articles about designing for the iPhone, and some even have the courtesy of mentioning Android. Opera is worldwide the most popular mobile browser and runs on any phone. Unfortunately, at present there is no infallible method I know of to deliver high-quality images to all three, and Windows Phone really throws a spanner in the works when it comes to standards support. For the time being, the best option is probably to go with media-queries and background-sizing, and settle with the fact that, whilst popular, Opera Mini is not a default browser, so if a page does display incorrectly, more users will be able to simply try again in another browser, as long as your content is engaging enough to have spurred their interest in spite of any presentational glitches.

Which leads me to my final point; on high-DPI devices, content is still king. A mobile device is still no comparison to desktop browsing, and mobile connections are no match for land-line ADSL, so only use images where you have to