Click Here To View Webiob, yes that’s me.

FOR IMMEDIATE RELEASE
June 30, 2008 –

New York, NY June 30, 2008—Today Simon & Schuster Children’s Publishing in conjunction with Webiob, unveiled a thirteen-page interactive experience of the New York Times bestselling picture book Smash! Crash!, the first book in JON SCIESZKA’S TRUCKTOWN series. JON SCIESZKA’S TRUCKTOWN includes more than fifty books in a variety of formats, to be published by the following Simon & Schuster imprints: Simon & Schuster Books for Young Readers (hardcover), Aladdin Paperbacks (Ready-to-Read original paperbacks), Little Simon (novelty), and Simon Scribbles (coloring & activity). The program launched in early January 2008 with Smash! Crash!, which debuted high on the New York Times bestseller list and is still on the list after twenty-two weeks. Additionally, Smash! Crash! is a national bestseller on Publishers Weekly and SCIBA lists.

Web Interactive Online Books! (WEBIOB) is an interactive website built around a book. Each iob is created by taking existing books and adding movie clips, animation, video, sound, music, narration, text and graphics. The interactive online book (IOB), available exclusively at http://www.trucktownbooks.com, combines a lengthy excerpt of the book with original video, animation, and interactive activities into one experience that can be enjoyed by children and adults alike.

Mary McAveney, Vice-President of Marketing at Simon & Schuster said, “We feel the IOB is the perfect use of cutting-edge technology to not only expand the awareness of Smash! Crash! but also provide a brand-new experience for those children who have read the picture book. By taking an excerpt of the book and supplementing it with multimedia audio and video, as well as games and activities, it not only becomes the perfect way to introduce a new reader to the series, but also bring a thrilling additional level of enjoyment for existing fans who are looking for new ways to experience the world of JON SCIESZKA’S TRUCKTOWN.”

Photography is the content marketing darling of 2012. It’s the subtext of the recent headlines regarding Facebook’s purchase of Instagram and Pinterest’s meteoric growth this quarter. In large part, this is attributable to the fact that photographs provide an easy way for people to create and contribute content on social media, helping to reduce the high proportion of lurkers.

Before examining how you can use photographs to expand your content marketing offering, let’s look at the usage of each of the hottest new photography sites.

Pinterest has experienced exceptional growth, passing both Tumblr and Flickr in February 2012 with 23.7 million unique U.S. visitors (according to Nielsen).

Tumblr was last year’s breakthrough social media site no one had heard of, since most of its users were under 25 according to comScore. According to Tumblr CEO David Karp, the site has 50 million blogs and about 4.5 billion impressions a week.

7 ways to use photographs in your content marketing mix

Photographs are worth more than a thousand words for content marketers. They’re eye-candy that draws readers in. Here are seven ways to incorporate photographs into your content marketing mix and some questions to help you create an effective photography offering:

1. Make your products into stars. Go beyond basic product shots used on websites and in catalogs. Display your products in the context of how they’re used in real life. Entice viewers to want to have them.

• Questions to answer: How can we show off our products? How can we make our offering more visually appealing?

2. Tell your organization’s story. Use photographs to give prospects, customers, and the public a sense of your firm’s history and physical location.

• Questions to answer: Does your organization have photographs showing your founders or interesting history about your firm or its location? How can these stories be used to make our brand, products, and company more memorable?

3. Enhance your brand. For many organizations, this means going beyond your traditional brand guidelines. It requires thinking about a 360-degree brand that social media requires.

• Questions to answer: How will your brand appear in photographs? What type of backgrounds will you have? How will your employees dress? What type of photographs will you use?

4. Show a human face. Quite literally, photographs show who’s behind your brand and your organization.

• Questions to answer: When using photographs in your content marketing, who will represent your brand? Is it a senior executive, a customer-facing employee, or a brand spokesman? How will they dress (business attire or t-shirts with your firm’s logo)? Think Best Buy employees in their blue shirts, or Progressive Insurance’s Flo and her white outfit.

