Tutorial Blogger – Mejorar sistema de comentarios con Disqus

Tweet

La verdad el sistema por default de Blogger de comentarios me parece muy poco práctico y visualmente, para ponerlo en palabras más elegantes: chafísima.

Para eso llegó Disqus, un sistema donde puedes centralizar los comentarios de tus sitios en una sola cuenta, configurarlos y administrarlos todo desde un solo lugar! Los que comentan pueden hacerlo con su perfil de Facebook, Twitter, OpenID, etc. y además tiene todo lo que esperas de un sistema de comentarios hoy en día: Likes, Replies, control de Spam, etc.

Vamos entonces a hacerle un upgrade a los comments que tanto nos gustan a los que hacemos posts! Este tutorial está dedicado a Blogger, pero Disqus se puede poner prácticamente en cualquier plataforma de blog: Wordpress, Tumblr, etc.

1. Registrarnos en Disqus

Este paso es sencillo simplemente vamos a Disqus.com y nos hacemos una cuenta.

2. Agregamos un sitio

Simplemente presionamos el botón +Add y registramos un sitio nuevo

 

3. Configuramos nuestro sitio

Aquí puedes elegir las opciones que sean más convenientes para ti, por ejemplo si quieres que se permitan comentarios anónimos, que puedan hacer login con Facebook o Twitter,

4. Elegimos nuestra plataforma

En este caso será Blogger

5. Instalamos el sistema

En esta parte debemos asegurarnos de algunas cosas:

• Tener los comentarios activados (duh! :P)
• Tener activado el “diseñador de plantillas” (casi todos los blogs ya lo tienen activado por default)

Ahora solo hacemos click en el botón de “Add site X to Blogger”

6. Traemos los comentarios anteriores de regreso

¿Qué creíste, que se te iban a borrar todos los comentarios que ya tenías? Disqus puede importar todos los comentarios que ya habían hecho en tu blog al nuevo sistema, ¡super útil!

Solo debes ir a tu cuenta en Disqus, en la parte de Admin, ve a la pestaña de Tools y después a la sección de Import/Export elegimos Blogger.

Existe una opción muy interesante que es la de Mantener sincronizados los comentarios originales de Blogger y los de Disqus (por si un día quitas el sistema, no perderás lo que se hicieron a través de Disqus, de nuevo, ¡muy útil!). NOTA: debes tener activada la opción de que cualquiera puede comentar desde Blogger o los comentarios de Disqus aparecerán como hechos por el dueño del blog.

Solamente concedemos el acceso cuando nos lo pida¡ y listo!  Ya tenemos un sistema de comentarios de primera. Espero que hayan podido seguir el tutorial, no es algo muy complicado pero quise documentar el proceso de poner el sistema aquí para demostrar lo sencillo que es.

¡Prueba el sistema y comenta! :P Ya no hay excusas para no comentar ;)

Tweet

Tutorial: Transferir archivos entre tu teléfono Android y tu computadora con Wi-Fi (sin cables!)

Tweet

Cuando pienso en pasar archivos entre mi computadora y mi teléfono, lo que más flojera me da es buscar (porque, seamos honestos, ese cable siempre está perdido :P) el cable para conectar el teléfono a la computadora.

Por eso cuando descubrí que existían aplicaciones como SwiFTP en el App Market de Android me emocioné mucho porque significa que ya no tuve que buscar el mentado cable para una tarea tan simple como pasar fotos, música, etc. de o hacia el teléfono.

Vamos a necesitar 4 cosas:

1. Un teléfono Android (seguro se puede con iPhone también… pero no tengo entonces se friegan :D). Yo tengo un MotoDext con Android 2.1 y soy muy feliz :P
2. La aplicación SwiFTP FTP Server , es gratuita la puedes buscar en el App Market o escanear este código con el Barcode Scanner para instalarla directamente sin buscarla (how fucking cool is that? :D)
   
3. Un cliente FTP. Yo usaré FileZilla, es gratuito y muy buen software. Bajar FileZilla (Hay de todos los sabores: Windows, Mac y Linux).
4. Un router inalámbrico (y estar conectado a tu red Wi-Fi local). Sí, puede ser la cochinada que te dieron en Infinitum o Cablevisión o lo que tengas de ISP, o tu propio Linksys o Netgear.

 

Comenzamos el tutorial o guía pues:

• Abrimos la aplicación SwiFTP FTP Server en el teléfono Android, y vamos a la parte de Setup. Aquí vamos a ver algunos parámetros a configurar para que desde tu computadora puedas acceder a tu teléfono.
  • Username: invéntate un nombre de usuario
  • Password: invéntate un password (pero recuérdalo lo vamos a necesitar luego).
  • Port number: 2121 (por default así está, déjalo)
  • Stay within folder: / (si quieres ir directo a tu tarjeta microSD, pon /sdcard)
  • Accept connections from wifi: OK
  • Guarda la configuración

