BLOG DE DISEÑO WEB CORUÑA

Un poco de todo, recursos, tutoriales, noticias, anuncios...

Google penaliza las webs no adaptadas a dispositivos móviles

Google penaliza las webs no adaptadas a dispositivos móviles

23/MAR/2015 6.570 visitas Ver comentarios

Ya sabemos que ser adaptativo (en términos de diseño web) era casi obligatorio... pues bien, esto ha dado un paso de gigante en estos días porque el dios Google ha anunciado que empezará a modificar su algoritmo para perjudicar a aquellas webs que no presenten un contenido adaptado al dispositivo desde el que el usuario hace la búsqueda.

Concretamente, Google ha anunciado recientemente que, a partir del próximo 21 de abril de 2015 aquellas páginas web que no estén totalmente preparadas para móviles muy probablemente irán perdiendo posicionamiento en su buscador con respecto a otras webs optimizadas que ya cuenten con una adaptación específica para móviles o diseño “responsive”.

LEER ENTRADA

Responsive Tables o tablas adaptativas en CSS

Responsive Tables o tablas adaptativas en CSS

20/OCT/2014 9.458 visitas Ver comentarios

Este es un pequeño resumen de un artículo que escribí para el blog Octuweb sobre las diferentes opciones que tenemos los diseñadores para maquetar datos en una tabla HTML en una web adaptativa sin que se vean afectadas ni la usabilidad ni el sentido de la tabla en sí.

Propongo diferentes opciones sin utilizar frameworks, todas soluciones mediante CSS y, al final, sí hay una pequeña recopilación de recursos ya cocinados si basas la maquetación de tu web en algún sistema, tal como Bootstrap, Foundation, etc...

LEER ENTRADA

RRSSB botones para compartir en las redes sociales

RRSSB botones para compartir en las redes sociales

04/MAR/2014 22.507 visitas Ver comentarios

Puedes quererlos, odiarlos o simplemente que te den igual, pero hoy día, todas las webs y blogs tienen botones para compartir el contenido que estás viendo en tus redes sociales preferidas. Nadie puede discutir, más allá de ésto, la gran oportunidad que presentan de atraer público hacia nuestra página, con lo que tenerlos en nuestra web, a mi entender, suma más de lo que resta.

Pues bien, a las alternativas ya conocidas por todos como Addthis, ShareThis o tantas otras que circulan por ahí, siempre se suma la opción de crear nuestros propios botones, bien sea creándolos en cada una de nuestras redes sociales utilizadas, o utilizando un código genérico y enlazándolo a la opción de share que cada red social posee.

LEER ENTRADA

Magnific Popup, lightbox bonito, responsive, liviano y para jQuery

Magnific Popup, lightbox bonito, responsive, liviano y para jQuery

10/ENE/2014 34.564 visitas Ver comentarios

Siempre que debo utilizar algún sistema para lanzar un popup, me suelo decantar por Colorbox, un plugin muy liviano pero inmensamente potente para lanzar popups bonitos (de esos que no abren una nueva ventana sino que oscurecen la actual y muestran el nuevo contenido en primer plano).

Muchas veces queremos abrir formularios, mensajes, alertas, ampliar fotografías, textos adicionales o cualquier otro contenido y estos popups son una muy buena solución.

LEER ENTRADA

Herramientas útiles para maquetar webs adaptativas o Responsive Web Design

Herramientas útiles para maquetar webs adaptativas o Responsive Web Design

05/DIC/2013 19.661 visitas Ver comentarios

Quien me conoce sabe que soy muy fan del Responsive Web Design o diseño web adaptativo o el responsive, como he oído llamarlo. En mis inicios, me basé en el framework Skeleton para tomar las mediaqueries necesarios, el CSS con los reset y tamaños de campos en los formularios o textos, pero a medida que fui avanzando, me lancé a hacer mis propias hojas de estilos y pararme a pensar si realmente me hacía falta usar un framework o podía valerme de mis propios conocimientos.

Incluso me he lanzado a crearme mi propio grid responsive únicamente en CSS que, para cosas básicas o proyectos no muy complejos, me viene muy bien.

LEER ENTRADA

Calendario de eventos en jQuery y HTML5 responsive

Calendario de eventos en jQuery y HTML5 responsive

10/OCT/2013 51.413 visitas Ver comentarios

El siguiente código es para mostrar por pantalla un sencillo calendario, muy personalizable y adaptable a las diferentes resoluciones ya que todos los valores están expresados en EM o porcentajes (únicamente su alto está expresado en pixels para mantener el espacio fijo).

Está basado en el Flatmin responsive calendar que encontré desde la web de plugins de jQuery (todo el crédito es para Eric Wennerberg), pero al intentar hacer una demo, me he dado cuenta que tiene varios fallos que voy a comentar a continuación.

