Tag Archives: nerdery

Tutorials on Tutorials (How to Do Screencasts and Screenshots)

This is the third installment in my “Silly e-mails from My Mom” series. Please be sure to check out the other two!

Let me start things off right away by saying that this is going to be one epic blog post.

My mom’s e-mail for today’s post isn’t really all that silly, but it’s still silly. On a scale from 1-10, it’s ridiculous.

This is what my mom wrote (for prior context we’d been discussing an idea I have for a site that will help folks like my Grandma understand the internet):

How about a tutorial for how to do a screencast?

Or, how do you do an email that looks like a web page? Do you make a web page and attach it to your email?

Ot, let’s say I want to send grandma an email or pdf on how to do something on the Mac. I’d like to get good screenshots to include. Do you just use command ^ shift 4? How do you capture the menu?

A sensible person would probably write multiple blog posts to tackle these questions, but I’m gonna try to slam them into one!

1) Well, you can’t really do a screencast of a screencast because the browser and computer get confused (as do I). Maybe you can, but it’s a bit too meta for my taste. Screenshots would be a bit of a mess too. So here’s a quick rundown:

Go to a screencasting site: I like Screenr because it’s pretty straightforward. Please note for Screenr that you will need a Twitter account in order to use it. I also find that it works better with Firefox than with Chrome.

Watch the screenr tutorial video: It’s located on the right side of their homepage. It’s better than anything I’ll be able to come up with right now (That was a pretty lazy answer wasn’t it? Well, I should be sleeping).

2) Screenshots are pretty easy to do. Mom, if your experience with Skitch is anything to go by, it seems like you already know how to do this pretty well. You are correct, all you need to do is type “Command, shift, 4” for a little target style cursor to appear. I did a quick screencast on how to do it, which you’ll find below. Please note that the cursor shows up as the regular arrow in the screencast but will look different on your actual screen. The title should also read “screenshots,” not “screencasts.” I’m tired, so there.

Other Tips:You may wish to resize your screenshot or edit it a bit. You could use Skitch or upload it to Picnik. To learn more about using Picnik, check out a screencast I did a while ago.

3)The easiest way to deal with PDFs, other than adding them as attachments to your e-mails, is by using the nifty new site Scribd. Guess what? I also did a screencast a while back on how to upload a PDF to Scribd and embed it into a WordPress blog post The only difference in this instance, is instead of embedding the PDF into a blog post, you can select the “share” option and e-mail a link to it to anyone. Then the PDF will pop up on its own page and your recipient won’t have to download it unless he or she wants to save it. If you haven’t already taken the time to explore Scribd a bit, I’d recommend you do so. It’s pretty sweet.

That’s all for now folks!

And, of course, you can view some other screencasts I’ve done over at the BlinkTag Inc blog!

Learning the Ways of the Geek Part 2 [HTML 101]

This post is more for people like my mom. If you’re html savvy, you may wish to skip this or let me know if I am clearly clueless!

Back in the day, I had a LiveJournal, which I’d update from time to time with horrible teenager things. You may scoff now and think to yourself, “How emo/Mark Zuckerberg of you,” but wait! Good ol’ Eljay may seem a bit outdated now or seem to be the region where IRL socially inept folks hang with their virtual buds, but when I was 16 it was the shiz! It, along with that Frontpage lesson I had around the same time, is one of the only reasons I sort of understand how things like html and hex codes work. If you wanted to change your background to have a tiled image of your favorite cat, change your background to be bright pink, or add a “cut” when posts got to be too long, you had to scroll through the LJ FAQs for code to post or tags to add in the right place. I remember thinking, “What is all this #ffffff nonsense?” Or “Why isn’t there some magical way to create an excerpt for my post?” Well, we live in more advanced times-Wordpress times!-and doing some of those things are a lot easier now.

I think I had a point to make somewhere in that ramble…hmm, well something something…ah yes! Now, a mere 10 years later, I have finally taken on the task of making sense of all that stuff. My friend Brendan pointed me in the direction of  this tutorial for creating your own WordPress theme and I’ve found it to be pretty useful. Okay, it is from 2007 and doesn’t have any instructions for Mac users, but whatevs, it’s still pretty good. I also happened to have some nice people help me figure out how to install MAMP and get everything I needed to use up and running (I’m still figuring out what all that is) while I was at Super Happy Dev House over the weekend.

Within the next week or so I plan to do a screencast and post it here about what I’ve learned, but I’ve gotta go to a happy hour at that awesome warehouse I mentioned yesterday, so I’ll leave it for later. For now I’ll leave you with my basic understanding of all this internet stuff. Mom, if you’re reading this, you’ll probably find this pretty neat.

HTML: HTML is sort of like the skeleton of your website and looks like this (the text in blue):

You use it to make sure that all the pieces your structure needs are there. Just as your body has two arms, two legs, two eyes, a nose, etc., your website (or at least your blog) will need a title, a header, a footer, and space for posts and comments. You can edit the way it all looks to some extent with HTML, but it’s fairly limiting and is more functional than it is pretty.

CSS: CSS is where style comes in. Sticking with the body analogy, it’s kind of like your DNA (I don’t do science so please forgive me if this makes no sense). It looks like this:

What makes you unique from others (other than your sparkling personality, of course) is how you look. Do you have green, blue, or brown eyes? A short or round face? Short torso and long legs? HTML gives you the basics but CSS lets you make your website stand out- at least in appearance. Change your font, give yourself that pink background you always wanted, or add a margin somewhere. This is where the fun happens.

PHP: This is what makes a lot of the magic happen. It’s kind of like the connections between your brain and the rest of your body- maybe a bit of your memory too. It looks like this (the white text):

PHP performs functions so that stuff actually happens on your site. If you want all of your blog entries to list a title, author name, and a link to the next post, you have to include a PHP code. From my very basic understanding of it, you ask it to perform a certain task, such as search for posts, and it will display the result. So if you add a command to include a “Next Page” link after every 5 posts, it will search to see if you have enough posts on your page. If you have fewer than 5, no link will appear. Once you have five or more, the link should show up on your site. Similarly, if someone searches for something on your site and it doesn’t exist, he or she will receive a “Not Found” message- or whatever text you’ve indicated (I chose “nope” for my draft site!).

That’s all I’m going to attempt to explain for now because I am running late for that happy hour!

Does any of this make sense?