Tumblelog by Soup.io
Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

April 14 2013

16:22

Get started with Web coding. Part 5: How to use Git and GitHub

If you want to design the future, learn to code.

That’s how I concluded the last post in this series. So far, I’ve discussed HTML and CSS, JavaScript and jQuery, the command line, and software and CMSs. The vast majority of journalists out there are probably not going to stick with the program much past part 1 (HTML and CSS). But for those of you still with me, Git has become a de facto standard in a very short time, so let’s go!

What is Git? Git is a version control system (VCS). Version control helps you manage and keep track of changes you make to your online projects. Version control is considered essential for teams working together on a digital project. Git is free and open source — there are no fees.

How do you get Git? You must download and install Git on your own computer. Follow these instructions for any operating system. Skip past the part “Installing from Source” and go down the page to the part for Windows or for Mac. For Mac OS, download the Git installer, which launches a typical DMG file. Note: Some steps below will not work if Git has not been installed.

How do you use Git? This has a long list of possible answers, and you will need to learn a lot more if you are working on a project together with teammates. I’m going to focus on the solo user, such as one journalism student working on his or her own files. Basically, once Git is in place in a project folder on your hard drive (explained below), you will add files from your project, commit files after you have updated or changed them, and push files to an online site or repository (repo) when ready. Even if you are not working with teammates, this can help you prevent mistakes if you work on multiple computers — you can pull the latest version from the repo to quickly incorporate any changed files on the local computer.

You might be thinking, well, my Web sites or projects are very small, only a handful of files, so I don’t need this Git stuff. Okay, fair enough. But if you ever need to share a site or a project with other people, GitHub provides an easy way to do it. Others can download your entire project by clicking the Zip button on the GitHub repo page.

GitHub image - download zipped file

I have Git — now what?

If you have installed Git and done nothing else, what’s next? Do you have an account on GitHub? No? Then let’s do that next. (Yes? Skip down to the following subheading.)

GitHub image - First steps at GitHub

GitHub is a social site for code. It has more than 3 million users and is free to use, unless you want to have private code repos (then you’ll need to pay). So if you’re not going to pay, don’t put anything on GitHub that you don’t want the world to see. Coders from all around the world share their code publicly on GitHub. This is one of the coolest things about it. Even if you do not have a GitHub account, you can look at other people’s code, like this.

Go to GitHub, type a username, your email address and a password, and you’re good to go. Now read this and do what it says. It explains how to set up your very first “repo,” which means a repository for your files and code.

GitHub image - Create a new repo

If you have a little code project on your own computer already, maybe it has a name like photo-slider or personal site or scrolling_game. That is, you’ve got files inside a folder with a name like one of those names. If so, it would make sense to name your first repo the same way, and you could try putting a real project into your first repo. (Note that repos use hyphens in the name, not an underscore or a space.) Check out the way repos are named on GitHub’s Explore page.

Note: You do not need to create a README right away. You can wait.

I have a GitHub account, and so …

You have already downloaded and installed Git, but you haven’t set it up yet. I wanted you to wait a bit because this part requires you to go to the command line. It attaches your name to your work, and your GitHub login details. If you’re already comfortable with the command line, of course this will be simple for you. If you’re not used to the command line, you can do it in the client program — read on!

Assuming you are not a command-line jockey, you should now download and install GitHub for Mac (OSX 10.7+ only) or GitHub for Windows. Each of those is a client program that lets you manage your projects and all associated files without going to the command line. To get started, you will need your GitHub username and password — which is why you had to set up GitHub before this part!

After you supply your GitHub username and password to the client program, you’ll see the name of your first repo (the one you made earlier on GitHub) appear there. (If you don’t see the name of your repo, click your username at the left side.) Notice it says “Clone to Computer” on a button to the right of the repo name (shown below). Do not click it. (There are no files in your repo on GitHub, so there’s nothing to clone!)

GitHub for Mac image - Clone to Computer button

Interlude: Set your username and email address in the client program now.

GitHub for Mac image - git config information

Now, back to the “clone” thing: If you had files on GitHub.com and not on your own computer, then you would press the clone button. This would be perfect if you had an empty folder just waiting on your computer to receive a bunch of files. Cloning would bring the whole repo from GitHub down to your local folder.

However, if you have files for this project on your computer, and no files at GitHub.com, here’s how to copy all those files up to GitHub:

  1. File menu > Add Local Repository
  2. Navigate to the folder on your computer that contains all your project files.
  3. Open the folder and click Add.
  4. The client alerts you that this is not a Git repository (yet). Click Yes to make the magic happen. (This is what I meant above when I said “once Git is in place in a project folder on your hard drive.” When you click Yes, the client invisibly runs a git init command, which enables Git in that one folder.)

GitHub for Mac client image - Add Local Repo

Now your client flips to the Changes tab, and you see all the files that are inside the folder. These files are waiting for your first commit. (This is a big difference between the client and doing Git at the command line, by the way.) You’re about to do several steps — to upload all the files to your GitHub repo (where others can see and easily download them as one zipped file) — so make sure these are files you don’t mind others having access to.

Ready? Okay. Find the text near the upper left that says “Commit summary.” Replace that text with a few words that describe what’s been changed since your last commit. Since you never committed to this repo before, type “first commit.”

GitHub for Mac client image - Type a commit message

Click the button Commit & Sync. Now your local folder and the (remote) repo are sync’d. But your files are not at GitHub.com yet.

To send the files this first time requires two steps in the client:

  1. Click the Settings tab in the client. This is where you provide the Web address of your repo at GitHub. Get the address from your repo’s page at GitHub (see illustration below). Then click Update Remote.
  2. Click the Branches tab in the client. Then click the Publish button on the right side. Refresh your repo’s page at GitHub, and you will see all your files there. Click any file to open it. You can even edit files right there, on GitHub. (Warning: If you make a change on GitHub, be sure to do a pull in the client program — it’s on the Repository menu.)

GitHub image - Get the URL of a GitHub repo

You’ll need to explore the help document for your client program — Mac or Windows — to get the hang of keeping everything sync’d up in true Git fashion. You might even find yourself yearning to learn more about the command line in just a little while.

GitHub image - Help files for GitHub for Mac client program

Forking and branches

Two bits of jargon you’ll hear often around the world of Git are fork and branch.

If you fork someone’s code on GitHub, you get an independent copy of that whole repo, in your GitHub account. You can then modify any part of it without affecting the original. The files will not appear on your computer unless you clone the repo locally (about cloning: see the third paragraph under the subheading above, “I have a GitHub account, and so …”). Note: You can download someone’s repo without forking it.

