Asistencia teoríaHoy tu primera página dejará de ser una idea.
Verás una plantilla moderna, aprenderás palabras básicas, personalizarás tu propia página y entenderás cómo podría publicarse en la web.
Registra tu asistencia a la clase teórica
Usa la cámara de tu celular y escanea este código QR. Si ya registraste tu asistencia, espera la indicación del docente y continúa con la clase.
- Abre la cámara o lector QR.
- Escanea el código.
- Completa el formulario.
- Regresa a esta clase web.
Asistencia teoríaPrimeras palabras que hoy sí debes comprender.
Documento que se abre en un navegador y muestra información, imágenes o botones.
Página o conjunto de páginas que además responden a acciones del usuario.
Programa que abre sitios web, por ejemplo Chrome, Edge o Firefox.
Herramienta donde escribimos o modificamos código y texto.
Diseño que se adapta a celular, tablet y computadora.
Modelo ya preparado que se personaliza sin empezar desde cero.
Asistencia teoríaToca un término para ver un ejemplo detallado.
Organiza el contenido: títulos, párrafos, imágenes y botones.
Ver ejemplo →Da estilo visual: colores, tamaños, espacios y distribución.
Ver ejemplo →Hace que la página responda a acciones.
Probar ejemplo →Carpeta en Internet que guarda los archivos del proyecto y sus versiones.
Ver ejemplo →Publica un sitio web desde los archivos del repositorio.
Ver ejemplo →Dirección que permite abrir y compartir una página.
Ver ejemplo →Asistencia teoríaUna página web es una pantalla que responde a instrucciones.
Hoy no empezaremos con teoría pesada. Primero verás que cambiar una instrucción produce un cambio visible.
Asistencia teoríaPrimero entendemos tres papeles.
Dice qué hay: títulos, párrafos, tarjetas, botones e imágenes.
Abrir ejemplo HTML →Dice cómo se ve: colores, diseño, distribución y estilo.
Abrir ejemplo CSS →Dice qué hace: clics, cambios, respuestas y acciones.
Probar JavaScript →💡 Puedes hacer clic en cada tarjeta durante la explicación y volver a este esquema.
Asistencia teoríaHTML organiza lo que existe en la página.
Las etiquetas indican qué tipo de elemento es cada parte. Aquí tenemos un título, un párrafo y un botón.
Hola, soy Rosa
Estudiante de Computación e Informática
Asistencia teoríaCSS transforma la apariencia sin cambiar el contenido.
La información sigue siendo la misma, pero ahora definimos color, espacio interno y bordes.
Mi proyecto futuro
Una web educativa para mi comunidad.
Asistencia teoríaJavaScript responde a lo que hace el usuario.
Aquí una función espera una acción. Cuando pulsas el botón, cambia el texto de la página.
Prueba en vivo
Todavía no has pulsado el botón.
Asistencia teoríaQue se vea como algo que sí querrías compartir.
Tu primera página no será una hoja aburrida. Será una pequeña web personal, visualmente agradable y adaptable al celular.
Degradado, tarjetas y diseño moderno.
Se adapta automáticamente a la pantalla.
Llevará tus datos básicos, intereses y proyecto.
Hola, soy Ana
Estudiante de Computación e Informática
Mi proyecto futuro
Una web sobre mi comunidad y mis metas.
Asistencia teoríaSolo debes personalizar 5 cosas.
Tu nombre o alias.
Tu frase de presentación.
Tus intereses.
Tu proyecto futuro.
Tu color principal.
Comprender qué cambiaste y qué se modificó en pantalla.
Asistencia teoríaTu página puede ser pública: protege tus datos.
Nombre o alias, intereses, metas, carrera, ideas de proyecto.
DNI, teléfono, dirección, contraseñas, documentos o datos sensibles.
Usa información académica o creativa, no datos privados.
Asistencia teoríaUn cambio pequeño produce un resultado visible.
Si cambias el texto del título o del párrafo, la página se verá distinta inmediatamente. Ese es el punto de hoy: comprender la relación entre código y resultado.
Asistencia teoría¿Puedes explicar tu propio cambio?
Si puedes decir esas tres cosas, ya estás empezando a pensar como programador.
Asistencia teoría¿Dónde guardamos una web para seguir mejorándola?
Toca cada etapa para ver qué significa y cómo se usa.
Asistencia teoríaindex.html suele ser la puerta de entrada de un sitio.
Cuando el servidor busca la página principal, normalmente encuentra index.html.
Asistencia teoríaUn repositorio guarda el proyecto y permite seguir sus cambios.
Piensa en una carpeta inteligente
HTML, CSS, JavaScript, imágenes y documentación.
Puedes saber qué cambió y cuándo.
El proyecto puede ser revisado o publicado.
Asistencia teoríaGitHub Pages convierte tu repositorio en una web visible.
Resultado esperado
Tu página pasa de estar solo en tu equipo a tener una dirección web que puedes abrir desde otro celular.
Asistencia teoríaEl enlace público es la dirección de tu página.
Ejemplo
Una URL permite abrir la misma página desde otro celular o computadora. También se puede compartir por WhatsApp, correo o Classroom.
Recuerda: publicar significa que otras personas podrían verla.
Asistencia teoríaPiensa en él como una carpeta con historial.
Los archivos de tu proyecto.
Ver detalle →Los cambios que vas realizando.
Ver detalle →Puede alimentar tu sitio en GitHub Pages.
Ver publicación →Asistencia teoríaUna web que puedas mostrar y explicar.
Plantilla abierta, personalizada, guardada y explicada.
Publicarla en GitHub Pages si hay Internet y cuenta disponible.
La página recibirá un dato, tendrá un botón y mostrará un resultado.
Asistencia teoríaAbre el taller. Cambia algo. Compruébalo.
No busques hacerlo perfecto. Busca entender qué cambiaste y por qué apareció un resultado distinto.
Asistencia teoríaComparte el paquete de la Semana 3 con un solo enlace.
Incluye inicio, taller práctico, guía del estudiante y guía de publicación en GitHub Pages.
Descargar ZIP →Cuando publiques este portal, aquí aparecerá automáticamente el enlace público del ZIP.
Copia un texto breve con el enlace incorporado y compártelo con tus estudiantes.
Si estás abriendo la clase desde tu disco local, puedes descargar el ZIP, pero el botón «Copiar enlace» se habilita de forma útil cuando el portal esté publicado en Hostinger o GitHub Pages.
Asistencia teoríaFuentes oficiales para seguir aprendiendo.
Material de clase elaborado para ET403 · Técnicas de Programación I · Semana 3.