Following on from  my introduction to using the awesome sourcerepo source control repository it is now time to get Git installed on your Windows XP box

Firstly you have to download it from here

Download git for windows
You NEED the msysGit option
just select the link next to msysGit and you will see a new page with different versions avasilable.
The dates are confusing so ignore them. If you look closely enough you will see that some incluse the year and others just the day and the month making it look like the latest version is not very new when it is.

You want the latest version number, the one right at the top of the list

All you need to do is click the link next to the version you want and your download will proceed in the normal way.

Once downloaded you just need to run the file to install it to wherever you want. The normal program files folder is OK.
During the installation you will be asked about converting cr/lf characters.
At this point you might be somewhat confused.
You are running a windows Operating System right?
You are deploying to a Linux/Unix Operating System.
Windows files don’t play nice on a Linux/Unix OS.
All you need to understand is that you need to convert CR/LF’s to LF’s only.
It’s a simple option so long as you know what to choose.

That’s it!
You have Git installed

You can visit the site on your own mobile and tell me how it looks.  The URL is:

http://translations.omarissister.com/mobileHome.html

This is just and example to prove a concept, so there’s not much to navigate.  Adobe has this neat little program called “Device Central” that can run your webpage through various mobile device emulators.  I ran it through a Nokia phone with full browser small screen rendering.   Here’s a screenshot of my mobile webpage from the emulator:

Mobile Browser Emulation Through Adobe's "Device Central" Program

You can also play with the website on you PC browser to experience the fun and joy of a liquid layout.

For a comparison, here is the PC website which was done with a hybrid layout.  Haha!

Hybrid Layout on a Mobile Device

This is so cool!

Interestingly, when I looked at this these pages on my iPhone, they were rendered as if on a PC, meaning the full page width was displayed.  For the hybrid layout this was great, but at the same time, the advantages of the liquid layout were not manifested — the main advantage being legibility because the text is rendered full size and wrapped within the given screen size.  Unfortunately, there is no iPhone emulator so I can’t show a screen shot.  But those of you with iPhones can check it out.

Hopefully, by now you should have had a good look at Matthew James Taylors’ totally awesome CSS layouts and chosen which layout you want to use.

Now all you have to do is grab the css from whicheve layout you have chosen.
Matthew has created different types of sizing for each of hos layout so before you pick the final css you will need to choose which sizing you want to use. The choices are pixel widths, em widths or percentage widths.

This is an easy choice to make. Percentage widths win hands down.
We want to be accessible right?
Percentage widths will allow font sizes to be changed by users in their browser settings without those horrible scroll bars appearing if the text gets too large for the column it is being displayed in.

A very good discussion on these choices can be found here

Having decided that you can choose the layout you want and all you have to do is pick the percentage widths link on the layout.

Once you have the correct page showing for the layout you have chosen you can simply use the “view source” option in your browser’s “view” option.

you will see a load of source code.

Find the line that sais
/* General styles */
now highlight everything from that point right on down to, and including, the line that sais

</style>
and choose the copy option.

Now create a new text file in notepad or whtever and paste the results and save the file somewhere safe. We will be coming back to it later.

Since I started writing this guide Matthew has updated his styles somewhat and the css I’ll be using will  be slightly different. I have talked to him about updating these pages and he has indicated that he will be doing so at some point.

The css layout I will be using is the three column layout. Please feel free to copy this css.

body {
background:#FFFFFF none repeat scroll 0 0;
font-size:90%;
margin:0;
min-width:600px;
padding:0;
width:100%;
}

a {
color:#336699;
}

a:hover {
background:#336699 none repeat scroll 0 0;
color:#FFFFFF;
text-decoration:none;
}

h1, h2, h3 {
margin:0.8em 0 0.2em;
padding:0;
}

p {
margin:0.4em 0 0.8em;
padding:0;
}

img {
margin:10px 0 5px;
}

#header {
border-bottom:1px solid #000000;
float:left;
margin:0;
padding:0;
width:100%;
}

#header p {
margin:0;
padding:0.5em 15px 0.2em;
}

#header h1 {
margin:0;
padding:0.2em 15px;
}

#header h2 {
margin:0;
padding:0.2em 15px 0.7em;
}

#header ul {
clear:left;
float:left;
width:100%;
list-style:none;
margin:10px 0 0 0;
padding:0;
}
#header ul li {
display:inline;
list-style:none;
margin:0;
padding:0;
}
#header ul li a {
display:block;
float:left;
margin:0 0 0 1px;
padding:3px 10px;
text-align:center;
background:#eee;
color:#000;
text-decoration:none;
position:relative;
left:15px;
line-height:1.3em;
}
#header ul li a:hover {
background:#369;
color:#fff;
}
#header ul li a.active,
#header ul li a.active:hover {
color:#fff;
background:#000;
font-weight:bold;
}
#header ul li a span {
display:block;
}
/* ‘widths’ sub menu */
#breadcrumbs {
clear:both;
background:#eee;
border-top:4px solid #000;
margin:0;
padding:6px 15px !important;
text-align:left;
}

#colmask {
background:#f4f4f4 none repeat scroll 0 0;
clear:both;
float:left;
overflow:hidden;
position:relative;
width:100%;
}

#colmid {
background:#FFFFFF none repeat scroll 0 0;
float:left;
left:200px;
position:relative;
width:200%;
}

#colright {
background:#EEEEEE none repeat scroll 0 0;
float:left;
left:50%;
margin-left:-400px;
position:relative;
width:100%;
}

#col1wrap {
float:right;
position:relative;
right:100%;
width:50%;
}

#col1pad {
margin:0 15px 0 415px;
overflow:hidden;
}

#col1 {
overflow:hidden;
width:100%;
}

#col2 {
float:left;
left:215px;
margin-left:-50%;
overflow:hidden;
position:relative;
width:170px;
}

#col3 {
float:left;
left:15px;
overflow:hidden;
position:relative;
width:170px;
}

#footer {
border-top:1px solid #000000;
clear:both;
float:left;
margin:0;
padding:0;
width:100%;
text-align:center;
font-size:60%;
}

#footer p {
padding:0.5em 15px;
}

The main difference betweeen this css and the css you will be copying is the colpad id and this will be reflected in your HTML later. If you want to make use of a different layout then you will need to copy this colpad declaration and make it a class r=instead of an ID by changing the # to a . (full stop)

You will now need to copy thre doc type declaration and the first part of the <head> tag. These go hand in hand with the css and your site will NOT validate if this is incorrect.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en-GB”>

<head>
<meta http-equiv=”Content-Type” content=”application/xhtml+xml; charset=utf-8″ />
<meta name=”description” content=”Cloud City Sites, A revolutinary eCommerce solution” />
<meta name=”keywords” content=”Cloud City Sites, A revolutinary eCommerce solution” />
<meta name=”robots” content=”index, follow” />

<title>Catalogues: <%= controller.action_name %></title>
<%= stylesheet_link_tag “layout”, “store”, “verticalmenu”, :media => “all” %>
<%= javascript_include_tag :defaults %>
</head>

You can change the text shown in quotes to whatever you want for these lines.
<meta name=”description” content=”Cloud City Sites, A revolutinary eCommerce solution” />
<meta name=”keywords” content=”Cloud City Sites, A revolutinary eCommerce solution” />

Don’t worry about this line
<%= stylesheet_link_tag “layout”, “store”, “verticalmenu”, :media => “all” %>
It will be changed later.

Now save this into another text file with your css file you just saved.
You can call these files whatever you want. They will not actually be used anywhere. They are merely a kind of startting template for all your web applications from now on and will be tweaked for each new application.

Why are we using these layouts?

If you really need to ask that wuestion then go back and read everything that Matthew James Taylor has said about these layouts, their search engine friendliness, their viewability on pretty much any platform and any browser, their ability to be used for text readers for the visually impaired in such a way as they will be a pleasure to deal with inlike most websites that are developed.

That’s it for the layouts.

A quick re-cap
In 2 simple steps you have solved the vast majority of headaches and concerns that most website developers ignore becauese it’s too complicated and too much to consider.
You have chosen your layout and you have copy and pasted some freely avaiable code into 2 different files that you can then make usr of.

IMO Matthew James Taylor is a total genius. just accept it, don’t try to understand it and move on

For the next episode in this guide you will need to get your tools up and running.
These tools are VERY simple to set up but please pay attention to the instructions that you are given for each tool.

You will need to install Rails 2,2.2 (Currently the most advanced but stable release) from The official Rails Download site

Now you will need to install Aptana Studio as either an eclipse plugin (only if you already use eclipse for writing your scurrent siters with) or the standalone community version from The Aptana Download site

Once this is installed you will need to install the RadRails plugin. Again this is really simple to do and you weill find simple instructions on how to do this once you have Studio installed.

So go get those 3 tools set up in the order I have suggested (Otherwise you may have problems) and come back to read the next section.

Prototypen översatt till em, med liquid layout, centrerad och med rätt css.

I noticed this morning WordPress has made a huge change to their ‘behind the curtain’ account features. I was a bit nervous at first from the unexpected change, but when I clicked on “Add New Post” and got a view of the composing window, it’s as if I’m dreaming!

Almost every change I’ve been dealing with for the longest time has been something I didn’t like, but this?… this I can live with! I LOVE having a huge window for typing text in; plus, it’s no longer off center (thanks to the liquid layout!)! Thank you WordPress for making my day brighter, especially when I’ve been feeling extraordinarily stressed out lately!

P.S. – I know WordPress doesn’t read my blog and readers don’t care about what’s ‘behind the scene’. What does affect readers of my blog though is the mood I’m in when composing posts. Feeling more comfortable while doing something like writing is bound to affect the way I express myself. I don’t have the resources (time, motivation, etc.) to say much more than this (for probably days), but when those things come back… well, that will be obvious, dah?!

This Web site is compatible with three major browsers Firefox, IExplorer6+, Opera and it works for minimum 800×600 screen resolution. The graphics follow the web 2.0 instructions. The layout is manipulated with XHTML & CSS usage.