UTDC Blog » css

Cambiar css con javascript

Tijeran — Thu, 28 May 2009 20:00:03 +0000

Otra de las cosas que acabo de añadir al blog es la posibilidad de cambiar el css dinámicamente usando un par de librerias javascript, además, una cookie guarda el estado para que cada vez que abras de nuevo la página se mantenga el último estilo elegido.

El código es tan sencillo como casi todo en jquery, solo tienes que añadir a la cabecera los “alternates” de los diferentes css e importar tanto jquery como el plugin de este modo:

^?Ver código HTML

1
2
3

El atributo “title” es lo que usará el javascript para identificar los css.

La función para cambiarlos debe de ir como siempre nada más empezar el “body” y no hace falta modificarla en absoluto, sería asi:

^?Ver código JAVASCRIPT

<script>
(function($)
{
   $(document).ready(function() {
      $('.styleswitch').click(function()
      {
         switchStylestyle(this.getAttribute("rel"));
         return false;
      });
      var c = readCookie('style');
      if (c) switchStylestyle(c);
   });
 
   function switchStylestyle(styleName)
   {
      $('link[@rel*=style][title]').each(function(i) 
      {
         this.disabled = true;
         if (this.getAttribute('title') == styleName) this.disabled = false;
      });
      createCookie('style', styleName, 365);
   }
})(jQuery);
script>

Por último, desde los archivos php o html usamos un enlace para llamar a la función:

^?Ver código HTML

1	Cambiar estilo css...

Podeis verlo en funcionamiento en el menú de arriba o en la página web del autor.

Fuente: KelvinLuck.com

El diseño de la semana(1)

Tijeran — Wed, 27 May 2009 14:43:44 +0000

Comienzo con una nueva sección que se llamará “El diseño de la semana” y es sencillamente eso, un diseño que me haya llamado la atención cada semana. Sin más, el primero:

MauricioCastillo.com

Css Reset

Tijeran — Wed, 27 May 2009 13:19:43 +0000

Si habeis estado por aquí antes, ya deberíais saber la distinta interpretación que hacen los navegadores de las propiedades css. Además de esto, cuando omitimos una propiedad cada navegador toma las que tiene por defecto, con lo cual el aspecto puede variar de unos a otros.
El lado bueno es que dada la naturaleza del lenguaje css podemos lidiar con estos problemas fácilmente.
Cada vez que modificamos una propiedad, el css la actualiza, sobreescribiendo el valor que le habiamos dado anteriormente, es decir, la última modificación es la que prevalece. Veámos un ejemplo para entenderlo mejor:

^?Ver código CSS

body{
margin-left:10%;
margin-right:20%;
 
margin-left: 30px;
}

Según el anterior css, el margen izquierdo toma primeramente como valor el 10% de la página. Pero como después lo volvemos a cambiar el valor que se mostrará en realidad es 30px.

Usando esta versatilidad podemos cargar una serie de propiedades en “blanco” para asegurarnos de que cualquier navegador muestra lo mismo, y después sobreescribir las que necesitemos.

Esto es lo que se conoce como “css Reset”, y en internet se pueden encontrar muchos listos para ser usados.

Uno de mis preferidos es el css reset de MeyerWeb pero hay otros muchos a disposición de cualquiera:

Colección de css reset (en inglés).

Usar esta técnica debería de convertirse en algo habitual cuando programes para la web, porque no cuesta nada y puede ahorrarte muchos quebraderos de cabeza.

Introducción al html/css

Tijeran — Wed, 27 May 2009 01:37:08 +0000

Esta entrada está pensada para aquellos que tengais curiosidad por saber cómo funciona una página web y cuales son los elementos implicados en ello.
Una página web no es más que un conjunto de archivos, alojados en un ordenador remoto que llamamos “servidor”.
Cada vez que alguien se conecta a internet y accede a esa web, el servidor envia la información a nuestro ordenador que la recibe e interpreta mostrándonos como resultado la página tal y cómo estamos acostumbrados. Para leerla y entender esa información codificada, seutilizan los navegadores (firefox, ie, safari, etc)…
La mayoria de las webs están escritas en un lenguaje muy básico llamado html. Este lenguaje se incluye entre los conocidos como “de marcas”, debido a que toda la información se agrupa en partes delimitadas por etiquetas o marcas.

