Como hacer una imagen animada de un corazón latiendo con CSS?

Hace unos días un amigo me preguntó como aplicarle un efecto de latido a una imagen utilizando CSS dado que estaba en tiempos de renovación y quería darle un lavado de cara a su sitio, así que pensando en algo que tenga que latir, pues claro que mejor que un corazón, una luz lo mío!
Ya vimos como rotar una imagen con efecto rotate, así que ahora veamos como conseguir el efecto de latido e incorporarle también el uso de opacidad para ir variando su transparencia.
Aquí dejó el código CSS que pueden incorporar a su plantilla y el código HTML.

Código CSS

#tamaño_corazon {
position:absolute;
top:80px;
left:60px;
width:300px;
height:275px;
}
#fondo_corazon {
background:#011;
border-radius:200px;
width:400px;
height:400px;
}
#latido {
animation:5s latido infinite;
-webkit-animation:5s latido infinite;
-moz-animation:5s latido infinite;
-o-animation:5s latido infinite;
-ms-animation:5s latido infinite;
width:inherit;
height:inherit;
}
@keyframes latido {
0% {
transform:scale(1);
opacity:1;
}
47% {
transform:scale(1);
opacity:0.7;
}
48% {
transform:scale(0.8);
opacity:0.9;
}
50% {
transform:scale(1.4);
opacity:0.7;
}
52% {
transform:scale(0.8);
opacity:0.9;
}
54% {
transform:scale(1);
opacity:0.7;
}
100% {
transform:scale(1);
opacity:0.9;
}
}
@-webkit-keyframes latido {
0% {
-webkit-transform:scale(1);
opacity:1;
}
47% {
-webkit-transform:scale(1);
opacity:0.7;
}
48% {
-webkit-transform:scale(0.8);
opacity:0.9
}
50% {
-webkit-transform:scale(1.4);
opacity:1;
}
52% {
-webkit-transform:scale(0.8);
opacity:0.9;
}
54% {
-webkit-transform:scale(1);
opacity:0.7;
}
100% {
-webkit-transform:scale(1);
opacity:0.9;
}
}
@-o-keyframes latido {
0% {
-o-transform:scale(1);
opacity:1;
}
47% {
-o-transform:scale(1);
opacity:0.7;
}
48% {
-o-transform:scale(0.8);
opacity:0.9
}
50% {
-o-transform:scale(1.4);
opacity:1;
}
52% {
-o-transform:scale(0.8);
opacity:0.9;
}
54% {
-o-transform:scale(1);
opacity:0.7;
}
100% {
-o-transform:scale(1);
opacity:0.9;
}
}
@-moz-keyframes latido {
0% {
-moz-transform:scale(1);
opacity:1;
}
47% {
-moz-transform:scale(1);
opacity:0.7;
}
48% {
-moz-transform:scale(0.8);
opacity:0.9
}
50% {
-moz-transform:scale(1.4);
opacity:1;
}
52% {
-moz-transform:scale(0.8);
opacity:0.9;
}
54% {
-moz-transform:scale(1);
opacity:0.7;
}
100% {
-moz-transform:scale(1);
opacity:0.9;
}
}
@-ms-keyframes latido {
0% {
-ms-transform:scale(1);
opacity:1;
}
47% {
-ms-transform:scale(1);
opacity:0.7;
}
48% {
-ms-transform:scale(0.8);
opacity:0.9
}
50% {
-ms-transform:scale(1.4);
opacity:1;
}
52% {
-ms-transform:scale(0.8);
opacity:0.9;
}
54% {
-ms-transform:scale(1);
opacity:0.7;
}
100% {
-ms-transform:scale(1);
opacity: 0.9;
}
}

Código HTML

<div id="fondo_corazon">
<span id="tamaño_corazon">
<img id="latido" src="url de la imagen" />
</span>
</div>

A continuación puedes ver como queda el efecto!

El tiempo de latido se puede modificar cambiando en #latido{} el valor 5s en :

animation:5s latido infinite;

