Guía definitiva para el desarrollo web en 2021

Fecha de publicación: enero 9, 2021

¡Hola! Si no me conoces, me presento, soy Israel Parra y me dedico al desarrollo web desde el 2011, durante este tiempo he podido aprender muchas cosas. En esta entrada quiero compartir contigo muchas de estas cosas que he ido aprendiendo para que tú también puedas aplicarlas a tus proyectos, y por qué no, a tu vida personal, no todo va de código en el desarrollo web en 2021.

Aunque a día de hoy me dedico de forma casi exclusiva a programar con PHP y JavaScript, también trabajo puntualmente con Python y Java y creo que puedo dar una opinión global independientemente del lenguaje, aunque a continuación también lo trataremos.

Es importante dejar claro que gran parte del contenido de este post es acerca de la optimización y seguridad de sitios web, debemos ser capaces de desarrollar sitios web veloces para que Google nos ponga los primeros de la lista, pero éstos deben ser seguros por defecto.

Antes de continuar, verás que te persigo con botones de redes sociales durante todo el post, no es una indirecta, te estoy pidiendo que compartas este post con tus conocidos. Si te lo pido es porque sé que este post puede ser muy útil para muchos desarrolladores web, sean junio o senior, es un beneficio para todos.

¿Qué lenguajes de programación son recomendados este 2021?

El lenguaje de programación para el desarrollo web en 2021 podemos decir que no es de vital importancia ya que no sucede como antaño, donde habían lenguajes de programación como PHP o JavaScript que eran flexibles hasta el infinito y por ello abocaban a los desarrolladores a las malas prácticas.

Por suerte para los desarrolladores PHP en 2021 tenemos recursos excelentes de forma nativa que nos ofrecen la posibilidad de crear poderosas aplicaciones web, API’s o lo que sea que podamos hacer con PHP, aquí tienes la última entrada de sobre las novedades de PHP 8.

A continuación vemos los lenguajes más populares de programación los últimos años terminando en este pasado 2020.

Imagen de Octoverse GitHub

Podemos ver que el rey sigue siendo JavaScript, Python y Java se mantienen con respecto al año pasado y la gran subida se la lleva TypeScript, y no es de extrañar, nos ofrece todo lo que tiene JavaScript y añade el deseado tipado que todo desarrollador necesita para conocer a fondo su aplicación.

La peor parte se la llevan C++ y PHP, que bajan 2 posiciones, este último en un único año.

Consejos para ti si estás empezando en la web

Si estás empezando en el mundo del desarrollo web este 2021 te voy a dar unos cuantos consejos que estoy seguro te serán muy útiles en tu futuro próximo:

Si vas a tomar cursos en alguna plataforma, primero lee las reseñas de los estudiantes que ya han llevado a cabo ese curso. Si la plataforma te lo permite, empieza por leer las peores, quizá tengan algo en común que debas saber.

Dedica todo el tiempo que puedas al estudio personal, tú sólo con tu ordenador, no pidas ayuda a no ser que te hayas recorrido todo Google 10 veces, soluciona tus problemas por ti mismo, es la mejor forma de aprender, las mejores respuestas sin duda las encontrarás en StackOverflow.
¡Crea un Blog! Yo empecé así, aunque a día de hoy ese blog ya no existe, mis inicios en la web fueron así, allí escribía lo que iba aprendiendo en mi día a día (¡llegué a escribir 1500 entradas!). El saber transmitir lo aprendido a los demás nos hace mejores.
Si te lo puedes permitir, utiliza las mejores herramientas para programar, yo te recomiendo los productos de JetBrains, sin duda son los mejores, es cierto que son de pago, pero no hay punto de comparación.
Ejercicio, pasamos demasiadas horas sentados al cabo del día, por tu salud y para ser productivos lo mejor es estar en forma, aunque hoy en día es difícil, de momento nadie nos impide salir a hacer deporte 30 minutos al día, aprovéchalo.

Piensa en el tipo de proyecto que estás desarrollando

No es lo mismo desarrollar un panel administrativo que un sitio de comercio electrónico, un blog o un portal de noticias. Siempre debemos tener en cuenta múltiples factores si queremos que nuestro proyecto tenga éxito sea en el terreno que sea.

