HTML

Utilizando arquivos estáticos no Flask

No último artigo dessa trilha, vimos como retornar páginas HTML em requisições Flask e, assim, melhorar a interação da nossa aplicação com seu usuário. Porém, normalmente, há o uso de arquivos estáticos (JS, CSS e IMG) para melhorar a aparência das nossas páginas e, consequentemente, a experiência do usuário. Sendo assim, veremos neste artigo como incorporar estes arquivos ao nosso projeto Flask.

Criando diretório dos arquivos estáticos

É uma boa prática adotada pela comunidade que todos os arquivos estáticos de uma aplicação Flask sejam armazenados em um diretório “static” na raiz do projeto e, dentro deste diretório, uma nova pasta contendo os tipos de arquivos estáticos (CSS, JS e IMG), como podemos ver abaixo:


Para este projeto, iremos usar o Bootstrap como CSS. Para isso, realizamos o download do arquivo .min.css do framework (https://getbootstrap.com/docs/4.3/getting-started/download/) e armazenamos no diretório “static/css”, como vimos na imagem acima.

Ao realizar este procedimento, o Flask já estará apto a utilizar este arquivo CSS no projeto, bastando apenas importá-lo em nosso template.

Curso de
CONHEÇA O CURSO

Utilizando arquivos estáticos no template

Agora que já configuramos nosso projeto para armazenar arquivos estáticos, precisamos importá-lo em nosso template. Para isso, é muito simples. O primeiro passo é criar uma tag link no head do arquivo HTML e referenciar nosso arquivo bootstrap.min.css:

Agora, no href do link, indicamos onde se encontra o arquivo estático que queremos utilizar. No nosso caso, ele se encontra em static/css/bootstrap.min.css. Sendo assim, temos que passar, como primeiro parâmetro do método url_for, o diretório raiz dos arquivos estáticos. Após isso, informamos o restante do caminho até o arquivo no atributo filename, como vemos acima.

Agora, já estamos aptos a usar o arquivo do bootstrap em nossos templates e, com isso, personalizar nossas páginas HTML. Utilizando como base o tema Jumbotron do bootstrap, conseguimos criar uma página com todo o poder do framework:

Concluindo

A utilização de arquivos estáticos em projetos Flask é, realmente, muito simples. Apenas precisamos criar um diretório para comportar estes arquivos e importá-los em nossos templates utilizando o método url_for do Jinja2.

Porém, sabemos que o conteúdo de uma página HTML nem sempre é estático. Muitas vezes este conteúdo é enviado pela requisição e exibido no HTML… Bom, como fazer isso? É exatamente o que veremos no próximo artigo desta série 🙂

Função para converter HTML para PDF usando PHP e wkhtmltopdf no AWS Lambda

Aqui na TreinaWeb sempre usamos o wkhtmltopdf para a conversão de HTML para PDF. É a base da geração dos nossos certificados, ementas, relatórios administrativos etc.

Um problema que sempre tivemos foi com o manejo do binário do wkhtmltopdf. Tínhamos que tê-lo disponível em qualquer instância EC2 que fôssemos utilizar. Quando uma nova versão era lançada, tínhamos que compilá-lo do zero novamente em todas as instâncias que o utilizassem, até mesmo localmente no ambiente de desenvolvimento. Para além disso, tínhamos com frequência alguns erros na geração do PDF por causa de algum pico de uso da CPU por conta dele.

Curso de
CONHEÇA O CURSO

Resolvemos os nossos problemas de uma forma bem tranquila e altamente escalável usando Serverless. Fizemos o deploy de uma função no AWS Lambda especializada na conversão de HTML para PDF. E, para o nosso caso de uso, tudo o que precisávamos era receber o HTML e então retornar um Base64 do PDF. Notamos, também, uma melhor performance na geração dos PDFs.

Se você não conhece o que é Serverless, sugiro a leitura do artigo: Serverless: uma introdução.

E, para que você consiga acompanhar como o deploy da função que converte o HTML para PDF foi feito, é necessário que você tenha lido o artigo: Aplicação Serverless desenvolvida em PHP usando AWS Lambda.

O que utilizaremos daqui pra frente:

  • PHP: essa maravilhosa linguagem de programação.
  • Bref: ferramenta que faz com que seja simples o deploy de aplicações PHP Serverless.
  • Serverless Framework: framework completo para teste e deploy de aplicações nas principais plataformas Serverless do mercado.
  • AWS Lambda: onde faremos o deploy da função.

Como funciona a conversão do HTML para PDF?

O sistema de layers para o Lambda lançado pela AWS no ano passado mudou o jogo completamente. Com ele é possível que uma função use qualquer binário. É possível rodar até Cobol no AWS Lambda. E foi ele que permitiu que agora pudéssemos criar uma função que use o binário do wkhtmltopdf para a conversão de HTML para PDF. Não obstante, ele também é o responsável por podermos usar o PHP no AWS Lambda.

O que inicialmente tivemos que fazer foi compilar o wkhtmltopdf manualmente na nossa máquina para que pudéssemos criar um Layer dele no AWS Lambda pra ser linkado com a função. E, para isso, o artigo Compiling wkhtmltopdf for use inside an AWS Lambda function with Bref is easier than you’d think deixou tudo bem detalhado sobre como isso pode ser feito.

O código completo da função você encontra nesse repositório: KennedyTedesco/wkhtmltopdf-lambda-php. Mas eu vou passar pelos principais pontos aqui nesse artigo.

Primeiro de tudo, vamos avaliar o arquivo serverless.yml:

service: wkhtmltopdf

provider:
    name: aws
    region: sa-east-1
    runtime: provided
    stage: prod
    memorySize: 1024
    timeout: 60

plugins:
    - ./vendor/bref/bref

functions:
    html-to-base64-pdf:
        handler: index.php
        description: 'HTML to Base64 PDF'
        layers:
            - ${bref:layer.php-73}
            - 'arn:aws:lambda:sa-east-1:391960246434:layer:wkhtmltopdf-bin:1'

Veja em layers que temos declarado arn:aws:lambda:sa-east-1:391960246434:layer:wkhtmltopdf-bin:1, esse é o layer que compilamos manualmente e subimos para a AWS. É o layer do binário do wkhtmltopdf. É o que faz ele ficar disponível no diretório /opt/wkhtmltopdf.

Curso de
CONHEÇA O CURSO

E a função propriamente dita é pura e simplesmente isso:

<?php

declare(strict_types=1);

require __DIR__.'/vendor/autoload.php';

use Knp\Snappy\Pdf;

lambda(static function (array $event) {
    $pdf = new Pdf('/opt/wkhtmltopdf');

    $options = [
        'encoding' => 'utf-8',
        'page-size' => 'A4',
        'margin-bottom' => 0,
        'margin-left' => 0,
        'margin-top' => 0,
        'margin-right' => 0,
        'disable-smart-shrinking' => true,
        'disable-javascript' => true,
    ];

    if (isset($event['options'])) {
        $options = \array_merge(
            $options,
            \json_decode($event['options'], true)
        );
    }

    $output = $pdf->getOutputFromHtml($event['html'], $options);

    if (empty($output)) {
        throw new \RuntimeException('Unable to generate the html');
    }

    return \base64_encode($output);
});

Usamos a library snappy que abstrai o uso do wkhtmltopdf. No mais, apenas recebemos o HTML e algumas opções para a geração do PDF, executamos o binário e retornamos um base64 do PDF gerado.

Se você tiver seguido o artigo Aplicação Serverless desenvolvida em PHP usando AWS Lambda, para fazer o deploy dessa função na sua infra da AWS, tudo o que você precisará é clonar esse projeto que disponibilizei no Github e então executar:

$ composer install --optimize-autoloader --no-dev

Vai baixar as dependências do projeto. Por fim:

$ serverless deploy

Fará o deploy da função no AWS Lambda.

E como a função é usada nas aplicações?

Não tivemos a necessidade de expor um endpoint do API Gateway para intermediar a execução da função (isso seria perfeitamente possível, principalmente se o serviço fosse uma API de acesso público). Fazemos a invocação direta dela pela SDK da AWS. E a SDK tem implementação para as principais linguagens. No caso do PHP seria algo como:

$lambda = new AwsLambdaClient([
  'version' => 'latest',
  'region' => 'sa-east-1',
  'credentials' => [
    'key' => env('AWS_ACCESS_KEY_ID'),
    'secret' => env('AWS_SECRET_ACCESS_KEY'),
  ],
]);

$result = $lambda->invoke([
  'FunctionName' => 'wkhtmltopdf-prod-html-to-base64-pdf',
  'InvocationType' => 'RequestResponse',
  'LogType' => 'None',
  'Payload' => \json_encode([
    'html' => '<html>...',
  ]),
]);

$result = \json_decode($result->get('Payload')->getContents(), true); // base64 pdf

E se eu precisar gerar grandes arquivos PDF?

Se o seu caso de uso envolve gerar arquivos PDF de mais de 6MB, esse método da invocação direta não vai ser a melhor opção por causa do limite do tamanho do payload de retorno do AWS Lambda. Nesse caso, a melhor opção é você mudar a estratégia e, ao invés de retornar um base64 do PDF, você passar a salvá-lo em um bucket no S3. E a sua função retornaria um body com o link para acesso ao arquivo, por exemplo:

{
    "url": "https://seu-bucket.s3-sa-east-1.amazonaws.com/pdf/nome-do-arquivo.pdf"  
}

Inclusive, se for necessário, é possível até mesmo ter um bucket para receber os arquivos HTML que precisam ser convertidos e então a função seria invocada para convertê-los e então salvá-los em outro bucket de destino. Algo como:

  • O arquivo HTML é salvo no bucket arquivos-html, esse bucket está configurado para disparar um evento sempre que um novo arquivo é upado, evento esse que vai executar a função que criamos;
  • A função é executada, o PDF é salvo no bucket arquivos-pdf e a função retorna um body com o link para acesso ao arquivo PDF.
Curso de
CONHEÇA O CURSO

As possibilidades são muitas, ademais, na AWS tudo se integra por eventos.

Até a próxima!

E-mails responsivos com a linguagem de marcação MJML

O MJML é um framework e linguagem de marcação para a criação de e-mails responsivos. Ele simplifica a escrita com uma linguagem simples e concisa (a Mailjet Markup Language) que é convertida para HTML.

Se você ainda não teve a oportunidade de ver o código HTML de um e-mail responsivo, costuma ser uma coisa muito bagunçada, pois os estilos são aplicados de forma inline e usa-se tabelas para a sua estruturação. Isso é feito para fazer com que o e-mail funcione no maior número possível de dispositivos.

Curso de
CONHEÇA O CURSO

Para você ter ideia, esse trecho de MJML de um dos e-mails que enviamos na TreinaWeb:

<mj-section>
  <mj-column full-width="full-width">
    <mj-image src="https://d2knvm16wkt3ia.cloudfront.net/og/java-jax-ws-rs.png" href="https://www.treinaweb.com.br" />
    <mj-text align="center" font-size="35px" line-height="1.1"> <a href="https://www.treinaweb.com.br">Python - Collections</a> </mj-text>
    <mj-text align="justify"> Estruturas de dados são pontos cruciais em qualquer linguagem de programação. Sendo que em cada uma, podem ser implementadas de uma forma diferente. Por isso que conhecer as particularidades e recursos da linguagem em relação a estrutura de
      dados, é imprescindível a qualquer um que queira dominar uma linguagem. </mj-text>
    <mj-text align="justify"> Neste ponto o Python não fica atrás, fornecendo estruturas comuns em outras linguagens, bem como estruturas exclusivas. Neste curso veremos como manipulá-las e conheceremos os métodos de cada estrutura disponível nesta linguagem. </mj-text>
    <mj-button width="100%" background-color="#54CF8A" href="https://www.treinaweb.com.br">SAIBA MAIS SOBRE O CURSO</mj-button>
  </mj-column>
</mj-section>

É convertido para esse HTML:

<div style="Margin:0px auto;max-width:600px;">
    <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
        <tbody>
            <tr>
                <td style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;vertical-align:top;">
                    <div class="mj-column-per-100 outlook-group-fix" style="font-size:13px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
                        <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
                            <tr>
                                <td align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;">
                                    <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px;">
                                        <tbody>
                                            <tr>
                                                <td style="width:550px;">
                                                    <a href="https://www.treinaweb.com.br" target="_blank" style="color: #444444;">
                                                        <img height="auto" src="https://d2knvm16wkt3ia.cloudfront.net/og/java-jax-ws-rs.png" style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;" width="550">
                                                    </a>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </td>
                            </tr>
                            <tr>
                                <td align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;">
                                    <div style="font-family:Helvetica, arial, sans-serif;font-size:35px;line-height:1.1;text-align:center;color:#444444;">
                                        <a href="https://www.treinaweb.com.br" style="color: #444444;">Python - Collections</a>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td align="justify" style="font-size:0px;padding:10px 25px;word-break:break-word;">
                                    <div style="font-family:Helvetica, arial, sans-serif;font-size:16px;line-height:24px;text-align:justify;color:#444444;"> Estruturas de dados são pontos cruciais em qualquer linguagem de programação. Sendo que em cada uma, podem ser implementadas de uma forma diferente. Por isso que conhecer as particularidades e recursos da linguagem em relação a estrutura de dados, é imprescindível a qualquer um que queira dominar uma linguagem. </div>
                                </td>
                            </tr>
                            <tr>
                                <td align="justify" style="font-size:0px;padding:10px 25px;word-break:break-word;">
                                    <div style="font-family:Helvetica, arial, sans-serif;font-size:16px;line-height:24px;text-align:justify;color:#444444;"> Neste ponto o Python não fica atrás, fornecendo estruturas comuns em outras linguagens, bem como estruturas exclusivas. Neste curso veremos como manipulá-las e conheceremos os métodos de cada estrutura disponível nesta linguagem. </div>
                                </td>
                            </tr>
                            <tr>
                                <td align="center" vertical-align="middle" style="font-size:0px;padding:10px 25px;word-break:break-word;">
                                    <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:separate;width:100%;line-height:100%;">
                                        <tr>
                                            <td align="center" bgcolor="#54CF8A" role="presentation" style="border:none;border-radius:3px;cursor:auto;padding:10px 25px;background:#54CF8A;" valign="middle">
                                                <a href="https://www.treinaweb.com.br" style="background: #54CF8A; color: #ffffff; font-family: Helvetica, arial, sans-serif; font-size: 13px; font-weight: normal; line-height: 120%; Margin: 0; text-decoration: none; text-transform: none;" target="_blank">
              SAIBA MAIS SOBRE O CURSO
            </a>
                                            </td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                        </table>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</div>

Através desse exemplo já dá para você notar como o MJML ajuda na escrita e na clareza do que está sendo escrito.

E para escrever um e-mail usando MJML?

O intuito desse artigo não é o de masterizar o uso do MJML ou de te ensinar a passo a passo a sintaxe dessa linguagem de marcação. O MJML possui uma completa documentação que mostra passo a passo tudo o que pode ser desenvolvido com ele.

A ideia aqui é te dar o caminho da pedra, te apresentar os recursos disponíveis, o que você pode usar e te mostrar como converter o MJML para HTML em seu projeto.

A documentação:

A documentação do MJML não deve ser ignorada. Portanto, é um ótimo começo.

Try it live:

Você pode visualizar o resultado enquanto escreve no editor online disponível no site do MJML.

Templates:

O site oficial tem uma área com alguns templates para que você possa visualizar e tirar algumas ideias na hora de construir os seus e-mails.

A própria documentação fornece um template básico para você começar por ele, caso deseje.

E como vou converter o MJML para HTML?

O MJML precisa ser convertido para HTML para que então os seus e-mails sejam enviados. Há algumas formas de atingir esse objetivo. Vamos começar pelas manuais:

1) É possível converter MJML para HTML pelo editor online oficial.

