OurTraction

As a newcomer to the industry, I found Canada 3.0, held in Stratford, ON  May 10-11th, a great place to be immersed in ICT culture. It was a golden opportunity to connect with like-minded, highly creative and collaborative people who are shaping the very world we live in. Most importantly, I appreciate the awareness I gained about the major needs unique to the ICT industry:

- increasing homegrown R&D opportunities
 -upgrading our digital infrastructure to accommodate digital innovation and Canada as a digital nation
- increasing digital literacy in our youth and current adult workforce
- producing more Canadian content and becoming identifiable globally
 -growing the overall Canadian ICT industry

From the perspective of a former educator, I chose to attend the learning stream, as well as the creating stream. What I was looking forward to most was the opportunity to participate in what was being touted as highly interactive breakout sessions to develop immediate action steps to help create a digital economy. But what actually took place was far from being interactive. Each session was essentially a one-way conversation and ended up being a rather large let down. While the speaker panels were clearly stacked against those who were the most active in the industry, I was relieved to see that in each case, the digital savvy panelists ’represented’ and fought through the noise to be heard – at least by the audience.

What amazes me is Canada 3.0 succeeded in pulling together some of the brightest minds in the business, but neglected to use them as a resource. I know the attendees I spoke to also felt the same way. Why was that? If change is truly going to happen then an open dialogue must take place and those making the changes need to feel they have some ownership over the changes they are going to be making.

Maybe next year…

The second Canada 3.0 Digital Media conference was held in Stratford on May 10th and 11th, and despite the choice to hold it in a freezing cold hockey arena, the event was able to attract over 1,500 attendees who gathered to help craft a digital media strategy for Canada as we get closer to Canada’s 150th anniversary.

I’ve read with interest David Eaves‘ thoughts on the two day event and he summarized exactly how I was feeling after I left Stratford. I have some positive thoughts but unfortunately I’m disheartened by a lot of the rhetoric coming from traditional institutions and the lack of encouragement of the grassroots communities and poor attempts to include them in honest discussions.

My time at Canada 3.0 was largely in the Creating Stream, but I did attend a few sessions elsewhere. I won’t pretend to have a complete grasp on all the conversations that took place over the two days, but I’m sure my experience was much like many others. To put it bluntly the conference did not even remotely live up to what the organizers promised on the front page of the Canada 3.0 website;

“Your voice will be heard.

Whether you’re a Content Creator, Tool Maker, or Tool User, this is your chance to influence our national digital media action plan. Become part of the discussion to ensure Canada can not only compete, but also lead the world, in today’s new digital economy.”

Unfortunately nothing could be further from the truth. Only lip-service was given to honest interaction and community involvement. Throughout the event  it was clear that the agenda had been set before the event, and the sole purpose of the conference was to get industry leaders together to pay homage and ratify a predetermined outcome.

The organizers also promised “camp-like discussions”. I have experience running and attending camp-like conferences, and there was nothing remotely like that at Canada 3.0. Nor was there even the opportunity to have any type of community driven session.

When it came time to wrap up on Tuesday, the chairs of each stream were invited to present ‘action items’. These were ideally to come from the participants and were supposedly to help build Canada’s digital strategy. None of the items that were presented from the Creating Stream reflected the comments that the attendees had made publicly.  Worse yet, they all came from the first session and seemed stilted, fake, contrived, and designed to appease the traditional mainstream communication channels.

Which leads to the single most major issue with Canada 3.0. The event had the potential to realign Canada’s digital future and to create and foster new and innovative ideas, models and platforms. Instead it focused on bolstering traditional positions and industries; like the big three telecoms, television networks like CTV and Global, and mainstream media outlets like newspapers and radio. Funding announcements designed to benefit tired business models, old-fashioned copyright reform that encourages conglomeration instead of independent and innovative creative works were championed, and traditional failing ideas were propped up, solely because they were Canadian.

Not all is lost though, there is a grassroots movement, full of content creators, small industry professionals, tool makers and developers, who are all working to create a digital environment in Canada that will take us as leaders into the 21st century; we can position ourselves as innovative and relevant, ready to do business in the digital media space on a global scale. However, we’re going to need to shake off the ball and chain that is the traditional broadcaster and we’ll need to be prepared to move forward without government assistance, but ultimately we will succeed.

I recently had the opportunity to make use of CSS3 transformations to achieve a 3D effect in a practical application.

If you’re a web developer reading this, you know that something like this doesn’t happen every day, and is therefore very exciting!

The main requirement for the project was to display a 3D isometric floorplan of the Convergence Centre at Western University in London Ontario, with tweeps showing up in the room they are tweeting from.

Each room is a <div class=”users”> that can contain <div class=”avatar”> as many times as needed. Transparent GIF’s are used as background images for the character’s body, head, torso and legs.

<div id="bar" class="users">
	<div class="avatar">
		<div class="head"></div>
		<div class="torso"></div>
		<div class="legs"></div>
	</div>
	<div class="avatar">
		<div class="head"></div>
		<div class="torso"></div>
		<div class="legs"></div>
	</div>
</div>
<div id="maple" class="users">
	<div class="avatar">
		<div class="head"></div>
		<div class="torso"></div>
		<div class="legs"></div>
	</div>
</div>

For development purposes, we put a thick red border around the rooms.
As we add more avatars to a room, we’ll adjust their margins so that characters squeeze closer together and the room will not overflow.
Avatars are floated right so they stack nicely – closer ones will overlap farther avatars.

.users {
	border: 4px dashed red;
	position: absolute;
}
.users .avatar {
	height: 44px;
	width: 33px;
	float: right;
	margin: 17px;
	position: relative;
}
.head, .torso, .legs {
	position: absolute;
	top: 0;
	left: 0;
	height: 44px;
	width: 33px;
}

