Menú

Mostrar Mensajes

Esta sección te permite ver todos los mensajes escritos por este usuario. Ten en cuenta que sólo puedes ver los mensajes escritos en zonas a las que tienes acceso en este momento.

Mostrar Mensajes Menú

Mensajes - arthusu

Páginas 1 ... 23 24 25 26 27 ... 29
#481
Cursos, manuales y libros / Open VPN
Agosto 23, 2011, 08:27:18 PM
OpenVPN es una solución de conectividad basada en You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login: You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login (Secure Sockets Layer) You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login  Virtual Private Network (red virtual privada), OpenVPN ofrece  conectividad punto-a-punto con validación jerárquica de usuarios y host  conectados remotamente, resulta una muy buena opción en tecnologías You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login (redes inalámbricas EEI You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login) y soporta una amplia configuración, entre ellas You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login. Está publicado bajo la licencia GPL, de software libre.


Usos de las VPN'sLas VPN's se usan generalmente para:
  • Conexión entre diversos puntos de una organización a través de Internet
  • Conexiones de trabajadores domésticos o de campo con IP's dinámicas
  • Soluciones extranet para clientes u organizaciones asociadas con los  cuales se necesita intercambiar cierta información en forma privada  pero no se les debe dar acceso al resto de la red interna.
  • Además brinda una excelente fiabilidad en la comunicación de  usuarios móviles así como también al unir dos puntos distantes como  agencias de una empresa dentro de una sola red unificada.
You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login

Aca un video de la misma empresa para que es y para que sirve:


Ahora vamos a implementar OpenVpn en Windows, aca puedes ver un video de para que funciona y como es facil de registrarte:
Primeramente entras a su sitio oficial el cual es:
You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login
Luego clickeas en la imagen
You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login
Le das en Try it FREE

Ahora te saldra aun lado para registrart, rellenas los datos de la siguiente manera:
Your email: tu email

re-peat your email: repite tu email
new password: tu contraseña
y selecciona Agree to the You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login
y le das en Sign UP

You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login

Ahora ya luego te dira un mensaje que revises tu email y te daran un link al que tienes que ingresar y listo con esto tu cuenta estaria activada.


Ahora para usarlo solo entras a tu cuenta arribita de la pagina:
You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login

ya que entres te dira algo asi como desconectado arribita:

You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login

Le das ahi donde dice Connect y te redigira a otra pagina donde tienes que poner tus datos de nuevo y luego te dara un link para descargar su software openvpn Client lo descargas y lo ejecutas:
You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login

Una ves conectado te saldra el programa en ves de gris en verde indicandote que esta conectado:
You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login

Y si te vas a la pagina te dira que estas conectado:
You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login

Ya ahora si quires puedes checar tus paginas con mayor seguridad, ademas de tambien haber cambiado de ip.
Si quieres checar tu ip y comparar que ya no es la de antes:
You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login
#482
Dudas y pedidos generales / Re:pedido manual joomla
Agosto 20, 2011, 07:45:37 PM
Para este caso te recomiendo videos:
You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login
ahi a la derecha estan las partes que siguen es como un curso y corto ya que esta en youtube, bueno espero que te sirva ;D
#483
Hacking / Todos los diferentes tipos de Hackers, según sus criterios
Agosto 19, 2011, 04:41:59 AM
Todos los diferentes tipos de Hackers, según sus criterios

Por internet encoentre esto que esta bueno  wink

LISTA:

White Hat:
Un hacker de sombrero blanco (del inglés, White Hat), en jerga informática, se refiere a un hacker ético, que se centra en asegurar y proteger los sistemas de Tecnologías de información y comunicación. Estas personas suelen trabajar para diversas empresas de informática.

Black Hat:
Un hacker de sombrero negro (del inglés, Black Hat), se refiere a un hacker no ético (es el contrario del white hat, de ahí el color opuesto hace referencia a la contrariedad de sus ideales) que muestran sus habilidades en informática rompiendo sistemas de seguridad de computadoras, colapsando servidores, entrando a zonas restringidas, infectando redes o apoderándose de ellas, entre otras muchas cosas utilizando sus destrezas en métodos "hacking". También son llamados "crackers".

Grey Hat:
Un hacker de sombrero gris (del inglés, Grey Hat), se refiere a un hacker neutral, puede realizar actividades delictivas o dentro de la ley, este tipo de hacker se destaca muchas veces por "romper" un sistema informático con el único fin de notificar al administrador que su sistema ha sido crackeado, luego se ofrece para reparar su sistema por un módico precio.

