Web 2.0 Fácil

Tutoriales ilustrados paso a paso de diseño y desarrollo web.

Archive for October, 2007


Tutorial: Includes con Php.

Oct 19, 2007 Author: netizen.k81 | Filed under: 4. Desarrollo-Web, php

Los includes son la mejor forma de optimizar tu website sin necesidad de saber nada de programación en Php. En este manual descubrirás cómo usarlos para mantener estáticas zonas que se repiten en todas nuestras páginas (como la cabecera y el pie de página) consiguiendo que únicamente se recargue el contenido.

Al finalizar este tutorial habrás elaborado un website completo a base de includes como el que aparece en el siguiente ejemplo: ver demo.

Para ello hemos dividido este tutorial en 4 partes:

  1. Crearemos el script de php encargado de incluir los contenidos en la parte central de nuestra página base.
  2. Cambiaremos la apariencia del botón activo para indicar al usuario su ubicación en nuestro website.
  3. Daremos un “title” dinámico a cada página de nuestro website a fin de mejorar su posicionamiento en los buscadores.
  4. Convertiremos en url’s amigables las url’s de nuestras páginas dinámicas mediante el archivo .htaccess (para que nuestros usuarios las puedan recordar fácilmente y tengan una indexación perfecta en los buscadores).

Manos a la obra!

Instalando un Servidor en nuestro ordenador.

Php es un lenguaje de programación que únicamente puede ser interpretado por el Servidor. Por lo tanto, lo primero que tenemos que hacer es instalar un Servidor, como Apache, en nuestro ordenador. En el servidor se ejecutarán todas las instrucciones de Php y las convertirá en marcación html (puedes ver en el código fuente del demo como no ha quedado rastro del lenguaje php y sólo vemos código html).

Instalarlo nos tomará menos de 5 minutos, con la ayuda de un programa ejecutable llamado “Wamp” que integra “todo en uno”: el servidor Apache, el lenguaje Php, y la base de datos MySql.

Simplemente descarga el instalador de Wamp, ejecútalo y selecciona siguiente, siguiente, siguiente… hasta que se instale completamente.

Ahora que has terminado la instalación, fíjate en la parte inferior derecha de la “barra de tareas” de Windows: hay un nuevo icono Icono de Wamp que nos indica que tu Servidor Apache ya está activo.

Veamos si funciona: abre tu navegador y escribe en la barra de direcciones la palabra localhost (éste es el nombre de tu servidor local) y presiona “enter”. Si aparece la siguiente página de bienvenida…

Pagina de bienvenida de tu localhost

felicidades! Ahora tu ordenador es un servidor y estás listo para empezar a utilizar los includes de Php!

Ahora localiza el directorio “C:\wamp\www\” que se creó automáticamente al instalar el servidor Wamp en tu ordenador. Este directorio es precisamente tu localhost y es ahí donde debes insertar todas tus páginas web que requieran ser interpretadas por el Servidor.

Ahí crearemos una nueva carpeta con el nombre “includes_php” donde guardaremos todos los archivos que crearemos a lo largo de este tutorial: “C:\wamp\www\includes_php\”.

Página base e includes.

Primero vamos a crear nuestra página base y los “includes” o contenidos de cada sección.

Una buena idea es utilizar un editor de código decente, como Notepad++. Una vez que lo descargues y lo tengas instalado, dirigete a:
Preferencias > Documento Nuevo > y marca la casilla UTF-8 sin ‘BOM’.
Esta es la codificación de caracteres recomendada por el W3C y la utilizaremos en este tutorial.

Nuestra página base será común y corriente, con todas sus partes básicas:

  1. Doctype
  2. Head: donde especificarás:
    • la codificación del documento (utf-8),
    • el “title” de tu website y
    • la hoja de estilos que usarás. Puedes descargar la hoja de estilos que utilizamos en el demo (simplemente selecciona “guardar como” y meterla dentro del directorio C:\wamp\www\includes_php\)
  3. Body:
    • Cabecera (o header) donde pondremos el nombre de nuestro website y el menú de navegación.
    • Principal (o main) donde incluiremos los contenidos de nuestro website (lo dejaremos vacío de momento).
    • Pie de página (o footer).

A continuación tienes un ejemplo de cómo debe quedarte:


<!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=”es”>

	<head>
		<meta http-equiv=”Content-Type” content=”application/xhtml+xml; charset=UTF-8″ />
		<title>Mi Website</title>
		<link rel=”stylesheet” href=”estilos.css” type=”text/css” />
	</head>

	<body>

<!– Cabecera –>

		<div id=”header”>

			<h1><a href=”">Tu Website</a></h1>	

			<ul>
				<li><a href=”">ITEM 1</a></li>
				<li><a href=”">ITEM 2</a></li>
				<li><a href=”">ITEM 3</a></li>
				<li><a href=”">ITEM 4</a></li>
			</ul>

		</div>

<!– Principal –>

		<div id=”main”>

		</div>

<!– Pie –>

		<div id=”footer”>

			<p>Este demo es parte de un tutorial creado por
			<a href=”http://www.web2.0facil.com/”>Web2.0fácil</a>.
			<br />
			<a href=”http://creativecommons.org/licenses/by/2.5/pl/deed.es”>
			Licencia Creative Commons</a>.</p>

		</div>

	</body>

</html>


Guárdala como “index.php” en el directorio “C:\wamp\www\includes_php\”.

Como notaste, las etiquetas de la zona principal de nuestro index ( <div id=”main”> </div> ) se encuentran vacías, puesto que es ahí donde se insertarán los includes o contenidos que se incluirán dinámicamente. En ellos puedes utilizar todas las etiquetas que quieras, pero no hace falta que pongas head o body, simplemente deberán lucir tal cual si los hubieras “arrancado” de la zona principal de tu página base.

En documentos nuevos y por separado, crearemos cada uno de los includes como verás a continuación:

  • Contenido del ITEM 1. Sin ninguna introducción, escribe las siguientes líneas:

    
		<h2>Título del ítem 1</h2>
		<p>Esta es la primera sección del website y aquí puedes insertar todo lo que tú quieras:
		divisiones, tablas, listas, etc.</p>


    …lo guardaremos con el nombre de “contenido1.php”

  • Contenido del ITEM 2:

    
		<h2>Título del ítem 2</h2>
		<p>Aquí tenemos otra página que podría ser la segunda sección del website.</p>


    …guárdalo como “contenido2.php”

  • Contenido del ITEM 3:

    
		<h2>Título del ítem 3</h2>
		<p>…y esta otra, sería la tercera sección.</p>


    …guárdalo como “contenido3.php”.

  • Contenido del ITEM 4:

    
		<h2>Título del ítem 4</h2>
		<p>La página que ahora ves es la cuarta y última sección del website
		(tú puedes agregar tantas como quieras).</p>


    …guárdalo como “contenido4.php”.

  • Y finalmente el contenido de bienvenida de tu web:

    
		<h2>Hola!</h2>
		<p>Este es un demo de un website que utiliza <strong>includes</strong> de php.</p>
		<p>Puedes navegar a través de los diferentes ítems y comprobar que
		<strong>únicamente cambia el texto en la zona principal</strong>
		de la página, el resto de ella permanece intacto sin recargarse.</p>
		<p>Además, con ayuda de un sencillo archivo llamado <strong>.htaccess</strong>
		hemos creado url’s amigables (tanto para el usuario como para los buscadores)
		para cada página de tu web.</p>


    …guárdalo como “inicio.php”; éste es el contenido que se cargará por omisión en la página de inicio de tu web.

El script.

Ahora, regresemos a nuestro documento “index.php” donde crearemos el script de php que consistirá en:

<?php
apertura del script.

switch
evita que un simpático hacker incluya contenido no deseado.

case
indicará la acción a efectuar en cada caso.

include
aquí insertaremos el directorio del archivo a incluir.

default
determinará el archivo que se incluirá por omisión.

?>
indicará que el script ha llegado a su fin.

Lo insertaremos entre las etiquetas de nuestra zona principal (main), de tal forma que quede así:


<!– Principal –>

	<div id=”main”>

		 <?php
switch ($_GET[’go’])
{
 case 1:
	include(”contenido1.php”);
	break;
 case 2:
	include(”contenido2.php”);
	break;
 case 3:
	include(”contenido3.php”);
	break;
 case 4:
	include(”contenido4.php”);
	break;
 case 0:
default:
	include(”inicio.php”);
}
		?>

	</div>


Ahora solo tenemos que crear los enlaces en nuestro menú de navegación que activen cada caso del script. Por lo tanto, no especificaremos url’s normales, sino instrucciones en php.

<!– Cabecera –>

	<div id=”header”>

		<h1><a href=”index.php?go=0“>Tu Website</a></h1>

		<ul>
			<li><a href=”index.php?go=1“>ITEM 1</a></li>
			<li><a href=”index.php?go=2“>ITEM 2</a></li>
			<li><a href=”index.php?go=3“>ITEM 3</a></li>
			<li><a href=”index.php?go=4“>ITEM 4</a></li>
		</ul>

	</div>


Guarda los cambios de index.php y… ahí lo tienes! Tu página con includes funcionando. Ahora sólo nos queda “pulirla” en pro del posicionamiento y la usabilidad ;)

Apariencia del botón activo.

Este paso es realmente sencillo, solo requiere crear una nueva “clase” en nuestra hoja de estilos con los atributos que tu quieras. En el demo que viste, simplemente agregamos un margen superior y cambiamos el color del texto (de rojo a blanco) y la clase la llamamos “activo”. Entonces en nuestra hoja de estilos (estilos.css) agregaremos las siguientes líneas:


.activo{
	border-top: 1px solid #fff;
	color: white;}


Ahora, en nuestro documento “index.php” nos ubicaremos en el menú de navegación y daremos las instrucciones correspondientes en php para que al activarse un determinado caso en el script, aparezca la clase que acabamos de definir. Esto lo haremos con ayuda del condicional “if” y la función “echo” que se encargará de imprimir la clase en nuestro html.

<!– Cabecera –>

	<div id=”header”>

		<h1><a href=”index.php?go=0″>Tu Website</a></h1>

		<ul>
			<li><a <?php if($_GET[’go’]==1){echo ‘class=”activo”‘;}?> href=”index.php?go=1″>ITEM 1</a></li>
			<li><a <?php if($_GET[’go’]==2){echo ‘class=”activo”‘;}?> href=”index.php?go=2″>ITEM 2</a></li>
			<li><a <?php if($_GET[’go’]==3){echo ‘class=”activo”‘;}?> href=”index.php?go=3″>ITEM 3</a></li>
			<li><a <?php if($_GET[’go’]==4){echo ‘class=”activo”‘;}?> href=”index.php?go=4″>ITEM 4</a></li>
		</ul>

	</div>


Estas instrucciones puedes insertarlas en cualquiera de las etiquetas del html, no es necesario que se trate de un enlace para funcionar.

Title dinámico.

El nombre que deseamos que aparezca como “title” de cada página web lo definiremos en la url de cada enlace y luego crearemos una sencilla instrucción que los recoja y muestre. El nombre no debe contener espacios, en su lugar, puedes agregar guiones bajos que después eliminaremos.

<!– Cabecera –>

	<div id=”header”>

		<h1><a href=”index.php?go=0″>Tu Website</a></h1>

		<ul>
			<li><a <?php if($_GET[’go’]==1){echo ‘class=”activo”‘;}?> href=”index.php?go=1&title=Item_1“>ITEM 1</a></li>
			<li><a <?php if($_GET[’go’]==2){echo ‘class=”activo”‘;}?> href=”index.php?go=2&title=Item_2“>ITEM 2</a></li>
			<li><a <?php if($_GET[’go’]==3){echo ‘class=”activo”‘;}?> href=”index.php?go=3&title=Item_3“>ITEM 3</a></li>
			<li><a <?php if($_GET[’go’]==4){echo ‘class=”activo”‘;}?> href=”index.php?go=4&title=Item_4“>ITEM 4</a></li>
		</ul>

	</div>


