Bullfrog Sweatshop

HTML 5 Canvas Tag

Dave LaHaye — Thu, 08 Mar 2012 15:57:07 +0000

A lot of people have been throwing the HTML 5 canvas element

The HTML5 canvas element as a development resource is going to replace Adobe Flash for a lot of the light lifting, but in my opinion will be left in the dust on some of the more demanding and complex projects where Flash really shines. Modern online Games for computer, phone, or tablet are a great example would be a great example of this (flash is not supported on ipad and few other devices, let’s hope that changes). Back to the

Here is a cheat sheet for the HTML5 canvas tag. Open Cheat Sheet PDF

We will be introducing some great tutorials on HTML 5 and the canvas element soon. I have included some of the drawing tools for you below, thanks for reading!

Here are the drawing tools you can use

Shapes

Rectangles

Arcs

Paths and line drawing

Bezier and quadratic curves

Effects

Fills and strokes

Shadows

Linear and radial gradients

Alpha transparency

Compositing

Transformations

Scaling

Rotation

Translation

Transformation matrix

Getting data in and out

Loading external images by URL, other canvases or data URI

Retrieving a PNG representation of the current canvas as a data URI

Small Business Rocks!

Brent Clark — Mon, 23 Jan 2012 16:29:55 +0000

According to several sources, many within our own government, Small and Midsize Businesses (SMBs) make up “99.7 percent of all U.S. employers” [1]. Micro-Businesses, usually 10 or fewer employees, “represent as much as 15 percent of the U.S. economy” [2] and have been cited as making up 78.8 percent of all U.S. employers [3].

Those are some pretty amazing numbers and it’s no coincidence that Bullfrog Sweatshop loves SMBs. We are a small business ourselves and are proud to contribute to the largest economic engine in the United States. We understand the unique challenges that SMBs face every day like meeting deadlines, keeping products in stock, managing financials and finding time to promote the business.

At Bullfrog Sweatshop, my “title” says I am a senior developer but my title doesn’t tell you that I’m also a blog author, salesperson, janitor, technical writer, secretary or support person. Do you own a construction company? I bet your title doesn’t explain how you also work in the accounting, HR, marketing and customer service departments. Do you own a small shop? I bet your title won’t tell me how you spend your nights placing orders and stocking shelves.

What other roles do you perform for your small business? Leave a comment and let us know!

Intro To Graphic Design… & Dave

Dave LaHaye — Tue, 06 Dec 2011 16:08:31 +0000

What’s up everyone! This is Dave LaHaye, Bullfrog Sweatshop’s lead Graphic Designer and Client Side Developer. I have been a graphic artist for the last 17 years… starting at the age of 15 I emersed myself into a little art software title known as Photoshop. I had been spending most of my free time airbrushing sci-fi and nature scenes as well as helmets and T-shirts. I had already had quite a few years of fine art under my belt at that time… and then it happened! My love for technology met my love for art… with the help of some great mentors and teachers, my passion for graphic design developed as quickly as my skills did. This blog area is going to focus more on the artistic side of things. I will get technical at points to achieve certain looks and feels… but don’t be scared, I will make it easy for you to succeed! So there it is, first and most boring of all the posts is under my belt (let’s hope)! My goofball side will undoubtedly show up often as we delve into what comes to mind as the days go by, deal with it and let’s have some fun! Word!

P.S. I over use the exclamation point (!) and the word “WORD”… again, I am aware that neither are cool… so thanks in advance for not letting me know… I also overuse the whole “…” thing! It’s all on the table now! …Word!

Improve Your SEO With A Few Quick Tips

Dave LaHaye — Tue, 06 Dec 2011 15:56:03 +0000

