lunes, 31 de enero de 2011

Visualiza tus tipografías en la Web

Wordmark, previsualiza las fuentes que tenemos instaladas y nos permite probarlas para ver como quedan. Tiene diferentes formas para visualizarlas. Negro sobre blanco o invertido, también se puede ajustar el tamaño. La única pega es que el tamaño o color aun no está implementado en está versión, su pongo que posterior mente lo implementaran.

JPanel con JScrollPane

En uno de mis proyectos he tenido el inconveniente de cargar datos en un jpanel (por lo visto algo muy fuera de lo normal, ya que no había solución clara) teniéndolo dentro de un jscrollpane no se llegaba a visualizarse mas que lo que abarcaba el tamaño del panel, vamos que el scroll no aparecía y por mas que refrescaba con getGraphics(); no había manera.
Descubrí por ahí el siguiente método de los JPanel setPreferredSize(); una bendición ya que es la solución a mis problemas. Aquí os dejo como quedaría el código:

JPanel panel = new JPanel();
JScrollPane scroll = new JScrollPane();
scroll .setBounds(132, 155, 502, 311);
scroll .setViewportView(panel);
scroll .getViewport().setView(panel);
panel.setLayout(null);
Creamos el jpanel creamos el jscrollpane definimos un tamaño al scroll y metemos en el scroll el panel. Por último el proceso de carga de datos usamos incluiremos:
panel.setPreferredSize(new Dimension(480,600);
Vamos variando los valores X, Y dependiendo de cuanto necesitamos para mostrar. El código de arriba variara ya que se supone el el jscrollpane estará en un jFrame, jDialog...

NOTA: parecerá una tontería pero buscar en internet a ver si hay algo referenciando a esta solución, por que a mí me a costado. Espero que para la próxima el siguiente que lo necesite lo encuentre antes de perder los nervios ;)

un saludo

domingo, 30 de enero de 2011

Manejar colecciones ordenadas TreeSet y TreeMap

Pequeña explicación sobre los árboles en Java. (encontrado en toolboxnet)
TreeSet
¿Que necesitamos?
Modificar la clase Producto (clase que vamos a almacenar) implementando Comparable. 
Está interfaz necesita sobrescribir el método compareTo indica que atributos se usaran para comparar.

import java.util.*; 
public class Producto implements Comparable { 

public String nombre; 
public int cantidad; 

public Producto(String s, int i) {
nombre = s;
cantidad = i;


public String toString(){
return ("Nombre: "+nombre+" Cantidad: "+cantidad);
}

public int compareTo( Object objeto ) {
// Indica en base a que atributos se compara el objeto
// Devuelve +1 si this es > que objeto
// Devuelve -1 si this es < que objeto
// Devuelve 0 si son iguales

Producto producto = (Producto)objeto;
String nombreObjeto = producto.nombre.toLowerCase();
String nombreThis = this.nombre.toLowerCase();

return( nombreThis.compareTo( nombreObjeto ) );
}
} 

TreeSet no permite elementos duplicados, mantiene la lista ordenada y el elemento a comparar debe contar con métodos equals, hashCode o compareTo

MercadoTreeSet.java 
import java.util.*; 
public class MercadoTreeSet 
public static void main(String args[])
{
// Definir 5 instancias de la Clase Producto 
Producto pan = new Producto("Pan", 6); 
Producto leche = new Producto("Leche", 2); 
Producto manzanas = new Producto("Manzanas", 5); 
Producto brocoli = new Producto("Brocoli", 2); 
Producto carne = new Producto("Carne", 2); 
Producto res = new Producto("Carne", 3); 

// Definir un TreeSet 
TreeSet lista = new TreeSet(); 
lista.add(pan); 
lista.add(leche); 
lista.add(manzanas); 
lista.add(brocoli); 
lista.add(carne); 
lista.add(res); 

// Imprimir contenido de TreeSet 
// Aunque se agregan 6 elementos, el TreeSet solo contiene 5 
// TreeSet no permite elementos duplicados, 
// TreeSet detecta que el elemento "Carne" esta duplicado 
// Notese que el orden del TreeSet refleja un orden ascendente 
mostrarLista(lista); 

// No es posible eliminar elementos por indice 
// Un TreeSet solo elimina por valor de Objeto 
lista.remove(manzanas); 
mostrarLista(lista); 

// Eliminar todos los valores del TreeSet 
lista.clear(); 
mostrarLista(lista);
}

public static void mostrarLista(Collection lista) {
System.out.println(" Lista del mercado con " + lista.size() +
" productos");
for( Iterator it = lista.iterator(); it.hasNext();) {
Producto producto = (Producto)it.next();
System.out.println(producto);
}
}
}


TreeMap
¿Que necesitamos?
Elementos están ordenados por la clave, se definen dos referencias de la interfaz SortedMap. En la primera se colocan las claves que se encuentran entre A y O. Método submap("A", "O") La segunda almacena las claves desde la P hacia el final. 
Estas comparaciones se han hecho con la clase String. Otras clases deberán definir sus propios métodos compareToequals o hashCode

