Scotland CSS & JS 2016

From 1st-3rd June the Interactive Content team attended Scotland CSS & JS for the first time. The venue was Our Dynamic Earth and the list of presenters/attendees was truly international. Each of us have written a short summary on our favourite speakers.

Stuart Brett’s Notes

#01 – “Let’s Talk About Midi”- Ruth John.
A/V, Dev, Design, Code & Craft, R&D at a big mobile co. (@rumyra)

IMG_2559Ruth John’s talk on MIDI (Musical Instrument Digital Interface) was of particular interest to me. I’ve been writing music with MIDI devices since the 1990’s. Back then I was using floppy discs, latency-burdened drum machines and an Atari 1040 STE. Twenty years later and I find myself using the Arturia KeyLab, Korg Electribe and Novation Launchpad – all fancy modern tech but still utilising that age-old protocol, MIDI. MIDI underpins almost all modern electronic music, but I would never have made the connection with how it can work with web browsers. Ruth demonstrated that through using MIDI via your web browser, it could be used to trigger a sound without the need to pre-load files. My team specialise in Interactive game-based learning and we work heavily with animations and sound. Having synchronised audio triggers can be problematic, but Ruth’s suggestion of using web MIDI, Javascript and web Audio solves that. Cool.

Ruth’s notes can be found here – https://midi-talk.herokuapp.com/

#02 – “The VR Web And The Future Of The Browser” – Livi Ericsson.
VR/AR Developer Evangelist, Microsoft (@Misslivirose)

FullSizeRender 3Virtual Reality – an immersive multimedia/computer-based reality – has come and gone over the years. The limitations of technology crippled the advancement of VR in the ‘90s and as a result public interest, investment and research slowly dwindled by the end of the decade. However, thanks to the power of our current technology, Virtual Reality is undergoing a revolution, thanks in part to the huge interest in the Oculus Rift. 2016 marks the commercial release of the Oculus Rift headset , the SONY Playstation VR and the HTC Vive. This growing momentum in game-based VR was bolstered by the advancements in virtual and augmented reality. Our own 2015 Google Glass project http://glass.ed.ac.uk/ hinted at the potential of VR & AR as a teaching and learning tool and Livi’s talk on Web VR focused on the strengths of using VR with browsers mobile deviuces. Web VR currently has an experimental API for browsers to interact with VR hardware, it can identify various headsets and tracking devices and is supported in FireFox Nightly and Chromium. Javascript, C# and Boo can be used to write scripts in the Unity Game engine and can be exported to Web VR. Alternatively, Vizoe Create provides devs with the ability to create visual node-based programming for VR websites.

Livi’s slides and project links – https://livierickson.com/blog/scotlandjs-virtual-reality-in-the-browser-today/

#03 – “Practical Colour Theory For People Who Code” – Natalya Shelburne.
Front end developer, Rooster Teeth. (@natalyathree)

IMG_2534Natalya’s talk on colour theory started with a show of hands to see who was aware of colour theory and the colour wheel. A 3rd of the room put up their hands. I was astonished to see so few coders, content and UI designers say that they are not familiar with colour theory or use it in everyday practice. My background is in Illustration and Graphic Design, all of which were part of my degree. Like Natalya, I’m an Art Student and my university days were not spent as a developer. I still struggle with using that side of my brain that relates to coding! However, I’m surprised that colour theory isn’t part of a modern student programmer’s syllabus. Learning Colour theory is super easy and there are heaps of apps and documents available on the web. Using a colour wheel is something I haven’t done for some time, as it sort of embeds itself into your subconscious. My years working in the design industry helped with that, but I found Natalya’s talk very useful and a timely reminder that it is always good to keep your colour theory up to scratch – and even more so, if you’re currently developing websites and have never worked used colour theory when approaching GUI design.

Natalya has an online demo of her functions for a complementary color scheme – pick any color on the color wheel and the functions will make sure that the scheme will still work! – http://tallys.github.io/color-theory


Jackie Aim’s Notes

#04 – “How Cognitive Psychology can help you write better code” – Sílvia Pina (@smourapina)

c36ccfb2b50b703e86fd676e8f134fd8Sílvia is a polyglot software engineer working at Zalando. She previously studied psychology and neuroscience.

In an ideal world a programmer has:

  • mathematical ability
  • processing capacity
  • analogical reasoning
  • conditional reasoning
  • procedural reasoning
  • temporal reasoning

