The Set-Up: Part 4

Online Social Presence

With tools like yoono it’s easy to keep multiple online personas. If you’re planning on doing business online it’s not a bad idea to have both personal and business accounts for at least some of the social networks. Facebook allows you to now sign in as a business page to interact with pages and users eliminating the need for an alternative/professional individual profile. Twitter treats your personal and business identities as one in the same; meaning that if you plan on tweeting about your night out partying you might want to create a separate twitter account for your business activities. The following are the accounts you should have available to share with your team members, clients or others in the professional field online and a brief explanation of the purpose of each.

Twitter

Twitter is about short messages that say a lot. For a professional twitter account the goal is to provide useful information that makes others want to follow you. This is oftentimes done by sharing links or saying funny-insightful things about what you’re working on.

http://twitter.com/

About.Me

It’s kind of like a business card for the web. You create a profile, link it to your other professional presences online and voila.

https://about.me/

Facebook Page

Pages are the business/professional side of facebook. You can create a page for any business person and then switch to that entity when you want to interact with other pages or people on facebook without divulging all of your Saturday night plans. The only restriction is that when administering facebook pages you have to be added as your personal account and then switch to the page for making edits.

https://www.facebook.com/

LinkedIn

The ultimate professional networking site. With a rich history in the techy world linkedin now serves a huge number of industries. Update your profile, connect with your coworkers past and present and get recommendations on your achievements.

https://www.linkedin.com/

Google Plus

Google plus is new on the scene but has great potential. The best part about it is that there is no need to have separate profiles for work vs. personal because you filter all of our outgoing message based on what audience they are meant for.

https://plus.google.com/

Gravatar

Gravatar is an avatar management tool. It’s used frequently when commenting on sites or automatically generating an avatar. Gravatar lets you create multiple avatars for different purposes and accounts and set one as the default.

http://en.gravatar.com/

Last note: Google yourself (or bing, or yahoo). Google your real name, your commonly used screen names and your email addresses. See what information is available about you on the web right now. If your current presence is less than in line with what you’d like it to be consider using a different screen names for your professional accounts and maybe even switch to alternative pictures for some of your more personal accounts.

The Set-Up: Part 3

Desktop/Mobile Apps

As more and more is done online it seems as though fewer things need to actually be installed on your computer. At this point there are only a few key items that I feel the need to immediately install on a new machine. Likewise if you use a smartphone for work purposes there are a number of essential tools that can be added to make the workflow smoother and more productive.

HTML Editor

Chances are that at some point you’ll need to review some html if you’re doing serious work on the web. It might not be very often but when you do view code you should make it easy on yourself and view it in a decent code editor. For pc my recommendation is Komodo Edit, it’s a lightweight and free version of Komodo IDE, it highlights code, has great find/replace functions and does all the little things you would expect in a full IDE. For Mac my personal preference is Text Wrangler, similar functionality and also free.

Word Processor

There are times when it is easier to create, edit or view a document locally than to do so online. MS Office is still the industry standard but I can’t say I find it really worth the price 98% of the time. A great alternative for all platforms is OpenOffice, the only thing to keep in mind is that if your collaborating with people using work then you’ll need to save documents as a word file extension (docx) and that formatting doesn’t always transfer correctly.

7-Zip

When transferring very large files like hi-resolution images across the web it’s often time necessary to archive them into a smaller format, such as zip. Most operating systems include this ability as a native function; however, at some point you’ll find yourself needing to unarchive other formats (like tar or gz) these present a little more trouble on a pc which is where 7-zip comes in. It’s a free tool and doesn’t take up much space but is very nice to have when you need it.

DropBox

Dropbox is a cloud based file storage system that supports sharing desktop folders among a group of people. You get 2G of space free and can create as many folders for different purposes as you’d like. If you invite other members you can increase your free space to 8G.

Skype

Is frequently used for quick video calls and small web conferences. Be careful when installing however; by default it tries to install a web toolbar and automatically loads when you start your machine – both can be rather annoying.

Jing

Is a free tool for creating small screencasts. Easy to set-up and use, but this one also will automatically start with your computer unless you set it otherwise.

Adobe Creative Suite

This tool is a little overkill for lightweight web marketing work but a very nice thing to have when you want it. The high price and short release cycle of adobe products make it a nice to have rather than a necessity for most.

The Set-Up: Part 2

Bookmarks

A few different strategies can be used to keep track of the sites, links, etc… that you use most regularly, the most common is to bookmark them. This can be done with the browser’s native bookmarking system or with a third party tool. If you’re doing considerable work online you will quickly find that it is necessary to have a solid organizational system or your bookmarks. Each person has their own take on the best way to organize bookmarks and at the end of the day the system which is easiest for you to use and remember is always best.

If you are sharing bookmarks with other team members or using more than one browser on a regular basis a tool such as XMarks can make the bookmarking process much easier. You create bookmarks in any of your browsers and XMarks syncs them with your online account and makes them available in other locations.

As a starting point I suggest creating a folder system similar to the one below to organize bookmarks. This can always be changed and modified to suit your needs later on as your bookmark collection grows.

•  
  • Home
    • Recipes
    • Games
  • Work
    • Client Sites
    • Tools
    • Reference
  • Education
    • Reference
    • Classes

Accounts and Storage

In addition to organizing your online links with bookmarks it will quickly become necessary to have local/online files and accounts organized as well. After going through a few tragic hardware crashes and loosing most if not all of your local files/programs it becomes very clear that not only are backups important but even more than that if there is a way to keep things off of your hardware and in the cloud, then do so.

Google Docs

Is a great tool for online word processing and storing files online. The ability to share and collaborate on documents makes it a very useful tool also for managing version control for docs and spreadsheets. Another note about google docs is that they are not indexed and are secure documents (https) so moderately confidential information can be stored without too much concern. The only thing which should be remembered about this is that google docs are linked to your gmail account so the security of your document is based on how strong your gmail password is – general wisdom would say to change passwords on a regular basis and always use strong passwords for anything that could hold confidential information. There are a number of alternatives to google docs, skydrive from Microsoft is another great tool and zoho docs actually integrates with google as well as the other zoho project management tools.

LastPass

LastPass is an online account storage system. It comes in the form of a browser plugin that asks you if you want to save a site’s account information each time you login. From your lastpass account vault you can view and edit your account information. This allows you to check your password on a site if need be and set some sites to either autofill login forms or even auto login.

Local Storage

No matter how nice it is to have all of your files online there are times when you need to store things locally. A couple of tips about making this process painless:

1. Set your browser to ask you where to download files. If you download all files into the downloads directory automatically then you will be faced with a cleanup task at somepoint. I feel it’s best to keep the downloads folder (or desktop for mac) to be for temp files only – that way you can simply delete them all in confidence when the folder gets too full.
2. Create a folder structure similar to your bookmarks. Keep personal documents separate from work docs, and create a separate folder for each client. This is a really important thing when packaging up client assets or backing things up to a shared server.

Ge.tt

I can’t say enough about how awesome this tool is. It’s not a long term storage solution but it does give you temporary storage of files and makes it easy to share them with others by creating a link to the files.

Project Management Tool

If you are working collaboratively then it’s important to have a project management tool. There are a ton of options on the market, many of them free even. My personal preference as a developer is assembla, it handles all the tech parts necessary and has great access control so you can share what you want with clients and keep the rest private within the team. The importance of a project management system is about keeping information public and transparent. Try to think about the repercussions of being abducted by aliens. If this happened could your teammates continue on because you’ve shared all of your knowledge and work with them or would your shared goals and projects leave along with you on spaceship?

The Set-Up: Part 1

Setting up your online work environment

Efficiency is a key strategy to successfully doing work online. There is no way to manage all of your tools, accounts, links and tasks with post-it notes or even worse, your brain only. There are numerous variations on how to effectively set up an online work environment, many blogs are dedicated to the concept and lots a number of books have even been written on how to most effectively work in this virtual age. So, keep in mind that as you progress you’ll want to customize you’re work environment to suit your needs best. There are some general conventions in productivity that are agreed upon by most but in general these are guidelines that have worked well for many and are worth trying out for a month or two even if you don’t use them all forever more.