5. Educate viewers to use your product. Photographs show customers how to use your products in lieu of videos or as a supplement to other instructions. Think beauty products or cooking, where customers can see the interim process.

• Questions to answer: Who will represent your brand? What location will be used? Will customers appear in the photographs? Do you have release forms?

6. Broadcast the news. Show your product is part of, or participates in, current trending topics, such as the Romney campaign’s Etch-A-Sketch moment.

• Questions to answer: Is this news positive or negative for our firm? Who do we want to represent our organization as our spokesperson in this situation? Do they have the appropriate PR training, clothes, and products?

7. Invite customers and the public to share product and brand related photos. Photographs make great user-generated content since it’s relatively low risk for contributors to create and submit them. All they need to do is to hold up their smartphones.

• Questions to answer: What guidelines are needed for these photographs? Does the customer have the rights to the photograph?

Humans are visual beings, which explains one of the reasons why we’re attracted to photographs. As a marketer, ensure photography (or images in general) is an integral part of your content offering. Photos help achieve your marketing objectives and extend readers’ engagement with your content.

Do you have any other recommendations for how photographs can be integrated into your content marketing? If so, let us know what they are.

View source here.

In this art piece, I did the best I could to change a full of sunshine, ordinary photograph into a gloomy image of the world after destruction of mankind. Using simple tools, I turned lively streets into abandoned ruins overgrown with weeds. A number of stock images and a few little tricks helped me optimize my work and made this job more interesting and spectacular. I am not finished with the project and if you feel like you would like me to take it further, just let me know?…

We asked the CSS Awards team to create a selection with the greatest submissions from the last week. Check them out and suggest other entries in the comments! Also, feel free to submit here other cool finds or your own creations.

• Technology: jQuery, HTML, CSS
• Difficulty: Intermediate
• Completion Time: 1-2 hours

As you know there are a host of competing javascript libraries around these days. Though I prefer jQuery, I’ve always liked the way the menu on MooTools worked. So in this tutorial we’ll recreate that same effect … but we’ll do it in jQuery!

Demo and Source Code

Step 1

Let’s begin by writing the necessary HTML to create a simple vertical navigation. For the structure, as you may have guessed, we will use an unordered list <ul> with the ID name “sliding-navigation“. Also, we will add some links and give each list item <li> the class name “sliding-element”.

I’m also going to add in a title element. This is a useful thing to do as many WordPress blogs for example have title elements in their sidebar navigation (e.g. “Archives”). So it would look something like this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<ul id="sliding-navigation">
	<li class="sliding-element">
<h3>Navigation Title</h3>
</li>
	<li class="sliding-element"><a href="#">Link 1</a></li>
	<li class="sliding-element"><a href="#">Link 2</a></li>
	<li class="sliding-element"><a href="#">Link 3</a></li>
	<li class="sliding-element"><a href="#">Link 4</a></li>
	<li class="sliding-element"><a href="#">Link 5</a></li>
</ul>

Step 2

Now, let’s create a HTML document where we can put the work we just did. Create a new HTML file and call it demo.html. Then open this file with your favorite text editor and insert the following code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

Navigation Effect Using jQuery
<script type="text/javascript" src="jquery.js"></script><script type="text/javascript" src="sliding_effect.js"></script>
<div id="navigation-block">
<ul id="sliding-navigation">
	<li class="sliding-element">
<h3>Navigation Title</h3>
</li>
	<li class="sliding-element"><a href="#">Link 1</a></li>
	<li class="sliding-element"><a href="#">Link 2</a></li>
	<li class="sliding-element"><a href="#">Link 3</a></li>
	<li class="sliding-element"><a href="#">Link 4</a></li>
	<li class="sliding-element"><a href="#">Link 5</a></li>
</ul>
</div>

There are a few things to note here:

1. The !DOCTYPE for our demo.html file is set to XHTML 1.0 Strict. This is not required for the effect to work but I try to get in the habit of using it as much as I can.
2. You may have notice that the <link> tag is refering to a file called style.css. However, no such file exists. No worries though, that is the next step.
3. Finally I’ve wrapped my navigation block into a <div>. We’ll make use of this later to position the block on the page.

