HTML

Javascript

Desarrollo frontend

Desarrollo backend

Desarrollo web

Node.js

<h2>Definición de una cadena</h2>
<p>
  Una cadena en JavaScript es una secuencia de caracteres, ya sea texto, números o símbolos, encerrada entre comillas simples o dobles. Se utiliza para representar y manipular texto en aplicaciones web y programas en JavaScript.
</p>

<div style="font-size: 20px;">
<SyntaxHighlighter language="javascript">
// Definicion de una cadena
let cadena = "Hola mundo, soy el usuario raul123!";
console.log(cadena);
</SyntaxHighlighter>
</div>

<h2>Cadena en comilla simple</h2>
<div style="font-size: 20px;">
<SyntaxHighlighter language="javascript">
let cadenaSimple = 'Esto es una cadena en comilla simple';
console.log(cadenaSimple);
</SyntaxHighlighter>
</div>

<h2>Cadena en comilla doble</h2>
<div style="font-size: 20px;">
<SyntaxHighlighter language="javascript">
let cadenaDoble = "Esto es una cadena en comilla doble";
console.log(cadenaDoble);
</SyntaxHighlighter>
</div>
  
<h2>Template string</h2>
<div style="font-size: 20px;">
<SyntaxHighlighter language="javascript">
let numero = 5;
let templateCadena = `Esto es una cadena en template string, El numero es ${numero}`;
console.log(templateCadena)
</SyntaxHighlighter>
</div>
  
<h2>Concatenar cadenas</h2>
<div style="font-size: 20px;">
<SyntaxHighlighter language="javascript">
let edad = 20;
let concatenacion1 = "Mi nombre es Raul y edad es " + edad;
console.log(concatenacion1);

let concatenacion2 = `Mi nombre es Raul y edad es ${edad}`;
console.log(concatenacion2);

let concatenacion3 = "Mi nombre es Raul y edad es ".concat("20");
console.log(concatenacion3);
</SyntaxHighlighter>
</div>

<h2>Longitud de una cadena</h2>
<div style="font-size: 20px;">
<SyntaxHighlighter language="javascript">
let cadena = "Hola mundo, soy el usuario raul123!";
console.log(cadena.length);
</SyntaxHighlighter>
</div>
  
<h2>Funciones de búsqueda en cadenas</h2>
<div style="font-size: 20px;">
<SyntaxHighlighter language="javascript">
let cadena = "Hola mundo, soy el usuario raul123!";
  
// at()
console.log(cadena.at(5)); // Devuelve el carácter en la posición 5 de la cadena.
console.log(cadena[5]);

// startsWith()
console.log(cadena.startsWith("H")); // Devuelve true si la cadena comienza con "H".

// endsWith()
console.log(cadena.endsWith("o")); // Devuelve true si la cadena termina con "o".

// includes()
console.log(cadena.includes("mundo")); // Devuelve true si la cadena contiene "mundo".

// indexOf()
console.log(cadena.indexOf("l")); // Devuelve el índice de la primera ocurrencia de "l" en la cadena.

// lastIndexOf()
console.log(cadena.lastIndexOf("o")); // Devuelve el índice de la última ocurrencia de "o" en la cadena.
</SyntaxHighlighter>
</div>

<h2>Funciones de modificación de cadenas</h2>
<div style="font-size: 20px;">
<SyntaxHighlighter language="javascript">
let num = 5;

// padStart()
console.log(String(num).padStart(10, "0")); // Agrega ceros a la izquierda hasta que la cadena tenga una longitud de 10.

// padEnd()
console.log(String(num).padEnd(5, "0")); // Agrega ceros a la derecha hasta que la cadena tenga una longitud de 5.

// repeat()
console.log(cadena.repeat(5)); // Repite la cadena 5 veces.

// split()
console.log(cadena.split("m")); // Divide la cadena en un array usando "m" como separador.

// substring()
console.log(cadena.substring(indexStart, indexEnd)); // Extrae una parte de la cadena entre los índices especificados.

// toString()
console.log(String(num)); // Convierte el número en una cadena.

// toUpperCase()
let cadena2 = "HolA, Bienvenidos";
console.log(cadena2.toUpperCase()); // Convierte la cadena a mayúsculas.

// toLowerCase()
console.log(cadena2.toLowerCase()); // Convierte la cadena a minúsculas.

// trim()
let cadena3 = "           Raul Lima          ";
console.log(cadena3.trim()); // Elimina los espacios en blanco al principio y al final de la cadena.

// trimEnd()
console.log(cadena3.trimEnd()); // Elimina los espacios en blanco al final de la cadena.

// trimStart()
console.log(cadena3.trimStart()); // Elimina los espacios en blanco al principio de la cadena.

// replace()
let cadena4 = "Naño";
console.log(cadena4.replace("añ", "in")); // Reemplaza la subcadena "añ" por "in".

// replaceAll()
let cadena5 = "Hola mundo, bienvenido a mi mundo";
console.log(cadena5.replaceAll("mundo", "planeta")); // Reemplaza todas las apariciones de "mundo" por "planeta".
</SyntaxHighlighter>
</div>
  

Una cadena en JavaScript es una secuencia de caracteres, ya sea texto, números o símbolos, encerrada entre comillas simples o dobles. Se utiliza para representar y manipular texto en aplicaciones web y programas en JavaScript.

Cadenas en Javascript

<p>
  Los conceptos básicos de JavaScript que son fundamentales para comprender y escribir código JavaScript efectivo y funcional.
</p>

<h2>Mostrar en consola</h2>
<div style="font-size: 20px;">
<SyntaxHighlighter language="javascript">
// Mostrar en consola
console.log("Hola mundo");
</SyntaxHighlighter>
</div>

<div style="font-size: 20px;">
<h2>Alerta</h2>
<SyntaxHighlighter language="javascript">
// Alerta
alert("Hola mundo!");
</SyntaxHighlighter>
</div>

<div style="font-size: 20px;">
<h2>Ingresar por prompt</h2>
<SyntaxHighlighter language="javascript">
// Ingresar por prompt
//let numero = parseInt(prompt("Ingrese un numero"));
let numero = parseFloat(prompt("Ingrese un numero"));

console.log("El numero es " + numero);
console.log(typeof numero);
</SyntaxHighlighter>
</div>

<h2>Operadores</h2>
<p>
   JavaScript tiene operadores aritméticos (suma, resta, multiplicación, división, etc.), operadores de comparación (mayor que, menor que, igual a, etc.) y operadores lógicos (AND, OR, NOT).
</p>
<h3>Operadores de asignación</h3>
<div style="font-size: 20px;">
<SyntaxHighlighter language="javascript">
// Operadores de asignacion
numero = 10;

numero += 1; // numero = numero + 1;
console.log(numero);

numero -= 2; // numero = numero - 2;
console.log(numero);
</SyntaxHighlighter>
</div>

<h3>Operadores aritméticos</h3>
<div style="font-size: 20px;">
<SyntaxHighlighter language="javascript">
// Operadores aritmeticos
let num_2 = 5;

let suma = num_2 + 3;
console.log(suma) // Output: 8

let resta = num_2 - 1;
console.log(resta); // Output: 4

let multiplicar = num_2 * 2;
console.log(multiplicar) // Output: 10

let division = num_2 / 2;
console.log(division) // Output: 2.5

let potencia = num_2 ** 2;
console.log(potencia)  // Output: 25
</SyntaxHighlighter>
</div>

<h2>Operadores de comparación</h2>
<div style="font-size: 20px;">
<SyntaxHighlighter language="javascript">
// Operadores de comparacion
console.log(5 > 7); // Mayor
console.log(6 < 10); // Menor
console.log(10 >= 7); // Mayor igual
console.log(6 <= 9); // Menor igual
console.log("9 es igual a 9, no estricto: ", 9 == "9"); // Igual no estricto
console.log("9 es igual a 9, estricto: ", 9 === 9); // Igual estricto
console.log("9 es igual a 10:",9 === 10) // Igual estricto
console.log( "!!(9 < 10)", !!(9 < 10) );
</SyntaxHighlighter>
</div>
  
<h2>Operadores lógicos</h2>
<div style="font-size: 20px;">
<SyntaxHighlighter language="javascript">
// Operadores logicos
// OR
console.log("----- OR -----");
console.log("(5 > 9 || 10 > 6) => ", 5 > 9 || 10 > 6); // false || true  --> true
console.log("(4 > 3 || 2 < 5) =>", 4 > 3 || 2 < 5);  // true || true --> true
console.log("(6 > 7 || 15 > 20) =>", 6 > 7 || 15 > 20);  // false || false --> false

// AND
console.log("----- AND -----");
console.log("(5 > 9 && 10 > 6) =>", 5 > 9 && 10 > 6); // false && true --> false
console.log("(4 > 3 && 2 < 5) =>", 4 > 3 && 2 < 5) // true && true --> true
console.log("(6 > 7 && 15 > 20) =>", 6 > 7 && 15 > 20);  // false && false --> false
</SyntaxHighlighter>
</div>
  
<h2>Acumulaciones</h2>
<div style="font-size: 20px;">
<SyntaxHighlighter language="javascript">
num_3 = 7;

