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

 

 

¡Que levante la mano quién no ha hecho algún Kahoot para sus alumnos! Me extrañaría ver muchas manos en alto, la verdad, porque Kahoot se ha convertido en una de las mejores herramientas para pasar un buen rato, crear espíritu de aula y, sobre todo, ¡repasar!

Y es que nadie me puede negar que explicar de Ubuntu 18.04 no es que sea lo más divertido del mundo. Pero después ponernos en situación con un debate, conocer Linux en datos, y trastear a base de ensayo y error con la interfaz, echar un Kahoot y no fallar demasiado es coser y cantar.

Aquí os cuento mi propuesta para la parte de Ubuntu 18.04 en el tema de Sistemas operativos libres del módulo Sistemas Informáticos de los ciclos Desarrollo de aplicaciones web y Desarrollo de aplicaciones multiplataforma.

Debate sobre software libre y privativo

Qué mejor que empezar la unidad con un buen debate sobre software libre y privativo. Dividí la clase en dos grupos totalmente aleatorios: la mitad debía defender una de las dos posturas y la otra mitad la contraria. Les di unos veinte minutos para buscar información sobre su postura y ¡comenzamos el debate!

Sin duda, parece que la defensa del software libre fue mucho más fácil... hasta que alguno se pasó al lado contrario sin querer y desequilibró la balanza. El resultado: una sesión muy productiva en la que conseguimos mejorar el espíritu de aula, y conocer algunos datos sobre estas dos posturas... sin llegar a las manos 🙂

Presentación Linux

Presentación Linux

Linux en datos

En la siguiente sesión preparé una pequeña presentación sobre retazos de Linux: su creador, la base de Linux, la comunidad, características fundamentales, distribuciones... para terminar con 7 preguntas de "¿Sabías qué?" y sus respuestas en las que exponía principalmente usos de Linux que estoy segura de que desconocían. Quería que lo básico de Linux se les quedara en la cabeza sin que desconectaran a la primera de cambio.

La interfaz de Ubuntu 18.04 a base de ensayo y error

Siempre he pensado que explicar la interfaz de un programa es un poco rollo. Y más si el alumnado no puede ir probando simultáneamente: es el caso de un aula distribuida en U. Así que decidí optar por otra solución.

Entre mi compañera Marian y yo diseñamos un documento en el que los alumnos debían trastear con el entorno de este sistema operativo para poder responder a unas preguntas sin que nosotros les hubiéramos explicado previamente el funcionamiento. Y, en general, lo bordaron.

Kahoot de preguntas sobre Ubuntu 18.04 (y culturilla general)

Kahoot Ubuntu 18.04

Kahoot Ubuntu 18.04

Pues qué mejor que acabar esta parte de la unidad con un Kahoot para poner a prueba los conocimientos de la clase y ver si el documento había servido para conocer de verdad la interfaz de Ubuntu.

Aquí os lo dejo: 27 preguntas con alguna que otra de culturilla general, que siempre les despista y a alguno pone en evidencia. ¡Probadlo y me contáis!

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! 🙂

Seguro que muchos de vosotros habéis dicho esa dichosa frase de "¡Mi ordenador tiene un virus!". Con este Prezi he querido explicar de un modo muy gráfico cuáles son los diferentes tipos de malware que puede tener un ordenador... ¡porque no todos sufren de lo mismo!

Y para completar, podéis echar un ojo a estos artículos de la Revista Digital de Educación donde entro un poquito más explicando mitos, diferencias y remedios:

Mis alumnos de las ESO, Bachillerato, PCPI y SMR lo han entendido... ¿y vosotros?

Hace un par de años, para trabajar en Ciencias Naturales de 2ºESO usando Aprendizaje Basado en Proyectos, preparé esta pequeña presentación de Prezi sobre los Ecosistemas. ¡La cara que pusieron cuando vieron un Prezi por primera vez! 🙂

Terminamos el libro de texto de Mantenimiento de Sistemas Microinformáticos con la unidad 8 sobre tratamiento de residuos informáticos. Esta presentación resume los contenidos del libro, e incluye un interesante vídeo sobre los SIG.

Pero si hay algo que realmente dejó a mis chicos boquiabiertos, y sin duda a mí también, fue el documental "Obsolescencia Programada", sobre el consumismo en la actualidad, y el hecho de que los productos están "programados para fallar". ¿Se habrán concienciado de la importancia del reciclaje y el consumo responsable? Yo sí.
(más…)

Comenzamos la unidad 7 de Mantenimiento de Sistemas Micronformáticos con un Prezi sobre Gestión Logística basado en los contenidos del libro de texto.

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