Branches are vital for teams working on different pieces of one project. A branch is a copy of the code that stays in the same project, a parallel duplicate. A branch can later be merged back into the master, or original set, of all files and code. If any changes are incompatible, Git highlights them all for you so that human intelligence can decide what to keep and what to delete. Note: The original, first or only set of files is also a branch, named master. So every repo has at least one branch.

Git vs. FTP

Are you regularly updating and uploading files to a Web server? You might like to use Git to handle that for you. There’s a repo for that, in fact! Separately, there’s a very straightforward how-to for the command line. Less straightforward — this 26-minute video is almost scary (the guy opens a lot of apps in the process of figuring out, live, how to do this) but kind of fun to watch; he uses Beanstalk, a paid service. See also: Using Git for Deployment (detailed).

You must know your way around your hosting server before you try this part (replacing FTP). And you’ve got to be comfortable with the command line. If you’re not, better stick with FTP, I think.

More Information About Git

This Series

16:22

Get started with Web coding. Part 5: How to use Git and GitHub

If you want to design the future, learn to code.

That’s how I concluded the last post in this series. So far, I’ve discussed HTML and CSS, JavaScript and jQuery, the command line, and software and CMSs. The vast majority of journalists out there are probably not going to stick with the program much past part 1 (HTML and CSS). But for those of you still with me, Git has become a de facto standard in a very short time, so let’s go!

What is Git? Git is a version control system (VCS). Version control helps you manage and keep track of changes you make to your online projects. Version control is considered essential for teams working together on a digital project. Git is free and open source — there are no fees.

How do you get Git? You must download and install Git on your own computer. Follow these instructions for any operating system. Skip past the part “Installing from Source” and go down the page to the part for Windows or for Mac. For Mac OS, download the Git installer, which launches a typical DMG file. Note: Some steps below will not work if Git has not been installed.

How do you use Git? This has a long list of possible answers, and you will need to learn a lot more if you are working on a project together with teammates. I’m going to focus on the solo user, such as one journalism student working on his or her own files. Basically, once Git is in place in a project folder on your hard drive (explained below), you will add files from your project, commit files after you have updated or changed them, and push files to an online site or repository (repo) when ready. Even if you are not working with teammates, this can help you prevent mistakes if you work on multiple computers — you can pull the latest version from the repo to quickly incorporate any changed files on the local computer.

You might be thinking, well, my Web sites or projects are very small, only a handful of files, so I don’t need this Git stuff. Okay, fair enough. But if you ever need to share a site or a project with other people, GitHub provides an easy way to do it. Others can download your entire project by clicking the Zip button on the GitHub repo page.

GitHub image - download zipped file

I have Git — now what?

If you have installed Git and done nothing else, what’s next? Do you have an account on GitHub? No? Then let’s do that next. (Yes? Skip down to the following subheading.)

GitHub image - First steps at GitHub

GitHub is a social site for code. It has more than 3 million users and is free to use, unless you want to have private code repos (then you’ll need to pay). So if you’re not going to pay, don’t put anything on GitHub that you don’t want the world to see. Coders from all around the world share their code publicly on GitHub. This is one of the coolest things about it. Even if you do not have a GitHub account, you can look at other people’s code, like this.

Go to GitHub, type a username, your email address and a password, and you’re good to go. Now read this and do what it says. It explains how to set up your very first “repo,” which means a repository for your files and code.

GitHub image - Create a new repo

If you have a little code project on your own computer already, maybe it has a name like photo-slider or personal site or scrolling_game. That is, you’ve got files inside a folder with a name like one of those names. If so, it would make sense to name your first repo the same way, and you could try putting a real project into your first repo. (Note that repos use hyphens in the name, not an underscore or a space.) Check out the way repos are named on GitHub’s Explore page.

Note: You do not need to create a README right away. You can wait.

I have a GitHub account, and so …

You have already downloaded and installed Git, but you haven’t set it up yet. I wanted you to wait a bit because this part requires you to go to the command line. It attaches your name to your work, and your GitHub login details. If you’re already comfortable with the command line, of course this will be simple for you. If you’re not used to the command line, you can do it in the client program — read on!

Assuming you are not a command-line jockey, you should now download and install GitHub for Mac (OSX 10.7+ only) or GitHub for Windows. Each of those is a client program that lets you manage your projects and all associated files without going to the command line. To get started, you will need your GitHub username and password — which is why you had to set up GitHub before this part!

After you supply your GitHub username and password to the client program, you’ll see the name of your first repo (the one you made earlier on GitHub) appear there. (If you don’t see the name of your repo, click your username at the left side.) Notice it says “Clone to Computer” on a button to the right of the repo name (shown below). Do not click it. (There are no files in your repo on GitHub, so there’s nothing to clone!)

GitHub for Mac image - Clone to Computer button

Interlude: Set your username and email address in the client program now.

GitHub for Mac image - git config information

Now, back to the “clone” thing: If you had files on GitHub.com and not on your own computer, then you would press the clone button. This would be perfect if you had an empty folder just waiting on your computer to receive a bunch of files. Cloning would bring the whole repo from GitHub down to your local folder.

However, if you have files for this project on your computer, and no files at GitHub.com, here’s how to copy all those files up to GitHub:

  1. File menu > Add Local Repository
  2. Navigate to the folder on your computer that contains all your project files.
  3. Open the folder and click Add.
  4. The client alerts you that this is not a Git repository (yet). Click Yes to make the magic happen. (This is what I meant above when I said “once Git is in place in a project folder on your hard drive.” When you click Yes, the client invisibly runs a git init command, which enables Git in that one folder.)

GitHub for Mac client image - Add Local Repo

Now your client flips to the Changes tab, and you see all the files that are inside the folder. These files are waiting for your first commit. (This is a big difference between the client and doing Git at the command line, by the way.) You’re about to do several steps — to upload all the files to your GitHub repo (where others can see and easily download them as one zipped file) — so make sure these are files you don’t mind others having access to.

Ready? Okay. Find the text near the upper left that says “Commit summary.” Replace that text with a few words that describe what’s been changed since your last commit. Since you never committed to this repo before, type “first commit.”

GitHub for Mac client image - Type a commit message

Click the button Commit & Sync. Now your local folder and the (remote) repo are sync’d. But your files are not at GitHub.com yet.

To send the files this first time requires two steps in the client:

  1. Click the Settings tab in the client. This is where you provide the Web address of your repo at GitHub. Get the address from your repo’s page at GitHub (see illustration below). Then click Update Remote.
  2. Click the Branches tab in the client. Then click the Publish button on the right side. Refresh your repo’s page at GitHub, and you will see all your files there. Click any file to open it. You can even edit files right there, on GitHub. (Warning: If you make a change on GitHub, be sure to do a pull in the client program — it’s on the Repository menu.)

GitHub image - Get the URL of a GitHub repo

