"Simples é melhor que complexo"

Tim Peters

Criando uma aplicação web com Python de forma simples e eficiente.

Regis Santos

@rg3915

Regis do Python

"Mas você só sabe Python?"

Falem mal das linguagens, mas respeite as pessoas.

Por onde eu começo?

Desenvolvimento Web

Frontend

Vamos começar de novo?

Backend

Banco de dados

DevOps

Deploy e Hospedagem

Monolito

Django

  • ORM próprio
    • Se conecta vários bancos de dados de forma simples
  • Sistema de Roteamento (URL)
  • Painel de Admin
  • MTV
    • Models, Views e Templates
  • Template Engine (Render template)
    • E herança de templates
  • Segurança Integrada
    • XSS, CSRF, SQL injection, CSP

Milhares de bibliotecas de terceiros

  • Django Extensions
  • Django Channels
  • Django Ninja
  • Django Debug toolbar
  • Django-allauth
  • Django-import-export

djangopackages.org

Usem com moderação

"Simples é melhor que complexo"

Tim Peters

Modal

<html lang="pt-BR">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Modal Simples</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <button id="openBtn">Abrir Modal</button>

    <dialog id="modal">
      <span
        id="closeBtn"
        class="close"
        >&times;</span
      >
      <h2>Título do Modal</h2>
      <p>Este é um modal simples criado com a tag &lt;dialog&gt;!</p>
    </dialog>

    <script src="main.js"></script>
  </body>
</html>

Estilo

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    /* Centralização horizontal e vertical do botão */
    display: flex;
    justify-content: center; /* Centralização horizontal */
    align-items: center;     /* Centralização vertical */
    min-height: 100vh;
    font-family: Arial, sans-serif;
}

button {
    padding: 15px 30px;
    font-size: 18px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

button:hover {
    background-color: #0056b3;
}
dialog {
    position: fixed;
    inset: 0;        /* Define top, right, bottom, left como 0 */
    margin: auto;    /* Centralização horizontal e vertical */
    border: none;
    border-radius: 8px;
    padding: 30px;
    max-width: 500px;
    width: 90%;
    height: fit-content; /* Altura ajustada ao conteúdo */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Backdrop (fundo escuro) do dialog */
dialog::backdrop {
    background-color: rgba(0, 0, 0, 0.5);
}

.close {
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    line-height: 1;
}
.close:hover {
    color: red;
}
h2 {
    margin-bottom: 15px;
}

JavaScript

const modal = document.getElementById("modal");
const openBtn = document.getElementById("openBtn");
const closeBtn = document.getElementById("closeBtn");

// Abrir modal
openBtn.addEventListener("click", () => {
    // Método nativo do navegador para <dialog>
    modal.showModal();
});

// Fechar modal ao clicar no X
closeBtn.addEventListener("click", () => {
    // Método nativo do navegador para <dialog>
    modal.close();
});

// Fechar modal ao clicar fora (no backdrop)
modal.addEventListener("click", (e) => {
    if (e.target === modal) {
        modal.close();
    }
});

TailwindCSS

<html lang="pt-BR">
  <head>
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body class="bg-gray-50">
    <div
      class="max-w-screen-xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8 lg:flex lg:items-center lg:justify-between"
    >
      <h2
        class="text-3xl leading-9 font-extrabold tracking-tight text-gray-900 sm:text-4xl sm:leading-10"
      >
        Ready to dive in?
        <br />
        <span class="text-indigo-600">Start your free trial today.</span>
      </h2>
      <div class="mt-8 flex lg:flex-shrink-0 lg:mt-0">
        <div class="inline-flex rounded-md shadow">
          <a
            href="#"
            class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base leading-6 font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-500 focus:outline-none focus:shadow-outline transition duration-150 ease-in-out"
          >
            Get started
          </a>
        </div>
      </div>
    </div>
  </body>
</html>

Pico CSS

<html lang="pt-BR" data-theme="light">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Modal com Pico CSS</title>
    <!-- Pico CSS - Framework CSS minimalista -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
  </head>
  <body class="container">
    <button onclick="document.querySelector('dialog').showModal()">
      Abrir Modal
    </button>

    <dialog>
      <article>
        <header>
          <span
            class="close"
            onclick="document.querySelector('dialog').close()"
          ></span>
          <h2>Título do Modal</h2>
        </header>
        <p>Modal com Pico CSS + JavaScript inline!</p>
        <p>Usando showModal() e close() - métodos nativos do dialog.</p>
      </article>
    </dialog>
  </body>
</html>

Simples é melhor que complexo

By Regis Santos

Made with Slides.com

Simples é melhor que complexo

Como desenvolver um sistema web com Python de forma simples e eficiente.

  • 33

More from Regis Santos