Wednesday, April 22, 2015
Let's face it, most of us starts blogging so that we can can hopefully retire in the Caribbean using money that we make from our blog. Well to do that we need ads on our blog. In this blog post we will go over the steps to associate, and setup Adsense ads on your Blogger blog.
Step-By-Step Instructions:
1. Log into your Blogger Blog account, then click on Earnings → AdSense
Step-By-Step Instructions:
1. Log into your Blogger Blog account, then click on Earnings → AdSense
Monday, April 20, 2015
Sunday, April 19, 2015
In this blog we will go over how to export your blogs in Google's Blogger blogging application.
Step-By-Step Instructions Exporting Your Blog:
1. Sign into the blog you want to export your blog posts from.
2. Select "Other" in the "Settings" section
Step-By-Step Instructions Exporting Your Blog:
1. Sign into the blog you want to export your blog posts from.
2. Select "Other" in the "Settings" section
Saturday, April 18, 2015
Creating a new blog in Blogger is really easy in fact it takes less than five minutes to do. Well maybe ten minutes if you have to take screen shots. Below is a step by step process of how to create your new Blogger blog.
Step-By-Step:
1. Log into blogger.com with your Google account, you will be logged into the Blogger dashboard
2. In the dashboard there will be button that says "New Blog", click on the button
Step-By-Step:
1. Log into blogger.com with your Google account, you will be logged into the Blogger dashboard
2. In the dashboard there will be button that says "New Blog", click on the button
Friday, April 17, 2015
There's actually two selector parameters in JQuery. The second parameter is the context parameter. The context parameter specify the context that the selector should operate within that context. Let's use the bootstrap form field markup below as an example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<title></title>
<style>
.form-label-spacing{
margin-top: 15px;
}
.form-group-spacing
{
margin-left: 20px;
}
</style>
</head>
<body>
<form>
<div class="row">
<div class="form-group form-group-spacing col-lg-4 col-md-4" id="registration-form">
<label for="firstName" class="form-label-spacing">First Name:</label>
<input class="form-control" type="text" id="firstName" placeholder="First Name">
<label for="firstName" class="form-label-spacing">Last Name:</label>
<input class="form-control" type="text" id="lastName" placeholder="Last Name">
<label class="E-Mail form-label-spacing" for="E-Mail">Email:</label>
<input class="form-control" type="email" id="E-Mail" placeholder="Email">
<label class="form-label-spacing" for="password">Password:</label>
<input name="Password" class="form-control" type="password" placeholder="Password">
<div class="form-group">
<label class="form-label-spacing" for="gender">Gender:</label>
<div class="radio">
<label><input type="radio" name="gender" id="gender">Male</label><br/>
<label><input type="radio" name="gender" id="gender">Female</label>
</div>
</div>
<button type="button" class="btn btn-default">Sign Up</button>
</div>
<div class="col-lg-8 col-md-8"/>
</div>
<div class="row">
<div class="form-group form-group-spacing col-lg-4 col-md-4" id="another-registration-form">
<label for="firstName" class="form-label-spacing">First Name:</label>
<input class="form-control" type="text" id="firstName" placeholder="First Name">
<label for="firstName" class="form-label-spacing">Last Name:</label>
<input class="form-control" type="text" id="lastName" placeholder="Last Name">
<label class="E-Mail form-label-spacing" for="E-Mail">Email:</label>
<input class="form-control" type="email" id="E-Mail" placeholder="Email">
<label class="form-label-spacing" for="password">Password:</label>
<input name="Password" class="form-control" type="password" placeholder="Password">
<div class="form-group">
<label class="form-label-spacing" for="gender">Gender:</label>
<div class="radio">
<label><input type="radio" name="gender" id="gender">Male</label><br/>
<label><input type="radio" name="gender" id="gender">Female</label>
</div>
</div>
<button type="button" class="btn btn-default">Sign Up</button>
</div>
<div class="col-lg-8 col-md-8"/>
</div>
</form>
</body>
</html>
Thursday, April 16, 2015
In this blog we will turn ordinary form fields to a more modernized and professional looking form fields by using the bootstrap library. Let's say we have the following form fields with no formatting, or layouts applied to it with the following markup.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<title></title>
</head>
<body>
<form>
First Name: <input name="First Name" type="text"><br/>
Last Name: <input name="Last Name" type="text"><br/>
E-Mail: <input name="E-Mail" type="text"><br/>
Password: <input name="Password" type="password"><br/>
Gender:
<br/><input type="radio" name="gender" value="male" checked>Male<br/>
<input type="radio" name="gender" value="female">Female<br/>
<input type="submit" value="Sign-Up"/>
</form>
</body>
</html>
Tuesday, April 14, 2015
In the previous blog about selectors we've gone over what a selector is. In this blog we will something that is a little more advance and use JQuery to select the attributes within a HTML element. Most HTML elements have attributes associated with them for example the <input> element has the id, name, and type in them. So let's create a typical registration form input fields for this example and use JQuery to select the form fields according to what attributes the form fields have:
<html lang="en">
<head>
<meta charset="utf-8" />
<title>JQuery Attributes Selector Demo</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
</script>
</head>
<body>
<form>
User ID: <input name="UserId" type="text"><br/>
First Name: <input name="First Name" type="text"><br/>
Last Name: <input name="Last Name" type="text"><br/>
E-Mail: <input name="E-Mail" type="text"><br/>
Password: <input name="Password" type="password"><br/>
Gender:
<br/><input type="radio" name="gender" value="male" checked>Male<br/>
<input type="radio" name="gender" value="female">Female<br/>
</form>
</body>
</html>
Monday, April 13, 2015
A lot of you may have wonder why JQuery releases versions 1.x and 2.x, the reason is because the 1.x versions are released to support older versions of Internet Explorer. What a lot of people don't realize is that the 2.x version performs better, so if you have the choice between 1.x and 2.x you should choose the 2.x versions. Use the 1.x versions only if you have to. In this blog we will show how to use conditional comments which Microsoft created in Internet Explorer 5. Since it's specifically created for Internet Explorer other browsers will ignore it. Since Internet Explorer 9 seems to be the divider for support we will use it as the base case for our conditional comments. Here is the code to use the conditional comments to support older versions of Internet Explorer.
<html
<head>
<meta charset="utf-8" />
<title>JQuery Conditional Comments Demo</title>
<!-- [if lt IE 9]>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<![endif]-->
<!--[if gte IE 9]><!-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!--<![endif]-->
</head>
<body>
</body>
</html>
Friday, April 10, 2015
Selectors are at the heart of JQuery in almost every task you want to perform in JQuery, your initial setup is to use a selector to select an element in the DOM to perform some action on it. So in this blog we will show you some the common selectors that you will have to use in JQuery to get the job done.
First let's make sure JQuery is working by creating an HTML file with a little JQuery test script in it:
First let's make sure JQuery is working by creating an HTML file with a little JQuery test script in it:
<html lang="en">
<head>
<meta charset="utf-8" />
<title>JQuery Selector Demo</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(alert("jquery is working"));
</script>
</head>
<body>
</body>
</html>
Thursday, April 9, 2015
So according to Node.js's official website http://www.nodejs.org, NodeJs is
“a platform built on Chrome’s JavaScript runtime for easily building fast, scalable network applications. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient, perfect for data-intensive real-time applications that run across distributed devices.”
So what does that mean in English? Well it basically means that Node.js enables developers to use JavaScript like it's a server. Allowing you to do JavaScript server-side like development without the backend servers. Under the hood of Node.js is the virtual machine call V8. If you need something lightweight Node.js should be able to fit the bill especially on the client side.
Here are the steps to step up Node:
1. Go to the website https://nodejs.org/
2. Click on the "Downloads" tab
3. Download the install file for the your system
“a platform built on Chrome’s JavaScript runtime for easily building fast, scalable network applications. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient, perfect for data-intensive real-time applications that run across distributed devices.”
So what does that mean in English? Well it basically means that Node.js enables developers to use JavaScript like it's a server. Allowing you to do JavaScript server-side like development without the backend servers. Under the hood of Node.js is the virtual machine call V8. If you need something lightweight Node.js should be able to fit the bill especially on the client side.
Here are the steps to step up Node:
1. Go to the website https://nodejs.org/
2. Click on the "Downloads" tab
3. Download the install file for the your system
Wednesday, April 8, 2015
If you use Bootstrap in a local environment it would make sense to use the local version of Bootstrap that you've downloaded from the Bootstrap website. Follow the steps below to setup Bootstrap locally.
Step-By-Step Instructions:
1. Go the website http://getbootstrap.com then click on the "Get Started" tab. You will see three choices for download. You want to click the first button that is labeled "Download Bootstrap"
Step-By-Step Instructions:
1. Go the website http://getbootstrap.com then click on the "Get Started" tab. You will see three choices for download. You want to click the first button that is labeled "Download Bootstrap"
Tuesday, April 7, 2015
In JavaScript there are two kinds of values that most developers often believed to be the same. The "undefined" the "null" values. When understood correctly, they mean slightly different things.
undefined Example: In the example below we are going to examine the "undefined" value, and try to recreate some of the scenarios that an "undefined" value will be returned.
In an HTML file type in the following code:
- undefined : no value has been defined, usually this means that a variable or object has not been defined or declared before you use it.
- null : means that there is a value, but the value is not a valid value
undefined Example: In the example below we are going to examine the "undefined" value, and try to recreate some of the scenarios that an "undefined" value will be returned.
In an HTML file type in the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>undefined vs null</title>
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script>
var person = {
firstName : "Jane",
lastName : "Cat"
};
document.writeln("First Name: " + person.firstName + "<br/>");
document.writeln("Last Name: " + person.lastName + "<br/>");
document.writeln("Phone : " + person.phone + "<br/>");
</script>
</head>
<body>
</body>
</html>
Friday, April 3, 2015
JSON is becoming the standard way to exchange data in a relatively short amount of time. The reason is because JSON is easier to work with than XML.
JSON Object:
JSON Object:
- JSON object is made up of name/value pairs
Single Object:
{ "firstName" : "John"}
Thursday, April 2, 2015
Cropping an image is something that you will do often when you want to take out parts of the photo is uninteresting or distracting. For this blog we will be using the Key West photo that we resized in this blog.
Subscribe to:
Posts (Atom)
