Seasonal Savings: 20% off selected memberships for a limited time. Give now

Learn it fast with expert-taught software and skills training at lynda.com. See what you can learn

By Ray Villalobos | Monday, July 15, 2013

Working With The Twitter API 1.1 Changes

Twitter API v1.1

Did your Twitter app stop working after the 1.1 version of their API was released? Twitter made recent changes to its API that affected a lot of users and applications connected to the service, so I wrote a small PHP script that duplicates much of the old Twitter API functionality. The video below demonstrates the steps you’ll need to take to use it in your web apps.

By Ray Villalobos | Friday, September 21, 2012

Exploring browser animation options: Part two, jQuery

Animation can be accomplished in many ways with modern browsers. I’m currently working on a series of blog articles that explore some of the browser animation options available. In my last article, I looked at creating animations with CSS3 using keyframes and transitions. In this article, I’ll look at how to use jQuery to animate objects.

jQuery is a JavaScript library for building interactivity into web applications. One feature of jQuery is its ability to animate elements in HTML. This is quite powerful and useful because another feature of jQuery is its focus on remaining as backward compatible with older browsers as possible. This is significant because these two elements together make jQuery one of the most compatible of the animation options.

A good example of how to use jQuery animations can be found on my MexSantos MexSantos project, which is part of a creating Adaptive Website for Multiple Screens course I prepared for lynda.com.

The MexSantos website

If you click on one of the small thumbnails on the MexSantos website, you’ll see an overlay appear into view and then a copy of the photo in a larger view. The overlay animates subtly, but this is typical of the type of animation that jQuery is ideal for. Interface animations are its specialty and it handles them better than many other methods. jQuery uses JavaScript but one of its goals is to write JavaScript that is compatible with older browsers, so compatibility isn’t the problem with jQuery animations. The main issue is that jQuery animations require JavaScript, so unlike CSS they’re useless if the user has turned JavaScript off. This caveat can sometimes create usability concerns.

jQuery performs animations by modifying aspects of items on the page. For example, it can change the opacity of an image over time to make it look like it’s animated. Let’s take a look at the line of JavaScript code that adds the overlay in the MexSantos website:

#overlay {
    background: #000;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

One of the great things about jQuery is how commands can be chained together to create a sequence of events. In the JavaScript code above, we’ve managed to quickly create a div then assign it an ID of ‘overlay’ and append it to our body tag. To write the code that actually performs the animation, first we hide the element (otherwise animations show up immediately), and then we add a fadein() command. The fadein() method takes whatever the object is normally supposed to look like (based on CSS style sheets) and performs an opacity fade-in.

The CSS for the overlay ID is pretty simple: A black background with a fixed position that takes on the width and height of the entire window.

#overlay { background: #000; position: fixed; width: 100%; height: 100%; top: 0; left: 0; } 

To really understand what jQuery is doing, you need to look at the code as it animates. If you’re using a browser like Google Chrome with a dynamic code view, you should be able to right click on the background of the page and choose inspect element. Once you have inspect element open, make sure you’re in the elements tab and click on one of the thumbnails. Quickly look at the line before the closing tag. It should show the div being added dynamically and an opacity attribute with rapidly changing values.

jQuery rapidly animates the opacity value of our overflow element

The animate() method

There are a lot of other animation methods that can be used in addition to fadeIn(). Of course, where there is a fadeIn(), there logically is a fadeOut() method, but there are also others like slideDown(), and slideToggle(). Once you learn how to use one, the rest are pretty easy to pick up. There is also a generic method called animate() that allows more granular control over how animations are performed. These animation methods usually take parameters and callbacks as well. I’ve created an example that extracts the overlay functionality of the MexSantos website and shows how the generic animate() method can be used to control the CSS in objects.

jQuery Overlay

Here, we start off with an image that has a click event bound to it:

$('img.fooditem').click(function(e){
});

When someone clicks on the image, the fun starts. First, animate this element out of view with the animate() method, which allows you to change any CSS properties you want. For example, rather than just changing the fade, you can change the opacity as well as the position of the object.

//default animation for element
$(this).animate({
opacity: 0,
top: '+=200'
}, 500);

As part of the process, the animate() method takes in a JSON object that lets you modify CSS settings like the opacity and position of the element. You can also set the amount of time (for example, 500) you’d like the animation to take. jQuery has some predefined constants for animations such as fast and slow. Just like with the MexSantos example, we can add the overlay:

$('<div></div>').attr('id', 'overlay').appendTo('body').delay(300).hide().fadeIn(500);

We’re adding some delays because we want the animation of the image moving out of view to play before our overlay starts showing up. Now we can load the large version of the image:

$('<img>').attr('src',largeimage).attr('id', 'overlayimg').appendTo('#overlay').load();

With the large version of the image added, we need to know what to do once someone has finished looking at the overlay and clicks to return to the menu. We need to bind a click event to the overlay just like we did with the image, use the fadeOut() method to hide the overlay, and remove it from the page:

$('#overlay').click(function(e){
    $('#overlay').fadeOut('slow', function() {
        $(this).remove();   
    }); //fadeOut
}); //overlayclick

Finally, we’ll animate the image back into its original position.

$('img.fooditem').animate({
    opacity: 1,
    top: '0'
}, 500);

Conclusion

Animating with jQuery is like buying a car that is a “mechanic’s dream.” You really need to know your way around JavaScript, but there’s a real benefit in the backward compatibility with older browsers you gain. Using jQuery for browser animations is a strong route to take when working with complex interface interaction. Once you learn a few key concepts like binding methods and chaining commands, this type of animation actually becomes quite fun.

If you’re interested in writing code with jQuery, make sure you check out some of our offerings on jQuery animation in the lynda.com training library.

By Ray Villalobos | Monday, June 04, 2012

Writing easier code using the jQuery JavaScript library

In a nutshell, jQuery is a JavaScript library that helps you get things done. It simplifies the process of accessing the DOM (Document Object Model) and supports older browsers. Let’s take a look at a simple example—say that you have an H2 in your page with an ID of ‘cathead’ and you’ve written it out like this.

 <h2 id="cathead">Consumer Widget</h2> 

If you wanted to modify the code to signify a color change when a person clicks on it, you could set up the code like this with JavaScript:


document.getElementById('cathead').onclick=function () {
  this.style.color='red';
} 

The first step the JavaScript takes is to search the DOM for an element with an ID of  ‘cathead’ and then bind an onclick event to it. It then uses the style property to change the color of the element to red. Pretty basic stuff. To do the same thing in jQuery, you’d write something like this:


$('#cathead').click(function() {
  $(this).css("color","red");
});

Other than this code being a lot shorter, the first thing that jQuery does is simplify the process of accessing the DOM. If you look at the two different code examples, you’ll see that jQuery uses the $() variable to gain quick access to elements. The great thing about jQuery is that you can use the $() to access any CSS property, not just IDs.

Let’s look at what happens if we make ‘cathead’ a class instead of an ID element because we have a bunch of headlines that we want to apply the color change to:


<h2 class="cathead">Consumer Widget</h2>
<h2 class="cathead">Another Widget</h2>

jQuery would do it like this:


$('.cathead').click(function() {
  $(this).css("color","red");
}); 

So, with jQuery, instead of selecting an ID, you pass along a class you want to select. You may be thinking that you could just as easily do the same thing by using JavaScript’s getElementByClassName—and you’d be right… sometimes. One main stumbling block is that the getElementsByClassName method is not available in a lot of versions of Internet Explorer, so—plain and simple—some browsers don’t support it. Plus, the getElementsByClassName method returns an array that you have to iterate through in order to modify each instance of the class, which means your code ends up being longer (a lot longer). jQuery on the other hand uses its own methods that are backwards compatible with older browsers and allows you to select the DOM in a variety of ways.

