Javascript
youtube facebook twitter

JAVASCRIPT;El dinamismo

El HTML , lenguaje de marcado base para la elaboracion de paginas web y cuyo uso nos permite describir la estructura y el contenido en forma de texto y complementar la informacion con imagenes;No siempre es suficiente por el estado de pasividad que lo caracteriza.Despues de crear una pagina con HTML puro y colocarla en la web,el visitante puede solo leerla y pulsar en los enlaces,queda pues muy limitada su "participacion".Es entonces cuando recurrimos a las hojas de estilo en cascada (CSS) y aprovechando sus caracteristicas dotamos nuestra pagina HTML de un dinamismo del que carecia y damos a nuestros usuarios la sensacion de poder variar,girar,mover etc.varios elementos de nuestro website usando para ello el cursor.Pero a pesar del vertiginoso avance y del gran arraigo de las hojas de estilo en cascada (CSS) sus ventajas no son soportadas por todos los navegadores y aun debemos esperar un poco para que la W3C declare su total estandarizacion.

En este punto incursionamos en el JAVASCRIPT el cual nos permite crear aplicaciones orientadas a su funcionamiento en internet; Con JAVASCRIPT termina la era de las paginas estaticas,dando paso a las paginas HTML dinamicas,que procesan la entrada del usuario y que son capaces de gestionar datos usando objetos especiales,archivos y bases de datos.Se pueden construir aplicaciones que varian dependiendo de las necesidades del administrador.

Javascript cliente

Engloba el nucleo del lenguaje y algunos elementos como por ejemplo,una serie de objetos predefinidos que solo son relevantes para la ejecucion de javascript en el contexto de un cliente web.Lo realmente extraordinario del codigo javascript para clientes es que se integra directamente en las paginas HTML y es interpretado en su totalidad por el cliente web en tiempo de ejecucion.

Javascript servidor

Al igual que javascript cliente,incluye tambien el nucleo del lenguaje y algunos elementos adicionales y objetos predefinidos y funciones necesarias para el correcto funcionamiento en el marco de un servidor.

ESPECTRO recomienda de manera muy personal el aprendisaje de HTML,CSS y luego continuar con el JAVASCRIPT en este mismo orden,pues asi podremos sacarle el mayor provecho y nuestro aprendisaje sera mas facil y completo.


Galeria Javascript/Css

Al parecer ya el espacio no es un problema a la hora de colocar imagenes en nuestra pagina web,la combinacion Javascript/Css nos facilita esta tarea , proporcionandonos una galeria supercompacta y de facil adaptacion a cualquier espacio. Javascript nos proporciona el drag and drop para poder reubicar nuestra galeria donde deseemos, mientras que Css nos da el codigo para la galeria en si. Antes de entrar en los detalles de los codigos tanto javascript como Css , veamos el ejemplo en ejecucion AQUI.


Muy bien , como deciamos el codigo javascript de muy facil adaptacion y comprension es el mismo usado para nuestro DRAG AND DROP , todo es cuestion de adaptar los valores requeridos. En cuanto a nuestro codigo CSS y HTML lo podemos obtener siguiendo nuestro tutorial CSS para la galeria de imagenes.

Para ver el ejemplo en ejecucion pulse AQUI

Como hemos señalado anteriormente el codigo javascript lo utilizamos para aplicar el drag and drop a nuestra galeria de imagenes y por ende poder ubicarla en la posicion que deseemos . Luego continuamos con nuestro codigo Css que es el que le va a dar forma a nuestra galeria , recordando siempre que en el background-image de nuestro codigo debemos colocar la url de la imagen que nos va a servir de fondo. Por ultimo tenemos nuestro codigo Html , que es donde vamos a visualizar los efectos del javascript y css . Pueden copiar y pegar los codigos en ese mismo orden y tendran el efecto deseado; Espero que este tutorial les sea de ayuda, ESPECTRO se despide ,GRACIAS.


DRAG AND DROP

Hay infinidad de aplicaciones interesantes en el lenguaje "JAVASCRIPT", pero no cabe dudas que una de las mas solicitadas y llamativas es el "DRAG AND DROP",esto debido a la sensacion de poder que produce en nuestros usuarios la posibilidad de disponer del orden de algunos elementos de nuestra pagina y acomodarlos a su propio criterio,lo cual al final de cuentas se traduce en mas visitas a nuestro site.

Nuestra intencion en esta ocasion,es mostrarles en una forma sencilla y comprensible como crear e implementar esta aplicacion en sus paginas web,ya sea para arrastrar y soltar divs,imagenes,etc.
Para ver el ejemplo en funcionamiento pulse AQUI.


VIDEO-TUTORIAL

El codigo JAVASCRIPT para nuestro DRAG AND DROP es el siguiente:

<script language="javascript">

