Apuntes de Diseño y Desarrollo Web: 2007

29/11/07

15/10/07

La web semántica busca organizar la información de una forma precisa y eficaz para conseguir que sus contenidos sean más fáciles de clasificar y encontrar. Un ejemplo de aplicación web semántica son los RSS que utilizan XML permitiendo la catalogación de información (noticias, eventos, etc.) de tal forma que es posible encontrar información relevante.

<header> El encabezado; no confundir con <head>
<nav> Navegación
<section> Como un capítulo en un libro, puede albergar varios <article>
<article> Un artículo
<footer> El pie de pagina, la firma, la dirección, ...

HTML 4: basado en elementos DIV no semánticos

HTML 5: basado en elementos semánticos

Más información en:

Vía CSSLab

Resetear los estilos CSS predeterminados

Por defecto los navegadores representan los distintos elementos HTML de una determinada manera no coincidiendo siempre entre ellos. Para evitarlo tratamos de empezar un diseño (layout) con una hoja de estilos "nuestra" por defecto que sea previsible con lo que queremos ver en todos los navegadores (cross-browsing).

Una forma rápida de hacer todo esto es utilizando el selector universal (*) pero parece que no es del todo correcto pues sobrecarga el navegador.

Más propuestas sobre este tema:

12/10/07

Cómo ordenar las propiedades CSS al escribirlas

Se trata de una propuesta para escribir las propiedades CSS que consiste en ir de fuera hacia dentro

Comportamiento: display, overflow, clear
Posición: position, float, top, left, ...
Tamaño: width, height
Márgenes y bordes: margin, border, padding
Texto: font, text, ...
Fondos y colores: background, color

Vía Daniel Mota

9/10/07

Posicionamiento. Los 10 factores más importantes

Sobre una escala de 5 son:

Uso de keywords en la etiqueta <title> (4,9)
Popularidad global del sitio (4,5)
Anchor Text de los enlaces entrantes (4,4)
Popularidad dentro de la estructura interna del sitio (4,1)
Edad del sitio (4)
Enlaces desde sitios de temática relacionada (3,9)
Popularidad en su comunidad (3,9)
Keywords en texto (3,9)
Popularidad del enlace entrante (3,7)
Relación de temáticas con web que nos enlaza (3,6)

En resumen, el 90% de la ecuación del posicionamiento puede depender de 4 factores:

Palabras clave y relevancia del contenido
Enlaces a la página, en cantidad y calidad
Antigüedad del dominio
Texto encerrado en los enlaces que contengan las palabras clave

Vía SEOmoz

Expresiones regulares con JavaScript

Utilizar el objeto RegExp

oRegExp = new RegExp("azul", "gi");
oRegExp = /azul/gi; notación tipo Perl
g = (global) compara todas las coincidencias, nos solo la primera
i = (ignoreCase) el patrón no distingue entre may y min 
var aMatches = oRegExp.exec(cadena); devuelve una matriz con un solo elemento
var aMatches = cadena.match(oRegExp);devuelve una matriz con todas las coinciedencias en la cadena
var indice = cadena.search(oRegExp); índice de la 1ª instancia en la cadena (parecido a indexOf())

Métodos de cadena que aceptan expresiones regulares: replace

var sTextoReemplazado = cadena.replace(oRegExp, "rojo"); genera el mismo resultado que
var sTextoReemplazado = cadena.replace(oRegExp, function(sMatch){
return "blue";}
); genera el mismo resultado que
var sTextoReemplazado = cadena.replace("azul", "rojo");

Métodos de cadena que aceptan expresiones regulares: split

var array = cadena.split(","); genera el mismo resultado que
var oRegExp = /\,/;
var array = cadena.split(oRegExp);

Metacaracteres de expresiones regulares se escapan con \

( [ { \ ^ $ | ) ? * + . ,
\\t, \\n, \\r, \\0 tabulación, nueva línea, retorno de carro y  carácter Null, respectivamente

Clases de caractéres (caracteres entre corchetes[])

oRegExp = /[abc]dar/gi;   clase sencilla: cadenas que empiezan por a, b ó c y terminan con dar
oRegExp = /[^abc]dar/gi; clase de nagación (^:acento circunflejo): cadenas que no empiezan por a, b ó c y si terminan con dar 
oRegExp = /numero[1-4]/gi; clase de intervalo (-)
oRegExp = /[a-m1-4\n]/gi;   clase de combinación: cadenas que empiezan entre la a y la m, entre el 1 y el 4, y el carácter de nueva línea

Clases predefinidas

. = [^\n\r] cualquier caracter menos los de nueva línea y retorno de carro 
\d = [0-9]   un dígito
\D = [^0-9] un valor que no sea dígito
\s = [ \t\n\x0B\f\r] carácter de espacio en blanco
\S = [^\t\n\x0B\f\r] carácter que no sea espacio en blanco
\w = [a-zA-Z_0-9]   un carácter de palabra, letras números y guión bajo
\W = [^a-zA-Z_0-9] un carácter que no sea de palabra

Cuantificadores: cuantas veces debe repetirse un patrón

? = una o ninguna instancia
* = cero o más instancias
+ = una o más instancia
{n} = exactamente n instancias
{n,m} = al menos n pero no más de m instancias
{n,}  = al menos n instancias

Agrupar: procesando secuencias de caracteres (hasta ahora se aplicaban a caracteres individuales)

var oRegExp = /micmic/g; genera el mismo resultado que
var oRegExp = /(mic){2}/g;
var oRegExp = /(azul( y rojo)?)/; encuentra "azul" o "azul y rojo"

Límites

^ = inicio de línea
$ = final de línea
\b = límite de palabra
\B = límite que no es de palabra

Ejemplo de lo visto hasta ahora: crear un método trim()

String.prototype.trim = function(){
var oRegExp = /^\s+(.*?)\s+$/;
return this.replace(oRegExp, "$1");
};
var sText = " texto de ejemplo ";
alert(sText.trim());

Apuntes de Diseño y Desarrollo Web