Skip navigation

Category Archives: code

So I have recently started to design layouts for smart phones, clearly it is a different world from web design. One thing that struck me was the resolution/pixel density seems to vary depending on the handset in question ranging from 150 to 300 ppi. While looking around I could not find any one source of data for a mix of handsets so I thought I would start at list. If I miss any (and I will) than please feel free to add to the comments section

iphone

160 ppi

3.5 inch

480 x 320 pixels

itouch

163 ppi

3.5 inch

480 x 320 pixels

HTC Touch Pro

287ppi

480×640 pixels

Palm Pre

3.1-inch

480×320 resolution,

186 ppi

ipad

9.7 inch,

1024 X 768

(132 ppi)

For furth reading you might like to see this.

You might also like to try this pixel calculator.

If you have details from other phones please add in comments and I will update the post.

So I have just received my new toy. It is a electric monitor buy CurrentCost, I selected this monitor over the others on the market as it out puts an XML data stream. I am hopping to capture this data and publish it to the web.

First impressions of the monitor and the packaging it comes in are very good. It looks like a nice piece of kit. In the box you have the clamp, transmitter, monitor unit and power pack. I also got an extra clamp and a USB data cable.

This video by current cost will give you a better idea of the product (note this is the first generation I have the new cc128):-

So I will be setting up the unit and plugin into my CP with the hope of getting all that lovely data. I will update you to how it goes.

So every time I start a new development I grab the standard templates and resets and get going. Now the other day I was out and about without my flashdrive and so had to hunt around for some templates rather then code up from scratch. In the end it took me 15 minutes to find what I was looking for and so saved me every little time if any.

So I thought for future reference I would add some basic templates to my blog so I can find them easily if I am caught short in the future. Hope you can make some good use of them.

Generic XHTML template

<!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" xml:lang="en" lang="en"> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link rel="stylesheet" href="styles.css" type="text/css" media="screen" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script> <!-- google hosted --> <script type="text/javascript" src="common.js"></script> </head> <body> <div id="container"> <div id="header"> </div> <div id="wrapper"> <div id="main"> </div> </div> <div id="footer"> </div> </div> </body> </html>

CSS template with Eric Meyer’s Reset

/* index -------------------------------------------------------------------------------------- */ /* * Filename: style.css * Description: global CSS (master) * Version: 1.0.0 (YYYY-MM-DD) * Website: website-url * Author: authorname == STRUCTURE ============================================================================ * Page width: 990 px * Number of columns: 1 */ /* colorscheme --------------------------------------------------------------------------------------- */ /* white (bg): #fff grey (intro text): #333 grey (h3 headlines +contact bg) #a3a3a3 black (text): #000 red (link active): #670001 dark red (link hover + visited): #431611 */ /* Browser CSS-Reset --------------------------------------------------------------------------------------- */ /* Eric Meyer's Reset Reloaded */ /* http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/ */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; } /* remember to define focus styles! */ :focus {outline: 0;} body { line-height: 1; color: white; background: black; } ol, ul {list-style: none;} /* tables still need 'cellspacing="0"' in the markup */ table {border-collapse: separate; border-spacing: 0;} caption, th, td {text-align: left; font-weight: normal;} blockquote:before, blockquote:after, q:before, q:after {content: "";} blockquote, q {quotes: "" "";} /* images and linked images without border */ img, a img {border: 0;} /* globals --------------------------------------------------------------------------------------- */ html {background: #fff;} body { background: #fff url(image.jpg) no-repeat left top; color: #000; display: table; font-size: 100%; /* reduces the body text from the 16px default (common to most browsers and OS set-ups) down to the 12px. */ width: 100%; /* This rule is primarily there for Internet Explorer 6 and below on Windows */ } html>body { font-size: 16px; /* sets the text size specifically and is ignored by IE6, but used by Firefox, Safari, IE7, Opera */ } a { border-bottom: 1px solid #670001; padding-bottom: 1px; text-decoration: none; } a:link, a:visited {color: #670001;} a:hover { background: #431611; border-bottom: 0; color: #fff; } /* Typography --------------------------------------------------------------------------------------- */ p { font: 1em/1.75em Georgia, "Times New Roman", Times, serif; margin: 0; text-indent:0; } p+p {text-indent:2em;} .first {text-indent: 0;} h1 { border-bottom: 1px dotted #a3a3a3; font: 3em/1em "Baskerville", "Linotype Palatino", Times, Georgia, "Times New Roman", serif; font-style: italic; font-weight: bold; margin-top: 80px; margin-left: 310px; margin-bottom: 1em; padding:0 30px 30px 20px; } h2 { font: 2.5em/1.75em Georgia, "Times New Roman", Times, serif; margin-top: 1em; margin-bottom: 0em; } h3 { color: #a3a3a3; font: 1.88em/0.934em Georgia, "Times New Roman", Times, serif; margin-top: 1.068em; margin-bottom: 0em; } h4 { color: #fff; font: 2em/1.5em "Baskerville", "Linotype Palatino", Times, Georgia, "Times New Roman", serif; font-style: italic; } h5 {color: #ccc; font: 1.25em/1.75em Georgia, "Times New Roman", Times, serif;} .amp { font: 1em/1em "Baskerville", "Linotype Palatino", Times, Georgia, "Times New Roman", serif; font-style: italic; } /* use the best Ampersand */ /* layout elements --------------------------------------------------------------------------------------- */ /* wrapper */ /* nav */ /* content */ /* footer */ /* end of this stylesheet -------------------------------------------------------------------------------------- */