Repositorio Github: github.com/cruizg93/CristianR... Blog post: cristianruizblog.com/html-ejem... Me base en este video, esta en ingles pero depronto te pueda dar una explicacion extra. • Transparent Login Form...
felicitaciones, sin lugar a duda un excelente video, práctico, preciso, eficiente. Tenia una duda con respecto al avatar pero ya lo pude solucionar, gracias nuevamente por compartir.
2. Crear en la base de datos una tabla llamada: Accesos con los campos(id, nuser, fecha, hora, tipo) Luego de dar la bienvenida a los usuarios debe insertar automáticamente los campos indicados
Gracias por el video. Está muy bien. Ahora solo me falta aprender a hacer el proceso de login. ¿Cuál sería l paso siguiente para que se identifique un usuario? Mi proyecto no sería para uso del público en general, sino para que se conecten unos pocos usuarios, cada uno con su nombre de usuario y contraseña, que podría asignarles yo mismo, por lo que no sería necesario un proceso de registro. ¿Qué video puedo seguir para hacer funcional este formulario? Te dejo like y me suscribo. Saludos desde España.
Hola, me gustó mucho tu tutorial, no he checado otros videos tuyos, pero vere si hay. Oye una duda, si en vez de usar los icono de user y contraseña del fontawesome, quiero usar unos que tengo guardados en mi carpeta de imagenes, como podría hacerlo? y si son muy grandes con solo modificarles la propiedad width y height lo podria ajustar? Saludos desde México
Hola @cracatoa99, disculpa por demorarme en responder, ayer estaba mudandome de casa y no tuve tiempo... Hay dos escenarios para reemplazar los iconos por imagens. 1)El primer escenario es el del boton donde puedes simplemente reemplazar la etiqueta antes de la palabra "Ingresar" por la etiqueta 2)El segundo escenario es en los campos de texto, donde utilizamos la propieda ::before en CSS para agregar el icono. si tienes los iconos como imagen deberas ponerlo como fondo del ::before y asignar los valores de ancho y alto, ademas deberas de decir que el contenido es vacio: (ejemplo para campo del password) .form-group#contrasena-group::before{ background-image: url("../img/icono.jpg") no-repeat center center fixed; background-size: 22px 37px; display: inline-block; width: 22px; height: 37px; content:""; } Por favor dejame saber si esto soluciona tu problema. y no dudes en preguntar cualquier cosa. gracias por ver el video.
hola que tal como estas saludos desde chile me gusto tu video pero el problema que siguiendo tus indicaciones logre realizar el login con un inconveniente de que el cuadrado negro no logro achicarlo con nada busque por todo el codigo y no lo logre si pudieras ayudarme seria de mucha ayuda
Para que me aparezca el candado tuve que hacer esto: y en estilos.css lo modifique asi: .fa-user{ // esto es para el icono de usuario font-family:'Font Awesome\ 5 Free'; position: absolute; left: 28px; top: 10px; font-size: 22px; padding-top: 0px; } .fa-lock{ // esto es para el icono del candado font-family:'Font Awesome\ 5 Free'; position: absolute; left: 28px; top: 92px; font-size: 22px; padding-top: 0px; }
Hola, gracias por el Tutorial, me ayudo bastante. Tal vez una corrección es que los iconos de font awesome desde css no me estaban funcionando y tuve que ponerle font-weight: 900; como dice en la pagina de font awesome. Ademas cuando abro el formulario desde mi teléfono android esos iconos me salen con una X, mientras que el icono de ingresar si lo muestra bien. Tu lo probaste desde tu teléfono?
@@CristianRuizBlog me acabo de dar cuenta que tu tutorial es una copia barata de @DrewOnCue . Eres tan descarado que hasta le pusiste los mismos nombres a las clases de css. Obviamente no vas a saber como resolver problemas porque el trabajo no lo hiciste tu
@@inf009 Well, si a copia barata te refieres con compartir el conocimiento en español ps entonces si, le puedes llamar de esa manera. Todo el contenido de mis videos esta basado en conocimiento que encuentro en ingles y quiero compartir en mi lenguage nativo. Porque se lo dificil que es conseguir material en español cuando estas empezando.
Perfecto, excelente, lo realice pero con trabajo me funciono, solo creo que quedo pendiente una explicación del código ya que en tu archivo link esta escrito, aunque yo no lo que, porque ya funciona como el video, tengo mi curiosidad, por casualidad tienes algún tutorial donde expliques una vez que se haya logueado con Oracle o Mysql, entre algún menú con diferentes opciones con un formulario CRUD, pero un menú sling. gracias por tu tiempo
hola Yesid, muchas gracias por ver el video, para responder tu pregunta, todo depende de que lenguage tu utilices en el lado del servidor, en mi caso yo uso java con Spring Framework. Tengo una seria donde estoy creando una aplicacion desde cero como tu la pides, Login, manejo de roles y un CRUD. Pero apenas estoy creando los post en mi blog. Si te interesa te dejo el link del primer post, al final de cada post hay un Menu y enlaces a los siguientes capitulos cristianruizblog.com/spring-boot-aplicacion-web-parte-1/
Excelente me fue de mucha ayuda... lo aplique a spring secruity personalizando el login. Lo que me falta es capturar los mensajes de error y de logout para mostrarlos en pantalla, tienes algún tutorial que nos ayude a realizar eso? Saludos.
Muy buen tuto pero cuando pongo los iconos me pone error , no salen solo agarro el de user pero no el de pass no me sale el icono ni ningun otro de pass pero probe con otras categorias y si salieron .form-group#user-group::before{ content: "\f007"; } .form-group::before{ font-family: "Font Awesome\ 5 Free"; position: absolute; left: 28px; font-size:22px; padding-top:4px; color: red; } .form-group#grupo-pass::before{ content: "\f007"; } solo asi me mostraron los iconos
Buen vídeo, me encanto, solo tengo una duda con la imagen del avatar, lo que pasa es que cuando lo hice yo me dejo la imagen cargada a la izquierda, y no centrada como se ve en el tuyo, qué puedo hacer?
Luis Rivera, asegúrate que el primer div que tiene el class “modal-dialog” tambien tenga el text-center. Como en la línea 22 en este enlace github.com/cruizg93/CristianRuizBlog-LoginForm/blob/master/index.html
@@witchhalliwell1594 Mil disculpas por responder tan tarde. (estaba de vacaciones). Necesitare mas informacion de lo q te pasa o ver el codigo. Asegurate de que el id del form-group este correcto e ingresa el content en el ::before tal y como en el video 17:05.
Mejor usa la clase de fontawesome ("lock" o "user-lock") y lo pones en el input (campo) con la clase "prepend" del CSS de Bootstrap. getbootstrap.com/docs/4.0/components/input-group/
bueno video, pero estaba intentando insertar los iconos y no pude, me toco dejarlo asi por que creo y tuve problemas al colocar el link de referncia, te agradezco si me sacas de esa duda... descarge la libreria y la coloque en mi proyecto y de hay no di para color los iconos, tuve que omitir esa parte.
Hola Alexandre, mira en la pagina oficial de fontawasome puedes elegir los tipos de iconos que quieres usar y pegar el codigo que ellos generan fontawesome.com/start Aca en el ejemplo del codigo puedes ver la linea 14 y 15 de los links que yo use github.com/cruizg93/CristianRuizBlog-LoginForm/blob/master/index.html
hola amigo excelente vídeo quisiera saber si me puedes ayudar con un video tutorial para crear una planilla de formulario inicio de sesión para un hotspot para un mikrotik por favor ya que no hay ni un solo video en internet de como crear una plantilla
Hola @Angel Rincon, me alegra que te haya gustado mi video, desafortunadamente no tengo forma de hacer el video que me pides, pero te voy a dejar un video donde explican lo que tun necesitas, el video esta en ingles pero puedes activar los subtitulos de youtube en español. www.tanaza.com/blog/mikrotik-routers-configuration-wifi-hotspot-login-page/
Claro q si puede haber problema. Eso se usa para ejemplos y etapa de desarrollo. Si estás pensando en crear una aplicación o un sitio comercial por favor descargar los archivos en tu proyecto
Gracias buen vídeo, pero no me funciona el background color de modal-content y no me deja direccionar los botones , necesito que me ayuden por favor gracias
@@analista_cris_jorquera necesito ver tu codigo, porque eres el unico con ese problema, si sigues el tutorial paso a paso no deberia de bloquear los campos. si quieres copia el codigo en el post del blog y yo lo miro. cristianruizblog.com/html-ejemplo-de-inicio-de-sesion-con-bootstrap-4/
La clase container de Bootstrap te organiza el sistema de cuadrículas y centra la página. Además tienes que decirle al login q su tamaño total es de 12
Hola Mauricio, tengo un taller de 13 capitulos donde uso este login y Spring Boot (java) para crear y modificar usuarios ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-3TMHPCGWTqA.html
Hola Marco. Descargar la libreria es muy facil. 1) Copia y pega el link (src) en una pestaña nueva 2) click derecho en el texto y selecciona la opcion de guardar como 3) selecciona la carpeta de donde quieres guardar tu archivo Y ya asi de facil Bootstrap css: maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css Bootstrap JS: maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js para los iconos fontawasome css: use.fontawesome.com/releases/v5.0.8/css/solid.css fontawasome js: use.fontawesome.com/releases/v5.0.7/js/all.js Jquery js: ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js Jquery pagina oficial jquery.com/download/ link del repositorio en github: github.com/cruizg93/CristianRuizBlog-LoginForm
amigo, me salieron algunos problemas, a la hora de poner el background-color: #f2f2f2; en el . modal-content no me permite cambiar el color a ningún otro y el incono de candado definido por content: "\f023"; ... no me sale ningún candado, de hecho probe con varios códigos y muchos no me salen, ojala me pudieras ayudar... Gracias
Claro q si. Déjame ayudarte. Necesitaré ver el codigo. Lo tienes en Github o en algun repositorio online? Sino también puedes ponerlo en el post del blog yo te ayudo. cristianruizblog.com/html-ejemplo-de-inicio-de-sesion-con-bootstrap-4/
Eso es Formulario HTML nomás. Faltan las páginas de inicio de sesión php, cómo encriptar la información, conexión a base de datos, página de error, confirmación por email de nuevos usuarios o para recordar la contraseña. Falta mucho.
Hola Toma, como el titulo lo indica es solo HTML y bootstrap, yo tengo un playlist con un ejemplo completo de inicio de sesión, conexión a base de datos y un CRUD completo. ru-vid.com/group/PLcaI8vM1NK3teGT4oVi9JzyX8WLdkgbz_
