Currículo: este documento representa una parte del complemento práctico del Tema 3. Desarrollo web para Computación y Robótica de 1ºESO.
Tabla de contenidos
Como requisito previo, es necesario que tengas una cuenta de usuario registrada en la aplicación. Si no sabes cómo hacerlo, sigue estos pasos.
Al iniciar sesión en la aplicación, serás redirigido automáticamente a tu Dashboard -un espacio personal desde donde puedes gestionar cualquier cosa de la aplicación-.
1. El dashboard
Veamos sus partes más importantes:
Lo primero que nos encontramos es la barra de navegación principal.
La sección en la que estás aparecerá resaltada con una línea negra.
Aunque no vamos a usarlos, si quieres profundizar en el uso de la aplicación, estas secciones te serán de enorme utilidad:
- Marketplace: puedes encontrar multitud de utilidades profesionales ya construidas para usarlas. Desde librerías externas y aplicaciones para integrar con tu web, hasta plantillas para empezar con algo ya hecho, algunas son gratuitas y otras de pago. Incluso puedes contratar a un experto para que te ayude.
- Learn: es una especie de academia de formación sobre Webflow dentro de la propia aplicación. Aquí tienes una cantidad inmensa de fuentes de información para aprender a sacarle todo el partido a Webflow.
- Resources: recursos de los que puedes alimentarte para construir sitios web profesionales. Aquí tienes una comunidad de usuarios en constante interacción, libros electrónicos, foros, un blog e incluso una sección de soporte donde los propios fabricantes de la aplicación te ayudarán a resolver posibles problemas técnicos.
En Account:
Tienes todas las opciones de configuración de tu cuenta de usuario: datos de acceso, estadísticas, gestión de tu correo electrónico, notificaciones, perfil público y otras opciones de seguridad.
En la parte izquierda:
Encontrarás tutoriales muy sencillos de seguir donde se explica lo básico de la aplicación –te recomiendo encarecidamente que los veas– y, también, todas las opciones de configuración de la aplicación: planes de pago, equipos de trabajo colaborativo, etc.
Por último, en la parte central:
Tenemos una lista de los proyectos que has hecho con la herramienta para poder gestionarlos o crear otros proyectos nuevos.
Si quieres continuar trabajando con un proyecto, simplemente pulsa en él. En caso de que quieras crear uno nuevo, pulsa sobre el botón azul. En cualquiera de los dos casos, se te abrirá la vista de diseño de la aplicación, que es la parte realmente importante y donde estaremos trabajando todo el tiempo.
2. La vista de diseño
En esta vista, tenemos tres partes claramente diferenciadas:
- Izquierda: la barra de herramientas.
- Centro: el lienzo de diseño.
- Derecha: las propiedades del elemento seleccionado.
2.1. La barra de herramientas
Desde aquí controlaremos toda la estructura, las fuentes de datos y los recursos de nuestra aplicación.
2.1.1. El logo de la herramienta
Si pulsamos en el logo tendremos acceso a todas estas opciones:
Las más importantes son las dos primeras: ir a nuestro Dashboard (para cambiar de proyecto, crear uno nuevo o cerrar sesión); y también Site settings que son las opciones de configuración de nuestra aplicación.
2.1.2. La página en la que estamos trabajando
Justo al lado del logo, veremos un iconito y un nombre. Se trata del nombre de la página en la que nos encontramos; la página de nuestra aplicación en la que estamos trabajando.
En este caso, estamos trabajando en la Home, es decir, la portada del sitio web. Para cambiarle el nombre, podemos pulsar sobre ella, y en las opciones que nos aparecen pulsar sobre ese icono:
Se nos abrirán otras opciones más amplias, donde podremos cambiarle el nombre a esta página, yo le llamaré Inicio y guardaré los cambios:
Como ves, ya habrá cambiado la referencia superior:
2.1.3. Gestionar las páginas de mi aplicación
Para cerrar el capítulo de páginas, podemos pulsar sobre el icono Pages:
Desde aquí, podemos gestionar todo lo relativo a las páginas de mi sitio web: crear una nueva página, organizarlas en carpetas, etc.
2.1.4. Añadir elementos a la página
Con el icono de Add elements, tenemos acceso a todos los elementos que podemos añadir a nuestra página para ir construyendo la web que queramos:
Como puedes observar, los elementos que podemos añadir están organizados en categorías: Estructura, Básico, Tipografías, CMS (Gestión de contenidos), Media, Formularios, Avanzado y Otros.
La manera de usar esta parte es buscar el elemento que nos interese y arrastrarlo a nuestro lienzo de diseño.
Por ejemplo, desde Basic podemos arrastrar un Button a nuestro lienzo. Y pasarán tres cosas:
1º. El botón aparece en nuestro lienzo.
2º. Aparecen algunas opciones de configuración del botón -puedes cerrarlas-.
3º. Se ha añadido un nuevo elemento a nuestro panel Navigator.
2.1.5. El panel Navigator
Que no te confunda el nombre.
Aunque se llama Navigator, no tiene nada que ver con el navegador que conocemos. Lo traduciremos como Organizador.
Aquí aparecerán listados de forma jerárquica todos los elementos que forman parte de esta página.
Si un elemento aparece más a la derecha que otro, quiere decir que está dentro de ese otro. Por tanto, si observamos nuestro Organizador, veremos cómo Button está dentro de Body.
¿Por qué? Porque TODOS los elementos que forman parte de una página web están dentro del elemento Body de esa web. Así es como funciona.
Vamos a añadir ahora un elemento Div Block (lo encontrarás en Add element > Basic) y lo vamos a arrastrar al lienzo:
Si te fijas el Div Block también está dentro del Body, porque aparece en el organizador a la misma altura que el Button.
Además, en el lienzo, como es el último que se ha añadido, aparece debajo del Button. Si queremos que aparezca antes, simplemente lo seleccionamos en el Organizador y lo arrastramos hacia arriba:
Con esta nueva disposición, hemos cambiando el orden en el que aparecen estos componentes en nuestro lienzo.
Vamos a añadir otro elemento, esta vez un Parragraph desde Add elements > Typography y lo vamos a situar debajo del botón:
Verás que ha aparecido un elemento con varias líneas de texto de prueba.
Pero yo quiero ahora, que el párrafo aparezca dentro del Div Block. Para hacerlo, pulsamos en el Organizador sobre el elemento Paragraph y lo arrastramos hacia arriba y un poco a la derecha hasta que consigamos que aparezca dentro:
Ya tenemos nuestro párrafo dentro de nuestro bloque. Al cambiar la jerarquía de elementos en el Organizador, también cambian la posición en la que se encuentran los elementos en el lienzo.
2.2. El lienzo de diseño
Como habíamos adelantado anteriormente, el lienzo de diseño ocupa toda la parte central de la interfaz. Y aquí, hay algunas cosas interesantes que debes conocer.
En primer lugar, arriba del todo encontramos los botones de dispositivos:
Por defecto, aparece activada la vista de ordenador, es decir, cómo se vería nuestra aplicación en un ordenador: pantalla grande en disposición horizontal.
Los otros tres iconos corresponden a las vistas en tablet, móvil con orientación horizontal y móvil con orientación vertical.
Si pulsamos sobre esta última:
Veremos cómo la apariencia de nuestra aplicación cambia, para adaptarse al tamaño de pantalla de un móvil en vertical. Además, verás cómo aparece un manejador de tamaño a la derecha:
Si pulsamos y arrastramos, podemos cambiar el ancho de tamaño de la pantalla para ver cómo los elementos que forman parte de nuestra web se van adaptando al nuevo tamaño. Así, siempre podremos comprobar que nuestra web no se descuadra para diferentes tamaños de pantalla en los distintos dispositivos en los que se verá nuestra web.
Es curioso observar, cómo mientras arrastramos este manejador aparecen distintos modelos de dispositivos, que trabajan con ese tamaño:
Además, si nos fijamos en la parte superior, siempre encontraremos el tamaño en píxeles de la pantalla que en cada momento estamos visualizando:
Volvamos a la vista para ordenadores.
Una última utilidad que tenemos en esta parte central de nuestro lienzo, la encontramos en la parte inferior. Si pulsamos en el Organizador sobre el elemento Paragraph:
Y ahora nos vamos a la parte inferior central del lienzo, veremos esto:
Esa utilidad nos da información sobre el elemento que tenemos seleccionado. Nos está diciendo que Paragraph es un elemento que está dentro de Div Block, que a su vez está dentro de Body. Esto puede llegar a ser muy útil cuando tengamos en el lienzo muchos elementos y no sepamos muy bien dentro de qué elemento está otro de nuestro interés.
2.3. La barra de propiedades
La barra de propiedades está situada en el margen derecho de la interfaz de la aplicación y contiene todas las propiedades del elemento que está actualmente seleccionado.
Si pulsamos sobre Paragraph, veremos esto:
Esas son todas las propiedades que podemos modificar del párrafo que tenemos seleccionado.
Veamos para qué sirven todas esas categorías de propiedades:
- Layout: establece cómo se comporta el elemento seleccionado en relación a los elementos que tiene a su alrededor (¿debe aparecer al lado de otro?¿Encima?¿Debajo?).
- Spacing: los espacios (tanto internos como externos) que queremos dejar alrededor del elemento seleccionado.
- Size: el tamaño del elemento seleccionado (ancho y alto).
- Position: posición que debe ocupar el elemento en la pantalla (¿siempre la misma posición?¿Debe moverse en función de la posición de los elementos que le rodean?).
- Typography: todo lo que tiene que ver con la letra del elemento seleccionado (tipo de letra, tamaño, color, alineación, estilo, etc.).
- Backgrounds: para establecer distintos estilos de fondo en el elemento seleccionado (transparente, color, gradiente o imagen).
- Borders: para configurar el borde del elemento (grosor, color, redondeo, estilo de línea).
- Effects: efectos visuales para el elemento seleccionado (sombra, transparencia, etc.).
- Custom properties: otras propiedades personalizadas que podemos aplicarle al elemento seleccionado, escribiendo la instrucción CSS que deseemos en cada caso.
Veamos un ejemplo. Pulsa sobre el elemento Paragraph en el panel Organizador.
Ahora ve a las propiedades Spacing y aplícale un margen superior de 20px, inferior de 10px y izquierdo y derecho de 15px:
Ahora verás en el lienzo de diseño, cómo el párrafo aparece con los márgenes aplicados. Así funciona la propiedad margin: aplica un espacio de margen entre el elemento seleccionado y los elementos que le rodean. Dicho de otra forma, es el espacio externo que le aplicamos.
Si ahora le modificamos el padding y le ponemos 30px arriba, abajo, a la derecha y a la izquierda:
Verás cómo lo que hemos hecho es aplicar espacio interno, es decir, un margen que se aplica en el interior del elemento, desde su borde hasta el comienzo de su contenido.
Esta, que acabamos de ver, es la manera de trabajar: pulsamos sobre un elemento, nos vamos a sus propiedades y las modificamos hasta que el elemento quede en el lienzo como nosotros queremos.
3. Previsualizar nuestro trabajo
Lo que vemos en el lienzo de diseño es cómo va quedando nuestra aplicación, pero no es lo que se vería en un navegador de Internet cuando se visualice nuestra página.
Para ver el resultado de nuestro trabajo, debemos pulsar sobre el botón Preview:
Al pulsar en el botón, se abrirá una vista real de cómo se vería nuestra web en el navegador del usuario que visita nuestra página:
Además, en la barra negra que aparece arriba, tenemos algunas funcionalidades útiles que ya conocemos: la página que estamos viendo (puedes cambiar de página pinchando en ese icono), el dispositivo en el que la estamos viendo (puedes cambiar a tablet y móvil), el ancho en píxeles de la página que estamos viendo y, si aparece un porcentaje, es porque has modificado el tamaño de la ventana en esa proporción.
Para salir de la vista de previsualización y volver a la vista de diseño, simplemente, pulsa sobre el mismo botón.
4. Compartir nuestro trabajo
Para enviarle nuestro trabajo a otras personas –como cuando tienes que entregársela al profesor para que lo revise-, debemos pulsar sobre el botón Share:
En el cuadro de diálogo que se abre, debes activar la opción Share read-only link.
Aparecerá un enlace que es el que debes copiar para entregar tu trabajo.