Seguimos con los contenidos del módulo de Diseño de interfaces web del ciclo de grado superior de Desarrollo de Aplicaciones Web, y en esta ocasión os hablaré de SASS, un preprocesador CSS que se utiliza cada vez más en los proyectos de desarrollo web y que permite hacer uso de variables y "programación" (entre comillas) para la creación de hojas de estilos.

Os dejo una pequeña presentación donde explico qué es SASS e incluyo pequeños ejemplos sobre los distintos tipos de elementos que ofrece y cómo se traducen a CSS:

Introducción a SASS - Diseño de Interfaces Web (Desarrollo de Aplicaciones Web) from Laura Folgado Galache

Qué es SASS

Aunque las siglas se corresponden a "Syntactically Awesome StyleSheet", se trata de un preprocesador libre y gratuito de CSS que es compatible con todas sus versiones y cuya función principal es ahorrar tiempo al programador evitando la duplicidad del código.

Trabajar con él es tan facil como hacerlo con una hoja de estilos: solo tenemos que coger un editor de código y escribir. Una vez hayamos desarrollado nuestro código SASS debemos procesarlo, o bien a través de un comando en nuestra consola, o a través de algún programa, como el caso de Scout-App, que es la aplicación que utilizamos nosotros en el aula. Se encarga de procesar el código, detectar errores si los hubiera, y generar el código CSS correspondiente.

Elementos de SASS

Los elementos básicos de SASS son los siguientes:

Aunque dentro de cada una de estas secciones se puede profundizar largo y tendido.

Información sobre SASS

En la web oficial de SASS podréis encontrar toda la información sobre este preprocesador: cómo instalarlo, aplicaciones externas, tutorial de SASS y mucho más.

Además, y como no podía ser de otra manera, W3Schools también ofrece un tutorial y una guía de referencia bastante completa para consultar.

¿Y vosotros, también habéis enseñado SASS a vuestro alumnado?

Consulta otros artículos sobre el módulo de Diseño de Interfaces Web.

Uno de los contenidos del módulo de Diseño de interfaces web del ciclo de grado superior de Desarrollo de Aplicaciones Web es la planificación de interfaces gráficas (ver BOE). En esta parte, además de trabajar con bocetos (wireframes y moockups, todavía no se aclaran muy bien qué es cada uno) es necesario que el alumnado sea capaz de interpretar y elaborar una guía de estilos web.

Por eso diseñé esta presentación en la que explico el por qué de utilizar una guía de estilos, las secciones que debería tener y algunas guías de estilos web a tomar como ejemplo. Ya veremos qué es lo que sale de todo esto.

Guías de estilo web - Diseño de interfaces web (Desarrollo de aplicaciones web)

La importancia de una guía de estilos

Después de trabajar en clase el tema de las guías de estilos, un alumno, que no debió escuchar lo que dije en primer lugar, me dijo: "Entonces esto lo tenemos que hacer en la fase de planificación del reto (trabajamos por retos), ¿no?". No pasa nada, para eso estamos los profes, para repetir las cosas las veces que haga falta :_)

Es necesario recalcar que la guía de estilos es algo que se elabora para el cliente una vez acabado un proyecto, y no para realizarla antes de comenzarlo. En la guía dejamos una serie de especificaciones que los diseñadores o desarrolladores que tomen el control de la página deben saber para seguir con el mismo aspecto. Sin duda, debe haber un trabajo previo de diseño y planificación de colores, tipografías, etc. pero el producto final se entrega con el proyecto terminado.

Secciones

Toda guía de estilos web debería definir, al menos, las siguientes secciones que detallan:

Formato

Las guías pueden elaborarse en una página web o en un documento.

Si se hace de manera web, los propios elementos ya disponen de toda la información necesaria para tomarlos como modelo. Todas las grandes marcas disponen de su propia guía de estilos web: Starbucks, Mozilla, etc.

En caso de que trabajemos con un documento, es necesario especificar tooooodos los detalles (colores hexadecimales, tamaños de letra, fuentes, medidas, etc.).

Para mi uno de los mejores ejemplos de una guía de estilos web en un documento es la Guía de estilos de la Universidad Politécnica de Valencia. Pero estoy segura de que hay muchísimas más tan buenas o mejores.

¿Vosotros también trabajáis este tema en el módulo? 😉

Consulta otros artículos sobre el módulo de Diseño de Interfaces Web.

La comunicación lingüística es una de las competencias que todos nuestros estudiantes deberían alcanzar. Sin duda, para conseguirlo hay mil y una formas, y en este post os voy a hablar de una de las más originales que he aplicado en mis clases: PechaKucha. ¿Suena a chino? Pues es japonés 😉

PechaKucha

Este término tan curioso viene del japonés "cháchara", "cuchicheo" o "conversación". La idea es muy sencilla: dedicar el tiempo justo a explicar algo de manera informal, como si se lo explicáramos a un amigo, pero con dos restricciones. La primera: hay que utilizar 20 diapositivas. La segunda: cada diapositiva dura 20 segundos. En total, 6:40 minutos para explicar todo lo que necesites.

Por qué PechaKuchas

El pasado curso, hablando con mis compas Mónica Micó y Lucía Llano (@FOL_IE), siempre dispuestas a un bombardeo, comentamos las carencias que tenían a veces los alumnos al exponer los proyectos.

Queríamos encontrar una manera sencilla de que los alumnos hablaran en público sin perder demasiadas sesiones de clase y que, a su vez, aprendieran cosas que desconocieran hasta el momento, bien relacionadas con informática, web, emprendimiento o sostenibilidad.

Y sin duda, el hecho de utilizar PechaKuchas obligaba a los alumnos y alumnas a seleccionar 20 puntos clave y explicarlos en un tiempo mínimo, lo que nos permitía poder desarrollarlo todo en una o dos sesiones de clase.

El desarrollo

Teníamos dos opciones: que ellos eligieran un tema o dárselo nosotros. Y finalmente nos decidimos por lo segundo, haciendo un remix de términos relativamente novedosos sobre los que el alumnado debía buscar información a lo largo del trimestre y elaborar una presentación al estilo PechaKucha.

Términos como Blockchain, Geocatching, Grafeno, Economía colaborativa, Baldosas Inteligentes, SEO/SEM, Obsolescencia programada o la Deepweb fueron solo algunos de los que repartimos a sorteo entre nuestros estudiantes.

Durante dos horas juntamos a todo el alumnado de DAM2 y de DAW2 que iba a hacer la presentación, nuestros conejillos de indias... y de paso también a los de DAW/DAM1 que estaban por allí. Y entre PechaKucha y PechaKucha se nos pasó el tiempo volando.

¿El resultado? Hubo de todo: alguno lo llevaba preparadísimo, con las diapositivas cronometradas; otros se quedaban sin saber qué decir a la espera de que acabaran los 20 segundos o bien avanzaban (reduciendo el tiempo total de la presentación); y alguno, incluso, se pasó.

Eso sí, creo que todos aprendimos un poquito de todo de una manera rápida, sencilla y original.

¡Animáos a probarlo y me contáis!

Usabilidad

Usabilidad
Fuente: Flickr (mwichary CC BY 2.0)

Rebuscando en Internet recursos sobre usabilidad para el módulo de Diseño de Interfaces, de Desarrollo de Aplicaciones Multiplataforma, he encontrado algunas páginas muy interesantes para plantear aspectos sobre el diseño usable:

Usabilidad en sitios web:

Usabilidad en móviles y tablets:

linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram