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.
Etiquetas:
Comentarios
deja un comentario
En firefox 3.0.19 no me funciona
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!
Ya van por el primer puesto, genial!
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.
muy buena aplicacion se parece a 0to255.com
Esta muy buena. Me surge una duda, si uno optimiza mucho el código (HTML, CSS y JS) puede ser contraproducente para SEO?
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
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???
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.
Excelente noticia Germán!
Conoces alguna herramienta para hacer unificación y compresión de: CSS,JS y HTML?
Gracias!!!
Hay varias... y sería un buen post.
Déjame investigar un poco y actualizo el blog con una lista de recursos!
Genial :)
Quedo a la espera del post.
Mil gracias Germán!
Deja un comentario