Cuando desarrollamos un sitio que no se va a posicionar en las SERPs (Search Engine Results Pages) no tenemos que preocuparnos de tantos detalles, ya que no seremos penalizados por Google, pero es muy distinto cuando estamos desarrollando un sitio web que sí queremos posicionar en Google, aquí hay demasiados factores que debemos tener en cuenta y que a continuación te desglosaré tanto como pueda.

DRY (Don't Repeat Yourself)

Este principio de diseño lo tenemos muy en cuenta en todos los cursos de la plataforma, y es la base para cualquier desarrollador, sea web o en cualquier otro ámbito. Siempre debemos evitar repetir código en diferentes lugares de tus proyectos, el motivo es que cuando la lógica de tu aplicación cambie, por pequeño que sea el cambio, tendrás que replicarlo en todos los sitios donde lo has hecho mal. En su lugar, refactoriza en pequeños trozos de código, sean clases, funciones, métodos o archivos de vista, incluso a nivel de bases de datos, siempre podemos crear procedimientos almacenados o vistas, tienen muchos beneficios.

Utiliza Git para gestionar tus proyectos

Git es un software de control de versiones independiente del lenguaje utilizado diseñado por Linus Torvalds que nos permite mantener y versionar nuestros proyectos de forma sencilla. Existen varias herramientas gratuitas para trabajar con Git, las más popular es GitHub, que también es la que utilizo en mi día a día.

Git apareció para ayudarnos a mantener el código fuente de proyectos con muchos archivos, podemos decir que hoy en día todos los proyectos tienen estas características. Existen muchos comandos para poder exprimir Git sin la necesidad de ser expertos en la herramienta, te recomiendo leer este artículo (en inglés) realmente merece la pena.

Si no sabes nada acerca de Git, no te preocupes, veamos un repaso rápido:

Repositorio: es una URL remota donde guardaremos nuestro proyecto, para trabajar con Git en remoto siempre deberemos añadir un repositorio.
Branch: es una copia de nuestro código actual donde trabajaremos para añadir nuevas características, solucionar bugs etcétera.
Tag: es una forma de versionar nuestro software, v1.0, v1.1, alpha1.2 etcétera.
Checkout: es un comando que nos permite crear ramas y movernos entre ellas.
Commit: es un comando que nos permite guardar los cambios que hemos hecho, aunque no los publica en el repositorio.
Push: es un comando que nos permite publicar nuestros cambios en el repositorio.
Pull: es un comando que nos permite descargar el código de un repositorio para actualizar nuestro proyecto local.
Merge: es un comando que nos permite unir el trabajo que hemos desarrollado en una rama con la rama en la que nos encontramos, a continuación te dejo un ejemplo básico pero real.

Ahora veamos algunos caso de uso, comencemos con el siguiente caso: creas un proyecto, desarrollas la primera versión estable, y quieres iniciar la segunda, ¿qué haces para guardar la primera versión? Con Git simplemente crearías un tag con la versión 1.0 y seguirías desarrollando tu trabajo en una nueva rama. El código que se ha guardado en el tag 1.0 no será modificado y siempre podrás recuperarlo, cuando hayas finalizado la versión 2.0 simplemente podrás publicarla y seguir trabajando en tu rama de desarrollo o en la que desees.

Otro caso muy típico es cuando trabajamos en equipo, imagina que te asignan solucionar un bug, es posible que tus compañeros hayan hecho modificaciones en el código que tú todavía no tienes. Gracias a Git simplemente podrías utilizar el comando pull para descargar ese código del repositorio remote, una vez tengas el código actualizado en tu equipo, crea una nueva rama, realiza los cambios, y, una vez el bug haya sido solucionado, alguien deberá hacer merge con la rama definitiva.

En el curso de PHP 7 aprendemos las bases de Git para que una vez hemos aprendido a programar con PHP tengamos una herramienta que nos facilite la gestión de nuestros proyectos.

Optimiza las imágenes tanto como te sea posible

En Cursosdesarrolloweb utilizo muchas imágenes para mostrar los cursos que voy publicando. Si en la página principal de cursos donde actualmente cargo cerca de 60 imágenes no perdiera tiempo en la optimización de cada una de ellas, esa página directamente no cargaría, o lo haría cuando el interesado ya ha marchado, por lo que tendría una página que no serviría a nadie.

A día de hoy existen muchas formas para optimizar las imágenes, pero sin duda la que más le gusta a Google son las imágenes en formato webp, supongo que siendo webp de su propiedad tendrá algo que ver :), lo peor de todo esto es que Google es el que muestra nuestros proyectos al resto del mundo, así que de momento debemos pasar por el aro.

Si quieres utilizar el formato webp te recomiendo utilizar las herramientas que Google nos ofrece.

Si te fijas en la imagen de Octoverse del principio del post, esa imagen pesa 20kb, eso es una imagen optimizada, ten en cuenta que cada imagen debe ser descargada por el usuario que visita los proyectos que desarrolles, si tiene una conexión lenta, por ejemplo una red 3G, puede ser un autentico drama.

Utiliza lazyload para cargar tus imágenes

Lazyload es una técnica que se puede implementar en muchas partes de un proyecto web, en este caso nos referimos a las imágenes.

La página de cursos de la plataforma donde de inicio se cargan actualmente más de 60 imágenes es un ejemplo excelente, y ahí utilizo Lazyload, ¿para qué? Muy sencillo, de esta forma los navegadores únicamente cargan las imágenes que el usuario puede ver, es decir, conforme el visitante va haciendo scroll el navegador las imágenes van cargando, de esta forma evitamos bloqueos del DOM y mostramos al visitante únicamente lo que es de su interés, adicionalmente ahorramos recursos del servidor.

Precarga el contenido de sitios externos

Es muy típico utilizar fuentes de Google en nuestros sitios web, y te garantizo que el 90% de los desarrolladores web lo único que hace es añadir las hojas de dichas fuentes en la cabecera del sitio y definir los @font-face, y no es que esté mal, pero siempre que utilicemos contenidos de terceros debemos pensar mal, y cuando digo pensar mal me refiero a pensar en que todo lo externo puede hacer que nuestro sitio se vuelva lento, lento = malo.

Para solucionar este problema existe una etiqueta html en forma de elixir que podemos aplicar de una forma muy sencilla, en el caso de querer utilizarla para las fuentes de Google simplemente deberíamos añadir lo siguiente a la cabecera de nuestro sitio:

DNS-prefetch intenrará resolver nombres de dominio antes de que se soliciten los recursos para que al momento de requerirlos la petición sea más rápida, y eso, al inicio de la carga de un sitio es crucial.

Minifica todo lo que puedas, CSS, JS y HTML

Minificar código es «una técnica» que nos permite eliminar espacios para reducir tamaños y conseguir mejores tiempos de carga. Lo ideal es minificar todo el código que nos sea posible, sea CSS, JS o HTML, aunque no siempre es posible, sobre todo por el código JavaScript, ya que cuando éste se minifica es muy probable que reporte errores.

Siempre que sea posible lo mejor es minificar todo el código CSS en un único archivo .css y los mismo con el código JS, no es lo mismo cargar 20 archivos que 2.

Lo que yo te recomiendo es que intentes minificar todo el código que puedas y pruebes si funciona o no, si funciona perfecto, en otro caso deberás buscar qué está fallando para solucionarlo o en el peor de los casos dejar pasar esta oportunidad de optimización.

Manda los scripts al fondo

La carga de archivos en la cabecera de un sitio hace que los tiempos de carga de nuestro sitio se vean degradados en muchos casos con efectos negativos importantes. Para evitar bloqueos de carga en nuestros sitios lo mejor es diferir esa carga pasando los archivos .js al final del HTML, de esta forma la página no sufrirá bloqueos y será más rápida.

Ten en cuenta que actualmente un sitio web es leído por los navegadores de arriba abajo, si ponemos al inicio un bloque que pesa 2MB, el visitante para ver algo primero deberá descargar esos 2 MB, mala idea.

Utiliza una red CDN para servir los archivos estáticos

Una red CDN no es más que un servidor normalmente externo a nuestro sitio que se encarga de entregar los archivos de imagen, css y js para que la carga sea más rápida que la que nosotros podemos ofrecer. Hace tiempo hice un curso para añadir una red CDN a proyectos Laravel.

La característica principal de una red CDN es que ésta se encargará en cada petición de servir los recursos estáticos a nuestros visitantes, pero no de cualquier forma, buscará la localización del visitante y tratará de utilizar siempre los servidores más cercanos a éste, no es lo mismo que te traigan un paquete a 2 kilómetros de distancia que a 20 :).

Utiliza la caché siempre que puedas

