witola.com

O seguinte é um artigo que li em um blog sobre front-end desenvolvedores e práticas de codificação e pensei que eu iria passá-lo adiante. É por Doug Neiner, um editor no seu código de combustível e é presidente da Graphic Design Studio Pixel . Ele é viciado em novas tecnologias e, especificamente, adora passar tempo com WordPress, Ruby on Rails e jQuery.

O que se segue aqui é uma série de 10 coisas para se lembrar e praticar em cada projeto de desenvolvimento web. Eles estão listados aqui em ordem de importância, muitas das etapas dependem uns dos outros. Se você tomar nada mais longe da leitura, por favor, tome regras # 1 e # 2 para coração e praticá-los. Eu acho que a solução desses dois problemas levará a uma melhor design e melhor aplicação em sites na Internet.

1. Cobrar o suficiente, e então alguns

Especialmente em tempos de crise econômica, empresas e indivíduos estão tentando cortar custos e manter os projetos até um mínimo. Devido a este conhecimento, nós, como desenvolvedores web tentar se mover através de cada fase tão rapidamente quanto possível. Desenvolvimento front-end, no entanto, tomar uma quantidade substancial de tempo, se feito corretamente. Não adequadamente cobrando para que o tempo leva-nos como desenvolvedores para saltar sobre as coisas que sabemos que são importantes apenas para manter o projeto dentro do orçamento. A regra é simples ... você normalmente não terá tempo para fazê-lo bem se você não tem tempo para tomar. A única maneira de ter mais "tempo" como um desenvolvedor, é garantir a vez que fazemos passar é devidamente recompensada. Nesse ponto só pode nossos corações e mentes ser totalmente ligado em nossos projetos ... e só então poderemos ter tempo para acompanhar os restantes 9 regras.

2. Educar o Designer

Para quem é um designer / developer máquina tudo-em-um, este deve ser fácil. No entanto, os codificadores que trabalham com ou para um designer tem uma responsabilidade única. Como muitos designers vêm de um fundo de impressão, cabe a você, desenvolvedor, para educá-los sobre as possibilidades disponíveis para seus projetos. Não ... eu não disse que eles saibam sobre os plugins 150 + jQuery que você usa, ou seus pensamentos sobre o uso de uma combinação de UL / LI vs uma série com o tags. Eu disse: educá-los para as possibilidades. Ajudá-los a entender como seu projeto podem ser exibidas em dispositivos diferentes. Ajudá-los a entender como fundos de alavancagem de repetição e padrões de azulejos para alcançar grandes projetos com tamanho mínimo do arquivo.

Não deixe a criatividade exclusivamente para o designer quer! Esta é sua chance de provar que você é criativo, assim por encontrar as soluções tecnológicas ideais para atender às necessidades do designer. Dizendo-lhes "ele simplesmente não é feito dessa forma" para cada pedido é uma maneira do certo-fogo para causar frustrações de ambos os lados. Coloque sua mente para funcionar encontrando maneiras de contornar obstáculos.

Nota: As regras 3 a 10 fora de construir essas duas primeiras regras. Algumas das regras a seguir exigem gráficos adicionais do designer, e todas as regras têm tempo para acompanhar. Faça um compromisso com as regras 1 e 2, e as restantes regras serão ambos fazem sentido e fazer o seu produto acabado que muito melhor.

3. Pense em camadas não, em fatias

Mesmo hoje, ainda usamos a expressão "cortar o design" para descrever o processo de mover um projeto de Illustrator ou o Photoshop para o layout HTML / CSS acabado. Enquanto isto ainda é muito preciso, seu nome desmente o conceito antigo de cortar um projeto em pedaços e remontá-la (geralmente em uma tabela) de volta na página HTML.

Esse era o antigo web. O novo web usa o conceito de camadas, empilhamento e z-index para conseguir projetos com a profundidade. Como um programador, ter certeza de obter camadas PSD arquivos ou arquivos em camadas AI do designer versus um design plano. Isto irá permitir que você tenha muito mais flexibilidade em como você montar um site web. Lembre-se, quando se trabalha em camadas, considere os elementos HTML que são essenciais para a estrutura antes de recorrer à adição de divs adicionais e vãos. Você pode usar um padrão de repetição vertical no html elemento, e um fundo repetindo horizontal no body elemento sem trazer o temido div#wrapper para resolver problemas seus antecedentes.

4. Use o melhor formato de imagem

Qual é o "Format Melhor Imagem", você pergunta? É aquele que é mais adequado para a tarefa à mão. PNG, GIF, JPEG e todos têm vantagens diferentes. Quando não há transparência em uma imagem, testar a qualidade que o tamanho do arquivo / imagem é melhor entre PNG, GIF e JPEG. Para imagens grandes, JPEG quase sempre ganhar para o tamanho vs qualidade. Para imagens pequenas, sem transparência, ver que tem um melhor tamanho de arquivo PNG ou GIF. Se você decidir sobre uma GIF, certifique-se de brincar com as opções de pontilhamento e as opções com perdas (Você sabe mesmo o Photoshop tem uma opção de "perda" para GIF?). Muitas vezes você pode espremer até mesmo pequenos arquivos de Photoshop através de ajustar as configurações de saída ainda mais.

Para imagens que precisam ter transparência, tomar decisões fundamentadas sobre como eles serão usados. Se eles vão ser colocados em camadas sobre um fundo complexo, pode ser necessário considerar o uso de um arquivo PNG. Se o fundo é consistente o suficiente para que o fosco cor de um GIF não irá destacar-se mal, veja se o arquivo GIF é menor. GIF tem a vantagem de não precisar de programação adicional para fazê-lo funcionar no IE6.

Quanto ao uso do JPEG: Se você usa o JPEG como parte de sua interface de usuário (e não apenas para exibir uma foto, etc) não se esqueça de deixar de fora os perfis ICC ao salvar para web. Determinados navegadores honrará o perfil e produzir uma diferença de cor entre GIF / PNG e JPEG da mesma cor. Este é um problema simples de evitar por apenas desligar os perfis ICC.

E se é uma situação perde-perde? Houve tempos em que eu preciso a total transparência de um PNG com a complexidade de imagem mais adequado para um JPEG. Nestes casos, eu muitas vezes pilha (lembre-se, pense em camadas) duas imagens: uma para a transparência PNG, GIF e um para o aspecto de imagem complexa. É resolução criativa de problemas como este que irá garantir suas páginas carregam rapidamente, e que o projeto mantém a sua integridade.

5. Saiba quando usar Classes versus Ids

Eu pensei que este era apenas senso comum, mas aparentemente não é como eu vejo muitos programadores que utilizam nomes de classes, onde eles devem usar ids. Pode não parecer um grande problema, mas quando você vai tentar atingir um elemento usando Javascript.

O conceito é simples, se haverá apenas um elemento em uma determinada página, use um id. Se vai haver várias instâncias em uma determinada página, use nomes de classes. Sempre que um elemento é um-de-um-tipo, use um id. É simples assim! Coisas como ul.navigation para a barra de navegação principal ou div.site-logo não fazem sentido. Cada um desses elementos são distintos e devem ter e id.

Em vez de adicionar outra regra para nossa lista, deixe-me fixo em outra coisa aqui: não use muitas aulas! Tome o seguinte código para um exemplo extremo (Note que as classes aparecem seis vezes):

Para aqueles que freqüentemente código, você percebe que este é um exemplo absurdo, mas mostra a falácia de o uso excessivo de classes. Use apenas o que você precisa corretamente estilo e aumentar (via JavaScript) a HTML, nada mais.

6. Tornar suas páginas Responsive

Seu importante que a página responde corretamente como o usuário final navega através de-lo. Usando convenções como efeitos de sobreposição de imagens, bem como: hover,: active e: estados de foco não pode ser suficiente sublinhado. Você não quer atacar o usuário com muitas interações ou estilos, mas a maioria das pessoas respondem bem ao feedback visual. Aqui é fácil para você: as ligações devem mudar de estado quando o mouse passa sobre eles ... Período! Não é o suficiente para que o navegador exibe uma mãozinha indicando um link. Eu não posso te dizer como é frustrante para procurar por uma página com texto preto olhando para os links de cinza escuro e esperando e rezando para que a mão parece me deixar saber que eu encontrei um!

