uso de paquetería para la elaboración de sitios web...
TRANSCRIPT
1
Universidad Nacional Autónoma de México
Facultad de Contaduría y Administración
Uso de paquetería para la elaboración de Sitios Web Educativos
Mtra. Marlene Olga Ramírez Chavero
Septiembre 2009
2
Una Página Web (o Página de Internet) es un documento que contiene información específica de un tema en particular y que se encuentra almacenado en un sistema de
cómputo que está conectado a la red mundial denominada Internet, de tal forma que cualquier persona que esté conectada a ésta red, pueda tener acceso a él.
Un Sitio Web es un conjunto de páginas Web relacionadas entre sí, que ofrece
contenidos ya sea mediante texto, imágenes o sonidos sobre algún tema en particular.
Un Portal es un sitio en la Red que provee de información y conocimiento sobre temas específicos de manera ordenada y que además ofrece a sus usuarios servicios
diversos entre los que pueden estar correo electrónico, búsquedas, foros, chat,
publicación de noticias, etc. El portal es la puerta de entrada a otros sitios en la Red en base a un tema común.
Las páginas de Internet, son escritas en un lenguaje de etiquetas denominado HTML
(HyperText Markup Language = Lenguaje para marcado de Hipertexto), este lenguaje genera un código que posteriormente traduce un navegador (Internet Explorer,
Netscape o cualquier otro), para que pueda visualizarse lo que normalmente vemos en Internet.
Para reducir el trabajo que representa escribir el código de una página Web, algunas
empresas han creado Editores de código HTML, que hacen esta tarea menos complicada.
Uno de ellos, talvez el mejor en la actualidad es el creado por la empresa Macromedia:
Dreamweaver.
Dreamweaver es un editor de código HTML que permite crear páginas Web de
manera sencilla.
Es utilizando lo mismo por profesionales que por principiantes, ya que posee herramientas sencillas de manejar, pero tan potentes que permiten crear sitios
complejos.
En éste documento, trabajaremos con la versión, pues aunque existen algunos cambios en las versiones posteriores las herramientas son muy parecidas, el cambio
no representará mayor problema.
3
CONOCIENDO EL AREA DE TRABAJO Al igual que los demás programas que trabajan sobre Windows, Dreamweaver se
puede abrir desde el botón Inicio (Inicio – Programas - Macromedia – Macromedia Dreamweaver), o presionando doble clic sobre el icono que aparece en el escritorio.
Una vez abierto, nos mostrará esta pantalla:
Disposición de espacio de trabajo predeterminada.
4
Lo que vemos en la parte superior es:
BARRA DE TÍTULO
En esta zona debe aparecer entre corchetes el título del documento, y entre paréntesis
el nombre de la carpeta y el nombre del archivo con el que estamos trabajando.
Ejemplo:
BARRA DE MENÚS
Esta barra nos presenta los menús con que cuenta el programa. Al desplegar cada uno de ellos, veremos diferentes opciones que nos permitirán crear, modificar, agregar,
etc., características a nuestras páginas.
GRUPO DE PANELES INSERTAR
El grupo de paneles Insertar, contiene fichas que a su vez contienen botones que permiten insertar diversos objetos en la página.
PANELES DEL GRUPO INSERTAR
Insertar Común. Contiene botones para crear e insertar los objetos más utilizados como imágenes,
tablas y capas.
Insertar Disposición. Permite insertar tablas y capas, y elegir entre dos vistas de tablas.
Insertar Texto. Inserta etiquetas de formato de texto y listas.
5
Insertar Tablas.
Inserta una tabla completa o una etiqueta de tabla determinada.
Insertar Marcos. Permite crear diseños de conjuntos de marcos.
Insertar Formularios. Permite crear formularios y agregar elementos de formulario (botones, campos de
texto, casillas de verificación, etc.).
Insertar Plantillas. Permite guardar documentos como archivos de plantilla e insertar distintos tipos de
regiones en un archivo de plantilla.
Insertar Caracteres. Contiene caracteres especiales como copyright, marca registrada, etc.
Insertar Media.
Permite insertar objetos multimedia interactivos o animados como botones y texto fash, applets java, etc.
Insertar Head. Permite insertar elementos en la sección Head como etiquetas meta y base.
Insertar Script.
Permite insertar una sección script, noscript o server-side include.
Insertar Aplicación. Permite añadir comportamientos del servidor a la página, como juegos de registros,
regiones repetidas y grabar formularios de inserción y actualización.
BARRA DE HERRAMIENTAS DOCUMENTO
Contiene botones y menús emergentes que proporcionan diferentes vistas de la
ventana de documento (como la vista de diseño y la vista de código), opciones de visualización, vista previa, etc.
6
BARRA DE HERRAMIENTAS ESTÁNDAR
Contiene botones para las operaciones más comunes de los menús Archivo y Edición
como: nuevo, guardar, abrir, copiar, cortar, pegar, etc.
A la derecha podemos ver otros grupos de Paneles: Diseño, Código, Aplicación, Archivos, Disposición Avanzada y Respuestas.
Para poder utilizar alguno de éstos paneles, es necesario dar clic en la flecha de
ampliación:
y posteriormente dar clic en la ficha del panel que queremos ver.
A continuación se menciona la utilidad de algunos de los paneles más importantes.
PANEL SITIO (del grupo de paneles archivos)
Este panel se encarga de administrar los Sitios y las páginas que los integran.
7
PANEL HISTORIAL
Muestra una lista de todos los pasos llevados a cabo desde que se creó o se abrió el archivo hasta un determinado máximo de pasos.
PANEL RESPUESTAS
Este panel ofrece tutoriales, notas técnicas, información de interés, etc, que nos
ayudarán a resolver aquellas dudas que pudieran surgir durante la creación de un documento.
En la parte inferior se encuentra el Inspector de Propiedades. Por medio de este panel, podemos ver y cambiar las propiedades del objeto o texto seleccionado. Cada
tipo de objeto tiene diferentes propiedades.
8
Algunas de las propiedades que se pueden cambiar desde aquí, son: color, tamaño, alineación, fuente, nombre de objetos, etc.
Ahora que conocemos los elementos que integran el programa Dreamweaver,
podremos empezar a diseñar un Sitio Web, con el cuál iremos aprendiendo como se utilizan las herramientas que nos ofrece.
EMPEZAR A CREAR UN SITIO WEB
La idea es crear un Sitio de Internet para una agencia de automóviles.
El primer paso consiste en crear una carpeta para nuestro sitio, por lo cual daremos clic en el menú Sitio y posteriormente en Nuevo Sitio…
9
La pantalla que nos aparecerá será:
La ficha “Básicas” solo contiene el nombre del Sitio, por lo tanto no nos interesa, ya que al proporcionarlo en la ficha “Avanzadas”, inmediatamente aparece también en
ésta.
De la ficha “Avanzadas”, sólo escribiremos los datos correspondientes a la opción: Datos Locales.
Nombre del Sitio se refiere al nombre que le daremos a nuestro Sitio, para éste
ejemplo utilizaremos el nombre: MiSitio
10
Carpeta raíz local se refiere a la carpeta en que guardaremos nuestro Sitio, es decir todas las páginas e imagines que lo integren. Para nuestro ejemplo, crearemos una
carpeta dentro de C, y la llamaremos Agencia. Una vez que hayamos escrito “Agencia”, daremos clic a la carpeta que se encuentra al lado del cuadro de texto.
Que nos presentará la siguiente ventana:
11
Elegiremos la unidad C y posteriormente daremos clic al icono crear nueva carpeta.
Proporcionamos el nombre, en este caso: “Agencia” y posteriormente presionamos abrir, nos aparecerá esta otra ventana:
Presionamos Seleccionar y nuestra ventana quedará así:
12
Presionamos Aceptar. Nuestro panel Sitio ahora quedará así:
13
Como podemos observar, Dreamweaver ha creado ya la carpeta Agencia y ha creado también el primer documento, al cual ha llamado Untitled-1.
Antes de cualquier otra cosa, procederemos a guardar este archivo, para esto, será
necesario hacer lo siguiente:
Dar Clic en el menú Archivo, seleccionar opción Guardar como… y aparecerá la siguiente ventana:
14
En Nombre, pondremos el nombre del archivo, en este caso es el primero y por lo tanto será el principal, por lo cual lo llamaremos index. Dreamweaver se encargará
de agregar la extensión correspondiente (htm), y damos clic en Guardar.
Es muy importante que nuestro sitio tenga un archivo llamado “index”, ya que es el archivo que buscan los navegadores cuando se les direcciona a nuestro Sitio.
El resultado será:
Podemos observar que la pestaña inferior ha cambiado de nombre, de Untitled-1 a
index, y el sitio “MiSitio” ahora contiene un archivo llamado index.htm.
15
TEXTO Bien, ahora empezaremos por escribir un pequeño texto.
En el espacio vacío escribamos: Agencia “El auto veloz”, nuestra pantalla se verá así:
Ahora seleccionaremos el texto que acabamos de escribir para empezar a modificar
sus características. Recordemos que las características de los objetos o textos los modificamos en el Panel Propiedades.
En primer lugar cambiaremos la fuente, en Internet, es aconsejable utilizar fuentes de
tipo Sans Serif, ya que permiten leer fácilmente a diferencia de los tipos Serif.
Algunas de las fuentes de tipo Sans Serif son: Arial, Arial Narrow, Verdana, Impact, Tahoma, Trebuchet MS, etc.
Utilizaremos para nuestro ejemplo la fuente Verdana, aplicaremos negrita, cambiaremos el color a azul, modificaremos el tamaño a +2 y centraremos el texto.
Nuestra pantalla se verá así:
16
Antes de continuar, le pondremos título a nuestra página, éste título es el que
aparecerá en el Explorador de Internet.
Como podemos observar en el título del documento de Dreamweaver:
Aparece en primer lugar el título de la página (Agencia Principal), seguido del nombre de la carpeta raíz en la cual se encuentra (Agencia) y el nombre de la página (index).
Podemos observar un *, esto nos indica que no hemos grabado, por lo cual será conveniente guardar en este momento.
Guardamos desplegando el menú Archivo – Guardar y el asterisco habrá desaparecido.
17
Con F12 podemos ir visualizando la página. Nuestro ejemplo se verá así:
FONDO
Bien, continuaremos con el fondo de la página.
Para el fondo, abriremos el menú contextual en alguna parte del área de trabajo y seleccionaremos Propiedades de la página.
18
Aparecerá la siguiente ventana:
19
La opción Imagen de fondo nos permite insertar una imagen como fondo de la página, si quisiéramos agregar una imagen, deberemos dar clic en Examinar…, elegir
la imagen y Aceptar.
Pero si lo que deseamos es dar un color al fondo, entonces elegimos el color, aplicamos para ver si queda como esperábamos y damos clic en Aceptar.
Nuestro ejemplo quedaría así:
TABLAS
Ahora, agregaremos una tabla de una columna y dos filas, esto para colocar una imagen y un texto. Es conveniente hacerlo dentro de una tabla, para que sea más fácil
alinearlos.
Bien, damos clic en el panel Tablas y clic en el icono aparecerá la siguiente ventana:
20
Escribimos el número de filas y columnas que deseamos y damos Aceptar.
Este será el resultado:
Para tener un espacio amplio y de alguna forma poder visualizar como se verá nuestra página en tamaño normal, es conveniente dar clic en la flecha de ampliación ubicada a
la derecha del área de trabajo.
21
Nuestra pantalla se verá así:
Ahora insertaremos dentro de la primera celda de la tabla, una imagen, para esto,
colocamos el cursor dentro de ésta celda, damos clic en el menú Insertar y
seleccionamos la opción Imagen.
22
Nos aparecerá esta ventana:
En “Buscar en:“ buscamos la carpeta que contiene la imagen que deseamos insertar,
la seleccionamos y damos clic en Aceptar.
23
En este caso, el archivo que deseo insertar se encuentra fuera de la carpeta que
contiene los archivos del sitio, es necesario que todos los archivos .html e imágenes o cualquier otro archivo que forme parte del Sitio se encuentren dentro de dicha
carpeta. Si no es así, aparecerá esta ventana que nos preguntará si deseamos que
copie el archivo a nuestra carpeta, la respuesta debe ser: .
A continuación nos mostrará una ventana con la carpeta donde se encuentra nuestro
Sitio, si deseamos tener una carpeta especial para imágenes, que es lo aconsejable, será necesario crear una nueva carpeta, asignarle un nombre, abrirla y guardar
nuestra imagen.
24
Nuestra pantalla se verá así:
25
Como podemos ver la imagen es demasiado grande, para resolver este problema,
modificaremos el tamaño desde el panel de propiedades de la siguiente manera:
O bien seleccionar la imagen y ajustar los lados:
En nuestro caso, dividiremos ambas medidas a la mitad, centraremos la imagen y nuestra pantalla se verá así:
26
Ahora insertaremos en la segunda celda el siguiente texto:
Desde 1927… entregando hasta la puerta de su hogar…
Los automóviles más solicitados… Tel. 5585-5585, Fax. 5585-5586
Seleccionamos el texto, y cambiamos la fuente a Verdana, tamaño -1, color azul
(#000066), alineamos al centro. Damos F12 para visualizar la página y obtendremos esto:
27
Como podemos ver, los bordes de las celdas no se ven precisamente bien, para
desaparecerlos o reducir su grosor, cambiamos el número en el panel de propiedades de la siguiente forma:
Primero seleccionamos la tabla:
28
Una vez seleccionada, cambiamos el tamaño del borde.
En nuestro ejemplo, quitaremos el numero, con esto le decimos que no deseamos ver los bordes, es decir el valor es 0, o bien podemos escribir: 0. El resultado será:
29
Si por ejemplo, además quisiéramos agregar una página que nos mostrará los
modelos con que cuenta la agencia, podemos insertar un texto que podamos usar como hipervínculo para acceder a ella.
Nos posicionamos al final del número de fax, y damos Enter, escribimos VER
MODELOS, seleccionamos el texto y nos vamos al Panel Propiedades.
En propiedades, le cambiamos el color a rojo (#FF0000), tamaño -1, fuente Verdana, negrita, alineamos al centro y antes de crear el hipervínculo, creamos un nuevo
archivo al cual llamaremos Modelos.html.
Esto lo hacemos de la siguiente manera:
1. Nos vamos al panel Sitio del grupo de paneles “Archivos”.
2. damos clic sobre la carpeta principal.
30
3. Ahora damos un clic sobre el menú Archivo y seleccionamos Nuevo Archivo.
Aparecerá el nuevo archivo con un nombre que le asigna Dreamweaver, nosotros
pondremos el nombre que deseemos darle a nuestro archivo, en este caso: Modelos.htm
31
Nuestro panel Sitio ahora se verá así:
Por el momento, retomaremos el punto en el que nos quedamos, que era crear un
hipervínculo, para lo cual necesitábamos de otro archivo html, y posteriormente diseñaremos nuestra página Modelos.htm
32
Nuevamente, seleccionamos el texto “Ver Modelos” y en el panel propiedades vemos la opción Vínculo, damos clic en la carpeta que se encuentra a la derecha para buscar
el archivo al cual vincularemos nuestro texto.
Seleccionamos el archivo. En nuestro caso, será el que nombramos Modelos. Y
damos Aceptar.
En Dest, seleccionamos _parent para que abra la página en una nueva ventana.
33
Ahora nuestro texto queda así:
Al presionar la tecla F12, nuestro navegador mostrará lo siguiente:
Si presionamos sobre el hipervínculo, el navegador nos llevará a una página en blanco
porque aún no hemos diseñado nada en la página Modelos.htm
34
IMAGENES Si deseamos crear un hipervínculo utilizando una imagen, debemos realizar los
siguientes pasos:
1. Seleccionar la imagen.
2. Dar clic en la carpeta que se encuentra a la derecha del cuadro de texto Vínculo. 3. Elegir la página hacia la cual se va a dirigir cuando sea presionado dicho
hipervínculo. 4. Dar clic en Aceptar.
Y listo, tenemos un hipervínculo hacia una página utilizando una imagen.
La pantalla de Dreamweaver se verá así:
Y la pantalla del explorador así:
35
Pero si solo deseamos utilizar una pequeña parte de la imagen, entonces emplearemos alguna de estas herramientas:
Herramienta zona interactiva rectangular
Herramienta zona interactiva oval
Herramienta zona interactiva poligonal.
Con estas herramientas creamos un mapa de imagen, que no es otra cosa que una
imagen que se ha dividido en regiones o zonas interactivas, que al ser presionadas por el usuario realizan una acción, como abrir una página por ejemplo.
Estas tres herramientas, se vuelven visibles en el panel Propiedades al seleccionar una
imagen.
36
Por ejemplo, de la segunda imagen, tomaremos sólo las dos puertas utilizando la herramienta zona interactiva poligonal.
Nos posicionamos en algún punto de la zona, damos un clic, y avanzamos, marcando
con otro clic, cada vez que vayamos a cambiar la dirección de la línea que vamos siguiendo, al llegar al punto inicial, daremos doble clic para indicar que hemos
marcado toda la zona.
Nuestra imagen se verá así:
Ahora elegiremos la página hacia la cual se enlazará el hipervínculo.
Por ejemplo:
37
Al posicionarnos sobre la imagen dentro del Explorador, sólo aparecerá la señal de hipervínculo en la zona que hemos marcado.
PSICOLOGÍA E IMPORTANCIA DEL COLOR
Por definición, color es la sensación resultante de la estimulación de la retina del ojo
por ondas lumínicas. Los colores están presentes en la naturaleza, en las formas, en los objetos y es lo que les brinda volumen, profundidad y personalidad.
El color juega uno de los papeles más importantes en el diseño, su uso prudente puede aumentar la eficacia de los visuales, ya que
gracias a él, podemos evocar y transmitir reacciones emocionales al usuario. A través del color se puede jerarquizar los temas y
subtemas e incrementa respuestas, además de estimular el interés del que mira. El color es expresión y por esto se le asignan otros
significados, ya sea por una cultura determinada, por un artista o por quien trabaje la obra, todo depende de lo que desea representar y
expresar, respondiendo a motivaciones personales. También es necesario que exista el contraste entre el fondo y la figura.
En general, los colores tienen propiedades psicológicas que actúan sobre nuestro subconsciente. Los colores cálidos (rojo, amarillo, naranja) provocan sensaciones de
acción, intervención o respuesta a un requerimiento y cercanía en el espacio. Por el contrario, los colores fríos (verde, azul, violeta) consiguen crear asociaciones con
situaciones más estáticas y dimensiones más lejanas. Los colores cálidos y fríos probablemente se asocian universalmente al sol y al fuego, o bien, al agua y la
vegetación.
La evocación de sentimientos va a menudo unida a colores que definimos como
“calientes” o “fríos”, según las sensaciones que en nosotros susciten y el estado de
38
ánimo; por ejemplo, decimos: “Me puse rojo de vergüenza”, “Tenía las manos moradas de frío”, “Estaba verde de envidia”, “Se puso blanco del susto”.
LOS COLORES EN INTERNET
Los elementos de diseño con color de fondo son ignorados por los usuarios, interpretados como publicidad, información de contexto o estética. Los elementos con
fondo blanco, por el contrario, son interpretados como contenidos reales del sitio donde se encuentra lo que el usuario busca.
Utilización actual de los colores. Las cabeceras de los sitios Web, el nombre y el logotipo, típicamente tienen color de fondo en casi todos los sitios. Es información de
contexto poco relevante para el usuario y por ello es el área más ignorada. En ningún caso se debe colocar un vínculo a contenidos importantes del sitio en la cabecera o
cercano a ella.
Los colores de fondo también se utilizan para intentar resaltar la publicidad,
promociones y los contenidos del sitio que se quieren potenciar, es decir, contenidos que el usuario no busca, pero se quiere que vea. En realidad el efecto es el contrario,
el contenido con fondo de color es anulado y cuanto mayor sea la intensidad del color utilizado, menor será la visibilidad de ese contenido.
Los usuarios ignoran los textos con fondo de color. Ignorar los fondos de color no es
un comportamiento deliberado, es la reacción defensiva del sistema cognitivo del usuario para evitar procesar información no relacionada con sus objetivos. Los
estudios de "eyetracking" (seguimiento de movimientos oculares) confirman que los usuarios no miran las áreas con colores de fondo y se centran preferentemente en los
contenidos en fondo blanco.
Los usuarios aprenden que cualquier fondo con texto de color no es una información
realmente útil. Normalmente es publicidad, promociones o simple decoración. Como respuesta los usuarios desarrollan un patrón perceptivo, que les hace ignorar las áreas
fuertemente coloreadas del sitio. Aprenden que los contenidos reales del sitio tienen siempre fondo blanco y por ello es más útil y rápido centrarse únicamente en ellos.
Utilización adecuada de los colores. El color de fondo se puede utilizar para separar unas áreas de otras y crear rupturas que ayuden a jerarquizar y separar los
contenidos. Utilizar pequeños elementos de color sobre un fondo mayoritariamente blanco es una manera de separar contenidos y que no se confundan.
Cuando se coloque un texto sobre un color de fondo, hay que tener en cuenta que
será ignorado y por tanto este texto no debe ser importante para la comprensión del sitio Web.
39
Las pantallas de ordenador de los usuarios por lo general soportan miles de colores. Es raro encontrar monitores con 256 colores aunque aún existen algunos y va siendo
normal encontrar monitores con millones de colores.
La selección de "colores básicos" del sitio se debe mantener dentro del rango de 256 colores. Se puede ampliar el rango en elementos no fundamentales (fotos,
ilustraciones, etc) pero se debe asegurar que el 100% de la población podrá acceder al sitio sin problemas. A la hora de seleccionar los colores se debe identificar las partes
del sitio.
Las emociones y los colores
Las emociones asociadas a algunos colores tienen un fuerte componente cultural; por
ejemplo, en China la muerte se asocia con el verde mientras que en occidente se asocia al color negro; en otros contextos se asocia el verde con la envidia. El rojo en
China significa buena fortuna mientras que en occidente se asocia al espíritu deportivo.
Sin embargo, hay que notar la diferencia entre las emociones y los significados, mientras que las emociones son inconscientes los significados tienen un
contexto cultural y convencional más fuerte. Los colores más fuertes emocionalmente parecen ser rojo y azul. La visión del color rojo es capaz de aumentar la presión
sanguínea y el ritmo cardíaco, mientras que el azul parece tener el efecto contrario.
Los colores se distinguen en colores cálidos (amarillos, rojos, naranjas) y colores fríos (azules, verdes y violetas).
En este ejemplo los colores de la mitad izquierda se consideran cálidos mientras los de
la derecha se consideran fríos.
Los investigadores de mercados han realizado esfuerzos considerables a conocer qué colores son preferidos por los consumidores y cuáles son las modas en esta
materia.
40
Los significados y asociaciones de colores varían notablemente entre los pueblos pero son bastante uniformes para el mundo occidental, debido probablemente a la fuerte
homogeneización cultural.
Del libro “Color Harmony for the Web” de Cailin Boyle extraemos algunos de los
significados atribuidos al color en la cultura occidental.
Rojo: Peligro, excitación, fuego, pasión, sangre, luchar o huir; llama la atención, cierta connotación sexual. El rojo tiene una poderosa acción estimulante sobre el
estado de ánimo del ser humano, debiendo ser usado con cautela. En áreas muy extensas puede ser opresivo e irritante, usando en forma adecuada tiende a dar vida y
alegría a las superficies causando la sensación de aumento de volumen y de temperatura de los ambientes.
Púrpura: Riqueza, realeza, sofisticación, inteligencia.
Azul: Serenidad, Tranquilidad, verdad, dignidad, constancia, fiabilidad, poder. El azul también tiene un efecto calmante y es usado en ambientes para reposar; si las
áreas son muy extensas tornan los ambientes fríos y vacíos. Físicamente causa la ilusión que los ambientes son frescos y da sensación de distante.
Negro: Sofisticación, elegancia, poder, rebelión, connotaciones sexuales. El negro es un color que normalmente se usa en combinaciones con otros. Físicamente usado
solo, da la sensación de aumento de temperatura y opresión y disminución del volumen de los ambientes.
Blanco: Pureza, limpieza, luminosidad, vacío. El blanco es estimulante y alegre,
aclara los ambientes; usado en exceso provoca la sensación de cansancio a la vista,
físicamente de la ilusión de aumento de volumen de los ambientes.
Amarillo: Calidez, el sol para muchas culturas, brillo, alegría si está poco saturado. El amarillo estimula el sistema nervioso central e induce a la jovialidad,
por ser un color de alta luminosidad es usado con ventaja en ambientes con poca luz natural y también para señalizaciones. Físicamente causa la sensación de aumento de
temperatura y de volumen de los ambientes.
Naranja: usado en pequeñas áreas es estimulante y provoca bienestar alegrando
los ambientes. Usado en exceso se torna irritante. La sensación física que causa es aumento de la temperatura y volumen de los ambientes. Este color es muy utilizado
en lugares de comida ya que se le atribuye el poder de abrir el apetito.
Verde: Naturaleza, frescor, vegetación, salud, los verdes azules son los favoritos de los consumidores. El verde tiene un efecto calmante y relajante, usando en
41
exceso torna a los ambientes monótonos, físicamente causa la impresión de liviano y distante.
Los colores no solo destacan la apariencia de la información, también influyen en el comportamiento humano. Es necesario tomar en cuenta el impacto de los colores que
vamos a usar con respecto al público al que apuntamos.
Características del color en una interfaz gráfica
Veamos ciertas relaciones que se deben considerar a la hora de seleccionar la gama
de colores en pantalla:
Un objeto pequeño parecerá aún más pequeño si se coloca cerca de una superficie grande.
Un color claro parecerá más claro sobre un fondo oscuro que sobre un fondo claro.
Un color llama más la atención si se encuentra sobre un color mezclado que si
está sobre un color vivo.
Cada color muestra más claramente sus características si se coloca cercano a su
complementario.
Cuando se trata de colores es mejor usarlos en forma prudente antes que arriesgarse a provocar una dispersión de la atención del usuario. Un proyecto que utilice una
buena selección de colores va a enriquecer y a ayudar a mejorar el diseño.
Una de las razones para aprovechar las ventajas del color es: ofrecer al usuario la
misma información pero de una forma más persuasiva o amistosa, incrementando su interés. Por lo tanto, la principal utilidad que va a tener el color en las pantallas de
nuestra interfaz gráfica será la de resaltar algún tipo de información o elementos que se consideren más importantes del resto, de esta manera se identificarán más
fácilmente.
Uno de los errores más habituales a la hora de diseñar una pantalla es abusar del color. Esto ocurre cuando en la aplicación se presentan, diferente gama de colores, lo
que provoca confusión a la persona que va a manejarla, ya que acaba preocupándose
más de adaptar su vista al continuo cambio de color que al contenido de la información.
El color del fondo de la página debe preferirse de un color suave, que no canse la vista
y que permita la visualización de cualquier tipo de imágenes. Deben evitarse las fotografías, texturas y marcas de agua ya que, además de hacer más lenta la carga de
la página, interfieren en la definición y legibilidad del texto, lo cual provoca un rápido cansancio en la lectura de textos largos en pantalla.
42
A continuación se presentan las relaciones que se establecen entre los colores más comunes y ciertas actitudes mentales.
Combinaciones entre colores
Existen algunas combinaciones entre colores que pueden considerarse correctas e incorrectas. Por ejemplo, los colores claros quedan bien integrados si se unen con
colores oscuros, ya que existe un buen contraste, pero en determinados casos se pueden combinar con tonos también claros, excepto si son muy parecidos, como es el
caso del azul y el verde.
A continuación se muestra una tabla donde se proponen algunas combinaciones tanto
correctas como incorrectas.
43
CONSEJOS PARA REALIZAR PÁGINAS WEB
Existen algunos consejos y trucos que pueden ayudar al momento de diseñar y organizar una página Web mismos que se dividen fundamentalmente en cinco etapas:
1. HERRAMIENTAS
A). Construcción de la página HTML vs Editores. El utilizar el HTML puro tiene una gran ventaja y es que el código se comporta exactamente como el desarrollador necesita. A
diferencia de los editores no se necesita conocer el código debido a que el programa lo genera, así que agilizan el trabajo en gran medida, la interfaz es muy fácil de usar
pero la desventaja es que el código genera mucha basura.
B). El software y herramientas. Existen diversas herramientas que es necesario utilizar
como editores, programas de diseño, de animación, entre otros.
2. ELEMENTOS Y CONTENIDO A). Tomar en cuenta las necesidades: No es lo mismo diseñar una página personal
que para una empresa.
B). El poder del lápiz. Se recomienda hacer el boceto o desarrollar la primer idea en
papel para que el desarrollador o diseñador no se limite en un programa.
C). Visitar otras páginas del mismo tema. Esto ayudara a visualizar el contenido de sitios similares, se podrán ver los errores y aciertos en los sitios para tomarlos en
cuenta a la hora de construir el propio.
D). Jerarquizar la información. Darle la importancia que se merece a cada una de las
opciones y ponerlas en ese orden, ya que así se captará mejor la atención del usuario.
44
E). La regla de los tres clicks. No poner la información prometida a más de tres clic.
F). Textos excesivamente largos. Lo mejor es presentarle solo la información más
relevante y resumida. No son recomendables los textos largos ya que la lectura en pantalla es muy cansada por la luz que emite el monitor. En este caso lo mejor es
proporcionarle al usuario archivos que puedan descargar (Word o pdf) para su lectura en papel así el podrá hacer las anotaciones pertinentes y leerlo sin necesidad de una
máquina.
G). Evita los scrolls. En las pantallas principales, por lo extenso de algunos contenidos es imposible evitarlos scrolls o barras de navegación verticales; aunque los
horizontales en ninguno de los dos casos están permitidos.
H). Una página Standard no debe sobrepasar las 60K, lo que conlleva una carga de
unos 30 segundos con un módem de 56K.
I). Enlazar todas las páginas con el índice. No hay que dejarle el trabajo a los botones de atrás del navegador. Es importante enlazar todas las interiores con el menú
principal.
J). No engañar al usuario. Si se le prometió alguna información es importante
asegurarse de proporcionarla.
K). Es mejor escribir en minúsculas. Debido a que un texto en mayúsculas se tarda en leer una media de un 30% más que en minúsculas.
L). No subrayar los textos. Ya que se pueden confundir con ligas o hipertextos.
M). Sonido: Para Web es demasiado pesado, esto generaría un tiempo amplio para su descarga, lo mejor en este caso es preguntarse ¿Va añadir algo?, en caso de que la
respuesta sea NO es mejor omitirlo.
N). La tipografía. Es importante ya que gracias a ella el usuario se enterará del
contenido, si no es visible o de buen tamaño el usuario terminará por salirse del sitio.
3. GRÁFICOS A). El tamaño es importante: formatos más recomendados son los gif y jpg.
B). Utiliza los thumbnails. O imágenes pequeñas para descargas rápidas, solo en caso
de que el usuario desee verlas presionando, éstas podrán tener una visión amplia de cada una de ellas. Este recurso es muy utilizado en las galerías.
C). Especificar el tamaño de las imágenes. Con las etiquetas ancho y alto en HTML para que el navegador respete ese espacio y descargue la información escrita, ésto
agiliza el tiempo de descarga de la página Web.
45
D). Utilizar el mismo gráfico varias veces. Gráficos que se estarán utilizando frecuentemente como los botones, los logotipos, algunos títulos.
E). Los fondos. Los más recomendados son los fondos lisos en colores claros. En caso de utilizar una imagen o texturas es necesario verificar que no afecte en la
presentación de ninguno de los elementos como el texto o las imágenes.
4. ANTES DE PUBLICAR A). Ver el sitio en más de un navegador, o en los navegadores más comunes para
verificar que el sitio no sufre de cambios severos que pudieran afectarlo.
B). Revisarlo en las plataformas más comunes PC y Mac. El objetivo es el mismo que el del punto anterior.
C). La ortografía. Se recomienda revisarla ya que un sitio con faltas de ortografía pierde su credibilidad.
D). Incluir una sección donde los visitantes puedan dar su opinión o aportar
información, que ayude a mejorar una página.
E). Antes de subir la página al servidor, revisar todos los enlaces. Que las rutas no se
encuentren rotas o estén equivocadas.
F). Hacer pruebas de la página con el usuario final. Para conocer la opinión de este y si surge algún error corregirlo antes de darle salido al sitio.
G). Aumentar el número de visitas. Promoviendo el sitio para que los usuarios lo
utilicen, ya sea dándolo de alta en los buscadores más conocidos o anunciándose en
sitios del mismo tema.
46
AnexoS
Objetivos de aprendizaje
El diseño de la instrucción del material didáctico impreso, parte de la definición de las
acciones que seguirá el estudiante para lograr el aprendizaje, plasmadas en los objetivos de aprendizaje.
De acuerdo con los conocimientos, habilidades y actitudes que se desea que el estudiante desarrolle será el tipo de objetivos de aprendizaje que diseñes:
1. Objetivos dirigidos a la adquisición de conceptos. Son aquellos centrados en la
construcción de conceptos de áreas específicas; desarrollo de la capacidad para comparar, articular y aplicar los conceptos.
2. Objetivos dirigidos a la consecución de destrezas cognitivas. Son lo orientados al dominio de la comprensión, búsqueda, reconocimiento, planteamiento y
resolución de problemas; al desarrollo de la capacidad de análisis y síntesis y a la reflexión del proceso de conocimiento propio.
3. Objetivos dirigidos a actitudes y valores. Son los orientados al desarrollo de actitudes relacionadas con el ámbito cognitivo necesarios para el aprendizaje;
como por ejemplo la participación activa en la vida social y cultural; el desarrollo personal, en donde se da importancia al autoconcepto y autoestima, respeto,
protección, solidaridad y tolerancia. 4. Objetivos dirigidos a la consecución de aptitudes psicomotoras. Son aquellos
que permiten el desarrollo de la capacidad de expresión corporal, así como las psico – físicas.1
Esta variedad de tipos de objetivos de aprendizaje está relacionada íntimamente con
los tipos de contenidos que la asignatura o curso va a abordar, de esta manera no pierdas de vista la relación que hay entre objetivos, contenidos y evaluaciones.
Los objetivos deben ser planteados de tal manera que permita al estudiante conocer exactamente lo que se espera de él al final de cada unidad de aprendizaje, una vez
que haya realizado las lecturas, reflexionado, elaborado los ejercicios y actividades previstas. La selección y secuenciación de los objetivos permite revisar y modificar los
elementos que intervienen en el proceso de enseñanza – aprendizaje.
Para lograr la secuenciación de los objetivos, los hemos clasificado en dos niveles:
generales y específicos.
1 Crespo Pérez, Beatriz. “ El curriculo: concepto, niveles de concreción y elementos curriculares”, En: Toscano, Martín
(Coord.)(1997) Didáctica general. Psicología de la educación. Universidad de Sevilla. España, pp. 56 - 58
Los objetivos de aprendizaje son la descripción o delimitación de los
conocimientos, habilidades y actitudes que se espera alcance el
estudiante al término de un evento educativo.
47
Los objetivos generales. Son un conjunto de enunciados que representan los comportamientos más complejos y los contenidos más amplios de conocimiento que el
estudiante debe adquirir en el curso, su logro no es inmediato y son parte de un proceso más amplio.
Los objetivos específicos. Indican el nivel de precisión de la destreza cognitiva, habilidad o actitud que el estudiante mostrará para lograr el objetivo general, se
derivan a partir de los temas o unidades en que se organiza el contenido, y se
elaboran hasta el nivel en donde las actividades de aprendizaje y evaluación permitan lograr el objetivo general.
De acuerdo a García Aretio (2001)2 las características de un objetivo específico son:
“Deben expresar lo que tiene que hacer el alumno mediante verbos transitivos
operativos, no ambiguos. La acción expresada debe ser observable directamente para que pueda ser
evaluada (Lockwood, 1998). Cada objetivo debe contener solamente una manifestación, un solo tipo de
resultado; un objetivo general puede quedar explicitado en varios objetivos específicos.
En la formulación del objetivo debe incluir por lo menos el nivel mínimo, y también el nivel deseable. En cualquier caso, los niveles mínimos deben quedar
claros de alguna manera. Deben incluirse las circunstancias relevantes de evaluación, como puede ser con
material o sin material, presencial o a distancia, etc.”
En la elaboración de los objetivos específicos de aprendizaje se han establecido normas para su enunciación como son:
a) Indicar quién ejecutará la acción. b) Identificar la conducta, habilidad o valores solicitados.
c) Señalar el contenido al que se alude. d) Delimitar las circunstancias para realizar la conducta, habilidad o valores.
e) Determinar la precisión, sea cualitativa o cuantitativa. f) Clasificar la conducta en relación con su complejidad.3
Esta normatividad permite que los objetivos se centren en los diferentes niveles del dominio cognoscitivo, afectivo y psicomotor que se constituyen por comportamientos
concatenados y continuos de carácter intelectual y que se suceden de los simples a los complejos.4
2 García Aretio, Lorenzo (2001) De la teoría a la práctica, pp. 205
3 Heredia Ancona, Bertha (1983) Manual par la Elaboración de material didáctico, pp. 83
4 Para la redacción de objetivos te sugiero consultes las aportaciones que dan las diferentes taxonomías
cognoscitivas, en las cuales las categorías se interrelacionan y dan paso a los niveles de conocimiento, comprensión, aplicación, análisis, síntesis y evaluación. Por otra parte, también considera la relación de los niveles con las formas de aprendizaje, en una primera recepción y descubrimiento y en una segunda forma la repetición y significado, las que encontramos en las situaciones de aprendizaje educativo.
48
A continuación te presentamos un ejemplo de objetivos generales y específicos, en donde se incluyen diferentes tipos de objetivos.
Objetivos Ejemplo
Asignatura
Lectura, redacción e iniciación a la investigación documental III
General Al finalizar el curso:
Reconocerás la organización textual, los procedimientos y las marcas discursivas de la argumentación.
Fundamentarás tus ideas y valores con los que el texto te propone, considerando el contexto de producción y
recepción, así como su experiencia, a fin de explicarlos y comprenderlos con una actitud de tolerancia y respeto a las
ideas ajenas.
Específico Al finalizar la Unidad:
Identificarás a partir de la lectura de los textos, la especificidad de la función apelativa en una situación de
comunicación. Identificarás la organización textual del artículo de opinión.
Redactaras un texto argumentativo en donde tomes una posición fundada respecto a un tema de la vida cotidiana de
acuerdo con los recursos de la argumentación vistos en la
unidad.5
Como puedes observar, los objetivos de aprendizaje son la base del diseño
instruccional de los materiales didácticos impresos, ya que delimitan el qué, cómo, quién y con qué, el estudiante abordará los contenidos.
5 Tomado de CCH. ( 1996) Área de talleres de lenguaje y comunicación, CCH-UNAM, México
49
Artículos tomados de BBCMUNDO.com
Martes, 5 de agosto de 2003 - 17:26 GMT
Vida después de la computadora
En Alemania han creado un nuevo centro para recuperar a adolescentes adictos, pero no se trata de fumadores, ni cocainómanos, ni alcohólicos, sino
de fanáticos de la Internet y las computadoras.
El instituto está ubicado en la localidad costeña de
Boltenhagen, en el norte del país, con todo el
esplendor del mar Báltico para recordarles a estos cibernautas que existe algo más que el mundo
virtual.
Con su aire fresco y su clima soleado, es todo lo contrario al oscuro cuarto iluminado por un monitor propio de un adicto a Internet.
Los jóvenes son alentados a pasar el mayor tiempo posible al aire libre y se les permite -para evitar cualquier tipo de crisis de abstinencia- sólo 30 minutos diarios de
conexión a la red.
Muchos de ellos son adictos confesos y reconocen pasar más de seis horas al día frente a la computadora. "Era divertido jugar con ella", cuenta Mortiz Moeller, de 13
años, y agrega: "Yo estaba aburrido, mis amigos no tenían tiempo para mí, y creo que me convertí en un adicto a mi máquina".
Este tipo de adicción no está oficialmente reconocido como un desorden clínico, pero para muchos padres se trata de un tabú que no saben cómo resolver, explica la
psicóloga del centro, Simone Trautsch.
"Muchos padres no hablan del problema y no saben qué hacer para ayudar a sus hijos".
A dieta también
El centro de Boltenhagen trata de mostrar a los menores que actividades como leer o hacer ejercicio también pueden ser divertidas. Por eso, los instructores se los llevan
cada día a la playa para que naden y se ejerciten antes de un saludable almuerzo de bajas calorías.
50
Los organizadores del centro consideran que el trabajo físico debe ir combinado con una dieta sana, ya que los jóvenes que pasan todo el día frente a la computadora
suelen comer mal y no moverse de su asiento.
Benjamin Saenger, otro adolescente de 13 años que llegó a pesar 123 kilos, dijo que
en un principio pensó que "sería terrible llegar a un lugar donde no habría computadoras ni televisión, sólo deportes". "Pero he aprendido que hay mucho
más en la vida que sentarse frente a una computadora todo el día. Es importante ejercitarse y cuidar de la dieta".
Viernes, 19 de octubre de 2001 - 12:58 GMT
Computadores con vida
Muy pronto la red se podrá curar automáticamente. IBM inició un ambicioso proyecto para el desarrollo de tecnologías que tengan las
habilidades biológicas básicas de los organismos vivientes.
Investigadores de la compañía explicaron que la creciente complejidad de las PCs y redes obliga a mejorar los métodos de mantenimiento y autoreparación.
Aseguran que, sin este tipo de esfuerzos, existe el peligro de que las redes se tornen inmanejables.
La compañía está tratando de realizar esta iniciativa a través de su programa de
investigación y una serie de acuerdos con universidades. También expresó su interés en que otras empresas se unan al proyecto.
El gran reto Esta semana IBM envió 75 mil copias del manifiesto escrito por
Paul Horn, vice presidente de IBM Research, que explica las pretensiones de sus Computadoras Autónomas.
Horns advierte que los humanos están perdiendo la batalla por
manejar el complicado crecimiento de los sistemas de computación y de redes.
Agrega que esta complejidad sólo aumentará en la medida que la tecnología busque el camino para mejorar sus sistemas.
Paul Horn dijo que si se continúa con el ritmo de expansión digital,
dentro de poco no habrá recursos humanos que mantengan los sistemas.
IBM continúa
innovando en el mundo de la
computación.
51
Poder global
El sistema autónomo nervioso se encarga de equilibrar los niveles de azúcar y
oxígeno, además de monitorear la temperatura del cuerpo.
Horn argumenta que lo que se necesita es que se mejoren los sistemas de autoconfiguración en los PC.
IBM espera que su equipo de investigadores desarrolle tecnologías que puedan
convertir las redes "tontas" en alternativas inteligentes.
Para esto tiene planteado invertir millones de dólares en los próximos cinco años
fundando 50 proyectos en las universidades que acepten el reto.
La compañía está trabajando con el Foro Global de Red para que los laboratorios de ciencia del mundo trabajen en equipo. Gracias a este esfuerzo, se está desarrollando
un software que esconde las peculiaridades individuales de cada máquina detrás de
interfaces comunes.
MESOGRAFÍA
Impresos
• DISEÑO INTERACTIVO. Ray Kristof, Amy Satran, Editorial Anaya Multimedia,
Madrid – España.Edición,1999.
• Aguiar, M.M. & Aguiar, K. (1996). Normas básicas en el diseño de una interfaz gráfica de usuario. Novática, 121, 55-59.
• Aguiar, M.M., Aguiar, K. & Villalabeitia, J. (1996). La evolución de la informática como instrumento facilitador de tareas. Gaceta Dental, 66, 68-72.
• Aguiar, M.M. & Villalabeitia, J. (1996). Las interfaces gráficas de usuario: una informática mucho más fácil. Dental Economics, vol. 2, nº 1, 18-20.
• Cosialls, D. (1996). Informatización de la historia clínica. Novática, 121, 80-85.
Internet
• http://www.webestilo.com/guia/
• http://iteso.mx/~carlosc/pagina/documentos/usabilidad.htm
• http://www.itson.mx/dii/jgaxiola/articulos/diseno_web.html
• http://www.infovis.net/Revista/2002/num_96.htm
• http://buscador.hispavista.es/psicologia-del-color/
• http://www.papyros.com.ar/articulos/Abril/05.html
• http://www.angelfire.com/ak/psicologia/colort.html
• http://dewey.uab.es/pmarques/guionmul.htm
• http://coqui.lce.org/elopateg/net_educ.htm#CONTENIDO
• http://www.cab.cnea.gov.ar/internet/tutorial/seminario.html
• www.unex.es\didactica\Tecnologia_Educativa\index.htm