You’ll need to explore the help document for your client program — Mac or Windows — to get the hang of keeping everything sync’d up in true Git fashion. You might even find yourself yearning to learn more about the command line in just a little while.

GitHub image - Help files for GitHub for Mac client program

Forking and branches

Two bits of jargon you’ll hear often around the world of Git are fork and branch.

If you fork someone’s code on GitHub, you get an independent copy of that whole repo, in your GitHub account. You can then modify any part of it without affecting the original. The files will not appear on your computer unless you clone the repo locally (about cloning: see the third paragraph under the subheading above, “I have a GitHub account, and so …”). Note: You can download someone’s repo without forking it.

Branches are vital for teams working on different pieces of one project. A branch is a copy of the code that stays in the same project, a parallel duplicate. A branch can later be merged back into the master, or original set, of all files and code. If any changes are incompatible, Git highlights them all for you so that human intelligence can decide what to keep and what to delete. Note: The original, first or only set of files is also a branch, named master. So every repo has at least one branch.

Git vs. FTP

Are you regularly updating and uploading files to a Web server? You might like to use Git to handle that for you. There’s a repo for that, in fact! Separately, there’s a very straightforward how-to for the command line. Less straightforward — this 26-minute video is almost scary (the guy opens a lot of apps in the process of figuring out, live, how to do this) but kind of fun to watch; he uses Beanstalk, a paid service. See also: Using Git for Deployment (detailed).

You must know your way around your hosting server before you try this part (replacing FTP). And you’ve got to be comfortable with the command line. If you’re not, better stick with FTP, I think.

More Information About Git

This Series

April 02 2013

22:07

Using ECMAScript 5 Objects and Properties

ECMAScript 5's object and properties help you make your JavaScript stronger and safer.
14:37

A Kinder, Gentler Introduction to Regular Expressions

I struggle to remember how to put together a pattern search with regular expressions, so I was excited to discover Lea Verou‘s talk from May 2012, which breaks down how to construct them for JavaScript. (What she teaches can be applied to other languages as well.)

Lea is a front-end engineer who works for the World Wide Web Consortium (W3C). She created RegExp Playground so you can experiment with your own regex patterns. She uses it in her talk below.

March 31 2013

17:49

10 examples of bespoke article design and scrolling goodness

Have you been noticing all the pretty sliding/scrolling articles that are popping up around the Internetz? My students think they’re wonderful, and so do I. So let’s look at a roundup of some great ones.

Screenshot: Snow Fall

Of course we’ll begin with Snow Fall: The Avalanche at Tunnel Creek. This New York Times multimedia feature had the world journalism community talking and tweeting like crazy as soon as it appeared online. This blog post – More than 3.5 million page views for New York Times’ “Snow Fall” feature – reproduces an internal New York Times memo about how popular the multimedia feature turned out to be. In this post at Source (a project concerning journalism code) – How We Made Snow Fall: A Q&A with the New York Times team – the graphics director, graphics editor, video journalist, and deputy director for digital design who created this feature explain how they did it.

Screenshot: America: Elect!

America: Elect! (from The Guardian) is not only a fun, slidy mini-graphic novel – it’s also the subject of a short but very helpful how-to article: How we built our “America: Elect!” graphic novel interactive, by interactive developer Julian Burgess. Parallax scrolling libraryskrollr (check this one out).

Screenshot: Dock Ellis 1 of 2

Screenshot: Dock Ellis 2 of 2

ESPN was ahead of the pack with The Long, Strange Trip of Dock Ellis, a lavishly illustrated story about the Pittsburgh Pirates pitcher. Plugincurtain.js.

Screenshot from Pitchfork 1

Screenshot from Pitchfork 2

Pitchfork magazine used the technique as a showcase for photography, featuring Bat for Lashes singer Natasha Khan, in a cover story titled Glitter in the Dark.

Screenshot: Lost and Found

Lost and Found, an NPR story about photographer Charles W. Cushman, has a beautiful horizontal scrolling audio story in the middle of the page. Look for the Play button below the heading “The Year Is 1938.” Frameworkpopcorn.js.

Screenshot: Fracking

Screenshot: Every Last Drop

The Guardian‘s Burgess linked to a scrolling graphic story about fracking — What goes in and out of hydraulic fracturing (it appears that designer Linda Dong rolled her own scrolling code for this one) — which reminded me a little of Every Last Drop, which uses scrolling graphics to tell the story of how much water we waste every day (parallax scrolling libraryskrollr). I found the fracking story to be more journalistic, especially given the sources listed at the end.

Screenshot: Cycling's Road Forward

Another long-form narrative dressed up very nicely with this technique: Cycling’s Road Forward, from The Washington Post. Framework: Bootstrap. Tools include Modernizr.

Screenshot: Unfit for Work

Unfit for Work (from Planet Money, a program that runs on NPR) has a beautiful responsive article design. I love the big data graphics embedded throughout the article. I’ve been all over the code looking for the bit that slides the sections up and down, but all I can find is very clean CSS and HTML, great attention to responsiveness, and assorted JavaScript files that don’t reference the section element, the H3, or the wallpaper class. I’m super-impressed by the code, because it looks like it can be replicated for other articles. In other words, this design is repeatable.

Screenshot: Too Young to Wed

Too Young to Wed (from the United Nations Population Fund) is a little harder to navigate than the others, in my opinion (it interrupts the vertical scroll with horizontal-scrolling slideshows), but the gorgeous photography and heartbreaking story make it well worth a look. jQuery plugin: ScrollTo.

There are many tutorials for parallax scrolling — here’s one.

Related: The future of the feature: Breaking out of templates to build customized reading experiences, by Kevin Nguyen, November 2012

Do you have other examples to recommend? Please share links in the comments!

17:49

10 examples of bespoke article design and scrolling goodness

Have you been noticing all the pretty sliding/scrolling articles that are popping up around the Internetz? My students think they’re wonderful, and so do I. So let’s look at a roundup of some great ones.

Screenshot: Snow Fall

Of course we’ll begin with Snow Fall: The Avalanche at Tunnel Creek. This New York Times multimedia feature had the world journalism community talking and tweeting like crazy as soon as it appeared online. This blog post – More than 3.5 million page views for New York Times’ “Snow Fall” feature – reproduces an internal New York Times memo about how popular the multimedia feature turned out to be. In this post at Source (a project concerning journalism code) – How We Made Snow Fall: A Q&A with the New York Times team – the graphics director, graphics editor, video journalist, and deputy director for digital design who created this feature explain how they did it.

Screenshot: America: Elect!

America: Elect! (from The Guardian) is not only a fun, slidy mini-graphic novel – it’s also the subject of a short but very helpful how-to article: How we built our “America: Elect!” graphic novel interactive, by interactive developer Julian Burgess. Parallax scrolling libraryskrollr (check this one out).

