mauricioapos

Si te perdiste la primera parte: http://www.taringa.net/posts/hazlo-tu-mismo/17472354/Simple-CMS-Gestion-de-Datos.html Si te perdiste la segunda parte: http://www.taringa.net/posts/hazlo-tu-mismo/17473063/Simple-CMS-Gestion-de-Datos-Segunda-parte.html En esta Tercera parte crearemos Sistema de logueo para nuestro CMS Para cual recurriremos a las mismas herramientas: Dreamweaver: http://www.adobe.com/es/ WampServer: http://www.wampserver.com/en/ Que conocimientos necesito? Nuevamente solo son necesarios conocimientos básicos pero en este caso de: HTML MySql PHP Bien con esto ya podemos Comenzar esta ves dividiremos el CMS en 5 Funciones fáciles Nota: Podrán ver que el CMS no es le mismo de tutoriales anteriores solo son una pequeñas ediciones Para este tutorial usaremos una sencilla tabla como la siguiente Parte 1: La conexión a la DB Al igual que lo hicimos en anteriores ocasiones solo una conexión mas a la DB Con esto podremos establecer conexión a la base de datos siempre que sea necesaria. Parte 2: El formulario de logueo Para realizar esto solo necesitamos validar si es necesario mostrar el formulario por que en caso de estar ya logueado por mas de que yo le diera retroceso en el navegador iría al inicio puesto que al estar logueado no puedes ver el formulario de logueo si no hasta cerrar la session. Parte 3: Validar el si el usuario es correcto Una ves terminados los pasos anteriores nos queda ver si el usuario es posible y correcto para ello creamos otra sencilla función Parte 4: La opcion para salir Una ves llegado a este punto el sistema de logueo ya esta terminado pero ay algo muy importante que es poder cerrar session para iniciar con otro usuario, nada mas fácil que esto Parte 5: crear las paguinas que llamen a las funciones Una ves aquí el sistema de logueo ya esta completo solo queda distribuirlo para que sea usado y lo haremos así Para mostrar el formulario: Valida el usuario en otra paguina: Y por ultimo cierra la session: Una ves echo esto el formulario ya esta echo y es funcional. Ahora que? Pues fácil usa lo que aprendiste de post anteriores y crea estilos CSS Resultado: Y hasta aqui llego la tercera parte del post me gustaria saber si estan de acuerdo a que habilite una session de vídeo cursos en Youtube con programación en tiempo real? Como siempre cualquier comentario me manden un MP estoy Para ayudar. No te vallas sin comentar y dejar puntos jajaja

En esta Cuarta parte crearemos Sistema de Transición de imágenes para nuestro CMS Para cual recurriremos a las mismas herramientas: Block de notas: en cualquier pc WampServer: Wamp Que conocimientos necesito? Nuevamente solo son necesarios conocimientos básicos pero en este caso de: HTML CSS JavaScript Bien con esto ya podemos Comenzar esta ves dividiremos el CMS en 3 Partes fáciles Parte 1: Creado los objetos Primero que nada crearemos un DIV que contendrá las imágenes. Luego insertamos cada imagen una detrás de otra. <div id="Contenedortancicion"> <img src="Imagenes/1.jpg" id="subs1" class="subs"> <img src="Imagenes/2.jpg" id="subs2" class="subs"> <img src="Imagenes/3.jpg" id="subs3" class="subs"> <img src="Imagenes/4.jpg" id="subs4" class="subs"> </div> Obligatorio: 1- Que cada imagen tenga un ID Diferente 2- Que cada Imagen tenga la Class Igual a las demas 3- Que el DIV tenga un id Nota: Abran notado que lo escribí mal pero eso es solo por que soy medio analfabeta. Parte 2: Creado El CSS No olviden que para poner codigo CSS en una pagina de formato Html Tenemos que poner en el medio <style> //Código del CSS ira aquí </style> Bien primero modificaremos el DIV osea el contenedor de las imagenes #Contenedortancicion /* Es el nombre que le pusimos el Div */ { position:relative; /* Posicion Relativa */ background-color:#555; /* Color de Fondo */ margin:auto; /* Centrado en la pantalla */ width:800px; /* Ancho */ height:400px; /* Alto */ overflow:hidden; /* Vista en los limites */ border-radius:15px; /* Borde Redondeado */ box-shadow:0px 0px 10px rgba(0, 0, 0, 0.5); /* Sombra */ } En todo esto lo indispensable para el funcionamiento es: position:relative; /* Posicion Relativa */ width:800px; /* Ancho */ height:400px; /* Alto */ overflow:hidden; /* Vista en los limites */ El resto solo lo Hace mas bonito Una ves terminado esto creamos el CSS parra cada imagen: .subs { border-radius:inherit; /* Borde redondeado */ position:absolute; /* Posicion Absoluta, osea superpuestos */ opacity:0; /* Lo hacemos opaco, osea invisible */ width:inherit; /* Toma el ancho del Div */ height:inherit; /* Toma el Alto del Div */ transition: opacity 2s linear; /* Crea la animacion entre imagenes */ } Y en este CSS todo es importante, una ves terminado no olviden cerrar la etiqueta: <style> //Código del CSS ira aquí </style> Nota: No olviden que al referirse a un ID de un objeto se antepone el # luego el nombre del objeto pero con las CLASS se usa el . antes del nombre. Una ves aquí el CSS ya esta armado solo falta el cambio de imagen. Parte 3: Creado El JavaScript Nota: Funciona igual que el CSS una apertura y un cierre solo que el nombre es diferente osea: <script> //Código del CSS ira aquí </script> Bien espesemos por lo sencillo crear las primeras variables y mostrar la primera imagen var i = 1; var maxi = 4; document.getElementById("subs"+i).style.opacity = 1; Creamos la variable I de indice que nos indicara que imagen se esta usando la variable MAXI que es el numero de imágenes que usamos en mi caso 4 y luego mostramos la primera imagen dándole opacity = 1 Una ves echo esto crearemos la función que cambiara la imagen: function cambia() { } Luego ocultamos la imagen que esta actualmente visible imagen = document.getElementById("subs"+i); imagen.style.opacity = 0; Ahora evaluamos el indice diciendole que una ves que si el indice es menor al valor maximo que aumente pero una ves que sean iguales i sera igual a 1 if (i < maxi) {i++} else {i = 1} imagen = document.getElementById("subs"+i); Luego solo queda mostrar la siguiente imagen: imagen = document.getElementById("subs"+i); imagen.style.opacity = 1; una ves aqui ya esta listo pero falta algo y es que la funcion sea llamada por eso dentro de: <script> //Código del CSS ira aquí </script> Ponemos setInterval("cambia()",3000); y ya hasta aquí esta terminado todo el código al finalizarlo debería de ser algo así. <style> #Contenedortancicion /* Es el nombre que le pusimos el Div */ { position:relative; /* Posicion Relativa */ background-color:#555; /* Color de Fondo */ margin:auto; /* Centrado en la pantalla */ width:800px; /* Ancho */ height:400px; /* Alto */ overflow:hidden; /* Vista en los limites */ border-radius:15px; /* Borde Redondeado */ box-shadow:0px 0px 10px rgba(0, 0, 0, 0.5); /* Sombra */ } .subs { border-radius:inherit; /* Borde redondeado */ position:absolute; /* Posicion Absoluta, osea superpuestos */ opacity:0; /* Lo hacemos opaco, osea invisible */ width:inherit; /* Toma el ancho del Div */ height:inherit; /* Toma el Alto del Div */ transition: opacity 2s linear; /* Crea la animacion entre imagenes */ } </style> <div id="Contenedortancicion"> <img src="Imagenes/1.jpg" id="subs1" class="subs"> <img src="Imagenes/2.jpg" id="subs2" class="subs"> <img src="Imagenes/3.jpg" id="subs3" class="subs"> <img src="Imagenes/4.jpg" id="subs4" class="subs"> </div> <script> var i = 1; var maxi = 4; document.getElementById("subs"+i).style.opacity = 1; function cambia() { imagen = document.getElementById("subs"+i); imagen.style.opacity = 0; if (i < maxi) {i++} else {i = 1} imagen = document.getElementById("subs"+i); imagen.style.opacity = 1; } setInterval("cambia()",3000); </script> Y al terminarlo veremos algo como esto Nota muy importante: Disculpen el Tamaño del gif es que el Internet en Paraguay es malisimo y no me cargaba una de alta calidad aqui ya esta terminado pero mejor seria con los botones de siguiente y anterior no En el CSS .cambio:hover { opacity:1; } #ante { float:left; } #sig { float:right; } En el contenido <a href="#" onClick="anterior()"><div id="ante" class="cambio"> < </div></a> <a href="#" onClick="Siguiente()"><div id="sig" class="cambio"> > </div></a> y en el JavaScript usaremos la función anterior como siguiente y crearemos la de atrás. function Siguiente() { imagen = document.getElementById("subs"+i); imagen.style.opacity = 0; if (i < maxi) {i++} else {i = 1} imagen = document.getElementById("subs"+i); imagen.style.opacity = 1; } function anterior() { imagen = document.getElementById("subs"+i); imagen.style.opacity = 0; if (i > 1) {i--} else {i = maxi} imagen = document.getElementById("subs"+i); imagen.style.opacity = 1; } Y este sera el código obtenido <style> #Contenedortancicion { position:relative; background-color:#555; margin:auto; width:600px; height:300px; overflow:hidden; border-radius:15px; box-shadow:0px 0px 10px rgba(0, 0, 0, 0.5); } .subs { border-radius:inherit; position:absolute; opacity:0; width:inherit; height:inherit; transition: opacity 1s linear; } .cambio { width:20px; height:60px; background:#EEE; opacity:0; transition: opacity 1s linear; } .cambio:hover { opacity:1; } #ante { float:left; } #sig { float:right; } </style> <div id="Contenedortancicion"> <img src="Imagenes/1.jpg" id="subs1" class="subs"> <img src="Imagenes/2.jpg" id="subs2" class="subs"> <img src="Imagenes/3.jpg" id="subs3" class="subs"> <img src="Imagenes/4.jpg" id="subs4" class="subs"> <a href="#" onClick="anterior()"><div id="ante" class="cambio"> < </div></a> <a href="#" onClick="Siguiente()"><div id="sig" class="cambio"> > </div></a> </div> <script> var i = 1; var maxi = 4; document.getElementById("subs"+i).style.opacity = 1; function Siguiente() { imagen = document.getElementById("subs"+i); imagen.style.opacity = 0; if (i < maxi) {i++} else {i = 1} imagen = document.getElementById("subs"+i); imagen.style.opacity = 1; } function anterior() { imagen = document.getElementById("subs"+i); imagen.style.opacity = 0; if (i > 1) {i--} else {i = maxi} imagen = document.getElementById("subs"+i); imagen.style.opacity = 1; } setInterval("Siguiente()",8000); </script> Resultado: Y ya esta lista la transición. Y con esto finalista el post esta abierto a todos los comentarios y cualquier dudad mándame un MP y yo te ayudo Vista del CMS hasta ahora Para los que le interesen aqui pueden ver la pagina: CMS