2) É possível converter através da aplicação desktop disponível para Linux, macOS e Windows.

Agora, se dinamicamente/programaticamente você constrói o MJML e precisa convertê-lo “on the fly” antes dos envios, existem algumas opções:

1) Se registrar na API Oficial do MJML para que você receba uma credencial que te permitirá fazer uma requisição na API para converter MJML para HTML. É de grátis.

curl \ 
-X POST "https://api.mjml.io/v1/render" \ 
--user "APPLICATION-ID:SECRET-KEY" \ 
-d '{ 
"mjml":"<mjml><mj-body><mj-container><mj-section><mj-column><mj-text>Hello World</mj-text></mj-column></mj-section></mj-container></mj-body></mjml>" 
}'

2) O MJML é open-source e escrito em JavaScript. Ou seja, você próprio pode criar a sua API em NodeJS para a conversão do MJML para HTML. Veja no Github.

Como usamos o MJML na TreinaWeb

Na TreinaWeb usamos uma abordagem Serverless para essa conversão. Você não sabe o que é Serverless? Recomendo a leitura do artigo: Serverless: uma introdução.

Criamos uma função e fizemos o deploy dela na AWS Lambda, pois é na AWS onde administramos toda a nossa infraestrutura.

O código-fonte dessa função e do template do Serverless Framework para deploy na AWS, você encontra nesse repositório: KennedyTedesco/mjml-lambda.

Curso de
CONHEÇA O CURSO

A função é extremamente simples, ela apenas invoca o código do MJML para realizar a conversão:

import mjml2html from 'mjml';

export async function convert(event, context, callback) {
  return mjml2html(event.mjml, {
      beautify: true,
      minify: true,
      keepComments: false,
      validationLevel: 'skip'
  });
}

Uma vez que a lambda está disponível para uso, a invocamos em um de nossos sitemas usando a SDK da AWS para PHP. Uma possível forma de atingir esse objetivo usando o PHP:

$lambda = new \Aws\Lambda\LambdaClient([
    'version' => 'latest',
    'region' => 'us-east-1',
]);

$result = $lambda->invoke([
    'FunctionName' => 'mjml-prod-to-html',
    'InvocationType' => 'RequestResponse',
    'LogType' => 'None',
    'Payload' => json_encode(['mjml' => '<mjml>...',]),
]);

$result = json_decode($result->get('Payload')->getContents(), true);

$html = $result['html']; // O HTML convertido

No entanto, se fosse necessário expor essa função na Web para que qualquer um utilizasse, poderíamos usar o API Gateway na “frente” da lambda.

Dessa forma conseguimos manter o template dos nossos e-mails bem fáceis de serem desenvolvidos e alterados, além de que trazemos para a nossa infraestrutura a responsabilidade de fazer a conversão, para não ter que depender de um serviço de terceiro (a API BETA do MJML).

