Crea páginas web sin código con Webflow

Muchas veces necesitamos crear una página web, pero no tenemos los medios ni los conocimientos para crearla a base de código o utilizando un CMS como puede ser WordPress.
Si es tu caso, si necesitas crear algo sencillo, con un gran diseño, sin pelearte con themes, plugins ni actualizaciones, y no quieres externalizar el desarrollo, Webflow puede ser la solución a tus problemas.

Transcript

1. imanolteran.com CREA PÁGINAS WEB SIN CÓDIGO CON WEBFLOW Páginas web sin código con Webflow
2. Páginas web sin código con Webflow imanolteran.com HOLA, SOY IMANOL DESARROLLADOR WEB CONSULTOR DE ESTRATEGIA DIGITAL FORMADOR EN NUEVAS TECNOLOGÍAS hola@imanolteran.com @imanolteran
3. Páginas web sin código con Webflow imanolteran.com PODCAST SI DUDAS, HAZLO Spotify Apple Podcasts Google Podcasts imanolteran.com Páginas web sin código con Webflow
4. Páginas web sin código con Webflow imanolteran.com OTROS PROYECTOS DE FORMACIÓN REMOTEWORKTOOLS.ES 👉 PASATEAONLINE.COM
5. imanolteran.com Índice Páginas web sin código con Webflow 1. Introducción 2. Webflow 2.1.Designer 2.2.Editor 2.3.Interacciones 2.4.Templates 2.5.Publicación 3. Práctica: desarrollo de landing page
6. imanolteran.com 01 Introducción Pongámonos en situación Páginas web sin código con Webflow
7. imanolteran.com Páginas web sin código con Webflow - Hoy en día, el disponer de una página web para nuestro proyecto/producto o servicio es obligatorio - Hay un montón de opciones disponibles Introducción 01 7
8. imanolteran.com Páginas web sin código con Webflow - Principalmente -Código: HTML+CSS+¿JavaScript? -CMS: WordPress (https://w3techs.com/technologies/history_overview/content_management/all) Introducción 01 8
9. imanolteran.com Páginas web sin código con Webflow - Hay una tercera vía, las herramientas visuales - “Website Builders ” -Squarespace -Carrd -Wix -Weebly -Godaddy -Mailchimp *beta Introducción 01 9
10. imanolteran.com Páginas web sin código con Webflow - Hay una tercera vía, las herramientas visuales - “Website Builders ” - WEBFLOW Introducción 01 10
11. imanolteran.com Páginas web sin código con Webflow - Genera código semántico - A diferencia de otras herramientas, tiene en cuenta conceptos como el box-model, flexbox, selectores, diseño responsive… - Lo hace de forma visual - Acerca el desarrollo web a perfiles diferentes al del desarrollo Introducción 01 11
12. imanolteran.com Páginas web sin código con Webflow - Si tenemos conocimientos sobre desarrollo web, nos haremos antes con el uso de la herramienta Introducción 01 12
13. imanolteran.com Páginas web sin código con Webflow - Estamos en la era de lo visual y del fenómeno “no-code” - https://imanolteran.com/formacion/?_formacion=nocode - La idea es centrarse en nuestro producto o servicio, olvidándonos un poco de la parte más técnica Introducción 01 13
14. imanolteran.com Páginas web sin código con Webflow - De esta forma, trabajamos en la línea de las metodologías lea n -Sacar nuestro producto/servicio al mercado lo antes posible -Validad o desechar ideas -Pivotar sobre nuestra estrategia -Mejora continua Introducción 01 14
15. imanolteran.com Páginas web sin código con Webflow - De esta forma, trabajamos en la línea de las metodologías lea n -Herramientas “no-code” eliminan barrera de entrada a la creación de productos y servicios digitales Introducción 01 15
16. imanolteran.com Páginas web sin código con Webflow - Es importante, pero no imprescindible conocer una serie de conceptos sobre desarrollo web, para entender mejor el manejo de herramientas como Webflow: Body, padding, margin, background, layout, flexbox, weight, section, heading, div, border, box-shadow, transition, transform, grid, opacity, position, breakpoint, media-query, list, link…………………………………………………………………………………………………………………………………… ……………………………………………………………………………….………………………………………………………… …………………………………………………….…………………………………………………………………………………… ………………………….………………………………………………………………………………………………………………. Introducción 01 16
17. imanolteran.com Páginas web sin código con Webflow - Mozilla MDN - Webflow Web Concepts Guides Introducción 01 17 RECURSOS DE APRENDIZAJE
18. imanolteran.com Páginas web sin código con Webflow - Webflow permite diseñar, construir y lanzar sitios web responsive de forma totalmente visual - Interfaz de trabajo “drag&drop” - Herramienta -Sencilla de utilizar -Flexible -Ofrece un gran rendimiento Introducción 01 18
19. imanolteran.com 02Webflow A fondo Páginas web sin código con Webflow
20. imanolteran.com Páginas web sin código con Webflow - Primera página de la interfaz al loguearnos - Desde aquí gestionamos nuestros proyectos - Accedemos a los ajustes de un proyecto Webflow 02 20
21. imanolteran.com Páginas web sin código con Webflow - Tenemos acceso a diferentes configuraciones: -General -Hosting -Editor -Facturación -SEO -Formularios Webflow 02 21
22. imanolteran.com Páginas web sin código con Webflow - Tenemos acceso a diferentes configuraciones: -Fuentes -Backups -Integraciones -Código personalizado Webflow 02 22
23. imanolteran.com Páginas web sin código con Webflow - Lugar desde el cual creamos nuestra web: -Estructura -Diseño -Contenido -Interacciones -Animaciones -Código personalizado Webflow 02 23 DESIGNER
24. imanolteran.com Páginas web sin código con Webflow - Interfaz similar a Photoshop u otras herramientas de diseño - Nosotros diseñamos la interfaz añadiendo distintos componentes a la misma Webflow 02 24 DESIGNER
25. imanolteran.com Páginas web sin código con Webflow - Webflow se encarga de ir generando el código en tiempo real, de forma automática -Código cumple con estándares W3C W3C Markup Validation Service Webflow 02 25 DESIGNER
26. imanolteran.com Páginas web sin código con Webflow - Contamos principalmente con 3 partes: -Navigator -Canvas -Panel de propiedades Webflow 02 26 DESIGNER
27. imanolteran.com Páginas web sin código con Webflow - Tenemos diferentes elementos y formas de componer la estructura de nuestra web: -Sección -Contenedor -Retícula -Columnas -Div - Pueden combinarse entre sí Webflow 02 27 DESIGNER
28. imanolteran.com Páginas web sin código con Webflow - Tenemos la opción de cargar layouts predefinidos -Cabecera fija -Hero / Hero overlay -Galería -Call to action -Formulario -...etc Webflow 02 28 DESIGNER
29. imanolteran.com Páginas web sin código con Webflow - Podemos reutilizar elementos, utilizando símbolos - Todo cambio que hagamos a una instancia de un símbolo, se replica en todos los demás - Si queremos hacer modificaciones sobre uno solo, lo desvinculamos del símbolo Webflow 02 29 DESIGNER
30. imanolteran.com Páginas web sin código con Webflow - Una característica fundamental es la de crear páginas web responsive - En Webflow podemos configurar varios breakpoints - En cada una de las vistas, podemos manejar cómo van a verse los elementos en pantalla Webflow 02 30 DESIGNER
31. imanolteran.com Páginas web sin código con Webflow - Si queremos que un elemento no se muestre en un punto concreto --> display:none, sino lo eliminamos de toda la interfaz - Para reordenar elementos, jugar con flexbox, no podemos mover elementos así como así - Solo se replican los cambios de estilo, no de contenido Webflow 02 31 DESIGNER
32. imanolteran.com Páginas web sin código con Webflow - Para reutilizar estilos, podemos crear clases - Se las asignamos a los elementos del mismo tipo que compartan comportamiento - Automáticamente los cambios se reflejan en todos ellos Webflow 02 32 DESIGNER
33. imanolteran.com Páginas web sin código con Webflow - Desde el Designer, introducimos el contenido de nuestra página - Además, desde el editor podemos manejar únicamente el contenido Webflow 02 33 DESIGNER
34. imanolteran.com Páginas web sin código con Webflow - Podemos animar los elementos de nuestra interfaz de distintas maneras -Interacciones -Estados de los elementos -Hover -Focus ... Webflow 02 34 DESIGNER
35. imanolteran.com Páginas web sin código con Webflow - En planes de pago, podemos introducir código personalizado a nivel de página individual, o a nivel general de la web -HTML -CSS -JavaScript Webflow 02 35 DESIGNER
36. imanolteran.com Páginas web sin código con Webflow - Desde el editor vamos a poder gestionar y editar el contenido de nuestra web - Tiene opción de colaboración -Podemos dar a otro compañero o un cliente acceso para que edite contenido sin tocar nada de diseño Webflow 02 36 EDITOR
37. imanolteran.com Páginas web sin código con Webflow - Distintas maneras de acceder al Editor: -Desde el panel de proyectos -https://tudominio/?edi t -Desde la barra superior en los ajustes del proyecto -Desde el menú izquierdo dentro del Designer Webflow 02 37 EDITOR
38. imanolteran.com Páginas web sin código con Webflow - Si tenemos colaboradores, pueden entrar en el editor - Una vez introduzcan sus credenciales, cada vez que visiten la web, les aparecerá un botón para editar -Hay que configurar el navegador para que acepte cookies de terceros para poder entrar en el editor Webflow 02 38 EDITOR
39. imanolteran.com Páginas web sin código con Webflow - Guía para colaboradores: -Welcome to your CMS Webflow 02 39 EDITOR
40. imanolteran.com Páginas web sin código con Webflow - Con la inclusión de “Interactions 2.0” podemos crear transiciones CSS y animaciones JavaScript personalizadas -En base al estado de la página -En base a la interacción del usuario Webflow 02 40 INTERACCIONES
41. imanolteran.com Páginas web sin código con Webflow - Seguramente sea la parte más complicada de utilizar en toda la herramienta - Aún así, es mucho más sencillo que escribir nuestras propias funciones JavaScript y trabajar con el DOM Webflow 02 41 INTERACCIONES
42. imanolteran.com Páginas web sin código con Webflow - Ejemplo de lo que podemos conseguir con el panel de interacciones: - History of the Web | Interactions 2.0 Webflow 02 42 INTERACCIONES
43. imanolteran.com Páginas web sin código con Webflow - Básicamente, tenemos que dominar dos conceptos: -Trigger -Action Webflow 02 43 INTERACCIONES
44. imanolteran.com Páginas web sin código con Webflow - Trigger Desencadenante de una acció n -Trigger de elemento -Atienda a acciones llevadas a cabo por el usuario -Trigger de página -Atiende a situaciones que ocurren en la web Webflow 02 44 INTERACCIONES
45. imanolteran.com Páginas web sin código con Webflow - Action Qué ocurre en la página y sobre sus elemento s -Animaciones -Transición entre diferentes estados de una misma propiedad Webflow 02 45 INTERACCIONES
46. imanolteran.com Páginas web sin código con Webflow - Como en cualquier editor visual de otras plataformas, podemos partir de plantillas, en lugar de crear nuestro diseño desde cero. - Hay templates premium y gratuitas -Free Website Templates for Designers -Premium Webflow 02 46 TEMPLATES
47. imanolteran.com Páginas web sin código con Webflow - También podemos crear nuestras propias plantillas y subirlas para vender - Hay que cumplir determinados requisitos -Template Submission Guidelines Webflow 02 47 TEMPLATES
48. imanolteran.com Páginas web sin código con Webflow - Tenemos dos opciones de publicación -Dominio .webflow.io y marca de agua -Dominio propio -Planes de pago Webflow 02 48 PUBLICACIÓN
49. imanolteran.com Páginas web sin código con Webflow Webflow 02 49 PUBLICACIÓN
50. imanolteran.com Páginas web sin código con Webflow - Nos quedaría una tercera vía, para planes de pago -EXPORTAR nuestro código Webflow 02 50 PUBLICACIÓN
51. imanolteran.com Páginas web sin código con Webflow Webflow 02 51 PUBLICACIÓN
52. imanolteran.com Páginas web sin código con Webflow - Rapidez en la maquetación - Sencillez de configuración - No hay que instalar nada - Nos olvidamos de BBDD, PHP...etc - No hay que actualizar plugins, themes… - Sin mantenimiento - Nos centramos en diseño y contenido Webflow 02 52 PROS
53. imanolteran.com Páginas web sin código con Webflow - Versatilidad - Comunidad - Plataforma cerrada - Potencia -CMS -Ecommerce Webflow 02 53 PROS
54. imanolteran.com 03Extras Más propiedades de Webflow Páginas web sin código con Webflow
55. imanolteran.com Páginas web sin código con Webflow - En cualquier momento podemos deshacer los cambios realizados - Además, en los settings de proyecto, tenemos acceso a los backups que se realizan de forma automática -Previsualizar -Restaurar Extras 03 55 BACKUPS
56. imanolteran.com Páginas web sin código con Webflow - Webflow University - Build a full site in Webflow Extras 03 56 RECURSOS DE APRENDIZAJE
57. imanolteran.com Páginas web sin código con Webflow - En planes de pago, tenemos la opción de trabajar con Webflow como CMS - Ventajas y desventajas frente a entornos como WordPress - Se definen como el primer “CMS visual” - Cambiar aspecto y configuración de los posts de forma sencilla - Distintas formas de crear/importar contenido Extras 03 57 CMS
58. imanolteran.com Páginas web sin código con Webflow - Menos restrictiva que otras opciones - Tenemos total control sobre el aspecto de todos los elementos que componen una tienda online - Productos, categorías, página de checkout... - Podemos manejar costos de envío por región, stocks, cálculo de impuestos - Tiene alguna carencia pero sigue en desarrollo Extras 03 58 E-COMMERCE
59. imanolteran.com 04Práctica Desarrollo de una landing page Páginas web sin código con Webflow
60. imanolteran.com Páginas web sin código con Webflow - Página web responsive - Cambiar aspecto en diferentes dispositivos - Animaciones - Posicionamientos - Enlazar con otras páginas - Utilizar layouts preconfigurados - Imágenes de fondo - Crear elementos reutilizables Práctica 04 60
61. imanolteran.com Páginas web sin código con Webflow - Ejercicio a realizar: -https://taller-webflow.webflow.io - Para editar el proyecto (los cambios no se guardarán) - https://preview.webflow.com/preview/taller-webflow? utm_medium=preview_link&utm_source=dashboard&utm_content=taller- webflow&preview=6779d964571e3cd7274fa07f121ce326&mode=preview Práctica 04 61
62. Páginas web sin código con Webflow imanolteran.com PRÓXIMOS CURSOS STRIPE ZOOM NOTION CUSTOM POST TYPES EN WORDPRESS TELETRABAJO Y TELEFORMACIÓN
63. imanolteran.com Páginas web sin código con Webflow hola@imanolteran.com Eskerrik asko