Modificar una plantilla o theme es uno de los primeros retos de quienes inician un blog. Para hacerlo, nada nos libra de aprender lo básico de HTML y CSS, pero hay herramientas que pueden hacerlo más sencillo como Firebug, la extensión para Firefox y en versión Lite, para Chrome.

Una de las herramientas más simples, pero también más útiles de Firebug es Inspeccionar, como su nombre lo indica, permite navegar por cada elemento de un sitio web y conocer como esta configurado y como esta relacionado con otros elementos. Esta es la herramienta que puede ayudar a cualquiera a modificar una plantilla, sea Blogger o WordPress, sin mucha dificultad.

Esta pequeña guía se enfocará básicamente en modificar el CSS para adaptar un diseño a nuestras necesidades. En Blogger el CSS esta dentro de la misma plantilla, entre los códigos <b:skin> y </b:skin> y en WordPress en el archivo style.css en la carpeta del theme activo.

Modificar el CSS de un elemento con Firebug.

Para modificar cualquier característica de un elemento de una plantilla simplemente hay que:

1. Instala Firebug en tu navegador: Firefox o Chrome. Personalmente yo recomiendo usar la de Firefox, es más completa y rápida, pero a ambas aplica el contenido de este tutorial.

2. Dar clic en el botón de Firebug en la barra de herramientas , luego en el botón de Inspeccionar  y ubicar el cursor justo sobre el elemento a modificar, puede ser texto, imagen, video, flash o cualquier elemento, y dar clic en él.

3. En el cuadro de la derecha de Firebug, estando la pestaña “Estilo” activa, se muestran todos los estilos que afectan al elemento.

Se muestran tal como los tendríamos en una hoja de estilos CSS, sin embargo, Firebug ordena las propiedades alfabéticamente y las estandariza.

Es fácil reconocer las siguiente información: selectores, propiedades y la ubicación de dicho estilo (línea de código y archivo que lo contiene).

Aquellas propiedades que aparezcan con un tachado, implica que otra reglas CSS las ha sobrescrito y que por lo tanto no están siendo aplicadas.

4. Pruebas en vivo.

Algo muy interesante de Firebug es que puedes modificar cualquier propiedad CSS y ver los resultados directamente aplicados sobre la página. Para ello solo es necesario dar clic sobre la propiedad o valor para cambiarlo, y ver directamente que pasa en la página.

Para las propiedades que solo pueden tomar valores predeterminados, Firebug permite explorarlos con solo dar clic en el valor y usar las teclas de arriba y abajo del teclado.

Y muy similar para los valores numéricos:

Otra opción muy útil es la de desactivar propiedades para saber como se comporta un elemento sin ellos, basta dar clic en el circulo rojo a la izquierda de cada propiedad.

Encontrar la imagen de fondo de un elemento también es útil cuando se esta modificando una plantilla, para ello solo hay que colocarse sobre el elemento, dar clic y en el panel de “Estilo”, aparecerá el selector que contiene la imagen, normalmente en la propiedad background o background-image.

Y hay otras varias herramientas que pueden ver directamente en el manual oficial.

5. Usando los datos de las pruebas.

Una vez que sabes haz llegado al resultado deseado en las pruebas, es necesario aplicar esos mismo cambios a los estilos en tu plantilla. Firebug nunca guarda cambios, esta parte debes hacerla tu manualmente.

En otras palabras, si haz agregado una propiedad en Firebug, debes agregar esa misma propiedad a tu hoja de estilos; si haz hecho una modificación, esta debe hacerse también en los estilos de la plantilla.

Screencast

Con esta introducción, pueden ver Firebug en acción en el screencast de introducción.

Conclusión

Firebug es una herramienta muy intuitiva, así que algunas recomendaciones: Prueben y prueben, se aprende bastante de CSS y de la propia herramienta, pero sin riesgo de afectar nuestro código. Lean la guía oficial, donde se pueden aprender a sacar más provecho de la extensión. Y por último, aprendan al menos lo básico de CSS y HTML, hará cualquier tarea de diseño menos frustrante.

Solución

En Web Designer Wall plantean una solución con jQuery y usando border-radius (ver demostración). La solución consiste en agregar el siguiente script al header de la página:

<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){

  $(".rounded-img, .rounded-img2").load(function() {
    $(this).wrap(function(){
      return '<span class="' + $(this).attr('class') + '" style="background:url(' + $(this).attr('src') + ') no-repeat center center; width: ' + $(this).width() + 'px; height: ' + $(this).height() + 'px;" />';
    });
    $(this).css("opacity","0");
  });

});
</script>

Y a cada imagen en la que se desea el efecto de esquinas redondeadas se le agrega la clase: rounded-img o rounded-img2. Ejemplo:

<img src="images/blogandweb.png" class="rounded-img" alt="Blog and Web" />

Y por último, se definen estas clases CSS en el header del documento o el archivo de estilos:

.rounded-img {
	display: inline-block;
	border: solid 1px #000;
	overflow: hidden;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
	-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
	box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}
.rounded-img2 {
	display: inline-block;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	-webkit-box-shadow: inset 0 1px 5px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .9), 0 -1px 0 rgba(0, 0, 0, .6);
	-moz-box-shadow: inset 0 1px 5px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .9), 0 -1px 0 rgba(0, 0, 0, .6);
	box-shadow: inset 0 1px 5px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .9), 0 -1px 0 rgba(0, 0, 0, .6);
}

Explicación

La propiedad border-radius no puede actuar cuando el elemento al que se aplica contiene una imagen, sin embargo, funciona correctamente cuando el elemento tiene a esa imagen como fondo.

El script oculta la imagen (con opacity:0) y la envuelve con un elemento <span> que tiene a la misma imagen como fondo.

Conclusión

Una solución bastante práctica y útil principalmente en cabeceras de sitios web, pero aplicable a cualquier imagen. Lo cierto es que esto es un bug, que los navegadores tendrán que arreglar en sus versiones siguientes.

HTML 5 Rocks tiene desde una introducción a las bondades de HTML 5, hasta tutoriales paso a paso y un editor de código en línea para empezar a experimentar con esta nueva versión del estándar.

Algunos de los tutoriales que hay desde ahora son:

• Introducción a Chrome Developer Tools.
• Prácticas recomendadas para hacer una aplicación HTML 5 más rápida.
• Guía para principiantes para usar la aplicación de cache.
• Guía rápida para implementar la etiqueta de audio de HTML 5.
• Uso de la API de notificaciones.

Y varios ejemplos prácticos de otras funciones de HTML 5.

Una última sección de recursos muestra un pequeño directorio con herramientas y documentación sobre HTML 5 y CSS 3.

Recordar que Apple ha hecho un gesto similar, pero con el pequeño detalle de que obliga a descargar Safari, algo que por otra parte, no es de extrañar en la filosofía de esta empresa.

Tanto HTML 5 y CSS 3 no son tecnologías realmente nuevas, lo novedoso es todo el empuje que estas grandes multinacionales les están dando desde hace un tiempo y que, indirectamente, ayuda a la evolución de la web.

Sitio: HTML 5

Si haz creado una página en facebook para tu blog como forma alternativa de suscripción, quizá también te interese mostrar en tu blog la cantidad de fans que esta tiene y así, alentar a más personas a suscribirse.

¿De que sirve tener el número de fans en texto plano? Por que es mucho más flexible para adaptar y personalizar al diseño de tu blog que los widgets que ofrece Facebook. El objetivo final es hacer más atractiva la suscripción a la página en Facebook de tu blog.

Para obtener el número de fans de una página en Facebook es necesario recurrir a su API y obtener algunos datos de manera sencilla:

1. Con tu cuenta Facebook entra a la aplicación de Desarrollador. (Si no tienes cuenta de desarrollador, tal sacar una).

2. Ahora desde el Desarrollador ve al botón "Configurar una nueva aplicación". Le damos un nombre y aceptamos los términos de Facebook. Esto para obtener una Clave API y un número secreto que dan acceso al número de fans. 

Entonces, los datos a usar más adelante son:

3. Ahora es necesario obtener el ID de la página de la fans en Facebook, Para esto solo entramos a la página, y en el enlace de "Editar página" de la barra lateral esta la URL con el ID de la página. Es algo como:

http://www.facebook.com/pages/edit/?id=123456789012

El número del final es el ID y también el último dato necesario para obtener el número de fans.

4. Ahora, para trabajar con estos datos es necesario de hacer uso de la librería facebook.php. Descarga Facebook PHP SDK y coloca el archivo facebook.php en la raíz del directorio donde lo usaras (en WordPress, el directorio del theme).

