AddielLucena

Hola amigos de !T acá les traigo un post de lo más interesante, resulta que me puse a investigar por internet y me encontrado una cantidad de día que ni siquiera tenía idea de que existieran, espero les guste tanto como me gusto a mí. Todo conocemos los días mundiales de la tierra, de los trabajadores, de la lucha contra el cáncer o el de la infancia, pero hay otros un poco raro así que si no tienes más nada que hacer te invito a conocerlos. Día de PI. Todo conocemos este famosísimo símbolo matemático que para muchos estudiosos de esta ciencia es el número más importante en esta. Pues el día de Pi se celebra en las escuelas de todo el mundo el 14 de marzo a la 1:59 es decir 314159 exactamente el numero PI. Día internacional de las peleas de almohadas. El primer sábado de abrir se celebra uno de los días más des estresantes de todo, en plazas de todo el mundo se reúnen personas en pijamas y con la compañía de su almohada como arma. Día de la Toalla. El Día de la Toalla se celebra en honor a Douglas Adams el 25 de mayo de cada año, aunque su primera edición en 2011 se llevó a cabo el 11 de mayo, justo dos semanas después de su muerte. Ese día los fans llevan una toalla durante todo el día en recuerdo de La guía del autoestopista galáctico. Hay, pues, cierta similitud con el Bloomsday. Este homenaje a Douglas Adams se realiza en honor a su obra más famosa y a uno de los rasgos más identificativos de su gran obra: la toalla, ya que todo autoestopista galáctico debe llevar una. Día mundial de limpiar tu habitación. A mí en lo particular este es el que menos me gusta, pero bueno ya ven tiene su día, aunque yo voy hacer como que nunca me entere. Dedicado a todas esas madres que constantemente están encima nuestro para que limpiemos nuestra habitación se creó esta fecha. Así que ya saben todos los 10 de mayo tendremos que limpiar nuestro cuarto. Día de los Calcetines Perdidos. El 9 de mayo se celebra el día de los calcetines perdidos. Todo al parecer surgió porque un ciudadano británico perdió 50 de ellos en 2 años por lo cual creo una petición para tener su propio día y miles de personas se le unieron, esto ya me da ganas de crear mi propio día. Día del Orgullo Zombi. Este es el único día de algo que aún no existe, se está poniendo de moda en todas las capitales mundiales que todos los 4 de febrero que cientos de personas disfrazadas hagan la marcha zombi por las principales avenidas de la ciudad donde viven… valla día este. Día de las Zapatillas de Distinto Color. Pues si el 3 de mayo es el día de en vez de tener que ir a casa a cambiarte de zapatos por andar con uno diferente en cada pie puedes gritarle a todo el mundo que tus pies se visten o se calzan en este caso como les dé la gana. Día de Agradecimiento al Papel Burbuja. Ya este si casi ni me lo creía, si pensaste que la lucha de almohadas era des estresante pues este lo es más. El ultimo lunes de enero se celebra en todo el mundo (bueno donde lo sepan) este día, así que si no lo has hecho nunca aprovecha el próximo enero ya que se ha dado la noticia que se dejara de fabricar este tipo de plástico. Día Mundial del Amigo con Derechos. Este no lo conocía hasta hoy pero ya me tomé la molestia de hacerle llegar la información a todas mis amigas para que ahora me tengan en cuenta. Así que ya saben todos los 19 de julio a currar con sus amigas… Día de la Pereza Si, si existe y es en Colombia donde se ha inventado este día, es en el mes de agosto y les hubiera contado más pero ahora mismo estoy recogiendo, tengo una mudanza por hacer… Bueno amigos y esto es todo por hoy, ¿tú que otro día conoces? O que otro día te gustaría inventar, pues nada que falta un día para los taringueros. Deja tus comentarios y tus puntos al post. Saludos Addiel

Hola, buenos días a todos los amigos de TARINGA, acá les dejo la tercera parte de nuestro curso de PHP donde estaremos trabajando la parte vinculada al uso de PHP y MySQL, en el veremos cómo crear, actualizar y eliminar bases de datos usando dichos lenguajes. No es un secreto para nadie que el uso de las bases de datos esta forma una parte muy importante de las webs dinámicas que hoy conocemos y esta irremediablemente unido al mundo de las aplicaciones web, por eso eh decidido hacer esta parte para que después de hoy ya tengan una idea de cómo trabaja en su sitio con bases de datos y puedan dar riendas sueltas a su imaginación. En nuestro caso como gestor de bases de datos utilizaremos MySQL el cual es uno de los más utilizados a nivel global, para poder trabajar en este capítulo solo debemos ir al panel de control de nuestro XAMPP que instalamos en el capítulo 1 y echamos andar el proceso de MySQL. Una vez hallamos hecho esto, y para una mayor comprensión de lo que vamos a ir haciendo durante este capítulo vamos a abrir en nuestro navegador nuestro PhpMyAdmin, que es donde podrán ir palpando los resultados de los ejemplos que aremos hoy, para abrir phpmyadmin vamos a nuestro navegador e ingresamos la siguiente URL http://localhost/phpmyadmin Como pueden ver en la imagen nos aparece un gestor de bases de datos con una interfaz muy amigable y que para nada es difícil su comprensión. En el cuadro 1 como podrán ver nos aparecen listadas las bases de datos que tenemos creadas en nuestro servidor, si hacemos clic en el símbolo de + que tienen a su lado veremos cómo se despliega una lista con las tablas que contiene la base de datos seleccionada. En el cuadro numero 2 observamos el lugar donde estamos en PhpMyAdmin. En el cuadro 3 tenemos un menu de elementos que va a variar en dependecia de lugar que nos encontremos. En el cuadro 4 tenemos la configuracion general de nuestro PhpMyAdmin. En el cuadro 5 la configuracion de apariencia. En el cuadro 6 encontramos los datos de nustro dervidos de Datos. En el cuadro 7 encontramos la informacion de nuestro Servidor Web. En el cuador 8 encontramos la documentacion acerca de PhpMyAdmin Es valido aclarar que en dependencia de la version que use esto puede variar un poco pero nunca con grandes cambios Debo de aclararles que por defecto cuando instalamos el paquete XAMPP este nos instala el paquete PhpMyAdmin con un usuario llamado root y sin contraseña, esto lo podemos cambiar en nuestro PhpMyAdmin pero yo trabajare con estas por defecto para no perder tiempo, ya después ustedes si lo desean pueden hacerlo, lo cual se los recomiendo para tener seguridad en su proyecto. Bueno ahora si ya comenzaremos con lo que nos trajo hasta aquí, comenzaremos a meternos de lleno en lo que PHP y MySQL respecta. Realizar una conexión: Primero que nada, para poder trabajar con MySQL debemos hacer una conexión a la base de datos donde queremos hacer los cambios, para esto vamos a nuestro fichero curso.php que teníamos creado de antemano y lo dejamos vacío para poder comenzar a escribir nuestro código. Entonces escribiremos lo siguiente: <?php $conexion = mysql_connect("localhost","root",""); If(!$conexion){ Die (‘No se ha podido conectar a la Base de Datos: ’.mysql_error()); } Mysql_close($conexion); ?> Como pueden observar lo primero que hacemos es colocar nuestras clásicas etiquetas de apertura en PHP, seguido de esto nombramos una variable llamada $conexion la cual como valor le asignaremos la sentencia mysql_connect la cual entre paréntesis y cada uno entre comillas y separado por comas los datos de nuestra conexión, en nuestro caso el servidor donde esta nuestro MySQL, nuestro usuario y nuestra contraseña, como les aclare al principio estamos trabajando sin contraseña por lo cual dejo el dato vacío. No se olviden de al final poner nuestro ;. Seguidamente de esto hacemos una estructura de control IF que nos avisara en caso de fallar la conexión y nos dirá el error gracias a la sentencia mysql_error(). Después podemos encontrar la sentencia mysql_close() donde le especificamos que la conexión a cerrar es la especificada en la variable $conexion, es válido aclarar que PHP automáticamente cuando ejecuta un fichero hace esto aunque no se lo indiquemos, pero yo siempre por seguridad lo hago ustedes lo pueden dejar a su gusto. Si cargamos ahora nuestro archivo curso.php verán como nuestro navegador sigue en blanco y eso es señal de que no hubo ningún problema al conectar con nuestro MySQL, de haber algún error este se los dirá y tendrán que corregirlo. Crear una Base de Datos: Para crear una base de datos utilizaremos todo nuestro código anterior: <?php $conexion = mysql_connect("localhost","root",""); If(!$conexion){ Die (‘No se ha podido conectar a la Base de Datos: ’.mysql_error()); } If(mysql_query("CREATE DATABASE NuestraBase", $conexion)){ Echo ‘La base de datos ha sido creada correctamente’; }else{ Echo ‘Ha ocurrido un error al crear la base de datos ’.mysql_error(); } Mysql_close($conexion); ?> Como podemos observar lo que he hecho es agregar nuestro nuevo código después de nuestro primer IF y no es nada más que otra estructura de control IF. Como condición le pusimos la creación de la base de datos la cual llamamos NuestraBase, esto lo hicimos con la sentencia CREATE DATABASE NuestraBase seguidamente de ellos especificamos la variable $conexion que es la que tiene nuestros datos para acceder a nuestro PhpMyAdmin que es donde crearemos dicha base. Seguidamente realizamos un ECHO donde nos dice que la base ha sido creada y otro en caso de haber algún error, finalmente cerramos nuestra conexión y ahora guardamos los cambios y cargamos nuestro fichero en el navegador, y de no haber ningún error en el código nos deberá aparecer el mensaje de confirmación que pusimos en caso de crearse correctamente la base de datos. Valido aclarar que los nombres de las bases de datos no pueden contener espacios. Si acedemos a nuestro PhpMyAdmin ahora podemos ver en la lista de nuestras tablas como aparece la base NuestraBase. Crear Tablas y Columnas en nuestra Base de Datos: Nuevamente y para ahorrarnos tiempo utilizaremos nuestro primer código fuente: <?php $conexion = mysql_connect("localhost","root",""); If(!$conexion){ Die (‘No se ha podido conectar a la Base de Datos: ’.mysql_error()); } Mysql_select_db("NuestraBase",$conexion); $sql = "CREATE TABLE Datos ( Nombre varchar (15), Apellidos varchar (30), Edad int )"; Mysql_query($sql,$conexion); Mysql_close($conexion); ?> Buenos amigos como pueden ver, lo primero que hacemos es seleccionar nuestra base de datos con la sentencia mysql_select_db() especificando dentro de los paréntesis primero el nombre de nuestra base de datos y luego la variable $conexion que contiene nuestros datos de conexión. Seguidamente nombramos una variable llamada $sql , la cual ustedes pueden llamar como deseen yo solo lo hice así para que fuera más fácil, a esta le damos como valor la sentencia SQL de crear una nueva tabla con el comando CREATE TABLE y especificamos el nombre de nuestra tabla a crear, en nuestro caso Datos, seguidamente de esto y entre paréntesis comenzamos a crear las columnas que tendrá dicha tabla, que en nuestro caso serán tres nada más, como ven esto se hace de una manera sencilla y es especificando el nombre de la columna, el tipo de datos que va a contener y la longitud de caracteres, en nuestro caso solo utilizaremos dos tipos de datos el VARCHAR y el INT, en el caso del primero para texto y en el del segundo para números enteros, existen otros tipos de datos pero en nuestro caso solo utilizaremos estos dos. Valido aclarar que al finalizar cada columna es necesario terminar con una , excepto en la última para que no nos genere un error nuestro fichero. Para finalizar ejecutamos al petición con la sentencia ya conocida por nosotros mysql_query() y finalmente cerramos nuestra conexión. Creación de una Clave Primaria: Si bien no es obligatorio si es muy recomendable que toda tabla de nuestra base de datos tenga una Clave Primaria, esto no es más que seleccionar la columna que sus valores nunca se van a poder repetir, lo cual nos servirá a la hora de hacer búsquedas, por lo general estas se utilizan para los campos de identidad o de correo. Para ver un ejemplo utilizaremos nuestro último ejemplo: <?php $conexion = mysql_connect("localhost","root",""); If(!$conexion){ Die (‘No se ha podido conectar a la Base de Datos: ’.mysql_error()); } Mysql_select_db("NuestraBase",$conexion); $sql = "CREATE TABLE Datos ( Idpersona int NOT NULL AUTO_INCREMENT, PRIMARY KEY(Idpersona), Nombre varchar (15), Apellidos varchar (30), Edad int )"; Mysql_query($sql,$conexion); Mysql_close($conexion); ?> Como pueden ver a nuestro código le he agregado una nueva columna llamada Idpersona a la cual le he especificado que va a tener un tipo de valor INT y además le agregue que su valor no podrá estar vacío con la especificación NOT NULL además de que esta se autoincrementara con cada entrada de manera automática con la sentencia AUTO_INCREMENT, seguido de esto pueden observar que declaro mi Clave Primaria y no es más que con la sentencia PRIMARY KEY() especificando entre paréntesis el nombre de la columna que va a ser mi clave primeria. Creando registros: Ya tenemos nuestra base de datos y nuestra primera tabla así que ya es hora de comenzar a llenarla con datos para esto utilizaremos el siguiente código en nuestro fichero: <?php $conexion = mysql_connect("localhost","root",""); If(!$conexion){ Die (‘No se ha podido conectar a la Base de Datos: ’.mysql_error()); } Mysql_select_db("NuestraBase",$conexion); Mysql_query(“INSERT INTO Datos (Nombre, Apellidos, Edad) VALUES (‘Addiel’,’Lucena Perez’,’21’)”); Mysql_close($conexion); ?> Si se van dando cuenta MySQL puede parecer hasta sencillo si nos vamos adaptando a él, como pueden observar, después de seleccionar nuestra base de datos hacemos una sentencia mysql_query() en la cual ordenamos insertar nuestros datos en nuestra tabla Datos, todo esto con el comando INSERT INTO especificando inmediatamente en que en que tabla se hará la operación, en nuestro caso en Datos, en los primeros paréntesis especificamos las columnas que tiene nuestra tabla, sin la necesidad de nombrar la columna Idpersona ya que este le dijimos anteriormente que se autoincrementara automáticamente, seguido del primer paréntesis ponemos la sentencia VALUES la cual especifica que el contenido del segundo paréntesis serán los valores con que se rellenaran cada columna anteriormente declaradas, en nuestro caso para la columna Nombre llenaremos con Addiel, para la columna Apellidos la llenaremos con Lucena Perez y para la columna Edad la llenaremos con 21, finalmente cerramos la conexión y cargamos nuestro fichero en nuestro navegador, a simple vista veremos que no pasa nada pero si vamos ahora nuestro PhpMyAdmin y seleccionamos nuestra base de datos y seguidamente nuestra tabla y le damos inspeccionar veremos cómo nuestros datos han sido insertados. Listar los elementos de una base de datos: No hacemos nada con rellenar nuestras tablas de datos si no podemos llamarlos a nuestro navegador para verlos, por lo cual ahora mediante el siguiente código que les mostrare veremos cómo observar en nuestro navegador los datos que tenemos registrado en nuestra base de datos: <?php $conexion = mysql_connect("localhost","root",""); if(!$conexion){ die ('La conexion ha fallado por:'.mysql_error()); } mysql_select_db("NuestraBase",$conexion); $peticion = mysql_query("SELECT * FROM Datos"); while($fila = mysql_fetch_array($peticion)) { echo "Hola ".$fila['Nombre']." ".$fila['Apellidos'].". Tienes ".$fila['Edad']." años."; } mysql_close($conexion); ?> Como observamos es muy parecida a las anteriores solo que ahora después de seleccionar nuestra base de datos nombramos una nueva variable llamada $peticion la cual le damos como valor la sentencia mysql_query() que seleccionara todo de la tabla Datos y esto se lo indicamos con la línea SELECT * FROM Datos, como pueden observar el asterisco (*) le específica a nuestro navegador que debe seleccionar todos los valores de la tabla. Seguidamente hacemos una estructura de control WHILE y como condición le pedimos que la variable $fila sea igual a mysql_fetch_array($peticion) que esta no hace más que tomar todos los datos que se le especificaron en la variable $peticion, seguidamente hacemos un ECHO y llamamos a nuestros valores con la variable $fila seguido del nombre de cada columna ejemplo $fila[‘nombre’] nos devolverá uno por uno todos los datos que existan en la columna nombre. Si cargamos el fichero en nuestro navegador podremos observar si hemos hecho todo bien un mensaje que dirá: Hola Addiel Lucena Perez. Tienes 21 años. Localizar entradas de la base de datos: No siempre necesitaremos mostrar todos los datos de nuestra entrada, a veces solo necesitaremos mostrar uno en específico, para que vean como se hace esto por favor ingresen los datos de otra persona a nuestra tabla, con los datos que deseen siempre especificando Nombre, Apellidos y Edad. Tomaremos nuevamente nuestro código anterior solo que le haremos un pequeño cambio: <?php $conexion = mysql_connect("localhost","root",""); if(!$conexion){ die ('La conexion ha fallado por:'.mysql_error()); } mysql_select_db("NuestraBase",$conexion); $peticion = mysql_query("SELECT * FROM Datos WHERE nombre='Addiel'"); while($fila = mysql_fetch_array($peticion)) { echo "Hola ".$fila['Nombre']." ".$fila['Apellidos'].". Tienes ".$fila['Edad']." años."; } mysql_close($conexion); ?> Si se dieron cuenta el único cambio que realizamos en nuestro código fue en el valor de la variable $peticion que le agregamos a nuestra línea lo siguiente: WHERE nombre='Addiel' con lo cual ahora al ejecutar el resto de nuestro código solo no dará como resultado las filas que la columna nombre coincida con Addiel, de esta manera sencilla podemos llamar a nuestro navegador solo los datos de las personas que nos interesen. Presentar registros ordenados: Para presentar los registros de nuestra tabla ordenados de manera ascendente o descendente solo debemos agregar al valor de la variable $peticion la siguiente línea ORDER BY Edad ASC, donde le decimos que los ordenara por edad de manera ascendente en este caso, la línea nos quedaría asi: $peticion = mysql_query("SELECT * FROM Datos ORDER BY Edad ASC"); En caso de querer ordenarlos descendentemente utilizaríamos la abreviatura DESC. Actualizar registro: Ahora aprenderemos como como actualizar y modificar registros mediante el comando UPDATE, este nos será de mucha ayuda ya que constantemente las personas cambian su número de teléfono, cumplen año, cambian de correo electrónico y este comando nos ayudara para poder actualizar nuestra base de datos, su estructura es muy sencilla y es la siguiente: <?php $conexion = mysql_connect("localhost","root",""); mysql_select_db("NuestraBase",$conexion); mysql_query("UPDATE Datos SET Edad = '22' WHERE Idpersona = '1'"); mysql_close($conexion); ?> Como observamos mediante la sentencia mysql_query() ponemos la cadena "UPDATE Datos SET Edad = '22' WHERE Idpersona = '1'" en la cual especificamos mediante UPDATE que haremos una modificación a un registro ya creado en la tabla Datos donde con SET especificamos que el campo a modificar será la Edad y que tendrá ahora un valor de 22 seguido de un WHERE que nos servirá para especificar a qué usuario se le hará el cambio porque de lo contrario se lo haría a todos los usuario de nuestra tabla por lo cual especificamos que el cambio se le hará a la persona que su campo Idpersona será igual a 1, finalmente cerramos nuestra conexión y si ejecutamos nuestro fichero nos daremos cuenta como la edad de la persona con Idpersona igual uno paso a ser 22. Borrar Registros: Bueno señores ya llegamos a la parte final de este capitulo y no podría faltar como eliminar entradas de nuestra base de datos, para ellos contaremos con el sensillo comando DELETE y nuestro código quedaría asi de esta manera: <?php $conexion = mysql_connect("localhost","root",""); mysql_select_db("NuestraBase",$conexion); mysql_query("DELETE FROM Datos WHERE Idpersona= '2'"); mysql_close($conexion); ?> Como observamos es muy parecido a los demás comandos que hemos estudiado, usamos la sentencia ya conocidísima por nosotros mysql_query() y especificamos con esta línea "DELETE FROM Datos WHERE Idpersona= '2'" lo que vamos hace en nuestra tabla, en nuestro caso con DELETE FROM Datos especificamos que vamos a borrar algo de la tabla Datos, esto seguido de WHERE Idpersona= '2' con el cual especificamos que la línea a borrar será la que tenga como Idpersona el valor 2, este último tramo de línea es muy importante porque de no especificarse lo que haríamos seria borrar completamente nuestra tabla. Bueno taringueros hasta aquí el capítulo de hoy, esperen para mediados de semana la cuarte y última parte de este curso, y como siempre les digo sigan estudiando por su cuenta e informándose en internet, practiquen mucho y pongan sus ideas en marcha, Como siempre, dudas y sugerencias en los comentarios y no se olviden puntual. Saludos Addiel

Hola amigos de TARINGA, hoy les traigo un pequeño curso elaborado por mi sobre PHP tratando de una manera sencilla que aquellos que aún no conocen este lenguaje puedan ir adentrándose en él y conociendo de que va. De mas esta decirle que PHP es uno de los lenguajes más usados actualmente en el mundo de la programación de web dinámicas por eso quiero invitarlos a que se lean este tutorial completo y que al final dejen sus comentarios y por qué no sus puntos también. Ahora sí, vamos a lo que venimos, ¿qué es PHP? Más allá del concepto científico que dicho lenguaje pueda tener para nosotros desde ahora simplemente será el lenguaje que le puede dar vida a esas ideas que tienes en tu cabeza para hacer una página web. Debido a su sencillez no necesitaremos de mucho en nuestra PC para poder trabajar con él, simplemente necesitamos un editor de texto, que puede ser el mismo Bloc de Notas para aquellos que utilizan Windows u otros un poco más avanzados como son el GEDIT o el NOTEPAD++, en mi caso uso este último y se los recomiendo ya que es una excelente herramienta para desarrollar a este nivel, además de eso necesitaremos que instales XAMPP, este es un paquete de software que como bien sus iniciales lo dicen trae consigo Apache, MySQL, PHP y Perl, aunque por el momento solo nos interesara el Apache para visualizar en nuestro navegador lo que estamos haciendo y hablando de navegadores pueden instalar el que más les guste aunque si están viendo esto ya es de suponer que tiene uno, yo en mi caso utilizo Mozilla Firefox. De mas esta decirle como instalar estos programas ya que son la clásica forma de Siguiente-Siguiente-Finalizar. Una vez instalado XAMPP abrimos su panel de control y echamos andar Apache como muestro en la imagen. Una vez iniciado este proceso vamos a crear el fichero donde comenzaremos a ver los resultados de nuestro curso de PHP, así que vamos a la carpeta htdocs que hay dentro de la instalación de nuestro XAMPP que en mi caso esta en el disco C y allí creamos un nuevo documento de texto y le agregamos la extensión *.php en mi caso utilizare en nombre curso.php ustedes pueden utilizar el que más les guste. Ya hecho todos estos pasos pasamos a visualizar nuestro archivo en la web y para eso vamos a nuestro navegador y ponemos en la barra de URL el siguiente link http://localhost/curso.php y como verán les cargara la página en blanco claro esta porque aún no hemos escrito nada. Buenos ahora si comienza la parte de la programación en PHP como tal, vamos a nuestro fichero curso.php y lo abrimos con el Notepad++ o cualquier otro editor de texto que hubiesen querido utilizar y ahora comenzaremos a aprender, por fin. Mi primer archivo php: Lo primero que debemos tomar en cuenta para escribir un fichero en PHP es que este siempre debe comenzar con las etiquetas <?php y debe concluir con la etiqueta ?> al final del documento, si no lo hacemos asi por mas código que escribamos el navegador nunca lo interpretara como PHP Ejemplo: <?php echo “Hola Mundo, este es mi primer Curso de PHP”; ?> Como podrán ver si hacen esto en su documento y guardan los cambios y recargan su navegador en dicha página podrán ver que ahora les aparece un mensaje en su web que dice lo que pusieron allí detrás del ECHO. Comentarios: Como todo lenguaje PHP también tiene la posibilidad se hacer comentarios dentro de su código fuente, ya sea para encontrar errores o para hacerte más sencillo la comprensión del código fuente una vez que se complique, que tarde o temprano sucederá. Los comentarios en PHP son muy sencillos y pueden ser de dos tipos. Comentarios de una línea: //Esto es un comentario de una línea Comentario de varias líneas o páginas: /*Esto es un comentario de varias líneas*/ Esto como les digo le va a ser de mucha utilidad a la hora de hacer más comprensibles su proyecto y sobre todo cuando trabajen en grupos y más de uno tenga que analizar el código fuente. De mas esta decir que lo que este en comentarios no será tomado en cuenta por su navegador por lo que también podrán poner entre comentarios aquel código que no quieran que sea ejecutado por su web. Finalización de comandos: Como hemos podido ver en nuestro primer código <?php echo “Hola Mundo, este es mi primer Curso de PHP”; ?> Al finalizar el comando ECHO puse un ; este símbolo es de obligatorio uso en PHP, de lo contrario cuando carguen su página web esto le generaría un error, en este caso no lo haría debido a que es el único y por ende el ultimo antes de la etiqueta ?> lo cual no genera error pero de haber existido más comandos ya hubiesen tenido un error en su navegador, por lo cual les recomiendo siempre cerrar los comandos con ; en lo adelante. Variables en PHP: Una variable como bien su nombre lo indica es un contenedor que podrá contener un valor que puede variar según nuestras necesidades o los datos que pueda recibir desde la web ya sea por un formulario o desde el mismo URL aunque esto lo veremos en otro momento. Las variables son sencillas de escribir en PHP ya que siguen la siguiente estructura $variable = “valor”; Donde el $ es lo que le indica al navegador que lo que viene a continuación es una variable y la palabra variable la podemos cambiar por la que deseemos para nombrar nuestra variable, ejemplo edad seguido de esto viene el signo = que indica como bien saben una igualdad y a continuación viene el valor que tendrá por defecto nuestra variable y como pueden ver al final aparece nuestro ; que no se nos puede olvidar nunca. Un ejemplo completo de su uso es el siguiente: $edad = 21; $nombre = “Addiel Lucena Perez”; Podemos llamar una variable para visualizarla en el navegador con el comando ECHO. Ejemplo <?php $edad = 21; echo $edad ?> Como pueden observar en su navegador ahora debe de aparecer el número 21 y pueden ver que si van variando el 21 por cualquier otro valor este aparecerá en el navegador. Además de este tipo de variables existen otras que en otro momento veremos que a manera de adelanto y para si quieren ir investigando por su cuenta se encuentran las variables globales, las de sesión entre otras más. Booleanos: Los booleanos como en todos los lenguajes de programación pueden tener dos valores solamente que son TRUE o FALSE que en caso del primero el valor es 1 y en el del segundo es 0, esto nos podrá ayudar en muchos casos cuando queramos hacer preguntas o cuestionarios a nuestros usuarios en nuestra web ya que tendría que escoger entre dos resultados. Cadenas: Las cadenas son aquellas filas de caracteres de texto que utilizaremos para darle valor a una variable o hacer un ECHO, ejemplo: $nombre = “Addiel Lucena Perez”; $comentario = ‘Es el autor de este curso’ Como pueden observar pueden usar los mismo comillas dobles “” que comillas sencillas ‘’, esto no representa ningún problema para nuestro interprete de PHP. El gran problema que se nos puede presentar es cuando queremos poner alguna parte de nuestro texto entre comillas. Supongamos que queremos poner: TARINGA es el “hogar” de muchos amigos. Por lo general lo escribiremos así mismo en nuestro código fuente, lo cual nos llevaría a cometer un error, para esto tendremos que utilizar el siguiente símbolo ” lo cual dejaría nuestro código fuente de la siguiente forma. <?php echo “TARINGA es el ”hogar” de muchos amigos.”; ?> Existen otros simbolos que al final de esta serie de post se los voy a dar a manera de ayuda, pero ustedes si quieren pueden seguir investigando sobre esto. Operadores Aritméticos: Una de las posibilidades que nos brinda PHP es realizar operaciones con las variables del tipo numéricas y estas se pueden hacer de una manera sencilla utilizando estos cuatro operadores aritméticos que les mostrare a continuación. <?php echo 4+5; //para la suma echo 4-1; //para la resta echo 2*3; //para la multiplicación echo 8/2; //para la división echo 20 % 6; //para hallar el resto ?> Como pueden darse cuenta es muy sencilla la manera de hacer operaciones con PHP y esto les pueden servir para cualquier idea que tengan. Encadenado: El encadenado como su nombre lo indica lo utilizaremos para enlazar variables y el símbolo que se utiliza es el punto (.), ejemplo: <?php $mi = “Mi nombre es”; $nombre = “Addiel Lucena Perez”; $comentario = “y soy taringuero.”; echo $mi.$nombre.$comentario; ?> Esto nos devolverá en el navegador Mi nombre es Addiel Lucena Perez y soy taringuero. Operadores de Comparación: Estos son sencillos comandos que nos permitirán hacer comparaciones entre variables y obtener resultados y en lo adelante nos serán de muchísima utilidad. Estos son los comparadores en PHP == este hace una comparación entre valores para ves si son iguales. === este al igual que el anterior hace una comparación entre valores a ver si son iguales, pero además deben de ser idénticos. != diferencia !== diferente idéntico > mayor que. >= mayor igual que. < menor que. <= menor igual que. No se preocupen por ver su uso ahora porque mas adelante los podremos ver siendo usados en otras estructuras de comandos. Operadores Lógicos: Los operadores lógicos nos van ayudar hacer cumplir varios requisitos a la hora de elaborar cadenas if o switch en lo adelante solo para que los vallan conociendo esos son los esenciales. && //Obliga a que ambas instrucciones sean verdaderas || //Obliga a que uno de las dos instrucciones cumpla la condición verdadera ! //Esto da a entender al navegador de antemano que las instrucciones no son verdaderas Operador If: La estructura de control If es una de las más fáciles y de las más útiles a la hora de programar. Su estructura es muy sencilla y una vez vista se darán cuenta de las utilidades que esta puede tener en nuestro código fuente. if(condición){ Lo que realiza si se cumple la condición; }else{ Lo que realiza si no se cumple la condición; } Como podemos ver a pesar de ser muy sencilla su estructura esto nos brinda infinidades de usos, un ejemplo de ellos es el siguiente. <?php $edad = 21; if($edad>18){ echo “Ya eres mayor muchacho”; }else{ echo “Que lastima aun eres menor”; } ?> Como pudieron observar nuestra condición es que la variable edad sea mayor que 18 y dependiendo del valor que le demos a esa variable nuestra estructura dará una respuesta al usuario. Otro ejemplo que podemos observar es usando los operadores lógicos: <?php $edad = 21; if($edad>18 && $edad<40){ echo “Hola, eres bienvenido amigo”; }else{ echo “Lo sentimos, tu edad no cumple con los estándares nuestros”; } ?> Como pueden ver && obliga a que la edad de nuestra variable sea mayor que 18 y menor que 40 para darle la bienvenida. Otra cosa que nos permite la estructura If es colocar una dentro de la otra de la siguiente manera: if(condición 1){ if(condición 2){ Respuesta si se cumple las dos condiciones; }else{ Respuesta si no se cumple la segunda condición; } }else{ Respuesta si no se cumple la primera condición; } Un ejemplo práctico de esto sería el siguiente: <?php $edad = 21; $permisos = true; if($edad==18){ if($permisos==1){ echo “Hola, bienvenido”; }else{ echo “Hola, no tienes permisos para estar acá”; } }else{ echo “Aun no tienes edad para este sitio muchacho”; } ?> Como pueden ver lo primero que hace nuestra estructura es ver si la edad es mayor que 18, si cumple con esta característica entonces pasa al siguiente If de lo contrario pasa directamente a darle nuestro mensaje de negación, nuestro segundo If por su parte es comprobar si el usuario tiene los permisos correspondientes para estar dentro de la web, esto es muy común en sitios para mostrar contenido que solo sean para administradores. Ustedes usando su imaginación los pueden usar para darle el uso que necesiten. Operador Switch: El operador switch es muy parecido al operador If con la diferencia de que este es usado cuando el resultado que podamos obtener pueda tener más de dos resultados, no como el caso de If que solo puede ser verdadero o falso. Su estructura también es muy sencilla y la podemos encontrar de la siguiente forma switch(valor){ case (posible valor) respuesta en caso de coincidir los valores; break; case(posible valor 2) respuesta en caso de coincidir los valores; break; //Y asi sucesivamente todas las veces que necesitemos. } Un ejemplo de esto puede ser el siguiente: <?php $nota = 5 switch($nota){ case(0) echo “Estas muy muy mal”; break; case(1) echo “No estudiasteis nada”; break; case(2) echo “Debes estudiar más”; break; case(3) echo “Aprobasteis con el mínimo”; break; case(4) echo “Muy bien, pero podría ser mejor”; break; case(5) echo “Felicitaciones, sigue así”; break; } ?> Como pueden ver la estructura SWITCH lo que hace es ir viendo los posibles casos que le damos y en caso de coincidir con algunos dar la respuesta que queramos. Operador While: El operador WHILE también es muy sencillo y como podrán ver su parecido es mucho con el IF, su estructura es la siguiente: while(condición){ Código a ejecutar si se cumple; } Como vieron es muy sencilla la estructura, pero OJO esta simple estructura puede hacer que nuestro navegador se nos cuelgue si no la utilizamos correctamente, ejemplo: <?php $valor = 0; while($valor>=10){ echo “Hola mundo”; } ?> Si ejecutamos este trozo de código en nuestro navegador verán como no para de cargar y esto se debe a que acabamos de hacer un bucle infinito, porque lo que hace el navegador es tratar de poner Hola mundo de manera infinita porque el operador while tiene como característica que cada vez que llega a su final vuelve a su inicio hasta que ya no se pueda cumplir mas la condición y como nuestra variable no deja de ser 0 cae en un bucle infinito. Esto nos obliga a tener que agregarle a nuestro código anterior la siguiente línea: $valor = $valor + 1; Y con esto cada ves que WHILE pase por ella le sumara una unidad ha nuestro valor lo cual nos daría como resultado la cantidad de Hola mundo que hay desde 0 hasta 10. Nuestro nuevo código quedaría asi: <?php $valor = 0 while($valor<=10){ echo “Hola mundo”; $valor = $valor + 1; //con esto agregamos una unidad a nuestro valor } ?> Otras estructuras de control que existen son el FOR, el DO WHILE, el GOTO y el FOREACH que algunos son muy parecidos a los ya estudiados y los otros no son muy comúnmente usados por lo cual no voy abordar acerca de ellos, pero igual les dejo el nombre para si alguno quiere indagar más sobre ellos lo haga. Buenos amigos y hasta aquí por hoy en el siguiente post hablaremos un poco más sobre PHP y sus utilidades además les prometo abordar un poco sobre las estructuras de control que no aborde hoy así que pueden ir preparándose en ese sentido, además aprenderemos sobre funciones y sus usos, le enseñare un poco sobre los INCLUDES, ya para un tercer post los introduciré un poco en la relación de PHP con MySQL para que ya así puedan desarrollar sus bases de datos y comenzar a realizar una que otra web a manera de ocio y aprendizaje. Como siempre si les gusta el tema no dejen de estudiar y prepararse sobre él, en internet hay cientos de sitios donde se habla de PHP.Dejen sus comentarios, sugerencias y dudas en el post y a medida de mis posibilidades las iré respondiendo, y por qué no dejen unos puntos también. Saludos Addiel

Hola amigos de TARINGA como les había prometido acá les traigo la segunda parte de nuestro curso de PHP. En esta parte estaremos enfocados, como bien le dije al final de la anterior, en el uso de algunos operadores que no repasamos anteriormente y que seguro los más interesados fueron buscando información por el internet. Antes que nada quiero hacer un punto aparte para explicar una duda que surgió en el primer trabajo y fue el hecho de la hora de fusionar HTML y PHP, estos dos lenguajes pueden trabajar perfectamente uno dentro del otro. Acá les va un pequeño ejemplo de cómo se complementan los dos lenguajes. Ejemplo, PHP dentro de HTML <!DOCTYPE html> <html> <head> <title>Mi página</title> </head> <body> <h1>Hola Mundo</h1> <?php echo “Esta es mi pagina”; ?> </body> </html> Como pueden observar si hace esto en nuestro fichero curso.php y recargan su navegador perfectamente verán como nuestro navegador interpreta los dos lenguajes a la perfección a pesar de estar uno dentro del otro. El otro caso que nos podemos encontrar es el código HTML dentro del código PHP y esto mas bien su utiliza para darle un poco de estilo a lo que nos muestra PHP, tomemos como ejemplo el mismo código anterior solo que haremos un pequeño cambio en la línea de nuestro código PHP. Nos quedara así ahora: <?php echo ‘<h3>Esta es mi primera página</h3>’; ?> Si se dan cuenta solamente le agregue dentro de nuestro ECHO las etiquetas HTML <h3></h3> para darle un poco de estilo a nuestro texto y nuestro navegador las interpretara sin ninguna dificultad mostrándonos el contenido correctamente. Si se pudieron fijar esta vez utilice comillas simples para nuestro ECHO y deben recordar que anteriormente les dije que se podían usar ambas, eso lo hice porque en caso de que el código HTML a introducir tenga que usar comillas tendremos que usar las contrarias a las que usamos en nuestro ECHO, acá pueden ver un ejemplo: <?php echo ‘<div id=”comillas”> <h1>Ejemplo de usos de comillas</h1> </div>’; ?> Como ven hacemos uso de los dos tipos de comillas y nuestro navegador no entra en conflicto por ello, solo recordarles que usen siempre dentro del código HTML la contraria a la que utilizan en el ECHO. Bueno explicado este punto ahora si vamos a la parte que nos corresponde en este capítulo y para ello comenzaremos con los operadores que no quedaron por explicar. Operador FOR: La estructura de control FOR es ampliamente usada también en el lenguaje PHP. Esta estructura establece una operación que se repite una cierta cantidad de veces en la que podemos controlar una serie de parámetros. Su estructura es de lo más sencilla y nos va a facilitar su aprendizaje, ejemplo: For(condición){ Comando a realizar; } Como pueden ver es muy parecida a la estructura IF estudiada en la parte 1 de este curso, para que tengan una mejor idea de cómo funciona acá le dejo un ejemplo práctico de un caso: <?php for($dato=0; $dato<=10; $dato++){ echo "Paso por la condición".$dato."veces<br>"; } ?> Como pueden observar en la condición puse un valor inicial para la variable $dato, un valor final y un incremento que es el que hace que cada vez que la secuencia FOR vuelva a pasar por ella le aumente un valor hasta llegar a 10 que fue el límite que establecimos. La etiqueta <br> establecida al final del ECHO es puramente estructural y es para que nuestros ECHO se posicionen un renglón debajo del anterior. Si cargan su navegador verán cómo se ejecuta esta sentencia del 0 al 10 como nosotros mismos lo establecimos. Operador GOTO: La estructura de control GOTO nos permite saltar de una parte a otra del programa. Esta estructura de control es realmente muy sencilla y para que puedan observarla aca les tengo un ejemplo: <?php Goto salto; Echo "Este texto no lo voy a mostrar"; Salto: Echo "Este es el texto que mostrare"; ?> Como pueden observar y llegar de manera intuitiva una vez que nuestro interprete PHP interpreta la estructura GOTO tomo el valor de la marca que le hacemos y busca en el código donde esta y a partir de ahí vuelve a comenzar a interpretar el código desechando todo lo demás. Si cargan el anterior ejemplo en su navegador podrán darse cuenta que nuestro navegador desecha totalmente nuestro primer ECHO y va directamente al segundo que es donde le indicamos que esta nuestra etiqueta SALTO. Funciones: Bueno taringueros, ahora si vamos a una de las cosas más importantes en todo lenguaje de programación y que estoy muy seguro que les va a ser de mucha utilidad en lo adelante sobre todo para ahorrarnos trabajo a la hora de programar cualquier cosa, y no estoy hablando de nada más que de las funciones. Una función como bien su nombre lo explica es aquella parte de código que se encarga de realizar una función que nosotros mismo determinamos de antemano y la repetimos cuantas veces necesitemos en nuestro código simplemente llamándola como se le explicara posteriormente, ahorrándonos así el tiempo y el espacio en nuestro código fuente de tener que repetir una serie de comandos que necesitaríamos más de una vez. La estructura de una función es sencilla, y como verán a continuación en este ejemplo es muy fácil de escribir y comprender. Function NombreDeLaFuncion (parametros){ Comandos a ejecutar; } Llamada a la función; Acá podemos ver un ejemplo práctico de cómo funciona esto: <?php function tablas($numero){ for($multiplicador=0;$multiplicador<=10;$multiplicador++){ echo $numero. " x " .$multiplicador. " = " .$numero*$multiplicador."<br>" ; } } tablas(5); ?> Como podemos observar creamos una función llamada TABLAS y como parámetro le pusimos la variable $numero, y dentro de esta pusimos una estructura de control FOR que ya todos conocemos, al finalizar llamamos a nuestra función y le ponemos como parámetro que la variable $numero sea igual a 5, si hace esto en nuestro archivo podrán darse cuenta como su navegador les mostrara ahora la tabla entera del 5 pero si seguimos llamando la función TABLAS con otros valores nuestro navegador nos la mostrara tantas veces se la pidamos y sin la necesidad de escribir todo el código una y otra vez. Es muy importante aclarar para todos que dentro de la función no podremos utilizar variables que han sido declaradas fuera de estas, o nuestro navegador nos mostrara un error al ejecutar nuestro código. Bueno amigos sabiendo ya lo que es una función y como llamarla en nuestro código vamos a nuestra última parte de este capítulo, y me refiero a los INCLUDES. Los INCLUDES no son más que una sencilla manera de cargar ficheros PHP que necesitaremos utilizar en nuestro código fuente y que por lo general hacemos a parte porque los necesitaríamos en más de un fichero, todo esto con el objetivo de ahorrarnos espacio y tiempo. La estructura del INCLUDE es sencilla y se puede encontrar de las siguientes maneras: Include (“fichero a incluir.extencion”); Ejemplo: include (“configuración.php”); Dentro del directorio del fichero a incluir se debe de especificar las carpetas en caso de que ambos no estén en la misma. Otro ejemplo de como puden incluirse fichero es: require (“configuración.php”); La principal diferencia en el uso de estas dos etiquetas es que la primera de existir un error solo te mostrara un ADVERTENCIA de este y seguirá ejecutando el resto del código que le continúe, al contrario de la segunda que te mostrara un ERROR FATAL y ahí mismo parara la ejecución del código. Otra forma mas de INCLUDE es el INCLUDE_ONCE que como su nombre lo dice hace simplemente que el fichero se incluya una sola ves ya que los includes se pueden usar varias veces en un mismo código y con esto nos ahorramos posibles conflictos entre variables definidas en ambos ficheros, su estructura es idéntica a los demás y aquí tienen un ejemplo: include_once (“configuración.php”); Bueno taringueros hasta aquí este nuestra segunda parte de esta serie de cuatro, espero que hayan logrado entender un poco más acerca de este maravilloso y sencillo lenguaje de programación que es PHP y los invito a que si es primera vez que ven este articulo vallan y le echen un ojo al primero aquí. Para la tercera parte estaremos viendo la unión de PHP con MySQL y las ventajas que esto nos brinda, aprenderemos a crear Bases de Datos, como crear tablas, editarlas y eliminarlas, y así ya estaremos más cerca de poder hacer una pequeña web nuestra. Como siempre les digo, no se olviden de seguir investigando por su cuenta y ya saben dudas, sugerencias y comentarios lo espero abajo, responderé en la medida de las posibilidades y seguro estoy que también habrá otros usuarios que les ayudaran, y como siempre les digo no se olviden de puntuar, nos vemos en otro momento. Saludos Addiel

Hola amigos de TARINGA hoy les traigo la primera parte de un tutorial que me ayudo mucho a la hora de aprender a desarrollar pequeños juegos para navegadores, espero que tambien le sea de mucha utilidad a ustedes. Parte 1. Dibujando en el canvas. Para crear un juego en canvas, necesitaremos dos archivos: Una página HTML para mostrarlo, y el código en JavaScript del juego. Comencemos creando un archivo llamado “index.html”, lo abrimos para editar (Clic derecho » Abrir con » Notepad++, o el que uses) y copiemos dentro el siguiente código: <!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <!--[if lte IE 8]><meta http-equiv="X-UA-Compatible" content="chrome=1" /><!--> <title>My First Canvas Game</title> </head> <body> <h1>My First Canvas Game</h1> <p><canvas id="canvas" width="300" height="150" style=background:#999> Canvas not supported by your browser. </canvas></p> <script type="application/javascript" src="game.js"></script> </body> </html> No me detendré a explicar el código HTML, ya que no es necesario para comprender el desarrollo de juegos. Digamos que el código arriba es lo básico para mostrar una página web donde mostraremos nuestro juego. Solo hay dos líneas importantes que debes comprender: <script type="application/javascript" src="game.js"></script> Mediante esa etiqueta “script”, llamamos al archivo game.js, que contendrá todo el código de nuestro juego. <canvas id="canvas" width="300" height="150" style="background:#999"> Canvas not supported by your browser. </canvas> En esta etiqueta canvas, será donde dibujaremos nuestro juego, el ancho de 300px y alto de 150px son los valores predeterminados, por lo que se creará un lienzo del mismo tamaño en caso de no especificarse estos atributos. Puedes personalizarlos de acuerdo al juego que desarrolles, mas para este ejemplo, los dejaremos así. El ID es el nombre único de nuestro elemento en la página, y es necesario para hacer referencia a él desde el juego; podemos cambiarlo al que deseemos, pero necesitaremos también cambiarlo en nuestro código (Que veremos en un momento). Por último, agregamos un fondo gris para identificar dónde se encuentra nuestro lienzo (canvas). Si hay un problema con tu código, únicamente se mostrará el fondo gris, funcionando esto como una alerta. Posteriormente podrás borrarlo o cambiarlo, pero por ahora, será mejor dejarlo ahí. Ahora, crearemos el código para nuestro juego. Comenzaremos por lo más sencillo: Dibujar un rectángulo dentro de él. Para ello, crearemos un segundo archivo de nombre “game.js”, y copiaremos el siguiente código dentro: window.addEventListener('load',init,false); var canvas=null,ctx=null; function init(){ canvas=document.getElementById('canvas'); ctx=canvas.getContext('2d'); paint(ctx); } function paint(ctx){ ctx.fillStyle='#0f0'; ctx.fillRect(50,50,100,60); } Analizaremos el código por partes. En la primer línea, agregamos un escucha a nuestra ventana, para que en cuanto termine de cargar la página, comience a ejecutar “init” (Que es donde comenzamos nuestro código). Debajo, creamos dos variables nulas donde guardaremos nuestro canvas y su contexto. Es importante que indiquemos que el código comience hasta que se cargue la página, de lo contrario, el código podría no encontrar nuestro lienzo, y generaría una serie de errores que no nos permitirían reproducir nuestro juego. Posteriormente empezamos nuestra función “init”. En la primer línea, obtenemos nuestro lienzo buscándolo por su ID “canvas” (Si pusiste otro nombre a tu lienzo, es aquí donde debes poner el mismo nombre). Después de esto, obtenemos el contexto 2D de nuestro lienzo. Necesitamos este contexto ya que es nuestra herramienta para pintar dentro del lienzo; podríamos imaginar que es como nuestro pincel. Por último, llamamos a la función “paint”, pasándole dicho contexto para dibujar en él. La última parte es nuestra función “paint”. Aquí indicamos que usaremos como color hexadecimal de relleno '#0f0' (verde), y debajo, rellenamos un rectángulo desde la coordenada x,y 50,50, con 100 de ancho y 60 de alto. Guardemos el archivo. Si lo hemos hecho todo bien, al hacer doble clic en index.html, se abrirá una página web donde se mostrará el lienzo con el rectángulo verde que hemos creado. Diviértete cambiando los colores y dibujando más rectángulos, hasta que te familiarices con el lienzo. Puedes usar strokeStyle y strokeRect para dibujar el contorno en lugar de rellenarlos. Depuración Si solo se muestra en la pantalla un rectángulo gris, probablemente hay un error en tu código. Para encontrar el origen del problema, debes depurarlo. Dependiendo del navegador que uses, puedes depurar tu código como se muestra a continuación: Chrome: Presiona F12 o Ctrl + Shift + I y selecciona la pestaña "consola". Firefox: Peesiona Ctrl + Shift + K y selecciona la pestaña "Consola web". Te recomiendo deshabilitar todas las notificaciones excepto las de JS para depurar mas fácil el código de tu videojuego. Internet Explorer: Presiona F12 y selecciona la pestaña "consola". Opera: Presiona Ctrl + Shift + I y selecciona la pestaña "consola". Safari: Presiona Ctrl + Shift + I y selecciona la pestaña "consola". Debes habilitar antes "Mostrar menú de desarrollo en la barra de menú" en la pestaña "Avanzados" en "Preferencias" para usar esta opción. Con esta información, podrás resolver cualquier problema que puedas encontrarte mientras estás desarrollando tus juegos. Parte 2. Animando el canvas. En la primer parte, vimos como dibujar en nuestro lienzo. Eso está bien, pero un juego se trata de interactuar con los objetos, no solo de dibujarlos. Por tanto, necesitamos por comenzar a darle movimiento a nuestro rectángulo. Primero, declararemos dos nuevas variables: “x” y “y”. Al comienzo, tras declarar las variables canvas y ctx, agregaremos la siguiente línea: var x=50,y=50; Y modificaremos nuestra función “paint” para que limpie la pantalla antes de volver a dibujar en ella, esto se hace dibujando un rectángulo del tamaño completo del lienzo. Posteriormente dibujamos el rectángulo en las coordenadas mencionadas, el cual haremos de paso un poco más pequeño: function paint(ctx){ ctx.fillStyle='#000'; ctx.fillRect(0,0,canvas.width,canvas.height); ctx.fillStyle='#0f0'; ctx.fillRect(x,y,10,10); } En este ejemplo, estamos dibujando el rectángulo de fondo de color negro. Puedes darle cualquier valor hexadecimal desde '#000' hasta '#fff'. Experimenta con colores diferentes para que encuentres el que consideres quede mejor con tu juego. Ahora, nuestra función “init” llama solo una vez a la función “paint”, por lo que todo es pintado solo una vez. Para que en verdad se trate de una animación, tenemos que hacer que se llame a la función una y otra vez cada determinado tiempo. Para esto, llamaremos a una función“run()”, sustituyendo donde se llamaba a “paint(ctx)” en la función “init”: run(); Y crearemos la función “run” de esta forma: function run(){ requestAnimationFrame(run); act(); paint(ctx); } En la primer línea, llamaremos a un requestAnimationFrame. Esta función pedirá al navegador para el siguiente momento en que pueda realizar un cuadro de animación, usualmente a 60 cuadros por segundo en computadoras de buen rendimiento, aunque puede variar en computadoras de rendimiento menor. Para saber más al respecto, ve al Apendice 1: RequestAnimationFrame. Posteriormente, llamamos a las funciones "act()" y "paint(ctx)". Hemos visto antes que "paint" dibuja todo en nuestro lienzo. La función "act" es usada para llamar a todas las acciones en nuestro juego; en este caso, moveremos nuestro rectángulo sumándole 2 pixeles por cuadro a nuestra variable "x": function act(){ x+=2; } Aun cuando las acciones pudieran ser puestas en la función "paint", es recomendado hacerlo por aparte, para prevenir errores, como en el que lo que se muestra en pantalla no es lo mismo que ocurre realmente (Si mezclas ambos al mismo tiempo esto puede ocurrir, por eso es mejor mover primero y al final dibujarlo). Además, hacerlo de forma separada facilita saber dónde ocurren los eventos para modificarlos posteriormente. Guardemos y abramos de nuevo nuestra página “index.html”. Si lo hicimos bien, ¡Veremos a nuestro pequeño rectángulo correr por el lienzo! Allá va... Allá va... Y se fue... Sí, se fue, y no volverá... Si queremos verlo de nuevo, habrá que actualizar la página, y volverá a hacer lo mismo. Pero si queremos mantener a nuestro rectángulo dentro, podemos condicionarlo a que regrese a la pantalla si sale de esta, agregando las siguientes dos líneas después de “x+=2;”: if(x>canvas.width) x=0; Así le indicamos que si su posición es mayor a la del ancho de lienzo, regrese a la posición 0. Si actualizamos la página ahora, veremos que nuestro rectángulo sale por una esquina, y vuelve a aparecer una y otra vez por la opuesta. Problema de compatibilidad: Debido a que algunas versiones antiguas de navegadores no soportan requestAnimationFrame como tal, deberías agregar esta función al final de tu código (más información en el Apéndice 1: RequestAnimationFrame): window.requestAnimationFrame=(function(){ return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function(callback){window.setTimeout(callback,17);}; })(); Parte 3. Usando el teclado. Nuestro rectángulo ya se mueve por el lienzo, pero para verdaderamente interactuar con él, necesitamos indicarle a dónde queremos que vaya. Para eso, necesitamos primero una variable dónde guardar la tecla presionada: var lastPress=null; Y agregar al final de nuestro código un escucha del teclado que almacene la tecla presionada: document.addEventListener('keydown',function(evt){ lastPress=evt.keyCode; },false); Mediante este método, podremos tomar decisiones en el juego sabiendo la última tecla presionada. Cada tecla tiene un valor numérico, el cual tendremos que comparar para realizar la acción deseada dependiendo la tecla presionada. Una buena forma de saber cuál ha sido la última tecla presionada, sería agregando esta línea en nuestra función “paint”: ctx.fillText('Last Press: '+lastPress,0,20); Por ahora no debes preocuparte de eso. Usaremos las teclas izquierda, arriba, derecha y abajo, cuyos valores numéricos son 37, 38, 39 y 40 respectivamente. Para usarlas más facilmente, las guardaremos en valores constantes: var KEY_LEFT=37; var KEY_UP=38; var KEY_RIGHT=39; var KEY_DOWN=40; A diferencia de otros lenguajes de programación, JavaScript no tiene constantes, pero las variables se encargarán del trabajo sin problema. Vayamos ahora al movimiento del rectángulo. Primero, necesitaremos una nueva variable que almacene la dirección de nuestro rectángulo: var dir=0; Esta variable “dir” tendrá un valor del 0 al 3, siendo 0 hacia arriba, y rotando en dirección de las manecillas del reloj para demás valores cada cuarto de hora. Ahora utilizaremos un método simple para tener un tiempo consistente entre dispositivos (Puedes leer más en el Apéndice 2: Tiempo consistente entre dispositivos). La forma más fácil para hacer esto por ahora, es dividir las funciones act y paint en dos llamadas distintas, una optimizada para el re-pintar, y una regulada para las acciones: function run(){ setTimeout(run,50); act(); } function repaint(){ requestAnimationFrame(repaint); paint(ctx); } Como puedes ver dentro de la función "run", llamamos a un temporizador "setTimeout", que llama a la función "run" de nuevo cada 50 milisegundos. Esta es una forma simple de tener el juego a 20 ciclos por segundo. Nota que, dado que este hace el ciclo de la función "act" asíncrono de la función "repaint", no puedes confiar que lo que realices en el primero, será dibujado en el segundo; pero esto no suele ser un problema cuando el re-pintado es más rápido que el ciclo de acciones. ¡No olvides llamar a ambas funciones en la función init! Ahora comencemos por detectar la dirección que tomará nuestro rectángulo dependiendo la última tecla presionada, dentro de la función "act": // Change Direction if(lastPress==KEY_UP) dir=0; if(lastPress==KEY_RIGHT) dir=1; if(lastPress==KEY_DOWN) dir=2; if(lastPress==KEY_LEFT) dir=3; Después, moveremos nuestro rectángulo dependiendo la dirección que se haya tomado: // Move Rect if(dir==0) y-=10; if(dir==1) x+=10; if(dir==2) y+=10; if(dir==3) x-=10; Por último, buscaremos si el rectángulo ha salido de la pantalla, y en dado caso, lo regresaremos a la misma: // Out Screen if(x>canvas.width) x=0; if(y>canvas.height) y=0; if(x<0) x=canvas.width; if(y<0) y=canvas.height; Te habrás dado cuenta que antes de cada bloque de código, agregué una referencia precedida de dos diagonales (//). Esto es un comentario, y son bastante funcionales para describir qué ocurre en cada sección del código, así, si es necesario modificarlo después, podremos identificar con facilidad sus componentes. Los comentarios también sirven para “eliminar” líneas de código, pero que podríamos querer utilizar después, por ejemplo, la que dibuja en pantalla cuál fue la última tecla presionada (No querremos que la gente que juegue nuestro juego la vea, ¿O si?). Guarda el juego y abre “index.html”. Si todo está de forma correcta, ahora podrás controlar al pequeño rectángulo usando las flechas del teclado. ¡Felicidades! Pausa Podría dar por concluida la lección de hoy, pero aprovechando que estamos viendo como usar el teclado, te contaré un pequeño truco que se usa para poner “Pausa” a un juego. Comenzaremos por supuesto, creando una variable que indicará si el juego está en pausa: var pause=true; Ahora, encerraremos todo el contenido de nuestra función “act” en una condicional “if(!pause)”, o sea, si el juego no está en pausa. Hasta el momento hemos hecho condicionales de una sola línea, por lo que no hemos usado llaves. Pero en caso de ser utilizada más de una línea en la condicional, se deben usar llaves igual que en las funciones, tal como hacemos en el caso actual. Al final de la condicional “if(!pause)”, agregaremos estas líneas para que al presionar KEY_ENTER (13), se cambie el juego entre pausado y sin pausa: // Pause/Unpause if(lastPress==KEY_ENTER){ pause=!pause; lastPress=null; } Es muy importante que estas líneas no las encierres dentro del “if(!pause)”, o de lo contrario, jamás podrás quitar la pausa (Por que jamás entrarás a esa parte del código). La asignación “pause=!pause” indica que cambio su valor por el opuesto (falso si es verdadero o verdadero si es falso), y después nulificamos “lastPress”, o de lo contrario, el juego estaría poniendo y quitando pausa sin fin hasta que se presione otra tecla. Por último, dibujaremos en nuestra función “paint” el texto “PAUSE” de forma centrada, si la pausa está activada: if(pause){ ctx.textAlign='center'; ctx.fillText('PAUSE',150,75); ctx.textAlign='left'; } Actualicemos el juego. Ahora cada vez que presionemos la tecla Enter, el juego entrará o saldrá de la pausa. Parte 4. Interactuando con otros elementos. Además de poder interactuar nosotros con el juego, el segundo punto importante de un juego es que los elementos puedan interactuar entre si. Para saber si dos elementos “se están tocando” (Es decir, hay una intersección entre ellos), no solo nos basta saber su posición XY, también necesitamos conocer el alto y ancho de los elementos. En Javascript, las funciones cumplen una doble función. No solo te permiten crear eventos que pueden ser llamados en cualquier momento (como ya hemos visto), si no que además pueden hacer la función de objetos (Esto en otros lenguajes suele ser conocido como “clases”). Por ejemplo, crearemos nuestra propio objeto “rectángulo”, que contendrá una posición en X, en Y, además de un ancho y alto. Además, las funciones de tipo objeto pueden contener sus propias funciones. Así pues, agregaremos al rectángulo una función “intersección”, que nos dirá si está en una intersección con un segundo elemento, así como una función que rellene de forma más sencilla el rectángulo. Para conocer más a detalle sobre este tema, lee el Apéndice 3: Programación Orientada a Objetos; por ahora, tan solo copiemos al final de nuestro código, la siguiente función: function Rectangle(x,y,width,height){ this.x=(x==null)?0:x; this.y=(y==null)?0:y; this.width=(width==null)?0:width; this.height=(height==null)?this.width:height; this.intersects=function(rect){ if(rect!=null){ return(this.x<rect.x+rect.width&& this.x+this.width>rect.x&& this.y<rect.y+rect.height&& this.y+this.height>rect.y); } } this.fill=function(ctx){ if(ctx!=null){ ctx.fillRect(this.x,this.y,this.width,this.height); } } } Como podremos ver, la función Rectángulo está diseñada para recibir las cuatro variables en el orden X, Y, Ancho y Alto. Si omitimos enviar alguna, esta automáticamente se volverá “0” para evitar errores, excepto en el caso de la Altura, que automáticamente obtendrá el valor del Ancho (Lo que es práctico para omitir enviar ancho y alto si queremos que ambos tengan el mismo valor). Ahora haremos unos cambios a nuestro código. Primero eliminaremos las variables “x” y “y” que declaramos en un comienzo, y en su lugar, crearemos una variable “player” de nuestro nuevo tipo rectángulo: var player=new Rectangle(40,40,10,10); Después, cambiaríamos la forma en que se dibuja el rectángulo a la siguiente forma: player.fill(ctx); Por último, y hay que tener mucho cuidado en esto, será que todas nuestras variables “x” y “y” que usamos antes las convertiremos agregando “player.” antes de ellas, de igual forma que hicimos con la forma en que dibujamos el rectángulo. Ahora, necesitaremos un nuevo elemento con el cual interactuar. Crearemos una nueva variable tipo rectángulo llamada “food”: var food=new Rectangle(80,80,10,10); De igual forma, la dibujaremos, solo que esta la haremos de color rojo: ctx.fillStyle='#f00'; food.fill(ctx); Ahora, analizaremos si ambos están en una intersección. En dado caso, agregaremos un punto a nuestro puntuaje, y cambiaremos la posición de la comida a otro lugar al azar. Para ello, primero tendremos que declarar nuestro puntuaje: var score=0; También agregaremos esta función que nos será muy útil para facilitar el uso de números enteros al azar: function random(max){ return Math.floor(Math.random()*max); } Ahora si, en la función "act", después de mover a nuestro jugador, compararemos si ambos elementos están en una intersección, y de ser así, agregaremos un punto más y cambiaremos de posición la comida: // Food Intersects if(player.intersects(food)){ score++; food.x=random(canvas.width/10-1)*10; food.y=random(canvas.height/10-1)*10; } La pequeña ecuación de dividir la pantalla entre 10 dentro del random y multiplicarla al final de nuevo, hace que la comida aparezca en un lugar cada 10 pixeles, de esta forma se ajustará “a la rejilla”. Por último, dibujaremos nuestro puntuaje en pantalla: ctx.fillText('Score: '+score,0,10); Guardemos y probemos el código. Ahora cada vez que el rectángulo verde toque al rojo, el puntuaje subirá. Parte 5. Interactuando con varios elementos iguales. Ya vimos como hacer para que un objeto interactúe con otro. El problema sería si quisiéramos, por ejemplo, querer interactuar con 50 elementos que hagan exactamente lo mismo (Como serían por ejemplo los enemigos). Tener que evaluar uno por uno sería demasiado tedioso y complicado. Afortunadamente, hay una forma más sencilla de interactuar con varios elementos de propiedades iguales a través de los arreglos. Para este ejemplo, crearemos una variable de tipo arreglo llamada “wall”: var wall=new Array(); Este arreglo contendrá todos nuestros elementos de tipo pared. Ahora, agregaremos cuatro elementos a este arreglo de la siguiente forma: wall.push(new Rectangle(100,50,10,10)); wall.push(new Rectangle(100,100,10,10)); wall.push(new Rectangle(200,50,10,10)); wall.push(new Rectangle(200,100,10,10)); Para dibujar los elementos de la pared, recorreremos los elementos del arreglo a través de un “for”, de la siguiente forma: ctx.fillStyle='#999'; for(var i=0,l=wall.length;i<l;i++){ wall.fill(ctx); } De igual forma, comprobaremos cada elemento de la pared con un “for”, y comprobaremos si hace una intersección con la comida o el jugador: // Wall Intersects for(var i=0,l=wall.length;i<l;i++){ if(food.intersects(wall)){ food.x=random(canvas.width/10-1)*10; food.y=random(canvas.height/10-1)*10; } if(player.intersects(wall)){ pause=true; } } Primero, comprobamos si la comida choca con la pared. En dado caso, cambiamos de lugar la comida, esto evitará que esta quede “atorada” en la pared. Segundo, comprobamos si el jugador choca con la pared, y en tal caso, el juego se detendrá. Eso está bien, pero lo ideal sería que cuando el jugador choque, al reanudar el juego, este comience desde el principio. Arreglemos esto. Comencemos por saber cuando el jugador ha perdido, a través de una variable llamada “gameover”: var gameover=true; Luego, agreguemos estas líneas justo donde el juego comienza, después del “if(!pause)”: // GameOver Reset if(gameover) reset(); De esta forma, llamaremos a una función llamada “reset”, donde indicaremos como queremos que inicie el juego. En este caso, pondremos el score en cero, la dirección hacia su punto original, regresaremos al jugador a su punto inicial y cambiaremos de lugar la comida. Por último, por supuesto, nos aseguraremos que el juego deje de estar en Game Over: function reset(){ score=0; dir=1; player.x=40; player.y=40; food.x=random(canvas.width/10-1)*10; food.y=random(canvas.height/10-1)*10; gameover=false; } Por último, cambiaremos el “if(pause)” en nuestro “paint” para ver si el juego está en Game Over o en una pausa común: if(pause){ ctx.textAlign='center'; if(gameover) ctx.fillText('GAME OVER',150,75); else ctx.fillText('PAUSE',150,75); ctx.textAlign='left'; } Si me siguieron hasta aqui su codigo final les debe quedar asi. window.addEventListener('load',init,false); var canvas=null,ctx=null; var lastPress=null; var pause=true; var gameover=true; var dir=0; var score=0; var player=new Rectangle(40,40,10,10); var food=new Rectangle(80,80,10,10); var wall=new Array(); wall.push(new Rectangle(100,50,10,10)); wall.push(new Rectangle(100,100,10,10)); wall.push(new Rectangle(200,50,10,10)); wall.push(new Rectangle(200,100,10,10)); var KEY_ENTER=13; var KEY_LEFT=37; var KEY_UP=38; var KEY_RIGHT=39; var KEY_DOWN=40; function random(max){ return Math.floor(Math.random()*max); } function init(){ canvas=document.getElementById('canvas'); ctx=canvas.getContext('2d'); run(); repaint(); } function run(){ setTimeout(run,50); act(); } function repaint(){ requestAnimationFrame(repaint); paint(ctx); } function reset(){ score=0; dir=1; player.x=40; player.y=40; food.x=random(canvas.width/10-1)*10; food.y=random(canvas.height/10-1)*10; gameover=false; } function act(){ if(!pause){ // GameOver Reset if(gameover) reset(); // Change Direction if(lastPress==KEY_UP) dir=0; if(lastPress==KEY_RIGHT) dir=1; if(lastPress==KEY_DOWN) dir=2; if(lastPress==KEY_LEFT) dir=3; // Move Rect if(dir==0) player.y-=10; if(dir==1) player.x+=10; if(dir==2) player.y+=10; if(dir==3) player.x-=10; // Out Screen if(player.x>canvas.width) player.x=0; if(player.y>canvas.height) player.y=0; if(player.x<0) player.x=canvas.width; if(player.y<0) player.y=canvas.height; // Food Intersects if(player.intersects(food)){ score++; food.x=random(canvas.width/10-1)*10; food.y=random(canvas.height/10-1)*10; } // Wall Intersects for(var i=0,l=wall.length;i<l;i++){ if(food.intersects(wall)){ food.x=random(canvas.width/10-1)*10; food.y=random(canvas.height/10-1)*10; } if(player.intersects(wall)){ gameover=true; pause=true; } } } // Pause/Unpause if(lastPress==KEY_ENTER){ pause=!pause; lastPress=null; } } function paint(ctx){ ctx.fillStyle='#000'; ctx.fillRect(0,0,canvas.width,canvas.height); ctx.fillStyle='#0f0'; player.fill(ctx); ctx.fillStyle='#999'; for(var i=0,l=wall.length;i<l;i++){ wall.fill(ctx); } ctx.fillStyle='#f00'; food.fill(ctx); ctx.fillStyle='#fff'; //ctx.fillText('Last Press: '+lastPress,0,20); ctx.fillText('Score: '+score,0,10); if(pause){ ctx.textAlign='center'; if(gameover) ctx.fillText('GAME OVER',150,75); else ctx.fillText('PAUSE',150,75); ctx.textAlign='left'; } } document.addEventListener('keydown',function(evt){ lastPress=evt.keyCode; },false); function Rectangle(x,y,width,height){ this.x=(x==null)?0:x; this.y=(y==null)?0:y; this.width=(width==null)?0:width; this.height=(height==null)?this.width:height; this.intersects=function(rect){ if(rect!=null){ return(this.x<rect.x+rect.width&& this.x+this.width>rect.x&& this.y<rect.y+rect.height&& this.y+this.height>rect.y); } } this.fill=function(ctx){ if(ctx!=null){ ctx.fillRect(this.x,this.y,this.width,this.height); } } } window.requestAnimationFrame=(function(){ return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function(callback){window.setTimeout(callback,17);}; })(); De esta forma, concluimos con todos los conocimientos básicos para crear un juego. Bueno amigos ahora si ya tiene material para estudiar, como siempre les digo sigan buscando en la internet si les interesa el tema. Comenten punteen y dejen las dudas. Saludos Addiel

Hola amigos Taringueros, este es mi primer Post aca en taringa y quiero hacerlo sobre algo que vi hace unos dias en una pagina, sin mas espero que lo disfruten

Hola, buenos dias para todos los amigos y amigas de TARINGA, esta mañana les traigo un POST algo sencillo, pues revisando mi PC me encontre unas imagenes de ditintas formas de anudarnos los tenis para no todos los dias estar con el mismo estilo y he decidido compartirla con ustedes, espero que les sirva y si alguno le gusta pues se lo hagan. Un saludos para ustedes y que tengan una excelente semana Saludos Addiel