Desarrollo Web en Colombia » Diseño Web

Concurso Art Digital

IngVillamizar — Tue, 13 Oct 2009 22:38:44 +0000

¿Qué es Art Digital?

Art Digital es la convocatoria de Intel que premia tu creatividad.

Estará abierta el 14 de octubre.
Podrás participar y votar en 3 categorías. Video, Imagen y Música
Art Digital 2009 es un concurso creado por Intel para todas las personas residentes en Colombia, Perú, Ecuador y Costa Rica.

El tema es el futuro. ¿Cómo ves el futuro?

El objetivo es mostrar por medio de video, imagen o música tu visión sobre el futuro y la creatividad para representarlo en Internet. Las mejores propuestas serán premiadas según su categoría por cada país participante.

Premio

El premio será un computador notebook de última tecnología, un trofeo y el reconocimiento de Intel.

Para participar debe entrar a www.artdigital.la y regístrate gratis.

- Selecciona la categoría en la que quiere concursar.

- Creatividad y Calidad.

Caricaturas relacionadas al Diseño Web

IngVillamizar — Tue, 28 Jul 2009 04:59:26 +0000

Vía Pixton y vía Twitter me he encontrado con un par de caricaturas, que resultan ser muy ciertas relacionadas sobre todo con lo que quiere un cliente al momento de crear su sitio web.

A propósito, no hay nada más frustante que trabajar con este tipo de personalidades, o aquellos que no confían o toman los consejos de los expertos en diseño.

Será que en el tema del diseño web, “el cliente siempre tiene la razón”? No creo la verdad!

Bueno, aca van, el primero es via @juansaab:

La otra es vía @astromario:

Espero que les hayan gustado, lo peor es que es muy probable encontrarse con este tipo de clientes.

Como centrar una pagina en CSS

IngVillamizar — Wed, 22 Apr 2009 04:07:35 +0000

Para los que inician en CSS, una de las principales dudas, o de las primeras cosas que se quisieran hacer para desarrollar una página web es cómo hacer para que ésta aparezca centrada.

En realidad no es para nada complicado y vamos a ver cómo con básicamente 2 reglas podemos obtener esto:

Primero que todo, en el código que vayamos a desarrollar, necesitaremos un contendor. Allí se incluirá todo el layout, que es lo que queremos centrar. Naturalmente, vamos a llamar a este contenedor … “contenedor”

El código sería algo así:

…layout…

Usando las siguientes reglas en CSS podremos hacer que todo se encuentre centrado:

body {
text-align: center;
}

#contenedor {
margin: 0 auto;
width: xxxpx;
}

Básicamente estamos diciendo que todo lo que se encuentra en el Body debe estar centrado, mientras le damos un ancho específico al contenedor (obviamente en el código hay que reemplazar el xxxpx, por un valor en pixeles, por ejemplo width: 980px;). La otra regla importante dentro del contendedor es la de “margin: 0 auto;”. Allí se indica 0px arriba y abajo, mientras que a los lados se ajusta automáticamente.

Para alinear el texto de la página como tal a la izquierda, se debe añadir una regla:

#contenedor{
margin: 0 auto;
width: xxxpx;
text-align: left;
}

Allí, se indica que todo lo que esté dentro de #contenedor, va a estar alineado a la izquierda.

Verificar un sitio en varios navegadores

IngVillamizar — Mon, 20 Apr 2009 04:41:46 +0000

Para esta entrada, una imagen que encontré, y que me parece que muchos talvés de han sentido identificados:

La moraleja: Y por más que muchos “odiemos” a Internet Explorer, es que se debe verificar un sitio web en varios navegadores: Un lugar útil para lograr esto es: http://browsershots.org/

Concurso Diseño Web: Premios 2W 2009

IngVillamizar — Mon, 20 Apr 2009 01:11:14 +0000

Para los interesados en consursos de diseño web, he encontrado un interesante concurso, organizado por la empresa 2W, acá está toda la información del concurso:

Cómo participar?

Desarrollar un microsite de 4 secciones (máximo)

Tema: CALENTAMIENTO GLOBAL
Jurado: EDUARDO SUAREZ – JULIAN MORA – FELIPE MAZABEL

Requisitos

El diseño (o el website) enviados deberán cumplir con los siguientes requisitos para ser aceptados y evaluados correctamente. 2W se reserva el derecho de rechazar diseños que no cumplan con ellas, o de interpretar estos requerimientos a su entender en el caso de que surgieran ambigüedades.

El diseño deberá ser desarrollado por los participantes sin colaboración externa.

El diseño deberá funcionar en cualquier plataforma· El diseño presentado deberá ser inédito (ni publicado ni distribuido comercialmente, ni puede haber obtenido premios en otros concursos).

Derechos de autor: El diseñador deberá ser el autor o contar con el copyright o permiso para usar las imágenes, personajes, escenarios, sonidos, música, herramientas, y cualquier otro material o instrumento usado para el desarrollo del diseño.

Lenguaje de Programación y Herramientas adicionales: Podrá estar hecho en cualquier lenguaje de programación.

Plazos de Entrega

Se aceptarán los diseños recibidos hasta las 18.00hs del día 8 de Mayo de 2009. No se aceptarán diseños recibidos luego de esa fecha y hora, aunque hayan sido enviados antes. 2W se reserva el derecho de cambiar el horario y fecha límites sin previo aviso.

Tema

Queremos que el resultado de lo que salga de los premios 2W tenga una mayor consecuencia, que vaya más allá de lo ganado y del reconocimiento hacia los diseñadores. El cuidado del medio ambiente y los problemas que se presentan actualmente en este sentido son de interés mundial y cada persona puede aportar soluciones desde diferentes frentes, uno de ellos es el diseño, concientizando a las personas desde lo grafico de lo que está pasando en el mundo. Con base en todo lo anterior y siendo Colombia el tercer país con mayor biodiversidad, es interesante trabajar sobre la protección del medio ambiente con un tema que por estos días está dando mucho de qué hablar “EL CALENTAMIENTO GLOBAL”.Se puede abordar de diferentes formas, mostrando el proceso, los antecedentes, las cosas que causan el daño, las consecuencias, el mundo al cabo de 100 años, en fin es un tema amplio y que dará mucho de qué hablar.

Premios

Puesto: Mac 24
Puesto: Ipod Touch
Puesto: Ipod Nano

Entrega de premios 15 de mayo de 2009

El sitio oficial del concurso es: http://www.premios2w.com/

Diseño web con WordPress

IngVillamizar — Tue, 24 Feb 2009 01:13:35 +0000

Desde que el primer blog fue publicado en el año de 1999, escribir y tener un blog se ha convertido en un fenómeno que ha creado millonarios, tumbado políticos y ha cambiado la forma en la que se reportan las noticias en la web.

Para tener un dato sobre la cantidad de blogs que existen actualmente, podemos recurrir a technorati, donde este sito rastrea aproximadamente 112 millones de blogs, y en donde aproximadamente 175,000 nuevos blogs son registrados a diario.

WordPress inició en el año 2003, y desde entonces ha crecido hasta convertirse en una de las plataformas de blog más grandes e importantes del planeta. Basta con decir que es usado por organizaciones como “the New York times”, “Wall Street Journal” o CNN.

Al ser un software de descarga libre, se convierte en una plataforma bastante útil para diseñadores web, que no se tienen que preocupar demasiado por la parte técnica, sino que se pueden dedicar exclusivamente a la parte gráfica.

En wordpress prácticamente se puede hacer lo que se pueda lograr con una página web normal. Se puede crear un tema nuevo, o editar el default que viene con la instalación de wordpress.
Las partes de una plantilla en wordpress es bastante simple y muy bien estructurada, se puede decir que se cuenta con las siguientes partes:

Header.php: Típicamente el archivo header.php contendrá la imagen del cabezote principal – será la imagen o aspecto que le da al sitio web su temática o personalidad.
Sidebar.php: En esta parte de una plantilla web, es posible ubicar información adicional o complementaria al sitio web, generalmente widgets, como las categorías, los tags, archivos, calendarios, etc. Añadir widgets al sidebar es bastante sencillo.
Footer.php: Se encuentra en la parte de abajo del blog y contiene información acerca del blog, como copyright por ejemplo.
Styles.ccs: La hoja de estilos que le da forma y la parte visual al blog.
Single.php: Determina el contenido de cada blog individual. Es decir, la posición de los textos, la forma en la que se puede visualizar el texto, etc. Este archivo es como una plantilla que se aplica a cada entrada del blog.

Al modificar estos archivos, se puede conseguir pasar de algo así:

Diseño worpress basico

A algo así: 3 sitios web que han sido modificados y adaptados a wordpress, y que personalmente me parecen muy buenos, espero que les gusten:

Studio Racket

Arvind Andrion

Ndesign Studio

Tamaño de la pantalla para Diseño Web

IngVillamizar — Wed, 21 Jan 2009 19:15:44 +0000

Muchos factores deben ser tenidos en cuenta para realizar buenos diseños web, entre estos se puede incluir escoger adecuadamente el tamaño (en realidad resolución) de la pantalla al momento de planear la forma en la que se va a presentar el sitio web al usuario.

Varios puntos de vista pueden ser tenidos en cuenta, principalmente factores de usabilidad y factores de optimización, además obviamente de factores visuales ligados al diseño como tal.

Las 3 resoluciones principales que se contemplan para diseñar una web son: 800×600, 1024×768 hasta 1280×1024.

Ahora, la pregunta es, cual es el tamaño más usado? No se puede dar una respuesta exacta, pero una buena aproximación se presenta a continuación:

A partir de la gráfica anterior se puede deducir que la gran mayoría de los usuarios de Internet, poseen pantallas cuya resolución supera los 1024 x 768 px.

Desde el punto de vista de usabilidad, se debe procurar, sin embargo, que un sitio web funcione bien, y se vea bien independientemente de la pantalla que se use para visualizarlo. Nielsen, recomienda los siguientes factores para optimizar una página web para un determinado tamaño:

Visibilidad Inicial: Toda la información clave deber ser visible para los usuarios sin necesidad de que ellos tengan que desplazarse a traves de la página para encontrarla.
Legible: Es simple para los usuarios leer el texto de su sitio web?

Desde el punto de vista de SEO o posicionamiento web, la forma en la que se le presenta la información al usuario tambien puede jugar un papel importante. Una de las bases de la optimización para buscadores es la cantidad de texto visible para que un motor de búsqueda pueda indexar y determinar de que se trata una página web.

Generalmente, con diseños amplios, es muchos más sencillos ubicar gran cantidad de texto, o la suficiente, para encontrar un balance óptimo entre texto y gráficos. Por otro lado, en un diseño realizado para una menor resolución, esto aveces es algo complicado.

Plantillas web

IngVillamizar — Mon, 12 Jan 2009 16:38:56 +0000

Muchas veces, cuando no se tiene presupuesto para un gran diseño web, una de las mejores opciones que se puede tener es recurrir a las plantillas web. Existen muchos sitios web que ofrecen miles de plantillas web, y que se pueden usar para tu sitio web.

Me gustaría compartir un par de sitios donde he encontrado muchos diseños de calidad, que se pueden ajustar a varias temáticas dependiendo el contenido de un determinado sitio web.

Se trata de este sitio que ofrece una gran variedad de plantillas listas para usar en tu sitio web. Entre mis favoritas están estas plantillas:

Existen miles diseños más disponibles bastante útiles. Las ventajas de estas plantillas web es que la mayoría de los diseños se encuentran en CSS, y en consecuencia amigables a los motores de búsqueda. Talvez tambien puede ser útil estos consejos para buenos diseños web .

10 Consejos para buenos Diseños Web

IngVillamizar — Tue, 02 Dec 2008 02:23:58 +0000

Diseñar un sitio web puede ser algo realmente complicado, actualmente tener un sitio web “más bonito” que el de la competencia puede representar una venta que gane nuestro sitio web.

Por esto, les quiero hacer una lista de 10 consejos básicos para mejorar un diseño web. No solo se debe tener en cuenta el punto de vista gráfico (los sitios desarrollados 100% en flash no siempre es lo más efectivo), hasta factores de usabilidad y accesibilidad deben ser tenidos en cuenta en el momento de diseñar un sitio web.

El objetivo de estos consejos, es tener un sitio web que agrade tanto a los visitantes como a los motores de búsqueda (posicionamiento web!).

1. Crear un cabezote o logo que llame la atención. Finalmente, esto es lo primero que van a encontrar los visitantes a tu sitio web. Hay que atraparlos en el sitio web desde el primer momento.

2. Asegurate de tener un balance óptimo entre gráficos y texto: Los sitios web que abusan de los gráficos y hacen poco uso de texto pueden correr el riesgo de no ser encontrados por los motores de búsqueda. Mientras que un sitio web con solo texto puede generar que los visitantes no entiendan y no lean tus páginas web. Encontrar un punto de equilibrio entre texto e imágenes en clave para el exito de un sitio web.

3. Procurar que en cada página se pueda escribir mínimo 250 palabras como texto.

4. Usar hojas de estilos genera un código más limpio para los motores de búsqueda, de esta forma se minimiza el riesgo de tener código innecesario en una página web.

5. Dividir los párrafos con imagenes y viñetas es una buena opción. Los textos largos generalmente hacen que los visitantes abandonen un sitio web rápidamente, escribir la información de forma concisa y segmentada puede ser la diferencia para que un visitante continúe en el sitio o lo abandone.

6. Hacer obvio lo obvio! Si quiero que mi visitante compre un producto de página web, desde un punto de vista de diseño debo garantizar que el visitante encuentre fácilmente el botón de comprar (o dependiendo el ‘call to action’, puede ser contactenos, suscribase, mas informacion, etc)

7. Usa las etiquetas H1-H6 de forma lógica a lo largo del sitio. H1s para el encabezado o tema principal de cada página, H2 o H3 para subencabezados.

8. Ubicar un par de enlaces dentro del contenido del sitio web. De esta forma se aumenta la posibilidad de que el visitante ingrese a las páginas interiores del sitio web. Por ejemplo, aca puedes leer un poco más sobre la importancia del diseño web.

9. Garantizar que la información de contacto sea visible para el visitante. No se puede permitir que una persona abandone el sitio web porque no encontró información de contacto.

10. NO Realizar sitios 100% en Flash! Si quieres que te encuentren a traves de un motor de búsqueda, quizá debas reconsiderar realizar un diseño completamente en Flash.

Importancia del Diseño Web

IngVillamizar — Sun, 05 Oct 2008 18:23:26 +0000

Aunque este Blog trata principalmente sobre el Desarrollo Web, es imposible no reconocer la importancia que juega un buen diseño web en el momento de decidir si una página web es verdaderamente exitosa o no.

Puede que una página web cuente con una programación impecable, que no falle absolutamente nada, pero si el diseño no es “bueno” entonces los usuarios no van a poder utilizar de forma correcta todo lo que puede ofrecer la página web.

En otro Post les comento sobre varios tips que hay que tener en cuenta para lograr un diseño que logre captar la atención de los visitantes, y de esta forma, sacar el mayor provecho de su sitio web.