¿Que es, para que sirve, y como utilizar el destacador de datos de google?

Como mucha gente sabe ya, hace muy poco tiempo que se lanzó el nuevo resaltadordestacador de datos de Google. En este post te voy a explicar paso a paso, como comenzar a utilizar el destacador de datos de Google. También te ayudaré a hacerte una idea de qué es el resaltador / destacador de eventos o datos y para que sirve, aunque su nombre dice mucho... jeje!!!


Si te dedicas al mundo SEO o a la creación y edición de sitios web, deberías saber ya en que consisten los fragmentos enriquecidos. Si no es así, te invito a que lo averigues, echa un vistazo a este artículo en el que te hablo un poco sobre los fragmentos enriquecidos.

¿ya lo has leído todo? que rápido!!! jeje!!! bueno pues entonces, seguimos. Supongo que ya tendrás claro lo que son los fragmentos enriquecidos, los microformatos... etc. Pues bien, ahora te voy a explicar lo que es el destacador de datos de google:

¿Que es el resaltador o destacador de datos / eventos de google?


El destacador o resaltador de datos de google, es una nueva herramienta que dicha empresa ha puesto a disposición de los usuarios que utilizan las herramientas para webmaster de google.



Ahora bien, ¿para que sirve el destacador de datos?


Pues para marcar fragmentos de texto enriquecido simplemente con el cursor del ratón. Una vez marcado y publicado, solo tienes que esperar a que los robots rastreen de nuevo tu sitio web. Cuando ya lo tengan rastreado y listo, podrás ver si los enunciados y datos de los eventos son visibles al realizar una búsqueda y comprobarlo en los resultados. Los eventos marcados (de éste modo, o mediante microformatos, microdatos o RDFa), pueden reflejarse en la barra lateral...


...o en la columna principal de los resultados de búsqueda, bajo el enunciado del título de la página o sitio web.




Tengo que dejarte bien claro que, de momento la interfaz de la aplicación solo está en inglés y aún sirve únicamente para marcar datos sobre eventos. La versión es aún en inglés porque se acaba de lanzar la herramienta hace muy poco, pero google nos ha prometido esta herramienta en más idiomas y utilizable para otros datos, en sólo algunos meses.



Es decir, que para utilizar el destacador de datos ahora mismo, tienes que hacerlo desde la versión en inglés de las herramientas para webmaster de google. ¿sabes como? te lo explico:

¿como puedo empezar a utilizar el destacador de datos de google?


Primero te tengo que explicar (si no sabes ya, : ), como utilizar o acceder a la versión en inglés de las herramientas para webmaster de google. Accede a las herramientas para webmaster de google, pero no lo hagas como siempre, hazlo desde este link: https://www.google.com/webmasters/tools/home?hl=en o copialo y pégalo en la barra del navegador google chrome.

Muy bien,  introduce tu nombre de usuario y clave, entra y... ya estás en la interfaz de las herramientas para webmaster en versión inglés, haz click con el cursor del ratón sobre tu sitio web. Ahora, haz click sobre "Optimization" y a continuación sobre "Data Hightlighter". Antes de empezar a utilizar la herramienta, vamos a traducir la página a español (así será más fácil). Pulsa el botón derecho del ratón y haz click sobre "traducir al español". Si lo has hecho todo bien, ya debes estar dentro de la interfaz del resaltador de datos y eventos.




Haz click sobre "empezar a resaltar" y en el cuadro que surge en el centro de la pantalla, introduce la dirección o url de tu sitio web o evento. Espera unos segundos y... tu sitio web aparece en la pantalla.

Muy bien, ahora queda lo más fácil, que es ir seleccionando texto e introducir las etiquetas correspondientes con ayuda de la interfaz. Es muy fácil y traducido aún mejor, no? jeje!!!





Bueno, pues ya solo queda marcar todos los datos requeridos y publicar el evento, google se encargará del resto. 
Ofrece la posibilidad de crear conjuntos de páginas de eventos, lo mejor es que eches un vistazo a ver si te enteras de algo más... http://googlewebmaster-es.blogspot.com.es/2012/12/presentamos-el-destacador-de-datos-para.html

Si sabes inglés puedes ver este vídeo: http://www.youtube.com/embed/WrEJds3QeTw?


Fondos para tu página de perfil de google+ - Un plus a tu estilo!!!

A partir de ya, y aquí, puedes conseguir un fantástico y novedoso pack de 35 imágenes de fondo o fondos para tu página de perfil de google+. Gracias a la oportunidad que te ofrezco, de descargar gratis estas fabulosas imágenes de fondo, puedes personalizar un poco más tu página de perfil de google plus, y ser el más original de la red social.




Los fondos para perfil de google+ que te ofrezco, están creados recientemente, con photoshop. Tienen las medidas exactas para que queden fenomenales en tu página de perfil. Una vez que hayas descargado las imágenes de fondo, puedes editarlas (con Paint, por ejemplo) y añadir texto o imágenes, para personalizar aún más tu perfil de google+ y darle estilo a tu página de perfil de la red social de google.





¿A que esperas para conseguir estas imágenes de fondo de manera gratuita? Entra en este link para descargar los fondos para perfil de google+. Una cosilla: tan solo puedes descargar las imágenes, si eres fan de Miopiblog en facebook, por lo tanto, si aún no lo eres, te aconsejo que no desaproveches esta oportunidad de personalizar tu perfil de google+ un poco más.

Ya sabes que al ser fan de Miopiblog en facebook, tendrás acceso a una gran cantidad de recursos web, tutoriales, videotutoriales e información, gratis. Por ejemplo, puedes echar un vistazo a estos botones 2.0 para sitio web o a estos botones de descarga para web.

Que no se te olvide seguirme en Twitter... : )  y un Saludo!!!

Ocultar y mostrar un div con jquery - fadeIn / fadeOut, mismo botón.

En este post, te voy a enseñar como mostrar u ocultar un elemento o div con jquery, pero en este caso, ayudándonos de los métodos fadeIn y fadeOut. Además, te voy a enseñar como hacer que estos dos métodos del framework jquery, se apliquen a un objeto o div, haciendo click en el mismo botón.

Lo primero que tienes que hacer para poder utilizar los métodos fadeIn y fadeOut de jQuery, es aprender como empezar a utilizar jQuery en un sitio web. Si ya lo sabes y has introducido jQuery en tu sitio web, podemos proceder a crear nuestro código javascript para mostrar u ocultar un div con fadeIn / fadeOut de jquery.

En primer lugar, como siempre, el fragmento de código que hace que nuestro efecto jQuery, solo funcione una vez haya cargado el DOM:
<script type="text/javascript">
$(document).ready(function() {
//Resto de código
});
</script>

A continuación, tenemos que asignar el método click a un botón, para ello, añadimos lo siguiente:
<script type="text/javascript">
$(document).ready(function() {
$('#botonpruebafade').click(function(evento) {
});
});
</script>


  1. "$('#botonpruebafade')" - con esto selecciono el botón, que se llama botonpruebafade.
  2. ".click(function(evento) {
    //Aquí llamaremos a otro método y aplicaremos el evento a un div.
     });" - con este fragmento de código, estoy indicando que el evento tiene que ocurrir al hacer click sobre el elemento seleccionado, es decir, sobre el botón.

Como verás no es nada complicado, vamos a terminar el código jQuery, solo nos queda seleccionar el div y accionar otro método de esta manera:


<script type="text/javascript">
$(document).ready(function() {
$('#botonpruebafade').click(function(evento) {
$('#divquesemuestra').fadeIn(2000);
});
});
</script>


  1. "$('#divquesemuestra')" - Seleccionamos el div llamado divquesemuestra.
  2. ".fadeIn(2000);" - aplicamos el método fadeIn a una velocidad de 2000, sobre el div.

Y lo último que nos queda para comenzar a ver este efecto jQuery en acción, es crear el botón y el div:

<input type="button" id="botonpruebafade" value="Mostrar div" style="font-size:14px;cursor:pointer;margin:15px;padding:5px;"/>

<div id="divquesemuestra" style="background:#000000;display:none;width:100px;height:100px;"></div>

Aquí está el ejemplo de fadeIn:



Para hacer que el div desaparezca con efecto desvanecimiento y ayudándonos de jQuery, basta con suprimir "fadeIn" en el código anterior, por "fadeOut". El sistema es el mismo, pero con otro método que hace lo contrario. En este caso, el código jquery quedaría así:

<script type="text/javascript">
$(document).ready(function() {
$('#botonpruebafade').click(function(evento) {
$('#divquesemuestra').fadeOut(2000);
});
});
</script>

Y aquí puedes ver el ejemplo de fadeOut:


Ahora bien, esto sirve para utilizar un botón por cada evento, pero, ¿y si queremos aplicar los efectos fadeIn y fadeOut de jquery a un div con el mismo botón?, es decir, con un único botón que muestre el div cuando está oculto y lo oculte cuando este sea visible... te lo explico en un plis : ), es muy fácil.

El código jquery completo que hay que utilizar para aplicar fadeIn y fadeOut a un div con el mismo botón, es este:

<script type="text/javascript">
  $(document).ready(function(){
   $("#botonocultamuestra").click(function () {
      $("#divocultamuestra").each(function() {
        displaying = $(this).css("display");
        if(displaying == "block") {
          $(this).fadeOut('slow',function() {
           $(this).css("display","none");
          });
        } else {
          $(this).fadeIn('slow',function() {
            $(this).css("display","block");
          });
        }
      });
    });
  });
  </script>

¿parece complicado? pues no lo es, te explico brevemente en cuatro partes:


  1. "<script type="text/javascript">   $(document).ready(function(){    $("#botonocultamuestra").click(function () {" - esto ya lo conoces, te lo he explicado antes... ;)

  2. "$("#divocultamuestra").each(function() {         displaying = $(this).css("display");" - seleccionamos la propiedad display del div "botonocultamuestra" y asignamos a este valor una variable llamada "displaying".

  3. "if(displaying == "block") { $(this).fadeOut('slow',function() { $(this).css("display","none"); }); } " - si "displaying", o lo que es lo mismo, la propiedad css "display" del div, es igual al valor "block", ocultamos este con fadeOut. A continuación, seleccionamos de nuevo la propiedad "display" del css de dicho div, y aplicamos el valor "none".

  4. "else { $(this).fadeIn('slow',function() { $(this).css("display","block"); }); }" - en caso contrario, es decir; si "display" no está en "block" (por lo tanto estará en "none"), aplicamos el método fadeIn al div y el valor "block" a la propiedad "display" de css.


¿Te ha gustado? puedes verlo funcionando aquí:


Espero que te haya gustado el tutorial. Si quieres, puedes echar un vistazo y aprender a mostrar un div con el método fadeToggle de jQuery o hacerlo con el método slideToggle.

Que no se te olvide seguirme en las redes sociales o suscribirte a mi newsletter, así estarás al día sobre nuevas publicaciones en Miopiblog.

Un saludo!!!

Fondos azules para página de perfil de twitter - gratis, png

¿Alguna vez te has preguntado: donde puedo descargar fondos azulados para mi página de perfil en twitter? Pues aquí los tienes. Te ofrezo un pack de 9 imágenes de fondo para las páginas de perfil de twitter, compuestas en su mayoría por colores y tonos azules y en formato png, para que las puedas utilizar como imagen de fondo en tu perfil de twitter, ya verás que bien quedan.



Las imágenes están diseñadas y creadas para ser utilizadas como fondo para tu página del perfil de twitter, sus medidas son 1252x626px, es decir, el tamaño que debe tener la imagen de fondo de nuestra página de  perfil, como indican en twitter.
Los tonos azulados de los fondos para página de perfil twitter, recuerdan en cierto modo al agua, otros, simplemente son composiciones abstractas o creaciones de dibujo. Las imágenes de fondo para twitter, están creadas con photoshop.


¿A que esperas? : ) Da un toque original e innovador a la página de tu perfil de twitter, sigue el siguiente link para descargar las imágenes de fondo para perfil de twitter, gratis. Una última cosa, para que puedas realizar la descarga debes ser fan de Miopiblog en facebook. Espero que te gusten y un saludo.

Recuerda seguirme en las redes sociales, sobre todo en twitter ; )





Mostrar / Ocultar un elemento o div con jQuery - FadeToggle

Se puede ocultar o mostrar un div con jQuery de muchas maneras, pero en esta ocasión voy a realizar dicha acción gracias a uno de los métodos fading de jquery: fadeToggle. Pues bien, si ya has completado los pasos para incluir jQuery en tu sitio web, sólo queda empezar a crear el código javascript, para mostrar u ocultar un div, ayudándonos del método fadeToggle de jQuery.
Comenzamos por crear el evento inicial, que hará que tu código solo entre en funcionamiento cuando el DOM haya finalizado de cargar. Creamos lo siguiente:
<script type="text/javascript">
$(document).ready(function() { 
// Aquí va el resto del código que solo se ejecutará cuando la página haya cargado.
}); 
</script>

Seguidamente, vamos a complementar este código, con un fragmento de javascript que hará que al hacer click sobre un botón, el div o elemento se muestre u oculte respectivamente, según cual sea su estado. Simplemente, crearé un manejador de evento que invoca al método click sobre un div. El método click, a su vez, sirve para aplicar el método fadeToggle, sobre este mismo div. Procedemos:


<script type="text/javascript">
$(document).ready(function(){
  $("#boton").click(function(){
    $("#div1").fadeToggle(3000);
  });
});
</script>

Y por último, debes crear un botón y un objeto al que aplicar nuestro efecto de mostrar / ocultar:

<input type="button" id="boton" value="Mostrar / Ocultar" style="font-size:14px;cursor:pointer;margin:15px;padding:5px;"/>

<div id="div1" style="background:#000000;display:none;width:100px;height:100px;"></div>


Aquí puedes ver este ejemplo funcionando:



¿Te gusta? Si no te gusta este método para ocultar y mostrar un div u otro elemento html con jQuery, o quieres aprender más, puedes echar un vistazo a un post en el que te explico cómo mostrar y ocultar un div con slideToggle de jQuery.