Browser Tools

If you’re working online the vast majority of your tasks will happen within a browser. While there are hundreds of browsers available to choose from there are only about 4-5 that are in frequent usage by large numbers of people. It’s recommended that if you are working on the web you download and keep current versions of all of the browsers which are in common use. Chances are you will settle into using one browser most of the time but each browser does offer slightly different functionality and is better at some tasks than others. It is also important to have all browsers available to you for the purpose of testing the user experience in each setting.

• Firefox
• Chrome
• Safari
• Internet Explorer
• Opera

Many browsers offer an open development environment which allows for app developers to create extensions or add-ons to the browser. This provides additional functionality to the browser without having to open another program. A great aspect of this is that some apps will be available for more than one browser and will therefore let you share information across browsers. The following is a list of my suggested browser apps and a little bit about each of them.

Yoono

This tool aggregates social media into a single stream. It comes as a lightweight browser plugin so there is no need to open up a separate application. You can broadcast to a single or multiple accounts at once and chat on multiple services as well. The one thing to check for on this one is you might want to disable the notification pop-ups when you configure it – they can get distracting and annoying after a while.

https://chrome.google.com/webstore/detail/jkkenjlnjfemconejajakbijbheoffli (chrome)

https://addons.mozilla.org/en-US/firefox/addon/yoono-twitter-facebook-linkedi/ (firefox)

XMarks

This is an awesome tool to say the least. You set up an account, import and merge your bookmarks and suddenly all of your most frequently used sites/links are available no matter what browser you’re in. As an added bonus it lets you share certain folders with other users so when you are working collaboratively everyone doesn’t have to set up their own set of bookmarks.

https://chrome.google.com/webstore/detail/ajpgkpeckebdhofmmjfgcjjiiejpodla (chrome)

https://addons.opera.com/addons/extensions/details/xmarks-mini/1.0/?display=en (opera)

https://addons.mozilla.org/en-US/firefox/addon/xmarks-sync/ (firefox)

Web Developer Overlay

This extension has a lot in common with pixel perfect for firefox but doesn’t work quite as smoothly. It’s worth having if you are going to develop and test on chrome but if you use firefox for development you may not use it all that often.

https://chrome.google.com/webstore/detail/olfihdjffmgfmmcdodcgciejhnhibalg (chrome)

Send Gmail

This handy little extension for chrome allows you to make all mailto: links direct to your gmail account rather than opening in some archaic desktop application like outlook. Even better, firefox asks you how you want to handle outgoing mail the first time you click a mailto: link.

https://chrome.google.com/webstore/detail/ahldefgplekckalfcolhhnljbbgaiboc (chrome)

RSS Button

In my opinion one of the most difficult parts of chrome at present is the poor support for xml rss feeds. Luckily this little extension solves that problem and adds a nice little icon to your toolbar whenever an rss feed is available for consumption.

https://chrome.google.com/webstore/detail/nlbjncdgjeocebhnmkbbbdekmmmcbfjd (chrome)

LightShot

There are lots of nice screenshot addons out there. This one recently topped my list because of its support for flash. Being able to take a screen shot of a video is nice. For safari I’d suggest awesome screen capture, no flash support but works well too.

https://chrome.google.com/webstore/detail/mbniclmhobmnbdlbpiphghaielnnpgdp (chrome)

https://addons.opera.com/addons/extensions/details/lightshot-screenshot-tool/0.1/?display=en (opera)

https://addons.mozilla.org/en-US/firefox/addon/lightshot/ (firefox)

Lastpass

Ever get tired of trying to remember your username/password to every site on the web? This little tool solves that issue.   Simply set up and account and then save your passwords each time you visit a new site. This extension is also available for safari and mobile (the mobile is a small monthly charge).

