https://becode.com.

br/top-sites-para-quem-esta-aprendendo-a-programar/

Top 48 sites e ferramentas para quem está aprendendo a

programar!
Reunimos 48 sites e ferramentas que consideramos essenciais para acelerar o processo de quem está
aprendendo a programar, confira!

Você, ao navegar pela web, acaba indo sempre nos mesmos “lugares” e nos mesmo websites? Sim, isso é bem
comum, não se preocupe. Nem sempre conseguimos memorizar todas as páginas e sites interessantes que
visitamos.

Contudo, hoje em dia, existem sites e ferramentas que foram criados especificamente para essa finalidade,
armazenar seus links favoritos na web, de uma forma organizada e prática. Então, sabe aquele site ou post
interessante que você achou na web, mas que no momento você não está nem um pouco afim de ler, que tal
salvar o link para depois?

“Ok, mas isso não é igual a salvar nos favoritos?”

É, mais ou menos, mas salvar nos favoritos é uma ciência…

Brincadeiras à parte, você precisa ser muito organizado para os seus favoritos não serem transformados em
uma eterna bagunça!

E esses sites dificultam a criação de uma “eterna bagunça”? Afinal de contas, organização significa mais
produtividade, por isso, organizar as informações é um ponto crítico para profissionais de TI.

Sendo assim, a primeira dica desse post é a seguinte, escolha uma das ferramentas abaixo para salvar os links
dos websites e ferramentas que você irá conhecer nesse post!
  Pocket
 Google Bookmarks
 del.icio.us
 Booky.io
 Saved.io

Se você, assim como eu, não gosta da ideia desses “sistemas de favoritos” ou extensões e outros recursos
similares, utilize os favoritos do navegador.

Mas lembre-se, você precisa ser extremamente organizado!

Enfim…

Vamos ao objetivo desse post.

Independente da forma de organização escolhida você precisa saber que existem websites que você deve usar
como referência para determinados assuntos, como: web design, programação back-end, front-end,
servidores, organização e a lista vai longe…

Então, para facilitar sua busca, vou listar abaixo alguns websites que, em nossa opinião, são fundamentais
para aperfeiçoar cada vez mais as suas habilidades como programador.

A “origem” da Web

O W3C é o lugar onde você encontrará informações oficiais sobre a origem da web e as tecnologias
relacionadas a ela. É um site mais informativo mesmo, sem códigos ou dicas.

 w3c.org

Calma, não está “tudo resolvido” por causa de UM website que mostra um pouquinho como cada coisa
funciona, até porque, este site é muito mais útil se você já possui algum conhecimento prévio na área.
Se você está iniciando, recomendo um curso (online ou presencial), onde você irá sanar todas as dúvidas de
forma clara e ter uma orientação profissional mais direcionada. Nesse caso, claro, recomendamos a Becode
(para cursos online) e a TargetTrust (para cursos presenciais).

 Becode
 TargetTrust

Layouts e Efeitos Visuais

Eu poderia listar diversos websites bonitos, com experiência de usuário (UX) impecável, com efeitos visuais
efetivos, rápidos e agradáveis, ou até mesmo minimalistas e conceituais, mas altamente funcionais e
objetivos. Contudo, gosto é gosto e o meu é diferente do seu, além do fato que o design de uma página web
irá variar conforme a necessidade específica e tipo de informação a ser divulgada.

Entretanto, uma coisa é certa, o google sabe a preferência e gostos da média da população mundial, portanto,
abaixo listo dois websites que gosto de acompanhar e que não por acaso correspondem às primeiras posições
do google para o seguinte termo de pesquisa (“top web design pages”):

 The Best Designs

 Awwwards.com

O interessante nesses dois websites é que ambos possibilitam a procura por preferências e categorias, entre
elas: flat, mobile, clean, promotional, ecommerce, corporate, animations, UX/UI, SEO, WordPress, HTML5,
CSS3, JavaScript, enfim… conforme a necessidade específica do projeto que você estiver envolvido naquele
momento.

Templates

