• Contraste: es el uso de la forma y color que permite resaltar el peso visual de uno o más elementos o zonas de una composición mediante la oposición o diferencia apreciable entre estas, teniendo como resultado atraer la atención del espectador hacia los elementos deseados.

• Repetición: es el efecto que permite resaltar el peso visual de uno o más elementos o zonas de una composición mediante la oposición o diferencia apreciable entre ellas, permitiéndonos atraer la atención de espectador hacia ellos.

• Armonía: Se refiere al acomodo de los elementos y la relación entre sí asegurando un sentido de orden y por lo tanto una mejor apreciación.

• Énfasis: Se usa para denotar importancia a ciertos elementos, algunos siendo más dominantes que otros, esto para atraer la atención del espectador a ciertas áreas así como la percepción de los objetos dentro de una composición.

• Simetría: Se refiere a la distribución adecuada y equilibrada de formas y espacios alrededor de una línea (llamado eje) o de un punto (o centro) común.

• Jerarquía: Se refiere a la importancia que se le asigna a un elemento dentro de una composición mediante el tamaño, posición o color.

Regla de los tercios o triángulo dorado: Es una forma de composición para ordenar objetos dentro de la imagen. Dividiendo el área de la imagen en nueve secciones mediante dos líneas horizontales equidistantes y dos líneas verticales equidistantes. Se recomienda utilizar los puntos de intersección de estas líneas para distribuir los objetos de la escena.

Princípios de Accesibilidad

Las directrices y criterios de éxito se organizan alrededor de los cuatro principios siguientes, que sientan las bases necesarias para que cualquiera pueda acceder y utilizar contenido Web. • Perceptible: Los componentes de la interfaz deben ser fácilmente inidentificables de manera que puedan

percibir. Esto significa que los usuarios deben ser capaces de reconocer la información que se presenta.• Operable: Los componentes de la interfaz de usuario y navegación deben ser operables. Esto significa que

los usuarios deben ser capaces de operar la interfaz.• Comprensible: Los usuarios deben ser capaces de entender, el contenido o la operación no pueden estar

más allá de su comprensión.• Robusto - El contenido se puede interpretar de forma fiable por una amplia variedad de aplicaciones de

usuario. Esto significa que los usuarios deben ser capaces de acceder a los contenidos conforme avanzan las tecnologías, por ejemplo, los usuarios con discapacidad deben ser capaces de usar la Web con un lector de pantalla.

Understanding the Four Principles of Accessibility, http://www.w3.org/TR/UNDERSTANDING-WCAG20/intro.html, Copyright © 2014 W3C® (MIT, ERCIM, Keio, Beihang), All Rights Reserved. W3C liability, trademark and document use rules apply.

Elegir contenido interactivo

Al incluir material interactivo en una página se debe considerar los complementos necesarios disponibles ya que de esto dependerá la correcta visualización y funcionamiento del la información contenida.

Vistas La ventana de documento permite visualizar documentos en la vista Código, la vista Código dividida, la vista Diseño, las vistas Código y Diseño (vista Dividida) o en la Vista en vivo.

Vista código

Esta opción permite a un usuario ver el diseño y el código a la vez.

También puede optar por visualizar la vista de código dividida o las vistas Código y Diseño horizontal o verticalmente. (La visualización predeterminada es la horizontal.)

Vista dividida

Guión gráfico de producción

Un guion grafico sirve para mostrar el contenido detallado de las páginas web, e indicar la colocación de los elementos en las páginas web, para la aprobación previa del cliente antes del desarrollo, también nos ayuda nos ayuda a definir los parámetros de la información.

Elementos a considerar

Al visualizar un sitio en diferentes equipos o navegadores hay que considerar que algunos elementos pueden cambiar, al obtener una vista previa de las páginas en diferentes navegadores y plataformas, podrá notar estas diferencias en la apariencia.

Estas diferencias pueden ser de diseño, tamaño de la pagina, color, tamaño de fuentes, velocidad de descarga y tamaño predeterminado de la ventana del navegador, diferencias que no podrá detectar en una revisión con un navegador de destino.

