Propuesta Depuración de Códigos, No Librerias!

gepd · #1 (**permalink**) 19/06/2008, 06:07

Depuracion de códigos.
[Un poco de Historia] xD
Éste último tiempo me he dado cuenta que depurar y hacer que un códigos ea compatible con todos los navegadores es muy necesario, es por eso que me he decido a iniciar una propuesta con la cual podamos depurar códigos especialmente de Ajáx y Javascript, ya que la soluciones la tienen usuarios distintos pero podemos aplicarlas y hacer que la tengamos a manos todos, otro de los propósito por el cual quiero comenzar ésta propuesta es por que exísten muchas librerías con soporte para varios navegadores, pero muchas veces sólo se utiliza una función de las 20 que trae, lo que hace que nuestra página sea un poco más lenta, y claro los que tienen adsl no lo notan, pero todavía existe gente que usa modem, y también creo que es agradable vanegar por paginás rápidas, de hecho me agrada utilizar google por lo mismo, si bien hay que tener en cuenta la cantdad de recursos destinado para el buscador, tambien no podemos negar que su codigo de fuente y sus algoritmos son bastante avanzados...

Funcion muestra mensaje con Fondo oscuro y Transparente

Código:

function tag(id)    {return document.getElementById(id);}
function crear(e)    {return document.createElement(e);}
function generaDiv(ide,color,opacity,ancho,alto,msj){
    var navegador=1;
    if(navigator.userAgent.indexOf("MSIE")>=0) navegador=0;
        var layer = crear('div');
        with(layer){
            id=ide;
            style.width='100%';
            style.height='100%';
            style.backgroundColor=color;
            style.position='absolute';
            style.top=0;
            style.left=0;
            style.zIndex=100;
            if(navegador==0) style.filter='alpha(opacity='+opacity+')';
            else style.opacity=opacity/100;
        }
        document.body.appendChild(layer);
        
        var wds=crear('div');
        with(wds){
            id=ide+ide;
            style.position="absolute";
            style.width=ancho+"px";
            style.height=alto+"px";
            style.top="50%";
            style.left="50%";
            style.marginLeft=(-ancho/2)+"px";
            style.marginTop=(-alto/2)+"px";
            style.lineHeight=alto+"px"; //éste parametro centra el texto verticalmente
            style.textAlign="center";
            style.backgroundColor="#FFFFFF";
            style.zIndex=200;
            innerHTML=msj;
        }
        var div = tag(ide);
            div.appendChild(wds);        
}

De ésta forma llamaríamos la función.

Código:

<a href="javascript:generaDiv('fon','#000000','80',400,60,'Mensaje!');">Click</a>

Vuelvo a explicar fon seria el nombre que le asignaríamos al div de fondo, el div de mensaje se llamaria fonfon [idid] luego viene el valor de opacidad (funcional en firefox y en IE) luego el Ancho, Alto del div que muestra el mensaje, finalmente el mensaje en el cual se puede incluir etiquetas html, ya que lo incluye con innerHTML.

Aún no he comprobado algo que me dijieron sobre las capas en IE6, si no funciona avisarme para buscar alguna solución. por ahora és todo

Ver Ejemplo

Saludos.

GatorV · #2 (**permalink**) 19/06/2008, 08:47

Tema trasladado a Javascript.

gepd · #3 (**permalink**) 20/06/2008, 11:33

Bueno a pesar de que en un principio es todo javascript pienso que no debieron haber movido ésto, ya que más adetan todo, será ajax... pero bueno siguiendo con el código, aqui ya muestr a un mensaje en medio de la página, aún no está centrado pero continúa el proceso...

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Ejemplo 1 Ajax estilo ligthBox - Foros del Web</title>
<style>
#capa
{    
    filter:alpha(opacity=65);
    opacity:0.65;
    -moz-opacity: 0.65;
    background-color: #000;
    z-index:1;
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    display: none;
    z-index:100;
}
#mensaje
{    
    border:1px solid #000;
    background-color:#FFFFFF;
    position:absolute;
    width:410px; 
    height:145px;
    top:50%;
    left:50%;
    margin-top:-72px;
    margin-left:-205px;
    display:none;
    z-index:200;
}
</style>
<script>
function on (div){
    contenedor = document.getElementById(div).style.display = 'Block';
    msj = document.getElementById('mensaje');
    msj.style.display = 'Block';
    msj.innerHTML = 'Mensaje...';
      
}
</script>
</head>
<body>
<a href="#" onclick="on('capa');">Activar fondo</a>
<div id="mensaje">&nbsp;</div>
<div id="capa">&nbsp;</div>
</body>
</html>

saludos

stock · #4 (**permalink**) 20/06/2008, 11:57

Cita:

Iniciado por gepd