Blue Hat:
Un hacker de sombrero azul (del inglés, Blue Hat), se refiere a un hacker fuera de las empresas de consultoría de seguridad informática, que se dedica a probar sistemas en busca de errores para que puedan ser cerrados. Recientemente el término comenzó abarcando a los hackers que trabajan dentro de las consultoras de seguridad, definiendo más concretamente a los blue hat, como los más expertos en la seguridad informática.

Red Hat:
Un hacker de sombrero rojo (del inglés, Red Hat), se refiere a un hacker trabajando dentro de la compañía "Red Hat", en la misma, es responsable de la creación y mantenimiento de las distribuciones del sistema operativo GNU/Linux & Fedora. Este tipo de hacker se caracteriza principalmente por utilizar, promover y mejorar el software libre.
#484
Hacking / Re:Descubre en Cuanto Tiempo se Puede Crackear tu Contraseña
Agosto 16, 2011, 03:25:04 AM
About 6 trillion years xD jaja :P
#485
Tutoriales / Re:crear codigos de barra
Agosto 10, 2011, 04:53:31 PM
no me quedo muy bien que digamos aqui esta mi resultado:
#486
Dudas y pedidos generales / Re:[Consulta] Red SSID
Agosto 09, 2011, 03:36:21 PM
bajate el netstumbler You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login
te dice el nombre de las redes aunque los oculte, saludos =)
#487
Dudas y pedidos generales / Re:[Taller PHP]Duda taller php 2 ejercicio 2
Agosto 05, 2011, 03:19:34 AM
soi nuevo creo que el tuyo es un error en el directorio no lo puedes copiar asi, mira qui te dejo como me quedo el mio aver si puedes ver tu error o algo asi a mi ya me salio bien ai va:

PD: por defecto el txt lo puse como xd.txt  :-\

HTML: taller2_prueba2.html
Código: html5
<!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>Subidor</title>
</head>

<body>
<form action="subidor.php" method="post" enctype="multipart/form-data">
Seleccione el archivo a subir: <input type="file" name="archivo" /><br />
<input type="submit" name="upload" value="Subir!" /><br />
</form>
</body>
</html>


PHP: subidor.php
Código: php
<!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>Documento sin t&iacute;tulo</title>
</head>

<body>
<?php
$ext_permitidas = array('txt');
$tmp = $_FILES['archivo']['tmp_name'];
$name = $_FILES['archivo']['name'];
$ext = pathinfo($name, PATHINFO_EXTENSION);
$dir = 'uploads/';
if(in_array($ext, $ext_permitidas))
{
if(move_uploaded_file($tmp, $dir.$name))
{
echo 'Archivo subido correctamente. <br />';
rename('uploads/xd.txt', 'uploads/xd1.txt');
echo "renombrado correctamente <br />";
}else{
echo 'Hubo un error al subir el archivo.';
}
}else{
echo 'Archivos con la extension '.$ext.' no son permitidos';
}
?>
</body>
</html>


Saludos
#488
Dudas y pedidos generales / Re:[Taller PHP]Duda taller php 2 ejercicio 3
Agosto 05, 2011, 02:00:42 AM
El codigo me quedo asi, paa los que andan en talleres y tienen el mismo problema:

HTML:
Código: html5
<!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>Generar archivos</title>
</head>

<body>
<form action="taller2_prueba3.php" method="post">
Crear archivos y elimarlos juntos con carpeta: <br />
<input type="submit" name="generar" value="Generar" />
</form> 
</body>
</html>


PHP:
Código: php
<!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>Documento sin t&iacute;tulo</title>
</head>

<body>
<?php
mkdir('archivos/');
$tresarchivos = array('uno', 'dos', 'tres');
foreach ($tresarchivos as $archivo) {
if (!fopen('archivos/'.$archivo.'.txt', 'w+')) die('Oh no... No pude crear '.$archivo.'.txt');
}
echo "Archivos Creados.\n";
$archivos = array();
foreach ($archivos as $archivo) {
if (!fclose($archivo)) die('Oh no... No pude cerrar un archivo');
}
echo "Archivos Cerrados.<br />";
$dir = scandir('archivos/');
$numfiles = count($dir);
for($i = 0; $i<$numfiles; $i++)
{
if(@unlink('archivos/'.$dir[$i]))
{
echo 'El archivo '.$dir[$i].' fue borrado correctamente. <br />';
}
}
rmdir('archivos/');
echo "Carpeta eliminada correctamente. <br />"
?>
</body>
</html>


Gracias por todo a th3-822 que me brindo un poco de su ayuda
#489
Dudas y pedidos generales / Re:[Taller PHP]Duda taller php 2 ejercicio 3
Agosto 04, 2011, 08:03:46 PM
@~ Yoya ~

