Por fin, luego de un largo camino, se han publicado los resultados. En el 7 del 7 del 07, Machu Picchu ha sido reconocida cómo una de las Nuevas 7 Maravillas del Mundo. Uno no puede estar más feliz y contento. El resultado final, publicado hoy en n7w, quedó cómo sigue… (ver fotos)

Leer más…

¿Tu página web se demora en cargar? Pingdom ha sacado una herramienta realmente útil a la hora de analizar el tiempo de carga de una página web. Pingdom descarga la página web completamente, incluyendo imágenes, css, javascript, rss, flash, frames/iframes, incluyendo elementos externos (el reproductor de youtube, las imágenes en flickr, etc.). Es decir, realiza una imitación de lo que sucedería al momento de ver una página web con el navegador.

El tiempo de mora de cada objeto se muestra en barras de tiempo y es un dato interesante para determinar que objeto es el que ocasiona la lentitud de la página. La barra esta dividida en 3 colores:

• Azul, representa el tiempo en que se recibe el primer byte.
• Verde, el tiempo en que se recibe el último byte.
• Amarillo, el tiempo en que se muestra.

Además, Pingdom nos muestra el enlace al objeto, el peso de cada uno de ellos y un sumario del análisis al sitio web.

Finalmente, si tienes problemas con la carga de la web, sigue estos consejos. Si el problema son las imágenes, aquí tienes otros. Y si el problema es la carga del primer byte, puedes optimizar las consultas mysql y/o utilizar un sistema de cache con php. 

Enlace | Pingdom

La antigua técnica para maquetar una página, se basaba en tablas. Sin duda, en su momento fué una herramienta útil. Sin embargo, a medida que la Web a venido evolucionando, esta misma técnica a sido la culpable de muchos problemas para los webmaster.

• El uso de las tablas está condicionado a la mera tabulación de datos.
• Un diseño con tablas no es flexible, es decir, que no podemos cambiar la distribución de los elementos en la página, a menos que la volvamos a hacer.
• Cada Explorador renderiza de manera distinta cada documento HTML y con estructuras con tablas el cambio es más notorio
• Ocupa más espacio y más ancho de banda.
• Google no indexa de igual manera las páginas con estructuras basadas en tablas.

Ahora, que ya conocemos todas estan desventajas de usar maquetación basada en tablas, podemos darnos cuenta que, comparada con la técnica de maquetación con DIV’s, las tablas son mas bien un estorbo en la optimización de nuestros sitios. Para maquetar correctamente con DIV’s debemos hacer uso extenso de CSS, algo que tal vez no nos guste mucho, pero que reducirá el tiempo de desarrollo considerablemente. Antes de comenzar, debemos:

• Elegir un buen editor HTML
• Tener la guía de XHTML y CSS a mano. Sin ánimo de hacer publicidad, podemos solicitar una copia gratuita a la oficina de la W3C de España
• Tener instalado en nuestro sistema como minimo Internet Explorer 6 y 7 (sí, aunque no lo crean, se puede instalar multiples versiones de Internet Explorer en un computador), Mozilla Firefox y Opera, y si son usuarios de Macintosh; Safari.
• Lapiz y Papel: lo mejor será que el diseño de la página lo hagamos de esta manera. La razón de esto es que de esta manera, tendremos un plano adecuado de los elementos y distribución de los bloques que vamos a trabajar, tratando de optimizar el número de bloques, por que recordemos que entre más compleja es nuestra página, más riesgo enfrentamos de que el explorador la renderice incorrectamente.

Entendiendo la Lógica de la maquetación con DIV’s

Casi todos hemos usado elementos DIV. Sabemos por experiencia que un elemento DIV nos reserva un bloque y que todo lo que vaya después; caerá a la linea siguiente. Pero, al igual que las imagenes, los elementos DIV, pueden configurarse para que dejen el texto y los elementos al lado. Esto lo lograremos con el atributo FLOAT; que usaremos ampliamente para ir adecuando nuestros elementos en la página. Un DIV con FLOAT: LEFT ó RIGHT, se alineará dejando el texto al lado. Podemos ir creando DIV’s sucesivos para que se vayan colocando, uno al lado del otro. Pero, maquetando de esta manera surge un problema y es que el DIV se torna flotante y se sale de su contenedor. Para solucionar esto, el contenedor deberá tener como atributo DISPLAY: TABLE (generalmente). Esto hará que el tamaño del contenedor se adapte a sus elementos.

Además, lo mejor será que trabajemos con anchos fijos y no en porcentaje (aunque, con un conocimiento más amplio, yo lo recomendarí), en pixeles, por que los exploradores trabajan con algunas variaciones en las medidas (en especial Internet Explorer, que “hasta pierde pixeles”) el renderizado será más parecido de explorador a explorador.