Sempre que você começar um projeto web, você possui duas opções: começar do zero ou partir de um
modelo (template). Na primeira opção você estará se testando (“será que eu realmente consigo partir do
zero?”), na segunda, você estará aproveitando algo que já foi construído para melhorá-lo. Lembrando, não
existe certo ou errado, grandes websites e apps hoje extremamente valiosos começaram a partir de
templates.

Vamos lembrar de um caso famoso, a Microsoft “copiou” a interface gráfica da Apple que, por sua vez, já
havia “copiado” a interface gráfica da Xerox.

Em outras palavras, a Apple utilizou o “template” da Xerox e reformulou, após, a microsoft fez o mesmo com
a Apple.

Claro, hoje estes mesmos sistemas estão irreconhecíveis, quando comparados com a suas versões originais,
pois trata-se de um processo de evolução, ou seja, conforme você vai adquirindo habilidades, mais aquele
projeto torna-se original e, digamos, com a sua “cara”.

Mas vamos lá, templates são excelentes, ainda mais para quem está no início! Sendo assim, abaixo
destacamos alguns links que irão proporcionar ótimas referências de layouts e templates de todos os
formatos e licenças (pagas ou gratuitas)

 Templatemonster.com (pago)
 Themeforest (pago)
 Wrapbootstrap (pago)
 Templated (gratuito)

Lembrando que, além desses, existem os templates gratuitos que você pode encontrar realizando a instalação
de qualquer CMS (WordPress, Joomla, Magento, etc).

Padronização de cores

Nem todo mundo possui um lado designer, mas isso não é motivo para sairmos criando projetos desleixados e
sem compatibilidade entre as cores empregadas. Para isso, existem websites muito interessantes para ajudar
na padronização de cores e design:

 Flat UI Colors

Ferramenta extremamente simples (e ao mesmo tempo incrível) que te apresenta apenas alguns tons de
cores flat para você começar a entender o conceito por trás desse estilo tão utilizado na web.
  Paletton.com

Paleta de cores que apresenta diversas variações de um determinado tom de cor (só utilizando para
entender). Além disso, essa ferramenta possui uma função “randomize” que irá apresentar opções para
combinar cores, mostrando cores similares, não similares, com estilos parecidos, enfim, vale uma visita.

 Color.adobe.com

Excelente para copiar os códigos RGB e HEX e aplica-los no seu projeto. Além disso, ele mostra cores nas mais
diversas regras: análogo, monocromático, tríade, complementar, composto, sombras e personalizado.

 Collorzilla

Plugin para o seu browser (chrome ou Firefox) utilizado para copiar o código RGB, HEX ou HSL de qualquer
página web, ou seja, você deseja utilizar o mesmo tom de azul utilizado pelo facebook, desde que você não
pratique plágio, essa é a sua ferramenta. Funciona como o conta-gotas de qualquer software.

Tipografia

Bom, a mesma regra utilizada para combinar cores serve também para combinar tipografias, para isso, sugiro
um website muito simples e que sugere combinações de fontes para serem utilizadas em headings (h1,h2…) e
fontes de corpo <body>.

 Fontpair

Lembrando, priorize as fontes que possuem suporte para web, caso contrário você corre o risco de o seu
usuário final não possuir a fonte instalada no seu sistema particular e, portanto, ele provavelmente irá ver
uma fonte padrão, provavelmente, a serif, prejudicando a sua experiência de usuário.

 Google.com/fonts

Desenvolvimento Back-end

Aqui temos uma quantidade enorme de websites, blogs e fóruns que você precisa acompanhar, visando seguir
as melhores práticas de cada tecnologia.

Bom, irei separar por temas:

Linguagens de Programação – Sites Oficiais

  PHP (site oficial da linguagem PHP)
 Java (site oficial da linguagem Java)
 ASP .NET (site oficial da linguagem ASP.Net)
 Ruby on Rails (site oficial do framework Ruby on Rails)
 Python (site oficial da linguagem Python)

“Ah, mas eu programo em Delphi”

OK, aconselho você a procurar no google a página oficial da linguagem de programação Delphi. O importante
é ter uma referência oficial a respeito da tecnologia que você está utilizando.

Pacotes de Desenvolvimento