Adding CSS3 transformations, we can skew the room divs to match the shape of the rooms in the background image.
The side-effect of this is that the avatars inside will also be skewed.
The CSS below will affect Mozilla and Webkit-based browsers only.

.users {
	border: 4px dashed red;
	position: absolute;
	-moz-transform: skewX(45deg) skewY(-12deg);
	-webkit-transform: skewX(45deg) skewY(-12deg);
}

Now we have to put an opposite skew on the avatars to cancel out the room skew.

.users .avatar {
	-moz-transform: skewX(-50deg) skewY(12deg) scaleX(1.2);
	-webkit-transform: skewX(-50deg) skewY(12deg) scaleX(1.2);
}

All that’s left is to remove the red border around the rooms!

If you have any questions or comments about using CSS3 to achieve a 3D effect, or if you want to show off your own 3D CSS3 project, we’d love to hear from you!

Ewoks was the codename of our Twitter display at last Saturday’s Podcamp London. The purpose of the application was to provide a fun interface to view tweets that pertained to the event throughout the day. The application provided event attendees with useful information and a new way to interact with others.

Features

• 3D isometric floor plan
• Current and Next session displayed for each room
• Use the Podcamp hashtag #pclo10 to have an avatar displayed in the lobby.
• Ability to “check in” to one of the session rooms by using the room name in a tweet.
• Unique avatar for each visitor.

Response

Attendees found this display to be very useful – they would see tweets of someone they know enjoying a session in one of the rooms, and they would make the decision to visit that session. Some users managed to find an “easter egg” built in – when a user uses the hash tag “#bye” their avatar would be beamed off the map with an animated laser.

Throughout the day people congregated in front of the display to check out what others were saying and what was coming up next, or to find directions.

Built on Code Igniter, the application made use of jQuery, CSS3 transformations (to achieve a 3-dimensional effect) and the Twitter Search API. Stay tuned for a more technical post on how some of the effects were achieved.

Lessons Learned

You can do amazing things with Javascript and CSS – Flash is no longer the only option for “cool”. Since this application was meant to run on a large display there was no need to worry about browser consistency which allowed for unbridled CSS3 greatness!

Seeing others interact with your work is very rewarding. Seeing large groups of people, mobile devices in hand, staring at the screen waiting for their tweet to show up or their character to blow up makes it all worthwhile.

If you have any questions or comments about Ewoks (the application, not the small furry creature indigenous to the forest moon of Endor), or if you have built your own supercool Twitter display, we’d love to hear from you!

Several of the staff from rtraction have spent that last two days in Stratford Ontario at the Canada 3.0 Digital Media Conference. The main focus of this event has been to build a digital media strategy for Canada so that by our 150th anniversary in 2017 everyone in Canada will be digitally connected. The organizers are calling this the “Moonshot” in reference to Kennedy’s 1962 speech in which he outlined the U.S. push towards space.

However, there has been a major issue with determining what exactly it means to be “digital”. There is no consensus between the stakeholders across Canada about what we’re measuring. Therefore we’ll never really know if we’ve reached  our goal. Additionally there is a variety of disagreements about who should be leading this charge and how far do we need to go with public consultation by government instead of action. Finally, there seems to be a big push to work within existing models and platforms of broadcasters and “old media” and ignoring new systems and potentials.

Despite these challenges, the conference has been a great opportunity to connect with content creators, brilliant developers, industry leaders, and corporations.  As the second day continues we’re invigorated to keep these conversations alive and encouraged by the community that we’re seeing that already exists across Canada.

When we get back to London we’ll review our notes and our twitter streams and we’ll present much of what we’ve learned on this blog.

Until then, how well do you think we’re preparing for 2017 and what goals should we be looking to measure in the lead up to this date?

There have been a couple of high profile announcements about government institutions using open source products in place of proprietary systems.

One of the biggest announcement came from the White House and they have released some great new modules for Drupal.  All three modules work well to fill noticeable voids and provide a better browsing experience. One module, “Context HTTP Headers”, allows developers or system administrators to customize caching for pages based on type.  This means is that you can have your news pages cached for five minutes on a high traffic website and have your ’standard content pages’ such as About Us cached for sixty minutes.  Another module release is called Akamai and helps target scalability as well by enabling integration into a their Content Delivery Network. Another module called GovDelivery makes it a lot easier to send out tailored emails to the governments email list.

The White House also released one of the most desired modules for any developer who is working hard to build accessibility complaint websites. Dubbed “Node Embed” the module helps deliver rich content (photos and videos) with all of the appropriate meta data that makes them fully accessible by screen reading software.

The Bank of Canada has also made some contributions back to the open source community. They released three WordPress plugins that were developed for their website.  The AJAX Scroll plugin adds a graceful fade in and fade out for next/previous links when a user is navigating content.  Another recently releases plugin is called PBox and it allows a developer to create custom content widgets and standardize the display of the content within them.  This is very useful as it helps ensure all information will have the same look and feel across a site.

The Bank of Canada has also released a WordPress plugin that helps remove the handcuff’s when it comes to widgets and customizing them.  The plugin called XWidgets allows for a page-by-page customization of any widget which means you can have a news feed or any type of widget customized to fit any specific pages layout or design needs.  This means you can easily have your about us page display a Flickr feed and the same widget could display a twitter feed on your contact us page.

All these announcements are great news for all types of internet users, from casual surfers, to content producers and developers. Its great to see political offices getting on board with open source and we hope that this is just the start to many more contributions from all levels of government.

What online government features would you like to see made available to the general public?