Página 1 de 11
Moderador del foro: ZorG 
Foro uCoz » Información General » Para los principiantes » 20 reglas de desarrollo web elegante
20 reglas de desarrollo web elegante
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 1 | 5:20 PM
20 REGLAS DE DESARROLLO WEB ELEGANTE

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 son mi pico personal de las principales 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 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 determinadas 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.

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 de su blog. 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 incorrecto 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, del.icio.us, Ma.gnolia, Blinklist y otros cientos 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, etc. 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.

Estas 20 reglas no le traerán ningún éxito si usted no cree en lo que hace y no explora su creatividad.
¿Alguna sugerencia?
¿ideas?
¡No deje de comentar!


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
sorin
Mensajes: 442
Reputación: 6
Mensaje Nº 2 | 3:37 AM
Aun que no soy un gran profesinal en el tema pero muchos webmaster creo que piensa demaido en lo robots de google y se olvida de los usuarios. Escribo un post sobre el tema cuando lo acabare lo boi a hacerlo publico aqui.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 3 | 1:04 PM
15 herramientas para monitorear la popularidad de un sitio web

Como diseñador web o desarrollador de un sitio, es útil primero examinar sitios Web similares (es decir, la competencia) para ayudarle a tomar decisiones de diseño y desarrollo. Saber que sitios web funcionan y cuáles pueden darle ideas e inspiración, para que los elementos de diseño, las características del sitio web y su contenido sean eficaces.

Para ayudarle en su análisis, aquí están 15 herramientas web, libres y sencillas, que le permitirán conocer más sobre un sitio web en particular.

1. Yahoo! Site Explorer

Site explorer permite inspeccionar determinados aspectos de una dirección URL. La característica de "Inlinks" muestra detalles acerca de las páginas web que tienen enlaces a la dirección URL específica que está explorando. Site Explorer le da algunas ideas de cómo la popularidad de un sitio web se basa en cuantas páginas web tienen enlaces hacia ella.

2. Compete

Compete es una herramienta analítica basada en web, que le permite comparar las estadísticas de tráfico y las tendencias de hasta tres sitios web. Le da una estimación de cuántos visitantes únicos y páginas impresas obtiene un sitio Web, y la rapidez con que un sitio Web está creciendo en popularidad (llamado Velocidad de Crecimiento)

3. Quantcast

Quantcast es otra herramienta popular para medir el tráfico de los sitios. Quantcast permite a los editores “Cuantificar” sus sitios web. Un proceso en el que se coloca una secuencia de comandos en sus páginas web, para que ellos puedan medir directamente las estadísticas de tráfico. De aquí que los sitios que no son cuantificados, pueden no tener los datos precisos y completos, y muchas personas no están cómodas con la inclusión de secuencias de comandos de terceros en sus sitios.

4. Alexa

Se inició en 1996. Alexa es el medidor de tráfico más popular en servicio hoy. Realiza un seguimiento de estadísticas de tráfico de sitios web y proporciona un rango numérico basado en los datos que recogen. Puede encontrar la cantidad de páginas visitadas de un sitio web (el % de los usuarios de internet que han visitado el sitio web).

5. Feed Compare

Una manera eficaz de determinar la popularidad de un sitio web es dándole seguimiento a sus tendencias de envío de RSS. Si un sitio web utiliza FeedBurner el proveedor líder de servicios RSS, puede utilizar Feed Compare para ver las tendencias de suscripción en el sitio web y comparar el crecimiento o disminución de suscriptores hasta para 4 fuentes al mismo tiempo.

6. popuri.us

popuri.us es una herramienta que puede ayudar a determinar cuán popular es una dirección URL, basándose en los servicios web y las estadísticas, de herramientas como Alexa, Technorati, Delicious bookmark, número de suscriptores y más. Esta es una herramienta de una sola página que le da una descripción general de cuán popular es un sitio Web popuri.us incluso le da la opción de colocar un control en su sitio para mostrar su popularidad.

7. socialmeter

socialmeter es una herramienta web, que explora lo popular que es una página web en los principales sitios web sociales tales como Digg, Stumbleupon y Delicious. Le da una "puntuación de socialmeter" que es actualmente sólo una suma de los resultados encontrados (útil para comparar la popularidad de diferentes sitios web).

8. TweetVolume

Otra forma de monitorear la popularidad de un sitio web, es ver si las personas están hablando de él en Twitter. TweetVolume permite buscar palabras claves y frases (es decir, el nombre de un sitio web, URL, el nombre del autor, etc.) para ver cuántos tweets han mencionado los términos de búsqueda.

9. Quarkbase

Quarkbase es una herramienta web completa, que presenta un sinnúmero de información acerca de un sitio web. Quarkbase tiene la página "Social Popularity" que muestra información acerca de la popularidad de un sitio web, entre sitios de medios de comunicación social como Digg, Stumbleupon y Delicious.

10. BlogPulse Profiles

Si está interesado en encontrar datos sobre un blog en específico o un bloguero, la herramienta BlogPulse Profiles es una aplicación web sencilla, que proporciona un ranking del blogs, con qué frecuencia es citado en otros blogs, y otras informaciones, como cuántos posts son publicados cada mes y que blogs son similares a él.

11. Technorati Blogging Central

Technorati es el principal motor de búsqueda de blogs. Su página Blogger Central permite ver el ranking de un blog particular, para medir su popularidad entre los 128 millones de blogs en el mundo. Usted puede encontrar los 100 principales blogs en Blogger Central. Technorati determina el ranking de un blog, por el número de reacciones (enlaces que vayan al blog) que él tiene.

12. Statbrain.com

Statbrain.com es una herramienta sencilla que indica cuántos visitantes recibe un sitio web por día.

13. Cubestat

Cubestat es otra herramienta web sencilla, que le proporciona información acerca de las visitas diarias de un sitio web. Lo distintivo de Cubestat es que calcula un valor monetario del sitio web (en dólares estadounidenses). El sitio web más caro, es el sitio más popular.

14. dnScoop

dnScoop intenta calcular el valor de un sitio web, basado en factores tales como vínculos que llevan al dominio, la popularidad del dominio, el page rank, tráfico y más.

15. WebsiteOutlook

WebsiteOutlook permite determinar la popularidad de un sitio web, según su valor estimado, visitas diarias e ingresos.

¿Cuál es su método para realizar las mediciones?
¿Cómo usted mide la popularidad de un sitio Web? ¿Existen otras herramientas y sitios web que debían estar en esta lista? Compártalo con nosotros a través del Foro.


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
sorin
Mensajes: 442
Reputación: 6
Mensaje Nº 4 | 10:39 PM
Gracias por la lista, interesante.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 5 | 1:30 PM
23 puntos a tener en cuenta en el diseño web

El diseño web es algo en lo que normalmente se suele invertir tiempo, dinero, imaginación…

Y en muchas, pero que muchas ocasiones las decisiones adoptadas son contrarias a la orientación al usuario del sitio web.

Aquí tienes 23 sugerencias que se pueden extraer del estudio que se han realizado con la técnica “eye-tracking” y que puedes utilizar para mejorar el diseño de tu página web.

• El texto atrae la atención antes que los gráficos. Contrariamente a lo que podría imaginarse, lo primero que un usuario visita en un sitio web no son las imágenes. La mayoría de los usuarios que llegan a tu sitio lo hacen buscando información, y no imágenes, así que asegúrese de que tu sitio web está diseñado para que las partes más importantes de tu texto son lo más destacado.

• El movimiento inicial de la mirada se centra en la esquina superior izquierda de la página. No debe sorprender que un usuario visite las páginas web de esta manera, ya que la mayoría de las aplicaciones están diseñadas con la parte superior izquierda como el foco principal. Puedes hacer un favor a tu sitio web al mantener este formato a la hora de crear el diseño. Recuerda, tienes que tener en cuenta lo hábitos de los lectores si quieres tener un sitio orientado al usuario.

• Al inicio, los usuarios buscar en la parte superior izquierda y en la parte superior de la página antes de desplazarse hacia abajo y hacia la derecha. Los usuarios generalmente escanean las páginas web en forma de ‘F’. Asegúrate de que los elementos importantes de tu contenido se encuentran en estas áreas clave. Utiliza titulares, subtítulos, viñetas, y texto resaltado a lo largo de la página de manera que incites a los lectores a leer más.

Los lectores ignoran los banners. Los estudios han demostrado que los lectores en gran medida hacen caso omiso de los anuncios (banners). Si estás tratando de hacer dinero a través de anuncios, lo que necesitas es ser creativo en su ubicación o en los tipos de anuncios que coloques en tu sitio.

El diseño en el formato de las fuentes no se tiene en cuenta. ¿Por qué? Pues porque los usuarios suponen que son anuncios y que no tienen la información que necesitan. De hecho, los estudios demuestran que los usuarios tienen dificultades para encontrar la información en letras grandes de color con formato.

