Archivo para Julio, 2009

CSS: 3 simples pasos para que sus hojas de estilo sean más eficientes

24 de Julio de 2009

En este artículo se pretende cubrir como podemos  generar las hojas de estilo en su forma más eficiente.

1. Una hoja de estilo debe ser fácil de leer.
2. Una hoja de estilo debe ser fácil de mantener.
3. Una hoja de estilo debe ser bien comentada
4. El tiempo para alcanzar estos objetivos no debería afectar negativamente el tiempo de desarrollo de un sitio web.

Sugerencia 1: Comentario de su hoja de estilo

Lo primero sería componer la hoja de estilos por secciones. Esto tiene una serie de beneficios. Es decir, cabecera, navegación, el pie de página, etc -, esto hace que sus hojas de estilo sean mucho más manejables. El segundo beneficio es la legibilidad. Le tomará sólo un momento tener en cuenta cuando la sección de encabezado y la sección de navegación comienza.

1.   /**** Cabecera ****/
2.  /**** Contenido ****/

El segundo es explicar el uso poco ortodoxo de los estilos. Esto le permite recordar rápidamente la razón por la que ha insertado un truco o propiedad. Esto puede ser muy útil a la hora de regresar a una hoja de estilo después de un número de meses, y también ayudará a entender a otros desarrolladores porque se utilizó esa declaración.

1.  ! Importante / ** Hack para hacer la navegación del IE correcta ** /

Sugerencia 2: Organice sus estilos alfabéticamente.

Eche un vistazo al siguiente ejemplo.

1   .#header {
2.            width:200px;
3.          margin:0 auto;
4.            height: 80px;
5.            background:url(../images/header.png) no-repeat;
6.            padding:1px 0;
7.    }

Ahora compárelo con la siguiente.

1.    #header {
2.            background:url(../images/header.png) no-repeat;
3.            height: 80px;
4.            margin:0 auto;
5.            padding:1px 0;
6.            width:200px;
7.    }

Por orden alfabético la lista de atributos mejora la legibilidad de la hoja de estilos. Es mucho más fácil elegir rápidamente un elemento y modificarlo.

Sugerencia 3: Ficha de elementos anidados

Esto es algo similar a  lo de comentar sus hojas de estilo. En un esfuerzo para hacer su hoja de estilo más fácil de leer es una buena idea la ficha de elementos anidados. Veamos el siguente ejemplo.

01.    #header{ }
02.
03.            #header #logo { }
04.
05.                    #header #logo a { }
06.
07.                    #header #logo a:hover { }
08.
09.    #container { }
10.
11.            #container #sidebar { }
12.
13.            #container #content { }

Ahora compárelo con el siguiente.

01.    #header{ }
02.
03.    #header #logo { }
04.
05.    #header #logo a {}
06.
07.    #header #logo a:hover { }
08.
09.    #container { }
10.
11.    #container #sidebar { }
12.
13.    #container #content { }

La Tabulación de elementos anidados le permite ver rápidamente lo que está anidado y lo que a su vez le permite ver fácilmente cómo se anidan los elementos que afectan a uno u otro.

Cómo crear un favicon.ico

17 de Julio de 2009

Cuando usted visita un sitio web como Google, Youtube o Facebook, es posible que observe que hay un pequeño icono situado a la izquierda de la barra de direcciones. Esto se conoce como un favicon.

Pasos

1. Crear una imagen que es 16×16 píxeles de tamaño. Debe ser una imagen sencilla, para que sea inmediatamente reconocible.
2. Convertir la imagen a un archivo favicon.ico. Debe ser exactamente esto, o el navegador no lo reconoce. Una manera fácil de hacerlo es utilizar un Generador online, hay muchos de ellos.
3. Subir el archivo generado a su sitio web.
4. Agregue el siguiente código a su sitio web HTML. Usted lo debe poner en la sección <head> del código, y asegúrese de que la ruta hacia el icono es la correcta, en relación con la página web.

Código:

* <link Rel=”shortcut icon” href=”/favicon.ico” />

5. Actualizar la página y comprobar que visualizamos el icono.

Énfasis en el Diseño Web

17 de Julio de 2009

