Archive for March, 2010 — Page 3
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 • PHP
Aveces, cuando se desarrollan sitios web con bases de datos, es necesario poder exportar el contenido de una de las bases de datos a un archivo para que se pueda descargar.
En este caso, explicaré como se puede exportar información en un archivo de excel.
Como generar el archivo
Primero, deberás crear un archivo PHP en blanco. Llamémoslo usuarios.php….
Dentro de este archivo, se debe leer el contenido de la base de datos y mostrarlo en formato de tabla. Algo como esto:
Una vez que tengamos nuestra página (una página en blanco que contiene solamente una tabla de excel),
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 • Actionscript, Flash, Seguridad
Paseándome en un foro, encontré algo que ni siquiera se me había ocurrido hacer: limitar los inputs de texto en flash, para que sólo acepten ciertos caracteres específicos definidos por mi.
Con este truco, podemos evitar que los usuarios intenten ingresar números en las casillas donde se les pregunta el nombre, o mejor aún, evitar que los hackers intenten ingresar algún código malicioso para que sea procesado por el archivo que recibirá los datos enviados.
La manera de hacerlo es muy simple. Se debe agregar la siguiente línea:
inputEmail.restrict = "A-Za-z0-9.@_";
…
El ejemplo anterior, limita a la casilla “inputEmail” (ese
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
Sebastian Barria • 7th Mar 2010 • Bugs, CSS, Web
Las pseudo-clases podrían definirse como “extensiones” a los estilos CSS, que permiten aplicar estilos diferentes a algunos elementos específicos. Los ejemplos más conocidos y utilizados, son :hover y :visited.
Otras de las pseudo clases conocidas permiten tomar los primeros elementos de algunas etiquetas y aplicarle ciertos estilos (como :fist-child, o :first-letter). El problema de estos, es que algunos no funcionan correctamente (o simplemente no funcionan) en nuestro querido amigo Internet Explorer 6.
Al aplicar la pseudo-clase :first-letter… en CSS, es posible darle propiedades a la primera letra de algún elemento. Por ejemplo, la siguiente clase haría que
Sebastian Barria • 7th Mar 2010 • HTML, Javascript, Web
Navegando por ahí, me encontré con una “(in)utilidad” bastante curiosa: un javascript para poder editar, en el mismo navegador, todo el contenido de cualquier página web.
Lo más increíble de todo, es que funciona en todos los navegadores, incluso en IE6.
La forma de ejecutarlo es muy simple: una vez cargada la página que se quiere editar, se debe escribir en la barra de direcciones lo siguiente:
javascript:document.body.contentEditable='true'; document.designMode='on'; void 0
…y listo: la página se convierte en editable. Los textos se pueden modificar, y las imágenes se pueden mover.
Y no es tan inútil…
Aunque en la práctica,
Sebastian Barria • 7th Mar 2010 • PHP, Web, XML
Introducción
Entre muchos de los servicios que ofrece Gmail, está la posibilidad de recibir un feed con los correos no leídos de nuestra bandeja de entrada (más información aquí).
Basándonos en la información que encontré en este post, y utilizando la librería simpleXml de PHP, podremos crear fácilmente un notificador de correos nuevos en nuestra bandeja de entrada.
Lo primero que debemos hacer es crear la conexión con el servicio de feed RSS de Gmail. Para esto, utilizaremos la librería curl… de PHP:
Esta vez no publicaré el código, pues está el archivo de ejemplo para descargar, que