Mostrar los números como números. Lectores les resultará mucho más fácil de encontrar información en su sitio si utiliza números en lugar de escribirlos. Recuerda que estás escribiendo para los lectores que van a ser principalmente de exploración de su sitio, a fin de hacer que les resulte más fácil encontrar lo que necesitan y mantenerlos interesados.

El Tipo de tamaño de la letra influye en el comportamiento de la visualización. Las fuentes pequeñas aumentan la concentración de la lectura en el texto mientras que las fuentes más grandes animan al usuario a explorar por la página. Dependiendo de tus necesidades, elige un tipo de letra u otro.

Haz que tus usuarios puedan buscar en una parte específica del texto. No uses subtítulos como un formato particular, para ello asegúrate que sean pertinentes y de interés. También pueden ayudarte si incluyes palabras clave que ayuden a la indexación de la web.

Los usuarios, en general, exploran la parte inferior de la página. Puedes utilizar esto a tu favor dándoles información clave cuando los lectores están explorando la página. Resaltar algunas secciones o crear listas con viñetas ayuda a encontrar información y a leer la página.

Frases cortas mejor que párrafos largos. La información en tu página debe de estar diseñada para el corto tiempo de atención de la mayoría de los usuarios de Internet. Mantén los párrafos y las frases cortas a menos que el contexto lo requiera, por ejemplo las descripciones de los productos de un sitio de comercio electrónico.

Una columna es mejor que varias para conseguir atraer la atención de los usuarios. No abrumes a los visitantes de tu sitio con demasiada información. La simplificación es mejor en algunos casos. La utilización de múltiples columnas es probable que sean ignoradas por los usuarios.

Los anuncios en la parte superior y en la parte izquierda de una página recibirán la mayor atención. Si vas a publicar anuncios en tu sitio, intenta integrarlos en la parte superior izquierda de la página, dónde tendrás la mayor atención visual. Pero sólo porque los lectores los vean no significa que hagan clic sobre ellos, por lo tanto no sacrifiques el diseño sólo para ganar un poco de visibilidad.

Los anuncios colocados junto a los mejores contenidos son los más vistos. Si usted quiere que sus anuncios se vean y que hagan clic en él, incorpóralos en tu diseño de manera que se coloquen cerca de los elementos más interesantes de tu contenido. Los usuarios podrán encontrar lo que necesitan y además tendrás una óptima visualización de tu publicidad.

Los anuncios de texto son los más leídos. Como dijimos anteriormente, la media de usuarios de Internet, en general, no pierde mucho tiempo buscando en cosas que parecen ser de inmediato anuncios. Esa es la razón que sean mejores los anuncios de texto. No se trata de distraer y de mezclar con el resto del contenido de la página, pero son visualmente menos irritantes para el lector y, en definitiva, tienen más éxito.

Las imágenes grandes reciben más atención. Si vas a usar imágenes en tu página, cuanto más grandes mejor. La gente está más interesada en una imagen donde se pueden ver claramente los detalles y la información. Sólo asegúrate de que toda imagen que utilizas es particularmente pertinente a tu texto, de lo contrario es muy probable que sea ignorada.

Imágenes sencillas y limpias atraen más la atención. Si bien pueden funcionar bien con tu diseño, las imágenes artísticas no van a obtener mucha atención del lector. Si está usando fotos con gente, asegurarse de que son claras. Cabe señalar también que las fotos con el “verdadero” gente, y no con modelos, dan mejor resultado.

Utiliza titulares. Lo primero que leen los usuarios en una página son los titulares. Asegúrate que no bloquean otros temas de la página y que estos destacan lo suficiente para incitar al lector a seguir buscando.

Los usuarios pasan mucho tiempo mirando los botones y menús. Debido a esto, tendremos que dedicar algo de tiempo extra para asegurarnos que están bien diseñados. Después de todo, estos no sólo llaman mucho la atención de los ojos sino que son uno de los elementos más importantes de la página.

Las listas hacen que el lector mantenga la atención durante más tiempo. Una manera útil de para facilitar la lectura es la utilización de listas en lugar de párrafos largos. Utilice números o viñetas para resaltar la información importante dentro de su contenido. Esto hará tu sitio más escaneable y más fácil para los usuarios el poder encontrar la información que está buscando.

