Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

Componentes de una interfaz web

No description
by

Mar Serra

on 27 May 2015

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of Componentes de una interfaz web

- Imagen -


Es uno de los recursos que debemos dominar para la correcta gestión de un proyecto multimedia
Optimización del uso de imágenes en sitios Web
Logos y marcas gráficas de

empresas
Son los elementos gráficos menos estandarizables de un site:
Al definir la imagen corporativa y contribuir de manera central a la representación de la presencia de la empresa en la red, es preciso admitir ciertos grados de libertad en su diseño, sobre todo cuando, además de la marca de la empresa, se utiliza como parte del diseño de imagen del site.

Los criterios de diseño para el site On-Line no tienen por que responder a las señas de identidad corporativas generales de la empresa.
En caso de intranets no se justifican diseños espectaculares y pesados:
- Están dirigidas a empleados con los que no es necesario buscar el impacto visual para la comunicación de imagen de la compañía.

- El tiempo de acceso es un factor crucial para el diseño de las intranets.
Recomendaciones Logos, Marcas y brading...
De forma orientativa el estándar de tamaños y pesos para logos y marcas de sites en internet esta dentro del rango:
A modo de ejemplo estándares orientativos de tamaños y pesos de logo serian.
Imágenes de productos, campañas promociones, eventos..
Son utilizadas para reclamar atención sobre productos, servicios, promociones y campañas etc.
Fotos representativas
Se utilizan para la representación de:
Gráficos propios del diseño site
Este es un aspecto técnicamente controvertido con mucha frecuencia en el diseño de sites, ya que su uso implica el aumento de carga de la pagina sin justificación funcional sin embargo aporta las ventajas
Banners
El objetivo final de los banners es llamar la atención sobre el visitante acerca de el anuncio del producto, campaña y promoción etc. de manera que se sienta tentado ha hacer "Click" sobre el mismo para obtener información detallada.
Banner animados
Los banners animados tienen el mismo objetivo final que los banners estáticos. la diferencia fundamental estriba en el hecho de estar compuestos de un cierto numero de fases gráficas Escenas o estáticas o mediante transiciones dinámicas entre las mismas.
Iconos de navegación
Son pequeños gráficos hiperenlace que:
-De forma aislada.
- Acompañados de un hipertexto.
- Acompañado de una etiqueta.
- Acompañados de un tooltip.
Barras de herramientas
Son conjuntos de opciones de navegación generalmente presentes a lo largo de todo el site, o en secciones del mismo. suelen presentarse:
Mapas de navegación (Gráficos)
Son gráficos en los que se definen áreas hipervínculo cada una de ellas con un link distinto. en general cada vez son menos usados por que se suelen precisar imágenes de mediano o gran tamaño que contribuyen en gran medida a aumentar el peso de la pagina.
Fuentes seguras
- La psicología del amarillo -
El amarillo es el color más luminoso. Se asocia con la competitividad, felicidad, alegría, optimismo y juventud. El amarillo tiene connotaciones negativas como la cobardía, engaño y la vulgaridad.

En el inicio del desarrollo de sitios
web se usaban las llamadas
“fuentes seguras”
, que son las que cualquier usuario podía tener instaladas en su ordenador por defecto, lo cual limitaba la cantidad de tipografías usables en el momento de crear una página web.

- @font-face -
Desde que los navegadores soportan la directiva
@font-face
, se permite la posibilidad de incrustar distintas tipografías desde un enlace a
Google fonts
,
sin importar que el usuario
no las tenga instaladas.

También existe la posibilidad de convertir fuentes
True Type
y
Open Type
a formato
WOFF
y
EOT
para obtener el mismo resultado anterior.
- Serif vs.
Sans Serif -
Recursos para la correcta gestión de un proyecto multimedia
Tipografía · Licencias· Color ·Imagen
· Tipografía,
imagen, colores
y licencias.

La tipografía, imágenes, colores y licencias son algunos de los recursos que debemos dominar para la correcta gestión de un proyecto multimedia.
- Licencias -
Una licencia es la
autorización que el titular de los derechos patrimoniales de una obra
literaria, artística, musical, audiovisual o de software
da a otras personas sobre lo que pueden y no pueden hacer con la obra
, se realiza a través de una
Licencia de Uso
que delimita lo que se puede hacer respecto a la...

