Las web messenger - sitios de mensajería online

Según he comprobado, las palabras o términos: messenger web o web messenger, están desarrollando un gran aumento en el volumen de cantidad de búsquedas orgánicas. Esto quiere decir, que, pese a las recientes prohibiciones de utilizar aplicaciones como messenger, en ordenadores públicos, del trabajo, de la universidad, colegios... etc, los usuarios se están saliendo con la suya y siguen conectándose a diversos servicios de mensajería, burlando a sus jefes, profesores, superiores... etc.


¿Qué son las web messenger o sitios web messenger exactamente?

Las web messenger, mayoritariamente son sitios web que permiten la utilización de diversas aplicaciones o sistemas de mensajería, por ejemplo: messenger, yahoo messenger, gtalk... sin necesidad de instalar la aplicación o software en el equipo. Algunos de estos sitios web, también permiten la utilización del sistema en varios modelos y versiones de dispositivos móviles.





¿porque cada día es más gente la que decida utilizar los web messenger?

Como muchos de vosotros sabéis, hay bastantes lugares en los que se trabaja haciendo uso de uno, o varios  ordenadores públicos, de empresa... etc. Todos sabemos que 5 minutos de conversación no perjudican a nadie, o, por lo menos, eso creemos muchos de nosotros, entonces: ¿porque no hacerlo sin correr ningún riesgo, o desde el móvil?

En realidad, los trabajadores, estudiantes, o personas que utilicen un sitio web messenger, no están violando ninguna restricción (bajo mi punto de vista). Si el equipo está bloqueado para que no se pueda instalar dicha aplicación de mensajería u otro tipo de software, pero nos está permitido navegar por internet, realmente respetamos las normas. Mucha gente lo ve de este modo, aunque se podría mirar desde diversas perspectivas y, si nos ponemos en plan pesimista, podríamos deducir que, si que estamos incumpliendo lo que se nos permite hacer... en fin, hay opiniones de todo tipo rondando este tema de las web messenger. ¿y tú, que opinas?



¿Donde encontrar web messenger o portales de este tipo para visitar?

Es muy fácil, lo único que tienes que hacer para visitar una web messenger, es seguir el link que te muestro a continuación, ya verás la cantidad de sitios web de este tipo que existen en funcionamiento. Cada uno de éstos, ofrecen diversas posibilidades e interfaces.


Espero que te guste. Por cierto, ¿has oído hablar sobre qué es facebook messenger?

Otra cosa; que no se te olvide seguirme en las redes sociales, así estarás al día sobre nuevas publicaciones en Miopiblog.

Efecto de rotación mediante CSS3 - rotate - tutorial

En este tutorial te voy a enseñar como crear un efecto de rotación de 360º y aplicarlo a un div, imagen o elemento html, mediante la propiedad rotate de CSS3. Voy a crear un estilo mediante CSS3, el cual hará que una imagen gire 360º, desplazándose un poco hacia la derecha al mismo tiempo. Una manera bastante elegante de mostrar fotografías, o algún div con contenido en su interior. Puedes ver un ejemplo de imagen rotando 360º mediante CSS3 a continuación, es decir el ejmplo de lo que vamos a hacer:


Imgen test rotate

¿Has visto que bien queda? ¿te gusta? venga, pues te voy a enseñar como se hace. Lo primero de todo es crear una clase de estilo CSS3, para posteriormente aplicar ésta a la imagen u elemento html al que queremos aplicar la propiedad rotate de CSS3, para hacer que gire 360º.


.rotacion {
/*Aquí va el resto de código css*/
}

Ahora que ya hemos decidido que nuestra clase para hacer rotar 360º la imagen, se va a llamar .rotacion, solo nos queda crear el resto de código CSS. A continuación te lo muestro comentado, para que lo entiendas bien:


.rotacion {
              -moz-transition: all 3s ease;/*Definimos las transiciones, deben durar 3 segundos*/
    -ms-transition: all 3s ease;/*Definimos las transiciones, deben durar 3 segundos*/
    -o-transition: all 3s ease;/*Definimos las transiciones, deben durar 3 segundos*/
    -webkit-transition: all 3s ease;/*Definimos las transiciones, deben durar 3 segundos*/
    transition: all 3s ease;/*Definimos las transiciones, deben durar 3 segundos*/
    cursor:pointer;/*El cursor adopta forma de mano normalmente, al situarse encima de la imagen*/
    box-shadow: 0 0 10px #f00;/*Definimos la sombra. En este caso, es de color rojo y se difumina 10pixeles*/
   -webkit-box-shadow: 0 0 10px #f00;
   -moz-box-shadow: 0 0 10px #f00;
}

Acabamos de definir el estado que tendrá la imagen cuando esté estable o quieta. Ahora, vamos a indicar, también mediante CSS3, que debe hacer la imagen cuando el cursor del ratón se sitúa sobre ella. Para ello vamos a utilizar la seudoclase :hover de css y la propiedad y valor: transform:rotate de CSS3. Creamos el siguiente código CSS:


.rotacion:hover {
                margin-left: 200px;/*Separamos la imagen un poco de la izquierda al mismo tiempo que gira*/
-moz-transform:rotate(-360deg);/*Comenzamos a aplicar el valor rotate de la transormacion*/
-webkit-transform:rotate(-360deg);
-o-transform:rotate(-360deg);
-ms-transform:rotate(-360deg);
transform:rotate(-360deg);
            box-shadow: 0 0 15px #0026ff;/*Sombra difuminada 15 pixeles de color azul*/
   -webkit-box-shadow: 0 0 15px #0026ff;
   -moz-box-shadow: 0 0 15px #0026ff;
}

Perfecto! ahora solo falta aplicar el estilo mediante las etiquetas <style>y </style> o mediante un vínculo a una hoja de estilo en cascada, en la que previamente habrás introducido el código CSS que hemos creado, e introducir la imagen con la clase asignada en el documento html. Para introducir la imagen, debes crear una etiqueta html como la siguiente:


<img alt="Imagen test rotate" title="Imagen de prueba css3" class="rotacion" src="http://files.posicionindex.webnode.es/system_preview_detail_200000000-cc322cd2b7-public/portada%20-%20Mi%20web%20en%20Google%20en%205%20horas%20SEO.JPG" />

¿has visto que fácil? ya está, ya has aprendido a crear y aplicar un efecto de rotación de 360º a una imagen, div u elemento html, mediante CSS3.
Por cierto, parece que te gusta estar a la última en todo esto de Html5 y CSS3, verdad? si te apetece, puedes echar un vistazo a este tutorial y aprender a crear un menú horizontal básico mediante html5 y CSS3. Puede que también te interese leer algo que he escrito, sobre como crear una web mediante html5, o aprender a crear un formulario mediante html5 y CSS3.
Si lo prefieres, puedes echar un vistazo a este link y visualizar mis últimos artículos y tutoriales sobre CSS3.

Por cierto, no te olvides de seguirme en las redes sociales, así estarás siempre al día sobre nuevas publicaciones en Miopiblog. Ups! por poco se me olvida... si te interesa el libro de la imagen de ejemplo, debes saber que es obra mía. Mediante éste, te enseño a indexar y posicionar un nuevo sitio web en Google de manera rápida y efectiva. Visitando el siguiente link, puedes saber algo más acerca de este libro de posicionamiento y SEO, aunque si buscas en Google, "comprar libro seo" el enlace al sitio web aparece en la primera posición de la primera página de resultados de búsqueda orgánica : ) .

Un saludo y espero que te haya gustado el tutorial ; ).

Separados y divorciados - Nueva red social / comunidad hispana

