Posts Tagged ‘ Diseño ’

1
14
Jan

Moto Design

Echad un vistazo a esta gran imagen de una moto extrañamente familiar a la de la película de TRON:Legacy. Ir en moto es un hobby muy popular para mucha gente. Les ofrece la descarga de adrenalina que puede obtener de juegos como PartyPoker Español, y pueden sentir el viento en su cabello y en la parte superior de todo su cuerpo. Se trata de una manera grande y rápida de desplazarse. Definitivamente, hay una cierta imagen que se asocia con aquellos que andan en moto.

Hay un montón de motos en el mercado. Se puede encontrar una gran variación entre todos ellas. Algunas parecen realmente de lujo, otras no se ven tan elegantes, pero puede ir muy rápido. Como se puede ver esta moto es realmente muy impresionante. Se ve casi como algo del futuro. Aunque el diseño no es muy eficiente, los colores molan que te cagas. Para fondo de Escritorio va bien, como moto para conducir, no estoy seguro que alguien vaya a querer esto…

Moto Design

Nota: Si quieres más, pásate por la categoría de Wallpapers.

3
12
Dec

Resaltar los tweets propios de twitter usando Stylish

Stylish es una extensión de Firefox que permite cambiar el aspecto aspecto de las pagina web cuando las visitas mediante el uso de CSS.

Escribe esto en un nuevo estilo:

Stylish

@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document domain("twitter.com") {
#home .mine{
background-color: #333 !important;
-moz-border-radius:10px;
}
}

#333 lo cambias por el color que prefieras.
Puedes cambiar el color del texto añadiendo esto: color: white !important;

Y obtienes esto:

twitter

Lo intenté con los replies, pero twitter no tiene una clase especial en esos tweets que los distinga de los demás (como si pasa con los tweets que escribe uno mismo).

  • Tweet propio:
    <li class="hentry u-Bleend mine status" id="status_xxx">
  • Tweet de alguien (en este caso Pley):
    <li class="hentry u-Pley status" id="status_xxx">

Ambos son “hentry“, “status“, cada uno tiene el autor propio como clase “u-Bleend” o “u-Pley“, pero solo el propio teine el “mine“.

0
27
Dec

Mis propuestas para el Header de Love4Clab

En Cristalab han organizado un “concurso” para que se diseñe un nuevo logo para la página filial de Love4Clab. Estas son mis propuestas.

Prop 1
Prop 2
Prop 3
Prop 4
Prop 5

De todas las propuestas presentadas hasta ahora, creo que la que más lo ha conseguido es esta. Creo que el tío lo ha logrado. Claro que tampoco hay mucha competencia…

2
12
Dec

WordPress 2.7 trae un importante cambio en la interfaz administrativa y soporte para G.Gears

Hoy ha salido disponible al publico WordPress 2.7. Siempre soy un poco reaccio a actualizar mi versión de WorPress, en el pasado tuve una muy mala experiencia con unos problemas en la codificación que hizo volar todas las “ñ”, acentos y caracteres “no simples”. Aun con eso, siempre acabo actualizando, pues se que se cubren fallos de seguridad importantes y traen muchas novedades.

Esta versión de WP, mola mucho, por decirlo claro. Estoy algo abrumado con algunas interesantes cosas que han puesto. Destaco algunas que me que notado:

  • Han rediseñado el panel administrativo, para mi ha ganado mucho, colores más vistosos, botones con aspecto de botón (degradados).
  • Se puede acceder a los submenús de forma más directa, no hace falta ir a la pagina en cuestión y seleccionar la pestaña.
  • Algo que me ha gustado mucho, mucho es que te permite ordenar como quieras el Dashboard y ocultar los paneles que quieras (Sí, incluidos los de Noticias de WordPress). Los elementos los dispones arrastrando los paneles con un Drag&Drop, muy c00l.
  • Pero no solo los paneles del Dashboard se pueden reubicar, cuando escribimos/editamos posts, todos los paneles se pueden reubicar (al menos los que son nativos de WordPress).
  • En el DashBoard han añadido un panel para publicar entradas de forma rápida, es un mini creador de posts.

Capturas

Antes:

WP2.7

Después:

WP2.7_2

Escribiendo un post:

WP2.7_3

WordPress 2.7 soporta Gears

Esta es una gran novedad supongo, aparece arriba de todo a la derecha en todo momento, justo al lado del logout. Personalmente no he tenido la posibilidad de trabajar con Gears antes. Ahora lo he instalado, veremos que tal va:

WP2.7_4

Gears

Esto de WordPress, cada día me sorprende más. Parece de ciencia ficción. Veremos como evoluciona en próximas versiones… :o

0
24
Nov

Action Script es un muy buen programa para diseñar

Hoy me encontré este folleto en mi buzón (uno de tantos que meten en plan spam):

Action Script Design , folleto informativo

WTF adicional porque no dan clases en Castellano pero sí en chino. :roll:

3
19
Nov

Hacer un texto curvado con Firewokrs y trazados

Bueno, este tip es realmente sencillo, es solo para descubrirles una sencilla función que quizás desconozcan, pues aunque uso bastante Fireworks, hasta no hace tanto que no me había dado cuenta de ella. Se trata de la función “Unir al trazado“. Esta función es solo para texto, y permite que un texto se vuelva curvo, siguiendo el perfil y la forma de un trazado previamente dibujado. Como es difícil explicarlo y mucho mas fácil mostrarlo, hagamos un ejemplo y se lo voy describiendo sobre la marcha:

Ejemplo de uso y sus características:

En este caso partimos de una imagen sencilla como es esta:

Imagen 1 del tip

Luego dibujamos un trazado usando la herramienta Pluma (P). No importa el grosor, el color o el estilo de trazado, solamente el recorrido que este describe. Un trazado podría ser esta curva, por ejemplo:

Imagen 2 del tip

A continuación insertamos el texto que destinaremos a que siga el trazado dibujado antes:

Imagen 3 del tip

Bien, sencillo hasta aquí. Ahora es cuando viene lo esencial:
Seleccionamos al mismo tiempo el trazado y el texto:

Imagen 4 del tip

Estando ambos seleccionados, nos dirigimos al menú “Texto” y hacemos clic en “Unir al trazado (Ctrl+Mayús+Y)”:

Imagen 5 del tip

Inmediatamente se hace la magia y el texto se pone donde estaba el trazado, siguiendo su forma. Del mismo modo, el trazado original desparece. Digamos que es como en flash, una guía, y como tal no se ve. Este proceso, hace que el texto se posicione encima del trazado y siga sus curvas y recorrido. La gracia de todo esto, es que el susodicho texto se mantiene como texto editable, con todas sus propiedades modificables sin problema alguno. Y esto mola.

Imagen 6 del tip

Procedamos a arreglar un poco la presentación, y así de paso les muestro algunas cosillas mas:
Observamos que ahora el texto se queda pequeño, puesto que está inclinado, ahora tiene más espacio. Lo hacemos mas grande cambiando el tamaño de la fuente en el panel Propiedades:

Imagen 7 del tip

Para no concluir el tip aquí, haremos unos retoques de más para que veáis algunas opciones más y como afectan al texto en cuestión:

Por ejemplo, copiamos el texto y lo pegamos un poco más abajo, de la siguiente forma:

Imagen 8 del tip

A continuación, teniendo seleccionado el segundo texto que acabamos de pegar, nos dirigimos al menú “Texto” y hacemos clic en la opción “Separar del trazado”:

Imagen 9 del tip

Una vez esto, lo que sucede es que volvemos a tener el trazado y el texto originales:

Imagen 10 del tip

Por ahora el texto no nos interesa, así que lo eliminamos. Vamos a centrarnos en el trazado: Lo retocamos un poco, le definimos un bonito estilo de linea y le damos un grosor apropiado mediante el panel propiedades:

Imagen 11 del tip

Ya tenemos una sencilla y clara imagen:

Imagen 12 del tip

De todas formas, veamos unas cuantas más opciones para poder estilizar el texto curvado de distintas formas. En el mismo menú de “Texto”, teniendo el texto curvado seleccionado, podemos variar su “Orientación” como sigue en las imágenes:
(La primera opción es la opción por defecto, es la mostrada en las imagen anterior)

Imagen 13 del tip
Imagen 14 del tip
Imagen 15 del tip

