SoftwareLibre.Net

Ethan Nicholas ha creado un motor CSS para Swing. Como menciona en su blog, uno de los problemas de Swing es que hay que definir las características visuales de los componentes mediante código, lo que lleva a que para cambiar dichas características hay que volver a compilar la aplicación. Desde hace mucho, en el mundo HTML se usa CSS para este tipo de características, por lo que se ha vuelto un estándar en el mundo de la programación. Por ejemplo, Openlaszlo, Flex y JavaFX lo usan para definir los colores y estilos de sus componentes. Por ello a la hora de buscar una forma de separar los aspectos visuales del código de la aplicación y poder cambiarlos en tiempo de ejecución, CSS resulta una buena alternativa para Swing. Ethan ha construido un motor para integrar dicha tecnología en Swing y lo ha puesto disponible bajo licencia GPL.  

Pese a que hay mucha información en Internet relacionada a este tema, recibo muchos mails y peticiones en el foro de como implementar los "miniposts" (o asides) en nuestro blog. Así que he pensado en hacer un post "explicativo-recopilatorio" en el que veamos como implementar este tipo de posts de una forma fácil. Actualmente tenemos 2 formas de hacerlo, una que es la que he estado usando hasta hace 1 año y la siguiente que es la que uso actualmente (y creo que en el theme anterior). 1) Miniposts en listado (Asides) El sistema más usado para crear miniposts, se encarga de generar un listado de artículos usando un elemento <ul></ul> o <ol></ol>.  Como es el sistema más usado e implementado me limitaré a ofrecer un listado de tutoriales:

1. Adding Asides

Nuestro compañero Dogguie, que por cierto tiene un gran blog que os recomiendo, me ha pedido que le explique como numerar comentarios en Wordpress, y la verdad es que es relativamente sencillo, basta con poner un par de lineas de código dentro del archivo comments.php de nuestra plantilla, theme para los más Pro’s Lo primero es declarar la variable contador(podéis llamarla como queráis) con valor 1, en la pate del código donde empiezan los comentarios, que es donde pone algo como esto:

Así que he buscado una solución mas “caserilla” pero hace el efecto óptico deseado y es el de iluminar la fila entera y con otro color iluminamos la celda por donde pasa el ratón. La solución es sencilla bajo mi punto de vista y es usando una pequeña hoja de estilos, no la voy a hacer tan complicada como la tengo yo pero el efecto es el mismo… etiquetas: css, efectos, tablas, tablehover

Después de haber simplificado las etiquetas margin y padding de nuestro css, hoy vamos aprender a simplificar la etiqueta “border“. Muchas veces nos encontramos la etiqueta borde de nuestro CSS de la siguiente forma: #div { border-width: 1px; border-style: solid; border-color: #666666; }o así: #div { border-right-width: 2px; border-right-style: solid; border-right-color: #666666; }Cuando la forma simplificada y también correcta, sería así, #div { border:1px solid #666; } y así, respectivamente.

Una de mis debilidades es diseñar y maquetar con CSS, y ultimamente estoy viendo muchos themes de Worpress con el CSS muy desestructurado y con muchas lineas inútiles. Y cada vez más odio ver trozos de código como este: #div { margin-top: 20px; margin-bottom: 5px; margin-right: 10px; margin-left: 25px; padding-top: 10px; padding-bottom: 0px; padding-right: 5px; padding-left: 5px; }8 lineas que pueden ir en dos, imaginaos esto en todo el style.css, se multiplica el numero de lineas del css por 4, una burrada, así que os voy a dar unas nociones de CSS muy sencillitas y que os serán de mucha utilidad. Voy a dividir este post en 4 o 5, ya que todo en uno se me antoja muy largo, hoy empezaremos con el margin y el padding.

Ya os puse hace tiempo unas chuletas de CSS y PHP,pero por si alguno no le gustaron, hoy os traigo otra de CSS, para adjuntar la que ya teniamos. Os aconsejo que después de descargaros el pdf e imprimirlo, plastifiquéis la chuleta CSS, podéis poner esta por una cara y la otra chuleta de CSS por la otra.

Hace ya más de un año que escribí Por qué me gusta el Firefox y la verdad es que aunque sigue siendo un navegador excelente, el panorama ha cambiado bastante desde el año pasado. Por un lado, Microsoft parece que se ha decidido a que Internet Explorer 8 llegue a ser algo decente en lo que respecta al soporte de estándares:

• Internet Explorer 8 y el nuevo “super-duper standards mode”

Por otro lado, Safari/WebKit y Opera están en una encarnizada batalla para ver quién es la que más estándares soporta y quién logra pasar antes y mejor el test Acid 3:

La nueva versión de Jawr permite ahora a los usuarios de Facelets y Grails aprovechar las ventajas de esta herramienta.  Jawr es una librería Open Source que tiene dos utilidades para el desarrollo de aplicaciones web Java en las que se usa mucho javascript: 

En la época de la guerra de navegadores 4.0, tanto Netscape 4 como Internet Explorer 4 introdujeron infinidad de novedades revolucionarias, muchas de ellas a menudo incompatibles con el navegador del rival. Una de estas novedades era la posibilidad de que las fuentes que se usaran para renderizar la página se pudieran descargar del servidor web y no tener que estar pendientes, por tanto, de si la fuente que queremos usar estará instalada en el sistema del visitante o no.

Hace ya tiempo os comentaba la existencia de unos interesantes iconos a los que podíamos cambiar el aspecto sólo con CSS, el truco era simple: una imagen transparente y un fondo de color. Hoy me encuentro con esta idea aplicada a un icono de RSS, mejor explicada y con ejemplos: How to make RSS icons in every color with just an image El truco es el mismo, una imagen semi-transparente y un fondo de color. En este caso, la imagen que se superpone también tiene dibujados los bordes redondeados, para que el efecto sea total.

Hay muchas formas de mejorar el tiempo de carga de una página; algunas de ellas son:

• realizar menos peticiones al servidor
• agregar una cabecera de expiración muy lejana en el futuro
• comprimir los componentes de la página
• “minificar” tu javascript, css, html

PHP Speedy es un script para PHP que realiza estas cuatro tareas automáticamente. Está disponible como clase (para utilizar en cualquier sitio/página que soporte PHP) o como plugin para WordPress —he estado probando este último en mi tumblelog y el resultado ha sido bastante satisfactorio.

Cada día es más difícil sorprender a nuestros usuarios pero ¿qué tal si nuestro sitio reflejase el tiempo metereológico del momento? En CSS Tricks publican un artículo de David Walsh que nos explica de forma sencilla como conseguir este efecto con PHP y CSS. Para ello David nos ayuda con un script que obtendrá la información metereológica mediante el API de Yahoo! Weather y lo traducirá a una clase CSS con la que lograremos el efecto interesante ¿no? Using Weather Data to Change Your Websites Apperance through PHP and CSS

Recientemente he publicado una librería open source llamada Jawr. Se trata de una herramienta que ayuda a los desarrolladores web en la creación y mantenimiento de código javascript usando un sistema modular, en lugar de meter todo dentro de uno o dos archivos enormes. También hace funciones de compresión, tanto para javascript como para CSS. Además de permitir estructurar el código en archivos separados, reduce los tiempos de carga de las páginas al minificar y comprimir los archivos hasta la séptima parte de su tamaño original. La actual tendencia hacia aplicaciones web "ricas" lleva a un aumento en el uso de javascript y AJAX. Esto implica que el volumen y complejidad del código javascript en una aplicación promedio ha crecido considerablemente.

Stylish permite darle el aspecto que nosotros queramos a las páginas que visitemos cambiando de manera local las hojas de estilo de esa página web. Además podemos compartir esas modificaciones del CSS con otros usuarios. De modo que aquí está el resultado de toda la noche: userstyles.org/styles/5002. Podéis ver el antes y el después en los siguientes enlaces: tinyurl.com/3ydjqd [Antes] tinyurl.com/322fvm [Después]. Enlace para descargar la extensión Stylish: tinyurl.com/2mjgzt .Espero que os guste. :D etiquetas: meneame, css, firefox, stylish, extensiones