a) Los usuarios deben ser capaces de alcanzar sus objetivos con un mínimo esfuerzo y unos resultados máximos.

b) Un sitio web no ha de tratar al usuario de manera hostil. Cuando el usuario comete un error el sistema ha de solucionar el problema, o en su defecto sugerir varias soluciones posibles, pero no emitir respuestas que meramente informen del error culpando al usuario.

c) En ningún caso un sitio web puede venirse abajo o producir un resultado inesperado. Por ejemplo no deben existir enlaces rotos.

d) Un sitio web debe ajustarse a los usuarios. La libertad en el uso de un sitio web es un término peligroso, cuanto mayor sea el número de acciones que un usuario pueda realizar, mayor es la probabilidad que cometa un error. Limitando el número de acciones al público objetivo se facilita el uso de un sitio web.

e) Los usuarios no deben sufrir sobrecarga de información. Cuando un usuario visita un sitio web y no sabe donde comenzar a leer, existe sobrecarga de información.

f) Un sitio web debe ser consistente en todos los pasos del proceso. Aunque pueda parecer apropiado que diferentes áreas tengan diseños diferentes, la consistencia entre los diseños facilita al usuario el uso de un sitio.

g) Un sitio web debe proveer de un feedback a los usuarios, de manera que éstos siempre conozcan y comprendan lo que sucede en todos los pasos del proceso.

Fuente: http://www.desarrolloweb.com/articulos/1133.php

En este artículo trataremos algunos de los conceptos que se deberían tener en cuenta a la hora de realizar un sitio web. El diseño de sitios web deben seguir los siguientes principios:

1. Anticipación, el sitio web debe anticiparse a las necesidades del usuario.

2. Autonomía, los usuarios deben tener el control sobre el sitio web. Los usuarios sienten que controlan un sitio web si conocen su situación en un entorno abarcable y no infinito.

3. Los colores han de utilizarse con precaución para no dificultar el acceso a los usuarios con problemas de distinción de colores (aprox. un 15% del total).

4. Consistencia, las aplicaciones deben ser consistentes con las expectativas de los usuarios, es decir, con su aprendizaje previo.

5. Eficiencia del usuario, los sitios web se deben centrar en la productividad del usuario, no en la del propio sitio web. Por ejemplo, en ocasiones tareas con mayor número de pasos son más rápidas de realizar para una persona que otras tareas con menos pasos, pero más complejas.

6. Reversibilidad, un sitio web ha de permitir deshacer las acciones realizadas

7. Ley de Fitts indica que el tiempo para alcanzar un objetivo con el ratón está en función de la distancia y el tamaño del objetivo. A menor distancia y mayor tamaño más facilidad para usar un mecanismo de interacción.

8. Reducción del tiempo de latencia. Hace posible optimizar el tiempo de espera del usuario, permitiendo la realización de otras tareas mientras se completa la previa e informando al usuario del tiempo pendiente para la finalización de la tarea.

9. Aprendizaje, los sitios web deben requerir un mínimo proceso de aprendizaje y deben poder ser utilizados desde el primer momento.

10. El uso adecuado de metáforas facilita el aprendizaje de un sitio web, pero un uso inadecuado de estas puede dificultar enormemente el aprendizaje.

11. La protección del trabajo de los usuarios es prioritario, se debe asegurar que los usuarios nunca pierden su trabajo como consecuencia de un error.

12. Legibilidad, el color de los textos debe contrastar con el del fondo, y el tamaño de fuente debe ser suficientemente grande.

13. Seguimiento de las acciones del usuario. Conociendo y almacenando información sobre su comportamiento previo se ha de permitir al usuario realizar operaciones frecuentes de manera más rápida.

14. Interfaz visible. Se deben evitar elementos invisibles de navegación que han de ser inferidos por los usuarios, menús desplegables, indicaciones ocultas, etc.

Fuente: http://www.desarrolloweb.com/articulos/1133.php

La usabilidad se refiere específicamente a las técnicas que ayudan a los seres humanos a que realicen tareas de una forma sencilla y eficaz frente a un ordenador (PC) en un entorno gráfico, que sería en este caso la Web (Internet).

La usabilidad ayuda a que esta tarea se realice de una forma sencilla analizando el comportamiento humano, y los pasos necesarios para ejecutar la tarea de una forma eficaz. Quizás suene un poco a trabajo industrial, pero al hacer referencia al termino “tarea”, estamos haciendo referencia a buscar un programa que queremos ver en la tele, a ver información sobre mi equipo de fútbol favorito, a comprar un libro sobre artes marciales.

Realmente hace falta la usabilidad para hacer una Web ?

La respuesta es Sí. Sea tu web un portal o una página personal, no olvides que la gente que entra en tu web es porque básicamente busca algo. Hacerlo sencillo es decisión tuya, pero seguro que entre todos podemos hacer de Internet un sitio mejor donde la gente no se sienta perdida o extraviada o sencillamente defraudada. Donde puedo encontrar más información sobre este tema? Hay miles de direcciones que hablan sobre usabilidad en Internet. En la página de enlaces de interés, disponible en este manual, podrán encontrar una selección de páginas que me han ayudado a formarme y a estudiar sobre este tema.

Las siguientes son 8 reglas de Oro sobre la usabilidad?

1. En Internet el usuario es el que manda.
Esto quiere decir que sin usuarios tu página muere, así que más te vale que los cuides y les des lo que te piden, de lo contrario te quedaras solo.

