DEV Community: Israel Del Angel

¡Navegando a la Seguridad Divertida con Cloudflare! Protegiendo tu Ciberburbuja con Estilo

Israel Del Angel — Wed, 20 Sep 2023 15:28:12 +0000

Bienvenidos al emocionante mundo de la ciberseguridad, donde los virus, los hackers y las contraseñas olvidadas acechan a cada clic. Pero no te preocupes, amigo mío, ¡estamos aquí para hablarte de Cloudflare y cómo hacen que tu vida en línea sea un paseo emocionante, seguro y lleno de diversión!

El Mago de Internet: Cloudflare

Imagina a Cloudflare como un mago digital, sacando trucos asombrosos para proteger tu información en línea Abada-Cadabra. Este mago mágico actúa como un escudo entre tú y el caos digital Protegio, garantizando que tus datos estén a salvo y los hackers estén en la oscuridad Revelio.

¿Cómo Funciona este Truco Genial?

Para entenderlo, piensa en un mago que protege su tesoro. Cuando un hacker intenta robar tu información, se encuentra con una barrera invisible, gracias a los servidores globales de Cloudflare. Estos servidores interceptan los ataques maliciosos y desvían el tráfico dañino, dejando tu ciberburbuja a salvo y sonriendo.

Ejemplos en la Vida Real, ¡Aventuras Cibernéticas!

La Guarida Bancaria: Cuando accedes a tu cuenta bancaria en línea, Cloudflare está allí como tu guardaespaldas virtual. Si nota algo sospechoso, como un intento de inicio de sesión desde un lugar lejano y exótico, te pedirá una contraseña extra o un autenticador. ¡Protección bancaria en un abrir y cerrar de ojos!
Defensa Épica contra los Ataques DDoS: Los ataques DDoS son como una tormenta cibernética que puede dejar un sitio web indefenso. Pero Cloudflare es como Thor en el mundo de la ciberseguridad, enfrentando los rayos y truenos para mantener tu sitio en pie. ¡Así es, el rayo de seguridad de Cloudflare ilumina el camino!

Diversión en el Mundo de la Ciberseguridad

Cloudflare también sabe cómo hacer que la seguridad sea divertida. Participa en "Project Galileo", donde brinda protección gratuita a sitios web y organizaciones sin fines de lucro que luchan contra la censura en línea. ¡Una ciberseguridad con un propósito noble y un toque de humor!

La Gran Conclusión

En un mundo digital lleno de sorpresas y peligros, Cloudflare es tu compañero de juegos cibernéticos. Con ejemplos emocionantes de la vida real y un enfoque fresco y divertido en la seguridad, puedes navegar por la web con confianza y una sonrisa. Así que, la próxima vez que alguien mencione la ciberseguridad, asegúrate de que Cloudflare esté en el escenario, ¡preparado para hacer desaparecer las amenazas y hacerte disfrutar del emocionante viaje en línea! ¡Sigue explorando el ciberespacio con estilo y diversión!

Power Up Your API with Cloud Magic: Lambda Functions in Node.js

Israel Del Angel — Sun, 17 Sep 2023 01:46:40 +0000

Welcome, daring developers! Today, we're diving into a technology that makes our APIs faster, more efficient, and more elegant than ever before: Lambda Functions in Node.js! In this exciting journey, we'll immerse ourselves in the thrilling world of lambda functions and discover why they are the key to taking your APIs to the next level.

Prepare Your Superpowers!

Before we dive into the world of lambda functions, make sure you have everything you need:

Node.js: Make sure Node.js is installed in your toolkit.
Cloud Account: You'll need an account on the cloud service platform of your choice. In our example, we'll use AWS Lambda, but feel free to choose your favorite platform.

The Magic Begins with Lambda Functions!

Lambda functions, also known as "anonymous functions," are small pieces of code that can work wonders in the cloud. In our case, we're going to create a lambda function that adds two numbers in the blink of an eye. Here we go!

Advantages of Lambda Functions

But before we get started, let's take a look at the advantages these little wonders can offer:

Automatic Scalability

Lambda functions can automatically scale based on demand, making them ideal for sudden traffic spikes.

Cost-Efficiency

You only pay for the actual runtime of the function, making them a cost-effective choice.

Facilitates Serverless Architecture

Lambda functions are essential in serverless architecture, reducing development complexity.

Rapid Implementation

You can develop and deploy lambda functions quickly, perfect for agile API development.

Step 1: Casting the Spell

First, create a new directory for your project and navigate to it in your magic broomstick terminal. Then, initialize a Node.js project with a simple command:

npm init -y

Step 2: Invoke Your AWS Power

We're going to need the power of AWS for this adventure. Add the aws-sdk dependency to interact with AWS Lambda:

npm install aws-sdk

Step 3: Crafting the Magic Potion

Now, create a file called lambda.js and pour your magic into it:

// Import the AWS SDK module
const AWS = require('aws-sdk');
const lambda = new AWS.Lambda();

// Lambda function that takes two numbers and returns their sum
exports.handler = async (event) => {
  try {
    // Extract the numbers from the request
    const { num1, num2 } = JSON.parse(event.body);

    // Perform the addition
    const sum = num1 + num2;

    // Return the response
    return {
      statusCode: 200,
      body: JSON.stringify({ result: sum }),
    };
  } catch (error) {
    // In case of an error, return an error message
    return {
      statusCode: 500,
      body: JSON.stringify({ error: 'There was an error in the lambda function!' }),
    };
  }
};

Disadvantages of Using Lambda Functions

But, as in all magic, there are disadvantages too:

Runtime Limitations

Lambda platforms often impose time limits on function execution.

Limited Language Compatibility

Compatibility can be limited compared to more traditional environments.

Initial Increased Latency

The execution of a lambda function can experience higher initial latency compared to a waiting server.

Step 4: Casting the Spell

It's time to cast your spell. Package your lambda function and its ingredients into a ZIP file:

zip -r lambda.zip lambda.js node_modules/

Then, create a lambda function in AWS Lambda through the AWS console or using the AWS CLI. Upload your ZIP file as the magic code for your function.

Step 5: The Testing Moment!

Test your lambda function through the AWS Lambda console or using the AWS CLI. Send a request with two numbers and watch the magic happen. You'll receive a response with the sum of the numbers you provided.

Add a Magical Touch to Your APIs!

With this exciting example of a lambda function in Node.js, you can add a magical touch to your APIs. Take advantage of automatic scalability, cost efficiency, and the speed of lambda functions to take your applications to the next level! May the magic be with you, daring developer! ✨🚀

Potencia Tu API con Magia en la Nube: Funciones Lambda en Node.js

Israel Del Angel — Sun, 17 Sep 2023 01:18:26 +0000

¡Bienvenidos, desarrolladores intrépidos! Hoy vamos a explorar una tecnología que hace que nuestras APIs sean más rápidas, eficientes y elegantes que nunca: ¡las funciones Lambda en Node.js! En este viaje emocionante, vamos a sumergirnos en el emocionante mundo de las funciones lambda y descubrir por qué son la clave para llevar tus APIs al siguiente nivel.

¡Prepara tus Superpoderes!

Antes de sumergirnos en el mundo de las funciones lambda, asegúrate de tener todo lo que necesitas:

Node.js: Asegúrate de que Node.js esté instalado en tu cinturón de herramientas.
Cuenta en la Nube: Necesitarás una cuenta en la plataforma de servicios en la nube de tu elección. En nuestro ejemplo, usaremos AWS Lambda, pero siéntete libre de elegir tu plataforma favorita.

¡La Magia Comienza con la Función Lambda!

Las funciones lambda, también conocidas como "funciones anónimas", son pequeños fragmentos de código que pueden hacer maravillas en la nube. En nuestro caso, vamos a crear una función lambda que suma dos números en un abrir y cerrar de ojos. ¡Aquí vamos!

Ventajas de las Funciones Lambda

Pero antes de comenzar, echemos un vistazo a las ventajas que estas pequeñas maravillas pueden ofrecer:

Escalabilidad Automática

Las funciones lambda pueden escalar automáticamente según la demanda, lo que las hace ideales para picos de tráfico repentinos.

Costos Eficientes

Solo pagas por el tiempo de ejecución real de la función, lo que las convierte en una opción económica.

Facilita la Arquitectura Serverless

