https://vimeo.com/bravodesignince

Google Apps – A Great Value for Small Businesses

So you’re a small business owner, and you’re looking to take advantage of the internet marketplace. Well hopefully you’ve already considered getting a website, and you’re at least familiar with the social networks like Facebook and Twitter. You’re also familiar with Google, and if you’re not I suggest you check out Wikipedia, it’s like an encyclopedia but made out of electricity instead of paper.

All joking aside, Google is an amazing resource and you won’t get a better service at their pricing. Google offers their Apps for free (up to 50 users) and they offer extended services for businesses at a rate of $50 per user per year (not even $0.14 a day). “But what if I don’t want to sign up for a bunch of services?” If that’s the case, then you probably shouldn’t be starting a website in the first place, and you really shouldn’t start a sentence with ‘But.’ Who are you? Robert W. Burchfield?

Here’s the beauty of Google, it’s pretty much all a one-stop-shop. Create your business Gmail account, mybusinessname@gmail.com, and you’ll be able use your Gmail account to gain access to a wide variety of Google’s products and functionality. Learn more about Gmail. Here are a few of the the biggies:

  1. Google Analytics
    Track your website traffic and visitors in a plethora of dimensions.
  2. Google AdSense/AdWords
    If you’re interested in search-engine marketing, whether you plan to advertise your business or offer space on your website to advertisers, you’ll need a Gmail account.
  3. Recaptcha
    Great service to link up to your website’s contact forms, to prevent unwanted spam feedback. Ever seen the crazy text blocks you have to re-enter at the bottom of a form? Chances are that’s Recaptcha.
  4. Goo.gl
    If you’re looking to post links on Twitter, you’ll need to shorten some URLs. Goo.gl will let you enter an impossibly long URL and it’ll spit out a cute short URL to post on Twitter without losing all your characters.

These are just a few of the services that Google offers free-of-charge. So back to Google Apps, you’ve just created your website and now you need to set up your email. Hold it! Before you go spending an unnecessary amount of money on an email account with your hosting provider, set up Google Apps for your site, Google Apps Free. You’ll need FTP access to your website, and/or access to your DNS (domain name servers) panel, and/or access to your web developer (just tell him/her you want Google Apps).

Better yet, Google offers their entire Docs system absolutely free (with Google Apps Free). You’re able to create, edit and print .doc, .xls, .ppt and .pdf files online from anywhere when logged into your Google Apps account. Look out Microsoft Office, Google’s gunning for you! So what’s the advantage if you’ve already purchased Microsoft Office for your computer (don’t curse the gods just yet)? All the files you create/upload in Google Docs are backed up and available online, and administrators (you’ll be one if you set up the apps account) are able to edit the permissions to decide which users are able to access which files. Learn more about Google Docs.

If you knew what DNS stood for before I parenthetically spelled it out, feel free to check out this great link walking you through setting up your email accounts through Google Apps. Just click on “Creating MX Records,” select your domain host from the list below and follow the steps to completion.

Here’s a quick breakdown of the Google Apps edition comparisons:

I hope I’ve helped sway your opinion, or at least provided you with a couple links to do some research of your own. There’s a reason why Google is the vanguard of the internet… they’re awesome.

https://vimeo.com/bravodesignince

HTML Basics For Beginners: Part Three Image Styling

In this series of tutorial articles, we’ve covered HTML basics like how to Embed Links In Your WordPress Website, and How To Style Text In Your WordPress Website. Now we’re taking a look at our <img> tags (for images).

WordPress allows us to simply upload and manage all our media content, but sometimes we need a little extra style thrown into the mix. We’ll be taking a look at how the <img> tag is used, and how we can make a few simple styling modifications on-the-fly.

So let’s first examine how WordPress inserts the <img> tag when an image is uploaded and Inserted Into The Post. Here is what the HTML will usually look like after “Insert Into Post” is selected after an image is uploaded. I have also chosen not to include a link, and the none option was selected for the alignment.

<img src="http://www.bravodesigninc.com/wp-content/uploads/2011/04/photo_helicopterbunny.jpg" alt="" title="photo_helicopterbunny" width="450" height="333" class="alignnone size-full wp-image-725" />

What will be
displayed:

If you’ve already read the previous two articles, one thing that may stand out about our <img> tag is that there is no </img>. This is because the <img> tag isn’t surrounding anything other than the attributes contained within the tag itself (i.e. href, width, height, title, alt and class). We will notice, however, that at the end of the tag there is a /> that closes the <img> tag specifically. Let’s mess around with some of the attributes to see how we can change the image…

<img src="http://www.bravodesigninc.com/wp-content/uploads/2011/04/photo_helicopterbunny.jpg" alt="" title="Cutest Bunny Ever" width="225" height="166" class="alignnone size-full wp-image-725" />

What will be
displayed:

Please take note of the changes made to the title, width and height attributes. The href was left the same, still linking to http://www.bravodesigninc.com/wp-content/uploads/2011/04/photo_helicopterbunny.jpg, but let’s make a change to a different (perhaps even cuter photo. Hit it!)

<img src="http://img.dailymail.co.uk/i/pix/2007/11_03/RabbitKit2NSPA_468x316.jpg" alt="" title="A Bunny Under A Pile Of Kittens" width="468" height="316" class="alignnone size-full wp-image-725" />

