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

We recently released Silverlight 5 Essential Training, with Walt Ritscher. If you’re new to Silverlight, check out this overview of the plug-in from chapter one of the course:

If you’re a developer who’s interested in working with Microsoft operating systems such as Windows 7, Windows Phone, or the upcoming Windows 8, you might wonder why this course might be important. After all, Silverlight, like Adobe’s Flash Player, is a web browser plug-in. You should be interested because many mobile devices, such as the iPhone or iPad, can’t display content built for these technologies, and Microsoft has made it clear that Silverlight apps won’t  be able to run across all modes of Internet Explorer when Windows 8 is delivered.

Fortunately, the skills you have acquired to build Silverlight applications are directly transferable to some new and important application platforms. Silverlight applications are created with a combination of XAML (eXtensible Application Markup Language) and your choice of either C#, or Visual Basic. (In his Silverlight 5 Essential Training course, Walt Ritscher focuses exclusively on C#, since it’s the more popular of the two languages.) Wondering how it all ties together? The same languages—XAML, C#, and Visual Basic—are all at the core of Microsoft’s developer platforms of the future: Windows Phone and Windows 8.

Consider the following XAML code snippet that declares a page control in a Silverlight application:

<UserControl x:Class=”SilverlightApp.MainPage”
xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation”
xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”
…more XML namespaces…
mc:Ignorable=”d” d:DesignHeight=”300″ d:DesignWidth=”400″>
<Grid x:Name=”LayoutRoot” Background=”White” Width=”300″ Height=”200″>
   <TextBlock Height=”23″ HorizontalAlignment=”Left” Margin=”10,10,0,0″
     Text=”Hello World” VerticalAlignment=”Top” />
 </Grid>
</UserControl>

The code in bold font defines the layout and presentation of a single line of text: “Hello World.” Now here’s a page control for a Windows 8 Metro app; notice that the bolded code looks almost exactly the same:

<Page x:Class=”Win8App.MainPage”
xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation”
xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”
…more XML namespaces…
mc:Ignorable=”d”>
 <Grid Background=”{StaticResource ApplicationPageBackgroundBrush}”>
   <TextBlock HorizontalAlignment=”Left” Margin=”10,10,0,0″ TextWrapping=”Wrap”
     Text=”Hello World!” VerticalAlignment=”Top” FontSize=”36″/>
 </Grid>
</Page>

And here’s a page control for Windows Phone:

<phone:PhoneApplicationPage x:Class=”PhoneApp.MainPage”
xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation”
xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”
…more XML namespaces and properties…>
 <Grid x:Name=”ContentPanel” Grid.Row=”1″ Margin=”12,0,12,0″>
   <TextBlock Height=”30″ HorizontalAlignment=”Left” Margin=”10,10,0,0″
     Text=”Hello World” VerticalAlignment=”Top” />
 </Grid>
</phone:PhoneApplicationPage>

These component definitions are all built with XAML, and use pretty much the same syntax to display text on the screen. They have different root elements: UserControl for Silverlight, Page for Windows 8, and PhoneApplicationPage for Windows Phone. But they all support the same basic set of visual controls such as Grid and TextBlock, and they all use “code-behind” architecture to bind logic written in C# or Visual Basic to visual presentation defined in XAML.

The bottom line is, you can’t just move an existing Silverlight or Windows Phone application to Windows 8 and expect it to work. The underlying technologies are different, and there are differences between the application programming interfaces (APIs) for the different operating systems. You’ll have to “port your application,” a process that involves creating new code files and copying selected portions of code to the new version of the application. You’ll probably also have to re-imagine the user interface for the new target OS, since applications written for a browser have different layout guidelines from those on a phone or tablet, or those designed to run full-screen in high resolution as they might on a Windows 8 desktop. If you already know how to use XAML and other .NET programming languages, learning how to build Windows 8 apps will be much faster and easier.

In this video from chapter three of the Silverlight 5 course, Walt explores the programming side of Silverlight 5 and discusses the relationship between XAML and .NET:

In the near future, we’ll be releasing courses on both Windows Phone and Windows 8 application development. If you want to learn some of the skills you’ll need right now, Walt Ritscher’s Silverlight 5 Essential Training course is a good place to start, along with his Visual Studio 2010 Essential Training, and Joe Marini’s C# Essential Training. You can use Microsoft’s free express versions of Visual Studio or a full copy of Visual Studio as your development environment. When you’re ready to get started with Windows 8, which is currently available as a free Consumer Preview, you can use a Beta version of Visual Studio that lets you build your first Metro apps right away.

Microsoft has put a lot of effort into making development skills and programming languages transferable across their multiple operating systems and application platforms; these efforts make it easier to learn, and easier to build applications for, their current and future technologies.

Interested in more?
• All developer courses on lynda.com
• All courses from David Gassner on lynda.com

Suggested courses to watch next:
• Silverlight 5 Essential Training
• Windows 8 Consumer Preview First Look
• Visual Studio 2010 Essential Training
• C# Essential Training
• ASP.NET Essential Training

Tags: application development, Silverlight, Windows 8, Windows Phone

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

This week we celebrated the release of a new series entitled Branden Hall: Interactive Architect and Digital Maker. The series features an in-depth interview that lynda.com co-founder Lynda Weinman conducted with Branden last year, along with a tour of some of Branden’s most interesting work.

So who is Branden Hall, and why did we think it was important to talk with him?

     • Branden has been associated with lynda.com for a long time, having been a featured speaker at many of the early Flash Forward conferences. This photo is from the 2004 conference in San Francisco. Notice the exciting technological advance that Branden was describing: the transition from ActionScript 1 to ActionScript 2!

     • Branden has long been a thought leader in the use of digital technologies, including, and perhaps especially, Flash. Along with some other young developers and designers, he was responsible for exploring what Flash was able to do in its early years, beyond even what Macromedia originally envisioned.

     • Along with Joshua Davis, he was one of the guys who gave IBM’s Watson the animated “face” that “he” uses to celebrate “his” defeat of human Jeopardy! opponents. When Watson’s face moves and changes, it’s because of the team of programmers and designers who made it do that.

     • As the web has evolved, Branden’s work has evolved with it. His Endless Mural project shows how combining the web with new technologies like HTML5 can create crowd-sourced art collections that are available to all.

Over the years, Branden has led the way in showing how technologies like Flash and HTML5 can be used in innovative and exciting ways. In this mini-documentary, Branden gets to tell us a bit about how he comes to his ideas and how they’re realized. I could go on and tell you more, but this video series lets Branden tell you about it himself. We hope you enjoy it.

Interested in more?
• The full Branden Hall: Interactive Architect and Digital Maker segment
• All developer courses on lynda.com

Suggested courses to watch next:
• Flash Professional CS5 Essential Training
• Building Mobile Apps for Multiple Devices with Flash Professional
• HTML5 First Look
• HTML5: Messaging and Communications in Depth
• Big Spaceship, Digital Creative Agency

Tags: Flash, HTML5, Interview

Recently I’ve been asked by some very influential people why lynda.com hasn’t published an HTML5 essential training course yet. Isn’t HTML5 an enormously important topic? Isn’t HTML5 at the core of how the web is being transformed and adapted to the new reality of modern web browsers on desktops, cell phones, and tablets? Isn’t HTML5 changing how rich media (audio and video) is delivered on the Internet? And isn’t HTML5 on its way to replacing web browser plugins such as Flash Player and Silverlight that we’ve depended on for many years? (Whether HTML5 will completely replace the plugins on the web, and how long it will take, is a matter of debate—but that’s for another discussion and another day.)

How could lynda.com have ignored this critical topic? If lynda.com is such a forward-looking educational company, how could we have missed this tectonic shift in the web development landscape??

No worries; we didn’t miss the boat. Simply put, we decided last year that HTML5 was too large a subject to cover in a single course. HTML5 isn’t a single technology; it’s an umbrella term that’s used by the W3C (the Worldwide Web Consortium, a standards-setting body in Switzerland that’s theoretically in charge of how the web works) to describe a set of specifications that let you manage all sorts of things in a web page or application with relatively simple code. (These specifications include both HTML tags and a set of powerful JavaScript APIs.)

We broke down the subject into a series of courses, each taught by an instructor who was able to specialize in one or more aspects of HTML5, and started publishing the courses in mid-2011. We then continued periodically releasing these smaller, focused courses with a new deep dive into some aspect of HTML5 until the last of the 13-course series was released in January 2012, declaring our first pass at coverage of HTML5 to be officially complete. And so, this seems like a good time to review what we’ve created.