Evitar grandes bloques de texto. Los estudios han demostrado que los visitantes no se van a tomar el tiempo de estudiar grandes bloques de texto y no importa lo bien escrito que estén o la información que proporcionen. Debido a esto, es necesario romperlos en pequeños párrafos. Destaca áreas específicas, puede ayudar a mantener la atención del usuario.

Dar formato al texto puede llamar la atención. Para guiar al lector a los puntos más importantes del texto utilizar negrita, mayúsculas, cursiva, color, y texto subrayado. Pero con prudencia, si te excedes dificultará la lectura.

El espacio en blanco es bueno. Si bien se podría caer en la tentación de poner algo de texto en cada rincón de la página, es realmente mejor dejar algunos huecos. Los sitios con demasiado contenido tienden a abrumar a los usuarios y esto hace que hagan caso omiso de parte del mismo. Por lo tanto, deja espacios visuales limpios para no saturar al usuario.

Las herramientas de navegación funcionan mejor cuando se colocan en la parte superior de la página. No deseas que los lectores que llegan a tu web sólo busquen en la página inicial, querrán que naveguen por otras páginas y que localicen contenidos que puedan interesarles. Puedes ayudarles haciendo su navegación fácil, para ello coloca la barra de navegación en la parte superior de la página.


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 6 | 6:26 PM
Cuando poner un botón, cuando poner un enlace

Este artículo se encaja dentro del "ABC" de la usabilidad pero merece la pena recordar algunas reglas sencillas para saber cuando poner un botón del sistema y cuando poner un enlace.

Cuando poner un botón
Los botones del sistema se deben utilizar en aquellas "acciones" que queremos que el usuario ejecute.

Por ejemplo:

1. Enviar
2. Buscar
3. Descargar fichero
4. Subir fichero
5. Confirmar
6. Guardar

Ejemplos de uso.
Tenemos una web llena de documentos que el usuario puede descargar.
El formato ideal para una página de este estilo sería:

Titulo del fichero
Botón para descargar los ficheros fuera un botón del sistema etiquetado correctamente ("descarga este fichero").
Debajo del botón podemos indicar que va a pasar (si el usuario va a una nueva página, cuanto pesa el fichero, formato, etc...).

Cuando poner enlaces
Los enlaces los debemos utilizar para vincular ficheros HTML. Es decir, el usuario va a ir a otra página web.

El formato de enlaces ha de ser claro y debe indicar que vamos a ver, evitando los "pincha aquí", "más información", etc...

El problema de poner bajo enlaces "acciones" que no son ver otras páginas web es que pueden confundir al usuario.

Si tenemos el formato anterior:

Titulo del fichero
Descarga fichero.

Debajo podemos indicar que va a pasar (si el usuario va a una nueva página, cuanto pesa el fichero, formato, etc...).

Uno podría adivinar que se va a bajar el fichero, pero se podría pensar que uno va a ir a la página de descargas.

Los botones no crean confusión frente a los enlaces para lo que hemos denominado como "acciones".


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 7 | 2:08 PM
Texto web para no profesionales del área

Puntos a tener en cuenta a la hora de trabajar los textos que se publicarán en un sitio web. No esta orientado a informáticos o diseñadores web, sino, justamente al resto de los profesionales. Es una ayuda para facilitar la comunicación entre el diseñador web y la persona encargada de la información del sitio.

Es increíble la cantidad de respuestas que obtuve a la simple pregunta ¿Qué es una web? y ¿Qué es una página web?. Pero eso es otro proyecto…
¿Qué es una web para nosotros?

En este trabajo veremos a una página web (pw) como un medio visual interactivo y la web como el conjunto de páginas, buscadores, directorios entre otros elementos relacionados a la comunicación, por ahora solo visual y auditiva.

Intentamos explicar una pw como un medio de publicación, aunque es mucho más que eso, este artículo lo escribo destinado a publico en general no a los informáticos o “creadores web”.

Una pw básicamente es a su vez un conjunto de textos organizados, imágenes estáticas y dinámicas (videos) , enlaces (botones, hipervínculos, etc.) , sonidos.

A nuestra generación aun le cuesta leer en “la pantalla”, cansa mucho la vista, no es secuencial… simplemente no esta acostumbrada. Ocho de cada diez personas me comentaron que prefieren imprimir los documentos que estudiar desde la pantalla.

Internet es más económico y llega a todos lados lo usemos, pero correctamente.

Ahora convertiremos los defectos en virtudes para llamar la atención del usuario , este es el elementos más importante.