Espacio de trabajoA. Barra de la aplicación B. Barra de herramientas Documento C. Conmutador de espacios de trabajo D. Ventana de documento E. CS LiveF. Grupos de paneles G. Selector de etiquetas H. Inspector de propiedades I. Panel Archivos

Adición de texto a un documento

Puede agregar texto usando el teclado o pegando el texto desde otro documento. Puede modificar el texto usando el Inspector de propiedades.• Coloque el cursor y dé clic en el punto que

desea insertar el texto, notará el punto de inserción intermitente.

• Escriba algo de texto o pegue el texto copiado en otra aplicación.

Formato de párrafo

Para aplicar formato simple como negritas y cursivas o vincular el texto a otra página web, puede usar las opciones HTML en el Inspector de propiedades.

1. Seleccione el texto al que le cambiará el formato.2. En el Inspector de propiedades, seleccione Encabezado 1 en el menú Formato.3. Todo el párrafo se formatea con el estilo de párrafo de Encabezado 1 incrustado.

Panel Insertar

El panel Insertar contiene botones para insertar varios tipos de objetos, como imágenes y formularios, en una página web.

Favoritos: Panel Insertar > Seleccionar del menú desplegable Favoritos.

Formularios: Panel Insertar > Formularios

Insertar Imagen

Para insertar una imagen desde el panel insertar. Panel Insertar > Desplegar "Imágenes" > Seleccionar Imagen > En el cuadro de diálogo seleccionar la imagen y dar clic en Aceptar > Aceptar el resto de las opciones.

Alineación de una imagenPuede alinear una imagen con el texto, con otra imagen, con un plug-in o con otros elementos de la misma línea.1. Seleccione la imagen en la vista de

diseño.2. En el inspector de propiedades con

el menú emergente Alinear o dando clic derecho > Alinear > Izquierda

Puede establecer la alineación con relación a otros elementos del mismo párrafo o de la misma línea.Las opciones de alineación son: Predeterminado, Línea de base e Inferior, Superior, Medio, Texto superior, Medio absoluta, inferior absoluta, Izquierda, Derecha.

Edición de imágenes en Dreamweaver

La función Brillo/Contraste permite modificar el contraste o el brillo de los píxeles de la imagen. Esto afecta a los resaltados, sombras y medios tonos de la imagen. Normalmente, la función Brillo/Contraste se utiliza para corregir imágenes que son demasiado oscuras o demasiado claras.

Seleccione Modificar > Imagen > Brillo/Contraste > cambie los valores.

Definición de propiedades de imagen

El inspector de propiedades de imagen permite establecer las propiedades de una imagen.Opción 1 - Seleccionar Imagen > Menú Modificar > Editar etiqueta > en el campo Nombre: “nombre asignado”Opción 2 - Menú Ventana > Propiedades para ver el inspector de propiedades para una imagen seleccionada.En el cuadro de texto situado bajo la imagen en miniatura, introduzca un nombre de modo que pueda hacer referencia a la imagen cuando utilice un comportamiento de Dreamweaver (como Intercambiar imagen) o cuando utilice un lenguaje de creación de scripts como JavaScript o VBScript.

Herramienta zona interactiva

Herramienta de rectángulo de zona interactivaSeleccione la herramienta de rectángulo y arrastre el puntero sobre la imagen para crear una zona interactivarectangular.

Herramienta circular de zona interactivaSeleccione la herramienta circular y arrastre el puntero sobre la imagen para crear una zona interactiva circular.

Herramienta poligonal de zona interactiva Seleccione la herramienta poligonal y defina una zona interactiva con forma irregular haciendo clic una vez en cada esquina. Haga clic en la herramienta de flecha para cerrar la forma.

Mapa y Herramientas de zona interactiva Permiten asignar una etiqueta y crear un mapa de imagen en el lado del cliente.

Herramienta de puntero de zona interactiva

Inserción de etiquetas div

Puede utilizar etiquetas div para crear bloques de diseño CSS e insertarlas en el documento. Esto resulta útil si ha adjuntado al documento una hoja de estilos CSS con estilos de posición. Dreamweaver le permite insertar rápidamente una etiqueta div y aplicar a ésta estilos existentes, esto significa codificación más sencilla para los programadores.

Opción 1 - Panel Insertar > Objetos de diseño > Etiqueta Div.Opción 2 - En la categoría Diseño del panel Insertar, haga clic en el botón Insertar etiqueta Div .

Cambio de tamaño de etiquetas div

Puede cambiar el tamaño de una etiqueta div individual o cambiar simultáneamente el tamaño de múltiples etiquetas div para hacerlas del mismo ancho y altura.

Para cambiar el tamaño de una etiqueta div:1. Seleccione una etiqueta div haciendo clic en su borde o haciendo clic en el nombre de la etiqueta div en el panel de

Elementos PA.Realice una de las siguientes opciones para cambiar el tamaño de una etiqueta div:• Para cambiar el tamaño por arrastre, debe arrastrar cualquiera de los manejadores de cambio de tamaño de la

etiqueta div• Para cambiar el tamaño un píxel a la vez, mantenga presionado Control mientras presiona la tecla de flecha.• Las teclas de flecha mueven los bordes derecho e inferior de la etiqueta div; no es posible cambiar el tamaño

desde los bordes izquierdo y superior utilizando esta técnica.2. En el Inspector de propiedades, escriba los valores para ancho (An.) y altura (Al.).

Inserción de la barra de navegación

Para insertar la barra de navegación en un documento de Dreamweaver:Opción 1 - Ir al panel Insertar > Común > Imágenes > HTML de Fireworks > Examinar > localice y seleccione su archivo HTML Opción 2 – Menú Insertar > Objetos de imagen > HTML de FireworksPara editar, seleccione y luego use el Inspector de propiedades para cambiar las configuraciones.

Propiedades de la página HTMLEl cuadro de diálogo Propiedades de la página sirve para establecer las propiedades de diseño y formato de lapágina, por ejemplo una familia de fuente predeterminada, el color de la fuente y el color de fondo.

Menú Modificar > Propiedades de la página > categoría Apariencia (HTML) > seleccionar el elemento para modificar.

Fondo: Define un color de fondo para la página. Haga clic en el cuadro de color de fondo y seleccione un color en el selector de color o ingrese un valor especifico.

Texto: Especifica el color predeterminado con el que se presentan las fuentes.

Título y codificación de páginaLas opciones Título/Codificación permiten especificar el tipo de codificación del documento específico para el idioma utilizado al crear las páginas Web, así como especificar el Formulario de normas Unicode que debe utilizarse con dicho tipo de codificación.Opción 1 - Menú Modificar > Propiedades de la página > Categoría Título/Codificación y establezca las opciones.• Título Especifica el título de la página que aparece en

la barra de título de la ventana de documento y la ventana de la mayoría de los navegadores.

• Tipo de documento (DTD) Especifica la definición de un tipo de documento.

• Codificación Especifica la codificación empleada para los caracteres del documento. Si selecciona Unicode (UTF-8) como codificación del documento, no será necesaria la codificación de entidades, ya que la codificación UTF-8 puede representar todos los caracteres.

Opción 2 - En la barra de herramientas documento borrar texto de “Documento sin título" > Escribir el titulo que se desea.

Configurar Copiar/PegarPara añadir texto a un documento de Dreamweaver puede escribir texto directamente en la ventana de documento o puede cortar y pegar texto. También puede importar texto de otros documentos por ejemplo Word.

Seleccione Edición > Preferencias > Categoría Copiar/Pegar > configure las opciones > clic en Aceptar

Agregar HipervínculoVínculo: Especifica un hipervínculo para la imagen.

Opción 1 - Arrastre el icono de señalización hasta un archivo del panel.

Opción 2 - Archivos, haga clic en el icono de carpeta para buscar y seleccionar un documento del sitio o escriba el URL.

Opción 2 - Menú Insertar > Hipervínculo

Creación de un vínculo externo1. Seleccione la imagen o texto al

que desea dar formato de vínculo.2. En el campo de texto Vínculo en el

Inspector de propiedades, escriba o pegue la dirección (URL) del sitio al cual desea vincular.

Recuerde incluir “http://” en la dirección.

Creación de un vínculo interno

Los vínculos internos no necesitan una URL completa; Opción 1 - Explorando o apuntando hacia sus archivos de destino a través del Inspector de propiedades de texto.

