por Kalvin Manson
septiembre 20, 2010 en Tips y codigos por Kalvin Manson
Antes de comenzar quiero aclarar que usar iframes es una técnica que no es muy buena para el SEO o la navegación de los sitios web, de manera que recomiendo que sea utilizado solo en casos realmente necesarios y que procures no utilizarlos para mostrar contenidos centrales. Lee el resto de esta entrada →
por Kalvin Manson
septiembre 15, 2010 en Tips y codigos por Kalvin Manson
menu desplegable CSS
Hoy en día los menús desplegables son muy populares, en especial por el ahorro de espacio, y la comodidad que le ofrecen al usuario, ademas en la mayoría de los casos resulta ser una buena opción para el SEO debido a su la organización del HTML como elementos de lista.
Sin embargo cuando buscamos en Internet un menú desplegable para implementar en nuestro sitio web casi siempre damos con opciones basadas en javascript, lo que no es muy optimo para SEO y consume mas ancho de banda, ademas de ser difícil su instalación y configuración. Es por eso que decidí escribir este pequeño tutorial para dar una opción a la construcción de menús desplegables pero basados únicamente en CSS (sin javascript). Lee el resto de esta entrada →
por Kalvin Manson
junio 17, 2010 en Tutriales por Kalvin Manson
Muchas veces quise implementar un carrusel de imágenes similar al que esta en la portada de Tupale y simultaneamente usar el script de Sexy LightBox sin embargo debido al uso de las librerías jQuery generalmente entran en conflicto y dejan de funcionar.
Pues me puse a hacer la tarea y aquí les tengo el carrusel jQuery compatible con Sexy LightBox pero solo la versión que también utiliza jQuery, no he podido hacerlo con la versión Mootolz.
Comencemos primero con el codigo HTML, el siguiente código debe ir en tu Header entre las etiquetas <head> y </head>. Los archivos js que se mencionan en el código se pueden descargar al final de este articulo.
<script src=”jquery.js” type=”text/javascript”></script> <script src=”carousel.js” type=”text/javascript”></script>
<script type=”text/javascript”>// <![CDATA[
stepcarousel.setup({ galleryid: 'carousel', beltclass: 'belt', panelclass: 'panel', autostep: {enable:true, moveby:1, pause:3000}, panelbehavior: {speed:500, wraparound:true, persist:true}, statusvars: ['statusA', 'statusB', 'statusC'], contenttype: ['external'] })
// ]]></script>
Luego este código que debes colocar en tu body o cuerpo de la pagina, entre las etiquetas <body> y </body>
<div id=”carousel”>
<div>
<div><p><img src=”img1.png” width=”52″ height=”52″ />Este carousel es una demostración</p></div><div><p><img src=”img2.png” width=”52″ height=”52″ /> tutorial de <a href=”http://tupale.org”>Tupale.org</a>.</p></div><div><p><img src=”img1.png” width=”52″ height=”52″ />Este carousel es una demostración</p></div><div><p><img src=”img2.png” width=”52″ height=”52″ /> tutorial de <a href=”http://tupale.org”>Tupale.org</a>.</p></div><div><p><img src=”img1.png” width=”52″ height=”52″ />Este carousel es una demostración</p></div><div><p><img src=”img2.png” width=”52″ height=”52″ /> tutorial de <a href=”http://tupale.org”>Tupale.org</a>.</p></div><div><p><img src=”img1.png” width=”52″ height=”52″ />Este carousel es una demostración</p></div><div><p><img src=”img2.png” width=”52″ height=”52″ /> tutorial de <a href=”http://tupale.org”>Tupale.org</a>.</p></div></div></div><div id=”carousel”> <div> <div> <p><img src=”img1.png” width=”52″ height=”52″ />Este carousel es una demostración</p> </div> <div><p><img src=”img2.png” width=”52″ height=”52″ /> tutorial de <a href=”http://tupale.org”>Tupale.org</a>.</p> </div> <div> <p><img src=”img1.png” width=”52″ height=”52″ />Este carousel es una demostración</p> </div> <div><p><img src=”img2.png” width=”52″ height=”52″ /> tutorial de <a href=”http://tupale.org”>Tupale.org</a>.</p> </div> <div> <p><img src=”img1.png” width=”52″ height=”52″ />Este carousel es una demostración</p> </div> <div><p><img src=”img2.png” width=”52″ height=”52″ /> tutorial de <a href=”http://tupale.org”>Tupale.org</a>.</p> </div> <div> <p><img src=”img1.png” width=”52″ height=”52″ />Este carousel es una demostración</p> </div> <div><p><img src=”img2.png” width=”52″ height=”52″ /> tutorial de <a href=”http://tupale.org”>Tupale.org</a>.</p> </div> </div></div>
Ahora entramos con la parte de personalización, el CSS, a traves de este código podrás modificar la apariencia y tamaño de tu carrusel para que se acomode a tus necesidades. Recuerda que es código CSS.
#carousel {
position: relative; /* Necesario */
overflow: hidden; /* Necesario */
height: 60px;
}#carousel .belt {
position: absolute; /* Necesario */
left: 0;
top: 0;
margin:0 10px 10px 0;
}#carousel .panel {
width:265px;
float: left; /* Necesario */
overflow: hidden;
margin: 0px;
padding:7px;
}
Listo, ya tienes tu carrusel, pero faltan los botones para avanzar y retroceder el carrusel, esto lo haces con una función javascript llamada desde un enlaces que se lo puedes asignar a cualquier elemento, aqui te dejo el codigo de cada uno de los botones.
<a href=”javascript:stepcarousel.stepBy(‘carousel’, 1)”>adelante</a>
<a href=”javascript:stepcarousel.stepBy(‘carousel’, -1)”>atras</a>
Los archivos JS necesarios puedes descargarlos aqui:
Listo ya tienes tu Carrusel compatible con Sexy LightBox usando la libreria de javascript jQuery.
por Kalvin Manson
marzo 18, 2010 en Tips y codigos por Kalvin Manson
Este tip lo publico simplemente porque pase horas en la busqueda de algo asi y no lo encontre finalmente, con las uñas y sin mucho entendiemiento de Javascript logre esto que me ha funcionado de maravilla en muchisimos navegadoras.
Para comenzar lo que queremos exactamente es crear un alert al cerrar o abandonar una pagina, este alert debe confirmar si el usuario desea realmente salir o quedarse en la pagina actual, igual que lo hace wordpress cuando estas editando un post y te vas sin guardar. xD
Este es el ejemplo de la ventana alert creada con estejavascript.
Confirmacion de javascript
El codigo javascript es muy sensillo, simplemente tienes que usar la funcion onbeforeunload y ejecutar algun tipo de funcion de confirmacion.
Codigo javascript ventana de confirmacion al cerrar pagina:
<script type=”text/javascript”>
window.onbeforeunload = function exitAlert(){var textillo = “Los datos que no se han guardado se perderan.”;return textillo;}</script><script type=”text/javascript”> window.onbeforeunload = function exitAlert() { var textillo = “Los datos que no se han guardado se perderan.”; return textillo;}
</script>
El objetivo de hacer este javascript es para un script mucho mas grande en el que estoy trabajando que publicare mas adelante.
