Posts Tagged ‘tutorial’

octubre 13, 2009 0

Tutorial de CSS parte II. Menú horizontal con listas.

By in CSS

Hoy vamos a ver como crear un menú horizontal con listas. Hay muchos tutoriales en Internet donde viene explicado como hacer esto, pero aquí lo vamos a explicar paso a paso.

Lo primero que vamos a hacer va a ser crear nuestro menú con una lista no ordenada:

<ul id="menu">
<li><a href="#">Inicio</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contacto</a></li>
<li><a href="#">Sobre el Autor</a></li>
</ul>

Ahora vamos a aplicar los estilos. Para ello vamos a eliminar la viñeta por defecto (list-style: none) y vamos a hacer que los elementos floten a la izquierda, para que salga en horizontal. También le vamos a dar un borde para decorar y vamos a cambiar el color de fondo de los enlaces al pasar sobre ellos. Veamos el código CSS:

ul#menu {
  list-style: none;
  float: left;
  width: 900px;
  margin: 0;
  padding: 0;
  background: #f0f0f0;
  border: 1px solid #ddd;
}
ul#menu li {
  float: left;
  margin: 0;
  padding: 0;
  border-right: 1px solid #ddd;
}
ul#menu li a {
  float: left;
  display: block;
  padding: 10px;
  color: #333;
  text-decoration: none;
}
ul#menu li a:hover {
  background: #333;
  color: #f0f0f0;
}

De esta forma obtenemos un menú como el de la imagen:

Menu horizontal

Con unas pocas modificaciones podemos hacer que tenga el aspecto de pestañas:

ul#menu {
list-style: none;
float: left;
width: 900px;
margin: 0;
padding: 0;
border-bottom: 1px solid #ddd;
}
ul#menu li {
float: left;
margin: 0;
padding: 0;
border: 1px solid #ddd;
}
ul#menu li a {
float: left;
display: block;
padding: 10px;
color: #333;
background: #f0f0f0;
text-decoration: none;
}
ul#menu li a:hover {
background: #333;
color: #f0f0f0;
}

Y nos quedaría como la siguiente imagen:

Menu con pestanas

Con esto finaliza esta parte sobre las listas y CSS. En la próxima entrega volveremos con las listas, para ver como podemos crear unas listas con más estilo.

Comparte esta entrada:
Delicious Digg Google Technorati Menéame Fresqui Reddit Facebook Twitter Yahoo! Buzz MySpace Email BarraPunto

Tags: , , , ,

octubre 8, 2009 0

Tutorial de CSS parte I. Padding vs margin.

By in CSS

Vamos a comenzar este tutorial de CSS hablando de dos propiedades, que en ocasiones se confunde y no son bien utilizadas. Me refiero a las propiedades padding y margin.

¿Qué son estas propiedades?

Básicamente estas propiedades hacen referencia al espacio interior y exterior del elemento, la propiedad padding hace referencia al espacio interior y la propiedad margin al espacio exterior al elemento. Lo podemos ver mejor con la siguiente imagen:

margin vs padding

En esta imagen se puede apreciar como la propiedad padding hace referencia al espacio interior, dentro del borde rojo, y la propiedad margin hace referencia al espacio exterior al contenido, entre el borde de puntos y el borde rojo.

Para controlar el espacio dependiendo de la dirección (arriba, derecha, abajo e izquierda) podemos hacer uso de las siguientes propiedades:

Para el padding:

  • padding-top: Espacio interior de la parte de arriba.
  • padding-right: Espacio interior a la derecha.
  • padding-bottom: Espacio interior de la parte de abajo.
  • padding-left: Espacio interior de la parte de la izquierda.

Para el margin:

  • margin-top: Espacio exterior de la parte de arriba.
  • margin-right: Espacio exterior a la derecha.
  • margin-bottom: Espacio exterior de la parte de abajo.
  • margin-left: Espacio exterior de la parte de la izquierda.

O también podemos hacer uso de la propiedad padding y margin dándole distintos valores dependiendo de la posición.

Veamos un ejemplo:

margin: 10px 5px 10px 5px;
padding: 15px 25px 15px 25px;

Cada valor corresponde con una de las propiedades anteriores. El primer valor corresponde al top, parte de arriba, y los siguientes al correspondiente siguiendo el sentido de las agujas del reloj:

  1. Top
  2. Right
  3. Bottom
  4. Left