Opción 2 - 1. Seleccione una imagen, una palabra o una frase de texto que desee formatear como vínculo. 2. Haga clic en HTML en el Inspector de propiedades.3. Junto al campo de texto Vínculo, haga clic en el icono Buscar el archivo (carpeta de archivos) o el ícono señalar archivo.4. Busque el archivo que desea vincular y haga clic o arrastre hacia él.5. Haga clic en Aceptar.

Atributo href

<a href=”http://www.ejemplo.com”> vínculo a ejemplo </a>Este atributo inserta un vínculo a la dirección provista, como se muestra en el ejemplo anterior.

Estado de un botón en Fireworks

Los botones contienen cuatro estados:• Arriba (botón no tocado)• Sobre (puntero sobre el botón)• Abajo (botón siendo presionado)• Sobre y Abajo (puntero encima mientras el botón está presionado)

Verificar vínculos

Una tarea de prueba técnica clave es la verificación de todos los vínculos en su sitio. Adobe Dreamweaver CS5 le permite hacer esto automáticamente usando el Verificador de vínculos.Asegúrese que su sitio esté abierto.Menú Sitio > Comprobar vínculos en todo el sitio.La pestaña del Verificador de vínculos muestra todos los vínculos rotos en el sitio.4. Corrija los vínculos rotos y verifique los vínculos nuevamente. Nota: Si los vínculos están indicados como rotos, debe comprobarlos en el explorador para confirmar.

Snippets / Uso de fragmentos de código

Los fragmentos de código permiten almacenar contenido para volverlo a utilizar posteriormente. Puede crear, insertar, editar o eliminar fragmentos de código HTML, JavaScript, CFML, ASP, PHP, etc. También puede administrar y compartir los fragmentos de código con otros miembros del equipo. Hay disponibles algunos fragmentos predefinidos que puede utilizar como punto de partida.

Panel ArchivosAbrir / Eliminar un archivo.

1. En el Panel Archivos (Ventana > Archivos), seleccione un sitio, un servidor o una unidad en el menú emergente (donde aparece el sitio, el servidor o la unidad actual).

2. Localice y seleccione el archivo que desea abrir.

3. Siga uno de estos procedimientos:• Haga doble clic en el icono del

archivo.• Haga clic con el botón derecho

4. Seleccione Abrir o Edición > Eliminar

Conectar/desconectar (Protocolo FTP, RDS y WebDAV) Conecta y desconecta del sitio remoto. De forma predeterminada.

Panel Archivos > Desplegar el botón Escritorio > Seleccionar el “Nombre del sitio" > Seleccionar la carpeta que se desea conectar > Clic en el ícono del panel "Conectar al servidor remoto"

Configuración de un servidor de prueba

Para desarrollar páginas dinámicas, Dreamweaver necesita los servicios de un servidor de prueba para generar y mostrar contenido dinámico mientras trabaja. El servidor de prueba puede ser el equipo local, un servidor de desarrollo, un servidor en funcionamiento o un servidor de producción.Menú Sitio > Administrar sitios > Nuevo > seleccione la categoría Servidores > Añadir nuevo servidor (+) > clic en el botón Avanzadas > seleccione el Modelo de servidor.

Exportación de la configuración del sitio

1. Seleccione Sitio > Administrar sitios.2. Seleccione uno o varios sitios cuya configuración desee exportar y haga clic en Exportar:

– Para seleccionar más de un sitio, presione Control (Windows) o Comando (Macintosh) mientras hace clic en cada sitio.

– Para seleccionar un rango de sitios, presione Mayús mientras hace clic en el primer sitio y en el último sitio del rango.3. Si desea crear una copia de seguridad de la configuración del sitio para usted, seleccione la primera opción del cuadro de

diálogo Exportando sitio y haga clic en Aceptar. Dreamweaver guarda la información de inicio de sesión en el servidor remoto, es decir, el nombre de usuario y la contraseña, además de la información de ruta local.

4. Si desea compartir la configuración con otros usuarios, seleccione la segunda opción del cuadro de diálogo Exportando sitio y haga clic en Aceptar. (Dreamweaver no guarda la información que no funciona con otros usuarios, como la información de inicio de sesión en el servidor remoto y las rutas locales.)