2. En Internet la calidad se basa en la rapidez y la fiabilidad.
En Internet cuenta que tu pagina sea más rápida que bonita, fiable que moderna, sencilla que compleja, directa.

3. Seguridad.
Si en el mundo real a veces nos cuesta fiarnos del banco de la esquina, imagínate cómo se siente la gente en Internet cuando llega a tu sitio. Procura que todo funcione como un reloj para que la gente pueda fiarse de tu sitio Web.

4. La confianza es algo que cuesta mucho ganar y se pierde con un mal enlace.
Esto quiere decir que tal y como está la competencia en Internet, no puedes perder ni un solo visitante por tener un enlace mal hecho. Es mejor salir con algo sencillo e irlo complicando poco a poco, que salir con todo y ver “que es lo que pasa”. Versiones 1.0 son buenas mientras lo que este puesto este bien asentado y genere confianza. Poco a poco y con el feedback de los usuarios, podrás ir complicando la página. Pero asegura antes de arriesgar.

5. Si quieres hacer una página decente, simplifica, reduce, optimiza.
La gente no se va a aprender tu sitio por mucho que insistas, así que por lo menos hazlo sencillo, reutiliza todos los elementos que puedas, para que de este modo los usuarios se sientan cómodos y no se pierdan cada vez que necesiten encontrar algo en tu sitio Web.

6. Pon las conclusiones al principio.
El usuario se sentirá más cómodo si ve las metas al principio. De esta forma no tendrá que buscar lo que necesita y perderá menos tiempo en completar su tarea. Si completa su tarea en menos tiempo se sentirá cómodo y quizás se dedique a explorar tu sitio o quizás se lo recomiende a un amigo.

7. No hagas perder el tiempo a la gente con cosas que no necesitan.
Cuidado con cruzar promociones, si lo haces por lo menos hazlo con cuidado. Procura que la selección de productos a cruzar sea consecuente y no lo quieras “vender todo” en todas las paginas. Según avance el usuario en su navegación procura dejarle más espacio libre. Puede ocurrir que cuando este punto de comprar algo vea una oferta que le distraiga y pierdas esa venta.

8. Buenos contenidos.
Escribir bien para internet es todo un arte. Pero siguiendo las reglas básicas de (1) poner las conclusiones al principio y (2) escribir como un 25% de lo que pondrías en un papel, se puede llegar muy lejos. Leer en pantalla cuesta mucho, por lo que, en el caso de textos para internet, reduce y simplifica todo lo que puedas.

fuente:http://www.desarrolloweb.com/articulos/221.php

Introducción
El nombre del dominio refleja su identidad personal o de su empresa. Escoje sabiamente el nombre.

Pasos para la escogencia del nombre para el dominio:

Paso N°1:
Escriba el nombre de su negocio. Recuerde que un nombre corto y llamativo para su dominio hará que éste sea mas fácil del recordar. Paso siguiente haga una lista de los posibles nombres utilizando en ellos el nombre de su empresa o negocio ( por ejemplo: smithauto.com, smauto.com, smitheys.com).

Paso N°2:
Crear una lista de los servicios que su empresa ofrece y una lista de posibles nombres asociados a esos servicios (ejemplo: autorepair.com, fixcar.com, brokendown.com).

Paso N°3:
Utilice el eslogan de su material promocional para crear una opción adicional para el nombre de su dominio.

Paso N°4:
Para los dominios de carácter personal, puede utilizar su nombre, el nombre de su mascota, alguno de sus hobbies, puede utilizar también su apellido o inclusive el nombre de alguno de sus hijos.

Paso N°5
Teniendo ya todos la lista con todo los nombres que escogió para su dominio, visite el sitio web de Go Daddy (www.godaddy.com). Usando este sitio, usted puede escribir los nombres que selecciono o que considero para su dominio, allí podrá darse cuenta si esos nombres están o no disponibles. Si el nombre no estuviera disponible, siga intentando con los nombres que seleccionó como alternativos dentro de la lista ya establecida anteriormente.

Paso N°6
Utilice otros sufijos como .net o .org si el nombre .com ya hubiera sido tomado. Sin embargo, dado que los usuarios buscan aleatoriamente un sitio web, pueden ser dirigidos al sitio de .com primero, .net y .org son nombres que usualmente son mejores para nombre de dominio de un sitio de carácter personal, institucional, organizacional que para uno comercial.

Paso N°7
Si usted realmente quiere un dominio que ya esta comprado, lo que puede hacer en contactar al dueño de ese dominio; puede contactarlo en el mismo sitio de Go Daddy o en www.whois.org.

Consejos y Sugerencias:

Pregúntele a familiares, amigos y a sus asociados laborales su opinión respecto a la escogencia que hizo de los nombres para el dominio. Lo que para usted pudiera sonar ingenioso, gracioso o pegajoso puede que sea para otros totalmente incomprensible y potencialmente perjudicial para sus propósitos.

No debe de utilizarse el nombre de una reconocida marca o producto o variaciones del mismo para el nombre del dominio, con la esperanza de atraer personas a su sitio web. No solo por el dilema ético que eso representa sino mas que todo por cualquier asunto que lo lleve a usted a responder frente a una posible acción legal de parte de cualquier otra empresa implicada con el uso de ese nombre.