num_3++; // num_3 = num_3 + 1

num_3--; // num_3 = num_3 - 1

--num_3;

++num_3;

console.log(num_3);
</SyntaxHighlighter>
</div>

<h2>Variables</h2>
<p>
  JavaScript utiliza variables para almacenar datos. Los tipos de datos incluyen números, cadenas de texto, booleanos, nulos, indefinidos, objetos y arreglos.
</p>
  
<h3>Variable global</h3>
<div style="font-size: 20px;">
<SyntaxHighlighter language="javascript">
var num_1 = 3;
num_1 = 8;
console.log(num_1);
</SyntaxHighlighter>
</div>

<h3>Variable local</h3>
<div style="font-size: 20px;">
<SyntaxHighlighter language="javascript">
let num_2 = 4;
num_2 = 7;
console.log(num_2);
</SyntaxHighlighter>
</div>

<h3>Constante</h3>
<div style="font-size: 20px;">
<SyntaxHighlighter language="javascript">
const num_3 = 10;
// num_3 = 5; // Error, no se puede reasignar una constante
console.log(num_3);
</SyntaxHighlighter>
</div>
  
<h2>Diferencia entre var y let</h2>
<div style="font-size: 20px;">
<SyntaxHighlighter language="javascript">
// Var
var num_4 = 10;

if (num_4 < 20) {
    console.log(num_4);
}

// Let
let num_4 = 5;

if (num_4 < 20) {
    let num_4 = 30;
    console.log(num_4);
}
</SyntaxHighlighter>
</div>
  
<h2>Tipos de variables</h2>
<div style="font-size: 20px;">
<SyntaxHighlighter language="javascript">
let numero = 4; // Numero entero
let decimal = 7.5; // Numero decimal
let cadenaSimple = 'Hola mundo'; // Cadena con comilla simple
let cadenaDoble = "Hola mundo"; // Cadena con comilla doble
let templateString = `El numero decimal es ${decimal}`; // Cadena utilizando template string
console.log(templateString);

let bool = true; // true o false

let nula = null; // Nulo
let noDefinido = undefined; // No esta definido
</SyntaxHighlighter>
</div>
  
<h2>Estructuras de control</h2>
<p>
  Incluyen condicionales (if, else if, else), bucles (for, while, do-while) y el uso de la instrucción switch para manejar múltiples casos.
</p>
<div style="font-size: 20px;">
<SyntaxHighlighter language="javascript">
let num = 10;
if (num < 10) {
    console.log(`${num} es menor a 10`);
} else if (num === 10) {
    console.log(`${num} es igual a 10`);
} else {
    console.log(`${num} es mayor a 10`);
}

// Ejemplo
let nota = 11;
if (nota >= 10.5) {
    console.log("Aprobado");
} else {
    console.error("Desaprobado");
}
</SyntaxHighlighter>
</div>
  
<h2>Switch</h2>
<div style="font-size: 20px;">
<SyntaxHighlighter language="javascript">
let key = 10;
switch (key) {
    case 1:
        console.log("El numero es igual a 1");
        break;
    case 2:
        console.log("El numero es igual a 2");
        break;
    case 3:
        console.log("El numero es igual a 3");
        break;
    default:
        console.log("El numero que ingreso no era el esperado");
        break;
}
</SyntaxHighlighter>
</div>
  
<h2>Operador ternario</h2>
<div style="font-size: 20px;">
<SyntaxHighlighter language="javascript">
let edad = 18;

let mensaje = (edad >= 18) ? "Es mayor de edad" : "Es menor de edad";

console.log(mensaje);
</SyntaxHighlighter>
</div>
  
<h2>Estructuras Repetitivas</h2>
<p>
  Las estructuras repetitivas, también conocidas como bucles o ciclos, son una parte fundamental de la programación que permite ejecutar un bloque de código varias veces.
</p>
<h3>For</h3>
<div style="font-size: 20px;">
<SyntaxHighlighter language="javascript">
console.log("Tabla del 1 al 10");
for (let i = 1; i <= 10; i++) {
    console.log(`Tabla del ${i}`);
    for (let j = 1; j <= 10; j++) {
        console.log(`${j} x ${i} = ${j * i}`);
    }
}
</SyntaxHighlighter>
</div>
      
<h3>While</h3>
<div style="font-size: 20px;">
<SyntaxHighlighter language="javascript">
console.log("While");
let i = 1;
while (i <= 10) {
    console.log(i);
    i += 1;
}
</SyntaxHighlighter>
</div>
  
<h3>Do While</h3>
<div style="font-size: 20px;">
<SyntaxHighlighter language="javascript">
console.log("Do while");
let j = 1;

do {
    console.log(j);
    j += 1;
} while(j <= 10);
</SyntaxHighlighter>
</div>
  
<h2>Funciones</h2>
<p>
  Se definen utilizando la palabra clave function. Pueden aceptar parámetros y devolver valores. Las funciones son bloques de código reutilizables.
</p>
<div style="font-size: 20px;">
<SyntaxHighlighter language="javascript">
// Funcion
function factorial(n) {
    let factorial = 1;
    for (let i = 1; i <= n; i++) {
        factorial = factorial * i;
    }
    return factorial;
}

let resultado = factorial(6);
console.log(resultado);
</SyntaxHighlighter>
</div>
  
<h2>Procedimientos y Arrow Functions</h2>
<div style="font-size: 20px;">
<SyntaxHighlighter language="javascript">
// Procedimiento
function saludo (nombre) {
    console.log("Bienvenido " + nombre);
}

saludo("Raul");

// Arrow function (Procedimiento)
const fsaludo = (nombre) => {
    console.log("Bienvenido " + nombre);
}

fsaludo("Luis");

// Arrow function (Funcion)
const sumar = (a, b) => a + b;
console.log("Suma: ", sumar(3, 4));

const ffactorial = (n) => {
    let factorial = 1;
    for (let i = 1; i <= n; i++) {
        factorial = factorial * i;
    }
    return factorial;
};

console.log("Factorial de 5: ", ffactorial(5));
</SyntaxHighlighter>
</div>

Los conceptos básicos de JavaScript que son fundamentales para comprender y escribir código JavaScript efectivo y funcional.

Conceptos básicos de JavaScript

<p>CSS (Cascading Style Sheets) es un lenguaje utilizado para definir el estilo y la presentación de documentos HTML. Permite controlar el diseño, el formato y el aspecto visual de los elementos en una página web.</p>

<h2>Definición de Selectores y Propiedades en CSS</h2>
<p>En CSS, los selectores son patrones utilizados para seleccionar los elementos HTML a los que se aplicarán ciertos estilos. Las propiedades son atributos que especifican cómo se verán esos elementos seleccionados.</p>

<h3>Tipos de Selectores</h3>
<ul style="font-size: 20px;">
  <li>
    <strong>Selector de Etiqueta:</strong> Selecciona todos los elementos de un tipo específico.
    <SyntaxHighlighter language="css">
p {
  color: blue;
}
</SyntaxHighlighter>
  </li>
  <li>
    <strong>Selector por ID:</strong> Selecciona un elemento basado en su atributo ID. Los ID deben ser únicos en un documento HTML.
    <SyntaxHighlighter language="css">
#titulo {
  font-size: 24px;
}
</SyntaxHighlighter>
  </li>
  <li>
    <strong>Selector de clase:</strong> Selecciona elementos basados en su atributo de clase.
    <SyntaxHighlighter language="css">
.texto-destacado {
  font-weight: bold;
  color: red;
}
</SyntaxHighlighter>
  </li>
  <li>
    <strong>Selector de atributo:</strong> Selecciona elementos basados en sus atributos. Esto puede ser útil para seleccionar elementos con atributos específicos.
    <SyntaxHighlighter language="css">
a[target="_blank"] {
  color: green;
}
</SyntaxHighlighter>
  </li>
  <li>
    <strong>Selector universal:</strong> Selecciona todos los elementos en un documento.
    <SyntaxHighlighter language="css">
* {
  margin: 0;
  padding: 0;
}
</SyntaxHighlighter>
  </li>
</ul>

<h2>Propiedades CSS</h2>

<h3>Fuentes</h3>
<p>La propiedad <code>font-family</code> define el tipo de fuente que se utilizará para un elemento. Puede ser una fuente genérica como "serif" o "sans-serif", o una fuente específica.</p>
<div style="font-size: 20px">
<SyntaxHighlighter language="css">
body {
  font-family: Arial, sans-serif;
}
</SyntaxHighlighter>
</div>

<h3>Fondos o Background</h3>
<p>La propiedad <code>background</code> se utiliza para definir un fondo para un elemento. Puede ser un color sólido, una imagen o una combinación de ambos.</p>
<div style="font-size: 20px">
  <SyntaxHighlighter language="css">
.container {
  background-color: #f2f2f2;
  background-image: url('background.jpg');
}
</SyntaxHighlighter>
</div>

<h3>En Cajas</h3>
<ul style="font-size: 20px;">
    <li><strong>Width and Height:</strong> Define el ancho y la altura de un elemento.</li>
    <SyntaxHighlighter language="css">