Screenshot: Dock Ellis 1 of 2

Screenshot: Dock Ellis 2 of 2

ESPN was ahead of the pack with The Long, Strange Trip of Dock Ellis, a lavishly illustrated story about the Pittsburgh Pirates pitcher. Plugincurtain.js.

Screenshot from Pitchfork 1

Screenshot from Pitchfork 2

Pitchfork magazine used the technique as a showcase for photography, featuring Bat for Lashes singer Natasha Khan, in a cover story titled Glitter in the Dark.

Screenshot: Lost and Found

Lost and Found, an NPR story about photographer Charles W. Cushman, has a beautiful horizontal scrolling audio story in the middle of the page. Look for the Play button below the heading “The Year Is 1938.” Frameworkpopcorn.js.

Screenshot: Fracking

Screenshot: Every Last Drop

The Guardian‘s Burgess linked to a scrolling graphic story about fracking — What goes in and out of hydraulic fracturing (it appears that designer Linda Dong rolled her own scrolling code for this one) — which reminded me a little of Every Last Drop, which uses scrolling graphics to tell the story of how much water we waste every day (parallax scrolling libraryskrollr). I found the fracking story to be more journalistic, especially given the sources listed at the end.

Screenshot: Cycling's Road Forward

Another long-form narrative dressed up very nicely with this technique: Cycling’s Road Forward, from The Washington Post. Framework: Bootstrap. Tools include Modernizr.

Screenshot: Unfit for Work

Unfit for Work (from Planet Money, a program that runs on NPR) has a beautiful responsive article design. I love the big data graphics embedded throughout the article. I’ve been all over the code looking for the bit that slides the sections up and down, but all I can find is very clean CSS and HTML, great attention to responsiveness, and assorted JavaScript files that don’t reference the section element, the H3, or the wallpaper class. I’m super-impressed by the code, because it looks like it can be replicated for other articles. In other words, this design is repeatable.

Screenshot: Too Young to Wed

Too Young to Wed (from the United Nations Population Fund) is a little harder to navigate than the others, in my opinion (it interrupts the vertical scroll with horizontal-scrolling slideshows), but the gorgeous photography and heartbreaking story make it well worth a look. jQuery plugin: ScrollTo.

There are many tutorials for parallax scrolling — here’s one.

Related: The future of the feature: Breaking out of templates to build customized reading experiences, by Kevin Nguyen, November 2012

Do you have other examples to recommend? Please share links in the comments!

October 05 2011

12:05

3 Key Reflections From Knight-Mozilla's Hacktoberfest in Berlin

Last week, the Knight-Mozilla News Technology Partnership invited 20 developers, designers, and journalists to take part in a week of hacking and making in Berlin. I forget at what point in the planning one of the participants jokingly called it "Hacktoberfest," but the name stuck. And so now that the jet lag has worn off for the most part, I thought I'd reflect on three of my standout moments of Hacktoberfest and how they're influencing my thinking moving forward on the Knight-Mozilla project.

Working in the open

Sitting in a meeting with our news partners, I got to witness a great moment. At the start of that meeting, a discussion cropped up around the Partnership's core belief that code produced by Knight-Mozilla fellows should be open-sourced. There was hesitation on the part of some partners, worried that open-source code would reveal too much. An hour or so later, there was a discussion about possible collaborations among partners' newsrooms, but it wasn't making much headway, as collaboration with possible competitors is not the normal order of business.

But then it dawned on everyone: Open source made that a non-issue. By working in the open, fellows won't simply be producing things for their host organizations, but for any news organization that wants to use the code. You could see people linking back to the earlier conversation about open source and realizing that it meant far more than just code -- it meant a new way of working, of embracing collaboration, and of blazing a real way forward.

Quit yakking and start hacking

Sitting in the back of our main hackspace at Betahaus, watching team after team get up and present their work, it dawned on me how awesome it was to spend four days seeing people with disparate skill sets truly collaborate around building something.

Too often we orient getting people together around having a drink or listening to a speaker. "Quit yakking and start hacking" was the order of the day, and it worked. Multiple projects went from just an idea to a functioning demo in a matter of days. It's gratifying to me that there is a GitHub repo full of code from the week. Even more so that it was built through open collaboration among so many different types of people.

hacktoberfest.jpg

A new community

After dinner one evening, we took both the Hacktoberfest participants and representatives from our news partners to Cbase, a storied (and slightly ramshackle) hacker space in Berlin. Standing at the bar next to a guy with a huge beard and a leather kilt, I looked out over the main room and was genuinely moved as I watched many from our group moving a table strewn with their laptops over to join in with a table full of German hackers. My eyes adjusted to the blacklight, and I saw hackers, journalists, developers and news partners all sitting around together, socializing and drinking and making. It was awesome -- a real lasting image of a new community built in Berlin.

So what does all this mean for the Knight-Mozilla News Technology Partnership moving forward? Well, in the short term, Hacktoberfest was the last step in a lengthy process to arrive at our 2011 fellows -- expect an announcement in a few weeks. But longer term, I think there are some real lessons to be learned from the event in Berlin, and some real ways those lessons will help to shape the Partnership in 2012:

  • I think the news partners really enjoyed feeling a part of the process, of meeting people and being engaged in the ideas being bandied about. Definitely getting the news partners to be partners throughout the year, instead of simply hosts for fellows at the end is a key step.
  • Additionally great: More opportunities to make code. The paths blazed by the Partnership in 2011 centered around design challenges and learning labs, which I think were both successful and should be replicated, but there wasn't anywhere near enough hacking going on, so more code in 2012 I think is a great goal.
  • Finally, building community is important. It's easy to get focused on process and look inwardly for community, but figuring out ways to intersect with the community around news innovation and making, as well as with the many other developer, design and open gov communities and others that very much intersect with journalism, is crucial.

Three moments, three lessons learned. Let's hear it for a successful Hacktoberfest!

A version of this story first appeared here.

March 15 2011

02:14

Circles and Euclidian Rhythms: Off the Grid, a Few Music Makers That Go Round and Round

Loopseque on the iPad. Courtesy the developer.

We continue our 3.14 celebration with a round-up of circular logic.

There’s no reason apart from the printed score to assume music has to be divided into grids laid on rectangles. Even the “piano roll” as a concept began as just that – a roll. Cycles the world around, from a mechanical clock to Indonesian gamelan, can be thought of in circles.

Imagine an alternate universe in which Raymond Scott’s circle machine – a great, mechanical disc capable of sequencing sounds – became the dominant paradigm. We might have circles everywhere, in place of left-to-right timelines now common in media software. Regardless, it’s very likely Scott’s invention inspired Bob Moog’s own modular sequencers; it was almost certainly the young Moog’s exposure to the inventions in Scott’s basement that prompted that inventor to go into the electronic music business, thus setting the course for music technology as we know it.

