Act Elementos básicos del diseño web

02 Fecha límite de entrega: 12 de marzo hasta las 23:59hrs.

Pasos a seguir:

1.- Realiza un mapa mental donde describas los elementos básicos del diseño web: ilustración, tipografía
imágenes, botones, hipervínculos, videos, entre otros.
Apóyate en el apartado anexo 2, descrito en el presente documento para su realización.
Puedes realizar la actividad en el mismo espacio propuesto, en computadora, en tu cuaderno o en una hoja aparte.
2.- Genera tu archivo electrónico según sea el caso, o bien digitaliza la actividad (escaneando la tarea o
tomándole una foto) y súbela a la clase de Google Classroom antes de que se cumpla la fecha límite.

Ejemplo de mapa mental

1
Espacio de trabajo

2
3
 Anexo 2.- Elementos básicos

ILUSTRACIÓN
La ilustración o imagen es uno de los recursos más usados en el diseño de páginas web, pues al no estar
sometidas férreamente a un modelo natural, permiten al ilustrador dibujar libremente el motivo que más se
adapte a la composición de su sitio web, en una página se pueden insertar imágenes con los formatos:
JPG, GIF, PNG entre otros, según las especificaciones del sitio.

Para insertar una imagen basta con utilizar la etiqueta IMG y el e atributo SRC.
La etiqueta <IMG> no necesita cierre y su sintaxis correcta es:
<IMG SRC="immagine.gif">

Donde SRC corresponde a la ubicación donde se encuentra la imagen, normalmente se ubica en la carpeta
denominado IMAGES, (en este caso "immagine.gif"). Como hemos señalado, esta etiqueta es única en el
sentido de que NO lleva como cierre el correspondiente </IMG>.

TIPOGRAFÍA
Una tipografía, es un conjunto de signos, referenciado al tipo de diseño que se está realizando, su
característica principal es el tamaño, apariencia y otros atributos asociados a todo el conjunto, y una
asignación de signos abstractos por cada carácter.
Es importante usar fuentes llamativas pero sencillas de leer.
También es importante variar el tamaño de una misma fuente para resaltar secciones interesantes del
contenido y del texto.
Algunas fuentes que se puede utilizar en HTML es:
Font Face (hace referencia al tipo de letra que se insertara en el documento, Helvética, Tahoma Arial etc.)
Font Size (Hace referencia al tamaño de la fuente que se insertará en el documento)
Para insertar un texto en el documento Web se utiliza la etiqueta Font:
<font face="Arial, Helvetica, sans-serif" size="+1">Mi Primera página</font>
Atributos:
Face: Nombre de la fuente
Color: color del texto, número hexadecimal o color predefinido
Size: tamaño del texto.

4
TEORÍA DEL COLOR
Esta parte es únicamente para que considere los colores a utilizar en su página, pues no se le puede poner
cualquier color solo por el hecho de que alguno sea nuestro color favorito.
Combinación de tonos suaves sobre fondos fríos, nos da el efecto de tranquilidad.
Colores vivos combinados con negro, blanco o gris perla, da el efecto de alta tecnología.
Unión de rojos, magentas y naranjas, produce excitación.
Tonos suaves de azules, verdes y marrones, da la sensación de limpieza.
Combinación de naranjas y rojos, amarillos, marrones y rosas, produce calor.
Para más información consulte la página: http://www.webusable.com/coloursMix.htm

MULTIMEDIA
Multimedia en sitios web se refiere al uso de la mezcla de medios (texto, imágenes, video, audio y
animación) para comunicar un mensaje.
En web, el mensaje puede ser mediante una presentación narrativa lineal como en una película que no
permite al usuario alterar la narración, o puede ser no-linea ofreciendo al usuario interactuar con el medio.
La elección de cuál multimedia utilizar siempre estará sujeta a las necesidades de los clientes y como ellos
mejor satisfacen estas necesidades de información y entrega de contenido. Además de considerar las
características de su propio negocio.

Algunas formas comunes de publicar contenido con multimedia en web son:

- Animaciones de GIF
- Flash
- Streaming de audio y streaming de video
Los formatos de audio comunes que se puede insertar en una página web son: MP3, WAV y MIDI.
El navegador Internet Explorer puede reconocer la etiqueta <bgsound>, que se utiliza para incluir sonido
de fondo. Esta nueva etiqueta no necesita etiqueta de cierre.
A través del atributo SRC hay que especificar la ruta y el nombre del archivo de audio.

En ocasiones puede interesar incluir algún vídeo en una página web, pero hay que tener en cuenta que los
vídeos suelen ocupar mucho espacio en disco, y por lo tanto, precisan de mucho tiempo para descargarse.
Los formatos de vídeo que suelen utilizarse en Internet son el AVI, el MPEG y el MOV.
La etiqueta <embed> es la que se utiliza para insertar archivos de vídeo. Puede incluirse la etiqueta de
cierre, pero en realidad no es necesaria, ya que entre las etiquetas <embed> y </embed> no hay que
insertar nada.
A través del atributo SRC hay que especificar la ruta y el nombre del archivo de vídeo.

5
BOTONES
Los botones gráficos son elementos exclusivos de las aplicaciones
informáticas, en las que tienen básicamente la misión de capturar
eventos realizados por el usuario para lanzar acciones de respuesta
adecuadas.

Es común ver en las páginas web botones que permiten al usuario interactuar con la aplicación,
informándole de la acción que se va a producir si pincha sobre ellos. Funcionan de esta forma como iconos
ampliados, que permiten ejercer las mismas funcionalidades que estos elementos, pero sin estar tan
limitados en aspectos como formas, tamaños, colores, etc.
También es frecuente utilizar los botones gráficos para sustituir a los botones típicos de los formularios.
Cuando aparecieron los formularios sus botones de acción eran todos rectangulares, de color gris y con el
texto en negro, diseño que muchas veces se hacía demasiado aburrido con el estilo general de la página.
La solución a este problema de diseño fue la sustitución de estos botones estándares por botones gráficos
que realizaran las mismas funcionalidades, generalmente apoyándose en lenguajes de cliente como
JavaScript.

Posteriormente, con la aparición de las Hojas de Estilos en Cascada (CSS), fue posible configurar el
aspecto de los botones de formulario, aunque sólo admiten esta funcionalidad los navegadores más
recientes. A pesar de ello, el uso de botones gráficos a continuado, ya que sus posibilidades de diseño que
ofrecen son mucho mayores; como contrapartida, es necesario a veces un fuerte apoyo de programación,
ya que los botones gráficos no responden por si solos a los eventos propios de los botones de formulario.

Otro uso común de los botones gráficos es el de representación de opciones en un menú de navegación.
Los sistemas de navegación suelen estar formados por enlaces textuales, a los que, como mucho, se les
cambia el estilo propio de este tipo de elementos (color azul y subrayado cuando están inactivos, color
morado y subrayado cuando han sido ya visitados). Este sistema es muy efectivo, permitiendo configurar
los textos como deseemos, trabajar cómodamente con capas y DHTML, etc., pero presenta ciertas
limitaciones que conviene evitar.

6
La forma normal de los botones gráfico es la rectangular (sobre todo la de los que sustituyen botones de
formulario), que a veces puede tener las esquinas redondeadas. También pueden presentarse circulares o
elípticos, trapezoidales, en forma de estrella, etc. Dentro de esta forma primaria se incluye un texto corto
(una o dos palabras) que indican la funcionalidad del botón.

BANNERS
Un banner es un anuncio en que habitualmente se presenta en una página web. Es el equivalente a los
anuncios de las vallas publicitarias del mundo real.

Los banners se suelen colocar en una página web para anunciar una empresa, producto o servicio,
cobrando el propietario del sitio web una cantidad variable por ello. El precio de colocar un banner es
variable, dependiendo fundamentalmente del tipo de página que lo presenta y del número de visitantes de
la misma, siendo la forma más habitual de contratación la de cantidad por miles de impresiones (veces que
se carga la página con el banner).

Un banner se presenta como una imagen que muestra información muy concreta sobre un producto o
servicio, imagen que al ser pulsada abre una nueva ventana del navegador conteniendo una página web
del sitio del anunciante, en la que el visitante puede obtener más información sobre el producto ofrecido y,
generalmente, comprarlo.
Físicamente, los banners son ficheros gráficos (imágenes), en formato GIF simple, JPG o PNG si son
estáticos, o en formato GIF animado o SWF si son animados (lo más frecuente). Su tamaño es variable,
aunque existen unas dimensiones que se han convertido en estándares de facto y que son las que
normalmente se utilizan para establecer el precio de la contratación de espacio para los mismos.