• Te va a regresar a esta pantalla con 3 botones: Start, Instructions y Setup. Activa Start:

• Ahora debes ver algo como esto, si te fijas, cambió el estado del servidor a “running” (es un servidor muy saludable) y la Wifi URL en la que se puede ver una dirección IP, en mi caso es 192.168.1.100 (la que me dio mi router en mi red local). En el siguiente paso vamos a copiar este número en FileZilla, junto con el nombre de usuario y password que nos inventamos.

• Abrimos FileZilla y llenamos la información de la barra de Conexión Rápida

• Y ya acabamos prácticamente, en la parte derecha podrás ver todos los archivos de tu teléfono, y para pasarlos a una carpeta en tu computadora (y viceversa) no tienes más que arrastrarlos de un lado a otro en el respectivo explorador. Tus fotos, por ejemplo están en /sdcard/DCIM/camera

Cuando termines puedes ponerle Stop a SwiFTP en tu teléfono :)

Realmente es un concepto muy sencillo: Servidor FTP en tu teléfono + Cliente FTP en tu computadora + Tu red local doméstica.

Espero que esta guía te haya sido útil. Dale like, retweet y comenta (se responden dudas!) si a bien tienes, sai.  ;)

PD: Imagen de cabecera cortesía de xkcd

Tweet

Tutorial Blogger: Botón oficial de Twitter en los posts de mi blog (Blogspot)

Tweet

Es re-bonito el botón de Twitter, qué no? Blogger ya trae su propio botoncito para compartir por Twitter, pero la ventaja de este es que puedes saber cuántas personas le picaron al botón, y en general se ve más pro. Vamos a aprender a usarlo para un blog de blogger, es muy sencillo y no tienes que saber mucho, solo seguir estas instrucciones:

• En el panel de administración de tu blog, ve a Diseño / Edición de HTML

• Activa la opción "Expandir plantillas de artilugios” (sí suena horrible “artilugios” como traducción de “widgets”, pero yo no traduje esta cosa xD)

• Busca (CTRL+F) este texto:

</head>

• Exactamente antes de eso, pega este código:

<script src='http://platform.twitter.com/widgets.js' type='text/javascript'/>

• Ahora busca (CTRL+F) este texto:

<data:post.body/>

• Ya que tengas ubicado eso debes tomar una decisión: ¿Quieres poner el botón arriba del post o abajo?
• Si lo quieres en la parte de arriba, pega este código justo antes del rollo de <data:post.body/> que acabamos de encontrar. Si lo quieres abajo, pégalo después:

<!-- boton twitter --> <div><a class='twitter-share-button' data-count='vertical' expr:data-text='data:post.title' expr:data-url='data:post.url' expr:data-counturl='data:post.url' href='http://twitter.com/share'>Tweet</a></div>

• Hemos terminado :D

 

Si todo salió bien, dale Guardar Plantilla y tendrás un bonito botón de “Tweet” (como el que ves en este post).

Hay varias cosas que puedes cambiar y opciones para aprovechar, por ejemplo si quieres que sea una caja con números grandes cámbiale el atributo de data-count a vertical:

Si quieres configurar tu botón con más detalle, te recomiendo leer la documentación del mismo acá: Twitter Button, realmente es muy sencillo integrarlo a tu blog sobretodo si ya cuentas con nociones de HTML y CSS.

Prueba dándole Tweet a este post, para que veas que sí funciona y no te dije mentiras! xD

Espero que te haya sido de utilidad. Si no me da flojera pronto haré el mismo tutorial para el “Like” de Facebook (es un poco más de rollo pero no es para nada complicado).

Tweet

E.D. ahora en tu iPhone/iPod Touch

Tweet

El otro día estaba fijándome que TOOODOS los servicios de Google para el iPone/iPod Touch son 100% web-based y que nadamás ponen un bookmark con un icon bonito para que se vea como una app. Entonces me puse a investigar y es super fácil poner un llamado Apple Icon en cualquier sitio web.

Básicamente son bookmarks y son super fáciles de añadir a la Home Screen del iPhone/iPod Touch.

Para hacerlo nada más tienes que:

Visita ED desde Safari en tu iPone. Tap en el simbolo "+" de la barra de navegación de abajo.

Luego da tap en "Add to Home Screen" en el menú que aparece.

Finalmente, elige un nombre para tu bookmark y da tap en "Add".

Ahora ya tienes tu bookmark que parece app, en una de las pantallas de tu iPhone/iPod Touch!