Copia
Reproducción
Modificación
Traducción
Adaptación
¿Qué tipos de licencias hay?
Copyright
Creative Commons
Copyleft
- Copyright -
Simbolizada por una C en un círculo y una leyenda:
Todos los derechos reservados
. Es la licencia más empleada, especialmente por empresas y autores de prestigio, e implica que
solamente su autor puede utilizar, modificar y distribuir su contenido
. Si un tercero deseara utilizarlo es imprescindible la
autorización expresa del autor
para ese fin concreto y, en muchos casos, el
pago por su uso
.

Cualquier contenido disponible en Internet que no especifique un tipo de licencia, está automáticamente protegido por Copyright, aunque pueden utilizarse, con limitaciones, con fines educativos o en noticias.
- Copyleft -
Identificada por una C invertida en un círculo. Es un tipo de licencia que ofrece la
posibilidad de usar, copiar y redistribuir una obra y sus versiones derivadas simplemente reconociendo su autoría
. En esencia, es el
sistema opuesto al Copyright
y no exige autorización del autor para su uso.
A partir de Copyleft nacen casi todos los tipos de licencias empleados para la distribución de contenidos digitales en la Red. Entre los más populares destaca Creative Commons (CC).
- Creative -
- Commons -
Identificado por el símbolo CC dentro de un círculo, basa su filosofía en la
distribución gratuita de los productos digitales, pero permite incorporar diferentes limitaciones en su uso
.
- Reglas sobre el color -

- La psicología del rojo -
- La psicología del verde -
El verde tiene un efecto armónico. Se asocia con el crecimiento, la salud, naturaleza, bienestar, dinero, calma, masculinidad, generosidad, fertilidad, envidia, buena suerte, paz y energía.

- Características a tener en cuenta -
Cuando un autor decide aplicar la licencia Creative Commons a su producto o contenido digital, debe acceder al sitio web Creative Commons y escoger una licencia indicando en el formulario qué usos desea proteger. El sistema generará automáticamente un código HTML que deberá incluirse en el sitio web del autor.
Creative Commons se utiliza en todo tipo de contenidos en la Red, desde noticias, como las publicadas en el diario gratuito 20Minutos, hasta vídeos, cursos online, imágenes, iconos, software, música y un largo etcétera.
¿Cómo sabemos
si tienen licencia CC?
El propio sitio web de Creative Commons ofrece un
buscador de contenidos CC
, e incluso
Google permite filtrar en su buscador imágenes por diferentes tipos de licencia
, aunque empleando descripciones un poco confusas, que se explican muy claramente en Blog and Web.
Otras Copyleft
GNU GPL
(General Public License), es una licencia creada por la Free Software Foundation en los años 80 para proteger la libre distribución, uso y modificación de software y su documentación. Sobre esta licencia se han desarrollado plataformas de comercio electrónico denominadas de Software Libre, como OSCommerce.
Licencia de Arte Libre
(LAL) para obra artística.
ColorIURIS
, creada por un español, es un sistema mixto entre la autogestión y la cesión de derechos de autor. Está destinada a los creadores de contenidos literarios, musicales, audiovisuales y fotográficos. Tiene validez legal mundial.
Fuentes de contenidos CC
Portales de música:

Jamendo
Incompetech
Dig CCMixter

Bancos de imágenes:

Flickrcc
Stock Xchng
Everystockphoto
+ en www.hatsnew.com

No se recomienda utilizarla en el texto central ya que pueden dificultar la lectura. Puede usarse para lograr una diferenciación entre el texto principal y titulares o frases cortas usándose a un tamaño mayor que el texto central.
- Sans Serif -
¡Importante!
El uso de licencias en nuestros portales y sitios comerciales es imprescindible, no tanto para
proteger los contenidos generados
como para difundirlos en las mejores condiciones, y
tener el reconocimiento como autores
allá donde se ubiquen o utilicen.
- Serif -
Son tipografías que facilitan la lectura en textos con tamaños pequeños y eso las hace ideales para aplicarlas al texto central del sitio web.
Sobre Creative Commons
Sobre Creative Commons
Es recomendable no usar más de dos o tres tipografías en un proyecto: una para el texto central y otra para titulares, pudiendo cambiar su tamaño, color o estilo. Evitar el uso de tipografías rocambolescas. El texto debe ser claro en todo momento.
- ¿Cuántas "tipos"? -
Para resumir
¿Qué imágenes puedo usar en mi web?
Imágenes y
Copyright
A la hora de tener éxito en un diseño web profesional.
El diseño de una página web se basa no sólo en la composición o en las formas, sino también en la combinación de colores. La asociación de los colores a una marca es muy fuerte. Algo tan simple como relacionar un color con una marca.
A la hora de usar los colores en una web.
- Fuentes claras y sencillas.
- Letras bien contrastadas con el fondo.
- Evitar líneas de texto demasiado largas.
- Interlineado de 1,5 puntos más que el valor del cuerpo de la fuente.
- Alineación izquierda. Evitar justificación.
- Evitar subrayados, ya que pueden confundirse con hipervínculos.

