Es un sitio que había hecho hace ya unos 2 años cuando empezaba en el rollo. El primer sitio era todo hecho en slices, photoshop y luego lo que se llamaba Adobe ImageReady, en el se hacían los rollovers y se cortaba todo para el html. Hacer cambios era un dolor de cabeza o a lo mejor algo imposible. Gracias a Dios por el CSS y el markup nuevo web2.0.

Para el nuevo sitio de Hornos Urrea, quise hacer primero una mezcla de flash y html, a modo de banner. En esas estaba, terminando el banner gigantesco que puse en el index2.html, cuando vi un template de flash que se llama Carrousel. Que basicamente es un slideshow que uno determina en un archivo XML. Ese lo logré poner en index.html, y creo que quedó bastante bien. Tuve un poco de problemas con el posicionamiento pero al final con unos paddings de -32px quedo en su lugar.

Luego necesitaba una columna de noticias, que permaneciera fija en cada página. Lo malo es que aún no quiero usar PHP para estas cosas. Así que usé iFrame. Este es un código que me dio la función de postear un documento dentro de otro. Entonces las noticias las manipulo en news.html y se cambian automáticamente al llamar el archivo en cada página. Esto me ayudó a no tener que pegar las noticias en cada una de las 20 páginas que conforman el sitio.

Para las fotos utilicé el shadowbox, que está tan de moda por cierto. Y como no va a estarlo si es la forma más sencilla y elegante (hasta ahora elegante) de mostrar las fotos sin necesidad de moverse. No tardará en volverse tan popular que ya nadie lo va a querer usar… en fin.

Volví a usar un menu pegado al header y un submenu sencillo. Creo que a mi gusto es lo más fácil de usar y más user friendly. A mi gusto no se debe experimentar con botones super cargados de efecto 3D. Esto estoy seguro irá cambiando.

En fin, cuentenme que les parece el sitio…

Pensé que algo hacía falta en mi vida. Lo encontré. Se llama SongBird y genialmente es una mezcla de itunes con Firefox. Lo único que no hace es panqueques.

Fue hoy en la tarde cuando de casualidad, buscando fotos en flickr encontré que alguien hablaba de SongBird. Seguí el link como todo buen surfer, pensando que siempre es bueno indagar cosas que no sé. El link me llevó a un media player con diseño en gris oscuro (que por cierto encuentro completamente a la moda, alejándonos por fin del metal rasposo de apple). No le quería dar importancia pues la verdad que como todos me he acostumbrado a darle la vuelta a itunes y me siento comodo con él.

Sin embargo, lueugo de 34mbs y unos minutos de actualizaciones, caí en la cuenta que el bendito media player es un browser al mismo tiempo. Es decir en el mismo programa tengo mi navegador y mi musica, algo conveniente para momentos de ocio.

PROS: SB tiene add-ons igual que firefox, cualquier persona puede ofrecer extras para engrandecer el funcionamiento del bendito pajaro cantor. En esas estaba cuando me encontré con MASHTAPE. Es un add-on que ofrece buscar en flickr fotos del artista (mientras la cancion suena), videos en youtube, la letra de la canción, la historia de la banda y no contentos, también los proximos conciertos. TODO dentro del mismo programa. Es increible. No lo puedo creer aún lo útil. Ya no más idas y regresos de itunes a firefox, buscando letras, buscando fotos, buscando…

CONTRAS: No tiene tantas opciones para shuffle, es un poco desordenado a la hora de actualizar ipods. No he probado videos pero creo que hay un add-on para que soporte videos de quicktime. No tiene equalizador, o no lo he encontrado aún. Y la versión disponible es 0.6, lo que quiere decir que no hemos llegado a la oficial #1.0. entonces existen bugs aún por resolver.

Igual es una recomendación para aquellos que amamos nuestro playlist y es un tesoro el archivo de GB’s de musica que contiene horas de nuestra vida.

1. Fotos, Fotos y más fotos: Es escencial poner lo gráfico y qué mejor que buenas fotos. Recomiendo que no se usen las clásicas de stock, con el empresario y la ejecutiva tecnológica. Entre más humano hagan su sitio mejor. Recuerden que hay que tratar las fotos para web, cada segundo cuenta así que una foto de 150kb es mucho para ciertas conexiones.

2. Fonts y fondos: Aunque un font pequeño y elegante sea la mejor opción para el diseño del sitio, se recomienda un tamaño 15px o 14px para los parrafos. Al parecer también el color del fondo debe ser claro para que sea mas relajada la lectura.

3. Base de Datos: El clásico formulario de contacto es necesario para que los usuarios puedan dejar no sólo un feedback sino que nos sirve para poder crear una base de datos. Con esta podemos mandar actualizaciones, nuevas encuestas, nuevos productos, etc. Se debe crear un ambiente de interacción donde el usuario del sitio se relacione.

4. Blogosfera: Crear un blog como este, es necesario porque además que es gratis, es una herramienta para llevar información más actualizada, hacerla personal y tener el control sin necesidad de un programador u otro programa para web. Se puede postear desde cualquier lugar e incluir el RSS feed en el website para que la gente se subscriba.

5. Flash, flash, flash: Lo sitios web que están en flash son muy bonitos. Dejémoslo allí. Parecen interfaces de alguna estación lunar, pero su efectividad no es un 100%. La tendencia de ahora es usar flash para decorar y toda la información y el esqueleto del sitio se hace en HTML con ayuda de CSS o JS y tantos otros. Hay que recordar que lo principal del web es la actualización regular, si el flash afecta eso entonces es mejor ir por otro camino.

6. Información: Los textos deben estar organizados y bien adaptados al lenguaje de los usuarios del sitio. El flujo de la información dentro del sitio debe ser como un diseño de arquitectura donde la persona literalmente va a entrar y caminar, necesitamos guiarla a donde queremos que vaya. Los botones de navegación deben desglosar la info de la manera que queremos que la vean.

7. Esquema o esqueleto: Antes de empezar armen el sitio en papel, con un diagrama de flujo o un organigrama. Así logran uniformidad y certeza en el orgen y flujo del sitio. Además esto les ayudará a visualizar la navegación dentro de cada página.

8. Sencillez: El usuario normalmente está de 2 a 3 segundos en cada página. no podemos diseñar el contenido pensando que van a pasar horas dentro. Debemos pescarlos con algo, hacer que se queden y darles la información. Los sitios muy animados ya no son web2.0, porque perdían a las personas entre tanto movimiento.

Lo que me trae a que platiquemos un poco sobre la importancia de tener un dominio o web Address en lugar de quedarnos con los apelativos que nos regalan como en myspace.com o wordpress.com. Cuántos no se quedaron con su angelfire.com de eso hace ya mucho tiempo y seguro que esos internautas gozarían de mayor popularidad ahora.

Si puedo aconsejar estos son los 4 puntos importantes a mencionar sobre un dominio y su uso:

1. Conseguir lo más corto posible y más directo: www.necesitonegocioquehagamuchodinero.com podrá ser divertido y llamé la atención pero a la hora de la hora nadie va a recordar o poder leer semejante esfuerzo. Ahora podemos alegar que todos conocemos esto y no es nuevo, pero no solo es importante el tamaño sino la relevancia. si el nombre de nuestro dominio está tomado busquemos algo pensando en nuestro mercado objetivo. El .com.gt tan querido por muchos es bueno pero caro. Esos dominios se compran en la UVG (Universidad del Valle de Guatemala).

2. Espacio gratis, dominio a $10 al año: Para qué pagar 80 o 100 dolares por un hosting. Si tenemos clientes con poco presupuesto como para pagar un hosting, podemos recomendarles hosting gratis que casi siempre vienen con el costo del dominio. Lo malo es que siempre se tendrán los molestos anuncios en el top de la ventana. www.godaddy.com ofrece servicios similares.

3. Dominio redireccionado (masking): Podemos redireccionar un dominio hacia otra dirección y con eso ahorrarnos el hosting, pero a la vez darle mencion y nombre. Una buena recomendación para cualquier banda musical, comprar el dominio y redireccionarla a su sitio de myspace. Lo que hace el masking es que cubre cualquier otra dirección dentro de la direccion redireccionada. Por ejemplo si le hacemos masking a www.sinattra.com redireccionado a www.myspace.com/sinattra, entonces cualquier otro link dentro de www.myspace.com/sinattra se volverá www.sinattra.com . Igualmente se pueden hacer lo mismo para poder tener varios sitios dentro de un hosting plan. Lo unico malo es que no se puede hacer click derecho “copy link location” para hacer un link de lugares específicos ya que revelariamos el lugar exacto del hosting. Aunque si se puede hacer por ejemplo http://alexurrea.com/2008/05/20/nuevo-dominio/ (aunque este blog no esté en ningún hosting alexurrea.com

4. Promover un dominio: en mi experiencia para que google y esos sitios logren captar el dominio y lo que el sitio ofrece, a parte de técnicas específicas para eso, se debe “linkear” todo lo posible de adentro del sitio para afuera y viceversa. En otras palabras meter el dominio donde se pueda meter. Otra acción que sirve es usar el hosting del sitio como bodega de graficos en lugar de usar imageshack, pegamos imágenes en myspace o en blogs, o como banners con el famoso <img src> pero direccionado a nuestro sitio. Esto dara exposicion al dominio por todos lados.

]]> http://alexurrea.wordpress.com/2008/05/20/nuevo-dominio/feed/ 0 alexurrea http://alexurrea.wordpress.com/2008/05/19/primer-post/ http://alexurrea.wordpress.com/2008/05/19/primer-post/#comments Mon, 19 May 2008 18:57:33 +0000 alexurrea http://alexurrea.wordpress.com/2008/05/19/primer-post/ ]]> Leí en un blog este comentario sobre unos cuadros en CSS:

Their seemingly inconsistent behavior circumvents all natural logic.

Creo que eso describe perfectamente lo que es diseñar web. Hay mucho que aprender y para eso estamos.
]]> http://alexurrea.wordpress.com/2008/05/19/primer-post/feed/ 1 alexurrea http://alexurrea.wordpress.com/2008/05/19/terminado-guatemala-prospera/ http://alexurrea.wordpress.com/2008/05/19/terminado-guatemala-prospera/#comments Mon, 19 May 2008 18:54:23 +0000 alexurrea http://alexurrea.wordpress.com/2008/05/19/terminado-guatemala-prospera/ ]]> Por fin logramos terminar el diseño y la programación de guatemalaprospera.org

Al final los colores y el rediseño fueron ideas del mismo logo, alternando con grises y el anaranjado. Le da un tono de modernismo pero con el layout clásico.

Creo que después de muchos ensayos y errores llegamos a un diseño efectivo y principalmente que sirve su propósito.

También logramos aprender a usar el shadowbox, en Javascript, que le da funcionalidad sin desviar el flujo del usuario. Lo único que se usó en flash fue el slide show de videos que usamos en el index.

Pasenla a ver y me critican. www.guatemalaprospera.org

]]> http://alexurrea.wordpress.com/2008/05/19/terminado-guatemala-prospera/feed/ 0 alexurrea