Comenzamos desarrollando una web sabiendo que es muy fácil que nuestro “cliente” pierda el interés de lo que lee y busque rápidamente otra página con el mismo contenido. Cualquiera rápidamente contestaría que se puede capturar a nuestra presa usando elementos interactivos, animaciones, movimiento… no estén tan seguros.

Antes que nada como buen estratega tenemos que conocer en profundidad a nuestro cliente , los destinatarios de nuestra comunicación. Analizarlos y categorizarlos, determinar gustos, tendencias y moda. En ocasiones esto es muy caro, y generalmente lo realiza una consultora, pero nosotros tenemos un arma: la web.

Antes que nada ingresá a diferentes páginas que presenten tu tema, te recomiendo que navegues por diferentes idiomas y regiones pero siempre sabiendo que nuestros destinatarios son de un territorio especifico, con cultura y conocimientos diferentes (o no).

Luego de recopilar información, nos organizamos, nos enfocamos en el contenido y hacemos una estructura siempre.

Recuerdan que nuestro cliente se dispersa rápidamente, bueno usamos eso como arma, creamos textos cortos con títulos de rápida interpretación. Nuestro lector rápidamente se interesará por otro enlace… y correa a hacer clic. El desafío es que siga en nuestra web. Estadísticamente si una persona encuentra fácilmente el 20% de lo q busca, seguirá investigando en tu sitio, tengamos en cuenta que nuestro cliente esta casi desesperado por tropezar con lo que busca y entenderlo rápidamente.

La “competencia” nos toca los talones, mil sitios que hablan de lo mismo ¿como hacer que nuestro usuario nos elija?. Justamente… tanta información abruma. Cuando estudiamos siempre optamos por un autor conocido, un libro recomendado, el apunte (resumen) del abanderado. Aquí, pasa lo mismo tenemos que presentar contenido original, siempre claro y “llamativo”. Es decir adecuado a nuestro publico, si son jóvenes ponemos un video, si son niños un par de animaciones, si es un adulto textos e imágenes.

Otro tema muy importante dentro de esta selva es estar primeros en las búsquedas . Ya sea Google, Msn Search o Yahoo, tenemos que encabezar. Lograr esto es muy difícil y comprende un tema distinto al que estamos tocando (Nos enfocamos en el contenido no en la programación de la web). Nuestra tarea es lograr que nuestra web se concentre en un tema especifico, armamos un árbol de opciones cuyas ramas a su vez toca de forma exclusiva un subtema.
De esta forma, tendremos una sección dentro de nuestra página que hable en profundidad de (por ejemplo) “Comidas típicas de la región noroeste argentino”. Fácilmente en nuestro texto explicaremos sobre: comidas típicas, la mejor comida típica, recomendamos que no deje de comer las tipitas, etc. Finalmente, si un internauta busca usando la frase “comidas típicas”, posiblemente estaremos en sus opciones.

Regresamos a nuestros textos y contenidos, algunos consejos a tener en cuenta:
1. Simple y claro (no me cansare de recordarles estas palabras)
2. Estructurado y ordenado.
3. Frases cortas.
4. Útil y preciso. Dale lo que busca.
5. Siempre se encuentra integrado a una interfaz llena de colores e imágenes, que sea adecuado.
6. Trabajar textos divertidos, que generen curiosidad y ganas de aprender y seguir leyendo.
7. Destaca siempre los artículos nuevos, es importante que renueves la información constantemente, y claro… que lo publiques a lo grande.

La estructura del texto (no de la web).
En ocasiones cuando escribimos pensamos que estamos siendo demasiados obvios, y que el usuario, un poco experto, se nos alejara. Lo básico o no del contenido no esta en la forma que lo presentas sino en la información en sí (seria genial que nos expliquen la teoría quántica con palabras simples). Por eso, usar paréntesis y ejemplos.

Las viñetas o numerar la información es muy útil, pero no hay que abusar, trata de llevar al usuario a través de la información con amabilidad, simpática y recreación.

Trabaja los títulos con cuidado, que sean precisos y engloben la información.

Darle importancia a las palabras usando negritas (bold), es una estrategia a tener en cuenta. Las personas son impacientes y seguramente leerán primero estas frases resaltadas logrando crear la sensación de satisfacción, que encontrara todo lo que busca y mucho más. También presentaras un “pantallaso” del contenido.

Ten en cuenta la creación de subtítulos o descripciones breves se usan siempre que tu texto sea extenso.

Quote
<!--[if !supportEmptyParas]--> <!--[endif]-->