5. Por cada sitio cuya configuración desee exportar, vaya a la ubicación en la que desea guardar los archivos del sitio y haga clic en Guardar. (Dreamweaver guarda la configuración de cada sitio como un archivo XML con extensión de archivo .ste.)

6. Haga clic en Listo.

Nota: Guarde el archivo *.ste en la carpeta raíz del sitio o en el escritorio para que le resulte fácil encontrarlo. Si no recuerda el lugar en que lo situó, realice una búsqueda de archivos con la extensión *.ste en el equipo para encontrarlo.

Ocultación

La ocultación le permite excluir carpetas y archivos concretos de todas las operaciones de sitio.

En el menú Sitio > Nuevo Sitio…> Configuración avanzada > Ocultación

Algunas etiquetas útiles

<html></html> Comprende todas las etiquetas en un documento HTML, que lo define como un documento HTML.<head></head> Comprende la etiqueta de título y contiene títulos de documento e información de autoría para el documento.<title></title> Comprende el título para el documento.<body></body> Comprende todas las etiquetas que conforman el documento.<em></em> Enfatiza el texto con cursiva.<h1></h1> Es una etiqueta de encabezado que crea el tamaño de texto más grande. <p></p> Crea párrafos.<strong></strong> coloca el texto en negrita.

Listas<ol></ol> Crea una lista ordenada.<ul></ul> Crea una lista sin ordenar.<li></li> Comprende un elemento de lista y debe colocarse adentro de las etiquetas <ol></ol> o de las etiquetas <ul></ul>.

Trabajo con el contenido de Head para páginas

Las páginas contienen elementos que describen la información de la página y que son utilizados por los navegadores de búsqueda. Puede definir las propiedades de elementos head para controlar cómo se identifican las páginas.• Inserción de un elemento en la sección head de un documento: Seleccione un elemento en el submenú Insertar > HTML >

Etiquetas Head.

Facilidad de uso

La facilidad de uso se refiere a la eficacia en la consulta de información de un sitio Web debe contemplarse cuando se planea un sitio web, esto impacta la estructura del sitio, el diseño y el desarrollo de contenidos.

Algunos puntos a considerar son: • Tiempo de descarga: cuanto tiempo tardan en cargar.• Eficiencia de uso: la estructura del sitio es evidente.• Facilidad de navegación: mientras navega se obtiene la información esperada. • Tipos de elementos de navegación se usan: botones, hipervínculos, imágenes, etc. que facilitan la

navegación.

Hojas de estilos en cascada (CSS)

Las hojas de estilos internas (a veces llamadas hojas de estilos incrustadas) son buenas para mantener la consistencia dentro de un documento.

Las Hojas de estilos en cascada (CSS) son especialmente útiles para mantener la consistencia a lo largo de varias páginas diferentes. Al usar una hoja de estilos externa (un documento por separado que contiene información de estilos CSS) puede asegurar que la apariencia del texto sea consistente a lo largo de diversas páginas, al separar el diseño del contenido de manera mas eficiente.

Los desarrolladores usan CSS para separar el contenido del diseño o presentación de sus sitios, permitiendo a los dispositivos de asistencia acceder a la información provista en el contenido. Los desarrolladores también usan CSS para crear una estructura consistente para el contenido de texto, ayudando a los dispositivos de interpretación (tales como navegadores texto-a-voz).

Creación de una página con un diseño CSS

1. Seleccione Archivo > Nuevo.2. En el cuadro de diálogo Nuevo documento, seleccione la categoría Página en blanco (selección

predeterminada).3. En Tipo de página, seleccione el tipo de página que desea crear.4. En Diseño, seleccione el diseño CSS que desea utilizar. Puede elegir entre 16 diseños distintos. La ventana

Vista previa muestra el diseño y ofrece una breve descripción del diseño seleccionado.

Nota: Debe seleccionar un tipo de página HTML para el diseño. Por ejemplo, puede seleccionar HTML, ColdFusion®, PHP, etc. No pueden crearse páginas ActionScript™, CSS, Library Item, JavaScript, XML, XSLT ni ColdFusion Component con un diseño CSS. Los tipos de página de la categoría Otro del cuadro de diálogo Nuevo documento tampoco pueden incluir diseños de página CSS.