Step 3

Now that we have our HTML file labelled and working, let’s add some styles. Remember that our HTML document is pointing to a CSS file called styles.css. So, let’s begin by creating a file called styles.css and saving it in the same directory where our HTML document lives. As we did in the previous step, open this file with your favorite text editor and insert the following code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80

body
{
margin: 0;
padding: 0;
background: #1d1d1d;
font-family: "Lucida Grande", Verdana, sans-serif;
font-size: 100%;
}

ul#sliding-navigation
{
list-style: none;
font-size: .75em;
margin: 30px 0;
}

ul#sliding-navigation li.sliding-element h3,
ul#sliding-navigation li.sliding-element a
{
display: block;
width: 150px;
padding: 5px 15px;
margin: 0;
margin-bottom: 5px;
}

ul#sliding-navigation li.sliding-element h3
{
color: #fff;
background: #333;
border: 1px solid #1a1a1a;
font-weight: normal;
}

ul#sliding-navigation li.sliding-element a
{
color: #999;
background: #222;
border: 1px solid #1a1a1a;
text-decoration: none;
}

ul#sliding-navigation li.sliding-element a:hover { color: #ffff66; }

Step 4

At this point your demo.html page should be looking something like this:

So, it is finally time to begin using jQuery. But before we can get started we need to do a few of things:

1. Download the latest version of jQuery.
2. Create a new file called sliding_effect.js and save it in the same directory as that of your HTML and CSS file.
3. Lastly, insert the two previous files to your HTML document’s <head>.

This is what your HTML file’s <head> should look like now:

1
2
3

Navigation Effect Using jQuery
<script type="text/javascript" src="jquery.js"></script><script type="text/javascript" src="sliding_effect.js"></script>

Step 5

Now, we will create the function that will do all the “heavy” lifting for the sliding effect to work. This function will take five parameters (navigation_id, pad_out, pad_in, time, and multiplier) and use them as follows:

1. navigation_id: This is the ID name of the navigation, which contains the elements the effect will be applied on.
2. pad_out: This is the number of pixels to be padded left when one of the links inside the navigation is hovered.
3. pad_in: This is the number of pixels to be padded left when one of the links inside the navigation is no longer being hovered.
4. time: This represents the amount of time (in milliseconds) that takes for one of the link elements to slide in and back in to place when the page is loaded.
5. multiplier: The job of the multiplier is to increase or decrease the amount that takes the a following link element to slide in to the screen. In other words, if the multiplier is 1, all link elements will slide in to the screen in equal time intervals. However, if it is less than 0, the subsequent link elements will slide in faster, and if it is more than 1 the opposite will happen.

So, open your sliding_effect.js file and insert the following code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66

function slide(navigation_id, pad_out, pad_in, time, multiplier)
{
// creates the target paths
var list_elements = navigation_id + " li.sliding-element";
var link_elements = list_elements + " a";

// initiates the timer used for the sliding animation
var timer = 0;

// creates the slide animation for all list elements
$(list_elements).each(function(i)
{
// margin left = - ([width of element] + [total vertical padding of element])
$(this).css("margin-left","-180px");
// updates timer
timer = (timer*multiplier + time);
$(this).animate({ marginLeft: "0" }, timer);
$(this).animate({ marginLeft: "15px" }, timer);
$(this).animate({ marginLeft: "0" }, timer);
});

// creates the hover-slide effect for all link elements
$(link_elements).each(function(i)
{
$(this).hover(
function()
{
$(this).animate({ paddingLeft: pad_out }, 150);
},
function()
{
$(this).animate({ paddingLeft: pad_in }, 150);
});
});
}

Step 6

All we need to do in order to trigger the script is call the function when the page has loaded. There are two place to put the following snippet of code. It can either be written inside the sliding_effect.js file (I chose this option for this tutorial) or called within the HTML using a <script> tag. Either case will use the same code, which is as follows:

1
2
3
4
5
6
7

$(document).ready(function()
{
slide([navigation_id], [pad_out], [pad_in], [time], [multiplier]);
});

Step 7

