PROCEDIMIENTO PARA INSERTAR COLORES, IMÁGENES, VINCULOS EN EL

DISEÑO DE LAS PAGINAS WEB.

Mishell Dayana Quenza Padilla

Marzo 2019
Institución Educativa Simón Bolívar
Arauca
Informática
 ii

Dedicatoria.

Dedico este trabajo a las personas que estén interesadas en saber sobre el tema.
 iii

Contenido

1.Cómo elegir y utilizar los colores en tu página web. ................................................ 1

La importancia de elegir el color adecuado ................................................................ 1

1.2 Cuántos colores utilizar en una web....................................................................... 2

1.3 Cómo combinar los colores ...................................................................................... 4

1.4 Herramientas maravillosas para encontrar el esquema de color perfecto .. 6

1.5 Tendencias en 2015 para los colores de las páginas web ................................ 8

Código para añadir una imagen a un sitio web .......................................................................... 10

Atributo src, la ruta de la imagen......................................................................................... 10

Alto y ancho de la imagen ........................................................................................................... 10

Cómo insertar imágenes con enlaces.......................................................................................... 10

Los hipervínculos ................................................................................................................. 12

 iv

TABLA DE ILUSTRACION.

Illustration 1.Cómo inserter imagines con enlaces .................................................................... 11

Ilustración 2.Los hipervínculos ................................................................................................. 12

Ilustración 3.Enlazar a una página desde nuestra web .............................................................. 13

Ilustración 4.Enlazar a una página en la Word Wide Web ........................................................ 13

Ilustración 5.Enlazar con una cuenta de correo: ........................................................................ 14

Ilustración 6.Enlazar con otra parte dentro del mismo documento ........................................... 14

Ilustración 7.Enlazar con otra parte dentro del mismo documento ........................................... 15

Ilustración 8.Enlazar con otra parte dentro del mismo documento ........................................... 15
 1

.Cómo elegir y utilizar los colores en tu página web.

La importancia de elegir el color adecuado

Cada color provoca en las personas unas sensaciones determinadas y está asociado a distintas

emociones, por lo que éste influye de manera determinante en cómo se sienten y comportan los

usuarios en tu web.

Acertar con la elección y cantidad de colores que utilizas en tu página es fundamental para que

ésta refleje correctamente quién eres y cuál es la filosofía de tu negocio.

Piensa en la web de un spa. ¿Qué colores te vienen a la mente?

¿Y si piensas en una banda de Heavy Metal?

¿La clínica de un dentista

Seguro que no te imaginas una web de un dentista con fondos negros y rojos, ni la del grupo

de Heavy con tonos pastel.

A continuación, te dejo una imagen con las emociones y conceptos que se asocian a cada

color:

colores-web

Decide qué valores quieres transmitir, que sensaciones quieres provocar, a qué público

objetivo te vas a dirigir y elige en consecuencia.

 2

Si ya tienes un logotipo corporativo deberías ceñirte a sus colores para mantener la identidad

visual de tu marca.

La elección de colores para el logotipo, al igual que los de tu web, debe estar basada en la

psicología del color así que, en teoría, tu logotipo ya incluirá los colores que mejor encajen con tu

marca.

Si por la razón que sea crees que el logotipo o sus colores no representan tus valores actuales,

sería buena idea rediseñarlo y adaptarlo a tu nueva filosofía y mensaje.

Una vez rediseñada basa el esquema de color de tu página en él.

1.2 Cuántos colores utilizar en una web

Como te decía al principio, una de las causas principales de que una web no tenga un aspecto

profesional es la utilización de demasiados colores.

Una web con muchos colores es confusa, pierde la coherencia y distrae al usuario evitando que

se fije en los elementos más importantes.

En la siguiente foto ¿Hay alguna fruta que te llame la atención por encima del resto?

¿Y ahora?

color-resaltado

Lo más probable es que en la primera foto no vieras ninguna fruta que destacara

especialmente, y si lo había desde luego no era la uva verde de la segunda foto ¿no?
 3

Pues este mismo concepto se aplica en tu web. Si llenas todo de colorines el usuario no sabrá

en que fijarse. Si solo utilizas un color que resalte del resto su vista se irá ahí irremediablemente.

Piensa que en vez de ser una uva ese elemento destacado podría ser un botón de comprar, de

suscripción, un banner de publicidad, una categoría destacada, un formulario de contacto, una

tabla de precios, etc.

Cada página de tu web debería tener un único objetivo principal y por tanto ahí es donde

deberías poner el punto diferente, que en este caso consigues con el color.

Fíjate en la web de Pingdom, esta es una tabla de precios que hay en su página de inicio

¿Dónde se te va la vista?

pingdom

Ellos quieren venderte su servicio “Professional” y te llevan hacia él. Es el mismo concepto de