Las funciones lambda son esenciales en la arquitectura serverless, lo que reduce la complejidad del desarrollo.

Rápida Implementación

Puedes desarrollar y desplegar funciones lambda rápidamente, perfecto para el desarrollo ágil de APIs.

Paso 1: Iniciando el Hechizo

En primer lugar, crea un nuevo directorio para tu proyecto y navega hasta él en tu escoba mágica terminal. Luego, inicializa un proyecto Node.js con un simple comando:

npm init -y

Paso 2: Invoca tu Poder AWS

Vamos a necesitar el poder de AWS para esta aventura. Agrega la dependencia aws-sdk para interactuar con AWS Lambda:

npm install aws-sdk

Paso 3: La Creación de la Poción Mágica

Ahora, crea un archivo llamado lambda.js y vierte tu magia en él:

// Importa el módulo AWS SDK
const AWS = require('aws-sdk');
const lambda = new AWS.Lambda();

// Función lambda que toma dos números y devuelve su suma
exports.handler = async (event) => {
  try {
    // Extrae los números de la solicitud
    const { num1, num2 } = JSON.parse(event.body);

    // Realiza la suma
    const suma = num1 + num2;

    // Devuelve la respuesta
    return {
      statusCode: 200,
      body: JSON.stringify({ resultado: suma }),
    };
  } catch (error) {
    // En caso de error, devuelve un mensaje de error
    return {
      statusCode: 500,
      body: JSON.stringify({ error: '¡Hubo un error en la función lambda!' }),
    };
  }
};

Desventajas de Utilizar Funciones Lambda

Pero, como en toda magia, también existen desventajas:

Limitaciones de Tiempo de Ejecución

Las plataformas de funciones lambda a menudo imponen límites en el tiempo de ejecución de una función.

Compatibilidad con Lenguajes Limitada

La compatibilidad puede ser limitada en comparación con entornos más tradicionales.

Mayor Latencia Inicial

La ejecución de una función lambda puede experimentar una latencia inicial más alta en comparación con un servidor en espera.

Paso 4: Lanzamiento del Hechizo

Es hora de lanzar tu hechizo. Empaqueta tu función lambda y sus ingredientes en un archivo ZIP:

zip -r lambda.zip lambda.js node_modules/

Luego, crea una función lambda en AWS Lambda a través de la consola de AWS o usando la CLI de AWS. Sube tu archivo ZIP como el código mágico de tu función.

Paso 5: ¡Momento de la Prueba!

Prueba tu función lambda a través de la consola de AWS Lambda o usando la CLI de AWS. Envía una solicitud con dos números y observa cómo la magia ocurre. Obtendrás una respuesta con la suma de los números que proporcionaste.

¡Agrega un Toque Mágico a tus APIs!

Con este emocionante ejemplo de función lambda en Node.js, puedes darle un toque mágico a tus APIs. ¡Aprovecha la escalabilidad automática, los costos eficientes y la velocidad de las funciones lambda para llevar tus aplicaciones al siguiente nivel! ¡Que la magia esté contigo, desarrollador intrépido! ✨🚀

Patron de diseño de módulo, eso como se come

Israel Del Angel — Fri, 17 Feb 2023 00:02:33 +0000

Introducción

El patrón de diseño de módulo es un patrón muy popular en la programación orientada a objetos que se utiliza para organizar el código en módulos independientes y reutilizables. Con React, este patrón se puede aplicar de manera efectiva para crear componentes reutilizables y mantener una estructura clara y fácil de entender en la aplicación. En este artículo, vamos a explorar cómo implementar el patrón de diseño de módulo con React, y cómo aplicarlo en la sintaxis y nomenclatura.

¿Qué es el patrón de diseño de módulo?

El patrón de diseño de módulo es un patrón de diseño de software que se utiliza para organizar el código en módulos independientes y reutilizables. En este patrón, cada módulo se crea como una entidad independiente con su propia interfaz pública, y el módulo solo expone las funciones y variables que desea compartir con otros módulos. Esto ayuda a mantener el código organizado y fácil de entender, y permite una fácil reutilización del código en diferentes partes de la aplicación.

Cómo implementar el patrón de diseño de módulo en React

En React, el patrón de diseño de módulo se puede implementar creando componentes reutilizables que se pueden utilizar en diferentes partes de la aplicación. Cada componente se crea como un módulo independiente, y se expone solo la interfaz pública que desea compartir con otros componentes.

*Para implementar el patrón de diseño de módulo en React, siga los siguientes pasos:
*
Cree un archivo para cada componente: Para comenzar, cree un archivo para cada componente que desee crear. Cada archivo debe contener solo el código relacionado con ese componente.

Defina una interfaz pública para cada componente: Cada componente debe tener una interfaz pública claramente definida que especifique las propiedades que acepta y los eventos que puede desencadenar.

Exponga solo la interfaz pública: Una vez que haya definido la interfaz pública de cada componente, exponga solo las propiedades y los eventos que desea compartir con otros componentes.

Importe los componentes según sea necesario: Finalmente, importe los componentes según sea necesario en otras partes de la aplicación.

Ejemplo de implementación del patrón de diseño de módulo en React

Supongamos que queremos crear un componente de botón reutilizable que se pueda utilizar en diferentes partes de la aplicación. Para hacer esto, creamos un archivo "Button.js" para el componente de botón, y definimos su interfaz pública de la siguiente manera:

import React from 'react';

function Button(props) {
  const { label, onClick } = props;

  return (
    <button onClick={onClick}>{label}</button>
  );
}

export default Button;

En este ejemplo, la interfaz pública del componente de botón consta de dos propiedades: label y onClick. label especifica el texto que se muestra en el botón, mientras que onClick especifica la función que se debe llamar cuando se hace clic en el botón.

Para utilizar el componente de botón en otra parte de la aplicación, simplemente importamos el archivo Button.js y lo usamos en nuestro código:

import React from 'react';
import Button from './Button';

function MyComponent() {
  return (
    <div>
      <Button label="Click me" onClick={() => alert
("Button clicked")} />
</div>
);
}

export default MyComponent;

En este ejemplo, importamos el componente de botón desde el archivo Button.js y lo usamos en el componente MyComponent. Le pasamos las propiedades label y onClick al componente de botón para personalizar su apariencia y comportamiento.

*Nomenclatura en el patrón de diseño de módulo con React
*
En el patrón de diseño de módulo con React, es importante seguir una nomenclatura consistente y clara para nombrar los componentes y los archivos relacionados. Aquí hay algunas convenciones de nomenclatura comunes que se pueden seguir:

Use nombres descriptivos: Los nombres de los componentes y los archivos deben ser descriptivos y reflejar el propósito del componente.
Use PascalCase para los nombres de componentes: Los nombres de los componentes deben seguir la convención de PascalCase, donde la primera letra de cada palabra está en mayúscula.
Use camelCase para los nombres de los archivos: Los nombres de los archivos deben seguir la convención de camelCase, donde la primera letra de la primera palabra está en minúscula y la primera letra de cada palabra subsiguiente está en mayúscula.
Use index.js para el archivo principal: Si tiene un archivo principal para un grupo de componentes relacionados, llámelo index.js y colóquelo en la raíz del directorio.

Conclusión

El patrón de diseño de módulo es una forma efectiva de organizar el código en módulos independientes y reutilizables. En React, este patrón se puede aplicar para crear componentes reutilizables y mantener una estructura clara y fácil de entender en la aplicación. Al seguir las convenciones de nomenclatura adecuadas y exponer solo la interfaz pública de cada componente, podemos crear componentes altamente reutilizables y fáciles de mantener.

AI TESTING

Israel Del Angel — Wed, 18 Jan 2023 20:16:47 +0000

Artificial intelligence (AI) testing is a crucial step in the development and deployment of AI systems. The goal of AI testing is to ensure that the system functions as intended and can handle a wide range of inputs and situations.

One of the main challenges in AI testing is dealing with the complexity and variability of the system. AI systems are often composed of multiple layers of algorithms, each of which can have its own set of parameters and behaviors. This makes it difficult to predict how the system will behave in different scenarios.

To address this challenge, AI testing typically involves a combination of different methods, including:

Unit testing: This is the process of testing individual components of the AI system, such as individual algorithms or modules. Unit testing helps to ensure that each component is functioning correctly and can help to identify and fix bugs early in the development process.

