Notice For Readers: Vacation

Hello everyone. I know it’s been over two weeks since I’ve written an article. In the past few weeks I’ve been busy with several projects: making a website, porting old VHS tapes over to DVD, and watching movies :). It’s important for one to take time off and explore. I won’t post an exact date that I’ll be back, but don’t expect for it to be in June or most of July either. If you are bored, read through all my tutorials, visit forums, go to the Apple Store, learn how to program with CSS, or make websites. I’m sorry for this inconvenience.

Thanks,
Mason

Taking Advantage With Photoshop Actions

I use Photoshop for a lot of the design work I do. When I take screenshots for The Macintosh Weblog, I always use a red arrow to point to something in the screenshot that corresponds with the step in the tutorial. The arrow consists of using the line tool and layer styles. That’s it. But the thing is, I use it so often, having to re-do the arrow everytime wastes time. I’ll show you how to save that “valuable” time by using Photoshop Actions:

1. Open up Photoshop and make a new document (⌘ + N).
2. I’m using the default settings: 7 x 5 inches.
3. Go to Window > Actions and the Actions palette will appear.
4. Click on the “dog-eared” paper icon in the bottom corner of the palette.
5. Type a title for your action and choose a keyboard hotkey to activate it.
6. Click “Record” and start making the action.
7. When you’re done with recording the action, click on the stop button (square icon) in the Actions palette.
8. Now you have a simple (or complicated) action that you can easily activate when you use Photoshop.

Screenshots: 1-2, 3, 4, 5-6, and 7.

Customizing Effects In Keynote Presentations

Apple’s Keynote packs quite a punch when it comes to making your presentation’s smooth. Most of Keynote’s hidden features are within the Effects. In this tutorial, I’ll point out how you can tweak each of your slides with one or more of Keynote’s effects.

Add Effects And Actions To Text

1. Choose a theme for your Keynote presentation.
2. After you’ve picked a theme, feel free to throw some images (click on Media button) in a slide along with a title and some text.
3. To add effects to the titles and text, select the text and go to the Inspector.
4. In the Inspector window, click on the yellow diamond icon.
5. From one of the three sub-sections (Build In, Build Out, and Action), you can pick any one of the effects from the Effects drop-down menu.
6. To make an effect follow a path, click on the Action tab. Choose Move and you position the red path where you want the text to go. Choose a type of Acceleration depending on how you want it to appear.
7. The beauty with Actions is you can add as many as you want and customize them as much as you want with the “Add Actions” and “More Options” buttons on the bottom of the Inspector window.

Screenshots: 1, 3, 4-5, 6, and 7.

Add Smooth Transitions To Images

1. To add serious effects to images, click on the Smart Builds button in the Formatting bar.
2. Select one of the many options from the drop-down menu.
3. When the build appears, you need to insert some pictures in there (using the Media button).
4. If you want, you can add shadows, frames, and reflections to your pictures too (click on the icon right of the “T”).
5. Now that you’ve got your pictures setup, go to the Action pane in Inspector and tweak the settings to your liking.
6. To put some sweet intro transitions with the images, click on Build In and pick out something like Flame.
7. To add an exit transition with the images, just click on the Build Out tab and choose an Effect like Confetti. Make sure you choose which order to make the transition run, by choosing a number from the Order drop-down menu.
8. To ensure that the presentation runs smoothly, choose “Automatically after transition” in the Smart Build drawer.

Screenshots: 1, 3, 4, 5, and 6-8.

How To Code Websites With Coda

I’ll be honest, I’ve tried using Dreamweaver once before. Being oblivious to what the current web standards were (table-less), I didn’t know that much, so I figured what I was doing, or for that sake what Dreamweaver was doing behind the scenes was fine. I was wrong. Dreamweaver inserts a lot of bloat code which takes time to go back and take out. The whole process of using Dreamweaver was a terrible experience even for a novice like me. Even the built-in FTP program stinks. While reading a Mac blog (other than my own), I noticed Panic released Coda. I must say, they spent a lot of time putting this beautiful piece of software together. When Coda came out, I was really interested in web development, even more than before. So, I decided to learn how to “hand-code” websites using XHTML and CSS. Let me say, it’s been a wonderful experience learning how to code websites by hand — you have so much more control over what you’re doing. The best part is, it’s easier for you to maintain later on, since you wrote it yourself. After using Coda since early this year, I’d like to show other users the basics of using the program itself.

Setting Up Your Site

1. To setup a site, go to the Remote view in Coda.
2. Once there, click on the Add Site button on the bottom of the window.
3. Enter your settings for your site in the corresponding text fields.
4. Done.

