Archive for the “Web” category — Page 3
Sebastian Barria • 7th Mar 2010 • Teoría, Web
Pongámos una situación hipotética: un cliente te dice “necesito actualizar mi sitio web: quiero agregar esto, quitar esto y mover esto”. Entonces tu le entregas un presupuesto (uno bastante justo con respecto al cobro: ni muy caro ni muy barato) pero el cliente te responde “mmm, me parece muy caro”.
Entonces en ese minuto uno se pregunta: “¿será que para este cliente su sitio web es un gasto más que una inversión?”. Porque si el sitio fuera una inversión, el dinero que pague por mejorar su sitio será devuelto con creces (o por lo menos devuelto) por el mismo sitio…
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 • Diseño, Teoría, Web
Muchas veces, al intentar maquetear diseños de sitios Web nos encontramos con varias sorpresas.Para evitar esto, es necesario generar una buena comunicación entre el equipo de diseño y el de desarrollo HTML.
El objetivo de este artículo es conseguir que un diseñador pueda enviarle un archivo PSD a un desarrollador Web que se encuentre en otro país, ciudad u oficina, y que la maqueta que reciba de vuelta sea exactamente igual a lo que el diseñador espera recibir.
Planteo esta pauta para que los diseñadores sepan que cosas deben y pueden entregar para hacer más fácil la comunicación entre ellos…
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
Sebastian Barria • 7th Mar 2010 • Javascript, Web
¿Qué son los bookmarklets?
Los bookmarklets son trozos de programación hechos en JavaScript, que son contenidos en un Link. Se aplican de la misma manera en que se aplica javascript a un link normal en un sitio web (a href=”javascript:funcion”), pero la diferencia es que éstos pueden ser agregados como marcadores en nuestros navegadores.
Re:CSS
Navegando por ahí…, encontré este bookmarklet, por David Schontzler, que permite recargar los estilos CSS de una página, sin tener que recargar la página completa.
Su utilidad es ENORME para quienes desarrollamos sitios web, sobre todo cuando se trabaja con archivos directamente en el