Los títulos y las letras en negrita son fundamentales a la hora de posicionar un sitio en la web. Trata que contengan palabras claves (como crees que te buscaran en Internet). Veamos un ejemplo:

Quote
<!--[if !supportEmptyParas]--> <!--[endif]-->
Comida típicas del noroeste Argentino
<!--[if !supportEmptyParas]-->

Argentina posee las comidas más ricas de todo el mundo.
Nuestras carnes son exquisitas y la acompañamos con verduras de todo tipo.
Encontramos las típicas empanadas, de carne, pollo, verdura.
Con este ejemplo ayudamos a posicionarnos con búsquedas tales como “comidas típicas, empanadas, carnes y verduras”, etc.

A la hora de diseñar el sitio
1. Ojo con el desplazamiento horizontal, el contenido siempre se debe extender para abajo.
2. Habilita una opción para imprimir el contenido de tu web.
3. Los colores, este es trabajo para los diseñadores, pero a tener en cuenta:
1.1. usa fuentes legibles de un tamaño mediano,
1.2. resalta los enlaces,
1.3. usa colores tenues y el negro como fondo cansa mucho.

Esto es solo un apuntes informativo y general, espero que les sea útil.


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 8 | 3:16 PM
Algunos estándares en la web

Algunos estándares se van perfilando en las web. En este artículo se presentan ejemplos de hacia donde va la web y hacia donde no.

Más que estándares, este artículo hace un repaso por algunos de los aspectos que predominan en los proyectos web exitosos.

Ninguno es de obligado cumplimiento, pero si tu sitio no sigue alguna de estas premisas pregúntate si tienes una buena razón para ello.

Áreas que requieren registro
Se ha convertido un estándar que la primera opción mostrada más visible es la dedicada a usuarios no registrados y la secundaria a los ya registrados.
Los usuarios no registrados tienen prioridad por tres razones:
• Para el sitio es crítico ganar nuevos usuarios
• Si el nuevo usuario ve claras las ventajas del registro a priori, no se dará de alta
• El usuario registrado ya está familiarizado con el proceso y sin mirar va directo a introducir su usuario y contraseña

Ejemplos correctos prioridad usuario no registrado: Correo Yahoo, Gmail y la Caixa. Ejemplo incorrecto prioridad usuario ya registrado: BBVAnet.com

Acciones que pueden requerir registro
Cuando el usuario quiere realizar una compra, el proceso lógico es que primero se le pidan los datos para realizar la transacción y al final los datos para el registro. Este estándar tiene ventajas:

- Tiene más sentido para el usuario que al empezar se le hable de datos de su compra, no se le pidan contraseñas ni otros datos personales.
- Se pueden reaprovechar muchos datos para el registro posterior que entonces es mucho más ligero y rápido.
• Proceso centrado en la compra, objetivo del usuario: Casa del Libro donde primero se completan todos los datos de la compra.
• Proceso centrado en registro, objetivo del sitio: Fnac donde antes de conocer los costes totales se le pide introducir el número de tarjeta de crédito

Publicidad en formato texto
La publicidad en formato texto es la que mejor funciona y la que tiene mayores tasas de click-through. Por el contrario los banners animados es la publicidad menos efectiva.

El NYTimes usa publicidad en formato texto y banners gráficos, pero sin animación.

Tampoco en Amazon, ni en Yahoo se ven imágenes animadas, ni pop-ups o pop-unders aún comunes en la web en español. Si estos grandes sitios han renunciado a los ingresos millonarios de este tipo de publicidad seguramente existe una buena razón.

Se puede entender que algunos sitios que viven casi exclusivamente de la publicidad (ElMundo.es) vendan el formato a quien lo prefiera, pero es una paradoja que Iberia use banners graficos animados para sus propias promociones internas, cuando es un formato que da problemas.

En el caso de Iberia las promociones van rotando y es necesario recargar la home varias veces hasta que vuelve a aparecer la promoción que a uno le interesa. Sería mucho más util para los usuarios y efectivo para Iberia, mostrar un listado de trayectos en oferta o de ultima hora en formato texto en la home.

Romper el efecto cabecera
Los usuarios nunca miran en la cabecera porque no esperan encontrar nada de utilidad allí. Por esta razón los grandes sitios evitan crear el efecto de "franja" de cabecera con el logo y los colores corporativos.

Yahoo, Amazon, Ebay, Google… usan logos pequeños y evitan los colores intensos de fondo en sus cabeceras, para que no se vuelva invisible al usuario. De este modo la cabecera se convierte en una zona útil para situar links.

