Escribir mejor código web

Aquí hay algo que encuentro bastante irónico. A muchos diseñadores web les gusta la simplicidad que viene con los constructores web. Sin embargo, curiosamente, la mayor parte de los creadores de sitios web se crearon para eliminar la función de los diseñadores y desarrolladores web al automatizar el código subyacente.

¿Gracioso, verdad?

Pero, de nuevo, hay constructores web que aparentemente están haciendo lo contrario. En lugar de reducir el rol de los diseñadores y desarrolladores, vienen con herramientas específicamente optimizadas para dichos equipos. Su principal objetivo es facilitar agencias de diseño con herramientas avanzadas.

¿Cómo, preguntas?

Bueno, Webflow es uno de los ejemplos destacados. Y su función en todo el entorno de diseño web es algo que analizaremos en breve. Esto Webflow La revisión analiza todas las características críticas que necesita conocer, las debilidades correspondientes, más el costo de aprovechar la plataforma para el diseño.

Pero primero, qué es exactamente Webflow?

Webflow Revisión general

Como probablemente ya se habrá dado cuenta, Webflow no es el típico creador de páginas web.

Lanzada en 2013, esta herramienta se vende a sí misma como una solución de diseño web que combina herramientas de diseño profesionales sin código con un potente CMS visual, además de la facilidad de uso de los constructores estándar. Entonces, piense en esto como una fusión entre una solución de construcción web como Wix y un motor de CMS como WordPress.

Webflow

Pero, no se equivoquen. Webflow no compite con gente como Wix y Weebly. Ofrece un conjunto diferente de características dirigidas a un grupo demográfico variable del usuario.

Considerándolo todo, lo más fascinante aquí es Webflowes un enfoque inteligente para todo el asunto de la codificación. Es una plataforma sin código que admite la edición de código para una mayor flexibilidad.

¿Confuso? Sí, lo sé. Es por eso que me tomé el tiempo para evaluar todo detenidamente. Webflow tiene que ofrecer, desde el diseño del sitio web hasta el sistema de gestión de contenido.

Y aquí están los detalles ...

Webflow Revisión: características

Diseño de páginas Web

Webflow Son un par de cosas, sin duda. Pero su herramienta de diseño web sin código siempre ha sido la principal oferta aquí.

Bueno, sería comprensible si lo confundiera con la ventana de edición de Adobe Photoshop antes de comenzar. Estos dos pueden parecer hermanos gemelos desde lejos, pero resultan ser bastante diferentes a medida que te acercas. Para ser más específico, notarás que Webflow es un motor de automatización que opera principalmente en CSS y HTML.

Webflow diseñador

En él, puede introducir cómodamente elementos del sitio y luego moverlos en consecuencia sin usar código. El bit de programación es manejado por Webflowmarco subyacente, que crea y edita sistemáticamente el código de su sitio a medida que avanza con el proceso de diseño.

Si ha probado otros diseñadores web sin código, entonces sabe que eliminar el bit de programación tiene un costo de flexibilidad limitada. Curiosamente, WebflowLa herramienta de diseño no sigue esta tendencia. Entonces, seré honesto aquí y admitiré que sin duda es uno de los creadores de sitios web versátiles más avanzados del mercado.

Ahora, seamos sinceros. Avanzado y simplicidad son dos cosas que se sabe que son como el fuego y el hielo cuando se trata de herramientas de administración de sitios web.

Y fiel a la forma, Webflow no es uno de los constructores más simples que encontrará. Aunque su interfaz es extremadamente poderosa, aparentemente es complicada y podría requerir un poco de esfuerzo aprender a manejar en consecuencia.

Para empezar, Webflow no crea la ilusión de un proceso de diseño completamente sin código. Por lo tanto, no espere saltar directamente y comenzar a dibujar formas en el lienzo. Tal enfoque limitaría sustancialmente su capacidad de personalización.

En consecuencia, el sistema aquí integra inteligentemente algunos aspectos de la codificación a medida que construye un sitio web. Si tiene la intención de presentar un square a mitad de página, por ejemplo, tendrá que agregar un nuevodiv> Elemento, luego edite sus puntos de abajo a la izquierda y de arriba a la derecha como cero junto con el posicionamiento fijo.

