Needs no introduction.
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Design Template 23</title>
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css" />
<style type="text/css">
body
{
font-family:Sans-serif;
background:#F2F2F2;
}
body, #picture img, nav a:hover
{
width:100%;
}
header, #picture, #text, footer, nav a
{
padding:1em;
}
header
{
padding-top:2em;
background:#000000;
}
nav a
{
display:block;
width:4em;
width:3em;
text-decoration:none;
text-align:left;
color:#000000;
}
nav a:hover
{
background:#0000FF;
color:#FFFFFF;
}
footer, header
{
height:8em;
}
#content, #picture, #text, nav
{
background:#FFFFFF;
}
#picture, nav
{
float:left;
width:20%;
}
#picture
{
min-height:10em;
text-align:center;
}
#text
{
overflow:hidden;
}
footer
{
clear:left;
}
header h1, header h2, header h3
{
color:#FFFFFF;
}
</style>
</head>
<body>
<header>
<h1>Header</h1>
<h2>Sub header</h2>
<h2>Sub sub header</h2>
</header>
<section id="content">
<nav>
<a href="#">home</a>
<a href="#">services</a>
<a href="#">portfolio</a>
<a href="#">contact</a>
</nav>
<article id="picture">
<img src="http://farm3.static.flickr.com/2079/2215968391_ebc1b2941b.jpg" alt="Pretty picture" />
</article>
<aside id="text">
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
<h2>Header Level 2</h2>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>
<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
<h3>Header Level 3</h3>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ul>
<pre><code>
#header h1 a {
display: block;
width: 300px;
height: 80px;
}
</code></pre>
</aside>
</section>
<footer>Footer</footer>
</body>
</html>
Tuesday, 15 February 2011
Mobile friendly liquid layout #2
Needs no introduction.
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Design Template 22</title>
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css" />
<style type="text/css">
body
{
font-family:Sans-serif;
background:#F2F2F2;
}
body, #picture img
{
width:100%;
}
header, #picture, #text, footer, nav a
{
padding:1em;
}
header, nav
{
padding-top:2em;
}
#top
{
background:#000000;
}
nav
{
height:3em;
}
nav a
{
display:block;
width:3em;
text-decoration:none;
float:left;
text-align:center;
}
nav a:hover
{
background:#0000FF;
}
#top, footer
{
height:8em;
}
header
{
float:left;
width:50%;
}
#content
{
min-height:8em;
}
#content, #picture, #text
{
background:#FFFFFF;
}
#picture
{
float:left;
width:33%;
min-height:8em;
text-align:center;
}
#text
{
overflow:hidden;
}
footer, #content
{
clear:left;
}
header h1, header h2, header h3, nav a
{
color:#FFFFFF;
}
</style>
</head>
<body>
<section id="top">
<header>
<h1>Header</h1>
<h2>Sub header</h2>
<h2>Sub sub header</h2>
</header>
<nav>
<a href="#">home</a>
<a href="#">services</a>
<a href="#">portfolio</a>
<a href="#">contact</a>
</nav>
</section>
<section id="content">
<article id="picture">
<img src="http://farm3.static.flickr.com/2079/2215968391_ebc1b2941b.jpg" alt="Pretty picture" />
</article>
<aside id="text">
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
<h2>Header Level 2</h2>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>
<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
<h3>Header Level 3</h3>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ul>
<pre><code>
#header h1 a {
display: block;
width: 300px;
height: 80px;
}
</code></pre>
</aside>
</section>
<footer>Footer</footer>
</body>
</html>
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Design Template 22</title>
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css" />
<style type="text/css">
body
{
font-family:Sans-serif;
background:#F2F2F2;
}
body, #picture img
{
width:100%;
}
header, #picture, #text, footer, nav a
{
padding:1em;
}
header, nav
{
padding-top:2em;
}
#top
{
background:#000000;
}
nav
{
height:3em;
}
nav a
{
display:block;
width:3em;
text-decoration:none;
float:left;
text-align:center;
}
nav a:hover
{
background:#0000FF;
}
#top, footer
{
height:8em;
}
header
{
float:left;
width:50%;
}
#content
{
min-height:8em;
}
#content, #picture, #text
{
background:#FFFFFF;
}
#picture
{
float:left;
width:33%;
min-height:8em;
text-align:center;
}
#text
{
overflow:hidden;
}
footer, #content
{
clear:left;
}
header h1, header h2, header h3, nav a
{
color:#FFFFFF;
}
</style>
</head>
<body>
<section id="top">
<header>
<h1>Header</h1>
<h2>Sub header</h2>
<h2>Sub sub header</h2>
</header>
<nav>
<a href="#">home</a>
<a href="#">services</a>
<a href="#">portfolio</a>
<a href="#">contact</a>
</nav>
</section>
<section id="content">
<article id="picture">
<img src="http://farm3.static.flickr.com/2079/2215968391_ebc1b2941b.jpg" alt="Pretty picture" />
</article>
<aside id="text">
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
<h2>Header Level 2</h2>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>
<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
<h3>Header Level 3</h3>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ul>
<pre><code>
#header h1 a {
display: block;
width: 300px;
height: 80px;
}
</code></pre>
</aside>
</section>
<footer>Footer</footer>
</body>
</html>
Monday, 14 February 2011
Mobile friendly liquid layout
This layout works well on most devices. I think it's fair to say that you can do a lot with it. I also discovered a small, but annoying, technical anomaly with webkit browsers while creating it. Using the example below, If I had set the #text element to 'float:left;', this element would have shifted beneath the #picture element. Given the webkit browser is used in many mobile browsers, this becomes more important.
One thing you'll notice from this layout is that I haven't done much with the fonts, but that's just to keep the code slim.
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Design Template 21</title>
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css" />
<style type="text/css">
body
{
font-family:Sans-serif;
background:#F2F2F2;
}
body, #picture img
{
width:100%;
}
header, #picture, #text, footer, nav a
{
padding:1em;
}
nav
{
background:#000000;
height:3em;
}
nav a
{
display:block;
width:3em;
text-decoration:none;
float:right;
text-align:center;
color:#FFFFFF;
}
nav a:hover
{
background:#0000FF;
}
header, footer
{
height:8em;
}
header
{
clear:right;
}
#content
{
min-height:8em;
}
#content, #picture, #text
{
background:#FFFFFF;
}
#picture
{
float:left;
width:33%;
min-height:8em;
text-align:center;
}
#text
{
overflow:hidden;
}
footer
{
clear:left;
}
</style>
</head>
<body>
<nav>
<a href="#">home</a>
<a href="#">services</a>
<a href="#">portfolio</a>
<a href="#">contact</a>
</nav>
<header>
<h1>Header</h1>
</header>
<section id="content">
<article id="picture">
<img src="http://farm3.static.flickr.com/2079/2215968391_ebc1b2941b.jpg" alt="Pretty picture" />
</article>
<aside id="text">
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
<h2>Header Level 2</h2>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>
<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
<h3>Header Level 3</h3>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ul>
<pre><code>
#header h1 a {
display: block;
width: 300px;
height: 80px;
}
</code></pre>
</aside>
</section>
<footer>Footer</footer>
</body>
</html>
One thing you'll notice from this layout is that I haven't done much with the fonts, but that's just to keep the code slim.
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Design Template 21</title>
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css" />
<style type="text/css">
body
{
font-family:Sans-serif;
background:#F2F2F2;
}
body, #picture img
{
width:100%;
}
header, #picture, #text, footer, nav a
{
padding:1em;
}
nav
{
background:#000000;
height:3em;
}
nav a
{
display:block;
width:3em;
text-decoration:none;
float:right;
text-align:center;
color:#FFFFFF;
}
nav a:hover
{
background:#0000FF;
}
header, footer
{
height:8em;
}
header
{
clear:right;
}
#content
{
min-height:8em;
}
#content, #picture, #text
{
background:#FFFFFF;
}
#picture
{
float:left;
width:33%;
min-height:8em;
text-align:center;
}
#text
{
overflow:hidden;
}
footer
{
clear:left;
}
</style>
</head>
<body>
<nav>
<a href="#">home</a>
<a href="#">services</a>
<a href="#">portfolio</a>
<a href="#">contact</a>
</nav>
<header>
<h1>Header</h1>
</header>
<section id="content">
<article id="picture">
<img src="http://farm3.static.flickr.com/2079/2215968391_ebc1b2941b.jpg" alt="Pretty picture" />
</article>
<aside id="text">
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
<h2>Header Level 2</h2>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>
<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
<h3>Header Level 3</h3>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ul>
<pre><code>
#header h1 a {
display: block;
width: 300px;
height: 80px;
}
</code></pre>
</aside>
</section>
<footer>Footer</footer>
</body>
</html>
Friday, 11 February 2011
HTML5 tables
Thankfully the W3C seem to be sticking with tables in HTML5 despite all the criticisms. Most, if not all of the old attributes have gone, leaving us with simple tags and the introduction of the summary attribute to the table tag. Presumably this is to overcome the complaints about accessibility. It looks like a good strategy to me. Tables for data are good. Tables for layout, not so good.
See demo.
Below is an example of a HTML5 table:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tables in HTML5</title>
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css" />
<style>
table
{
margin:4em;
border:#CCCCCC solid 0.1em;
}
th, td
{
border-bottom:#CCCCCC solid 0.1em;
border-left:#CCCCCC solid 0.1em;
padding:1em;
}
th
{
background:#A7FFFF;
}
</style>
</head>
<body>
<table summary="Everything has a consequence.">
<tr>
<th>Action</th>
<th>Result</th>
</tr>
<tr>
<td>Work</td>
<td>Pay</td>
</tr>
<tr>
<td>Play</td>
<td>Happiness</td>
</tr>
<tr>
<td>Love</td>
<td>Love</td>
</tr>
</table>
</body>
</html>
See demo.
Below is an example of a HTML5 table:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tables in HTML5</title>
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css" />
<style>
table
{
margin:4em;
border:#CCCCCC solid 0.1em;
}
th, td
{
border-bottom:#CCCCCC solid 0.1em;
border-left:#CCCCCC solid 0.1em;
padding:1em;
}
th
{
background:#A7FFFF;
}
</style>
</head>
<body>
<table summary="Everything has a consequence.">
<tr>
<th>Action</th>
<th>Result</th>
</tr>
<tr>
<td>Work</td>
<td>Pay</td>
</tr>
<tr>
<td>Play</td>
<td>Happiness</td>
</tr>
<tr>
<td>Love</td>
<td>Love</td>
</tr>
</table>
</body>
</html>
Tuesday, 8 February 2011
Submit Form with Loader
I achieve 2 objectives with the form below.
The first is that I use jQuery to capture the user hitting the enter key after adding the password. By using jQuery, this works in all browsers.
The second thing I deliver is a 'loading...' image when the form has been submitted. It stays there until we have a result from the target PHP script, authenticate.php. Your authenticate.php could look something like this
<?php
echo 'Who are you?';
?>
You could also pass parameters to the PHP and do it properly. See http://effectivewebdesigns.blogspot.com/2010/10/send-form-information-to-php-through.html
BTW, you'll also have to create your own loading.gif
See demo.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset="UTF-8">
<title>Submit Form with Loader</title>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script>
$(document).ready(function()
{
$('#pass').keyup(function(event)
{
if(event.keyCode == 13)
{
$("#sub").click();
}
});
$('#sub').click(function()
{
$('#formlogin').empty().html('<img src="loading.gif" />');
$.post('authenticate.php',
{
}, function(data)
{
$('#formlogin').empty().html(data);
});
return false;
});
});
</script>
</head>
<body>
<form id='formlogin'>
<input type='text' name='username' id='username' />
<input name='pass' id='pass' type='password' />
<input type='submit' value='login' name="sub" id="sub" />
</form>
</body>
</html>
The first is that I use jQuery to capture the user hitting the enter key after adding the password. By using jQuery, this works in all browsers.
The second thing I deliver is a 'loading...' image when the form has been submitted. It stays there until we have a result from the target PHP script, authenticate.php. Your authenticate.php could look something like this
<?php
echo 'Who are you?';
?>
You could also pass parameters to the PHP and do it properly. See http://effectivewebdesigns.blogspot.com/2010/10/send-form-information-to-php-through.html
BTW, you'll also have to create your own loading.gif
See demo.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset="UTF-8">
<title>Submit Form with Loader</title>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script>
$(document).ready(function()
{
$('#pass').keyup(function(event)
{
if(event.keyCode == 13)
{
$("#sub").click();
}
});
$('#sub').click(function()
{
$('#formlogin').empty().html('<img src="loading.gif" />');
$.post('authenticate.php',
{
}, function(data)
{
$('#formlogin').empty().html(data);
});
return false;
});
});
</script>
</head>
<body>
<form id='formlogin'>
<input type='text' name='username' id='username' />
<input name='pass' id='pass' type='password' />
<input type='submit' value='login' name="sub" id="sub" />
</form>
</body>
</html>
Monday, 7 February 2011
Zend on XAMPP on localhost on Windows
I learned to use the MVC psuedo design pattern through codeigniter. MVC seems to be commonly used through the Zend Framework. I learned PHP through a Zend course and was keen to have the Zend MVC Framework on my XAMPP localhost server. So I followed the instructions from the Zend website, which weren't great.
First of all, before you begin the tutorial from the Zend website, you already have the Zend Framework on XAMPP. It's in the PEAR directory. So you just need to replace this with an up to date version.
The other thing you need to replace is zf.bat, which lies within the php directory.
Another thing you need to do before reading the Zend instructions is edit your hosts file. Here are a couple of lines from mine:
127.0.0.1 quickstart.local
127.0.0.1 localhost
Now. Here is the crucial one. If you follow the Zend instructions to the letter, you are left with a localhost which only works with the Zend Framework. You don't want this. What about all the times you are not using Zend?
So, you need to use 2 ports for your localhost. One for Zend and one for everything else. Then you can set
up your VirtualHost entries within httpd.conf like these:
Listen 80
Listen 8080
<VirtualHost *:8080>
ServerName quickstart.local
DocumentRoot C:\xampp\htdocs\quickstart\public
SetEnv APPLICATION_ENV "development"
<Directory C:\xampp\htdocs\quickstart\public>
DirectoryIndex index.php
AllowOverride All
Order allow,deny
Allow from all
</Directory>
</VirtualHost>
<VirtualHost *:80>
ServerName localhost
DocumentRoot C:\xampp\htdocs
SetEnv APPLICATION_ENV "development"
<Directory C:\xampp\htdocs>
DirectoryIndex index.php
AllowOverride All
Order allow,deny
Allow from all
</Directory>
</VirtualHost>
You can then go to your web browser and use :
http://quickstart.local:8080/ for Zend and
http://localhost/ for everything else.
First of all, before you begin the tutorial from the Zend website, you already have the Zend Framework on XAMPP. It's in the PEAR directory. So you just need to replace this with an up to date version.
The other thing you need to replace is zf.bat, which lies within the php directory.
Another thing you need to do before reading the Zend instructions is edit your hosts file. Here are a couple of lines from mine:
127.0.0.1 quickstart.local
127.0.0.1 localhost
Now. Here is the crucial one. If you follow the Zend instructions to the letter, you are left with a localhost which only works with the Zend Framework. You don't want this. What about all the times you are not using Zend?
So, you need to use 2 ports for your localhost. One for Zend and one for everything else. Then you can set
up your VirtualHost entries within httpd.conf like these:
Listen 80
Listen 8080
<VirtualHost *:8080>
ServerName quickstart.local
DocumentRoot C:\xampp\htdocs\quickstart\public
SetEnv APPLICATION_ENV "development"
<Directory C:\xampp\htdocs\quickstart\public>
DirectoryIndex index.php
AllowOverride All
Order allow,deny
Allow from all
</Directory>
</VirtualHost>
<VirtualHost *:80>
ServerName localhost
DocumentRoot C:\xampp\htdocs
SetEnv APPLICATION_ENV "development"
<Directory C:\xampp\htdocs>
DirectoryIndex index.php
AllowOverride All
Order allow,deny
Allow from all
</Directory>
</VirtualHost>
You can then go to your web browser and use :
http://quickstart.local:8080/ for Zend and
http://localhost/ for everything else.
Mobile Mick
This weekend I took delivery of a HTC Desire. My first smartphone.
Now I'm not going to waste your time by giving you a review which has already been done many times over.
No. This is just a note to say that there is likely to be more mobile in the mix of future posts as I discover techniques also suitable for websites picked up by our mobile friends.
Now I'm not going to waste your time by giving you a review which has already been done many times over.
No. This is just a note to say that there is likely to be more mobile in the mix of future posts as I discover techniques also suitable for websites picked up by our mobile friends.
Subscribe to:
Posts (Atom)