Muchisimas gracias, ahora mismo modificare y gracias por lo de copy() por decirme que cree un buble thanks no lo sabia :P :D
#490
Dudas y pedidos generales / [SOLUCIONADO] [Taller PHP] Duda taller php 2 ejercicio 3
Agosto 04, 2011, 07:05:35 PM
Bueno lo que me pasa es que me salta este error:
Parse error: syntax error, unexpected ';', expecting ')' in C:\AppServ\www\taller\taller2_prueba3.php on line 12
Objetivo de la actividad:
Hacer un script que cree un directorio en donde adentro se generen 3 archivos
de texto (uno, dos y tres) para posteriormente forzar la eliminación del mismo
directorio.

no se que hacer y pues estoy aprendiendo php apenas espero me ayuden, aqui va el codigo html y php:

HTML: taller2_prueba3.html
Código: html5
<!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>Generar archivos</title>
</head>

<body>
<form action="taller2_prueba3.php" method="post">
Crear archivos y elimarlos juntos con carpeta: <br />
<input type="submit" name="generar" value="Generar" />
</form> 
</body>
</html>


PHP: taller2_prueba3.php
Código: php
<!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>Documento sin t&iacute;tulo</title>
</head>

<body>
<?php
mkdir('archivos/');
$tresarchivos= array (
$tresarchivos[0] = fopen('uno.txt','w+');
$tresarchivos[1] = fopen('dos.txt', 'w+'); 
$tresarchivos[2] = fopen('tres.txt', 'w+');
);
copy('$tresarchivos', 'archivos/');
if($tresarchivos == false){
die ('No se han podido crear los archivos');}
?>
</body>
</html>


Espero me puedan ayudar, gracias de antemano y un saludo a todos!
#491
Cursos, manuales y libros / Re:Manual extenso de implementacion de servidores linux(español)
Julio 30, 2011, 02:51:38 AM
O.O muchas gracias bajando... :D
#492
Cursos, manuales y libros / Re:Obtener Vps gratis
Julio 28, 2011, 01:23:44 AM
Muy bueno gracias por el aporte man ahora mismo me creo una :)
#493
Dudas y pedidos generales / Re:Como agrego esto a mi blog?
Julio 22, 2011, 04:19:31 PM
Gracias a los 2 por su ayuda muchas gracias creo que ya esta resueltop :)
#494
Dudas y pedidos generales / [SOLUCIONADO] ¿Cómo agrego Gadget de Facebook a mi blog?
Julio 22, 2011, 03:59:05 PM
bueno es que he estado remodelando el blog un poquito y me gustaria saber como le agrego esto:
You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login
por ejemplo si miran la pagina a la derecha tiene  su pagina de facebook y le puedes poner me gusta!
Bueno yo ya cree una pagina en el facebook para mi blog pero la quisiera agregar a mi blog asi como lo hicieron alli en esa pagina, si me dijeran les agregdeceria muchisimo y gracias de antemano, un Saludo!  ;D
#495
Dudas y pedidos generales / Re:[Taller PHP]Duda taller php 1 ejercicio 4
Julio 18, 2011, 07:19:33 PM
You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login
En estos casos utiliza empty:

Código: php

if(empty($_POST['nombre']))
{
  echo 'Falta el nombre'];
}else{
  echo 'Nombre: '.$_POST['nombre'];
}




Muchas gracias por tu rapida contestacion Xt3mP, gracias master  :P
Aita ya me agarro tenias algo de mas... esto: ]
en donde esta Falta nombre tenia de mas ] pero el code si esta bien :P solo por si alguien queria copiarlo ps y le pasa lo mismo :P
#496
Dudas y pedidos generales / [SOLUCIONADO] [Taller PHP] Duda taller php 1 ejercicio 4
Julio 18, 2011, 06:50:59 PM
Bueno el ultimo ejercicio en este php es el que tu quieras siempre y cuando uses todo lo del manual, bueno yo estoy haciendo un tipo sistema de comentarios xD!, aca va el code no se qu esta mal:

El HTML:
Código: html5
<!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>Todos los temas empleados UFFFF tendre que usar el FUAAAAA</title>
</head>

<body>
<form action="comentador.php"  method="post">
<b>DEJA TU COMENTARIO....</b><br />

<b>Nombre:</b><br />
<input type="text" name="nombre" /><br />
<b>Email:</b> <br />
<input type="text" name="email"/>
<select name="email2">
<option value="@hotmail.com">@hotmail.com</option>
<option value="@gmail.com">@gmail.com</option>
</select><br />
<b>Mensaje:</b> <br />
<textarea name="mensaje"></textarea>
<br />
<input type="submit" value="Enviar comentario" name="enviar" />
<input type="reset" value="Limpiar" name="limpiar" />
</form>
</body>
</html>



