Skeleton, otro framework de CSS con diseño adaptable

Últimamente los frameworks de CSS surgen como champiñones. Ahora lo difícil no es encontrar un framework, sino decidirse por uno.

Acabo de encontrar un framework llamado Skeleton que hace honor a su nombre, ya que frente a otros frameworks más pesados como Twitter Bootstrap que ofrece un montón de características (tantas, que nunca llegas a conocerlas todas), Skeleton ofrece únicamente un esqueleto para la maquetación, la famosa rejilla de 960 píxeles de ancho y 12 columnas, y poco más.

¿Cuánto tiempo tarda tu página en cargar?

A través de microsiervos, ¿En cuánto tiempo carga realmente tu página web?, he conocido este fantástico sitio web que nos permite conocer el tiempo de carga de una página web desde diferentes sitios distribuidos por todos los continentes. Conocía servicios similares, pero todos eran de pago. Pero éste, por ahora, es gratuito.

He realizado una prueba con mi sitio web idesweb.es, y en la siguiente captura de pantalla aparecen los siguientes resultados:

  •  Madrid (España): 1,6 s.
  • Sao Paulo (Brasil): 4,56 s.
  • Buenos Aires (Argentina): 5,68 s.
Estos resultados son los que más me interesan, ya que el sitio web está en español. Pero también he probado desde otros sitios:
  • Ciudad de Cabo (Sudáfrica): 4,86 s.
  • Sydney (Australia): 7,32 s.
  • Pekín (China): Falla después de 20 s.

La carga de idesweb.es sólo ha fallado desde un sitio de los que he probado, Pekín (China), y en su lugar aparece lo siguiente después de 20 segundos:

Se tendrían que realizar más pruebas, pero se puede apreciar una tendencia: a mayor distancia de España, mayor tiempo de carga. Es normal, la transmisión de datos se ve afectada por las leyes de la física.

Contra las letras en mayúsculas

ALL-CAP TEXT REDUCES READING SPEED BY ABOUT TEN PERCENT. MIXED-CASE LETTERS HAVE VARIATIONS THAT BREAK UP THE TEXT INTO RECOGNIZABLE SHAPES, WHEREAS A PARAGRAPH IN ALL CAPS HAS UNIFORM HEIGHT AND SHAPE, MAKING IT APPEAR BLOCKY AND RUN TOGETHER. ALSO, THE USO OF ALL CAPS CAN SEEM CHILDISH AND AMATEUR, OR AGGRESSIVE OR UNPROFESSIONAL. RESERVE ALL-CAP TEXT FOR SHORT HEADINGS AND TITLES, AND FOR SHOUTING.

Traducción:

TODO EL TEXTO EN MAYÚSCULAS REDUCE LA VELOCIDAD DE LECTURA APROXIMADAMENTE EN UN DIEZ POR CIERTO. LAS LETRAS EN MAYÚSCULAS Y MINÚSCULAS TIENEN VARIACIONES QUE ROMPEN EL TEXTO EN FORMAS RECONOCIBLES, MIENTRAS QUE UN PÁRRAFO TODO EN MAYÚSCULAS TIENE UNA ALTURA Y FORMA UNIFORMES, HACIENDO QUE PAREZCA FORMA POR BLOQUES Y TODO JUNTO. ADEMÁS, LA UTILIZACIÓN DE TODAS LAS LETRAS EN MAYÚSCULAS PUEDE PARECER INFANTIL Y DE AFICIONADOS, O AGRESIVO O POCO PROFESIONAL. RESERVA TODO EN MAYÚSCULAS PARA LOS ENCABEZADOS Y TÍTULOS CORTOS, Y PARA GRITAR.

Prioritizing Web Usability. Jakob Nielsen, Hoa Loranger. New Riders, 2006.

Limita el número de tipos de letra y los colores

Limit the number of font styles and colors on your site and apply them consistently. People don’t trust sites that look like ransom notes.

Traducción:

Limita el número de tipos de letra y los colores en tu sitio y aplícalos con consistencia. La gente no confía en los sitios que parecen notas de secuestro.

Prioritizing Web Usability. Jakob Nielsen, Hoa Loranger. New Riders, 2006.

Yii, un nuevo framework para PHP

A la larga lista de frameworks para PHP (Cake-PHP, CodeIgniter, symfony, etc.) se añade uno nuevo: Yii.

Según la página web de Yii:

Yii is a high-performance PHP framework best for developing Web 2.0 applications.

Yii comes with rich features: MVC, DAO/ActiveRecord, I18N/L10N, caching, authentication and role-based access control, scaffolding, testing, etc. It can reduce your development time significantly.

La rejilla infinita, lo que viene después del diseño adaptativo

Muchos seguramente no saben qué es el diseño adaptable. Algunos ya lo están aprendiendo y otros ya lo están aplicando. Parece que es la solución definitiva, y sin embargo, no es así.

En el artículo The Infinite Grid nos presentan el siguiente paso, la rejilla infinita, un diseño basado en una rejilla que puede crecer, crecer y crecer, hasta el infinito.

Bufff, todavía lo estoy intentando asimilar… voy por la mitad del camino hacia el infinito.

Los centros de datos de Google

La semana pasada, Google realizó un acto de transparencia “brutal” y publicó un sitio web en el que muestra sus centros de datos (data centers) por dentro: Google Data Centers (en inglés) y Centros de datos de Google (en español).

Está claro que seguramente no nos lo enseña todo, pero algo es algo (y este “algo”, aunque sea mínimo, es impresionante).

La sensación que produce un acto como éste es tan fuerte, que en el periódico El Mundo publicaron un artículo de opinión con el título Pornografía de datos. En la revista Wired fueron más comedidos y lo titularon Google Throws Open Doors to Its Top-Secret Data Center, algo así como “Google abre las puertas de sus centros de datos secretos de par en par”. Y en Wired también podemos encontrar un artículo, Did You Spot the Stormtrooper in Google’s Data Center? con los huevos de pascua (easter eggs) que esconde el vídeo Explore a Google data center with Street View:

[kml_flashembed movie=”http://www.youtube.com/v/avP5d16wEp0″ width=”560″ height=”315″ wmode=”transparent” /]

Pero este no es el primer vídeo sobre un centro de datos que publica, en el año 2009 publicó Google container data center tour:

[kml_flashembed movie=”http://www.youtube.com/v/zRwPSFpLX8I” width=”560″ height=”315″ wmode=”transparent” /]

 ¡¡¡Todo tipo de ingeniería (obra civil, eléctrica, industrial, química, y por supuesto, informática) unidas para lograr un gran objetivo!!!

La regla del tamaño relativo

Creating pixel-perfect layout is futile. Define what the default should be but allow people to override your preset. Maintaining control means relinquishing some of it.

Traducción:

La creación de un diseño perfecto hasta el píxel es inútil. Define el diseño por defecto, pero permite a la gente reemplazar tu diseño. Mantener el control significa renunciar a parte de él.

Prioritizing Web Usability. Jakob Nielsen, Hoa Loranger. New Riders, 2006.