Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • Ga6220501096-Aa3 Ev02

    Cargado por

    Yisel
    4 vistas11 páginas

    Título original

    GA6220501096-AA3 EV02

    Derechos de autor

    © © All Rights Reserved

    Formatos disponibles

    DOCX, PDF, TXT o lea en línea desde Scribd

    ¿Le pareció útil este documento?

    ¿Este contenido es inapropiado?

    Denunciar este documento

    Copyright:

    © All Rights Reserved
    Descargue como DOCX, PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    4 vistas11 páginas

    Ga6220501096-Aa3 Ev02

    Cargado por

    Yisel

    Copyright:

    © All Rights Reserved
    Descargue como DOCX, PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    de 11

    Crear el diseño del sitio web y/o móviles utilizando sus componentes y tecnologías

    respectivas
    GA6-220501096-AA3-EV02

    Yeniffer Juliana Gama Pinzón


    Yisel Johana Montañez Ramírez

    TUTOR: JHON HUILA

    Análisis y Desarrollo de Software


    FICHA 2627032
    GRUPO: ADSO 5

    Servicio Nacional de Aprendizaje - SENA

    Centro de Electricidad y Automatización Industrial

    Regional Valle
    INTRODUCCION

    Figma es una herramienta de prototipado web y editor de gráficos vectorial, que, a

    diferencia de las otras herramientas, se aloja en la web.

    Objetivo

    Dar a conocer la herramienta de prototipado Figma,usarla para demostrar las

    principales funcionalidades de esta herramienta realizando un ejemplo de creación

    principales funcionalidades de esta herramienta realizando un ejemplo de creación

    de interfaz con algunos elementos de interfaz con algunos elementos.


    Equilibrio es una empresa que presta servicios de salud mental a toda la población

    Colombiana, dentro de sus principales servicios se encuentra el diagnostico de

    enfermedades de salud mental, consultoría a entidades del gobierno, colegios,

    universidades y organizaciones sobre problemáticas relacionadas a la salud mental,

    adicionalmente brinda terapia individual y grupal de manera virtual y presencial con

    un equipo multidisciplinario que se compone de psicólogos, médicos psiquiatrías,

    neuropsicólogos, trabajadores sociales, fisioterapeuta y fonoaudiólogos.

    Misión: Ofrecer servicios psicológicos que permitan mejorar la calidad de vida de la

    población, garantizando que dentro de la atención se brinde un excelente servicio,

    que sea pertinente con el cliente y que permita la formación de un tratamiento

    personalizado a corto, mediano y a largo plazo solventando todas las necesidades

    requirentes de la persona que consulta.

    Visión: Ser un centro de atención en salud mental reconocido a nivel nacional, que
    no solo sea un referente de atención terapéutica individual, sino que también brinde
    soluciones a todas los componentes en donde se desempeña la salud mental de las
    personas, como en lo político, social, cultural, en la investigación, en el desarrollo,
    entre otros.
    Para diseñar y desarrollar las diferentes interfases del proyecto utilizaremos figma,
    además utilizaremos el editor de código Visual Studio code donde desarrollaremos
    nuestra maquetación de la pagina web para el centro de salud mental Equilibrio
    utilizando HTML Y CSS para el diseño

    <!DOCTYPE html>
    <html lang="es">
    <head>
    <link rel="stylesheet" href="style.css">
    <img src="d:\Users\Yisel\Desktop\equilibrio\logo equilibrio.jpg"
    alt="Equilibrio" height="530" width="530">
    <meta charset="UTF-8">
    <title>Registrarse - Centro salud mental Equilibrio</title>
    <link rel="stylesheet" href="styles.css">
    </head>

    <body>
    <div class="container">
    <h1>Bienvenido al Centro de salud mental Equilibrio</h1>
    <form action="#" method="post">
    <input type="email" placeholder="Correo electronico" name="Correo
    electronico" required>
    <input type="email" placeholder="Usuario" name="Usuario" required>
    <input type="password" placeholder="Contraseña" name="password"
    required>
    <button type="submit">Registrarse</button>
    </form>
    <div class="social-login">
    <h2>O Registrarse con:</h2>
    <a href="#" class="google-btn">
    <img src="https://img.icons8.com/color/48/000000/google-logo.png"
    alt="Google Logo">
    Registrarse con con Google
    </a>
    <a href="#" class="facebook-btn">
    <img src="https://img.icons8.com/color/48/000000/facebook-new.png"
    alt="Facebook Logo">
    Registrarse con Facebook
    </a>
    </div>
    </div>
    </body>
    </html>

    body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f7f7f7;
    }

    .container {
    width: 400px;
    padding: 10px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    text-align: center;
    }

    h1 {
    margin-bottom: 20px;
    }

    input[type="email"],
    input[type="password"],
    button {
    width: 100%;
    margin-bottom: 10px;
    padding: 8px;
    border-radius: 4px;
    }

    button {
    background-color: #007bff;
    color: #fff;
    border: none;
    cursor: pointer;
    }

    button:hover {
    background-color: #0056b3;
    }

    .social-login {
    text-align: center;
    margin-top: 20px;
    }

    .google-btn,
    .facebook-btn {
    display: inline-block;
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    text-decoration: none;
    color: #fff;
    border-radius: 4px;
    }

    .google-btn img,
    .facebook-btn img {
    vertical-align: middle;
    margin-right: 10px;
    }

    .google-btn {
    background-color: #db4437;
    }

    .facebook-btn {
    background-color: #3b5998;
    }

    .google-btn:hover {
    background-color: #c1351d;
    }

    .facebook-btn:hover {
    background-color: #2d4373;
    }
     HTML

    <!DOCTYPE html>
    <html lang="es">
    <head>
    <link rel="stylesheet" href="style.css">
    <img src="d:\Users\Yisel\Desktop\equilibrio\logo equilibrio.jpg"
    alt="Equilibrio" height="500" width="500">
    <meta charset="UTF-8">
    <title>Iniciar sesión - Centro de salud mental Equilibrio</title>
    <link rel="stylesheet" href="styles.css">
    </head>

    <body>
    <div class="container">
    <h1>Bienvenido a Centro de salud mental Equilibrio</h1>
    <form action="#" method="post">
    <input type="email" placeholder="Usuario" name="Usuario" required>
    <input type="password" placeholder="Contraseña" name="password"
    required>
    <button type="submit">Iniciar sesión</button>
    </form>
    <div class="social-login">
    <h2>O Iniciar sesión con:</h2>
    <a href="#" class="google-btn">
    <img src="https://img.icons8.com/color/48/000000/google-logo.png"
    alt="Google Logo">
    Iniciar sesióne con con Google
    </a>
    <a href="#" class="facebook-btn">
    <img src="https://img.icons8.com/color/48/000000/facebook-new.png"
    alt="Facebook Logo">
    Iniciar sesión con Facebook
    </a>
    </div>
    </div>
    </body>
    </html>

     CSS

    body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f7f7f7;
    }

    .container {
    width: 400px;
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    text-align: center;
    }

    h1 {
    margin-bottom: 20px;
    }

    input[type="email"],
    input[type="password"],
    button {
    width: 100%;
    margin-bottom: 10px;
    padding: 8px;
    border-radius: 4px;
    }

    button {
    background-color: #007bff;
    color: #fff;
    border: none;
    cursor: pointer;
    }

    button:hover {
    background-color: #0056b3;
    }

    .social-login {
    text-align: center;
    margin-top: 20px;
    }

    .google-btn,
    .facebook-btn {
    display: inline-block;
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    text-decoration: none;
    color: #fff;
    border-radius: 4px;
    }

    .google-btn img,
    .facebook-btn img {
    vertical-align: middle;
    margin-right: 10px;
    }

    .google-btn {
    background-color: #db4437;
    }

    .facebook-btn {
    background-color: #3b5998;
    }

    .google-btn:hover {
    background-color: #c1351d;
    }

    .facebook-btn:hover {
    background-color: #2d4373;
    }

    También podría gustarte