el php, comentador.php
Código: php
<!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>Documento sin t&iacute;tulo</title>
</head>

<body>
<?php
if(isset($_POST['nombre']))
{
 echo 'Comentario escrito por lalala';
}else{
 echo 'Escribe un nombre';
}
?>
</body>
</html>


Pasa lo siguiente escribo el nombre y me sale Comentario escrito por lalala y no escribo nombr para que me salga el del else pero me sale Comentario escrito por lalala
osea que el else no me funciona, quisiera saber mi error desde ya gracias!

PD: Todavia no esta terminado me quede en el nombre :P
#497
Dudas y pedidos generales / Re:[Taller PHP]Duda taller php 1 ejercicio 2
Julio 18, 2011, 02:20:03 AM
jaja termine el codigo gracias a xt3mp aca lo dejo:
prueba2.html
Código: html5
<html>
<head><title></title></head>
<body>
<form action="prueba2.php" method="POST">
Nombre: <input type="text" name="nombre"><br />
Edad: 
<select name="edad" >
<option value="20a40">20 a 40</option>
<option value="19">19</option>
<option value="18" selected="selected">18</option>
<option value="17">17</option>
</select><br />
Correo: <input type="text" name="correo"> 
<select name="correo1">
<option>@hotmail.com</option>
<option>@gmail.com</option>
</select> <br />
Pais: 
<select name="pais">
<option value="Argentina">Argentina</option>
<option value="España">España</option>
<option value="Mexico" selected="selected">Mexico</option>
<option value="Colombia">Colombia</option>
</select><br />
Ciudad: <input type="text" name="ciudad"><br />
<input type="submit" name="enviar" value="Enviar!"><br />
</form>
</body>
</html>


prueba2.php
Código: php
<html>
<head><title></title></head>
<body>
<?php
$nombre=$_POST['nombre'];
echo  "Tu nombre es <b> $nombre </b>";
echo "<br />";
$edad=$_POST['edad'];
echo "Tu edad es <b> $edad </b>";
echo "<br />";
$correo=$_POST['correo'];
$correo1=$_POST['correo1'];
echo "Tu correo es: <b> $correo </b> <b> $correo1 </b>";
echo "<br />";
$pais=$_POST['pais'];
echo "Tu pais es <b> $pais </b>";
echo "<br />";
$pais=$_POST['ciudad'];
echo "Tu pais es <b> $ciudad </b>";
echo "<br />";
//Termine el codigo XD porfin jajajaja :P
?>
</body>
</html>
#498
Dudas y pedidos generales / Re:[Taller PHP]Duda taller php 1 ejercicio 2
Julio 18, 2011, 01:51:02 AM
You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login
Pusiste el punto y coma ( ; ) antes de las comillas y no despúes:

Código: php

<?php
$nombre=$_POST['nombre'];
echo "Tu nombre es $nombre";
$edad=$_POST['edad'];
echo "Tu edad es $edad";
$correo=$_POST['correo'];
if($correo = "@gmail.com" or "@hotmail.com" ){
echo "Tu correo es $corre";
}else{
echo "El correo tiene que ser hotmail";
}
?>


Saludos.
Gracias Xt3mP por tu rapida respuesta jahjaha las comillas te cagan el codigo jhajaha ala ora ya me fijo bien uno aprende de sus errores.!
#499
Dudas y pedidos generales / [SOLUCIONADO] [Taller PHP] Duda taller php 1 ejercicio 2
Julio 18, 2011, 01:39:14 AM
Bueno me estoy inciando en php aca con los geniales manuale de xt3mp pero lo que pasa es que me sale un error Parse error: syntax error, unexpected T_VARIABLE, expecting ',' or ';' in C:\AppServ\www\taller\prueba2.php on line 7
y no se cual es el error aca va el code:

HTML:
Código: html5
<html>
<head><title></title></head>
<body>
<form action="prueba2.php" method="POST">
Nombre: <input type="text" name="nombre"><br />
Edad: 
<select name="edad" >
<option value="20a40">20 a 40</option>
<option value="19">19</option>
<option value="18" selected="selected">18</option>
<option value="17">17</option>
</select><br />
Correo: <input type="text" value="@hotmail.com" name="correo"> <br />
Pais: 
<select name="pais">
<option value="1">Argentina</option>
<option value="2">España</option>
<option value="3" selected="selected">Mexico</option>
<option value="4">Colombia</option>
</select><br />
Ciudad: <input type="text" name="ciudad"><br />
<input type="submit" name="enviar" value="Enviar!"><br />
</form>
</body>
</html>


