As I mentioned in my previous post, I migrated to Ubuntu 22.04 because in terms of the web development environment we could say that it is a better operating system, so far I liked it a lot and I was working without any news, until today, again I returned to use netbeans to realize the big problem of dependencies I had, I spent almost all day researching solutions and reading documentation for the end were silly things that could be solved in seconds literally, in short, for now it goes well but little by little difficulties are coming out, I hope to continue solving everything.
Como les comente en mi anterior post, migre a Ubuntu 22.04 puesto que en cuanto al entorno de desarrollo web podríamos decir que es un mejor sistema operativo, hasta ahora me ha gustado bastante y venia trabajando sin ninguna novedad, hasta hoy, nuevamente volví a usar netbeans para darme cuenta del gran problema de dependencias que tenia, me pase casi todo el día investigando soluciones y leyendo documentación para que al final fueran tontearías que podían resolverse en cuestión de segundos literalmente, en fin, por ahora marcha bien pero poco a poco van saliendo dificultades, espero poder seguir resolviendo cada cosa. |
|---|
Again I develop the login of a web application that I develop with jsp and servlets, I wanted to make it more professional this time so I did not limit myself only to use bootstrap, I am a big fan of what can be done with css and today I want to leave a small sample, it is really simpler than it seems, it's just a couple of boxes after another with a few pixels less to give that effect that runs around the contour of our card or login box, below I'll leave all the code so you get a clearer idea, also remember that you are free to use the lines of code you want and edit to your liking.
Nuevamente desarrollo el login de una aplicación web que desarrollo con jsp y servlets, quise hacerla más profesional esta vez así que no me limite solo a utilizar bootstrap, soy un gran fan de lo que se puede hacer con css y hoy quiero dejar una pequeña muestra, es realmente más sencillo de lo que parece, solo son un par de cajas detrás de otra con unos pocos pixeles menos para dar ese efecto de que recorre todo el contorno de nuestra card o caja de login, abajo dejare todo el codigo así te haras una idea más clara, además recordarte que eres libre de usar las lineas de codigo que desees y editar a tu gusto. |
|---|
It's the first time I use the cascade styles in a jsp, it's nothing out of this world, like any other .html terminal file, also surprisingly I didn't have any error, believe me, netbeans hasn't left me like this the first time so far, I hope everything will be as good when working the servlets in this new project, the backend is what is more difficult for me... By the way, I don't use xampp anymore, now I will use postgresql and pgadmin4 but I will talk about that later.
Es la primera vez que utilizo los estilos de cascada en un jsp, no es nada de otro mundo, como cualquier archivo con terminal .html, además sorprendentemente no tuve ningún error, créanme, netbeans no me ha dejado así las cosas a la primera hasta ahora, espero que todo se de igual de bien al momento de trabajar los servlets en este nuevo proyecto, el backend es lo que más difícil me resulta... Por cierto, ya no uso xampp, ahora utilizare postgresql y pgadmin4 pero de eso habalré después. |
|---|
Soon I will bring you something more of what was of this project, for now to be the first day I am satisfied, at least for the views, I do not even want to imagine what will be the theme of functionality but here we are, with all the optimism.
Pronto les traeré algo más de lo que fue de este proyecto, por ahora para ser el día uno me voy satisfecho, al menos por el tema de las vistas, no quiero ni imaginarme lo que será el tema de la funcionalidad pero aquí estamos, con todo el optimismo. |
|---|
login.jsp
<html lang="es">
<head>
<link href="WEB-INF/css/estilosl.css" rel="stylesheet" type="text/css"/>
<title>Login</title>
<link href="css/estilos.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div class="caja">
<form action="Validar" method="post">
<h2>Bienvenido</h2>
<div class="inputCaja">
<input type="text" name="usuario" required="required">
<span>Usuario</span>
<i></i>
</div>
<div class="inputCaja">
<input type="password" name="password" required="required">
<span>Contraseña</span>
<i></i>
</div>
<div class="links">
<a href="#">Recordar contraseña</a>
<a href="#">Crear usuario</a>
</div>
<input type="submit" value="Entrar">
</form>
</div>
</div>
</body>
</html>
estilos.css
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Rubik', sans-serif;
}
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),url(../img/5026563.jpg);
background-size: cover;
backdrop-filter: blur(2px);
}
.caja{
position: relative;
width: 380px;
height: 420px;
background: #f4f6f7;
border-radius: 8px;
overflow: hidden;
}
.caja::before{
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 380px;
width: 380px;
height: 420px;
background: linear-gradient(0deg, transparent, #dc7633 , #f4f6f7);
transform-origin: bottom right ;
animation: animacion 6s linear infinite;
}
.caja::after{
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 380px;
width: 380px;
height: 420px;
background: linear-gradient(0deg, transparent, #dc7633 ,#f4f6f7);
transform-origin: bottom right ;
animation: animacion 6s linear infinite;
animation-delay: -3s;
}
@keyframes animacion{
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}
form{
position: absolute;
inset: 4px;
z-index: 10;
background: #ecf0f1;
border-radius: 8px;
padding: 50px 40px;
display: flex;
flex-direction: column;
justify-content: center;
}
h2{
text-align: center;
color: #dc7633 ;
font-weight: 900;
}
.inputCaja{
position: relative;
width: 300px;
margin-top: 35px;
}
.inputCaja input{
position: relative;
width: 100%;
padding: 20px 10px 10px;
background: transparent;
border: none;
outline: none;
font-size: 1em;
letter-spacing: 0.05em;
z-index: 10;
color: black;
font-weight: 700;
}
.inputCaja span{
position: absolute;
left: 0;
padding: 20px 0px 10px;
font-size: 1em;
color: #23242a;
pointer-events: none;
letter-spacing: 0.05rem;
transition: 0.5s;
}
.inputCaja input:valid ~ span,
.inputCaja input:focus ~ span{
color: #dc7633;
transform: translateX(0px) translateY(-34px);
font-size: 0.75em;
}
.inputCaja i{
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 2px;
background: #d0d3d4;
border-radius: 4px;
transition: 0.5s;
pointer-events: none;
z-index: 9;
}
.inputCaja input:valid ~ i,
.inputCaja input:focus ~ i{
height: 44px;
}
.links{
display: flex;
justify-content: space-between;
font-weight: 500;
}
.links a{
margin: 10px 0;
font-size: 0.75em;
color: #3d3d3d;
text-decoration: none;
}
.links a:hover,
.links a:nth-child(2){
color: #dc7633;
}
input[type="submit"]{
border: none;
outline: none;
background: #dc7633;
padding: 11px 25px;
width: 100px;
margin-top: 10px;
border-radius: 4px;
font-weight: 600;
cursor: pointer;
text-align: center;
justify-content: center;
align-items: center;
transition: all 0.6s ease;
}
input[type="submit"]:hover{
background: #b15619;
}