The Stroop effect

If anyone has ever done Brain training on the Nintendo DS you may have come across the Stroop effect. It consists of words i.e. red, blue, yellow and green and you have to read the colour of the word not what the word spells. So the word may say blue but its colour is red.

Many code text editors use Syntax colouring or highlighting. Software such as Sublime Text or Brackets.

Our thinking

System 1 System 2
  • Fast
  • Unconscious
  • Automatic
  • Everyday decisions
  • Error prone
  • Slow
  • Conscious
  • Effortful
  • Complex decisions
  • Reliable

Cognitive Biases:

  • Representativeness bias – if unfamiliar a tendency to look for similarities
  • Availability bias – reliability on strong or emotional memories
  • Anchoring bias – to rely on one piece of information
  • Confirmation bias – interpretation that confirms your preconceptions

Debiasing:

  • Be aware of cognitive biases, >-<
  • Question everything
  • Pro’s and con’s
  • Consider

Sílvia talked about using probability & statistics and frameworks & theory to reduce biases. Wikipedia has a comprehensive list of cognitive biases.

#05 – “Creating Accessible Components” – Cat Hawker (@auberdjinn)

5JjlJ7fEHow to avoid the accessibility pitfalls of rich interactions and create a fantastic experience for all your users. Cat is a web developer and accessibility champion for the BBC in Glasgow.

  • Smartphones and watches
  • Screen magnifiers
  • Screen readers
  • Braille displays
  • Haptics

How do people use your app?

  • Mouse
  • Touchscreen
  • Keyboard
  • Switches
  • Voice input

Where to start?

  • Test for visual accessibility
  • Zoom in
  • Use greyscale mode
  • High contrast
  • Font size in browser

Good practices

  • Relative units for text
  • Use SVG’s
  • Avoid text images
  • Choose colours with sufficient contrast

Keyboard

  • Tab
  • Focus

Standard keyboard controls

  • Tab
  • Shift & tab
  • Arrow
  • Enter
  • Space
  • Escape

Screen readers

  • OS X: VoiceOver (cmd + F5)
  • Windows: NVDA (free)
  • iOS: VoiceOver

W3C Recommendation: Accessible Rich Internet Applications (ARIA)
ARIA-live listen out for changes e.g AJAX.

For more on accessibility – BBC: Mobile Accessibility Guidelines


Stewart Cromar’s Notes

#06 – “An A to Z of CSS” – Umar Hansa (@umaar)

  • Kafeel1-1024x691One memorable highlight for me in Umar’s very interesting “A-Z of CSS” presentation was multicolour web fonts such as Painter Kafeel
  • Where you can stack multiple fonts together and apply different colours to various elements of each letter
  • Painter Kafeel is the digitised version of handpainted lettering originally done by signboard painter- Kafeel. It consists of 9 fonts, which when used together recreate the unique multi colored look of Indian Street Lettering
  • Sign up to Umar’s newsletter and receive a developer tip, in the form of a gif, in your inbox each week:

#07 – “How to Ask about Gender” – Chad Gowler (@kitation)

  • IMG_2450One very engaging and recurrent theme during Scotland CSS & JS was gender identity and inclusivity. Several speakers showed how developers could improve both their personal approach and technical solutions towards these subjects
  • Almost every presenter conveniently provided their preferred pronouns in either their PowerPoint slides or Twitter profiles, for example:
    • “She/her pronouns”
  • Chad Gowler gave an extremely interesting and practical talk on “How to Ask about Gender” and what best she considers best practice
  • One interesting takeaway was that a “title is not a legal required part of name”
  • In addition to Mr, Mrs, Ms., consider adding the gender neutral title Mx
    • Mx – pronounced ‘mix’
  • Do not use titles to assume gender
  • Having an ‘other’ option is “othering” and be deemed dehumanising
  • A good example mentioned was the Scratch sign-up form – tells you why their asking for gender and gives a free text option in addition to male/female. Only fault is it’s missing a label for 3rd option for accessibility i.e ARIA. Maybe call it “please specify”?
    • Gender – Why do we ask for this info?
    • This helps the Scratch design team understand who is using Scratch, and provides information that helps us broaden participation.  This information is not visible on your account, and is only used to describe overall participation.
  • Previously highlighted for ‘bad practice’, Vimeo profiles are now updated to include a preferred pronoun selection
    • Help us call you by the proper pronoun:
    • Female / Male / Neutral / Rather not say