y el PHP:
Código: php
<html>
<head><title></title></head>
<body>
<?php
$nombre=$_POST['nombre'];
echo  "Tu nombre es $nombre;"
$edad=$_POST['edad'];
echo "Tu edad es $edad;"
$correo=$_POST['correo'];
if($correo = "@gmail.com" or "@hotmail.com" ){
echo "Tu correo es $correo;"
}else{
echo "El correo tiene que ser hotmail;"}
?>
</body>
</html>


PD: no lo he terminado todo por que me quede en la parte de poder arreglar el error, grcias por su atencion, saludos!
#500
Zona Webmaster / [JavaScript][AVANZADO] Trabajar con DOM desde Firefox e Internet Explorer
Julio 16, 2011, 07:05:12 PM


Para un proyecto del trabajo me veo submergido en la creación dinámica de el contenido de una página web. Para realizar este trabajo, me decanté a trabajar con DOM accediendo via Javascript. Sé que existen librerías muy completas crossbrowser que realizan fácilmente el trabajo requerido, soltando código compatible para (casi) todos los navegadores, pero yo soy de ésos que prefiere jugar a un nivel más bajo (siempre que no se me compliquen las cosas en exceso).

Sabiendo que Firefox respeta mejor los estándares que Internet Explorer, llevo ya la costumbre de desarrollar para Firefox y luego adecuar el código para que funcione para Internet Explorer... pero esta vez la cosa se me ha ido de las manos...

He encontrado varios problemas relacionados con las diferencias en que el DOM es tratado por ambos navegadores, con lo que he podido observar con mis propios ojos que no siempre Firefox respeta el estándar o que la forma de trabajar de Internet Explorer acaba siendo muy sui-generis.

En este artículo presento un ejemplo básico: una página con un DIV que sirve como base para que un código Javascript monte una tabla "modelo" mediante DOM, para ilustrar las diferencias que he encontrado.

Introducción

Primero de todo, deberíamos empezar por generar nuestra página base que va a soportar toda la mecánica de DOM / Javascript que vamos a montar. Voy a proponer una estructura sencilla:
Código: html5

    <html>
    <head>
    <title>Ejemplo de DOM</title>
    </head>
    <body>
    <span>Comenzar</span>
    <div id="enlace"></div>
    </body>
    </html>


Ok, con ésto tenemos ya una página normal válida con un div que nos servirá como enlace, es decir, todo lo que hagamos lo añadiremos a este DIV. Además, tenemos un SPAN que usaremos como botón para comenzar el proceso.

Vale, empecemos. Necesitamos teclear Javascript, así que necesitamos crear un espacio para él. Lo vamos a meter dentro del HEAD, justo debajo del TITLE:
Código: html5

    <head>
    <title>Ejemplo de DOM</title>
    <script language="JavaScript">
     
    </script>
    </head>


Entonces, vamos a hacer que el SPAN sea el evento que empiece todo el proceso. Para ello, le pondremos unos atributos y algun estilo para que se nos presente como un link:

Código: html5
    <span style="cursor:pointer; text-decoration: underline;" onclick="javascript:dibujarTabla();">Comenzar</span>


Con ello tendremos que el texto "Comenzar" estará subrayado y al poner el ratón encima el puntero cambiará al famoso dedo. Además, le hemos dicho que cuando éste sea clicado ejecute una función Javascript llamada "dibujarTabla". Así que ahora tenemos que escribir una función dentro del espacio Javascript que hemos creado en el HEAD. Yo siempre empiezo con un alert() para comprobar que de momento todo funciona. Luego lo quitaremos, eh?:

Código: javascript
   function dibujarTabla()
    {
    alert('Parece que funciona');
    }


Al ejecutar la página, si clicamos en el texto subrayado nos saldrá una ventanita de diálogo con el texto "Parece que funciona" y un botón "Aceptar" que al clicarlo cerrará el diálogo. Ok. Hasta aquí todo bién. Ya tenemos el esqueleto funcionando. Ahora ya podemos empezar con el ejemplo de DOM.

Creación de la tabla vía DOM.

