Biomod/2014/UANL/Manual Wiki/Herramientas: Difference between revisions
(Creando) |
(nombre de links) |
||
| (One intermediate revision by the same user not shown) | |||
| 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. 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> | ||
<div style="text-align: justify;"> | <br> | ||
realidad no es | <div style="text-align: justify;">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 | 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 1</a></li> | |||
<li><a href="http://freeonlinehtmleditor.com/">Free | |||
Online HTML Editor 2</a></li> | |||
<li><a href="http://www.free-online-html-editor.com/">Free | |||
Online HTML Editor 3</a></li> | |||
</ul> | |||
<br> | |||
<div style="text-align: center;"><a href="Pasos">Anterior | |||
(Pasos)</a> | |||
- <a href="index">Regresar | |||
al Inicio</a> | |||
- <a href="Imagenes">Siguiente | |||
(Imágenes)</a></div> | |||
<br> | <br> | ||
</body> | </body> | ||
</html> | </html> | ||
Latest revision as of 16:59, 15 June 2014
<html> <head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"> <title>Herramientas</title>
</head> <body> <h2>Herramientas WYSIWYG</h2> <br> <div style="text-align: justify;">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.<br> </div> <br> <div style="text-align: justify;">Existen dos herramientas populares que se utilizarán en el proyecto: Kompozer y Free Online HTML Editor.<br> </div> <br> <div style="text-align: justify;">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 <a
href="http://kompozer.net/">http://kompozer.net/</a>).
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.<br> </div> <br> <div style="text-align: center;"><img
style="width: 584px; height: 130px;" alt="" src="http://openwetware.org/images/d/d1/UANL_Manual15.png"><br>
</div> <br> <div style="text-align: justify;">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.<br> </div> <br> <div style="text-align: center;"><img
style="width: 706px; height: 100px;" alt="" src="http://openwetware.org/images/1/11/UANL_Manual16.png"><br>
</div> <br> <ul>
<li><em>New</em>: Este botón creará una nueva
página en la cuál trabajar.</li>
<li><em>Open</em>: Abrirá un archivo HTML que
tengas guardado en tu computadora.</li>
<li><em>Save</em>: Salvará el estado de los
archivos con los que estés trabajando en el momento.</li>
<li><em>Undo y Redo</em>: 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.</li>
<li><strong><em>Link</em></strong>:
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.<br>
<div style="text-align: justify;">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 (<span
style="font-style: italic;">http://...</span>), 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.<br>
</div> <div style="text-align: center;"><img style="width: 462px; height: 399px;" alt="" src="http://openwetware.org/images/3/34/UANL_Manual18.png"><br> </div> </li> <li><strong><em>Image</em></strong>: Te
permitirá añadir una imagen a tu página.<br>
<div style="text-align: justify;">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).<br>
</div> <div style="text-align: center;"><img style="width: 413px; height: 310px;" alt="" src="http://openwetware.org/images/4/4c/UANL_Manual19.png"><br> </div> </li> <li><strong><em>Table</em></strong>: Te
permitirá crear una tabla para ordenar tu información.<br>
<div style="text-align: justify;">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.<br>
</div> <div style="text-align: center;"><img style="width: 273px; height: 257px;" alt="" src="http://openwetware.org/images/d/da/UANL_Manual20.png"><br> </div> </li>
</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> <div style="text-align: justify;">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.<br> </div> <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 1</a></li>
<li><a href="http://freeonlinehtmleditor.com/">Free
Online HTML Editor 2</a></li>
<li><a href="http://www.free-online-html-editor.com/">Free
Online HTML Editor 3</a></li> </ul> <br> <div style="text-align: center;"><a href="Pasos">Anterior (Pasos)</a> - <a href="index">Regresar al Inicio</a> - <a href="Imagenes">Siguiente (Imágenes)</a></div> <br> </body> </html>
