Useful links: Relationships, Human Users, Attachments

Anna Debenham has a very concise and clear post about using “rel” to establish relationships between people on her blog. It was a Valentine’s Day post, but the infomation is good any time of the year.

This fantastic post by Pamela Wilson on Copyblogger should be reproduced and used in every beginning web design class. It’s called The Essentials of Human Web Design.

NIcholas Zakas looks at the HTML5 and JavaScript that goes into Gmail’s attachment feature in Dissecting Gmail’s Email Attachments.

How To Have A Video Background For Your Website

Do you want to put a video background on your website to achieve the same impressive design results showcased by sites such as Razorfish and Random Dance? It’s really not difficult to do, so long as you have a cursory knowledge of how to edit HTML files and upload Javascript files.

Razorfish

One way to add a video background to your website is to use the video embed HTML5 feature along with a bit of CSS3 to help your video maintain its position. Though this is an option, it’s not an ideal solution because it doesn’t allow you the control you need to make your videos interactive (if desired) or to determine what device your website is being loaded on. The latter is critical, because many devices won’t run background videos.

The best method is to employ Javascript to load your background video. Javascript can determine what device is being used, and then load an image when background videos cannot be played.

There are many different scripts out there for loading videos, and each can be customized to serve your own purposes. However, there are two scripts I recommend, depending on your video source.

Big Video

Developed by John Polacek at Draftfcb Chicago, this script makes it simple for you to add a background video to your website. You’ll need the jQuery, jQuery UI, and jQuery imagesloaded libraries and plugin to use the script. With this script, you can load videos from any source (though the author recommends Vimeo), and you can even add an interactive playlist.

Big Video

YouTube Video Background

This is a simple script that’s likewise easy to use; it will call YouTube videos to be loaded as your web page background.

YouTube Video Background

As with any web implementation, test your new video background to make sure it plays on all major browsers and responds as it should (such as with image replacement) on different devices and operating systems. Don’t be afraid to play with the code to add features you want to use, and make it your own! And, if you’re more a designer by heart, you can always hire a freelancer to install these scripts for you.

They’re relatively simple, so an experienced coder should be able to implement them rather quickly and with minimal charge.

Do you have a preferred method of loading videos as web page backgrounds? Have I missed anything that should be included? Let me know in the comments!

Guest Author Brian Morris writes for the PsPrint Design & Printing Blog. PsPrint is an online commercial printing company. Follow PsPrint on Twitter @PsPrint and Facebook.

Announcing Web Platform Docs

A great new resource for learning web design was announced at webplatform.org. It’s a wiki and participation by knowledgeable web designers and developers is needed. That said, it’s already a huge resource of the best information available.

Congratulations to everyone involved in this effort. The group calls itself the Web Platform Stewards, and includes

  • Adobe
  • Apple
  • Facebook
  • Google
  • HP
  • Microsoft
  • Mozilla
  • Nokia
  • Opera
  • W3C

Paul Irish has a lot of good ideas about how you can contribute to the site in Why I’m So Excited about Web Platform Docs.

Useful Links: Online Education, HTML5 forms, hidden menus

Here’s an opposing viewpoint to the one expressed by Daphne Koller here. The opposing view is Online Education: Is it All It’s Cracked Up to Be? 

30 HTML5 and CSS form exercises has some good tutorials listed.

Very nice fold-in hidden menu for mobile devices and available for download onGithub.

A Closer Look at Codecademy

Online programming tutorials like Lifehacker’s tutorial on coding are great places to start if you want to learn the basics of coding for free. The only problem with tutorials is that they often don’t give you much of a chance to learn by doing, and any programmer will tell you that a programming language is best learned through experience.

Up until recently, you could find a few, free interactive education courses to help you learn how to code, but many of these courses weren’t designed with pedagogical best practices in mind. Many of the available open source courses were designed by programmers, for programmers who want to brush up on some of the finer points of coding. Fortunately for those with limited background knowledge of computer science, there’s a relatively new and highly accessible online education program called Codecademy. Codecademy is an interactive series of web-based courses on coding.

Web Teacher has already devoted some attention to Codecademy in a previous post. If you’re interested in learning more about this coding education program before you sign up, here’s the scoop on the JavaScript track.

code academy tracks

Codecademy begins with the very basics of coding in JavaScript, and it uses scaffolding techniques to ease learners into some of the most complex coding tasks. The education program’s user interface is simple and well-designed. There are instructions on the left side of the screen, and there’s a terminal in the middle of the screen where you practice coding according to lesson instructions. At the end of each lesson, you’re given a “test” that requires you to complete coding tasks based on what you’ve learned. As the lessons progress in terms of difficulty, it’s best to take notes. Some users have mentioned that the courses go by a little quickly. So, make sure you give yourself some processing time between lessons and refer back to your notes when you’re tested on difficult concepts.

Staying motivated while taking any sort of online course can be a challenge for many learners. Luckily, Codecademy does provide some incentive for users to stick with its education program. Users of the program are given trophies and points as they complete lessons, and these trophies and points are prominently displayed on their profiles. If a few of your friends are also learning how to code, it can be fun to compare how many trophies and points you each have and try to compete to finish lessons first.

Codecademy undeniably makes learning how to code in JavaScript easier. However, it should be noted that learning to code is intrinsically difficult for many beginning programmers. If you’re self-motivated and dedicated to completing all of Codecademy’s lessons, however, you’ll be a JavaScript guru in no time.

About the guest author: A freelance writer and blogger hailing from the great state of Texas, Melissa Miller specializes in writing about the education field. If you’re considering pursuing an associate degree online, Melissa’s many posts on the subject can help light the way. Email her at melissamiller831@gmail.com with any feedback.