Contenido

Firefox 3.5 y las transformaciones 3D

16 jun

+ 6

Firefox 3.5 nos delitará con la posibilidad de realizar tranformaciones 3D nativamente. Esta propiedad del CSS nos permitirá, entre otras cosas, dar efecto de profundidad a los elementos de nuestra web mediante transformaciones de inclinación y tamaño realizado con unas pocas líneas de código.

isocube
(Ver Imagen)

Código

// HTML
<div class="cube">
    <div class="face top">
    </div>
    <div class="face left">
    </div>
    <div class="face right">
    </div>
</div>

// CSS
.cube {
 position: absolute;
}

.face {
 position: absolute;
 width: 200px;
 height: 200px;
}

// Tranformaciones 3D
.top {
 -moz-transform: rotate(-45deg) skew(15deg, 15deg);
}

.left {
 -moz-transform: rotate(15deg) skew(15deg, 15deg);
}

.right {
 -moz-transform: rotate(-15deg) skew(-15deg, -15deg);
}

Por el momento, deberemos usarla con prefijo (-moz), ya que aún no está estandarizado por la W3C. Por el momento tenemos que conformarnos con la beta 4, pero en poco más de un mes tendremos versión definitiva.

El futuro de Firefox será multiproceso

11 may

+ 5

El título no tiene nada de especial ya que se trata de una funcionalidad que lógicamente debería incorporarse en una nueva versión de Firefox. La noticia está en que ya ha empezado este desarrollo y mediante un nuevo proyecto abierto por la gente de Mozilla (Content Processes) esto podría ser una realidad en breve.

La idea, similar a la usada por Google Chrome e Internet Explorer 8, es la de usar un proceso para cargar el interface gráfico y despues separar por pestañas los procesos individualmente, haciendo posible cerrar un proceso que se haya quedado colgado sin afectar a los demás (siempre que no sea el proceso gráfico el que se cuelgue).

Aún queda bastante para verlo en nuestro escritorio, ya que estiman una primera beta sin conexiones seguras, ni soporte para sesiones para mediados de Julio y una versión capaz de interactuar entre 2 o más procesos para Noviembre de este mismo año.

La seguridad y el API para plugins que permitan manipular esta capacidad del navegador están previstos para realizarse despues. Así que puede que tengamos que esperar 1 año o más en poder verlo funcionar en nuestras manos.

7 diferencias Javascript entre Firefox e Internet Explorer

29 abr

+ 9

Leyendo el título del artículo debes pensar “¿Solo 7?”. Y es que Internet Explorer y Firefox se parecen en que los dos son navegadores y … poco más :D

En ImpressiveWeb hacen esta corta recopilación de 7 diferencias Javascript que debemos tener presentes para nuestros scripts.

1) La propiedad “float” de CSS

Generalmente cuando accedemos a una propiedad relacionada al estilo de un elemento solemos usar element.style.propiedad, pero para la propiedad float usar el sistema element.style.float no nos va a ser posible.

// IE
document.getElementById("elem").style.styleFloat = "left"; // right

// FF
document.getElementById("elem").style.cssFloat = "left"; // right

2) Estilos computados de un elemento

Si queremos acceder a los estilos procesados ya por el navegador nos encontramos con una diferencia significante en el sintaxis para ambos navegadores.

// IE
var myObject = document.getElementById("header");
var myStyle = myObject.currentStyle.backgroundColor;

// FF
var myObject = document.getElementById("header");
var myComputedStyle = document.defaultView.getComputedStyle(myObject, null);
var myStyle = myComputedStyle.backgroundColor;  

// MIX
var myObject = document.getElementById("header");
var myStyle = myObject.currentStyle ?
		myObject.currentStyle.backgroundColor :
   	        document.defaultView.getComputedStyle(myObject, null).backgroundColor;

3) Accediendo al “class” de un elemento

Debido a la especificación de Internet Explorer, cuando queremos acceder al class de un elemento usando getAttribute() debemos modificar el nombre que solicitamos.

// IE
var myObject = document.getElementById("header");
var myAttribute = myObject.getAttribute("className");  

// FF
var myObject = document.getElementById("header");
var myAttribute = myObject.getAttribute("class");

4) Accediendo al atributo “for” de las etiquetas <label />

Exactamente lo mismo ocurre con el atributo for de las etiquetas <label /> que en Internet Explorer para solicitar esta información, debemos reemplazar el nombre que pedimos.

// IE
var myObject = document.getElementById("myLabel");
var myAttribute = myObject.getAttribute("htmlFor");  

// FF
var myObject = document.getElementById("myLabel");
var myAttribute = myObject.getAttribute("for");

5) Obtener la posición del puntero del ratón

Otra diferencia y que mucho nos hace agrandar nuestro código es la localización del puntero.

// IE
var myCursorPosition = [0, 0];
myCursorPosition[0] = event.clientX;
myCursorPosition[1] = event.clientY;  

// FF
var myCursorPosition = [0, 0];
myCursorPosition[0] = event.page;
myCursorPosition[1] = event.pageY;   