See:
Raymond Scott’s Circle Machine
For more background: “Circle Machines and Sequencers”: The Untold History of Raymond Scott’s Pioneering Instruments [as reprinted from Electronic Musician]
One superb modern re-creation, via Synthtopia

Scott’s creation was shaped the way that it was partly out of mechanical necessity. Now we’re gifted with the ability to make any form we like for our electrified music tools. Circles can have appeal not because they’re somehow novel, but for just the opposite reason: they’re ubiquitous, intuitive, and geometrically elegant. So, let’s first consider these in their most abstract, in software.

Euclidean Rhythms

Incredible things are happening to our understanding of music theory as the gap between fields is shortened. Say what you will about the state of communication in our modern society; for the self-motivated, the trip “across the quad” (between academic departments) has nothing on the trip across the Internet.

Godfried Toussaint, a computer scientist with a strong math background based at Montreal’s McGill University, has a whole body of fascinating writing linking math, geometry, and music. One research paper has had a big influence on many of us, myself included. Here’s the beauty of math: an algorithm developed by Euclid in Alexandria around 300 BC also works for calculating timing systems in neutron accelerators and makes nice poly-rhythms for music. It’s rather amazing we don’t talk to each other about math more often.

Toussaint’s paper:
The Euclidean Algorithm Generates Traditional Musical Rhythms [PDF, 2005]

Our friend wesen wrote about the technique, suggesting it could be used to generate new rhythms, and included code in Lisp:
Generating african rhythms using the euclidean algorithm

wesen even made code for his amazing MiniCommand sequencing box, which I hope we’ll see more of this year. (I should have some time to work on it myself.) The actual demo is part of the way through the video:

The algorithm – the recent Bjorklund reinterpretation of Euclid’s millenia-old work – has in turn found musical life in other languages:

Python – the bjorklund algorithm and generative music[astomo.us]
Ruby – Rhythm Generation With an Euclidian Algorithm [Aleksey Gureiev]
More Ruby – jvoorhis GitHub
Java – Generating Musical Rhythms [Kristopher Wayne Reese]
Pure Data + Java – Dave Poulter
Flash/ActionScript (pictured above) – Euclidean rhythms [Wouter Hisschemöller]
Max for Live (pictured below) – Euclidean sequencer [Robin Price]

I’m implementing a touch interface for it now using Pd, Processing, and Android; I had hoped to share it by now, but I’m still fleshing it out – I’ll give it away when it’s done.

You’ll notice in these, too, the similarity to the original Scott Circle Machine, down to the sweeping arm. But that’s a benefit: glancing at them on paper, Mozart and Haydn look the same, and they use the same musical technology, but think of the musical variety that results.

A Few Circular Sequencers

Circular sequencing interfaces are plentiful – indeed, I hope that this story prompts lots of people to say “hey, what about …?” Here are a few examples.

DominoFactory’s dial uses drifting circular geometries to control musical patterns. Created by Hiroshi Matoba, a young designer/DJ, it’s one of a body of work this student creator is building:

17 Dec, 2010
at ImageRama in Kyushu University(Fukuoka/Japan)

dial is a software sequencer using circle to control loop sequences in real time. I imply “speed sync” circular notation system which differ to “angle sync” in my past work “Overbug”.

Now under developing with openFrameworks and Bullet Physics. I use ofxConsole for custom CUI in this version.

*ImageRama is one night event hosted by Genda lab. in Kyushu univ., we setup surround sound(5.1ch) and 1 full HD projector. thank you for all stuff!!

See also Matoba’s earlier Overbug, which assembles polyrhythms in lacy, overlapping wheels, like some strange, elaborate clockwork:

Overbug

You can download it for yourself for the Mac; it even has Snow Leopard support.

Also from Japan, Nao Tokui has taken these ideas in another direction, still, with “mashup” application and, in three dimensions, his original Sonasphere. The latter was one of the first interfaces to really fire my imagination as far as alternative user interfaces and three-dimensional sequencing.

http://www.sonasphere.com/

For an instance of a commercial application, see the iPad Loopseque, the development of which we profiled extensively here on CDM in August:
Loopseque, New iPad App, Offers Circular Sequencing and Visual Inspiration

The one shortcoming for me of that application is the inflexibility of the grid, which is why the Euclidean ideas above interest me, but it’s still a lot of fun.

Dan Trueman (on the faculty at Princeton) built his own Cyclotron for experimentation with cycles, with work going back to 1996. The clever invention here is the use of the spokes themselves as musical information. Quite a lot more detail and code in Processing and ChucK:
Cyclotron project page

Rui Penha and Polygons

Rui Penha deserves his own category here, I think, as he’s done a great deal of research. He has worked with polygonal shapes as a way of displaying evenness in rhythms, and he’s built not only novel interfaces, but entire musical compositional environments using these paradigms. They’re all downloadable, too.

Instrument A, pictured below, uses sampled sounds and pre-composed loops which you can then assemble into a layered composition.

Gamelan, in the video at the top of this story, uses cyclic, circular notation to make interlocking parts of music more visible, in the style of an Indonesian ensemble. I was struck by this myself as I’d constructed a (much cruder) demonstration of the same idea for a talk in Ireland; here, Rui builds it into an entire interface. Also, there’s a meaning to the symbology of the circle: Gamelan looks for other networked players with which it can interact, making this a communal experience – and it can even be used to play a real gamelan ensemble, via robotic apparatus controlled wirelessly.

Políssonosis perhaps the most sophisticated of all of these, mapping those shapes into three dimensions and making the evenness of rhythms more apparent. See video, top, and the same ideas below.

Hardware and Kinectic Art

No discussion of circular design would be complete without the legendary synthesizers of FutureRetro, which uses a cyclical interface to divide patterns and even arranges synth parameters around the rotational theme. You can now pick up an Orb for $550.

http://www.future-retro.com/

It’s worth coming full (cough) circle here and revisiting the mechanical ideas, as I think part of what grounds these abstractions is the progression of time in physical contraptions. That’s what inspires the rotating arms above and so on. Because it’s so fundamentally tied to a motor, there are too many rotating soundmakers to name, but here are a couple. They’re inspired by a discussion following our post last month:

Music, Like Clockwork: Modular Music Boxes with Rotating Wheels, Inspired by monome

Invisible Rhythm worked from the notion of a music box to make their analog drum machine Rhythm 1001.

See also the Conspiring machine – thanks to an unfortunate use of Flash, I can’t link directly easily, but head to http://www.kristoffermyskja.com/, choose work, and then select Conspiring Machine (or some of the other, related ideas) from the left-hand column.

