1. Inicio
  2. CSS
  3. Diseño Web
  4. HTML
  5. JavaScript
  6. Miscelanea
  7. Recursos
  8. SEO
  9. Usabilidad

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

Chroma, by Lúcuma labs

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

  1. Avatar de Lucía Lucía

    En firefox 3.0.19 no me funciona

  2. Avatar de Germán 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. Avatar de braulio braulio

    Ya van por el primer puesto, genial!

  4. Avatar de Stroke 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. Avatar de luizdev luizdev

    muy buena aplicacion se parece a 0to255.com

  6. Avatar de Gonzalo 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. Avatar de Germán 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. Avatar de Gonzalo 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. Avatar de Germán 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. Avatar de Gonzalo Gonzalo

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

    Gracias!!!

  11. Avatar de Germán 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. Avatar de Gonzalo Gonzalo

    Genial :)
    Quedo a la espera del post.

    Mil gracias Germán!

Deja un comentario

Algunos recursos para Diseñadores Web

Firebug
Genial extensión de Firefox que permite ver y editar HTML y CSS de cualquier página, entre otras cosas.
Web Developer Toolbar
Extensión de Firefox, agrega una barra de menu con muchas herramientas utiles para diseño y desarrollo web.
YSlow
Complemento para Firebug creado por Yahoo, da estadísticas de la velocidad de carga de la página así como sugerencias para mejorarla (requiere Firebug).
W3C Markup Validation Service
Valida tu HTML o XHTML, una herramienta indispensable.

Entra a la página de recursos para diseñadores web y mira la lista completa

¿Quien escribe Aprendiendo Web?

Germán MartínezHola, soy Germán Martínez, diseñador web y fundador de PreZentit.com, la primera aplicación web 2.0 creada en Perú.

La idea de Aprendiendo Web, es ser una fuente de información en español de estándares y buenas prácticas, así como de las últimas tendencias en diseño web.

Me apasiona el (X)HTML, CSS, SEO y todo lo que tenga que ver con diseño y desarrollo web.

-12.126668, -77.029910