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 papel en todo el entorno de diseño web es algo que estudiaremos en breve. Esta revisión de Webflow 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?

Revisión de flujo web: Descripción general

Como probablemente ya se haya dado cuenta, Webflow no es su creador de web típico.

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 los gustos de Wix y Weebly. Ofrece un conjunto diferente de características dirigidas a un grupo demográfico variable del usuario.

Con todo, lo más fascinante aquí es el enfoque inteligente de Webflow para todo lo relacionado con la codificación. Es una plataforma sin código que admite la edición de códigos para una mayor flexibilidad.

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

Y aquí están los detalles ...

Revisión de flujo web: Características

Diseño de páginas Web

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

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

Diseñador webflow

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

Si ha intentado con otros diseñadores web sin código, entonces sabe que eliminar el bit de programación tiene un costo de flexibilidad limitada. Curiosamente, la herramienta de diseño de Webflow no sigue esta tendencia. Entonces, seré honesto aquí y admitiré que es sin duda uno de los creadores de sitios web más versátiles y 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 su forma, Webflow no es uno de los constructores más simples que encontrará allí. Aunque su interfaz es extremadamente poderosa, es aparentemente complicada y puede requerir algún esfuerzo para aprender las cuerdas 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 y comenzar a dibujar formas en el lienzo. Tal enfoque limitaría sustancialmente su capacidad de personalización.

En consecuencia, el sistema aquí incorpora inteligentemente algunos aspectos de la codificación a medida que construye un sitio web. Si pretende introducir un cuadrado de media página, por ejemplo, deberá agregar un nuevo <div> 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 puede seguir adelante y aprovechar Webflow sin ningún conocimiento de programación, se necesita una comprensión básica de las propiedades de HTML y CSS para capitalizar de manera integral su poder absoluto.

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 codificar a los principiantes es aprovechar las plantillas de Webflow pre-diseñadas. Resulta que el sistema ofrece más que atractivas plantillas 200, de las cuales 30 son completamente gratuitas. Los pagados, 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

Esto no hace falta decirlo. Ese flujo web, como la mayor parte de los creadores web en la actualidad, ofrece alojamiento de sitios más dominios personalizados junto con sus paquetes de diseño.

Webflow hosting

Pero, no esperes el enfoque típico del plan compartido aquí. En su lugar, Webflow elige mantener los sitios dentro de la empresa, dentro de lo que describe como una "flota de servidores infinitamente escalable".

¿Qué implica esto?

Bueno, Webflow posee y controla más que los centros de datos 100 en todo el mundo. Combina eso con los CDNs corridos por Amazon CloudFront más 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 página de milisegundos más tiempo de actividad del sitio web de 99.99%. Su marco potenciado por AWS es particularmente crítico para proporcionar una base sólida para soportar cargas de tráfico comparativamente grandes desde sitios empresariales.

Y como la seguridad web es imprescindible, la infraestructura de alojamiento de Webflow 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. El CMS de Webflow 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 continúa para dar a WordPress un buen funcionamiento de su dinero a través del Editor de flujo web. Aquí es donde le da sabor a una página publicada con nuevo contenido 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.

Segura

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.

Al parecer, Webflow 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 aún hay más: también puede invitar a otras partes, como clientes, diseñadores de terceros, contratistas, etc. Sus roles y capacidades de usuario dependen de los privilegios correspondientes que establezca.

Colaboración webflow

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
  • SEO optimización
  • 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

Revisión de Webflow: fijación de precios

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

Si usted es del tipo que odia numerosos paquetes en una sola plataforma debido al complejo proceso de comparación que lo acompaña, es posible que los planes de precios de Webflow sean un poco engorrosos. Pero, por otro lado, si prefiere múltiples opciones de precios que se adapten a diferentes niveles de usuarios, entonces les va a gustar cómo se han organizado las cosas aquí.

Ahora, para empezar, Webflow intenta admitir tres tipos de usuarios independientes, diseñadores solitarios y equipos de diseño. Cada categoría tiene su propio conjunto de paquetes con características variables.

Paquetes webflow

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
  • Subdominio webflow.io gratis

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

Flujo web 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 el uso de 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á de acuerdo en que Webflow es un sistema avanzado de creación de sitios web 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.