Para añadir un elemento a un array en javascript podemos utilizar el siguiente codigo:
miarray = new Array();
dato = ‘1000’;
miarray.push(dato);
> console.log(miarray);
Con esto hemos añadido un elemento (1000) en un array. De esta forma podemos insertar en array. Si lo que ahora queremos es eliminar un elemento del array, utilizamos la siguiente sentencia:
miarray.splice($.inArray(dato,miarray),1);
De esta forma, borramos el elemento que hemos introducido anteriormente del array.
Con el plugin de Contact Form 7, podemos introducir formularios dentro de nuestro blog wordpress. Pero por defecto, unicamente manda uno o dos emails, pero no hace nada más.
Con la ayuda de otros plugins, podemos guardar esos datos en unas tablas y tener un registro de todos los datos. Para esto, podemos utilizar Flamingo, como nos dicen en la propia web del plugin de Contact Form, o algún otro plugin que tambien se puede utilizar con el mismo propósito como Contact Form DB.
Lo que vamos a explicar, es como hacer una «landing normal», con un formulario, y una pagina de gracias o «thank you page».
Para ello, ademas del plugin contact form 7, debemos instalar algún plugin que nos permita ejecutar codigo php dentro de los posts, paginas, etc. Hay mucho, podemos elegir por ejemplo Short Exec Code.
Generamos nuestro formulario con los datos que necesitamos dentro de la opción Contacto > Formulario de contacto, podemos crear uno nuevo o utilizar el que viene por defecto y modificarlo.
<p>Su nombre (requerido)<br />
[text* your-name id:your-name] </p>
<p>Su e-mail (requerido)<br />
[email* your-email id:your-email] </p>
<p>Asunto<br />
[text your-subject] </p>
<p>Su mensaje<br />
[textarea your-message] </p>
<p>[submit «Enviar»]</p>
contactform7
A los datos del formulario, le tenemos que añadir la etiqueta id, para que luego podamos recogerla del formulario y mandarla por la url. Esto es sencillo en Contact Form 7, unicamente añadimos
id:your-name
dentro de la etiqueta, y cambiando «your-name» por el nombre que le queramos dar a cada variable.
Bajamos abajo del todo, y añadimos el siguiente codigo en la sección «Configuración Adicional».
on_sent_ok: «var nombre = document.getElementById(‘your-name’).value; location =’/gracias/?nombre=’+nombre;»
configuracion adicional contact form7
Este código lo que hace es ejecutar las acciones de javascript necesarias cuando el formulario se ha enviado correctamente. Se puede hacer a través de una funcion de javascript, o como en este caso, directamente sobre el codigo. Definimos un parámetro para cada campo del formulario, y hacemos una redirección a la página de gracias, pasandole por la url todos los parámetros recogidos del formulario.
Unicamente hemos añadido aquí el parametro nombre, pero deberiamos mandar todos los campos que tengamos en el formulario.
Ahora nos queda crearnos la pagina de gracias, que lo hacemos desde el propio gestor de wordpress, en «Páginas» > Añadir nueva y creamos una pagina que se llame «gracias» y que tenga la url /gracias/ (obviamente, el nombr y la url se puede poner la que se quiera), pero se debe cambiar entonces tambien el nombre, en el apartado «configuración Adicional» que hemos comentado anteriormente.
Nos vamos a «herramientas» > Shortcode Exex PHP y nos creamos un codigo html para recoger esos parámetros que pasamos por la url.
extract(shortcode_atts(array(‘arg’ => ‘default’), $atts));
print_r($_REQUEST);
Shortcode exec php
En ese caso unicamente pintamos el array que nos llega por la request, pero realmente ya con este array, podríamos hacer cualquier cosa. Pintar por pantalla los datos del formulario, enviar los mails que necesites y en el formato que se necesite, codigos de conversiones de analytics o cualquier otra herramienta, integraciones por pixel transparente, etc.
Ahora solo nos queda meter ese codigo de ejecución de PHP que hemos creado, en nuestro caso lo hemos llamado «gracias» y lo metemos dentro la pagina de gracias que nos hemos creado anteriormente.
De esta forma, podemos generar landing page en WordPress de una manera sencilla y utilizar todos los metodos de tracking, conversiones, etc para controlar la campaña.
Para modificar las cabeceras de una petición http y poder hacer pruebas en local de ciertas paginas vamos a utilizar las siguientes aaplicaciones:
– Navegador Mozilla Firefox
– Addon Firebug
– Addon Modify Headers
Una vez que tenemos instalado el complemento Modify Headers, reiniciamos el firefox y vamos a Herramientas > Desarrollador Web > Modify Headers
Se nos abre la aplicación y le añadimos las cabeceras que queramos modificar, en este caso, quiero modificar el REFERER y quiero simular que llego a la pagina desde www.topformacion.com
Una vez que le doy al icono Start arriba a la izquierda, en las paginas que naveguemos por firefox, aparecerá el referer www.topformacion.com
Con el complemento Firebug, podemos comprobar que las cabeceras que hemos modificado, efectivamente, son las que está cogiendo.
Esto nos puede servir para probar en local el funcionamiento de muchas paginas modificado el archivo /etc/hosts de su ordenador local.
Muchas veces utilizamos varios APIs de Javascript, y estos entran en conflicto. En este caso, JQuery y Prototype no se llevan muy bien.
Para solucionar el problema, debemos introducir los codigos de jQuery que nos dan problemas bajo el siguiente codigo:
jQuery.noConflict();
(function($) {
$(function() {
// more code using $ as alias to jQuery
});
})(jQuery);
De esta forma solucionamos el problema, siempre y cuando los conflictos no sean muchos ... poruqe si no, nos podemos volver locos.
Mas información sobre problemas en jQuery y Prototype.
Pues hemos encontrado que las ventanas emergente .. con internet explorer 8 no funcionaban, mientras que en el resto de los navegadores si que funcionaban (firefox, google chrome, incluso internet explorer 6 y 7).
El problema es el nombre que se le dá a la ventana .. que no permite ni espacios en blancos ni guiones bajos .. solo caracteres alfanumericos.
Es decir, si tenemos:
window.open(‘url’,’nombre de pagina’,’parametros’);
para que funcionara correctamente en ie8 deberia estar escrito:
window.open(‘url’,’nombredepagina’,’parametros’);
Cuidado con estas gilipolleces de nuestro gran amigo microsoft, que siempre está ayudando a los desarrolladores a facilitarnos el trabajo en los desarrollos web.
Bueno, decir que el tan esperado google chrome a mi me ha defraudado un poco. Es cierto que tiene cosas que estan bien (pantalla casi completa, pestañas arriba del todo) pero me sigo quedando con el mozilla firefox.
He estado probando una parte que es muy importante para los desarrolladores, yo diria que practicamente imprescindible en estos momentos para los desarrollos web. Es la herramienta de «opciones para desarrolladores». Yo la comparo con el Firebug , que es un plugin de mozilla firefox que creo que es imprescindible para cualquier desarrollador web.
He probado con la pagina de cursos www.topformacion.com y con la pagina de franquicias www.franquiciando.com y la verdad que no me aparecia ningun fallo javascript (jejejeje que buenos somos) y he estado probando la carga de las paginas, y como acceder a los elementos. La verdad que en firebug aparecen errores o warnings de javascript, mientras que en la consola de errores de google chrome no aparecen. Con lo cual .. empieza ganando firefox.
Pueder ir recorriendo los elementos del html y del javascript y cambiar sus valores .. vamos .. lo mismo que hace el firebug. Me gusta que hay una caja de buscar terminos, cosa que le falta al firebug … aunque bueno .. no funciona muy bien, pero es una cosa que era muy necesaria.
Puedes elegir «resources» y ves por tiempo o por carga los elementos lo que han tardado en cargar. Esto siempre me parece muy interesante, y el mozilla lo tiene igual si instalas el pluging «Load Time Analizer». Aunque me gusta que venga por defecto.
La visualización de codigo fuente es buena, aunque la separación por colores no es muy de mi agrado. Preferiria unos colores más fuertes que llamen más la atención. Pero bueno .. supongo que esto serán distintos gustos de usuario.
Ahora vemos el debugger de javascript .. y horror!!!!! es un debugeador de consola!!!!! nada grafico como el firebug. Madre mia .. quien se aprende ahora a debugear en esto!!!! os paso los comandos a ver si alguno lo encuentra sencillo y usable.
Finalmente la Administración de Tareas, la cual si que me parece algo muy interesante y que han acertado. Es algo que se echan en falta que pueda ver el uso de cpu de cada pestaña. Punto para google chrome!!!!!!!
Bueno .. cada uno es libre de hacer lo que quiera .. yo para desarrollar y depurar javascript .. me sigo quedando con el firefox. Ha dia de hoy .. ha ganado la batalla al depurador de javascript de google chrome.