24May 2009 12 Comments */?>

DB.php : Como definir los parametros de conexión de tu base de datos

Categorías: MySQL, PHP, Tutoriales - Tags: , ,

En mis diseños siempre defino los valores de conexión a la base de datos en un archivo php llamado db.php  (database name, username, password, database host), de forma que cada vez que necesito conectarme tan solo tengo que hacer un include del mismo.

Una vez que tengamos creado nuestra base de datos a traves de phpMyAdmin o desde nuestro gestor en el hosting, tan solo tenemos que crear este archivo, que es muy sencillo y solo ocupa unas lineas.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<?
//datos de conexion que hay que editar con los que corresponda
$GLOBALS['DB_IP'] = 'localhost';
$GLOBALS['DB_USER'] = 'unnombredeusuario';
$GLOBALS['DB_PASS'] = 'unpassword';
$GLOBALS['DB_NAME'] = 'nombredelabasededatos';
 
//
// Funcion que vamos a usar para realizar la conexion (Acá no se edita nada)
//
function get_db_conn() {
$conn = mysql_connect($GLOBALS['DB_IP'], $GLOBALS['DB_USER'], $GLOBALS['DB_PASS']);
 
mysql_select_db($GLOBALS['DB_NAME'], $conn);
if (!$conn) {
echo "No pudo conectarse a la BD: " . mysql_error();
exit;
}
 
return $conn;
}
?>

Con eso ya tendriamos los datos de conexión listos, aunque yo siempre agrego una pequeña funcion para proteger los datos de inyección SQL (o como dicen en ingles SQL INJECTIONS).Por lo que me aseguro que cada vez que carga una conexion , cargo también la funcion que me va a ayudar a protegerme.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//PARA PROTEGER SQL INJECT
function cleanQuery($string){
 
if(get_magic_quotes_gpc())   {
 
$string = stripslashes($string);
}
if (phpversion() >= '4.3.0') {
 
$string = mysql_real_escape_string($string);
}
else {
 
$string = mysql_escape_string($string);
}
return $string;
}

Por lo tanto nuestro archivo db.php queria de la siguiente manera:

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
33
34
35
36
37
38
39
40
 
<?
$GLOBALS['DB_IP'] = 'localhost';
$GLOBALS['DB_USER'] = 'unnombredeusuario';
$GLOBALS['DB_PASS'] = 'unpassword';
$GLOBALS['DB_NAME'] = 'nombredelabasededatos';
 
//
// Database queries
//
function get_db_conn() {
$conn = mysql_connect($GLOBALS['DB_IP'], $GLOBALS['DB_USER'], $GLOBALS['DB_PASS']);
 
mysql_select_db($GLOBALS['DB_NAME'], $conn);
if (!$conn) {
echo "No pudo conectarse a la BD: " . mysql_error();
exit;
}
 
return $conn;
}
 
//PARA PROTEGER SQL INJECT
function cleanQuery($string)
{
if(get_magic_quotes_gpc())  // prevents duplicate backslashes
{
$string = stripslashes($string);
}
if (phpversion() >= '4.3.0')
{
$string = mysql_real_escape_string($string);
}
else
{
$string = mysql_escape_string($string);
}
return $string;
}
?>

Una vez armado el db.php , solo nos queda incluirlo en nuestras páginas. y lo haremos de la siguiente manera:

1
<?php include('config.php'); ?>

Una vez incluido nuestro archivo podemos realizar una nueva conexión de la siguiente forma:

1
2
//Creamos la variable $conn y le asignamos la conexión a la base de datos
$conn=get_db_conn();

La función cleanQuery la vamos a usar para “limpiar” las variables. Si juntamos todo los visto anteriormente y suponiendo que tenemos un archivo llamado busquedas.php al cual le pasamos una variable $_GET[‘pelicula’] podriamos dejar el código de la siguiente manera:

EJ:busquedas.php?pelicula=killBill

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<?php
include('config.php');
$conn=get_db_conn();
 
$nombrePelicula= cleanQuery($_GET['pelicula']);
 
$consulta="SELECT * FROM peliculas WHERE nombre='$nombrePelicula'";
 
$peliculas=mysql_query($consulta, $conn);
 
if(!$peliculas){
 die('Invalid query: ' . mysql_error());
}else{
  //la consulta se ejecuto correctamente y mostramos los datos
   ?> <table><thead>
        <tr><th>Título</th><th>Director</th><th> Año de producción</th></tr>
        </thead>
        <tbody>
    <? while($row = mysql_fecth_assoc($peliculas)){  ?>
        <tr><td><? echo $row['nombre']; ?> </td><td> <? echo $row['director']; ?> </td><td> <?echo $row['año']; ?> </td></tr>
       <?  } ?>
      </tbody>
      </table>

Esta sería la forma sencilla de configurar las conexiones a una base de datos. Por favor comenten cualquier duda que vaya surgiendo. Un Saludo

Descargar db.php

21May 2009 0 Comments */?>

Introducción a AJAX, Javascript, CSS, XHTML

Categorías: Recursos - Tags: , , , ,

Hoy les traigo una página que me ayudo mucho en mis comienzos. Estoy hablando de Librosweb, en ella podemos encontrar una serie de PDFs escritos en su mayoria por profesores con los contenidos que imparten en sus cursos.

Los libros son totalmente gratuitos y se pueden leer en la web o descargarlos. La verdad que estan muy bien como complemento y referencia, la mayoria incluye ejemplos y ejercicios para ir practicando a medida que se aprende.

Acá les dejo el listado completo:

Programación web

Introducción a AJAX :

  • Comenzando desde cero y llegando hasta las técnicas más avanzadas.
  • Incluye Google Maps, Prototype, jQuery y decenas de ejemplos.

Empezar a leerlo

Introducción a JavaScript :

  • Creado para diseñadores web sin experiencia en programación.
  • Aprende a manejar eventos, validar formularios y crear otras utilidades comunes.

Empezar a leerlo

Diseño web

Introducción a CSS :

  • Guía completa para aplicar estilos a las páginas web.
  • Incluye las propiedades de CSS 2.1 y decenas de ejemplos.

Empezar a leerlo

CSS avanzado :

  • Técnicas imprescindibles como sustitución de texto, sprites, sombras y transparencias
  • Buenas prácticas y recomendaciones de los mejores diseñadores
  • Frameworks CSS y diseño de páginas con YUI
  • Referencia imprescindible para diseñadores web avanzados

Empezar a leerlo

Referencia de CSS 2.1 :

  • Las 115 propiedades de CSS 2.1 explicadas detalladamente
  • Incluye más de 300 ejemplos originales

Empezar a leerlo

Introducción a XHTML :

  • Guía completa para crear páginas web, con más de 60 ejemplos.
  • Aprende cómo crear páginas web accesibles y que validen.

Empezar a leerlo

21May 2009 3 Comments */?>

Como instalar apache + php + mysql + phpMyAdmin en windows

Categorías: Tutoriales, Windows - Tags: , , , ,

AppServ es un software que nos permite instalar sobre Windows: Apache, PHP, MySQL y phpMyAdmin (interfaz gráfica para adminsitrar MySQL) de forma conjunta. Es una aplicación muy útil porque en unos pocos pasos podemos tener un servidor corriendo y listo para hacer pruebas. Así que no nos va a hacer falta contratar un servidor , dominio, etc..

Home Page Appserv

Home Page Appserv

Esta es la forma más facil de diseñar sin tener que estar subiendo archivos a tu servidor, ya que una vez que tenemos todo listo lo subimos y punto.

Para instalar AppServ tenemos que seguir los siguientes pasos:

  • En primer lugar descargamos el último paquete desde SourceForge
  • Una vez descargado el ejecutable procedemos a ejecutar la instalación, vamos a ver el  mensaje de bienvenida y hacemos Click en Next
  • Directorio de Instalación: en esta pantalla nos solicita el directorio en el que queremos instalar la aplicación, por defecto nos marca “c:/appserv”, lo cambiamos si queremos y pulsamos Next.
  • Tipo de Instalación: Elegimos Typical.
  • Server Information: La casilla Server Name la dejamos como viene por defecto con “Localhost” y en la casilla Administrator E-mail Address o lo dejamos como viene por defecto y luego lo cambiamos, o le introducimos una cuenta de correo que sera la del administrador. El campo “HTTP Port” lo dejamos como viene por defecto (80), salvo que queramos que el servidor atienda les peticiones en otro puerto. Pulsamos en Next
  • MySql Information: Este es uno de los apartados más importantes ya que empezamos a instalar MySQL. En la casilla Username introduciremos el nombre del administrador de la base de datos y en la casilla Password le introducimos la contraseña, aunque si queremos hacerlo más fácil ponemos como usuario: root y el apartado contraseña lo dejamos vacio ya que posteriormente podemos cambiarlo con phpMyAdmin. El apartado Charset lo dejamos tal como viene por defecto. Pulsamos en Next
  • Progreso de la instalación: Empieza realmente la instalación mostrandonos una barra de progreso hasta que aparece una pantalla que nos avisa de que ha finalizado la misma, debiendo dejar marcadas las opciones que vienen por defecto. Finalmente pulsamos en Close.
  • Comprobación de la instalación: Si hemos hecho bien los deberes al poner en nuestro navegador: http://localhost nos debe aparecer la pantalla de AppServ Open Project con algunos link como el phpInfo o a phpmyadmin

Si esta pantalla no aparece supone que bien Apache o MySQL no están funcionado bien, y debemos volver a instalarlo.

Y por ultimo nos queda empezar a diseñar nuestros archivos html ,php, etc y poder practicar un poco en nuestra maquina local antes de lanzarnos a internet.

19May 2009 1 Comment */?>

100 Diseños gratuitos para WordPress

Categorías: Recursos, Wordpress - Tags: , , , ,
"Irresistible" Theme

"Irresistible" Theme

De todos es sabido que WordPress es uno de los sistemas más utilizados por los bloggers de hoy en día , no solo por su simplicidad, sino también por la gran comunidad de usuarios que colabora con cientos de plugins y modificaciones para mejorarlo.
Actualmente en la red se pueden encontrar miles de diseños profesionales WordPress por un precio más que accesible. Pero que pasa con los que recién empezamos y no tenemos tiempo o sencillamente dinero para gastar en un “theme” decente para nuestro blog? Simplemente ya no tenemos que preocuparnos, los chicos de Smashing Magazine han echo un recopilatorio de 100 diseños gratuitos y absolutamente impresionantes que podremos descargar y utilizar sin ningun inconveniente.

Y si no encontrás lo que buscás , porque no te pasás por el recopilatorio del 2008 donde hay otros 100!!!.

14May 2009 2 Comments */?>

Introducción a JQuery

Categorías: JQuery, Tutoriales - Tags: , , ,

Hola a todos, les quiero dar la bienvenida a mi blog. Mi nombre es Damián , soy técnico informático y ultimante más diseñador/programador web que otra cosa. En el blog solo pretendo poner algun que otro ejemplo de problemas que me encuentro dia a dia a la hora de hacer una página web. Más que nada serán ayudas para algunos y a mi personalmente me servirá de cuaderno de anotaciones por si algun día topo otra vez con el mismo problema.

No esperen actualizaciones diarias ni mucho menos , porque últimamente ando fatal de tiempo. Eso sí en la medida de lo posible pondre utilidades , recursos, noticias y lo que vaya encontrando por internet.

Una vez hecha las presentaciones, empiezo a explicar un poco de que trata JQuery.

Para simplificar, podríamos decir que jQuery es un framework o librería para Javascript(para el que no sabe aun que es Javascript , le recomiendo empezar con este libro) que simplemente nos hace la vida más fácil en todos los sentidos, haciendonos así ahorrar código y tiempo.

Por poner un ejemplo digamos que tenes el siguiente campo de texto:

<input id="campo1" name="campo1" type="text" value="Esto es un campo de texto" />

Para seleccionar el valor de este campo con Javascript seria de la siguiente forma:

1
2
3
//Mediante su id
 
document.getElementById("campo1").value();

Esto mismo con JQuery lo hariamos de la siguiente manera:

1
2
3
//Mediante su id
 
$('#campo1').text();

Como pueden apreciar se ahorra mucho código para un operación tan sencilla como esa. Existen muchas otras formas de seleccionar un objeto:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
//Todos los objetos de una misma clase
 
$(" .nombreDeLaClase")
 
//Todos los div de la clase .noticias
 
$("div .noticas")
 
//Todos los link
$("a")
 
//Todos los elementos del tipo x hijos del elemento tipo y
 
$("y &gt;x")

Y como esto muchos más. Acá podes encontrar una lista completa de selectores.

También podemos manejar todos los eventos tales como click , onmouseover, blur, focus , ….etc . Se podria decir que el más importante que vamos a usar es el evento ready.

El evento ready sirve para ejecutar una función cuando termine de cargar el DOM de la página , tal y como hace su homólogo “window.onload=” en Javascript. La única (y más importante) diferencia es que mientras en Javascript solo podemos llamar a este evento para una sola función , con JQuery podremos ejecutar todas las funciones que querramos.

Veamos un ejemplo de como asignar un evento click a un enlace una vez que la página cargue todos los elementos:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
//La forma es la siguiente $(document).ready(function () {...funciones... });
//Para nuestro ejemplo asignaremos un evento click al enlance para que cambie de color un div asignado
 
//codigo Javascript que usualmente se coloca antes de la etiqueta
<script src="js/jquery-latest.js" type="text/javascript"></script> <script type="text/javascript"><!--
$(document).ready(function () {
                           $("#link_color").click( function(){
                                               $("#div_colores").css("background-color","red");
                            });
});
// --></script>
 
//Codigo HTML del ejemplo
 
<input type="button" value="Cambiar a rojo" id="link_color">
<div id="div_colores" style="width: 50px; height: 50px; background-color: #191919;"></div>

Ejecutar ejemplo 1

Ahora por ejemplo si quisieras crear un botón que alterne dos colores podriamos usar la función toggle de la siguiente manera:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//codigo Javascript que usualmente se coloca antes de la etiqueta
<script src="js/jquery-latest.js" type="text/javascript"></script> <script type="text/javascript"><!--
$(document).ready(function () {
                           $("#link_color").toggle(
                                         function(){
                                               $("#div_colores").css("background-color","red");
                                        },
                                        function(){
                                               $("#div_colores").css("background-color","green");
                                        }
                          );
});
// --></script>
 
//Codigo HTML del ejemplo
 
<input type="button" value="Cambiar color" id="link_color2">
<div id="div_colores" style="width: 50px; height: 50px; background-color: #191919;"></div>

Ejecutar ejemplo 2

Como hemos visto además del manejar los eventos podemos acceder a los estilos de una forma muy facil:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
//Para añadir una clase
$("#div_colores").addClass("nombreclase");
 
//Para quitar una clase
$("#div_colores").removeClass("nombreclase");
 
//Para cambiar multiple propiedades css
$("#div_colores").css({"width":"120px","height":"20px"});
 
 
      var cssObj = {
        'background-color' : '#ddd',
        'font-weight' : '',
        'color' : 'rgb(0,40,244)'
      }
   $('#div_colores').css(cssObj);
 
//Para cambiar una sola propiedad
  $('#div_colores').css("color","red");

Veamos otro ejemplo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 $("p").hover(function () {
      $(this).css({'background-color' : 'yellow', 'font-weight' : 'bolder'});
    }, function () {
      var cssObj = {
        'background-color' : '#ddd',
        'font-weight' : '',
        'color' : 'rgb(0,40,244)'
      }
      $(this).css(cssObj);
    });
 
//codigo html
<p>
    Pasa el rator por encima
  </p>
  <p>
   O pasalo por aca.
  </p>

Ejecutar ejemplo 3

Y para terminar por hoy vamos a ver una de las cosas más atractivas de JQuery y un motivo por el cual la mayoría de nosotros empezamos a utilizarlo. Hablo de los efectos

Hay un monton de efectos , y si no encontramos el que queremos seguro que alguien habrá echo un plugin que lo traiga.

Para los efectos mejor veamos el Ejemplo 4 directamente.

Eso es todo para empezar. Espero que haya servido de ayuda. Saludos

Descargar ejemplo

01May 2009 7 Comments */?>

Introducción al diseño web con PHP + CSS – Parte III –

Categorías: Tutoriales - Tags: , ,

En el primer post vimos como sería la estructura básica de una web y su correspondiente código HTML. En el segundo tutorial le aplicamos estilo mediante CSS y le añadimos una barra de navegación.

Bien , en esta última parte del tutorial vamos a ver como vamos a ir cargando las diferentes “secciones” de la web en lo que sería la columna izquierda de nuestra web. Para ello necesitamos comprobar el valor de la variable $_GET[‘page’] y segun sea su valor cargar un contenido u otro. Para ello hacemos lo siguiente:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
       <?php
//Este código lo ponemos dentro del div column_left que es el contenido que vamos a ir cambiando.
//Se comprueba que la variable page esta creada y su valor
if(isset($_GET['page']) && $_GET['page']=='registrarse'){
// include registrarse
include('include/in-registrar.php');
//Si no , se comprueba el valor nuevamente
} elseif(isset($_GET['page']) && $_GET['page']=='login'){
// include login
include('include/in-login.php');
//Si no , se comprueba el valor nuevamente
} elseif(isset($_GET['page']) && $_GET['page']=='contacto'){
// include contacto
include('include/in-contacto.php');
// En cualquier otro caso , mostramos el home
} else {
include('include/in-home.php');
}
?>

Con esto tendriamos la web casi echa, con una columna derecha fija y la parte izquierda dinámica. Podriamos añadir un poquito más de estilo CSS para darle forma, resultando nuestro archivo final asi:

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
33
34
35
36
37
38
39
40
41
42
43
/* ------------------------------
Estructura de la página
------------------------------ */
 
/*
#container tiene un ancho absoluto de 780 pixeles.
El ancho de los elentos internos estan establecidos a auto,
por lo que todos tendrán el ancho del elemento contenedor.
*/
#container{width:780px; margin:0 auto;
border:7px solid #CCCCCC;
padding:20px;
}
p{
font:11px Verdana;
text-align:justify;
}
/***************Header**********************/
#topbar{width:auto; display:block; height:80px;
border:1px solid #191919;
}
                 /****Barra de navegación*****/