Para empezar, qué tiene una tabla de toda la vida? Pues un tag TABLE que encierra varios tags TR que son las filas, y cada TR encierra varios tags TD que son las columnas. Pues vamos allá. Eliminamos el alert() y tecleamos las instrucciones del DOM para la creación de la tabla. Para los que no estén acostumbrados al DOM, diré (así por encima) que se toma una página HTML como un XML, es decir, un conjunto de elementos que contienen hijos y éstos a su vez contienen otros hijos. Así que la construcción de una tabla se basa en la declaración de el padre, luego el hijo, luego el hijo lo añadimos al padre, y así sucesivamente:

   
Código: javascript
 function dibujarTabla()
    {
    TABLA = document.createElement('table');
    FILA = document.creaateElement('tr');
    COLUMNA1 = document.createElement('td');
    TEXTO1 = document.createTextNode('celda 1');
    COLUMNA1.appendChild(TEXTO1);
    COLUMNA2 = document.createElement('td');
    TEXTO2 = document.createTextNode('celda 2');
    COLUMNA2.appendChild(TEXTO2);
    FILA.appendChild(COLUMNA1);
    FILA.appendChild(COLUMNA2);
    TABLA.appendChild(FILA);
    document.getElementById('enlace').appendChild(TABLA);
    }


Hemos hecho lo siguiente: primero creamos el elemento tabla, luego el elemento fila, luego un elemento columna1, luego un elemento de tipo texto (con algo de texto dentro), y ligamos el elemento de texto a la columna. Luego hacemos otra columna repitiendo los pasos de la columna. Luego hemos ligado las columnas a la fila, luego la fila a la tabla y luego (y aquí está la madre del cordero) la tabla al DIV que habíamos llamado "enlace".

Si ahora nos vamos al Firefox veremos que al darle al link "Comenzar" nos genera una tabla de dos columnas justo debajo (en realidad lo crea donde esté situado el DIV). Muy bién. Y si lo probamos en el Internet Explorer? Pues no funciona!!!

Cómo podemos hacer para que funcione? Pues después de mucho rebuscar me encontré con que las especificaciones del objeto de tabla, en el W3C, mandan unos elementos agrupadores llamados THEAD, TBODY y TFOOT. A la hora de parsear una página normal parece que no son necesarios, pero la implementación de Internet Explorer requiere obligatoriamente que un elemento de éstos esté creado y funcionando entre el elemento TABLE y el elemento TR. Consulta las especificaciones del elemento en la página del W3C para más info.

Total, no sé si se debe a que la implementación de Internet Explorer está mal hecha no permitiendo escribir tablas via DOM sin TBODY o que el Firefox peca de elástico permitiendo algo que la W3C no recomienda, pero el caso es que sin un tag de éstos en Internet Explorer no funciona. Así que deberemos modificar la creación de la tabla para contemplar éste tag:

   
Código: javascript
 function dibujarTabla()
    {
    TABLA = document.createElement('table');
    TBODY = document.createElement('tbody');
    FILA = document.creaateElement('tr');
    COLUMNA1 = document.createElement('td');
    TEXTO1 = document.createTextNode('celda 1');
    COLUMNA1.appendChild(TEXTO1);
    COLUMNA2 = document.createElement('td');
    TEXTO2 = document.createTextNode('celda 2');
    COLUMNA2.appendChild(TEXTO2);
    FILA.appendChild(COLUMNA1);
    FILA.appendChild(COLUMNA2);
    TBODY.appendChild(FILA);
    TABLA.appendChild(TBODY);
    document.getElementById('enlace').appendChild(TABLA);
    }


Ahora ya tenemos éste código compatible con Internet Explorer y Firefox. El código de la página quedaría de la siguiente forma:

Código: html5
    <html>
    <head>
    <title>Ejemplo de DOM</title>
    <script language="JavaScript">
    function dibujarTabla()
    {
    TABLA = document.createElement('table');
    TBODY = document.createElement('tbody');
    FILA = document.creaateElement('tr');
    COLUMNA1 = document.createElement('td');
    TEXTO1 = document.createTextNode('celda 1');
    COLUMNA1.appendChild(TEXTO1);
    COLUMNA2 = document.createElement('td');
    TEXTO2 = document.createTextNode('celda 2');
    COLUMNA2.appendChild(TEXTO2);
    FILA.appendChild(COLUMNA1);
    FILA.appendChild(COLUMNA2);
    TBODY.appendChild(FILA);
    TABLA.appendChild(TBODY);
    document.getElementById('enlace').appendChild(TABLA);
    }
    </script>
    </head>
    <body>
    <span style="cursor:pointer; text-decoration: underline;" onclick="javascript:dibujarTabla();">Comenzar</span>
    <div id="enlace"></div>
    </body>
    </html>


Añadiendo CSS

Para los que trabajamos con HTML amenudo estamos acostumbrados definir páginas de estilos que especifiquen los conjuntos de colores, fuentes y estilos varios en vez de irlos declarando en cada elemento. Es una forma de trabajar reconocida y aconsejada, además que realmente resulta muy práctica a la larga, pues te ahora mucho tiempo en las modificaciones típicas a posteriori.

