Google+

Cómo crear una página en Google+

El proceso es bastante sencillo:

1. Todo empieza entrando el formulario de creación de páginas y seleccionando el rubro de la misma. Al no existir una opción directa para sitios web, “Otro” será el más adecuado. Aunque claro, de acuerdo al contenido de tu sitio web, podría encajar perfectamente en algunos de los existentes.

2. Agrega el nombre de tu blog o website, la URL y lee las condiciones de uso para aceptarlas.

3. Agrega un slogan o descripción de tu sitio web, así como la foto para el perfil de la página.

Google+ Además te ofrece la opción de editar la foto del perfil inmediatamente después de subirla con las herramientas de Picnik.

4. Inmediatamente tienes las opción de compartir con tus amigos, aunque tal vez no sea el mejor momento, pues tu página esta vacío. Te recomiendo esperar a importar tu contenido antes de compartirla.

5. Listo. Tu página Google+ esta terminada. Así que es un buen momento de dejar el primer mensaje y que mejor, que uno de bienvenida.

Por supuesto, estas invitado a suscribirte por Twitter, Facebook, Google+, RSS o correo electrónico a nuestras actualizaciones.

¿Son ya tan cotidianos y necesarios estos servicios? En mi caso la respuesta es: totalmente. Por otro lado, es interesante pensar el porque de cada producto para cada servicio. Los invito a decirlo en los comentarios.

Fuente: featureshoot.com

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.

Google Analytics tiene una forma bastante sencilla de agregar esta información a nuestros informes.

1. En en el panel de entrada de Analytics, en la fila del sitio web de interés, columna de Acciones, clic en Editar.

Panel →Sitio web → Acciones → Editar

En el cuadro de Información del perfil del sitio web principal, clic en Editar.

Información del perfil del sitio web principal → Editar

En el formulario hay que activar Realizar seguimiento de la búsqueda del sitio y en parámetros de consulta colocar: Para Blogger: q. Para WordPress: s. Correspondientes a la variables de búsqueda de cada sistema.

2. Para tener el informe de búsquedas a mano, se puede agregar un gadget al panel. En ver informe, del sitio en cuestión, ir a Contenido en la barra lateral, después Contenido principal y en filtrar por Página agregar:

Para Blogger: \?q=

Para WordPress: \?s=

Y después ‘Añadir al panel’.

La información obtenida por este medio te ayudará a conocer mejor que buscan, literalmente, los lectores en tu página.

Google organiza un desafió para desarrollar las extensiones más creativas y de mejor implementación técnica para Google Chrome, los ganadores se llevaran un teléfono Nexus One y la extensión será exhibida entre las Top Picks en la galería oficial.

Por otro lado, el día de mañana, 9 de Septiembre, se llevará a cabo un taller en Madrid para aprender a desarrollar extensiones en el navegador de Google.

Lamentablemente el desafío es solo para España. La bases completas están en la convocatoria oficial.

Firefox esconde muchos secretos, pero una de las funcionalidades menos conocidas y más útiles de Mozilla Firefox para aquellos que desarrollan páginas web es el uso de perfiles de usuario. Firefox permite crear perfiles específicos que incluyen aquellos plugins, temas o extensiones que un usuario puede necesitar. Además, tanto los marcadores, como el historial de navegación, descargas, etc., son exclusivos de este nuevo perfil.

¿Y para qué quiero yo perfiles? Por ejemplo, puede ser conveniente arrancar un perfil de Firefox con todos aquellos plugins que se usan para desarrollo o pruebas, y tener otro perfil para uso más general y sin tantos plugins. Así ahorramos consumo de memoria y mantenemos nuestro perfil por defecto a prueba de fallos. En este artículo os mostraré cómo configurar un perfil, cómo arrancarlo o cómo tener dos perfiles abiertos a la vez.

Lo primero es cerrar Fifefox, asegurándonos que no se está ejecutando en segundo plano. Luego, y en función del sistema operativo ejecutamos “firefox.exe -profilemanager“:

Esto nos abrirá esta ventana:

Si no habéis creado un perfil antes, podréis crear uno nuevo ahora pulsando “Crear perfil…”. Antes de continuar, os recomiendo que desactivéis la casilla de “No preguntar al inicio”. Así podréis elegir el perfil al arrancar Firefox.

Una vez creado, se selecciona y se pulsa “Iniciar Firefox”. Ahora ya tendréis un Firefox totalmente nuevo. Es decir, ninguno de los plugins, ni estilos, etc… del perfil por defecto, estarán en el nuevo perfil. Si nuestro objetivo es utilizar este perfil para diseñar o depurar aplicaciones, os recomiendo que os instaléis de golpe todos los plugins que consideréis necesarios.

