Interactive Video: Think of the Possibilities for Education

Scene from Jack Black's "That Black Bat Licorice" video

Scene from Jack Black’s “That Black Bat Licorice” video

I’ve seen a couple of interactive videos recently. One was an version of Bob Dylan’s “Like a Rolling Stone.”

In the Bob Dylan video, you use up and down arrow keys to move between various visuals, all perfected coordinated with the song. I’m unable to embed the video here, but I urge you to check it out and play with the interactive elements.

The second, which is below, is by Jack Black for his song “That Black Bat Licorice.” In Jack Black’s video use the “3″ or the “B” key for 3 different versions of the video. Again, play with the controls as you watch it.

What got me all worked up as I watched these two videos is the educational possibilities. HTML, CSS, JavaScript, apps like Dreamweaver and Photoshop – imagine how something like this could be used to teach those topics.

Tools and Resources for Interactive Video

The folks at PBS’s POV Filmmakers have a great resource list of tools and costs. For each tool in their list, they give examples of work and describe what the tool does. Finding the best tool is also a topic of discussion on Quora. You can do some interactive work with videos on YouTube.

I would certainly be interested in seeing someone experiment with interactive video as a teaching tool. If you’ve seen anything like that on the web, please mention it in the comments.

The Basics of Choosing and Obtaining a Domain Name

Thinking of starting a new website? Two preliminary steps are choosing a domain name for your new site and then buying that domain name. Let’s take a look at some of the basics involved in that process.

Choosing a Domain Name

A good domain name is easy to remember and easy to spell. A domain name that’s easy to spell shouldn’t have characters like hyphens between words. It you want more than one word in the name, run them together like alistapart.com or webstandardssherpa.com. It’s a bit awkward to read, but for someone typing the domain name for A List Apart or Web Standards Sherpa in the location bar of a browser, it makes perfect sense.

Are you starting a website for an established business? Try to make the name reflect the business name and the branding that is already in place for the business. This may be a bit hard if it’s a commonly used name. For example, a Denver floor tile company might have trouble getting the name mountaintile.com. But perhaps denvermountaintile.com might be available.

If it’s a personal website, try to use your name. Karen McGrane owns karenmcgrane.com. How simple is that?

If it’s a blog where you’ll be exploring a particular point of view, pick a domain name that reflects your point of view. A name like Mountain Poet or Lesbian Dad tells you a story about what you can expect from the website before you’ve even visited.

Before you seek out a place to purchase the domain name, it’s good to have a few ideas ready to go. Your first choice might not be available.

Obtaining a Domain Name

Okay, you’ve got some ideas for a great domain name. It’s time to see what’s available for purchase.

There are literally thousands of places where you can buy a domain name. I use the domain name services connected to the hosting company where I do business. I like having the domain name company and the web hosting company connected. But I know people who think this is a bad idea. I think the reasoning of the people who think it’s a bad idea is that if one company shuts down suddenly, at least the other one still operates. If you choose an established company with a good history, I don’t think it’s something you need to worry about.

If you search for domain names on Google you get 84,000,000 results. There are a lot of choices! I’ll just pick one to use as an example. This does not imply that I endorse this company, it’s just an example. Also, prices vary, so the prices you see in these examples may be different from other domain name sellers.

A typical domain name search form.

A typical domain name search form.

At domain.com, you see something similar to what you see on any site where you want to purchase a domain name. You enter the name you are hoping to purchase. The site will tell you if the name is available. If it’s not available exactly as you want it, the site will suggest alternatives that are close to what you want.

I searched for vdebolt.com, my own domain name. Here’s what the tool told me.

The .com is gone, but other top level domains for that name are available.

The .com is gone, but other top level domains for that name are available.

I can’t buy vdebolt.com (duh, I already own it) but other top level domain name types are available like vdebolt.net or vdebolt.org. (Domain names are cheap. Many people buy several variations and direct them all to one site.)

If the name you want isn’t available, choosing whether or not to go with a .net or .org or some other .whatever is an option.

If you don’t want the .org or .net or .whatever, the tools usually suggest variations of the name based on your original search. Here are a few suggested to me:

A few of the suggested variations on my domain name.

A few of the suggested variations on my domain name.

Even better, create your own variations like the denvermountaintile.com example and use the search tool to see if it is available.

If you can’t get a name close to what you originally wanted, go back to step one and brainstorm a new idea. Keep trying until you eventually find a name that will work and is available.

You can buy the name for 1 year or for several. You’ll probably save a few dollars if you buy several years at a time. Don’t forget to renew it on time, or you might lose it!

You’re all set. Go build something awesome.

[Note: This post was originally published on Blogher.com.]

Twitter Wants Photos, Not Links, from Instagram Users

Virginia DeBolt's Instagram banner

It made news this week when Twitter asked Instagram users to post images directly to Twitter instead of posting a link to the photo on Instagram. When an image is posted on Instagram, the user can choose to send a link to the image to Twitter. An image from Instagram will show up on Facebook when shared there, but Facebook owns Instagram.

Yesterday I heard an interesting talk from Meagan Rhodes (@MeaganNRhodes) about using social media. (She’s worth following on Twitter if you’re interested in social media for your business.) She talked about how millennials are all on Instagram. She’s a young woman herself (at least when compared with me) and much more in touch with what millennials are doing with social media.

I personally don’t mind clicking through from Twitter to see a photo on Instagram, although Meagan said most younger people won’t click. But Twitter wants the original image to be put on Twitter and for the link to Instagram to go away.