Bueno, hasta aquí el tip. Solamente déjenme enseñarles otro ejemplo, quizás algo más artístico y sofisticado. A la izquierda pueden observar el resultado, mientras que a la derecha pueden ver los trazados originales de la imagen:

Copa con letras de agua y trazados

No es nada complicado, solo hace falta echarle un poco de imaginación y tener buen gusto!
Espero les sea de ayuda en sus diseños/presentaciones! ;)

4
16
Nov

Windows Live Hotmail rediseñado con Stylish (CleanUp)

Aunque uso Gmail, también tengo una cuenta de correo de Hotmail. Hoy vi que han sacado una versión del cliente web de correo mejor y más simplista. Es una mejora importante, carga mucho más rápido y es todo algo más accesible.

Yo aún lo he mejorado más, o eso creo haber echo. Veamos como en unas imágenes:

Antes

Haz clic para ampliar

Hotmail noRedesigned por Bleend, en Flickr

Después

Haz clic para ampliar

Hotmail Redesigned por Bleend, en Flickr

Cambios realizados:

  • He eliminado la publicidad
  • He eliminado la caja de “búsqueda en web”
  • He eliminado botones inútiles en el menú izquierdo (“Hoy”,”Calendario”,…)
  • Re-colocación del perfil de usuario encima del menú izquierdo
  • Coloreado de bordes y fondo de los menús
  • Bordeado el menú de acciones superior de los emails
  • Ocultación de la palabra “HOTMAIL” en negrita y de tamaño enorme
  • En general se gana mucho más espacio
  • Eliminada la imagen de publicidad del antivirus Trend, al recibir y enviar mensajes.
  • Re-diseñada la cabecera de los email (Datos de envio) para facilitar su lectura.
  • Resaltados con una caja azul los archivos adjuntos.

Detalle:

Haz clic para ampliar

Hotmail Redesigned Detail por Bleend

Todo este rediseño, se ha programado en CSS, para Stylish. Stylish es una extensión de Firefox que permite hacer esto en las paginas web, y cambiar su aspecto cuando las visitas. (Yo lo uso mucho, tengo personalizadas muchas páginas que visito regularmente. Entre otras cosas sirve para poder ocultar contenidos como publicidad :P ) Si quieres poder tener este aspecto en tu correo Hotmail tienes que usar Stylish y añadir ese código.

Nota: Esto no sirve para el Internet Explorer. Internet Explorer apesta.

Este es el código:


@namespace url(http://www.w3.org/1999/xhtml);
/*
Descripción: Código de Rediseñado para la nueva versión de Hotmail
Autor: Pau de Anguera (Bleend)
URL: http://blog.bleend.net/windows-live-hotmail-redisenado-con-stylish-cleanup/
*/

@-moz-document domain("mail.live.com") {

.AdBannerContainer,.ProductNameContainer,.Bottom,#c_search,.AntiVirus,.ScanLogo{
display:none !important;
height:0px !important;
}
.EmailName{
text-align: center !important;
font-size: 0.9em !important;
}
#c_me{
z-index:100 !important;
position:absolute !important;
top:55px !important;
left:10px !important;
float:left !important;
height:50px !important;
width:180px !important;
background:#F3F7FD !important;
border:1px solid #BBD8FB !important;
}
#c_melink{
margin-top:6px !important;
float:right !important;
}
#c_is {
font-weight:bold !important;
}
#c_signout{
position:absolute !important;
margin-right:-33px !important;
margin-top: -3px !important;
}
#folderListContainer {
margin-top:5px !important;
}
#contentLeft {
width: 180px !important;
background:#F3F7FD !important;
margin-top:30px !important;
border:1px solid #BBD8FB !important;
}
#Middle{
left:10px !important;
}
#toolbarContainer{
border: 1px solid #A6D2FF !important;
border-bottom: none !important;
width:99.6% !important;
}
.NonThemedLinkContainer{
border: 1px solid #A6D2FF !important;
background:#F3F7FD !important;
}
.SenderSafetyMsg,.SenderSafetyLinks{
font-size:0.8em !important;
border-top-width: 1px !important;
border-right-width: 0px !important;
border-bottom-width: 1px !important;
border-left-width: 0px !important;
border-top-style: solid !important;
border-right-style: solid !important;
border-bottom-style: solid !important;
border-left-style: solid !important;
border-top-color: #CCC !important;
border-right-color: #CCC !important;
border-bottom-color: #CCC !important;
border-left-color: #CCC !important;
}
.SecondaryTextColor{
width:20% !important;
}
}


He de decir que no soy muy diestro en CSS, así que si el código no es muy limpio, pido mis disculpas; pero en mi defensa diré que funciona y estoy orgulloso de él.

Nota: Si alguien tiene algo que aportar, ideas, sugerencias o ha mejorado esta versión, agradecería que me lo dijeran :wink:

Licencia: Código bajo la Licencia Creative Commons “by-nc”.

4
12
Oct

Nuevo Theme: Experimental+Rin+Water

Como habrán notado, hay tema nuevo para el Blog. Bien, este fue el resultado de que estaba hasta las narices del tema anterior, ya que en realidad estaba pensado para WordPress 1. Estaba más parcheado que una cámara de bici después de pasar por un desierto de cactus.

No tenía ni widges ni tags, ni subcategorías, ni siquiera un ancho estándar.

Me vía obligado a redimensionar todas la imágenes manualmente a 470px de ancho para que en la portada no se salieran por los lados. Lo cual me jodía mucho porque flickr lo hace automáticamente, pero a 500px, con lo cual no me servía. Ahora ya sí.

He tardado mucho en cambiarlo por la sencilla razón de que me encantaba el que tenía y no encontraba un digno sustituto: Rin:

rin

Encontré uno, el Experimental, pero no me gustaba para nada el sidebar; tenía problemas con las listas y las imágenes vinculadas. Y además dividía el header en dos para mostrar un cuadro de búsqueda.

experimental

Hoy me puse a buscar más candidatos. Encontré el tema Water, que era lo que buscaba pero con el diseño erróneo.

water

¿Que podía hacer? Pues agarré lo que me gustaba de cada uno de ellos y lo junté en un tema modificado a partir del Water. Obteniendo este resultado, que -debo añadir- me ha quedado mucho mejor de lo que cabía esperar. Estoy contento con él. Sí. Además tiene el Gravatar de serie.

Aún me faltan cosillas para implementar. Por ejemplo, los emoticonos en los comentarios, algunas cosillas del sidebar (lo que antes ponía blog stuff) y por último los bloques de adsense (aunque esto no es una prioridad, es públicamente sabido que este blog no da ni un céntimo de euro. Apenas paso de 10€ en todo el tiempo que llevo con él…).

Bueno, aprecio sus comentario, como siempre.

2
30
Jun

Análisis constructivo de Love4Clab

Love4Clab header

Hoy criticaremos de la mejor forma posible a una web, siempre procurando ser constructivos. La página designada por el dedo divino en este caso ha sido Love4Clab.

Si no la conoces, te invito a dar clic en el enlace anterior y descifrar lo que es. Bien, el usuario medio llega a la conclusión de que se trata de una red social; el problema radica en que eso se descifra solamente al leer el texto ese pequeñito situado debajo del header. No es malo, pero es poco intuitivo, la red social se genera porque los usuarios interactuan con ella y generan su contenido. Sin ellos no hay red social, por ende, una web que pretende ser eso, debe invitar al visitante a que participe.

De todas formas, ¿quien ha dicho que esto vaya a ser una red social?

Otro de los problemas de L4C, es que parte de una base en que no se tiene claro su objetivo ni finalidad, es decir, ¿exactamente para que se creó L4C? Según tengo entendido, todo vino de una acalorada y falsa discusión entre Hernan y Freddie, los administradores de cristalab. En dicha charla, ambos mencionaban que solo tenían un punto en común, y que era la única forma de salvarse ambos de la muerte, la única forma de mejorar el mundo y elevarnos a todos a una existencia superior… etc.

Ese “punto en común” eran unas siglas misteriosas y desconocidas, lo llamaron “L4C”. Según creo, en el momento de citarlas, no tenían ningún significado, por mucho que los creadores de ellas se empeñaran en que sí lo tenían, pero que era “secreto” (así daban misterio al asunto y ponían a los clabers ansiosos). De todas formas, desconozco realmente lo que sucedió detrás del telón y solo puedo dar mi visión y deducciones de la historia.

La cosa es que se creó un bulo tan grande, con esas siglas, que (creo) los admins se vieron obligados a hacer algo con ellas. De ahí surgió Love4Clab, algo que querían que estuviera relacionado de alguna forma con lo llamado “departamento del amor de cristalab”. Imagino que de ahí viene su diseño rosa.

Continuaremos partiendo de la idea que busca ser una red social “privada”, es decir, para los clabers. Puesto que aunque el registro está abierto a cualquiera, es difícil que alguien se registre en un sitio que desconoce para usarlo como “red social” si no invita a su participación ni hay nada realmente atractivo en el sitio en sí. Las redes sociales, crecen por “las invitaciones de los usuarios de la misma hacia los forasteros de ella. Para que un visitante recién llegado vaya a participar, hay que darle algo que lo divierta. Subir fotos puede no ser suficiente.

Hay que buscar ideas para potenciar el sitio (Si es que realmente se busca lograr eso, claro, no está claro si se quiere potenciar L4C como red social…) Por ejemplo, una forma de llamar la atención al usuario puede ser: Si sabemos que el sitio es de fotos, se podrían crear “categorías” o grupos de fotos, que atrajeran a los visitantes, tales como fotos de humor, graciosas, o curiosas. (¿FAILS, lolcats o lo que sea?).

Bien, en cuanto a arquitectura del sitio:
A la portada le faltan cosas y habría que cambiar otras; fíjense en esto:

Menu 2 de Love 4 Clab

Es viejo. El concurso ese ya pasó. La idea de un concurso es buena, muy buena, pero si ya ha pasado, no lo dejemos ahí para que le salgan raíces. Ni siquiera existe una página para los eventos, usan el foro de cristalab como tal. No se si la intención es que sea una sub-pagina de cristalab, ¿una forma de sustituir el viejo premio de “secretos”? ¿Se pretende usar L4C como plataforma de concursos?
Si es así, pues no digo nada, pero si se pretende hacer una web autónoma y mínimamente independiente, hay que arreglar eso ASAP.

Segundo, y esto es un detalle sin importancia pero que salta a la vista:

Statusbar

Es una cosa c00l en las pestañas y el titulo, pero habría que hacer algo en la barra de inicio, no se muestra correcto. Personalmente no se como hacerlo. ¿Es mejor tenerlo a medias o debe quitarse? Eso no lo tengo claro.

Luego, yo añadiría algunas cosillas en el home, por ejemplo una pequeña lista con algunas de estas cosas:

  • Fotos más comentadas
  • fotos más vistas
  • fotos ganadoras de algún concurso
  • fotos participantes de algún concurso
  • Ultimas fotos comentadas
  • ultimas fotos subidas
  • etc..

Creo que sería un buen reclamo para visitar la web regularmente, obtener cierta información de los cambios en ella y de una visión global de la misma.

Luego hay algo que se echa realmente en falta: Avisos por email. Eso es un factor clave que no debe de olvidarse. Si alguien deja un comentario en una foto tuya, recibir cierto aviso. Si ha aparecido un nuevo concurso, recibir un aviso. Si algo tienen las redes sociales, es que te avisan por email de hasta cuando tus “followers” van al baño.
Ya puestos, que tan mal estaría un sistema RSS y/o mail para seguir a un usuario y saber cuando publica fotos nuevas?

Algunas cosas que añadiría:

  • Una opción (a discreción del usuario en cada foto) de que se guardara la imagen en tamaño original a demás del tamaño escalado al subir fotos
  • Un uploader multiple de fotos. Normalmente no es necesario, pero si alguien desea subir muchas, sería algo increíblemente útil.

En el header, habría que corregir el botón con el enlace de “Blog” y cambiarlo por el botón de “Tia Xime”, puesto que es donde lleva en realidad (Hagan clic ahí para entenderme). Luego está también que el botón de “enviar” que hay para los comentarios, este botón tiene un efecto de onrollover, pero la imagen del estado over, no la carga hasta que se pasa el ratón por encima, por lo que por unos instantes, el botón desaparece, algo incómodo.

Por lo general acaba ahí mi critica, el diseño me parece acertado; en el ámbito de “love” está claro que no hay otro color.

Separador

Este post es para la prueba 5 de la BC