Tweet

Son realmente necesarias las palabras clave en un título?

Como hemos mencionado en la entrada "como crear títulos atractivos" , poder elaborar un titular con magnetismo para el lector es un arte que lleva un tiempo de aprender. Es una delicada combinación de ingredientes que permitan obtener el objetivo deseado, teniendo presente dos factores, los lectores y el posicionamiento.

Entonces que sucede en el campo de optimización de los motores de búsqueda?

En realidad es una relación de compromiso:

Un título puede ser muy atrayente para un lector, pero si no logramos posicionar el post, posiblemente quede perdido por la décima página de Google y nadie lo verá.

Un título orientado a los buscadores, puede lograr buen posicionamiento gracias al SEO, pero si el titular no despierta la curiosidad del lector entonces no se logrará el click deseado sobre nuestro link que lleve al visitante a leer nuestro contenido.

Y como en todos los ordenes de la vida también están los extremos, donde encontramos a bloggers dedicados a "escribir para los seres humanos", que se permiten ignorar la noción de keyword research para la escritura del titular.
O aquellos que centran primero su estrategia en el seo sin dar tanta importancia a los destinatarios del mensaje.

Pero entonces a que conclusión llegamos? Las palabras clave son importantes y va mas allá de las razones de SEO mencionadas, investigar las palabras clave es algo mágico, es una posibilidad que tenemos al alcance de nuestra mano y que nos permite conocer los gustos, las preferencias e intereses que tienen las personas. Antes de los motores de búsqueda, no había ninguna manera de saber las palabras exactas que un nutrido grupo de gente usaría al pensar en un cierto asunto. 
Así que si usted esta escribiendo cualquier tipo de titular, debería estar haciendo investigación de palabras clave.
Usted debe ser creativo para poder preparar esa receta mágica que es su encabezado intentando combinar 2,3 o 4 palabras clave sin perder el magnetismo que el título debe tener!
Por otra parte,es buena idea centrarse en las frases del nicho que pueden resultar en menor tráfico individualmente, pero que tienen competencia baja.
Esto es perfecto para escribir encabezados para los seres humanos,las frases de nicho son mucho más específicas, y la especificidad de un titular es buena.
Hay que tener presente evitar la generalidad porque podemos aparecer en búsquedas de personas que están interesadas en un tema diferente al nuestro.

Supongamos que nuestro nicho es de sombreros de paja, y estamos pensando el título del artículo, se nos ocurrió el siguiente:

¿Como hacer sombreros en 15 minutos?

Como podemos ver sombreros es una palabra clave genérica que nos retorna mas de 600.000 posibilidades pero que es demasiado "amplia" para lo que pretendemos.

Pero si ahora intentamos mejorar nuestro titulo la cosa puede cambiar:

¿Como hacer sombreros de paja en 15 minutos?


 Ahora los resultados de la búsqueda son 71200, analicemos nuestro titulo y veamos si cumple alguna de las condiciones mencionadas en nuestro anterior post sobre como crear títulos atractivos.

1- Titular con menos de 65 caracteres.
2- Incorporar una pregunta del tipo como/porque.
3- Incluir 2,3 o 4 palabras clave.

¿Como hacer sombreros de paja en 15 minutos?  

1- Nuestro titular tiene 44 caracteres.
2- Incorporamos una pregunta del tipo como.
3- Tenemos como palabras clave sombreros y paja.

No parece estar mal, pero si se nos ocurre podríamos agregar alguna palabra clave mas y algún otro consejo ya visto... 

Al fin! ¿como hacer sombreros de paja canotier en 15 minutos?

En esta ocasión Google nos retorna 206 posibilidades y uno de esos 206 podemos ser nosotros, revisemos nuevamente como quedó conformado el contenido de nuestro encabezado. 

1- Nuestro titular tiene 61 caracteres.
2- A la pregunta le adicionamos dos palabras que están queriendo indicarle al lector que después de mucho tiempo "al fin" va a poder resolver un determinado problema o necesidad.
3- Tenemos tres palabras clave, sombreros , paja y canotier.