Una recomendación adicional, sería usar siempre clases CSS para cada sección y bloque, tratando de ir generalizando con los atributos para optimizar la página. Pero si los atributos son pocos ó solamente en esa página se va a trabajar con un elemento con atributos únicos, podría personalizarse colocando los atributos y valores CSS, dentro de una parámetro STYLE, no olvidando utilizar estilos por defecto.

Ahora que ya sabemos lo esencial, vamos con el primer ejemplo, resolviendo dudas, conforme avanzamos.

Articulos Relacionados:

• Maquetando con DIV’s (ejemplo I)
• Maquetando con DIV’s (ejemplo II)
• Maquetando con DIV’s (ejemplo III)
• Maquetando con DIV’s (ejemplo IV)

“Tanto los optimistas como los pesimistas han contribuido a nuestra sociedad. Los optimistas inventaron el aeroplano y los pesimistas el paracaídas”

Gil Stern

“Convendría no precipitar el tiempo ni dejarnos atropellar por él, una tarea saludable, urgente, en una sociedad que nos acucia, a menudo con nuestro consentimiento.”

Pierre Sansot

Hoy 13 de Junio, celebro un año más de vida y como cualquier día la pasé laborando en la oficina, recibí saludos de todos mis compañeros, les cuento que como todos los cumpleaños se realizó un almuerzo para festejarlo. Un gesto de compañerismo y buenos deseos que es ya Tradición en la Empresa. Gracias por ello.

Este es una pequeña nota para recordarles, a quienes aún no lo hayan hecho, que a partir de hoy faltan exactamente 4 semanas (1 mes aprox.) para el cierre de las votaciones y elegir a las nuevas siete maravillas del mundo.

Nosotros desde hace buen tiempo ya, inicios del 2006, publicamos un artículo al respecto. Así que si no saben cómo votar, ingresen a este enlace, donde explicamos los pasos: Machu Picchu y las Nuevas Siete Maravillas del Mundo. Además, recuerden que la votación es por email. Si tienen varios, ya saben que hacer. Además, al votar uno escoge 7 lugares, obviamente entre ellos Machu Picchu.

Faltando 28 días, Machu Picchu es uno de los favoritos, actualmente figura entre los diez monumentos más votados; sin embargo, no sabemos si esta entre los primeros 7 ó en el puesto 10. Es por ello, que se necesitan los votos de todos.

Enlace | n7w (¡Vota por Machu Picchu!)

Es cierto que un diseño atractivo se percibe como más usable, pero dejar todo el peso de un proyecto en la estética o el gusto de un diseñador sin tener en cuenta los principios de usabilidad puede ser peligroso.

Buena observación XD

En el Yahoo! User Interface Blog, hace unos días, publicaron un interesante artículo sobre como, con DOM, añadir CSS dinámicamente dentro de nuestra página. Mediante una simple función javascript podemos embeber CSS dentro de nuestro HTML, añadiendo las etiquetas <style></style> dentro de la cabecera de nuestra web. La función es:

1. function addCss(cssCode) {
2. var styleElement = document.createElement(“style”);
3. styleElement.type = “text/css”;
4. if (styleElement.styleSheet) {
5. styleElement.styleSheet.cssText = cssCode;
6. } else {
7. styleElement.appendChild(document.createTextNode(cssCode));
8. }
9. document.getElementsByTagName(“head”)[0].appendChild(styleElement);
10. }

Este método es soportado por todos los navegadores modernos. Podemos utilizarla tanto para cambiar dinámicamente nuestro CSS o para añadir nuevas propiedades al mismo. Por ejemplo, podríamos cambiar el fondo de nuestra web:

1. <a href=”javascript:addCss(‘body{background-image: url(images/pat.gif);}’)”>Cambiar fondo</a>

¿Quién movió mi queso? es uno de esos libros de bolsillo claves para estos tiempos de cambios constantes. Es un best seller que nos cuenta la historia de cuatro personajes, inmersos en un laberinto, en búsqueda de un queso. El queso, por supuesto, es una metáfora; significa aquello que anhelamos: éxito laboral, en los estudios, etc.

Ahora veremos el video de ¿Quién movió mi queso? la película, un video de automotivación que nos enseña a aceptar los cambios y no aferrarnos a ellos.

¿Quién movió mi queso? deja en claro que hay que saber adaptarse al cambio, pues esto siempre ocurre (se dice que lo único que no cambia es el cambio). Y, por tanto, quien mejor se adapte al cambio, será quien salga adelante más prontamente.

Sin embargo, yendo un poco más allá. Si uno es consciente de que el cambio existe y que es constante. Sobre todo en la red. Quienes tienen éxito, ya no son los que se adaptan, sino los que se preparan y anticipan a él. Si no han leído el libro, no se pierdan el video.