Por cierto, no te olvides de seguirme en la redes sociales : ) y un saludo!!!

Insertar una nube de etiquetas html5 3D en blogger. Efecto giratorio.

Te voy a enseñar como insertar una nube de etiquetas html5 y 3d, en blogger. Es muy sencillo, para colocar la nube de etiquetas en nuestro blog, vamos a usar html5, mientras que para hacer que funcione correctamente, vamos a utilizar javascript. No obstante, vamos a dejar la nube de etiquetas 3d preparada, por si algún navegador no soporta el TagCanvas.

Lo primero que debes hacer para comenzar a insertar una nube de etiquetas html5, giratoria y en 3 dimensiones, en blogger, es hacer click en diseño y seleccionar: agregar un nuevo elemento html. Para seguir con nuestro proceso de insertar una nube de etiquetas 3d, con html5 y javascript, en blogger, personaliza este código cambiando las direcciones web de los enlaces y el texto que se verá en las etiquetas (el texto de color marrón, si quieres puedes dejarlo así para probar y después cambiarlo).


<script type="text/javascript">
      window.onload = function() {
        try {
          TagCanvas.Start('myCanvas','tags',{
            textColour: '#ff0000',
            reverse: true,
            outlineColour: '#ff00ff',             depth: 0.8,
          // something went wrong, hide the canvas container
            maxSpeed: 0.05           });         } catch(e) {
      };
          document.getElementById('myCanvasContainer').style.display = 'none';         }     </script>
      <canvas width="250" height="250" id="myCanvas">
<script type="text/javascript" src="http://benidormexperineces.comli.com/tagcanvas.min.js"></script> <div id="myCanvasContainer">         <p>Etiquetas:</p>       </canvas>     </div>     <div id="tags">
        <li><a href="Aquí debes escribir la dirección web o ruta del enlace." target="_top">Texto1</a></li>
      <ul>
        <li><a href="http://miopiblog.blogspot.com.es/search/label/css" target="_top">CSS</a></li>
        <li><a href="http://miopiblog.blogspot.com.es/search/label/dise%C3%B1o%20web" target="_top">Diseño web</a></li>
        <li><a href="http://miopiblog.blogspot.com.es/search/label/facebook" target="_top">facebook</a></li>
        <li><a href="http://miopiblog.blogspot.com.es/search/label/google" target="_top">Google</a></li>
      </ul>
    </div>

Ahora, copia y pega el código dentro de la ventana de este nuevo elemento html que vas a añadir al blog, colócalo donde quieres que se vea tu nube de etiquetas 3d y... magia!!!


Jeje!!! esto solo es una imagen. Puedes ver funcionando una nube de etiquetas como esta, en este blog. Echa un vistazo a la columna que queda justo a la derecha de esta entrada.


Si entiendes algo sobre html, desarrollo o programación de sitios web, lo mejor es que incluyas el archivo .js a tu manera. No hay que utilizar necesariamente: "<script type="text/javascript" src="http://benidormexperineces.comli.com/tagcanvas.min.js"></script>", puedes hacerlo tu mismo, subiendo el archivo a otro servidor o al directorio principal de tu sitio web. Además, no te aconsejo que utilices el subdominio "benidormexperineces.comli.com", ya que éste, es de prueba y te puede dejar colgado algún día.
La nube de etiquetas, se puede utilizar con jQuery y hay un plugin para que funcione perfectamente en IE. Es un proyecto de código abierto, y muy interesante, para más información, puedes visitar TagCanvas html5.

Por cierto, hablando de jQuery, ¿sabes ya como empezar a utilizar jQuery en un sitio web?. Otra cosa, que no se te olvide seguirme en las redes sociales : ).




Primera edición del Sorteo de Año Nuevo Miopiblog en facebook

Acaba de empezar la primera edición del sorteo de facebook de año nuevo, Miopiblog. La gente se está apuntando como loca a este sorteo de facebook gratuito. La promoción, tan sólo lleva unas horas activa y ya hay bastantes participantes inscritos.

Lo único que tienes que hacer para participar en la primera edición del sorteo de facebook de Año Nuevo Miopiblog, es hacerte seguidor de Miopiblog en facebook (si no lo eres ya, jeje!!!). El sorteo comenzó del dia 24 de diciembre de 2012 y el día 24 de enero de 2013, finaliza el plazo, tanto de inscripción, como para participar en el sorteo, y se elegirá a un único  ganador del mismo de entre todos los fans que se hayan inscrito en el sorteo de facebook.




Los encargados de elegir al ganador son los del sitio web: antavo.com, que son los mismos que han creado la aplicación y la plataforma para crear, organizar, editar y publicar el sorteo gratuito de facebook. Por este motivo, puedes estar seguro de que no soy yo quien elegiré a un ganador porque me caiga bien... no lo puedo hacer : ).

Otra cosilla, si te interesa y quieres participar, te vendrá bien saber que por cada amigo que invites, y que se apunte al sorteo, recibirás 5 puntos extra. Los puntos sirven para tener más posibilidades de ser el ganador.

Ups!!! se me olvidaba lo más importante, el premio... bueno, eso mejor lo ves tú, ¿no? venga pues aquí te dejo el link al .

¿Que son las comunidades de google+? Un plus en la red social


Hace tan solo algunos días que comenzaron a funcionar las comunidades de google+ o google plus, pero, ¿Que son las comunidades de google+? Las comunidades de google+, son grupos que los usuarios de la red social de google, pueden crear gratuitamente, dentro de google plus. Las comunidades de google plus, pueden ser públicas o privadas (en este último caso, solo pueden acceder los usuarios invitados). Cada comunidad de google+, se diferencia de las demás por estar dotada de una serie de características, éstas, basadas principalmente en la temática principal del grupo, que la definen. En algunas ocasiones, hay varias comunidades que guardan cierta similitud en cuanto a contenido o temática, dentro de la red social google plus.
Además, dentro de una misma comunidad o grupo, puede haber diferentes secciones, que ayudan al usuario y a los administradores de la comunidad a gestionar, organizar y comprender mejor el contenido.




Por ejemplo, si una comunidad se llama: "diseño web, seo, css y html" es de suponer que en ese grupo los usuarios van a intercambiar opiniones, pedir ayuda o debatir, sobre los términos o palabras presentes en el título de la supuesta comunidad de google plus. Dentro de esta comunidad de google+ de ejemplo, puede haber secciones, como he mencionado antes, las cuales podrían ser perfectamente:

  • CSS
  • SEO
  • HTML
  • JAVASCRIPT
  • ENLACES
  • ...



Si un usuario quisiera insertar un comentario relacionado con crear un documento index en html, lo tendría que hacer dentro de la sección HTML.

Es destacable la gran funcionalidad que ofrece este servicio a la red social google plus, ya que, entre otras cosas, las comunidades de google+  permiten unirse a uno, o varios grupos, en los cuales puedes relacionarte con gente a la que le gusta determinada temática que a ti también te interesa.

