Diseño de Área Pública con Imágenes y CSS en Tailwind

Clase 24 de 31 • Curso de Introducción a Laravel 9

Resumen

¿Cómo diseñar el área pública de un sistema con imágenes?

Para capturar la atención del usuario en un sistema web, un diseño atractivo y funcional es crucial. Además de una buena interfaz, es esencial agregar imágenes que complementen la estética y el propósito del sistema. En esta guía, aprenderás a integrar imágenes y trabajar con plantillas para mejorar el área pública de tu sistema.

¿Cómo descargar e incorporar imágenes?

Para empezar, selecciona y descarga imágenes que reflejen la identidad de tu proyecto. Por ejemplo:

Elegir imágenes apropiadas: Puedes utilizar recursos gratuitos en línea para elegir imágenes. En este caso, se seleccionó un elefante y otra imagen relevante para el desarrollo web.
Organización de archivos: Crea una carpeta específica dentro de tu proyecto para almacenar las imágenes, utilizando nombres significativos como logo.png o dev.png para diferenciarlas.

¿Cómo trabajar con la plantilla y CSS?

Una vez que las imágenes estén listas, es hora de incorporarlas al diseño mediante plantillas y CSS.

Importar el archivo CSS:
```
<link rel="stylesheet" href="CSS/app.css">
```
Esta línea asegura que las configuraciones de estilo se apliquen correctamente en la plantilla.

Estructurar el contenedor principal:

<div class="contenedor">
    <header class="header">
        <!-- Enlace con logo -->
        <a href="#"><img src="images/logo.png" alt="Logo"></a>
    </header>
</div>

¿Cómo aplicar clases de diseño con Tailwind CSS?

La personalización es clave. Usar clases con Tailwind CSS facilita el diseño responsivo y dinámico.

Configuración del header:

<header class="flex justify-between items-center py-4">

Configuración del div central:

<div class="flex items-center flex-grow gap-4">

Es crucial verificar que todas las clases utilizadas sean válidas en el documento CSS compilado. Si introduces clases nuevas, recuerda recompilar el archivo CSS ejecutando el comando en la línea de comandos del proyecto:

npm run dev

¿Qué problemas pueden surgir y cómo resolverlos?

A veces, al aplicar clases de Tailwind CSS, no se reflejan los cambios porque las clases no están compiladas. Asegúrate de:

Revisar las clases en el archivo CSS compilado: Si una clase como h-12 no se refleja, es posible que el archivo de configuración de tailwind.config.js esté omitiendo clases no usadas en momentos iniciales.
Recompilar si es necesario: Ejecutar nuevamente npm run dev actualizará las clases y resolverá inconsistencias en el estilo.

Con el adecuado uso de imágenes, plantillas y configuración CSS, puedes crear un área pública profesional y atractiva en tu sistema. Sigue aprendiendo, explora nuevas herramientas y técnicas para perfeccionar el diseño y funcionalidad de tus proyectos web. ¡El límite lo pones tú!

Harold Rodríguez

student•

En mi caso tuve error para visualziar la vista que indica el profesor así que me base en la documentación ya que el archivo webpack en mi caso no se encuentra, en cambio de ese archivo está vite.config.js, así que agregue en la ruta resources/js/app.js:

import '../css/app.css';

Luego de ello en el template puse

 @vite(['resources/css/app.css', 'resources/js/app.js'])

Les comparto la documentación donde me base para solucionar el problema de visulizar correctamente el template: https://laravel.com/docs/9.x/vite

Efrain Alejandro Cabrera Dura

student•

amigo muchas gracias, yo sabia que en algun punto iba a necesitar ayuda en ese webpack que no me aparecia jaja

Alejandro Navarro

student•

Me ocurrió lo mismo que a ti, gracias por el aporte!

Camilo Gonzalez

student•

Para laravel 9, hoy día, eso se soluciona incluyendo en el

<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">
    <title>Proyecto web</title>

    @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>

Andrés Felipe Lopez gomez

student•

Muchas gracias

Alexander Josue

student•

thanksss

Fer Torres

student•

En la nueva versión de Laravel ya no están los archivos y configuración exactamente como se muestra en esta clase. Leí la documentación de Laravel aquí y esto fue lo que me funcionó:

Cambios en resources/js/app.js:

import './bootstrap';
import '../css/app.css';

import Alpine from 'alpinejs';


window.Alpine = Alpine;

Alpine.start();

Cambios en sección head en template.blade.php:

<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">
    <title>Proyecto Web</title>

    @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>

Finalmente, en terminal ejecuté:

npm run dev

Funciona, se corrigen los estilos, pero se queda ejecutando en terminal. Así que cancelé ese proceso y mejor intenté con:

npm run build

Aquí está la imagen:

Y entonces no se bloquea mi terminal y la página ya se observa igual que la del profesor. El resto, lo hice exactamente como indicó el profesor; por supuesto, debes tener la carpeta y las imágenes correctamente en su directorio public.

¿Te funcionó? ¿Me faltó algo? Comenta aquí para ayudar al resto de compañeros.

Wilfredo Alexander Herrera Torres

student•

gracias por tu aporte hermano

Horacio Javier Tena Medrano

student•

...npm run build arruinó mí proyecto, aún me encuentro buscando como arreglarlo

Miguel Angel Ramos Lopez

student•

Tuve problemas porque no me cargaban el css y tambien lo solucione de la forma que indicaron los compañeros

Primero en template agregue esta linea.

<!doctype html> <head> {{-- … --}}

@vite(['resources/css/app.css', 'resources/js/app.js'])

</head>

Y luego en la terminal puse los siguientes comandos. npm run dev npm run build

Juvenal CH

student•

Tuve problemas con la imagen, la documentación indica

Debe agregar lo siguiente en el resources/js/app.jspunto de entrada de su aplicación: import.meta.glob([ '../imagenes/', '../fonts/', ]);

https://laravel.com/docs/9.x/vite#working-with-blade-and-routes

Juan David Rueda Quiroga

student•

En lugar de agregar el css con link lo que hice fue agregar

        @vite(['resources/css/app.css', 'resources/js/app.js'])

Esto porque uso vite

Camilo Orozco

student•

Hola, yo hice lo mismo. Mirando la documentación, recomiendan enlazar solo el js así:

<!doctype html>
<head>
    {{-- ... --}}
 
    @vite('resources/js/app.js')
</head>[]

Christian Alvarenga

student•

Esta sección me causa problemas ya que hace unos días atrás Laravel, sustituyó Webpack por Vite, ¿alguien sabe como solucionarlo?

Christian Alvarenga

student•

Lo he solucionado de la siguiente manera, en vez de agregar:

<link rel="stylesheet" href="{{ asset('img/logo.png') }}">

Deben reemplazarlo con una directiva de Blade y sería de la siguiente manera:

@vite(['resources/css/app.css', 'resources/js/app.js'])

Dejo unos links con información más detallada:

Christian Alvarenga

student•

Disculpen, tuve un error, este era el código que escribió el profesor entre las etiquetas head y que lo deben modificar por la directiva de @vite

<link rel="stylesheet" href="{{ asset('resources/css/app/.css') }}">

Fabiola Jessica Huancollo Chambi

student•

Lo bueno que con vite no es necesario compilar :)

Pedro Luis Méndez Yépez

student•

Hola a todos en mi proyecto no tenia webpack.mix.js ,pero podemos usar este comando reservado si estas usando vite.

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Laravel</title>
    @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>

Espero a mas de uno le sirva.

VICTOR CAUDILLO

student•

Tailwind se ve interesante, por lo que puedo entender compila solo las clases que necesitamos, no como por ejemplo bootstrap que teniamos todooo

Sergio Lira Camacho

student•

Les informo que la class h-12

class``="h-12"

no existe en mis estilos y solo existe la 16

class``="h-16"

A quien mas le sucedio

José Antonio Astorga y Ortega

student•

Lo mismo estaba buscando y parece que esa clase ya no esta disponible

Horacio Javier Tena Medrano

student•

La manera en que logre resolverlo fue:

resources/js/app.js

template.blade.php

ejecutar **npm run build **
ejecutar php artisan serve

NOTA: Tengan cuidado al comentar directivas blade ya que en varias ocasiones me han causado problemas, les recomiendo borrarlas para evitar cualquier incidencia.

Walter Omar Barrios Vazquez

student•

Excelente, había probado lo mismo con npm run dev y no funcionó y ahora con npm run build si.

Sergio Morgan

student•

Por alguna razon a mi archivo webpack le estaba faltando una instruccion require lo cual hacia que no se aplicaran los estilos. La tuve que agregar manualmente y ya funciona


mix.js('resources/js/app.js', 'public/js').postCss('resources/css/app.css', 'public/css', [
    require('postcss-import'), //  <- AGREGAR ESTA LINEA
    require('tailwindcss'),
    require('autoprefixer'),
]);

