Adobe dreamweaver cs4

Web Communication using Adobe
Dreamweaver CS4

¿Qué es la comunicación Web?

Características de la comunicación vía
Web
• La comunicación fluye por un canal universal,
canal multimedia que soporta el tráfico de
todos los medios de comunicación.
• La comunicación es ilimitada:
Ámbito mundial.
Disponible en todo tiempo.
3Education Technology Consulting

Características de la comunicación vía
Web
• Permite la interactividad:
Comunicación bidireccional y simultánea.
• Permite comunicar a las personas,
computadoras y dispositivos tecnológicos.

Adaptación de nuevas tecnologías.
• Blogs:
– Diarios virtuales a través de fotografía, video y audio.
• Chat.
• Mensajería instantánea.
“Medios interactivos como
principal medio de transmisión
de la información”

Recuerda:
• Para definir los requerimientos del proyecto es
necesario:
– Establecer el propósito del sitio Web,
– Los objetivos del cliente.
– Identificar la audiencia objetivo.
• Las características de la audiencia objetivo son:
– Nivel de educación de los visitantes.
– Rango de edades.
y deben tomarse en cuenta para diseñar el contenido de
un sitio web.
Education Technology Consulting
6

Planificación de un sitio Web

Pasos para planificar un sitio web.
1) Definir los objetivos.
2) Identificar la audiencia destino.
3) Organizar la información.
4) Dividir el sitio en categorías.
5) Recopilar el contenido del sitio.
6) Establecer el tiempo de desarrollo.
7) Seleccionar el software.
8) Organizar el trabajo del proyecto.

¿Qué son los derechos de autor?

Derecho de autor.
• El Derecho de autor atiende a fundamentos de
índole económico, a la justificación y
reconocimiento de la creación intelectual.
Estructuras de dos derechos inherentes a la autoría:
• Derechos morales.
• Derechos patrimoniales.
10

Derechos patrimoniales.
Otorgan exclusividad al autor para:
• Reproducir,
• Comunicar públicamente,
• Transformar su obra.
El derecho de distribución comprende:
• Venta
• Arrendamiento
• Derecho de importación.
11

Derechos patrimoniales.
• Estos derechos competen al autor y pueden
ser transferidos en propiedad a otras personas
naturales y jurídicas.
• Los derechos patrimoniales representan el
derecho para beneficiarse económicamente
de la producción intelectual.
12

Tipos de derecho.
• Derecho de reproducción.
• Derecho de distribución.
• Derecho de comunicación pública.
• Derecho de transformación.

Derecho de reproducción.
• El autor puede obtener beneficio económico
de las reproducciones o copias que se realicen
de su obra o recurso.
• Reproducir o copiar un recurso sin
consentimiento del autor es ilegal.
14

Derecho de distribución.
Permite colocar a disposición del público el
original o copias de la obra mediante:
• Venta,
• Alquiler,
• Préstamo,
• O de cualquier otra forma.
15

Comunicación pública.
• La comunicación pública es todo un acto por
el que una pluralidad de personas pueden
tener acceso a la obra sin previa distribución
de los ejemplares a cada una de ellas.
• ¿Puede considerarse la comunicación Web
como comunicación pública?
16

Derecho de transformación
• Derecho del autor para autorizar y obtener
una remuneración por las transformaciones
que se hagan sobre la obra, por ejemplo, las
traducciones.
17

Limitaciones del derecho de autor.
• El derecho patrimonial tiene un término de
duración definido en todas las legislaciones,
coincidiendo en la mayoría.
• Concede protección durante la vida del autor y un
lapso variante de años a partir de su muerte.
• Una obra pasa al dominio público cuando los
derechos patrimoniales han expirado.

Accesibilidad.
• Facilidad con la que algo puede ser usado,
visitado o accedido por todas las personas.
Especialmente por aquéllas que poseen algún
tipo de discapacidad.
• Accesibilidad Web:
• Accesibilidad aplicada al contenido web.