Finally we’ll add a bit of style to the page to make it look slightly more glamourous. First I’ve created an image block that looks like this:

The image has a faint gradient, a highlight line, is 190px wide and called “background.jpg”. The idea will be to position this to the left of our navigation so that the buttons slide in under it. We’ll also add a little heading title to the page. So our HTML becomes:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

Navigation Effect Using jQuery
<script type="text/javascript" src="jquery.js"></script><script type="text/javascript" src="sliding_effect.js"></script>
<div id="navigation-block">

<img id="hide" src="background.jpg" alt="" />
<h2><span>Navigation Effect Using jQuery</span></h2>
By Bedrich Rios
<ul id="sliding-navigation">
	<li class="sliding-element">
<h3>Navigation Title</h3>
</li>
	<li class="sliding-element"><a href="#">Link 1</a></li>
	<li class="sliding-element"><a href="#">Link 2</a></li>
	<li class="sliding-element"><a href="#">Link 3</a></li>
	<li class="sliding-element"><a href="#">Link 4</a></li>
	<li class="sliding-element"><a href="#">Link 5</a></li>
</ul>
</div>

Notice that I’ve added the image inside the “navigation-block” element and give it an ID called “hide”. Also I’ve added a heading element and subtitle. Now we add a bit of extra CSS to our styles.css file as follows:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

h2
{
color: #999;
margin-bottom: 0;
margin-left:13px;
background:url(navigation.jpg) no-repeat;
height:40px;
}

h2 span
{
display: none;
}

p
{
color: #ffff66;
margin-top: .5em;
font-size: .75em;
padding-left:15px;
}

#navigation-block {
position:relative;
top:200px;
left:200px;
}

#hide {
position:absolute;
top:30px;
left:-190px;
}

So first in the <h2> element, we have set the HTML text to vanish using “display:none” and set a background image of some nicer looking text I prepared earlier.

Also notice that the “navigation-block” element now has a relative position, so that we can move the “hide” image over to the left. This will make the tabs appear from under it.

Lastly to give our tabs a bit of finish I’ve added a subtle background image that looks like shading like this:

1
2
3
4
5
6
7
8
9
10
11

ul#sliding-navigation li.sliding-element h3
{
color: #fff;
background:#333 url(heading_bg.jpg) repeat-y;
font-weight: normal;
}

Finished

And we’re done!

Call-to-Action buttons play a pivotal role in soliciting action from the user. To garner the requested action, buttons are placed on the website that allow the user to perform an action, such as buying something, or leading to another page for more information. Careful planning is necessary in the creation of your call to action, and in this article I will explain the best practices for creating effective call to action buttons. I will also present you with examples in action to give you a better understanding of what works.

In order for your Call-to-Actions to work successfully, you must first determine how they’ll fit into the overall scheme of your site. By laying the groundwork, or information architecture, you’ll begin to discover how the buttons work within the web interface. To survive in the market, you have to generate revenue. So, the successful website is that which leads the reader of web page to the desired end result (“Buy Now”…”Learn More”). Now the question arises, how can we make effective call to action buttons which work in the real world.

This is what Web 2.0 is all about. It’s the same concept that we used back in the day, when we were developing in Flash. So why is that important? Well, back then we had to learn how to create all these amazing buttons. We created buttons like this to keep the user from clicking on the back arrow, while using a Flash website. And, that was just not kosher. So why am I blogging about this? Well, I could not think of a more crucial time to help people understand how to get a customer to click on a button to buy product, learn more, or just become friends.

So what is web 2.0? It is Flash with out the Flash. It’s Design without limitations, which can and does go both ways. People these day do not have a lot of time do to these things. Knowing this, it becomes very easy to direct a user to click on a design, website, logo, avatar, button etc… If no one is clicking, no one is buying. This is how you landed on this page; the golden key to an online successful campaign. Anyways, I can go on forever about this…

Factors to Consider

Size

In web design, historically the larger the element, the more important it is. The size of your call-to-action, in relation to its surrounding elements, is essential in converting users to take action. After all, it’ll be hard to get the intended action from your user if your button is miniscule in size and blends in with the rest of the text.

