Versión en EspañolES

Curso Intensivo de Astro, Kontent.ai y Portable Text

Please sign in to watch this workshop.

En este curso intensivo, crearemos un nuevo proyecto en el CMS sin cabeza, crearemos el modelo de contenido y los datos utilizando la CLI de Kontent.ai. Luego, utilizaremos el contenido para construir un sitio web de Astro que incluya componentes front-end y resolución de texto enriquecido utilizando Portable Text.

Este será un taller práctico, necesitarás VS Code, Git, NPM y conocimientos básicos de JavaScript. No te preocupes, explicaré todos los pasos a medida que avancemos en el taller y podrás hacer preguntas directamente.

This workshop has been presented at React Summit 2023, check out the latest edition of this React Conference.

FAQ

Content.ai es un proveedor de CMS sin cabeza, especializado en el almacenamiento de contenido y que permite una alta personalización en el desarrollo de sitios web.

En el taller se cubrieron temas como la importación de contenido en el CMS, la ejecución de un proyecto en Astro, la creación de páginas y componentes en Astro, la generación de modelos TypeScript y la implementación de la resolución de texto enriquecido.

Astro es un marco de trabajo de front-end que se enfoca en hacer que los paquetes del cliente sean lo más pequeños posible, ofreciendo una alternativa a marcos más pesados como Next.js o Gatsby.

Se puede participar en el taller de manera virtual, clonando el repositorio de GitHub proporcionado durante el evento y siguiendo las instrucciones en línea para configurar el entorno de desarrollo.

La resolución de texto enriquecido es el proceso de convertir texto con formato enriquecido, como HTML, a un formato que puede ser correctamente gestionado y mostrado por un CMS sin cabeza.

Para el taller práctico se necesitan herramientas como Visual Studio Code y Git instalados, además de acceso al repositorio de GitHub para clonar el proyecto y seguir los pasos del taller.

Ondrej Polesny

91 min

22 May, 2023

Comments

Available in other languages:

Watch more workshops on topic

Fetch, useEffect, React Query, SWR, ¿qué más?

React Advanced 2023

102 min

Fetch, useEffect, React Query, SWR, ¿qué más?

Top Content

Workshop

Ondrej Polesny

En esta masterclass, primero, repasaremos las diferentes formas en que puedes consumir APIs en React. Luego, probaremos cada una obteniendo contenido de un CMS sin cabeza (tanto con REST como con GraphQL) y verificando en detalle cómo funcionan.
Aunque no se requiere un conocimiento avanzado de React, esta será una sesión práctica, por lo que necesitarás clonar un repositorio de GitHub preconfigurado y utilizar tu editor de programación React preferido, como VS Code.
Aprenderás:- Qué diversas opciones de obtención de datos hay en React- Cuáles son las ventajas y desventajas de cada una- Cuáles son los casos de uso típicos y cuándo cada estrategia es más beneficiosa que otras

react query headless cms react query vs useeffect react swr react useeffect swr vs react query

Curso intensivo sobre Astro y Storyblok

React Day Berlin 2023

119 min

Curso intensivo sobre Astro y Storyblok

Workshop

Arisa Fukuzaki

La arquitectura sin cabeza ha ganado inmensa popularidad en los últimos años por su capacidad para desacoplar el frontend y el backend, permitiendo a los desarrolladores crear aplicaciones web atractivas, interactivas y escalables.
En esta masterclass, nos sumergiremos rápidamente en el Mundo y la Arquitectura sin Cabeza.
Además, construiremos un sitio web de blog súper rápido utilizando Storyblok, un CMS sin cabeza que ofrece una función de vista previa en tiempo real con un enfoque de componente anidable, y Astro (3.0) que ya está creando revuelo con el nuevo directorio de aplicaciones.
- Domina los fundamentos de CMS sin cabeza- Domina un enfoque de Astro & CMS sin cabeza- Usa el diseño atómico en tu aplicación Astro & Storyblok- Creación de páginas, adición de contenido y comprensión de cómo funciona el enrutamiento dinámico con sin cabeza

astro headless cms

Construyendo Sitios Web Ultrarrápidos con Next.js y Sanity.io

React Summit 2023

71 min

Construyendo Sitios Web Ultrarrápidos con Next.js y Sanity.io

Workshop

2 authors

Únete a nosotros en un masterclass práctico donde te mostraremos cómo mejorar tus habilidades de React para construir un sitio web sin cabeza de alto rendimiento utilizando Next.js, Sanity y la arquitectura JAMstack. No se requiere conocimiento previo de Next.js o Sanity, lo que hace que este masterclass sea ideal para cualquier persona familiarizada con React que quiera aprender más sobre la construcción de sitios web dinámicos y receptivos.
En este masterclass, exploraremos cómo Next.js, un framework basado en React, se puede utilizar para construir un sitio web estático con renderizado del lado del servidor y enrutamiento dinámico. Aprenderás cómo utilizar Sanity como un CMS sin cabeza para gestionar el contenido de tu sitio web, crear plantillas de página personalizadas con Next.js, utilizar APIs para integrarte con el CMS y desplegar tu sitio web en producción con Vercel.
Al final de este masterclass, tendrás una comprensión sólida de cómo Next.js y Sanity.io pueden utilizarse juntos para crear un sitio web de alto rendimiento, escalable y flexible.