- Características básicas -
Imágenes de
Google
,
Utiliza
mejor los bancos de imágenes
.
¿Si o no?
Esta pregunta tiene un poco de trampa. Nosotros te recomendamos que evites siempre que puedas utilizar las imágenes de Google. Tienes que pensar que Google es un motor de búsqueda que organiza los resultados que hay Internet, pero no es un banco de imágenes; esto quiere decir que las imágenes que Google muestra puede que tengan derechos de autor. Los bancos de imágenes son portales que cuentan con una amplia selección de fotografías e imágenes ordenadas por categorías.
Aquí tienes algunos de los portales donde buscar imágenes e iconos con diferentes licencias para que utilices en tu página web.

Iconos:
iconfinder
Bancos de imágenes de pago:
fotolia, iStockphoto, foter
Bancos de imágenes gratuitos:
Flickr creative commons, Pixabay, unsplash
Atención al Copyright
:
busca imágenes de uso libre
Como decíamos en el punto anterior, muchas de las imágenes que se muestran en Google contienen derechos de imágenes o copyright. Más aún, si las vas a utilizar para uso comercial, tendrás que tener especial cuidado con este aspecto, pues puedes tener problemas innecesarios.
Algunas recomendaciones:

Comprueba el tipo de licencia
que tienen o busca imágenes con licencia creative commons.
Asegúrate del uso que puedes hacer de la imagen
: si puedes modificarla o utilizarla como base de una composición, si puedes utilizarlas para uso comercial, si sólo pueden ser utilizadas temporalmente o no tienen límite...
Presta atención a la forma de mencionar al autor
(en caso de ser necesario) como autor de la imagen.
- Modelo de color RGB -
La mezcla de colores luz, normalmente
rojo, verde y azul
, se realiza utilizando el sistema de color aditivo (esto implica que se emita luz directamente de una fuente de iluminación de algún tipo), también referido como el modelo RGB o el espacio de color
RGB
. Todos los colores posibles que pueden ser creados por la mezcla de estas
tres luces de color
son aludidos como el espectro de color de estas luces en concreto.
Es aconsejable no usar texto por debajo de un tamaño de 16 pixels para facilitar la legibilidad.

Uso de unidades relativas (
em
) en lugar de unidades absolutas (
px
).
- Tamaño y unidades -
Otros aspectos a tener en cuenta
si publicas tus propias fotos
Una de las soluciones más fáciles es la de utilizar tus propias imágenes, de esta forma puedes evitar problemas con los derechos de imágenes.
Por ejemplo:

Las
imágenes de menores de edad o de personas
: en determinados países hay leyes de protección de menores que limitan el uso de las imágenes con niños. Si quieres utilizar una imagen de este estilo, intenta tener el permiso del tutor del menor o de la persona fotografiada.

Los
lugares de interés general
: hay determinados paisajes o monumentos que están protegidos para el uso comercial; por ejemplo, la torre Eiffel. ¿Qué quiere decir esto? que si tienes un blog de viajes o una agencia de viajes y publicas una foto de París, no vas a tener problema. El problema puedes encontrarlo si para promocionar un producto (una bebida por ejemplo) utilizas la torre más famosa de Francia y no tienes los derechos debidos.

Si comprendes cómo el color afecta a las personas, lo convertirás en una herramienta de trabajo, y esto puede beneficiarte muchísimo.
El color rojo puede aumentar las pulsaciones y acelerar la respiración. Se asocia con la emoción, la pasión, amor, energía y movimiento. También puede tener asociaciones negativas, incluyendo la guerra, la violencia, el fuego y el peligro.
Cuándo usarlo:
usa el rojo para llamar la atención a algo, o crear expectación. El rojo puede ser bueno para la
comida, moda, entretenimiento, deportes, marketing, servicios de emergencia y seguros de salud.