Existen muchos niveles de caché en un sitio web, en este primer caso nos vamos a centrar en la caché de arhivos que entregamos finalmente a los visitantes de nuestros sitios, por ejemplo la página que estás viendo, ¿imaginas que cada visitante de este post la tuviera que cargar en cada petición? No tendría sentido ya que es una página estática que no cambiará nunca, ¿o sí?

Para solucionar esto lo más sencillo es almacenar estos archivos en caché, pero claro, aquí entran en juego múltiples factores, sobre todo cuando hablamos de sitios web dinámicos como Cursosdesarrolloweb que tienen usuarios que pueden iniciar sesión, ahí todo se complica, pero no te preocupes, más adelante te daré la solución perfecta 🙂

Ahora bien, si tu sitio es estático, estás de suerte, simplemente deberás crear una copia del HTML generado por tu servidor con el código dinámico para guardar ese archivo en un directorio, tipicamente cache/views/home.html, la primera vez que alguien pida ese archivo nuestro servidor deberá generarlo si no existe, las veces siguientes simplemente comprobaremos si el archivo existe, en ese caso lo serviremos:

Memcached, ayuda a tu base de datos

Memcached puede ser un gran aliado para acelarar tu sitio, ¿otra vez caché? Sí, pero esta vez a nivel de base de datos.

Memcached es empleado para el almacenamiento en caché de datos u objetos en la memoria RAM. Conforme la caché se va llenando, los datos que más tiempo llevan sin ser utilizados se borran para dar espacio a los nuevos, es así de sencillo.

La mayoría de los servidores autogestionados que existen hoy en día ofrecen Memcached con un click, así que no es algo que deberás configurar normalmente, pero si debes hacerlo, no te preocupes, es sencillo.

Alternativamente y no por ello peor ni mucho menos, puedes optar por Redis, la meta es la misma, pero Redis es más avanzado y ofrece más características que Memcached.

Elije un buen sistema de hosting para tus sitios

Este post no es para monetizar, no existen anuncios ni tampoco referidos, es una opinión sincera, por ese motivo no te daré nombres de sistemas de hosting, sólo ideas que te pueden ayudar a escoger bien.

Un buen sistema de hosting puede ser determinante en la mayoría de los casos, yo te voy a dar pistas para que tú sepas cuál escoger llegado el momento:

Busca opiniones antes de contratar.
Mira el precio que te ofertan ahora, pero fíjate más en el precio de renovación, muchos sistemas te enganchan con una oferta inicial y te destrozan renovación tras renovación.
Asegúrate que tu sistema de hosting sirve el contenido cerca de donde tienes tus clientes, no tiene sentido tener un servidor en Dallas que sirva contenido a usuarios de España.
Copias de seguridad automáticas a diario, casi todos lo ofrecen, pero nunca está de más asegurarse.
Tiempos de carga, este paso es difícil y depende de demasiadas cosas, lo mejor sería poder probar cada sitio con un mismo proyecto y realizar pruebas de velocidad.
Entorno de Staging, muy útil trabajando con WordPress si el cliente quiere hacer cambios, actualizar plugins y demás sin romper producción. Nos permite hacer una copia de nuestro entorno de producción en un subdominio tipo staging.cursosdesarrolloweb.es donde podemos aplicar nuevas funcionalidades, actualizaciones o cualquier cosa, una vez estemos conformes con los cambios, con un sencillo click podremos pasar nuestro entorno de pruebas a producción sin ninguna afectación.

Has de ser rápido o no posicionarás nunca

Cada vez Google nos lo pone más difícil, año tras año su algoritmo se va actualizando y cada vez tiene en cuenta más cosas, cosas que finalmente afectan a cómo y dónde aparecemos en las SERPs.

Pero que no te engañen, si quieres que tus proyectos o los de tus clientes posicionen alto en las SERPs, además de aplicar buenas técnicas de SEO (lo vemos más adelante) y redactar buen contenido, debemos ser realmente veloces, si no somos rápidos lo demás no servirá absolutalmente para nada.

Para saber si tus sitios y los de tus clientes son rápidos, no basta con verlos desde tu conexión de 600MB simétricos :), existen herramientas que te harán sufrir, y, si no las has utilizado nunca antes, incluso llorar.

A continuación, además de recomendarte algunas herramientas, te explico los puntos más importantes de los resultados que encontrarás, debes saber que estos resultados son métricas que Google tendrá en cuenta para posicionarte:

GTMetrix, para mi la mejor herramienta que existe. Simplemente introduce la URL de la página que desees analizar y en unos pocos segundos tendrás tus resultados, si ves poco verde estás en problemas. A continuación te adjunto una imagen del resultado de una URL de un curso de Cursosdesarrolloweb.
PageSpeed Insights, parecido a GTMetrix pero más rigurosa desde mi punto de vista, esta herramienta es propiedad de Google.
TTFB (Time to first byte) es el tiempo que tarda el navegador en recibir la primera información desde un servidor web después de realizar la petición, es algo súper importante para posicionar alto en las SERPs.
FCP (First contentful paint) es una métrica que Google tiene en cuenta y es de vital importancia que esté por debajo de 1 segundo para ser bien vistos por Google, trata de qué tan rápido se pinta contenido como texto o imágenes en tu página. Una buena experiencia de usuario es 0,9 segundos o menos.
LCP (Largest Contentful Paint) otra métrica que Google tiene en cuenta, en este caso trata de cuánto tiempo tarda tu servidor en renderizar un archivo grande, por ejemplo una sección Hero con una imagen pesada, es de vital importancia que nunca exceda de 1,5 segundos.
CLS (Cumulative Layout Size) Cuánto cambia el diseño de tu página a medida que se carga. Una buena experiencia de usuario es una puntuación de 0,1 segundos o menos.

Cuando comparemos sitios debemos hacerlo siempre en el mismo contexto, no me compares un blog con un sitio de comercio electrónico, es comparar peras con manzanas 🙂

En el caso de Cursosdesarrolloweb, los resultados podrían ser mejores, sobre todo en dispositivos móviles, el problema es que Cursosdesarrolloweb utiliza muchas funcionalidades, las más complejas son la venta individual de cursos y la membresía, estas características hacen que se requieran demasiados procesos y sea muy difícil conseguir puntuaciones por encima de 90.

SEO para ti y para tus clientes

SEO, acrónimo de Search Engine Optimization, en castellano optimización de motores de búsqueda, es la forma en la que las personas podemos hacerle saber a Google acerca de nuestro sitio web, temática, reseñas, promociones o cualquier cosa que deseemos hacerle saber al resto del mundo, recuerda que la gente nos encuentra normalmente a través de Google.

Pero si la velocidad le encanta a Google, no lo es menos la forma en la que redactamos nuestros contenidos, eso te garantizo que le encanta, y, contra mejor lo hagas y más tiempo inviertas en crear contenidos de valor, más le gustaras a Google.

Hace poco publiqué un curso de SEO para programadores Laravel, aunque se puede extender a otros lenguajes y frameworks, entender el concepto es la base de todo, si eres desarrollador web estoy seguro que te puede ayudar, pero volvamos al tema importante.

Nosotros como desarrolladores web podemos crear sitios web para nuestros clientes cuya principal premisa sea posicionar alto en los buscadores. Aunque es cierto que no somos expertos en SEO, la web está llena de contenido valioso relacionado con el mundo del SEO y yo llevo muchos años dando vueltas por la web :), así que te voy a compartir muchas de las cosas que he aprendido.

Quizá tú no las necesites directamente, pero pueden ser vitales para tus clientes, lo cual te puede aportar a ti como desarrollador un plus a ojos de ellos:

Escribe contenido que sea capaz de captar la atención de quienes lo leen, no escribes para robots, escribes para personas.
Demuestra que sabes de que hablas, da detalles de lo que explicas igual que yo lo estoy haciendo en este post y en todos los cursos que desarrollo en la plataforma, los que te visiten buscan personas cercanas que saben de qué hablan.
Utiliza URLs amigables, seguramente ya lo sabes, pero una url similar a www.cursosdesarrolloweb.es?postid=10 no posiciona igual que una url www.cursosdesarrolloweb.es/blog/guia-definitiva-para-ser-un-buen-desarrollador-web-en-2021/, el motivo es que mientras la primera url no le dice nada a Google, la segunda le ofrece palabras clave muy relevantes.
Utiliza las redes sociales ¿? Bueno, yo realmente no lo hago, YouTube, algo en Facebook, dejémoslo, no soy el más indicado para recomendarte sobre redes sociales :), pero dicen que son útiles. La principal meta de las redes sociales es hacerte atractivo y necesario para los demás con la finalidad de que te visiten y realicen una conversión (compren algo o simplemente te dejen su correo electrónico).
Velocidad, es un factor súper importante para posicionar alto en las SERPs.
Intercambiar enlaces con sitios de tu misma temática con un DA (Domain Score) alto puede ser muy beneficioso, pero también es cierto que puede ser muy complejo ya que es probable que la meta de ambos sea la misma, pero siempre hay que valorarlo. La idea es que tu competencia ponga un enlace hacia tu sitio en su web y tú le respondas de la misma forma, si Google ve que desde la competencia te están enlazando te valorará mejor en las SERPs. Personalmente nunca lo he hecho.
Evita la canibalización, esto es algo complejo dependiendo de la temática, pero antes, te explico de qué trata la canibalización en SEO: entendemos por canibalización cuando un mismo sitio web compite por la misma palabra clave consigo mismo en diferentes artículos. Si Google detecta canibalización en tu sitio lo que sucederá es que en lugar de competir con el 100% de tus fuerzas contra los demás, lo estarás haciendo a un 50% o menos, si a eso le sumas que además compites contigo mismo, probablemente desaparezcan esos artículos de las SERPs, ¡mucho cuidado!
Las imágenes también hablan, y lo hacen a través del atributo alt. Si le añades este atributo a tus imágenes Google sabrá de qué trata y sabrá si tiene que mostrarla por ejemplo en Discover, algo que hace un tiempo atrajo a muchos usuarios a la plataforma, además, las imágenes, cómo ya he explicado antes, deben estar en un formato optimizado, webp o jpg preferiblemente, que pesen poco y que sean atractivas, aquí no te puedo ayudar demasiado ya que yo de diseño poco…
Schema.org es una web que nos ofrece diferentes formas de explicarle más cosas a Google a través de diferentes «herramientas» que todos tenemos a nuestra disposición, yo personalmente utilizo Microdatos y JSON-LD en mis sitios. JSON-LD es más sencillo de implementar para los desarrolladores ya que simplemente son datos en formato JSON que imprimimos en el código fuente de nuestros sitios. En cambio los Microdatos nos obligan a explicarle a Google acerca de nuestro sitio a través de las etiquetas HTML que utilizamos a través de atributos especiales que están destinados para este propósito, en el curso de SEO para programadores Laravel escribimos un blog con Microdatos y JSON-LD, no dudes en visitarlo.
Las etiquetas de encabezado h1, h2 y h3 son muy importantes para nuestro sitio. Nunca debemos tener más de una etiqueta h1 en una página, ya que la etiqueta h1 le dice a Google de qué trata esa página. En cambio, podemos tener muchas etiquetas h2 y h3. Mientras las etiquetas h2 explican secciones de nuestra página, las etiquetas h3 pueden hablar de subsecciones de las secciones que cubren la etiqueta h2, parece difícil pero realmente es sencillo, a continuación te dejo un código de ejemplo.

SEO para páginas SPA

Todo lo explicado en el apartado anterior es válido para este, aquí sólo sumamos.

Por si no lo sabías, una página SPA (Single Page Application) es lo contrario al SEO, es decir, son páginas que no renderizan HTML y por ende los motores de búsqueda no saben rastrearlas, mucho menos posicionarlas.

Por suerte para nosotros existen soluciones para que una página SPA se convierta en una página capaz de posicionar. En esta ocasión te voy a proponer 2, una que cubrimos en la plataforma en forma de curso y otra que depende de un tercero y que no es gratuita:

Si quieres posicionar una página con un comportamiento SPA, entonces, en lugar de desarrollar aplicaciones SPA, desarrolla aplicaciones SSR, aquí tienes un curso completo con Vue y Quasar Framework donde explicamos todo el proceso paso a paso partiendo de cero. La idea es seguir desarrollando una aplicación SPA pero pasándole la responsabilidad de renderizar el HTML final al servidor, en este caso a NodeJS.
Si en cambio deseas tener una vida fácil desarrollando aplicaciones SPA y quieres pasar la responsabilidad a una plataforma especializada en esto, sin duda te recomiendo Prerender.io, no hay nada que decir, es sencillamente genial.

Haz que tus sitios sean seguros

La seguridad es sin duda lo más importante de un sitio web, por ti, pero más por tus clientes, y aquí existen muchas cosas que podemos hacer para intentar mitigar los daños a diferentes niveles, a continuación te expongo algunos de los más importantes a nivel de seguridad para sitios web:

Es necesario por no decir obligatorio que todos tus sitios viajen a través de HTTPS. HTTPS es un protocolo de aplicación basado en el protocolo HTTP, destinado a la transferencia segura de datos de Hipertexto, es decir, es la versión segura de HTTP, actualmente HTTP/2 y en breve HTTP/3. Hoy en día podemos generar certificados gratuitos autorenovables con Let’s Encrypt.
DDoS, debes tener cuidado si no sabes nada acerca de este tipo de ataques ya que son capaces de dejarte fuera de juego. En seguridad informática se conocen como ataques de denegación de servicio, los cuales causan que un servicio o recurso sea inaccesible por los usuarios legítimos (en este caso tú o yo). Un ataque DDoS provoca la pérdida de la conectividad con la red por el consumo del ancho de banda de la red o sobrecarga de los recursos del sistema atacado (CPU).
Bots, si no sabes nada acerca de ellos, es muy sencillo, Google tiene un bot que se le conoce como Google Bot, pero este es «bueno», los malos son aquellos que vienen en manada con la finalidad de dejarte fuera de juego de nuevo, similar a un ataque DDoS. Hoy en día es fácil lanzar bots contra un sitio web con la finalidad de dejar el sitio fuera de la red durante unos minutos, horas. Tu meta es saber detectar a esos bots para que cuando aparezcan no puedan perjudicarte, no te preocupes porque te explico cómo solucionarlo más adelante.
¿Por qué me van a atacar con Bots o me van a lanzar un ataque DDoS? Un momento para atacarte puede ser el siguiente: Imagina que eres un sitio de comercio electrónico y estamos en el Black Friday, ¿no iba un rival querer quitarte de la red durante un tiempo para perjudicarte? Bueno, la gente sana mentalmente no hace estas cosas, por desgracia, estamos rodeados de gente insana, dejémoslo así.
Ataques por fuerza bruta, un ejemplo claro de uso puede ser el intento de iniciar sesión sin cesar por parte de un usuario en tu sitio web. Te aseguro que existe mucho bobo en este mundo que va a un sitio web con la meta de poner admin y 123456 para intentar iniciar sesión como administrador, ¿sabes qué es lo peor? Que existe mucha gente que utiliza esas credenciales en sus sitios… así es. Por suerte estos problemas los podemos mitigar de muchas formas, aquí en Cursosdesarrolloweb aplicamos una capa de seguridad contra ataques de fuerza bruta.
Encripta tu base de datos siempre que puedas, existen servicios de pago como Amazon RDS que hacen este trabajo por nosotros. El proceso que lleva a cabo Amazon RDS es transparente para nosotros, pero cualquiera que desee acceder a los datos sin las credenciales de la base de datos no podrá leerlos ya que no tendrá acceso.
La mejor solución sin duda a la perdida de datos por un ataque es hacer copias de seguridad de tus archivos y bases de datos a diario, ya lo expliqué en la sección «Hosting», siempre que algo se rompa, reemplazarlo será sencillo, si a eso le sumamos encriptación, los atacantes lo tendrán difícil.

Serverless, ¡olvídate de gestionar servidores!

¡Serverless es el futuro! Eso dicen algunos, yo pienso que es el presente. Los desarrolladores web somos por general muy buenos en lo que hacemos (siempre hay excepciones), pero no tanto en la gestión y mantenimiento de servidores.

Serverless viene a solucionar este inconveniente por la vía rápida, y por suerte, tenemos una solución llamada Serverless Framework que se encarga de llevar a cabo todas las configuraciones necesarias para que nosotros únicamente nos preocupemos en escribir código, sea JavaScript, PHP, Python o con cualquier otro lenguaje soportado por Serverless Framework.

Si estás pensando en empezar un nuevo proyecto no te pierdas el curso de introducción a Serverless Framework que he preparado. En ese curso te explicaré desde cero todo lo que necesitas saber para empezar a crear tus primeras aplicaciones sin servidor con Node.js y Amazon Web Services.

¡Cloudflare al rescate!

Todavía son muchos los que piensan que Cloudflare es simplemente una red CDN que sirve para entregar contenidos estáticos, nada más lejos de la realidad. A mi personalmente me ha abierto un abanico de oportunidades para mejorar tanto la velocidad como la seguridad de mis sitios web que jamás pensé que podría ser tan sencillo.

Es importante aclarar que Cloudflare no es gratuito, pero también cabe decir que no es caro en absoluto para todo lo que nos puede ofrecer, a continuación te explico algunas de las cosas que podemos hacer en cualquier sitio web con Cloudflare, yo las utilizo en la plataforma.

Ese es el panel principal con todas las opciones que nos ofrece Cloudflare, desde ahí con unos sencillos clicks podemos optimizar y proteger nuestros sitios de una forma terriblemente sencilla, veamos algunos puntos interesantes:

Modo Under Attack: si estás siendo atacado Cloudflare te permite activar una opción la cual se encargará de añadir una capa de seguridad extra a tu sitio para asegurarse que el visitante no es malicioso a través de un desafío JavaScript.
Modo Bot Fight: con esta opción tu sitio podrá desafiar y/o bloquear las solicitudes que coincidan con los patrones de bots conocidos antes de que puedan acceder a su sitio.
Always Online: si lo necesitas, puedes decirle a Cloudflare qué páginas deseas que aunque el sitio no esté Online quieres que sirva a los visitantes, un caso típico sería una página de ayuda o contacto.
Analytics: nos permite ver todo lo que Cloudflare está haciendo por nosotros a partir de la configuración que hemos definido, MB que hemos ahorrado con la caché, ataques maliciosos de los que hemos sido protegidos, de dónde viene el tráfico, en definitiva, todo lo que sucede en nuestro sitio a través de las visitas que se generan.
Firewall o WAF: ofrece seguridad de forma automática a tus sitios sin afectar al rendimiento, además, tenemos a nuestra disposición una serie de paquetes dependiendo de la herramienta con la que está desarrollada nuestro sitio, WordPress, Drupal, Joomla incluso PHP que podemos activar y desactivar con un click, puedes leer más en este artículo.
Caching: puedes almacenar en caché tus sitios para acelerar la carga, además, puedes purgar la caché de forma global o de urls individuales, por ejemplo esta página. También puedes configurar el TTL (time to life o tiempo de vida) de caché del navegador para especificar cuánto tiempo permanecerán los archivos en caché en la memoria caché del navegador del visitante. Cloudflare establecerá el tiempo de vencimiento a menos que se especifiquen periodos más largos en el servidor web.
Speed: desde esta sección podemos ver de un vistazo el tiempo de carga de nuestro sitio con una secuencia de imágenes para saber en cuanto tiempo los usuarios que nos visitan ven contenido. Además, tenemos la posibilidad de optimizar varias cosas, aunque algunas de ellas son para planes Business, el cual tiene un costo mensual de 200$, por ejemplo pasar todas las imágenes de tu sitio a webp, Cloudflare guardará cada imagen en caché, la convertirá y posteriormente la servirá :).
Workers, esta es mi parte preferida :), son sencillamente geniales y los utilizo en la plataforma, ¿para qué? Para hacer un bypass de la caché de los usuarios que se identifican en el sitio, ¿cómo? Con código JavaScript directamente en Cloudflare, recuerda que es quien realmente retorna la respuesta si estás utilizando caché.
La idea es muy sencilla, mi sitio está construido con WordPress, y éste crea una serie de cookies para identificar a los usuarios, una vez alguna de esas cookies existe, le digo a Cloudflare a través de un Worker que no sirva la caché a ese usuario, quiero que los usuarios identificados tengan acceso a su perfil, a sus cursos y a todo por lo que han pagado o simplemente a los cursos gratuitos de la plataforma.

Despedida

Me podría explayar mucho más pero creo que con todo lo anterior he podido aclarar siempre desde mi punto de vista lo que un buen desarrollador web necesita saber en 2021, no todo va de escribir código, hay muchas más piezas detrás de un sitio web que debemos tener en cuenta y cuidar al máximo.

Si te ha gustado el post y no lo has hecho todavía, compártelo, creo que puede ser muy beneficioso para todos los que nos dedicamos al desarrollo web en 2021.

Y antes de despedirme, si crees que he pasado por alto algún punto importante házmelo saber a través del formulario de contacto, iré actualizando esta entrada cada vez que lo crea necesario.

Ahora sí, muchas gracias por tu tiempo si has llegado hasta aquí, te deseo lo mejor a todos los niveles para este 2021 que seguro estará lleno de retos.

¡Un abrazo!

¿Quieres acceder a más de 100 cursos de PHP y JavaScript?

Vuejs, Laravel, NodeJS, WordPress, Serverless, React Native, Amazon Web Services y mucho más

Quiero hacerme Premium