CSS

Archive for the ‘CSS’ Category

El super Sprite de YouTube

March 22nd, 2010 en CSS

3 Comments

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

December 9th, 2009 en CSS, javascript, recursos

2 Comments

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.

Continue reading “Alternativas para embeber tipografías en un sitio Web” »

NOIE6Day, adios Internet Explorer 6, el 18 de octubre

February 25th, 2009 en CSS, La web, Usabilidad

6 Comments

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:

< ?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.
		<br />
		Te recomendamos que actualices a <a href="http://www.microsoft.com/windows/products/winfamily/ie/default.mspx">una versión más reciente</a> o pruebes otros navegadores como <a href="http://www.mozilla.com" title="Firefox web browser">Firefox</a>, <a href="http://www.opera.com/" title="Opera Browser">Opera</a>, <a href="http://www.apple.com/safari/" title="Apple Safari">Safari</a> o <a href="http://www.google.com/chrome" title="Google Chrome">Chrome</a>.
		<br />
		<a href="%s">Más información</a>', date("Y"), $url)
	);
}

?>

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

February 3rd, 2009 en CSS, javascript

3 Comments

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.

<!--[if IE 6]>
<script src="DD_belatedPNG.js"></script>
<script>
  /* EXAMPLE */
  DD_belatedPNG.fix('.png_bg');

  /* string argument can be any CSS selector */
  /* .png_bg example is unnecessary */
  /* change it to what suits you! */
</script>
< ![endif]-->

Saludos espero les sea de utilidad.

Clickme jquery plugin menu desplegable que empuja el contenido

December 31st, 2008 en CSS, jquery

9 Comments

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


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

Si quieres cambiar los efectos para desplegar el menú y los nombres de clase que usa tu contenido y tu menú:

	$(".nav").clickMe({
			activeMenu: "current",
			moveIt: ".content",
			moveItMargin : 0,
			aniShow: { opacity: "show", height: "show"},
			aniHide: { opacity: "hide", height: "hide"},
			speed: "slow"
	});

Saludos espero sea de utilidad .

clickme demo | descargar

NivelStyle – Tutorial basico

December 6th, 2008 en CSS, NivelStyle

2 Comments

Para realizar el tutorial debes bajar los archivos básicos del sitio NivelSytle. La idea es trabajar por niveles y bloques de contenido. La estructura básica es la siguiente:

	<div class="container">
		<div id="brandign">
			<h1><a href="#">Despliegue blog en porcentaje</a></h1>
		</div>
		<!-- fin brandign -->
		<div class="content">

            <!-- NIVELES -->	

		</div>
		<!-- fin content -->
		<div class="footer" >

			<!-- CONTENIDO FOOTER -->  

		</div>
		<!-- fin footer -->

	</div>
	<!-- fin container -->

Continue reading “NivelStyle – Tutorial basico” »

Internet Explorer de quien es la culpa de que exista?

November 30th, 2008 en CSS, Internet

5 Comments

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!

Continue reading “Internet Explorer de quien es la culpa de que exista?” »

NivelStyle framework de CSS

November 29th, 2008 en CSS, Internet, NivelStyle

9 Comments

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

July 1st, 2008 en CSS, jquery

24 Comments

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

You are currently browsing the archives for the CSS category.

Blog de diseño