Recursos para Desenvolvedores Web Uma Mega-Compilação

A Internet está em constante crescimento e existem centenas de milhares de recursos coletivos para desenvolvedores web futuros. De artigos on-line, tutoriais, ferramentas, guias a vídeos, você pode aprender praticamente tudo na Web. Nunca foi tão fácil pular on-line!

Abaixo eu montei uma enorme coleção de alguns recursos muito úteis para desenvolvedores web. Estes incluem material para iniciantes HTML5 / CSS3, juntamente com teorias mais complicadas para JavaScript e programação PHP. É possível que alguns desenvolvedores entusiastas estudem essas linguagens e criem aplicativos da Web muito populares, como o Twitter ou o Tumblr. Se você tem interesse em recursos úteis para desenvolvedores da Web modernos, você adorará essa compilação de recursos confiáveis.

Revistas on-line úteis

O mundo dos blogs explodiu com centenas de milhares de novos escritores levando para a Internet. Muitos desses blogs online estão focados em design e desenvolvimento web. Você pode encontrar muitos recursos úteis apenas folheando esses feeds RSS.

Dependendo do tipo de linguagem que você codifica, isso determinará seu interesse em qualquer um desses blogs. Podemos nos concentrar em desenvolvimento web e assumir que isso inclui todo o trabalho de front-end (HTML5 / CSS3 / JavaScript), bem como scripts de back-end simples (PHP / RoR / Python / SQL). Eu tomei a liberdade de construir uma lista única dos blogs de desenvolvedores mais populares que focam no código front-end e back-end.

Nettuts+
24 maneiras
Webmonkey
Codificação Smashing
Webitect
Inspecionar elemento
Gatos que codificam
Blog de Design de Web da Line25

Há certamente muitos outros a considerar. Recomendo que você acesse o Google em busca de tutoriais e artigos sobre seu idioma preferido. Em seguida, usando um agregador de feeds RSS, como o Google Reader, você pode configurar listas de todos os artigos mais recentes dessas revistas. Esta é uma ótima maneira de começar seu dia de trabalho, ou até mesmo matar um pouco de tempo através de tutoriais.

jQuery Plugins Galore

Tanto a biblioteca principal do jQuery quanto o jQuery Mobile ganharam muita tração no ano passado. Essas bibliotecas de código aberto funcionam para projetar uma experiência de front-end repleta de animações ricas e recursos Ajax fáceis de implementar, embora a biblioteca móvel não tenha alcançado seu pai em termos de plugins e códigos de terceiros..

Da mesma forma, outro fantástico produto bgStretcher pode ser usado como um script de fundo dinâmico. Será necessária uma série de imagens e alguns dimensionamentos dos tamanhos proporcionalmente à resolução da tela do usuário. Confira a maravilhosa demonstração para ver isso em ação. Ambos os plugins são gratuitos para baixar, e se comportam como exemplos simples para o incrível código de terceiros desenvolvido a partir do jQuery. Trabalhar com esses recursos economizará muito tempo no trabalho do projeto para que você não precise reinventar a roda.

Em geral, eu também recomendo navegar nos sites Ajax Blender e Dynamic Drive para trechos / plugins de código JavaScript. A biblioteca não é enorme, mas está crescendo constantemente a partir de novos conteúdos enviados por usuários. Os sites incluem não apenas plugins jQuery, mas também bibliotecas MooTools e Prototype..

Se você acabar trabalhando com a biblioteca do jQuery Mobile, eu quero recomendar outra ferramenta jqmPhp. É uma classe PHP dinâmica onde você pode referenciar funções simples para gerar linhas e linhas de código HTML5 alimentadas através do jQuery Mobile. É honestamente a maneira mais fácil de prototipar aplicativos móveis dinâmicos construídos em torno de um shell PHP. O blog do site tem muitas referências de exemplo para escavar.

Construindo em HTML5 e CSS3

Quando falamos em desenvolvimento web de front-end, geralmente é tudo sobre eficiência. Você não tem os mesmos problemas de construir um website em HTML / CSS como codificaria um aplicativo Ruby de backend. Não há lógica real ou tratamento de erros em HTML - é principalmente sobre a rapidez com que você pode dimensionar um design de layout adequadamente em todos os navegadores.

Primeiro eu tenho que começar recomendando o Boilerplate HTML5. Este é um modelo bare-bones despojado que inclui todo o “padrão” Elementos da página da Web HTML5 em um pacote. Isso inclui uma folha de estilo padrão, JavaScript, favicon, ícones de toque da Apple e muitos outros itens. É um projeto 100% gratuito e você pode até contribuir com o repositório do Github. Este é um recurso obrigatório para todos os desenvolvedores antes de iniciar qualquer projeto sério na web.

Agora, se você trabalhar com este clichê, terá a opção de adicionar todo o seu código personalizado. Mas eu sugiro dar o próximo passo e construir com um aplicativo como o Initializr. Isso gerará um layout de site típico e até mesmo permitirá que você personalize quais elementos estão incluídos em seu pacote de clichê. O código do Google Analytics, os arquivos jQuery, .htaccess ou web.config, além de uma dúzia de outras opções, estão disponíveis.

Designers CSS

Agora que olhamos um pouco para o código HTML5, devemos também considerar alguns dos populares frameworks CSS3. Estes são mais abertos do que os modelos HTML, já que você pode fazer muito mais com CSS. Os designers também perceberão a dificuldade de criar código compatível com os padrões para todos os navegadores modernos.

O Golden Grid System é fantástico como um framework em projetos web responsivos. Esses layouts se adaptam às telas de dispositivos móveis e se dobram para dentro conforme você redimensiona a janela do navegador. Também ajuda no planejamento da largura e do tamanho de cada área da coluna. O Blueprint é outro framework CSS útil que você deve conferir. É ótimo para criar sites personalizados e oferece documentação fantástica.

Quando se trata de ferramentas CSS, no entanto, CSS3 PIE tem que estar entre os meus três favoritos. É um aplicativo da web simples que gera o código adequado para renderizar efeitos CSS3 suportados no Internet Explorer 6-9. Você pode criar gradientes lineares dinâmicos, cantos arredondados e sombras de caixa com configurações personalizáveis. O site tem exemplos do IE se você quiser vê-los também.

Os desenvolvedores também tentarão reduzir o tamanho de seus arquivos para produção. CSS limpo é um recurso em que você pode selecionar várias opções para simplificar seu código e reduzir o tamanho do arquivo. Outro Code Beautifier alternativo não oferece tantas opções, mas pode ser mais fácil de usar.

Personalização de temas com o WordPress

Publicação de WordPress é facilmente o CMS mais popular nesta época. Já vimos possivelmente milhões de novos blogs e sites com essa fantástica solução de gerenciamento de conteúdo. E como desenvolvedores do WordPress estão em alta demanda para a criação de widgets personalizados e temas do site.

A nova versão do Constellation Theme oferece aos desenvolvedores do WordPress um ponto de partida mais fácil do que os modelos padrão. O novo tema do Twenty Eleven é muito artesanal e minimalista, mas não pode competir com um modelo de tema inteiro construído sobre HTML5Boilerplate. O tema Constellation WP inclui até mesmo consultas de mídia para várias resoluções de dispositivos, como tablets iPhone e iPad.

O Wonderflux é outro modelo de tema WordPress que não é tão avançado no desenvolvimento. Foi liberado recentemente do beta para a v1.0 junto com alguma documentação online. Este tema é um pouco mais complicado do que o Constellation, que lhe dá mais controle sobre o layout. Os desenvolvedores incluíram ganchos PHP personalizados, funções e filtros para tornar seu site WordPress mais dinâmico.

Desenvolvedores sérios de WP devem verificar ambas as soluções para ver se qualquer um ajudaria no trabalho futuro do projeto.

Encontrando Freebies de Desenvolvedor da Web

Em comparação com PSDs e gráficos, a comunidade de desenvolvimento web parece um pouco carente de galerias de freebie. Você sempre pode encontrar ótimos scripts no Github, mas muitas vezes você terá que pesquisar e testá-los.

É difícil encontrar sites que oferecem downloads gratuitos e demonstrações, bem como exemplos de scripts. Meu novo recurso favorito é o CodeVisually, que cataloga ferramentas de desenvolvimento enviadas por usuários, plugins, bibliotecas e outras coisas interessantes. O layout é configurado como uma galeria, onde cada página inclui um link para o produto, captura de tela de demonstração e alguns detalhes adicionais.

A galeria inclui centenas de exemplos de código de modelo HTML / HTML5, bibliotecas CSS3 e, certamente, muitas coisas de jQuery também. Eu também achei este é um ótimo site para enviar seu próprio código aberto ao público. Seu nome está vinculado ao envio, e você pode colocar links para seu próprio site, onde os usuários podem acessar o código.

APIs de aplicativos da web

Uma tendência muito popular no desenvolvimento web moderno está construindo APIs como um aplicativo de terceiros. A maioria das marcas de redes sociais tradicionais inclui uma API e um segmento de documentação em funcionamento em seu site. Além disso, há toneladas de classes wrapper gratuitas no Github escritas em todas as principais linguagens de programação de back-end.

Os desenvolvedores devem se sentir à vontade para trabalhar com esses tipos de bibliotecas de código à medida que crescem em demanda. Usando o sistema OAuth, você pode criar rapidamente uma base de usuários a partir de muitos desses aplicativos. Listamos abaixo apenas algumas referências a APIs on-line populares e sua documentação completa.

API do Twitter
API CloudApp
Instagr.am API
API do eBay
API do Foursquare
API do Dribbble
API do Github

Aproveite esses recursos em novos projetos sempre que possível. A Web está se tornando mais conectada e os usuários estão sempre migrando para o próximo grande aplicativo. Você pode recrutar mais milhares de membros dedicados para o seu aplicativo quando os visitantes não precisarem registrar uma conta totalmente nova e, em vez disso, podem se inscrever diretamente pelo Twitter ou pelo Facebook..

Recursos de Q & A

A experiência mais benéfica entre os desenvolvedores é fazer perguntas e aprender novas técnicas. A comunidade de desenvolvedores é sempre tão útil para os recém-chegados e dispostos a oferecer seus conhecimentos em muitas situações. Se você tiver alguma dificuldade ou perguntas específicas sobre um projeto, pesquise no Google por um fórum de desenvolvedores da Web relacionado.

Pessoalmente, tenho de recomendar a adesão à comunidade do Stack Exchange, se você ainda não é um membro. Isso inclui sites incríveis como o Stack Overflow e Super User, onde você pode obter ajuda de programação basicamente sobre qualquer coisa. Os membros da comunidade estão bem informados em todas as principais linguagens da web, incluindo jQuery e classes PHP menores.

Um truque que aprendi é pesquisar no Google e ver se seu problema já foi resolvido. Insira algumas palavras-chave na sua pesquisa do Google e anexe o sufixo site: stackoverflow.com. Todos os resultados da pesquisa retornados serão perguntas de arquivos do Stack Overflow - se tiver sorte, você poderá encontrar exatamente a solução para seu problema atual.

Testando a Velocidade da Página Online

Essa nova ferramenta lançada pelo Google Developers foi realmente impressionante. O aplicativo Page Speed Online analisará o conteúdo do seu site e gerará um relatório analítico sobre suas velocidades. Isso inclui possíveis soluções para reduzir os tempos de carregamento e manter seus visitantes no site por mais tempo.

