- WORD
- FORMATO AUTOMATICO Y ESTILOS
- INSERTAR CUADRO DE TEXTO Y ECUACION
- REFERENCIASTABLA DE CONTENIDO Y BIBLIOGRAFIA
- Ir a Prácticas
- EXCEL
- FORMULAS I y II
- TABLAS Y GRAFICOS DINAMICOS
- SUBTOTALES Y BASE DE DATOS
- MACROS
- Ir a Prácticas
- AUTOCAD
- 2D:DIBUJO Y ACOTAR
- INSERTAR BLOQUES Y PLOT
- 3D: MODELADO Y EDICION DE SOLIDOS
- RENDER Y ANIMACIONES
- Ir a Prácticas
domingo, 8 de noviembre de 2026
viernes, 23 de octubre de 2026
funciones en javascript
Switch
La declaración switch en
JavaScript es una estructura de control de flujo que se utiliza para evaluar
una expresión y compararla con múltiples casos posibles (case). Funciona como
una alternativa más limpia y legible a una cadena larga de sentencias if ...
else if.
Cuando la expresión
coincide con el valor de un case, el programa ejecuta el bloque de código
asociado a ese caso hasta que encuentra una instrucción de salida o llega al
final del switch
Sintaxis:
switch (expresion) {
case
valor1:
//
Código que se ejecuta si expresion === valor1
break;
case
valor2:
//
Código que se ejecuta si expresion === valor2
break;
default:
//
Código que se ejecuta si ningún caso coincide
}
Ejemplo:
const dia = "Martes";
switch (dia) {
case "Lunes":
console.log("Inicio de la semana laboral.");
break;
case "Martes":
case "Miércoles":
case "Jueves":
console.log("Días de rutina y trabajo.");
break;
case
"Viernes":
console.log("¡Por fin es viernes!");
break;
case "Sábado":
case "Domingo":
console.log("Fin de semana para descansar.");
break;
default:
console.log("Día no válido.");
}
FUNCIONES EN JAVASCRIPT
Una función en JavaScript es un bloque de
código reutilizable diseñado para realizar una tarea específica o calcular un
valor. En lugar de escribir el mismo código una y otra vez, puedes agruparlo
dentro de una función y ejecutarlo ("llamarla") cada vez que lo
necesites.
Componentes básicos de una función
Para entender cómo funciona, imagina que es
una máquina:
- Entradas (Parámetros): Los datos opcionales que le introduces
para que trabaje.
- Cuerpo: El conjunto de instrucciones u operaciones que realiza.
- Salida (Retorno): El resultado final que te devuelve usando la
palabra clave return.
Formas comunes de escribir
funciones
Existen diferentes maneras de
declarar funciones en según las necesidades del código:
1. Función Declarativa (Tradicional)
Es la forma más clásica. Se define usando
la palabra clave function seguida de un nombre
function saludar(nombre)
{
return "Hola, " + nombre +
"!";
}
// Llamar a la función
console.log(saludar("Carlos"));
function saludar(nombre) {
return `Hola, ${nombre}!`; }
console.log(saludar("Sofía"));
2. Función de Expresión
Ocurre cuando guardas una función (que
usualmente no tiene nombre) dentro de una variable.
const sumar
= function(a, b) {
return a + b;
};
FUNCIONES FLECHA
Una función flecha (o arrow function) es
una forma compacta y moderna de escribir funciones en JavaScript, introducida
en el estándar ES6. A diferencia de las funciones tradicionales, no requieren
la palabra clave function, utilizan el operador flecha (=>) y no tienen su
propio contexto para la palabra clave this (sino que lo heredan del entorno
donde fueron creadas).
CASOS:
1. Sintaxis básica con múltiples parámetros
Es la estructura estándar cuando necesitas
pasar dos o más argumentos. Los parámetros van entre paréntesis y el resultado
se retorna automáticamente si está en una sola línea.
2. Con un solo parámetro (Sin paréntesis)
Si tu función recibe únicamente un
parámetro, puedes omitir por completo los paréntesis, haciendo que el código
sea aún más limpio.
3. Sin parámetros (Paréntesis obligatorios)
Cuando la función no requiere ningún
argumento para trabajar, los paréntesis vacíos son estrictamente obligatorios
antes de la flecha.
4. Cuerpo con múltiples líneas de código
Si la lógica de tu función necesita más de
una línea de código, debes abrir llaves {}. En este caso, el retorno automático
se pierde y es obligatorio usar la palabra clave return.
5. Uso común en métodos de arreglos (.map,
.filter)
Donde más brillan las funciones flecha es
al usarlas como callbacks dentro de métodos modernos de arreglos, reduciendo
bloques enteros de código a una sola línea muy legible.
EJEMPLOS:
// Tradicional
const sumar
= function(a, b) { return a + b; };
// Flecha
const sumarFlecha = (a, b) => a + b;
console.log(sumarFlecha(5, 3)); // Imprime:
8
// Si solo hay un parámetro, no hacen falta
los ()
const alCuadrado = x => x * x;
console.log(alCuadrado(4)); // Imprime: 16
//sin parametros
const
obtenerFechaActual = () => new Date().toLocaleDateString();
console.log(obtenerFechaActual()); //
Imprime la fecha de hoy
// con varias lineas de codigo
const procesarPago = (monto, impuesto)
=> {
const subtotal = monto * impuesto;
const total = monto + subtotal;
return `El total a pagar es
$${total}`;
};
console.log(procesarPago(100, 0.15)); //
Imprime: El total a pagar es $115
const numeros =[4,5,3,2,3];
// Filtramos solo los números pares usando
una función flecha
const pares = numeros.filter(n => n % 2
=== 0);
console.log(pares); // Imprime: [2, 4]
const array
=[2,1,4,7,9,12,14,17];
const
array2=array.map(function(valor){
return valor*2
});
const
array3=array.map((valor)=>valor*2);
console.log(array);
console.log(array2);
console.log(array3);
EL DOM:
El DOM (Document Object Model o Modelo de
Objetos del Documento) es una interfaz de programación que representa la
estructura de una página web como un árbol de nodos manipulables.
Cuando el navegador web carga un archivo
HTML, traduce ese código en una estructura organizada de objetos en la memoria.
Gracias a esto, lenguajes de programación como JavaScript pueden conectarse a
la página para cambiar el contenido, los estilos CSS o la estructura de forma
dinámica y en tiempo real.
EJEMPLO DE MANIPULACION
DEL DOM:
HTML:
<!DOCTYPE
html>
<html
lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button class="tarjeta">Botón 1</button>
<button
class="tarjeta">Botón 2</button>
<button
class="tarjeta">Botón 3</button>
<script src="script.js"></script>
</body>
</html>
JAVASCRIPT:
function saluda(){
document.write("hola
amigos");
alert("hola
amigos");
}
saluda();
const botones =
document.querySelectorAll('.tarjeta');
botones.forEach(boton
=> {
boton.addEventListener('click', function() {
// 'this' es exactamente el botón específico que
recibió el clic
this.style.backgroundColor = 'green';
this.innerText = '¡Seleccionado!';
});
});
miércoles, 21 de octubre de 2026
DIAGRAMA DE GANTT
FORMULAS DAX
COUNTROWS
La función COUNTROWS en Power BI (DAX) cuenta el número total de filas en una tabla
especificada o en una tabla definida por una expresión.
total proceso = CALCULATE(COUNTROWS(EMPRESA),EMPRESA[PROGRESO]="PROCESO")
DATEIFF
La función DATEDIFF en DAX (Power BI) calcula la cantidad de límites de intervalo que hay
entre dos fechas. Su sintaxis básica es:
DATEDIFF(Date1, Date2, Interval).
Devuelve un número positivo si Date2 es mayor que Date1, o negativo en caso contrario.
DIAS = DATEDIFF(TRABAJOS[INICIO],TRABAJOS[FIN],DAY)
viernes, 2 de octubre de 2026
ARRAYS Y FUNCIONES EN JAVASCRIPT
FORMULARIOS EN HTML
Etiquetas principales
de un formulario
- <form>: Es la etiqueta contenedora principal.
Define el inicio y el fin del formulario. Sus atributos más importantes
son action (la dirección URL donde se enviarán los datos) y method (el
método HTTP de envío, como GET o POST).
- <label>: Representa una etiqueta de texto
descriptiva para un campo del formulario. Mejora la accesibilidad y la
usabilidad. Usa el atributo for para conectarse con el id del campo
correspondiente.
- <input>: Es la etiqueta más versátil para crear
campos de entrada de datos. Su atributo type define de qué tipo será el
campo:
- type="text": Cuadro de texto
común.
- type="password": Oculta los
caracteres escritos (para contraseñas).
- type="email": Valida de forma
básica que se escriba un correo válido.
- type="number": Permite ingresar
solo números.
- type="checkbox": Casilla de
verificación múltiple.
- type="radio": Botón de opción
única (seleccionar uno entre varios).
- type="submit": Botón para enviar
el formulario.
- <textarea>: Crea un cuadro de texto grande de varias
líneas. Se usa para mensajes largos o comentarios.
- <select> y <option>: Crean un menú desplegable. <select>
es el contenedor y <option> define cada una de las opciones
disponibles en la lista.
- <button>: Define un botón interactivo. Puede usarse
para enviar, reiniciar o ejecutar acciones personalizadas con JavaScript.
TABLAS EN HTML
Una tabla en
HTML es una estructura que se utiliza para organizar y presentar datos
estructurados en filas y columnas, de manera similar a una hoja de cálculo
EJEMPLO
<!DOCTYPE
html>
<html
lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="estilos.css">
</head>
<body>
<form action="productos.html" method="post"
class="formulario">
<h1>FORMULARIO</h1>
<p><label for="nombre">Nombre: <input
type="text" id="nombre"></label></p>
<p><label for="apellido">Apellido: <input
type="text" id="apellido"></label></p>
<p><label
for="edad">Edad: <input type="text"
id="edad"></label></p>
<P><label
for="observacion">Observacion:<textarea
id="observacion"></textarea></label></P>
<p><label
>plato:<select id="plato">
<option
value="ceviche">ceviche</option>
<option
value="tallarines">tallarines</option>
<option
value="cabrito">cabrito</option>
<option
value="shambar">shambar</option>
<option value="milanesa">milanesa</option>
</select>
</label></p>
<p><b>bebidas</b></p>
<input type="checkbox"
value="gaseosa"><label>gaseosa</label><br>
<input type="checkbox"
value="jugo"><label>jugo</label><br>
<input type="checkbox"
value="agua"><label>agua</label><br>
<input type="checkbox"
value="vino"><label>vino</label><br>
<p><b>tipo
de pago</b></p>
<input type="radio" value="contado" name="tipo de
pago"><label>contado</label><br>
<input type="radio" value="yape" name="tipo de
pago"><label>yape</label><br>
<input type="radio" value="plin" name="tipo de
pago"><label>plin</label><br>
<input type="radio" value="tarjeta" name="tipo de
pago"><label>tarjeta de credito</label><br>
<button
type="submit">Enviar</button>
</form>
</body>
</html>
Etiquetas principales
de una tabla
- <table>: Es la etiqueta contenedora principal.
Define el inicio y el fin de la tabla.
- <tr> (Table Row): Define una fila dentro de la tabla. Todo
el contenido (celdas y encabezados) debe ir dentro de una fila.
- <th> (Table Header): Define una celda de encabezado. Por
defecto, el texto se muestra en negrita y centrado. Se utiliza en la
primera fila o columna para dar título a los datos.
- <td> (Table Data): Define una celda de datos estándar.
Contiene el contenido real de la tabla (texto, números, imágenes, etc.).
<!DOCTYPE html>
<html lang="en">
<head>
<meta
charset="UTF-8">
<meta
name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Document</title>
<link
rel="stylesheet" href="estilos2.css">
</head>
<body>
<h1>TABLA DE PRECIOS</h1>
<table border="1"
class="tabla">
<tr>
<th>nacional</th>
<th>internacional</th>
<th>carta</th>
</tr>
<tr>
<td>10</td>
<td>20</td>
<td>30</td>
</tr>
<tr>
<td>40</td>
<td>50</td>
<td>70</td>
</tr>
<tr>
<td>80</td>
<td>90</td>
<td>100</td>
</tr>
</table>
</body>
</html>
CSS:
Css1
body {
margin:
0;
/* Elimina márgenes por defecto del navegador */
display:
flex;
/* Activa el modo Flexbox */
justify-content: center; /* Centra el
formulario horizontalmente */
align-items: center; /*
Centra el formulario verticalmente */
min-height: 100vh;
/* Obliga al body a ocupar el 100% de la altura de la pantalla */
background-color: #f0f2f5; /* Opcional: un
color de fondo agradable */
}
.formulario {
background: white;
padding: 30px;
border-radius:
8px;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); /* Sombra elegante */
}
Css2
.tabla {
width: 50%;
border-collapse: collapse;
font-family: Arial, sans-serif;
}
.tabla th, .tabla td {
border: 1px solid #ddd;
padding: 12px;
text-align: center;
}
.tabla th {
background-color: #007BFF;
color: white;
}
/*
.tabla tbody tr:nth-child(even) {
background-color:
#f9f9f9; /* Da un color alternado a las filas */
JAVASCRIPT:
Un array en JavaScript
(también llamado arreglo o matriz) es una estructura de datos que permite
almacenar múltiples valores en una sola variable, organizados en una lista
ordenada donde cada elemento tiene una posición numérica única llamada índice
(el cual comienza siempre en 0).
METODOS
- push(): Añade uno o más elementos al final del array y devuelve la
nueva longitud de la lista. Modifica el array original.
- pop(): Elimina el último elemento del array y lo devuelve. Modifica
el array original.
- shift(): Elimina el primer elemento del array y lo devuelve, moviendo
todos los demás índices una posición hacia atrás. Modifica el array
original.
- unshift(): Añade uno o más elementos al inicio del array y devuelve la
nueva longitud. Modifica el array original.
- forEach(): Ejecuta una función una vez por cada elemento del array. Se usa
exclusivamente para recorrer la lista, no devuelve un nuevo array.
- map(): Crea un nuevo array con los resultados de aplicar una función
a cada uno de los elementos del array original sin modificarlo.
- filter(): Crea un nuevo array que contiene únicamente los elementos que
cumplen con una condición específica (pasan un filtro).
- find(): Devuelve el primer elemento del array que cumple con la
condición del filtro. Si ningún elemento la cumple, devuelve undefined.
- reduce(): Ejecuta una función reductora sobre cada elemento, devolviendo un único
valor como resultado (por ejemplo, la suma de todos los números del
array).
- includes(): Determina si un array contiene un elemento específico,
devolviendo true o false según corresponda.
EJEMPLO
const
lenguajes = ["JavaScript", "Python", "Java"];
const numeros =[];
// MÉTODOS DE MODIFICACIÓN
lenguajes.push("Go");
console.log(".push() ->",
lenguajes);
lenguajes.pop();
console.log(".pop() ->",
lenguajes);
// MÉTODOS DE ACCESO Y BÚSQUEDA
const tienePython =
lenguajes.includes("Python");
console.log(".includes() ->",
tienePython);
const porcion = lenguajes.slice(0, 2);
console.log(".slice() ->",
porcion);
// MÉTODOS DE ITERACIÓN Y TRANSFORMACIÓN
numeros.forEach(num
=> console.log(".forEach() ->", num));
const
dobles = numeros.map(num => num * 2);
console.log(".map()
->", dobles);
const pares
= numeros.filter(num => num % 2 === 0);
console.log(".filter()
->", pares);
const
mayorQueTres = numeros.find(num => num > 3);
console.log(".find() ->",
mayorQueTres);
const sumaTotal =
numeros.reduce((acumulador, actual) => acumulador + actual, 0);
console.log(".reduce() ->",
sumaTotal);
const algunoNegativo = numeros.some(num
=> num < 0);
console.log(".some()
->", algunoNegativo);
FUNCIONES EN
JAVASCRIPT
Una función en
JavaScript es un bloque de código reutilizable diseñado para realizar una
tarea específica, el cual se ejecuta únicamente cuando es invocado o
"llamado" desde otra parte del script. Elementos principales de una función
- Palabra clave (function): Es la palabra reservada de JavaScript que
se utiliza para declarar o definir una función tradicional.
- Nombre de la función: Es el identificador que se le asigna a la
función para poder invocarla más adelante (por ejemplo, calcularTotal).
- Parámetros: Son variables locales que se colocan entre paréntesis () en la
definición de la función. Actúan como contenedores para recibir la
información externa que la función necesita para operar.
- Argumentos: Son los valores reales y concretos que se le pasan a la función en
el momento exacto en que se la invoca (por ejemplo, en calcularTotal(5,
10), el 5 y el 10 son los argumentos).
- Cuerpo de la función: Es el bloque de código encerrado entre
llaves {} que contiene todas las instrucciones e instrucciones lógicas que
se ejecutarán cuando la función se active.
- Sentencia de retorno (return): Es una directiva opcional que finaliza la
ejecución de la función y devuelve un valor específico al lugar donde fue
llamada. Si no se incluye, la función devuelve undefined.
EJEMPLO 1:
<!DOCTYPE
html>
<html
lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button
onclick="mostrarSaludo()">presioname</button>
<h1 id="textoSaludo"></h1>
<script src="script.js"></script>
</body>
</html>
function mostrarSaludo(){
document.getElementById("textoSaludo").innerText="¡Hola
bienvenido";
}
EJEMPLO 2:
<!DOCTYPE
html>
<html
lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>calculadora simple</h1>
<form
id="formulario">
<label
for="num1">numero 1:</label>
<input type="number" id="num1"
required>
<br><br>
<label for="num2">numero
2</label>
<input type="number" id="num2"
required>
<button type="button"
onclick="calcular()">calcular</button>
</form>
<h3>resultado <span id=resultado>0</span></h3>
<script src="script.js"></script>
</body>
</html>
function
calcular() {
const n1=parseFloat(document.getElementById("num1").value);
const n2=parseFloat(document.getElementById("num2").value);
if(isNaN(n1)||isNaN(n2)){
document.getElementById("resultado").innerText="ingresa
los numeros";
return;
}
const suma=n1+n2;
document.getElementById("resultado").innerText=suma;
}
domingo, 27 de septiembre de 2026
viernes, 25 de septiembre de 2026
diseño web: principios
ETIQUETAS HTML
<nav>: Define un bloque de enlaces
de navegación de la página (como el menú principal o el menú del pie de
página).
<a>: Crea un hipervínculo o enlace. Permite
conectar al usuario con otra página web, un archivo o una sección del mismo
sitio.
<article>: Representa una composición autónoma e
independiente en un documento, que puede ser distribuida o reutilizada por
separado (por ejemplo, un post de un blog o una noticia).
<h1>: Indica el título principal de más alto
nivel en una página. Solo debe usarse uno por documento para mantener una buena
jerarquía.
<section>: Agrupa contenido relacionado por temática
dentro de una página, sirviendo para estructurar el documento en capítulos o
secciones lógicas.
<li>: Representa un elemento o ítem dentro de una
lista, ya sea ordenada o desordenada.
<ul>: Define una lista desordenada, es decir,
una lista de elementos donde el orden no importa y que usualmente se muestra
con viñetas (puntos).
<form>: Crea un formulario interactivo para que
el usuario introduzca datos (como texto o casillas de verificación) y los envíe
a un servidor.
<button>: Representa un botón cliqueable, utilizado
principalmente para enviar formularios o activar funciones interactivas
mediante JavaScript.
Ejemplo
Html con formularios y botones
<!DOCTYPE
html>
<html
lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="/enviar-datos" method="POST">
<!-- Campo de texto para el nombre -->
<label
for="nombre">Nombre:</label>
<input type="text" id="nombre"
name="usuario_nombre" required>
<br><br>
<!-- Campo para el correo electrónico -->
<label for="correo">Correo
electrónico:</label>
<input type="email"
id="correo" name="usuario_correo" required>
<br><br>
<!-- Botón para enviar el
formulario -->
<button type="submit">Enviar
Formulario</button>
</form>
<button
id="botton">fondo</button>
<script
src="script.js"></script>
</body>
</html>
EJEMPLO 2
html con
nav
<!DOCTYPE
html>
<html
lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="estilos.css">
</head>
<body>
<nav class="navbar">
<ul class="nav-links">
<li><a href="#">
nosotros</a></li>
<li><a href="#">
platillos</a></li>
<li><a href="#">
locales</a></li>
<li><a href="#">redes
sociales</a></li>
</ul>
</nav>
<script src="script.js"></script>
EJEMPLO 3
<!DOCTYPE
html>
<html
lang="es">
<head>
<meta charset="UTF-8">
<title>Ejemplo de
Estructura Semántica</title>
<link rel="stylesheet"
href="estilos.css">
</head>
<body>
<!-- 1. <nav>:
Contenedor de la navegación principal del sitio -->
<nav>
<ul>
<li><a href="#inicio">Inicio</a></li>
<li><a
href="#blog">Blog</a></li>
<li><a
href="#contacto">Contacto</a></li>
</ul>
</nav>
<!-- 2. <section>:
Agrupa una sección temática de la página -->
<section
id="blog">
<!-- 3.
<h1>: El título principal de esta sección de noticias -->
<h1>Últimas Noticias de Tecnología</h1>
<!-- 4.
<article>: Contenido independiente y reutilizable (Post 1) -->
<article>
<h2>El futuro de la Inteligencia Artificial</h2>
<p>La IA sigue transformando el desarrollo web de formas sorprendentes,
optimizando tareas repetitivas...</p>
<a href="#leer-mas-1">Leer más</a>
</article>
<!-- Otro
<article> dentro de la misma sección (Post 2) -->
<article>
<h2>Ventajas de usar HTML Semántico</h2>
<p>Escribir código limpio no solo ayuda a otros programadores, sino que
mejora drásticamente el SEO de tu web...</p>
<a href="#leer-mas-2">Leer más</a>
</article>
</section>
<script
src="script.js"></script>
</body>
</html>
CSS
FLEXBOX
Flexbox (Flexible Box
Layout)
Concepto: Es un modelo de diseño unidimensional (orientado
a filas o columnas) pensado para distribuir el espacio y alinear elementos
dentro de un contenedor, incluso cuando sus tamaños son desconocidos o
dinámicos.
Propiedades para el
Contenedor (Padre)
- display: flex;: Activa el contexto flexible en el
contenedor.
- flex-direction: Define la dirección de los elementos (eje
principal). Puede ser row (fila horizontal) o column (columna vertical).
- justify-content: Alinea los elementos a lo largo del eje
principal (horizontal por defecto). Opciones: center, space-between,
space-around, flex-start, flex-end.
- align-items: Alinea los elementos a lo largo del eje secundario (vertical
por defecto). Opciones: center, stretch, flex-start, flex-end.
- flex-wrap: Controla si los elementos se fuerzan en una sola línea o si pueden
pasar a la siguiente línea (wrap).
- gap: Define de forma directa el espacio de separación entre los elementos
del contenedor.
POSITION:
RELATIVE: El elemento permanece en su lugar original, pero puedes moverlo
ligeramente desde esa posición sin afectar a los demás.
ABSOLUTE: El elemento se desconecta por
completo del flujo y flota libremente en la página.
FIXED: El elemento se desconecta del flujo
y se queda "congelado" o pegado en la pantalla, sin importar
cuánto scroll hagas.
EJEMPLOS
body{
background-color: rgb(187, 152, 233);
}
.navbar {
display: flex;
justify-content: space-between; /*
Separa el logo de los enlaces */
align-items: center;
/* Centra todo verticalmente */
background-color: #5c1212;
/* Color de fondo oscuro */
padding: 15px 30px;
/* Espacio interno */
}
.nav-links {
display: flex;
/* Pone los enlaces en línea
horizontal */
list-style: none;
/* Quita los puntos de la lista (bullet
points) */
gap: 20px;
/* Separa los enlaces
entre sí */
}
.nav-links a {
color: #fff;
/* Texto blanco */
text-decoration: none;
/* Quita el subrayado predeterminado */
font-size: 18px;
transition: color 0.3s ease;
/* Transición suave para el efecto hover */
}
/* 5. Efecto al pasar el cursor (Hover) */
.nav-links a:hover {
color: #ff7b00;
/* Cambia a color naranja al pasar el mouse
*/
}
JAVASCRIPT
Tipos de datos: Son las categorías de información que
JavaScript puede entender y procesar. Los más comunes son los números (number),
los textos (string), los valores lógicos de verdadero o falso (boolean), y la
ausencia de valor (null o undefined).
Caracteres de
comparación: Son operadores
matemáticos y lógicos que se usan para contrastar dos valores y devolver un
resultado verdadero o falso. Por ejemplo: == (igualdad débil), === (igualdad
estricta), != (diferente), > (mayor que) y < (menor que).
console.log(): Es una función especial que se utiliza para mostrar
mensajes, valores o errores en la consola del navegador. Los programadores
la usan como una herramienta de diagnóstico para espiar qué está pasando dentro
del código mientras se ejecuta.
Javascritp con tipos de datos
console.log("ejemplo");
var nombre= "joaquin";
var numero =14;
var pago=true;
var peso=40.43;
alert("este es un ejemplo de
javascritp "+ nombre);
console.log("nombre " + nombre +
" " + typeof nombre);
console.log("numero " + numero +
" " + typeof numero);
console.log("pago " + pago +
" " + typeof pago);
console.log("peso " + peso +
" " + typeof peso);
console.log("conparativos");
console.log(7>4);
console.log(45<1);
var x=4;
console.log(4==x);
console.log(7==="7")
SENTENCIAS DE CONTROL
Bucle if (Condicional): Es una estructura de control que permite tomar
decisiones en el código. Evalúa si una condición es verdadera para ejecutar
un bloque de instrucciones; si es falsa, puede saltarse ese código o ejecutar
una alternativa (else).
Bucle for (Ciclo): Es una estructura que sirve para repetir un
bloque de código un número específico de veces. Utiliza un contador interno
que va aumentando o disminuyendo en cada vuelta hasta que se cumple la
condición de parada
Javascript con if
var numero1=prompt("ingrese el numero
1");
var numero2=prompt("ingrese el numero
2");
var total=numero1+numero2;
if(total>=50){
console.log("el numero
es alto");
}
else{
console.log("el numero
es bajo");
}
Javascript
for(let
i=1;i<=5;i++){
console.log("numero ",i);
}
for(let
i=1;i<=5;i++){
console.log("*".repeat(i));
}
for
(let i = 0; i < 5; i++) {
const espacios = ' '.repeat(5 - i - 1);
const asteriscos = '*'.repeat(2 * i + 1);
console.log(espacios + asteriscos);
}
Javascript
con getlementby
const
respuestas=document.getElementById("botton");
document.body.style.transition="background-color
0.7s ease";
respuestas.onclick
= () => document.body.style.backgroundColor="blue";
domingo, 20 de septiembre de 2026
viernes, 28 de agosto de 2026
INTRODUCCION A LA PROGRAMACION CON PYTHON
Python
Python es un lenguaje de programación de
alto nivel, multiparadigma y de código abierto,
diseñado para ser legible y eficiente. Su sintaxis limpia facilita el
desarrollo de software complejo, desde aplicaciones web hasta scripts de
automatización. Es el estándar de la industria en inteligencia artificial,
ciencia de datos y aprendizaje automático gracias a su extenso ecosistema
de bibliotecas. Además, al ser interpretado y multiplataforma, permite
ejecutar el mismo código en casi cualquier sistema operativo sin necesidad de
modificarlo.
Tipos numéricos
- Enteros (int): Almacenan números
sin decimales, positivos o negativos, sin límite de tamaño. Ejemplo: 42,
-3.
- Decimales (float): Almacenan
números con punto decimal. Ejemplo: 3.14, -0.01.
- Complejos (complex): Tienen una
parte real y una imaginaria con la letra j.
Texto y lógica
- Cadenas de texto (str): Secuencias
de caracteres delimitadas por comillas simples o dobles. Ejemplo:
"Hola mundo".
- Booleanos (bool): Representan
valores de verdad: True (verdadero) o False (falso).
Colecciones de datos
- Listas (list): Colecciones
ordenadas y mutables que pueden contener varios tipos de datos, definidas
entre corchetes. Ejemplo: [1, "dos", 3.0].
- Tuplas (tuple): Colecciones
ordenadas pero inmutables (no se pueden modificar tras crearlas),
definidas entre paréntesis. Ejemplo: (1, 2, 3).
- Conjuntos (set): Colecciones
desordenadas de elementos únicos, definidas entre llaves. Ejemplo:
{"a", "b", "c"}.
- Diccionarios (dict): Almacenan
pares de clave: valor. Ejemplo: {"nombre": "Ana",
"edad": 25}.
Operadores Aritméticos
Sirven para realizar
cálculos matemáticos básicos:
- Suma (+): 5 + 2 da 7 (también une textos o listas).
- Resta (-): 5 - 2 da 3.
- Multiplicación (*): 5 * 2 da 10.
- División (/): 5 / 2 da 2.5 (siempre devuelve un número
decimal).
- División entera (//): 10 // 3 da 3 (descarta los decimales).
- Módulo (%): 10 % 3 da 1 (devuelve el resto de una división).
- Exponente (**): 2 ** 3 da 8 (eleva a la potencia).
print("hola
mundo")
#SOY UN COMENTARIO
print("operaciones")
suma=5+4
resta=40-45
multiplicacion=4*7
division=14/4
divisione=14//4
modulo=10%3
exponente=2**3
print(suma, resta)
print(division)
print(modulo)
print(exponente)
ENTRADA Y SALIDA DE DATOS
La entrada y salida de datos se
realiza principalmente mediante las funciones input() para capturar información
del usuario y print() para mostrar resultados en la pantalla.
nombre = input("¿Cómo te llamas?:
")
edad_texto = input("¿Cuántos años
tienes?: ")
edad = int(edad_texto) # Conversión de texto a número entero
print(f"Hola {nombre}, el próximo año
tendrás {edad + 1} años.")
print("formas de
impresion")
nombre="josue"
edad=31
print("hola",nombre)
#imprimir con cadenas
formateadas
print(f"me llamo
{nombre} y tengo {edad} años")
print("hola",
end=" ")
print("mundo")
print("33","14","54",sep="/")
#castear numeros
# Pedir un número decimal
al usuario
numero =
float(input("Por favor, ingresa un número decimal: "))
print(f"El número
ingresado es: {numero}")
print(f"El tipo de
dato es: {type(numero)}")
STRINGS
Un string (o cadena de texto) en
Python es una secuencia ordenada de caracteres (letras, números, espacios o
símbolos) que se utiliza para representar texto. Se define encerrando el
contenido entre comillas simples ('...'), dobles ("...") o triples ("""..."""
para textos de varias líneas).
Los strings en Python son inmutables,
lo que significa que no se pueden modificar directamente después de crearlos.
CODIGO
nombre = 'Carlos'
ciudad = "Lima"
frase1 = "Ella dijo:
'Hola, ¿cómo estás?'"
frase2 = 'El libro se
llama "Cien años de soledad".'
poema =
"""Esto es un string
que mantiene los saltos
de línea
exactamente como los
escribes."""
espacio = "
"
saludo = "Hola
" + "Mundo" # Resultado: "Hola Mundo"
eco = "Ja" * 3
# Resultado: "JaJaJa"
METODOS
1. upper() y lower()
- upper(): Convierte todos los caracteres a
mayúsculas.
- lower(): Convierte todos los caracteres a
minúsculas.
2. capitalize()
Convierte el primer carácter de la cadena en mayúscula y el resto en
minúsculas
3. strip()
Elimina los espacios en blanco (u otros caracteres especificados) al
principio y al final del texto
4. replace()
Reemplaza una subcadena por otra un número
determinado de veces.
5. split()
Divide la cadena en una
lista de subcadenas usando un separador específico (por defecto, los espacios
en blanco).
6. join()
Une los elementos de un iterable (como una lista)
usando el string actual como separador
7. find()
Busca una subcadena
dentro del texto y devuelve el índice de su primera aparición (o -1 si no la
encuentra)
CODIGO:
texto = "Hola Mundo"
print(texto.upper()) # Salida: HOLA MUNDO
print(texto.lower()) # Salida: hola mundo
texto = "python es genial"
print(texto.capitalize()) # Salida: Python
es genial
texto = " Hola Python "
print(texto.strip()) # Salida: "Hola
Python"
texto = "Me gusta Java"
print(texto.replace("Java",
"Python")) # Salida: Me gusta Python
texto = "manzana,pera,plátano"
print(texto.split(",")) # Salida:
['manzana', 'pera', 'plátano']
frutas = ["manzana", "pera",
"plátano"]
print("-".join(frutas)) # Salida:
manzana-pera-plátano
texto = "Aprender Python"
print(texto.find("Python")) # Salida: 9
NUMEROS ALEATORIOS
Para generar un números aleatorios se importa la librería integrada random y usa la función random.randint(min, max) para enteros o random.random() para decimales entre 0 y 1.
EJEMPLOS:
print("ALEATORIOS")
import random
# Generar un entero entre 1 y 10 (ambos incluidos)
numero_entero = random.randint(1, 10)
print(f"Entero aleatorio (1-10): {numero_entero}")
# Generar un número par entre 0 y 100
par_aleatorio = random.randrange(0, 101, 2)
print(f"Número par aleatorio (0-100): {par_aleatorio}")
# Generar un decimal entre 0.0 y 1.0
decimal_cero_uno = random.random()
print(f"Decimal entre 0 y 1: {decimal_cero_uno}")
# Generar un decimal en un rango específico (ej. entre 5.5 y 10.5)
decimal_rango = random.uniform(5.5, 10.5)
print(f"Decimal en rango (5.5-10.5): {decimal_rango}")
frutas = ["manzana", "plátano", "naranja", "uva", "sandía"]
# Elegir UN elemento al azar
opcion = random.choice(frutas)
print(f"Fruta elegida: {opcion}")
# Elegir VARIOS elementos sin que se repitan (ej. 3 frutas)
muestra = random.sample(frutas, 3)
print(f"Muestra de 3 frutas: {muestra}")
# Mezclar una lista original en orden aleatorio
baraja = [1, 2, 3, 4, 5]
random.shuffle(baraja)
print(f"Lista mezclada: {baraja}")
SLICING
El slicing (o rebanado) en Python es
una función que permite extraer porciones de secuencias como listas, tuplas o
cadenas de texto usando la sintaxis [inicio:fin:paso]. El valor de inicio se
incluye, el fin se excluye, y el paso define el tamaño del salto
Sintaxis Básica
La estructura general del rebanado es:
secuencia[inicio : fin : paso]
- inicio: El índice donde empieza el
corte (se incluye). Si se omite, empieza desde el primer elemento (0).
- fin: El índice donde termina el
corte (no se incluye). Si se omite, llega hasta el final de la secuencia.
- paso: El tamaño del salto entre
cada elemento. Si se omite, el valor por defecto es 1
EJEMPLOS;
frutas = ["Manzana",
"Plátano", "Naranja", "Mango", "Uvas"]
print(frutas[1:4])
# Resultado: ['Plátano', 'Naranja',
'Mango']
numeros = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
print(numeros[::2])
# Salta de 2 en 2: [0, 2, 4, 6, 8]
print(frutas[::-1])
# Resultado: ['Uvas', 'Mango', 'Naranja',
'Plátano', 'Manzana']
LISTAS
Una lista en Python es una
estructura de datos integrada que permite almacenar múltiples elementos en
una sola variable de forma ordenada y mutable. Esto significa que los
elementos guardan un orden específico basado en un índice numérico (que
comienza en 0) y que puedes modificar, añadir o eliminar elementos después de
haber creado la lista.
EJEMPLO:
# Ejemplo de una lista
mis_frutas = ["manzana",
"plátano", "cereza"]
FUNCIONES
1. len(lista) — Obtener el tamaño de la
lista
Es una función global de Python que te
devuelve la cantidad total de elementos que contiene la lista.
numeros = [10, 20, 30, 40]
total = len(numeros)
print(total) # Resultado: 4
2. .append(elemento) — Agregar al final
Este método añade un nuevo elemento únicamente
al final de la lista existente.
animales = ["perro",
"gato"]
animales.append("loro")
print(animales) # Resultado: ['perro', 'gato', 'loro']
3. .insert(índice, elemento) — Insertar
en una posición específica
A diferencia de .append(), este método te
permite elegir la posición exacta (índice) donde deseas colocar el nuevo
elemento, moviendo el resto hacia la derecha.
colores = ["rojo",
"azul", "verde"]
# Inserta "amarillo" en la
posición 1 (el segundo lugar)
colores.insert(1, "amarillo")
print(colores) # Resultado: ['rojo', 'amarillo', 'azul',
'verde']
4. .remove(elemento) — Eliminar por
valor
Busca el elemento que le indiques dentro de
la lista y elimina su primera aparición. Si el elemento no existe,
arrojará un error.
coches = ["Toyota",
"Ford", "Mazda", "Ford"]
coches.remove("Ford") # Elimina solo el primer "Ford" que
encuentra
print(coches) # Resultado: ['Toyota', 'Mazda', 'Ford']
5. .pop(índice) — Eliminar por posición
y extraer
Elimina el elemento que se encuentra en el
índice indicado y te lo devuelve (por si quieres guardarlo en otra
variable). Si no le pasas ningún índice entre los paréntesis, eliminará de
forma automática el último elemento.
tareas = ["programar",
"comer", "dormir"]
ultima_tarea = tareas.pop() # Elimina "dormir" y lo guarda en
la variable
print(tareas) # Resultado: ['programar', 'comer']
print(ultima_tarea) # Resultado: "dormir"
6.sort() — Ordenar la lista (Sorter)
Este método ordena los elementos de la
lista de forma ascendente (de menor a mayor para números, y en orden
alfabético para textos).
# Ejemplo con números
numeros = [5, 1, 9, 3]
numeros.sort()
print(numeros) # Resultado: [1, 3, 5, 9]
# Ejemplo con texto (Orden alfabético)
letras = ["b", "z",
"a"]
letras.sort()
print(letras) # Resultado: ['a', 'b', 'z']
* Ordenar al revés (Descendente)
Si pasas el argumento reverse=True dentro
de los paréntesis, puedes ordenar de mayor a menor.
puntuaciones = [10, 50, 20]
puntuaciones.sort(reverse=True)
print(puntuaciones) # Resultado: [50, 20, 10]
7 .reverse() — Poner la lista en reversa
Este método simplemente invierte el
orden físico de los elementos en la lista, sin importar si están ordenados
alfabética o numéricamente. El que estaba al último pasa a ser el primero, el
penúltimo pasa a ser el segundo, y así sucesivamente.
# Ejemplo de reversa pura
ingredientes = ["tomate",
"queso", "harina"]
ingredientes.reverse()
print(ingredientes) # Resultado: ['harina', 'queso', 'tomate']
ESTRUCTURAS CONDICIONALES
IF, ELIF, ELSE:
El if es la estructura condicional
más básica en programación y sirve para ejecutar un bloque de código solo si
se cumple una condición específica (es decir, si la condición es
verdadera). Si la condición no se cumple, el programa simplemente ignora ese
código y continúa con el resto de tu archivo.
Se puede entender como un interruptor: si
la condición es verdadera, la luz del código se enciende; si es falsa,
se queda apagada.
EJEMPLO:
edad = 15
print("Puedes pasar, eres mayor de edad.")
elif edad >= 14:
print("Puedes pasar solo a la zona de adolescentes.")
else:
print("Lo siento, eres muy menor para entrar.")
MATCH-CASE:
El bloque match evalúa una variable y
compara su valor contra distintos patrones usando la palabra clave case. Si
ninguna opción coincide, se puede usar un guion bajo (_) como valor por defecto.
EJEMPLO
match dia:
case "lunes":
print("Es el primer día laboral.")
case "viernes":
print("¡Por fin es viernes!")
case _:
print("Es otro día de la semana.")
BUCLES ITERATIVOS
FOR
El bucle for en Python es una
estructura de control que se utiliza para iterar (recorrer) los elementos de
una secuencia de forma secuencial. Una secuencia puede ser una lista,
un string, un diccionario, un set o un rango numérico.
A diferencia de otros lenguajes de
programación, el for en Python funciona como un foreach, lo que
significa que pasa por cada elemento directamente en lugar de usar un contador
numérico obligatorio.
EJEMPLOS:
print("bucle for")
# Iterar sobre una lista
frutas = ["manzana",
"banana", "cereza"]
for fruta in frutas:
print(fruta)
# Imprime números del 0 al 4
for i in
range(5):
print(i)
#posicion con enumerate
for indice, fruta in enumerate(frutas):
print(f"Índice {indice}:
{fruta}")
for i in
range(1, 6):
print(i)
#
Resultado: 1, 2, 3, 4, 5
for i in
range(5, 0, -1):
print(i)
#
Resultado: 5, 4, 3, 2, 1
for i in
range(0, 26, 5):
print(i)
#
Resultado: 0, 5, 10, 15, 20, 25
for i in
range(50, 19, -5):
print(i)
# Resultado: 50, 45, 40, 35, 30, 25, 20
suma_total = 0
for i in
range(5, 21, 5): # Valores: 5, 10, 15, 20
suma_total += i
print(f"Sumando {i}, el
total parcial es: {suma_total}")
print(f"Resultado final:
{suma_total}")
# Resultado final: 50 (5 + 10 + 15 + 20)
# 1. Creamos la variable externa que
acumulará los saltos
numero = 0
# 2. El bucle define cuántas veces queremos
que se repita la acción
for _ in range(5): # Se ejecutará 5
veces
print(numero)
numero += 2 #
Sumamos 2 al valor actual de la variable externa
#En Python, cuando usas el guion bajo _ en
el for, le estás diciendo al
# programa que no necesitas usar la
variable del rango para nada.
WHILE
El bucle while en Python es una
estructura de control que repite un bloque de código mientras una condición
específica sea Verdadera (True).
A diferencia del bucle for (que recorre un
número fijo de elementos), el while se utiliza cuando no sabes de antemano
cuántas veces se tendrá que repetir el bucle, ya que depende completamente
de que la condición cambie en algún momento para poder detenerse.
EJERCICIOS:
print("bucle while")
contador = 1
while contador <= 5:
print(f"Número:
{contador}")
contador += 1 #
Incremento para evitar un bucle infinito
#bucle while true para hacer un bucle en
que se paraliza cuando ponemos un valor
while True:
numero =
int(input("Introduce un número positivo (o negativo para salir): "))
print(f"Ingresaste:
{numero}")
# Condición de salida
evaluada al final del ciclo
if numero < 0:
print("¡Bucle terminado!")
break
while True:
print("\n--- MENÚ ---")
print("1. Saludar")
print("2. Salir")
opcion = input("Elige
una opción: ")
if opcion == "1":
print("¡Hola! Qué tengas un gran día.")
elif opcion == "2":
print("Saliendo del programa...")
break #
Rompe el bucle obligatoriamente
else:
print("Opción
no válida, intenta de nuevo.")
#while con texto para salir
entrada = ""
while entrada.lower() != "salir":
entrada = input("Escribe
algo (o 'salir' para terminar): ")
if entrada.lower() !=
"salir":
print(f"Repitiendo: {entrada}")
print("Proceso finalizado.")
#bucle para salir con texto 2
while True:
# 1. Se ejecuta esta parte
del código obligatoriamente al menos una vez.
accion = input("¿Quieres
continuar? (si/no): ")
# 2. Se evalúa la condición
de salida.
if accion == "no":
print("Saliendo del bucle...")
break #
3. El 'break' detiene el bucle inmediatamente y salta al final.
# 4. El programa continúa aquí después del
break.
print("Programa
terminado.")
while True:
texto = input("Escribe 'salir' para terminar: ")
if texto == "salir":
break # Rompe el bucle y sale del programa