AgendaTreeMap.java 
import java.util.*; 
public class AgendaTreeMap 
public static void main(String args[]) 
{ 
// Definir un TreeMap 
TreeMap agenda = new TreeMap(); 

// Agregar pares "clave"-"valor" al HashMap 
agenda.put("Doctor", "(+52)-4000-5000"); 
agenda.put("Casa", "(888)-4500-3400"); 
agenda.put("Hermano", "(575)-2042-3233"); 
agenda.put("Tio", "(421)-1010-0020"); 
agenda.put("Suegros", "(334)-6105-4334"); 
agenda.put("Oficina", "(304)-5205-8454"); 
agenda.put("Abogado", "(756)-1205-3454"); 
agenda.put("Papa", "(55)-9555-3270"); 
agenda.put("Tienda", "(874)-2400-8600"); 

// Notese que el orden del TreeMap refleja un orden ascendente 
// en sus elementos independientemente del orden de insercion. 
// Debido al uso de String se refleja un orden alfabetico 
mostrarMapa(agenda); 

// Definir dos TreeMap nuevos 
SortedMap agendaAO = agenda.subMap("A", "O"); 
SortedMap agendaPZ = agenda.tailMap("P"); 

System.out.println("---- Agenda A-O ----"); 
mostrarMapa(agendaAO); 

System.out.println("---- Agenda P-Z ----"); 
mostrarMapa(agendaPZ);


public static void mostrarMapa(Map agenda) {
System.out.println(" Agenda con " + agenda.size() +
" telefonos");
for( Iterator it = agenda.keySet().iterator(); it.hasNext();) {
String clave = (String)it.next();
String valor = (String)agenda.get(clave);
System.out.println(clave + " : " + valor);
}
}

Prefetch en HTML5

Prefetching permite descargar las URL indicadas antes de que se vayan a visitar… y el HTML 5 incluye un sistema para alisarlo, ya de forma estándar (hasta ahora sólo Firefox le daba soporte).

El sistema es tan sencillo como poner en el <head> algo como:
<link rel="prefetch" href="http://sitio.web/url-siguiente/">
o algo como:
<link rel="prefetch" href="http://sitio.web/imagen-siguiente.png">
Otra posibilidad es la de acelerar la carga pero en URL concretas que se vayan cargando dentro del sitio… de forma que cualquier enlace interno quedaría de la siguiente forma:
<a rel="prefetch" href="http://sitio.web/url-siguiente/">
Un saludo

sábado, 29 de enero de 2011

El Abecedario

geolocaliza con HTML 5


Aunque se asocia el lanzamiento de las funciones de geolocalización al HTML 5, lo cierto es que la Geolocation API son unas funciones en JavaScript independientes de esta forma de mostrar las páginas web.

Básicamente el navegador, dependiendo de la conexión a Internet, será capaz de saber qué latitud, longitud y otros datos tienes en ese momento. Os dejo con un par de ejemplos de código que, dependiendo del navegador, deberían funcionar.

El código más sencillo tiene una pinta tal que esta:

<script type="text/javascript">
     if (navigator.geolocation) {
          navigator.geolocation.getCurrentPosition(successFunction, errorFunction);
     } else {
          alert('Tu navegador no soporta la geolocalizacion.');
     }
     function successFunction(position) {
          var lat = position.coords.latitude;
          var long = position.coords.longitude;
          alert('Tu localizacion es -- latitud : '+lat+' longitud : '+long);
     }
     function errorFunction(position) {
          alert('No se ha podido recuperar la geolocalizacion.');
     }
</script>

Si queréis un ejemplo completo os paso el código HTML5 de una página  que te localiza y te lo posiciona en el Mapa
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="language" content="es">
    <title>Prueba de Geolocalizaci&oacute;n</title>
    <script src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <style type="text/css">
        html, body {
            width: 100%;
            height: 100%;
    }
    #map_canvas {
            height: 85%;
            width: 100%;
    }
    </style>
</head>