En la siguiente imagen se ve mucho más fácil:

Posiciones de padding y margin

Existe también una forma abreviada:

margin: 15px 10px;
padding: 20px 15px;

De esta forma hacemos que el margen superior e inferior sea de 15px y que el margen derecho e izquierdo sea de 10px. Lo mismo ocurre con el padding, pero con un valor de 20px para arriba y abajo y de 15px para los lados derecho e izquierdo.

El fondo y las propiedades padding y margin:

Cuando aplicamos un fondo a un elemento este se ve afectado por la propiedad padding pero no por la propiedad margin. Lo explico ahora un poco mejor. La propiedad margin es el espacio exterior al contenido, por lo que el espacio de margen no tendría el mismo fondo que el contenido. Sin embargo la propiedad padding es el espacio dentro del contenido, por lo que este espacio tendría el mismo fondo que el contenido.

Cosas a tener en cuenta:

Hay que tener en cuenta que el valor del padding se añade al ancho de nuestro elemento. Si tenemos un elemento de tamaño 150px y con un padding de 20px para los lados derecho e izquierdo, el ancho total del elemento será de 190px, 150px de ancho + 20px de padding derecho + 20px de padding izquierdo = 190px en total.

Con esto finaliza este primer tutorial. En próximas partes veremos otras propiedades muy interesantes y como funcionan estas combinadas unas con otras. Hasta la próxima.

Comparte esta entrada:
Delicious Digg Google Technorati Menéame Fresqui Reddit Facebook Twitter Yahoo! Buzz MySpace Email BarraPunto

Tags: , , ,

julio 27, 2009 3

Tutorial de FCKeditor. Parte I.

By in JavaScript, Librerías

Hola a todos. Vamos a comenzar un tutorial sobre un editor WYSIWYG llamado FCKeditor. Para empezar vamos a ver un pequeño ejemplo que pasaré a explicar después.

FCKEditorEjemplo1.html:

<html>
<head>
<title>Ejemplo FCKEditor</title>
<script type="text/javascript" src="./fckeditor/fckeditor.js"></script>
</head>
<body>
<form action="form.php" method="post">
<script>
var oFCKeditor = new FCKeditor( 'FCKeditor1' ) ;
oFCKeditor.BasePath	= document.location.href.substring(0, document.location.href.lastIndexOf('/')) + "/fckeditor/";
oFCKeditor.Height	= 300 ;
oFCKeditor.Value	= '<p>Esto es un <strong>texto de ejemplo<\/strong>.<\/p>' ;
oFCKeditor.Create() ;
</script>
<input type="submit"/>
</form>
</body>
</html>

Lo primero que hacemos es incluir el script fckeditor.js. Este script se encuentra dentro de la carpeta fckeditor. A continuación creamos un formulario que será procesado por el script form.php y al que se le enviarán los datos mediante el método POST.

Después metemos algo de código JavaScript. Lo que hacemos es crear un objeto de la clase FCKeditor. Esto lo hacemos en la primera linea del script. A continuación configuramos el editor, indicándole la ruta base (oFCKeditor.BasePath), la altura (oFCKeditor.Height) y el contenido del editor (oFCKeditor.Value). Una vez hecho esto creamos el editor llamando al método Create.

A continuación, y ya fuera del script, ponemos un Submit para que envíe los datos al script encargado de procesar el formulario. Veamos el código de dicho script:

form.php:

<html>
<head>
<title>Ejemplo FCKEditor</title>
<script type="text/javascript" src="./fckeditor/fckeditor.js"></script>
</head>
<body>
<h1>C&oacute;digo del texto introducido</h1>
<pre>
<?php
	if (get_magic_quotes_gpc())
		echo htmlspecialchars(stripslashes($_POST['FCKeditor1']));
	else
		echo htmlspecialchars($_POST['FCKeditor1']);
?>
</pre>
</body>
</html>

Este script lo único que hace es mostrarnos el código del texto introducido en el editor.

Podéis ver un ejemplo del código aquí. Y como es costumbre descargaros el código de los ejemplos. Para poder ver el ejemplo tenéis que descargar el editor y ponerlo dentro de una carpeta llamada fckeditor.