Cuando estamos trabajando en un nuevo diseño, es necesario determinar cuál es la parte más importante de la página. El desafío es pedir a los clientes cual es la parte mas importante, aún a sabiendas que te contestarán casi siempre que ” todo es importante”. Si intentamos destacar todo el contenido de la página podemos acabar con una página que tendrá muy poco atractivo.

Con el fin de poner un poco de orden al caos que nos puede ocasionar, es necesario asignar una jerarquía de los elementos en el diseño. Una cosa será la más importante, seguido por el segundo elemento más importante (s) y, a continuación, la tercera, y así sucesivamente. Esto tiene dos propósitos:

1. La jerarquía le indica al usuario la forma en que la página está destinada a ser vista. Sus ojos se dirigen al más importante elemento de la página, seguido por el segundo, y así sucesivamente a través de la jerarquía.
2. La jerarquía proporciona atención a los elementos importantes de la página sin mezclar todo en una aburrida confusión.

Técnicas de prestación de atención y una jerarquía visual en las páginas Web

Para eso utilizaremos las hojas de estilo. Si desea que sus páginas Web esten bien diseñadas y tengan una buena jerarquía, deben tener los títulos en orden: H1, H2, H3, H4, H5, H6 y después. Si el H1 no le parece lo bastante atractivo pruebe a darle estilo para que se vea mejor. Mediante el uso de estas etiquetas, se asegurará de que su jerarquía se mantiene incluso cuando la página es vista por los navegadores no visuales.

<h1> el elemento más importante </ h1>
<h2> La 2 ª más importante </ h2>
<h3> La 3 ª </ h3>
<h4> El 4 </ h4>
<h5> La 5 ª </ h5>
<h6> El 6 </ h6>

El tamaño de la fuente es una manera fácil de ofrecer jerarquía visual y énfasis a sus páginas. Cuanto más grande es el tamaño de la fuente de un elemento, más importante parecerá.

Puede cambiar el tamaño de la fuente de cualquier texto en su página web, es la mejor forma de dar estilo a sus titulares y en el párrafo de texto al tamaño que desee. He aquí cómo podemos dar estilos a esos titulares o párrafos en su Web:

p (font-size: 1em;)
h1 (font-size: 2.5em;)
h2 (font-size: 2EM;)
h3 (font-size: 1.5em;)
h4 (font-size: 1em;)
h5 (font-size: .8 em;)
h6 (font-size: .7 em;)

El color es otra gran manera de dar énfasis. Utilizaremos contraste de colores con moderación. La clave para usar el color que nos dará énfasis es usarlo juiciosamente.

Puede adjuntar el color a los titulares o los bloques de texto. Esto solamente cambia la CSS h2 etiquetas que ha dado la categoría “importante” y los párrafos con la clase “calltoaction”:

h2.important (color: red;)
p.calltoaction (background-color: amarillo;)

jQuery Visualize

10 de Julio de 2009

jQuery Visualize, es un plugin de jQuery que nos permite generar gráficas dinámicas usando <canvas /> para alogar los gráficos.

Lo curioso de este plugin es que carga los datos desde tablas <html>y el resultado no puede ser más accesible, ya que en caso de que el usuario no tenga el Javascript activo, este podrá ver la tabla con los datos, posibilitando así su comprensión.

Y lo “malo”… tu navegador debe ser HTML5 compatible, de lo contrario no podrás ver funcionar este plugin.

Fuente: anieto2k

Fiesta de Mozilla en Madrid

3 de Julio de 2009

Mozilla Europe celebrará, con motivo de la publicación de la versión final de Firefox 3.5, una Launch Party el 13 de julio de 2009 a las 20h en el Teatro Lara de Madrid (mapa).

El evento contará con invitados especiales, como Pascal Chevrel, secretario general de Mozilla Europe, quien nos hablará de las nuevas características del navegador estrella de Mozilla.

Aunque el evento es gratuito, es necesario confirmar tu asistencia enviando un formulario disponible en la web de Mozilla-Hispano.

+ Información

Baja los scripts al final del fichero

3 de Julio de 2009

Según cuenta anieto2k una de las tecnicas más usadas para reducir el tiempo de carga de una página es la de bajar el Javasciprt al final de fichero HTML, concretamente antes del tag </body>.

¡Podemos reducir un 47% el tiempo de carga de la página!

Antes:

Después:

Fuente: anieto2k