Por ejemplo, si te gusta el desarrollo y diseño de sitios web, puedes unirte a la comunidad de google+ "Tutoriales y Recursos Web - CSS, jQuery, SEO, html...". En este grupo o comunidad de google+, o google plus, puedes conocer a gente que esté interesada en el mundo web, charlar con estas personas e intercambiar opiniones o información.


Como habrás apreciado, las comunidades de google+, permiten una completa segmentación de usuarios por grupos, los cuales están definidos, normalmente, por aficiones, gustos, trabajo... etc.
Si conoces Linkedin o usas dicha red social, verás como hay cierto parecido, ya que en linkedin, se pueden crear grupos o unirte a estos.

Por cierto, yo ya he creado mi propia comunidad de google+, se llama: Tutoriales y Recursos Web - CSS, jQuery, SEO, html... te invito a visitarla y, si te gusta, a unirte a nuestro grupo. Bueno, pues lo dicho, lo mejor es que eches un vistazo a las comunidades de google+ por ti mismo, ya verás que bien que están.

Botones de descarga para sitio web creados con photoshop - formato png

Esta vez te ofrezco unos fabulosos botones de descarga para sitio web, creados con photoshop y en formato png. Un sitio web, debe ser, sobre todo original, como lo será si decides descargar y utilizar estos botones de descarga en tu site, ya que son únicos y recientemente creados por mí.



El pack de botones de descarga para sitio web, está compuesto por 5 botones de 180x50px, en formato png y, como he escrito antes, creados con photoshop. ¿A que esperas? haz click en este enlace para descargar los botones de descarga para sitio web.

Espero que te gusten y un saludo!!!  Por cierto, si te interesa, también puedes echar un vistazo a los botones redondos 2.0 para sitio web que también te ofrezco, gratis.

Ganar un premio para sitio web o blog

¿Te gustaría tener la oportunidad de que tu sitio web o blog pueda ganar un premio? Pues ya la tienes. A partir de hoy, he lanzado una promoción gratuita en facebook, mediante la cual puedes ganar un premio para colocarlo en tu sitio web o blog.




Es muy fácil, tan solo tienes que indicar algunos datos y la dirección o direcciones web de tus proyectos. En un breve plazo de tiempo, sabrás si has conseguido ganar algún premio para tu sitio web. Si resultas ganador, te enviaré un mensaje con un código html que debes insertar en tu sitio web, donde quieras presumir de tu premio.

Hay tres modalidades de premios a ganar para tu sitio web: originalidad, diseño y contenido. Si quieres más información, o te animas a participar, aquí te dejo el enlace a la promoción gratuita para ganar premios web.

Como crear una landing page en facebook y captar fans. (actualizado)

En esta ocasión, voy a explicarte como crear una landing page de facebook y como la puedes utilizar para captar fans en facebook. Lo primero que necesitas para crear tu propia página de aterrizaje de facebook, gratis, es averiguar que es, para que sirve, y como se utiliza una landing page de facebook. Si ya sabes todo eso, debes comenzar por pensar en la recompensa que vas a ofrecer a los usuarios. Como ejemplo de recompensa para captar fans en la red social facebook, puedes utilizar un ebook, un videotutorial, o cualquier otro tipo de material o recurso al que se pueda acceder desde nuestra futura landing page de facebook, por medio de descarga... por ejemplo. Recuerda tener en cuenta que el obsequio para los fans, debería ser algo atractivo o de valor, aunque éste último no sea económico.

Una vez que tengas claro con que vas a recompensar a tus visitantes, vamos a dar el siguiente paso, que es crear un artículo, post o página web, en la cual vamos a "dar vida" al asunto. En el espacio que acabamos de reservar para dar inicio al flujo de visitas a nuestra landing page de facebook, tienes que introducir contenido relacionado con el obsequio que hayas decidido usar como recompensa para captar fans. Un ejemplo: Si has decidido que la recompensa para tus fans, va a ser un videotutorial - curso de javascript, crearás un artículo en el que hablarás sobre el curso o videotutorial gratuito que ofreces. El contenido debe ser atractivo y original, con idea de levantar un poco más el interés del usuario. Dentro del contenido, debe haber un link a tu landing page de facebook, pero, como aún no la hemos creado, insertarás el texto sin introducir el enlace. Este enlace lo debes ofrecer al visitante, como un link que sirve para acceder a la descarga gratuita del obsequio o videotutorial, en este caso. Si quieres, puedes avisar al usuario de que a través del enlace accederá a una página de facebook, en la cual se le va a ofrecer la posibilidad de descargar o ver el video gratis, pero sólo una vez que sea fan de tu página.

Tras finalizar de agregar el contenido al post, lo publicamos y posicionamos en los resultados de búsqueda, basándonos en términos que definan al obsequio. En este ejemplo, deberíamos posicionarnos bien en los resultados de búsqueda para frases y palabras como: "videotutorial gratis de javascript", "curso de javascript gratis" ó "curso de javascript". También sería muy bueno hacer publicidad del nuevo post en las redes sociales, con la intención de conseguir nuevos fans en facebook.

Cuando hayas terminado, queda el último paso: crear tu landing page en facebook. Para esto, vamos a utilizar una aplicación de facebook, llamada Static Html. Es muy fácil de realizar: primero accedes a la página de la aplicación y, una vez en ella haces click en el botón en el que pone "añadir aplicación a página web".
La añades a tu página web de facebook, que habrás creado previamente (si no la tenias ya, jeje!!) y accedes a tu página de facebook. Verás que en el panel de administración de la página, junto a la foto en grande de tu perfil, hay una estrella en una de las ventanitas que sirven para compartir (te lo muestro en la siguiente foto).


Debes hacer click sobre la flechita que señala hacia abajo dentro de un pequeño recuadro blanco, justo en el mismo panel donde está la estrella, y, a continuación, sobre el símbolo de un lápiz que surge en el recuadro donde se ubica la mencionada estrella.

 Surgirá un pequeño panel de opciones, en el cual debes seleccionar "editar configuración" y al hacer click se hará visible un panel en el que podemos cambiar el nombre a esta pestaña, le pondremos: "videotutorial js". Hacemos click sobre guardar y después sobre aceptar. Automáticamente, veras como cambia el nombre de la pestaña.


Ahora haces click con el cursor del ratón sobre la estrella y accederás a la interfaz de la pestaña. Nos ofrecen varias opciones para crear nuestra landing page de facebook, fíjate bien en seleccionar la pestaña "Html".



 Aquí hay que tener un par de cosas claras: la pestaña en la que hay escrito "Fangate", es la que verán los que aún no sean fan de la página, mientras que, la pestaña en la que pone "Content", es en la que insertaremos el contenido que queremos que nuestros seguidores de facebook puedan visualizar, en este caso el videotutorial.




 El código html se puede introducir directamente en las ventanas de edición (index.html, style.css y script.js) por lo que si eres programador o tienes conocimientos de html, css, javascript... etc, lo tienes mucho más facil y no te debería suponer apenas esfuerzo crear una landing page de facebook personalizada. Ahora han lanzado una nueva interfaz en la que ofrecen la posibilidad de cargar los archivos .js y .css en el index de nuestra landing page, de una manera mucho más limpia, rápida y fácil. Además, nos permiten introducir nuestro código analytics de seguimiento.