<body>
    <div id="map_canvas"></div>
    <div id="locationinfo"></div>
    <script type="text/javascript">
    if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(displayPosition, errorFunction);
    } else {
        alert('Tu navegador no soporta la geolocalizacon de HTML 5.');
    }
    function displayPosition(pos) {
        var mylat = pos.coords.latitude;
        var mylong = pos.coords.longitude;
        var thediv = document.getElementById('locationinfo');
        thediv.innerHTML = '<p>Tu localizacion es -- latitud : ' + mylong + ' longitud : ' + mylat + '</p>';
        var latlng = new google.maps.LatLng(mylat, mylong);
        var myOptions = {
            zoom: 15,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.HYBRID
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
        var marker = new google.maps.Marker({
            position: latlng,
            map: map,
            title:"Aqui estas"
        });
    }
    function errorFunction(pos) {
        alert('o se ha podido recuperar la localizacion');
    }
    </script>
</body>
</html>

viernes, 28 de enero de 2011

Como mejorar la velocidad de una página

Google ya anunció que la velocidad de descarga es un parámetro o señal en el algoritmo del buscador, muchos SEOs recién ya tienen estrategias de usabilidad y velocidad en sus webs.

Os presento el vídeo de Maile de Google Webmaster nos presento hace un tiempo el vídeo con ideas y herramientas para analizar y mejorar la velocidad de descarga de tu web.

Después de que Google anunciaba que la velocidad de descarga es un paramento o señal en el algoritmo del buscador, muchos SEOs recien han comenzado a pensar en la usabilidad y la velocidad de sus páginas web.

Maile, de Google Webmaster nos presenta un vídeo con algunas ideas y herramientas para analizar y mejorar la velocidad de descarga de una página web




Articulo completo

jueves, 27 de enero de 2011

Automatizar la precarga de las imagenes

Filament Group presentó un código muy cómodo a la hora de cargar todas las imágenes de nuestras CSS. 

¿Que hace el código?
Se recorre todas las hojas CSS que esten vinculadas e importadas y crea una matriz con todas las URLs de imágenes. Posteriormente se recorre todo ese conjunto de direcciones y crea un objeto imagen para cada uno de ellos. De tal forma, que quedaran almacenados en la caché y preparados para su uso posterior.

¿Cómo se utiliza?
Simplemente tienes que tener la famosa librería de jQuery y preloadCssImages.jQuery_v5.js este último es el código creado por dicho grupo.
Teniendo eso solo tienes que llamar a $.preloadCssImages(); cuando el DOM este listo. De la siguiente manera:
$(document).ready(function(){
     $.preloadCssImages();
});

Esto comenzará a analizar todos los archivos CSS y comenzará la precarga de las imágenes.
Otra pequeña idea es poder conocer el estado de la precarga, así podríamos incluir una barra o algo parecido que indique al usuario el tiempo de carga de la página. Para ello podemos pasar una extensión que reciba el estado de está con tatusTextEl y statusBarEl. Un ejemplo:
$.preloadCssImages({statusTextEl: '#textStatus', statusBarEl: '#status'});
Un detalle a tener en cuenta sería que en las imágenes de fondo, aseguraos en colocar el atributo 'no-repeat'.

Por ultimo si queremos ejecutar este código mientras otros elementos se están ejecutando, modificar el valor simultaneousCacheLoading a 1 ya que por defecto está a 2. Esto te permite especificar el numero de imágenes simultaneas a descargar. Recordar que los navegadores tienen limite para ejecutar peticiones HTTP.

HTML5 estructura de las cabeceras

Como estructurar las cabeceras también hablaré, claro está de las etiquetas que ya existen, y si han cambiado o no con respecto a las versiones anteriores.

doctype
Para empezar cualquier página toca el doctype. La verdad es que históricamente este elemento nunca ha tenido un buen acompañamiento, ya que había que indicarle algunos parámetros y versiones que normalmente nunca se ajustaban a la realidad. Ahora, con el HTML 5 esto queda reducido a una única opción muy simple:
<!DOCTYPE HTML>
Y ya está… no hay que indicar si es HTML 4, XHTML, si es estricto, ni versión ni nada de nada… simple. Este elemento no hay que cerrarlo ni nada, simplemente será la primera línea de cada una de nuestras páginas.

html
El siguiente elemento que hay que revisar es el html. Este es el elemento que ha de mantener toda la página, y que tendrá dentro el resto de elementos.
<html> [...] </html>
head
El siguiente elemento es el del head. Este es el elemento que contiene meta-información de la página y es el primer elemento que debemos encontrar en la página.
<head> [...] </head>
Aunque en teoría no tiene porqué tener elementos dentro obligatoriamente, sí que es muy recomendable que siempre incluya el elemento title.

title
Para mi uno de los elementos más importante de cada una de las páginas de un sitio es el elemento title. Por un lado porque es un elemento único, es decir, sólo puede haber uno por página, y también, de cara a SEO, es muy importante que esté bien construido.

Este elemento sólo puede incorporar texto (es decir, no puede tener código HTML ni nada parecido). También se ve afectado por cualquiera de los elementos globales.

<title>Aquí va el título de la página</title>


base
Uno de los elementos que siempre me ha intrigado es precisamente el base. Mucha utilidad no acabo de verle, aunque si está y se ha mantenido por tantos años es por algo. La dirección a partir de la que se han de calcular el resto de enlaces relativos de la página.
<base href="http://www.example.com/news/index.html">
Al igual que el title, sólo puede haber uno por página, y también acepta los atributos globales además de dos más, que son el href y el target.


link
Uno de los elementos que puede dar mucho juego es el link, básicamente porque nos puede ofrecer elementos alternativos u otros recursos relacionados con esa misma página. El ejemplo más habitual es el autodiscover de los feeds o los ficheros CSS externos.
<link rel="alternate" href="/fr/html" hreflang="fr" type="text/html" title="French HTML">
Entre los elementos que puede incorporar está el href (que hace referencia a la dirección URL del otro elemento), el rel (que indica el tipo de relación hay un montón de posibilidades), el media (que indica el soporte donde se ha de mostrar esta dirección -hay varios soportes-), hreflang (que es el idioma de destino de la dirección alternativa), el type (que indica me MIME-type de la dirección final) y el sizes (que sólo se usa en caso de que la dirección sea un icono).

Otro elemento que se puede poner, en el caso de que sea un “stylesheet” (hoja de estilo) es disabled, que impediría acceder a través de sistemas externos (tipo JavaScript) a hacer cualquier cambio en los elementos de ese CSS. El title suele ser simplemente informativo, excepto en el caso de los CSS, donde el título define los distintos CSS alternativos.
meta
Quizá los meta necesiten un capítulo entero. Y es que históricamente la gente decide poner todos los que se encuentra en cualquier sitio web, aunque no son siempre válidos. Esta etiqueta ofrece información de elementos que puede leer la máquina y que no tiene porqué ser interesante para el usuario en sí mismo. Son meta-información que no encontramos en el resto de elementos del head.

Como en el resto de ocasiones, tienen los atributos globales y unos más que son: name (es el nombre del concepto a tratar), content (es el contenido que le damos a ese valor). También tenemos el http-equiv(que hace referencia a cabeceras HTTP) y el charset (que indica la codificación de caracteres del elemento).

Los valores habituales que puede tener un meta son:
  • application-name: se usa en el caso de que el contenido no sea una página web, por lo que, en general, no se usará.
  • author: es el nombre de la persona o empresa creadora del contenido.
  • description: sólo ha de haber uno por página y es una breve descripción de lo que encontraremos en ella; recomiendo que tenga entre 125 y 175 caracteres, que es lo que aparecerá en los resultados de los buscadores.
  • generator: es el programa que ha creado la página y que, personalmente, recomiendo no incluir.
  • keywords: una serie de conceptos separados por comas que indican qué tendría que encontrar un usuario en la página; personalmente recomiendo entre 4 y 6 conceptos.
A parte de estos, que son los que están definidos en el estándar, podríamos incluir meta-extensiones si encontramos alguna específica que cuadre con nuestro sitio. Algunos ejemplos pueden ser:
  • robots: es el que se utiliza para bloquear a los robots de búsqueda.
  • audience: una lista de palabras que definirían el tipo de personas que sí o no pueden ver los contenidos.
Como antes comentaba, está el http-equiv que hace referencia a algunas cabeceras…
  • content-language: define el idioma que tendrá la página en general.
  • content-type: es el tipo de contenido MIME que tendrá la página; habitualmente text/html.
  • default-style: establece cuál es la hoja de estilos CSS por defecto.
  • refresh: indica que esa página ha de refrescarse cada N segundos. Si se le indica después una URL se actualizará hacia esa dirección.
<meta http-equiv="refresh" content="20; URL=page4.html">
Además de estos, también se propone el PICS-Label que daría información para la protección de menores.
Para acabar, existe un meta especial (que antes se indicaba de una forma distinta y más compleja) que es la de la codificación de la página. Ahora existe el charset directamente que quedaría algo como:

<meta charset="utf-8">


style
Sin duda hoy en día es inconcebible el HTML sin los CSS u hojas de estilo. Y como tal es así, los CSS tienen su propio sistema de incorporarse al código HTML. He de reconocer que no recomiendo el uso del elemento style, ya que lo mejor es incluirlo de forma externa con un link y que de esa forma quede cacheado… pero es decisión de cada uno.

Este elemento tiene varias opciones a parte de las globales, que son type (habitualmente será “text/css”), media (como ya he comentado en el punto anterior) y scoped que es booleano y que si no se indica los estilos son para todo el documento, y si se indica sólo es aplicable al subárbol donde se encuentra. También se puede usar el disabled al igual que ya he explicado anteriormente, bloquea el acceso externo. Por defecto no hace falta poner el type ya que se da por hecho.

<style>
body { color: black; background: white; }
em { font-style: normal; color: red; }
</style>



script
Este es otro de los elementos que me ha sorprendido encontrar “incrustado” en el HTML 5. La verdad es que los script, y sobre todo el JavaScript siempre se había tratado como algo externo al HTML, pero en esta versión se podría decir que es básico que el JavaScript funcione como el CSS de una forma casi imprescindible.

Los script, al igual que los CSS, pueden encontrarse en el propio código o externo. Lo ideal es que la mayor parte de funciones se encuentren externalizadas, y que sólo el código que vaya cambiando se encuentre en el propio sitio.

De esta forma encontraremos la opción de cargar contenido externo simplemente indicando la dirección correspondiente mediante el atributo src (que indica una dirección URL):

<script src="game-engine.js"></script>

Además de este parámetro podemos encontrar unos cuantos más como el type que, si no se indica es el MIME-type “text/javascript”. De la misma forma que en otros elementos encontramos el charset que si no se indica es el general de la página.

A parte de estos, tenemos 2 atributos booleanos que son async y defer. Estos elementos sólo pueden aparecer siempre y cuando el src está presente. El elemento async indica que este proceso ha de ejecutarse de forma asíncrona, por lo que se cargará tan pronto como pueda, pero “sin prisas”… en el caso en el que se ponga este elemento, también ha de aparecer obligatoriamente el defer. En este caso, si sólo aparece el defer, el script se ejecutará una vez se haya parseado el resto de la página. En definitiva: si se pone defer, el script se ejecutará una vez se acabe de cargar la página, pero en serie, uno tras otro. En caso de estar el async, permitirá ejecutarlos en paralelo, varios a a la vez.

Como detalle a tener en cuenta, es que el language ya ha quedado en desuso, ya que el type marca el lenguaje de programación utilizado.

Y, además del script, tenemos el noscript. Este elemento tiene dos opciones, aunque se resumen en una: si el script anterior no se puede ejecutar, se ejecutará lo que se incluya en este bloque. Y es que los usuarios habitualmente tienen la posibilidad de desactivar lenguajes como JavaScript en su navegador por seguridad.

Y hasta aquí lo que corresponde a la cabecera de una página. Los cambios son bastante mínimos con respecto a las versiones anteriores, y hay que reconocer que el hecho de que en muchos casos se tome por defecto muchos de los parámetros hacen que se facilite mayoritariamente el uso.

miércoles, 26 de enero de 2011

Precargar elementos CSS, JS, JPG ...

Como utilizar la precarga de elementos en nuestra web. Este metodo se usa para ir cargando elementos de la web que todavia no se estan visualizando.
Por ejemplo en la página principal donde poner una bonita presentación antes de darle a ENTRAR podemos ir cargando en cache las CSS o JS u otras imágenes que utilizaremos pasado esa pequeña Introducción. Código:

window.onload = function () {
     var i = 0, max = 0, o = null,
     preload = [
          'http://example.com/imagen.png',
          'http://example.com/javascript.js',
          'http://example.com/estilos.css'
     ],
     isIE = navigator.appName.indexOf('Microsoft') === 0;
     for (i = 0, max = preload.length; i < max; i += 1) {
          if (isIE) {
               new Image().src = preload[i];
               continue;
          }
          o = document.createElement('object');
          o.data = preload[i];
          //o.width = 1;
          //o.height = 1;
          //o.style.visibility = "hidden";
          //o.type = "text/plain"; // IE
          o.width = 0;
          o.height = 0;
          document.body.appendChild(o);
     }
};

Cuidado con abusar en la carga de muchos elementos ya que ralentiza la web. Aunque en las páginas sucesivas puede aumentar considerablemente la velocidad.

Reduciendo todo el JavaScript

Buenas, como en anteriores ocasiones ya hablamos de como cargar javascript sin bloqueos usando Script DOM element. Hoy me gustaría enseñaros como podemos juntar todas las hojas js en una misma, siendo una una única petición de descarga y generando un único archivo comprimido y cacheado.

Se llamJSmin-php es una biblioteca de funciones que existe en PHP que facilita el trabajo.
Un ejemplo básico de como podríamos usarlo sería:

require_once("jsmin.php");
$files = glob("/js/*.js");
$js = "";
foreach($files as $file) {
  $js .= JSMin::minify(file_get_contents($file));
}
file_put_contents("/combinado.js", $js);

En el caso de no querer combinar todos los js de una misma carpeta podemos usar el siguiente método para  incluir únicamente los archivos que necesitemos.

$files = array("/js/main.js", "/js/menu.js", "/js/content.js");

De esta forma ya podemos usar el fichero generado en nuestra web. Recomendaría que esto se ejecutase de forma externa, me refiero que sería mejor incluir únicamente el fichero generado. Para no ralentizar la aplicación web obligando a ejecutar y a generar por cada visita el mismo fichero.

martes, 25 de enero de 2011

como estructurar una web con HTML5


De una forma muy resumida, tendríamos que:
Estructura básica con HTML 3


Estructura básica con HTML 4

Estructura básica con HTML 5

Etiquetas dedicadas a dar formato a los sitios:
header
Este sí que es uno de los nuevos elementos. Y es que header va a dar mucho de sí, y aunque muchos simplemente lo usarán para indicar el bloque contenedor de la cabecera (bloque superior de información) que suele haber siempre en las páginas, también se puede usar en otros puntos del sitio.

footer
El elemento footer va a ser muy parecido al header anterior, aunque quizá sí que tenga más utilidades que no el otro… Básicamente se ha incluido como agrupador de elemento al final de otro… Por norma general los sitios web tienen un pie de página en el que se indican datos legales y similares, y esta podría ser la principal función, aunque no está pensado para que sea la única.

article
El nuevo elemento article va a revolucionar los contenedores y el SEO. Este elemento viene a ser el “contenedor” de lo que es importante en la página. Puede haber varios y es el agrupador de lo que vendría a ser “lo indexable” por un buscador…
De todas formas, aunque al principio parecía que el elemento section iba a ser el que agrupase los contenidos, he llegado a la conclusión por los ejemplos que está lanzando la W3C que no es así, que el gran contenedor de información útil es el article.
Para hacernos una idea básica, una página tendría este formato:
<body>
<header>...</header>
<article>...</article>
<article>...</article>
<article>...</article>
<aside>...</aside>
<footer>...</footer>
</body>

Esto daría a entender que hay 3 bloques de información principales en el sitio, que son los contenidos que el usuario ha de contemplar, además de una cabecera, un menú lateral y un pie de página… Que conste que este ejemplo es muy básico… luego intentaré poner algo más trabajado, al final del artículo, cuando haya explicado todos los elementos.

Dentro del article encontraríamos elementos como un header, un footer y varios section, que comentaré en un momento…

aside
Otro de los nuevos elementos… el aside viene a ser “la barra lateral” de toda la vida. Digamos que, por norma general, este bloque incluirá la zona de navegación del sitio web, las categorías, opciones o como queramos llamarlo…

Como he puesto en los gráficos anteriores, vendrían a ser el contenido que, página a página dentro del sitio web se repite junto a la cabecera y el pie) e intuyo que los buscadores le darán menos peso a este bloque ya que notarán que es “contenido duplicado” y que no tiene utilidad a la hora de posicionar.

