30 Handy Cheat Sheets e Guias de Referência para Profissionais da Web
Cheat sheets e guias de referência são úteis para iniciantes e profissionais avançados da web.
Eles podem ser usados para ajudá-lo a lembrar a sintaxe ou como uma ferramenta para auxiliar na memorização.
Neste post, pretendemos cobrir os guias de referência para todas as plataformas, softwares e linguagens de codificação mais usadas.
Abaixo você encontrará uma compilação das 30 folhas de dicas mais úteis e bem organizadas, listas de verificação e guias de referência.
Se você souber de uma folha de dicas útil que não abordamos aqui, compartilhe o link na seção de comentários no final do artigo.
1. Checklist de usabilidade do site de 25 pontos
Usabilidade é uma preocupação central para qualquer desenvolvedor web. A Lista de verificação de usabilidade do site de 25 pontos é uma lista simples, passo a passo, que pode ajudar seu site a obter o máximo de usabilidade.
Quatro componentes principais são abordados nesta lista de verificação: acessibilidade, identidade, navegação e conteúdo . A lista é um PDF para impressão e contém um sistema de classificação e espaço para comentários.
Faça o download da lista de verificação de usabilidade do website de 25 pontos
2. Tabela de Compatibilidade do Navegador
Este é um ótimo guia de referência para garantir a compatibilidade do navegador.
Abaixo está um extrato de uma tabela que contém uma lista de várias regras CSS e sua compatibilidade com navegadores e sistemas operacionais comuns. Com uma rápida olhada, o designer ou desenvolvedor pode observar quais propriedades CSS devem ser usadas ou evitadas.
A tabela também oferece um recurso interativo que destaca a linha em que seu cursor está. Isso torna muito mais fácil identificar a compatibilidade de uma propriedade CSS específica.
Vá para a tabela de compatibilidade do navegador
3. Lista de verificação dos padrões da Web
Um site que esteja em conformidade com os padrões da W3C será mais utilizável e mais amigável do que aquele que não é.
Existem várias maneiras de garantir que um site seja compatível com os padrões; Uma maneira é usar uma lista de verificação.
Esta lista de verificação contém uma lista cronológica de fatores a serem considerados durante a criação de um site.
Faça o download da lista de verificação de padrões da Web
4. Folha de Coleta da Otimização do Mecanismo de Pesquisa
Search Engine Optimization (SEO) é muito importante se um site é para ser bem sucedido. Essa folha de dicas pode parecer ser para iniciantes, mas contém informações valiosas para referência e educação. As dez categorias são regras de SEO no nível de codificação.
As dez categorias essenciais para uma boa otimização são: tags HTML importantes, limites de indexação do mecanismo de pesquisa, sintaxe de tag de título, problemas canônicos comuns, redirecionamentos 301 no Apache, agentes de usuário de robô de mecanismo de pesquisa, armadilhas de robô comuns para evitar, sintaxe de meta tags de robô, robôs. Sintaxe do txt e sintaxe do mapa do site.
Incluído em cada categoria é mais uma explicação e um exemplo.
A folha de dicas pode ser baixada como um PDF para impressão de duas páginas.
Faça o download da folha de dicas de SEO do desenvolvedor da Web
5. Folha de Tweet 2
Como o Twitter está rapidamente se tornando um feed de notícias mainstream, usá-lo para a vantagem do seu site é importante.
Tweet Sheet é uma folha simples sobre o uso e a sintaxe do Twitter, criada por Jason Theodor . A folha de Tweet inclui o URL móvel do Twitter e números de texto, comandos pessoais, comandos móveis, comandos de nome de usuário, comandos de rastreamento e informações sobre aplicativos e ferramentas do Twitter.
A versão 2 é oferecida em formato PDF, uma mudança da imagem simples na versão 1. A segunda versão é uma grade de folhas de dicas menores, com uma linha recortada para que possa ser facilmente compartilhada com amigos ou postada em outros locais.
Faça o download da folha de Tweet 2
6. XHTML Cheat Sheet v1.03
Esta folha de dicas XHTML é excelente para codificadores XHTML. Juntamente com muitos atributos básicos, essa grade de duas páginas inclui referências que até mesmo profissionais experientes da Web considerariam úteis.
Três tipos de elementos são definidos nesta folha de dicas: elementos de bloco, embutidos e de tabela . A seção variada inclui 22 elementos adicionais . Cada linha contém o nome, descrição e atributos de cada um dos elementos disponíveis para uso.
Mais referências estão ao lado, incluindo% attrs,% focus, tipos de entrada, tipos de link, elementos preteridos, entidades HTML ASCII e muito mais. Sendo tão detalhado, esta é uma ótima ferramenta para quem usa XHTML com freqüência.
Faça o download da folha de dicas XHTML v1.03
7. CSS Cheat Sheet
A CSS Cheat Sheet é um PDF de duas páginas e é o guia de referência CSS mais detalhado disponível . Ele contém muita informação e é ótimo como referência impressa.
As seções que você pode achar úteis são aquelas no modelo de caixa CSS, seletores, pseudo-elementos e pseudo-classes, cores, propriedades de texto e propriedades de layout.
Faça o download da folha de dicas CSS
8. Esquema do Blueprint e Planilha de CSS do Blueprint
O framework Blueprint CSS é um ótimo atalho para designers. Os desenvolvedores desta ferramenta explicam:
“O Blueprint é uma estrutura CSS que visa reduzir seu tempo de desenvolvimento. Ele oferece uma base sólida para construir seu projeto, com uma grade fácil de usar, tipografia sensata, plug-ins úteis e até mesmo uma folha de estilos para impressão. ”
Para baixar a estrutura do blueprint, vá para BlueprintCSS.org
Emparelhado com o framework é a folha de dicas do Blueprint CSS para ajudar a reduzir o tempo de desenvolvimento. A folha de fraude é bem definida, bem codificada por cores e detalhada. Ele funciona em sincronia com o framework e foi feito com designers em mente, apresentando uma representação visual de um sistema de grade de 950 pixels, uma lista detalhada de recursos do Blueprint e exemplos de chamada e sintaxe.
Faça o download da folha de dicas do Blueprint CSS.
9. Misturando Tipos de Letra
Este PDF é uma excelente referência para designers que não querem gastar muito tempo tentando descobrir se duas ou mais fontes funcionarão bem juntas. Essa ferramenta permite que os designers escolham a combinação perfeita de tipografia.
Embora a folha de dicas tenha sido criada em 1992, a maioria das fontes da Web amplamente usadas está presente. Como mostra a imagem acima, uma lista de fontes é repetida ao longo do lado superior e esquerdo.
Um número de 1 a 3 aparece onde cada par se cruza. 1 significa que as duas fontes são compatíveis, 2 significa que, com a implementação adequada, as duas fontes podem funcionar bem juntas e 3 significa que elas entrarão em conflito.
Faça o download do PDF de tipos de mixagem
10. Fontes comuns para todas as versões do Windows e equivalentes de Mac
Embora este guia não seja exaustivo, é uma ferramenta de referência rápida perfeita para escolher a tipografia para um novo site. Todos os 18 grupos de fontes listados são compatíveis com a web e compatíveis com navegadores .
Todas as fontes são agrupadas com a sintaxe: versão do Windows, versão do Mac, família de fontes. A parte inferior da página tem informações muito específicas sobre o uso de fontes em diferentes sistemas operacionais e navegadores e ainda tem uma captura de tela de cada cenário.
Embora esta página da Web já seja bem conhecida na comunidade de webdesigners, consideramos importante incluir essa lista.
Download de fontes comuns para todas as versões do Windows e equivalentes de Mac
11. Referência oficial do Adobe Photoshop CS4
O guia oficial de referência da Adobe está disponível on-line e em formato PDF. Embora não seja exatamente um guia de referência "rápido", é essencial para qualquer um que use o Photoshop profissionalmente.
Baixe o Guia de Ajuda do Adobe Photoshop CS4 Online
Baixe o PDF do Guia de Ajuda do Adobe Photoshop CS4
12. Atalhos de teclado do Adobe Photoshop CS4
Esta é a folha de dicas de atalhos de teclado para a versão mais recente do Photoshop . Este guia de quatro páginas pode ajudar os projetistas a reduzir seu tempo de produção em até metade.
Para facilitar a navegação, o PDF é organizado de acordo com o menu principal do Photoshop e, em cada item de menu, ele lista os atalhos em ordem alfabética. Como o PC e o Mac têm atalhos diferentes, há dois guias de referência diferentes.
Baixe a versão para PC | Baixe a versão para Mac
13. Atalhos de teclado do Adobe Flash CS4
Este é um guia de atalhos de teclado para o Adobe Flash CS4 . Esse PDF também é organizado para refletir o menu do Flash CS4, mas a lista de atalhos, em vez de estar em ordem alfabética, também é organizada de acordo com a lista de menus do aplicativo. Esta folha de dicas ainda tem um gráfico amigável no topo com a ordem do menu apresentada no Flash.
Como acontece com a maioria das folhas de dicas de atalhos de teclado da Adobe, as versões PC e Mac estão disponíveis.
Baixe a versão para PC | Baixe a versão para Mac
14. Folha de referência da migração do ActionScript 2.0 para o 3.0
Esta folha de dicas abrange tanto o ActionScript 2.0 quanto o ActionScript 3.0 e é organizada para ajudar aqueles que precisam mudar para o 3.0. Abaixo está um pequeno resumo do PDF de seis páginas.
As funções e classes do ActionScript 2.0 estão à esquerda de cada seção, seguidas por seus equivalentes no ActionScript 3.0. Essa folha de dicas é ótima para quem quer fazer a transição para o 3.0 ou aprender o ActionScript.
Faça o download da folha de dicas de migração do ActionScript 2.0 para o 3.0
15. Atalhos de teclado do Adobe Dreamweaver CS4
Este é outro guia da família de folhas de dicas para Adobe, desta vez para os atalhos de teclado do Dreamweaver CS4 . Ele foi feito pelo criador da planilha Flash CS4 e tem muitos dos mesmos recursos.
A folha de dicas também segue a estrutura de menu exata do Dreamweaver CS4 e tem o mesmo gráfico na parte superior, mostrando a ordem do menu.
Infelizmente, uma versão para Mac dessa folha de dicas ainda está em andamento; somente a versão para PC está disponível no momento.
De qualquer forma, é uma ótima folha de dicas e pode ser facilmente adaptada em uma versão para Mac. Para a maioria dos atalhos, você teria apenas que substituir Control pela tecla Command. Continue verificando o Página da folha de fraude para o lançamento da versão para Mac.
Faça o download dos atalhos de teclado do Dreamweaver CS4 PDF
16. Folha de ajuda do WordPress
A Folha de Ajuda do WordPress é a folha de dicas mais útil se você for um desenvolvedor de temas do WordPress. É um guia de referência rápida para os trechos mais usados do WordPress.
Apenas quatro categorias são abordadas neste guia, mas a simplicidade desta folha faz com que seja tão atraente.
Apenas os fragmentos mais necessários e comumente usados estão incluídos, tornando-os fáceis de encontrar. As quatro seções incluem: nomes de arquivos de um tema básico do WordPress, trechos de cabeçalho, todos os outros trechos de modelos e extras comumente usados.
Baixe a folha de ajuda do WordPress
17. Folha de ajuda avançada do WordPress
Para aqueles que criam temas do WordPress regularmente, o WPCandy criou uma folha de ajuda avançada. Ele contém snippets comumente usados para temas que exigem funcionalidade adicional.
O PDF de três páginas abrange uma ampla variedade de snippets, como conteúdo indo apenas na página inicial, estilo para determinadas categorias, imagens exclusivas para cada categoria, títulos de páginas dinâmicas, postagens de consulta e muito mais.
Qualquer designer que crie temas profissionais do WordPress deve ter essa folha de ajuda à mão. A maioria dos trechos são exigidos em temas profissionais.
Baixe a folha de ajuda avançada do WordPress
18. Checklist de Desenvolvimento de Tema para WordPress
A Lista de Verificação de Desenvolvimento de Tema do WordPress é uma extensa lista de verificação em nove partes. A lista de verificação abrange tópicos gerais (como informações sobre temas e capturas de tela), componentes do blog (como feeds RSS), registros de data e hora, bem como navegação de categoria e página. Abaixo está um exemplo do primeiro semestre.
Esta lista de verificação pode ser usada durante a criação de um tema do WordPress ou para ajudar a finalizar um. Tão extenso como é, é apenas uma página e pode ser facilmente impressa quando chega a hora de desenvolver um novo tema.
Faça o download da lista de verificação de desenvolvimento de temas para WordPress
19. Folha de Cola do JavaScript
Várias das folhas de fraude apresentadas aqui são de AdicionadoBytes.com , por causa da qualidade detalhada e excepcionalmente alta dos recursos lá. O primeiro da lista AddedBytes é a folha de dicas do JavaScript.
Esta folha de dicas é logicamente organizada em métodos DOM, funções, expressões regulares, etc. É fácil de usar e uma ótima referência para todos os usos comuns do JavaScript.
O guia não é apenas excelente para iniciantes em JavaScript (abrangendo itens tão básicos quanto a sintaxe para colocar JavaScript em HTML), mas também é adequado para programadores em um nível avançado (referindo-se à funcionalidade JavaScript mais avançada).
Faça o download da folha de dicas do JavaScript
20. Cheat Sheet de Expressões Regulares (v2)
Embora algumas referências a Expressões Regulares estejam na lista de códigos JavaScript acima, esta é mais detalhada. Agora, na versão 2, esta folha de dicas contém material adicional, incluindo informações para aqueles que podem não estar familiarizados com Expressões Regulares.
Embora tenhamos posicionado essa entrada logo abaixo da folha de dicas do JavaScript, esse PDF não é um guia para nenhum idioma específico e, portanto, seria ótimo para desenvolvedores que não codificam em nenhum idioma específico (ou que codificam em mais de um idioma) .
Faça o download da Planilha de Expressões Regulares
21. Mapa Visual do jQuery
Embora o jQuery Visual Map não seja uma referência imprimível como a maioria das outras folhas de dicas nesta lista, ainda é uma ótima ferramenta para referenciamento, aprendizado de jQuery e captura de fragmentos.
A natureza interativa da ferramenta torna fácil encontrar exatamente o que você precisa, e o código é incluído em todos os exemplos para facilitar a cópia e colagem. Este guia é basicamente um manual interativo da jQuery.
Faça o download do jQuery Visual Map
22. Folha de fraude do MooTools
Aqueles que preferem o framework JavaScript do MooTools ao jQuery podem achar essa folha de dicas útil. Este guia de referência colorido e detalhado inclui todos os recursos comumente usados do MooTools 1.2.
As referências são compactas, mas o “pseudo-código” serve perfeitamente como ilustração. No PDF de uma página, há 22 seções de material de referência.
Além da versão mais antiga, a folha de dicas atualizada agora contém documentação para Core, Native, Class, Element, Utilities e Request.
Faça o download da folha de dicas do MooTools 1.2
23. Protótipo 1.6.0.2 Cheat Sheet
Este PDF informativo de uma página é um ótimo recurso para aqueles que usam Prototype.js e inclui uma referência visual para compensações e dimensões.
Os módulos estão em uma ordem lógica, com os mais usados no canto superior esquerdo e os menos comuns no canto inferior direito. A página é imprimível e fácil de usar como um guia de referência do lado da mesa.
Faça o download da Folha de Dicas do Prototype 1.6.0.2
24. Python
Esta folha de dicas de uma página é uma ferramenta de referência maravilhosa se você codificar principalmente em Python .
As 11 seções que compõem a folha de dicas são variáveis de sistema, métodos de string, métodos de data e hora, métodos de data, formatação de data, sys.argv, variáveis do sistema operacional, métodos de lista, métodos de arquivo, métodos especiais de classe, índices e fatias .
Essa é uma referência geral conveniente e prática para quem codifica em Python ou está tentando aprender Python. Há também algumas notas secundárias e pseudo-código geral.
Faça o download da folha de dicas do Python
25. Folha de Cheats do mod_rewrite (v2)
A regravação de URL pode melhorar a usabilidade do seu site, a funcionalidade de pesquisa e a limpeza da navegação.
A folha de dicas mod_rewrite tem tudo, desde a sintaxe básica da expressão regular até os sinalizadores de listagem para as diretivas RewriteRule e RewriteCond. Ele também fornece exemplos e sintaxe geral para que você não precise ser um especialista em mod_rewrite para usar o PDF.
Faça o download da folha de dicas do mod_rewrite
26. PHP Cheat Sheet (V2)
Esta folha de dicas de uma página é uma referência completa para a linguagem de programação PHP . É mais adequado para aqueles que já sabem codificar em PHP e serve como um lembrete de certas sintaxes e nomes de funções e variáveis.
Agora em sua segunda edição, esta folha de dicas é melhor organizada e tem novos componentes, totalizando nove seções: funções de matriz, funções de expressão regular, formatação de data, sintaxe de expressão regular, funções de string, funções do sistema de arquivos, modificadores PCRE, data e funções de tempo e modos fopen ().
Faça o download da folha de dicas do PHP
27. Folha de Dicas do SQL Server
Esta útil folha de dicas de uma página fornece referência rápida para o servidor SQL .
Incluídos nas 14 seções estão: funções, sintaxe para criar uma função, partes de data, sintaxe para criar um gatilho e sintaxe para criar um procedimento armazenado.
Está disponível para download como um arquivo PDF ou PNG.
Faça o download da folha de dicas do SQL Server
28. Folha de Dicas do MySQL
Esta folha de dicas é uma ótima referência para qualquer um que usa frequentemente o MySQL ou PHP com o MySQL . Ele contém as funções mais usadas do MySQL em PHP, tipos de dados e intervalos e consultas de seleção de amostra.
Ao longo do lado da folha principal estão várias palavras-chave e funções usadas no MySQL: palavras-chave matemáticas, palavras-chave de data e hora, palavras de grupo, fluxo de controle, string, comparação, conversão e muito mais.
Não há necessidade de memorizar os nomes exatos das funções do MySQL ou o alcance total de cada tipo de dados; basta baixar a versão em PDF ou PNG da folha de dicas do MySQL para ter em mãos.
Faça o download da folha de dicas do MySQL
29. Ruby on Rails Cheat Sheet
Esta referência imprimível de uma página do Ruby on Rails é um útil guia para quem usa o Ruby on Rails extensivamente.
Incluído na folha de dicas estão cinco seções principais e algumas seções laterais contendo métodos. A seção principal apresenta uma estrutura de diretórios, variáveis predefinidas no Ruby, palavras-chave reservadas, sintaxe de expressão regular e um lembrete de nota lateral de métodos.
Além dos blocos centrais, há uma lista de métodos ao longo do lado, organizados nas seguintes categorias: strings, regex, time, arrays, validação e enumerável mixin .
Faça o download da folha de dicas do Ruby on Rails
30. Folha de Dicas do ASP / VBScript
O último recurso em nossa lista é a folha de dicas ASP / VBScript , para qualquer um que seja um desenvolvedor de ASP.
Semelhante em layout para muitas das outras folhas de dicas em AddedBytes, esta é bem organizada e contém informações cruciais, muitas vezes esquecidas para o desenvolvedor de ASP.
A folha de dicas inclui expressões regulares, argumentos de função de data, redirecionamento com cabeçalho 301, inclusão de arquivo, ordens de argumentos de função, modos de arquivo, modos LCID comuns, constantes, métodos, propriedades, funções e coleções.
Faça o download da folha de dicas do ASP / VBScript
Compilado exclusivamente para WDD por Kayla Knight .
Quais folhas de fraude você usa mais? Por favor, compartilhe outras folhas de dicas favoritas que podemos ter perdido na área de comentários abaixo ...