Si, al contrario, no sabes nada sobre html, css... etc, no te preocupes, te ofrezco los códigos que tienes que introducir para crear tu página de aterrizaje de facebook, un poco más abajo.
Haz click sobre "Fan Gate", y a continuación selecciona la casilla "enable fangate", al hacer esto, estamos indicando que queremos que nuestros usuarios sean fans, antes de acceder al contenido de la landing page de facebook. 


Ahora baja un poco y centra la ventana de edición en la pantalla de tu ordenador. En la parte superior de esta ventana, hay una serie de iconos que permiten personalizar el texto que introduzcas en ésta. Como lo de la imagen:



Borra lo que ya hay escrito por defecto, copia el siguiente texto en rojo o crea tu el tuyo propio. Introdúcelo y personalizalo al completo:

"Bienvenido!!! Para tener acceso al videotutorial de javascript, tienes que ser fan en facebook.Haz click sobre el botón "me gusta" y espera unos segundos para que el videotutorial se vea."

Al pulsar con el cursor del ratón sobre la tecla "preview", debería de quedarte justo así:



Muy bien, ya has creado la landing page de facebook que verán los usuarios que no sean fans de tu página de facebook. Ahora falta publicarla y guardarla, para eso haz click sobre el botón save&publish.
Toca repetir los mismos pasos, solo que en esta ocasión, lo haremos en las ventanas de edición de la pestaña para fans. Sube hasta la parte superior de la aplicación y selecciona "Content". Baja de nuevo, y céntrate en la ventana index.html, en la cual debes pegar el siguiente código:


<head>
  [[style.css]]
</head>
<body>
<div id="cont1">
  <br/>
<p>Como ya eres fan de nuestra página de facebook, tienes acceso libre al videotutorial de javascript. Espero que te guste. Recuerda que puedes encontrar mucho más en nuestro sitio web.</p>
  <br/>
  <br/>
<div id="video" style="margin-left:80px;">
<iframe width="640" height="360" src="https://www.youtube.com/embed/vjE5412iAWQ?feature=player_detailpage" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</body>

Y a continuación el código css, repite el proceso de antes con la pestaña style.css, solo que en esta ocasión, con este código:

#cont1 {
    background:#006400;
    padding:7px 5px 10px 5px;
  }
  #cont1 p {
    text-align:center;
    margin:0 5px;
    color:#FFFAF0;
    font-size:20px;
      }

Guárdalo todo, publícalo y abre tu página o comunidad de facebook (la normal, la de siempre). Una vez estés en tu página de facebook, tienes que repetir el proceso que hemos realizado al principio para poner nombre a la ventanita con la estrella en nuestro panel de administración, solo que, en esta ocasión, hay que hacer el último click sobre la opción "enlace a esta pestaña".


Copia la dirección web que sale en una ventanita, esta dirección es la que debes pegar en el link que, justo al empezar, habíamos dejado preparado en nuestro artículo o post. Se trata de hacer llegar a los usuarios que lean el post o artículo, directamente a esta dirección que muestra el enlace, que es la de tu landing page de facebook.

Puedes ver un ejemplo de como debería quedar un artículo que manda flujo de visitantes a una página de aterrizaje, como el que debes de haber escrito, según te explico aquí  : -). Por cierto, te gustaría tener una landing page de facebook, mucho más original y bonita que la del ejemplo de este post, y gratis?? Si la respuesta es afirmativa, estás de enhorabuena, ya que te ofrezco la posibilidad de descargar los códigos para "copiar / pegar" y crear una landing page un poco más profesional, gratis.

Ya sabes que para poder descargar los códigos tienes que ser fan, no? jeje!!! Bueno, aquí te dejo en enlace para descargar los códigos y crear una landing page personalizada y original, en facebook.

Por cierto, no me olvides en twitter, ni en google+, eh? : -)  Un saludo!!! 

No te olvides de seguirme en las redes sociales! ;-)


¿Que es, para que sirve, y como se utiliza una landing page?

¿Que es una landing page? Una landing page, o página de aterrizaje, es una página web a la que se accede al hacer click sobre un enlace ubicado en un sitio web u otro lugar de internet (banners, adwords, redes sociales...). Una landing page, sirve para obtener algún tipo de respuesta, interacción o datos por parte del usuario o visitante. Muchas personas prefieren llamar a su landing page con otro nombre, como por ejemplo página de bienvenida, página de captación, página de salto, página de entrada... aunque supongo que es la misma finalidad la que todas persiguen: la landing page, se utiliza para obtener algún tipo de respuesta por parte del usuario.


¿Para que sirve y como se utiliza una landing page?

Después de definir, con pocas palabras, lo que es una landing page, te voy a intentar explicar, ayudándome de ejemplos, para que sirve y como se utiliza una landing page.
Para que lo entiendas mejor; una landing page de facebook, por ejemplo, sería una página web que se utiliza de la siguiente manera: el usuario entra, tras pinchar un enlace previamente insertado en nuestro sitio web. Una vez dentro de tu landing page de facebook, el visitante obtiene una recompensa (por ejemplo: un ebook, elementos de diseño web, un videotutorial... etc) a cambio de una interacción, cesión de datos, o respuesta por su parte. Por lo tanto, llegamos a la conclusión de que una página de salto, sirve para obtener algo del usuario, como he mencionado anteriormente.
La mayoría de veces, las páginas de aterrizaje son utilizadas para extraer datos personales de los usuarios, por medio de formularios y bases de datos. También son utilizadas como recurso para incitar o invitar a los nuevos visitantes al registro.
 En algunas ocasiones, algunos desarrolladores crean páginas de aterrizaje con la simple intención de mostrar buena presencia o mostrar información sobre algún producto, empresa, entidad... etc, al usuario, sin esperar en este caso ningún tipo de interacción por parte de éste, simplemente se intenta ganar su confianza a la misma vez que se llama su atención.

Hay una gran cantidad de gente que piensa que una landing page debe estar necesariamente ubicada en facebook o las redes sociales, pero esta es una idea errónea. No sólo se puede utilizar una landing page en facebook, sino que es posible hacerlo en cualquier sitio web, para recibir al público procedente de otros lugares de internet en concreto, u otros sectores. Un claro ejemplo, sería crear una página en nuestro sitio web para recibir única y exclusivamente a los usuarios procedentes del link que se muestra bajo la foto de nuestro perfil de twitter, o para recibir a los usuarios que acaban de ver nuestro perfil en linkedin, para los que vienen de leer tu blog personal, para los usuarios procedentes de campañas de adwords, para visitantes que acceden a través de un banner publicitario... etc, y así mucho más.



Si te apetece, puedes visitar un ejemplo de landing page en facebook y así de paso te haces una idea de como realizar una captación de fans en redes sociales por medio de una landing page, y como funciona ésta.

Como habrás comprobado, todo depende mucho de tu imaginación y de como te plantees la estrategia. Si decides crear una landing page, te aconsejo que intentes no aburrir nunca al usuario e intentes dar una imagen profesional de ti o tu entidad. Ya sabes, échale ganas y a por todas!!!