// MIX
var myCursorPosition = [0, 0];
myCursorPosition[0] = event.clientX || event.page;
myCursorPosition[1] = event.clientY ||event.pageY;

6) Obtener el tamaño del navegador o del área visible

Al obtener el tamaño de la pantalla y del area visible nos encontramos con el mismo problema. Parece que no se ponen de acuerdo en que nombre ponerle a las propiedades comunes.

// IE
var myBrowserSize = [0, 0];
myBrowserSize[0] = document.documentElement.clientWidth;
myBrowserSize[1] = document.documentElement.clientHeight;  

// FF
var myBrowserSize = [0, 0];
myBrowserSize[0] = window.innerWidth;
myBrowserSize[1] = window.innerHeight;

Joseanpg nos amplia el motivo de dicha diferencia en el comentario #1 y en este enlace

7) Transparencias

Si las transparencias en CSS ya eran un desastre donde nos veíamos obligados a usar hacks dependiendo del navegador en javascript, nos encontramos el mismo problema.

// CSS
#myElement {
   filter: alpha(opacity=50);  // IE
   opacity: 0.5;  // FF
}  

// IE
var myObject = document.getElementById("myElement");
myObject.style.filter = "alpha(opacity=80)";  

// FF
var myObject = document.getElementById("myElement");
myObject.style.opacity = "0.5";

El futuro Firefox podría no tener pestañas

15 abr

+ 15

Oliver Reichenstein, jefe de experiencia de usuario de Mozilla nos asombra con unas declaraciones acerca del nuevo interface de usuario de Firefox.

firefox-2-big
(Ver Imagen)

Oliver nos cuenta que desde el 2000 cuando decidieron poner pestañas a su navegador, ha llovido mucho y que los tiempos han cambiado y la concepción de un navegador web tambien. Lo que le ha llevado a pensar en eliminar las pestañas para una futura versión de Firefox.

La idea es que un navegador web actual, debería estar más enfocado a ofrecer al usuario un nuevo sistema operativo embebido dentro de una ventana de navegador. Logrando una mejor gestión de sesiones, organizando el navegador como un sistema de ficheros multimedia, tipo iTunes. Un concepto revolucionario e innovador que seguro que dará mucho de que hablar.

Ubiquity

Otra mejora que seguramente podramos ver en Firefox es la integración nativa de Ubiquity, que pasaría a llamar TaskFox. Una mejora importante al inteface, aportando la capacidad de navegación por teclado.

Multiples Background en Firefox 3.5

24 mar

+ 8

Ya van quedado menos técnicas CSS por poder disfrutar en nuestras páginas. La última viene de mano de Firefox y su próxima y esperada versión, la 3.5.  Que nos ofrece la posibilidad de usar múltiples backgrounds con las posibilidades que esto ofrece.

background: url('.../body-top.gif') top left no-repeat,
	    url('.../banner_fresco.jpg') top 11px no-repeat,
	    url('.../body-bottom.gif') bottom left no-repeat,
	    url('.../body-middle.gif')left repeat-y;

Podemos probarlo usando la última versión disponible y esta página que QuirksMode nos pone a nuestra disposición.

Via

La página más visitada de aNieto2k (opensearch.php)

11 ene

+ 10

OpenSearch es un estandard que nos permite añadir motores de busqueda a aplicaciones como por ejemplo Firefox, IE7,… Gracias a este estandard es posible hacer que nuestras aplicaciones estén interconectadas con estas aplicaciones de forma fácil y rápida.

wp-opensearch.jpg

En aNieto2k esta opción da lugar a la página más visitada del blog. Siendo el mes pasado (Diciembre de 2008) un 15% más visitada que el index.php (el fichero encargado de mostrar el contenido de blog en formato HTML). Pero ¿como lo integré en WordPress?

WP-OpenSearch

Para WordPress podemos usar este plugin que hice y que nos permitirá disponer de OpenSearch en nuestro WordPress muy fácilmente. Como con todos los plugins de WordPress. [Descargar]

Manualmente

Para las aplicaciones web que no estén basadas en WordPress podemos implementar un sistema muy sencillo basado en 1 fichero .php y la insercción de una línea en el <head /> de nuestro HMTL.

1) Modificamos el header de nuestro HTML

<head>
...
<link rel="search" type="application/opensearchdescription+xml" title="Buscador de SITIO_WEB" href="RUTA_DEL_FICHERO/opensearch.php" />
...
</head>

Añadimos en nuestro <head /> la línea que dirigirá al fichero opensearch.php encargado de gestionar OpenSearch. En el tag <link /> debemos modificar SITIO_WEB la ruta del sitio web y RUTA_DEL_FICHERO por la ruta que nos llevará hasta opensearch.php

2) Creamos el fichero opensearch.php

<?xml version="1.0" encoding="UTF-8"?>
<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/">
  <ShortName>NOMBRE_DEL_SITIO</ShortName>
  <Description>DESCRIPCION_DEL_SITIO</Description>
  <Tags>TAG TAG2 TAG3</Tags>
  <Contact>EMAIL_ADMIN</Contact>
  <Url type="TYPE_RESPUESTA"
       template="PATRON_DEL_BUSCADOR"/>
