Configuración de Plantillas Blade en Visual Studio Code

Contenido del curso

Introducción

Proyecto con Laravel 8

Conclusión

Bonus

21
Consejos para Dominio de Laravel y Desarrollo Profesional
03:00 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:008:21

Configuración de Plantillas Blade en Visual Studio Code

Curso de Introducción a Laravel 8

Clase 10 de 21

Clase 10 / 21

Recursos

¿Cómo completar nuestro sistema de plantillas en Laravel?

El diseño de sistemas de plantillas es una habilidad invaluable para cualquier desarrollador web que busque optimizar la estructura y presentación de sus aplicaciones. En esta clase, vamos a concluir el diseño de nuestro sistema utilizando Laravel, una de las herramientas más poderosas para desarrolladores PHP. Acompáñame en este viaje técnico para crear la base de un sitio web bien estructurado con funcionalidades modernas.

¿Cómo configurar el header y el footer en Blade?

Para establecer una estructura básica en tu aplicación, primero configuramos el encabezado y el pie de página (header y footer) utilizando HTML5 dentro de Blade, la potente herramienta de plantillas de Laravel. La creación de un diseño con líneas limpias y sombras sutiles puede mejorar significativamente la estética de tu sitio. Aquí están algunos pasos simples que seguimos:

Header con línea y sombra:

<header>
    <div class="bg-blue-900 py-1">
        <!-- Contenido del header -->
    </div>
</header>

Navegación e imagen isotipo:

Eventualmente, añadimos una navegación sencilla apuntando a la ruta de inicio. Si aún no tienes una imagen, asegúrate de crear la carpeta correspondiente y añadirla:
```
<nav>
    <a href="{{ route('home') }}">
        <img src="{{ asset('imagenes/isotipo-platzi.png') }}" class="h-8 mx-auto">
    </a>
</nav>
```

Footer con condicional de usuario logueado:
Creamos un pie de página que varía su contenido en función del estado de inicio de sesión del usuario.

<footer class="py-4 text-center">
    @auth
        <a href="{{ url('dashboard') }}" class="text-sm text-gray-700">Dashboard</a>
    @else
        <a href="{{ route('login') }}" class="ml-4">Login</a>
        <a href="{{ route('register') }}">Register</a>
    @endauth
</footer>

¿Cómo manejar rutas y enlaces correctamente en Laravel?

Gestionar rutas y enlaces de forma óptima es esencial para una navegación fluida. Debes asignar nombres a tus rutas para evitar errores y permitir una referencia sencilla y limpia desde tus vistas. Usa route para obtener la URL nombrada:

Route::get('/', function () {
    return view('welcome');
})->name('home');

¿Cómo utilizar condicionales Blade basadas en autenticación?

El uso de condicionales en Blade permite personalizar la experiencia del usuario. Aquí se hace uso de @auth y @else para distinguir el contenido visible dependiendo del estado de autentificación del usuario:

Usuari@ autenticad@: se presenta un enlace a su panel de control.
Usuari@ no autenticad@: se muestran opciones para iniciar sesión o registrarse.

¿Es necesario un sistema de caché para las imágenes?

Aunque el caché puede acelerar la carga haciendo que elementos repetitivos se carguen más rápidamente, es crucial asegurarse de que las imágenes estén correctamente posicionadas en tu estructura de carpetas. Un simple arrastre al directorio public funcionará inicialmente:

// Asegúrate de colocar imágenes en la carpeta correcta.
public/imagenes/isotipo-platzi.png

¿Cómo asegurar el correcto funcionamiento de funciones PHP dentro de Blade?

Para ejecutar funciones PHP dentro de Blade, siempre envuélvelas en las llaves dobles típicas de Blade:

{{ URL::to('login') }}

Esto garantiza que las funciones se interpreten correctamente y no como texto literal. Este paso es fundamental para asegurar la correcta ejecución de las funcionalidades de Laravel.

Ahora que has añadido estas configuraciones a tu plantilla, estás listo para expandir tu aplicación y seguir mejorando su funcionalidad y apariencia. ¡Adelante, el viaje del aprendizaje es continuo y apasionante!

Luis Hereñu

Hace 5 años

