Archivo de la categoría: CSS

El super Sprite de YouTube

Los sprites son una solución para agrupar imágenes en una sola imagen, en desarrollo de sitios para Internet se usa como técnica de optimización. Cada vez que se muestra una imagen del sitio se realiza un request ó petición al servidor. Si por ejemplo en un sitio existen 20 imágenes de interfaz es decir que no están relacionadas con imágenes de contenido sino que corresponde a botones funcionales, fondos ó iconos etc. , esta página realizará 20 peticiones al servidor para poder mostrar cada una de las imágenes. Si agrupáramos las 20 imágenes en una sola imagen tendríamos solo una petición al servidor y un sitio con mejor desempeño en tiempos de carga.

El sprite de YouTube es un buen ejemplo de como debe realizarse un sprite, es probable que todas las imágenes de interfaz que se usan en YouTube estén dentro de esta imagen. Revisando la imagen se puede ver como está organizada y mantiene una disposición para los elementos. Principalmente botones que no tendrán textos visibles y fondos que se repetirán solo en el eje X. Se puede ver como se dejaron espacios vacíos entre las gradaciones, esto como precaución para elementos que usaran texto y este pueda crecer a tres o cuatro líneas. Pues si no se deja espacio y el texto crece se comenzaría a ver el siguiente fondo.

Alternativas para embeber tipografías en un sitio Web

Embeber tipografias en páginas web es una necesidad para los diseñadores. Actualmente no todos los navegadores suportan font-face que es el estandar para usar fuentes para la Web, mientras el estandar es aplicado a todos los navegadores tenemos varias opciones, aquí una descripción sencilla, en la página de cada alternativa se encuentra la documentación:

sIFR

Depende de flash y javascript y con un buen uso de CSS para hacerla funcionar correctamente. No es tan sencilla de implementar. Se puede seleccionar el texto y agregar enlaces.

Seguir leyendo Alternativas para embeber tipografías en un sitio Web

NOIE6Day, adios Internet Explorer 6, el 18 de octubre

Esta iniciativa ahora está pensando en la accesibilidad, el NOIETDay se realizará de otra forma pensando en la accesibilidad

La maquetación y diseño de un sitio se hace terrible gracias a este navegador. NOIE6Day, unamonos a esta fuerte protesta contra ie6, por un día en millones de sitios de Internet (espero sean millones) este navegador no tendrá cabida, así que los usuarios que quieren ingresar a la página tendrán que utilizar un navegador más moderno. Entre las opciones se destacan los siguientes navegadores:

Como participar en el NOIE6Day

Para unirte a la protesta solo debes incluir el siguiente código en las etiquetas head de tu sitio:

[sourcecode=”php”]
< ?php // Definimos la función function NOIE6Day() { $start = date('U', mktime(-12, 0, 0, 10, 18, date('Y'))); $end = date('U', mktime(36, 0, 0, 10, 18, date('Y'))); $z = date('Z') * -1; $now = time() + $z; $isIE6 = eregi("MSIE 6.[0-9]+", $_SERVER['HTTP_USER_AGENT']); if ( $isIE6 && ($now >= $start && $now < = $end )) return true; return false; } // La llamamos if (NOIE6Day()) { die(sprintf('Hoy, día 18 de Octubre del %d es el llamado NOIE6Day. Es un día en el que los usuarios de Internet Explorer 6 no podrán entrar en esta página.
Te recomendamos que actualices a una versión más reciente o pruebes otros navegadores como Firefox, Opera, Safari o Chrome.

Más información‘, date(“Y”), $url)
);
}

?>
[/sourcecode]

La idea es sensibilizar a todas las personas que trabajan y tienen que ver con Internet, desde los diseñadores de frontEnd, que trabajan con XHTML y CSS hasta lo usuarios finales. Compartamos esta iniciativa y hagamos la diferencia con el NOIE6Day

Formas de aplicar el NOIE6Day a tu sitio

Por el momento estas son las otras alternativas para unirte a la protesta:

El mejor script para corregir transparencias DD_belatedPNG

