{"id":42266,"date":"2023-07-07T10:30:00","date_gmt":"2023-07-07T13:30:00","guid":{"rendered":"https:\/\/www.locaweb.com.br\/blog\/?p=42266"},"modified":"2024-07-30T17:36:59","modified_gmt":"2024-07-30T20:36:59","slug":"codepen-conheca-tudo-sobre-essa-ferramenta","status":"publish","type":"post","link":"https:\/\/www.locaweb.com.br\/blog\/temas\/codigo-aberto\/codepen-conheca-tudo-sobre-essa-ferramenta\/","title":{"rendered":"CodePen: conhe\u00e7a tudo sobre essa ferramenta"},"content":{"rendered":"\n

A combina\u00e7\u00e3o entre um ambiente de desenvolvimento de c\u00f3digos e uma rede social tem auxiliado muitos programadores e designers.<\/em><\/p>\n\n\n\n

O mundo da programa\u00e7\u00e3o \u00e9 bastante promissor e tem gerado renda para muitos profissionais no mercado. Atualmente, existem diversos cursos dispon\u00edveis que podem te ensinar a programar do zero<\/strong> os seus primeiros aplicativos, sites e jogos. <\/p>\n\n\n\n

Por\u00e9m, esse ambiente tamb\u00e9m pode ser bastante desafiador<\/strong>, e ter uma ferramenta ao seu lado que facilite esse processo \u00e9 essencial. Por isso, muitos profissionais est\u00e3o recorrendo a uma nova ferramenta: o CodePen. <\/strong><\/p>\n\n\n\n

Neste artigo vamos explicar exatamente como essa ferramenta funciona, para quais trabalhos utiliz\u00e1-la e ensinar voc\u00ea a dar os primeiros passos nela. Vamos l\u00e1? <\/p>\n\n\n\n

O que \u00e9 o CodePen?<\/strong> <\/h2>\n\n\n\n

O CodePen \u00e9, ao mesmo tempo, um ambiente de desenvolvimento de c\u00f3digos e uma rede social<\/strong>. Ou seja, al\u00e9m de ter em m\u00e3os um editor de c\u00f3digos de programa\u00e7\u00e3o, o CodePen permite que usu\u00e1rios compartilhem, curtam, comentem e cooperem em trabalhos de outros programadores<\/strong>, gerando uma intera\u00e7\u00e3o entre a comunidade. <\/p>\n\n\n\n

O foco principal da ferramenta \u00e9 em trabalhos com c\u00f3digos front-end<\/strong>, que representam a parte vis\u00edvel de um software, como imagens animadas, por exemplo. O CodePen trabalha com c\u00f3digos em HTML, CSS e JavaScript<\/strong>. <\/p>\n\n\n\n

A melhor parte dessa ferramenta \u00e9 que voc\u00ea n\u00e3o precisa instalar um programa, comprar assinaturas ou algo do tipo; \u00e9 poss\u00edvel fazer tudo pelo site codepen.io<\/a><\/strong>,<\/a> isso torna mais f\u00e1cil para os desenvolvedores trabalharem em diferentes sistemas sem a necessidade de configurar um ambiente de desenvolvimento local em cada um deles. <\/p>\n\n\n\n

Al\u00e9m de descobrir e compartilhar novos c\u00f3digos, muitos programadores usam o CodePen como um portf\u00f3lio<\/strong>, nos moldes do Pinterest (para desenhos e fotos) e do LinkedIn.  <\/p>\n\n\n\n

Leia tamb\u00e9m<\/strong>: Comunidade Open Source: Como contribuir al\u00e9m do c\u00f3digo?<\/a> <\/p>\n\n\n\n

Como usar o CodePen?<\/strong> <\/h2>\n\n\n\n

O primeiro passo \u00e9 entrar no site<\/a> da plataforma. Depois, voc\u00ea deve criar uma conta para ter um perfil pr\u00f3prio e poder acessar todas as funcionalidades do site.

Em seguida, basta ir no bot\u00e3o verde que fica no canto superior direito e seguir os passos recomendados. Logo ap\u00f3s seguir os passos, voc\u00ea estar\u00e1 pronto para usar o CodePen! <\/p>\n\n\n

\n
\"interface
Tela de in\u00edcio do CodePen. (Fonte: CodePen\/Reprodu\u00e7\u00e3o) <\/figcaption><\/figure>\n<\/div>\n\n\n

Logo no in\u00edcio, h\u00e1 um menu no canto superior esquerdo com as palavras “Start Coding”, que podem ser traduzidas como “comece a codificar”. Voc\u00ea tamb\u00e9m pode encontrar c\u00f3digos j\u00e1 criados e contratar o servi\u00e7o premium do site.<\/p>\n\n\n\n

Com a sua conta j\u00e1 criada, d\u00e1 para come\u00e7ar a explorar todas as funcionalidades da plataforma! A p\u00e1gina inicial de um usu\u00e1rio logado apresenta algumas informa\u00e7\u00f5es importantes, como c\u00f3digos que est\u00e3o em alta na plataforma, trabalhos de pessoas que voc\u00ea escolheu seguir e projetos que est\u00e1 realizando nesse momento<\/strong>.  <\/p>\n\n\n\n

Al\u00e9m disso, o menu esquerdo apresenta a op\u00e7\u00e3o de come\u00e7ar a criar um novo trabalho, pesquisar projetos salvos, buscar pessoas interessantes<\/strong> para seguir e at\u00e9 cumprir desafios para incentivar a criatividade. <\/p>\n\n\n

\n
\"interface
Tela inicial ap\u00f3s o login. (Fonte: CodePen\/Reprodu\u00e7\u00e3o)<\/figcaption><\/figure>\n<\/div>\n\n\n

Criando o seu primeiro trabalho<\/strong> <\/h3>\n\n\n\n

Antes de come\u00e7ar efetivamente, \u00e9 preciso entender os passos para iniciar um projeto do zero dentro da plataforma. Ao clicar no menu “Pen”, voc\u00ea ser\u00e1 direcionado para o layout do editor, onde seus projetos ser\u00e3o desenvolvidos. <\/p>\n\n\n\n

L\u00e1 \u00e9 poss\u00edvel perceber tr\u00eas caixas de cria\u00e7\u00e3o, cada uma com uma fun\u00e7\u00e3o espec\u00edfica, no caso HTML, CSS e JavaScript. Os dois primeiros s\u00e3o voltados para a linguagem de marca\u00e7\u00e3o, e o JavaScript pode controlar o que \u00e9 feito pelo HTML e CSS. <\/p>\n\n\n

\n
\"interface
Layout de edi\u00e7\u00e3o. (Fonte: CodePen\/Reprodu\u00e7\u00e3o) <\/figcaption><\/figure>\n<\/div>\n\n\n

A tela branca \u00e9 onde os projetos ser\u00e3o renderizados e executados. Uma das partes mais legais \u00e9 acompanhar em tempo real o que est\u00e1 sendo desenvolvido<\/strong>, o que permite um controle muito interessante para o criador. <\/p>\n\n\n\n

As configura\u00e7\u00f5es de tela podem ser alteradas<\/strong> conforme as prefer\u00eancias de quem est\u00e1 codificando. Os boxes podem ser alinhados na parte de cima, ao lado direito ou esquerdo, para isso, basta clicar no terceiro bot\u00e3o do canto superior direito, logo ao lado de “<\/em>Settings”, cujo nome \u00e9 <\/em>“Change View”. <\/p>\n\n\n\n

O bot\u00e3o “Settings” tamb\u00e9m conta com algumas funcionalidades interessantes, como aplicar tags, descri\u00e7\u00f5es, salvamento autom\u00e1tico, formas de renderiza\u00e7\u00e3o e outras configura\u00e7\u00f5es do seu projeto.  <\/p>\n\n\n\n

Voc\u00ea pode salvar seu projeto clicando em <\/em>“Save”, com o \u00edcone de nuvem ao lado.  <\/p>\n\n\n\n

Encontrando os projetos salvos<\/strong> <\/h3>\n\n\n\n

Na tela principal da p\u00e1gina inicial, ou no menu do lado esquerdo, voc\u00ea encontra a aba “Your Work”<\/strong>, na qual voc\u00ea pode abrir os seus projetos salvos e organiz\u00e1-los. L\u00e1 voc\u00ea tamb\u00e9m pode ver quantas visualiza\u00e7\u00f5es, curtidas e coment\u00e1rios cada um de seus projetos recebeu. <\/p>\n\n\n\n

Eles ficam armazenados em uma nuvem, o que possibilita que voc\u00ea os acesse em qualquer dispositivo de forma pr\u00e1tica. <\/p>\n\n\n\n

Leia tamb\u00e9m<\/strong>: Data visualization: como aplicar a t\u00e9cnica no gr\u00e1fico de linhas?<\/a> <\/p>\n\n\n\n

Compartilhando projetos<\/strong> <\/h3>\n\n\n\n

Uma das funcionalidades do CodePen \u00e9 a possibilidade de compartilhar, curtir e comentar em projetos realizados por usu\u00e1rios. Para compartilhar os seus, basta clicar no bot\u00e3o “Share”, que fica no canto inferior direito da tela.  <\/p>\n\n\n

\n
\"\"
Fun\u00e7\u00f5es “Share”, “Export” e “Fork”. (Fonte: CodePen\/Reprodu\u00e7\u00e3o) <\/figcaption><\/figure>\n<\/div>\n\n\n

A fun\u00e7\u00e3o de compartilhamento tamb\u00e9m permite que voc\u00ea envie o trabalho por meio de outras redes sociais, como por exemplo WhatsApp, Twitter, Facebook etc.  <\/p>\n\n\n\n

Outra funcionalidade bastante interessante \u00e9 o “Fork”, que permite que voc\u00ea copie um projeto j\u00e1 existente para o seu dashboard<\/strong>. Essa ferramenta \u00e9 muito \u00fatil para estudantes e iniciantes na \u00e1rea da programa\u00e7\u00e3o e design. <\/p>\n\n\n\n

Fun\u00e7\u00f5es pagas<\/strong> <\/h2>\n\n\n\n

Assim como outras ferramentas, o CodePen tem algumas fun\u00e7\u00f5es que est\u00e3o dispon\u00edveis apenas nas vers\u00f5es pagas do site<\/strong>, chamada de CodePen Pro. <\/p>\n\n\n\n

Al\u00e9m de evitar an\u00fancios que existem dentro da plataforma, os planos permitem maior capacidade de armazenamento, arquivos mais pesados, projetos ilimitados e um n\u00famero maior de contas compartilhando os benef\u00edcios<\/strong>. <\/p>\n\n\n\n

Algumas dessas fun\u00e7\u00f5es podem ser interessantes para empresas e pessoas que lidam com volumes grandes de projetos. Por\u00e9m, a vers\u00e3o gratuita j\u00e1 \u00e9 capaz de oferecer um \u00f3timo local de trabalho, especialmente para iniciantes<\/strong>. <\/p>\n\n\n\n

Modo professor<\/strong> <\/h3>\n\n\n\n

O modo professor \u00e9, provavelmente, a fun\u00e7\u00e3o mais interessante da vers\u00e3o Pro. Nele voc\u00ea tem a capacidade de criar uma sala dentro da plataforma para que um aluno possa codificar com a ajuda de um professor<\/strong>, que o estar\u00e1 observando todo o desenvolvimento do projeto. <\/p>\n\n\n\n

Mais do que isso, \u00e9 poss\u00edvel agrupar at\u00e9 100 pessoas dentro de uma sala, oferecendo aos educadores e institui\u00e7\u00f5es de ensino uma \u00f3tima op\u00e7\u00e3o para formar novos programadores. <\/p>\n\n\n\n

Benef\u00edcios de usar o CodePen no seu trabalho<\/strong> <\/h2>\n\n\n\n

O CodePen chegou para revolucionar a forma de se criar c\u00f3digos <\/em>front-end. Entre os maiores benef\u00edcios podemos citar:  <\/p>\n\n\n\n

1. Conex\u00e3o com o mercado<\/strong> <\/h3>\n\n\n\n

Poder se conectar com v\u00e1rios profissionais da \u00e1rea, apresentar um portf\u00f3lio, conversar com pessoas mais experientes e se inspirar em diversos projetos s\u00e3o alguns dos pontos fortes da plataforma<\/strong>, que se comporta como uma rede social. <\/p>\n\n\n\n

Al\u00e9m disso, o usu\u00e1rio tamb\u00e9m pode criar projetos em grupo, o que torna a coopera\u00e7\u00e3o criativa menos burocr\u00e1tica e mais f\u00e1cil de ser aplicada.  <\/p>\n\n\n\n

Por isso, estudantes e programadores inexperientes podem fazer uso do networking <\/em>que \u00e9 oferecido pelo CodePen para encontrar boas vagas no mercado e se estabelecer ainda mais na profiss\u00e3o.  <\/p>\n\n\n\n

2. Educa\u00e7\u00e3o<\/strong> <\/h3>\n\n\n\n

Algumas ferramentas do CodePen podem contribuir muito para a forma\u00e7\u00e3o e a educa\u00e7\u00e3o de novos programadores e designers<\/strong>. O modo professor \u00e9 muito interessante para aulas online interativas, assim como a possibilidade de usar projetos da plataforma como refer\u00eancia para trabalhos e apresenta\u00e7\u00f5es. <\/p>\n\n\n\n

Existe tamb\u00e9m o modo apresenta\u00e7\u00e3o, que facilita a exposi\u00e7\u00e3o de projetos por parte de professores e alunos em sala de aula.  <\/p>\n\n\n\n

3. Teste em tempo real<\/strong> <\/h3>\n\n\n\n

Observar o seu projeto ganhando vida diante dos seus olhos \u00e9 uma fun\u00e7\u00e3o que facilita o fluxo de trabalho<\/strong> e ajuda o desenvolvedor a ter ideias diferentes. Para isso, \u00e9 importante que o usu\u00e1rio ative a fun\u00e7\u00e3o de renderiza\u00e7\u00e3o autom\u00e1tica, que \u00e9 um dos grandes diferenciais da plataforma.  <\/p>\n\n\n\n

4. HTML, CSS e JavaScript vinculados<\/strong> <\/h3>\n\n\n\n

Dentro do CodePen voc\u00ea n\u00e3o precisa criar v\u00ednculos entre o HTML, CSS e o JavaScript, j\u00e1 que a plataforma faz isso de maneira autom\u00e1tica<\/strong>. Isso facilita muito o processo de produ\u00e7\u00e3o, tornando o trabalho mais f\u00e1cil e intuitivo.  <\/p>\n\n\n\n

VPS \u00e9 Locaweb<\/strong> <\/h2>\n\n\n\n

Se voc\u00ea \u00e9 um empreendedor do mundo digital e precisa de um servidor de qualidade para o seu site, chegou a hora de conhecer o VPS da Locaweb! <\/p>\n\n\n\n

Os Virtual Private Servers (VPS) s\u00e3o servidores virtuais criados dentro de uma m\u00e1quina f\u00edsica. Com eles, voc\u00ea pode hospedar um site e toda a estrutura que ele precisa, mas sem o alto custo de uma m\u00e1quina dedicada<\/strong>. \u00c9 uma solu\u00e7\u00e3o com \u00f3timo custo-benef\u00edcio para quem est\u00e1 come\u00e7ando no meio virtual e precisa de seguran\u00e7a e praticidade sem gastar uma fortuna.  <\/p>\n\n\n\n

<\/p>\n\n\n\n

Conhe\u00e7a os diferenciais do VPS da Locaweb!\u00a0<\/p>Saiba mais<\/a><\/div>\n","protected":false},"excerpt":{"rendered":"

A combina\u00e7\u00e3o entre um ambiente de desenvolvimento de c\u00f3digos e uma rede social tem auxiliado muitos programadores e designers. O mundo da programa\u00e7\u00e3o \u00e9 bastante promissor e tem gerado renda para muitos profissionais no mercado. Atualmente, existem diversos cursos dispon\u00edveis que podem te ensinar a programar do zero os seus primeiros aplicativos, sites e jogos.  […]<\/p>\n","protected":false},"author":24,"featured_media":42276,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[5],"tags":[],"class_list":["post-42266","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-codigo-aberto"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.locaweb.com.br\/blog\/wp-json\/wp\/v2\/posts\/42266","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.locaweb.com.br\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.locaweb.com.br\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.locaweb.com.br\/blog\/wp-json\/wp\/v2\/users\/24"}],"replies":[{"embeddable":true,"href":"https:\/\/www.locaweb.com.br\/blog\/wp-json\/wp\/v2\/comments?post=42266"}],"version-history":[{"count":6,"href":"https:\/\/www.locaweb.com.br\/blog\/wp-json\/wp\/v2\/posts\/42266\/revisions"}],"predecessor-version":[{"id":44927,"href":"https:\/\/www.locaweb.com.br\/blog\/wp-json\/wp\/v2\/posts\/42266\/revisions\/44927"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.locaweb.com.br\/blog\/wp-json\/wp\/v2\/media\/42276"}],"wp:attachment":[{"href":"https:\/\/www.locaweb.com.br\/blog\/wp-json\/wp\/v2\/media?parent=42266"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.locaweb.com.br\/blog\/wp-json\/wp\/v2\/categories?post=42266"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.locaweb.com.br\/blog\/wp-json\/wp\/v2\/tags?post=42266"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}