What will be
displayed:

Here we see that I’ve changed the href attribute to link to another image that has not been uploaded on our server (hence, no http://www.bravodesigninc.com/… in our href attribute).

Most likely, you’ll be using your images around text in your WordPress posts and pages, so let’s see how we can have both displayed properly.

<img src="http://www.bravodesigninc.com/wp-content/uploads/2011/04/photo_helicopterbunny.jpg" alt="" title="Cutest Bunny Ever" width="225" height="166" class="alignleft size-full wp-image-725" /> Pardon my Greek, lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis placerat mauris ut sem auctor ut consequat nisl dignissim. Maecenas aliquet, nisi eu elementum porta, orci mauris porta urna, euismod condimentum urna ligula vel urna. Integer eu turpis ac ligula adipiscing bibendum ac ut sem. Aenean vestibulum felis lacinia augue laoreet congue. Phasellus ultricies convallis lacus, nec pharetra tortor commodo sit amet. Sed imperdiet, magna facilisis dignissim eleifend, mi felis sodales mi, et rhoncus turpis nulla a tortor. Integer pretium lacinia facilisis. Maecenas vitae tempus nulla. Duis hendrerit, nulla quis tristique fringilla, sapien odio convallis odio, eu hendrerit dui odio iaculis odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.

What will be
displayed:

Pardon my Greek, lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis placerat mauris ut sem auctor ut consequat nisl dignissim. Maecenas aliquet, nisi eu elementum porta, orci mauris porta urna, euismod condimentum urna ligula vel urna. Integer eu turpis ac ligula adipiscing bibendum ac ut sem. Aenean vestibulum felis lacinia augue laoreet congue. Phasellus ultricies convallis lacus, nec pharetra tortor commodo sit amet. Sed imperdiet, magna facilisis dignissim eleifend, mi felis sodales mi, et rhoncus turpis nulla a tortor. Integer pretium lacinia facilisis. Maecenas vitae tempus nulla. Duis hendrerit, nulla quis tristique fringilla, sapien odio convallis odio, eu hendrerit dui odio iaculis odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.

You’ll notice that the class attribute in my <img> is has ‘alignleft,’ the alignment option that I selected before I inserted the image into my post.

Let’s see what is displayed when I have my image in the middle of the text…

Pardon my Greek, lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis placerat mauris ut sem auctor ut consequat nisl dignissim. Maecenas aliquet, nisi eu elementum porta, orci mauris porta urna, euismod condimentum urna ligula vel urna. Integer eu turpis ac ligula adipiscing bibendum ac ut sem. <img src="http://www.bravodesigninc.com/wp-content/uploads/2011/04/photo_helicopterbunny.jpg" alt="" title="Cutest Bunny Ever" width="225" height="166" class="alignleft size-full wp-image-725" /> Aenean vestibulum felis lacinia augue laoreet congue. Phasellus ultricies convallis lacus, nec pharetra tortor commodo sit amet. Sed imperdiet, magna facilisis dignissim eleifend, mi felis sodales mi, et rhoncus turpis nulla a tortor. Integer pretium lacinia facilisis. Maecenas vitae tempus nulla. Duis hendrerit, nulla quis tristique fringilla, sapien odio convallis odio, eu hendrerit dui odio iaculis odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.

What will be
displayed:

Pardon my Greek, lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis placerat mauris ut sem auctor ut consequat nisl dignissim. Maecenas aliquet, nisi eu elementum porta, orci mauris porta urna, euismod condimentum urna ligula vel urna. Integer eu turpis ac ligula adipiscing bibendum ac ut sem. Aenean vestibulum felis lacinia augue laoreet congue. Phasellus ultricies convallis lacus, nec pharetra tortor commodo sit amet. Sed imperdiet, magna facilisis dignissim eleifend, mi felis sodales mi, et rhoncus turpis nulla a tortor. Integer pretium lacinia facilisis. Maecenas vitae tempus nulla. Duis hendrerit, nulla quis tristique fringilla, sapien odio convallis odio, eu hendrerit dui odio iaculis odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.

So to sum up what we’ve covered, let’s take one more look at the <img> tag and it’s attributes:

<img src="http://www.bravodesigninc.com/wp-content/uploads/2011/04/photo_helicopterbunny.jpg" alt="" title="Cutest Bunny Ever" class="alignleft size-full wp-image-725" />

What will be
displayed:

  1. The tag starts with: <img
  2. src=”http://www.bravodesigninc.com/wp-content/uploads/2011/04/photo_helicopterbunny.jpg”, is the URL to the image file.
  3. alt=””, alternate text visible if/when an image doesn’t load properly.
  4. title=”Cutest Bunny Ever”, title that will appear when the user rolls over the image
  5. width=”225″, width in pixels
  6. height=”166″, height in pixels
  7. class=”alignleft size-full wp-image-725″, the class that WordPress applies to your image based on your options selected before inserting into post. (e.g., alignleft, alignright, alignnone, etc.)
  8. The tag ends with />

I hope this has been a helpful article regarding updating the images in your WordPress website. We’re always looking for ways to enhance our tutorials, so if you have an idea, or an issue let us know!