la uva, si solo hay un color que resalte te fijarás en él. Ahora imagina que dicha tabla de precios

fuera así:

pigdom2

¿Crees que conseguirían el mismo resultado?

Conclusión. Intenta utilizar la menor cantidad de colores posibles.

Como norma general te recomendaría uno o dos colores neutros, como pueden ser los grises,

que te servirán para separar espacios y crear divisiones y luego uno o dos colores más llamativos

para atraer la atención del usuario cuando lo consideres necesario. Puedes utilizar uno para los

enlaces y otro para los botones y demás llamadas a la acción, por ejemplo.
 4

Si te fijas en mi web todas las llamadas a la acción y elementos que quiero resaltar van en

amarillo. El resto de la web va en blancos y grises.

1.3 Cómo combinar los colores

Ya sabes lo importante que es elegir unos colores adecuados, cuáles utilizar para transmitir

unas sensaciones u otras y la cantidad recomendable para que sean efectivos. Ahora vamos a ver

cómo combinarlos para que la web quede chula y mantenga la coherencia visual.

Te podría dar una chapa enorme sobre la teoría del color, el círculo cromático, los espacios de

color, los colores primarios, secundarios, terciarios, etc. pero si no eres diseñador gráfico te voy a

aburrir y además no necesitas tener tanta información.

Lo que sí necesitas saber es que:

1. Cuanto más saturados y brillantes sean los colores más llamativos serán, pero más

cansarán la vista del usuario y más trabajo le costará mantener la atención. Prueba a mirar

durante un rato estas paletas de color y compruébalo tú mismo. ¿Cuál te resulta más

cómoda a la vista?

colores-intensos-vs-suaves

2. Los contrastes funcionan muy bien, en el tono, en la luminosidad y la saturación. Prueba a

hacer combinaciones bien contrastadas:

contrastados
 5

3. Otra buena opción es utilizar una misma gama cromática con distintos niveles de

saturación y luminosidad:

misma-gama-cromática

4. Debe haber un color predominante que deberías usar en una proporción de un 60%. Lo

podrías utilizar en la cabecera, como fondo en las diferentes secciones, las landing pages,

etc.

Otro secundario que utilizarías en un 30% más o menos (fondos de formularios, cajas de

llamada a la acción, enlaces, etc.).

Por último, deberías dejar un color, el más llamativo o potente, para el 10% restante que

generalmente utilizarás para botones o elementos de alto valor estratégico

La razón para utilizar el color más llamativo en una proporción tan baja es para que este no

pierda efectividad. De esto ya hablamos en el segundo punto de la entrada con el ejemplo de la

uva

porcentajes

5. Debes ser consciente de que no eres diseñador y de que no te merece la pena ponerte a

experimentar con los colores como si fueras Da Vinci. Elige una paleta de colores que te

guste y cíñete a ella, seguramente el diseñador que la hizo tenía más conocimientos y
 6

mejor gusto que tú para estas cosas, así que confía en su criterio y cambia lo menos

posible.

¿Y de dónde sacas tú paletas de colores ya preparadas y de buena calidad?

Eso lo vamos a ver en el siguiente punto.

1.4 Herramientas maravillosas para encontrar el esquema de color perfecto

Si te pones a elegir los colores de tu web a mano esta se acabará pareciendo más a un cuadro

de Picasso. Cuánto antes lo asumas mejor.

Por suerte hay herramientas gratuitas que harán este trabajo por ti. Otros usuarios ya han

creado miles de combinaciones preciosas y bien equilibradas listas para utilizar, así que tú solo

tendrás que elegir una que te guste y no estropearla con tu vena artística.

Hay muchas herramientas en Internet que te pueden venir bien, mis dos favoritas son Adobe

Color CC y Pictaculous

Adobe Color CC

Puedes explorar las combinaciones que han creado miles de usuarios, ordenarlas por fecha, ver

las más populares, buscar por un término determinado, etc

Ahí tienes todo lo que necesitas para encontrar el esquema de color de tu web
 7

Luego podrás guardar la url de esa paleta o incluso modificarla a tu gusto, pero toca lo menos

posible, que la mayoría de las combinaciones que hay ahí ya están muy bien como están.

Pictaculou

Otra forma de encontrar una paleta de color es a partir de una fotografía. Puedes subir la

imagen a Pictaculous y este te genera los códigos de color en formato hexadecimal.

Muy fácil de utilizar y muy eficaz. Puedes sacar ideas de las instalaciones de tu negocio, de tu

entorno, de otras páginas web que te hayan gustado, etc.

Aquí tienes varios ejemplos de los resultados que se consiguen:

web-casa

snowboard

pictaculous-spa

oficina

otra-web

Look-Book

Te dejo un listado con más herramientas que te pueden interesar:

Color Hunter.

TinyEye Labs.

