Mejorando el Diseño de Proyectos con Tailwind CSS

Clase 22 de 24 • Curso Básico de Testing con PHP y Laravel

Contenido del curso

Introducción

Conceptos

Proyecto

Conclusión

24
Testing y Validación en Proyectos PHP con Laravel
06:38 min

Tomar examen

Resumen

¿Cómo mejorar la apariencia de un proyecto web con Tailwind CSS?

El aspecto visual de un proyecto web es fundamental para captar y retener a los usuarios. Implementar un esquema visual coherente y atractivo no solo favorece la usabilidad, sino que también comunica profesionalismo y atención al detalle. En esta guía, exploraremos cómo utilizar el potente framework Tailwind CSS para transformar un proyecto básico en una interfaz moderna y amigable.

¿Qué es Tailwind CSS y cómo se instala?

Tailwind CSS es un framework de CSS que permite crear interfaces de usuario personalizadas de manera eficiente. A diferencia de los frameworks tradicionales que imponen un estilo definido, Tailwind es altamente flexible y proporciona utilidades para diseñar según las necesidades específicas de cada proyecto.

Instalación de Tailwind mediante CDN: Para comenzar, copia el enlace del CDN de Tailwind CSS desde su sitio oficial. La instalación es simple y consiste en pegar este enlace en la sección <head> de tu documento HTML.
```
<link href="https://cdn.tailwindcss.com" rel="stylesheet">
```
Preparación del entorno: Una vez agregado, tu proyecto está listo para aprovechar la personalización de estilos. Verifica que el archivo esté vinculado correctamente actualizando el navegador y revisando los estilos básicos.

¿Cómo configurar un diseño básico con Tailwind?

Una vez instalado Tailwind, es momento de comenzar a personalizar los elementos básicos del diseño. A continuación, detallamos cómo modificar los estilos de ciertos componentes claves como el body, contenedores y formularios.

Body: Empieza con el color de fondo y el padding.
```
<body class="bg-gray-100 py-4">
```
Contenedor: Para centrar y dar un estilo básico al contenedor principal.
```
<div class="max-w-lg mx-auto bg-white rounded-lg shadow p-4">
```

Formulario: Adapta el diseño del formulario para hacerlo visualmente más atractivo.

<form class="flex mb-4">
    <input class="rounded-l bg-gray-200 p-4 w-full border-0" placeholder="Nueva etiqueta">
    <button class="rounded-r bg-blue-500 text-white px-4">Agregar</button>
</form>

¿Cuál es el proceso para mejorar elementos individuales?

Con Tailwind, cada elemento puede ser mejorado y personalizado usando clases utilitarias. Aquí mostramos cómo hacerlo para títulos y botones de eliminación.

Título: Ajusta la apariencia usando bordes, padding y colores.

<h1 class="text-xl font-semibold py-2">Título del Proyecto</h1>

Botón de eliminación: Establece estilos visibles y distintivos.

<button class="px-4 py-2 rounded bg-red-500 text-white">Eliminar</button>

Recomendaciones para implementar los cambios

Al implementar cambios en el diseño, es crucial:

Pruebas: Realiza testing regularmente para asegurar que los cambios de diseño no afecten la funcionalidad.
Iteración: Trabaja iterativamente. Empieza con cambios básicos, visualiza el impacto y ajústalos según sea necesario.
Consistencia: Asegúrate de que el estilo sea coherente a lo largo de todo el proyecto.

Mensaje final para los estudiantes

La implementación de frameworks como Tailwind CSS te permite crear un diseño web atractivo y funcional sin complicaciones. No solo mejora la estética, sino que también facilita el proceso de mantenimiento y actualización a futuro. ¡Sigue explorando y no dudes en experimentar para encontrar la mejor configuración visual para tus proyectos!

Comentarios

Brian Sánchez Izquierdo

student•

Hola, si no quieres escribir todos los estilos del profe, puedes copiarlos del siguiente commit, también viene incluido el cdn de tailwind por si lo olvidaste:

https://github.com/AbnirHencazs/tag-tdd/tree/c535da1e2901607385d88b01137d06dab54bf280

Jorge Bou-saad

student•

Gracias estimado. Porque en verdad me iba a saltar esta parte por temas de tiempo y mi proyecto iba a quedar feito.

Jimmy Buriticá Londoño

student•

++Curso Tailwind en Platzi++

https://platzi.com/clases/tailwind-css/

Julian David Alzate Cuervo

student•

Es muy bueno el curso

KEVIN BRAYAN LUNA FIGUEROA

student•