Fuente:http://www.ehow.com/how_8184_choose-domain-name.html

Según el último Alertbox de Jakob Nielsen, afirma que los usuarios a menudo leen el contenido de un sitio web en un patrón que se asemeja al de una F mayúscula, es decir; dos líneas horizontales y una vertical.

Para este Eyetracking (la monitorización del seguimiento del ojo del usuario), se grabaron a 232 usuarios que vieron miles de páginas web, encontrando que el comportamiento principal de lectura se mantenía muy constante en diversos sitios y tareas. Este patrón dominante se parece a una F y tiene los siguientes tres componentes:

1.) Los usuarios primero leyeron en un movimiento horizontal, generalmente a través de la parte superior del área del contenido, este elemento inicial forma la barra superior de la F.

2.) Enseguida, los usuarios bajan un poco y después leen en un segundo movimiento horizontal que cubre una área más corta que el movimiento anterior. Este elemento forma la barra más inferior y más corta de la F.

3.) Finalmente, los usuarios exploran el lado izquierdo del contenido en un movimiento vertical. Algunas veces, este escaneo más lento y sistemático aparece como una línea sólida en el heatmap (mapa de calor) del eyetracking. Otras veces, los usuarios se mueven rápidamente, creando un heatmap menos definido. Este último elemento es el que forma la barra vertical de la F.

Como es natural, los patrones de exploración de los usuarios no siempre abracan estas tres partes. Los usuarios leerán a veces a través de una tercera parte de contenido, haciendo que el patrón se asemeje más a una E que a una F.

F reading pattern eyetrack Heatmaps de tres sitios web. Las áreas dónde los usuarios más vistas estan coloreadas en rojo, las áreas amarillas indican pocas vistas, seguidas de las áreas menos vistas que son las azules . Las áreas grises fueron irrelevantes

Otras veces leerán solamente de arriba abajo, haciendo que el patrón parezca una L invertida (con la barra transversal arriba). Sin embargo la mayoría de los patrones se asemejaron a una áspera F, con algunas variaciones entre la distancia de las barras superior e inferior.

Implicaciones del patrón F

Para Nielsen, las implicaciones del patrón F, son muy claras y muestran la importancia de seguir las pautas para escribir para el web en lugar de tomar contenido para impresos:

1.) Los usuarios no leerán tu texto a fondo y palabra por palabra. Es raro que lean exhaustivamente, salvo en casos muy particulares. Si, definitivamente alguien leerá más, pero la mayoría no lo hará.

2.) Los dos primeros párrafos deben contener la información más importante. Hay cierta esperanza de que los usuarios lean este material, aunque leerán más del primer párrafo que el segundo.

3.) Comienza con subtítulos, párrafos y balazos con información y palabras que conduzcan a los usuarios a explorar abajo del lado izquierdo del contenido, en la parte final de la base de la F. Hay que considerar que los usuarios leerán la tercera palabra en una línea mucho menos que las dos primeras.

En fin, supongo que estos resultados obtenidos por Nielsen, podrán ser de alguna utilidad cuando pensemos dónde y como poner información relevante.

Referencia:http://isopixel.net/archivos/2006/04/como-se-lee-el-contenido-en-web

Para que un sitio web resulte atractivo para nuestro publico potencial, existen algunos tips que se deben seguir, y que resultaran de gran utilidad en la búsqueda de nuestro objetivo, cualquiera que este sea.

1: Se deben de plantear metas, por que lógicamente, no podemos conseguir un objetivo, si este no se tiene en mente.

2: La simplicidad en nuestro diseño es fundamental, nunca se debe de ir uno al extremo de la extravagancia, debe existir mucha sobriedad en nuestro diseño.

3: Una cosa muy importante es la comunicación entre usted y las personas relacionadas con su profesión, es básica, de esta forma se puedan intercambiar ideas de gran utilidad para todos.

4: La velocidad es una cosa importantísima a la hora de atraer al usuario, recuerde que ese tiempo que tarda en bajar su página es en que puede convencer o no al publico de permanecer ahí, si tarda demasiado, lo mas seguro es que el usuario se vaya.

5: En cuanto a los textos contenidos en su página, se debe tomar en cuenta que lo que resulta entretenido o interesante para nosotros, puede no serlo para la mayoría de las personas. Tampoco se debe de llenar toda la página con letras y más letras, pues esto resulta, generalmente muy aburrido para el público.

6: Las formas lineales, color plano, resultan de lo más eficaces para la Web, pues son mucho más fáciles de cargar que las imágenes y los efectos, además de ser más discretos.

7: Se debe aprender a separar gráficos y textos, se debe de recordar que estos dos jamás deben de mezclarse, nunca intente insertar texto en gráficos.

8: Dedicar el tiempo libre para la búsqueda y conocimiento de las nuevas tecnologías, es de lo más eficaz para mantenerse siempre en el gusto del público.

9: Se debe aprender a ver sus diseños desde la perspectiva del usuario, así se podrán cubrir sus necesidades y demandas mas fácilmente.

10: También se debe aprender a ver el diseño desde otros ángulos del mismo, es decir, no específicamente desde el diseño web, sino, por ejemplo desde la perspectiva de un arquitecto.

11: Acompañar el trabajo con música, puede resultar placentero, relajante y de mucha efectividad.

Fuente:http://www.paginadigital.com.ar/servicios/diseno-paginas-web_det.asp?IdArticulos=12

