Biomod/2014/UANL/Manual Wiki/index: Difference between revisions

From OpenWetWare
Jump to navigationJump to search
m (Biomod/2014/UANL/Manual Wiki moved to Biomod/2014/UANL/Manual Wiki/index: Estructurando la pagina y subpaginas)
(Index)
Line 27: Line 27:
   <li>Buenos hábitos.</li>
   <li>Buenos hábitos.</li>
</ol>
</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>
<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>
<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>
<br>
</body>
</body>
</html>
</html>

Revision as of 10:25, 8 June 2014

<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> <br> <br> <br> </body> </html>

Retrieved from "https://openwetware.org/mediawiki/index.php?title=Biomod/2014/UANL/Manual_Wiki/index&oldid=796865"