iPhone Development

The iPhone Dev Camp started on Saturday by a nice presentation by Chritopher Allen, a MacHack veteran, regarding what is known about the iPhone from a web developer’s perspective. What is known is that the iPhone uses web standards (HTML, XHTML, CSS, JavaScript, PDF and Quicktime). Web 2.0 best practices apply for the iPhone, such as the proper use and sepration of HTML, CSS, and JavaScript. Christopher recommends avoiding the use of Flash, SVG, Java applets, embedded video, custom x.509 certificates, and framesets. Christopher also states the the finger is not a mouse and you need to design accordingly with large enough buttons and links with plenty of space between each other.
Fingers can do more than the traditional point and drag cursor such as double tap, touch and hold, one or two finger drag, flick, and pinch.

It might come as a surprise but many of JavaScript events don’t work, such as onscroll, onkeydown, onkeypress, onmousemove, etc. Some web development recommendations for the iPhone are to use columns and small blocks in the layout, such as floating divs. You should also use the tel: and mailto: protocols in links. You can also integrate with Google Maps simply by adding your location search to maps.google.com/maps? URL.

The current activity on the the iPhoneWebDev Google Groups seems to be focused around iPhone specific development libraries, implementing the infamous back button, debugging JS, optimizing application for low bandwidth, and hacking the viewport. There is also a series of open questions such as, what level of support is there for the canvas tag? What level of persistent storage is available, cookies? The right questions will lead to the right answers. I have also published a great list of available iPhone development resources.

Most of time at the iPhone Dev Camp was spent developing a collaborating for the hack-a-thon. This was a working camp focused on developing some really cool applications on the iPhone.
Read more »

When playing with custom web designs, or off the shelf templates, the most common CSS work involves changing the margin, padding, color and background of HTML elements. I usually also usually align elements either to the left, right, or center using CSS.

To get started with code samples, to center a div in the middle of a container div you can use the following CSS:

.center {
  margin-left: auto;
  margin-right: auto;
}

If you want to align a div to the right and another div opposite to the first on the left you can use the following CSS classes.

.right {
  float: right;
}
.left {
   float: left;
}

I have found that when I used both div that float both to the right and left that you have to follow that with an empty div that clears, or resets, the float CSS property. If I don’t clear the float property other elements such as a menu that is aligned to the right might not render correctly. Here is the CSS class to clear the float property, use it in a div the divs that have been aligned to the right, left, or both right and left.

.clear {
  clear: both;
}

Technorati Tags: css, html, webdesign, clear, float, div, cs class

I’ve seen and tried a ton of HTML/CSS/JavaScript tricks and hacks to get rounded corners on DIV elements. So far I have found that the easist way to get rounded corners on divs is by using the Rico JavaScript framework. To demonstrate this in code let me define a snippet of HTML:

To make the DIV element have rounded corners just execute the following bit of JavaScript, perhaps in the document.onload event method:

You can also pass in some additional options to Rico’s round function which indicates which corner(s) to round. Here is another example which rounds only the top-right and bottom-left corners:

And of course, br and tl also work.

As a convinience, you can round the corners of multiple elements at once. To round all DIV elements that use a given class use the following JavaScript:

With the above JavaScript, only those DIV element that use the CSS class roundCssClass will be rounded off.

Technorati Tags: rico, javascript, html, framework, web2.0

A friend of mine recently asked me what was my most used CSS hack. The first thing I said was that I am not a web designer, I just play one on TV. I have found that everybody knows or can easily look up how to apply a border, text alignment, background image, etc to an HTML element using CSS. What I have discovered through experimentation is that browsers allow you to define more than one CSS class per element. I have recently been using the Yahoo UI Library and their yui-u CSS class that defines a layout block. But for that block I wanted to apply some additional style attributes. I was able to combine the yui-u layout and my style CSS class by doing the following:

<DIV class="yui-u content">CONTENT HERE</DIV>

Technorati Tags: yui, yahoo ui, yahoo ui library, css

If you are using the Ruby on Rails acts_as_taggable plugin you may want to display the top tags in a tag cloud. To generate a tag cloud you will to write some code beyond just writing the controller action. You will need to augment the taggable plugin itself and create a function in the application helper. Lets start by adding a new method in the Tag model provided by the acts_as_taggable plugin. Open the vendor/plugins/acts_as_taggable/lib/tag.rb file and add this method:

def self.tags(options = {})
  query = "select tags.id, name, count(*) as count"
  query << " from taggings, tags"
  query << " where tags.id = tag_id"
  query << " group by tag_id"
  query << " order by #{options[:order]}" if options[:order] != nil
  query << " limit #{options[:limit]}" if options[:limit] != nil
  tags = Tag.find_by_sql(query)
end

This method will return the id, name, and usage count for each tag. This method also provides a way to limit and order the tags. Once we have added the new method in the Tag model we will need to add a method to the application helper which will help in selecting the right style class for each tag. Add the following function to app/helpers/application_helper.rb:

def tag_cloud(tags, classes)
  max, min = 0, 0
  tags.each { |t|
    max = t.count.to_i if t.count.to_i > max
    min = t.count.to_i if t.count.to_i < min
  }

  divisor = ((max - min) / classes.size) + 1

  tags.each { |t|
    yield t.name, classes[(t.count.to_i - min) / divisor]
  }
end

The implementation for the tag_cloud method is based on the work done by Tom Fakes. With the tags method in the Tag model and the tag_cloud method in the application helper we can now focus on the controller and view. In the controller you can use the following bit of code to get the the first one hundred tags order by name:

@tags = Tag.tags(:limit => 100, :order => "name desc")

In the view we will use the tag_cloud method so that it will select the right css class based on the tag usage count. Here is the view code:

<% tag_cloud @tags, %w(nube1 nube2 nube3 nube4 nube5) do |name, css_class| %>
  <%= link_to name, {:action => :tag, :id => name},
    :class => css_class %>
<% end %>

Please note that nube1 through nube5 are css class names which will need to be defined in your stylesheet to generate the cloud effect. Just completeness sake here are my css classes:

.nube1 {font-size: 1.0em;}
.nube2 {font-size: 1.2em;}
.nube3 {font-size: 1.4em;}
.nube4 {font-size: 1.6em;}
.nube5 {font-size: 1.8em;}
.nube6 {font-size: 2.0em;}

Technorati Tags: ruby on rails, rails, rails plugins, acts_as_taggable, tag cloud

With JavaScript you can access and update an element’s style and even its class. Say that you have two CSS classes:

.warning {color: yellow;}
.error {color: green;}

You can update or switch an element’s CSS class with the following JavaScript code:

var element = document.getElementById('element');
element.className = 'warning';

But you can access individual CSS attributes via an element’s style object, such as

var element = document.getElementById('element');
element.style.color  = 'green';

Of course, you might update an element’s style based on some event or in conjunction of an Ajax call.