Vitaly Friedman, autor de uno de los blogs más populares de diseño Web, comparte su experiencia escribiendo 20 Reglas del Desarrollo Web, que debemos tener en cuenta y que nos ayudarán a no cometer los errores que probablemente ya hayamos cometido. Básicamente, estas 20 Reglas de Desarrollo Web Elegante y Acertado se basan en ideas y conceptos, que podrían mejorar la calidad y la popularidad de sus sitios web y proporcionar un buen fundamento para su acertado desarrollo en el futuro.

1. Respete a sus visitantes. No trate de forzarlos a leer el contenido de sus páginas web. Déjeles escoger y decidir lo que ellos quieren leer. ¿Cuál sería su reacción ante una docena de pop-ups y bloques de publicidad?

2. La mala publicidad es mala. Los bloques de publicidad podrían mejorar su rédito por un momento, pero, en una carrera larga, ellos no harán acertado a su sitio web. De hecho, usted no ganará respeto ni explorará el potencial que usted y sus proyectos podrían tener. Sin embargo, los anuncios perfectamente combinados con el contenido principal y colocado bien en la estructura del sitio (p. ej. devblog.de) no molestan. Así, tanto los puntos de reputación como puntos de rédito de anuncio están garantizados.

3. Informe y enseñe a sus visitantes. Comparta sus pensamientos, ideas, experiencias y conocimientos con los que necesitan, o tal vez necesitarán, sus consejos. Ya que, si usted tiene esta información, usted tiene un instrumento poderoso para llamar la atención del público hacia sus trabajos, intereses y servicios. Además, si usted comparte el conocimiento valioso con otros usuarios, usted será respetado y considerado como una persona que conoce de lo que habla.

4. Desarrolle su propio estilo. Desarrolle sus propias ideas. Déjese inspirar y no copiar. Es mucho más interesante averiguar lo qué usted es capaz de lo que otra gente es capaz de hacer. Explore su imaginación y curiosidad. Sus ideas, viejas, nuevas o mejoradas, tienen mayor probabilidad de atraer usuarios que los textos copiados.

5. Respete los estándares. Piense en la gente. Respetar los estándares web le ayudarán a ahorrar mucho trabajo en el futuro. Esto no tomará mucho tiempo y es razonable pasar algunas horas suplementarias comprobando el código y aplicándolo a los estándares. Una vez hecho esto, usted no tendrá que preocuparse sobre las nuevas versiones de navegadores. Legibilidad, accesibilidad, usabilidad. Respetándolos, usted respeta a sus visitantes.

6. Sea claro. No tenga miedo de decir lo que usted piensa. La ambigüedad crea una distancia innecesaria entre usted y sus visitantes. Diciendo las cosas con precisión, usted comienza un diálogo activo con sus lectores.

7. Odie Internet Explorer si lo desea, pero haga caso a sus usuarios. No diseñe su código sólo para navegadores especiales o determinadadas resoluciones. Aplique su código a Internet Explorer, tal y como usted lo aplica a otros navegadores. Y aunque personalmente trato de evitar los hacks de navegador, a veces no puedo eludirlos; sin embargo, los hacks de navegador deberían ser su última opción. Internet Explorer no será el mejor navegador, pero todavía es el más usado (68 % de usuarios) de la web. Mirar (1).

8. Cuide su contenido. Desarrolló un sitio web, intente hacerlo interesante y bien presentado. No olvide que sus visitantes recuerdan todo. Una vez que usted ha ofrecido un enlace a alguna página inadecuada, sin la descripción apropiada, usted nunca los verá de nuevo. El código es la poesía, su contenido es la prosa.

9. No se preocupe por los buscadores y la optimización SEO. No piense en palabras clave – mucho más importante es lo que su sitio web tiene que ofrecer. Posicionarse en un motor de búsqueda tomará mucho más tiempo de lo que le toma escribir un artículo útil en su Weblog. Además, si usted se considera un SEO experto, usted sabe que tendrá que optimizar el sitio web por mucho tiempo. De otro lado, si usted publica un artículo, (con esperanza) estará disponible mientras su sitio exista. Entonces, sólo tiene que escribirlo una sola vez. Evite SEO incorrecta y el mal PR. La optimización incorrecta en el motor de búsqueda (cambiando enlaces con cada sitio de la red, etc.) tarde o temprano conducirá a la penalización de su sitio en los principales motores de búsqueda.

10. Póngase en contacto, pero no haga spam. Deje que los que podrían estar interesados en su contenido sean conscientes de él. Póngase en contacto con los autores de estos sitios, describiendo las ventajas de sus servicios. Sin embargo, tenga presente que usted no escribe a una araña web, sino, a un ser humano, que puede decidir si hay que compartirlo con sus lectores o no, o – más considerablemente – para visitar su sitio o no. Asegúrese de que la persona a la que usted escribe comprenderá que su contenido le puede ser útil a sus visitantes. No haga spam, no haga publicidad, ofrezca el contenido útil.

11. Escriba, publique, siéntase libre de preguntar. Hay siempre muchos desarrolladores web, que hacían, hacen y harán la misma pregunta que usted tiene ahora. No se ponga nervioso por preguntar, no se ponga nervioso por averiguar.