I’m going to turn loopy if I keep going, so I’ll leave it there. But have you found circular sequencers to be musically useful? Are there hardware or software designs you appreciate that I missed here? Research worth checking out? Or are you committed to the rectangle – and if so, can you explain why?

Happy PI day. May your oscillations always be in phase.

January 13 2011

14:49

HTML and CSS Resources for Teaching

Every year around this time, I update the resources I use in teaching my advanced online design class. I know there are a million lists like these online. I try to keep mine short, simple and current.

Also, I’m not teaching programmers or graphic design majors. My students are journalists.

If you’ve found any resources, websites or handouts useful in teaching online design, please let me know.

14:49

HTML and CSS Resources for Teaching

Every year around this time, I update the resources I use in teaching my advanced online design class. I know there are a million lists like these online. I try to keep mine short, simple and current.

Also, I’m not teaching programmers or graphic design majors. My students are journalists.

If you’ve found any resources, websites or handouts useful in teaching online design, please let me know.

January 11 2011

15:30

Teaching HTML and CSS to journalism students

I’ve been looking at the open-source course materials for Web Design 1, from the WaSP InterACT curriculum project. I think these materials can easily be adapted for use in a journalism curriculum.

The idea is to acquaint our students with the building blocks of the Web they use every day. For students who want to work in presentation (that is, design), there’s more to be learned after this little taste. But for the average journalism student, this course covers what they should be familiar with so that they can work comfortably in a CMS that needs the occasional tweak or fix (as all CMSs do).

The assignments in the WaSP course are quite reasonable and practical. Detailed grading rubrics are provided.

Really, I wish this were a standard course in all U.S. high schools. It concerns me that our students spend hours every day using a medium that is open and easy for producing original work — but they use it merely as consumers.

15:30

Teaching HTML and CSS to journalism students

I’ve been looking at the open-source course materials for Web Design 1, from the WaSP InterACT curriculum project. I think these materials can easily be adapted for use in a journalism curriculum.

The idea is to acquaint our students with the building blocks of the Web they use every day. For students who want to work in presentation (that is, design), there’s more to be learned after this little taste. But for the average journalism student, this course covers what they should be familiar with so that they can work comfortably in a CMS that needs the occasional tweak or fix (as all CMSs do).

The assignments in the WaSP course are quite reasonable and practical. Detailed grading rubrics are provided.

Really, I wish this were a standard course in all U.S. high schools. It concerns me that our students spend hours every day using a medium that is open and easy for producing original work — but they use it merely as consumers.

January 06 2011

19:06

LocalWiki: Laying the Groundwork

A few of you have been wondering what we've been up to since our Kickstarter pledge drive ended, so we want to give you a quick update on our Knight-funded project, LocalWiki. For those of you who are more technically inclined, we hope to also provide an insight into these early stages of our process.

To follow our updates in the future, please sign up with your email address at http://localwiki.org, follow us on Twitter at http://twitter.com/localwiki, or follow our blog directly. Or if you're a huge geek, join us on IRC in Freenode's #localwiki.

Right now, we are ramping up development of the wiki software that will provide the platform for all of our pilot projects. Starting in October, my partner Mike Ivanov and I have been working out of our awesome coworking office in San Francisco (shout out to NextSpace) and laying the groundwork for this new platform.


Making software that lasts

This may not make much sense unless you're a techie, but here are some details about what's going on:

Our initial focus at this stage is to build a set of reusable Django apps that will provide the core functionality of an extensible and easy-to-use wiki software, which include making it straightforward to edit a page, to track and work with revisions of pages and other objects, and to let people compare those revisions to see what's been changed. We will then use these components to build the first functional iteration of our wiki software. The benefits of this approach are that it helps us focus on each aspect separately, will help developers in the Django community to understand and contribute to our code, and makes it possible for other projects and organizations to use only the parts they might find useful. Software only survives if many people actively use it, and we want to ensure our software a long and happy life.

Next Few Months, Roughly Speaking

Until February: Core software. We will create the central components of the wiki software and put them together into something that will enable folks to start creating awesome content. We unfortunately have to work out some legal issues around licensing before we can easily accept outside code contributions.

As soon as our licensing issues are resolved, we'll send out an update with information about how to get involved with the development process. We hope the licensing issues will be resolved in the next couple of weeks. Nevertheless, it may be difficult for outside developers to get involved at this point because core bits and pieces will be moving and changing at a rapid rate.

February-April: Focus on features. We will push heavily to involve more outside developers to help make our software awesome and get some initial user feedback. If you are a developer interested in helping, this will be the best time for you to get involved because we will have somewhat solidified our development processes and underlying, core software. We will also need help with and feedback about the software from a higher level (e.g. feature requests).

April and beyond: Pilot communities, educational materials, community outreach. With the wiki platform largely built, we can start new pilot projects and educating potential users about building successful local projects. At this stage we will need all the help we can get from you to select pilots, write helpful guides, submit bug reports, and develop a model for communities to follow.

19:06

Laying the Groundwork For a Community Wiki

A few of you have been wondering what we've been up to since our Kickstarter pledge drive ended, so we want to give you a quick update on our Knight-funded project, LocalWiki. For those of you who are more technically inclined, we hope to also provide an insight into these early stages of our process.

To follow our updates in the future, please sign up with your email address at http://localwiki.org, follow us on Twitter at http://twitter.com/localwiki, or follow our blog directly. Or if you're a huge geek, join us on IRC in Freenode's #localwiki.

Right now, we are ramping up development of the wiki software that will provide the platform for all of our pilot projects. Starting in October, my partner Mike Ivanov and I have been working out of our awesome coworking office in San Francisco (shout out to NextSpace) and laying the groundwork for this new platform.


Making software that lasts

This may not make much sense unless you're a techie, but here are some details about what's going on:

Our initial focus at this stage is to build a set of reusable Django apps that will provide the core functionality of an extensible and easy-to-use wiki software, which include making it straightforward to edit a page, to track and work with revisions of pages and other objects, and to let people compare those revisions to see what's been changed. We will then use these components to build the first functional iteration of our wiki software. The benefits of this approach are that it helps us focus on each aspect separately, will help developers in the Django community to understand and contribute to our code, and makes it possible for other projects and organizations to use only the parts they might find useful. Software only survives if many people actively use it, and we want to ensure our software a long and happy life.

Next Few Months, Roughly Speaking

Until February: Core software. We will create the central components of the wiki software and put them together into something that will enable folks to start creating awesome content. We unfortunately have to work out some legal issues around licensing before we can easily accept outside code contributions.

