codepen

Codepen: o que é, como funciona e quais as vantagens?

Com a grande diversidade de ferramentas e plataformas voltadas ao aprendizado da programação, tornar-se uma pessoa programadora hoje está mais fácil do que nunca.

Além de uma imensa quantidade de conteúdo de qualidade disponível na internet, cursos online e escolas de programação especializadas na formação deste tipo de profissional, há muitas plataformas que facilitam muito a compreensão prática do que é de fato programar, e uma delas é o CodePen.

Com o CodePen, qualquer pessoa pode acessar um editor online de códigos e começar a programar.

Com uma interface simples e de fácil compreensão, esta é uma das ferramentas-chave para quem deseja ensinar ou aprender programação.

Hoje, explicarei mais sobre esta ferramenta, como utilizá-la e quais são as suas principais configurações e vantagens.

Vamos lá?

O que é o CodePen?

O CodePen é um ambiente online para desenvolvimento e execução de códigos front-end criados em HTML, CSS e JavaScript.

Um de seus grandes diferenciais é que, além de ser um ótimo editor de códigos, o CodePen também é uma espécie de rede social para programadores e estudantes: com ele é possível seguir pessoas, curtir outros projetos e comentar nos códigos de outros profissionais.

Cada um desses códigos fica armazenado e salvo no ambiente onde ele foi desenvolvido, chamado de pen.

Um usuário pode criar quantos pens desejar, por isso a plataforma também pode ser uma ótima forma de montar um portfólio de programação para iniciantes.

Os editores de códigos online também são alternativas viáveis para quem, por alguma razão, não pode ter um software de edição de código instalado em sua máquina, como VS Code, Atom ou Sublime.

O CodePen pode ser acessado de computadores, tablets ou smartphones.

Como funciona?

Uma das maiores vantagens do CodePen é sua interface extremamente simples.

Além de um uso bastante intuitivo, ele ainda conta com a vantagem de não exigir absolutamente nenhuma instalação externa para ser utilizada: todos os ambientes e funções funcionam 100% online.

Para começar a explorar a ferramenta são necessários apenas o acesso à internet e um navegador web.

Acessando o site

Para começar a desenvolver seus códigos, basta acessar o site https://codepen.io/ e clicar, no menu à esquerda, em Start Coding.

Mas, como eu disse logo acima, o CodePen não é apenas um editor de códigos, mas também uma espécie de rede onde projetos podem ser compartilhados e expostos a outros profissionais da comunidade.

Ao criar uma conta, além de poder salvar todos os pens que criou, você ainda possui um perfil que pode ser seguido e visualizado por outros usuários.

Para isso, clique em Sign Up, no canto superior direito, e faça seu cadastro.

É possível se registrar na plataforma a partir de contas em outras redes sociais, como Twitter, Facebook e GitHub.

Configurando o layout do editor

O layout do editor é muito simples.

Conforme é possível ver na imagem abaixo, lá estão três boxes de criação de códigos. O primeiro, de HTML; o segundo, de CSS e, o terceiro, para JavaScript.

Os dois primeiros boxes são voltados a linguagens de marcação, enquanto o terceiro de fato programa e manipula os dois primeiros.

Na parte branca inferior, os códigos são renderizados e executados. É possível ver, em tempo real, o resultado do que está sendo desenvolvido acima.

A disposição padrão dos elementos é a dos três boxes lado a lado na parte inferior da tela, enquanto o espaço de renderização fica abaixo, mas é possível alterar essa configuração.

Para arranjar os itens de outra forma, clique em Change View no menu superior direito e escolha a opção desejada.

Executando

Os códigos desenvolvidos no CodePen, por padrão, são executados automaticamente no espaço em branco que toma parte da tela.

Porém, é possível alterar uma configuração para que a renderização só aconteça quando você preferir.

Para isso, vá em Settings, no canto superior direito, depois em Behavior, no menu à esquerda do box que abrirá em seguida.

Para desativar a execução automática, desabilite a opção Auto-Updating Preview.

Ao alterar essa configuração, ficará disponível no menu superior do seu pen um botão Run. Para executar suas alterações de código, basta clicar nele.

