Después de una maravillosa semana de tres días, toca volver a la querida jornada de 5. En la primera clase de la semana vimos el concepto de prototipado, donde pudimos hacernos a la idea de conceptos básicos como migas de pan o la diferencia entre un sitio web (todo el conjunto) y página web (la web que estamos visitando en ese momento). Este prototipado es útil para definir un esquema básico de lo que va a ser nuestro sitio web, estableciendo para ello cómo será el encabezado (logo, nombre, título, etc.) el cuerpo o el pie de página. Aquí entraron en juego términos como dropdown menú, banner o modal, una jerga que se usa a diario en el mundo del desarrollo web.

Es importante destacar en este punto algo que no se nos puede olvidar cuando desarrollemos una página web, y es el hecho de incluir los correspondientes avisos legales (Política de privacidad, Aviso Legal, Cookies, etc.) en nuestra web. Esto viene definido por la Ley de Servicios de la Sociedad de la Información y Comercio Electrónico LSSI-2002 y es muy útil conocerlo para no llevarnos alguna que otra sorpresa. Como ya he comentado en anteriores entradas, gracias a que realicé un curso en desarrollo de páginas web tengo bastante interiorizado el hecho de incluir estas páginas en mis webs, aunque al final acabo copiándome la de otras webs y modificando un poco el contenido.

Un concepto que ya había escuchado, pero al que no le había prestado atención es el de Landing Page, algo que podríamos definir como la página donde proporcionamos información al usuario y queremos conseguir, a cambio, algo de él (suscripción, una venta, etc.). Por lo que pude aprender en clase, no tenía tan claro el concepto como me pensaba, pero gracias a la tarea que realizamos sobre el prototipado de una web pude afianzar los conceptos.

Ejemplo de prototipado web

Un apartado muy interesante de la clase fue la que vimos sobre Patrones de diseño. Ya conocía algo al respecto, sobre todo enfocado a patrones en el desarrollo web, pero me ha venido bien echarle un ojo a estos principios. Casi sin darnos cuenta, tenemos interiorizados una serie de concepciones como las siguientes:

  • El logo de la web siempre nos lleva a la página de inicio.
  • Usar botones para mostrar los pasos de un formulario.
  • Usar un datepicker para la fecha.
  • Emplear el uso de feedback al introducir una nueva contraseña.

En la siguiente clase empezamos a realizar el prototipado en papel sobre una web de temática a nuestra elección. En nuestro caso (realicé el trabajo con Cintia) escogimos una web sobre venta de pizzas y cursos para poder a aprender a hacerlas. Enfocamos el diseño bajo el principio de mobile first y, a continuación, diseñamos el formato escritorio. Fue muy interesante (al principio era bastante escéptico sobre el hacer el trabajo en papel), pero creo que me ayudó a expresar mejor mis ideas.

No obstante, disfruté mucho más sobre el diseño en Figma. Este software nos permite construir prototipos de una manera muy sencilla, y lo mejor es que funciona con los mismos atajos que Photoshop, un programa que llevo usando bastantes años. Aprender lo básico de Figma no fue complicado (y además era algo que tenía pendiente, pues ya conocía la aplicación): prueba y error y algún video de YouTube. Además, cuenta con la posibilidad de descargarse plantillas, lo que agiliza la creación de los prototipos. En la imagen inferior se puede ver el trabajo que realizamos.

Prototipo en Figma

Para la última clase, nos centramos en el concepto de Interacción Persona Ordenador, conocido también por las siglas IPO. Esta disciplina afecta tanto en la etapa de diseño e implementación como en la de evaluación. Se podría definir como aquello que está esperando que el usuario haga algo, pretendiendo estudiar los sistemas informáticos y las personas, así como su interacción. En general, esto es útil ya que permite mejorar la seguridad, la utilidad, la efectividad, la eficiencia y la usabilidad.

La Interacción persona-ordenador es la disciplina relacionada con el diseño, evaluación y implementación de sistemas informáticos interactivos para el uso de seres humanos, y con el estudio de los fenómenos más importantes con los que está relacionado - ACM, Association for Computer Machinery.

La parte final de la clase (la última de la semana), estuvo enfocada en estudiar el concepto de interfaz (superficie de contacto entre dos entidades) y su peso en el desarrollo. Susana nos comentó que cerca del 70% del trabajo en el proyecto se lo lleva la interfaz, algo que si pretendemos ser desarrolladores front-end tenemos que tener claro.

Sketching vs Figma

Como punto y final a la semana, me gustaría abordar las ventajas e inconvenientes entre estos dos sistemas. Creo que el dibujo a papel es algo que siempre vamos a tener a nuestro alcance, la posibilidad de plasmar nuestras ideas con un trazo hace que dibujar se convierta en una forma muy rápida de comunicación. Además, permite expresarse mejor, sin necesidad de tener que aprender los conceptos de un software (todos llevamos ya de serie la capacidad de escribir/dibujar, o eso se supone).

Aun así, personalmente me resulta más satisfactorio dibujar a ordenador (y no solo por haber estudiado Arquitectura Técnica) sino porque creo que nos abstrae de elementos ajenos (bolígrafo, papel, capacidad de dibujo). Gracias al software tenemos la posibilidad de crear ejemplos más cercanos a la realidad, usando componentes ya creados y probando paletas de colores que en papel resultaría casi imposible.

Ventajas de usar Figma

A mi modo de ver, los programadores tenemos que estar hechos de otra pasta, pues constantemente aparecen nuevos programas o lenguajes de programación que debemos aprender si queremos estar al día. El tener que aprender Figma, Photoshop o cualquier otro software no debe de echarnos para atrás, pues contamos con un exceso de información para poder buscar cursos, videos o tutoriales y empezar a dar nuestros primeros pasos en ese programa casi sin darnos cuenta.

La desventaja fundamental del software es, por tanto, que requiere de un aprendizaje previo pero en mi caso, al menos, esto no supone un gran inconveniente.

Un repaso al resto de asignaturas

Algo que me gustaría incluir en estas entradas es unos comentarios generales sobre lo aprendido en el resto de asignaturas del ciclo. En general, estoy aprendiendo mucho del resto de materias, aunque especialmente en la parte de JavaScript. Me gusta mucho como ha planteado Luismi la asignatura: a base de proyectos y dejándonos a nosotros tiempo para poder resolver los ejercicios en clase. Además, ha introducido conceptos básicos de Git (en mi caso ya conocía algo al respecto) y nos plantea retos que luego tienen su transposición en la vida laboral.

Hoy se ve que tenía bastantes ganas de escribir, pues llevo ya unos cuantos cientos de palabras. De momento vamos a dejarlo por esta semana, ya que tampoco quiero agobiarte Susana ;). ¡Vamos a por la siguiente semana!