Evaluación, Medición e Investigación Educativa Repaso Prueba Certificación de Maestros.
Repaso final de certificación dw
-
Upload
creatergolden -
Category
Technology
-
view
120 -
download
6
description
Transcript of Repaso final de certificación dw
Repaso Final Dreamweaver MTI Ma. del Rosario Agundis Laguna
PLANEACIÓN DE PROYECTO
Y DERECHOS DE AUTOR.
¿Cuál es el propósito de las encuestan para
desarrollar un proyecto en Dreamweaver?
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.
Accesibilidad de los sitios web
Los factores de 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,
entre ellos usuarios con discapacidades.
Elementos que mejoran la capacidad
de uso y navegación en sitios web
El diseño de mapas de sitio, textos
alternativos y etiquetado de vínculos son
elementos importantes que siempre se
deben de considerar al momento de
desarrollar o diseñar un sitio web.
Coherencia
El diseño de las páginas es importante ya
que este elemento mantiene la coherencia
de todo el sitio web.
Pruebas de facilidad de uso
Dos aspectos que se miden en el diseño de
sitios web son: nivel de aceptación y
satisfacción de los usuarios así como la
adaptación del usuario a la navegación del
sitio web.
Ejemplo de dos 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.
Aspectos de credibilidad en un
sitio web
Para que nuestro sitio web brinde
credibilidad a los usuarios se deben
mantener tres aspectos importantes como
son: la actualización del sitio a menudo,
facilitar los medios de contacto con la
empresa y la verificación de la información.
¿Qué es un guión gráfico? (bosquejo)
Es la representación gráfica de un proceso
visual deseado que en dreamweaver
contiene características como: nombre de
archivo, navegación e imágenes o dibujos.
Motivos comunes para utilizar guiones
gráficos en el diseño de sitios web.
• 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.
Principales características de la adición
de imágenes en nuestro sitio web.
Al momento de utilizar imágenes para el
diseño y desarrollo de nuestro sitio web se
deben tener en cuenta dos características
que son: el tamaño de las imágenes y la
relevancia para nuestro sitio.
¿Qué contenido está protegido por las
leyes de copyright ©?
Las leyes de copyright (derecho de copia)
protegen todas aquellas obras tanto
publicadas como no publicadas.
¿Podemos reproducir videos con derechos de
autor en nuestro sitio web, sin autorización previa?
Existe una forma de poder utilizar este
material sin autorización previa del autor,
dicha forma es reproduciendo únicamente el
10% o tres minutos máximo del material.
Interfaz De Dreamweaver
(Espacio De Trabajo)
Un sitio web no publicado en un servidor
remoto o host. ¿se conoce como?
Sitio local o bien la carpeta que contiene
nuestro proyecto guardado en nuestro
ordenador.
Ficha común
En esta ficha contamos con elementos para
inserción cómo: hipervínculo, anclaje, tabla,
imágenes, barra de navegación, etc.
Panel de archivos
Este panel nos ofrece permite ver el mapa
del desarrollo de nuestro sitio local y
remoto. También nos ofrece opciones como:
conectar al servidor remoto, actualizar,
obtener archivos, proteger archivos,
desproteger, sincronizar, expandir, vista
local, organizar archivos en carpetas, etc.
Comando o función “Sincronizar el sitio”
Este comando nos permite descargar los
archivos de nuestro servidor remoto al local
y viceversa.
Películas, Archivos .swf, plantillas, colores, URL,
Shockwave, biblioteca, etc. Son elementos que se
encuentran en:
Este conjunto de elementos se encuentran
en el panel de “Activos”
¿Qué característica tiene la
carpeta raíz?
Esta carpeta aloja el contenido de nuestro
sitio web en nuestro equipo
¿Qué características tiene una carpeta
remota?
Esta otra carpeta aloja el contenido de
nuestro sitio web en el servidor, conocido
también como (host)
Definición de sitios
Esta opción le permite crear y configurar
sitios locales y remotos por medio de dos
fichas de opciones “básicas y avanzadas”.
Proteger
Esta función le permite que sus archivos
puedan ser editados únicamente por el
propietario.
Desproteger
Al contrario de “proteger” esta opción
permite compartir y editar el archivo
seleccionado por más de un integrante de
su equipo de trabajo.
¿Cómo cerrar una conexión remota?
Si usted está utilizando una conexión
remota por medio de Dreamweaver vía
(FTP) y desea cerrar la conexión, utilice el
panel de archivos y haga click en el ícono
“Desconectar del servidor remoto”
Inspector o panel de propiedades
Este panel le permite modificar propiedades
del documento y de objetos insertados en el
mismo, en este panel encontrara algunas
opciones como: » Formato
» Clases
» Vínculos
» Título
» Destino
» Propiedades de página
» CSS
» HTML
» ID
Color de fondo (background)
El procedimiento estándar para poder
cambiar las propiedades de esta opción
como el color hexadecimal es el siguiente:
Menú> Modificar> Propiedades de la página
o documento>. El uso de background
también permite utilizar imágenes en
formatos GIF, JPEG y PNG.
Color Hexadecimal
Son colores sólidos compuestos por
caracteres alfanuméricos por ejemplo: color
negro (#000000), color rojo (#FF0000), etc.
Fuentes (tipografía)
Drreamweaver incluye ciertas fuentes como
predeterminadas por ejemplo. Arial,
verdana, Georgia, sans-serif, Times new
roman, etc.
Uso de fuentes (Tipografía)
Se recomienda el uso de las fuentes
predeterminadas en el diseño de sitios web,
ya que si se utiliza otro tipo de fuente puede
ser mal interpretada o sustituida por una
computadora que no cuente con dicha
fuente instalada. Esto puede afectar al
diseño de sitios web.
Título de página
Existen tres métodos para modificar el título
de la página web que se esta diseñando y
son los siguientes:
1. Menú> Modificar> Propiedades de la página
2. Identificar en la interfaz la parte denominada “Título”
3. Menú> Ver> Código y cambiar el nombre que se
encuentra entre las etiquetas <title>Documento sin
título</title>
Vista “Código”
Esta vista le permite ver el código HTML
que se esta empleando, así como editar la
información de fuente creada por programas
de diseño como (flash) y páginas web de
terceros.
PROCEDIMIENTOS,
COMPONENTES Y FUNCIONES
Imagen de sustitución
Este elemento está compuesto por dos
imágenes, la original y la de sustitución.
Normalmente se utiliza en la creación de
botones.
Optimización y descarga
Métodos para facilitar la velocidad de
descarga de su sitio web
Es importante que nuestro sitio web
descargue imágenes y contenidos de una
forma rápida, para lograr esto se
recomienda tomar en cuenta los siguientes
métodos:
• Hojas de estilo en cascada en el diseño de páginas
• Uso de miniaturas con las imágenes grandes
Optimizar imágenes para su
sitio
El mayor beneficio que se obtiene al
optimizar las imágenes de su sitio web es
“Menor tiempo de descarga”
Elementos de permanencia en todo el
diseño del sitio web
• Diseño de páginas
• Formato de las fuentes
• Botones de navegación
¿Cuántos colores existen en la paleta
de colores?
256 colores
¿Cuántos colores son conocidos como
seguros de la paleta de colores?
216 colores
¿Cuántos colores son reconocidos por los
exploradores de internet?
16 colores
¿Qué elementos cambian al momento de ser visualizados
por diferentes monitores y exploradores web?
Los colores
Ventaja de utilizar etiquetas “div”
Una de las ventajas al momento de utilizar
este tipo de etiquetas en nuestro diseño
web es para los programadores, ya que
facilita la codificación.
Procedimiento para establecer iluminación o
brillo a imágenes en Dreamweaver
Menú> Modificar> Imagen> Brillo/Contraste
Tipo de archivos permitidos para
importar en Dreamweaver
• XML (Xtensible Markup Language (lenguaje
de marcado ampliable o extensible).
• Datos de tabla
• Documento de Word (.doc), (.docx)
• Documento de Excel (.xls), (.xlsx)
Tabla
Este elemento le ayuda a mantener el
diseño de su página o sitio web
¿Cómo agregar textos alternativos?
En el panel o inspector de propiedades
encontraremos un elemento denominado
“Alt” con una casilla para insertar el nombre.
Otra forma es por método de Menú>
Insertar> Objetos de imagen> Marcados de
posición de imagen.
Editar imágenes JPG, PNG, etc.
El método para editar desde Dreamweaver
una imagen es por medio de la Tecla
Control+doble click sobre la imagen. Esta
acción abrirá paralelamente el programa
que usted tenga como predeterminado para
edición de imágenes por ejemplo: Fireworks
o Photoshop.
Eliminar una fila de tabla seleccionada
por método abreviado.
Para eliminar la fila seleccionada presione
las teclas CONTROL+SHIFT+M
Modo de tabla expandida
Procedimiento 1: haga click con el botón
secundario del mouse sobre la tabla,
seleccione la opción “Tabla” y a
continuación “Modo de tablas expandidas”.
Procedimiento 2: Presione las teclas
“ALT+F6”.
Eliminar objetos localmente
Al eliminar un objeto de su carpeta local
como: imagen. JPG, no se aplica el mismo
cambio en su carpeta remota hasta que
usted ejecute la sincronización del sitio.
Mapa de imagen
Esta herramienta sirve para crear “zonas
activas” en partes de la imagen para ser
vinculadas al destino deseado. Se
encuentra en el panel o inspector de
propiedades de forma rectangular, circular o
poligonal.
Perfilar imagen
Esta herramienta incrementa el contraste
alrededor de los bordes de la imagen, para
ejecutar este procedimiento seleccione la
imagen, haga click en el menú> “Modificar>
Imagen> Perfilar y agregue el valor
deseado.
Insertar
Existen dos formatos de archivo que no se
pueden insertar en Dreamweaver ya que
son archivos fuente y sus extensiones son
las siguientes:
.fla ( flash document)
.PSD (photoshop document).
Crear un hipervínculo a texto por
selección
Seleccionar con el cursor el texto o parte del
texto que contendrá el hipervínculo, a
continuación en el panel o inspector de
propiedades agregar la dirección URL o
archivo de destino por medio de la opción
Vínculo.
Opción verificar vínculos
Dreamweaver le ofrece la opción de verificar
todos los vínculos que contiene el diseño de
su sitio web, con el propósito de ayudarle a
no tener vínculos rotos.
Procedimiento 1: Menú> Sitio> Comprobar vínculos en
todo el sitio.
Procedimiento 2. Presionar la tecla F8
Panel de referencia
Este panel ofrece ejemplo en lenguajes de
marcado, programación, estilos CSS como:
html, xml,jsp, php, sql, xslt, etc.
Complementos de página
Estos elementos permiten insertar en su
sitio web applets, plug-ins, videos flv, o por
ejemplo ambientes o loops en formato mp3.
Que objeto o propiedad interpretan los
lectores de pantalla o exploradores.
Los textos alternativos
Herramienta “Párrafo o Formato”
Esta herramienta permite establecer
diferentes formatos de párrafo a los textos y
se encuentra en el panel o inspector de
propiedades > Formato> Encabezado
1,2,3,4,5,6, etc.
Énfasis a una cita de bloque
Para dar un mayor énfasis o importancia a
una cita se utilizan estilos por ejemplo:
negritas, cursivas, subrayado, énfasis,
destacado, código, etc.
Procedimiento: seleccionar el texto o cita y hacer
click con el botón secundario del mouse para
posteriormente seleccionar la opción de “Estilo”.
Comando Ortografía
Este comando le permite funciones como:
omitir palabra, cambiar palabra, cambiar
todas las ocurrencias de palabra, etc. Para
activar esta función existen dos
procedimientos:
1. Menú> Comandos> Ortografía
2. Teclas MAYÚSCULAS+F7
Estilos CSS
Los elementos CSS le proporcionan algunas
ventajas como el modificar colores de fondo,
texto e imágenes entre otros para facilitar el
diseño de sitios web que requieran cambios
por temporadas es decir (primavera, otoño e
invierno).
Lectores de pantalla
Los lectores de pantalla o buscadores
interpretan tres tipos de contenido:
• Títulos de página
• Cuerpo de texto de página
• Encabezado de columnas
Espacio de celdas
Para agregar espacio entre celdas definido
por el usuario, seleccione la tabla, vaya al
panel o inspector de propiedades y el la
opción de “Esp. Celda” coloque el valor de
10 px, o el que deseé.
Plantillas
Las plantillas facilitan el diseño de sitios web
que requieren de elementos que se utilizan
más de una vez
Insertar animaciones flash (.swf)
Insertar animaciones flash (.swf)
Ruta Absoluta
Esta ruta contiene una dirección de internet
completa por ejemplo:
http://www.macromedia.com/
Ruta completa
Contiene la ruta completa del sitio local al
de destino por ejemplo:
http://www.macromedia.com/support/dream
weaver/contents.html
Ruta Relativa a la raíz del sitio
Especifica la ruta de los archivos con
ubicaciones de directorio idénticas por
ejemplo:
/Imágenes/background/fondo_1.jpg
Atributos de “div”
Tres atributos de etiquetas div son:
• ID
• Style
• class
CÓDIGO HTML
Etiqueta “Table”
Se utiliza alternativamente a la
etiqueta “div” para organizar el
contenido del sitio web.
Etiquetas que requieren de valores de
atributos definidos
<body bgcolor=""> y <body background="">
Snippets o fragmentos
Esta opción le permite crear código
HTML y guardarlo para emplearlo
varias veces.
Etiqueta HREF<mailto>
Esta etiqueta le permite crear un vínculo de
correo electrónico mediante código HTML,
otra opción es por medio del Menú>
Insertar> Vínculo de correo electrónico.
Etiqueta <align>
Esta etiqueta se utiliza para la alineación de
textos y objetos en dreamweaver.
Etiqueta <h1>
Se utiliza para cambiar textos de
encabezado.
Etiquetas <h1> y <HTML>
Son etiquetas que no requieren de
valores o atributos definidos
Etiqueta <td>
Representa una celda de tabla.
Etiqueta <div>
Se utiliza como alternativa a las tablas para
organizar el contenido.
Etiqueta <tittle>
Contiene el título de la página web
Etiqueta <p>
Párrafo
Etiqueta <ol>
Lista
Etiqueta <li>
Elemento de lista
Etiqueta <head>
Define la cabecera del documento, que
contiene información sobre el documento
Etiqueta <body>
contiene el cuerpo del documento, lo que
será representado por el navegador.
Etiqueta <EM>
Significa énfasis
Etiqueta <strong>
Énfasis fuerte
Etiqueta <A>
ANCHOR ancla o hipervínculo , puede ser
el origen o el destino del hipervínculo.
Etiqueta <link>
Vincular a objeto
Etiqueta <br>
Salto de línea
Etiqueta <tr>
Fila de tabla
Etiqueta <th>
Encabezado de tabla
Etiqueta <style>
Información de estilo
Etiqueta <ul>
Lista no ordenada
Etiquetas siempre presentes en
HTML
<body>, <head> y <HTML>
Selector de etiquetas
Esta opción le permite insertar una variedad
de etiquetas de código HTML como: b, em,
p, h1, etc.
Procedimiento: Menú>Insertar> Etiquetas