Elías Sierra » Desarrollo Web

Centrar divs horizontal y verticalmente con CSS

elfleat — Fri, 29 Jul 2011 00:38:29 +0000

Suele pasar que tenemos inconvenientes a la hora de centrar nuestros divs horizontal y verticalmente en nuestra ventana, para que se adapte al centro del navegador, en cualquier resolución en la que se naveguela página. Pues aquí traigo un hack muy fácil de implementar que es el que suelo utilizar cuando necesito éste tipo de alineación.

Lo primero que hago es establecer un alto y ancho fijo (si queremos centrar verticalmente el div, se supone que el contenido no es dinámico; por tanto podemos definirle un ancho en los estilos); agregaré también un borde rojo para comprobar si nuestro div está centrado.

Una vez con las dimensiones establecidas, le pedimos que se ubique en el centro de la pantalla, estableciéndole en los estilos posición absoluta y especificándole que se ubique al 50% de la ventana.

top:50%;
left:50%;

Ahora viene el truco; nuestr div en éste momento debería estar centrada; pero en realidad estará centrada únicamente con relacion al eje de la parte superior izquierda. Para ajustarlo al centro del div, agregaremo márgenes arriba y a la izquierda en negativo, por el valor del 50% del ancho o alto, respectivamente. ej:

margin-top:-100px;
margin-left:-100px;

Y ya está con eso tenemos nuestro div centrado horizontal y verticalmente en cualquier resolución.

Tabs con CSS y jQuery

elfleat — Thu, 03 Mar 2011 04:37:46 +0000

Uno de los elementos de interfáz más prácticos y comunmente utilizados son los tabuladores, las pequeñas pestañas o etiquetas sobre un cuadro de contenido que te permiten cambiar fácilmente entre las opciones para ver lo que buscas organizadamente.

Hoy trabajando en un proyecto necesité implementar un tabulador, y, siendo jQuery de mi preferencia, he encontrado éste script que quiero compartir, es muy fácil de implementar y el resultado final es perfecto.

Puedes ver el demo funcionando o puedes ver éste tutorial para implementarlo tú mismo.

Generador de degradados estilo Photoshop online en CSS

elfleat — Sun, 24 Oct 2010 08:04:21 +0000

Personalmente a la hora de maquetar un sitio web, algunas de las imágenes de fondo que utilizo para las son simples degradados verticales u horizontales, repetidos continuamente sea horizontal o verticalmente para dar el efecto y mantener ligero el tiempo de carga de la web.

Sin embargo ahora es posible mediante CSS mostrar degradados sin utilizar imágenes, mejorando más aún el tiempo de carga sin sacrificar la calidad visual de nuestro proyecto.

Herramienta online para generar degradados en CSS

La herramienta que encontré para generar el CSS de los degradados, es de los creadores del reconocido plugin para Firefox ColorZilla, y al entrar en la web verán distintos degradados muy agradables a la vista, ya listos para usar, así como les brindará la posibilidad de generar su propio degradado personalizado.

Ejemplo de degradado con CSS

Pondré un pequeño ejemplo a continuación para que vean lo bien que puede lucir.

Hola Mundo

Y aquí el código fuente del CSS asignado al div:

div{
color:white;
padding:12px;
background: #3b679e; /* old browsers */
background: -moz-linear-gradient(top,  #3b679e 0%, #2b88d9 50%, #207cca 51%, #7db9e8 100%); /* firefox */
background:  -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3b679e),  color-stop(50%,#2b88d9), color-stop(51%,#207cca),  color-stop(100%,#7db9e8)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3b679e', endColorstr='#7db9e8',GradientType=0 ); /* ie */
}

A simple vista, pareciera que hubiera utilizado imágenes, no?

Bordes redondeados con CSS

elfleat — Wed, 29 Sep 2010 17:14:52 +0000

Es muy común en la web 2.0 (hablando de ella como estilo visual, no quiero entrar en controversias ahora sobre el significado de la misma), combinaciones de brillos, sombras, degradados y bordes redondeados con estilos sólidos, etc.

Hoy me topé con un interesante recurso que quiero compartir con ustedes, es un generador de la pieza específica de CSS que nos permitirá tener bordes redondeados en nuestros divs.

El sitio se llama Border-Radious y la interfáz es muy intuitiva, al entrar nos encontramos con un cuadro con un campo de texto en cada esquina con el número 0.

Lo primero que haremos es cambiar una de éstas cifras al número 20 y veremos cómo el cuadro ajusta sus bordes y se redondean con la cifra proporcionada. En el cuadro del texto del centro tendremos algo como ésto:

-webkit-border-bottom-left-radius: 2px;
-moz-border-radius-bottomleft: 2px;
border-bottom-left-radius: 2px;

Para implementar éste código, bastará simplemente con agregarlo al css de nustra div que queremos redondearle los bordes, realizaré un pequeño documento de muestra para que puedan probarlo:

Pueden ver el ejemplo funcionando aquí.

Páginas web en flash… ¿Pésima elección para el posicionamiento web?

elfleat — Sun, 26 Sep 2010 13:19:17 +0000

El dilema que existe desde el inicio del SEO con relación al uso de Flash para el desarrollo de un sitio web, ha sido causa de innumerables polémicas y ha llevado a conclusiones controversiales.

Conozco muchos diseñadores/desarrolladores que trabajan el Flash como su herramienta principal para el desarrollo de sitios web, y bueno, los que han tocado el tema alguna vez conmigo, saben que recomiendo evitar al máximo la cantidad exagerada de éste tipo de objetos en un sitio web.

La pregunta sería… ¿Por qué los SEOs odian Flash? No odiamos flash, odiamos los métodos de desarrollo de la mayoría de diseñadores en flash!

¿Cuál es el problema con el Flash entonces? ¿Hay alguno?

Bueno, hay muchas opiniones respecto al tema, por mi experiencia puedo afirmar que no hay problema con el flash, hay problema con los métodos de desarrollo web que utilizan quienes desarrollan flash.

Los desarrolladores multimedia (que se basan 100% en flash) deben tener en cuenta que, independientemente de la calidad de sus proyectos y del manejo de las herramientas de Adobe, es imprescindible tener conocimientos de desarrollo web; flash no es lo único que deben saber.

El problema real del flash y el SEO es exactamente idéntico al de una web en html que en su página principal muestra una imagen con todo el contenido, sin textos alternos, ni meta-tags, ni un solo enlace o texto html. Google no encontrará contenido, no tendrá idea de qué se trata el sitio y mucho menos podrá indexarla… O bien, sucederá lo típico en éstos casos: Lo más popular en éste tipo de webs es poner únicamente los copyrights en html, y ésto es lo único que aparecerá en google.

Adobe ha continuado un fantástico producto que creó Macromedia hace algunos años atrás, y bien, le debemos mucho, por ejemplo, el online streamming de Youtube que revolucionó el entretenimiento online.

Así que la solución NO es dejar de usar flash, es aprender a implementarlo.

Así que aquí vienen mis 3 consejos para una web en flash:

Utiliza un código XHTML válido y limpio (siempre lo aconsejo para SEO)
Incluye en el código una versión literal de todo el contenido del flash para las plataformas que no soporten flash (y los Search Engines)
Utiliza url’s independientes según convenga. ¿Se imaginan lo tedioso que sería un libro en una sola hoja gigante? La finalidad del SEO en una página es darle al usuario lo que busca; no más, no menos.

Un ejemplo de un embebido flash bien hecho sería algo como esto:

Titulo del contenido del flash

Texto contenido en el flash y enlaces

Se trata simplemente de incluir en el código el contenido de flash en formato HTML de forma que cuando Google BOT llegue a nuestro sitio en flash, se encuentre con una version amigable a su lectura del sitio web; de ésta forma nuestro sitio no será dejado pasar por alto.