Webmaster Libre » Recursos

The CSS3 Test: descubre la compatibilidad de tu navegador con CSS3

Alma Fernández — Thu, 09 Feb 2012 11:34:44 +0000

Con todo el revuelo que están causando las novedades en CSS3 a veces podemos perder un poco el norte y pensar que ya podemos emplear todo en nuestros diseños.

A pesar de que los navegadores parecen estar moviéndose rápidamente hacia un soporte amplio, la verdad es que todavía queda bastante trabajo por delante.

The CSS3 Test es un proyecto de Lea Verou en el que podrás comprobar que, a pesar de que seguro que estás usando un navegador moderno y actualizado – no como muchos de tus visitantes -, todavía queda mucho por hacer.

Los resultados del test son enviados automáticamente a Browserscope y Lea promete generar una bonita tabla con el resumen de estos en cuanto tenga suficientes datos, aunque de momento puedes echar un vistazo a los resultados directamente.

De momento, los porcentajes de soporte de los navegadores modernos son algo así:

Chrome Canary, WebKit nightlies, Firefox Nightly: 64%
Chrome, IE10PP4: 63%
Firefox 10: 61%
Safari 5.1, iOS5 Safari: 60%
Opera 11.60: 56%
Firefox 9: 58%
Firefox 6-8: 57%
Firefox 5, Opera 11.1 – 11.5: 55%
Safari 5.0: 54%
Firefox 4: 49%
Safari 4: 47%
Opera 10: 45%
Firefox 3.6: 44%
IE9: 39%

Como siempre, Internet Explorer dando la nota, aunque la versión 10 parece que vendrá como un rayo de esperanza para todos (siempre que su política de actualización sea más proactiva que la que han ido siguiendo hasta ahora).

Entradas relacionadas

¿Quieres hasta 6 meses de hosting gratis? Utiliza el cupón RCwebmasterlibre al contratar cualquier plan con RedCoruna - más información

The CSS3 Test: descubre la compatibilidad de tu navegador con CSS3 was first posted on febrero 9, 2012 at 12:34 pm.

Colecciona y estudia patrones comunes de código y estilo con Pears

Alma Fernández — Tue, 07 Feb 2012 19:49:27 +0000

Pears es un theme libre para WordPress con el que crear tu propia librería de patrones de código HTML y estilo CSS. Cada día vemos repetirse determinados patrones y es una gran idea poderlos almacenar para reutilizarlos en caso necesario y, como indican desde Simplebits, analizarlos como bloques independientes de forma que los entendamos completamente y los apliquemos de forma adecuada.

Pears está alojado en GitHub por lo que, además de descargarlo, puedes hacer tu propio fork y contribuir a mejorarlo.

Vía Think Vitamin

Otras entradas que pueden interesarte:

¿Quieres hasta 6 meses de hosting gratis? Utiliza el cupón RCwebmasterlibre al contratar cualquier plan con RedCoruna - más información

Colecciona y estudia patrones comunes de código y estilo con Pears was first posted on febrero 7, 2012 at 8:49 pm.

Tinycon, añade notificaciones al favicon de tus aplicaciones web

Alma Fernández — Tue, 07 Feb 2012 18:55:58 +0000

Imagino que habrás visto en algunas aplicaciones como el favicon cambia cuando recibimos una notificación (un correo nuevo, un mensaje privado…). Es una forma útil de hacer ver a tus usuarios que algo está sucediendo sin interrumpir su actividad.

Tinycon es una pequeña librería javascript que te permite hacer eso mismo. Funciona actualmente en Chrome y Firefox y para los navegadores que no soportan la propiedad canvas o los favicon dinámicos añade el número al título de la página, de forma que aún usando navegadores antiguos puedan recibir sus notificaciones correctamente.

Entradas relacionadas

¿Quieres hasta 6 meses de hosting gratis? Utiliza el cupón RCwebmasterlibre al contratar cualquier plan con RedCoruna - más información