.box {
  width: 200px;
  height: 150px;
}
</SyntaxHighlighter>
    <li><strong>Margin and Padding:</strong> Controla el espacio alrededor y dentro de un elemento, respectivamente.</li>
    <SyntaxHighlighter language="css">
.box {
  margin: 10px;
  padding: 20px;
}
</SyntaxHighlighter>
    <li><strong>Border:</strong> Define el borde de un elemento.</li>
    <SyntaxHighlighter language="css">
.box {
  border: 1px solid #000;
}
</SyntaxHighlighter>
    <li><strong>Outline:</strong> Es similar al borde pero no afecta al diseño de la caja.</li>
    <SyntaxHighlighter language="css">
.box {
  outline: 2px dashed red;
}
</SyntaxHighlighter>
    <li><strong>Position:</strong> Controla cómo se posiciona un elemento en relación con su contenedor.</li>
<SyntaxHighlighter language="css">
.box {
  position: relative;
  top: 50px;
  left: 50px;
}
</SyntaxHighlighter>
    <li><strong>Display:</strong> Define cómo se mostrará un elemento.</li>
    <SyntaxHighlighter language="css">
.box {
  display: inline-block;
}
</SyntaxHighlighter>
    <li><strong>Overflow:</strong> Controla el comportamiento del contenido que desborda los límites de su contenedor.</li>
    <SyntaxHighlighter language="css">
.box {
  overflow: hidden;
}
</SyntaxHighlighter>
    <li><strong>Cursor:</strong> Especifica el cursor del mouse cuando pasa sobre un elemento.</li>
    <SyntaxHighlighter language="css">
.button {
  cursor: pointer;
}
</SyntaxHighlighter>
</ul>

<h2>Pseudoclases</h2>
<p>Las pseudoclases son palabras clave que se agregan a los selectores y que especifican un estado especial del elemento seleccionado. Esto permite aplicar estilos basados en interacciones del usuario o en estados del elemento.</p>
<ul style="font-size: 20px;">
    <li>
      <strong>:hover</strong>
      <p>La pseudoclase <code>:hover</code> se aplica cuando el cursor del mouse se coloca sobre un elemento.</p>
      <SyntaxHighlighter language="css">
a:hover {
  color: blue;
}
</SyntaxHighlighter>
    </li>
    <li>
      <strong>:active</strong>
      <p>La pseudoclase <code>:active</code> se aplica cuando un elemento está siendo activado, por ejemplo, cuando se hace clic en un enlace.</p>
      <SyntaxHighlighter language="css">
button:active {
  background-color: #ff0000;
}
</SyntaxHighlighter>
    </li>
    <li>
      <strong>:focus</strong>
      <p>La pseudoclase <code>:focus</code> se aplica cuando un elemento recibe el foco, como cuando se selecciona un campo de entrada de formulario.</p>
      <SyntaxHighlighter language="css">
input:focus {
  border-color: #00ff00;
}
</SyntaxHighlighter>
    </li>
    <li>
      <strong>:first-child</strong>
      <p>La pseudoclase <code>:first-child</code> selecciona el primer elemento hijo de su padre.</p>
      <SyntaxHighlighter language="css">
li:first-child {
  font-weight: bold;
}
</SyntaxHighlighter>
    </li>
    <li>
      <strong>:last-child</strong>
      <p>La pseudoclase <code>:last-child</code> selecciona el último elemento hijo de su padre.</p>
      <SyntaxHighlighter language="css">
div:last-child {
  background-color: #cccccc;
}
</SyntaxHighlighter>
    </li>
  </ul>

<h2>Animaciones</h2>
<p>Las animaciones en CSS permiten crear efectos de transición y movimiento en los elementos HTML. Se definen utilizando la regla `@keyframes` y se aplican a propiedades específicas de CSS.</p>
<div style="font-size: 20px;">
<SyntaxHighlighter language="css">
@keyframes animacionEjemplo {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(800px);
  }
  100% {
    transform: translateX(0);
  }
}

.elementoAnimado {
  width: 100px;
  height: 100px;
  background-color: red;
  border-radius: 999px;
  animation: animacionEjemplo 3s infinite;
}
</SyntaxHighlighter>
</div>
  

CSS (Cascading Style Sheets) es un lenguaje utilizado para definir el estilo y la presentación de documentos HTML. Permite controlar el diseño, el formato y el aspecto visual de los elementos en una página web.

Introducción a CSS

<h2>¿Qué es HTTP?</h2>
<p>
  HTTP (Hypertext Transfer Protocol) es un protocolo de comunicación utilizado para la transferencia de información en la World Wide Web. Es el protocolo subyacente que permite la comunicación entre clientes, como navegadores web, y servidores web.
</p>
<p>
  HTTP utiliza una arquitectura cliente-servidor, donde el cliente (generalmente un navegador web) realiza solicitudes HTTP a un servidor web y espera respuestas del servidor. Estas solicitudes y respuestas se envían a través de Internet utilizando el protocolo TCP/IP (Transmission Control Protocol/Internet Protocol).
</p>

<h2>Metodos HTTP</h2>
<p>
  Los métodos HTTP son verbos que indican la acción que se debe realizar en un recurso determinado. Aquí están algunos de los métodos HTTP más comunes y los tipos de respuesta que pueden generar:
</p>

<ol style="font-size: 20px; margin-left: 20px; margin-top: 5px;">
  <li>
    <strong>GET:</strong> Este método se utiliza para solicitar datos de un recurso específico.
  </li>
  <li>
    <strong>POST:</strong> Se utiliza para enviar datos al servidor para crear un nuevo recurso.
  </li>
  <li>
    <strong>PUT:</strong> Se utiliza para actualizar un recurso existente en el servidor.
  </li>
  <li>
    <strong>PATCH:</strong> Se utiliza para realizar modificaciones parciales a un recurso existente en el servidor.
  </li>
  <li>
    <strong>DELETE:</strong> Se utiliza para eliminar un recurso existente en el servidor.
  </li>
</ol>

<h2>Tipos de Respuesta HTTP</h2>
<p>
  Las respuestas HTTP se agrupan en cinco clases: 
</p>
<ul style="font-size: 20px; margin-left: 20px;">
  <li>
    <strong>(100-199)</strong>: Respuestas informativas
  </li>
  <li>
    <strong>(200-299)</strong>: Respuestas de exito
  </li>
  <li>
    <strong>(300-399)</strong>: Redirecciones
  </li>
  <li>
    <strong>(400-499)</strong>: Errores del cliente
  </li>
  <li>
    <strong>(500-599)</strong>: Errores del servidor
  </li>
</ul>

<h2>Respuestas HTTP más comunes</h2>
<ul style="font-size: 20px; margin-left: 10px;">
  <li>
    <strong>200 (OK): </strong>
    <ul style="margin-left: 0px;">
      <li>
        Indica que la solicitud fue exitosa.
      </li>
      <li>
        Se utiliza para respuestas a solicitudes HTTP cuando la operación se realiza correctamente.
      </li>
    </ul>
  </li>
  <li>
    <strong>201 (Created): </strong>
    <ul style="margin-left: 0px;">
      <li>
         Indica que la solicitud ha tenido éxito y se ha creado un nuevo recurso. 
      </li>
      <li>
        Se utiliza comúnmente en respuestas a solicitudes POST o PUT para indicar que se ha creado o actualizado un recurso en el servidor.
      </li>
    </ul>
  </li>
  <li>
    <strong>204 (Not Content): </strong> 
    <ul style="margin-left: 0px;">
      <li>
        Indica que la solicitud se ha completado correctamente, pero no hay contenido para enviar en la respuesta.
      </li>
      <li>
        Se utiliza a menudo en respuestas a solicitudes DELETE para indicar que se ha eliminado un recurso correctamente.
      </li>
    </ul>
  </li>
  <li>
    <strong>400 (Bad Request): </strong>
    <ul style="margin-left: 0px;">
      <li>
        Indica que la solicitud del cliente no se pudo entender o procesar por el servidor debido a un error de sintaxis o de formato.
      </li>
      <li>
        Se utiliza para errores en el lado del cliente, como datos de solicitud incorrectos o incompletos.
      </li>
    </ul>
  </li>
  <li>
    <strong>401 (Unauthorized): </strong>
    <ul style="margin-left: 0px;">
      <li>
        Indica que se requiere autenticación para acceder al recurso solicitado, pero el cliente no ha proporcionado credenciales válidas o ha proporcionado credenciales incorrectas.
      </li>
      <li>
        Se utiliza para solicitar al cliente que proporcione credenciales válidas antes de acceder al recurso protegido.
      </li>
    </ul>
  </li>
  <li>
    <strong>403 (Forbidden): </strong> 
    <ul style="margin-left: 0px;">
      <li>
        Indica que el servidor ha entendido la solicitud del cliente, pero se niega a cumplirla debido a restricciones en el acceso al recurso solicitado.
      </li>
      <li>
        Se utiliza para indicar que el cliente no tiene permisos suficientes para acceder al recurso solicitado.
      </li>
    </ul>
  </li>
  <li>
    <strong>404 (Not Found): </strong>
    <ul style="margin-left: 0px;">
      <li>
        Indica que el servidor no pudo encontrar el recurso solicitado.
      </li>
      <li>
        Se utiliza cuando el servidor no puede encontrar la URL solicitada, lo que puede deberse a una URL incorrecta o a que el recurso ya no existe en el servidor.
      </li>
    </ul>
  </li>
  <li>
    <strong>500 (Internal Server Error): </strong> 
    <ul style="margin-left: 0px;">
      <li>
        Indica que ha ocurrido un error interno en el servidor y no se puede completar la solicitud del cliente.
      </li>
      <li>
        Se utiliza para errores en el lado del servidor, como errores en la lógica de la aplicación, fallos en la base de datos, etc.
      </li>
    </ul>
  </li>