Integration testing: This is the process of testing how different components of the AI system work together. Integration testing helps to ensure that the system as a whole is functioning correctly and can identify and fix issues that may not be apparent during unit testing.

Functional testing: This is the process of testing the system's ability to perform specific tasks or functions. This can include testing the system's accuracy, performance, and ability to handle different inputs and scenarios.

Non-functional testing: This is the process of testing the system's behavior under different conditions. This can include testing the system's performance, scalability, and robustness.

User acceptance testing: This is the process of testing the system with actual users to ensure that it meets their needs and expectations. User acceptance testing can provide valuable feedback on the system's usability and user experience.

It is important to note that AI testing is an ongoing process. As AI systems are deployed in the real world, they will encounter new and unexpected situations. Continuous testing and monitoring can help to ensure that the system remains reliable and performs as intended.

In conclusion, AI testing is a crucial step in the development and deployment of AI systems. It helps to ensure that the system functions as intended and can handle a wide range of inputs and situations. A combination of different testing methods, including unit testing, integration testing, functional testing, non-functional testing and user acceptance testing, is used to thoroughly test AI systems. Continuous testing and monitoring is important to ensure that the system remains reliable and performs as intended.

Como optimizar una pagina web para SEO

Israel Del Angel — Mon, 11 Nov 2019 19:42:57 +0000

Photo by Web Hosting on Unsplash

Como desarrolladores cuando comenzamos a construir una** pagina web** nos centramos en temas de UI/UX y dejamos de lado el tema del posicionamiento siendo que nuestros clientes acuden a nosotros para construir su marca digital a travez de su sitio web .

En este post vamos a hablar sobre cómo optimizar los principales factores de posicionamiento así como los principales problemas SEO que surgen a la hora de optimizar una web y sus posibles soluciones.

Dividiremos los temas de este capítulo en 4 grandes bloques:

Accesibilidad
Indexabilidad
Contenido
Meta etiquetas

1. Accesibilidad

El primer paso a la hora de optimizar el SEO de una web es permitir el acceso a los motores de búsqueda a nuestro contenido. Es decir, hay que comprobar si la web es visible a los ojos de los motores de búsqueda y sobre todo, cómo están viendo la página.

Por diversos motivos que explicaremos más adelante puede darse el caso de que los motores de búsqueda no puedan leer correctamente una web, un requisito indispensable para el posicionamiento.

Aspectos a tener en cuenta para una buena accesibilidad

Archivo robots txt
Meta etiqueta robots
Códigos de estado HTTP
Sitemap
Estructura web
JavaScript y CSS
Velocidad de la web

Archivo robots txt

El archivo robots.txt se usa para impedir que los motores de búsqueda accedan e indexen ciertas partes de una web. Es muy útil para evitar que Google muestre en los resultados de búsqueda las páginas que no queremos. Por ejemplo en WordPress, para que no accedan a los archivos de administrador, el archivo robots.txt sería así:

Ejemplo

User agent:*

Disallow:/wp-admin

OJO: Debes tener mucho cuidado de no bloquear el acceso de los motores de búsqueda a toda tu web sin darte cuenta como en este ejemplo:

Ejemplo

User agent:*

Disallow:/

Debemos comprobar que el archivo robots.txt no está bloqueando ninguna parte importante de nuestra web. Podemos hacerlo visitando la url www.ejemplo.com/robots.txt, o bien a través de Google Webmaster Tools en “Rastreo” > “Probador de robots.txt”

El archivo robots.txt también puede usarse para indicar dónde se encuentra nuestro sitemap añadiendo en la última línea del documento.

Por lo tanto, un ejemplo de robots.txt completo para WordPress se vería así:

Ejemplo

User-agent:*

Disallow:/wp-admin

Sitemap:http://www.ejemplo.com/sitemap.xml

Si quieres profundizar más en detalle sobre este archivo, te recomendamos visitar la web con la información sobre el estándar.

Meta etiqueta Robot

La meta etiqueta “robots” se utiliza para decirle a los robots de los motores de búsqueda si pueden o no indexar la página y si deben seguir los enlaces que contiene.

A la hora de analizar una página deberás comprobar si hay alguna meta etiqueta que por error esté bloqueando el acceso a estos robots. Este es un ejemplo de cómo se verían estas etiquetas en el código HTML:

Ejemplo

Por otra parte las meta etiquetas son muy útiles para evitar que Google indexe páginas que no te interesen, como pueden ser las paginaciones o los filtros, pero que siga los enlaces para que continúe rastreando nuestra web. En este caso la etiqueta quedaría así:

Ejemplo

Podemos comprobar las meta etiquetas haciendo click derecho en la página y seleccionando “ver código fuente de la página”.

O si queremos ir un poco más allá, con la herramienta Screaming Frog podemos ver de un vistazo qué páginas de toda la web tienen implementada dicha etiqueta. Puedes verlo en la pestaña “Directives” y en el campo de “Meta Robots 1”. Una vez tengas localizadas todas las páginas con esta etiquetas solo tienes que eliminarlas.

Códigos de estado HTTP

En el caso de que alguna URL devuelva un código de estado (404, 502, etc), los usuarios y los motores de búsqueda no podrán acceder a esa página. Para identificar estas URLs os recomendamos usar también Screaming Frog, porque muestra rápidamente el estado de todas las URLs de tu página.

IDEA: Cada vez que hagas una nueva búsqueda en Screaming Frog exporta el resultado en un CSV. Así los podrás reunir todas en un mismo Excel más tarde.

Sitemap

El sitemap es un archivo XML que contiene una lista de las páginas del sitio junto con alguna información adicional, como con qué frecuencia la página cambia sus contenidos, cuándo fue su última actualización, etc.

Un pequeño extracto de un sitemap sería:

Ejemplo

http://www.ejemplo.com

daily

1.0

Puntos importantes que debes comprobar respecto al Sitemap, que:

Siga los protocolos, si no Google no lo procesará adecuadamente
Esté subido a Google Webmaster Tools
Esté actualizado. Cuando actualices tu web, asegúrate que tienes todas las páginas nuevas en tu sitemap
Todas las páginas que hay en el sitemap estén siendo indexadas por Google

En caso de que la web no disponga de ningún sitemap deberemos crear uno, siguiendo cuatro pasos:

Genera un Excel con todas las páginas que queramos que se indexen, para ello usaremos el mismo Excel que creamos al hacer las búsqueda de los códigos de respuesta HTTP
Crea el sitemap. Para ello te recomendamos la herramienta Sitemap Generators (sencilla y muy completa)
Compara las páginas que hay en tu excel y las que hay en el sitemap y elimina del excel las que no queremos que se indexen
Sube el sitemap a través de Google Webmaster Tools

Estructura web

Si la estructura de una web es demasiado profunda a Google le resultará más difícil llegar a todas las páginas. Así que se recomienda que la estructura no tenga más de 3 niveles de profundidad, (sin contar la home) ya que el robot de Google tiene un tiempo limitado para rastrear una web, y cuantos más niveles tenga que atravesar menos tiempo le quedará para acceder a las páginas más profundas

Por eso es mejor siempre crear un estructura web en horizontal y no en vertical.

Estructura Vertical

Estructura horizontal

Nuestro consejo es hacer un esquema de toda la web en el que se pueda ver fácilmente los niveles que tiene, desde la home hasta la página más profunda y poder calcular cuántos clics hacen falta para llegar a ella.

Localiza en qué nivel está cada página y si tienes enlaces apuntando hacia ella utilizando de nuevo Screaming Frog.

JavaScript y CSS

Aunque en los últimos años Google se ha vuelto más inteligente a la hora de leer este tipo de tecnologías debemos tener cuidado porque el JavaScript puede ocultar parte de nuestro contenido y el CSS puede desordenarlo mostrándolo en otro orden al que lo ve Google.

Existen dos métodos para saber cómo lee Google una página:

Plugins
Comando “cache:”

Plugins

Los plugins como Web Developer o Disable-HTML nos ayudan a ver cómo “rastrea” la web un buscador. Para ello hay que abrir una de estas herramientas y desactivar el JavaScript. Esto lo hacemos porque todos los menús desplegables, enlaces y textos deben poder ser leídos por Google.

Después desactivamos el CSS, ya que queremos ver el orden real del contenido y el CSS puede cambiar esto completamente.