Por cierto, recuerda seguirme en las redes sociales, eh? jeje!!! un saludo : -)



Botones twitter para sitio web o blog, gratis. png y svg


Seguro que tu blog o sitio web queda genial una vez que hayas colocado en el, alguno de los botones de twitter para sitio web que te ofrezco gratis. ¿Quieres ser original? Innovar es lo mejor, los he terminado de crear hoy. Por este motivo, estoy seguro de que si haces uso de los botones twitter gratuitos que te ofrezco, conseguirás captar a más de un usuario que reconozca tu buen gusto y estilo.




 El pack de botones twitter, está compuesto por tres botones de reciente creación, inspirados en la red social twitter. El formato de estos lo puedes elegir, te doy dos opciones: descargar los botones twitter en formato png, o descargarlos en formato svg (editable con el programa gratuito Inkscape). Al ofrecerte los botones en formato svg, te brindo la posibilidad de personalizarlos completamente (bordes, sombras, colores, tamaño, texto...), creo que es una oportunidad que no deberías dejar escapar.

Otra cosa, con respecto al tamaño de los botones: si descargas estos en formato png, los puedes reducir tanto como quieras, con cualquier programa como paint, más grandes no creo que los necesites, no? jeje!!! no obstante, si los quieres de un tamaño superior, puedes descargarlos en formato svg y editarlos con Inkscape para personalizarlos a tu gusto o según necesidad, como te comento en el párrafo anterior.


Así de bueno, bonito y barato, no te lo crees? Pues te animo a hacerte fan de mi página de facebook y descargar gratuitamente los archivos zip con los botones twitter para sitio web.
Recuerda que no podrás descargarlos hasta que no seas fan de mi página de facebook  (si no lo eres ya, jeje).

Haz click en el siguiente enlace si estas interesado en descargar los botones twitter gratis. Espero que te gusten y un saludo : -) .

Por cierto, puede que resulte de tu interés echar un vistazo a estos otros botones 2.0 para sitio web que  te ofrezco en otro post, también gratuitos 100%.

Botones 2.0 para sitio web gratis - formato png o vector.

Me he vuelto generoso, por ese motivo, en esta ocasión te voy a ofrecer la oportunidad de descargar botones 2.0 para tu sitio web de varios colores, en formato png o vector, y, lo mejor de todo: gratis.
Así es, me he tomado la molestia de crear estos 7 botones 2.0 para web, bueno, mejor dicho, para todos los usuarios de Miopiblog que los quieran descargar gratis... jeje!!!





El formato de los botones 2.0 para web es .png, y la medida 67x67 px. También te facilito el enlace de descarga a una carpeta zip con estos botones almacenados en formato SVG o vector, para que los puedas editar y personalizar por completo (colores, bordes, añadir texto, brillo...etc) con ayuda del programa Inkscape. De esta manera, también tienes la opción de conseguir los botones 2.0 para web, en formato vector y gratis.

Pues nada, espero que los 7 botones que te he preparado te sirvan de algo, los he creado para mi uso personal también, pero me gusta compartir : -)

Por cierto, no te olvides de seguirme en las redes sociales. Para poder descargar el contenido debes ser fan de Miopiblog en facebook.

Haz click en el siguiente link, si ya eres fan de Miopiblog en facebook, accederás directamente a los enlaces de descarga. Si, al contrario, aún no eres fan de Miopiblog en facebook, accederás a una página en la que te pido que pulses sobre el botón "me gusta", una vez que seas fan de Miopiblog en facebook tendrás acceso a los enlaces de descarga. Espero que te gusten los botones!!!

Link para acceder a la descarga de los botones 2.0



Si te parece bien, puedes contribuir a que siga creando contenido gratuito haciendo una pequeña donación paypal, tu eliges la cantidad, acepto la voluntad... jeje!!!



Google maps ha estrenado hoy una aplicación para Apple.

A partir de hoy, todos los usuarios de Apple que dispongan o hagan uso de un iPhone, pueden obtener de App Store esta nueva aplicación de google maps para iPhone. Creo que es fantástico que google maps se integre en este tipo de dispositivos.


Gracias a google, esta nueva aplicación está disponible a partir de hoy en más de 40 países y en más de 29 idiomas. Esta aplicación de google maps para Apple, precisa y completa, es espectacular, se puede activar para enviar comentarios con solo agitar el dispositivo, por ejemplo... Se puede utilizar para buscar lugares en los que comprar, establecimientos de todo tipo, cines, hoteles...
La nueva aplicación que google pone a disposición, gratuitamente, de los usuarios de iPhone, es compatible con una gran diversidad de modelos: iPhone 3GS, iPhone 4, iPhone 4S, iPhone 5, iPod touch (3ª, 4ª y 5ª generación) e iPad.
El sistema operativo que utiliza es iOS 5.1 o posterior.

Por cierto, si quieres echar un vistazo, aquí te dejo un enlace a la dirección exacta donde se encuentra esta aplicación dentro del App Store.


Texto en negrita y SEO - Posicionamiento eficaz.

Hay bastante escrito sobre el uso de texto en negrita y sobre como afecta esto directamente al posicionamiento de un sitio web o SEO. Pues bien, en este post te voy a dar mi opinión sobre como debes hacer un uso correcto de las negritas en tu sitio web, para obtener buenas posiciones en los resultados de búsqueda.

Son varias las maneras que hay de resaltar palabras, texto o frases, para hacer entender al navegador que estas son más importantes que el resto de contenido, o, al menos, que así debe considerarlo. Para esto, hacemos uso de etiquetas de título, de subrayado, cursiva... etc. pero, ¿que hay de las negritas?



El uso de las negritas en un sitio web no debe superar entre el 10 - 15% de la densidad total del contenido. Para que lo entiendas mejor: debemos hacer un uso muy limitado de las negritas, más bien casi nada, no debe haber casi negritas en una página web (a no ser que el contenido sea muuuuuy extenso : -).
Te recomiendo poner en negrita más bien palabras clave sueltas, las frases secundarias las resaltamos mejor con subrayado, a no ser que esa frase sea muy corta e importante, en ese caso, la pondría en negrita. Más fácil: dejamos negrita solo para lo que es muy importante, por ejemplo las palabras clave, como te he indicado antes. 

Generalmente su uso no suele tener mucha importancia, además es una de las cosas más sencillas de SEO, pero hay que llevar cuidado con nuestro resaltado en negrita, ya que de hacerlo mal, perderemos posiciones con respecto a otros sitios web que lo hayan hecho bien. Un exceso de negritas confunde a los navegadores, ya que estos no pueden diferenciar las "partes importantes" de las comunes o de menor importancia. No puede haber un texto entero en negrita.

Para que tengas un ejemplo, lo único que tienes que hacer es fijarte en como hago yo uso de las negritas en este post, por ejemplo : -).

Espero que te haya sido útil y un saludo. Recuerda seguirme en las redes sociales, jeje!!!

Ganar dinero viendo publicidad en internet ¿es posible?

