Archive for octubre, 2009

octubre 19, 2009 0

JavaScript Framework Matrix: Comparativa de los diferentes frameworks JavaScript

By in Herramientas, JavaScript

JavaScript Framework Matrix es una aplicación que nos permite visualizar una comparativa de los distintos frameworks JavaScript.

JavaScript Framework Matrix

JavaScript Framework Matrix

Aunque no ejecuta si que nos muestra las distintas formas de usar cada una de las funcionalidades de los frameworks que aparecen. Es una original forma de ver que framework nos resulta más útil, o nos es más conveniente,  en cada momento.

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

Tags: , ,

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

octubre 2, 2009 1

El atributo longdesc

By in General

Estoy bastante interesado en la accesibilidad. Es algo que no es fácil para el principiante, como es mi caso, por ello cualquier cosa que vaya aprendiendo y descubriendo la iré colocando en este blog. Hoy le toca, y para empezar, al atributo longdesc.

El atributo longdesc nos permite indicar un recurso donde se da una descripción larga, de ahi el nombre, de un elemento img, frameset o iframe. ¿Y por qué usarlo? Principalmente por motivos de accesibilidad. Veamos un ejemplo:

<img src="http://midominio.com/paisaje.jpg" alt="Imagen de un paisaje" longdesc="http://midominio.com/paisaje.html"/>

En el archivo paisaje.html tendríamos una descripción más detallada del recurso paisaje.jpg.

Los errores más comunes a la hora de usar este atributo son:

  • Utilizar un valor en blanco.
  • La dirección a la que apunta no es del todo correcta.
  • Utilizar un enlace a la propia ruta de la imagen.
  • Utilizar un enlace a la raíz de otro dominio.
  • Utilizar el mismo enlace que posea el atributo href de la etiqueta a que contenga la imagen.

Con esto queda terminada la explicación de este atributo, casi apenas utilizado, que nos permite dar mayor accesibilidad a nuestras páginas.

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

Tags: ,