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
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.
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.
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.
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.
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?
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).
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 <select> requiriéndonos únicamente que les demos un atributo name, nada de divs extras ni cosas raras. La apariencia se controla mediante hojas de estilo y no perdemos ninguna funcionalidad propia de los dropdowns (si añadimos el tabindex se pueden seguir navegando con el tabulador).
Uno de los “problemas” que ha enfrentado el diseño web desde sus comienzos es el de adaptarse al dispositivo desde el que se visualizan las páginas.
No hace tanto era suficiente contar con la resolución de pantalla más típica para asegurarnos, hasta cierto punto, de que nuestros diseños se mostrarían correctamente en todos los ordenadores. Pero ahora, que ya no se accede a ellas desde un solo tipo de dispositivo y las resoluciones son cada vez más dispares, esta labor se hace realmente compleja. Puedes optar por hacer diferentes versiones de tus sitios pero el gasto de tiempo y esfuerzo no es realmente práctico y rompe un poco con la siempre apreciada adaptabilidad de la web.
Initializr es una plantilla con la que te será más cómodo crear diseños responsivos, es decir, adaptables al dispositivo en que se visualizan. Una suma de diseño líquido basado en porcentajes y media-queries será todo lo que necesites.
Con Initializr dispondrás de una base para crear sitios que se verán bien en móviles, tablets, ordenadores con pantallas “normales” y ordenadores con pantallas enormes.
Puedes descargarlo desde la web del autor, donde además podrás leer una explicación exhaustiva del tema. Y, si el inglés no es tu fuerte, podrás leer una traducción cortesía de Diego Ante.
Vía Think Vitamin
A pesar que todavía está muy verde la especificación de CSS3, ya podemos usar algunas reglas como, transform, box-shadow o border-radius. Eso si, dándole a cada navegador que lo soporte sus propias reglas. A través de Web Resources Depot conozco CSS3, Please!
CSS3, please! es un generador de propiedades CSS3 para todos los navegadores. Al entrar se nos presenta una hoja de estilo que podremos editar para adaptar a nuestras necesidades y ver los cambios aplicados a un cuadrado resaltado. Incluso incluye propiedades para Internet Explorer en los casos que la transformación esté soportada mediante filtros.
No deja de ser un asco tener que duplicar o triplicar una regla de estilo para que funcione en casi todos los navegadores pero, por lo menos, ahora es más rápido.
Alojado en RedCoruna Hosting
¿Quieres hasta 6 meses de hosting gratis? Utiliza el cupón RCwebmasterlibre al contratar cualquier plan con RedCoruna - más información
Seguir @webmasterlibre
