Van abordando distintos aspectos sobre seguridad en Internet, los cuales se tratan de una forma amena y didáctica para facilitar su comprensión.

El sitio se divide en temas tales como:

• Utiliza Internet de forma segura
• Tus datos en Internet
• Tus datos en Google
• Administra tus datos

Más información en el sitio http://www.google.com/intl/es/goodtoknow/

Hace poco se hablaba de un virus que atacaba a los usuarios de Mac a través de una falsa actualización de Flash y hacia descargar un archivo Java para infectar a los usuarios. (Vulnerabilidad  CVE-2011-3544)Pues bien, para poder lograr esta tarea, utilizan sitios o blogs a los cuales le inyectan una porción de código, generalmente un iframe invisible (con medidas de 0 pixel) para no levantar sospechas y hacer creer que están en un sitio confiable y el usuario instale estas falsas actualizaciones de software, para explotar vulnerabilidades en muchos productos de software, como Adobe Reader, Flash Player o Java.

En esta experiencia logre encontrar una porción de codigo que inyectan al archivo index.php en la raiz de tu instalacion de WordPress, usando la función echo de PHP.

Si descubres que tu WordPress esta cargando algo similar, o esta demorando en cargar, revisa el código fuente de sitio y en este caso todo se soluciono al reemplazar el archivo index.php en el directorio de raíz, o si deseas borrar la línea que agrega pero te recomiendo reemplazarlo y verificar los permisos de escritura de tus directorios y archivo.

Esta es la situación que me toco vivir recientemente, cuando habían más de 3.000 comentarios en espera, los cuales ya eran de contenidos de meses y años atrás. Así que tuve que recurrir directamente a la base de datos. Lo cual lo puedes hacer por consola o a través del siempre amigable PhpMyAdmin.

Una vez que te conectas a la base de datos por cualquiera de estas opciones, debes ejecutar la siguiente linea de comando:

DELETE FROM wp_comments WHERE comment_approved = '0'

Esto significa que borre todos los comentarios desde la table wp_comments y que estan en el estado de no aprobados o pendientes, o sea igual a cero

Una vez ejecutado el comando se habrán borrado todos estos comentarios.

Plantilla para anuncios gráficos de Google Adwords

Los formatos de anuncio son:

• Skyscraper horizontal (728 x 90 píxels)
• Banner (468 x 60 píxels)
• Cuadrado pequeño (200 x 200 píxels)
• Skyscraper (120 x 600 píxels)
• Skyscraper ancho (160 x 600 píxels)
• Cuadrado (250 x 250 píxels)
• Rectángulo mediano (300 x 250 píxels)
• Rectángulo grande (336 x 280 píxels)

Descarga aquí gratis la plantilla de anuncios gráficos de Google Adwords

Podemos encontrar recomendaciones y material de apoyo

Antes de empezar a buscar un SEO, es importante formarse como consumidor y familiarizarse con el funcionamiento de los motores de búsqueda. Para empezar:

• Directrices para webmasters de Google
• Google 101: sistemas que utiliza Google para rastrear, indexar y mostrar contenido de la Web

También debemos recordar que optimizar un sitio para buscadores, solo afectara su posición en las busquedas organica, nunca en relación con avisos de pago, como Google Adwords. Esto último es lo que se denomina SEM (Search Engine Marketing).

La guía esta totalmente en español en formato PDF, te puede servir de referencia para desarrollar tus contenidos, ya que hace mención a los textos, imagenes, control de rastreo del robot de Google (Googlebot) entre otros temas.

Descarga gratis desde Google

Enlaces Relacionados

• Consejos de Google para la  optimización de contenidos

Ge.tt es una forma de compartir archivos en tiempo real y servicio de uso compartido. Con Ge.tt no hay necesidad de software especial o plug-ins. Se trata de un simple intercambio de archivos y publicación de herramientas para todo tipo de archivos como documentos, vídeo, música y fotos.

Una vez que subes tu archivo lo puedes compartir de forma inmediata, sin tiempos de espera como otros servicios como rapidshare o megaupload.

Si te creas una cuenta puedes tener estadísticas de tus archivos, lo cual es totalmente gratis.

Su interface es muy simple e intuititva, agrega de forma automatica los fade al inicio o final de cada tono. Sólo debes subir el archivo de audio o mp3 que deseas utilizar, o si quieres puedes usar un video de youtube como fuente de audio.

Lo probe y en unos minutos cree 2 tonos basados en videos de youtube.

La aplicación es totalmente gratuita, y puedes registrarte para guardar tu coleccion de tonos.

Super recomendable sobre todo cuando no disponemos del audio y lo sacamos de un video musical de youtube.

Enlaces Relacionados

• Audiko

WordPress por defecto nos agrega la etiqueta de parrafo o paragraph <p> al mostrar contenido. A veces, puede que necesitemos removerlo. Para ello solo debemos aplicar un filtro a la consulta:

Para remover del extracto

remove_filter('the_excerpt', 'wpautop');

Para remover del contenido

remove_filter('the_content', 'wpautop');

Un ejemplo práctico de esto, fue cuando combine Custom Types con este filtro para generar el típico slider

<div class="portada">

<div id="slider">

//Utilizo un Custome Type llamado Portadas para crear el slider
<?php query_posts('post_type=Portadas&showposts=5');

//Ahora utilizo el filtro wpautop para remover los paragraph del contenido 

 if (have_posts()) : while (have_posts()) : the_post(); remove_filter('the_content', 'wpautop');

 ?>
<? the_content(); ?>
<?php endwhile; else : endif; ?>

</div></div>

Espero les sea de ayuda.

Para ello debemos presionar F5 , si tu computador usa Windows
o cmd + R para los usuarios de Mac

En Resumén:

Windows

Presionar F5

Mac

Presionar Command (cmd)  y la tecla R

Ahora veremos un ejemplo que realice usando jQuery.

Instrucciones

Para el correcto funcionamiento de este tipo de validación, debes tener un input tipo checkbox con la identidad (ID) “acepta” y el boton de enviar debe tener la identidad (ID) “enviar”


<form id="form" action="">
<input id="acepta" type="checkbox" >
<input type="submit" id="enviar" value="Enviar" >
</form>


Llamamos a la librería jQuery y agregamos la función javascript para deshabilitar el botón

Primero cargamos la libreria jQuery, la puedes cargar en tu servidor o llamarla desde Google como en este ejemplo


<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
google.load("jquery", "1.3");
</script>


Luego agregamos nuestra función javascript con jQuery


<script type="text/javascript">
$(function(){
// desactivar el boton envio al cargar la pagina
$('input#enviar', this).attr('disabled', 'disabled');
// activar / desactivar el boton de envio
$('input#acepta').click(function(){
var disabled=$('input#enviar').attr('disabled');
if(disabled) {
$('input#enviar').attr('disabled', false);
}else{
$('input#enviar').attr('disabled', 'disabled');
}
});
});
</script>


Ver Ejemplo

Esto ha sido presentado en el evento para desarrolladores Google I/O. El año pasado ya mostraron las fortalezas del HTML5 en este mismo evento. Hoy nos han presentado dos novedades, Google Font API y Google Font Directory.

Si bien la utilización de tipografías para web ya habia sido lanzado y promocionado por otros proyectos, hoy la diferencia la hace que detrás de ello esta una compañia como Google, lo cual le da un gran respaldo a este tipo de iniciativas, a pesar que ya varios de nosotros utilizaba los servicios que ofrecen sitios como Typekit, Font Squirrel, Ascender, Font Bureau, por nombrar algunos de los proyectos que difundían el uso de tipografías alternativas en la web.

Desde hoy, el uso de la tipografía en sitios web lleva el apoyo de uno de los grandes del mercado, esperemos que empecemos a conocer más proyectos relacionados e iniciativas creativas para en su utilización con la integración de CSS3 y el soporte de HTML5.

Por el momento las tipografías de esta librería sólo soportan  idiomas de Europa occidental  (Latin-1).

Enlaces Relacionados

• Presentando Google Font API & Google Font (Blog Oficial de Google)
• Google Font Directory
• Google Font API

Si necesitas ahorrar tiempo a la hora de maquetear tus proyectos, MarkerCSS es una buena alternativa. Tan sólo debes utilizar los parámetros que te proporciona este framework para ir ubicando tus capas, como formatear el estilo del texto, altura, ancho y colores.

La diferencia de MarkerCSS con otros frameworks es que cuenta con documentación de ayuda en Español y varios ejemplos de como realizar las tareas mas comunes como la diagramación y ubicación de tus elementos en un par de pasos.

Todo esto bajo los estandares de la W3C y pensando en optimizar los tiempos de desarrollo como de carga.

Merece darle una prueba!