¿Cómo pongo un Apple Icon en mi website?

Es muy fácil, hay 2 formas. La primera es si tienes acceso al folder raíz de tu sitio (vía FTP) y la otra es con una tag en el header de tu sitio.

Para empezar cualquiera de los dos métodos, primero tienes que hacer una imagen PNG de 45 x 45 pixeles. ES MUY IMPORTANTE QUE SEA PNG!

Nómbralo "apple-touch-icon.png", si no lo nombras así y lo subes a tu root folder, no va a servir ok? Súbelo a tu website con FTP y listo!

Ahora, si no puedes subir cosas por FTP (como en Blogger), lo único que tienes que hacer es subir tu Apple Icon a otro lado (como Flickr) y poner el siguiente código en el header de tu sitio (entre las tags <> y < / head > ):



Y ya, eso es todo. Fácil no?

Tweet

Tutorial Photoshop - Fondo de Fuego

Tweet

Esta vez haremos algo sencillo, un fondo de fuego que puede servir como textura, para una firma de foro, para un wallpaper, etc.

Algunas traducciones rápidas para los que tienen Photoshop en español.

Layer = Capa
Filter = Filtro
Render = Interpretar
Clouds = Nubes
Blur = Desenfoque / Desenfocar
Grain = Granulado
Overlay = Superposición

Comenzamos:

• Archivo Nuevo

- Fondo blanco
- Usa el tamaño que quieras, mi imagen es de 300 x 200

• Presionamos la tecla D para que los colores que tengamos de frente y fondo se cambien a negro y blanco (son los colores por Default)

• Vamos al menú Filter / Render / Clouds

• Filter / Texture / Grain...

- Intensity: 40
- Contrast: 50
- Gran Type: Vertical

• Filter / Blur / Gaussian Blur... [Si te saltas este paso te da algo más diferente y más definido, prueba con todo ;)]

- Radius: 1.5

• Filter / Blur / Motion Blur...

- Angle: 45°
- Distance: 28



Esa es más o menos la base del fuego (en verdad lo que da el efecto es el color y el motion blur), recuerda que puedes variar los valores de todo lo que hemos hecho para obtener diferentes resultados.

• Image / Adjustments / Hue/Saturation... (o presionamos CTRL + U)

- Activamos 'Colorize'
- Hue: 27
- Saturation: 40



Ahora para que el color sea más como de 'fuego' vamos a jugar con esa misma layer.

• Vamos al menú Layer / Duplicate Layer... / OK ( o simplemente arrastramos la layer en la ventana de layers hacia el botón de New Layer)

• En la capa duplicada hacemos Filter / Blur / Gaussian Blur... en 1.5 de nuevo.

• Cambiamos el Blend Mode de esa capa de Normal a Screen.

• Duplicamos esta misma capa

• Ahora esta capa nueva, la cambiamos de Screen a Overlay.

Y ya lo tenemos, fue muy fácil ;)

Espero que les haya gustado el tutorial, se aceptan todo tipo de críticas, comentarios y dudas.

Tweet

Tutorial Photoshop - Planeta

Tweet

Este tutorial está ya como en el nivel "Intermedio", pero pues ya va siendo hora de que comencemos con esos. De todos modos cualquier duda de cualquier cosa la respondo con muchísimo gusto, y si no yo también GeNmA y Julie ya tienen bastante nivel ;) . Con este tutorial continuamos con la serie de tutoriales sobre el espacio que espero que les estén gustando.

Comenzamos a hacer nuestro propio planeta:

• Empezamos con el fondo de estrellas que ya aprendimos en los tutoriales pasados sobre el espacio (no es obligatorio, pero para amenizar el procedimiento sería bueno tener la referencia del fondo). Les recomiendo un buen tamaño (400 o 500 px de alto y ancho o incluso más) para empezar.

• Creamos una nueva layer/capa, la nombramos planeta y en ella hacemos un círculo perfecto (para esto hay que dejar presionado SHIFT mientras lo haces) con la herramienta de selección elíptica (elliptical marquee tool).

• Vamos a hacer la superficie de nuestro planeta, aquí puedes variar entre lo que hago yo y cualquier cosa que se te ocurra a ti, como puede ser una textura rocosa o algo así.

• Presionamos la tecla D para hacer que nuestros colores sean negro y blanco (frente y fondo)

• Con la selección todavía activa, hacemos Filter / Render / Clouds . Apliquen el mismo filtro hasta que obtengan algo que les guste.

• Vamos a darle algo de color en Image / Adjustments / Hue/Saturation... . Elijan el color que más les guste, yo me incliné por este rojo apagado, solo no lo saturen mucho.