Here’s another example of why I prefer jQuery: While JavaScript has several methods for selecting elements, including the aforementioned getElementById(), getElementsByClassName(), getElementsByTagName() (you can find how well they’re supported in here: http://www.quirksmode.org/dom/w3c_core.html#gettingelements), jQuery only has one.

And that’s not where the magic ends. You can easily select every other element by doing something like this:


<h2 class="cathead">Consumer Widget</h2>
<h2 class="cathead">Another Widget</h2>
<h2 class="cathead">One More Widget</h2>
<h2 class="cathead">Last Widget</h2>
<script>
  $('.cathead:even').css("color","red");
</script>

or you can use its cousin…


$('.cathead:odd').css("color","red");

…which makes it trivial to do zebra striping table rows. Plus, jQuery has methods for animation, and easily building overlays, tabs, and other UI elements.

After you get started with JavaScript, jQuery is an excellent next library to learn. If you’re just getting started, I recommend you check out this week’s episode ofView Source where I show you how to use some basic jQuery to build a simple toggle tooltip.

Interested in more? • The full View Source weekly series on lynda.com • All web + interactive courses on lynda.com • All courses from Ray Villalobos on lynda.com

Suggested courses to watch next:• Create an HTML5 Video Gallery with jQueryCreate an Interactive Map with jQueryCreate an HTML5 Video Gallery with jQueryCreate a Rotating Carousel with jQuery

By Ray Villalobos | Saturday, May 12, 2012

Why you should learn PHP after HTML, CSS, and JavaScript

PHP in Action using my iPad

PHP in Action using my iPad

Earlier in my design career I read an insightful book by Roger Black called Websites that Work. One of his rules of design was that after black and white, red was the third color. White is the brightest color, and black has the most contrast to white, but red is the color that gives you the most bang for the buck if you’re looking to get your text noticed. That three-color premise makes me think back to development languages—specifically, which are important, why they are important, and in what order they should be approached.

I’m a big fan of PHP, and much like red, I think it’s the language that will give you the biggest bang for your learning buck. I propose that after you learn HTML/CSS, the next thing you should learn is JavaScript, and the third thing you should learn is PHP. You might argue that HTML and CSS are two different things, but I see them as the key semantic and layout combination of the web, so I consider them one item bundled together.

So what is PHP, and why should I learn it third?

PHP is a server-side language with files that are processed before they are sent to a client computer. It’s easily available in even the cheapest shared hosting servers and runs some of the biggest web sites on the Internet including Facebook. PHP also serves as the engine for most blogging platforms, including WordPress.

Some may argue that learning something like node.js is an easier transition from JavaScript, and I will admit, the superior object-oriented structure of Python and the MVC frameworks like Rails might be tempting, but to me, PHP is a the language for getting things done. If you already know JavaScript, the syntax is eerily similar so you can get going quickly.

If you’re into an MVC structure, there are plenty of frameworks available for the PHP language. To get started, I’d recommend checking out Drew Flakman‘s PHP frameworks course, MVC Frameworks for Building PHP Web Applications.

Using PHP hands-on

In this week’s episode of View Source, I wanted to show you a technique that I use often with PHP—creating a folder where people can drop photos, and then using PHP with jQuery to build a slideshow of the photos dropped into that folder. When it’s done, all you have to do is drop a new photo into a folder to update your slideshow, and your site will automatically update with the new content. It’s how I update the photos on the blog for View Source, and I’ve used the same technique to add elements like audio and PDF links to web sites before. With this technique, you can easily teach someone how to update a web site by simply dropping files into a folder.

Interested in more? • The full View Source weekly series on lynda.com • All web + interactive courses on lynda.com • All courses from Ray Villalobos on lynda.com

Suggested courses to watch next:PHP for Web Designers• Create an Interactive Video Gallery with jQueryPHP with MySQL Essential TrainingDreamweaver CS5 with PHP and MySQL

By Ray Villalobos | Saturday, April 21, 2012

Easy ways to add photo and video galleries to your site

An easy media strategy for your company

In a previous job designing web sites for a newspaper, I discovered the value of media. When I started to learn about traffic patterns on web sites using an analytics product, I realized that photos, videos, galleries, and slideshows can significantly increase the amount of time people will spend engaging on your site. On any given day, our most popular article would give us around 20,000 page views, but publishing a slideshow could easily produce four to six times that amount of traffic, and it took less time to put together.

Think about it—when you go to Facebook, what are you more likely to interact with, a status message or a gallery? Facebook knows galleries get more interaction and ranks posts to appear more prominently on the timeline if they contain any sort of media. That’s why it’s better to include a photo or a video in your posts. (For more on this, check out Anne Marie Concepcion’sSocial Media Marketing With Facebook and Twittercourse.)

While photos can be quite easy to take, creating a gallery system can be more challenging. This week on View Source, I will show you an easy way to create photo galleries for your web site using a jQuery plug-in called Galleria.

What about videos?

Videos are another great option that can help you make your site stickier and more engaging, but they can also be harder to host and display on your site. If you’re looking to have a collection of videos on your web site, one good option is to have YouTube host your videos. YouTube has the infrastructure to serve four billion videos per day and has 800 million unique users in a month, and YouTube videos are easy to include in Twitter, Facebook, or WordPress posts since each upload has its own easy to embed, pre-written code housed under the Share button.

In addition to embedding videos, the best way to improve the visibility of your videos is through a YouTube channel. A YouTube channel gives you a presence on YouTube that will be indexed by Google, so uploading your videos has the added advantage of making them more easily found by YouTube’s huge audience, as well as Google’s. You can add descriptions (with links back to your sites), tags, and people can subscribe to your channels to keep up with your latest videos.

What about my web site?

If you’re a web developer and you’d rather not use the YouTube embed link to post your videos to your site, take a look at this episode of View Source, where I show you how to read a YouTube-provided XML file that lets you add a YouTube channel playlist directly to your site. The task of converting information from one data format to another more usable format is called Parsing and it is a key skill that all developers need to master.

If you’re into WordPress, or want a cut and paste solution, take a look at this JavaScript snippet for placing a YouTube Feed on a site. Simply paste the code in WordPress as a Widget on a sidebar. There’s a bit of customization required, so be sure to read the notes on how to modify it for your YouTube channel.

If you use any of the above solutions, when you upload to YouTube, your embeds, sidebars, and on-site playlists will also automatically update and reflect your changes right on your site. That alone simplifies the production process quite a bit.

Ultimate automation

One feature that you might not be aware of is the ability to upload directly to your YouTube channel through most smartphones. Smartphones, like iPhones and Android devices, have excellent built-in video editors that will quickly let you crop out and adjust your video before sending it directly to your YouTube channel. Using tools like this is a great way to cover special events, and a quick way to post to your site remotely without having to import, edit, and upload your video through a traditional desktop application.

Editing, enhancing, and posting to youtube is easy on most smartphones

There’s a lot more you can do with YouTube, like create a special channel for users to post videos to directly. In one of my previous jobs, we created a channel for a contest where people submitted videos of themselves dancing to win tickets to a concert. The videos submitted are aggregated, but not posted live until approved. You can also annotate messages into your videos, and alter your movies with YouTube’s built-in editor. It’s definitely worth a second look when creating your workflow strategy.

Conclusion

A photo online is truly worth a thousand words, but the power of video is not to be underestimated. Having a good strategy and utilizing tools like Galleria and YouTube will expand your brand’s reach, make your life easier, and make your sites more engaging in the process.

Interested in more? • The full View Source weekly series on lynda.com • All web + interactive courses on lynda.com • All courses from Ray Villalobos on lynda.com

Suggested courses to watch next:• Create an Interactive Video Gallery with jQueryCreate an Online Photo Gallery with jQuery and DreamweaverCreate an Interactive Map with jQuery and DreamweaverjQuery Essential Training

By Ray Villalobos | Saturday, April 07, 2012

Three tips to help you get started on a new web development project

View Source series table of contents as seen on lynda.com

Recently I received a message from a member inquiring about how I choose the topics I cover in my weekly View Source series. If you were to look at the index for View Source, it may look like unrelated topics, but all the tutorials do have a common thread—they were all made to focus on 10-minute tips that are useful to self-starters. For many years I designed websites, graphics, icons, and multimedia projects for a large newspaper and felt somewhat like a small cog in a really big engine. It was at that job that I learned how to code with HTML, CSS, and JavaScript, but ultimately I knew there was a lot more to making a site successful than coding. It’s those ‘other’ skills you need to be a success that I try to touch on as often as possible in my View Source entries.

Today’s blog entry stems from a post-newspaper job I was offered making a network of radio station websites from scratch. Since I have a natural love for learning, the thought of putting something brand new together was irresistible, but with knowledge of only the core trifecta (HTML, CSS, and JavaScript), I really needed to focus on what real-world techniques and skills I needed to accomplish this job.

What comes next? What skills do I have to develop ? What techniques do I have to learn? These are some of the questions I regularly asked myself when I was facing the radio station build, and questions I often ask myself now when I am coming up with View Source topics, so I wanted to share three things I learned in my early transition that helped me to move on and start a new project.

1. Analytics

One of the first things that caught my eye even while working as a small cog in the newspaper industry was analytics, and in particular, traffic patterns on web sites. My first experience with analytics was learning how to use a program called Urchin, which was the precursor to Google Analytics. Working in Urchin I learned that web sites, like most things, obey certain patterns. For example, web sites tend to have more traffic on weekdays than weekends, and traffic goes down dramatically on holidays. I learned that it’s important to track your web apps as soon as you launch them, and then to make your future plans are based on how people are interacting with your product.

One of my tasks I preformed on the radio station web site was to build a small 1-10 rating system feature that I didn’t think much about. The rating system worked by letting you give Kudos and ratings to your friends directly on your friend’s pages. It didn’t take me that long to program, and I had no real plans for doing much else with it, but people went nuts over the feature. Soon rating wars and a reciprocal rating requests (‘I’ll give you a 10 if you give me a 10′) starting breaking out as people wanted to make sure to always have a lot of votes and a perfect 10 rating. I didn’t see it coming, but using analytics to study the usage of the network allowed me to adjust my programming accordingly.

Learning how people use your products is even more important than your road map. Your users are the most important thing, so it’s very important to make sure you know how they’re using your product, and using analytics allows you to really track what is working (and what isn’t).

In this video from chapter two of the Google Analytics Essential Training course, author Corey Koberg discusses the concept of web analytics as not only a tool, but also a process.

2. Jumping into back-end technologies

On the web, developers talk about front-end versus back-end technologies. Front-end refers to technologies that execute on a user’s browser—the aforementioned HTML, CSS, and JavaScript are all front-end technologies. To build web sites that serve up different information to different users, you have to learn back-end languages, which tend to be more complicated. When I left my first job I already knew that no site gets built with only front-end technologies, so I started right away with PHP, which is still a great way to learn back-end development. PHP is a great language for solving problems. Do you need to submit a form? Talk to a database? Upload a File? These are all things PHP can make easy.

In the coming weeks, there’s going to be more discussion of back-end technologies on View Source. In this week’s episode, seen below, I focus on showing you how to parse XML from a YouTube channel.

Why YouTube? Building a YouTube Channel lets you tap into YouTube’s huge audience which views about three billion videos per day, and sees about 800 million unique visitors per month. Creating a YouTube channel is easy, free, and allows you to incorporate video into your site without any bandwidth costs.

3. Using jQuery and AJAX

One of the other technologies I committed myself to learning after leaving my newspaper job was jQuery. I wasn’t particularly interested in jQuery, but I was interested in what jQuery could do for sites through AJAX (Asynchronous JavaScript and XML). You see, there is a problem with JavaScript, and it’s the same problem that many web languages encounter—the way the language works on different platforms is inconsistent. This is really evident when you start working with AJAX as a way to have sites update content without reloads. jQuery takes care of the cross-platform issues and allows you to build things that would be really hard to do using only JavaScript. jQuery also helps your site feel modern and, because it handles cross-platform issues, it will make your life easier.

If you’ve got seven minutes, take a look at this View Source tutorial that shows you how to build a photo rotator using jQuery:

Every week, I plan on expanding the list of technologies featured in the View Source series, including a focus on mobile, CSS, CMS, and others. I will also continue to focus on tricks I’ve learned along the way, and emerging technologies like jQuery mobile. As always, if you have an idea for something you’d like covered, please feel free to let me know in the comments section below!

Interested in more? • The entire View Source weekly series • All developer courses on lynda.com • All web + interactive courses on lynda.com • All courses from Ray Villalobos on lynda.com

Suggested courses to watch next:Mobile Web Design & Development FundamentalsGoogle Analytics Essential TrainingWeb Site Planning and Wireframing: Hands-On TrainingWeb Form Design Best Practices

By Ray Villalobos | Friday, January 27, 2012

View Source series introduction: Adding breadcrumbs and custom URLs to WordPress websites

Most of the tools and languages we use online are constantly changing. HTML itself is in constant flux, a new version of Firefox releases every six weeks, and who knows what’s going to happen next with video formats. It’s enough to drive you crazy. Suffice it to say that the web design and development industry demands people who are learners by definition.

Sometimes the hardest part about any new learning commitment is getting started. If your pile of work is not getting any smaller, and you’ve only got a few minutes to learn something new, then View Source may be the series for you.

View Source, which is named after the view source browser-function that allows you to see a web page’s underlying code, is a new lynda.com series that offers 10-minute intermediate and advanced web design projects. Each movie in the course is self-contained and shows how to accomplish an interesting effect and/or technique.

view source example At its core, View Source is about being curious and developing an attitude for learning with limited time.

This week, I’ll show you how to add WordPress breadcrumbs to your pages, per Google’s recommendations (see Google’s SEO Starter Guide).

I love WordPress, but sometimes it doesn’t behave how you need it to and it’s easy to see that it started out as a blogging platform. On the positive side, the awesome thing about WordPress is that it’s easily customizable with HTML, CSS, JavaScript, and PHP, so if you know how to work with those languages, it’s quite easy to make WordPress do your bidding. In Adding breadcrumb links to your WordPress sites I show you how to incorporate breadcrumbs into your WordPress website by adding a function to your functions.php file.

Another thing Google recommends in its SEO Starter Guide is generating more meaningful URLs that are rich with keywords. By default, your WordPress links probably look something like:

http://viewsource.com/?p=2

Since this is not very descriptive, it would be better to have a category and the name of the article in the URL. Maybe something like this:

http://iviewsource.com/webtips/view-source-adding-breadcrumb-links-to-your-wordpress-sites/

In my second View Source installment, Creating a custom URL in WordPress, I show you how to easily modify the look of your URLs by changing your Permalinks settings, which can be found in the admin section of WordPress under the Settings menu. The default options WordPress gives you emphasize organizing things by date, but I also show you how to apply Custom Structure options in my tutorial. More information about how to further modify your WordPress permalinks is also available in the Using Permalinks WordPress documentation.

In the next View Source installment, I’ll show you how to use Content Delivery Networks when calling your JavaScript Libraries, which can speed up how quickly your sites load, and I’ll also discuss how to build an Image Rotator using a jQuery plug-in.

See you in two weeks with more View Source!

Interested in more? • The entire View Source series • All developer courses on lynda.com • All courses from Ray Villalobos on lynda.com

Suggested courses to watch next:• CMS FundamentalsWordPress 3 Essential TrainingFoundations of Programming: FundamentalsSocial Media Marketing with Facebook and Twitter

Get the latest news

  •   New course releases
  •   Pro tips and tricks
  •   News and updates
  
New releases submit clicked

You can change your email preferences at any time. We will never sell your email. More info

Featured articles

A lynda.com membership includes:

Unlimited access to thousands of courses in our library
Certificates of completion
New courses added every week (almost every day!)
Course history to track your progress
Downloadable practice files
Playlists and bookmarks to organize your learning
Become a member

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.