Tag Archives: video

Song: Oh! Selector ♪

Downloads

Get high quality versions of this song from iTunes and Bandcamp.
Also, free not-quite-so-high quality downloads are available from SoundCloud and Last.fm.

Lyrics

Now when I was a young boy startin' out in this industry
I remember this pearl of wisdom that the internet gave to me.
To manipulate or decorate something on a web page
First ya gotta grab it and there's pretty much just one way...

[Chorus]
Oh selector, oh won't you fetch for me
With your magic sense, all the elements within the old DOM tree.

Now selectors can be used in CSS, oh but there's more.
In plain ol' JavaScript as well with querySelector().
And don't forget the libraries like jQuery and so
You could say that they're essential if you wanna be a pro.

[Chorus]

The next step on your journey is to learn selector syntax.
There's not much to remember so don't worry, just relax.
You start with a plain ol' tag name if you want it to be styled,
Use "plus" for adjacent sibling and "greater than" for a child.

[Chorus]

A dot is for a class name and for IDs it's a hash.
Use square brackets for attributes and you're sure to find a match.
Now :hover needs a colon like :focus and :target.
There's other stuff as well but that's enough to get you started.

[Chorus]

One final word of warning for my song to be complete.
Remember please that all IDs have got to be unique.
They're bad 'n' they're mean and they don't fight clean and you're gonna find it tough
If you use more than one of each because this DOM ain't big enough.

[Chorus x 2]

Please Retweet This Song ♪

Downloads

Get high quality versions of this song from Bandcamp.
Also, free not-quite-so-high quality downloads are available from SoundCloud and Last.fm.

Lyrics

I wrote a new song and put it up on the web.
When I checked the next day, the number of plays, to my dismay was ten.
Maybe my music is not that great in the end.
Maybe I should sell myself to my friends.

And if you think this is true
There's one thing you can do

Please retweet this song
That's all they seem to say
Please retweet this song
Is the mantra of today
And if you agree
If you see the irony then
Please retweet this song

So many people are desperate to be heard.
They try to promote something they wrote to get upvotes on their network.
They urge us to click, to share and subscribe.
No need for humility, they wannabe a celebrity online.

And if you share this point of view
What I'd really like you to do is

Please retweet this song
That's all they seem to say
Please retweet this song
Is the mantra of today
And if you agree
If you see the irony then
Please retweet this song

Maybe this is not a new thing
The spread of personal marketing
People have always used their peers 
To cultivate and propagate and advocate and disseminate and circulate their ideas

Please retweet this song
That's all they seem to say
Please retweet this song
Is the mantra of today
And if you agree
If you see the irony then
Please retweet this song

And as they keep sending metweets galore
The rest of us will endeavour not to measure our friends with a score
And as they grow ever greedier
My proposal is to focus on the social in social media.

And if you feel like this too
I think you know by now what to do

Please retweet this song
That's all they seem to say
Please retweet this song
Is the mantra of today
And if you agree
If you see the irony then
Please retweet this ...

Please retweet this song
That's all they seem to say
Please retweet this song
Is the mantra of today
And if you agree
If you see the irony then
Please retweet this, don't delete this, just retweet this song

Released under a Creative Commons (attribution, non-commercial) license.

On Responsive Images — An interview with Dr. Stanley Dards

Wanting to serve different size images to different size screens is nothing new but at last the web has a practical solution for responsive images and art direction. Thanks to a lot of hard work by a lot of people, the Responsive Images Community Group has achieved the goal of seeing its API becoming a valuable building block of the web.

The <picture> element and its related srcset and other attributes are already being incorporated in Blink, Gecko and WebKit, have been included in the HTML5 validator and are part of the WHATWG HTML5 spec. A triumph of common sense and cooperation — hurrah!

To celebrate this, I was lucky enough to interview Dr. Stanley Dards, the wise old man of the web, to get his unique insight on the topic.