Lo bueno de tener este perfil independiente, es que no sobrecargáis un único perfil con todos los plugins y así se ahorra memoria. Por supuesto, cualquier cambio que hagáis aquí no afectará al perfil por defecto, y podréis probar con cualquier plugin o tema sin ningún problema. Ahora tendréis una “sandbox” completamente a prueba de fallos que podréis utilizar como banco de pruebas sin correr el riesgo de cargaros vuestro perfil por defecto.

Para más comodidad os podéis crear accesos directos (esto variará en cada sistema operativo) que arranque uno u otro perfil. Para ello basta con poner esta ruta: firefox.exe -P “NombreDeMiPerfil”. En la ventana anterior de perfiles sería firefox.exe -P “Testing”. Si además queréis que ambas perfiles puedan estar abiertos a la vez, podéis añadir “-no-remote” a la línea anterior: firefox.exe -p “Normal” -no-remote.

Nota: Si no hacéis esto el perfil del primer acceso directo que ejecutéis será el que se use por todos.

Ni que decir tiene, que también se pueden aplicar los perfiles para usar en un ordenador compartido y que cada usuario tenga la configuración que quiera. Si queréis ampliar la información en la web de soporte de Mozilla hay más información sobre la gestión de perfiles.

¿Qué os parece el truco? ¿Usáis los perfiles habitualmente?

¿Cómo funciona?

Stylish funciona con CSS, y al ser una extensión, funciona en los navegadores modernos, con lo que tenemos acceso a todas las ventajas de CSS 3. Con Stylish creas hojas de estilo locales, que te permiten modificar cualquier elemento de un sitio web.

Ejemplos de uso: borrar secciones que nunca se usan, eliminar publicidad, resaltar elementos importantes, cambiar el ancho de una columna, cambiar la paleta de colores y en general cualquier otra cosa dentro de las capacidades de CSS.

Paso a paso

1. Descarga e instala Sylish: Firefox | Chrome 

Reinicia tu navegador.

2. Ahora en el menú del navegador:

Firefox: Herramientas → Complementos → Estilos de usuario → Escribir un nuevo estilo.
Chrome: Opciones → Extensiones → Stylish → Opciones → Add new style.

Tendrás el botón para crear un nuevo estilo.

3. En esta nueva ventana se agrega el nombre del estilo, etiquetas y el campo de escritura, en este último irán todas las instrucciones CSS.

Seguro no se aplicaran estilos a todas la páginas que se visitan, por tanto, es importante definir dos tipos de estilo: generales y específicas a un dominio.

Estilos generales

Los estilos generales se aplican a todas las páginas que se visiten. Por ejemplo, la siguiente instrucción:

#ads {display:none;}

Borraría todos los elementos con id igual a "ads". Es poco recomendado pues en diferentes páginas un id podría tener funciones distintas y por lo tanto, estar eliminando posibles elementos útiles.

Estilos específicos por dominio

Para evitar afectar a todas las páginas por las que navegamos, se pueden crear estilos específicos a un dominio, la construcción del css puede ser como sigue:

@-moz-document url-prefix(http://www.sitio.com) { 

/* Estilos que solo afectaran al dominio www.sitio.com */ 

}

Es conveniente dar un vistazo a la documentación de stylish y a los selectores CSS 3 para sacar mayor provecho a esta extensión.

Ejemplos prácticos

Para hacer evidentes las ventajas de esta extensión, dejo a continuación algunos ejemplos para limpiar un poco la interfaz de Gmail, Twitter y Google Analytics, con explicaciones.

GMail

@-moz-document url-prefix(https://mail.google.com) {

.nH div.ps {display:none;} /* Borra los gagets en barra lateral. Por ejemplo, la de invitar a un amigo o el chat */
.k .diLZtc .nH .nH .mq {display:none;} /* Borra la barra de anuncios superior */
.ov .nH .mn {display:none;} /* Borra los "consejos" de uso de gmail en el footer */

}

Twitter

@-moz-document url-prefix(http://twitter.com) {

p.promotion {display:none;} /* Borra la apps recomendadas en la barra lateral */
.status-body .meta span:nth-child(2) {display:none;} /* Borra la aplicación desde donde se escribió cada tweet */
#footer {display:none;} /* Borra el footer */
#home .u-username {display:none;} /* Borra todos los tweets de un usuario "username" */
#home .share {display:none;} /* Borra todos los retweets automáticos de tu timeline */

}

