Mostrando entradas con la etiqueta Tutoriales. Mostrar todas las entradas
Mostrando entradas con la etiqueta Tutoriales. Mostrar todas las entradas

4/28/2013

Publicar Automáticamente las Entradas en Google+, Twitter y Facebook

62 comentarios
Publicar Automáticamente las Entradas en Google+, Twitter y Facebook 
Esto que haremos nos ahorrara mucho tiempo a la hora de enviar las publicaciones a las redes sociales. Es un truco mas para automatizar nuestro blog mediante un sistema de publicaciones automáticas en Facebook, Twitter y Google+.

Ahora no tendrás que preocuparte por estar publicando manualmente tus artículos en el medio social.

Básicamente utilizaremos el Feed de nuestro blog y a su vez optaremos por algunas aplicaciones que harán el trabajo por nosotros.

Para cada red social se utilizara una aplicación diferente, así que dividiré este articulo en tres partes.

1. Publicaciones Automáticas en Facebook

Para facebook vamos a usar la bien conocida aplicación "RSS Graffiti".

Agregar y configurar el  Feed


Estando con sesión iniciada en facebook, dirígete a este enlace: https://apps.facebook.com/rssgraffiti/, accede a la aplicación y luego dale en "Add New Publishing Plan", escribe el Nombre de tu blog y luego dale en "Create Publishing Plan".

Ahora tendrás la siguiente imagen:


A continuación al frente de "SOURCES", oprime "ADD NEW" y se te pedira la URL del Feed del Blog. Entonces agrega la url de tu blog en Blogger en el siguiente formato:

tu-blog.blogspot.com/atom.xml

o si ya adquiriste un dominio:
tublog.com/atom.xml

Luego tendrás algunas opciones para configurar:


En "Update Frequency" escoges "As soon as posible" para que RSS Graffiti este alerta en cualquier momento y revisando tu blog para realizar la publicación en facebook.

En "Maximum Psot per Update" elige la cantidad de post que deseas que se publiquen al mismo tiempo. (Esto para cuando se publican muchas entradas). Puedes elegir "5 posts"

Y "Post Order per Update" déjala así como esta.

Ahora dirígete a la pestaña superior "Advanced" (Esto es opcional)


Elige "Static Text" y escribe preferiblemente la url de tu blog.

Al fin dale clic en "Save"

Agregar nuestra Fan Page o Pagina de Seguidores

Después de haber hecho lo anterior debiste quedar en la siguiente imagen. Entonces al frente de "TARGET", oprime "ADD NEW"


Ahora simplemente bajo "Choose Target" escoge la pagina en la cual deseas realizar las publicaciones automáticas  y después de eso dale en "Save Changes".

Finalizando, mueve la flecha de "OFF" a "ON" hasta que este en colo verde, lo que indicará que desde ese momento esta activo.


2. Publicaciones Automáticas en Twitter

Para hacer que nuestras entradas vayan a Twitter por si solas ingresa a: http://feedburner.google.com

Elige el Feed de tu blog, ve a Publicize - Socialize - Add a Twitter Account, entonces te pedirá el permiso para acceder desde tu cuenta en Twitter.

Después de haber otorgado el permiso, en "Twitter Account" selecciona la cuenta de Twitter de tu Blog.

Puedes personalizar la publicacion en Twitter, haciendo uso de algunas opciones:

En ´"Post content", si seleccionas "Title only", entonces solo se mostrara el titulo de la entrada en Twitter. Si seleccionas "Title and body", entonces se mostrara el titulo y parte de la entrada. Y si eliges "Body only", entonces solo se mostrara parte del cuerpo de la entradas, pero no el titulo. Te recomiendo seleccionar "Title only"

Las demás opciones puedes dejarlas así como están.


Al final dale clic den "Activate" para poner a funcionar este servicio.

3. Publicaciones Automáticas en Google+

Ahora blogger a agregado esta nueva función para publicar las entradas automáticamente en Google+. Para activarla te diriges Blogger-Google+ y en la parte derecha selecciona "Compartir automáticamente después de publicar", en la parte izquierda eliges pagina de Google+ donde quieres que se publiquen las entradas. 

Esto no muchos lo saben, pero en realidad, se pueden hacer publicaciones automáticas también en Google+

Para esto sera necesario registrarse en http://hootsuite.com/

Estando en la dashboard dale en "Añadir una red social", luego en el menu izquierdo elige "Google+" y conecta a Google+ con Hootsite.

Despues de haber conectado a Google+, ingresa a la dashboard de nuevo y en el menú izquierdo, en "Configuración" (icono de herramientas), elige "RSS/Atom"

Estando en "RSS/Atom" y  oprimes en el "+" para agregar un nuevo Feed

Ingresa la url de tu feed en "URL de la fuente"; recuerda que debes estar en estos formatos:

tu-blog.blogspot.com/atom.xml

o si ya adquiriste un dominio:
tublog.com/atom.xml

Luego en "Red a la que enviar feeds", escoges tu pagina de Google+ que ya habias agregado anteriormente.

En "Cuando haya nuevas entradas, publicar a la vez:" solo puedes elegir un máximo de 5 publicaciones.

El resto lo puedes dejar asi como esta.

Para finalizar dale en "Guardar fuente"




Una vez hayas terminado todos los procedimientos, no tendrás que volver a preocuparte por publicar manualmente tus entradas en las redes sociales.

No es un proceso complicado, solo es necesario seguir cada paso.

Confió en que he podido ayudarte, y se que esto te servirá mucho en tu pagina web.

¿Como te ha parecido? Déjame tu comentario
Leer Más...

4/10/2013

Instalar Reproductor de Vídeos en Blogger

45 comentarios
Es un reproductor de videos HTML5.

Este proyecto se llama Video.js y es de código abierto (Open Source), lo que nos dice que puede ser desarrollado y distribuido libremente.

Video.js esta construido en HTML / CSS; corrige las inconsistencias entre navegadores, incorpora pantalla completa y subtítulos, gestiona el retorno a Flash u otras tecnologías de reproducción de vídeo cuando el HTML5 no es compatible, y también proporciona una consistente API de JavaScript  para interactuar con el vídeo.

El HTML5 mejora el rendimiento del vídeo al no requerir una segunda aplicación (un plugin) que se ejecute y se abra la puerta a la creación de interacciones entre el vídeo y otros elementos de la página que no ha sido posible antes.

Este es el reproductor que instalaremos en nuestro blog


Vamos a instalar este funcional reproductor en nuestro blog.

1. Agregar el JavasScript y CSS en la plantilla

Lo primero que haremos será ir a Plantilla - Editar HTML, presiona F3, busca </head> y justo antes pega el siguiente código:

<link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet"></link>
<script src="http://vjs.zencdn.net/c/video.js"></script>

2. Agregar el Reproductor

Cada vez que desees poner un video en tu blog utulizando este repoductor HTML5 debes tener en cuenta algunos aspectos.

  • El vídeo debe estar en formato MP4, WebM, u Ogg.
  • Es importante, pero no indispensable que tengas una imagen de fondo para el vídeo  esta es la imagen que se muestra cuando aun no comienza la reproducción.
Ahora el codigo del reproductor

<video id="video_1" class="video-js vjs-default-skin" controls width="640" height="264" poster="http://video-js.zencoder.com/oceans-clip.jpg" preload="auto" data-setup="{}">
<source src="http://video-js.zencoder.com/oceans-clip.mp4" type="video/mp4">
</video>

El anterior código es el que debes poner en cada entrada que quieras agregar un vídeo, pero ten en cuenta algunas caracteristicas de este codigo:
  • Modifica el ancho y la altura del vídeo en width y height.
  • En poster va la imagen de fondo del video
Preload tiene tres opciones:
  1. preload="auto": Indica que el archivo se cargara automaticamente durante el tiempo de carga de la pagina, es decir se cargara anticipadamente antes de presionar Play.
  2. preload="none": Indica que no se realizara ninguna acción de carga anticipada del video
  3. preload "metadata": se utiliza para que el navegador cargue por anticipado sólo los elementos de información adicional asociada con el archivo, que no incluyen el sonido.
Personalmente utilizo preload="auto" ya que anticipa la carga del vídeo.

Por ultimo lo que esta en rojo es el link del vídeo, que debe estar en MP4 preferiblemente.

Ademas, si quiere que la reproduccion comience automáticamente, agrega después de <video,   autoplay

Con esto ya tendrás un reproductor de vídeos en tu sitio web. Se pueden agregar otras características si tu lo deseas. Por ejemplo subtitulos, agregar varios vídeos, o personalizar el tema mediante CSS; en fin ve a Video.js y obtén información adicional en cuanto a este reproductor.

Para hacer las cosas mas fáciles  Video.js tiene una herramienta donde podrás sencillamente construir tu reproductor de videos: Video.js Builder

Cualquier inquietud comentala


Leer Más...

4/09/2013

Crear un Formulario de Contacto

2 comentarios
Algo que es necesario en nuestro sitio web es un formulario mediante el cual los usuarios puedan acceder a contactar con los directores del sitio.

Hay una manera sencilla de hacer un formulario de contacto, y es utilizando la herramienta que nos brinda Wufoo.

Wufoo es una poderosa plataforma donde puedes crear cualquier tipo de formularios, y en su versión gratuita te permite crear hasta 3 diferentes formularios.

Wufoo se esta convirtiendo en el creador de formularios en linea líder a nivel mundial, gracias a su interfaz sencilla y diversa que te permite crear encuestas, invitaciones, formulario de contacto, etc.

Te mostrare como crear un formulario de contacto de manera sencilla, sin embargo recuerda que puedas agregar tantas cosas como tu desees y personalizarlo a tu gusto

Observa una demostración del formulario que haremos.

1. Registro en Wufoo

Ingresa a Wufoo.com y oprime "Sing Up for Free!"


Completa con tus datos los siguientes campos:

Con eso ya estas registrado en Wufoo

2. Crear el Formulario

Para esto oprimes el botón "New Form"
A continuación tendremos varias opciones y elementos para agregar a nuestro formulario de contacto.
En este caso solo utilice algunas: 
  • Name
  • Email
  • Website
  • Paragraph Text
Si tu deseas agregar alguna otra casilla, puedes seleccionar la que necesites y automáticamente se agregará.

En las pestañas "Field Setitngs" y "Form Settings" se pueden personalizar y modificar algunas características de cada casilla y del formulario en general; hazlo a tu gusto.

Cuando este listo el formulario dale clic en "Save Form"



Después te aparecerá lo siguiente, y allí debes elegir la tercera opción "I'm finished! Take me back to the Form Manager"


3. Configurar notificaciones por Email y obtener el código


  • Notificaciones
Oprime en "Notifications" para ir a agregar el Email a donde llegara cada nuevo mensaje de contacto


Estando allí, agrega tu dirección de correo electrónico a la cual llegaran todos los mensajes.

En "Set Reply To", elige Email. De esta forma cuando vayas a responder los mensajes que te han enviado, estas respuestas irán al Email de quien te envió el mensaje.

A continuación oprime "Save"

  • Obtener codigo
Dirigete de nuevo al Form Manager y esta vez elige "Code"


Selecciona "Embed Form Code" y copia el primero código JavaScript


Muy bien, esta todo finalizado con Wufoo.

Ahora ve a Blogger - Paginas - Pagina Nueva - Pagina en Blanco y estando en la pagina elige HTML

Pega allí el anterior código que has copiado, ponle un nombre a la pagina; por ejemplo: Contacto y publícala.

Ahora ya tienes un pagina de contacto muy profesional.

Cualquier duda o pregunta, coméntala  y con gusto te responderé.

Leer Más...

4/03/2013

Cómo reducir la carga del Blog

12 comentarios
Personalizar el blog y llenarlo de widgets es algo que a muchos les gusta hacer. Pero pocos saben la importancia de la carga del blog.

Google hace tiempos se esta fijando en el el tiempo que dura tu pagina en cargar, lo cual acarreara una subida o bajada de ranking. Ademas de esto, al optimizar y reducir el tiempo de carga, se evita el abandono de los usuarios visitantes, y mejora la experiencia de navegación.

Algo muy frecuente, es cuando utilizamos plantillas externas a las ofrecidas por blogger.

Cuando tu blog carga; el navegador tiene que conectar a todos los servidores que conectan a las imágenes, scripts y demás .., como resultado conduce a un retraso enorme en el tiempo de carga de tu blog. Lo que debes hacer es reemplazar todas las imágenes o scripts que se alojan en otros servidores externos a blogger por imágenes y scripts alojados en blogger. 

La ventaja de hacerlo sera que el navegador tendrá que conectar sólo a blogger. Así se ahorrara tiempo.

Puedes utilizar herramientas como Google Page Speed o Pingdom Tools, para medir el tiempo de carga y conocer que problemas debes solucionar.

Te dejare una serie de consejos que pueden ayudar a minimizar la carga de tu pagina.

Optimiza las imágenes

Utiliza imagenes en formato .PNG o .GIF ya que estas tiene una reducción del 25% aproximadamente comparadas con el formato .JPG a la hora de cargar.

Ademas recuerda usar un editor de imágenes para recortarlas y reducir su tamaño antes de subirlas a blogger.

Guarda todos los JavaScript en Blogger

No necesitas guardar los JavaScript en otro lugar pudiéndolo hacer en blogger. Simplemente utiliza este código:

<script type='text/javascript'>
/ / <! [CDATA [
Pega el código JavaScript aquí
/ /]]>
</ Script>

Para encontrar los códigos JavaScript, en tu plantilla, con artilugios expandidos busca por <script type='text/javascript'> o también por la terminación .JS

Encuentra aquellos que se alojan en almacenamientos externos, ve a link y copia todo el código que allí se ve para luego pegarlo en el dentro del código que te mostré anteriormente.

Opta por plantillas de calidad

Una error muy común es cargar a blogger la primera plantilla que parece atractiva.
Muchas de las plantillas que se ofrecen en  la blogosfera son hechas por personas no oficiales o con poco conocimiento en el uso adecuado de HTML y JavaScript. 

Una plantilla con errores es trabajo duro para los buscadores y los lectores.
Mi recomendación es que uses plantillas creadas por personas recomendadas y/o profesionales.

Usa pocos anuncios publicitarios

Mucho quieren obtener grandes pagos por publicidad, y entonces rellenan el blog con molestos anuncios y pop-ups.

Esto crea una mala reputación, y deteriora la experiencia del lector, ademas de reducir la carga del blog puesto que estos anuncios utilizan JavaScript.

Asegúrate de no tener mas de 3 anuncios, y mantener una apariencia limpia y accesible.

Resume las entradas con un "Leer mas..."

Utiliza esta buena herramienta para resumir las entradas en la portada del blog.

No muestres mas de 7 entradas resumidas en la pagina principal

Evita visualizar flash en tu blog

El contenido de Flash aumenta significativamente el tiempo de carga de tu blog. Evitar el flash y plugins relacionados pueden añadir eficiencia de su sitio. Los Flash son también conocidos como malos para SEO.

En conclusión, estos son algunos simples consejos para aumentar la velocidad de carga de tu blog.

Seguramente hay mas tips en cuanto a este tema. Si conoces algunos puedes comentarlo.
Leer Más...

Recibe actualizaciones en tu Email :)