Archive for the “Javascript” category — Page 2
Sebastian Barria • 7th Mar 2010 • Javascript, Mootools, Tutoriales
Este es uno de varios minitutoriales donde explicaré lo escencial de Mootools.
Está enfocado a ir aprendiendo funcionalidades específicas, que nos permitan comenzar a aprovechar esta excelente librería desde el primer momento.
En este caso, hablare acerca de como seleccionar objetos según su ID, o clase, para poder aplicar acciones específicas sobre ellos.
Porsupuesto, que lo primero que deberían hacer es bajar la librería Mootools…; crear una página para trabajar con ella y llamar al archivo dentro de la etiqueta HEAD para que esté disponible para usarse. Una vez hecho esto, veamos de que nos ofrece
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, 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 • 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 • Javascript, Seguridad, Web
Por defecto, JavaScript no posee funciones automáticas para recibir variables mediante la URL. Por lo mismo, es necesario crear una función que las reciba, de manera tal que podamos trabajar con ellas.
La función
Para recibir variables mediante JavaScript, sería necesario utilizar una función como la siguiente, la cual debería ir al principio de la página (dentro de la etiqueta HEAD):
<script type="text/javascript">
query=window.location.search.substring(1);
q=query.split("&");
vars=[];
for(i=0;i<q.length;i++){
x=q[i].split("=");
k=x[0];
v=x[1];
vars[k]=v;
}
</script>
De esta manera, todas las variables quedarían almacenadas en un array asociativo, del cual podríamos obtener todos los datos en cualquier minuto.
Un ejemplo…
Suponiendo que
Sebastian Barria • 7th Mar 2010 • Javascript, Web
Para poer desarrollar páginas en equipo es necesario poder subdividirse el trabajo, encargándose cada persona de una parte distinta de la página; y para esto, es necesario que cada uno de los desarrolladores modifique los archivos de manera independiente.
Como no es posible trabajar tres personas simultáneamente sobre un mismo archivo, es posible recurrir al uso de AJAX y subdividir los archivos, como se muestra en el ejemplo siguiente:
Ejemplo de desarrollo web en equipo…
Explicado de manera simple, la idea es subdividir las partes de la página en archivos HTML separados, para poder trabajar sobre ellos. La página al
Sebastian Barria • 7th Mar 2010 • HTML, Javascript, Seguridad, Web
Existen muchas maneras de proteger las direcciones de correo electrónico que aparecen en nuestros sitios para que no sean detectadas por los “robots caza emails”, y por supuesto, la mayoría de estas alternativas utiliza imágenes para protegerlas.
A continuación veremos algunas alternativas que se utilizan según las necesidades de cada tipo de sitio, para proteger las direcciones de correo, ya sea las propias, o las de nuestros visitantes.:
Imágenes generadas manualmente…
Una de las soluciones básicas al pensar en crear una imágen de una dirección de correo es la de generar manualmente en algún editor de imágenes la dirección de
