Curso Django. Plantillas V. Plantillas incrustadas. Vídeo 9

Introduction to Django Templates

In this section, we will explore Django templates and two important concepts related to them: Django shortcuts module and embedded templates.

Django Shortcuts Module

• The Django shortcuts module provides useful tools to simplify code.

• One of the key methods in this module is render(), which takes the request, template name, and optional context dictionary as arguments.

• By using the render() method from the shortcuts module, we can significantly simplify our code.

Simplifying Code with Shortcuts Module

• Import the render method from the django.shortcuts module.

• Replace the lines where we create a template variable and render it with just one line using render().

• Pass the required parameters to render(): request, template name (in quotes), and context dictionary.

• This simplifies our code by reducing it to just a few lines.

Benefits of Using Shortcuts Module

• The code becomes more concise and easier to manage.

• We no longer need to manually load a context or specify a template for rendering.

• The same result is achieved with fewer lines of code.

Introduction to Embedded Templates

In this section, we will learn about embedded templates, which involve including one template within another. This concept is useful when building websites with multiple HTML documents that share common elements.

Why Use Embedded Templates?

• When creating a website, it is common for different HTML documents to contain shared elements such as navigation bars.

• Instead of duplicating these elements across multiple pages, we can create separate HTML files for each element and include them in other templates.

• This approach allows us to reuse code efficiently and maintain consistency throughout our website.

Implementing Embedded Templates in Django

• Create a separate HTML file for the shared element, such as a navigation bar.

• In the main HTML template, include the shared element using Django's template system.

• This can be done by referencing the name of the shared template within curly braces and percent signs, like % include 'navbar.html' %.

• By including templates in this way, we can easily add or modify shared elements without having to update every individual page.

Summary

In this section, we explored Django templates and two important concepts: the Django shortcuts module and embedded templates. The shortcuts module provides useful tools to simplify code, such as the render() method. By using this method, we can reduce our code and achieve the same results with fewer lines. Embedded templates allow us to include one template within another, making it easier to reuse code and maintain consistency across multiple HTML documents.

Embedding Templates in Django

In this section, the speaker explains how to embed templates in Django by creating a new template and incorporating it into an existing template.

Creating a New Template

• Create a new template by right-clicking on the "templates" folder and selecting "New File."

• Name the new file with an HTML extension, such as "bar.html."

• Construct the basic structure of the template by adding necessary HTML tags.

Building a Navigation Bar Template

• A navigation bar can be created using an unordered list (<ul>) element.

• Each list item (<li>) represents a link in the navigation bar.

• Copy and paste the list item code to add more links.

• Customize the links according to your needs, such as Home, Services, About Us, Contact, etc.

Embedding the Navigation Bar Template

• Determine where you want to embed the navigation bar template within your main template.

• Use the % include % tag followed by the name of the template file (e.g., "bar.html") inside double quotes.

• Save changes and refresh the browser to see the embedded navigation bar.

Styling the Navigation Bar

This section focuses on styling and enhancing the appearance of a navigation bar using CSS.

Identifying and Styling Elements

• Assign an attribute (e.g., class or id) to identify specific elements within the navigation bar. For example, assign "barra" as a class name for identification purposes.

• Apply CSS properties to these identified elements for styling purposes. For example:

• Set margin: 0; for no separation from neighboring elements.

• Set padding: 0; for no separation between content and container.

• Use list-style-type: none; to remove bullet points from the list.

• Use text-transform: uppercase; to convert text to uppercase.

Displaying the Navigation Bar Horizontally

• To display the navigation bar horizontally, use the display: inline; property for the list items (<li>).

• Add margin properties within each list item to create separation between them. For example, margin: 0 20px; for zero top and bottom margins and a 20-pixel left and right margin.

Embedding Multiple Templates

This section discusses embedding multiple templates within a main template in scenarios where websites consist of various templates.

Creating Multiple Templates

• Websites often have multiple templates, such as a navigation bar template, sidebar menu template, content template, etc.

• Each template can be created separately with its own HTML structure and styling.

Embedding Additional Templates

• Determine where you want to embed additional templates within your main template.

• Use the % include % tag followed by the name of each template file you want to embed.

• Save changes and observe how all embedded templates appear within the main template.

The speaker mentions that for more advanced effects like rollover or professional styling, viewers can refer to their CSS course.

New Section

In this section, the speaker discusses how to organize HTML templates in Visual Studio by creating folders and subfolders.

Organizing HTML Templates

• The speaker explains that it is common to organize templates into folders and subfolders.

• By moving the general template to the "plantillas" folder and the navigation bar to a folder called "superior," it becomes easier to manage the templates.

• It is possible to create additional subfolders within the "plantillas" folder, such as a folder named "lateral" for storing another template.

• However, when moving templates into subfolders, it is important to update the include tag in Django with the correct subdirectory path.

• For example, if we move the navigation bar template from the general template directory to a subfolder called "superior," we need to modify the include tag as follows: include "superior/barra"

• This allows for flexible organization of templates while ensuring they can be properly accessed by Django.

New Section

In this section, the speaker continues discussing how to organize HTML templates by using folders and subfolders.

Further Template Organization

• The speaker emphasizes that organizing templates into multiple levels of folders and subfolders is common practice.

• To illustrate this point, they suggest adding another subfolder within "superior."

• However, when doing so, it's important to note that if a template is moved from one directory to another, Django may not be able to find it anymore.

• To resolve this issue, simply update the include tag with the appropriate subdirectory path.

• For example: include "superior/barra"

• This approach allows for flexible organization of templates while ensuring they can still be accessed correctly.

New Section

In this section, the speaker explains how to include templates from subdirectories in Django.

Including Templates from Subdirectories

• When templates are organized into subdirectories, Django may not be able to find them by default.

• To include a template from a subdirectory, specify the subdirectory path within the include tag.

• For example: include "superior/barra"

• By using this approach, templates can be organized in any desired structure while still being accessible to Django.

• After making changes and updating the include tags accordingly, refreshing the browser will ensure that everything functions correctly.

New Section

In this section, the speaker concludes the video and provides additional information about their online academy.

Conclusion and Online Academy

• The video ends with a summary of what has been covered so far.

• Viewers are reminded that they can register for free on the speaker's online academy at "pildorasinformaticas.es."

• The academy offers various free courses categorized by topic.

• For those who want more personalized support, there is an option for offline courses with exercises, tests, doubt resolution, and certificates upon completion.