Cuándo no usarlo:

no lo uses demasiado. Demasiada emoción puede ser mala. El rojo normalmente no se recomienda para
artículos de lujo, elementos relacionados con la naturaleza o páginas profesionales.
El uso de
Ems
permite escalar el tamaño del texto para adaptarlo al dispositivo con el que se muestra.

1
Em
equivale a la medida en
pixels
que se declara en el documeto
HTML
.

16 px = 1 em
2 em = 32 px
0,5 em = 8 px
- Px vs. Em -
Mas información en...
https://www.legalitas.com/actualidad/Consejos-juridicos-para-el-uso-de-internet
Cuándo usarlo:
usa el amarillo fuerte (no demasiado) para animar a tus visitas o crear una sensación de felicidad. Usa tonos más suaves de amarillo para una sensación de felicidad más calmada. El amarillo puede dar muy buenos resultados para los botones de llamada a la acción.

Cuándo no usarlo:
el amarillo puede resultar muy cargante si abusamos de él. En ocasiones puede cansar la vista, por lo que debes usarlo con moderación. Un tono no apropiado puede resultar muy agresivo a la vista.
- La psicología del gris -
El gris se asocia con la formalidad, el profesionalismo, la sofisticación, atemporalidad y el carácter fuerte.
- La psicología del azul -
El azul se asocia con la masculinidad, eficacia, calidad, calma, seriedad, fortaleza, sabiduría, lealtad, fuerza, productividad, confianza y seguridad. El azul fuerte puede ser refrescante y energético.
- La psicología del morado -
El morado se asocia con la realeza. Puede usarse para transmitir creatividad, imaginación, autoridad, sofisticación, poder, riqueza, prosperidad, misterio, sabiduría y respeto.
- La psicología del negro -
El negro es un color fuerte asociado con la sofisticación, la elegancia, autoridad, poder, estabilidad, fuerza, formalidad e inteligencia. También puede simbolizar la muerte, el misterio, la maldad y la rebelión.
- La psicología del blanco -
El blanco se asocia con la pureza, limpieza, felicidad, sinceridad y seguridad.
- La psicología del marrón -
El marrón es un color natural y cálido asociado con la tierra, la aspereza, fiabilidad, estabilidad, amistad y naturaleza.
- La psicología del naranja -
El naranja es un color energético y lleno de vida, asociado con la
diversión, felicidad, energía,
calor, ambición, emoción y entusiasmo. También puede comunicar cautela.
Cuándo usarlo:
para llamar la atención a tus llamadas a la acción (
suscripciones, compras, etc
.), ventas u otro contenido que quieras que llame la atención. Es una buena opción para las tiendas, automoción, tecnología, entretenimiento, comida y cuidado de niños.

Cuándo no usarlo:
aunque el naranja es un poco menos intenso que el rojo,
puede resultar igualmente cargante.
No abuses de él.
Cuándo usarlo:
el verde es el color que los ojos procesan mejor. Úsalo para crear un efecto relajante o de calma, o representar nuevos comienzos, naturaleza o bienestar. Es una gran opción para la ciencia, turismo, medicina, recursos humanos, medio ambiente y sostenibilidad.

Cuándo no usarlo:
es menos apropiado para bienes de lujo, tecnología o contenido dedicado a adolescentes.
Cuándo usarlo:
el azul suele asociarse con empresas grandes y bancos porque no es invasivo y se asocia con la seriedad. Es bueno para temas de salud, tecnología, medicina, ciencia, políticos y servicios públicos.

Cuándo no usarlo:

algunos tonos de azul (sobre todo los más oscuros), o bien usar mucho azul, puede hacer que tu página tenga un aspecto frío y poco atractivo. El azul también puede reducir el apetito, por lo que debes tener cuidado si tu contenido tiene que ver con comida.
Cuándo usarlo:

usa tonos oscuros de morado para crear una sensación de lujo y riqueza, y los tonos más claros para felicidad y romance. El morado también puede ser perfecto para productos de belleza, astrología, masaje, yoga, salud, espiritualidad y contenido relacionado con chicas adolescentes y marcas femeninas.

Cuándo no usarlo:

el morado puede ser relajante, lo cual normalmente es una mala opción para llamar la atención. Usar tonos oscuros puede hacer que tu página sea oscura y distante.
- Tipografía -
Cuándo usarlo:

el marrón puede usarse para estimular el apetito (como el café y el chocolate), lo que lo hace apropiado para el contenido alimentario. También puede venirle bien a contenido de animales, veterinarios y finanzas.


Cuándo no usarlo:

el marrón puede ser aburrido y demasiado conservador. No se recomienda para llamar la atención.
Cuándo usarlo:
dependiendo de los colores con los que lo combines, el negro puede ser elegante y tradicional, o moderno y puntero. Sirve muy bien para productos de lujo, moda, marketing y cosméticos.

Cuándo no usarlo:
demasiado negro puede resultar cargante. El negro también puede ser amenazante o malvado, y hacer que la gente se sienta incómoda o asustada.
Cuándo usarlo
:
el blanco se asocia a los médicos, enfermeras y dentistas, lo que lo hace un gran color para las páginas relacionadas con la industria de la salud. También funciona para páginas de tecnología y ciencias. Cuando se emplea con el negro, oro, plata o gris, el blanco también puede emplearse para bienes de lujo.

Cuándo no usarlo:
dado que el efecto del blanco depende en gran medida de los colores que lo acompañan, en teoría puede usarse para cualquier tipo de página.
Cuándo usarlo:
es perfecto para páginas profesionales, bienes de lujo, o para crear un efecto calmante de equilibrio.

Cuándo no usarlo:

algunos tonos de gris pueden resultar aburridos y sin personalidad. El gris no es un buen color para llamar la atención de la gente.
- La psicología del rosa -
Aunque el rosa es un tono de rojo, tiene asociaciones específicas más allá de las del rojo. El rosa representa la sofisticación, sinceridad, romance y amor. No tiene las notas violentas del rojo, y puede ser bastante apacible.
Cuándo usarlo:

el rosa es óptimo para productos o páginas dirigido a mujeres y chicas adolescentes.

Cuándo no usarlo:
el rosa fucsia puede resultar muy chillón, y los tonos más claros pueden ser muy dulces o sentimentales para algunas páginas.
• Col
o
res
A
nál
o
gos:
Para un color dado, sus colores análogos son aquellos que se encuentran a ambos lados del mismo en el círculo de color.
Por ejemplo los análogos del naranja serían el rojo y el amarillo.

Son aquellos que se encuentran aislados, sin presencia de otros colores. Usados producen sensación de unidad, homogeneidad y robustez. Se puede evitar la monotonía utilizándolos con diferente luminosidad (más clara y más oscura).
• Col
o
res
T
riad
a
:
Tres olores constituyen una Triada cuando sus tonos son equidistantes en el Círculo Estándar de Color.
Un ejemplo de triada lo constituirían el amarillo, turquesa y violeta.

Utilizar un esquema de color en triada suele ser una buena solución cuando se desea
un diseño colorido
, ya que la mezcla estará bien balanceada. Si el
conjunto resulta demasiado colorido para nuestras necesidades, siempre se pueden apagar un poco los colores disminuyendo su luminosidad
o su saturación (o ambas).
Usados juntos producen sensación de armonía. Suele ser una buena idea usar colores complementarios como
primario y secundario
de una página web.
• Esqu
e
ma Cr
o
mático Monóton
o
:
Un esquema de color monótono lo constituyen un único tono de color junto a sus posibles variaciones en términos de tintes, luminosidad y saturación.
Suele ser una buena solución si se desea un diseño
robusto y homogéneo.
• Esqu
e
ma
Ac
rom
át
ico Monó
to
no:
Un esquema de color acromático monótono es un caso particular del esquema de color monótono constituido sólo por colores neutros dentro de la gama del negro al blanco.
-Numero de colores por página-
Un esquema de color acromático monótono es un caso particular del esquema de color monótono constituido sólo por colores neutros dentro de la gama del negro al blanco.
Muchos estudios han mostrado que las personas se deciden por un producto en
menos de

90 segundos,
y que el
90% de esa decisión está basada en el color.
Estas investigaciones también han mostrado que el color puede
aumentar
el
reconocimiento de una marca en un 80%.
EL COLOR
• Col
o
res Mon
o
crom
á
ticos:
Full transcript