Creando una aplicación web en menos de 10K

Mix Online y An Event Apart están llevando acabo el concurso 10K Apart.

Las reglas son simples:

• El tamaño total del archivo, incluyendo imágenes, scripts y marcado no puede ser mayor a 10K.
• La app debe cumplir estñandares, de preferencia HTML5.
• La aplicación debe correr igual de bien en IE 9 Dev Preview, Firefox y un navegador basado en webkit.
• Se pueden usar Jquery, Prototype y Typekit como recursos externos. (no cuentan para los 10K)

Nuestra aplicación

Juan Pablo y yo decidimos participar y creamos una aplicación para mostrar tonos de color llamada Chroma.

Fue muy divertio optimizar todo el código para terminar con 10112 bytes que tienen las siguientes características:

• Rueda de color hecha con Canvas
• La Url refleja el color seleccionado (ideal para compartir colores)
• Usamos Media Queries para adaptar el diseño a diferentes resoluciones de pantalla (incluyendo dispositivos móviles).

Si quieres darle una mirada entra a http://10k.aneventapart.com/Entry/97 y si tienes tiempo puedes calificarla con 5 estrellas y ayudarnos a ganar el concurso :)

¿Qué opinas de Chroma?

Nota: Para ver la app necesitas Firefox 3.6, Safari 5, Chrome 5 o Internet Explorer 9 Dev preview.

Comentarios

deja un comentario

1. Lucía

   En firefox 3.0.19 no me funciona

2. Germán

   Hola Lucía,

   Efectivamente, esa app sólo corre en los navegadores más modernos.
   He agregado una lista de navegadores al final del post.

   Gracias por el comment!

3. braulio

   Ya van por el primer puesto, genial!

4. Stroke

   En Opera 10.70 funciona con un pequeño detalle cuando utilizas la rueda para seleccionar colores esta se mantiene detrás de las barras.

5. luizdev

   muy buena aplicacion se parece a 0to255.com

6. Gonzalo

   Esta muy buena. Me surge una duda, si uno optimiza mucho el código (HTML, CSS y JS) puede ser contraproducente para SEO?

7. Germán

   Hola Gonzalo,
   En este caso el SEO no era un problema para nosotros, pero si es cierto que al tratar que el código HTML sea lo más pequeño posible, de no tener cuidado, podría traer consecuencias.
   Lo importante es saber hacer un buen HTML semántico :)

   Con respecto a CSS y JS, estoy bastante seguro que cualquier optimización aquí sólo hará mejorar tu página.

   Saludos,
   Germán

8. Gonzalo

   Muchas gracias por tu respuesta Germán.
   Cuando hablo de optimización me refiero a: unificar todos los CSS en un único file (con esto bajo la cantidad de request), lo mismo para todos los JS. Una vez realizado esto mi idea es borrar todos los espacios en blanco, tabs, enters, y ofuscar las variables.
   Podemos decir entonces que si únicamente optimizamos los css y js no debería perjudicar a SEO mientras respetemos una buena semántica en el HTML???

9. Germán

   Hasta donde sé no hay problema en hacer eso.
   De hecho tus páginas cargarían más rápido y ahora la velocidad de carga es uno de los factores que el algoritmo de Google toma en cuenta.

10. Gonzalo

    Excelente noticia Germán!
    Conoces alguna herramienta para hacer unificación y compresión de: CSS,JS y HTML?

    Gracias!!!

11. Germán

    Hay varias... y sería un buen post.
    Déjame investigar un poco y actualizo el blog con una lista de recursos!

12. Gonzalo

    Genial :)
    Quedo a la espera del post.

    Mil gracias Germán!