#navbar{width:auto; display:block; height:24px;}
#navbar ul, #navbar ul li{padding:0; margin:0; list-style:none; float:left;}
#navbar a{color:#FFFFFF; font-weight:bold;}
#navbar a:hover{color:red;}
#navbar li a:link, #navbar li a:visited {background:#444444; text-decoration:none; height:24px; line-height:24px; display:inline; float:left; width:auto; padding:0px 10px;}
 
/***************Contenido principal************/
#main{width:auto; display:block;}
#column_left{width:560px; margin-right:20px; float:left;}
#column_right{width:200px; float:left;}
 
/*
div.spacer, soluciona el alto de #main en diseños con 2 columnas
*/
div.spacer{clear:both; height:10px; display:block;}
 
/***************footer*********************/
#footer{width:auto; display:block; height:24px;
border-top:1px solid;
text-align:center;
}

Y el código HTML de la siguiente 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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio nal.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 
<link href="css/default.css" rel="stylesheet" type="text/css" />
<title>page title</title>
</head>
 
<body>
<div id="container">
               <div id="topbar"> ...Contenido del topbar donde podemos poner un logo por ej </div>
               <div id="navbar"><ul>
                                            <li><a href="index.php?page=home"> Home</a></li>
                                            <li><a href="index.php?page=registrarse"> Registrarse </a></li>
                                            <li><a href="index.php?page=login"> Login</a></li>
                                            <li><a href="index.php?page=contacto"> Contacto</a></li>
                                            </ul>
                </div>