7
LOGOS
Un logotipo es un distintivo o emblema formado por letras, abreviaturas, objetos gráficos, etc., peculiar de
una empresa, marca o producto, a los que representa e identifica de forma unívoca.

Los logotipos, también conocidos como logos, son uno de los trabajos más importantes y difíciles que
puede realizar un diseñador gráfico, y representan un ejemplo perfecto de la esencia misma del diseño,
pues en un objeto único se concentran todas las consideraciones de comunicación, estilo y técnica que se
manejan para proyectos de mayor envergadura.

Para una empresa, producto o institución, el logotipo es una pieza clave de su identidad pública, ya que la
representa en todos y cada uno de los elementos comunicativos de la misma (sobres, tarjetas de los
empleados, publicaciones, publicidad, etc.). Es por lo tanto muy importante que el logotipo simbolice lo más
acertadamente la esencia e identidad propia de la empresa o producto.

Los logotipos no son elementos de diseños estáticos, fijos, sino que evolucionan con el tiempo para
adaptarse a las tendencias sociales, comerciales, culturales y técnicas de cada época concreta. Estos
cambios deben ser siempre muy sutiles, modificando apenas pequeños elementos del diseño del logotipo
(pequeños cambios en las formas o en la tipografía), ya que la personalidad propia del mismo debe
mantenerse siempre.
Un logotipo debe reunir una serie de características generales para ser funcional y efectivo. Entre ellas
podemos citar las siguientes:
 Debe corresponderse con a un tiempo: Su concepción y diseño debe estar inspirado en una época,
en una cultura. Posteriores cambios en sus elementos pueden ir adaptándolo a los tiempos nuevos,
pero deben ser tan imperceptibles que se conserve siempre su estilo original.
 Debe ser simple: Los elementos gráficos que lo componen deben ser pocos, claros y estilizados.

8
  Debe ser fácil de recordar: Su impacto visual debe ser inmediato y perdurable, un objetivo difícil de
cumplir en el ambiente de saturación visual en que vivimos.
 Debe ser único y diferenciador: La función clave de un logotipo es la de identificar. Su diseño, sus
colores y formas, deben ser únicas en el mercado, permitiendo que los espectadores lo reconozcan
inmediatamente y de forma inequívoca.
 Debe funcionar en diferentes medios: Su diseño deber permitir su correcta visualización en medios
impresos y en pantalla, en diferentes resoluciones y distancias, en color o en blanco y negro.
 Debe ser coherente con el resto de la identidad corporativa: El logotipo ha de estar perfectamente
integrado con el resto de materiales que utilice la compañía para sus comunicaciones: material de
papelería, envoltorios, material promocional, la página web, los anuncios televisivos y carteles, etc.
 Debe resistir el paso del tiempo: El logotipo debe ser funcional y válido independientemente de las
modas o gustos temporales de las diferentes épocas y movimientos sociales y culturales.

HIPERVÍNCULOS
Un hipervínculo es un enlace, normalmente entre dos páginas web de un mismo sitio, pero un enlace
también puede apuntar a una página de otro sitio web, a un fichero, a una imagen, etc. Para navegar al
destino al que apunta el enlace, hemos de hacer clic sobre él. También se conocen como hiperenlaces,
enlaces o links.
Normalmente el destino se puede saber mirando la barra de estado del navegador cuando el ratón esté
sobre el hipervínculo.
Dependiendo de cuál sea el destino, hacer clic en un hipervínculo puede hacer que ocurran varias cosas.
Si el destino es otra página web, el navegador la cargará y la mostrará, pero si el destino es un documento
de Word, el navegador nos dará la posibilidad de abrir una sesión de Word para visualizarlo o de guardar
el archivo.
Por lo tanto, podemos usar los hipervínculos para conducir a los visitantes de nuestro sitio web por donde
queramos. Además, si queremos que se pongan en contacto con nosotros, nada mejor que ofrecerle un
hipervínculo a nuestro correo electrónico.