Webmaster Libre http://www.webmasterlibre.com Desarrollo Web con Software Libre Thu, 09 Feb 2012 11:34:44 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 WebmasterLibrehttp://feedburner.google.com The CSS3 Test: descubre la compatibilidad de tu navegador con CSS3 http://www.webmasterlibre.com/2012/02/09/the-css3-test-descubre-la-compatibilidad-de-tu-navegador-con-css3/ http://www.webmasterlibre.com/2012/02/09/the-css3-test-descubre-la-compatibilidad-de-tu-navegador-con-css3/#comments Thu, 09 Feb 2012 11:34:44 +0000 Alma Fernández http://www.webmasterlibre.com/?p=2521 The CSS3 Test

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.


]]> http://www.webmasterlibre.com/2012/02/09/the-css3-test-descubre-la-compatibilidad-de-tu-navegador-con-css3/feed/ 0 Colecciona y estudia patrones comunes de código y estilo con Pears http://www.webmasterlibre.com/2012/02/07/colecciona-y-estudia-patrones-comunes-de-codigo-y-estilo-con-pears/ http://www.webmasterlibre.com/2012/02/07/colecciona-y-estudia-patrones-comunes-de-codigo-y-estilo-con-pears/#comments Tue, 07 Feb 2012 19:49:27 +0000 Alma Fernández http://www.webmasterlibre.com/?p=2515

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.


]]> http://www.webmasterlibre.com/2012/02/07/colecciona-y-estudia-patrones-comunes-de-codigo-y-estilo-con-pears/feed/ 0 Tinycon, añade notificaciones al favicon de tus aplicaciones web http://www.webmasterlibre.com/2012/02/07/tinycon-anade-notificaciones-al-favicon-de-tus-aplicaciones-web/ http://www.webmasterlibre.com/2012/02/07/tinycon-anade-notificaciones-al-favicon-de-tus-aplicaciones-web/#comments Tue, 07 Feb 2012 18:55:58 +0000 Alma Fernández http://www.webmasterlibre.com/?p=2511

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.


]]> http://www.webmasterlibre.com/2012/02/07/tinycon-anade-notificaciones-al-favicon-de-tus-aplicaciones-web/feed/ 0 Ya está disponible Twitter Bootstrap 2.0 http://www.webmasterlibre.com/2012/02/01/ya-esta-disponible-twitter-bootstrap-2-0/ http://www.webmasterlibre.com/2012/02/01/ya-esta-disponible-twitter-bootstrap-2-0/#comments Wed, 01 Feb 2012 19:58:15 +0000 Alma Fernández http://www.webmasterlibre.com/?p=2507

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.


]]> http://www.webmasterlibre.com/2012/02/01/ya-esta-disponible-twitter-bootstrap-2-0/feed/ 0 ChilliStats, una forma sencilla de ver las estadísticas de tu sitio http://www.webmasterlibre.com/2012/01/31/chillistats-una-forma-sencilla-de-ver-las-estadisticas-de-tu-sitio/ http://www.webmasterlibre.com/2012/01/31/chillistats-una-forma-sencilla-de-ver-las-estadisticas-de-tu-sitio/#comments Tue, 31 Jan 2012 19:00:35 +0000 Alma Fernández http://www.webmasterlibre.com/?p=2504

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.


]]> http://www.webmasterlibre.com/2012/01/31/chillistats-una-forma-sencilla-de-ver-las-estadisticas-de-tu-sitio/feed/ 0 Bear CSS, crea una hoja de estilos en base a tu HTML http://www.webmasterlibre.com/2012/01/31/bear-css-crea-una-hoja-de-estilos-en-base-a-tu-html/ http://www.webmasterlibre.com/2012/01/31/bear-css-crea-una-hoja-de-estilos-en-base-a-tu-html/#comments Tue, 31 Jan 2012 18:41:39 +0000 Alma Fernández http://www.webmasterlibre.com/?p=2500 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.


]]> http://www.webmasterlibre.com/2012/01/31/bear-css-crea-una-hoja-de-estilos-en-base-a-tu-html/feed/ 1 Genera un bookmarklet para probar tus sitios en diferentes resoluciones http://www.webmasterlibre.com/2012/01/30/genera-un-bookmarklet-para-probar-tus-sitios-en-diferentes-resoluciones/ http://www.webmasterlibre.com/2012/01/30/genera-un-bookmarklet-para-probar-tus-sitios-en-diferentes-resoluciones/#comments Mon, 30 Jan 2012 21:25:32 +0000 Alma Fernández http://www.webmasterlibre.com/?p=2495

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.


]]> http://www.webmasterlibre.com/2012/01/30/genera-un-bookmarklet-para-probar-tus-sitios-en-diferentes-resoluciones/feed/ 5 Zocial, botones semánticos sin imágenes http://www.webmasterlibre.com/2012/01/30/zocial-botones-semanticos-sin-imagenes/ http://www.webmasterlibre.com/2012/01/30/zocial-botones-semanticos-sin-imagenes/#comments Mon, 30 Jan 2012 17:31:16 +0000 Alma Fernández http://www.webmasterlibre.com/?p=2488

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.


]]> http://www.webmasterlibre.com/2012/01/30/zocial-botones-semanticos-sin-imagenes/feed/ 0 Paneles de imágenes deslizantes sólo con CSS3 http://www.webmasterlibre.com/2012/01/26/paneles-de-imagenes-deslizantes-solo-con-css3/ http://www.webmasterlibre.com/2012/01/26/paneles-de-imagenes-deslizantes-solo-con-css3/#comments Thu, 26 Jan 2012 14:56:17 +0000 Alma Fernández http://www.webmasterlibre.com/?p=2473

No creo equivocarme demasiado si digo que todos los desarrolladores de front-end están como niño con zapatos nuevos con CSS3 y HTML5. Por lo que podemos ir viendo, las posibilidades de darle un toque especial a un sitio web no hacen más que aumentar y buena muestra de ello son estos paneles deslizantes con imágenes realizados sin mediar javascript.

Su aspecto es inmejorable y, cuando la gente decida por fin librarse de los navegadores obsoletos, seguro que es sólo una parte de lo que se podrá lograr.

En el artículo que enlazo, además de unos cuantos ejemplos de las diversas transiciones que podemos realizar obtendrás el código fuente para poder hacerlo tu mismo.

Entradas relacionadas

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


Paneles de imágenes deslizantes sólo con CSS3 was first posted on enero 26, 2012 at 3:56 pm.


]]> http://www.webmasterlibre.com/2012/01/26/paneles-de-imagenes-deslizantes-solo-con-css3/feed/ 0 Scrollorama, haz locuras con el scroll de tu página http://www.webmasterlibre.com/2012/01/26/scrollorama-haz-locuras-con-el-scroll-de-tu-pagina/ http://www.webmasterlibre.com/2012/01/26/scrollorama-haz-locuras-con-el-scroll-de-tu-pagina/#comments Thu, 26 Jan 2012 14:40:51 +0000 Alma Fernández http://www.webmasterlibre.com/?p=2469

Scrollorama es un plugin para jQuery que te permitirá hacer cosas increibles con tus páginas cuando el usuario haga scroll.

Podrás hacer efectos parallax, animar y transformar texto (rotarlo, incrementar el zoom, girarlo, hacerlo desaparecer o aparecer suavemente…), mantener texto fijo en pantalla…

Visita la página del proyecto para ver un ejemplo pero, recuerda, estas cosas mejor cuando no las exageras demasiado. No queremos que a base de hacer efectos alucinantes tus usuarios se pierdan el contenido de la página ¿no?.

Entradas relacionadas

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


Scrollorama, haz locuras con el scroll de tu página was first posted on enero 26, 2012 at 3:40 pm.


]]> http://www.webmasterlibre.com/2012/01/26/scrollorama-haz-locuras-con-el-scroll-de-tu-pagina/feed/ 0