Diseñando el layout

Creando un diseño

Proceso de diseño

Diseñar es un aspecto fundamentan antes de crear las páginas
Para crear un proyecto debemos crear previaemnte los mockups o Prototipados de pantallas
Posteriormente hemos de crear las páginas usando los estilos adecuados para conseguir los diseños previamente prototipados, esto implicará usar html y css Para crear los diseños se usan herramientas gráficas de prototipado, y para el css normalmente usaremos algún fremework tipo Bootstrap o tailwindcss

Herramientas para el diseño

Vamos a usar Balsamiq porque disponemos de licencia estudiante en el centro
Existen varias herramientas alternativas:

1. Pencil Project:
   • Pencil Project es una herramienta de prototipado de código abierto que te permite crear mockups de manera sencilla. Es fácil de usar y ofrece una variedad de elementos predefinidos.
2. MockFlow:
   • MockFlow es una plataforma en línea que ofrece una herramienta de diseño de wireframes y mockups. La versión gratuita tiene algunas limitaciones, pero aún así proporciona funcionalidades útiles.
3. Balsamiq Cloud (versión gratuita) ):
   • Balsamiq, conocido por su aplicación de escritorio, también ofrece una versión en línea gratuita llamada Balsamiq Cloud que permite crear mockups y wireframes.
4. Figma:
   • Figma es una herramienta de diseño colaborativo en línea que permite crear mockups, wireframes y prototipos. Tiene una versión gratuita con muchas funcionalidades.
5. Wireframe.cc:
   • Wireframe.cc es una herramienta simple y fácil de usar para crear wireframes rápidos y sencillos. Puedes comenzar a usarla directamente en el navegador.

Laravel como fullstack

Laravel es un poderoso framework de backend.

Con Laravel, es posible realizar desarrollos web full-stack . Esto significa que este framework nos habilita para gestionar tanto el backend como el frontend de una aplicación web.
Así, Laravel se convierte en una solución integral que permite implementar todas las facetas del desarrollo web, desde la lógica del servidor hasta la interfaz de usuario.

Recuerda

Laravel Permite integrar de forma agnóstica cualquier herramienta para el front.

En el proceso de instalación, se instala tailwindcss como framework del css, pero lo podemos cambiar

Instalación de Tailwind: framework de css

Introducción

Tailwind CSS es un poderoso framework de estilos de CSS que se puede utilizar de manera efectiva con Laravel.

La simplicidad y flexibilidad de Tailwind permiten una integración fluida con proyectos Laravel, y es común ver su uso en conjunción con este framework de PHP.

Muchos paquetes y recursos integrados en el ecosistema de Laravel incorporan Tailwind CSS como herramienta preferida para la estilización de componentes y diseños, por ese motivo lo vamos a utilizar en este curso.

Instalación

Para la instalación necesitamos herramientas para gestionar paquetes del cliente node y npm, y vamos a usar vite como herramienta de compilación (traspilación) de ficheros en el frontend

Node y npm

Node

1. Descarga e instala Node.js desde el sitio web oficial.

Antes de integrar Tailwind CSS en tu proyecto Laravel, necesitarás tener Node.js instalado. node y npm son Gestores de paquetes para el front Van a crear un fichero llamado pakage.json (vs composer.json)

npm install

Al ejecutar npm install , se creará en el proyecto una carpeta llamada node_modules , donde se instalarán los paquetes especificados en el fichero json.
Este directorio node_modules tampoco hay que subir a git, ya que lo podremos generar a partir del fichero pakage.json .
Su instalación es sencilla. Una vez instalado cerramos el terminal y al volverlo a abrir, ya lo podemos utilizar.

Tailwindcss

Tailwindcss

Vite

Vite

Vite en un proyecto Laravel es un moderno entorno de construcción frontend que proporciona una compilación (transpilación)rápida y eficiente de los recursos del front para ponerlos disponibles en ejecución.

Vite , por ejemplo, transpila archivos SCSS o LESS a CSS , procesa las directivas de Tailwind CSS para generar clases CSS utilizables .

Además, compila componentes de Vue o React a JavaScript , facilitando su ejecución en el navegador.

Diseño del layout

Planteamos el siguiente layout general

Para conseguirlo escribimos el siguiente código

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

<!doctype html>
<html lang="en">
   <head>
       @vite(['resources/css/app.css', 'resources/js/app.js'])
       <title>Document</title>
   </head>
   <body>
      <header class="lg:hidden bg-header flex flex-col justify-center items-center  py-2 space-y-1">
         HEADER MÓVIL
      </header>
      <header class="hidden lg:flex h-15v bg-header flex flex-row justify-center items-center">
         HEADER DESKTOP
      </header>
      <nav>
          <nav class="hidden lg:flex h-10v bg-nav flex flex-row justify-start items-center space-x-2">
            NAV MÓVIL
          </nav>
          <nav class="lg:hidden bg-nav flex flex-col justify-start space-y-1 px-2">
            NAV DESKTOP
          </nav>
      </nav>
      <main class="h-65v bg-main">
          @yield("contenido")
      </main>
      <footer  class="h-10v bg-footer footer items-center p-4 bg-neutral text-neutral-content">
         FOOTER          
      </footer>
   </body>
</html>

Diseño de la cabecera header

Escribimos el siguiente código

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

 <header class="lg:hidden bg-header flex flex-col justify-center items-center  py-2 space-y-1">
        <img class="h-3/5" src="{{asset("images/logos/nett_logo.png")}}" alt="logo nett">
        <button class="h-1/5 w-full btn bg-main "> Acceder</button>
        <button class="h-1/5 w-full btn  bg-main">Registrar</button>
    </header>
    <header class="hidden lg:flex h-15v bg-header flex flex-row justify-center items-center">
        <img class="w-1/5 max-h-full w-auto  p-5 " src="{{asset("images/logos/nett_logo.png")}}" alt="logo nett">
        <div class="w-3/5 flex justify-center items-center">
            <h1 class="text-3xl text-white h-auto max-w-full truncate ">APLICACIÓN EJEMPLO LARAVEL</h1>
        </div>
        <div class=" w-1/5 h-auto max-w-full flex items-center space-x-4 ">
            <button class="btn glass  text-white"> Acceder</button>
            <button class="btn  glass text-white">Registrar</button>
        </div>
    </header>

Diseño de la sección de menú: nav

route

routes/web.php

Diseño de la sección de principal : main

En este caso vamos a escribir el contenido de una página landing page

Para ello usaremos de la librería Daisy , el componente Hero

home.blade.php

Establece una página de hereda de otra (un layout)

Para establecer una sección dónde se aportará contenido en la página que herede de ella

<!-- raw HTML omitted -->

Diseño footer

footer

landing page

footer