5. Por último, para mostrar el número de fans, abre el archivo php donde quieres que se muestre (en WordPress podría ser sidebar.php) y pega el siguiente código:

<?php
require_once('facebook.php');
$facebook = new Facebook(array(
    'appId'  => 'ID_de_aplicación',
    'secret' => 'Número_secreto',
    'cookie' => true,
));
$result = $facebook->api(array(
    'method' => 'fql.query',
    'query' => 'select fan_count from page where page_id = ID_de_página;'
));
$fb_fans = $result[0]['fan_count'];
?>

<?php
//Número de fans en texto plano
echo $fb_fans; 

?>

Y reemplaza en el código anterior:

• ID_de_aplicación por el número de ID de la aplicación creada en el paso 2.
• Número_secreto por el número secreto de la aplicación creada en el paso 2.
• ID_de_página por el número de ID de la página de fans visto en el paso 3.

Con esto ya tienes el número de fans en texto plano, al que puedes acompañar con un mensaje estilo "Tenemos 800 fans ¡hazte fan también!" y un link hacia la página de Facebook.

Artículo basado en How to Display Facebook Fan Count in Text de Hongkiat.

Todo desarrollador web da por descontado tener una conexión, sin embargo, siempre hay casos extraordinarios donde no se tiene este acceso y es cuando se valora todo el material de consulta que se tiene en el disco duro.

Para prevenir este "peligro" bien vale la pena tener manuales de consulta offline. Algunos de los que me han sido útiles personalmente son:

• Manual oficial de PHP – Disponible en html y chm en varios idiomas, incluido el español.
• Manual oficial de MySQL – Disponible en html, chm y pdf en varios idiomas, incluido el español.
• Manual CSS – Manual de CSS 2.1 en formato chm (no oficial).
• Manual HTML – Manual de HTML 4.0 en formato chm (no oficial).
• Manual Javascript – Manual de Javascript 1.5 en formato chm (no oficial).
• Manual de jQuery – La documentación oficial de jQuery 1.4 en un archivo chm (no oficial).
• Manual de la W3C – Manual sobre los estándares web en formato chm (no oficial).

Además de manuales, es muy útil contar con libros con una explicación más amplio y de aplicación práctica, para esto, los libros de librosweb.es son una excelente muestra (disponibles en versiones pdf).

Tú ¿Qué libros y manuales tienes para cuando te quedas offline?

Fotografía de Feuillu

Siempre he creído interesante el darle cierta animación a nuestros botones le den un plus gráfico, y hay, desde el enviar de manera automática un mail a alguien que se nos ha añadido en nuestra lista de lectores de nuestro RSS, y quizás un botón animado de agradecimiento puede ser también buena opción.

En esta ocasión haremos un ejercicio para crear un pequeño personaje desde el papel, pasando por Adobe illustrator, hasta llegar a la implementación en HTML y CSS. Al final, te dejamos las imágenes y el código en un archivo para que lo implementes en tu web si así deseas (Ver demo).

Vectores y la ilustración

Los vectores tienen grandes ventajas y las ultimas versiones de illustrator son sorprendentes, nuestro acabados serán muchos más que simples plastas de color.

No voy a negar que tener nociones de básicas de dibujo ayuda a poder hacer ilustraciones, pero definitivamente la web es un compendio muy amplio de imágenes para tomar ideas, para ver diferentes técnicas, para poder empezar nuestros proyectos, el dibujar ayuda, pero las buenas ideas siempre son mejores.

Bocetando y de ahí a illustrator

Empecemos por bocetar nuestro personaje, esto nos ayudara a tener una idea un poco más clara de como empezar. Como comento, puedes tomar ideas de ilustraciones que hayas visto y se te hagan interesantes.

Puedo mencionarles que prefiero hacer esto, bocetar aunque al final muchas veces trazo directo en illustrator pero al menos para mi me da una idea más clara y sé que haré, antes podía pasar horas en la computadora sin tener claro que dibujar y con ello perdía tiempo, unos momentos de boceto terminaron con eso.

Empezaremos con las formas básicas para la cabeza y las orejas, trazaremos tres círculos, juntos para luego aplicar el pathfinder (menu window-pathfinder) y aplicamos el efecto de sumar.

Trazaremos los ojos, dos círculos pequeños de color negro bastarán para hacerlo, colocamos y centramos, y después haremos el cabello.

Ahora solo ponerle color y unir las partes.

Esto solo es una guía, así que ustedes podrán hacer el personaje que quieran yo les muestro dos variantes de niño y niña.

Ahora viene la parte interesante, la sonrisa, la cual será una de las cosas que cambian. Para comenzar haremos la sonrisa con la boca cerrada, un medio circulo será suficiente, para después hacer la sonrisa de la boca abierta. duplicamos nuestro layer o capa con nuestro personaje con sonrisa cerrada y hacemos lo siguiente en el layer duplicado.

Feed rss y strokes de etiqueta.

Haremos nuestro feed RSS que es el pretexto para hacer esta ilustración, lo colocaremos detrás del niño y en la imagen el botón se verá más, y crearemos un efecto de movimiento.

Ahora hagamos el terminado de etiqueta, seleccionemos el personaje, le damos Unite con el pathfider lo rellenamos del color y le damos un stroke o borde para que se rebase la figura, aplicamos lo mismo al botón feed RSS.

Vamos a hacer un pequeño destello en la parte de atrás de nuestro personaje. Creamos un rectángulo vertical y aplicamos el efecto de transform o transformar, (menu effects/Distor & Transform).

Expandimos la forma creada (menu object- eExpand Appearance) le damos Unite con el pathfinder, ajustamos algunas puntas de nuestra figura y añadimos una degradado.

Solo agreguemos un pequeño texto para hacer más obvio nuestro cambio y listo tendríamos por separado en cada layer un archivo así:

Implementación del botón

Desde illustrator de exportan las imágenes, el resultado, dos imágenes un formato de imagen web, por ejemplo PNG8. Para poderlas usar en un hover, ambas deben tener el mismo alto y ancho y estar alineadas vertical y horizontalmente. En otras palabras, que si pones una sobre otra, la silueta de cara coincide.

Hemos unidos después estas dos imágenes en una sola, una sobre otra, para usarlas como sprite CSS:

Para el HTML basta con el siguiente código:

<a href='http://blogandweb.com/feed' class='botonrss'>Feed RSS</a>

El CSS será el encargado de hacer el efecto “hover“, es decir, que al pasar el puntero del mouse por encima se mostrará la segunda figura, dando la sensación de animación.

a.botonrss {
    width:166px;
    height:180px; /* Dimensiones de la imagen */
    text-indent:-9999px;
    overflow:hidden; /* Oculatando el texto del enlace */
    display:block;
    background:url(images/rss-boton.png) no-repeat 0 0; /* Poniendo la imagen como fondo */
}
a.botonrss:hover {
    background: url(images/rss-boton.png) no-repeat 0 -180px; /* Al hacer hover, ponemos la segunda imagen de fondo */
}

Ahora, solo resta ver el botón en funcionamiento.

Implementarlo en Blogger y WordPress

Implementarlo en Blogger y WordPress es bastante sencillo. El código HTML se puede agregar en un widget de HTML en el sidebar y el CSS, en WordPress va en el archivo style.css y en Blogger justo antes del código:

]]></b:skin>

No olvides cambiar la URL por la de tu feed en el HTML y la ruta de la imagen en el CSS.

Descargar

Descargar HTML e imágenes.

Conclusión

En este tutorial vimos como crear un botón “animado” iniciando desde el panel, aunque resulta en algo de trabajo, el resultado generalmente vale la pena.

Igualmente, si te gusto este botón para tu sitio web, descárgalo e impleméntalo. Nosotros lo liberamos bajo licencia Creative Commons, y si nos quieres dar un link por los créditos, te lo agradecemos desde ahora

Por cierto, este es el primer tutorial que hacemos en conjunto, Ulises y Francisco (principalmente el primero), esperamos te haya gustado tanto como a nosotros al escribirlo.

Los videotutoriales parten de cero, así que con el conocimiento básico de html y css podrás seguirlos sin problema. En cada video se explica un poco la teoría del funcionamiento y se dan ejemplos prácticos de uso, lo que los hace bastante efectivos para aprender.

Videotutorial 1. Selectores JQuery.

Videotutorial 2: Filtros de selectores.

Videotutorial 3: Manejo de atributos.

Videotutorial 4: Funciones, manipulación de DOM.

Videotutorial 5: Métodos específicos a eventos.

Y el curso continuará, pueden estar pendientes directamente en el blog de Fernando Yanes. Otro material de mucha ayuda para aprender jQuery es:

• Documentación oficial. (en inglés).
• JQuery ya (en español).
• Chuleta o "acordeón" visual de jQuery.

Es bien sabido por todos nosotros que el color en web es una de las herramientas que debemos de tener en cuanta a la hora de diseñar nuestro sitio, es importante tener ciertas nociones básicas sobre su uso y sus características para así poder crear paletas de colores interesantes y llamativas, recordemos que solo contamos con 9 segundos para poder hacer que nuestro usuarios se interesen en nuestro sitio o salgan de él.

Pero sucede que rara vez somos expertos en un tema bastante complejo, como es el color y sus mezclas, y es que no todos somos diseñadores y no todos debemos de tener too el conocimiento al respecto pero si podemos tener herramientas a nuestro alcance que nos ayuden a crear mezclas interesantes. De esta forma aunque no serás un experto de colores entenderás un poco sobre como mezclar los colores y al final del post te recomendaré herramientas para buscar sin problemas la paleta perfecta para tu sitio web.

Hablemos de colores

Colores primarios: son aquellos que mezclándose logran obtener el color blanco, en este caso son el Rojo, Verde y Azul

Colores secundarios son el resultado de la mezcal de dos primarios, el cyan, el magenta y el Amarillo

Colores Análogos: aquellos que se encuentran cerca de nuestro color, por ejemplo, para el rojo sus colores análogos pueden ser el el naranja y amarillo, o para le violeta o morado lo son el azul y magenta, por lo general estos colores combinan bien pero suelen crear una paleta de colores muy homogénea.

Colores Complementarios: aquellos que en el circulo cromático se encuentra enfrente del otro y son los que causan el mayor contraste entre si, ejemplo: azul- naranja, verde – rojo, amarillo – morado.

Algunas de las propiedades del color

Saturación de color: una propiedad del color que indica la cantidad de pigmento que el color tiene, se aplica sobre todo en pintura cuando se diluyen los colores.

luminosidad o brillo: aunque suele confundirse con saturación la luminosidad tiene que ver con la cantidad de blanco o de negro en nuestro color, en el caso de contener la mayor luminosidad nuestro resultado será casi blanco y de no tener luminosidad nuestro color será casi negro.

Como veras ahora tienes una noción básica sobre el color, recuerda que los colores azules en todas sus variantes se les denominan frios y los colores rojos, naranjas, marrones y amarillos se denominan cálidos, puedes crear una paleta con algunos colores análogos para dar uniformidad y tomar algún complementario que dará contraste y acentos.

Herramientas para hacer mezclas de color automáticas.

¡Ok! Pero ¿Qué pasa si no soy diseñador, se poco sobre el tema y quiero tener una buena combinación de colores en mi web? para esto les recomiendo 4 herramientas que he usado y me han sacado de problemas para crear paletas de color rápidamente.

Color Blender

ColorBlender una web donde a partir de un de un color que escojamos nos arrogara de manera automática, 5 colores para combinar, combinaciones que puedes usar como referencias para tus diseños y tienes la opción de bajar tu paleta para Photoshop, Illustrator o enviarla por mail.

4096 Color Wheel aunque como tal no es una paleta de color si es una gran ayuda ya que al elegir tu color te despliega en formato hexadecimal que color “seguro” es el más cercano y así tendrás la seguridad de que el color que escoges se verá tal cual lo quieres.

Kuler Una creación de Adobe Labs donde tus combinaciones pueden ser subidas y votadas  por otros usuarios, si quizás te parezca ilógico que recomiende esto cuando lo que quieres son paletas de colores a tu alcance, pero también puede bajar las paletas más votadas, y ver las más nuevas, por temáticas, etc. En fin todo un arsenal para que nunca tengas pretexto de no tener paletas de colores actuales y quizás encontrar por medio de otros usuarios otras combinaciones que nunca pasaron pro tu cabeza.

ColorScheme Una de las aplicaciones más completas que he encontrado para hacer combinaciones de colores muy completas, teniendo las herramientas de crear paletas a partir de colores análogos complementarios y las famosas triadas, triadas de cuatro, etc. la web es muy dinámica, es mi favorita

Por último

Espero que esta guía te sirva a comprender un poco más sobre el color, sus características, y sobre todo que las herramientas que te reseñamos te ayuden a hacer que el escoger sea una paleta de color no sea un dolor de cabeza  y si un proceso agradable, si haz usado otras que se te hagan interesantes y útiles ponlas en los comentarios lo ideal es que entre todos tengamos mas alternativas para este tipo de aplicaciones