¿Qué significa esto?

Si bien podría seguir adelante y aprovechar Webflow sin ningún conocimiento de programación, se necesita un conocimiento básico de las propiedades de HTML y CSS para capitalizar de manera integral su poder.

Sin embargo, si prefiere lo contrario, simplemente marque contra "No escribo código " Elija como se registra. Posteriormente, el sistema ampliará su capacidad de automatización para manejar una gran parte del diseño para usted.

Dicho esto, puedes comenzar con un lienzo completamente en blanco. Ese es el enfoque que prefiero porque puedo personalizar todo desde la base.

Sin embargo, una palabra de precaución. Deje esta opción a diseñadores con experiencia en CSS y HTML. De lo contrario, corre el riesgo de mezclar las cosas o quedarse atascado en algún lugar del proceso.

El mejor enfoque para los principiantes en codificación es aprovechar WebflowPlantillas prediseñadas de. Resulta que el sistema ofrece más de 200 atractivas plantillas, 30 de las cuales son completamente gratuitas. Los pagos, por otro lado, le costarán entre $ 24 y $ 79.

Después de un análisis exhaustivo de varios temas, noté que son notablemente diferentes, con estructuras y características variables. Luego, el proceso de edición posterior le permite cambiar los fondos, el color, las capas, la opacidad, la rotación, los efectos, la posición, el tamaño de sus elementos, etc.

Hospedar

No hace falta decirlo. Que Webflow, al igual que la mayor parte de los creadores web de hoy, ofrece alojamiento de sitios además de dominios personalizados junto con sus paquetes de diseño.

Webflow hospedaje

Pero no espere el típico enfoque de plan compartido aquí. Webflow en su lugar, opta por mantener los sitios internamente, dentro de lo que describe como una "flota de servidores infinitamente escalables".

¿Qué implica esto?

Bueno, Webflow posee y controla más de 100 centros de datos en todo el mundo. Combine eso con los CDN ejecutados por Amazon CloudFront y también Rapidamente- y el resultado es un sistema sólido para alojar todo tipo de sitios web.

Además de manejar cualquier tamaño de tráfico, Webflow garantiza un rendimiento óptimo con tiempos de carga de la página de milisegundos más un tiempo de actividad del sitio web del 99.99%. Su marco impulsado por AWS es particularmente crítico para proporcionar una base sólida para soportar cargas de tráfico comparativamente grandes desde sitios empresariales.

Y dado que la seguridad web es imprescindible, WebflowLa infraestructura de alojamiento es compatible con HTTP / 2 y los usuarios obtienen certificados SSL relevantes para sus sitios.

El contenido Sistema de Gestión

Aquí es donde el contenido se encuentra con el diseño visual. WebflowEl CMS esencialmente le permite ingresar y administrar el contenido de su sitio. En otras palabras, puede agregar y editar cualquier texto o medio en la página precisa que está creando.

Y si está administrando un proyecto web extenso con estructuras complicadas, apreciará especialmente la capacidad del sistema para admitir ajustes manuales de aspectos del contenido, incluidos los tipos de contenido, miembros del equipo, proyectos, etc., con campos personalizables.

Bueno, todo esto es facilitado por Colecciones CMS- una función a la que se puede acceder directamente desde la ventana del editor principal. Tan pronto como genere una nueva colección, puede pasar el tipo de contenido para definir campos e introducir elementos. Posteriormente, se adoptan como páginas web distintas o listas integradas en las páginas que ha creado.

Webflow CMS

¿Confuso? Bien, considere este ejemplo: para establecer una página que muestre la fuerza laboral de su organización, puede presentar una colección de "miembros del equipo", completa con elementos como vínculos sociales, descripciones, nombres, fotos y nombres de empleados.

Ahora, eso básicamente cubre el back-end de CMS. ¿Pero sabes que? Eso no es todo. Webflow sigue adelante para darle a WordPress una buena carrera por su dinero a través del Webflow Editor. Aquí es donde le da vida a una página publicada con contenido nuevo basado en el tipo preseleccionado.

