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 wether 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

Tags: HTML, jquery, PHP, Web development

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:
• Create an Interactive Video Gallery with jQuery
• PHP with MySQL Essential Training
• Dreamweaver CS5 with PHP and MySQL

Tags: PHP, View Source

In honor of yesterday’s announcement of Adobe’s Creative Suite 6, and the six newly released CS6 New Features courses on lynda.com, I thought this week’s Featured Five collection should expand to showcase six free movies from the lynda.com library. All of our new CS6 New Features courses (Photoshop, InDesign, Illustrator, Dreamweaver, Flash, and Fireworks, plus Premiere Pro and After Effects CS6 which were released on April 12, 2012) are designed to help you discover the latest software updates, and how the new features may fit well with your workflow needs. With the introduction of the new Adobe Creative Cloud subscription model, which allows you to pay a flat fee to access all of the Suite applications, finding out what’s new across the Suite may now be more important than ever as you’ll be faced with new decisions during the upgrading process. To give you an idea of what our CS6 New Features courses have to offer, here are six free-to-everyone movies that discuss some of the interesting new abilities of the CS6 flagship applications. After you’ve checked out the featured six, make sure to let us know in the comments section which CS6 features have you the most intrigued.

1. Photoshop CS6 for Photographers New Features
You may have explored the Photoshop version of CS6 already, given that a public beta has been available for a few weeks. In Photoshop CS6 for Photographers New Features, Chris Orwig reviews the key features that are going to make a difference specifically for photographers. Some of the new features in Photoshop are pretty significant (not to mention extremely cool), but the one that might actually affect the most Photoshop users is the revamped Crop tool. In this free movie Chris demonstrates how the new Crop tool works in a much less destructive way than Crop tools of the past:

2. Illustrator CS6 New Features
Having just celebrated its 25th anniversary, Illustrator is a fairly mature product in the software world. Despite it’s industry years, there is no lack of interesting upgrades to the vector graphic program this year. For one thing, you’ll notice that like Photoshop, Illustrator has gone to a dark interface, which gives it quite a modern look despite its advanced age. There are also a few cool new ways to tackle old tricks, including a vastly updated pattern creator. Here’s a free movie from Justin Seeley‘s Illustrator CS6 New Features course that shows how the new Pattern Options panel works:

3. InDesign CS6 New Features
When I asked the author of this course, Anne-Marie Concepcion, what her favorite feature from InDesign CS6 was, she said, “I think my favorite feature would be the Auto-Size text frames option. It’s not exciting like the neat-o Liquid Layout, but Auto-Size is something I can use right now and something I will be using every day.” It’s always those features that you use every day and can’t remember living without that make a software upgrade significant, even if they’re not the sexiest new technology options. In this video from the InDesign CS6 New Features course, Anne-Marie talks about the new Auto-Size text frames option and why it makes her life easier:

4. Dreamweaver CS6 New Features
Dreamweaver CS6 has a bunch of new features, including interface, optimization, and FTP support enhancements, but it’s the CSS capabilities that have author James Williamson intrigued. By employing the CSS Transitions feature housed in a convenient new Dreamweaver panel, you can easily add and manage your transitions. You don’t need to take my word for it, though, you can hear the enthusiasm for Dreamweaver CS6′s support of CSS transitions in James’ voice in this free movie from the Dreamweaver CS6 New Features course:

5. Fireworks CS6 New Features
Fireworks is the Creative Suite app that helps you produce optimized web graphics for any device. In this excerpt from Fireworks CS6 New Features, Ray Villalobos shows off his favorite new Fireworks feature, which is support for creating and exporting CSS Sprites. In the video, Ray demonstrates how you can now use Fireworks to simultaneously help with graphics and the hover state of graphics:

6. Flash Professional CS6 New Features
The CS6 version of Flash Professional has new support for 3D, and a new framework for exporting HTML. In this free movie from Flash CS6 New Features, Anastasia McCune focuses on the new Captive AIR runtime option for creating Android, OSX, or Windows apps. You can now decide if you want your Flash apps to run with Captive AIR embedded or if you want to require that users download the AIR runtime. In this video, Anastasia considers why you might want to choose one option or the other:

If you’d like to see more free CS6 tutorials, we’ll have a lot more coming to lynda.com in the next few weeks. While you’re checking out the new CS6 Suite, also keep in mind that 10 percent of all lynda.com content is free to try. Just click on any of the blue links on any course table of contents page in our library to watch unlocked videos.

I’ll be back next week with five more free selections—but in the meantime, I’ll be checking out what CS6 has to offer. Which CS6 features do you have your eye on?

Suggested courses to watch next:
• Photoshop CS6 for Photographers New Features
• Illustrator CS6 New Features
• InDesign CS6 New Features
• Dreamweaver CS6 New Features
• Fireworks CS6 New Features
• Flash CS6 New Features

Tags: Adobe CS6, Dreamweaver CS6, Fireworks CS6, Flash CS6, Illustrator CS6, Photoshop CS6

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.

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

