PROGRAMACION
FUNDAMENTOS BASICOS
Zully Andrea Guzmán Ospina
ÍNDICE
01 Sobre nosotros 05 La marca
02 El equipo 06 Objetivos
03 Servicios 07 Plataforma
04 Datos 08 Contacto
INTRODUCCIÓN
¿QUÉ ES PROGRAMACIÓN
Es el proceso de crear instrucciones que una computadora puede
ejecutar.
Se usan lenguajes como Python, Java o JavaScript.
Permite automatizar tareas, resolver problemas y crear
tecnología.
Base de aplicaciones, páginas web y sistemas inteligentes.
ALGORITMO Y LOGICA DE PROGRAMACIÓN
ALGORITMO
EJ EN LENGUAJE NATURAL
Algoritmo: Secuencia de pasos para resolver un Objetivo: Sumar los primeros n números enteros.
problema. 1. Iniciar la variable suma en 0.
Debe ser claro, preciso, eficiente y terminar. 2. Para cada número i desde 1 hasta n:
Lógica de programación: Pensamiento Sumar i a suma.
estructurado paso a paso. 3. Mostrar el resultado final (suma).
PSEUDOCÓDIGO
EJEMPLO
Definir función suma_numeros(n):
suma = 0
suma = 0
para i en 1 hasta n:
Para i desde 1 hasta n:
suma = suma + i
suma = suma + i
Retornar suma
VARIABLES Y TIPOS DE DATOS
VARIABLE 3. string (Cadena de texto)
Representa secuencias de caracteres, como palabras,
Espacio que guarda un dato. frases o números entre comillas.
La etiqueta es el nombre de la variable. Se escriben entre comillas simples (‘ ’) o dobles (“ ”).
Lo que hay dentro de la caja es el valor almacenado Ejemplos: "Hola", "1234"
TIPOS COMUNES 4. bool (Booleano)
1. int (Entero) Solo puede tener dos valores: True (verdadero) o False
(falso).
Representa números enteros, es decir, sin decimales.
Se usa para tomar decisiones o evaluar condiciones.
Ejemplos: -5, 0, 42
Ejemplo en python: es_mayor = True
Se usa cuando no necesitas fracciones, como para
contar personas o sumar unidades.
5. list o array (Lista o arreglo)
2. float (Flotante o Decimal) Es una colección ordenada de elementos.
Puede contener números, textos u otros tipos de datos.
Representa números reales con parte decimal.
Se escriben entre corchetes y separados por comas.
Ejemplos: 3.14, -0.5, 2.0
Ejemplo en python:
Útil para precios, porcentajes, medidas, etc.
numeros = [1, 2, 3]
palabras = ["hola", "mundo"]
HTML
PYTHON
OPERADORES Y ESTRUCTURA DE CONTROL
OPERADORES ESTRUCTURA DE CONTROL
Aritméticos: +, -, *, /, % if / else: toma decisiones.
Comparación: ==, !=, >, < for: repite con cantidad conocida.
Lógicos: and, or, not while: repite mientras se cumpla una condición.
EJEMPLO EJEMPLO
Python Python
a = 5 if edad >= 18:
b = 3 print("Mayor de edad")
print(a + b) # 8
Python
for i in range(5):
print(i)
HTML Y CSS
HTML y CSS son los pilares del desarrollo web:
HTML (HyperText Markup Language) estructura el contenido de una página.
CSS (Cascading Style Sheets) define su presentación y estilo visual
Estructura
<!DOCTYPE html>: Declara que es un documento HTML5.
<html>: Raíz del documento.
<head>: Información que no se ve (título, estilos, metadatos).
<body>: Contenido visible de la página.
Etiquetas y elementos fundamentales de HTML
<p>: Párrafos.
<h1> a <h6>: Títulos (de mayor a menor jerarquía).
<a href="URL">: Enlaces.
<img src="[Link]" alt="Texto alternativo">: Imágenes.
Los elementos HTML tienen etiquetas de apertura y cierre.
Algunos son vacíos, como <img> o <br> (no tienen cierre).
HTML SEMANTICO
El HTML semántico usa etiquetas con significado que describen el propósito
del contenido. Mejora:
La legibilidad del código.
La accesibilidad para lectores de pantalla.
El posicionamiento en buscadores (SEO).
Ejemplos de etiquetas semánticas:
<header>: Encabezado de la página.
<nav>: Navegación.
<main>: Contenido principal.
<section>: Sección temática.
<article>: Contenido independiente (ej. blog).
<footer>: Pie de página.
SELECTORES Y PROCESOS CSS
Por etiqueta
CSS controla cómo se ve el contenido HTML p { color: blue; }
(colores, márgenes, fuentes, etc.).
Por clase (.nombreClase)
Sintaxis básica .titulo { font-size: 20px; }
selector { Por ID (#nombreID)
propiedad: valor; #principal { text-align: center; }
Por atributo
Selector: Indica qué elemento se quiere estilizar. input[type="text"] { border: 1px solid gray; }
Propiedad: Qué aspecto cambiar (ej. color).
Valor: Qué estilo aplicar. Combinados
div p { color: red; }
JAVASCRIPT (JS)
JavaScript (JS) es un lenguaje de programación que se usa para hacer
que las páginas web sean interactivas y dinámicas. Permite responder a
eventos, modificar el contenido y comunicarse con servidores.
¿Cómo se integra en HTML?
Hay 3 formas principales:
1. Inline (dentro de una etiqueta HTML):
<button onclick="alert('Hola')">Clic aquí</button>
2. Interno (en la misma página, usando <script>):
<script>
alert("Bienvenido");
</script>
3. Externo (en otro archivo .js):
<script src="[Link]"></script>
ESTRUCTURAS DE OPERADORES
CONTROL
Aritméticos: +, -, *, /, %, **
Comparación: ==, ===, !=, >, <, >=, <=
Lógicos: &&, ||, !
VARIABLES
var: forma antigua (evitar su uso).
let: valor que puede cambiar.
const: valor constante que no cambia.
TIPOS DE DATOS
1. Number: 10, 3.14
2. String: "Hola mundo", 'JavaScript'
3. Boolean: true, false
4. Null: valor intencionalmente vacío.
Ejemplo:
5. Undefined: variable declarada pero sin valor.
6. Object / Array: estructuras más complejas.
let nombre = "Andrea";
const edad = 25;
let activo = true;
MANIPULACIÓN BÁSICA DEL DOM
El DOM (Document Object Model) es la representación del contenido
HTML en forma de objetos que JavaScript puede modificar.
Acciones comunes:
1. Acceder a un elemento:
let titulo = [Link]("miTitulo");
[Link] el contenido:
[Link] = "Nuevo texto";
[Link] estilo:
[Link] = "blue";
[Link] eventos:
[Link]("boton").addEventListener("click", function() {
¡
alert(" Hiciste clic!");
});
MUCHAS
GRACIAS