Cómo aprender diseño web a partir de tus errores

La web no está hecha de un solo marco monolítico. Es mucho más difícil aprender todas las piezas que componen todo lo que vemos en Internet debido a su modularidad.

Cualquiera está obligado a cometer errores que ralentizan el tiempo de desarrollo, su programa o introducen errores en su programa. No solo eso, sino que algunos tipos de errores lo ponen en desventaja cuando busca trabajo.

Existen mejores prácticas para garantizar que surjan la menor cantidad posible de problemas al diseñar su sitio web o ponerlo en producción. Estos son los cinco errores más comunes que cometen los desarrolladores web junior y cómo evitarlos.

Confiar demasiado en jQuery

jQuery es, con mucho, el marco de JavaScript más popular del mundo. Adoptarlo en su proyecto tan pronto como lo haya creado puede parecer tentador, pero no se apresure.

Si bien jQuery proporciona muchos métodos convenientes para acelerar su desarrollo web, es importante no usarlo demasiado. Los nuevos desarrolladores web casi siempre cometen el error de comprender los métodos API de jQuery en lugar de cómo funcionan por debajo.

Muchos empleadores consideran que jQuery es una desventaja en lugar de algo bueno porque algunos desarrolladores no entienden cómo funciona JavaScript por completo.

No hay nada de malo en usar jQuery. Si puede, acostúmbrese a usar métodos de JavaScript por su cuenta. Solo confíe en jQuery para métodos convenientes que, de otro modo, tardarían un tiempo en implementarse.

Confiar demasiado en los marcos CSS

Los marcos CSS como Semantic UI y Bootstrap pueden ahorrar mucho tiempo. Eliminan la necesidad de diseñar manualmente e incorporar un diseño receptivo dentro de su aplicación.

Sin embargo, al igual que jQuery, es fácil dejarse atrapar por el ciclo de nunca escribir su propio código CSS. Al final del día, su sitio se verá genérico y a medio hacer. En el extremo de las cosas, incluso podría parecerse a una docena de otros sitios web que tuvieron la misma idea que usted.

Si no es un experto en escribir un código CSS, tendrá la capacidad de leer manuales, encontrar un mentor, que le proporcionará la información que necesita, como una guía de investigación, escribirá un trabajo de investigación para mí y me proporcionará usted con la ayuda buena y cualitativa. Hay diferentes marcos que podrían ser más intuitivos para escribir código.

Frameworks como Bootstrap existen para hacerte la vida más fácil . Para evitar una dependencia excesiva, aprenda el estilo CSS por sí mismo, aprenda a usar preprocesadores para acelerar el desarrollo y estudie la teoría del color para saber qué colores combinan y cuáles no. Una vez que comprenda correctamente los conceptos, es posible que se dé cuenta de que ya no necesita los marcos.

No tener una herramienta de recuperación

No tener una herramienta de recuperación cuando más la necesita puede provocar el bloqueo de su sitio web y su posible desaparición. Cada vez que realiza un cambio en su sitio web, se arriesga a que no sea bueno. Para asegurarse de tener una red de seguridad en la que pueda caer, piense en utilizar una herramienta de recuperación, como WP Reset.

WP Reset es tu mejor solución cuando surgen problemas en tu sitio web. Tal vez el problema sea no poder acceder a su administrador de WP o el encuentro con la pantalla blanca de la muerte. Sea lo que sea, WP Reset te cubre las espaldas. Viene equipado con útiles herramientas de limpieza que le permitirán recuperar rápida y fácilmente su sitio web.

Además, puede usarlo para instalar rápidamente complementos y temas, o deshabilitarlos si están defectuosos. Además, la función Instantáneas de WP Reset toma automáticamente una instantánea de su sitio web antes de realizar cualquier cambio, lo que le permite recuperar esa instantánea si las cosas no salen según lo planeado.

La opción más poderosa que proporciona este complemento es la opción Reinicio nuclear, que le permite limpiar completamente su instalación, eliminar todos los complementos, temas y entradas de la base de datos. Sin embargo, úselo solo cuando realmente lo necesite.

Olvidarse de optimizar su sitio para la velocidad

Un efecto de confiar demasiado en jQuery es la tendencia a caer en el hábito de los antipatrones. Cuando el navegador se carga por primera vez, el código JavaScript y CSS debe ejecutarse antes de que se cargue la página, dependiendo de dónde coloque sus scripts.

Como puede imaginar, tener demasiados scripts ralentizará su sitio web. Tener clases CSS sin usar aumentará el tamaño del paquete de su sitio web y lo ralentizará de manera similar.