</ul>

Los métodos HTTP son verbos que indican la acción que se debe realizar en un recurso determinado.

Metodos HTTP y tipos de respuesta a una solicitud

<p>
  Los formularios en HTML son elementos fundamentales que permiten a los usuarios enviar datos a un servidor web para su procesamiento. Estos formularios son una parte esencial de las páginas web interactivas, ya que facilitan la interacción entre los usuarios y el sitio web al permitirles ingresar información, como texto, números, opciones seleccionadas, archivos, etc.
</p>

<h2>Estructura basica del formulario</h2>
<p>
  La estructura básica de un formulario en HTML involucra la etiqueta &lt;form&gt;, que envuelve todos los elementos del formulario y especifica la acción que se realizará cuando se envíe el formulario. El atributo action define la URL a la que se enviarán los datos, y el atributo method especifica el método HTTP utilizado para enviar los datos, que puede ser "GET" o "POST".
</p>
<SyntaxHighlighter language="html">
&lt;form action="javascript:void(0);" method="POST"&gt;
  &lt;label for="nombre"&gt;Nombre: &lt;/label&gt;
  &lt;input type="text" name="nombre" id="nombre" placeholder="Nombre"&gt;
  &lt;input type="submit" value="Enviar"&gt;
&lt;/form&gt;
</SyntaxHighlighter>

<h2>Tipos de entrada en el formulario</h2>
<p>
  Dentro del formulario, se pueden incluir diversos elementos de entrada.
</p>
<ul style="font-size: 20px;">
  <li>
    <strong>&lt;legend&gt;</strong>: Se utiliza para describir conjuntos de campos relacionados al formulario.
    <SyntaxHighlighter language="html">
&lt;legend&gt;Información personal&lt;/legend&gt;
</SyntaxHighlighter>
  </li>
  <li>
    <strong>&lt;label&gt;</strong>: Se utiliza para etiquetar los campos de entrada.
    <SyntaxHighlighter language="html">
&lt;label for="nombre"&gt;Nombre: &lt;/label&gt;
</SyntaxHighlighter>
  </li>
  <li>
    <strong>&lt;fieldset&gt;</strong>: Se utiliza para agrupar un formulario.
    <SyntaxHighlighter language="html">
&lt;form action="javascript:void(0);" method="POST"&gt;
  &lt;fieldset&gt;
    &lt;legend&gt;Información personal&lt;/legend&gt;
    &lt;label for="nombre"&gt;Nombre: &lt;/label&gt;
    &lt;input type="text" name="nombre" id="nombre" placeholder="Nombre"&gt;
    &lt;input type="submit" value="Enviar"&gt;
  &lt;/fieldset&gt;
&lt;/form&gt;
</SyntaxHighlighter>
  </li>
  <li>
    <strong>&lt;input type="text"&gt;</strong>: Se utiliza para ingresar texto en el campo del formulario.
    <SyntaxHighlighter language="html">
&lt;label for="nombre"&gt;Nombre: &lt;/label&gt;
&lt;input type="text" name="nombre" id="nombre" placeholder="Nombre"&gt;
</SyntaxHighlighter>
  </li>
  <li>
    <strong>&lt;textarea&gt;</strong>: Se utiliza para ingresar texto de varias líneas en el campo del formulario.
    <SyntaxHighlighter language="html">
&lt;label for="descripcion"&gt;Descripción&lt;/label&gt;
&lt;textarea id="descripcion"&gt;&lt;/textarea&gt;
</SyntaxHighlighter>
  </li>
  <li>
    <strong>&lt;input type="email"&gt;</strong>: Se utiliza para ingresar correo electrónico en el campo del formulario.
    <SyntaxHighlighter language="html">
&lt;label for="correo"&gt;Correo electronico: &lt;/label&gt;
&lt;input type="email" name="correo" id="correo" placeholder="Correo electronico"&gt;
</SyntaxHighlighter>
  </li>
  <li>
    <strong>&lt;input type="password"&gt;</strong>
    <SyntaxHighlighter language="html">
&lt;label for="contrasenia"&gt;Contraseña: &lt;/label&gt;: Se utiliza para ingresar contraseñas en el campo del formulario.
&lt;input type="password" name="contrasenia" id="contrasenia" placeholder="Contraseña"&gt;
</SyntaxHighlighter>
  </li>
  <li>
    <strong>&lt;input type="radio"&gt;</strong>: Se utiliza para marcar una opción.
    <SyntaxHighlighter language="html">
&lt;label for="tipoEdad"&gt;Radio: &lt;/label&gt;
&lt;input type="radio" name="tipoEdad" id="mayorEdad" value="mayorEdad"&gt;
&lt;label for="mayorEdad"&gt;Mayor de edad&lt;/label&gt;
&lt;input type="radio" name="tipoEdad" id="menorEdad" value="menorEdad"&gt;
&lt;label for="menorEdad"&gt;Menor de edad&lt;/label&gt;
</SyntaxHighlighter>
  </li>
  <li>
    <strong>&lt;select&gt;</strong>: Se utiliza para seleccionar una opción.
    <SyntaxHighlighter language="html">
&lt;label for="select"&gt;Select:&lt;/label&gt;
&lt;select&gt;
  &lt;option value="hombre"&gt;Hombre&lt;/option&gt;
  &lt;option value="mujer"&gt;Mujer&lt;/option&gt;
  &lt;option value="otro"&gt;Otro&lt;/option&gt;
&lt;/select&gt;
</SyntaxHighlighter>
  </li>
  <li>
    <strong>&lt;input type="checkbox"&gt;</strong>: Se utiliza para marcar una o varias opciones.
    <SyntaxHighlighter language="html">
&lt;label for="checkbox"&gt;Checkbox:&lt;/label&gt;
&lt;label&gt;
  &lt;input type="checkbox"&gt;Desarrollo web
&lt;/label&gt;
&lt;label&gt;
  &lt;input type="checkbox"&gt;Javascript
&lt;/label&gt;
&lt;label&gt;
  &lt;input type="checkbox"&gt;Node.js
&lt;/label&gt;
</SyntaxHighlighter>
  </li>
  <li>
    <strong>&lt;input type="color"&gt;</strong>: Se utiliza para seleccionar un color.
    <SyntaxHighlighter language="html">
&lt;label for="color"&gt;Color:&lt;/label&gt;
&lt;input type="color"&gt;
</SyntaxHighlighter>
  </li>
  <li>
    <strong>&lt;input type="date"&gt;</strong>: Se utiliza para ingresar una fecha.
    <SyntaxHighlighter language="html">
&lt;label for="fecha"&gt;Fecha:&lt;/label&gt;
&lt;input type="date"&gt;
</SyntaxHighlighter>
  </li>
  <li>
    <strong>&lt;input type="file"&gt;</strong>: Se utiliza para subir un archivo o varios archivos.
    <SyntaxHighlighter language="html">
&lt;label for="ficheros"&gt;Ficheros:&lt;/label&gt;
&lt;input type="file"&gt;
</SyntaxHighlighter>
  </li>
  <li>
    <strong>&lt;input type="hidden"&gt;</strong>: Se utiliza para ingresar un elemento oculto.
    <SyntaxHighlighter language="html">
&lt;input type="hidden" name="oculto" value="holamundo"&gt;
</SyntaxHighlighter>
  </li>
  <li>
    <strong>&lt;input type="number"&gt;</strong>: Se utiliza para ingresar un numero en el campo del formulario.
    <SyntaxHighlighter language="html">
&lt;label for="numero"&gt;Numero:&lt;/label&gt;
&lt;input type="number"&gt;
</SyntaxHighlighter>
  </li>
  <li>
    <strong>&lt;input type="range"&gt;</strong>: Se utiliza para seleccionar un valor entre un rango.
    <SyntaxHighlighter language="html">
&lt;label for="rango"&gt;Rango:&lt;/label&gt;
&lt;input type="range" name="rango"&gt;
</SyntaxHighlighter>
  </li>
  <li>
    <strong>&lt;input type="search"&gt;</strong>: Se utiliza para un formulario de búsqueda.
    <SyntaxHighlighter language="html">
&lt;label for="buscar"&gt;Buscar:&lt;/label&gt;
&lt;input type="search" name="buscar"&gt;
&lt;button&gt;Buscar&lt;/button&gt;
</SyntaxHighlighter>
  </li>
  <li>
    <strong>&lt;input type="tel"&gt;</strong>: Se utiliza para ingresar un telefono o celular en el campo del formulario.
    <SyntaxHighlighter language="html">