Screenshots: 1-2, and 3.

FTP (File Transfer Protocol)

1. After you setup a site, open Coda (must be in the Remote view) and you will see an icon of the website your developing.
2. Double-click on it to login to the remote server.
3. All of your files will appear in a sidebar.
4. To change access privileges or rename file, right-click on it in the sidebar.
5. To add folders or files, click on the “+” button in the bottom-left corner. Option-click on the “+” to add a folder.

Screenshots: 1, 3, 4, and 5.

Writing/Editing Files

1. To open/edit a file, click on it from the sidebar. You can change your preferences [view screenshot] so you have to double-click instead (it’s a must if you have a tendency to hit the Return key by accident).
2. When you begin coding, select the Syntax you will be using (HTML, CSS). This makes auto-completion [view screenshot] work as well as invalid code warnings.
3. If you’re new to coding, turn on Hints button (bottom), so you will see programming hints for the attributes you write.
4. As you’re coding it’s necessary to make sure it’s valid code. Turn on the warning button (black triangle located beside Clips). When an error appears, a yellow triangle will appear with a tooltip explaining what’s wrong.
5. If you want to replace something like an entire set of <p> tags with <li> tags, use the Find/Replace feature. You can insert “wildcards” (button beside check mark) meaning it will find anything after/before the <p> depending on where you insert the wildcard.
6. After making an edit, you can preview your changes with the built-in browser. Just click on the Preview tab.

Screenshots: 2, 3, 4, 5, and 6.

Save Time Coding With Clips

1. After you code your first site, there are probably helpful “snippets” of code that you want to use again in future site (i.e. navigation bars, DOCTYPE, etc,.)
2. This is where Coda’s Clips feature comes in handy.
3. To edit Clips, click once on the Clips button in the bottom of the window
4. To access your Clips while your coding, hold down the Clips button at the bottom of the window and a menu will appear for both the Global and Site Clips you have.
5. In the Clips window, you probably see a few defaults. To remove them, click on the “-” button.
6. To add Clips, click on the “+” button. Add a title and paste the code write into the text area below.
7. If you would like the cursor to go to a specific spot in code after it is inserted, click on the “Selection Placeholder” button in the spot you want.
8. To add a shortcut for a Clip, click in the area that says “click here to add a tab trigger”. Type in a letter then save your clip.
9. Now you just have to hold down KeyboardKey+Tab and your clip will magically appear.

Screenshots: 3, 4, and 6-8.

Built-in Reference Books

1. Coda comes with several references books: HTML, CSS, JavaScript, and PHP.
2. When you open one of the books, you will see every possible attribute or tag that goes along with the selected programming language.
3. Click on one of the attributes to see examples on how to implement them in your site.

Screenshots: 2 and 3.

Coding With CSS

1. Coda makes coding with CSS a dream with the built-in editor.
2. You can use the CSS editor if you aren’t familiar with CSS quite yet. Personally, I like coding without the editor because you can’t use CSS shorthand from within the editor.
3. When you code it by hand, having the Symbols window open, makes it easier to quickly go back to a div#ID or div.class just by clicking on the symbol you want.

Screenshots: 2 and 3.

Beginner Tips For Developing Websites

Being a tutorial writer myself, I always like to see what other writers are doing and such. All of my tutorials are 100 percent original work from my experience with Mac OS X. On the side, when I’m not writing tutorials or helping people out with computer problems, I like to code websites. For the past couple of months, I’ve been trying to gather all of the information I need to put together a website. Being a beginner to the website world, I thought I’d share a few tips to help you get started.

1. Books vs Online Material

I’ll admit, when I first starting dabbling with websites, I wanted something that had easy-to-read material. Books are a great source for learning, but the web has improved significantly. Two of the most helpful sites for me have been W3Schools and CSS-Tricks. W3schools is a complete reference to every web language out there, with try-it-yourself examples. CSS-Tricks has been the most help for me when it comes to understanding the true tricks of the trade for coding with CSS.
I did buy a book, the Visual QuickStart Guide 6th Edition: HTML, XHTML, and CSS. I use it now only as a quick reference for one thing or another, but it’s nice to have for the times when you get rusty on a few coding rules and such.

2. Designing Beautiful Graphics