And here’s a good practical summary of responsive images and how you can use them today.

Examples of digital signage (videos)

Digital signage is a form of electronic display that shows television programming, menus, information, advertising and other messages.

Digital signage is a growing industry around the world but there is particularly strong interest here in Japan and neighbouring South Korea. Most recently, local businesses are focussing more and more on digital signage built with web technologies. However there seems to be some concern that existing standards (HTML5, CSS3, SVG, etc.) don’t address all the issues for web-based signage to really take off. For this reason, the Web-based Signage Business Group was set up as part of the W3C community.

In order to fully understand what’s required before more specific action is taken, use-cases and real-world examples are necessary. It’s often underestimated just how varied digital signage can be so here I’d like to show a few interesting examples from the Far East.

Funky-sized 360-degree display

The resolution of this display in Hikarie, Tokyo, is about 4,000 x 100 pixels. It makes designing for mobile devices look like child’s play! The content is mostly informational consisting of a floor guide, event information, a horizontal clock, etc. shown repeatedly. The back-to-back displays are sometimes in sync and sometimes show differing content.

Side-by-side advertising and info displays

Also from Tokyo is this contrast of digital signage usage. The left-hand screen shows a selection of 15-second and 30-second adverts based on a pre-determined order and frequency. The right-hand screen shows information about the train which is shown in timed mini-loops e.g. Japanese first, English second, but these are interrupted by external triggers such as the train arriving at a station.

Transparent product display

I couldn’t resist this South Korean example — it’s so cool! It was spotted by Rich Tibbett in Seoul and although it seems to be presumably a simple timed loop, it has a few points of interest. Obviously the transparent screen is one, but also the use of a skewed video whose timing has to be perfectly synchronised with the accompanying animation.

Addition: Vending machine with signage

As suggested by Karl in the comments, here’s a digital vending machine with a discreet built-in camera just above the screen. Normally it operates as a sign showing video adverts but when it detects a person in front of it, the video overlays disappear and it operates as a regular, albeit animated, vending machine. I did hear an unnerving rumour that it has the ability to detect characteristics (a person’s rough age, gender, etc.) to customise how it displays content but I have no solid information.

If you know of other interesting examples, feel free to leave a link in the comments section.

How to convert videos to WebM with FFmpeg/AVConv

After lots of trial and error each time I convert a video to WebM, I finally got around to posting this so I don’t forget next time. In a nutshell, here’s the conversion command that works for me:

avconv -i myvideo.mp4 -acodec libvorbis -aq 5 -ac 2 -qmax 25 -threads 2 myvideo.webm

What is this doing? Let’s go through it bit by bit. Assuming we have a video called myvideo.mp4, the simplest way to convert to WebM is with this little line:

avconv -i myvideo.mp4 myvideo.webm

Easy, but the quality will likely be rubbish hence the use of a few flags. The flags can be divided into three sorts: audio, video and the transcoding itself.

Audio flags

FFmpeg/AVConv outputConcentrating on the audio first, we should specify the audio codec which for WebM is Ogg Vorbis: -acodec libvorbis

In later versions the audio codec is Ogg Vorbis by default but personally I specify it just in case.

The quality can be adjusted with the -aq flag from -1 to 10 with a higher number meaning better quality. I’ve found 4 or 5 to be more than adequate.

The number of channels, e.g. mono (1) and stereo (2), is controlled with the -ac flag.

Video flags

Moving on to the video quality and thankfully it’s nice and simple. Like the audio, we can specify a quality level. With the libvpx library used for WebM, this is actually a quantization level, set with the -qmin and -qmax flags ranging from 0 to 51. In my tests, setting qmin makes no difference so I ignore it. Setting qmax effectively controls the maximum compression that will be applied to each frame. In other words, a higher qmax means higher compression, which results in lower quality and smaller file size. Obviously you should adjust this to whatever’s best for your circumstances, but I’ve found 25 to be a good starting point.