Espero que o MJML ajude a sua equipe a produzir lindos e-mails responsivos. Até a próxima!

O que é Ionic?

O Ionic é um Framework Open Source gratuito sobre a licença MIT para desenvolvimento de aplicações mobile híbridas.

Aplicações híbridas são aplicativos móveis construídos de maneira alternativa a aplicações nativa. São construídos, geralmente, utilizando HTML+CSS+JavaScript, desta maneira se tornaram extremamente populares, pois permite o desenvolvimento multiplataforma, utilizando o mesmo HTML para diferentes sistemas operacionais.

Aqui no Blog possuímos um artigo “App Nativo x App Híbrido: existe o melhor?” onde você pode conferir mais detalhes.

Curso de
CONHEÇA O CURSO

Caso você não saiba o que é um Framework

O framework é um facilitador no desenvolvimento de diversas aplicações e, sem dúvida, sua utilização poupa tempo e custos para quem utiliza, pois de forma mais básica, é um conjunto de bibliotecas utilizadas para criar uma base onde as aplicações são construídas, um otimizador de recursos. Tem como principal objetivo resolver problemas recorrentes com uma abordagem mais genérica. Ele permite ao desenvolvedor focar nos “problemas” da aplicação, não na arquitetura e configurações.

Aqui no blog também possuímos um artigo sobre “Para que serve um Framework”.