Si alguna vez te has preguntado ¿es posible ganar dinero por ver publicidad o visitar sitios web en internet? la respuesta es: Sí. Seguro que en alguna ocasión has buscado alguna fuente de ingresos en internet o la manera de conseguir algo de dinero con tu ordenador, y te has llevado la misma decepción que me llevé yo, al confiar en algunas entidades PTC o similares, que, lamentablemente resultaron ser un fraude...
Pero tengo una buena noticia que darte, he logrado encontrar una entidad que permite ganar dinero desde casa, a cambio de ver publicidad (además de otras opciones), y que realmente paga. Ya he ganado algún dinerillo con este sitio web y efectivamente cumplen con su palabra y realizan los pagos. Aquí tienes una prueba reciente:



Por cierto, esta entidad recibe el nombre de Beruby y ya son varios los años que llevo con ellos. Como te comentaba antes, permiten ganar dinero, nó solo por ver publicidad o visitar sitios web, si no que además, te pagan por compras, registros... etc. Este sitio web te muestra una gran cantidad y variedad de opciones a la hora de conseguir algo de ingresos con internet, es una maravilla.


La cantidad de dinero que ganas depende de varios factores: la cantidad de publicidad que veas, registros o compras + la publicidad que vean tus referidos o invitados. Es decir: si tu has ganado 2€ viendo publicidad, pero has invitado a beruby a dos personas y entre las dos han ganado 5€, también percibes en tu cuenta parte de esos 5€. Y no solo eso, también te pagan por la publicidad que vean los invitados que hayan sido introducidos en beruby por tus invitados directos o amigos. En el sitio web de Beruby te lo explican todo perfectamente.

Si, tipo cadena, como los numerosos fraudes que se ven día a día en muchos sitios, pero con la diferencia de que Beruby si paga y puedo demostrarlo. Además, no es necesario montar la famosa "cadena", para ganar algo de dinero.

Bueno, no te entretengo más, si te animas y quieres probarlo aquí debajo te dejo el enlace. Te aseguro que merece la pena echar un vistazo, es una entidad que lleva ya varios años funcionando. Con la crisis que corre  seguro que a más de uno le viene bien ganar algo de dinero, no? jeje!!!



Que no se te olvide seguirme en las redes sociales, eh?  : -)

Crear sombra en elementos div o imágenes con CSS3

Vamos a crear sombra alrededor de un elemento html, como por ejemplo un div, ayudándonos de CSS3 y javascript. Es algo bastante sencillo; primero voy a definir una nueva clase de CSS en la que aplicaré la sombra mediante propiedades de CSS3. Después le voy a añadir un plugin de javascript llamado PIE.js, gracias al cual resuelvo la incompatibilidad actual de algunos navegadores con CSS3 y consigo conservar la sombra en los elementos, es decir, una correcta visualización de la sombra en casi todos o todos los navegadores de internet. Si quieres crear una sombra con CSS3 y javascript en blogger, entonces es mejor que visites este último link.

Para comenzar, creamos una nueva clase en nuestra hoja de estilos CSS. A esta clase la voy a llamar sombra, lo hacemos de la siguiente manera:


.sombra {
box-shadow: 5px 4px 3px #000;
   -webkit-box-shadow: 5px 4px 3px #000;
   -moz-box-shadow: 5px 4px 3px #000;
}

Te explico un poco lo que he escrito:

"box-shadow: 5px 4px 3px #333"; - Con esto estamos indicando que la sombra se debe desplazar 5px hacia la derecha (primer valor), 4px hacia abajo (segundo valor), y que debe tener un difuminado de 3px. Así mismo, estamos indicando también, mediante el valor #000, que el color de dicha sombra debe ser negro.

" -webkit-box-shadow: 5px 4px 3px #000;
   -moz-box-shadow: 5px 4px 3px #000;" - Debemos escribirlo así también para que los navegadores basados en webkit y mozilla puedan leerlo.

A continuación creamos un div, al cual le aplicamos la nueva clase "sombra" que hemos creado:

<div class="sombra" style="background: red; height: 100px; width: 100px;">

De momento todo fácil no? eso sí, asegúrate de que tu hoja de estilos esté vinculada al sitio web correctamente, si no no servirá para nada : -) . Si lo has hecho todo bien, en tu sitio web se debe ver algo parecido a esto:


Ya hemos creado un div con sombra ayudándonos de CSS3, el problema ahora, es que algunos navegadores, como por ejemplo algunas versiones de Internet Explorer, aún no reconocen o interpretan bien  CSS3, por lo que la sombra no es visible en estos casos... ¿que hacemos entonces? Para solucionar este problema, voy a añadir PIE.js, un plugin de javascript que soluciona este problema y gracias al cual conservaremos las propiedades de sombra de CSS3 en los navegadores que no interpretan bien nuestra hoja de estilos. También tenemos la posibilidad de utilizar PIE.htc, pero yo prefiero utilizar .js, ya que javascript es algo que está a la orden del día.

Después de hacer click sobre el enlace a PIE.js que te facilito un poco más arriba, lo único que tienes que hacer es descargarlo y descomprimir el archivo PIE.js dentro del directorio javascript de tu sitio web. Una vez realizada esta acción, solo nos queda cargar PIE.js, pero para ser más eficaces, sólo lo haremos cuando se trate de Internet Explorer.
Para ello, tienes que introducir el siguiente código entre las etiquetas <head> y </head> del sitio web:

<- [If lt IE 10]>
<script type="text/javascript" src="js/PIE.js"> </ script>
<[Endif] ->

Y por último, solo nos queda escribir un código javascript que nos sirve para invocar o llamar a PIE.js. Aprovechando que ya debes saber como empezar a usar jquery, lo haremos con este framework:

<script type="text/javascript">
$(document).ready(function() {
$(function() {
    if (window.PIE) {
        $('.sombra').each(function() {
            PIE.attach(this);
        });
    }
});
});
</script>

Pues ya está, lo único que queda es subirlo todo mediante FTP o como tú quieras y disfrutar de tu sombra en todos o casi todos los navegadores.

Recuerda seguirme en las redes sociales (si quieres) : -)

Mostrar y ocultar un div o elemento con jquery - slideToggle

En esta ocasión te voy a explicar como mostrar u ocultar un div con jquery. En el post anterior te mostraba que es lo que tienes que hacer para comenzar a trabajar con jquery, además de explicarte como incluir el framework o libreria en tu sitio web.

Pues bien, contando con que ya tenemos la librería o framework jquery incluida en nuestro sitio web, esto no debe resultar nada de complicado. Lo primero que vamos a hacer, es crear un código que nos va a servir, en este caso, para mostrar u ocultar un div, según cual sea su estado. 

En primer lugar vamos a hacer que nuestro código solo entre en funcionamiento cuando la página esté cargada. Para ello creamos el siguiente fragmento de código:


<script type="text/javascript">
$(document).ready(function() {
// Aquí va el resto del código que solo se ejecutará cuando la página haya cargado.
});
</script>

A continuación, voy a seleccionar el botón llamado "mostrarocultar" y voy a asignarle un comportamiento mediante el método click, es decir, le voy a indicar que realice algo al hacer click sobre el botón llamado "mostrarocultar":


<script type="text/javascript">
$(document).ready(function() {
$('#mostrarocultar').click(function() {
});
});
</script>

