Nat & Lo’s 20% Project

Nat and Lo in front of a Google sign

When you work at Google, you get to spend 20% of your time doing something you think of yourself. Googlers Natalie Hammel and Lorraine Yurshansky decided to spend their time creating a web series about projects at Google. They call it “Nat & Lo’s 20% Project.”

Their videos are on YouTube. Watch the first one and you can subscribe to their YouTube channel and/or select the next video you want to watch. I suggest watching them all. You’ll get an inside view of some of the things that make Google so ubiquitous in your life.

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.

The State of Things and What it Means for Web Education

Connection

Several interesting things have come up in the last week or so that I think need to be connected.

Who’s Not Online?

Pew Internet did a study on Who’s Not Online and Why. They found that 15% of American adults do not use the internet at all, and another 9% of adults use the internet but not at home.

As to who those non-Internet users are, Pew found this:

Internet use remains strongly correlated with age, educational attainment, and household income. One of the strongest patterns in the data on internet use is by age group: 44% of Americans ages 65 and older do not use the internet, and these older Americans make up almost half (49%) of non-internet users overall.

That hardly seems like earth shaking news, but Pew reports it as if it is. As for why they are not using the Internet, there were many reasons given. 34% of non-users said they just weren’t interested and didn’t consider it relevant to their daily lives. 32% cited usability issues, learning issues, and worries about privacy or spam. 19% cited price, and 7% said it wasn’t available where they lived.

A similar report that was written about in The NY Times prompted this letter and post from disability lawyer Lainey Feingold about the digital divide and disability.

The Mobile-Born

Kobe drawing
After reading about the non-Internet using elderly and poor, I saw this TechCrunch post on The Rise of the Mobile Born. This post by Paul Holland talks about The Mobile Born, which he describes as,

A generation of kids that have been raised while literally gnawing on the equivalent of a supercomputer — otherwise known as mom’s smartphone.

Holland says that companies are embracing mobility and transforming their business practices and work arrangements through mobility. He predicts changes in office processes, organizational structures, consumer engagement and young people who have never known any kind of interaction other than that which we create on mobile devices.

What Does That Mean for Teaching Web Design

As a web educator, I look at trends like those reported above from Pew Internet and TechCrunch, and think about what all that means to me in the classroom.

At Smashing Magazine, Jen Kramer wrote about Teaching Web Design to New Students in Higher Education. I think it’s worth taking a look at her suggestions and how they will help us meet the changing world that surrounds us.
It's rough out there for a web designer.

Kramer first talks about the classes where students are taught to build a “comp.” An image from Photoshop or Fireworks that somehow will get translated into a web page. Her ideas on making this type of class more useful are excellent. She suggests:

  • Build a design in 12 evenly-sized columns.
    This is a great time to explain about grids and how they work. Have students build designs based on this grid to demonstrate their understanding.
  • Show versions of the design.
    If the design looks one way at 960 pixels, how does it look at 1200 pixels? 320? 767? Have students use the same content in their designs, rearranged for these different screen environments. Be sure to ask about transitions — what happens as the design moves from 767 to 320 pixels?
  • Ask questions about photos.
    What does that big photo banner stretching so beautifully across the top of the page at 960 pixels look like at 767 pixels? What happens between 960 and 767 pixels?
  • Encourage students to think about touch.
    This is particularly important at smaller screen dimensions, but desktops and laptops are trending towards touch as well. Encourage students to build navigation suitable for fat fingers, for example.
  • Deemphasize slicing.
    Rather than thinking about the comp as the source of imagery for a website, consider it its own prototype. Slicing may not be required at all, because images may need to be generated in several sizes for different screen dimensions. Even background graphics can be generated in their own independent documents. By deemphasizing slicing, you also deemphasize the centrality of this comp for the website’s design. With responsive design, the comp sets a goal or a direction, but tweaking is required to accomodate the space between 320, 767 and 960 pixels and beyond.

