02Feb 2009 61 Comments

PHP Diseño Web Modular Parte 2

Categories: Diseño, PHP - Tags: maquetación, modular, PHP

En un post anterior expliqué la forma más simple de hacer una web modular; aunque esa forma funciona bien para proyectos de muchas páginas, proyectos con CMS o sistemas con friendly url (url amigable) no es buena idea usarla.
Tengo pensado hacer 2 partes más del tutorial para explicar además a hacer conexión con la base de datos y friendly URL

Estructura de la Web Modular

Para este caso prefiero separar header de menu, el footer lo separo del final del código html, la estructura general de la página esta en el archivo index.php, todos los contenidos en si están en la carpeta pages, para poder acceder a cualquier página usamos la ruta index.php?page=nombre_del_archivo_sin_extension

index.php

En el anterior post index.php era una página mas, pero ahora es el centro del script, las páginas ahora sólo tendrán el contenido sin ningún include y estarán en la carpeta pages.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<?php
include("includes/top_page.php");
?>
<div id="wrapper">
<div id="header">
<? include("includes/header.php"); ?>
</div>
<div id="menu">
<? include("includes/menu.php"); ?>
</div>
<div id="contenido">
<? include("includes/pages.php"); ?>
<br style="clear:both;" />
</div>
<div id="footer">
<? include("includes/footer.php"); ?>
</div>
</div>
<? include("includes/bottom_page.php"); ?>

Carpeta includes

En esta carpeta colocamos todos los trozos de nuestra páginas, que es casi los mismo del tutorial anterior , la novedad el include encargado de llamar las páginas web

pages.php

Este script llama la página dentro de la carpeta pages que pidamos usando GET index.php?page=nombre_del_archivo_sin_extension

1
2
3
4
5
6
7

<?php
if (!isset($_GET['page'])) {
include("pages/homepage.php");
} else {
include("pages/".$_GET['page'].".php");
}
?>

Si por ejemplo en la carpeta pages tengo la pagina servicios.php para llamarla la url sería index.php?page=servicios

UPDATE: Y que ocurre si quisiera una estructura distinta con un menu lateral por ejemplo, simplemente edita el index.php agregando el div que corresponde a ese menu adicional y sobre todo edita el CSS para que se ubique adecuadamente ese div adicional, puedes ver como en este tutorial de maquetación

02Feb 2009 8 Comments

menu usando ul y li

Categories: CSS, Diseño - Tags: CSS, html, maquetación

En este tutorial voy a explicar como crear un menu para nuestra página web usando unicamente las etiquetas ul y li

Estructura del la lista ul li

Nuestro código html es muy sencillo únicamente hay que crear un listado (ul) y agregar los items del listado que sería cada li y todo esto dentro de un div al cual llamaremos menu

1
2
3
4
5
6
7
8

<div id="menu">
<ul>
<li><a href="#">Inicio</a></li>
<li><a href="#">Nosotros</a></li>
<li><a href="#">Servicios</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</div>

Dándole forma al UL con estilos

Si vemos sólo el html veremos un menu vertical bastante alicaido, ahora vamos a hacer que la hoja de estilos se encargue de darle forma:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

body {
color: #333333;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
}
#menu {
margin:auto;
padding-left:20px;
padding-top:5px;
height:25px;
width:320px;
background-image:url(nav_bg.png);
}
#menu ul{
list-style:none; /* Eliminamos los bullets */
margin:0px; /* Quitamos los margenes */
padding:0px; /* Quitamos el padding */
}
#menu ul li {
float:left; /* Hacemos que el menu se muestre horizontal */
padding-left:10px;
padding-right:10px;
border-right:1px solid #FFFFFF;
}
#menu ul li a{
text-decoration:none;
color:#CCCCCC;
font-weight:bold;
}
#menu ul li a:hover{
color:#FFFFFF;
}

Si revisamos el código CSS, vemos que poco a poco defino el fondo, la foma en que mostrarán los items, le aplico colores a los links y va tomando forma nuestro menu.
Si estás buscando un menu con submenus, y menus desplegables, revisa este tutorial

Otros post sobre maquetación CSS

29Jan 2009 31 Comments

Diseño web modular PHP chau frames

Categories: CSS, Diseño, PHP - Tags: CSS, maquetación, modular, PHP

¿Por qué debemos olvidarnos de los frames?

Los viejos frames funcionan bien pero google, yahoo y ningún buscador los indexa bien, así que perdemos ranking y será muy raro que aparezcamos en un buscador, además no nos permiten disfrutar de las ventajas del CSS.

¿Qué es diseño web modular?

Para reemplazar a los viejos frames, es mejor usar PHP y separar las secciones de nuestra página web en módulos, en castellano la vamos trozar como pollo, de tal forma que cada pedazo contenga la estructura de la página:

top_page.php Aqui vamos a poner todos los encabezados html
header.php Aqui vamos a poner el encabezado de nuestra página, es decir el título y el menú
footer.php Aqui vamos a poner la parte de abajo de nuestra página nuestro copyright, links, etc

top_page.php

Primero todo header del html, nuestro titulo, hoja de estilos

1
2
3
4
5
6
7
8
9

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Mi pagina modular</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">

header.php

Aqui vamos a poner nuestro encabezado y menu

1
2
3
4
5
6
7
8

<div id="header">
</div>
<div id="menu">
<a href="#">Homepage</a>  |  
<a href="#">About Us</a>  |  
<a href="#">Services</a>  |  
<a href="#">Contact Us</a>
</div>

footer.php

Aqui la parte final de nuestra página web

1
2
3
4
5
6

<div id="footer">
Visita <a href="http://www.miguelmanchego.com" target="_blank">el Blog</a> para aprender diseño
</div>
</div>
</body>
</html>

¿Cómo lo junto todo?

Pues usando includes vamos a pegar todas esas partes que se repiten en nuestra página web, y quedaría algo asi

1
2
3
4
5
6

<?php include("includes/top_page.php"); ?>
<?php include("includes/header.php"); ?>
<div id="contenido">
<p>Nuestro texto va aqui</p>
</div>
<?php include("includes/footer.php"); ?>

Aquí he descrito la forma más simple de hacer web modular pero no es la mejor forma, sobre todo a la hora de usar frienly url, o cuando tenemos muchas páginas, por lo que te sugiero leer la segunda parte de este tutorial

Archive for category: Diseño