Selected Tweets

#OER16 Open Culture

This years OER conference: #OER16 Open Culture was held in Edinburgh, which was great for the Interactive content team. Now in its 7th year the 2 day conference was a very full and diverse one with people attending from all over the world. There were keynote speakers, presentations, lightning talks, Wikipedia sessions and posters. Many of the presentations were live streamed and can be found on the ALT (Association for Learning Technology) YouTube channel.

What do we mean by open?
There were lots of thought provoking topics. From letting students choose how they learn to letting them use their own tools. From research into the effectiveness of OERs, who has heard of OERs, to what are OERs? Different areas of openness, open to whom and how. The area of copyright, creative commons licensing and ownership to archives and collections.

Day 1
Catherine Cronin, University of Galway, “If ‘open’ is the answer, what is the question?” the first keynote speech on day 1.

I am just covering the topics I attended on the day but there were other sessions in parallel to this. My first session was titled ‘Converging or diverging cultures of openness’:

  • Awareness of OER and OEP in Scotland: Survey Findings from the OEPS Project: this covered the findings of the survey which covered higher and further education. Some of the interesting things from this research is the need for staff development and sharing practices.
  • Veethika Mishra a student from India presented: GameEd Archive: OER for tabletop games: for such a large industry she emphasised that the educational value of table top games is underestimated and underutilised.
  • Mosomelt: Mobile Social Media Learning Technologies, NZ
  • Connecting Resources and Users – requirements for a federated cross-sectorial infrastructure for OER: feasibility study based in Germany around repositories, distribution and the needs of different educational sectors.
Doing OER: Stuart Nicol
Doing OER: Stuart Nicol

In the afternoon I attended the ‘Converging or diverging cultures of openness’ again which covered more aspects of OERs:

  • Finding the open in the in-between: changing culture and space in higher education: In-between: Third space, Third place, Liminality. Reuse, Revise, Remix, Redistribute, Retain.
  • Open Educational Resources and Tools for the Digital Student: collaboration between 2 universities one in Romania and the other the US, the students work together and share resources, using open educational tools and social media such as ThingLink, Google hangout, Voicethread and SoundCloud.
  • Doing OER: Developing an institutional OER policy and how that policy might influence practice. Open.ed Stuart Nicol
  • Converging Cultures of Open in Language Resources Development: Mining and data driven learning, linguistic data, FLAX project domain-specific language collections.
  • How to set up an Open Online CPD course: 12 Apps of Christmas. We should try this!

There were 2 keynote speakers following the sessions on day 1: Emma Smith, University of Oxford, “Free Willy: Shakespeare and OER” followed by John Scally, National Library of Scotland, “Postcards from the Open Road” to finish the presentations of the day.

Day 2
Day 2 started with an excellent keynote from Edupunk Jim Groom, Reclaim Hosting “Can we imagine tech Infrastructure as an Open Educational Resource? Or, Clouds, Containers, and APIs, Oh My!”.

My first session was called ‘Innovative approaches to opening up cultural heritage collections for education’:

  • Bastille, a pop group or a French Fort? How the Research and Education Space (RES) is using linked open data to open up cultural heritage collections so they can be used in education: a project funded by Jisc, the British Universities Film & Video Council (BUFVC) and the BBC
  • Learning Effectiveness and Perceived Value of Wikipedia as a Primary Course Resource: research based at the Universitat Oberta de Catalunya which compared sets of students using Wikipedia
  • Open education: “Runnin’ with the Devil”: are we critical in our thinking and writing? Paper citation, semantometrics and citation metrics

‘Hacking, making and sharing’

  • Students Success The Toolbox, realistic temptations Dublin
  • Open education on Wikipedia’s sister projects: Wikipedia is well known but there are a number of other equally interesting open projects such as Wikisource, Wikibooks where students can create their own textbooks
  • An Open Ed Tech Collective: looked at a WordPress framework SPLOT, NS Cloner for WordPress, Sandstorm
  • Building a Database of People in Edinburgh Throughout the Early 20th Century: student project, setting up a searchable database using old telephone directories

