Subsecretaría de Educación Media Superior
Dirección General de Educación Tecnológica Industrial y Servicios
Oficina Estatal de la DGETI en el Estado de Tamaulipas
Centro De Bachillerato Tecnológico industrial y de servicios No. 164
“EMILIO PORTES GIL”
Desarrollo Frontend Estático con [Link]
12.1. Guía de Laboratorio: Proyecto Final "Un Blog Temático"
Objetivo: Aplicar los conceptos de Static Site Generation (SSG) y Dynamic Routing de
[Link] para construir un blog completo sin necesidad de un servidor (backend) en
tiempo real.
Instrucciones del Proyecto:
1. Temática: Seleccione y desarrolle un blog sobre la temática de su mayor
interés.
2. Investigación: Utilice recursos de la red de internet o el navegador de Google
para sustentar el contenido de sus artículos.
3. Evaluación: Consulte la rúbrica de evaluación provista al final del documento
para asegurar el cumplimiento de todos los requisitos técnicos.
12.2. Fundamentos de la Estructura ([Link] Solo Frontend)
Para diseñar un blog cuyas secciones estén claramente separadas (no una única
página), explotaremos el Sistema de Archivos para Enrutamiento nativo de [Link].
Esto nos permite definir cada "sección" o "página" del blog como un archivo o carpeta
dentro del directorio pages/.
Estructura de Directorios Requerida
Asumiendo que usted se encuentra dentro del directorio principal pages/ de su
proyecto [Link], la siguiente estructura es obligatoria para aprobar el laboratorio:
pages/
├── [Link] # Home: Página principal/últimas entradas
├── [Link] # About: Página sobre el autor/blog
├── [Link] # Contact: Formulario o info de contacto
├── posts/ # Carpeta para las entradas individuales
│ ├── [slug].js # Plantilla para una entrada específica (Ej: /posts/mi-primer-post)
Subsecretaría de Educación Media Superior
Dirección General de Educación Tecnológica Industrial y Servicios
Oficina Estatal de la DGETI en el Estado de Tamaulipas
Centro De Bachillerato Tecnológico industrial y de servicios No. 164
“EMILIO PORTES GIL”
├── category/ # Carpeta para listar por categoría
│ ├── [categoryName].js# Plantilla para listar entradas por categoría
└── [Link] # Página de error 404 personalizada
2. Rutas y Secciones Clave
Sección del
Archivo/Ruta Propósito ([Link])
Blog
Muestra una lista de las últimas
/ (o [Link]) Inicio/Feed
publicaciones.
Proporciona información sobre el autor,
/about Acerca de
el tema del blog y la misión.
Muestra información de contacto o un
/contact Contacto formulario de contacto (simulado sin
backend).
Entrada La página de detalle para cada artículo
/posts/[slug]
Individual del blog. Usa Dynamic Routing.
Muestra todas las entradas bajo una
Listado por
/category/[categoryName] categoría específica. Usa Dynamic
Categoría
Routing.
Exportar a Hojas de cálculo
Nota sobre el Frontend: Al ser solo frontend, la data de las entradas (posts) y
categorías se obtendría típicamente de archivos JSON locales o de un CMS
Headless como Strapi, Contentful o Sanity, utilizando las funciones de [Link]
como getStaticProps y getStaticPaths para renderizar estáticamente (SSG).
El Potencial de un Blog: Posibilidades Ilimitadas
Un blog, más allá de ser una colección de artículos, es una poderosa herramienta de
comunicación, marketing y construcción de comunidad. A continuación, se detallan
todas las posibilidades que un blog puede ofrecer:
Subsecretaría de Educación Media Superior
Dirección General de Educación Tecnológica Industrial y Servicios
Oficina Estatal de la DGETI en el Estado de Tamaulipas
Centro De Bachillerato Tecnológico industrial y de servicios No. 164
“EMILIO PORTES GIL”
1. Construcción de Autoridad y Credibilidad
• Liderazgo de Pensamiento: Posicionarse como experto en un nicho,
publicando análisis profundos, tendencias y perspectivas únicas.
• Contenido Evergreen: Crear artículos que sigan siendo relevantes y útiles
durante años, generando tráfico orgánico constante.
• Demostración de Experiencia: Usar casos de estudio, tutoriales y white papers
para demostrar conocimiento práctico.
2. Herramienta de Marketing y SEO
• Optimización para Buscadores (SEO): Generar tráfico orgánico masivo al
optimizar el contenido para palabras clave relevantes, atrayendo a usuarios
que buscan activamente soluciones o información.
• Inbound Marketing: Atraer clientes potenciales ofreciendo valor antes de
vender, moviéndolos sutilmente a través del embudo de ventas.
• Base para Campañas: Utilizar el contenido del blog como eje central para
campañas en redes sociales, newsletters y anuncios pagados.
3. Fomento de la Comunidad y la Interacción
• Sección de Comentarios: Crear un espacio para la discusión, el feedback y la
interacción directa con la audiencia.
• Encuestas y Quizzes: Integrar elementos interactivos para aumentar la
participación de los usuarios.
• Contenido Generado por el Usuario: Publicar testimonios, experiencias de
usuarios o artículos invitados.
4. Monetización y Crecimiento de Ingresos
• Publicidad: Vender espacio publicitario a través de banners (AdSense) o
patrocinios directos.
• Marketing de Afiliados: Recomendar productos o servicios de terceros e incluir
enlaces de afiliado para generar comisiones.
• Venta de Productos Propios: Promocionar y vender e-books, cursos online,
merchandise o servicios directamente.
Subsecretaría de Educación Media Superior
Dirección General de Educación Tecnológica Industrial y Servicios
Oficina Estatal de la DGETI en el Estado de Tamaulipas
Centro De Bachillerato Tecnológico industrial y de servicios No. 164
“EMILIO PORTES GIL”
• Contenido Premium (Paywall): Ofrecer acceso exclusivo a artículos, informes
o newsletters avanzados mediante una suscripción de pago.
5. Distribución y Repropósito del Contenido
• Newsletters (Boletines): Usar los artículos del blog para nutrir una lista de
correos electrónicos y mantener una comunicación constante.
• Repropósito de Contenido: Transformar una entrada de blog en un podcast, un
video de YouTube, una serie de tweets o una presentación de SlideShare,
maximizando su alcance.
• Centralización de Medios: Servir como el hub central para todos los
comunicados de prensa, noticias de la empresa y actualizaciones.
Subsecretaría de Educación Media Superior
Dirección General de Educación Tecnológica Industrial y Servicios
Oficina Estatal de la DGETI en el Estado de Tamaulipas
Centro De Bachillerato Tecnológico industrial y de servicios No. 164
“EMILIO PORTES GIL”
Estructura de proyecto
1. Estructura de Datos (JSON)
Primero, crearemos un archivo en la raíz llamado data/[Link] para simular
nuestra base de datos de publicaciones.
Ruta y nombre del archivo: data/[Link]
2. Página de Inicio (Feed)
Esta página listará todas las entradas del blog. Usaremos getStaticProps para obtener
los datos JSON durante el tiempo de construcción (SSG).
Ruta y nombre del archivo: pages/[Link]
Subsecretaría de Educación Media Superior
Dirección General de Educación Tecnológica Industrial y Servicios
Oficina Estatal de la DGETI en el Estado de Tamaulipas
Centro De Bachillerato Tecnológico industrial y de servicios No. 164
“EMILIO PORTES GIL”
Subsecretaría de Educación Media Superior
Dirección General de Educación Tecnológica Industrial y Servicios
Oficina Estatal de la DGETI en el Estado de Tamaulipas
Centro De Bachillerato Tecnológico industrial y de servicios No. 164
“EMILIO PORTES GIL”
3. Entradas Individuales (Dynamic Routing)
Esta es la clave de las secciones del blog. La ruta [slug].js usa getStaticPaths para
decirle a [Link] qué páginas debe construir (por ejemplo, /posts/introduccion-a-
nextjs y /posts/por-que-escoger-nextjs).
Ruta y nombre del archivo: pages/posts/[slug].js
Subsecretaría de Educación Media Superior
Dirección General de Educación Tecnológica Industrial y Servicios
Oficina Estatal de la DGETI en el Estado de Tamaulipas
Centro De Bachillerato Tecnológico industrial y de servicios No. 164
“EMILIO PORTES GIL”
4. Secciones Adicionales (Estáticas)
Estas son páginas simples sin necesidad de datos dinámicos.
Ruta y nombre del archivo: pages/[Link]
5. Sección de Contacto
Ruta y nombre del archivo: pages/[Link]
Subsecretaría de Educación Media Superior
Dirección General de Educación Tecnológica Industrial y Servicios
Oficina Estatal de la DGETI en el Estado de Tamaulipas
Centro De Bachillerato Tecnológico industrial y de servicios No. 164
“EMILIO PORTES GIL”
Subsecretaría de Educación Media Superior
Dirección General de Educación Tecnológica Industrial y Servicios
Oficina Estatal de la DGETI en el Estado de Tamaulipas
Centro De Bachillerato Tecnológico industrial y de servicios No. 164
“EMILIO PORTES GIL”
RUBRICA DE EVALAUCIÓN
Criterio de Evaluación Puntuació Nivel 4 (Excelente) Nivel 3 (Satisfactorio) Nivel 2 (Básico) Nivel 1
n Máxima (Necesita
Mejorar)
I. Estructura de Archivos
y Enrutamiento (40%) 20
No
implementa la
Implementa los tres estructura de
Implementa correctamente archivos, pero la rutas
[Link], [Link], y [Link]. navegación podría tener Implementa solo 2 de las principales o
1. Enrutamiento La navegación entre estas errores menores o faltar en 3 páginas principales faltan más de
Principal (pages/) 5 páginas es fluida y funcional. una página. requeridas. dos.
Implementa la carpeta posts/
y el archivo [slug].js. Utiliza Implementa [slug].js y No hay
getStaticPaths y carga posts, pero la lógica Implementa [slug].js pero implementaci
getStaticProps (o equivalente de solo carga un post o el ón de rutas
con data JSON) para getStaticPaths/getStaticPro enrutamiento dinámico dinámicas
2. Enrutamiento renderizar dinámicamente ps es incompleta o solo no funciona para los
Dinámico (posts/) 5 mínimo 3 posts distintos. muestra 2 posts. correctamente. posts.
La data estática (e.g.,
data/[Link]) está bien No existe un
estructurada, contiene todos El uso de data estática es archivo de
los campos necesarios (slug, La data JSON existe y es mínimo o la carga de datos
title, content, category, etc.) y consumida, pero faltan datos no utiliza las estáticos para
3. Estructura de Datos es consumida correctamente campos o la estructura no funciones de [Link] las
(JSON/Data) 10 por [Link]. es óptima. (SSG). publicaciones.
Implementa la ruta dinámica
para Se incluye la carpeta Ninguna de
4. Secciones de /category/[categoryName].js Implementa una de las dos category/ pero no es estas
Categoría y Error (funcional) y la página [Link] secciones (/category/... o funcional, o no hay secciones
(Opcional) 2 personalizada. [Link]) correctamente. [Link]. está presente.
Subsecretaría de Educación Media Superior
Dirección General de Educación Tecnológica Industrial y Servicios
Oficina Estatal de la DGETI en el Estado de Tamaulipas
Centro De Bachillerato Tecnológico industrial y de servicios No. 164
“EMILIO PORTES GIL”
II. Diseño, Usabilidad y
Estética (30%) 15
El diseño es profesional, El diseño es funcional y No hay
limpio y coherente en todas aceptable, aunque podría ningún
las secciones. Utiliza carecer de pulido El estilo es básico (solo esfuerzo de
CSS/módulos de [Link] de profesional o tener HTML puro o estilos diseño o la
manera efectiva para una incoherencias visuales inline) y la estética es interfaz es
5. Diseño y Estética 5 excelente presentación visual. menores. pobre. difícil de leer.
La navegación (enlaces) es
intuitiva y fácil de usar en La navegación es
todas las páginas. El usuario funcional, pero podría ser La navegación es La
puede volver al inicio y más evidente o el diseño intermitente o faltan navegación
6. Navegación y moverse entre posts sin de los enlaces no es enlaces clave (e.g., está rota o es
Usabilidad 5 problemas. óptimo. volver a la lista principal). inexistente.
El contenido de los posts El contenido
Cada post tiene un título, un es visible, pero la del post
cuerpo de texto bien información Los posts son meros individual no
formateado y utiliza la (fecha/categoría) podría placeholders o el se carga
7. Contenido de las información del JSON para estar incompleta o mal contenido es muy correctamente
Entradas 5 mostrar la fecha y categoría. formateada. escaso. .
III. Calidad y Alcance del
Contenido (30%) 12
La temática
El blog tiene una temática no está
definida y el contenido de los definida y el
posts demuestra conocimiento La temática es clara y el contenido es
o investigación sobre el tema contenido es coherente, La temática es vaga o los genérico o
(siguiendo el potencial del pero la profundidad de la posts no tienen relación copiado sin
8. Desarrollo Temático 10 blog descrito en la guía). investigación es limitada. clara con el tema elegido. adaptación.
Subsecretaría de Educación Media Superior
Dirección General de Educación Tecnológica Industrial y Servicios
Oficina Estatal de la DGETI en el Estado de Tamaulipas
Centro De Bachillerato Tecnológico industrial y de servicios No. 164
“EMILIO PORTES GIL”
Se integran elementos que
demuestran la comprensión
del potencial del blog (e.g., Solo se menciona una El contenido
secciones claras para SEO, Se incluye la simulación de posibilidad o el contenido es básico y no
simulacro de comentarios, 2 a 3 posibilidades del blog no refleja las ideas de la va más allá
9. Integración de contenido simulado para descritas en la guía (e.g., guía de un texto
Posibilidades 3.5 newsletter, etc.). comentarios y newsletter). (Autoridad/Monetización). simple.
El código es limpio, bien
indentado y sigue las El código es
convenciones de El código es funcional, pero confuso e
React/[Link]. Los la organización y la El código es difícil de impide la
10. Limpieza y componentes son modulares limpieza general podría leer, mal indentado o con revisión de la
Organización del Código 2.5 y legibles. mejorar. mucha lógica repetida. funcionalidad.
100