Por el contrario las cabeceras corporativas tipo "franja" como las de Fnac o BSCH, son ignoradas por los usuarios y quedan convertidas en áreas muertas.

Eliminación de áreas fijas de navegación
Mantener fija un área o menú de navegación es un derroche de espacio. La saturación de un largo listado de vínculos quita visibilidad a las opciones realmente importantes para el usuario.

El lugar natural donde ver y acceder a todos los contenidos del sitio es la home, el usuario ya conoce esto, no hay que repetir los accesos en todas las páginas.

El caso correcto: en esta página de un ordenador portatil en Amazon el menú de la izquierda de la home es sustituido por vínculos relacionados con el producto.
No es el caso de esta página de un reproductor DVD del Corte Inglés que mantienen un menú con vínculos a otras secciones de informática.

Cuando un usuario está viendo la página de un producto son dos los comportamientos más probables. Uno, obtener más información del producto. Dos, buscar productos similares alternativos. No necesita todas las categorías de la sección informática a un clic, porque de repente no va a decidir comprarse un escáner.

Navegación relacionada
Son los vínculos a otros contenidos del sitio íntimamente relacionados. Son enlaces muy efectivos y que aumentan drásticamente el número de páginas vistas por visita.

Amazon es conocida por las secciones “Quien compró este producto también compró este otro" o "Quien ha visto este producto también ha visto estos otros".

Aunque esta opcion parece centrada en lograr que el usuario compre más de un libro (pura venta), en realidad es muy amigable y está centrada en el usuario ya que:
• Ayuda al usuario a tomar una decisión de compra sobre el libro. Si lo que han comprado otros compradores del libro también nos interesa, podemos saber con certeza que es un libro interesante para nosotros.
• Muestra alternativas muy parecidas. Normalmente el usuario mira varios libros similares antes de elegir uno, quizás aún no haya localizado uno que realmente le guste.

La navegación relacionada es una “publicidad elegante” puesto que ayuda al usuario y al tiempo aumenta las ventas.

No se trata de poner un contenido relacionado tangencialmente (aprovechando que el Pisuerga pasa por Valladolid). Si no se tiene nada realmente relacionado, mejor no poner nada.

Altísima velocidad de descarga
No me refiero solo al peso en Kb de las páginas, sino también a la optimización de servidores y bases de datos.

Una altísima velocidad de descarga es una condicion básica inicial para el éxito de cualquier proyecto web. Básica y obvia, pero frecuentemente ignorada.
Incluso con ADSL los sitios que tardan más de 5 segundos son percibidos como lentos.

Es un placer de navegar en un sitio rápido. En un sitio ligero en el mismo tiempo se ven más páginas, lo que aumenta la probabilidad de encontrar lo que se busca.

Una descarga rápida causa más emociones positivas en el usuario, que cualquier cambio en el diseño estético.

No es casual que la descarga de páginas de los grandes sitios sea muy rápida incluso con módem. Google es legendariamente rápido, instantáneo. Otro tanto, Ebay, Amazon, Yahoo... En España, ElMundo.es es de los pocos rápidos en cualquier tipo de conexión.

¿Por qué ElPais.es o Iberia.es tienen estás velocidades de descarga tan lentas incluso con ADSL? Un usuario en ElPaís se lo piensa dos veces para ver un nuevo artículo, mientras que la inmediatez de ElMundo.es hace ver muchos artículos. Buscar un billete de avión requiere de muchas búsquedas, lo cual es una tortura con la velocidad de descarga de Iberia.es.

Google tiene muy claro que su velocidad es la mitad de su éxito. Imaginemos un buscador lento y bueno, contra otro más rápido, pero peor. En el tiempo que uno hace una búsqueda en uno lento, hace tres búsquedas en el menos bueno. Tiene tres opciones para para afinarlas e igualmente consigue encontrar lo que busca. El ejemplo vale para cualquier tipo de web.

En realidad la velocidad es un tema complejo, pero muchas veces no es solo una cuestión de “más maquina”, sino de optimizar las bases de datos y servidores para que sirvan las paginas mas rápidamente.

Menús desplegables dinámicos no funcionan
¿Cuántos sitios exitosos usan menús desplegables dinámicos? Ninguno.

Los menús desplegables parecen ventajosos porque permiten meter muchas opciones en una sola ¿pero dónde esta la ganancia si al final las opciones están ocultas?. Técnicamente están allí, pero en la práctica nadie sabe que están allí.