Sendo assim, o que é o Ionic?

Desenvolvido por Max Lynch, Ben Sperry e Adam Bradley da Drifty Co., sua primeira versão teve seu lançamento em 2013 e atualmente encontra-se na versão 4.

Como dito acima, é um Framework para criação de aplicações móveis e desktop de alto desempenho e qualidade, que utiliza as tecnologias web HTML, CSS e JavaScript.

Como diz em seu site, o Ionic ajuda as equipes a criarem e distribuírem belos aplicativos híbridos em várias plataformas, possuindo foco na experiência do usuário ou interação do usuário com o aplicativo (controles, interação, gestos, animações).

Projetado para funcionar e ser exibido em diferentes plataformas, possui um design limpo, simples e funcional, com componentes padrões, tipografia, paradigmas interativos e diversos templates.

Além disso, possui um cliente de linha de comando (CLI) para gerenciar todo projeto criado com o Ionic. O CLI é uma ferramenta que cria aplicativos Ionic de forma rápida e fornece vários comandos úteis para facilitar o desenvolvimento utilizando o Framework. Possui um servidor de desenvolvimento integrado, ferramentas de compilação e depuração, entre outros benefícios.

Para instalar o Ionic CLI basta clicar aqui.

Por que aprender Ionic?

Além da principal vantagem no desenvolvimento de aplicações híbridas, muitas outras vantagens podem ser listadas quando pensamos no Ionic, dentre elas:

  • Estabilidade na criação de aplicações híbridas: Apesar de utilizar HTML, CSS e JS para o desenvolvimento das aplicações, o Ionic entrega um produto altamente estável e com desempenho similar ao de aplicativos nativos;

  • Multiplataforma: Com o Ionic, podemos desenvolver um único código que seja executado em diferentes sistemas operacionais, diminuindo o tempo de desenvolvimento de novas aplicações.

  • Menor tempo de desenvolvimento: Por criar aplicações multiplataforma, o tempo no desenvolvimento dessa aplicação se torna algo vantajoso em relação às aplicações nativas, uma vez que todo código criado será reutilizado para qualquer sistema operacional móvel, diminuindo assim o tempo de desenvolvimento;

  • Menor custo: Uma vez que poupamos o tempo em seu desenvolvimento, estamos poupando os custos desta aplicação, fazendo com que, criar aplicações multiplataforma torne-se algo mais rentável e menos custoso;

  • Prototipação: Criar telas no Ionic é extremamente fácil, pois possui uma ferramenta para esta finalidade, o Ionic Creator, que é uma ferramenta de “arrasta e solta” para facilitar as ideias de criação de suas aplicações que pode ser acessada neste link;

  • Documentação: Além de possuir uma grande comunidade, a documentação do Ionic é bastante completa, entre outras.