<!-- Sección principal en la cual cargaremos las páginas usando variables URL y la función de PHP include() -->
               <div id="main">
                     <div id="column_left"> 
                     <?php
//Este código lo ponemos dentro del div column_left que es el contenido que vamos a ir cambiando.
//Se comprueba que la variable page esta creada y su valor
if(isset($_GET['page']) && $_GET['page']=='registrarse'){
// include registrarse
include('include/in-registrar.php');
//Si no , se comprueba el valor nuevamente
} elseif(isset($_GET['page']) && $_GET['page']=='login'){
// include login
include('include/in-login.php');
//Si no , se comprueba el valor nuevamente
} elseif(isset($_GET['page']) && $_GET['page']=='contacto'){
// include contacto
include('include/in-contacto.php');
// En cualquier otro caso , mostramos el home
} else {
include('include/in-home.php');
}
?>
                     </div>
                     <div id="column_right"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></div>
<!--  Esta sección soluciona un problema con el diseño CSS, forzando la altura de la sección main a ocupar la misma altura que las dos columnas(#columnt_left and #column_right) -->
                     <div class="spacer"></div>
<!-- close #main content -->
                </div>
<!-- close #container -->
    <div id="footer"> Ejemplo realizado para <a href="http://masquewordpress.com">Timersys</a>. </div>
</div>
</body>
</html>

Bueno , espero que esto les haya servido de ayuda. Porfavor comentes si ven algun que otro error o quieren cambiar algo.
Ejemplo online
Descargar ejemplo

29Abr 2009 2 Comments */?>

Introducción al diseño web con PHP + CSS – Parte II –

Categorías: Tutoriales - Tags: , ,

En el primer artículo vimos como quedaria la estructura de index.php mediante código html y explique un poco las diferentes secciones que tendrá la página web.

En este tutorial vamos a dar forma a esta estructura mediante una hoja de estilo en cascada o como mayormente conocemos , una hoja CSS.

Lo primero que tenemos que hacer es crear un archivo .css que en este caso le voy a poner default.css. Una vez creado lo guardamos en la carpeta CSS de nuestro sitio web. En default.css vamos a definir la estructura de la siguiente 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
/* ------------------------------
Estructura de la página
------------------------------ */
 
/*
#container tiene un ancho absoluto de 780 pixeles.
El ancho de los elentos internos estan establecidos a auto,
por lo que todos tendrán el ancho del elemento contenedor.
*/
#container{width:780px; margin:0 auto;}
 
/***************Header**********************/
#topbar{width:auto; display:block; height:80px;}
#navbar{width:auto; display:block; height:24px;}
/***************Contenido principal************/
#main{width:auto; display:block;}
#column_left{width:560px; margin-right:20px; float:left;}
#column_right{width:200px; float:left;}
 
/*
div.spacer, soluciona el alto de #main en diseños con 2 columnas
*/
div.spacer{clear:both; height:10px; display:block;}
 
/***************footer*********************/
#footer{width:auto; display:block; height:24px;}

Como pueden ver los comentarios en CSS a diferencia de html se encierran entre /* …… y….. */

Una vez guardado nuestro archivo default.css solo nos queda linkearlo a nuestro index.php

link_css

Para ello introducimos dentro de las etiquetas <head </head> el siguiente código:

<link href="css/default.css" rel="stylesheet" type="text/css" />

Añadiendo los links a la barra de navegación

Para la barra de navegación vamos a usar una lista , y cada elemento de la lista será un link.

1
2
3
4
5
6
7
 
<ul>
<li><a href="index.php?page=home">Home</a></li>
<li><a href="index.php?page=registrarse">Registrarse</a></li>
<li><a href="index.php?page=login">Login</a></li>
<li><a href="index.php?page=contacto">Contácto</a></li>
</ul>

El código CSS para el navbar sería:

1
2
3
4
#navbar ul, #navbar ul li{padding:0; margin:0; list-style:none; float:left;}
#navbar a{color:#FFFFFF; font-weight:bold;}
#navbar a:hover{background:#777777;}
#navbar li a:link, #navbar li a:visited {background:#444444; text-decoration:none; height:24px; line-height:24px; display:inline; float:left; width:auto; padding:0px 10px;}

Por lo que el código completo quedaría de la siguiente 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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio nal.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
//ARCHIVO CSS AÑADIDO
<link href="css/default.css" rel="stylesheet" type="text/css" />
<title>page title</title>
</head>
 
<body>
<div id="container">
               <div id="topbar"> ...Contenido del topbar... </div>
               <div id="navbar"><ul>
                                            <li><a href="index.php?page=home"> Home</a></li>
                                            <li><a href="index.php?page=registrarse"> Registrarse </a></li>
                                            <li><a href="index.php?page=login"> Login</a></li>
                                            <li><a href="index.php?page=contacto"> Contácto</a></li>
                                            </ul>
                </div>
<!-- Sección principal en la cual cargaremos las páginas usando variables URL y la función de PHP include() -->
               <div id="main">
                     <div id="column_left"> ...Contenido columna izq... </div>
                     <div id="column_right"> ...Contenido columna der... </div>
<!--  Esta sección soluciona un problema con el diseño CSS, forzando la altura de la sección main a ocupar la misma altura que las dos columnas(#columnt_left and #column_right) -->
                     <div class="spacer"></div>
<!-- close #main content -->
                </div>
<!-- close #container -->
                 <div id="footer"> Ejemplo realizado para <a href="http://masquewordpress.com">Timersys</a>. </div>
</div>
</body>
</html>

Y el código CSS completo sería el siguiente:

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
/* ------------------------------
Estructura de la página
------------------------------ */
 
/*
#container tiene un ancho absoluto de 780 pixeles.
El ancho de los elentos internos estan establecidos a auto,
por lo que todos tendrán el ancho del elemento contenedor.
*/
#container{width:780px; margin:0 auto;}
 
/***************Header**********************/
#topbar{width:auto; display:block; height:80px;}
                 /****Barra de navegación*****/
#navbar{width:auto; display:block; height:24px;}
#navbar ul, #navbar ul li{padding:0; margin:0; list-style:none; float:left;}
#navbar a{color:#FFFFFF; font-weight:bold;}
#navbar a:hover{background:#777777;}
#navbar li a:link, #navbar li a:visited {background:#444444; text-decoration:none; height:24px; line-height:24px; display:inline; float:left; width:auto; padding:0px 10px;}
 
/***************Contenido principal************/
#main{width:auto; display:block;}
#column_left{width:560px; margin-right:20px; float:left;}
#column_right{width:200px; float:left;}
 
/*
div.spacer, soluciona el alto de #main en diseños con 2 columnas
*/
div.spacer{clear:both; height:10px; display:block;}
 
/***************footer*********************/
#footer{width:auto; display:block; height:24px;}

En el próximo tutorial les explico como cargar las páginas con la función include() de PHP. Saludos!!