Alinear capas sin salto de línea con CSS

Alinear capas sin salto de línea con CSS

Existen varias maneras de alinear capas sin que se produzca salto de línea. Para mi esta es la más sencilla, y además es responsive, por lo que no tendrás ningún problema independientemente de la resolución de pantalla que esté usando el usuario de tu sitio.

Este es el único código que tienes que usar en tu CSS en el contenedor que va a alojar las distintas capas, como verás es bien sencillo:

.box {display: flex; align-items: stretch; flex-wrap: wrap;}

Con esto ya estaría, pero vamos a darle un poco de estilo a las capas que van dentro, para que no quede feo:

.uno, .dos, .tres, .cuatro, .cinco, .seis {padding:50px; color: #fff; width: 150px; font-family: ‘Bebas Neue’, cursive; font-size:30px}
.uno {background-color: #fdd129}
.dos {background-color: #c91818}
.tres {background-color: #2d4f62}
.cuatro {background-color: #498356}
.cinco {background-color: #f18f39}
.seis {background-color: #000}

Simplemente hemos dado a cada capa un color y a todas unas características de ancho, tipo de fuente y padding.

En el HTML, colocamos la capa principal y contenedor (box) y dentro las capas que van a ir alineadas.

<div class=»box»>
<div class=»uno»>Uno</div>
<div class=»dos»>Dos</div>
<div class=»tres»>Tres
<br>tiene
<br>texto
<br>extra
</div>
<div class=»cuatro»>Cuatro</div>
<div class=»cinco»>Cinco</div>
<div class=»seis»>Seis</div>
</div>

Y ya está !!!

Ahora entra en el siguiente enlace para verlo funcionando y prueba a hacer más grande y pequeña la ventana del navegador, para comprobar cómo se va adaptando automáticamente a cualquier resolución de pantalla, colocando las que no entran en la siguiente línea.

VER EJEMPLO FUNCIONANDO

 
 

Anima tus contenidos con CSS

Anima tus contenidos con CSS

La animación de contenidos en la web es una práctica habitual en el diseño web. Desde hacer que las fotos aparezcan suavemente, a que la página se vaya formando según hacemos scroll, apareciendo los contenidos por los lados… Se trata de enfatizar contenidos o llamar la atención del usuario y mostrarle un diseño atractivo.
Existe una forma muy fácil de hacer todos estos efectos y que no suponen excesivo peso para la página, vamos a ver cómo.

Animate.css es una biblioteca de animaciones listas para usar en tus proyectos web.
Si entras en https://animate.style/ a la derecha podrás ver un montón de efectos que se aplican en tiempo real al contenido central de la página.
Vamos a ver cómo usarlo:

Para empezar hacemos la llamada a la librería, puedes descargarla y alojarla en tu host o puedes llamarla así:

<head>
  <link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
  />
</head>

Luego, añade a tu texto o imagen la clase que quieres aplicar del siguiente modo:

<img src="imagen.png" class="animate__animated animate__rubberBand">

siendo rubberBand el efecto que quieres aplicar y que puedes sustituir por cualquiera de estos:

  • bounce
  • flash
  • pulse
  • rubberBand
  • shake
  • headShake
  • swing
  • tada
  • wobble
  • jello
  • bounceIn
  • bounceInDown
  • bounceInLeft
  • bounceInRight
  • bounceInUp
  • bounceOut
  • bounceOutDown
  • bounceOutLeft
  • bounceOutRight
  • bounceOutUp
  • fadeIn
  • fadeInDown
  • fadeInDownBig
  • fadeInLeft
  • fadeInLeftBig
  • fadeInRight
  • fadeInRightBig
  • fadeInUp
  • fadeInUpBig
  • fadeOut
  • fadeOutDown
  • fadeOutDownBig
  • fadeOutLeft
  • fadeOutLeftBig
  • fadeOutRight
  • fadeOutRightBig
  • fadeOutUp
  • fadeOutUpBig
  • flipInX
  • flipInY
  • flipOutX
  • flipOutY
  • lightSpeedIn
  • lightSpeedOut
  • rotateIn
  • rotateInDownLeft
  • rotateInDownRight
  • rotateInUpLeft
  • rotateInUpRight
  • rotateOut
  • rotateOutDownLeft
  • rotateOutDownRight
  • rotateOutUpLeft
  • rotateOutUpRight
  • hinge
  • jackInTheBox
  • rollIn
  • rollOut
  • zoomIn
  • zoomInDown
  • zoomInLeft
  • zoomInRight
  • zoomInUp
  • zoomOut
  • zoomOutDown
  • zoomOutLeft
  • zoomOutRight
  • zoomOutUp
  • slideInDown
  • slideInLeft
  • slideInRight
  • slideInUp
  • slideOutDown
  • slideOutLeft
  • slideOutRight
  • slideOutUp

Prueba estas animaciones tanto en textos como imágenes, incluso puedes aplicarlo a un div para mover varios objetos a la vez.

En próximos post veremos cómo controlar estas animaciones, modificando la duración de la animación o el delay, unas opciones que incluso nos pueden servir para crear banners.

 

 

 

Comprueba tu sitio web en varios dispositivos. Herramientas Gratis !!

Comprueba tu sitio web en varios dispositivos. Herramientas Gratis !!

Cuando creamos un sitio web, es fundamental recordar que tendrá que verse en todo tipo de dispositivos, con un amplio abanico de distintas resoluciones. Llevar a cabo un buen diseño y maquetación que se adapte a todos estos dispositivos, es muy importante, no sólo por ofrecer una buena experiencia de navegación al usuario, también desde el punto de vista del SEO y la penalización que conlleva no ofrecer un buen responsive.

Por lo tanto es muy importante verificar cómo se ve nuestro site y cómo se comporta en esos distintos dispositivos.

What is my screen resolution

Hoy os dejo What is my screen resolution. Se trata de una intuitiva herramienta excelente para probar cómo se verá su sitio en diferentes dispositivos. Escribes la URL y eliges entre escritorio, móvil, tableta y televisión e incluso la orientación. Verás que al pulsar sobre desktop, mobile, tablet o televisión, te saldrán unas resoluciones por defecto, pero si luego quieres probar una resolución en concreto, puedes introducirla y comprobar la visibilidad del site. Muy interesante y además GRATIS !!!

COMPROBAR RESOLUCIONES

 

 

Botones magnéticos con jquery

Botones magnéticos con jquery

Se trata de unos botones que se sienten atraídos por el puntero del ratón, la interacción es interesante, invita a jugar con el botón.
En la demo de Bestjquery podréis ver varios ejemplos de cómo aplicar este efecto. Si lo queréis descargar, aquí tenéis el botón.

 
Descargar código

Impresionantes efectos CSS para tus Input

Impresionantes efectos CSS para tus Input

¿Por qué seguir haciendo aburridos formularios cuando podemos usar impresionantes efectos CSS?. A veces tendemos a lo fácil, y no hay nada más aburrido en una web que rellenar un formulario, añade estos efectos y verás que aumentarán los usuarios que lo utilizan.
Es exagerada la cantidad de aburridos formularios que además piden campos totalmente innecesarios que encontramos en internet. Tu máxima como diseñador ha de ser pedir los datos justos, y si es posible, hacerlo dinámico, divertido incluso, usando iconos, efectos, o estos fantásticos efectos CSS que puedes descargar gratis en tympanus.

Además de vistosos son muy útiles, por ejemplo a la hora de ahorrar espacio, nada mejor que meter el texto dentro del input y que al pinchar sobre él salga y se coloque en un lugar que no moleste, son muchos los efectos que vais a encontrar, espero que os sean útiles.

Ver y Descargar Efectos Input con CSS

 

Cambios en el SEO de tu web para 2020

Cambios en el SEO de tu web para 2020

Google siempre ha pretendido que sus resultados de búsqueda vayan adaptándose a los patrones de comportamiento de sus usuarios, por eso la evolución de sus algoritmos es constante, estos son los últimos cambios que van a condicionar el buen posicionamiento de tu web. John Mueller experto SEO en Google, ha puesto recientemente patas arriba axiomas como la relevancia de las keywords en títulos. De todos estos cambios en el SEO de tu web para 2020, hablamos a continuación.

De todo lo que he leído últimamente, estos son los cambios más relevantes que he encontrado. Incluyo también la velocidad, conocida desde hace tiempo por todos, porque creo que hay que seguir insistiendo en este aspecto, ya que parece ser una asignatura pendiente. Las webs son cada vez más vistosas y la lucha entre el diseño y el peso es algo que como diseñadores nos da numerosos quebraderos de cabeza. Vamos al lío:

PNL

Google orienta ahora todo el contenido al PNL, de esta manera, Google será capaz de interpretar mejor lo que busca un usuario a través de la relación entre la palabra buscada y el resto de las palabras de la frase, no sólo a través de esa palabra como hacía hasta ahora.

¿Qué es la PNL?

El Procesamiento del Lenguaje Natural, es el proceso mediante el cual se analiza el texto de una web mediante relaciones entre las palabras que aparecen, para obtener una mayor comprensión del contenido. Para analizar este contenido, Google pone a disposición del usuario su plataforma Google Cloud

¿Cómo escribir para un correcto PNL?

  • Distancia entre la consulta y la solución: procuremos utilizar frases directas, sin muchos rodeos e intentando que la distancia en la frase o párrafo entre la consulta y la solución (respuesta) sea lo menor posible. Si por ejemplo la búsqueda es «distancia entre un enchufe y un grifo»:
    Solución 1: la [distancia entre un enchufe y un grifo] ha de ser lo suficientemente amplia como para poder evitar desafortunados accidentes. Esta distancia mínima se establece según normativa en [50cm].
    Solución 2: [la distancia entre un enchufe y un grifo] ha de ser superior a [50cm]. Esta distancia se establece según la normativa y está enfocada a evitar desafortunados accidentes.La solución 2 tiene una distancia mucho más corta entre la [consulta] y la [solución], por lo que será más fácil de encontrar para el motor de búsqueda.
  • Evita el relleno; en la redacción para PNL intenta ser claro y conciso, el relleno sólo va a causar problemas en el proceso de búsqueda. Ten cuidado de cómo usas el lenguaje, ya que estás escribiendo para una máquina… Si hablas de Juan, escribe siempre Juan, no escribas el pronombre «él», porque los motores de búsqueda no son tan inteligentes como para saber que te estás refiriendo a Juan.
  • Calidad de contenido: sigue siendo fundamental, contenidos de calidad y que respondan a las consultas de los usuarios.

BACKLINKS

Siguen siendo importantísimos, cuantos más tengas, mayor seguridad para Google de que tu contenido es de interés.

¿Qué son los backlinks?

  • Backlinks son los enlaces que apuntan a tu página desde otras páginas, es importante que estos enlaces sean naturales, y no generados artificialmente.
  • Cambios: Hasta ahora la calidad de la página que te apuntaba daba mayor importancia a ese backlink, según parece, ahora no es tan importante, aunque a mi parecer, siempre tendrá más peso un enlace desde una página mejor posicionada.

ACTUALIZAR CONTENIDOS ANTIGUOS

Nuestros sitios, en especial los blogs, son un contenedor de artículos en los que muchos de ellos pueden llegar a tener años, la actualización de estos artículos ya bien posicionados es importante a la hora de conseguir mayor relevancia de tu web.

VELOCIDAD

Insistimos, a Google no le gustan las páginas pesadas, optimiza al máximo el peso de tus páginas, css, scripts y sobre todo las imágenes. Especial relevancia tiene también tu web en móvil, cuida bien el peso para no ser castigado por Google. Una vez más, Google pone una herramienta para medir si tu web está optimizada en este aspecto, Pagespeed.

PALABRAS CLAVE EN LOS TÍTULOS

Hasta ahora, el uso de palabras clave, keywords,  en los títulos (h1, h2,…) era de la máxima importancia, esto unido a una url construida con esas mismas palabras daba un empujón enorme a tu web. Parece ser que los últimos cambios no van por ese camino. Recientemente, John Mueller experto SEO en Google, ha reconocido que utiliza esas palabras para conocer mejor el contenido de cada párrafo y poder así ordenarlo mejor en los resultados de búsqueda, pero que el uso de keywords en los encabezados no mejora el posicionamiento. Mueller explica que los encabezados deben utilizarse para contenidos de texto extensos, para poder interpretar mejor cada párrafo.
También afirma que si se estudian las páginas de SERP (resultados de Google), se puede ver que el uso de palabras clave en el título no es clave para esos resultados. El uso pues de estas palabras, debe enfocarse a ayudar a Google a comprender mejor los contenidos. Es decir, si te ayuda, es porque está entendiendo mejor el contenido, no por si solas.

Puedes ver el video de John Muller aquí

Seguiremos atentos a los nuevos cambios. Aquí tienes otros artículos relacionados con el SEO.