¿Qué características CSS soporta cada Navegador Web?

Cuando diseñamos un sitio web con CSS, siempre tendremos la duda si “x” propiedad o “y” pseudo selectores son soportados en qué navegador web, e incluso, desde qué versión en cada uno de ellos. Para ayudarnos a despejar este tipo de dudas, tenemos al interesante buscador Browser Support.

[ Browser Support - Búsqueda ]

El buscador nos permite fácilmente encontrar el resultado esperado para cualquier propiedad, pseudo selector, @reglas y valores de CSS, dándonos un resultado como el que vemos a continuación.

[ Browser Support - Resultados ]

Enlace: browsersupport.net

Tip: El sitio también ofrece la lista completa de características CSS, por si no deseas realizar una búsqueda.

Vía: Web Resources Depot.

Share

Ajustes en los iconos del escritorio de Xfce

Ajustes en los iconos del escritorio de Xfce

Desde que salió Xfce 4.10 lo he estado usando bastante, ¡y me ha gustado mucho!, tanto que a veces siento que no extraño a mi querido Openbox.

Sin embargo, había un detalle que me molestaba: el comportamiento de los iconos del escritorio, en particular el fondo opaco del texto de los iconos, y la rejilla (grid) tan amplia usada para acomodar los iconos.

Como en ningún lugar de las opciones de configuración existe la posibilidad de personalizar lo anterior, investigué en la web cómo hacerlo, y me encontré con las poderosas hidden customisations (les recomiendo ampliamente leer el texto completo).

¿Qué hay que hacer? Es sencillo, sólo debemos editar el archivo ~/.gtkrc-2.0 (aunque se recomienda mejor editar o crear el archivo ~/.gtkrc-2.0.mine, pues el primero es probable que sea sobreescrito por el sistema), y agregar lo siguiente (ajusta los valores según tus necesidades):

style "xfdesktop-icon-view" {
	XfdesktopIconView::label-alpha = 0
	XfdesktopIconView::selected-label-alpha = 100
	XfdesktopIconVIew::ellipsize-icon-labels = 1
 
	XfdesktopIconView::shadow-x-offset = 1
	XfdesktopIconView::shadow-y-offset = 1
	XfdesktopIconView::shadow-color = "#000000"
	XfdesktopIconView::selected-shadow-x-offset = 1
	XfdesktopIconView::selected-shadow-y-offset = 1
	XfdesktopIconView::selected-shadow-color = "#000000"
 
	XfdesktopIconView::cell-spacing = 0
	XfdesktopIconView::cell-padding = 0
	XfdesktopIconView::cell-text-width-proportion = 2
 
	base[NORMAL] = "#3F6BA4"
	base[SELECTED] = "#3F6BA4"
	base[ACTIVE] = "#3F6BA4"
 
	fg[NORMAL] = "#ffffff"
	fg[SELECTED] = "#ffffff"
	fg[ACTIVE] = "#ffffff"
}
widget_class "*XfdesktopIconView*" style "xfdesktop-icon-view"

Las propiedades anteriores son sencillas de entender; de todas formas, aquí les explico las principales:

  • label-alpha es el porcentaje de opacidad del fondo del texto de los iconos. Si su valor es cero el fondo será totalmente transparente, si es 50 tendrá una semi transparencia, etc.

  • shadow-x-offset y shadow-y-offset indican la posición de la sombra del texto, mientras shadow-color indica su color.

  • cell-spacing indica la separación entre cada celda del grid de los iconos del escritorio, mientras cell-padding especifica un espacio adicional que rodea a cada uno de los iconos. Ambas medidas son en pixeles.

  • cell-text-width-proportion indica el ancho máximo proporcional del texto debajo de los iconos. Por ejemplo, si los iconos son de 30px, un valor de ‘2.5’ dejaría un ancho máximo de 75px para los textos.

Cada vez me gusta más Xfce :-)

Share

Carteles sobre los Canales y Ciclo de Liberaciones de Firefox

A estas alturas ya todos conocemos los diversos canales de liberación que tiene Firefox (Release, Beta, Aurora y Nightly), así como su ciclo acelerado de liberaciones de seis semanas… pero hay mucha gente que no lo sabe, o bien, que desconoce cuál es el propósito específico de cada canal.

Por lo anterior, los chicos de Mozilla diseñaron un par de carteles (posters, cromos, o como deseen llamarles), para que todos nosotros los compartamos con nuestros conocidos, familiares, colegas, etc. Aquí los tienen (en tamaño reducido):

[Firefox Releases]

[Rapid Release]

Les recomiendo descargar ambas imágenes en su tamaño original, cada una tiene una resolución de 2550×3300 px.

¡A compartirlos! :-)

Una nota adicional

