Maquetación del formulario

Clase 30 de 41 • Curso de HTML y CSS 2019

Victor Hugo Cortés Posada

student•

NOOOOOO!!!! para mi eso es un crimen en HTML, utilizar tantos

Usar demasiados saltos de línea ( ) Las etiquetas (line break) sólo deben usarse para insertar saltos de línea únicos en el medio de un párrafo para hacer que una palabra en específico vaya hacia abajo en una nueva línea. No se debe usar para hacer "huecos" entre los elementos, en vez de eso hay que dividir el texo en párrafos separados o ajustar los estilos de margen con CSS.

Alejo Fonseca

student•

Opino lo mismo

Camilo Vega

student•

concuerdo!

Eduardo Reyes

student•

Así quedó mi página del produto

En HTML

    <section class="pago_container">
      <div class="pago_cat_picture col-3"></div>
      <div class="pago_information col-6">
        <div class="pago_carrito_info pago_information_square">
          <p class="pago_plan">
            Vas a comprar tu plan Super Cat
          </p>
          <p class="pago_precio">$99.99 /mes</p>
          <p class="pago_entrega">Espera la entregan de 3 a 5 días hábiles</p>
        </div>
        <div class="pago_form pago_information_square">
          <form action="" class="formulario_de_pago">
            <label for="name">Nombre</label>
            <input type="text" name="Name" placeholder="Pon tu nombre" />
            <label for="email">Correo</label>
            <input
              type="text"
              name="email"
              placeholder="Pon tu Correo Electróico"
            />
            <label for="address">Dirección</label>
            <input type="text" name="address" placeholder="Pon tu Dirección" />
          </form>
        </div>
      </div>
    </section>

en CSS


.pago_cat_picture {
  background-image: url(https://images.pexels.com/photos/320014/pexels-photo-320014.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260);
  background-position: left;
  background-repeat: no-repeat;
  background-size: cover;
}

.pago_container {
  display: flex;
  height: 700px;
  color: white;
}

.pago_information_square {
  height: 80%;
  margin: auto 0px;
  background-color: var(--soft-yelow);
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 10px 10px 10px #00000029;
}

.pago_information {
  background-color: var(--main-yelow);
  display: flex;
}
.pago_carrito_info {
  width: 30%;
  margin-left: 10%;
  text-align: center;
  padding: 50px 5%;
  box-sizing: border-box;
}

.pago_plan {
  font-size: 40px;
  margin: 0px;
}

.pago_precio {
  width: 90%;
  margin: 0px auto;
  font-size: 26px;
  background-color: var(--mid-blue);
  padding: 20px 20px;
  border-radius: 30px;
}

.pago_entrega {
  font-size: 20px;
}

.pago_form {
  width: 50%;
  margin-left: 5%;
  padding: 50px 5%;
  box-sizing: border-box;
}

.formulario_de_pago {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin: 0px;
  padding: 0px;
}

.formulario_de_pago label {
  font-size: 40px;
}

.formulario_de_pago input {
  height: 40px;
  width: 100%;
  font-size: 20px;
  border: 0px;
  padding: 0px 15px;
  border-radius: 10px;
  box-sizing: border-box;
}

Pueden entrar a mi git pata ver el estado actual de proyecto https://github.com/JoEduardoReyes/HTML-CSS-2020-1

Michael Steven Viloria García

student•

Se ve muy grande el footer pero muy genial tu diseño :)

Sebastián Riátiga

student•

En el archivo de Rulo (producto.html) falta un meta tag: <meta content="width=device-width, initial-scale=1" name="viewport" /> A mí no me sirvieron las características responsive hasta que lo coloqué. Si les pasó lo mismo, prueben esta solución. Espero les ayude.

Miguel Angel Reyes Moreno

student•

Yo por eso uso Visual Studio Code, al guardar un archivo con extension html, solamente hace falta escribir "!" y automáticamente genera toda la estructura de una página HTML5

Viridiana Sánchez Ramírez

student•

Al principio nos dijo que escribieramos este meta:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

JOSE DANIEL RAMIREZ PABON

student•

No es una buena práctica el usar

Alejandro Tangarife Rivas

student•

Hola, compañeros. Aquí estoy por que les quier compartir un conocimiento más :D.

La etiqueta   no es buena práctica para agregar espacios entre elementos (Sí lo es entre textos), pero para elementos, cajas, etc es mejor utilizar herramientas de css directamente, como...margin.

Siempre digo...'Si vas a aprender algo, hazlo de la mejor manera desde el principio', así no te generará conflictos más adelante ;)

Usuario anónimo

user•

muy cierto, pueden usar **margin-top:50px; **o los que necesiten, y listo.

Victor Hugo Cortés Posada

student•

Me parece que debería utilizar mas la etiqueta de section

Angel Joaquín Velasco Gómez

student•

Siempre me he preguntado, el porque de la etiqueta section. Cuando debo usarla porque yo genero mucho div, pero no uso main, section y otras etiquetas html5.

Victor Hugo Cortés Posada

student•

En HTML5 se han incorporado muchas etiquetas que sirven para indicar qué son y cuál es el significado de los elementos que contienen dentro. Esas son las etiquetas semánticas, que ganan mucha importancia en el marco del HTML y de la composición de un documento web por ayudar a motores de búsqueda como Google a indexar más correctamente los contenidos de un sitio.

Daniel Alejandro Romero Chavez

student•

Hice esta sección son css grid

<!-- Aquí enpieza la sección principal de venta -->
    <div class="container">
        <div class="producto">
                <div class="content">
                        <div class="image_content">
                            <img src="images/box2.png" alt="">
                        </div>
                        <h2>Producto 1</h2>
                        <p>Miles de Productos hay en el mercado,pero 
				nada como una caja con un gatito</p>
                        
                    </div>
        </div>
        <div class="formulario">
            <form action="" class="form_formulario">
                <label for="">Nombre</label>
                <input class="input" type="text">
                <label for="">Mail</label>
                <input class="input" type="text">
                <label for="">Telefono</label>
                <input class="input" type="text">
                <button class="main_button">Confirmar Pago</button>
            </form>
        </div>

    </div>
    <!-- Aquí termina la sección principal de venta -->

este es el ccs ademas reutilice la parte de estilos,

.container {
    max-width: 900px;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(4, 25%);    
    grid-gap: 10px;
    min-height: calc(100vh - 100px);
}

.producto{
    grid-column-start:2 ;
    grid-column-end: 3;
    display: flex;
    justify-content: center;
    align-items: center;
        
}

.content{
    box-shadow:var(--box);
    padding: 10px;
    width: 100%;
    height: 280px;


}

.formulario{
    grid-column-start: 3;
    grid-column-end: 4;
    display: flex;
    justify-content: center;
    align-items: center;
}

.form_formulario{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    height: 300px;
    box-shadow:var(--box);
}

.form_formulario *{
    width: 80%;
}

.input{
    height: 20px;
}

seguro que podrán optimizarlo :)

Alejandro Sanchez

student•

Xq para contener las imagenes no usa???? <figure></figure>

Edward Steven Ramos Palacios

teacher•

No es algo obligatorio. Depende mas de tu propósito al hacer el maquetado.

Daniel Esteves

student•

Podrías o no usar <figure> pero ya que estamos siendo muy específicos semánticamente con HTML debemos usar las etiquetas que correspondan a nuestra información :muscle:

Marcelo Mendez

student•

Me parece genial la cantidad de cosas que podes hacer con el inspector

Jhean Pacheco

student•

Mejor seria usar margin top y bottom para esos espacios

Fernando Enrique Nuevo Alcalá

student•

Hola, la caja de gatitos me sale fuera del box que lo contiene aún usando exactamente el mismo código en CSS que Rulótico, le he dado muchas vueltas aún sin éxito, alguien que me ayude? :)

/* aquí empieza Ventas */
.modulo_pago{
  background-color: var(--white-color);
  box-shadow: var(--box);
  padding: var(--space);
}


.modulo_pago_images{
  max-width: 150px;
  text-align: center;
  margin: auto;
  width: 100%;
}

/* Aquí termina ventas */

Roger Carlos Ariel Alba

student•

hola!

la clase la escribiste correctamente en el HTML? tu CSS esta bien.

Fernando Enrique Nuevo Alcalá

student•

Hola Carlos, gracias!, este es mi HTML

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="css/grid.css">
  <link rel="stylesheet" href="css/animation.css">
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/estilos.css">
  <link rel="stylesheet" href="css/mobile.css">
  <title>Brand</title>
</head>
<body>
  <!-- Aquí empieza el navbar  -->
  <nav class="fadeInDown">
    <div class="brand_image">
      <img src="images/logo.png" alt="">
    </div>
    <div class="nav_options">
      <ul>
        <li><a href="#">Faqs</a></li>
        <li><a href="#">Producto y descripción</a></li>
      </ul>
    </div>
  </nav>
  <!-- Aquí acaba el navbar  -->

<!-- empieza formulario de ventas -->

<div class="container">
  <div class="row">
    <div class="col-4">
      <div class="modulo_pago">
        <div class="modulo_pago_images">
          <img src="images/box2.png" alt="">
        </div>
      <h3>Producto 1</h3>
      <p>Miles de productos hay en el mercado, pero nada como una caja con gatitos</p>
      </div>
    </div>
    <div class="col-8">
      <div class="modulo_pago">
        enrique
      </div>
    </div>
  </div>
</div>

<!-- inicio footer -->

<footer>
  <div class="option">
  Terminos y condiciones
  </div>
  <div class="option"><a href="#">contacto@gmail.com</a></div>
</footer>


<scrip src="scripts/script.js"></scrip>
</body>
</html>

Christian David Sánchez

student•

Para el css hay una metodología llamada BEM Es muy utll http://getbem.com/introduction/

Cristian Córdova

student•

Aplica tanto para HTML como para CSS. Y sí es muy utilizada por las empresas para consensuar sus proyectos de desarrollo

Aarón Fabricio Santa Cruz Valdez

student•

Los no me convence es mas fácil con css.

Kevin Alejandro Tovar Lamilla

student•

En el video se ve todo tan sencillo, yo lo intento y me surgen varios inconvenientes (pero al final logro solucionarlos)

Jorge Daniel Badillo Paz

student•

Me pasó con el tema de las grillas

Marianela Ruiz depablos

student•

Creo que no es muy buena practica usar br para hacer el espacio...

Héctor Aguilar Mogollan

student•

Asi es para nada es bueno utilizar br, pero es bueno tener todos los datos!!!

Gabriel Chorens

student•

such a bad practice when doing responsive

Miguel Alejandro Trigueros Mayorga

student•

como hacer para que el footer se quede pegado al final de la pantalla y este no dependa de la altura del Content? saludos!

Roger Carlos Ariel Alba

student•

Hola!

Se llama Sticky footer

Aquí puedes ver 5 formas de hacerlo.

Karla Elizabeth Valenzuela Rios

student•

Una vez un profesor me dijo que las etiquetas son mmala practica hoy en dia, alguien que me quiera responder o comentar algo al respecto?

Favio Sauto

student•

Como todo en el código depende 😁. La etiqueta tiene casos de uso muy específicos.

Lo que dice ++esta++ página es que generalmente esta etiqueta solo debería usarse si es que el contenido está intrínsecamente dividido en líneas. Algunos casos de uso por ejemplo son: las direcciones, poesías y muestras de código. Así si escribes una dirección, por ejemplo, puedes hacerlo todo dentro de una sola etiqueta con etiquetas dentro, en lugar de escribir X etiquetas con partes de la dirección u otras formas innecesarias de solucionar lo que soluciona.

Ejemplo:

<p>Calle P. Sherman, <br> Calle Wallaby Way 42, <br> Sydney.</p>

Te daría esto de forma sencilla: Calle P. Sherman, Calle Wallaby Way 42, Sydney.

Bryan Mendoza

student•

Sí, son malas prácticas ya que puedes simular un ya sea desde CSS ajustando la propiedad max-width del elemento y también puedes crear un párrafo para la primera línea del texto y otro para la segunda línea.

Espero haberte ayudado 😁

Jordy Kevin Tirado Torres

student•

en estos tipos de páginas es recomendable utilizar PUG como motor de plantilla te facilita mucha la vida

Fernando de Leon Gil

student•

En mi caso en vez de utilizar las etiquetas , utilice un padding en el div .row de 90% y con eso me sirve para venta.html, y producto.html separar cada una de las divisiones

.row { display: flex; max-width: 800px; margin: auto; padding: 90px;

CARLOS ALBERTO COMBITA

student•

Creo que se ve mejor a nivel de codigo esos br no parecieran ser la mejor practica

Maquetación del formulario

Internet

¿Dónde aprender HTML y CSS modernos?

Pasos para aprender HTML y CSS

¿Qué conocimientos necesito para tomar este curso?

¿Cómo se construye la tecnología web?

¿Cómo instalar ATOM?

Comprendamos Internet

Los básicos del web

¿Cómo funciona HTML?

Etiquetas y sus atributos

Reto 1: crea tu fiesta de gifs

¿Cómo funciona CSS?

¿Cómo funciona JavaScript?

Hola mundo y estructura del proyecto

Listado de las etiquetas más usadas

Construcción de un producto digital

Paper wireframe

¿Cómo instalar XD?

Diseño de interfaces

Maquetación de la NavBar

Maquetación de main_section y agregando estilos CSS

Maquetación de tarjetas de producto

Fuentes personalizadas y variables de CSS

Categorizando etiquetas según nuestra estructura en HTML

Reto 2: Maquetar el home del producto digital

Reglas responsive

Animaciones y transiciones

Integrando otras herramientas

Atributos especiales de las etiquetas para mejorar el funcionamiento de nuestros formularios

Librería vs Framework

Sistema de Grillas

Completando el Sistema de Grillas

Reto 3: implementación del sistema de grillas

Maquetación del formulario

Creación de formulario: inputs

Creación de formulario: botones

¿Cómo crear tu cuenta en Paypal?

Configuración del botón de pago con Paypal

Autofill del formulario de PayPal

Maquetación de pantalla de éxito y error

Deploy

Testing con el Navegador

Cómo crear tu cuenta en Github

Subiendo nuestro proyecto a Internet con Github

Conclusión

Conclusiones

Bonus

Librería vs Framework