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.

Como todos los finales de curso tormentosos, este no iba a ser menos: cierre del seminario de Microformación TIC, exámenes de fin de evaluación, maquetación del anuario, montaje de la Intranet del centro... pero nunca es tarde si la dicha es buena, y hoy os traigo las últimas actividades que he hecho con mis alumnos y alumnas de Sistemas Informáticos, concretamente para la unidad de Seguridad Informática.

Conceptos básicos sobre seguridad informática

En primer lugar, les expliqué los conceptos básicos gracias a unos apuntes de diez de mi compañero y director de centro, Miguel Carrillo (@mcmprof01). Me consta que los asimilaron muy bien, porque en la parte teórica del examen (preguntas cortas y de desarrollar), que únicamente era sobre Seguridad, la nota más baja fue un 8,25. ¡Unos cracks!

Wiki

La segunda parte consistía en la creación de una Wiki sobre malware y otras amenazas de seguridad informática. Cada alumno debía elegir un término e indicar sobre él: descripción, síntomas, propagación, solución, prevención y ejemplos o casos de ese tipo de malware.

Wiki - Ingeniería social

Wiki - Ingeniería social

 

 

 

 

 

 

 

Los términos que podían elegir eran: virus, gusano, troyano, rootkit, phising/pharming, ramsonware, stealer, keylogger, hijacking, rogue software, botnet, DDoS, bombas lógicas, adware/banner/popups/popunders, drive by download. Como ejemplo, yo preparé Ingeniería social, para que pudieran ver cómo tenían que hacerlo (que a veces sin ejemplos hacen cada churro "que pa qué").

Pechakuchas

La última parte les ponía de nuevo frente a sus compañeros y una presentación, pero esta vez cronometrada: debían hacer un pechakucha sobre un malware. ¿Que qué es eso de Pechakucha? Os lo conté en el artículo "Pechakuchas: 20 diapositivas y 6:40 minutos para explicar un concepto". En esta ocasión, las condiciones eran un poco flexibles: en lugar de obligar a hacer 20 diapositivas en 20 segundos les permití entre 12 y 20 diapositivas de 20 segundos (entre 4:00 y 6:40 minutos).

Y una vez más quise demostrarles cómo debían hacerlo y así evitar que saliera como la vez anterior, que algunos pasaban las diapositivas con el espacio o no llevaban cronometrado el discurso: preparé una pechakucha en Canva sobre Ingenería Social (¡me encanta esta parte!) y la presenté en mi clase y en la clase de 1º DAW. ¡Y para muestra, un botón!

Pechakucha Ingenería social

Pechakucha Ingenería social

 

 

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!

Por si os quedasteis con ganas de más después del artículo sobre Presentaciones atractivas con Canva, os traigo la segunda parte de la sesión del seminario de Microformación TIC: presentaciones con Genially.

Podréis ver un videotutorial sobre la parte de presentaciones que ofrece esta pedazo de herramienta. Pero hay mil opciones más que os invito a probar.

Genial.ly

Genially, o Genial.ly es una web creada por Juan Rubio y Luis García en el año 2015 que premite crear presentaciones con multitud de elementos interactivos: imágenes, sonidos, vídeos... y otro montón de recursos animados que ofrece de manera gratuita o de pago. Además, permite interacción por parte del usuario mediante la integración de diferentes tipos de contenidos (chinchetas, mapas, etc.).

Tiene un lema que describe a la perfección su filosofía: "No más contenidos aburridos", así que os podéis hacer una idea de que no da lugar a "esas" presentaciones que se os están viniendo a la cabeza.

Solo tiene una pega (bastante importante), y es que ofrece muchas limitaciones tanto en los contenidos como en la descarga de las presentaciones.

Videotutorial

Ya sabéis que las sesiones de microformación vienen acompañadas de un videotutorial que cuelgo en la web del Plan Tic de nuestro centro.

Pues en el de esta ocasión podreis ver cómo crear una sencilla presentación con Genially utilizando prácticamente todas las opciones que nos ofrece. Como siempre, para muestra, un botón:

Y por último, el cartel promocional de esta sesión compartida con Canva.

Presentaciones originales

Presentaciones originales

Diseños de pósters de Canva

Diseños de pósters de Canva

Hace un par de años mi compañera de FOL, Lucía (@FOL_IE) me enseñó Canva. Y desde entonces cambié radicalmente mi manera de diseñar documentos, presentaciones, pósters...

Lucía elaboró una fantástica campaña que tituló #FPEnPositivo con el fin de visibilizar la FP en nuestro centro. Para ello diseñó con Canva carteles con datos reales sobre inserción laboral, reconocimiento, etc. Os hablaré de esta campaña muy pronto (este viernes, por ejemplo, ya que estoy...).

Canva

¿Qué es Canva? Es un sitio web de diseño gráfico que permite crear presentaciones, pósters, documentos... de manera súper sencilla utilizando la técnica de arrastrar-y-soltar. Pero eso no es todo: el potencial que tiene esta herramienta es que ofrece cientos de plantillas ya preparadas y en las que solamente tienes que cambiar texto e imágenes y para conseguir resultados muy muy profesionales.

Desde que lo conozco, lo utilizo para todo: pósters para el aula, trípticos de publicidad de los ciclos, ¡hasta el anuario del año pasado lo hice basado en un diseño de Canva!

Videotutorial

Como ya os comenté en el artículo Primeros pinitos como coordinadora TIC, además de las sesiones de microformación de los jueves, elaboro un pequeño videotutorial sobre lo que trabajamos en ellas y lo comparto en la web del Plan Tic de nuestro centro.

En el de esta ocasión podréis ver todas las opciones que ofrece Canva para crear presentaciones atractivas: trabajar con tipografías, colores, imágenes, gráficos, importar, exportar... Y para muestra, un botón:

Y por último, el cartel promocional de esta sesión, creado con Canva (cómo no) en la que, además, trabajamos con Genial.ly. Pero eso os lo contaré en otro post.

¡Probadla! ¡os cambiará la vida! (o casi).

Presentaciones originales

Presentaciones originales

El pasado 21 de febrero me desplacé hasta la capital burgalesa para dar una ponencia sobre cómo utilizar TICs en el aula de FP Básica. El título de la misma era "Propuestas y programas para trabajar con las TIC en el aula de FPB", y se encontraba dentro de un curso dirigido a profesores de FPB interesados en "diseñar su propio itinerario formativo y formar parte de un equipo de docentes que aprende, comparte, adapta y aplica en el aula". El programa del curso englobaba 5 ponencias externas de 3 horas cada una, entre las que se encontraba la mía, un módulo de trabajo colaborativo de 7 horas y un módulo más de aplicación, de 8 horas.

Tuve la suerte de contar con un grupo de docentes con muchas ganas de conocer recursos, metodologías y herramientas para trabajar con el alumnado de FPB, un alumnado que, por experiencia, requiere una gran dosis de motivación y fuerza de voluntad. Así, enfoqué la ponencia desde la perspectiva de tres metodologías con las que he trabajado y trabajo, y considero que pueden ser muy interesantes para este tipo de niveles (Aprendizaje Cooperativo, Aprendizaje Basado en Proyectos y Gamificación), y herramientas TIC a aplicar en este tipo de metodologías.

Aunque la selección fue muy meticulosa teniendo en cuenta las diferentes especialidades del profesorado que acudía a la ponencia, me habría gustado dedicar otro par de horas para poder trabajar con ellas en profundidad. Pero el tiempo es oro, así que aquí os dejo con la presentación de la charla y el start.me con todos los enlaces y herramientas con las que trabajamos.

Las TIC en FPB

Las TIC en FPB

Start.me de herramientas y recursos TIC para ciclos de Formación Profesional Básica.

El pasado jueves dí una pequeña charla a los alumnos de 1º de Sistemas Microinformáticos y Redes enseñándoles cómo hacer sus primeros pinitos con la versión Mavericks de OS X. Previamente habían instalado este sistema entorno operativo en Virtual Box, así que solamente les quedaba aprender a defenderse con él.

En primer lugar vimos una pequeña presentación creada con Emaze sobre los inicios de Mac OS, y su evolución hasta OS X:

Presentación sobre OS X (emaze)

Presentación sobre OS X (emaze)

Luego aprendimos a utilizar Spotlight, el Launchpad, el Dashboard, Mission Control y el Dock, y a instalar y desinstalar aplicaciones desde Apple Store y desde una web oficial. Ahora sólamente les queda trastear con ello y coger soltura... ¡no es tan dificil! 🙂

Para comenzar el curso de "Auxiliar de Operaciones de Montaje y Mantenimiento de Equipos Microinformáticos" del ecyl, ¿qué mejor que hacerlo en el módulo de TICs con una presentación sobre la historia de la informática?

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