Optimización de tus sitios web, cargan más rápido = mejor interacción de usuarios.

Felipe Salazar — Sat, 14 May 2022 04:35:58 +0000

Después de dos noches trasnochando capacitándome y buscando información al respecto, al fín pude mejorar mi tiempo de carga en el tester para sitios web, al 99%, gracias a un artículo/post que leí en reddit(sí, reddit, tiene sus cosas, pero en general es un medio para encontrar información muy valiosa en el área de la programación) de un programador web de Usa, que, al igual que yo nos desenvolvemos en el área de construir sitios web para empresas y negocios medianos y pequeños, dejo mi sitio web al final del post, para que prueben la velocidad de carga y de paso vean mis proyectos que he hecho. Aquí escribo parte de lo que aprendí:

Muchos programadores web, subestiman la etapa o fase de optimización de recursos a la hora de publicar o desplegar su sitio web, he visto páginas web que sin razón aparente demoran mas de 5 segundos en cargar, esos 5 segundos son demasiados para la atención de un usuario promedio que se topa con tu sitio web, el periodo máximo de atención es de 3s, claro, si tu página web tiene videos incluidos, es razonable esperar un periodo de carga un poco mas extenso, sin embargo, a la hora de escribir código, es esencial hacerlo con la versión para celulares o móviles en mente, escribe tu css en móvil primero, así aumentará la velocidad de carga, cuando el motor del navegador lee tus archivos, busca responsividad, y la primera que encuentre,esa es la que desplega de primero, si encuentra en tus archivos css que está escrito principalmente en versión de pc de escritorio,entonces cargará esa versión, asi que si un usuario carga desde el celular, el motor del navegador tendría que leer o analizar doble vez hasta encontrar la versión adecuada para el usuario.

Otro factor a tener en cuenta es qué tan optimizadas están tus imágenes, me refiero a que tanto pesan? 1 mb? 2mb?, cuanto pesa en total la carpeta completa de tu sitio web al momento de desplegarlo?, si pesa mas de 3 mb, o 10 mb(en caso de los que incluyen videos), es mejor dedicar media hora de tu tiempo a comprimir las imágenes y videos. luego de comprimirlas, es aconsejable convertirlas a formato webp, el formato webp es mucho más rapido en cargar, más liviano a la vez que mantiene la calidad o definición de la imagen. Después de seguir estos pasos lo más probable es que tu sitio web que pesa 39 mb, ahora pese 2 o 3 mb, al desplegarlo y cargarlo en un móvil o incluso en una dekstop, verás la velocidad de carga óptima que debe tener todos los sitios web que despliegues de ahora en adelante, para asegurarte más pásalo por un tester online de sitios web, lo más probable es que veas resultados de optimización del 99 o 100%.

Mi sitio web :

digitalwebdesign.tech

Aprender a programar sitios web... por dónde empezar??

Felipe Salazar — Mon, 02 May 2022 06:14:38 +0000

Quieres construir esos sitios web que siempre has querido hacer, postear artículos personalizados desde cero, agregar animaciones elegantes, diseños profesionales o divertidos o simplemente te parece que el desarrollo web es el primer paso más ideal para entrar en el mundo de la programación, tal vez luego quieres desarrollar videojuegos, o tal vez, ves el desarrollo web como el pase de entrada al primer trabajo en el mundo de la programación en general...

...Pero te has dado cuenta que hay demasiado material en internet, una cantidad de tutoriales en Youtube sobre programación, tus amigos te recomiendan cada uno un tutorial o video diferente... Y no sabes por donde empezar...

En este blog, estaré escribiendo mis conclusiones en estos dos años y medio que llevo de aprender programación web. También estaré compartiendo enlaces a tutoriales y material gratuito de calidad, como también cursos de pago. En general siempre estaré enfocandome en mostrar la metodología que, según he aprendido es la más ideal, para no cometer los mismos errores que muchos cometemos al comienzo cuando queremos iniciar en el mundo de la programación en general.

