GEARSOFT.CA
Home
About Us
Services
Contact
CURSO DE PROGRAMACIÓN WEB BÁSICA
Tu viaje para crear en internet
¿Listos para construir sus primeras páginas web?
Empecemos
Ingeniero Mecanico, Auditor Interno ISO 9001, Desarrollador de Software, Fundador y CEO de GearSoftCA y Estudiante de la maestría de Gerencia de proyectos industriales Javier Alburges
FRONTEND Y BACKEND: LAS DOS CARAS DE LA WEB
GEARSOFT.CA
Home
About Us
Services
Contact
¿Qué es el Desarrollo Web?
Lo que ves y con lo que interactúas (HTML, CSS, JavaScript).
Frontend Developer
Lo que sucede "detrás de escena" (servidores, bases de datos).
Backend Developer
El desarrollo web es el proceso de crear y mantener sitios web y aplicaciones web. Esto abarca desde la codificación simple de una página web estática hasta la creación de complejas aplicaciones web, redes sociales y plataformas de comercio electrónico.
GEARSOFT.CA
Home
About Us
Services
Contact
¿QUÉ ES HTTP?
Cómo Funciona Internet
HTTP significa HyperText Transfer Protocol (Protocolo de Transferencia de Hipertexto). Es el conjunto de reglas o el "idioma" que utilizan los navegadores web (como Chrome, Firefox, Safari) y los servidores web para comunicarse entre sí.
HERRAMIENTAS ESENCIALES DEL DESARROLLADOR
GEARSOFT.CA
Home
About Us
Services
Contact
VS Code
CONTROL DE VERSIONES: GIT Y GITHUB
GEARSOFT.CA
Home
About Us
Services
Contact
Guardando y Compartiendo tu Código
PENSAMIENTO LÓGICO: EL CORAZÓN DE LA PROGRAMACIÓN
GEARSOFT.CA
Home
About Us
Services
Contact
SÍMBOLOS BÁSICOS DE LOS DIAGRAMAS DE FLUJO
GEARSOFT.CA
Home
About Us
Services
Contact
Recetas para Resolver Problemas
PRIMEROS PASOS EN JAVASCRIPT
GEARSOFT.CA
Home
About Us
Services
Contact
Variables: "Cajas" para guardar información (let nombre = "Juan";).
Operadores: Suma, resta, multiplicación, división.
Variables y Tipos de Datos
Tipos de Datos:
INTERACTUANDO CON EL USUARIO
GEARSOFT.CA
Home
About Us
Services
Contact
console.log("Mensaje");: Muestra información en la consola (para ti).
prompt("Tu nombre:");: Pide información al usuario.
alert("¡Hola!");: Muestra un mensaje emergente al usuario.
LO QUE APRENDIMOS: FUNDAMENTOS SÓLIDOS
GEARSOFT.CA
Home
About Us
Services
Contact
Resumen del Módulo 1
Entendemos el ecosistema web.
Tenemos nuestras herramientas listas.
Pensamos lógicamente.
¡Y escribimos nuestro primer JavaScript!
EL ESQUELETO DE LA WEB: HTML
GEARSOFT.CA
Home
About Us
Services
Contact
HTML: El Lenguaje de Marcado
HTML (HyperText Markup Language) no es un lenguaje de programación.
Define la estructura y el contenido de tu página web.
Todo lo que ves en una web (texto, imágenes, botones) está en HTML.
TU PRIMERA PÁGINA HTML
GEARSOFT.CA
Home
About Us
Services
Contact
<!DOCTYPE html>: Tipo de documento.
<html>: Contenedor principal.
<head>: Información para el navegador (título, CSS, JS).
<body>: ¡Todo el contenido visible de tu página!
ORGANIZANDO TU CONTENIDO TEXTUAL
GEARSOFT.CA
Home
About Us
Services
Contact
<h1> a <h6>: Encabezados (títulos y subtítulos).
<p>: Párrafos de texto.
<strong> / <b>: Texto en negrita.
<em> / <i>: Texto en cursiva.
LISTAS ORDENADAS Y DESORDENADAS
GEARSOFT.CA
Home
About Us
Services
Contact
<ul> (unordered list): Lista sin orden específico (viñetas).
<ol> (ordered list): Lista con orden numérico.
<li> (list item): Cada elemento dentro de una lista.
CONECTANDO Y MOSTRANDO CONTENIDO
GEARSOFT.CA
Home
About Us
Services
Contact
Enlaces (<a>): Para ir a otras páginas o secciones (href).
Imágenes (<img>): Para mostrar fotos o gráficos (src, alt).
ETIQUETAS QUE CUENTAN UNA HISTORIA
GEARSOFT.CA
Home
About Us
Services
Contact
Usar etiquetas como <header>, <nav>, <main>, <footer>.
Ayuda a los navegadores y lectores de pantalla a entender tu contenido.
Mejora el SEO (optimización para motores de búsqueda).
FORMULARIOS BÁSICOS
GEARSOFT.CA
Home
About Us
Services
Contact
<form>: Contenedor del formulario.
<input>: Campos de entrada (texto, email, contraseña, botón de envío).
<button>: Botones para enviar el formulario.
¡TU PRIMERA ESTRUCTURA WEB!
GEARSOFT.CA
Home
About Us
Services
Contact
Resumen del Módulo 2
Sabemos construir el esqueleto de cualquier página.
Organizamos texto, imágenes y enlaces.
Creamos tablas y formularios básicos.
CSS: EL ESTILISTA DE TU PÁGINA
GEARSOFT.CA
Home
About Us
Services
Contact
Dando Estilo: CSS
CSS (Cascading Style Sheets) es el lenguaje para el diseño y la presentación.
Controla colores, fuentes, espaciado, diseño y mucho más.
TRES FORMAS DE USAR CSS
GEARSOFT.CA
Home
About Us
Services
Contact
Aplicando Estilos
1.Inline: Directamente en la etiqueta HTML (no recomendado para grandes proyectos).
2. Interno: En la sección <head> del HTML.
3.Externo: En un archivo .css separado (¡la mejor práctica!).
APUNTANDO A LOS ELEMENTOS CORRECTOS
GEARSOFT.CA
Home
About Us
Services
Contact
Selectores CSS
Por Etiqueta: p { color: blue; }
Por Clase: .mi-clase { font-size: 18px; }
Por ID: #mi-id { background-color: yellow; }
PERSONALIZA TU DISEÑO
GEARSOFT.CA
Home
About Us
Services
Contact
<color: Color del texto.
background-color: Color de fondo.
font-family: Tipo de letra.
font-size: Tamaño de la letra.
CADA ELEMENTO ES UNA CAJA
GEARSOFT.CA
Home
About Us
Services
Contact
Todos los elementos HTML son cajas con:
CÓMO SE MUESTRAN LOS ELEMENTOS
GEARSOFT.CA
Home
About Us
Services
Contact
block: Ocupa todo el ancho disponible (párrafos, divs).
inline: Ocupa solo el espacio necesario (enlaces, <strong>).
inline-block: Como inline, pero puedes controlar ancho y alto.
DISEÑANDO SECCIONES FLEXIBLES
GEARSOFT.CA
Home
About Us
Services
Contact
Una herramienta poderosa para organizar elementos en una fila o columna.
Conceptos clave: Contenedor Flex, Ítems Flex.
Alineación de ítems (horizontal y vertical).
ADAPTANDO TU WEB A CUALQUIER PANTALLA
GEARSOFT.CA
Home
About Us
Services
Contact
Tu web debe verse bien en móviles, tablets y computadoras.
Usamos max-width: 100% para imágenes.
Unidades relativas (%, em, rem) para tamaños flexibles.
¡TU WEB TIENE ESTILO!
GEARSOFT.CA
Home
About Us
Services
Contact
Resumen del Módulo 3
Sabemos estilizar cualquier elemento.
Controlamos el diseño con Box Model y Flexbox.
Nuestras páginas se ven bien en cualquier dispositivo.
JAVASCRIPT: EL CEREBRO DE LA WEB
GEARSOFT.CA
Home
About Us
Services
Contact
JavaScript es un lenguaje de programación.
Hace que tu web sea interactiva: botones que hacen cosas, animaciones, datos que cambian.
TOMANDO DECISIONES EN TU CÓDIGO
GEARSOFT.CA
Home
About Us
Services
Contact
if: Si una condición es verdadera, haz algo.
else if: Si la primera no es, prueba esta otra.
else: Si ninguna de las anteriores es verdadera, haz esto.
AUTOMATIZANDO TAREAS
GEARSOFT.CA
Home
About Us
Services
Contact
for: Repite un bloque de código un número específico de veces.
while: Repite un bloque de código mientras una condición sea verdadera.
BLOQUES DE CÓDIGO REUTILIZABLES
GEARSOFT.CA
Home
About Us
Services
Contact
Una función es un conjunto de instrucciones que realiza una tarea específica.
Puedes "llamarlas" cuando las necesites, evitando repetir código.
Pueden recibir información (parámetros) y devolver resultados.
ALMACENANDO COLECCIONES DE DATOS
GEARSOFT.CA
Home
About Us
Services
Contact
Arrays: Listas ordenadas de elementos ([item1, item2, item3]).
Objetos: Colecciones de propiedades (clave-valor) que describen algo ({ nombre: "Juan", edad: 30 }).
CAMBIANDO LA PÁGINA DINÁMICAMENTE
GEARSOFT.CA
Home
About Us
Services
Contact
El DOM (Document Object Model) es la representación de tu HTML en JavaScript.
Puedes seleccionar elementos, cambiar su texto, sus estilos o incluso eliminarlos.
ADDEVENTLISTENER: ESCUCHANDO AL USUARIO
GEARSOFT.CA
Home
About Us
Services
Contact
Los eventos son acciones que ocurren en la web (clics, teclado, envío de formularios).
addEventListener te permite ejecutar código cuando un evento sucede.
¡TU WEB INTERACTIVA!
GEARSOFT.CA
Home
About Us
Services
Contact
Resumen del Módulo 4
Dominamos la lógica para que nuestra web "piense".
Podemos hacer que responda a los usuarios.
Sabemos manipular la página con JavaScript.
¡Tu Web Interactiva!
PROYECTOS WEB BÁSICOS
GEARSOFT.CA
Home
About Us
Services
Contact
Proyectos: La Mejor Forma de Aprender
PROYECTOS WEB BÁSICOS
GEARSOFT.CA
Home
About Us
Services
Contact
Proyectos: La Mejor Forma de Aprender
Proyecto 1: Tu Página Personal Estática
Proyecto 2: Calculadora Simple o Lista de Tareas
Proyecto 3: Pequeño Juego Interactivo
GEARSOFT.CA
Home
About Us
Services
Contact
GRACIAS
+58 412 752 1730
gearsoftca@gmail.com
Metrosol Maracaibo
Contacto
Encuéntrame en redes sociales como GearSoftCA o Javier Alburges