Erick Scudero
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!
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.
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
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
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:
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
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.
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:
Específico para Windows, permite criar aplicações web utilizando Apache2, PHP, MySQL, utilizando o PhpMyAdmin para gerenciar facilmente seus bancos de dados.
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.
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.
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.
Gerenciamento de Projetos
- Miauproject
- Runrun.it
- Basecamp (organização entre equipes)
Gerenciamento de tarefas
Organização de projetos – Gantt
Mapas Mentais
Compartilhamento de código
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!
![[Infográfico] Guia com as Principais Áreas do Mercado de TI](https://becode.com.br/wp-content/uploads/2016/07/infografico-areas-150x150.png)