En resumen, obtiene un sitio web completo que admite contenido dinámico como carteras, artículos y publicaciones de blogs, sin instalar complementos adicionales.

Colaboración

Admitelo. Los grandes proyectos de diseño web son emocionantes. Sin embargo, pueden ser cada vez más engorrosos, especialmente si no logra racionalizar a todas las partes involucradas en consecuencia.

Webflow aparentemente ha pensado en esto y hace un buen intento de facilitar la colaboración para las agencias de diseño web con varios miembros del equipo. Y hay más: también puede invitar a otras partes como clientes, diseñadores externos, contratistas, etc. Sus roles y capacidades de usuario dependen de los privilegios correspondientes que establezca.

Webflow colaboración

Si está tratando con clientes, por ejemplo, puede invitarlos a revisar sus proyectos en tiempo real, con privilegios de uso muy restringidos.

Dicho esto, me di cuenta de que todos los ajustes del sitio se reflejan en todo el tablero en tiempo real. Esto ayuda a los miembros del equipo colaborador a evitar repetir tareas que ya se han manejado.

Características generales

  • XML mapa del sitio
  • SEO meta títulos, descripciones
  • Etiquetas alt de imagen
  • Centro de Ayuda
  • Foro de la Comunidad
  • Soporte prioritario
  • Asistencia por correo electrónico
  • Nombre de dominio personalizado
  • Sitios de puesta en escena
  • Actualizaciones instantáneas
  • Redirecciones de URL personalizadas
  • Monitoreo del sitio web 24 / 7
  • Tiempos de carga rápidos
  • Adquisición de dominios de Google
  • Integración de Zapier
  • integración MailChimp
  • Integración de Google Analytics
  • optimización SEO
  • Formas de etiqueta blanca
  • Etiquetado blanco CMS
  • Protección de contraseña del sitio
  • Organización del proyecto
  • Copias de seguridad del sitio web
  • Páginas de error personalizadas
  • Favicon a medida
  • Facturación directa al cliente
  • Componentes SNS
  • Texto rico
  • Lightbox
  • Vídeos de fondo
  • HTML incrustar códigos
  • Menú desplegable
  • Mapas de Google
  • Sliders y carruseles
  • Navegación con pestañas
  • Formularios web personalizables
  • Editor de sitio web
  • Formulario de revisión de envíos.
  • Abrir contenido gráfico
  • Plantilla de etiquetas SEO
  • Importación CMS a través de Zapier
  • RSS Feeds
  • API de CMS
  • Animaciones 3D
  • Propiedades de estilo CSS
  • Plantillas de sitio web
  • Imágenes optimizadas
  • Familias de fuentes web
  • Muestras de color global
  • Cajas flexibles CSS3
  • Adición de código personalizado
  • Codigo exportable
  • Filtros CSS

Webflow Revisión: precios

WebflowLa estructura de precios de algunos usuarios es aparentemente compleja, mientras que otros elogian su enfoque integral.

Si es del tipo que odia numerosos paquetes en una sola plataforma debido al complejo proceso de comparación que lo acompaña, entonces puede encontrar WebflowLos planes de precios son un poco engorrosos. Pero, por otro lado, si prefiere múltiples opciones de precios que se adapten a diferentes niveles de usuario, le gustará cómo se han organizado las cosas aquí.

Ahora, para empezar, Webflow intenta dar soporte a tres tipos de usuarios: autónomos, diseñadores individuales y equipos de diseño. Cada categoría tiene su propio conjunto de paquetes con distintas características.

Webflow paquetes

Aquí hay breves descripciones de cada plan:

Para los freelancers:

Puesta en escena gratis Completamente libre.

  • 10 envío de formularios por mes
  • Elementos de 50 CMS
  • Visitas mensuales 500
  • Páginas estáticas 2
  • Gratis webflow.io subdominio

Alojamiento básico $ 15 por mes facturado mensualmente o $ 12 por mes facturado anualmente.

  • 500 envío de formularios por mes
  • Visitas mensuales 25,000
  • Páginas estáticas 100
  • CDN
  • Opción SSL gratuita
  • Creación de dominio