‘Strategic and reputational advantages of openness’

  • Reflecting back on the diverse innovations and impacts prompted by an OER project: OERhub Bridge to success, Badged open courses, no time constraint, no support
  • Reframing ‘open’ in the context of the Digital University: different levels of open, fuzziness, Third space thinking, ‘The Great Good Place’, Lead Scotland
  • Modern slavery Stolen Lives a project aimed to promote awareness of modern slavery
  • Need for a Culture of Sharing – A case study of Mauritian Educators: in certain schools there is a ‘culture of private tuition and fierce competition which inhibit open collaborative efforts’

Open with care: Melissa Highton
Open with care: Melissa Highton
The day and conference finished with the final keynote “Open with care” from our own Melissa Highton.

Jackie

Edinburgh University OER website launch

Last week we helped launch Open.Ed, a new website devoted to showcasing Open Educational Resources (OERs) at the University of Edinburgh.

Our Interactive Content service not only designed and built the site, but several of our OER-related projects are featured in the collection:

open-ed-001

Related links

FutureMS research website

FutureMS is a Scotland-wide research study for people recently diagnosed with MS. Using clinical exams, brain imaging & genetics to try to predict severity.

Read more about our recent website launch:

http://www.ed.ac.uk/information-services/help-consultancy/consultancy-services/interactive-content-service/our-recent-work/futurems-research-website

ALD15 – Review

Summary

Tuesday the 13th of October was the inaugural Ada Lovelace Day (ALD) at the University of Edinburgh. The Interactive Content (IC) team were responsible for the design, development and facilitation of 5 key workshop activities. Not only did registered University students and staff enjoy the day, but so did a significant number of guests from the Edinburgh community.

OERs

All the team’s deliverables and handbooks were Creative Commons licensed (CC-BY-SA) for easy distribution and maximum reuse. N.B. This is Free Culture Licence.

Merchandise

In addition to the digital OERs published, the IC team designed a broad-range of ALD themed promotional materials including:

  • pull-up banners
  • tote bags
  • t-shirts
  • posters
  • cardboard cut-out

Social media statistics for the w/c 12OCT2015

  • 1K+ page views on the Ada Lovelace Day WordPress site
  • 1K+ votes and 13k+ page views for the LEGO ‘Lovelace & Babbage‘ project
  • 71 favourites and 48 retweets from the IC @Tweelearning Twitter account alone
    • Impressions: 9,447 (times people saw these Tweets on Twitter)
    • Total engagements: 665 (times people interacted with these Tweets)
  • ~400 unique Tweets using the official event hashtag #ALD15EdUni (via Topsy)

Guest Speaker

Katya Krasnopeeva from Pilizota Lab, within the School of Biological Sciences, very kindly gave an inspirational overview of her current research post. She even had a short video demonstrating how LEGO was used to help them out with a rather repetitive laboratory procedure.

Activity A – ‘Garden of Ada’

  • ‘Garden of Ada’ adult colouring-in illustration (.PDF + Flickr + Wikimedia Commons)
  • In addition to the standard A4 version given away, an A0 version was printed for a collaborative drawing exercise
    • Hand drawn by Interactive Content team member Jackie Aim

Activity B – Sonic Pi music compositions

  • Sonic Pi workshop handbook (.PDF)
    • ‘An introduction to Sonic Pi’ written by Interactive Content team member Stuart Brett

Official tweet

 

Activity C – LEGO® Raspberry Pi enclosure

  • LEGO Raspberry Pi enclosure workshop handbook (.PDF)
    • Written by Jackie Aim
  • LEGO Raspberry Pi enclosure photographs (Twitter + Flickr)

Activity D – Cardboard Raspberry Pi enclosure

  • Ada Lovelace Raspberry Pi cardboard enclosures (Purple .PDF + Blue .PDF)
    • Designed by Stuart Brett

purpleblue

Official tweet

 

Activity E – Ada selfies

  • Ada Lovelace cardboard cutout
    • Designed by Stuart Brett

Update 10NOV2015 – Wikipedia Contributions

    • With help from the very generous Sara Thomas (Museums Galleries Scotland – Wikimedia in Residence), one University of Edinburgh student made substantial additions to the Ada Lovelace Wikipedia page (Persian)

 

 


LEGO, the LEGO logo and the Minifigure are trademarks of the LEGO Group. ©2015 The LEGO Group.

Ada Lovelace Day 2015

The University of Edinburgh will be hosting its very first Ada Lovelace Day on Tuesday 13th October 2015 – an international celebration of the achievements of women in science, technology, engineering and maths (STEM).

ADA_Blog