https://chrome.google.com/webstore/detail/hdokiejnpimakedhajhdlcegeplioahd (chrome)

https://addons.mozilla.org/en-US/firefox/addon/lastpass-password-manager/ (firefox)

https://addons.opera.com/addons/extensions/details/lastpass/1.73.11/?display=en (opera)

Force Reload

Clearing your cache is chrome is kind of a bummer. It requires multiple steps. This is especially a pain when you’re making css changes to a site and you need to clear the cache on a very frequent basis. In firefox the solution is to do a “hard” refresh by holding down the crtl (or apple) key while pressing shift and r. This little tool for chrome makes it almost as easy.

https://chrome.google.com/webstore/detail/kkhgjeaffbhdcpflajldaijabgclfnoa?hl=en-US&hc=search&hcp=main (chrome)

Corporate Ipsum

Sometimes you just need to fill a space with some text. Corporate ipsum is by far my favorite text generator. It looks so much like corporate double-speak that it isn’t at all distracting when you skim a page. Other browsers have alternative lorem ipsum plugins but they aren’t nearly as cool so I find myself going back to this one over and over again.

https://chrome.google.com/webstore/detail/lfmadckmfehehmdnmhaebniooenedcbb (chrome)

Ge.tt

This is a browser app for chrome. Browser apps are basically just links to a site but they’re nice to have if you use chrome frequently. This tool lets you send large files (or small files) quickly and instantly. It rocks!

https://chrome.google.com/webstore/detail/cdgghbbgmhcpidlmnepkbihehhkmjomc?hl=en-US&hc=search&hcp=main

Assembla

This is only useful if you’re using assembla and chrome but kinda nice to have if you do use both of those.

https://chrome.google.com/webstore/detail/kminghijobhneamfnmfifebiehdfpegn?hl=en-US&hc=search&hcp=main

Google Docs

Let’s be honest; the office suite is expensive and more often than not it’s a pain to open up a huge program like word when all you really want to do is view a dang text file. That’s what google docs is for. The extensions below are slightly different but both easy to use and help make viewing files quicker, easier and less expensive by giving you easy access to google docs from your toolbar.

https://chrome.google.com/webstore/detail/kkjmcfdcdbbkdacicmpokoddagejpknh?hl=en-US&hc=search&hcp=main (chrome)

https://addons.mozilla.org/en-US/firefox/addon/google-viewer/ (firefox)

Pixlr

Pixlr is a great browser based application which mimics about 50-60% of photoshop’s functionality and about 98% of what I ever use photoshop for. While I admit that I am a true fan of the original photoshop and most of the time I just leave it open and waiting on my desktop, I do use pixlr if I need to quickly edit an image and don’t want or need all the power or wait time of a program that doesn’t even run on less than 2-3G of ram.

https://chrome.google.com/webstore/detail/icmaknaampgiegkcjlimdiidlhopknpk?hl=en-US&hc=search&hcp=main (chrome)

Hootsuite

Hootsuite shares a lot in common with yoono. However there is one difference that makes it worth it to have both. Hootsuite allows you to pre-schedule your tweets/posts/etc…

https://chrome.google.com/webstore/detail/kneloppijbcidgidihgdjnooihjcdbij?hl=en-US&hc=search&hcp=main (chrome)

Firebug

The sacred shrine of front-end developers, this not-so-little addon for firefox lets you inspect everything you’d ever want to inspect about a webpage. It’s painful to remeber how we used to develop web sites before firebug.

https://addons.mozilla.org/en-US/firefox/addon/firebug/ (firefox)

FireFTP

Sometimes you need a heavy duty FTP/SSH client but for most stuff fireftp is plenty.

https://addons.mozilla.org/en-US/firefox/addon/fireftp/ (firefox)

Pixel Perfect

This is an addon for firebug/firefox which allows you to place an image overlay on top of a web page. This is a great tool for testing the design integrity of a site to the original specs from the designer.

https://addons.mozilla.org/en-US/firefox/addon/pixel-perfect/ (firefox)