All posts tagged ‘Tutorials’

File Under: Software, Web Services
Oct
11
2010

Using the New Features in Adobe BrowserLab

By

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” »

Tags: , ,
File Under: Location, Web Services
Oct
7
2010

Personalize Your Map With a Custom Map Marker

By

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” »

Tags: , , , ,
File Under: Browsers, CSS, Mobile
Sep
28
2010

Make a Big Splash on Tiny Screens With Media Queries

By

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” »

Tags: , , ,
File Under: Programming, Web Basics
Mar
22
2010

Google Raises Your Coding Skills to a Higher Degree

By

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:

Tags: , ,
File Under: Programming, Web Basics
Mar
27
2007

How To Make Your Own Domain An OpenID

By

I recently decided it was time to explore OpenID. For those that aren’t familiar with OpenID, the sound-bite version boils down to this: OpenID is a way to identify yourself to others using a URL rather than username and password.

Openid
With more and more big names, Microsoft and AOL come to mind, supporting OpenID, I figured it was about time to dive in and set up my own account.

If you happen to be a LiveJournal or Vox user you already have an OpenID account. For the rest of us there’s a variety of options MyOpenID, Verisign and ClaimID to name a few. I went with MyOpenID because it was the first one I stumbled across. The signup process was fast, free and easy.

Continue Reading “How To Make Your Own Domain An OpenID” »

Tags:
File Under: operating systems, Programming, Software & Tools
Feb
7
2007

Vista Month: Windows Vista For Beginners

By

VistabeginnersContinuing with our Vista Month theme, we recently came across the excellent Vista for Beginners website, which is chock full of advice, tutorials, tips and tricks for those migrating to Windows Vista.

Much of the content on Vista for Beginners is aimed at XP users feel more comfortable in the new OS, but even those migrating from older systems, as well as those brand new to the world of Windows, will find some time and frustration saving gems in here.

Continue Reading “Vista Month: Windows Vista For Beginners” »

Tags:
File Under: Programming
Feb
6
2007

Tutorial ‘O The Day: Be A Better Blogger

By

FullspeedStructure matters. If you want your blog to be more discoverable to those searching Google, you need to tell Google what your site is about. Once upon a time there was an HTML meta tag that could do that for you, but then spammers abused the heck out of those so Google and the rest largely ignore them now. So how can you tell Google what your site is about?

In the process of digging through Google’s revamped Webmaster Tools earlier today I learned about some more things I’ve done on my personal blog that were not a good idea. So, armed with my own stupidity as an example, here’s a case study of what not to do (you could also view source on this page for a good example of bad structural decisions — sigh).

Continue Reading “Tutorial ‘O The Day: Be A Better Blogger” »

Tags:
File Under: Programming
Feb
2
2007

Tutorial O’ The Day: Ajax

By

AjaxFor our last Ajax tutorial I thought I’d list some of the more popular Ajax frameworks on the market.

  • Dojo: Dojo is an Open Source DHTML toolkit written in JavaScript.

  • Prototype is a JavaScript Framework that aims to ease development of dynamic web applications.

  • Script.aculo.us: Provides you with easy-to-use, compatible and, ultimately, totally cool JavaScript libraries to make your web sites and web applications fly, Web 2.0 style.

  • Mochikit: MochiKit is a free lightweight JavaScript library.

  • Yahoo User Interface Library: The Yahoo! User Interface (YUI) Library is a set of utilities and controls, written in JavaScript.

I should point out that Script.aculo.us is not a framework exactly, rather it includes Prototype and adds some additional hooks on top of it.

If you’re looking for frameworks for specific languages, ajaxpatterns.org maintains a nice list.

Tags: