martes, 30 de agosto de 2011

Llamar a una función PHP desde Jquery

Valencia, 30/08/2011 Gatsu

Buenas noches lectores nocturnos en cuyos pueblos no hay fiesta estos días (en el mio se acaban en las próximas horas). Pese a que soy un poco negado en el mundo de javascript y su framework Jquery, la evolución de las tecnologías me hace ver que tengo que esforzarme en entenderlo si quiero seguir aprendiendo cosas. Esta noche os voy a explicar como me las he apañado para llamar a funciones php desde jquery y tratar con los datos devueltos.
Antes que nada, no es técnicamente llamar a una función y punto, en realidad llamo a un archivo .php y desde ello ya me encargo. Comienzo pues:

Lo primero de todo, cargamos Jquery en la página con:
< script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript" >< / script >
Después ya mejor copiamos este fragmento de código y si no lo entendeis no pasa nada (yo a duras penas lo entiendo), simplemente os lo creéis:

function llamadaAjax(){
    $.ajax({
        type: "POST",
        url: "class/usuarioAjax.php",
        data: {tarea: 'comprobarUsuario', nomUsuario : $('#txtRegistroNombreUsuario').val()},
        success: function( respuesta ){
            if (respuesta == 'Usuario ya existe')
                alert("Usuario existe");
            else
                alert("Usuario no existe");
     }});
}

<input type="submit" value="Comprobar usuario" onclick="javascript:llamadaAjax()" />

Cuando en Jquery hablamos de "$.ajax" ya nos ahorramos todo el lio de javascript de llamar a los objetos ajax en función del explorador y otras cosas, luego especificamos si el tipo es POST (las variables no se ven en la barra de direcciones) o GET (se ven), aunque como en este caso es una llamada asíncrona, a la barra del navegador no le repercute, pero yo soy más de usar POST a menos que me interese posicionar. El campo url simplemente es para indicar donde está el archivo php a ejecutar, y data es para pasarle las variables que recibirá ese archivo por POST o GET. Si la ejecución fue bien se lanzará el success, sino tendriamos que añadir el apartado "error" o bien arreglarlo hasta que se lance el success. Una vez lanzado el success, ya tenemos en el parámetro de su función el valor devuelto de la llamada al archivo. Obviamente la parte código no acaba aquí, falta el archivo .php:
< ? php
include 'usuario.php';
$usuario = new usuario();
switch($_POST["tarea"]){
case 'comprobarUsuario':
echo $usuario -> comprobarUsuarioExistente ($_POST["nomUsuario"]);
break;
case 'crearUsuario':
echo $usuario -> crearUsuario($_POST["nomUsuario"], $_POST["correo"], $_POST["password"]);
break;
}
? >
Os explico, como estoy haciéndome en una web todos los métodos en clases, no quería que por el ajax mezclase cosas, así que me he creado este archivo intermedio que se dedica a llamar ya a la clase que toca. Fijaros en que utilizo la variable "tarea" que envío desde el código jquery para diferenciar que fragmento de código debe ejecutarse, y la última línea que se leerá antes de volver contiene un "echo", el valor de dicho echo es lo que recuperas en jquery y va como parámetro a success.

Espero que a más de uno le solvente esas dudas místicas de como llamar a funciones de servidor mientras está ejecutándose el código en cliente, si tenéis alguna duda comentad

lunes, 18 de julio de 2011

Font-face: carga tu propia fuente tipográfica con CSS

Valencia, 18/07/2011 Gatsu

En el larguísimo camino que me he embarcado junto con otras personas hacia la creación de una web, nos hemos topado con un caso peculiar, para ser más originales, queríamos usar una tipografía de fuente distinta, por supuesto gratuita, pero claro, si no la tiene una persona instalada en su pc, de poco sirve, y mencionar que los usuarios se la descargasen era una idea loca, así que indagando encontré que con CSS3 ya se puede cargar un archivo de fuente tipográfica que esté alojado en el servidor. Para hacer esto utilizaremos el método de CSS @font-face.

El código es el siguiente:

@font-face {
 font-family: miFuente; /* requerido */
 src: source;                        /* requerido */
 font-weight: weight;                /* opcional */
 font-style: style;                /* opcional */
}

En font-family ponemos el nombre que le vamos a dar a la fuente, en src la ruta donde se encuentra el archivo ttf, eot... y los atributos font-weight y font-style son opcionales y son para si queremos negrita, cursiva, etc...
Luego simplemente en donde queramos poner el estilo de letra la fuente personalizada ponemos la propiedad "font-family: miFuente" y listo.

Si solo fuese eso sería demasiado fácil, imagino que a estas alturas ya sabréis que hay distintos navegadores, lo que implica que la compatibilidad con archivos de tipografía de fuente no es la misma en todos, por ejemplo Internet Explorer solo acepta la extensión .eot, mientras que Firefox, Chrome, Opera... menos Iphone, todos soportan .ttf, así que no es buena idea hacer una web en donde según el explorador se vea de una manera u otra porque no cargue, con lo que yo recomiendo hacerlo para IE y para el resto de navegadores. Para facilitar las cosas, primero os pongo esta imagen de que navegadores soportan que archivos


Lo más fácil es que os encontréis fuentes en .ttf, en ese caso utilizad esta web para convertirla a .eot (yo personalmente lo he probado y funciona): kirsle.net

Ahora solo queda la parte del código:

@font-face
{
 font-family: 'miFuenteIE';
 src: url('fuenteIE.eot');
}

@font-face
{
 font-family: 'miFuente';
 src: url('fuente.ttf');
}

body, a
{
 font-family:miFuente, miFuenteIE;
}

Con este código os cubrís las espaldas ante imprevistos por navegadores. Como veis creo 2 "@font-face", no pasa nada, funciona bien, de hecho ví por ahí que en un font-face podías poner varios src, yo no he querido complicarme la vida y lo he dejado más amigable ante el entendimiento propio por si en 2 meses tengo que editar código y me encuentro con éste

martes, 12 de julio de 2011

Aprendiendo a utilizar Cron Job

En un proyecto que tengo con unos colegas de la uni, me he visto ante una duda a la cual mis conocimientos de programador no hayaban respuesta, ¿cómo hacer para que a las 12 de la noche se actualice un campo de la base de datos?. Buscando por internet leo "Cron Job", así que indago sobre ello y milagrosamente descubro que es lo que necesito (bueno, y más).

Cron Job es un servicio de los servidores en Linux (para Windows está el "Programador de Tareas") que ejecuta en un momento, o varios, determinado por el usuario un script en PHP (es decir un archivo .php). Viene muy bien cuando tienes que ejecutar alguna modificación diaria de la base de datos, como actualizar o borrar registros, aunque se le podría dar mas usos (los que php permita).


El pantallazo corresponde al panel del Cron Job que tengo en mi servidor de pruebas, puede que a vosotros os salga algo distinto, pero la lógica es la misma, tienes que colocar la ruta donde se encuentra el archivo .php, y luego ya puedes configurar cuando quieres que se ejecute, si diariamente, semanalmente, cada hora o cuando sea, por ejemplo yo he programado un Cron Job con la misma configuración que sale en la imagen, eso significa que se ejecutará todos los días de todas las semanas de todos los meses a las 00:00, es decir, a media noche.

El servicio de Cron Job es esto, a partir de ahí está el script que cada uno le meta, yo esta noche comprobaré si mi script funciona.

sábado, 11 de junio de 2011

Modificar el grub de Ubuntu 11.04

Venga chicos, a ver, ¿quién de todos usa software libre? Yo hace ya medio año me instalé Ubuntu en una partición, y estuve unas semanas con él, pero tenía demasiados problemas, falta de programas y de compatibilidad, y decidí volver a Windows. Pero estos días me dio por iniciar Ubuntu, y el uso que le doy en Windows se lo puedo dar también a Ubuntu, con que por ahora voy a ver como me llevo con todo esto.

Pues bueno, resulta que me he actualizado a la versión 11.04, a ver si me solucionaban un problema con la cam (no está solucionado), pero me encontré con problemas inesperados, como que al reiniciar, cuando tiene que saltar el grub, me dice el monitor algo así "Señal fuera de rango". Claro, yo por eso entiendo que la resolución o la frecuencia no son correctos, y no me equivocaba, porque mientras está así, en realidad el temporizador para elegir una opción sigue ahí, y si pulsas intro o dejas que pase el tiempo te carga Ubuntu (pero esta vez ya si visible). Pero esto no es una opción saludable, así que indagando por ahí encontré un software llamado "Administrador de arranque", disponible en el "Centro de software de Ubuntu".



Una vez lo instalas, modifica la resolución del grub a 800x600, y prueba a reiniciarlo, a mi me ha funcionado de maravilla.

viernes, 27 de mayo de 2011

El aprendizaje de un concurso, 1º parte

Valencia, 27/05/2011 Gatsu


Reconozco que he vuelto a pecar de no escribir, pero creedme, en persimon.com.es he compensado con creces mi carencia de escritura en éste y otros blogs mios o en los que colaboro. El caso es que me dije que lo que aprendiese lo pondría aquí, y aunque a nivel de tecnología no es que me haya vuelto un pro, reconozco que más que antes ya sé (eso de nunca te acostarás sin saber nada nuevo se aplicó).

El tema de instalar wordpress en un servidor no voy a comentarlo, con arrastrar los archivos e introducir la URL del dominio el resto lo hace wordpress (y muy ameno la verdad). El tema de extensiones ya es otra cosa, como por ejemplo "All In One Seo" (no hagais caso de la compatibilidad de la versión, en la 3.1.2 de Wordpress me funciona perfecto), que quizás sea la mejor extensión para generar etiquetas "meta", y eso Google lo recompensa (aunque bueno de Google ya hablaré, que tengo algnas perlas constructivas y otras no tanto).
También hago incapié en la extensión de "Contact Form 7", "WP-Twitter" (publica un tweet en tu Twitter cuando creas o modificas un post o página), "Google XML Sitemap" (genera el sitemap de la página y lo manda a los diversos buscadores) y por último (y no menos importante) tenemos el plugin de "Akismet" (filtra el spam, y la verdad es que funciona de maravilla).

En este post me quedaré con lo que hice con Wordpress, pero eso no ha sido lo único, ya iré posteando.

miércoles, 23 de febrero de 2011

Contact Form 7: un excelente formulario de contacto para Wordpress

En mi reciente aparición por el mundo de Wordpress (por la web de persimon.com.es), me he percatado de que no está muy elaborado el sistema de contacto en sus blogs, y navegando (que es como mejor encuentras respuestas a grandes incógnitas) he encontrado un plugin llamado “Contact Form 7”. Aunque resulta curioso de utilizar, si tienes un mínimo de conocimientos de HTML y te amoldas al formato, puedes hacerte un formulario de contacto bastante personalizado.

Lo primero es descargar el plugin Contact Form 7 e instalar en wordpress (o bien por FTP o bien desde el panel de plugins del propio Wordpress). Una vez instalado, podemos buscarlo en Herramientas o en Contacto, depende de la versión de Wordpress que uses. Y aparecerá una página así:


La línea que pone [contact-form 1 "Contact form 1"] es la línea que tendréis que poner en la página o post en donde quieres que esté el formulario. Debajo, en Formulario, es donde empieza lo interesante. Lo que recomiendo es que tengais algo así:

Tu nombre (requerido)

    [text* your-name id:your-name]


Tu Email (requerido)

    [email* your-email id:your-email]


Asunto

    [text your-subject id:your-subject]


Tu mensaje

    [textarea your-message id:your-message]

[quiz quiz-3 "11+4=?|15" "9+3=?|12" "3+6=?|9"]

[submit "Enviar"]


Podéis añadir tantos campos como queráis, es más, a la derecha, veréis que pone “Generar Etiqueta”, simplemente id añadiendo en función del formulario que querais crear, en este post yo solo expongo un formulario básico de contacto.

Fijaos en que en todas las etiquetas con corchete hay una “id”, esa id es la que, en la parte de “Correo” podréis colocar las etiquetas con corchete que habéis declarado arriba,con su información, por ejemplo, en el apartado “De” puedes poner “[your-name] [your-email]” y cuando recibas un correo de alguien que ha rellenado el formulario, verás que en el campo “De” pondrá el nombre, espacio, y el correo de la persona que lo escriba.
Para este uso, no habilitéis el campo “Usa el tipo de contenido HTML”.

martes, 22 de febrero de 2011

Nace persimon.com.es

persimon.com.es es un blog creado con el fin de hablar e informar sobre todo lo relacionado con esa fruta cultivada en Valencia.

Recetas, características, curiosidades, son algunos de los apartados de los que, en un futuro próximo, tratará este blog. Animaos a conocer un poco más lo que se cuece en Valencia a nivel de gastronomía, como con Cenando por Valencia.