En esta ocasión, me gustaría darte a conocer otra nueva red social, de reciente creación: Separados y Divorciados (http://separadosydivorciados.com). Separados y Divorciados, la nueva red social y comunidad hispana, es un lugar perfecto para hacer nuevos amigos, conocer gente y recibir apoyo, tras la ruptura de una relación. Pero no solo eso, aunque no hayas roto en tu relación amorosa, esta red social te abre sus puertas para compartir eventos, actividades, debates, grupos... y mucho más, con personas interesadas en hacer nuevos amigos y conocer gente.


Tienda virtual, psicóloga, hoteles, abogados, apoyo personal, buscar amistades... hay infinidad de secciones y ventajas, a las que tendrás acceso si decides utilizar la red social y comunidad Separados y Divorciados. Por cierto, permiten actualizar a membresía premium o vip, ¿quieres probarla? me acabo de enterar de que actualmente hay una promoción en curso y, si te registras, te regalan 4 meses de miembro vip, todo un lujo de detalle.

¿a que esperas? ¿te interesa? pues echa un vistazo a esta nueva red social para hacer amigos.

Crear menú horizontal simple mediante html5 y CSS3 - Turorial

En este tutorial, te voy a enseñar a crear un menú horizontal simple, utilizando html5 y CSS3. El lenguaje html5, lo vamos a utilizar para crear la estructura del menú horizontal simple. Por otro lado, el diseño de nuestro menú de ejemplo del tutorial, estará basado en CSS3. Además, te voy a explicar que tienes que hacer para que este menú funcione correctamente en todos los navegadores, y versiones de Internet Explorer.

Menú web


Para comenzar el tutorial, voy a crear la estructura básica de nuestro menú horizontal html5 de ejemplo. Para crear la estructura de un menú html5, utilizamos la etiqueta <nav>, dentro de la cual debemos insertar una lista html. Para que lo entiendas mejor, en el siguiente ejemplo, te muestro como podría quedar la estructura de un menú horizontal simple, realizado mediante html5:


<nav>
        <ul>
            <li><a href="http://miopiblog.blogspot.com.es/search/label/SEO" target="_blank">SEO</a></li>
            <li><a href="http://miopiblog.blogspot.com.es/search/label/tutoriales" target="_blank">Tutoriales</a></li>
            <li><a href="http://miopiblog.blogspot.com.es/search/label/crear%20web" target="_blank">Crear Web</a></li>
            <li><a href="http://miopiblog.blogspot.com.es/search/label/css3" target="_blank">CSS3</a></li>
            <li><a href="http://miopiblog.blogspot.com.es/search/label/dise%C3%B1o%20web" target="_blank">Diseño web</a></li>
            <li><a href="http://miopiblog.blogspot.com.es/search/label/google" target="_blank">Google</a></li>
            <li><a href="http://miopiblog.blogspot.com.es/2013/02/seorimicuaro-que-es-y-para-que-sirve.html" target="_blank"><strong>SEORIMÍCUARO</strong></a></li>
        </ul>
        </nav>

Si quieres, puedes copiar el código y personalizar el menú a tu gusto, es decir, sustituir las direcciones web por las que quieras y los enunciados o términos que aparecen en los botones del menú. El resto, lo puedes dejar igual.

Muy bien, hasta el momento, se debería ver esto:






Ahora llega el turno de dar estilo al menú, utilizando CSS3. Lo primero que vamos a hacer en cuanto al estilo se refiere, es indicar la anchura y altura del menú html5 de ejemplo. Lo hacemos de la siguiente manera:


nav{
    width: 850px; /* Anchura del menú */
    height: 25px; /* Altura del menú */
    margin: 0 auto;
}


Yo en este caso he elegido un ancho de 850px y una altura de 25px para el menú. No obstante, te recomiendo modificar el ancho por la medida que a tí te venga bien (normalmente, el ancho debe ser igual o algo menor, a la anchura del elemento en el cual va a ir insertado el menú) . Ten en cuenta que si el ancho del menú es demasiado bajo y los botones no caben, cuando el menú esté termiando, éstos, se agruparán en una segunda fila, como en la imagen:


Continuamos dando al menú algo más de estilo mediante CSS3. Ahora vamos a indicar que no queremos que se muestre el puntito negro de la izquierda de los botones ó <li> de la lista. También tenemos que alinear los botones del menú, ya que nuestra estructura html5, hasta el momento, muestra una lista simple de html.

Creamos el siguiente código CSS:


nav ul{
    list-style: none; /* Eliminamos el puntito negro */
    display: block;
    }
 
nav ul li{
    float: left; /* Alineamos los botones del menú */
    margin: 0 5px; /* Distancia de separación entre botones */
}


Hasta el momento, lo que hemos desarrollado debería mostrar algo como lo de la imagen:


Y el último paso que nos queda, es dar un poco de colorido al menú, quitar el subrayado de los enlaces, incluir las pseudoclases de CSS... en fin, creo que este código, comentado completamente, te ayudará a comprender como hacerlo:


nav ul li a, nav ul li a:link{
    text-decoration: none; /* Quitamos el subrayado de los enlaces */
    font-size: 18px; /* Tamaño del texto del menú */
    color: #F0F8FF; /* Color del texto */
    padding: 3px 10px; /* Establecemos ancho y alto de los botones */
     cursor: pointer;
    transition: all 1s linear; /* Comienzan las transiciones CSS3 */
-moz-transition: all 1s linear;
-webkit-transition: all 1s linear; 
-o-transition: all 1s linear;
background-color: #078d12; /* Color de fondo para navegadores sin soporte CSS3 */
background: -webkit-radial-gradient(#00008B, #00FF7F); /* Degradado de fondo CSS3 */
   background: -moz-radial-gradient(#00008B, #00FF7F); /* Degradado de fondo CSS3 */
   -moz-border-radius: 7px 7px 0 0; /* Bordes redondeados */
-webkit-border-radius: 7px 7px 0 0;
}
 
nav ul li a:visited, nav ul li a:active{
    color: #ffd800; 
}
nav ul li a:hover{
    background: #00008B; /* Cambiamos color de fondo cuando cursor del ratón esta encima */
    color: #00ff90; /* Cambiamos color de texto */
  }

Por cierto, un último detalle: para que el menú funcione correctamente en los navegadores que no soportan aún html5, como por ejemplo, algunas versiones de Internet Explorer, deberás hacer algo. Yo te recomiendo utilizar html5shiv de Google code. Puedes usar este medio, introduciendo entre <head> y </head> el siguiente código:


<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->


Perfecto! ya tenemos nuestro menú horizontal simple, creado y listo para funcionar. Si te apetece, puedes crear este ejemplo de menú html5 y CSS3, y visualizarlo / comprobar su funcionamiento.


Recuerda que, a pesar de utilizar html5shiv, en versiones inferiores a internet explorer 10, se ve algo diferente, pero también funciona correctamente.

Otra cosa, si quieres, también puedes descargar los códigos del menú html5 y CSS3 de este post.




Utilizar WebP para mejorar velocidad web

WebP, tiene mucho que ver con la velocidad y optimización de un sitio web. Como ya sabrás, un sitio web optimizado y rápido, siempre tiene más posibilidades de obtener buenas posiciones en los resultados de búsqueda, y de ofrecer una buena experiencia al usuario, que uno que no lo esté. Pues bien, en este post te voy a explicar lo que es WebP, para qué sirve y cómo convertir imágenes JPEG ó PNG a WebP, para mejorar la velocidad de una web.




¿Qué es WebP y para qué sirve?


WebP de Google, es un formato gráfico que Google desarrolló, válido para ser utilizado en sitios web..
Básicamente, un archivo WebP, está compuesto por los datos VPL8 de la imagen y un contendor RIFF. Al utilizar WebP, para cambiar el formato de imágenes en formato PNG y JPEG a formato WebP, puedes conseguir mejorar la velocidad de carga web hasta un 35% (en la mayoría de casos).

¿Cómo reduce el peso de las imágenes WebP?


WebP, utiliza un método de compresión bastante efectivo mediante el cual, puedes mejorar la velocidad de una página web notablemente. La compresión de archivos gráficos, se puede realizar con pérdidas o sin pérdidas, es decir: perdiendo algo de calidad o no.
El formato WebP, soporta la transparencia, aunque para lograr esto, los bytes de la imagen deben aumentar un 22%, aproximadamente.

¿Convertir imágenes de formato JPEG o PNG a formato WebP?


Se puede cambiar el formato de una imagen JPEG ó PNG a WebP, utilizando WebP Converter. Puedes echar un vistazo (está en inglés) a esta página de Google en la que explican como preparar la plataforma e instalar WebP Converter. Y éste, es el enlace a la página de descarga e instalación de WebP.
Después, tendrás que informarte sobre el funcionamiento del compresor WebP.
Por cierto, para que los archivos WebP sean visibles en windows, debes descargar e instalar el Codec WebP.

Otra manera de transformar imágenes JPEG o PNG a formato WebP, es utilizando alguna de las aplicaciones online para transformar imágenes a WebP. De esta forma, cambiar el formato de imagen, te resultará mucho más fácil y rápido.



Bueno, pues esto es todo, espero que te haya gustado el post y que tengas claro lo que son los archivos con formato WebP, para qué sirven y cómo se utilizan. Una cosa más: las imágenes en formato WebP, se ven natívamente en los navegadores Chrome y Opera, para lograr una correcta visualización de este formato en el resto de navegadores, puedes que utilizar javascript.

No te olvides de seguirme en las redes sociales para estar al día sobre nuevas publicaciones.


Ha llegado facevoz, la nueva red social creativa

En esta ocasión te quiero dar a conocer una nueva red social que creo que pronto llegará a lo más algo: facevoz. Facevoz, es la red social creativa, que desde no hace mucho está disponible, de forma gratuita, para todos los usuarios que deseen registrarse en ésta y utilizarla. Tras probar dicha aplicación, tengo que afirmar que me encanta facevoz.





La interfaz que utiliza facevoz, es bastante parecida a la que nos ofrecen nuestros amigos de facebook, por lo que no te costará mucho familiarizarte con la nueva red social creativa y aprender a utilizarla.





Además, facevoz.com, permite la creación de grupos y páginas web, como en facebook. Si te apetece puedes echar un vistazo a Miopiblog en facevoz, seguro que te gusta. Esta funcionalidad puede ser aprovechada para muchas cosas.
Si creas tu propia página en facevoz, tienes también la posibilidad de añadir una caja Like Box un botón like de facevoz, en tu sitio web. Lo único que hay que hacer es seguir un proceso muy parecido al que normalmente se realiza para añadir una like box de facebook a un sitio web, es muy simple. Entre otras muchas opciones de personalización más, facevoz, te permite importar o crear tus propios estilos utilizando CSS, toda una pasada! no crees?






Bueno, no te cuento más, lo mejor será que visites tu mismo facevoz.com y empieces a disfrutar de todas las posibilidades, funciones y ventajas que esta nueva red social pone al alcance de nuestra mano. 
Por cierto, ¿te has hecho ya fan de Miopiblog en facevoz? jeje!!! 
No te olvides de seguirme en las redes sociales o de suscribirte a mi newsletter, así, estarás al día de todas mis nuevas publicaciones.



SEORIMÍCUARO - que es y para que sirve

¿Qué es SEORIMÍCUARO?


SEORIMÍCUARO, es la palabra que forobeta nos ha encargado utilizar, para ganar el concurso de posicionamiento SEO - SEORIMÍCUARO 2013. Intentaré, por todos los medios, posicionar en primer lugar el término SEORIMÍCUARO, algo que me costará bastante trabajo, ya que la competencia es extensa y de calidad, con respecto a las búsquedas orgánicas utilizando la palabra SEORIMÍCUARO.

¿entonces, para qué sirve SEORIMÍCUARO?


Fácil; en este caso, la palabra SEORIMÍCUARO, sirve para ganar el concurso de forobeta - SEORIMÍCUARO 2013. Es decir: posicionando una página web en los buscadores, para que cuando un usuario realice una búsqueda orgánica, utilizando el término: SEORIMÍCUARO, tu site, aparezca en primera posición. De esta manera, puedes ganar varios premios que nos ofrece forobeta en esta edición del concurso SEORIMÍCUARO.

Historia de SEORIMÍCUARO


La verdad es que la historia de SEORIMÍCUARO no parece ser muy extensa aún. Debido a la reciente creación del término, por parte de nuestros amigos de forobeta, hasta el momento no ha tenido lugar ningún acontecimiento realmente importante con relación a esta palabra.

No obstante, espero que un futuro no muy lejano este término sea utilizado para crear un párrafo cuyo encabezado esté constituido por la palabra: historia. La palabra SEORIMÍCUARO cada vez es más conocida.

Procedencia de SEORIMÍCUARO


Como todos sabemos, SEORIMÍCUARO procede de las mentes que impulsan forobeta. Por cierto, mi nick en forobeta es Tonyweb, que quede claro, eh? jeje!
Por ese motivo, se puede considerar que el país de procedencia de SEORIMÍCUARO es en el que está hospedado forobeta.

SEORIMÍCUARO en otros idiomas


SEORIMÍCUARO, es una palabra que se escribe igual en todos los idiomas. Su pronunciación puede variar según la fonética del país en sí.



Pues esto es todo, espero que te haya quedado claro que es, para que sirve, la historia y procedencia de la palabra SEORIMÍCUARO en todos los idiomas. Sabes ya quien va a ganar el concurso, no? jeje!!!

Encuentra tu camino a Oz con Google

Encuentra tu camino a Oz, es el nombre que Google ha decidido utilizar para su nuevo proyecto, lanzado ayer y creado con ayuda de Disney y Unit9. Este experimento de Google, está basado en el nuevo lanzamiento de Disney (8 de marzo de 2013), y ha sido creado mediante las más nuevas tecnologías de desarrollo y programación.




Las tecnologías que se han utilizado para realizar el experimento, son WebGl y CSS3, además, dispone de una versión para móviles que funciona estupendamente. Esta aplicación, permite al usuario introducirse en un circo virtual, dentro del cual puede realizar diversas acciones e interactuar de una forma muy novedosa.


Además te puedes tomar la libertad de realizar algunos cambios mediante las herramientas de desarrollo de google y así, comprobar mejor como funciona o modificar el experimento a tu antojo.

Bueno, ¿a que esperas? encuentra tu camino a Oz, jeje!!!


Mi web en google en 5 horas - Nuevo libro de posicionamiento / SEO

¡Hola de nuevo! ¿quieres aprender definitivamente a posicionar e indexar un nuevo sitio web en Google, de una manera rápida y efectiva? Si la respuesta es afirmativa, creo que leer mi nuevo libro, también disponible en versión ebook: "Mi web en Google en 5 horas - SEO / Posicionamiento efectivo", te va a resultar muy útil.



Gracias al libro y ebook, puedes aprender a indexar un nuevo sitio web en google de una manera rápida y sencilla, además al final del libro te propongo un ejercicio práctico mediante el cual puedes comprobar como indexa y posiciona un nuevo sitio web, Google. ¿quieres saber más?  Te invito a echar un vistazo a la web de mi nuevo libro SEO.

Por cierto, si estás mal económicamente o no puedes ni te interesa comprar el libro, te recomiendo echar un vistazo a este artículo en el que te muestro algunas recomendaciones y consejos para ser el primero en Google.


Espero que te guste, y no olvides seguirme en las redes sociales. Un saludo!!!