Páginas: Anterior 1 2 Siguiente

Cumplir estandar W3C con target=”_blank” utilizando Mootools

30 07 2008
Este verano estoy programando varios scripts e intento que estos cumplan los estándares al máximo posible.

Al validar uno de mis scripts con el W3C Validator y siguiendo el estándar estricto (Strict) se me presento el problema de que en mis enlaces utilizaba la etiqueta target=”_blank” para que determinados enlaces se abrieran en otra página y no en la misma. Como por ejemplo:

1
<a href="http://undominio.com" target="_blank">enlace</a>

Pero este atributo no era válido para el estándar estricto. Aunque una alternativa podría ser poner el estándar como transicional (Transitional) y conseguir que se validara, prefería cumplirlo a raja tabla con Strict y darle al coco.

Después de googlear un poco encontré un enlace interesante en EsLoMas.com donde se hablaba a lo largo y tendido de como solucionarlo a través de dos funciones de javascript (una más eficiente que la otra) y que simplemente se aplicarían poniendo a un enlace class=”external” (o otro nombre de clase que predefiniéramos).

Por ejemplo así:

1
<a href="http://undominio.com" class="external">enlace</a>

Me gusto la manera de solucionarlo, aunque al utilizar Mootools creía que podría integrarlo en la página y a la vez acortar un poco más el script y con suerte ganar algo de eficiencia gracias a la librería.

Pues bien, el script original ofrecido por la página de EsLoMas.com (la versión más eficiente era la siguiente:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
   function prepareTargetBlank(){
   var className = 'external';
   var as = document.getElementsByTagName('a');
   for(i=0;i<as .length;i++){
      var a = as[i];
      r=new RegExp("(^| )"+className+"($| )");
      if(r.test(a.className)){
         a.onclick = function(){
            window.open(this.href);
            return false;
         }
      }
    }
}
 
window.onload = prepareTargetBlank;

Yo propongo la siguiente solución con Mootools 1.2.1 (seguramente es mejorable, comentarios son bienvenidos):

1
2
3
4
5
6
7
8
9
10
11
    window.addEvent('domready',function()
    {
        $$('a.external').each(function(el)
        {
            el.addEvent('click',function(ev)
            {
                new Event(ev).stop();
                window.open(el.href)
            })
        })
    })

Mi solución esta basada en los selectores de Mootools $$ que recogen la etiqueta a (anchor) y para cada una (each) asocio un evento click (onClick) y paro dicho evento para asociar una nueva ventana al la locación donde apunte el enlace (href).

Para los talibanes del código que quieren que el script pese menos ahorrando líneas de código pueden dejarla en una sola línea de código (aunque se ofusca bastante para luego releer el código en un futuro):

1
    window.addEvent('domready',function(){$$('a.external').each(function(el){el.addEvent('click',function(ev){new Event(ev).stop();window.open(el.href)})})})

Si optáis por esta última versión, os recomiendo guardar un archivo nombre.js y otro nombre_edit.js con la anterior, con el fin, de que podáis tener la versión menos compacta más a mano por si queréis retocarla y para cuando la pongáis en vuestros sitios poner la versión de una línea.

VN:R_U [1.8.3_1051]
Rating: 9.0/10 (1 vote cast)
VN:R_U [1.8.3_1051]
Rating: 0 (from 0 votes)
Comparte, descargalo en pdf, imprimelo o enviaselo a un amigo!
  • Print
  • Digg
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • BarraPunto
  • Bitacoras.com
  • Meneame
  • PDF
  • RSS
  • StumbleUpon
  • Technorati


Firefox 3.1 Alpha 1 pasa el Acid 3 al 84%

29 07 2008

Logo firefox 3.1Firefox 3.1, cuyo nombre de codígo es Shiretoko, ha alcanzado su primera milestone, Alpha 1 en buen camino para una versión final dirigida a fines de este año, a pesar de un breve retraso debido a un error desagradable con Java en Mac OS X.

Quizás la mejora más notable de esta versión es una opción para restringir en la barra de localización con autocompletado de sugerencias a cualquier entrada del historial, las etiquetas o sólo marcadores, así como una opción para decirle a Firefox que busque sólo títulos de páginas o direcciones buscadas.

Para restringir el historial, marcadores o etiquetas, introduce ^, * o + respectivamente en algún lugar entre tus términos. Par incluir titulos o direcciones solo, introduce # or @ y puedes combinarlos con los peradores previos para refinar tus sugerencias.

Una nueva configuración avanzada (accesible entrando en about:config en la barra de localización) te permiten personalizar todos los caracteres por defecto y establecer tu propio carácter o conjunto de caracteres para aplicar a las restricciones.

Además puedes establecer cualquier preferencia relacionada en (browser.urlbar.restrict.history, browser.urlbar.restrict.bookmark, browser.urlbar.restrict.tag, browser.urlbar.match.title, browser.urlbar.match.url) a valores en blanco para aplicar restriciones por defecto (sin introducir ningún caracter especial)

Opciones de restricción

Esta barra de localizaciones con restricciones fue considerada para Firefox 3, pero el rendimiento a lo largo del tiempo y el problema con algunas restricciones hicieron posponer estas mejoras a otra versión. Todavía no se ha decidido si existirá alguna interfaz de usuario (posiblemente en Opciones(Preferencias)/Privacidad) para hacer estas opciones accesibles de una manera más facil.

Para más detalles puede comprobar el post de Edward Lees post (en inglés) sobre el tema. í‰l es en gran medida el desarrollador responsable de esta mejora.

Otra mejora visible es el nuevo comportamiento para el Ctrl + Tab de teclas rápidas: en lugar de pasar a la siguiente pestaña a la derecha como antes, plantea una pequeña superposición con miniaturas. Son ordenadas desde la más recientemente vista en primer lugar, puedes pulsar Ctrl + Tab para pasar sucesivamente entre las actuales y anteriores pestañas, un práctico atajo para acceder a una página de referencia.

Control + Tab en Firefox 3.1

Por defecto, solo se muestran tres miniaturas pero puedes personalizar estableciendo browser.ctrlTab.previewsCount (via about:config) al valor deseado y reiniciar Firefox. Yo encontré bastante más útil el valor de 5.

Puedes deshabilitar esta característica estableciendo browser.ctrlTab.mostRecentlyUsed a false y obtener el viejo comportamiento de Ctrl+Tab. Ctrl + PgUp y Ctrl + PgDown  todavía tiene la navegación clásica.

Alpha 1 consigue resultados mucho mejores en la prueba Acid 3, una prueba comparativa del soporte de estándares web que, a diferencia de anteriores versiones de Acid, no sólo evalúa el cumplimiento de CSS, sino también capacidades DOM y rendimiento. A partir de esta versión, las puntuaciones de Shiretoko son un 84, un 18% de ganancia en comparación con Firefox 3, pero todavía detrás de las WebKit nightlies que ya anotan un perfecto 100.

Prueba Acid 3 Firefox 3.1 al 84 por ciento

Aún falta por venir el soporte para inclusión de audio nativo y vídeo, posiblemente fuentes descargables, opción de autentificación automática para sitios donde un único conjunto de credenciales está disponible, la navegación privada, peticiones AJAX cruzadas en sitios (retirado de Firefox 3, y después de los cambios la especificación), etiquetamiento grueso, autocompletado de etiquetas, la posibilidad de permitir la habilitación a la gestión de color (introducido con Firefox 3) por defecto.

Vamos a esperar y ver lo que sucede en la próxima milestone, que según el calendario del proyecto, la primera beta debería ser en algún momento de Agosto.

Mas detalles y descarga en Mozilla Developer News.

VN:R_U [1.8.3_1051]
Rating: 8.0/10 (1 vote cast)
VN:R_U [1.8.3_1051]
Rating: 0 (from 0 votes)
Comparte, descargalo en pdf, imprimelo o enviaselo a un amigo!
  • Print
  • Digg
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • BarraPunto
  • Bitacoras.com
  • Meneame
  • PDF
  • RSS
  • StumbleUpon
  • Technorati


Anuncio Linux: el precio con y sin Linux

27 07 2008

Imagen de previsualización de YouTube

Anuncio Linux: el precio con y sin Linux [Youtube 0:17]

Vía: Gubuntu

VN:R_U [1.8.3_1051]
Rating: 5.0/10 (1 vote cast)
VN:R_U [1.8.3_1051]
Rating: 0 (from 0 votes)
Comparte, descargalo en pdf, imprimelo o enviaselo a un amigo!
  • Print
  • Digg
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • BarraPunto
  • Bitacoras.com
  • Meneame
  • PDF
  • RSS
  • StumbleUpon
  • Technorati


Filezilla en Español

18 07 2008

Gestor FTPFilezilla es un programa FTP muy usado y para mi gusto de los mejores programas de FTP, además de ser Open Source.

Si lo has instalado en ubuntu y viene por defecto en idioma anglosajón, para conseguir que esté en castellano simplemente abre un terminal y escribe:

sudo apt-get install filezilla-locales

O vía Synaptic busca el paquete filezilla-locales e instálalo. La próxima vez que inicies Filezilla, el programa se cargará en Español (o tu idioma predeterminado).

VN:R_U [1.8.3_1051]
Rating: 7.0/10 (1 vote cast)
VN:R_U [1.8.3_1051]
Rating: 0 (from 0 votes)
Comparte, descargalo en pdf, imprimelo o enviaselo a un amigo!
  • Print
  • Digg
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • BarraPunto
  • Bitacoras.com
  • Meneame
  • PDF
  • RSS
  • StumbleUpon
  • Technorati


Generar código HTML dinámicamente con PHP

15 07 2008

Cuando programamos en PHP en algunas ocasiones repetimos mucho código html para mostrar determinado contenido.

Por ejemplo, si tenemos varias imágenes (supongamos 10) y queremos que todas estén situadas a 10 pí­xeles de distancia cada una, podríamos tener un código CSS de la siguiente forma:

1
2
3
4
5
6
<style type="text/css">
m1{position:absolute;with:10px}
m2{position:absolute;with:20px}
...
m10{position:absolute;with:100px}
</style>

En el caso de 10 imágenes sería sencillo escribir todo el código, pero si aumentamos la cantidad por ejemplo a 100, pues resultaría bastante incordio tener que copiar y pegar y a la vez modificar tantas líneas.

Podemos agilizar nuestra manera de programar, cuando tenemos código repetitivo y que solo tiene pequeñas variaciones como en nuestro caso que solo varía el ancho 10 px en cada imagen. Por ejemplo podríamos crear un código php como el siguiente:

1
2
3
4
5
6
< ?
echo '<style type="text/css">';
for($i=1;$i< =10;$i++)
    echo '.m'.$i.'{position:absolute;with:'.(10*$i).'px}';
echo '</style>';
?>

El problema nos viene cuando visualizamos el código que se ha generado y sería algo como:

?Descargar citas.txt
1
2
3
<style type="text/css">
.m1{position:absolute;with:10px}.m2{position:absolute;with:20px} ... .m10{position:absolute;with:100px}
</style>

Aparentemente nuestro código se ha generado en una sola línea perdiendo toda la facilidad de lectura en el código fuente de la página html. Esto se debe a que las cadenas en php que estamos volcando como salida con echo están escritas con comillas simples (como se recomienda, para que php no tenga que evaluar si dentro hay más código php).

Para solucionarlo, simplemente debemos escribir el mismo código pero mostrando las cadenas con comillas dobles y escapar los carácteres como las comillas dobles con la \:

1
2
3
4
5
6
< ?
echo "<style type=\"text/css\">";
for($i=1;$i< =10;$i++)
    echo ".m".$i."{position:absolute;with:".(10*$i)."px}";
echo "</style>";
?>

Este pequeño cambio, puede ser una tontería pero si desconoces lo que estaba pasando, puedes estar muy frustado al ver que tu código no se genera correctamente y puesto que fue mi caso y desconocía este comportamiento he querido reflejarlo y que quede constancia en el blog.

Todo sea por llevar las buenas prácticas a la hora de mostrar cadenas, que como vuelvo a recordar, es preferible usar comillas simples para evitar que php tenga que revaluar el la cadena por si contiene código php, siendo más eficaces las comillas simples y variables concatenadas en el lugar de las variables php.

VN:R_U [1.8.3_1051]
Rating: 8.0/10 (1 vote cast)
VN:R_U [1.8.3_1051]
Rating: 0 (from 0 votes)
Comparte, descargalo en pdf, imprimelo o enviaselo a un amigo!
  • Print
  • Digg
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • BarraPunto
  • Bitacoras.com
  • Meneame
  • PDF
  • RSS
  • StumbleUpon
  • Technorati


Páginas: Anterior 1 2 Siguiente