Biomod/2014/UANL/Manual Wiki/index

From OpenWetWare
Revision as of 20:20, 7 June 2014 by Adrian Palacios Munoz (talk | contribs) (avances)
Jump to navigationJump to search

<html> <head>

 <meta content="text/html; charset=UTF-8"
http-equiv="content-type">
 <title>Manual Wiki</title>

</head> <body> <h1 style="text-align: center;">Manual para edición de la Wiki</h1> <br> <ol>

 <li>Requisitos previos.</li>
 <li>Conceptos básicos de un código HTML.</li>
 <li>¿Cómo editar la Wiki?</li>
 <li>Pasos Básicos.</li>
 <ol>
   <li>Creación del código</li>
   <li>Herramientas WYSWYG</li>
   <ol>
     <li>Kompozer</li>
     <li>Editor Online</li>
   </ol>
   <li>Tablas</li>
   <li>Imagenes</li>
   <li>Ecuaciones</li>
 </ol>
 <li>Buenos hábitos.</li>

</ol> <h2>Requisitos Previos</h2> Si te encuentras leyendo esto, debo suponer que ya te has registrado en la pagina de OpenWetWare, y ya tienes tu propia cuenta. Si no es así, apresúrate. Da click en "Log In" y sigue los pasos para registrarte. Cuando tengas la confirmación de tu cuenta, regresa aquí para que aprendas a trabajar con esta herramienta.<br> <br> <h2>Conceptos Básicos de HTML</h2> Para visualizar una página de internet, se ha diseñado un código en especifico, HTML. Este código puede ser escrito en cualquier editor de texto, o en programas sofisticados que permitan al usuario trabajar en un ambiente más cómodo y crear códigos más detallados. Un código HTML está compuesto por secciones o etiquetas entre corchetes triangulares &nbsp;"&lt;etiqueta&gt; &lt;/etiqueta&gt;" que asignan formato o propiedades a lo que se encuentre entre las mismas. A continuación se presenta un ejemplo de un código HTML:<br> <br> <div style="margin-left: 200px;"><span

style="font-style: italic;">&lt;html&gt;</span><br
style="font-style: italic;">

<span style="font-style: italic;">&lt;head&gt;</span><br

style="font-style: italic;">

<span style="font-style: italic;">&lt;title&gt;Titulo de Hola Mundo&lt;/title&gt;</span><br

style="font-style: italic;">

<span style="font-style: italic;">&lt;/head&gt;</span><br

style="font-style: italic;">

<span style="font-style: italic;">&lt;body&gt;</span><br

style="font-style: italic;">

<span style="font-style: italic;">Hola Mundo</span><br

style="font-style: italic;">

<span style="font-style: italic;">&lt;br&gt;</span><br

style="font-style: italic;">

<span style="font-style: italic;">Hola!</span><br

style="font-style: italic;">

<span style="font-style: italic;">&lt;/body&gt;</span><br

style="font-style: italic;">

<span style="font-style: italic;">&lt;/html&gt;</span><br> </div> <br> El código crearía una página con el título "Título de Hola Mundo", y consistiría de dos tres líneas de texto, "Hola Mundo", una línea vacía y "Hola!". Para exhibir texto (sin ningún formato) solo es necesario escribirlo entre las etiquetas. Existen etiquetas que solo pueden utilizarse dentro de ciertas partes del código, como <span

style="font-style: italic;">&lt;title&gt;&lt;/title&gt;</span>.

Las etiquetas más importantes y básicas son las siguientes:<br> <br> <table

style="text-align: left; margin-left: auto; margin-right: auto; width: 582px; height: 192px;"
border="1" cellpadding="2" cellspacing="2">
 <tbody>
   <tr>
     <td style="text-align: center;"><span
style="font-weight: bold;">Etiquetas</span></td>
     <td style="text-align: center;"><span
style="font-weight: bold;">Función</span></td>
   </tr>
   <tr>
     <td style="font-style: italic;">&lt;html&gt;&lt;/html&gt;</td>
     <td>Señala inicio y fin del código HTML.</td>
   </tr>
   <tr>
     <td style="font-style: italic;">&lt;head&gt;&lt;/head&gt;</td>
     <td>Encierra todo lo que será encabezado.</td>
   </tr>
   <tr>
     <td style="font-style: italic;">&lt;title&gt;&lt;/title&gt;</td>
     <td>Encierra todo lo que será el título. Debe ir dentro de <span
style="font-style: italic;">&lt;head&gt;&lt;/head&gt;</span>.</td>
   </tr>
   <tr>
     <td style="font-style: italic;">&lt;body&gt;&lt;/body&gt;</td>
     <td>Encierra todo lo que será el cuerpo (la página web)</td>
   </tr>
   <tr>
     <td style="font-style: italic;">&lt;br&gt;</td>
     <td>Salto de línea.</td>
   </tr>
 </tbody>

</table> <br> Para agregar más información al código, solo es necesario agregar dentro de <span style="font-style: italic;">&lt;body&gt;&lt;/body&gt;</span>&nbsp; lo que se guste incorporar a la página.<br> <br> <br> <h2>¿Cómo editar la Wiki?</h2> Para que podamos trabajar activamente editando nuestra página Wiki, solo necesitamos hacer una serie de pasos muy sencillos. Más adelante se verá que no es necesario aprender escribir código HTML para trabajar en nuestra Wiki, simplemente las nociones básicas serán importantes.<br> <br> Para editar una página dentro de OpenWetWare, necesitamos estar conectados en nuestra cuenta, abriendo la página que se desea editar. Si lo que se quiere es "Crear" la página, será necesario pensar en la dirección que se quiera dar a la página, introducirla en el navegador y asegurarse de que no halla sido tomada ya.<br> <br> Por ejemplo, supongamos que queremos crear una página llamada "nueva pagina". Al entrar en la dirección que queremos para nuestra página, observaremos una página como la siguiente:<br> <br> <div style="text-align: center;"><img

style="width: 1070px; height: 534px;" alt=""
src="http://openwetware.org/images/9/9a/UANL_Manual1.png"><br>

</div> <br> Aquí podemos ver que me encuentro conectado en mi cuenta "Adrian Palacios Munoz". También es posible ver una pestaña que dice "create", que más adelante nos permitirá comenzar a editar nuestra página. Una vez sea creada la página, esta opción cambiará de nombre, y dirá "edit".<br> Para asegurarse de que no halla sido creada ya por alguien más, deberas observar un texto en la página "There is currently no text in this page, you can search for this page title in other pages or edit this page". Esto quiere decir que la página no ha sido utilizada anteriormente, de lo contrario se observaría contenido, o en su defecto, se vería algo como lo siguiente:<br> <br> <div style="text-align: center;"><img

style="width: 697px; height: 385px;" alt=""
src="http://openwetware.org/images/f/ff/UANL_Manual5.png"><br>

</div> <br> Esta página ya fue creada y editada anteriormente por alguien, y sería una falta de respeto tomar esta página y editarla sin su permiso.<br> <br> Para comenzar a editar nuestra página, damos click en la pestaña "create", o en caso de que vayamos a editar una página ya existente "edit". Se nos mostrará una página como la siguiente:<br> <br> <div style="text-align: center;"><img

style="width: 968px; height: 563px;" alt=""
src="http://openwetware.org/images/0/05/UANL_Manual2.png"><br>

</div> <br> Arriba nos indica la página que estaremos editando. El recuadro gris nos avisará si alguien más está editando la página, y cuanto tiempo lleva (o cuanto tiempo llevamos nosotros editando la página). El recuadro grande blanco es el área de trabajo, donde escribiremos nuestro código o texto para exhibir en la página. Seguido está el recuadro de "Summary". Allí es dónde describiremos el cambio/s que hicimos a la página. Finalmente tenemos tres botones. El primero, "Save page", guardará los cambios que hemos realizado directamente. El segundo, "Show preview", nos mostrará un adelanto de cómo se vería la página si incorporara nuestros cambios. El tercero, "Show changes", nos mostrará los cambios que hemos hecho. Lo más recomendable es hacer uso del segundo botón para asegurarse de que todo esté funcionando como debe de ser. Al hacerlo nos aparecerá la siguiente página:<br> <br> <div style="text-align: center;"><img

style="width: 947px; height: 550px;" alt=""
src="http://openwetware.org/images/7/7f/UANL_Manual3.png"><br>

</div> <br> En la parte superior se visualiza la vista previa, mientras que abajo tenemos los mismos recuadros de edición. Aquí he escrito "Hola!" y he descrito en "Summary" que se trata de lo siguiente: "Dije Hola!". De esta manera, cuando alguien más observe el cambio que hice, verá "Dije Hola!" y entenderá que fue lo que hice. Esto es más y más util conforme el código de la página crezca y se vuelva menos obvio el cambio que realiza cada persona. Demos click ahora en "Save page" y veamos el resultado:<br> <br> <div style="text-align: center;"><img

style="width: 1005px; height: 558px;" alt=""
src="http://openwetware.org/images/6/61/UANL_Manual4.png"><br>

</div> <br> Al realizar la edición, en la esquina inferior izquierda aparecerá el nombre de los usuarios que han contribuído a editar esta página. Cuando alguien más edite la página, su nombre se agregará a esta lista. También aparece abajo la fecha y hora en que fue salvada la edición actual.<br> <br> </body> </html>