Existen herramientas gratuitas como pueden ser Google Adwords tools y Google trends que nos permiten conocer las competencias y tendencias de nuestras palabras clave y ayudarnos a seleccionar las mas convenientes!   

Si le pareció interesante este post, me ayudaría compartiéndolo, en la próxima entrada veremos mas sobre como generar titulares espectaculares, éxitos! 

Tweet

Como crear títulos atractivos (I)

Sin lugar a dudas aquellas personas que tienen la capacidad de escribir atrapantes títulos para sus blogs, revistas, libros o boletines, tienen en gran medida asegurada la lectura del contenido que precede a ese increíble titular. Los titulares son la primera impresión que un lector se lleva, sin una promesa convincente que convierta a un navegador en un lector, de nada servirán el resto de sus palabras, sencillamente porque nadie las leerá.
Algunas estadísticas interesantes nos indican que en promedio sobre diez personas que leen un titular, solo dos de ellas se verán impulsadas a leer el resto del contenido.

Este es el secreto del poder de su título, y será determinante para llegar al objetivo final, en algunos casos puede ser una llamada a la acción para comprar un producto, obtener mas retweets, aumentar el tráfico, etc . Así que es bastante obvio que  lograr un espectacular titular, mejora sus probabilidades de vencer los promedios y conseguir que el contenido sea leído por un porcentaje mayor de personas. Vamos a iniciar una serie sobre como escribir titulares exitosos que le permitirán orientarlo para que pueda conseguir esos títulos atrapantes que llevan a que nadie quiera dejar de leer el contenido que viene a continuación.

# El titular antes que el contenido

Posiblemente usted tendrá una idea básica para el tema de su entrada en el blog, boletín o carta de ventas. Luego con esa idea en la cabeza se busca un titular impactante antes de escribir una sola palabra en el cuerpo del artículo. Pero cual es la razón para hacer esto? Su titular es una promesa para los lectores,su trabajo es comunicar claramente el beneficio que podrá ofrecer al lector a cambio de su valioso tiempo.
Las promesas tienden a hacerse antes de ser cumplidas, para dejarlo mas claro el titular es la promesa y el contenido debe cumplir con esa promesa, esto nos brinda el beneficio de cumplir expresamente la promesa que realizamos en el titular.
Tratar de cumplir con una promesa que no ha hecho aún dificulta el camino  y a menudo conduce a un titular intrascendente, un titular mal elaborado permite que buenas obras pasen desapercibidas.

# Los archivos de golpe

Cuando los escritores se encuentran en algún proyecto de escritura para un cliente puede suceder que la creatividad se tome unas vacaciones y se puede poner en riesgo el éxito del producto.
Cuando experimentamos este bloqueo hay algunas herramientas a las que se puede recurrir, una de las formas de lograrlo es mediante un "archivo de golpe". Un "archivo de golpe" es un colección de encabezados, anuncios, folletos y frases SEO que funcionan y generan el impacto que se esta buscando.

Vamos a mencionar a modo de ejemplo algunos títulos de alto impacto y diferentes temáticas:

Descubra los <número> simples pasos que me permitieron lograr un ingreso de <número> en <período de tiempo>

Descubra el camino para lograr <metas>

<número> creativas ideas para <metas>

<número> verdadades sobre <metas> que usted debería saber

1- Descubra los cinco simples pasos que me permitieron lograr un ingreso de cuatro cifras en dos meses.
2- Tres consejos importantes para que pueda ser adiestrador de perros.
3- Al fin, usted se enterará como bajar de peso en una semana.
4- Siete consejos para evitar la caída del cabello.
5- Construya su negocio online durante la recesión.

Dentro de los beneficios, que pueden incluir los titulares podemos encontrar frases como:

1- El lanzamiento del año!
2- El primero de su clase!
3- ¿Porque pagar mas?
4- Asegure su copia por solo $ 5
5- Duplique sus ganancias
6- Dispare sus ventas
7- La formula paso a paso para hacer dinero en internet
8- Ponga su negocio en piloto automático
9- Ahorre tiempo con el nuevo plugin editor de texto! 
10- Si actúa ahora usted también se lleva dos libros de marketing sin cargo! 

# Despertar el interés

Las personas quieren obtener la información que buscan lo antes posible, aquellos títulos que traen un contenido con información están alimentando el hambre de los lectores que tienen sed de más y esto nos generará mas visitas y clicks sobre nuestro artículo.

Ejemplo:"Dormir menos de 3 horas disminuye 50% los reflejos"   

# La longitud 

Títulos cortos son mas efectivos, mantener titulares con menos de 65 caracteres  

# Las palabras clave

Poder incorporar palabras clave dentro del título es una muy buena decisión con respecto al SEO. En este punto hay que tener presente que encontrar un equilibrio es lo ideal, de nada sirve optimizar un título para los buscadores si deja de ser interesante para el lector.

# Despertar el interés con preguntas

Los títulos en forma de pregunta generan en los lectores un interés por conocer la respuesta, lo que los impulsa a buscar la misma en su contenido. Utilizar además las palabras ¿Porque? o ¿Como? es también una gran idea. 

Ejemplo:"¿Porque se debe utilizar CSS?

# Las listas

Otra de las cosas que aman los lectores son la agrupación de tips o consejos para resolver un determinado problema.

Ejemplo:"7 consejos nunca revelados para evitar la caída del cabello" 

# Otras palabras mágicas

Como hemos visto hay frases y palabras que tienen una atracción fatal! Para finalizar este capitulo vamos a mencionar algunas mas:

1- Como crear________
2- Guía para principiantes________
3- ¿Porque?/¿Como? ________
4- Todo lo que siempre quisiste saber sobre _________
5- Trucos para _________
6- _____para dummies

En nuestra próxima entrada hablaremos sobre las keywords en los títulos con mas detalle, éxitos!

Tweet

Porque se debe utilizar CSS?

El propósito de CSS es proporcionar a los webmasters más control sobre el diseño de páginas y visualización que ofrece HTML. Con HTML solo, hay varios trucos de codificación que se utilizan para ayudar a lograr el diseño de la página deseada,el problema con eso es que esos trucos a menudo no funcionan de la misma forma en todos los navegadores. Los estándares CSS fueron diseñados para que estos trucos ya no sean necesarios, por lo que CSS es mucho más predecible y confiable que recurrir a viejas recetas mágicas.
Haciendo una analogía libre, supongamos que decimos que las paredes de una casa serían la estructura y que las mismas llevan un recubrimiento, colores y contenido a colocar sobre estas paredes,bajo esta situación cuando se usa correctamente, HTML define la estructura de su página web mientras que CSS define el aspecto.

¿Cuáles son estilos de una página?

Los estilos son lo que usted decida, dentro de la estructura del lenguaje. Por ejemplo, si desea que todos sus títulos con H1 se muestren con texto de color rojo, puede crear la regla que defina este estilo. Una vez que se crean las reglas, cada vez que use un encabezamiento H1 será en texto rojo.
Crear una regla no es tan difícil como parece, una regla de estilo es simplemente definir como se comporta un elemento HTML.
Entonces veamos como pondríamos el texto en rojo, para escribir la regla de estilo para que todos los títulos de H1 se representen en el texto con color rojo, yo crearía la regla en mi hoja de estilos de la siguiente manera:

H1 {color: red;}

No parece demasiado difícil no? Realmente no es difícil,es sólo una cuestión de aprendizaje, al igual que con HTML. Comparemos HTML y CSS para ayudarle a visualizar las similitudes y diferencias.

         
El selector CSS es simplemente el elemento HTML para el que desea establecer una regla. El atributo HTML y la propiedad CSS reciben un valor.
Un elemento HTML modifica su valor de la siguiente manera:

1-Dando al elemento HTML un atributo y valor.
2-Dando al selector CSS una propiedad y valor.

Para decirlo mas claro, ambos funcionan del mismo modo, sólo utilizan diversos términos y formato.

Las ventajas de usar CSS

1-Sólo tenemos que crear una regla para efectuar el estilo que deseamos. Con HTML, hay que considerar el atributo en cada uso del elemento.
2-Con CSS se puede cambiar un archivo y que ese cambio se refleje en cada página de su sitio; mientras que con HTML, tiene que encontrar y hacer el cambio en cada lugar de cada página que utiliza ese elemento.

Con CSS también podemos:

1-Establecer márgenes de página diferente para todas las partes de su página.
2-Establecer el tamaño de fuente para cualquier elemento de texto en la altura exacta que desee.
3-Resaltar palabras sueltas, párrafos completos, partidos o incluso individuales.
4-Colocación exacta de elementos.
5-Ajustar bordes, estilos de bordes, fondos, márgenes y relleno para cualquier elemento HTML.
6-Establecer la fuente para las tablas, sin necesidad de recodificar una fuente en cada celda de la tabla.
7-Rotar elementos.( Ver como rotar una imagen).
8-Hacer la primera letra de cada párrafo diferente, conjunto letter-spacing, cambiar el espacio entre líneas de texto y mucho, mucho más!

La única desventaja de usar CSS es que no todos los navegadores ofrecen soporte completo para él... aún.

Tweet

6 prácticas SEO para la etiqueta rel=canonical

Que se puede hacer cuando un sitio tiene varias páginas donde muchas de ellas pueden tener un contenido similar, o con los mismos elementos? Supongamos el caso de una zapateria que en su sitio web presenta una clasificación que muestra zapatos ordenados por precio y otra que los muestre agrupados por color, Google podría interpretar que existe contenido duplicado, pero podemos ayudar a los buscadores definiendo una página canónica.

Que es una página canónica 

Entre varias páginas con contenido similar podremos seleccionar la que consideremos mas apropiada(página canónica) para que se muestre al realizar determinada búsqueda.

Volviendo al ejemplo de los zapatos, supongamos que la página de mayor aceptación del público es aquella donde se muestran todos los zapatos de color blanco que tiene la zapatería, entonces podremos indicarle a Google que se muestre dicha página en preferencia sobre las otras, si no hacemos esto de todas formas Google seleccionará conforme a sus algoritmos la página que a su criterio cumple con las expectativas de búsqueda del usuario.

http://www.zapatitosparatodos.com/zapatitos-blancos.html

http://www.zapatitosparatodos.com/zapatitos-por-precios.html

http://www.zapatitosparatodos.com/zapatitos-todos-los-colores.html

  

Para definir una página canónica para los motores de búsqueda vamos a utilizar un elemento <link> con el atributo rel="canonical" en la sección <head> de la versión no canónica de la página.

<link rel="canonical" href="http://www.zapatitosparatodos.com/zapatitos-blancos.html"/>

Y esto lo añadimos en la sección <head>de las  páginas restantes.

Para ayudarle a aprovechar al máximo su rel = canonical, aquí hay algunas buenas prácticas SEO que se deben tomar en cuenta.

6 Prácticas de SEO usando rel = canonical

1-Canonizar solo si la duplicación de contenido es grande.Temas similares con estrecha coincidencia, pero no exactamente coincidentes en contenido no califican.

2-Utilice únicamente un rel = canonical por página.Cuando hay más de un rel = canonical, los demás rel = canonical serán ignorados.

3-Decidir la URL que desee mostrar - puede hacer que cualquiera de las páginas aparezcan en los resultados. Pero asegúrese de hacer la asociación correcta y no añadir un rel = canonical en la página original.

4-Asegúrese de que el objetivo de su rel=canonical no lleva a una página 404.

5-La página original no debe contener una meta etiqueta "noindex".

6-Asegúrese de colocar el rel = canonical en la sección <head>del sitio. Si entra en el cuerpo, simplemente se ignorará.

Tweet

Interesantes mejoras al editor de plantilla HTML de Blogger

Es cierto que en ocasiones los usuarios de Blogger demandamos nuevas herramientas que permitan hacernos la vida mas simple, esta vez las noticias de actualización viene por el lado del editor de plantilla HTML que nos permite editar el código fuente de nuestro sitio web y ajustar el mismo a nuestro gusto, si se domina HTML,CSS y JavaScript, el límite es nuestra imaginación.

Para llegar a este editor de HTML, hay que ir al panel de Blogger y abrir el blog que deseas personalizar, desde el tablero de mandos, hacer clic en la opción de plantilla y luego encontrar el botón de edición de HTML.

¿Qué novedades hay con el editor de plantillas?

Las novedades se centran más hacia la facilidad de uso, los programadores estarán muy contentos,algún tiempo seguro que se podrán ahorrar.

En ocasiones a la hora de utilizar el editor, muchos trabajan con alguna herramienta mas amigable como Notepad++ y luego suben nuevamente la plantilla modificada, sólo por el hecho de hacer el seguimiento de las cosas más fácilmente. Pero claro no todos son expertos o meten mano al código frecuentemente, y contar con una mejor solución para trabajar de manera mas simple es algo que se estaba esperando...

La espera terminó! Blogger ha realizado modificaciones en el editor de la plantilla HTML para facilitarnos la vida, se incorporaron las siguientes características.

Numeración de líneas - Permite ver los números de linea del código de esta forma se obtiene un mejor seguimiento y detección de errores.

Resaltado de sintaxis - Tener una clasificación por colores es siempre una gran idea que permite identificar mejor los elementos (etiquetas,atributos) y hacer mas legible el código.

Auto-identación - Esta funcionalidad genera espacios a izquierda para poder disponer de un código mas organizado.

Código plegable - Me encanta esta opción también, una vez que he terminado con un determinado fragmento de código, como una etiqueta div, puedo simplemente doblar el código y no hay que mirar ese gran fragmento de código nuevo. Pueden ver esto en la imagen de abajo, si siguen a donde apunta la flecha, verán una flecha pequeña (►) al lado de la línea número 97. Y si nos fijamos en el número de la línea siguiente, podrán ver 1146, esto significa que el editor me salvó de tener que desplazarse hacia abajo por 1049 líneas de código!

Ir al widget - ahora, tienes una manera más rápida de saltar a una sección concreta del código de la plantilla, concretamente al código perteneciente a un widget. Simplemente hagan clic en el botón de ir al widget en la parte superior del editor, y ustedes podrán ver una lista de todos los widgets a los que pueden saltar. Haciendo clic en cualquiera los llevará a la sección respectiva en el código.

La vista previa- Ahora podremos visualizar las modificaciones que estemos realizando desde el interior del editor sin salir de la página.

Otras funciones

Ctrol + F

Permite encontrar la palabra que indiquemos en la caja de búsqueda.

Ctrol + Shift + F

Permite reemplazar una palabra que indiquemos en la caja de búsqueda, pero se irá reemplazando de a una.

Ctrol + Shift + R

Permite reemplazar una palabra directamente en todas las coincidencias que se encuentren de una vez.

Conclusiones:

Me parecieron cambios interesantes los planteados por la gente de Blogger, que van a permitir una mejor organización, seguimiento y detección de errores en el código junto a un ahorro de tiempo, que por mas mínimo que sea siempre es importante.
Que te parecieron las modificaciones al editor de plantilla?

Tweet

HTML5 y la etiqueta DIV

Antes de la llegada de HTML5 la etiqueta DIV era la encargada principal de la organización del layout de los sitios web, generando distintas capas, que se pueden colocar en diferentes partes de la página. Estas capas son espacios rectangulares o contenedores en los cuales podemos insertar contenido HTML permitiendo organizar y dar estructura y diseño a las páginas HTML, de este último se encargará el CSS.

Los navegadores leen texto y todo texto tiene un determinado significado, para poder interpretar esos textos se combinan diferentes herramientas y lenguajes, pero la realidad es que cuanto mejor sea el trabajo de etiquetado de la semántica del contenido, más sencillo será el reconocimiento y clasificación de contenido de un sitio.

Antes y después de HTML5

La etiqueta div de todas formas sigue funcionando de la misma manera y la vamos a utilizar para definir bloques que no presentan ningún tipo de significado, frecuentemente dichos bloques los podremos utilizar para maquetar o agrupar elementos sin querer dar un significado específico. Como se puede ver en la imagen de arriba, la etiqueta div era muy utilizada en HTML4 y nos servía tanto para  representar un artículo, una sidebar , una cabecera o el pie de la página, para esto usando el atributo id para diferenciarlos sin especificar contenidos.

Los comandos nuevos de HTML5

<article> Define zonas únicas de contenido independiente.

<aside> Cualquier contenido que no este relacionado directamente con la página.

<audio> Inserta audio sin necesidad de plugins.

<canvas> Un area de dibujo vectorial y de bitmaps con Javascript.

<command>Define un comando que el usuario puede invocar.

<datalist> Define una lista de opciones.

<details> Información o controles adicionales para el usuario.

<embed> Contenido o aplicaciones externas.

<figcaption> Titulo para el elemento figure.

<figure> Elementos gráficos contenidos en el documento.

<footer> Pie de página.

<header> Cabecera de página.

<hgroup> Para agrupar un conjunto de títulos (h1-h6)

<keygen> Generador de claves.

<mark> Texto resaltado.

<meter> Valor dentro de un rango.

<nav> Navegación principal de la página.

<output> Resultado de un calculo o función. 

<progress> Muestra el progreso de una tarea.

<rt> Explicación o pronunciación de una nota ruby.  

<rp> Texto para navegadores que no soportan anotaciones ruby.

<ruby> Anotación ruby.

<section> Define un área de contenido única dentro del sitio.

<source> Recursos para elementos vídeo y audio.

<summary> Título visible para el elemento details.

<time> Define fecha u hora.

<video> Inserta video sin necesidad de plugins.

<wbr> Posible salto de linea.

Tweet

Como rotar una imagen efecto rotate en CSS

CSS(Cascading Style Sheets) es un lenguaje utilizado en la presentación de documentos HTML, en la arquitectura de modelo-vista-control podemos decir que es el responsable de la vista por tal motivo de la presentación y aspecto de una página web. Este lenguaje es fundamentalmente utilizado por los diferentes navegadores como Chrome, Firefox, Opera, IE entre otros, y por aquellos programadores que utilizan esta herramienta para obtener una gran variedad de presentaciones,que incluyen cambio de tamaños de las fuentes, colores, tipos, etc.
Cuando hablamos del modelo nos referimos a la estructura del documento HTML, para poder decirlo de una forma simple su contenido, y el CSS el maquillaje que nos va a permitir ver de diferentes formas ese contenido, la principal ventaja de poder separar el modelo de la vista es que fácilmente podemos modificar el aspecto de una página web, si tenemos todo mezclado en un mismo código realizar cambios puede volverse una tarea muy tediosa.

Aplicar efectos CSS a una bola para animarla

1-Entramos al panel de Diseño>Edicion HTML>Sin expandir plantillas de artilugios

2-Buscar con Ctrl+F: ]]></b:skin>

3-Justo antes de ]]></b:skin> pegar el código CSS3.

Código CSS

#cambiar_texto{
width:550px;
height:100px;
border-radius:20px;
text-align:center;
background-color:#0C6;
font-family:Tahoma, Geneva, sans-serif;
font-size:18px;
font-style:oblique;
font-weight:bold;
}
#cambiar_texto:hover{
text-transform:uppercase;
background-color:#CC3;
}