Também pode ajudar a determinar problemas com taxas de rejeição e conversões mais baixas. O Google Analytics é obrigatório para qualquer website, mas acredito que o Page Speed atinge apenas um nível mais alto de análise.

A saída do relatório é classificada de alta para baixa prioridade e geralmente inclui muitos itens diferentes. Se você entender as configurações de LAMP e trabalhar com servidores Apache, também poderá considerar o módulo mod_pagespeed. Ele realiza automaticamente muitas dessas otimizações em seu site para diminuir o tempo de carregamento e armazenar dados importantes da web (imagens, ícones, scripts).

O melhor software do desenvolvedor

Entre os dois sistemas operacionais mais populares, você pode encontrar dezenas de programas. Do software gráfico aos editores de código-fonte e IDEs, há muitos recursos para os desenvolvedores da Web escolherem. Mas se você está procurando por sugestões populares eu recomendo os seguintes títulos.

Mac OS X

A Panic é uma empresa de software que criou a Coda - de longe o melhor aplicativo de desenvolvimento para Mac. Você tem acesso a um editor de código-fonte, terminal e cliente FTP, no qual é possível fazer alterações diretamente nos arquivos do servidor. O Coda também suporta uma longa lista de realce de sintaxe para linguagens como HTML, XML, CSS, JavaScript, PHP, SQL e muito mais.

Se, no entanto, você precisar de uma solução gratuita, você deve conferir o Komodo Edit. O software é desenvolvido para Windows e Mac, open source e totalmente gratuito para download. Ele inclui todo o mesmo suporte para realce de sintaxe e muitos recursos semelhantes aos da Coda (sem FTP, infelizmente). TextWrangler é outra solução gratuita que você pode querer experimentar, também apenas um simples editor de texto.

Para um aplicativo gratuito de FTP, confira o Cyberduck na Mac App Store. Embora pessoalmente eu prefiro uma alternativa paga, como FTP Gostoso ou Transmissão.

Microsoft Windows

O pacote de software da Adobe sempre vem à mente quando você pensa em web design e desenvolvimento. Os usuários do Windows têm muitas alternativas para o Dreamweaver, e muitos deles são totalmente gratuitos.

O Notepad ++ é um ótimo exemplo de algum software Win32 de código aberto. O projeto ainda está em desenvolvimento ativo e libera atualizações com freqüência (quase mensalmente). Eu amo sua interface com guias e suporte para muitos plugins adicionais. Como eu mencionei acima, o Komodo Edit também é oferecido para o Windows XP / Vista / 7, então você pode tentar isso como uma alternativa.

Os desenvolvedores da Web no Windows também não possuem um cliente FTP. O Filezilla é provavelmente a alternativa livre mais popular. Para alternativas, confira nossa lista gratuita de clientes FTP junto com ferramentas similares.

Outros recursos úteis de desenvolvimento

100 Ferramentas Essenciais de Desenvolvimento Web
Melhor de 2011: Melhores Plugins e Tutoriais úteis do jQuery
Ruby on Rails Tutoriais para Iniciantes em Desenvolvimento Web
7 Tendências de Desenvolvimento da Web Incríveis para 2011

Conclusão

Até agora, o primeiro trimestre de 2012 começou com um estrondo! Já vimos alguns conteúdos incríveis surgindo de designers e desenvolvedores web de todo o mundo. Profissionais construindo para a web têm tantas ferramentas à sua disposição em comparação com 1-2 anos atrás.

Espero que esta enorme compilação de ferramentas e recursos impulsione sua metodologia para um melhor desenvolvimento. Eu amo trabalhar com desenvolvedores da web e aprender sobre novos projetos o tempo todo. No entanto, há apenas muito espaço para novos recursos que podemos incluir, então estou fadado a perder algumas gemas. Se você tiver ideias ou sugestões para recursos de desenvolvedores web relacionados, informe-nos na área de discussão posterior.