Las 3 etapas para mejorar tu vida diaria como desarrollador

Introducción

¿Alguna vez te ha irritado la idea de tener que volver a pasar por todas las etapas del desarrollo de cada nuevo proyecto desde cero, sintiendo que el peso de la monotonía te está hundiendo? Es una frustración común entre los desarrolladores: la sensación de que cada proyecto sigue el mismo proceso tedioso, dejando poco espacio para la creatividad.

Pero, ¿qué pasaría si te dijera que hay una manera de romper con este ciclo y convertir tu experiencia de desarrollo de Webflow en una fuente de placer y satisfacción? El secreto es utilizar las mejores prácticas e innovaciones que le permitirán llevar su flujo de trabajo de desarrollo de Webflow al siguiente nivel.

En esta guía detallada, veremos técnicas que puede utilizar para optimizar los pasos de desarrollo de rutina, superar aspectos comunes y desbloquear todo el potencial de la plataforma. Así que abróchense los cinturones y prepárense para viajar a un mundo donde reina la eficiencia.

Etapa 1: Preparar el escenario para el éxito

Cuando comienza su nuevo proyecto Webflow, debe tener una base sólida y eficiente para escalar desde allí. Aunque se trata de una fase preparatoria, el desarrollo ya ha comenzado y hay puntos importantes a considerar que le prepararán para el éxito.

1.1 Guía de estilo

Si piensa en una guía de estilo como un modelo para su proyecto, su primacía queda clara. La creación de una guía de estilo marca el comienzo de su proyecto, lo que garantiza que las clases y los estilos se comporten de manera predecible en todo momento. Entonces, antes de sumergirte en el desarrollo de páginas específicas, tómate el tiempo para trabajar en los estilos. Hay dos enfoques para crear una guía de estilo:

• cree su propio proyecto base desde cero, adaptado a sus preferencias, o
• utilice marcos de código abierto ya preparados como Finsweet , Relume o Wizardry o cualquier otro.

1.2 Variables

Gracias a una actualización reciente de Webflow, el uso de variables se ha vuelto aún más intuitivo y eficiente. Al organizar las variables en grupos bien diseñados, puede simplificar el desarrollo y aumentar la eficiencia. Recomiendo considerar crear grupos como:

• Colores comunes
• Fondo
• Texto
• Tamano del texto
• Tamaño del texto Móvil
• Contenedor (ancho máximo)
• Tamaños de iconos

Una vez creados estos grupos y asociados con las clases correspondientes, podrás pasar a desarrollar páginas web con facilidad y confianza.

Trabajar en la creación de variables siempre ha sido una buena práctica y Webflow continúa esta tradición en el ámbito del desarrollo de código bajo. Estos grupos predefinidos proporcionan una base sólida para cualquier proyecto, lo que permite un proceso de desarrollo más fluido y estructurado. Y si un cliente vuelve a pedirle que cambie la combinación de colores de oscuro a claro, se agradecerá haber utilizado variables.

1.3 Priorizar la accesibilidad

La accesibilidad a menudo se deja para las etapas finales de un proyecto, pero no se puede subestimar su importancia. Desde el principio de su proyecto, la integración de funciones de accesibilidad debe estar en primer plano en su mente, influyendo en cada decisión y elemento que agregue.

Webflow ha puesto a disposición del público una lista de verificación ; después de estudiarla detenidamente, tendrá una idea de los puntos principales de este asunto.

Uno de los beneficios destacados de Webflow es su panel de accesibilidad integrado, que proporciona información visual sobre cómo las personas con discapacidad visual perciben su proyecto. Esta función le permite ver su proyecto a través de múltiples filtros de accesibilidad, simulando diferentes condiciones de visualización y resaltando áreas potenciales de mejora.

Se trata de crear un entorno digital más equitativo e inclusivo. Al priorizar la accesibilidad desde el principio, no solo mejora la usabilidad de su proyecto, sino que también demuestra un compromiso para igualar el acceso a su proyecto para todos los miembros de su audiencia, independientemente de sus capacidades.

