All posts tagged ‘Tutorials’

File Under: APIs, CSS, HTML, JavaScript

‘Tis the Season … To Write Better Code

The holidays are here and for web nerds that means only one thing — another wave of advent tutorials is hitting the web.

It doesn’t feel much like winter right now at the Webmonkey lair, but that’s okay because we mark the start of the holiday season by the launch of 24Ways, the grand poobah of advent calendars for web nerds. 24Ways has been an annual tradition since 2005, offering 24 articles packed with new tips and tricks showcasing some of the year’s best new ideas in web development.

This year’s 24Ways kicked off with a tutorial on HTML5 Video “Bumpers” by 24Ways founder Drew McLellan. Other articles thus far include how to start a project on the right foot, how to contribute code to the community and Geri Coady’s excellent article on Color Accessibility.

While 24Ways may be the biggest name in advent tutorials, it’s not lacking for competition these days. We also recommend the Performance Calendar, which tackles the often confusing world of website optimization. There’s also Digitpaint’s advent calendar which we enjoyed last year and has already published some nice articles this year, including this look at CSS filters.

If you’re missing another favorite, the PHP Advent Calendar, fear not, it has returned, but with a new name and domain: PHP Advent is now Web Advent. The name may have changed, but Web Advent offers similarly great content, like this article on Sharing What You Know by Heather Payne, the founder of Ladies Learning Code.

File Under: Software, Web Services

Using the New Features in Adobe BrowserLab

BrowserLabThe following tutorial comes to us courtesy of Adobe. The company introduced some new enhancements to its BrowserLab service last week to improve its cross-browser testing abilities, and this is an overview of how to use some of these enhancements.

We told you about BrowserLab here on Webmonkey when it first showed up as part of Dreamweaver CS5 in April. It’s a hosted service that lets web developers preview their work across multiple browsers and operating systems in a single environment. Since it’s a hosted service, Adobe can update the backend with the latest code from all the popular browser engines as they’re updated in the real world.

It integrates fully with Creative Suite 5, so if you’re using Dreamweaver, you can launch BrowserLab previews at any point in your workflow and test your live code against all the major browsers.

Adobe may eventually turn BrowserLab into a paid service (the cost will likely be between $200-300 per year), but if you sign up for access before April 30, 2011, you can secure an account for a full year at no charge. All you need is an Adobe ID login, which is free.

The new features of the include a BrowserLab add-on for Firebug and the ability to smart-align screenshots. There are also some further integrations with Creative Suite 5. To walk us through using these new features, Webmonkey has collaborated with Scott Fegette, a technical product manager for Dreamweaver and BrowserLab.

So, take it away, Scott.
Continue Reading “Using the New Features in Adobe BrowserLab” »

File Under: Location, Web Services

Personalize Your Map With a Custom Map Marker

If you’re adding a map to your website, why settle for the vanilla design when you can customize it and leave your own personal mark?

This tutorial will show you how to create a custom map from scratch, then add a little unique flavor to it by replacing the standard “map pin” icon with a custom icon of your own design.

To do this, we’ll be using Mapstraction, a library that creates map code that can be reused across all the big mapping providers (Yahoo, Google, et al). Mapstraction also allows for multiple types of customization such as custom info bubbles and graphics like the one we’ll be dropping onto the map.

Note: This tutorial is adapted from the book Map Scripting 101 by Adam DuVander. Adam is a former Webmonkey contributor and executive editor of Programmable Web. In his book, he shows how to use all of the features of the most popular mapping APIs, and how to mash them up with data from other sources like events calendars, weather services and restaurant review sites to make a variety of custom maps.

This exercise comes from chapters 1 and 2 of Adam’s book, and it is reprinted here with his permission and that of the book’s publisher, No Starch Press. It isn’t a word-for-word excerpt. It has been slightly adapted to work as a web tutorial. You’ll find dozens of in-depth exercises — including the full version of this one — in the book itself.

