Hola a todos y bienvenidos a este video sobre Crear y Prototipar Páginas, que se dividirá en 3 partes. Hoy nos enfocaremos en la primera etapa.
Esta parte consiste en prototipar. Es decir, identificar y crear los elementos que vamos a necesitar para diseñar la estructura principal o esqueleto de la página web.
Aquí en la pantalla, vemos el objetivo final que queremos alcanzar.
Cuando pasemos a Aptugo, veremos la Base de Datos que necesitamos ya definida. Y también encontraremos una única página que fue creada automáticamente por Aptugo por defecto, para gestionar datos, en este caso, coches. Aquí ya tenemos un coche cargado y es el mismo que tenemos en el diseño de Figma, lo que significa que tenemos el backend listo para crear una página exactamente igual a la que ves en la pantalla.
Comencemos y vayamos a Páginas y creemos una nueva página que llamaremos “Detalles del coche”. El pad será "detalles" y el nombre también será "detalles.tsx"
Después de esto, lo arrastramos y lo soltamos dentro del "Tablero" para que esté a la misma altura que "Coches". Y procedemos a Guardar y Construir.
Como puedes ver, si volvemos a esta parte y la actualizamos. Veremos que "Detalles del coche" aparece, que es una página en blanco porque aún no hemos definido nada en Aptugo.
Una vez que hemos visto esto, nuestro siguiente paso será el siguiente: si ingresamos a Aptugo en la página "detalles del coche", que está vacía, podemos ver que todas las páginas predeterminadas están divididas en 5 etapas. Antes de la renderización de la página, que consiste en lo que se verá antes de que la página se cargue, el encabezado de la página, el cuerpo, el pie de página y la renderización posterior de la página.
Básicamente, las dos primeras etapas, así como la última, se utilizan generalmente para generar código lógico y funcionalidad que no se verá visualmente en la página web.
Todos los elementos que vamos a usar para escribir, renderizar o mostrar cosas estarán en el cuerpo o en el pie de página. Así que primero volvemos a Figma y dividimos esto en 2, el Cuerpo y el Pie de página.
Dado que esta división ya está hecha, voy a mostrártelo directamente. Tenemos un cuadrado que contiene todo el cuerpo y un rectángulo que contiene el pie de página. Estas etapas ya están divididas en Aptugo, ya tenemos un Cuerpo y un pie de página construidos.
Lo que podemos hacer ahora es crear un contenedor para cada uno para evitar que sean más grandes de lo necesario. Elegimos la opción lg para que su ancho sea un tamaño de pantalla predeterminado.
Una vez hecho esto, volvemos al diseño o Figma y subdividimos las cajas rojas, en otras cajas más pequeñas, para ver cuántas secciones tendríamos dentro de cada caja roja. Tenemos el cuerpo dividido en dos y el pie de página en tres secciones.
Ahora volvemos a Aptugo y repetimos el proceso, solo que esta vez, usando divs, añadimos dos para las cajas naranjas en el Cuerpo, y tres en el pie de página. Volvemos al diseño una vez más, hemos terminado de dividir las cajas rojas y creado las naranjas.
Nuestro siguiente paso será dividir estas Cajas naranjas en cajas o divs aún más pequeños. Abordaremos esto en la segunda parte de este tutorial. ¡Espero que lo hayas disfrutado, y como siempre, gracias por ver!
. . .
Para más detalles, visita: www.aptugo.com