W3C
• World Wide Web Consortium.
• Ha desarrollado directrices o pautas
específicas para permitir y asegurar este tipo
de accesibilidad.
• Web Accesibility Initiative.
• Grupo de trabajo dentro del W3C encargado
de promover la accesibilidad Web.
21

Funcionalidad.
• Estándar de calidad sobre las experiencias de
los usuarios cuando interaccionan o utilizan
algún producto o sistema.
• Diseño de la interfaz que incluye la
combinación de factores que afectan la
experiencia de los usuarios con un producto
o sistema determinado.
22

Funcionalidad.
• El 60 % de las veces, los usuarios no pueden
encontrar la información que buscan en los sitios
Web.
Consecuencias:
• Pérdida de tiempo.
• Reducción de productividad.
• Aumento de frustración.
• Visitas repetidas.
• Pérdida de dinero.

Funcionalidad.
Los usuarios tienen poca tolerancia a:
• Aspectos no funcionales.
• Aspectos complicados.
• Aspectos que no les gusten.
Necesario:
• Evitar “página en construcción”.
• Respuesta del servidor rápida.
• Mostrar mensajes de ayuda.
24

Funcionalidad.
• Necesario incluir:
• Estructura de navegación.
• Comentarios de ayuda:
– En la estructura del sitio.
– En las páginas individuales.
• Sentir que la comunicación es bidireccional.
25

Prioridades para la accesibilidad de un
sitio Web.
• Información en colores y sin color:
contexto, marcadores.
• Identificar cambios en el idioma original:
leyendas.
• Organizar el documento con y sin hojas de
estilo.
• Actualizar contenido dinámico.
• Evitar parpadeo en pantalla.

Prioridades para la accesibilidad de un
sitio Web.
• Lenguaje simple y apropiado.
• Identificar encabezados.
• Marcar listas y puntos de listas.
• Identificar el objetivo de cada vínculo.
• Utilizar mecanismos de navegación.

Accesibilidad.
Incluye:
• Tipografías de alto contraste.
• Tipografías de gran tamaño.
• Lectores y revisores de pantalla.
• Programas de reconocimiento de voz.
• Teclados adaptados.
• Dispositivos apuntadores o de entrada de
información.

Recordar:
Para definir los requerimientos del proyecto es
necesario:
• Establecer el propósito del sitio.
• Establecer los objetivos del cliente.
• Identificar la audiencia objetivo.
Características de la audiencia objetivo son:
• Nivel de educación de los visitantes.
• Rango de edades.
Tomarlo en cuenta para diseñar el contenido del sitio web.
30

Recordar:
• Imágenes.
• Marcas.
• Logos.
• Material intelectual.
Poseen derechos de autor, son registrados.
Se identifican con los símbolos de marca registrada.
31

Recordar:
¿Cuándo utilizar material protegido?
• Cuando se adquiere el permiso de escritura
para el material.
• Cuando se indica que el material tiene
derechos de autor.
• Cuando posee licencia de libre autorización.
32

Recordar:
Características que hacen a un sitio Web
funcional:
• Velocidad de conexión.
• Resolución de la pantalla.
• Tamaño de los archivos de imagen.
• Texto alternativo.
• Etiquetas de imagen.
33

Recordar:
Puntos de control de W3C:
• Texto alternativo.
• Marcas para los lectores de pantalla.
• Leer el documento sin hojas de estilo.
34

• Las leyes de copyright (derecho de copia ©)
protegen todas las obras tanto publicadas como
no publicadas.
• Cómo utilizar y reproducir videos con derechos
de autor en un sitio web sin previa autorización:
• Reproduciendo únicamente el 10%
• Reproduciendo únicamente un máximo de tres
minutos máximo del mismo.
35

Lectores de pantalla
• Los lectores de pantalla y exploradores
interpretan tres tipos de contenido:
• Títulos de página
• Cuerpo de texto de página, Encabezado de
columnas
• Los textos alternativos
36

