Preprocesadores CSS: LESS, Stylus y SASS

abril 15, 2014 por César Jefferson Aquino Maximiliano | 0 Comentarios

A que frontend no le aburre como se trabaja las hojas de estilo? La falta de variables, tener que repetir estilos a cada momento, tener que revisar todo nuestro código cuando queremos cambiar el color de la web, etc. CSS es un lenguaje que se está trabajando de una forma prehistorica, por asi decirlo. Sería bueno que cuando llegue CSS4 nos deje usar variables, funciones,y otras novedades.

CSS3 fue bueno, lo admito, nos dio muchas cosas que ya pedíamos hace tiempo, pero aun le falta más. Por suerte, los humanos no somos como los robots y no esperamos a que el cambio llegue, nos adelantamos a ellos.

Si antes tenías que hacer 5 líneas de código para poner bordes redondeados, usar imágenes PNG para tus sombras, porqué no buscar la forma de usar variables, hacer condicionales y funciones en nuestro CSS? Para eso tenemos los preprocesadores CSS, y en esta diapositiva que realizó un gran amigo mío: Julio López Montalvo (@TheBlasfem), veremos los tres más usados LESS, Stylus y SASS.

Exposición realizada en la reunión mensual de la comunidad WordPress Perú.

Mobile First: Prioriza lo que en verdad necesites

marzo 28, 2014 por César Jefferson Aquino Maximiliano | 0 Comentarios

Esto del mobile first (diseñar la web primero para móvil y después para desktops) lo escuché hace mucho, en principio creí que estaban equivocados. A pesar de creer 100% en que los dispositivos móviles nos invaden cada vez más y que el responsive design es obligatorio, creía que no podíamos diseñar primero para móviles porque nuestra web será visto principalmente en el navegador de una pc. Si vemos nuestro google analytics quizá tenga razón y nuestro tráfico venga principalmente de desktops, pero el mobile first va más allá del hecho de que hayan más móviles, hay otras cosas que demuestran que estuve equivocado.

mobile-first2-591x240

Prioriza lo que en verdad necesites:

Una de las razones fuertes que nos hacen pensar primero en móviles es el hecho de que cuando diseñamos en pantallas grandes tenemos mucho espacio extra y empezamos a insertar en nuestra web muchos adicionales que quizá no sean necesario usar. Algunos le ponen un cuadro para mandar mensajes de texto (no miren el lado derecho de esta web), otros le ponen contadores de visitas y otras publicidades exageradas.

Pensemos un momento en el usuario. Él busca como saber quién lo eliminó de facebook y google lo lleva a un artículo de tu web. ¿Qué hará luego ese usuario? No creo que empiece mirando las publicidades, lo que hará será leer el artículo. Entonces, porqué recargar nuestra web? nos hemos puesto a pensar que esos adicionales hacen que la web demoré un poco más en cargar?

Cuando diseñamos para celulares siempre nos preocupamos en la carga de la web, bueno, lo que debemos hacer es preocuparnos SIEMPRE en la carga de la web. Siempre que hacíamos repsonsive colocabamos primero en el css las medidas por defecto y luego íbamos chancando éstas por los cambios que se necesitaban en móviles, osea, hacíamos que el navegador cargue un estilo que luego será reemplazado. En cambio, si diseñamos primero para un celular el navegador leerá el pimer estilo que pusimos. Ya cuando lo veamos en desktop veremos las variaciones.

Conclusión:

1.- Si diseñamos primero pensando en móviles tendremos, desde el principio, un concepto de que lo que usemos se verá en todos los tamaños posibles. No nos preocuparemos por quitar cosas como lo era antes, o nos preocupábamos donde ponemos aquello para no perderlo. En móvil ya empezaste con lo más difícil.

2.- Hará que la carga de la web sea más rápida ya que no cargará un estilo y luego otro estilo que lo reemplace.

3.- Es hora de que pensemos en darle lo necesario al usuario, y eso se ve más seguidos en diseños moviles. Traslademos eso a los diseños para monitores.

Si deseas aprender más puedes leer el artículo de Silo Creativo sobre Mobile First: Diseñando la Web para el futuro.

Un diseño bonito no servirá si tu web no es funcional

marzo 12, 2014 por César Jefferson Aquino Maximiliano | 0 Comentarios

Esta mañana estuve viendo la clase de Sergio Martinez (@misterymotion) sobre “Estética y percerpción” y escuché algo muy importante. Sergio explicó sobre la web Craigslists.org y como éste tenía millones de visitas sin tener un buen diseño. Si ustedes entran a la web verán que no presenta muchos estilos, solo un listado con enlaces.

