Image: Instructables, Altoids Advent Calendar/CC.

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.

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

Testing Pages With the BrowserLab Add-On for Firebug

The ability to use BrowserLab in any Flash-enabled browser has always been one of BrowserLab’s benefits, but the only way you could get to a screenshot of anything aside from the initial page as it loaded (like interactive menus/states/content/etc.) was to use Dreamweaver’s BrowserLab integration to send the current state of your page –- with edits and interactive elements -– directly to BrowserLab.

Using the new BrowserLab for Firebug (alongside the magnificent Firebug plug-in itself) within Firefox allows you to send the current state of your local page in Firebug – including design and CSS tweaks you may have made directly in Firebug – right up to BrowserLab and see how that handy hack you just added works across all the browsers.

This new Firefox plug-in will help you be effective with BrowserLab whether you’re in Dreamweaver or Firefox, and make the smooth BrowserLab experience more attainable within any workflow you may have established for yourself.

Once it’s installed, right-click the BrowserLab icon on the lower right corner of your browser, or right-click the page you’re viewing. You can also use the “Tools” menu.

Here’s a video that provides a more in-depth look at the Firebug integration:

“Smart Align” your screenshots

The new Smart Align feature lets you specify an alignment point on one screen shot, and then align all of your other screen shots to that point.

You’ve had the ability to custom-register your screenshots in BrowserLab for a while now. You just drag out from the upper left corner of your rulers in 2-up view and adjust for page-level offsets directly.

The idea was to let you be able to adjust for page-level misalignments and focus on a particular area of your page or application accurately, particularly within Onion-Skin View, where a page-level offset will ruin any changes of a “clean” view of your pages together. But in practice, the workflow was clunky, hard to master and ultimately inefficient. This feature has been redesigned, here’s the new workflow.

Click the Alignment icon. You’ll immediately get a “virtual loupe” you can drag across the current screenshot and find the area you’d like to align everything to. Finding a good, clear area like a corner or recognizable markup element is best -– particularly one you know will be reasonably consistent across browsers.

Then, either choose to align everything to that point, or reset your alignment (i.e. your zero point) to that point. By choosing to align all, you’ll get a quick status window that lets you know the progress (this does take some horsepower), and the accuracy of the matches BrowserLab finds.

And once it’s completed, you should be able to flip into Onion-Skin View and see that particular area of your page perfectly (or very close to perfectly) aligned with the other screenshots. This truly allows you to adjust for global inefficiencies and really use BrowserLab for some minute, fine-grained detail work.

BrowserLab goes local

I’d also like to talk about a feature Adobe launched in May that enhances BrowserLab’s integration with Dreamweaver. When testing content in Dreamweaver’s Live View using BrowserLab’s Local setting, BrowserLab “sees” what Live View sees. This lets you test content that you’re working on privately without publishing it to the internet, such as sites on your local web server. You can also test local content served by intranet web servers and content management systems like WordPress, Drupal or Joomla.

This works by securely pushing content to the BrowserLab service and ultimately delivering that content into the list of available browsers. BrowserLab leaves you in full control of what content is allowed to leave your system via permission settings, which lets you maintain an allow/deny list of URLs.

Also, when content is requested by a page you’re testing, BrowserLab references that list before pushing that content to the BrowserLab servers. If a URL isn’t in the allow/deny list, you’ll be prompted before uploading the content. The allow/deny list works with partial URLs too, meaning that the first portion of a URL must match the entire URL stored in the list.

You can set your file location preference and adjust permission settings in Dreamweaver.

If you’re new to to BrowserLab, try it out for free. As a part of the Adobe CS Live family of online services, you’ll receive 12 months of complimentary access.

This tutorial was authored by Scott Fegette, a technical product manager in Adobe’s Creative Suite Web business. He manages Adobe Dreamweaver and BrowserLab.

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.

Open a new HTML file and type the following:

<html> 
  <head> 
    <title>Basic Mapstraction Map</title> 
    <script 
    src="http://maps.google.com/maps/api/js?sensor=false"   
      type="text/javascript"></script> 
    <script type="text/javascript" src="mxn.js?(googlev3)"></script> 
    <style type="text/css"> 
      div#mymap { 
        width: 400px; 
        height: 350px; 
      } 
    </style> 
    <script type="text/javascript"> 
      function create_map() { 
           var mapstraction = new mxn.Mapstraction('mymap', 'googlev3'); 
        mapstraction.setCenterAndZoom( 
          new mxn.LatLonPoint(37.7740486,-122.4101883), 15); 
      } 
    </script> 
  </head> 
  <body onload="create_map()"> 
    <div id="mymap"></div> 
  </body> 
</html> 

Just like you would for a normal Google Map, we include Google’s JavaScript (line 4).

For this code to work, you also need to download the Mapstraction files. Go to mapstraction.com or the project’s github page, and follow the instructions to save the files in the same directory as your HTML file. Best practices would dictate that you keep JavaScript files in their own directory, separate from your HTML, but I’m simplifying things for this example.

