10 errores comunes de desarrolladores web

Parece que hay infinitas opciones con respecto a cómo lograr la misma tarea: desarrollar un sitio web que funcione en la web moderna de hoy. Los desarrolladores web deben elegir una plataforma de alojamiento web y almacenamiento de datos subyacente, herramientas para escribir HTML, CSS y JavaScript, cómo se implementará el diseño y qué bibliotecas/frameworks de JavaScript potenciales para incluir.

Una vez que las opciones se reducen, el mundo en línea está lleno de artículos, foros y muestras que brindan consejos para hacer una mejor experiencia web. Sin embargo, no importa qué camino tomar, todos los desarrolladores son susceptibles a los errores. Aunque algunos errores estarán relacionados con un enfoque específico, existen desafíos compartidos entre todos los desarrolladores web.

Entonces, a través de la investigación, la experiencia y las observaciones recientes, pensé que compartiría una lista que recopilé de diez errores comunes que veo que hacen los desarrolladores web, y cómo evitarlos.

La siguiente lista no está en un orden particular.

1. Escribir HTML de la vieja escuela

Error: Los primeros días de Internet ofrecían muchas menos opciones de marcado que las que tenemos hoy. Sin embargo, los viejos hábitos son difíciles de resolver y mucha gente escribe su HTML como si aún estuviéramos en el siglo XX. Los ejemplos aquí están usando elementos <table> para elementos de diseño, <span> o <div> cuando otras etiquetas semánticas serían más apropiadas, o usan etiquetas que no son compatibles con el estándar HTML actual, como <center> o <font>, o espaciado de elementos en una página con una gran cantidad de entidades  .

Impacto: Escribir el HTML de la última década puede dar como resultado un marcado excesivamente complicado que se comportará de manera incoherente en varios navegadores. Y no es necesario en navegadores modernos más recientes como Microsoft Edge e incluso versiones anteriores de Internet Explorer (11, 10, 9).

Cómo evitar: Deja de utilizar el elemento <table>  para el diseño del contenido y limita el uso para mostrar datos tabulares. Familiarízate con las opciones de marcado disponibles actualmente, como las que se ven en whatwg.org. Usa HTML para describir el contenido, no cómo se mostrará. Para mostrar tu contenido correctamente, usa CSS.

2. "Funciona en mi navegador..."

Error: Un desarrollador puede ser aficionado a un navegador en particular o realmente despreciar a uno, y puede probar principalmente las páginas web con ese sesgo a la vista. También es posible que las muestras de código que se encuentran en línea se escriban sin tener en cuenta cómo se procesarían en otros navegadores. Además, algunos navegadores tienen diferentes valores predeterminados para los estilos.

Impacto: Escribir un sitio centrado en el navegador probablemente resultará en una calidad muy pobre cuando se muestre en otros navegadores.

Cómo evitarlo: No sería práctico probar páginas web en cada navegador y versión durante el desarrollo. Sin embargo, tener un intervalo regular para verificar cómo tu sitio aparecerá en múltiples navegadores es un buen enfoque. Hoy en día, las herramientas gratuitas para ayudar están disponibles, independientemente de tu plataforma preferida: máquinas virtuales gratuitas o escáneres de sitios. Los sitios como Browsershots o BrowserStack muestran instantáneas de cómo se representaría una determinada página en múltiples navegadores/versiones/plataformas. Herramientas como Visual Studio también pueden invocar múltiples navegadores para mostrar una sola página en la que estás trabajando. Al diseñar con CSS, considera "restablecer" todos los valores predeterminados como se muestra en meyerweb.com.

Si tu sitio utiliza alguna característica de CSS creada específicamente para un navegador, ten cuidado de cómo te acercarás a los prefijos de los proveedores, como -webkit-, -moz-, o -ms-. Para obtener orientación sobre las tendencias de la industria en este sentido, valdría la pena tomar un tiempo para examinar las siguientes referencias:

• Microsoft Edge Dev Blog: Un descanso del pasado, parte 2: despedirse de ActiveX, VBScript, attachEvent...
• QuirksMode.org: Los prefijos del proveedor de CSS son considerados nocivos
• Bruce Lawson: En Internet Explorer que admite prefijos de proveedor de sitios web