Si deseas probar alguno de los canales en desarrollo de Firefox (Beta, Aurora o Nightly), pero no deseas perder tu instalación estable actual, recuerda que puedes ejecutar varias versiones de Firefox al mismo tiempo, sin mayores contratiempos.

Share

Ejecuta Twitter en el Panel Lateral de Firefox

Hoy Twitter anunció la disponibilidad de la renovada interfaz de mobile.twitter.com, y de inmediato recordé que hace algún tiempo quise utilizar Twitter dentro del panel lateral de Firefox, pero su interfaz móvil era muy precaria, y de inmediato desistí. Ahora, con este cambio, retomo la idea, y la comparto con todos ustedes.

Paso 1. En Firefox, entramos a mobile.twitter.com, y entramos a nuestra sesión.

[Nuevo Twitter Mobile en la Barra Lateral de Firefox - Paso 1]

Paso 2. Creamos un marcador (bookmark) en la barra de marcadores de Firefox, arrastrando el favicon de Twitter, tal y como se aprecia en la siguiente imagen.

[Nuevo Twitter Mobile en la Barra Lateral de Firefox - Paso 2]

Paso 3. Damos clic derecho sobre el nuevo marcador, y en el menú contextual seleccionamos “Propiedades” (la última opción), y en el cuadro de diálogo que aparece, habilitamos la casilla de verificación “Cargar este marcador en el panel lateral“, y guardamos los cambios.

[Nuevo Twitter Mobile en la Barra Lateral de Firefox - Paso 3]

Paso 4. ¡Eso es todo! Ahora mientras estén navegando por la web, pueden dar clic al nuevo marcador de Twitter, y aparecerá en el panel lateral de nuestro querido Firefox.

[Nuevo Twitter Mobile en la Barra Lateral de Firefox - Paso 4]

¡Tip adicional! Lo anterior pueden hacerlo con cualquier sitio o aplicación web, pero sólo será funcional si dicho sitio ofrece una interfaz móvil, o bien, si utiliza un diseño responsivo.

Share

Xfce 4.10 disponible en ArchLinux, ¿y en Xubuntu?

Xfce Logo

La versión estable de Xfce 4.10 acaba de ser liberado. ¡Genial forma de comenzar la semana! Ya lo instalé en mi equipo, y funciona de mil maravillas. Sin duda, la alternativa con equilibrio perfecto para quienes evitan el uso de entornos de escritorio pesados, como GNOME y KDE.

En esta ocasión, no les pondré la lista de novedades con capturas de pantalla, ya que sería redundante al excelente Tour Oficial de Xfce 4.10, que está disponible en español e incluye una excelente cantidad de capturas de pantalla.

Instalación de Xfce 4.10 en ArchLinux

En ArchLinux, para instalar Xfce 4.10:

sudo pacman -Sy xfce4

Si ya tienes instalada su versión anterior, sólo actualiza:

sudo pacman -Syu

Si necesitas más detalles, te recomiendo revisar mi tutorial de instalación de Xfce en ArchLinux.

Xfce 4.10 y Xubuntu

Como saben, Xubuntu 12.04 fue liberado hace apenas unos días, y viene con Xfce 4.8.

Ignoro si esta versión de Xubuntu recibirá la actualización al nuevo Xfce, o esperarán hasta la 12.10. Aún no hay anuncio oficial al respecto.

Tampoco existe (hasta el momento de escribir estas líneas) algún PPA para la instalación de Xfce 4.10. Los mantendré informados apenas sepa algo.

[Actualización 9-Mayo-2012] Nuestros amigos de DesdeLinux nos dan la buena noticia de la disponibilidad de un PPA experimental, cuyo contenido debe migrar al PPA estable dentro de algunas horas. ¡Ya no hay pretextos para actualizar a Xfce 4.10!

[Actualización 11-Mayo-2012] ¡Ya está disponible el PPA oficial de Xfce 4.10 para Xubuntu 12.04 LTS Precise Pangolin (vía LFFL). Aquí las instrucciones de instalación:

sudo add-apt-repository ppa:xubuntu-dev/xfce-4.10
sudo apt-get update
sudo apt-get dist-upgrade

Hasta aquí los comandos para Xubuntu. Si deseas Xfce 4.10 en Ubuntu / Lubuntu / Kubuntu, te falta un comando más:

sudo apt-get install xubuntu-desktop

Un último consejo

Si por algún motivo tu sesión de Xfce en ArchLinux (e imagino en otras ditros) está corrupta (los paneles no aparecen adecuadamente, las ventanas no muestran sus bordes, etc), hay una manera muy sencilla de solucionarlo.

En los directorios ~/.config/xfce4 y ~/.cache/sessions se almacena toda la info de nuestro usuario para la sesión de Xfce, entonces basta con eliminar (o mejor aún, respaldar) dichos directorios, e iniciar nuevamente la sesión, para que Xfce cree nuevamente los archivos de configuración desde cero.

Share

Firefox 14 Aurora con activación manual de plugins y seguridad mejorada para identificar sitios

Esta semana fueron liberados Firefox 12 Estable y Firefox 13 Beta, ahora toca turno a Firefox 14 Aurora, el cual ya se encuentra disponible para su descarga en español para Windows, Mac y Linux. ¡Buen regalo de Mozilla para este fin de semana!

[Firefox 14 Aurora: Acerca de]

[Firefox 14 Aurora: Página de Inicio]

Novedades para el usuario final en Firefox 14 Aurora

La que considero la principal novedad, es la seguridad mejorada para identificar sitios (Site Identity Manager). Esta característica causó polémica hace unos días, pues muchos blogs lanzaron la nota alarmista de que Firefox iba a eliminar los favicons de su interfaz… nada más alejado de la realidad.

Lo único que hicieron los chicos de Mozilla, fue sustituir el favicon en la AwesomeBar (así se le llama a la barra de direcciones en Firefox) con uno representativo para indicar si se trata de un sitio o conexión segura, ayudando de esta forma al usuario a identificar si el sitio visitado usa encriptación SSL y certificado de seguridad, lo cual incluso le da una pauta al usuario si está visitando sitios fraudulentos o con contenido malicioso.

[Firefox 14 Aurora: Identidad de Sitios Mejorada]

Como pueden ver en la imagen, el favicon del sitio web sigue mostrándose en la interfaz (en el título de la pestaña o si creamos un marcador del sitio).

Una novedad más, que en lo particular me encantó, es que ahora los plugins pueden configurarse para que se carguen a petición del usuario (Opt-in Activation for Plugins). El único detalle, es que no viene habilitada por defecto. Si deseas hacerlo, entra a about:config y pon a true la propiedad plugins.click_to_play.

[Firefox 14 Aurora: Plugins Click to Play, Paso 1]

De esta manera, cada vez que visites una página que utilice algún plugin, como Flash, se te pedirá si deseas habilitarlo (en sólo esa ocasión o fijo para el sitio web), ya sea desde el icono especial a la izquierda de la AwesomeBar, o directamente sobre el elemento en cuestión (como el video de YouTube de la imagen siguiente).

[Firefox 14 Aurora: Plugins Click to Play, Paso 2]

Otra novedad, es el autocompletado de URLs al momento de escribir en la AwesomeBar (tal y cómo lo hace Chrome desde no-recuerdo-que-versión).

[Firefox 14 Aurora: Autocompletar en la AwesomeBar]

Otro cambio, es que Firefox para Windows empieza a incorporar elementos de Australis, la nueva interfaz que será predeterminada dentro de unos meses.

[Firefox 14 Aurora: Primera vista de Australis en Windows]

Otros detalles “menores”, pero igual de importantes:

  • Al ejecutarse Firefox con varias pestañas, éstas no se cargan automáticamente, ahora sólo cuando el usuario las selecciona, aumentando de esta manera la velocidad de ejecución del navegador y reduciendo su consumo de memoria.

  • Ahora se usa el buscador de Google con SSL (vía HTTPS) de manera predeterminada.

  • Se añadió soporte para uso a pantalla completa (full screen) en Mac OS X Lion.

  • Cuando se muestre una imagen directamente, se verá un fondo texturizado.

  • La burbuja desplegable (popup bubble) que contiene el enlace URL que aparece en la esquina inferior izquierda cuando colocamos el puntero del mouse sobre algún hipervínculo, ahora es más largo cuando dicho vínculo no cabe en él.

Novedades para desarrolladores en Firefox 14 Aurora

La principal novedad para desarrolladores web, especialmente los que se dedican a la creación de juegos, es la implementación del llamado Pointer Lock API, también llamado Mouse Lock API, que permite más control sobre el mouse en los juegos; un ejemplo: evitar que el puntero salga del área de la ventana (o sea, del juego).

Otro API implementado, es la prevención de la activación del protector de pantalla (screen saver) y la hibernación/suspensión del equipo. Será muy útil en aplicaciones multimedia y juegos.

Por su parte, las herramientas integradas para desarrolladores han recibido bastantes mejoras, principalmente al inspeccionar estados de las pseudo clases :hover, :active y :focus.

Asimismo, las propiedades CSS text-transform y font-variant han sido actualizadas para ajustarlas al estándar.

Por último, el desempeño para SVG ha sido mejorado significativamente.

Descargas Directas de Firefox 14 Aurora en Español

Elige tu plataforma y localización:

Firefox 14 Aurora en Español para Windows:

Firefox 14 Aurora en Español para MacOS X:

Firefox 14 Aurora en Español para Linux (32 bits):

Firefox 14 Aurora en Español para Linux (64 bits):

También pueden visitar la página oficial de descargas.

Instalación de Firefox 14 Aurora en Ubuntu via Repositorios

Si usas Ubuntu, puedes instalar Firefox Aurora desde su repositorio PPA:

sudo add-apt-repository ppa:ubuntu-mozilla-daily/firefox-aurora
sudo apt-get update
sudo apt-get install firefox

Instalación de Firefox 14 Aurora en ArchLinux via Repositorios

Si usas ArchLinux, puedes instalar Firefox Aurora desde el repositorio AUR, con el comando:

yaourt -S firefox-aurora

¡Anímense a probar Firefox 14 Aurora!

Share

Firefox 13 Beta con renovadas Página de Inicio y Nueva Pestaña

¿Ya están disfrutando de Firefox 12? ¡Es hora de probar el nuevo Firefox 13 Beta!, acaba de ser liberado.

[Firefox 13 Beta: Acerca de]

La principal novedad es la renovación de la Página de Inicio o Homepage, originalmente introducida en Firefox 4. Ahora cuenta con enlaces (con iconos) para algunas de las características principales de Firefox. Además, el botón de “restaurar sesión” ahora es más notorio.

[Firefox 13 Beta: Nueva Página de Inicio]

Para acceder a la nueva página de inicio pueden usar about:home.

Otra de las novedades, la cual ya les había mencionado, es la nueva página Nueva Pestaña o New Tab, similar a las que utilizan desde hace tiempo Opera y Chrome.

[Firefox 13 Beta: Nueva Página Nueva Pestaña]

Para mi gusto, su funcionalidad es muy limitada, ya que sólo podemos eliminar, fijar y mover las miniaturas; no podemos editarlas o agregar alguna de manera personalizada.

Y por cierto , para acceder a ella, pueden usar about:newtab.

¿Hay más novedades? ¡Por supuesto!

Y para mis colegas desarrolladores, aquí las novedades que nos competen:

Descargas Directas de Firefox 13 Beta en Español

Firefox 13 Beta en Español para Windows:

Firefox 13 Beta en Español para MacOS X:

Firefox 13 Beta en Español para Linux (32 bits):

Firefox 13 Beta en Español para Linux (64 bits):

También pueden visitar la página oficial de descargas.

Instalar Firefox 13 Beta en Ubuntu

Si usas Ubuntu, puedes instalar Firefox Beta desde su repositorio PPA:

sudo add-apt-repository ppa:mozillateam/firefox-next
sudo apt-get update
sudo apt-get install firefox

Instalar Firefox 13 Beta en ArchLinux

Si usas ArchLinux, puedes instalar Firefox 13 Beta desde el repositorio AUR, con el comando:

yaourt -S firefox-beta-bin

Y para la edición en español:

yaourt -S firefox-beta-bin-es-es

¡Anímense a probar Firefox 13 Beta!

Share

Opera 12 Beta, con nuevos temas y extensiones mejoradas

Acaba de ser liberado Opera 12 Beta, luego de varios meses de actualizaciones del canal alpha, por lo que la versión final estable debe estar a la vuelta de la esquina.

Opera 12 Beta Temas

Principales novedades:

  • ¡Nuevos temas! Aún hay pocos para elegir, pero seguro la galería irá creciendo (puedes crear fácilmente el tuyo).

  • Sistema de extensiones mejorado. Ahora el API permite manipular las ventanas y las pestañas del navegador, permitiendo a las extensiones aún más control.

  • Soporte para sistemas de 64 bits.

  • Arranque del navegador y carga de páginas más veloz que nunca.

  • Los plugins, como Flash, ahora se ejecutan en procesos separados, haciendo al navegador mucho más estable.

  • Nuevo API para acceder a la Webcam y otros dispositivos (algunos demos).

  • Soporte para el header Do Not Track.

  • Soporte para animaciones y transiciones CSS3.

  • Soporte para Drag and Drop de HTML5.

  • Soporte para CORS (Cross-Origin Resource Sharing).

  • Soporte para aceleración de hardware y WebGL.

¡Descarga Opera 12 Beta ahora! No interfiere en tu instalación actual estable de Opera :-)

Fuente: Opera News y Opera Press.

Share

Ubuntu 12.04 LTS Precise Pangolin

Ubuntu LogoUbuntu 12.04 LTS Precise Pangolin ha sido liberado, para beneplácito de miles de usuarios alrededor del mundo. ¿Abrumado por tanta información al respecto? Aquí tienes los enlaces básicos que debes consultar:

Adicionalmente, los invito a leer el estupendo análisis de Webupd8 (en inglés), que incluye capturas de pantalla y videos demostrativos.

Share