- No hagas suposiciones: no pienses que el usuario tendrá el javascript activado o que usará un navegador adecuado.
- Usa IDs y relaciones entre elementos: para no depender de un HTML mal estructurado y que el javascript sea imposible de realizar, utiliza IDs para acceder a los elementos con los que se quiere tratar y busca elementos que faciliten acceder a otros elementos.
- Utiliza estilos: en vez de modificar los estilos de los elementos HTML mediante Javascript, usa clases CSS que modifiquen los estilos, y mediante Javascript se le puede añadir la clase a un elemento superior.
- Comprende el navegador y a los usuarios: debes pensar cómo funciona un navegador, no sobre saturar su comportamiento (abuso de drag&drop, eventos, …). Además debes pensar qué espera el usuario que haga el navegador, y respetarlo.
- Comprende los eventos: los eventos no solo corresponden a un objeto, sino a los elementros hijo que contiene. Así se pueden realizar eventos sobr un único elemento y no tener que modificar los demás.
- Respeta el código de otros: seguro que a parte de tu código existe algún otro que has añadido, por lo que deberás programar teniendo en cuenta que hay que evitar conflicto entre funciones.
- Después de ti vendrá otro: es muy frecuente que alguien acabe modificando tu código, ten un poco de consideración por los demás y escribe código legible y entendible.
Via: Sentidoweb.com
Una de las mejores manera de hacer un sistema web es dar la mayor información posible pero sin saturar la interfaz. Es por eso que digo que el nuevo panel de WordPress 2.7 es muy usable pues usa mucho de estos elementos. Las opciones para el listado de comentarios, y post no muestran las opciones a menos que pases el mouse por encima.
Simpletip es una de esas herramientas que nos ayudan con este tipo de funciones, es plugin para jQuery que nos permite añadir tooltips a elementos HTML de forma sencilla y cómoda.
Lo mejor de todo es que posee la simpleza de JQuery.
$("JQUERY SELECTOR").simpletip({ content: 'My Simpletip', fixed: false });
SimpleTip | Via: SentidoWeb
Ya se que la mayoría de ustedes son unos gurús de la programación. Este truco es el claro ejemplo de como burlarte protecciones hechas enteramente en Javascript.
La serie de trucos para rapidshare consiste en no esperar para la descarga. Para ello solo ve al link y cuando estés esperando la descarga pones en la barra de direcciones(donde pones la URL de la página) el siguiente código.
javascript:alert(c=1)
Curioso una variable llamada C de counter?. Como sea, lo interesante es si Rapidshare fuera tuyo que harías para proteger el contador de estas cosas.
Así existen muchas páginas con las que se pueden jugar. Recuerdo el caso de nipper con el que podías obtener miles de puntos ejecutando funciones de Javascript o el truco para editar cualquier página web y presumir que eres un super hacker.
Ya he hablado sobre algunas alternativas para evitar a la gente indeseable en los sítios de Internet. Leyendo sentidoweb me entero de este captcha que para validar que no eres bot, te pide que corrijas un código en javascript con errores.
La idea es creativa, pero no deja de ser simplemente didáctica. Así que para mi no es una buena idea, quizás para otra personas sí.
Me encontré con una implementación del mejor editor(si mejor que emacs) que existe en el mundo de la Informática.
Aunque la verdad, un poco pobre para mi gusto. Solo es para tener la sensación, no para que sea útil, pero… es divertido.
Una buena herramienta para cuando no estamos en nuestra máquina y necesitamos sacar información de alguna página al estilo Firebug es XRAY, un SCRIPT en Javascript que se encarga de dar este tipo de información.
Para utilizarlo, solo necesitas estar en cualquier página y poner este código en la barra de direcciones.
javascript:function%20loadScript(scriptURL)%20{%20var%20scriptElem%20=%20document.createElement('SCRIPT');%20scriptElem.setAttribute('language',%20'JavaScript');%20scriptElem.setAttribute('src',%20scriptURL);%20document.body.appendChild(scriptElem);}loadScript('http://westciv.com/xray/thexray.js');
Una potente herramienta que muestra el potencial de javascript, sin embargo a mi opinión este tipo de prácticas son peligrosas. Ya que estamos ejecutando código externo que puede ser maligno(no digo que este sea el caso)… y a eso se le llama XSS.
Solo como comentario, hoy en día hay que tener cuidado.
Vía: anieto2k
Para andar probando y desasiendo las peticiones HTTP, yo utilizo firefox con algunas extensiones. Aunque hace algún tiempo publique un articulo sobre el Hacking Ético con firefox, hoy pongo algunas nuevas herramientas para el jugar con HTTP.
Firebug. Esta extensión que para mi es cómoda a la hora de desarrollar aplicaciones con AJAX, ya que muestra las peticiones de forma ordenada y estructurada. También por orden de ejecución y que archivo y linea están ejecutándola. Esta forma de hacerlo es lo que hace a firebug una gran herramienta a la hora de andar programando con javascript. Yo me pregunto ¿Qué desarrollador no usa firebug?.
Live HTTP Headers. Una aplicación sencilla pero muy útil y rápida que te muestra los headers de entrada y salida tal cual como se envían por la red. Personalmente la uso cuando solo quiero ver como hace las peticiones alguna página, y darle una mirada rápida a vulnerabilidades tipo CSRF entre otras.
Tamper Data. Extensión que a diferencia de las anteriores, te permite modificar y agregar elementos cuando una petición se hace. Imagina… modificas tu cookie, los datos POST/GET de un formulario entre muchas otras cosas.
RESTTest: Esta extensión te permite hacer peticiones POST. Y es complemento ideal junto con Live HTTP HEADERS.
Creo que hay mas, sin embargo menciono las que creo que son mejores. Hace algún tiempo existían muchas herramientas para hacer este tipo de cosas, incluso algunos las programaban, con firefox ya no es necesario.
Existen varias formas de resaltar tu código , una es usando geshi una clase en PHP que lo hace fácilmente pero de lado del servidor. Y otra muy buena opción es con Highlight que se encarga de detectar automáticamente el lenguaje(aunque puede definirse) y quitarle un poco de carga al servidor dándosela al cliente.
¿Cual es mejor? yo me voy por esta ultima, ya que no tienes que configurar nada y es mas fácil implementarlo en cualquier CMS como wordpress o joomla que instalar un plugin especial para cada sistema.
Haciéndolo desde el navegador, basta con solo teclea en tu navegador.
javascript:document.body.contentEditable='true'; document.designMode='on'; void 0
Algo curioso que nos permite jugar con cualquier página editando su estructura y contenido.
Actualizacion : Debido a las personas que me preguntan que si este código es para “jackear” páginas, quiero aclarar que noooooo ¬¬ los cambios que hagas solo son visibles en tu navegador y no en el sitio.