Para obtener la tuya, debes solicitarla en el sitio web de Wibiya y completar el formulario de registro (http://www.wibiya.com/BasicRegistration.php), para luego cuando tengas la aprobación de ellos, te enviarán el codigo que debes incluir en tu página, por lo general situado al final de tus contenidos.

Para personalizar la barra, debes acceder con tu nombre de usuario y contraseña al panel de control, donde descubrirás muchas funcionalidades que tiene esta barra. Ya que te permite desde realizar busquédas en tu sitio, agregar tus actualizaciones de twitter, tu página de fans en facebook, como manejar los RSS.

Se pueden agregar muchos servicios, como YouTube, Netvibes, Traducciones, Contenidos al azar, como agregar aplicaciones hechas por terceros. Se puede personalizar el idioma de la barra, pero el formulario de registro es en inglés.

Si tu sitio funciona bajo WordPress, puedes utilizar el plugin oficial de wibiya (bajar plugin)

Luego te aparecerá un mensaje como el que aparece a continuación.

“Google no busca a Chuck Norris, porque  él lo sabe, tu no buscas a Chuck Norris, él te encuentra.”

Es una idea llamada NoChuckNorris y realizada por Arran Schlosberg y te pudes hacerte fan en facebook

Video sobre como buscar a Chuck Norris en Google

Como muestra la imagen debes ir al pie de pagina o al final de la pagina de tu bandeja de entrada, y presionar sobre el enlace “desactivar buzz“.

Si además deseas mantener tu perfil en Google con un mayor grado de privacidad, debes deshabilitar los campos de selección o checkboxes en las opciones del perfil, como lo muestra la siguiente imágen.

De esta manera, no estarás compartiendo toda la información de cuenta con otros usuarios.

Estos pasos permitirán mantener lejos de tus ojos, tantos enlaces y actualizaciones , de las cuales ya tienes que lidiar en twitter como en facebook. Para muchos, no era necesario otra red social ni un estado más que actualizar.

El sistema funciona de la siguiente forma. Llenas un formulario, que te toma menos de un minuto, en el cual ingresas a quien le enviaras el archivo, seleccionas el archivo a enviar y listo!. Le llegará una notificación a la persona que le enviaste el o los archivos.

Recuerda que estará disponible por 2 semanas y si no es descargado, le enviará un recordatorio.

Así que ya puedes compartir esas fotos y videos que no te animabas a enviar por correo, prueba We transfer.

https://www.wetransfer.com/

¿Qué es twitter?

Twitter es un servicio de microblogging, que a través de 140 caracteres, puedas contar lo que estas haciendo, pensando o conversando con otro usuario del servicio.

¿Como funciona?

El servicio funciona de la siguiente forma:

1. Te creas una cuenta en es.twitter.com y completas el siguiente formulario

presiona sobre la imagen para ampliar

Una vez enviado el formulario, te enviará un email a tu correo para confirmar la creación de la cuenta

2. Ingresas a tu cuenta desde twitter.com, ingresas tu nombre de usuario con el que creaste tu cuenta, y la clave.

ingreso a twitter

3. Una vez que te identificaste, podrás modificar los colores e idioma de tu cuenta. Para modificar el idioma debes ir a la opción Settings

presiona sobre la imagen para ampliar

Ya cambiado el idioma, es mucho más intuitivo poder ir a la opción de diseño, cambiar sus colores, como fondos de imagen.

presiona sobre la imagen para ampliar

4. Ahora ya estas listo para crear tu primer tweet y ahora sabremos que son estos términos que usa la gente con twitter como tweets, retweet, hash, trends, etc.

Términos que se usan en twitter

Obviamente un servicio tan popular cuenta con sus propios terminos para realizar ciertas acciones, a continuación te contaremos los principales y a que se refieren.

tweet o tweets

Se refiere a las actualizaciones de estado, por ejemplo poner “Voy a comprar y vuelvo”, a eso le llamamos un tweet.

Seguir a un usuario

Así se define el seguir las actualizaciones de un usuario determinado. Es por ello que vemos siempre el mensaje en sitios web “sígueme en twitter“.

Re-Tweet / RT:

presiona sobre la imagen para ampliar

Es cuando enviamos el tweet o actualización de esta de otro usuario. Por ejemplo cuando tienes un amigo que recomienda un video en youtube, ahí ocupas la opción retweet “RT:@ayudaweb video en google buzz”

Menciones / @

presiona sobre la imagen para ampliar

Las menciones es cuando nombras a usuario en tu actualización de estado o tweets, para ello lo hacemos de la siguiente forma.

ej.: “Muy buen articulo @ayudaweb”

Para ver si alguien nos ha mencionado en sus tweets, hacemos click sobre tu nombre de usuario que aparece a mano derecha (barra lateral en tu pagina principal de twitter,  en este caso seria @ayudaweb.

Hash Tags o hash tagging / #

presiona sobre la imagen para ampliar

El hash tag se utiliza para marcar conversaciones y poder seguirlas, para ello usamos el signo gato o #, y así las separa de las demás actualizaciones o tweets que ves en pantalla. Por ejemplo si coordinas una salida con tus amigos por twitter deberías hacerlo algo así: “Entonces quedamos a las 22:00 en mi casa #fiestaenmicasa” y tus amigos deberían responder o actualizar sus estados de la misma forma. Ej.:”Si a las 10 en tu casa, nos vemos allá #fiestaenmicasa”

De esta forma al hacer click o presionar sobre la palabra o hash tag #fiestaenmicasa, veras toda la conversación relacionada con ese tema, o quienes lo utilizaron.

Mensajes Directos / DM

presionar sobre la imagen para ampliar

El mensaje directo o DM (direct message) es un mensaje privado, que sólo tu puedes visualizarlo. Se utiliza para enviar información un poco más privada y también muchos usuarios lo utilizan para agradecer de forma automática cuando los sigues en twitter.

Trending o Trending Topics

presiona sobre la imagen para ampliar

Son las conversaciones o terminos más utilizados en la red de twitter, un clásico de todos los viernes es por ejemplo el termino “Follow Friday”. En estos momentos el termino más usado es Google Buzz, puede ser con hashtag o sin el. Es lo que esta en boga.

Conclusiones

En resumen podemos concluir que twitter a pesar de ser un servicio que sólo se basa en actualizar su estado de 140 caracteres, tiene varias opciones adicionales. Hoy en día twitter te permite ordenar tus contactos por listas privadas y publicas.

Recomendaciones

Para subir fotos, te recomendamos utilizar el servicio de twitpic, ingresas con tu usuario y clave de twitter, y se ve automaticamente en tu cuenta. Para subir videos utiliza vidly. Ahora si deseas utilizar twitter desde un programa o desde otro sitio web que incluya todas las funciones, te recomendamos visitar seesmic.

Si tienes dudas o deseas agregar material a esta pequeña guía, deja tu comentario, gracias. :)

Video sobre como cambiar el idioma a español en twitter

http://www.screencast.com/t/NTI5MTli

La diferencia de estas aplicaciones a otras que realizan similares funciones, es que ambas tienen un buen diseño a la hora de desplegar el contenido. Ambas las hemos probado y no nos ha sido difícil instalarlas como configurarlas.

FlickrTab

presiona sobre la imagen para ampliar

Permite agregar tus fotografías de flickr, tan solo debes autorizar la aplicación y luego agregarla tus pestañas en tu perfil, o en el perfil de la pagina que tengas en facebook. Puedes configurar como se despliegan tus fotos, si deseas mostrar tus albumes, colecciones, con y sin barra lateral. De la misma forma que lo permite flickr.

Agregar desde facebook en http://apps.facebook.com/flickrtab/

TwitterTab

presiona sobre la imagen para ampliar

Con TwitterTab podemos hacer algo similar a lo que permite FlickrTab, pero mostrando nuestro estado en twitter y sus actualizaciones o tweets. Su configuración al igual que FlickrTab, debes autorizarla y luego agregar la pestaña o tab en tu perfil, o en el perfil de la pagina en cual deseas mostrar tus tweets.

En lo personal ambas aplicaciones me han resultado útiles a la hora de agregar fotos y tweets a paginas de seguidores, por lo cual se las recomiendo por lo fácil y rápido. Además tienen un diseño y despliegue de la información optimo.

Crea gratis tu propia barra de herramientas, para ello sólo debes registrarte en Conduit.com y seguir los pasos que te permitiran crear desde una barra de herramientas, hasta tus propios componentes.

La función de una barra de herramientas o toolbar para tu navegador es unir los canales de comunicación de tu sitio, como el RSS, twitter, facebook, youtube en una aplicación. Con esto mantener a tus visitantes siempre informados y poder generar mayor tráfico o visitas a tu sitio.

El sitio te permite personalizar gran parte del proceso de instalación, la barra como te crea tu propia pagina para la herramienta, si asi tu lo deseas.

No te genera pop-ups, o algun sistema de publicidad invasiva. En estos momentos estan actualizando la aplicación para que sea compatible con la última versión de Firefox. La barra es compatible con Internet Explorer, Safari y Mozilla Firefox.

Recuerda actualizar tu barra de herramientas, si ya tenias una, ya que con la actualización de Firefox a 3.6, se ha creado un nuevo instalador para Mozilla (ver más info al respecto http://forum.conduit.com/index.php?topic=7520)

Prueba la barra de herramientas de Ayuda Web

• http://ayudawebtoolbar.ourtoolbar.com/

Para ello existe un plug-in para Wordpress llamado Role Manager, el cual te permite los permisos por el usuario y no por nivel necesariamente como lo hace WordPress. Esto facilita la tarea cuando un sitio tiene varios colaboradores que desarrollan diferentes tareas como publicación, diseño, moderación, etc.

Es muy recomendado cuando desarrollas sitios basados en WordPress para clientes que necesitan pocas funcionalidades de publicación, como también para darle acceso a usuarios que no tienen gran manejo de la plataforma y que podrían cometer errores, de esta forma te evitas correr ese riesgo.

Descargar Role Manager

Puedes utilizar la medición por paginas vistas (pageview tracking) como por eventos (event tracking). Para comprobar el funcionamiento, recuerda que esto se ve reflejado en tu informe, en la sección “Contenido Principal”, 24 a 48 horas después de realizada la acción en el sitio.

Es muy útil cuando utilizas el componente para Adobe Flash para fotografías y videos como slideshowpro

Como podemos ver hoy en día con un buscador como Google que puede indexar contenidos de Adobe Flash, como medir las visitas y el comportamiento del usuario, se van eliminando ciertos mitos en la utilización de esta tecnología a la hora de realizar un proyecto en Internet

• Sitio del Proyecto GAforFlash (En Inglés)
• Información en Español Relacionada
• Utilizar GAforFlash con slideshowpro (En Inglés)

Si bien el tema es relativamente simple, hay que dominar conceptos y ponerlos en practica a la hora de diseñar y programar un sitio. Como toda utopía de validaciones, organizaciones y estamentos sobre la web, te avisamos que no siempre es posible llevar esto a la realidad, pero siempre es bienvenido aplicar una parte de ello en nuestros proyectos. En Ayuda Web te explicaremos sus fundamentos como información de referencia que te servirá de guía para consultar.

Principios de la Accesibilidad Web

Esta área del desarrollo web nace debido a la necesidad de hacer accesible el contenido de un sitio bajo todas las variantes (un usuario ciego,sordo,daltónico,etc.) como plataformas disponibles (distintos navegadores,desde móviles,mac,pc, etc.).

La accesibilidad web no es necesariamente la presentación de contenidos para personas con alguna discapacidad, sino que también para personas que no las tienen pero no necesariamente acceden al sitio en las mismas condiciones que la empresa o el diseñador hizo el sitio. Por ejemplo muchos hemos intentado entrar a algún sitio que utiliza Adobe Flash y si lo hacemos desde un móvil no tenemos acceso a ningún contenido ni información, cuando quizás solo deseamos saber el teléfono o dirección de la empresa.

Uno de los principios es que un contenido u objeto debe siempre estar acompañado de una alternativa de acceso a la información, con ello nos referimos a que si utilizo una imagen esta debe ir acompañada con una descripción.

Ejemplo:

<img src=”banner.jpg” alt=”Servicios en Accesibilidad Web” lang=”es” />

Señalamos una descripción de la imagen y el idioma de su contenido

Esto es de los ejemplos básicos en accesibilidad web, para luego pasar a la accesibilidad de contenidos sin javascript, flash, como ofrecer una versión legible y accesible para personas con discapacidad visual. La complejidad dependerá principalmente del tipo de contenido del sitio.

Web Accessibility Initiative

La WAI es la Web Accessibility Initiative el organismo más reconocido en el área, ya que pertenece a la W3C (su director es Tim Berners-Lee quien es uno de los creadores de la web) y es quien define los estándares en lo que se refiere a accesibilidad web, en su sitio podrás encontrar pautas o también llamadas WCAG y herramientas para la implementación de accesibilidad en tus proyectos.

Como Medimos La Accesibilidad Web

Para medir la calidad o profundidad de acceso a un sitio web, utilizamos las referencias que nos proporciona la WAI . Existen 3 tipos de prioridades y 3 tipos de niveles de acceso, cada prioridad es equivalente a un nivel de acceso.

Prioridades

• Prioridad 1: Se refiere a los puntos de la pauta que un desarrollador DEBE cumplir, de lo contrario uno o más grupos grupos de usuarios no podrán acceder a la información del sitio web. Este es un punto básico que se debe cumplir para el acceso de estos usuarios.
• Prioridad 2: Se refiere a los puntos de la pauta que un desarrollador DEBERÍA cumplir, de lo contrario uno o más grupos grupos de usuarios no podrán acceder a la información del sitio web. Cumpliendo este punto se eliminaran muchas dificultades para el acceso a la información del sitio web permitiendo el acceso a la información.
• Prioridad 3: Se refiere a los puntoss que un desarrollador Web PODRÍA cumplir, de lo contrario uno o más grupos grupos de usuarios no podrán acceder a la información del sitio web. Cumplir este punto mejorará el acceso a la información del sitio.

Se entiende que los 3 tipos de prioridades que existen, van de menor a mayor, incrementando el nivel de accesibilidad. Según el nivel de prioridad alcanzado o que se desee satisfacer, existe un nivel de conformidad que detallamos a continuación:

Conformidad

• Nivel de Conformidad “A”: Todos los puntos de verificación de la prioridad 1 se cumplen.
• Nivel de Conformidad “Doble A”: Todos los puntos de verificación de prioridad 1 y 2 se cumplen.
• Nivel de Conformidad “Triple A”: Todos los puntos de verificación de prioridad 1,2 y 3 se cumplen.

Consejos y Herramientas

El principal consejo y que te ahorrará mucho trabajo a la hora de hacer un sitio que cumpla con alguna prioridad o nivel de conformidad es que mantengas una semántica de tu código HTML lo más limpia posible y con sus respectivos atributos como alt, title, noscript, noembed, etc. La principal herramienta es la verificación humana, ya que todos los programas y validadores no son muy precisos a la hora de la evaluación, con esto me refiero a que por ejemplo tu sitio no pase una validación pero si la información sea visible en cualquier dispositivo de igual forma alcanzando la conformidad A

Al igual que lo es el validador de HTML y CSS (sobre todo este último), los validadores te otorgan una referencia de tu trabajo, ya que no se hacen cargo por ejemplo de los problemas que ocasiona un Internet Explorer 6 y que uno debe de igual forma solucionar esto aunque no cumpla con las normas que establecen estos organismos.

Herramientas de Validación

• Kit de Accesibilidad Web
• Validador TAW

Documentación de Referencia sobre Accesibilidad Web

• Guía Breve Sobre Accesibilidad Web
• Introducción a la Accesibilidad Web
• Preguntas Frecuentes sobre las pautas de Accesibilidad Web

En ese momento la aplicación va a realizar el enlace con tu cuenta de twitter por lo cual debes estar atento a desactivar el bloqueo de pop-up.

Luego ingresas en la ventana tu nombre de usuario y clave de twitter y listo!.

Ahora ya puedes actualizar desde Google Wave tu cuenta de twitter.

El Retweet se trata básicamente de reenviar un contenido o enlace a twitter para compartir con tus seguidores.

Luego de probar varios botones y plugins para realizar esta función el que mejor ha funcionado es el ejemplo de John Resig, el cual vamos a explicar a continuación.

Método Express

Paso 1
Incluir la siguiente libreria antes del cierre de tu cabecera o de la etiqueta </head>

<script src=”http://ejohn.org/files/retweet.js”></script>

Puedes descargar el archivo retweet y subirlo a tu servidor para una carga más rápida

Paso 2
Agregar el enlace y clase CSS a tu sitio de la siguiente forma:

<a href=”http://www.tuenlace.com”>Tu Enlace</a>

Si estas usandoWordPress lo puedes hacer así

<a href=”<?php the_permalink() ?>”><?php the_title(); ?></a>

El script ha sido probado en Internet Explorer 6-8, Opera 9-10, Safari 3.2-4, Chrome 2, and Firefox 3-3.5

Opciones

Puedes editar el archivo retweet.js y configurarlo con tu usuario de twitter y tu propia cuenta en http://bit.ly

bitly_user: “ayudaweb” // ahi indicas tu usuario en twitter

bitly_key:” ” // agregas tu Key APi desde tu cuenta en bit.ly

prefix: “RT @ayudaweb ” // es lo que aparece antes de tu enlace, por lo general es ” RT @tu-usuario-twitter”

El diseño del boton de retweet puede ser vertical o horizontal

Diseño de Botón Retweet Vertical (el más utilizado)

<a href=”http://www.tusitio.com” class=”retweet vert”>Tu Enlace</a>

Como puedes ver es la clase retweet vert lo que hace que se muestre de esa forma

Diseño de Botón Retweet Horizontal

<a href=”http://www.tusitio.com” class=”retweet”>Tu Enlace</a>

Es lo mismo pero eliminamos “vert ” de la clase

Como ven es bastante simple y rápido de implementar en cualquier sitio, ya sea dinámico o estático.

Dudas o consultas pueden comentar en este artículo.

Para muchas pequeñas y medianas empresas, invertir en internet es un gran esfuerzo, por lo cual rentabilizar cada peso de su presupuesto es necesario para obtener buenos resultados.

Ahora el problema que no todas las empresas que dan este servicio son transparentes con los clientes, ya que inflan los precios por click, cobran un porcentaje de la inversión y además cobran sus servicios. Porque inflar los precios por click es engañar, cobrar un porcentaje de la inversión lo encuentro poco ético porque con ello incentivas al cliente a invertir menos en medios digitales, lo justo es cobrar un buen precio por el servicio.

Si usted esta invirtiendo en campañas en internet a través de terceros con esto me refiero a que una agencia lleve su cuenta, lo primero que le sugerimos es seguir estos 3 simples pasos:

• Exigir enpalme de las cuentas de Google Analytics y Google Adwords, y asi ver que tan efectiva ha sido la campaña.
• Que la empresa sea certificada por Google en Analytics y Google Adwords, ya que Google siempre vigila esta malas prácticas.
• Revisar los costos por click que ofrece la agencia o empresa que llevará la campaña y compararlos con los costos de Google Adwords

Estos consejos le llevaran a que el costo entre inversión y servicios se reduzca entre un 30% a 50%, aunque he tenido la experiencia de ver como agencias inflan los costos en un 100% con el fin de aumentar sus ganancias, lo que se ve reflejado en el costo total de la inversión para el cliente, quien es el único perjudicado.

A través de mis años de experiencia he trabajado en conjunto con agencias, como también he asesorado a empresas que contratan agencias o externos para llevar estas campañas y me he encontrado con muchas sorpresas como las que antes mencione. El valor de los servicios por llevar una campaña en internet, no lo pongo en discusión ya que cada empresa sabe cuanto cobra y el cliente lo que paga, pero inflar precios y no transparentar la inversión que se hace por un servicio contratado, todo con el fin de aumentar las ganancias de la empresa que realiza el servicio, es por decir menos poco ético.

Así que ya saben, mucho cuidado con quien y en que invierten su dinero en internet, ya que se pueden ahorrar MUCHO de su inversión publicitaria en medios online.

A continuación te damos la lista de tipografías disponible para trabajar en tu aplicación para iPhone

Font Family: American Typewriter
Font: AmericanTypewriter
Font: AmericanTypewriter-Bold

Font Family: AppleGothic
Font: AppleGothic

Font Family: Arial
Font: ArialMT
Font: Arial-BoldMT
Font: Arial-BoldItalicMT
Font: Arial-ItalicMT

Font Family: Arial Rounded MT Bold
Font: ArialRoundedMTBold

Font Family: Arial Unicode MS
Font: ArialUnicodeMS

Font Family: Courier
Font: Courier
Font: Courier-BoldOblique
Font: Courier-Oblique
Font: Courier-Bold

Font Family: Courier New
Font: CourierNewPS-BoldMT
Font: CourierNewPS-ItalicMT
Font: CourierNewPS-BoldItalicMT
Font: CourierNewPSMT

Font Family: DB LCD Temp
Font: DBLCDTempBlack

Font Family: Georgia
Font: Georgia-Bold
Font: Georgia
Font: Georgia-BoldItalic
Font: Georgia-Italic

Font Family: Helvetica
Font: Helvetica-Oblique
Font: Helvetica-BoldOblique
Font: Helvetica
Font: Helvetica-Bold

Font Family: Helvetica Neue
Font: HelveticaNeue
Font: HelveticaNeue-Bold

Font Family: Hiragino Kaku Gothic **** W3
Font: HiraKakuProN-W3

Font Family: Hiragino Kaku Gothic **** W6
Font: HiraKakuProN-W6

Font Family: Marker Felt
Font: MarkerFelt-Thin

Font Family: STHeiti J
Font: STHeitiJ-Medium
Font: STHeitiJ-Light

Font Family: STHeiti K
Font: STHeitiK-Medium
Font: STHeitiK-Light

Font Family: STHeiti SC
Font: STHeitiSC-Medium
Font: STHeitiSC-Light

Font Family: STHeiti TC
Font: STHeitiTC-Light
Font: STHeitiTC-Medium

Font Family: Times New Roman
Font: TimesNewRomanPSMT
Font: TimesNewRomanPS-BoldMT
Font: TimesNewRomanPS-BoldItalicMT
Font: TimesNewRomanPS-ItalicMT

Font Family: Trebuchet MS
Font: TrebuchetMS-Italic
Font: TrebuchetMS
Font: Trebuchet-BoldItalic
Font: TrebuchetMS-Bold

Font Family: Verdana
Font: Verdana-Bold
Font: Verdana-BoldItalic
Font: Verdana
Font: Verdana-Italic

Font Family: Zapfino
Font: Zapfino

También disponible en PDF

Instrucciones

Primero debes subir tu fondo en twitter.com

Luego visitamos el sitio twtbg.me e introducimos nuestro nombre de usuario en el casillero que tiene la arroba en lado izquierdo.

Luego tienes las opciones o medidas de pantalla, selecciona una medida y puedes probar como se verá tu fondo personalizado

Y listo eso es todo!

Por lo general los usuarios no tan avanzados no tienen idea porque aparece una especie de brújula en la pantalla ni para que es, mucho menos donde deshabilitar esta opción.

La opción es deshabilitar el elemento de rotación del documento que aparece en la parte superior de la pantalla, pero para los usuarios de Macbook Pro y Air, la solución es bajar un parche que deshabilita esta función. La cual pueden descargar desde el sitio de adobe.

Descargar Parche desde Adobe : http://www.adobe.com/support/downloads/detail.jsp?ftpID=4337

Requerimientos del Sistema

• Adobe Photoshop CS4 o Photoshop CS4 Extended
• Apple MacBook Air o MacBook Pro (2008 o posterior)

Instrucciones de Instalación

1. Descarga y montar la imagen de disco.
2. Ubicar el directorio Adobe Photoshop CS4/Plug-ins  que se encuentra en (Aplicaciones/Adobe Photoshop CS4/Plug-ins)
3. Descargar o copiar y pegar el plug-in al interior del directorio (o carpeta) Plug-ins.
4. Reinicar Photoshop CS4.

En Kabytes publicaron un interesante articulo de porque NO hay que cobrar poco a la hora comenzar un proyecto con un cliente. Creo que sin duda representa a muchos quienes nos dedicamos a esta labor, y en conclusión, cobrar poco se transforma en un dolor de cabeza siempre, y si el cliente no esta dispuesto a pagar lo justo por un trabajo, es mejor no tomarlo.

http://www.kabytes.com/negocios/el-problema-de-cobrar-poco/

A continuación te describo como realizarlo en diferentes lenguajes o entornos.

PHP Redirect

<?php

Header( “HTTP/1.1 301 Moved Permanently” );

Header( “Location: http://www.tunuevodominio.com” );

?>

ColdFusion Redirect

<.cfheader statuscode=”301″ statustext=”Moved permanently”>

<.cfheader name=”Location” value=”http://www.tunuevodominio.com”>

ASP Redirect

<%@ Language=VBScript %>

<%

Response.Status=”301 Moved Permanently”

Response.AddHeader “Location”,”http://www.tudominio.com/”

%>

ASP .NET Redirect

<script runat=”server”>

private void Page_Load(object sender, System.EventArgs e)

{

Response.Status = “301 Moved Permanently”;

Response.AddHeader(“Location”,”http://www.tudominio.com”);

}

</script>

JSP (Java) Redirect

<%

response.setStatus(301);

response.setHeader( “Location”, “http://www.tudominio.com/” );

response.setHeader( “Connection”, “close” );

%>

CGI PERL Redirect

$q = new CGI;

print $q->redirect(“http://www.tudominio.com/”);

Ruby on Rails Redirect

def old_action

headers["Status"] = “301 Moved Permanently”

redirect_to “http://www.tudominio.com/”

end

Otros metodos para redirigir un dominio, es utilizar en Apache el archivo .htaccess , el cual se ubica en el directorio de raíz de tu servidor.

Redirigir tu antiguo dominio a uno nuevo

Options +FollowSymLinks
RewriteEngine on
RewriteRule (.*) http://www.tunuevodominio.com/$1 [R=301,L]

* Esto sólo funciona en el archivo .htaccess con el modulo Mod-Rewrite activado

Redirigir tu dominio sin www en Apache

Esta opción es para que tu dominio funcione con y sin www, por ejemplo: http://ayudaweb.cl y http://www.ayudaweb.cl

Options +FollowSymlinks
RewriteEngine on
rewritecond %{http_host} ^tudominio.com [nc]
rewriterule ^(.*)$ http://www.tudominio.com/$1 [r=301,nc

* Esto sólo funciona en el archivo .htaccess con el modulo Mod-Rewrite activado

Recordemos que el 301 significa que un directorio o dominio se movió de forma permanente a otro lugar, y el 302 de forma temporal.

En esta oportunidad hemos realizado un archivo robots.txt para el uso de WordPress, está validado y si deseas ampliar las restricciones o editar alguna configuración lo puedes hacer sin problemas, ya que el archivo robots.txt es sólo un archivo de texto que se ubica en la raíz de tu sitio en donde esta alojado, en el directorio public_html o www por dar dos ejemplos.

Archivo robots.txt de ejemplo

#
# Sitemap permitido, búsquedas no.
#
#
# Permitimos el feed general para Google Blogsearch.
#
# Impedimos que permalink/feed/ sea indexado ya que el
# feed con los comentarios suele posicionarse en lugar de
# la entrada y desorienta a los usuarios.
#

# Lo mismo con URLs terminadas en /trackback/ que sólo
# sirven como Trackback URI (y son contenido duplicado).
#

User-agent: googlebot

Sitemap: http://www.tudominio.com/sitemap.xml

Disallow: /?s=

Disallow: /search

Disallow: /feed/*

Disallow: /feed

Disallow: /comments/feed

Disallow: /*/feed/*

Disallow: /*/feed/rss/*

Disallow: /*/trackback/*

Disallow: /*/*/feed/*

Disallow: /*/*/feed/rss/*

Disallow: /*/*/trackback/*

Disallow: /*/*/*/feed/*

Disallow: /*/*/*/feed/rss/*

Disallow: /*/*/*/trackback/*

# A partir de aquí es opcional pero recomendado.

# Lista de bots que suelen respetar el robots.txt pero rara
# vez hacen un buen uso del sitio y abusan bastante…
# Añadir al gusto del consumidor…

User-agent: MSIECrawler

Disallow: /

User-agent: WebCopier

Disallow: /

User-agent: HTTrack

Disallow: /

User-agent: Microsoft.URL.Control

Disallow: /

User-agent: libwww

Disallow: /

# Slurp (Yahoo!), Noxtrum y el bot de MSN a veces tienen
# idas de pinza, toca decirles que reduzcan la marcha.
# El valor es en segundos y puedes dejarlo bajo e ir
# subiendo hasta el punto óptimo.

User-agent: noxtrumbot

Crawl-delay: 50

Disallow: /

User-agent: msnbot

Crawl-delay: 30

Disallow: /

User-agent: Slurp

Crawl-delay: 10

Disallow: /

# Primero el contenido adjunto.
# También podemos desindexar todo lo que empiece
# por wp-. Es lo mismo que los Disallow de arriba pero
# incluye cosas como wp-rss.php

User-agent: *

Disallow: /private

Disallow: /wp-content/uploads

Disallow: /wp-content/plugins

Disallow: /wp-content/themes

Disallow: /wp-includes

Disallow: /wp-admin

Disallow: /wp-

Descargar archivo robots.txt de ejemplo

A veces necesitamos cambiar el icono para que vaya acorde a nuestro diseño, y para ello realizamos los siguientes pasos.

.stico_default
{
background: transparent url(http://www.nuestrositio.com/tu_icono.png)
no-repeat scroll 0px 0px !important;
}

Como vemos es tan simple como reescribir la clase .stico_default y definir el background con la imagen que deseamos mostrar.

Si deseamos utilizar un titulo o cambiar por el que viene por defecto que es “ShareThis”, eso lo cambiamos en la variable del javascript que incluimos para que funcione la aplicación.

<script type=”text/javascript”
src=”http://w.sharethis.com/widget/?tabs=web%2Cpost%2Cemail
&buttonText=Compartir+Contenido&charset=utf-8&style=default
&publisher=”’Publisher_ID_Here”’”>
</script>

Aqui se trata de cambiar el valor de la varialbe buttonText por el texto que queramos, los espacios entre palabras lo realizamos agregando el signo +.

Actualización 1/10/2009

Con la aplicación Photo Stalker aún es posible ver las fotos públicas (no las privadas) de algun usuario, pruebalo en la siguiente dirección http://apps.facebook.com/josh_owns/index.php

Recuerda obtener el ID del usuario que deseas ver

Básicamente se trata de acceder a las fotos de usuarios en facebook que no están en tu lista de amigos (en ningún caso esto es ilegal o va contra las políticas de privacidad, ya que sólo podrás acceder a las fotos que pertenecen a álbumes públicos) a través de la misma plataforma que proporciona facebook para los desarrolladores (http://developers.facebook.com). Muchos usuarios tienen sus fotografías de esta forma, por lo cual de seguro podrás acceder a varios albumes pero no a todos.

Los pasos son los siguientes:

Paso 1:
Identificarte con tu cuenta en facebook

Paso 2:
Acceder al sitio http://developers.facebook.com/tools.php

Paso 3:
Seleccionar Formato de Respuesta Facebook PHP Cliente

Paso 4:
Seleccionar Metodo fql.query

Paso 5:
Copiar la ID del usuario que quieres ver las fotos

Paso 7:
Copiar y pegar el siguiente codigo de consulta

SELECT name, link
FROM album
WHERE owner=ID de usuario(ejemplo: 1348547137 )

Paso 8
Presionar Método de Llamada

Ahi obtendras la lista de URL o direcciones, la copias y pega en tu navegador y listo!, ya puedes ver las fotografías.

Hoy existe una aplicación llamada Photo Stalker que te permite hacer algo similar, la diferencia es que con el metodo de la consola de facebook developers, puedes etiquetar las fotos, Photo Stalker sólo te permite verlas.

Referente a la configuración de privacidad para que nadie pueda acceder a tus fotografías bajo ningún método escribiremos más adelante.

Este articulo va a explicar términos básicos para luego ir dando algunos tips relacionados al posicionamiento.

Lo más conocido es el SEO o Search Engine Optimization, lo cual se refiere a la optimización de los contenidos de un sitio para posicionarlo de mejor forma en los buscadores, principalmente en Google que es donde todos se abocan con las herramientas que proporciona este buscador en particular.

El SEM o Search Engine Marketing tiene relación con lo anterior pero enfocado a la publicidad y campañas online con sistemas como Google Adwords, y con esto hay dinero envuelto ya sea por inversión o retorno, o ambas.

Luego nació lo que es el SMO (Social Media Optimization), lo cual abarca el posicionamiento en redes sociales como facebook , youtube, twitter por nombrar algunas. Hace un par de años tenia casi nula relevancia este tipo de optimización pero hoy en día el impacto de las redes sociales ha sido tan grande como la sindicación y cruze de información entre usuarios y sitios, que ha nacido en el último año el termino o sigla  que veremos en el siguiente punto.

ORM (Online Reputation Management) o Gestión de la Reputación Online es lo más reciente dentro de estos conceptos en el posicionamiento y desarrollo web, el cual se refiere al manejo de la reputación de una empresa o persona relacionado con los contenidos disponible en la red tales como buscadores,redes sociales, sitios de sindicación de contenidos, algunos ejemplos de ello son Digg, Yahoo Buzz o la funcionalidad de Google llamada SearchWiki. Esto va de la mano con el CSM Consumer Generated Media, la capacidad de influencia y el poder que cada vez más tiene el consumidor en la red, gracias sobre todo, a las nuevas tecnologías de comunicación social ofrecidas por esta nueva etapa del desarollo en Internet denominada popularmente como Web 2.0

En futuras publicaciones daremos algunos tips y consejos para todas estas áreas del posicionamiento en Internet.

Allowed memory size of 33554432 bytes exhausted (tried to allocate 77 bytes)in /wp-includes/pomo/entry.php on line 49″

Para solucionar esto sólo debes agregar dos lineas a tu htacces y listo.

Agrega a tu .htaccess (generalmente ubicado en el directorio de raíz) lo siguiente:

php_value memory_limit 48M
php_value max_execution_time 900

Listo, solucionado.

<!--[if lt IE 7]>
 <script type="text/javascript" src="unitpngfix.js"></script>
 <![endif]-->

Luego incluyes la imagen a tu directorio de imagenes, por defecto en el javascript viene establecido el directorio “images”, asi que si es diferente debes modificar este parametro y listo, ya tienes el soporte para asegurar que las transparencias se vean en navegadores antiguos como IE6.

Ejemplo:

http://www.youtube.com/watch?v=4OQdTNwnpws&fmt=18

Obviamente para disfrutar de esto a cabalidad debes tener el video encodeado en HD