Ayuda:Componer y diseñar tu página
Componer y diseñar tu página
Cuando ya sabes escribir y dar formato, el paso siguiente es componer: maquetar, agregar bloques interactivos y dejar que la wiki traiga contenido sola. Esta guía va de lo más simple a lo más complejo.
Cada bloque sigue el mismo orden: qué es → código → cómo se ve → dónde ver su documentación completa. Copia el código, pégalo y ajústalo.
¿Algo no quedó claro? Escríbenos a wiki@ead.cl y te ayudamos.
Antes de empezar
Dos ideas que hacen que todo lo demás funcione bien:
- Usa clases y bloques del sistema, no estilos a mano. Así tu página se ve coherente y funciona en modo claro y oscuro.
- Menos es más. Cada bloque que agregas tiene un costo de atención: úsalos para ordenar, no para decorar.
→ Repasar formato y estilos semánticos
1. Bloques de interfaz
Las piezas más simples: se escriben como una plantilla, entre dobles llaves, y funcionan solas.
Botón
Un enlace con forma de botón. Variantes: neutro, rojo, verde.
Código:
{{Botón|texto=Ir a Formularios|enlace=Formularios|variante=rojo}}
Cómo se ve: Ir a Formularios
Tarjeta (Card)
Tarjeta de navegación con título, descripción y (opcional) imagen que cambia a GIF al pasar el cursor. Va dentro de una grilla.
Código:
<div class="grid cols-2">
{{Card|enlace=Ayuda:Nuevo Usuario|título=Empezar|descripción=Primeros pasos en la wiki.}}
{{Card|enlace=Ayuda:Palabras mágicas|título=Palabras mágicas|descripción=Interruptores y funciones.}}
</div>
Cómo se ve:
Tooltip
Un ícono "i" que muestra un texto al pasar el cursor. Ideal para explicar sin recargar la página.
Código:
Profesores {{Tooltip|Académicos que registran su actividad en la Escuela.}}
Cómo se ve: Profesores
Académicos que registran su actividad en la Escuela.
Aviso
Caja para destacar una nota o advertencia. Seis variantes: info, nota, aviso, advertencia, error, ok.
Código:
{{Aviso|tipo=ok|título=Listo|texto=Tu página quedó guardada.}}
Cómo se ve:
Nota
Una nota breve, en cursiva y tinta secundaria, sin recuadro. Para acotaciones dentro de una ficha o párrafo.
Código:
{{Nota|Este cuaderno se digitalizó en 2020 a partir del original en el archivo.}}
Cómo se ve:
Acordeón
Secciones plegables (como las de esta misma página). Ordenan páginas largas mostrando un título a la vez.
Código:
{{Acordeón inicio}}
{{Acordeón/Ítem inicio|título=Primera sección}}
Contenido de la primera sección.
{{Acordeón/Ítem fin}}
{{Acordeón/Ítem inicio|título=Segunda sección}}
Contenido de la segunda sección.
{{Acordeón/Ítem fin}}
{{Acordeón fin}}
Cómo se ve: esta misma guía es un acordeón — cada sección que abres y cierras usa estas plantillas.
Tarjeta XL
Tarjeta ancha (todo el ancho de la caja): la imagen a un lado y, al otro, el título, la descripción y un llamado a la acción. Toda la tarjeta es clickeable hacia una página (un solo destino); admite imagen, gif o sketch, con el hover de Plantilla:Card (la tarjeta se eleva y la imagen hace parallax).
Código:
{{Tarjeta XL
|imagen=Amereida-JaimeR.jpg
|enlace=Taller de Amereida {{CURRENTYEAR}}
|título=Taller de Amereida {{CURRENTYEAR}}
|descripción=Trata la relación entre la poesía y los oficios, la arquitectura y los diseños.
|texto=Ir al taller
}}
Cómo se ve:
2. Maquetar en columnas (la grilla)
Qué es. La grilla convierte cada bloque en una columna y se reacomoda sola en pantallas chicas. Se activa con una clase en un <div>.
Código:
<div class="grid cols-3 gap-l"> Primer bloque Segundo bloque Tercer bloque </div>
Cómo se ve:
Modificadores: cols-1…cols-6, cols-auto, gap-0/s/m/l, align-center, full. Y las bandas de fondo fondo-ahuesado, fondo-coral, fondo-verde, fondo-ambar, fondo-info.
3. El marco de la página (palabras mágicas)
Las palabras mágicas son interruptores invisibles que controlan el marco de la página. No son plantillas: se escriben directas en el wikitexto.
| Palabra mágica | Para qué |
|---|---|
__NOTITLE__ |
Oculta el título automático (útil si pones tu propia portada). |
__TOC__ / __NOTOC__ |
Coloca o quita la tabla de contenidos. |
__PANTALLACOMPLETA__ |
Modo lienzo: ancho completo, sin cabecera ni menús. Para portadas y visualizaciones. |
4. Licencias y créditos (páginas de archivo)
Cuando subes un archivo (imagen, PDF), su página puede declarar bajo qué licencia se comparte. Se agregan como plantilla, sin parámetros, en la página del archivo.
Creative Commons (por defecto)
Código:
{{CC-by-sa}}
Cómo se ve:
Otras licencias y créditos
{{CC-by-sa-4}}— Creative Commons 4.0, versión en español.{{Copyright}}— derechos reservados del autor.{{CopyrightByEAD}}— copyright institucional del Archivo Histórico José Vial Armstrong.
→ Documentación de CopyrightByEAD
5. Presentar datos: una consulta, varias caras
Una consulta semántica ({{#ask}}) trae objetos de la wiki; con el parámetro format eliges cómo se ven. Es la misma pregunta, distinta presentación. Abajo, una consulta a publicaciones mostrada sin foto de tres formas (lista, tabla, miniatura); y dos formatos que necesitan datos propios: las tarjetas con foto (proyectos con imagen) y el mapa (objetos con coordenadas).
Llamada simple
Sin format, devuelve una lista de enlaces.
Código:
{{#ask:[[Categoría:Publicación]] [[Colección::Despliegue del Oficio]]}}
Cómo se ve:
Fotografías de Valparaíso, Habitar el Taller de Diseño. Cuaderno Pedagógico, Habitar el Taller de Diseño: Artilugios del Viento, Habitar el Taller de Diseño: Diseño y Celebración, Habitar el Taller de Diseño: Papeles Encuadernados, Habitar el Taller de Diseño: Taller de Paisajes Sonoros, La Observación: el urbanismo desde el acto de habitar, La Teleserie Perpetua, Los Errantes del Mar, Lugares de Aprendizaje, Memoria: El Pozo, Proyecto de un Espacio Publico en el Barrio de Montedónico, TV art 63 - Documentales de Arte - L' Aventure de L'Art Moderne, TV edi 96 - (vhs61) Edición Escuela, TV mun 87 - (vhs57) Inauguración Mundial Juvenil de Fútbol, TV pre 88 - Presentación de Escuela y Ciudad Abierta, TV rei 96 - (vhs61) Reinaguración Teatro Municipal de Valparaíso
Tabla
Con format=table y columnas (?), arma una tabla ordenable.
Código:
{{#ask:[[Categoría:Publicación]] [[Colección::Despliegue del Oficio]]
| ?Autor
| ?Año#-
| format=table
}}
Cómo se ve:
Tarjetas con foto (Portafolio)
Con format=template y template=Portafolio, cada resultado se dibuja como una tarjeta con miniatura. Necesita objetos con imagen — aquí, los proyectos con el tema "juego" de un taller.
Código:
{{#ask:[[Categoría:Proyecto]][[Cursos Relacionados::Taller de Diseño de Interacción 2026]][[Palabras Clave::juego]]
|? Imagen
|? Alumnos
|? URL
|format = template
|template = Portafolio
}}
Cómo se ve:
Miniaturas (Documento miniatura)
Con template=Documento miniatura y named args=yes, la misma consulta se dibuja como tarjetas compactas y clickeables, repartidas en columnas con grilla … flujo-v.
Código:
<div class="grilla cols-4 flujo-v">
{{#ask:[[Categoría:Publicación]] [[Colección::Despliegue del Oficio]]
|?Autor
|?Coautores
|?Año#-
|format = template
|template = Documento miniatura
|named args = yes
|sort =
|order = asc
}}
</div>
Cómo se ve:
Mapa
Con format=googlemaps, los resultados que tengan coordenadas (campo Posición) se ubican en un mapa. Como las publicaciones no tienen coordenadas, aquí la consulta cambia a los casos de estudio.
Código:
{{#ask: [[Categoría:Caso de Estudio]] [[Posición::+]]
| ?Posición
| format=googlemaps
| limit=20
| width=100%
| height=400
}}
Cómo se ve:
Las plantillas {{Mapa de Casos}} y {{Mapa de Proyectos}} son atajos que hacen esta misma consulta por ti, según la página de proyecto o curso donde las pongas.
6. Traer tu contenido automáticamente (consultas)
Lo más avanzado: plantillas que hacen una consulta semántica por ti y traen tu contenido solo. Se escriben sin parámetros: usan el nombre de la página donde van.
En tu página de persona
Muestran lo que has hecho, según tu nombre en cada objeto.
Código:
{{Mis Proyectos}}
{{Mis Tareas}}
{{Mis Talleres}}
{{Mis Travesías}}
Cómo se ve: solo renderizan dentro de una página de persona (usan su nombre para armar la consulta). El mejor ejemplo es tu propia página persona: agrégalas y aparecerán tus proyectos, tareas y talleres.
→ Documentación de Mis Proyectos
En una página de categoría
{{Contenido Relacionado}} lista la bibliografía y los casos de estudio que declaran esa categoría en sus palabras clave.
Código:
{{Contenido Relacionado}}
→ Documentación de Contenido Relacionado
→ Objetos semánticos y consultas
7. Receta: una portada a sangre
Combinando todo lo anterior armas una portada de borde a borde:
Código:
__NOTITLE__ __PANTALLACOMPLETA__
[[Archivo:mi-portada.jpg|class=full-width]]
<div class="grid cols-3 gap-l full">
{{Card|enlace=…|título=…|descripción=…}}
{{Card|enlace=…|título=…|descripción=…}}
{{Card|enlace=…|título=…|descripción=…}}
</div>
__NOTITLE__quita el título para que la imagen quede arriba del todo.__PANTALLACOMPLETA__lleva la página al ancho completo.full-widthrevienta la imagen de borde a borde.- La
grillaconfullmaqueta las tarjetas a todo el ancho.