&lt;label for="telefono"&gt;Telefono&lt;/label&gt;
&lt;input type="tel" name="telefono"&gt;
</SyntaxHighlighter>
  </li>
  <li>
    <strong>&lt;input type="time"&gt;</strong>: Se utiliza para ingresar una hora sea en formato de 12 o 24 horas.
    <SyntaxHighlighter language="html">
&lt;label for="hora"&gt;Hora:&lt;/label&gt;
&lt;input type="time"&gt;
</SyntaxHighlighter>
  </li>
  <li>
    <strong>&lt;input type="url"&gt;</strong>: Se utiliza para ingresar una dirección URL.
    <SyntaxHighlighter language="html">
&lt;label for="url"&gt;Sitio web&lt;/label&gt;
&lt;input type="url"&gt;
</SyntaxHighlighter>
  </li>
  <li>
    <strong>&lt;progress&gt;</strong>: Se utiliza para mostrar una barra de progreso.
    <SyntaxHighlighter language="html">
&lt;label for="progress"&gt;Barra progreso:&lt;/label&gt;
&lt;progress min="1" max="100" value="45"&gt;&lt;/progress&gt;
</SyntaxHighlighter>
  </li>
  <li>
    <strong>&lt;meter&gt;</strong>: Es similar a &lt;progress&gt;
    <SyntaxHighlighter language="html">
&lt;label for="meter"&gt;Meter:&lt;/label&gt;
&lt;meter max="100" value="45"&gt;&lt;/meter&gt;
</SyntaxHighlighter>
  </li>
  <li>
    <strong>&lt;datalist&gt;</strong>: Se utiliza para seleccionar un elemento de la lista a ingresar en el campo y filtrar las coincidencias.
    <SyntaxHighlighter language="html">
&lt;label for="lista"&gt;Lista de datos: &lt;/label&gt;
&lt;input list="frutas" name="frutas"&gt;
&lt;datalist id="frutas"&gt;
  &lt;option value="manzana"&gt;&lt;/option&gt;
  &lt;option value="naranja"&gt;&lt;/option&gt;
  &lt;option value="cereza"&gt;&lt;/option&gt;
  &lt;option value="sandia"&gt;&lt;/option&gt;
  &lt;option value="pera"&gt;&lt;/option&gt;
&lt;/datalist&gt;
</SyntaxHighlighter>
  </li>
  <li>
    <strong>&lt;input type="submit"&gt;</strong>: Se utiliza para enviar el formulario al hacer click en el botón.
    <SyntaxHighlighter language="html">
&lt;input type="submit" value="Enviar"&gt; // Forma 1
&lt;button type="submit"&gt;Enviar&lt;/button&gt; // Forma 2
</SyntaxHighlighter>
  </li>
  <li>
    <strong>&lt;input type="reset"&gt;</strong>: Se utiliza para limpiar los campos del formulario.
    <SyntaxHighlighter language="html">
&lt;input type="reset" value="Limpiar"&gt;
</SyntaxHighlighter>
  </li>
</ul>


Los formularios en HTML son elementos fundamentales que permiten a los usuarios enviar datos a un servidor web para su procesamiento. 

Formularios en HTML

<p>
  Las etiquetas HTML son elementos fundamentales del lenguaje de marcado HTML que se utilizan para definir la estructura y el contenido de una página web. 
</p>

<h2>Estructura HTML</h2>
<img src="https://storagerflimat.000webhostapp.com/storage/media/estructura-html.png" src="estructura html" />
<p>Para definir la estructura de un documento HTML, se emplean las siguientes etiquetas HTML:</p>
<ul style="font-size: 20px;">
  <li>
    <strong>&lt;!DOCTYPE html&gt;:</strong> Esta etiqueta declara la versión de HTML que se está utilizando en el documento. En HTML5, la declaración es simple.
  </li>
  <li>
    <strong>&lt;html&gt;:</strong> Envuelve todo el contenido de la página y define el documento como un documento HTML.
  </li>
  <li>
    <strong>&lt;head&gt;:</strong> Contiene metadatos sobre el documento, como el título de la página, enlaces a hojas de estilo CSS, scripts JavaScript, codificación de caracteres y más.
  </li>
  <li>
    <strong>&lt;title&gt;:</strong> Define el título de la página web, que se muestra en la pestaña del navegador o en la barra de título de la ventana del navegador.
  </li>
  <li>
    <strong>&lt;body&gt;:</strong> Contiene todo el contenido visible de la página web, como texto, imágenes, enlaces, formularios, etc.
  </li>
  <li>
    <strong>&lt;header&gt;:</strong> Define el encabezado de la página o de una sección específica.
  </li>
  <li>
    <strong>&lt;nav&gt;:</strong> Define una sección de navegación dentro de una página web. 
  </li>
  <li>
    <strong>&lt;main&gt;:</strong> Define el contenido principal de la página. 
  </li>
  <li>
    <strong>&lt;section&gt;:</strong> Define una sección de contenido autónoma dentro de la página.
  </li>
  <li>
    <strong>&lt;article&gt;:</strong> Define un contenido independiente y completo que puede existir por sí solo. 
  </li>
  <li>
    <strong>&lt;aside&gt;:</strong> Define un contenido relacionado o complementario que está separado del contenido principal pero aún está asociado a él.
  </li>
  <li>
    <strong>&lt;footer&gt;:</strong> Define el pie de página de la página o de una sección específica.
  </li>
</ul>

<p>Este seria el resultado del codigo de la estructura en HTML:</p>
<SyntaxHighlighter language="html">
&lt;!DOCTYPE html&gt;
&lt;html lang="es"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;Estructura de pagina web&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;!-- Cabecera --&gt;
    &lt;header&gt;
        &lt;h1&gt;Pagina Web&lt;/h1&gt;

        &lt;!-- Menu --&gt;
        &lt;nav&gt;
            &lt;ul&gt;
                &lt;li&gt;&lt;a href="#"&gt;Inicio&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;Nosotros&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;Productos&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;Contacto&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
        &lt;/nav&gt;
    &lt;/header&gt;

    &lt;main&gt;
        &lt;!-- Seccion Principal --&gt;
        &lt;section&gt;
            &lt;article&gt;
                &lt;h2&gt;Titulo articulo&lt;/h2&gt;
                &lt;span&gt;Programacion&lt;/span&gt;&lt;time&gt;07-07-2021&lt;/time&gt;
                &lt;p&gt;Esto es un articulo de prueba&lt;/p&gt;
            &lt;/article&gt;
            &lt;article&gt;
                &lt;h2&gt;Titulo articulo&lt;/h2&gt;
                &lt;span&gt;Programacion&lt;/span&gt;&lt;time&gt;07-07-2021&lt;/time&gt;
                &lt;p&gt;Esto es un articulo de prueba&lt;/p&gt;
            &lt;/article&gt;
            &lt;article&gt;
                &lt;h2&gt;Titulo articulo&lt;/h2&gt;
                &lt;span&gt;Programacion&lt;/span&gt;&lt;time&gt;07-07-2021&lt;/time&gt;
                &lt;p&gt;Esto es un articulo de prueba&lt;/p&gt;
            &lt;/article&gt;
        &lt;/section&gt;

        &lt;!-- Barra lateral--&gt;
        &lt;aside&gt;

        &lt;/aside&gt;
    &lt;/main&gt;

    &lt;!-- Pie de pagina --&gt;
    &lt;footer&gt;
        Copyright &copy; 2024. Todos los derechos reservados. Desarrollado por Raul Lima
    &lt;/footer&gt;
&lt;/body&gt;
&lt;/html&gt;
</SyntaxHighlighter>

<h2>Etiquetas HTML</h2>
<img src="https://storagerflimat.000webhostapp.com/storage/media/etiqueta-html.png" alt="etiqueta html" />
<p>Las etiquetas HTML que se emplean para desarrollar la estructura de una página web son las siguientes:</p>
<ul style="font-size: 20px;">
  <li>
    <strong>Encabezados (&lt;h1&gt;,&lt;h2&gt;,...,&lt;h6&gt;):</strong> Las etiquetas de encabezado se utilizan para definir los encabezados o títulos de diferentes niveles. 
    <SyntaxHighlighter language="html">
&lt;h1&gt;Soy el Encabezado&lt;/h1&gt; // Titulo (Encabezado de mayor nivel)
&lt;h2&gt;Soy el segundo&lt;/h2&gt; // Subtitulo 1
&lt;h3&gt;Soy el tercero&lt;/h3&gt; // Subtitulo 2
&lt;h4&gt;Soy el cuarto&lt;/h4&gt; // Subtitulo 3
&lt;h5&gt;Soy el quinto&lt;/h5&gt; // Subtitulo 4
&lt;h6&gt;Soy el sexto&lt;/h6&gt; // Subtitulo 5 (Encabezado de menor nivel)
    </SyntaxHighlighter>
  </li>
  <li>
    <strong>Parráfos (&lt;p&gt;):</strong> Se utiliza para definir párrafos de texto.
    <SyntaxHighlighter language="html">
