Episodios de Desarrollador web Full Stack
187 episodios · del más reciente al más antiguo · página 2
-
Introducción a las condiciones y los operadores lógicos
Hasta ahora has trabajado con variables, tipos de datos y secuencias de instrucciones que se ejecutan una tras otra, siempre en el mismo orden. Sin embargo, un programa útil casi…
-
Checkpoint Ramp: gestión sencilla del carrito de compras
Contexto En una tienda en línea, el carrito de compras es un elemento central: almacena los productos elegidos por el usuario, calcula totales y aplica reglas simples (cantidades…
-
Miniproyecto : cálculo del IMC
Recordatorio teórico: Una variable es un espacio de memoria con un nombre que almacena un valor que puede cambiar durante la ejecución de un programa. El estado de un programa es…
-
Cálculos sencillos con variables
RECORDATORIO TEÓRICO Una variable es un espacio con nombre en memoria que almacena un valor y que puede cambiar durante la ejecución del programa. El modelo mental correcto es…
-
Convenciones y constantes de nomenclatura
Cuando escribes un algoritmo o un programa, no solo importa que funcione: también importa que sea legible y comprensible para ti mismo y para los demás desarrolladores. Aquí es…
-
Tipos de datos comunes (entero, real, cadena, booleano)
Cuando escribes un algoritmo o un programa, manipulas información. Esta información se guarda en variables, como viste en las actividades anteriores. Pero cada variable contiene…
-
Intercambie dos valores
RECORDATORIO TEÓRICO Una variable es un espacio con nombre en la memoria que almacena un valor. Cuando asignas un valor a una variable con una instrucción como 'a = 5', ese valor…
-
Declarar y asignar variables
**Recordatorio teórico** Una variable es un contenedor con nombre que almacena un valor en la memoria durante la ejecución de un programa. Declarar una variable consiste en…
-
Expresiones aritméticas básicas
Las expresiones aritméticas son uno de los pilares fundamentales de cualquier algoritmo y de cualquier programa informático. Antes de escribir una sola línea de código JavaScript…
-
Introducción a las variables y el estado
Una variable es uno de los conceptos más fundamentales en programación. Antes de escribir una sola línea de código real, es indispensable comprender qué es una variable, para qué…
-
Mini-checkpoint - Prepara un café
**Recordatorio teórico** Un algoritmo es una secuencia finita, ordenada y no ambigua de instrucciones que permite resolver un problema o alcanzar un resultado concreto. Tres…
-
Reescribe un algoritmo desordenado
RECORDATORIO TEÓRICO Un algoritmo es una secuencia finita, ordenada y sin ambigüedad de instrucciones que permiten resolver un problema o alcanzar un resultado preciso. La palabra…
-
Mejores prácticas de claridad y granularidad
MEJORES PRÁCTICAS DE CLARIDAD Y GRANULARIDAD EN ALGORITMOS En las actividades anteriores aprendiste qué es un algoritmo, cómo escribir pseudocódigo y cómo representar una…
-
Dibuja un organigrama sencillo
**Recordatorio teórico** Un organigrama (o diagrama de flujo) es una representación visual de un algoritmo. Permite mostrar gráficamente la secuencia de pasos que sigue un…
-
Flujo de ejecución lineal y concepto de etapa
El flujo de ejecución lineal es uno de los conceptos fundamentales de la algorítmica y de la programación. Antes de poder escribir código funcional en cualquier lenguaje, es…
-
Pseudocódigo para un viaje diario
RECORDATORIO TEÓRICO Un algoritmo es una secuencia finita, ordenada y sin ambigüedad de instrucciones que permite resolver un problema o alcanzar un resultado. El pseudocódigo es…
-
Transforma una receta de cocina en un pseudocódigo
RECORDATORIO TEÓRICO Un algoritmo es una secuencia finita, ordenada y no ambigua de instrucciones destinadas a resolver un problema o llevar a cabo una tarea. El pseudocódigo es…
-
Secuencia de pseudocódigo e instrucciones
En la actividad anterior aprendiste qué es un algoritmo: una serie de pasos ordenados y finitos para resolver un problema. Ahora vamos a profundizar en cómo se escriben esos pasos…
-
¿Qué es un algoritmo?
Un algoritmo es una secuencia finita, ordenada y precisa de instrucciones o pasos que permite resolver un problema o realizar una tarea específica. Esta definición, aunque…
-
Informe colaborativo: revisión de código responsiva
**Recordatorio teórico** El diseño responsivo es la práctica de construir interfaces que se adaptan fluidamente a cualquier tamaño de pantalla, desde móviles hasta pantallas de…
-
Proyecto del capítulo final: panel adaptativo de múltiples puntos de interrupción
Descripción del proyecto Este mini-proyecto es el proyecto integrador del capítulo 'Diseño responsivo con CSS3, Flexbox y Grid'. El estudiante debe diseñar y desarrollar un…
-
Lista de verificación responsiva lista para la producción
Cuando un proyecto de desarrollo web llega a su fase final antes de ser publicado, uno de los errores más comunes es omitir una verificación sistemática del diseño responsivo…
-
Taller: implementación de un potente conjunto de imágenes adaptables
RECORDATORIO TEÓRICO Las imágenes adaptables (responsive images) son uno de los pilares del rendimiento web moderno. Su objetivo es servir la imagen más adecuada según el…
-
Optimización del rendimiento: imágenes adaptables (srcset, tamaños) y carga diferida
En el desarrollo web responsivo moderno, las imágenes representan uno de los mayores desafíos de rendimiento. Una imagen que ocupa 2 megabytes en un monitor de escritorio de alta…
-
Taller: creación de un formulario responsivo y accesible
**Recordatorio teórico** Un formulario HTML accesible y responsivo combina tres disciplinas que has trabajado hasta ahora: diseño responsivo con CSS Grid/Flexbox, media queries…
-
Accesibilidad y diseño responsivo: contrastes, tamaños, enfoque visible
La accesibilidad web no es un complemento opcional que se añade al final del desarrollo: es una dimensión fundamental del diseño responsivo. Un sitio que se adapta visualmente a…
-
Taller: refactorizar una página existente primero desde dispositivos móviles
**Recordatorio teórico** El enfoque «mobile-first» consiste en escribir primero los estilos CSS para pantallas pequeñas (móviles) y luego ampliarlos progresivamente mediante media…
-
Tecnología que prioriza los dispositivos móviles frente a la tecnología que prioriza el escritorio: ventajas y limitaciones
En el mundo del desarrollo web moderno, una de las decisiones fundamentales que todo desarrollador debe tomar al comenzar un proyecto es la estrategia de diseño responsivo que va…
-
Miniproyecto intermedio: página de inicio de portafolio responsiva
Descripción del proyecto En este miniproyecto, crearás una página de inicio de portafolio profesional completamente responsiva utilizando HTML5 y CSS3, integrando de forma…
-
Taller: pase de 4 columnas a 1 columna según el tamaño de la pantalla
RECORDATORIO TEÓRICO El diseño responsivo con CSS Grid se apoya en la capacidad de redefinir la estructura de la cuadrícula según el tamaño de la pantalla mediante media queries…
-
Consultas de medios específicas para cuadrículas y división de diseños
Las consultas de medios (media queries en inglés) son una herramienta fundamental del CSS moderno que permite adaptar el diseño de una página web en función de las características…
-
Taller: maquetación del blog (barra lateral + contenido)
**Recordatorio teórico** CSS Grid es un sistema de maquetación bidimensional que permite organizar elementos en filas y columnas simultáneamente. A diferencia de Flexbox, que…
-
Alineación y colocación avanzadas en la cuadrícula
En los capítulos anteriores se exploraron los fundamentos de CSS Grid: la creación de contenedores de cuadrícula, la definición de filas y columnas, el uso de áreas con nombre y…
-
Taller de : rejilla fluida con repetición (ajuste automático, minmax)
**Recordatorio teórico** CSS Grid ofrece una función muy poderosa para crear rejillas fluidas sin necesidad de media queries explícitas: la combinación de `repeat()`, `auto-fill`…
-
Mejores prácticas para asignar nombres a las áreas de la cuadrícula
Cuando se trabaja con CSS Grid, una de las funcionalidades más poderosas y a la vez más propensas a errores es la capacidad de nombrar las áreas de la cuadrícula. Asignar nombres…
-
Taller: cuadrícula básica con 2 columnas y 3 filas
RECORDATORIO TEÓRICO CSS Grid es un sistema de diseño bidimensional que permite controlar simultáneamente filas y columnas, a diferencia de Flexbox, que opera en un solo eje. Un…
-
Terminología de cuadrícula: contenedor, pistas, filas, columnas, áreas
CSS Grid es un sistema de disposición bidimensional que permite organizar elementos en filas y columnas simultáneamente. A diferencia de Flexbox, que trabaja en una sola dirección…
-
Introducción a CSS Grid: filosofía y casos de uso
CSS Grid es un sistema de disposición bidimensional integrado de forma nativa en las hojas de estilo en cascada (CSS). A diferencia de Flexbox, que organiza los elementos en una…
-
Resumen provisional: principios clave del diseño responsivo
El diseño responsivo es un enfoque de desarrollo web que permite que una página o aplicación se adapte de forma automática y fluida a cualquier tamaño de pantalla, ya sea un…
-
Taller: sección adaptativa «Acerca de»
RECORDATORIO TEÓRICO El diseño responsivo consiste en crear interfaces que se adapten fluidamente a cualquier tamaño de pantalla sin duplicar código. CSS3 nos ofrece tres pilares…
-
Combinación de Media Queries y Flexbox en un solo componente
En el desarrollo web moderno, un componente de interfaz raramente funciona en un único tamaño de pantalla. Un menú de navegación, una tarjeta de producto, una sección de…
-
Taller: galería de imágenes responsiva con flex-wrap
**Recordatorio teórico** Flex-wrap es una propiedad CSS de Flexbox que controla si los elementos hijos de un contenedor flexible deben permanecer en una sola línea o pueden…
-
Patrones de diseño comunes de Flexbox (fila, columna, cierre)
Flexbox es un sistema de diseño unidimensional que permite organizar elementos dentro de un contenedor a lo largo de un eje principal. Hasta ahora has aprendido los conceptos…
-
Hoja de referencia y mejores prácticas sobre propiedades de Flexbox
Flexbox, cuyo nombre completo es Flexible Box Layout Module, es un modelo de diseño en CSS3 que permite organizar elementos dentro de un contenedor de forma flexible, controlando…
-
Taller de : inversión del orden de los elementos con dirección flexible
**Recordatorio teórico** Flexbox ofrece una propiedad esencial para controlar la dirección del flujo de los elementos dentro de un contenedor flexible: `flex-direction`. Por…
-
Taller: creación de una barra de navegación flexible
RECORDATORIO TEÓRICO Flexbox (Flexible Box Layout) es un modelo de disposición CSS diseñado para distribuir elementos dentro de un contenedor a lo largo de un eje principal…
-
Taller: alineación básica con Flexbox
RECORDATORIO TEÓRICO Flexbox (Flexible Box Layout) es un modelo de diseño CSS que permite distribuir y alinear elementos dentro de un contenedor de forma dinámica y predecible. El…
-
Gestión del flujo y los márgenes automáticos en Flexbox
Gestión del flujo y los márgenes automáticos en Flexbox En el capítulo anterior, se introdujo el concepto de contenedor flexible (Flexbox). Ahora se profundiza en dos aspectos…
-
Introducción a Flexbox: principio de contenedor flexible
Flexbox, cuyo nombre completo es Flexible Box Layout Module, es un modelo de diseño de CSS3 que permite organizar, alinear y distribuir elementos dentro de un contenedor de manera…
-
Taller: convertir un diseño en rem y vw
**Recordatorio teórico** Antes de comenzar el taller, repasa estos conceptos clave. Las unidades relativas en CSS permiten crear diseños que se adaptan a diferentes tamaños de…