Check my colours.
 8

Hail Pixel.

Color Explorer.

Shutterstock Labs.

0 to 255.

1.5 Tendencias en 2015 para los colores de las páginas web

Como en todo lo relacionado con el diseño, en los colores también hay tendencias y modas.

Hace unos años estaban en auge los colores intensos y los degradados muy marcados.

Ahora los tiros van por otro lado. Eso no quiere decir que no vayas a encontrar multitud de

páginas muy bien diseñadas que contradicen estas tendencias, ni que tú no puedas hacer algo

distinto

Yo solo te muestro las líneas más actuales, tú decides si quieres seguirlas o no.

Colores planos con tonos suaves

Se busca la usabilidad y que el visitante se sienta cómodo navegando por nuestra web. Estos

tonos transmiten calma y sobriedad, son una excelente elección para conseguir un aspecto

cuidado y profesional.

colores-planos

Degradados suaves
 9

Si los colores planos no van contigo quizá deberías probar con degradados muy suaves, le

darán más textura y personalidad a tu web.

degradados-suaves

Utilizar una sola gama cromática

Utilizando tonos similares con diferentes grados de saturación y luminosidad conseguirás un

resultado muy armónico y que potenciará notablemente tu identidad visual. Ten cuidado con esta

técnica que no es fácil aplicarla con éxito.

verde

Alto contraste

Para que funcione tienes que utilizar colores neutros o con poco impacto visual y un solo color

llamativo que atraiga la atención. Los puntos de alto contraste son un imán para nuestros ojos

mejorando muchísimo las conversiones.

contraste las webs petadas de colores, botones, anuncios y demás elementos que nos distraen

de lo esencial, el minimalismo hace que el usuario se fije en lo realmente importante.

Minimalismo

Adiós a

bicicleta
 10

Código para añadir una imagen a un sitio web

Para añadir imágenes a una página web hay que escribir el siguiente código HTML:

<img src="archivo.jpg">

Copiar
Atributo src, la ruta de la imagen

Indica la ruta del archivo. Si el archivo de imagen se encuentra en la misma carpeta que
la página web se escribiría como en el ejemplo, pero si se encuentra en una carpeta distinta la ruta
podría ser así:

src="/carpeta/archivo.jpg"

También se puede llamar a una imagen con la dirección completa:

src="https://web.com/carpeta/archivo.jpg"

Alto y ancho de la imagen

Es conveniente determinar el ancho y alto de una imagen para evitar al navegador operaciones
innecesarias y facilitar que cargue más rápido la página.
Para esto se utilizan las etiquetas height (alto) y width (ancho). Siempre es recomendable
establecer estos atributos. Por ejemplo:

<img src="archivo.jpg" width="300" height="150">

En este caso la imagen tendría un ancho de 300 píxeles y un alto de 150 píxeles.

Cómo insertar imágenes con enlaces

 11

Uno de los mayores usos que se le dan a las imágenes en la web es el de vincular archivos,
utilizarlas como enlaces.
Ejemplo:

<a href="carpeta/web.html"><img src="archivo.png"></a>

Donde href establece la ruta de la página a la que dirigirá la imagen. Otro ejemplo:

<a href="https://www.lawebera.es/">
<img src="/carpeta/archivo.png" />
</a>

Veamos un ejemplo con lo aprendido:

<a href="paginaweb.html">
<img src="archivo.png"
width="300" height="150"
alt="texto alternativo de la imagen" />
</a>

Illustration 1.Cómo inserter imagines con enlaces

Para tener un favicon personalizado en tu web sólo tienes que crear una imagen con extensión
.eco y subirla a la carpeta raíz de tu espacio web con este nombre: favicon.ico. Una vez subida la
imagen añade este código en las páginas de tu web y listo:

<link rel="shortcut icon" href="http://www.miweb.com/favicon.ico">

 12

Los hipervínculos

Los hipervínculos, enlaces o links son los elementos que diferencian la web de otros
medios. Un hipervínculo supone enlazar la página web que estamos visualizando con otra página
web; otra sección de la misma página; con un archivo; un servidor FTP; un archivo o una
aplicación para descargar; una secuencia de sonido; vídeo o multimedia; una dirección de correo
o un grupo de noticias.

Es posible acceder a través de la web a cualquier sitio empleando hipervínculos. A través

de FrontPage es muy sencillo crear un hipervínculo a través del botón Hipervínculo de la barra de
herramientas estándar o a través del menú Insertar, Hipervínculo.

Podemos crear los hipervínculos a partir de texto e imágenes, de forma que pulsando en
ellos nos lleve a otra parte de la misma página, a otro archivo o página de nuestro sitio web o a
una dirección URL. Para ello seleccionamos el texto o la imagen y pulsamos Insertar,
Hipervínculo. Nos aparecerá la ventana siguiente:

Ilustración 2.Los hipervínculos

 13

En esta ventana podemos crear todos los tipos de hipervínculos que contienen las páginas
web. Veamos a continuación las instrucciones que debemos seguir para cada uno de ellos:

1.Enlazar a una página desde nuestra web: se trata de un enlace interno y consiste en
enlazar un punto a otro documento dentro del mismo web. Supongamos que tenemos dos páginas
web creadas, uno.htm y dos.htm. Para crear un link en uno hacia dos, simplemente abrimos la
ventana anterior y buscamos en el directorio en que guardamos los archivos de la web la página
dos.htm, lo seleccionamos y pulsamos aceptar.

Ilustración 3.Enlazar a una página desde nuestra web

2.Enlazar a una página en la Word Wide Web: se especifica el camino completo hacia
el archivo, poniendo la dirección URL. Por ejemplo, si queremos colocar un enlace con la página
principal de la Universidad de Zaragoza haremos lo siguiente:

Ilustración 4.Enlazar a una página en la Word Wide Web

3.Enlazar con una cuenta de correo: es habitual crear un enlace a una cuenta e-mail en
una página web, ya sea para enviar correos al web master o hacer sugerencias. El punto de partida
siempre es el mismo, seleccionamos el texto o imagen donde queremos hacer el enlace y
pulsamos Insertar, Hipervínculo. En la ventana que nos aparece seleccionaremos el botón de
enlace a correo y nos aparecerá una ventana en la que debemos escribir el nombre de la cuenta.
Observaremos que al crearse el enlace nuestra dirección de correo vendrá precedida por "mailto:"
 14

Ilustración 5.Enlazar con una cuenta de correo:

4.Enlazar con una página nueva: en ocasiones puede ocurrir que hemos enlazado a una
página que todavía no hemos creado. Podemos hacer las dos cosas a la vez, el enlace y crear la
página. Para ello, en la ventana de Insertar, Hipervínculo elegiremos el botón para enlazar con
nueva página. Posteriormente, elegiremos el tipo de página que queramos crear y ya podremos
entrar a editarla.

5.Enlazar con otra parte dentro del mismo documento: los enlaces dentro del mismo
documento permiten a los visitantes de su página hacer clic y saltar rápidamente a otra parte de
ese documento. Por ejemplo, esto es habitual cuando se crea un índice al principio del documento
para que los usuarios puedan ir saltando por los apartados del índice. Igualmente es conveniente
crear otro enlace para volver a la parte superior. A las partes del documento con la que queremos
enlazar se le denomina marcador. El procedimiento para crearlo es el siguiente:

a)En la barra de menús, seleccionar Insertar, Marcador en aquel lugar en el que queramos
situarnos después de enlazar. Nos aparecerá la siguiente ventana:

Ilustración 6.Enlazar con otra parte dentro del mismo documento

 15

En esta ventana elegiremos el nombre del marcador y pulsamos Aceptar. A medida que
vayamos añadiendo marcadores en el documento se irán añadiendo en la lista "Otros marcadores"
para que luego al crear el hipervínculo elijamos el que nos interese.

b) Una vez creado el marcador, es el momento de crear el enlace. Para ello, en la barra de
menús seleccionamos Insertar, Hipervínculo hasta que nos salga la ventana inicial y elegimos de
la lista desplegable el marcador con el que queramos enlazar de la siguiente forma:

Ilustración 7.Enlazar con otra parte dentro del mismo documento

Estas son las 5 formas de crear hipervínculos en una página web, de esta forma podemos
enlazar con cualquier archivo, página, email o parte del documento que queramos y le daremos
una mayor amplitud de contenidos al sitio web. A una página web podemos llegar conociendo su
dirección (que en ocasiones es difícil debido a los nombres largos de las direcciones URL) o a
través de enlaces en otras páginas.

Además, podemos configurar como queremos que se abra la nueva página después de
hacer clic en el hipervínculo. Se puede abrir en la misma ventana o crear una nueva ventana para
no perder la página anterior. Esta última opción es muy útil, ya que es habitual navegar en
Internet a través de los enlaces y es posible perder u olvidar la página de referencia inicial.

Para ello, en la ventana del menú Insertar, Hipervínculo podemos seleccionar como
queremos que nos aparezca la página con la que hemos enlazado.

Ilustración 8.Enlazar con otra parte

dentro del mismo documento

Entre los destinos comunes de un hipervínculo podemos elegir Toda la página (se abrirá
en la misma ventana que estamos) o en Nueva ventana (la nueva página se abrirá aparte). El resto
de destinos comunes se refiere a los marcos que veremos más adelante.
 16

Bibliografía

monografia. (13 de agosto de 2014). cambiarcoloresenunapaginaweb. Obtenido de monografias:

http://www.monografia/cambiar_colores.com