Usando convenções como a das "Você está aqui" ou indicadores descritivos ferramenta de dicas todos se enquadram nesta categoria. Quanto mais interação e feedback que aparece para o usuário enquanto navega por um site, melhor.

7. Sempre usar Sprites CSS para Rollovers

Se você não sabe o que são CSS Sprites, confira este artigo no Smashing Magazine ou um presente no A List Apart para mais detalhes. Para aqueles que sabem o que são, por que não usá-los!? Se você me dizer que devido à falta de tempo, quero referir que a regra n º 1 nesta lista. Passado o argumento de tempo, eu realmente não posso pensar de qualquer benefício mais importante do que usar Sprites CSS para rollovers de imagem. Confira o Starter for jQuery site. Quase todas as peças de interface de usuário são construídos utilizando um único arquivo PNG (foto abaixo). As cargas de interface de uma só vez, e todos os estados hover / ativo estão disponíveis imediatamente. Não demora para a: hover imagem para carregar; Um pedido para o servidor, e não 10 +. Esta ferramenta fantástica no Front End Codificação Toolkbox que os desenvolvedores precisam usar com mais freqüência.

8. Entenda a diferença entre Flash e Javascript

Eu acho que o Javascript pode fazer coisas incríveis. Eu também adoro empurrar os limites do que ele pode fazer. Eu adoro fazer widgets e plugins tanto quanto o próximo cara ... mas o Javascript não pode resolver todos os problemas de desenvolvimento web dinâmico. Em vez de gastar 10 horas emulando um recurso de Flash que levaria uma hora para fazer em Flash, fazer a escolha certa e escolha Flash. Por outro lado, se você só precisa de um rotor de imagem ... não se atreva a abrir Flash!

9. Teste seu site em vários navegadores (incluindo IE6)

Esta leva tempo, não há dúvida sobre isso. Eu desenvolvo em um Mac, e tem um PC (e vários ambientes do Virtual PC) que deixe-me do teste é a maioria das pessoas normais navegadores usamos hoje. A menos que você tenha relatórios do Google Analytics que dizem que ninguém usa IE ou todo mundo usa o Firefox, não fazer uma suposição sobre a forma como as pessoas navegam no seu site. Não estou dizendo que fazer os sites parecem idênticos, mas fazê-los funcionar, função e uma boa aparência (e certamente similar!) Na maioria dos navegadores.

Nota: Eu mencionar especificamente o IE6, porque o meu maior cliente é uma empresa que ainda usa o IE6. Eu desenvolvi um estilo de codificação que me permite construir rapidamente para navegadores modernos, e implementar apenas uma folha de estilo e algumas correções javascript para que o site parece certo no IE6. Tenho certeza de que perder alguma vantagem por fazê-lo desta maneira, mas poupa-me de muitos momentos embaraçosos.

10. Mantenha sempre em mente Manutenção

Como você está "cortando" um projeto de Photoshop, ou preparar seu CSS e Javascript, manter a manutenção em mente. Alguns loucos-cool corte CSS que você usa hoje pode voltar para assombrá-lo mais tarde. Dumping regras CSS onde quiser em um arquivo CSS pode parecer alta no momento (Guilty!), mas vai fazer mudar e atualizá-los mais tarde, um pesadelo.

Um passo importante lembrar ocorre depois de ter preparado um arquivo de designer para a exportação a partir do Photoshop ou Illustrator: Lembre-se de salvar uma versão do arquivo antes de exportação. Dessa forma, se você precisa re-exportá-lo mais tarde, adicionar outro botão, mudar uma linha de texto, etc, você será capaz de exportá-lo de novo rapidamente. Photoshop normalmente salva escolhas formato da imagem, ajustes de compressão e cores foscas para tornar seu trabalho ainda mais fácil.

Conclusão

Há uma série de outras coisas que são importantes para Coders front-end para manter em mente, mas acho que estes são alguns dos mais importantes. Muitos poderiam argumentar que essas não são regras, mas eu desafio você a considerá-los como tal. Talvez você vai ser menos propensos a quebrá-las no interesse de tempo ou dinheiro em seu próximo projeto.