&lt;p&gt;
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci excepturi, totam, vitae consequatur recusandae impedit distinctio modi accusantium dolore facere quam blanditiis cumque, harum iure ullam sunt! Aut, ducimus nisi.
&lt;/p&gt;
    </SyntaxHighlighter>
  </li>
  <li>
    <strong>Enlaces (&lt;a&gt;):</strong> se utiliza para crear enlaces a otras páginas web, archivos, ubicaciones dentro del mismo documento, direcciones de correo electrónico, etc.
    <SyntaxHighlighter language="html">
&lt;a href="https://rflimat.com"&gt;Ir a mi web&lt;/a&gt; // Abrir en la misma ventana del navegador
&lt;a href="https://rflimat.com" target="_blank"&gt;Ir a mi web&lt;/a&gt; // Abrir en la otra ventana del navegador
    </SyntaxHighlighter>
  </li>
  <li>
    <strong>Imagenes (&lt;img&gt;):</strong> se utiliza para insertar imágenes en la página web.
    <SyntaxHighlighter language="html">
// Imagen a traves de ruta relativa
&lt;img src="/img/que-es-una-pagina-web.jpg" alt="pagina web"&gt;&lt;/img&gt; // Abrir en la misma ventana del navegador

// Imagen a traves de una URL
&lt;img src="https://rflimat.com/img/que-es-una-pagina-web.jpg" alt="pagina web"&gt;&lt;/img&gt; // Abrir en la otra ventana del navegador

// Imagen definiendo el ancho y la altura
&lt;img src="/img/que-es-una-pagina-web.jpg" alt="pagina web" width="500" height="200"&gt;&lt;/img&gt; // Abrir en la misma ventana del navegador
    </SyntaxHighlighter>
  </li>
  <li>
    <strong>Contenedores (&lt;div&gt;):</strong> se utiliza como un contenedor genérico para agrupar otros elementos y aplicar estilos o scripts a un conjunto de elementos relacionados.
    <SyntaxHighlighter language="html">
&lt;div&gt;
  &lt;h1&gt;Hola soy Raul Lima&lt;/h1&gt;
  &lt;p&gt;Programador web&lt;/p&gt;
&lt;/div&gt;
 </SyntaxHighlighter>
  </li>
  <li>
    <strong>Listas:</strong>
    <ul style="margin-left: 0px;">
      <li>
        <strong>Listas ordenadas:</strong> Los elementos de la lista se numeran o se enumeran con viñetas en función de su posición.
        <SyntaxHighlighter language="html">
&lt;ol&gt;
    &lt;li&gt;Desarrollo web&lt;/li&gt; // 1. Desarrollo web
    &lt;li&gt;Javascript&lt;/li&gt; // 2. Javascript
    &lt;li&gt;Node.js&lt;/li&gt; // 3. Node.js
&lt;/ol&gt;
 </SyntaxHighlighter>
      </li>
      <li>
        <strong>Listas desordenadas:</strong> Los elementos de la lista no tienen un orden específico y generalmente se muestran con viñetas.
        <SyntaxHighlighter language="html">
&lt;ul&gt;
    &lt;li&gt;Desarrollo web&lt;/li&gt; // • Desarrollo web
    &lt;li&gt;Javascript&lt;/li&gt; // • Javascript
    &lt;li&gt;Node.js&lt;/li&gt; // • Node.js
&lt;/ul&gt;
 </SyntaxHighlighter>
      </li>
    </ul>
  </li>
  <li>
    <strong>Tablas:</strong>
    <ul style="margin-left: 0px;">
      <li>
        <strong>Tabla (&lt;table&gt;):</strong> Se utiliza para crear una tabla que organiza la información en filas y columnas.
      </li>
      <li>
        <strong>Fila (&lt;tr&gt;):</strong> Se utiliza para definir una fila dentro de una tabla.
      </li>
      <li>
        <strong>Celda de encabezado (&lt;th&gt;):</strong> Se utiliza para definir las celdas de encabezado dentro de una fila de encabezado de tabla.
      </li>
      <li>
        <strong>Celda de datos (&lt;td&gt;):</strong> Se utiliza para definir las celdas de datos dentro de una fila de datos de tabla.
      </li>
    </ul>
    <SyntaxHighlighter language="html">
&lt;table border="1" summary="Lista de Productos"&gt;
    &lt;caption&gt;Lista de Productos&lt;/caption&gt;
    &lt;thead&gt;
        &lt;tr&gt;
            &lt;th&gt;N°&lt;/th&gt;
            &lt;th&gt;Nombre&lt;/th&gt;
            &lt;th&gt;Stock&lt;/th&gt;
        &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
        &lt;tr&gt;
            &lt;td&gt;1&lt;/td&gt;
            &lt;td&gt;Procesador Core i7 10500&lt;/td&gt;
            &lt;td&gt;10&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td&gt;2&lt;/td&gt;
            &lt;td&gt;Memoria RAM Samsung 8GB&lt;/td&gt;
            &lt;td&gt;4&lt;/td&gt;
        &lt;/tr&gt;
    &lt;/tbody&gt;
&lt;/table&gt;
 </SyntaxHighlighter>
  </li>
  <li>
    <strong>Audio (&lt;audio&gt;):</strong> Se utiliza para insertar archivos de audio en una página web, permitiendo a los usuarios reproducir el audio directamente en el navegador. 
    <SyntaxHighlighter language="html">
&lt;audio src="./audio/only_the_poets_speak_out.mp3" controls autoplay&gt;
  Esta etiqueta no es compatible
&lt;/audio&gt;
    </SyntaxHighlighter>
  </li>
  <li>
    <strong>Video (&lt;video&gt;):</strong> Se utiliza para insertar archivos de audio en una página web, permitiendo a los usuarios reproducir el audio directamente en el navegador. 
    <SyntaxHighlighter language="html">
&lt;video src="./videos/See You Again.mp4" controls autoplay muted width="400" height="225"&gt;
  Tu navegador no soporta la etiqueta video
&lt;/video&gt;
    </SyntaxHighlighter>
  </li>
</ul>


HTML es el lenguaje estándar utilizado para crear la estructura y el contenido de las páginas web. Para ello se emplea una estructura básica de un documento HTML que consta de varias etiquetas que definen los elementos de la página y su contenido. 

Estructura y etiquetas HTML

<p>
  JavaScript es un lenguaje de programación que se utiliza principalmente en el desarrollo web para agregar interactividad y funcionalidad a las páginas. Es un lenguaje de scripting del lado del cliente, lo que significa que se ejecuta en el navegador web del usuario, permitiendo la manipulación del contenido de la página, la respuesta a acciones del usuario y la comunicación con el servidor web.
</p>

<p>
  Es un componente fundamental de la web moderna y se utiliza ampliamente en una variedad de aplicaciones, desde páginas web simples hasta aplicaciones web complejas y dinámicas.
</p>

<h2>Historia de Javascript</h2>
<p>
  JavaScript es un lenguaje de programación ampliamente utilizado en el desarrollo web. Fue creado por Brendan Eich en 1995 mientras trabajaba en Netscape Communications Corporation. Originalmente, se llamaba Mocha y luego se renombró a LiveScript antes de finalmente adoptar el nombre de JavaScript.
</p>
<p>
  Se diseñó con el propósito de proporcionar interactividad en las páginas web. Inicialmente, se utilizaba principalmente para pequeñas funciones y validaciones en el lado del cliente. Sin embargo, con el tiempo, su uso se expandió enormemente. Se convirtió en el lenguaje principal para el desarrollo del lado del cliente, permitiendo la creación de aplicaciones web dinámicas y complejas.
</p>
<p>
  En 1997, JavaScript fue estandarizado por primera vez bajo el nombre de ECMAScript, que es el estándar que rige su especificación. Desde entonces, ha experimentado múltiples versiones y actualizaciones para mejorar su funcionalidad y abordar las necesidades cambiantes de la web moderna.
</p>
<p>
  Con la popularización de bibliotecas y frameworks como jQuery, Angular, React y Vue.js, JavaScript se ha convertido en una herramienta esencial para el desarrollo web. Además de su uso en el frontend, JavaScript también es ampliamente utilizado en el backend a través de plataformas como Node.js, lo que permite a los desarrolladores crear aplicaciones web completas utilizando un solo lenguaje de programación.
</p>
<p>
  En junio de 2015, fue lanzado ECMAScript 6 (también conocido como ES6 o ECMAScript 2015) que tuvo un papel importante y representó una actualización significativa del lenguaje.
</p>

<h2>ECMAScript 6 (ES6)</h2>
<p>
  ECMAScript 6 introdujo muchas características nuevas y poderosas que mejoraron la legibilidad, la capacidad de mantenimiento y la eficiencia del código JavaScript. Algunas de las características más destacadas incluyen:
</p>
<ul style="font-size: 20px;">
  <li>
    <strong>Let y const:</strong> Introdujo nuevas formas de declarar variables, permitiendo un mejor manejo del ámbito de las variables.
    <SyntaxHighlighter language="javascript">
