Top 48 sites e ferramentas para quem está aprendendo a programar!

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!

Favoritos - Top 49 sites para quem está aprendendo a programar | Becode

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

W3C - Top 49 sites e ferramentas para quem esta aprendendo a programar

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.

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).

Layouts e Efeitos Visuais

Layouts - Top 49 sites para quem está aprendendo a programar | Becode

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”):

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

Templates - Top 49 sites e ferramentas para quem esta aprendendo a programar

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)

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

Cores - 49 sites e ferramentas para quem esta aprendendo a programar

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:

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.

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.

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.

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

Tipografia - Top 49 sites e ferramentas para quem esta aprendendo a programar

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>.

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.

Curso Online de Lógica de Programação | O seu primeiro passo para ingressar no mercado de TI

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

Tecnologia 4: PHP - Tecnologias e Frameworks que você precisa conhecer

  • 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:

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

Xampp - Top 49 sites para quem está aprendendo a programar | Becode

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.

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

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

CSS Zen Garden - Top 49 sites para quem está aprendendo a programar | Becode

Muitas dicas sobre CSS.

Blog do Diego Eis sobre padrões web.

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

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

JavaScript e suas milhões de possibilidades

Conjunto de possibilidades extras com JavaScript.

jQuery - Top 49 sites para quem está aprendendo a programar | Becode

Exemplos de funcionalidades utilizando o jQuery.

Similar ao jQuery.com.

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

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.

Kanban - Top 49 sites para quem está aprendendo a programar | Becode

Gerenciamento de Projetos

Gerenciamento de tarefas

Organização de projetos – Gantt

Mapas Mentais

Compartilhamento de código

Curso Online de Introdução a Banco de Dados Relacionais e SQL da Becode

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!

Erick Scudero

Escrito por 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.

12 Comentários

Leave a Reply
  1. Encontrei seu site do nada , abrindo caminhos para a minhas duvidas e projetos futuros.
    Trabalho offshore entrei recentemente na area de videomaker, mas estou estudando programação para saber que rumo tomar na vida..rs
    Obrigado pela ajuda e pela constante updates de informações.

  2. ! Sou da are de 3D e resolvi ver dicas para desenvolver um site voltado para educação e me deparei com esse site muito bom!! E raro ver postagens com qualidade na Internet nos dias atuais; Mas é isso ai, parabéns pela iniciativa.

  3. Tenho dificuldades com a língua inglesa, assim como muitas pessoas. Existe a possibilidade de colocar os links direcionando para páginas em português.

    • Lander, então, sempre que temos uma escolha, optamos pela versão em português (brasil). Contudo, na grande maioria das vezes, as soluções não possuem uma versão em nossa língua nativa. Nesse caso, não temos muito o que fazer… Sugiro que você instale um plugin no seu browser que auxilie nessa tradução de páginas. Não vai ficar mil maravilhas, mas já vai ajudar muito!

Deixe uma resposta

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

A melhor forma de aprender lógica de programação | Becode

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

[Infográfico] Guia com as Principais Áreas do Mercado de TI

[Infográfico] Guia com as Principais Áreas do Mercado de TI