Note that with both the audio and video, setting flags for bitrate (-ab for audio, -b for video) makes little or no difference. Instead, setting quality flags indicates the use of a variable bitrate.

Transcoding flags

Finally, I tend to also use the -threads flag. This simply sets how many CPU threads to use when transcoding. If your PC has multiple cores then a higher number means faster processing but with less spare capacity for running other programs. Incidentally it’s also possible to do 2-pass encoding with WebM using the -pass flag.

FFmpeg naming confusion

Note that due to what seem to be political reasons, using the ffmpeg command in Ubuntu results in a sad message.

Was:

*** THIS PROGRAM IS DEPRECATED ***
This program is only provided for compatibility and will be removed in a future release. Please use avconv instead.

Now:

ffmpeg: command not found

It turns out that FFmpeg is very much alive, as is Libav (avconv), both with similar goals but with slightly different ways of doing it. I don’t follow the details and arguments but for practical purposes, using either the ffmpeg or avconv command is fine for converting videos to WebM with the above flags (at the time of writing). Of course, this may change eventually but for the sake of regular users, I hope not.

Unfortunately whatever FFmpeg/Libav disagreement there was has resulted in ffmpeg being removed from Ubuntu and possibly other Linux distros. For the transcoding commands in this post at least, the parameters are the same so if you have problems using avconv try with ffmpeg and vice versa.

Song: Social Network B


I want to introduce my child to online social networks but how best to explain some of the risks involved? Thought I’d start with a song…

This is a rewrite of the traditional folk song “Sloop John B”, famously covered by the Beach Boys (www.youtube.com/watch?v=nSAoEf1Ib58) although Cap’n Tom Jones deserves a mention for his singing attire: www.youtube.com/watch?v=fyQeHavCfPg

Video URL (with captions): Social Network B song

Downloads

For your downloading pleasure, here are the video and audio–only files.

License is Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported. If you need a media player, I recommend VLC.

Lyrics

We joined a social network.
Me and my best friend, Bert.
Around that walled garden
we did roam.
Surfing all night.
Got into a fight.
I had so much fun,
I don’t wanna go home.

I got a message from Jen,
my girlfriend from way back when,
but now she just won’t
leave me alone.
What did I say?
Why does she haunt me this way?
She’s nice ‘n’ all but
I wish she’d go home.

Then there’s that guy named Ray.
He took me to a crazy partay
and he took lots of photos
with his cell phone.
Now everyone’s seen
me doing that… thing.
I’m tired of getting laughed at.
I wanna go home.

Then there’s those men in black.
They won’t get off my back,
ever since they gave me
that emergency loan.
How do they know
every place that I go?
I’m getting kinda scared now.
I gotta go home.

But now my whole family
has signed up, just like me.
It’s the only way
I keep in touch with my mom.
It’s part of our lives.
How did we ever survive?
Now we’re in the network,
we’re not going home.
Once you’re in the network,
you can never go home.

On vendor prefixes — An interview with Dr. Stanley Dards

At last, the existence of vendor prefixes, one of my pet peeves, is under the spotlight. Also at last, the fact that not all modern browsers are WebKit (shock!) is getting some attention.

I (personally) believe vendor prefixes cause more harm than the problem they were designed to solve, namely how to elegantly introduce experimental features in browsers. My belief is that a non-browser-specific prefix such as -beta- has fewer obstacles to overcome than other proposals. Having said that, there’s clearly no easy, one-size-fits-all answer but hopefully more awareness and public discussion will lead to a more plausible solution.

So far, there have been great contributions to the discussion from all sides. A selection of ones I’ve found valuable, but may not necessarily agree with, are listed here:

And as if that wasn’t enough, here are the insights of one Dr. Stanley Dards:

How to create a DVD-compatible video in PiTiVi

Screenshot of PiTiVi settingsI wanted to edit one of my geeky songs in PiTiVi and burn it to DVD. After searching around and trying a few things it seemed to work, so for reference, here’s how I did it.