Use white space: A lot of what can be achieved from increasing the size of a button can also be accomplished by simply placing the button around plenty of white space. A button surrounded by white space will be much more prominent than one which is lost in a sea of text and graphics.

The more white space there is in between a call to action button and a surrounding element, the less connected they are. Therefore, if you have other elements that can help convince users to take action, reduce the white space in between those elements and the call to action.

ScrapBlog
You can see the effects of using a prominent color, sufficient white space, and size relative to surrounding elements to attract users’ attention. Straightforward language conveys a sense of easiness, claiming that you can “start” right away by taking action.

Social media is an incredibly effective tool for sharing content, boosting popularity, improving search engine optimization, and getting spotted on the internet.  Using great call to action icons that integrate with the theme of your site, will help encourage readers to share your content.  Finding the perfect icon set can take lot’s of time, so I have decided to do some of the leg work for you…

Here is a collection of as many free social media icon sets I could find that you can use to enhance your website. I have gathered these across the web. While some of these have different licenses they have been created for use in a wide variety of materials. Click on the link for the set that you are interested in and it should take you to the page of the designer’s site where you can find out more information or download the set. Enjoy these and have fun…

1. ‘+’ Icon Set

2.  WG Social Media Icon Set

3.  Circular Social Media Icons

4.  3D Statuette Icon Set

5.  SleekSocial: Icon Set

6.  Free Hand-Sketched Icon Set

7.  Vector Social Media Icons

8.  A Life In Pixel Icon Set

9.  Bevel Dark Icon Set

10.  Grunge Peeling Stickers Icon Set

11.  Sophisticated Premium Peel Over Icon Set

13.  Elegant Themes Icon Set

13.  Social Buzz Icon Pack

14.  Black Ink Grunge Stamp Icon Set

15.  Black Paint Splatter Icon Set

16.  Old Bottle Crowns Icon Set

17.  Made of Wood Icon Set

18.  Burnt Wood Icon Set

19.  Crumpled Paper Icon Set

20.  Dark Denim Social Media Icon Set

21.  Sticker Icon Set

22.  Nurture Social Icon Set

23. Hand Drawn Doodle Icon Set

25.  Web 2.Origami Icon Set

I hope you enjoy these and can put them to good use. I know, I have. I just want to say thanks to all the artists that made this possible. Without you guys, most would be one button less.

What is an iFrame application?

An iFrame application allows you to embed an external Web page in your custom Facebook Page tab. Your “index” or “canvas” page is actually hosted on a non-Facebook server and is surrounded by Facebook “chrome” (the Facebook elements on the page).

Because this iframed page isn’t hosted on Facebook, it can use standard HTML, CSS, and JavaScript like any other Web page does. Interactions with Facebook content are done using the Facebook Software Development Kits (SDKs) and XFBML tags. (For this tutorial, the Facebook SDK is not required.)

To start, you need to create a Facebook Application on Facebook Developer Page (http://developers.facebook.com/apps)

1. Click Create New App to create a new Facebook Application.

2. Fill up the form with your desired App display Name and Namespace, then click Continue.

3. Your new facebook application will show up, then under “Select how your app integrates with Facebook” click “Page Tab Name is name that appears on the Left Navigation of your Facebook Page, Page Tab URL is your iframe page, Secure Page Tab URL is the https version of your iframe page. Page Tab Edit URL is the page for admin access.), then click Save Changes.

4. After saving the changes, view your application profile/page by clicking the View App Profile Page link on the left side navigation.

5. Your Facebook Application Profile will appear, then click the “Add to My Page” link from the left navigation.

6. Finally add your Facebook Tab Application to your Facebook Page.

If the “View App Profile Page” is missing, you can simply navigate to this address
(https://www.facebook.com/dialog/pagetab?app_id=YOUR_API_ID&redirect
_uri=YOUR_PAGE_TAB_URL)

Read More about Facebook Tab Tutorial at Facebook Developer (http://developers.facebook.com/docs/appsonfacebook/pagetabs/)