The Interactive Content Team is playing a leading role in several creative workshops and is responsible for creating all the graphic design for the event; banners, merchandise and visual aids.

Our provisional schedule includes:

  • composing music with algorithms
  • building Raspberry Pi enclosures with LEGO
  • metadata games (University of Edinburgh’s Library and University Collections division)
  • Wikipedia training session and edit-a-thon
  • guest speakers

Please note that booking details will be announced shortly on the following website and Twitter account:

Creating animation with CSS3, an alternative to Flash (Part 1)

Last month the Interactive Content Team developed the LHSA – HIV/AIDS website and I thought it might be nice to show you how the simple animation of the bus on the home page was created.

Firstly, as the title of this blog post would suggest, it was not created using Adobe Flash (for those of you unfamiliar with this technology read the “brief history of flash” below). This simple animation was created using CSS3, a little HTML code and some jQuery.

It was adapted from an original idea I had to test the capabilities of CSS3 animation, and to see if it could measure up to the capabilities of Flash. I found this really helpful tutorial online by Rachel Nabors (Flashless Animation) and basically took it from there.

This was my starting exercise below:

You can see the idea is pretty simple; I have a bus in the centre of the screen, which gives the impression that it’s moving along the street. However, the bus never moves from its position on the screen. The bus is in fact stationary, only the wheels are moving. The items that are moving are the street scene and background layers. By moving these in the opposite direction to the bus gives the impression that the bus is moving along the street.

I like a bit of variety and as one who is familiar with the ever changeable UK weather, it seemed apt to extend the capabilities further by adding buttons to change the weather conditions and times of day.

I also like to cut corners, so I downloaded this PrefixFree JavaScript file from GitHub and added it to the <head> of my HTML document to save writing CSS prefixes for every browser.

Ok, so how did I do this?

To create this animation I’ve used a combination of;

  1. HTML code
  2. CSS3 animation
  3. Spritesheet for the bus
  4. JavaScript/jQuery code to create the weather conditions and change backgrounds

In this blog post I’ll look at sections 1-3 above and explain how each was achieved. Part 2 of this blog post will deal with the JavaScript/jQuery implementation.

Back to top ^


1. HTML code

First of all, let’s look at the HTML code, and there is not much to it.

<div id="weather"></div>

<div class="foreground" id="fore">
  <ul class="busstops">
    <li id="stop_1">Sunny</li>
    <li id="stop_2">Rainy</li>
    <li id="stop_3">Sunset</li>
    <li id="stop_4">Night</li>
    <li id="stop_5">Snowy</li>
  </ul>
  <button id="buttonStop">Stop the bus</button>
</div>

<div class="midground" id="mid">
  <div class="bus"></div>
</div>

<div class="background" id="back"></div>

You can see that it’s pretty simple – I’ve basically created 4 layers, entitled;

  • Weather – this layer is where the jQuery weather conditions are loaded in.
  • Foreground – this layer contains a UL for the weather buttons as well as a button to “Stop the bus”, which stops the animation. (It is always good practise to provide web users with the option to stop and start animations).
  • Midground – this layer contains the bus and street scene
  • Background – this layer contains the background scenery

These layers are styled and arranged using CSS and z-index layers, which I will discuss further in the next section.

You can see there are no images included in the HTML code, these are all set as background images in the CSS.

Back to top ^


2. CSS3 animation

OK, so now we know what the HTML looks like, and it’s not that scary, let’s have a look at the CSS code. The basic premise is that I have created a scene by layering divs (blocks of content) using the z-index property. (If you are not familiar with the z-index, z-indexes allow you to set the stacking order of html elements. For more information see: W3Schools: z-index).

Lets start with the weather layer.

Weather

This layer is the container for the weather conditions, which are only applied when you select the “Rainy” or “Snowy” buttons at the top of the screen. This layer is positioned at z-index:4 which is the highest layer so this is always on top.

#weather {
  z-index: 4;
}

Foreground

This layer is the container for the buttons and is positioned at z-index:4. This layer is static.

.foreground {
  z-index: 4;
  margin:0 auto;
}

Midground

This layer is positioned at z-index:3 so it appears under both the foreground and weather layers. Midground div layer contains the bus and street scene animation. Here’s the CSS for the street scene animation:

 

.midground {
  animation: parallax_mg linear 20s infinite;
  background: url(edinburgh_ground_normal.png) 0 100% repeat-x;
  z-index: 3;
}
@keyframes parallax_mg {
  0% { background-position: 3000px 100%;}
  100% {background-position: 0 100%; }
}

 