Comando “cache:”

Otra forma de saber cómo ve Google una web es mediante el comando “cache:”

Introduce “cache:www.miejemplo.com” en el buscador y pulsa en “Versión sólo texto”. Google te mostrará una foto donde podrás saber cómo lee una web y cuándo fue la última vez que accedió a ella.

Eso sí, para que el comando “cache:” funcione correctamente nuestras páginas deben estar previamente indexadas en los índices de Google.

Una vez que Google indexa por primera vez una página, determina con qué frecuencia volverá a visitarla en busca de actualizaciones. Esto dependerá de la autoridad y relevancia del dominio al que pertenece esa página y de la frecuencia con que se actualice.

Ya sea por medio de un plugin o el comando “cache:”, asegúrate de que cumples los siguientes puntos:

Puedes ver todos los enlaces del menú.
Todos los enlaces de la web son clicables.
No hay texto que no sea visible con CSS y Javascript activados.
Los enlaces más importantes están en la parte superior.

Velocidad de carga

El robot de Google tiene un tiempo limitado a la hora de navegar por nuestra página, cuanto menos tarde cada página en cargar a más páginas conseguirá llegar.

También debes en cuenta que una carga de página muy lenta puede hacer que tu porcentaje de rebote se dispare, por lo que se convierte es un factor vital no solo para el posicionamiento sino también para una buena experiencia de usuario.

Para ver la velocidad de carga de tu web te recomendamos Google Page Speed, allí puedes comprobar cuáles son los problemas que más ralentizan tu site además de encontrar los consejos que te ofrece Google para atajarlos. Céntrate en los que tienen prioridad alta y media.

Indexabilidad

Una vez que el robot de Google ha accedido a una página el siguiente paso es que la indexe, estas páginas se incluirán en un índice donde se ordenan según su contenido, su autoridad y su relevancia para que sea más sencillo y rápido para Google acceder a ellas.

¿Cómo comprobar si Google ha indexado mi web correctamente?

Lo primero que tienes que hacer para saber si Google ha indexado tu web correctamente es realizar una búsqueda con el comando “site:”, de este modo Google te dará la cifra aproximada de las páginas de nuestra web que tiene indexadas:

Si tienes vinculado Google Webmaster Tools en tu web también puedes comprobar el número real de páginas indexadas yendo a Índice de Google > Estado de indexación

Sabiendo (más o menos) el número exacto de páginas que tiene tu web, este dato te servirá para comparar número de páginas que tiene Google indexadas con el número de páginas reales de tu web. Pueden suceder tres escenarios:

El número en ambos casos es muy similar. Significa que todo está en orden.
El número que aparece en la búsqueda de Google es menor, lo que significa que Google no está indexando muchas de las páginas.Esto sucede porque no puede acceder a todas las páginas de la web. Para solucionar esto revisa la parte de accesibilidad de este mismo capítulo.
El número que aparece en la búsqueda de Google es mayor, lo que significa que tu web tiene un problema de contenido duplicado. Seguramente la razón por la que hay más páginas indexadas de las que realmente existen en tu web es que tengas contenido duplicado o que Google está indexando páginas que no deseas que se indexen.

Contenido duplicado

Tener contenido duplicado significa que para varias URLs tenemos el mismo contenido. Este es un problema muy común, que muchas veces es involuntario y que además puede acarrear efectos negativos en el posicionamiento en Google.

Estos son los principales motivos del contenido duplicado:

“Canonicalización” de la página
Parámetros en la URL
Paginación

Es el motivo más común de contenido duplicado y se produce cuando tu página de inicio tiene más de una URL:

Ejemplo

ejemplo.com

www.ejemplo.com

ejemplo.com/index.html

www.ejemplo.com/index.html

Cada una de las anteriores dirigen a la misma página con el mismo contenido, si no se le indica a Google cuál es la correcta no sabrá cuál tiene que posicionar y puede que posicione justo la versión que no se quiera.

Solución. Existen 3 opciones:

Hacer una redirección en el servidor para asegurarte de que solo hay una página que se muestre a los usuarios.
Definir qué subdominio queremos que sea el principal (“www” o “no-www”) en Google Webmaster Tools. Cómo definir el subdominio principal.
Añadir una etiqueta “rel=canonical” en cada versión que apunte a las que se considera la correcta.

Parámetros en la URL

Existen muchos tipos de parámetros, sobre todo en e-commerce: filtros de los productos (color, talla, puntuación, etc.), ordenación (precio menor, por relevancia, precio mayor, en cuadrícula, etc.) y sesiones de usuarios. El problema es que muchos de estos parámetros no cambian el contenido de la página y eso genera muchas URLs para el mismo contenido.

www.ejemplo.com/boligrafos?color=negro&precio-desde=5&precio-hasta=10

Es este ejemplo encontramos tres parámetros: color, precio mínimo y precio máximo.

Solución

Añade una etiqueta “rel=canonical” hacia la página original, así evitarás cualquier tipo de confusión por parte de Google con la página original.

Otra posible solución es indicar a través de Google Webmaster Tools > Rastreo > Parámetros de URL qué parámetros debe ignorar Google a la hora de indexar las páginas de una web.

Paginación

Cuando un artículo, lista de productos o páginas de etiquetas y categorías tienen más de una página, pueden aparecer problemas de contenido duplicado aunque las páginas tengan contenido diferente, porque todas están centradas en el mismo tema. Esto es un problema enorme en las páginas de e-commerce donde existen cientos de artículos en la misma categoría.

Solución

Actualmente las etiquetas rel=next y rel=prev permiten a los motores de búsqueda saber qué páginas pertenecen a una misma categoría/publicación y así es posible centrar todo el potencial de posicionamiento en la primera página.

Cómo usar los parámetros NEXT y PREV

\1. Añadir la etiqueta rel=next en la parte de del código a la primera página:

link rel=”next” href=”http://www.ejemplo.com/page-2.html” />

\2. Añadir en todas las páginas menos la primera y la última las etiquetas rel=next y rel=prev

link rel=”prev” href=”http://www.ejemplo.com/page-1.html” />
link rel=”next” href=”http://www.ejemplo.com/page-3.html” />

\3. Añadir a la última página la etiqueta rel=prev

link rel=”prev” href=”http://www.ejemplo.com/page-4.html” />

Otra solución es buscar el parámetro de paginación en la URL e introducirlo en Google Webmaster Tools para que no se indexe.

Canibalización

La canibalización de keywords ocurre cuando en una web hay varias páginas que compiten por las mismas palabras clave. Esto confunde al motor de búsqueda al no saber cuál es la más relevante para esa palabra clave.

Este problema es muy común en los e-commerce, porque al tener varias versiones de un mismo producto “atacan” con todas ellas a las mismas keywords. Por ejemplo, si se vende un libro en versión tapa blanda, tapa dura y versión digital, se tendrán 3 páginas con prácticamente el mismo contenido.

Solución

Crear una página principal del producto, desde donde se acceda a las páginas de los diferentes formatos, en las que incluiremos una etiqueta canonical que apunte a dicha página principal. Lo óptimo siempre será centrar cada keyword en una sola página para evitar cualquier problema de canibalización.

3. Contenido

Ya que en los últimos años ha quedado bastante claro que el contenido es el rey para Google. Ofrezcámosle un buen trono entonces.

El contenido es la parte más importante de una web y por mucho que esté bien optimizada a nivel SEO, si no es relevante con respecto a las búsquedas que realizan los usuarios nunca va a aparecer en las primeras posiciones.

Para hacer un buen análisis del contenido de nuestra web tienes unas cuantas herramientas a tu disposición, pero al final lo más útil es usar la página con el Javascript y los CSS desactivados cómo explicamos anteriormente. De este modo verás qué contenido está leyendo Google realmente y en qué orden está dispuesto.

A la hora de analizar el contenido de las páginas debes hacerte varias preguntas que te guiarán en el proceso:

¿La página tiene suficiente contenido? No hay una medida estándar de cuánto es “suficiente”, pero al menos debería contener 300 palabras.
¿El contenido es relevante? Debe ser útil para el lector, basta con preguntarte a ti mismo si tú leerías eso. Sé sincero.
¿Tiene keywords importantes en los primeros párrafos? Además de estas deberemos usar términos relacionados porque Google es muy eficaz relacionando términos.