var num_1 = 1; // Variable global
let num_2 = 5; // Variable local
const num_3 = 2; // Constante
</SyntaxHighlighter>
  </li>
  <li>
    <strong>Arrow functions:</strong> Proporcionaron una sintaxis más concisa para definir funciones, lo que facilitó la escritura de código más legible y expresivo.
    <SyntaxHighlighter language="javascript">
const fsaludo = (nombre) => {
      return "Bienvenido " + ${nombre};
}

let nombre = "Raul Lima";
let saludo = fsaludo(nombre);

// Output: Bienvenido Raul Lima
console.log(saludo);
</SyntaxHighlighter>
  </li>
  <li>
    <strong>Template literals:</strong> Permitieron la creación de cadenas de texto multilinea y la interpolación de variables dentro de cadenas de una manera más sencilla.
    <SyntaxHighlighter language="javascript">
let nombre = "Raul Lima";
let saludo = `Bienvenido ${nombre}`;

// Output: Bienvenido Raul Lima
console.log(saludo);
</SyntaxHighlighter>
  </li>
  <li>
    <strong>Clases:</strong> Introdujo una sintaxis más clara y orientada a objetos para definir clases en JavaScript, lo que facilitó la escritura de código orientado a objetos.
        <SyntaxHighlighter language="javascript">
class Persona {
  constructor(nombre, edad) {
    this.nombre = nombre;
    this.edad = edad;
  }
  
  mostrar() {
    return `Mi nombre es ${this.nombre} y tengo ${this.edad}`;
  }
}

const persona1 = new Persona("Raul Lima", 20);
// Output: Mi nombre es Raul Lima y tengo 20
console.log(persona1.mostrar());
</SyntaxHighlighter>
  </li>
  <li>
    <strong>Módulos:</strong> Agregó soporte para la importación y exportación de módulos, lo que mejoró la modularidad y la reutilización del código.
<br><br>operaciones.js
<SyntaxHighlighter language="javascript">
// Exportación en Javascript
export const sumar = (a, b) => a + b;
</SyntaxHighlighter>   
index.js
<SyntaxHighlighter language="javascript">
// Importación de tipo modulo 'type = "module"'
import { sumar } from "./operaciones";
let resultado = sumar(3, 4);

// Output: 7
console.log(resultado);
</SyntaxHighlighter>
  </li>
</ul>

<p>
  Para mas información sobre las versiones más recientes de ECMAScript, ver
  <a style="display: contents;" href="https://developer.mozilla.org/es/docs/Glossary/ECMAScript">ECMAScript</a>.
</p>

JavaScript es un lenguaje de programación que se utiliza principalmente en el desarrollo web para agregar interactividad y funcionalidad a las páginas. Es un lenguaje de scripting del lado del cliente, lo que significa que se ejecuta en el navegador web del usuario, permitiendo la manipulación del contenido de la página, la respuesta a acciones del usuario y la comunicación con el servidor web. 

¿Qué es Javascript?

<p style="margin-top: 10px;">
  Node.js y NPM son herramientas poderosas y versátiles que han transformado la forma en que se desarrollan y despliegan aplicaciones web y de servidor. Su combinación de eficiencia, escalabilidad, reutilización de código y un gran ecosistema de módulos los convierte en elecciones populares entre los desarrolladores de todo el mundo.
</p>

<h2>¿Qué es Node.js?</h2>
<p>
  Node.js es un entorno de tiempo de ejecución de JavaScript de código abierto que permite a los desarrolladores ejecutar código JavaScript en el servidor. Utiliza el motor V8 de Google Chrome para ejecutar código JavaScript de manera eficiente y escalable. Node.js es especialmente conocido por su capacidad para manejar operaciones de entrada/salida de manera no bloqueante y su enfoque en el desarrollo de aplicaciones en tiempo real y basadas en eventos.
</p>
<h3>Caracteristicas</h3>
<ul style="font-size: 20px;">
  <li>
    <strong>Event-Driven y Non-Blocking I/O:</strong> Utiliza un modelo de programación basado en eventos y operaciones de entrada/salida no bloqueantes, lo que significa que puede manejar múltiples solicitudes simultáneamente sin bloquear el hilo principal de ejecución. Esto lo hace altamente eficiente para aplicaciones que requieren interactividad en tiempo real y procesamiento de alta concurrencia, como aplicaciones web, servidores de chat, juegos en línea, entre otros.
  </li>
  <li>
    <strong>Desarrollo Full-Stack con JavaScript:</strong> Permite a los desarrolladores utilizar JavaScript tanto en el lado del cliente (navegador) como en el lado del servidor, lo que facilita el desarrollo full-stack con un solo lenguaje de programación. Esto simplifica la sincronización de datos y la reutilización de código entre el frontend y el backend, lo que conduce a un desarrollo más rápido y eficiente.
  </li>
  <li>
    <strong>Gran Ecosistema de Módulos:</strong> Cuenta con un vasto ecosistema de módulos y paquetes de software disponibles a través de NPM. Estos módulos permiten a los desarrolladores agregar funcionalidades adicionales a sus aplicaciones de manera rápida y sencilla, desde el manejo de bases de datos hasta la autenticación de usuarios, pasando por la integración con servicios de terceros.
  </li>
</ul>

<h2>¿Qué es NPM?</h2>
<p>
  NPM, que significa Node Package Manager, es el administrador de paquetes predeterminado para Node.js. Permite a los desarrolladores instalar, compartir y administrar las dependencias de sus proyectos de Node.js de manera sencilla. NPM también proporciona un repositorio público que contiene miles de paquetes de software de código abierto que pueden ser fácilmente integrados en proyectos de Node.js.
</p>
<h3>Caracteristicas</h3>
<ul style="font-size: 20px;">
  <li>
    <strong>Administrador de Dependencias:</strong> Es conocido principalmente como el administrador de dependencias para proyectos de Node.js. Permite a los desarrolladores especificar y gestionar las dependencias de sus proyectos en un archivo llamado package.json, lo que simplifica enormemente la gestión de las bibliotecas y herramientas utilizadas en el desarrollo de una aplicación.
  </li>
  <li>
    <strong>Repositorio de Paquetes:</strong> Proporciona un repositorio público que contiene miles de paquetes de software de código abierto, disponibles para ser instalados y utilizados en proyectos de Node.js. Esto permite a los desarrolladores aprovechar el trabajo de la comunidad y acelerar el desarrollo de sus aplicaciones mediante la reutilización de código existente.
  </li>
  <li>
    <strong>Herramientas de Desarrollo:</strong> Además de ser un administrador de paquetes, NPM también incluye varias herramientas útiles para el desarrollo de aplicaciones, como scripts de construcción, herramientas de prueba, generadores de documentación, entre otros. Estas herramientas pueden instalarse como dependencias de desarrollo y utilizarse para mejorar el flujo de trabajo y la calidad del código.
  </li>
</ul>

Node.js y NPM son herramientas poderosas y versátiles que han transformado la forma en que se desarrollan y despliegan aplicaciones web y de servidor. Su combinación de eficiencia, escalabilidad, reutilización de código y un gran ecosistema de módulos los convierte en elecciones populares entre los desarrolladores de todo el mundo.

Node.js y NPM

<h2>Modelo cliente-servidor</h2>
<p>
  El modelo cliente-servidor es una arquitectura de red en la que los roles de los dispositivos de una red se dividen en dos categorías principales: cliente y servidor. En este modelo, los clientes son dispositivos que solicitan servicios o recursos, mientras que los servidores son dispositivos que proporcionan esos servicios o recursos. Los clientes envían solicitudes al servidor, y el servidor responde a esas solicitudes, proporcionando los datos o servicios solicitados. Este modelo es fundamental en el funcionamiento de la mayoría de las aplicaciones distribuidas, incluidas las aplicaciones web, donde el navegador del usuario actúa como cliente y el servidor web proporciona los recursos solicitados.
</p>

<h2>Otras arquitecturas de software</h2>
<p>
  Además de la arquitectura cliente-servidor, en el backend de Node.js se pueden utilizar varias otras arquitecturas de software, como:
</p>

