DOCUMENTO DE MAS DOCUMENTOS GENERADO POR DOCUMENTOS, Exercises of Information Systems

Download DOCUMENTO DE MAS DOCUMENTOS GENERADO POR DOCUMENTOS and more Exercises Information Systems in PDF only on Docsity! DISEÑO DE INTERFACES WEB Conceptos avanzados Team Viewer MARCH 26, 2020 Diego Cabrera Valentin Sistemas Computacionales Grupo: SC08SB116 Profesor: Aguilar Jiménez María del Rosario Materia: Diseño de interfaces Web Conceptos avanzados Con el término “Conceptos avanzados” utilizado para designar este apartado entendemos aquellos procedimientos considerados de una cierta dificultad dentro de la dinámica de este curso. De esta forma, en esta sección, el lector encontrará lecciones dedicadas a los elementos PA, a los formularios, a la inserción y gestión de comportamientos, al trabajo con funciones JavaScript y al framework de Spry. Insertar elementos PA Dreamweaver posibilita el uso de elementos PA, antes denominados capas, para facilitar el diseño de las páginas. Un elemento PA es un ítem de página HTML que se puede colocar en cualquier parte del documento. Los elementos PA, a su vez, pueden contener los mismos ítems que se pueden situar en el cuerpo de un documento HTML. Al insertar un elemento PA en un documento, Dreamweaver inserta la etiqueta HTML div en el cuerpo de la página. Los elementos PA pueden ser insertados directamente en la página mediante las opciones de la Barra de menús o dibujados en la ventana del documento tras pulsar el botón Dibujar Div PA de la categoría Diseño de la barra de herramientas Insertar. Manipular las propiedades de los elementos PA Dreamweaver cuenta con un panel que permite controlar los diferentes elementos PA de un documento. El panel Elementos PA proporciona un medio para evitar solapamientos, cambiar la visibilidad de los elementos PA y seleccionar uno o más elementos de este tipo. Los elementos PA se muestran en el panel dispuestos en forma de lista de nombres, siendo el primer elemento PA creado el situado al final de la lista, mientras que el último aparece en la primera posición de la lista. La selección de los elementos PA puede efectuarse en el panel Elementos PA o en la propia ventana del documento. Para ello se debe acompañar de la tecla Mayúsculas la pulsación sobre el segundo ele- men to PA que desee ser seleccionado. El panel Propiedades ofrece en este caso opciones de configuración para elementos PA múltiples. Convertir un elemento PA en table Los elementos PA proporcionan gran flexibilidad a la hora de posicionar el contenido de un documento, pero por contra sólo los navegadores más recientes son capaces de soportar este tipo de elementos. Dreamweaver, a través de su menú Modificar, proporciona la herramienta necesaria para transformar los elementos PA de una página en celdas de una tabla. De este modo se ase gura la correcta visualización de la página, independientemente del navegador utilizado para visualizarla. El programa también posibilita la operación inversa, es decir, la conversión de las celdas de una tabla en elementos PA. Usar sugerencias para el código JavaScript Gracias a las sugerencias para código que ofrece Dreamweaver es posible escribir código JavaScript más rápidamente y con mayor precisión. La versión anterior del programa ya mejoró la asistencia relativa a los tipos de datos simples y objetos centrales de JavaScript y ha ampliado su funcionalidad mediante la incorporación de frameworks de JavaScript como jQuery, Prototype y Spry. La barra de herramientas de codificación de la vista Código dispone de un botón que permite mostrar los posibles errores de sintaxis que contiene una página. La información aparece en una barra amarilla situada en la parte superior de la página y el programa muestra automáticamente la primera línea de código en la que se ha detectado el error y en color rojo el número de línea. Plantillas y regiones editables Una plantilla de Dreamweaver es un tipo especial de archivo que sirve para fijar un diseño de página que posteriormente puede ser utilizado como base para crear documentos que hereden el mencionado diseño. Las plantillas pueden ser creadas sin contenido, partiendo de un documento en blanco, o utilizando una página ya cumplimentada como base de las mismas. El menú Archivo permite acceder al cuadro de diálogo Guardar como plantilla, que facilita el almacenado de las páginas como plantillas de Dreamweaver de extensión.dwt. Dreamweaver bloquea automáticamente la mayoría de las regiones de documento cuando éste se almacena como plantilla. El autor de la plantilla debe insertar regiones editables, para especificar los elementos del documento basado en plantilla que podrán ser editados. Una región editable es una sección no bloqueada de un documento basado en plantilla. El programa también permite insertar regiones repetidas y opcionales. Una región repetida es una sección del documento que se define para que se repita, mientras que una región opcional es una sección del mismo que se especifica como opcional para contenido. Crear un documento a partir de una plantilla Los documentos basados en plantillas pueden quedar vinculados a las mismas o funcionar de modo independiente de éstas. Esto obedece a la activación o no de la casilla de verificación Actualizar página cuando cambie la plantilla del cuadro de diálogo Nuevo desde plantilla. Por defecto, ésta se encuentra activada al acceder al mencionado cuadro de diálogo, en el que quedan listadas las diferentes plantillas almacenadas en cada uno de los sitios configurados. La vinculación del nuevo archivo a la plantilla comporta que cualquier modificación efectuada en la plantilla (el documento de extensión. dwt almacenado en la carpeta Templates) se vea automáticamente reflejado en la página vinculada. En este caso, la edición del documento basado en la plantilla se verá limitada a las regiones editables de la misma, quedando excluidas el resto: las regiones bloqueadas. En caso contrario, si el documento se desvincula de la plantilla podrá ser editado independientemente de ésta. Para desvincular de una plantilla un documento ya creado debe ser utilizado el comando Separar de plantilla (menú Modificar, submenú Plantillas). Automatizar tareas desde el panel Historial El panel Historial y los comandos personalizados facilitan la automatización de tareas repetitivas. El panel Historial muestra una lista de todos los pasos realizados en el documento activo, desde que éste se creó o se abrió, hasta el número de pasos configurado como máximo entre las preferencias del programa. Este panel permite deshacer uno o varios pasos, así como repetirlos y crear nuevos comandos para automatizar tareas. Los pasos reproducibles pueden ser almacenados como un comando personalizado. Tras la asignación de un nombre para el comando personalizado el programa lo guarda automáticamente en una de las carpetas de configuración del sistema. A partir de ese momento los pasos guardados pueden ser aplicados en cualquier documento mediante el menú Comandos de la aplicación. Generar un conjunto de datos de Spry El framework de Spry es una biblioteca JavaScript que proporciona a los diseñadores Web la capacidad de crear páginas Web que ofrezcan una experiencia más completa a los visitantes. Con Spry, es posible utilizar HTML, CSS y una cantidad mínima de código JavaScript para incorporar datos XML a los documentos HTML. Es posible crear widgets (elementos interactivos com- plejos) y añadir distintos tipos de efectos para varios elementos de la página. El framework de Spry está diseñado para hacer el lenguaje de formato simple y fácil de utilizar para usuarios con un conocimiento básico de HTML, CSS y JavaScript. El uso de Spry está destinado principalmente a profesionales del di- seño Web o a diseñadores Web no profesionales con un nivel avanzado, y no va destinado a entornos de trabajo de desarrollo Web empresarial. El asistente para la creación de conjuntos de datos con Spry muestra seleccionada por defecto la opción HTML en el campo Seleccionar tipo de datos. Con esta opción, y siguiendo los pasos indicados por este asistente, es posible incorporar la potencia de los datos dinámicos a las páginas Web sin necesidad de conocer el lenguaje de bases de datos o la codificación XML. Insertar tablas y regiones de Spry La pantalla Elegir opciones de inserción del asistente para la creación de con- juntos de datos de Spry permite seleccionar el modo en que se mostrarán los datos. Puede elegir entre mostrarlos a través de una tabla dinámica (que permite la actualización dinámica de datos en una página de Dreamweaver), de un diseño maestro/detalle, de un diseño de contenedores apilados (una columna) o apilados con área de foco (dos columnas). El proceso de creación de una tabla maestra dinámica es el mismo que para crear una tabla sencilla; sin embargo, en el caso de la tabla maestra, puede vincular una región dinámica de detalle a la tabla, de manera que, cuando un usuario haga clic en una fila de la tabla, los datos de la región de detalle se actualicen de forma dinámica. Para crear una tabla dinámica de Spry, es preciso insertar primero una tabla maestra, que muestra los datos que se utilizan para activar los cambios dinámicos y, a continuación, una región de detalle, que contendrá los datos que sufren los cambios. Si la página HTML tiene estilos CSS asociados como hoja de estilos adjunta o como conjunto de estilos individuales puede aplicar una clase CSS para las filas impares y para las pares. También puede apli- car una clase activable para modificar el aspecto de una fila al situar el cursor sobre ella, y una clase seleccionar para modificar el aspecto de una fila al hacer clic sobre ella. Es muy importante que las reglas estén en este orden. Trabajar con widgets Un widget de Spry es un elemento de página que permite la interacción del usuario y, por tanto, ofrece una experiencia más completa. Un widget de Spry consta de tres partes: estructura, comportamiento y estilo. La estructura consiste en un bloque de código HTML que define la composición estructural del widget. El comportamiento es el lenguaje JavaScript que controla la respuesta del widget a los eventos iniciados por el usuario. Por último, el estilo es un estilo CSS que especifica el aspecto en sí del widget. Dreamweaver permite insertar de manera directa y sencilla distintos widgets y aplicarles estilos. Los comportamientos del framework incluyen funciones que permiten al usuario mostrar u ocultar contenido de la página, cambiar el aspecto de la misma, interactuar con los elementos de menú, entre muchas otras. Algunos de los widgets más llamativos y utilizados son el de acordeón, la barra de menús de Spry o los paneles en fichas de Spry. Una de las grandes ventajas de trabajar con el framework de Spry en la creación de páginas dinámicas es la posibilidad de hacerlo directamente en la vista Diseño. Insertar barras de menús de Spry El widget denominado Barra de menús de Spry de Dreamweaver CS5 sustituye a la función de barra de navegación presente en versiones anteriores de la aplicación. Adobe recomienda usar el widget de Barra de menús de Spry si se desea crear una barra de navegación. Un widget de barra de menús es un conjunto de botones de menú de navegación que muestran submenús cuando el visitante de un sitio sitúa el puntero del ratón sobre uno de ellos. Las barras de menús permiten visualizar una gran cantidad de información de navegación en un espacio reducido, y ofrecen a los visitantes una idea de lo que está disponible en el sitio sin necesidad de realizar una navegación exhaustiva. Los elementos de menú de nivel superior pueden contener submenús para cada uno de los elementos. Asimismo, los submenús pueden contener otros submenús. Los menús y submenús de nivel superior pueden contener tantos elementos de submenú como desee. Los menús de navegación spry sustituyen en esta versión CS5 de Dreamweaver a las antiguas barras de navegación. La función de ambas es similar, permiten desplazarse por las páginas y los archivos de un sitio aportando además una visión global de la organización del sitio. Aplicar efectos Spry Los efectos de Spry son mejoras visuales que se pueden aplicar a prácticamente cualquier elemento incluido en una página HTML, mediante JavaScript. Este tipo de efectos se utilizan a menudo para destacar información, crear transiciones animadas o modificar una página visualmente durante cierto tiempo. Al aplicar efectos de Spry no es preciso utilizar otras etiquetas personalizadas. Es importante tener en cuenta que para aplicar efectos de Spry a un elemento, éste debe estar seleccionado o contar con un ID. Los efectos pueden modificar la opacidad, la escala o la posición del elemento seleccionado, así como las propiedades de estilo. Mediante la combinación de estas propiedades es posible crear efectos visuales realmente interesantes y originales.