The Mapstraction files you should have, at minimum, are mxn.js, mxn.core.js and googlev3.core.js. You may also have files for other providers, such as yahoo.core.js. The only one we need to reference in our HTML code is mxn.js, which loads the other files that it needs, including those we pass it in the file name. Then, in the create_map function, we let it know which type of map we are creating.

Once you have your Mapstraction map, save your HTML file and load it in a browser. The result should look exactly like this.

This Google map, created via Mapstraction, should be centered on No Starch Press’s neighborhood in San Francisco.

As you can see, the HTML hooks are minimal. Some styling to determine the size of the map and an empty div tag with an id attribute are all that’s required. The JavaScript function create_map() takes over and makes calls to the API. This function can have any name you want.

The minimum amount of information needed within the create_map() function is a map type (googlev3), a center point (using a latitude/longitude pair) and a zoom level (Mapstraction’s tightest zoom level is 16, so I backed off one notch to 15, about six blocks across). Then, we pass those options and reference the div tag’s id to create a map.

Add a marker to your map

To add a simple marker to your map, you just need to use two Mapstraction functions. First, create the marker. Next, add it to the map. The reason for these two distinct steps will become clear in further projects when we start to use advanced options, such as custom marker icons.

Let’s see what creating the marker looks like in code. Start with the basic Mapstraction map you created and add these lines to the create_map() function:

marker = new mxn.Marker(new mxn.LatLonPoint(37.7740486,-122.4101883)); 
// marker options will go here 
mapstraction.addMarker(marker); 

The first line creates a marker object, passing latitude/longitude coordinates for the No Starch Press offices in San Francisco. By drawing attention to the graphical marker, we are essentially marking that spot as important.

The second line is a placeholder for any marker options we want to add later. (Any JavaScript line that begins with two slashes is a comment, and the browser ignores them.) The marker options are where we tell Mapstraction which icon to use or add a message to be displayed when the marker is clicked.

Finally, the third line adds the marker to the map. Once this happens, no additional options can be added. The reason is that the marker object is used only by Mapstraction. Once the marker is added to the map, however, Mapstraction makes the appropriate calls to the mapping provider. Mapstraction plots the marker based on all options set beforehand. In this case, we don’t have options to add, but we’ll add to this map in future projects.

If you’re using Google as your mapping provider, your new map will look like the picture below. The default Google icon sits in the center of the map. Although the marker is clickable, this marker is very simple and nothing actually happens if you click it.

Create a custom icon marker

The quickest way to make a map feel like your own is to change the default icon used for markers. Mapstraction has simple marker options that make the technical process of using custom icons a cinch. The more laborious part may be creating the icon file itself. To avoid this, you can find icons others have made online for free. I list several resources on my website.

Still want to create your own? Read on.

To create your own marker icon, you just need to have a graphics program that can save a transparent .png file. The icon can be whatever size you want, but keeping each dimension between 20 and 50 pixels is probably best. If the icon is too small, clicking it becomes difficult; too big, and the icon obscures the location you’re attempting to call out. If you’re using Google as your mapping provider, you also want to create an image to use as your marker’s shadow. This step isn’t necessary if your marker is a similar shape to the Google default or if you’re using another provider.

Not much of an image magician? Use the free online Shadowmaker service to create a shadow.

Add your icon to the map

Now that you have an icon, the easy part is adding it to the marker options. All it takes is setting a few values to tell Mapstraction where the icon image files resides. Your best bet is to keep custom marker icons in a special directory on your server. If you’re testing locally, you can use local copies, accessed by their location relative to the page containing the map. For simplicity, I have the HTML file and the icon files in the same directory in this example. In reality, you might prefer to be more organized.

I decided to use a teensy No Starch Press logo for my custom icon. It’s 27 pixels wide by 31 pixels high. Like I said, the icon is teensy. Then, I used the Shadowmaker service to create a file that is 43×31 including the marker’s shadow.

Finally, it’s time to code. Add these lines as marker options. These lines are inserted after a marker has been created but before the marker has been added to the map:

marker.setIcon('nostarch-logo.png', [27,31]); 
marker.setShadowIcon('nostarch-shadow.png', [43,31]); 

The only parameter you need to include is the path to the image for both the icon and the shadow. Notice that the dimensions of each graphic get passed as an inline array. This parameter is optional but recommended. If you leave it out, some providers will assume the dimensions of the default marker, which could mean a poorly scaled graphic.

The results of the custom marker code are shown below.

The No Starch Press office is marked by the company’s logo, a little iron icon. Notice the shadow, as well, which makes the graphic pop out from the map.

Omit the shadow icon at your own risk. Some mapping providers will assume the default shadow, which might look silly with your icon. Not every mapping provider uses shadows, but planning for one is good. If you really don’t want a shadow, consider using a completely transparent graphic. I show an example of shadowless icons in the weather map example in chapter 10 of my book.

See also:

• Multi-map with Mapstraction
• Microsoft Adds OpenStreetMap Layer to Bing Maps
• Google Gets a New Geocoder

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:

• Get Started With Python
• Google Gets a New Geocoder
• Get Started With Google Geocoding via HTTP