Astro: El framework para sitios web orientados al contenido
Actions, Astro DB, Turso, SSG, SSR, Hybrid, Markdown, MDX, File Uploads, Integraciones, SEO, RSS, REST y más
Lo que serás capaz de hacer
Bienvenidos a nuestro curso de Astro.js Aquí vamos a explorar Astro de diferentes formas, desde generación estática, renderización del lado del servidor y cliente con Vanilla JavaScript e híbridos. El curso esta orientado a cubrir una gran variedad de usos y aplicaciones utilizando el Framework, también usaremos varios Frameworks y librerías de UI como React, Solid y Vue. Este es un listado que veremos en el curso: Sintaxis de Astro Estructura y tipado estricto TypeScript con Astro Navegación y parámetros de ruta Protección de rutas Middlewares Renderización Server Side Client Side Static Side Hybrid Peticiones HTTP En momento de construcción En momento de ejecución Scripts en Vanilla JS y TS Drag & Drop sin librerías ni islas Integraciones con Cloudflare Netlify Node React Astro DB Tailwind Vue Solid.js View Transitions Cero JS View Transitions Nanostores Persistencia de estado de las islas Paginación estática Paginación dinámica Markdown y MDX Estilos condicionales Tailwindcss SEO Friendly Optimización de imágenes Restful API endpoints Server actions Form Multipart con server actions Zod Astro DB Relaciones CRUD Despliegues a producción Carga de archivos Google SignIn AuthJS Autenticación y autorización Mucho más Este curso cubre los usos principales que le puedes dar a Astro, y crear aplicaciones que no solo funcionen rápido, sino que sea eficientes, escalables y reutilizables. Espero que te animes a tomar este curso y aprender esta increíble tecnología!. Nos vemos en la próxima clase!
- Crear sitios orientados a contenido
- Crear sitios con renderizado del lado del servidor
- Combinar estrategias de renderizado
- MPA y SPAs (Multi-Page Applications y Single Page Applications)
- Astro con TypeScript
- Astro DB y Acciones
Temario
UNIDAD 1 - Introducción · 4 leccionesUNIDAD 1 - Introducción
UNIDAD 1 - Introducción
- Introducción
- ¿Cómo funciona el curso?
- ¿Preguntas?
- Instalaciones necesarias
UNIDAD 2 - Introducción a Astro · 16 leccionesUNIDAD 2 - Introducción a Astro
UNIDAD 2 - Introducción a Astro
- Introducción a la sección
- Temas puntuales
- Presentación sobre Astro
- Nuestro primer sitio en Astro
- Estructura de un proyecto
- Sintaxis y funcionamiento de los archivos .astro
- Tarea - Actualizar momento actual
- Navegación entre páginas
- Reutilización de componentes
- Layouts y Props
- Estilos por componente y globales
- Página 404
- View Transitions
- Recapitulación
- Despliegue
- Código fuente de la sección
UNIDAD 3 - Rutas dinámicas y paginación estática · 20 leccionesUNIDAD 3 - Rutas dinámicas y paginación estática
UNIDAD 3 - Rutas dinámicas y paginación estática
- Introducción
- Temas puntuales
- Demostración
- Inicio de proyecto - PokemonStatic
- Crear estructura y layouts
- Peticiones HTTP en tiempo de construcción
- Componentes y Props
- Páginas dinámicas - Argumentos por URL
- Props dinámicos
- Crear 151 páginas estáticas
- Estilo condicional
- ViewTransition + Name Transition
- Paginación estática
- Controles de la paginación
- Tarea - Páginas por ID
- TypeScript - Path Alias
- Metadatos - Image y descripción
- Desplegar sitio y confirmar metadatos
- Zero JavaScript - ViewTransitions
- Código fuente de la sección
UNIDAD 4 - Añadir dinamismo a nuestro sitio estático · 17 leccionesUNIDAD 4 - Añadir dinamismo a nuestro sitio estático
UNIDAD 4 - Añadir dinamismo a nuestro sitio estático
- Introducción a la sección
- Temas puntuales
- Demostración
- Continuación del proyecto
- Indicador de ruta activa
- Astro Icon
- Client Side Scripting
- Ciclo de vida del View Transition
- LocalStorage
- Indicador si existe en el LocalStorage
- Astro Islands - Integración con SolidJS
- Directivas del lado del cliente
- Props y Componentes hacia las islas
- Mostrar listado de favoritos
- Mostrar y remover favoritos
- View Transition - Desde Isla
- Código fuente de la sección
UNIDAD 5 - Colecciones e imágenes · 15 leccionesUNIDAD 5 - Colecciones e imágenes
UNIDAD 5 - Colecciones e imágenes
- Introducción a la sección
- Temas puntuales de la sección
- Demostración de la sección
- Inicio de proyecto - Blog
- Markdown y MDX
- Layouts para los markdown
- Estructura de nuestro blog
- Astro Glob y Props
- Colecciones de Astro - Astro Collections
- Mostrar entradas de blog - Colecciones
- Mostrar contenido del post
- Componente Image
- Formatos y resoluciones de imágenes
- Imágenes en colecciones
- Código fuente de la sección
UNIDAD 6 - Relaciones de colecciones · 11 leccionesUNIDAD 6 - Relaciones de colecciones
UNIDAD 6 - Relaciones de colecciones
- Introducción a la sección
- Temas puntuales de la sección
- Demostración de la sección
- Continuación de proyecto
- Relaciones en colecciones
- Mostrar información del autor
- Todas las entradas del autor
- Aplicar filtro en las colecciones
- Tarea - Listado de autores
- Resolución de la tarea
- Código fuente de la sección
UNIDAD 7 - Astro Themes · 6 leccionesUNIDAD 7 - Astro Themes
UNIDAD 7 - Astro Themes
- Introducción
- Temas puntuales
- Inicio de proyecto
- Usando temas de terceros
- Documentación con Starlight
- Agregar contenido a los Docs
UNIDAD 8 - RSS Feed · 10 leccionesUNIDAD 8 - RSS Feed
UNIDAD 8 - RSS Feed
- Introducción
- Temas puntuales
- Demostración
- Continuación
- HTTP Get - Endpoint
- RSS Feed - Astro
- Desplegar sitio web
- Descubrimiento automático y pruebas
- Imagen y contenido en el News Feed
- Código fuente de la sección
UNIDAD 9 - Server Side Rendering y Endpoints · 13 leccionesUNIDAD 9 - Server Side Rendering y Endpoints
UNIDAD 9 - Server Side Rendering y Endpoints
- Introducción
- Temas puntuales
- Demostración
- Inicio de proyecto - Astro Http
- Restful API estáticos
- GET - Obtener todos los Posts
- SSR Adapters
- Hybrid vs Server vs Static
- Query Parameters - Opcionales
- Segmentos de Ruta - Params
- Post, Put, Delete Endpoints
- Despliegue a Cloudflare
- Código fuente de la sección
UNIDAD 10 - Astro DB · 12 leccionesUNIDAD 10 - Astro DB
UNIDAD 10 - Astro DB
- Introducción
- Temas puntuales
- Demostración - Turso
- Astro DB
- Crear tabla de clientes
- Tarea - Clients CRUD
- CRUD con Astro DB - Post y Get
- CRUD con Astro DB - Patch y Delete
- Turso - Una base de datos para desarrolladores
- Get de clientes individuales - Turso
- Desplegar a Cloudflare
- Código fuente de la sección
UNIDAD 11 - Server Actions - Funciones de Blog - Likes Counter · 16 leccionesUNIDAD 11 - Server Actions - Funciones de Blog - Likes Counter
UNIDAD 11 - Server Actions - Funciones de Blog - Likes Counter
- Introducción
- Temas puntuales
- Demostración
- Estructura y Seed
- Get - Obtener los likes actuales
- Put - Incrementar la cantidad de likes
- Like Counter - Componente con Vue.js
- Vue - Props y cantidad de likes
- Vue - Incrementar localmente
- Vue - Actualizar la cantidad en base de datos
- Lodash Debounce
- Ver cambios en producción - Turso
- Introducción - Server Actions
- Server Actions - Obtener Likes
- Actualizar likes - Action
- Código fuente
UNIDAD 12 - Autenticación y protección de rutas · 21 leccionesUNIDAD 12 - Autenticación y protección de rutas
UNIDAD 12 - Autenticación y protección de rutas
- Introducción
- Temas puntuales
- Demostración
- Inicio de proyecto
- Navegación y estructura
- Astro Middleware
- Autenticación propia
- Acción: Registro de usuario
- Cookies: Recordar usuario
- Firebase Auth - Configuración de proyecto
- Autenticación por Correo y Contraseña
- Mostrar información del usuario autenticado
- Logout - Cerrar sesión
- Login - Inicio de sesión
- Solución de Tarea - Implementación del login
- DisplayName y Verificación de correo
- Google SignIn
- Astro Locals - env.d.ts
- Proteger rutas desde Middleware
- Desplegar a producción
- Código fuente de la sección
UNIDAD 13 - Autenticación y autorización - Auth.js · 11 leccionesUNIDAD 13 - Autenticación y autorización - Auth.js
UNIDAD 13 - Autenticación y autorización - Auth.js
- Introducción
- Temas puntuales
- Demostración
- Inicio del proyecto
- Astro DB - Tabla de usuarios y seed
- AuthJs - Configuraciones de Login
- AuthJS - Credentials Provider
- AuthJS - Iniciar sesión
- Middleware y cerrar sesión
- AuthJS - Expandir objeto de sesión
- Código fuente de la sección
UNIDAD 14 - Productos, paginación y SEO · 16 leccionesUNIDAD 14 - Productos, paginación y SEO
UNIDAD 14 - Productos, paginación y SEO
- Introducción
- Temas puntuales
- Demostración
- Continuación y preparación
- Batch Transactions
- Action: Obtener productos por página
- AstroDB - Raw Queries
- Mostrar productos - Integración con React
- Product Card - Componente de React
- Paginación - Componente de Astro
- Paginar basado en server actions
- Página de producto
- Swiper - Carrusel de imágenes
- Funcionalidad - Agregar al carrito
- Mostrar ícono de carrito
- Código fuente de la sección
UNIDAD 15 - Carrito - Cookies y Nanostores · 13 leccionesUNIDAD 15 - Carrito - Cookies y Nanostores
UNIDAD 15 - Carrito - Cookies y Nanostores
- Introducción
- Temas puntuales
- Demostración
- Continuación
- Client Cookies
- Grabar y leer cookies
- Action: Cargar productos del carrito
- Action: Cargar productos del carrito - Parte 2
- Pantalla del carrito de compras
- Eliminar del carrito de compras
- Compartir información entre islas - NanoStores
- View Transitions - Persistencia y eventos
- Código fuente de la sección
UNIDAD 16 - Mantenimiento de productos · 21 leccionesUNIDAD 16 - Mantenimiento de productos
UNIDAD 16 - Mantenimiento de productos
- Introducción
- Temas puntuales
- Demostración
- Continuación
- Listado de productos
- Pantalla para editar producto
- Action: Actualizar Producto
- Crear producto
- Action: Recibir archivos a cargar
- Cloudinary - Preparación de servicio
- Cargar imágenes a Cloudinary
- Actualización y grabación por lote
- Eliminar imágenes
- Eliminar y actualizar DOM
- Drag & Drop - Estilos y comportamiento
- Drag & Drop - Manejar el evento DROP
- Aprovisionar base de datos - Turso
- Turso - Llenar base de datos
- Desplegar a Netlify
- Meta tags - SEO
- Código fuente de la sección
UNIDAD 17 - Server Islands - Prisma · 12 leccionesUNIDAD 17 - Server Islands - Prisma
UNIDAD 17 - Server Islands - Prisma
- Introducción
- Temas puntuales
- Demostración
- Inicio de proyecto
- NeonTech - PostgreSQL en Serverless
- Prisma con NeonTech y Astro
- Server Actions con Prisma
- Mostrar lugar en la tarjeta
- Páginas estáticas de lugares
- Astro Server Islands - Demostración
- Creando un Server Island
- Código fuente
UNIDAD 18 - Opcional: Astro con PostgreSQL · 12 leccionesUNIDAD 18 - Opcional: Astro con PostgreSQL
UNIDAD 18 - Opcional: Astro con PostgreSQL
- Introducción
- Temas puntuales
- Demostración
- Continuación de aplicación
- Tarea - Client Endpoints
- Neon.tech - PostgreSQL en la nube
- Prisma y PostgreSQL con Astro
- Insertar y obtener registros
- Path Alias - TypeScript
- Obtener cliente por ID
- Actualizar y eliminar clientes
- Código fuente
UNIDAD 19 - Opcional: Astro con PosgreSQL + Actions continuación · 15 leccionesUNIDAD 19 - Opcional: Astro con PosgreSQL + Actions continuación
UNIDAD 19 - Opcional: Astro con PosgreSQL + Actions continuación
- Introducción
- Temas puntuales
- Demostración
- Continuación de aplicación
- Componente - LikeCounter - VueJS
- Preparar tabla y esquema
- Seed de base de datos
- Lógica del componente - LikeCounter
- Server Actions
- Server Action - getLikes
- Server Action - updateLikeCount
- Debounce - Esperar un momento antes de enviar
- Preparar para despliegue en Render
- Desplegar en Render
- Código fuente
UNIDAD 20 - Cierre del curso · 1 leccionesUNIDAD 20 - Cierre del curso
UNIDAD 20 - Cierre del curso
- Fin del curso
Tu certificado lo emite la SEP, no solo una plataforma
Al demostrar la competencia recibes un certificado emitido por la Secretaría de Educación Pública a través del Gobierno del Estado de México: un documento oficial que puedes presentar con confianza ante cualquier empleador o institución.
Tu certificado con INEC
- Lo emite la Secretaría de Educación Pública (SEP), a través del Gobierno del Estado de México
- Documento oficial con folio verificable en línea
- Lo otorga la Universidad Tecnológica Fidel Velázquez
Otras plataformas en línea
- Constancia privada emitida por la misma plataforma
- Solo acredita horas cursadas o asistencia
- Sin respaldo de una autoridad educativa
Tu itinerario, de la inscripción al certificado
- 1
Inscripción con pago único
Pagas $2,800 MXN una sola vez y entras de inmediato al curso.
- 2
Estudias a tu ritmo
20 unidades con videos, lecturas y actividades, disponibles 24/7 durante 12 meses.
- 3
Cuestionarios por unidad
Cuestionarios para comprobar lo aprendido.
- 4
Certificado
Emitido por la SEP a través del Gobierno del Estado de México, con folio verificable.
Un certificado oficial de la SEP
Muestra · verificable por folio y QR
- Emitido por la Secretaría de Educación Pública (SEP), a través del Gobierno del Estado de México. No es una constancia privada: es un documento oficial, y ese respaldo marca la diferencia frente a otras plataformas en línea.
- Contenido impartido por Fernando Herrera.
- Folio y QR verificables para compartirlo con quien te contrate.
Empieza hoy, a tu ritmo
Un solo pago y acceso inmediato al curso completo durante 12 meses.
- 20 unidades · 262 lecciones · 60 h
- 12 meses de acceso
- Certificado emitido por la SEP (Gob. del Estado de México) con folio verificable
Sobre tu inscripción
¿Cómo es el pago?
Un solo pago de $2,800 MXN. No hay mensualidades ni cargos recurrentes.
¿Cuánto tiempo tengo acceso?
12 meses desde tu inscripción, 24/7, para avanzar a tu ritmo.
¿Quién imparte el contenido?
El curso es impartido por Fernando Herrera; INEC gestiona tu inscripción, evaluación y certificado.
¿Qué pasa cuando vence mi acceso?
Puedes renovar tu cuenta tú mismo desde la plataforma, sin trámites ni esperas.