Etapa 2: Dominar el proceso de desarrollo

Ahora estás entrando en la etapa de desarrollar directamente todas las páginas de acuerdo con el diseño. A continuación te presentamos algunas recomendaciones que te ayudarán a superar esta etapa con éxito:

2.1 Código personalizado

"Detente. ¿Por qué? ¿Para qué? ¡¿Pero cómo puede ser esto?! Después de todo, el futuro ya llegó y ¿por qué necesitamos el código ahora?" - podrías decir. Pero seamos honestos: sin conocimientos de código, puedes comenzar a comprender el desarrollo web y comenzar rápidamente tu carrera, pero manteniéndote competitivo y creando cosas extraordinarias con la simple funcionalidad de arrastrar y soltar de no-/. Las plataformas de código bajo no parecen ser la verdad. Por lo tanto, bienvenido al desarrollo y aprendizaje sin fin del que hablé en mi artículo anterior .

2.1.1 HTML

Cuando se trabaja en plataformas de código bajo como Webflow, resulta tentador confiar únicamente en divs y elementos de texto para crear una estructura. Pero aquí nos diferenciamos de nosotros mismos ayer: al menos, después de leer mi artículo, asumimos la responsabilidad de la calidad del producto terminado. Asegúrese de que su marcado siga las convenciones semánticas mediante el uso de elementos como <header>, <nav>, <main>, <aside>, <footer> y otros y corrija el nivel de los encabezados para mejorar la claridad y la accesibilidad.

2.1.2 CSS:

• divide mentalmente todo tu código futuro en global y local. Agregue CSS global al componente de la barra de navegación. De esta forma tendrás acceso a él desde cualquier página, y además verás cómo se aplican los estilos incluso antes de publicar el proyecto.

• Escriba estilos para estados de desplazamiento en el código mediante consultas de medios. Este método garantiza que la posición de Haver se muestre solo en el escritorio:

  
  

 <style> @media screen and (hover:hover) { //Insert your code here... } </style>

• Escriba estilos separados para pantallas de 1024 píxeles de ancho para resolver los problemas de diseño únicos específicos de dispositivos de este tamaño en particular.

  Aunque es fácil crear un diseño responsivo en Webflow, los diseños de tableta comienzan con 991 píxeles de ancho. Resulta que la pantalla 1024 aplica todos los estilos de escritorio a sí misma. Sin embargo, todavía no he tenido un solo proyecto en el que no tuviera que escribir estilos por separado para una pantalla 1024. Consideraría que este elemento es obligatorio para la verificación. El registrar o no estilos por separado depende de cada proyecto individual.

• Agregue comentarios a su código CSS para mejorar la legibilidad y facilitar la colaboración con otros desarrolladores. Haga la vida más fácil para usted y otros desarrolladores durante las ediciones posteriores del proyecto. Deje el proyecto como le gustaría verlo si lo heredó de un desarrollador anterior.

 <style> /* About page Start */ //Insert your code here... /* About page End */ </style>

• En lugar de depender únicamente de las animaciones de Webflow, recomiendo encarecidamente utilizar animaciones CSS para hacer que su página sea más fácil y eficiente sin afectar el rendimiento de la página.

  La herramienta de animación incorporada Webflow facilita a un principiante la creación de un buen sitio web con numerosas interacciones. Sin embargo, si hablamos de métodos de desarrollo avanzados, es importante señalar que las animaciones CSS son extremadamente ligeras y no ralentizan la página con su presencia. Por el contrario, las animaciones de flujo web, que esencialmente están destinadas únicamente a cambiar las propiedades CSS de los elementos, funcionan a través de JS y, por lo tanto, ralentizan la página. Esto no se nota en proyectos pequeños, pero sí en los grandes. En cualquier caso, te aconsejo que uses CSS tanto como sea posible en cualquier proyecto, en lugar de animaciones nativas de Webflow, incluso para practicar. Recordamos que un hábito aparece tras numerosas repeticiones . Vamos a darle forma.

• Si no se planea la interacción del usuario con las animaciones de Lottie, es mucho mejor usar un archivo mp4 en lugar de .json e incluso .json optimizado. El rendimiento en Safari te lo agradecerá.

2.1.3 JavaScript:

Estas son las mejores prácticas que durante mucho tiempo se han dado por sentado:

• Siga las mejores prácticas para la ubicación de JavaScript, incluido el uso de configuraciones globales para scripts de proyectos globales y configuraciones de página para scripts locales.

• Utilice los atributos <async> y <defer> para scripts que se pueden cargar en paralelo para optimizar los tiempos de carga de la página.

  
  

2.2 Componentes del flujo web

¿Con qué frecuencia, cuando estudias el diseño de tu proyecto, te preguntas: ¿Qué elementos repetidos en el proyecto puedo usar como plantillas en diferentes páginas? Los componentes de Webflow le permiten mantener un flujo de trabajo de diseño coherente, eficiente y escalable mediante la creación de bloques personalizables a partir de elementos y elementos secundarios. Puede reutilizar esos bloques en su sitio y modificarlos en un solo lugar para evitar revisar individualmente cada diseño recurrente (fuente: https://university.webflow.com/lesson/components?topics=layout-design ).

A menudo esto puede ser:

• Barra de navegación
• Pie de página
• Botón: si no es estándar, tiene un diseño y efectos personalizados y/o una estructura ramificada.
• Banner CTA: a menudo se utilizan una o dos de sus variedades a lo largo del proyecto.
• Y mi símbolo más usado es Sección : debería haber una sección vacía con una etiqueta y una clase, dentro de ella todas las clases estándar, incluido un contenedor, el Título 2, el párrafo y varios bloques div vacíos. Este es el componente más utilizado que utilizarás, te lo prometo. Simplemente agréguelo, desvincúlelo y finalice la parte de desarrollo. Al agregarlo como base, puede ahorrar mucho tiempo en lugar de agregar cada bloque div por separado.

Usando código, puede ampliar las capacidades de los componentes de Webflow y proporcionar al cliente un sistema de gestión de proyectos increíblemente flexible sin acceso a la estructura de la página HTML. Este es un enfoque completamente nuevo para el desarrollo web que permite al cliente controlar muchos aspectos de diseño del proyecto una vez que el desarrollador lo ha completado. En el futuro, el cliente podrá crear fácilmente nuevas páginas de forma independiente basándose en componentes ya creados. Y solo si es necesario desarrollar elementos fundamentalmente nuevos, será necesario contratar a un desarrollador. Al trabajar con componentes, los clientes prácticamente no tienen posibilidades de destruir su estructura HTML perfectamente preparada (sin embargo, nuestros clientes suelen ser muy capaces).

2.3 Agrupación de recursos multimedia

Utilice agrupaciones de activos cuando esto los haga más fáciles de encontrar y administrar. Por ejemplo, tienes una barra de navegación enorme y hay muchos enlaces con íconos en ella. El diseñador ya preparó algunos de ellos, prometió terminar la otra parte en 3 días y el cliente aún está considerando la última parte. Mientras el diseñador dibuja nuevas opciones, el cliente revisa la mitad de ellas, las edita y aprueba la otra mitad, y finalmente te las envía para que las desarrolles, lo más probable es que ya tengas muchas otras imágenes en el panel de activos. Las imágenes de los iconos estarán rotas y será inconveniente encontrarlas o reemplazarlas en el futuro. En este caso, agrupar activos le facilitará la vida. La agrupación le permite mantener todos los medios de su proyecto limpios y organizados.

2.4 Abastécete de una carpeta de Archivo para guardar:

• Versiones estáticas de páginas dinámicas de СMS . En caso de realizar cambios o ediciones, le resultará mucho más fácil hacerlo en una versión estática y luego transferirlo a la página СMS. La peculiaridad de las páginas СMS en Webflow es tal que cuando conecta todos los elementos necesarios con los campos correspondientes en la Colección, no podrá copiar el elemento en el que está presente esta conexión y transferirlo a una página estática.

• Una página con versiones iniciales de elementos. La práctica frecuente de numerosas ediciones nos obliga a tener cuidado y no eliminar del proyecto lo ya construido. Mueve esto a la página de archivo y déjalo hasta tiempos mejores.

• Página de prueba para experimentos.

  
  

Etapa 3: ediciones finales

Qué es importante hacer al final del proyecto antes de transferirlo al cliente, para que no dejes la sensación de que tu proyecto realmente ha subido de nivel ahora:

3.1 Limpieza del proyecto:

• eliminar clases y animaciones no utilizadas.

• elimine el código comentado y no utilizado.

• retire los medios no utilizados. Si hay muchas cosas innecesarias en el panel y no es posible eliminarlas individualmente, sugiero un truco : eliminar todos los recursos, publicar el proyecto, recargar el flujo web y acceder al recurso del panel solo aquellos medios que se utilizan. en el proyecto.

  
  

3.2 Crear un manual de usuario del Proyecto para el cliente.

Además de la página de la guía de estilo, debe haber una página que describa cómo utilizar el proyecto terminado. Un buen desarrollador es aquel que piensa en cómo el cliente gestionará el proyecto en el futuro. Qué fácil será realizar cambios y qué grado de libertad tendrá el cliente para gestionarlos. Gracias al webflow, esto puede acercarse lo más posible a la perfección. Al tener conocimiento de CSS y comprender los principios operativos de los componentes del flujo web, puede armar un proyecto en el que será fácil cambiar las páginas actuales o crear otras nuevas.

3.3 Dar nombres únicos a las copias de seguridad.

El principio de descripción se aplica a todo lo que usted, como desarrollador, le da un nombre. Cualquier parte del proyecto debería ser intuitiva para usted y sus colegas en el futuro.

Conclusión

En conclusión, resumamos brevemente los puntos principales en los que debes centrarte para mejorar tu vida diaria como desarrollador.

Etapa 1 - Preparación

• Cree una guía de estilo para garantizar la coherencia y previsibilidad de los elementos de diseño.
• Configure variables para agilizar el desarrollo y mejorar la eficiencia
• Priorizar la accesibilidad desde el principio para crear sitios web inclusivos y fáciles de usar.

Etapa 2 - Desarrollo directo

• Agregue poder de codificación como un valioso conjunto de habilidades para desbloquear infinitas posibilidades en el desarrollo web.
• Utilice los componentes de Webflow como herramientas poderosas para preparar sus proyectos para el futuro.
• Organice los recursos multimedia en grupos para facilitar el acceso y la gestión.
• Mantenga una carpeta de Archivo para almacenar elementos no utilizados para su uso posterior.

Etapa 3 - Recta de meta

• Limpiar elementos y activos no utilizados para optimizar el rendimiento del proyecto.
• Cree una Guía del cliente para facilitar la transferencia y la gestión de clientes sin problemas.
• Guarde una copia de seguridad significativa de sus proyectos para protegerlos contra la pérdida de datos y garantizar la continuidad.

La adopción de mejores prácticas es esencial para maximizar la eficiencia y la productividad en el desarrollo de Webflow. Siguiendo este enfoque, no sólo ahorrará tiempo en tareas repetitivas sino que también liberará valiosos recursos para la relajación, el autodesarrollo y la creación de proyectos innovadores. Transformemos nuestros flujos de trabajo y demos rienda suelta a nuestra creatividad para crear cosas aún más geniales.

¡Gracias por leer!

Me complace compartir mis pensamientos y experiencias para ayudar a hacer la vida más fácil a otros desarrolladores. Al compartir lo que he aprendido, espero que el proceso de desarrollo sea más fluido y crear mejores experiencias para todos.