Create a Mapstraction map

Mapstraction is a little different from Google Maps and Yahoo Maps. Mapstraction is an open source JavaScript library that ties into other mapping APIs. If you use Mapstraction, you can switch from one type of map to another with very little work, as opposed to rewriting your code completely.

Using Mapstraction limits your risk to changes being made to an API. For example, if your site’s traffic takes you beyond the limit for your chosen provider, or the provider begins placing ads on the map, Mapstraction lets you switch providers quickly and inexpensively.

To use Mapstraction, you must first choose a provider. In this example, I’m using Mapstraction to create a Google Map.
Continue Reading “Personalize Your Map With a Custom Map Marker” »

File Under: Browsers, CSS, Mobile

Make a Big Splash on Tiny Screens With Media Queries

MorotolaDroid2

Go out for a chai latte with your local technology soothsayer (or just study your Google Analytics reports) and it’s pretty clear that the mobile web is the future.

But let’s not call it the mobile web, let’s call it the smaller web. And by smaller, I mean a web with less available screen real estate than the desktop.

While the iPhone may have a fully-capable web browser, it still has a relatively small screen. Serving the desktop version of the your website is hardly the best way to deliver your content to iPhone owners.

And don’t forget that the iPhone people are the lucky ones. The latest devices — iPhones, iPads, Android phones — have relatively large screens by mobile standards, but these devices are in the hands of a very slim percentage of worldwide mobile users. There are some 3 billion users out there with older phones, or devices with crappy browsers and very small screens.

The point here is that you need something far better than the desktop-optimized version of your website to offer to mobile visitors.

Mobile Solutions

There are three popular ways to approach mobile sites:

  • Write good code, but do nothing special for mobile. This works fine if your audience is made up of iPhone, iPad and Android users with nice, high-speed 3G connections. That’s about 1 percent of the mobile market, but some sites with an abnormally large number of iPhone users (like an iPhone news site) can get away with it.
  • Detect the device in use and serve a separate mobile site. Something like m.flickr.com. While this approach works, it means maintaining a second website, plus constantly updating your device detection scripts as new gadgets come on the scene.
  • Build an adaptive site using CSS 3 media queries. Thanks to CSS 3 and the new media query syntax, you can build a site that automatically adapts its layout to fit the screen size of your visitors.

The later approach has received the most attention lately, with many designers moving to fluid grids that reflow content, resize images and nicely smoosh themselves down to fit any screen. Check out Simon Collison’s personal site, or designer Jon Hick’s website for examples of media queries in action.

Be sure to resize your browser window so you can see the content reflow as the browser width shrinks. That’s the gift of media queries — by precisely labeling your CSS, the presentation can be altered dynamically depending on the device’s screen width and height. Your content never changes, and neither does your CSS. The page simply adapts.

However, as nice as media queries are, before we dive into the syntax and how it can help, it’s important to realize that this approach is not going to magically solve all your mobile design problems.

Continue Reading “Make a Big Splash on Tiny Screens With Media Queries” »

File Under: Programming, Web Basics

Google Raises Your Coding Skills to a Higher Degree

Google Code logo

There are several places on the web you can turn if you want to learn how to program.

Of course, this very site is the best place to start. Webmonkey has a massive library spanning over 13 years of web tutorials. There’s also Sitepoint and Smashing Magazine and O’Reilly Answers.

Today, we’d like to give some massive props to Google Code University, a site with a small (but growing) library of tutorials, slide shows, presentations and lectures about coding for the web. There’s also lots of just plain good advice for making everything from simple sites to full-blown apps. The site is heavy on video — most of the videos are lectures taken from Google’s internal tech talks — and on slide presentations. Everything is licensed under the Creative Commons, so you can use the code examples in your own projects providing you include attribution.

The Ajax and Python courses are pretty strong. The Geo APIs courses are valuable resources for anyone working with geodata. For more advanced topics, check out the Distributed Systems and Web Security tutorials.

See also: