Biomod/2014/UANL/Manual Wiki/Herramientas

From OpenWetWare

(Difference between revisions)
Jump to: navigation, search
(Creando)
(Barra inferior y extra de botones)
Line 38: Line 38:
<br>
<br>
<div style="text-align: justify;">Kompozer tiene una barra
<div style="text-align: justify;">Kompozer tiene una barra
-
de menus sencilla y fácil de usar. A continuación les explicaremos las
+
de menus sencilla y fácil de usar.&nbsp;A continuación les
 +
explicaremos las
funciones de los íconos más básicos.<br>
funciones de los íconos más básicos.<br>
</div>
</div>
Line 121: Line 122:
   </li>
   </li>
</ul>
</ul>
 +
<div style="text-align: justify;">Debajo de estos botones
 +
encontraremos una lista desplegable (la que expone "Body Text" por
 +
default), en la que podras elegir formatos pre-establecidos para tu
 +
texto, como titulos de distintos énfasis, entre otras opciones. Más
 +
abajo encontrarás dos botones con unas "A", usados para disminuir o
 +
aumentar el tamaño del texto, respectivamente. A su derecha se
 +
encuentran las opciones de negritas, inclinación y subrayado.
 +
Finalmente se encuentran los cuatro tipo de alineaciones (Izquierda,
 +
Centro, Derecha o Justificado).<br>
 +
</div>
 +
<br>
<br>
<br>
-
<div style="text-align: justify;">El segundo, que en
+
<div style="text-align: justify;">La&nbsp;segunda
-
realidad no es uno, sino muchos servicios en internet que nos permiten
+
herramienta, que en
 +
realidad no es una, sino muchas, que consisten de servicios en internet
 +
que nos permiten
trabajar de la manera descrita anteriormente. Muchas veces incluso
trabajar de la manera descrita anteriormente. Muchas veces incluso
llevarán el mismo nombre (Free Online HTML Editor), pero a pesar de
llevarán el mismo nombre (Free Online HTML Editor), pero a pesar de
Line 137: Line 151:
</div>
</div>
<br>
<br>
 +
Aquí se presenta una lista de este tipo de editores:<br>
 +
<br>
 +
<ul>
 +
  <li><a
 +
href="http://www.html.am/html-editors/online-html-editor.cfm">Free
 +
Online HTML Editor</a></li>
 +
  <li><a href="http://freeonlinehtmleditor.com/">Free
 +
Online HTML Editor</a></li>
 +
  <li><a href="http://www.free-online-html-editor.com/">Free
 +
Online HTML Editor</a></li>
 +
</ul>
 +
<br>
 +
<div style="text-align: center;"><a href="Pasos">Anterior
 +
(Pasos)</a>&nbsp;&nbsp;&nbsp;
 +
-&nbsp;&nbsp;&nbsp; <a href="index">Regresar
 +
al Inicio</a>&nbsp;&nbsp;&nbsp;
 +
-&nbsp;&nbsp;&nbsp; <a href="Imagenes">Siguiente
 +
(Imágenes)</a></div>
<br>
<br>
</body>
</body>
</html>
</html>

Revision as of 00:52, 14 June 2014

Herramientas

Herramientas WYSIWYG


Este tipo de herramientas son cualquier programa o aplicación en línea que nos permita trabajar en un ambiente similar al de un editor de texto común, con opciones de incorporar imágenes, hipervínculos, tablas, y otros tipos de formatos que habitualmente se usan en la programación básica de HTML. Son herramientas de gran utilidad en situaciones en las que se considera a usuarios no acostumbrados a la programación en HTML.

Existen dos herramientas populares que se utilizarán en el proyecto: Kompozer y Free Online HTML Editor.

El primero es un programa que no requiere de instalación (solo requiere descargar su carpeta, que ya se encuentra en nuestra carpeta Dropbox si formas parte del equipo de este año, sino puedes buscarla en su página http://kompozer.net/). Su implementación es muy sencilla. Una vez tengamos la carpeta a nuestro alcanze, debemos buscar el ejecutable del programa. Ejecutar este archivo hará que nuestro programa comienze a funcionar.



Kompozer tiene una barra de menus sencilla y fácil de usar. A continuación les explicaremos las funciones de los íconos más básicos.



  • New: Este botón creará una nueva página en la cuál trabajar.
  • Open: Abrirá un archivo HTML que tengas guardado en tu computadora.
  • Save: Salvará el estado de los archivos con los que estés trabajando en el momento.
  • Undo y Redo: Regresarán tu archivo una acción antes o después (si es posible). Estos no siempre funcionan bien, así que no se confíen demasiado.
  • Link: Previamente señalando el texto o imagen correspondiente, harán de los elementos señalados un hipervínculo, que redirigirá al usuario a otra página.
    Al dar click en este botón, aparecerá la siguiente ventana. En la primera línea aparecerá el elemento al que se añidirá el hipervínculo, y en la segunda línea pegarás la dirección de la página a la que quieras dirigirte. Ojo, es importante que sea la dirección exacta (http://...), de otra forma podría confundirse el navegador y redirigir a una página equivocada. Habrá ocasiones en que se pueda especificar unicamente la ultima parte de la página, en el caso que quiera ir a http://openwetware.org/wiki/Biomod/2014/UANL/Manual_Wiki/Editando y me encuentre en http://openwetware.org/wiki/Biomod/2014/UANL/Manual_Wiki/Herramientas, únicamente tendré que escribir "Editando" (sin comillas) en el cuadro de texto. Después únicamente basta con dar click en OK.

  • Image: Te permitirá añadir una imagen a tu página.
    Al dar click en este botón, aparecerá la siguiente ventana. La primer pestaña te ofrecerá un cuadro de texto donde pegarás la dirección que corresponde a tu imagen (más adelante te enseñaremos como subir una imagen de tu computadora a internet y  en el proceso obtendras esta dirección correspondiente). Posteriormente debes dar click a la opción "Don't use alternate text" para que se pueda mostrar correctamente la imagen. Puedes editar las dimensiones de tu imagen en la segunda pestaña o hacerlo manualmente como lo harías en Word. Al terminar únicamente damos OK. Para alinear la posición de la imagen puedes seleccionarla y dar click a los botones que alinearían la posición del texto (Izquierda, Centro, Derecha, Justificado).

  • Table: Te permitirá crear una tabla para ordenar tu información.
    Al dar click en este botón, aparecerá la siguiente ventana. Aquí podras seleccionar el tamaño de tu tabla. Simplemente con mover el mouse, los cuadros azules indican el tamaño de tu tabla, al estar conforme das click y la tabla se crea con esas dimensiones. También puedes precisar estas dimensiones en la segunda pestaña de esta ventana (por comodidad o en caso de que no alcanze el número de celdas de la opción anterior). En la tercera pestaña puedes modificar las propiedades de las celdas de tu tabla. Si deseas agregar o eliminar columnas, filas, celdas o incluso anidar tablas, esto lo podrás hacer dando click derecho en la tabla y explorando entre las opciones que te ofrece.

Debajo de estos botones encontraremos una lista desplegable (la que expone "Body Text" por default), en la que podras elegir formatos pre-establecidos para tu texto, como titulos de distintos énfasis, entre otras opciones. Más abajo encontrarás dos botones con unas "A", usados para disminuir o aumentar el tamaño del texto, respectivamente. A su derecha se encuentran las opciones de negritas, inclinación y subrayado. Finalmente se encuentran los cuatro tipo de alineaciones (Izquierda, Centro, Derecha o Justificado).


La segunda herramienta, que en realidad no es una, sino muchas, que consisten de servicios en internet que nos permiten trabajar de la manera descrita anteriormente. Muchas veces incluso llevarán el mismo nombre (Free Online HTML Editor), pero a pesar de provenir de páginas distintas, su función es totalmente análoga. La ventaja de estas opciones es que no requieren descarga de archivos, y pueden accederse desde cualquier lugar en que tengamos acceso a una computadora, sin necesidad de modificar nada en ella misma (perfecto para personas que dependan de un Ciber-Café o computadoras públicas o ajenas). La desventaja de estos servicios es que no permiten guardar los archivos de lo que hemos estado trabajando, ni permiten abrir archivos anteriores, además de que su gama de formatos y diversidad de opciones es menor.

Aquí se presenta una lista de este tipo de editores:


Anterior (Pasos)    -    Regresar al Inicio    -    Siguiente (Imágenes)

Personal tools