LEER ENTRADA

Unslider, slider responsive en jQuery de 3kb de peso

Unslider, slider responsive en jQuery de 3kb de peso

06/AGO/2013 7.432 visitas Ver comentarios

Este pequeño y sencillo plugin es un slider de tan sólo 3kb de peso que se limita a hacer eso, animar diapositivas que pueden ser tanto imágenes como contenido rico en HTML. Puede configurarse con CSS y, al ser responsive, incluye una función de soporte de teclado para pasar los slides manualmente.

No incluye ningún efecto especial, ni fades ni nada que no sea movimiento de derecha a izquierda. Es totalmente personalizable y tiene muy pocas líneas de código, además de estar éste en Github con lo que es 100% opensource.

LEER ENTRADA

Basic jQuery Slider responsive, liviano y configurable

Basic jQuery Slider responsive, liviano y configurable

12/DIC/2012 16.296 visitas Ver comentarios

Siempre queremos poner un slider en nuestras webs y nos esforzamos en buscar el más cool (o guay en versión spanish), con miles de efectos, que abarque miles de formatos en su contenido y que sea adaptativo (responsive in english)... para luego, no hacer nuestras webs adaptativas, poner sólo imágenes y usar siempre el efecto FADE... verdad?

Pues bien, buscando algo bueno bonito y barato, dí con este slider, realmente muy simple pero excesivamente potente y fácil de configurar o personalizar. Está basado en jQuery, como no, y su CSS tiene 13 líneas! (acabo de dejar de alucinar)... pero vamos a verlo a fondo.

LEER ENTRADA

Prueba tus maquetaciones de Responsive Web Design

Prueba tus maquetaciones de Responsive Web Design

24/OCT/2012 4.985 visitas Ver comentarios

Motivado por la aparición de Responsivator, me he decidido a liberar un clon que testea tus diseños web maquetados de manera adaptativa o, como todos lo conocemos, en Responsive Web Design.

El script es muy sencillo, se ocupa mediante una llamada en Ajax de cargar diferentes estados de la url introducida en el área indicada abajo, que no deja de ser un iframe para cada tamaño.

LEER ENTRADA

Adapt.js para Responsive Web Design con javascript

Adapt.js para Responsive Web Design con javascript

11/SEP/2012 5.618 visitas Ver comentarios

Adapt.js es un archivo JavaScript muy livianito (848 bytes minified) que determina qué archivo CSS debe cargarse antes de que el navegador renderice o muestre tu página. Si el navegador se inclina o se cambia el tamaño, Adapt.js simplemente comprueba su ancho, y sirve sólo el CSS que se necesita, cuando se necesita.

Un posible inconveniente de Adapt.js es la posibilidad de ver un breve destello de contenido sin estilo mientras se cambia de fichero CSS (piensa en ello como "Ajax" para CSS) aunque nos avisan desde su web que se hizo todo lo posible por evitar el destello creando hojas CSS de 3kb de peso.

LEER ENTRADA

Entendiendo el concepto de Media Queries en CSS3

Entendiendo el concepto de Media Queries en CSS3

01/AGO/2012 7.090 visitas Ver comentarios

Para entender el concepto de Media Query, nada mejor que la definición oficial del W3C que dice: "Una media query consiste en un tipo de dispositivo (media) y cero o más expresiones que comprueban  el estado de las características particulares de ese dispositivo. Entre las características que pueden utilizarse en una media query están las propiedades  "ancho", "alto" y "color". Mediante el uso de media queries, la presentación del contenido puede adaptarse a un rango específico de dispositivos de salida sin necesidad de modificar el propio contenido".

Traduciéndolo al idioma ´martiniano´, una Media Query es una serie de condiciones que pueden aplicarse a nuestras hojas de estilo CSS para que, según el tamaño y resolución del dispositivo, adopte una u otra forma.

LEER ENTRADA

Mis primeros pasos en el Responsive Web Design

Mis primeros pasos en el Responsive Web Design

06/JUN/2012 9.967 visitas Ver comentarios

En esto del desarrollo web como en la vida, siempre toca evolucionar. Y evolucionar, en términos de informática, quiere decir incorporar nuevas prácticas, nuevos conocimientos y técnicas para optimizar el flujo de trabajo, consiguiendo un producto final de mejor calidad en el menor tiempo posible.

Esta vez, le ha tocado el turno al Responsive Web Design, o diseño web responsivo... o, en cristiano, el diseño web que se adapta a todos los dispositivos, según tamaño de pantalla u orientación, sin tener distintas versiones de tu web... Qué quiere decir ésto? Que partiendo de la base de un sólo código, es decir una única página web, mediante algunos .JS y muchas líneas de CSS, obtendrás la versión adecuada para el tamaño de la pantalla de tu visitante.

LEER ENTRADA