Y la verdad es que poco más a decir de este elemento… simplemente que es un agrupador y que estará lleno de sections.

section
El nuevo elemento section viene a ser el <div id="nombre"> que llevamos usando años y años.

Este elemento se perfila como el nuevo div agrupador de cosas, ya sean muy grandes o muy pequeñas. Digamos que una página de noticias tendría un gran article con un primer section especial, que sería el header (o el hgroup que luego comentaré), luego tendría otro gran section que vendría a ser el artículo en sí, y unos cuantos más como podrían ser los elementos relacionados, fichas relacionadas, adjuntos como imágenes o vídeos… en fin, que nos vamos a hartar de usar los section para cualquier agrupación o distinción de elementos.

<article>
<header>...</header>
<section class="noticia">...</section>
<section class="relacionados">...</section>
<section class="multimedia">...</section>
<footer>...</footer>
</article>

address
Uno de los elementos que, ideológicamente no ha variado, pero que personalmente creo que va a tomar muchísima relevancia a partir de ahora es el address. Y es que hasta ahora en este elemento se indicaban direcciones postales y cosas de este estilo… pero ahora la indicación del W3C ha variado y nos piden que no incluyamos esa información, sino que se utilice como elemento añadido (como unsection especial) en el que se den datos de contacto del sitio entero o del article en cuestión.

