Convert two posts to Markdown.

4 files changed, 135 insertions, 79 deletions

diff --git a/_posts/2008-12-25-apache-2-on-mac-os-x-leopard-10-5-issue-on-upgrade.html b/_posts/2008-12-25-apache-2-on-mac-os-x-leopard-10-5-issue-on-upgrade.html
deleted file mode 100644
index 4bb2bab..0000000
--- a/_posts/2008-12-25-apache-2-on-mac-os-x-leopard-10-5-issue-on-upgrade.html
+++ /dev/null
@@ -1,40 +0,0 @@
----
-layout: post
-title: Apache 2 on Mac OS X Leopard 10.5 issue on upgrade
-tags:
-- Development
-- mac leopard apache
-status: publish
-type: post
-published: true
-meta:
-  _edit_last: '1'
----
-This weekend I decided to arrange my hard drive in a way that I could have a 5GB partition with sinful Windows XP to play some games with the family. To do that, I bought a 1TB external hard drive to use as a Time Machine backup for the process. At the time, my disk was already partitioned for Ubuntu but since I didn't find it useful anymore, I replaced it for Windows.

-

-<!--more-->

-

-Well, the good thing is I can actually play some old games like Empire Earth and Counter-Strike with the cousins to have some fun. The bad news is my Apache server settings screwed up. Two things happened. <em>Number one: </em>http://localhost/~user was thrown a 403 Forbidden access. This problem is the result of the user configurations for the server whilst the reinstallation / upgrade of the system, they don't exist now. What you have to do is very simple. Go to /private/etc/apache2/users and create a file <em>yourshortusername.conf</em> and type this:

-

-<pre class="brush:bash"><Directory "/Users/shortusername/Sites/">

-Options Indexes MultiViews

-AllowOverride None

-Order allow,deny

-Allow from all

-</Directory></pre>

-

-Restart your server and you're ready to go!

-