Les dejo el maquetado de welcome.blade.php

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Laravel</title>
        <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
    </head>
    <body class="bg-gray-200 py-10">
        <div class="max-w-lg bg-white mx-auto p-5 rounded shadow">
            <form action="tags" method="POST" class="flex mb-4">
                @csrf
                <input type="text" name="name" class="rounded-l bg-gray-200 p-4 w-full outline-none" placeholder="Nueva etiqueta">
                <input type="submit" value="Agregar" class="rounded-r px-8 bg-blue-500 text-white outline-none">
            </form>
            <h4 class="text-lg text-center mb-4">Listado de Etiquetas</h5>
            <table>
                @forelse ($tags as $tag)
                <tr>
                    <td class="border px-4 py-2">{{ $tag->name }}</td>
                    <td class="px-4 py-2">
                        <form action="tags/{{ $tag->id }}" method="post">
                            @csrf
                            @method('delete')
                            <input type="submit" value="Eliminar" class="px-3 rounded bg-red-500 text-white">
                        </form>
                    </td>
                </tr>
                @empty
                    <tr>
                        <td>
                            <p>No hay etiquetas</p>
                        </td>
                    </tr>
                @endforelse
            </table>
        </div>
    </body>
</html>

Luis Cano

student•

Mi aporte no tiene nada que ver con TDD pero en tailwind es mejor usar la misma paleta de colores o acentos para obtener un mejor resultado.

En lugar de usar text-white en los botones podemos combinar asi:

bg-red-500 text-red-100

bg-blue-500 text-blue-100

Alex Maldonado

student•

Tailwind documentación: https://tailwindcss.com/docs/installation

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">

Cristian Acalo

student•

🦄✨Decidí conservar los colores de Laravel y hacer estilos responsivos. Así me quedó :3

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Laravel</title>
        <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
    </head>
    <body class="bg-gray-200 py-10">
        <div class="max-w-lg bg-white mx-auto p-5 rounded shadow">
            <form action="tags" method="POST" class="flex mb-4">
                @csrf
                <input type="text" name="name" class="rounded-l bg-gray-200 p-4 w-full outline-none" placeholder="Nueva etiqueta">
                <input type="submit" value="Agregar" class="rounded-r px-8 bg-blue-500 text-white outline-none">
            </form>
            <h4 class="text-lg text-center mb-4">Listado de Etiquetas</h5>
            <table>
                @forelse ($tags as $tag)
                <tr>
                    <td class="border px-4 py-2">{{ $tag->name }}</td>
                    <td class="px-4 py-2">
                        <form action="tags/{{ $tag->id }}" method="post">
                            @csrf
                            @method('delete')
                            <input type="submit" value="Eliminar" class="px-3 rounded bg-red-500 text-white">
                        </form>
                    </td>
                </tr>
                @empty
                    <tr>
                        <td>
                            <p>No hay etiquetas</p>
                        </td>
                    </tr>
                @endforelse
            </table>
        </div>
    </body>
</html>

Mejorando el Diseño de Proyectos con Tailwind CSS

Introducción

Testing con PHP Unit y Laravel en PHP

Pruebas Automatizadas para Cambios Seguros en Desarrollo Web

Testing de Proyectos Laravel con PHPUnit y Artisan

Pruebas Unitarias y Funcionales en Laravel con PHP Artisan

Conceptos

Verificación de Resultados en Pruebas Unitarias con PHPUnit

Testing de Helpers en PHP con PHPUnit

Pruebas Unitarias en Laravel: Mutadores y Campos Virtuales

Pruebas de Métodos Personalizados en PHP con Laravel

Testing de Carga de Archivos en Laravel

Creación de Formulario HTML para Carga de Imágenes en Servidor

Refactorización y Testing en Proyectos de Programación

Validación de Formularios y Testing en Laravel

Pruebas de Datos en Bases de Datos con PHP y Laravel

Proyecto

Metodología TDD en PHP: Creación y Pruebas Efectivas

Desarrollo de un Proyecto Sencillo con Enfoque en Testing

Pruebas HTTP en PHP con Artisan y Base de Datos

Test de Visualización de Datos en Tabla de Etiquetas

Configuración de Pruebas Unitarias para Crear Registros en Laravel

Eliminación de registros en base de datos con Laravel

Validación

Pruebas de Funcionalidad de Etiquetas en Laravel desde el Navegador

Mejorando el Diseño de Proyectos con Tailwind CSS

Pruebas Unitarias en PHP: Creación y Verificación de Campos Virtuales

Conclusión

Testing y Validación en Proyectos PHP con Laravel