CSS: Corregir la línea punteada fuera de lugar en los enlaces

Este será un tip rápido para corregir la línea punteada fuera de lugar en los enlaces y botones. El error lo he visto en Firefox aunque desconozco si también aparece en otros navegadores

linea-erronea

La línea que se ve arriba, llamada outline, no debería ser tan extensa. Este error ocurre cuando a través de CSS queremos ocultar el texto de un elemento enviándolo lejos del área visible con text-indent. En el código de abajo se puede ver el text-indent a –9999em (lo enviaron muy lejos jeje).

css-problema

Para corregirlo solo hay que añadir una regla más al CSS: overflow:hidden;

css-solucion

Con esto la línea se ajusta de nuevo al elemento porque ya no “busca” al texto fuera del área visible.

linea-correcta

Que Twitter no te distraiga

Twitter, me guste o no, ya paso a ser parte de mi vida diaria. Es la nueva forma de estar conectado, twitteando o leyendo tweets, aunque esto último se ha vuelto bastante difícil el mar de tweets que hay a diario. Dejando por un lado que a veces te pierdes algunos tweets también puede llegar a distraerte e interrumpir lo que estas haciendo.

Para mantener el timeline de Twitter lo más limpio posible te dejo 3 cambios que me han funcionado hasta el momento.

  • Ocultar respuestas a twitteros que no sigues.  Supón que sigues a Ana pero no a María y Ana cada 10 minutos le responde a María, el resultado de eso son 6 tweets por hora que no querías ver. Activa la opción de ocultar respuestas a twitteros que no sigues y automáticamente dejas de recibir los tweets de Ana para María, o lo que sería lo mismo, dejar de recibir 6 tweets menos en una hora. Aplica eso a muchos twitteros y tu timeline va estar muy tranquila :) Para activar la opción entra a Twitter > Settings > Notices y en el campo @replies elige @ replies to the people I’m following.
    Settings en menú de Twitter
    @Replies en Twitter
  • Reduci alertas. Si usas Twhirl como cliente para revisar Twitter es bueno silenciar todas las alertas que puedas. Lo mejor es dejarlo para que avise solo en caso de que te respondan.
    Notifications en Twhirl
  • Seguí a menos twitteros (obvio). A menos que pienses estar pegado a Twitter todo el día no te recomiendo que sigas a mucha gente, intenta limitar los “following”. A mi me ha costado mucho pero me he logrado contener, 108 following al momento de escribir esto.No sigas al primero que te siga, no es una obligación seguir a tus followers. De preferencia sigue a las personas que ya conoces en el MundoReal®, a los que te responden muchos tweets o incluso han chateado en twitter o si has marcado varios de sus tweets como favoritos.

Consejos simples pero efectivos :)

Twitters2Twitters

TwitterLlego la hora de una reunión de twitteros en Guatemala, cada día somos más y todavía no tenemos el gusto de conocernos cara a cara.

Por eso nos vamos a reunir el sábado 2 de mayo a las 3:30pm en Nais Miraflores. ver mapa

La idea es conocernos, conversar y de paso tomarnos un helado. Puedes apuntarte en:

facebook upcoming

Más info en Twitter bajo #T2T

Cómo cuidar de una fanpage en Facebook

Ya ha pasado casi un año desde que publique la primera fanpage, después de todo ese tiempo aprendí muchas cosas sobre ellas, cosas que pienso te pueden ser útiles para cuidar de una fanpage.

Nota: Este tema va sobre cómo cuidar una fanpage, no sobre viralizarla, es acerca de cómo tratar bien a los fans que ya tienes y hacer que participen.

3 ideas que debes saber para cuidar una fanpage

  • La fanpage no es tuya, es de los fans. Tu las cuidas, ellos la usan (obviamente debes de dejar todos los permisos libres para que la usen). ¿De qué sirve una fanpage sin fans?
  • Tienes que ser fan de tu fanpage. Te tiene que emocionar lo que promocionas, tienes que saber qué es, cómo funciona y qué hace. Solo hasta que conoces bien tu marca/personaje/web podes saber porque los fans son fans.
  • Eres el anfitrión. Esto parece contradecir un poco las dos ideas anteriores pero en realidad no las contradice. Es cierto, la fanpage la hacen los fans, tu debes ser un fan, pero además también tienes que ser el anfitrión.  Sabes más que los fans sobre tu marca (o deberías) y también conoces a los fans, Sabes cuando participan más y cuando ignoran cosas por completo. Como anfitrión debes darles “material” para que participen y entretener a los fans. Eso incluye revisar estadísticas y prestar atención a la conversación.

La fanpage por partes

El Wall o Muro

Wall

Wall

Con el reciente rediseño de las fanpage la parte social de las fanpage ha mejorado mucho. Pasaron de ser una “galeria de widgets” a un wall prácticamente igual al de una persona. Es bueno porque mejora la conversación y la hace más relevante dentro de una fanpage. Además el diseño ayuda porque es familiar para las personas, es el mismo que usan para escribirle a sus amigos, y ahora pueden hacerlo para conversar con tu marca.

Conversar involucra actualizar regularmente, dependiendo de tu marca puedes actualizar al menos una vez cada día o cada dos, la idea es decir “hey! estamos vivos” pero sin ser molesto.  Las actualizaciones ahora aparecen en el newsfeed (noticias) de tus fans; si llegas a molestarlos ellos pueden ocultarte de por vida usando la opción hide.

Fotografías

FotoPublicar fotos en el wall (muro) de la página aumenta la actividad de golpe, generalmente la actividad dura uno o dos días y luego todo en paz. La mayoría son likes (me gusta o mola en español) y el resto son comentarios, no hay un número exacto pero aproximadamente un 70% son likes y un 30% comentarios.

Junto a las acciones, likes y comentarios, debes revisar las estadisiticas de vistas (photo views) que han generado para saber si les gustan o no las fotos. Por ejemplo, diez likes contra diez mil vistas no diría que es precisamente un éxito, pero esos mismo diez likes contra quince vistas si puede ser un éxito.

Las fotos, por ser contenido multimedia, automáticamente aparecen en el wall, por lo mismo la actividad es rápida (minutos después de publicar) y dura poco tiempo (algunos días).

Discusiones

Al contrario de lo que suele pasar con las fotos, las discusiones son más lentas en actividad y esta dura más tiempo. Cuando he creado un tema de discusión en las fanpage generalmente tarda hasta un día en que aparezca la primer respuesta, pero por otro lado la discusión sigue abierta meses después y puede llegar a miles de respuestas.

Una buena discusión es en la que la mayoría de fans pueden opinar, eso significa que debe ser simple para no ahuyentar a los fans y abierta para que todos opinen, o por el contrario muy cerrada para generar discusión.

Como dije antes, las discusiones son lentas, aunque eso no significa que no puedas acelerar un poco las cosas, apoyate publicando un enlace de la discusión en el wall o cambiando la configuración de la fanpage para que al cargar aparezcan primero la pestaña de discusión.

Configuración de Fanpage

Configuración de Fanpage

Enlaces

Usualmente las fanpage están creadas para apoyar a un sitio web ajeno a Facebook, o campañas que van más allá de Facebook, a YouTube por ejemplo. Por eso se agradece que Facebook permita incluir enlaces en el wall (hace unos meses no lo permitía) pero tampoco hay que exagerar usándolos.

Razones para no abusar de los enlaces hay varias pero ahora se me ocurren dos, la primera es que no quieres parecer spam publicando enlaces todo el tiempo, y la segunda es porque si la gente esta en Facebook quiere seguir en Facebook. Un enlace, excepto que sea realmente bueno, puede ser molesto si te lleva fuera del sitio. Facebook conserva una barra en la parte de arriba de la página pero aún así estas fuera de Facebook lo cual puede ser un inconveniente si tus fans estaban en medio de una conversación en el chat o comentando en el wall.

También debes vigilar las estadísticas de los enlaces, medir la reacción de los fans y saber si les gusto o funcionó la campaña. Asumo que si enlazas a un sitio web que también tu administras puedes conocer el origen y cantidad de visitas que recibiste, pero si no es ese el caso, por ejemplo al enlazar al sitio web de un tercero entonces es recomendable usar alguna herramienta que te permita tener seguimiento de esos clicks. Para uso personal uso Bit.ly, un recortador de URLs que además de “achicar” la dirección también te ofrece estadísticas sobre el enlace, pero a nivel “profesional” hay otras herramientas para manejar estadísticas, eso incluye Google Analytics.

En SEOmoz publicaron un buen artículo, en inglés, sobre las caracteristicas de los acortadores de URL más populares: The Benefits And Pitfalls of URL Shorteners, o si prefieres en español Maestros del web también publico un artículo similar llamado Servicios para acortar URLs.

Apps y Boxes (Cuadros)

Las boxes (o cuadros) varían dependiendo de las aplicaciones que instalemos en la fanpage. Lo que te recomiendo al respecto es:

  • No instales una aplicación que no sea realmente útil, solo va a estorbar y a hacer ruido. Es obvio pero hay que decirlo.
  • De preferencia usa boxes relacionadas a la fanpage. Si la fanpage es sobre Formula 1 incluye una aplicación que muestre los resultados es una buena idea.
  • Si puedes construye tu propia aplicación. Piensa hacerla “a medida” y si es realmente buena cambia la configuración de la fanpage para que la pestaña de Boxes se muestre primero al cargar (Wall -> Settings ->Default Landing Tab for Everyone Else).Hace un tiempo hice una pequeña aplicación para la fanpage de Guatemala, es bastante sencilla pero funciona. Muestra la última foto publicada por los fans y permite compartirla a un amigo o en tu perfil. Todavía se puede mejorar pero para empezar esta bien (veré si más adelante puedo compartir el código).

    Box: Guatemala en imágenes

    Box: Guatemala en imágenes

Por ahora dejo hasta aquí el tema, todavia quedan cosas por discutir como las updates (boletines) y estadísticas pero pienso que son temas que dan para otro artículo.

Dos ideas sueltas

Sucede a veces que tenemos ideas, nada fuera de lo normal si eres humano, y aunque usualmente las apunto esta vez decidí compartirlas aquí. Bien si te sirven, mejor si te dan más ideas, y sino pues, déjalas pasar.

Firefox Portable + Dropbox

Mi PC no iba muy bien la semana pasada por lo que estuve trabajando desde computadoras ajenas y en un disco duro externo. La solución rápida para tener Firefox justo como lo quiero sin interferir en la PC ajena es usar Firefox Portable (igual que el normal pero sin instalación). El problema es tener que mantenerlo en la memoria USB, el disco duro, o el soporte que sea. También es de tener en cuenta que por ser una solución poco usual lo termino borrando y por tanto perdiendo la configuración.

La idea es usarlo junto a Dropbox para mantener Firefox en la nube, disponible desde cualquier computadora y ajeno a nuestro almacenamiento. ¿Ventajas? Firefox configurado, disponible en cualquier lugar, justo como lo queremos. ¿Desventajas? Descargar Firefox cada vez que tengamos que usarlo. En caso de tener Dropbox instalado no puedes configurar la velocidad de sincronización, Dropbox sincroniza cuando puede y por supuesto Firefox cambia a cada momento lo que causaría (supongo) demasiado gasto de recursos (conexión de internet y memoria principalmente).

Acortador de URLs “semántico”

Los “acortadores” de URLs se han puesto de moda, hay muchos y la mayoría hace lo mismo. Por lo mismo la idea va más del lado de cómo usarlo que de cómo funciona.

La idea es tener un acortador de URLs integrado con el blog (una extensión de WordPress, de Live Writer o similar) que antes de publicar un tema pida una keyword que resuma todo el tema. Por ejemplo, hace unos momentos he escrito un tema acerca de PsPad y supongamos use la keyword pspad, probablemente meses después quiera enlazarlo pero no recuerde la dirección, aquí entra el acortador porque para enlazar solo tendría que escribir ejemplo.com/ivan/pspad. Claro, la dirección no es tan corta pero sigue siendo más corta que la del blog y además tiene sentido lo que la hace fácil de recordar.

La integración con el blog, además de pedir la keyword al publicar, sería sugerir la keyword a los visitantes al final del tema. Algo como “Enlaza el tema usando ejemplo.com/ivan/pspad”. ¿Quieres conocer la opinión de Javier sobre Apple? usas ejemplo.com/javier/apple.

Además se puede pensar en funcionalidades extras como sugerir temas relacionados, por ejemplo, otros artículos sobre pspad. ¿Cómo? agregando + (más) a la URL: ejemplo.com/ivan/pspad+ y voilá llegamos a una página con todo lo que he dicho sobre pspad, incluso fuera del blog, como por ejemplo en Twitter o Facebook. Hasta podría ser la página de resultados de Google (solo con resultados de mi blog).

Obviamente para esta idea podría usar Delicious que permite un funcionamiento similar, incluso yo lo uso así para compartir recursos a mis amigos, por ejemplo para compartir iconos uso delicious.com/diciembre7/recursos+iconos. Por supuesto no es lo mismo porque esta orientado a favoritos, “mi idea” esta más del lado de una búsqueda de términos en blogs y redes sociales. En este caso sería mejor una URL corta para el buscador de Friendfeed que es más o menos el resultado que me gustaría ver.

¿Si ya existen servicios similares de qué serviría? Serviría para facilitar información. Pedro pregunta qué tal la nueva Mac, Juan contesta “Revisa el artículo de luis  ejemplo.com/luis/mac”. Te das cuenta que no tuvo que ir a google a buscar la URL del blog, no uso delicious, tampoco tuvo que recortar la URL luego de buscar el artículo, simplemente escribió lo que recuerda: luis + mac.

¿Qué les parecen las ideas? ¿Funcionarían? ¿Ya existe algo similar?

¿Por qué uso PsPad?

Anteriormente usaba Notepad++ como editor de texto y HTML hasta que MundoGeek me mostró PsPad. No podía creer que hubiera un editor mejor que Notepad++, tan ingenuo que era, así que me lance a probar PsPad. Desde entonces han pasado 2 años y medio aproximadamente y sigo usando PsPad. Hoy Eric (@toigt) preguntó en Twitter por un editor de HTML en español y gratuito, obviamente le recomendé PsPad.

Dejo aquí las razones por las que empecé a usar PsPad, por las que lo sigo usando y por las que lo recomiendo.

- Nota: Soy diseñador web y trabajo principalmente con html, css, javascript y PHP. Advertido estas, luego no digas que es malo para programar Pascal  ;-)

Características que me gustan de PsPad

Código limpio y ordenado.

Me gusta que incluye coloreado de sintaxis, con soporte para al menos 15 lenguajes, numeración de línea, indentar es muy fácil y lo hace bien (hay programas que no saben ni hacer eso), snippets (segmentos de código ya hechos) y además incluye ayuda para “seguirle la pista” al código. Por ejemplo, en HTML al seleccionar una etiqueta marca con color la etiqueta inicial y la final para mostrar en donde termina.

Ayuda al programar

Ayuda a seguirle la pista al código

Sintaxis con color

Sintaxis con color

Snippets, en la imagen los de XHTML

snippets

Explorador de código y estilos

El explorador de código es quizás una opción prescindible, prácticamente innecesaria, pero cuanto te acostumbras a usarla es muy útil. PsPad incluye explorador para varios lenguajes, a mi me gusta especialmente el de HTML y el de CSS.

Explorador de estilos CSS. Haces click en la clase y el editor te muestra el estilo.

explorador de estilos

Explorador de etiquetas en HTML. Es genial, como ver un resumen de todo el código.

explorador de html

Explorador de archivos, favoritos y FTP

El explorador de archivos y  FTP no son nada nuevo, Dreamweaver las incluye desde hace años pero me gusta que las tenga. Especialmente el FTP que permite editar archivos en línea, aunque por otro lado es malo porque no guarda carpetas “en cache” como lo hace Dreamweaver. Incluye panel de favoritos para guardar acceso a carpetas, archivos, herramientas o páginas web.

Explorador de archivos. El corazoncito en la imagen son los favoritos.

explorador de archivos

Los favoritos.

favoritos

FTP

ftp

Otros extras

Además de las características de arriba tiene algunos extras que me gustan pero son pequeños.

Buscador en múltiples archivos (todos los abiertos o por carpeta) y el buscador de Google.

busqueda

Galería de convertidores

convertidores

Manejo de proyectos. Sirve para cargar una colección de archivos, de carpetas y demás.

proyectos 

Pestañas o Tabs para los archivos

tabs

Abrir y guardar con múltiples opciones.

abrir

Herramientas para HTML y CSS. Por ejemplo ordenar el código o comprimirlo.

herramientas de html y css

El final he dejado el artículo casi como una galería de imágenes de PsPad pero creo que es la forma más fácil de conocer las opciones más notables y que a veces no descubrimos “a la primera”.

Si al final te animas a probarlo puedes descargarlo desde la web oficial de PsPad.

Diseñadores guatemaltecos en Internet

Como es usual, estaba navegando por Internet visitando algunos sitios de diseñadores y me di cuenta de que en Guatemala hay diseñadores (gráficos) poco conocidos y algunos otros conocidos pero que no están en contacto con el resto.

Pensando cómo conectarlos pensé hacer una lista en donde, si todo va bien, los diseñadores guatemaltecos tengan un punto de referencia para conocer a otros diseñadores y ayudar a unir el grupo. Abajo los dejo con la lista de comunidades, revistas, blogs y portafolios de diseñadores guatemaltecos.

Comunidades de diseñadores guatemaltecos

  • Me atrevo a decir que DeviantArt es de las comunidades de diseñadores más grandes que hay, por la misma razón, adentro podemos encontrar un par de grupos de diseñadores gráficos guatemaltecos:
    • Guatemalan. Este fue uno de los primeros grupos, sino el primero, que intentó reunir a la mayor cantidad de diseñadores y fotográfos guatemaltecos dentro de Deviant Art. Actualmente esta abandonado como grupo pero los miembros siguen activos y es una buena referencia para encontrar a diseñadores.
    • CHAPINart. Este otro grupo, mucho más reciente que Guatemalan, nació con el mismo proposito de unir a los diseñadores pero además incluyó algunas variaciones como los concursos, tristemente también ha estado abandonado.
  • La Gaveta de Guate. Es un foro de diseño creado por un grupo de diseñadores gráficos de la USAC. Tienen espacio para casi  todas las ramas del diseño. En el foro puedes pedir respuestas a tus dudas, aportar o dar recomendaciones, siempre que sea de diseño será bienvenido.
  • Graffiti y Street Art guatemalteco. Grupo en Flickr de graffiti y diseño urbano en Guatemala, fue creado por NearSyx de Hemisferio Urbano y aún permanece activo aunque con baja actividad.
  • Diseñadores Gráficos Chapines. Perfil público en Facebook que reúne a los seguidores del diseño gráfico guatemalteco en Internet. También podes seguir al grupo en Twitter: @diseniochapin
  • Café Creativo: Es una iniciativa de diseñadores guatemaltecos para reunir a gente creativa a compartir experiencias, conocerlos, darnos a conocer, y como comunidad, proponer proyectos útiles a los creativos de Guatemala. Segui Café Creativo en el blog, en Facebook, en Twitter o en Flickr.
  • El Chiltepe: es un pequeño rincón donde escriben sobre cosas interesantes de diseño en general, enfoque  latino y hacen publicidad a todos aquellos diseñadores que no son tan conocidos pero que ameritan una mención. Buscalo también en Twitter como @ElChiltepe

Revistas de diseño guatemaltecas

  • Graphic Paranoia. Una propuesta lanzada por Rodrigo Aguilar (aka ZapatoVerde) para dar a conocer “artistas y diseñadores no convencionales“. A la fecha no sabría decir si continua activa la propuesta y me temo que ha sido abandonada.
  • Inyurfeiz. Creada por el equipo de Guare Guare, nace como una revista sobre arte urbano, graffiti y diseño en general. Si te gusta el graffiti esta más que recomendada.
  • La Capiusa. Una revista creada como un medio de expresión alternativo, pero en donde le prestan mucha atención del diseño gráfico de sus páginas. Hace poco tiempo “regreso” y promete mucho movimiento.Buscalos en twitter como @RevistaCapiusa

Blogs y portafolios de diseñadores guatemaltecos

Estudios de diseño

La lista de estudios de diseño es una lista que aún tengo pendiente, de momento solo puedo mencionar una, así que si conoces alguna y la compartes enhorabuena.

Notas & aclaraciones

  • Con un poco más de esfuerzo pueden encontrar las cuentas de Facebook o Twitter, que por ser más personales decidí dejarlas fuera, me he limitado a enlazar su trabajo :)
  • De la misma forma he evitado usar nombres en los diseñadores que se han tomado el trabajo de “ocultarlo” aunque si alguno desea que aparezca lo incluyo.
  • He incluido a muchos diseñadores guatemaltecos “de titulo” pero también a otros que diseñan independientemente del titulo. También hay varios que aún son estudiantes de diseño gráfico, dentro de los que me incluyo.
  • Me enfoque mucho en diseñadores gráficos, dejando de alguna forma afuera a los diseñadores web o industriales. Principalmente por espacio, aunque no descarto, crear una lista nueva para ellos o algún diseñador se anima por allí.
  • Gran parte de la información la obtuve de Internet, de algunos amigos (gracias NearSyx) y porque conozco a varios de los mencionados. Si crees que me equivoque te agradezco si me ayudas a corregir o ampliar la información.