As soon as our licensing issues are resolved, we'll send out an update with information about how to get involved with the development process. We hope the licensing issues will be resolved in the next couple of weeks. Nevertheless, it may be difficult for outside developers to get involved at this point because core bits and pieces will be moving and changing at a rapid rate.

February-April: Focus on features. We will push heavily to involve more outside developers to help make our software awesome and get some initial user feedback. If you are a developer interested in helping, this will be the best time for you to get involved because we will have somewhat solidified our development processes and underlying, core software. We will also need help with and feedback about the software from a higher level (e.g. feature requests).

April and beyond: Pilot communities, educational materials, community outreach. With the wiki platform largely built, we can start new pilot projects and educating potential users about building successful local projects. At this stage we will need all the help we can get from you to select pilots, write helpful guides, submit bug reports, and develop a model for communities to follow.

December 15 2010

20:08

A Christmas Present for You, Ricochet Readers

I don’t know about you, but December’s been pretty crazy for me. Between trying to maintain a healthy work-life balance (yeah, right) and trying to learn new things, I was shocked to realize Christmas is next week.

Egad.

Nevertheless, I’ve a little treat for you: Do-it-yourself polka dotted Christmas wrap and digital wallpaper, made with Processing. A sample’s below.

Take your pick of default sizes: 960 x 600 pixels or 1280 x 800 pixels.
Christmas polka dots
I learned a few things while making this project:

  • What they say about coding is true: You’re more apt to learn something if you’ve got a project in mind.
  • The initial bits of Processing are pretty easy to understand. But then there’s trying to grok random (not so bad) and shuffle (oy).
  • Coffee is good. Sleep is better.

To try Processing for yourself, copy my code from Github and paste it into the Processing.js Web IDE, or download Processing and tweak it locally.

Creative Commons LicenseThe code is released under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.

Related Posts:

Share: Print Digg del.icio.us Facebook Google Bookmarks StumbleUpon Tumblr Twitter

December 13 2010

11:21

Google hides mathematical puzzle in Cr-48 video, rewards its solver with a laptop

Watching Google destroy Cr-48 laptops for fun can't have been easy for any of you, but it turns out that the wily geeks of Mountain View had a clandestine purpose to their malevolence after all. An equation, scribbled out in old school chalk in the background of one scene, attracted the attention of a Sylvain Zimmer, who, together with a group of like-minded geeks, set about trying to solve it and discover its meaning. A full day's worth of cryptographic work later, Sylvain was left with a set of numbers he was able to convert into letters, which in turned spelled out "speed and destroy." Appending goo.gl, Google's URL shortener, to the front of those words got him to a screen congratulating him for being "first to figure out our MENSA-certified puzzle" and promising to send him a Cr-48 laptop as his prize. Kudos to Sylvain... and to Google for being such irrepressible geeks.

Continue reading Google hides mathematical puzzle in Cr-48 video, rewards its solver with a laptop

Google hides mathematical puzzle in Cr-48 video, rewards its solver with a laptop originally appeared on Engadget on Mon, 13 Dec 2010 07:21:00 EDT. Please see our terms for use of feeds.

Permalink Geek.com  |  sourceSylvain Zimmer  | Email this | Comments

September 30 2010

20:36

September 21 2010

12:47

How to create a wordpress magazine theme using Twenty Ten – Part 1

This is part one of a short series outlining how to tweak a wordpress template to get some magazine style functionality.

I’m in the process of updating installations of wordpress for our students to use. In one sense it’s a stop gap measure as we are in the process of commissioning a more “industrial strength” system for them. But even with a new system in place I think we will still leave some courses the option of going the wordpress route. The magazine students for example, love the flexibility (and low level of tech) that design templates offer. It doesn’t seem to have done them any harm in terms of nominations.

When it comes to design, finding a wordpress template you like is half the battle, there are thousands out there. As more people use wordpress to get publications online, magazine style templates have become a popular search and a big growth area for premium template developers.

It’s tempting to pay for a template you like – nothing wrong with that. But it’s not as complicated as you think to get something up and running, out of the box, with very little tinkering. Especially if you build on existing templates. So I thought it would be useful to look at how easy it would be modify the standard Twentyten theme in to something with some magazine functionality.

Hacking around like this is how I learnt a lot of stuff about wordpress and it’s also a way to get your feet wet with a programming language. In this case PHP

To play along with this you’ll need:

  • Your own installation of the latest version of the wordpress.org software (as I write this it’s 3.0.1). Sorry wordpress.com won’t do.If you have webspace and your thinking of adding wordpress you could do worse than check out the wordpress codex entry on installing wordpress. Some hosts will offer automated installation of wordpress – very useful.
  • A text editor. Even word will do.

That’s it.

The design

The adapted Twenty Ten Theme

This is a screenshot of what we are going to end up with. It has a front page that has a featured post at the top and sections underneath for each category. You’ll also notice that I’ve tinkered around with the header to remove the big image. OK, it’s not going to win any design awards but this is more about exploring the concepts.

Normally you’d plan this kind of thing on paper first. You’d also work on the code in a development environment. An installation of WordPress that only runs on your machine, not the web.

If you’re feeling really brave you can set one up. Here are few resources

I’m going to assume that we dive straight in and edit the template live! I know, bad, bad, bad. All I’m going to say is do so at your own risk.

A word on programming and PHP

WordPress is written in a programming language called PHP.  This isn’t a programming tutorial (I’m not going to explain the basics of programming), but there are a couple of important things to know.

Spotting PHP

You may already be familiar with HTML. You can spot it in the raw code for a webpage because it is contained in pointy – brackets.

[html]

Anything here will appear as a heading two

[/html]

In a similar way, you can spot PHP in the raw code for a webpage because it is always between  <?php …. ?>. Here’s an example:

[php]

[/php]

But if you look at the source for this webpage in your browser you will only see HTML. Why don’t we see the PHP?

PHP is a server side language. That means the webserver looks at the page and processes any PHP it finds before it sends you the page. When we use PHP as part of wordpress themes we are using it to generate HTML.

Functions

When programmers write code they will always look for ways to avoid repetitive jobs. Rather than write the same code every time, they write a function. This is a set of instructions that can be called when needed.  The example of PHP above is a function:

[php]

[/php]

Whenever we want to show the title of post we call the function the_title() and the server runs the code needed to get all the right information. The semi-colon is also important. Here’s another example:

[php]

[/php]

This time it’s a function to show a thumbnail for a post. But there is also some content in the brackets. This is a parameter or extra information that the function might need. When the server runs the function to get the post thumbnail it tells the function it wants the thumbnail sized thumbnail. I know, sounds like repetition. We could also say:

[php]

[/php]

That says ‘get the thumbnail but make it medium sized’. In case you were interested, the thumbnail and medium sizes are defined in the media settings of your blog. But more on that later.

