Diseño de Páginas Web

Ya conoces las redes sociales, en este articulo se critica el diseño web de las mismas y los aspectos que pueden mejorar en el diseño web de estas redes sociales, comenzamos en orden regresivo, desde el que puede mejorar mas hasta el que no debe cambiar nada.

 10. FARK

Fark.com fue creada en 1,999 por Drew Curtis, es una popular red de noticias y recibe alrededor de 2,500 post diarios y cerca de 5 millones de visitantes unicos al me, pero es fea.

El logotipo no esta nada mal, la navegacion por el sitio no es mala, encontrar los enlaces es facil, pero la forma en que están organizadas las noticias no es buena.

9. Reddit

Reddit, creado en 2,005 por Steve Huffman y Alexis Ohanian, el proyecto fue creado Open Source a inicios de este año, la organizacion de sus wittis y post es bien conocida. Puedes descargar el codigo desde: http://code.reddit.com/

El logotipo no es malo y el Alien Reddit es bien conocido en internet. lo que lo hace aburrido es la escaces de colores en el sitio.

8. Slashdot

Iniciado en 1,997 por Rob “CmdrTaco” Malda y el propietario es SourceForge, Inc. mientras todo el contenido es “user-submitted” los editores eligen lo que aparecerá. Tambien existe Slashdot Japan que es unicamente para japón.

El sitio es facil de navegar, facil de leer y en general la apariencia es decente.

7. Propeller

Propeller (anteriormente de Netscape.com) es operado por AOL-Netscape, y fue iniciado en 2,006. Todo el contenido es enviado por el usuario (user-submitted) y las historias reciven un rating en una escala de 1-10, mejor que votos individuales.

El sitio es bonito, limpio y bien hecho y el logo es reconocible, el resto de colores esta a tono con el sitio.

6. Tip’d

Tip’d fue iniciado en 2,008 por un sujeto de nombre Andy, el director de la comunidad es Muhammad Saleem, bien conocido en Digg.com (ocupa el puesto #2 en la lista 100 usuarios mas activos de Digg.com), con poco mas de 2,000 noticias enviadas.

Tip’d es una red de noticias de finanzas y el sitio se siente asi mismo, es bastante formal.

5. Yahoo! Buzz

Yahoo! Buzz inició en febrero 2,008, creanlo o no por Yahoo!,  todo el contenido es enviado por el usuario pero la pagina frontal es controlada por los editores asi que son estos los que eligen el contenido de la portada.

El diseño del sitio en general no esta mal, buenos colores, no es aburrido.

4. Design Float

Design float fue iniciado por Andrew egenes, como una solucion al problema del diseño de las categorías en Digg.com.

Muy bien diseñado, es lo que se espera de un sitio web creado para diseñadores, los colores son consistentes.

 3. Digg

Digg.com iniciado por Kevin Rose en Diciembre del 2,004 es uno de los mas prominenters sitios web de noticias. Todo el contenido es enviado por el usuario y el contenido de la pagina principal es escogido por el usuario.

El diseño web es extremadamente bueno, pero hay un par de cosas que se podrían mejorar como es el caso de los colores del encabezado ya que son muy fuertes en comparacion con el resto del sitio quizas con uno o dos degradados.

2. Stumble Upon

Fue fundado por Garrett Camp, Geoff Smith, Justin LaFrance y Eric Boyd, y comprado en el 2007 por eBay. Posee una barra de herramientas por medio de la cual puedes seleccionar el contenido que te gusta y el que no te gusta.Es como un sistema de recomendacion, basado en lo que te gusta y loque no te gusta.

El diseño web es simplemente fantástico, todo desde las tabs se ven grandiosas.

1. Mixx

Mixx, creado en 2,007 por Recommended Reading, Inc., es un sitio web de noticias similar a Digg.com, ha sido solicitado como un pequeño refugio para los Diggers que han sido baneados en Digg.com.

Mixx se ve bien, es un diseño web bien elaborado y estructurado.

Fuente: emitgraphics.com (articulo original en ingles: emitgraphics.com.)

En Soluciones SEO comenzamos a realizar video tutoriales sobre diseño de paginas web, para ello vamos a utilizar Dreamweaver, en estas primeras entregas vamos a ver como desarrollar paginas estaticas, posteriormente veremos como hacerlas dinamicas.

Si quieres ver el video de diseño paginas web la ruta es http://www.solucionesseo.com/video/tutoriales/diseno-paginas-web/diseno-paginas-web.html

Navegando hoy me encontré con un componente para dreamweaver el cual te permite crear un sitemap.xml, con esto puedes crear el sitemap.xml directamente desde Dreamweaver, aunque el componente y la documentacion se encuentran en ingles es bastante intuitivo y facil de usar.

Luego de generar el sitemap.xml ingresa a tu cuenta de Google y sube este nuevo archivo.

He generado con exito el mapa del sitio, OJO: Agrega una Flag “oFF” para las carpetas que no quieres de sean incluidas.

te recomiendo que luego de subir el archivo sitemap.xml crees dentro de las herramientas de Google una regla Disallow para el archivo robots.txt, en el que deberas incluir la ruta de las carpetas a las cuales no quieres que los buscadores te rastreen (informacion privada).

Si estas interesado en este componente descargalo desde la web del autor: Garterblue

Si eres diseñador no te puedes perder estos vectores, dos siluetas de niños en fomrato ai, una foto de alta resolucion que puedes usar como Background en tus artes o texturas en tus diseños.

Ademas hay otros archivos para descargar en formato ai.

Excelentes recursos para diseño grafico.

Entra en diseño y mercadeo en la seccion de Clipart

Soluciones SEO estrena interfaz y servicios, a partir del dia de hoy.

La nueva interfaz es mas sobria y mas limpia, incluimos la seccion de tutoriales que serán vinculos a las ultimas entradas del blog, asi mismo informamos que el nuevo servicio es la Venta de computadoras y accesorios de computadoras (www.solucionesseo.com/computadoras).

La idea de un nuevo diseño es mantener la frescura y la renovacion constante ue experiementamos.

Hasta la proxima.

Que tamaño va a tener mi pagina web?

Esta es una de las primeras preguntas que nos hacemos al diseñar una pagina web, sobre todo si estamos comenzando y para responder a esta pregunta vamos a reflexionar sobre las resoluciones de pantalla:

La resolucion de pantalla oscila entre 800 x 600 y 1024 x 768, esto es lo mas comun, sin embargo hay monitores mas grandes.

Para una resolucion de 800 x 600, debemos darle al tamaño del diseño web 768 x 500, para una resolucion de 1024 x 768 vamos a utilizar un tamaño de 1000 x 500.

Si utilizamos Photoshop para realizar el diseño de la interfaz de la pagina web, vas a usar las medidas que mensioné arriba, pero en Dreamweaver debemos armar las tablas o realizar la maquetacion de la pagina web, llamando a cada tabla que nos genera photoshop e insertandola dentro de la celda que queremos que se muestre. Como se hace eso?, ahora te explico.

Al realizar los cortes en Photoshop y “Guardar para Web” en Phosothop CS o “Save for wweb and Devices” en photoshop CS3, el programa genera un archivo html y una imagen correspondiente para cada sector dibujado en Photoshop las cuales ubica en un a carpeta llamada “images” un nivel superior a partir del archivo html.

OJO: No te recomiendo realizarle modificaciones a este archivo html, recuerda que esta enlazado y es 100% dependiente del arhivo psd, esto significa que cada cambio realizado en el archivo psd y luego guardado para web, va a modificar este archivo por lo que conviene mejor “guardarlo como” con otro nombre y preferiblemente en otra ubicacion siempre dentro de la carpeta raiz de nuestro sitio.

Ejemplo:
Tienes la siguiente estructura en tu sitio:

-raiz

    - imagenes

    - animaciones

    - documentos

Agrega otra carpeta para que tu sitio quede asi:

-raiz

    - imagenes

    - animaciones

    - documentos

     - cortes

En esta carpeta “cortes” guarda los archivos html generados por Phosothop, y los archivos que vas a modificar guardalos dentro de “raiz”.

Esto implica otro cambio al codigo, y es en lo referente a las rutas: originalmente las imagenes se mandan a llamar de la siguiente manera < img src = ” images / archivo.jpg “ >, pero al realizar el cambio la ruta deberá quedar < img src = ” cortes / images / archivo.jpg “ >, si lo haces directamente desde Dreamweaver archivo / guardar como no tendras que modificar nada en el codigo, ya que Dreamweaver te pregunta si deseas actualizar los vinculos, a lo ucal deberas contestar SI.

Como podras observar en Dreamweaver no haces mucho, todo lo realizas en Photoshop.

Pero que sucede si el cliente solicita que la pantalla se agrande?, que no sea de un tamaño fijo de pantalla sino mas bien se amplíe y adapte a cualquier resolucion que visite el sitio web.

mmmm… sencillo, aqui debemos trabajar con el ancho de las tablas, creo que aqui vas a trabajar con codigo, jeje. En un documento nuevo de Dreamweaver debes insertar una tabla de 2 o 3 columnas (depende de como tengas el diseño).

El codigo se veria asi (2 columnas)

< table width=100% >
< tr >
  < td width = 200 >aqui insertas la columna izquierda < / td >
  < td width= 100% >aqui insertas la columna del contenido de la pagina < / td >
< / tr >
< / table >

Si es de 3 columnas

< table width=100% >
< tr >
  < td width = 200 >aqui insertas la columna izquierda < / td >
  < td width = 100% >aqui insertas la columna del contenido de la pagina < / td >
  < td width = 200 >Aqui la columna de la derecha < / td >
< / tr >
< / table >

 Al final el codigo de tu pagina web deberia tener este aspecto:

< table width = 100%>
< tr >
< td >Esta tabla se reserva para el TOP < / td>
< / tr >
< /table >

< table width=100% >
< tr >
  < td width = 200 >aqui insertas la columna izquierda < / td >
  < td width = 100% >aqui insertas la columna del contenido de la pagina < / td >
  < td width = 200 >Aqui la columna de la derecha < / td >
< / tr >
< / table >

Para finalizar dejame hacerte una aclaracion: Lo ultimo que vimos es apra que nuestra pagina web se adapte a cualquier resolucion, pero siempre tiene una medida minima, es decir, si originalmente la diseñaste para una resolucion de 1000 x 500 (ver explicacion arriba), en un monitor de 800 x 600 va a verse  la barra de desplazamiento horizontal.
Tomalo en cuenta.

Saludos

Espero les haya sido de utilidad.