Cuando nos plantemos la idea de hacer un proyecto web personal, como un blog, uno de los grandes obstáculos al que nos enfrentamos es la regularidad de publicación, al principio cuando empecé a escribir en Maquiladora de Sueños, no me explicaba como hacían otros blogs para al menos tener una noticia diaria.

El escribir en un blog no es mi actividad principal, es mas una pasión, y sé que muchos de los que no leen también están en este caso. Hay días en los que siemplemente tienes mas o menos tiempo para tu blog, más, o menos ganas (como en un trabajo) de hacer las cosas, pero lo mejor es crearte disciplina para lograr ser regular en tus post.

Lo ideal es poder llegar a nivel de productividad con un solo objetivo: que el blogging no interfiera con tus demás actividades o viceversa, puedes tener lo mejor de todo sabiendo administrar tu tiempo y trabajo.

Crea un horario para postear

Lo primero que debes tomar en cuenta es tener un horario para el posteo, pero piensalo de esta forma: tienen un horario para el trabajo, la escuela, para las tareas y hasta para salir con tus amigos, quizás hasta para ir al gimansio, ¿Por qué no dedicarle al menos media hora (tu decide este tiempo) diaria solo a escribir?, buscar información o pensar los temas de tus posts. Quizá no pretendes escribir uno diario pero de poco en poco podrás tener la cantidad que quieres a la semana o al mes.

Lo que regularmente hago es postear por la mañanas y por las noches, sin embargo si tu día es cambiante te sugiero que siempre apartes un tiempo para postear, si creas este hábito lograras producir al menos ideas sobre que tema tratar.

Desconectate de vida online

Se que suena muy contradictorio, pero espero no malinterpretes mi palabras, tener abierto siempre Facebook, Twitter y sus avisos sobre nuevos twitts o actualizaciones te interrumpirán a la hora de querer escribir, un twitt con un link es suficiente para que sin querer este te lleve a otra cosa y un minuto puede convertirse en 10 minutos, si lo multiplicas 20 veces al día saca la cuenta, cuando te dediques a escribir ya buscar información, dedicate solo a ello y tu tiempo invertido será de mejor calidad.

Prioriza tus tareas

Seguramente en un día tienes que contestar mails para moderar comentarios o contestarlos, buscar información, pensar en que escribir, y más aun las actividades de tu trabajo “formal”, definitivamente no puedes hacerlo todo la mismo tiempo (tratar de contestar un mail mientras escribes, o dejar eso para buscar un link que te acaban de mandar con una muy buena nota). Al final harás todo pero en más tiempo debido a las interrupciones.

se dice que tardamos en promedio casi 15 minutos en volver a tomar el ritmo de las cosas después de una interrupción

Por ello ve con tus tareas en el orden de urgencia, la respuestas de comentarios pueden esperar, pero quizás el envio de una nota no, o quizás debes de tomar un buen rato para escribir un mail para una posible propuesta de rentabilidad en tu Blog, solo revisa qué es más urgente y sobre eso marca la prioridad en una lista y las acciones a seguir. Por ejemplo:

Si revisas tu mail dos o tres veces al día, en lugar de cada media hora, verás que contestarás de una sola vez varios mensajes,  al final será lo mismo en menos tiempo.

Escribe mientras estés inspirado y crea posts programados y de repuesto.

Quizá es un día libre de escuela, con mucho tiempo libre o tu trabajo termino temprano, tienes tiempo de escribir o quizás es un día en el que estas inspirado produciendo como loco muchas notas, no te detengas hazlo, la mejor recomendación que te puedo hacer es que escribas mientras puedas; pero, no lo publiques todo de un solo golpe, analiza que posts no pueden esperar, cuales puedes programar para días posteriores y cuales puedes guardar para esos días cuando no tengas inspiración o tiempo.

Generalmente yo llevo una libreta a todos los lados que voy, cuando algo se me ocurre, lo apunto con una palabra un garabato o algo que me recuerde la idea, no es necesario ponerte a escribir un discurso entero en ese momento, sino te gusta usar libreta, puedes también usar tu celular con la aplicación de notas que cualquier móvil tiene.

Mi bookmark y mi reader ordenando mi información