Planificar el diseño del sitio

Planificar el diseño del sitio
• Objetivo de un sitio:
• Comunicar toda la información.
• Ser flexible.
• Ser accesible.

Buenas prácticas para el diseño
web
Características que debe poseer un sitio:
• Rapidez.
• Navegabilidad.
– Estructura clara y coherente del espacio web.
• Funcionalidad.
– Destacar elementos de interacción con los usuarios.
• Eficiencia.
– Satisfacer expectativas de los usuarios.
39

¿Qué son los estándares y mejores
prácticas?
• Son recetas identificadas por la experiencia de
cientos de expertos en los temas de Internet.
• Aportaciones que se enfocan en mejorar:
– Forma de diseñar.
– Forma de desarrollar.
– Forma de operar.
– Forma de navegar en un sitio Web.
40

Estándares y mejores prácticas
• Abarcan:
• Adecuar la administración y operación de un sitio
Web.
• Suscribir el sitio a portales y páginas de
búsqueda.
• Promover el sitio a través de estrategias
complementarias (boletines, listas de correo, foros)
• Registrar reportes de uso del sitio (controlar visitas y
mejorar continuamente).
41

Diseño de un sitio web
• Debe ser fácil (manejable).
• Debe ser cómodo de utilizar (agradable a la vista).
• Combinar adecuadamente los colores. (Evitar
distracción)
• Usar fuentes de fácil lectura.
• Usar imágenes de alta calidad.
• Deben ser versátiles: agradable a toda audiencia.
42

Buen diseño gráfico
• Fundamentado en:
• Diseño de la información.
• Diseño de la arquitectura visual.
• Crear la experiencia interactiva.
• Información organizada.
• Incluir derechos de autor de contenido protegido.
• Contar con vínculos accesibles.
• Diseño consecuente a lo largo de todo el sitio.
43

Sugerencias para el diseño de sitios
web
• La página de inicio no debe pesar más de 50 K.
• Debe haber visibilidad y homogeneidad del diseño en
los diferentes navegadores.
• Carga rápida de información y en orden.
• Identificar elementos para la navegación.
• Informar al usuario si se requiere de un plug in para la
lectura de un archivo, agregar enlace.
• Indicar peso de archivos si son > de 100 k.
• Diferenciar enlaces visitados y no visitados.
• Indicar al usuario su posición dentro del sitio.
• Incluir mapa del sitio.
44

Recomendaciones para el diseño de
formularios Web
• Incluir vista preliminar para verificar los datos
antes de enviarlos.
• Indicar los campos obligatorios.
• La navegación debe retomarse fácilmente
después de llenar un formulario.
• La información sobre la privacidad debe estar
accesible cuando se insertan datos personales.
45

¿Porqué es importante la
funcionalidad?
• Orientar el diseño de sitios Web pensando en
los usuarios.
• Obtener el mayor número de visitas en el sitio
Web.
46

Ventajas que ofrece la
funcionalidad
• Incrementar las visitas.
• Reducir tiempos y costos para el usuario y
para la organización.
• Agilizar la distribución y manejo de la
información.
• Brindar una fácil navegación a usuarios de
bajo nivel de alfabetización.
• Proporcionar contenido alternativo.
47

Diseño de bocetos y estructura de un
sitio Web

Boceto
• Dibujo hecho de forma esquemática .
• Se utiliza como base para obtener un diseño
de alta calidad.
• Puede utilizarse para diseñar toda clase de
sitios Web.
• Diseñar bocetos para:
– La página de inicio.
– Las páginas de contenidos.
49

Bocetos en la fase de diseño
• Permite:
• Representar gráficamente las ideas generales.
• Comunicar adecuadamente la visión general del
sitio Web a las personas interesadas.
• Ahorrar tiempo en el diseño del sitio Web.
• Planificar el diseño del sitio web.
• Entender las ideas y recordarlas.
• Realizar correcciones y plasmar nuevas ideas.
• Distribuir adecuadamente el contenido de las
páginas Web.
50

