Diseño de páginas web en Bilbao y Bizkaia

AMP o Páginas aceleradas para móviles

  • 0
AMP, Páginas aceleradas para móviles

AMP o Páginas aceleradas para móviles

Es bien sabido que a Google le preocupa mucho la experiencia del usuario, y que cada vez un mayor número de búsquedas se realizan a través de dispositivos móviles. Lo primero fue el diseño responsive o adaptativo, con el tan anunciado Mobilegeddon, que al final no fue para tanto. Luego vino la velocidad de carga, factor SEO de primer orden. Y ahora le toca el turno al AMP (Accelerated Mobile Pages), o Páginas aceleradas para móviles.

El AMP está especialmente pensado para sitios con feeds y noticias, de ahí que funcione bien en blogs. Lo que hace es eliminar elementos superfluos del diseño que demoran la carga y simplificar la visualización en pantalla y su navegabilidad.

En Search Console puedes comprobar cuántas de tus páginas están bien adaptadas a AMP y cuántas tienen errores. Para ello sólo tienes que ir a Aspecto de la búsqueda/Accelerated Mobile Pages.

Como siempre en estos casos, los usuarios de WordPress disponen de varios plugins para implementar el AMP en su sitio web. Aquí tienes un enlace. Básicamente, lo que hace es añadir la terminación /amp/ o ?amp=1/ al final de tus URLs, dependiendo de si son amigables o de si usas Permalinks.

AMP o Páginas aceleradas para móviles

Aparte de eso, en Google Chrome hay una extensión con un validador, que se pone azul cuando entras en una web adaptada y te indica que hay una versión AMP disponible.

Al ser una tecnología bastante moderna, da la sensación de que aún está en fase beta, pues los errores están a la orden del día. Por otra parte, aún está por ver si los sitios web AMP tendrán alguna ventaja de cara al posicionamiento. De momento Google no ha sido muy explícito al respecto, pero con la importancia que está cobrando la búsqueda móvil, haríamos bien en estar a la última, aunque sólo sea por ofrecer el mejor servicio a nuestros clientes, pues ¿quién no prefiere navegar en una web que cargue rápido?


  • 0
Plantillas WordPress

Plantillas WordPress profesionales gratis

Para cualquier diseñador web, tener a mano una buena colección de plantillas es algo que facilita mucho las tareas. Si hablamos de WordPress, el CMS o gestor de contenidos por antonomasia, el abanico donde elegir es realmente amplio. La ventaja es que muchos de estos themes o templates son gratuitos, y además tienen un aspecto profesional, con poco que envidiar a los de ThemeForest o ElegantThemes, las dos webs de referencia. Algunos de ellos incluso traen incorporado el efecto parallax, que difumina la planitud del fondo creando una sensación dimensional que puede ser muy útil, por ejemplo, para hacer storytelling. En la mayoría de los casos son, asimismo, fáciles de personalizar (100% customizables), aunque también es común que algunas de sus prestaciones se vean limitadas, como los plugins o widgets. Por esta razón, y aunque todo lo gratuito suene muy tentador, en ocasiones conviene pagar por un theme Premium, ya que el gasto suele ser mínimo (una media de 60$), y según las necesidades de cada cual, quizás nos interese hacer un pequeño desembolso si luego vamos a poder elegir una plantilla más adaptada a la imagen que buscamos y que tenga una velocidad de carga optimizada, punto éste a tener muy en cuenta.

Colorlib Themes

Comoquiera que sea, si no estás dispuesto a rascarte el bolsillo, por suerte existe una gran variedad de plantillas con licencia gratuita de las que, bien usadas, puedes sacar un extraordinario rendimiento. Aquí te dejo tres enlaces con 160 themes para WordPress responsive y totalmente gratis, todos ellos nuevos, de 2016:

Como podéis comprobar, en los tres casos os deja la opción de ver la Demo de la plantilla, y además permite visualizarla en varios formatos de imagen, desktop, tablet y dispositivos móviles. Adicionalmente, muchos de estos templates te dejan cambiar el color y el número de columnas. Las descargas suelen ser desde el Theme Directory de WordPress.org. Algunos de estos themes, aunque admiten una descarga gratuita, también tienen una versión Pro que viene a costar lo que cuesta una plantilla Premium. Habréis observado que algunas se repiten, pero hay más que suficientes y con temáticas lo suficientemente heterogéneas (fotografía, restaurantes, construcción, moda, deportes, música, etc.) como para tener una buena colección para nuestros proyectos.

Athemes, plantillas WordPress


  • 0
Botones, iconos y links creativos con CSS

Botones, iconos y links creativos con CSS

Categoría : Diseño Web

En un post reciente os recomendé dos aplicaciones web para crear sombras y degradados fácilmente mediante CSS 3. Hoy quería seguir profundizando en el tema de los estilos y animaciones, y para ello lo primero que haré será sugeriros otro sitio donde podéis conseguir los mismos efectos anteriormente descritos. Se trata de CSSMatic, un proyecto libre creado por y para desarrolladores, y que lleva detrás la firma de Freepik y Thumbr.

CSSMatic es muy parecido a CSS3gen, pero al editor de sombras, gradientes y bordes redondeados añade la textura suciedad, un efecto muy común en Photoshop al que, eso sí, no es fácil encontrarle un uso práctico. La ventaja que tiene CSSMatic frente al resto de aplicaciones web es que permite más funcionalidades, como subir o bajar la opacidad o elegir el estilo del borde. En el caso del sombreado incluso podemos reproducirlo dentro de la caja.

CSSMatic

Sin embargo, con CSS se pueden lograr efectos mucho más complejos y sofisticados que éstos. Por ejemplo, si queremos un texto animado que aparezca de izquierda a derecha, que parpadee o tiemble o se contraiga o se expanda o se altere de alguna manera, podemos recurrir a esta herramienta que nos permite gran variedad de movimientos y animaciones. Tan sólo tenemos que descargar el documento CSS y luego copiar en nuestra hoja de estilos el código que precisemos. Tan fácil como eso.

Animate CSS

Y aún hay más. Seguro que muchas veces habéis deseado tener estilos llamativos para vuestros enlaces que inviten con tan sólo verlos a un call to action. Si no sois expertos en CSS, no os preocupéis, porque por suerte hay desarrolladores web que comparten de forma generosa y altruista sus creaciones. En Codrops son especialistas en recursos gráficos para bloggers exigentes, y entre otras muchas cosas, podéis encontrar:

  • Estilos para botones con efectos hover y click, ideales, por ejemplo, para formularios de envío o carrito de compra en tienda online.
  • Efectos hover para iconos circulares, muy útiles y vistosos y apropiados para simbolizar las diferentes categorías de nuestra web. Algunos incluso podrían serviros como símbolos para vuestros logos.
  • Links creativos, perfectos para un menú elegante.

Para descargar el archivo CSS de cualquiera de estos estilos tenemos que clicar arriba, donde pone Back to the codrops article, y a continuación Descagar fuente. La Demo es lo que estabais viendo en un principio. La web te indica que no todos los navegadores soportan las transiciones y pseudo elementos con que están diseñados estos estilos, algo que deberemos tener en cuenta.

Botones Creativos CSS


BUSCAR

Suscríbete al Blog

Introduce tu email para estar al tanto de las novedades.

ABRELINK EN TWITTER