• Tomamos la herramienta Burn en modo Highlights con una Exposure de 50% y con un brush redondo y suave (Soft Round, de los que vienen por default) grande, como de unos 300 px. Con él damos una sombra al planeta de un lado, para que parezca que ahí no le 'pega' el sol, y para que vaya tomando la profundidad que deseamos.

El truco es probar poco a poco cómo se va viendo mejor esa sombra, no exageren ni le pongan tampoco muy poca, es cosa de cómo les vaya gustando su planeta. No necesariamente tiene que ser a la primera 'pincelada', pueden poco a poco ir haciendo click sobre las regiones que prefieran.

(Noten que la selección sigue activa)

• Ahora vamos a hacer lo mismo, pero con la herramienta Dodge (igualita, en modo Highlights, Exposure 50%, brush de 300px soft round); esta vez lo hacemos en las partes que queramos que pegue la luz.

• Vamos a Filter / Distort / Spherize... al 100% y lo volvemos a aplicar pero ahora a un 50%. Esto es para darle todavía mejor una profundidad esférica.

• Si todavía no les gusta la iluminación de su planeta, pueden seguir alternando las herramientas Dodge y Burn, e incluso si quieren una obscuridad total en cierta región pueden pintar de negro con el brush de 300px.

Se esacaparon unos molestos pixeles en los bordes, hay que arreglarlos.

• Con la selección activa todavía (nota que hasta ahora no la hemos quitado), vamos a Select / Inverse o presionamos CTRL + SHIFT + I, después Select / Feather... (creo que es Calar en español) con un radio de 1 px. Presionamos la tecla Supr (Del) y finalmente CTRL + D para deshacernos de la selección.

Se ve bien, no? :)

Ya tiene forma de planeta, pero falta darle una chida atmósfera y un bonito relieve.

• Duplicamos la capa "planeta" arrastrándola hasta el botón de New Layer (nueva capa).

• Vamos a Layer / Layer Style...

• En Blending Options, Outer Glow e Inner Glow cambiamos los siguientes valores:

Te recomiendo elegir un color claro para tu atmósfera (el mismo en inner y outer glow recuérdalo). Yo elegí #6a8db4 :

• Nuestro planeta se puede ver así:

Pero no se ve bien que esté iluminada la atmósfera abajo y el planeta en sí no, vamos a arreglar eso.

• Hacemos una capa nueva

• La capa nueva y la copia del planeta (la que tiene el estilo) deben estar enlazadas (linked), para hacer esto en PS7 hay que darle al icono de la cadenita ( )en las dos capas, en CS seleccionas las dos y le das al icono de cadenita que está hasta abajo. Ya que están enlazadas, presiona CTRL + E.

• Debemos tener ahora el puro 'brillo' en una capa diferente. Nombramos esta capa "atmósfera".

Las capas que debemos tener ahora son el fondo, planeta y atmósfera.

• Ponemos "atmósfera" en modo Linear Dodge.

• Ahora sí, con la herramienta Eraser (la Goma) e igualmente un brush grande de 300 px, borramos las partes que no queremos de la atmosfera. La otra alternativa a borrar es crear una Layer Mask, pero borrando basta.

• Lo siguiente es opcional, pero si necesitan darle un bonito relieve a la superficie de su planeta, lo pueden hacer de la siguiente forma.

• Duplicamos la capa 'planeta' y la llamamos 'relieve'. (nota que esté en medio de planeta y atmósfera).

• Select / Load Selection... / OK o también CTRL + Click en la layer relieve.

• A esta capa le aplicamos Filter / Stylize / Emboss... (en español sería Estilizar / Relieve).

• Presionamos CTRL + D para deshacernos de la selección.

• Presionamos CTRL + SHIFT + U para hacer Desaturate.

• Ponemos la Layer en modo Multiply.

• Presionamos CTRL + L para que aparezca la ventana de Levels. El indicador de la derecha lo movemos un poco a la izquierda (depende de cuánto relieve quieras).

• Bajamos la opacidad de la capa a 80%

Terminamos!



Si quieren darle más color a todo solo jueguen con el Color Balance (Ctrl + B), y pueden hacer una estrella a lo lejos para darle más realismo :)

Este tutorial creo que es el más largo que he hecho, pero uno de los que más me ha gustado hacer. Tampoco piensen que se me ocurrió todo de la nada, he leído muchos tutoriales sobre cómo hacer todo tipo de cosas y es como pasarles lo que aprendí de todos ellos en resumen.

Espero que por lo menos una persona lo intente para que sienta que valió la pena hacer todo esto jeje. Voy a trabajar en más tutoriales sobre el espacio, espérenlos :D

Actualización 3-Nov-09: Ya está bien el layer style del planeta, falatba la imagen de las Blending Options :)

Tweet