Search Engine Optimization or S.E.O. is a constantly changing area in the web world. It is the most important thing you can do to have your customers reach you when they are looking for the goods or services you provide. Old ways, also known as black hat S.E.O. no longer wors and your site is being judged for its actual content! There are many ways to tackle this mighty feat, however the best way is to have a professional do it. I hear Bullfrog Sweatshop is great at S.E.O. (I am shameless about that plug, because what I am about to give you is free). Enjoy!

Here are a few things you can do to improve your websites SEO :

Try to narrow down your focus on each page to 2 keywords, not 50! Once you have those keywords picked out, we have a few places to put them.

Incorporate them into your page title. Use them in an h1 tag in the body of your page.

You also want to include the keywords in the text of your page, but be careful… search engines can pick out if you are just blasting a page with keywords, and your audience will spot it quickly and leave just as fast!

The best thing to do is to write relevant, useful content with your keywords in a natural manner.

Your customers will be able to read the content, and get something out of. The search engines will follow their lead.

Do this process for every page on your site. You will not have to re-write everything, just narrow your focus on each page.

Keep the content fresh and up to date, people will not keep revisiting your site if you have the same information every time they visit!

Again, this is just the tip of the iceberg. If you don’t understand this post, that is okay we are here to help if you want to take your site to the next level. Hope you enjoyed!

How to build a simple web page from scratch – Part 4

Brent Clark — Fri, 25 Nov 2011 22:42:39 +0000

Remember how I said in part 2 that we are going to discuss not 1, but 2 languages of the web in this guide? Well, I did, and that other language is called CSS which stands for Cascading Style Sheets. The name doesn’t really imply that it’s a language so what does Cascading Style Sheets mean? I’ll spare you the gory details but I’ll give you a tiny hint; you should focus on the word style.

In the world of the web, style means the color, size, layout and placement of our content like our name, phone number or address. Before we dive in we have to know how to write a style and, just as important, where to write a style. For the purposes of our web page we are going to add all our styles to the head of our document inside a new tag called, drum-roll…, style! We’ll also give it a special attribute that is required to make it work, like so:















Bullfrog Sweatshop




555-555-1234





12345 Sunny Street


Awesometown, NS 90211






From making your dream website to helping you with your company image.

Bullfrog Sweatshop works around the clock so you don't have to.

Let us help you make the right decisions for your company to reach out to your customers.

We take a very different approach to helping you reach your goals.

Let's work together on your next project!

Now that we have our style tag we can start adding styles to our document to make things look a little nicer than they do by default. Just like HTML, styles are written in a specific way. They start with a “selector”, the thing that finds the HTML we want to style. Then they need a “{” followed by a “declaration” which is a combination of a “property” and a “value” with a colon “:” between them. You can have multiple declarations in each style rule. Each declaration ends with a semi-colon “;” and each style rule ends with a “}”. That was a mouthful and it’s confusing just to say it. Let’s look at an example instead:

 selector { property:value; }

Here’s one with working values that apply to what we are doing:

 #phoneNumber { color:green; }

That hash sign “#” before “phoneNumber” tells CSS to find the tag with the id attribute of “phoneNumber”. The rest of the rule tells it to make the color of the text green. Let’s add a few more rules and see how it looks.



#phoneNumber { color: green; background-color: light-gray; font-weight: bold; }

h1 { color: dark-green; text-decoration:underline; }