Fondos de diseño CSS Muestra los colores de fondo asignados temporalmente a los distintos bloques de diseño CSS y oculta los demás colores de fondo o imágenes que normalmente aparecen en la página.Para visualizarlo seleccione Ver > Ayudas visuales > Fondos de diseño CSSAl activar las ayudas visuales para ver bloques de diseño CSS, Dreamweaver asigna automáticamente a cada bloque de diseño CSS un color de fondo diferenciador. (Dreamweaver selecciona los colores mediante un proceso algorítmico, es decir, que no puede asignar los colores que desee.) Los colores asignados se distinguen visualmente y están pensados para ayudarle a diferenciar los bloques de diseño CSS.

Plantillas de DreamweaverAspectos básicos de las plantillas de Dreamweaver

Una plantilla es un tipo especial de documento que sirve para crear un diseño de página “fijo”; puede crear documentos basados en la plantilla que heredan su diseño de página. Al diseñar una plantilla, usted especifica como “editables” y limita aquellos contenidos de un documento basado en dicha plantilla que los usuarios pueden editar.

Panel activosEl panel activos, es la herramienta principal que debe utilizarse para organizar los activos del sitio, incluidos los contenidos reutilizables conocidos como elementos de la biblioteca.Para insertar una imagen:Panel activos > arrastrar la imagen al área de trabajo.

Inserción de archivos FLV

Dreamweaver ofrece las opciones siguientes para mostrar vídeo FLV a los visitantes de su sitio:• Descarga progresiva de vídeo Descarga el archivo FLV en el disco duro del visitante del sitio y lo

reproduce. Sin embargo, a diferencia de los métodos tradicionales de entrega de vídeo de tipo “descarga y reproducción”, la descarga progresiva permite iniciar la reproducción del archivo de vídeo antes de que haya finalizado la descarga.

• Flujo de vídeo Transfiere el contenido de vídeo y lo reproduce en una página Web transcurrido un breve periodo de búfer que garantice una reproducción fluida.

Evaluación y mantenimiento de un sitio

Algunos de los métodos mas utilizados para recopilar información y comentarios de un sitio web son:• Informes del sitio.• Encuesta por correo.• Vínculo en un correo electrónico solicitando comentarios.

Algunas formas para recabar información y realizar una prueba de uso de sitio son:• Entrevistas.• Observaciones.

Elementos que pueden leer los lectores de pantalla

La accesibilidad designa la capacidad de crear sitios y productos Web que puedan utilizar aquellas personas con discapacidades visuales, auditivas, motoras u otras. Entre los ejemplos de funciones de accesibilidad para productos de software y sitios Web podemos citar la compatibilidad con lectores de pantalla, los equivalentes textuales para gráficos, los accesos directos del teclado y el uso de colores de pantalla con alto contraste, entre otros.Un lector de pantalla puede leer los siguientes elementos:• El texto que aparece en la pantalla.• Texto alternativo en imágenes.

Texto alternativoPara usuarios con deficiencias visuales que usan sintetizadores de voz o lectores de pantalla con navegadores que sólo admiten texto, el texto se reproduce en voz alta. Opción 1 - Menú Modificar > editar etiqueta > texto alternativo y escribir el texto que se desea.

Opción 2 - Panel Propiedades > Alt: tecolote

Navegador de código

El navegador de código muestra una lista de fuentes de código relacionadas con la selección actual de la página, como pueden ser reglas CSS internas y externas, server-side includes, archivos JavaScript externos, archivos de plantilla padre, archivos de biblioteca y archivos de origen de iframe.Al hacer clic en un vínculo en el navegador de código, Dreamweaver abre el archivo que contiene el código correspondiente. El archivo aparece en el área de archivos relacionados, en el caso de que esté activado. Si no están activados los archivos relacionados, Dreamweaver abrirá el archivo seleccionado como documento independiente en la ventana de documento.

Apertura del navegador de código: puede abrir el navegador de código haciendo clic en el indicador de navegador de código . Este indicador aparece cerca del punto de inserción de la página cuando el ratón ha permanecido inactivo durante más de 2 segundos.