There are more active users on Instagram now than there are on Twitter. That’s a big change. There are some reasons for this.

  1. Instagram is all visual. The world is rapidly becoming all visual.
  2. Instagram allows more than 140 characters.
  3. Instagram allows a number of hastags in each post. And additional hashtags can be added later in a comment on your own photo.
  4. Comments on Instagram photos are directly under the photo and don’t require searching back through different threads on Twitter. That means any hashtags associated with photo are right there on the page with the photo.
  5. The Instagram accounts of people who visit and comment on your photo are right there and easy to Follow.

When you list some of the reasons for Instagram’s heavy use by millennials, it becomes clear why Instagram is taking the lead over Twitter and winning the lottery for eyeballs.

It would be good for Twitter if users took their advice and actually posted their photos directly on Twitter. But how would it benefit anyone’s brand, traffic, or image sharing from the Instagram side of things? It would not.

A while back I wrote about adding Instagram photos to your own blog. Everything I said in that post still applies for two reasons. It your blog. It’s not a link to a photo as with Twitter.

CSS4 May Include Some Useful Pseudo Classes

The editor’s draft (emphasis on draft) for Level 4 Selectors from the W3C mentions some potential new pseudo selectors that the W3C describes as functional.

The matches-any Pseudo Class

This allows you to create a selector that targets a comma separated list of selectors. Here’s the syntax.

E:matches(selector1[, selector2, …]) {
    /* declarations */
}

For example

h1:matches(section, article, aside) {
    color: blue;
}

Another example, which selects a list of classes:

blockquote:matches(.pull, .feature, .break) { 
    color: blue; 
}

The negation Pseudo Class

The syntax:

E:not(negation-selector1[, negation-selector2, …]) {
    /* declarations */
}

In CSS3, only one selector was allow for this pseudo class. Now you can have a comma separated list as the syntax shows.

For example:

a:not([rel="prev"], [rel="next"]) {
    color: red;
}

The has Pseudo Class

This is a relational pseudo-class. It’s mentioned in the W3C draft document I mentioned, but it’s not mentioned in other places. I’m not sure if that means it’s brand new or was already discarded.

For example:

a:has(> img) {
     border: none;
}

That selector would remove a border from an <a> element that contain an <img> child.

Support?

You can check your efforts to work with these new CSS4 potential selectors using the test at css4-selectors.com. There’s also a list of all selectors from CSS1 to CSS4 on that site, but it does not mention the :has selector.

Resources for Material Design

Material Design is a set of design principles created by Google for developers creating apps for Android. They call it a design language. The concepts don’t apply only to Android, of course. Some of the resources I’ll mention below can be helpful to anyone.

You may be familiar with the way things designed this way look and work, because Google has deployed it on most of its sites since last June.

color blocks for picking a color scheme

The opening page of materialpalette.com

Material Palette is a bold color picking tool. Simply pick two colors and you are offered a color palette.

a group of colors with color codes

The color palette for blue and deep orange

Material Palette is quick, simple, and useful to any app developer.

To back up a bit, a definition and description of what Material Design is all about can be found at developer.android.com. It deals with more than color choices. The design concepts also involve animations, shadows, and drawables.

Google also provides a set of basics about Material Design. The Google site discusses the goals and principles of Material Design and goes on to explain style, animation and many more aspects of development using the concepts.

MaterialUp.com offers inspiration in the form of daily examples of how the concepts have been used in websites and apps. This site and Material Palette are interconnected.

A Must See Movie: The Imitation Game

Keira Knightly and Benedict Cumberbatch in The Imitation Game.

Keira Knightly and Benedict Cumberbatch in The Imitation Game.

I don’t normally review movies here, but I’m making an exception of this film about the early beginnings of the computer because I think it’s a must see for anyone working with a computer.

The Imitation Game stars Benedict Cumberbatch as English mathematician and logician, Alan Turing. Turing helped crack the Enigma machine, a Nazi encryption device, by developing a code breaking machine which has come to be known as the computer.

Benedict Cumberbatch as Alan Turing next to his "Turing machine."

Benedict Cumberbatch as Alan Turing next to his “Turing machine.”

Cumberbatch gives a brilliant performance. He’s absolutely flawless as this graceless, socially inept, mathematical genius who was a marathon runner and a closeted homosexual.

The team of mathematical genius watching the first time they decrypt a message from the Enigma machine

The team of mathematical geniuses at Bletchley Park watching the first time they decrypt a message from the Enigma machine.

Others starring in The Imitation Game are Keira Knightley, Matthew Goode, Allen Leech, and Matthew Beard as the team at Bletchly Park, site of the UK’s code and encryption school, who worked together to crack the Enigma machine.

Charles Dance plays the commander and Rory Kinnear plays the detective whose decision to prosecute Turing for homosexuality probably led to his death.

Alex Lawther plays the school boy Turing: a wonderful performance from one so young. By peering into Turing’s past, it helps the audience see how so many things that happened were the way they were.

The movie starts in 1951 and jumps between that time, the war years, and Turing’s school days.

For anyone interested in computers (and who isn’t) this movie is a must see. Additionally, it’s an excellent rendering of an important historical period, complete with film from the time. The film looks at what it means to be different, to not fit in, and to be forced to hide what you are for fear of imprisonment.

Images ©Black Bear Pictures

For Completeness

For completeness, you may want to watch some of the other movies about Alan Turing. Sir Derek Jacobi played him in the 1997 Breaking the Code. There’s a documentary called Codebreaker. If you haven’t already seen these two films, they should be watched as well. I intend to watch them!

If you want to go old school and get more factual information than a movie offers, there are some books about Alan Turing: Alan Turing: The Enigma: The Book That Inspired the Film “The Imitation Game” and Alan Turing: Unlocking the Enigma.