Analytics

@-moz-document url-prefix(https://www.google.com/analytics) {

/* Limpia la interfaz de inicio de google analytics */
td.property_row, #footer, #CommonQuestions-ROOT, #ProductRecommendation-ROOT, ul.admin_lefthandside {display:none;}

}

También se puede consultar una biblioteca de estilos para muchos sitios en:

userstyles.org/stylish

Notas

Los estilos CSS no evitan que los elementos se carguen en la página, por lo tanto, no tienen ninguna ventaja respecto a la carga de la página; simplemente oculta elementos a nuestra vista. Si existe la opción de eliminar elementos desde el panel de una aplicación, esta será una mejor opción.

En estos momentos, la extensión de Firefox es más práctica que la de Chrome.

Conclusión

Stylish se ha vuelto una extensión necesaria en mi navegador, pues me permite limpiar mi área de trabajo y ocio en muchas aplicaciones web. Una interfaz limpia, quita muchos distractores.

El navegador es una de las principales herramientas del desarrollador web y del blogger; las extensiones, una forma increíble de potenciarlos. Actualmente Mozilla Firefox lleva la cabeza con más de 5000 extensiones, sin embargo, Google Chrome llegó pisando fuerte y ya cuenta con cerca de 3000.

Un excelente ejemplo de la capacidad de los completos son las siguientes 16 extensiones para Firefox y Chrome que pueden hacer más fácil la vida de Bloggers, Desarrolladores y SEO’s:

1. Firebug

Firebug es una de las extensiones más completas y poderosas para el desarrollo web. Extremadamente útil para el trabajar con el código directamente en el navegador y ver los cambios en tiempo real.

Firefox: Descargar Firebug.

Chrome: Descargar Firebug.

Nota: La versión para Chrome esta en fase beta, pero ya es un extensión como tal, por encima de la versión Firebug Lite que circulaba desde hace tiempo.

2. Speed Page / Speed Tracer

Son extensiones para evaluar el tiempo de carga de un sitio. Muestra cada uno de elementos y su desempeño en la carga. Muy útiles para disminuir en el tiempo de carga y así mejorar la experiencia del usuario.

Firefox: Descargar Speed Page. Desarrollada por Google, es una extensión que funciona sobre Firebug.

Chrome: Speed Tracer. Extensión desarrollada también por Google.

3. Web Developer

Un completo kit de herramientas para trabajar con HTML, CSS, estándares, formularios, imágenes. Puede ser más de lo que necesitas sino trabajas cotidianamente con esto. Ideal para diseñadores web.

Firefox: Descargar web developer.

Chrome: Descargar Pendule.

4. SEO

Extensiones para ayudar con la optimización y seguimiento de un sitio web en los buscadores. Información estadística por dominio, posición en Google, palabras clave, desempeño del sitio web, entre muchos otros parámetros de importancia SEO.

Firefox: Descargar SeoQuake SEO. También ver SenSEO.

Chrome: Descargar Chrome SEO. También ver META SEO Inspector.

5. ColorZilla / Eye Dropper

ColorZilla es un es un elemento color picker, es decir, que se puede obtener el color de un elemento con solo dar un clic sobre él. Permite obtener el código de color en varios formatos o mostrar el resto de la paleta de colores circundante.

Firefox: Descargar ColorZilla.

Chrome: Descargar Eye Dropper.

6. IE Tab

IE Tab es una extensión que te permite visualizar un sitio web con tu versión de Internet Explorer, pero dentro de tu mismo navegador. Con la ventaja de tener un botón siempre a mano y no esperar la carga completa del glorioso IE.

Firefox: Descargar IE Tab

Chrome: Descargar IE Tab

7. Window Resizer

Permite redimensionar la ventana del navegador para probar como luce un sitio a múltiples resoluciones. No te da la misma noción que verlo en una resolución de forma nativa, pero si una buena idea del uso del espacio en el diseño.

Firefox: Descargar Window Resizer.

Chrome: Descargar Window Resizer.

8. Measureit

Measureit es un sencillo complemento que te permite medir las dimensiones de cualquier elemento en el navegador. Tal como su icono muestra, funciona como un regla virtual.

Firefox: Descargar Measureit.

Chrome: Descargar Measureit.

9. Screengrap / Webpage screenshoot

Screengrab es una excelente herramienta para copiar o guardar capturas de parte de visible de una página en el navegador, del sitio completo o una zona especifica. Sencillo y muy efectivo con su tarea.

Firefox: Descargar screengrab.

Chrome: Descargar webpage screenshoot.

10. Link Checker

Link Checker permite verificar el estado y tipo de los enlaces en un sitio web. Perfecto para encontrar enlaces rotos.

Firefox: Descargar Link Checker.

Chrome: Descargar Chrome Link Checker.

11. Greasemonkey

Greasemonkey es una extensión referencia en Firefox y permite cargar scripts y estilos sobre cualquier sitio web y mejorar nuestra experiencia de navegación. Cuenta con miles de scripts prácticamente para todo uso, por ejemplo, recuperar suscriptores en feedburner.

Firefox: Descargar Greasemonkey.

Chrome: No necesario. La última versión incluye soporte nativo para scripts de greasemnkey.

12. Diccionario de español

El diccionario de español es especialmente útil para bloggers con una ortografía tan mala como la mía. Resalta con subrayado las faltas de ortografía en cualquier campo de texto del navegador.

Firefox: Descargar diccionario de español: México, España, Argentina.

Chrome: Aun no disponibles. Existen diccionarios con el de RAE para definición de palabras, pero no como correctores ortográficos.

13. AdBlock

AdBlock es una extensión que te permite bloquear la publicidad de la mayoría de los sitios web. Para el desarrollador permite limpiar la interfaz con que se trabaja; para el blogger evita impresiones improductivas de los propios anuncios.

Firefox: Descargar AdBlock Plus.

Chrome: Descargar AdBlock y Browser Button for AdBlock.

14. Twitter

No catalogaría a las extensiones para Twitter como necesarias, pero sin duda que son populares entre bloggers y desarrolladores. Permiten leer y publicar mensajes en Twitter, desde una ventana discreta y ágil a la lectura.

Firefox: Descargar Echo fon.

Chrome: Descargar Chromed Bird.

15. BuiltWith

BuiltWith te permite saber con que CMS o script esta hecho un sitio web, mostrando un icono en la barra de direcciones del navegador.

Firefox: Descargar BuiltWith.

Chrome: Descargar BuiltWith.

16. Flags

Muestra la bandera del país donde se encuentra hospedado un sitio web o blog.

Firefox: Descargar FlagFox.

Chrome: Descargar Chrome Flags.

Conclusión

Es impresionante lo mucho que ha crecido Google Chrome en uso y desarrollo en tan poco tiempo, sin embargo, Mozilla Firefox sigue teniendo la ventaja en madurez. Tal como están las cosas ahora, la extensiones en Firefox superan por mucho a las de Chrome en desempeño y cantidad. Lo cierto es que Chrome cada día se acerca más y a Firefox les cuesta renovarse.

No esta de más decir que no es recomendable tener una gran cantidad de extensiones instaladas, escoge aquellas que sabes usaras de forma frecuente. También puedes ver en los bookmarlets una alternativa liviana a tareas de algunas de estas extensiones.

Para WordPress

En los archivos donde quieras mostrar el botón (por ejemplo single.php) agrega el siguiente código:

<a href="http://www.google.com/reader/link?url=<?php the_permalink() ?>&title=<?php the_title(); ?>" rel="bookmark">Buzz!</a>

Puedes incluirlo en todos los archivos donde muestras los servicios para marcación de favoritos, la única condición es que quede dentro del Loop.

Para Blogger

Si ya haz agregado otros servicios de marcadores sociales, el proceso es similar, e igual al botón de compartir en Twitter.

En el código de tu plantilla (Inicio → Diseño → Edición de HTML → Expandir plantillas de artilugios) busca:

<p class='post-footer-line post-footer-line-3'>

Justo abajo agrega el siguiente código:

<a expr:href='"http://www.google.com/reader/link?url=" + data:post.url + "&amp;title=" + data:post.title'>Buzz!</a>

Cuida que todas las etiquetas se abran y cierren correctamente.

Anotaciones

Si agregas este código a una lista de marcadores existentes, adáptalo a su formato; suele ser listas no numeradas, así que es posible tengas que las etiquetas <li> y </li>.

Como tal, el código en este post es solo un enlace, si quieres mostrarlo como un botón, en lugar de vincular al texto "Buzz!", vincula una imagen como la propuesta por savedelete:

O mashable:

Quizá es un poco temprano para saber si Google será una herramienta atractiva de promoción, al menos tan atractiva como para regalarle un espacio en cada artículo; Ya Goolge Bookmarks demostró que no porque sea Google, será popular. Por lo pronto, blogs como Mashable ya lo integraron.

Tú qué opinas ¿Google Buzz se volverá una herramienta popular?