No parece que estos sean suficientes argumentos para Iberia, La Vanguardia o Administracion.es que mantienen menus desplegables dinamicos.

Paginas de bienvenida y elección de idioma
Desaparecidas hace mucho de la web en inglés, en la web en castellano aún están muy presentes.

En el ranking de Google una homepage con solo unos pocos vínculos de elección de país e idioma y vacía de información tiene muy mal posicionamiento y es un tapón para la indexación del resto de páginas del sitio.

Las páginas de bienvenida no tienen justificación alguna, deben ser eliminadas.

Eliminar las pantallas de elección de idioma puede provocar quejas que se evitan presentando la pagina en el idioma del navegador, que en la mayoría de casos es el del usuario. No hay lugar para que el usuario se sienta ofendido por ser recibido en otro idioma si está usando el navegador en el idioma en el que es recibido.

Incompatibilidad navegadores y S.O. minoritarios
Cualquier sitio de los "grandes" se puede ver bien con cualquier navegador y sistema operativo. Yahoo aún se ve decentemente navegadores totalmente desfasados.

Sin embargo en España muchos sitios no funcionan bien con Mozilla, Opera, Mac o Linux, con la justificacion de que el porcentaje de usuarios es tan bajo no justifica el gasto en dar compatibilidad y soporte.

Este razonamiento simplista ignora que detrás de cada 10-20 usuarios medios o básicos hay un usuario avanzado (normalmente un amigo) que usa software “minoritario” y cuyas recomendaciones siguen. Los usuarios avanzados son los que primero usarán el sitio y comenzarán el boca-orjea.
Evidentemente un usuario avanzado no va a recomendar un sitio en el que no puede navegar.

Un ejemplo triste, Caprabo no funciona con Mozilla Firefox, según el sitio "debido a problemas técnicos ajenos a Caprabo" wink

Vinculos azules y subrayados

Es cierto que no es obligatorio que los vínculos tengan este aspecto, pero hay que tener una muy buena razón para optar por otro formato más allá del “no queda bien estéticamente” o "los usuarios ya lo saben".

El 90% de webs americanas de éxito (Amazon, Yahoo, Ebay, Craigslist…) subrayan los vínculos y los pintan en color azul, es el estándar más universal y conocido en la web.

Se puede argumentar que webs para públicos muy especificos pueden renunciar a este estándar, pero no es el caso de ElCorteIngles, Fnac, Terra, etc.. que son sitios para todos los públicos.

El scroll no es fatal, el espacio en blanco tampoco
Apenas hay alguna página en español con mucho scroll, son todas muy cortas: ElCorteIngles, Terra, LaNetro.com...

Por el contrario en las homepages de Amazon o Yahoo hay bastante scroll, son páginas largas.

Las páginas cortas disponen de menos espacio y por ello están mas recargadas de contenidos, sin apenas espacio en blanco.

El scroll permite espacio en blanco que es necesario para crear una arquitectura de información efectiva. No se puede pasar el diseño únicamente en hacer unos elementos más chillones que otros a base de carga gráfica. El espacio en blanco alrededor de los elementos, les da importancia sin añadir ruido.
No lanzar contenidos nuevas ventanas

Los grandes sitios americanos en pocos casos lanzan los contenidos del sitio en nuevas ventanas. La nueva ventana rompe la linealidad de la navegación e imposibilita usar el botón "volver" del navegador.

Sin embargo en la web en castellano es frecuente que se lancen contenidos en nuevas ventanas. Un caso claro de abuso de nuevas ventanas se da en la web del BSCH donde gran parte de los contenidos de la home se lanzan en nuevas ventanas.


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
silviacastillo
Mensajes: 4
Reputación: 0
Mensaje Nº 9 | 10:46 AM
Muchas gracias por todas las herramientas y los consejos! biggrin yo he estado leyende este articulo
Código
http://www.ofifacil.com/ofifacil-diseno-imagen-corporativa-45-trucos-consejos-diseno-logo-profesional.php
Post editado por silviacastillo - Lunes, 2015-04-20, 5:53 PM
stevenmaister
Mensajes: 1
Reputación: 0
Mensaje Nº 10 | 5:15 AM
Muy buen post , muy completo,como siempre encantado de estar en esta comunidad un saludo.
Porque el saber no ocupa lugar http://clausulassuelo.com.
Foro uCoz » Información General » Para los principiantes » 20 reglas de desarrollo web elegante
Página 1 de 11
Búscar: