Arno's Blog

Quadrichrome: a New Blog Layout

Sunday, June 29, 2008

I've created a new blog template for my other blog. I'm calling it quadrichrome as it's based on four primary colors. It's a very pared down design, but hopefully easy to navigate and pleasant to look at.

I'm using the colors as a subtle color coding of sort:
  •  red is for primary content. Since red is such a loud color, I use it for the most important thing on the page
  •  blue is for navigation links, the default color for links since the very first web browser
  •  green is for administration and navigation
  •  yellow is for secondary and quoted content.


I'm thinking of using it on this blog as well. Thoughts?

0 comments links to this post

How to optimize a web page for the iPhone

Wednesday, June 25, 2008

There are a few simple changes you can make to a web page to get it to display better on an iPhone (or iPod Touch). I've talked about this elsewhere but I've applied it to the layout of this blog as well. Try it out (or look at the screenshots below)!


What are those changes, you ask?

First, in the <head> section, add:


<meta name="viewport" content="width = device-width" />


The viewport tag will ensure that the page is taking the full width of the iPhone, without any horizontal scrolling.


Next, add this to the <body> tag:


<body onload="setTimeout(function() { window.scrollTo(0, 1); }, 100);">


This will make sure that once the page is loaded the Safari toolbar at the top will get scrolled out of view so that as much as your web page as possible is displayed on the screen.


Finally, you'll want a custom stylesheet for the iPhone. My stylesheet is built-in into my blogging template (i.e. not an external file), so I added another <style> tag that overrides and modify the style defined in my "default" stylesheet:


<style media="only screen and (max-device-width: 480px)" type="text/css">


/* Override style definitions as appropriate */
body {
  width:480px;
  background:#f00
  margin:0;
  padding:0;
  font: large "Trebuchet MS",Trebuchet,Arial,Verdana,sans-serif;;
  color:#333;
 }

/* etc... */

.not-iPhone {display:none;}

</style>


There are other ways to accomplish the same thing that are described in Apple's documentation


Note that I define a #not-iPhone class so that I can hide any content that I don't want to display on the iPhone, such as large images or content type not supported on the iPhone.


In the iPhone stylesheet, I've changed the layout so that it fits the smaller screen of the iPhone (480 px). For example, I moved the sidebar at the bottom of the page, instead of on the right. To take advantage of the limited real estate, I've removed some margins. I have also simplified the layout and removed some of the background textures I used on when not on the iPhone. Finally, I used a resized version of the header image (resized to 480 px wide), so that it loads a bit faster.




2 comments links to this post

Declarative programming in Flex

Friday, June 20, 2008

When building applications using Flex (for AIR or Flash Player), you can use declarative programming to specify part of your user interface. The declarative language of Flex is XML-based and called MXML.

Here's a simple app in Flex/MXML:
<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" 
  layout="absolute" 
  title="Hello Rich Internet Application"
  backgroundColor="#FFFFFF"
  >
 <mx:VBox horizontalAlign="center" horizontalCenter="0" verticalCenter="0">
  <mx:Button 
   label="Click Me" 
   click="mx.controls.Alert.show(
    'ActionScript and Flex are a match made in heaven!', 
    'Flex Rocks!');"/>
  <mx:Label 
   fontSize="24" 
   fontWeight="bold"
   color="#1A49DF" 
   text="Flex Makes RIA Development Easy" 
   />
 </mx:VBox>
 
</mx:WindowedApplication>


Here's the equivalent app in JavaFX:


/*
 *  HelloCompiledJavaFX.fx - A "Hello World" style, but slightly more 
 *                           sophisticated, compiled JavaFX Script example
 *
 *  Developed 2008 by James L. Weaver (jim.weaver at lat-inc.com)
 *  to serve as a compiled JavaFX Script example.
 */
package mypackage;

import javafx.ui.*;
import javafx.ui.canvas.*;

Frame {
  title: "Hello Rich Internet Applications!"
  width: 550
  height: 200
  background: Color.WHITE
  visible: true
  content:
    BorderPanel {
      top:
        FlowPanel {
          content:
            Button {
              text: "Click Me"
              action:
                function():Void {
                  MessageDialog {
                    title: "JavaFX Script Rocks!"
                    // This string has a newline in the source code
                    message: "JavaFX Script is Simple, Elegant, 
and Leverages the Power of Java" 
                    visible: true
                  }
                }
            }
        }
      center:
        Canvas {
          content:
            Text {
              font: 
                Font {
                  faceName: "Sans Serif"
                  style: FontStyle.BOLD
                  size: 24
                }
              x: 20
              y: 40
              stroke: Color.BLUE
              fill: Color.BLUE
              content: "JavaFX Script Makes RIA Development Easy"
            }
        }
    }
}



(from http://java.sun.com/developer/technicalArticles/scripting/javafx/ria_1/)

0 comments links to this post