next.js headless cms sanity react

Curso Intensivo de Remix y Storyblok

Remix Conf Europe 2022

162 min

Curso Intensivo de Remix y Storyblok

Workshop

2 authors

Tal vez ya hayas leído sobre Remix. Probablemente ya lo hayas usado, y recientemente hayas escuchado mucho sobre los CMS sin cabeza. En este curso rápido, pondremos todas las piezas juntas y te mostraré por qué Storyblok en combinación con Remix es la mejor opción para tu próximo proyecto. ¡Pasa y pruébalo tú mismo!
Tabla de contenido:- Introducción a Remix, diseño atómico y el mundo sin cabeza- Configuración del entorno- Creación de páginas y comprensión de cómo funcionan las rutas dinámicas con splat routes- Consejos futuros y preguntas frecuentes
Prerrequisitos: Node.js instalado, cuenta de GitHub.

headless cms

Localizando tu sitio web de Remix

React Summit 2023

154 min

Localizando tu sitio web de Remix

Workshop

Harshil Agrawal

El contenido localizado te ayuda a conectarte con tu audiencia en su idioma preferido. No solo te ayuda a hacer crecer tu negocio, sino que también ayuda a tu audiencia a comprender mejor tus ofertas. En este masterclass, obtendrás una introducción a la localización y aprenderás cómo implementar la localización en tu sitio web de Remix alimentado por Contentful.
Tabla de contenidos:- Introducción a la localización- Introducción a Contentful- Localización en Contentful- Introducción a Remix- Configuración de un nuevo proyecto de Remix- Renderización de contenido en el sitio web- Implementación de la localización en el sitio web de Remix- Recapitulación- Próximos pasos

web development headless cms remix internationalization

Astro: All Hands On

React Day Berlin 2024

126 min

Astro: All Hands On

Workshop

Elian Van Cutsem

Mentorship available

La web es capaz de mucho más de lo que podríamos pensar. Durante esta masterclass, exploraremos algunas partes menos conocidas de la web. ¿Sabías que puedes controlar la web a través de webHID o enviar y recibir notas a dispositivos a través de webMIDI? En esta charla interactiva podríamos hacer música juntos, controlando sintetizadores y explorando la amplia gama de extrañas API web. Todo eso en JavaScript puro, sin necesidad de frameworks.

astro

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

No sabes cómo hacer SSR

DevOps.js Conf 2024

23 min

No sabes cómo hacer SSR

Emanuele Stoppa

Active contributor to the Biome project

The Talk covers the speaker's personal journey into server-side rendering (SSR) and the evolution of web development frameworks. It explores the use of jQuery for animations in SSR, the challenges faced in integrating React with Umbraco, and the creation of a custom SSR framework. The Talk also discusses the benefits of Next.js and the use of serverless artifacts for deployment. Finally, it highlights the features of Astro, including its function per route capability.

next.js astro serverless

Diseño Opt-in – La Nueva Era de los Marcos de React

React Advanced 2023

23 min

Diseño Opt-in – La Nueva Era de los Marcos de React

Ben Holmes

Ben is a full-stack developer, open source maintainer, and whiteboardist making the web a little better.

This Talk discusses opt-in design in web development, focusing on API design and understanding good defaults. Opt-in design allows developers to start with minimal tools and gradually add complexity as needed. The principles of opt-in design include finding the lowest common denominator, making complexity easy to add, and prioritizing the user experience. The Talk also explores the concept of opt-in design in React and Astro, as well as the comparison between React and Solid frameworks. Server rendering and streaming in React are highlighted, along with the importance of suspense boundaries for a better user experience.

astro builders and founders frameworks preact

Todo Sobre Astro

React Day Berlin 2023

28 min

Todo Sobre Astro

Elian Van Cutsem

Mentorship available

Astro Ambassador

Astro is a powerful framework for content-driven websites, with its own syntax and the ability to use favorite front-end libraries. It has seen significant improvements in Astro 2 and Astro 3, including view transitions and improved performance. Astro 4 introduces features like a powerful dev toolbar, content caching, and internationalization support. The Astro community is highly regarded, and Astro is being used for production websites. Astro also supports migrating legacy websites and integrating with headless CMSs.

astro

Cómo manejar correctamente los cambios de URL slug en Next.js

TypeScript Congress 2022

10 min

Cómo manejar correctamente los cambios de URL slug en Next.js