O futuro do Ionic

Como dito acima, o Ionic Framework encontra-se na versão 4, lançado no ano de 2019. Esta versão mais recente foi reprojetada para funcionar como uma biblioteca independente de componentes da web, com integrações para os mais recentes frameworks JavaScript, como o Angular, Vue e React. Ou seja, com a nova versão do Ionic, podemos criar aplicativos híbridos utilizando qualquer framework javascript, como Vue, Angular e React.

O Ionic é um excelente framework que, com certeza, poderá ser utilizado para criar aplicativos dos mais diversos segmentos. Sendo assim, este framework é um forte candidato a ser o seu próximo queridinho no desenvolvimento de aplicativos móveis.

Principais editores de código para desenvolvimento

Infinitas são as possibilidades na hora de escolher um editor de texto para utilizar no desenvolvimento dos seus projetos. Sendo assim, neste artigo veremos alguns editores de texto e suas principais características.

Brackets

Desenvolvido pela Adobe Systems, o Brackets é um editor de texto que facilita a criação de páginas web, mantendo seu foco principal no desenvolvimento web. Software livre e de código aberto, atualmente é mantido no GitHub sobre a licença MIT pela adobe e qualquer outro desenvolvedor que queira contribuir com suas melhorias. É um editor de texto escrito em JavaScript, CSS e HTML.