<ul style="font-size: 20px;">
  <li>
    <strong>Arquitectura de capas:</strong> En esta arquitectura, la aplicación se divide en capas lógicas, como la capa de presentación, la capa de lógica de negocio y la capa de acceso a datos. Cada capa tiene una responsabilidad específica y se comunica con las capas adyacentes para lograr la funcionalidad completa de la aplicación.
  </li>
  <li>
    <strong>Patrón de diseño MVC (Modelo-Vista-Controlador):</strong>
    Es un enfoque arquitectónico para desarrollar aplicaciones que separa la representación de los datos de la lógica de negocio y la interacción del usuario. Consiste en tres componentes principales:
    <ul style="font-size: 20px;">
      <li>
        <strong>Modelo (Model):</strong> Representa los datos y la lógica de negocio de la aplicación. Se encarga de acceder, procesar y manipular los datos.
      </li>
      <li>
        <strong>Vista (View):</strong> Es responsable de mostrar la interfaz de usuario y presentar los datos al usuario final de manera adecuada. No realiza procesamiento de datos, simplemente muestra la información.
      </li>
      <li>
        <strong>Controlador (Controller):</strong> Actúa como intermediario entre el modelo y la vista. Gestiona las solicitudes del usuario, actualiza el modelo según sea necesario y selecciona la vista adecuada para mostrar los resultados al usuario.
      </li>
    </ul>
  </li>
  <li>
    <strong>Arquitectura de servicios (SOA):</strong> Es un enfoque para el diseño de sistemas de software en el que las funcionalidades se ofrecen como servicios independientes y modulares. Cada servicio tiene una interfaz bien definida y se comunica con otros servicios a través de protocolos estándar, como HTTP o SOAP. Esta arquitectura promueve la reutilización, la interoperabilidad y la escalabilidad de los componentes del sistema al descomponer la lógica de negocio en servicios separados, lo que facilita la integración y la evolución de la aplicación a lo largo del tiempo.
  </li>
  <li>
    <strong>Arquitectura de microservicios:</strong> Esta arquitectura descompone una aplicación en varios servicios pequeños e independientes, cada uno ejecutándose en su propio proceso y comunicándose entre sí mediante mecanismos ligeros como HTTP o protocolos de mensajería.
  </li>
  <li>
    <strong>Arquitectura basada en eventos:</strong> En este enfoque, las acciones dentro de la aplicación son desencadenadas por eventos, y el código está diseñado para responder a estos eventos de manera asincrónica. Node.js es especialmente adecuado para este tipo de arquitectura debido a su naturaleza orientada a eventos y su capacidad para manejar múltiples conexiones concurrentes de manera eficiente.
  </li>
</ul>

Existen modelos y arquitecturas de software que se pueden implementar en proyectos de desarrollo de aplicaciones web. La elección de la arquitectura adecuada depende de los requisitos específicos de la aplicación y las preferencias del equipo de desarrollo.

Modelos y Arquitecturas de Software

<p style="margin-top: 10px;">
  En el desarrollo web, dos aspectos fundamentales son el frontend y el backend, que se encargan de diferentes partes de la creación y funcionamiento de una aplicación o sitio web. Comprender las diferencias entre estas dos áreas es esencial para tener una visión completa del proceso de desarrollo web.
</p>

<h2>Frontend</h2>
<p>
  El frontend se refiere a la parte de una aplicación o sitio web que los usuarios interactúan directamente. Incluye todo lo que se presenta en el navegador y con lo que los usuarios pueden interactuar, como el diseño, la estructura, el contenido y la funcionalidad visual de una página web.
</p>
<p>
  Las tecnologías clave en el frontend incluyen HTML, CSS y JavaScript, que se utilizan para crear la interfaz de usuario y hacer que la experiencia sea interactiva y atractiva. Los diseñadores y desarrolladores frontend se centran en crear una experiencia de usuario intuitiva y atractiva.
</p>
<h3>Bibliotecas y Frameworks de CSS</h3>
<p>
  En el desarrollo frontend, los frameworks y bibliotecas de CSS son herramientas fundamentales para agilizar el proceso de diseño y estilización de páginas web. Algunos de los más destacados son:
</p>
<ul style="font-size: 20px;">
  <li>
    <strong>Bootstrap:</strong> Es uno de los frameworks más populares y ampliamente utilizados. Desarrollado por Twitter, ofrece una amplia gama de componentes y estilos predefinidos que facilitan la creación de interfaces web responsivas y atractivas. Es conocido por su facilidad de uso y su amplia comunidad de soporte y documentación.
  </li>
  <li>
    <strong>Tailwind CSS:</strong> Es una librería centrada en utilidades que permite construir interfaces web altamente personalizables y con poco código. En lugar de proporcionar componentes predefinidos, ofrece clases utilitarias que se pueden combinar para crear estilos únicos y personalizados. Es conocido por su enfoque orientado a la utilidad y su capacidad para acelerar el proceso de desarrollo frontend.
  </li>
  <li>
    <strong>Bulma:</strong> Es una librería basada en flexbox que se destaca por su simplicidad y modularidad. A diferencia de otros frameworks, No utiliza JavaScript y se centra en proporcionar una base sólida para el diseño de interfaces web limpias y minimalistas. Es altamente personalizable y se integra bien con otros frameworks y herramientas de desarrollo.
  </li>
</ul>
  
<h3>Bibliotecas y Frameworks de Frontend</h3>
<p>
  En el frontend, los desarrolladores suelen recurrir a frameworks y bibliotecas para agilizar el desarrollo y mejorar la experiencia del usuario. Algunos de los más populares son:
</p>
<ul style="font-size: 20px;">
  <li>
    <strong>React.js:</strong> Desarrollado por Facebook, React.js es una biblioteca de JavaScript que se utiliza para construir interfaces de usuario interactivas y reactivas. Se centra en componentes reutilizables que facilitan la creación de interfaces complejas.
  </li>
  <li>
    <strong>Vue.js:</strong> Vue.js es otro framework de JavaScript que se centra en la creación de interfaces de usuario reactivas y de fácil mantenimiento. Es conocido por su curva de aprendizaje suave y su flexibilidad.
  </li>
  <li>
    <strong>Angular:</strong> Desarrollado por Google, Angular es un framework de JavaScript que se utiliza para construir aplicaciones web de una sola página (SPA). Proporciona herramientas y estructuras para la creación de aplicaciones complejas y escalables.
  </li>
</ul>

<h2>Backend</h2>
<p>
  El backend, por otro lado, se refiere a la parte de una aplicación o sitio web que los usuarios no ven directamente, pero que hace que todo funcione detrás de escena. Esto incluye la lógica de la aplicación, la gestión de datos, la autenticación de usuarios, y la interacción con el servidor y la base de datos. 
</p>
<p>
  Los desarrolladores backend utilizan lenguajes de programación como Python, Ruby, C#, Java, PHP o JavaScript (con Node.js) para construir y mantener la funcionalidad del servidor. También trabajan en la seguridad y el rendimiento del sistema para garantizar que la aplicación sea robusta y eficiente.
</p>
<h3>Bibliotecas y Frameworks de Backend</h3>
<p>
  En el backend, los desarrolladores también tienen a su disposición una variedad de frameworks y bibliotecas para construir y mantener la lógica de la aplicación y la interacción con el servidor y la base de datos. Algunos de los más destacados son:
</p>
<ul style="font-size: 20px;">
  <li>
    <strong>Express.js:</strong> Express.js es un framework de aplicación web de Node.js que simplifica el proceso de creación de API y aplicaciones web. Es minimalista y flexible, lo que lo hace ideal para proyectos de cualquier tamaño.
  </li>
  <li>
    <strong>Django:</strong> Django es un framework de desarrollo web de Python que sigue el principio de "baterías incluidas", lo que significa que proporciona una amplia gama de herramientas y características listas para usar. Es conocido por su enfoque en la productividad y la seguridad.
  </li>
  <li>
    <strong>Ruby on Rails:</strong> Ruby on Rails, a menudo abreviado como Rails, es un framework de desarrollo web de Ruby que sigue el principio de "convención sobre configuración", lo que significa que favorece las convenciones predefinidas sobre la configuración personalizada. Es conocido por su rapidez en el desarrollo y su énfasis en la elegancia del código.
  </li>
  <li>
    <strong>Laravel:</strong> Laravel es un framework de desarrollo web de código abierto basado en PHP. Es conocido por su elegante sintaxis y su enfoque en la productividad y la legibilidad del código. Laravel proporciona una amplia gama de características y herramientas listas para usar que facilitan el desarrollo de aplicaciones web robustas y escalables. Cuenta con una activa comunidad de desarrolladores que contribuyen con extensiones y paquetes que amplían aún más su funcionalidad y versatilidad.
  </li>
  <li>
    <strong>ASP.NET:</strong> ASP.NET es un framework de desarrollo web desarrollado por Microsoft y está diseñado para construir aplicaciones web dinámicas y robustas en el entorno de desarrollo de .NET. Ofrece una amplia variedad de herramientas y tecnologías para la creación de aplicaciones web, que facilita el desarrollo, la implementación y el mantenimiento de aplicaciones web escalables y seguras. Es conocido por su rendimiento, su capacidad de escala y su amplio soporte para diferentes lenguajes de programación, como C# y Visual Basic.
  </li>
</ul>

<h2>Conclusiones</h2>
<p>
  Tanto el frontend como el backend son componentes esenciales en el desarrollo web, cada uno con su propio conjunto de tecnologías y responsabilidades. Mientras que el frontend se enfoca en la experiencia del usuario y la presentación visual, el backend se encarga de la lógica de la aplicación y la gestión de datos. Ambos trabajan en conjunto para crear aplicaciones web funcionales y atractivas que satisfagan las necesidades de los usuarios y los objetivos del negocio.
</p>

En el desarrollo web, dos aspectos fundamentales son el frontend y el backend, que se encargan de diferentes partes de la creación y funcionamiento de una aplicación o sitio web. Comprender las diferencias entre estas dos áreas es esencial para tener una visión completa del proceso de desarrollo web.

Blog