There are hundreds of these functions in wordpress. Some are specific to templates, like the examples above, but others do the heavy lifting of making the blog work. We’ll be scratching the surface of the template functions here but I thought it was worth a little intro.

So we are going to be looking at a little PHP to call some functions to help us modify the TwentyTen template. Hopefully, now, that might statement might make a bit more sense.

How wordpress themes work.

You can get a really good overview of the way themes work from the wordpress codex and plenty of other websites around. A google search for wordpress theme tutorials should give you plenty of options. But let’s break it down in to a few simple ideas.

A wordpress theme is split in to parts:

  • the content you want in a structured form
  • instructions on the way you want it to look.

This information is held in a number of different files.  These are stored in a folder, one for each theme, in the WP_content/themes folder of your wordpress installation. The more complex the theme, the more files there tend to be.

In a basic theme, for example, you will have a file called single.php. That’s the content and structure part. This is a mixture of HTML and PHP. But the way it looks, the colour and style of text, position on the page etc is controlled by a file called style.css. This is a cascading style sheet file.

The Twentyten theme we are going to edit, has 18 content and structure files and four style sheet files. We wont be using all of these for this tutorial. We are only interested in two.

  • Main Index Template (index.php)
  • Stylesheet (style.css)

Accessing template files

There are several ways we can get at these files:

Any of those will do. But I’m going to work through on the assumption you are using the built in editor.

First thing to do is check you have the TwentyTen theme activated by going to Appearance >Themes. It should show Twenty Ten as the current theme. Then click through to the editor panel (Appearance > Editor).

The Theme editor

You’ll see a list of the 18 template files down the right-hand side and an editor window. By default this displays the Visual Editor Stylesheet (editor-style.css). All  you need to do is find and click Main Index Template or Stylesheet on the right to load up the files we will be working with.

Permission to edit.

When you look at the bottom of the editor window you may see a warning: – You need to make this file writeable before you can save your changes

You need to set the permissions on the theme folder!

This could be the biggest stumbling block of the process. But if you are serious about having a go at theme development, even tweaking like this, it’s worth getting your head round.

To remove the error message you need to set the permissions for the Twenty Ten folder to be 666.

Does that make no sense? You could try:

If you set the permissions correctly, the message should be replaced by a big Update File button.

You're ready to start editing!

Some final preparation

From this point I’m going to assume that you have a working installation of wordpress up and running. But before we experiment with the theme we need to have some content to work with. So if your blog doesn’t have posts yet you need to add a few posts to work with. You could do this manually using the lipsum.com, a lorem-ipsum generator and some liberal cut and paste for content. There are also a number of random content generator plugins available. For this exercise I used demo data creator.

We will also need to create some categories and assign the posts across the categories. I’ve used the following for this demo:

  • News
  • Sport
  • Featured Story

Once you have done that we are ready for Part 2 tomorrow, where we will start to edit the front page to get that magazine look.

As always, feedback and suggestions always welcome

June 01 2010

14:27

Top Teaching Online Journalism posts: Past 6 months

According to Google Analytics, this is what you’ve been reading here (Dec. 1, 2009, up to today):

  1. 21 examples of Flash journalism
  2. A few words about digital audio recorders
  3. Now printable! Reporter’s Guide to Multimedia Proficiency
  4. Recording phone calls: For reporters
  5. Why does anyone major in journalism?
  6. What you should know about HTML5 today
  7. How to shoot video interviews
  8. Thoughts about video editing software

If you missed any of these, enjoy! (Evidence of the long tail: No. 4 and No. 7 were written and posted in 2008!)

If you feel like suggesting a topic for a new post, please do!

May 31 2010

14:30

Tips for HTML5, part 6: A look at CSS3

Although I hear there are still some journalism programs where CSS is not taught, I’m going to assume that all those Luddites are working on bringing their design and presentation curriculum into the 21st century.

CSS is essential to design and presentation for the Internet. In this post I’m just going to provide a few links and try to summarize what students probably ought to know.

Students should have a basic understanding of how HTML and CSS work, and how they work together. When some journalists challenge me on this, I point out that in my undergraduate print journalism program back in the Dark Ages (before the Web), every single student was required to pass an editing course in which we learned to draw page layouts, spec headlines, crop photos, and use design tools such as a pica stick and a proportion wheel. Presentation has ALWAYS been an important part of journalism — and today’s presentation uses HTML and CSS.

Basic CSS does not change for HTML5. We will continue to use CSS to specify font families, the size of headings, colors for backgrounds and fonts and borders, spacing for margins and padding, and so on. We use CSS to position elements relative to other elements on the screen. We use CSS to create visual effects for navigation links.

One very useful resource for CSS is the Comparison of layout engines at Wikipedia. With simple color coding (green for yes, and salmon-pink for no), it shows us which Web browsers currently support which CSS2 and/or CSS3 selectors (such as id and class) and properties (such as margin, padding, width, and height). Selectors or properties that are mostly pink are not widely supported yet, so beginners do not need to worry about those yet.

Last week, Smashing Magazine published CSS Three — Connecting the Dots, which says:

Just because a property isn’t widely supported by browsers or fully documented at the moment, it doesn’t mean that we shouldn’t be working with it. In fact, I’d argue the opposite.

I am not disputing that — I’m only saying beginners should not try to learn everything all at once. In the Smashing article, author and Web designer Trent Walton shows us a bunch of cool experiments using several of the new CSS3 capabilities, such as:

  • Rotations
  • Transforms
  • Drop shadows
  • Animations

Yup, CSS3 can do a lot of amazing new things. But you can get along just fine without them.

Another resource I’ll recommend is Advanced Selectors, at HTML Source. Author Ross Shannon introduces some advanced CSS3 techniques (again, not necessary for beginners to learn) such as combinators (h1 + h2; p > em) and new uses for the pseudo-classes (such as :hover).

As far as I’ve been able to ascertain, the CSS we have been using for the past few years will not change — that is, most of what we have been doing, we can continue doing. The big exception will be in the use of DIVs (see my previous “Tips” post for an illustration of this).

Ross Shannon at HTML Source has a streamlined introduction to CSS that is suitable for beginners. I have a short list of what I consider to be the essential CSS selectors.

I think journalism students should start with a simple HTML/CSS file that has already been styled according to correct Web standards. Their assignment should be to change specific properties and values — for example, change the red border to blue; change the heading font families. This is hardly rocket science, and it should fit in with any first design course in a journalism program.

For related posts, check out the “code” category here in this blog.

Older posts are this way If this message doesn't go away, click anywhere on the page to continue loading posts.
Could not load more posts
Maybe Soup is currently being updated? I'll try again automatically in a few seconds...
Just a second, loading more posts...
You've reached the end.

Don't be the product, buy the product!

Schweinderl