Una seria de trucos muy útiles si estas desarrollando un theme para wordpress. La mayoría son bastante conocidos pero nunca se sabe, puede que alguno de la lista no lo conozcas o simplemente no te acuerdes como se hace determinada cosa (lo sé por experiencia). Los trucos van desde conseguir destacar un post determinado hasta como incluir un archivo .php donde nos interese pasando por el uso de sentencias condicionales o invertir el orden en el que se muestran los comentarios.
Enlace: Useful WordPress ...
En ocasiones es necesario el uso de CSS para maquetar un mail, por ejemplo si quieres crear un newsletter de algún servicio, para una lista de correo, mails de tu empresa etc. Los problemas llegan, como siempre, al intentar que un email maquetado de una forma determinada se vea igual en los diferentes servicios de correo web y clientes de escritorio ya que cada uno soporta las instrucciones CSS que quiere.
Campaign Monitor saca una guía formada por dos tablas donde aparecen los principales sistemas de correo, tanto web como de escritorio, en donde se indica que instrucciones CSS soporta cada uno y cuales no, desde Gmail hasta .Mac pasando por Hotmail, Yahoo, Outlook o Thunderbird. Podemos ver las tablas en la web o descargarlas en formato pdf y excel. Me ha sorprendido la mala implementación que tiene Gmail de CSS, a ver si para próximas actualizaciones se centran un ...
Hace poco el conocido framework de javascript Mootols sacaba su nueva versión, la 1.2, con nuevas características y mejoras de velocidad. Para facilitarnos un poco la tarea cuando nos toque trabajar con él desde mediaVROG nos presentan un cheat sheet o chuleta centrada en la nueva versión con documentación resumida y clara sobre el framework: core, native, class, element, utilities y request.
Enlace: mootools 1.2 cheat ...
Una forma de cargar contenido que usan varios servicios, google reader por ejemplo, es la de mostrarnos una cierta cantidad de información hasta que llegamos con el scroll al final del documento, cargándose nuevamente más información y así sucesivamente, aquí podéis ver un ejemplo en funcionamiento. Hace un tiempo el amigo Luís explicaba en sentido web como conseguirlo con un script creado por él mismo y ahora nos enseña otro basado en jQuery para conseguir lo mismo pero reduciendo el código para implementarlo.
Tener muy presente que este tipo de formas hay que usarlas con mucha cautela (al igual que los tooltips por ejemplo) y no cargar con ellas contenido esencial ya que es poco accesible para buscadores y añade ciertas complejidades (aun que sean mínimas) para los usuarios.
Enlace: Cargar contenido mediante el scroll usando ...
El otro día un lector de Isopixel nos dejaba un comentario en una de las entradas para decirnos que imprimió un artículo pero que no se ve nada bien. Esto pasa al no tener una hoja de estilos para impresión incorporada al sitio ya que la impresora toma los mismos estilos que el blog tiene para ser visualizado en la web en su proceso de impresión, obteniendo como es lógico un resultado diferente, las medidas del papel no son las mismas, los tamaños de letra etc.
La solución es simple, crear una hoja CSS solamente para impresión, donde básicamente lo que se hace es estandarizar medidas y eliminar estilos innecesarios. Una vez la tengamos la incluiremos igual que cualquier hoja de estilos e incorporaremos el atributo media=”print”que sirve para indicar a la impresora que esa es la hoja que le corresponde para imprimir documentos del blog, web o lo que sea.
Para ...
Nuevo menú con el tan de moda efecto acordeón que nos llega desde Leigeber. Está realizado en javascript desde cero y sin el uso de ninguna librería estilo jQuery pensando solamente 1kb. Los podemos usar como menú, presentar algo o lo que se nos ocurra. La implementación es sumamente fácil, solamente tendremos que crear una lista desordenada a la que darle una id que usaremos como indicador para el script. El resto de pasos son los de siempre, cargar entre head /head el script y llamar a una pequeña función. Está testeado en IE6, IE7, FireFox, Opera y Safari. Otra forma para crear menús vistosos de forma muy fácil, con un peso mínimo y varias opciones de personalización.
Enlace: Horizontal JavaScript Accordion ...
Un efecto bastante usado y resultón es el de las transparencias, fáciles de implementar mediante el uso de imágenes .png con el grado que deseemos. Solamente tenemos que indicar en el css que cajón queremos muestre transparencia dando como background el png elegido. Como siempre, los problemas vienen con IE6 que simplemente no soporta imágenes png con transparencia, aunque existen varias formas de arreglar esto.
En css-tricks ponen a nuestra disposición unas cuantas imágenes con diferentes grados de opacidad en varios colores y en ese mismo artículo enlazan con otro donde se explican varios métodos para poder usar png,s transparentes en IE6.
Enlace: Free PNGs for Creating Transparent ...
Actualización:
A colación con todo esto de los mockups, en isopixel publiqué un interesante artículo sobre el tema traducido del original publicado por 37signals. El asunto implica cierta controversia por lo que también se inició un nuevo tema en el foro con la pregunta principal ¿Que usar para hacer un mockup web?
—————–
Yahoo liberaba hace poco un buen recurso para todos los diseñadores web, un paquete con elementos gráficos para usar en el mockup de un proyecto web, todo gratuito y de gran nivel. El set está disponible en diferentes formatos: OmniGraffle, Visio (XML), Adobe Illustrator (PDF y SVG) y Adobe Photoshop (PNG). Cuenta con los siguientes elementos:
Anuncios y sus medidas
Calendarios
Sliders
Listas y tablas
Controles UI
Elementos de formularios
Grids
Menús y botones
Teléfonos móviles
Elementos del iPhone
Navegación y paginación
Elementos del SO
Enlace: Yahoo Design Stencils Kit | Vía: foobarra ...
En varias ocasiones se habló por aquí de los tooltips, esos mensajes que nos encontramos en muchas páginas al pasar el ratón por encima y que usados con cautela y conocimiento pueden resultar muy útiles para ampliar determinada información de cualquier parte de un sitio web. Siempre con mesura también le podemos dar un interesante toque al sitio mediante los tooltips y su personalización.
Existen varias formas de conseguirlos a las que sumaremos Prototip 2, una librería basada en prototype dedica enteramente a generar diferentes tooltips. El funcionamiento e instalación es bastante simple y lo mejor de todo es la cantidad diferente de estilos que podemos darle a nuestros mensajes, con esquinas redondeadas o no, que se mantenga abierto hasta que el usuario lo cierre, efecto de movimiento etc. Es gratuito solamente para proyectos no comerciales, si lo queremos para algo más contamos con 4 opciones diferentes que van desde los ...
Un buen recopilatorio de themes para wordpress desde wpzoom. Nuevamente son unos cuantos de estilo magazine que ahora están de moda pero además le dan otra vuelta más incluyendo algunos diseñados mediante “grid”, que por otro lado esta suele ser una característica común en los de estilo magazine. Los encontraremos en varios colores y distribuciones diferentes lógicamente predominando la sobriedad que dan los diseños con grid.
Recomendable guardar en favoritos tanto para cambiar en un futuro el aspecto de algún blog de estilo general como por si creas una revista, blog colaborativo etc.
Enlace: 45+ Free Premium WordPress Themes with Magazine or Grid ...