Y finalmente, voy a asignar un efecto al objeto o div, que será el que se oculta y muestra:

<script type="text/javascript">
$(document).ready(function() {
$('#mostrarocultar').click(function() {
$('#divmostoc').slideToggle(2500);
});
});
</script>

Con el método slideToggle, conseguimos que si el div está oculto se muestre y si es visible, que se oculte. Este es uno de las utilidades de jQuery que más me gustan y de las mejores, en mi opinión.

Lo único que nos queda por hacer, es incluir nuestro código jQuery finalizado, junto a un botón y un div o elemento en nuestro sitio web. Este botón y este div nos sirven perfectamente:

<input type="button" id="mostrarocultar" value="Mostrar / Ocultar" style="font-size:14px;cursor:pointer;margin:15px;padding:5px;"/>

<div id="divmostoc" style="background:#000000;display:none;width:100px;height:100px;"></div>

Colocamos todo entre las secciones <body> y </body> de la página en la que queremos realizar este efecto jquery y lo subimos mediante FTP o como prefieras y... a probar!!! jeje!!!

Aquí tienes un ejemplo de como funciona lo que acabamos de hacer:



Y aquí te he colocado el vídeo que he realizado por si necesitas un poco más de ayuda : -)




Si no te gusta como se muestra / oculta el div, o quieres aprender más sobre jQuery, te invito a que des un paso más, y aprendas el método fadeToggle de jQuery. Espero que te guste, recuerda que estaré encantado de que me sigas en las redes sociales.
Un Saludo!!!

Como empezar a usar jQuery en un sitio web en 3 pasos - Tutorial

En este tutorial, te intentaré explicar como empezar a utilizar jQuery en un sitio web, en sólo 3 pasos. De esta manera se te abrirán las puertas a un fantástico mundo repleto de todo tipo de funciones, animaciones, plugins... se puede hacer muchísimo con jQuery, además es muy fácil, ya verás.

1- Lo primero que debes hacer es dirigirte a la página oficial de jQuery y descargar la última versión de jQuery. A continuación crea un archivo .js con el contenido descargado e introdúcelo dentro del directorio javascript de tu sitio web, a este nuevo documento lo llamamos "jquery-1.8.3.min.js". Pues bien, en este momento, el directorio javascript de tu sitio web debería ser algo parecido a esto:


2 - El segundo paso es hasta más simple que el primero. Vamos a cargar el archivo .js que hemos creado, en nuestro sitio web, como si de otro archivo javascript más se tratara, así de fácil. Por si estás perdido te lo explico todo paso a paso: debes introducir entre las secciones <head> y </head> de la página web en la que quieres utilizar jquery lo siguiente:

<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
si entiendes un poco sobre el tema, sabrás que esta etiqueta puede variar según donde hayas ubicado el archivo .js que contiene jQuery en su interior. En este caso al escribir src="js/  estamos indicando que debe cargar un archivo existente en el interior de la carpeta "js", ubicada en el directorio del sitio web, que es la correspondiente a javascript.  Para que lo entiendas aún mejor, debería quedar algo así:


Otra forma de cargar jquery todavía más simple que la anterior, es hacerlo desde Google. Para ello, basta con que introduzcas entre las secciones <head> y </head> de tu sitio web lo siguiente:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>

Nuestro código quedaría así:


Otros usuarios prefieren cargar desde el repositorio y, sólo en caso de que este falle, entonces hacerlo desde el servidor, para ello, te puede servir este código:
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>// <![CDATA[
!window.jQuery && document.write('<script src="js/jquery-1.8.3.min.js" mce_src="js/jquery-1.8.3.min.js"><\/script>')
// ]]></script>

Basta con introducirlo entre las secciones <head>, donde siempre : -) eso sí, para que éste último código funcione bien, debes realizar antes el primer paso que explico en este post, que es descargar jquery y crear el archivo .js dentro de nuestra carpeta js del directorio del sitio web. ¿Te lías? yo creo que no, es fácil!!!

Y por fin, la última manera de utilizar jQuery de la que yo he oído hablar: otra manera de empezar a utilizar jQuery en un sitio web, es hacerlo ayudándote de la API de javascript de Google, pero este método nunca lo he probado, por lo que mejor lo dejamos así todo que está más bonito, no? jeje!!!

3 - Ahora sí, ha llegado la hora de la verdad y vamos probar jQuery en nuestro sitio web, para confirmar que todo funciona correctamente, el último paso. Voy a facilitarte un pequeño fragmento de código jQuery, que debes introducir entre las etiquedas <body> y </body> de la página en la que quieres probar jQuery, o cargarlo mediante js, como un archivo javascript normal:

<script type="text/javascript">
$(document).ready(function() {
on() { $('#animacion').fadeIn(2000);
$('#botonprueba1').click(funct i$('#animacion').animate({ "left":"0", "top":"0", "width":"100%",
"height":"100%" },2500); }); });
</script>

Nos falta el código de "botonprueba1" que es simplemente un botón que he creado para accionar jquery y probar como funciona:

<div class="centrar"><input type="button" id="botonprueba1" value="Probar jquery" style="font-size:14px;cursor:pointer;margin:15px;padding:5px;"/></div>

y ahora un último fragmento de código, que es el div sobre el que jquery va a ejercer o accionar una animación:

<div id="animacion" style="display:none;position:fixed;background:#000000;widht:100px;height:100px;z-index:10000000;"></div>

Bueno, eso es todo. Espero haberte explicado bien que es lo que puedes hacer para comenzar a utilizar jQuery en un sitio web. Además con animación y todo eh? jeje!!!

Recuerda que si no tienes ningún tipo de conocimientos previos sobre javascript, html, o jquery, puede que te cueste un poco entender este pequeño tutorial o hacerlo que funcione bien, pero si lo lees detenidamente, te darás cuenta de que es muy fácil y seguro que te sale a la primera. Anímate y prueba, no sabes todo lo que te estás perdiendo si no utilizas jQuery.

¿aún tienes dudas? ok, a ver si viendo los dos vídeos que te he preparado, te aclaras un poco más. Espero que te sirvan de utilidad y muchas gracias por visitar mi blog.




Cargando desde repositorio de Google:





Por cierto, una vez que hayas acabado, puedes comenzar a experimentar y utilizar efectos jQuery como éstos.

Facebook Messenger amplia sus barreras

Desde ayer martes, Facebook Messenger ofrece a todos los propietarios y usuarios de dispositivos Android, BlackBerry e Iphone, la posibilidad de utilizar gratuitamente facebook messenger sin necesariamente tener cuenta en facebook.


Así es, aunque no tengas cuenta facebook, puedes descargar facebook messenger en forma de aplicación gratuita e instalarlo en tu dispositivo móvil o android. De esta manera, nos podemos hacer fácilmente con otra aplicación tipo WhatsApp, que estoy seguro de que también nos dará muy buenos resultados.

Bueno, lo mejor será probar esta nueva versión de facebook messenger por nosotros mismos ¿no crees?.
Por cierto, si quieres me puedes seguir en las redes sociales, así estarás al día de todas mis nuevas actualizaciones de contenido  : -) .