Repositorio de Programación Web

Este sitio no es solo una lista de archivos: es una pequeña exhibición de lo que fui aprendiendo al convertir etiquetas, estilos y scripts en páginas que existen en el navegador.

HTML para ordenar ideas. CSS para darles composición. JavaScript para hacerlas responder. DOM y BOM para entender el navegador. Bootstrap para construir más rápido. PHP para conectar formularios y datos con el servidor.

Ver aprendizajes Abrir archivo de prácticas

<h1>
APRENDER
HACIENDO
MEJOR.
</h1>

Pieza central


                        const curso = ["estructura", "estilo", "interacción",
                        "servidor"];

Aprendizajes como piezas

Tres parciales · una evolución

01

Parcial 1

Estructura y semántica

Aprendí a construir la base de una página: usar etiquetas con intención, organizar contenido, trabajar tablas y empezar a pensar en la web como documentos enlazados.

HTML básico y estructura
Tablas, enlaces y recursos
Conceptos de internet y servidores web

Ver piezas del parcial 1

02

Parcial 2

Estilo, composición e interacción

Pasé de escribir contenido a diseñar experiencias: color, capas, gradientes, flexbox, grid y los primeros programas con decisiones, ciclos y eventos.

CSS externo y diseño responsive
Flexbox, grid, capas y efectos visuales
JavaScript con condicionales y ciclos

Ver piezas del parcial 2

03

Parcial 3

Navegador, componentes y servidor

Exploré el comportamiento del navegador con DOM y BOM, practiqué interfaces con Bootstrap y conecté formularios con PHP para entender el lado del servidor.

DOM, BOM, cookies y animación
Bootstrap con CDN, local y sin framework
PHP, formularios y CRUD

Ver piezas del parcial 3

Archivo de prácticas

Cada enlace abre una práctica real del repositorio. El orden conserva la idea de recorrido: primero estructura, luego composición, después interacción y finalmente piezas que necesitan servidor.

Sala 01

HTML y web

Primeras páginas, tablas y conceptos base.

HTMLMi primera páginaEstructura inicial de un documento web. HTMLSaltos de líneaControl básico del flujo de texto. HTMLOtras etiquetasExploración de elementos semánticos. HTMLSubíndices y superíndicesTexto con significado visual y técnico. TablasGIF en tablasComposición con celdas y recursos. TablasColspanCeldas extendidas horizontalmente. TablasRowspanCeldas extendidas verticalmente. TablasDirectorio telefónicoDatos organizados en formato tabular. TablasTira de materiasInformación académica estructurada. WebPágina sobre SPAConceptos de aplicaciones de una página. WebWeb serverFuncionamiento general de un servidor web. PDFInternet y WWWInvestigación del primer parcial. PDFHTTP status codesCódigos de respuesta HTTP.

Sala 02

CSS y JavaScript

Estilo, layout, efectos y lógica en el cliente.

CSSCSS externoSeparación entre contenido y estilo. CSSPágina de volleyballEstilos aplicados a una página temática. LayoutFlexboxDistribución flexible de elementos. LayoutGrid viewComposición bidimensional con CSS Grid. NavegaciónNavigation barMenús y acceso entre secciones. NavegaciónPaginationOrganización de contenido paginado. TextoMulticolumnLectura distribuida en columnas. TextoPizarnik y CortázarComposición editorial con columnas. ColorLinear gradientTransiciones lineales de color. ColorRadial gradientTransiciones circulares de color. ColorConical gradientGradientes alrededor de un punto. TipografíaGradient textColor aplicado a letras. ColorGradients Jake GyllenhaalPráctica visual con gradientes. ImagenMaskingMáscaras y recortes visuales. ImagenObject fit positionControl del encuadre de imágenes. ImagenObject fit AkebiaPráctica temática de object-fit. CSSTransformaciones 3DProfundidad y perspectiva en CSS. UIButtonsEstados visuales de botones. UICursorsCursores como señal de interacción. UIScrollbarsPersonalización de desplazamiento. UICursors y scroll regularVariaciones de desplazamiento. CSSPseudo classesEstados y selectores dinámicos. CSSPseudo elementsCapas generadas desde CSS. CSSOrangutanPráctica visual con pseudoelementos. CapasCapasOrden visual y apilamiento. CapasCapas solecitoComposición por profundidad. JSIf, then, elseDecisiones dentro del programa. JSSwitch caseRamas múltiples de ejecución. JSFor loop: day of weekRepetición controlada con ciclos. JSWhile y do whileCiclos condicionados. ExamenCombustibleEjercicio integrador del parcial. PDFTernary eventsTarea sobre operadores y eventos.

Sala 03

DOM, Bootstrap y servidor

Interfaces, navegador, cookies y prácticas con PHP.

BootstrapBootstrap generalComponentes y maquetación rápida. BootstrapBootstrap con CDNUso del framework desde internet. BootstrapBootstrap localRecursos instalados en el proyecto. CSSSin BootstrapComparación con estilos propios. DOMDOM ball animationMovimiento controlado con JavaScript. DOMDOM square animationAnimación de elementos en pantalla. DOMSquareManipulación visual desde scripts. BOMBOM cookieGuardar datos en el navegador. BOMBOM retrieveRecuperar información guardada. JSTest de personalidadFormulario interactivo con lógica propia.

Anexo servidor

PHP

Referencias del repositorio que requieren servidor.

PHPFiguras en PHPSalida generada desde el servidor. PHPMes en PHPLógica de servidor para datos simples. PHPClient Web systemEntrada principal del sistema CRUD. CRUDCreate CRUDCrear registros. CRUDRead CRUDLeer registros. CRUDUpdate CRUDActualizar registros. CRUDDelete CRUDEliminar registros.