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