marouzumaki
Usuario (México)
Hola que tal Taringueros! Aquí su servidor pasando a dejar unos dibujos que he hecho. Espero les gusten. Mi galeria de devianART Gracias por su visita, se aceptan quejas y sugerencias
¡¡¡ Buenas !!! Aquí les dejo un ejemplo de una pagina que hice en un rato de ocio, en ella uso PHP, jQuery y CSS3 de manera simple para crear una pagina sencilla pero que con efectos que la hacen mas "dinámica" y no tan plana. Nota: Recomiendo que todo el código puesto aquí sea escrito a mano, y no copiado y pegado ya que mientras que se lee y escribe analizas la información y comprendes mejor como funciona. Bien, comencemos. Primero que nada les dire sobre que trabaje: Para escribir el código de la pagina, prácticamente todo, use "Programmer's Notepad", programa de licencia libre que permite editar archivos de casi cualquier tipo de lenguaje de programación, html, css, php incluidos, puede usarse para java y c++. Para visualizar la pagina utilice XAMPP, la versión mas resiente. Segundo, construí una base de datos pequeña la cual guarda en una tabla el nombre de un usuario, una contraseña y la fecha de registro. La base de datos la llame "prueba" y en ella cree la siguiente tabla como sigue: CREATE TABLE registro (NAME_USR VARCHAR(30) NOT NULL, PSSWRD VARCHAR(30) NOT NULL, REG_DATE DATE, PRIMARY KEY (NAME_USR) ); Contemple hacer altas, bajas y consultas desde la pagina. Para realizar las transacciones con la base de datos use PHP y formularios HTML. Pondré como ejemplo el código PHP de las altas a la base de datos que lleva por nombre "rep.php". <?php if($_POST['usr'] == '' or $_POST['pwd'] == '') {echo "Campos vacios."; } else { $host = "localhost"; $user = "root"; $pass = ""; $database = "prueba"; $limpio = "INSERT INTO registro(NAME_USR, PSSWRD, REG_DATE) VALUES ('".$_POST['usr']."','".$_POST['pwd']."','".date("Y-m-d"."');"; $m1 = new mysqli($host,$user,$pass,$database); if($sentencia1 = $m1->prepare($limpio)) {if(!$sentencia1->execute()) {echo "Ocurrio un error";} else {echo "Usuario añadido";} } } ?> El código HTML de la pagina, que lleva por nombre "main.html", queda asi: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> </head> <body> <div> <div> <form action="rep.php" method="post" autocomplete="on"> Usuario <input type="text" name="usr" autofocus><br/> Password <input type="password" name="pwd"><br/> <input type="submit" formtarget="contenedor"> </form> </div> <div> <iframe name="contenedor"> </iframe> </div> </div> </body> </html> Así funciona el código: Damos forma a un formulario, que tiene como objetivo el objeto con identificado "contenedor", esto lo hacemos con el atributo "target", en otras palabras, en el se cargara lo que haga la pagina en PHP. Mediante el metodo "post", del "form" en "main.html", mandamos a la pagina "rep.php" lo contenido en los campos de texto como variables cuando se ejecute la acción, en este caso es presionar el botón "Enviar". Estas variables son accesibles en PHP mediante $_POST[nombre de la variable]. En este caso lo mando como 'usr' y 'pwd' y hago referencia en PHP con los mismo nombres de esta manera $_POST['usr'] y $_POST['pwd']. La pagina en PHP carga las variables con las cuales va a trabajar el conector a la base de datos, en este caso mysqli. Dependiendo de como configuren su XAMPP es como deben iniciar estas variables. En la variable "$limpio" se guarda la consulta a ejecutar tomando en cuenta las variables "usr" y "pwd" como mencione antes, y obteniendo mediante la función "date" la fecha para incluirla en el INSERT por lo que se genera automáticamente y no es necesario que el usuario la escriba. Luego, mediante código orientado a objetos, se cargan las variables que realizan la conexión con la base de datos y preparan el código para ser ejecutado para finalmente ejecutarlo. Cuando se da enter o clic en el botón y se hace con los campo de texto vacíos la pagina desplegara un mensaje que advertirá esto, si se hace un registro con un id repetido o no se ejecuta mandara mensaje de error, y si se hace de manera correcta también lo hará notar. Este es el resultado: El formulario de la pagina de HTML es casi el mismo para consultas y bajas, por lo que solo pondré el código del "form" y el código en PHP también funciona de manera, pero para que puedan darle un análisis lo pondré completo. BAJAS HTML Archivo "baja.html" <form action="baja.php" method="post" autocomplete="on"> Usuario <input type="text" name="usr" autofocus> <input type="submit" value="Borrar" formtarget="contenedor"> </form> PHP Archivo "baja.php" <?php if($_POST['usr'] == '') {echo "Consulta vacia";} else { $host = "localhost"; $user = "root"; $pass = ""; $database = "prueba"; $p1 = "SELECT name_usr FROM registro WHERE registro.name_usr = '"; $p2 = "';"; $p3 = $p1.$_POST['usr'].$p2; $m2 = new mysqli($host,$user,$pass,$database); if($sentencia2 = $m2->prepare($p3)) {$sentencia2->execute(); $nombre = NULL; $sentencia2->bind_result($nombre); $i=0; while($sentencia2->fetch()) {echo "Usuario encontrado."; $i=1; } if($i==0) {echo "No se encontro el usuario.";} else {$limpio = "DELETE FROM registro WHERE name_usr='".$_POST['usr']."';"; $m1 = new mysqli($host,$user,$pass,$database); if($sentencia1 = $m1->prepare($limpio)) {if(!$sentencia1->execute()) {echo "Ocurrio un error";} else {echo "<br/>Usuario borrado.";} } } } } ?> Resultado CONSULTAS HTML Archivo "consulta.html" <form action="consulta.php" method="post" autocomplete="on"> Consulta ID <input type="text" name="usr" autofocus><br/> <input type="submit" value="Consultar" formtarget="contenedor"> </form> PHP Archivo "baja.php" <?php if($_POST['usr'] == '') {echo "Consulta vacia.";} else {$host = "localhost"; $user = "root"; $pass = ""; $database = "prueba"; $p1 = "SELECT name_usr FROM registro WHERE registro.name_usr = '"; $p2 = "';"; $limpio = $p1.$_POST['usr'].$p2; $m1 = new mysqli($host,$user,$pass,$database); if($sentencia2 = $m1->prepare($limpio)) {$sentencia2->execute(); $nombre = NULL; $sentencia2->bind_result($nombre); $i=0; while($sentencia2->fetch()) {echo "El usuario '".$nombre."' ya se encuentra registrado."; $i=1; } if($i==0) {echo "No se encontro el usuario.";} } } ?> Resultado CUERPO PRINCIPAL Bien, ya tenemos los módulos básicos, ahora crearemos nuestra pagina principal que las juntara a todas. Para esto investigue la forma de cargar alternativamente una pagina en un mismo espacio y llegue a este código. <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <link rel="stylesheet" href="estilo.css"> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> </head> <title> Prueba </title> <body> <div id="container"> <div id="header">Pagina de prueba </div> <div id="panel">Menú <div id="menu"><a href="consulta.html"> Consultas </a></div> <div id="menu"><a href="baja.html"> Bajas</a></div> <div id="menu"><a href="main.html"> Altas </a></div> </div> <div id="box"> Bienvenido al Sistema </div> </div> <script> jQuery().ready(function() { jQuery('#menu a').click(function(){ var pagina = jQuery(this).attr('href'); jQuery('#box').hide('fast', cargar); function cargar(){jQuery('#box').load(pagina,'',mostrar);} function mostrar(){jQuery('#box').show('normal');} return false; }); }); </script> </body> </html> Aquí es donde entra en juego jQuery. Vemos que en el head se hace referencia a un recurso externo, es la librería de jQuery. Es necesaria para escribir el código contenido en el script. El script funciona de la siguiente manera: al hacer clic en los enlaces (a) creados dentro de los objetos (por jerarquía) que tengan por identificador "menu" cargara en una variable "pagina", mediante la función "attr", lo que este contenido en el atributo "href", que es la url de las otras paginas. Después ocultara con el método "hide" todos los objetos que tengan por identificado "box", el atributo "fast" indica la velocidad de la acción, luego llamara a la función "cargar". Esta función usa el método "load" para que todos los objetos con identificador "box" carguen el archivo que tenga como nombre "pagina", la variable que contiene el url del enlace y por ultimo carga la función mostrar. Esta ultima función usa el método "show" para que los objetos "box", el atributo 'normal' se usa para darle velocidad. En resumen, a darle clic a cada enlace el script guarda la url a la que esta dirigido el enlace, oculta el area donde se va a mostrar, carga la pagina haciendo referencia a la url guardada y finalmente muestra la pagina ya cargada. Todo es se aplica con efectos de transición. Esta es otra forma de designar distintos objetos como destinos, una es el atributo "target" que se usa en los formularios de las otras paginas. La otra forma es mediante jQuery haciendo uso de "attr" para cargar la url del enlace y "load" para cargar la pagina del url que cargamos previamente. En el head se hace referencia a una hoja de estilos, sin esta hoja tendríamos una pagina totalmente plana, ademas de que contiene un efecto CSS3. El código de la pagina es: body {font-family:"Verdana";} iframe {border:0px} a:link {text-decoration:none;} a:visited {text-decoration:none; color:#FA5858;} a:active {color:#B40404; text-decoration:none;} a:hover {color:#FF8000; text-decoration:none;} #box {padding: 0 10px; background-color:#FF7700; } #inbox {height:250px; } #menu {text-align:center; width:100px; background-color:#FFAF00; float:right; transition:background-color 1s; } #menu:hover {background-color:#FFA000; } #header {background-color:#FFA500; font-size:100%; padding:20px 20px; text-align:center; } #panel {background-color:#FFD700; padding:10px 10px; } #content {background-color:#EEEEEE; float:left; width:500px; height:200px; } #footer {background-color:#FFA500; clear:both; text-align:center; } Este es el resultado Y así se ve cuando se da clic en una de las paginas. El efecto CSS3 esta definido en #menu mediante el atributo "transition" donde le indicamos los atributos que queremos que tengan una transición al cambiar de estado, en este caso en #menu:hover cambia el color de fondo, y con un numero seguido de una "s" le indicamos el tiempo de la transición. Estos efectos se pueden aplicar para muchos otros atributos. En el código original es un cambio de naranja a uno un poco mas oscuro, pero para que se pueda apreciar de manera mas notoria he cambiado el código a rojo para esta imagen Este "pequeño" ejemplo es una idea de lo que pueden hacer en conjunto PHP, jQuery y CSS3, usando lineas de código sencillas. Muchas gracias por su atencion, espero que les sirva y son bien recibidos sus quejas y comentarios. Hasta la próxima.
Segunda parte del tutorial: Sentencias Condicionales El if puede implementarse de tres formas: "If" Simple: dijo: if [condicion ]: acciones... break "If...else...": dijo: if [condicion ]: acciones... break else: acciones... break "If...elif...elif...else": dijo: if [condicion ]: acciones... break elif [condicion ]: acciones... break else: acciones... break Esta ultima es el equivalente del "switch...case" de Java o C. La instrucción "break" puede utilizarse para salir de la estructura de control en la que se encuentra anidada, como for o while. Ejemplo: En este ejemplo tambien podemos ver la sentencia "input" que es una función que nos permite capturar datos desde la terminal y regresa el dato capturado por lo que debemos guardándolo en una variable, también se le puede asignar un texto para mostrarlo antes de capturar datos. La sentencia "for" puede implementarse en listas y cadenas. for variable in [lista o cadena]: acciones... Ejemplo: En este ejemplo vemos las dos formas en que se puede implementar el for, con listas y con cadenas. El tercero es un ejemplo utilizando la función "range(m,n)" que nos permite generar una lista de números de m a n, que nos daría el equivalente de "for(i=0;i<10;1++)" de otros lenguajes. Otro punto importante es ver que la instrucción "print" genera espacios en lugar de salto de linea si añadimos una coma al final. También vemos que todo lo que esta dentro de una estructura se diferencia por los espacios al principio de la linea. Para indicar el fin de dicha estructura basta con quitar esos espacios en la siguiente instrucción. En otros lenguajes como Java se diferencia con corchetes. El while se implementa de manera similar a otros lenguajes de programación: Inicializamos una variable con un cero (0) y el while ejecutara lo que este dentro de su estructura hasta que no se cumpla la condición. Mucho cuidado ya que si ponemos una condición que nunca dejara de cumplirse caemos en un bucle infinito y ya se imaginaran que pasa Orientación a Objetos Hasta ahora solo he puesto ejemplos sencillos bajo el paradigma imperativo. Ahora veremos como se crean clases y objetos. En Python las clases se definen por la palabra "class" seguida del nombre y dos puntos, la definición de métodos se define por la palabra "def" seguida del nombre y entre paréntesis se agregan los atributos, siendo obligatorio escribir al menos el atributo "self", indicando que pertenece a la clase y hereda de la misma. dijo: class [nombre_clase]: def [nombre_metodo](self, atributos): acciones[...] Al igual que en otros lenguajes, podemos llamar a un constructor que inicialize variables o llame a métodos, sin embargo es opcional . Se indica el constructor mediante el método: dijo: def __init__(self): acciones[...] Pondré un ejemplo con la sucesión de Fibonacci. Esta sucesión genera un numero n a partir de la suma de los números n-1 y n-2, por lo que al principio debe contar con al menos dos números, generalmente (1, 1). Para esto haré una clase llamada "fibonacci" la cual tendrá un método llamado "generar" con el se generaran las sucesiones limitandolo con un atributo "d" que sera el numero de sucesiones que un usuario pida y guardara los números generados en una lista. En el método principal pedirá y validara que el numero de sucesiones que el usuario requiere sea mayor de 2. Una vez entrado un numero valido, se crea un objeto "nuevo" tipo "fibonacci" y llamara desde ese objeto al método "generar" y de atributo tendrá el numero de sucesiones que se le ha pedido al usuario. Vemos la declaración de la clase y la declaración y definición del método "generar" con atributos "self" y "d", indicando la jerarquia por los espacios al inicio de la linea. Este metodo crea una lista la cual se inicializa solo con dos elementos (1, 1), también inicializa una variable de control "n" igual a uno (1) que indica la posición en la lista, recordemos que las listas empiezan por cero (0). La instrucción "while True:" le indica a Python que mientras no se le indique salir del bucle seguirá repitiendo lo que este dentro de la jerarquía. Guarda en una variable "temp" la suma de los dos números inmediatos en la lista. Las listas tienen una función para añadir nuevos elementos llamada "append", añadimos la nueva sucesión mediante esta función de nuestra lista e incrementa en uno la variable de control "n". Luego compara si la variable de control "n" es igual a nuestra variable limite "d" pero menos uno para igualarlo al numero de elementos en nuestra lista contando el cero. Si lo anterior es cierto, imprime la sucesión completa y sale del bucle mediante la instrucción "break", de lo contrario hara todo una vez mas. El método "main()" se define igual que cualquier otra función, pero sin el "self" y sin los espacios antes para indicar que no pertenece a alguna clase. Inicializa una variable "d" igual a cero y muestra un texto "Sucesión de Fibonacci". Entra a un while cuya condición nos dice que si d es menor a 2 seguirá repitiendo todo dentro de la jerarquía. Guarda en "d", haciendo conversión a entero mediante la función "int()", lo que nos regrese la función "input" para que el "if" compare si "d" es mayor de 2. Si se cumple la condición entonces saldrá del while con el "break", de lo contrario mostrara un mensaje de error y ejecutara todo de nuevo. Resalta el hecho de que también podemos usar modificadores de texto en la instrucción "print" como "n" que es el salto de texto. Finalmente, cuando ha entrado un numero valido, crea un objeto "nuevo" tipo "fibonacci". Los paréntesis al final le indican que cree una nueva instancia para el objeto. Luego llama al método "generar" del objeto "nuevo" y le da como atributo la variable "d". Las ultimas lineas le indica n Python que si existe un método cuyo nombre contenga la palabra "main" ejecute el método "main()" Otro detalle de Python es que en Python 3 no necesitamos poner esta linea al inicio: dijo:# -*- coding: utf-8 -*- Ya que reconoce si tenemos caracteres Unicode. Pero Python 2 no, con esa linea le indicamos que hay caracteres especiales (como las vocales con acento). Me parece que en este ejemplo aplicamos todo lo visto en estos dos tutoriales. Hasta aquí este segundo tutorial. No se si haré un tercer tutorial para explicar otras cosas de Python, ya que quiero entrar a lo que es PyQt 4. Se aceptan quejas o sugerencias