Posts Tagged ‘CSS’

NOIE6Day, ahora una iniciativa pensando en la accesibilidad

February 25th, 2009 en General

NOIE6Day Estaba pensado de una manera más radical, pero aNieto2K admite que la iniciativa es demasiado radical desde el punto de vista de la accesibilidad. Yusef Hassan, lo convence para que los sitios sencillamente pierdan todos los estilos cuando los sitios sean cargados desde el navegador ie6.

Realmente una decisión mucho menos radical y que no perjudica a los usuario pero que crea presión para que la mayoria abandone a ie6.

Código para unirse al NOI6Day

< ?php
function NOIE6() {
  $start = date('U', mktime(-12, 0, 0, 10, 18, 2008));
  $now = time() + date('Z') * -1;
  $isIE6 = eregi("MSIE 6\.[0-9]+", $_SERVER['HTTP_USER_AGENT']);

  if ($isIE6 && ($now >= $start)) return true;
  return false;
}
?>

Mensaje personalizado

Pensando en todo, nos birndan la posibilidad de agregar nuestro propio mensaje personalizado para contarles a nuestros usuarios de lo sucedido e incentivarlos a usar un navegador más moderno.

<!--[if IE 6]>
<div id="usuarios-ie">
La versión de Internet Explorer que estás utilizando no es recomendada para navegar en Internet.
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>
</div>
< ![endif]-->

Con este código a partir del 18 de octubre no se volverán a cargar estilos para ie6 en tu sitio, para ello además debes agregar tu hoja de estilos.

<head>
...
< ?php
if ( !NOIE6() ) {
  echo '<link rel="stylesheet" type="text/css" href="styles.css" />';
}
?>
...
</head>

NOIE6Day en wordpress

Si usas wordpress puedes utilizar el siguiente código agregandolo a tu fuctions.php

< ?php
function noie6($url){
	$start = date('U', mktime(-12, 0, 0, 10, 18, 2008));
  	$now = time() + date('Z') * -1;;
 	$isIE6 = eregi("MSIE 6\.[0-9]+", $_SERVER['HTTP_USER_AGENT']);

  	if ($isIE6 && ($now >= $start))  return "";
  	return $url;
}

add_filter("stylesheet", "noie6");
add_filter("stylesheet_uri", "noie6");
?>

Disculpas y disculpas aceptadas

No veo tan grave el cambio de planes y lo tomo como una buena decisión muy a tiempo, más vale un poco tarde que nunca. Yo también me disculpo por confiar en los impulsos de aNieto2k jajaja. Miento, yo también me disculpo si tal vez alguien alcanzó a leer mi post anterior.

Apoyo al NOIE6Day

Creo que solo nos resta brindar todo el apoyo que podamos a esta iniciativa, sería genial por fin deshacernos de aquella piedra en el zapato, de verdad que sería un gran avance para el diseño, los desarrolladores, los usuarios y la Web en general. A por el NOIE6Day.

El mejor script para corregir transparencias DD_belatedPNG

February 3rd, 2009 en CSS, javascript

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.

NivelStyle – Tutorial basico

December 6th, 2008 en CSS, NivelStyle

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

(more…)

NivelStyle framework de CSS

November 29th, 2008 en CSS, Internet, NivelStyle

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

Ultimas 100 entradas

Blogroll

Clabbers

CSS

Meta

  • El mejor hosting de Internet
  • Add to Google