Guión gráfico
• Es la representación gráfica de un proceso
visual deseado, que en dreamweaver contiene
características como:
• Nombre de archivo
• Navegación
• Imágenes
• Dibujos.
51

Guión gráfico
• Cuándo emplearlo:
• Medir el nivel de aceptación y satisfacción de los
usuarios.
• Adaptación del usuario a la navegación del sitio
Web.
• Aprobación del cliente previa al desarrollo.
• Indicar la colocación de los elementos en nuestro
sitio web.
52

Estructura del árbol de contenidos
• Muestra de manera gráfica las secciones que
tendrá el sitio en desarrollo y los niveles de cada
sección.
• Consiste en generar un diagrama que cuente con:
• un tronco,
• ramas y,
• hojas
para mostrar las zonas principales, secundarias y los
contenidos finales.
57

Árbol de contenidos
• Aspectos a considerar al crear un árbol de
contenidos:
• Secciones (5 a 7)
• Niveles (Máximo 3)
• Contenidos relacionados:
• Funcionalidades tales como buscador, preguntas
frecuentes, formularios (fuera del árbol).
58

Árbol de contenidos
59

El mapa del sitio web
• Estructura de vinculación que muestra de
manera gráfica los niveles y contenido
relacionados en el sitio Web.
• Permite representar gráficamente la
estructura del sitio y ubicar de manera idónea
todo el contenido.
60

Recordar:
• Desarrollar pruebas de funcionalidad implica evaluar
elementos tales como:
• Observación,
• Método del comportamiento de grabación, persona,
computadora,
• Retroalimentación, múltiples navegadores.
• Las hojas de estilo permiten actualizar sitios web
completos,
• Ofrecen un soporte estable,
• Reducen el tamaño del sitio.
62

Recordar:
• HTML, HEAD, BODY son etiquetas básicas de HTML.
• El contenido de un sitio Web se puede ordenar
mediante:
• Tablas de diseño.
• Listas ordenadas.
• Son propiedades que pueden ser editadas:
• El color de fondo de la página, tipo de fuente de letra,
color de vínculos, márgenes de página.
63

• Las encuestan brindan los elementos
necesarios para el diseño y desarrollo de un
proyecto en Dreamweaver ya que facilita
elementos como:
• Tipo de audiencia,
• Objetivos,
• etc.
64

Accesibilidad
• La accesibilidad es un factor importante al
momento de diseñar sitios web, ya que se
debe pensar en:
– La diversidad de usuarios que la visitarán,
– Usuarios con discapacidades.
65

Accesibilidad
• Algunos elementos que mejoran la capacidad
de uso y navegación en sitios web:
• El diseño de mapas de sitio,
• Los textos alternativos
• El etiquetado de vínculos
66

Diseño
• Algunos aspectos que se miden en el diseño
de sitios web son:
• Nivel de aceptación
• Satisfacción de los usuarios
• Adaptación del usuario a la navegación del
sitio web.
67

Pruebas de funcionalidad
• Técnicas utilizadas en las pruebas de facilidad de
uso.
• Apoyo en software que registra cada una de las
tareas de los usuarios para un análisis posterior.
• Utilizar observadores que anoten las reacciones
de los usuarios a medida que estos realicen
tareas en un laboratorio.
68

Accesibilidad
• Aspectos de credibilidad en un sitio web
• Actualización del sitio a menudo
• Facilitar los medios de contacto con la
empresa
• Verificación de la información.
69

Adobe dreamweaver cs4

Recommandé

Recommandé

Contenu connexe

En vedette

En vedette (20)

Similaire à Adobe dreamweaver cs4

Similaire à Adobe dreamweaver cs4 (20)

Plus de Elias Vite

Plus de Elias Vite (10)

Adobe dreamweaver cs4