Archivo para ‘Diseño Web’ Categoria
Formatos gráficos
1 de Marzo de 2010Aunque hay cientos de formatos de archivos gráficos existen navegadores web que sólo admiten algunos de ellos. Aquí describiremos los diferentes formatos de archivos gráficos que están disponibles para los diseñadores web y cuándo deben usarse.
Los formatos de archivos gráficos soportados por los navegadores web más populares son Graphic Interchange Format (GIF), Joint Photographic Experts Group (JPEG), Portable Network Graphics (PNG) y gráficos vectoriales. Algunas de las propiedades de los archivos gráficos son:
Transparencia – esta característica permite que la imagen sea de mayor o menor grado de opacidad, y sólida a totalmente transparente.
Compresión - esta característica permite que la imagen se almacene en un archivo mucho menor mediante el uso de un algoritmo matemático para manejar grupos de píxeles como un solo tema.
Entrelazado – el entrelazado permite que la imagen se cargue en primer lugar de las filas impares y luego volver y sacar las filas pares. Permite al visitante a ver la imagen antes.
Animación - la animación da la apariencia de movimiento por medio de una serie sucesiva de imágenes. Los Gifs animados no requieren un plug-in de navegador y pueden trabajar en casi todos los dispositivos.
Carga progresiva – la carga progresiva es similar a entrelazar ya que sólo carga una parte de la imagen al principio, pero no se basa en filas alternas y permite al usuario ver la imagen más rápidamente.
GIF
Se originó en la década de 1980 y fue adoptado por los diseñadores de web en la década de 1990 como el formato gráfico preferido para páginas web. Los archivos GIF utilizan un algoritmo de compresión que mantiene archivos de pequeño tamaño para una carga rápida.
Se limitan a 256 colores (8 bits) y apoyan la transparencia y los gráficos entrelazados. También es posible crear gráficos animados usando el formato GIF. Todos los navegadores pueden visualizar los archivos GIF.
Ventajas del GIF :
* La mayoría da amplio apoyo de formato gráfico.
* Los diagramas se ven mejor en este formato.
* Soporta la transparencia.
JPEG
Los archivos JPEG son comprimidos con apoyo de “color verdadero” (24 bits) y son el formato preferido para las fotografías en materia de calidad de imagen. JPEG admite un formato progresivo que permite una imagen casi de inmediato con mejora de calidad como el resto de cargas.
A diferencia de un archivo GIF, la compresión de archivos JPEG puede ser controlada por el diseñador, que permite diferentes niveles de calidad de imagen y tamaño de archivo.
Ventajas JPEG:
* Ración media de compresión de grandes velocidades de descarga.
* Produce excelente calidad de fotografías y dibujos complejos.
* Soporta 24-bit de color.
PNG
Es un formato bastante reciente que se presentó como una alternativa a los archivos GIF. PNG admite hasta 24 bits de color, con transparencia y entrelazado puede contener una descripción breve texto de contenido de la imagen para el uso de motores de búsqueda.
Desafortunadamente, la mayoría de los navegadores no soportan PNG y los que lo apoyan, no son compatibles con todas sus características todavía. Pero eso cambiará en el futuro.
Ventajas PNG:
* Supera la limitación de 8-bits de color del GIF.
* Permite la descripción de texto de la imagen para el uso de motores de búsqueda.
* Soporta la transparencia.
Gráficos Vectoriales
La mayoría de los gráficos web son imágenes de mapa de bits o mapas de bits, que consisten en una rejilla de píxeles de colores. Dibujo e ilustraciones deben ser creadas como gráficos de vectores que consisten en descripciones matemáticas de cada elemento que compone las líneas de las formas y el color de la imagen. Los gráficos vectoriales se crean mediante la elaboración de programas tales como Adobe Illustrator y Macromedia Freehand y son la elección de artistas gráficos para crear dibujos. Los gráficos vectoriales se debe convertir a GIF, JPEG o PNG para ser utilizados en una página web.
¿Qué formato debemos utilizar?
Podemos elegir entre el formato GIF o JPEG para la mayoría de usos. Pero, dado que el tamaño de archivo de un archivo GIF es generalmente mas pequeño que el tamaño de archivo de un archivo JPEG, la mayoría de los diseñadores utilizan el formato GIF para los fondos, cajas, marcos y cualquier otro elemento gráfico.
La mayoría de los diseñadores seleccionan el formato JPEG para las fotografías e ilustraciones en la compresión para no comprometer la calidad visual de la imagen.
GIF y JPEG son un apoyo universal y la elección del diseñador es determinada para el elemento gráfico que utilice.
Teoría del color, conceptos básicos
16 de Noviembre de 2009¿Qué es la teoría del color?
La teoría del color es un conjunto de principios para crear combinaciones de color armoniosos. Las relaciones de color se pueden representar visualmente con una rueda de colores – el espectro de color envuelto en un círculo.
La rueda de colores es una representación visual de la teoría del color:
Las combinaciones de colores armoniosos son llamados esquemas de color. Los esquemas de color armoniosos permanecen independientemente del ángulo de rotación.
Esquemas clásicos de color:
Combinación de colores monocromáticos
El esquema de color monocromático utiliza variaciones de luminosidad y la saturación de un solo color. Este esquema se ve limpio y elegante. Los colores monocromáticos van bien juntos, produciendo un efecto calmante. El esquema monocromático es de fácil visualización, sobre todo en tonos azul o verde.
Colores Análogos
El esquema de color análogo utiliza colores que son adyacentes entre sí en la rueda de color. Un color se utiliza como color dominante, mientras que otros son utilizados para enriquecer. El esquema análogo es similar al monocromático, pero ofrece más matices.
Combinación de colores complementarios
El esquema de color complementario consta de dos colores que están uno enfrente del otro en la rueda de color. Este esquema se ve mejor cuando se coloca un color cálido en contra de un color frío, por ejemplo, rojo contra verde-azul. Este esquema es intrínsecamente de alto contraste.
Split de colores complementarios
La división de régimen complementario es una variación del régimen complementario estándar. Se utiliza un color y los dos colores adyacentes a su complementario. Esto proporciona un alto contraste sin la fuerte tensión del esquema complementario.
Triádica de colores
El esquema de color triádica utiliza tres colores equidistantes en la rueda de color. Este esquema es muy popular entre los artistas, ya que ofrece un contraste visual fuerte, manteniendo la armonía y la riqueza de color. El esquema triádico no es tan contrastante como el esquema complementario, pero parece más equilibrado y armonioso.
Tetrádica (Doble Complementario) Combinación de colores
El tetrádicos (doble complementarios) del sistema son más variados, ya que utilizan dos pares de colores complementarios. Este régimen es difícil de armonizar, si los cuatro colores se utilizan en cantidades iguales, el sistema puede parecer desequilibrado, por lo que debe elegir un color para ser dominante o someter a los colores.
Elementos y principios de diseño
13 de Noviembre de 2009Los principios son básicos y que aparecen en cualquier pieza de trabajo bien diseñado, ya sea para la web, un folleto, una tarjeta de negocios o para un anuncio. Ninguno de estos principios trabaja solo, por lo general trabajan juntos.
Elementos y principios
En el pasado hemos visto los elementos de diseño, es decir, tipo, línea, forma, textura. Consideremos estos como los bloques de construcción para un diseño. Los principios que veremos próximamente son los que hacen la estructura fuerte y lo mantiene unido. Los cinco principios que pueden ayudar a construir un diseño fuerte y hacer que se destaquen son:
Balance
Para crear un aspecto limpio y equilibrado, cada elemento debe tener una conexión visual con otro elemento de la página.
Proximidad
Cuando los elementos que están relacionados unos con otros se colocan juntos, se convierten en una unidad visual, debemos reducir el desorden y dar una estructura clara. Organizar la información en grupos apropiados es uno de las más rápidas y más fáciles maneras para mejorar los diseños.
Contraste
Si todo en la página tiene el mismo aspecto, vamos a tener un diseño bastante aburrido. Al usar contraste en el diseño, la página de inmediato tendrá un mayor atractivo. El contraste puede ser aplicado a las formas, colores, tipo y líneas.
Valores
El valor puede ser descrito simplemente como la relativa ligereza o la oscuridad de un objeto. Como contraste, el valor puede añadir profundidad y dimensión a sus diseños.
Color
Color y valor están estrechamente relacionados. El color tiene un poder increíble para crear un estado de ánimo y cambiar la intención de un diseño. Las opciones de color deben ser realizadas con cuidado para asegurar el éxito de cualquier diseño.
Contraste – Principios básicos del diseño
13 de Noviembre de 2009¿Qué es el contraste en Diseño?
El contraste es una acentuación de las diferencias entre los elementos en un diseño. La mayoría de la gente piensa que sólo se aplica a los colores, pero por el contrario se puede trabajar con cualquier elemento del diseño. Por ejemplo, si tenemos un grupo de líneas que son todas del mismo tamaño, no hay contraste. Pero si una tiene mayor tamaño que las otras, contrastará con el resto.
El uso de contraste en Diseño:
Al aplicar contraste en el diseño Web, hay pensar más allá del color. El contraste de colores fácilmente puede ser exagerado. Pero mediante el uso de las diferencias más sutiles en como tamaños de fuente, formas de diseño, imágenes y estilos de texto, podemos tomar ventaja del mismo sin limitarnos tan solo al uso de contraste de colores.
Cómo incluir contraste en Diseños Web:
El contraste en el diseño Web se puede aplicar de muchas maneras:
- Cambiar las fuentes. El tamaño de la fuente, el peso de la fuente, o familia de la fuente pueden proporcionar el contraste a su texto. Los titulares proporcionan una gran diferencia del texto que los rodea.
- En los enlaces también podemos usarlo, con un cambio de color o subrayando el texto circundante.
- Utilizando imágenes de diferentes tamaños y elementos. Si tenemos una sección de texto que es el foco principal de una página, podemos hacer uso de diferentes tamaños de elementos e imágenes que lo rodean.
Navegación eficaz en tu sitio Web
23 de Septiembre de 2009Si la gente no puede navegar a través de tu sitio, pronto se irá. Así, la navegación efectiva en el diseño de tu sitio web es crucial. Pero hay algunas cosas básicas que necesitas hacer antes de poder empezar a preocuparte por enlaces, imágenes o Flash.
Arquitectura de la Información
Antes de que incluso puedas empezar a planear tu navegación, es necesario definir la arquitectura de información de tu sitio. La arquitectura de información es la taxonomía o la estructura de tu sitio Web.
Algunos elementos de taxonomía común en una página Web corporativa o de negocios son:
Productos - los productos o servicios que vende la compañía
Acerca de - información sobre la empresa
Relaciones con los inversores – Información específica para los inversores
Soporte técnico – Ayuda para los clientes
Algunos elementos de taxonomía común en una página Web personal son:
Acerca de mí – información sobre el autor de la página
Vínculos favoritos – Enlaces que al autor le gustan
Amigos y familia – información acerca de los amigos del autor y de la familia
Organización
Una vez que hayas determinado la arquitectura de tu sitio, necesitas decidir la forma de organizarlo.
Al pensar en la organización, debes pensar acerca de cómo tus clientes podrían pasear por ella. Los diagramas de flujo y storyboards te puede ayudar a trazar exactamente en qué te gustaría animar a tus lectores a utilizar el sitio.
Diseño de navegación
Una vez que tengas una idea de la arquitectura y organización, estas listo para pensar en el diseño de la navegación. Hay varias cosas que debes considerar al decidir sobre el diseño de su navegación:
1. Accesible
La navegación de tu sitio web es posiblemente la parte más importante de una determinada página. Así que deberías hacerla lo más accesible posible. Esto significa evitar los efectos especiales, como Flash, Java o JavaScript como su método de navegación solamente.
2. Significativa
Mantén el sentido de la navegación. Haz una vinculación clara. Alguien que nunca ha estado en tu sitio antes debe saber inmediatamente como usar los vínculos.
3. Prevalente
Tu navegación debe aparecer en cada página de tu sitio. Si bien no es necesario tener la navegación idéntica, la estructura básica debe ser la misma en todo el sitio, con los cambios utilizados sólo para indicar la ubicación dentro de la jerarquía.
Una vez que hayas diseñado tu navegación, entonces puedes comenzar a utilizarla. Ten en cuenta que es realmente tentador cambiar tu estructura de navegación mientras estas en el centro de tu aplicación. Pero si decides hacer esto, asegúrate que estas haciendo el cambio a nivel mundial y que se ajusta a los objetivos originales de la taxonomía y la arquitectura de la información.
Envíar páginas HTML en Gmail y Hotmail a nuestros usuarios
13 de Febrero de 2009Poder envíar una página en HTML por correo electrónico a nuestros usuarios nos ofrece una vía para mantener el contacto con nuestros usuarios a la vez que podemos anunciar nuevos productos, servicios y novedades.
El correo electrónico sin colores ni imágenes quedó atrás y la mayoria de gestores de correo modernos (Outlook, ThunderBird, Evolution…) soportan HTML y estilos CSS. El problema es que no todos nuestros usuarios visualizan sus correos vía estos programas y lo realizan con sus navegadores Web conectados directamente a sus proveedores, es decir, vía webmail.
Los proveedores de webmail, por lo general, acotan y restringen la carga de elementos HTML en los mensajes que sus usuarios envían y reciben, por lo que, de estilos CSS más bien nos podemos olvidar para ser compatibles con los webmail más comunes. ¿Qué solucion nos queda? Sigue leyendo, no está todo perdido.
Para Gmail
- Ignora todo los estilos dentro de los tags <styles></styles> Da lo mismo si está en el <head> o en el <body>. Los elimina
- Permite la carga de estilos “inline” es decir, escritos en cada elemento, con la excepción de las imágenes de fondo y de altos específicos (height).
- No muestra ninguna imagen por defecto, el usuario debe activar la opción de “Mostrar las imágenes externas del mensaje” para poder visualizarlas
- Para poder visualizar fondos, hay que hacerlo especificando en un <td> la propiedad “background”. Así: <td background=”imagen.gif”>
- Ignora los fondos de <body>
Para Hotmail
- Ignora todo lo que exista en <head></head>, incluyendo el tag <style></style>, pero permite cargar <style> dentro de <body>.
- Carga los estilos “inline” excepto: los margenes, fondos, altos específicos.
- Al igual que en Gmail, podemos cargar fondos de forma tradicional vía la propiedad de un <td>
- Los anchos y altos especificos también se deben aplicar como propiedad y no como estilo.
Tal y como podemos ver, aunque es funcional, nos limita bastante a la hora de crear un html complejo. Con estos consejos claros desde el principo podremos empezar sobre seguro en la tarea de confeccionar un HTML para envíar por correo.
Los Cinco Elementos Básicos de Diseño Web
16 de Enero de 2009Los elementos y principios básicos que participan en diseño web son aplicables para todos los demás tipos de diseño. Estos principios le mostrarán de forma eficaz como reunir los diversos elementos de diseño para obtener un buen resultado.
El balance es la distribución igualitaria de los elementos ligeros y pesados en una página por separado. Usted debe conseguir el equilibrio visual en el diseño de su web en oda la página, no sólo en la vista inicial.
Hay tres tipos de equilibrio que pueden lograrse cuando se diseña una página.
* Simétrico. Esto se logra mediante la colocación de todos los elementos en una forma – un elemento fuerte de la izquierda se corresponde con otra de la derecha.
* Asimétrico. Estos son más difíciles de construir, pero hay estrategias para lograr este objetivo que puede incluir la variable de textura, color y tamaño de imagen y posicionamiento para llegar a una agradable vista de la página.
* Discordantes. Estos sitios Web que están fuera del equilibrio sugieren acción o movimiento, por lo que puede crear discordacia.
El contraste es algo más que unos colores como blanco y negro, también implica contrastar formas, tamaños y texturas. Puede sacar el máximo provecho de contraste al cambiar el tamaño de la fuente, el peso y la familia y cambio de texto y también las imágenes de diferentes tamaños y elementos. Sin embargo, tenga cuidado de no hacer saltar por los aires a sus lectores o asustarlos con colores contrastantes.
El énfasis implica saber colocarlo en los puntos principales que queremos destacar. Tenga en cuenta que si todo el diseño tiene el mismo énfasis, la totalidad de página suelen aparecer demasiado ocupada y puede terminar siendo caótica. Debe centrarse en crear una jerarquía visual del diseño y poner énfasis sólo en los elementos que quiere que destaquen mas.
El ritmo, también conocido como la repetición, aporta la tan necesaria coherencia interna en su sitio web. Casi todos los elementos en su diseño se pueden repetir con el fin de crear un ritmo agradable. Por ejemplo, puede repetir el título un par de veces para obtener más énfasis, repetir la misma imagen a través de la página, crear un fondo o repetir un estilo particular para proporcionar un diseño del sitio con coherencia.
La unidad, también considerada como proximidad, es lo que mantiene todos los elementos similares en el sitio por igual y los más diversos entre sí. La unidad cuando se trata de diseño web se consigue principalmente a través de la correcta colocación en la disposición. Usted puede aplicarla de muchas maneras. Puede, por ejemplo, ajustar el diseño de sus elementos para ponerlos cerca o muy lejos el uno del otro. En el cuerpo de su página, puede cambiar el espaciado alrededor del texto en su página de contenidos.
Como el diseñador, es importante que conserve estos elementos en cuenta y los aplique de manera adecuada a su página web.
jQuery más fácil con una Extensión del Dreamweaver
9 de Enero de 2009Se trata de una extensión disponible gratuitamente que se instala en el Dreamweaver, a través de un típico .MXP. Facilita definitivamente el trabajo del día día con este lenguaje de programación. Su aportación se puede resumir en:
- Sintaxis coloreada del lenguaje.
- Autoayuda cuando escribes, con listados que contienen todas las funciones de jQuery y jQuery UI.
- Biblioteca de recortes de código.
Captura del plugin en acción
Esta disponible para Dreamweaver CS3, 8, MX2004, and MX, tanto en Windows como en Mac OS X.
¿Debe ser único el valor de un atributo ID en HTML o XHTML?
5 de Enero de 2009En concepto, se trata de la asociación de un identificador único a un elemento del HTML que soporte dicho atributo. Por lo tanto, sí debe ser único. Y esto parece algo sencillo de entender y fácil de aplicar. Pero resulta a la práctica un problema, ya sea por descuido del maquetador o por desinterés.
Para comprender por qué debe ser único, hay que entender los principales usos de un identificador de elemento de HTML:
- Referenciar elementos de la página para su uso a través del DOM + getElemenByID.
- Referenciar selectores para la aplicación de estilos en las Hojas de estilos CSS.
- Referenciar navegaciones con anclas en la misma páginao para acceder a fragmentos de un documento directamente referenciados a través de un hiperenlace.
- Asociar controles de formularios de HTML con etiquetas (labels).
Si bien es cierto que una página Web en un determinado momento puede no requerir que este atributo esté presente o que cuando esté presente no sea único, no hay que descartar las buenas maneras o hábitos en la maquetación del HTML. Porque en un futuro próximo, con la mera implementación de scripts de validación de formularios más accesibles, se deberá hacer un mayor esfuerzo para conseguir el resultado esperado.
Información para el Nuevo Diseño Web
5 de Enero de 2009El Diseño de la información para la Web ha cambiado.
La gente está cambiando la forma en que consumen información en línea, así como sus expectativas acerca de su entrega. La naturaleza social de la web trae consigo una expectativa de interacción con la información y moderno diseño web que se refleja. En la actualidad existen formas alternativas de navegación, incluida la capacidad para navegar por el usuario, las nubes de etiquetas, con pestañas de navegación etc avances en la tecnología junto con estos cambios en las expectativas de los usuarios están afectando a la forma en que la información se presenta en una página web. Hoy son sitios web con el objetivo de utilización intuitiva y las interfaces que están en continua evolución en respuesta a las necesidades de los usuarios. Los diseñadores de página web se están acercando a la información de diseño diferente y sencillo diseño, páginas web interactivas que incorporen los avances en el diseño de la interfaz Web, Web actual filosofías y las necesidades de los usuarios. El diseño de la información para la nueva web es sencilla, es social y que abarca otro tipo de navegación.
Simplicidad de Aplicaciones Web
El diseño de aplicaciones web de hoy está dirigido por un principio de simplicidad. Los autores de Aplicaciones están creando software que tienen menos funcionalidades y una menor curva de aprendizaje para los usuarios finales. La funcionalidad que se incluye es la que es necesaria, nada más. Los días de las aplicaciones que están demasiado cargadas de características están pasando. Hoy son la potenciación de programas de software a los usuarios, ya que no necesitan un manual para utilizarlas, que son simples e intuitivas. No hay ningún software para instalar, y con el compromiso de muchos de registro de usuarios no es necesaria para probar la funcionalidad.
Esta filosofía de “menos es más” se puede ver en la actualidad en herramientas de productividad como Google Docs y Hojas de cálculo (antiguo Writely), además de un montón de otras aplicaciones Web. Estos nuevos sitios web se rigen por una singularidad de propósito y la sencillez en su funcionalidad.
Simplicidad de diseño
Esta nueva tendencia de la simplicidad de la funcionalidad de la aplicación web se refleja en el diseño y el estilo de las páginas web de hoy. Si bien se utilizó para tratar de meter tanta información como sea posible en nuestras páginas web, y de preferencia “por encima de la tapa”, en la actualidad las páginas web de los diseñadores se esfuerzan por eliminar lo innecesario, mostrando una interfaz limpia y simple para los visitantes. Ellos están intentando involucrar a la atención de los usuarios de la Web aprovechando sus ojos a lo que es importante.
Muchos de los nuevos cambios en el diseño web han sido influenciados por las tendencias estilísticas de la Apple y la interfaz de Mac OSX. Un léxico de diseño moderno que se ha desarrollado para la Web que se ha establecido como el diseño con un propósito, no sólo el diseño para su propio bien.
*Diseño Centrado
Somos capaces de presentar nuestra información en un lugar limpio y seguro de sí mismo centrado en la orientación. Este diseño es una opción práctica porque es mucho más compatible con distintos tamaños de pantalla y resoluciones.
*Bordes redondeados
La tendencia actual es para redondear las esquinas, incluso en las fuentes – no presentar nada agudo o grave. Es el reflejo de la actitud y el tono informal de hoy en la Web.
*San Serif y Fuentes minúsculas
En armonía con el tono casual de la nueva web, y la tendencia a redondear las esquinas, hay un montón de fuentes san serif que se encuentran en la actualidad de las nuevas páginas web. Del mismo modo, las minúsculas son las fuentes utilizadas, sobre todo en el logotipo para transmitir una cómoda y ocasional relación con el usuario.
*Fuentes grandes
Estas son a menudo utilizadas por los nuevos sitios Web para señalar los conceptos clave a los usuarios, o para transmitir con valentía un simple y claro mensaje acerca de la finalidad principal del sitio web.
*Navegación simple
La navegación por páginas Web Nueva es distinta y clara, se establece además de los ocupados del contenido y el cuerpo de la página. A menudo se encuentra en ejecución en la parte superior de la página. Es persistente el sentido de que aparece en cada página en todo el sitio web.
*Logos en Negrita
Las nuevas aplicaciones Web son audaces y confiadas y también lo son los logotipos de la compañía que representan sus marcas.
*Colores fuertes
Estos son utilizados por los sitios web de hoy a hacer hincapié en conceptos importantes, así como para la creación de la distinción entre zonas de una página.
*Colores complementarios
Los sitios web modernos tienden a no ser monocromáticos, pero ricos en color. Muchas de las nuevas páginas web están utilizando los colores complementarios, como los azules y naranjas, y amarillos y violetas para enriquecer su diseño.
*Sutil 3D
No encontraremos efectos chillones 3D o ilusiones ópticas en las nuevas páginas web de hoy, sino un sutil uso de sombras, gradientes, y reflejo de superficies que añaden un borde realista a la interfaz.
Superficies reflectantes
Esta tendencia de crear el efecto de una reflexión, o espejos de superficie se puede encontrar en muchos de los nuevos sitios web, a menudo en torno a un logotipo.
Iconos simples
Debido a la verdadera naturaleza de la Nueva Web hay muy pocas o ninguna fotografía. En el lugar de la comercialización de estas imágenes con gente de negocios felices agitando las manos, tenemos originales iconos que representan las acciones que pueden ser adoptadas por el usuario.
Blanco
Diseño y mantenimiento de un sitio simple y Zen-como la disposición por el aumento de alturas y añadiendo la línea de los lotes a las páginas en blanco. En lugar de exclusión de la página con la sobrecarga de información, la nueva web de los diseñadores se centra en lo esencial, y en la producción limpia y fresca páginas.
Starbursts
La emocionante explosión de formas está muy de moda en los sitios web. Se pueden encontrar en toda la Web, y la mayoría de las veces son utilizados para promover y destacar un servicio gratuito.
Los avances en interfaces de usuario
Además de los estilos de diseño, se han producido varios avances recientes en diseño de interfaz de usuario que han hecho de la web un simple lugar para estar.
AJAX – es una evolución en el diseño de la interfaz web que permite que la ver la información que se procesa sin volver a cargar la página. Este adelanto ha traído consigo varias nuevas capacidades en el diseño de página web.
Grandes pestañas
Alternar entre las pestañas es ahora totalmente posible sin volver a cargar la página, los diseñadores Web están haciendo un buen uso de ellas.
Drag & Drop
La funcionalidad de arrastrar y soltar que permite AJAX permite a los diseñadores crear ricas experiencias interactivas para los visitantes del sitio web. Muchas de las actuales aplicaciones de la página de inicio personal utilizan esta funcionalidad, que permite a los usuarios arrastrar los widgets y gadgets que desee en su espacio personalizado.
Mapas
Hace apenas unos años era ridículo pensar que se podía combinar cualquier conjunto de información con un mapa del mundo y permitir a los visitantes de su sitio web ampliar la foto en la calle e incluso obtener una foto de satélite de la zona. Sin embargo, las capacidades de mapeo se están convirtiendo en un lugar común y parte integral de la experiencia del usuario de hoy. Y son algo que los usuarios llegan a esperar.
Wysiwyg
Ya no es necesario conocer el código HTML para crear contenido en línea. Blogs, wikis, sistemas de gestión de contenidos, y otras aplicaciones basadas en web están ofreciendo “Lo que usted ve es lo que obtiene” editores que imitan una palabra-como el interfaz de contenidos.
Previas
Acerca de esta tipo de web a los visitantes ya no les es necesario el compromiso de hacer clic a través de otro sitio antes de saber exactamente lo que veremos allí. A través de aplicaciones tales como el ajuste, es posible proporcionar a los usuarios con página web todas las vistas previas de los enlaces de una página.
Social
Existen al menos dos tendencias que se perfilan en el diseño de sitios web de hoy, y cada vez hay mas cruce entre los dos.
La socialización de los medios de comunicación y sus aplicaciones
Ha surgido en la Web una tendencia hacia la socialización de las cosas que no son inherentemente social, tales como libros, fotos, videos, y el texto como artículos de noticias, documentos. Esta inclinación se extiende a las aplicaciones Web como la colaboración en la gestión de los proyectos incluidos en programas de Base, documentos para compartir aplicaciones como Google Docs y Hojas de cálculo, y muchos otros. Con estos cambios se añade una expectativa entre los usuarios que ahora supongo que será capaz de interactuar con la información a descubrir en la Web.
Comentando
Los visitantes del sitio Web ya no son pasivos lectores, sino que activamente quieren unirse a la conversación y añadir sus comentarios.
Calificación y Revisión
Calificación de autoría de los artículos y comentarios son capacidades que se están convirtiendo rápidamente en requisitos para los sitios web con los productos y medios de comunicación.
Compartir
En el día de hoy la página web de un usuario es una colaboración que espera que las aplicaciones web, documentos, calendarios y de otras herramientas de creación de contenido para ser compartidos con un equipo.
Guardar
Multitarea Web de los usuarios que esperan para poder marcar los artículos para leer más tarde, de entretenimiento, favoritos, de videos, y otros. Guardar el contenido de la Web en su propio servicio de marcadores con un clic.
Variedad de opiniones
Cuando los lectores encuentran una noticia interesante en un sitio web, quieren saber lo que otros están diciendo sobre el tema. Esto es posible a través de servicios tales como SphereIt y otros.
Para el bien social
Además de los sitios web que socializan los medios de comunicación y las aplicaciones, existen sitios web que son de índole social para el bien social. Estos sitios web son todos acerca de la conexión de las personas y la construcción de comunidad. Son los sitios web de redes sociales como el MySpace, Facebook y las redes de Ning. El principal componente en estos sitios es el perfil de usuario en torno a la cual tanto la navegación y la actividad gira. Este tipo de sitio web requiere también una interfaz de línea de base de la funcionalidad social.
Perfil de Usuario
El ingrediente principal en cualquier sitio de redes sociales es el perfil de usuario que puede adaptarse para que coincida con la personalidad de un usuario.
Listas de amigos
¿Cuál es el punto de unirse a una comunidad social si no se puede hacer amigos? La lista de amigos permite a las personas crear su propia red de relaciones sociales y mostrarlos al mundo.
Mensaje y comunicación
Una parte integral de cualquier red social es un medio con el que comunicarse con los demás miembros, ya sea un sistema de mensajería interna, correo electrónico, mensajería instantánea, hablar o vivir.
Suscribir Usuario
Al igual que con sitios web de medios de comunicación social, los miembros de las comunidades de redes sociales esperan encontrar las herramientas que les permite suscribirse a los miembros que encuentran interesante.
Grupos
Estas sub-comunidades están dentro de un ecosistema social en la que los miembros se asocian con un grupo enfocado de personas que comparten un mismo interés, la profesión, o característica.
Herramientas para la expresión
Populares sitios de redes sociales a disposición de sus miembros con las herramientas para crear contenidos tales como diarios personales y blogs, así como la posibilidad de cargar los medios de comunicación y otros elementos como fotografías, diapositivas, videos y todo tipo de artilugios.
A diferencia de los medios de comunicación social el diseño de estas herramientas de la comunidad debe ser fácil para los miembros de utilizar, al alcance de la mano, y obvio.
El usuario
No es suficiente sólo encontrar información, la gente quiere explorar y encontrar uno al otro como individuos. Este tipo de navegación es natural en los sitios web de redes sociales donde el objetivo principal es conectar con otros miembros.
La Nube de etiquetas
Este es un complemento de la taxonomía para el vocabulario controlado de un sitio web creado por los diseñadores, que es orgánico a la comunidad de usuarios. No hay instrucciones exigidas con esta herramienta intuitiva que es, obviamente, hacer clic y con frecuencia.
El Comienzo de la página
Incluye tales como listas de los más populares, más buscado, más reciente, comentarios arriba, mas votado… Esta característica proporciona un resumen de lo que es más importante en una comunidad en un momento dado. Todavía hay espacio para la lista de los editores a sus propios elementos, junto con estas listas de la comunidad.
El Zeitgeist
Este es un contenedor para todos los de la parte superior y la mayoría de las listas, así como las nubes de etiquetas, proporcionando una visión de la cultura y la personalidad de un determinado sitio web.
Widgets – Gadgets
Se trata de la agregación de datos personalizados en un solo lugar, y navegar desde ahí. Los Sitios web ya no muestran simplemente texto, pero son aplicaciones que contienenn otras aplicaciones.
Mashups
Los usuarios de la Web están creando sus propias maneras de navegar por la información, remezclar el contenido de diferentes servicios para crear nuevas aplicaciones.
Principios de Diseño para la nueva web
* Manténgalo Simple – Incluir sólo la funcionalidad necesaria y proporcionar un eficiente diseño limpio.
* Hágalo Social – Conozca las expectativas de los usuarios que permitan conexiones a través de herramientas sociales.
* Oferta de navegación alternativa – reflejar el espíritu de la época de la web la comunidad y abrazar las vías alternas a la información, también la utilización de herramientas visuales.
Nueva Web de Filosofías
* Evolucionar – Hoy en día los creadores de sitios Web no tienen miedo a probar cosas nuevas. No hay ninguna respuesta correcta y no todo necesita ser resuelto desde el principio.
* Ser Ágil y abierto- Responder a los avances en la tecnología y los cambios en las necesidades del mercado. Estar dispuestos a abandonar malas ideas