Primer Ejemplo de FCKeditor

P.D.: Esta entrada me ha costado un poco, ha habido algunos problemas con el ejemplo, de modo que puede haber problemas al hacer que funcione el ejemplo. Si tenéis alguna duda podéis preguntar sin problema en los comentarios.

Comparte esta entrada:
Delicious Digg Google Technorati Menéame Fresqui Reddit Facebook Twitter Yahoo! Buzz MySpace Email BarraPunto

Tags: , , , ,

julio 19, 2009 2

Los efectos especiales de jQuery

By in JavaScript, Librerías

Ya he hablado anteriormente del framework jQuery. Hoy vamos a comentar los efectos especiales que implementa el framework.

Efectos básicos:

Efecto Descripción
Show() Muestra los elementos seleccionados.
Show(speed, callback) Muestra los elementos seleccionados a la velocidad indicada y al final lanza un callback si se ha indicado.
hide() Oculta los elementos seleccionados.
hide(speed, callback) Oculta los elementos seleccionados a la velocidad indicada y al final lanza un callback si se ha indicado.
toggle() Conmuta la visibilidad de los elementos seleccionados.
toggle(switch) Conmuta la visibilidad de los elementos seleccionados en función del valor del parámetro switch. Si es true lo muestra, si es false lo oculta.
toggle(speed, callback) Conmuta la visibilidad de los elementos seleccionados a una velocidad dada y lanza un callback si se ha indicado.

Efectos móviles:

Efecto Descripción
slideDown(speed, callback) Despliega los elementos seleccionados a una velocidad dada y lanza un callback si se ha indicado.
slideUp(speed, callback) Encoge los elementos seleccionados a una velocidad dada y lanza un callback si se ha indicada.
slideToggle(speed, callback) Muestra u oculta el elemento mediante despliegue dependiendo de como estuviera. Al final lanza un callback si se ha indicado.

Efectos de fundido:

Efecto Descripción
fadeIn(speed, callback) Muestra mediante un fundido los elementos seleccionados. Al final lanza un callback si se ha indicado.
fadeOut(speed, callback) Oculta mediante un fundido los elementos seleccionados. Al final lanza un callback si se ha indicado.
fadeTo(speed, opacity, callback) Realiza un fundido de los elementos seleccionados hasta la opacidad indicada. La opacidad es un número entre 0 (transparente) y 1 (opaco). Al final lanza un callback si se ha indicado.

En todos los métodos en los que se puede indicar la velocidad esta tomara los valores ‘slow’, ‘normal’, ‘fast’ o el número de milisegundos que durará la animación.

Después de esto vamos a ver un pequeño ejemplo:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Efectos especiales con jQuery</title>
<script src="jquery.js" type="text/javascript"></script>
<style>
 .cuadro {
 	background-color:#4682b4;
 	color: #fff;
 	padding: 5px;
 	width: 400px;
 	border-width: 2px;
 	border-color: #000;
 	border-style: solid;
 }
</style>
</head>
<body>
<h1>Efectos especiales con jQuery</h1>
<a href="#" onclick="$('#c1').show();">[show]</a> <a href="#" onclick="$('#c1').hide();">[hide]</a> <a href="#" onclick="$('#c1').toggle();">[toggle]</a><br/>
<a href="#" onclick="$('#c1').slideDown('slow');">[slideDown]</a> <a href="#" onclick="$('#c1').slideUp('slow');">[slideUp]</a> <a href="#" onclick="$('#c1').slideToggle('slow');">[slideToggle]</a><br/>
<a href="#" onclick="$('#c1').fadeIn('slow');">[fadeIn]</a> <a href="#" onclick="$('#c1').fadeOut('slow');">[fadeOut]</a><br/>
<a href="#" onclick="$('#c1').fadeTo('slow', 0);">[fadeTo 0%]</a> <a href="#" onclick="$('#c1').fadeTo('slow', 0.25);">[fadeTo 25%]</a>
<a href="#" onclick="$('#c1').fadeTo('slow', 0.5);">[fadeTo 50%]</a> <a href="#" onclick="$('#c1').fadeTo('slow', 0.75);">[fadeTo 75%]</a>
<a href="#" onclick="$('#c1').fadeTo('slow', 1);">[fadeTo 100%]</a><br/>
<div id="c1" class="cuadro">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque at mauris risus.
Duis ornare euismod fringilla. Etiam nec ante sem, a cursus massa. Duis rutrum
metus blandit tellus rhoncus quis sodales lacus porttitor. Quisque posuere,
metus eu imperdiet egestas, diam justo ornare est, quis lacinia enim eros id massa.
Curabitur volutpat porta iaculis. Proin vitae elit sodales leo lacinia tincidunt.
</div>
</body>
</html>