I’m sure most of this CSS looks pretty familiar to those of you who use it. I’ve added a background image (shown below) and set it to repeat it horizontally (repeat-x). The background image is 3000px wide:

edinburgh_ground_normal

It’s the animation: parallax_mg linear 20s infinite line that’s doing the work here, so let’s break it down:

  1. Animation’ is the CSS property, in the same way you would use color.
  2. parallax_mg’ is the animation name, I’ve written this shorthand but it can also be written as animation-name. This name can be anything you want.
  3. linear’ is the timing function of the animation. I’ve used ‘linear’ which means my animation moves with the same speed from start to end. Again, I’ve used shorthand, but written in full it’s animation-timing-function.
  4. 20s’ is the duration of the animation, in my case, I’ve specified it should take 20 seconds to run from start to finish. (animation-duration)
  5. infinite’ is the amount of times the animation should play (animation-iteraction-count), I’ve selected ‘infinite’ to play as a loop, but you can also specify a number if you only want the animation to run a few times.
  6. @keyframes parallax_mg – specifies the animation keyframes. I’m saying move the horizontal or x position of the background image from 3000px (which is the width of the image) to 0px. In other words, from right to left.

(More information on the animation property can be found at W3Schools CSS3 Animations ).

Ok, so if you’ve got this, then the same theory is applied to the background layer, the only difference is that I have used 3 background images rather than 1.

Background

.background {
  background-image:
    url(trees_layer.png),
    url(green_background_2.png),
    url(edinburgh_skyline_1.png);
  background-repeat: repeat-x;
  background-position: 0 100%;
  z-index: 2;
  animation: parallax_bg linear 40s infinite;
  animation-play-state: running;
}

@keyframes parallax_bg {
  0% { background-position: 1800px 100%, 1600px 100%, 1200px 100%;}
  100% { background-position: 0 100%, 0 100%, 0 100%;}
}

I’ve set the trees layer as the top background image (1800px wide)
trees_layer

Then the hill… (1600px wide)
green_background_2
Followed by the Edinburgh skyline image (1200px wide)
edinburgh_skyline_1
You will notice that the background images are not all the same width, this is deliberate; the wider images have more of a distance to move in the animation, so they appear to animate faster. The smaller image of the skyline, which is the furthest away, will move more slowly. This technique is know as parallax scrolling: the background elements move more slowly than the foreground elements creating an illusion of depth. Father Ted viewers may remember him trying to explain a similar concept to Dougal.

You may also notice a new property: animation-play-state: running;

This is where you can specify if the animation is automatically ‘running‘, or ‘paused’ when the page loads. I have toggled this property with JavaScript in section 4.

The HTML layer

Behind all the images I have a static gradient background for the entire page. I have done this by adding a CSS gradient background to the HTML element.

