Ejemplo de una pagina en wix
http://valen014.wix.com/team-valen
jueves, 12 de febrero de 2015
Recursos multimedia
1.
ACLARAR CONCEPTOS
Algunos
conceptos se explican y asimilan más fácilmente con elementos audiovisuales y
gráficos. Se elaboran dibujos, esquemas, animaciones, vídeos y audios que
clarifican los conceptos del curso y permiten una asimilación progresiva de
forma amena.
2.
REFORZAR CONOCIMIENTOS
Los
resúmenes animados, las tablas y esquemas multimedia, permiten incidir de forma
lúdica en conceptos clave, facilitando así el aprendizaje por descubrimiento.
El objetivo es comprobar si el alumno realmente ha asimilado los conceptos
fundamentales tratados en el curso, reforzar los conocimientos y consolidar el
aprendizaje.
3.
INCENTIVAR EL APRENDIZAJE
Mediante
recursos como los juegos interactivos, se ofrece una recompensa directa al
esfuerzo del aprendizaje. En los juegos, el alumno practica con los contenidos
del curso, perfilando los conceptos mediante una herramienta lúdica que le
permite interactuar en su proceso de aprendizaje, y practicar cuantas veces
crea necesario.
4.
AMENIZAR EL PROCESO
Las
animaciones y las imágenes tienen, en ocasiones, un contenido lúdico que ayuda
a amenizar el aprendizaje en un entorno web más atractivo. Los elementos
visuales sirven asimismo para relajar el estudio, descansar la vista, y dotar
al curso de una imagen dinámica.
Interfaz Gráfica de Usuario (GUI)
La interfaz gráfica de usuario, conocida también como GUI (del inglés graphical user interface) es un programa
informático que actúa de interfaz de usuario, utilizando un
conjunto de imágenes y objetos
gráficos para representar la información
y acciones disponibles en la interfaz. Su principal uso, consiste en
proporcionar un entorno visual sencillo para permitir la comunicación con el sistema operativo de una máquina o computador.
Habitualmente las
acciones se realizan mediante manipulación directa, para facilitar la
interacción del usuario con la computadora. Surge como evolución de las
interfaces de línea de comandos que se usaban para operar los primeros sistemas operativos y es pieza fundamental en un entorno gráfico. Como ejemplos de
interfaz gráfica de usuario, cabe citar los entornos de escritorio Windows, el X-Window deGNU/Linux o el de Mac OS X, Aqua.
En el contexto del
proceso de interacción persona-ordenador,
la interfaz gráfica de usuario es el artefacto tecnológico de un sistema
interactivo que posibilita, a través del uso y la representación del lenguaje visual, una interacción
amigable con un sistema informático.
RESOLUCIÓN DE UNA PÁGINA WEB
§
- No diseñes
únicamente para una resolución. El tamaño de
pantalla cambia entre los usuarios. Las variaciones son incluso mayores,
desde el momento en que no siempre se maximizan los navegadores.
- Utiliza una
estructura líquida. Que se ajuste a la visualización
del usuario.
Actualmente el 60% de
todos los monitores están configurados a 1024x768 píxeles, y un 17% usan
800x600 píxeles. Otro 18% de usuario utiliza resoluciones iguales o mayores a
1280x1024 píxeles.
El porcentaje de grandes
resoluciones está creciendo. A partir de 1600x1200 píxeles,
los usuarios raramente amplían su navegador completamente, porque muy
pocas páginas web, están optimizadas para esas dimensiones.
Las grandes resoluciones
son perfectas para trabajar con hojas de cálculo o para diseño gráfico,
pero no para la web actual.
Optimizar para 1024x768
Tu página debería
funcionar y tener su mejor imagen con la resolución más común. También
significa que debe funcionar adecuadamente en otras resoluciones, razón por la
cual recomiendo estructuras líquidas.
Hay tres razones
principales para optimizar el diseño a una resolución:
- Visibilidad
inicial: ¿Está la información visible sin que los
usuarios deban utilizar la barra de scroll?
- Lectura fácil:
¿Cómo se puede leer el texto?
- Estética:
¿Qué imagen tienen los elementos? ¿Se ajustan bien todos ellos?
Tu página debería
funcionar y verse bien al cambiar entre resoluciones.
Los diseños para
móviles son especiales: hay que diseñar de nuevo, proporcionando menos
funciones, y redactar de forma aún más concisa.
RELACIÓN DE COLORES
Círculo cromático
El círculo cromático se
usa en la clasificación de los colores. Se denomina círculo cromático al
resultante de distribuir alrededor de un círculo los colores que conforman el
segmento de la luz. Según Goethe,
en su libro Teoría de los colores de 1810,
de carácter más cercano a lo filosófico que a lo científico, los colores en un
círculo cromático son seis: amarillo, anaranjado, rojo, violeta,azul y verde,
lo que dio paso al Modelo de
color RYB, que a pesar de ser un modelo arcaico e impreciso sigue enseñándose
en las artes gráficas a pesar de presentar serios inconvenientes en la composición
de color; un modelo más exacto surgió tras la aparición de la fotografía en color y basado en los estudios de Newton sobre la luz, que se utiliza en la
producción industrial de color, con mayor precisión en la representación
cromática, y del que se derivan los modelos RGB yCMYK, en el que los colores son:
amarillo, rojo, magenta, azul, cian y verde. La mezcla de estos colores puede
ser representada en un círculo de 12 colores, haciendo una mezcla de un color
con el siguiente y así sucesivamente se puede crear un círculo cromático con
millones de colores.
COLORES COMPLEMENTARIOS
Los colores complementarios son colores que están situados uno
frente al otro en la rueda de color. Ejemplos de ello serían el rojo y el
verde, azul y el naranja, el amarillo y el púrpura, etc. Las combinaciones de
colores complementarios crean un gran contraste entre sí al usarlos a la vez.
COLORES ANÁLOGOS
Los colores análogos son colores que están uno justo al
lado del otro en la rueda de color. Es buena idea elegir un conjunto de colores
análogos para crear una sensación de variedad en el diseño de tu
página web. Ejemplos
de estos serían el azul con el verde, el azul con el azul-violeta o
amarillo-verde, el amarillo con el amarillo-naranja.
TRÍADAS DE COLORES
Una tríada de colores es un conjunto de tres colores que
están dispuestos uniformemente alrededor de la rueda de color. Una tríada
contiene una buena variedad de colores bien equilibrados. En el ejemplo de
arriba, el cian, el naranja y el morado crean un bonito contraste balanceado
entre ellos.
COMPLEMENTARIOS DIVIDIDOS
Los complementarios divididos parten de toman un color y – en lugar
de elegir el color complementario que le corresponde en la rueda de color –
tomamos los dos situados en posiciones inmediatamente adyacentes. En el ejemplo
anterior, si elegimos el amarillo, el color opuesto en la rueda de color es el
morado, pero en vez elegir este, cogemos el azul-morado y rojo-morado, que
crearán un gran contraste con el amarillo y entre ellos serán colores muy
cooperativos.
CUADRADO DE COLORES
El modelo de cuadrado de
color tiene
cuatro colores uniformemente espaciados alrededor de la rueda de color. En el
ejemplo anterior, los colores son azul, naranja, rojo-violeta, y amarillo-verde.
Estos esquemas de color son muy bonitos y funcionan bien con un color fuerte y
versiones más aclaradas de los otros tres colores.
TETRÁDICA (DOBLE COMPLEMENTARIO)
Los esquemas de color en tetrádica se construyen mediante la creación de un rectángulo en la rueda de color. Selecciona dos opuestos en la rueda de color y a continuación seleccionamos otro color desplazándonos dos espacios en la rueda y más su color complementario.
ANATOMÍA DE UN SITIO WEB
1 –
Encabezado
El título es sin duda la pieza más
importante del texto de tu página web. En cuanto a la navegación de los
usuarios, es necesario describir el contenido que se presenta en la página, de
manera que el usuario sepa qué esperar y esté seguro de que está en el lugar
correcto. Esta consideración debe combinarse con la perspectiva SEO – que los
motores de búsqueda entiendan de que trata la página- por lo que incluir la
palabra clave principal se considera la mejor práctica.
Si se trata de una página de
producto, por ejemplo, es perfectamente razonable utilizar simplemente el
nombre del producto. Con un contenido más social, como publicaciones en un
blog, es necesario considerar también cómo de bueno será atrayendo los clics de
los usuarios, tanto de los resutlados de búsqueda como de las redes sociales
como Twitter y Facebook.
2 –
Navegación
La Arquitectura de la Información (IA) es la organización y etiquetado del
contenido de tu sitio web para apoyar la usabilidad y “encontrabilidad“.
Quieres permitir que los usuarios encuentren lo que están buscando, mientras
que también les canalizas hacia las áreas donde tú quieres que vayan. La
navegación es fundamental para la IA, y debe ser determinada durante la fase de
investigación y planificación.
Fundamentalmente, la navegación
debe hacer lo más fácil posible para tus usuarios completar sus objetivos
inmediatos. ¿Qué tareas están tratando de lograr? ¿Qué problema están tratando
de resolver? Debes determinar la forma de comunicarte con tus usuarios y
mostrarles cómo completar sus objetivos, de la manera más natural posible.
En sitios de gran tamaño, tendrás
que categorizar tus páginas de una manera u otra, incluyéndolas en grupos
relevantes. No hay una manera “correcta” de hacer esto, pero algunas opciones
que puedes considerar son:
·
Tipo (por ejemplo, ‘Camas’)
·
Caso de uso previsto (por ejemplo, ‘dormir’)
·
Entorno contextual (por ejemplo, ‘Dormitorios’)
3 –
Redacción
Escribir para la web es escribir
para los usuarios y los motores de búsqueda a la vez. En términos de SEO, tu
contenido debe ser único, y debes utilizar palabras clave y sinónimos
dondequiera que parezcan naturales – sin duda no tengas miedo de usarlos.
La redacción debe ser clara y
descriptiva, enfocada en los beneficios por encima de las prestaciones y hablar
teniendo en cuenta a los usuarios potenciales. Además, querrás que tu contenido
sea memorable, así que escribe con facilidad cognitiva en mente – evita el uso
de jerga y utiliza frases que la gente pueda entender fácilmente (y por las que
pudiera hacer una búsqueda).
Usando un lenguaje familiar
reduces la tensión cognitiva, haciendo tu contenido más creíble y más
convincente.
4 –
Legibilidad
No tiene sentido crear contenido
memorable si nadie lo lee, y se puede reducir aún más la tensión cognitiva al
hacer que tu contenido sea fácil de digerir. Normalmente los usuarios escanean
el contenido y seleccionan las partes que son más relevantes para ellos. Puedes
ayudarles a identificar estas partes haciendo tu contenido más “escaneable”
Asegúrate de que el tipo y el
tamaño de la letra sea legible y que la altura de línea sea cómoda de leer.
Utiliza el espacio en blanco para romper bloques de texto con párrafos y
subtítulos, y destaca tus frases más importantes en negrita o preséntalas como
un listado.
5 –
Tipografías web
Hasta hace relativamente poco, los
diseñadores web estaban restringidos a un número limitado de tipos de letra a
utilizar como texto en una página web. Las tipografías más creativas tenían que
ser incrustadas en imágenes (o flash), por lo que cualquier contenido que
representaban era o inrastreable o tenía que ser descrito usando una
etiqueta alt.
Las fuentes web permiten a los
diseñadores y desarrolladores hacer uso de fuentes mucho más creativas,
mientras que siguen utilizando texto rastreable. La tipografía es un tema en sí
mismo, y los diseñadores web han estado usando fuentes audaces y creativas para
atraer la atención del usuario durante años – las Fuentes Web hacen que el
proceso sea “SEO friendly”.
A menudo hay que pagar una
licencia para el uso de Fuentes Web de proveedores como Fonts.com, MyFonts, Typekit y Font Deck. Pero también hay algunos servicios gratuitos
como Google Web Fonts.
6 –
Imágenes
Se han hecho importantes
investigaciones que sugieren que las imágenes son mucho más memorables que el
texto, y muchos compradores online navegarán por tu web sólo por mirar las
imágenes. Para las páginas de productos, utiliza imágenes nítidas, claras y lo
más grandes posibles. Considera también incluir una versión ampliada o una
función de zoom.
Haz que la imagen por defecto sea
la imagen más relevante (por ejemplo, la opción de color que sea más vendida) e
incluye un montón de imágenes adicionales para cubrir diferentes opciones de
color, productos dentro / fuera de un contexto y detalles del producto. Si eres
revendedor, puedes agregar valor haciendo tus propias fotografías o demostrar
una propuesta de valor única, que te distinguirá de las imágenes de tus
competidores.
Nota: Si no
eres el propietario de las imágenes, debes obtener los derechos de uso de las
imágenes o usar imágenes que ya tengan licencia para uso comercial (a través de Creative Commons o similar).
7 –
Señales de Confianza
Para
que la gente te compre, primero tiene que confiar en ti. Además de un gran
diseño y un buen contenido, puedes ayudar a construir la confianza de los
usuarios a través de la incorporación de señales de confianza, como testimonios
de clientes. La mayoría de las señales de confianza apuntan a convencer al
usuario de que el sitio web está dirigido por personas reales, es lo
suficientemente grande como para manejar su negocio, y cuenta con la confianza
de otros usuarios con gustos similares.
Otras
señales de confianza comunes incluyen:
Experiencias de usuarios – en particular, las vídeo-opiniones, ya que son más difíciles de
falsificar
Soporte a través de Chat en Directo – confirma al usuario que hay gente real detrás del sitio web
Q & A –
preguntas frecuentes de los usuarios que son contestadas por el personal o por
otros usuarios, lo que demuestra que otros usuarios están interesados y/o han
comprado el producto también.
·
Número de
teléfono local (además de un número no geográfico)
·
Añadir una
dirección física
·
Portfolio de
clientes
·
SSL o
logotipos de tarjetas de crédito (para comercio electrónico)
·
Páginas de Términos y Condiciones transparentes.
·
Cuentas
enredes sociales – su existencia
implica que está invirtiendo tiempo/dinero en tu sitio
8 –
Migas de pan (Breadcrumbs)
Las migas de pan son un factor
importante para la usabilidad de la web, ya que confirman al usuario dónde está
situado. A menudo, su viaje de exploración les lleva lejos dentro de la web y
esto les permite saltar rápidamente a categorías de nivel superior – sin
importar en que página habían aterrizado inicialmente. Las migas de pan también
son útiles para el SEO, ya que permiten a los motores de búsqueda determinar la
estructura del sitio con mayor facilidad.
Utilizar marcado de microdatos permite que los datos de ruta de
navegación sean mostrados dentro de las SERPs (Página de Resultados de
Búsqueda) – en lugar de una URL fea, muestra tu nombre de dominio y el enlace
de ruta de las migas de pan. Esta es otra buena señal de confianza que podría
ayudar a aumentar el CTR.
9 –
Video
El vídeo puede ser utilizado en
las páginas de productos para comunicar las características y beneficios a
menudo de forma mucho más eficaz que el texto o las imágenes, y muchas empresas
cosechan un aumento significativo en las tasas de conversión después de
incrustar vídeos de productos. El contenido de video también aumenta la riqueza
de la página, lo que mejora la experiencia del usuario y actúa como una señal
de confianza adicional.
Los vídeo-opiniónes de clientes
ofrecen una clara forma de combinar contenido de video generado por los
usuarios con una señal de confianza muy fuerte (sobre todo si se está mostrando
el producto). Además, puedes transcribir tus vídeos a precios muy bajos, con
servicios como SpeechPad, lo cual aporta contenido exclusivo, natural, con
texto de gran relevancia que no necesitarás crear por ti mismo.
10 – Pie
de página
Como parte de tu amplia plantilla
de sitio web, los usuarios esperan encontrar cierta información en el pie de
página, como los vínculos de la empresa de la página (Ej. Quiénes somos,
Contacto), enlaces a “otras” páginas (Ej. Blog), enlaces a los Términos y
Condiciones y enlates a tus redes sociales.
Hay razones para pensar que los
usuarios que se han tomado el tiempo para desplazarse hasta el final de tu
página estén altamente interesados en tus productos/servicios, así que podrías
optimizar tu pie de página con CTAs (llamadas a la acción) adicionales, como
por ejemplo un formulario de suscripción a una newsletter.
También podrías recompensar la
intriga de tus usuarios y hacer tus páginas más interesantes con un diseño de
pie de página único, peculiar o humorístico.
Suscribirse a:
Entradas (Atom)