<!-- http://example.com/?q={searchTerms}&amp;pw={startPage?}-->
</OpenSearchDescription>

El fichero opensearch.php basta que tango estas líneas para funcionar, aunque el estandar ofrece una gran cantidad de tags que permiten personalizar más la búsqueda. Para adaptarlo a nuestra aplicaciones deberemos reemplazar lo que nos encontramos en negrita.

  • NOMBRE_DEL_SITION: Nombre del sitio que aparecerá en agregador de buscadores.
  • DESCRIPCION_DEL_SITIO: Descripción de la aplicación web
  • TAG…: Tags que ayudarán a catalogar el sitio web.
  • EMAIL_ADMIN: Email del administrador del sitio.
  • TYPE_RESPUESTA: Tipo de respuesta que vamos a devolver la busqueda. (application/rss+xml, text/html,…)
  • PATRON_DEL_BUSCADOR: Url que nos vincula el OpenSearch con el buscador interno de nuestra aplicación.

La Url que introducimos posee unas variables que pueden ser usadas y se reemplazarán por el valor que se envie en la consulta.

  • searchTerms: Hace referencia a los términos de busqueda.
  • count: Número de resultados deseados por el usuario
  • startIndex: Posición inicial desde la que mostrar los resultados.
  • startPage: Página inicial desde la que mostrar los resultados.
  • language: Lenguaje de solicitud de la busqueda.
  • inputEncoding: Codificación de entrada.
  • outputEncoding: Codificación de salida.

Evidentemente estos parámetros no tienen por que ser tenidos en cuenta en nuestras aplicaciones, pero montando url’s como estas obtenemos más datos de la consulta.

http://example.com/?q={searchTerms}&amp;count={count}&amp;output={outputEncoding}

En Javascript

window.external.AddSearchProvider(engineURL);

En Javascript, tambien podemos añadir el motor de busqueda al navegador del usuario (FF2+, IE7, …) mediante esta pequeña línea, a la que reemplazando engineURL por la ruta donde encontrar el fichero opensearch.php nos vinculará nuestra aplicación con el motor de busquedas del usuario.

Más Información

Si quieres ampliar esta información dispones de mucho en OpenSearch.org

  1. Página del proyecto
  2. Mozilla Developer Center

FireUnit: haz tests a tus aplicaciones desde Firebug

18 dic

+ 0

Via Sentido Web descubro FireUnit, una aplicación que nos permite extender Firebug para permitirnos hacer pruebas unitarias del javascript de nuestras aplicaciones web. John Resig y Jan Odvarko la han desarrollado ambos nos muestran una serie de opciones disponibles:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script>
fireunit.ok(true, "Passing test result");
fireunit.ok(false, "Failing test result.");
fireunit.compare("expected data", "expected data",
    "Passing verification of expected and actual input.");
fireunit.compare("<div><a>expected</a></div>", "<div><a>actual</a></div>",
    "Failing verification of expected and actual input.");

// Wait for asynchronous operation.
setTimeout(function(){
    // Finish test
    fireunit.testDone();
}, 1000);
</script>
</head>
<body/>
</html>

fireunit-scr-example1

Instalación

Como todas las extensiones de Firefox, se basa en un .xpi que podrás encontrar en la página oficial.

Modo de empleo

Una vez instalado y reiniciado el navegador, nos encontramos con una nueva pestaña en Firebug (Test), como podemos ver en la siguiente imagen.

fireunit-scr-bar

En ella veremos los resultados de los tests que lanzemos desde la consola de Firebug. Gracias a la API que nos ofrecen, podemos hacer un serie de tests

Censura China convertida en plugin para Firefox

28 oct

+ 3

China Channel es un plugin para Firefox que simula la censura china. Para el que no lo sepa, este pais está censurando las conexiones a internet y no permiten mostrar ciertas páginas web con temas que no sean del agrado de los gobernantes actuales. Sinó podeis imaginar una internet sin libertad con China Channel podreis haceros una idea de lo que sería. El video para los más perezosos no tiene desperdicio.

Inquisitor para Firefox

23 oct

+ 8

Los usuarios de Safari ya conocen Inquisitor y seguro que muchos de ellos lo usan a diario para buscar por la red de una forma fácil y rápida. Ayer, los chicos de Genbeta publicaban una gran noticia para los usuarios de Firefox y es que ya disponemos de Inquisitor para Firefox en forma de extensión.

inquisitor_firefox3

[Descargar]

Prueba Fennec, el Firefox para móviles

20 oct

+ 4

La gente de Mozilla nos pone a nuestra disposición un emulador de Fennec, el navegador para móviles basado en Firefox. Si tienes un Nokia N810 puedes instalaresta versión Beta en tu dispositivo y si no lo tienes, puedes descargarte el emulador para tu sistema operativo.

fennec

Descargar

Yo ya lo he estado probando :D

fennec_anieto2k

Acid3

fennec-acid3

CSS3

fennec-css3

MuyComputer ha hecho un review bastante interesante.