html {
  overflow:hidden;
  height: 100% !important;
  background: rgba(0,176,245,1);
  background: -moz-linear-gradient(top, rgba(0,176,245,1) 0%, rgba(255,255,255,1) 100%);
  background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0,176,245,1)), color-stop(100%, rgba(255,255,255,1)));
  background: -webkit-linear-gradient(top, rgba(0,176,245,1) 0%, rgba(255,255,255,1) 100%);
  background: -o-linear-gradient(top, rgba(0,176,245,1) 0%, rgba(255,255,255,1) 100%);
  background: -ms-linear-gradient(top, rgba(0,176,245,1) 0%, rgba(255,255,255,1) 100%);
  background: linear-gradient(to bottom, rgba(0,176,245,1) 0%, rgba(255,255,255,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b0f5', endColorstr='#ffffff', GradientType=0 );
}

Ok, I hope that makes sense, let’s now look at the bus.

Back to top ^


3. The bus spritesheet

I decided to try out creating a spritesheet within Adobe Flash for the bus. (For more information see this nice online video for an explanation of spritesheets). To do this I created a bus symbol in Flash and then animated the wheels using clockwise motion tweens on a timeline consisting of 16 frames.

I then selected the symbol from the Flash symbol library, (right-clicked) and selected “Generate Sprite Sheet”. I did have to fiddle around with the sprite sheet output options, but by selecting “Custom” for the image dimensions and then setting the output width to match the symbol width and the output height to 16 x the symbol height (= frame number x symbol height) worked for me. Flash provides you with a preview screen and if configured correctly you should see images of your symbol tiled vertically, 1 for each frame used. You can see a smaller version of my bus spritesheet below.
Bus spritesheet
Once the bus spritesheet was created I then used the following CSS to ‘play’ through the spritesheet.

.bus {
  animation: bus-cycle 1s steps(16) infinite;
  animation-play-state: running;
  background: url(animation_spritesheet_ltor.png) 0 0 no-repeat;
  height: 216px;
  width: 384px;
  position: absolute;
  bottom: 60px;
  left: 50%;
  margin-left: -200px;
  transform: translateZ(0); /* offers a bit of a performance boost by pushing some of this processing to the GPU in Safari*/
}

@keyframes bus-cycle {
  0% {background-position: 0 0; }
  100% {background-position: 0 -3472px; } /* Must be full height of sprite or skipping will happen.*/
}

The difference here is that I’ve used the animation-timing-property property ‘steps’ to cycle through the spritesheet in 16 steps from the top of the image to the bottom. Each step lasting 1 second each, the number of steps equalling the number of images in the spritesheet:

animation: bus-cycle 1s steps(16) infinite;

The width and height properties are set to exactly the same width and height of 1 bus in the spritesheet. I did have to tinker with the height settings to make sure this matched exactly 1/16 of the spritesheet. Being out by a few pixels resulted in a rather bumpy rendering of the bus rather than a smooth transition.

The background-position is set to move from 0px to -3472px, this is the full height of the spritesheet image.

Summary

So, if you’ve got this far and you’re still reading, well done, and thanks for staying with it. There are plenty more things I could do with CSS3 animation, and this blog post is only a very brief overview, but hopefully this will have given you some ideas to get started with.

In my next blog post I’ll look at Section 4: JavaScript/jQuery code for the weather generation.

Back to top ^


Useful links and references

Images from:

Brief history of Flash

Brief history of Flash


When I first started working in the web industry Macromedia Flash as it was known then, was considered one of the coolest things around. Macromedia Flash was a program where you could create rich interactive media content with shiny scalable vector graphics that looked the same in all browsers, (providing you had the plugin installed). This might not sound amazing, but this was in the late 1990s and the vastly different webpage rendering of Netscape Communicator and Internet Explorer 5, meant trying to get your website to look the same in both these browsers was a mammoth task; CSS was not supported well, and layout was controlled using tables and the infamous transparent spacer.gif. Flash was great; a flash object looked the same in all browsers, it could scale to fit the screen and the file size was tiny, handy when you were using that dial-up-modem to get online. All you had to do was download the flash plugin to play content in your browser.

Flash was so popular that it soon became the fashion for websites to have a full screen launch page, yep all 480 x 640 pixels of it. Who remembers visiting websites and being asked to choose between the “HTML” or “Flash” version, like who would want to visit the boring HTML version right, when you could experience the fun flash version with animations and games?

However, as web technologies developed Flash found it’s place as the tool of choice for banner ads, games, simulations and e-learning objects. All was good for the next decade or so, and then in 2007 Apple invented the iPhone, the iPad followed in 2010 and mobile and tablet browsing became THE thing. Apple would not allow Flash player on the iPhone and iPad, it made the devices unstable and took up too much processing memory. Due to the rising popularity of mobile and tablet browsing alternatives to Flash had to be sought. This leads me to the start of HTML5 as an alternative to Flash.

For more information please read: Wikipedia: Apple and Adobe Flash controversy

Back to top ^

HIV/AIDS online resources for teachers

Last Friday Lothian Health Services Archive (LHSA) launched a brand new website filled with educational resources, images and audio-visual material based on their UNESCO-awarded HIV/AIDS collections.

Over a 4 month development window, in close collaboration with LHSA Project Conservator Emily Hick, the Interactive Content team developed a showcase website that would house their collection in an attractive, functional and engaging design.

Each member of the team played an important role in different aspects of this multifaceted and exciting project. In a little under 20 total development days the following deliverables were achieved:

  • website design and development
    • WordPress bespoke theme (responsive)
    • parallax scrolling animation (CSS/jQuery)
  • design for print
    • Word/PDF templates
    • postcards (A6)
    • posters (A3)
  • audio/video editing and publishing
    • YouTube, Vimeo and SoundCloud
  • Jorum metadata creation and publishing
    • ~40 OER records shared