Untitled

Transcripción

Untitled

2
CREACIÓN DE UN PROTOTIPO DE EDITOR CON UNA INTERFAZ
INTEGRADA PARA LA CONSTRUCCIÓN DE PAGINAS WEB
RAUL HACIP CONTRERAS JAIME
ALVEIRO ALONSO ROSADO GOMEZ
UNIVERSIDAD FRANCISCO DE PAULA SANTANDER
FACULTAD DE INGENIERIAS
PLAN DE ESTUDIOS DE INGENIERIA DE SISTEMAS
SAN JOSÉ DE CÚCUTA
2002
3
INTEGRADA PARA LA CONSTRUCCIÓN DE PAGINAS WEB
RAUL HACIP CONTRERAS JAIME
ALVEIRO ALONSO ROSADO GOMEZ
Proyecto de Grado presentado como requisito
Para optar al titulo de Ingeniero de Sistemas
Director
OSCAR GALLARDO PEREZ
Ingeniero de Sistemas
UNIVERSIDAD FRANCISCO DE PAULA SANTANDER
FACULTAD DE INGENIERIAS
PLAN DE ESTUDIOS DE INGENIERIA DE SISTEMAS
SAN JOSÉ DE CÚCUTA
2002
4
5
A Dios principalmente.
A Raul Contreras, Vicky Jaime, Tatiana Contreras,
Hacip Contreras, Miriam Contreras y todos aquellos
que me apoyaron y me ayudaron en este largo
proceso.
RAUL H. CONTRERAS
6
A Dios por llenar mi vida de bendiciones.
A Emiro Rosado y Cristina Gómez, por darme su
apoyo, amor y concejos.
A mis hermanos por su valiosa colaboración.
A Natalia y Deccy por su comprensión y amor.
ALVEIRO ALONSO
7
AGRADECIMIENTOS
Los autores expresan sus agradecimientos a:
Ingeniera Pilar Rodríguez Tenjo, por su valiosa colaboración en la realización de este
doumento.
Ingeniero Oscar Gallardo Perez, Director de nuestro proyecto.
Teofilo Maldonado, Gloria Gomez e Hijas, por su incalculable apoyo y ayuda
desinteresada.
Paola Rodríguez, por su apoyo comprensión y amor.
Todas aquellas personas que de una u otra forma colaboraron en la realización de este
proyecto, especialmente a los autores de páginas web dedicadas a Visual Basic.
8
CONTENIDO
Pág.
INTRODUCCION
1
1.
1
TITULO
1.1 PLANTEAMIENTO DEL PROBLEMA
JUSTIFICACION
2
OBJETIVOS
3
Objetivo general
3
Objetivos específicos
3
ALCANCES Y LIMITACIONES
2.
2
4
Alcances
4
Limitaciones
5
MARCO TEORICO
7
2.1 ANTECEDENTES
7
3. MARCO LEGAL
12
3.1 LEGALIDAD DEL SOFTWARE
12
4. ANALISIS DEL SISTEMA
14
4.1 ANALISIS DE REQUERIMIENTOS
14
4.2 MODELO DE CONTEXTO
15
4.2.1 Notación utilizada en el diagrama de contexto
15
9
4.2.2 Diagramas de contexto y aplanados
16
4.3 MODELO DE EVENTOS
24
4.3.2 Que es un evento
24
4.3.3 Lista de eventos
25
4.3.4 Diccionario de eventos
25
4.4 DIAGRAMA DE TRANSICIÒN DE ESTADOS
25
4.5 MATRIZ EVENTO VENTANA
25
5. DISEÑO DE INTERFACES
76
5.1 TIPOS DE VENTANAS
76
5.1.1 Ventana principal o de aplicación
76
5.1.2 Ventana hija
76
5.1.3 Ventana de respuesta
77
5.1.4 Marco MDI / hoja MDI
77
5.1.5 Carpetas con fichas o pestañas
77
5.2 ESPECIFICACIÒN DE VENTANAS
78
5.3 DISPOSICIÒN DE VENTANAS
78
5.4 DESCRIPCIÒN DE VENTANAS
86
5.5 MINIESPECIFICACIÒN DE VENTANAS
86
6. DISEÑO DE PROTOTIPO
119
6.1 DEFENICIÒN DE INTERFACES GRAFICAS
119
6.2 CRITERIOS PARA UN BUEN DISEÑO GUI
120
6.2.1 Control de usuario
120
6.2.2 Sensibilidad
121
6.2.3 Dirección
121
10
6.2.4 Consistencia
121
6.2.5 Claridad
122
6.2.6 Estética
122
6.2.7 Indulgencia
123
6.2.8 Conciencia de las fortalezas y limitaciones humanas
124
6.3 COHESION DE VENTANAS
124
6.3.1 Cohesión funcional
124
6.3.2 Cohesión Secuencial
125
6.3.3 Cohesión comunicativa
125
6.3.4 Cohesión procedural
126
6.3.5 Cohesión temporal
126
6.3.6 Cohesión lógica
126
6.3.7 Cohesión coincidental
127
7. IMPLEMENTACION DEL SISTEMA
128
7.1.1 Selección del software
128
7.2 AYUDAS
131
7.3 CONSTRUCCIÒN
131
7.4 PRUEBAS Y REFINAMIENTO
131
8. CONCLUSIONES
135
9. RECOMENDACIONES
137
BIBLIOGRAFIA
138
ANEXOS
142
11
LISTA DE TABLAS
Pag
Tabla 1. Descripción de las funciones del editor
23
Tabla 2. Lista de eventos
52
Tabla 3. Cambiar tamaño fuente
53
Tabla 4. Cambiar tipo fuente
53
Tabla 5. Cambiar color fuente
54
Tabla 6. Copiar o cortar
54
Tabla 7. Lista Numerada
55
Tabla 8. Lista de Viñetas
55
Tabla 9. Aumentar y disminuir sangría
56
Tabla 10. Alinear
56
Tabla 11. Pegar
57
Tabla 12. Imagen
57
Tabla 13. Ampliar, disminuir imagen
58
Tabla 14. Insertar tabla
58
Tabla 15. Ampliar, disminuir tabla
59
Tabla 16. Insertar, filas y columnas
59
Tabla 17. Color fondo de tabla
60
Tabla 18. Fondo tabla
60
12
Tabla 19. Eliminar celda
61
Tabla 20. Color de celda
61
Tabla 21. Imagen de Celda
62
Tabla 22. Color de borde
62
Tabla 23. Transición de páginas
63
Tabla 24. Marcador
63
Tabla 25. Hipervínculo
64
Tabla 26. Imprimir
64
Tabla 27. Vista previa
65
Tabla 28. Abrir Página
65
Tabla 29. Guardar página
66
Tabla 30. Formulario
66
Tabla 31. Insertar Botón
67
Tabla 32. Botón de opción
67
Tabla 33. Cuadro de chequeo
68
Tabla 34. Lista desplegable
68
Tabla 35. Lista
69
Tabla 36. Caja de texto
69
Tabla 37. Ver código
70
Tabla 38. Ayuda
70
Tabla 39. Clic arrastrado
71
Tabla 40. Matriz Evento (Escribir – Color de Celda) / Ventana
72
Tabla 41. Matriz Evento (Imagen celda – Propiedades
caja de chequeo) / Ventana
73
13
Tabla 42. Matriz Evento (Propiedades lista desplegable – Estilo
caja de chequeo) / Ventana
74
Tabla 43. Matriz Evento (Estilo lista – Estilo caja de texto) / Ventana
75
Tabla 44. Ventana principal
87
Tabla 45. Marcador
87
Tabla 46. Fuente
88
Tabla 47. Hipervínculos
89
Tabla 48. Fondo
89
Tabla 49. Imagen
90
Tabla 50. Insertar línea
90
91
Tabla 52. Insertar video
91
Tabla 53. Insertar marquesina
92
Tabla 54. Página Nueva
92
Tabla 55. Propiedades de página
93
Tabla 56. Sonido de fondo y titulo
93
Tabla 57. Propiedades de celda
94
Tabla 58. Editor de mapas
94
Tabla 59. Ventana Principal
95
Tabla 60. Marcador
102
Tabla 61. Fuente
104
Tabla 62. Hipervínculos
105
Tabla 63. Fondo
106
Tabla 64. Imagen
107
14
Tabla 65. Insertar Línea
107
108
Tabla 67. Insertar Video
109
Tabla 68. Insertar marquesina
110
Tabla 69. Pagina nueva
111
Tabla 70. Propiedades de pagina
112
Tabla 71. Sonido de Fondo y titulo
113
Tabla 72. Propiedades de celda
114
115
15
LISTA DE FIGURAS
Pag
Figura 1. Diagrama de Contexto funciones del usuario con
respecto al editor
17
Figura 2. Diagrama aplanado Funciones de fuente
17
Figura 3. Funciones Básicas
18
Figura 4. Funciones de Tabla
19
Figura 5. Funciones de Imagen
19
Figura 6. Sonido
20
Figura 7. Video
20
Figura 8. Marcador
21
Figura 9. Marquesina
21
Figura 10. Formulario
22
Figura 11. Enlace
22
Figura 12. Insertar Tabla
26
Figura 13. Funciones de tabla
27
Figura 14. Funciones de celda
28
Figura 15. Insertar imagen
29
Figura 16. Funciones imagen
30
Figura 17. Nuevo documento
31
16
Figura 18. Numeración
32
Figura 19. Propiedades de Página
33
Figura 20. Marcador
34
Figura 21. Insertar marquesina
35
Figura 22. Insertar video
36
Figura 23. Fondo
37
Figura 24. Sonido de fondo y titulo
38
Figura 25. Línea horizontal
39
Figura 26. Hipervínculo
40
Figura 27. Guardar
41
Figura 28. Abrir
42
Figura 29. Propiedades de Formulario
43
Figura 30. Propiedades de Botón
44
Figura 31. Botón de Opción
45
Figura 32. Caja de Chequeo
46
Figura 33. Caja de Texto
47
Figura 34. Propiedades de Lista
48
Figura 35. Lista Desplegable
49
Figura 36. Texto con Desplazamiento
50
Figura 37. Ventana Principal
79
Figura 38. Establecer Marcador
79
Figura 39. Fuente
79
Figura 40. Creación de Enlaces
80
Figura 41. Insertar Fondo
80
17
Figura 42. Insertar Imagen
81
Figura 43. Insertar línea Horizontal
81
Figura 44. Insertar Tabla
82
Figura 45. Insertar Video
82
Figura. 46 Insertar Marquesina
83
Figura. 47 Nueva Pagina de Marcos
83
Figura. 48 Propiedades de Pagina
84
Figura 49 Sonido y Titulo
84
Figura. 50 Propiedades de Celda
85
Figura. 51 Editor de Mapas
85
18
LISTA DE ANEXOS
Pag
ANEXO A
142
ANEXO B
173
INTRODUCCIÓN
En ocasiones mientras navega por Internet, se encuentra con una gran variedad de colores,
estilos, fuentes, imágenes y acabados de los diferentes Web Sites, en donde es evidente que
el propietario de la página ha plasmado en ella parte de su personalidad acompañada de una
cuota de conocimiento intelectual sobre algún tema específico ya sea de carácter
cognoscitivo o simplemente de entretenimiento, con el fin de proporcionar ayuda o
información a sus visitantes.
Diseñar, construir y publicar una página web puede ser triste y desolador para muchas
personas que por carecer de un conocimiento de las herramientas utilizadas para tal fin;
deciden abstenerse de capitalizar sus ideas.
En nuestro medio no existe una herramienta de construcción de páginas web que sea de
libre licencia y fácil uso, las que lo son necesitan un conocimiento profundo del manejo del
lenguaje HTML. De allí que construir un editor de páginas Web de fácil utilización para el
usuario y que sea de distribución completamente libre es un proyecto de vital importancia
par solucionar este inconveniente.
A continuación se presenta nuestro proyecto de grado titulado “Creación de un Prototipo de
Editor con una Interfaz Integrada para la Construcción de Páginas Web”.
2
1. TITULO
CREACIÓN DE UN PROTOTIPO DE EDITOR CON UNA INTERFAZ INTEGRADA
PARA LA CONSTRUCCIÓN DE PÁGINAS WEB.
1.1 PLANTEAMIENTO DEL PROBLEMA
Internet en la actualidad posee un gran número y diversidad de usuarios, los cuales en su
mayoría no cuentan con un conocimiento profundo, sobre la creación de páginas Web
basadas en el lenguaje HTML.
Nuestro medio carece de un editor gráfico para la construcción de páginas Web que sea de
dominio público, y además que no requiera conocer y codificar el lenguaje HTML, que es
la base de la mayoría de páginas que actualmente se encuentran en Internet (ciberespacio).
1.2 JUSTIFICACIÓN
La creación de un prototipo de editor libre de licencia para la creación de páginas web,
permitirá que muchas personas que no conocen o manejan el código HTML, puedan crear
sus páginas web sin preocuparse por la codificación del lenguaje de manipulación de
hipertexto.
3
En la actualidad la Universidad Francisco de Paula Santander no cuenta con los recursos
económicos para adquirir software destinado al diseño de páginas web, con las cualidades
que posee el Front Page de Microsoft o Dreamwaver de Macromedia; aplicaciones de fácil
manejo y rápido aprendizaje. Con la creación de este editor la universidad tendrá una
herramienta para el diseño de páginas web completamente gratis.
Hoy en día para obtener un editor de páginas web de fácil uso, donde el usuario supervise y
plasme el acabado que quiere mostrar en su Web Site, es necesario pagar un derecho
(software bajo licencia) por su utilización.
El prototipo de editor dará un primer paso en la construcción de una potente y completa
herramienta en desarrollo web, con unos accesorios que son comunes en editores
comerciales.
1.3 OBJETIVOS
1.3.1 Objetivo General. Crear un prototipo de editor de páginas HTML que contenga las
funciones necesarias para la creación de una página Web de la forma más sencilla posible.
1.3.2 Objetivos Específicos. Proporcionar al usuario un paquete para la construcción de
páginas web, muy similar al editor Microsoft Front Page o Dreamwaver de Macromedia.
Realizar una completa documentación de los módulos, funciones y componentes del
programa, para facilitar posteriores implementaciones.
4
Brindar facilidad en la construcción de páginas HTML para el usuario a través del prototipo
de editor.
Proporcionar a la Universidad Francisco de Paula Santander y a la comunidad en general,
un software con licencia de dominio público.
1.4 ALCANCES Y LIMITACIONES
1.4.1 Alcances.
Con el prototipo de editor para la construcción de páginas Web se
pretende:
Manejar las opciones básicas de un procesador de texto, tales como: Copiar, pegar, cortar,
seleccionar, alinear (derecha, izquierda), inserción de listas numéricas, listas con viñetas,
negrilla, cursiva, aumentar o disminuir el tamaño del texto, deshacer, marquesina
desplazándose, fuentes (color, tamaño, tipo y estilo), buscar y reemplazar texto.
Implementar los procedimientos que permitan al usuario crear nuevas páginas, abrir las
páginas existentes (que puedan acoplarse a lo planteado en este proyecto), guardar en
formato HTML y texto, imprimir el contenido de una página, ver código correspondiente
en lenguaje HTML, vista previa de la página, movimiento entre páginas abiertas (atrás adelante).
Facilitar al usuario la inserción de imágenes (gif animados, fondos, mapas de bits, jpg, entre
otros formatos), tabla, líneas horizontales, texto desplazándose.
5
Manejar hipervínculos de texto e imágenes, en el documento y entre la página, además el
manejo de marcadores. Verificación de la integridad de los hipervínculos.
Permitir en las páginas creadas por el usuario la opción para recibir correo electrónico y
opciones de FTP.
Inserción de controles como: combos, listas desplegables, radio botones, etcétera.
1.4.2
Limitaciones. En el diseño del prototipo de editor para la construcción de páginas
HTML no se contemplan los siguientes aspectos:
No se permite integrar funciones ni codificación de lenguaje Java, Perl, Flash, DHTML,
entre otros.
El Editor no permite realizar corrección ortográfica del texto presente en el documento.
No se tendrán en cuenta las plantillas como elementos de creación de páginas Web. No se
implementará un asistente para el proceso de creación de páginas.
El proyecto debe ser complementado en posteriores propuestas con las siguientes
operaciones:
•
Integrar funciones de codificación en lenguaje Java, Perl, Flash, DHTML, entre otros.
•
Permitir realizar corrección ortográfica del texto presente en la página.
6
•
Añadir las plantillas como elementos de creación de páginas Web.
•
Permitir el proceso de publicación de la página en la red.
El editor guardará la página como un archivo en formato HTML o un archivo con extensión
TXT, donde quedará almacenado el código fuente de la página para posteriores ediciones.
No permitirá realizar el proceso de publicación en la red ni tampoco en ser montada en un
servidor.
7
2. MARCO TEORICO
2.1 ANTECEDENTES
Gracias al avance de la tecnología que se ha venido presentando en los últimos años, se han
puesto a disposición infinidad de programas y software de aplicación que brindan a sus
usuarios cooperación en los procesos a los que se destinan.
La Universidad Francisco de Paula Santander no posee los recursos económicos para
adquirir un editor de páginas web con las características del Front Page de Microsoft y
hasta el momento no existe un proyecto que satisfaga esta necesidad, se necesita una
aplicación de carácter estándar que pueda ser utilizada por cualquier usuario con o sin
experiencia en la construcción de páginas web. La aplicación debe satisfacer a cualquier
usuario que esté familiarizado con las aplicaciones de 32 bits.
Los usuarios y programadores de aplicaciones que deseen entrar en el mundo del diseño y
construcción de páginas Web, cuentan una gran variedad de herramientas para dicho fin,
pero para ser adquiridas es necesario pagar una licencia por su utilización. Las aplicaciones
gratuitas que existen en el mercado requieren del conocimiento profundo del lenguaje
HTML (Lenguaje de Marcación de Hipertexto - Hypertext Markcup Language). Es por
ello que editores como Microsoft Front Page y DreamWaver ofrecen las herramientas
8
necesarias para crear en forma sencilla páginas atractivas y organizadas, pero éstos se
encuentran protegidos con licencias y derechos de autor.
Los editores de páginas web más populares existentes en el mercado son los siguientes:
Arachnophilia 4.0 (Build 5309) Copyright 1996 – 2001, Paul Lutus. Su licencia es
Freeware y se puede ejecutar en plataformas de Windows 95 / 98 / Me / NT / 2000. es un
editor HTML muy bien diseñado y con características muy completas. No le proporciona al
usuario la posibilidad de construir la página sin tener que codificar directamente el lenguaje
HTML, además todas las opciones están dadas por botones, restringiendo la libertad de
arrastrar, colocar y desplegar en cualquier lugar del documento.
Vista preliminar de las páginas HTML internamente, o verlas de 6 browsers diferentes. El
programa incluye frames, figuras, marquees, CGI, Perl, C++, Java y Javascript, y se puede
insertar elementos HTML avanzados.
Posee el "Autocopy" que mantiene los links
organizados. Además se pueden crear links para las imágenes o archivos en cualquier parte
del disco. Convertir documentos a HTML, preparar textos, y tablas en un procesador de
textos u otra aplicación y luego arrastrarlo y pegarlo en Arachnophilia para convertirlo en
HTML. La tabla, la estructura, la fuente, el color y el tamaño serán conservados.
Arachnophilia viene con un cliente FTP que permite subir archivos a la base de datos.
Posee soporte de macros, y un corrector automático. Incluye un tutorial para HTML,
JavaScript e Internet.
9
CoffeeCup HTML Editor 8.9 , Copyringht 1996 – 2000 Coffe Software Inc. Es un
editor HTML muy completo, se ejecuta sobre las mismas plataformas (sistema operativo)
del Arachnophilia. Posee más de 175 GIFs animados, 125 Javascripts, y 10 VBScripts
prediseñados, más de 25.000 imágenes, y una gran variedad de opciones muy útiles.
Otorga la posibilidad de arrastrar y soltar cualquier archivo desde el Explorador y trabajar
con varias páginas simultáneamente. Sus barras de diseño, editores y enlaces están
mejorados. Incluye más de 3.000 nuevos gráficos, iconos y fotos de Corel, soporte para
editar ASP, PHP, archivos XML, live preview, y mucho más.
Al igual que el
Arachnophilia no es posible crear un entorno de desarrollo de las páginas sin codificar el
lenguaje HTML.
Cool Page Webpage Maker, Copyright 1998 Shellby More III. Posee la ventaja de que
se pueden diseñar sitios web sin tener que tocar el código HTML. La forma de usar es muy
simple, solo hay que arrastrar las imágenes donde el usuario las quiera y los textos se
acomodan en cualquier parte de la página. Trae una galería de objetos como animaciones,
fondos, barras, botones, iconos y elementos de interfase que ayudan a realizar la página. La
velocidad de respuesta ante cualquier modificación o construcción es alta, debido a la gran
cantidad y saturación de imágenes y controles, además los atributos de cada elemento (por
ejemplo un fondo) también se modifican de manera lenta.
Allaire HomeSite 4.5.1 RC2 Copyright Allaire 2000. Es uno de los mejores editores
HTML que se pueden encontrar en Internet. Es tan poderoso como FrontPage o
DreamWeaver. Este editor ofrece un completo control sobre el documento HTML, donde
10
se podrá optimizar al máximo el código. También cuenta con opciones para poder crear y
editar las páginas Web visualmente si tener instalado el Internet Explorer 4.01 u otros
superiores.
HomeSite posee una conversión automática de caracteres especiales, palabras clave que nos
permiten introducir código que repitamos constantemente, edición de documentos HTML
directamente de servidores FTP, búsqueda y remplazo en múltiples documentos, editor de
hojas de estilo ("cascade style sheets"), manual completo de HTML integrado, visión
jerárquica de las páginas, coloreado automático de los lenguajes de programación
JavaScript, ASP, Perl, PHP, y DHTML (HTML Dinámico), integración de proyectos con
software de gestión de versiones MS SourceSafe y PVCS, interfaz totalmente configurable,
integración con DreamWeaver, y mucho más. El programa soporta las últimas tecnologías
Web, con un nuevo editor de CSS, editor de mapa de imágenes, verifica el formato del
código HTML, y además permite convertirlo a XHTML. Soporte para XML/XSL, lee, edita
y guarda archivos como .xml y .xsl.
Macromedia Dreamweaver. Es uno de los mejores programas para edición de HTML
visual, es muy fácil de usar para crear páginas Web de gran calidad. La gran ventaja del
programa es que se pueden crear páginas complejas sin tener que escribir líneas de código
HTML.
Incluye un editor de imagen integrado, diferentes colores para la sintaxis HTML, soporte
para posicionamiento absoluto, la posibilidad de hacer cambios en todas las páginas usando
11
elementos comunes, un cliente de FTP integrado (con soporte Firewall), soporte XML,
plantillas, y un interfaz personalizado.
Es compatible con Netscape y Explorer con la posibilidad de optimizar las páginas para las
diferentes versiones de los navegadores.
Posee un editor de texto integrado, tiene un nuevo detector de errores (debugger) de
JavaScript, opción de código de referencia, un nuevo visor de esquemas de página y
creación de gráficos vectoriales editables directamente en el Dreamweaver.
Microsoft Front Page. Es un Editor de páginas web aplicativo que se ejecuta en Windows
95 / 98 o Windows NT; nos permite tener una visión completa de un proyecto web como si
fuera apenas una página. En el Front Page se combinan la facilidad de crear páginas web,
con insertar dinamismo a las páginas a través de scripting y al mismo tiempo una
administración global de todo el proyecto (hipervínculos, navegación, directorios, etc).
12
3. MARCO LEGAL
3.1 LEGALIDAD DEL SOFTWARE
La licencia que la universidad posee sobre la herramienta de programación Visul basic 6.0,
y el creador de ayudas Help Work Shop, esta contemplada de la siguiente manera:
Fecha de emisión de la licencia: 20 de Enero de 1999.
Grupo del producto: Aplicaciones.
Programa de licencia: Educativo.
Descripción: Microsoft Vstudio Pro 6.0 Win 32 English.
Numero del producto: 659 – 00284
Versión: 6.00
Numero de autorización de la licencia: 11152967AAE0101
Numero de licencia: 11168502
La clase de licencia que tiene Fácil Web 1.0 es de dominio publico, dado que no esta
protegido con copyright, algunas copias, distribuciones o modificaciones de la aplicación
están bajo la responsabilidad de la universidad.
13
Los iconos, gif´s, y demás imágenes contenidas en la aplicación no fueron creadas por los
autores del programa, han sido obtenidas de Internet en lugares donde se establece que las
imágenes son gratis de bajar y utilizar.
La universidad Francisco de Paula Santander establece que los trabajos de grado son
propiedad intelectual de la institución según él Articulo 156, Capitulo I, Titulo V, del
Estatuto Estudiantil; por lo tanto la aplicación Fácil Web 1.0 es propiedad de la
universidad.
14
4. ANALISIS DEL SISTEMA
4.1 ANALISIS DE REQUERIMIENTOS
Para crear una página manipulando el código HTML, se necesita primero conocer el
lenguaje, y segundo un editor de texto. Para insertar, ubicar, referenciar y establecer
elementos o texto en la página, se coloca en el código HTML la etiqueta correspondiente
con los atributos para cada elemento.
En el código HTML para establecer cualquier elemento en la página involucra una serie de
etiquetas que además poseen atributos. Cualquier documento web contiene una serie de
etiquetas, que definen la forma como se representará el contenido en el navegador. Cada
vez que se quiera ver como está quedando la página se necesita guardar el texto con
extensión HTML y después ser abierta con el navegador para observar su apariencia.
Para crear una tabla con dos casillas una casilla en la parte superior que diga “Hola Mundo”
y la otra en blanco, se requiere en código HTML las siguientes etiquetas:
<table border=1 cellpadding=1 cellspacing=2 id=tabla1 width="75%">
<tr>
<td width="37%">Hola Mundo</td>
<td width="37%"></td>
</tr>
</table>
15
Estas líneas sumadas con las etiquetas por defecto de la página como son html, head, title,
body, hacen tedioso el crear páginas que posean un grado de contenido mayor a un par de
palabras, una imagen o una tabla. En el caso de tener que crear un sitio web que involucre
varias páginas con un grado considerable de elementos se requiere de una gran cantidad de
tiempo de codificación, revisión y el dominio que sobre el código se tenga.
Crear un programa que genere el código HTML, de acuerdo como se vaya insertando
elementos a la página, y permitir observar permanentemente como va evolucionando el
documento, mejorará el tiempo de elaboración de páginas web y permitirá a personas que
no estén familiarizadas con el lenguaje, construir sitios elegantes con toques personales sin
tener que escribir una sola etiqueta.
4.2 MODELO DE CONTEXTO
El modelo de contexto es quien define el alcance de la aplicación, mediante un círculo que
muestra el sistema propuesto completo como un gran proceso. El cuadro que está alrededor
muestra a las personas que tendrán que comunicarse con el nuevo sistema. Las flechas de
entrada y salida muestran el flujo de datos como si estimularan al sistema para ponerlo en
acción y como si salieran del sistema en la forma de una respuesta al mundo.
4.2.1 Notación Utilizada en el Diagrama de Contexto. La notación que se empleó para la
realización de los diagramas fue la siguiente:
16
Un productor o consumidor que reside fuera de los limites
UNIDAD
EXTERNA
del sistema a ser modelado.
Un transformador que reside dentro de los limites del
Proceso
sistema a ser modelado.
Un elemento de datos o una colección de elementos de
datos. La cabeza de la flecha indica la dirección del flujo de
datos. (Ver figura 1, tabla 1).
4.2.2 Diagramas de Contexto y aplanados. Una vez analizados todos los elementos que
intervienen en el sistema, se diseñaron los diagramas de contexto y aplanados, del sistema.
Para nuestro análisis en el Diagrama de Contexto interviene una entidad que es el Usuario,
quien será la persona que interactúa con la aplicación. (Ver Figura 2 - 11).
17
USUARIO
Inserta archivo de video
Inserta marquesina
Inserta página con marcos
Crea formulario Web
Realiza Funciones de fuente
Realiza Funciones de Tabla
Solicita ayuda del sistema
Realiza Funciones de Imagen
Inserta Sonido
Inserta Línea
Realiza Funciones Generales
Muestra en Pantalla
Genera Código HTML
EDITOR DE
PAGINAS
WEB
FACILWEB
Figura 1. Diagrama de Contexto funciones del usuario con respecto al editor.
USUARIO
Pega, digita
Texto
Alinea, cambia Tipo, Tamaño,
Color de fuente, Negrilla,
Cursiva, Subrayado,
Encabezado, Numeración y
Viñetas
Mostrara texto
en pantalla
Figura 2. Diagrama aplanado Funciones de fuente.
18
Imprimir
documento
Mostrar
pagina
escogida
Llamar
Impresora
Pagina
Seleccionada
Documento
a Imprimir
Imprimir
documento
Agregar al
Cortapapeles
Pegar
Mostrar
ventana
Abrir
Solicita Abrir pagina
USUARIO
Vista Previa
Llamar
Navegador
Destruir última
Acción.
Datos copiados o
cortados
Eliminar
Eliminar
Ultimaultima
Acción
acción
Nuevo
Documento
Solicitar
Guardar
Retomar
acción
eliminada
Avanzar
Retroceder
Pagina
Llamar
Guardar
Restaurar última
Acción
Agregar
al o
Duplicar
Cortapapeles
Quitar o Pegar
Ventana tipo
de Hoja
Mostrar
página actual
HOJA SELECCIONADA
Normal
Documento
normal
Marco
Titulo
Marco
Contenido
Hoja tipo
Contenido
Hoja tipo
Titulo
Figura 3. Funciones Básicas
Marco
Titulo
Contenido
Hoja tipo
Titulo
Contenido
19
USUARIO
Insertar Tabla
Mostrar ventana
Tabla
Aumentar, disminuir
tamaño de tabla
Insertar, eliminar, cambiar
color, espacio de la celda
Numero de filas,
columnas, color
de tabla
Mostrara tabla
en pantalla
Figura 4. Funciones de Tabla.
USUARIO
Inserta Imagen
Imagen
Seleccionada
Mostrar ventana
Imagen
Agrandar, disminuir,
alinear imagen
Mostrar imagen
en pantalla
Figura 5. Funciones de Imagen.
20
USUARIO
Agregar
Sonido
Ventana
Insertar
Sonido
Sonido
Seleccionado
Insertar
Sonido
Figura 6. Sonido.
USUARIO
Agregar
video
Ventana
Insertar
video
video
Seleccionado
Insertar
video
Figura 7. Video.
21
USUARIO
Agregar
Marcador
Ventana
Insertar
Marcador
Nombre
Marcador
Crear
Marcador
Figura 8. Marcador.
USUARIO
Agregar
Marquesina
Ventana
Insertar
Marquesina
Texto
Marquesina
Insertar
Marquesina
Figura 9. Marquesina.
22
USUARIO
Insertar:
Formulario
Botón
Lista selección
Lista Desplegable
Botón de opción
Botón de chequeo
Caja de Texto
Texto Multilínea
Insertar
elemento de
Formulario
Figura 10. Formulario.
USUARIO
Agregar
Enlace
Ventana
Insertar
Enlace
TIPO ENLACE
Crear enlace
de Correo
Crear enlace
de Archivo
Escoger
enlace Pagina
Ventana
enlace de
correo
Insertar
video
Figura 11. Enlace.
Insertar
video
23
Tabla 1. Descripción de las funciones* del editor.
CONCEPTO
DESCRIPCIÒN
Funciones de Fuentes
Cambiar tamaño, Tipo, Color, Alinear texto, Negrilla,
Cursiva, Subrayado, Numeración, Viñetas.
Funciones Básicas
Abrir documento HTML, Guardar, Deshacer, Rehacer,
Atrás, Adelante, Imprimir, Vista previa, Copiar, Cortar,
Pegar, Nuevo documento HTML.
Marcos
Tipo de marco Titulo, Tipo de marco Contenido
Tipo de marco Titulo Contenido.
Ayuda
Insertar Tabla, Borrar, Agradar, Insertar Celda
Insertar Columna, Insertar Fila, Eliminar Fila
Eliminar Columna, Eliminar Celda, Color Tabla
Fondo Tabla, Color Celda, Borde Celda
Espacio Celda.
Contenido, Índice, Acerca de.
Funciones de Imagen
Insertar, Borrar, Agrandar, Disminuir, Alinear.
Sonido
Insertar, Borrar.
Video
Insertar, Borrar.
Enlaces
Insertar, Borrar.
Marcadores
Insertar, Borrar.
Marquesina
Insertar, Eliminar.
Formulario
Insertar, Botón, Lista de selección, Lista desplegable,
Botón de opción, Botón de chequeo
Caja de texto, Texto multilínea.
Funciones de Tabla
* Esta tabla contiene los ítems en que se componen las características mas relevantes que tiene el editor.
24
4.3 MODELO DE EVENTOS
4.3.1 El propósito del modelo de eventos.
Es describir cual es el comportamiento
adecuado de un sistema. Eso se logra listando todos los eventos del negocio ante los cuales
está planeado que el sistema deba responder. Para cada evento de la lista se crea una
entrada en diccionario de eventos. La cual detalla la definición, estímulo actividad,
respuesta y efecto del negocio. El diccionario de eventos nos dice la manera en que se
espera que el sistema se comporte cuando sucede el evento. Llega a ser un lugar de
depósito crucial para las políticas del negocio, las cuales deberán ejecutarse cada vez que
sucede el evento.
4.3.2 Que es un evento. La sintaxis para establecer un evento1 es sujeto-verbo-objeto.
Alguien [Sujeto], hace algo [Verbo] a algo [objeto].
Hay algunas reglas que determinan si cualquier frase antigua en la sintaxis sujeto-verboobjeto califica, de hecho, como un evento para nuestro sistema.
1. Un evento sucede en un momento específico.
2. Un evento sucede en el ambiente y no dentro del sistema.
3. La ocurrencia del evento está bajo el control del ambiente y no del sistema.
1
A ROUBLE, David. Análisis y diseño practico para sistemas cliente / servidor con GUI’s. México : Prentice
Hall Inc, 1998. p.81
25
4. El sistema debe ser capaz de detectar que el evento sucedió.
5. Se supone que el sistema hará algo con respecto al evento significado que es relevante
para el plan general del proyecto.
4.3.3 Lista de Eventos. La lista de eventos describe el comportamiento adecuado del
sistema, es decir, lista los eventos ante los cuales está planeado que el sistema responda
(Ver Tabla 2).
4.3.4 Diccionario de eventos. Las entradas del diccionario de eventos para cada evento
definen su importancia en el negocio y sus partes componentes (Ver Tabla 3 - 39).
4.4 DIAGRAMA DE TRANSICIÓN DE ESTADOS
El Diagrama de Transición de Estados, permite observar como estarán representados los
diferentes sucesos que ocurren en la ventana y ante cual evento cambiará su estado (Ver
Figura 12 - 36).
4.5 MATRIZ EVENTO VENTANA
Muestra los procesos o el proceso vinculado a la ventana, permitiendo determinar el
número de ventanas necesarias para contener los eventos previamente establecidos (Ver
Tabla 40, 41, 42, 43).
26
Hace clic en el botón tabla o
menú tabla/ insertar tabla
TENTATIVO
Clic en el
botón Ayuda
CANCELAR
Oprimir el botón cancelar o X
TENTATIVO
Numero
de Filas
Numero de
Columnas
Alineación
Bordes
Tamaño
Clic en el botón
Insertar
CANCELAR
EJECUTADO
Figura 12. Insertar Tabla.
26
27
Clic sobre la tabla
Arrastre sobre la Tabla
SELECCIONADO
Clic en el
botón Ayuda
Clic derecho sobre la
tabla
Posición absoluta
ELECCION
TENTATIVO
Propiedades de
Tabla
Oprimir el botón cancelar o
TENTATIVO
Numero
de Filas
Numero de
Columnas
Alineación
Bordes
X
CANCELAR
Tamaño
Imagen
Color de
fondo
CANCELAR
Clic en Aceptar
EJECUTADO
Figura 13. Funciones de tabla.
27
28
Celda.
Hacer clic en Agregar Filas, Columnas
Eliminar Filas, Columnas
Eliminar, dividir, Celdas
SELECCION
Clic en el
botón Ayuda
Propiedades de celda
Oprimir Cancelar o X
TENTATIVO
CANCELAR
TENTATIVO
Imagen
Color
Alineación
Vertical
Alineación
Horizontal
Tamaño
Borde
Borde
Claro
Dar clic en Aceptar
Borde
Oscuro
CANCELAR
EJECUCION
Figura 14. Funciones de celda.
28
29
Hace clic en el botón Imagen
o menú Insertar / Imagen.
Clic en el
botón Ayuda
TENTATIVO
CANCELAR
Escoge
Image
n
TENTATIVO
Escoge
Tipo
Clic en el botón
Insertar
CANCELAR
EJECUTADO
29
30
Clic sobre la Imagen
Arrastre sobre la Imagen
SELECCIONADO
Clic en el
botón Ayuda
Imagen
Posición absoluta
ELECCION
TENTATIVO
Propiedades de
Imagen
Origen
Borde
Tamaño
Alineación
CANCELAR
CANCELAR
EJECUTADO
Figura 16. Funciones imagen.
30
31
Hace clic en el botón
Archivo / Nuevo.
TENTATIVO
CANCELAR
Oprimir Cancelar o
Clic en el
botón Ayuda
X
Escoge Tipo de Hoja:
TENTATIVO
Normal
Pagina Marcos
Oprimir Cancelar o
Titulo
Contenido
X
Titulo Contenido
Clic en el botón
Aceptar
CANCELAR
EJECUTADO
Figura 17. Nuevo documento.
31
32
Clic en Menú Formato/ Numeración
TENTATIVO
Clic en el
botón Ayuda
CANCELAR
TENTATIVO
“I”
“A”
“a”
“i”
“1”
Clic en el botón
Aceptar
CANCELAR
EJECUTADO
Figura 18. Numeración.
32
33
Hace clic derecho Propiedades de Pagina o en
el menú archivo/ Propiedades de Pagina
TENTATIVO
Estilo
Fondo
Márgenes
Imagen de
Fondo
Color de
Fondo
Clic en el
botón Ayuda
CANCELAR
Color
enlace
Color Enlace
Visitado
Oprimir
cancelar
oX
TENTATIVO
Color Enlace
Visitado
Clic en el botón
Aceptar
CANCELAR
EJECUTADO
Figura 19. Propiedades de Pagina.
33
34
Hacer clic en menú Edición /
Marcador
Clic en el
botón Ayuda
TENTATIVO
CANCELAR
Nombre
TENTATIVO
selección
Aceptar o
presionar Intro
CANCELAR
EJECUTADO
Figura 20. Marcador
34
35
Hace clic en menú
Insertar /
Marquesina
Clic en el
botón Ayuda
TENTATIVO
CANCELAR
Oprimir
TENTATIVO
el
botón
Texto
Dirección
Velocidad
Repetir
Color de
Fondo
alto
Ancho
Comporta
miento
Clic en el botón
Aceptar
CANCELAR
EJECUTADO
Figura 21. Insertar marquesina.
35
36
Hace clic en menú
Insertar / Video
Clic en el
botón Ayuda
TENTATIVO
CANCELAR
TENTATIVO
Ubicación
Repetición
Comenzar
Oprimir Cancelar o
X
Clic en el botón
Aceptar
CANCELAR
EJECUTADO
Figura 22. Insertar video.
36
37
Hace clic en menú
Formato / Fondo o
en el icono Fondo
Clic en el
botón Ayuda
TENTATIVO
CANCELAR
TENTATIVO
Ubicación
Tipo
Oprimir Cancelar o
X
Clic en el botón
Aceptar
CANCELAR
EJECUTADO
Figura 23. Fondo
37
38
Hace clic en menú
Insertar / Sonido
de fondo Titulo
Pagina
Clic en el
botón Ayuda
TENTATIVO
CANCELAR
TENTATIVO
Titulo
Ubicación
Infinito
Bucle
Clic en el botón
Aceptar
CANCELAR
EJECUTADO
Figura 24. Sonido de fondo y titulo.
38
39
Hace clic en menú
Insertar / Línea
Horizontal
Clic en el
botón Ayuda
TENTATIVO
Ancho
Alto
Alineación
CANCELAR
TENTATIVO
Color
Oprimir Cancelar o
X
Clic en el botón
Aceptar
CANCELAR
EJECUTADO
Figura 25. Línea horizontal.
39
40
Hace clic en menú
Insertar /
Hipervínculo o en
el botón
H
vínculo
TENTATIVO
CANCELAR
Clic en el
botón Ayuda
TENTATIVO
Texto
Alternativo
Enlace
Archivo
Correo
Selección
Pagina
Selección
archivo
Digitar
Correo
Clic en el botón
Aceptar
CANCELAR
EJECUTADO
Figura 26. Hipervínculo.
40
41
Hace clic en menú
Archivo / Guardar
o en Guardar
TENTATIVO
Ruta
Carpeta
Nombre
CANCELAR
Extensión
X
Clic en el botón
Aceptar
EJECUTADO
Figura 27. Guardar.
41
42
Hace clic en menú
Archivo / Abrir o
en el botón Abrir
TENTATIVO
Ruta
Carpeta
Nombre
CANCELAR
Extensión
X
Clic en el botón
Aceptar
EJECUTADO
Figura 28. Abrir.
42
43
Hace clic derecho sobre
el formulario /
propiedades de
formulario
TENTATIVO
Clic en el
botón Ayuda
CANCELAR
TENTATIVO
Nombre
Método
acción
Clic en el botón
Aceptar
CANCELAR
EJECUTADO
Figura 29. Propiedades de formulario.
43
44
el Botón / propiedades
de Botón
Clic en el
botón Ayuda
TENTATIVO
CANCELAR
TENTATIVO
Nombre
Etiqueta
X
Clic en el botón
Aceptar
CANCELAR
EJECUTADO
Figura 30. Propiedades de botón.
44
45
el Cuadro de opción /
propiedades de Cuadro
de opción
Clic en el
botón Ayuda
TENTATIVO
CANCELAR
TENTATIVO
Nombre
Valor
estado
X
Clic en el botón
Aceptar
CANCELAR
EJECUTADO
Figura 31. Botón de opción.
45
46
la caja de chequeo /
propiedades de Botón
de Chequeo.
Clic en el
botón Ayuda
TENTATIVO
CANCELAR
TENTATIVO
Nombre
Valor
estado
X
Clic en el botón
Aceptar
CANCELAR
EJECUTADO
Figura 32. Caja de Chequeo.
46
47
la Caja de Texto /
propiedades de Caja de
Texto
Clic en el
botón Ayuda
TENTATIVO
CANCELAR
TENTATIVO
Nombre
Valor
Numero de
Caracteres
X
Clic en el botón
Aceptar
CANCELAR
EJECUTADO
Figura 33. Caja de texto.
47
48
la Lista / propiedades
de Lista
Clic en el
botón Ayuda
TENTATIVO
CANCELAR
TENTATIVO
Nombre
Texto
Selección
Múltiple
Clic en el botón
Aceptar
CANCELAR
EJECUTADO
Figura 34. Propiedades de Lista.
48
49
la Lista Desplegable /
propiedades Lista
Desplegable
Clic en el
botón Ayuda
TENTATIVO
CANCELAR
TENTATIVO
Nombre
Valor
estado
X
Clic en el botón
Aceptar
CANCELAR
EJECUTADO
Figura 35. Lista desplegable
49
50
el Cuadro de Texto
Multilínea /
propiedades de Cuadro
de texto Multilínea
Clic en el
botón Ayuda
TENTATIVO
CANCELAR
TENTATIVO
Nombre
Valor
Inicial
Ancho
Numero de
Líneas
X
Clic en el botón
Aceptar
CANCELAR
EJECUTADO
Figura 36. Texto con desplazamiento.
50
52
Tabla 2. Lista de eventos.
SUJETO
VERBO
Presiona
El usuario
Hace
ACCION
Teclas para escribir en el documento.
Clic para cambiar Tamaño de Fuente.
Clic para cambiar Tipo de Fuente.
Clic para cambiar Color de Fuente.
Clic para Copiar, o Cortar, o Pegar.
Clic para Crear Numeración.
Clic para Crear Viñetas.
Clic para Crear Sangría.
Clic para Alineación de Texto o Párrafo, o Imagen,
o Tabla, u Objeto.
Clic para Insertar Imágenes
Clic arrastrado para Agrandar o Disminuir imagen.
Clic para Insertar Tablas
Clic arrastrado para Agrandar o Disminuir tablas
Clic para insertar Filas o Columnas
Clic para colocar o cambiar Color de Tabla
Clic para colocar o cambiar Imagen de Tabla.
Clic para insertar o eliminar Celda.
Clic para colocar o cambiar Color de Celda.
Clic para colocar o cambiar Imagen de Celda.
Clic para insertar o cambiar Color de Borde.
Clic para ir a la Página Anterior.
Clic para ir a la Página Siguiente
Clic para insertar Marcadores en su Documento
Web.
Clic para insertar Hipervínculos en su Documento
Web.
Clic para Imprimir el Documento.
Clic para Ver como quedará la página en el
Navegador.
Clic para Abrir una página
Clic para Guardar una página
Clic para Deshacer, Rehacer la ultima acción.
Clic para crear Formularios Web.
Clic para insertar Botón de Comando
Clic para insertar Botón de Opción
Clic para insertar Caja de Chequeo
Clic para insertar Lista Desplegable
Clic para insertar Lista de Selección
Clic para insertar Caja de Texto
Clic para insertar Caja de Texto Multilínea.
Clic para ver el Código HTML.
Clic para solicitar Ayuda del programa.
Clic arrastrado para Seleccionar un bloque del
documento.
53
Tabla 3. Cambiar tamaño fuente
ID del evento
001
El usuario hace Clic para cambiar Tamaño de Fuente.
Descripción
Estimulo
Actividad
Cuando el usuario hace clic para cambiar el tamaño de la fuente, el
documento o el texto seleccionado, queda con un nuevo tamaño mayor o
menor de fuente. Si el tamaño elegido es igual al actual no pasa nada.
Hacer clic en el menú Formato / fuente.
Hacer clic en la lista desplegable Tamaño Fuente de la barra de herramientas
Identificar el tamaño de fuente seleccionado, cambiar la fuente
al tamaño especifico.
If página esta activa then
En la página donde este ubicada Ejecute el comando
DECMD_SETFONTSIZE, Tamaño de Fuente
End if
Respuesta
Efecto
Mostrar en pantalla la fuente con el tamaño escogido.
El usuario obtiene el tamaño de fuente que quiere en su página Web.
Tabla 4. Cambiar tipo fuente
ID del evento
002
El usuario hace Clic para cambiar Tipo de Fuente.
Descripción
Estimulo
Actividad
Cuando el usuario hace clic para cambiar el tipo de la fuente, el documento o
el texto seleccionado, queda con un nuevo tipo de fuente.
Si el tipo elegido es igual al actual no pasa nada.
Hacer clic en la lista desplegable Tipo Fuente de la barra de herramientas
Identificar el tipo de fuente seleccionado, cambiar la fuente al
tipo especifico.
DECMD_SETFONTNAME, Tipo de Fuente
End if
Respuesta
Efecto
Mostrar en pantalla la fuente con el tipo escogido.
El usuario obtiene el tipo de fuente que quiere en su página Web.
54
Tabla 5. Cambiar color fuente
ID del evento
003
El usuario hace Clic para cambiar el Color de Fuente.
Descripción
Estimulo
Actividad
Cuando el usuario hace clic para cambiar el Color de la fuente, el documento
o el texto seleccionado, queda con un nuevo color de fuente.
Si el color elegido es igual al actual no pasa nada.
Hacer clic en Color de Fuente de la barra de herramientas
Identificar el color de fuente seleccionado, cambiar el color de
texto.
DECMD_SETFORECOLOR, Color de texto
End if
Respuesta
Efecto
Mostrar en pantalla el texto con el color escogido.
El usuario obtiene el color de texto que quiere en su página Web.
Tabla 6. Copiar o cortar
ID del evento
004
El usuario hace Clic para Copiar, o Cortar.
Descripción
Estimulo
Cuando el usuario hace clic para Copiar, o Cortar, un elemento seleccionado
ya sea dentro o fuera del Programa, crea una nueva entrada en el
portapapeles.
Hacer clic en el menú Edición / Copiar o Cortar.
Hacer clic en Copiar o Cortar de la barra de herramientas
If página este activa then
If existe elemento seleccionado then
DECMD_CUT
End if
Actividad
O
If existe elemento seleccionado then
DECMD_COPY
End if
Respuesta
Efecto
End if
Al Cortar se elimina el elemento seleccionado de la pantalla y se guarda en el
Portapapeles.
Al Copiar el elemento seleccionado permanece en la pantalla y se guarda en
el Portapapeles.
El usuario duplica o mueve un elemento del documento, o de otra aplicación.
55
Tabla 7. Lista Numerada.
ID del evento
005
El usuario hace Clic para Crear una lista de Numerada.
Descripción
Estimulo
Cuando el usuario hace clic para insertar una lista Numerada, en el
documento o el texto seleccionado, organiza con un identificador numérico al
comienzo de cada línea de manera ascendente.
Hacer clic en el menú Formato / Numeración.
Hacer clic en el botón Numeración de la barra de herramientas.
If existe algún elemento seleccionado then
Actividad
DECMD_ORDERLIST
End if
End if
Respuesta
Efecto
Colocar el texto seleccionado en una Lista Numerada en pantalla.
El usuario organiza un texto determinado mediante la lista de numeración en
el documento.
Tabla 8. Lista de Viñetas.
ID del evento
006
El usuario hace Clic para Crear una Lista de Viñetas.
Descripción
Estimulo
Cuando el usuario hace clic para insertar una lista de Viñetas, en el
documento o el texto seleccionado, organiza con un símbolo al comienzo de
cada línea.
Hacer clic en el menú Formato / Viñetas.
Hacer clic en el botón Viñetas de la barra de herramientas.
If existe algún elemento seleccionado then
Actividad
DECMD_UNORDERLIST
End if
End if
Respuesta
Efecto
Colocar el texto seleccionado en una Lista de Viñetas en pantalla.
El usuario organiza un texto determinado mediante la lista de Viñetas en el
documento.
56
Tabla 9. Aumentar y disminuir sangría.
ID del evento
007
El usuario hace Clic para Aumentar o Disminuir la Sangría.
Descripción
Estimulo
Actividad
Respuesta
Efecto
Cuando el usuario hace clic en Aumentar o Disminuir la Sangría, en el
documento o el texto seleccionado se crea una tabulación, teniendo como
punto de referencia el margen izquierdo del documento.
Hacer clic en el botón Aumentar o Disminuir Sangría de la barra de
herramientas.
DECMD_INDENT
End if
Ó
DECMD_OUTDENT
End if
Aumenta o Disminuye la sangría del texto en el lugar donde se encuentre el
cursor.
El usuario organiza un texto determinado mediante el Aumento o la
Disminución de la Sangría en el Documento.
Tabla 10. Alinear.
ID del evento
008
El usuario hace Clic en el botón Alinear (Izquierda, Centro, Derecha).
Descripción
Estimulo
Actividad
Respuesta
Efecto
Cuando el usuario hace clic en cualquiera de los botones de Alineación, el
texto, párrafo, Objeto, etc, seleccionado se ubica en el lugar del documento
de acuerdo con el botón seleccionado (Izquierda, Centro, Derecha).
Hacer clic en el alguno de los botones de Alineación
Derecha) de la barra de herramientas.
En la página donde este ubicada Ejecute
DECMD_JUSTIFYRIGHT
End if
Ó
DECMD_JUSTIFYLEFT
End if
Ó
DECMD_JUSTIFYCENTER
End if
(Izquierda, Centro,
el comando
el comando
el comando
Alinea el elemento (texto, párrafo, objeto, imagen) de acuerdo al botón
elegido por el usuario ya sea Justificar a la Izquierda, Derecha o Centro.
El usuario organiza un texto determinado mediante el Aumento o la
Disminución de la Sangría en el Documento.
57
Tabla 11. Pegar.
ID del evento
009
El usuario hace Clic en el botón Pegar.
Descripción
Estimulo
Actividad
Respuesta
Efecto
Cuando el usuario hace clic en el botón de Pegar, el texto, párrafo, Objeto,
etc, previamente Copiado o Cortado (puede ser de otra aplicación) se coloca
en el lugar del documento donde este ubicado el cursor.
Hacer clic en el botón Pegar.
If Existe algo en el Cortapapeles then
DECMD_PASTE
End if
End if
Colocar el mismo elemento en diferentes partes del documento o mover un
elemento a otra parte del mismo documento.
El usuario puede traer y trasladar elementos de otras páginas del mismo
documento o de otra aplicación al lugar donde el quiere.
Tabla 12. Imagen.
ID del evento
010
El usuario hace Clic para Insertar Imagen.
Descripción
Estimulo
Actividad
Respuesta
Efecto
Cuando el usuario hace clic para insertar una imagen, se despliega una
ventana donde puede especificar el tipo, y ruta de la imagen que desee
colocar en su página Web.
El usuario hace Clic en el botón
El usuario hace Clic en el menú
Código = EtiquetasHTML
EtiquetasHTML
En el lugar donde este,
End if
de Insertar Imagen.
Insertar / Imagen.
& dirección & alineación &
Código
Insertar la imagen seleccionada en el lugar del documento donde esté situado
el cursor.
El usuario puede decorar su página con las imágenes de su agrado.
58
Tabla 13. Ampliar, disminuir imagen.
ID del evento
011
El usuario hace Clic arrastrado sobre la Imagen.
Descripción
Cuando el usuario hace clic sobre la imagen esta crea unos puntos de
controlador de tamaño, que al arrastrar el clic sobre cualquiera de ellos y
según sea la dirección del movimiento la imagen puede agrandarse o
contraerse.
Estimulo
El usuario hace Clic Arrastrado sobre la Imagen.
Actividad
Movimiento del ratón
If Imagen esta seleccionada then
Redimensionar imagen
End if
End
Respuesta
Efecto
Proporcionar el tamaño deseado de la imagen en la página Web.
El usuario puede ajustar la imagen según el área que desea que ocupe en el
documento.
Tabla 14. Insertar tabla.
ID del evento
012
El usuario hace Clic insertar una Tabla.
Descripción
Cuando el usuario hace clic para insertar una Tabla, se despliega una ventana
donde puede especificar el numero de Filas, Columnas, Alineación, etc.
Especifica la Tabla que desea agregar a su página Web.
Estimulo
El usuario hace Clic para insertar una Imagen.
Actividad
Codigo_Tabla = EtiquetasHTML & Filas & Columnas & Alineación &
EtiquetasHTML
Insertar En el lugar donde este Codigo_Tabla
End if
Respuesta
Efecto
Insertar la Tabla configurada en el lugar del documento donde este situado el
cursor.
El usuario puede ordenar el documento de la forma que desee, ubicando el
texto, las imágenes y los objetos en la posición de la tabla que le permitan
dar una mejor apariencia ala información contenida en la página Web.
59
Tabla 15. Ampliar, disminuir tabla.
ID del evento
013
El usuario hace Clic arrastrado sobre la Tabla.
Descripción
Cuando el usuario hace clic sobre la Tabla esta crea puntos de controlador de
tamaño, que al arrastrar el clic sobre cualquiera de ellos y según sea la
dirección del movimiento la Tabla puede agrandarse o contraerse.
Estimulo
El usuario hace Clic Arrastrado sobre la Tabla.
Actividad
Movimiento del ratón
If Tabla esta seleccionada then
Redimensionar Tabla
End if
End
Respuesta
Efecto
Proporcionar el tamaño deseado de la Tabla en la página Web.
El usuario puede ajustar la Tabla según el área que desea que ocupe en el
documento debido a su contenido.
Tabla 16. Insertar, filas y columnas.
ID del evento
014
El usuario hace Clic insertar Filas o Columnas.
Descripción
Estimulo
Cuando el usuario Crea una tabla, pero el numero de Filas o de Columnas que
definió no es el suficiente para la información que necesita contener en la
Tabla, el sistema le permite que inerte el numero de Filas o Columnas que
requiera.
El usuario hace Clic insertar Filas o Columnas.
If Esta dentro de una Tabla then
En el lugar donde este DECMD_INSERTROW
End if
Actividad
O
En el lugar donde este DECMD_INSERTCOL
End if
Respuesta
Efecto
Aumentar el numero de filas o Columnas que necesite la Tabla en la página
Web.
El usuario puede adicionar Filas o Columnas a medida que las necesite.
60
Tabla 17. Color fondo de tabla.
ID del evento
015
El usuario hace Clic para colocar o cambiar Color de Fondo a la tabla.
Descripción
Estimulo
Actividad
Si el usuario crea una tabla y desea darle o cambiar el color, puede hacerlo
escogiendo el color de fondo que mas le atraiga.
El usuario hace Clic para colocar Color de Fondo.
O
El usuario hace Clic para cambiar la Color de Fondo.
If página activa then
Funcion_ColorFondoTabla, Color Seleccionado
End if
Respuesta
Una ventana donde se puede seleccionar el color que se establecerá como
fondo de la tabla.
Efecto
El usuario podrá cambiar el color de tabla cuando quiera, para mejorar la
apariencia de la página Web.
Tabla 18. Fondo tabla.
ID del evento
016
El usuario hace Clic para colocar o cambiar Imagen de Fondo a la tabla.
Descripción
Estimulo
Actividad
Respuesta
Efecto
Si el usuario crea una tabla y desea darle o cambiar la Imagen de Fondo,
puede hacerlo escogiendo el fondo que mas le atraiga.
El usuario hace Clic
O
El usuario hace Clic
If página activa
Tabla.Fondo =
End if
para colocar Imagen de Fondo.
para cambiar la Imagen de Fondo.
then
Ruta de Imagen Seleccionada
Una ventana donde se puede seleccionar la Imagen que se establecerá como
fondo de la tabla.
El usuario podrá cambiar la Imagen de Fondo de tabla cuando quiera, para
mejorar la apariencia de la página Web.
61
Tabla 19. Eliminar celda.
ID del evento
017
El usuario hace Clic para Eliminar Celda.
Descripción
Cuando el usuario Crea una tabla, pero el numero de celdas es mayor que
sus requerimientos, el sistema le permite que elimine celdas.
Estimulo
El usuario hace Clic para Eliminar Celdas.
Actividad
En el lugar donde se encuentra Ejecute el comando,
DECMD_DELETECELLS
End if
End if
Respuesta
Efecto
Disminuir el numero de Celdas de la Tabla en la página Web.
El usuario puede Eliminar a medida que no las necesite.
Tabla 20. Color de celda.
ID del evento
018
El usuario hace Clic para colocar o cambiar Color de Celda a la tabla.
Descripción
Estimulo
Actividad
Si el usuario crea una tabla y desea darle o cambiar el color, puede hacerlo
escogiendo el color de Celda que mas le atraiga.
El usuario hace Clic para colocar Color de Celda.
O
El usuario hace Clic para cambiar la Color de Celda.
Funcion_ColorCelda, Color Seleccionado
End if
End if
Respuesta
Una ventana donde se puede seleccionar el color que se establecerá como
fondo de la Celda.
Efecto
El usuario podrá cambiar el color de Celda cuando quiera, para mejorar la
apariencia de la Tabla.
62
Tabla 21. Imagen de Celda.
ID del evento
019
El usuario hace Clic para colocar o cambiar Imagen de Celda a la tabla.
Descripción
Estimulo
Actividad
Si el usuario crea una tabla y desea darle o cambiar la Imagen, puede hacerlo
escogiendo la ruta de Imagen de Celda que mas le atraiga.
El usuario hace Clic para colocar Imagen de Celda.
O
El usuario hace Clic para cambiar la Imagen de Celda.
Funcion_ImagenCelda, ruta
End if
End if
Respuesta
Una ventana donde se puede seleccionar la Imagen que se establecerá como
fondo de la Celda.
Efecto
El usuario podrá cambiar la Imagen de Celda cuando quiera, para mejorar la
apariencia de la Tabla.
Tabla 22. Color de borde.
ID del evento
020
El usuario hace Clic para cambiar el color del Borde (normal, claro y oscuro)
de la Celda.
Descripción
Si el usuario crea una tabla y desea darle o cambiar el color del borde
(normal, claro y oscuro), puede hacerlo escogiendo el color de Borde de
Celda que mas le atraiga.
Estimulo
El usuario hace Clic para cambiar el color del borde de Celda.
Actividad
Funcion_ColorBordeCelda, Borde Normal, Color Seleccionado
Funcion_ColorBordeCelda, Borde Claro, Color Seleccionado
Funcion_ColorBordeCelda, Borde Oscuro, Color Seleccionado
End if
End if
Respuesta
Efecto
Una ventana donde se puede seleccionar el color de Borde (normal, claro y oscuro)
que se establecerá.
El usuario podrá cambiar el color de Borde (normal, claro, oscuro) de la Celda
cuando quiera, para mejorar la apariencia de la Tabla.
63
Tabla 23. Transición de páginas
ID del evento
021
El usuario hace Clic para cambiar de Página activa, ya sea adelante o atrás a
partir de la página actual.
Descripción
Estimulo
Actividad
El usuario puede navegar a través de las diferentes páginas que estén
creadas en el documento ir hasta la primera página creada o hasta la ultima,
mirar la página anterior o la siguiente (si esta creada).
El usuario hace Clic para cambiar la Página Activa (transición entre anterior y
siguiente).
If Página actual <> Primera Página then
Situarse en la Página Anterior
End if
O
If Página actual <> Ultima Página then
Situarse en la Página Siguiente
End if
End if
Respuesta
Mostrar en pantalla la Página inmediatamente anterior o siguiente según sea
el caso.
Efecto
El usuario podrá hacer una navegación entre las diferentes página activas en
el Editor y realizar los cambios que desee sobre cada una de ellas.
Tabla 24. Marcador.
ID del evento
022
El usuario hace Clic para crear un Marcador.
Descripción
El usuario puede crear Marcadores o Anclas en cualquier lugar del documento
sobre el texto que seleccione y a donde quiere hacer referencia en el
momento de crear un enlace.
Estimulo
El usuario hace Clic para crear un Marcador.
Actividad
If Hay texto seleccionado then
Etiquetas HTML & Crear Marcador & Etiquetas HTML
End if
End if
Respuesta
Efecto
Mostrar en Pantalla una ventana para especificar el nombre con el cual se
conocerá el marcador.
Crear el marcador y generar el lenguaje HTML con el nombre que se le dio.
64
Tabla 25. Hipervínculo.
ID del evento
023
El usuario hace Clic para crear un Enlace.
Descripción
Estimulo
El usuario puede crear Enlaces en cualquier lugar del documento sobre el
texto o imagen que seleccione para hacer referencia a un archivo, marcador o
página web.
El usuario hace Clic para crear un Enlace.
If Hay texto seleccionado then
Etiquetas HTML & Crear Enlace & Etiquetas HTML
End if
Actividad
Respuesta
Efecto
O
If Hay imagen seleccionada then
Etiquetas HTML & Crear Enlace & Etiquetas HTML
End if
End if
Mostrar en Pantalla una ventana para especificar el nombre con el cual se
conocerá el enlace y hacia donde se hace referencia (archivo, imagen,
marcador).
Crear el Enlace y generar el lenguaje HTML con el nombre que se le dio.
Tabla 26. Imprimir.
ID del evento
024
El usuario hace Clic para Imprimir el documento.
Descripción
El usuario puede imprimir las páginas del documento que desee plasmar en
papel con los colores texto e imagen que contenga.
Estimulo
El usuario hace Clic para Imprimir Documento.
Actividad
Imprimir documento
Respuesta
Efecto
Mostrar en Pantalla la ventana de la impresora determinada donde el usuario
pude configurar la propiedades de impresión.
Plasmar en papel todos los elementos que estén contenidos en el documento.
65
Tabla 27. Vista previa.
ID del evento
025
El usuario hace Clic para llamar el navegador.
Descripción
El usuario puede visualizar las páginas del documento que desee en el
navegador con los elementos, enlaces que contenga.
Estimulo
El usuario hace Clic para crear una Vista Previa.
Actividad
Donde se encuentre texto_HTML = Donde se encuentre Documento_HTML
Llamar navegador
Respuesta
Efecto
Mostrar en Pantalla la ventana del navegador determinado donde el usuario
pude observar y probar como va quedando la página Web.
El usuario puede ver como los visitantes de su Web Site observaran e
interactuaran con su página Web.
Tabla 28. Abrir Página.
ID del evento
026
El usuario hace Clic para Abrir una página.
Descripción
El usuario puede editar una página web existente y realizar los cambios que
estime convenientes.
Estimulo
El usuario hace Clic para Abrir una página.
Actividad
En el lugar donde este Abra la Página
Respuesta
Efecto
Muestra una pantalla donde puede seleccionar la página que desea abrir.
Si quiere agregar elementos a una página anteriormente creada o modificar
una página que sea de su agrado.
66
Tabla 29. Guardar página.
ID del evento
027
El usuario hace Clic para Guardar una página.
Descripción
El usuario puede Guardar un documento en el momento que lo estime
conveniente guardar los cambios realizados en una página web existente.
Estimulo
El usuario hace Clic para Guardar una página.
Actividad
En el lugar donde este Guarde.
Respuesta
Efecto
Muestra una pantalla donde puede Guardar.
El usuario puede guardar en disco la página o simplemente guardar los
cambios realizados sobre una página web.
Tabla 30. Formulario.
ID del evento
028
El usuario hace Clic para Crear un formulario Web.
Descripción
Dentro de la etiqueta de formulario se definirán los distintos elementos de
petición de datos. Tales como botones, cajas de dialogo y ventanas para la
introducción de datos. Estas etiquetas se incluirán entre la de definición del
formulario y la etiqueta de final de formulario.
Estimulo
El usuario hace Clic para Crear un formulario.
Actividad
If Página Activa then
Codigo_Formulario= Etiquetas HTML & Nombre Formulario &
Etiquetas HTML.
Donde este ubicado Codigo_Formulario
End if
Respuesta
Efecto
Muestra las etiquetas del comienzo y final del formulario.
El usuario puede crear en cualquier parte del documento un formulario para
almacenar la inserción en que necesite además de permitir dentro de el la
inserción de elementos que permiten crear páginas web mas elaboradas y
con un mejor enfoque de la infamación .
67
Tabla 31. Insertar Botón.
ID del evento
029
El usuario hace Clic para Insertar un Botón de Comando.
Descripción
El usuario puede Insertar un Botón de Comando, que le permite determinar el
envió o el restablecimiento de un formulario, este Botón tiene asociada una
orden. Esta orden se ejecutara cuando el visitante haga clic sobre el.
Estimulo
El usuario hace Clic para Insertar un Botón de Comando.
Actividad
If Página Activa && dentro de formulario then
Codigo_Boton= Etiquetas HTML & Nombre Botón & Tipo de botón &
Etiquetas HTML.
Donde este ubicado Codigo_Boton
End if
Respuesta
Efecto
Muestra un botón en pantalla.
El usuario puede integrar sus páginas con elementos que le permitan al
formulario evaluar el estado y contenido de los diferentes elementos
contenidos en el.
Tabla 32. Botón de opción.
ID del evento
030
El usuario hace Clic para Insertar un Botón de Opción.
Descripción
El usuario puede Insertar un Botón de Opción, que le permite seleccionar una
opción de entre varias. De esta forma solo se puede escoger una opción de
un grupo de ellas.
Estimulo
El usuario hace Clic para Insertar un Botón de Opción.
Actividad
Codigo_ Opción = Etiquetas HTML & Nombre Opción & Etiquetas
HTML.
Donde este ubicado Codigo_ Opción
End if
Respuesta
Efecto
Muestra un botón de Opción en pantalla.
visitante escoger el una opción entre varias de acuerdo a su preferencia.
68
Tabla 33. Cuadro de chequeo.
ID del evento
031
El usuario hace Clic para Insertar una Casilla de Verificación.
Descripción
El usuario puede Insertar una Casilla de Verificación, que le permite escoger
varias opciones de un grupo.
Estimulo
El usuario hace Clic para Insertar una Casilla de Verificación.
Actividad
Codigo_ Casilla de Verificación = Etiquetas HTML & Nombre
Casilla de Verificación & Tipo Casilla de Verificación &
Etiquetas HTML.
Donde este ubicado Codigo_ Casilla de Verificación
End if
Respuesta
Efecto
Muestra una Casilla de Verificación en pantalla.
visitante escoger varias alternativas de acuerdo a su preferencia.
Tabla 34. Lista desplegable.
ID del evento
032
El usuario hace Clic para Insertar una Lista Desplegable.
Descripción
El usuario puede Insertar una Lista Desplegable, que le permite escoger un
elemento de la lista.
Estimulo
El usuario hace Clic para Insertar Lista Desplegable.
Actividad
Codigo_Lista Desplegable = Etiquetas HTML & Nombre Lista
Desplegable & Tipo Lista Desplegable & Etiquetas HTML.
Donde este ubicado Codigo_ Lista Desplegable
End if
Respuesta
Efecto
Muestra una Lista Desplegable en pantalla.
visitante escoger una de varias alternativas de acuerdo a su preferencia.
69
Tabla 35. Lista.
ID del evento
033
El usuario hace Clic para Insertar una Lista.
Descripción
El usuario puede Insertar una Lista, que contiene una serir de elementos de
la que el usuario puede seleccionar uno, esta lista muestra varios de sus
elementos desplegados.
Estimulo
El usuario hace Clic para Insertar Lista.
Actividad
Codigo_ Lista = Etiquetas HTML & Nombre Lista &
Etiquetas HTML.
Donde este ubicado Codigo_ Lista
End if
Respuesta
Efecto
Tipo Lista
&
Muestra una Lista en pantalla.
visitante escoger una de varias alternativas de acuerdo a su preferencia.
Tabla 36. Caja de texto.
ID del evento
034
El usuario hace Clic para Insertar una Caja de Texto.
Descripción
Se utiliza para la entrada de cadenas de texto corto, como por ejemplo
nombre de personas, números, fechas o diversos datos que se puedan
expresar en una línea de texto.
Estimulo
El usuario hace Clic para Insertar una Caja de Texto.
Actividad
Codigo_ Lista = Etiquetas HTML & Nombre Caja de Texto &
Caja de Texto & valor & Etiquetas HTML.
Donde este ubicado Codigo_ Caja de Texto
End if
Respuesta
Efecto
Muestra una Caja de Texto en pantalla.
visitante introducir o visualizar datos que se requieran para ingresar o
informar sobre el contenido de la página Web.
Tipo
70
Tabla 37. Ver código.
ID del evento
035
El usuario hace Clic para ver el Código HTML.
Descripción
Estimulo
El usuario puede ver el Código HTML, que se genera a medida que le ingresa
cualquier elemento a la página, pude visualizar y cambiar atributos del
documento HTML.
El usuario hace Clic para ver el código HTML
Actividad
Respuesta
Efecto
DiseñoHTML.Texto = DocumentoHTML.Documento
Muestra una pantalla con los atributos y etiquetas que posee el lenguaje
HTML.
El usuario puede ver el Código HTML de sus páginas o de otras páginas que
no han sido creadas por el.
Tabla 38. Ayuda.
ID del evento
036
El usuario hace Clic para solicitar Ayuda al programa.
Descripción
El usuario puede obtener ayuda del programa cuando la solicite.
Estimulo
El usuario hace Clic para solicitar Ayuda al programa.
Actividad
Desplegar Ayuda, ID de la Ayuda
Respuesta
Efecto
Muestra en pantalla la ayuda con el tema que fue solicitado para obtener
mayor información.
El usuario puede recibir ayuda del sistema cuando el la solicite y en el tema
para lo cual fue desplegada.
71
Tabla 39. Clic arrastrado.
ID del evento
037
El usuario hace Clic Arrastrado para seleccionar varios elementos de la
página.
Descripción
El usuario puede hacer Clic arrastrado sobre un bloque de elementos para
seleccionarlos y ejecutar acciones comunes para todos ellos.
Estimulo
El usuario desplaza el ratón haciendo Clic Arrastrado para seleccionar varios
elementos.
Actividad
Parrafo.Seleccionado = Verdadero
Respuesta
Efecto
Muestra en pantalla los elementos con color negro claro para identificar la
selección.
El usuario puede ejecutar cualquier acción sobre los objetos seleccionados.
Evento / Ventana
Colocar o cambiar Color
de Celda.
Insertar Tabla.
Cambiar Tamaño de
Fuente.
X
Cambiar Tipo de Fuente.
X
Cambiar Color de Fuente.
X
Insertar Imágenes.
insertar Filas o Columnas.
X
Colocar o cambiar Color
de Tabla.
X
Colocar o cambiar Imagen
de Tabla.
X
Insertar Video
Estilo de Objeto
Propiedades de texto
multilínea
Propiedades de lista
Propiedades de cuadro
de texto
Propiedades de botón
de opción
de chequeo
Propiedades de Botón
Propiedades de
Formulario
Sonido de Fondo y
Titulo de la Pagina
Marquesina
Línea Horizontal
Insertar Fondo
Insertar Imagen
Insertar Tabla
Dirección de Correo
Configuración de
enlaces
Establecer Marcador
Propiedades de la
Pagina
Imprimir
Guardar Pagina
Abrir Pagina
Propiedades de Viñetas
Propiedades de
Numeración
Fuente
Propiedades de Celda
Nueva Pagina
72
Tabla 40. Matriz Evento (Escribir – Color de Celda) / Ventana.
Escribir en el Documento.
X
X
X
72
Evento / Ventana
Colocar o cambiar Imagen
de Celda.
Insertar o cambiar Color
de Borde.
Abrir una pagina.
Guardar una pagina.
Propiedades de Formulario
Web.
Propiedades de Botón de
Comando.
Propiedades de Botón de
Opción.
Propiedades de Caja de
Chequeo.
Imprimir el Documento.
Insertar Marcadores en su
Documento Web.
Insertar Hipervínculos en
su Documento Web.
Insertar Video
Estilo de Objeto
multilínea
de texto
de opción
de chequeo
Propiedades de
Formulario
Sonido de Fondo y
Titulo de la Pagina
Marquesina
Línea Horizontal
Insertar Fondo
Insertar Imagen
Insertar Tabla
Configuración de
enlaces
Establecer Marcador
Propiedades de la
Pagina
Imprimir
Guardar Pagina
Abrir Pagina
Propiedades de
Numeración
Fuente
Nueva Pagina
73
Tabla 41. Matriz Evento (Imagen celda – Propiedades caja de chequeo) / Ventana.
X
X
X
X
X
X
X
X
X
X
X
73
Evento / Ventana
Insertar una Línea
Horizontal
Texto.
Texto Multilínea.
Propiedades de Lista
Desplegable.
X
Propiedades de Lista de
Selección.
X
Estilo de Formulario Web.
X
Estilo de Botón de
Comando.
X
Estilo de Botón de Opción.
X
Estilo de Caja de Chequeo.
X
Insertar Video
Estilo de Objeto
multilínea
de texto
de opción
de chequeo
Propiedades de
Formulario
Sonido de Fondo y
Titulo de la Pagina
Marquesina
Línea Horizontal
Insertar Fondo
Insertar Imagen
Insertar Tabla
Configuración de
enlaces
Establecer Marcador
Propiedades de la
Pagina
Imprimir
Guardar Pagina
Abrir Pagina
Propiedades de
Numeración
Fuente
Nueva Pagina
74
Tabla 42. Matriz Evento (Propiedades lista desplegable – Estilo caja de chequeo) / Ventana.
X
X
X
Solicitar Ayuda del
programa.
74
Evento / Ventana
Estilo de Lista de
Selección.
X
Estilo de Caja de Texto.
X
Estilo de Caja de Texto
Multilínea.
X
Insertar Video
Estilo de Objeto
multilínea
de texto
de opción
de chequeo
Propiedades de
Formulario
Sonido de Fondo y
Titulo de la Pagina
Marquesina
Línea Horizontal
Insertar Fondo
Insertar Imagen
Insertar Tabla
Configuración de
enlaces
Establecer Marcador
Propiedades de la
Pagina
Imprimir
Guardar Pagina
Abrir Pagina
Propiedades de
Numeración
Fuente
Nueva Pagina
75
Tabla 43. Matriz Evento (Estilo lista – Estilo caja de texto) / Ventana.
75
76
5. DISEÑO DE INTERFACES
TIPOS DE VENTANAS
Las ventanas son empleadas en el desarrollo de aplicaciones de acuerdo a sus
características de manera que cumplan con las necesidades del Diseño del Software, la
forma en que las ventanas son utilizadas pueden ser agrupadas en varios tipos.
5.1.1 Ventana principal o de Aplicación. Existe en la pantalla en forma independiente de
cualquier otra ventana. Puede traslapar y ser traslapada por otras ventanas. Es movible, lo
que significa que puede ser arrastrada a un lado para que revele lo que se encuentra bajo
ella. Es redimensionable por el usuario y puede ser minimizada como un icono en el
escritorio. Al arrancar una aplicación es necesario mostrar una ventana primaria, para evitar
la presentación de pantallas muertas al usuario.
5.1.2 Ventana Hija. Se abre a partir de una ventana madre, y no puede ser traslapada por
esta, la ventana hija no puede ser arrastrada fuera de los confines de la ventana madre.
Cuando se minimiza una ventana hija se convierte en un icono del espacio de trabajo de la a
ventana hija. La ventana hija no puede existir después que ventana madre se haya cerrado.
Cuando se cierra una ventana madre también se cerrarán todas sus ventanas hijas
77
Las ventana hija es modal cuando es utilizada para solicitar información al usuario antes de
continuar con la tarea solicitada.
5.1.3 Ventana de Repuesta. Es el tipo de ventana con comportamiento más restrictivo,
obtiene el enfoque cuando es abierta y no lo libera hasta que se cierra. No es minimizable ni
redimensionable. Los cuadros de mensaje y de dialogo que se usan para desplegar mensajes
de error y de confirmación también presentan este comportamiento restrictivo.
5.1.4 Marco MDI / Hoja MDI. Permite al usuario mostrar varios documentos a la vez,
cada uno en su propia ventana, entendiendo por documento un conjunto de datos
lógicamente relacionados entre sí. El marco MDI es un espacio de trabajo redimensionable
y autocontenido que opera muy similar a una ventana principal, pero tiene integrada
algunas características especiales. En forma muy similar a una ventana principal, el marco
MDI viene con un menú. Las hojas MDI se comportan como ventanas hijas. No pueden ser
traslapadas fuera de los confines del marco MDI y se minimiza a un icono dentro del
marco.
5.1.5 Carpetas con Fichas o Pestañas. Es un tipo de ventana especial que se comporta
muy similar a un conjunto en capas de hojas MDI o ventanas hijas. La apariencia de un
marco de ventana ha sido modificado para que parezca a una carpeta archivos con una
pestaña saliente sobre la cual está escrito el nombre. Las carpetas con ficha son
particularmente útiles cuando hay demasiados elementos de datos a desplegar en una
ventana y el tema a presentarse divide en forma lógica en áreas de temas distintos.
78
5.2 ESPECIFICACIÓN DE VENTANAS
El diseño de la interfaz externa crea un bosquejo del comportamiento visible del sistema
para comprender la especificación y comenzar a elaborar rutinas de prueba y materiales de
capacitación sin tener que esperar el producto final.
5.3 DISPOSICIÓN DE VENTANAS
Se establecerán los rótulos de campo adecuados y sus posiciones relativas. También se
tendrá en cuenta la posición de todos los botones y elementos de menú. Las barras de titulo
tendrán que decir exactamente lo que se desea y se deberán anotar todas las partes
dinámicas de la barra de título.(Ver Imagen 37 - 51).
79
Figura 37. Ventana principal.
Figura 38. Establecer marcador.
Figura 39. Fuente
80
Figura 40. Creación de enlaces.
Figura 41. Insertar Fondo
81
Figura 43. Insertar línea Horizontal.
82
Figura 44. Insertar tabla.
Figura 45. Insertar video
83
Figura. 46 Insertar Marquesina.
Figura. 47 Nueva Pagina de Marcos.
84
Figura. 48 Propiedades de Pagina.
Figura 49 Sonido y Titulo.
85
Figura. 50 Propiedades de celda.
Figura. 51 Editor de Mapas.
86
5.4 DESCRIPCIÓN DE VENTANAS
La descripción de ventanas debe incluir un panorama del objetivo de la ventana y una
descripción del o los eventos que son manejados por esta interfaz. Gran parte de este texto
ya existe en el modelo de eventos. Todo lo que se necesita es añadir información de los
botones, menús y decisiones ergonómicas que se han tomado en la fase de diseño. (Ver
Tabla 44 - 58)
5.5 MINIESPECIFICACION DE VENTANAS
La miniespecificación de ventana se enfoca en el comportamiento del marco de ventana y
de todos los botones, elementos de menú y controles que se hayan colocado en a ventana.
Por lo menos se debe especificar lo que sucede cuando se abre la ventana y lo que sucede
cuando se cierra.
De acuerdo al uso y desempeño de la ventana tendrá en momentos, elementos tales como
botones u opciones del menú desactivadas, que a medida que se den las condiciones que
requiere el programa se Irán activando y dando paso a otras posibilidades en la ventana.
(Ver Tabla 59 - 73).
87
Tabla 44. Ventana principal.
Barra de titulo: FacilWeb – ²Sin Titulo numero de página³
Menú:
Archivo, Edición, Insertar, Formato, Marco, Tabla, Ayuda.
Tipo de Ventana: Marco MDI
Esta ventana es con la cual el usuario interactúa para crear sus páginas web, es la ventana principal
de la aplicación, en la cual se puede insertar imagen, tablas, fondo, video, sonido y escribir párrafos
para la construcción de un documento HTML; sin tener que codificar un solo renglón de este, de
manera que un usuario con o sin experiencia en la construcción de páginas para Internet podrá
familiarizarse rápida y amigablemente con la interfaz para construir fácil y cómodamente un sitio web.
La ventana principal consta de un menú y tres barras de herramientas; una de funciones de Barra
Estándar (con opciones Web), Formato y de Programación en las cuales se encuentran las operaciones
que la aplicación puede realizar.
La ventana posee tres pestañas Diseño, Código HTML, y Vista Explorador, la primera es el área de
trabajo del usuario donde este crea su página, insertando elementos, escribiendo texto, etc. La
segunda muestra el código HTML generado a partir del área de diseño. Y la tercera muestra como se
verá la página en el navegador.
Tabla 45. Marcador
Barra de título: Establecer Marcador
Menú:
Ninguno
Tipo de Ventana: Ventana Hija
Aquí es donde el usuario luego de seleccionar el texto puede crear un marcador, llega a esta ventana
por menú Edición Definir Marcador; si hay un texto seleccionado en la ventana Principal la opción en el
menú se activa de lo contrario no se puede acceder a la ventana.
El campo Nombre de Marcador es en donde el usuario le otorga un identificador al marcador que
desea crear. Por defecto el nombre que aparece al abrir esta ventana es el mismo texto seleccionado
que es cambiado por el que teclee el usuario.
El botón Eliminar borra de la Lista de Marcadores, el marcador que ha sido seleccionado de ella y cuyo
nombre aparece en el campo Nombre del Marcador.
El campo Lista de Marcadores contiene todos los nombre de los marcadores que están contenidos la
página web activa.
El botón aceptar genera el código HTML para el nuevo Marcador. El botón Cancelar regresa al usuario
ala ventana principal. El botón Ayuda despliega una guía referente a la creación y eliminación de
Marcadores.
88
Tabla 46. Fuente
Barra de titulo: Fuente
Menú:
Ninguno
Tipo de Ventana: Ventana Hija
En esta ventana el usuario determina cual será el Tipo, Tamaño, Color, Estilo y Efecto que tendrá el
texto de la página. El usuario puede acceder a esta ventana haciendo clic en menú Formato / Fuente o
dando clic derecho sobre el área de trabajo Propiedades de Fuente; estas opciones sólo estarán
activas si no se encuentra seleccionado un elemento diferente de texto.
El campo Fuente muestra el tipo de fuente actual y las posibilidades entre las cuales puede cambiar a
un tipo de fuente diferente; es decir de usar un Tipo Times New Roman puede pasar a Verdana o
viceversa y así con cualquier Tipo de Fuente. A través de la casilla Fuente en la Barra de Herramientas
el usuario podrá realizar la misma operación que por esta ventana.
El campo Estilo de Fuente muestra el estilo de fuente actual y las posibilidades entre las cuales puede
elegir (Normal, Cursiva, Negrita, Negrita Cursiva) a un Estilo de Fuente nuevo; si desea resaltar un
titulo puede poner el texto en Negrilla o cursiva, o quitarle estos atributos. A través de los iconos
respectivos en la Barra de Herramientas el usuario podrá realizar la misma operación que por esta
ventana.
El campo Tamaño de fuente muestra el Tamaño actual del texto y las medidas entre las cuales puede
escoger. Si el usuario desea aumentar o disminuir el tamaño de la fuente sólo debe escoger una
medida de la lista. A través de la casilla Tamaño en la Barra de Herramientas el usuario podrá realizar
la misma operación que por esta ventana.
El campo efecto le permite al usuario darle una apariencia al texto de subrayado. A través del icono
respectivo en la Barra de Herramientas el usuario podrá realizar la misma operación que por esta
ventana.
El campo Color de fuente le permite al usuario darle una apariencia colorida al texto. A través del
icono Color de texto en la Barra de Herramientas el usuario podrá realizar la misma operación que por
esta ventana.
El campo vista previa permite al usuario tener una referencia visual de cómo que darán los cambios
realizados en los campos de esta ventana.
El botón Aceptar genera el código HTML y muestra en pantalla los ítem seleccionados. El botón
Cancelar regresa al usuario a la ventana principal. El botón ayuda despliega una guía del manejo de
Fuentes.
89
Tabla 47. Hipervínculos.
Barra de titulo: Configuración de Enlaces
Menú: Ninguno
Tipo de Ventana: Hija
La ventana Configuración de enlaces es usada para crear los hipervínculos, dentro del documento y a
otros sitios Web, a esta ventana se llega dando Clic sobre menú / Edición Hipervínculo o sobre el
icono Hipervínculo de la Barra de Herramientas. Para crear un enlace el usuario preferiblemente
deberá seleccionar un texto o una imagen en el documento, luego llamar la ventana de crear el
enlace determinar en que sitio quiere que se cargue el vínculo (página nueva, en el mismo
documento o en un marco), para que cuando sea presionado (en el navegador) dirija al visitante a
otro lugar que se quiera sea también visitado.
El campo Dirección URL establece la ubicación del enlace seleccionado. Si este enlace es un marcador
de otra página aparecerá la ruta más el nombre del marcador.
El campo página muestra las páginas que son referenciadas por el o los enlaces con sus respectivos
marcadores, y es en donde se escoge el marcador o página a la cual se quiera hacer referencia.
El campo Texto Alternativo, permite escribir un nombre o especificación del enlace para que en el
momento de pasar el puntero del ratón sobre el hipervínculo se despliegue un pequeño mensaje
sobre información o especificación que le dará al visitante una guía de lo que obtendrá si pulsa el
enlace.
El botón Enlace a una Página, permite seleccionar la página hacia la cual se desea dirigir el enlace. El
botón Enlace a un archivo proporciona al usuario el poder escoger un archivo al cual se desea dirigir
el enlace. El botón Enlace a correo electrónico permite al usuario introducir su correo electrónico,
para que los visitantes se comuniquen con él a través de correo electrónico.
El botón Aceptar genera el código HTML del enlace. El botón cancelar devuelve al usuario a la
pantalla principal. El botón ayuda despliega una ventana con una descripción de la creación de
enlaces.
Tabla 48. Fondo.
Barra de titulo: Insertar Fondo
Menú:
Ninguno
La Ventana Insertar Fondo permite a los usuarios escoger una imagen para que sea el fondo de su
página. La ventana puede ser abierta desde el menú, Formato / fondo o Insertar / fondo o con el icono
Insertar Fondo de la Barra de Herramientas.
El primer campo Seleccione Unidad de Disco muestra las diferentes unidades que posee la máquina en
que el usuario este trabajando, para que esté seleccione la unidad donde se encuentra la carpeta que
contiene el archivo que se establecerá como fondo de la página web; la Carpeta se establece en el
campo Seleccione Carpeta y el Archivo en el de Seleccione Archivo.
El campo Establecer la Extensión de la Imagen, el usuario puede escoger el formato de la imagen que
desee colocar como fondo (gif, jpg, bmp, etc).
El campo Vista Previa visualiza el archivo seleccionado mostrando la imagen correspondiente.
El botón Insertar coloca la imagen en el documento y genera el código HTML correspondiente a la ruta
y otras características del fondo. El botón cancelar devuelve al usuario a la ventana principal. El botón
ayuda despliega la ventana que contiene información sobre como insertar el fondo la función de cada
un de los campos de la ventana Insertar Fondo.
90
Tabla 49. Imagen
Barra de titulo: Insertar Imagen
Menú: Ninguno
La ventana Insertar Imagen, permite al usuario insertar cualquier tipo de imagen en el lugar del
documento que desee. Para acceder a la ventana el usuario lo puede hacer por medio del menú
Insertar / Imagen o con el icono Insertar Imagen de la barra de tareas.
El primer campo Unidad de Disco muestra las diferentes unidades de que posee la máquina en que
el usuario esté trabajando, para que este seleccione la unidad donde se encuentra la carpeta que
contiene el archivo que se insertará como imagen; la Carpeta se establece en el campo Carpeta y el
Archivo en el de Archivo.
El campo tipo de Imagen, el usuario puede escoger el formato de Archivo que desee colocar como
fondo (gif, jpg, bmp, etc).
El campo alineación del texto muestra como quedará el texto con respecto a la imagen, el usuario
puede escoger cualquiera de la opciones allí presentes (Predefinido, Superior, Medio, Inferior,
Izquierda, Derecha) y observar la posición de texto para cada una.
El botón Insertar genera el código HTML y coloca la imagen en el documento. El botón Cancelar
cierra la ventana. El botón ayuda muestra una ventana con información sobre como insertar
imágenes.
Tabla 50. Insertar línea.
Barra de titulo: Insertar Línea
Menú: Ninguno
La ventana Insertar Línea permite al usuario incorporar líneas a sus documentos. Para acceder a esta
ventana el usuario hace Clic sobre el menú Insertar / Línea Horizontal.
El campo Ancho establece que parte de la página ocupará la línea, ya sea este valor en porcentaje o
en píxeles.
El campo Alto establece el grosor de la línea según el número de altura (de líneas del documento)
que se le coloque.
El campo Alineación especifica el sentido que puede tener la Línea (Izquierda, Centro o Derecha).
Esta configuración sólo es aplicable si el ancho de la regla es inferior al ancho de la ventana del
navegador.
El campo Línea Sólida especifica si la línea debe trazarse con sombreado.
El campo Color de Línea establece el color de la línea.
El botón Aceptar insertar la línea y genera el código HTML. El botón Cancelar cierra la ventana. El
botón ayuda despliega la ventana con la información acerca de Insertar líneas.
91
Barra de titulo: Insertar Tabla
Menú: Ninguno
La ventana Insertar Tabla permite al usuario incorporar tablas para sus documentos web, en las
cuales puede organizar su información, permitiendo la navegación por parte de los visitantes, el
mantenimiento y mejorando la apariencia de la página. Para acceder a la ventana el usuario debe
hacer Clic sobre el menú Tabla / Insertar Tabla o Insertar / Tabla o sobre el icono Insertar Tabla de
la barra de herramientas.
En el área Tamaño especifica el numero de Filas y columnas que tendrá la tabla. En el campo Filas,
determina el número de filas de la tabla. En el campo Columnas, establece el número de columnas
de la tabla.
El campo Alineación especifica la orientación que puede tener la Tabla (Predeterminada, Izquierda,
Centro o Derecha). Esta configuración sólo es aplicable si el ancho de la Tabla es inferior al ancho de
la ventana del navegador.
En el campo Tamaño del Borde, especifica el ancho en píxeles del borde de la tabla.
En el campo Espacio Entre Celdas, especifica el número de píxeles que debe haber entre las celdas
de la tabla. En el campo Relleno celda, determina el número de píxeles que habrá entre el contenido
de la celda y el límite de ésta.
En el campo Ancho de Tabla, determina el ancho de la tabla como un número de píxeles o como
porcentaje de la ventana del navegador.
El botón Insertar coloca en el documento y genera el código HTML de la tabla. El botón Cancelar
regresa al usuario a la ventana principal. El botón ayuda despliega la ventana con la información
acerca de Insertar Tablas.
Tabla 52. Insertar video.
Barra de titulo: Insertar Video
Menú: Ninguno
La ventana Insertar Video le permite al usuario, en cualquier lugar del documento colocar un video
para que sea observado por los visitantes a su sitio web. Para acceder a la ventana de Insertar Video
el usuario debe hacer Clic en menú Insertar / Video.
El campo Ubicación de Video permite que el usuario determine el video que quiere insertar en su
página mediante una ventana de abrir que le muestra el contenido de las unidades de disco presentes
en la maquina.
El campo Repetición del Video determina el número de veces que se desee repetir el video o si lo
prefiere el usuario puede determinarlo como continuo.
El campo Comenzar el usuario puede determinar la forma como quiere que el video empiece a
reproducirse.
El botón Aceptar coloca el video en el documento y genera el código HTML. El botón Cancelar regresa
al usuario a la ventana principal. El botón ayuda despliega la ventana con la información acerca de
Insertar Videos.
92
Tabla 53. Insertar marquesina.
Barra de titulo: Insertar Marquesina
Menú: Ninguno
La ventan Insertar Marquesina le permite al usuario colocar texto en movimiento a través de la página
con mensajes que embellecen el contenido del documento Web. Para acceder a esta ventana el usuario
debe dar Clic en el menú Insertar / Marquesina.
El campo Texto a Mostrar, contiene el texto que se desplazará por la página, el cual será introducido
por el usuario.
El campo Alto Marquesina hace referencia el área vertical que ocupará la marquesina en la página.
Puede especificar el Alto en porcentaje o en píxeles.
El campo Ancho Marquesina se refiere el área Horizontal que ocupará la marquesina en la página.
Puede especificar el Ancho en porcentaje o en píxeles.
El campo comportamiento especifica la forma en que el usuario quiere que se presente la ejecución de
la Marquesina en la página.
El campo dirección especifica el sentido en que se desplazará el texto (derecha o Izquierda) en la
página web.
El campo Repetir se refiere al número de veces que el texto de la marquesina se desplazará por la
página. Este valor por defecto viene infinito.
El campo Color de Fondo especifica el color que tendrá la parte del fondo donde se desplaza el texto.
El botón Aceptar coloca la Marquesina en el documento y genera el código HTML. El botón Cancelar
acerca de Insertar Marquesina.
Tabla 54. Página Nueva.
Barra de titulo: Página Nueva
Menú: Ninguno
En la ventana Página Nueva el usuario puede insertar una nueva página Normal o una página con
Marcos según vaya necesitando mas páginas para su sitio web. Para acceder a la ventana Página
Nueva el usuario debe hacer Clic sobre Archivo / Nuevo.
El campo Normal inserta una nueva página sencilla al sitio que se está diseñando.
El campo Página de Marcos, despliega unas opciones de selección donde el usuario puede determinar
el tipo de página con marcos que desea ya sea Contenido (Separación Vertical), Título (Separación
Horizontal) o Título Contenido (Separación Vertical y Horizontal).
El botón Aceptar coloca la página nueva ya sea Normal o con Macros, genera el código HTML. El botón
Cancelar regresa al usuario a la ventana principal. El botón ayuda despliega la ventana con la
información acerca de cómo crear Páginas Nuevas.
93
Tabla 55. Propiedades de página.
Barra de titulo: Propiedades de la Página
Menú: Ninguno
La ventana Propiedades de la Página, es donde el usuario puede especificar diversas opciones de la
página (Imagen y color de fondo, Color de Texto, Color de Hipervínculo, Márgenes). Para abrir el
cuadro de diálogo Propiedades de la página, elija en el menú Archivo / Propiedades de la página o Clic
derecho sobre el documento.
El campo Imagen de fondo establece la imagen que se quiera colocar como fondo de la página. El
campo Color de Fondo establece el color que tendrá de fondo la página. El campo color de texto
determina el color que usará el texto en el documento.
Los campos Hipervínculo, Hipervínculo Visitado, Hipervínculo Activo, determinan con cual color se
identificará a cada uno de estos en el navegador en el momento que sean activados.
El campo Estilo de la Imagen de fondo, coloca un efecto a la imagen de fondo que parece que anulará
el movimiento perceptible en ella al usar la barra de desplazamiento.
El área Márgenes Configura cuanto se dejara en píxeles (Superior e Izquierdo) en el área de trabajo
del usuario que se va a usar.
El botón Aceptar muestra en pantalla los cambios realizados en el documento, genera el código HTML.
El botón Cancelar regresa al usuario a la ventana principal. El botón ayuda despliega la ventana con la
información acerca de cómo trabajar con la ventana Propiedades de la Página.
Tabla 56. Sonido de fondo y titulo.
Barra de titulo: Sonido de Fondo y Titulo de la Página
Menú: Ninguno
La ventana Sonido de Fondo y Titulo de la Página, permite al usuario suministrar un pequeño concepto
del tema de la página con el título de ésta. El usuario puede adornar su documento web, insertando
música, para que los visitantes a su sitio se sientan agradados con el ambiente que se les suministra.
El campo Titulo suministra y asigna el Titulo con el cual se identificara la página en el navegador.
El campo Ubicación sirve para que el usuario identifique mediante una ventana de Abrir, la pista que
quiere se reproduzca en su página. La pista puede reproducirse siempre o unas cuantas veces; si el
usuario quiere que se reproduzca siempre selecciona infinito o si quiere un par de veces digita la
cantidad de repeticiones que quiere de la pista.
El botón Aceptar coloca el Sonido y Titulo de la página, genera el código HTML. El botón Cancelar
acerca de cómo trabajar la ventana Sonido y Titulo a la página.
94
Tabla 57. Propiedades de celda.
Barra de titulo: Propiedades de Celda
Menú: Ninguno
La ventana Propiedades de Celda, proporciona la herramienta para que el usuario moldee cada celda a
su antojo, con le fin de enriquecer la apariencia de su página web. La manera de acceder a esta
ventana es dando Clic derecho sobre una celda y escogiendo Propiedades de Celda.
El campo imagen establece la ruta donde se encuentra la imagen que se va a insertar como fondo de
la celda.
El campo Color de Fondo establece el color que tiene la celda en su fondo, el usuario puede insertar
una imagen o seleccionar un color para el fondo de la celda según prefiera.
El área Alineación de Celda permite al usuario determinar cómo se situarán los elementos dentro de la
celda, en sentido Vertical y Horizontal.
El área Colores de Celda permite que el usuario le asigne colores diferentes a los bordes de la celda
(Borde, Borde Claro, Borde Oscuro).
El campo Tamaño Celda se refiere al ancho que puede asignar el usuario a una celda. Este tamaño
puede ser dado en Píxeles o en Porcentaje.
El botón Aceptar realiza los cambios en la celda, genera el código HTML. El botón Cancelar regresa al
usuario a la ventana principal. El botón ayuda despliega la ventana con la información acerca de cómo
Trabajar con las Propiedades de Celda.
Tabla 58. Editor de mapas.
Barra de titulo: Editor de Mapas
Menú: Polígono, Cuadrado, Circulo.
La ventana Editor de Mapas permite al usuario crear áreas sensibles en las imágenes de tal forma que
una imagen contiene enlaces, que estando en el navegador al pasar el puntero del ratón sobre
cualquiera de estas zonas cambia mostrando que en ese sitio existe un hipervínculo. Para acceder a
esta ventana el usuario debe dar clic derecho sobre la imagen y seleccionar la opción Crear Mapa de
Áreas.
Los botones de la barra de herramienta permiten al usuario crear áreas de tres figuras diferentes
Cuadrado, Polígono y Círculo, según el tipo de zona que se necesite será la figura empleada, con
solamente arrastrar y soltar el ratón se puede dibujar la parte de la imagen donde irá el Hipervínculo.
El campo Ubicación de la Imagen, contiene la ruta donde se encuentra la imagen que se está usando
para crear el mapa.
El campo Nombre del Mapa, contiene el nombre que se le ha dado al mapa, para identificar la imagen
como un conjunto de hipervínculos dentro del código HTML.
El botón Aceptar crea el Mapa de Áreas, genera el código HTML. El botón Cancelar regresa al usuario a
la ventana principal. El botón ayuda despliega la ventana con la información acerca de cómo Crear
Mapas de Áreas.
95
Tabla 59. Ventana Principal.
Ventana: Principal
Parámetros de Entrada:
Abrir:
DesactivarBotones
Llenar Fuentes.AgregarNuevo "Arial"
:
:
Fuentes. Agregar "Wingdings 3"
Llenar TamañoFuentes.AgregarNuevo "Normal"
:
:
TamañoFuentes.AgregarNuevo "7 (36 pto)"
NuevoArchivo
Cargar palabras Claves
Fin
Botones / Elementos del menú
Rotulo
Activado
Al hacer Clic
Nuevo
Siempre
Llamar Ventana Nuevo
Abrir
Siempre
Llamar Ventana Abrir
Caso Tipo de Pagina
Caso "Normal":
Fichero = “ ”
If Pagina.Estado = "Nuevo" Then
Desplegar Ventana Guardar
ElseIf Pagina.Estado = "Modificado" Then
Fichero = NombrePaginaNormal
Else
Fichero = NombrePaginaNormal
End If
Estado = "Guardado"
Guardar
If Pagina Activa o Objeto
Seleccionado
then
Activo
Else
Inactivo
End if
Caso "Contenido":
Fichero = ""
If Pagina.EstadoIzquierdo = "Nuevo" Then
Fichero = Nombre
GuardarFichero Fichero,
CodigoMarcoIzquierdo
EstadoMarcoIzquierdo = "Guardado"
ElseIf EstadoMarcoIzquierdo = "Modificado" Then
Fichero = NombreMarcoContenidoIzquierdo
EstadoMarcoIzquierdo = "Guardado"
Else
Fichero = NombreMarcoContenidoIzquierdo
Estado MarcoIzquierdo = "Guardado"
End If
Fichero = ""
If EstadoMarcoDerecho = "Nuevo" Then
Fichero = Titulo
CodigoMarcoContenidoDerecho
EstadoMarcoDerecho = "Guardado"
ElseIf EstadoMarcoDerecho = "Modificado" Then
Fichero = NombreMarcoContenidoDerecho
Else
Fichero = NombreMarcoContenidoDerecho
96
End If
Fichero = ""
If
EstadoPrincipal = "Nuevo" Then
Guardar Posición de Marcos
Fichero = Nombre
GuardarFichero Fichero, CodigoMarcoPrincipal
EstadoPrincipal = "Guardado"
ElseIf EstadoPrincipal = "Modificado" Then
Fichero = NombreMarcoContenidoPrincipal
Else
End If
Caso "Titulo":
Fichero = ""
If EstadoTituloSuperior = "Nuevo" Then
Fichero = Nombre
GuardarFichero Fichero, CodigoMarcoSuperior
EstadoTituloSuperior = "Guardado"
ElseIf EstadoTituloSuperior = "Modificado" Then
Fichero = NombreMarcoTituloSuperior
Else
Fichero = NombreMarcoTituloSuperior
End If
Fichero = ""
If EstadoTituloInferior = "Nuevo" Then
Fichero = Nombre
GuardarFichero Fichero, CodigoMarcoInferior
EstadoTituloInferior = "Guardado"
ElseIf EstadoTituloInferior = "Modificado" Then
Fichero = NombreMarcoTituloInferior
Else
Fichero = NombreMarcoTituloInferior
End If
Fichero = ""
If EstadoTituloPrincipal = "Nuevo" Then
Fichero = Nombre
GuardarFichero Fichero, CodigoHTML
EstadoTituloPrincipal = "Guardado"
ElseIf EstadoTituloPrincipal = "Modificado" Then
Else
Fichero = NombreMarcoTituloPrincipal
End If
Caso "Titulo Contenido":
Fichero = ""
If EstadoTCSuperior = "Nuevo" Then
97
Fichero = Nombre
EstadoTCSuperior = "Guardado"
ElseIf EstadoTCSuperior = "Modificado" Then
Fichero = NombreTCSuperior
Else
Fichero = NombreTCSuperior
End If
Fichero = ""
EstadoTCIzquierdo = "Nuevo" Then
Fichero = Nombre
GuardarFichero Fichero, CodigoMarcoIzquierdo
EstadoTCIzquierdo = "Guardado"
ElseIf
EstadoTCIzquierdo = "Modificado" Then
Fichero = NombreTCIzquierdo
Else
Fichero = NombreTCIzquierdo
End If
If
Fichero = ""
If
EstadoTCDerecho = "Nuevo" Then
Fichero = Nombre
GuardarFichero Fichero, CodigoMarcoDerecho
EstadoTCDerecho = "Guardado"
ElseIf
EstadoTCDerecho = "Modificado" Then
Fichero = NombreTCDerecho
Else
Fichero = NombreTCDerecho
End If
Fichero = ""
If
EstadoTCPrincipal = "Nuevo" Then
Fichero = Nombre
GuardarFichero Fichero, TituloContenido
EstadoTCPrincipal = "Guardado"
ElseIf
EstadoTCPrincipal = "Modificado" Then
Fichero = NombreTCPrincipal
Else
Fichero = NombreTCPrincipal
End If
Fin Caso
Fin
Imprimir
Vista previa
If Presiono Tecla o existe
algun elemento then
Activo
Else
Desactivo
End if
If Pagina Activa o Objeto
Seleccionado
then
Activo
Else
Inactivo
End if
TipoPantalla.CancelError = True
TipoPantalla.ShowPrinter
PaginaFinal = Ventana.FromPage
PaginaInicial = Ventana.ToPage
NumeroCopias = Ventana.Copies
For i = 1 To NumeroCopias
Documento(Movimiento).DiseñoHTML.PrintDocument
Next i
Caso Tipo de Pagina
Caso "Normal":
CodigoHTML = DiseñoHTML
Ruta = App.Path & "\Temp\" & "Temporal.htm"
Fichero = FreeFile
Open Ruta For Output Shared As #Fichero
Print #Fichero, CodigoHTML
98
Close #Fichero
Caso
"Contenido":
CodigoMarcoIzquierdo = HTMLMarcoIzquierdo
CodigoMarcoDerecho = HTMLMarcoDerecho
Ruta1 = App.Path & "\Temp\" & "MarcoTemp.htm"
Ruta2 = App.Path & "\Temp\" & "MarcoIzq.htm"
Ruta3 = App.Path & "\Temp\" & "MarcoDer.htm"
Posición de Marcos
Cuerpo = Codigo HTML de Pagina Con Marcos Contenido
Fichero = FreeFile
Open Ruta1 For Output Shared As #Fichero
Print #Fichero, Cuerpo
Close #Fichero
Fichero1 = FreeFile
Open Ruta2 For Output Shared As #Fichero1
Print #Fichero1, CodigoMarcoIzquierdo
Close #Fichero1
Fichero2 = FreeFile
Print #Fichero2, CodigoMarcoDerecho
Close #Fichero2
Ruta = Ruta1
Case "Titulo":
CodigoMarcoSuperior = HTMLMarcoSuperior
CodigoMarcoInferior = HTMLMarcoInferior
Ruta2 = App.Path & "\Temp\" & "MarcoSup.htm"
Ruta3 = App.Path & "\Temp\" & "Marcoinf.htm"
Posición de Marcos
Cuerpo = Codigo HTML de Pagina Con Marcos Titulo
Fichero = FreeFile
Close #Fichero
Fichero1 = FreeFile
Print #Fichero1, CodigoMarcoSuperior
Close #Fichero1
Fichero2 = FreeFile
Print #Fichero2, CodigoMarcoInferior
Close #Fichero2
Ruta = Ruta1
Case "Titulo Contenido":
CodigoMarcoSuperior = HTMLMarcoSuperior
CodigoMarcoDerecho = HTMLMarcoDerecho
CodigoMarcoIzquierdo = HTMLMarcoIzquierdo
Ruta2 = App.Path & "\Temp\" & "MarcoSup.htm"
Ruta3 = App.Path & "\Temp\" & "MarcoIzq.htm"
Ruta4 = App.Path & "\Temp\" & "MarcoDer.htm"
Posición de Marcos
Cuerpo = Codigo HTML de Pagina Con Marcos Contenido
Fichero = FreeFile
Close #Fichero
Fichero1 = FreeFile
Print #Fichero1, CodigoMarcoSuperior
Close #Fichero1
Fichero2 = FreeFile
Print #Fichero2, CodigoMarcoIzquierdo
Close #Fichero2
Fichero3 = FreeFile
99
Print #Fichero3, CodigoMarcoDerecho
Close #Fichero2
Ruta = Ruta1
Cortar
Copiar
Pegar
If Pagina Activa o objeto
Seleccionado then
Activo
Else
Inactivo
End if
If Pagina Activa o objeto
Seleccionado then
Activo
Else
Inactivo
End if
If Hay algo Cortapapeles y
Pagina Activa then
Activo
Else
Inactivo
End if
Fin Caso
Completo = "C:\Archivos de Programa\Internet
Explorer\IEXPLORE.EXE " & Ruta
Shell Completo, vbNormalFocus
Fin
Donde se encuentre, Ejecutar Comando DECMD_CUT
Donde se encuentre, Ejecutar Comando DECMD_COPY
Donde se encuentre, Ejecutar Comando DECMD_PASTE
If Ejecuta Acción en el
documento then
Activo
Elseif Elimino Todas Las
Acciones Then
Inactivo
End if
Donde se encuentre, Ejecutar Comando DECMD_UNDO
Donde se encuentre, Ejecutar Comando DECMD_REDO
Rehacer
If Ejecuto Deshacer then
Activo
Else
Inactivo
End if
Pagina
Anterior
If Numero Pagina Actual >
1 then
Activo
Else
Inactivo
End if
Pagina
Siguinete
If Pagina Actual < Numero
Total then
Activo
Else
Inactivo
End if
Deshacer
Insertar
Hipervínculo
Insertar
Tabla
Insertar
Imagen
Cambiar
Color
Fuente
Aumentar
Sangría
If Pagina Activa y no hay
Objeto Seleccionado then
Activo
Else
Inactivo
End if
Objeto seleccionado then
Activo
Else
Inactivo
End if
Botón Activo
Else
Botón Inactivo
End if
Botón Activo
Else
Botón Inactivo
End if
Botón Activo
Else
Botón Inactivo
End if
Ocultar ventana actual
Activar Botón Pagina Siguiente
If
Es la Ultima Pagina Then
Desactivar Botón Anterior
End If
Mostrara Ventana Maximizada
Fin
Ocultar ventana actual
Activar Botón Pagina Anterior
If
Pagina Es la Ultima Then
Desactivar Botón Siguiente
End If
Mostrara Ventana Maximizada
Fin
Llamar Ventana Crear Enlace
Llamar Ventana Insertar Tabla
Llamar Ventana Insertar Imagen
Llamar Ventana De Colores del sistema
Donde se encuentre, Ejecutar Comando INDENT
100
Disminuir
Sangría
Insertar
Numeración
Insertar
Viñetas
Botón Activo
Else
Botón Inactivo
End if
Botón Activo
Else
Botón Inactivo
End if
Botón Activo
Else
Botón Inactivo
End if
Párrafo
Botón Activo
Else
Botón Inactivo
End if
Tamaño
Botón Activo
Else
Botón Inactivo
End if
Fuente
Aumentar
Fuente
Disminuir
Fuente
Negrilla
Cursiva
Subrayada
Alinear a la
Izquierda
Centrar
Botón Activo
Else
Botón Inactivo
End if
Botón Activo
Else
Botón Inactivo
End if
Botón Activo
Else
Botón Inactivo
End if
Botón Activo
Else
Botón Inactivo
End if
Botón Activo
Else
Botón Inactivo
End if
objeto seleccionado then
Botón Activo
Else
Botón Inactivo
End if
Botón Activo
Else
Botón Inactivo
End if
Botón Activo
Else
Botón Inactivo
End if
Donde se encuentre, Ejecutar Comando OUTDENT
Donde se encuentre, Ejecutar Comando ORDERLIST
Donde se encuentre, Ejecutar Comando UNORDERLIST
Caso TipoFuente
Caso "Normal":
Ejecutar Comando SETBLOCKFMT, "Normal"
:
:
Caso "Párrafo":
Ejecutar Comando SETBLOCKFMT, "Párrafo"
Fin Caso
Caso TamañoFuentes
Case "Normal":
FuenteTamaño = 0
:
:
Case "7 (36 pto)": FuenteTamaño = 7
Fin Caso
Ejecutar Comando SETFONTSIZE, FuenteTamaño
Donde se encuentre, Ejecutar Comando SETFONTNAME, Fuentes.Text
Recoger Tamaño de Fuente
If TamañoFuente <> 8 Then
SETFONTSIZE, TamañoFuente +1
End If
Recoger Tamaño fuente
If TamañoFuente <> "" Then
SETFONTSIZE, TamañoF -1
End If
Donde se encuentre, Ejecutar Comando BOLD
Donde se encuentre, Ejecutar Comando ITALIC
Donde se encuentre, Ejecutar Comando UNDERLINE
If Alinear Izquierda = Presionado Then
Centrar = No Presionado
Alinear Derecha = No Presionado
Ejecutar Comando DECMD_JUSTIFYLEFT
End If
If Centrar= Presionado Then
Alinear Izquierda = No Presionado
Alinear Derecha = No Presionado
Ejecutar Comando DECMD_JUSTIFYCENTER
End If
101
Alinear a la
Derecha
Botón Activo
Else
Botón Inactivo
End if
If Alinear Derecha = Presionado Then
Alinear Izquierda = No Presionado
Centrar = No Presionado
Ejecutar Comando DECMD_JUSTIFYRIGHT
End If
Caso Tipo de Selección
Case "None", "Text"
If
Estado = Activo Then
CodigoObtenido= Parte mas Externa del fromulario
Else
CodigoObtenido = Lo que este en pantalla
End If
Formulario
Insertar
Botón
Insertar
Cuadro de
Chequeo
Insertar
Botón de
Opción
Insertar
Caja de
Texto
Insertar
lista
desplegable
Insertar
Lista de
Selección
Insertar
/Caja de
Texto
Archivo /
Propiedades
de Pagina
Insertar /
Fondo
Botón Activo
Else
Botón Inactivo
End if
Botón Activo
Else
Botón Inactivo
End if
Botón Activo
Else
Botón Inactivo
End if
Botón Activo
Else
Botón Inactivo
End if
Botón Activo
Else
Botón Inactivo
End if
Botón Activo
Else
Botón Inactivo
End if
Botón Activo
Else
Botón Inactivo
End if
Botón Activo
Else
Botón Inactivo
End if
Botón Activo
Else
Botón Inactivo
End if
Botón Activo
Else
Botón Inactivo
Mirar si en el codigoObtenido es:
Form
Select
Imput
Fin Caso
If codigoObtenido = Form then
NombreFormularioI = "Formulario" & ContadorFormulario
ContadorBotonComando = ContadorFormulario + 1
CodigoFormulario = Codigo de Formulario
Else
Salir Operacion
End if
InsertarCodigo, CodigoFormulario
NombreBoton = "BotonCmd" & ContadorBotonComando
ContadorBotonComando = ContadorBotonComando + 1
CodigoBoton = Código HTML del Botón
InsertarCodigo, CodigoBoton
NombreCheckBox =
ContadorCheckBox
CodigoCheckBox =
InsertarCodigo,
"Chequeo" & ContadorCheckBox
= ContadorCheckBox + 1
Codigo HTML Check
CodigoCheck
NombreOption = "Option" & ContadorOpcion
ContadorOpcion = ContadorOpcion + 1
CodigoOption = Código HTML del Botón de Opción
InsertarCodigo, CodigoOpcion
NombreCuadroTexto = "CuadroTexto" & ContadorCuadroTexto
ContadorCuadroTexto = ContadorCuadroTexto + 1
CodigoCuadroTexto = Codigo HTML Cuadro de Texto
InsertarCodigo, CodigoCuadroTexto
NombreMenuDesplegable = "MenuDesplegable" &
ContadorMenuDesplegable
ContadorMenuDesplegable = ContadorMenuDesplegable + 1
CodigoMenuDesplegable = Codigo HTML Menú despegable
InsertarCodigo, CodigoMenuDesplegable
NombreListaSeleccionable = "ListaSeleccionable" &
ContadorListaSeleccionable
ContadorListaSeleccionable = ContadorListaSeleccionable + 1
CodigoListaSeleccionable = Codigo HTML Lista Seleccionable
InsertarCodigo, CodigoListaSeleccionable
NombreTexArea = "AreaTexto" & ContadorTexArea
ContadorTexArea = ContadorTexArea + 1
CodigoTextArea= Codigo HTML de área de Texto
InsertarCodigo , CodigoTextArea
Llamar Ventana Propiedades de pagina
Llamar Ventana Insertar Fondo
102
End if
Insertar /
Línea
Horizontal
Insertar /
Marquesina
Insertar /
Sonido de
fondo y
Titulo
Insertar /
video
Botón Activo
Else
Botón Inactivo
End if
Botón Activo
Else
Botón Inactivo
End if
Botón Activo
Else
Botón Inactivo
End if
Botón Activo
Else
Botón Inactivo
End if
Llamar Ventana Insertar Linea
Llamar Ventana Insertar Marquesina
Llamar Ventana Sonido de fondo y Titulo de la Pagina
Llamar Ventana Insertar Video
Tabla 60. Marcador
Ventana: Establecer Marcador
Parámetro de entrada:
Abrir:
Botón Eliminar = Inactivo
Caso Tipo de selección
Caso "None", "Text":
VerSiMarca = BuscarPalabraCadena("name=")
VerSiHyper = BuscarPalabraCadena("href=")
VerSiTextoAlt = BuscarPalabraCadena("alt=")
If
VerSiMarca <> "" And VerSiHyper <> "" Then
HayMarcadorHypervinculo = True
Nombre = VerSiMarca
ElseIf
VerSiMarca <> "" And VerSiHyper = "" Then
HaySoloMarcador = True
Nombre = VerSiMarca
ElseIf
VerSiMarca = "" And VerSiHyper <> "" Then
HaySoloHypervinculo = True
Nombre = ""
ElseIf
VerSiMarca = "" And VerSiHyper = "" Then
SoloCrearMarcador = True
Nombre = RescatarCadenaMarcador
End If
End If
Fin Caso
Caso Tipo de Pagina
Caso "Normal":
Rescatar los Marcadores de esta Pagina
Caso "Contenido":
If
ActivoMarcoIzq = True Then
Recatar Los Marcadores de esta Pagina
ElseIf
ActivoMarcoDer = True Then
End If
Caso "Titulo":
If
ActivoMarcoSup = True Then
ElseIf
ActivoMarcoInf = True Then
End If
If
ActivoMarcoSup1 = True Then
103
ElseIf
ActivoMarcoIzq1 = True Then
ElseIf
ActivoMarcoDer1 = True Then
End If
Fin Caso
Fin
Rotulo
Cancelar
Activado
Al hacer Clic
Siempre
Cerrar Ventana
Ayuda
Siempre
Lamar Ventana de ayuda
If Lista de Marcadores.Clic then
Botón Eliminar = Activo
Else
Botón Eliminar = Inactivo
End if
If
Eliminar
Aceptar
Siempre
HayMarcadorHypervinculo = True Then
EliminarMarcador Nombre del Marcador, Donde se
Encuentre
CodigoMarcador = Codigo HTML de Marcador
ElseIf
HaySoloMarcador = True Then
EliminarMarcador Nombre de Marcador,
Documento(Movimiento).Tag
End If
Fin
If
SoloCrearMarcador = True Then
If
Nombre de Marcador <> "" y Nombre de Marcador
esta en la lista de
Marcadores Then
“Cambiar Nombre”
Else
Especificar Nombre de Marcador
End if
ElseIf HayMarcadorHypervinculo = True Then
If Nombre de Marcador <> "" Then
If Nombre de Marcador <> VerSiMarca Then
If Nombre de Marcador esta en Lista de
Marcadores
"Ya Existe un Marcador con Igual Nombre."
End If
CodigoMarcador = Codigo HTML del Marcador
End If
Else
“Debe Especificar un Nombre para el Marcador."
End If
ElseIf HaySoloMarcador = True Then
If Nombre de Marcador <> VerSiMarca Then
"Ya Existe un Marcador con Igual Nombre."
End If
End If
Else
"Debe Especificar un Nombre para el Marcador."
End If
ElseIf HaySoloHypervinculo = True Then
If Nombre de Marcador Esta en Lista de
Marcadores Then
"Ya Existe un Marcador con Igual
Nombre."
End If
End If
Else
"Debe Especificar un Nombre para el
Marcador."
End If
End If
Fin
104
Tabla 61. Fuente.
Ventana: Fuente
Abrir:
If Existe Texto en la Pantalla o no hay Nada then
Llenar Fuentes.AgregarNuevo "Arial"
.
.
.
Fuentes.AddItem "Webdings"
Llenar
TamañoFuentes.AgregarNuevo "Normal"
.
.
.
Llenar EstloFuentes.AgregarNuevo "Normal"
.
.
.
EstiloFuentes.AgregarNuevo "Negrita Cursiva"
Est = Recoger el Nombre de la Fuente
EstiloF = Recoger el Estilo de la Fuente
If Est <> "" Then
ClaseFuente = Est
End If
Caso EstiloF
Caso 1: Text3.Text = "1 (8 pto)"
.
.
.
Caso 7: Text3.Text = "7 (36 pto)"
Fin Caso
ColorT =Recoger Color de la fuente
If Negri = NegrillaActiva Then
Estilo = "Negrita"
End If
If IncT = CursivaActiva Then
Estilo = "Cursiva"
End If
If Negri = NegrillaActiva And IncT = CursivaActiva Then
Estilo = "Negrita Cursiva"
End If
End if
Fin
Rotulo
Activado
Al hacer Clic
Aceptar
Siempre
Donde se encuentre Ejecute AsignarColorFuente
Caso EstiloFunetes
Caso "Cursiva"
ColocarCursiva
Caso "Negrita"
ColocarNegrilla
Caso "Negrita Cursiva"
ColocarNegrilla
ColocarCursiva
Fin Caso
Donde se Encuentre .Ejecute el comado, ClaseFuente
Caso TamañoFuente
Caso "Normal":
FuenteTamaño = 0
Caso "1 (8 pto)": FuenteTamaño = 1
.
.
.
Caso "7 (36 pto)": FuenteTamaño = 7
Fin Caso
Donde se Encuentre Ejecute el comado, FuenteTamaño
Fin
Cancelar
Siempre
Ayuda
Siempre
Cerrar Ventana
Llamar Formulario de Ayuda
105
Tabla 62. Hipervínculos.
Ventana: Configuración de Enlaces
Parámetros de entrada:
Abrir:
Caso Tipo de Pagina
Case "Normal":
Mantener el tamaño de la ventana
Oculatar Marcos
Case "Contenido":
Dimensionar Ventana
Visualizar Marcos Para Pagina Contenido
Case "Titulo":
Dimensionar Ventana
Visualizar Marcos Para Pagina Titulo
Dimensionar Ventana
Visualizar Marcos Para Pagina Contenido
Fin Caso
If
VerSiMarcadores <> "" And VerSiHipervinculos <> "" Then
HayMarcadorHypervinculo = True
Dirección URL = VerSiHpervinculo
ElseIf
VerSiMarcador <> "" And VerSiHpervinculo = "" Then
HaySoloMarcador = True
ElseIf
VerSiMarcador = "" And VerSiHipervinculo <> "" Then
HaySoloHypervinculo = True
Dirección URL = VerSiHyper
ElseIf
VerSiMarcador = "" And VerSiHipervinculo = "" Then
SoloCrearHypervinculo = True
End If
Caso Tipo de documento
Case "Normal":
Crear nodo para la Pagina
Crear subnodos para sus Marcadores
Case "Contenido":
Case "Titulo":
Fin Caso
Fin
Rotulo
Activado
Al hacer Clic
Aceptar
Siempre
Caso TipoHypervinculo
Caso "Textual":
If SoloCrearHypervinculo = True Then
If ColocarTarget = True Then
If MarcoDestino <> "" Then
CadenaTarget = Codigo HTML para Marco destino
Else
CadenaTarget = ""
End If
End If
If TextoSeleccionado <> "" Then
CodigoHypervinculo = Codigo HTML para Hipervínculo
Else
End If
rg.pasteHTML (CodigoHypervinculo)
ElseIf
HayMarcadorHypervinculo = True Then
If Direccion URL <> VerSiHyper Then
VerdaderoHypervinculo = Direccion URL
Else
VerdaderoHypervinculo = VerSiHyper
End If
Else
CadenaTarget = ""
End If
End If
106
ElseIf HaySoloMarcador = True Then
Else
CadenaTarget = ""
End If
End If
CodigoHypervinculo = Codigo HTML para Hipervinculo
ElseIf HaySoloHypervinculo = True Then
If Direccion URL <> VerSiHyper Then
VerdaderoHypervinculo = Direccion URL
Else
VerdaderoHypervinculo = VerSiHyper
End If
If
ColocarTarget = True Then
Else
CadenaTarget = ""
End If
End If
CodigoHypervinculo = Codigo HTML para hipervinculo
End If
Caso "Imagen":
If
RescatarMapaUsadoImagen <> "" Then
ColocarMapaUsadoImagen = Codigo HTML Enlace de Imagen
Else
ColocarMapaUsadoImagen = ""
End If
Else
CadenaTarget = ""
End If
End If
CodigoHypervinculo = Codigo HTML para Mapa de Imagen
Fin Caso
Fin
Cancelar
Siempre
Cerrar Ventana
Ayuda
Siempre
Llamar la Ventana Ayuda
Enlace a una
Pagina
En a un
archivo
Enlace a
Correo
Siempre
Desplegar la Ventana Abrir Pagina
Siempre
Desplegar la Ventana Abrir Archivo
Siempre
Desplegar la Ventana Enlace a Correo electrónico
Tabla 63. Fondo
Ventana: Insertar Fondo
Abrir:
Rotulo
Aceptar
Activado
Siempre
Cancelar
Siempre
Ayuda
Siempre
Extenciones.AgregarNuevo "Gif (*.gif)"
:
:
Extenciones.AgregarNuevo "Todos los Archivos (*.*)"
Al hacer Clic
If Archivo = "" Then
"Debe escoger un fondo"
End If
CodigoFondo = Codigo HTML Fondo
errar Ventana
Llamar a la Ventana Ayuda
107
Tabla 64. Imagen.
Ventana: Insertar Imagen
Abrir:
TipoImagen.AgregarNuevo "JPEG (*.jpg)"
:
TipoImagen.AgregarNuevo "Todos los Archivos (*.*)"
AlineacionTexto.AgregarNuevo "Predefinido"
:
AlineacionTexto.AgregarNuevo "Derecha"
Rotulo
Activado Al hacer Clic
Insertar
Siempre Caso
Cancelar
Alineación de Texto
Caso "Predefinido":
Alineación = ""
Caso "Izquierda":
Alineación = Código
Caso "Derecha":
Caso "Superior":
Caso "Medio":
Caso "Inferior":
Fin Caso
CodigoImagen = Codigo HTML de la
InsertarCodigo, CodigoImagen
Siempre Cerrar Ventana
Ayuda
Siempre Llamar a la Ventana Ayuda
HTML alineación Izquierda
HTML alineación Derecha
HTML alineación Superior
HTML alineación Medio
HTML alineación Inferior
Imagen con Alineación
Tabla 65. Insertar Línea.
Ventana: Insertar Línea
Abrir:
If
AltoLinea <> "" Then
AltoLinea = AltoLineaHorizontal
Else
AltoLinea = "2"
End If
If
AnchoLinea <> "" Then
If
Esta en Procentaje = "%" Then
Porcentaje = Verdadero
Píxeles = Falso
Else
Píxeles = Verdadero
Porcentaje = Falso
End If
Else
AnchoLinea = "100"
Porcentaje = Verdadero
End If
If
ColorLinea <> "" Then
ColorLinea = ColorLineaSeleccionado
End If
Caso AlineaciónLinea
Caso "left": AlineacionIzquierda = Activo
Caso "right": AlineacionDerecha = Activo
Caso Else:
AlineacionCentro = Activo
Fin Caso
108
If
Sombra = Falso Then
NoSombra = Activo
Else
NoSombra= Inactivo
End If
Fin
Rotulo
Aceptar
Siempre
If AnchoLinea <> "" And AnchoLinea > 0 And AnchoLinea < 9999 Then
If Pixeles = Verdadero Then
LineaHorizontal.Ancho = AnchoLinea
ElseIf porcentaje = Verdadero Then
LineaHorizontal.Ancho = AnchoLinea & "%"
End If
Else
"Introdusca un valor entero positivo mayor que 0 y menor que 999"
End If
If
AltoLinea <> "" And AltoLinea > 0 And AltoLinea < 9999 Then
LineaHorizontal.Alto = AltoLinea
Else
"Introdusca un valor entero positivo mayor que 0 y menor que 999"
End If
If
AlineacionIzquierda = True Then
AlineacionLinea = Codigo HTML de Alineación Izquierda
ElseIf AlineacionDerecha = True Then
AlineacionLinea = Codigo HTML de Alineación Derecha
ElseIf AlineacionCentro = True Then
AlineacionLinea = Codigo HTML de Alineación Centro
End If
If
NoSombra = Activo Then
CodigoNoSombra = Codigo HTML Linea sin Sombra
ElseIf NoSombra = Inactivo Then
CodigoNoSombra = Codigo HTML Linea con Sombra
End If
CodLinea = Codigo HTML de la Linea con sus carateristicas
InsertarCodigo, CodLinea
Cancelar Siempre Cerrar Ventana
Ayuda
Ventana: Insertar Tabla
Abrir:
Numero de Filas = 2
Numero de Columnas = 2
Alineación.AgregarNuevo "Izquierda"
Alineación.AgregarNuevo "Derecha"
Alineación.AgregarNuevo "Centro"
Porcentaje = True
Rotulo
Insertar
Siempre
If NumeroFilas < 1 Or NumeroFilas > 100 Then
"Numero de Filas Incorrecto Valores Comprendidos entre 1 y 100"
End If
If NumeroColumnas < 1 Or NumeroColumnas > 100 Then
"Numero de Columnas Incorrecto Valores Comprendidos entre 1 y 100"
End If
If Porcentaje = True Then
109
If Ancho < 0 Or Ancho > 100 Then
"Ancho de la Tabla Supera el 100%"
End If
End If
If IamañoBorde < 0 Or IamañoBorde > 100 Then
"Numero de Borde Incorrecto Valores Comprendidos entre 0 y 100"
End If
If RellenoCelda < 0 Or RellenoCelda > 100 Then
"Tamaño de Relleno Incorrecto Valores Comprendidos entre 0 y 100"
End If
If EspacioCelda < 0 Or EspacioCelda > 100 Then
"Tamaño de Espacio Incorrecto" Valores Comprendidos entre 0 y 100"
End If
Caso Alineación de Tabla
Caso "Predeterminada": Paso1 = ""
Caso "Izquierda":
Paso1 = Código HTML Alineación Izquierda
Caso "Derecha":
Paso1 = Código HTML Alineación Derecha
Caso "Centro":
Paso1 = Código HTML Alineación Centro
Fin Caso
If Píxeles = True Then
VerTipoAncho = ""
ElseIf Porcentaje = True Then
VerTipoAncho = "%"
End If
CodigoTabla = Código HTML para la Tabla
InsertarCodigo, CodigoTabla
Cancelar
Ayuda
Tabla 67. Insertar Video.
Ventana: Insertar Video
Abrir:
If
Rotulo
Insertar
RepetirVideo <> "" Then
Caso RepetirVideo
Caso "infinite": Siempre = Activo
Numero de Veces.Activo = Falso
Caso Else:
Numero de Veces = RepetirVideo
Numero de Veces.Activo = Verdadero
Fin Caso
End If
Caso Comienzo
Caso "fileopen":
AbrirPagina = True
Caso "mouseover":
MoverRaton = True
Fin Caso
Siempre If AbrirPagina = True Then
ComenzarVid = "fileopen"
ElseIf PasarRaton = True Then
ComenzarVid = "mouseover"
End If
Cancelar
CodigoVideo = Codigo HTML para Insertar Video
InsertarCodigo, CodigoVideo
Ayuda
110
Tabla 68. Insertar marquesina.
Ventana: Insertar Marquesina
Abrir:
Caso Direccion
Caso "left":
DireccionIzquierda = True
Caso "right": DirecciónDerecha = True
Caso Else:
direccionPredefinida = True
Fin Caso
Caso Comportamiento
Caso "slide":
ComportamientoDeslizar = True
Caso "alternate": ComportamientoAlternar = True
Caso Else:
ComportamientoDesplazar = True
Fin caso
TextoMarquesina = Leer texto Marquesina
Caso Repetir
Caso "-1":
Infinito = Activo
NumeroVeces.Activo = Falso
Caso Else:
NumeroVeces.Activo = Verdadero
NumeroVeces = Repetir
Fin Caso
If AltoMar = "" Then
EspecificarAlto = Inactivo
AltoMar.Activo = Falso
Porcentaje = False
Píxeles = False
Else
EspecificarAlto = Activo
End If
If AnchoMar = "" Then
EspecificarAncho = Inactivo
AnchoMar.Activo = Falso
Porcentaje = False
Píxeles = False
Else
EspecificarAncho = Activo
End If
RetardoMar = Retardo
CantidadMov = CantidadVelMov
If ColorMar <> "" Then
ColorMar, ClorSeleccionado
End If
Rotulo
Insertar
If DireccionIzquierda = True Then
Siempre
Dirección = "left"
End If
If DireccionDerecha = True Then
Direccion = "right"
End If
If ComportamientoDeslizar = True Then
Comportamiento = "slide"
End If
If ComportamientoAlternar = True Then
Comportamiento = "alternate"
End If
If RetardoMar <> "" And RetardoMar > 0 And RetardoMar > 16960 Then
Retardo = RetardoMar
Else
Retardo = 1
End If
If TextoMar = "" Then
"Debe escribir un texto para la Marquesina"
End If
If DireccionIzquierda = True Then
Direccion = "left"
ElseIf DireccionDerecha = True Then
Direccion = "right"
End If
111
If
RetardoMar <> "" Then
Retardo = RetardoMar
Else
Retardo = "1000"
End If
If Infinito = Inactivo And NumeroVeces <> "" Then
Repetir = NumeroVeces
End If
If Infinito = Activo Then
Repetir = "-1"
End If
If EspecificarAlto = Activo Then
If AltoMar <> "" Then
If Píxeles = True Then
AltoMar = Código HTML para Alto Marquesina
ElseIf porcentaje = Verdadero Then
AltoMar = Código HTML para Alto Marquesina
End If
End If
End If
If EspecificarAncho = Activo Then
If AnchoMar <> "" Then
If Píxeles = Activo Then
AnchoMar = Código HTML para Ancho Marquesina
ElseIf porcentaje = Activo Then
Ancho = Código HTML para Ancho Marquesina
End If
Else
AnchoMar = "75%"
End If
End If
If ComportamientoDesplazar = Verdadero Then
Comportamiento = ""
ElseIf ComportamientoDeslizar = Verdadero Then
Comportamiento = "slide"
ElseIf ComportamientoAlternar = Verdadero Then
Comportamiento = "alternate"
End If
If CantidadMov <> "" Then
CantidadVelMov = CantidadMov
Else
CantidadVelMov = ""
End If
CodigoMarq = Codigo HTML para la Marquesina
InsertarCodigo , CodigoMarq
Cancelar
Ayuda
Tabla 69. Pagina nueva.
Ventana: Pagina Nueva
Abrir:
ListaFramesAgregarNuevo "Contenido"
ListaFrames.AgregarNuevo "Titulo"
ListaFrames.AgregarNuevo "Titulo Contenido"
Rotulo
Insertar
Siempre
If
PaginaNormal = Verdadero Then
Documento(Contador).Etiqueta = "SinTitulo" & Contador + 1
Documento(Contador).Tipo = "Normal"
Contador = Contador + 1
ElseIf PaginaMarcos = Verdadero Then
Caso ListaMarcos.Componetes
Caso 0:
Documento(Contador) = Marco Vertical
Caso 1:
Documento(Contador) = Marco horizontal
Caso 2:
Documento(Contador) = Titulo Contenido
Fin Caso
Documento(Contador)Etiqueta = "SinTitulo" & Contador + 1
Contador = Contador + 1
112
End If
Movimiento = Contador - 1
Cancelar
Ayuda
Tabla 70. Propiedades de pagina.
Ventana: Propiedades de la Pagina
Abrir:
Caso EstiloFondo
Caso " " :
EfectoFondo = "Ninguno"
Caso "fixed" :
EfectoFondo = "Deslizante"
End Select
If
ColorFondo <> "" Then
ColorFondoPagina, Color
Else
ColorFondoPagina, vbWhite
End If
If
ColorTexto <> "" Then
ColorTextoPag, Color
Else
ColorTextoPag, VbBlack
End If
If
Link <> "" Then
Hipervinculo, Color
Else
Hipervinculo, vbBlue
End If
If
Alink <> "" Then
HipervinculoActivo, Color
Else
HipervinculoActivo, vbRed
End If
If
Vlink <> "" Then
HipervinculoVisitado, Color
Else
HipervinculoVisitado, vbGreen
End If
If
TamañoSuperior <> "" Then
TamañoSuperior = MargenSuperior
Else
TamañoSuperior = ""
End If
If
TamañoIzquierdo <> "" Then
TamañoIzquierdo = MargenIzquierdo
Else
TamañoIzquierdo = ""
End If
Rotulo
Insertar
Siempre
PropiedadesPagina.Alink = HipervinculoActivo
PropiedadesPagina.bgColor = ColorFondo
PropiedadesPagina.Text = ColorTexto
PropiedadesPagina.Link = Hipervinculo
PropiedadesPagina.topMargin = MargenSuperior
PropiedadesPagina.leftMargin = MargenIzquierdo
PropiedadesPagina.Vlink = HipervinculoVisitado
If MargenSuperior <> 0 Then
PropiedadesPagina.MargenSuperior = MargenSuperior
End If
If MargenIzquierdo <> 0 Then
PropiedadesPagina.MargenIzquierdo = MargenIzquierdo
113
End If
Caso EstiloFondo
Caso "Ninguno":
Caso "Deslizante":
Caso Else:
Fin Caso
PropiedadesPagina.PropiedadesFondo = ""
PropiedadesPagina.PropiedadesFondo = "fixed"
PropiedadesPagina.PropiedadesFondo = ""
Cancelar
Ayuda
Tabla 71. Sonido de Fondo y titulo.
Ventana: Sonido de fondo y titulo.
Abrir:
Caso Tipo de Pagina
Caso "Normal":
Sonido = BuscarPalabraCad("src")
BucleSonido = BuscarPalabraCad("loop")
If BucleSonido <> "" Then
Caso BucleSonido
Caso "-1":
Bucle = ""
Caso Else:
Bucle = BucleSonido
Fin Caso
End If
Ttulo = RecogerTitulo(CodigoHTML)
Caso "Contenido":
If
If
BucleSonido <> "" Then
Caso BucleSonido
Caso "-1":
Bucle= ""
Caso Else:
Bucle= BucleSonido
Fin Caso
End If
Titulo = RecogerTitulo(CodigoMarcoIzquiredo)
ElseIf
Caso BucleSonido
Caso "-1":
Bucle= ""
Caso Else:
Bucle= BucleSonido
Fin Caso
End If
Titulo = RecogerTitulo(CodigoMarcoDerecho)
End If
Caso "Titulo":
If ActivoMarcoSuperior = True Then
If
Caso BucleSonido
Caso "-1":
Bucle= ""
Caso Else:
Bucle= BucleSonido
End Select
End If
Titulo = RecogerTitulo(.CodigoMarcoSuperior)
ElseIf ActivoMarcoInf = True Then
Caso BucleSonido
114
Caso "-1":
Bucle= ""
Caso Else:
Bucle= BucleSonido
Fin Caso
End If
Titulo = RecogerTitulo(CodigoMarcoInferior)
End If
If
If
Caso "-1":
Bucle= ""
Caso Else:
Bucle= BucleSonido
Fin Caso
End If
Titulo = RecogerTitulo(CodigoMarcoSuperior)
ElseIf
Caso
BucleSonido
Caso "-1":
Bucle= ""
Caso Else:
Bucle= BucleSonido
End Select
End If
Titulo = RecogerTitulo(CodigoMarcoIzquierdo)
ElseIf
If
Caso BucleSonido
Caso "-1":
Bucle= ""
Caso Else:
Bucle= BucleSonido
End Select
End If
Titulo = RecogerTitulo(CodigoMarcoDerecho)
End If
Fin Caso
Rotulo
Activado
Insertar
Siempre
Al hacer Clic
Caso Documento(Movimiento).Tag
Caso “Normal”:
If Titulo<> “” Then
CambiarTituloPagina, Titulo
End If
CambiarSonidoFondo, Sonido
Caso “Contenido”:
If VerActMarcoIzquierdo = True Then
CambiarTituloPagina , Titulo
End If
ElseIf
VerActMarcoDerecho = True Then
End If
End If
Caso “Titulo”:
If VerActMarcoSuperior = True Then
End If
ElseIf VerActMarcoInferior = True Then
End If
115
Cancelar
Siempre
End If
Caso “Titulo Contenido”:
If VerActMarcoTitular = True Then
End If
ElseIf VerActMarcoContenido = True Then
End If
ElseIf VerActMarcoPrincipal = True Then
End If
End If
Fin Caso
Cerrar Ventana
Ayuda
Siempre
Tabla 72. Propiedades de celda.
Ventana: Propiedades de Celda
Abrir:
AlineacionVertical.AgregarNuevo "Predeterminada"
:
AlineacionVertical.AgregarNuevo "Inferior"
AlineacionHorizontal.AgregarNuevo "Predeterminada"
:
AlineacionHorizontal.AgregarNuevo "Centro"
If AnchoCelda <> "" Then
If AnchoCelda contiene % Then
Ancho = AnchoCelda
Else
Ancho= AnchoCelda
End If
Else
Ancho Predefinido
End If
Caso AlineacionVerticalCelda
Caso "":
AlineacionVertical = "Predefinido"
Caso "top":
AlineacionVertical = "Superior"
Caso "center":
AlineacionVertical = "Medio"
Caso "baseline":
AlineacionVertical = "Linea Base"
Caso "bottom":
AlineacionVertical = "Inferior"
Fin Caso
Caso AlineacionHorizontalCelda
Caso "":
AlineacionHorizontal = "Predefinido"
Caso "left":
AlineacionHorizontal = "Izquierda"
Caso "right":
AlineacionHorizontal = "Derecha"
Caso "center":
AlineacionHorizontal = "Centro"
Fin Caso
If
ImagenFondoCelda <> "" Then
Imagen = ImagenFondoCelda
Else
Imagen = ""
End If
If ColorBordeClaroCel <> "" Then
ColorBordeClaroCel, Color
116
Cancelar
Else
ColorBordeClaroCel, vbBlack
End If
If ColorFondoCelda <> "" Then
ColorFondoCelda, Color
Else
ColorFondoCelda, vbWhite
End If
If ColorBordeOscuroCel <> "" Then
ColorBordeOscuroCel, Color
Else
ColorBordeOscuroCel, vbBlack
End If
If ColorBordeCelda <> "" Then
ColorBordeCelda, Color
Else
ColorBordeCelda, vbBlack
End If
Siempre
Caso AlineacionHorizontal
Caso "Predefinido": AlineacionH = "left"
Caso "Izquierda":
AlineacionH = "left"
Caso "Derecha":
AlineacionH = "right"
Caso "Centro":
AlineacionH = "center"
Fin Caso
Caso AlineacionVertical
Caso "Predefinido": AlineacionV = "top"
Caso "Superior":
AlineacionV = "top"
Caso "Medio":
AlineacionV = "center"
Caso "Linea Base": AlineacionV = "baseline"
Caso "Inferior":
AlineacionV = "bottom"
Fin Caso
PropiedadesCelda.Align = AlineacionH
PropiedadesCelda.vAlign = AlineacionV
If RutaImagen<> "" Then
PropiedadesCelda.background = RutaImagen
End If
PropiedadesCelda.bgColor = ColorFondoCelda
PropiedadesCelda.BorderColor = ColorBordeCelda
PropiedadesCelda.borderColorDark = ColorBordeOscuroCel
PropiedadesCelda.borderColorLight = ColorBordeClaroCel
If EspecificarAncho = Activo Then
If Pixeles = Activo Then
PropiedadesCelda.Width = Ancho
ElseIf Porcentaje = Activo Then
PropiedadesCelda.Width = Ancho & "%"
End If
End If
Ayuda
Rotulo
Insertar
117
Ventana: Editor de Mapas
Abrir:
Caso Tipo Pagina
Caso "Contenido":
If
ActivoIzquierdo = True
End If
If
ActivoDerecho = True
End If
Caso "Titulo":
If
ActivoMarcoSup = True Then
ActivoSuperior = True
End If
If
ActivoMarcoInf = True Then
ActivoInferior = True
End If
If
ActivoSuperior = True
End If
If
ActivoIzquierdo = True
End If
If
ActivoDerecho = True
End If
Fin Caso
If
RutaImagen = "file://" Then
Imagen = RutaImagen
EditorImagen = Imagen
Else
Imagen = RutaImagen
EditorImagen = RutaImagen
End If
Imagen = CadenaMapaUsado
If
MapaUsado <> "" Then
Mapa = MapaUsado
End If
CargarFiguras
EstablecerScroll
EditorImagen = CargarImagen()
Rotulo
Activado
Insertar
Siempre
Al hacer Clic
If NombreMapa= "" Then
CuerpoImagen = Codigo HTML para la imagen
InsertarCodigo, CuerpoImagen
End If
CuerpoMapa = Codigo HTML para el Mapa
Caso Tipo Pagina
Case "Normal":
InsertarMapaAdjuntoImagen, CuerpoMapa
Caso "Contenido":
If
ActivoIzquierdo = True Then
ElseIf ActivoDerecho = True Then
InsertarMapaAdjuntoImagen,CuerpoMapa
End If
Caso "Titulo":
If
ActivoSuperior = True Then
InsertarMapaAdjuntoImagen,CuerpoMapa
ElseIf ActivoInferior = True Then
118
Cancelar
Siempre
End If
If
ActivoSuperior = True Then
If
CadenaMapaUsado <> "" Then
NomMapa = ""
NomMapa = BuscarPalabraCadena("name=")
ElseIf ActivoIzquierdo = True Then
If
CadenaMapaUsado <> "" Then
NomMapa = ""
End If
End If
ElseIf ActivoDerecho = True Then
If CadenaMapaUsado <> "" Then
NomMapa = ""
End If
End If
Fin Caso
Cerrar Ventana
Ayuda
Siempre
Polígono
Siempre
Llamar Figura 1
Cuadrado
Siempre
Llamar figura 2
Circulo
Siempre
Llamar Figura 3
119
6. DISEÑO DE PROTOTIPO
6.1 DEFINICIÓN DE INTERFACES GRAFICAS
Lewis y Rieman* definen las interfaces gráficas hombre máquina como: “Las interfaces
básicas de usuario son aquellas que incluyen cosas como menús, ventanas, teclado, ratón,
los beeps y algunos otros sonidos que la computadora hace, en general, todos aquellos
canales por los cuales se permite la comunicación entre el hombre y la computadora”.
Es la parte de cualquier programa o aplicación la cual está enfocada básicamente a la
interacción entre el hombre y la computadora.
La aplicación es realizada en ambiente gráfico, no gráfico o la combinación de ambas.
Está basado principalmente en las necesidades que el usuario tenga, es decir lo que él debe
realizar en la aplicación.
* Lewis, C y Rieman, J. Task-centered user interface desing. En : www.utpc.ac.pa/~amartine/soft
120
WYSIWYG
Acrónimo de What You See Is What You Get (lo que ves es el resultado). Este tipo de
interfaz permite representación gráfica con la cual los usuarios interactúan en la pantalla es
esencialmente la misma imagen creada por la aplicación.
6.2 CRITERIOS PARA UN BUEN DISEÑO GUI
6.2.1 Control de Usuario. Debido a que el ambiente de ventanas permite que se haga
cualquier cosa, el programador debe restringir la libre navegación del usuario por la
aplicación en algún momento dado. El usuario no debe tener tanto control que pueda causar
un daño en el programa.
Una buena aplicación GUI debe tener facilidad de uso para un “ratonero” o para un buen
“mecanógrafo” con la habilidad de un pianista de concierto. Por esta razón siempre se debe
incluir orden de tabulación y teclas aceleradoras, para que cualquier acción que pueda ser
realizada por el ratón pueda llevarse a cabo con el teclado.
Se debe especificar al usuario cuando tiene el control y cuando no, ya sea habilitando o
deshabilitando botones, cambiando el puntero del ratón.
121
6.2.2 Sensibilidad. El sistema debe proporcionar retroalimentación clara e inmediata para
cada acción del usuario como puede ser el cambio del puntero del ratón, por un reloj de
arena para comunicarle que debe esperar mientras se realiza la acción o activar un botón
comando indicando aprobación por parte del programa por los datos introducidos; también
ayuda el uso de cuadros de mensaje para interrumpir al usuario e informarle que se ha
detectado un error.
6.2.3 Dirección. Una disposición típica para una ventana objeto-acción es aquella donde el
usuario puede recuperar una lista de objetos y aplicar acciones desde una barra de botones o
un menú para cualquier elemento que se haya seleccionado.
6.2.4 Consistencia. La consistencia de una aplicación se basa en seguir una uniformidad
en las entradas y salidas del sistema. El propósito básico de la consistencia es permitir al
usuario generalizar el conocimiento acerca de uno o varios aspectos del sistema (por
ejemplo la forma de cerrar una ventana siempre será la misma). La consistencia también
permite evitar la frustración producida por el sistema cuando no se comporta de una manera
entendible y lógica.
Los usuarios no deben sentirse incómodos al utilizar diferentes palabras, situaciones o
acciones que significan una misma cosa.
122
6.2.5 Claridad. Las ventanas no deben contener información irrelevante o no necesaria.
Cada unidad extra de información compite con una unidad de información relevante y
puede reducir su grado de importancia dentro del formulario. Toda información debe
aparecer en un orden lógico y natural.
Una ventana debe contener palabras, frases y conceptos familiares al usuario, más que
términos asociados al sistema cuando más general sea el lenguaje utilizado mejor será la
comprensión del usuario. Un usuario no debe tener que aprenderse la información de una
parte del diálogo. Las instrucciones del sistema deben ser visibles o fácilmente recuperables
siempre que sea necesario.
6.2.6 Estética. Se puede decir que se tiene claridad visual si el significado de una imagen
es realmente clara para la persona. Un punto importante para llegar a tener claridad visual
es organizar la información de una manera lógica. Existen algunas reglas para organizar la
información visualmente, estas reglas describen como una persona organiza los estímulos
visuales individualmente en una forma global.
123
Las reglas de organización visual están basadas en similitud, proximidad, encerrar
(encasillar).
La regla de la similitud dice que se puede organizar información visual en cuanto a la
similitud de los objetos visuales, permitiendo agruparlos.
la regla de la proximidad dice que la información puede ser organizada en cuanto a la
cercanía de los objetos.
La regla de encerrar es otra forma de organizar visualmente la información, ésta dice que
las personas dirigen su atención hacia las áreas encerradas, aunque no lo estén totalmente.
El objetivo de usar estos principios es alcanzar la claridad visual reforzando las relaciones
lógicas. Otro objetivo es poner la información de tal manera que minimice los movimientos
del ojo para que la persona adquiera las diferentes unidades de información necesarias para
la tarea y minimizar los movimientos de la mano requeridos en la navegación del cursor en
la pantalla para cubrir las diferentes partes que deben ser acezadas en la tarea.
La composición y disposición de una ventana debe ser visualmente agradable. Deberá
atraer la vista hacia la información que es más importante. Estudios realizados muestran
que la mayoría de la gente ve primero la parte izquierda superior del centro de la pantalla y
rápidamente hace un barrido en una dirección en sentido de las manecillas del reloj.
124
6.2.7 Indulgencia. El usuario debe sentirse libre para husmear por la aplicación y dar
vistazos rápidos en las diversas ventanas y características.
Permitir que todos entren en cualquier ventana, pero simplemente desactivando los botones
y conceptos de menú para impedirles que realicen acciones en ventanas en donde no tienen
autorización.
Mantener el mismo estilo y ubicación de los elementos clásicos de las aplicaciones más
divulgadas. El usuario puede deducir en qué parte del menú se encuentra la función que
necesita debido a la similitud de empleo de la interfaz con los paquetes comerciales.
6.2.8 Conciencia de las Fortalezas y Limitaciones Humanas. Cada comando o acción
posible debe estar disponible ante el usuario por medio de un botón, elemento de menú o
icono. La ayuda puede servir para colaborar con el usuario a navegar por el sistema sin
tener que memorizar códigos de acción.
6.3 COHESIÓN DE VENTANAS
La cohesión de ventanas puede ser evaluada por la cantidad y tipo de eventos de negocios
que son reconocidos y manejados dentro de una ventana o juego de ventanas en una
aplicación.
6.3.1 Cohesión Funcional. Se utiliza para crear una ventana por cada evento en particular
de la aplicación.
125
La ventaja de las ventanas funcionalmente cohesivas es que se tienen ventanas eficientes y
especializadas que son menos complejas y, por lo tanto, más sencillas de usar. El código
interno existe para ejecutar una sola idea, lo que hace que sea más viable de comprender y
más fácil de mantener.
La desventaja de la cohesión funcional es que frecuentemente incrementa la cantidad de
ventanas de la interfaz. Esto requiere que el usuario navegue entre ventanas para realizar el
conjunto completo de tareas.
6.3.2 Cohesión Secuencial. Una ventana secuencialmente cohesiva es aquella en donde
los eventos están agrupados debido a que suceden en secuencia. El primer evento sucede
como predecesor del siguiente, y este del siguiente, y así sucesivamente.
La recompensa de la cohesión secuencial es que mapea muy de cerca con el flujo de trabajo
manual. La aplicación conserva el tecleado de navegación poniendo todos los eventos
relacionados en una sola ventana. La cohesión secuencial es adecuada para las ventanas que
manejan tareas altamente repetitivas en donde la velocidad de captura y la economía de
teclado son las principales directrices de calidad.
6.3.3 Cohesión Comunicativa. Una ventana comunicativamente cohesiva es aquella en la
que los eventos han sido agregados por que afectan al mismo objeto. Se podría tener una
ventana funcionalmente cohesiva hasta una secuencialmente cohesiva en donde todos los
126
eventos afectan al mismo objeto. La diferencia con la cohesión comunicativa es que el
compartir de datos es la razón principal para agrupar los eventos.
6.3.4 Cohesión Procedural. Una ventana proceduralmente cohesiva organiza las tareas de
acuerdo a la descripción de trabajo de un usuario en particular. Los eventos son agregados
para dar al usuario todo lo que necesita en una ventana.
El intento de “tener todo en un solo lugar” llevando una sola ventana puede conducir a una
cohesión sorprendentemente extraña de temas no relacionados. Esto da como resultado
ventanas que son complejas, atiborradas, y lentas en responder.
6.3.5 Cohesión Temporal. La cohesión sucede cuando los eventos están agrupados en una
ventana simplemente por que suceden al mismo tiempo.
La cohesión temporal es rara. Por lo general aparece en sistemas de negocios sólo para
iniciar actividades de contabilidad de cierre de mes, y están relacionadas sólo por que se
necesitan que sucedan en un momento específico.
6.3.6 Cohesión Lógica. La cohesión lógica sucede cuando los eventos están agrupados
para compartir el mismo código.
La cohesión lógica puede crear comportamiento heterodoxo en la interfaz y molestos
problemas de mantenimiento. El programador de mantenimiento deberá evaluar
constantemente el efecto de cualquier cambio solicitado contra cada uno de los eventos que
127
se manejan por cada ventana para asegurar que no cree resultados indeseables debido al
código compartido.
6.3.7 Cohesión Coincidental. Cualquier relación que aquí se encuentre entre eventos en
una ventana coincidentalmente cohesiva existe solamente en la mente del programador que
la creo.
128
7. IMPLEMENTACION DEL SISTEMA
7.1 HERRAMIENTA DE PROGRAMACION
7.1.1 Selección del Software. Para la construcción de la interfaz gráfica de usuario que
contiene el prototipo de Editor de Páginas Web, es necesario un sistema de desarrollo
diseñado especialmente para crear aplicaciones gráficas en ambiente Windows de forma
rápida y sencilla.
El manejo de estas interfaces se centra en un sistema de ventanas, menús e iconos, los
cuales representan el medio de navegación dentro del sistema. Estos elementos son
utilizados como punto de contacto con el usuario, el cual los utiliza para manejar la
aplicación.
La herramienta de programación empleada para el diseño de la aplicación es MICROSOFT
VISUAL BASIC 6.0, que nos ofrece fundamentalmente dos características, una que
permite realizar los diseños gráficos y un lenguaje de alto nivel.
129
Visual Basic está en dos tipos de objetos, ventanas y controles, que permiten diseñar sin
programar una interfaz gráfica (mecanismos de comunicación entre el usuario y la
aplicación). Para realizar un aplicación, se crean ventanas, llamadas formularios, y sobre
ellas se dibujan otros objetos llamados controles tales como cajas de texto, botones de
comando, listas despegables, etc.
Un programa como Visual Basic, proporciona una caja inmensa de herramientas y de
recursos puestos a nuestra disposición para facilitar la programación de aplicaciones para
generar y manipular código HTML.
Para construir una interfaz gráfica de usuario (incluye cosas como menús, ventanas, teclado
y ratón) para un Editor de Páginas Web se necesita, un sistema de desarrollo diseñado
especialmente para crear aplicaciones graficas que permita la comunicación entre el
hombre y la computadora de una forma rápida, sencilla que es satisfecha con la utilización
de un lenguaje como Visual Basic.
VISUAL BASIC
Es una herramienta de programación visual que trabaja con dos tipos de objetos, ventanas y
controles, que permitan diseñar sin programar, una interfaz grafica (mecanismo de
comunicación entre el usuario y la aplicación) para aplicación. Esta aplicación requiere
ventanas y que sobre ellas se dibujen controles (etiquetas, botones, cajas de texto, etc) y a
continuación se escribe el código fuente relacionado con cada objeto. Esto es, cada objeto
130
esta ligado a un código que permanece inactivo hasta que se de el suceso que lo activa (por
ejemplo un clic del ratón).
DHTML Edit Control.
El
Componente de Edición DHTML, proporciona una
herramienta tanto de desarrollo web como componente de aplicación en la generación de
código HTML. Tiene ciertas cualidades desde el punto de vista del desarrollo de programas
para generar código HTML, entre otras que puede trabajar con Visual Basic; además de
brindar al programador la opción de manipular el lenguaje HTML, proporcionando una
interfaz completa que le facilita al usuario final interactuar con una aplicación
completamente WYSIWYG.
El Componente de Edición DHTML usa Internet Explorer para generar código HTML, el
ambiente de Edición del control siempre está en sincronización con el navegador. Los
Diseñadores Web y Programadores pueden usar cualquier lenguaje, Visual Basic,
VBScript, JScript, C, C++, y Java. El Componente de Edición DHTML ofrece entre otras
las siguientes características:
Formato de Texto. El control permite cambiar estilo, tamaño, color, alinear párrafos.
Edición. El componente soporta comandos de deshacer y rehacer. Además permite Cortar,
Copiar, y Pegar, mover elementos o redimensionarlos.
Capacidades de Arrastre. Permite arrastrar cualquier objeto, texto, o elemento en
cualquier parte en la página.
131
7.2 AYUDAS
Se diseña una ayuda para el manejo del programa que le permita al usuario acceder a ella
desde cualquier parte de la aplicación desplegando la información referente de cómo se
trabaja la ventana donde se invoco la ayuda.
El menú / Ayuda se encuentra divido en dos tópicos uno es Índice y el otro Contenido, para
el primero el usuario digita la palabra que considera hace referencia a una actividad del
programa; para el segundo muestra una serie de temas de importancia sobre el uso del
editor divido por Ítem con títulos sugestivos a la creación de páginas web. Mediante el uso
de la tecla F1 también se despliega la ventana ayuda.
7.3 CONSTRUCCIÓN
La aplicación fue desarrollada con el lenguaje Visual Basic versión 6.0 para Windows. Se
utilizó ventanas de tipo marco MDI, de respuesta e hijas, así como fichas o pestañas. En la
edición de texto se utilizo Word 2000. En la manipulación de imágenes Paint de Windows
98. En las ayudas HTML Help Work Shop 1.1.
7.4 PRUEBAS Y REFINAMIENTO
132
Humphrey señala en su artículo "La Burocracia del Proceso" un dicho del ejercito Sueco
"Cuando el mapa y el terreno difieren, confía en el terreno" (2). Haciendo una analogía el
plan es nuestro mapa y el terreno el trabajo real. En el momento en que el diseño planteado
entra en conflicto con la forma en que los usuarios suelen usar este tipo de aplicaciones; se
recurre a los programas posicionados en el mercado para observar su forma de trabajo.
Facilitar un aprendizaje tiene como objetivo implícito aprovechar las habilidades adquiridas
en una situación dada para ser utilizada en otras semejantes y de un modo general, dar
condiciones a los usuarios de crear generalizaciones. Así mismo una interfase deberá
soportar diferentes tipos de usuarios.
Se pueden encontrar y analizar Interfaces existentes con las cuales los
usuarios han
trabajado y después tomar y construir ideas para posteriormente utilizarlas en la
construcción de una nueva interfaz. Este tipo de copia puede ser efectiva para un nivel alto
de interacción con el usuario y para un bajo nivel de decisiones de control y desplegado.
En niveles altos, las tareas representativas y los usuarios que las hacen. Se debe de tomar en
cuenta los programas que utilizan los usuarios actualmente en situaciones similares, por
ejemplo, si ellos están utilizando una hoja de cálculo, tal vez la nueva aplicación debe
parecerse a esa hoja de cálculo.
133
(2) HUMPHREY, La Burocracia del Proceso, citado por García Romero. El Modelo de Capacidad de
Madurez y su Aplicación en Empresas Mexicana de Software. Puebla, 2001. Licenciatura. Ingeniería en
Sistemas Computacionales. Universidad de las Américas-Puebla, Escuela de Ingeniería. Departamento de
Ingeniería en Sistemas Computacionales.
Un paradigma existente puede ser más rápido y fácil de implementar porque muchas de las
decisiones han sido ya tomadas (por ejemplo cortar y pegar). Esto es muy importante por
que será más fácil y confortable para los usuarios aprenderlo y usarlo por que ellos ya saben
como operan muchas de las interfaces.
Copiar paradigmas existentes es también efectivo para detalles de niveles bajos en una
interfaz, tales como la colocación de un botón o los nombres de un menú. Por ejemplo, si se
está haciendo la parte de corrección de ortografía para su aplicación, es recomendable ver
los controles de verificación de ortografía de los paquetes de procesadores de texto que
utilizan las personas.
Según dice A. Rouble3, mediante el apego a estándares para el aspecto y sensación,
nombres de menús, nombres y colocación de botones de comando y uso racional de otras
características GUI. Muchos de estos estándares pueden ser comparados o tomados de otros
proyectos. Las aplicaciones (como el Prototipo de Editor de Páginas Web), pueden tomar el
leguaje de otras aplicaciones. Es mucho más fácil entrenar a un usuario para utilizar una
aplicación si es visual y funcionalmente similar a un procesador de palabras, hoja de
cálculo y correo electrónico.
134
3
A Rouble, David. Análisis y diseño practico para sistemas cliente / servidor con GUI’s. México. Prentice
Hall Inc. 1998; p. 278
Siempre se puede ir a los paquetes populares, tales como los procesadores de palabras y
hojas de cálculo, para buscar lineamientos sobre la manera de definir conceptos de menú y
botones de comando.
135
CONCLUSIONES
Llevar a cabo un proyecto de este tipo permite tener un contacto con las diferentes etapas
del desarrollo de software, comenzando con lo planteado en el papel, hasta la creación de
un instalador que permita la distribución del software.
Proporcionar a un usuario que esté familiarizado con el entorno Windows, una aplicación
sencilla de utilizar dado que la forma de uso es similar a los paquetes más populares
existentes en el mercado.
Crear una aplicación similar a las del mercado, nos enfrenta constantemente a la mejora en
los acabados, y procesos vinculados en ella, exigiendo profundizar en el conocimiento de
los alcances de la herramienta de programación.
Facilitar la manera de manejar el código HTML en la creación de páginas web, permite que
los usuarios que estaban rezagados en proporcionar su aporte al ciberespacio tenga la
oportunidad de compartir sus conocimientos, ideas y pensamientos a la comunidad Internet,
con solo insertar elementos y escribir texto en pantalla.
136
Crear un programa de estas características resulta un tanto tedioso, dado que en nuestro
medio no existe un precedente de un proyecto similar, y la bibliografía presente no
2
profundiza en temas relacionados con la construcción de aplicaciones diferentes a los
sistemas de información.
3
RECOMENDACIONES
Brindar al usuario la posibilidad de introducir a sus páginas Scrips de Java, animaciones de
flash y otras posibilidades como las que brinda Dreamwaver 4.0 de Macromedia.
Proporcionar un asistente y plantillas al programa que permita hacer mas sencilla la
creación de páginas por parte de los usuarios.
Crear funciones que permitan la codificación de lenguajes Java, Perl, Flash, DHTML, entre
otros.
Permitir realizar corrección ortográfica del texto presente en el documento.
Implantar una electiva técnica que permita a los alumnos aprender inglés avanzado para
familiarizarse con textos basados en análisis y programación que en la mayoría de casos se
encuentra en inglés limitando la posibilidad de ampliar y actualizar los conocimientos en
estos temas.
Crear un grupo de investigación sobre desarrollo de software donde los estudiantes, puedan
conocer nuevas y distintas herramientas de programación, proporcionando aplicaciones
comerciales para abastecer el mercado informático en la región, y desplazar las grandes
casas comerciales.
4
BIBLIOGRAFÍA
A ROUBLE, David. Análisis y Diseño Practico Para Sistemas Cliente / Servidor con
GUI´s. Mexico : Prestice Hall Inc, 1998.
CEBALLOS, Francisco Javier. Enciclopedia de Visual Basic 4. México : Alfaomega grupo
editorial, 1997.
DOMÍNGUEZ ALCONCHEL, José. Super utilidades para Visual Basic. Madrid :
McGraw-Hill, 1997.
E KENDALL, Kenneth y E KENDALL, Julie. Análisis y diseño de sistemas. México :
Prestice Hall hispanoamericana S.A, 1997.
GALVIS SUAREZ, Jorge David y TARAZONA CARRASCAL, Neil. Desarrollo de una
aplicación de un modelo para el uso de las interfaces dirigidas por eventos en el diseño de
sistemas de información. Cúcuta, 1997, 192 p. Trabajo de grado (Ingeniero de Sistemas).
Universidad Francisco de Paula Santander. Facultad de Ingeniería de Sistemas.
García Romero, El Modelo de Capacidad de Madurez y su Aplicación en Empresas
Mexicana
de
Software.
Puebla,
2001.
Licenciatura.
Ingeniería
en
Sistemas
5
Computacionales. Universidad de las Américas - Puebla, Escuela de Ingeniería.
Departamento de Ingeniería en Sistemas Computacionales.
GRIMES A, Galen. Netscape Communicator 4. México : Editorial Prentice Hall
Hispanoamericana, 1998.
HERNÁNDEZ BATISTA, Javier Fernando y SAYAGO GOMEZ, Franklin Solandy.
Determinación de una metodología para aplicar la tecnología de multimedia. Cúcuta, 1995,
286 p. Trabajo de grado (Ingeniero de Sistemas). Universidad Francisco de Paula
Santander, Plan de estudios de Ingeniería de Sistemas.
Instituto Colombiano de Normas Técnicas y Certificación, Tesis y otros Trabajos de Grado.
Normas Técnicas Colombianas sobre Documentación. Bogotá, ICONTEC,1996. (NTC
1486).
LEWIS, C y RIEMAN, J. Task-centered user interface desing. 1993.
MALONEY, Eric y NOSSIER C, Joshua. Microsoft Front Page 97. México : Editorial
Prentice Hall Hispanoamericana, 1997.
NAVARRO PEREZ, José Luis. Manual para Páginas Electrónicas en Word Wide Web
con lenguaje HTML e Implementación de la Página para la Universidad Francisco de Paula
Santander. Cúcuta, 1997. Trabajo de Grado (Ingeniero de Sistemas).
Francisco de Paula Santander. Facultad de Ingeniería de Sistemas.
Universidad
6
PRESSMAN, Roger S. Ingeniería de Software : un enfoque practico. Madrid : McGrawHill, 1998. 618 p.
SNELL, Nel. Internet ¿Qué hay que Saber?. España : Editorial Prentice Hall International
(UK) lda, 1995.
SEPÚLVEDA MORA, Ricardo Javier. Elaboración de un software educativo que a trabes
de un juego didáctico referente al proceso de enseñanza / aprendizaje de la geografía.
Cúcuta, 2002, 120 p. Trabajo de Grado (Ingeniero de Sistemas). Universidad Francisco de
Paula Santander. Facultad de Ingeniería de Sistemas.
STEPHEN L, Nelson. Referencia Rápida de Internet con Windows 95. España : Editorial
MacGraw Hill Interamericana, 1995.
TORRADO CALDERON, Claudia Gisela y RINCÓN FLOREZ, Juan Ramón. Análisis,
diseño, desarrollo e implementación de un software para el seguimiento y evaluación al
banco de programas y proyectos de inversión presupuesto de inversión y plan de desarrollo
del municipio san José de Cúcuta. Cúcuta, 2002. Trabajo de grado (Ingeniero de Sistemas).
Universidad Francisco de Paula Santander. Facultad de Ingeniería de Sistemas.
VAQUERO SANCJEZ, Antonio y JOYANES AGUILAR, Luis. INFORMATICA:
Glosario de términos y siglas. Madrid : McGraw-Hill, 1998.
7
Direcciones Electrónicas
http://biblio.udlap.mx
http://abstract.com
http://msdn.microsoft.com/code
http://activex.microsoft.com/activex/controls/dhtmled/
www.etsit.upm.es/ Manual práctico de HTML.htm.
www.msn.com.mx/encarta.
www.superarchivos.net
www.culturadeldiseno.cult.cu/conferencias/cguibonsiepe.htm
www.programmersheaven.com/zone1/index.htm
www.webreference.com/dhtml/
www.vbcode.com
www.a1vbcode.com/sort.asp
www.ycode.com
www.devx.com/dhtml
www.webopedia.com/TERM/D/dynamic-HTML.html.
www.eidos.es/algoritmo/
www.utpc.ac.pa/~amartine/soft
8
ANEXO A.
2
MANUAL DEL SISTEMA
MODULOS Y FORMULARIOS DEL SISTEMA
DESCRIPCIÓN DE MÓDULOS
Módulo AdornarObjetos
Descripción.
En este módulo se presentan las funciones, variables y procedimientos
empleados para dar efectos a los objetos (Cajas de Texto, Botones de Comando, Listas,
Listas Desplegables, etc) presentados en cada uno de los formularios de la aplicación.
Constantes del Módulo. Estas constantes con empleadas al momento de asignar y recoger
los valores de estilo de los bordes y posicionamiento del objeto al que se le realiza el efecto
de adornado.
Const SWP_NOMOVE = &H2
Const SWP_NOSIZE = &H1
Private Const GWL_EXSTYLE = (-20)
Private Const WS_EX_CLIENTEDGE = &H200
Private Const WS_EX_STATICEDGE = &H20000
Private Const SWP_FRAMECHANGED = &H20
Private Const SWP_NOACTIVATE = &H10
Private Const SWP_NOZORDER = &H4
Const MAX_CAMPOS = 2
3
Funciones y Procedimientos del Módulo.
Nombre
Descripción
Private
Declare
Function GetWindowLong Lib
"user32" Alias "GetWindowLongA" (ByVal hwnd As
Long, ByVal nIndex As Long) As Long
Private Declare Function SetWindowLong Lib "user32"
Alias "SetWindowLongA" (ByVal hwnd As Long, ByVal
nIndex As Long, ByVal dwNewLong As Long) As Long
Devuelve un Entero Largo que se asocia al borde de
objeto al que se le aplica, ya se a un formulario u
otro objeto de Windows
Cambia el modo como se pinta un objeto
determinado en la pantalla, ya sea un formulario, un
botón de opción, una caja de texto u otro, de manera
que presenta un estilo de borde sencillo para dar un
efecto muy particular.
Private Declare Function SetWindowPos Lib "user32" Actúa en conjunto con la función anterior y es
(ByVal hwnd As Long, ByVal hWndInsertAfter As necesaria para determinar el lugar donde se pintará
Long, ByVal X As Long, ByVal Y As Long, ByVal cx As el objeto en la pantalla
Long, ByVal cy As Long, ByVal wFlags As Long) As
Long
Public Sub FlatBorder(ByVal hwnd As Long)
Es aquí donde se hace el llamado a las funciones
anteriores, dando como parámetro un entero largo
que representa el controlador asignado por el
sistema operativo a un objeto determinado al
momento de su creación. Este valor es importante
para poder aplicar los efectos a dicho objeto.
Módulo. Definición
Descripción. En este módulo se presentan las variables y procedimientos empleados para
dar efectos a los objetos (Cajas de Texto, Botones de Comando, Listas,
Listas
Desplegables, etc) presentados en cada uno de los formularios de la aplicación.
Variables del Módulo.
Definición de variables empleadas para verificar el tipo de objeto que se tiene seleccionado
en el momento que se hace click derecho para mostrar el menú desplegable, por ejemplo, si
se tiene seleccionado un botón de comando, en el momento de hacer click derecho
cambia la variable VerSiBotonComando de False a True para poder determinar que se
mostrará en el menú desplegable los items de Propiedades de Botón de Comando, Estilo del
4
botón de comando y las demás opciones que se despliegan como son: cortar, copiar, pegar,
propiedades de fuente, propiedades de página, posición libre, etc.
Nombre
VerSiEsViñeta
VerSiEsNumeracion
VersiNumeracion
VerSiViñetas
VerSiLista
VerSiTabla
VerSiImagen
VerSiVideo
VerSiTexArea
VerSiOption
VerSiFormulario
VerSiHiper
VerSiElementoViñetas
VerSiLinea
VerSiMarquesina
VerSiBotonComando
VerSiCheckBox
VerSiCuadroTexto
Tipo
Variant
Variant
Boolean
Boolean
Boolean
Boolean
Boolean
Boolean
Boolean
Boolean
Boolean
Boolean
Boolean
Boolean
Boolean
Boolean
Boolean
Boolean
Alcance
Global
Global
Global
Global
Global
Global
Global
Global
Global
Global
Global
Global
Global
Global
Global
Global
Global
Global
Variables empleadas para controlar la creación y el manejo de los Marcos de Página.
Nombre
CreandoTCSuperior
CreandoTCIzquierdo
CreandoTCDerecho
TituloMarco1
TituloMarco2
TituloMarcoTituloSuperior
TituloMarcoTituloInferior
TituloMarcoTituloPrincipal
ActivoMarcoDer
ActivoMarcoIzq
ActivoMarcoSup
ActivoMarcoInf
ActivoMarcoDer1
ActivoMarcoIzq1
ActivoMarcoSup1
CantidadM
CantidadMP
HabilitarPagMarco
ProcesoAperturaContenido
ProcesoAperturaTitulo
ProcesoAperturaTituloContenido
ConPagCargadas
PaginaDestino
ActivoDHTMLPagina
TituloPagina
Tipo
Boolean
Boolean
Boolean
String
String
String
String
String
Bolean
Bolean
Bolean
Bolean
Bolean
Bolean
Bolean
Integer
Integer
Bolean
Bolean
Bolean
Boolean
Integer
String
Boolean
String
Alcance
Global
Global
Global
Global
Global
Global
Global
Global
Global
Global
Global
Global
Global
Global
Global
Global
Global
Global
Global
Global
Global
Global
Global
Global
Public
5
Definición de variables para el objeto Formulario de Internet Explorer
Nombre
NombreFormulario
AccionFormulario
MetodoFormulario
PopFormulario
Tipo
String
String
String
IHTMLFormElement
Alcance
Global
Global
Global
Global
Esta variable almacena el estilo del objeto seleccionado al momento de dar click derecho
para mostrar el menú desplegable con las opciones propias del objeto y de la página en
general.
Nombre
EstiloObjetoProgramacion
Tipo
IHTMLStyle
Alcance
Global
Definición de variables que determinan los objetos que se pueden insertar en la página web
creada por el usuario.
Nombre
ObjetoCheck
ObjetoLista
ObjetoTexto
ObjetoTextoArea
ObjetoOption
ObjetoPrueba
ObjetoTextual
ObjetoBotonComando
ObjetoProgramacion
ObjetoLineaHorizontal
ObjetoTextoMarque
ObjetoBodyPagina
ObjetoMarquesina
ObjetoCelda
ObjetoTabla
Tipo
IHTMLInputElement
IHTMLSelectElement
IHTMLInputTextElement
IHTMLTextAreaElement
IHTMLOptionButtonElement
Object
Object
HTMLInputElement
IHTMLInputElement
IHTMLHRElement
IHTMLFontElement
IHTMLBodyElement
IHTMLMarqueeElement
IHTMLTableCell
IHTMLTable
Alcance
Global
Global
Global
Global
Global
Global
Global
Global
Global
Global
Global
Global
Global
Global
Global
Variables que determinan los elementos esenciales del formulario y objetos de una página
web que se crea en el momento de arrancar la aplicación
Nombre
ComienzoCaracter
ComienzoCaracter2
ColorTextoRico
PalabrasClaves()
ConPalabrasClaves
Movimiento
Documento()
Contador
Tipo
Long
Long
Double
String
Integer
Integer
Form
Integer
Alcance
Global
Global
Global
Global
Global
Global
Global
Global
6
Variables que representan propiedades de objetos de Internet
Nombre
PropHiper
PropNumeracion
PropViñetas
TipoNumeracion
TipoViñetas
TipoMenu
HypervinculoEncontrado
VerViñeta
VerNumero
CambiarHypervinculoMapa
FuenteTamaño
VerificarSiHayHypervinculo
Este
DireccionCorreoElectronico
PropTexto
PropLink
Propbgcolor
ProplinkVisitado
NombreMapa
ContadorMapa
Tipo
HTMLAnchorElement
IHTMLOListElement
IHTMLUListElement
String
String
Boolean
String
Variant
Variant
Boolean
Integer
Long
IHTMLTxtRange
String
String
String
String
String
String
Long
Alcance
Global
Global
Global
Global
Global
Global
Global
Global
Global
Global
Global
Global
Global
Global
Public
Public
Public
Public
Public
Public
Variables que Determinan Propiedades de un texto o párrafo en la página
Nombre
VerNegrilla
TamañoF
TamañoG
TamañoH
Color
TextoAuxiliar
TextoAlternativoEncontrado
FuenteH
Neg
Inc
Esf
CapCo
Aquí
Deshacer
Rehacer
K
ElementoViñeta
Tipo
String
Variant
Variant
Variant
Variant
String
String
Integer
Variant
Variant
Variant
Variant
Variant
Variant
Variant
String
IHTMLLIElement
Alcance
Global
Global
Global
Global
Global
Global
Global
Global
Global
Global
Global
Global
Global
Global
Public
Public
Public
Variables empleadas para colocar el vector de estados, es decir, el vector de estados es
aquel que define como se verán los items del menú desplegable que aparece cuando hay
click derecho sobre un objeto o sobre la página en sí. Estos estados son:
1. Normal (Se presenta la opción para escoger)
7
2. Gris ó deshabilitado (No puede escogerse la opción) en este caso el menú queda disable
para el usuario
Nombre
Estado
Menu()
VecEstados()
Vec(3)
VecAux(3)
Subr
NumMenu1
NumMenu2
NumMenu3
ContadorMenu
ConMenuA
Pabsoluta
EnviarA
VerifVN
Tipo
DHTMLEDITCMDF
String
OLE_TRISTATE
Integer
Integer
Variant
Integer
Integer
Integer
Integer
Integer
Boolean
Boolean
Variant
Alcance
Global
Global
Global
Global
Global
Global
Global
Global
Global
Global
Global
Global
Global
Global
Variables empleadas para realizar labores de intercambio entre los objetos de la página, es
decir, se copia el objeto seleccionado en la pantalla (Área de Trabajo) y se almacena en una
variable tipo object para realizar diversas labores como el cambio de atributos, movimiento
o incluso borrado total y parcial del Área de Trabajo.
Nombre
Adicionar
Selection
Doc
Rg
CtlRg
RecObjeto
RecogeCodigoObjeto
Tipo
Object
Object
Object
IHTMLTxtRange
IHTMLControlRange
IHTMLElement
String
Alcance
Public
Public
Public
Global
Global
Global
Global
Variables empleadas para el manejo de archivos
Nombre
Archivo
Cancela
ArchivoAyuda
Fichero
Controlador
m_HtmlHelp
Tipo
String
Bolean
String
String
Object
AyudaHTML
Alcance
Global
Global
Global
Global
Global
Global
8
Variables para controlar las Propiedades del objeto Tabla de HTML
Nombre
EspacioCelda
RellenoCelda
BordeTabla
AnchoTabla
ColorFondoTabla
ImagenFondoTabla
AlineacionTabla
ColorBordeTabla
ColorBordeClaroTabla
ColorBordeOscuroTabla
EstiloTabla
ContadorTabla
TablaAlt
ConTablaA
Tipo
String
String
String
String
String
String
String
String
String
String
String
Integer
Boolean
Integer
Alcance
Global
Global
Global
Global
Global
Global
Global
Global
Global
Global
Global
Global
Global
Global
Variables para controlar las Propiedades del objeto Celda de HTML
Nombre
AnchoCelda
AltoCelda
ImagenFondoCelda
ColorFondoCelda
ColorBordeCelda
ColorBordeClaroCel
ColorBordeOscuroCel
AlineacionVerticalCelda
AlineacionHorizontalCelda
Tipo
String
String
String
String
String
String
String
String
String
Alcance
Global
Global
Global
Global
Global
Global
Global
Global
Global
Variables empleadas para el manejo y conversión de Colores en HTML
Nombre
ColorFormLargo
ColorRgb
ColorTotal
Tipo
Long
String
String
Alcance
Global
Global
Global
Variables empleadas para el manejo de las propiedades del Objeto Marquesina de HTML
Nombre
Letras
Cuenta
CodigoMarq
Dirección
Comportamiento
Alineación
Retardo
Repetir
AnchoMar
AltoMar
BordeMar
ColorMar
TextoMarquesina
CantidadVelMov
Tipo
String
Integer
String
String
String
String
String
String
String
String
String
String
String
String
Alcance
Global
Global
Global
Global
Global
Global
Global
Global
Global
Global
Global
Global
Global
Global
9
EstiloMarq
CodigoTotalMarquesina
TamañoTextoMarq
String
String
Integer
Global
Global
Global
Variables empleadas para el manejo de las Propiedades del objeto video de HTML
Nombre
RutaVideo
RepetirVideo
Comienzo
EstiloVideo
Tipo
String
String
String
String
Alcance
Global
Global
Global
Global
Variables empleadas para las propiedades del objeto Imagen de HTML
Nombre
RutaImagen
AnchoImagen
AltoImagen
MapaUsado
BordeImagen
EstiloImagen
CadenaMapaUsado
AlineacionImagen
AreaMapa
ImagenDef
PropiedadesImagen1
PropImagen
ImagenDestino
CadenaImagen
Tipo
String
String
String
String
String
String
String
String
IHTMLMapElement
IHTMLImgElement
IHTMLImgElement
IHTMLImgElement
IHTMLImgElement
String
Alcance
Global
Global
Global
Global
Global
Global
Global
Global
Global
Global
Global
Global
Global
Public
Variables empleadas para el manejo de las Propiedades del objeto Línea Horizontal de
HTML
Nombre
AltoLinea
AnchoLinea
AlineacionLinea
ColorLinea
NoSombra
EstiloLinea
Tipo
String
String
String
String
String
String
Alcance
Global
Global
Global
Global
Global
Global
Variables empleadas para las Propiedades del Objeto Botón de Comando de HTML
Nombre
EtiquetaBotonComando
NombreBotonComando
EstiloBotonComando
TipoBotonComandoEst
ContadorBotonComando
TipoBot
Tipo
String
String
String
String
Integer
HTMLInputElement
Alcance
Global
Global
Global
Global
Global
Global
10
Variables empleadas para el manejo de las propiedades del Objeto Check Box.
Nombre
ValorCheckBox
NombreCheckBox
EstiloCheckBox
TabulacionCheckBox
ContadorCheckBox
ComprobarSiChequeado
Chequeado
Tipo
String
String
String
String
String
Boolean
Boolean
Alcance
Global
Global
Global
Global
Global
Global
Global
Variables empleadas para el manejo de las Propiedades del Objeto Lista de HTML
Nombre
NombreLista
EstiloLista
OrdenTabulacion
MultipleSel
ValorLista
TamañoLista
VectorTextoItemLista()
VectorEstadoSelItemLista()
VectorValorItemLista()
ListaDesplegable1
Tipo
String
String
String
String
String
String
String
String
String
Boolean
Alcance
Global
Global
Global
Global
Global
Global
Global
Global
Global
Global
Variables empleadas para contar los respectivos objetos insertables en la página, de acuerdo
con esto, se concatena el nombre del objeto y un contador independiente para el, por
ejemplo: CuadroTexto0 = "CuadroTexto" & Variable_que_cuenta
Variable_que_cuenta = Variable_que_cuenta + 1
Nombre
ContadorCuadroTexto
ContadorFormulario
ContadorMenuDesplegable
ContadorListaSeleccionable
ContadorTexArea
ContadorOption
Tipo
String
String
String
String
String
String
Alcance
Global
Global
Global
Global
Global
Global
Variables empleadas para el manejo de las Propiedades del Objeto Cuadro de Texto
Nombre
NombreCuadroTexto
ValorCuadroTexto
AnchoCuadroTexto
TabulacionCuadroTexto
TipoCuadroTexto
EstiloCuadroTexto
Tipo
String
String
String
String
String
String
Alcance
Global
Global
Global
Global
Global
Global
11
Variables empleadas para el manejo de las propiedades del Objeto Área de Texto
Nombre
NombreTexArea
ValorTexArea
AnchoTexArea
LineasTexArea
EstiloAreaTexto
Tipo
String
String
String
String
String
Alcance
Global
Global
Global
Global
Global
Variables empleadas para las Propiedades de un Objeto Botón de Opción de HTML
Nombre
NombreOption
ValorOption
SeleccionadoOption
EstiloBotonOpcion
ContadorOpcion
Tipo
String
String
Boolean
String
Integer
Alcance
Global
Global
Global
Global
Global
Variables empleadas para el Estilo de un Objeto en particular
Nombre
ColorBordeIzquierdoRecogido
ColorBordeDerechoRecogido
ColorBordeSuperiorRecogido
ColorBordeInferiorRecogido
ColorFondoObjetoRecogido
Tipo
String
String
String
String
Integer
Alcance
Global
Global
Global
Global
Global
Módulo FuncionesBarraHerramientas
En este módulo se presentan las funciones y procedimientos relacionados con el
comportamiento las barras de herramientas de la aplicación.
Nombre
Public Sub DesactivarTodosBotones()
Descripción
Procedimiento publico empleado para deshabilitar todos los
botones de las tres barras de herramientas: la primera
barra (Barra de Formato). La segunda barra (Barra de
Edición) y la tercera barra (Barra de Programación) también
se deshabilitan algunos elementos de los menús
desplegables principales, como son el menú edición, el
menú Insertar, el menú tabla, etc.
Public Sub ActivarTodosBotones()
Este procedimiento público actúa de manera inversa al
anterior, pues este habilita los elementos que se
encontraban deshabilitados.
Public Sub DesactivarBotones()
Aquí se desactivan sólo los botones que se necesita que
estén
en dicho estado para cuando arranca el programa y se crea
la primera página.
Public Sub InsertarCodigo(ControlRecibe As este procedimiento es empleado para insertar un bloque de
DHTMLEdit, CodigoInsertado As String)
código en HTML válido sobre el control para visualizar en
pantalla el efecto de dicho código.
por ejemplo, si insertamos la instrucción:
12
Public Sub
DHTMLEdit)
ColocarCopiar(ControlActivo
As
Public Sub ColocarDeshacer(ControlActivo As
DHTMLEdit)
Public Sub ColocarCortar(ControlActivo As
DHTMLEdit)
Public Sub
DHTMLEdit)
ColocarPegar(ControlActivo
As
Public Sub SeleccionarTodo(ControlActivo As
DHTMLEdit)
Public Sub ColocarRehacer(ControlActivo As
DHTMLEdit)
Public Sub
DHTMLEdit)
AgregarFilas(ControlActivo
As
Public Sub AgregarColumnas (ControlActivo
As DHTMLEdit)
Public Sub DividirColumnas (ControlActivo As
DHTMLEdit)
InsetarCodigo(Control,"<p> Prueba de Código </p>") el
resultado de esta operación es que se escribe el contenido
de dicho párrafo en pantalla
Procedimiento para copiado en portapapeles cualquier
objeto o texto del control DHTMLEdit, quien ejecuta el
comando DECMD_COPY para llevar a cabo dicha labor.
Procedimiento para deshacer los últimos comandos
ejecutados sobre el control DHTMLEdit.
Procedimiento para cortar en portapapeles cualquier objeto
o texto del control DHTMLEdit, quien ejecuta el comando
DECMD_CUT para llevar a cabo dicha labor.
Procedimiento para pegar desde portapapeles cualquier
objeto o texto en el control DHTMLEdit, quien ejecuta el
comando DECMD_PASTE para llevar a cabo dicha labor.
Selecciona todos los elementos presentes en la página de
usuario
activa
cuando
se
ejecuta
el
comando
DECMD_SELECTALL para llevar a cabo dicho fin.
Este Procedimiento como su nombre lo dice, retoma todas
las instrucciones que hayan sido eliminadas con el comando
deshacer. Cuando no hay nada que deshacer este comando
no se ejecuta.
Agrega Filas a una Tabla activa en pantalla. Para poder
realizar esta labor el usuario debe dar click en la celda
donde quiere insertar una nueva fila, de esta forma el
programa identifica que se encuentra dentro de una tabla y
puede habilitar el botón de Agregar Filas en el menú Tabla
presente en la barra de menús de la pantalla principal y
también puede habilitar el ítem Agregar nueva fila del menú
desplegable que se muestra al dar click derecho cuando el
enfoque está sobre una celda en particular
Agrega Columnas a una Tabla activa en pantalla. Para
poder realizar esta labor el usuario debe dar click en la
celda donde quiere insertar una nueva Columna, de esta
forma el programa identifica que se encuentra dentro de
una tabla y puede habilitar el botón de Agregar Columnas
en el menú Tabla presente en la barra de menús de la
pantalla principal y también puede habilitar el ítem Agregar
nueva Columna del menú desplegable que se muestra al
dar click derecho cuando el enfoque está sobre una celda
en particular.
Divide una Celda de una Tabla activa en pantalla. Para
poder realizar esta labor el usuario debe dar click en la
celda que quiere dividir, de esta forma el programa
identifica que se encuentra dentro de una tabla y puede
habilitar el botón de Dividir Celda en el menú Tabla
presente en la barra de menús de la pantalla principal y
también puede habilitar el ítem Dividir Celda del menú
desplegable que se muestra al dar click derecho cuando el
enfoque está sobre una celda en particular.
Módulo FuncionesColores
En este módulo se escriben las funciones y procedimientos empleados para el manejo de
colores para los objetos de HTML. Entre otras, se encuentran funciones para la conversión
13
de color RGB a Hexadecimal, conversión de Hexadecimal a RGB, Conversión de color
Hexadecimal a decimal, etc.
Nombre
Public Sub ConColorHTMLaDec
String, aQuien As Label)
Descripción
As Este procedimiento público es empleado para convertir un
color Hexadecimal a Decimal. los colores en una página web
se identifican en hexadecimal de la siguiente forma:
"blue":
"#0000ff", "white":
"#00ff00", "lime":
"#008000",
"red":
"#ff0000", "black":
"#000000"
"aqua":
"#00ffff",
"green":
"#00ff00", "cyan":
"#808000", "magenta": "800080", "yellow": "#ffff00"
"gray":
"#c0c0c0", "lightblue": "#ffe897" "lightgreen":
"#99ff9f", "lightcyan": "#ffffd7", "lightyellow": "#d7ffff"
Además Existe una Clasificación de colores Que se explica
con más detalle en el manual del sistema.
Public Function ConEntRgb(Value As Long, Esta función convierte un valor entero a RGB. Es un cálculo
Optional Separador As String = ",") As String sencillo, que pretende dividir dicho entero en tres posiciones
válidas para pasárselas de parámetro a la función RGB quien
se encarga de determinar el color válido para un control o
cualquier otro elemento.
Una Sentencia en RGB se
representa así: RGB (0 ... 255,0 ... 255,0 ... 255)
Public Function ConRgbHex(RGBValue As Esta función es muy Importante, pues convierte una
String, Optional Separador As String = ",") As Sentencia RGB de tipo RGB (0 ... 255,0 ... 255,0 ... 255) a
String
Hexadecimal para realizar esto es necesario analizar los tres
parámetros que entran en la función RGB y determinar su
correspondiente valor Hexadecimal, luego cada segmento se
une para dar como resultado un color en Hexadecimal de la
siguiente manera: #FFFFFF (blanco)
Function ColocarColor(Caja As Label) As Esta función Colorea una Label que representa el color de un
Bolean
elemento seleccionado de una página, es decir, Si el usuario
da click derecho sobre una página, se despliega
el menú que contiene los items de Cortar, Copiar, Pegar,
Propiedades de Fuente, Propiedades de Página.
Si la
Elección es Propiedades de Página se despliega una
formulario que indica los atributos de la página activa en el
momento, entonces las cajas que coloreadas representan los
colores detectados de dicha página. De acuerdo con esto la
función ColocarColor da un color a un label con base
en un color detectado. Este color puede cambiarse al dar
click en un botón adjunto a esta caja.
Function ConvertirLetraHexadecimal(Entrada Convierte una letra a su correspondiente valor en
As String) As String
Hexadecimal
Function
ColocarColorPalabra(rch
As Esta Función Colorea una palabra reservada dentro de un
RichTextBox, Palabra As String, EntradaColor control RichTextBox, esto es empleado cuando se muestra
As Double) As Boolean
el código fuente de una página web. Esta función trabaja en
conjunto con la función ColorearCajaTexto para lograr este
fin.
Function
ColocarColorCadena(rch
As Esta función Colorea el contenido de una cadena presente en
RichTextBox, EntradaColor As Double) As el código fuente de una página web de usuario, esta función
Boolean
busca las comillas dobles de apertura de cadena y va
coloreando carácter por carácter hasta llegar a las comillas
dobles de cierre de cadena, de esta manera queda coloreada
toda la cadena incluyendo las comillas
Public
Sub
ColorearCajaTexto(Caja
As Con este procedimiento público se colorea toda la caja que
RichTextBox)
contiene el código fuente de la página web activa en el
momento.
Aquí
se
invocan
las
funciones
de
ColocarColorPalabra y de ColocarColorCadena, y trabaja de
la siguiente forma: se hace un barrido con todas las palabras
claves que se encuentran en un vector llamado
PalabrasClaves(), entonces si se encuentra una palabra clave
(Color
14
Public Sub ColocarColorCadenasTexto(Texto
As RichTextBox, EntradaColor As Double)
Public
Sub
ConvertirPalabrasClavesMinuscula(Texto
As
RichTextBox)
Public
Sub
ConvertirPalabrasMinusculaFrames(Texto As
TextBox)
Public
Sub
RichTextBox)
ValidarTildes(Texto
As
dentro de la caja, ésta se colorea y así sucesivamente.
Luego se hace otro barrido para encontrar las cadenas. A
cada uno de los anteriores barridos se les asigna un color
para darle al texto.
Este Procedimiento identifica los símbolos de "<" y ">" sobre
los cuales se va a buscar la cadena de texto a colorear.
Con este procedimiento público se pretende mostrar el
código fuente de la página activa en forma ordenada, o sea
mostrando todas las palabras que se encuentran entre los
símbolos "<" y ">" en minúscula.
código fuente de la una página de Marcos de forma
ordenada, o sea mostrando todas las palabras que se
encuentran entre los símbolos "<" y ">" en minúscula.
código fuente de la página activa en forma ordenada, o sea
mostrando todas las palabras que se encuentran entre los
símbolos "<" y ">" en minúscula.
Módulo FuncionesFrames
Este módulo presenta las funciones y procedimientos empleados para el manejo de los
Marcos (Frames) de Página. La aplicación está diseñada para soportar tres tipos diferentes
de Marcos de Paginas, los cuales son:
Tipo Contenido (dos Páginas divididas
verticalmente), Tipo Título (dos Páginas divididas horizontalmente) y Título Contenido
(dos Páginas divididas horizontalmente, pero la página superior dividida Verticalmente).
Nombre
Public Sub ModificarMarcoPrincipal (TMarco As
String, TMarco1 As String, TMarco2 As String,
MIzquierdo As Double, MDerecho As Double,
CodigoRecibe As RichTextBox)
Public
Sub
ModificarMarcoPrincipalTituloContenido
(TMarco As String, TMarco1 As String,
TMarco2 As String, TMarco3 As String,
MSuperior As Double, MInferior As Double,
MIzquierdo As Double, MDerecho As Double,
CodigoRecibe As RichTextBox)
Public
Sub
ModificarMarcoPrincipalTitulo
(TMarco As String, TMarco1 As String,
TMarco2 As String, MIzquierdo As Double,
MDerecho As Double, CodigoRecibe As
RichTextBox)
Function
VerificarSiHayMarcos(Codigo
As
RichTextBox) As Boolean
Descripción
Con este procedimiento se pretende Modificar el código
Fuente de un Marco Principal de acuerdo a los cambios que
hayan sufrido sus correspondientes páginas de Marco. Este
es empleada cuando el Tipo de Marco principal es Contenido.
es empleada cuando el Tipo de Marco principal es Titulo
Contenido.
es empleada cuando el Tipo de Marco principal es Titulo.
Esta función indica si la página web que se ha abierto es de
tipo Marco Principal, sin importar que sea Contenido, Titulo o
Titulo Contenido.
Sub GuardarFrameEspecifico(VerEstado As Como su nombre lo indica este procedimiento guarda el
Label, NombreMarco As Label, CodigoRecibe contenido del código fuente de un Marco de Páginas. Aquí se
15
As RichTextBox, Control As DHTMLEdit)
Function NuevoFrame(Control As DHTMLEdit,
TextoC As String, TituloInicialMarco As String)
As String
Function
RemplazarEspacios(Cadena
As
String) As String
Function AbrirMarco(Control As DHTMLEdit,
Codigo As RichTextBox) As String
determina el tipo de Marco y se realiza una determinada
labor de acuerdo a éste.
Esta función es llamada cuando se solicita crear una nueva
Página dentro de un Marco, no importando el tipo de Marco
que se este trabajando.
Remplaza los espacios en blanco por la composición de
símbolos %20 que indica al Explorador que hay se encuentra
un espacio en blanco.
Esta función abre una página para Cargarla en el Marco
donde halla sido invocada
Módulo FuncionesFuente
En este módulo se encuentran las funciones y procedimientos empleados para el manejo de
las fuentes presentes en los diferentes párrafos que se escriben sobre el control. Aquí se
tratan aspectos importantes como el aumento y disminución del tamaño de la fuente,
asignar negrilla al texto seleccionado, colocar en cursiva el texto seleccionado, subrayar
texto, etc.
Nombre
Descripción
Public Sub AumentarFuente (ControlActivo As Este procedimiento es empleado para ejecutar el comando
DHTMLEdit)
de Colocar un tamaño de fuente deseado, sólo que en este
caso es empleado para aumentarlo hasta el tamaño máximo
de fuente permitido de acuerdo a lo que el usuario quiera
sobre un texto seleccionado.
Public Sub DisminuirFuente (ControlActivo As Este procedimiento es empleado para ejecutar el comando
DHTMLEdit)
de Colocar un tamaño de fuente deseado, sólo que en este
caso es empleado para disminuirlo hasta el tamaño mínimo
de fuente permitido de acuerdo a lo que el usuario quiera
sobre un texto' seleccionado.
Public Sub ColocarNegrilla(ControlActivo As Este procedimiento ejecuta el comando para colocar en
DHTMLEdit)
negrilla un texto seleccionado. si el Texto seleccionado ya
contiene negrilla, entonces se coloca en modo normal.
Public Sub ColocarCursiva(ControlActivo As Este procedimiento ejecuta el comando para colocar en
DHTMLEdit)
cursiva un texto seleccionado. si el Texto seleccionado ya
contiene cursiva, entonces se coloca en modo normal.
Public Sub ColocarSubrayar (ControlActivo As Este procedimiento ejecuta el comando para colocar un texto
DHTMLEdit)
seleccionado subrayado. si el Texto seleccionado ya está
subrayado, entonces se coloca en modo normal.
Public Sub ColocarLinearIzq (ControlActivo As Este procedimiento ejecuta el comando que aliena el párrafo
DHTMLEdit)
activo hacia la izquierda.
Public Sub ColocarCentrar (ControlActivo As Este procedimiento ejecuta el comando que Centrar el
DHTMLEdit)
párrafo activo.
Public Sub ColocarAlinearDer (ControlActivo Este procedimiento ejecuta el comando que aliena el párrafo
As DHTMLEdit)
activo hacia la derecha.
Public Sub ColocarViñetas(ControlActivo As Procedimiento Público que agrupa un texto seleccionado en
DHTMLEdit)
viñetas, ejecutando el comando DECMD_UNORDERLIST.
Public Sub ColocarSangriaDer (ControlActivo Procedimiento
publico
que
ejecuta
el
comando
As DHTMLEdit)
DECMD_INDENT que funciona para Dar una Sangría hacia la
16
Derecha.
Public Sub ColocarSangriaIzq (ControlActivo Procedimiento
publico
que
ejecuta
el
comando
As DHTMLEdit)
DECMD_OUTDENT que funciona para Dar una Sangría hacia
la izquierda.
Public Sub ColocarNumeros (ControlActivo As Procedimiento Público que agrupa un texto seleccionado en
DHTMLEdit)
una
lista
numerada,
ejecutando
el
comando
DECMD_ORDERLIST.
Public Sub CambiarColorFuente (ControlActivo Procedimiento Público que cambia el color de fuente de un
As DHTMLEdit)
texto seleccionado. El usuario selecciona el color deseado en
un cuadro de dialogo de colores estándar de Windows.
Public
Sub
VerificarFormato(Control
As Este procedimiento es muy importante, pues verifica
DHTMLEdit)
el formato de una página activa. En este procedimiento se
determina entre otros:
1. El nombre de la Fuente donde se encuentra el cursor.
2. El Tamaño de la Fuente donde se encuentra el cursor.
3. Se evalúa si la fuente esta en negrilla.
4. Se evalúa si la fuente esta en cursiva.
5. Se evalúa si la fuente esta subrayada.
6. Se determina la Alineación del Texto: Izquierda, Derecha
ó Centro.
7. Se determina si el texto esta agrupado en una lista de
viñetas ó una lista numerada.
8. Determinamos el Formato del Párrafo: si es normal, si es
Encabezado 1, Encabezado 2, Encabezado 3, etc.
9. Verificamos si se puede Cortar, Copiar ó Pegar.
Módulo FuncionesGenerales
Módulo de Visual Basic en el cual se escriben los procedimientos y funciones empleados
en forma general por todas la aplicación para realizar diversas labores sobre la página
activa en un momento dado. Aquí se muestran los procedimientos para la captura de los
atributos de cada una de los objetos HTML (Tablas, Listas, Listas Desplegables, Texto,
hipervínculos, botones de comando, imágenes, etc.) que puede analizar esta aplicación.
Nombre
Descripción
Public Sub CrearMenuContextual(Control As Procedimiento público mediante el cual se crea el menú
DHTMLEdit)
contextual que se visualizará al hacer click derecho sobre el
área de trabajo, algún texto seleccionado o sobre un objeto
dentro del área.
Sub RecogerAtributosTabla()
Procedimiento público mediante el cual se recogen los
atributos del Objeto Tabla de HTML.
Public
Sub
RecogerAtributosCelda Procedimiento público mediante el cual se recogen los
(CodigoCelda As String)
atributos del Objeto Celda (segmento de tabla) de HTML.
Public Sub DesplegarMenuContextual (Control En este Procedimiento Público se crea en sí el menú
As DHTMLEdit, Indice As Long)
contextual que es mostrado cuando se hace click derecho
sobre un objeto o un texto HTML identificado por esta
aplicación.
Sub RecogerAtributosLineaH (CodigoLineaH Procedimiento público mediante el cual se recogen los
As String)
atributos del Objeto Línea Horizontal de HTML.
Sub RecogerAtributosVideo(CodigoVideo As Procedimiento público mediante el cual se recogen los
String)
atributos del Objeto Vídeo de HTML.
17
Sub
RecogerAtributosMarquesina
(CodigoMarquesina As String)
Sub RecogerAtributosImagen (CodigoImagen
As String)
Sub
RecogerAtributosBotonComando
(CodigoBotonComando As String)
Sub
RecogerAtributosCheckBox
(CodigoCheckBox As String)
Sub
RecogerAtributosLista(CodigoLista
As
String)
Sub RecogerAtributosCombo(CodigoLista As
String)
Sub
RecogerAtributosCuadroTexto
(CodigoCuadroTexto)
Sub
RecogerAtributosTexArea
(CodigoAreaTexto As String)
Sub
RecogerAtributosOption
(CodigoBotonOpcion As String)
Sub
CrearMapaImagen(CodigoImagen
As
String)
atributos del Objeto Marquesina de HTML.
atributos del Objeto Imagen de HTML.
atributos del Objeto botón de Comando de HTML.
atributos del Objeto Botón de Chequeo de HTML.
atributos del Objeto Cuadro de Lista de HTML.
atributos del Objeto Cuadro de Lista Desplegable de HTML.
atributos del Objeto Cuadro de Texto de HTML.
atributos del Objeto Área de Texto de HTML.
atributos del Objeto Botón de Opción de HTML.
Procedimiento empleado para Cargar las Áreas presentes en
una imagen que contiene un mapa de áreas. Si la imagen
no contiene un mapa de áreas, entonces, solo se carga la
imagen en el editor de mapas para que el usuario agregue
las áreas que desee.
Function TipoLista(CodigoLista As String) As Función para Verificar el Tipo de Lista, es decir, si es una
Boolean
lista Desplegable p una lista Normal.
Sub
RecogerAtributosFormulario Procedimiento público mediante el cual se recogen los
(CodigoFormulario As String)
atributos del Objeto Formulario de HTML.
Sub RecogerAtributosNuemracion()
atributos del Objeto Lista Numerada de HTML.
Sub RecogerAtributosViñetas()
atributos del Objeto Lista de Viñetas de HTML.
Sub RecogerAtributosHipervinculo()
atributos de los Hipervínculos de HTML.
Módulo FuncionesGuardarArchivos
Este módulo de Visual Basic expresa las funciones y procedimientos para guardar las
páginas creadas por el usuario, ya sean páginas normales o páginas de marco.
Nombre
Public Sub ArchivoGuardar()
Descripción
Procedimiento Público para Guardar a solicitud del usuario la
página Activa, Aquí se evalúa si es una página normal o si
es una página de marcos de tipo Titulo, Contenido o Título
Contenido.
Public Sub GuardarFichero(Fichero As String, Este procedimiento público recibe como parámetro una
CajaTexto As RichTextBox)
cadena que indica la ruta del archivo que se va a guardar y
la caja de texto rico que contiene el texto que se pretende
almacenar en dicho archivo.
Public Sub GuardarComo()
Procedimiento Público para Guardar Como a solicitud del
usuario la página Activa, Aquí se evalúa si es una página
normal o si es una página de marcos de tipo Titulo,
Contenido o Título Contenido.
18
Módulo FuncionesMarcadores
Módulo de Visual Basic en donde se escriben funciones y procedimientos que se emplean
para controlar las operaciones con los marcadores o anclas que se crean o modifican
durante el diseño de un página web.
Nombre
Descripción
Public Sub RecogerMarcadores (CajaTexto As Recoge marcadores de una Caja de Texto que contiene el
RichTextBox, ListaMarcadores As ListBox)
código fuente de la página a la que se le hace la solicitud de
recoger dichos marcadores, que se asignan a una lista de
marcadores presente en un control List para cada uno de los
formularios que contiene el control de página web
(DHTMLEdit Control), no importando que sea una página de
Marcos.
Function RecogerMapaEspecifico (CajaTexto Esta función es invocada cuando se necesita sacar el bloque
As RichTextBox, MapaBuscar As String) As de código en HTML de una caja de texto que contiene el
String
código fuente de una página específica
Módulo FuncionesPagina
Módulo de Visual Basic en el que se escriben los procedimientos y funciones empleados
para controlar las operaciones con las páginas de usuario.
Aquí se hace énfasis en el
manejo de cadenas de texto para asignar y remplazar atributos de objetos.
Nombre
Descripción
Function BuscarPalabraAvanzada (Cadena As Esta función se encarga de conseguir una palabra dentro de
String) As String
una cadena de forma que analiza una serie de posibilidades
para evitar que se escoja una palabra incorrecta que
representaría una parámetro no valido para una función que
la solicite. Esta función actúa de la siguiente manera:
1. Se copia el segmento de Código a el control Intercambio
que es
una caja de texto de uso global para toda la
aplicación
2. Se le pasa un parámetro tipo cadena que es la palabra de
a buscar que se encuentre la palabra.
3. Se busca dicha palabra dentro de la caja de texto
4. si se encuentra, se hace un barrido hasta encontrar el
signo "=".
5. luego de encontrar el igual, se hace un barrido hasta
encontrar las comillas dobles, si no se encuentran entonces
es porque la palabra esta igualada a un valor que no tiene
comillas, entonces'
es el criterio de búsqueda pasa a ser
los espacios en blanco.
Function RescatarCadenaMarquesina (Texto Aquí se rescata el texto que contiene la marquesina, pues el
As TextBox) As String
objeto de HTML no tiene la posibilidad de rescatar este
19
Function BuscarPalabraCadena(Cadena
String) As String
atributo, entonces es necesario recogerlo a mano.
As Busca una palabra dentro de una cadena y retorna nulo si no
la encuentra o la cadena en sí si la búsqueda es exitosa.
Módulo ts
Módulo de Visual Basic en el cual se escriben los procedimientos y funciones empleados
para controlar la búsqueda de archivos y consecución de atributos y origen.
Estas
funciones se emplean durante la comprobación de la integridad de los hipervínculos. De
esta manera básicamente se trata de conseguir la ruta a la cual pertenece el enlace, si éste
enlace existe, se muestra su ruta y un mensaje de “OK”, de lo contrario se muestra “No
Encontrado”.
Las funciones, variables y procedimientos presentes en este módulo fueron
escritos Frog Prince ([email protected]) y encontrados en la página web:
http://members.tripod.com/the__frog__prince/.
Nombre
Public Function fileOpenStructure
(ByVal sFilename As String)
OFSTRUCT
Public
Function
fileInformation
sFilename
As
String)
BY_HANDLE_FILE_INFORMATION
Public
Function
timeFileToDate
FILETIME) As Date
Descripción
Función pública que carga la estructura de un archivo y la
As almacena en una lista tipo type de Visual Basic
(ByVal Función pública en la cual se recoge la información de un
As archivo.
(ft
As Función pública la cual retorna la fecha de creación de un
archivo determinado, que recibe como parámetro una
variable de tipo FILETIME.
Public Function timeDateToFile (ByVal dDate Función pública la cual retorna la hora de creación de un
As Date) As FILETIME
archivo determinado, que recibe como parámetro una
variable de tipo FILETIME.
Public Function timeSysToDate
(st
As Función pública que es llamada por las funciones
SYSTEMTIME) As Date
timeFileToDate y timeDateToFile para retornar los valores
deseados por cada una de ellas.
Public
Function
timeDateToSys
(ByVal Función pública que es llamada por las funciones
dDateTime As Date) As SYSTEMTIME
timeFileToDate y timeDateToFile para retornar los valores
deseados por cada una de ellas.
Public Function fileExpandedName (ByVal Función pública que es llamada por las funciones
sFilename As String)
As String
timeFileToDate y timeDateToFile para retornar los el nombre
del archivo determinado en formato extendido o expandido.
Public Function sNT (ByVal sString As String) Función que retornar la posición de una cadena dentro de
As String
otra.
Public
Function
fileShortName
(ByVal Función pública la cual retorna el nombre de un archivo
sFilename As String) As String
determinado en formato corto.
Public Function fileAttributes (ByVal sFilename Función que asigna los atributos de un archivo a una
As String) As enumFileAttributes
estructura (type) de Visual Basic para manejo de dichos
atributos.
20
Public Function fileLength (ByVal sFilename
As String) As Long
Public Function sFilename (ByVal sFIle As
String,
ByVal
ePortions
As
enumFileNameParts) As String
Public Function fileRoot(ByVal sFilename As
String) As String
Public Function volumeInformation (ByVal
sDrive As String) As typeVolumeInformation
Función pública
determinado que
Función pública
determinado que
que
se le
que
se le
retorna la longitud
pasa como parámetro
retorna el nombre
pasa como parámetro
de un archivo
a esta función.
de un archivo
a esta función.
Función pública que retorna la raíz de un archivo
determinado que se le pasa como parámetro a esta función.
Función pública que almacena la información del disco o
partición en la cual se busca un archivo.
Módulo de Clase AyudaHTML
Módulo de Visual Basic en el cual se escriben las funciones y procedimientos empleados
para controlar la aparición de ventanas de ayuda a solicitud del usuario en los diferentes
formularios de toda la aplicación. Este módulo emplea llamadas a la API de Windows con
el fin de visualizar una ayuda tipo HTML creada en la aplicación HelpWorkShop de
Microsoft.
Módulo de Clase creado el 25 de Diciembre de 1998 para manejar ficheros de ayuda
HTML. Estos ficheros de ayuda (compilados) tienen extensión CHM. Las variables
funciones y procedimientos presentes en este módulo fueron escritos por Guillermo 'guille'
Som, 1998 <[email protected]>
Para poder usar esta clase es necesario que tener el control hhc.ocx registrado, este control
está incluido en el páquete Html Help Workshop de Microsoft y con Microsoft Windows
98. Además es necesario que tener Internet Explorer 4 o superior ya que usa la librería
dinámica Shdocvw.dll
21
Métodos y Propiedades de esta Clase
Nombre
Private Declare Function GetDlgCtrlID Lib
"user32" (ByVal hWnd As Long) As Long
Private Declare Function HtmlHelp Lib
"hhctrl.ocx"
Alias
"HtmlHelpA"
(ByVal
hWndCaller As Long, ByVal pszFile As String,
ByVal uCommand As HH_COMMAND, dwData
As Any) As Long
Public Function DisplayContext(Optional ByVal
TopicNum As Long = 0&) As Long
Public Function DisplayTopic(Optional ByVal
TopicName As String = "") As Long
Public Function PopUp(ByVal Text As String)
As Long
Public Function DisplaySearch() As Long
Public Function DisplayTOC() As Long
Public Function DisplayIndex(Optional ByVal
sKeyWord As String = "") As Long
Private Function SoloCHM() As String
Public
Function
HelpContextPop(Optional
ByVal elControl As Control) As Long
Public Function HelpContext(Optional ByVal
elControl
As
Control,
Optional ByVal laVentana As String = "") As
Long
Descripción
Función de la API de Windows que recoge el identificador de
un Caja de Dialogo Típica de Windows.
Función de la API de Windows que retorna una entero largo
asociado al archivo HTMLHelp para diligenciar las
visualización del archivo de ayuda compilado que se le pase
como parámetro a la función.
Función Pública para mostrar el tópico de ayuda
determinado, si no se indica se mostrará el tópico por
defecto.
Función Pública empleada para mostrar el tópico de ayuda, si
no se indica el valor de TopicName, se mostrará el tópico por
defecto. TopicName deberá usarse como suele hacerse con
los links normales:
nombrePágina.htm#NombreMarcador o nombrePagina.htm
Función Pública empleada para mostrar una ventana PopUp
con el texto indicado
Función Pública empleada para mostrar pestaña Search
(Búsqueda)
Función pública empleada para mostrar la tabla de
contenidos (TOC)
Función pública empleada para mostrar la pestaña Index, si
se especifica una palabra clave, se mostrará esa clave.
Devuelve sólo el fichero base de la ayuda. Se debe quitar el
::/xxx que contenga.
Si se pulsa la tecla F1 se pasa el control en el que se ha
pulsado. Se Deberá tener asignado el valor del
HelpContextID esta función es para usar con VB5 o con un
formulario en el que no se ha especificado el WhatThisHelp.
El Parámetro elControl es el control en el que se ha pulsado
F1 si no se especifica, se tomará el control activo. Ese
control deberá tener asignado el valor del HelpContextID
laVentana será la ventana que se usará para mostrar la
ayuda.
Módulo de Clase clsFile
Módulo de Clase para el manejo de ficheros.
Public
Public
Public
Public
Public
Public
Public
Public
Public
Property
Property
Property
Property
Property
Property
Property
Property
Property
Nombre
Get bFixedDisk() As Bolean
Get dCreated() As Date
Get dLastAccessed() As Date
Get sExpandedName() As String
Get sShortName() As String
Let sFilename(ByVal vData As String)
Get sFilename() As String
Let eAttributes(ByVal vData As enumFileAttributes)
Get eAttributes() As enumFileAttributes
22
Public
Public
Public
Public
Public
Public
Public
Public
Public
Public
Public
Public
Public
Public
Public
Property
Property
Property
Property
Property
Property
Property
Property
Property
Property
Property
Property
Property
Property
Property
Get
Get
Get
Get
Get
Get
Get
Get
Get
Get
Get
Get
Get
Get
Get
lSize() As Long
dLastModified() As Date
sName() As String
sNameAndExtension() As String
sExtension() As String
sPath() As String
sDriveLetter() As String
sPathRoot() As String
bNetworkPath() As Bolean
bUNCServerShare() As Bolean
bUNCServer() As Bolean
bUNC() As Bolean
eVolumeType() As enumDriveTypes
lVolumeSerialNo() As Long
sVolumeName() As String
Módulo de Clase colFiles
Módulo de Clase para el manejo de ficheros.
Nombre
Public Function LoadFiles(ByVal sFileSpec As String, Optional ByVal bRecursive As Boolean = False,
Optional ByVal pb) As Long
Public Function Clear()
Public Function Add(ByVal sFilename As String, Optional sKey As String) As clsFile
Public Property Get Item(vntIndexKey As Variant) As clsFile
Public Property Get Count() As Long
Public Sub Remove(vntIndexKey As Variant)
Public Property Get NewEnum() As clsFile
Private Sub Class_Initialize()
Private Sub Class_Terminate()
DESCRIPCIÓN DE FORMULARIOS
Formulario CargandoMapas.frm
Formulario sencillo que se muestra al momento de cargar los mapas presentes en un área de
mapas asociada a un Objeto Imagen de HTML.
23
Formulario FrmAbriendoPagina.frm
Formulario sencillo que se muestra al momento invocar la función de apertura de una
página web.
Formulario FrmAcercaDe.frm
Formulario donde se muestra la información de Acerca de Fácil Web 1.0.
Nombre
Private Sub Cerrar_Click()
Private Sub Form_Activate()
Private Sub Form_Load()
Descripción
Evento Clic del botón Cerrar para descargar el formulario.
Evento de activación del formulario.
Evento al Cargar el Formulario.
Formulario FRMCorreoElectronico.frm
Formulario asociado con la creación de un enlace de correo electrónico, en el cual se
solicita la entrada de un correo válido.
Nombre
Private Sub Aceptar_Click()
Private Sub Ayuda_Click()
Private Sub Cancelar_Click()
Private Sub Form_Load()
Private Sub Text1_KeyPress(KeyAscii
Integer)
Descripción
Evento Click del Botón Aceptar que valida si la dirección es
válida se procede a asignársela al combo que contiene la
dirección del hipervínculo en el formulario de hipervínculos,
desde donde se solicitó colocar correo electrónico.
Evento Click del Botón Ayuda para mostrar una ventana
PopUp.
Evento Click del Botón Cancelar para cerrar el formulario en
caso de desistir del formulario de Correo Electrónico.
Evento Load del Formulario de Correo Electrónico.
As Evento KeyPress de la Caja de Texto donde se ingresa la
dirección de correo electrónico para validar la tecla Enter
24
Formulario FRMEstiloObjetos.frm
Formulario empleado para asignar estilos a los diferentes objetos de HTML. En éste el
usuario puede cambiar los estilos y colores de los bordes o colocar una imagen de fondo un
objeto determinado.
La Mayoría de los Objetos de HTML tienen los mismos atributos en cuanto a su estilo, es
por ello que se diseño un sólo formulario para asignar el estilo cualquier objeto en
particular.
Nombre
Private Sub CmdAceptar_Click()
Private Sub CmdAyuda_Click()
Private Sub CmdCancelar_Click()
Private Sub Command1_Click()
Descripción
Evento Click del Botón Aceptar, en el cual se realiza la
asignación de los atributos del estilo al objeto al cual se le
desea cambiar dicho estilo. Estos estilos se definen como
formato y color del borde superior, formato y color del
borde inferior, formato y color del borde derecho, formato y
color del borde izquierdo, imagen de fondo, tipo de fuente,
tamaño de fuente, color de fondo y color del texto.
Evento click del botón de comando ayuda para desplegar la
ayuda correspondiente a este formulario.
Evento click del botón de comando Cancelar, para cerrar el
formulario sin efectuar cambios al estilo del objeto
seleccionado.
Evento click del botón de comando Command1 donde se
escoge un color para el borde izquierdo y se muestra en una
Etiqueta con bajo relieve para indicar al usuario el color que
se escogió.
escoge un color para el borde derecho y se muestra en una
se escogió.
escoge un color para el borde superior y se muestra en una
se escogió.
escoge un color para el borde inferior y se muestra en una
se escogió.
hace un llamado a un cuadro de dialogo para escoger la
imagen de fondo para el objeto
escoge un color para el fondo del objeto y se muestra en una
se escogió.
25
escoge un color para el Texto del objeto y se muestra en una
se escogió.
Function ColocarColorLabel(Caja As Label) As Función privada que se encarga de asignar el color escogido
Long
por el usuario a una etiqueta que sirve para visualizar el
color que dicho usuario escogió.
Function
RecogerEstiloBordeObjeto Función privada donde se recogen atributos adicionales para
(CodigoEstilo As String, Cadena As String) As el objeto en cuestión.
String
Sub
ProcesarColorBordeEspecifico Procedimiento privado donde se acomoda el color de una
(CadenaProcesar As String, Etiqueta As Label) etiqueta para que sea válido para asignárselo a un objeto de
HTML.
Formulario FRMFormulario
En este formulario se recogen y modifican los atributos de un objeto formulario de HTML.
Nombre
Descripción
Evento click del botón de comando Aceptar donde se le
asignan los atributos a el objeto Formulario de HTML y se
libera de memoria dicho objeto.
Evento click del botón de comando Ayuda para desplegar el
cuadro de ayuda correspondiente a este formulario.
Evento click del botón de comando Command1 donde el
usuario puede escoger la Acción que se ejecutará una vez se
realice una actualización dentro del formulario.
Formulario FrmGuardandoPagina
Este formulario se muestra cuando se ejecuta el comando Guardar Página. El formulario
aparece en el centro de la pantalla y muestra un mensaje de “Guardando Página, Espere un
Momento...” y se cierra cuando el sistema termina de guardar la página solicitada.
Formulario FRMInsertarLista
Formulario en el cual se crean o modifican los elementos de un cuadro de lista de HTML.
26
Nombre
Private Sub MostrarCelda()
Private Sub SiguienteCelda()
Private Sub AsignarCelda()
Private Sub CabeceraGrid()
Private Sub BorrarFilas()
Private Sub OcultarControles()
Descripción
Evento click del botón de comando Aceptar donde se Crean o
modifican los elementos de un Objeto cuadro de lista de
HTML.
Evento click del botón de comando Ayuda en la cual se
despliega la ventana de ayuda del formulario de propiedades
de lista.
Procedimiento privado donde se muestra la caja de Texto
que se acomoda encima de la celda del grid, para editar la
respectiva casilla o sea escribir datos sobre ella simulando
una hoja de cálculo.
Procedimiento privado donde se pasa a la siguiente celda al
dar enter sobre la caja que está actuando de edición de
casilla.
Procedimiento privado donde se asigna en sí el valor escrito
sobre la caja de texto cuando se hace doble click o se
presiona una tecla sobre otra celda.
Procedimiento privado donde se coloca la cabecera del Grid
Procedimiento privado donde se llama elimina la fila escogida
al dar suprimir sobre ella.
Procedimiento privado empleado para ocultar la caja de
texto de edición de celda y el cuadro combinado.
Formulario FRMPropiedadesCirculo
Formulario en el cual se muestran las propiedades de un círculo cuando se diseña un mapa
de área con dicha figura. Este formulario es llamando a dar click derecho sobre la figura
círculo.
Nombre
Private Sub CmdModificar_Click()
Descripción
Evento click del botón de comando Aceptar donde se
modifican las propiedades del área de mapas para la figura
Círculo.
de lista.
Evento click del botón de comando modificar donde se
habilitan las cajas para modificar la información.
Formulario FRMPropiedadesCuadrado
Formulario en el cual se muestran las propiedades de un cuadrado cuando se diseña un
mapa de área con dicha figura. Este formulario es llamando a dar click derecho sobre la
figura cuadrado.
27
Nombre
Descripción
Cuadrado.
de lista.
Formulario FRMPropiedadesPolígono
Formulario en el cual se muestran las propiedades de un Polígono cuando se diseña un
mapa de área con dicha figura. Este formulario es llamando a dar click derecho sobre la
figura Polígono.
Nombre
Descripción
Polígono.
de lista.
Formulario FRMPropiedadesImagen
Este formulario permite establecer y modificar las propiedades de una imagen, como son:
ruta de la imagen, tamaño del borde, alto, ancho y alineación.
Nombre
Descripción
asignan las propiedades escogidas al objeto imagen de
HTML.
de lista.
Evento click del botón de comando Command1 donde el
usuario puede examinar para cambiar la imagen.
28
Formulario FRMPropiedadesOption
Este formulario permite establecer y modificar las propiedades del objeto botón de opción
de HTML.
Nombre
Descripción
Evento click del botón de comando Aceptar donde se Asignan
las propiedades escogidas a lo objeto Botón de Opción de
HTML de acuerdo a los valores representados en las cajas de
texto del formulario
de lista.
Evento click del botón de comando Cancelar donde se cierra
el formulario cuando no se quiere realizar la acción.
Formulario FRMPropiedadesCuadroTexto
Este formulario permite establecer y modificar las propiedades del objeto Cuadro de Texto
de HTML.
Nombre
Descripción
Evento click del botón de comando Aceptar donde se asigna
los atributos Escogidos al Objeto cuadro de Texto de HTML
si no hay nada en la caja de texto que contiene el valor de
la Cuadro de Texto de HTML, entonces se asigna a el objeto
que lo representa un valor nulo, de lo contrario se le asigna
el texto de dicha caja.
de lista.
Formulario FRMPropiedadesAreaTexto
Este formulario permite establecer y modificar las propiedades del objeto Area de Texto de
HTML.
29
Nombre
Descripción
Evento click del botón de comando Aceptar donde se asignan
los atributos al Objeto Area de Texto de HTML de acuerdo a
los valores escogidos por el usuario que están representados
en la cajas de texto.
de lista.
Formulario Hypervinculos
Este formulario es llamado al momento de crear un hipervínculo. Si el usuario se encuentra
trabajando una página de marcos, entonces en este formulario aparecerán rectángulos
indicando el marco al que quiere hacer el enlace.
Nombre
Descripción
Private Sub Arbol_NodeClick(ByVal Node As si se hace click sobre un elemento del árbol se muestra en el
MSComctlLib.Node)
combo que representa la dirección del hipervínculo la
información de dicho elemento del árbol. Además se tiene
en cuenta que si el elemento es un hijo o es un padre.
Private Sub CargarArchivo_Click()
Evento click del botón de comando CargarArchivo que es
empleado para cargar la dirección de un archivo con el fin de
realizar un enlace a dicho archivo.
Private Sub Aceptar_Click()
Evento click del botón de comando Aceptar donde se asigna
al hipervínculo los atributos de acuerdo a los valores
presentes en la lista desplegable que representa la Dirección
del hipervínculo, el marco de destino y el texto alternativo '
si es un hipervínculo de un área de mapas de una imagen se
asignan los valores de la dirección del hipervínculo a una
variable global que irá al href de dicha área, los mismo
ocurre con el texto alternativo y en algunos casos con el
marco de destino en caso que el área de mapas se encuentre
en una página de marcos.
Private Sub AbrirHyper()
Procedimiento privado en el cual se carga una página web
que es el enlace, además se buscan los marcadores de dicha
página para mostrarlos en el árbol de nodos.
Formulario InsertarArchivoImagen
Este formulario permite insertar un archivo de imagen en la página activa. En el se escoge
la ruta y la alineación de dicha imagen, además cuenta con una vista previa.
30
Nombre
Private Sub CmdInsertar_Click()
Descripción
Evento click del botón de comando Insertar donde se inserta
la imagen seleccionada en la página de usuario.
de lista.
Formulario InsertarCheckBox
Este formulario permite establecer y modificar las propiedades del objeto botón de chequeo
de HTML.
Nombre
Descripción
Evento click del botón de comando Aceptar donde se Asignan
las propiedades escogidas a lo objeto Botón de chequeo de
HTML de acuerdo a los valores representados en las cajas de
texto del formulario
de lista.
Formulario InsertarFondo
Este formulario permite insertar como fondo un archivo de imagen en la página activa. En
el se escoge la ruta y la alineación de dicha imagen, además cuenta con una vista previa.
Este formulario es similar al de insertar imagen.
Nombre
Private Sub CmdInsertar_Click()
Descripción
Evento click del botón de comando Insertar donde se inserta
la imagen seleccionada en la página de usuario.
de lista.
31
Formulario InsertarLinea
Este formulario de Visual Basic permite insertar una línea horizontal en la página web
activa. En el formulario se especifican atributos como ancho, alto, alineación y color.
Nombre
Descripción
Evento click del botón de comando Aceptar donde se inserta
una línea horizontal en la página web activa.
de lista.
Formulario InsertarMarquesina
Este formulario permite insertar una línea horizontal en la página web activa. En el
formulario se especifican atributos como ancho, alto, alineación y color.
Nombre
Descripción
Evento click del botón de comando Aceptar donde se inserta
una línea horizontal en la página web activa.
de lista.
FRMFormulario. Se muestra cuando se solicita las propiedades de un objeto Formulario de
HTML.
FrmGuardandoPaginaFormulario sencillo que se muestra al momento de cargar los mapas
presentes en un área de mapas asociada a un Objeto Imagen de HTML.
32
ANEXO B
33
MANUAL DE USUARIO
¿QUE ES FACIL WEB?
El editor de paginas web Fácil Web 1.0 es una herramienta indispensable para aquellas
personas que quieran entrar en el mundo del diseño de paginas web y no tengan un
conocimiento previo en código HTML.
El usuario escribe e inserta lo que considere necesario para su documento y Fácil Web
se encarga de traducir el contenido grafico y de texto en código HTML.
El usuario del programa solo debe preocuparse por la estética en los acabados de su
pagina y en la calidad del contenido, con solo saber manejar el puntero del ratón un
usuario normal ya esta en condiciones de crear paginas web.
De lo único que debe preocuparse con Fácil Web es de darle un contenido exótico a sus
paginas, pero si eso no es problema y además conoce y entiende el código HTML tiene
el programa ideal, dado que Fácil Web permite generar el código HTML creado por el y
mostrar los resultados en el área de diseño.
Con fácil Web combina toda la potencia y variedad del código HTML con la facilidad de
uso de un procesador de texto.
34
¿QUÉ HACE FACIL WEB?
Fácil Web permite crear paginas web de manera sencilla con solo insertar elementos y escribir
texto, el programa genera una etiqueta en lenguaje HTML por cada acción que el usuario realice
en el documento. El resultado es una pagina htm lista para ser vista en el navegador.
Fácil web comprende las funciones básicas de un procesador de texto como son:
•
Copiar, Cortar y Pegar.
•
Seleccionar Todo.
•
Alinear (Derecha, Centro e Izquierda)
•
Listas Numeradas y Listas con viñetas.
•
Negrilla, Cursiva y Subrayado
•
Aumentar y Disminuir el tamaño del texto.
•
Deshacer y Rehacer ultima acción.
•
Color, Tamaño, Tipo y Estilo de texto.
•
Buscar Texto.
Implementar los procedimientos que permitan al usuario crear nuevas páginas, abrir las
páginas existentes.
Imprimir el contenido de una página, ver código correspondiente en lenguaje HTML, vista
previa de la página, movimientos entre páginas abiertas (atrás - adelante).
Facilitar al usuario la inserción de imágenes (gif animados, fondos, mapas de bits, jpg, entre
otros formatos), tablas, texto, líneas horizontales, Marquesina desplazándose.
Manejar Hipervínculos de texto e imágenes, en el documento y entre la página, además el
manejo de marcadores ó anclas. Verificación de la integridad de los hipervínculos.
Permitir en las páginas creadas por el usuario la opción para recibir correo electrónico y
opciones de FTP.
Trabajo con Formularios Web.
Inserción de elementos de formulario combos, listas desplegables, radio botones, etc.
35
INSTALACIÓN
REQUERIMIENTOS
Disco Duro: La aplicación ocupa un poco menos de 4 MB de espacio en disco.
Memoria RAM: Para funcionamiento optimo el programa necesita una memoria RAM mínima de
32 MB.
Procesador: Es aconsejable dadas las características de coloreo de código HTML tener como
mínimo un procesador de 200 Mhz.
Sistema operativo: dado que la aplicación fue realizada en un lenguaje de programación
visual, se requiere como mínimo de Windows 95, dado el uso que en esta aplicación se hace de
algunas librerías de Windows 9x.
El equipo donde se instale el programa debe tener Internet Explorer 5.0 o superior.
PROCESO DE INSTALACIÓN
Introduzca el Disco Compacto en la unidad de CD, CD-R o DVD que posea su computadora.
Abra el Explorador de Windows y seleccione la unidad donde se encuentra el Disco Compacto,
sobre el icono SETUP haga doble clic.
36
También puede Instalar la aplicación haciendo clic en Inicio / Ejecutar, se despliega la ventana
Ejecutar, con el botón Examinar seleccione la unidad donde se encuentra el Disco Compacto y
seleccione SETUP. Presionando el botón Aceptar se da comienzo a la instalación de Fácil Web.
Empieza a copiar los archivos necesarios para que el programa de instalación trabaje
adecuadamente.
Después de copiar los ocho archivos que necesita el instalador, muestra el asistente de
instalación, informándole que para llevar acabo la instalación de Fácil Web debe tener todas las
aplicaciones cerradas, de lo contrario no podrá adicionar y actualizar los archivos compartidos.
37
Una vez presionado el botón Aceptar, aparece una ventana donde se especifica si lo desea una
ruta de ubicación diferente a la que el instalador crea por defecto, o continuar con la Instalación.
El botón Cambiar directorio, puede especificar una ruta diferente donde residirá la aplicación.
Presionando el botón que contiene la imagen dará inicio ala instalación.
38
Esta ventana muestra como se agrupara la aplicación en archivos de programa. Haciendo clic en
Continuar sigue la Instalación.
Esta ventana muestra los archivos que se van copiando y el progreso que va teniendo la
instalación.
39
Esta ventana solo se despliega si el archivo que va ha instalar es mas antiguo que el que hay en
el sistema, lo recomendable es conservar el archivo, seleccione Si.
Finalizando la instalación es probable y dependiendo de la configuración en software del equipo,
que aparezca un error al tratar de actualizar el archivo MSHTML.TLB
si aparece esta ventana haga clic en omitir para terminar la instalación.
Luego de esto el asistente le comunica que ha finalizado la instalación de Fácil Web
satisfactoriamente.
40
Si durante la instalación presiona los botones Cancelar o Salir de las ventanas que se muestran
durante este proceso se interrumpirá la transferencia de archivos y será instalada la aplicación.
Para ejecutar la aplicación haga clic en Inicio / Archivos de Programas / Fácil Web 1.0
Universidad Francisco de Paula Santander / Fácil Web 1.0.
1. VENTANA PRINCIPAL
La ventana Principal consta de tres barras acopladas e integradas con un Área de Trabajo en la
cual se realizan las funciones básicas de este editor de paginas. Además de ello se encuentra en
la parte inferior una barra de estado.
41
Barra de Titulo
Barra de Menú
Barra de Formato
Barra de Herramientas
Barra de Programación
Área de Trabajo
Pestañas
Barra de Estado
1.1 BARRA DE TITULO
En esta barra se visualiza el nombre de la aplicación seguido del nombre del documento (Pagina
Web) que esta activo en el momento. Una vez creada una nueva pagina, en la barra de títulos se
expresa como Sin Titulo y un consecutivo de pagina de acuerdo a las creadas por el usuario.
Si el documento abierto en un momento dado es un Marco de paginas, la barra de títulos
visualizara el nombre del marco principal seguido del nombre de la pagina de marcos activa. Por
ultimo si no hay ningún elemento cargado solo aparecerá el nombre de la aplicación.
42
2. BARRA DE MENÚ
Esta barra posee siete menús desplegables, que contienen las funciones propias del editor.
Dichos menús son los siguientes: menú Archivo, menú Edición, menú Insertar, menú Formato,
menú Tabla, menú Marco y el menú Ayuda.
2.1 El MENÚ ARCHIVO.
Este menú posee nueve opciones principales distribuidas de la siguiente forma: Nuevo, Abrir,
Cerrar, Guardar, Guardar Como, Vista Previa, Imprimir, Propiedades de la Pagina, Salir.
2.1.1 Nuevo. La Opción Nuevo despliega una ventana donde podrá elegir el tipo de documento
que desea crear. También puede llamar esta ventana haciendo Ctrl+N.
43
Si se presiona el botón Aceptar y esta escogida la opción Normal se creará una nueva página en
“modo Normal”, de lo contrario si se escoge alguno de los elementos de la lista asociada a la
opción Página de Marcos y se presiona el botón aceptar, se creará un nuevo documento del tipo
seleccionado en la lista.
Contenido. Crea un Marco con dos Páginas de Marco distribuidos de la siguiente forma:
Como se puede observar existen tres botones, Nueva Pagina, Abrir Pagina, Ayuda que se
encuentran ubicados en ambos lados de la Pagina de Marcos. El botón Nueva Pagina crea un
nuevo documento normal listo para empezar a trabajar. El botón Abrir Pagina despliega una
ventana donde se escoge la pagina web que se quiere cargar en ese marco.
Titulo. Crea dos paginas divididas por el medio en sentido horizontal, con un separador que
atraviesa la ventana de izquierda a derecha.
44
Aquí también se presentan dos botones, cuyo funcionamiento es el mismo que los presentes en
el Marco tipo Contenido.
Titulo Contenido. Este tipo de Marco presenta una división horizontal, en la parte superior una
pagina Normal y en la parte inferior un Marco tipo Contenido.
45
Este tipo de marco presenta los mismo botones de los dos marcos anteriores, con las mismas
funciones. Si solo desea una pagina tipo Normal, también puede hacer Clic sobre el icono
de
la Barra de Formato.
2.1.2 Abrir.
Si Selecciona la opción Abrir o presiona las teclas Ctrl+A.
Despliega una ventana en la cual el usuario podrá seleccionar un pagina que desea editar en el
área de trabajo del programa.
46
En esta ventana puede seleccionar Drive (Unidad) y el Directorio, escoger o digitar el nombre del
archivo y por ultimo pulsar el botón Abrir. También puede llegara esta ventana haciendo Clic
sobre el icono
de la Barra de Formato
2.1.3 Cerrar.
Si selecciona la opción Cerrar.
Si se han hecho cambios antes de cerrar y aun no se han guardado, aparecerá una caja de
dialogo.
En la caja se le comunica que si lo quiere puede guardar los cambios (Si) o si no lo desea (No) la
pagina actual se cerrara y todo lo que halla en ella se borra o puede cancelar la orden y volver a
la pagina actual (Cancelar).
47
2.1.4 Guardar.
Seleccione Guardar o presione las tecla Ctrl+G.
Si la pagina es guardada por primera vez seleccione el drive (Unidad) y el Directorio, digite el
nombre del archivo con el cual desea identificar la pagina web, pulse el botón Guardar.
También puede llegar a esta ventana haciendo Clic sobre el icono
de la Barra de Formato. Si
tiene una pagina editada, que ya esta guardada haga los cambios a la pagina y seleccione la
opción Guardar.
48
2.1.5 Guardar Como.
Si desea guardar un documento con otra extensión o con nuevo nombre. Seleccione Guardar
Como...
Si quiere grabar una pagina con nuevo nombre debe seleccionar un Drive (Unidad) y el
Directorio, Digitar el nuevo nombre y pulsar el botón Guardar.
Para grabar una pagina con otra extensión, escoja en Guardar como archivo de tipo el formato la
extensión TXT.
49
2.1.6 Vista Previa.
Si escoge Vista Previa.
Despliega la ventana del navegador con la pagina actual para que pueda observar como verán
los usuarios la pagina en Internet. También puede invocar al navegador haciendo Clic sobre el
botón
de la Barra de Formato.
2.1.7 Imprimir.
Para plasmar en el papel el contenido de la pagina puede hacerlo con la opción Imprimir.
También puede llamar la impresora presionando Ctrl+P.
50
El resultado es mostrar una ventana en pantalla con los atributos de la impresora, donde podrá
personalizar la forma de trabajo de esta con respecto a las paginas.
Para imprimir sin ver esta ventana es haciendo Clic sobre el icono
2.1.8 Propiedades de la Pagina.
Para darle un toque personal a la pagina, puede escoger Propiedades de la Pagina.
51
Otra manera de desplegar esta ventana es dando Clic derecho sobre el Área de Trabajo.
Despliega la siguiente ventana que permite adornar la pagina con características visuales
agradables al visitante de la pagina.
El primer campo Insertar Imagen de fondo especifica la ruta de la imagen de fondo
seleccionada, para seleccionar una imagen debe presionar el botón Examinar que despliega una
ventana del tipo abrir, la cual tiene la misma función explicada anteriormente. Para poder
insertar una imagen la caja de chequeo debe estar seleccionada habilitando el campo ruta de
imagen.
52
El campo de Color de Fondo, permite desplegar una ventana donde
se puede escoger un color que se quiera colocar como fondo de la
pagina.
El campo Color de Texto, permite desplegar una ventana donde se
puede escoger un color que se quiera colocar al texto de la pagina.
Presionando el botón
se despliega la paleta de colores, la
forma de insertar el Color consiste en seleccionar la casilla que contenga el color de preferencia
o definir un color personalizado, luego dar clic en el botón Aceptar de la misma ventana color
para que este sea asignado a la ventana que lo llamo.
El campo Hipervínculo, permite desplegar una ventana donde se puede escoger un color que se
quiera colocar a los enlaces presentes en la pagina.
El campo Hipervínculo Visitado, permite desplegar una ventana donde se puede escoger un
color que se quiera colocar a los enlaces que han sido ya visitados por los usuarios.
El campo Hipervínculo Activo, permite desplegar una ventana donde se puede escoger un
color que se quiera colocar al enlace cuando sea pulsado.
En Estilo de la Imagen de Fondo puede darle una apariencia especial al fondo de la pagina
que consiste en hacer que el fondo parezca estático cuando se mueva la barra de
desplazamiento, esto se da si se encuentra escogida Deslizante. Si esta seleccionada Ninguno
el fondo se desplazara en sincronía con las barras de desplazamiento.
El área Márgenes permite delimitar el espacio en que se comienza a ocupar el contenido de la
pagina. El campo Especifique Superior indica la cantidad de píxeles que se dejara a partir de
la parte superior de la Pagina. El campo Especifique Izquierdo indica la cantidad de píxeles
que se dejaran a partir de la parte izquierda de la Pagina.
53
2.1.9 Salir.
Si escoge la opción Salir.
Finaliza el uso del editor, si todavía no ha guardado los cambios hechos, el programa despliega
una ventana en donde debe tomar la decisión si guarda o no el trabajo realizado.
2.2 EL MENÚ EDICIÓN. Este menú posee nueve opciones que se encuentran distribuidas de la
siguiente forma; Deshacer, Rehacer, Copiar, Cortar, Pegar, Seleccionar Todo, Definir Marcador,
Hipervínculo, Desenlazar Hipervínculo.
54
2.2.1 Deshacer y Rehacer.
Haciendo Clic sobre Deshacer
Haciendo clic sobre Rehacer
Esta opción elimina la ultima acción
Restablece la ultima acción que se acaba
realizada sobre el área de trabajo del
de eliminar o en otras palabras devuelve a
Editor. Otra forma de realizar esta misma
su estado original la pagina entes de
función es haciendo clic sobre
presionar el botón Deshacer. Otra forma de
el botón
realizar esta misma función es haciendo
de la Barra de formato
o ejecutando el comando Ctrl.. + Z.
Clic sobre el icono
de la Barra de
Formato.
2.2.2 Copiar, Cortar y Pegar.
Después de haber
Después de haber Cortado o
Después de haber
seleccionado algún elemento
Copiado algún elemento o
seleccionado algún elemento
o grupo de elementos del
grupo de elementos del
o grupo de elementos del
área de trabajo, puede hacer
programa o de otra
55
área de trabajo, puede hacer
Clic sobre la opción Cortar.
Clic sobre la opción Copiar.
aplicación, puede hacer Clic
en la opción Pegar.
Copiar, genera una
Cortar, desaparece de la
Pegar, duplica o coloca un
representación idéntica del
pantalla el elemento o grupo
elemento o grupo de
elemento original. Esta
de elementos seleccionado.
elementos anteriormente
misma función es realizada
Esta misma función es
cortados o copiados, en
con el icono
de la Barra de realizada con el icono
de
cualquier lugar donde se
Formato o con el comando
la Barra de Formato o con el
encuentre situado el Cursor.
Ctrl. + C. o
comando Ctrl. + X. o
Esta misma función es
Haciendo clic derecho en
Haciendo clic derecho en el
realizada con el icono
Área de Trabajo.
Área de Trabajo.
la Barra de Formato o con el
de
comando Ctrl. + V. o
Haciendo clic derecho en el
Área de Trabajo.
2.2.3 Seleccionar Todo.
Si se desea seleccionar todos los elementos presentes en una pagina, se realiza de dos formas
una de ellas es arrastrando el puntero del ratón sobre todos los elementos y la otra es con la
opción Seleccionar Todo.
56
Haciendo clic derecho sobre el Área de
Trabajo escogiendo en el menú contextual
Seleccionar Todo.
Al hacer Clic sobre este campo todos los elementos que se encuentran en la pagina quedan
seleccionados y pueden ser Copiados, Cortados, cambiar Color, Tamaño, etc. Con el comando
Ctrl. + E se puede realizar esta misma función.
2.2.4 Definir Marcador.
Para la creación de marcadores es seleccionando el texto y hacer clic en Definir Marcador...
57
Al hacer clic sobre Definir Marcador aparece la ventana Establecer Marcador.
El campo Nombre del Marcador aparece el texto que ha sido seleccionado en el área de trabajo,
este texto podrá ser remplazado por otro que el usuario quiera. Cada marcador tendrá un
nombre diferente con el cual será identificado.
El campo Lista de Marcadores se encuentran todos los nombres de los diferentes marcadores
que contiene la pagina activa.
Para eliminar un Marcador, hay que seleccionar el Marcador a borrar de la Lista de Marcadores,
cuyo nombre aparece en el campo Nombre del Marcador y presionando el botón Eliminar es
borrado de la pagina.
58
2.2.5 Hipervínculo.
Para crear un Enlace clic sobre Hipervínculo o presione Ctrl+D.
Se despliega la ventana Configuración de Enlaces, la cual permite crear los hipervínculos, dentro
del documento y a otros sitios web. También se llega a esta ventana a trabes del icono
Barra de Formato
de la
59
El campo Dirección URL establece la ubicación del enlace seleccionado. Si este enlace es un
marcador de otra pagina aparecerá la ruta mas el nombre del marcador.
El campo Paginas muestra los documentos HTML que son referenciadas por el o los enlaces con
sus respectivos marcadores, y es en donde se escoge el marcador o pagina a la cual se quiera
hacer referencia.
El campo Texto Alternativo, permite escribir un nombre o especificación del enlace para que en
el momento de pasar el puntero del ratón sobre el hipervínculo se despliegue un pequeño
mensaje sobre información o especificación que le dará al visitante una guía de lo que obtendrá
si pulsa el enlace.
El botón Enlace a una Pagina,
permite seleccionar la pagina hacia la cual se desea dirigir el
enlace. El botón Enlace a un archivo
permite escoger un archivo al cual se desea dirigir el
enlace. El botón Enlace a correo electrónico
permite al usuario introducir su correo
electrónico, para que los visitantes se comuniquen con él a trabes de correo electrónico.
Si se encuentra dentro de una pagina tipo Contenido, la ventana que se despliega posee unos
ligeros cambios.
60
El área Marco de Destino que aparece especifica que en cual de los dos marcos Izquierdo o
Derecho desea dirigir el hipervínculo. Haciendo clic en Izquierdo el llamado que hace el enlace se
ejecuta allí. Haciendo clic en Derecho el llamado que hace el enlace se ejecuta allí.
Si se encuentra dentro de una pagina tipo Titulo.
El área Marco de Destino que aparece especifica que en cual de los dos marcos Superior o
Inferior desea dirigir el hipervínculo. Haciendo clic en Superior el llamado que hace el enlace se
ejecuta allí. Haciendo clic en Inferior el llamado que hace el enlace se ejecuta allí.
Si se encuentra dentro de una pagina tipo Titulo Contenido.
El área Marco de Destino que aparece especifica que en cual de los dos marcos Titular o
Contenido o Principal desea dirigir el hipervínculo. Haciendo clic en Titular el llamado que hace el
61
enlace se ejecuta allí. Haciendo clic en Contenido el llamado que hace el enlace se ejecuta allí.
Haciendo clic en Principal el llamado que hace el enlace se ejecuta allí.
Al hacer clic derecho sobre el Hipervínculo se despliega un menú contextual y se selecciona
Propiedades de Hipervínculo.
Propiedades de Hipervínculo. Despliega la siguiente ventana Propiedades Hipervínculo.
El campo Dirección URL contiene la ruta hacia la cual esta dirigido el enlace. El botón Examinar
despliega una ventana d tipo Abrir antes explicada en este documento.
Tipo de Enlace muestra que clase de enlace es, a una pagina Web o a un archivo etc.
El campo Nombre especifica la identificación que le quiera dar al enlace.
2.2.6 Desenlazar Hipervínculo.
Para quitar un enlace ya creado solo basta con situar el cursor encima del enlace y hacer clic en
Desenlazar Hipervínculo.
62
Al hacer clic el texto que tenia el enlace vuelve a su forma y color normal.
2.2.7 Buscar Texto.
Permite encontrar palabras dentro de la pagina. Esta opción despliega la ventana Buscar.
En el campo Buscar digite la palabra que desea localizar dentro del documento.
El botón Buscar Siguiente, cada vez que es presionado efectúa nuevamente la localización de la
palabra a partir de la ubicación del cursor en el documento y teniendo en cuenta la elección que
este activa en el área dirección. Arriba comienza la búsqueda donde este ubicado el cursor hacia
la parte de arriba del documento. Abajo
comienza la búsqueda donde este ubicado el cursor
hacia la parte de abajo del documento.
El cuadro Palabra completa especifica la búsqueda a una cadena de texto idéntica a la que esta
en el campo Buscar. El cuadro Mayúsculas / minúsculas, restringe la búsqueda teniendo en
cuenta los caracteres que posean estas dos características.
63
2.2.8 Verificar Integridad de los Hipervínculos.
Para saber si los enlaces que ha creado en su pagina están bien dirigidos o si desea saber si
existe el vinculo que ha creado haga clic en Verificar Integridad de los Hipervínculos.
Una vez escogida esta opción se muestra la siguiente ventana, con los enlaces que tiene la
pagina actualmente abierta.
El campo Hipervínculo muestra el texto que esta subrayado en el área de trabajo y que contiene
el enlace.
64
El campo href muestra la ruta hacia la cual va dirigido el enlace del texto que se encuentra en el
campo Hipervínculo.
El campo Tipo muestra la clase de enlace que es.
Al hacer clic en el botón Iniciar se busca la ruta en las unidades presentes en el computador esto
tarda uno segundos mientras encuentra todas las ubicaciones de todos los enlaces presentes en
la pagina.
El campo Estado muestra si la ruta fue encontrada o no, si encuentra la ubicación mostrara
Encontrado de lo contrario mostrara No Encontrado.
El campo Observaciones, muestra una sugerencia de Revisar Ruta si el estado es No Encontrado
o de OK si el estado es Encontrado.
2.3
EL MENÚ INSERTAR.
Este menú esta compuesto de
alternativas que son; Tabla,
Imagen, Hipervínculo, Fondo, Línea Horizontal, Elemento de Formulario, Marquesina, Sonido de
fondo y Titulo de la Pagina, Video.
65
2.3.1 Tabla.
Al hacer Clic en Tabla.
La ventana Insertar Tabla permite al usuario incorporar tablas para sus documentos web, en las
cuales puede organizar su información, permitiendo la navegación por parte de los visitantes, el
mantenimiento y mejorando la apariencia de la pagina.
Otra forma de desplegar esta ventana es haciendo clic en el icono
de la barra de Formato.
En el área Tamaño especifica él numero de Filas y columnas que tendrá la tabla. En el campo
Filas, determina el número de filas de la tabla. En el campo Columnas, establece el número de
columnas de la tabla.
66
El campo Alineación especifica la orientación que puede tener la Tabla (Predeterminada,
Izquierda, Centro o Derecha). Esta configuración sólo es aplicable si el ancho de la Tabla es
inferior al ancho de la ventana del navegador. En Alineación puede especificar como se ubica la
tabla en el Área de Trabajo, puede colocar Izquierda (si quiere que la tabla se alinee a la
izquierda), Derecha (si quiere que la tabla se alinee a la Derecha), Centro (si quiere que la
tabla se alinee al centro) o dejarla como predeterminada que ubica la tabla con un alineación
izquierda.
En el campo Tamaño del Borde, especifica el ancho en píxeles del borde de la tabla. Puede tener
valores entre 0 (la tabla no tiene borde) y 100.
En el campo Espacio Entre Celdas, especifica el número de píxeles que debe haber entre las
celdas de la tabla. Puede tener valores entre 0 (la tabla no tiene Espacio entre celdas) y 100.
En el campo Relleno Celda, determina el número de píxeles que habrá entre el contenido de la
celda y el límite de ésta. Puede tener valores entre 0 (la tabla no tiene Relleno) y 100.
En el campo Ancho de Tabla, determina el ancho de la tabla como un número de píxeles o como
porcentaje de la ventana del navegador.
2.3.2 Imagen.
En un documento HTML se puede incluir cualquier imagen en alguno de los siguientes formatos
gráficos: GIF, JPEG ó XBM. El formato más extendido y practico es el GIF, todos los
navegadores gráficos de la Web soportan este formato, además existen gran cantidad de
programas de tratamiento de gráficos que permiten grabar los gráficos o convertir gráficos a
GIF. Este formato, así mismo, utiliza algoritmos de compresión que hacen que sus ficheros sean
de corto tamaño y apropiados para su transmisión por la red.
67
El formato GIF es más recomendado para iconos, gráficas... y el formato JPEG es más útil para
imágenes reales como paisajes, personas...
Al hacer Clic en Imagen.
La ventana Insertar Imagen, permite al usuario insertar cualquier tipo de imagen en el lugar del
documento que desee.
En el primer campo especifique la unidad donde se encuentra la imagen a insertar
68
En el segundo cuadro, Seleccione la carpeta donde reside la imagen.
Especifique el tipo de imagen(mapa de bits, gifs, jpg, etc).
En el tercer cuadro, seleccione la imagen a insertar.
Vista Previa; muestra la imagen seleccionada.
Alineación de Texto, Predefinido; Alinea el punto más bajo de la imagen con la base del
texto. Superior; Coloca el punto más alto de la imagen coincidiendo con más alto de la línea de
texto actual. Medio; Alinea el punto medio (en altura) de la imagen con la base del texto.
Inferior; Alinea el punto más bajo de la imagen con la base del texto. Izquierda; Coloca la
imagen a la izquierda del texto. Derecha; Coloca la imagen a la derecha del texto.
El campo Alineación del Texto muestra como quedara el texto con respecto a la imagen, el
usuario puede escoger cualquiera de la opciones allí presentes (Predefinido, Superior, Medio,
Inferior, Izquierda, Derecha) y observar la posición de texto para cada una.
Propiedades de Imagen. Luego de insertar una imagen, si se hace clic derecho sobre ella y
escoge la opción Propiedades de Imagen.
69
Se despliega la ventana Propiedades de Imagen.
El campo Origen de Imagen, indica la ruta donde se encuentra la imagen, para modificar la
imagen solo hay que presionar el botón Examinar y seleccionar la nueva imagen.
El campo Borde, proporciona el tamaño del borde de la imagen, si la imagen se encuentra
dentro de un hipervínculo el borde de esta será del color apropiado para indicarlo, en caso
contrario el borde será invisible.
El campo Alineación ya fue explicado en Insertar Imagen.
70
Si se quiere especificar el área que ocupara la imagen se debe seleccionar Especificar Tamaño
y luego dar las dimensiones. El atributo Alto determina el alto de la imagen a mostrar, se
especifica en puntos de la pantalla (píxeles). En caso de que la imagen sea mayor o menor se
escalará a este tamaño. El atributo Ancho indica el ancho al que se mostrará la imagen,
escalándola a este tamaño. También se expresará en píxeles. La imagen es insertada con la
dimensión que contiene el archivo.
2.3.3 Hipervínculo.
Al hacer Clic en Hipervínculo.
Esta opción hace lo mismo que menú Edición / Hipervínculo y el icono
Formato.
2.3.4 Fondo.
Al hacer clic en Fondo.
de la Barra de
71
La Ventana Insertar Fondo permite a los usuarios escoger una imagen para que sea el fondo de
su pagina
La forma de trabajar los diferentes campos es similar a como se utiliza en Insertar Imagen. El
primer campo Seleccione Unidad de Disco muestra las diferentes unidades
que posee la
maquina en que el usuario esta trabajando, para que seleccione la unidad donde se encuentra la
carpeta que contiene el archivo que se establecerá como fondo de la pagina web; la Carpeta se
establece en el campo Seleccione Carpeta y el Archivo en Seleccione Archivo.
72
El campo Establecer la Extensión de la Imagen, el usuario puede escoger el formato de la
imagen que desee colocar como fondo (gif, jpg, bmp, etc).
2.3.5 Línea Horizontal.
Al hacer Clic en Línea Horizontal.
Las Líneas Horizontales son útiles para organizar la información. Puede separar visualmente el
texto y los objetos de una página con una o más Líneas.
El campo Ancho establece que parte de la pagina ocupara la línea, ya sea este valor en
porcentaje o en píxeles.
73
El campo Alto establece el grosor de la línea según él numero de altura (de líneas del
documento) que se le coloque.
El campo Alineación especifica el sentido que puede tener la Línea (Izquierda, Centro o
Derecha). Esta configuración sólo es aplicable si el ancho de la regla es inferior al ancho de la
ventana del navegador. Para la Alineación Izquierda coloca la Línea comenzando en la parte
izquierda de la pagina, o en la parte derecha si la Alineación es Derecha. La Alineación Central
coloca la Línea en medio de la pagina.
El campo Línea Sólida especifica si la Línea debe trazarse con sombreado.
El campo Color de Línea establece el color de la línea. La forma de establecer el color de Línea es
la misma antes explicada en Propiedades de Pagina.
Haciendo clic derecho sobre la línea se despliega un menú contextual en el cual se elige
Propiedades de Línea, aparece una ventana similar a la de Insertar Línea con los mismos campos
y las mismas funciones.
2.3.6 Formulario.
Al hacer Clic en Formulario.
Otra manea de insertar un Formulario es haciendo clic sobre el icono
de la Barra de
Programación. Los Formularios son plantillas que permiten la creación de documentos HTML con
74
peticiones de datos. La principal utilidad de los formularios es la posibilidad de crear
cuestionarios, encuestas, páginas de comentarios o cualquier documento en la que se desee una
interacción por parte del usuario.
Se podrá definir distintos tipos de recuadros de dialogo, botones de selección, menús de
múltiples opciones. Para permitir obtener los datos de una manera más intuitiva.
Propiedades de Formulario. Haciendo Clic derecho sobre el área del Formulario y seleccionando
Propiedades de Formulario.
Los usuarios de una página no tienen más que escribir al autor de la misma para comentarle
cualquier cosa. Sin embargo, si desea que digan sólo unas cosas concretas (responder a alguna
pregunta, seleccionar entre varias opciones, etc) deberá utilizar formularios.
75
Como el resultado de cualquier formulario es una lista de variables y valores asignados a las
mismas, todos ellos tendrán un atributo en común: el nombre de su variable. El campo Nombre
contiene el identificador de un formulario.
El campo Método, Indica el protocolo usado para el envío de los datos. Con POST envía los datos
en la entrada estándar del programa que trata el formulario y con GET los datos se pasan por
parámetro, en la línea de comandos, al programa. El usar uno o otro método vendrá
determinado por como son tratados los parámetros en el formulario en el (CGI-BIN). El método
de uso más normal será POST.
Es recomendable utilizar POST. En el caso de que estemos mandando el formulario a nuestra
dirección de correo electrónico es obligado usarlo.
El campo Acción, Indica el programa que se encargará de tratar los datos del formulario. Este
programa debe encontrarse en el servidor y estar escrito en algún lenguaje de programación. A
este programa se pasará como parámetros los datos introducidos en el formulario y retornará un
código HTML que se mostrará tras procesar el formulario. A este tipo de programas se les llama
cgi-bin.
Los CGI-BIN son programas que se ejecutan en el servidor, pueden servir para tratar
información, como pasarela con una aplicación o base de datos o para generar documentos
HTML de forma automática.
76
Estos programas pueden ser escritos en cualquier tipo de lenguaje de programación y son
ejecutados en el servidor cuando se realiza su referencia. Algo importante es que el programa
debe ser ejecutable en el servidor. Los lenguajes más comunes para escribir estos programas
son el lenguaje perl, C ó bien un script.
Algo importante es que los cgi-bin deben tener una extensión especial .cgi, o bien, encontrarse
en un directorio especial llamado cgi-bin. Cuando se referencia en una pagina HTML, cualquier
fichero con la extensión cgi, en el servidor se ejecutará este programa y la salida se enviará al
cliente.
2.3.7. Elementos de Formulario.
Los elementos de Formulario son todos aquellos elemento que permiten introducir datos en un
formulario por parte del usuario. Estos elementos para que cumplan su función deben estar
contenidos dentro de la etiquetas
y
vistas en el ítem Formulario.
2.3.7.1 Botón. Al hacer clic en Elemento de Formulario / Botón.
77
El botón Enviar
se usa para enviar los datos del formulario, al pulsar el usuario este
botón, se acaba la introducción del formulario y pasa el control al programa indicado en ACTION.
En todo formulario debe existir al menos un botón de Enviar. También se
puede incluir este botón por la opción de la Barra de Programación.
El botón Restablecer.
todos
los
elementos
Este botón se usa para volver a los valores por defecto
del
formulario,
borrando
todos
los
datos
introducidos por el usuario. También se puede incluir este botón por la
opción de la Barra de Programación.
El botón Normal.
Este botón no hace ninguna función predeterminada,
ejecuta solo acción vinculada con el formulario. También se puede
insertar a trabes de la opción de la Barra de Programación.
Propiedades Botón de Comando. Para cambiar los atributos de cada botón se hace clic derecho
sobre el botón y se selecciona Propiedades Botón de Comando.
Esta opción despliega la vetan de Propiedades de Botón.
78
El atributo Nombre del Botón especifica el nombre de la variable que se define. Este nombre
será pasado al programa que trata el formulario junto con el valor que le asigno el usuario del
formulario.
El atributo Etiqueta suele especificar el valor de inicialización, que será el valor por defecto.
También se Puede cambiar el texto que el navegador pone por defecto en esos botones
utilizando este parámetro.
2.3.7.2 Cuadro de Chequeo
Puede que necesite que el usuario sencillamente confirme o niegue algo. Lo podremos conseguir
por medio de controles de confirmación:
Para insertar un Cuadro de Chequeo.
Otra forma de insertar un cuadro de chequeo es haciendo clic sobre el icono
Programación
de la Barra de
79
El Cuadro de chequeo es un botón que puede presentar dos estados activado
o desactivado.
Propiedades del Botón de Chequeo. Al hacer clic derecho sobre la caja de texto se despliega un
menú contextual allí se selecciona Propiedades botón de Chequeo. Se despliega la siguiente
ventana.
Se requiere el atributo Nombre. Los valores que tomará la variable serán on ó off, dependiendo
de su estado. Si el botón estaba activado cuando se envían los datos del formulario se enviaran
el nombre de la variable y el valor que indique su estado. Si se incluye el botón que se
encuentra activado en la inicialización. Si se indica el atributo Valor, cuando se envían los datos
con el botón activado se mandará la variable con el valor indicado y en caso contrario no se
mandará ningún valor.
80
2.3.7.3 Botón de Opción. Para insertar este elemento se hace clic en Botón de Opción.
Otra manera de insertar un Botón de Opción es haciendo clic sobre el icono
de la Barra de
Programación.
El Botón de Opción se usa cuando la elección puede tomar un valor simple de una serie de
alternativas. En este caso se presentan unos valores opcionales de los que solo puede tomar un
valor. Para especificar cada uno de estos valores se incluirá una etiqueta de botón de opción
por cada una de las posibles alternativas.
Propiedades Botón de Opción. Al hacer Clic derecho sobre el botón de Opción y seleccionar
Propiedades de Botón de Opción.
Aparece la siguiente ventana Propiedades de Botón de Opción.
81
Cada una de las etiquetas Opción tendrá el mismos atributo Nombre, y con un distinto atributo
Valor que será el valor que tome si se selecciona esta opción.
Para inicializarlo se usa el atributo Estado Inicial que se indicará solo en la opción que se quiera
especificar por defecto. Opción Inactivo
tener este elemento.
2.3.7.4 Caja de Texto.
Al hacer clic en Caja de Texto.
o la opción Activo
son los estados que puede
82
Se
utiliza
Caja
de
Texto
/
Normal
para
la
entrada
de
cadenas
de
texto
corto,
como por ejemplo nombre de personas, números, fechas o diversos
datos que se puedan expresar en una línea de texto. Otra manera de insertar una Caja de Texto
/ Normal es haciendo clic sobre el botón Caja de Texto de la barra
de programación.
Se utiliza Caja de Texto / Password se muestra un asterisco en vez de los caracteres.
Solo se puede ver el número de caracteres, pero ningún valor. Se usa
para la introducción de claves de acceso (passwords) y datos que no deban ser vistos al
introducirlos. Otra manera de insertar una Caja de Texto /
Password es haciendo clic sobre el botón Caja de Texto de la barra
de programación.
Se utiliza Caja de Texto / Invisible. En este caso no se muestra
ningún
campo
para
la
entrada
de
datos
al
usuario,
pero el par variable valor especificado es
enviado junto con el formulario. Se suele usar para transmitir información de estado ó control ó
para enviar algún tipo de información que no debe ser variada en el formulario, pero sí debe ser
enviada junto a este.
83
Propiedades Cuadro de Texto.
Al hacer clic derecho sobre la Caja de Texto y seleccionar
Propiedades Cuadro de Texto.
Se despliega la siguiente ventana Propiedades del Cuadro de Texto.
El atributo Nombre indica el nombre de la variable que toma el valor de la entrada y Valor
especifica el valor de inicialización del campo. De todos los atributos solo será obligatorio
Nombre, siendo el resto opcionales.
84
El Numero de Caracteres de Ancho, es el tamaño de la ventana de introducción de texto, que
indica el tamaño de la ventana en caracteres. Aquí solo se define la parte visible, pero el usuario
podrá introducir más texto si lo desea.
2.3.7.5 Caja de Texto Multilínea. Al escoger la opción Caja de Texto Multilínea.
Permite la introducción de un texto que puede abarcar varias líneas,
introduciendo este en
forma de párrafo.
Al hacer clic derecho sobre la Caja de Texto Multilínea y seleccionar Propiedades Área de Texto.
También puede insertar una caja de Texto Multilínea haciendo clic en el icono
Programación.
de la Barra de
85
Propiedades de Texto Multilínea. Al hacer clic derecho sobre la caja de texto con
desplazamiento aparece el un menú contextual seleccione el ítem Propiedades de Texto
Multilínea.
El atributo Nombre indica el nombre de la variable que toma el valor de la entrada y Valor
especifica el valor de inicialización del campo.
El campo Numero de Caracteres de Ancho determina la cantidad de Columnas que ocupará la
caja de texto.
El campo Numero de líneas determina la cantidad de Filas que ocupará la caja de texto.
2.3.7.6 Lista desplegable.
Al hacer clic en Lista Desplegable.
86
Se Utiliza una Lista Desplegable
cuando el espacio sea muy reducido. Una
Lista Desplegable muestra una sola línea e incluye una flecha abajo en la que el usuario hace clic
para ver las pociones restantes de la Lista Desplegable. El usuario sólo puede seleccionar un
elemento de la Lista Desplegable una sola vez. Otra forma de insertar una Lista Desplegable es
haciendo clic sobre el icono
de la Barra de Programación.
2.3.7.7 Lista.
Al hacer clic en Lista.
Se Utiliza una lista cuando se desee controlar el número de opciones que se
muestran; cuando el número de opciones de la lista supere su alto en líneas,
aparecerá una barra de desplazamiento con la que el usuario podrá ver todas las opciones.
También puede permitir que el usuario seleccione varios elementos de una lista. Otra forma de
inserta una lista es haciendo clic sobre el icono
de la Barra de Programación.
Propiedades de Lista. Si hace clic derecho sobre cualquiera de los dos tipos de lista.
87
En los dos casos se despliega la ventana Insertar Lista.
El campo Nombre identifica el elemento lista dentro del formulario. El campo Texto Elección
permite insertar las diferentes alternativas que contendrá la lista y que serán vistas por el
usuario. El campo Selección determina el elemento de la lista que aparecerá por defecto
seleccionado en la pagina. El campo Valor especifica el nombre de la variable para esa
alternativa de la lista.
En Selección Múltiple, si se escoge Permitir se puede escoger varias opciones de la lista, de lo
contrario si se establece No Permitir solamente se podrá seleccionar una alternativa de la lista.
Esta característica es exclusiva del elemento Lista de Selección.
88
El campo Orden de Tabulación indica la secuencia en que va ser dado el enfoque en el
formulario.
Para desplazarse de un campo a otro en el momento de llenar los valores de la lista es haciendo
doble clic sobre el campo que se valla a utilizar.
Estilo de los Elementos de Formulario.
Una característica común a los elementos de programación (botones, Formularios, Listas, cajas
de texto, cuadros de chequeo, botón de opción), es darle un toque personal a la apariencia de la
pagina Web donde están incluidos. Haciendo clic derecho sobre cualquiera de los elementos de
programación.
En este caso aparece Estilo botón de Comando por que el elemento seleccionado fue un botón,
para cada elemento saldrá la palabra Estilo seguido del tipo de componente de formulario. Por
ejemplo si hace clic derecho sobre una Lista el menú contextual que se despliega mostrara en
uno de sus apartes Estilo Lista. Para todos los elementos aparecerá la misma ventana.
89
El espacio que comprende Bordes y Color, determina la apariencia y color de cada uno de los
bordes del elemento de formulario. Se puede cambiar la apariencia a cualquier borde izquierdo,
derecho, superior e inferior, las alternativas que se pueden tener en cuenta son:
La opción Predefinido deja el borde tal y como esta. Ninguno quita el
borde del elemento. Punteado traza pequeños segmentos de línea
continuos. Rayado traza segmentos de línea continuos un poco más
largos que en la opción Punteado. Sólido acentúa el color de borde.
Doble crea otra línea de borde igual a la usada. Surco crea una sombra
hacia dentro. Rugoso crea sombra hacia fuera. Bajo Relieve coloca más oscuro el borde
Derecho e Inferior. Alto Relieve coloca más oscuro el borde Izquierdo y Superior, para lograr
este efecto se debe asignar la misma propiedad a los cuatro bordes del elemento.
La forma de asignar el color a los bordes de los elementos es la misma antes explicada en este
documento.
El espacio Fuente determina el tipo y tamaño de fuente que tendrá el elemento seleccionado.
El espacio Fondo determina la imagen o color de fondo del elemento, además del color del
texto. El campo Imagen de Fondo establece la ruta en donde se encuentra la imagen que se
90
establecerá como fondo del elemento. El botón Examinar despliega una ventana Abrir como ya
se explico anteriormente en este documento.
El campo Color de Fondo establece el color de fondo que tendrá el elemento seleccionado. La
forma de determinar el color de fondo es la misma antes explicada en este documento. Si esta
determinado una imagen de fondo no hay necesidad de establecer un color como fondo del
elemento.
El campo Color de Texto establece el color que tendrá la fuente que este involucrada con el
elemento. La forma de determinar el color de texto es la misma antes explicada en
Propiedades de Pagina.
2.3.8 Marquesina.
Para insertar una Marquesina.
La ventan Insertar Marquesina le permite al usuario colocar texto en movimiento a trabes de la
pagina con mensajes que embellecen el contenido del documento Web. Una Marquesina es una
ventana en la que se desplaza un texto.
91
El campo Texto a Mostrar indica el texto que se pondrá en movimiento a trabes de la pagina.
El campo Dirección especifica el sentido en que se desplazara el texto (derecha o Izquierda), si
especifica Izquierda el texto comenzara su desplazamiento en la parte derecha de la pagina y
terminara en la parte izquierda, si es elegida dirección la Derecha el texto comenzara en la parte
izquierda de la pagina y terminara en la derecha.
El campo Velocidad de Movimiento especifica la cantidad y velocidad con que se desplaza el
texto por la pantalla. Retardo identifica como se realiza
el refresco de pantalla. Cantidad
especifica él numero de posiciones en que se mueve por la pantalla el texto.
El campo Repetir indica el numero de veces que se va a repetir el desplazamiento de texto en la
Marquesina. La opción Infinito establece que se reproducirá de forma ilimitada. La opción Veces
indica la cantidad de repeticiones que se harán del desplazamiento de la marquesina.
El campo Color de Fondo especifica el color que tendrá la parte del fondo donde se desplaza el
texto. La forma de seleccionar el color de fondo de la Marquesina es la misma antes explicada en
este documento.
92
El campo Alto Marquesina hace referencia al área vertical que ocupara la marquesina en la
pagina, este valor viene especificado por defecto pero si se quiere sustituir se selecciona
Especificar Alto, para poder escribir un valor numérico en la casilla. Los valores introducidos
como Alto de la Marquesina pueden ser en Píxeles o en Porcentaje, con solo seleccionar el botón
de cada uno se hace referencia a la unidad a emplear.
El campo Ancho Marquesina se refiere el área Horizontal que ocupara la marquesina en la
pagina. Este valor viene especificado por defecto pero si se quiere sustituir se selecciona
Especificar Ancho, para poder escribir un valor numérico en la casilla. Los valores introducidos
como Ancho de la Marquesina pueden ser en Píxeles o en Porcentaje, con solo seleccionar el
botón de cada uno se hace referencia a la unidad a emplear.
La cantidad o de Píxeles indica el numero de píxeles que se ocuparan, y el porcentaje indica el
espacio de la pagina que se ocupara.
El campo comportamiento especifica la forma en que el usuario quiere que se presente la
ejecución de la Marquesina en la pagina. Si escoge Desplazar la Marquesina comienza en la
parte izquierda de la pagina y desparece en la parte derecha o viceversa dependiendo de la
dirección dada a la Marquesina. Si es seleccionada Deslizar la Marquesina comienza en la parte
izquierda de la pagina y termina su desplazamiento en la parte derecha o viceversa dependiendo
de la dirección dada a la Marquesina. Si es seleccionada Alternar la Marquesina se mueve del
lado derecho al lado izquierdo de la pagina y de allí al lado derecho nuevamente o viceversa
dependiendo de la dirección dada a la Marquesina.
Propiedades de Marquesina. Si se desea cambiar alguna de las características de la marquesina
que ha sido insertada se hace clic derecho sobre la marquesina se despliega un menú
contextual, de allí se selecciona Propiedades de Marquesina.
93
se despliega la ventana Propiedades de Marquesina, que es la misma que se utilizo para insertar
la marquesina cuyos campos tienen la misma función ya antes explicada.
2.3.9 Sonido de Fondo y Titulo.
Al hacer clic en Sonido de Fondo y Titulo.
Dentro del encabezado hay información del documento, que no se ve en la pantalla
principal, en especial el título del documento. El Título debe ser breve y descriptivo de su
contenido, pues será lo que vean los usuarios cuando encuentren la pagina en un buscador o la
agreguen a la libreta de direcciones.
Una página del Web puede tener Sonidos incorporados, bien sea como un fondo sonoro que se
ejecuta automáticamente al cargar la página, o como una opción para que la active el propio
usuario.
94
En el campo Titulo se establecerá el nombre de la pagina con una breve descripción, para que
sea identificado por el navegador. El titulo debe guardar una relación con el contenido del
documento y definirlo de forma general, su tamaño no está limitado aunque se recomienda que
no sea excesivamente extenso.
El área Sonido de Fondo, contiene el Sonido que se va a reproducir. En el momento en que sea
abierta la pagina Web. El campo Ubicación determina la ruta donde esta el sonido que se
establecerá como fondo sonoro de la pagina. El botón Examinar tiene la misma función de Abrir
entes expuesta en este documento. Al seleccionar Infinito el Sonido se reproducirá durante un
numero ilimitado de veces. El campo Bucle determina la cantidad de veces que se reproducirá el
sonido cuando sea abierta la pagina. Para digitar la cantidad primero debe haberse
deseleccionado el campo Infinito.
95
2.3.10 Video.
Al hacer clic en Video.
Una de las formas de adornar las paginas, y agregar contenido multimedia a estas es la
inserción de Videos, que le profundicen a los usuarios los conceptos tratados en la pagina.
El campo Ubicación de Video determina la ruta donde se encuentra el video que se quiere
insertar a la pagina. El botón Examinar permite que el usuario determine el video que quiere
insertar en su pagina mediante una ventana de Abrir que le muestra el contenido de las
unidades de disco presentes en la maquina. El uso de la ventana Abrir es el mismo que se
explico anteriormente en este documento.
El área Repetición del Video determina el numero de veces que se desee repetir el video o si lo
prefiere el usuario puede determinarlo como continuo. La casilla Numero de Veces indica la
96
cantidad de repeticiones que se reproducirá el Video en la pagina Web. La caja de chequeo
Siempre indica que el video se reproducirá infinito numero de veces. Para digitar el numero de
veces la casilla Siempre debe estar deseleccionada.
El área Comenzar determina la forma de iniciar la reproducción del video. El campo Al Abrir la
Pagina, indica que el video comenzara en el momento de ser abierta la pagina. El campo Al
Pasar el Ratón, indica que en el momento en que el usuario pase el puntero del ratón sobre el
video este comenzara a reproducirse.
Propiedades de Video. Una vez insertado el Video, se puede hacer modificaciones haciendo clic
derecho sobre el video y eligiendo Propiedades de Video.
La ventana que despliega es la misma que se utilizo para insertar el Video, por lo tanto los
campos tienen la mismas funciones antes explicadas.
2.4 EL MENÚ FORMATO
Este menú posee cinco opciones distribuidas de la siguiente forma: Fuente, Viñetas,
Numeración, Mostrar Barra de Programación, Fondo.
97
2.4.1 Fuente.
Al hacer clic en fuente
En la ficha Fuente, se puede dar formato al texto seleccionando opciones de los cuadros Fuente,
Estilo de fuente, Tamaño y Color. También puede seleccionar una opción de Efecto. El área Vista
Previa muestra qué apariencia tiene el texto con la configuración que se le ha aplicado.
En el área Fuente seleccione el tipo de Fuente en la lista. La Fuente
seleccionada aparecerá en la casilla superior. En el cuadro Vista Previa, se
encuentra
un
texto
con
la
fuente
seleccionada.
Seleccione Estilo de Fuente en la lista. En el cuadro Vista Previa, se
encuentra
un
texto
con
el
estilo
de
fuente
seleccionado
98
También pude subrayar el texto escogiendo Subrayado. En el cuadro
Vista Previa, se encuentra un texto con el efecto Subrayado si es
seleccionado.
Seleccione Tamaño de Fuente en la lista. El Tamaño de Fuente seleccionado
aparecerá en la casilla superior. El cuadro Vista Previa muestra un texto que
tiene el tamaño seleccionado.
En el cuadro Color de Fuente escoja el color que desea para la fuente. La forma de seleccionar
el color de fuente es la misma entes explicada en Propiedades de Pagina. Otra forma de
realizar esta función es haciendo clic en el icono
Hay dos formas de trabajar esta propiedad una con texto seleccionado y otra sin tener el texto
seleccionado. Con texto seleccionado el texto que se encuentre en el área seleccionada tomara
la configuración que le ha dado en la ventana Fuente. Sin texto seleccionado la configuración
que se le ha dado la tomara el texto que sea introducido a partir de la ubicación del cursor.
Propiedades de Fuente. Otra forma de acceder a la ventana fuente es haciendo clic derecho
sobre el Área de Trabajo y seleccionar en el menú contextual Propiedades de Fuente.
2.4.2 Viñetas.
Después de introducir una viñeta en el Área de Trabajo y desea seleccionar un tipo diferente de
Viñeta a la que sé esta usando, haga clic en Viñetas.
99
Este tipo de lista se usa para enumerar Al hacer clic derecho sobre las viñetas se
elementos
que
no
definido.
tengan
un
orden despliega un menú contextual allí se puede
escoger la opción Propiedades de Viñetas.
Se despliega la ventana Propiedades de la Viñeta.
En el momento de aparecer la ventana muestra cual es el tipo de Viñeta que esta en uso. Para
cambiar el tipo de viñeta solo basta con hacer clic en cualquiera de los campos y luego presionar
el botón Aceptar.
2.4.3 Numeración.
Después de introducir una lista ordenada en el Área de Trabajo y desea
seleccionar un tipo
diferente de Numeración a la que sé esta usando, haga clic en Numeración.
Se usa un número para indicar el orden Al hacer clic derecho sobre las la lista
de cada elemento de la lista. El ser ordenada se despliega un menú contextual
ordenada no significa que ordene los allí se puede escoger la opción Propiedades
elementos alfabéticamente sino que los Numeración.
elementos guardan un orden que es el
100
número que indexa la lista.
Se despliega la ventana Propiedades de Numeración.
En el momento de aparecer la ventana muestra cual es el tipo de lista ordenada que esta en
uso. Para cambiar el tipo de numeración solo basta con hacer clic en cualquiera de los campos y
luego presionar el botón Aceptar.
2.4.3 Mostrar Barra de Programación.
Para ampliar el Área de Trabajo, se puede lograr ocultando la Barra de Programación haga clic
en.
101
De forma contraria el si la Barra de Programación esta oculta se vuelve a mostrar haciendo clic
en la misma opción.
2.4.5 Fondo.
Haciendo clic en Fondo.
Se despliega la misma ventana Insertar Fondo antes explicada en Insertar / Fondo.
102
2.5 EL MENÚ TABLA
Permite la representación de datos por filas y columnas, en forma tabular. La definición es muy
flexible indicando solo los elementos que forman cada fila y columna, calculándose de forma
automática el tamaño que deben tener las celdas. En una tabla podemos introducir todo tipo de
elementos del lenguaje HTML como imágenes, enlaces, texto, listas, cabeceras, formularios, etc.
2.5.1 Insertar Tabla.
Al hacer clic en Insertar Tabla.
Se despliega la ventana Insertar Tabla, la cual ya fue explicada su funcionamiento en el menú
Insertar / Tabla.
Propiedades de Tabla. Una vez insertada la Tabla si se desea hacer cambios sobre la tabla, basta
solo con seleccionarla y hacer clic derecho sobre ella se despliega un menú contextual y se
selecciona Propiedades de Tabla.
103
Cuando se crea una tabla, también se puede especificar sus propiedades, como el número de
filas y columnas, su tamaño y alineación, atributos de bordes, etc..
Se despliega la ventana Propiedades de Tabla.
En el área Establecer fondo se indica el Color o imagen de fondo que se quiera dar a la tabla.
El área Color de Tabla establece el color del perímetro de la tabla. En Borde se especifica el color
que tendrán todas las líneas que contienen la Tabla. En Borde Claro se determina el color de los
lados superior e izquierdo de la tabla. En Borde Oscuro se establece el color del los lados Inferior
y derecho de la tabla.
En el cuadro Alineación, seleccione la ubicación de la tabla en la página.
En el cuadro Tamaño del borde, introduzca el ancho del borde de la tabla en píxeles. Si se
especifica se dibujará un borde alrededor de la tabla y separando los distintos campos que
presenta. Se puede digitar un número que especificará el tamaño del borde, que por defecto
será 1, para no ver el borde de la tabla se especifica su tamaño en 0. Aunque no se dibuje el
borde sí se mantendrá el espaciado los elementos de la tabla.
104
En el campo Relleno de Celdas, especifica la cantidad de espacio entre el borde de la celda y el
contenido de esta, por defecto es 1. Si se indica 0 las celdas aparecerán sin separación.
En Espaciado Entre Celdas indique el espacio que debe existir entre las distintas celdas de la
tabla. Por defecto será 2. Si se indica 0 no habrá ningún espacio entre las celdas.
En Ancho Tabla, se puede indicar el ancho de la tabla en Píxeles o como porcentaje del ancho del
documento. En el primer caso se definirá en puntos y en el segundo en función del tamaño del
documento (tamaño de la ventana del Editor). Se recomienda utilizar tamaños de tabla en
porcentaje, ya que de esta forma la tabla queda perfectamente ajustada para cualquier tamaño
del documento.
Al hacer clic derecho en una Celda se puede seleccionar:
Ver Propiedades de Celda, Insertar Fila, Insertar Columna, Borrar Fila, Borrar Columna, Dividir
Celda, Eliminar Celda.
Propiedades de Celda. Si escoge Propiedades de Celda.
Se despliega la ventana Propiedades de Celda.
105
El área Establecer Fondo de la Celda, establece la imagen o color de fondo que tendrá la
celda.
El área Alineación de Celda indica la alineación del elemento dentro de la celda, en este caso
afectará a todos los valores situados en la fila actual. El campo Alineación Vertical indicará la
alineación del elemento dentro de la celda. Se podrá especificar donde se colocarán los
elementos dentro de la celda. Afectarán a toda la fila. Superior parte superior de la celda.
Medio centrado verticalmente dentro de la celda. Inferior en la parte baja de la celda. El
campo Alineación Horizontal puede tomar uno de los siguientes valores: Izquierda la
alineación a la izquierda de la celda. Este el valor que se toma por defecto. Derecha la
alineación a la derecha. Centro indicará centrado.
El campo Colores de Celda establece el color que tendrá la celda en sus diferentes lados. En
Borde se especifica el color que tendrán todas las líneas que contiene la Celda. En Borde Claro se
determina el color de los lados superior e izquierdo de la Celda. En Borde Oscuro se establece el
color de los lados Inferior y derecho de la Celda.
Tamaño de Celda, Especifica el ancho que tendrá la columna de la tabla, se puede especificar en
píxeles, en puntos de la pantalla o en porcentaje del tamaño de la tabla.
106
2.5.2 Insertar Fila y Columna.
Al hacer clic en Insertar Fila, se adiciona una nueva fila en la parte superior de la celda donde
esta ubicado el cursor. Al hacer clic en Insertar Columna se adiciona una nueva Columna en la
parte izquierda de la celda donde esta ubicado el cursor.
2.5.3 Eliminar Fila y Columna. Al hacer clic en Eliminar Fila, se borra la fila donde esta
ubicado el cursor. Al hacer clic en Eliminar Columna, se borra la columna donde este ubicado el
cursor.
Al hacer clic en Dividir Celda, la celda en donde se encuentra ubicado el cursor se parte y crea
dos nuevas celdas que ocupan el mismo espacio de una celda normal.
2.5.4 Eliminar Celda. Al hacer clic en Eliminar Celda, la celda en donde se encuentra el cursor
se borra dejando ese espacio en blanco en la tabla.
2.6 EL MENÚ MARCO
Aquí se puede insertar una nueva pagina con marcos al documento web, la forma de introducir
una nueva pagina de marcos es haciendo clic
Se despliega la ventana Nuevo que ya se explico en este
documento.
107
2.7 AYUDAS.
Despliega el contenido e indice de la información referente al editor y su funcionamiento.
2.7.1 Acerca de...
Despliega una ventana con información de los creadores y versión de la aplicación.
3. OTRAS FUNCIONES CONTENIDAS EN EL CLIC DERECHO
3.1 Posición Absoluta. Una propiedad común en algunos objetos, tales como elementos de
formulario, imagen y tabla que han sido insertados en el Área de Trabajo, es la de Posición
Absoluta.
Al hacer clic derecho sobre el elemento seleccionado y escoger Posición Absoluta el objeto
puede ser desplazado por toda el Área de Trabajo, y ser situado en cualquier lugar del
documento.
108
3.2 Crear Mapa de Áreas.
Una de las características principales del lenguaje HTML es la posibilidad de crear imágenes
sensibles, que son imágenes en las que se definen diversas zonas que activan distintos
hipervínculos, al pulsar con el cursor sobre una de estas zonas activaremos el hipervínculo que
la define. La imagen se dividirá en distintas áreas que definirán documentos a los que es posible
acceder.
Para crear una imagen sensible será necesaria la especificación de las distintas áreas de la
imagen y los enlaces que activaran cada una de ellas. Se presentará la imagen en pantalla y
mediante un puntero se podrán ir indicando las distintas zonas. Estas zonas podrán ser:
Rectángulo, Circulo o Línea Poligonal. A cada una de estas zonas le asignamos una URL que será
la que se active cuando se pulse en esa zona determinada.
Al hacer clic derecho sobre la imagen y seleccionar Crear Mapa de Áreas.
Se despliega la ventana Editor de Mapas.
109
La barra que se encuentra en la parte superior permite al hacer clic sobre ella, Crear un
Polígono,
un Cuadrado
o un Circulo
en la imagen. por defecto la figura
seleccionada para trabajar es el Polígono. Para crear cada una de las figuras solo basta con
seleccionar la figura y hacer clic arrastrado sobre la imagen, una vez echa la figura.
Se hace clic derecho sobre el área y despliega la ventana de Configuración
de Enlaces.
Cuyo funcionamiento ya se explico en el menú edición/ Hipervínculo.
Después de crear el enlace la figura crea unos puntos de controlador de tamaño, los cuales al
ser desplazados aumentan o disminuyen el área de la figura. Luego de la aparición de los puntos
de controlador al pasar el puntero del ratón sobre el centro de la figura el apuntador cambia de
puntero, es allí donde se hace clic derecho.
110
Se despliega este menú contextual.
La primera opción despliega la ventana Configuración de Enlaces. La segunda elimina la figura
seleccionada de la imagen. la tercera despliega una ventana con
las propiedades de la figura así.
El campo Hipervínculo, muestra el enlace hacia el cual va dirigido el Hipervínculo. El campo
Texto alternativo muestra una breve descripción del enlace cuando se situé sobre el puntero
del ratón.
El botón Modificar, permite cambiar los atributos estimados en los campos.
Hay que tener en cuenta que las figuras que definen las zonas no deben solaparse ya que un
punto de las imágenes no puede activar dos enlaces. En caso que se solapen se utilizará la que
estuviera definida en primer lugar en el fichero del mapa.
El campo Ubicación de la Imagen, muestra la ruta de la imagen donde se crearan los mapas.
El botón Examinar permite cargar otra pagina especificando su ruta.
El campo Nombre Mapa, determina como se llamara el mapa creado en la imagen, para que
sea identificado por el navegador.
111
4. FUNCIONES ESPECIFICAS EN BARRA DE FORMATO.
4.1 Botones Pagina Anterior y Pagina Siguiente.
Cada vez que se necesite una nueva hoja sola basta con insertarla a trabes del botón Nuevo o
en el menú Archivo / Nuevo, si en un documento se tienen múltiples hojas abiertas en las
cuales sé esta trabajando la forma de hacer transición entre ellas es mediante los botones
Pagina anterior
y Pagina siguiente
para situarse en la hoja que quiera activar.
4.2 Aumentar y Disminuir Sangría.
Aumentar Sangría
da un espacio de tabulador hacia la derecha del lado izquierdo de la
pagina. Disminuir Sangría
hace decremento a razón de un espacio de tabulador en
dirección del lado izquierdo de la pagina.
Para citar un texto ajeno. Se suele implementar dejando márgenes tanto a izquierda como a
derecha, razón por la que se usa habitualmente.
4.3 Numeración y Viñetas.
Las Viñetas
sirven para presentar información que, por no tener un orden determinado, no
necesita ir precedidas por un número. Al hacer clic sobre ella aparece un circulo al comienzo del
renglón y cada vez que se presione entrar se creara en el nuevo renglón.
La Numeración
sirve para presentar cosas en un orden determinado. Su estructura es muy
similar a la anterior. La diferencia estriba en que en el resultado aparecerá automáticamente un
número para cada línea.
112
5. BARRA DE HERRAMIENTAS
5.1 Párrafo.
En un documento HTML es posible definir seis tipos distintos de cabeceras
que serán normalmente el título del documento y los diferentes subtítulos
que lo forman.
Lo
normal
es
utilizar
los
Encabezados
de
forma
consecutiva
y
descendente, es decir, se comienza el documento con Encabezado 1 que definirá el titulo,
luego
para
los
apartados
Encabezado 3, etc
principales
utilizaremos
Encabezado
2,
para
subapartados
así de forma consecutiva. Sin embargo podremos utilizar cualquier
Encabezado en el punto que queramos del documento para resaltar cualquier texto. El modo en
que se presentan los Encabezado pueden variar de un navegador a otro, y solo se puede
asegurar que se mostrará de distinta forma en orden de importancia. Lo normal es que
Encabezado 1 sea negrita y muy grande, Encabezado 2 negrita y grande, Encabezado 3
itálica y grande.
Con Formato muestra una porción de texto en el que se respetan los saltos de línea,
tabuladores y espacios en blanco. Para mostrar este texto se utiliza una fuente de espaciado fijo
más pequeña que el texto normal. Muy útil a la hora de representar código fuente.
Dirección se utiliza Para escribir direcciones no electrónicas.
En las listas de definición, cada renglón de la lista tiene dos partes una el nombre de lo que va a
definir Termino definido y la otra es la descripción Definición.
113
Párrafo, se usa al comienzo o al final de un párrafo de texto e introduce un espaciado de
separación (normalmente dos líneas) con el próximo texto que se exprese.
5.2 Fuente.
Aquí se establece la apariencia o diseño general del carácter, para
cambiar el tipo de fuente basta con seleccionar el texto, y aplicar la
fuente o seleccionar un tipo de fuente para seguir trabajando con
ella al digitar el texto.
5.3 Tamaño.
Determina él numero de puntos que posee el carácter, para cambiar el tamaño de
fuente basta con seleccionar el texto, y aplicar el tamaño o seleccionar un tamaño
de fuente para seguir trabajando con ella al digitar el texto.
5.4 Aumentar y Disminuir Fuente.
Aumentar
incrementa el numero de puntos de los caracteres contenidos en el texto
seleccionado, cada vez que es pulsado. Disminuir
disminuye él numero de puntos de los
caracteres contenidos en el texto seleccionado.
5.5 Negrilla, Cursiva y Subrayado.
Estos son los distintos efectos que se pueden aplicar al texto normal. Estos efectos son los
resaltes (Negrita, Cursiva, Subrayado) que se pueden usar.
114
Negrilla
especifica un resalto que consiste en poner más grueso o con un relleno mayor a
los caracteres que conforman el texto que ha sido seleccionado. Cursiva
muestra una leve
inclinación hacia la derecha de cada uno de los caracteres que conforma el texto seleccionado.
Subrayado
coloca una línea debajo cada uno de los caracteres que conforma el texto
seleccionado.
Al hacer clic sobre cualquiera de estos iconos y no estar seleccionado ningún texto el efecto se
lleva acabo en los caracteres introducidos a partir de la selección.
5.6 Alineación Izquierda, Centro y Derecha.
Alineación Izquierda
permite colocar el texto en el lado izquierdo de la pantalla. Centro
ubica el texto en el centro de la pantalla. Derecha
mueve el texto hacia la derecha de la
pantalla.
6. PESTAÑAS
Para una pagina tipo Normal las pestañas
Diseño, Es
también llamada el Área de Trabajo, aquí es donde se puede insertar texto, sonido. Imagen y
video además se pueden crear enlaces e hipervínculos que conforman la pagina. Todo lo que se
muestra en esta ventana será como quedara en la pagina. Código HTML, muestra el código que
se crea conforme se van insertando elementos en el espacio de Diseño, en esta pestaña se
puede insertar código HTML y será representado en el campo de Diseño. Vista Explorador,
visualiza como quedara en el navegador la pagina en construcción.
115
Para una pagina con
Marcos estas son las pestañas. Con los Marcos es posible dividir la ventana del navegador en
varias subregiones, permitiendo mostrar una URL distinta en cada una de ellas. Diseño,
aparecen las paginas normales organizadas según el tipo de marco trabajado (Contenido, Titulo
y Titulo Contenido). La forma de trabajar en esta área es la misma antes explicada. Ver HTML,
muestra el código contenido en la pestaña Diseño de cada hoja involucrada en la pagina con
marcos. Código HTML de Pagina de Marcos, muestra el código del marco Principal donde se
configuran las paginas contenidas en el marco. Vista Explorador, visualiza como quedara en el
navegador la pagina de Marcos en construcción.
6.
BARRA DE ESTADO
Debajo de
las pestañas se encuentra la Barra de
Estado, que muestra el nombre del marcador y ruta del enlace en el texto que ha sido
seleccionado.

Untitled

Transcripción

Documentos relacionados

PASO A PASO - Maestro 2025

1 Asignatura: EBEP Apunte 10 Instructivo Aplicación MIDI