Ayuda:Cómo se edita una página

De Casiopea


¿Cómo se edita una página?

Esta página cubre los aspectos técnicos de la escritura dentro de los artículos de esta wiki. Para entender los principios detrás de esta wiki en particular, por favor dirígete a Ayuda:Cómo Colaborar.

Títulos o Encabezados de Sección

Las página de la wiki se estructuran a partir de un régimen jerárquico de títulos. Estos títulos construyen automáticamente una tabla de contenidos, como la presentada al comienzo de esta página y obedecen, en su estructura tabular a la jerarquía de encabezados.

=h1=
==h2==
===h3===
etc...

genera esto:

h1

h2

h3

h4

h5

Cada título crea una subsección en la página que permite editarla por separado. Una página extensa, dado este régimen de secciones, facilita la colaboración simultánea evitando que hayan conflictos de versiones si los editores trabajan en secciones diferentes.

Listas

Ordenadas

  1. ítem 1
  2. ítem 2
    1. ítem 2.1
    2. ítem 2.2
      1. ítem 2.2.1
# ítem 1
# ítem 2
## ítem 2.1
## ítem 2.2
### ítem 2.2.1

Desordenada y Alternada

  • ítem
  • ítem
    1. sub-ítem
      • sub-sub-ítem
* ítem
* ítem
*# sub-ítem
*#* sub-sub-ítem

Estilos

  • Negrita o bold: strong
  • Cursiva o itálica: em
  • estos dos atributos se pueden combinar: strong & em
* Negrita o bold: '''strong'''
* Cursiva o itálica: ''em''
* estos dos atributos se pueden combinar: '''''strong & em'''''

Otros tipos de texto

  • Formato poema:

 ¿Dónde están sus monumentos, sus batallas, sus mártires? 

¿Dónde su memoria tribal? Señores,

en esa bóveda gris. El mar. El mar
los ha aprisionado. El mar es la Historia.

  • Texto cita:

El hombre sólo puede construir gratuitamente su casa. Porque habitar es construir lo gratuito. No como el pájaro que sólo puede edificar su único nido.

  • Enter entre párrafos:

esta
es una
prueba

* Formato poema: <poem> texto </poem>
* Formato cita: <blockquote> texto </blockquote>
* Enter entre párrafos: texto <br>

Links

dentro de la wiki

El link es el elemento básico que permite construir la wiki. Cada vez que se indica un link, se crea la posibilidad de crear una página nueva. La notación del link es doble paréntesis de corchete:

Voy a crear una nueva página.

Voy a crear una [[nueva página]].

El título de la página será el texto que está dentro del paréntesis de corchete doble. Si se quiere emplear otro título, se deberá dividir el nombre de la página con el texto alternativo mediante el caracter barra: '|'

Voy a vincular a una [[página existente|página]].

Para vincular a páginas especiales se antepone el tipo seguido de dos puntos:

Voy a vincular a [[Usuario:jorge|la página de jorge]].
Voy a definir una [[Categoría:Diseño|categoría fundamental]]

fuera de la wiki

Simplemente se escribe la URL. La wiki reconocerá que se trata de un link o bien se utiliza paréntesis de corchete simple para especificar la URL separada de un espacio para un un nombre alternativo:

http://www.ead.pucv.cl/
ó
[http://www.ead.pucv.cl/ Escuela de Arquitectura y Diseño - PUCV]

http://www.ead.pucv.cl/ ó Escuela de Arquitectura y Diseño - PUCV

Imágenes


Modo Simple

Para incrustar una imagen, ésta debe estar subida en la wiki (link en barra superior Archivos: "Subir Archivo"). El sistema no permite enlazar imágenes externas como salvaguarda a las leyes de copyright.

Este es el modo básico que arroja la imagen a tamaño completo:

[[Archivo:Mona-lisa.jpg]]

Mona-lisa.jpg

[[Archivo:Mona-lisa.jpg|300px]]

Mona-lisa.jpg

Miniatura

Si se quiere ubicar una miniatura:

[[Archivo:Mona-lisa.jpg|thumb|Texto de descripción de la imagen]]
Texto de descripción de la imagen

El texto del párrafo se adapta en el ancho para dejar que la imagen con las indicaciones de "thumb" (de thumbnail eng: uña de pulgar o miniatura) literalmente flote en el costado derecho de la caja del texto.



Control de Tamaño

Ahora bien, si la imagen es demasiado grande y se prefiere mostrarla en un tamaño reducido se deben especificar las dimensiones del ancho en pixeles:

[[Archi:Mona-lisa.jpg|50px]]

Mona-lisa.jpg

Avanzadas

Como ya se explicó en la sección de miniatura, la imagen puede ajustar en su tamaño, ubicación y texto descriptivo (o pie de foto). También se puede reemplazar thumb por frame, con la salvedad que esta indicación no permite redimensionar la imagen.


[[Archivo:Mona-lisa.jpg|thumb|200px|left|Texto de descripción de la imagen ''left'']]
[[Archivo:Mona-lisa.jpg|thumb|100px|center|Texto de descripción de la imagen ''center'']]
[[Archivo:Mona-lisa.jpg|thumb|100px|right|Texto de descripción de la imagen ''right'']]
[[Archivo:Mona-lisa.jpg|thumb|100px|none|Texto de descripción de la imagen ''none'']]


Texto de descripción de la imagen left
Texto de descripción de la imagen center
Texto de descripción de la imagen right
Texto de descripción de la imagen none

Ancho completo

Hay estilos especiales que se pueden aplicar desde la cascada de estilos (css). Para lograr imágenes reventadas de lado a lado usar class: full-width

Piranesi.jpeg

[[Archivo:piranesi.jpeg|class=full-width]]

Existe un modo avanzado para incorporar secciones del HTML a ancho completo, como elementos P5js, videos, etc.

Para esto se utiliza la siguiente estructura:

<div class="fullscreen">
   inserta acá el contenido a ancho completo
</div>

La etiqueta <gallery>

MediaWiki soporta la etiqueta de <gallery>, que simplifica enormemente la presentación de secuencias de imágenes en las páginas.

<gallery>
Archivo:01-triumph-tiger-900-rally-pro-estatica.jpg|Triumph Tiger 900 Rally Pro
Archivo:CRF1000L_Africa_Twin_black_frente_3-4_fx.jpg|Africa Twin Negra
Archivo:Honda_africa_twin_2020_adventure_sports.jpg|Africa Twin
Archivo:Tiger-900-rally-pro-acc-20MY-AZ4I8253-AB-1-6026-default-large.jpeg|Triumph Tiger 900 Rally Pro
</gallery>

Ejemplo sencillo, sólo miniaturas presentadas de forma simultánea:

<gallery mode="slideshow">
Archivo:01-triumph-tiger-900-rally-pro-estatica.jpg|Triumph Tiger 900 Rally Pro
Archivo:CRF1000L_Africa_Twin_black_frente_3-4_fx.jpg|Africa Twin Negra
Archivo:Honda_africa_twin_2020_adventure_sports.jpg|Africa Twin
Archivo:Tiger-900-rally-pro-acc-20MY-AZ4I8253-AB-1-6026-default-large.jpeg|Triumph Tiger 900 Rally Pro
</gallery>


Ejemplo en modo slideshow. Las imágenes ons ajustadas al ancho máximo. Cuando se requiera mostrar una secuencia, se recomienda trabajar las imágenes para que sus proporciones sean equivalentes y no se cambie la escala:

Insertar PDF

Para visualizar directamente un PDF, debes subir el archivo y luego controlar el ancho (width) y alto (height) en el código.

 <pdf width='800' height='680'>Archivo:Malla_DIS.pdf</pdf>

Widgets

La documentación de cómo utilizar los Widgets está en cada página específica:

  1. Widget:FlickrSetShow
  2. Widget:Google Calendar
  3. Widget:Google Document
  4. Widget:Google Form
  5. Widget:Google Maps
  6. Widget:Google Presentation
  7. Widget:Google Street View
  8. Widget:LinkedIn Company
  9. Widget:PiX
  10. Widget:Sketchfab
  11. Widget:SoundCloud
  12. Widget:Vimeo
  13. Widget:YouTube
  14. Widget:P5js
  15. Widget:P5

Para una versión actualizada de los Widgets disponibles, puedes revisar todos los widgets instalados


Otras Extensiones

Citas

Extensión: http://www.mediawiki.org/wiki/Extension:Cite/Cite.php

“El territorio ya no precede al mapa, ni lo sobrevive. De aquí en adelante, es el mapa el que precede al territorio, es el mapa el que engendra el territorio" [1].

Texto Desplegable

Crea una caja div de texto desplegable que puede ocultarse para despejar la vista. Se necesitan crear 2 elementos:

  1. el elemento que gatilla el comportamiento de expandir y colapsar
  2. el contenedor del contenido a expandir u ocultar

El primer elemento puede estar dentro de un div o span y debe tener una clase: mw-customtoggle-ejemplo1 donde ejemplo1 es un nombre que debe ser inventado cada vez de acuerdo al contenido y al contexto. Es segundo elemento contenedor, por su parte, debe tener un id mw-customcollapsible-ejemplo1 con el mismo nombre ejemplo1 para asociar el gatillador al contenedor. El hecho de que exista un nombre único permite múltiples intancias de contenido desplegable en una página.

En esta sección se hace uso de la plantilla {{Lorem}} que genera texto simulado.

Ejemplo

<span class='mw-customtoggle-ejemplo1 link-toggle'>esto despliega texto</span>

<div class='mw-collapsible mw-collapsed' id='mw-customcollapsible-ejemplo1'>{{Lorem}}</div>

Este código genera esto:

Esto despliega texto

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris cursus sem massa, eget placerat purus vehicula vel. Phasellus arcu elit, hendrerit ac nisl eu, fermentum rutrum purus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi pharetra accumsan rutrum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam non egestas mi. Duis molestie elit lorem, vel auctor eros scelerisque quis. Sed ut auctor sem. Vivamus vel purus eros. Nulla congue, mauris at ultrices rhoncus, sem dui congue orci, quis egestas ipsum nisl at magna. Aenean metus eros, porttitor ut neque pulvinar, eleifend consequat erat. Vivamus eget mi ante. Ut in commodo quam. Suspendisse arcu tortor, fringilla in ligula sed, congue sagittis mi. Aliquam dictum sapien ut velit fermentum, ut commodo ligula tristique. Morbi et nulla enim.

Nam non pellentesque nisl. Quisque est quam, ultrices et enim sed, posuere consectetur augue. Pellentesque id quam pharetra, pulvinar erat id, accumsan nibh. Nam id vulputate nunc, ac sagittis leo. Nunc eu accumsan nulla, non aliquam velit. Aenean enim massa, dapibus in tincidunt iaculis, maximus sit amet libero. Aenean dignissim, tortor non rutrum pellentesque, ipsum nulla posuere ex, ac laoreet nisl purus hendrerit sem. Sed purus dui, dapibus vel volutpat ut, placerat hendrerit arcu. Aliquam quam quam, porttitor et fringilla in, tempus sit amet purus. Nulla vel imperdiet nibh.

Duis eleifend metus nec augue cursus rutrum. Vivamus luctus nisi ut orci egestas lacinia. Fusce risus sem, tristique sit amet lectus sit amet, molestie rhoncus massa. Nulla eu felis felis. Morbi consectetur diam eleifend tempus tincidunt. Nulla id fringilla erat, at dictum dui. Sed fermentum tincidunt justo et scelerisque. Pellentesque vitae lacus eget neque convallis blandit quis et enim. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed in mollis sapien, quis rutrum velit. Fusce eu feugiat ante. Donec lacinia sollicitudin nibh sed pellentesque. Quisque laoreet sodales justo sit amet tempor. Donec pellentesque nibh vel eleifend pulvinar.

Phasellus elementum efficitur enim ac finibus. Sed pulvinar elit sit amet est porttitor efficitur. Suspendisse diam nisi, finibus sed dictum eget, mollis commodo augue. Phasellus aliquam laoreet dignissim. Aliquam ut sagittis tortor, quis sollicitudin justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus viverra eu lorem non consectetur. Etiam a ante augue. In nisi mauris, laoreet id lacus eget, viverra aliquet tellus. Sed quis sodales erat.

Fusce consequat mauris eu est ullamcorper tincidunt. Pellentesque non purus vel arcu feugiat ultricies. Integer eget blandit risus, nec eleifend tortor. Aliquam id lorem fringilla, scelerisque risus id, placerat diam. Nunc blandit velit dolor, suscipit hendrerit dui tristique id. Praesent mollis convallis purus. Curabitur interdum sollicitudin ligula non aliquet.

Otros Ejemplos

Un contenedor que aparece colapsado en primera instancia:

<div class="mw-collapsible mw-collapsed">	
{{Lorem}}</div>

Ejemplo:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris cursus sem massa, eget placerat purus vehicula vel. Phasellus arcu elit, hendrerit ac nisl eu, fermentum rutrum purus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi pharetra accumsan rutrum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam non egestas mi. Duis molestie elit lorem, vel auctor eros scelerisque quis. Sed ut auctor sem. Vivamus vel purus eros. Nulla congue, mauris at ultrices rhoncus, sem dui congue orci, quis egestas ipsum nisl at magna. Aenean metus eros, porttitor ut neque pulvinar, eleifend consequat erat. Vivamus eget mi ante. Ut in commodo quam. Suspendisse arcu tortor, fringilla in ligula sed, congue sagittis mi. Aliquam dictum sapien ut velit fermentum, ut commodo ligula tristique. Morbi et nulla enim.

Nam non pellentesque nisl. Quisque est quam, ultrices et enim sed, posuere consectetur augue. Pellentesque id quam pharetra, pulvinar erat id, accumsan nibh. Nam id vulputate nunc, ac sagittis leo. Nunc eu accumsan nulla, non aliquam velit. Aenean enim massa, dapibus in tincidunt iaculis, maximus sit amet libero. Aenean dignissim, tortor non rutrum pellentesque, ipsum nulla posuere ex, ac laoreet nisl purus hendrerit sem. Sed purus dui, dapibus vel volutpat ut, placerat hendrerit arcu. Aliquam quam quam, porttitor et fringilla in, tempus sit amet purus. Nulla vel imperdiet nibh.

Duis eleifend metus nec augue cursus rutrum. Vivamus luctus nisi ut orci egestas lacinia. Fusce risus sem, tristique sit amet lectus sit amet, molestie rhoncus massa. Nulla eu felis felis. Morbi consectetur diam eleifend tempus tincidunt. Nulla id fringilla erat, at dictum dui. Sed fermentum tincidunt justo et scelerisque. Pellentesque vitae lacus eget neque convallis blandit quis et enim. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed in mollis sapien, quis rutrum velit. Fusce eu feugiat ante. Donec lacinia sollicitudin nibh sed pellentesque. Quisque laoreet sodales justo sit amet tempor. Donec pellentesque nibh vel eleifend pulvinar.

Phasellus elementum efficitur enim ac finibus. Sed pulvinar elit sit amet est porttitor efficitur. Suspendisse diam nisi, finibus sed dictum eget, mollis commodo augue. Phasellus aliquam laoreet dignissim. Aliquam ut sagittis tortor, quis sollicitudin justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus viverra eu lorem non consectetur. Etiam a ante augue. In nisi mauris, laoreet id lacus eget, viverra aliquet tellus. Sed quis sodales erat.

Fusce consequat mauris eu est ullamcorper tincidunt. Pellentesque non purus vel arcu feugiat ultricies. Integer eget blandit risus, nec eleifend tortor. Aliquam id lorem fringilla, scelerisque risus id, placerat diam. Nunc blandit velit dolor, suscipit hendrerit dui tristique id. Praesent mollis convallis purus. Curabitur interdum sollicitudin ligula non aliquet.


Un contenedor que aparece abierto y permite colapsarse:

<div class="mw-collapsible">
{{Lorem}}</div>

Ejemplo:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris cursus sem massa, eget placerat purus vehicula vel. Phasellus arcu elit, hendrerit ac nisl eu, fermentum rutrum purus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi pharetra accumsan rutrum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam non egestas mi. Duis molestie elit lorem, vel auctor eros scelerisque quis. Sed ut auctor sem. Vivamus vel purus eros. Nulla congue, mauris at ultrices rhoncus, sem dui congue orci, quis egestas ipsum nisl at magna. Aenean metus eros, porttitor ut neque pulvinar, eleifend consequat erat. Vivamus eget mi ante. Ut in commodo quam. Suspendisse arcu tortor, fringilla in ligula sed, congue sagittis mi. Aliquam dictum sapien ut velit fermentum, ut commodo ligula tristique. Morbi et nulla enim.

Nam non pellentesque nisl. Quisque est quam, ultrices et enim sed, posuere consectetur augue. Pellentesque id quam pharetra, pulvinar erat id, accumsan nibh. Nam id vulputate nunc, ac sagittis leo. Nunc eu accumsan nulla, non aliquam velit. Aenean enim massa, dapibus in tincidunt iaculis, maximus sit amet libero. Aenean dignissim, tortor non rutrum pellentesque, ipsum nulla posuere ex, ac laoreet nisl purus hendrerit sem. Sed purus dui, dapibus vel volutpat ut, placerat hendrerit arcu. Aliquam quam quam, porttitor et fringilla in, tempus sit amet purus. Nulla vel imperdiet nibh.

Duis eleifend metus nec augue cursus rutrum. Vivamus luctus nisi ut orci egestas lacinia. Fusce risus sem, tristique sit amet lectus sit amet, molestie rhoncus massa. Nulla eu felis felis. Morbi consectetur diam eleifend tempus tincidunt. Nulla id fringilla erat, at dictum dui. Sed fermentum tincidunt justo et scelerisque. Pellentesque vitae lacus eget neque convallis blandit quis et enim. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed in mollis sapien, quis rutrum velit. Fusce eu feugiat ante. Donec lacinia sollicitudin nibh sed pellentesque. Quisque laoreet sodales justo sit amet tempor. Donec pellentesque nibh vel eleifend pulvinar.

Phasellus elementum efficitur enim ac finibus. Sed pulvinar elit sit amet est porttitor efficitur. Suspendisse diam nisi, finibus sed dictum eget, mollis commodo augue. Phasellus aliquam laoreet dignissim. Aliquam ut sagittis tortor, quis sollicitudin justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus viverra eu lorem non consectetur. Etiam a ante augue. In nisi mauris, laoreet id lacus eget, viverra aliquet tellus. Sed quis sodales erat.

Fusce consequat mauris eu est ullamcorper tincidunt. Pellentesque non purus vel arcu feugiat ultricies. Integer eget blandit risus, nec eleifend tortor. Aliquam id lorem fringilla, scelerisque risus id, placerat diam. Nunc blandit velit dolor, suscipit hendrerit dui tristique id. Praesent mollis convallis purus. Curabitur interdum sollicitudin ligula non aliquet.
  1. Simulacra and Simulations. Jean Baurillard, Selected Writings. Mark Poster (Editor). Stanford University Press, 1988. Pag.166