15 principais guias de desenvolvimento para designers e desenvolvedores

Desenvolvedores e designers têm algumas coisas em comum, ambos precisam trabalhar uns com os outros pelo menos de vez em quando, especialmente aqueles que estão fortemente focados no desenvolvimento de aplicativos e front-end para web. Quer seja para aprender a usar tipografia nos designs de seus aplicativos ou para determinar o tipo de dispositivo para o qual devemos construir nosso site, ambos podem aprender um com o outro de várias maneiras.

Os web designers frequentemente terão que usar tecnologias como HTML5 e CSS3 para aperfeiçoar seus designs, enquanto os desenvolvedores desejarão explorar mais sobre a experiência do usuário e a interface do usuário para garantir que o software que estão construindo esteja de acordo com os requisitos padrão de ambos os padrões. E quanto ao navegador? Os designers e desenvolvedores estão fortemente envolvidos com o navegador, e isso ajuda a obter alguma orientação e visão nessa área também.

Os recursos do guia de desenvolvimento a seguir cobrirão os fundamentos das linguagens de script mais populares, bem como esclarecerão as ferramentas que podem se tornar suas novas favoritas devido à conveniência de seu uso.

Web Standards Sherpa

A Web é um conceito amplo, envolve tanto que às vezes pode ser difícil encontrar realmente um bom conteúdo sobre como trabalhar com a Web da perspectiva de um desenvolvedor e / ou designer. O recurso Web Standards Sherpa é uma lista de artigos e guias que falam sobre CSS, Design, Conteúdo, JavaScript, Web Performance, Aspectos comerciais da construção para a web e dicas sobre como aperfeiçoar seu fluxo de trabalho entre muitos outros tópicos e categorias. Se você precisa de práticas recomendadas como pessoa de front-end, este é o lugar para obtê-las.

UX Myths

UX Myths desmascara as falsas crenças sobre a experiência do usuário e dá aos leitores a oportunidade de obter uma perspectiva nova e perspicaz sobre como você deve abordar a UX em seus aplicativos, sites e software. Cada ponto é completamente explicado e fornecido uma série de exemplos para mostrar as possibilidades reversas.

Typo Pocket Guide

Este guia de bolso para tipografia é o companheiro perfeito para designers que desejam aprender os detalhes técnicos da tipografia. Este guia específico cobre os conceitos básicos de travessões, apóstrofos, tipos de letra, fontes e muito mais.

O estado do tipo de web

A tipografia está sempre evoluindo, mas o navegador não. Isso significa que às vezes precisamos explorar os recursos de cada recurso em cada navegador separadamente, e esse recurso torna isso particularmente fácil. Basta selecionar o tipo de recurso com o qual deseja trabalhar e explorar seus recursos em diferentes navegadores.

QuirksMode

QuirksMode é um guia incrível para informações de compatibilidade de navegador na Internet. Embora você não obtenha muitas informações na forma de conteúdo escrito, existem muitos fatos que podem ser úteis para aprender quando se trata de desenvolvimento para a web. As tabelas de compatibilidade permitem que qualquer pessoa explore os recursos do navegador de tecnologias como JavaScript, CSS e HTML.

Etiqueta do Photoshop

O Photoshop é sem dúvida a ferramenta de design gráfico mais popular entre os designers e, mesmo que você use o Photoshop nos últimos anos, sempre há algo novo para aprender e explorar. O guia de etiqueta do Photoshop é um guia de seis capítulos que fala sobre vários aspectos das práticas recomendadas do Photoshop, incluindo áreas como camadas, efeitos e qualidade de design. Todos os capítulos têm tamanhos razoáveis, então você não ficará preso por horas aprendendo algo novo.

O meu aparelho

Está tendo problemas para descobrir o tamanho da resolução da tela do seu dispositivo? Esta pequena plataforma lhe dirá exatamente todos os detalhes que você precisa saber sobre o tamanho do seu dispositivo e o tipo de recursos que seu navegador pode executar. Ótimo para desenvolvedores que estão constantemente em movimento.

Tamanhos de tela

Tamanhos de tela tem uma abordagem diferente e, em vez disso, exibe os dados concretos sobre tamanhos de tela diferentes, seu sistema operacional, bem como sua proporção de aspecto exclusiva. Você pode ver as mesmas informações para tablets e computadores clicando nos ícones individuais no canto direito. Funciona muito bem tanto para web designers quanto para desenvolvedores da web.

Métricas do dispositivo

O Device Metrics do Google é semelhante aos dois sites acima, mas adiciona um pouco mais de dispositivos à lista e também descreve algumas informações de desenvolvimento importantes para cada dispositivo. Se você conhece o tipo de dispositivo para o qual está criando seus aplicativos e sites, saber essas informações pode ser crucial.

Segredos das ferramentas de desenvolvimento

Cada navegador hoje vem pré-construído com uma coisa chamada ferramentas de desenvolvedor. É um painel de console separado para o navegador que permite a qualquer pessoa explorar cada site da perspectiva de um desenvolvedor. Você pode usar o console JavaScript para executar o código personalizado do lado do cliente, pode inspecionar os elementos da estrutura do site e pode fazer coisas como monitorar a rede e a atividade de arquivos. Cada ferramenta de desenvolvedor de navegador é diferente e este recurso é uma lista específica de artigos e tutoriais sobre como aproveitar ao máximo as ferramentas de desenvolvedor de seu navegador favorito.

Diretrizes CSS

CSS é o revestimento da web. Sem CSS a web está nua, assim como nós, humanos, estaríamos sem roupas. E como há tanto CSS ao nosso redor, é importante entender os fundamentos práticos e os regulamentos padrão que garantem que o CSS que colocamos na web seja otimizado e de acordo com os padrões mais recentes.

Este guia de estilo específico não pretende ser um guia de estilo, mas uma visão sobre como o CSS padronizado funciona e o que os desenvolvedores e designers podem fazer de maneira diferente para garantir que o CSS que eles produzem seja da mais alta qualidade possível, tornando-o muito mais fácil de produzir em uma grande escala, bem como manter.

Folha de referências de CSS

CSS é uma grande linguagem de script e continua crescendo a cada ano. Às vezes, no fluxo das coisas, podemos esquecer a sintaxe muito básica da linguagem, ponto em que sites como esta folha de dicas CSS podem realmente se tornar úteis, e você só precisa marcá-la uma vez para poder voltar a ela a qualquer momento. Altamente recomendado para iniciantes.

Hacks de navegador

Desenvolvedores front-end da web passam muito tempo no navegador, experimentando, executando código, mexendo e muito mais, e conforme cada desenvolvedor progrediu ao longo dos anos, eles deixaram para trás alguns trechos e truques interessantes que qualquer um pode usar para facilitar seu fluxo de trabalho de desenvolvimento. Aprenda sobre hacks para consultas de mídia, hacks de seletor e até mesmo alguns hacks interessantes de JavaScript para todos os seus navegadores favoritos. Você também pode compartilhar suas próprias dicas e truques usando uma solicitação de pull do GitHub.

Dieta do navegador

A tendência atual no desenvolvimento da web é muito sobre desempenho; como otimizar para o melhor desempenho possível sem perder qualidade. E é disso que se trata o Guia de dieta do navegador - como otimizar para a web. É uma lista de dicas perspicazes e relatórios de experiência que documentam diferentes recursos de JavaScript, HTML e CSS que podem ser alterados ou removidos por completo sem a necessidade de fazer concessões.

&o que;

amp-what é uma referência rápida e interativa de mais de 30.000 entidades de caracteres HTML e caracteres Unicode comuns, 8859-1 caracteres, aspas, sinais de pontuação, caracteres acentuados, símbolos, símbolos matemáticos e letras gregas, ícones e marcações significativas & personagens de internacionalização. Para funcionar, você clica no botão Carregar na parte superior do site e, em seguida, usa a função de pesquisa para encontrar o tipo de personagem que deseja usar em seu projeto ou em qualquer outro lugar que planeje usá-lo. Um recurso tão extenso que você pode passar horas brincando com ícones e personagens exclusivos que podem apimentar seus aplicativos e designs.