p { border: 1px solid #222; }

Here we’ve told CSS to find all the h1 tags (there’s only the 1 in our case) and make them all dark green and underlined. Simlarly, we’ve told CSS to find all the p tags and give them a small, dark grey border. One thing confusing here is that we didn’t use “DarkGrey” like we did with our h1 tag; we used a hex color. Hex colors are the recommended way to use color in CSS; you really shouldn’t use stuff like “Red” or “DarkGreen”. It’s OK for us because we’re just learning but as you learn you should pay more attention to web standards and follow them. We aren’t here to get learn about web standards today, however, so let’s move on to our last step in this lesson, part 5.

How to build a simple web page from scratch – Part 3

Brent Clark — Fri, 25 Nov 2011 22:42:39 +0000

We last left off by adding a div with an id of “content” to the body of our HTML document. Now we are going to start adding actual content, since we have a good place to put it. Content, with regard to web pages, is essentially anything that the viewer would see; text, pictures, video, etc. and that is why we are here. We set out to put our contact information (phone number and the like) on a web page; let’s do that now. I get the feeling that you are catching on quickly so I am going to do a few steps at once this time using a few new tags. Here’s some contact information added to our content section.



<html>

<head>
</head>

<body>

<div id="content">

<h1>Bullfrog Sweatshop</h1>

<div id="phoneNumber">

555-555-1234

</div>

<div id="address">

<div>12345 Sunny Street</div>

<div>Awesometown, NS 90211</div>

</div>

<p>

From making your dream website to helping you with your company image.

Bullfrog Sweatshop works around the clock so you don't have to.

Let us help you make the right decisions for your company to reach out to your customers.

We take a very different approach to helping you reach your goals.

Let's work together on your next project!

</p>

</div>

</body>

</html>

If you save the file in your text editor with a .html extension and then open it, you should see something like this.

Great! We officially have content and are on our way to getting our page up and running. Let’s review what we added and then discuss some things we should probably change.

The first thing you’ll likely notice is a new tag called h1. It’s one of the six heading tags that have an effect on the size of your text from h1 (the biggest) all the way down to h6 (the smallest). This is the tag responsible for that big, bold “Bullfrog Sweatshop” at the top of our page when we open it. We also added a phoneNumber div, and “address” div, a div for each line of our address inside the “address” div and an other new tag, the p tag. The p tag is also known as the paragraph tag and it’s meant for exactly that, paragraphs. Since our short description of ourselves is a nicely-formed paragraph it makes perfect sense to use the p tag.

That covers the new stuff, now let’s talk about how it looks. It’s not great. Sure, it’s there; things are aligned to the left and the name of our business is large and bold. It’s a good start but let’s say we aren’t particularly fond of black on white. Maybe our business color is orange and we want some of our text to stand out and others to be less prominent. Well, we are in luck because we get to learn about that right now in step 4.

How to build a simple web page from scratch – Part 2

Brent Clark — Fri, 25 Nov 2011 22:42:39 +0000

Ok great, we have an open text editor; what do we do with it? Well, we are going to do a scary thing called programming. We are going to program (type) special words in a specific way into our text editor to make our web page do what we want. I have to admit that most of what I am about to say is inaccurate at some level but it is, in my experience, the simplest way to explain the process. Please do not fill the comments section with rantings about how what I said isn’t true in some way; I’m aware.

Moving on…

How do we program?

We program with languages and there are tons of them. However, we are going to focus on the two basic web languages. HTML and CSS.

What is HTML?

HTML stands for HyperText Markup Language and it is the core of all web pages. It is a programming language made of tags that start with a less-than sign “<” and end with a greater-than sign “>”. Each tag is really a set of tags, an open tag and a close tag. A very common tag is the div tag, which stands for division, and it looks like this:

Inside of your div you can place text, more HTML or both.

That’s great! now what?

Now we build a web page using the div tag you are already familiar with and some new tags that you probably haven’t seen before. An HTML document (a web page) has three main parts; the head, the body and the html shell that holds it all together. Each of these are tags, just like a div, and must be arranged like this:

Now, I find that a little tough to read and I am sure you do too. So, we can put each tag on its own line and use the tab key for indenting so it’s easier to read, like this:

We aren’t going to put anything in the head section for now so let’s just focus on the body. The body is where all of the visible content of your web page goes. There are plenty of HTML tags meant for display; you already know one, can you guess what it is? That’s right, it’s the div and it is one of the primary building blocks of the modern web so let’s add one to the body.

The last thing I want to talk about in part 2 is attributes. Attributes are special properties that a HTML tag can have which help the browser (like Internet Explorer or Safari), and other languages, interact with the tags. An attribute goes between the “<” and the “>” but only after the tag name itself; a very common attribute is the id (identifier) and when we add it, it looks like this:

Knowing that, let’s give our first div an id.

That’s all for part 2. In part 3 we dive right in to our new “content” div by adding more tags and some visible content to our page.

How to build a simple web page from scratch – Part 1

Brent Clark — Fri, 25 Nov 2011 22:42:39 +0000

If you search the web for “how to build a web page” you’ll be inundated with links to websites that want to sell you their product or are promoting someone else’s product. While we here at Bullfrog Sweatshop absolutely love WordPress, Drupal, Joomla, Magento and the like we also know that these applications aren’t always the right fit for everyone. Sometimes you need something so basic that it’s simply not worth the effort to set up one of these complex environments.

A perfect example is the small business or organization that just wants to put their name, contact information and a brief description of what they’re about on the web. This guide will help you achieve just that while also giving you a little education along the way. Even if you know how to build a web page you’re likely to learn something by reading this guide.

Let’s start with the tools you’ll need.

Have you ever read an instruction manual about how to build a bench or assemble a desk? They always start with a list of tools you’ll need to get the job done. Building a web page is no different. Luckily there are really only two tools you need; a computer and a text editor. I’ll let you figure out the computer part but if you don’t know what a text editor is allow me to suggest Notepad++. You’ll like it.

Open your favorite text editor and make a new document. If you’re using Notepad++ it should look like this:

That’s it for part 1 of this tutorial. Let’s get our hands dirty now in part 2!

How to build a simple web page from scratch – Part 5

Brent Clark — Thu, 10 Nov 2011 23:42:39 +0000

In this final phase of our tutorial we are going to build on what we’ve done so far. If you’ve been following along then your web page should look like the image below. If it doesn’t I would retrace your steps.

This time around I am going to make the final changes to our sample page and let you figure out what I did and how I did it. I find I learn better through examining the work of others instead of following strict instructions and we’ve had plenty of that so far.

Here’s how it looks:

And here’s the code. One important thing to notice is that I didn’t change any of the HTML between the two versions.



&lt;html&gt;

&lt;head&gt;

&lt;style type=&quot;text/css&quot;&gt;

#phoneNumber {

color: #00F;

font-weight: bold;

float:left;

margin-left: 60px;

}