Important: Save the PiTiVi project before you start, as I’ve found it to be prone to crashing.

  1. Once the video and audio are ready, click “Render project”
  2. Click “Choose File” and enter a filename with the extension .mpg
  3. Click “Modify” and select either 576p PAL or 480p NTSC depending on your region
  4. Change the export container to “FFmpeg MPEG-2 PS format (DVD VOB)”
  5. Change the audio codec to “FFmpeg ATSC A/52A (AC-3)”
  6. In the audio settings, change the Bit Rate to 256000
  7. The video codec should be fixed at “FFmpeg MPEG-2″
  8. In the video settings, change the Bit Rate to 6548000
  9. Click “OK”, then “Render”

You can now use a program such as Bombono to burn straight to DVD, or DeVeDe (slightly better, in my opinion) to create an ISO which you can burn to DVD with Brasero or other tool.

Incidentally, before rendering I used “noise removal” and “normalize” in Audacity to create a clean soundtrack. I imported this into PiTiVi and removed the original audio. Result: success!

Web Guru

♫ “I wanna be a billionaire…” ♫ Yeah, it’s not a bad song (http://www.youtube.com/watch?v=8aRor905cCw), but a billionaire? Is that all? I wanna be something a bit more… special.

Video URL (with captions): http://www.youtube.com/watch?v=jdgXT0wEuFU

Downloads

For your downloading pleasure, here are the video and audio–only.

License is Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported. If you need a media player, I recommend VLC.

Lyrics

I wanna be a web guru,
so frickin’ much.
Someone even Zeldman couldn’t touch.

I wanna be on the cover of
Wired magazine,
smiling next to Sir Tim Berners Lee.

Oh every time I’d go online,
I’d fix another site’s design.
Another day, another interview.
Oh what, what I wouldn’t do,
to be a web guru.
To be a web guru.

Yeah, I would have a show like Diggnation, be a web sensation.
All the geeky girls could not resist the temptation.
Every newspaper would have a photo with my face on,
but not on the front page – in the technology section.

And I’d tell everybody how to make a website.
Using open standards is the only way to get it right.
And people would smile as I do my thing.
I’d give them something special, yeah, I’d start to sing!

Oh, every time I’d go online,
I’d fix another broken site.
Another day, another interview.
Oh what, what I wouldn’t do,
to be a web guru.
To be a web guru.

I wanna be a web guru,
so frickin’ much.

Web conference blues

You know that lonely feeling, where all the hip web designers and developers gather at the coolest conference and you’re stuck at your desk? Here’s a song for those of us that miss out on all the glamour.

The original song, by the way, is Folsom Prison Blues by Johnny Cash.

Video URL (with captions): www.youtube.com/watch?v=u_gAPRJmEWs

Downloads

For your downloading pleasure, here are the video and audio–only files.

License is Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported. If you need a media player, I recommend VLC.

Lyrics

I see the tweets a-comin’
They’re comin’ down the screen.
They’ve all got the same hashtag and I,
I know what that means.
It means I’m stuck here at my desk
and time keeps draggin’ on.
And the web conference keeps rollin’
all tickets sold except one.

When I was just a baby
my momma told me “Hey!”
“Always do things early or
you’ll regret it some day.”
Well I knew I should have booked
but I left it too late.
Yes, I missed the earlybird discount.
Why did I procrastinate?

I bet there’s web folks tweetin’
in a fancy conference hall.
They’re probably drinkin’ coffee
and talkin’ ’bout HTML.
Well I knew I had it comin’.
I know it’s not to be.
But those tweets, they keep on comin’
and that’s what tortures me.

If my boss gave me approval,
let me register online,
I’d jump on to the next plane.
I could still make it on time.
But I’m stuck here at my desk.
Here’s where I’m gonna stay.
I’ll just go right back to Farmville
and hoe my blues away.