SVG: Creando imágenes a través de código

No se a vosotros, pero a mí eso de poder crear imágenes vectoriales sin tener que utilizar un editor gráfico me parece lo más. Y si encima sabes que se verá bien a cualquier tamaño y en dispositivos retina, la alegría es mayor. Pero primero un poco de información básica: ¿Qué significan las siglas SVG? Scalable Vector Graphics (gráficos vectoriales escalables) ¿Qué es SVG? Es un estandar de marcado basado en el lenguaje XML, con el que podemos dibujar imágenes vectoriales en dos dimensiones. ¿Qué navegadores soportan imágenes SVG? En la web Can I use..? puedes ver el soporte de…

Leer más

Que Google no te penalice, optimiza tu web para móviles.

La semana pasada, Google anunciaba que penalizará los sitios webs que no estén adaptados para dispositivos móviles, y hace un par de meses Paypal nos contaba que el comercio móvil crecerá un 48% en España en 2015. ¿Sigues dudando si deberías adaptar tu página web a dispositivos móviles? Si no tienes claro si tu web cumple los requisitos de Google, hay una herramienta disponible llamada Prueba de optimización para móviles donde te indica claramente si es válida o no. Si tu web no está optimizada descenderá de posición en las búsquedas de Google, pero no está todo perdido, una vez…

Leer más

jQuery: fixedTo plugin para posicionar elementos

Hace un par de semanas necesité maquetar un elemento de forma que permaneciese siempre fijo en la parte inferior de la página, no me llevó mucho, ya que se resolvía con: elemento{ position:fixed; bottom:0; } Pero una vez lo tenía listo lo ví tan simple, que necesitaba darle un poco de vida. Me puse manos a la obra, y después de unas horas surgió el plugin fixedTo. El funcionamiento no se limita al css escrito antes: – Puedes indicar la posición de la ventana en la que quieres colocar el elemento, si es en un lateral, se gira automáticamente. –…

Leer más

Fuentes en web ¿Con cual te quedas?

No es la primera vez que escribo un post sobre el uso de diferentes fuentes en páginas web, pero recientemente he hablado sobre esto con varias personas y me veía en la necesidad de volver a escribir sobre ello y organizar mejor mis pensamientos. Así que allá voy: Como norma general, la fuente que indiquemos en nuestra web, tiene que ser una fuente que tenga instalada en su ordenador la persona que acceda a ella. Por eso, estamos limitados a una lista de fuentes muy corta. Pero por suerte para los diseñadores todos, hoy en día podemos ampliar esta lista…

Leer más

CSS3: Transformaciones en 2D

Mientras esperamos a la llegada definitiva de la versión 3 de CSS, no puedo evitar ir trasteando las nuevas propiedades, y esta vez le he echado el ojo a “transform” y “transform-origin”. Con transform podemos modificar elementos de varias formas: 1. Transladar el elemento a otra posición: elemento{transform:translate(a,b);} 2. Escalar el elemento: elemento{transform:scale(a);} 3. Rotar el elemento: elemento{transform:rotate(a);} 4. Sesgar el elemento: elemento{transform:skew(a,b);} 5. Deformar el elemento: elemento{transform:matrix(a,b,c,d);} Por defecto, la mayoría de los navegadores asignan como punto de origen de las transformaciones el centro del elemento (50% 50%), pero podemos modificar este punto con la propiedad transform-origin: Poniendo, por…

Leer más