Si bien las referencias anteriores explican un alejamiento de los prefijos de los proveedores y por qué, este sitio ofrece sugerencias prácticas sobre cómo trabajar en esto hoy.

3. Mala Forma

Error: Solicitar a un usuario que brinde cualquier información (especialmente cuando se ingresa en un campo de texto) y asumir que los datos se recibirán como se esperaba.

Impacto: Muchas cosas pueden ir mal (y probablemente lo harán) cuando la entrada del usuario es confiable. Las páginas pueden fallar si no se proporcionan los datos requeridos o si los datos recibidos no son compatibles con un esquema de datos subyacente. Aún más grave es la violación intencional de la base de datos del sitio, tal vez mediante ataques de inyección (mira OWASP: Top 10 2013-A1-Injections).

Cómo evitarlo: El primer consejo aquí es asegurarse de que el usuario tenga claro qué tipo de datos está buscando. En estos días, pedir una dirección puede dar como resultado un negocio, un hogar o incluso una dirección de correo electrónico. Además de ser específico, aprovecha las técnicas de validación de datos disponibles en el HTML de hoy como se ve en este artículo. No importa cómo se validen los datos en el lado del navegador, asegúrate de que siempre esté validado por el lado del servidor también. Nunca permitas que una sentencia concatenada de T-SQL use datos de la entrada del usuario sin la confirmación de que cada campo es del tipo de datos que debería ser.

4. Respuestas hinchadas

Error: La página está llena de muchos gráficos y/o imágenes de alta calidad, reducida con el uso de los atributos <img> de altura y ancho del elemento . Los archivos vinculados desde la página como CSS y JavaScript son grandes. La marca HTML fuente también puede ser innecesariamente compleja y extensa.

Impacto: El tiempo para procesar completamente una página se vuelve lo suficientemente largo como para que algunos usuarios se den por vencidos o incluso vuelvan a solicitar con impaciencia toda la página nuevamente. En algunos casos, se producirán errores si el procesamiento de la página tarda demasiado.

Cómo evitarlo: No adoptes la mentalidad de que el acceso a Internet es cada vez más rápido, lo que permite escenarios inflados. En su lugar, considera todo lo que va y viene del navegador a tu sitio como un costo. Las imágenes son un ofensor principal en la hinchazón de la página. Para minimizar el costo de las imágenes que ralentizan la carga de la página, prueba estos tres consejos:

1. Pregúntate: "¿Son absolutamente necesarios todos mis gráficos?" De lo contrario, elimina las imágenes innecesarias. Puedes escanear tu sitio aquí para obtener sugerencias sobre qué imágenes comprimir.
2. Minimiza el tamaño del archivo de tus imágenes con herramientas como Shrink O'Matic o RIOT.
3. Precargar imágenes Esto no mejorará el costo en la descarga inicial, pero puede hacer que otras páginas del sitio que usan las imágenes carguen mucho más rápido. Para consejos sobre esto, mira este artículo.

Otra forma de reducir los costos es minimizar los archivos CSS y JavaScript vinculados. Hay muchas herramientas para ayudar en este empeño, como Minify CSS y Minify JS.

Antes de abandonar este tema, esfuérzate por estar al día con HTML (mira el error n. ° 1) y usa tu buen criterio al usar etiquetas <style> y <script> en HTML. o en HTML.

5. Creando un código que debería funcionar

Error: Ya sea JavaScript o el código que se ejecuta en el servidor, un desarrollador ha probado y confirmado que funciona, por lo que concluye que debería funcionar una vez implementado. El código se ejecuta sin captura de errores, porque funcionó cuando el desarrollador lo probó.

Repercusión: Los sitios sin una correcta comprobación de errores pueden revelar los errores a los usuarios finales de una manera desagradable. La experiencia del usuario no solo se verá impactada de forma espectacular, sino que también el tipo de contenido del mensaje de error podría proporcionar pistas a un pirata informático sobre cómo infiltrarse en un sitio.

Cómo evitar: Errar es humano, así que lleva esa filosofía a la codificación. Con JavaScript, asegúrate de implementar buenas técnicas para evitar errores y detectarlos. Aunque este artículo aborda la codificación de JavaScript para las aplicaciones de Windows, la mayoría de los temas también se aplican al desarrollo web, ¡y está lleno de buenos consejos! Otra forma de ayudar a crear un código sólido que pueda sostener bien los futuros cambios en el código es la prueba unitaria.

Las fallas en el código del lado del servidor se deben capturar sin que el usuario vea ninguno de los detalles nerds. Revela solo lo que sea necesario y asegúrate de configurar páginas de error amigables para cosas como HTTP 404.

6. Escribir código de bifurcación

Error: Con la noción noble de admitir todos los navegadores y versiones, un desarrollador crea código para responder a cada posible escenario. El código se convierte en un montón de declaraciones if, bifurcando en todo tipo de direcciones.

Impacto: A medida que se actualizan las versiones nuevas de los navegadores, la administración de los archivos de código se vuelve voluminosa y difícil de administrar. Y como se menciona en el n. °1, es cada vez más innecesario.

Cómo evitar: Implementar la detección de características en el código frente a la detección del navegador/versión. Las técnicas de detección de funciones reducen drásticamente la cantidad de código y son mucho más fáciles de leer y administrar. Considera usar una biblioteca como Modernizr que no solo ayude con la detección de características, sino que también ayude automáticamente a proporcionar respaldo para navegadores más antiguos que no están actualizados con HTML5 o CSS3.

7. Diseñando sin ser adaptable

Error: El desarrollo del sitio supone verlo en el mismo monitor de tamaño que el desarrollador/diseñador.

Impacto: Al ver el sitio en dispositivos móviles o en pantallas muy grandes, la experiencia del usuario se resiente ya sea al no poder ver aspectos importantes de la página o incluso al evitar la navegación a otras páginas.

Cómo evitarlo: Piensa en forma adaptable. Usa un diseño adaptable (mira el artículo de Wikipedia o A List Apart) en sus sitios. Aquí hay algunos tutoriales prácticos sobre el tema, incluidas las imágenes adaptables. Una biblioteca muy popular lista para servir en esta área es Bootstrap.

8. Hacer páginas sin sentido

Error: Producir páginas públicas con contenido que podría ser muy útil, pero no proporciona ninguna pista para los motores de búsqueda. Las funciones de accesibilidad no están implementadas.

Impacto: Las páginas no se pueden detectar a través de los motores de búsqueda y, por lo tanto, pueden recibir pocas visitas o ninguna. El contenido de la página puede ser muy críptico para los usuarios con problemas de visión.

Cómo evitarlo: Utiliza SEO (Optimización de motor de búsqueda) y soporte de accesibilidad en HTML. Con respecto a SEO, asegúrate de agregar etiquetas <meta>  para proporcionar significado a una página con palabras clave y descripción. Un buen artículo sobre eso se encuentra en About Tech. Para permitir una mejor experiencia de accesibilidad, se debe determinar que proporciones un atributo alt="descripción de cada imagen" en cada una de tus etiquetas <img> o <area>. Por supuesto, hay más por hacer, y se pueden investigar más sugerencias en About Tech. También puedes probar una página web pública en Cynthia Says para ver si se cumple con la Sección 508.

9. Producir sitios que son demasiado refrescantes

Error: Crear un sitio que requiera actualizaciones completas de una página para cada interacción.

Impacto: Similar a las páginas infladas (ver error n.°4), el rendimiento del tiempo de carga de la página se ve afectado. La experiencia del usuario carece de fluidez, y cada interacción podría provocar un reinicio breve (o prolongado) de la página.

Cómo evitarlo: Una manera rápida de evitar esto es determinando si realmente se requiere publicar de nuevo en el servidor. Por ejemplo, el script del lado del cliente se puede usar para proporcionar resultados inmediatos cuando no hay dependencia para los recursos del lado del servidor. También puedes adoptar técnicas de AJAX (Wikipedia) o ir más allá con un enfoque de aplicación de una sola página "SPA" (Wikipedia). Existen bibliotecas/frameworks de JavaScript populares para facilitar la adopción de estos métodos, como JQuery, KnockoutJS y AngularJS.

10. Trabajando demasiado

Error: Un desarrollador pasa mucho tiempo creando contenido web. Puede pasar tiempo haciendo tareas repetitivas, o simplemente escribiendo mucho.

Impacto: El tiempo para el lanzamiento inicial del sitio web o las actualizaciones posteriores es demasiado largo. El valor del desarrollador disminuye cuando parece que otros desarrolladores están haciendo un trabajo comparable en menos tiempo y con menos esfuerzo. El trabajo manual es propenso a cometer errores, y la solución de los errores toma más tiempo.

Cómo evitarlo: Explora tus opciones. Considera usar nuevas herramientas o nuevas técnicas de proceso para cada etapa de desarrollo. Por ejemplo, ¿cómo se compara tu editor de código actual con Sublime Text o Visual Studio? Independientemente del editor de código que estés utilizando, ¿Has revisado recientemente sus características? Tal vez una pequeña inversión de tu tiempo leyendo detenidamente la documentación podría revelar una nueva forma de hacer algo que podría ahorrar horas y horas más tarde. Por ejemplo, observa cómo una extensión de Visual Studio puede aumentar la productividad para los desarrolladores web, como se ve en esta publicación.

¡No te pierdas las herramientas disponibles en la web para ayudar! Por ejemplo, consulta las herramientas en dev.modern.ie para simplificar las pruebas (en múltiples plataformas y dispositivos) y solución de problemas.

También puedes ayudar a reducir el tiempo y los errores mediante la automatización de procesos. Un ejemplo de esto es el uso de una herramienta como Grunt que puede automatizar cosas como la minimización de archivos (ver error # 4). Otro ejemplo es Bower que puede ayudar a administrar bibliotecas/frameworks (ver error # 9).

¿Qué tal el servidor web en sí? Con la ayuda de servicios como Microsoft Azure Web Apps, puedes crear rápidamente un sitio para prácticamente cualquier escenario de desarrollo que puedas escalar fácilmente con tu negocio.

Resumen

Al identificar errores comunes, los desarrolladores web pueden eliminar mucha frustración que otros ya han soportado. No solo es importante reconocerlo, sino que cuando comprendemos el impacto de un error y tomamos medidas para evitarlo, podemos crear un proceso de desarrollo adaptado a nuestras preferencias, ¡y hacerlo con confianza!

Más práctica con JavaScript

Este artículo es parte de la serie de desarrollo web de evangelizadores de tecnología de Microsoft sobre aprendizaje de JavaScript práctico, proyectos de código abierto y mejores prácticas de interoperabilidad, incluido el navegador Microsoft Edge y el nuevo motor de renderización EdgeHTML.

Te recomendamos probar en todos los navegadores y dispositivos, incluido Microsoft Edge, el navegador predeterminado para Windows 10, con herramientas gratuitas en dev.modern.IE:

• Escanea tu sitio en busca de bibliotecas desactualizadas, problemas de diseño y accesibilidad.
• Usa máquinas virtuales para Mac, Linux y Windows.
• Prueba de forma remota Microsoft Edge en tu propio dispositivo.
• Coding Lab en GitHub: Pruebas entre navegadores y mejores prácticas.

Aprendizaje profundo en tecnología en Microsoft Edge y la plataforma web de nuestros ingenieros y evangelistas:

• Microsoft Edge Web Summit 2015 (qué esperar con el nuevo navegador, nuevos estándares de plataforma web compatibles y oradores invitados de la comunidad de JavaScript)
• ¡Woah, puedo probar Edge & IE en Mac y Linux! (de Rey Bango)
• JavaScript Avanzando sin romper la Web (de Christian Heilmann)
• El motor de renderización Edge que hace que la web simplemente funcione (de Jacob Rossi)
• Dale rienda suelta a la representación 3D con WebGL (de David Catuhe, incluidos los proyectos Vorlon.JS y BabylonJS)
• Aplicaciones web alojadas e innovaciones de plataforma web (de Kevin Hill y Kiril Seksenov, incluido el proyecto ManifoldJS)

Más herramientas y recursos multiplataforma gratuitos para la Plataforma web:

• Visual Studio Code para Linux, MacOS y Windows
• Programa con Node.js y prueba gratuita en Azure