-Number two: My virtual hosts blew away. I should have kept a record on how to do this in case I had to a reinstallation, I guess I can kick myself now. (I'm solving this as I write this post :P) Three steps:

-<ol>

-	<li>Go to /private/etc/hosts and say you want to assign 127.0.0.1 to your alias, like this: 127.0.0.1 youralias</li>

-	<li>Go to /private/etc/apache2 and uncomment the line that includes the virtual hosts configuration file. If you want to use PHP, you might want to uncomment the line that includes it as well.</li>

-	<li>Finally, go to /private/etc/apache2/extra and edit the httpd-vhosts.conf mentioned on 2. and add this chunk of code:</li>

-</ol>

-<pre class='brush:bash'><VirtualHost 127.0.0.1>

-DocumentRoot "/path/to/your/site/"

-ServerAlias yoursitename

-ServerName yoursitename

-</VirtualHost></pre>

-

-Restart your server and virtual hosts are up and running.
diff --git a/_posts/2008-12-25-apache-2-on-mac-os-x-leopard-10-5-issue-on-upgrade.markdown b/_posts/2008-12-25-apache-2-on-mac-os-x-leopard-10-5-issue-on-upgrade.markdown
new file mode 100644
index 0000000..51dc3fb
--- /dev/null
+++ b/_posts/2008-12-25-apache-2-on-mac-os-x-leopard-10-5-issue-on-upgrade.markdown
@@ -0,0 +1,55 @@
+---
+layout: post
+title: Apache 2 on Mac OS X Leopard 10.5 issue on upgrade
+tags: [ development, mac, leopard, apache ]
+published: true
+---
+
+This weekend I decided to arrange my hard drive in a way that I could have a
+5GB partition with sinful Windows XP to play some games with the family. To do
+that, I bought a 1TB external hard drive to use as a Time Machine backup for
+the process. At the time, my disk was already partitioned for Ubuntu but since
+I didn't find it useful anymore, I replaced it for Windows.
+
+Well, the good thing is I can actually play some old games like Empire Earth
+and Counter-Strike with the cousins to have some fun. The bad news is my Apache
+server settings screwed up. Two things happened. 
+
+_Number one:_ `http://localhost/~user` was thrown a `403 Forbidden` access.
+This problem is the result of the user configurations for the server whilst the
+reinstallation / upgrade of the system, they don't exist now. What you have to
+do is very simple. Go to /private/etc/apache2/users and create a file
+`yourshortusername.conf` and type this:
+
+{% highlight apache %}
+<Directory "/Users/shortusername/Sites/">
+Options Indexes MultiViews
+AllowOverride None
+Order allow,deny
+Allow from all
+</Directory>
+{% endhighlight %}
+
+Restart your server and you're ready to go!
+
+Number two: My virtual hosts blew away. I should have kept a record on how to
+do this in case I had to a reinstallation, I guess I can kick myself now. (I'm
+solving this as I write this post :P) Three steps:
+
+* Go to `/private/etc/hosts` and say you want to assign 127.0.0.1 to your alias,
+  like this: `127.0.0.1 youralias`
+* Go to `/private/etc/apache2` and uncomment the line that includes the virtual
+  hosts configuration file. If you want to use PHP, you might want to uncomment
+  the line that includes it as well.
+* Finally, go to `/private/etc/apache2/extra` and edit the `httpd-vhosts.conf`
+  mentioned on 2. and add this chunk of code:
+  
+{% highlight apache %}
+<VirtualHost 127.0.0.1>
+DocumentRoot "/path/to/your/site/"
+ServerAlias yoursitename
+ServerName yoursitename
+</VirtualHost>
+{% endhighlight %}
+
+Restart your server and virtual hosts are up and running.
diff --git a/_posts/2009-01-07-the-960px-grid-on-top-of-full-range-background.html b/_posts/2009-01-07-the-960px-grid-on-top-of-full-range-background.html
deleted file mode 100644
index 5934ee2..0000000
--- a/_posts/2009-01-07-the-960px-grid-on-top-of-full-range-background.html
+++ /dev/null
@@ -1,39 +0,0 @@
----
-layout: post
-title: The 960px grid on top of full-range background
-tags:
-- Design
-status: publish
-type: post
-published: true
-meta:
-  _edit_last: '1'
----
-I have been putting myself to test on a client project, regarding aesthetics. I have used "The Grid" in other situations but not in this way. I have learned how to accomplish grid balance on top of full-range background... again, the hard way. I use this approach in this very blog so you should realize its result already.
-
-<!--more-->This accomplishment has been unveiled to me through three of my favorite websites out there: <a href="http://simplebits.com">SimpleBits</a>, <a href="http://viget.com">Viget</a> and <a href="http://onwired.com">OnWired</a>. I know a lot of other websites that use this but these really caught my special attention. If you see three homepages, all of them use full-range backgrounds and yet they use the the 960px grid. I wanted that richness in my projects and so I gave it a try. Before I deepen into the procedure, i must say it's always good to have a container/bucket div instead of acting directly over the body element for cross-browser compatibility. I have tried it and IE 6 didn't like it very much.
-
-We are admitting a simple <em>skeleton</em> here: a simple header, a navigation bar, a main body and a footer should do the trick. So here's my procedure:
-<h3>Step 1</h3>
-Create the container div around.
-
-<code>&lt;div id='container'&gt;
-→ Skeleton goes here.
-&lt;/div&gt;</code>
-
-This is helpful as I mentioned in order to set its width to 960px right there.
-
-<code>#container { width: 960px; margin: X auto; }</code>
-
-This is a very basic approach and it's a good one if you want to implement a 30px padded box like <a href="http://boagworld.com">Paul Boag</a> for example. That way you save further implementation and get a clean shot at the grid. However, if you plan to use full-range backgrounds like I did then you'll have a little more work.
-<h3>Step 2</h3>
-Don't set any width for the skeleton div's so they default to 100%. Now you're ready to set each one a background (perhaps you'll have a repeat-x option or an attached one merging to the background color). Now each div gets it's own background, which is what we want. For the header, it would be something like:
-
-<code>#header { background: #xyz url('path/to/background.png') repeat-x; }</code>
-<h3>Step 3</h3>
-Place a single div child inside each skeleton div. All of the content should go inside these child div's. Then, you can set each div child the 960px width like this: <code>#container &gt; div &gt; div { width: 960px; margin: 0 auto; }</code>This tells us the div's inside the skeleton div's get affected. That's why I'm saying every piece of content should go inside the child div's, while the background goes outside.
-And you ask why not setting the default width to the skeleton div's itself? Well, you can do that but let me show me the differences.
-
-<a href="http://josemota.net/sites/default/files/images/1.jpg"><img class="frame frame-unfloated" src="http://josemota.net/sites/default/files/images/1_.png" alt="Without the child div's it would look like this..." /></a>
-
-Again, this is a very simple example. You can try lots of other stuff like positioning only some of the div's, background different settings, anything. I hope you learned something from this example.
diff --git a/_posts/2009-01-07-the-960px-grid-on-top-of-full-range-background.markdown b/_posts/2009-01-07-the-960px-grid-on-top-of-full-range-background.markdown
new file mode 100644
index 0000000..052c1d4
--- /dev/null
+++ b/_posts/2009-01-07-the-960px-grid-on-top-of-full-range-background.markdown
@@ -0,0 +1,80 @@
+---
+layout: post
+title: The 960px grid on top of full-range background
+tags: [ design ]
+published: true
+---
+
+I have been putting myself to test on a client project, regarding aesthetics. I
+have used "The Grid" in other situations but not in this way. I have learned
+how to accomplish grid balance on top of full-range background... again, the
+hard way. I use this approach in this very blog so you should realize its
+result already.
+
+This accomplishment has been unveiled to me through three of my favorite
+websites out there: [SimpleBits](http://simplebits.com),
+[Viget](http://viget.com) and [OnWired](http://onwired.com). I know a lot of
+other websites that use this but these really caught my special attention. If
+you see three homepages, all of them use full-range backgrounds and yet they
+use the the 960px grid. I wanted that richness in my projects and so I gave it
+a try. Before I deepen into the procedure, i must say it's always good to have
+a container/bucket div instead of acting directly over the body element for
+cross-browser compatibility. I have tried it and IE 6 didn't like it very much.
+
+We are admitting a simple _skeleton_ here: a simple header, a navigation
+bar, a main body and a footer should do the trick. So here's my procedure:
+
+Step 1
+------
+
+Create the container div around.
+
+{% highlight html %}
+<div id='container'>
+→ Skeleton goes here.
+</div>
+{% endhighlight %}
+
+This is helpful as I mentioned in order to set its width to 960px right there.
+
+{% highlight css %}
+#container { width: 960px; margin: X auto; }
+{% endhighlight %}
+
+This is a very basic approach and it's a good one if you want to implement a
+30px padded box like [Paul Boag](http://boagworld.com) for example. That way
+you save further implementation and get a clean shot at the grid. However, if
+you plan to use full-range backgrounds like I did then you'll have a little
+more work.
+
+Step 2
+------
+
+Don't set any width for the skeleton div's so they default to 100%. Now you're
+ready to set each one a background (perhaps you'll have a repeat-x option or an
+attached one merging to the background color). Now each div gets it's own
+background, which is what we want. For the header, it would be something like:
+
+{% highlight css %}
+#header { background: #xyz url('path/to/background.png') repeat-x; }
+{% endhighlight %}
+
+Step 3
+------
+
+Place a single div child inside each skeleton div. All of the content should go
+inside these child div's. Then, you can set each div child the 960px width like
+this: `#container > div > div { width: 960px; margin: 0 auto; }` This tells us
+the div's inside the skeleton div's get affected. That's why I'm saying every
+piece of content should go inside the child div's, while the background goes
+outside. And you ask why not setting the default width to the skeleton div's
+itself? Well, you can do that but let me show me the differences.
+
+<a href="http://josemota.net/sites/default/files/images/1.jpg"><img
+class="frame frame-unfloated"
+src="http://josemota.net/sites/default/files/images/1_.png" alt="Without the
+child div's it would look like this..." /></a>
+
+Again, this is a very simple example. You can try lots of other stuff like
+positioning only some of the div's, background different settings, anything. I
+hope you learned something from this example.