Neste menu também é possível desabilitar a função de salvamento automático.

Se você deseja levar e executar seus códigos em outro ambiente, é possível salvar os pens criados no CodePen em sua conta do GitHub através da integração entre as duas plataformas.

Onde meus códigos ficam armazenados?

Todos os pens criados pelos usuários do CodePen ficam armazenados em seus perfis.

Isso significa que, para acessá-los novamente, é necessário voltar ao site e encontrá-los na sessão Your Work.

Uma das vantagens desse armazenamento em nuvem é a possibilidade de poder acessá-lo de qualquer lugar, ainda que você esteja sem sua própria máquina. Basta acessar à internet de qualquer dispositivo.

É possível, ainda, acessar os seus códigos a partir do perfil de outro usuário. Para isso, será necessário encontrar o seu perfil dentro da rede e, então, buscar pelos seus pens disponíveis.

Como compartilhar ou emprestar um projeto?

Por ser uma rede colaborativa, o CodePen é uma ótima plataforma para compartilhamento de projetos.

Ao acessar o site a partir do seu login, o usuário é redirecionado para uma página /Trending com os pens mais populares do momento.

A partir daí, é possível explorar milhares de códigos diferentes, vê-los em modo de edição, interagir com seus códigos e seguir os perfis que os desenvolveram.

Com a opção Fork, disponível no canto inferior direito da tela, você pode copiar um pen e salvá-lo no seu dashboard.

Se você está usando o CodePen enquanto estudante, a possibilidade de analisar códigos de outros profissionais é uma mina de ouro de conhecimento!

Para compartilhar um pen criado por você, basta clicar no botão Share, também no canto inferior direito da tela.

As opções de compartilhamento incluem enviar o código para o seu celular através de um SMS, compartilhá-lo nas redes sociais Twitter e Facebook, gerar um link compartilhável diretamente para o seu pen ou compartilhar seu código no DEV, uma comunidade internacional de desenvolvedores.

Quais as vantagens de usar o CodePen?

Os benefícios no uso de plataformas como o CodePen são inúmeros!

A facilidade em acessar um editor de códigos de qualidade sem precisar de grande poder computacional, por exemplo, é um dos maiores atrativos do CodePen.

Além disso, a possibilidade de estudar desenvolvendo e analisando códigos de maneira interativa e didática é uma grande aliada para a curva de aprendizado de jovens programadores.

Abaixo, desenvolverei melhor as principais vantagens do uso do CodePen para diversos tipos de usuários.

Interativo

O CodePen é extremamente interativo.

Por ser uma mistura de editor de código com rede social, as opções de compartilhamento, interação e edição de códigos de terceiros torna sua utilização muito animada.

O CodePen também possibilita a criação de projetos por mais de uma pessoa, dividindo assim um código entre um ou mais desenvolvedores sem que seja necessária a instalação de softwares e envio de arquivos de um para o outro.

HTML, CSS, JavaScript em um só lugar

Nos editores do CodePen, HTML, CSS e JavaScript já estão vinculados.

Isto é, na hora de desenvolver o seu código, não é necessário criar nenhuma conexão entre eles, basta que cada uma das linguagens seja escrita e todas elas serão renderizadas juntas.

No box de HTML, por exemplo, ao começar um código, é como se ele já estivesse dentro da classe <body>, sem a necessidade de descrevê-la no editor.

Testagem em tempo real

Habilitada a opção de renderização automática, é possível testar seus códigos em tempo real. Isso é muito importante na hora de identificar erros e falhas.

Com o adicional de cada linguagem estar separada em um box específico, encontrar um erro também se torna ainda mais fácil para programadores que ainda não acumularam muita experiência no exercício da profissão.

Modo Professor

Para quem ensina programação, o CodePen é um ótimo companheiro!

Isso porque, graças à função Modo Professor, é possível criar uma sala da aula dentro da plataforma.

Nestas salas de aula, um grupo de alunos pode ver em tempo-real a criação e a edição de um código e o professor é o administrador do espaço. É possível agrupar até 100 pessoas em uma mesma sala de aula virtual.

