Archive for the “HTML” category
Sebastian Barria • 22nd Apr 2010 • Bugs, CSS, HTML, Javascript
Generalmente publico artículos y desarrollos míos, pero esta vez es algo así como uns servicio de utilidad pública. Esta vez puedo dar fe de que es la solución definitiva, pues lo probé y funcionó todo a la perfección.
Navegando por ahí encontré el sitio de DillerDesign, donde publican su “experimento” DD_belatedPNG. El tema es que esa librería de JavaScript REALMENTE soluciona el famoso problema de los PNG transparentes.
Anteriormente yo había publicado un artículo al respecto…, pero la solución que planteaba, si bien funcionaba, no servía para cuando existían fondos transparentes que se repetían. En fin. Esta librería
Sebastian Barria • 7th Mar 2010 • HTML, Web
Al momento de hacer una página web, siempre deberemos considerar una serie de etiquetas y, por supuesto, usarlas de la manera correcta, en el momento correcto. Para eso, acá les dejo un listado con todas las etiquetas que debemos usar y para que sirve cada una.
San google apreciará mucho que utilicemos correctamente cada una de estas etiquetas y probablemente nos servirá bastante a la hora de posicionarnos.
Como siempre lo he dicho: si vamos a poner un título, no hay que utilizar p, sino que utilizar la etiqueta H1.
a…: Origen o destino de un hiperenlace (puede
Sebastian Barria • 7th Mar 2010 • CSS, HTML, Javascript, Teoría, Web
Si ya hablé de pautas para diseño Web, esta vez le toca al desarrollo (maqueteo).
Al momento de maquetear un sitio Web es necesario fijarse en varios aspectos, que no siempre son atendidos por los desarrolladores. Algunas veces por descuido, otras por no saber.
Acá les dejo este checklist que puede servir de ayudamemoria para los que maquetean. La idea no es hacer una buena maqueta, sino una profesional:
Código HTML
El código debe ser limpio y claro…. Debe estar hecho con DIVs y no tablas. La idea es que se usen las etiquetas correctas en los lugares
Sebastian Barria • 7th Mar 2010 • Diseño, HTML, Teoría, Web, Wordpress
Hace un tiempo, a Soranji (mi novia) le dijeron: “necesito que diseñes una plantilla de WordPress”. Pero: que implica hacer una plantilla de WordPress?. Son 3 páginas?…son 5 páginas?. Hay sitios hechos con WordPress que son enormes y otros que son pequeños.
Generalmente los clientes no tienen idea de lo que es WordPress o de lo que es una plantilla para WordPress. Ellos sólo la piden, y cuando les preguntas tampoco sabes realmente que ofrecerles.
Acá vamos a hablar un poco del tema.
1.0: Lo básico…
Los elementos más básicos de una plantilla de WordPress son los posts. Por lo
Sebastian Barria • 7th Mar 2010 • HTML, Javascript, Web
A partir de la función mostrada en el post anterior, se me ocurrió hacer una función que limitara la cantidad de caracteres de un área de texto (textarea).
Como muchos ya deben saber, los textarea no permiten el uso del atributo maxlength, que poseen los inputs de texto. Pero para simular eso vamos a recurrir a la siguiente funcion:
function maxLength(e,obj,num) {
k = (document.all) ? e.keyCode : e.which;
if (k==8 || k==0){ return true; }
else{ return obj.value.length<num; }
}…
Para aplicar esta función, es necesario incluir lo siguiente en cualquier textarea:
Sebastian Barria • 7th Mar 2010 • HTML, Javascript, Web
Esta función hecha en javascript permite prohibir ingresar ciertos caracteres en un input de texto. En este caso específico, no deja ingresar caracteres que no sean números.
La escencia de la función es simple: recibe un evento; comprueba si es un número y devuelve una respuesta.
Sin más preámbulo, la función es la siguiente:
function isNumber(e) {
k = (document.all) ? e.keyCode : e.which;
if (k==8 || k==0) return true;
patron = /\d/;
n = String.fromCharCode(k);
return patron.test(n);
}
¿Cómo usarla?…
Como decía anteriormente, esta función debe recibir un evento. En este caso es necesario llamarla
Sebastian Barria • 7th Mar 2010 • CSS, HTML, Web
Introducción
Existen dos tipos de problemas con los archivos PNG en Internet Explorer 6:
- Cuando el PNG se utiliza como imagen (img src…)
- Cuando el PNG se utiliza como fondo de un DIV.
En ambos casos, es necesario aplicar algún fix para IE6. Hablo de “en ambos casos” porque cada uno de ellos se debe tratar de manera independiente.
Acá están las soluciones para ambos casos.
Como vimos en otro post, lo primero que se debe hacer es incluir los archivos necesarios para Internet Explorer 6. Para esto, dentro de la etiqueta head… hay que escribir el siguiente código:
Sebastian Barria • 7th Mar 2010 • CSS, HTML, Javascript, Web
Aunque suene poco humilde el título de este post, a mi parecer creo haber encontrado el mejor método para centrar DIVs horizontal y verticalmente en una página web, sin usar tablas ni position: absolute. Este método puede sonar poco ortodoxo, pero sin embargo, funciona a la perfección en todos los navegadores.
Los métodos actuales…
Para centrar los DIVs horizontalmente nunca ha habido problemas: definir un ancho al DIV y luego utilizar la propiedad margin: auto; para que se centre. El problema está en la vertical.
El primer método que todos se imaginarán el uso de position: absolute; top: 50%; margin-top:
Sebastian Barria • 7th Mar 2010 • CSS, HTML, Web
A esta altura de la vida, si no puedes hacer un sitio que sea compatible con IE6 (o que al menos se vea ALGO en ese navegador), no puedes decir que “sabes hacer sitios web”.
Si ya es una tortura trabajar con sitios que sean compatibles con varios navegadores a la vez, cuando se suma IE6, la cosa se pone cuesta arriba. Pero bueno, si hay que hacerlo, hagámoslo bien.
Este es un tip que nunca está de más en la biblioteca de tips de cualquier desarrollador web.
Condiciones exclusivas de Internet Explorer…
Algo rescatable de los navegadores IE, es
Sebastian Barria • 7th Mar 2010 • CSS, HTML, Javascript, Web
Esta es una manera automática para hacer elementos con bordes redondeados. El resultado será como el que se observa en la imágen de ejemplo.
La idea es que el elemento permita ser expandible según sea el largo de su contenido. Para este ejemplo, utilizaremos un blockquote.
El objetivo es aplicarle, mediante CSS el borde redondeado superior a este elemento. Adicionalmente, le daremos la propiedad position:relative:
blockquote{
background: #E2F0F9 url(../img/borde_redondeado_superior.gif) top center no-repeat;
position: relative;
}
Una vez hecho esto, mediante JavaScript, seleccionaremos todos los elementos blockquote …de la página, y a cada uno de ellos, le insertaremos (a