12. Conteste sus correos electrónicos inmediatamente. Haga un contacto con sus clientes potenciales tan rápidamente como usted pueda – no deje un correo electrónico en la bandeja de entrada por más de 12 horas. No envíe mensajes de respuesta automáticos. Por el contrario, intente dejar una buena impresión en la persona que se ha puesto en contacto con usted. La respuesta debe ser escrita con un estilo confidente, profesional, amistoso y abierto… siéntase libre de preguntar.

13. Use las ventajas de una Web Semántica. Tagging, Tagging, Tagging. No tenga el miedo de mencionar su sitio en Digg, Reddit, Furl, del.icio.us, Ma.gnolia, Blinklist y otro ciento de administradores de marcadores sociales. Sin embargo, escoja la etiqueta con cuidado. Los visitantes vendrán. Y si las etiquetas son escogidas racionalmente, aún más visitantes vendrán.

14. Haga conexiones. Los desarrolladores web creativos siempre son apoyados por CSS Showcases, Galerías y blogs de desarrolladores web. Algunos de ellos son mencionados aquí.

15. Piense en términos globales. El contenido de sus páginas web pueden apelar al público de su región, pero las fronteras en la Internet son vagas y apenas visibles (si es que existen); entonces ¿Por qué no enviar su mensaje al mundo? No hay necesidad alguna de buscar un nuevo lugar cerca de usted, si usted tiene oportunidades casi ilimitadas en todo el mundo.

16. Nunca comprometa sus principios. Hablando de la manera en que un sitio web debería ser desarrollado. Tenga presente que usted es el que, en realidad, desarrolla el sitio. No haga sólo lo que le dicen hacer. Corrija, si usted cree que su cliente se equivoca. Pues, al final, su objetivo es crear un sitio web para los usuarios, no para sus clientes.

17. Manténgase en contacto. Manténgase informado sobre lo que se encuentra en la Red. La Web se desarrolla rápidamente y nuevas ideas son compartidas al instante. El mejor modo de estar informado es – desde luego – usando los feeds RSS. Sin embargo, revistas de diseño gráfico y magazines de desarrollo web como AListApart, BoxesAndArrows, Digital Web Magazine, Design in Flight, Poynter, Layers Magazine, Graphics.com y Baluart.net valen la pena leer a diario.

18. Aprenda a manejar su creatividad. Buscando una nueva idea, usted puede navegar a través de un foro de desarrollo web, poniendo atención sobre lo que otra gente busca. Por ejemplo, Sitepoint.com es un recurso visitado por miles de desarrolladores web diariamente.

19. Haga bonita su Web. El diseño claro, legible e inteligente es hermoso. ¿Cómo puede resistirse a tal belleza? Participe en competencias abiertas como CSS Table Gallery, CSS Zen Garden, Comment Design Showcase, Typography for headlines, Form Assembly Garden, sIFR Beauty Showcase. Así usted hará la vida de otros desarrolladores más fácil, mostrando su estilo y experiencia.

20. Sea consciente del poder de la Web. Usted esta creando la Web, entonces usted puede apoyar los proyectos que le parezcan importantes y que tienen que ser apoyados.

Fuente: 20 Rules Of Smart And Successful Web-development

Aunque tradicionalmente Adobe se ha caracterizado siempre por mantener una completa reserva sobre el desarrollo de sus aplicaciones (suministrando pocas informaciones y guardando bajo candado sus betas), las versiones CS3 de la Creative Suite en general y Photoshop en particular pasarán a la historia como la excepción que confirma la regla. La razón de esto no es tanto el tiempo que ha pasado desde el lanzamiento de CS2 como la transición que Apple ha realizado a los procesadores Intel, provocando que las aplicaciones no adaptadas a tal cambio viesen reducido su rendimiento de una forma realmente importante.

Ahora, con el lanzamiento de la versión beta pública de CS3 los usuarios de Mac pueden descubrir al fin toda la potencia de sus máquinas mientras exploran las interesantes novedades que Adobe ha preparado para sus nuevas aplicaciones CS3.

Rendimiento

Además de la inyección de velocidad que supone el que la versión Mac sea binario universal, ambas plataformas (Windows y Mac) han sufrido una importante mejora de rendimiento. Desde la aplicación de filtros hasta la respuesta del interface en sí, pasando por los tiempos de acciones como Guardar o el propio arranque del programa. También merece la pena destacar en este apartado el sistema de navegación de imágenes Adobe Bridge, completamente irreconocible en términos de velocidad respecto a su versión previa.

Nueva interface de usuario

Algunos de los cambios que más saltan a la vista desde el mismo momento de lanzar el programa son los realizados sobre su interface. Quienes se empeñen en dejar las cosas donde estaban para ahorrar mareos lo van a tener fácil, pero todos los demás van a notar como su productividad va a verse recompensada tras un brevísimo período de aclimatación.

La nueva interface es completamente personalizable permitiéndo ajustar sus elementos del modo que se prefiera. La clásica barra de herramientas por ejemplo puede distribuirse ahora en una o dos columnas, y aunque esta última agradará a los nostálgicos, la primera nos deja un área de trabajo mayor. Sin embargo son las paletas de opciones las que presentan los cambios más interesantes y es que podemos desplegarlas hasta que muestren todas sus opciones o colapsarlas hasta convertirlas en simples botones a la vez que las pueden distribuir en bloque de la forma que más convenga.