Una página nunca va a posicionar por algo que no contenga TUITEA ESTO

¿Tiene keyword stuffing? Si el contenido de la página “peca” de exceso de keywords a Google no le hará ninguna gracia. No hay un número exacto que defina una densidad de palabras clave perfecta, pero Google aconseja ser lo más natural posible.
¿Tiene faltas de ortografía?
¿Es fácil de leer? Si no se nos hace tediosa la lectura, estará bien. Los párrafos no deben ser muy largos, la letra no debe tener un tamaño demasiado pequeño y es recomendable que haya imágenes o vídeos que refuercen el texto. Acuérdate de pensar siempre para qué público escribes.
¿Google puede leer el texto de la página? Tenemos que evitar que el texto esté dentro de Flash, imágenes o Javascript. Esto lo comprobaremos viendo la versión de solo texto de nuestra página, usando en Google el comando cache:www. ejemplo.com y seleccionando esta versión.
¿El contenido está bien distribuido? Tiene sus etiquetas H1, H2 etcétera correspondientes, las imágenes están bien maquetadas etc.
¿Es enlazable? si no le facilitamos al usuario cómo compartirlo es muy probable que no lo haga. Incluye botones de compartir en redes sociales en lugares visibles de la página que no estorben la visualización del contenido, ya sea un vídeo, una foto o texto.
¿Es actual? cuanto más actualizado esté tu contenido mayor será la frecuencia de rastreo de Google en tu web y mejor será la experiencia del usuario.

Consejo

Puedes crear un excel con todas las páginas, sus textos y las keywords que quieres que aparezcan en ellos, de esta manera te será más fácil ver dónde debes reducir o aumentar el número de keywords en cada página.

4. Meta etiquetas

Las meta etiquetas o meta tags se utilizan para transmitir información a los buscadores sobre qué trata una página cuando estos tienen que ordenar y mostrar sus resultados. Estas son las etiquetas más importantes que debemos tener en cuenta:

Title

La etiqueta title es el elemento más importante dentro de las meta-etiquetas. Es lo primero que aparece en los resultados en Google.

A la hora de optimizar el title hay que tener en cuenta que:

La etiqueta debe estar en la sección del código.
Cada página ha de tener un título único.
No debe de exceder los 70 caracteres, si no aparecerá cortado.
Debe de ser descriptivo con respecto al contenido de la página.
Debe contener la keyword para la que estemos optimizando la página.

Nunca debemos abusar de las keywords en el título, esto hará que los usuarios desconfíen y que Google piense que estamos intentando engañarle.

Otro aspecto a tener en cuenta es dónde poner la “marca”, es decir: el nombre de la web, por lo general se suele poner al final para dar más importancia a las keywords, separando estas del nombre de la web con un guión o una barra vertical.

Meta-description

Aunque no es un factor crítico en el posicionamiento de una web afecta de manera considerable a la tasa de clics (click-through rate) en los resultados de búsqueda.

Para la meta-description seguiremos los mismos principios que con el title, solo que su longitud no debe de exceder los 155 caracteres. Tanto para los titles como para las meta-descriptions debemos de evitar la duplicidad, esto lo podremos comprobar en Google Webmaster Tools > Aspecto de la búsqueda > Mejoras HTML.

Meta Keywords

En su momento las meta keywords fueron un factor muy importante de posicionamiento, pero Google descubrió lo fácil que es manipular los resultados de búsqueda así que lo eliminó como factor de posicionamiento.

Etiquetas H1, H2, H3…

Las etiquetas H1, H2, etc. son muy importantes para tener una buena estructura de información y una buena experiencia de usuario, ya que definen la jerarquía del contenido, algo que mejorará el SEO. Debemos darle importancia al H1 porque normalmente está en la parte más alta del contenido y cuanto más arriba esté una keyword más importancia le dará Google.

Etiqueta “alt” en la imagen

La etiqueta “alt” en las imágenes se añade directamente en el propio código de la imagen.

Ejemplo

img src=”http://www.ejemplo.com/ejemplo.jpg” alt=”keyword molona”

Esta etiqueta tiene que ser descriptiva con respecto a la imagen y contenido de dicha imagen, ya que es lo que lee Google al rastrearla y uno de los factores que utiliza para posicionarla en Google Imágenes.

Conclusión

Ya sabes cómo hacer una página optimizada para SEO y que existen muchos factores que optimizar si quieres aparecer en las mejores posiciones de los resultados de búsqueda.

Cómo funciona el scope de JavaScript con las variables var, let y const — en 10 minutos

Israel Del Angel — Tue, 29 Oct 2019 20:59:12 +0000

Photo by Christopher Robin Ebbinghaus on Unsplash

En este post aprenderás cómo funciona el alcance con las variables “global scope”, “funciones”, “var”, “let”, “const”. Qué puedes hacer con él y por qué es importante aprender este concepto.

TLDR

Para aquellos que no les gusta leer, usa esta lista cuando dudes de cuál elegir. Si desea aprender este tema en detalle, te recomiendo que te desplaces hacia abajo.

const: intenta usar esta variable const en todas partes y siempre. Excepto si la variable necesita ser cambiada.
let: Si el valor de la variable necesita ser cambiado, usa la variable let.
var: evita esta variable, puede hacer que tu aplicación sea desordenada e impredecible porque puede sobrescribirse desde cualquier lugar. let y const evitan esto por defecto 👍

Tipos de Scopes

¿Cuál es el alcance? Una función se utiliza para crear un ámbito que decide la accesibilidad y la visibilidad de variables, funciones y objetos.

En JavaScript, tenemos 2 tipos de ámbitos.

Scope global
Scope local

Cual es el global scope

El alcance global es el objeto window. Que es accesible desde todas partes en tu aplicación. Si deseas que una variable, función u objeto sea visible para todos los demás ámbitos que no sea ponerlo en el ámbito global.

Pero ten en cuenta no poner todo en el ámbito global. El objeto window ya está lleno de mucha información. Entonces, si no lo necesitas en todas partes, colócalo en un ámbito local.

Cual es el local scope

Un ámbito local es creado por una función. Esa función puede hacer que las variables, los objetos y las funciones internas se oculten o sean visibles desde fuera de la función.

Como crear un scope

Para crear un ámbito solo necesitas una función. Donde puedes poner variables, funciones y objetos que luego no son accesibles fuera de la función. La única forma de hacerlo visible y accesible es devolviéndoles la declaración return.

La variable “var”

La palabra clave var se puede usar en todas partes. Puede contener cadenas, int, objeto, matriz, función.

Las variables se pueden usar para todo, pero también en todas partes. ¡Puedes acceder a una var desde dentro de una función, objeto, instrucción if-else, realmente en todas partes!

Eso puede sonar genial, pero puede tener un gran efecto en la previsibilidad de un sitio web o aplicación web.

Alcance global

Una var tiene o puede tener un alcance global. ¡Genial para acceder a todo desde cualquier cosa! Pero eso es bueno? Hay algunas alternativas por delante. Se llaman let y const y tienen un comportamiento diferente al de las var. Pero hablemos de eso más tarde.

“var” se puede cambiar más tarde

Una variable se puede definir con una cadena, más tarde, reasignada a un entero y más tarde podría ser una función. Ese es el poder pero también una debilidad.

var globalVariableglobalVariable = 'I Love Pizza!'console.log(globalVariable) // Will be 'I Love Pizza!'

Ahora definí una variable global (sí, me encanta la pizza :-)), justo después le agregué una cadena. Para que pueda ver, puede definirlo y luego cambiarlo al otro valor.

Entonces, adivina qué, globalVariable ha cambiado. Suena bien verdad! Bueno, si pretendías cambiarlo, ¡sí! Pero si no sabía que ya usaba esa variable, ¡entonces es un problema! ¡Ahí está la debilidad!

Puede tener alcance local