Pero trabajar con clases CSS también comporta problemas cuando necesitamos que el DOM las defina en ambos navegadores. Pero no corramos tanto... vamos a definir una clase simple de estilo y vamos a intentar agregarla a nuestro script. Para ello debemos abrir un espacio dentro del HEAD que nos permita definir clases de estilos. Y allí crearemos una clase "negrita" y el estilo que queremos que tengan todos los elementos que adquieran de ésta clase:

   
Código: html5
 <style>
    .negrita
    {
    font-weight: bold;
    }
    </style>


Ok, ya tenemos la clase definida. Usando el sentido común, sabremos que para definir una clase a un elemento le debemos agregar a ese elemento un atributo llamado class e igualarlo al nombre de la classe CSS que queramos. Así que si el atributo se llama class, deberíamos hacer algo así:
Código: javascript

COLUMNA1.setAttribute('class','negrita');


Vale, vale, voy a poner todo el trozo javascript para que no nos liemos:

   
Código: javascript
function dibujarTabla()
    {
    TABLA = document.createElement('table');
    TBODY = document.createElement('tbody');
    FILA = document.creaateElement('tr');
    COLUMNA1 = document.createElement('td');
    COLUMNA1.setAttribute('class','negrita');
    TEXTO1 = document.createTextNode('celda 1');
    COLUMNA1.appendChild(TEXTO1);
    COLUMNA2 = document.createElement('td');
    COLUMNA2.setAttribute('class','negrita');
    TEXTO2 = document.createTextNode('celda 2');
    COLUMNA2.appendChild(TEXTO2);
    FILA.appendChild(COLUMNA1);
    FILA.appendChild(COLUMNA2);
    TBODY.appendChild(FILA);
    TABLA.appendChild(TBODY);
    document.getElementById('enlace').appendChild(TABLA);
    }


Ahora que ya lo tenemos agregado, vamos al Firefox y ejecutamos: funciona perfecto ;) Entonces, vamos al Internet Explorer y... no hay estilo!! Cómo? mmmm... Qué toca ahora? Googlear. Finalmente encuentro una página dónde, a parte del problema anterior, se presenta este mismo problema con los CSS. La explicación que se da es que el Internet Explorer mapea la instrucción

Citarelemento.setAttribute(nombre,valor)

por

Citarelemento[nombre]=valor

Además, como class es una palabra reservada en Javascript, se mapea className en vez de class para el atributo class. Así que tenemos que cambiar la construcción del setAttribute:

Código: javascript
   function dibujarTabla()
    {
    TABLA = document.createElement('table');
    TBODY = document.createElement('tbody');
    FILA = document.creaateElement('tr');
    COLUMNA1 = document.createElement('td');
    COLUMNA1.setAttribute('className','negrita');
    TEXTO1 = document.createTextNode('celda 1');
    COLUMNA1.appendChild(TEXTO1);
    COLUMNA2 = document.createElement('td');
    COLUMNA2.setAttribute('className','negrita');
    TEXTO2 = document.createTextNode('celda 2');
    COLUMNA2.appendChild(TEXTO2);
    FILA.appendChild(COLUMNA1);
    FILA.appendChild(COLUMNA2);
    TBODY.appendChild(FILA);
    TABLA.appendChild(TBODY);
    document.getElementById('enlace').appendChild(TABLA);
    }


Vamos a verificar que en Internet Explorer funciona. Ok, ahora ya sale el texto en negrita. Y sólo por curiosidad... vamos a probarlo en Firefox... Ahora no sale en Firefox!! Cagundena! Qué podemos hacer?? Pues hay dos posibilidades. La primera es liarnos la manta a la cabeza y distinguir qué navegador es el que está ejecutando el código, y para cada navegador realizar una cosa u otra. Ésta es una buena solución pero a yo intento evitarlo siempre que no es absolutamente necesario. Encuentro bastante barroco un código simple cuando se empieza a llenar de condicionales de si es un navegador u otro. La otra opción, no tan elegante pero completamente funcional, es definir las dos órdenes, la que funciona para Firefox y la que funciona para Internet Explorer. La orden que un navegador no entienda la va a obviar, así que adelante:

   
Código: javascript
 function dibujarTabla()
    {
    TABLA = document.createElement('table');
    TBODY = document.createElement('tbody');
    FILA = document.creaateElement('tr');
    COLUMNA1 = document.createElement('td');
    COLUMNA1.setAttribute('className','negrita');
    COLUMNA1.setAttribute('class','negrita');
    TEXTO1 = document.createTextNode('celda 1');
    COLUMNA1.appendChild(TEXTO1);
    COLUMNA2 = document.createElement('td');
    COLUMNA2.setAttribute('className','negrita');
    COLUMNA2.setAttribute('class','negrita');
    TEXTO2 = document.createTextNode('celda 2');
    COLUMNA2.appendChild(TEXTO2);
    FILA.appendChild(COLUMNA1);
    FILA.appendChild(COLUMNA2);
    TBODY.appendChild(FILA);
    TABLA.appendChild(TBODY);
    document.getElementById('enlace').appendChild(TABLA);
    }