Como ven, aunque también hay algunos refinamientos visuales como transparencias y fundidos (al menos en la versión Mac), la mayor parte de cambios van encaminados a aumentar el área de trabajo y prueba de ello es la nueva vista Maximize Screen Mode, que ajusta la ventana de imagen al máximo disponible entre la barra de herramientas y nuestras paletas. En definitiva, los cambios no son dramáticos pero sí que añaden una mayor coherencia al conjunto.

Adobe Camera RAW 4

La nueva versión del plugin de procesado RAW de Photoshop (que caduca el 31 de Mayo, ¿posible fecha de lanzamiento?) no presenta grandes cambios en su sistema de trabajo pero sí que presenta la capacidad de ¿procesar? archivos JPEG y TIFF con las mismas herramientas que los RAW y añade unas cuantas opciones de interés a sus pestañas de opciones entre las que cabe destacar las siguientes:

• Recovery (Recuperar) permite recuperar detalle de las zonas sobreexpuestas.
• Fill Light (Luz de Relleno) aclara las zonas de sombra sin alterar la exposición.
• Vibrance (Colores Víbrantes) para un control de la saturación más natural que solo afecta a los tonos apagados.
• Parametric Curve (Curva Paramétrica) que se añade a la ya clásica Curva por Puntos y que permite ajustar la curva mediante tres indicadores de zona y cinco controles deslizadores (Highlights, Lights, Darks y Shadows).
• Convert to Grayscale (Conversión a Escala de Grises) que permite hacer conversiones a blanco y negro al más puro estilo del Mezclador de Canales.
• Split Toning (Fragmentación de Tono) que llega directamente desde Adobe Lightroom para modificar las dominantes de color una imagen de forma separada para las Luces y las Sombras.

Otro elemento muy interesante que se agrega a la aplicación es la posibilidad de guardar los ajustes como presets para aplicarlos una y otra vez, por fin, cómoda y rápidamente.

Adobe Bridge 2

La nueva versión de Bridge brilla con luz propia y no solo gracias al necesario aumento de velocidad (tanto del interface como de la visualización de miniaturas). Concretamente, dos opciones llaman la atención en esta nueva: la lupa (que muestra la zona de la imagen sobre la que nos encontremos ampliada al 100%) y el sencillo sistema de comparación de imágenes.

Smart Filters

Los Smart Filters (Filtros Inteligentes) son un sistema no destructivo de aplicar diferentes filtros sobre una imagen pudiendo volver sobre nuestros pasos y modificar cualquier parámetro siempre que queramos. Se parece bastante a las Capas de Ajuste salvo en que estas afectan a todas las capas inferiores y los Filtros Inteligentes solo lo hacen a la suya propia. Cualquier filtro es válido, solo hay que seleccionar la capa o capas que queramos convertir y hacer click sobre Filter/Smart Filters. Tras eso, a aplicar efectos con máscaras y todo. Al fin se podrá dejar de tener duplicadas cuatro veces las mismas imágenes.

Herramienta de Selección Rápida y Refinado de Bordes

Una nueva herramienta de selección para nuestra colección que viene a ser el equivalente del Lazo Magnético a la Varita Mágica. Quick Selection es un pincel que se va adaptando a los contornos de la imagen conforme pasamos por encima. Es tremendamente fácil de utilizar y aunque su resultado depende mucho de lo contrastada que sea la imagen en general simplemente funciona. Por cierto, para corregir la selección eliminando píxeles de ella tan solo se tiene que mantener pulsada la tecla Opción (Mac) o Alt (Windows) y pintar.

Mucho más esperada y productiva es la opción Refine Edge, que permite controlar por completo cualquier selección realizada (independientemente de la herramienta que hayamos utilizado para ello) con parámetros como radio, contraste, suavidad, desenfoque y calado. Además, también incluye tres nuevas opciones de visualización que se suman a la normal y la de máscara rápida.

Clonación

Extraordinarias. Así son las novedades presentes en las herramientas de clonado en forma de una nueva paleta que no solo permite guardar hasta cinco puntos de origen para ahorrarse tiempo al ir intercalándolos, sino que también añade nuevas posibilidades de ajuste de posición por coordenadas, rotación y escala. Es decir, ahora podemos, por ejemplo, clonar de un punto a otro ampliando y rotando la imagen de forma automática. Muy práctica también la posibilidad de ver la imagen a clonar superpuesta a la de destino, por lo que ya no se necesitará estar pendientes del punto de origen para evitar ir clonando a ciegas.

Herramienta de conversión a Blanco y Negro

Los amantes del blanco y negro digital acogerán esta nueva opción con los brazos abiertos. La herramienta de conversión a blanco y negro, presente también en ACR, permite ajustar seis niveles de color para filtrar la imagen del modo deseado, así como realizar virados de color de un modo realmente simple y efectivo. Otras opciones incluyen un botón con de ajuste automático o la posibilidad de seleccionar una porción de la imagen para ajustar el correspondiente rango tonal (por ejemplo, se hace un click sobre un cielo azul para oscurecer o aclarar los tonos azules).

Curvas

La ventana de ajuste de Curvas ha permanecido inamovible durante años. Simple y funcional eran sus máximas. Ahora, en la versión CS3, ha sido remodelada para ofrecernos más información a través de la integración del histograma como fondo y la opción Show Clipping (Mostrar Recorte), con la que se puede ver las zonas en las que se están recortando las luces o sombras. Por otro lado, la nueva lista de ajustes predefinidos incorpora los más comunes: Negativo, Negativo Color, Proceso Cruzado, Alto Contraste, Contraste Linea.

Alineación y Fusión Automáticas

La Fusión de imágenes permite la creación de vistas panorámicas o la combinación de las mejores partes de múltiples imágenes de un modo increíble que alinea y rota los elementos y ajusta el color dejándolo todo bien separado en capas con máscaras.

Vanishing Point 2

Este efecto fue una de las principales incorporaciones de la versión anterior y en Photoshop CS3 pasa a ser más flexible. Ahora se puede clonar respectando la perspectiva de múltiples planos (las distintas caras visibles de un edificio por ejemplo) sin la antigua limitación de 90º.

Guardar para Web y la Central de Dispositivos

A la opción de Guardar para Web ahora incluye la nueva ventana Device Central en la que simula la representación de la imagen en la pantalla de una amplia gama de dispositivos móviles y ofrece información sobre sus características de cara a garantizar la compatibilidad con nuestros contenidos. En la beta solo figuran algunos genéricos de ejemplo pero la versión final se actualizará con cada nuevo dispositivo que vaya saliendo al mercado (esto según Adobe).

Conclusiones

No hay duda se esta ante la mejor versión de Adobe Photoshop presentada en mucho tiempo. Todas las novedades que he comentado sumadas a muchas otras que he dejado en el tintero (como las mejoras en el ajuste de Brillo/Contraste, el cuadro de impresión o los múltiples presets que se han incorporado a la mayor parte de opciones) hacen de CS3 una descarga obligatoria para los usuarios del programa de retoque fotográfico por excelencia.

Referencia: http://www.backfocus.info/blog/toma_de_contacto_con_adobe_photoshop_cs3

El tema que expondré esta semana es sobre los tipos de imágenes que se usan en Internet, como funciona cada una, y cual es la mejor forma de seleccionar el tipo adecuado para situación determinada.

Mediante el Photoshop o el Fireworks , podremos exportar imágenes con muchas configuraciones diferentes. Tenemos varias opciones de formatos pre-establecidas:

• GIF Web 16 (impone que todos los colores sean seguros para la Web. La paleta de colores contiene hasta 216 colores.)
• GIF WebSnap 256 (convierte los colores que no son seguros para la Web en sus correspondientes seguros más cercanos. La paleta de colores puede contener hasta 256 colores como máximo.)
• GIF WebSnap 128 (convierte los colores que no son seguros para la Web en sus correspondientes seguros más cercanos. La paleta de colores contiene hasta 128 colores.)
• GIF adaptable 256 (es una paleta de colores que contiene sólo los colores utilizados en el gráfico. La paleta de colores puede contener hasta 256 colores como máximo.)
• JPG – Calidad Superior (define la calidad en 80 y el suavizado en 0, creando un gráfico de alta calidad pero más grande.)
• JPG – Archivo más pequeño (define la calidad en 60 y el suavizado en 2, creando un gráfico de calidad reducida pero que ocupa la mitad que uno de calidad superior.)
• GIF animado WebSnap 128 (define el formato del archivo como GIF animado y convierte los colores que no sean seguros para la Web en sus correspondientes seguros más cercanos. La paleta de colores contiene hasta 128 colores.)

JPG o JPEG

(Joint of Photographic Experts Group). Es el formato más común para comprimir imágenes con relativamente poca pérdida de calidad y bajo peso, generalmente usado en imagenes fotográficas. El formato JPEG admite millones de colores (24 bits). JPEG es el formato óptimo para fotografías digitalizadas, imágenes que utilizan texturas, imágenes con transiciones de color en degradado o cualquier imagen que requiera más de 256 colores.

Ventajas:

• Soporta millones de colores a un peso relativamente bajo
• Ampliamente soportado en todos los navegadores y plataformas

Desventajas:

• No soporta transparencias
• El formato no es libre

Recomendación: Únicamente para imágenes fotográficas con muchos colores y detalles.

GIF

(Graphic Interchange Format). Creado por CompuServe hace casi 20 años. Utiliza compresion de un máximo de 8 bits (256 colores), por lo tanto se reduce considerablemente la calidad si se trata de imagenes de color verdadero (24 bits o mas) como fotografías o degradados complejos.

El formato GIF calcula la cantidad de colores mediante una formula que permite paletas de 2, 4, 8, 16, 32, 64, 128 y 256 colores, lo que nos da una amplia gama de posibilidades a la hora de optimizar gráficos sencillos, además soporta las transparencias de 1 bit, es decir, que un pixel puede tener un color, o ser totalmente transparente.

También permite hacer animaciones por fotogramas, (muy sencillas) aunque la compresion en estos casos suele ser deficiente.

Ventajas:

• Amplia compatibilidad en los navegadores
• La transparencia puede ser muy útil, si se sabe utilizar.
• La compresión logra imagenes de muy bajo peso.

Desventajas:

• Límite de 256 colores (degradados y fotografías se ven muy mal)
• No es formato libre.

Recomendación: Únicamente para imágenes que no tengan demasiados colores o imágenes con un solo color plano.

PNG

(Portable Networks Graphic). Es un formato gráfico que esta basado en un algoritmo de compresion sin pérdidas, y fue desarrollado para resolver las deficiencias del GIF, principalmente en cuanto a profundidad de color.

