Tag Archive for: css

Esquinas redondeadas y degradados con CSS3

Categories: Tutoriales - Tags: , ,

Hola a todos! Últimamente empieza a sonar más fuerte HTML5 y CSS3 , a medida que los navegadores se hacen más compatibles con estas nuevas tecnologías, así que hoy pensé en traerles un par de “trucos” que pueden realizar con CSS3 y que hasta ahora solo era posible con Javascript o imágenes.

Esquinas redondeadas

Hace un tiempito largo explique como redondear las esquinas de un DIV con el Plugin de JQuery JQuery.corners.
Hoy les explico lo mismo tan solo usando CSS3.

1

<div class="rounded"> Este es un ejemplo para http://masquewordpress.com</div>

Dado un div cualquiera aplicamos la propiedad border-radius

1
2
3
4
5

.rounded{
border-radius:7px;
-moz-border-radius:7px; //Firefox
-webkit-border-radius:7px; //Safari y navegadores que usen WebKit
}

Degradados y sombras con CSS3

Utilizando el ejemplo anterior vamos a aplicarle sombras al DIV y luego un degradado. Aunque en mi ejemplo utilizo DIVS cabe decir que se puede aplicar a otros objetos como botones y crear efectos muy buenos. Pueden ver un ejemplo de botones con degradado y sombras aquí.

Aplicando sombras al DIV y letras

1
2
3
4
5
6
7
8
9
10

.rounded{
border-radius:7px;
-moz-border-radius:7px; //Firefox
-webkit-border-radius:7px; //Safari y navegadores que usen WebKit
 
text-shadow: #fff 0px 1px 1px;
box-shadow: 1px 1px 2px rgba(0,0,0,.5);
-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,.5);//Safari y navegadores que usen WebKit
-moz-box-shadow: 1px 1px 2px rgba(0,0,0,.5);//Firefox
}

Y por último le aplicamos un degradado 

1
2
3
4
5
6
7
8
9
10
11
12
13
14

.rounded{
border-radius:7px;
-moz-border-radius:7px; //Firefox
-webkit-border-radius:7px; //Safari y navegadores que usen WebKit
 
text-shadow: #fff 0px 1px 1px;
box-shadow: 1px 1px 2px rgba(0,0,0,.5);
-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,.5);//Safari y navegadores que usen WebKit
-moz-box-shadow: 1px 1px 2px rgba(0,0,0,.5);//Firefox
 
