Archivo de la categoría: 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");
});

Generador Meta Tags

Si no queremos rompernos mucho la cabeza a la hora de generar los Meta Tags con vista a mejorar nuestra posición en los buscadores, podemos hacer uso de varios generadores creados para este menester.

Aquí os pongo uno fácil y efectivo de usar.

Generador de Meta Tags.

UTF-8 en ficheros HTML/XHTML de Apache usando .htaccess

Algunas veces puede interesarnos (y de hecho pudiera ser recomendable) que nuestros ficheros HTML/XHTML tengan codificación UTF-8, para permitir un gran abanico de caracteres de diversos idiomas no occidentales, por ejemplo.

Lo primero que deberíamos hacer es poner en nuestro fichero HTML/XHTML la siguiente etiqueta meta:

<meta http-equiv="content-type"
      content="text/html; charset=utf-8"/>

Pero es posible que al probar nuestra web, no esté mostrando los caracteres UTF-8 correctamente, o bien si validamos la web en W3C para comprobar que sea un HTML/XHTML válido nos encontremos con un fallo como este:

The character encoding specified in the HTTP header (iso-8859-1)
is different from the value in the <meta> element (utf-8).

Entonces debemos forzar al servidor Apache de nuestro servidor a que sirva las páginas .html en UTF-8 al navegador. Esto se consigue añadiendo al fichero .htaccess la linea:

AddCharset UTF-8 .html

Con esto conseguimos que todos los ficheros .html que cuelguen del directorio donde se encuentre el .htaccess (y subdirectorios), sean servidos al navegador con codificación UTF-8.

Esto se puede complicar más 🙂

<Files "example.html">
AddCharset UTF-8 .html
</Files>

Esto hace que solo el fichero example.html de ese directorio sea servido como UTF-8.

También podemos hacer algo así:

<Files "example.html">
ForceType 'text/html; charset=UTF-8'
</Files>

Esto fuerza a que el fichero example.html sea servido como UTF-8, y además de tipo texto plano con contenido HTML.

Por último, este ejemplo:

AddCharset UTF-8 .utf8
AddCharset windows-1252 .html

Aquí se dice al servidor Apache: Todos los ficheros con extensión .utf8 sírvelos al navegador con codificación UTF-8. Y todos los ficheros .html sean servidos con codificación windows-1252.

Os invito a dejar como comentarios más ejemplos de uso de las directivas AddCharset y ForceType, u otras relacionadas con el contenido y codificación de ficheros, para el fichero .htaccess de Apache.