Víctor Hugo Rivas Sánchez

student•

Para incluir las imágenes según la documentación de Laravel:

Añadir en el app.js lo siguiente:`import.meta.glob([ '../images/',]);````js import.meta.glob([ '../images/',]);

En el template.blade.php llamar la imágen:<img src="{{ Vite::asset('resources/images/logo.png') }}" class="h-12">```js <img src="{{ Vite::asset('resources/images/logo.png') }}" class="h-12">

Henry Alejandro Taby Zenteno

student•

Para Laravel 11, en el archivo de vista "template.blade.php"

me funciono colocar

@vite(['resources/css/app.css', 'resources/js/app.js'])

En vez del que menciona en el video.

Después para poder compilar los cambios de CSS, ejecutar el siguiente comando en terminal :

$ npm run build

¡Espero sirva!

saludos

Henry Alejandro Taby Zenteno

student•

Para Laravel 11, en el archivo de vista "template.blade.php"

me funciono colocar

```

@vite(['resources/css/app.css', 'resources/js/app.js'])

```

En vez del que menciona en el video.

Después para poder compilar los cambios de CSS, se ejecuta:

```

npm run build ```

¡Espero sirva!

saludos

Henry Alejandro Taby Zenteno

student•

Para Laravel 11, en el archivo de vista "template.blade.php"

me funciono colocar

``` @vite(['resources/css/app.css', 'resources/js/app.js']) ```

En vez del que menciona en el video.

Después para poder compilar los cambios de CSS, se ejecuta:

``` npm run build ```¡Espero sirva!

saludos

Henry Alejandro Taby Zenteno

student•

Para Laravel 11, en el archivo de vista "template.blade.php"

me funciono colocar

@vite(['resources/css/app.css', 'resources/js/app.js'])
```En vez del que menciona en el video.

Después para poder compilar los cambios de CSS, se ejecuta:

```js
npm run build
```¡Espero sirva!

saludos

Diego Iván Cundapí León

student•

no me carga la imagen en el navegador, meti en la carpeta resources->css->images->logo.png y puse en la ruta src=" {{ asset('example-app/resources/css/images/logo.png')}} "

y no me carga la imagen, tambien intenté crear las carpetas dentro de public pero mismo resultado. Y no se que hacer ya busque en documentacion y videos pero nada sirve.

¿Alguien sabe que hacer?

Diego Iván Cundapí León

student•

Actualizando mi pregunta. Tienen que crear en la carpeta public una llamada images y adentro poner las imagenes.

Después en el template sobre el src pongan esto: src=" /images/elefante.png "

Romulo Felizola

student•

@vite(['resources/css/app.css', 'resources/js/app.js'])

para los que estamos en el 2024

y no los aparece el css,

el tema debe estar en que a nosotros ahora se nos installa VITE y no WEBPACK

Diseño de Área Pública con Imágenes y CSS en Tailwind

Introducción a Laravel

Desarrollo web con Laravel 9: instalación y configuración inicial

Estructura de Carpetas en Proyectos Laravel

Fundamentos de Laravel

Comandos básicos de Artisan en Laravel

Desarrollo de Rutas Web en Laravel: Creación y Configuración

Configuración de Vistas en Laravel con Blade

Creación de Plantillas en PHP para Vistas Eficientes

Controladores en Laravel: Organización de Rutas y Peticiones

Migraciones de Base de Datos en Laravel: Creación y Control de Versiones

Creación y Configuración de Modelos y Factories en Laravel

Manejo de Bases de Datos con Eloquent en Laravel

Relaciones de Tablas en Laravel: Usuarios y Publicaciones

Manos a la obra con nuestro proyecto

Revisión de Controladores y Vistas en Proyectos Web

Instalación y Configuración del Sistema de Inicio de Sesión en Laravel

Modificación de Rutas en Sistema de Inicio de Sesión Web

Configuración de Rutas y Controladores en PHP Artisan

Desarrollo de Vistas y Controladores con Paginación en PHP

Eliminar datos con formularios seguros en Laravel

Configuración Inicial para Creación y Edición de Registros en Platzi

Desarrollo de Formularios Seguros en Laravel

Creación y Configuración de Registros en Base de Datos

Método Update: Editar Formularios y Redirecciones en Platzi

Validación de Formularios y Manejo de Errores en Platzi

Validación de Registros Únicos en Controladores de PHP

Trabajemos en el diseño web de nuestro proyecto