Atualmente encontra-se na versão 1.14 e possui disponibilidade de download nos sistemas operacionais Linux, Windows e Mac.

Dentre suas vantagens e características podemos citar:

  • Personalizável por meio de extensões;
  • Editores expandidos: permite visualizar trechos de código utilizados em outros arquivos;
  • Live Preview: Garante a visualização instantânea de alterações ao mesmo tempo que são executadas;
  • Suporte nativo a pré-processadores.

O download da ferramenta pode ser feito acessando no próprio site da Brackets.

Em sua página é possível contribuir, acessar seu suporte, blog, entre outras opções para te ajudar ainda mais na escolha deste editor.

Formação:
CONHEÇA A FORMAÇÃO

Sublime Text

Desenvolvido em Python, o Sublime Text é um ferramenta que visa a simplicidade e facilidade de uso. Lançado em 2008, é um editor de texto multiplataforma e proprietário que, dentre diversas características, podemos citar:

  • Comunidade ativa;
  • Extensões baseadas em Python;
  • Coloração de sintaxe personalizável;
  • Pré Visualização do código-fonte;
  • Autocomplete.

O download da ferramenta pode ser feita neste link, assim como acompanhar suas novidades, fórum e encontrar seu suporte.

VSCode (Visual Studio Code)

Criado pela Microsoft, o Visual Studio Code é um editor de texto open source, multiplataforma e gratuito com foco na construção de aplicações web.

Além de contar com uma comunidade extremamente ativa e suporte principalmente para a ASP.Net e Node.js., podemos listar como vantagens:

  • Autocomplete de código;
  • Navegação facilitada entre arquivos;
  • IntelliSense: Conclusões inteligentes com base em tipos de variáveis, definições de função e módulos importados;
  • Depuração de código diretamente do editor;
  • Suporte nativo ao Git;
  • Tarefa em execução;
  • Extensível e personalizável.

Para baixar a ferramenta, basta acessar este link, onde você encontrará sua documentação, blog, extensões e muito mais.

NotePad++

Ideal para iniciantes, o NotePad++ é um editor de código atrativo pela sua simplicidade.

Disponível somente para usuários Windows, é um editor open source sobre a licença GPL (General Public License) que além de suportar diversas linguagens de programação, traz como vantagens:

  • Autocomplete;
  • Sistema de definição de linguagem;
  • Divisão de tela;
  • Suporte para macros, plugins e muitos outros.

O download da ferramenta assim como visualizar suas características, comunidade, recursos e muito mais, pode ser feito a partir deste link.

Atom

Desenvolvido pelo GitHub sobre a licença MIT, o Atom é um editor de código open source, disponível para os sistemas operacionais Windows, Linux e Mac.

