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

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, March 31, 2012

How to become a web developer: Tips for those with a print background

I meet a lot of people who come from a print background and are interested in learning new web skills. Learning to make that transition doesn’t have to be scary—I know because I was one of those people who learned about designing for print first and then moved on to the web. I went through my first few jobs working for commercial printers learning about paper, inks, imageSetters, imposition, trapping, film, and typography. When the web came around, I realized that it was the next big thing and I needed to learn as much as I could about it in order to survive in the long run. Eventually I managed to learn what I needed and move on to work on the web full-time.

The web can be scary, but learning new web skills doesn’t have to be hard. It’s like trying to eat an elephant…you have to do it one bite at a time. In this post I will share some of my learning experiences and offer some recommendations for those with a print background who are interesting in learning more about web development. I encourage you to share your print to web journey, and to ask questions, in the comments section below.

Overcome the experience deficit

Every job listing will ask for years of experience. Whether it’s two years or five-plus years, I’ll let you in on a secret—the years are not as important as your portfolio. If you come from the print field, you know what I mean. Generally people get hired based on what they’ve accomplished, not how long they’ve been doing it. I know because I landed my first online job with zero years of experience in the field, and I did it by building a portfolio of work that was equivalent to years of experience. Although I hadn’t worked in the industry, I had projects to show that I knew what I was doing. So, your first step in the print to web development migration is to start building websites as soon as possible.

Start by learning how to build sites with WordPress. It doesn’t require any development skills and it’s pretty easy. You’ll need to know how to set up WordPress and how to set up a server with your own domain name. For help with this, check out Managing Hosted Websites, a course that goes through the process of setting up a domain name and installing WordPress. Once you’ve installed WordPress and set up your server and domain name, it’s time to start building web sites. For this I recommend checking out WordPress Essential Training. Some entire businesses are based on building web sites with WordPress, so it’s a great first skill that will help you gain some of that critical experience everyone is looking for. Plus, it’s a marketable skill that you can use to build a portfolio of work right away.

In this clip from chapter one of the Managing Hosted Websites course, I discuss how to pick the right domain name before you choose your server, since your domain name decision will have an impact on how people arrive at your web site:

Just knowing how to install and work with WordPress is not enough, though. What people will really want to see is how well you can customize a WordPress web site. Go through WordPress: Creating and Editing Custom Themes to sharpen your WordPress customization skills, then dive into Create an Online Portfolio with WordPress (because after you’ve got a few sites under your belt, you’ll need to show off what you’ve done).

Build from your Strengths

Another thing I did when I got started was to focus on building from my strengths. I had a design portfolio, so I started learning software that would let me build on design skills. This was the late ’90s so I began by learning a program called GoLive, a website editor much like Dreamweaver.

I already knew how to use Photoshop, so I worked with those skills and focused on designing projects for the web first in Photoshop, and then transferring those skills to Adobe Fireworks, which is better for preparing online graphics. I knew about formats like EPS, PDF, and TIFF, so I learned about the online formats like GIF, JPEG and then PNG. The point is, when you get started plan to evolve your skills instead of trying to learn too much.

So, if you’re starting with a background in design, check out Designing Web Sites from Photoshop to DreamWeaver. This course will point you in the direction of a quick win and teach you how to build on your existing Photoshop knowledge. From there, move on to DreamWeaver with Dreamweaver CS5 Essential Training.

Find out what the market needs

Even when I was a new designer, I knew that development skills would be very valuable, but that learning development wouldn’t happen overnight. So right away I established learning development as one of my long term goals. I started with HTML since it was the easiest to learn. If you’re just getting into development, I recommend you start with HTML 5 Structure, Syntax and Semantics. It’s a thorough course that explains the basics of HTML. CSS wasn’t as critical to learn when I got started in the ’90s, but it is very today, so I would head in that direction after HTML. If you’re primarily a designer, then this should be an area of focus for you. Start with CSS Fundamentals, then move on to CSS Page Layouts, and plan to go through one new CSS course per month.

In this movie clip from chapter three of the CSS Fundamentals course, James Williamson asks the question “What is CSS3?” and walks you through the answer in detail:

Becoming awesome

Once you’re past the basics, your next skill should be JavaScript—this is a very hot skill. JavaScript is one of those topics that can be tougher to learn, but the better you get with JavaScript, the more sought after you’ll be. Start with JavaScript Essential Training and then move on tojQuery Essential Training. (jQuery is a javascript framework that helps you build interactivity into your projects easily and handling a lot of cross-platform issues.)

Once you’ve got those under your belt, move on to a server-side programming language. I recommend starting with PHP and then moving on to MySQL. Once you’ve spent some time with JavaScript, the same programming concepts apply to PHP and MySQL, so they will be easier to pick up. As you begin looking for development work, you’ll start to notice those two languages featured prominently in job descriptions. Remember, the stronger you are, the more you’re worth. When you’re ready, try out PHP with MySQL Essential Training.

Conclusion

Remember the elephant…one bite at a time. Don’t get overwhelmed with all the technology. Make yourself a plan and remember to be consistent with learning. Even if you watch only one movie a day or a few movies a week, you can make a dent in that virtual elephant and build enough experience before you know it. Using myself as a case study, I know you can do it. There weren’t any special skills I started with, I was a print designer just like you. If I can do it, I know you can. Just remember, even when it seems overwhelming…you can learn it!

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

By Cynthia Scott | Thursday, August 25, 2011

WordPress 3.2: New look, new features, new possibilities

The updated WordPress admin dashboard. The new design features a more minimalistic and streamlined approach to the content.

WordPress 3.2 was released on July 4th, 2011, followed by the 3.2.1 release on July 12th. If you are learning WordPress, you’ll find that although the content in our current WordPress 3 courses is still relevant, the user interface may be different as new features are added to WordPress.

Our current WordPress courses include:

WordPress 3 Essential Training (covers both WordPress.com and self-hosting through WordPress.org)WordPress 3: Creating and Editing Custom Themes WordPress: Creating Custom Widgets and Plugins with PHPWordPress 3: Building Child ThemesWordPress 3: Developing Secure Sites

I asked author Morten Rand-Hendriksen to summarize the changes in WordPress 3.2 to help anyone who is working through our WordPress courses. Here’s what he had to say.

By Michael Ninness | Monday, April 18, 2011

Chris Coyier helps a print designer learn WordPress

We recently received the following via our site feedback form (available at the bottom of every page):

From:  Nancy White, April 7, 2011

Hi. Where can I leave feedback about a particular course? I’ve been taking the best course EVER!

I responded and let her know she could simply use the same form again, click the course feedback button at the bottom of every course page, or simply reply to my email. Here is her more detailed response, which she graciously agreed to let me share here as a blog post:

I have been singing the praises of lynda.com for many years. It’s hands-down the best learning place online.

I’ve worked in print and online publications for many years. I’ve enjoyed most of the courses I’ve taken at lynda.com, but often it’s on subjects that I am already quite familiar with, so I’ve picked up some great tips and tricks.

But I’ve known next-to-nothing about WordPress. I’ve always considered it a platform for a personal, mom-and-pop-type blog, something I had no need for. But as you know, WordPress has come a long way! As my clients are getting smarter and more tech savvy, they are demanding web sites that they can easily update themselves. So, I’ve learned the fundaments of Joomla! and WordPress, but was very limited when it came to customization.

Enter Chris Coyier’s course WordPress 3: Creating and Editing Custom Themes! Something I knew nothing about, but definitely wanted to learn.

I gained an incredible amount of knowledge from this course. I’ve been able to convert a rather complicated HTML site into a custom WordPress theme! I am ecstatic!  It did not happen overnight, but it happened. I am happy, and the client is happy!

The lessons in this course are a great reference I keep coming back to. I would be happy to see more from Chris Coyier. He’s very practical and easy to follow.

Thank you again for this and all the other great content from lynda.com.

Loving it!

Nancy White

Thank you for sharing your success story with us, Nancy. It always excites us to hear how our members are applying what they learn from the Online Training Library®. In this day and age, it is so important for designers to start getting comfortable and savvy with designing for multiple mediums. Feel free to share your own stories with us via the site feedback or course feedback buttons, or add a comment below. Yes, we really do read every single one.

Happy learning,

Michael Ninness VP of Content, lynda.com

By Samara Iodice | Wednesday, November 03, 2010

A lynda.com training producer learns Joomla, and practices what we teach

Video shot by lynda.com’s Taymar Pixley and Lucas Deming, and edited by Chris Chan Lee. Starring author Jen Kramer and training producer Samara Iodice.

You may be surprised to discover that behind every lynda.com author is a training producer, like me, who oversees all aspects of course production—from content development, to script review, to graphics creation, to booth and/or live action recording, and eventually publishing in the Online Training Library®. You may be even more surprised to learn that lynda.com training producers are not usually experts in the software for the courses they produce. In fact, often the first experience I have with a certain piece of software is in reviewing the early draft of a course table of contents in preparation for beginning work with an author. That doesn’t mean training producers aren’t extremely knowledgeable about the course content, but where the author must know details of how every individual feature of the software functions, the training producer is looking at something completely different—the overall educational integrity of the course and associated exercise files.

Some training producers are experts in some software programs—it’s often how our career path brought us to where we are. Some of us are experts in certain products; all of us are skilled in many products, are very technologically savvy, and learn new software quite easily. Before becoming a training producer at lynda.com, my software expertise was in the computer-aided-drafting (CAD) area, having used AutoCAD extensively in my previous career as an engineer, and also in the web design area, using Dreamweaver for the last several versions.

One area of web design I had become increasingly interested in was the use of content management systems (CMS) such as Drupal, WordPress, and Joomla to create web sites that could be more easily maintained than the traditional static web site. So, when the opportunity arose to produce a Joomla title with the very enthusiastic author, Jen Kramer, I jumped right in. I was particularly excited to learn a CMS because I’d been doing volunteer media work for a youth-run nonprofit, Everybody Dance Now, and the teenage leaders desperately needed a new, modern web site they could learn to maintain themselves.

So, after a week of recording with Jen Kramer, I had my first real taste of Joomla, and that, in turn, stimulated my appetite to watch many of the other Joomla and CMS offerings in the lynda.com Online Training Library®. Before I knew it, I had designed a new Joomla-based national web site for the young ladies of Everybody Dance Now, and was being called upon to design other chapter web sites around the country for the same organization, in addition to providing training for those chapters to maintain their own sites. It’s been a whirlwind of volunteer activity that I wouldn’t have been able to participate in, had I not fully immersed myself in the lynda.com Online Training Library® to learn a new topic.

Joomla 1.6 Beta Preview Course Trailer

Click to watch the trailer for Jen's Joomla course.

With the release of Jen Kramer’s Joomla! 1.6 Beta Preview title last week, many people are wondering what Joomla and other content management systems are all about, and how they can apply this technology in their own lives. I’m hoping that sharing my experience as a training producer practicing what we, at lynda.com, teach will help inspire lynda.com members to investigate Joomla and all the various content management systems in the library, and discover these practical and highly-effective solutions for creating and maintaining a powerful web presence.

Watch Jen’s course, Joomla! 1.6 Beta Preview, and learn more about Joomla at the Joomla web site.

By Cynthia Scott | Tuesday, November 02, 2010

WordPress week at lynda.com

You asked for WordPress courses, and we heard you. We have three new WordPress courses coming online this week.

New in the Online Training Library® is WordPress 3.0 Essential Training with author Morten Rand-Hendriksen. Morten is a gifted teacher and WordPress expert who is eager to share his knowledge with you. The course includes a walkthrough of common tasks in WordPress, from setting up an account to launching self-hosted sites. Also included are tutorials on inserting media, installing plugins, creating custom themes, and incorporating search engine optimization.

Soon, tune in to Chris Coyier’s new course, WordPress 3.0: Creating and Editing Custom Themes. I am very excited to bring Chris Coyier’s unique voice to the lynda.com Online Training Library®.

Wrapping up our new WordPress releases this week will be WordPress: Creating Custom Widgets and Plugins with author Drew Falkman. Let us know what you think!

By Cynthia Scott | Friday, June 11, 2010

Short-term fix to Dreamweaver CS5 and WordPress course

Many thanks to the alert members who let us know that we were missing information in our recent Dreamweaver course, Dreamweaver CS5 and WordPress. We want our titles to be helpful to all members, and really appreciate hearing when we can do better.

As soon as the title went up, we started getting feedback that the first chapter, “Setting up WordPress,” needed additional details to help Windows users install the WampServer—namely, that PC users should create their site in the c:\wamp\www\ folder. We’ve added an overlay to the last video in Chapter 1, “Establishing the Dreamweaver site,” and this short-term fix is up on the site now, thanks to your input. If you tried to use the course and had trouble, please try this extra step.

Please, continue to let us know what details you need to take advantage of this or any one of our courses. Hearing from you helps us create the ideal training with the details that you need. We look forward to hearing from you.

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.