Arno's Blog

Quadrichrome: a New Blog Layout

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?

How to optimize a web page for the iPhone

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.




Declarative programming in Flex

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/)