Reino Kawaii

Olá! No post 5 Ferramentas Online Úteis para Blogueiros, citei o Codepen como uma delas e até já mostrei alguns efeitos e animações feitos por usuários de lá; alguns leitores me pediram para mostrar como usá-lo nas postagens e farei isso nesse post.

Primeiro: o que é Codepen? É uma ferramenta online para profissionais e iniciantes em HTML, JavaScript e CSS criarem, testarem, ensinarem e aprenderem códigos para finalidades diversas; foi criado por Alex Vazquez, Tim Sabat e Chris Coyier. Funciona de modo gratuito, ideal para quem apenas curte HTML mas não se profissionalizou, e pago, para quem já é ou pretende ser expert, com mais recursos.
E por que eu recomendo e uso? O ideal do site é que as pessoas compartilhem e testem seus conhecimentos sem limitações. Por exemplo, para usá-lo para testes, você nem precisa se cadastrar. Basta usar o editor; mas se quiser salvar seus códigos, o Cadastro seria interessante. Eu me cadastrei, mas uso apenas para testes mesmo dos tutoriais que posto aqui no blog.


Esse editor é muito legal, pode ser incorporado e usado como Syntax Highlighter mostrando codificação e resultado do que fizer e ele é padrão, você verá o que os outros fazem também!
Estando cadastrado gratuitamente, é possível publicar posts e criar um blog com feeds, receber feedback por comentários e comentar, favoritar, colecionar, trabalhar em códigos feitos por outras pessoas, descrever seus códigos, mudar a aparência do editor...você tem direito a perfil, pode ter seguidores e seguir também.
Vamos ver então como usar de modo bem básico, por exemplo, quando quiser criar um código, clique em New Pen.
O Editor vai abrir com as opções HTML (códigos da parte visível), CSS (estilos, que no blogger a gente usa antes de /b:skin ou entre <style> e </style>) e JS (scripts completos). Tem também a área de visualização. No rodapé, você pode mudar o layout de visualização do editor. Quando terminar, clique em Save. Depois, em Info, você adiciona informações, como título, descrição e tags.