Hola mi nombre es Felipe, soy desarrollador web o más bien un iniciado en el mundo de la programación web con algo de experiencia tomando cursos y navegando por internet en esa búsqueda del más completo curso o tutorial en la web. Actualmente he realizado desde cero varios sitios web responsivos tanto para móvil como para desktop, y he hecho ya un par de proyectos reales a clientes que necesitaban sitios web con look profesional para su negocio o empresa(mi portafolio o demo: https://felipe-desarrolladorweb.netlify.app). Así que en cierta medida tengo la suficiente experiencia como para poder dar una estructura más clara para el principiante que apenas está incursionando y tiene miedo de perderse en este mar de contenido llamado internet.

Sin rodeos diré que, NO HAY EL CURSO PERFECTO... A qué me refiero con esto? no estoy diciendo que no existan cursos lo suficientemente completos para poder aprender lo necesario y más en desarrollo web, a lo que me refiero es que...

Por más que queramos quedarnos con un único curso o fuente de información en el cual concentrarnos únicamente por el resto del mes o meses, tarde o temprano(más temprano que tarde) notaremos que falta mejor entendimiento de los conceptos que vamos siguiendo en el curso que estemos mirando, y pensamos que no somos lo suficientemente inteligentes como para poder entender con claridad cada concepto que se explique en dichos cursos, pensamos que tal vez, no estamos hechos para ser programadores, y que a lo mejor esto se le da perfecto a los que tienen una mente más matemática...

Les diré la verdad, qué es lo que se necesita para llegar a ser un excelente programador, se resume en dos palabras, bueno tres si contamos la 'a':

-Aprender a aprender.

Aprender a aprender? Qué??, Sí, tal y como es, aprender a aprender significa, que debemos de tener un método o al menos una serie de pasos a seguir para poder maxificar y aumentar la calidad y velocidad de nuestro aprendizaje.

Todo programador, tanto principiante como profesional o 'Senior', cada día esta aprendiendo temas nuevos, nuevos lenguajes de programación, nuevas funcionalidades de una nueva herramienta, frameworks, tools novedosos o recientes, sintaxis, Librerías, programas,etc... Así que si lo que queremos es encontrar un curso que nos solucione todos los problemas que tenemos para entender un lenguaje de programacion porque nos desanima la idea de tener que seguir buscando por la web... Sería bueno empezar a acostumbrarnos a buscar información. Mejor dicho, esos serían los primeros pasos para fortalecer la habilidad principal que debe tener todo programador: APRENDER A APRENDER o Aprender a buscar información.

Dicho esto, dejaré en los siguientes párrafos una pequeña guía mas enlaces de tutoriales y cursos que serán de gran ayuda para el que apenas comienza y no tiene ni idea por donde empezar:

-Canales de youtube en español:

Fazt web y Fazt code es uno de los mejores canales de programacion web que existen en español, Fazt es un desarrollador web que tiene años de experiencia no solo enseñando sino trabajando como programador web en una cantidad de proyectos como freelancer haciendo sitios web y todo tipo de proyectos de desarrollo para clientes individuales y empresas. Sus canales tienen tutoriales bastante completos y prácticos sobre como programar, desde los conceptos más básicos hasta los avanzados. El canal Fazt web es más general y es más dirigido para principiantes que quieren aprender los fundamentos del desarrollo web y los lenguajes más utilizados en el mismo, sus cursos 'Curso HTML para principiantes', 'Curso CSS para principiantes', 'Curso Javascript para principiantes', son perfectos para fundamentar conocimientos, teoría junto a miniproyectos y ejercicios prácticos a medida que se va avanzando.

https://youtu.be/rbuYtrNUxg4

Hay otros tutoriales y cursos en canales de Youtube famosos como: Jhon mircha, Hola mundo, Falconmasters, Fernando Herrera, entre otros.

Jhon Mircha Curso HTML Y CSS:

https://www.youtube.com/watch?v=-oK6zL01fNM

Este curso de Juan Pablo de la Torre es mucho más completo, aunque el canal de Fazt por ejemplo tiene la mayoría de temas abarcados aunque en diferentes videos, solo es cuestión de explorar sus canales con detenimiento, la ventaja del siguiente curso es que ya tiene una estructura definida por la cual seguir, mi recomendación para los que no tienen los medios económicos de pagar un curso es, mirar su contenido o la lista de contenido del siguiente curso, copiar esos temas en un editor de texto y buscar cada tema por separado en youtube, seguro que encontrará material de calidad gratuito usando solo youtube(Haré un post más adelante dedicado únicamente a cursos gratuitos en youtube y demás plataformas sobre programación):

https://www.udemy.com/course/desarrollo-web-completo-con-html5-css3-js-php-y-mysql/

Aunque recomiendo empezar primero con videos, es necesario que a medida que se vaya avanzando en el aprendizaje se empiece a leer artículos, blogs, respuestas a preguntas relacionadas con el tema que se está aprendiendo, talvez alguna duda que se tenga,etc. Es importante combinar el aprendizaje de diferentes recursos o medios porque, según he aprendido...

...La mejor manera de aprender algo, y más relacionado con programación, es no quedarse con un solo recurso, porque lo que tal vez no se pueda entender en un tutorial o video, se puede entender en un artículo o post, o incluso en un comentario en reddit o blog.

-Tomar notas después de cada lección aprendida o concepto aprendido:

Escoge un blog de notas, notepad, o en microsoft word inclusive, aunque recomiendo usar marktext editor o cualquier markdown editor(de esto estaré hablando en el siguiente artículo) para poder incluir bloques de código de los ejercicios que se vaya aprendiendo.

-Aprende inglés o al menos a leer artículos en inglés:

Sí, por más que no queramos, la mayoría de artículos, libros y cursos más completos están en inglés, aunque no sea necesario para empezar a hacer tus primeros sitios web, para cuando ya tengas un nivel medio, te quedarás estancado con información limitada en español, así que a medida que vayas avanzando en tu aprendizaje en programación, ve aprendiendo algún curso de inglés, diccionario en mano, o google translate en mano,etc y empieza a buscar contenido relacionado con programación en youtube, reddit, y por la web en general(google), así no sepas casi nada de ese idioma, digamos que aunque no termines siendo un bilingue o poliglota por lo menos habrás obtenuido información valiosa sobre programación, así sea traduciendola de dichos sitios, y es seguro que a medida que se vaya realizando este proceso, tus habilidades de entendimiento de artículos y contenido en inglés irá aumentando progresivamente.

Es esencial ser constante, por más que nos sintamos que no estamos avazando, o que nunca podremos ser progamadores. Ser programador no es un talento innato de los más inteligentes en las áreas de matemáticas y cálculo,etc. Es una habilidad adquirida mediante la constancia y el análisis frecuente, adquirir buenos hábitos de aprendizaje o de estudio. Adquirir habilidades de encontrar y entender información sólo depende de la constancia, aunque si bien es cierto que no todos aprendemos al mismo ritmo, tarde o temprano se verá los resultados.

En el próximo artículo estaré hablando sobre los editores de texto tipo markdown y cómo el tomar notas y llevar anotaciones constantes sobre cada lección o tema que vayamos aprendiendo aumenta notablemente nuestra velocidad y calidad de aprendizaje.

DEV Community: Felipe Salazar

Optimización de tus sitios web, cargan más rápido = mejor interacción de usuarios.

Aprender a programar sitios web... por dónde empezar??