Posts Tagged ‘jquery’

Use jQuery Ajax to load remote web content

Published by | Monday, March 24th, 2014

Use jQuery Ajax to load remote web content

What is Ajax?
Ajax stands for “Asynchronous JavaScript and XML,” a friendly term for when a webpage or application asks a server for new content, then displays it in the current page without having to reload. Although the X in Ajax originally stood for XML, the content being delivered often comes in a variety of forms today, including XML, HTML, JSON (JavaScript Object Notation), or just plain old text. Ajax content has become commonplace in modern web experiences, but writing the JavaScript required to actually load and display Ajax content by hand can still be a tedious process. And that’s where jQuery Ajax can step in to make your job easier.

How can jQuery help with Ajax content?
jQuery is a JavaScript library, which simplifies many tasks in JavaScript. It’s very popular with web designers and developers for dynamically updating a webpage’s Document Object Model (DOM), and changing its structure and content as needed.
Let’s dig into the basics of using jQuery to load Ajax content using a very simple example.

Exploring browser animation options: Part two, jQuery

Published by | Friday, September 21st, 2012

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.

How to build a list-based app with jQuery Mobile

Published by | Saturday, August 11th, 2012

In this tutorial, I’ll show you how easy it is to create a list-based app with the jQuery Mobile framework in just a few minutes, and hopefully encourage you to give it a try.

jQuery Mobile is an excellent way to create web applications for mobile devices, but it suffers from a bit of a PR problem. When I first learned about the framework, I put it on my list of technologies I should investigate, but I figured that because it’s based on jQuery, I’d have to be a jQuery expert before I could use jQuery Mobile. I found that nothing could be further from the truth.

All that is needed to use the framework is some basic HTML knowledge. In addition, because the framework is built on top of jQuery, you get all of the functionality of jQuery in a way that is easily accessible.

What is the jQuery Mobile Framework?

jQuery Mobile is a framework for developing web applications for touch-optimized devices. A framework gives you a structure or methodology for doing something—in this case, for developing web applications.

Although you can use HTML and JavaScript to develop mobile-optimized sites, you’ll quickly run into some serious problems: Different devices and browsers treat your code differently, so you have to write a bunch of JavaScript to overcome device orientation and other issues. You also have to create styles for different items like list views, dialogs, toolbars, and so on. jQuery Mobile does all of that for you. It creates a code base that handles differences between devices with support for a large range of devices.

A quick example: a list-based app

So let’s get started with a quick example. I’m going to build a list-based app that will show a selection of photos. I’ll start with some super basic starter code for a normal page:


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>ListApp</title>
  </head>
  <body>
  </body>
</html>

This is pretty standard HTML code. Let’s add a header section to our body:


<div id="header">
  <h1>My Photos</h1>
</div>

And of course, we’ll need a footer. I’m going to add a navigation with fake links to some other potential pages:


<footer>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Photos</a></li>
      <li><a href="#">Info</a></li>
    </ul>
  </nav>
</footer>

Now we need some content. To keep things short for this article, I’m going to add just two photos to the mix, but you can add as many as you like. Since this is a list-based app, I’ll put the photos inside a list.


<article>
  <ul>
    <li>
      <a href="#">
      <h1>Miniature Doberman Pincher</h1>
      <img src="images/doggie_tn.jpg" alt="Min Pin" />
      <p>This is what happens when a
      friend brings a dog to the studio.</p>
      </a>
    </li>
    <li>
      <a href="#">
      <h1>Gummy Bears</h1>
      <img src="images/gummies_tn.jpg" alt="Gummy Bears" />
      <p>Three different poster boards...mirror for reflection,
      black for background white for highlights</p>
      </a>
    </li>
  </ul>
</article>

We encased our list inside an <article> tag, and inside each list item we have a link, which will eventually take us to a large version of our image and then a headline, a thumbnail, and a short description.

HTML site before adding jQuery Mobile.

So far this is just a regular HTML page. Let's now add the jQuery library. Since the app is based on jQuery Mobile, we’ll need to add that library too, as well as some styles that the library needs. The easiest and recommended way to do this is to copy three lines of code from the jQuery Mobile Download page.


<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>

You can put this code in between the <head> tags in your document (not to be confused with the <header> tags). These three lines tie in the CSS, the jQuery Mobile library, and the jQuery library. If you preview the page now, you’ll be able to see some slight differences in the look of the page. The background will be gray, and the fonts will be different. Not too exciting, but it means the library is already working. Here comes the exciting part.

Formatting a list view

Modifying our list so that it gets mobile device functionality is super easy: we just need to modify our <ul> tag to read like this:


<ul data-role="listview">

Your page should look something like this:

Mobile page with a formatted list view made using jQuery Mobile.

From someone who has written the CSS necessary to make a list look like this photo, this library has already saved me a ton of time.

jQuery Mobile uses the data-role tag to assign roles to regular HTML elements on a page. The reason it can do this is because of a really cool feature in HTML5: the ability to add a data-whatever attribute to any tag and store information that you can use to style elements and create interactivity.

Making the list searchable

For an even more impressive example of what the library can do, try modifying your <ul> tag like this to make your list searchable:


<ul data-role="listview"  data-filter="true">
 

You should see a search box appear on top of your list. Start typing the word gummy into the search box and you’ll see that the list only displays one item (the one with the text gummy bears in the title). jQuery Mobile does all of that for you automatically.

jQuery Mobile list view screen with a searchable list field.

Formatting Headers and Footers

Let’s add some of the other tags that tell jQuery Mobile to format things in a more mobile-friendly fashion.

Content in jQuery Mobile is normally placed inside a data-role="content" section. We can add that to our <article> tag.


<article data-role="content">

Let’s also fix up the header. We’ll use data-role="header" in the <header> tag.


<header data-role="header">

Next, we'll fix the footer. Modify the <footer> tag like this:


<footer data-role="footer" data-position="fixed">

Not perfect yet, but this shows a big improvement. Our header looks like a mobile device header, our search bar and list are nicely formatted. Notice that I’ve added the data-position=“fixed” attribute to the footer. That places the footer at the bottom on mobile devices. Our footer looks good, but the links could look better. Let’s make them look like buttons on a mobile device.

Modify the <nav> tag in the footer to read like this:

  <nav data-role="navbar">

jQuery Mobile list view page with search field and formatted headers and footers.

Our application is looking great; however, we could really use some icons on the navbar links. jQuery Mobile lets us easily add icons by adding a data-icon attribute to links by modifying our list items like this:


<li><a href="home" data-icon="home">Home</a></li>
<li><a href="Photos" data-icon="grid">Photos</a></li>
<li><a href="Info" data-icon="info">Info</a></li>

jQuery Mobile list page with added icons on the header and footer.

With just a few attribute tags, we’ve added mobile functionality to a page that would have taken hours to write and style otherwise.

Multiple Pages

So far, we’ve built a single page app. If you want to create an app with multiple pages, you have to wrap each page with a tag, use the data-role=“page”, and add an id so that we can link to that page.

Before the <header> tag add the following line of code:


<div data-role="page" id="photos">

And don’t forget to close it underneath the <footer> tag:


</div><!-- Page Photos -->

I always add a comment because when working on a large jQuery Mobile project, I use a lot of <div> tags and it’s nice to know what the closing tags belong to.

Now that we have a page, let’s add a page for each of our photos:


<div data-role="page" id="dog">
  <header data-role="header">
    <h1>Min Pin</h1>
    <a href="#photos" data-icon="grid" data-iconpos="notext">Photos</a>
  </header>
  <img src="images/doggie.jpg" class="fullscreen" alt="Min Pin" />
</div><!-- Page Dog -->

<div data-role="page" id="gummies">
  <header data-role="header">
    <h1>Gummy Bears</h1>
    <a href="#photos" data-icon="grid" data-iconpos="notext">Photos</a>
  </header>
  <img src="images/gummies.jpg" class="fullscreen" alt="Gummy Bears" />
</div><!-- Page Gummy Bears --> 

The code is pretty similar to the photo list page with some important changes. First, there is no footer on these pages, since they will just display the photos. Second, we added a header with a link back to the home page—note the data-iconpos attribute on that link. You can control the position of the icons on buttons with this attribute, or you can turn the buttons off altogether using notext as a value. The button on the header is linked to our photos page.

I’ve also added a class of fullscreen to my photos. This is not a jQuery Mobile class, but something I’ve added manually because I want the photos to display full screen, so eventually I’ll add some CSS for that further down. First though, we need to link the items in our list view page to our new pages. Modify the list like this:


<li>
  <a href="#dog">
  <h1>Miniature Doberman Pincher</h1>
  <img src="images/doggie_tn.jpg" alt="Min Pin" />
  <p>This is what happens when a
  friend brings a dog to the studio.</p>
  </a>
</li>
<li>
  <a href="#gummies">
  <h1>Gummy Bears</h1>
  <img src="images/gummies_tn.jpg" alt="Gummy Bears" />
  <p>Three different poster boards...mirror for reflection,
  black for background white for highlights</p>
  </a>
</li>

Our app is almost done. Now, right before the closing </head> tag at the top of our document, let’s add the style to make sure our photos fit.


<style>
  img.fullscreen {
    max-height: 100%;
    max-width: 100%;
  }    
</style>

jQuery Mobile list app modified to show fullscreen images.

Our app is now ready. You can take a look at the finished jQuery Mobile app here.

 

Interested in more?
• All web + interactive courses on lynda.com
• All courses from Ray Villalobos on lynda.com

Suggested courses to watch next:
• jQuery Mobile Web Applications
• jQuery Mobile Essential Training
• Mobile Web Design & Development Fundamentals
• HTML5: Structure, Syntax, and Semantics

Writing easier code using the jQuery JavaScript library

Published by | Monday, June 4th, 2012

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 of View 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 jQuery
Create an Interactive Map with jQuery
Create an HTML5 Video Gallery with jQuery
Create a Rotating Carousel with jQuery

Building your web development core skills, and adapting a cross-language approach

Published by | Saturday, May 19th, 2012

Mac Keyboard image.

One question I encounter a lot is whether it’s best for a developer to dabble in a lot of new technologies like SASS, Node, and Rails, or if it’s a better route to specialize in a smaller number of technologies to the point of perfection. Sometimes it feels like the vast number of front- and back-end technologies make it impossible to keep up. This feeling can be especially daunting when you’re looking for a job and it seems like potential employers only want to hire Web Sifus who, on top of having mastered both front-end and back-end technologies, also come with design, video editing, and page layout skills. (If you know that person, or if you’ve encountered a job description like this that only wants to hire Superman—comment below.)

Like all extremes, trying to learn too much, and focusing on too little, are both wrong approaches. Plain and simple, trying to keep up with every language and library is impossible. The goal is not to be miserable trying to learn everything, but to focus on your core and then cross train on skills rather than languages.

Building your Core

For a web developer, a good foundational group of skills to start with are:
1. Setting up and managing a server
2. Building a semantic page structure
3. Mastering page styles
4. Building interaction with the front end
5. Using databases to customize a visitor’s experience

It doesn’t matter whether you’re learning PHP, Python, Ruby, or any other  language you prefer. Learning that some problems are better solved by languages on the server and some on the client is essential. In the end, it’s more important to be proficient at solving problems than slightly more fluent in a specific development language.

After building on your core, it’s essential to make sure you approach projects with a cross-language attitude that stays focused on using the languages you’re comfortable with, and also learning to use different technologies when they make the most sense—not because you feel like you “have to.”

Cross-Language Cross-Training

Cross training in web development means that no one language is an island. You almost never use PHP by itself, or try to solve every problem on a page with JavaScript. Sometimes, the best solution is figuring out how you can combine languages together, and how to decide which language is right for the task at hand.

Recently while working on a Facebook application, I noticed that although there is an SDK (Software Development Kit) for PHP and JavaScript, trying to use just one SDK is silly. It’s better to use both since every language has strengths and weaknesses. For me, web development cross training means taking advantage of that balance and using the best tool for the job.

In the latest episode of View Source, I show you how to use HTML, PHP, and jQuery to upload images to a server and display them on a page as they are loaded. This is a good example of cross training, or, using a combination of skills to accomplish a task. In the video, I use HTML to allow people to upload files, then I use PHP to read the files uploaded to a directory, and jQuery to update the page as soon as a new photo is uploaded so the image uploader can see whether the upload was successful.

Remember, balance is critical to any job. Don’t spread yourself too thin, but also don’t limit your learning so you find yourself struggling with cross-language development. Build your core, then work on your cross-training. While this exercise routine won’t bring you any closer to having six-pack abs, it will make you a better problem solver, and a stronger developer, which will bring you two steps closer to landing your dream job.

 

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 jQuery
PHP with MySQL Essential Training
Dreamweaver CS5 with PHP and MySQL

Easy ways to add photo and video galleries to your site

Published by | Saturday, April 21st, 2012

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’s Social Media Marketing With Facebook and Twitter course.)

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 jQuery
 Create an Online Photo Gallery with jQuery and Dreamweaver
Create an Interactive Map with jQuery and Dreamweaver
jQuery Essential Training

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

Published by | Saturday, April 7th, 2012

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 Fundamentals
Google Analytics Essential Training
Web Site Planning and Wireframing: Hands-On Training
Web Form Design Best Practices

Using the jQuery UI library with Google’s CDN

Published by | Monday, February 27th, 2012

The jQuery library gets a lot of coverage online at lynda.com. It’s a great way to build cross-platform interactivity into your websites with a minimum amount of effort. But you might not be familiar with its cousin, the jQuery UI library, which allows you to add tough-to-code widgets to your websites with just a few lines of code.

The JQuery UI  library screenshot

There are widgets in the jQuery UI library for all kinds of useful functionalities like drag and drop, buttons, dialogs, and progress bars. In fact, The jQuery UI library is so big it’s not even included in the normal jQuery library, and it comes as part of a separate download. In this week’s View Source tutorial, I will take a peek into the jQuery UI library to show you how to create a Datepicker you can use on your online projects.

Using the library is pretty simple. Let’s say you have this basic form:

1
2
3
<form action="#">
	<label>When <input id="datepicker" type="text" name="date" /></label>
</form>

First, you’ll need a copy of both the jQuery library and the jQuery UI library. If you don’t have the libraries already, Google and others keep copies of popular libraries online, so you can use a copy from Google’s CDN (Content Delivery Network). When you use a popular CDN like Google’s, it means that if someone visits a different site that uses the same library before coming to your page, it will be cached by your browser and available quicker to your users, which makes your page operate faster. Here’s two lines that will load up the libraries via Google’s CDN.

1
2
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.min.js"></script>

This usually goes in the <head> section of your HTML page. In WordPress, you can update the header.php template by going to your dashboard, finding the Appearance panel, and then selecting the Editor option.

Next, you’ll need to pick a style for the calendar pop-up. You can do this yourself by using the jQuery UI ThemeRoller, or by using jQuery UI’s library of predefined styles. Just go to the ThemeRoller page and choose the tab labeled Gallery.

Example of pre-built ThemeRoller jQuery themes

Once you pick the theme you want, you can download the theme to your desktop and install it, or you can simply link to Google’s copy of one of the themes from the Google CDN. Here’s the formula:

1
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/[JQueryUIVersion]/themes/[ThemeName]/jquery-ui.css" />

So in our case, since we’re working with version 1.8.17 of the UI, and the pepper-grinder theme, so we’ll use:

1
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/themes/pepper-grinder/jquery-ui.css" />

The names of the other theme options are: base, black-tie, blitzer, cupertino, dark-hive, dot-luv, eggplant, excite-bike, flick, hot-sneaks, humanity, le-frog, mint-choc, overcast, pepper-grinder, redmond, smoothness, south-street, start, sunny, swanky-purse, trontastic, ui-darkness, ui-lightness, and vader.

Now that our setup is done, all we need to do is type in our jQuery code that links the form field to the widget. You should put this before the closing </body> tag in your document. In WordPress, that would be in your footer.php file.

1
2
3
4
5
<script>
$(function() {
	$( "#datepicker" ).datepicker({ });
});
</script>

The jQuery code looks for a form element with the ID of Datepicker and adds the functionality to that field. Here’s a full listing of the code.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<title>DatePicker Sample</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.min.js"></script>
	<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/themes/pepper-grinder/jquery-ui.css" />
</head>
<body>
<form action="#">
	<label>
		When
		<input id="datepicker" type="text" name="date" />
	</label>
</form>
<script>
	$(function() {
		$( "#datepicker" ).datepicker({ });
	});
</script>
</body>
</html>

There are a lot of other options you can use, and when working offline you should definitely include a call to a local copy of the libraries. To find out how to do this and more, check out this week’s free View Source tutorial called Creating a Datepicker for your forms with jQuery on lynda.com. If you’re a lynda.com member and want to learn more about how to speed up your site with content delivery networks (CDNs), check out the member-exclusive video called Using a CDN to speed up your website.

 

Interested in more?
• The full View Source 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:
Create an Interactive Video Gallery with jQuery
Create an Online Photo Gallery with jQuery and Dreamweaver
Create an Interactive Map with jQuery and Dreamweaver
jQuery Essential Training
Set a Marquee to Autoplay with jQuery and Dreamweaver