One place for hosting & domains

      Usando

      Como impedir quebras de linha usando CSS


      Introdução

      Os desenvolvedores geralmente gostam de quebrar o texto em uma página Web. A quebra de texto restringe o texto de certa forma e impede problemas de design. A quebra de texto pode também impedir a rolagem horizontal. Mas há momentos em que é desejável que blocos de texto permaneçam na mesma linha, independentemente do comprimento. É possível evitar quebras de linha e a quebra de texto para elementos específicos usando a propriedade white-space do CSS.

      Neste tutorial, você irá estilizar o mesmo bloco de texto de quatro maneiras diferentes, primeiro com quebras de linha e então três vezes sem quebras de linha:

      Medusafish banded killifish convict blenny saury threadsail beluga sturgeon. Indian mul mora cisco masu salmon, roosterfish requiem shark longnose lancetfish bluefish red snapper Sacramento splittail giant danio.

      Medusafish banded killifish convict blenny saury threadsail beluga sturgeon. Indian mul mora cisco masu salmon, roosterfish requiem shark longnose lancetfish bluefish red snapper Sacramento splittail giant danio.

      Medusafish banded killifish convict blenny saury threadsail beluga sturgeon. Indian mul mora cisco masu salmon, roosterfish requiem shark longnose lancetfish bluefish red snapper Sacramento splittail giant danio.

      Medusafish banded killifish convict blenny saury threadsail beluga sturgeon. Indian mul mora cisco masu salmon, roosterfish requiem shark longnose lancetfish bluefish red snapper Sacramento splittail giant danio.

      Isso irá lhe dar várias opções para quebrar ou não o seu texto.

      Pré-requisitos

      Para completar este tutorial, você precisará de:

      Passo 1 — Prevenindo e forçando quebras de linha em CSS

      Neste passo, será criado uma folha de estilos com três classes diferentes. Cada uma irá lidar com quebras de linha de maneira diferente: a primeira irá quebrar o texto da forma padrão, enquanto a segunda e terceira irão forçar o texto a não criar uma nova linha e quebrar.

      Primeiro, crie e abra um arquivo chamado main.css usando o nano ou o seu editor preferido:

      Adicione o conteúdo a seguir, que irá introduzir três classes CSS que usam diversas propriedades, incluindo a white-space:

      ./main.css

      .sammy-wrap {
          border-radius: 6px;
          background-color: aliceblue;
          border: 2px dashed gray;
          max-width: 70%;
          padding: 1em;
          margin-bottom: .4em;
      }
      .sammy-nowrap-1 {
          border-radius: 6px;
          background-color: aliceblue;
          border: 2px dashed gray;
          max-width: 70%;
          padding: 1em;
          margin-bottom: .4em;
          white-space: nowrap;
      }
      .sammy-nowrap-2 {
          border-radius: 6px;
          background-color: aliceblue;
          border: 2px dashed gray;
          max-width: 70%;
          padding: 1em;
          margin-bottom: .4em;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
      }
      

      Sua primeira classe é .sammy-wrap. Ela define seis propriedades de CSS comuns, incluindo border-radius, background-color, border max-width, padding e margin-bottom. Essa classe irá criar uma caixa visual, mas não define nenhuma propriedade especial de quebra de texto. Isso significa que ela irá quebrar linhas da maneira padrão.

      A sua segunda classe é .sammy-nowrap-1. Ela define a mesma caixa que .sammy-wrap, mas dessa vez é adicionada outra propriedade: white-space. A propriedade white-space possui diversas opções, sendo todas elas responsáveis por definir como tratar o espaço em branco dentro de um dado elemento. Aqui, você definiu white-space para nowrap, o que impede todas as quebras de linha.

      Sua terceira classe é .sammy-nowrap-2. Ela adiciona white-space e duas propriedades adicionais: overflow e text-overflow. A propriedade overflow lida com o scrollable overflow, que ocorre quando o conteúdo dentro de um elemento se estende para além das bordas desse elemento. A propriedade overflow pode tornar esse conteúdo rolável, visível ou oculto. Você está definindo overflow para hidden e então usando a propriedade text-overflow para adicionar ainda mais personalização. O text-overflow pode ajudar a sinalizar ao usuário que o texto adicional permanece oculto. Você definiu ela para ellipsis, de forma que sua linha não irá quebrar nem estender-se para além da caixa. O CSS irá ocultar o overflow e sinalizar o conteúdo oculto com um ....

      Salve e feche o seu arquivo.

      Agora que você tem uma folha de estilos, tudo está pronto para criar um arquivo HTML pequeno com um texto de amostra. Em seguida, você irá carregar a página Web em um navegador e inspecionar como o CSS é capaz de impedir quebras de linha.

      Passo 2 — Criando o arquivo HTML

      Com suas classes CSS definidas, aplique-as em algum texto de amostra.

      Crie e abra um arquivo chamado index.html em seu editor de preferência. Certifique-se de colocá-lo na mesma pasta que main.css:

      Adicione o conteúdo a seguir, que irá associar o main.css como sua stylesheet e então aplicar suas classes a um bloco de texto de amostra:

      ./index.html

      <!DOCTYPE HTML>
      <html>
      <head>
      <meta charset="UTF-8">
      <title>How To Prevent Line Breaks with CSS</title>
      <link href="https://www.digitalocean.com/community/tutorials/main.css" rel="stylesheet">
      </head>
      
      <body>
      <p class="sammy-wrap"    > Medusafish banded killifish convict blenny saury threadsail beluga sturgeon. Indian mul mora cisco masu salmon, roosterfish requiem shark longnose lancetfish bluefish red snapper Sacramento splittail giant danio.</p>
      
      <p class="sammy-nowrap-1"> Medusafish banded killifish convict blenny saury threadsail beluga sturgeon. Indian mul mora cisco masu salmon, roosterfish requiem shark longnose lancetfish bluefish red snapper Sacramento splittail giant danio.</p>
      
      <p class="sammy-nowrap-2"> Medusafish banded killifish convict blenny saury threadsail beluga sturgeon. Indian mul mora cisco masu salmon, roosterfish requiem shark longnose lancetfish bluefish red snapper Sacramento splittail giant danio.</p>
      
      <p class="sammy-wrap"    > Medusafish&nbsp;banded&nbsp;killifish&nbsp;convict&nbsp;blenny&nbsp;saury&nbsp;threadsail&nbsp;beluga&nbsp;sturgeon.&nbsp;Indian&nbsp;mul&nbsp;mora&nbsp;cisco&nbsp;masu&nbsp;salmon,&nbsp;roosterfish&nbsp;requiem&nbsp;shark&nbsp;longnose&nbsp;lancetfish&nbsp;bluefish&nbsp;red&nbsp;snapper&nbsp;Sacramento&nbsp;splittail&nbsp;giant&nbsp;danio.</p>
      </body>
      </html>
      

      Foi atribuído seu estilo de quebra de texto padrão ao primeiro bloco de texto, seu estilo nowrap ao segundo e nowrap, que está hidden com ellipsis ao terceiro. Foi atribuído sammy-wrap à quarta amostra, mas a quebra de texto padrão está sendo substituída inserindo espaços não separáveis (&nbsp;) diretamente no HTML. Se for necessário evitar quebras de linha em uma situação única, então espaços não separáveis podem fornecer uma solução rápida.

      Abra o index.html em um navegador Web e veja seus resultados. Seus quatro blocos de texto aparecerão desta forma:

      Medusafish banded killifish convict blenny saury threadsail beluga sturgeon. Indian mul mora cisco masu salmon, roosterfish requiem shark longnose lancetfish bluefish red snapper Sacramento splittail giant danio.

      Medusafish banded killifish convict blenny saury threadsail beluga sturgeon. Indian mul mora cisco masu salmon, roosterfish requiem shark longnose lancetfish bluefish red snapper Sacramento splittail giant danio.

      Medusafish banded killifish convict blenny saury threadsail beluga sturgeon. Indian mul mora cisco masu salmon, roosterfish requiem shark longnose lancetfish bluefish red snapper Sacramento splittail giant danio.

      Medusafish banded killifish convict blenny saury threadsail beluga sturgeon. Indian mul mora cisco masu salmon, roosterfish requiem shark longnose lancetfish bluefish red snapper Sacramento splittail giant danio.

      Você personalizou suas propriedades CSS para impedir ou permitir quebras de linha de quatro maneiras diferentes com sucesso.

      Conclusão

      Neste tutorial, você usou o CSS para impedir quebras de linha em um bloco de texto. Você estilizou o texto dentro de uma caixa e então adicionou a propriedade white-space para substituir a quebra de texto padrão. Para aprender mais sobre o manuseamento da quebra de texto e do espaço em branco, considere explorar toda a propriedade white-space do CSS.



      Source link

      Cómo desarrollar un sitio web Drupal 9 en su equipo local usando Docker y DDEV


      El autor seleccionó la organización Diversity in Tech Fund para que reciba una donación como parte del programa Write for DOnations.

      Introducción

      DDEV es un herramienta de código abierto que utiliza Docker para crear entornos de desarrollo locales para muchos marcos PHP diferentes. Con el poder de la creación de contenedores, DDEV puede simplificar de forma significativa la forma en que trabaja en múltiples proyectos que utilizan múltiples pilas tecnológicas y múltiples servidores en la nube. DDEV incluye plantillas para WordPress, Laravel, Magento, TYPO3, Drupal y mucho más.

      Drupal 9 fue lanzado el 3 de junio del 2020 para la CMS Drupal. Conocido por su facilidad de uso y una enorme biblioteca de módulos y temas, Drupal es un marco PHP popular para crear y mantener varios sitios web y aplicaciones de todos los tamaños.

      En este tutorial, comenzará a desarrollar un sitio web Drupal 9 en su equipo local usando DDEV. Esto le permitirá crear su sitio web primero y, más tarde, cuando esté listo, implementar su proyecto en un servidor de producción.

      Requisitos previos

      Para completar este tutorial, necesitará lo siguiente:

      Nota: Es posible desarrollar Drupal 9 usando DDEV en un servidor remoto, pero necesitará una solución para acceder a localhost en un navegador web. El comando DDEV, ddev share funciona con ngrok, que crea un túnel seguro en su servidor para que usted y otras partes interesadas vean su sitio en desarrollo. Para uso personal, también podría instalar una GUI en su servidor remoto y acceder a su sitio en desarrollo a través de un navegador web dentro de esa interfaz. Para hacer esto, podría seguir nuestra guía sobre Cómo instalar y configurar VNC en Ubuntu 20.04. Para una solución de GUI aún más rápida, puede seguir nuestra guía sobre cómo configurar un escritorio remoto con X2Go en Ubuntu 20.04.

      Paso 1: Instalar DDEV

      En este paso instalará DDEV en su equipo local. La Opción 1 incluye instrucciones para macOS mientras que la Opción 2 proporciona instrucciones para Linux. Este tutorial se probó en DDEV versión 1.15.0.

      Opción 1: Instalar DDEV en macOS

      DDEV aconseja que los usuarios de macOS instalen su herramienta usando el administrador de paquetes Homebrew. Utilice el siguiente comando brew para instalar la versión estable más reciente:

      • brew tap drud/ddev && brew install drud/ddev/ddev

      Si prefiere la versión absolutamente más reciente, puede usar brew para instalar ddev-edge:

      • brew tap drud/ddev-edge && brew install drud/ddev-edge/ddev

      Si ya tiene una versión de DDEV instalada, o si alguna vez desea actualizar su versión, cierre DDEV y utilice brew para actualizar su instalación:

      • ddev poweroff
      • brew upgrade ddev

      Una vez que haya instalado o actualizado DDEV, ejecute ddev version para verificar su software:

      Verá un resultado similar a este:

      Output

      DDEV-Local version v1.15.0 commit v1.15.0 db drud/ddev-dbserver-mariadb-10.2:v1.15.0 dba phpmyadmin/phpmyadmin:5 ddev-ssh-agent drud/ddev-ssh-agent:v1.15.0 docker 19.03.8 docker-compose 1.25.5 os darwin router drud/ddev-router:v1.15.0 web drud/ddev-webserver:v1.15.0

      DDEV incluye una potente CLI o interfaz de línea de comandos. Ejecute ddev para obtener más información sobre algunos comandos comunes:

      Verá lo siguiente:

      Output

      Create and maintain a local web development environment. Docs: https://ddev.readthedocs.io Support: https://ddev.readthedocs.io/en/stable/#support Usage: ddev [command] Available Commands: auth A collection of authentication commands composer Executes a composer command within the web container config Create or modify a ddev project configuration in the current directory debug A collection of debugging commands delete Remove all project information (including database) for an existing project describe Get a detailed description of a running ddev project. exec Execute a shell command in the container for a service. Uses the web service by default. export-db Dump a database to a file or to stdout help Help about any command hostname Manage your hostfile entries. import-db Import a sql file into the project. import-files Pull the uploaded files directory of an existing project to the default public upload directory of your project. list List projects logs Get the logs from your running services. pause uses 'docker stop' to pause/stop the containers belonging to a project. poweroff Completely stop all projects and containers pull Pull files and database using a configured provider plugin. restart Restart a project or several projects. restore-snapshot Restore a project's database to the provided snapshot version. sequelpro This command is not available since sequel pro.app is not installed share Share project on the internet via ngrok. snapshot Create a database snapshot for one or more projects. ssh Starts a shell session in the container for a service. Uses web service by default. start Start a ddev project. stop Stop and remove the containers of a project. Does not lose or harm anything unless you add --remove-data. version print ddev version and component versions Flags: -h, --help help for ddev -j, --json-output If true, user-oriented output will be in JSON format. -v, --version version for ddev Use "ddev [command] --help" for more information about a command.

      Para obtener más información sobre cómo usar la CLI de DDEV, visite la documentación oficial de DDEV.

      Con DDEV instalado en su equipo local, ahora está listo para instalar Drupal 9 y comenzar a desarrollar un sitio web.

      Opción 2: Instalar DDEV en Linux

      En un sistema operativo Linux, puede instalar DDEV usando Homebrew para Linux o usando la secuencia de comandos de instalación oficial. En Ubuntu, comience actualizando su lista de paquetes en el administrador de paquetes apt (puede usar apt en Debian, de lo contrario utilice el administrador de paquetes equivalente asociado con su distribución Linux):

      Ahora instale algunos paquetes previos desde el repositorio oficial de Ubuntu:

      • sudo apt install build-essential apt-transport-https ca-certificates software-properties-common curl

      Estos paquetes le permitirán descargar la secuencia de comandos de instalación de DDEV desde su repositorio oficial GitHub.

      Ahora descargue la secuencia de comandos:

      • curl -O https://raw.githubusercontent.com/drud/ddev/master/scripts/install_ddev.sh

      Antes de ejecutar la secuencia de comandos, ábrala en nano o en su editor de texto preferido e inspeccione su contenido:

      nano install_ddev.sh
      

      Una vez que haya revisado el contenido de la secuencia de comandos y esté satisfecho, guarde y cierre el archivo. Ahora está listo para ejecutar la secuencia de comandos de instalación.

      Utilice el comando chmod para hacer que la secuencia de comandos sea ejecutable:

      Ahora ejecute la secuencia de comandos:

      Es posible que el proceso de instalación le pida que confirme algunos ajustes o que introduzca su contraseña sudo. Una vez completada la instalación, tendrá DDEV disponible en su sistema operativo Linux.

      Ejecute ddev version para verificar su software:

      Verá un resultado similar a este:

      Output

      DDEV-Local version v1.15.0 commit v1.15.0 db drud/ddev-dbserver-mariadb-10.2:v1.15.0 dba phpmyadmin/phpmyadmin:5 ddev-ssh-agent drud/ddev-ssh-agent:v1.15.0 docker 19.03.8 docker-compose 1.25.5 os linux router drud/ddev-router:v1.15.0 web drud/ddev-webserver:v1.15.0

      DDEV incluye una potente CLI o interfaz de línea de comandos. Ejecute ddev sin nada más para aprender sobre estos comandos comunes:

      Verá lo siguiente:

      Output

      Create and maintain a local web development environment. Docs: https://ddev.readthedocs.io Support: https://ddev.readthedocs.io/en/stable/#support Usage: ddev [command] Available Commands: auth A collection of authentication commands composer Executes a composer command within the web container config Create or modify a ddev project configuration in the current directory debug A collection of debugging commands delete Remove all project information (including database) for an existing project describe Get a detailed description of a running ddev project. exec Execute a shell command in the container for a service. Uses the web service by default. export-db Dump a database to a file or to stdout help Help about any command hostname Manage your hostfile entries. import-db Import a sql file into the project. import-files Pull the uploaded files directory of an existing project to the default public upload directory of your project. list List projects logs Get the logs from your running services. pause uses 'docker stop' to pause/stop the containers belonging to a project. poweroff Completely stop all projects and containers pull Pull files and database using a configured provider plugin. restart Restart a project or several projects. restore-snapshot Restore a project's database to the provided snapshot version. sequelpro This command is not available since sequel pro.app is not installed share Share project on the internet via ngrok. snapshot Create a database snapshot for one or more projects. ssh Starts a shell session in the container for a service. Uses web service by default. start Start a ddev project. stop Stop and remove the containers of a project. Does not lose or harm anything unless you add --remove-data. version print ddev version and component versions Flags: -h, --help help for ddev -j, --json-output If true, user-oriented output will be in JSON format. -v, --version version for ddev Use "ddev [command] --help" for more information about a command.

      Para obtener más información sobre cómo usar la CLI de DDEV, visite la documentación oficial de DDEV.

      Con DDEV instalado en su equipo local, ahora está listo para instalar Drupal 9 y comenzar a desarrollar un sitio web.

      Paso 2: Implementar un nuevo sitio Drupal 9 usando DDEV

      Con DDEV en ejecución, ahora lo usara para crear un sistema de archivos Drupal específico, instalar Drupal 9 e iniciar un proyecto de sitio web estándar.

      Primero, creará un directorio raíz del proyecto y luego entrará en él. Ejecutará todos los comandos restantes desde esta ubicación. Este tutorial usará d9test, pero puede llamar a su directorio de cualquier otra manera. Observe, sin embargo, que DDEV no gestiona bien los nombres con guion. Se considera una buena práctica evitar nombres de directorio como my-project o drupal-site-1.

      Cree el directorio raíz de su proyecto y entre en él:

      DDEV sobresale a la hora de crear árboles de directorio que coinciden con plataformas CMS específicas. Utilice el comando ddev config para crear una estructura de directorio específica para Drupal 9:

      • ddev config --project-type=drupal9 --docroot=web --create-docroot

      Verá un resultado similar a este:

      Output

      Creating a new ddev project config in the current directory (/Users/sammy/d9test) Once completed, your configuration will be written to /Users/sammy/d9test/.ddev/config.yaml Created docroot at /Users/sammy/d9test/web You have specified a project type of drupal9 but no project of that type is found in /Users/sammy/d9test/web Ensuring write permissions for d9new No settings.php file exists, creating one Existing settings.php file includes settings.ddev.php Configuration complete. You may now run 'ddev start'.

      Debido a que pasó --project-type=drupal9 a su comando ddev config, DDEV creó varios subdirectorios y archivos que representan la organización predeterminada para un sitio web Drupal. El árbol de directorio de su proyecto ahora tendrá este aspecto:

      A Drupal 9 directory tree

      .
      ├── .ddev
      │   ├── .gitignore
      │   ├── config.yaml
      │   ├── db-build
      │   │   └── Dockerfile.example
      │   └── web-build
      │       └── Dockerfile.example
      └── web
          └── sites
              └── default
                  ├── .gitignore
                  ├── settings.ddev.php
                  └── settings.php
      
      6 directories, 7 files
      

      .ddev/ será la carpeta principal para la configuración ddev. web/ será el docroot para su nuevo proyecto; contendrá varios archivos settings. específicos. Ahora tiene el andamio inicial para su nuevo proyecto Drupal.

      Su siguiente paso es iniciar su plataforma, que creará los contenedores necesarios y las configuraciones de red. DDEV vincula los puertos 80 y 443, de forma que, si está ejecutando un servidor web como Apache en su equipo, o cualquier otra cosa que utilice esos puertos, detenga esos servicios antes de continuar.

      Utilice el comando ddev start para iniciar su plataforma:

      Esto creará todos los contenedores basados en Docker para su proyecto, lo que incluye un contenedor web, un contenedor de base de datos y phpmyadmin. Cuando la inicialización se complete, verá un resultado similar a este (el número de su puerto podría ser diferente):

      Output

      ... Successfully started d9test Project can be reached at http://d9test.ddev.site http://127.0.0.1:32773

      Nota: Recuerde que DDEV está iniciando los contenedores Docker en segundo plano. Si desea ver esos contenedores o verificar que se estén ejecutando, siempre puede usar el comando docker ps:

      Junto con cualquier otro contenedor que esté ejecutando actualmente, encontrará cuatro nuevos contenedores, cada uno con una imagen diferente: php-myadmin, ddev-webserver, ddev-router y ddev-dbserver-mariadb.

      ddev start ha creado correctamente sus contenedores y le ha dado un resultado con dos URL. Aunque este resultado dice que “puede llegar a su proyecto en http://d9test.ddev.site y http://127.0.0.1:32773, visitar estas URL ahora provocará un error. Desde Drupal 8, el núcleo de Drupal y las dependencias similares a función de módulos contrib Por tanto, primero deberá terminar de instalar Drupal usando Composer, el administrador de paquetes para proyectos PHP antes de cargar nada en su navegador web.

      Una de las funciones más útiles y elegantes de DDEV es que puede pasar comandos Composer a través de la CLI de DDEV y en su entorno en contenedores. Esto significa que puede separar la configuración específica de su equipo de su entorno de desarrollo. Ya no tiene que administrar los diversos problemas de ruta de archivo, dependencia y versión que generalmente acompañan al desarrollo PHP local. Además, puede cambiar de contexto rápidamente entre múltiples proyectos usando diferentes marcos y pilas tecnologías con un esfuerzo mínimo.

      Utilice el comando ddev composer para descargar drupal/recommended-project. Esto descargará el núcleo de Drupal, sus bibliotecas y otros recursos relacionados y, luego, creará un proyecto predeterminado:

      • ddev composer create "drupal/recommended-project"

      Ahora descargue un componente final llamado Drush, o Drupal Shell. Este tutorial solo usará un comando drush, y este tutorial proporciona una alternativa, pero drush es una CLI potente para el desarrollo de Drupal que puede mejorar su eficiencia.

      Utilice ddev-composer para instalar drush:

      • ddev composer require "drush/drush"

      Ahora ha creado un proyecto Drupal 9 predeterminado y ha instalado drush. Ahora verá su proyecto en un navegador y configurará los ajustes de su sitio web.

      Paso 3: Configurar su proyecto Drupal 9

      Ahora que instaló Drupal 9 puede visitar su nuevo proyecto en su navegador. Para hacer esto, puede volver a ejecutar ddev start y copiar una de las dos URL que produce, o puede usar el siguiente comando, que abrirá su sitio automáticamente en una nueva ventana del navegador.

      Encontrará el asistente estándar de instalación de Drupal.

      Instalador de Drupal 9 desde navegador

      Aquí tiene dos opciones. Puede usar esta UI y seguir el asistente durante la instalación, o puede volver a su terminal y pasar un comando drush a través de ddev. Esta última opción automatizará el proceso de instalación y establecerá admin como su nombre de usuario y contraseña.

      Opción 1: Usar el asistente

      Vuelva al asistente en su navegador. Bajo Choose language (Seleccionar idioma), seleccione un idioma en el menú desplegable y haga clic en Save and continue (Guardar y continuar). Ahora seleccione un perfil de instalación. Puede elegir entre Standard (Estándar), Minimal (Mínima) y Demo. Seleccione la opción que desee y haga clic en Save and continue (Guardar y continuar). Drupal verificará automáticamente sus requisitos, configurará una base de datos e instalará su sitio. Su último paso es personalizar algunas configuraciones. Añada un nombre de sitio y una dirección de correo electrónico que termine en su dominio. A continuación, elija un nombre de usuario y una contraseña. Elija una contraseña segura y mantenga sus credenciales en algún lugar seguro. Por último, añada una dirección de correo electrónico privada que compruebe regularmente, complete los ajustes regionales y pulse Save and continue (Guardar y continuar).

      Mensaje de bienvenida de Drupal 9 con una advertencia sobre permisos

      Su nuevo sitio se cargará con un mensaje de bienvenida.

      Opción 2: Usar la línea de comandos

      Desde el directorio raíz de su proyecto, ejecute este comando ddev exec para instalar un sitio de Drupal predeterminado usando drush:

      • ddev exec drush site:install --account-name=admin --account-pass=admin

      Esto creará su sitio de la misma manera que el asistente lo hará pero con algunas configuraciones de texto estándar. Su nombre de usuario y contraseña serán admin.

      Ahora abra el sitio para verlo en su navegador:

      Ahora está listo para comenzar a crear su sitio web, pero se considera una buena práctica comprobar que sus permisos son correctos para el directorio /sites/web/default. Aunque está trabajando localmente, esto no es un problema significativo, pero si transfiere estos permisos a un servidor de producción, supondrán un riesgo de seguridad.

      Paso 4: Comprobar sus permisos

      Durante la instalación del asistente, o cuando se cargue por primera vez su página de bienvenida, es posible que vea una advertencia sobre los ajustes de los permisos en su directorio /sites/web/default y un archivo dentro de ese directorio: settings.php.

      Tras ejecutarse la secuencia de comandos de instalación, Drupal intentará configurar los permisos del directorio web/sites/default a read (lectura) y execute (ejecutar) para todos los grupos: este es un ajuste de permisos 555. También intentará configurar permisos para default/settings.php a solo lectura o 444. Si aparece esta advertencia, ejecute estos dos comandos chmod desde el directorio raíz de su proyecto. No hacerlo plantea un riesgo de seguridad:

      • chmod 555 web/sites/default
      • chmod 444 web/sites/default/settings.php

      Para verificar que tiene los permisos correctos, ejecute este comando ls con los conmutadores a, l, h y d:

      • ls -alhd web/sites/default web/sites/default/settings.php

      Compruebe que sus permisos coinciden con el siguiente resultado:

      Output

      dr-xr-xr-x 8 sammy staff 256 Jul 21 12:56 web/sites/default -r--r--r-- 1 sammy staff 249 Jul 21 12:12 web/sites/default/settings.php

      Ahora está listo para desarrollar un sitio web Drupal 9 en su equipo local.

      Paso 5: Crear su primera publicación en Drupal

      Para probar algunas de las funciones de Drupal, creará una publicación usando la IU de la web.

      Desde la página inicial de su sitio, haga clic en el botón Contenido en la parte izquierda del menú superior. Ahora haga clic en el botón azul add content (añadir contenido). Aparecerá una nueva página. Haga clic en Article (Artículo) y aparecerá otra página.

      Instrucción Crear artículo de Drupal 9

      Añada el título y el contenido que desee. Puede añadir una imagen también, como uno de los fondos de pantalla de DigitalOcean. Cuando esté listo, haga clic en el botón save (guardar) azul.

      Su primera publicación aparecerá en su sitio web.

      Drupal 9 creó una publicación

      Ahora está desarrollando un sitio web Drupal 9 en su equipo local sin interactuar con un servidor gracias a Docker y DDEV. En el siguiente paso, administrará el contenedor DDEV para acomodar su flujo de trabajo.

      Paso 6: Administrar el contenedor de DDEV

      Cuando haya terminado de desarrollar su proyecto o cuando desee tomarse un descanso, puede detener su contenedor DDEV sin preocuparse sobre la pérdida de datos. DDEV puede administrar el cambio rápido de contexto entre muchos proyectos, y esta es una de sus funciones más útiles. Su código y datos siempre se conservan en el directorio de su proyecto, incluso tras detener o eliminar el contenedor de DDEV.

      Para liberar recursos, puede detener DDEV en cualquier momento. Desde el directorio raíz de su proyecto, ejecute el siguiente comando:

      DDEV está disponible globalmente, de forma que puede ejecutar comandos ddev desde cualquier lugar, siempre que especifique el proyecto DDEV:

      También puede ver todos sus proyectos a la vez usando ddev list:

      DDEV incluye muchos otros comandos útiles.

      Puede reiniciar DDEV y continuar desarrollando localmente en cualquier momento.

      Conclusión

      En este tutorial, utilizó Docker y el poder de la creación de contenedores para desarrollar un sitio Drupal localmente con la ayuda de DDEV. DDEV también se integra bien con numerosos IDE, y ofrece depuración PHP integrada para Atom, PHPStorm y Visual Studio Code (vscode). Desde aquí, puede aprender más sobre crear entornos de desarrollo para Drupal con DDEV o desarrollar otros marcos PHP como WordPress.



      Source link

      Como desenvolver um site Drupal 9 em sua máquina local usando Docker e DDEV


      O autor selecionou a Diversity in Tech Fund​​​​​ para receber uma doação como parte do programa Write for DOnations.

      Introdução

      O DDEV é uma ferramenta de código aberto que usa o Docker para criar ambientes de desenvolvimento locais para muitos frameworks PHP diferentes. Usando o poder da conteinerização, o DDEV pode simplificar muito como você trabalha em vários projetos que usam várias pilhas de tecnologia e servidores em nuvem. O DDEV inclui modelos para o WordPress, Laravel, Magento, TYPO3, Drupal e muito mais.

      O Drupal 9 foi lançado em 3 de junho de 2020 para o Drupal CMS. Conhecido pela facilidade de uso e por uma grande biblioteca de módulos e temas, o Drupal é um framework PHP popular para construir e manter vários sites e aplicações de todos os tamanhos.

      Neste tutorial, você começará a desenvolver um site Drupal 9 em sua máquina local usando o DDEV. Isso permitirá que você construa seu site primeiro e, depois, quando tudo estiver pronto, implantar o projeto em um servidor de produção.

      Pré-requisitos

      Para completar este tutorial, você precisará de:

      Nota: é possível desenvolver com o Drupal 9 usando o DDEV em um servidor remoto, mas você precisará de uma solução para acessar o localhost em um navegador Web. O comando DDEV ddev share funciona com ngrok, que cria um túnel seguro em seu servidor para que você e outras partes interessadas visualizem seu site de desenvolvimento. Para uso pessoal, você também pode instalar uma GUI no servidor remoto e acessar o site de desenvolvimento através de um navegador Web dentro dessa interface. Para fazer isso, você pode seguir nosso guia how to install and configure VNC on Ubuntu 20.04. Para uma solução GUI ainda mais rápida, você pode seguir nosso guia how to set up a remote desktop with X2Go on Ubuntu 20.04.

      Passo 1 — Instalando o DDEV

      Neste passo, você irá instalar o DDEV em sua máquina local. A Opção 1 inclui instruções para o macOS enquanto a Opção 2 fornece instruções para o Linux. Este tutorial foi testado no DDEV versão 1.15.0.

      Opção 1 — Instalando o DDEV no macOS

      O DDEV aconselha que os usuários do macOS instalem sua ferramenta usando o gerenciador de pacotes Homebrew. Use o comando brew a seguir para instalar a versão estável mais recente:

      • brew tap drud/ddev && brew install drud/ddev/ddev

      Se você preferir a versão mais recente absoluta, você pode usar o brew para instalar o ddev-edge:

      • brew tap drud/ddev-edge && brew install drud/ddev-edge/ddev

      Se você já tiver uma versão do DDEV instalada, ou se quiser atualizar sua versão, desligue o DDEV e use o brew para atualizar sua instalação:

      • ddev poweroff
      • brew upgrade ddev

      Depois de instalar ou atualizar o DDEV, execute ddev version para verificar o software:

      Você verá uma saída como esta:

      Output

      DDEV-Local version v1.15.0 commit v1.15.0 db drud/ddev-dbserver-mariadb-10.2:v1.15.0 dba phpmyadmin/phpmyadmin:5 ddev-ssh-agent drud/ddev-ssh-agent:v1.15.0 docker 19.03.8 docker-compose 1.25.5 os darwin router drud/ddev-router:v1.15.0 web drud/ddev-webserver:v1.15.0

      O DDEV inclui uma poderosa interface de linha de comando ou CLI. Execute ddev para aprender sobre alguns comandos comuns:

      Você verá o seguinte resultado:

      Output

      Create and maintain a local web development environment. Docs: https://ddev.readthedocs.io Support: https://ddev.readthedocs.io/en/stable/#support Usage: ddev [command] Available Commands: auth A collection of authentication commands composer Executes a composer command within the web container config Create or modify a ddev project configuration in the current directory debug A collection of debugging commands delete Remove all project information (including database) for an existing project describe Get a detailed description of a running ddev project. exec Execute a shell command in the container for a service. Uses the web service by default. export-db Dump a database to a file or to stdout help Help about any command hostname Manage your hostfile entries. import-db Import a sql file into the project. import-files Pull the uploaded files directory of an existing project to the default public upload directory of your project. list List projects logs Get the logs from your running services. pause uses 'docker stop' to pause/stop the containers belonging to a project. poweroff Completely stop all projects and containers pull Pull files and database using a configured provider plugin. restart Restart a project or several projects. restore-snapshot Restore a project's database to the provided snapshot version. sequelpro This command is not available since sequel pro.app is not installed share Share project on the internet via ngrok. snapshot Create a database snapshot for one or more projects. ssh Starts a shell session in the container for a service. Uses web service by default. start Start a ddev project. stop Stop and remove the containers of a project. Does not lose or harm anything unless you add --remove-data. version print ddev version and component versions Flags: -h, --help help for ddev -j, --json-output If true, user-oriented output will be in JSON format. -v, --version version for ddev Use "ddev [command] --help" for more information about a command.

      Para mais informações sobre o uso do DDEV CLI, visite a documentação oficial do DDEV.

      Com o DDEV instalado em sua máquina local, agora você poderá instalar o Drupal 9 e começar a desenvolver um site.

      Opção 2 — Instalando o DDEV no Linux

      Em um sistema operacional Linux, você pode instalar o DDEV usando o Homebrew para Linux ou usando o script de instalação oficial. No Ubuntu, comece atualizando sua lista de pacotes no gerenciador de pacotes apt (você pode usar apt no Debian, caso contrário, use o gerenciador de pacotes equivalente associado à sua distribuição Linux):

      Agora, instale alguns pacotes de pré-requisito do repositório oficial do Ubuntu:

      • sudo apt install build-essential apt-transport-https ca-certificates software-properties-common curl

      Esses pacotes lhe permitirão baixar o script de instalação do DDEV a partir do repositório oficial do GitHub.

      Agora, baixe o script:

      • curl -O https://raw.githubusercontent.com/drud/ddev/master/scripts/install_ddev.sh

      Antes de executar o script, abra-o no nano ou no seu editor de texto preferido e inspecione o conteúdo:

      nano install_ddev.sh
      

      Depois de revisar o conteúdo do script e você estiver satisfeito, salve e feche o arquivo. Agora você poderá executar o script de instalação.

      Use o comando chmod para tornar o script executável:

      Agora, execute o script.

      O processo de instalação pode lhe pedir para confirmar algumas configurações ou inserir sua senha sudo. Depois que a instalação terminar, você terá o DDEV disponível no sistema operacional Linux.

      Execute ddev version para verificar seu software:

      Você verá uma saída como esta:

      Output

      DDEV-Local version v1.15.0 commit v1.15.0 db drud/ddev-dbserver-mariadb-10.2:v1.15.0 dba phpmyadmin/phpmyadmin:5 ddev-ssh-agent drud/ddev-ssh-agent:v1.15.0 docker 19.03.8 docker-compose 1.25.5 os linux router drud/ddev-router:v1.15.0 web drud/ddev-webserver:v1.15.0

      O DDEV é uma poderosa CLI ou interface de linha de comando. Execute somente ddev para aprender sobre alguns comandos comuns:

      Você verá o seguinte resultado:

      Output

      Create and maintain a local web development environment. Docs: https://ddev.readthedocs.io Support: https://ddev.readthedocs.io/en/stable/#support Usage: ddev [command] Available Commands: auth A collection of authentication commands composer Executes a composer command within the web container config Create or modify a ddev project configuration in the current directory debug A collection of debugging commands delete Remove all project information (including database) for an existing project describe Get a detailed description of a running ddev project. exec Execute a shell command in the container for a service. Uses the web service by default. export-db Dump a database to a file or to stdout help Help about any command hostname Manage your hostfile entries. import-db Import a sql file into the project. import-files Pull the uploaded files directory of an existing project to the default public upload directory of your project. list List projects logs Get the logs from your running services. pause uses 'docker stop' to pause/stop the containers belonging to a project. poweroff Completely stop all projects and containers pull Pull files and database using a configured provider plugin. restart Restart a project or several projects. restore-snapshot Restore a project's database to the provided snapshot version. sequelpro This command is not available since sequel pro.app is not installed share Share project on the internet via ngrok. snapshot Create a database snapshot for one or more projects. ssh Starts a shell session in the container for a service. Uses web service by default. start Start a ddev project. stop Stop and remove the containers of a project. Does not lose or harm anything unless you add --remove-data. version print ddev version and component versions Flags: -h, --help help for ddev -j, --json-output If true, user-oriented output will be in JSON format. -v, --version version for ddev Use "ddev [command] --help" for more information about a command.

      Para mais informações sobre o uso do DDEV CLI, visite a documentação oficial do DDEV.

      Com o DDEV instalado em sua máquina local, é possível implantar o Drupal 9 e começar a desenvolver um site.

      Passo 2 — Implantando um novo site Drupal 9 usando o DDEV

      Com o DDEV em execução, agora você o usará para criar um sistema de arquivos específico do Drupal, instalar o Drupal 9 e depois iniciar um projeto de site padrão.

      Primeiro, você criará um diretório raiz do projeto e então mover-se para dentro dele. Você executará todos os comandos restantes a partir desta localização. Este tutorial usará d9test, mas você está livre para nomear o diretório como quiser. Observe, entretanto, que o DDEV não lida bem com nomes com hifenização. Considera-se uma boa prática evitar nomes de diretório como my-project ou drupal-site-1.

      Crie o diretório raiz do projeto e mova-se para ele:

      O DDEV se destaca na criação de árvores de diretório que correspondam a plataformas CMS específicas. Use o comando ddev config para criar uma estrutura de diretório específica para o Drupal 9:

      • ddev config --project-type=drupal9 --docroot=web --create-docroot

      Você verá uma saída como esta:

      Output

      Creating a new ddev project config in the current directory (/Users/sammy/d9test) Once completed, your configuration will be written to /Users/sammy/d9test/.ddev/config.yaml Created docroot at /Users/sammy/d9test/web You have specified a project type of drupal9 but no project of that type is found in /Users/sammy/d9test/web Ensuring write permissions for d9new No settings.php file exists, creating one Existing settings.php file includes settings.ddev.php Configuration complete. You may now run 'ddev start'.

      Como você passou --project-type=drupal9 para o comando ddev config , o DDEV criou vários subdiretórios e arquivos que representam a organização padrão para um site do Drupal. A árvore do diretório do projeto agora ficará assim:

      A Drupal 9 directory tree

      .
      ├── .ddev
      │   ├── .gitignore
      │   ├── config.yaml
      │   ├── db-build
      │   │   └── Dockerfile.example
      │   └── web-build
      │       └── Dockerfile.example
      └── web
          └── sites
              └── default
                  ├── .gitignore
                  ├── settings.ddev.php
                  └── settings.php
      
      6 directories, 7 files
      

      .ddev/ será a pasta principal para a configuração ddev. web/ será o docroot para o novo projeto; ele irá conter vários arquivos settings específicos. Agora, você tem o esqueleto inicial para o novo projeto Drupal.

      O próximo passo é inicializar a plataforma, que irá compilar os contêineres e configurações de rede necessárias. O DDEV vincula-se às portas 80 e 443, portanto, se estiver executando um servidor Web como o Apache em sua máquina, ou qualquer outra coisa que use essas portas, pare esses serviços antes de continuar.

      Use o comando ddev start para inicializar a plataforma:

      Isso irá compilar todos os contêineres baseados em Docker para o projeto, que incluem um contêiner Web, um contêiner de banco de dados e o phpmyadmin. Quando a inicialização terminar, você verá uma saída como esta (o número de porta pode diferir):

      Output

      ... Successfully started d9test Project can be reached at http://d9test.ddev.site http://127.0.0.1:32773

      Nota: lembre-se que o DDEV está iniciando contêineres do Docker nos bastidores aqui. Se você quiser ver esses contêineres ou verificar se eles estão em execução, você sempre pode usar o comando docker ps:

      Juntamente com quaisquer outros contêineres que você esteja executando atualmente, você encontrará quatro contêineres novos, cada um executando uma imagem diferente: php-myadmin, ddev-webserver, ddev-router e ddev-dbserver-mariadb.

      O ddev start compilou seus contêineres com sucesso e entregou duas URLs como saída. Embora esta saída diga que seu projeto “pode ser acessado em http://d9test.ddev.site e http://127.0.0.1:32773,” visitar essas URLs agora irá gerar um erro. A partir do Drupal 8, o Drupal core e os módulos contrib funcionam como dependências. Portanto, primeiro você precisará terminar de instalar o Drupal usando o Composer, o gerenciador de pacotes para projetos PHP, antes que tudo seja carregado em seu navegador Web

      Uma das características mais úteis e elegantes do DDEV é que você pode passar comandos do Composer através do DDEV CLI e dentro do seu ambiente conteinerizado. Isso significa que você pode separar a configuração específica da sua máquina do seu ambiente de desenvolvimento. Você não precisa mais gerenciar os vários problemas de caminho de arquivo, dependência e versão que geralmente acompanham o desenvolvimento local em PHP. Além disso, você pode alternar rapidamente o contexto entre vários projetos usando diferentes frameworks e pilhas de tecnologia sem esforço.

      Use o comando ddev composer para baixar drupal/recommended-project. Isso irá baixar o Drupal core, suas bibliotecas e outros recursos relacionados e então criar um projeto padrão:

      • ddev composer create "drupal/recommended-project"

      Agora, baixe um componente final chamado Drush, ou Drupal Shell. Este tutorial usará apenas um comando drush, e ele fornece uma alternativa, mas o drush é uma CLI poderosa para o desenvolvimento Drupal que pode melhorar sua eficiência.

      Use ddev composer para instalar o drush:

      • ddev composer require "drush/drush"

      Agora, você construiu um projeto padrão do Drupal 9 e instalou o drush. Agora, você verá seu projeto em um navegador e configurará as definições do site.

      Passo 3 — Configurando seu projeto Drupal 9

      Agora que você instalou o Drupal 9, visite o novo projeto em seu navegador. Para fazer isso, execute novamente ddev start e copie uma das duas URLs que ele gera, ou você pode usar o seguinte comando, que irá automaticamente abrir seu site em uma nova janela do navegador:

      Você encontrará o assistente de instalação padrão do Drupal.

      Drupal 9 installer from browser

      Aqui você tem duas opções. Você pode usar esta UI e seguir o assistente através da instalação, ou poderá retornar ao terminal e passar um comando drush através do ddev. A última opção irá automatizar o processo de instalação e definir admin como o nome de usuário e senha.

      Opção 1 — Usando o assistente

      Volte para o assistente em seu navegador. Sob Choose language selecione um idioma no menu suspenso e clique em Save and continue. Agora, selecione um perfil de instalação. Você pode escolher entre Standard, Minimal e Demo. Faça sua escolha e clique em Save and continue. O Drupal irá verificar automaticamente seus requisitos, configurar um banco de dados e instalar seu site. O último passo é personalizar algumas configurações. Adicione um nome e um endereço de e-mail para o site que termine com seu domínio. Em seguida, escolha um nome de usuário e senha. Escolha uma senha forte e mantenha suas credenciais em algum lugar seguro. Por fim, adicione um endereço de e-mail privado que você verifique regularmente, preencha as configurações regionais e pressione Save and continue.

      Drupal 9 welcome message with a warning about permissions

      Seu novo site irá carregar com uma mensagem de boas-vindas.

      Opção 2 — Usando a linha de comando

      A partir do diretório raiz do projeto, execute este comando ddev exec para instalar um site padrão do Drupal usando drush:

      • ddev exec drush site:install --account-name=admin --account-pass=admin

      Isso criará seu site da mesma forma que o assistente, mas com algumas configurações padrão. O nome de usuário e a senha serão admin.

      Agora, inicie o site para exibi-lo em seu navegador:

      Agora, você começará a construir o site, mas considera-se uma boa prática verificar se as permissões estão corretas para o diretório /sites/web/default. Enquanto você está trabalhando localmente, isso não é uma preocupação significativa, mas se você transferir essas permissões para um servidor de produção, elas representarão um risco de segurança.

      Passo 4 — Verificando as permissões

      Durante a instalação do assistente, ou quando sua página de boas-vindas carregar pela primeira vez, você verá um aviso sobre as configurações de permissões no diretório /sites/web/default e um arquivo dentro desse diretório: settings.php.

      Depois que o script de instalação for executado, o Drupal irá tentar definir as permissões do diretório web/sites/default para leitura e execução para todos os grupos: esta é uma configuração de permissões 555. Ele também tentará definir permissões do arquivo default/settings.php para somente leitura, ou 444. Se você encontrar este aviso, execute esses dois comandos chmod a partir do diretório raiz do projeto. Não fazer isso representa um risco de segurança:

      • chmod 555 web/sites/default
      • chmod 444 web/sites/default/settings.php

      Para verificar se você tem as permissões corretas, execute este comando ls com as chaves a, l, h, e d:

      • ls -alhd web/sites/default web/sites/default/settings.php

      Verifique se suas permissões correspondem à seguinte saída:

      Output

      dr-xr-xr-x 8 sammy staff 256 Jul 21 12:56 web/sites/default -r--r--r-- 1 sammy staff 249 Jul 21 12:12 web/sites/default/settings.php

      Agora, você está pronto para desenvolver um site Drupal 9 em sua máquina local.

      Passo 5 — Criando seu primeiro post no Drupal

      Para testar algumas das funcionalidades do Drupal, você criará agora um post usando a interface Web.

      A partir da página inicial do site, clique no botão Content na borda esquerda do menu superior. Agora, clique no botão azul add content. Uma nova página aparecerá. Clique em Article e outra página aparecerá.

      Drupal 9 Create Article Prompt

      Adicione qualquer título e conteúdo que você quiser. Adicione uma imagem, como um dos papéis de parede da DigitalOcean. Ao terminar, clique no botão azul. save.

      Seu primeiro post aparecerá em seu site.

      Drupal 9 Created Post

      Agora, você está desenvolvendo um site Drupal 9 em sua máquina local sem nunca interagir com um servidor, graças ao Docker e ao DDEV. No próximo passo, você gerenciará o contêiner DDEV para acomodar o fluxo de trabalho.

      Passo 6 — Gerenciando o contêiner DDEV

      Quando você terminar de desenvolver seu projeto, ou quando quiser fazer uma pausa, você pode parar seu contêiner DDEV sem se preocupar com a perda de dados. O DDEV pode gerenciar a troca rápida de contexto entre muitos projetos; este é um de seus recursos mais úteis. Seu código e dados são sempre preservados em seu diretório de projeto, mesmo depois de parar ou excluir o contêiner DDEV.

      Para liberar recursos, pare o DDEV a qualquer momento. A partir do diretório raiz do projeto, execute o seguinte comando:

      O DDEV está disponível globalmente, assim você pode executar comandos ddev a partir de qualquer lugar, desde que você especifique o projeto DDEV:

      Visualize também todos os projetos usando ddev list:

      O DDEV inclui muitos outros comandos úteis.

      Você pode reiniciar o DDEV e continuar desenvolvendo localmente a qualquer momento.

      Conclusão

      Neste tutorial, você usou o Docker e o poder da conteinerização para desenvolver um site Drupal localmente, com a ajuda do DDEV. O DDEV também se integra bem com vários IDEs, e ele fornece depuração de PHP embutida para o Atom, PHPStorm e Visual Studio Code (vscode). A partir daqui, você também pode aprender mais sobre a criação de ambientes de desenvolvimento para o Drupal com DDEV ou desenvolver outros frameworks PHP como o WordPress.



      Source link