Recentemente tive uma experiência diferente no meu dia a dia, que foi desenvolver front-end de um site de um de nossos clientes. Como sou desenvolvedor back-end, decidi criar esse relato para contar a vocês como foi a minha experiência no desenvolvimento do front-end, desde a escolha de ferramentas e tecnologias, até desenvolvimento propriamente dito.
Primeiro você desenha uma página no Photoshop. Layout impecável, representando exatamente como é que você quer que a página se comporte quando for aberta no browser. Depois um programador front-end transforma aquele arquivo PSD em HTML, CSS e Javascript. Os assets são recortados, um a um, exportados do Photoshop, importados no código. Novas ferramentas e plugins estão sendo criados para tentar facilitar esse processo, e tem até algumas empresas no oriente que cobram cerca de 100 dólares para fazer esse processo para você.
Conforme articula Nick Pettit no blog da Tree House , é um processo que faz sentido à primeira vista. Pode ser difícil começar a programar a página sem saber exatamente como os designers esperam que fique resultado final. Experimentar no Photoshop primeiro e depois exportar para HTML parece um processo razoável. E ele acabou ditando muito da estrutura dos times dentro de agências e produtoras que criam para a web.
Depois do CSS3, muitos dos efeitos visuais que eram alcançados apenas com as ferramentas do Photoshop (sombra, bordas arredondadas, gradiente, entre muitos outros) começaram a ficar disponíveis no próprio código CSS. Antigamente, se um box tinha bordas arredondadas no layout, programador precisava exportar as bordas como imagens e fazê-las encaixarem milimetricamente no HTML. A maioria dos browsers modernos já suportam isso via CSS. Raros são os sites que precisam dar suporte a versões mais antigas do Internet Explorer, por exemplo, grande vilão do web design contemporâneo.
Se você lê Blog de AI com frequência, já sabe muito bem dos desafios em se desenhar websites que rodem em todas as resoluções disponíveis no mercado – ainda mais depois do surgimento dos smartphones, tablets e do caos causado pela falta de padronização de tamanho de tela por parte dos fabricantes desses dispositivos. Design Responsivo vem como uma solução bastante eficaz para esse problema. Agora voltando ao exemplo das bordas arredondadas: é quase impossível fazer com que elas se encaixem perfeitamente em todas as resoluções de tela disponíveis no mercado. E se ilude quem pensa que basta desenhar para os três ou quatro breakpoints mais importantes, e dane-se resto.
If you liked this short article and you would like to get additional facts about Tableless – Código front-end confiável kindly stop by the website.