Posts Tagged PHP
Posted on May 28, 2010 by Damian
Hola a todos!! En este post no voy a explicar ningun plugin , ni hablar de JQuery , ni juegos , ni nada. Tan solo les quiero preguntar a ustedes, mis lectores ¿Que necesitan?
Si hace tiempo que buscan algun tutorial o tienen visto alguno que no deja de todo claro las cosas. Encontraron un plugin raro de JQuery y no le sacan la vuelta a como usarlo. No entienden bien algun tema de PHP o Mysql. Hoy están de suerte, dejen en los comentarios que necesitan y si puedo los iré ayudando.
Eso es todo , un saludo!!!
Posted on May 25, 2009 by Damian
En este tutorial les voy a enseñar el método que utilizo para hacer paginación en mis diseños.Pero para empezar ¿A que se le llama paginación? Esto es simplemente el índice que aparece abajo del todo que algunas veces contiene números y otras no, y nos sirve para cambiar de página. Es muy útil cuando tenemos muchos datos para mostrar y ya resulta feo que aparezca todo en la misma página.
Típica estructura:
La estructura más comun suele contar con 2 botones (Previous y next) más otros tantos con los números de las páginas que tengamos(variable segun la cantidad de datos). El número resaltado indica en que página nos encontramos actualmente , y si no hay más páginas hacia abajo o hacia arriba se deshabilitaran los botones de Previous y Next respectivamente. Por último tenemos el selector de números que nos permitira saltar directamente a cualquier página sin necesidad de pasar una a una.
Para diseñar esta estructura usaremos una lista HTML (<ul>) que a su vez contendra tantos elementos de lista (<li>) como sea necesario. A cada lista le vamos a asignar un ID que definirá su estilo. A continuación paso a explicar más detalladamente.
Paginación al estilo de Flickr:
En este caso vamos a diseñar la paginación al estilo de Flickr y se verá del siguiente modo:
El código HTML que vamos a usar es muy simple y nos servira como esqueleto para cualquier estilo , ya que solo necesitaremos cambiar el ID de la lista que en el siguiente caso será “pagination-flickr”.
<ul id="pagination-flickr">
<li class="previous-off">«Previous</li>
<li class="active">1</li>
<li><a href="?page=2">2</a></li>
<li><a href="?page=3">3</a></li>
<li><a href="?page=4">4</a></li>
<li><a href="?page=5">5</a></li>
<li><a href="?page=6">6</a></li>
<li><a href="?page=7">7</a></li>
<li class="next"><a href="?page=8">Next »</a></li>
</ul>
Ahora solo nos queda agregar el código CSS para darle estilo a nuestra lista:
/* -------------------------------------------- */
/* ------------- Pagination: Flickr ----------- */
/* -------------------------------------------- */
ul { border:0; margin:0; padding:0; }
#pagination-flickr li { border:0; margin:0; padding:0; font-size:11px; list-style:none; /* savers */ float:left; }
#pagination-flickr a { border:solid 1px #DDDDDD; margin-right:2px; }
#pagination-flickr .previous-off,
#pagination-flickr .next-off { color:#666666; display:block; float:left; font-weight:bold; padding:3px 4px; }
#pagination-flickr .next a,
#pagination-flickr .previous a { font-weight:bold; border:solid 1px #FFFFFF; }
#pagination-flickr .active { color:#ff0084; font-weight:bold; display:block; float:left; padding:4px 6px; }
#pagination-flickr a:link,
#pagination-flickr a:visited { color:#0063e3; display:block; float:left; padding:3px 6px; text-decoration:none; }
#pagination-flickr a:hover { border:solid 1px #666666; }
Paginación al estilo de DIGG:
La estructura como pueden ver es la misma. Solo cambiamos el atributo ID de la lista.
<ul id="pagination-digg">
<li class="previous-off">«Previous</li>
<li class="active">1</li>
<li><a href="?page=2">2</a></li>
<li><a href="?page=3">3</a></li>
<li><a href="?page=4">4</a></li>
<li><a href="?page=5">5</a></li>
<li><a href="?page=6">6</a></li>
<li><a href="?page=7">7</a></li>
<li class="next"><a href="?page=8">Next »</a></li>
</ul>
Y nuevamente añadiremos el estilo correspondiente. Como vereis los elementos son los mismos, solo cambiamos algunos atributos:
/* -------------------------------------------- */
/* ----------- Pagination: Digg Style --------- */
/* -------------------------------------------- */
ul { border:0; margin:0; padding:0; }
#pagination-digg li { border:0; margin:0; padding:0; font-size:11px; list-style:none; /* savers */ float:left; }
#pagination-digg a { border:solid 1px #9aafe5; margin-right:2px; }
#pagination-digg .previous-off,
#pagination-digg .next-off { border:solid 1px #DEDEDE; color:#888888; display:block; float:left; font-weight:bold; margin-right:2px; padding:3px 4px; }
#pagination-digg .next a,
#pagination-digg .previous a { font-weight:bold; }
#pagination-digg .active { background:#2e6ab1; color:#FFFFFF; font-weight:bold; display:block; float:left; padding:4px 6px; /* savers */ margin-right:2px; }
#pagination-digg a:link,
#pagination-digg a:visited { color:#0e509e; display:block; float:left; padding:3px 6px; text-decoration:none; }
#pagination-digg a:hover { border:solid 1px #0e509e; }
Estilo de paginación limpio:
Para crear un estilo un poco más limpio y menos cargado podemos usar el siguiente codigo CSS. Recordar que tienen que cambiar el ID del elemento <ul> por “pagination-clean” :
/* -------------------------------------------- */
/* ------------- Pagination: Clean ------------ */
/* -------------------------------------------- */
#pagination-clean li { border:0; margin:0; padding:0; font-size:11px; list-style:none; /* savers */ float:left; }
/* savers #pagination-clean li,*/
#pagination-clean a { border-right:solid 1px #DEDEDE; margin-right:2px; }
#pagination-clean .previous-off,
#pagination-clean .next-off { color:#888888; display:block; float:left; font-weight:bold; padding:3px 4px; }
#pagination-clean .next a,
#pagination-clean previous a { border:none; font-weight:bold; }
#pagination-clean .active { color:#000000; font-weight:bold; display:block; float:left; padding:4px 6px; /* savers */ border-right:solid 1px #DEDEDE; }
#pagination-clean a:link,
#pagination-clean a:visited { color:#0e509e; display:block; float:left; padding:3px 6px; text-decoration:underline; }
#pagination-clean a:hover { text-decoration:none; }
Con esto ya tenemos unas listas y su correspondientes estilos para que nuestra paginación quede de una forma profesional. El siguiente paso es añadir el codigo PHP necesario para crear el índice de acuerdo a la cantidad de datos que tengamos y poder así modificar la consulta SQL para que nos muestre ciertos resultados. Para las conexiones a la base de datos voy a seguir los pasos descritos en este artículo.
Para empezar necesitamos hacer 2 consultas SQL en lugar de 1. La primera va a ser para recuperar TODOS los datos y asi poder calcular cuantas páginas vamos a necesitar. La segunda consulta va a mostrar un rango de resultados según en que página estemos.
Por ejemplo digamos que queremos mostrar una tabla con datos de películas donde nos muestre el nombre de la película, el año de creación , etc. La tabla SQL esta compuesto por los siguientes campos: idPelicula(int(5)), nombre(VARCHAR(150)), director(VARCHAR(100)), anio(DATE).
A continuación como seria el código:
<?php
//INCLUYO LA HOJA DE ESTILOS
?>
<link href="css/paginacion.css" type="text/css" rel="stylesheet">
<?
include('config/db.php');
$conn=get_db_conn
();
//AL PRINCIPIO COMPRUEBO SI HICIERON CLICK EN ALGUNA PÁGINA
if(isset($_GET['page'])){
$page= $_GET['page'];
}else{
//SI NO DIGO Q ES LA PRIMERA PÁGINA
$page=1;
}
//ACA SE SELECCIONAN TODOS LOS DATOS DE LA TABLA
$consulta="SELECT * FROM peliculas";
$datos=mysql_query($consulta,$conn);
//MIRO CUANTOS DATOS FUERON DEVUELTOS
$num_rows=mysql_num_rows($datos);
//ACA SE DECIDE CUANTOS RESULTADOS MOSTRAR POR PÁGINA , EN EL EJEMPLO PONGO 15
$rows_per_page= 15;
//CALCULO LA ULTIMA PÁGINA
$lastpage= ceil($num_rows / $rows_per_page);
//COMPRUEBO QUE EL VALOR DE LA PÁGINA SEA CORRECTO Y SI ES LA ULTIMA PÁGINA
$page=(int
)$page;
if($page > $lastpage){
$page= $lastpage;
}
if($page < 1){
$page=1;
}
//CREO LA SENTENCIA LIMIT PARA AÑADIR A LA CONSULTA QUE DEFINITIVA
$limit= 'LIMIT'. ($page -1) * $rows_per_page . ',' .$rows_per_page;
//REALIZO LA CONSULTA QUE VA A MOSTRAR LOS DATOS (ES LA ANTERIO + EL $limit)
$consulta .=" $limit";
$peliculas=mysql_query($consulta,$conn);
if(!$peliculas){
//SI FALLA LA CONSULTA MUESTRO ERROR
die('Invalid query: ' . mysql_error());
}else{
//SI ES CORRECTA MUESTRO 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_fetch_assoc($peliculas)){ ?>
<tr><td>
<? echo $row['nombre']; ?> </td><td>
<? echo $row['director']; ?> </td><td>
<?echo $row['anio']; ?> </td></tr>
<? } ?>
</tbody>
</table>
<?
//UNA VEZ Q MUESTRO LOS DATOS TENGO Q MOSTRAR EL BLOQUE DE PAGINACIÓN SIEMPRE Y CUANDO HAYA MÁS DE UNA PÁGINA
if($numrows != 0){
$nextpage= $page +1;
$prevpage= $page -1;
?><ul id="pagination-digg">
<?
//SI ES LA PRIMERA PÁGINA DESHABILITO EL BOTON DE PREVIOUS, MUESTRO EL 1 COMO ACTIVO Y MUESTRO EL RESTO DE PÁGINAS
if ($page == 1) {
?>
<li class="previous-off">« Previous</li>
<li class="active">1</li>
<?
for($i= $page+1; $i<= $lastpage ; $i++){?>
<li><a href="busquedas.php?page=
<? echo $i;?>">
<? echo $i;?></a></li>
<? }
//Y SI LA ULTIMA PÁGINA ES MAYOR QUE LA ACTUAL MUESTRO EL BOTON NEXT O LO DESHABILITO
if($lastpage >$page ){?>
<li class="next"><a href="busquedas.php?page=
<? echo $nextpage;?>" >Next »</a></li>
<?
}else{?>
<li class="next-off">Next »</li>
<? }
} else {
//EN CAMBIO SI NO ESTAMOS EN LA PÁGINA UNO HABILITO EL BOTON DE PREVIUS Y MUESTRO LAS DEMÁS
?>
<li class="previous"><a href="busquedas.php?page=
<? echo $prevpage;?>" >« Previous</a></li>
<?
for($i= 1; $i<= $lastpage ; $i++){
//COMPRUEBO SI ES LA PÁGINA ACTIVA O NO
if($page == $i){
?> <li class="active">
<? echo $i;?></li>
<?
}else{
?> <li><a href="busquedas.php?page=
<? echo $i;?>" >
<? echo $i;?></a></li>
<?
}
}
//Y SI NO ES LA ÚLTIMA PÁGINA ACTIVO EL BOTON NEXT
if($lastpage >$page ){ ?>
<li class="next"><a href="busquedas.php?page=
<? echo $nextpage;?>">Next »</a></li>
<?
}else{
?> <li class="next-off">Next »</li>
<?
}
}
?></ul></div>
<?
}
} Seguramente esta última parte del codigo se pueda mejorar ya que la escribí un poco “rapido”, así que estoy abierto a sugerencias. De todas formas a mi me funciona todo correctamente. Espero que les haya servido de ayuda, ya que en su día me costo mucho encontrar un buen tutorial sobre la paginación y ninguno de los que encontre venia completo. Un saludo!!!
Posted on May 24, 2009 by Damian
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.
<?
//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.
//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:
<?
$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:
<?php include('config.php'); ?>
Una vez incluido nuestro archivo podemos realizar una nueva conexión de la siguiente forma:
//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
<?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
Posted on May 21, 2009 by Damian
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
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.
Posted on May 1, 2009 by Damian
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:
<?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:
/* ------------------------------
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:
<!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://blog.timersys.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
Posted on April 29, 2009 by Damian
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:
/* ------------------------------
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
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.
<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:
#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:
<!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://blog.timersys.com">Timersys</a>. </div>
</div>
</body>
</html>
Y el código CSS completo sería el siguiente:
/* ------------------------------
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!!
« Older Entries
Con tu lector preferido.
Via Email.
Por Twitter.