DD_belatedPNG es el mejor script que conozco para implemmentar todo lo que habías soñado tener para Internet Explorer 6 (ie6), respecto a las transparencias de los png.

Como usarlo

En el condicional para ie6, realizas el llamado al script y en otro tag script realizas el llamado a la función para luego pasarle como parametro las clases imagenes o elementos que quieres que se corrijan con el script. yo prefiero utilizar otro archivo externo donde escribir estos elementos para no “ensuciar” tanto la plantilla.

[sourcecode=”html”]

[/sourcecode]

Saludos espero les sea de utilidad.

Clickme jquery plugin menu desplegable que empuja el contenido

clickme es un plugin de jquery que despliega el menú y además empuja tu contenido para hacer un efecto c00l. xD. Necesitas algo de CSS. Incluí unas lineas extra para darle algo de diseño, desde luego puedes personalizarlo a tu gusto.

Para usarlo llamas tu archivo de jquery, el plugin y las siguientes lineas son para ejecutar el menú:
[sourcecode language=’javascript’]

$(document).ready(function() {
$(“.nav”).clickMe();
});

[/sourcecode]

Si quieres cambiar los efectos para desplegar el menú y los nombres de clase que usa tu contenido y tu menú:
[sourcecode language=’javascript’]
$(“.nav”).clickMe({
activeMenu: “current”,
moveIt: “.content”,
moveItMargin : 0,
aniShow: { opacity: “show”, height: “show”},
aniHide: { opacity: “hide”, height: “hide”},
speed: “slow”
});
[/sourcecode]

Saludos espero sea de utilidad :).

clickme demo | descargar

Internet Explorer de quien es la culpa de que exista?

La ignorancia es el factor para el usuario y desde cierto aspecto el “miedo a lo nuevo ó desconocido”. El usuario es el que utiliza el producto y lo excuso porque no puede tener culpa por “no saber”. Pero hay otro ente que tiene gran culpa, tal vez la verdadera culpa, que retrasa tanto el avance de la Web por este browser, no deja de ser de Microsoft. Como mantener un producto de este tipo durante tanto tiempo en el mercado, me parece un acto irresponsable y hasta penalizable, ¡están atentando contra nuestras vidas!

Seguir leyendo Internet Explorer de quien es la culpa de que exista?

NivelStyle framework de CSS

logo NivelStyle

update sábado 6 de diciembre de 2008 tutorial básico

NivelStyle es un framework de CSS cross browser que siempre usa los mismos nombres de clases para realizar la diagramación, lo que permite puedas editarlo y definir los anchos que necesites según tus necesidades. No debes utilizar una grilla exacta y encasillarte en ella. Lo que permite NivelStyle es que realices anchos de columnas del tamaño que necesites y reuses siempre las mismas clases para diagramar.

No debes preocuparte más por definir nombres de columnas que luego te complicaran la vida. Defines un nombre para el contenido que se desplegará en el nivel, luego agregas bloques de contenido y los despliegas como quieras.

El framework solo requiere que sepas sumar y restar para determinar los anchos de columnas. Te brinda una solución definitiva para usar padding en las columnas, sin que este afecte los anchos, también puedes usar anchos en porcentajes para realizar diseños liquidos de una forma sencilla. Ya está disponible la primera versión de descarga.

Es un concepto para diagramar sencillo que funciona con la herencia. Por el momento soy hay una página de ejemplo, pero seguro vendran muchas más. Página de ejemplo

Slider vertical en jquery

Hace unos dias estuve trabajando en un slider vertical y pues pensé que tal vez a alguien le podría interesar, entonces mejor lo comparto :). Espero lo disfruten y me cuenten como les funciona. El slider por defecto vá rotando solo. Al ubicarse sobre el, se detiene para que el contenido pueda ser leido y las flechas de control puedan usarse. Al retirar el mouse, el slider empieza de nuevo a rotar. Para realizar el efecto del movimiento infinito, el primer y el último módulo deben ser el mismo. Ver slider vertical