Aunque el html puede contener tanto los datos como el estilo de las páginas, actualmente se suelen separar dejando el contenido y la estructura estrictamente al html y el aspecto o diseño al css, del cual hablaremos a continuación.

Los css o hojas de estilo en cascada, son el complemento perfecto para dar forma a los html. Debido a que todo el html se estructura por partes definidas según las distintas marcas, es muy sencillo dar un estilo y decir como debe comportarse cada parte usando el css.
Por ejemplo, supongamos una página web que se compone de cabecera, contenido y pie de página. En html la estructuraríamos asi:

^?Ver código HTML



 

	Esto es la cabecera.
	Esto es el contenido.
	Esto es el pie de página.

Son marcas o etiquetas las palabras contenidas dentro de los símbolos mayor y menor <...>. Como habréis notado las que llevan solo una palabra son las de comienzo de sección y las que tienen una barra al principio
indican que se trata de una etiqueta de cierre de sección.

^?Ver código HTML

...

También os habréis dado cuenta de que hay dos etiquetas escritas en inglés, estas dos son invariables y todo documento html debe tenerlas; dentro del se situará la información de la página y dentro del el contenido que se mostrará, es decir, la página propiamente dicha.

Las secciones que nosotros hemos creado tienen esta estructura:

^?Ver código HTML

No son más que divisiones(div) con un identificador(id) que será el atributo que usaremos en el css.

Una hoja de estilo para el html anterior tendría el siguiente aspecto:

^?Ver código CSS

1
2
3

#cabecera{top:0; width:100%; height:100px;}
#contenido{width:80%; height:500px;}
#pie{bottom:0; width:100%; height:200px;}

Como dijimos, los atributos que hemos usado eran: cabecera, contenido y pie, que nos los hemos inventado nosotros mismos, y para cambiar sus propiedades en css usaremos esta pauta:

^?Ver código CSS

1	#nombre{propiedad1; propiedad2; ...}

En css hay propiedades para hacer casi cualquier cosa, las que he cambiado en el ejemplo de antes afectan a la posición y el tamaño(ancho y alto) de cada sección.

Sin duda su simplicidad es abrumadora, pero los diseñadores web se encuentran a menudo con un problema grave. La última palabrar la tienen los navegadores, pues son ellos los que deciden como interpretar la información que les llega, y dado el extenso mercado, tuvieron que crearse estándares, para que el mismo código sirviera tanto en firefox como en internet explorer, etc. Sin embargo, no todos los navegadores cumplen los estándares, este es el caso de el ie6 y el ie7, que muestran las cosas de diferente manera a como deberían, pero de eso hablaremos otro día.

Aunque la dualidad html/css es sencilla y eficiente, es fácil darse cuenta de que supone un problema a la hora de generar los contenidos, y esto es porque son lenguajes estáticos, que solo pueden modificar sus contenidos de manera directa, es decir, a mano, por un programador, y han de ser actualizados en el servidor cada vez que se realice dicho cambio.

Debido a esta importante limitación, han ido surgiendo otros lenguajes que los complementan y modifican para crear contenidos dinámicos y en tiempo real. Algunos de los más importantes son el .php, el Ruby , el Perl, el Scheme, etc.

Además, dada la necesidad de guardar los increíblemente extensos contenidos de algunas webs de forma organizada, también se han creado las conocidas bases de datos, por poner un ejemplo que está muy de moda, las bases MySql.

Dentro de poco veremos más a fondo casos puntuales de problemas con css en ie6/ie7 y cómo solucionarlos, y profundizaremos en el uso del css con diversos “trucos” y “hacks”.