Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Crea páginas web sin código con Webflow

6c68edbaa40e50a0420ee1c125d17189?s=47 Imanol Terán
February 21, 2020

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.

6c68edbaa40e50a0420ee1c125d17189?s=128

Imanol Terán

February 21, 2020
Tweet

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