Listas en HTML

Seguramente recuerden el menú Numeración y Viñetas en Microsoft World. Quizás no tan común pero igualmente visibles son las listas en HTML, al diseñar páginas web. Como en el resto de las especificaciones, hay tags o etiquetas asociadas: <li>, <ul>, <ol>, <dl>, <dd>, <dt> y otras dependiendo del tipo de lista que queramos. Propongo en este artículo revisar las distintas posibilidades.

Listas ordenadas o numeradas

El comienzo y el final de la lista se marca con la etiqueta <ol> de la siguiente forma: <ol> …LISTA… </ol>. Cada ítem de la lista, irá entre etiquetas <li> resultando:

<ol>
<li>Ítem 1</li>
<li>Ítem 2</li>
<li>Ítem 3</li>
</ol>

Listas sin órden ni numeración

Las listas sin órden ni numeración son igual a las primeras con la diferencia de que la etiqueta <ol> será sustituída por <ul>. Por ejemplo:

<ul>
<li>Ítem 1</li>
<li>Ítem 2</li>
<li>Ítem 3</li>
</ul>

Listas con definiciones

Las listas con definiciones son un caso más particular de listas. Son englobadas por la etiqueta <dl>. A diferencia de las anteriores, donde se utilizan las etiquetas <li></li>,  cada ítem estará compuesto por el nombre del ítem (entre etiquetas <dt>) y su definición (entre etiquetas <dd>). Por ejemplo:

<dl>
<dt>Ítem 1</dt>
<dd>Definición del ítem 1</dd>
<dt>Ítem 2</dt>
<dd>Definición del ítem 2</dd>
<dt>Ítem 3</dt>
<dd>Definición del ítem 3</dd>
</dl>

Las listas a su vez pueden anidarse, esto es colocarse unas dentro de otras. Los márgenes de cada lista, los tipos de letra, numeración, colores, etc. podrán ser ajustados desde una hoja de estilos CSS. Eso lo veremos próximamente.

JW Media Player en flash

Una gran cantidad de sitios insertan los videos directo de Youtube. Esto resulta muy práctico (se trata solamente de copiar y pegar un código que el sitio brinda) pero poco flexible. Imaginemos que deseamos elegir qué imágen se mostrará como preview, antes de clickear play en el video. No será posible como tampoco remover la marca de agua “Youtube” ni otras configuraciones. La solución es utilizar nuestro propio flash player, uno sobre el que tengamos total control.

De los que estuve investigando, el que más me gustó (y uno de los más elegidos en la web) es el JW FLV Media Player -lo reconocerán en la imágen. Permite elegir una imágen para preview, ajustar las dimensiones del video, configurar el skin, armar playlists y muchas otras opciones a través de su API en Javascript. Soporta archivos FLV, MP4, MP3, AAC, JPG, PNG y GIF. Un recurso totalmente gratis.

Para utilizarlo deben subir los archivos descargados (player.swf y swfobject.js). Un código básico para insertarlo luego en un html es el siguiente:

<div id="container"><a href="http://www.macromedia.com/go/getflashplayer">Video</a></div>
<script src="URL/swfobject.js" type="text/javascript"></script><script type="text/javascript"><!--
var s1 = new SWFObject("URL/flashplayer/player.swf","ply","360","288","9","#333333");
s1.addParam("allowfullscreen","true");
s1.addParam("allowscriptaccess","always");
s1.addParam("flashvars","file=VIDEO.flv&image=IMAGEN.jpg");
s1.write("container");
// --></script>
Obviamente deben sustituir “URL” por la dirección donde se encuentran alojados los archivos, “VIDEO” por la dirección al video FLV e “IMAGEN” por la dirección a la imágen preview. Podrían agregar más configuraciones conforme explica la documentación oficial.

Transparencia con hojas de estilo CSS

Lograr una transparencia al diseñar webs es al día de hoy un requisito. Los navegadores modernos brindan más de una posibilidad; presentaremos en este artículo la forma con hojas de estilo CSS.

La primera aproximación a la transparencia la constituyó el formato de archivos .gif. Si bien abrió un nuevo campo en el diseño, tuvo una importante limitación: un pixel podía ser de color o totalmente transparente pero no tener grados intermedios de opacidad. Surgió tiempo después, para salvar ese impedimento, el formato de archivos .png con su canal alfa (canal de transparencia). Hoy por hoy es uno de los formatos de imágenes más comunes en la web -lamentablemente el Internet Explorer 6 no lo soporta y el workarround no es efectivo.

Una posibilidad más moderna -y por lo tanto no soportada en navegadores viejos- son las hojas de estilo CSS. A diferencia de las imágenes .png, podemos transparentar colores de fondo, imágenes (de cualquier formato) y texto. Además, se vuelve extremadamente sencillo variar la transparencia desde Javascript.

El atributo que debemos agregar se llama opacity y varía entre 0 (imágen transparente) y 1 (imágen opaca). Para los valores decimales utilizamos el “.” (punto), por ejemplo: 0.5.

#prueba{
opacity: 0.5;
}

Al igual que los demás atributos CSS, se hereda a todos los bloques contenidos dentro. Por esta razón, una vez que se hace transparente el bloque de más arriba, los de abajo no podrán nunca llegar al máximo de opacidad -digamos que es progresivo.

Google Chrome 1.0 no está aceptando este atributo cuando se aplica a una imágen con transparencia alfa.

free css templates