h1 {

color: DarkGreen;

margin-bottom:20px;

padding-bottom: 20px;

border-bottom: 2px solid DarkGreen;

width:540px;

text-align:center;

}

p {

border: 1px solid #999;

background-color: #EEE;

padding:20px; width:500px;

clear:left;

margin-top: 20px;

float:left;

color:#222;

height: 200px;

}

#address {

float:left;

margin-left: 20px;

color: #222;

}

#address div {

float:left;

margin-left: 20px;

}

&lt;/style&gt;

&lt;/head&gt;

&lt;body&gt;

&lt;div id=&quot;content&quot;&gt;

&lt;h1&gt;Bullfrog Sweatshop&lt;/h1&gt;

&lt;div id=&quot;phoneNumber&quot;&gt;

555-555-1234

&lt;/div&gt;

&lt;div id=&quot;address&quot;&gt;

&lt;div&gt;12345 Sunny Street&lt;/div&gt;

&lt;div&gt;Awesometown, NS 90211&lt;/div&gt;

&lt;/div&gt;

&lt;p&gt;

From making your dream website to helping you with your company image.

Bullfrog Sweatshop works around the clock so you don't have to.

Let us help you make the right decisions for your company to reach out to your customers.

We take a very different approach to helping you reach your goals.

Let's work together on your next project!

&lt;/p&gt;

&lt;/div&gt;

&lt;/body&gt;

&lt;/html&gt;

I used some code that you may not have ever seen. If you don’t recognize something; search the web and see if you can find it.