¡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.
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.
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.
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:
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.
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.
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:
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.
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.
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.
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.
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.
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.
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 :).
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 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.
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:
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:
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, 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:
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:
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:
¡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.
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:
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!
Vuejs, Laravel, NodeJS, WordPress, Serverless, React Native, Amazon Web Services y mucho más
Quiero hacerme Premium