Podéis ver este ejemplo en acción aquí. También podéis descargar el código con los ejemplos, algo recomendado para poder tocar si queréis:

Ejemplo de efectos con jQuery

Comparte esta entrada:
Delicious Digg Google Technorati Menéame Fresqui Reddit Facebook Twitter Yahoo! Buzz MySpace Email BarraPunto

Tags: , , , ,

junio 20, 2009 1

Gráficos en PHP con JpGraph. Parte III.

By in Librerías, PHP

En las dos anteriores entregas de este tutorial hemos visto como crear gráficos de lineas y gráficos de barras. Hoy les toca el turno a los gráficos de tarta. La forma de trabajar con ellos es muy parecida a los vistos anteriormente. Veamos un ejemplo:

<?php
// Evita que se vean los errores
error_reporting(0);
include("include/jpgraph.php");
include("include/jpgraph_pie.php");
$datos = array(9, 5, 12, 11, 6);
$grafico = new PieGraph(400, 300, "auto");
$grafico->SetScale("textlin");
$pieplot = new PiePlot($datos);
$grafico->Add($pieplot);
$grafico->Stroke();
?>

Y el resultado final es:

Séptimo ejemplo con JpGraph

Si analizamos el código podemos ver que en este caso usamos la clase PieGraph en lugar de la Graph y que los datos se pintan con la clase PiePlot. También, al ver el resultado, nos damos cuenta que los resultados los muestra como porcentajes.

La clase PiePlot provee de varios métodos para controlar la forma en la que se pinta el resultado. Vamos a ver algunos de esoso métodos:

Método Parámetros Descripción
SetColor $color: Color de la linea. Color de la linea que rodea los trozos de tarta.
SetSlicesColors $aColors: Array con colores Para indicar el color de cada uno de los trozos.
Explode $aExplodeArr: Array con los radios de énfasis. Permite enfatizar los pedazos indicándole un radio de separación del centro. Para ello se le pasa un array con los radios a los que se enfatiza cada elemento.
ExplodeAll $radius: Radio del énfasis. Aleja todas las porciones del centro en un radio dado.
ExplodeSice $e: Elemento a alejar.
$radius: Radio de alejamiento
Permite alejar un único pedazo.

Veamos un ejemplo usando alguno de estos métodos:

<?php
// Evita que se vean los errores
error_reporting(0);
include("include/jpgraph.php");
include("include/jpgraph_pie.php");
$datos = array(9, 5, 12, 11, 6);
$grafico = new PieGraph(400, 300, "auto");
$grafico->SetScale("textlin");
$pieplot = new PiePlot($datos);
$pieplot->SetSliceColors(array("red", "green", "blue", "yellow", "white"));
$pieplot->ExplodeSlice(1, 25);
$grafico->Add($pieplot);
$grafico->Stroke();
?>

El resultado sería el siguiente:

Octavo ejemplo con JpGraph

Con esto termina la tercera parte del tutorial. En el siguiente tutorial seguiremos viendo los gráficos de tarta para ver algunas opciones más avanzadas.

Y ahora los archivos con los ejemplos (no incluye la librería):

Ejemplos con JpGraph. Parte III.

ACTUALIZACIÓN 2012-12-05

Se ha añadido al código una linea de código que desactiva el reporte de errores de PHP. Esto se debe a que la versión de jpGraph para PHP 4 produce errores en versiones de PHP 5, que provocan que las imágenes generadas no se vean bien.

Todos los ejemplos de este artículo y de los demás artículos sobre jpGraph los podéis encontrar en gitHub, en el siguiente repositorio:

https://github.com/mjcarrascosa/jpGraphDemo

Comparte esta entrada:
Delicious Digg Google Technorati Menéame Fresqui Reddit Facebook Twitter Yahoo! Buzz MySpace Email BarraPunto

Tags: , , , ,