Tinycon, añade notificaciones al favicon de tus aplicaciones web was first posted on febrero 7, 2012 at 7:55 pm.

Ya está disponible Twitter Bootstrap 2.0

Alma Fernández — Wed, 01 Feb 2012 19:58:15 +0000

Twitter Bootstrap es una plantilla desde la que desarrollar tus sitios web más cómodamente, nacida en el seno del equipo de desarrollo de Twitter nos ofrece un framework con botones, estilos de texto, cuadrículas, media-queries y muchos elementos más con los que empezar nuestro sitio web será bastante más rápido.

En esta nueva versión se añaden multitud de elementos que, si bien son totalmente accesorios, son de uso común en interfaces web y que a muchos nos facilitarán la tarea de generar bonitos botones divididos, efectos con javascript (pestañas, dropdowns, barras de progreso animadas etc.)

Sin duda, un recurso de gran valor sea para usarlo con todos sus accesorios sea como base o inspiración para ir desarrollando tu propia plantilla.

Entradas relacionadas

¿Quieres hasta 6 meses de hosting gratis? Utiliza el cupón RCwebmasterlibre al contratar cualquier plan con RedCoruna - más información

Ya está disponible Twitter Bootstrap 2.0 was first posted on febrero 1, 2012 at 8:58 pm.

ChilliStats, una forma sencilla de ver las estadísticas de tu sitio

Alma Fernández — Tue, 31 Jan 2012 19:00:35 +0000

Desde que salió a la luz, la mayoría de los que tenemos algún sitio web hemos sucumbido a Google Analytics. Es un gran servicio que nos ofrece muchos datos estadísticos sobre las visitas a nuestro sitio web, pero para muchos esa cantidad de datos es simplemente abrumadora.

ChilliStats es un sencillo sistema de estadísticas: sencillo de instalar en tu alojamiento web y sencillo de comprender. Nos ofrece una pantalla en la que comprobar las evoluciones del sitio de un vistazo y otras dos para obtener datos adicionales (referrers, términos de búsqueda y datos históricos). Además, si te gusta mostrar las visitas en su sitio, dispone de un widget para hacerlo.

En el lado técnico, utiliza PHP y MySQL pero, a diferencia de otras aplicaciones similares, promete hacer un uso austero de nuestros recursos y almacenar sólo los datos fundamentales.

Otras entradas que pueden interesarte:

¿Quieres hasta 6 meses de hosting gratis? Utiliza el cupón RCwebmasterlibre al contratar cualquier plan con RedCoruna - más información

ChilliStats, una forma sencilla de ver las estadísticas de tu sitio was first posted on enero 31, 2012 at 8:00 pm.

Bear CSS, crea una hoja de estilos en base a tu HTML

Alma Fernández — Tue, 31 Jan 2012 18:41:39 +0000

Cuando comenzamos a escribir código para una página web, lo normal es que primero escribamos el HTML y, partiendo de ahí, vayamos dando estilo a los diferentes elementos. De esta forma podemos crear un código mucho más semántico en el que clases e ids tengan un significado propio y no caer en el tan habitual uso de clases con nombres crípticos o exclusivamente para presentación (seguro que en tu haber hay alguna clase .rojo por ejemplo, en el mío alguna que otra no vamos a negarlo).

Bear CSS es una sencilla herramienta online que te ayudará a crear una hoja de estilos base con todos los elementos que hayas dispuesto en tu HTML, así no te olvidarás de dar estilo a los párrafos ni tendrás que ir yendo y viniendo de una ventana a otra para ver los nombres de las clases que has empleado.

Bear CSS es un proyecto de Kyle Gawley y Jordan Henderson y para llevarlo a cabo han utilizado HTML5, CSS3, PHP y jQuery, haciendo uso de plugins tan interesantes como el PHP Simple DOM Parsing para leer el fichero HTML que subimos y extraer elementos y clases e ids y jQuery Uploadify para la subida de ficheros.

Entradas relacionadas

¿Quieres hasta 6 meses de hosting gratis? Utiliza el cupón RCwebmasterlibre al contratar cualquier plan con RedCoruna - más información

Bear CSS, crea una hoja de estilos en base a tu HTML was first posted on enero 31, 2012 at 7:41 pm.

Genera un bookmarklet para probar tus sitios en diferentes resoluciones

Alma Fernández — Mon, 30 Jan 2012 21:25:32 +0000

Como ya hemos comentado antes, el diseño responsivo (no termina de gustarme la palabra, ¿qué se está usando en castellano? ¿adaptable?) es aquel que se adapta a la resolución del dispositivo alterando partes de la presentación para encajar en él y ofrecer la mejor experiencia de uso. Todo esto está muy bien pero, sobre todo cuando llegamos al reino de los móviles, hay decenas de resoluciones a comprobar.

Benjamin Keen, aprovechando un retraso en un vuelo, nos proporciona una herramienta con la que generar un bookmarklet que agregar a nuestro navegador con las resoluciones de pantalla que queramos probar. Es una buena idea, flexible y sencilla: introducimos las resoluciones deseadas, pulsamos el botón generar y en unos segundos obtenemos un enlace que arrastrar a nuestro navegador con el que realizar las pruebas. Cuando lo pulsemos se abrirá una página con las resoluciones escogidas para que hagamos las comprobaciones de un solo vistazo.

En la captura te darás cuenta de que a mi me quedan deberes por hacer, y tú ¿ya tienes un sitio adaptable?

Otras entradas que pueden interesarte:

¿Quieres hasta 6 meses de hosting gratis? Utiliza el cupón RCwebmasterlibre al contratar cualquier plan con RedCoruna - más información

Genera un bookmarklet para probar tus sitios en diferentes resoluciones was first posted on enero 30, 2012 at 10:25 pm.

Zocial, botones semánticos sin imágenes

Alma Fernández — Mon, 30 Jan 2012 17:31:16 +0000

Imagino que todos los que tenemos una página web, en un momento u otro, hemos salido en busca de iconos para las redes sociales, para integrar nuestro formulario de login con métodos de identificación de terceros, ya sabes.

La mayoría de las veces encontramos un precioso set de iconos dentro de los muchos ya disponibles pero, como con todo en esta vida, el exceso de imágenes puede afectar nuestros tiempos de carga y, sobre todo en el caso de los botones, el hecho de que el texto sea parte de la imagen nos limita bastante.

Zocial es proyecto que pretende cambiar un poco ese panorama, usando tipografías icónicas con @font-face y estilos CSS3 nos ofrece un set de botones totalmente editables y con un estilo cuidado y bien definido. Zocial nos permite utilizar botones con texto totalmente personalizable o utilizar sólo los iconos, sin añadir imágenes extra y de forma semántica (bastante semántica pero mejorable de cara a accesibilidad, si te interesa échale un vistazo a este icono de los autores de pictos: Using icon fonts).

Vía WebResources Depot

Entradas relacionadas

¿Quieres hasta 6 meses de hosting gratis? Utiliza el cupón RCwebmasterlibre al contratar cualquier plan con RedCoruna - más información

Zocial, botones semánticos sin imágenes was first posted on enero 30, 2012 at 6:31 pm.

Dropkick, dropdowns más bonitos

Alma Fernández — Fri, 13 Jan 2012 13:23:10 +0000

Personalizar los menús desplegables de un formulario es una labor que no suele ser ni cómoda ni fácil.

Existen múltiples plugins y scripts para hacerlo pero, en la mayoría de los casos, requiere sacrificar alguna funcionalidad o añadir toneladas de código extra.

Ojeando Criterion me encuentro con Dropkick, un plugin para jQuery con el que la tarea se convierte en algo sencillo y flexible.

Dropkick nos permite dar estilo a los elementos