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.
HERRAMIENTAS PARA EL DESARROLLO WEB
Chrome Developer Tools:
Chrome Developer Tools son un conjunto de
herramientas de depuración integradas en Google Chrome. Los DevTools
proporcionan a los desarrolladores acceso
a los componentes internos del navegador y sus aplicaciones web. Se
utilizan para rastrear problemas de diseño de de manera eficiente y obtener
ideas para la optimización de código.
Con las DevTools puedes editar el
DOM (HTML)/CSS en tiempo real, depurar JavaScript paso a paso y añadir una
terminal. Con esta herramienta puedes aprender mucho acerca de cómo un
navegador hace su trabajo realmente, lo que te permite tomar por completo el
control de tu aplicación. Además de su sitio, puedes visitar su canal de Youtube donde
conseguirás información muy valiosa que seguro sabrás apreciar. También puedes
unirte a su comunidad en Google +.
Grunt:
Grunt es
un automatizador de tareas de JavaScript. Básicamente es una librería que nos
permite configurar tareas automáticas, lo
que nos puede terminar ahorrando valioso tiempo en el desarrollo y despliegue
de aplicaciones web. Ofrece una gran cantidad de plugins incluidos para tareas comunes, pero
también te da la opción de escribir las tareas que necesites para cubrir tus
necesidades.
Una vez instalado, Grunt es fácil
de usar y cuando aprendas todo su potencial seguramente no dejaras de usarlo
regularmente. En su sitio hay una guía de primeros pasos y una serie de
documentación que te ayudara a conocerlo. Si quieres revisar su código y
colaborar con el proyecto puedes visitar su perfil de GitHub o unirte a su comunidad en Twitter.
LiveReload:
LiveReload es una sencilla herramienta
que te ahorrara millones de clicks a
la opción de refrescar/recargar el navegador cada vez que haces un cambio en
HTML/CSS/JavaScript. Es un protocolo web que dispara eventos al cliente cada
vez que los archivos son modificados. El cliente/servidor está disponible en
diversas implementaciones.
Se puede descargar para las
distintas plataformas desde su sitio. Si quieres dar un vistazo a su código y
hacer contribuciones puedes visitar su perfil de GitHub. También puedes
seguirlos en Twitter.
Mocha:
Mocha es un poderoso framework de pruebas de JavaScript que te ahorrara
muchos dolores de cabeza. Se ejecuta en Node.js y en el
navegador facilitando las pruebas de código
asíncrono, siendo esta su característica principal. Los tests de Mocha se ejecutan en serie y permiten
reportes flexibles y precisos.
Mocha ofrece sólo el
comportamiento BDD o Behavior-driven development y
no el assertion/mock framework, pero ya que se puede integrar
perfectamente con frameworks dedicados
como Chai y Sinon esto no representa
un problema.
Mocha puede ser instalado
con npm. Para más información puedes visitar su Wiki o unirte a su grupo de Google. Si
deseas ver su código fuente puede visitar su perfil en GitHub.
Karma:
Karma es
un test runner de JavaScript escrito por los
creadores de AngularJS. Es el complemento perfecto para correr continuamente todas
esas pruebas que escribes con Mocha, con feedback en
tiempo real. Con esta herramienta de pruebas puedes ejecutar en modo continuo
las pruebas desde tu ordenador hasta producción.
Karma permite correr tus pruebas
en múltiples navegadores para que puedas depurar tu código al máximo mientras
lo escribes. Para ver su código fuente y hacer contribuciones puedes visitar su
perfil en GitHub. También puedes unirte a su comunidad en Twitter.
FASES DEL DESARROLLO WEB
Investigación:
La investigación debe considerar la cartera de Internet
entorno al sitio Web propuesto. Las oportunidades de consolidación son
consideradas con base en su contexto.
Una revisión de sitios similares, así como el material de
marketing existentes pueden ayudar a identificar un estilo para el diseño.
Planificación:
Cuando se planifica un sitio Web, se debe considerar:
·
Entender a
su audiencia y sus necesidades
actuales y a futuro.
·
Definir
claramente el propósito del sitio Web
·
Asignar los temas
y contenidos que le gustaría cubrir
·
Decidir cómo se
llamará el sitio
·
Comprobar la
disponibilidad del nombre de
dominio y registrarlo
·
Hacer
un análisis de lo que otros sitios han hecho
Arquitectura del sitio y contenido:
Con base en las preferencias del contenido se crea un mapa de
la arquitectura del sitio para demostrar visualmente cómo se organizan el
contenido y la estructura del
sitio.
Diseñar, construir y hacer pruebas:
Propuesta de diseño
web y definir "qué te transmite
a través de lo que ves."
Una vez establecido el diseño final del sitio y el contenido, se
incorporan fotografías y todo el diseño gráfico para complementar el sitio Web.
En esta etapa la estructura del sitio se encuentra desarrollada y en fase
de prueba por los usuarios y grupos de interés por parte de la empresa.
El sitio Web se ha lanzado y se encuentra trabajando en vivo.
Operar, mantener y evaluar:
En esta etapa el sitio Web es controlado y en constante
mantenimiento para posibles mejoras. Se procura obtener informes sobre el
rendimiento, para asegurar que el sitio Web sea un éxito.
Uno de los elementos del plan de mantenimiento debe ser la
evaluación periódica del sitio, esta evaluación podría dar lugar a una decisión
de mejora o reconstrucción total de la misma.
Una correcta evaluación puede dar lugar a la consolidación de
los contenidos y por ende del sitio, por otro lado, también puede determinar
poco rentable la operación.
Después del lanzamiento:
Se recomienda una agresiva campaña de marketing a
través de motores
de búsqueda para obtener
una clasificación pronta, además de programas de mantenimiento periódico sobre
el sitio.
Suscribirse a:
Entradas (Atom)