Semelhante ao Sublime, porém com alguns diferenciais, o Atom possui integração nativa com o GitHub e consegue trabalhar com comandos Git sem necessidade de nenhuma instalação adicional. Dentre várias características, podemos citar:

  • Editor de código multiplataforma;
  • Comunidade ativa;
  • Gerenciador de pacotes integrado;
  • Autocomplete;
  • Interface simples e amigável;
  • Personalizável.

Para baixá-lo, basta acessar neste link onde você também encontará seus temas, documentação, blog e muito mais.

Criando um Portfólio com o Pingendo

Diferente de um currículo, o portfólio é o meio mais completo de expor sua experiência profissional.

Desta forma, você poderá utilizá-lo para compartilhar suas experiências de maneira mais organizada na web.

Neste artigo criaremos uma página web para que você possa utilizar como portfólio pessoal utilizando o Pingendo.

Ferramenta utilizada

Para criação desta página, utilizaremos o Pingendo pelo fato de ser uma ferramenta de fácil uso e extremamente simples.

Com o Pingendo é possível criar páginas web responsivas no estilo “arrasta e solta”. Por este motivo, esta ferramenta é ideal para criação de páginas mesmo que você não possua tanto conhecimento sobre programação.

O primeiro passo é entrar em seu site no link: https://pingendo.com/ e realizar o download da ferramenta.

Ao clicar no “Download”, selecione o seu sistema operacional e a ferramenta começará a ser baixada.

Após baixar a ferramenta, basta instalá-la em seu computador “NEXT-NEXT-FINISH”, e pronto! Inicializaremos a criação do nosso portfólio.

Neste artigo faremos algo bem básico. Uma pequena página para que você tenha apenas uma noção do que a ferramenta proporciona.

Realizando a criação do nosso Portfólio

Após instalar o Pingendo, abriremos a ferramenta para iniciar.

Logo na página inicial já nos deparamos com alguns templates prontos, e podemos utilizar aquele que mais nos agrada, realizando apenas as alterações necessárias.

Lembrando que não estaremos manipulando códigos (HTML/CSS) na criação deste portfólio, já que a ferramenta permite a criação de páginas no estilo “arrasta e solta”. 🙂

Selecionaremos o template desejado, a pasta de destino e clicaremos em CREATE.

Logo após, selecionamos o arquivo “index.html” para editá-lo.

Pronto! A partir daí, podemos começar a editar todo layout conforme nossa necessidade.

A ferramenta é totalmente simples (como dito acima), e ao clicar nos botões ou sobre as caixas de texto, podemos editá-las, alterá-las, excluí-las ou inserir imagens. Fica a cargo da sua criatividade.

Abaixo, mostraremos algumas formas de editar o template utilizado.

Lembrando que não estamos modificando a estrutura do template utilizado, apenas realizando algumas alterações para se encaixar na página que desejamos criar.

Para alterar o texto, basta clicar sobre componente desejado e inserir o novo texto. Na barra lateral direita, é possível aumentar a fonte, centralizar o texto, alterar a cor, entre outras opções.

É possível também excluir todo o componente ou toda seção a qual este componente pertence, como mostra na imagem abaixo:

Outra opção é poder alterar as imagens, como mostra na imagem abaixo. Clicando na imagem padrão do template, basta procurar na lateral direita a URL da nova imagem e inseri-la.

Abaixo, veremos o Portfólio criado com a ferramenta.

Concluindo:

Neste artigo vimos o quão fácil é criar uma página web com o Pingendo, mesmo que você não tenha tanto conhecimento em programação.

Vale ressaltar que, apesar de ser uma ferramenta de fácil utilização, é importante aprender as tecnologias que envolvem a criação de páginas web (HTML/CSS/JavaScript) pois, desta forma, você poderá criar páginas personalizadas ou até mesmo manipular o código dos templates utilizados pelo Pingendo.

Formação:
CONHEÇA A FORMAÇÃO