Archivo de la etiqueta: XHTML

Postable – Pegar caracteres especiales

Cuando hacemos alguna web corporativa para un cliente, éste suele enviarnos los textos corporativos en algún archivo de texto. Copiarlos en nuestro editor puede ser una tortura, me explico. Si tenemos alguna ‘ñ’ habrá que sustituirla pos &ntilde; si tenemos acentos, símbolos ‘<‘ o ‘>’, etc. idem de idem.

Postable es una sencilla aplicación web que nos ahorra todo este trabajo, simplemente pegamos nuestro texto, hacemos click en “make it friendly” y ya tenemos todo nuestro texto con los caracteres especiales preparados para pegar en nuestro editor HTML.

Postable

Postable

Postable

Anuncios

Em Calculator – De unidades absolutas a relativas

Em Calculator es una aplicación web que nos presenta una calculadora para pasar de píxeles a la unidad relativa em. Además permite añadir hijos al contenedor calculado y volver a calcular la unidad relativa del hijo.

Lo mejor es que lo probéis para entenderlo :).

Em Calculator

Em Calculator

Em Calculator

Referencia XHTML Strict y CSS 2.1

En los dos siguientes enlaces puedes otener una lista detallada de los elementos permitidos en XHTML Strict (así como los atributos de cada uno), y las propiedades de CSS 2.1.

La lista de XHTML está categorizada por semántica de los tags, y la del CSS por funcionalidad.

Cada tag y propiedad es ampliada con diversa información y ejemplos. No obstante, si estás dando tus primero pasos en la validación de código XHTML según los estandars marcados por la W3C, te recomiendo encarecidamente que empieces validando XHTML Transitional.

Referencia XHTML estricto.

Referencia CSS 2.1.

Mostrar código fuente en HTML / XHTML

Habremos visto en muchas webs y blogs de wordpress (en este mismo también) que algunas veces se muestran en webs código fuente con un estilo elegante y práctico, puesto que muestra barras de scroll y funcionalidades como copiar al portapapeles, abrir en otra ventana, numeración de líneas, y visualizar mejor o imprimir.

Syntaxhighlighter

Syntaxhighlighter

Hay un código que podremos incluir en nuestros proyectos. Este código se llama Syntaxhighlighter, ha sido creado por Alex Gorbatchev, y es 100% JavaScript.

Desde el siguiente enlace podremos descargarlo y obtener más información:

Syntaxhighlighter.

Abrir enlaces en ventanas nuevas (target=”_blank”) en XHTML

Más de uno se habrá llevado una sorpresa, una amarga sorpresa, al hacer su primer proyecto en XHTML Strict e intentar usar el atributo target en la etiqueta de enlace (target=”_blank”)

<a href="http://www.websenior.es" target="_blank">WebSenior</a>

habrá podido observar como dicho código hace lo que tiene que hacer, abrir el enlace en una nueva ventana, pero si ha intentado validar su web como XHTML Strict el validador le habrá dicho que el atributo target no es válido.

Que no cunda el pánico, usando un poco de Javascript (o muy poco Javascript si usamos un Framework) tendremos solucionado nuestro problema.

Lo primero, evidentemente, es eliminar el target=”_blank” de todo nuestro proyecto, y sustituirlo por rel=”external”.

Lo siguiente es programar en Javascript que queremos el comportamiento de target=”_blank” en las etiquetas a que sean rel=”external”, esto se consigue con el siguiente código, que luego comento.

function linkExternos() {
	if (!document.getElementsByTagName) return;
	var elemsA = document.getElementsByTagName("a");
	for (var i=0; i < elemsA.length; i++) {
		var elemA = elemsA&#91;i&#93;;
		if (elemA.getAttribute("href") && elemA.getAttribute("rel") == "external")
			elemA.target = "_blank";
	}
}
window.onload = linkExternos;
&#91;/sourcecode&#93;

La función <strong>linkExternos </strong>recoge todos los elementos a de nuestro documento XHTML, para cada uno de ellos, se recorre todos sus atributos, en caso de que ese elemento <strong>a</strong> tenga un atributo <strong>href</strong> y otro <strong>rel </strong>con valor <strong>external</strong>, se especifica que su <strong>target</strong> (destino) sea <strong>_blank</strong>. Por último se asigna la función al evento <strong>onload</strong> para que se ejecute cuando el documento sea cargado por el navegador.

Si usamos un framework de Javascript podremos ahorrarnos bastante código. En caso de <strong>jQuery </strong>quedaría así:


$(document).ready(function(){
	$("a[@rel='external']").attr("target", "_blank");
});