Tramas Sensibles
Taller de capacitación docente.
María Gabriela Hernández Celiz y Marcelo Santorelli
Mayo 2012
1. tutorial para registro y operación de Hotglue. también incrustar imágenes vectoriales .svg (que pueden
componerse en el programa de edición vectorial
1.1. ¿Qué es Hotglue? Inkscape) mediante la inserción de código en la
Hotglue es un sistema de manipulación de contenidos correspondiente ventana.
digitales que posibilita cnstruir sitios web directamente
el el navegador. La diferencia con otras opciones se basa 1.2. ¿Por qué Hotglue?
en su operación directa sobre la página resultante, Hay una multiplicidad de recursos para establecer una
evitando interfaces que rompen con su apariencia final. sitio de colaboración virtual, pero no hay una infinita
cantidad de opciones a un mismo requerimiento.
A diferencia de las páginas web tradicionales, nos Algunos se enfocan hacia la generación y edición de
permite: textos (Wikispaces [Link] otros a
de forma gráfica, manual y libre, configurar un diseño compartir archivos a manera de bibliografía (Google
prescindiendo de programas de edición web como Adobe docs), otros proveen espacio de servidor sin importar
Dreamweaver o Bluefish. formatos de archivos y las facilidades para actualizar
almacenar los archivos de la página en el servidor cambios en los diferentes clientes (Dropbox
[Link] y no en nuestra computadora. Se evitan los [Link] o bien servicios destinados a
servidores privados (opcionalmente se puede instalar compartir marcadores de páginas web (Delicious
Hotglue en un servidor privado también), y de [Link] En general, a almacenar datos en
programas para operar dichos servidores y subir la servidores propios, con lo cual se facilita el acceso desde
página, como Filezilla. diferentes computadoras y consecuentemente la
obtener un cuenta rápidamente y comenzar un diseño colaboración. En este curso tratamos de brindar
intuitivo desde una página enteramente en blanco, sin herramientas advirtiendo que son ocasionales y que la
plantillas ni organizaciones previas. provosión del servicio puede ser limitado en tiempo.
extender la composición infinitamente hacia la derecha
y hacia abajo. Hotglue, en particular, reúne las condiciones que
crear objetos, superponerlos, darles transparencia y pueden intesarle a un usuario que desea manejar el
editar otras propiedades gráficas. contenido de su proyecto en correlación con la forma o
generar un árbol de páginas web, sus correspondientes composición. Es decir, una persona con inquietudes
vínculos y disponer de una página extra que resume la creativas que no desea condicionamientos estéticos a
cantidad de páginas que componen el sitio. priori. Para casos en los que se requiera componer en
disponer de herramientas sofisticadas (aunque no formatos tradicionales no creativos, el uso podría
perfectas) de comunicación y colaboración a distancia ocacionar complicaciones.
gratis, y modificable por el usuario desde su fuente (open
source). 1.3. Tutorial
1.3.1. Registro (págoina siguiente.
Además, Hotglue permite el uso opcional de lenguajes Acceda mediante internet a [Link] y
de programación como HTML, Javascript, jQuery y regístrese como lo indican las imágenes siguientes.
Click para
registrarse
nombre de usuario
a elección
contraseña a
elección
repetir
contraseña
proveer dirección
de e-mail
marcar la pistola
de silicona (dato
de humor, sin uso
práctico)
desmarcar la 1ª
(deseo recibir
información...) y
marcar la 2º
(Acepto los
términos)
Confirma registro
y solicita
chequear mail
Activar registro
haciendo click en
el 1º vínculo
Confirma la activación
de la página y solicita
ir a
[Link]
Informa que la
página no existe
todavía y nos
invita a crearla.
Haga click en
"create it!"
A partir de ahora, Ud. estará en condiciones de editar su cambiar preferencias, mostrar una grilla, crear nuevas
página. Un mensaje le da las primeras instrucciones: páginas, configurar el fondo de la pagina ¡y más!
1. Ahora, Ud. está en modo edición. Ud. puede usar 4. Remover el "edit" de la dirección de la página (el URL)
clicks simples y dobles para acceder a los menus. Ellos para verla en modo visualización. Así es como la
pararecerá al lado de puntero de mouse. página aparecerá para todas las personas.
2. Clickée en la tela (fondo blanco de la pantalla) para 5. Para volver al modo edición agregar /edit a la
abrir el menú, el cual le permitirá crear nuevos objetos, dirección de la página.
crgar archivos e incrustar videos de YouTube y Vimeo
(solamente).
3. Los clicks dobles le darán opciones de menú para
Haga click en
cualquier parte del
mensaje para
eliminarlo. No
volverá a aparecer.
1.3.2 Uso
[Link] Primer click (arriba) y doble click (abajo) sobre la tela o fondo.
Crea objeto cuadrado. Cargar cualquier tipo de
Puede introducirse texto archivo, p.e. una foto.
con un doble click en el También .pdf, .doc, etc.
mismo.
Incrusta página web. Con
esta función pueden
crearse "marcos". Solicita
ingresar dirección después
del click.
Cambia el título de página Hace de la página la
página inicial
Cambia dirección de página
Elimina la página
Cambia color de fondo Muestra lista de páginas
Crear pagina nueva Ajusta selección de imagen
de fondo
Agregar imágen de fondo Esconde/muestra grilla**
Agregar/editar código* Deshacer
* Ofrece una página distinta pero asociada a la que se estaba editando, en la que se puede ingresar código HTML. En
caso de diseñar un esquema o ilustración en formato .svg (con Inkscape o Adobe Illustrator), se puede abrir dicho
archivo con un procesador de texto (Word, OpenOffice o Wordpad), copiar el texto completo (Ctrl+E) e ingresarlo
en la ventana inferior.
** Dicho comando esconde y muestra una grilla para facilitar la alineación de objetos. Asimismo, cambia la medida
deslizando el mouse mientras se mantiene el click derecho (dragar).
[Link]. Menú de edición de texto
Color de Hacer fondo Tamaño Color de Tipografía Estilo de Interlineado
fondo transparente (cuerpo) letra tipografía
de letra
Clonar
Transparencia
Nivel
Voltear Alinear
texto
Vincular
Nombre del
Margen de
objeto (para texto
vincularlo)
Aparecer en
todas las
páginas
Bloquear
objeto
Eliminar
objeto