#idayvuelta{
display:block;
position:absolute;
border-radius:25px;
margin-left:10px;
width:50px;
height:50px;
background-color:#F13;
-webkit-animation:giro 3s infinite alternate;
-moz-animation:giro 3s infinite alternate;
-ms-animation:giro 3s infinite alternate;
-o-animation:giro 3s infinite alternate;
animation:giro 3s infinite alternate;

}

@keyframes "giro" {
0% {
left:0%;
transform:rotate(0deg);
}

  100%{
left:35%;
transform:rotate(360deg);
background-color:#FFF;
  }
 }


 @-webkit-keyframes "giro" {
0% {
-webkit-transform:rotate(0deg);
  left:0%;
}


100%{
-webkit-transform:rotate(360deg);
background-color: #FFF;
  left:35%;
}
 }


 @-moz-keyframes "giro" {
0% {
-moz-transform:rotate(0deg);
  left:0%;
}


100%{
-moz-transform:rotate(360deg);
background-color: #FFF;
  left:35%;
}
 }

@-o-keyframes "giro" {
0% {
-o-transform:rotate(0deg);
  left:0%;
}


100%{
-o-transform:rotate(360deg);
background-color: #FFF;
  left:35%;
}
 }

@-ms-keyframes "giro" {
0% {
-ms-transform:rotate(0deg);
  left:0%;
}


100%{
-ms-transform:rotate(360deg);
background-color: #FFF;
  left:35%;
}
 }

Una breve explicación

Hay dos identificadores que son los encargados de los efectos:

#cambiar_texto:hover{}  modifica el texto convirtiendo el texto a mayúsculas al pasar el ratón por sobre el texto.
#idayvuelta{} establece el color, tamaño de la bola, tiempo de recorrido de la bola  y llama al keyframe "giro" que mediante transform:rotate se encarga de girar el cuerpo 360 grados en este caso en 3s.

Si se prefiere adicionar de fondo una imagen se puede reemplazar en #idayvuelta{}:

background-color:#F13;

Por la siguiente sentencia donde hay que indicar una ruta de acceso a la imagen:

background-image:url(../Optimizacion%20de%20imagenes/PRUEBAIMAGEN.jpg);

Luego en tu plantilla podrás aplicar los identificadores por ejemplo a un div de la siguiente manera:

<div id="idayvuelta"></div>

Incompatibilidades

Algunas de las funcionalidades de CSS pueden no ser compatibles con todos los navegadores, por tal motivo hay que indicar para cada navegador determinados prefijos como:

@-webkit-keyframes  Chrome
@-ms-keyframes IE
@-o-keyframes   Opera
@-moz-keyframes  Firefox

Efectos CSS, pasar el mouse sobre la bola

Esta es solo una simple muestra de las múltiples opciones que podemos manejar con CSS.

Tweet

La piramide de Maslow y las redes sociales

La jerarquía de necesidades de Maslow es una teoría psicológica elaborada por Abraham Maslow llamada "Una teoría sobre la motivación humana" o "A Theory of Human Motivation". 

Maslow establece en su teoría una jerarquía de necesidades humanas donde a medida que se van cubriendo las necesidades de la base de la pirámide las personas desarrollan nuevos deseos y necesidades que se encuentran en niveles superiores de la pirámide.
Los niveles mencionados están compuestos por las siguientes cinco necesidades:

Fisiológicas: incluye el hambre, la sed, el abrigo, el sexo y otras necesidades corporales

De seguridad: incluye la seguridad y protección de daños físicos y emocionales.

Afiliación: incluye afectos, la sensación de pertenencia, aceptación y amistad.

De reconocimiento: incluye factores internos de estima, como el respeto a uno mismo, la autonomía y los logros; y factores externos como el status y la atención.

De autorrealización: el impulso de ser lo que se es capaz de ser; incluye el crecimiento, alcanzar el potencial de uno y la auto-satisfacción.

Ahora que hicimos esta introducción vamos a presentar una interesante infografia que relaciona la teoría de Maslow con las redes sociales.  





Si te pareció interesante este post por favor compártelo, muchas gracias.

Tweet