Como digo, es curioso que se haya dado un giro a este elemento, aunque supongo que por un tema de derechos de autor, sumado a las mejoras en cuanto a geolocalización y similares parece tener mucha más lógica que antes, que casi no se utilizaba para nada…

nav
El nav, el elemento que separó a los incondicionales del pagerank, del link-juice, del link-builing y de todas esas cosas (a mi parecer sin sentido) de los que no piensan tanto en los enlaces y sí en los contenidos.

Este elemento es el que agrupa los enlaces. Y se vende como eso, un section especial para los enlaces, tanto salientes como internos. Aun así, no todos los enlaces han de estar agrupados en este elemento, sino sólo aquellos grandes bloques que incluyan enlaces, sobre todo aquellos habituales que incluyen los términos y condiciones, otras secciones del sitio.

Y aunque probablemente aquí habría que acabar este articulo sobre los elementos que agrupan otros elementos, es curioso que hayan incluido los encabezados como elementos contenedores y no de formato. Esto dice más de lo que parece en cuanto a la importancia de estos elementos.

h1 – h6
Estos elementos son los títulos de las diferentes sections y cada h tiene un peso / ranking específico en base al número que tiene, del 1 (el más alto) al 6 (el más bajo). Hay que recordar que por los estándares de usabilidad y nosequémás, de h1 sólo puede haber uno por página, para que “no salten las alarmas”.

hgroup
Este es otro elemento nuevo, aunque el hgroup no acabo de entenderlo, ya que dudo que se utilice con mucha frecuencia y también dudo de su utilidad en todos los sentidos.

En principio el elemento se define como un agrupador de h. Esto significa que los hgroup sólo pueden incluir elementos de encabezado. eso sí, su funcionalidad máxima es que, en cada bloque de encabezados, el ranking se resetea teniendo pero “uno” el de menor valor. En otras palabras, que tendríamos algo como:

<hgroup>
<h1>...</h1>
<h2>...</h2>
</hgroup>
...
<hgroup>
<h2>...</h2>
<h4>...</h4>
</hgroup>

El primero de los grupos tiene 2 cabeceras, el primer h1 tendría un peso de h1, y el h2 tendría un peso de h2; pero en el segundo bloque, el h2 tendría un peso de h1 y el h4 tendría un peso de h2… Al menos eso es lo que la teoría dice… pero, vuelvo a decir, no sé hasta que punto tiene mucho sentido utilizar este elemento.

La estabilidad del Google Ranking by Max Glaser

Fascinado con Max Glaser os presento otra porción sobre lo que se podría denominar la Biblia del posicionamiento.

Introducción
Después que de que hemos entrado en la era de Bigdaddy, muchas de las reglas y estrategias que han usado los SEO´s en los últimos años para posicionar sus webs han perdido su validez.
A pesar de que posiblemente esta nueva infraestructura todavía esta en la fase de estabilización, parece que Google ya esta comenzando a realizar algunos experimentos para analizar sus resultados y en caso de ser satisfactorios podrían ser introducidos en el algoritmo ‘oficial’ del buscador
Esta idea se origina en la observación de los diferentes data centers (DCs) de Google en las ultimas semanas. En la era pre Bigdaddy, los ingenieros de Google realizaban sus pruebas solamente en algunos DCs y luego, después haber logrado sus objetivos, propagaban esos datos a los restantes DCs.
En las ultimas semanas se ha podido apreciar algo diferente: Se han observado diferentes series o clases de índices repartidos por todos los DCs. Por este motivo las posiciones de las páginas web han estado variando mucho, hasta el punto de que los foreros en WMW, expertos en el análisis de los DCs, han quedado totalmente desconcertados, ya que no han encontrado ningún concepto o teoría clara sobre el comportamiento de los DCs.
Análisis
Ahora bien, cómo se puede analizar correctamente el ranking o posición de una página web, suponiendo que Google esta usando diferentes índices en sus data centers, como resultado de la aplicación de diversos grupos o clases de algoritmos?
Después de haber observado la posición de muchas páginas web de varios proyectos, o mejor dicho dominios, en los diversos data centers de Google durante estos últimos meses, he llegado a las siguientes conclusiones:
Páginas web que pertenecen a dominios bien establecidos en Google y que poseen algún tipo de autoridad, han mantenido su ranking o posición en casi todos o todos los data centers.

Mientras que páginas que por uno u otro motivo todavía son débiles, o que estaban afectadas por alguno de los filtros de Google (poca antigüedad, contenidos duplicados, efecto sandbox, etc.) han estado variando continuamente de ranking en los data centers.
Eso significa entonces que páginas fuertes son estables a las posibles variaciones de los diferentes algoritmos de Google, mientras que las páginas débiles, son muy susceptibles a las variaciones de los algoritmos aplicados en los data centers.
Esta observación me lleva a definir un nuevo concepto: Estabilidad del Ranking de Google, o en ingles Google Ranking Stability (GRS).
El GRS es entonces una métrica que define la fortaleza o estabilidad de una página web en relación a los diferentes algoritmos que se pueden aplicar para generar un índice.
Si podemos calcular el GRS de una página, entonces sabemos cuan resistente es a los cambios algoritmicos que Google pueda introducir.
La siguiente tarea es entonces, encontrar un método para poder calcular el GRS de una página. Para esto necesario desarrollar una nomenclatura formal y una metodología de cálculo.
Nomenclatura
Para poder crear una herramienta formal que pueda calcular el GRS es necesario realizar algunas definiciones:
- d1,…,dn sean los data centers de Google
- u sea la url de una página web
- kw sean las palabras claves con las que se realiza una búsqueda.
Entonces,
pi[u|kw] es la posición de la página u para las palabras claves kw en el data center i.
- num sea el numero máximo de posiciones que el buscador de Google nos permite observar. Este valor actualmente es 100.
Con esto podemos fácilmente definir la posición promedio de una página u para las palabras claves kw en los n data centers de Google de la siguiente manera:


P[u|kw] = SUMA(pi[u|kw], 1,n) / n

El Google Ranking Stability (GRS) de la página u para las palabras claves kw lo definimos de la siguiente manera:
Sea


D[u|kw] = (MAX{p1[u|kw],…, pn[u|kw]}\{ pi[u|kw]>num} – MIN {p1[u|kw],…, pn[u|kw]}\{ pi[u|kw]>num})

Entonces tenemos


GRS[u|kw] = ((num – D[u|kw])*100)/num

La anterior formula la podemos explicar de la siguiente manera:
El término MAX{p1[u|kw],…, pn[u|kw]}\{ pi[u|kw]>num}
es el máximo de todas las posiciones pi[u|kw] de la página u para la búsqueda kw, pero sin tener en cuenta las posiciones mayores a num.
Mientras que el término MIN{p1[u|kw],…, pn[u|kw]}\{ pi[u|kw]>num}
es el mínimo de todas las posiciones pi[u|kw] de la página u para la búsqueda kw, pero sin tener en cuenta las posiciones mayores a num.
En palabras sencillas, esta parte de la formula nos da el ruido de las posiciones de la página u para la búsqueda kw en cada uno de los data centers. Pero como estamos definiendo la estabilidad, restamos de num este valor, y obtenemos:
Cuanto más grande es el valor de GRS, entonces mas estable es la página u para la búsqueda kw.
La herramienta
Para poder comprobar los resultados del Google Ranking Stability (GRS) he desarrollado una pequeña herramienta que ahora es de uso publico y se encuentra aquí.
Para finalizar este artículo deseo presentar algunos casos con la mencionada herramienta.
Caso 1: Página con poca estabilidad
La siguiente página tiene una gran variación en las posiciones (desde la 4. a la 42.) para la búsqueda kw en los diferentes DCs. Por eso, solo tiene un GRS de 62%



Caso 2: Página con una estabilidad media
La diferencia de las posiciones de esta página para kw en todos los DCs es relativamente pequeña (entre 9 y 16). Por este motivo su GRS ya es del 93%, mucho mas alto que en el primer caso.



Caso 3: Página totalmente estable
En este ultimo caso, la posición de la página para la búsqueda kw es en todos los DCs la misma (posición 5). Esto significa que esta página es resistente a las variaciones de los algoritmos en los diferentes DCs.



Comentarios y opiniones sobre el tema son bienvenidos!

lunes, 24 de enero de 2011

determinar mi musica favorita en JAVA

En estos largos días y época dura de exámenes, que causalidad que es cuando se me pasan por la cabeza las mejores o mas estúpidas ideas. Y nada mas y nada menos que la formula de como identificar de una lista de reproducción de música por ejemplo. Y dependiendo de una serie de variables, sacar las canciones favoritas ordenarlas de "mas favorita" a la que menos y encima ir reproduciendo aleatoriamente teniendo mas prioridad de salir una canción favorita que una no. Quizá no es del todo cierto que sea o no "favorita", imaginemos que reproduces mil veces una canción el "algoritmo" si así se puede llamar te la tomará como favorita ya que no has echo mas que reproducirla pero... eso no quiere decir que aun estando hay salga a reproducirse la primera siempre si no que intentará ser lo mas variado de entre todas. Imaginemos que la misma canción hace un mes que no la reproduces por que no quieres, pues en cierto modo el nivel de favoritismo bajará. Es un poco difícil explicar todas las posibilidades. aquí paso el código

public class MusicLike {
    int  x, //id canción
         a, // numero de repeticiones
         b, //id autor Se almacena pero no se trata, lo dejo para futuras versiones
         c, //id album Se almacena pero no se trata, lo dejo para futuras versiones
         d, //segundos que tarda la canción
         e, //numero de dias que han pasado desde que está en la lista
         z; //numero favorito
    static int lista[][]=new int[5][7]; //lista de reproducción
    static Vector<Integer> ordenado=new Vector<Integer>(); //se usará para ordenar las canciones y reproducirlas

    public static void main(String[] args) {
        lista[0][0]=1; //x
        lista[0][1]=20; //a
        lista[0][2]=1; //b
        lista[0][3]=2; //c
        lista[0][4]=360; //d
        lista[0][5]=3; //e
        lista[0][6]=0; //z
       
        lista[1][0]=2;
        lista[1][1]=120;
        lista[1][2]=3;
        lista[1][3]=1;
        lista[1][4]=75;
        lista[1][5]=10;
        lista[1][6]=0;
       
        lista[2][0]=3;
        lista[2][1]=503;
        lista[2][2]=2;
        lista[2][3]=0;
        lista[2][4]=60;
        lista[2][5]=2;
        lista[2][6]=0;
       
        lista[3][0]=4; //x
        lista[3][1]=30; //a
        lista[3][2]=0; //b
        lista[3][3]=3; //c
        lista[3][4]=59; //d
        lista[3][5]=4; //e
        lista[3][6]=0; //z
       
        lista[4][0]=4; //x
        lista[4][1]=0; //a
        lista[4][2]=0; //b
        lista[4][3]=3; //c
        lista[4][4]=59; //d
        lista[4][5]=10; //e
        lista[4][6]=0; //z
       
        int[] ordenar=new int[lista.length];
        for(int i=lista.length-1;i>=0;i--){
            lista[i][6]=(int) gusta(i);
            ordenar[i]=lista[i][6];
        }
        Arrays.sort(ordenar);
               
        for(int i=ordenar.length-1;i>=0;i--){
            ordenado.addElement(ordenar[i]);
        }
       
        while (ordenado.size()>1) {
            int x=aleatorio();
            console(ordenado.elementAt(x));
           
            for(int i=0;i<lista.length;i++){
                if(ordenado.elementAt(x)==lista[i][6]){
                    break;
                }
            }
            ordenado.removeElementAt(x);
        }
    }
   
    public static int aleatorio(){
        Random randomGenerator = new Random();
        int x = 0;
            try {
                x=randomGenerator.nextInt(ordenado.size()/2);
            } catch (Exception e) {
                x=randomGenerator.nextInt(ordenado.size());
            }
    return x;}
   
    public static long gusta(int x){
        long gustar=lista[x][6];
        long repetir=media(1);
        gustar+=puntoMedia(x, repetir);
       
        long segundos=media(4);
        gustar+=puntoMedia(x, segundos);
       
        long dias=media(5);
        gustar+=puntoMedia(x, dias);
       
        if(gustar<0)gustar=0;
    return gustar;}
   
    public static int puntoMedia(int x,long media){
        int gustar=0;
        if(lista[x][1]>media){
            gustar+=2;
        }else if(lista[x][1]<(media/2)){
            gustar-=1;
        }
       
    return gustar;}
   
    public static long media(int x){
        long media=0;
        for(int i=lista.length-1;i>=0;i--)
            media+=lista[i][x];
    return media/lista.length;}

    public static void console(Integer view){
        System.out.println(view);
    }
}

Según se me ocurra alguna idea mas la actualizaré. Y cuando tenga tiempo y lo de por finalizado implementaré una interfaz.

nuevas etiquetas HTML5

Os presento una serie de los los nuevos Tags que tienen sentido a la hora de diseñar sitios

<article>
El significado principal es sencillo: aquí se encuentra el contenido importante de la página. Si hablásemos en términos de SEO, esto sería lo que hay que posicionar.

<aside>
Este bloque viene a ser los contenidos relacionados con el “article” principal… habitualmente harían referencia a esa “columna lateral” en la que hay tags o cualquier tipo de información de relleno, como “enlaces relacionados” y similares.

<footer>
Esto es algo que creo que va a venir a todos bien, un tag que simplemente agrupe el contenido del “pie de página”.

<header>
Y, claro está, si hay pie de página, también hay una cabecera en la que poner el logo, el banner de arriba y esas cosillas…

<hgroup>
Aunque no le acabo de encontrar la utilidad, este tag lo que hace es agrupar los contenidos de las etiquetas h1 a h6.

<mark>
Seguro que en alguna ocasión habéis creado un sistema que, dependiendo del “refere” si llegaba desde un buscador, se marcasen las “palabras de búsqueda”. Pues este es el tag que ha venido a quedarse. En el mundo real vendría a ser como el que coge un “marker amarillo” y destaca unas palabras de un texto.

<nav>
Este elemento sí que me parece importante. Y es que en este tag incluiremos los enlaces que afecten a la navegación del sitio (en principio navegación interna, aunque se puede incluir la externa). Un lugar donde podemos encontrar esto sería el menú de navegación, el pie de página o la paginación…

<section>
Otro de los elementos importantes, y a la vez muy genérico. Esto vendría a ser aquel “macro-div” que se utiliza para agrupar contenidos. Por ejemplo, en una web que tenga 3 columnas, cada una de ellas podría ser tranquilamente un “section”.

<time>
Este es otro de los tags que no acabo de entender porqué aparece, pero si lo han puesto, por algo será. Y es que, cuando pongamos una fecha dentro de cualquier tipo de contenido (una fecha o palabras del estilo “hoy”, “ayer” o similares) se pueden enmarcar con este tag que siempre ha de incorporar la fecha a la que hace referencia. De cara a los buscadores podría estar bien para la “frescura”, y seguro que sitios como Twitter o facebook lo usan con mucha frecuencia.