background: -webkit-gradient(linear, left top, left bottom, from(#D7E9F3), to(#ffffff));
background: -moz-linear-gradient(top,  #D7E9F3,  #ffffff);
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#D7E9F3', endColorstr='#ffffff');
}

Listo !! con estas simples lineas habremos creado unos lindos efectos. Tengan en cuenta que van a necesitar las últimas actualizaciones de sus navegadores para que esto funcione correctamente.

Ver Ejemplo online
Descargar código del ejemplo

Ejemplo de estilo para tu contador del blog

Categories: Tutoriales - Tags: , ,

En este tutorial les voy a mostrar como crear un simple contador de comentarios o comments counter como se suele decir en ingles. Con un HTML muy básico y un poco de CSS vas a poder dar un nuevo aire a tu blog.
counter

Estructura:

La estructua HTML es muy simple.

counter2

Tenemos un DIV principal que incluye un elemento <span>( con la clase “count”) que es donde se va a mostrar el número de comentarios, y más abajo un texto con la palabra “comments”. El código HTML seria el siguiente:

1
2
3
4

<div class="bubble">
<span class="count">... contador ...</span>
comments
</div>

Para el globo usamos una imagen que vamos a aplicar como fondo del DIV

bubble

El código CSS que aplicamos es 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

.bubble{
background:url(img/bubble.png) left top no-repeat;
color:#575553;
float:left;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:9px;
height:68px;
margin-right:20px;
padding-top:7px;
text-align:center;
width:70px;
}
.bubble .count{
font-family:Georgia, "Times New Roman", Times, serif;
font-size:24px;
color:#CC6600;
}
//Añadimos un poco más de código para el texto
h1, p{margin:0; padding:0; border:0;}
p{
	font-size:16px;
	color:#666666;
	font-family:Georgia, "Times New Roman", Times, serif;
}
h1{
	margin-bottom:8px;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-weight:normal;
}

Y ya esta! con eso tendriamos todo.
Como siempre acá tienen el EJEMPLO ONLINE

Descargar Ejemplo

CSS: Estructura Vs Semántica . Como nombrar las diferentes partes de mi web

Categories: Tutoriales - Tags: ,

En mi último artículo comente como optimizar los archivos CSS de forma que queden organizados estructuralmente, facilitando así el mantenimiento y lectura de los mismos.

Hoy lo que voy a exponer es algo que la verdad se debería aprender antes, pero como dicen algunos, más vale tarde que nunca.

Básicamente nombrar los elementos de una web de forma semántica siginifca nombrarlos por su significado como pueden ser main (contenido principal) o sidebar (barra lateral), en cambio hacerlo de una forma estructural sería llamar a cada cosa por su nombre como por ejemplo right-bar (barra derecha) o left-content (contenido de la izquierda)

Imágenes obtenidas de http://woork.blogspot.com

Imágenes obtenidas de http://woork.blogspot.com

Ahora imaginá por un momento que tenés que cambiar la orientación de la web bien porque no queda bien o porque tu cliente prefiere la barra del otro lado etc. Con el método estructural tendrias que cambiar todos los nombres para que siga teniendo la coherencia que tenía al principio ya que sino quedaría invertido. En cambio con el método semántico todo seguiría en su sitio.

Imágenes obtenidas de http://woork.blogspot.com

Imágenes obtenidas de http://woork.blogspot.com

En conclución si elegimos los nombres de los elementos de una forma semántica no tendremos que preocuparnos en cambiar todos los nombres cada vez que modifiquemos el diseño, sino simplemente cambiar las propiedades que nos hagan falta.

Puntos a tener en cuenta…..

1. Es conveniente usar minúsculas y separar las palabras mediante “-” o mayúsculas. Por ejemplo main-content o mainContent.

2. Optimizar tu código CSS creando solo los elementos principales que necesites y reutilizando las etiquetas HTML para los nodos hijos. Por ejemplo en vez de:

1
2
3
4

<div class="main">
     <div class="main-title">...</div>
     <div class="main-paragraph">...</div>
</div>

Usar :

1
2
3
4

<div class="main">
     <h1>...</h1>
     <p>...</p>
</div>

Con esto mantemos el código HTML más sencillo sin perder la opción de cambiar los atributos desde CSS.

Algunos ejemplos de como nombrar semánticamente los elementos

Por ejemplo es un diseño de 3 columnas podriamos hacerlo de la siguiente manera:
sem

Otra formas de llamar a los elementos y que vas a encontrar a menudo por ahi son:

1.Container

El container o contenedor se utilizar para encajar nuestra web dentro. En ingles esto se dice “wrap” por lo que es my posible que tambien lo encuentres con ese nombre o el de “wrapper”.

2. Header

Es la parte superior de la web , donde se suele encontrar el logo  de la misma. Se suele llamar “top”, “logo” , o simplemente “top-header”.

3. Navbar

Es el menu de navegación que suele encontrarse en la parte superior. Los nombres más comunes son “navbar”, “nav”, “navigation”, “nav-wrapper”.

4. Menu

Es la parte donde se encuentran los links generales o algun menu. Se suele llamar “menu”, “links”, “sub-nav”.

5. Main

Contenido principal de la web. Los nombres más comunes son “main-content”, “content” o “main”.

6. Sidebar

El sidebar es utilizado para contenido secundario como por ejemplo las últimas entradas, espacio publicitario, información del sitio …etc. Por lo que su nombre puede variar como “sidebar”, “sub-nav”, “side-panel”, “secondary-content”, etc.

7. Footer

El pie de página suele ser la parte donde ponemos el copyright de la web, quien la diseño , etc. Por lo general siempre lo vas a encontrar como “footer” o “copyright”.

Hay miles de formas más para llamar a los diferentes elementos de forma semántica. Si se les ocurre alguno , simplemente dejenlo en los comentarios.

Para los que quieran indagar un poco más sobre este tema hay un monton de artículos sobre el (en ingles):

1. More on developing naming conventions, Microformats and HTML5
2. Standardizing CSS class and id names
3. User interfaces and CSS Naming convention
4. Structural naming
5. Smart CSS Ain’t Always Sexy CSS
6. Semantic coding
7. Semantic naming conventions for HTML and CSS
8. What’s in a name (pt1)
9. What’s in a name (pt2)
10. Most popular naming conventions
11. Semantic and Structural aspects of HTML

Un saludo a todos!!

|Via WorkUp

Paginación con PHP y MySQL + 3 estilos

Categories: MySQL, PHP, Tutoriales - Tags: , , ,

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:

estructura paginación

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:

flicrk

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”.

1
2
3
4
5
6
7
8
9
10
11

<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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

/* -------------------------------------------- */
/* ------------- 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:

digg

La estructura como pueden ver es la misma. Solo cambiamos el atributo ID de la lista.

1
2
3
4
5
6
7
8
9
10
11

<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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

/* -------------------------------------------- */
/* ----------- 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:

clean

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” :

1
2
3
4
5
6
7
8
9
10
11
12
13
14

/* -------------------------------------------- */
/* ------------- 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:

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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102

<?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">&laquo; 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 &raquo;</a></li><?
	}else{?>
	  <li class="next-off">Next &raquo;</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;?>"  >&laquo; 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 &raquo;</a></li><?
	  }else{
	?> <li class="next-off">Next &raquo;</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!!!

Descargar ejemplo

Nueva version usando una clase PHP

Introducción a AJAX, Javascript, CSS, XHTML

Categories: 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

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

Categories: 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

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

Categories: 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!!

Te gusta?

© Copyright - Mas que Wordpress - Tutoriales, recursos web, JQuery y PHP, Wordpress , twitter y muchos recursos más - by Timersys