If you’re just getting started with HTML5, you might first watch HTML5 First Look taught by lynda.com senior staff author James Williamson. In this course, James offers a birds-eye view of the purpose and usage of HTML5, and includes invaluable references to sites and other resources you can use to keep up with HTML5’s ongoing evolution.

For your first hands-on course, I suggest HTML5: Structure, Syntax and Semantics, also taught by James Williamson. Here, you’ll see how basic HTML code looks, and how to set the stage for all the fun stuff you’ll learn to do later.

From there you can sample a broad array of juicy HTML5 dishes. Each of the remaining courses focuses on a single aspect of HTML5, and you can watch them in any order. To animate your pages, watch HTML5: Graphics and Animation with Canvas taught by Joe Marini. To add drag and drop interactions, look at HTML5: Drag and Drop in Depth taught by Bill Weinman. And for rich media, check out HTML5: Video and Audio in Depth taught by Steve Heffernan.

Want to work with advanced data entry forms (HTML5: Web Forms in Depth) or in-line document editing (HTML5: Document Editing in Depth)? We’ve got that. How about network communications (HTML5: Messaging and Communications in Depth), multi-threading (HTML5: Background Processes with Web Workers), working with the user’s physical location (HTML5: Geolocation in Depth), managing browser history (HTML5: Managing Browser History), or working with local databases (HTML5: Local Storage and Offline Applications in Depth) and text files (HTML5: File API in Depth). Yes, we’ve got all that too.

The 13 courses in this series cover nearly all aspects of the HTML5 specifications. By designing the courses in this modular fashion, we’ve hopefully made it easier for you to find and learn the specific skills you need to satisfy the needs of your web project, your job, or your curiosity. Taken together, they’re the equivalent of a single master-class in HTML5 development—essentially, “HTML5 Essential Training” from lynda.com.

And as we promised when the series was launched, we’re keeping an eye on the evolution of both the HTML5 specs and and how the web browsers implement them. When we see significant changes, we’ll update these courses with the latest information.

So no, we didn’t fall asleep at the switch. HTML5 is a fast-moving set of technologies, and we’ll keep on doing what’s needed to help you incorporate the latest technologies into your web sites and applications.

What HTML5 courses will you add to your lynda.com queue first?

Interested in more?
• All developer courses on lynda.com
• All courses from David Gassner on lynda.com

Suggested courses to watch next:
• HTML5 First Look
• Dreamweaver CS5: Getting Started with HTML5
• iOS 4 Web Applications with HTML5 and CSS3
• HTML5: Local Storage and Offline Applications in Depth
• HTML5: Graphics and Animation with Canvas

Tags: HTML5, James Williamson

In his lynda.com course, Create an Interactive Homepage Marquee with jQuery and Dreamweaver, author Chris Converse shows you how to build a visually rich, interactive marquee in order to aggregate and display content on a website homepage. Here is a preview of Chris’ web project which combines text, images, and animation into a dynamic, compelling feature:

During the video, you’ll note that Chris explores how this final effect might appear on a variety of browsers and emulators. Of course, one of the challenges in web design today is making sure this marquee will appear and perform desirably on the seemingly endless range of mobile or desktop devices upon which it may find itself. Enter the concept of responsive web design, a phrase that’s at the top of the hot buzz-concepts in web design since being coined by Ethan Marcotte last year.

To make sure your designs survive the jungle of possible ecosystems they might have to live in, Chris has designed and developed a template that leverages jQuery’s Ajax feature to load additional interactive data into a template based on the user’s screen size. As Chris explains over on the Adobe Developer Connection:

When the viewport width is wider than 550 pixels, we load the HTML page containing all of the marquee panels, preload the images, then start the interactive marquee. When this design is accessed by a device with a viewport less than 550 pixels wide, we hide the marquee container div, and load an HTML file containing only a single promotion. This technique significantly lessens the load on smaller screens, while still maintaining all of the advantages of CSS3 media queries.

