Archive for the ‘ Diseño ’ Category

2
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…

0
27
Dec

Estilo CSS azulado para Google Reader con Stylish

Esto ya tiene unos días, pero creo que puede interesar. Para los que usen Google Reader para leer sus feeeds, se habrán dado cuenta que cambiaron hace relativamente poco su diseño. Generalmente me gustó el cambio, pero lo encontraba todo muy blanco, incluso molestaba a veces. Conociendo las grandes cualidades de Stytilish, pues enseguida busqué un estilo visual nuevo. Encontré este:

*New* Google Reader (12/05/08) Tweaks

G.Reader con Stylish

Ala, a disfrutar.

1
27
Nov

Tip en Fireworks para resaltar elementos o partes de una imagen

Es algo que es bastante simple y que uso bastante, así que voy a explicar como hacerlo en un plis.

Primero escogemos una imagen en la que haya una parte que nos interesa resaltar respecto a lo demás:

Yo escogí esta:
QDB 100 Quotes

Read the rest of this entry »

2
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”.

0
2
Nov

Conferencias "Adobe en Vivo!" por GarageFlash

Logo Adobe en vivo!

Con motivo de su segundo aniversario, GarageFlash ha preparado unas conferencias con Expositores Internacionales de mucho renombre, que pintan bastante interesantes. Son totalmente gratuitas, pero desgraciadamente tienen acto en Lima, Perú.

Para los interesados, aquí hay un listado de los temas a tratar:

Realmente pintan muy suculentas, hay que aprovechar. Por si fuera poco, además de todo eso hay talleres que durarán 5 días, dictados por algunos expositores. Para asistir a la conferencia solo te tienes que registrar en la web del evento.

Felicidades a Garage Flash!, sigan así!

8
14
Oct

Crossroads: Pluguin de flickr para WordPress con Lightbox

Andaba yo buscando un plugin que me permitiera subir imágenes a flickr desde WordPress, pero me encontré con este otro: Crossroads.

Crossroads. Dibujé esta cosa porque me aburría.

Este plugin nos permite mostrar imágenes o álbumes alojados en flickr en nuestro blog. Las imágenes son dispuestas en los posts con elegancia, en forma de imágenes pequeñas y rodeadas por un pequeño y estético borde azul. Al clicar en ellas, se activa el Lightbox, que nos permite ir adelante o atrás sin tener que salir de él.

Modo de uso

Hay básicamente dos formas de usar el plugin:

  1. Directamente con una imagen:
  2. <!-- flickrimage: 2879655006 -->

    Donde el número ese es el correspondiente de la URL de la foto de flickr:
    http://www.flickr.com/photos/bleend/2879655006/

  3. Si queremos también podemos enlazar a un álbum (set) de fotos:
  4. <!-- flickrset: 72157607434007233 -->

    Donde el número ese es el correspondiente de la URL del set de flickr:
    http://www.flickr.com/photos/bleend/sets/72157607434007233/

Personalización

Como extra, comentar que tienes tres tipos distintos de galería que puedes escoger en las opciones de configuración del plugin:

Personalización de Galería en Crossroads para WordPress

Un par de problemas

  1. Un fallo que le veo al plugin, es que no puedes poner ambas opciones en el mismo post. Lo cual le hacer perder bastantes puntos.
  2. Y el otro fallo, (de menor importancia, creo yo) es que la galería aparece siempre al final del post, independientemente de donde coloques el código.

Descarga

Descargar Crossroads (enlace directo) , de la página web oficial de Crosroads

Separador

Read the rest of this entry »

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.

9
17
Sep

Stytlish a saco para Gmail, Redesigned 2.0

Para los que no saben que es Stylish: Se trata de una extensión (Add-on) para Firefox, su función es sencilla: Permite añadir reglas CSS para la página que estás viendo y guardarlas (user styles) para que se muestren siempre que la visites. Con eso puedes lograr cambiar la apariencia/funcionalidad/usabilidad de una web en concreto.

Hay un sitio web llmado userstyles.org donde muchos usuarios ponen “user styles” para páginas conocidas donde han modificado el CSS usando este Add-on y lo comparten con todo el mundo.

En este post hago una pequeña recolección de unos UserStyles aplicados a Gmail que sin cambiarlo demasiado del original (reconzocamoslo, a todos nos gusta mucho Gmail tal y como es) lo mejoran en algunos aspectos.

Vale, mientras escribía esto, me he encontrado con una cosa que me ha dejado con la boca abierta:

Gmail Redesigned 2.0

Primera Captura

Segunda Captura

Tercera Captura3

En cierta forma guarda parecido con hotmail. ( :???: ). Pero no por eso deja de ser un gran trabajo de CSS.

Además, incorpora una serie de mejoras, como por ejemplo, en los emails que contienen archivos adjuntos de extensión conocida, les asigna un icono pequeñito (usa los mismos iconos del SO) en vez del clip típico de Gmail:

Cuarta Captura

► Añadirlo a tu Firefox
Gmail Redesigned 2.0 Aquí encontrarás el Código que debes añadir a stylish.

Por cierto, cada un cierto tiempo, busquen actualizaciones del CSS este, puesto que parece ser que lo actualizan bastante.

PD: Un Userstyle de MacOS X Para Google Reader. Hay algunos fallos, pero es funcional.

Update: Como pidieron en los comentarios, dejo una copia del CSS en el día 17-09-2008