diff options
Diffstat (limited to '_posts')
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><div id='container'> -→ Skeleton goes here. -</div></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 > div > 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. |