Dakoo » General

HTML 5 – nav

admin — Thu, 03 Jun 2010 03:41:33 +0000

Al igual que nuestro anterior post donde vimos el tag section en esta ocasión nos centraremos en el tag nav. El objetivo de este elemento al igual que section es describir de forma más semántica la página, con esto se logra una estructura más ordenada y quizás en el futuro los buscadores puedan tomarlos en cuenta para la Web semántica.
Este tag se utiliza para introducir los menús de navegación del sitio, esto generalmente se hacía con:

PLAIN TEXT

HTML:

Ahora al introducir este elemento como dijimos anteriormente mejora la forma semántica del sitio, como se ve en este ejemplo.

PLAIN TEXT

HTML:

href="#l">Inicio

href="#">Acerca de

href="#">Contacto

</nav> 

Creo que no hay mucho que hablar sobre este tag ya que es simple su objetivo

Espero les sirva

saludos tuto

HTML 5 – section

admin — Wed, 02 Jun 2010 04:26:23 +0000

Hoy comenzamos con la revisión de la especificación html 5 y en esta ocasión nos centraremos en el tag section.

Este elemento se utiliza para darle una nueva estructura al código, por ejemplo en este código se ve una estructura de html 5 con varios nuevos elementos

PLAIN TEXT

HTML:

Cabecera
</header>
Menu de navegacion
</nav>
Seccion
Articulo</article>
</section>
Pie de pagina
</footer>

Si nos damos cuenta la estructura es más fácil de entender ya que los nuevos elementos le dan una estructura definida y una forma que al solo leer los elementos involucrados se saben las partes que están dentro del sitio.
En cuanto al tag section viene unido a acción de ordenar semánticamente el código, ojo que no viene a sustituir los div, ya que si lo que se busca es dar estilos al código para por ejemplo utilizar efectos javascript conviene tener divs y no section o articles.
En esta página encontré un resumen super bueno de lo que no se debe hacer al usar el tag section y la voy a traducir.

No use section cuando quieras utilizarlo para dar estilos o ejecutar scripting
No lo use si los tag nav, articles o aside es más apropiado
No lo uses si a continuación de abrir la etiqueta no viene un título

En resumen un interesantenuevo tag con el que se pueden construir sitios más semanticamente correctos.

Espero les sirva

saludos tuto

HTML 5

admin — Tue, 01 Jun 2010 02:24:37 +0000

La del tìtulo es una palabra que ultimamente está muy famosa, si no me creen dense una vuelta por twitter o alguna otra red social y se darán cuenta que desde que los navegadores comenzaron a soportar esta nueva versión del lenguaje de etiquetas que da forma a nuestra querida Web, esta misma se revolucionó con todas las nuevas alternativas y las cosas que se podían lograr. Esto unido al hecho de que CSS3 también apareció en acción hace muy poco, hace que las alternativas de crear sitios más complejos pero a la vez con mas alternativas de entregar la información de muchas más maneras, motiva a la gente que está detrás de la creación de estas aplicaciones. Es por este motivo que he decidido repasar la mayor parte de la especificación de la W3C sobre HTML 5, me comprometo a hacerlo con ejemplos que dejen más claro el uso de cada uno de los nuevos elementos y también trataré de introducir un poco de css3 y javascript para que vean algunas de las cosas que se pueden lograr.
Espero mañana tener el primer review

saludos tuto

Encontrar ids repetidos en html

admin — Sat, 20 Mar 2010 18:44:46 +0000

En muchas oportunidades al escribir html nisiquiera podemos ver el resultado final de nuestros trabajos, por ejemplo si trabajas con trozos de html que al final se unen con códigos de otros desarrolladores y muchas veces no tenemos idea de los nombres que les pusieron a los tag html. Esto se complica más aún cuando tenemos que realizar algo con javascript sobre estos elementos que se han creado, por lo tanto, nuestros scripts no funcionarán.
A mí en mi trabajo me ocurre con mucha frecuencia así que escribí un pequeño script en js que te dá un alert con un resumen del estado de ids de tu html, para esto solo linkea esta dirección en tu html y al recargar la página te dará el resultado del análisis.

PLAIN TEXT

JavaScript:

En los próximos días linkearé el source por si quieren verlo

Espero les sirva

saludos tuto

Container para marcas de google maps

admin — Tue, 09 Mar 2010 01:59:21 +0000

Este post es debido a un enojo que tuve una véz. Me gusta mucho la orientación a objetos y estaba utilizando la api de google maps. El problema surgía al momento de tener un container con todos los marcadores que tenía en el mapa( en el cliente claro está) y despues de darme cuenta que lo que se suponía era la solución de google estaba deprecada, decidí ir por mi cuenta y crear una pequeña clase. Es algo super sencillo y que se vale de la clase Hash de Mootools y tiene como único objetivo tener algo más ordenado.
Aquí va el código

LA CLASE

PLAIN TEXT

JavaScript:

function containerMarcas(){
this.cont = new Hash();
this.add = function(key,marca){
this.cont.include(key,marca);
}
this.rm = function(key){
this.cont.erase(key);
}
this.getLen = function(){
return this.cont.getLength();
}
this.setNombreMarca = function(key,nombre){
var mar = this.cont.get(key);
mar.setNombre(nombre);
this.cont.set(key,mar);
}
this.setDescripcionMarca = function(key,des){
var mar = this.cont.get(key);
mar.setDescripcion(des);
this.cont.set(key,mar);
}
}

Un ejemplo de uso

PLAIN TEXT

JavaScript:

var container = new containerMarcas();
container.add(k,m);

Shell de Mootools

admin — Tue, 09 Mar 2010 00:49:51 +0000

Hoy Mootools nuevamente me ha sorprendido, debo reconocer que tengo un cierto "amor" por este framework . Estoy hablando de una shell que te permite ir probando tus scripts antes de subirlos o solamente para testear.
Si quieres probar esta maravilla entra aquí

saludos tuto

Comparacion de String con Javascript

admin — Thu, 17 Dec 2009 03:26:10 +0000

Una de las cosas raras que me ha pasado con js fue una comparación de string.

Para los que han programado en otros lenguajes mas o menos "modernos" saben que uno puede saber si un string es mayor que otro solo colocando la expresion "string1 > strin2" o "string1 < string2", esto en sí debería devolver 1 o 0 dependiendo de los strings ingresados. Yo pensaba que esta "regla" también se respetaba para js, GRAN ERROR SEÑOR, osea, no es TAN error, porque como siempre hay excepciones a la regla.

En firefox me funcionaba, en chrome y en ie6 no.

Ahora la solución.

Cachureando por ahi y por alla, recordando funciones de otros lenguajes(java más especificamente) llegue a una página en la que implementó la función "compareTo", la cuál por ejemplo en java existe. Lo que hace esto es comparar caracter por caracter el unicode de cada uno y entregando el resultado. Con esto se dejan de lado los errores (que pienso que es donde se marean los navegadores) que se pueden producir por caracteres extraños, acentos por ejemplo, mayúsculas u otra cosa.

Vamos al código

PLAIN TEXT

JavaScript:

function compareTo( s )
{
var len1 = this.length;
var len2 = s.length;
var n = ( len1 );
for( i = 0 ; i )
{
var a = this.charCodeAt( i );
var b = s.charCodeAt( i )
if( a != b )
{
return( a - b );
}
}
return( len1 - len2 );
}
String.prototype.compareTo = compareTo;

Lindo no

Cualquier duda o sugerencia no dudes en comentar

Saludos tuto

Cosas raras de javascript

admin — Thu, 17 Dec 2009 03:07:55 +0000

Son las 11 de la noche y recién pude resolver un error de js que me tuvo desde las 8 de la tarde. Es por esta razón y otras que he decidido crear esta categoría en este blog y documentarlar para que le sirvan a alguien que este "pasando" por lo mismo.

Espero les sirva y los disfruten