Un diseño bonito no servirá si tu web no es funcional

¿Y porqué tiene tantas visitas?

Pues la respuesta es que la web es funcional. Los desarrolladores se preocuparon más en que la web cumpla los objetivo del usuario antes que tomarse horas y horas en tener una web bonita.

Ustedes creen que esas millones de personas que visitan el sitio día a día están renegando porque el sitio no se ve como ellos quieren, yo creo que no. Sergio Martinez nos deja un muy buen ejemplo que demuestra que el diseño web no solo es saber html, css, etc. El diseño web también es pensar en como será la experiencia del usuario al visitar tu web y buscar la forma de que ésta sea satisfactoria.

Nota: La clase “Estética y percepción” es parte del curso “Diseño gráfico de interfaces y UX” que dictó mejorando.la.

Charla online sobre “Diseño web para el usuario y no para el cliente”

febrero 19, 2014 por César Jefferson Aquino Maximiliano | 4 Comentarios

[ACTUALIZACION 12/03/2014]
Aquí está la grabación https://cursos.mejorando.la/cursos/comunidad-mejorandola/material/diseno-usuario-cliente/ lamentablemente solo podrás ver el video si eres parte de la comunidad mejorandola.

Este viernes a las 4pm (Hora peruana) estaré participando de una charla sobre ux y usabilidad en la comunidad mejorandola. Cada viernes hacen charlas y exposiciones con los alumnos y en esta ocasión me toca participar.

La charla será sobre diseñar una página web enfocándonos en los usuarios finales, hacer que la página web sea para ellos y no para el cliente o nuestro jefe. Puedes dejar tus preguntas y gustosamente los responderemos.

El link del evento es el siguiente: https://plus.google.com/u/0/events/c8juneacf5odsodvdes0nk6u43o

Si eres parte de la comunidad mejorandola puedes verlo desde su plataforma y si no, les comparto ese día el link del streaming..

Será la primera vez que haré un hangout en directo asi que haré mi mejor esfuerzo porque salga todo bien. Nos vemos.

Seguir twitters que hablen de UX y usabilidad

febrero 14, 2014 por César Jefferson Aquino Maximiliano | 1 Comentario

Aqui les dejo mi lista de twitter en la que agregué a reconocidas personas, organizaciones y webs del mucho del UX y la usabilidad.

Si tienen a alguien que me falta me avisan y lo agrego; igual cada vez que encuentre a alguien más lo pongo en la lista.

Este es el enlace para la lista: https://twitter.com/jovenred/lists/jovenred-ux


PD: Mi twitter es @jovenred y de vez en cuando publico algunos artículos interesantes que encuentro sobre experiencia del usuario.

Distintas formas para aprender Laravel online

enero 28, 2014 por César Jefferson Aquino Maximiliano | 1 Comentario

Qué backend que pasó por un instituto no a escuchado y aprendido PHP? Creo que la mayoría de nosotros tuvimos nuestra clase de programación web usando php y MySQL. Pero al ver tantos nuevos lenguajes (Ruby, Python) y como se está programando el día de hoy, nos empieza a aburrir un poco el php que conocemos. Por suerte Taylor Otwell invetó un framework que cambia php para bien. Según dicen muchos, hará que programar en php nos divierta.

Ahora, todo framework nos hace la vida más facil (para eso están), pero eso se dará una vez que lo hayamos aprendido. Aqui te dejo cuatro opciones de las que estoy usando para aprender laravel, puedes elegir tu modo preferido: textos, videos, viendo el código, etc. Elige el que más se acomode a ti y aprende:

  • Viendo la documentación que nos da el mismo Laravel en su página web oficial. Está en inglés, pero no hay nada que un google translate no puede hacer.
  • Visitando la página oficial de Laravel en Mexico. Gracias a @davidportales nos enteramos de Laravel.com.mx,en donde encontraremos muchos tutoriales, podremos registrarnos y ser parte de la comunidad.
  • Siguiendo los tutoriales que Cristalab publica sobre Laravel. Ahí aprenderemos Lavaravel desde cero.
  • Viendo los videotutoriales que Alexandro Bazán a realizado. Puedes seguir los vídeos en su canal.
  • Y por último, podrás aprender de Laravel si conoces a personas que al igual que tú, están interesados en este framework. Una forma de conocerlos es siendo parte del grupo Laravel en español de facebook.

Si tienes alguna forma con la que tu has aprendido, no dudes en compartirlo. Para más información visita la página oficial de Laravel.