ev=e||window.eventa
function nav(){
posicion=0; mov=null; 
//internet explorer
if(navigator.userAgent.indexOf("MSIE")>=0)
{ navegador=0;}
//para los demas navegadores
else {navegador=1;}
}
function noEventos(e){
//evitar que se ejecuten eventos no deseados
if(navegador==0){
e.cancelBubble=true;
e.returnValue=false;
}
if(navegador==1)e.preventDefault();
}
function iniciarMov(e,id){
mov=document.getElementById(id);
//obtengo la posicion del cursor
if(navegador==0){
cursorH=e.clientX+document.documentElement.scrollLeft+
document.body.scrollLeft;
cursorV=e.clientY+document.documentElement.scrollTop+
document.body.scrollTop;

document.attachEvent("onmousemove", enMov);
document.attachEvent("onmouseup", pararMov);
}
if(navegador==1){
cursorH=e.clientX+window.scrollX;
cursorV=e.clientY+window.scrollY;

document.addEventListener("mousemove",enMov,true);
document.addEventListener("mouseup",pararMov,true);
}
elInicioH=parseInt(mov.style.left);
elInicioV=parseInt(mov.style.top);
//actualizo posicion del elemento
mov.style.zIndex=++posicion;

noEventos(e);
}
function enMov(e){
var xAhora
var yAhora
if(navegador==0){
xAhora=e.clientX+document.documentElement.
scrollLeft+document.body.scrollLeft;
yAhora=e.clientY+document.documentElement.
scrollTop+document.body.scrollTop;
}
if(navegador==1){
xAhora=e.clientX+window.scrollX;
yAhora=e.clientY+window.scrollY;
}
mov.style.left=(elInicioH+xAhora-cursorH)+"px";
mov.style.top=(elInicioV+yAhora-cursorV)+"px";

noEventos(e);
}
function pararMov(e){
if(navegador==0){
document.detachEvent("onmousemove",enMov)
document.detachEvent("onmouseup",pararMov)
}
if(navegador==1){
document.removeEventListener("mousemove",enMov,true);
document.removeEventListener("mouseup",pararMov,true);
}
}
window.onload=nav
</script>
Y a seguidas nuestro codigo HTML:
<body>
<h1>DRAG AND DROP EN JAVASCRIPT</h1>
<img id="imagen1"src="misfotos.jpg/b1.jpg"
width="150"height="150"style="top:200px; left:300px;
position:absolute;"
onmousedown="iniciarMov(event,this.id)"
onmouseover="this.style.cursor='move'">
<img id="imagen2"src="misfotos.jpg/b2.jpg"
width="150"height="150"
style="top:200px; left:500px; position:absolute;"
onmousedown="iniciarMov(event,this.id)"
onmouseover="this.style.cursor='move'">
</body>

Para ver el ejemplo en funcionamiento pulse AQUI.

Como podemos apreciar el codigo no es muy complicado, y nos da la facilidad de poder agregarlo al elemento que deseemos sin ningun tipo de modificacion.
Es todo por el momento,espero les resulte muy util. ESPECTRO se despide; Gracias


Rollover simple con imagenes

Muchas veces hemos visto en la web como al pasar el cursor sobre una imagen esta cambia por otra,volviendo a la imagen anterior al retirar el cursor, a este interesante efecto se le llama "ROLLOVER" y es tan solo una forma mas del dinamismo que pueden obtener nuestras paginas. Es muy cierto que este mismo efecto se puede lograr de manera mucho mas sencilla y limpia utilizando CSS y no JAVASCRIPT,pero tambien es muy cierto que el saber no ocupa espacio , y es preferible conocer ambas formas y decidir nosotros cual usar basados en nuestro criterio y necesidades, en la seccion CSS de ESPECTRO pueden conseguir el tutorial para el "ROLLOVER CON IMAGENES CSS". Veamos el ejemplo en funcionamiento AQUI.


VIDEO-TUTORIAL

Para la creacion de nuestro codigo,vamos a comenzar por precargar las imagenes a usar,en nuestro caso seis,para tres posiciones ej:

  <script language="javascript" type="text/javascript">
  imagen=new Image(130,130);
  imagenOn=new Image(130,130);
  imagen2=new Image(130,130);
  imagenOn2=new Image(130,130);
  imagen3=new Image(130,130);
  imagenOn3=new Image(130,130);

  imagen.src="misfotos.jpg/b2.jpg";
  imagenOn.src="misfotos.jpg/b1.jpg";
  imagen2.src="misfotos.jpg/html5.jpg";
  imagenOn2.src="misfotos.jpg/css3.jpg";
  imagen3.src="misfotos.jpg/ie.jpg";
  imagenOn3.src="misfotos.jpg/chrome.jpg";
  
  function cambia(nombre,activa){
  document.images[nombre].src=activa.src;}
  <script>

A seguidas el codigo HTML para nuestro rollover:

  <body>
  <h1>ROLLOVER CON IMAGENES</h1>
  <div style="margin-left:230px;margin-top:70px;">
  <a href="#" onclick="returnfalse;"
  onmouseover="cambia('bandera',imagenOn);"
  onmouseout="cambia('bandera',imagen);">
  <img name="bandera" src="misfotos.jpg/b2.jpg"width="130" height="130" border="0">
  </a>
  <a href="#" onclick="returnfalse;"
  onmouseover="cambia('bandera2',imagenOn2);"
  onmouseout="cambia('bandera2',imagen2);">
  <img name="bandera2" src="misfotos.jpg/html5.jpg"width="130" height="130" border="0">
  </a>
  <a href="#" onclick="returnfalse;"
  onmouseover="cambia('bandera3',imagenOn3);"
  onmouseout="cambia('bandera3',imagen3);">
  <img name="bandera3" src="misfotos.jpg/ie.jpg"width="130" height="130" border="0">
  </a>
  </div>
  </body>

REGRESAR ARRIBA