Currículo: este documento contiene un complemento práctico de los saberes básicos desarrollados en el Tema 3. Edición y creación de contenido correspondiente a 4º ESO.
Tabla de contenidos
- 1. Introducción
- 2. ¿Qué es Webflow?
- 3. Características de la herramienta
- 4. Primer proyecto con Webflow
- 5. Profundizar en la herramienta
1. Introducción
Cuando nos enfrentamos al código por primera vez, todo nos parece un mundo. Además, hacerlo directamente sobre los tres lenguajes que necesitamos dominar -HTML, CSS y JavaScript- es una tarea realmente complicada.
Para aquellos que empezáis a dar vuestros primeros pasos en el desarrollo web, el salto desde el conocimiento teórico a la práctica de programación en tres lenguajes, es demasiado largo. Aquí es donde Webflow emerge como una solución intermedia y tremendamente útil.
Esta herramienta nos permitirá entender conceptos prácticos del desarrollo web sin que sea necesario aprender desde cero ningún lenguaje de programación.
Realmente estamos aprendiendo multitud de conceptos de programación, pero sin escribir código directamente.
2. ¿Qué es Webflow?
Webflow es una plataforma de diseño web que elimina la necesidad de escribir código manualmente, ofreciendo una interfaz visual intuitiva que transforma la manera en que se aborda la creación de sitios web.
3. Características de la herramienta
Bueno, ya hemos hecho las presentaciones, pero: ¿qué hace exactamente a Webflow una herramienta no-code ideal para iniciarse en el desarrollo web?
Primero, Webflow democratiza el desarrollo web al permitir que usuarios sin conocimientos previos de programación construyan sitios web completos y gráficamente atractivos.
Su interfaz de arrastrar y soltar simplifica el proceso de diseño, a la vez que ayuda a comprender visualmente la estructura y el comportamiento de un sitio web.
Es importante destacar que, aunque Webflow se presenta como una herramienta no-code, no compromete la calidad ni la complejidad del producto final. Los sitios web creados en Webflow son «responsive» por naturaleza, asegurando que se vean y funcionen bien en una variedad de tamaños de pantalla. Esto nos ayuda a jugar con el concepto de diseño adaptativo sin necesidad de lidiar manualmente con las complejidades del código CSS.
Otra ventaja significativa de Webflow es la forma en que facilita una transición suave hacia la comprensión del código. Aunque los usuarios no necesitan escribir código directamente, Webflow genera automáticamente un código limpio para los diseños creados. Esto proporciona una oportunidad única para que veáis cómo se traducen vuestros diseños visuales en HTML, CSS y JavaScript reales.
Finalmente, la capacidad de Webflow para integrar funcionalidades interactivas sin la necesidad de escribir JavaScript manualmente os permite experimentar con la creación de experiencias web dinámicas. Esto también nos proporciona una comprensión básica de cómo la interactividad se implementa en un sitio web, sentando las bases para un aprendizaje más profundo de JavaScript en el futuro.
4. Primer proyecto con Webflow
Estupendo, tenemos claras todas las ventajas y sabemos qué es capaz de hacer esta herramienta, pero todavía no conocemos su interfaz ni todas sus opciones de configuración.
Ojalá tuviéramos un curso entero para repasar esta herramienta -aún así faltaría tiempo-, por lo que no tiene sentido embarcarnos en un análisis pormenorizado de todas sus funciones. En su lugar, vamos a aprender a usarla por medio de dos prácticas guiadas paso a paso en las que iremos descubriendo poco a poco algunas de sus funcionalidades principales.
Para empezar, ve a la web de Webflow y regístrate como estudiante con una cuenta de GMail distinta a la corporativa del instituto. Aunque no es obligatorio, te recomiendo que visualices estos tutoriales y juguetees un poco con la herramienta.
Si tienes que enviarle a alguien un enlace a tu proyecto de diseño con Webflow, debes hacerlo así:
Visto todo lo anterior, te animo a que hagas este proyecto paso a paso sobre el diseño de la portada de la web de Tesla:
5. Profundizar en la herramienta
Estoy seguro que te has quedado con ganas de mucho más. Yo también.
Pero, por desgracia, no contamos con más tiempo para esta parte del currículo, así que nuestro camino en clase sobre este tema acaba aquí.
Si quieres seguir aprendiendo sobre esta espectacular herramienta, te recomiendo que busques en Youtube una playlist de algún curso en inglés actualizado a este año, porque ese tipo de contenido es el que ofrece mayor calidad de aprendizaje.
Pero si el inglés no es lo tuyo y quieres seguir aprendiendo poco a poco, te recomiendo este. Muy sencillo, ligero y útil para cubrir un amplísimo espectro de funcionalidades de Webflow 👇