Espero que esta mini guía tenga sentido para alguien.

Como inscribir correctamente una nueva web en Google by Max Glaser

Navegando por la red me tope con una entrada muy interesante en el blog del Max Glaser, copio la entrada completa para que echéis un ojo. Es sin duda un trozo de la Biblia del posicionamiento Web.


Introducción
Uno de los errores más comunes que cometen las empresas que desean tener una presencia en Internet, es que piensan que con la compra de un dominio y la publicación de una web, el trabajo ya ha concluido.
Por este motivo, es muy común observar que páginas web de empresas importantes casi no reciben visitas debido a que no están bien posicionadas en los índices de los buscadores.
Hoy en día, tener solamente una web en Internet ya no es suficiente. Se debe trabajar mucho para conseguir visitantes y mantener el proyecto actualizado.
Uno de los pasos más importantes después del diseño y la publicación de proyectos web, es la fase de inscripción en los buscadores y su respectivo posicionamiento.
Como ya es conocido, la mayoría de los visitantes de una página web se origina desde Google. Dependiendo del país y de la popularidad de Google, el porcentaje varía desde 60% a un 85%. Por ese motivo, lo más importante para llevar a buen termino un nuevo proyecto web, es la inscripción del proyecto sobre todo en Google.
Debido a que en los últimos años, los spammers han tratado de ganar las primeras posiciones en los índices de los buscadores, los algoritmos de los motores de búsqueda han tenido que ir adaptándose a esta nueva situación. Por ejemplo, Google ha implementado una serie de criterios para dificultar el posicionamiento de páginas con SPAM en su índice.
Uno de estos criterios es la edad y la calidad del dominio: Si el dominio es nuevo y ha sido registrado por un minino de tiempo, entonces Google sospecha de que se puede tratar de uno de los miles de dominios que crean los spammers cada día.
Otro criterio es el grado de confianza que Google da a cada web. Si se desea posicionar una web para palabras clave competitivas, entonces esta debe cumplir algunos criterios de confiablidad, como por ejemplo recibir enlaces de páginas con autoridad. Caso contrario la página puede ser penalizada y quedarse en las ultimas posiciones del índice. Este fenómeno es conocido por los webmasters como SandBox, aunque este termino es rechazado por Google.
Por estos motivos, la inscripción de un nuevo proyecto web debe ser bien planificado y realizado con mucho cuidado. La primera carta de presentación a Google ayudará o dificultará el posionamiento de la web en el buscador.
La siguiente sección presenta un catalogo de tareas que se deberían realizar para inscribir correctamente una web en Google.

Antes de la inscripción
Es muy importante que antes de la inscripción de la web en Google se termine completamente el proyecto, pues inscribir una página en construcción, con un contenido temporal o en borrador puede dañar la imagen de la página frente a Google.
Se debe evitar que Google comience a escanear la web antes de que este concluida. Esto se puede lograr solamente si no se colocan enlaces desde otras páginas.
Se debe controlar la calidad del contenido y controlar si existe contenido duplicado.
Revisar si todas las URLs en las páginas son accesibles. Para esta tarea se puede por ejemplo usar Xenu, un programa para controlar los enlaces de una web.
Revisar los metatags de las páginas, por lo menos de las principales, o de las que se desea posicionar en especial. Sobre todo se debe tener en cuenta los metatags keywords y description, que son usados por Google y otros buscadores para generar la descripción de la página que aparecen en los resultados del buscador.
Crear un archivo robots.txt describiendo exactamente qué páginas no deben ser escaneadas por los robots de los buscadores. Si es que se omite este paso, puede suceder que en el índice aparecerán páginas solamente para uso interno o informaciones que no se desean presentar en Internet. Informaciones para generar el archivo robots.txt se pueden encontrar aquí.
Se debe controlar si la página web se puede alcanzar desde www.mi-dominio.com o mi-dominio.com y evitar las URLs canónicas.

Inscripción
Para poder ser indexado con facilidad y rápidamente en Google se deberían seguir los siguiente pasos:
  • Registrar la web en Google Webmaster Central la página de herramientas para Webmasters de Google.
  • Crear un Sitemap de la página, subirlo al servidor web e incribirlo en Google Sitemaps.
  • Finalmente, se debería inscribir en Google usando los buscadores de Google en algunos idiomas: Ingles,Español. Aunque no esta comprobada la efectividad de este método de inscripción, no se la debe obviar.

Creación de enlaces
Uno de los pasos más importantes para acelerar la inscripción y la indexación de la nueva web en Google es colocar algunos enlaces hacia la nueva web desde páginas que tengan un buen PR (por lo menos PR4) y que sean escaneadas por los robots de Google con bastante frecuencia.

Control
Generalmente, si se siguen todos los pasos mencionados anteriormente, la web debería aparecer en el índice unos 2 o 3 días después de su inscripción.
Inicialmente el índice muestra solo la página principal y luego, poco a poco y según la estructura de los enlaces internos, aparecen las páginas internas. La forma más sencilla de comprobar si la web ya ha sido indexada, es usar el comando site:mi-dominio.com
En caso de que después de una semana, la web todavía no aparezca en el índice de Google, se debería conseguir mejores enlaces para acelerar el proceso de indexación.

Mantenimiento y actualización
Luego de que se haya logrado la indexación en Google es muy importante mantener interesados a los robots en escanear la página con frecuencia. Esto solo se consigue generando continuamente nuevos contenidos que no sean duplicados, y creando enlaces entrantes de webs con el mismo tema.

Conclusión
Si es que se siguen todos los pasos mencionados en este artículo, el nacimiento de una nueva web en Internet, su presentación a Google, y su posterior indexación deberían funcionar sin ningún problema. Adicionalmente, esta carta de presentación en Google ayudará mucho para que el buscador dé un voto de confiabilidad ayudando así su posicionamiento en el índice, lo que significa la generación de trafico.