Category: Codigo:Web

Desarrollo web, Usabilidad, CSS2 y CSS3, HTML 4 y 5, Desarrollo y diseño orientado al Usuario, experiencia web, PHP5, Javascript con jQuery, wireframing, grillas de diseño, y todo lo relacionado con programación para la web del futuro. #OMG xD

Maldito Malware de Hosting

Ayer una amiga me dice: “No puedo entrar a tu sitio porque el Antivirus me dice que tienes malware”. ¡Rayos!
Efectivamente, revisando el tráfico de red con Firebug, pude fijarme que había una solitaria llamada a un sitio llamado ohioswingerbus.com/main.php?… y que se comía la conexión un par de segundos, antes de volver a seguir cargando mi sitio.

Personalmente me siento mal de que Avira Free no detectara esto, y si el antivirus de mi amiga, por lo que tendré que preguntarle cuál es para cambiarme.

Primero pensé que era WordPress, asi que desactivé todos los plugins y los fui reiniciando uno a uno pero seguía ahi. Revisé todo el tema nuevo. Cada una de las páginas que son editable via administrador y a través del FTP. Nada. Seguía ahí.

Le pregunté a Google si había detectado este malware usando las herramientas de webmasters y no lo pillaba (G Fail).  Revisé otras carpetas del servidor hasta que llegué al origen del problema.

Weas Frikis corre con WP instalado en otra carpeta, para evitar el desorden en el “home”. Y para que no sea necesario hacer redirección, existe un archivo index.php, el cual en su parte superior, antes de <?php

Estaba este script:
if(window.document)aa=(Number+'evweds').subst ...

Sorpresa mia, porque estaba con sus permisos correctos. NPI* de cómo se agregó esa lína. Problema de hosting? Algún hacker? Botnet?.

Bastó con borrar la línea y se arregló de inmediato mi sitio.

Este script, que pueden leer en el link de abajo (yo no lo subí, estaba ahi), puede usar cualquiera de estas direcciones: ohioswingersbus.com, ohioswingersdrive.com, ohioswingersslot.com, pinkifyhiteize.com, qxypornstaropoly.com, rownizerllowize.com, rplenikrpleopoly.com, entre otras, como las ya conocidas combinaciones de “penis o viagra“.

Así que ya saben, ojo con el CHMOD xDD

*NPI = Ni puta idea xD
Fuentes:
Foros del Web (Ayuda técnica)
Maldito Script (Análisis forense)

Adobe Edge P1

Adobe Edge Preview 1

Primera revisión a la nueva apuesta de Adobe. Edge Preview 1 tiene todas las opciones de ganar la batalla de la animacion en la Web, al permitir la creación de clips, banners, ads o animaciones con código HTML5,  JavaScript y CSS3.

Esta nueva y brillante herramienta se ve como el futuro caballo de carreras de Adobe. Aún está en una etapa preliminar y carece de muchas opciones, sin embargo es tan sencillo utilizarlo, que pude realizar esta animación, en sólo 15 minutos.

Adobe Edge Preview 1 apunta a el uso de una interfaz similar a la de Flash para la creación de animaciones que son luego, generadas en HTML5 , junto con JavaScript y CSS3. Siguiendo la ruta de los estándares. Esta aplicación permite que tus animaciones no necesiten ningún tipo de plugín o extensión para poder ser reproducidas, por lo que estarán disponible tanto en computadores regulares (desktop, notebook, netbook), Tablets (Ipad, Ipad2, Galaxy Tab) y dispositivos móviles.

Ésta versión de prueba (que dura 150 días) aún posee muy pocas opciones, pero como lo vi, tiene un enorme potencial. Aparte de que las animaciones y organización de los elementos se hacen en capas o layers como Flash, no es necesario ser un maestro en ActionScript como para lograr movimientos y efectos.

1.- Este panel tiene las opciones del elemento que se selecciona. Si no se ha marcado nada, muestra las opciones del canvas de dibujo o lienzo base.
2.- Este es el área de trabajo. Acá se dibuja el “lienzo base” y los elementos que se utilizarán en la animación.
3.- En este panel es posible ver la organización por capas de los elementos que se agregan a la animación.
4.- Esta es la línea de tiempo, en donde se pueden modificar las opciones de los elementos (CSS3) y colocar los keyframes que dirigen la animación.
Flecha Verde: Los tipos de elementos que se pueden crear – rectángulo, rectángulo con bordes curvos, textos y el selector. Para agregar imágenes, hay que importarlas desde el menú superior.
Flecha Amarilla: Es posible modificar el órden de los paneles, pero al menos en mi caso, Windows 7 se manea un poco aunque no se pega asi que lo dejé “default”.
Flecha Cian: Menú del programa.

En esta imagen se pueden ver los elementos que utilicé para la animación superior. Capas, eventos, línea de tiempo, etc.

Una vez guardado, el documento generado es un archivo nombre-proyecto.html y genera el código fuente que vemos arriba.  Llamadas a la librería jQuery, y Edge 0.1.1. Además de su respectivo archivo javascript de configuración y su archivo de estilos CSS3.

Cabe destacar que por el momento no es posible a través del programa hacer enlaces, conectar con DB o páginas dinámicas, porque el codigo generado es en su gran mayoria manejado en javascript, pero en los foros de la naciente comunidad de Adobe Edge, se tomó en consideración la generación de más código HTML para realizar estas cosas.

Si tienes conocimientos en javascript, puedes hacer esas cosas utilizando los ID de los elementos.

Los archivos generados en la carpeta son los que aparecen en la imagen superior. (dos.html es un respaldo de emergencia :P )

Aún no me compro una webcam como para hacer videoreviews, pero pueden seguir los enlaces a continuación, para más información.
Para mi ejemplo, utilicé un script de el sitio HTML5 Blog para hacer que la animación tuviera loop, dado que desde el programa no es posible aún.

Descargar Ejemplo

Fuente:
Adobe Edge Preview
Video guía para principiantes, Adoble Labs