Documentación:Plantillas de interfaz
Revisión:
Resumen
Encontrarás cada plantilla de interfaz y widget, con su sintaxis.
Widgets y extensiones para incrustar
Todo lo que se puede incrustar hoy en Casiopea, agrupado como en las guías. Crear o modificar un widget requiere pertenecer al grupo Editores de widget (ver Roles y permisos).
Video
| Qué | Para qué | Código | Más información | Se enseña en |
|---|---|---|---|---|
| YouTube Widget | Video de YouTube que se ajusta al ancho de la página; acepta lista de reproducción y punto de inicio. | {{#widget:YouTube|id=ID_DEL_VIDEO}} | Widget:YouTube | Incrustar video, audio, código y 3D |
| Vimeo Widget | Video de Vimeo que se ajusta al ancho de la página. | {{#widget:Vimeo|id=ID_DEL_VIDEO}} | Widget:Vimeo | Incrustar video, audio, código y 3D |
Audio
| Qué | Para qué | Código | Más información | Se enseña en |
|---|---|---|---|---|
| SoundCloud Widget | Pista de audio que se escucha en la página. | {{#widget:SoundCloud|id=ID_DE_LA_PISTA}} | Widget:SoundCloud | Incrustar video, audio, código y 3D |
Código y visualización
| Qué | Para qué | Código | Más información | Se enseña en |
|---|---|---|---|---|
| P5 Widget | Sketch de p5.js escrito en la misma página. | {{#widget:P5|code=TU_CÓDIGO_P5}} | Widget:P5 | Incrustar video, audio, código y 3D |
| P5js Widget | Sketch de p5.js alojado en otra web, desde su URL. | {{#widget:P5js|url=URL_DEL_SKETCH|width=900|height=400}} | Widget:P5js | Incrustar video, audio, código y 3D |
| P5m Widget | Varios sketches de p5.js en una misma página; cada uno con su id. | {{#widget:P5m|id=ID_ÚNICO|code=TU_CÓDIGO_P5}} | Widget:P5m | Incrustar video, audio, código y 3D |
| Matter Widget | Carga la biblioteca Matter.js para programar simulaciones físicas en 2D. Para quien sabe JavaScript. | {{#widget:Matter}} | Widget:Matter | Incrustar video, audio, código y 3D |
| PiX Widget | Partitura de interacción creada en la aplicación PiX (se copia su código de inserción). | {{#widget:PiX|data=CÓDIGO_DE_PIX}} | Widget:PiX | Incrustar video, audio, código y 3D |
| Mermaid Extensión No está en la guía actual | Diagramas (flujo, secuencia, Gantt) escritos como texto. | {{#mermaid:
graph TD
A[Inicio] --> B[Fin]
}} | documentación oficial | Incrustar video, audio, código y 3D |
| EasyTimeline Extensión No está en la guía actual | Línea de tiempo dibujada a partir de texto. | <timeline>
…
</timeline> | Extension:EasyTimeline | Incrustar video, audio, código y 3D |
| Mapa de con§tel Extensión No está en la guía actual | El mapa de conceptos que forman las lecturas de con§tel: de toda la Escuela, de algunos lectores, de un concepto o de ciertas páginas. | {{#constel: usuario=TuUsuario | modo=3d | alto=400px}} | documentación oficial | Insertar un mapa de con§tel en una página |
3D
| Qué | Para qué | Código | Más información | Se enseña en |
|---|---|---|---|---|
| Sketchfab Widget | Modelo 3D publicado en Sketchfab, explorable en la página. | {{#widget:Sketchfab|id=ID_DEL_MODELO}} | Widget:Sketchfab | Incrustar video, audio, código y 3D |
| F3D Widget | Dibujo de Filippo 3d, con sus trazos y vistas en 3D. | {{#widget:F3D|data=CÓDIGO_DE_F3D|height=650}} | Widget:F3D | Incrustar video, audio, código y 3D |
| Modelo 3D subido a la wiki Extensión No está en la guía actual | Modelo .stl, .obj o .json que subiste a Casiopea, con 3DAlloy. | <3d width="600" height="400">Modelo.stl</3d> | Extension:3DAlloy | Incrustar video, audio, código y 3D |
Documentos
| Qué | Para qué | Código | Más información | Se enseña en |
|---|---|---|---|---|
| PDF Extensión | Archivo PDF subido a Casiopea, visible en la página (extensión PDFEmbed). | <pdf width="800" height="680">Archivo:Nombre.pdf</pdf> | Extension:PDFEmbed | Incrustar documentos, presentaciones y hojas de cálculo |
| Google Document Widget | Documento de Google Drive que se lee en la página. | {{#widget:Google Document|Fid=ID_DEL_DOCUMENTO|width=100%|height=600px}} | Widget:Google Document | Incrustar documentos, presentaciones y hojas de cálculo |
| Scribd Widget No está en la guía actual | Documento publicado en Scribd. Sin documentación en Casiopea. | {{#widget:Scribd|id=ID|access_key=CLAVE}} | Widget:Scribd | Incrustar documentos, presentaciones y hojas de cálculo |
Presentaciones
| Qué | Para qué | Código | Más información | Se enseña en |
|---|---|---|---|---|
| Google Presentation Widget | Presentación de Google Slides; acepta inicio automático y repetición. | {{#widget:Google Presentation|docid=ID_DE_LA_PRESENTACIÓN}} | Widget:Google Presentation | Incrustar documentos, presentaciones y hojas de cálculo |
| SlideShare Widget | Presentación publicada en SlideShare. | {{#widget:SlideShare|id=ID_DE_LA_PRESENTACIÓN}} | Widget:SlideShare | Incrustar documentos, presentaciones y hojas de cálculo |
| Figma Widget | Prototipo o archivo de Figma navegable. | {{#widget:Figma|url=URL_DE_FIGMA|width=100%|height=600}} | Widget:Figma | Incrustar documentos, presentaciones y hojas de cálculo |
Hojas, formularios y calendarios
| Qué | Para qué | Código | Más información | Se enseña en |
|---|---|---|---|---|
| Google Spreadsheet Widget | Hoja de cálculo de Google para mostrar datos. | {{#widget:Google Spreadsheet|key=ID_DE_LA_HOJA}} | Widget:Google Spreadsheet | Incrustar documentos, presentaciones y hojas de cálculo |
| Google Form Widget | Formulario de Google que se responde en la página. | {{#widget:Google Form|key=ID_DEL_FORMULARIO|width=600|height=750}} | Widget:Google Form | Incrustar documentos, presentaciones y hojas de cálculo |
| Google Calendar Widget No está en la guía actual | Calendario de Google (por ejemplo, el académico). Sin documentación en Casiopea. | {{#widget:Google Calendar|id=ID_DEL_CALENDARIO|title=Título}} | Widget:Google Calendar | Incrustar documentos, presentaciones y hojas de cálculo |
Galerías
| Qué | Para qué | Código | Más información | Se enseña en |
|---|---|---|---|---|
| FlickrSetShow Widget | Álbum de Flickr como grilla o carrusel, con varios modos de vista. | {{#widget:FlickrSetShow|set_id=ID_DEL_ÁLBUM|view=grid|limit=12}} | Widget:FlickrSetShow | Insertar imágenes y galerías |
| Imagen con zonas enlazadas Extensión No está en la guía actual | Una imagen donde cada zona lleva a otra página (ImageMap). | <imagemap>
Archivo:Plano.jpg|600px
rect 0 0 100 100 [[Página]]
</imagemap> | Extension:ImageMap | Insertar imágenes y galerías |
Mapas
| Qué | Para qué | Código | Más información | Se enseña en |
|---|---|---|---|---|
| Mapa con marcadores Extensión No está en la guía actual | Mapa (Leaflet) con uno o varios lugares, con la extensión Maps. | {{#display_map:Valparaíso; Viña del Mar|zoom=10|height=400}} | documentación oficial | Incrustar mapas y ubicaciones |
| Google Maps Widget No está en la guía actual | Mapa de Google por coordenadas. Sin documentación en Casiopea. | {{#widget:Google Maps|lat=-33.0|lng=-71.6|zoom=12}} | Widget:Google Maps | Incrustar mapas y ubicaciones |
| Google Street View Widget No está en la guía actual | Vista de calle por coordenadas. Sin documentación en Casiopea. | {{#widget:Google Street View|lat=-33.0|lng=-71.6}} | Widget:Google Street View | Incrustar mapas y ubicaciones |
Plantillas de interfaz
En redacción. Fuente en Casiopea: Componer y diseñar — bloques de interfaz; Casiopea:Plantillas orientadas a la navegación…; Guía para incrustar objetos — tabla de widgets.