Kramer also has some great ideas about teaching HTML and CSS.

  • Standardize in one browser.
    I’d recommend working with Firefox or Chrome as the standard browser in class, because they’re available on Mac and PC and are the most standards-compliant. Tell students that this is the only browser that matters for the purpose of this class. Cross-browser issues should be dealt with later, once students understand how HTML and CSS work completely in this browser. When cross-browser problems are introduced too soon, students get confused, unclear whether a particular problem is due to the browser or just badly formed code.
  • Teach HTML5.
    Students should learn how to mark up documents with sections, asides, navigation, headers and footers from the start.
  • Teach CSS3 and all types of selectors.
    Make sure students understand media queries as soon as they are able to. Introduce adjacent sibling selectors, child selectors, universal selectors, various pseudo-classes and so forth. Again, worry less about browser support, because these students have years before graduation.
  • Incorporate grid-based thinking early on.
    Even if students can’t code their own grid yet, they could certainly build layouts while thinking about 12 columns, using em and/or percentage widths and sizes. Have students code standard shapes of pages, such as two- and three-column layouts, with or without headers, footers and horizontal navigation, rather than leaving students open to code any type of layout. Understanding the trade-offs between design and code is important, so always address those.
  • As soon as students grasp floats and positioning, teach how to code a grid.
    Because students have been thinking about Web design with grid-based principles, this transition should be fairly quick for them.
  • Responsive design is now a short lecture, not a long one.
    Students are now able to pull together grid-based layouts and media queries. They’ve likely encountered image-resizing issues along the way, but if not, this is the time to discuss them.
  • Now is the time to discuss browser compatibility.
    Now that students have mastered valid, standards-compliant, responsive code, it’s time to think about browser compatibility. One way to introduce this is to work with poorly supported HTML5 tags or CSS3 elements such as rounded corners.
  • CSS preprocessing is a hot topic.
    Centralizing CSS variables is a great idea and is bound to be a core CSS skill, required by employers, in the next year or two. (Some say it’s already here.) Some LESS and Sass concepts, such as centralized variables and logic, also offer a smooth transition to a course on JavaScript and jQuery, in which similar concepts would be important.
  • Covering responsive design frameworks is not a bad idea.
    If there’s time left in class, this is a great topic to explore. I’d recommend covering Bootstrap if you’ve taught LESS, or Foundation if you’ve taught Sass. Students will learn how to read someone else’s code (an important skill!) and how to read documentation; they will also learn new technology, as well as explore the positives and negatives of using a documented, open-source framework. Finally, they will learn to customize this code for their own purpose.

We all know that things are going to continue to condense, grow smaller and more mobile. Remember Moore’s Law? Just as we once relied on floated divs to create columns, and now we rely on grid systems with media queries to create responsive designs, there will be a future web design and development trend for even smaller and more mobile displays. Surely Google Glass is not as small as it’s going to get. Teaching students how to design for this future is challenging indeed.

I applaud Jen Kramer for her excellent teaching ideas. But I encourage you to keep thinking smaller and smaller, more mobile and wearable, and completely wireless as the direction web education must take.

Useful Links: 10 Thinkers, HTML5 templates, cultural narratives

The CNN 10: Thinkers is an inspirational and fascinating look at ten thinkers in the field of technology. The first thing I noticed about the list was that it is not all white males. The second thing I noticed was – wow! these people are amazing. Hat tip to @redcrew for bringing the post to my attention.

Speckyboy has several free responsive HTML5 templates available. You might want one for yourself or to give students something to start with on a class project.

Oh, wow, I think someone at The New York Times Magazine has been listening to me. The article I Am Woman, Watch Me Hack deals with this: One theory about why so few women go into computer science says it has less to do with innate capabilities and more to do with cultural narratives, like “CSI” and “Bones”.

Useful links: Gender gap, Jenn Lukas, Age gap

Hillary Clinton Announces Partnership to Help 5 Million Women and Girls is a recent post of mine at BlogHer about Intel and World Pulse teaming up to expand digital literacy skills for girls.

Ladies in Tech with Jenn Lukas at CTRL+CLICK CAST.

Designing User Interfaces for Older Adults: Myth Busters is SO RIGHT. The idea that older people don’t understand anything is SO WRONG. Here is wisdom from UX Matters.

Ultimate Mentor Adventure for Girls in STEM

[Reprinted from Old Ain’t Dead.]

Marvel is doing something marvelous for girls who are interested in Science, Technology, Engineering, and Math (STEM) around the release of Thor: The Dark World. The program is called Ultimate Mentor Adventure. Here’s how it works.

Ultimate Mentor Adventure promo
Natalie Portman in the Ultimate Mentor Adventure promo

Natalie Portman, who plays Jane Foster, an astrophysicist, in Thor: The Dark World describes the program in a video you can see here.

  • Girls from the U.S. in grades 9 – 12 can apply. The minimum age is 14.
  • Each girl is connected to a mentor who is working in a field in which the girl is interested.
  • The girl interviews the mentor and makes a video.
  • The videos are entered in the contest.
  • The winner gets to go to the opening of Thor: The Dark World in California and see the video they made shown along with the film. The winner also gets to go behind the scenes at the movie.

A girl really cannot lose by participating in this mentor adventure. Just by participating she gets to meet a woman in a position she wants to know more about. The girls get help finding the mentors and making the videos. Everyone who participates will have a positive experience whether she wins or not.

Kudos to Marvel for this brilliant idea.