nicolait
Usuario (Colombia)
Panel de administrador con rango o nivel admin Panel de cliente usuario con rango, privilegio normal Si hacen las cosas bien debera verse el login como en las fotos , recuerden pueden llegar a tener problemas de conexion con la base de datos dependen del programa que instalen si wamp server o xampp, lo que se es que me esmere por tener el codigo del login full lo que les destaco es que cuando den click en cerrar sesion cuando den click en la flecha atras del navegador nunca se volveran a la sesion es un login correcto. Este es un tutorial de como crear un login con php my mysql, de todos los codigos de login en internet ninguno hace enfasis en si sirve o no el sistema de cerrar sesion o logout, me refiero a que cuando uno da click en el enlace cerrar sesion y uno va y da click en el boton atras de la barra del navegador uno generalmente se regresa a la sesion, encontrar un codigo correcto de login que tenga la solucion es dificil, aqui les comparto el login que despues de dos años logre tenerlo, cualquiera que no sepa esto hace que se pare el desarrollo. Cuando esta en funcionamiento este login uno en la barra del navegador escribe el nombre de algun archivo php que este dentro del proyecto y no lo abre porque tiene que iniciar sesion. 1. van a crear un archivo index.php y pondran el formulario siguiente este archivo ira por fuera de toda carpeta es la cubierta principal cuando se abre una pagina web, los hosting reconoce ese archivo con el nombre index.php que es la primer pagina que saldra. <!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> </head> <body> <div id="formulariologin"> <form action="./php/login.php" method="post"> <span>Entrar</span> <br /> <br /> <label for="nombre">Usuario</label> <input type="text" name="nombre" /> <br /> <br /> <label for="clave">Clave</label> <br /> <input type="password" name="clave"/> <br /> <br /> <input type="submit" name="btnenviar" value="Enviar" /> </form> </div> </body> </html> 2. Crearan una carpeta llamada PHP aqui pondran el codigo del login y demas importante. este es el archivo cpadmin.php osea el archivo que sera el panel de administrador <?php include'../bd/conexion.php'; include ('../php/avatar.php'); ?> <!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> <link rel="stylesheet" href="../css/cpusuario.css" type="text/css" media="screen" title="no title" charset="utf-8"/> <script src="../js/windowlogin.js"> </script> </head> <body> <div id="box1"> <div class="triangulo"></div> <h2>Caja1</h2> <?php if(isset($_SESSION['username'])) { echo'<a href="../php/logout.php" id="optlogout">Cerrar Sesion</a>'; }else { header('Location: ../index.php'); } ?> </div> <header id="contenedorglobalheader" class="clearfix"> <div id="titlecpanel"> <h2>Administrador</h2> </div> <div id="contaccountbar"> <div id="cntnotificaciones"> <div id="cnticononotificacion"></div> </div> <div id="myaccount"> <?php Elusuario::avatar(); ?> </div> </div> </header> </body> </html> 3. van a crear este archivo cpusuario.php que sera el panel de usuario o cliente <?php include'../bd/conexion.php'; include ('../php/avatar.php'); ?> <!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> <link rel="stylesheet" href="../css/cpusuario.css" type="text/css" media="screen" title="no title" charset="utf-8"/> <script src="../js/windowlogin.js"> </script> </head> <body> <div id="box1"> <div class="triangulo"></div> <h2>Caja1</h2> <?php if(isset($_SESSION['username'])) { echo'<a href="../php/logout.php" id="optlogout">Cerrar Sesion</a>'; }else { header('Location: ../index.php'); } ?> </div> <header id="contenedorglobalheader" class="clearfix"> <div id="titlecpanel"> <h2>Cliente</h2> </div> <div id="contaccountbar"> <div id="cntnotificaciones"> <div id="cnticononotificacion"></div> </div> <div id="myaccount"> <?php Elusuario::avatar(); ?> </div> </div> </header> </body> </html> 4. este es el codigo principal del login, este codigo permite crear usuarios por nivel si administrador o paciente , cliente, eso lo especifican en la tabla mysql usuarios y en el condicional. el archivo se llamara login.php ira dentro de la carpeta php <?php include '../bd/conexion.php'; session_start(); if(isset($_POST['btnenviar'])) { $usuario = $_POST['nombre']; $clave = $_POST['clave']; $consulta = "SELECT id_usuario, nivel FROM usuarios WHERE nombre = '" . $_POST["nombre"] . "' AND clave = '" . $_POST["clave"] . "'"; $query = mysql_query($consulta); if(mysql_num_rows($query) > 0) { $arraylogin = mysql_fetch_object($query); $_SESSION['username'] = $arraylogin->id_usuario; if($arraylogin->nivel == "Admin" { header("Location: ../php/cpadmin.php "; } elseif($arraylogin->nivel == "cliente" ) { header("Location: ../php/cpusuario.php "; } } else { header("Location: ../index.php "; } } ?> 5. Dentro de la carpeta PHP crearan un archivo llamado logout.php y pondran el siguiente codigo <?php session_start(); session_destroy(); header ('Location: ../index.php'); ?> 6. crearan un archivo llamado avatar.php aqui el codigo llamara el nombre del usuario que acaba de iniciar sesion y cuando se da click en su nombre sale una ventanita como la de facebook que contendra la opcion cerrar sesion, aquel codigo que rodea el enlace cerrar sesion ese codigo debera ir en los paneles que creen de diferentes niveles de usuario en este caso pues el login tiene dos niveles de usuario administrador y cliente por lo tanto el codigo esta bien. <?php include '../bd/conexion.php'; session_start(); @$idusuario = $_SESSION['username']; class Elusuario { public static function avatar() { global $idusuario; $consultanombre = "SELECT nombre FROM usuarios WHERE id_usuario = '".$idusuario."'"; $query = mysql_query($consultanombre); $row = mysql_num_rows($query); if($row > 0 ) { while($array = mysql_fetch_object($query)) { echo '<a href="javascript:void(0)" onclick="mostrar();"; class="nameavatar">'; echo $array->nombre.'</a>'; } } } } ?> 7. crearan una carpeta llamada js para poner codigo solo javascript y luego creen un archivo llamado windowlogin.js lo meten ahi que contendra un codigo javascript de la ventana como la de facebook que contiene la opcion de cerrar sesion, este codigo es muy dificil de conseguir generalmente todo codigo tiene su nombre en ingles, en este caso este es un codigo que se oculta cuando se da click por fuera del document. MEjor dicho estan bendecidos con este post porque les hago un excelente aporte y aunque los codigos no son iguales los que permiten crear esa ventana y no hay necesidad de usar jquery nos permite salir rapido del problema. Adicionen el codigo al archivo llamado windowlogin.js function mostrar() { document.getElementById("box1".style.display="block"; } window.addEventListener('mouseup', function(event) { var box = document.getElementById('box1'); if(event.target != box && event.target.parentNode != box) { box.style.display = 'none'; } }); 8. crearan una carpeta llamada img para guardar ahi las imagenes les adjuntare una imagen de iconos ahi estara la imagen del triangulito aquel que se ve en la ventana donde esta la opcion de cerrar sesion en facebook , mercadolibre, 4shared y mas paginas. La imagen tiene este nombre sprite-iconos.png descarguenla y pongalan en la carpeta img. 9. crearan una carpeta llamada css y crearan un archivo llamado cpusuario.css y pegaran el siguiente codigo . *{ padding:0px; margin:0px; } #contenedorglobalheader { width:100%; min-height:55px; background-color: #F5F2EF; border-bottom: 1px solid #CCC; } #titlecpanel { float:left; margin:9px 0px 0px 30px; } #contaccountbar { width:169px; height:52px; background:none repeat scroll 0% 0% padding-box #FFF; border-style:solid; border-color:#ccc; border-width:0px 1px 1px; cursor:pointer; border-radius:0px 0px 4px 4px; position:absolute; right:330px; float:right; } #contaccountbar:after { display:block; visibility:hidden; height:0px; clear:both; content:"."; } #cntnotificaciones { border-right:1px solid #ccc; float:left; padding:17px 17px 18px 20px; position: relative; } #cnticononotificaciones { background:url("../img/sprite-iconos.png" no-repeat scroll 0% 0% transparent; display:block; width:24px; height:17px; } #myaccount:after { display:block; visibility:hidden; height:0px; clear:both; content:"."; } #myaccount { float:left; padding:15px 20px 17px; background-color:; box-sizing:border-box; position:absolute; right:0px; } .nameavatar { margin-top:3px; position:relative; text-decoration:none; } #box1{ position: absolute; top:63px; right:360px; width:300px; height:158px; background-color:#FFF; padding:20px; display:none; border:1px solid #ccc; border-radius:3px; } a{ text-decoration:none; } .triangulo { background-image:url("../img/sprite-iconos.png"; background-position:-169px -3px; width:20px; height:10px; position:absolute; top:-10px; right:30px; } } 10 . crearan una carpeta llamada bd y luego dentro de la carpeta y crearan un archivo llamado conexion.php y luego pegaran el siguiente codigo que es la conexion a la base de datos mysql <?php $localhost = "localhost"; $usuario = "root"; $clave = ""; $db ="logincorrecto"; $conexion = mysql_connect($localhost, $usuario, $clave); $db = mysql_select_db($db); if(!$conexion) { echo "Hay un problema con la conexion "; } if(!$db) { echo "Hay un error con la base de datos"; } ?> 11. van a instalar wampserver o xampp usen mejor si quieren wampserver que es el que uso, es un programa que hace el papel de servidor local ahi todos los sque desarrollan paginas web ahi prueban lo que programan, si son primiparos y no conocian el programa ya lo conocen y cuando hagan algo de paginas web todo lo probaran con alguno de los dos, en wamp server serciorense que el programa este en verde y en xampp que donde dice apache y mysql den click en start osea iniciar sino no correra tienen que dar click en start. Atencion las carpetas y los archivos que han creado deben estar metidos en la siguiente carpeta de acuerdo al programa que hallan instalado, si instalaron xampp la carpeta se llama htdocs ahi pondran todo el codigo que les comparto la carpeta esta dentro de donde quedo instalado xampp, si instalaron mas bien wampserver la carpeta se llama www ahi pondran entonces el codigo que les comparto. 12. ya instalado el progrma que escogieron entonces escribiran dentro del navegador en la barra www, escribiran lo siguiente. localhost/phpmyadmin Si no les sale esa cubierta revisen si el icono de wampserver esta en verde y si usan xampp que donde dice apache y mysql le hallan dado click en start sino es que el puerto de apache o mysql esta mal averiguen para ese entonces si tienen problemas como cambiar el puerto de apache. otra cosa importante es que ahora en el archivo de conexion en xampp las funciones de php como mysql_connect o mysql_select_db exigen ponerle la i osea quedaria asi mysqli_select_db o mysqli_connect son las nuevas funciones para conectar con la bd es algo que deberan teenr en cuenta despues. cuando les salga la cubierta escribiran como usuario root y la clave no ponen nada ingresan y luego debera salirles esto. Ahi les señalo con rojo donde deben dar click dan click en la consola sql ahi pegaran el siguiente codigo para crear las tablas mysql pero ojo primero den click en la base de datos que hallan creado y luego si dentro de ella en la consola pegaran el codigo para crear la tabla usuarios. CREATE TABLE `usuarios` ( `id_usuario` int(11) NOT NULL AUTO_INCREMENT, `nombre` varchar(255) DEFAULT NULL, `apellido` varchar(255) DEFAULT NULL, `correo` varchar(255) NOT NULL, `sexo` varchar(255) DEFAULT NULL, `clave` varchar(255) DEFAULT NULL, `nivel` varchar(255) NOT NULL, PRIMARY KEY (`id_usuario`) ) ENGINE=InnoDB AUTO_INCREMENT=3 DEFAULT CHARSET=latin1 Yo generalmente uso un comando que es show create table nombretabla y con eso me genera la estructura de la tabla que ya tengo creada para compartirlo y que los demas lo peguen y creen la tabla por consola. El otro comando es describe nombretabla pero es mejor el primero. OJO Despues de haber creado la tabla dan click en ella y luego se van donde dice insertar creen dos usuarios con el siguiente nivel primero Admin asi con letra inicial en mayuscula porque si la dejan en minuscula no les servira a menos que busquen en el codigo del login en el condicional y lo adecuen a como necesitan. El segund nivel es cliente para un segundo usuario y prueben el login.
Calendario con paginacion de mes Este es un calendario que pagina el mes y su año es infinito, encontrar el codigo de un calendario paginado funcional es siempre dificil pues aqui les entrego uno correcto, cuando miren el codigo para quienes no conocian el operador ternario , busquen sobre el operador ternario que hace parte del codigo del calenadario, es similar o igual al condicional if despues de que lo comprendan veran mas facil la comprencion del calendario. Otra cosa tan importante que deben aprender es sobre el paso de variables por url es fundamental y la mayoria de portales dinamicos usan esa tecnica, escuchen consejos. Compartire el codigo de agregar amigos al estilo facebook que se trata de jugar con los id de los usuarios, busquen en mis post de taringa, es un milagro tener ese codigo asi que usenlo estudienlo ya uno practicando llegara lejos aprendera mas rapido despegara en PHP por eso es vital compartir la info. Es un buen ejercicio que junto con el codigo de agregar amigos lo ponen a uno a volar con PHP y MSYQL. Ya saben para los primiparos en desarrollo web siempre se usa o xampp o wampserver yo uso wampserver para probar mis proyectos web. <?php $ano = isset($_GET['ano']) ? $_GET['ano'] : date("Y",time());//recibe parametros de ao $mes = isset($_GET['mes']) ? $_GET['mes'] : date("n",time());//recibe parametros de mes $meses = array(//define nombres de los meses 1=>"Enero", 2=>"Febrero", 3=>"Marzo", 4=>"Abril", 5=>"Mayo", 6=>"Junio", 7=>"Julio", 8=>"Agosto", 9=>"Septiembre", 10=>"Octubre", 11=>"Noviembre", 12=>"Diciembre" ); $dias = array(//define las iniciales de los dias "D", "L", "M", "M", "J", "V", "S" ); $dias_x_mes = cal_days_in_month(CAL_GREGORIAN, $mes, $ano);//obtener el numero de dias del mes $inicio_mes_dia = jddayofweek (cal_to_jd(CAL_GREGORIAN, $mes, 1, $ano));//obtener el dia que inicia el mes //se definen los parametros para navegar en los meses anterior y siguiente $ant['mes'] = ($mes == 1) ? 12 : ($mes-1); $ant['ano'] = ($mes == 1) ? ($ano-1) : $ano; $sig['mes'] = ($mes == 12) ? 1 : ($mes+1); $sig['ano'] = ($mes == 12) ? ($ano+1) : $ano; ?> <html> <head> <title>Calendario</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <style> body{ font-family:Helvetica, Arial, Verdana, Sans-serif; font-size:12px; } .titulocal{ width:210px; text-align:center; colorimGray; padding:5px 0px 5px 0px; } .titulocal a{ text-decoration:none; color: DimGray; } .tablacal{ width:210px; padding:0; border-collapse: collapse; border:1px solid LightGrey; font-size:12px; } .tablacal th{ width:30px; background-color:LightGrey; border-collapse: collapse; } .tablacal td{ color:Black; text-align:center; } </style> </head> <body> <div class='titulocal'><!--navegacion anterior y siguiente --> <a href='<?php echo $_SERVER['PHP_SELF'] ?>?ano=<?php echo $ant['ano'] ?>&mes=<?php echo $ant['mes'] ?>' id='anterior'><</a> <?php echo $meses[$mes]." ".$ano?> <a href='<?php echo $_SERVER['PHP_SELF'] ?>?ano=<?php echo $sig['ano'] ?>&mes=<?php echo $sig['mes'] ?>' id='siguiente'>></a> </div> <table class='tablacal'><!--inicio de la tabla del calendario--> <tr> <?php for ($dias_semana=0; $dias_semana<count($dias); $dias_semana++){//encabezados con los nombres de los dias echo "<th class='nombredias'>". $dias[$dias_semana]."</th> "; } ?> <tr> <?php for($dia_mes=1; $dia_mes<=$dias_x_mes; $dia_mes++){ if(jddayofweek (cal_to_jd(CAL_GREGORIAN, $mes, $dia_mes, $ano)) == 0 || $dia_mes == 1){ ?> <tr> <?php } if($dia_mes == 1){ for($dias_antes=0; $dias_antes<$inicio_mes_dia; $dias_antes++){//espacios en blanco que son los dias finales del mes anterior ?> <td class='dia'> </td> <?php } } $dia = ($dia_mes<10) ? "0".$dia_mes : $dia_mes; $mesactual = ($mes<10) ? "0".$mes : $mes; //se muestran cada uno de los dias ?> <td class='dia'><?php echo $dia_mes ?></td> <?php if($dia_mes == $dias_x_mes){ $dias_fin = 6 - jddayofweek (cal_to_jd(CAL_GREGORIAN, $mes, $dias_x_mes, $ano)); for($dias_despues=0; $dias_despues<$dias_fin; $dias_despues++){//espacios en blanco que son los primeros dias del mes siguiente ?> <td class='dia'> </td> <?php } } if(jddayofweek (cal_to_jd(CAL_GREGORIAN, $mes, $dia_mes, $ano)) == 6 || $dia_mes==$dias_x_mes){//fin del renglon al final de la semana o del mes ?> </tr> <?php } } ?> </table><!--fin de la tabla del calendario--> <body> </html>
Sistema de paginacion PHP - MYSQL Este es un sistema para paginar la informacion de la base de datos asi como los resultados de google, cuando entras a una tienda online para seguir viendo los resultados tienes que cambiar de pagina dando click en siguiente. Este sistema es muy dificil de hacer, dure como 20 dias tratando de hacerlo correr, quien este viendo este post esta privilegiado de tener el codigo funcional correctamente. Por favor revisen mis otros post de taringa que tengo mas codigos importantes dificiles de conseguir y de hacer. /**************************************/ /**** OBSERVACION *******/ Para los primiparos que no saben nada de desarrollo web, siempre se usan alguno de estos dos programas wampserver o xampp que son servidores locales son programas que actuan como un servidor y nos permiten probar nuestros proyectos web, yo uso wampserver asi que wamp server en la carpeta de instalacion del programa hay una carpeta llamada www ahi colocaran siempre el codigo ahi es donde pegaran este codigo en la carpeta que creen, luego se van al navegador y escriben localhost/nombrecarpeta/nombrearchivo.php wampserver trae instalado phpmyadmin que permite gestionar la base de datos mysql igualmente xampp, en xampp la carpeta se llama htdocs ahi pegaran el proyecto esa carpeta esta en el directorio del programa cuando lo instalas. en wampserver revisas el icono que este en verde ahi en la barra de windows donde esta el reloj sino esta en verde tienes que cambiar el puerto seguro generara conflicto averiguas como cambiar el puerto de apache. En xampp dan click en iniciar osea en start donde dice apache dan click en start y luego en mysql igualmente start. 1. crearan un archivo llamado index.php y pegaran el siguiente codigo que es el sistema de paginacion. <?php //conexion a la base de datos $host="localhost"; $user="root"; $pass=""; $db="paginacion"; $tabla="clientes"; //conectamos con la base de datos $con=mysql_connect($host,$user,$pass); mysql_select_db($db,$con); //establecemos condiciones de paginacion $registros = 6; @$pagina = $_GET ['pagina']; if (!isset($pagina)) { $pagina = 1; $inicio = 0; } else { $inicio = ($pagina-1) * $registros; } //realizamos la busqueda en la base de datos $pegar = "SELECT * FROM $tabla ORDER BY id ASC LIMIT ".$inicio." , ".$registros." "; $cad = mysql_query($pegar,$con) or die ( 'error al listar, $pegar' .mysql_errno()); //calculamos las paginas a mostrar $contar = "SELECT * FROM $tabla"; $contarok = mysql_query($contar,$con); $total_registros = mysql_num_rows($contarok); $total_paginas = ($total_registros / $registros); //imprimiendo los resultados echo '<table align="center">'; echo '<tr><th width="100 align="center">ID</th>'; echo '<th width="200" align="center">NOMBRE</th>'; echo '<th width="200" align="center">DIRECCION</th>'; echo '<th width="200" align="center">TELEFONO</th>'; echo '<th width="200" align="center">EDAD</th> </tr>'; while ($array = mysql_fetch_array($cad)) { echo '<tr>'; echo '<td width="100" align="center">'.$array['id']. '</td>'; echo '<td width="200" align="center">'.$array['nombre']. '</td>'; echo '<td <width="200" align="center">'.$array['direccion']. '</td>'; echo '<td width="200" align="center">'.$array['telefono']. '</td>'; echo '<td width="200" align="center">'.$array['edad']. '</td>'; echo '</tr>'; } /* ==============================================*/ //creando los enlaces de paginacion de resultados echo "<center><p>"; if($total_registros>$registros){ if(($pagina - 1) > 0) { echo "<span class='pactiva'><a href='?pagina=".($pagina-1)."'>« Anterior</a></span> "; } // Numero de paginas a mostrar $num_paginas=10; //limitando las paginas mostradas $pagina_intervalo=ceil($num_paginas/2)-1; // Calculamos desde que numero de pagina se mostrara $pagina_desde=$pagina-$pagina_intervalo; $pagina_hasta=$pagina+$pagina_intervalo; // Verificar que pagina_desde sea negativo if($pagina_desde<1){ // le sumamos la cantidad sobrante para mantener el numero de enlaces mostrados $pagina_hasta-=($pagina_desde-1); $pagina_desde=1; } // Verificar que pagina_hasta no sea mayor que paginas_totales if($pagina_hasta>$total_paginas){ $pagina_desde-=($pagina_hasta-$total_paginas); $pagina_hasta=$total_paginas; if($pagina_desde<1){ $pagina_desde=1; } } for ($i=$pagina_desde; $i<=$pagina_hasta; $i++){ if ($pagina == $i){ echo "<span class='pnumero'>".$pagina."</span> "; }else{ echo "<span class='pactiva'><a href='?pagina=$i'>$i</a></span> "; } } if(($pagina + 1)<=$total_paginas) { echo " <span class='pactiva'><a href='?pagina=".($pagina+1)."'>Siguiente »</a></span>"; } } echo "</p></center>"; ?> 2 . crearan la base de datos llamada paginacion y luego crearan una tabla llamada clientes en mysql, en la consola de phpmyadmin pegan el siguiente codigo y se creara la tabla. Cuando creen alguna tabla en mysql usen este comando que les permitira ver como esta hecha una tabla y ver sus llames foraneas o primary key para ver los nombres de las restricciones y poder borrarlas cuando quieran. El comando es : show create table nombredelatabla CREATE TABLE `clientes` ( `id` int(40) NOT NULL AUTO_INCREMENT, `nombre` varchar(40) DEFAULT NULL, `direccion` varchar(40) DEFAULT NULL, `telefono` int(40) DEFAULT NULL, `edad` int(40) DEFAULT NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB AUTO_INCREMENT=13 DEFAULT CHARSET=latin1 IMPORTANTE Deben ir en phpmyadmin a la opcion insertar vallan inserten datos si tienen filas llenas mayor a 6 no creo que les genere problema porque si la tienen vacia si, es de acuerdo a los limites de configuracion que le metan al codigo para mostrar los resultados.
Como hacer un menu drop down con HTML y CSS3 Este es un tutorial de como crear una menu en HTML Y CSS3 , aquellos tipicos menus que tiene una pagina web, hago profundizacion de el truco que permite crear el menu, esta parte del estilo css3 permite crear ese menu. .nav li:hover ul { visibility:visible; } .nav li:hover { background-color:maroon; } El codigo es pequeño lo hice asi para que les quede mas facil comprenderlo si miran videos en youtube se enredaran facil, quien llegue a este post estara privilegiado porque la tendran mas facil. 1. crearan un archivo con extension .php llamado menu.php y luego pegaran el codigo html <!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> <link rel="stylesheet" href="../css/menu.css" type="text/css" media="screen" title="no title" charset="utf-8"/> </head> <body> <div class="nav"> <ul> <li> <a href="">fotos</a> <ul> <li><a href="">item1</a></li> <li><a href="">item2</a></li> <li><a href="">item3</a></li> </ul> </li> </ul> </div> </body> </html> 2. Crearan una carpeta llamada css y luego dentro de la carpeta crearan un archivo con extension .css y lo llamaran menu.css y luego pegaran el estilo css. .nav ul { list-style-type:none; margin:0px; padding:0px; } .nav li { width:100px; height:30px; background-color:#FF6F01; text-align:center; border-right:1px slid white; position:relative; line-height:30px; } .nav li ul li { /*float:none;*/ width:150px; text-align:left; padding-left:5px; border:1px solid white; } .nav a { text-decoration:none; color:white; } .nav li ul { position:absolute; top:30px; left:0px; visibility:hidden; } .nav li:hover ul { visibility:visible; } .nav li:hover { background-color:maroon; }
EL Respeto: " Historia Real" "Por que respetar, cuidar nuestra imagen, reputacion" La importancia de la lectura y el respeto Si estas leyendo mi post deberias quedarte un rato y leerlo todo, yo le aconsejo que lo hagas, esto podra salvarte la vida despues. Generalmente para nosotros aprender o aprender la leccion tenemos que tropezarnos y para cuando suceda un tropiezo ya es tarde y sucedera en este caso que por no respetar dañamos nuestra imagen nuestra reputacion y lo peor es que no podremos salir tranquilos por las calles porque seremos un blanco por muchas personas, seremos un paredon donde solo nos caeran criticas, rechazo, burla etc... Creo que estoy escribiendo este post en buen momento ahora que esta finalizando el mundial 2014 cuando ya acabo de ver terminar el partido entre Holanda y Argentina viendo como finalista a Argentina. Quiero destacar el ejemplo del arbitro que dirigió el partido de Colombia vs Brasil en la cual la FIFA con el arbitro y Brasil entre todos se robaron el partido de Colombia era para que Colombia hubiera jugado contra Alemania, la reputacion de el arbitro quedo mal porque se robo el partido no jugo bien jugo mal el prefirio jugar sucio queriendo quizas dirigir la final pero miren la situacion el quedo mal. "No roben, no falten al respeto, cuiden su imagen su reputacion no sean deshonestos por dinero." Lo que mas quiero hacer énfasis es en por que leer tomar el habito de la lectura y mezclarlo con el respeto y cuidar nuestra imagen nuestra reputacion. En esta historia si eres papá y si piensas serlo le recomiendo que preste mucha atención: HISTORIA Aquel hombre no tuvo la culpa por la genetica que le fue asignada, su fisico no perfecto no siendo bonito a pezar de ello cometio unos errores, durante su tiempo libre tomo el habito de ver cine descuidando la lectura, su madre en muchos casos le aconsejaba que leyera pero siempre aquel hombre le daba pereza leer. Mientras aquel hombre crecia e iba a estudidar resulta que su rendimiento no fue muy bueno, cuando le llego la hora de enfrentar las matematicas tuvo lios debido a diferentes factores los principales no aprovecho el tiempo libre haciendo cosas buenas, sus padres no sabian explicar matematicas y cuando intentaban hacerlo a la final explicaban a gritos y con desespero tomaron la correa y le pegaron en diferentes ocaciones a ver si pegandole aprendia, lo que hicieron fue ayudarle a generar temor a la matemática. Algo que le sucedio en diferentes ocaciones es que cuando les dejaban tareas muchas de ellas era realizar una cartelera pero este hombre no tenia letra bonita paso que la mamá le hizo siempre las carteleras que ella si tenia letra bonita y sabia realizar las margenes. Otro dia le dejaron la misma tarea al hombre, la mamá se canso de hacerle siempre las carteleras por lo cual lo obligo a hacerla para que fuera su primera cartelera esta vez lo obligo casi a punta de pegarles reglasos. Todos en el salon creian que las carteleras que habia llevado antes eran hechas por aquel hombre, siempre eran bonitas, pero nunca las hizo el, esta vez que hizo su primera cartelera todos se burlaron de el porque esta vez presento una cartelera fea y era la de el. Quiero hacer el énfasis a la burla, cuando no respetamos a los demas no podemos a la final nosotros esperar respeto. Aquel hombre cuando fue creciendo su cuerpo se fue desarrollando y cuando entro por primera vez al colegio empeso a sufrir por su fisico su genetica que le fue asignada sin tener culpa, la pena mezclada con tristeza, rabia y el no haber aprovechado sus tiempos libres leyendo , destacando que aquel hombre no era un EINSTEIN que no tenia una super memoria fotografica y que olvidaba con facilidad cosas hizo que cometiera ciertos errores, se descuido en muchas de sus clases no prestaba atencion, tenia deficit de concentracion, se perjudico en muchas ocaciones. Este hombre vivia en un sector en el que no habian personas con las cuales pudiera salir a jugar futbol o simplemente no le gustaba este deporte, al ver cine de accion desarrollo un gusto por las artes marciales, empezo a practicar este deporte cuando en el colegio compañeros empezaron a faltarle el respeto porque debido a su deficit de concentracion, la tristeza y pena que sentia de su fisico y pasar al lado de mujeres que quizas le gustaban. Compañeros lo criticaban se burlaban de el y le faltaron al respeto muchas veces delante de el gritandole tonto etc... Este hombre cuando intentaba jugar futbol lo metian en equipos pero cuando sus compañeros jugaban con el no le pasaban la pelota porque la creencia de ellos es que no sabia y que podria hacer perder su equipo. El sufriendo el egoismo de sus compañeros la falta de respeto hacia el, hizo que se ahislara, el verse al espejo y sentirse feo en especial en una edad donde salen espinillas o granos hizo que iniciara en el un sufrimiento un problema de autoestima. Empezo a desear la muerte. La mayoria de personas no respetan, uno de sus compañeros le falto al respeto en una ocacion de frente diciendole tonto , eso es lo que es usted, el hombre intento defenderse pero esta persona que ofendio sabia pelear le pego un puño al hombre ofendido, dicho hombre desde esta experiencia amarga empeso a tomar clases de artes marciales. Los problemas que empeso a sufrir fueron debido a que era feo, cuando leia se le olvida todo facil o no tenia mucha memoria para almacenar tanta informacion en su cabeza que le ayudara a tener un buen coheficiente intelectual, tuvo muchas malas experiencias en su epoca de estudio en el colegio , su vida empezo a ser toda una pesadilla porque todo el mundo empezo a faltarle al respeto, en una ocacion una mujer en el salon que se creia muy bonita de frente empezo a señalar los compañeros de ella que eran bonitos y feos elijiendo de frente de estas personas sin importarle respetar, cometio una imprudencia tremenda. A este hombre le dañaron su imagen su reputacion porque todo el mundo empezo a hablar de el diciendo que era un tonto. Haciendo una análisis respecto a la situacion que vivio el hombre destaco que la mayoria de sus situaciones pudieron haberse evitado si ante todo en su pais hubieran traido la tecnologia que permite descubrir en un niño dentro del vientre de la madre que profesion es para la cual estara preparado el niño y no entrar a estudiar cosas que no debe, a los niños desde muy pequeños se les debe ayudar a descubrir cuales son sus talentos para que estan preparados cual es la carrera que deben tomar, no descubrir que deberia estudiar cuando esten viejos y terminen un bachillerato sino que desde niños descubrirles su talento. Se que existen tecnologias para esto. Segun en la Biblia Jesus dijo que no debiamos tratar de tonto o de idiota a un hermano y que aquel que lo haga merece una condena ser juzgado , aunque no lo crean es cierto. Cuando tratamos de tonto a alguien cuando hablamos mal de alguien contribuimos a dañar su imagen, muchas veces voluntariamente nos arruinamos o por ingenuos porque no conocemos historias que podremos prevenir. Aconsejo leer el libro "EL SECRETO", se trata de la ley de la atraccion, en el libro por ejemplo hablan que nosotros vinimos a este mundo no a hacer que el mundo sea como nosotros queramos sino a elegir el mundo que queremos para nosotros, nosotros decidimos nuestro destino, en el caso de este hombre cometio ciertos actos que quizas fueron tontadas para alguien pero no se justifica que deban tratar mal a una persona, si bien lo ideal es que desde niños seamos advertidos de posibles situaciones que podriamos vivir, descubrir nuestros talentos a tiempo y no esperar para despues mientras se estudia en tiempos libres deberiamos es dedicarnos a aprender algun arte. De los padres depende que sus hijos no tomen el camino equivocado por eso es importante que no dejen que los hijos se interesen tanto por ver TV no obligando ni cohibiendo sino mas bien aconsejando y desde muy temprano llevarlos por el camino ideal no haciendole todo a los hijos sino enseñandoles habitos. Si no te pones las pilas a leer a aprender podrias ganarte la reputacion de tonto podrias ganarte muchos problemas que haria que no pudieras salir tranquilo por las calles, un consejo muy importante no te obsesiones por el sexo ni por una mujer, manten la mente limpia y nunca mires a una mujer como objeto sexual, deja que ella elija cuando tener sexo, si llegado el caso aparentemente eres feo y quizas estas hasta en un punto en el que creas que nunca tendras novia realmente solo dedicate a hacer el bien a leer y aprender algun arte, la vida social. No esperes a que llegue el punto en que no puedas salir tranquilo a la calle y seas un blanco, saben algo ? una de las mejores armas es la " PREVENCION ", deben primero ver cuales son las cosas malas que les sucedera sino hacen esto. Quiero destacar otro factor que causa muchos problemas frecuentemente y es el " CHISME" , cuando alguien se convierte en un chismoso esta en riesgo de dañar su imagen su reputacion y de luego ganarse un problema gravisimo que podria causarle la muerte o problemas serios si aun mas vas por cualquier lado comentando la vida privada de alguien. Por favor, reacciona ahora que estas a tiempo no olvides este post, si eres ateo o si crees en Jesus el salvador, aunque quizas no leas la Biblia sepan algo, muchos creen que seguir el camino de Dios es predicar y no es asi, cuando Dios llama a alguien para que predique es porque tiene que hacerlo y no todo el mundo que por que cualquiere le diga hagalo. Asi no es, se trata de que hay unos mandamientos los de Moises y los de Jesus, en la biblia la reinva valera esta en rojo lo que Jesus dijo y en la biblia latinoamericana que es la mejor podras comprender los mensajes mucho mejor. El secreto de lavida se basa en leer, respetar, cuidar la reputacion, imagen personal y no tomar malos habitos, solo aprenda las leyes y respeta. SI hay en la tierra un lugar para el castigo es 100% seguro que despues de la muerte lo habra sea que quedes bagando por mundo o que vallas al infierno o al purgatorio que es oscuro donde sentiras las llamas mas fuertes que las de la tierra. HOMBRE, reacciona evita todo tipo de problema, conviertase en una persona fuera del radar humano, anda libre por las calles sin generar chismes, saben que si le piden que guarde un secreto y si lo comentas asi sea a la persona con quien mas confias tarde o temprano esta persona te traisionara, despues de que compartas un secreto ya deja de serlo y es seguro que se ganara un problema serio por hacerlo. Les reitero la mejor arma es la prevencion, no se vallan donde hay grupos de personas hablando de la vida de los demas, vallanse si les comentan la vida de los demas, intenta irte sino pudes escucha pero no llegues a hablar de aquello que te contaron. Despues pueden señalarte de alguna imprudencia que comentas. Dos casos mas importantes. No hace mucho , a otro hombre en la universidad , se le ocurrio la idea de publicar en twitter un mensaje, se burlo de unos niños que murieron quemados en un bus, muchos querian matarlo en la universidad que porque dejo en mal la imagen del departamento o de la ciudad, querian quemarle la casa, el escuadron ESMAD de la policia le toco ir por el muchacho para preservar su vida pues es la obligacion de este grupo policial, les toco disfrazar de policia al muchacho y sacarlo de la ciudad quizas le toco irse del pais. Pidio disculpas e imagino que aprendio la leccion. No andes publicando cosas que no debes y malucas en redes sociales o etc.., no des de que hablar, que solo hablen bien de usted. El caso de aquellos que quieren ser crackers o hackers , muchos motivados por ello publican en sus perfiles de facebook fotos alusivas al tema, se empiezan a convertir en un blanco, entrar a una cuenta ajena para tarde o temprano ser atrapado puede causarle una larga estadia en la carcel donde no hay comodidad donde hay hacinamiento, creo que es mejor que investiguen como es la estadia en las carceles antes de hacer cualquier estrago hackeando. No hables y digas que eres un hacker aunque te creas y no lo seas, mejor no te metas en eso ni en la brujeria mantegase alejado de todo lo que le pueda causar problemas, comportate bien y se muy prevenido. Dedicate a un muy buen arte a producir negocios en internet o algun arte que sea bueno para usted con el cual no generes problema la lectura podra ayudarte eso si no mantegas leyendo novelitas sino cosas productivas y reales. Recuerda: " Si lo haces una vez lo haras muchas veces mas, asi que si mientes o robas lo haras por siempre, evita al maximo problemas". Si robas y te pillan se dañara tu imagen en un 100% sucedera que no podras salir tranquilo a la calle despues, o si haces actos deshonestos como al realizar un contrato y como arrendador poner un valor que no es en el costo de la multa o pretender exigir que alguien se valla pagando multa ya en su mes de terminar estadia, si te pones de rata o hacer cosas malas eso se le devolvera todo lo malo que hagas. NO TE ECHES LA SAL. Es todo amigos, prevengan, lean, respeten, cuiden la imagen la reputacion, descubran sus talentos a tiempo desde niños y aprovechen el tiempo libre, el internet es la mejor biblioteca y callen, no comenten sus vidas privadas ni la de los demas. Aqui les dejo una lista de acciones que deben hacer para que lo impriman y lo compartan. 1.Ame su vida y su trabajo para contagiar positivamente a los demás. 2.Busque las mejores formas de agradar a otros. 3.No robar, engañar a los demás siempre andar con la verdad lo más posible. 4.Cumplir los contratos o pactos legales y correctos. 5.Ser detallista. 6.Conserve siempre un buen estado de ánimo. 7.De a toda persona importancia y reconocimiento. 8. Escuche siempre con atención y simpatía. 9.Frene los impulsos de hablar sin pensar. 10.Goce con el éxito ajeno y reconózcalo. 11.Huya del chisme, la crítica destructiva y el rumor falso. 12.Irradie buena salud, comprensión y entusiasmo. 13.Jamás odie a nadie ni muestre deseos de venganza. 14.Llame a toda persona por su nombre y de forma amable. 15.Mantenga siempre un gran deseo de colaborar. 16.No haga esperar a nadie, sea cumplido y puntual. 17.Oculte sus penas y problemas personales solo en su corazón. 18.Procure ser siempre amable y sonreír a todo el mundo. 19.Quédese callado cuando se trate de algo íntimo de otros. 20.Respete profundamente la dignidad de todo ser humano. 21.Salude con enorme entusiasmo y cariño a todo el mundo. 22.Tome con seriedad sus responsabilidades y obligaciones. 23.Utilice el agradecimiento como prueba de amistad y cariño. 24.Valore el trabajo ajeno y reconozca las acciones es equipo. 25.Zalamería y adulación no son propias de personas serias. AME A DIOS CON TODO TU CORAZON Y AL PROJMO BRINDALE AMOR – APRECIO Y CARIÑO Y SERAS BENDECIDO POR SIEMPRE.
Como saber si una celda en mysql esta vacia con PHP Este codigo ofrece la misma accion que usa facebook en nuestro perfil indicandonos que datos hemos ingresado si ya tenemos el dato nos lo muestra sino nos genera un enlace que al precionar nos genera una ventana al estilo de la misma ventana de facebook que tiene la opcion de cerrar sesion, solo que ahora en el 2014 le cambiaron el diseñado y en vez de crear una sola ventana para editar varias datos por seccion ya se genera una ventanita independiente para editar un correspondiente dato. Noten un ejemplo en fotos. Ahora veran las fotos de mi ejercicio que genera la misma accion solo que el diseño es algo diferente pero vale huevo porque ya tienen lo importante. Aqui pueden ver como creo la ventana que tiene facebook donde esta la opcion de cerrar sesion solo que no se desaparece cuando se da click por fuera porque asi tambien la tenia facebook, ahora en el 2014 le cambiaron el diseño como en las primeras fotos de este post, si quieren tenera esta misma ventana que hice yo pero que se desaparezca cuando den click por fuera de ella miren mis otros post que ahi tengo dos post interesantes una de un login usando esa ventana y otra donde esta solo la preparacion de esa ventana. 1. creen una base de datos con el nombre que quierea y luego creen esta tabla pegando en la consola mysql el siguiente codigo. Miembros CREATE TABLE `Miembros` ( `id_miembro` int (10) NO AUTO_INCREMENT NULL, `Nombre` varchar (255) NOT NULL, PRIMARY KEY (`id_miembro`) ) ENGINE = InnoDB AUTO_INCREMENT = 3 DEFAULT CHARSET = latin1 2. crearan el siguiente archivo llamado consultavacia.php y pegan este codigo. <?php mysql_connect("localhost","root",""; mysql_select_db("consultavacia"; $query=mysql_query("SELECT * FROM miembros "; $row = mysql_fetch_object($query); @$nom = $_POST['nom']; if(!empty($nom )) { $query=mysql_query("INSERT INTO miembros(nombre) VALUE('".$nom."') "; } if(empty($row->nombre )) { ?> <!DOCTYPE HTML> <html lang='en-US'> <head> <meta charset='UTF-8'> <title></title> <link rel='stylesheet' href='estilo.css'/> <script type='text/javascript' src='codigoventana.js'></script> </head> <body> <a href='javascript:void(0);' onclick='mostrar(globalventana)' >Añade un nombre</a> <div id='globalventana'> <div class='flecha'></div> <div id="contform"> <form method="post" action="<?php $_SERVER['PHP_SELF'] ?>"> <br /> <label for="nombre">Ingresa un nombre</label> <input type="text" name="nom" id="nombre"/> <br /> <input type="submit" value="Enviar" /> </form> </div> </div> <a href="consultavacia.php">Ver usuarios</a> </body> </html> <?php } else { echo $row->nombre. "<a href='?delete=".$row->id_miembro."'>Borrar</a>"; @$delete = $_GET['delete']; if($delete) { $query=mysql_query("DELETE FROM miembros WHERE id_miembro = ".$delete." "; } } ?> 3. como ya sabran todo desarrollador web usa un servidor local para practicar yo uso wampserver instalen el programa y en la carpeta www que esta dentro de la carpeta del programa donde se instalo. Pegan ahi los archivos, ahora lo que tienen que hacer es crear una carpeta llamada imagenes y luego descargan esta imagen y la pegan ahi. 4. crearan un archivo llamado codigoventana.js y pegaran el siguiente codigo function mostrar (laventana) { //document.getElementById('laventana').style.display = 'block'; var elElemento=document.getElementById('globalventana'); if(elElemento.style.display == 'block') { elElemento.style.display = 'none'; } else { elElemento.style.display = 'block'; } } 5. Crearan un archivo llamado estilo.css y pegaran el siguiente codigo. body { background-color:beige; } #globalventana { width:202px; height:194px; background-color:green; position:absolute; left:90px; margin-top:10px; /**ESTILO*/ background-color: #fff; background: rgba(255,255,255,0.98); border: 1px solid #c5c5c5; -webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, .25); -webkit-border-radius: 3px; border: 1px solid rgba(100, 100, 100, .4); -webkit-background-clip: padding-box; display:none; } .flecha { top:-11px; left:10px; background-image:url("./imagenes/sprite2.png"; background-position:-82px -80px; width:20px; height:11px; background-color:; position:absolute; }
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> form #multiphase { border:#000 1px solid; padding:24px; width:350px; } form#multiphase > #phase2, #phase3, #show_all_data { display:none; } </style> <script> var fname, lname, gender, country; function _(x) { return document.getElementById(x); } function processPhase1() { fname = _("firstname".value; lname = _("lastname".value; if(fname.length > 2 && lname.length > 2) { _("phase1".style.display = "none"; _("phase2".style.display = "block"; _("progressBar".value = 33; _("status".innerHTML = "Phase 2 of 3"; } else { alert("Please fill in the fields"; } } function processPhase2() { gender = _("gender".value; if(gender.length > 0) { _("phase2".style.display = "none"; _("phase3".style.display = "block"; _("progressBar".value = 66; _("status".innerHTML = "Phase 3 of 3"; } else { alert("Please choose your gender"; } } function processPhase3() { country = _("country".value; if(country.length > 0) { _("phase3".style.display = "none"; _("show_all_data".style.display = "block"; _("display_fname".innerHTML = fname; _("display_lname".innerHTML = lname; _("display_gender".innerHTML = gender; _("display_country".innerHTML = country; _("progressBar".value = 100; _("status".innerHTML = "Data Overview"; } else { alert("Please choose your country"; } } function submitForm() { _("multiphase".method = "post"; _("multiphase".action = "my_parser.php"; _("multiphase".submit(); } </script> </head> <body> <progress id="progressBar" value="0" max="100" style=width:250px;></progress> <h3 id="status">Phase 1 of 3</h3> <form id="multiphase" onsubmit="return false"> <div id="phase1"> First Name: <input id="firstname" name="firstname"> <br> Last Name: <input id="lastname" name="lastname"><br> <button onclick="processPhase1()">Continue</button> </div> <div id="phase2"> Gender: <select id="gender" name="gender"> <option value=""></option> <option value="m">Male</option> <option value="f">Female</option> </select> <br> <button onclick="processPhase2()">Continue</button> </div> <div id="phase3"> Country: <select id="country" name="country"> <option value="United States">United States</option> <option value="India">India</option> <option value="United Kingdom">United Kingdom</option> </select> <br> <button onclick="processPhase3()">Continue</button> </div> <div id="show_all_data"> First Name: <span id="display_fname"></span> <br> Last Name: <span id="display_lname"></span> <br> Gender: <span id="display_gender"> </span> <br> Country: <span id="display_country"></span> <br> <button onclick="submitForm()">Submit Data</button> </div> </form> </body> </html> Este codigo es muy dificil de conseguir, he visto en sitios web como www.mercadolibre.com y sobre todo en paginas web donde se pueden hacer publicaciones de arriendos de habitaciones o casas sistemas formularios multipasos en los formularios cuando vas a crear una cuenta o a publicar algo en especifico. Muchos usan en este sistema algo llamado breadcrumbs navigation como lo que les mostrare, aqui les dejo un ejemplo y el codigo de como se hace solo que ya les tocara despues mirar como unificarlo al codigo que les comparto y cuando lo hagan me lo rotan. Si lo hago o en cuentro uno asi completo yo se los comparto pronto http://thecodeplayer.com/walkthrough/css3-breadcrumb-navigation Aqui le muestro fotos de este sistema al que me refiero. Aqui podran ver en el paso 1 que van saliendo cajas de seleccion pinchas en uno luego sale la segunda y asi hasta la tercera opcion y por ultimo imprime un boton que es el que lo llevara a uno al paso numero 2. El paso numero 2 veran aqui en el paso 2 que al final imprimio de una el boton que llevara a la opcion 3
Barra que cambia de posicion al hacer scroll con el mouse, cambia la posicion del elemento a fixed, su codigo o funcion se realiza con la ayuda de javascript, es un codigo dificil de conseguir, hay variedad de codigos diferentes que permiten hacerlo, de hecho hay otros ejemplos de codigo ya diferente que hacen que cuando uno haga scroll salga una barra totalmente diferente. posicion dos 1.crearan una carpeta llamada barrascroll donde estaran todas las subcarpetas con sus codigos,imagenes, estilos css3. crearan entonces la primer subcarpeta llamada imagenes y pegaran esta imagen ahi adentro, esta imagen y esta barra les servira para tratar de hacer una grilla de horas como la que veran en la pagina web www.zocdoc.com donde muestran una grilla de horas un sistema de reservacion de citas medicas mejor dicho un selector de horas que es un sistema de cdalendario que pagina una semana. 2. creen un archivo llamado barra.php y peguen el codigo <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="barra.css" /> <script type="text/javascript"> function window_onload() { window.addEventListener("scroll",navbar_reset_top,false); } var navbar_top=100; function navbar_reset_top() { var scrollTop=document.documentElement.scrollTop||document.body.scrollTop; if(scrollTop>navbar_top&&navbar.className==="navbar_absolute" { document.getElementById("navbar".className="navbar_fixed"; } else if(scrollTop<navbar_top&&navbar.className==="navbar_fixed" { document.getElementById("navbar".className="navbar_absolute"; } } </script> </head> <body onload="javascript: window_onload();"> <div id="navbar" class="navbar_absolute"> <div class="flechaizquierda"> </div> <div class="flechaderecha"></div> </div> <div class="content">Content <div class="icono"> </div> </div> </body> </html> 3. creen un archivo con extension .css y llamenlo barra.css y peguen este codigo html,body { margin: 0; } #navbar.navbar_fixed { position:fixed; top:0px; width:536px; height:37px; background-color:orange; margin-left:600px; } #navbar.navbar_absolute { position:absolute; top:100px; width:536px; height:37px; background-color:orange; margin-left:600px; } .content { height:2000px; background-color:#f5f2ef; } .flechaizquierda { position:absolute; top:6px; left:6px; width:23px; height:24px; background-image: url("./imagenes/flechas.png"; background-position:0 0; background-color:; background-repeat:no-repeat; cursor:pointer; } .flechaderecha { right:6px; top:6px; position:absolute; width:23px; height:24px; background-color:; background-position:0 -24px; background-repeat:no-repeat; background-image:url("./imagenes/flechas.png"; cursor:pointer; }
Sistema de agregar amigos o sistema de solicitud de amistad, sistema de amistad SISTEMA DE AGREGAR AMIGOS AL ESTILO FACEBOOKSISTEMA DE SOLICITUD EMISOR Y RECEPTOR link: https://www.youtube.com/watch?v=mQjvCLAvW0I&list=UUV45vpIDkFPeAd4Y56UXKQQ link: https://www.youtube.com/watch?v=V4lU8Jeu6TY En este video muestro la lista de amigos de todos mis amigos y de mi como usuario sesion. link: https://www.youtube.com/watch?v=dD3N05efpU8&list=UUV45vpIDkFPeAd4Y56UXKQQ Hay un problema que ya tengo la solucion, digamos que una parte pero gracias a Dios tengo la solucion es muy dificil de conseguir y ademas no hay tutoriales. Veran como empiezo a cargar el contenido por secciones tema que se debe al buen manejo de el paso de variables por url teniendo en cuenta de lograr unir distintas variables que se pasan en diferentes urls . el truco se realiza con variables $_SERVER['PHP_SELF'] y la mas importante $_SERVER['QUERYSTRING'] , se debe tener en cuenta que facebook usa el sistema de urls amigables editando el archivo htaccess de esa parte si encontraran tutoriales facil, en cuanto al unir variables que se han pasado por enlaces distintos les quedara dificil encontrar info. Detalles pequeños que nos pueden complicar la vida y hacer que se pare el desarrollo. les explico. Buscas a pepito en el buscador y como resultado sale : perfil.php?id=3 Has ingresado si o que al perfil vez el muro etc.. Sucede que cuando vas a ver las fotos , info, amigos , el muro, los enlaces en facebook tienen una variable pasada por url que se rige por ?sk=wall, ?sk=friends , ?sk=info , ?sk= photos . cuando pinchas en fotos o amigos se activa su correspondiente variable y se une a la anterior quedando asi. perfil.php?id=3&?sk=photos vez como se unen las variables con el signo ampersan & , uno al principio piensa que usaron 1000 lineas de codigo para hacer eso y cuales facil, este es el truco <?php echo '<li class="mfci3" ><a href="'.$_SERVER['PHP_SELF'].'?'.$_SERVER['QUERY_STRING'].'&opt=photos ">Fotos</a></li>'; ?> cuando inicias sesion en facebook aclarando primero que ellos editan el archivo htaccess que pueden consultar sobre el , hicieron que no se vean algunos archivos o extenciones. En ejemplo puedes escribir www.facebook.com/home.php?sk=nf ahi les saldran las noticias de lo que todo el mundo publica. Escribes www.facebook.com/home.php?sk=ff y le saldra la seccion para buscar amigos para ver las solicitudes que mandaste. ellos hicieron que no veas el archivo home.php y cuando estas en el perfil de un usuario vez algo raro como esto en la url , usuario.apellido y si pinchas un menu como fotos o amigos saldra algo asi. usuario.apellido/friends usuario.apellido/photos que sucede ? como lo hicieron ? brevas fue facil , primero como les decian manejan el archivo htaccess y esta tecnica se llama url amigables que muchos sitios ya lo estan implementando es ponerle url falsas si nombres que sean facil hasta para google o cualquier persona reconocer y memorizar. en este caso /friends equivale a ?sk=friends y usuario.apellido equivale a esto profile.php?id=3 no me creen ? bueno entonces hagan esto, vallan al muro y en el enlace que es el nombre del usuario de quien halla publicado una noticia un enlace, clickean sobre el para el codigo fuente y sobre ese enlace href busquen el id del usuario y copien id=numero x y lo pegan en el navegador antes poniendo esto. profile.php?id=numero que copiaste. veran que se abre el perfil del id correspondiente. Saben cuan es el otro problema de los dos que ya le comente. 1. unificar o pegar las dos variables pasadas por enlaces distintos. 2. url amigables. el paso que sigue es hacer que no se repitan una variable ya habiendose precionada porque sucede que pasa esto. profile.php?id=3&sk=friends&sk=photos&sk=friends si pinchas 2 veces friends sucede que se duplica en la barra del navegador entonces debe haber otra tecnica para eso que ando investigando pero el primer paso importante ya se logro que permite cargar contenido por secciones dependiendo de la variable a la que se le hizo $_GET[] uno analiza si $sk = $_GET['sk'] == 'friends' entonces muestre x cosa. Creo que por aqui es el camino para programar que las url no se repitan , ojo tengan en cuenta que si no conocen el operador ternario en php deben leer primero porque este pedaso de codigo que les muestro en la mitad tiene el operador ternario. if (isset($_SERVER['QUERY_STRING'])) { $insertGoTo .= (strpos($insertGoTo, '?')) ? "&" : "?"; $insertGoTo .= $_SERVER['QUERY_STRING']; } falta otra parte que estoy tratando de hacer que funcione sin embargo estoy consultando y he encontrado esta parte que no se si sirva vamos a ver como me va. $query = http_build_query($_GET); $query = preg_replace('/page=d*/i', '', $query); lo que programe lo podran descargar de el enlace o archivo llamado sistema -agregar -amigos -amigos -comun V3. link: https://www.youtube.com/watch?v=GgiVNYGGHRA&list=UUV45vpIDkFPeAd4Y56UXKQQ Este código consiste en las siguientes funciones en PHP:1.Listar todos los usuarios (cuando pinchas el enlace agregar amigos, se pasa por url el id de cada usuario.)2.Agregar amigos (cuando obtienes id del emisor por enlace y lo insertas a la BD como amigo y el de usuario en SESSION que es el receptor no va directamente a la tabla amigos sino a otra tabla que se llamara solicitudes de amistad puesto que se usara la 3 funcion que es mostrar las solicitudes y determinar si aceptas o no la invitación de amigos, si aceptas el sistema borra la fila en la tabla solicitudes de amistad donde el receptor es el usuario en SESSION y el emisor es el id del solicitante., luego el sistema añade esos id en su correspondiente campo en la tabla amigos)3.Mostrar solicitud (Existira un tabla para solo solicitudes de amistad asi que se lista los id del campo emisor donde el receptor es el id del campo receptor verificado con la variable en SESSION para esto se usa la variable en SESSION y se hace una consulta a la tabla usuarios para llamar su nombre)4.Aceptar solicitud( cuando listas los usuarios solicitantes se pasa su id por url y la variable que contedra el id pues esa cuando se haga un get entonces ahí es donde si acepta añade los id emisor y receptor a la tabla amigos y borra el rastro en la tabla solicitudes de amistad)5.Cabe notar que si añades después una función eliminar amistad entonces debes no solo eliminar de la siguiente forma delete de tabla amigos where amigo es tales y usuario = sesión sino también en viceversa delete de tabla amigos where usuario = solicitante y amigo = sesión.Estas son las funciones básicas, para poder realizar este sistema se debe aprender a manejar el sistema de paso de variables por URL, en desarrollo web hay un espectacular video que enseña este tema, básicamente este sistema se trata de jugar con los id de los usuarios que se pasan por la url. Este código es excelente y quien no sabe el paso de variables por url podría hacerse imposible llegar a tener o comprender este sistema, a veces hace falta una guía que indique los temas a aprender de PHP o desarrollo web un índice.Por ejemplo en este sistema que comparto hay una función de php llamada serialización y deserialización a través de las funciones serialize() y unserialize() que lo que hace es en la misma tabla usuarios en un campo amigos almacenar la lista de amigos de un usuario en un mismo campo es decir no se repiten diferentes filas.Yo diseñe ya este sistema con funciones en php y rediseñe la tabla amigos ya sin serialize porque para poder agregar un sistema de paginación y paginar la lista de amigos para mi con la función serialize fue prácticamente imposible.Notaran a la derecha en el campo Friends osea amigos que el usuario test con id = 1 tiene como amigo al usuario bob con id = 2, el sistema serialize en la parte a:1: marcara la cantidad de usuarios o datos serializados en este caso solo es uno lo cual indica que si test consigue un segundo amigo la letra seria a:2: y dentro de los corchetes asi se incrementa sino que con i:0 indica que es el dato numero 1 como un array luego incrementara i:1 etc.. algo asi el caso es que requiere de un buen tiempo de estudio este sistema.En esta segunda imagen notaran una nueva tabla para almacenar los amigos, el campo identificación es la llave primary key para que se autoincremente y identifique la tabla, el campo usuario almacen los id de los usuarios, en el campo amigos el id de un amigo del usuario, mejor dicho en diferentes filas se repetirán los id de los usuarios porque serán varios amigos todo asi para poder paginar la lista de amigo, la tabla amigos que es esta no tiene llave foráneas.Yo David Ramirez Gonzalez de Colombia Les comparto el código de agregar amigos porque es muy difícil de conseguir para luego mejorarlo con funciones, ya tengo el código que mejore en funciones y también se los voy a compartir , para el código con funciones quiero enseñarles algo que no cualquiera enseña sino que se aprende con la pericia la experiencia que se adquiere con el tiempo y es que cuando pasas variables por url y haces el $_GET[‘’] que se usa para obtener las variables por url Y $_REQUEST[‘’] que cumple la función de ambos tanto de $_POST[‘’] como $_GET[‘’], deben saber algo muy importante y es que cuando unas un CLASS donde van a ir las funciones por dentro, los $_GET[‘’] que hagas iran por fuera del class no por dentro entonces igualas los get a una variable php ya saben con el signo dollar, y esa variables las pasaran como parámetros a las funciones igualmente donde llamen la función deben también poner los parámetros no se les olvide y con las variables de sesión que es necesario para este código sin o con funciones, notaran que la variable de sesión la igualo a una variable php con el signo dollar, para pasarla a funciones usando la función global para hacer variables globales, todo esto lo notaran en este código y posteriormente cuando comparta el código en funciones. La información debe ser libre para poder aprender sino compartieran los códigos o ejercicios resueltos se vuelve difícil aprender, se aprende con sistemas ya hechos igualmente no preguntarle ojala a los demás se vuelve fastidioso para ellos que les pregunten.TABLAS MYSQLLa base de datos pueden llamarla redsocial o test como quieran, con el comando SHOW CREATE TABLE “nombre tabla ” podrán obtener la estructura de una tabla ya hecha y que este en phpmyadmin que se usa para crear tabla por la consola, el comando obviamente lo usuaran por consola de phpmyadmin, un segundo comando es DESCRIBE “nombre tabla” este comando casi no me gusta el anterior sirve para ver si una tabla tiene reglas foráneas ver su nombre y posteriormente tener la liberta de eliminar una restricción foránea. Habran dos tablas site_members y otra llamada friendship_requests site_members CREATE TABLE `site_members` ( `id` int(11) NOT NULL AUTO_INCREMENT, `username` varchar(255) NOT NULL, `password` varchar(11) NOT NULL, `friends` text NOT NULL, PRIMARY KEY (`id`)) ENGINE=MyISAM AUTO_INCREMENT=4 DEFAULT CHARSET=latin1 friendship_requests CREATE TABLE `friendship_requests` ( `id` int(11) NOT NULL AUTO_INCREMENT, `sender` int(11) NOT NULL, `recipient` int(11) NOT NULL, PRIMARY KEY (`id`)) ENGINE=MyISAM AUTO_INCREMENT=2 DEFAULT CHARSET=latin1 Que disfruten y aprendan mucho con este código, una bendición tenerlo no se consigue fácilmente código uno en un millón, el lema de hackers información libre hay que compartirla, se aprende con la experiencia experimentando con todo tipo de sistemas haciendo una biblioteca de scripts. <?php //Hacer conexon a la base de datos session_start(); mysql_connect("localhost", "root", ""; mysql_select_db("redsocial"; //Login section start if(!isset($_SESSION["logged"])) { if(isset($_POST["username"]) && ($_POST['password'])) { $query = mysql_query("SELECT id FROM site_members WHERE username = '".$_POST["username"]."' AND password = '". $_POST["password"]."' "; if(mysql_num_rows($query) > 0) { $row = mysql_fetch_array($query); $_SESSION["logged"] = $row["id"]; header("Location: " . $_SERVER["PHP_SELF"]); } } else { echo("<form method="POST"> <input type="text" name="username" placeholder="Nombre"> <input type="password" name="password" placeholder="Contraseña"> <input type="submit" name="submit"> </form>"; } } else { //end of login section //Sección para agregar amigo if(isset($_GET["add"])) { $query = mysql_query("SELECT id FROM site_members WHERE id = '" . $_GET["add"] . "'"; if(mysql_num_rows($query) > 0) { $_query = mysql_query("SELECT * FROM friendship_requests WHERE sender = '" . $_SESSION["logged"] . "' AND recipient = '" . $_GET["add"] . "'"; if(mysql_num_rows($_query) == 0) { mysql_query("INSERT INTO friendship_requests SET sender = '" . $_SESSION["logged"] . "', recipient = '" . $_GET["add"] . "'"; } } } //END // Sección de aceptar solicitudes de amistad if(isset($_GET["accept"])) { $query = mysql_query("SELECT * FROM friendship_requests WHERE sender = '" . $_GET["accept"] . "' AND recipient = '" . $_SESSION["logged"] . "'"; if(mysql_num_rows($query) > 0) { $_query = mysql_query("SELECT * FROM site_members WHERE id = '" . $_GET["accept"] . "'"; $_row = mysql_fetch_array($_query); $friends = unserialize($_row["friends"]); $friends[] = $_SESSION["logged"]; mysql_query("UPDATE site_members SET friends = '" . serialize($friends) . "' WHERE id = '" . $_GET["accept"] . "'"; $_query = mysql_query("SELECT * FROM site_members WHERE id = '" . $_SESSION["logged"] . "'"; $_row = mysql_fetch_array($_query); $friends = unserialize($_row["friends"]); $friends[] = $_GET["accept"]; mysql_query("UPDATE site_members SET friends = '" . serialize($friends) . "' WHERE id = '" . $_SESSION["logged"] . "'"; } mysql_query("DELETE FROM friendship_requests WHERE sender = '" . $_GET["accept"] . "' AND recipient = '" . $_SESSION["logged"] . "'"; } //END // Sección para mostrar las solicitudes de amistad $query = mysql_query("SELECT * FROM friendship_requests WHERE recipient = '" . $_SESSION["logged"] . "'"; if(mysql_num_rows($query) > 0) { while($row = mysql_fetch_array($query)) { $_query = mysql_query("SELECT * FROM site_members WHERE id = '" . $row["sender"] . "'"; while($_row = mysql_fetch_array($_query)) { echo $_row["username"] . " <span >quiere ser tu amigo. </span> <a href="" . $_SERVER["PHP_SELF"] . "?accept=" . $_row["id"] . "">Accept?</a><br />"; } } } //END //Sección para mostrar la lista de miembros echo "<h2>Lista de Miembros:</h2>"; $query = mysql_query("SELECT * FROM site_members WHERE id != '" . $_SESSION["logged"] . "'"; while($row = mysql_fetch_array($query)) { $alreadyFriend = false; $friends = unserialize($row["friends"]); if(isset($friends[0])) { foreach($friends as $friend) { if($friend == $_SESSION["logged"]) $alreadyFriend = true; } } echo $row["username"]; $_query = mysql_query("SELECT * FROM friendship_requests WHERE sender = '" . $_SESSION["logged"] . "' AND recipient = '" . $row["id"] . "'"; if(mysql_num_rows($_query) > 0) { echo " - solicitud de amistad."; } elseif($alreadyFriend == false) { echo " - <a href='".$_SERVER["PHP_SELF"]."?add=" .$row["id"]. "'>Agregar como amigo</a>"; } else { echo " - Ya amigos."; } echo "<br />"; } //END //Lista de amigos de inicio ====== Friends list start echo "<h2>Lista amigos:</h2>"; $query = mysql_query("SELECT friends FROM site_members WHERE id = '" . $_SESSION["logged"] . "'"; while($row = mysql_fetch_array($query)) { $friends = unserialize($row["friends"]); if(isset($friends[0])) { foreach($friends as $friend) { $_query = mysql_query("SELECT username FROM site_members WHERE id = '" . $friend . "'"; $_row = mysql_fetch_array($_query); echo $_row["username"] . "<br />"; } } } //END } ?> A les comento, el codigo sin funciones no tiene logout entonces tienen que borrar el historial del navegador para poder iniciar sesion con otro usuario y poder aceptar una solicitud de amistad./*********************************************************************/AQUI PONDRE EL CODIGO EN FUNCIONES /*********************************************************************/Les comento mientras preparo el codigo ahora en el año 2014 para que lo disfruten deberan tener en cuenta apenas tengan el codigo en las manos que cuando llamen a una funcion si las funciones estan dentro de un class cuando instancian la clase y llaman las funciones estan deben ir en un orden de acuerdo a donde primero se mostraran hagan de cuenta como las lineas ralladas de un cuaderno donde ira primero el titulo luego el contenido no llamaran la funcion del contenido primero llamaran primero la funcion del titulo.Les comento para que no se enrreden este es un codigo avanzado y aprenderan mucho de el.Cuando vallan a pasar un parametro por url de una funcion a otra ustedes si usan un class para hacer adentro las funciones entonces si hace un $_GET[] lo hacen por fuera del class, nunca por dentro y les cuento tambien que la funcion global de php funciona solo con class, deben tener muy en cuenta que aveces el session_start () les puede generar problema alguno les pide o les sale un mensaje que lo quite pero en realidad lo necesita , vera que yo uso el signo @ para hacer invisible errores, el signo lo uso a veces cuando hago un $_GET porque dice que no tiene algun dato.Trate de hacer el newsfeed y el historial de acciones de un usuario tal cual en facebook, realmente hay mucho por hacer les servira este codigo para ayudarles a volar en php, trate de hacer el sistema de amigos en comun pero tiene unas fallas no esta sirviendo del todo tengo que sacar tiempo para arreglar el problema.Esten pendientes del post despues les hago actualizaciones al codigo por ahora les dejo este codigo en funciones para que vallan aprendiendo y practicando.Estoy usando el login que tengo en el post que hice con sistema correcto de logout.1. EL codigo se desorganiza, no me gusto taringa para publicar cosas, quien quiera el codigo del sistema de agregar amigos recomiendeme una pagina web donde publicar el codigo y mandeme un correo y le enviare una copia del sistema del codigo fuente. De suerte no hay problema con este link de dropbox aqui esta las versiones del codigo, descarguenlo. NO OLVIDEN DEJAR PUNTOS Y LAS GRACIAS. https://www.dropbox.com/sh/2d8qjijt3ljbm0a/AABWpWxDyapcAoVmI8S3e68Za David.f.r91@hotmail.com Añadi una mejora importante cuando vean la lista de sus amigos y cuando den click en el nombre de un amigo saldra una pagina que les mostrara los amigos de su amigo y para cada uno de esos amigos les dira cuales son amigos comunes sino lo son le pedira agregarlo y si sale usted como usuario en session le dira que es usted. Algo muy importante es que este codigo le arregle un problema que tenia y era que cuando lista usuarios para agregar con id diferente al de sesion entonces si uno se hacia amigo de alguno ya no le idicaba si ya estaba como amigo para no volverlo a agregar, ya lo solucione, asi de correcto solo lo podran tambien ver en el codigo sin funciones y en este que mejore el resto no lo tiene. El codigo tiene este nombre para que lo pruebe y pues estoy haciendo el esfuerzo por hacer el conteo y mostrar la cantidad. sistema-agregar-amigos-amigos-comun-de-amigos-full.rar Segunda mejora que avisa cuando algun usuario ya es amigo para no volverlo a agregar , sucede que hay que mostrarlo porque en este sistema toma listar todos los usuarios de la base de datos para no enredarlos con algun buscador como el actual facebook. OJO en este paquete .rar sistema-agregar-amigos-amigos-comunes-full.rar es donde tengo la version full del codigo con funciones, ahi va la base de datos con la nueva tabla de amigos en comun deben crear la base de datos logincorrecto si al importar no da, ahora le he añadido esta funcion de amigos en comun cuando das click en un amigo les muestra los amigos comunes y los cuenta es complicadito asi que me toco crear una tabla mysql y aqui les muestro como la hice. Toca meterle ajax para que haga insercion de datos a la tabla sin recargar el navegador cuando agreguen un nuevo usuario no aparece de una tienen que ir a atras y ver la lista de amigos volver a clickear al amigo donde quieren ver si añadio el amigo en comun. Otras mejoras importantes es mostrar cuando hay amigos en comun sino los hay dejar solo la palabra AMIGOS en el perfil del usuario cerca donde aparece su foto, en la lista de mis amigos mostrar igualmente un mensaje que diga que no hay amigos en comun podrian dejarlo en blanco porque si no dejan en blanco les aparecera un mensaje que dira 0 amigos en comun y no vale la pena. Hoy domingo 27 de julio de 2014 hice una mejora buenisiima al codigo, le he añadido la funcionalidad de que me cuente para cada uno de los amigos de un amigo mio cuales son los amigos comunes conmigo y que me cuente cuantos amigos tiene. No se como facebook tendra el sistema de amigos en comun pero en mi caso me toco usar una tabla mysql para eso, sinembargo toca añadirle ajax para actualizar la informacion sin recargar el navegador he hechos practicas y creo poder añadirlo pronto. Cabe destacar que tengo que diseñar en mysql workbench las tablas del sistema de privacidad porque resulta y pasa que facebook deja ver los amigos en comun cuando nosotros no le dejamos ver los amigos a alguien igualmente aunque les dejemos ver los amigos imprime en una seccion el conteo de amigos comun. Algo importante que estoy tratando de hacer es que en el panel del usuario veran que listan todos los usuarios de la base de datos para agregarlos solo que como no tengo el buscador entonces estan en lista, pero si dan click en el nombre ya los redirecciono a su perfil pronto hare que detecte cuando es el perfil de usuario en sesion o no y me muestre mas informacion personal o el estado de amistad. Aqui les muestro el avance ya hice el buscador pero con una caracteristica muy importante que cuando dan click por fuera de la capa div llamada display que muestra los resultados del buscador la capa se oculta le añadi esa funcionalidad en internet se encuentra muchos buscadores pero no tienen esa funcionalidad. Otra cosa importante es que perfeccione el codigo de amigos en comun me hacia falta añadirle la opcion de borrado cuando borras a un amigo borrar los rastros de amigos en comun pero parece que ya esta funcionando bien el codigo, hare lo posible de hacer el codigo sin almacenar datos en mysql, falta añadir ajax para que recargue los datos de forma asincrona. como podran ver en esta foto en el perfil ya informa al lado donde deberia ir la foto el estado de la amistad. tengo que arreglarlo un poco mas para que tambien pueda añadir a usuarios amigos de un amigo mio. Muy importante si llegado un caso quieren listar los usuarios de la base de datos activan la funcion listar miembros en el archivo panel usuario linea que esta comentada pero es mejor entonces que usen el buscador. He añadido otra funcionalidad , ahora el sistema detecta el sexo del usuario y de acuerdo a el muestra una foto correspondiente a el de hombre o mujer, tambien si pasan el cursor en la foto de un amigo no sale ningun menu pero si lo pasan en la foto del usuario en sesion si saldra un menu de color coral despues se cambia pero si dan click en el sale otra capa o una opcion que dice subir foto, estoy en estos momentos tratando de darle un efecto igual que facebook con javascript. David Ramirez Gonzalez. EL codigo se desorganiza, no me gusto taringa para publicar cosas, quien quiera el codigo del sistema de agregar amigos recomiendeme una pagina web donde publicar el codigo y mandeme un correo y le enviare una copia del sistema del codigo fuente. De suerte no hay problema con este link de dropbox aqui esta las versiones del codigo, descarguenlo. NO OLVIDEN DEJAR PUNTOS Y LAS GRACIAS. https://www.dropbox.com/sh/2d8qjijt3ljbm0a/AABWpWxDyapcAoVmI8S3e68Za David.f.r91@hotmail.com constantemente le estoy haciendo mejoras al codigo.
Manejo de Sprites en CSS3 INFORMACION PARA DESARROLLADORES WEB En este enlace encontraran una excelente teoria que explica el manejo de los sprites en css3 http://coolvillage.es/entendiendo-los-sprites/ Ahora les explicare el manejo de sprites de una forma que no explican en paginas web en google , un conocimiento que adquiri de suerte en videos en youtube. Despues de esto estaran volando en el manejo de sprites. para manejar sprites se enlaca la imagen de donde la tenga: Background-image: url("../carpeta/nombrefoto.jpg "; cuando llaman una carpeta deben tener en cuenta los punticos uno o dos dependiendo, a mi una vez me genero problema si era la foto formato png o jpg y pedia dependiendo uno o dos puntos. luego se usa background-position: eje x eje y background-position: -0px - 0px ; los ejes son en negativo nunca positivos. cuando backgroun-position lo que hacen es moverse dentro de la imagen el sprites que contiene varios iconos. van a hacer lo siguiente para probar el manejo de sprites. se van por ejemplo a la pagina de facebook y toman el logo de facebook que esta en la barra azul luego en mozilla que es el mejor para ver el codigo fuente entonces sobre la imagen dan click en inspeccionar elemento. cuando salga la consola o la ventana que muestra el codigo fuente notaran a la derecha el panel de el codigo css3, en el teclado tomaran las teclas de las flechas con la tecla superior la que indica hacia arriba y la telca inferior la que indica hacia abajo con esas teclas moveran el sprites, con las teclas de la flecha la de la derecha y la de la izquierda con esas moveran en el panel de mozilla en el codigo css3 las opciones del background-position: background-position: -0px -0px; eje x eje y si quieren tomar el eje x pues usan la tecla de la flecha izquierda y si quieren cambiar los pixeles en el eje y entonces usan la tecla de la flecha derecha. cuando esten en el eje que quieren pues simplemente para no adivinar en que pixel esta el icono o imagen dentro del sprite pues solamente toman las flechas del teclado la tecla de la flecha hacia arriba y la tecla hacia abajo y dependiendo al eje en el que este van girando se van moviendo en el sprite. Pongo unas fotos para que mas o menos sepan lo que les digo, ya saben son ejes negativos no positivos. Hay paginas web que son herramientas para crear sprites vallan buscando herramientas web para diseñadores de paginas web igualmente para navegadores. PASO 1 PASO 2 PASO 3 PASO 4 Dan click en el eje x o y de el background-position y cambian los pixeles, recuerden que los ejes son negativos y nunca positivos, van moviendo con las teclas de las flechas la que indica hacia arriba o hacia abajo dependiendo la ubicacion de el icono dentro del sprites, lo que hacen es que en su proyecto en xampp o wampserver cuando corran el proyecto en el navegador hacen esto inspeccionar el codigo en el navegador y manejar el sprites de esta forma para ubicar y poner rapido la imagen del sprites que necesitan. PASO 5 PASO 6 Como podran ver este es un sprites una imagen que contiene varios iconos para hacer una sola peticion al servidor y menos problemas para su portal web. En este caso di click sobre url de la imagen en background-image en abrir en una nueva pestaña y detallar la imagen para ver a que icono dirijirme y probar lo que les acabo de enseñar. Agradezco que difundieran esta informacion ya que en ninguna pagina web explican esto tan importante de esta forma y en librosweb.es que es excelente pagina donde hablan de css3 no tienen este dato no lo explican.