Hola cuando escribo el codigo siguiente:

        <nav class="lg-blue-500 py-2">
            <a href="{{ route('home')}}">
                home
            </a>

no me aparece de color azul sigue blanco, pero si aparece la sombra

<h1 class="text-3xl text-green-600 mb-2 uppercase">ultimos cursos</h2>

con este codigo no me aparece la letra grande se ve mas chico que el resto.

no se si hay que configurar algo en el archivo: tailwind.config.js estoy trabado aca no hay forma de que funcione me podrian ayudar

Eduardo Venegas Rivera

Hace 5 años

Tienes un typo en las clases del div es bg-blue-600. Te dejo el código por si te sirve.

<header class="shadow-lg">
            <div class="bg-blue-900 py-1">
                <nav class="bg-blue-800 py-2">
                    <a href="{{ route('home') }}">
                        <img src="{{ asset('images/isotipo-platzi.png') }}" 
                            class="h-8 mx-auto" 
                            alt="Platzi isotipo">
                    </a>
                </nav>
            </div>
</header>

Larry Cárdenas Zavaleta

Hace 5 años

Yo tengo el mismo problema pudiste solucionarlo? Me aparece el fondo blanco

<header class="shadow-lg">
    <div class="bg-blue-900 py-1"></div>
    <nav class="bg-blue-800 py-2">
      <a href="{{ route('home') }}">
        <img src="{{ asset('images/isotipo-platzi.png') }}" alt="" class="h-8 mx-auto">
      </a>
    </nav>
  </header>

Comentarios (24)24 comentarios

Carlos Eduardo Gomez García

Hace 6 años

Abel da Cunha

Andrea Elizabeth Ortiz Soriano

Diego Antonio Briones Martínez

Julian David Alzate Cuervo

Jean Parra

Eduardo Bueno Lopez

UTEC Ventures

David Alejandro Ayala Rizo

María Sierra

Jimmy Buriticá Londoño

Andrés Felipe Lopez gomez

David Rodriguez

Hace 4 años

Julio Cesar Labrador Rosales

Josué Israel Esquivel Garza

carlos caro caro

Hace 3 años

Eday Alix González Manjarrés

Hace 2 años

PABLO ANDRÉS AGÜERO

José David Diaz Lora

Christian Alvarenga

Kenneth Angulo L

George M

Jhon Marco Achata Limachi

Brazzini OC

Héctor Antonio Jiménez Manzo

ANGEL FERNANDO LIZCANO NOVOA

Germán Alejandro Niño

Juan David Bobadilla

Cesar Arion Espinosa Méndez

Erick Alejandro Graterol Barico

Introducción

Curso Renovado de Laravel: Nuevas Herramientas y Conocimientos

Proyectos modernos con Laravel 8 y JetStream

Curso de Laravel 6: Soporte a Largo Plazo y Migración a Nuevas Versiones

Instalación y uso de JetStream en Laravel con Blade y TailwindCSS

Proyecto con Laravel 8

Creación de Proyecto Web con Laravel 8 y Tailwind CSS

Instalación y Configuración de Laravel 8 con Tailwind CSS

Creación de Datos Semilla en Laravel con Faker

Configuración de Rutas y Vistas en Laravel con JetStream

Creación de Plantillas Web con Blade y Tailwind CSS en Laravel

Configuración de Plantillas Blade en Visual Studio Code

Creación de Componentes Dinámicos con Livewire en Laravel

Creación de Campos Virtuales en Componentes con Tailwind CSS

Creación de Controladores y Rutas en Laravel 8

Rutas dinámicas y maquetación de cursos en PHP con Laravel

Configuración de Listado de Lecciones en Visual Studio

Configuración de Cursos Similares en Visual Studio

Creación y Uso de Componentes Blade en Laravel

Personalización de Elementos en JetStream con Visual Studio

Conclusión

Personalización de Vistas en Laravel con JetStream y Livewire

Desarrollo de Aplicaciones con Laravel 8 y JetStream

Bonus

Consejos para Dominio de Laravel y Desarrollo Profesional

Configuración de Plantillas Blade en Visual Studio Code

Progreso del curso

Introducción

Proyecto con Laravel 8

Conclusión

Bonus

Recursos

Recursos