Jan 21

Everyone knows you can check traffic off of Google Maps built into your iPhone, but what if you don’t have 2 fingers available to pinch-out and see all the traffic conditions? My answer is the simple Traffic Checker (alpha) http://ragingminds.com/iphone/traffic which simply lists out traffic conditions within an area.

Just something I whipped up real quick for fun, I need to add some error handling and the ability to search by “city” and/or “state”. It’s using Yahoo Traffic Webservice and the ASP.NET 2.0 XmlDataSource. Please feel free to use it and provide some helpful feedback for the next version!

Feb 12
Simple centered CSS layout
icon1 Steve | icon2 CSS | icon4 02 12th, 2007| icon3No Comments »

When developing a web app or site, I usually start off with an XHTML file (template.html) and a CSS file (base.css). This example is a common layout for most websites and web apps, which is a centered, two-column layout and from there you can tweak it however you want. The naming convention I use for XHTML, CSS and JavaScript is all-lowercase with dashes seperating words. The reason I use this method is because in my ASP.NET controls, I use camel case and sometimes there could be similar name conflicts.

Stubbing out the XHTML file

First we’ll start with the XHTML file. Below is the list of <div> element IDs to stub out:

  1. wrapper: This is the overall container that wraps all the DIVs, it also allows us to center the main area of our site.
  2. header: Here we usually place a logo, slogan and/or header navigation.
  3. nav: Holds the main navigation for the site. I’ve seen developers use this nav ID in ULs and DIVs, so the choice is up to you.
  4. main-content: This is the middle part between the header and footer. It will also hold sub-DIVs depending on how you want to section out your site.
  5. footer: Finally you can place copyright, support email, or a footer nav in this area.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Simple CSS layout</title>
    <link rel="stylesheet" href="css/base.css" type="text/css" />
</head>
<body>
    <div id="wrapper">
        <div id="header"></div>
        <div id="nav">
            <ul>
                <li><a href="#">home</a></li>
                <li><a href="#">about</a></li>
                <li><a href="#">contact</a></li>
            </ul>
        </div>
        <div id="main-content">
            <div id="side-bar"></div>
            <div id="content"></div>
        </div>
        <div id="footer"></div>
    </div><!-- end: wrapper -->
</body>
</html>


To be continued…