Se dedica mucho a la optimización de la velocidad. Para nombrar algunos factores: las fuentes, las imágenes, los archivos JavaScript y CSS adicionales y la compresión de archivos juegan su papel. Una vez que los haya dominado, busque agrupadores de paquetes como Webpack y Rollup que pueden eliminar las clases CSS no utilizadas y los métodos JavaScript de sus archivos.

Validación de entrada incompleta

Algunas de las partes más importantes de cualquier sitio web que construyas son los formularios. Dado que es la única forma en que una persona puede pasar información a su servidor, siempre es necesario realizar algunas comprobaciones de cordura.

Algunos de los vectores de ataque más comunes en Internet siguen siendo los ataques XSS y la inyección SQL. El error que tienden a cometer los desarrolladores junior es tener solo validación de entrada en la interfaz.

Toda la validación de entrada se realiza a través de JavaScript, que es trivial deshabilitar. Dicho esto, Kenneth Sytian de Sytian Web Developer Filipinas recomienda realizar siempre una validación de entrada tanto en el backend como en el frontend. Además, todos los caracteres no alfanuméricos deben escaparse para que los ataques de inyección sean imposibles.

Ignorando la importancia del SEO

No basta con crear hermosos sitios web y enviarlos. Es igualmente importante que las personas vean y aprecien el contenido que ofreces. La mejor manera de hacerlo es mejorar su conocimiento de SEO y su implementación.

El SEO es un proceso largo y complicado que necesita una investigación constante para mantenerse al tanto de las reglas del juego en constante cambio. Con su alcance arqueado, no debe descartarse que se haga al final del proceso de desarrollo.

Algunas prácticas, como tener siempre etiquetas 'alt' descriptivas en sus imágenes, deben procesarse activamente. Imagine escanear todos sus archivos para buscar etiquetas meta y alt cuando ya haya terminado con el proyecto.

No tener un favicon

Es fácil descartar el favicon como innecesario debido a lo trivial que es configurarlo, pero su existencia es bastante importante. En la web moderna, es común que los usuarios tengan varias pestañas abiertas para que puedan volver a visitarlas más tarde. Los Favicons actúan como una especie de marcador para que su sitio sea visible de un solo vistazo. La falta de uno puede significar que los usuarios pierdan interés en el camino.

En lugar de generar uno usted mismo en Photoshop, la galardonada diseñadora de UX, Michelle Dipp, recomienda usar herramientas de diseño gráfico gratuitas que puede encontrar en línea. Incluso puede encontrar uno que ofrezca plantillas de favicon para que pueda crear las suyas propias sin problemas.

Ignorando el diseño receptivo

El diseño receptivo se encuentra entre una de las cosas más importantes que debe tener un sitio web. La mayor parte del tráfico en Internet proviene de dispositivos móviles. No tener un sitio que muestre contenido diferente según el tamaño de la pantalla lo pone en una desventaja significativa. Eso es especialmente cierto si sus competidores ofrecen lo mismo.

Una forma de mejorar la experiencia del usuario es implementar elementos adhesivos en su sitio web. Los elementos pegajosos son aquellos que permanecen fijos en la página mientras el usuario navega. Cuando los elementos son fijos, es más fácil acceder a ellos y sabes que siempre están en un lugar, lo cual es esencial cuando se está en un teléfono móvil.

Dicho esto, WP Sticky es el complemento perfecto que puede usar para crear sus elementos adhesivos. WP Sticky te permite hacer tantos elementos pegajosos como quieras, sin escribir una sola línea de código; solo tienes que elegir tu elemento directamente desde la pantalla.

Con WP Sticky, puede hacer que su menú, encabezado, pie de página y mucho más sean pegajosos. Además, puede ajustar la posición del elemento, la opacidad y agregarlo o eliminarlo de una publicación específica.

Además, es uno de los factores que Google tiene en cuenta a la hora de clasificar las páginas. Si su página no responde en dispositivos móviles, es probable que reciba algunos correos electrónicos de la consola del webmaster advirtiéndole que actualice su sitio.

Conclusión

El diseño web adecuado lleva tiempo. Tiempo para investigar, tiempo para trabajar y aún más tiempo para acostumbrarse a las prácticas recomendadas. Cometer un error durante el tiempo de desarrollo no es el fin del mundo. En cambio, tome cualquier contratiempo que encuentre como una experiencia de aprendizaje. Mejore su conocimiento y aplicación del diseño web adecuado usándolos.

–

SOBRE EL AUTOR

Becky Holton es periodista y bloguera en Bestdissertation.com, el mejor servicio de redacción de ensayos. Está interesada en las tecnologías de la educación, la escritura experta y siempre está lista para apoyar las charlas informativas en AustralianWritings. Síguela en Twitter.