...otro de los propósito por el cual quiero comenzar ésta propuesta es por que exísten muchas librerías con soporte para varios navegadores, pero muchas veces sólo se utiliza una función de las 20 que trae, lo que hace que nuestra página sea un poco más lenta, y claro los que tienen adsl no lo notan, pero todavía existe gente que usa modem...

Existen frameworks que te dan la oportunidad de descargar los componentes que te interesan, por ejemplo "Mootools" y "Ext Js", no es necesario que descargues todos los componentes, solo los que tu desees.

http://mootools.net/download
http://extjs.com/products/extjs/build/

saludos

stock · #5 (**permalink**) 20/06/2008, 12:00

Cita:

Iniciado por gepd

... incluso con la solución para los archivos flash, ya que los div siempre quedarán "debajo" de ellos, pero según lei una vez éxiste sólución la cual por el momento no sé...

realmente el problema del div que queda por debajo de los SWF, no es un problema de javascript, si no del reproductor de macromedia, aqui te dejo un link con el análisis del problema y la solución.

http://www.crysfel.com/index.php/200...-y-el-z-index/

saludos

gepd · #6 (**permalink**) 20/06/2008, 12:08

muchas gracias stock creo que me falto agregar que el propósito de ésta iniciativa no es digamos una campaña anti librerias, el primer proposito es aprender, ya que para muchos es mejor crear sus propios codigos que buscar librerías además aprender las soluciones, sirve mucho más para cuando se te presenta otro problema, de todas formas creo nadie está obligado a hacerlo de ésta forma, yo solo quiero aprender un poquito más de lo que sé, de hecho todo lo que se de ajáx y css lo he aprendido aquí leyendo en distintos post, ahora quiero aplicar un poco de lo que he aprendido en un sólo post

saludos y gracias nuevamente

gepd · #7 (**permalink**) 08/07/2008, 00:58

Ahora que tengo un poco más de tiempo y encontrandome con un código que dá el primer paso para crear un div transparante de fondo a partir de una funcion javascript, lo he modificado, y ahora ya crea el fondo y un div en el centro de fondo blanco con un mensaje a continuacion les dejo el código:

Código:

function generaDiv(id,color,opacity,ancho,alto,msj){
    var navegador=1;
    if(navigator.userAgent.indexOf("MSIE")>=0) navegador=0;
        var layer=document.createElement('div');
            layer.id=id;
            layer.style.width='100%';
            layer.style.height='100%';
            layer.style.backgroundColor=color;
            layer.style.position='absolute';
            layer.style.top=0;
            layer.style.left=0;
            layer.style.zIndex=100;
        
        var wds=document.createElement('div');
            wds.id=id+navegador;
            wds.style.position="absolute";
            wds.style.width=ancho+"px";
            wds.style.height=alto+"px";
            wds.style.top="50%";
            wds.style.left="50%";
            wds.style.marginLeft=(-ancho/2)+"px";
            wds.style.marginTop=(-alto/2)+"px";
            wds.style.textAlign="center";
            wds.style.backgroundColor="#FFFFFF";
            wds.style.zIndex=200;
            wds.innerHTML=msj;
    if(navegador==0)
        layer.style.filter='alpha(opacity='+opacity+')';
    else
        layer.style.opacity=opacity/100;
        document.body.appendChild(layer);
    var div = document.getElementById(id);
        div.appendChild(wds);
}

Ésta sería la función.

Código:

generaDiv('fon','#000000','50',400,200,'Mensaje');

Aquí un ejemplo de como utilizarlo, fon es el nombre que le daremos a nuestro div, luego viene el color de fondo, la opacidad, ancho, alto, y el mensaje que queremos que aparezca. Por defecto el segundo div su nombre sería según el navegador.

En explorer: fon0
Firefox:font1

pueden cambiar ésto en ésta linea para modificar ésto:
wds.id=id+navegador;

Funcionando, en Firefox 2, 3 IE 7,8 Supongo que funcionará tambien en Opera.

Estoy buscando como poder crear el div que contiene el mensaje dentro de otro div para poder centrarlo verticalmente, si hay sugerencias avisarme para hacer las respectivas pruebas...

Saludos
Fuente de la función original

caricatos · #8 (**permalink**) 08/07/2008, 01:32

Hola:

Sobre que esté en ajax o javascript, mientras sea javascript, creo que es lo que corresponde, y si piensas en ajax, tal vez cuando llegue esa ocasión, creo que será mejor crear un tema nuevo en ese foro

Y ya que empiezas el tema con tanto entusiasmo, te haré algunas correcciones:
el estilo es "block" (display)... siempre en minúsculas, las mayúsculas solo deben usarse en los nombres compuestos (cuando llevan guiones) desde javascript, eliminando el guión y capitalizando la letra siguiente (porque con los guiones se podría confundir con operaciones de restas)...

Sobre el código, te recomiendo que implementes algunos "alias" para simplificarlo, te paso unos pocos que yo suelo usar:

Código:

/* ----------  Definición de alias... -------------- */
function tag(id)	{return document.getElementById(id);}
function crear(e)	{return document.createElement(e);}
function texto(t)	{return document.createTextNode(t);}
function insEvent(elemento, ev, f)	{
	if (window.addEventListener)	elemento.addEventListener(ev, f, false)
	else				elemento.attachEvent("on" + ev, f);
}
function borEvent(elemento, ev, f)	{
	if (window.addEventListener)	elemento.removeEventListener(ev, f, false)
	else				elemento.detachEvent("on" + ev, f);
}

/* --------------------------------------------------------------------------

Otro consejo para simplificar el código es el uso de with()... basándome en tu código:

Código:

var layer=document.createElement('div');
with(layer)	{
	id = id; // este tipo de líneas es preferible evitarlas... yo cambiaría la cabecera
	with(style)	{
		width = '100%';
		height = '100%';
		backgroundColor = color;
		position = 'absolute';
		top = 0;
		left = 0;
		zIndex = 100;
	}
}

Saludos

caricatos · #9 (**permalink**) 08/07/2008, 01:38

Hola:

Por cierto, para respetar estándares es conveniente evitar innerHTML, usando en su lugar document.createTextNode, y añadiéndolo con appendChild...

Con los "alias" propuestos:

Código:

elemento = crear("div");
mensaje = texto("mensaje...");
elemento.appendChild(mensaje);

Saludos

buzu · #10 (**permalink**) 08/07/2008, 02:19

Buena técnica esa de los alias caricatos, no la conocía. Con respecto a lo del innerHTML y los métodos DOM para crear elementos llevas mucha razón. Sin embargo, hay ocasiones en las que es necesario usar innerHTML por cuestiones de comodidad y legibilidad en el código. innerHTML esta bien difundido y aun que no es estándar es posible usarlo sin arriesgar tanto. De cualquier modo, eso lo digo solo para informar ya que también prefiero los métodos del DOM para generar contenido al vuelo.

Saludos.

ZiTAL · #11 (**permalink**) 08/07/2008, 05:28

hola gente, hace tiempo intente sin exito crear una ventana modal con html y css, quiza me podais ayudar a depurarlo usando javascript:

http://www.forosdelweb.com/f4/ventan...ml-css-588423/

funcionar funciona, pero no queda del todo bien :(

gepd · #12 (**permalink**) 08/07/2008, 10:00

caricatos gracias por toda esa información, ahora estoy haciendo pruebas y "agarrando" esas costumbres a la hora de programar con javascript, ya que no es mi fuerte, pero quiero a llegar a dominarlo bien, sobre si va en ajax o javascript ya está superado jajaja, a veces a uno de la da garrotera xD pero no hay problemas.
Hay una cosa que no entiendo me escribes sobre la propiedad "block" en "display", pero no logro entender donde lo debo corregir, y donde fué que lo escribí en mayuscula.
las funciones insEvent y borEvent no las entendí tampoco me podrias explicar su uso?

Cita:

Por cierto, para respetar estándares es conveniente evitar innerHTML, usando en su lugar document.createTextNode, y añadiéndolo con appendChild...

una duda, appendChild abrirá ése texto como "hijo"? respetarará las propiedades que yo le coloque?

Creo que se está logrando el objetivo de mi post que es aprender a la hora de programar, y evitar errores...
ahora estoy trabajando para ver como queda...

ZiTAL Podrías decirnos que es lo que no funciona del código, yo lo he probado y funciona bien.

Saludos y Gracias de Ante Mano

guybrush78 · #13 (**permalink**) 08/07/2008, 10:26

La pena es que está muy bien el código, pero por ahora un gran porcentaje de gente usa IE6, en los que el Z-index no vale para nada, se ponen los div por encima por orden de escritura en el código.

Otro tema peliagudo respecto a flash es que en LINUX no puede ponerle un fondo transparente, así de simple, por lo que saldrá un fondo horripilantemente blanco, por lo que el truco es en coger y poner un div con una background exacto al que tend´ria sin haber nada ahí, y SIMULA la transparencia.

caricatos · #14 (**permalink**) 08/07/2008, 10:44

Hola:

Hay distintos tipos de nodos de los que los más importantes serían las etiquetas y los nodos de texto... si al usar innerHTML lo que insertas es texto plano, es lo mismo usar createTextNode, pero si insertas etiquetas html la inserción tendría que respetar el árbol de nodos que se quiere insertar, y por supuesto sus atributos y estilos.

Sobre insEvent y borEvent, la utilidad es insertar y borrar eventos.

Saludos

gepd · #15 (**permalink**) 08/07/2008, 10:49

caricatos corrigiendo lo que me has dicho he modificado el código pero no logro que me cree los div, a continuacion te dejo la modificación.

Código PHP:

  function tag(id)    {return document.getElementById(id);}
function crear(e)    {return document.createElement(e);}
function texto(t)    {return document.createTextNode(t);}
function generaDiv(ide,color,opacity,ancho,alto,msj){
    var navegador=1;
    if(navigator.userAgent.indexOf("MSIE")>=0) navegador=0;
        var layer = crear('div');
        with(layer){
            id=ide;
            style.width='100%';
            style.height='100%';
            style.backgroundColor=color;
            style.position='absolute';
            style.top=0;
            style.left=0;
            style.zIndex=100;
            if(navegador==0) style.filter='alpha(opacity='+opacity+')';
            else style.opacity=opacity/100;
        }
            document.body.appendChild(layer);
        var wds=crear('div');
        with(wds){
            id=ide+ide;
            style.position="absolute";
            style.width=ancho+"px";
            style.height=alto+"px";
            style.top="50%";
            style.left="50%";
            style.marginLeft=(-ancho/2)+"px";
            style.marginTop=(-alto/2)+"px";
            style.backgroundColor="#FFFFFF";
            style.textAlign="center";
            style.zIndex=200;
            innerHTML=msj;
        }
        var div = tag(ide);
            div.appendChild(wds);

luedo de probar y probar, vi que no puedo hacer
with(style){
parametro;
}
al ahcerlo deja de funcionar el codigo.

así que hasta el momento va así

Saludos

ZiTAL · #16 (**permalink**) 08/07/2008, 12:08

mejor si abro un nuevo hilo, el problema es que en IE necesito del css de html y body y no me gusta :S, suerte ;)

gepd · #17 (**permalink**) 08/07/2008, 14:08

ZiTAL Puedes continuar en el mismo post con tu pregunta para no duplicar la informacion, ya que es un poco confuzo luego cuando se busca ésta y tener que dar por 3 o más post con lo mismo. sólo es una sujerencia, en todo caso revisaré el code a ver sit e puedo ayudar.

Con respecto al que tratamos más arriba, he estado intentando centrar el texto de éste verticalmente pero no lo he conseguido, ya que al crear un segundo div para el texto, éste no tiene una altura definida,ya que mi intencion es que el código haga ésto automaticamente al poner una, dos o tres lineas de mensaje, si a alguien le surge una idea de como hacerlo se los agradezco.

intente luego de haber agregado el texto tomar la altura, pero me da Nan, si no le he definido altura, y si le doy por defecto altura 0, luego al agregar texto y ver si me da una nueva altura sólo me da la altura que he asignado por defecto.

saludos

gepd · #18 (**permalink**) 09/07/2008, 16:58

Creo que éste sería el código Final, en donde he conseguido luego de buscar y buscar centrar el texto, al igual que el div. sin necesidad de colocar un div en cada página que desees colocar un mensaje con fondo transparente

Código PHP:

  function tag(id)    {return document.getElementById(id);}
function crear(e)    {return document.createElement(e);}
function texto(t)    {return document.createTextNode(t);}
function generaDiv(ide,color,opacity,ancho,alto,msj){
    var navegador=1;
    if(navigator.userAgent.indexOf("MSIE")>=0) navegador=0;
        var layer = crear('div');
        with(layer){
            id=ide;
            style.width='100%';
            style.height='100%';
            style.backgroundColor=color;
            style.position='absolute';
            style.top=0;
            style.left=0;
            style.zIndex=100;
            if(navegador==0) style.filter='alpha(opacity='+opacity+')';
            else style.opacity=opacity/100;
        }
        document.body.appendChild(layer);
        
        var wds=crear('div');
        with(wds){
            id=ide+ide;
            style.position="absolute";
            style.width=ancho+"px";
            style.height=alto+"px";
            style.top="50%";
            style.left="50%";
            style.marginLeft=(-ancho/2)+"px";
            style.marginTop=(-alto/2)+"px";
            style.lineHeight=alto+"px"; //éste parametro centra el texto verticalmente
            style.textAlign="center";
            style.backgroundColor="#FFFFFF";
            style.zIndex=200;
            innerHTML=msj;
        }
        var div = tag(ide);
            div.appendChild(wds);        
}

De ésta forma llamaríamos la función.

Código:

<a href="javaScript:generaDiv('fon','#000000','80',400,60,'Mensaje!');">Click</a>

Vuelvo a explicar fon seria el nombre que le asignaríamos al div de fondo, el div de mensaje se llamaria fonfon [idid] luego viene el valor de opacidad (funcional en firefox y en IE) luego el Ancho, Alto del div que muestra el mensaje, finalmente el mensaje en el cual se puede incluir etiquetas html, ya que lo incluye con innerHTML.

Aún no he comprobado algo que me dijieron sobre las capas en IE6, si no funciona avisarme para buscar alguna solución. por ahora és todo