Carlos Leopoldo » Diseño Web

Nuevo diseño y características para Hi5

Carlos Leopoldo — Sat, 07 Nov 2009 14:41:18 +0000

Hoy después de bastante tiempo sin acceder e mi perfil de hi5, me encontré con un sitio rediseñado, y un mensaje que dice lo siguiente:

¡Bienvenido al NUEVO hi5!

Estás viendo la versión Beta de hi5. Las características actualizadas incluyen una nueva nueva emocionante imagen, nueva navegación, y avatares “estrella hi5″. Haz clic o mueve el cursor sobre cualquiera de los enlaces para echar un vistazo.

Después investigué en el blog de hi5 que había pasado y me di cuenta que se trata de una beta, si tu no puedes ver este nuevo diseño de hi5 debes acceder a la sección de la beta en http://new.hi5.com ya que se estará haciendo visible y disponible a los usuarios de manera gradual, algunas otra novedades son:

Se rediseñó la sección de avatar, además de la posibilidad de tener un avatar en 3D
Ahora cuenta con una herramienta para personalizar el avatar
Se simplificó la navegación superior del sitio
Nuevo logotipo

Otros artículos relacionados

Truco para igual la altura de varias columnas con CSS

Carlos Leopoldo — Thu, 05 Nov 2009 02:53:30 +0000

Hace tiempo no publicada cosas de diseño web, pero me encontré un truco que me parece bastante útil, de hecho desde hace mucho tiempo necesitaba una solución así ya que es un problema recurrente, se trata de igualar lo alto de 2 o más columnas creadas con CSS, ya que normalmente la altura de las columnas dependen del contenido de cada una o de una altura fija, ésta última solución no es la mejor ya que lo ideal es que la altura se rija por el contenido.

Un ejemplo típico de la altura de dos columnas es que el contenido principal es más alto que el sidebar, pero si queremos que el sidebar tenga la misma altura que el contenido principal debemos aplicar el siguiente truco:

La estructura HTML de las columnas debe ser como la siguiente:


 ...
 ...

Y el código CSS debe ser como el siguiente:

#wrapper{
	margin:0 auto;
	width:600px;
}
#maincontent{
  border-right:solid 200px #DFDFDF;
  position:absolute;
  width:400px;
}
#sidebar{
	background:#DFDFDF;
	margin-left:400px;
	position:absolute;
	width:200px;
}

El truco consiste en hacer hacer parecer que la altura de la columna #sidebar es igual a la altura de la columna #maincontent.

Vía El Webmaster.

Otros artículos relacionados

Photoshop para tu iPhone o iPod Touch, es gratis

Carlos Leopoldo — Fri, 09 Oct 2009 15:35:17 +0000

Adobe acaba de lanzar la versión para iPhone y iPod Touch de su software de retoque fotográfico llamado Photoshop, pero en su edición Photoshop.com Mobile misma que ya estaba disponible para otras plataformas como Windows Mobile, pero aquí el problema es que si tu cuenta de iTunes es de la App Store de México no lo podrás descargar ya que solamente lo he encontrado disponible en la App Store de USA, espero que pronto esté disponible para todos en México.

Photoshop.com es un software que te permite editar y retocar tus fotos fácilmente sin costo alguno, y además puedes almacenar tus fotos en línea con capacidad de hasta 2GB de espacio, esto compite directamente con Flickr de Yahoo o Picasa de Google, pero la parte de edición de imágenes no es tan poderosa como el software de escritorio ya que solo tiene funciones muy básicas como el de recortar, rotar y ajustar el color de las imágenes.

La aplicación es totalmente gratis y si tienes cuenta de la App Store en USA no puedes dejar de descargarla.

Enlace para descargar gratis Photoshop.com Mobile para tu iPhone desde la App Store.

Otros artículos relacionados

Traduce tu blog con Google Translate y expande tu audiencia a todo el mundo

Carlos Leopoldo — Mon, 05 Oct 2009 08:01:50 +0000

Si tienes un blog que escribes en español y te gustaría llegar a más gente aunque hablen otros idiomas, tienes dos opciones 1. traducir manualmente todo tu contenido (esto serái lo mejor) o bien automatizar la traducción, esto es más rápido y es que ¿Cuánto tiempo te tardarías en traducir el contenido web de un sitio web en 50 idiomas? ahora imagian todo internet, ahí incluso si todos los traductores en el mundo trabajaba todo el día sería imposible y más aún con la tasa de crecimiento actual del contenido que se crea en línea y la enorme cantidad de datos en la web.

Pero Gracias a Google Translate puedes disponer de un sencillo Widget para tu blog que te permite traducir el contenido en más de 50 idiomas, agregar el Widget de Google Translate es muy fácil debes de seguir los siguientes pasos:

Entrar a la sección de Herramientas de Google Translate
Seleccionar el idioma en que está escrito tu blog originalmente
Después puedes elegir hacia cuales idiomas quieres traducir, por default está seleccionado a todos los idiomas disponibles
Copia y pega el código que te aparece en el paso 3 de las herramientas de Google Translate y pégalo en el (Theme o Template) de blog, si usas Wordpress en el header.php justo después de la etiqueta
Listo ahora verás una barra (widget) para traducir tu sitio.

Otros artículos relacionados

Tutorial de Google Wave

Carlos Leopoldo — Sat, 12 Sep 2009 23:51:11 +0000

Si ya estás usando Google Wave y te gustaría sacarle más jugo a la API, con este excelente tutorial podrás construir un Robot (Bot), usando Java 6.0 y el IDE de programación Eclipse 3.5, esto será posible gracias a que Google Wave usa el protocolo de comunicación XMPP (Extensible Messaging and Presence Protocol), sin duda este es un muy buen tutorial para quienes quieren aprender a sacarle jugo a la API de Google Wave, eso sí, el tutorial está inglés.

Enlace a tutorial de Google Wave para crear un robot.

Otros artículos relacionados

Simple y poderoso gestor de tareas creado con PHP, MySQL y Ajax

Carlos Leopoldo — Fri, 21 Aug 2009 22:31:35 +0000

myTinyTodo es una aplicación para gestionar listas de tareas pendientes (to-do lists) desarrollada con PHP y usa MySQL o SQLite, además la puedes descargar completamente gratis para instalarla en tu propio servidor,

Enlace para descargar myTinyTodo.
.

Otros artículos relacionados

Mejora tu Theme de WordPress usando jQuery

Carlos Leopoldo — Fri, 14 Aug 2009 14:48:51 +0000

Si te gustaría agregar un poco más de interacción o animación al Theme de WordPress en Cats who code encontré unos excelentes códigos que te pueden servir para lograr efectos como:

Resaltar términos de búsqueda.
Animar tu barra lateral (sidebar) al pasar el mouse por encima.
Eliminar algunos atributos de las listas generadas con wp_list_categories y wp_list_pages
Poner múltiples columnas en tus posts y páginas del blog

Aquí puedes ver los códigos para estos trucos.

Otros artículos relacionados

Estadísticas gratis para tu sitio o blog y con opciones SEO

Carlos Leopoldo — Fri, 14 Aug 2009 06:21:50 +0000

Si estas buscando un servicio gratuito para llevar las estadísticas de acceso y comportamiento de los usuarios de tu sitio web o blog existe un servicio muy bueno que descubrí en Web resources depot que se llama GoingUp! registra toda actividad y te muestra atractivos informes con gráficas, mapas de calor (Heatmaps), banderas, etc.

Pero además de todo esto las herramientas SEO que tiene el servicio son:

Monitoreo de enlaces entrantes
Registro del PageRank de Google
Registro del ranking en Alexa
Investigación de palabras clave
Registro del posicionamiento de palabras clave
Herramienta para optimizar la página
Herramienta para analizar la densidad de palabras clave

Enlace al sitio GoingUp!.

Otros artículos relacionados

Prácticas recomendadas para cambiar la dirección de un sitio web

Carlos Leopoldo — Fri, 24 Jul 2009 00:43:05 +0000

Si necesitas cambiar el dominio de tu sitio web actual por alguna razón cómo un cambio de marca (rebranding) o simplemente porque ya no te gusta el domino que usas, lo puedes hacer sin problemas, de hecho hace un tiempo había publicado un artículo sobre como cambiar el dominio sin perder visitas ni posicionamiento,pero ahora me encuentro con un artículo del Blog para Webamsters de Google donde nos dan otros muy buenos consejos con las prácticas recomendadas para mover tu sitio, aquí tienes un pequeño resumen:

Realiza una prueba moviendo el contenido de un directorio o subdominio. A continuación, utiliza una redirección 301.
Una vez completado este paso, comprueba que las páginas del sitio nuevo aparecen en los resultados de búsqueda de Google. Cuando creas que todo funciona correctamente, puedes realizar el cambio en el sitio entero.
Si cambias tu sitio por cuestiones de rebranding o rediseño, es posible que quieras hacer este proceso en dos fases: en primer lugar, mover el sitio, y en segundo lugar, lanzar el nuevo diseño.
Comprueba los enlaces internos y externos hacia páginas de tu sitio. Idealmente, deberías ponerte en contacto con el webmaster de cada uno de los sitios que te enlazan para pedirles que actualicen los enlaces.
Para evitar cualquier confusión, es mejor mantener tu sitio antiguo durante al menos otros 180 días.
Añade tu nuevo sitio a tu cuenta de las Herramientas para webmasters y verifícalo. A continuación, crea y envía un sitemap con las URL de tu nuevo sitio.
Por último, mantén verificados ambos sitios en las Herramientas para webmasters, y revisa regularmente los errores de rastreo

Leer más sobre¿Vas a mover tu sitio? Prácticas recomendadas.

Otros artículos relacionados

XHTML 2 se ha cancelado, pero no debería ser así

Carlos Leopoldo — Sat, 18 Jul 2009 23:02:08 +0000

Recientemente he leído en varios blogs la noticia sobre la cancelación de seguir desarrollando el XHTML 2 a favor del HTML 5, pero hoy leyendo en Realidad Aparte una reflexión sobre el fin de XHTML 2 con la cual estoy totalmente de acuerdo, pues no deben de cantar victoria quienes apoyan el HTML pues la web es lo que es ahora gracias al principio del XHTML de la separación de contenido, diseño y funcionalidad.

En fin sólo quería expresar mi opinión sobre esto pues desde que conocí el XHTML me pareció fantástico que todo fuera ordenado y semántico y no cómo el HTML que siempre ha estado lleno de caos.

Puedes leer este interesante artículo de Zeldman llamado “In defense of web developers” y estas preguntas y respuestas de la W3C sobre la cancelación del XHTML 2.