Usar un obligatorio reader de feeds (google es mi opción), un servicio estilo delicious, o algun servicio de bookmarks online (aca una lista de lo impresindible en bookmarks) esto me ayuda a que cuando encuentre información de manera inesperada, leo el título no más ya veré después que tan interesante es, lo guardo para el tiempo de posteo. Y así puedo seguir con mis actividades.

Otra recomendación para cuando de verdad necesito concentrarme uso una herramienta llamada Write Room que siemplemente nos muestra una pantalla negra y texto muy al oldschool, y creanme funciona porque no hay ninguna distracción visual.

Para concluir

Solo me faltaría añadir limpia tu reader de vez en cuando y organiza tus blogs por carpetas, tener información más ordenada te ayuda a saber donde buscar y que encontrar, si tienes dudas sobre como limpiar tu feed aquí te decimos como.

Espero estos consejos te sirvan y si crees que tienes un consejo que puedas compartir que te ayude a ser más productivo a la hora de escribir en un blog dejalo en los comentarios, nos interesa que tú nos ayudes a enriquecer el post.

En esta ocasión les mostraremos como se hace un botón con diseño de sticker, que últimamente se han puesto muy de moda en los packs de iconos sociales, al final del tutorial tendrás la base que podrás aplicar este diseño a cualquier tipo de botón, ya sea social o no.

Todo desde Illustrator CS4 (Ai)

Todo el botón será creado con vectores por lo que no tendrás problemas para los tamaños y calidad de tus imágenes. Usar vectores es una solución ideal para web, ya que a pesar de que uses tamaño relativamente pequeños, la exportación de tus png’s será con una fidelidad de contornos muy buena. Si a eso le añades que en Ai CS4 por fin puede hacer medidas en pixeles para web simplemente lo tienes todo.

Iniciamos en nuestro documento haciendo una figura de circulo (180px por 180px) con las siguiente características y le ponemos color de relleno #FDF8E3, sin stroke.

Ahora lo que haremos será hacer la parte del sticker que se esta despegando para esto ponemos una figura de rectangulo por encima del circulo seleccionamos ambas figuras , copiamos ( Cmd+C o Ctrl+ C) y pegamos (Cmd+V o Ctrl+V).

Abrimos nuestra ventana del Pathfinder (Menú Window→Pathfinder) seleccionamos un par de figuras (círculo y rectángulo) hacemos la opción  Intersect (es decir quedara solo laintersección entre las dos figuras) y en al segunda aplicacmos la oción Minus (que la figura de arriba sustraiga a la figura de abajo).

Ajustamos un poco la curva de la figura más pequeña,  haciéndola un poco más grande, le agregamos los siguiente valores de relleno y la giramos

Duplicamos esta misma figura. Ajustamos la curva para que la forma quede como sombra proyectada la rellenamos de negro y le damos una transparencia del 12%.

Ahora duplicamos el semicírculo que nos queda, lo mandamos al fondo,  lo desfazamos un poco , lo rellenamos de negro y le damos transparencia del 12%.

Ya esta nuestra etiqueta ahora a poner diseño

Creamos un nuevo círculo de 136 x 136 pixeles, con un stroke de 2 pt. de color y un gradiente circular como relleno de los siguientes colores #FBB03B y #F16123, lo que no deja una imagen así.

Pasamos adelante el pedazo de sticker despegado y su sombra.Ahora tomamos uno vectores que descargamos de Internet (ambos son totalmente gratis este y este otro de DeviantArt . Los agregamos con el color #FFD54E y una transparencia del 50%

Ahora solo falta agregar el símbolo de RSS, el cual tome del siguiente vector gratuito,  aunque si eres de esos que les gusta hacerlo todo desde cero en este tutorial viene explicado como se hace.

Ajustamos el logo y listo. Puedes exportarlo como png.

Para Terminar

Tenemos listo nuestro botón ahora puedes cambiar los colores y poner el símbolo de cualquier otra aplicación o red social ( facebook, twitter o friendfeed quedan con el color azul) y así puedes hacer las diferentes adaptaciones.

Un tip que te puedo dar es que puedes modificar este sticker exportándolo como .png y jugando con texturas y transparencias en Photoshop, para dar una sensación distinta.  Espero puedas dejarme tus comentarios dudas y si gustas puedes mandarme un reply vía twitter (@ulizes), me agradaría saber como te fue con el tutorial así como ver tus propias versiones.