Many of you have probably heard of Adobe and what kind of programs they have. They have several that are used mostly to create web graphics such as Fireworks, Photoshop, Illustrator, etc. I personally prefer to use Photoshop for my web designs as I have become quite familiar with the program. When it comes to learning how to design graphics for websites, I have gotten a lot out of PSDtuts and Smashing Magazine. PSDtuts is an excellent resource for Photoshop tutorials. With weekly tutorials covering how to make neat graphics for web purposes and how to make an retro image. Smashing Magazine covers pretty much everything you’ll ever need to know about the web. They post articles on what makes effective web design, how to make your site attractive, and even coding tips that will greatly improve your skills.

3. Do-It-Yourself: DIY

I’ve really been learning a bit on my own too. With several browsers now, you can easily inspect a website and understand how the code is being used. This will be a great way for you to see how people make their sites. In Safari, right-click and choose “Inspect Element”. To enable this feature, type
defaults write com.apple.Safari WebKitDeveloperExtras -bool true
into Terminal to make it work. In Firefox, use the Web Developer extension or the Firebug extension.

Feel free to ask me questions you have about web-development on the Mac.

5 Helpful Google Tricks

Searching For Free MP3’s

1. Type in
   "index of" "mp3" "boston"
   (replace boston with any artist name or song).
2. Choose one of the results in Google that is most relevant to the artist or song.
3. When you see the page load with all of the “.mp3″ files, right-click on the one you want and choose “Download Linked File” from the contextual menu.

Conversions

1. You can convert volumes, currencies, and more using Google’s search bar.
2. If you want to convert a volume 5 liters to milliliters, type in
   "5 l to ml". Hit the “Return” key and you will get instant results.
3. For converting currencies type in the number of what currency you have and then which currency you want to convert it to. For example "5 pesos to euros".

Defining Terms

1. By typing in "define:" and then placing a term after the colon, Google will list all possible definitions for the term.

Getting The Time

1. To get the time in major US cities as well as your own, type
   "what time is it" in the Google search bar.

Stock Quotes

1. To quickly see how a stock is doing, type in the stock symbol
   (ex: "AAPL") and you will see a graph along with the highs and lows for the day

Screenshots: Free MP3’s, Conversions, Time, Stock Quotes, Defining.

The Basics Of Getting Things Done (GTD)

What Is GTD?

David Allen’s book, titled “Getting Things Done“, is a very well-written system that teaches you how to use GTD to become a more productive individual. To start off, I’ll just explain the very basics of GTD that I’ve tweaked and used.

How To Incorporate GTD Into Your Workflow

1. Find a good task-manager application (i.e. OmniFocus) to collect all of your ideas.
2. Organize specific categories to place each task into: Inbox, Current Projects, Next Actions, etc.
3. If you know it will take less than 2 minutes, go ahead and get it over with. If it will take longer, delegate it with a due date.
4. Organize your email into categorized folders (Archives, Family, Due Next Week, Bills, Other, etc.)
5. When you use something put it back to its original spot, that way nothing gets out of place.

Other Tips To Help You With GTD

1. Keep a pad of Post-it’s™ with you in your back pocket along with a pen. This way you can jot down a quick idea or something and you won’t forget it. Personally, I use this when I find new features about applications that I want to go back to later.
2. Throw away a magazine after you read it, there’s no reason to keep it.
3. Keep your desk area neat.
4. Scan paper documents onto your computer, so you won’t lose them and to conserve desk space.
5. Make a list of goals you want to complete by the end of the year.

Hope this helps you understand the basics of David Allen’s GTD system. I recommend you buy his book and read through it to truly understand all that his system has to offer.

Add A German-English Plug-in To Dictionary

There are many different translation services available online such as FreeTranslation.com and Google Language Tools. The great thing about those services is that you can almost always find what you need. The downside about those services is that they only work when you’re connected to the internet. Thanks to Philipp Brauner’s Dictionary.app plug-in, you can now use a translation service (German to English) right within the Dictionary application. The coolest feature about this plug-in is that it doesn’t require you to be connected to the internet while you use it. The package includes the complete German to English vocabulary from Dict.cc. I congratulate him on making this app as it comes in handy when you’re on the run and need to quickly access to a translation service, but don’t have internet-access. One more thing to mention is that this plug-in works with Spotlight, the Dictionary.app, and the Dictionary widget as well. As of now, this plug-in is only for German to English translation, but hopefully in the future, Philipp will continue developing this plug-in to include more languages.

Click here for a screenshot

Thanks to Philipp Brauner for asking me to write up the article!

Creating Text-Searchable PDF’s From Your Scanner

When it comes to maintaining a clean workspace, a scanner is by far one of the best tools for the job. With a scanner, you can easily store all of those documents from your desk into your computer. The great thing about having them on your computer is that there is an endless number of possibilities with what you can do. Honestly, the only reason why I scan documents onto my computer is so that I can search through them, especially for longer documents. By using Adobe Acrobat’s OCR-recognition feature, you can now turn those long, small-font, paper documents into digital text-searchable documents. Here’s how:

1. Turn on your scanner.
2. Open up Acrobat and go to File –> Create PDF –> From Scanner…
3. In the Acrobat Scan window, adjust the settings to your liking.
4. Be sure to check off “Make Searchable” and “Make Accessible”.
5. If you want, click on the “Options” button under Text Recognition and Metadata to edit the OCR settings.
6. Now click on the “Scan” button to scan the document into Acrobat.
7. When the scan is done, wait for Acrobat to finalize the document so it’s searchable.
8. Now when you open up the PDF with Acrobat or Preview, it is now searchable (text) and when you search with Spotlight it will go through those PDF’s as well.

Screenshots: 2, 3-4, 5, 6, and 8.

Play Chess Just By Using Your Voice

The game of chess can be quite a boring game when played on the usual board, but not when played on a Mac. When you play the Chess game included on all Macs, you’d be quite surprised at how enjoyable your computer will make the game seem. The cool thing about playing chess on your Mac is you have the ability to control each one of your players just by using your voice. You can change which board you play on as well. Here’s how:

1. Load up Chess from your Applications folder.
2. Once it loads, you should notice a small silver circle appear with “Esc” in the center.
3. To move a player, you simply hold down the Esc button and say something like “Pawn A2 to A3″.
4. Although that sounds simple, you should have a basic understanding of the game itself beforehand.
5. If you’d like to change the looks of your chessboard, hold down the ⌘ and the “,” keys to activate the preferences.
6. From there, choose one of the Board styles: Wood, Metal, Marble, or Glass.
7. Likewise, you can do the same with board pieces.

Screenshots: 2, 3, and 6.

Using The New Microsoft Office 2008 For Mac

In the new version of Microsoft Office (2008), you have probably noticed the massive improvements to the user-interface. Thanks to designers at EnhancedLabs, the interface is remarkably beautiful. One of the main features to point out in the new version of Office are the Toolbars which now carry so much functionality with the SmartArt Graphics, Quick Tables, Charts, and the Document Elements. You can do just about everything you can imagine possible with Microsoft Office 2008. I’ll get you started by pointing out where the new features are and how to use them.

Word:

Toolbars

1. When you first open Word, you’ll see a new toolbar with many new additions.
2. When you select something from the toolbar like SmartArt Graphics, it should appear directly within your document.
3. When it appears, go ahead and enter in any data you need to, then feel free to customize the looks of it with the Formatting Palette.

Screenshots: 1-2 and 3.

Layout Views

1. In the new version of Word, there are new layout views such as Publishing Layout which is an amazing page-layout view with lots of templates.
2. The second layout update is the Notebook layout, which you just about customize any way you like.
3. I highly recommend you spend the time to go through each of those layouts and edit the built-in templates to learn all of the features they’re capable of.

Screenshots: 1 and 2.

Setting Up Default Fonts

1. If you used Microsoft Office 2004, then you probably remember that the default font was Times New Roman. That’s not the case with Office 2008 — it’s now Cambria.
2. Most of the documents I make with Word, must be in Times New Roman. To change the default font, hold down the ⌘ + “D” keys to activate the Font window.
3. Locate Times New Roman or whichever font you wish, then click on the “Default…” button in bottom left corner.

Screenshots: 2-3.

PowerPoint:

“Slide Thumbnails” Sidebar

1. When you opened up PowerPoints in previous version of Microsoft Office for Mac, there wasn’t a sidebar that showed thumbnails of each slide. With the new version a sidebar has been included with this feature. I personally like it, so I can easily identify a certain slide and go right to it.
2. With PowerPoint open, just click on the sidebar in the left-hand side and select “Slides” instead of “Outline” to make the thumbnails appear.

Screenshots: 1-2.

Transitions And Animations

1. Now in PowerPoint, adding Transitions and Animations has never been easier.
2. If you’d like to add a Transition, just choose “Transitions” from the Toolbar.
3. For Custom Animations, select the part of the slide for which you want to animate, then click on the icon in the Formatting Palette.

Screenshots: 2 and 3.

Excel:

Changing The Looks Of Your Graphs

1. Just like in Numbers ‘08, you can now easily change the look of your Excel Graphs right from the Toolbar.
2. Select the graph for which you want to change.
3. Select another style from the Toolbar.

Screenshots: 2-3.