Taller+Avanzado+de+wiki

toc

=Los Archivos de Sandbox=  | | Algunos principios generales | | Embedding desapareado códigos HTML | | Creación de la libre adaptación de enlaces | |
 * | De colores bonitos cuadros de | | A pie de página de fantasía | | Cambiar el comportamiento por defecto | |
 * | Botón de estilo enlaces | | Una página de dos columnas | | Sangrías de párrafo | |
 * | Esquema con formato listas | | Todo sobre los fondos | | Todo sobre las fuentes | |
 * | Micro-hojas de estilo | | Algunas recetas pequeñas | | reproductores iframe | |
 * | Los mapas de imágenes en páginas wiki | | Una presentación de diapositivas JavaScript | | Desove ventanas emergentes | |

Algunas recetas pequeñas
Diseño de una imagen Creación de un botón de TopLink estilo (1) Creación de un botón de vínculo superior de estilo (2) Un índice alfabético y empotrables Una tabla flotante



Diseño de una imagen
Puede sustituir el tratamiento por defecto Wikispaces de las imágenes utilizando el **Widget Herramienta** ( "Otros HTML") para insertar el código de la imagen directamente en la página. Utilice el **style =** parámetro para especificar exactamente cómo desea que su imagen aparezca. Por ejemplo:

code  code Tenga en cuenta el subdirectorio **"/ espacio / showimage /"** en la dirección URL de la imagen. Aquí es donde se almacenan las imágenes Wikispaces, cuando son imágenes de código directamente, es necesario incluirla. Si copia este código, asegúrese de quitar el salto de línea, que se añadió a mantener el texto de escorrentía a la parte derecha de la pantalla.

Ver ejemplo

superior



Creación de un botón de TopLink estilo (1)
superior

Usted puede haber notado el alineado a la derecha de "arriba" botones de esta página. (Hay otro por encima de este párrafo, en caso de que se han perdido.) Son de estilo CSS-enlaces, una alternativa a la simple superior enlaces. He aquí cómo hemos creado:

En primer lugar, definir una nueva ** ** clase en su hoja de estilos. No tiene que ser perfecto, ya que siempre puede ajustar más tarde. Aquí está el código de este estilo wiki: code . wiki div.toplink ( text-align: center;  background-color: # eff3f6;  padding: 1px 20px;  border-top: 3px solid # fafbfc;  border-bottom: 3px solid # e1e4e9;  margin: 0;  float: right; )

. wiki div.toplink a ( color: # 000099;  font-weight: bold;  text-decoration: none; ) code El **float: right;** es lo que envía el botón a la derecha de la página.

Una vez que ha definido su estilo, crear una página nueva denominada **include_toplink**. Cambie al editor de texto, si no están ya utilizando. En la página, ponga lo siguiente:

1) el código incrustado, insertado mediante el **Widget Herramienta** ( "Otros HTML"): code language="JavaScript"   document.write ( ' ')  code 2) el texto con el tipo (no integrado): code url) # top | arriba code 3) el código incrustado, insertado mediante el **Widget Herramienta** ( "Otros HTML"): code language="JavaScript"   document.write ( '')  code Ahora quitar los retornos de carro entre las tres partes de la página. El resultado final será similar a esta: code media type = "custom" key = "271828 " url) # top | arriba Media type =" custom "key =" 314159 " code Ahora ha creado su código de botón. Para añadir a una página wiki, sólo tiene que utilizar una página de incluir la declaración: code include page = "include_toplink" code Asegúrese de añadir el código de etiqueta: code  code a la parte superior de cada página. (En realidad, esto funcionará bastante bien, incluso sin la etiqueta! Pero es más elegante para incluirlo.)

Y ahí lo tienes!

superior



Creación de un botón de vínculo superior de estilo (2)


Aquí hay otro botón de TopLink estilo. Es mucho más sencillo que el que acabamos de definir, ni siquiera es necesario añadir nada a la hoja de estilos!

Encontrar o crear una imagen a utilizar para su enlace. Cargar la imagen en el wiki. La imagen que utiliza se denomina "top.gif".

Ahora, hacer una nueva página. Dado que este es el enlace de arriba segundo que he creado, la página que hice para que se denomina **include_toplink2**. En esta página, cambiar a el editor de texto y escriba el siguiente código: code Imagen: top.gif align = "right" link = "$ (página) code Este código se utiliza **variables wiki** para crear el vínculo, haga clic en la imagen se envía al usuario a la **# top** la etiqueta en la página actual.

Para añadir el enlace, utilice una página de incluir la declaración: code include page = "include_toplink2" code



Un índice alfabético y empotrables
Si crea un montón de páginas con listas alfabéticas de las cosas, usted encontrará esta muy práctico. Es muy útil, incluso si se crea sólo unas pocas páginas tal! Esto es lo que parece en la página:

| 1 | un | b | c | d | E | f | g | h | i | j | k | l | m |
 * n | o | p | q | r | s | t | u | v | w | x | y | z |

Usted tendrá que crear una página denominada **HTML_div_center**. Utilice el **Widget Herramienta** ( "Otros HTML") para incrustar el código siguiente en él: code language="JavaScript"  document.write ( ' ')  code Si aún no lo ha hecho, crear una página denominada **HTML_div_close**, En el que integrar el siguiente código: code language="JavaScript"  document.write ( '')  code Ahora, puede crear una página denominada **include_alpha_index** (o un nombre similar). Escriba el siguiente código en él, utilizando el Editor de texto: code include page = "HTML_div_center" | 1 |  a | b | C |  D |  E] ] | [[($ page) # f | f |  g |  h |  i |  j] ] | [[($ page) k # | k |  l |  m |  s |  t |  U |  v] ] | [[($ page) # w | w |  x |  y |  z | include page = "HTML_div_close" code (Tenga en cuenta que he insertado varios saltos de línea en el código anterior para evitar que se ejecutan del lado derecho de la página. En el código real, el salto de línea sólo es después de la carta **m**.)
 * n | O |  p |  q  |  r |

Inserte el índice en la página wiki con una página incluir la declaración: code include page = "include_alpha_index" code Por último, debe crear todos los anclajes en la página siguiente: code    etc code Si lo haces a menudo, puede que quiera hacer una plantilla de página con el menú, los cierres y las cabeceras para cada letra del alfabeto.

Usted puede ver el código en la acción en mi Blogs página.

superior



Una tabla flotante
La "flotación" de propiedad se aplica generalmente a las imágenes. Sin embargo, CSS apoya todos los elementos flotantes. Aquí se utiliza una modificación de estilo sencillo a flotar una tabla.

Vamos a definir una nueva división, en la que todas las tablas de flotar a la derecha de la página. Aquí está el código para agregar a la hoja de estilos: code . mesa div.floatright wiki (float: right) code Ahora crear una página wiki llamada **HTML_div_floatright**, Y utilizar la **Widget Herramienta** ( "Otros HTML") para inyectar el código siguiente en él: code language="JavaScript"  document.write ( ' ')  code Si aún no lo ha hecho, crear una página wiki segundo nombre **HTML_div_close**, Y utilizar la **Incrustar Media Tool** para insertar el siguiente código: code language="JavaScript"  document.write ( '')  code Ahora tiene su caja de herramientas. Para crear una tabla de la derecha flotante, agregar estos incluyen declaraciones a su página: code include page = "HTML_div_floatright"

include page = "HTML_div_close" code Cualquier tabla que construir entre las dos incluyen declaraciones flotará a la derecha de la página! El texto introducido después de la tabla se ajuste a su alrededor.

Ver http://sealwyf.wikispaces.com/Sandbox015#txtimage

http://www.youtube.com/user/onyosss

Wikispaces y Del.ici.us

http://www.youtube.com/watch?v=TppgDkNko2U&feature=channel_page

Insertar Feeds a wikispaces.

http://www.youtube.com/watch?v=Leuda2MWfK8&feature=channel_page

=ÍNDICE DEL TALLER EXPERTO=


 * 1) **Unir wiki con otras páginas.**
 * 2) Unir wiki pública y wiki privada (para acceder a una de ellas sólo con contraseña). sesión 8
 * 3) Unir Wikispaces con GoogleSites.
 * 4) **Ajustes Avanzados - Aspecto Visual.**
 * 5) Hoja de estilos de wiki (sólo con cuentas Plus - Educativa)
 * 6) Cambiar el theme (sólo con cuentas Plus - Educativa).
 * 7) Modificar el ancho de la barra de menú.
 * 8) Modificar los iconos y el texto que se muestran en el menú (parte no editable de forma externa). SESIÓN 1 (primer intento)
 * 9) Modificar lo que se muestra en el pie de página: nuestro nombre, tipo de licencia, enlaces a nuestras páginas o colegio...
 * 10) Modificar la visibilidad de botones del menú (parte no editable de forma externa).
 * 11) Trucos de expertos. Tomado de http://sealwyf.wikispaces.com/Sandbox019. En breve, en español.
 * 12) Insertar operaciones matemáticas.
 * 13) Embedding unpaired HTML codes
 * 14) Pretty colored boxes
 * 15) All about backgrounds - Ejemplo: http://sealwyf.wikispaces.com/Scratchpad002
 * 16) Micro-stylesheets
 * 17) Changing default behavior
 * 18) Button-styled links
 * 19) A two-column page
 * 20) Paragraph indents
 * 21) Outline-formatted lists
 * 22) Some small recipes
 * 23) Creating self-adjusting links
 * 24) A fancy page footer
 * 25) All about backgrounds
 * 26) All about fonts
 * 27) Some small recipes
 * 28) iframe embeds
 * 29) Imagemaps in wiki pages
 * 30) A JavaScript slide show
 * 31) Spawning popup windows
 * 32) Onmouseover. Ver http://sealwyf.wikispaces.com/Scratchpad003
 * 33) Más trucos: http://gettingtrickywithwikis.wikispaces.com/

= ** ___ Unir wiki pública y wiki privada ** =

Deseamos que una de nuestras wikis tenga una parte privada, de acceso restringido para nuestros alumnos u otros usuarios. Por ejemplo, en ella podemos tener a mano nuestros exámenes, apuntes, notas de los alumnos, etc., de modo que siempre podamos tener esto a mano, en cualquier sitio que nos encontremos. O puede ser una parte de acceso exclusivo a padres y alumnos, donde subamos todas las fotografías y vídeos realizados en el aula, de modo que el contenido quede protegido.

La solución es unir dos wiki de apariencia externa idéntica, con la diferencia en que una será pública o protegida (la wiki abierta para nuestros alumnos) y la otra será privada (la parte exclusiva para el docente).

En primer lugar, vamos a crear dos wikis. Para ayudarnos a diferenciar en qué wiki estamos, podemos usar una URL (nombre de wiki) que sea algo así como:
 * Wiki pública: "wikideclase.wikispaces.com"
 * Wiki privada: "wikideclase-zonaprivada.wikispaces.com"

Lo siguiente a preparar es su aspecto, que debe ser idéntico. De este modo, la navegación entre ellos resultará transparente para quien deba usarla. Así, cuando terminemos de editar una de las wikis (tema, colores, logo, menú...), copiaremos todo esto en la otra wiki.

A continuación, hacemos que una de nuestras wikis se convierta en privada. Para ello, **es imprescindible que al menos una de las wikis (la que haremos privada) esté actualizada al PLAN PLUS** (gratuito para Educación K-12). Solventado esto, entramos en ADMINISTRAR WIKI y luego en la sección PERMISOS. Allí, seleccionamos la opción PRIVADA.

En la wiki privada no debemos olvidar añadir como **administradores** a las personas que tendrán acceso a ellas. De otro modo, les resultará imposible ni siquiera ver esta página.

Ahora no tenemos más hacer la conexión. En la wiki "pública" pondremos en el menú un vínculo que puede llamarse "//Docentes//", "//Acceso privado//" o similar. Y en la wiki "privada", además del menú de la wiki pública (que quedará siempre en la parte superior) añadiremos en la parte inferior todos los enlaces que consideremos necesarios, de acceso exclusivo para el docente.

Cuando un usuario de la wiki pública trate de acceder a la parte privada, aparecerá este mensaje:



Además, el menú de la wiki privada quedará oculto también. Lo único que cambiará en la barra de navegación (y será inapreciable para quien no sepa qué buscar) es la url del sitio, que cambiará con la dirección de la wiki privada. Sólo en el caso de que se usen diferentes logos o colores, se notará el cambio. En otro caso, todo quedará transparente para el usuario.


 * TAREA**

1. Crear un espacio PRIVADO para nuestra wiki de aula. Crear una wiki nueva desde [], en donde accedes a crear directamente una cuenta educativa. Y crearla privada.

2. Poner el aspecto visual de la wiki privada para que sea idéntico (colores, tema, etc.) que el de la wiki pública.

3. Añadir un enlace desde el menú de tu wiki pública para poder acceder a esta wiki privada.

4. Añadir al tutor/a de este taller como miembro de vuestra wiki privada, para que pueda ver vuestros progresos (consultar el nombre de usuario del tutor/a). Más tarde, lo podéis eliminar como miembro.

5. Insertar algunos documentos de Google Docs en las páginas de nuestro espacio privado:
 * Una hoja de cálculo con algo que necesites usar en clase: horario, control de asistencia, notas de los alumnos.... Debe estar en formato editable.
 * Un formulario para introducir los datos de tus alumnos. En esa misma página, un enlace hacia otra página de la wiki privada, donde vas a incrustar la hoja de cálculo donde se muestran estos datos de tus alumnos. El formulario y la hoja de cálculo con los datos que sean NO editables desde la wiki (más tarde, puedes cambiar que sean o no editables, según tus necesidades).
 * Un documento (programación, examen, etc.) en formato NO editable desde la wiki.
 * Cualquier otra cosa que os pueda ser de utilidad (agenda privada, archivos de vídeo, audio, etc.) que debáis consultar desde el colegio o que en un momento debáis mostrar a vuestros alumnos en clase (accediendo con vuestro usuario, no para que accedan ellos con su nombre de usuario... por ejemplo, para mostrarlo en una pizarra digital...).

= ** ___ Insertar operaciones matemáticas ** =

Ahora es sencillo insertar fórmulas matemáticas en wikispaces, usando el lenguaje //Latex.// Según la [|Wikipedia], //Latex// es:

//un// //procesador de textos// //basado en un// //lenguaje de marcado// //formado por un gran conjunto de// //macros// //de// //TeX////, escritas inicialmente por// //Leslie Lamport// //(**La**mport**TeX**) en// //1984////, con la intención de facilitar el uso del lenguaje de composición tipográfica creado por// //Donald Knuth////. Es muy utilizado para la composición de artículos académicos, tesis y libros técnicos, dado que la calidad tipográfica de los documentos realizados con LaTeX es comparable a la de una editorial científica de primera línea. LaTeX es// //software libre// //bajo licencia// //LPPL////.//

//Latex// presupone una filosofía de trabajo diferente a la de los procesadores de texto habituales (conocidos como WYSIWYG, es decir, «lo que ves es lo que obtienes») y se basa en //comandos//.

Aquí tenemos dos ejemplos de código matemático y cómo se ve después en la página. code math \tilde{f}(\omega)=\int_{-\infty}^{\infty} f(t) e^{-i\omega t}\,dt math code || Se muestra así:
 * El código:

|| code math -\frac{\hbar^2}{2m}\nabla^2 \Psi + V\Psi=i \hbar \frac{\partial \Psi}{\partial t} math code || Se muestra así:
 * El código:

|| Puedes ayudar al equipo de LaTeX a dar soporte a las fórmulas matemáticas, usando la etiqueta (tag) //**<span class="wiki_link_new">math **// en tu página.

Para que sea fácil insertar estos códigos, existe un programa (gratuito), [|TeXaide,] con el que creas las fórmulas en modo WYSIWYG y te genera el código de la fórmula que debes copiar y pegar en Wikispaces.

VER ESTO PARA VER SI SE PUEDE AÑADIR ALGO MÁS A ESTA PÁGINA http://aula21.net/aulablog21/archives/2007/10/25/formulas-matemticas-en-wikispaces/

Editor online http://rinconmatematico.com/latexrender/

Ver en castellano

http://sealwyf.wikispaces.com/Sandbox002

Otros (ya lo tengo) http://gettingtrickywithwikis.wikispaces.com/