Tags: jquery, View Source, WordPress, YouTube

Although we work hard to get courses covering the latest materials live on lynda.com as quickly as possible, before we start production on a beta course, we sometimes have to pause to consider what plan of action will, in the long run, ultimately deliver the best learning experience for our members. A number of the lynda.com content managers have been product managers or engineers at software companies, and we understand a software company’s struggle to define, clarify, and deliver the right features to their users, and that changes can happen to software late in the game. When it comes to our courses, with releases going live nearly every week, we think it’s important to balance the time it takes to create the training you need, with a larger picture that keeps our member’s overall best interests in mind.

With the latest version of Adobe Edge, Preview 5, we were forced to strongly consider this delicate balance. As a result, we decided to skip the Preview 5 release and focus on the upcoming next release. We love Adobe Edge, we want to make sure you are successful with it, and we want to reassure you that there will continue to be new Adobe Edge content on lynda.com in the future.

Thanks for your support, and happy learning.

Doug Winnie, Senior Content Manager for Web and Interactive
Mordy Golding, Author, Edge First Look and Director of Content

Tags: Adobe Edge

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

Tags: AJAX, analytics, jquery, PHP, View Source

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 to jQuery 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!

Tags: Dreamweaver, HTML, PHP, WordPress

I love using Adobe BrowserLab. It’s a great way to check how your sites look on different browser platforms. But I’m even more excited about Adobe Shadow, a new Adobe Lab that allows you to test your web sites on mobile devices by creating a dynamically-updating connection between your devices. In layman’s terms, this means that you can visit a web site on your desktop browser and simultaneously preview it on multiple phones and tablets. So, as you browse through different pages on your desktop, the mobile devices also update their screens.

Adobe Shadow in action working on multiple interfaces.

Setting up

Getting everything to work takes a few steps. First, you’ll need to download the Shadow desktop application from Adobe Labs. On a Windows machine, you’ll also need to install Bonjour which allows for auto discovery of devices. The Bonjour installer is included with the Shadow download and it’s already a part of Mac OS, so no need to install it there.

After downloading and installing the Shadow desktop application, you’ll need to download and install the Google Chrome extension for Adobe Shadow. You can download the extension from the Google Chrome Web Store.

Finally, you’ll need to download the Adobe Shadow app for each mobile device you want to use (it’s free!). You can do that from either the Apple App Store or Google Play, but it’s probably easier to just go to your respective device’s store.

Connecting to devices

Once you’ve got everything installed, make sure the following is true:

1. Your Shadow desktop application is running.
2. Bonjour is installed and running on your machine (automatic on Mac, but an additional install on a PC).
3. You’re using the Chrome browser and have installed the Adobe Shadow extension.
4. Your mobile devices and your desktops are in the same network and the network has Internet access.
5. You are running the Shadow apps in every device you want to test with.

When you first run the Shadow apps on your phones, you’ll see your desktop appear as a device to pair with. At this point, you have to type into your desktop a series of numbers supplied from the Adobe Shadow app.

Once your devices are hooked up, any website you browse on your desktop will show up on all of your synced mobile devices. The cool thing about this is that if the site you’re browsing uses media queries to target different devices, your mobile devices will automatically display the correct version on each device.

You can interact with each device as if it were running its own browser, which, essentially, is exactly what’s happening. As soon as you go to a new tab or a page on your desktop, all mobile devices will automatically update. I tested this on a Galaxy IIs, an iPhone, a Galaxy Tab, and an iPad, and it works flawlessly. This is not like the static version of the page you see with BrowserLabs—Adobe Shadow offers a dynamic page you can interact with in real time.

Even better, Adobe Shadow’s desktop client ships with a tool that let’s you inspect the DOM. This inspection works nearly exactly like the WebKit Developer tools, so you can change text, delete elements, modify javascript, css, html, and anything else you want, and the mobile device will update with those changes applied.

Shadow Tips

Shadow does create a persistent connection to your device and uses a wireless radio to continuously try to reconnect to your device so Adobe suggests that you use Shadow with a device that is plugged into a charger. Make sure you close or hide the app when you’re not actively using it.

To accomplish some of its magic, Shadow is also using a Phonegap tool called weinre (WEb INspector REmote) that allows you to set up a server for doing some of what the Shadow Lab is doing on a local server. For this reason, inspecting the DOM requires an active Internet connection, and the process can be a bit slower than just browsing through pages because Adobe is temporarily running a copy of weinre on its servers.

Interested in more?
• 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
• Titanium Mobile App Development Essential Training
• Web Site Planning and Wireframing: Hands-On Training
• Flex 4.6 and AIR 3.0 New Features for Mobile Apps
• Web Form Design Best Practices

Tags: Adobe Browser Labs, mobile device development

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.

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.

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

Tags: developer, HTML, JavaScript, jquery, Ray Villalobos

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.

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:

<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.

<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.

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:

<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:

<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.

<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.

<!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

Tags: developer, HTML, jquery, Ray Villalobos