El sitio FreeCSSTemplates pone a nuestra disposición cientos de plantillas CSS gratis para descargar. En lugar de plantillas específicas para un CMS (manejador de contenidos, por ejemplo Wordpress), tenemos de forma genérica una hoja de estilos CSS, un HTML básico (lo que podría ser la página principal) y las imágenes.

Una vez con ese material, debemos adaptarlo al script que estemos usando o podríamos desarrollar un sitio HTML plano. Desde luego es necesario cierto conocimiento de diseño y especialmente sobre los motores de plantilla de los distintos CMS para sacarle provecho a este recurso. Algunos ya han sido adaptados y publicados en otros sitios.

Este sitio además nos ofrece dos facilidades interesantes: vista previa de todo el material en tamaño real y vistas en miniatura (thumbnails).

Los invito, sin más, a recorrer la galería.

Devianart: miles de recursos para diseño gráfico

Deviantart es uno de los sitios-comunidad más grandes de la web usado por artistas, diseñadores, fotógrafos y webmasters de todo el mundo. Fue fundado en el año 2000 por Scott Jarkoff, Angelo Sotira y Matthew Stephens. El sitio recibe diariamente alrededor de 1.5 millones de visitas. Para el año 2007 tenía 2.5 millones de usuarios y 50 millones de creaciones, con 60.000 nuevas por día.

Encontrarán todo tipo de recursos para trabajar en diseño gráfico con Photoshop y otros programas como Paint Shop Pro, GIMP, Illustrator, Corel, Cinema 4D, Flash, etc. Lo que puedan imaginar: pinceles, fotografías, imágenes para editar, arte digital con escenarios 3D, patrones (patterns), archivos de programas (PSD, FLA, etc), formas (shapes), imágenes vectoriales, tipografías y mucho más.

Los usuarios pueden registrarse gratis, compartir sus trabajos y recibir comentarios. Disponen de una página personal con información del perfil, favoritos y galerías entre otros elementos. Para descargar material no hace falta una cuenta. Existe la posibilidad de hacerse miembro pago y recibir algunos beneficios como aumentar la cantidad de imágenes que se ven en las búsquedas, eliminar la publicidad, descargar imágenes al móvil, hacer encuestas y agregar shoutbox en la página de usuario.

Deviantart es una visita obligada para todo diseñador gráfico y diseñador web.

Free RSS Icons

Para cualquier diseño web 2.0 es imprescindible considerar la sindicación de contenidos, esto es dar la posibilidad de llegar al contenido del sitio usando los canales RSS. Los canales son un formato en el que se transmite la información y puede ser gestionado luego de diversas formas.

Un caso común son los usuarios prefieren reunir todos los sitios y blogs que visitan diariamente en un solo lugar (Google Reader, FeedLounge, Bloglines, etc). También es notoria la posibilidad que le brindan a los desarrolladores para integrar contenidos de dos o más webs.

Los canales RSS se identifican con un logo particular que representa la “onda expansiva” de la información. En general es cuadrado y de color naranja aunque hoy ya es posible encontrarlo en otras formas. Y justamente por eso, les propongo visitar una colección de más de 110 íconos de RSS gratis!!

110 íconos de RSS gratis aquí

Dafont.com es un sitio donde encontraran miles de fonts para descargar gratis. Están clasificadas por categoría (fantasía, tecnológicas, estilos extranjeros, pixeladas, básicas, etc.), por popularidad, por órden alfabético y por fecha de publicación.

Además de letras, en la sección Dingbats encontrarán aliens, animales, formas, juegos, etc. Se instalan como cualquier font y cada caracter del teclado representa uno de estos dibujos.

Una de las principales comodidades que ofrece el sitio es la de visualizar las letras anes de descargarlas con el texto elegido por nosotros (en 4 tamaños). También podemos elegir el órden en que se muestran, la cantidad por página y clasificar la búsqueda por licencia.

El material es propiedad de sus respectivos autores. No obstante, la casi totalidad es gratis.

Recordemos el procedimiento para instalar fonts en Windows y Linux:

En Windows:

1. Descargar el font
2. Desempaquetarlo
3. Copiar los archivos a la carpeta C:/Windows/Fonts

En Ubuntu (también otras distribuciones de GNU/Linux):

1. Descargar el font
2. Desempaquetarlo
3. Copiar los archivos a la carpeta /usr/share/fonts

Los links de cualquier página HTML cuando son clickeados o seleccionados, se visualizan en los navegadores con un borde punteado alrededor (como  se muestra en la imágen superior). Editando la hoja de estilos CSS se puede eliminar.

Para hacerlo, agregamos lo siguiente:

a{
outline-style: none;
}

En caso de que necesitemos eliminar esta línea punteada de un elemento específico (por ejemplo de una imágen), el código sería:

img a{
outline-style: none;
}

Además de eliminarla, podemos modificarla. Los atributos que acepta son: dotted (punteada, por defecto), dashed (línea a rayas), solid (línea uniforme), double (línea doble), groove, ridge, inset y outset (efectos 3D con sombra).

Otra manera de editarla es cambiandole el color con el atributo outline-color:

a{
outline-color: #333333;
}

El sitio Ajaxload.info pone a nuestra disposición un generador de íconos loading para trabajar con webs y formularios AJAX.

Tenemos una extensa variedad con círculos, barras, puntos y rayas. Podemos elegir el color de fondo y frente de la página en hexadecimal o hacerlos transparentes. Hay que avisar sin embargo que las transparencias no están del todo pulidas y asoman partes blancas si las contrastamos con áreas oscuras.

Una vez elegido, lo generamos y aparece en el recuadro preview con el botón de descarga. El formato de los archivos es .gif.

Un buen recurso para tener a mano!