¿Que es el Internet?
Es una red global de computadoras interconectadas que utilizan un conjunto de protocolos de comunicación para compartir información, como por ejemplo: TCP/IP, HTTP, HTTPS, FTP, SMTP, POP y DNS.
¿Que es HTTP?
Se trata de un Protocolo de Transferencia de HiperTexto, utilizado para la transmisión de datos en nuestros navegadores. y como ya habras deducido HTTPS es la versión segura de HTTP y utiliza SSL/TLS para cifrar los datos transmitidos, proporcionando una capa adicional de seguridad.
¿Que es un DNS ?
Un DNS es una dirección única que identifica a una página web en internet, por ejemplo: plcmark2.com
¿Que es un Hosting?
Es un servicio prestado por diferentes empresas que permiten alojar un sitio web en sus servidores, para que sea accesible desde cualquier parte del mundo.
¿Que es un Navegador?
Es quien interpreta y muestra nuestro código Html, CSS y JS, para que sea visible para los usuarios. Ejemplos: Chrome, Firefox, Safari, Opera, etc.
HTML (HyperText Markup Language):
Es el lenguaje de marcado estándar para crear páginas web. Define la estructura y el contenido de una página web utilizando etiquetas.
Estructura Básica: Todo documento HTML debe tener una estructura básica que incluya etiquetas como html <!DOCTYPE html>, <html>, <head>, y <body>.
Etiquetas Semánticas:
HTML5 introduce etiquetas semánticas que proporcionan significado y estructura al contenido:
<header>, <footer>, <nav>, <article>, <section>Elementos y Atributos:
HTML está compuesto por elementos que pueden contener texto, imágenes, enlaces, entre otros. Los elementos pueden tener atributos que modifican su comportamiento o apariencia.
Formularios:
HTML ofrece etiquetas para crear formularios interactivos que permiten a los usuarios enviar datos al servidor, utilizando elementos como :
<form>, <input>, <select>, <textarea>, etc. Multimedia:
Permite la inclusión de contenido multimedia como imágenes, videos y audio a través de etiquetas como
<img>, <video>, <audio>Enlaces:
Utilizando la etiqueta <a> , se crean enlaces que permiten la navegación entre diferentes páginas web.
Por Ejemplo:
Un caso común es el no uso de los tags semánticos, por ejemplo, en lugar de usar un tag <div> se usa un <header> con la clase header y así sucesivamente con los demás tags semánticos.
<!-- Non-semantic header -->
<html>
<title></title>
<body>
<div class="header">
<h1>My Site</h1>
<nav>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
</nav>
</div>
</body>
</html>
<!-- Semantic header -->
<html>
<title></title>
<body>
<header>
<h1>My Site</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
</body>
</html>CSS (Cascading Style Sheets):
Se utiliza para dar estilo y diseño a las páginas web creadas con HTML. Permite controlar aspectos como el diseño, colores, fuentes, y disposición de los elementos en la página.
<style>
/* Estilo para establecer un fondo */
body {
background-color: lightgray;
}
/* Estilo para cambiar el color del texto */
p {
color: blue;
}
/* Estilo para cambiar el tamaño y tipo de fuente */
h2 {
font-size: 24px;
font-family: Arial, sans-serif;
}
</style>JavaScript:
Es un lenguaje de programación que se utiliza para añadir interactividad y dinamismo a las páginas web. Permite crear efectos visuales, validar formularios, y en general, realizar acciones del lado del cliente.
Variables y tipos de datos:
Comprender cómo declarar variables, los diferentes tipos de datos (números, cadenas, booleanos, etc.) y cómo se almacenan y manipulan.
let edad = 20; // number
let nombre = "Juan"; // string
let esMayor = true; // boolean
let lista = [1, 2, 3]; // array
let persona = { nombre: "Juan", edad: 20 }; // object
let array_de_objetos = [
{ nombre: "Juan", edad: 20 },
{ nombre: "Maria", edad: 30 },
]; // array de objetosOperadores:
Conocer los operadores aritméticos (+, -, *, /), operadores de comparación (==, ===, !=, !==), operadores lógicos (&&, ||, !) y cómo se utilizan para realizar operaciones.
let a = 10;
let b = 20;
// Operadores aritméticos
console.log(a + b); // 30
console.log(a - b); // -10
console.log(a * b); // 200
console.log(a / b); // 0.5
// Operadores de comparación
console.log(a == b); // false
console.log(a === b); // false
console.log(a != b); // true
console.log(a !== b); // true
console.log(a > b); // false
console.log(a < b); // true
console.log(a >= b); // false
console.log(a <= b); // true
// Operadores lógicos
console.log(a > 0 && b > 0); // true
console.log(a > 0 || b > 0); // true
console.log(!(a > 0)); // false
// Operadores de asignación
let c = 10;
c += 5; // c = c + 5
c -= 5; // c = c - 5
c *= 5; // c = c * 5
c /= 5; // c = c / 5
c %= 5; // c = c % 5
Estructuras de control:
Entender cómo funcionan las estructuras como if, else, for, while, switch, que te permiten controlar el flujo del programa basado en condiciones.
// Estructura if
let edad = 20;
if (edad >= 18) {
console.log("Es mayor de edad");
} else {
console.log("Es menor de edad");
}
// Estructura if-else if-else
let calificacion = 80;
if (calificacion >= 90) {
console.log("A");
} else if (calificacion >= 80) {
console.log("B");
} else if (calificacion >= 70) {
console.log("C");
} else if (calificacion >= 60) {
console.log("D");
} else {
console.log("F");
}
// Estructura switch
let dia = 1;
switch (dia) {
case 1:
console.log("Lunes");
break;
case 2:
console.log("Martes");
break;
case 3:
console.log("Miercoles");
break;
case 4:
console.log("Jueves");
break;
case 5:
console.log("Viernes");
break;
case 6:
console.log("Sabado");
break;
case 7:
console.log("Domingo");
break;
default:
console.log("Dia no valido");
break;
}
// Estructura for
for (let i = 0; i < 10; i++) {
console.log(i);
}
// Estructura while
let i = 0;
while (i < 10) {
console.log(i);
i++;
}
Funciones:
Saber cómo declarar y llamar funciones, pasar argumentos a funciones y retornar valores desde ellas.
// Declaración de una función
function suma(a, b) {
return a + b;
}
// Llamada a una función
let resultado = suma(10, 20);
console.log(resultado); // 30
// Función anónima
let resta = function (a, b) {
return a - b;
};
// Función flecha o Arrow Function => (ES6)
let multiplicacion = (a, b) => a * b;
// Función flecha o Arrow Function => (ES6)
let division = (a, b) => a / b;
Objetos y Arrays:
Familiarizarte con la creación y manipulación de objetos y arrays, que son fundamentales para almacenar y organizar datos.
let persona = {
nombre: "Juan",
edad: 20,
direccion: {
calle: "Av. 123",
numero: 123,
},
amigos: ["Maria", "Pedro", "Luis"],
};
console.log(persona.nombre); // Juan
console.log(persona.edad); // 20
console.log(persona.direccion.calle); // Av. 123
console.log(persona.direccion.numero); // 123
console.log(persona.amigos[0]); // Maria
console.log(persona.amigos[1]); // Pedro
console.log(persona.amigos[2]); // Luis
Scope y contexto:
Entender el alcance de las variables (scope) y cómo el contexto (this) funciona en diferentes situaciones.
let a = 10; // variable global
function suma() {
let b = 20; // variable local
console.log(a); // 10
console.log(b); // 20
}
suma();
console.log(a); // 10
console.log(b); // undefined
Eventos:
Conocer cómo se manejan los eventos en JavaScript para responder a acciones del usuario en la interfaz de usuario.
/** cabe destacar, que esto solo funciona por el lado del cliente,
* es decir, en el navegador, ya que en el servidor
* no se pueden ejecutar este tipo de acciones. */
let boton = document.getElementById("boton");
boton.addEventListener("click", function () {
console.log("Click en el boton");
});
DOM (Document Object Model):
Comprender la estructura jerárquica de los elementos HTML y cómo JavaScript interactúa con ellos para modificar dinámicamente la página.
let titulo = document.getElementById("titulo");
titulo.innerHTML = "Nuevo titulo";
titulo.style.color = "red";
titulo.style.backgroundColor = "lightgray";Asincronía y Callbacks/Promises/Async Await:
Entender cómo manejar operaciones asincrónicas en JavaScript utilizando callbacks, promesas o la sintaxis async/await para evitar bloqueos en la ejecución del código.
// Callbacks
function suma(a, b, callback) {
setTimeout(() => {
callback(a + b);
}, 1000);
}
suma(10, 20, function (resultado) {
console.log(resultado); // 30
});
// Promises
function suma(a, b) {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(a + b);
}, 1000);
});
}
suma(10, 20).then((resultado) => {
console.log(resultado); // 30
});
// Async Await
async function suma(a, b) {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(a + b);
}, 1000);
});
}
async function operacion() {
let resultado = await suma(10, 20);
console.log(resultado); // 30
}
operacion();
Manipulación de cadenas y arrays:
Saber cómo trabajar con métodos para manipular cadenas (string) y arrays, como split(), join(), slice(), etc.
let cadena = "Hola mundo";
// Obtener la longitud de una cadena
console.log(cadena.length); // 10
// Obtener un caracter de una cadena
console.log(cadena.charAt(0)); // H
// Obtener un substring de una cadena
console.log(cadena.substring(0, 4)); // Hola
// Obtener el índice de un caracter en una cadena
console.log(cadena.indexOf("m")); // 5
// Obtener un array de una cadena
console.log(cadena.split(" ")); // ["Hola", "mundo"]
// Obtener una cadena de un array
console.log(["Hola", "mundo"].join(" ")); // "Hola mundo"
// Obtener un array de una cadena
console.log(cadena.split(" ")); // ["Hola", "mundo"]
// Obtener una cadena de un array
console.log(["Hola", "mundo"].join(" ")); // "Hola mundo"
// Obtener un substring de una cadena
console.log(cadena.slice(0, 4)); // Hola
// Obtener una cadena en mayúsculas
console.log(cadena.toUpperCase()); // HOLA MUNDO
// Obtener una cadena en minúsculas
console.log(cadena.toLowerCase()); // hola mundo
// Obtener una cadena sin espacios en blanco
console.log(cadena.trim()); // Hola mundo
// Obtener una cadena reemplazando un caracter
console.log(cadena.replace("o", "x")); // Hxla mundo
// Obtener una cadena reemplazando una expresión regular
console.log(cadena.replace(/o/g, "x")); // Hxla mxndxFrameworks y Bibliotecas:
Herramientas como React, Angular, Vue.js, entre otros, proporcionan estructuras y funcionalidades predefinidas para facilitar el desarrollo de aplicaciones web.
Responsive Design:
Es la práctica de crear interfaces web que se adapten y sean funcionales en diferentes dispositivos y tamaños de pantalla.
Cross-Browser Compatibility:
Asegurarse de que una página web se visualice y funcione de manera consistente en distintos navegadores web como Chrome, Firefox, Safari, etc.
Accesibilidad Web:
Diseñar y desarrollar sitios web de manera que sean accesibles para todas las personas, incluyendo aquellas con discapacidades.