tag:blogger.com,1999:blog-14042215457091563122024-02-09T21:02:00.209-05:00{ "Código" : "Jerry" }Unknownnoreply@blogger.comBlogger42125tag:blogger.com,1999:blog-1404221545709156312.post-5621957043436473972023-11-15T18:37:00.001-05:002023-11-15T18:37:27.938-05:00Sistema Solar hecho con HTML y CSS<div class="separator" style="clear: both;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhm2ujkWfrFqz4aaXg6vKqBRScD4W98xCLhadSaeL2OxX7dDKKrITxP9DYwvSN8pQlxuAxfGFPa3gluIQ3yf3eK0ws8w-nM0yNDAMy9eH_jIVN5tPwL2EczoIgiA7AN0JGtd_Q4Jk-vigfP13kq09cA2Sdl2BQWpMPsuym1mejFPIJwgWAH7dDRVYL5KHs/s1115/SS.jpg" style="display: block; padding: 1em 0; text-align: center; "><img alt="" border="0" width="600" data-original-height="543" data-original-width="1115" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhm2ujkWfrFqz4aaXg6vKqBRScD4W98xCLhadSaeL2OxX7dDKKrITxP9DYwvSN8pQlxuAxfGFPa3gluIQ3yf3eK0ws8w-nM0yNDAMy9eH_jIVN5tPwL2EczoIgiA7AN0JGtd_Q4Jk-vigfP13kq09cA2Sdl2BQWpMPsuym1mejFPIJwgWAH7dDRVYL5KHs/s600/SS.jpg"/></a></div>Sistema Solar básico hecho solamente con HTML y CSS en dos archivos separados, los 8 planetas tienen sus respectivos movimientos (giran alrededor del sol infinitamente). Descargar el código fuente para su ejecucion y lo modifiques a tu agrado: <a href="https://www.mediafire.com/file/ie02bh7mzaerst5/systema_solar.rar/file" target="_blank">Enlace</a>.Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-1404221545709156312.post-68073927629272831662023-05-16T23:45:00.032-05:002023-05-17T00:03:01.034-05:00Juego Piedra, Papel o Tijera en PSeInt Juego del clásico Piedra, papel o tijera hecho en PSeInt con gráficas. El juego es el usuario versus la computadora. Ésta elige 3 números al azar cada vez que se inicia un nuevo juego. 1 para piedra 2 para papel y 3 para tijera. El algoritmo se hizo con la siguiente configuración:
<div class="separator" style="clear: both;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilEUPG-j5etbJOv5Wo6p32CupT4GH_TNO7JMAyQT2t5wMTv04XlEIEV8E-NZbOJ-kAA_vF5oqfgnIE14Vuuxpst3ieh3FmGV3bxxdLA-oNw2t_gW8YrQ9qTRllMTvBZrgWYmG_bKkmiFVG6CP_XGWNpIejY_2IGSjy8imGLTTX2FPEdJmJIpzZdynY/s477/perfil.png" style="display: block; padding: 1em 0; text-align: center; "><img alt="" border="0" height="400" data-original-height="477" data-original-width="416" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilEUPG-j5etbJOv5Wo6p32CupT4GH_TNO7JMAyQT2t5wMTv04XlEIEV8E-NZbOJ-kAA_vF5oqfgnIE14Vuuxpst3ieh3FmGV3bxxdLA-oNw2t_gW8YrQ9qTRllMTvBZrgWYmG_bKkmiFVG6CP_XGWNpIejY_2IGSjy8imGLTTX2FPEdJmJIpzZdynY/s400/perfil.png"/></a></div>
<b>Demo:</b><br>
<iframe class="BLOG_video_class" allowfullscreen="" youtube-src-id="dkvuzAx-yKE" width="600" height="498" src="https://www.youtube.com/embed/dkvuzAx-yKE"></iframe>
<br>
<b>Código Fuente</b><br>
<pre>
Funcion piedra()
Escribir " **********";
Escribir " * __ _ _ *";
Escribir " * \ *";
Escribir " * / / ** *";
Escribir " * \ / *";
Escribir " * ** -- *";
Escribir " * --------- *";
Escribir " **********";
Fin Funcion
Funcion papel()
Escribir " ___________________";
Escribir " | -------------- |";
Escribir " | ----------- ___ |";
Escribir " | ----------- | ||";
Escribir " | --------------- |";
Escribir " | --------------- |";
Escribir " | --------------- |";
Escribir " |_________________|";
FinFuncion
Funcion tijera()
Escribir " * *";
Escribir " *** ***";
Escribir " *** ***";
Escribir " *** ***";
Escribir " *** ***";
Escribir " *** ***";
Escribir " * * * *";
Escribir " * * * * * *";
Escribir " * *** * * *** *";
Escribir " * **** * * *** *";
Escribir " * **** * * *** *";
Escribir " * **** * * *** *";
Escribir " **** *** ";
FinFuncion
Algoritmo piedra_papel_tijera
Repetir
cpu=azar(3)+1;//1. piedra 2. papel 3. tijera
Escribir "1. Piedra | 2. Papel | 3. Tijera | 0. Salir";
leer jugador;
si (jugador>=0 y jugador<=3) Entonces //valido que el usuario ingrese opciones del 0 al 3
si jugador==1 y cpu==1 Entonces //cpu piedra
Escribir "****EMPATE****";
Escribir "JUGADOR";
piedra();
Escribir "MÁQUINA";
piedra();
FinSi
si jugador==2 y cpu==1 Entonces //cpu piedra
Escribir "****GANASTE****";
Escribir "JUGADOR";
papel();
Escribir "MÁQUINA";
piedra();
FinSi
si jugador==3 y cpu==1 Entonces //cpu piedra
Escribir "****PERDISTE****";
Escribir "JUGADOR";
tijera();
Escribir "MÁQUINA";
piedra();
FinSi
si jugador==1 y cpu==2 Entonces //cpu papel
Escribir "****PERDISTE****";
Escribir "JUGADOR";
piedra();
Escribir "MÁQUINA";
papel();
FinSi
si jugador==2 y cpu==2 Entonces //cpu papel
Escribir "****EMPATE****";
Escribir "JUGADOR";
papel();
Escribir "MÁQUINA";
papel();
FinSi
si jugador==3 y cpu==2 Entonces //cpu papel
Escribir "****GANASTE****";
Escribir "JUGADOR";
tijera();
Escribir "MÁQUINA";
papel();
FinSi
si jugador==1 y cpu==3 Entonces //cpu tijera
Escribir "****GANASTE****";
Escribir "JUGADOR";
piedra();
Escribir "MÁQUINA";
tijera();
FinSi
si jugador==2 y cpu==3 Entonces //cpu tijera
Escribir "****PERDISTE****";
Escribir "JUGADOR";
papel();
Escribir "MÁQUINA";
tijera();
FinSi
si jugador==3 y cpu==3 Entonces //cpu tijera
Escribir "****EMPATE****";
Escribir "JUGADOR";
tijera();
Escribir "MÁQUINA";
tijera();
FinSi
Esperar 3 segundos;
Borrar Pantalla;
SiNo
Escribir "Por favor ingrese un número válido";
Esperar 2 segundos;
Borrar Pantalla;
finsi
Hasta Que jugador==0
FinAlgoritmo
</pre>Unknownnoreply@blogger.com0Cali, Valle del Cauca, Colombia3.4516467 -76.5319854-24.858587136178844 -111.6882354 31.761880536178847 -41.375735399999996tag:blogger.com,1999:blog-1404221545709156312.post-14892224403693068752023-05-14T01:31:00.006-05:002023-05-14T01:45:37.161-05:00Operador Modulo (Mod o %) en PSeIntEl operador MOD o tambien: %, nos permite conocer el residuo o resto de una división entre dos números. La siguiente imagen cúal es el residuo:
<div class="separator" style="clear: both;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWux549Z2qVdZSVdeiOFQYuHsFVWLIxKod8_enORoAdbFMb0lWq979aRYoGsBiKfp6MdK1r0Z-zATfoOA9Zu-yJ9xxt8hDOJ91GZ2V5ytM-LopqPlUTmVRwNVnNSyRZcTYx85TwEz-ofkjgs5_O-fWfw0hAsZuxeKvjkxVmQTlrdBeazMG2kzCd0WT/s600/como_hacer_divisiones_16714_paso_1_600.jpg" style="display: block; padding: 1em 0; text-align: center; "><img alt="" border="0" width="200" data-original-height="600" data-original-width="600" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWux549Z2qVdZSVdeiOFQYuHsFVWLIxKod8_enORoAdbFMb0lWq979aRYoGsBiKfp6MdK1r0Z-zATfoOA9Zu-yJ9xxt8hDOJ91GZ2V5ytM-LopqPlUTmVRwNVnNSyRZcTYx85TwEz-ofkjgs5_O-fWfw0hAsZuxeKvjkxVmQTlrdBeazMG2kzCd0WT/s200/como_hacer_divisiones_16714_paso_1_600.jpg"/></a></div>
Este operador es muy util por ejemplo cuando necesitamos saber si un numero es par o impar. Si el residuo es 0 entonces el número es par.<br>
Ejemplo con el operador <b>MOD</b>:
<pre>
Algoritmo Modulo
Escribir "Ingrese el numero: ";
Leer N;
Escribir "Ingrese el divisor: ";
Leer M;
Si N MOD M = 0 Entonces
Escribir M," es divisor exacto de ",N,".";
SiNo
Escribir "El resto de dividir ",N," por ",M," es: ",N MOD M;
FinSi
FinAlgoritmo
</pre>Unknownnoreply@blogger.com0Cali, Valle del Cauca, Colombia3.4516467 -76.5319854-24.858587136178844 -111.6882354 31.761880536178847 -41.375735399999996tag:blogger.com,1999:blog-1404221545709156312.post-7530854151002684092023-05-13T23:54:00.034-05:002023-05-14T00:59:13.073-05:00Juego de penales en PSeIntJuego de penales hecho en PSeInt. Cuenta el número de goles hechos por el usuario y las atajadas del arquero, éste se mueve sólo en 3 posiciones: izquierda, centro y derecha.
Se utilizó el la siguiente configuración para el desarrollo del programa:
<div class="separator" style="clear: both;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvAu_jc76Ug-Ie_-VqYA-MX8ApLoaESOUznKNcYw4srAb9DkXcTJ6-SbuI1C4HgYks1evjF44orjoO2NwCmCTL0MioP1J59WJRgiTBMeuwdDVLzQgH3CF44dvrkylP2ko-crESlTu_2E36lQ_5OGT2tF5GoDfKPRuVWYyDuEEiWODOIgRLqNd74G0h/s486/perfil.png" style="display: block; padding: 1em 0px; text-align: center;"><img alt="" border="0" data-original-height="486" data-original-width="419" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvAu_jc76Ug-Ie_-VqYA-MX8ApLoaESOUznKNcYw4srAb9DkXcTJ6-SbuI1C4HgYks1evjF44orjoO2NwCmCTL0MioP1J59WJRgiTBMeuwdDVLzQgH3CF44dvrkylP2ko-crESlTu_2E36lQ_5OGT2tF5GoDfKPRuVWYyDuEEiWODOIgRLqNd74G0h/s400/perfil.png" /></a></div>
<b>Demo:</b>
<iframe allowfullscreen="" class="BLOG_video_class" height="498" src="https://www.youtube.com/embed/Ggwc8zQsyKs" width="600" youtube-src-id="Ggwc8zQsyKs"></iframe>
<b>Código fuente:</b>
<pre>Algoritmo juego_penales_pseint
//Autor: https://codigojerry.blogspot.com/
goles=0;//contador numero de goles
atajadas=0;//contador de atajadas
arqueroAtajo=falso;//si el arquero atajo o no.
Repetir
Borrar Pantalla;
Escribir "Número de goles: ",goles;
Escribir "Número de atajadas: ",atajadas;
Escribir "___________________________________________________________";
Escribir "-----------------------------------------------------------";
Escribir "|| ||";
Escribir "|| * * * * * * ||";
Escribir "|| * \ / * ||";
Escribir "|| * --- * ||";
Escribir "|| * * * * * * ||";
Escribir "|| || ||";
Escribir "|| _______||________ ||";
Escribir "|| || ||";
Escribir "|| || ||";
Escribir "|| / \ ||";
Escribir "|| / \ ||";
Escribir "|| / \ ||";
Escribir "";
Escribir " 1. Izquierda | 2. Centro | 3. Derecha";
Leer tiro;
si (tiro<0 o tiro>3) Entonces //condicional para validar que sólo sean los numeros 1 (izquierda), 2 (centro) y 3 (derecha) para patear
Escribir "Solo son validos numeros del 1 al 3 para patear. Presiona cualquier tecla para continuar. Presionar la tecla N para salir";
Leer jugar;
FinSi
arquero= azar(3)+1;//movimiento aleatorio del arquero. 1 izquierda, 2 centro, 3 derecha
si tiro==1 y arquero==1 Entonces //si patea a la izquierda y el arquero se mueve a la izquierda: Atajada
atajadas=atajadas+1;//cuenta las atajadas
arqueroAtajo=Verdadero;//arquero atapó
Borrar Pantalla;
Escribir "Número de goles: ",goles;
Escribir "Número de atajadas: ",atajadas;
Escribir "___________________________________________________________";
Escribir "-----------------------------------------------------------";
Escribir "|| ||";
Escribir "|| * * * * * * ||";
Escribir "|| * \ / * ||";
Escribir "|| * U * ||";
Escribir "|| * * * * * * ||";
Escribir "|| || ||";
Escribir "|| / * * * \ ||";
Escribir "|| \ * ___ * / ||";
Escribir "|| \ * * * / ||";
Escribir "|| / \ ||";
Escribir "|| / \ ||";
Escribir "|| / \ ||";
FinSi
si tiro==1 y arquero==2 Entonces //si patea a la izquierda y el arquero se queda en el centro: Gol
Borrar Pantalla;
goles=goles+1;//cuenta los goles
Escribir "Número de goles: ",goles;
Escribir "Número de atajadas: ",atajadas;
Escribir "___________________________________________________________";
Escribir "-----------------------------------------------------------";
Escribir "|| ||";
Escribir "|| * * * * * * ||";
Escribir "|| * X X * ||";
Escribir "|| * * * * n * ||";
Escribir "|| * \___/ * * * * * * * ||";
Escribir "|| *__/ \__* \ || / ||";
Escribir "|| * \___/ * \___||___/ ||";
Escribir "|| * * * || ||";
Escribir "|| || ||";
Escribir "|| / \ ||";
Escribir "|| / \ ||";
Escribir "|| / \ ||";
Escribir "";
Escribir " ¡GOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOL!";
Esperar 2 Segundos;
FinSi
si tiro==1 y arquero==3 Entonces //si patea a la izquierda y el arquero se mueve a la derecha: Gol
Borrar Pantalla;
goles=goles+1;//cuenta los goles
Escribir "Número de goles: ",goles;
Escribir "Número de atajadas: ",atajadas;
Escribir "___________________________________________________________";
Escribir "-----------------------------------------------------------";
Escribir "|| ||";
Escribir "|| * * * * * * ||";
Escribir "|| * X X * ||";
Escribir "|| * * * * n * ||";
Escribir "|| * \___/ * * * * * * * ||";
Escribir "|| *__/ \__* \ || / ||";
Escribir "|| * \___/ * \___||___/ ||";
Escribir "|| * * * || ||";
Escribir "|| || ||";
Escribir "|| / \ ||";
Escribir "|| / \ ||";
Escribir "|| / \ ||";
Escribir "";
Escribir " ¡GOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOL!";
Esperar 2 Segundos;
FinSi
si tiro==2 y arquero==1 Entonces //si patea al centro y el arquero se mueve a la izquierda: Gol
Borrar Pantalla;
goles=goles+1;
Escribir "Número de goles: ",goles;
Escribir "Número de atajadas: ",atajadas;
Escribir "___________________________________________________________";
Escribir "-----------------------------------------------------------";
Escribir "|| ||";
Escribir "|| * * * * * * ||";
Escribir "|| * X X * ||";
Escribir "|| * n * * * * ||";
Escribir "|| * * * * * * * \___/ * ||";
Escribir "|| \ || / *__/ \__* ||";
Escribir "|| \___||___/ * \___/ * ||";
Escribir "|| || * * * ||";
Escribir "|| || ||";
Escribir "|| / \ ||";
Escribir "|| / \ ||";
Escribir "|| / \ ||";
Escribir "";
Escribir " ¡GOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOL!";
Esperar 2 Segundos;
FinSi
si tiro==2 y arquero==2 Entonces //si patea al centro y el arquero se queda en el centro: Atajada
Borrar Pantalla;
Escribir "Número de goles: ",goles;
Escribir "Número de atajadas: ",atajadas;
Escribir "___________________________________________________________";
Escribir "-----------------------------------------------------------";
Escribir "|| ||";
Escribir "|| * * * * * * ||";
Escribir "|| * \ / * ||";
Escribir "|| * U * ||";
Escribir "|| * * * * * * ||";
Escribir "|| || ||";
Escribir "|| / * * * \ ||";
Escribir "|| \ * ___ * / ||";
Escribir "|| \ * * * / ||";
Escribir "|| / \ ||";
Escribir "|| / \ ||";
Escribir "|| / \ ||";
atajadas=atajadas+1;//cuenta las atajadas
arqueroAtajo=Verdadero;
FinSi
si tiro==2 y arquero==3 Entonces //si patea al centro y el arquero se mueve a la derecha: Gol
Borrar Pantalla;
goles=goles+1;//cuenta los goles
Escribir "Número de goles: ",goles;
Escribir "Número de atajadas: ",atajadas;
Escribir "___________________________________________________________";
Escribir "-----------------------------------------------------------";
Escribir "|| ||";
Escribir "|| * * * * * * ||";
Escribir "|| * X X * ||";
Escribir "|| * * * * n * ||";
Escribir "|| * \___/ * * * * * * * ||";
Escribir "|| *__/ \__* \ || / ||";
Escribir "|| * \___/ * \___||___/ ||";
Escribir "|| * * * || ||";
Escribir "|| || ||";
Escribir "|| / \ ||";
Escribir "|| / \ ||";
Escribir "|| / \ ||";
Escribir "";
Escribir " ¡GOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOL!";
Esperar 2 Segundos;
FinSi
si tiro==3 y arquero==1 Entonces //si patea a la derecha y el arquero se mueve a la izquierda: Gol
Borrar Pantalla;
goles=goles+1;//cuenta los goles
Escribir "Número de goles: ",goles;
Escribir "Número de atajadas: ",atajadas;
Escribir "___________________________________________________________";
Escribir "-----------------------------------------------------------";
Escribir "|| ||";
Escribir "|| * * * * * * ||";
Escribir "|| * X X * ||";
Escribir "|| * n * * * * ||";
Escribir "|| * * * * * * * \___/ * ||";
Escribir "|| \ || / *__/ \__* ||";
Escribir "|| \___||___/ * \___/ * ||";
Escribir "|| || * * * ||";
Escribir "|| || ||";
Escribir "|| / \ ||";
Escribir "|| / \ ||";
Escribir "|| / \ ||";
Escribir "";
Escribir " ¡GOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOL!";
Esperar 2 Segundos;
FinSi
si tiro==3 y arquero==2 Entonces //si patea a la derecha y el arquero se queda en el centro: Gol
Borrar Pantalla;
goles=goles+1;
Escribir "Número de goles: ",goles;
Escribir "Número de atajadas: ",atajadas;
Escribir "___________________________________________________________";
Escribir "-----------------------------------------------------------";
Escribir "|| ||";
Escribir "|| * * * * * * ||";
Escribir "|| * X X * ||";
Escribir "|| * n * * * * ||";
Escribir "|| * * * * * * * \___/ * ||";
Escribir "|| \ || / *__/ \__* ||";
Escribir "|| \___||___/ * \___/ * ||";
Escribir "|| || * * * ||";
Escribir "|| || ||";
Escribir "|| / \ ||";
Escribir "|| / \ ||";
Escribir "|| / \ ||";
Escribir "";
Escribir " ¡GOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOL!";
Esperar 2 Segundos;
FinSi
si tiro==3 y arquero==3 Entonces //si patea a la derecha y el arquero se mueve a la derecha: Atajada
Borrar Pantalla;
Escribir "Número de goles: ",goles;
Escribir "Número de atajadas: ",atajadas;
Escribir "___________________________________________________________",;
Escribir "-----------------------------------------------------------";
Escribir "|| ||";
Escribir "|| * * * * * * ||";
Escribir "|| * \ / * ||";
Escribir "|| * U * ||";
Escribir "|| * * * * * * ||";
Escribir "|| || ||";
Escribir "|| / * * * \ ||";
Escribir "|| \ * ___ * / ||";
Escribir "|| \ * * * / ||";
Escribir "|| / \ ||";
Escribir "|| / \ ||";
Escribir "|| / \ ||";
atajadas=atajadas+1;//cuenta las atajadas
arqueroAtajo=Verdadero;
FinSi
si arqueroAtajo==Verdadero Entonces //si el arquero atajó entonces le pregunta al usuario si desea seguir jugando
Escribir "Perdiste, el arquero atajó el penal";
Escribir "¿Seguir jugando? Si, presiona cualquier tecla, No presionar: N";
Leer jugar;
arqueroAtajo=Falso;//reseteo la variable
Borrar Pantalla;
FinSi
Hasta Que jugar=="n" o jugar=="N"
FinAlgoritmo
</0></pre>Unknownnoreply@blogger.com0Cali, Valle del Cauca, Colombia3.4516467 -76.5319854-24.858587136178844 -111.6882354 31.761880536178847 -41.375735399999996tag:blogger.com,1999:blog-1404221545709156312.post-3203337932031697332016-05-13T23:07:00.000-05:002016-05-13T23:07:33.059-05:00Juego de penales básico hecho con HTML y JavaScript<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5xk5kxjLCRyXcRfd6UhLYjGmvN5dItM2x1AD-h5zyYAfNHVbTx1UVGHJuFF0mBGRpHN-l57Sa0TNwwstsu9pwVFAxYd7_untK3hyphenhyphenx-WU5gKofGbae8kJLR0cTXoUJrtTNhCND-sQPt4A/s1600/penal.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5xk5kxjLCRyXcRfd6UhLYjGmvN5dItM2x1AD-h5zyYAfNHVbTx1UVGHJuFF0mBGRpHN-l57Sa0TNwwstsu9pwVFAxYd7_untK3hyphenhyphenx-WU5gKofGbae8kJLR0cTXoUJrtTNhCND-sQPt4A/s320/penal.png" /></a></div><br />
<a href="https://codeload.github.com/jerrycode/futbol/zip/master">Descargar código en github</a>Unknownnoreply@blogger.com1tag:blogger.com,1999:blog-1404221545709156312.post-33096777009838408742016-05-13T17:18:00.000-05:002016-05-13T23:08:15.285-05:00Realizar petición post con cURLEl siguiente ejemplo trata de como realizar una petición POST con cURL y obtener los datos del servidor en forma de JSON para su posterior manipulación. El ejercicio consiste en que el usuario ingrese un dato, en este caso el nombre de un sujeto y que el servidor devuelva la información de éste.<br />
<br />
El archivo index.php básicamente es la interfaz gráfica de la aplicación. Consta de una caja de texto y un botón; cuando lo presiona abre una sesión cURL a la url especificada y hace comunicación en el servidor, si la búsqueda es exitosa devuelve los respectivos resultados. <br />
<br />
Las principales líneas del código están comentadas para entender el proceso.<br />
<br />
<b>Archivo</b>: index.php<br />
<br />
<div style="background: #F5F5F5; color: steelblue;"><br />
<?php <br />
<br />
if ($_SERVER["REQUEST_METHOD"] == "POST") {//cuando se procesa el formulario<br />
<br />
$nombre=$_POST['usuario'];//capturo lo que tiene la caja de texto<br />
<br />
$variables="nombre_user=".$nombre;//el parametro nombre_user almacena el valor ingresado<br />
$url="http://localhost/curl/datos.php";<br />
<br />
$ch = curl_init($url);//inicia sesion cURL<br />
<br />
curl_setopt($ch, CURLOPT_POST, true);//peticion post<br />
curl_setopt($ch, CURLOPT_POSTFIELDS, $variables);//le envio el parametro a la url<br />
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);<br />
<br />
$result = curl_exec($ch);//obtengo la respuesta del servidor<br />
curl_close($ch); //liberar recursos<br />
<br />
} <br />
<br />
?><br />
<br />
<!DOCTYPE html><br />
<html><br />
<head><br />
<title>cURL</title><br />
</head><br />
<body><br />
<br />
<h2>cURL</h2><br />
<br />
<form method="POST" action="<?php echo $_SERVER["PHP_SELF"] ?>"><--se procesa el mismo--><br />
Nombre: <input type="text" name="usuario" placeholder="Entre usuario" required="required" /><br />
<input type="submit" value="Buscar" /><br />
<br />
</form><br />
<br />
<hr><br />
<br />
<?php <br />
<br />
if(isset($result)){//si esta variable (respuesta del servidor) tiene valor imprimo lo que tiene<br />
<br />
$user=json_decode($result);//como el servidor devuelve la info en forma de json, lo convierto en array para manipularlo.<br />
<br />
if(array_key_exists('nombre',$user)){//si el anterior array tiene una key nombre, es porque la busqueda fue exitosa.<br />
<br />
echo 'Id: '.$user->id.'<br >';<br />
echo 'Nombre: '.$user->nombre.'<br >';<br />
echo 'Edad: '.$user->edad;<br />
}else{<br />
echo $user->message;<br />
}<br />
<br />
}<br />
<br />
?><br />
<br />
</body><br />
</html><br />
<br />
</div><br />
Este archivo contiene la información de los usuarios en formato JSON, si el nombre ingresado por el usuario existe devuelve su información con forma de JSON.<br />
<br />
<b>Archivo</b>: datos.php<br />
<br />
<div style="background: #F5F5F5; color: steelblue;"><br />
<?php<br />
<br />
#json<br />
$json_users=' [{"id":"01","nombre":"John","edad":"26"},<br />
{"id":"02","nombre":"Pete","edad":"34"},<br />
{"id":"03","nombre":"Wilson","edad":"56"},<br />
{"id":"04","nombre":"Alan","edad":"12"},<br />
{"id":"05","nombre":"Rob","edad":"43"}] ';<br />
<br />
<br />
$nombre_user=$_POST['nombre_user'];//recibo el valor ingresado por el usuario<br />
<br />
$datos_users=json_decode($json_users);//convierto el anterior json en array para manipular datos<br />
<br />
//la variable $respuesta envia los resultados <br />
$respuesta='{"code":"404","message":"No encontrado"}';//si la búsqueda no contiene resultados envía un mensaje de no encontrado<br />
<br />
for ($i=0; $i < count($datos_users); $i++) { //recorro el array para realizar la busqueda<br />
<br />
if (strtolower($datos_users[$i]->nombre)==strtolower($nombre_user)){//si existe un usuario, le envio la respuesta de este en formato json<br />
<br />
$respuesta='{"id":"'.$datos_users[$i]->id.'","nombre":"'.$datos_users[$i]->nombre.'","edad":"'.$datos_users[$i]->edad.'"}';<br />
break; //detiene la busqueda <br />
<br />
}<br />
}<br />
<br />
echo $respuesta;//respuesta final del servidor<br />
<br />
?><br />
<br />
</div><br />
<a href="https://codeload.github.com/jerrycode/curl_blog/zip/master">Descargar código en Github</a>.Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-1404221545709156312.post-10697032023221255742013-08-12T18:43:00.002-05:002013-08-12T20:13:05.494-05:00Chat con AJAX - PHP - MySQL - JavaScriptA continuación se explica el código necesario para crear un chat básico con AJAX, PHP y MySQL.<br />
<br />
Se utiliza una tabla creada en MySQL llamada mensaje que posee los campos id (autoincrement), usuario (varchar) y contenido (text).<br />
<br />
El archivo index.html contiene la interfaz gráfica (cajas de texto, boton) y el código CSS. Se importa el archivo ajax.js que contiene el objeto <b>XMLHttpRequest</b> que me permite intercambiar datos de forma asíncrona con el servidor. Esto significa que es posible para actualizar partes de una página web, sin volver a cargar toda la página. <br />
<br />
Además contiene dos funciones javascript:<br />
<br />
1) mostrar: Esta función se ejecuta cada 3 segundos (<b>setInterval(mostrar,3000)</b>) y muestra en el div con id <i>historial</i> los mensajes almacenados en la base de datos a través del archivo <b>mensajes.php</b> que hace una consulta SQL. <br />
<br />
2) agregar: Esta función captura el usuario y mensaje ingresado, los valores los almaceno en las variables <b>usuario</b> y <b>cont</b> y se los envío al arhivo <b>proceso.php</b> para que a través del método <b>POST</b> las capture y las inserte a la base de datos.<br />
<a name='more'></a><br />
<b>Código:</b><br />
<br />
Archivo index.html<br />
<br />
<div style="background: #F5F5F5; color: steelblue;"><!DOCTYPE html><br />
<html><br />
<head><br />
<br />
<style><br />
<br />
#historial{<br />
border:1px solid gray;<br />
width:325px;<br />
height:400px;<br />
overflow:auto; <br />
}<br />
<br />
fieldset{<br />
width:300px;<br />
}<br />
<br />
</style><br />
<br />
<script src="ajax.js"></script><br />
<script><br />
<br />
function mostrar()<br />
{<br />
loadDoc(null,"mensajes.php",function()<br />
{<br />
if (xmlhttp.readyState==4 && xmlhttp.status==200)<br />
{<br />
document.getElementById("historial").innerHTML=xmlhttp.responseText;<br />
}<br />
});<br />
}<br />
<br />
setInterval(mostrar,3000);<br />
<br />
function agregar()<br />
{<br />
var u=document.getElementById('nombre').value;<br />
var c=document.getElementById('contenido').value;<br />
<br />
if(u!="" && c!=""){<br />
loadDoc("usuario="+u+"&cont="+c,"proceso.php",function()<br />
{<br />
if (xmlhttp.readyState==4 && xmlhttp.status==200)<br />
{<br />
document.getElementById("historial").innerHTML=xmlhttp.responseText;<br />
}<br />
});<br />
<br />
}else{ alert("No deje campos vacios"); }<br />
<br />
}<br />
</script><br />
</head><br />
<br />
<body><br />
<br />
<h1>CHAT-AJAX</h1><br />
<br />
<hr /><br />
<br />
<div id="historial"><img src="ajax-loader.gif" /></div><br />
<fieldset><br />
<legend>Chat:</legend><br />
<input type="text" id="nombre" placeholder="usuario" /><br /><br />
<textarea id="contenido" placeholder="mensaje"></textarea><br /><br />
<button onclick="agregar()">Ok</button><br />
</fieldset><br />
<br />
<hr /><br />
<br />
Creado por: http://codigojerry.blogspot.com/<br />
<br />
</body><br />
<br />
</html></div><br />
Archivo ajax.js<br />
<br />
<div style="background: #F5F5F5; color: steelblue;">var xmlhttp;<br />
function loadDoc(string,url,cfunc)<br />
{<br />
if (window.XMLHttpRequest)<br />
{// code for IE7+, Firefox, Chrome, Opera, Safari<br />
xmlhttp=new XMLHttpRequest();<br />
}<br />
else<br />
{// code for IE6, IE5<br />
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");<br />
}<br />
xmlhttp.onreadystatechange=cfunc;<br />
xmlhttp.open("POST",url,true);<br />
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");<br />
xmlhttp.send(string);<br />
}</div><br />
Archivo mensajes.php<br />
<br />
<div style="background: #F5F5F5; color: steelblue;"><?php<br />
<br />
$con=mysqli_connect("localhost","root","","chatajax");<br />
// Check connection<br />
if (mysqli_connect_errno())<br />
{<br />
echo "Failed to connect to MySQL: " . mysqli_connect_error();<br />
}<br />
<br />
$result = mysqli_query($con,"SELECT * FROM mensajes");<br />
<br />
while($row = mysqli_fetch_array($result))<br />
{<br />
echo "<b>".$row['usuario']."</b>: ".$row['contenido'];<br />
echo "<hr>";<br />
}<br />
<br />
mysqli_close($con);<br />
<br />
?><br />
</div><br />
Archivo procesar.php<br />
<br />
<div style="background: #F5F5F5; color: steelblue;"><?php<br />
$con=mysqli_connect("localhost","root","","chatajax");<br />
// Check connection<br />
if (mysqli_connect_errno())<br />
{<br />
echo "Failed to connect to MySQL: " . mysqli_connect_error();<br />
}<br />
<br />
$sql="INSERT INTO mensajes (usuario, contenido) VALUES ('".$_POST['usuario']."','".$_POST['cont']."')";<br />
<br />
if (!mysqli_query($con,$sql)){<br />
die('Error: ' . mysqli_error($con));<br />
}<br />
<br />
//respuesta <br />
$result = mysqli_query($con,"SELECT * FROM mensajes");<br />
while($row = mysqli_fetch_array($result))<br />
{<br />
echo "<b>".$row['usuario']."</b>: ".$row['contenido'];<br />
echo "<hr>";<br />
} <br />
<br />
mysqli_close($con);<br />
?> <br />
</div><br />
<a href="http://www.codigojerry.herobo.com/chatajax/chatajax2013.rar">Descargar</a><br />
<br />
<a target="_blank" href="http://youtu.be/rCXPUtfgGpA">Funcionamiento</a>Unknownnoreply@blogger.com3tag:blogger.com,1999:blog-1404221545709156312.post-87327474589559294132013-04-05T11:54:00.000-05:002013-07-05T00:01:40.620-05:00PSeInt: Calcular potencia de un númeroAlgoritmo que calcula la potencia de un número ingresado por el usuario:<br />
<style type="text/css">
.SSD { color:#FFFFFF; background-color:#000000; }
.SS0 { color:#000000; background-color:#FFFFFF; }
.SS1 { color:#000000; background-color:#FFFFFF; }
.SS2 { font-style: italic; color:#969696; background-color:#FFFFFF; }
.SS3 { font-style: italic; color:#0000FF; background-color:#FFFFFF; }
.SS4 { color:#8E6B23; background-color:#FFFFFF; }
.SS5 { font-weight: bold; color:#000080; background-color:#FFFFFF; }
.SS6 { color:#FF0000; background-color:#FFFFFF; }
.SS7 { color:#FF0000; background-color:#FFFFFF; }
.SS8 { color:#DB70DB; background-color:#FFFFFF; }
.SS9 { color:#238E23; background-color:#FFFFFF; }
.SS10 { font-weight: bold; color:#000000; background-color:#FFFFFF; }
.SS11 { color:#000000; background-color:#FFFFFF; }
.SS12 { color:#FF0000; background-color:#F0F0F0; }
.SS13 { color:#000000; background-color:#FFFFFF; }
.SS14 { color:#DB70DB; background-color:#FFFFFF; }
.SS15 { color:#238E23; background-color:#FFFFFF; }
.SS16 { color:#000080; background-color:#FFFFFF; }
.SS17 { color:#42426F; background-color:#FFFFFF; }
.SS18 { color:#FF0000; background-color:#FFFFFF; }
.SS19 { color:#000000; background-color:#BFD8D8; }
.SS34 { font-weight: bold; color:#FF0000; background-color:#F0F0FF; }
.SS35 { font-weight: bold; color:#800000; background-color:#FFFFFF; }
</STYLE><br />
<pre><span class="SS5">Proceso</SPAN><span class="SS0"> </SPAN><span class="SS11">potencia</SPAN><span class="SS0">
</SPAN><span class="SS11">acum</SPAN><span class="SS5"><-</SPAN><span class="SS4">1</SPAN><span class="SS10">;</SPAN><span class="SS0">
</SPAN><span class="SS5">Escribir</SPAN><span class="SS0"> </SPAN><span class="SS6">"Digite base"</SPAN><span class="SS10">;</SPAN><span class="SS0">
</SPAN><span class="SS5">Leer</SPAN><span class="SS0"> </SPAN><span class="SS11">base</SPAN><span class="SS10">;</SPAN><span class="SS0">
</SPAN><span class="SS5">Escribir</SPAN><span class="SS0"> </SPAN><span class="SS6">"Digite exponente"</SPAN><span class="SS10">;</SPAN><span class="SS0">
</SPAN><span class="SS5">Leer</SPAN><span class="SS0"> </SPAN><span class="SS11">exponente</SPAN><span class="SS10">;</SPAN><span class="SS0">
</SPAN><span class="SS5">Para</SPAN><span class="SS0"> </SPAN><span class="SS11">i</SPAN><span class="SS5"><-</SPAN><span class="SS4">1</SPAN><span class="SS0"> </SPAN><span class="SS5">Hasta</SPAN><span class="SS0"> </SPAN><span class="SS11">exponente</SPAN><span class="SS0"> </SPAN><span class="SS5">Con</SPAN><span class="SS0"> </SPAN><span class="SS5">Paso</SPAN><span class="SS0"> </SPAN><span class="SS4">1</SPAN><span class="SS0"> </SPAN><span class="SS5">Hacer</SPAN><span class="SS0">
</SPAN><span class="SS11">acum</SPAN><span class="SS5"><-</SPAN><span class="SS11">acum</SPAN><span class="SS10">*</SPAN><span class="SS11">base</SPAN><span class="SS10">;</SPAN><span class="SS0">
</SPAN><span class="SS5">FinPara</SPAN><span class="SS0">
</SPAN><span class="SS5">Escribir</SPAN><span class="SS0"> </SPAN><span class="SS11">base</SPAN><span class="SS10">,</SPAN><span class="SS6">" elevado a la "</SPAN><span class="SS10">,</SPAN><span class="SS11">exponente</SPAN><span class="SS10">,</SPAN><span class="SS6">" es: "</SPAN><span class="SS10">,</SPAN><span class="SS11">acum</SPAN><span class="SS10">;</SPAN><span class="SS0">
</SPAN><span class="SS5">FinProceso</SPAN><span class="SS0">
</SPAN>
</PRE>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-1404221545709156312.post-58628154148978522922013-04-05T11:42:00.001-05:002013-05-24T15:45:40.208-05:00PSeInt: Factorial de un númeroEl siguiente pseudocodigo calcula el factorial de un número ingresado por el usuario:<br />
<style type="text/css">
.SSD { color:#FFFFFF; background-color:#000000; }
.SS0 { color:#000000; background-color:#FFFFFF; }
.SS1 { color:#000000; background-color:#FFFFFF; }
.SS2 { font-style: italic; color:#969696; background-color:#FFFFFF; }
.SS3 { font-style: italic; color:#0000FF; background-color:#FFFFFF; }
.SS4 { color:#8E6B23; background-color:#FFFFFF; }
.SS5 { font-weight: bold; color:#000080; background-color:#FFFFFF; }
.SS6 { color:#FF0000; background-color:#FFFFFF; }
.SS7 { color:#FF0000; background-color:#FFFFFF; }
.SS8 { color:#DB70DB; background-color:#FFFFFF; }
.SS9 { color:#238E23; background-color:#FFFFFF; }
.SS10 { font-weight: bold; color:#000000; background-color:#FFFFFF; }
.SS11 { color:#000000; background-color:#FFFFFF; }
.SS12 { color:#FF0000; background-color:#F0F0F0; }
.SS13 { color:#000000; background-color:#FFFFFF; }
.SS14 { color:#DB70DB; background-color:#FFFFFF; }
.SS15 { color:#238E23; background-color:#FFFFFF; }
.SS16 { color:#000080; background-color:#FFFFFF; }
.SS17 { color:#42426F; background-color:#FFFFFF; }
.SS18 { color:#FF0000; background-color:#FFFFFF; }
.SS19 { color:#000000; background-color:#BFD8D8; }
.SS34 { font-weight: bold; color:#FF0000; background-color:#F0F0FF; }
.SS35 { font-weight: bold; color:#800000; background-color:#FFFFFF; }
</STYLE><br />
<pre><span class="SS5">Proceso</SPAN><span class="SS0"> </SPAN><span class="SS11">factorial</SPAN><span class="SS0">
</SPAN><span class="SS11">acum</SPAN><span class="SS5"><-</SPAN><span class="SS4">1</SPAN><span class="SS10">;</SPAN><span class="SS0">
</SPAN><span class="SS5">Escribir</SPAN><span class="SS0"> </SPAN><span class="SS6">"Digite un numero para calcular su factorial"</SPAN><span class="SS10">;</SPAN><span class="SS0">
</SPAN><span class="SS5">Leer</SPAN><span class="SS0"> </SPAN><span class="SS11">num</SPAN><span class="SS10">;</SPAN><span class="SS0">
</SPAN><span class="SS5">Para</SPAN><span class="SS0"> </SPAN><span class="SS11">i</SPAN><span class="SS5"><-</SPAN><span class="SS4">1</SPAN><span class="SS0"> </SPAN><span class="SS5">Hasta</SPAN><span class="SS0"> </SPAN><span class="SS11">num</SPAN><span class="SS0"> </SPAN><span class="SS5">Con</SPAN><span class="SS0"> </SPAN><span class="SS5">Paso</SPAN><span class="SS0"> </SPAN><span class="SS4">1</SPAN><span class="SS0"> </SPAN><span class="SS5">Hacer</SPAN><span class="SS0">
</SPAN><span class="SS11">acum</SPAN><span class="SS5"><-</SPAN><span class="SS11">acum</SPAN><span class="SS10">*</SPAN><span class="SS11">i</SPAN><span class="SS10">;</SPAN><span class="SS0">
</SPAN><span class="SS5">FinPara</SPAN><span class="SS0">
</SPAN><span class="SS5">Escribir</SPAN><span class="SS0"> </SPAN><span class="SS6">"El factorial de "</SPAN><span class="SS10">,</SPAN><span class="SS11">num</SPAN><span class="SS10">,</SPAN><span class="SS6">" es "</SPAN><span class="SS10">,</SPAN><span class="SS11">acum</SPAN><span class="SS10">;</SPAN><span class="SS0">
</SPAN><span class="SS5">FinProceso</SPAN><span class="SS0">
</SPAN>
</PRE>Se crea un variable acumuladora para almacenar las multiplicaciones.Unknownnoreply@blogger.com5tag:blogger.com,1999:blog-1404221545709156312.post-85567223543423956242013-03-31T22:13:00.001-05:002013-03-31T22:13:28.841-05:00Constante PI en PSeIntPSeInt a partir de la versión <b>20130331</b> "31/marzo/2013" incluye la constante <b>PI</b>. Una constante imprescindible a la hora de trabajar con funciones u operaciones matemáticas. Para averiguar su valor basta con la siguiente línea de código:<br />
<PRE><SPAN class="SS5">Proceso</SPAN><SPAN class="SS0"> </SPAN><SPAN class="SSD75">sin_titulo</SPAN><SPAN class="SS0">
</SPAN><SPAN class="SS5">Escribir</SPAN><SPAN class="SS0"> </SPAN><SPAN class="SS6">"El valor de PI: "</SPAN><SPAN class="SS10">,</SPAN><SPAN class="SS16">PI</SPAN><SPAN class="SS10">;</SPAN><SPAN class="SS0">
</SPAN><SPAN class="SS5">FinProceso</SPAN><SPAN class="SS0">
</SPAN>
</PRE><style type="text/css">
.SSD { color:#FFFFFF; background-color:#000000; }
.SS0 { color:#000000; background-color:#FFFFFF; }
.SS1 { color:#000000; background-color:#FFFFFF; }
.SS2 { font-style: italic; color:#969696; background-color:#FFFFFF; }
.SS3 { font-style: italic; color:#0000FF; background-color:#FFFFFF; }
.SS4 { color:#8E6B23; background-color:#FFFFFF; }
.SS5 { font-weight: bold; color:#000080; background-color:#FFFFFF; }
.SS6 { color:#FF0000; background-color:#FFFFFF; }
.SS7 { color:#FF0000; background-color:#FFFFFF; }
.SS8 { color:#DB70DB; background-color:#FFFFFF; }
.SS9 { color:#238E23; background-color:#FFFFFF; }
.SS10 { font-weight: bold; color:#000000; background-color:#FFFFFF; }
.SS11 { color:#000000; background-color:#FFFFFF; }
.SS12 { color:#FF0000; background-color:#F0F0F0; }
.SS13 { color:#000000; background-color:#FFFFFF; }
.SS14 { color:#DB70DB; background-color:#FFFFFF; }
.SS15 { color:#238E23; background-color:#FFFFFF; }
.SS16 { color:#000080; background-color:#FFFFFF; }
.SS17 { color:#42426F; background-color:#FFFFFF; }
.SS18 { color:#FF0000; background-color:#FFFFFF; }
.SS19 { color:#000000; background-color:#BFD8D8; }
.SS34 { font-weight: bold; color:#FF0000; background-color:#F0F0FF; }
.SS35 { font-weight: bold; color:#800000; background-color:#FFFFFF; }
</style>Unknownnoreply@blogger.com2tag:blogger.com,1999:blog-1404221545709156312.post-39991023167795770402013-03-31T21:27:00.001-05:002013-03-31T21:34:17.609-05:00AJAX y XML: Extraer o recuperar datos de un archivo XML con AJAXPara el siguiente tutorial se necesitan conocimientos en AJAX, JavaScript, XML y XML DOM.<br />
<br />
Se tiene la siguiente información en un archivo <b>XML</b>:<br />
<br />
Archivo <b>libros.xml</b><br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCzQJAb1gq-TFA5A7UToshMgKd1TNefZegTmEouXdXnbmQRB2Xn1LASYq71mhSXM-vdKl5mUR6ByuD_sz4ipVh5PdOpkVXI3S93CyfI9Z_Jv9vEZ1xIHEN_ay90hQP8665WzeHY1GvWAc/s1600/p.PNG" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCzQJAb1gq-TFA5A7UToshMgKd1TNefZegTmEouXdXnbmQRB2Xn1LASYq71mhSXM-vdKl5mUR6ByuD_sz4ipVh5PdOpkVXI3S93CyfI9Z_Jv9vEZ1xIHEN_ay90hQP8665WzeHY1GvWAc/s320/p.PNG" /></a><br />
<br />
Obtendremos a través de <b>AJAX</b> esa información y la mostraremos en el navegador en una tabla <b>HTML</b>.<br />
<a name='more'></a><br />
En nuestro archivo index.php creamos un div y un botón para que cuando sea presionado muestre dentro del div la información que contiene el archivo XML. En el head importamos el archivo ajax.js que contiene la funcion <b>JavaScript</b> <u>loadXMLDoc()</u>.<br />
<br />
Archivo <b>index.php</b><br />
<br />
<div style="background: #F5F5F5; color: steelblue;"><br />
<!DOCTYPE html><br />
<html><br />
<br />
<head><br />
<script src="ajax.js"></script><br />
</head><br />
<br />
<body><br />
<br />
<h1>Asynchronous JavaScript and XML (AJAX)</h1><br />
<br />
<p>Obtener informaci&oacute;n de un archivo XML a trav&eacute;s de AJAX.</p><br />
<br />
<div id="info"><br />
<button type="button" onclick="loadXMLDoc()">Obtener datos</button><br />
</div><br />
<br />
</body><br />
</html><br />
<br />
</div><br />
El archivo ajax.js es el archivo principal, el método <u>open()</u> carga el archivo que vamos a procesar (libros.xml), pero es con el método <b>getElementsByTagName(<i>name</i>)</b> que obtenemos todos los elementos (datos) de una etiqueta específica. Por ejemplo en la línea:<br />
<br />
<div style="background: #F5F5F5; color: steelblue;">x=xmlDoc.getElementsByTagName("libro");</div><br />
Lo que hace es obtener todos los elementos de la etiqueta libro y almacenarlos en la variable x como una lista de nodos. Una lista de nodos es un array de nodos, que se pueden recorrer a través de posiciones (como un arreglo) comenzando desde cero.<br />
<br />
Con un ciclo for recorremos el array x:<br />
<br />
<div style="background: #F5F5F5; color: steelblue;"><br />
for (i=0;i<x.<b>length</b>;i++)<br />
{<br />
txt=txt+"<tr><td>";<br />
<b>txt=txt + x[i].getElementsByTagName("titulo")[0].childNodes[0].nodeValue;</b><br />
txt=txt+"</td>";<br />
<br />
txt=txt+"<td>";<br />
<b>txt=txt + x[i].getElementsByTagName("autor")[0].childNodes[0].nodeValue;</b><br />
txt=txt+"</td>";<br />
<br />
txt=txt+"<td>";<br />
<b>txt=txt + x[i].getElementsByTagName("pais")[0].childNodes[0].nodeValue;</b><br />
txt=txt+"</td></tr>";<br />
}<br />
<br />
</div><br />
Con la propiedad <b>length</b> calculamos automaticamente el tamaño del array. En este caso 5 libros.<br />
<br />
La funcion o tarea de la línea:<br />
<br />
<div style="background: #F5F5F5; color: steelblue;">x[i].getElementsByTagName("titulo")[0].childNodes[0].nodeValue;</div><br />
Es que para cada libro obtenga el texto que contiene el elemento <title>. <br />
<br />
<b>getElementsByTagName("title")[0]</b> - El primer elemento <title> <br />
<b>childNodes[0]</b> - El primer hijo del elemento <title> (el texto del nodo)<br />
<b>nodeValue</b> - El valor del nodo (el propio texto)<br />
<br />
Lo anterior tambien aplica para obtener el autor y pais de cada libro. La variable txt es para mostrar la información en una tabla HTML.<br />
<br />
Archivo <b>ajax.js</b><br />
<br />
<div style="background: #F5F5F5; color: steelblue;"><br />
function loadXMLDoc()<br />
{<br />
var xmlhttp;<br />
var txt,x,i;<br />
if (window.XMLHttpRequest)<br />
{// code for IE7+, Firefox, Chrome, Opera, Safari<br />
xmlhttp=new XMLHttpRequest();<br />
}<br />
else<br />
{// code for IE6, IE5<br />
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");<br />
}<br />
xmlhttp.onreadystatechange=function()<br />
{<br />
if (xmlhttp.readyState==4 && xmlhttp.status==200)<br />
{<br />
xmlDoc=xmlhttp.responseXML;<br />
txt="";<br />
<b>x=xmlDoc.getElementsByTagName("libro");</b><br />
<br />
txt="<table border='1'><tr><th>Titulo</th><th>Autor</th><th>Pais</th></tr>";<br />
<br />
for (i=0;i<x.length;i++)<br />
{<br />
txt=txt+"<tr><td>";<br />
<b>txt=txt + x[i].getElementsByTagName("titulo")[0].childNodes[0].nodeValue;</b><br />
txt=txt+"</td>";<br />
<br />
txt=txt+"<td>";<br />
<b>txt=txt + x[i].getElementsByTagName("autor")[0].childNodes[0].nodeValue;</b><br />
txt=txt+"</td>";<br />
<br />
txt=txt+"<td>";<br />
<b>txt=txt + x[i].getElementsByTagName("pais")[0].childNodes[0].nodeValue;</b><br />
txt=txt+"</td></tr>";<br />
}<br />
<br />
txt=txt+"</table>";<br />
<br />
<b>document.getElementById("info").innerHTML=txt;</b><br />
}<br />
}<br />
<b>xmlhttp.open("GET","libros.xml",true);</b><br />
xmlhttp.send();<br />
}<br />
<br />
</div><br />
<a href="http://adf.ly/M1Kzm" target="_blank"><b>Demo/Código fuente</b></a>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-1404221545709156312.post-40149207952148444682013-03-27T23:19:00.002-05:002013-03-27T23:49:14.204-05:00Conectar PHP y MS AccessPara conectar <b>PHP</b> y <b>Access</b> necesitamos crear una coneccion <b>ODBC</b> (Open Database Connectivity), para ello realizamos los siguientes pasos:<br />
<a name='more'></a><br />
1. Abrir <b>herramientas administrativas</b> ubicado en el panel de control.<br />
2. Clic en <b>Orígenes de datos (ODBC)</b>.<br />
3. Escojemos la pestaña <b>DSN de sistema</b>.<br />
4. Clic en el botón <b>Agregar</b>.<br />
5. Seleccionamos <b>Microsoft Access Driver (*.mdb, *.accdb)</b> y clic en el botón <b>Finalizar</b>.<br />
6. Clic en el botón <b>Seleccionar</b>, buscamos el directorio donde está la base de datos, la seleccionamos y Aceptar.<br />
7. En el campo de texto <b>Nombre del origen de datos</b> escribimos obligatoriamente un DSN (cualquiera) para la base de datos (Ej: midsn, prueba, etc).<br />
8. Clic en <b>Aceptar</b>.<br />
<br />
<b>Código PHP</b><br />
<br />
Para hacer la conexion lo hacemos con la funcion <b>odbc_connect()</b> que recibe tres parámetros: el DSN que escribimos en el paso 7, el usuario y el password (si existen).<br />
<br />
Archivo <b>conexion.php</b><br />
<br />
<div style="background: #F5F5F5; color: steelblue;"><br />
<?php<br />
<br />
function conexion(){<br />
<br />
$conn=odbc_connect('midsn','','');//DSN, usuario, password<br />
<br />
if (!$conn){<br />
<br />
exit("Falló conexion: " . $conn);<br />
<br />
}<br />
<br />
return($conn);<br />
<br />
}<br />
<br />
?><br />
<br />
</div><br />
En el otro archivo, es donde recuperamos los datos de la base de datos y lo mostramos en una tabla HTML.<br />
<br />
Archivo <b>index.php</b><br />
<br />
<div style="background: #F5F5F5; color: steelblue;"><br />
<br />
<!DOCTYPE html><br />
<html><br />
<body><br />
<br />
<?php<br />
<br />
include 'conexion.php';<br />
$conn=conexion();<br />
<br />
$sql="SELECT * FROM estudiantes";<br />
$rs=odbc_exec($conn,$sql);<br />
<br />
if (!$rs){<br />
<br />
exit("Error in SQL");<br />
<br />
}<br />
?><br />
<br />
<table border="1"><br />
<tr><br />
<th>Codigo</th><br />
<th>Nombre</th><br />
<th>Edad</th><br />
<th>Telefono</th><br />
</tr><br />
<br />
<?php<br />
<br />
while (odbc_fetch_row($rs)){<br />
<br />
$id=odbc_result($rs,"id");//campo de la BD<br />
$nombre=odbc_result($rs,"nombre");//campo de la BD<br />
$edad=odbc_result($rs,"edad");//campo de la BD<br />
$telefono=odbc_result($rs,"telefono");//campo de la BD<br />
<br />
?><br />
<tr><br />
<td><?phpecho $id; ?></td><br />
<td><?php echo $nombre; ?></td><br />
<td><?php echo $edad; ?></td><br />
<td><?php echo $telefono; ?></td><br />
</tr><br />
<?php <br />
}<br />
<br />
odbc_close($conn);<br />
?><br />
</table><br />
<br />
</body><br />
</html> <br />
<br />
</div><br />
Esta es la tabla utilizada en el ejemplo:<br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxMKcZEKvsOBKljz8XJFe8wm3M_TQb5jG0oLC_kdPAzBxsz3tXfL6IhpRxBaBaBgK3eAAsbnIyDFwglgIWm-ciO8pa4Ks0Pn7sqtogPumEfb3lKHBWN88qyUqEa8fyEOSDDK-I0Jylrf0/s1600/table.PNG" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxMKcZEKvsOBKljz8XJFe8wm3M_TQb5jG0oLC_kdPAzBxsz3tXfL6IhpRxBaBaBgK3eAAsbnIyDFwglgIWm-ciO8pa4Ks0Pn7sqtogPumEfb3lKHBWN88qyUqEa8fyEOSDDK-I0Jylrf0/s320/table.PNG" /></a><br />
<br />
<a href="http://adf.ly/LlRXn">Descargar código</a>Unknownnoreply@blogger.com3tag:blogger.com,1999:blog-1404221545709156312.post-38045171748977379452012-12-10T20:55:00.003-05:002013-03-16T15:31:33.383-05:00Mostrar datos en una tabla desde un select PHP + MySQL + AJAXLo que se hará es que el usuario al seleccionar una opción de la lista desplegable se muestre en una tabla información detallada de la opción escogida. Con <b>AJAX</b> se elimina el uso del botón.<br />
<a name='more'></a><br />
conexion.php<br />
<br />
<div style="background: #F5F5F5; color: steelblue;"><br />
<?php<br />
<br />
function conexion(){<br />
<br />
$con = mysql_connect("localhost","root","");<br />
<br />
if (!$con){<br />
<br />
die('Could not connect: ' . mysql_error());<br />
}<br />
<br />
mysql_select_db("database", $con);<br />
<br />
return($con);<br />
<br />
}<br />
<br />
?><br />
<br />
</div><br />
En el archivo principal, está la función <b>JavaScript</b> <b>mostrarInfo()</b> que se ejecuta cuando el usuario hace click en una opcion del select. Recibe como parámetro el codigo de un registro, para que a través del método <b>POST</b> el archivo <b>proceso.php</b> haga la consulta a la base de datos. Los registros cargados en select estan de forma estática (sin MySQL).<br />
<br />
index.php<br />
<br />
<div style="background: #F5F5F5; color: steelblue;"><br />
<!DOCTYPE html><br />
<html><br />
<head><br />
<br />
<script><br />
<br />
function mostrarInfo(cod){<br />
<br />
if (window.XMLHttpRequest)<br />
{// code for IE7+, Firefox, Chrome, Opera, Safari<br />
xmlhttp=new XMLHttpRequest();<br />
}<br />
else<br />
{// code for IE6, IE5<br />
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");<br />
}<br />
xmlhttp.onreadystatechange=function()<br />
{<br />
if (xmlhttp.readyState==4 && xmlhttp.status==200)<br />
{<br />
document.getElementById("datos").innerHTML=xmlhttp.responseText;<br />
}else{ <br />
document.getElementById("datos").innerHTML='Cargando...';<br />
}<br />
}<br />
xmlhttp.open("POST","proceso.php",true);<br />
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");<br />
xmlhttp.send("cod_banda="+cod);<br />
<br />
}<br />
<br />
</script><br />
<br />
</head><br />
<body><br />
<br />
<form><br />
<br />
<select onchange="mostrarInfo(this.value)"><br />
<option value="">Seleccione</option><br />
<option value="1">The Speakers</option><br />
<option value="2">The Doors</option><br />
<option value="3">The Rolling Stones</option><br />
<option value="4">Los Shakers</option><br />
</select><br />
<br />
</form><br />
<br />
<div id="datos"></div><br />
<br />
</body><br />
</html> <br />
<br />
</div><br />
El codigo que nos envían desde index.php se almacena en la variable cod_banda. Este archivo lo que hace es capturarla y hacer la query a la base de datos. La información se muestra en una tabla y es lo que se va a visualizar en la página principal sin recargar la página entera.<br />
<br />
proceso.php<br />
<br />
<div style="background: #F5F5F5; color: steelblue;"><br />
<?php<br />
<br />
include 'conexion.php';<br />
<br />
$con=conexion();<br />
<br />
$res=mysql_query("select * from grupo_artista where codigo='".$_POST[cod_banda]."'",$con);<br />
<br />
?><br />
<br />
<table border="1"><br />
<br />
<tr><br />
<th>Codigo</th><br />
<th>Banda</th><br />
<th>Genero</th><br />
<th>Origen</th><br />
</tr><br />
<br />
<?php while($fila=mysql_fetch_array($res)){ ?><br />
<br />
<tr><br />
<td><?php echo $fila[codigo]; ?></td><br />
<td><?php echo $fila[nombre]; ?></td><br />
<td><?php echo $fila[genero]; ?></td><br />
<td><?php echo $fila[pais]; ?></td><br />
</tr><br />
<br />
<?php } ?><br />
<br />
</table><br />
<br />
<?php mysql_close($con); ?><br />
<br />
</div><br />
<a href="http://adf.ly/KywaY" target="_blank"><b>Demo/código fuente</b></a>Unknownnoreply@blogger.com16tag:blogger.com,1999:blog-1404221545709156312.post-9483664954885999812012-12-07T21:59:00.004-05:002013-03-16T15:29:53.797-05:00DataTable jQuery con PHP y MySQL<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-gxBKk44X-0VvzE7CX0iG4xUcYj484VVCGgEH1K5yxy0kdKVGTVKRju5RE1w-CKaAmNe97aitt_rAvPoaNtFqte3ZDDpXlQMkTZ5pyFALm_qEtj6eE164WEknWJEn5kJtb6c92wodaD4/s1600/table.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-gxBKk44X-0VvzE7CX0iG4xUcYj484VVCGgEH1K5yxy0kdKVGTVKRju5RE1w-CKaAmNe97aitt_rAvPoaNtFqte3ZDDpXlQMkTZ5pyFALm_qEtj6eE164WEknWJEn5kJtb6c92wodaD4/s200/table.PNG" height="51" width="200" /></a></div><b>DataTable</b> es un poderoso <i>plug-in</i> para <b>jQuery</b>, que permite de una manera fácil personalizar nuestras tablas <b>HTML</b>. Tal vez el mejor que existe. Podemos integrarlo con <b>PHP</b>, <b>MySQL</b>, <b>AJAX</b>, <b>JSON</b>, entre otros.<br />
<a name='more'></a><br />
A continuación los pasos:<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAITfI2jFpunMefElAXiYW0f8Dk0UkexiTet7CLbJZ4oS5OSD1gTftBXXHHB1tUniVamakmQQ_UImZsU14gC946qU1qL50xjdIMkb56UnQvbMxo9FsyNXFcWyPydB1BvAD51bC95r3bdI/s1600/archivos.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAITfI2jFpunMefElAXiYW0f8Dk0UkexiTet7CLbJZ4oS5OSD1gTftBXXHHB1tUniVamakmQQ_UImZsU14gC946qU1qL50xjdIMkb56UnQvbMxo9FsyNXFcWyPydB1BvAD51bC95r3bdI/s400/archivos.PNG" height="99" width="400" /></a></div><br />
Importar los estilos y los archivos javascript.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhF9aBuG_Cey_FFOZd_9AsuVKBKbi_KSK4HT6WaiCr3Lub6xrsp73nlmCP9uvpywucgEOUzcOamLfWQ6TCQAnZaIpHsLUAt570JcHkfMbyDHqE2taUgvBkj5m0flYXfCGQfoOi7oTJPpeo/s1600/step2.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhF9aBuG_Cey_FFOZd_9AsuVKBKbi_KSK4HT6WaiCr3Lub6xrsp73nlmCP9uvpywucgEOUzcOamLfWQ6TCQAnZaIpHsLUAt570JcHkfMbyDHqE2taUgvBkj5m0flYXfCGQfoOi7oTJPpeo/s400/step2.PNG" height="349" width="400" /></a></div><br />
Código jQuery, contiene los parámetros necesarios para pasar algunos mensajes a español.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWwR3gplrVyPW3H2S1rdFzFh9vQpZW3AwH_rgOULWxMFjikTZhEYCDTrEN7vPA0o_BTEsdDuslr4hn6pfewzZqo3hfWF1K0iP5wVhRYWP6VOn730JEMDKJoOmtiVX304QAolhqvQJkats/s1600/step3.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWwR3gplrVyPW3H2S1rdFzFh9vQpZW3AwH_rgOULWxMFjikTZhEYCDTrEN7vPA0o_BTEsdDuslr4hn6pfewzZqo3hfWF1K0iP5wVhRYWP6VOn730JEMDKJoOmtiVX304QAolhqvQJkats/s400/step3.PNG" height="344" width="400" /></a></div><br />
La tabla HTML con su id y el código PHP para llenar la tabla con valores de la base de datos. <br />
<br />
<a href="http://adf.ly/KywE6" target="_blank"><b>Demo/código fuente</b></a>Unknownnoreply@blogger.com3tag:blogger.com,1999:blog-1404221545709156312.post-70484612340728353562012-12-06T16:47:00.001-05:002012-12-06T16:54:18.690-05:00Drag and Drop en HTML5<b>Drag and Drop</b> consiste en <u>arrastrar</u> un elemento y <u>soltarlo</u> en otro lugar, en la web esto se facilita gracias a <b>HTML5</b>, con <b>jQuery</b> esto tambien es posible. Para hacer un <i>Drag and Drop</i> debes tener un navegador moderno o actualizado.<br />
<br />
El siguiente código mueve una imagen entre tres divs:<br />
<a name='more'></a><br />
<div style="background: #F5F5F5; color: steelblue;"><br />
<!DOCTYPE HTML><br />
<html><br />
<head><br />
<br />
<style type="text/css"><br />
<br />
div{<br />
<br />
border:1px solid #aaaaaa;<br />
float:left; <br />
height:168px; <br />
margin:10px;<br />
width:163px;<br />
<br />
}<br />
<br />
</style><br />
<br />
<script><br />
<br />
function dejarSoltar(ev){<br />
ev.preventDefault();<br />
}<br />
<br />
function arrastrar(ev){<br />
ev.dataTransfer.setData("Text",ev.target.id);<br />
}<br />
<br />
function soltar(ev){<br />
ev.preventDefault();<br />
var data=ev.dataTransfer.getData("Text");<br />
ev.target.appendChild(document.getElementById(data));<br />
}<br />
<br />
</script><br />
<br />
</head><br />
<br />
<body><br />
<br />
<div ondrop="soltar(event)" ondragover="dejarSoltar(event)"></div><br />
<br />
<div ondrop="soltar(event)" ondragover="dejarSoltar(event)"><br />
<img src="cara.jpg" draggable="true" ondragstart="arrastrar(event)" id="carafeliz"><br />
</div><br />
<br />
<div ondrop="soltar(event)" ondragover="dejarSoltar(event)"></div><br />
<br />
</body><br />
</html><br />
<br />
</div><br />
<b>Explicación:</b><br />
<br />
Para hacer un elemento arrastrable tiene que tener el siguiente atributo:<br />
<br />
<div style="background: #F5F5F5; color: steelblue;"><b>draggable="true"</b></div><br />
Como vamos a mover una imagen el código queda de la siguiente forma:<br />
<br />
<div style="background: #F5F5F5; color: steelblue;"><img src="cara.jpg" draggable="true" id="carafeliz"></div><br />
<u>Es importante agregarle un id a la imagen</u>.<br />
<br />
<b>Nota:</b> <i>En HTML Cualquier elemento puede ser arrastrable.</i><br />
<br />
La imagen además de tener esos dos atributos, tambien debe tener el evento <b>ondragstart</b> que llama a una función (<i><b>arrastrar(event)</b></i>) ésta función especifica que datos van a ser arrastrados.<br />
<br />
<div style="background: #F5F5F5; color: steelblue;"><img src="cara.jpg" draggable="true" <b>ondragstart="arrastrar(event)"</b> id="carafeliz"></div><br />
El método <b>dataTransfer.setData()</b> que contiene la función arrastrar() establece el tipo de datos y el valor de los datos arrastrados:<br />
<br />
<div style="background: #F5F5F5; color: steelblue;">function arrastrar(ev){<br />
ev.dataTransfer.setData("Text",ev.target.id);<br />
}</div><br />
En este caso, el tipo de datos es "Texto" y el valor es el id del elemento arrastrable ("carafeliz").<br />
<br />
Se han creado tres divs, que son los "lugares" donde la imagen puede soltarse. Cada div tiene dos eventos que llaman a una función <b>JavaScript</b> ellos son: <b>ondragover</b> y <b>ondrop</b>.<br />
<br />
<div style="background: #F5F5F5; color: steelblue;"><div <b>ondrop="soltar(event)" ondragover="dejarSoltar(event)"</b>></div></div><br />
El evento <b>ondragover</b> especifíca donde los datos arrastrados pueden ser soltados. Por defecto los datos o elementos no pueden ser soltados en otros elementos. Para ello se llama al método <b>event.preventDefault()</b>.<br />
<br />
<div style="background: #F5F5F5; color: steelblue;">function dejarSoltar(ev){<br />
ev.preventDefault();<br />
}</div><br />
Cuando los datos arrastardos son soltados la función <b>soltar(event)</b> se dispara.<br />
<br />
<div style="background: #F5F5F5; color: steelblue;">function soltar(ev){<br />
ev.preventDefault();<br />
var data=ev.dataTransfer.getData("Text");<br />
ev.target.appendChild(document.getElementById(data));<br />
}</div><br />
Se Obtiene los datos arrastrados con el método <b>dataTransfer.getData("Text")</b>. Este método devolverá todos los datos que se establecieron en el método <b>setData()</b>.<br />
El dato arrastrado es el id del elemento arrastrable (imagen con id igual a <i>carafeliz</i>).<br />
A través de <b>appendChild</b> se agrega el elemento en el div.<br />
<br />
<a href="http://codigojerry.herobo.com/Drag&DropHTML5/" target="_blank"><b>Demo/Código fuente</b></a>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-1404221545709156312.post-35780653035767677582012-11-30T21:46:00.001-05:002013-03-16T15:32:08.880-05:00Mover una imagen sobre el canvas de HTML5 con el tecladoEl siguiente código permite mover con el teclado una imagen sobre el canvas de <b>HTML5</b>. <br />
<a name='more'></a><br />
<div style="background: #F5F5F5; color: steelblue;"><br />
<!DOCTYPE html><br />
<html><br />
<head><br />
<br />
<meta charset="UTF-8"><br />
<br />
<script><br />
<br />
var x=200, y=400;//coordenadas iniciales de la imagen<br />
<br />
function lienzo(){<br />
<br />
var c=document.getElementById("myCanvas");<br />
var ctx=c.getContext("2d");<br />
var img=document.getElementById("ima");<br />
ctx.clearRect(0,0,500,500);//limpia todo el canvas <br />
ctx.drawImage(img,x,y);//dibuja la imagen<br />
<br />
}<br />
<br />
//cuando presiona una tecla<br />
function whichButton(event){<br />
<br />
if(event.keyCode=='39'){//si la tecla presionada es direccional derecho<br />
<br />
x=x+5;//mueve la nave 5 pixeles a la derecha<br />
lienzo();<br />
<br />
}<br />
<br />
if(event.keyCode=='37'){//si la tecla presionada es direccional izquierdo<br />
<br />
x=x-5;//mueve la nave 5 pixeles a la izquierda<br />
lienzo();<br />
<br />
}<br />
<br />
if(event.keyCode=='38'){//si la tecla presionada es direccional arriba<br />
<br />
y=y-5;//sube la nave<br />
lienzo();<br />
<br />
}<br />
<br />
if(event.keyCode=='40'){// si la tecla presionada es direccional abajo<br />
<br />
y=y+5;//baja la nave<br />
lienzo();<br />
<br />
}<br />
<br />
}<br />
<br />
</script><br />
<br />
</head><br />
<br />
<body onkeydown="whichButton(event)" onload="lienzo()"><br />
<br />
<h1>Movimiento de una imagen sobre canvas HTML5 + JavaScript</h1><br />
<br />
<img id="ima" src="nave.PNG" /><br />
<br />
<canvas id="myCanvas" width="500" height="500" style="border:1px solid #000000;background-color:#87CEEB;"><br />
Tu navegador no soporta canvas</canvas> <br />
<br />
</body><br />
<br />
</html><br />
<br />
</div><br />
<b>Explicación:</b><br />
<br />
Primero creamos la imagen a mover y el canvas con sus respectivos <b>id</b>.<br />
<br />
<div style="background: #F5F5F5; color: steelblue;"><img id="ima" src="nave.PNG" /></div><br />
Canvas con un ancho y alto de 500:<br />
<br />
<div style="background: #F5F5F5; color: steelblue;"><canvas id="myCanvas" width="<b>500</b>" height="<b>500</b>" style="border:1px solid #000000;background-color:#87CEEB;"><br />
Tu navegador no soporta canvas</canvas> </div><br />
Cuando el documento se carga por completo lo primero que hace es ejecutar la funcion JavaScript <b>lienzo()</b>, su objetivo es obtener el canvas y la imagen a través de su id para dibujarla en pantalla.<br />
<br />
Tambien en el body se encuentra la funcion JavaScript <b>whichButton(event)</b> que se ejecuta sólo cuando el usuario presiona una tecla.<br />
<br />
<div style="background: #F5F5F5; color: steelblue;"><body onkeydown="<b>whichButton(event)</b>" onload="<b>lienzo()</b>"></div><br />
Las variables globales <b>x</b> y <b>y</b> son las coordenadas para ubicar la imagen sobre el canvas, estas cambian su valor cuando se presiona una tecla.<br />
<br />
Funcion whichButton(event)<br />
<br />
Tal vez la funcion más importante, cuando se presiona una tecla se ejecuta la funcion y evalua lo siguiente:<br />
<br />
<div style="background: #F5F5F5; color: steelblue;">if(event.keyCode=='39'){<br />
x=x+5;<br />
lienzo();<br />
}</div><br />
Si el usuario presiona la tecla direccional derecho (<b>→</b>), aumenta en <b>5</b> la variable <b>x</b> y ejecuta de nuevo la funcion lienzo() para actualizar la nueva posición de la imagen sobre el canvas. Es importante el método <b>clearRect(x,y,w,h)</b> (<i>ubicado en la función lienzo()</i>) ya que limpia o borra todo lo que hay en el canvas. (<i>No utilizes este método y mira lo que pasa</i>).<br />
<br />
Los otros condicionales de la funcion hacen lo mismo pero con diferentes valores, por ejemplo cuando se presiona la tecla izquierda (<b>←</b>) se le resta 5 a la variable x.<br />
<br />
Por ultimo recuerda que la coordenada (0,0) del canvas siempre está ubicada en la esquina superior izquierda.<br />
<br />
<a href="http://codigojerry.blogspot.com/2012/11/canvas-en-html5.html" target="_blank">Tutorial de canvas.</a><br />
<br />
<a href="http://adf.ly/KywiI" target="_blank"><b>Demo/código fuente</b></a>Unknownnoreply@blogger.com1tag:blogger.com,1999:blog-1404221545709156312.post-48295429206751595242012-11-28T16:42:00.001-05:002013-05-01T22:33:45.548-05:00Insertar datos en MySQL a través de jQueryVamos a utilizar el método <b>$.ajax()</b> de <b>jQuery</b> para enviar una petición al servidor y que éste nos de una respuesta sin necesidad de recargar la página entera. Lo que haremos es insertar un registro a la base de datos, en este caso un nombre a la tabla <b>personas</b>, compuesto por los campos <b>codigo</b> (autoincrement) y <b>nombre</b>. Para ello necesitamos los siguientes archivos:<br />
<a name='more'></a><br />
El archivo conexion para conectarse a <b>MySQL</b>.<br />
<br />
conexion.php<br />
<br />
<div style="background: #F5F5F5; color: steelblue;"><br />
<?php<br />
<br />
function conexion(){<br />
<br />
$con = mysql_connect("localhost","root","");<br />
<br />
if (!$con){<br />
<br />
die('Could not connect: ' . mysql_error());<br />
}<br />
<br />
mysql_select_db("database", $con);<br />
<br />
return($con);<br />
<br />
}<br />
<br />
?><br />
<br />
</div><br />
El archivo principal: index.php, donde creamos el código <b>HTML</b> (caja de texto, boton...) y el siguiente código jQuery: <br />
<br />
Cuando se hace click en el boton:<br />
<div style="background: #F5F5F5; color: steelblue;">$("button").click(function(){</div><br />
Capturamos el valor que tiene la caja de texto con id igual a <b>box</b> y lo almacenamos en la variable <b>n</b>: <br />
<br />
<div style="background: #F5F5F5; color: steelblue;">n=$("#box").val();</div><br />
Invocamos al método <b>$.ajax</b> y le pasamos como parámetros el archivo que procesa la información (<i>insertar.php</i>), el segundo parámetro es para que no almacene en caché las páginas solicitadas, el tercer parámetro es que la peticion va a ser de tipo POST, el cuarto parámetro es una variable que vamos a enviar junto con la solicitud (<i>nom</i>) que contiene lo que trae n, el ultimo parámetro es una función que se ejecuta cuando la solicitud se realiza correctamente (la respuesta del servidor).<br />
<br />
<div style="background: #F5F5F5; color: steelblue;">$.ajax({url:"insertar.php",cache:false,type:"POST",data:{nom:n},success:function(result){<br />
</div><br />
Ese resultado lo mostramos en un div a través del evento <b>html</b> de jQuery que es el equivalente a <b>innerHTML</b>. <br />
<br />
<div style="background: #F5F5F5; color: steelblue;">$("#myDiv").html(result);</div><br />
Este código oculta el mensaje dentro del div cuando se pincha sobre él.<br />
<br />
<div style="background: #F5F5F5; color: steelblue;">$("#myDiv").click(function(){<br />
<br />
$("#myDiv").hide(1000);//oculta el div cuando se hace clic sobre el mismo <br />
});<br />
</div><br />
index.php<br />
<br />
<div style="background: #F5F5F5; color: steelblue;"><br />
<!DOCTYPE html><br />
<br />
<html><br />
<br />
<head><br />
<br />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script><br />
<br />
<script><br />
<br />
$(document).ready(function(){<br />
<br />
$("button").click(function(){<br />
<br />
$("#myDiv").show();//muestra el div<br />
<br />
n=$("#box").val();<br />
<br />
$.ajax({url:"insertar.php",cache:false,type:"POST",data:{nom:n},success:function(result){<br />
$("#myDiv").html(result);<br />
}});<br />
<br />
});<br />
<br />
$("#myDiv").click(function(){<br />
<br />
$("#myDiv").hide(1000);//oculta el div cuando se hace clic sobre el mismo <br />
});<br />
<br />
});<br />
<br />
</script><br />
<br />
</head><br />
<br />
<body><br />
<br />
<p>Insertar datos en MySQL con jQuery</p><br />
<br />
Digite nombre:<br />
<br />
<input type="text" id="box" /><br />
<br />
<button>Agregar</button><br />
<br />
<div style="background-color:#8FBC8F;" id="myDiv"></div><br />
<br />
</body><br />
<br />
</html><br />
<br />
</div><br />
Por ultimo capturamos a través del método <b>$_POST</b> la variable <b>nom</b> que nos enviaron y la insertamos a la base de datos.<br />
<br />
insertar.php<br />
<br />
<div style="background: #F5F5F5; color: steelblue;"><br />
<?php<br />
<br />
include 'conexion.php';<br />
<br />
$con=conexion();<br />
<br />
$nombre=$_POST['nom'];<br />
<br />
$res=mysql_query("insert into personas (nombre) values('".$nombre."')",$con);<br />
<br />
if($res){<br />
<br />
echo 'Accion exitosa.';<br />
<br />
}<br />
<br />
?><br />
<br />
</div><br />
<a href="http://adf.ly/KywmX" target="_blank"><b>Descargar</b></a>Unknownnoreply@blogger.com18tag:blogger.com,1999:blog-1404221545709156312.post-85100350518667138692012-11-25T00:54:00.002-05:002012-11-26T00:32:38.749-05:00Tutorial de Canvas (HTML5)<b>Canvas</b> es un nuevo elemento en <b>HTML</b>, por tanto tendrás que tener un navegador moderno y actualizado, por ejemplo <b>Firefox</b>. <b>Internet Explorer 8</b> y versiones antiguas, no la soportan. Canvas que en español es <i>Lienzo</i> es una area rectangular usada para contener gráficos, estos se crean mediante scripts (por lo general con <b>JavaScript</b>). Se pueden tener varios elementos Canvas en una página HTML.<br />
<a name='more'></a><br />
Para crear un elemento Canvas se utiliza la siguiente sintaxis:<br />
<br />
<div style="background: #F5F5F5; color: steelblue;"><canvas id="miCanvas" width="200" height="100">Tú navegador no soporta canvas</canvas></div><br />
Siempre se da un identificador único para el elemento cómo tambien un ancho y un alto. En el medio se coloca un mensaje al usuario que aparece si utiliza un navegador antiguo.<br />
<br />
Por defecto un Canvas no tiene borde pero se le puede agregar con estilo <b>CSS</b>: <br />
<br />
<div style="background: #F5F5F5; color: steelblue;"><canvas id="miCanvas" width="200" height="100" <b>style="border:1px solid"</b>>Tú navegador no soporta canvas</canvas></div><br />
<b>Dibujar un rectangulo:</b><br />
<br />
El siguiente código dibuja un rectángulo azul:<br />
<br />
<div style="background: #F5F5F5; color: steelblue;"><br />
<!DOCTYPE html><br />
<html><br />
<body><br />
<br />
<canvas id="miLienzo" width="200" height="100" style="border:1px solid #c3c3c3;"><br />
Tú navegador no soporta canvas<br />
</canvas><br />
<br />
<script><br />
<br />
var c=document.getElementById("miLienzo");<br />
var ctx=c.getContext("2d");<br />
ctx.fillStyle="#0000FF";<br />
ctx.fillRect(10,10,180,80);<br />
<br />
</script><br />
<br />
</body><br />
</html><br />
<br />
</div><br />
<b>Explicación:</b><br />
<br />
Se crea un canvas con id <b>miLienzo</b>, un ancho igual a <b>200</b> y una altura igual a <b>100</b>.<br />
<br />
Con esta línea obtenemos el elemento con el que vamos a trabajar: <br />
<div style="background: #F5F5F5; color: steelblue;">var c=document.getElementById("miLienzo");</div><br />
Luego llamamos al método <b>getContext()</b> y le pasamos como parámetro la cadena <b>"2d"</b>. El objeto <b>getContext("2d")</b> es un objeto incorporado en <b>HTML5</b> con muchas propiedades y métodos para dibujar circulos, cuadros, texto, imágenes y más.<br />
<br />
Esta línea pinta el rectángulo de color azul:<br />
<div style="background: #F5F5F5; color: steelblue;">ctx.fillStyle="#0000FF";</div><br />
Y esta otra dibuja el rectangulo:<br />
<div style="background: #F5F5F5; color: steelblue;">ctx.fillRect(10,10,180,80);</div><br />
El método <b>fillRect(x,y,ancho,alto)</b>; recibe cuatro parámetros: los dos primeros son las coordenadas que ubican el rectangulo, las otras dos son el ancho y alto. Este método dibuja un rectangulo relleno (el color que específiquemos). La coordenada 0,0 está ubicada en la parte superior izquierda del canvas.<br />
<br />
Con lo anterior obtenemos el siguiente resultado:<br />
<br />
<canvas height="100" id="miLienzo" style="border: 1px solid #c3c3c3;" width="200"><br />
Tú navegador no soporta canvas<br />
</canvas><br />
<br />
<script>
var c=document.getElementById("miLienzo");
var ctx=c.getContext("2d");
ctx.fillStyle="#0000FF";
ctx.fillRect(10,10,180,80);
</script><br />
<br />
Una fantástica funcionalidad de Canvas es que si le das clic derecho sobre las figuras creadas puedes guardarlas en tu pc como una imagen.<br />
<br />
La anterior figura se puede representar de la siguiente manera:<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBYeq0sLBhT6NTF4hEcW8HEf0ie98JdD-D60MSetR9lbVHQuXGgAz-WrrPWzjK4JTdZdD6Fz1CAm8RgTPyaXEw3Ov9msbhPUcC_ZQy153CPHoiRDAp0MeC1QCiV2lovJ2o_Rufwg9Yalk/s1600/coordenadas.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBYeq0sLBhT6NTF4hEcW8HEf0ie98JdD-D60MSetR9lbVHQuXGgAz-WrrPWzjK4JTdZdD6Fz1CAm8RgTPyaXEw3Ov9msbhPUcC_ZQy153CPHoiRDAp0MeC1QCiV2lovJ2o_Rufwg9Yalk/s400/coordenadas.PNG" height="137" width="400" /></a></div><br />
<b>Dibujar una línea:</b><br />
<br />
El siguiente código traza una línea horizontal en toda la mitad del canvas:<br />
<br />
<div style="background: #F5F5F5; color: steelblue;"><br />
<!DOCTYPE html><br />
<html><br />
<body><br />
<br />
<canvas id="Canv" width="200" height="100" style="border:1px solid #d3d3d3;"><br />
Tu navegador no soporta canvas<br />
</canvas><br />
<br />
<script><br />
<br />
var c=document.getElementById("Canv");<br />
var ctx=c.getContext("2d");<br />
ctx.moveTo(0,50);<br />
ctx.lineTo(200,50);<br />
ctx.stroke();<br />
<br />
</script><br />
<br />
</body><br />
</html><br />
<br />
</div><br />
<b>Explicación:</b><br />
<br />
Para trazar una línea se utilizan los métodos: <br />
<br />
<b>moveTo(x,y)</b> Coordenada donde empieza la línea.<br />
<b>lineTo(x,y)</b> Coordenada donde finaliza la línea.<br />
<b>stroke();</b> Dibuja la línea.<br />
<br />
Obtenemos la referencia del canvas:<br />
<div style="background: #F5F5F5; color: steelblue;">var c=document.getElementById("Canv");</div><br />
Obtenemos el contexto:<br />
<div style="background: #F5F5F5; color: steelblue;">var ctx=c.getContext("2d");</div><br />
El punto inicial de la línea:<br />
<div style="background: #F5F5F5; color: steelblue;">ctx.moveTo(0,50);</div><br />
El punto final de la línea:<br />
<div style="background: #F5F5F5; color: steelblue;">ctx.lineTo(200,50);</div><br />
Dibuja la línea:<br />
<div style="background: #F5F5F5; color: steelblue;">ctx.stroke();</div><br />
<b>Resultado:</b><br />
<br />
<canvas height="100" id="Canv" style="border: 1px solid #d3d3d3;" width="200"><br />
Tu navegador no soporta canvas</canvas><br />
<script>
var c=document.getElementById("Canv");
var ctx=c.getContext("2d");
ctx.moveTo(0,50);
ctx.lineTo(200,50);
ctx.stroke();
</script><br />
<br />
Coordenadas de la anterior figura:<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhC8Ye-JSQUsYZav4fEmGOnhnN-4cjunvHAzbW2cfErhc1PAmNxUE9MdFtizpcseTyWLLR2nw6rCQcFkI6FeYvHPYpk8TJlijXgo1rIC4qW7u0jhl-d0EkttaTRVUfvJ5199M3z8NG1d0Q/s1600/canvas.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhC8Ye-JSQUsYZav4fEmGOnhnN-4cjunvHAzbW2cfErhc1PAmNxUE9MdFtizpcseTyWLLR2nw6rCQcFkI6FeYvHPYpk8TJlijXgo1rIC4qW7u0jhl-d0EkttaTRVUfvJ5199M3z8NG1d0Q/s400/canvas.PNG" height="145" width="400" /></a></div><br />
<b>Un pentagono dibujado con lineas:</b><br />
<br />
<canvas height="75" id="canvaspen" style="border: 1px solid #d3d3d3;" width="150"><br />
Tu navegador no soporta canvas<br />
</canvas><br />
<br />
<script>
var c=document.getElementById("canvaspen");
var ctx=c.getContext("2d");
ctx.strokeStyle="#FF0000";
ctx.moveTo(75,0);
ctx.lineTo(0,34);
ctx.moveTo(0,34);
ctx.lineTo(20,75);
ctx.moveTo(20,75);
ctx.lineTo(130,75);
ctx.moveTo(130,75);
ctx.lineTo(150,34);
ctx.moveTo(150,34);
ctx.lineTo(75,0);
ctx.stroke();
</script><br />
<br />
<b>Ubicar una imagen sobre el canvas:</b><br />
<br />
Utilizamos el método:<br />
<br />
<b>drawImage(</b>img<b>)</b> Este método puede recibir otros parámetros adicionales.<br />
<br />
<div style="background: #F5F5F5; color: steelblue;"><br />
<!DOCTYPE html><br />
<html><br />
<body><br />
<br />
<p>Imagen a usar:</p><br />
<br />
<img border="0" height="150" width="150" src="html5.png" id="miImagen" /><br />
<br />
<p>Canvas:</p><br />
<canvas id="miCanvas" width="200" height="200" style="border:1px solid #d3d3d3;"><br />
Tú navegador no soporta canvas</canvas><br />
<br />
<script><br />
<br />
var c=document.getElementById("miCanvas");<br />
var ctx=c.getContext("2d");<br />
var img=document.getElementById("miImagen");<br />
ctx.drawImage(img);<br />
<br />
</script><br />
<br />
</body><br />
</html><br />
<br />
</div><br />
<b>Explicación:</b><br />
<br />
Cargamos una imagen:<br />
<div style="background: #F5F5F5; color: steelblue;"><img border="0" height="150" width="150" src="html5.png" id="miImagen" /></div><br />
Creamos un canvas:<br />
<div style="background: #F5F5F5; color: steelblue;"><canvas id="miCanvas" width="200" height="200" style="border:1px solid #d3d3d3;"><br />
Tú navegador no soporta canvas</canvas></div><br />
Obtenemos el canvas:<br />
<div style="background: #F5F5F5; color: steelblue;">var c=document.getElementById("miCanvas");</div><br />
Obtenemos el contexto:<br />
<div style="background: #F5F5F5; color: steelblue;">var ctx=c.getContext("2d");</div><br />
Obtenemos la imagen a través de su id:<br />
<div style="background: #F5F5F5; color: steelblue;">var img=document.getElementById("miImagen");</div><br />
Dibujamos la imagen:<br />
<div style="background: #F5F5F5; color: steelblue;">ctx.drawImage(img); </div><br />
El parámetro del método es la imagen.<br />
<br />
<b>Resultado:</b><br />
<br />
Imagen a usar:<br />
<br />
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgK-gAjOMogt8-ZZTbIci4SoaPfSM5XHgg1BqI06G9iaO35fQTB31fVREI7klq4HZHjLwdNpPteljIV9nXNA4g-dFKPXdMfpQlJ3J4lu54WiJO4pSH1KZ4J-cQMuE4S7KcPsqcQP5tve88/s400/html5.png" height="150" id="miImagen" width="150" /><br />
<br />
Canvas:<br />
<br />
<canvas height="200" id="miCanvas" style="border: 1px solid #d3d3d3;" width="200"><br />
Tú navegador no soporta canvas</canvas><br />
<br />
<script>
var c=document.getElementById("miCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("miImagen");
ctx.drawImage(img,0,0,150,150);
</script><br />
<br />
<b>Dibujar texto:</b><br />
<br />
Se utiliza uno de estos métodos:<br />
<br />
<b>fillText(texto,x,y)</b> Dibuja un texto normal sobre el canvas<br />
<b>strokeText(texto,x,y)</b> Dibuja un texto "sin relleno" sobre el canvas<br />
<br />
<div style="background: #F5F5F5; color: steelblue;"><br />
<!DOCTYPE html><br />
<html><br />
<body><br />
<br />
<canvas id="lienzo" width="150" height="50" style="border:1px solid #d3d3d3;"><br />
Tu navegador no soporta canvas</canvas><br />
<br />
<script><br />
<br />
var c=document.getElementById("lienzo");<br />
var ctx=c.getContext("2d");<br />
<br />
ctx.font="20px Georgia";<br />
ctx.fillText("Codigo Jerry",10,25);<br />
<br />
</script><br />
<br />
</body><br />
</html><br />
<br />
</div><br />
<b>Explicación:</b><br />
<br />
Definimos la fuente del texto con un ancho de 20px:<br />
<div style="background: #F5F5F5; color: steelblue;">ctx.font="20px Georgia";</div><br />
Dibuja el texto a partir de la coordenada (10,25):<br />
<div style="background: #F5F5F5; color: steelblue;">ctx.fillText("Codigo Jerry",10,25);</div><br />
<b>Resultado:</b><br />
<br />
<canvas id="lienzo" width="150" height="50" style="border:1px solid #d3d3d3;"><br />
Tu navegador no soporta canvas</canvas><br />
<br />
<script>
var c=document.getElementById("lienzo");
var ctx=c.getContext("2d");
ctx.font="20px Georgia";
ctx.fillText("Codigo Jerry",10,25);
</script><br />
<br />
Con el método <b>strokeText()</b> este sería el resultado:<br />
<br />
<canvas id="lienzo2" width="150" height="50" style="border:1px solid #d3d3d3;"><br />
Tu navegador no soporta canvas</canvas><br />
<br />
<script>
var c=document.getElementById("lienzo2");
var ctx=c.getContext("2d");
ctx.font="25px Georgia";
ctx.strokeText("Codigo Jerry",5,30);
</script><br />
<br />
<b>Dibujar un círculo:</b><br />
<br />
Utilizamos el método <b>arc()</b> para dibujar círculos o semicírculos:<br />
<br />
<b>arc(</b>x,y,radio,anguloInicial,anguloFinal<b>)</b> Este método recibe cinco parámetros obligatorios y uno opcional. Los dos primeros son las coordenadas para ubicar el círculo, el tercero es el radio del circulo, y los dos ultimos son los ángulos en radianes.<br />
<br />
La siguiente imagen explica lo que hacen los parámetros de la funcion <b>arc()</b> con estos valores:<br />
<br />
X=<b>100</b>;<br />
Y=<b>74</b>;<br />
Radio=<b>50</b>;<br />
Angulo inicial=<b>0</b>;<br />
Angulo final=<b>1.5*Pi</b><br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7_A-f-z9JFoypk1dgNfYOXuJyRYNiQiSkwVfcbAD-_GiYGHUtfaX6cSfb9r2fuWka_RZ2bosiYYuOwmclM6UMl3VNSmZ9efeXlK0g4yRlTPazOr9Kul30ywJn1_kB3kbKwah65W2rLnc/s1600/code.PNG" imageanchor="1" style="margin-left:1em; margin-right:1em"><img border="0" height="199" width="341" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7_A-f-z9JFoypk1dgNfYOXuJyRYNiQiSkwVfcbAD-_GiYGHUtfaX6cSfb9r2fuWka_RZ2bosiYYuOwmclM6UMl3VNSmZ9efeXlK0g4yRlTPazOr9Kul30ywJn1_kB3kbKwah65W2rLnc/s400/code.PNG" /></a></div><br />
El siguiente código dibuja un circulo relleno de color azul:<br />
<br />
<div style="background: #F5F5F5; color: steelblue;"><br />
<!DOCTYPE html><br />
<html><br />
<body><br />
<br />
<canvas id="myCanvas" width="200" height="150" style="border:1px solid #d3d3d3;"><br />
Tu navegador no soporta canvas</canvas><br />
<br />
<script><br />
<br />
var c=document.getElementById("myCanvas");<br />
var ctx=c.getContext("2d");<br />
ctx.beginPath();<br />
ctx.arc(100,75,50,0,2*Math.PI);<br />
ctx.fillStyle="blue";<br />
ctx.fill();<br />
<br />
</script> <br />
<br />
</body><br />
</html><br />
<br />
</div><br />
<b>Resultado:</b><br />
<br />
<canvas id="myCanvas" width="200" height="150" style="border:1px solid #d3d3d3;"><br />
Tu navegador no soporta canvas</canvas><br />
<br />
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(100,75,50,0,2*Math.PI);
ctx.fillStyle="blue";
ctx.fill();
</script> <br />
<br />
<b>Nota:</b> <i>Si vas a dibujar un circulo completo, el ángulo final debe recibir este valor</i>: <b>2*Math.PI</b>.<br />
<br />
Un completo tutorial (<i>en inglés</i>) del elemento canvas <a href="http://www.w3schools.com/html/html5_canvas.asp" target="_blank">aquí</a>.Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-1404221545709156312.post-25563725542191491952012-11-24T23:06:00.000-05:002013-03-16T15:32:55.938-05:00Eliminar multiples datos con checkbox PHP y MySQLPara eliminar múltiples datos de la base de datos, utilizaremos el ciclo <b>foreach</b> de <b>PHP</b>. Este ciclo se utiliza para recorrer arrays. Convertiremos los checkbox entonces en un array. El ejemplo se encuentra divido en tres únicos archivos para facilitar su comprensión.<br />
<br />
El archivo conexion.php para hacer la conexion con la base de datos MySQL. La base de datos se llama <b>database</b> y la tabla <b>personas</b> compuesta por dos columnas <b>cod</b> y <b>nombre</b>.<br />
<a name='more'></a><br />
<b>conexion.php</b><br />
<br />
<div style="background: #F5F5F5; color: steelblue;"><br />
<?php<br />
<br />
function conexion(){<br />
<br />
$con = mysql_connect("localhost","root","");<br />
<br />
if (!$con){<br />
<br />
die('Could not connect: ' . mysql_error());<br />
}<br />
<br />
mysql_select_db("database", $con);<br />
<br />
return($con);<br />
<br />
}<br />
<br />
?><br />
<br />
</div><br />
El archivo index.php es donde creamos la consulta a la base de datos para mostrar en una tabla HTML los registros que estan almacenados en la base de datos. Cuando se presiona el boton el archivo eliminar.php procesa la información. Es importante aclarar que hemos convertido los checkbox en un array colocando en su nombre unos corchetes, en este caso todos los checkbox se llaman <b>casilla[]</b>, cada uno toma un diferente valor, pues les pasamos los codigos que identifcan a las personas. <br />
<br />
<b>index.php</b><br />
<br />
<div style="background: #F5F5F5; color: steelblue;"><br />
<?php<br />
<br />
include 'conexion.php';<br />
<br />
$con=conexion();<br />
<br />
$res=mysql_query("select * from personas",$con);<br />
<br />
?><br />
<br />
<!DOCTYPE html><br />
<html><br />
<body><br />
<br />
<h1>Eliminar datos</h1><br />
<br />
<form method="post" action="eliminar.php"><br />
<br />
<table border="1"><br />
<br />
<tr><br />
<th></th> <br />
<th>Codigo</th> <br />
<th>Nombre</th> <br />
</tr><br />
<br />
<?php <br />
while($fila=mysql_fetch_array($res)){<br />
?><br />
<tr><br />
<th><input type="checkbox" name="<b>casilla[]</b>" value="<?php echo $fila[cod]; ?>"></th> <br />
<th><?php echo $fila[cod]; ?></th> <br />
<th><?php echo $fila[nombre]; ?></th> <br />
</tr><br />
<?php<br />
}<br />
?><br />
<br />
</table><br />
<br />
<input type="submit" value="Eliminar" /><br />
<br />
</form><br />
<br />
</body><br />
</html> <br />
<br />
</div><br />
Finalmente el archivo eliminar.php lo que hace es capturar a través del método POST el checkbox con nombre casilla y asignarlo en la variable <b>$x</b>. Luego para cada iteración del ciclo, el valor del elemento de la matriz actual se asigna a $value (que vendrían siendo los códigos de las personas) y el puntero se va moviendo uno por uno hasta que ya no se encuentren más datos. Por ejemplo, si el usuario seleccionó 5 datos el ciclo itera 5 veces y por tanto ejecuta 5 veces la sentencia delete eliminando uno a uno los datos seleccionados. <br />
<br />
<b>eliminar.php</b><br />
<br />
<div style="background: #F5F5F5; color: steelblue;"><br />
<?php<br />
<br />
include 'conexion.php';<br />
<br />
$con=conexion();<br />
<br />
<b>$x=$_POST[casilla];</b><br />
<br />
foreach ($x as $value){<br />
<br />
$res=mysql_query("delete from personas where cod=".$value."",$con);<br />
<br />
if($res){<br />
<br />
echo 'Dato eliminado correctamente<br />';<br />
<br />
}<br />
<br />
}<br />
<br />
?><br />
<br />
<a href="index.php">Volver</a><br />
<br />
</div><br />
<a href="http://adf.ly/KywsE"><b>Descargar código fuente</b></a>Unknownnoreply@blogger.com14tag:blogger.com,1999:blog-1404221545709156312.post-73769984552025372492012-11-24T22:04:00.000-05:002012-11-24T22:08:11.207-05:00Exportar una base de datos MySQL desde la consola<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLxyTBVNjUsmFwWxKDVv0StQFs2rS1RO-rLd5KPA4TudGyDPKRahvddUm0KKq1P_lBQhTqqkvWdRHeghFpB9On2eJkBl3wWmKt-chlux_M9e8khXGuDha9Qej9rt_W8Uh577vlGbdRNbI/s1600/cmd.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLxyTBVNjUsmFwWxKDVv0StQFs2rS1RO-rLd5KPA4TudGyDPKRahvddUm0KKq1P_lBQhTqqkvWdRHeghFpB9On2eJkBl3wWmKt-chlux_M9e8khXGuDha9Qej9rt_W8Uh577vlGbdRNbI/s200/cmd.PNG" height="60" width="200" /></a></div>Conozco dos formas para exportar una base de datos a través de la línea de comandos, lo que tenemos que hacer es ubicarnos a través del comando <b>cd</b> en el directorio <b>mysql\bin</b>, como utilizo <b>XAMPP</b> que está en la raiz <b>D:</b> mi ruta sería <b>D:\xampp\mysql\bin</b> estando ahí tipeamos cualquiera de los siguientes comandos:<br />
<a name='more'></a><br />
<b>Forma 1</b><br />
<br />
<div style="background: #F5F5F5; color: steelblue;">D:\xampp\mysql\bin><b>mysqldump -h localhost -u root -p nombre_base_de_datos > nombre_archivo.sql</b></div><br />
<b>Forma 2</b><br />
<br />
<div style="background: #F5F5F5; color: steelblue;">D:\xampp\mysql\bin><b>mysqldump --opt --password=jerry --user=root nombre_base_de_datos > nombre_archivo.sql</b></div><br />
Esto creará un archivo con extensión <b>.sql</b> en la carpeta <b>mysql\bin</b>, si queremos una ruta especifica sería:<br />
<br />
<div style="background: #F5F5F5; color: steelblue;">D:\xampp\mysql\bin>mysqldump -h localhost -u root -p nombre_base_de_datos > <b>"C:\Documents and Settings\Jerry\Escritorio\nombre_archivo.sql"</b></div><br />
Cabe aclarar que reemplazas los datos del ejemplo por los tuyos: user, password, host, nombre_base_de_datos, nombre_archivo son valores que cambian.Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-1404221545709156312.post-8015350696156072182012-11-24T21:31:00.001-05:002012-11-24T21:41:08.508-05:00Operador condicional en JavaScriptJavaScript contiene un operador condicional que asigna un valor a una variable a partir de una condición.<br />
<br />
Su sintaxis es la siguiente:<br />
<br />
<div style="background: #F5F5F5; color: steelblue;">variable=(condicion)?valor1:valor2 </div><br />
Si la condicion es verdadera la variable toma el valor1 sino toma el valor2. Es como el condicional <b>if else</b>.<br />
<a name='more'></a><br />
Ejemplo:<br />
<br />
<div style="background: #F5F5F5; color: steelblue;"><br />
<!DOCTYPE html><br />
<html><br />
<body><br />
<br />
Edad:<input type="text" id="caja" /><br />
<br />
<button onclick="myFunction()">OK</button><br />
<br />
<p id="demo"></p><br />
<br />
<script><br />
function myFunction()<br />
{<br />
var edad,resultado;<br />
edad=document.getElementById("caja").value;<br />
<b>resultado=(edad<18)?"Eres menor de edad":"Eres mayor de edad";</b><br />
document.getElementById("demo").innerHTML=resultado;<br />
}<br />
</script><br />
<br />
</body><br />
</html><br />
<br />
</div><br />
En el ejemplo se crea una caja de texto en el cual se ingresa una edad. Capturamos el valor que digiten y creamos la siguiente condicion: <b>(edad<18)</b> si la edad ingresada es menor a 18 la variable resultado toma el valor: "<i>Eres menor de edad</i>" sino "<i>Eres mayor de edad</i>".<br />
<br />
Edad:<input type="text" id="caja" /><br />
<br />
<button onclick="myFunction()">OK</button><br />
<br />
<div id="demo"></div><br />
<script>
function myFunction()
{
var edad,resultado;
edad=document.getElementById("caja").value;
resultado=(edad<18)?"Eres menor de edad":"Eres mayor de edad";
document.getElementById("demo").innerHTML=resultado;
}
</script>
Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-1404221545709156312.post-91373789312356791632012-11-06T19:26:00.002-05:002013-07-31T22:11:08.687-05:00Ahorcado hecho en PSeInt<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjp7zTh4Wr0WfkFEykz3acC7kjIa28LYZRHjEJXxRXmSaK7IhV3p-0GotamKm0iQKG1jNPRK5vjCMnasrv8LBZK71cncO4W2QUDOpYI0Y6uwokwTKhxjRiSTjNjDGs8yV4MeU5EZl6TmVI/s1600/hangman.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjp7zTh4Wr0WfkFEykz3acC7kjIa28LYZRHjEJXxRXmSaK7IhV3p-0GotamKm0iQKG1jNPRK5vjCMnasrv8LBZK71cncO4W2QUDOpYI0Y6uwokwTKhxjRiSTjNjDGs8yV4MeU5EZl6TmVI/s200/hangman.PNG" width="200" /></a></div>Hacer un ahorcado no es tarea fácil y mucho menos en <b>PSeInt</b> en el que no se pueden hacer gráficos. Pero aun así me las ingenié para hacer este complicado juego en este software. El programa sólo contiene tres palabras almacenadas para adivinar, pero tú puedes cambiarlas o agregar más. Para entender el código es necesario tener conocimientos sobre: <a href="http://codigojerry.blogspot.com/2012/10/funciones-subprocesos-en-pseint.html" target="_blank">funciones</a>, ciclos, <a href="http://www.slideshare.net/JerryRamone/arreglos-en-pseint" target="_blank">arreglos</a>, condicionales y contadores. El programa ejecuta bien y para que no hayan errores configure su software de la siguiente forma:<br />
<a name='more'></a><br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkWbqlkco7EYt86lXOQHfEDvdgiU467PqPT2J8gUd8Bkz9XhnA7hTRE8Zj3OHOHntPjCtibWkF9J1QqTcyGoIcKW6D58jgjJXYFx_EAon2MQ7aLCkrv8gmRBtNRTWviQEkLchKYz7rGDA/s1600/conf.bmp" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="366" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkWbqlkco7EYt86lXOQHfEDvdgiU467PqPT2J8gUd8Bkz9XhnA7hTRE8Zj3OHOHntPjCtibWkF9J1QqTcyGoIcKW6D58jgjJXYFx_EAon2MQ7aLCkrv8gmRBtNRTWviQEkLchKYz7rGDA/s400/conf.bmp" width="385" /></a></div><br />
<a href="http://adf.ly/Kyw6c"><b>Descargar código fuente aquí</b></a><br /><br />
<a target="_blank" href="http://www.youtube.com/watch?v=UWuJseH8hlE">Video</a><br />
<br />
<br />
<br />
<br />
<br />
Unknownnoreply@blogger.com1tag:blogger.com,1999:blog-1404221545709156312.post-40233974449825705662012-11-04T22:34:00.001-05:002013-03-16T15:28:54.798-05:00Cargar un select desde otro select PHP + AJAX + MySQL<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzwu48cIsw_ZtWZ9C6P0ikCb3yfhYXUYFGiawmqDpcrgyG5phyhRZ2O_SMq_A05aqr2yr383I0xquXcZHbzqm2cvLTNw8X_AxKl9DhVfox2wnpq3e74viE71qdOi70UGf3sRTsVTFl1wc/s1600/captura.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="109" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzwu48cIsw_ZtWZ9C6P0ikCb3yfhYXUYFGiawmqDpcrgyG5phyhRZ2O_SMq_A05aqr2yr383I0xquXcZHbzqm2cvLTNw8X_AxKl9DhVfox2wnpq3e74viE71qdOi70UGf3sRTsVTFl1wc/s200/captura.PNG" width="200" /></a></div>Para cargar o llenar un select con datos de la base de datos a partir de otro select utilizamos <b>AJAX</b> y el evento <b>onchange</b> de <b>JavaScript</b>. El siguiente ejemplo consta de una base de datos compuesta por dos tablas una llamada continente y otro pais. Cuando se selecciona un continente aparece unos cuantos paises perteneciente a ese continente, para ello las tablas tienen que estar obligatoriamente relacionadas. <br />
<br />
<a name='more'></a><br />
El ejemplo está dividio en cuatro archivos:<br />
<br />
El archivo conexion para conectarnos a la base de datos.<br />
<br />
<b>conexion.php</b><br />
<br />
<div style="background: #F5F5F5; color: steelblue;"><br />
<?php<br />
<br />
function conexion(){<br />
<br />
$con = mysql_connect("localhost","root","");<br />
<br />
if (!$con){<br />
<br />
die('Could not connect: ' . mysql_error());<br />
}<br />
<br />
mysql_select_db("database", $con);<br />
<br />
return($con);<br />
<br />
}<br />
<br />
?><br />
<br />
</div><br />
Este archivo es la vista al usuario. Contiene el primer select donde cargamos en él los continentes almacenados en la base de datos. Tiene como atributo el evento onchange de JavaScript el cual ejecuta la funcion ajax <b>load()</b> cada vez que se hace clic sobre una opcion (continente).<br />
<br />
<b>index.php</b><br />
<br />
<div style="background: #F5F5F5; color: steelblue;"><?php<br />
include 'conexion.php';<br />
?><br />
<!DOCTYPE html><br />
<br />
<html><br />
<br />
<head><br />
<br />
<script src="ajax.js"></script><br />
<br />
</head><br />
<br />
<body><br />
<br />
<h2>HTML - PHP - AJAX - MySQL</h2><br />
<br />
<?php<br />
<br />
$con=conexion();<br />
$res=mysql_query("select * from continente",$con);<br />
<br />
?><br />
<br />
<select id="cont" <span style="color: #38761d;">onchange="load(this.value)"</span>><br />
<br />
<option value="">Seleccione</option><br />
<br />
<?php<br />
<br />
while($fila=mysql_fetch_array($res)){<br />
<br />
?><br />
<br />
<option value="<?php echo $fila[codigo]; ?>"><?php echo $fila[nombre]; ?></option><br />
<br />
<?php } ?><br />
<br />
</select><br />
<br />
<div id="myDiv"></div><br />
<br />
</body><br />
<br />
</html></div><br />
El archivo ajax.js es un archivo javascript el cual contiene la funcion load(), esta cáptura el código del continente seleccionado y se lo envía al archivo proc.php a través de la variable <b>q</b> y con el método post para que lo procese.<br />
<br />
<b>ajax.js</b><br />
<br />
<div style="background: #F5F5F5; color: steelblue;"><br />
function load(str)<br />
{<br />
var xmlhttp;<br />
<br />
if (window.XMLHttpRequest)<br />
{// code for IE7+, Firefox, Chrome, Opera, Safari<br />
xmlhttp=new XMLHttpRequest();<br />
}<br />
else<br />
{// code for IE6, IE5<br />
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");<br />
}<br />
xmlhttp.onreadystatechange=function()<br />
{<br />
if (xmlhttp.readyState==4 && xmlhttp.status==200)<br />
{<br />
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;<br />
}<br />
}<br />
xmlhttp.open("POST","proc.php",true);<br />
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");<br />
xmlhttp.send("<span style="color: #38761d;">q</span>="+str);<br />
}<br />
<br />
</div><br />
Finalmente este archivo captura el código del continente para hacer una consulta a la base de datos y mostrar en otro select los paises del continente seleccionado. El resultado se visualiza en el div con id igual a myDiv ubicado en el archivo index.php<br />
<br />
<b>proc.js</b><br />
<br />
<div style="background: #F5F5F5; color: steelblue;"><br />
<?php<br />
include 'conexion.php';<br />
<br />
$q=$_POST['q'];<br />
$con=conexion();<br />
<br />
$res=mysql_query("select * from pais where cod_cont=".$q."",$con);<br />
<br />
?><br />
<br />
<select><br />
<br />
<?php while($fila=mysql_fetch_array($res)){ ?><br />
<option><?php echo $fila[nombre]; ?></option><br />
<?php } ?><br />
<br />
</select><br />
<br />
</div><br />
<a href="http://adf.ly/Kyvyz" target="_blank"><b>Demo/Código fuente</b></a>Unknownnoreply@blogger.com54tag:blogger.com,1999:blog-1404221545709156312.post-27665218058317721202012-11-03T22:58:00.001-05:002012-11-03T23:02:37.696-05:00Simple animación en PSeInt<iframe allowfullscreen="" frameborder="0" height="270" src="http://www.youtube.com/embed/acLHaDoIRYM?fs=1" width="480"></iframe><br />
Copia y pega el código dentro de <b>Proceso - FinProceso</b>.<br />
<br />
<a href="http://codigojerry.herobo.com/pseint/animacion/animacion.rar"><b>Descargar código fuente</b></a>Unknownnoreply@blogger.com13tag:blogger.com,1999:blog-1404221545709156312.post-58288413968170192742012-11-03T14:14:00.001-05:002012-11-03T14:25:58.850-05:00Ahorcado hecho en JavaScript<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZqMkV18-x2Zzvk9dXTJy60yUtQxOxklsKk5ll3JwxG_FA77ppJca1nIJd5jB7QJZCLVAEWIjrxbQE8hTI53NMh3wO9z6HhJ9hyphenhyphenDvmai9IixDbxynyIJtVSFOTIuNPRdgmrjI2mSAj0sc/s1600/hangman.PNG" imageanchor="1" style="clear:left; float:left;margin-right:1em; margin-bottom:1em"><img border="0" height="200" width="166" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZqMkV18-x2Zzvk9dXTJy60yUtQxOxklsKk5ll3JwxG_FA77ppJca1nIJd5jB7QJZCLVAEWIjrxbQE8hTI53NMh3wO9z6HhJ9hyphenhyphenDvmai9IixDbxynyIJtVSFOTIuNPRdgmrjI2mSAj0sc/s200/hangman.PNG" /></a></div><br />
Ahorcado (<i>Hangman en inglés</i>) hecho en <b>HTML</b> con <b>JavaScript</b> y algo de <b>CSS</b>. Tiene almacenado veinte palabras para adivinar.<br />
<br />
<a target="_blank" href="http://codigojerry.herobo.com/ahorcado/"><b>Demo/Código fuente</b></a><br />
<br />
Unknownnoreply@blogger.com7