Alojamiento CMS $ 20 por mes facturado mensualmente o $ 16 por mes facturado anualmente.

  • Editores de contenido 3
  • Acceso a la API de CMS
  • 2,000 CMS elementos disponibles
  • 1,000 envío de formularios por mes
  • Visitas mensuales 100,000
  • Páginas estáticas 100
  • CDN
  • Opción SSL gratuita
  • Creación de dominio

Hosting empresarial- $ 45 por mes facturado mensualmente o $ 36 por mes facturado anualmente.

  • Editores de contenido 10
  • Acceso a la API de CMS
  • 10,000 CMS elementos disponibles
  • Envíos ilimitados de formularios
  • Visitas mensuales 1,000,000
  • Páginas estáticas 100
  • CDN
  • Opción SSL gratuita
  • Creación de dominio

Webflow para autónomos

Para los diseñadores:

Motor de arranque- Gratis.

  • Puesta en escena gratis
  • Facturación del cliente
  • Hasta proyectos concurrentes 2
  • Construcción de sitio libre

Lite- $ 24 por mes facturado mensualmente o $ 16 por mes facturado anualmente.

  • Exportacion de codigos
  • Puesta en escena mejorada
  • Facturación del cliente
  • Hasta proyectos concurrentes 10

Pro- $ 42 por mes facturado mensualmente o $ 35 por mes facturado anualmente.

  • Protección de contraseña del sitio
  • Etiquetado blanco
  • Transferencia de propiedad del proyecto
  • Exportacion de codigos
  • Puesta en escena mejorada
  • Facturación del cliente
  • Proyectos concurrentes ilimitados

Webflow para diseñadores

Para equipos creativos

Equipo- $ 42 por mes facturado mensualmente o $ 35 por mes facturado anualmente.

  • Tablero del equipo
  • Protección de contraseña del sitio
  • Etiquetado blanco
  • Exportacion de codigos
  • Puesta en escena mejorada
  • Facturación del cliente
  • Proyectos concurrentes ilimitados

Gran equipo- Presupuesto personalizado.

  • Precios de los miembros del equipo a granel
  • Tablero del equipo
  • Protección de contraseña del sitio
  • Etiquetado blanco
  • Exportacion de codigos
  • Puesta en escena mejorada
  • Facturación del cliente
  • Proyectos concurrentes ilimitados

Webflow para equipos

¿Quién debería considerar usar Webflow?

Todas las cosas consideradas, aplaudimos Webflow para proporcionar:

  • Certificado SSL gratuito para cumplimiento de seguridad.
  • Redes de entrega de contenido integradas y gratuitas para reducir los tiempos de carga de páginas.
  • Sitio web global avanzado de alojamiento en colaboración con sistemas eficaces como Amazon CloudFront y Rapidamente- para velocidades de carga de página rápidas.
  • Un versátil CMS integrado para la creación dinámica de contenido.
  • Un entorno de prueba para probar y revisar varios elementos del sitio web.
  • Gestores optimizados de CSS y JS para la gestión avanzada del sitio, además del control holístico de animaciones y estilos.
  • Un proceso de construcción web flexible que comienza con un lienzo en blanco o con plantillas prediseñadas.
  • Una herramienta de diseño web amigable para dispositivos móviles que produce código exportable en tiempo real a medida que construye un sitio.

Aparte de eso, los inconvenientes que he encontrado en el camino incluyen:

  • Características limitadas para apoyar los sitios de comercio electrónico
  • Un proceso de diseño que favorece enormemente a los programadores.
  • Un número limitado de plantillas de sitios web
  • Una curva de aprendizaje empinada para principiantes.

Ahora, juntemos todo. Apuesto a que estarás de acuerdo en que Webflow es un sistema de construcción web avanzado creado para desarrolladores, diseñadores y agencias que buscan mayor versatilidad y control.

¿Cuáles son tus pensamientos?

Bogdan Rancea

Bogdan es miembro fundador de Inspired Mag, habiendo acumulado casi 6 años de experiencia durante este período. En su tiempo libre le gusta estudiar música clásica y explorar artes visuales. También está bastante obsesionado con los fixies. Ya es dueño de 5.