;(function() {  var var1 = 'variable 1 value in parent scope'  ;(function() {    // Scope 1    var1 = 'variable 1 value in scope 1'    console.log('scope 1: ', var1) // Is 'variable 1 value in scope 1'  })()  ;(function() {    // Scope 2    var1 = 'variable 1 value in scope 2'    console.log('scope 2: ', var1) // Is 'variable 1 value in scope 2'  })()  console.log('Parent scope: ', var1) // Is 'variable 1 value in parent scope'})() console.log('Global scope: ', var1) // Is undefined

Puede hacer que la variable tenga ámbito local, poniéndola dentro de una función. ¡Como en el ejemplo aquí, si ejecuta la función en su consola, el último console.log () con "Alcance principal" en él, será cambiado por el anterior!

La variable “let”

“let” tiene un alcance de bloque

Una variable let tiene un ámbito de bloque. Puede crear un alcance con cualquier {}. Con una función, for and while loop y mucho más.

Finalmente, un tipo de variable que no tiene alcance global sino local. 🎉

“let” se puede cambiar más tarde

Una variable let se puede cambiar más tarde, ¡pero solo si está en el mismo alcance que donde se declara! Se declara en el otro ámbito, es solo una nueva variable que se define.

Este ejemplo se ejecutará en la última versión de Google Chrome

;(function() {  let letVar1 = 'Let variable 1 value in parent scope'  ;(function() {    // Scope 1    let letVar1 = 'Let variable 1 value in scope 1'    console.log('scope 1: ', letVar1) // Is 'Let variable 1 value  in scope 1'  })()  ;(function() {    // Scope 2    let letVar1 = 'Let variable 1 value in scope 2'    console.log('scope 2: ', letVar1) // Is 'Let variable 1 value in scope 2'  })()  console.log('Parent scope: ', letVar1) // Is 'Let variable 1    value in parent scope'})()console.log('Global scope: ', letVar1) // Is undefined

Si trataste de pegar este fragmento en la consola de herramientas de desarrollo, verás que el alcance principal, el alcance 1 y 2 dan valores diferentes. Eso es porque tiene un alcance de bloque. El alcance global dará un error de que no está definido.

Con la var normal, puedes darle a letVar1 un nuevo valor. Pero dado que un let no se puede redefinir más tarde, esto no es posible para el let.

Si nos olvidamos de asignar letVar1 en el alcance 1, entonces la consola en el alcance 1 generará "Dejar el valor de la variable 1 en el alcance primario". Porque buscará en el ámbito primario.

“let” no se puede levantar

Si intenta elevar las variables let, obtendrá errores. Para definir un let y darle un valor. Si primero trata de definirlo y le da un valor más tarde, ¡terminará con errores!

La variable “const”

Lo que lees sobre const es que son inmutables. La mayoría de la gente piensa que significa que no puede cambiar el valor, sino que puede cambiar el valor. Pero no puede reasignar la referencia al const en sí.

“const” tiene un alcance de bloque

const tiene un alcance de bloque, igual que la variable let. En el otro ámbito, puede definir el const nuevamente. Pero no puede reasignar la misma constante en el otro ámbito.

;(function() {  const constVar1 = 'const variable 1 value in parent scope'  ;(function() {    // Scope 1    const constVar1 = 'const variable 1 value in scope 1'    console.log('scope 1: ', constVar1)    // scope 1:  const variable 1 value in scope 1  })()  console.log('Parent scope: ', constVar1)  // Parent scope:  const variable 1 value in parent scope})()

En este ejemplo, puedes ver que es posible asignar una constante con el mismo nombre en un ámbito diferente con el otro valor.

“const” no se puede reasignar

;(function() {  const constVar1 = 'const variable 1 value in parent scope'  ;(function() {    // Scope 1    console.log('scope 1: ', constVar1)    // scope 1:  const variable 1 value in parent scope    constVar1 = 'const variable 1 value in scope 1'    // Is Identifier 'constVar1' has already been declared    console.log('scope 1: ', constVar1)  })()})()

En este ejemplo, puede ver que no es posible reasignar la misma constante con un valor diferente.

“const” no se puede levantar

Debido a que no puede reasignar una constante, sabe que no es posible levantarlas. Para levantarlas, debe reasignar.

¡Buena suerte!

Si estás aprendiendo JavaScript en este momento, me imagino que

Si algo no es claro o confuso sobre var, let o const, por favor deja tus preguntas en los comentarios.

Trucos para que codifiques cuando no estas motivado

Israel Del Angel — Mon, 28 Oct 2019 14:29:34 +0000

Photo by Arif Riyanto on Unsplash

Todos tienen una pasión por algo, para algunas personas su música, otras podrían estar jugando videojuegos y para algunas, podría ser el amor por resolver problemas con el código. La programación es difícil, lo que hace que valga la pena es la pasión que tenemos por resolver problemas.

¿Qué pasa si perdemos esa pasión? 🤔

Hace unos años, perdí de vista por qué comencé a codificar y descubrí que a menudo me obligaba a intentar codificar. Después de observarme, encontré algunos métodos que utilicé para reavivar mi pasión y volver a codificar.

Esos métodos son lo que estoy a punto de compartir con ustedes en este momento.

Mis trucos

Reflexionando sobre tus objetivos
Asistir a un Meetup🗣
Viendo una película🍿
Unirse a una comunidad 👥
Viendo anime

Reflexionando sobre tus objetivos

**Los sueños son pequeños empujones de tu alma — Victoria Moran**

En primer lugar, todos tienen una razón particular por la que entraron en la programación ( y sí, incluso aquellos que lo hacen por dinero 😏 ). La mejor manera de reavivar su motivación y comenzar a codificar una vez más es simplemente reflexionar sobre los objetivos que tenía mientras se aventuraba en la programación.

Podría ser comenzar a ganar $ 250k / año en un trabajo, podría estar resolviendo un problema agonizante en su comunidad local, incluso podría estar trabajando para una de las compañías de tecnología más grandes que existen ( sí, te veo en Google ).

Sea lo que sea, reflexione y recuerde por qué comenzó a codificar en primer lugar.

Asistir a un Meetup

Otra forma de motivarse para codificar nuevamente sería asistir a reuniones. Los Meetups son una forma encantadora de volver a motivarte mientras conoces e interactúas con otros desarrolladores que han diseñado y creado aplicaciones increíbles. Algunos incluso van tan lejos como para darle consejos de carrera y caminos a seguir como desarrollador.

Meetup es una plataforma fácil y directa para comenzar a buscar reuniones para asistir. Crea una cuenta en Meetup y, en cuestión de segundos, recibirás muchas sugerencias interesantes sobre varias reuniones futuras.

Viendo una película

Las películas son una excelente manera de pasar el tiempo o relajarse después de un largo día ( especialmente a través de Netflix ). Por lo tanto, parecería extraño pensar que en realidad podría motivarse para codificar mientras mira una película. Bueno, todo depende del tipo de película que veas.

Hay muchas películas y series que podrían ayudar a motivar a un desarrollador a codificar, Silicon Valley, Mr. Robot, solo por nombrar algunas. Para mantener este artículo lo más breve posible, escribíre otro artículo sobre las peliculas y series para motivarte a seguir codificando.

Unirse a una comunidad

Una comunidad es una forma sencilla de conectarse con sus compañeros o desarrolladores con más experiencia que usted que antes había estado en su lugar.

Al igual que asistir a una reunión, cuando te encuentras en una comunidad de desarrolladores experimentados, puedes aprender de primera mano sobre algunas tecnologías y proyectos increíbles en los que la mayoría de ellos trabajan a diario.

Leer sobre otras personas con experiencias similares, que pueden estar luchando con los mismos problemas que usted, puede ser muy alentador y motivador.

Mirando anime

Ahora, este es el más tonto de todos y es por eso que lo dejé último. Solo escúchame por un segundo ( recuerda que dije “ **trucos que uso** “ ).

Ver a las personas de otros lograr sus objetivos es una forma segura de obtener o reavivar su motivación. El anime japonés está lleno de situaciones como esta.

Ves al protagonista peleando con todo lo que tiene hasta su último aliento hasta alcanzar su objetivo. Ese tipo de determinación generalmente alimenta mi motivación y me hace recordar mis objetivos y todo lo que dije que lograría y esos pensamientos me vuelven a codificar.

Sé que suena tonto 😂, pero te digo que en realidad funciona para mí.

CONCLUSIÓN

Así que sí, esos fueron algunos de los trucos que utilizo para volver a codificar.

Tenga algo que ya haga, comparta en los comentarios a continuación. Con ganas de descubrir nuevos trucos.

Front-end Developer CV

Israel Del Angel — Mon, 28 Oct 2019 03:02:12 +0000

I love Programming ♥ :)

ty for view, please click like :)

//israplenitud@gmail.com //https://isra.netlify.com/

Automatizar un blog de Gatsby con GitHub y Buddy

Israel Del Angel — Sun, 27 Oct 2019 22:12:37 +0000

El lanzamiento de un blog o sitio web exitoso significa que su servidor necesitará poder manejar el tráfico que aumentará rápidamente en los próximos meses. Una campaña publicitaria efectiva o una asociación con un distribuidor de contenido puede generar fácilmente 10 veces más tráfico en un período de tiempo muy corto.

En este artículo, aprenderá cómo crear y ejecutar un sitio web estático capaz de manejar grandes cantidades de tráfico sin requerir una infraestructura de alojamiento costosa y compleja. Utilizaremos Gatsby, un generador de sitios web estáticos, y Buddy, una plataforma de integración y despliegue continuo. También le mostraré un flujo de trabajo efectivo para publicar nuevas publicaciones y actualizar las existentes utilizando un repositorio de GitHub.

Antes de comenzar, me gustaría que les muestre un gran ejemplo, Evie Magazine. Funciona con la misma tecnología que te voy a enseñar. Tome nota de la rapidez y capacidad de respuesta del sitio al hacer clic en los enlaces.

Veamos ahora qué hay de malo con los sistemas de administración de contenido:

Por qué no deberías usar el sistema de gestión de contenido

La forma más popular de crear sitios web es usar WordPress o un sistema de administración de contenido alternativo como Drupal y Joomla. Todos funcionan con la misma tecnología: PHP y MySQL Database. Un CMS es ideal para usuarios no técnicos que buscan comenzar a ejecutar su propio sitio web. Es fácil de usar y requiere poca experiencia técnica para publicar contenido con él. Sin embargo, cuando el tráfico comienza a ser masivo, la administración del sitio rápidamente se sale de control.

**El primer problema es el rendimiento**. Para cada solicitud que realiza un visitante, se requieren dos programas de servidor (servidor PHP y base de datos MySQL) para procesar la solicitud. Bajo tráfico normal, esto generalmente demora unos segundos en procesarse. Sin embargo, si el sitio web está muy diseñado y cargado con complementos, puede llevar más tiempo. El problema empeora con el alto tráfico ya que los programas del servidor luchan por procesar cada solicitud a tiempo.

**El segundo problema es la seguridad**. Tómese un minuto y visite CVEDetails. Este es un sitio web de seguridad en línea que enumera las vulnerabilidades descubiertas en todo tipo de software. Te sorprenderá ver la cantidad de vulnerabilidades encontradas en las bases de datos PHP y SQL. Para empeorar las cosas, hay cientos de tutoriales que puedes encontrar en línea que enseñan a los usuarios diferentes técnicas para hackear un sitio web de WordPress. Las instrucciones son fáciles de seguir y hasta un niño de 12 años puede hacerlo.

Afortunadamente, existen soluciones y soluciones a todos estos problemas. Desafortunadamente, algunos de ellos implican mucho tiempo y dinero para implementar. Gastar dinero no es un gran problema si puede resolver un problema rápidamente. Pero pasar tiempo en el mismo problema todo el tiempo afectará seriamente la productividad.

Estoy seguro de que, como la mayoría de las personas, querrás pasar más tiempo produciendo contenido y no lidiar con problemas de alojamiento y seguridad. Para saber cómo puede lograr eso, eche un vistazo a la siguiente sección.

Presentación de Gatsby — Generador de sitios web estáticos

Gatsby es un generador de sitio estático gratuito de código abierto basado en React. Genera archivos HTML estáticos utilizando datos procedentes de archivos de descuento, sistemas de gestión de contenido o una API personalizada. A continuación se muestra una ilustración de la configuración:

En este ejemplo, los artículos se escriben como archivos de descuento y se guardan en un repositorio privado. Un sistema de implementación continua selecciona automáticamente los artículos de rebajas enviados y utiliza Gatsby para convertirlos en páginas web estáticas que luego se implementan en un servidor web. Los visitantes simplemente cargan estas páginas web estáticas mientras navegan por el sitio web.

**La primera ventaja** para los sitios web estáticos ** es que **la carga de la página se produce instantáneamente** ya que no se realiza ningún procesamiento en el servidor. Por lo tanto, un solo servidor es capaz de atender más solicitudes por segundo que un servidor PHP que utiliza los mismos recursos de CPU y memoria. Los sitios web estáticos también son mucho más fáciles de escalar, ya que no hay una base de datos involucrada.

**La segunda ventaja** para los sitios web estáticos es la **seguridad**. No hay ningún complemento, código de servidor o base de datos para explotar en el servidor web público. Tampoco hay credenciales o información confidencial almacenada en el sitio web estático. Esto elimina efectivamente el incentivo para que un hacker busque formas de entrometerse en su sitio web. Además, ya no tiene que perder tiempo tratando con parches de software o resolviendo problemas de seguridad y rendimiento.

Hay muchos más beneficios que no he mencionado. Creo que he dicho lo suficiente para garantizar su atención. En las secciones siguientes, le mostraré cómo configurar su sitio web estático usando **Gatsby*, *GitHub** y **Buddy**.

Prepare un sitio de alojamiento

Lo primero que deberá hacer es configurar una ubicación en línea para implementar su sitio web estático. Hay tantos servicios en línea que le permiten hacer esto, como:

Amazon S3
AWS Amplify
Firebase
CloudFront
Now
Surge
GitHub Pages
Heroku

También puede implementar en un sitio de alojamiento web compartido que es lo que usaremos para este tutorial. Prefiero alojamiento compartido ya que obtienes acceso a más valor por tu dinero, p. alojamiento de correo electrónico, FTP, SSH, gestión de dominio, SSL gratis e.t.c. Usaré una cuenta que poseo con FastComet. Cualquier empresa de hosting que le brinde acceso a CPanel lo hará. Si no tiene uno, puede obtener un servicio de alojamiento web gratuito con acceso a CPanel en Free Hosting.

Una vez que haya iniciado sesión en su cuenta y ya tenga un nombre de dominio que puede usar. Realice los siguientes pasos:

Crear un subdominio, gatsby.example.com. (En este caso usaremos gatsby.wallesdevelopers.com)
Cree una cuenta FTP que apunte a su directorio de subdominio

Nota: Para un sitio web de producción real, use su dominio principal. Solo estamos usando un subdominio para los propósitos de este tutorial.

Deberá guardar sus credenciales de FTP en algún lugar que usaremos durante la configuración de la canalización de Buddy. Una vez que haya completado los pasos, pase a la siguiente etapa.

Configuración del blog de Gatsby

Suponiendo que ya tiene Node.js instalado en su sistema, cree un nuevo proyecto de blog de Gatsby con los siguientes comandos:

$ npm install -g gatsby-cli
$ gatsby nuevo amigo-gatsby-blog https://github.com/gatsbyjs/gatsby-starter-blog
$ cd buddy-gatsby-blog
$ npm install
$ npm start

El blog que acabamos de crear se basa en una plantilla de proyecto creada y mantenida por el fundador, Mathew Kyle. Para confirmar que está funcionando, simplemente abra un navegador en **localhost: 8000**. Si editara cualquiera de los archivos de descuento, notará que los cambios son instantáneos. Subamos ahora este proyecto a nuestro repositorio de GitHub.

Primero, vaya a su cuenta de GitHub y cree un repositorio completamente en blanco: **buddy-gatsby-blog**. Asegúrese de no inicializar ningún archivo durante el proceso de creación del repositorio.

A continuación, necesitamos clonar este repositorio en nuestro disco duro. Antes de hacer eso, hay algo que debe tener en cuenta.

Por defecto, al menos en mi caso, **ssh** es el protocolo que uso para clonar repositorios. En una sección posterior, trabajaremos con GitHub Desktop. Desafortunadamente, esta herramienta no funciona bien con **ssh**. Parece que no hay una manera fácil de hacer que funcione especialmente en Windows. Para evitar esta molestia, cambie a https durante el proceso de clonación.

Suba el proyecto **buddy-gatsby-blog** a su repositorio de GitHub con los siguientes comandos. Ingrese su nombre de usuario y contraseña de GitHub cuando se le solicite:

$ cd buddy-gatsby-blog
# reemplaza {username} con tu nombre de usuario de GitHub
$ git remote add origin https://github.com/{username}/buddy-gatsby-blog.git
$ git push -u maestro de origen

Despliegue con Buddy

Ahora que tenemos nuestro repositorio remoto listo, es hora de implementar nuestro sitio web. Primero, regístrese para obtener una cuenta gratuita en Buddy. Te recomendaría que te registres con tu cuenta de GitHub. Esto facilitará la selección de su proyecto en el siguiente paso. Utilizaremos esta plataforma para automatizar el proceso de implementación de nuestro sitio web estático.

Luego, haga clic en **New Project*. Seleccione *GitHub** como su proveedor de alojamiento Git y luego seleccione o escriba **buddy-gatsby-blog** en la sección del repositorio. Espere unos segundos y se le presentará la opción de crear una nueva pipeline(React). Haga clic en el botón y se le presentará un formulario para definir los detalles de su tubería. Simplemente ingrese lo siguiente:

Name : Build & Deploy
Trigger Mode : On push
Branch : Single branch — master

1. Construir acción

Buddy es lo suficientemente inteligente como para detectar que estamos trabajando con un proyecto de Gatsby. Seleccione **Gatsby CLI**, que es un contenedor docker especializado creado para ejecutar el comando Gatsby CLI. Después de seleccionarlo, especifique los siguientes comandos en la sección bash:

Haga clic en el comando **Add this action** para confirmar. Se lo dirigirá a la página de resumen de la pipeline.

2. Implementar acción

Justo debajo de la acción **Execute:gatsby build*, haga clic en el signo más para agregar una nueva acción. Esta vez seleccione FTP y ponga sus credenciales FTP que guardó anteriormente. Asegúrese de seleccionar *Source path** y la **Remote path** correctamente.

Tenga en cuenta que / en **Remote path** en realidad apunta a la carpeta de subdominio especificada durante la creación de la cuenta FTP. no la raíz del servidor web real. Haga clic en el botón **Add this action**.

Ejecutar Pipeline

La siguiente página debe mostrar sus acciones principales. Haga clic en el botón **Run Pipeline*, luego presione el botón *Run Now** en la página siguiente. Espere unos minutos para que se complete el proceso de compilación e implementación. Una vez hecho esto, abra su navegador e ingrese la URL que utilizó para crear su subdominio para confirmar que la implementación se realizó correctamente:

Ahora que hemos automatizado el proceso de implementación, hablemos ahora sobre el flujo de trabajo de administración de contenido en la siguiente sección:

Flujo de trabajo de gestión de contenido con GitHub

Los escritores de contenido a menudo son personas no técnicas que rara vez verá abrir un terminal para ejecutar un comando. Afortunadamente, tenemos herramientas GUI que harán que la administración de contenido sea muy fácil. En mi opinión, este flujo de trabajo es mucho mejor y más fácil de trabajar que los editores de contenido WYSIWG de WordPress.

Primero, los escritores necesitan aprender a escribir usando el formato Markdown. Es realmente simple de aprender y no debería tomar más de 30 minutos para dominarlo. Después de eso, usarán este formato por el resto de su vida. A continuación, deberán descargar e instalar typora.io, un editor crafted markdown maravillosamente diseñado.

A continuación, deben crear una cuenta con GitHub. Como administrador del repositorio, debe darles acceso al repositorio **buddy-gatsby-blog**. Deberían poder clonar el repositorio, crear nuevas sucursales y enviar solicitudes de extracción. Sin embargo, no se les debe permitir actualizar el maestro directamente. Solo los editores deberían poder fusionar nuevos artículos con la rama maestra.

Aquí el sitio interactive training site que enseña a los principiantes sobre la ramificación de Git. Cada escritor necesita descargar e instalar GitHub Desktop. Tendrán que clonar el repositorio remoto en su disco duro antes de poder comenzar a escribir artículos.

Una alternativa es instalar Visual Studio Code, que proporciona edición de rebajas y herramientas de administración de repositorio GitHub, interfaz todo en uno. En la siguiente sección, le mostraré cómo crear y enviar nuevos artículos para que los editores los revisen.

Crear un nuevo artículo

Para crear un nuevo artículo, se deben seguir los siguientes pasos:

Usando GitHub desktop, mientras la rama maestra está activa, cree una nueva rama, ej. **gatsby-post**
Abra el proyecto **buddy-gatsby-blog** en Typora. Cree una nueva carpeta en el blog llamada **gasby-post**.
Dentro de esta carpeta, cree un nuevo archivo markdown: **index.md**.
Escribe contenido markdown. Debe especificar la sección front matter en la parte superior. Aquí hay una muestra:

Después de guardar el archivo, vaya a GitHub desktop y confirme los nuevos cambios.
Luego haga clic en el botón Publish this Branch.
A continuación, haga clic en el botón Create Pull Request. Esta es básicamente una solicitud formal para que el editor revise el borrador y fusione la nueva rama con master. Se abrirá una página web donde el escritor confirmará el envío de la solicitud de extracción.

Y así es como un escritor puede crear y enviar un nuevo artículo para el blog de Gatsby. Ahora es el turno de los editores para revisar el borrador.

Revisión de un borrador y publicación

La responsabilidad de revisar un borrador debe ser un editor u otro escritor. A menudo es difícil para un autor criticar su propio trabajo de manera objetiva. Por lo tanto, alguien más necesita verificar su trabajo. El proceso de revisión es el siguiente:

El editor localiza la solicitud de extracción enviada en GitHub desktop en el sitio web de GitHub.
El editor revisa el artículo y coloca comentarios en línea utilizando las herramientas de revisión del sitio web de GitHub para que el autor pueda realizar cambios. El autor será notificado por correo electrónico de GitHub para actuar sobre esos comentarios de revisión. A veces, el proceso de revisión puede ser un proceso de ida y vuelta entre el escritor y el editor. El editor puede decidir hacer los cambios si son menores.
Si todos están contentos con el artículo, el editor lo fusiona con la rama maestra.
Esto hace que Buddy realice un proceso de compilación e implementación. Dentro de un par de minutos, el nuevo artículo aparecerá publicado en el sitio en vivo.

Y así es como se lleva a cabo el proceso de revisión de un borrador y publicación. En la siguiente sección, veremos cómo podemos actualizar un artículo que ya ha sido publicado.

Actualización de un artículo publicado

Actualizar un artículo que ya ha sido publicado es tan fácil como el pastel. Tenga en cuenta que solo los usuarios autorizados para ingresar a la rama maestra pueden hacer esto:

Cambiar a la rama maestra
Localice y abra el artículo en Typora o en su editor de rebajas favorito.
Haz los cambios, guarda y haz un commit
Empuje la nueva confirmación al repositorio remoto

Buddy recogerá el nuevo commit, reconstruirá el sitio estático y lo implementará automáticamente. Dentro de un par de minutos, debería ver la actualización del artículo publicado. Tenga en cuenta que debido al almacenamiento en caché del navegador, es posible que no lo vea de inmediato. Puede realizar una actualización completa en Chrome para borrar la memoria caché de la página y ver el nuevo estado del artículo.

Resumen

Como puede ver, configurar y ejecutar un sitio de blog estático es bastante fácil y tiene muchas ventajas sobre una plataforma CMS tradicional. Si desea agregar funciones tales como formularios de contacto, inicios de sesión de usuario, etc., deberá implementar un proveedor de servicios local o de terceros que pueda manejar esas interacciones dinámicas por usted. Por ejemplo, implementar un sistema de comentarios es tan simple como integrarse con una plataforma como **Disqus**. Debe tener en cuenta que si más scripts de terceros integra, más su sitio estático se vuelve más pesado. Siempre debe buscar alternativas que sean beneficiosas tanto para su negocio en línea como para su audiencia. Por ejemplo, en lugar de mostrar anuncios molestos en sus publicaciones, puede monetizar su blog promocionando productos y servicios a través de enlaces de afiliados. De esta manera, le brinda a su audiencia una experiencia de lectura limpia y al mismo tiempo gana un montón de dinero.

Si bien aún existen ciertas limitaciones en el tipo y tamaño de los sitios web que puede construir hoy en día utilizando generadores de sitios estáticos, esas limitaciones eventualmente se resolverán. No pasará mucho tiempo cuando los generadores de sitios estáticos se conviertan en la tecnología dominante para construir nuevos sitios.