La instrucción consistirá en crear una variable con el nombre de “$titulo” (el símbolo de dólar declara que se trata de una variable), la cual debemos definir con un valor. En este caso, será el mismo que especificamos en el atributo “title” en la url de nuestras páginas. La función “$_GET[’title’]” se encargará de recoger ese valor.

Los nombres recogidos serán impresos en nuestro html mediante la función “echo”, a la vez remplazaremos los guiones bajos por espacios con la ayuda de otra función llamada “str_replace” donde se define: 1.el símbolo a buscar, 2.el símbolo por el que será sustituido y 3. la frase original.

Insertemos, pues, estas instrucciones entre las etiquetas “title” en el HEAD de nuestro documento de la siguiente forma:

<head>
    <meta http-equiv=”Content-Type” content=”application/xhtml+xml; charset=UTF-8″ />
    <title>Mi Website. <?php $titulo=$_GET[’title’]; echo str_replace(”_” , ” ” , $titulo)?></title>
    <link rel=”stylesheet” href=”estilos.css” type=”text/css” />
</head>


Por cuestiones de identidad corporativa, es indicado que permanezca en primer lugar el nombre de tu website y después agregues el nombre de la sección donde se encuentra el usuario.

Url’s amigables con .htaccess

Con ayuda de un sencillo archivo llamado “.htaccess” es posible transformar nuestras url’s llenas de instrucciones de php, en url’s amigables que sean fácilmente memorizables y concuerden con el tema de la página. En un nuevo documento de tu editor, traduciremos nuestras url’s mediante una serie de reglas con la siguiente estructura:
“ RewriteRule ^nueva_url_amigable$ url_original [L] ”
de tal forma, que tu archivo lucirá como se muestra a continuación:


RewriteEngine On

RewriteRule ^index$ index.php?go=0 [L]
RewriteRule ^item1$ index.php?go=1&title=Item_1 [L]
RewriteRule ^item2$ index.php?go=2&title=Item_2 [L]
RewriteRule ^item3$ index.php?go=3&title=Item_3 [L]
RewriteRule ^item4$ index.php?go=4&title=Item_4 [L]


Guárdalo como .htaccess (tal cual, con el punto inicial, doble “c” y doble “s”!) en la misma carpeta donde hemos guardado todo.

Para que este archivo funcione, tenemos que activar el rewrite_module del Servidor Apache: simplemente dirígete al icono de Wamp icono de Wamp ubicado en la “barra de tareas” de Windows; da un clic sobre él y selecciona “Apache modules”. En la lista que se desplegará, verifica que esté activada (marcada con una flechita) la opción “rewrite_module”. Si no lo está, da un clic sobre ella para activarla.

Ahora solo nos resta cambiar las url’s en nuestros enlaces:


<!– Cabecera –>

	<div id=”header”>

		<h1><a href=”index“>Tu Website</a></h1>	

		<ul>
			<li><a <?php if($_GET[’go’]==1){echo ‘class=”activo”‘;}?> href=”item1“>ITEM 1</a></li>
			<li><a <?php if($_GET[’go’]==2){echo ‘class=”activo”‘;}?> href=”item2“>ITEM 2</a></li>
			<li><a <?php if($_GET[’go’]==3){echo ‘class=”activo”‘;}?> href=”item3“>ITEM 3</a></li>
			<li><a <?php if($_GET[’go’]==4){echo ‘class=”activo”‘;}?> href=”item4“>ITEM 4</a></li>
		</ul>

	</div>


Y eso es todo… terminamos!!!

Tu página puedes verla en tu localhost con la siguiente dirección:
http://localhost/includes_php/

y aquí tienes un ejemplo de cómo debió quedarte:
ver demo

Descárgate todos los archivos del tutorial.

Si te has perdido en algún paso o no te ha funcionado, puedes bajar todos los archivos comprimidos en formato .zip que hicimos a lo largo de este tutorial:

  • la página base index.php con su hoja de estilos,
  • los includes: contenido1.php, contenido2.php, contenido3.php, contenido4.php e inicio.php
  • y el archivo .htaccess

Esto fue todo, espero que este tutorial te haya sido útil!!!
No olvides dejar un comentario, duda, sugerencia… ;)
Hasta la próxima!

  • 31 Comments

    • Hola Mundo!

    Oct 16, 2007 Author: netizen.k81 | Filed under: 1. Planeación-Web, 2. Contenidos-Web, 3. Diseño-Web, 5. Hosting, 6. Mantenimiento-Web, 7. Posicionamiento-Web, 8. Rentabilidad-Web

    Bienvenido! Éste es el primero de muchos posts que vendrán, sobre temas que a todo webmaster de la generación “Web 2.0″ conciernen.

    Pero, qué es la Web 2.0??

    La Web 2.0, más allá de sus fines comerciales, es la realización de una filosofía que existe desde que Tim Bernes-Lee inventara la Web: convertir la “super-autopista de la Información”, Internet, en un lugar accesible para todos, donde todo aquél que tenga algo que decir o conocimiento que compartir, pueda publicarlo de una forma FÁCIL.

    Tim Berners-Lee
    Tim Berners-Lee, creador de la Web
    y actual dirigente de la W3C

    Es decir, la Web nace como territorio de todos y para todos, donde el lector (o consumidor de información) es a la vez protagonista y creador. Este ideal se solidifica gracias a la facilidad de uso de las nuevas tecnologías y al cambio de mentalidad del pequeño webmaster hasta las grandes corporaciones, cuando vieron morir el viejo esquema del consumidor pasivo, con el reventar de la “burbuja.com” a finales de los años 90. Justo después de este derrumbe resurge la Web bajo el concepto “2.0″ el cual rescata la finalidad inicial con la que fue creado este medio de comunicación.

    Qué encontrarás en este blog?

    Si cuentas con bases de diseño web y quieres implementar las ventajas de la Web 2.0 en tus websites o simplemente deseas optimizarlos, este blog es para ti!

    En el transcurso de estos días iré publicando tutoriales detallados paso a paso y totalmente ilustrados sobre los siguientes temas:

    1. Planeación de un website:
      • Cuáles son los alcances de la Web.
      • Cómo trazar los objetivos de un website.
      • Cuáles son las características de los usuarios de la Web.
      • Cómo determinar las especificaciones funcionales y los requerimientos tecnológicos de un website.
    2. Gestión y estructura de tus contenidos:
      • Arquitectura de la Información.
      • Diseño de Interacción.
      • Redacción para la Web.
    3. Diseño visual de tu website:
      • Principios de Diseño Gráfico.
      • Diseño optimizado de la interfaz del website.
      • Adobe Illustrator (imágenes vectoriales).
      • Photoshop (imágenes fotográficas).
      • Flash (animaciones multimedia).
    4. Desarrollo de tu website:
      • Xhtml (estructura).
      • Css (diseño visual).
      • JavaScript (comportamiento).
      • Ajax (comportamiento avanzado).
      • Php (interacción).
      • RoR (interacción).
    5. Mantenimiento de tu website:
      • Drupal (gestión del website).
      • Wordpress (gestión de blogs).
      • phpBB (gestion de foros).
      • Dreamweaver (editor gráfico de código).
    6. Alojamiento en la Red:
      • Cómo elegir un Hosting.
      • Seguridad en Redes.
    7. Posicionamiento en buscadores:
      • e-Marketing.
      • Técnicas SEO.
    8. Rentabilidad de tu website:
      • Formas de obtener dinero con tu web.
      • AdSense.

    Espero que te agraden, te sean útiles y sobretodo, que te la pases bien aprendiendo todos los tips y trucos que descubriremos juntos!

    Karen -netizen.k81-
    Creadora de Web 2.0 Fácil.

  • 3 Comments

    • Categories


    Archives


    Links


    Meta

    Advertising


    Most Popular

    Recent Comments

    Latest Entries

    Web 2.0 Fácil is proudly powered by WordPress-- Licencia Creative Commons.


    Gossip City Theme is created by: Design Disease brought to you by Celebrific.

    Banner