For more on how to create an interactive marquee, log into your lynda.com account and check out Create an Interactive Homepage Marquee with jQuery and Dreamweaver in the Online Training Library^®. Then, to ensure that your marquee displays correctly and responsively on a variety of screen sizes, you can download Chris’ template and get instruction on how to use it for free from his Adobe Developer Connection article.

Interested in more?
• The full Create an Interactive Homepage Marquee with jQuery and Dreamweaver course
• All developer courses on lynda.com
• All web + interactive courses on lynda.com
• All courses from Chris Converse 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

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.

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 Fundamentals
• WordPress 3 Essential Training
• Foundations of Programming: Fundamentals
• Social Media Marketing with Facebook and Twitter

Tags: Breadcrumbs, developer, View Source, WordPress

It scares me to say this, but I’ve just celebrated a big anniversary: I’ve been a software developer for 25 years. My first programming language was something called PAL. It stood for Paradox Application Language, and was a part of Paradox, a popular DOS-based database application that was in many ways the Microsoft Access of its time. Over the ensuing years, I’ve learned and forgotten many languages as I moved into different areas of the software development world. But I found that each language was progressively easier to learn. Once I understood the fundamentals, I was able to apply lessons learned so far to the new challenges facing me.

No one was around in the beginning to tell me that programming was difficult. I had some work I needed to do, and with the help of sample code and tutorials, I figured out how to do it. It was only later that I learned how intimidating programming sounds to some folks. But it doesn’t have to be painful at all, and I believe that by finding and using the right learning resources, and moving forward in small incremental steps, anyone can learn to code.

We’ve been hearing from our members for the last few years that programming has become more important to you, and so in 2011 we responded by publishing a series of courses on some of the world’s most popular programming languages. In this post, I’m going to describe what you need to know to get started as a programmer and how to select a first programming language to learn.

If you’ve never done a lick of programming, you might want to start with lynda.com staff author Simon Allardice’s course Foundations of Programming: Fundamentals. As in many industries, software developers have their own lingo. Words like statement, function, method, and property have very specific meanings, and some of these meanings can differ from one language to the next. Simon explains the language of languages, and compares many of the most popular programming languages with each other. Examples are provided in JavaScript, Java, C#, and many others.

The next step is to choose your first language. Which language you choose will depend largely on what you want to accomplish. You might use one language for building web pages, another for creating applications designed for cell phones and tablets, and so on.

The most popular programming language course in the Online Training Library^® is, unsurprisingly, the most recent edition of our ever-popular JavaScript Essential Training, also authored by Simon Allardice. JavaScript is so popular because it’s the programming language of the modern web. It’s the language that “glues” other web technologies together, such as HTML and CSS. It’s supported in all modern browsers, and is at the core of many popular web frameworks such as jQuery. Looking beyond the browser, JavaScript is also used in many other software development environments, including Titanium, a set of tools for building cross-platform mobile applications, Node.js, a recent entry in the world of server-side web application development, and Unity, a package that enables building games for many platforms.

If you want to build native apps for mobile devices, you might choose Objective-C to build apps for iPhone and iPad. Objective-C Essential Training will help you get started, and then you can move on to our other courses on building apps for the iOS operating system. Java Essential Training with David Gassner (yes, that’s me) teaches the language that’s used to build native apps for Android and BlackBerry devices, and C# Essential Training with Joe Marini will help you get started with building Silverlight and XNA apps for Windows Phone 7. And once you learn either Java or C#, you’ll be able to build not just mobile apps, but also applications for the web (client- and server-side) and much more.

In addition to the courses we added in 2011, the Online Training Library^® offers lessons on other languages that you can use for a variety of tasks. These include tutorials on Perl and Python with Bill Weinman, PHP and Ruby with Kevin Skoglund, and one of my own personal favorites, ColdFusion Markup Language with David Gassner (me again).

So regardless of which language you want to learn, you should be able to find some valuable tools in the Online Training Library^® to help you get started. I really believe that if you have something you want to accomplish that requires a bit of programming, you can learn it. That’s lynda.com’s new motto, and it absolutely applies to the world of software development.

Interested in more?
• All developer courses on lynda.com
• All courses from David Gassner on lynda.com

Suggested courses to watch next:
• Foundations of Programming: Fundamentals
• JavaScript Essential Training (2011)
• Objective-C Essential Training
• C# Essential Training
• Java Essential Training

Tags: learning code, Programming