Así que tenemos el archivo final de la siguiente manera:

   
Código: html5
 <html>
    <head>
    <title>Ejemplo de DOM</title>
    <script language="JavaScript">
    function dibujarTabla()
    {
    TABLA = document.createElement('table');
    TBODY = document.createElement('tbody');
    FILA = document.creaateElement('tr');
    COLUMNA1 = document.createElement('td');
    COLUMNA1.setAttribute('className','negrita');
    COLUMNA1.setAttribute('class','negrita');
    TEXTO1 = document.createTextNode('celda 1');
    COLUMNA1.appendChild(TEXTO1);
    COLUMNA2 = document.createElement('td');
    COLUMNA2.setAttribute('className','negrita');
    COLUMNA2.setAttribute('class','negrita');
    TEXTO2 = document.createTextNode('celda 2');
    COLUMNA2.appendChild(TEXTO2);
    FILA.appendChild(COLUMNA1);
    FILA.appendChild(COLUMNA2);
    TBODY.appendChild(FILA);
    TABLA.appendChild(TBODY);
    document.getElementById('enlace').appendChild(TABLA);
    }
    </script>
    <style>
    .negrita
    {
    font-weight: bold;
    }
    </style>
    </head>
    <body>
    <span style="cursor:pointer; text-decoration: underline;" onclick="javascript:dibujarTabla();">Comenzar</span>
    <div id="enlace"></div>
    </body>
    </html>


Setando atributos a los elementos

Seguimos con la gama de problemas. Hasta ahora, el único atributo que hemos setado es el referente a las clases CSS. Pero existen varios más, como el colspan de una celda por ejemplo. El sentido común nos dicta que si los atributos se setan con .setAttribute, la construcción normal para un colspan sería:

CitarCOLUMNA3.setAttribute('colspan','2');

Pues bién, en Firefox funciona perfectamente pero en Internet Explorer no (para variar). Cómo lo hacemos para Internet Explorer? Pues de la siguiente manera:

CitarCOLUMNA3.colSpan=2;

que funcionará tanto para Internet Explorer como para Firefox. Prestad atención a la 'S' mayúscula del colSpan.

Pero, en cambio, hay otros atributos que se setan perfectamente en ambos navegadores usando la sintaxi .setAttribute('atributo', 'valor'), como el size de un INPUT de texto o su value. Increible pero cierto. Conclusión? En principio se debería usar la construcción .setAttribute, y si se ve que no funciona, probar con la sintaxi .atributo ... es lo que hay...

Más cosas. Resulta que Internet Explorer hay una limitación sobre el atributo name en los INPUTs, tal como describe la MSDN:

CitarThe NAME attribute cannot be set at run time on elements dynamically created with the createElement method. To create an element with a name attribute, include the attribute and value when using the createElement method.

Esta cuestión está ámpliamente discutida en You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login y You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login (seguid también el hilo de los comentarios) y proponen usar una función que intente setar el nombre al estilo del Internet Explorer y si falla que lo sete al estilo de Firefox, para poder cumplir ambos requerimientos:

Código: javascript
    function createElementWithName(type, name) {
    var element;
    // First try the IE way; if this fails then use the standard way
    if (document.all) {
    element =
    document.createElement('<'+type+' name="'+name+'" />');
    } else {
    element = document.createElement(type);
    element.setAttribute('name', name);
    }
    return element;
    }



Setar eventos a los elementos

Los eventos tampoco se libran. Si se quieren usar los eventos, en Firefox podemos seguir la tónica habitual:

Citarelemento.setAttribute("onclick","javascript:mi_funcion('"+param_texto+"',"+param_numero+")");

Pero claro, en Internet Explorer tampoco funciona... En Ovillo plantean una posible solución, pero no me ha funcionado. Personalmente, ahora mismo me estoy peleando con ésto. Si encuentro alguna solución la postearé.

Fuente: You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login
Páginas 1 ... 23 24 25 26 27 ... 29