Essa função, porém, só está disponível para os planos pagos da ferramenta (PRO).

Esta funcionalidade viabiliza cursos online e pode ser utilizada até mesmo dentro de uma sala de aula física.

Para ativar o modo professor, clique no botão Change View, no menu superior direito, e depois selecione a opção Professor Mode.

Modo apresentação

Além do modo professor, o Modo Apresentação do CodePen também pode ser utilizado por professores e instrutores de programação.

Com esta função, é possível transformar o seu pen em uma apresentação com melhores condições de visualização, como tema claro ou escuro, tamanho da fonte e tamanho da pré-visualização da execução do código.

Com o modo apresentação é possível, ainda, apresentar projetos em ambiente profissional e trabalhos de conclusão de curso para estudantes.

Para ativar esta funcionalidade, clique em Change View no canto superior direito do seu pen e selecione a opção Presentation Mode.

Além destas duas formas de visualização, a versão PRO do CodePen ainda conta com as funções Collab Mode e Live View.

Com o Collab Mode é possível criar um pen que pode ser editado por mais de uma pessoa ao mesmo tempo. O modo de colaboração auxilia a criação de projetos por grupos de alunos ou por mais de um programador em ambiente profissional.

O Live View, por sua vez, também permite que a edição de um código seja assistida em tempo real por outros usuários, no entanto apenas um tem autoridade para editá-lo.

Configurações do CodePen

O CodePen é uma ferramenta super versátil e conta com uma infinidade de configurações voltadas à personalização do seu ambiente de criação de códigos.

É possível configurar, em cada uma das linguagens disponíveis, particularidades como pré-processadores e adicionar scripts externos.

Veja abaixo as configurações para HTML:

Veja abaixo as configurações disponíveis para CSS:

Veja, na imagem abaixo, as configurações disponíveis para JS:

Outras configurações de pen são:

  • Detalhes como nome, descrição e tags;
  • Opção de manter um pen privado (PRO);
  • Desabilitar comportamentos como salvamento automático, renderização automática e formatação ao salvar;
  • Tipo de indentação do editor (espaços ou tabulações);
  • Transformar um pen em um template pré-estabelecido. A partir de um pen deste tipo, é possível começar um código sempre de uma determinada configuração;
  • Screenshot ou thumbnail personalizada para visualização do pen (PRO).

Como aprender a usar o CodePen?

Se você pretende estudar programação a Kenzie Academy Brasil é o seu lugar!

Com o curso de programação full stack, você terá a oportunidade de se formar um programador completo em apenas 12 meses, pronto para atuar tanto com front como em back-end.

Além do CodePen, você aprenderá a manusear diversos editores de código, bem como outras ferramentas de programação, como bibliotecas, frameworks e etc.

A metodologia exclusiva é totalmente voltada para a realidade do mercado de trabalho, contando com disciplinas de preparação para a vida profissional, como gestão de tempo e produtividade, comunicação eficiente, construção de marca pessoal e treinamento para entrevistas técnicas.

Com a Kenzie você ainda tem a opção de só começar a pagar pelos seus estudos após concluí-los!

Com o método de pagamento ISA (Income Share Agreement), você só começa a pagar pelo curso após sua colocação no mercado com uma remuneração mínima de R$ 3.000,00.

Conclusão

Acesse o CodePen, personalize seu ambiente de programação e comece a programar agora mesmo!

A Kenzie Academy é uma escola americana de programação para desenvolvedores, em que você estuda por 12 meses, em tempo integral, as principais linguagens do mercado para entrar no mercado de tecnologia atuando como um Full Stack.

Aproveite e já se inscreva gratuitamente na Experiência Kenzie: Introdução à Programação com JavaScript: https://participe.kenzie.com.br/curso-javascriptum curso online, gratuito, com mais de 80 horas de conteúdo para você assistir quando quiser, suporte para tirar dúvidas em tempo real e acesso exclusivo a uma comunidade no slack para receber conteúdos sobre carreira, tecnologia e programação, além de interagir com os outros participantes!

Inscreva-se agora e comece seu futuro hoje!

Leia também:

0
Escreva o primeiro comentário

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *