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>

Leer más »

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.

Leer más »

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.
Leer más »

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.
Leer más »

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.

Leer más »

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.

Leer más »

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.
Leer más »

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:
Leer más »

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!