| | | |

Nueva versión de FireBug

ByLuis

firebug2.pngYa hablamos en su día de FireBug, una extensión que nos permite depurar nuestras aplicaciones web. La nueva versión tiene una gran novedad, “debuguear” Javascript. Ahora es posible poner puntos de ruptura, ejecutar el código paso a paso, inspeccionar variables, comprobar código, … Si antes ya era indispensable, ahora es totalmente obligatorio para cualquier desarrollador (vale, quizás me he pasado). A parte de el debugger hay otra serie de cambios que no dejan de tener importancia.
FireBug
Vía / SitePoint

Similar Posts

| |

Enlaza tu email sin miedo al spam

ByLuis

El spam ha condicionado muchas prácticas que originariamente eran tan sencillas y poderosas como enlazar tu mail en la web.

Un truqui para evitarlo que en su día lo descubrimos en 604th.net:

function nospam(name,domain){

window.location = 'mailto:' + name + '@' + domain;

}

Cópialo tal cual sin cambiar nada y súbelo como emailnospam.js. Recomendamos subirlo a una carpeta en la que guardes los javascripts como por ejemplo la carpeta js. Si no te apetece crearla, súbelo a la raíz de tu ftp.

Luego añade lo siguiente entre la línea <head> y </head> de los documentos de tu web:

<script type="text/javascript"  src="/js/emailnospam.js"></script>

Si lo has subido a la raíz elimina la ruta a la carpeta “js”. Quedaría así:

<script type="text/javascript" src="/emailnospam.js"></script>

Ya solo queda que escribas tu mail enlazado en la parte de la web que quieras sustituyendo la palabra ejemplo y dominio.com por lo que corresponda a tu cuenta de email:

<a href="javascript:nospam('ejemplo','dominio.com');">Contáctame</a>

Cuidado con el XHTML

ByLuis

Ahora que está más extendido el uso de XHTML, siempre viene bien darse cuenta de cosas en las que no caemos. He encontrado un artículo que me parece bastante interesante que nos avisa sobre el uso del XHTML.
Antes de nada diferenciar entre HTML y XHTML para poder comprender mejor con qué nos vamos a encontrar. HTML está definido por SGML y no necesita ser validado y los navegadores al encontrar errores en el uso de las etiquetas las ignoran y siguen presentando el documento. XHTML está basado en XML y como tal tiene que ser validado.
Un error común es usar el mismo Content-Type para ambos documentos, mientras que para HTML es text/html, para XHTML es application/xhtml+xml, por lo que cuando mandamos un XHTML como HTML, realmente le estamos eliminando todo aquello que le hace diferente, el XML, si no es XML no valida. El navegador trataría el XHTML como un conjunto de etiquetas sin orden, y cuando encuentre errores, los obviará o solucionará.
Otro problema que nos podemos encontrar es que si en un documento XHTML encerramos los scripts y las hojas de estilo entre comentarios HTML (&lt!– … –&gt), tal y como se hace en HTML, el validador XML lo tomará como comentario y lo ignorará. Recordad que los estilos y los scripts se deben encerrar entre <![CDATA[ … ]]>.
Tambien hay que pensar que si no lo tratamos como XHTML tendremos problemas si incrustamos código SVG o MathML ya que el navegador lo ignorará.
Más problemas, en XHTML todas las elementos deben tener su etiqueta de cierre, lo cual puede ser un problema si se trata como un HTML, ya que una etiqueta del tipo <br/> entrará en conflicto con las null end tags de SGML, algo que casi nadie usa. En SGML podemos traducir <title>Mi página</title> por <title/My page/, por lo que si se encuentra con un <br/>, si sigue esta regla de SGML, nos dirá que sobra un >.
Para variar, IE no acepta XHTML, y cuando recibe un documento con este formato, nos mostrará la ventana para guardar o abrir el documento.
Como conclusión, casi mejor pasarlo como HTML, nos evitamos problemas con IE y a parte la validación de XML es costosa.
Beware of XHTML
Vía / dzone

Ajax Solutoire: recursos Ajax

ByLuis

solutoire.pngAjax Solutoire es un listado de recursos Ajax muy extenso el cual nos puede sacar de un buen apuro.
Entre los enlaces que nos ofrece encontramos tutoriales de Javascript, de los cuales me ha gustado A (Re)-Introduction to JavaScript. También nos ofrece un listado de enlaces sobre depuración de Javascript, yo la verdad me quedo con Firebug y me olvido del resto, pero bueno, no todo el mundo tiene que tener mis preferencias. Sobre el listado de editores de Javascript debo decir que es muy pobre, si mal no creo todos están basados en Eclipse (jDeveloper también lo está si mal no creo) y todos basados en el mundo Java.
La serie de enlaces sobre tutoriales de Ajax es extensa, y a mí me gusta recomendar todo lo que sea sobre Ajax y accesibilidad, algo bastante importante y que a veces olvidamos un poco.
También aporta enlaces para las librerías más conocidas que tratan Ajax, como pueden ser Scriptaculous, Prototype y Mootols.
Un lugar que tener en nuestros favoritos.
Ajax.solutoire.com
Vía / Proletarium

Hapi.js+Vue.js Crear servidor backend

Hapi.js+Vue.js Crear servidor backend

ByLuis

El primer paso va a ser crear el entorno del servidor, para ello creamos un directorio e inicializamos el proyecto ejecutando:

npm init

Rellenamos todos los datos que nos van pidiendo para configurar el proyecto.

Ya tenemos el proyecto creado, ahora iremos instalando las librerías que necesitamos, en este caso hapi y glue.

npm i @hapi/hapi
npm i @hapi/glue

¿Qué es glue? Glue es un plugin que permite configurar el servidor de forma fácil.

Ahora creamos el fichero index.js e insertamos el siguiente código:

const Glue = require( '@hapi/glue' );

const manifest = {
	server: {
		port: 3001,
	},
};

const options = {
	relativeTo: __dirname,
};

const startServer = async function() {
	try {
		const server = await Glue.compose( manifest, options );
		await server.start();
		console.log( 'hapi days!' ); // eslint-disable-line
	} catch ( err ) {
		console.error( err ); // eslint-disable-line
		process.exit( 1 );
	}
};

startServer();

Fácil de entender, ¿no? Creamos el servidor usando Glue con el manifest y las opciones, y arrancamos el servidor.

Listo, accedemos a http://localhost:3001 para comprobar que funciona. Nos devolverá error 404 porque por ahora no hay definidas routes.

¿Cómo se arranca el servidor? podríamos usar directamente node, pero mejor usaremos nodemon. Primero lo instalamos:

npm i --save-dev nodemon

Y ejecutaremos lo siguiente para arrancar el servidor:

npm run start

Puedes obtener el código en GitHub hapi-vue-demo 0.1.0

Xaja: framework Reverse Ajax

ByLuis

Xaja es un framework PHP que permite Reverse Ajax, también conocido como Comet. Debido a esta característica, el servidor puede enviar datos directamente al cliente, y no solo el cliente al servidor, como es el modelo normal.

Las características que nos ofrece son las siguientes:

  • Ajax: facilita la inclusión de Ajax en nuestra aplicación.
  • Pencil: para poder actualizar el HTML de forma sencilla, ofrece una herramienta llamada Pencil, se trata de decir a Xaja donde es que se quiere escribir en el HTML.
  • DOM Mapping: para manipular desde PHP el DOM del HTML.
  • Libería de etiquetas: para hacer más sencillo el desarrollo de los programadores.
  • Reverse Ajax: lo explicado anteriormente, que nos permite enviar datos al servidor.
  • Base de datos: una herramienta para acceder de forma sencilla a los datos.

Xaja

Vía / International PHP Magazine

Carga asíncrona de scripts en Webkit

ByLuis

Webkit está implementando en la última versión la carga de scripts de forma asíncrona, para ello hace uso de los atributos async y defer. Esta carga de scripts se realiza sin detener el renderizado del HTML y añade el evento onLoad para ejecutar un método cuando acabe de cargarse:

La diferencia entre async y defer es que async se ejecuta a la primera oportunidad después de que finalice la carga y antes de que se ejecute el evento load del objeto window, por lo que con bastante posibilidad el script se ejecute asíncronamente y no en el orden en el que se muestra en al página. Los scripts defer se ejecutarán en el orden en el que se indica en la página, pero empezará despues del parseo completo pero antes de que ocurra el evento DOMContentLoaded del objeto document.

Running scripts in WebKit

Vía / CSS-Tricks