Nessa seção, irei mostrar um conjunto de softwares e serviços “empacotados” em um único instalador, por
exemplo, Apache + MySQL + PHP. Bem, você pode ter isso utilizando qualquer um dos serviços abaixo:

 Wampserver

Específico para Windows, permite criar aplicações web utilizando Apache2, PHP, MySQL, utilizando o
PhpMyAdmin para gerenciar facilmente seus bancos de dados.

 Xamppserver

Distribuição Apache contendo MariaDB, PHP e Perl. O pacote de código aberto do XAMPP foi criada para ser
extremamente fácil de instalar e de usar. Diferente do Wampserver (acima), o xampp também é perfeito para
Linux, OS X, além do Windows.

 Usbwebserver

Apresenta as mesmas funcionalidades das ferramentas citadas acima, contudo, ele pode ser utilizado em um
pen drive)

Todas as ferramentas citadas acima são extremamente úteis para mostrar versões offline de seu
website/aplicação para as partes interessadas, assim como, testá-lo antes de comprar um pacote de
hospedagem caro e, por vezes, complexo.

HTML e CSS

 Csszengarden

Diversas demonstrações do que pode ser atingido, em termos de design e UX, utilizando simplesmente CSS.
  Maujor.com

Muitas dicas sobre CSS.

 Tableless

Blog do Diego Eis sobre padrões web.

 Validator.w3.org

Escreveu seu HTML e quer testar, esse é o link.

 Jigsaw.w3.org

Está com dúvidas sobre seu CSS, teste aqui.

JavaScript e suas milhões de possibilidades

 jQuery.com

Conjunto de possibilidades extras com JavaScript.

 jQueryui.com

Exemplos de funcionalidades utilizando o jQuery.

 Dojotoolkit

Similar ao jQuery.com.
  Mootools

Similar ao jQuery, trata-se de uma coleção de utilidades designadas a desenvolvedores JavaScript de nível
intermediário e avançado.

 Bootstrap

O bootstrap é um dos frameworks mais conhecidos no mercado, podemos resumi-lo como um conjunto de
facilidades para projetos em HTML, CSS e JavaScript.

Gestão, organização e produtividade

Por fim, alguns facilitadores diversos, como sistemas de gestão de projetos, compartilhamento de código,
apresentação de projetos e entre outros.

Gerenciamento de Projetos

 Miauproject
 Runrun.it
 Basecamp (organização entre equipes)

Gerenciamento de tarefas

 Trello
 Kanbanize (Kanban)

Organização de projetos – Gantt

 Ganttpro.com
 Teamgantt.com
 Gantter.com

Mapas Mentais

 Mindmeister.com
Compartilhamento de código

 Github.com

E agora? Por onde começar…

Chegamos ao fim de nossa não muito pequena lista e, logicamente, não esperamos que você decore esses
links, até porque ninguém sabe por quanto tempo eles estarão disponíveis e provavelmente você não precisa
de todos os links, isso irá depender dos seus interesses e função que você almeja desempenhar ou continuar
desempenhando.

Mas sim, salve nos favoritos, ou ferramentas alternativas (início do post), aqueles links que de fato irão
agregar na sua atuação profissional. Você não precisa conhecer todos de uma vez só, vá com calma, faça uma
lista das ferramentas interessantes na sua opinião e conheça uma por dia, TESTE.

E se faltou alguma ferramenta nessa lista (provavelmente faltou, pois o universo da TI é gigantesco), nos conte
sobre essa ferramenta e porque você acha que ela merece um destaque nessa lista, iremos adorar ouvir a sua
opinião!

 A melhor forma de aprender lógica de programação!

 Os 5 principais cursos superiores de TI e suas diferenças!

Erick Scudero

Especialista em Marketing Digital e apaixonado por tudo que envolve o universo de tecnologia e comunicação.
Durante sua jornada na terra dos cangurus (Austrália), atuou em diversos projetos prestando consultoria em
questões de UX, SEO, Marketing Digital e modelos de negócio com foco em startups. É cofundador da Becode,
da M2up e instrutor de cursos presenciais na TargetTrust