Cabe destacar, que Fireworks nació con el formato nativo de PNG, pero un archivo de Fireworks no es lo mismo que una imagen PNG. Los archivos fuente de Fireworks incluyen una cantidad de información adicional, como los gráficos de vectores, efectos de mapa de bits en vectores, las capas, etc. que hacen al archivo “editable”. En cambio las imagenes PNG (exportadas de Fireworks u otro programa) son solo mapas de bits.

Nota: No use archivos de Fireworks en internet, hay que exportarlos para que funcionen. Ir a Archivo -> Presentación preliminar de la imagen -> y luego seleccionar el tipo de imagen que requiera. También con el panel de optimizar, y exportando las divisiones directamente, pulsando el botón derecho sobre ella _> exportar división seleccionada.

Por otro lado, Fireworks es el software que mejor maneja los filtros de compresión para PNG (no dudo que para JPG y GIF también), por lo que, aprendiendo a manejar la herramienta de optimización y exportación, lograremos los mejores gráficos e imagenes para internet. Photoshop no maneja bien estos filtros por si mismo, pero con superpng (gratuito) podemos lograr buenos resultados también Photoshop tiene muy buena optimización de JPG en Archivo -> Guardar para Web.

Una de las principales ventajas de PNG, es que independientemente de la profundidad de color que se use, la compresión permite archivos de muy bajo peso sin pérdida de calidad.

El número de canales depende de si la imagen es en escala de grises o en color y si dispone de canal alfa (canal de transparencia). La combinaciones permitidas por PNG son:

• Escala de grises (1 canal)
• Escala de grises y canal alfa (2 canales)
• Canales rojo, verde y azul (RGB, 3 canales. También llamado “color verdadero”)
• Canales rojo, verde, azul y alfa (RGB + alfa, 4 canales)

PNG soporta tanto transparencia alfa (los bits pueden ser “medio” transparentes) como transparencia de índice en sus tres versiones, Todos los navegadores actuales tienen soporte para PNGs con transparencia alfa excepto Internet Explorer, que soporta PNGs con transparencia de indice, y transparencia alfa solo en imágenes de menos de 8 Bits (siempre interpretada como transparencia de índice).

Los diferentes tipos de PNG, se usan para lograr la mejor relación peso/calidad en todo tipo de gráficos:

PNG 8, se pueden usar para gráficos sencillos, colores planos, logos, pequeñas sombras, y para imagenes que no requieran mucho color.

PNG 24 sirven para gráficos más complejos, degradados de varios colores, fotografías no tan complejas.

PNG 32 para todo tipo de imágenes complejas, fotografías con mucho color etc.

Ventajas:

• En la mayoría de los casos prácticos, se obtiene la mejor relación peso/calidad.
• Formato libre.
• Recomendado por W3C.
• Acepta transparencias.

Desventajas:

• Imágenes con mucho color y texturas suelen ser muy pesadas
• El soporte de PNG no es tan amplio como los formatos anteriores.

Recomendación: Usar PNG al máximo, en todo tipo de gráficos, layouts, fondos, etc. No tanto en Imágenes de muchos colores y texturas, aunque nunca está de más probar.

Cuando diseñamos sitios Web complejos o no tan complejos, en donde se nos complique de sobremanera la composición de espacios y dimensiones de cada parte o bloque que compone la página. Por ejemplo al diseñar un “index” o “home” nos encontramos con la dificultad de “cerrarlo” gráficamente utilizando los programas de edición Web. Los bloques son demasiado pequeños o grandes, las imágenes no coinciden en sus dimensiones, las dimensiones de las tipografías no nos convencen, los colores no son los que esperábamos o el desajuste es muy grande como para tratar de solucionarlo solamente con un editor Web como Dreamweaver.

Algo muy práctico para este tipo de dificultades es el uso de un programa de edición vectorial como Adobe Ilustrador para trabajar paralelamente al diseño de un sitio. Lo más recomendable es “Capturar” una imagen de la vista previa desde nuestro navegador (Impr.Pant/PetSis, este botón esta usualmente en la esquina superior derecha del teclado ). Luego desde Ilustrador “Pegamos (Ctrl + V)” la imagen que capturamos realizada como imagen y veremos cómo podremos manejar mejor las dimensiones y formas. Lógicamente debemos tener realizado mínimamente cierto diseño para referencia en tamaños y resoluciones. Notemos que la resolución de la captura de 72 pp por lo que las imágenes que generemos desde esta plantilla deberán también salir con 72 pp (Resolución mínima recomendada para las imágenes en la Web).

Además de funcionar como una herramienta de mejor montaje de bloques, esta forma de trabajo nos ayuda mucho a tener un mejor manejo de colores y tonalidades, las imágenes que apliquemos a nuestro sitio podrán ser editadas arriba de la captura realizada logrando una precisión profesional en el diseño. El montado será una tarea más agradable cuando se trate de páginas con estructuras complejas.

Podremos incluir diferentes formas y saldremos de los diseños comunes o rectangulares. Particularmente recomiendo realizar un boceto previo del diseño con imágenes, logos y toda la estructura, para luego montarla en nuestro editor Web Dreamweaver. De esta forma nos ahorraremos mucho tiempo de pruebas de colores, formas y dimensiones. Y notaremos la igualdad de lo que hemos boceteado en nuestra mente con lo que logramos finalmente.

Artículo tomando de:
http://www.desarrolloweb.com/articulos/1743.php