A plataforma Web percorreu um longo caminho desde que o HTML5 se tornou popular e as pessoas começaram a olhar o JavaScript como uma linguagem que é capaz de construir aplicações complexas. Muitas APIs surgiram e existe conteúdo abundante sobre como os navegadores podem tratar todas elas.
Esta serie especifica de artigos irá um passo além e se concentra em como essas tecnologias podem ser usadas na prática, não somente para construir demonstrações ou protótipos, mas como os profissionais tem usado elas em produção. Nessa serie de artigos pós HTML5, vamos além do modismo e mostraremos detalhes práticos dos especialistas sobre o que realmente funcionou com eles. Também abordaremos tecnologias (como AngularJS) que vão um passo além e definem o futuro de como os padrões e desenvolvimento web irão evoluir.
Esse artigo do InfoQ é parte da serie "Próxima geração do HTML5 e JavaScript". Você pode assinar para receber notificações via RSS.
Em seu livro The Responsive Web, Matthew Carver fornece uma introdução acessível para os projetos web modernos e a importância do design responsivo.
O Livro é dividido em três seções. A primeira seção fornece uma breve introdução do que é o design responsivo, porquê existe, e algumas das características dos navegadores modernos que permitem a web responsiva existir. E também no caso de "mobile-first" sendo que os sites são projetados para dispositivos móveis antes de começar o projeto desktop.
A segunda seção é sobre como projetar para uma web responsiva. Antes de mostrar qualquer código a ser escrito, Carver explica como apresentar as ideias para os clientes. Usando a navegação como um ponto de debate, após isso, os padrões de projeto são apresentados e o pensamento sobre como construir de maneira responsiva. O livro então explica alguns dos fundamentos de como realmente construir um design responsivo e algumas das técnicas modernas de apresentação de informações como a tipografia web.
Na sessão final, mais técnicas avançadas são apresentadas como soluções efetivas para os problemas apresentados por vários navegadores. E o livro finaliza com avançadas práticas de para testar um projeto e como aperfeiçoar seu desempenho.
A InfoQ.com conversou com Carver sobre seu livro os desafios encontrados pelos modernos desenvolvedores web.
InfoQ.com: Os modernos desenvolvedores web enfrentam incríveis desafios com diversos navegadores e dispositivos. Quais conselhos podemos dar para os desenvolvedores que estão lutando para se manter?
Carver: Primeiro de tudo, gostaria de dizer para se manter nisso. Eu acho que o estado de "esforço para se manter" é comum entre os desenvolvedores apaixonados. Nossa indústria se move rápido demais para qualquer um que queira viver utilizando as tecnologias mais recentes, sem ter muito foco, ou emprego prático. Se sentir que está com dificuldade para conseguir, então está fazendo seu trabalho muito bem.
Em segundo lugar, tem diversas maneiras para emular dispositivos e navegadores. Seria ótimo ter um laboratório com muitos dispositivo atuais e com todos telefones celulares, mas simplesmente não é uma realidade para muitos desenvolvedores, por sorte há alternativas.
O Chrome em suas ferramentas de desenvolvimento oferece um tipo de emulador que enquadra a janela a ao tamanho de um dispositivo, assim é possível escolher emular o tamanho da tela de qualquer dispositivos. Também emula coisa como como controles de toques, assim é possível ter uma ideia do que esperar do navegador Chrome nos celulares e tablets. Instalando o Android SDK, automaticamente também vai instalar o emulador oficial do Android. E no MacOS, instalando o Xcode, automaticamente vai instalar um emulador para dispositivos iOS.
InfoQ.com: O que pensa dos frameworks como Foundation ou Bootsrap? Como acha que eles se enquadram na caixa de ferramentas dos desenvolvedores?
Carver: Eu estava bem tranquilo sobre eles antes. No meu livro eu discuto Foundation em detalhes e o mostro como sendo uma ótima ferramenta para prototipação, mas recentemente eu estive experimentando isso no ambiente de produção. O argumento mais comum contra isso é que eles aumentam seu código e pode restringir o design. Porém, eu sinto que eles representam a real necessidade no processo.
A construção de sites está ficando cada vez mais complexa quando vamos afunilando e usando a web para implementar mais e mais problemas do mundo real, então quando se decide construir um site, as vezes não haverá certeza aonde irá parar. Ter um framework como Foundation no projeto, te oferece uma solução pré-fabricada que te livra de resolver problemas de imediato, como "quais botões vão parecer nesse site?" e deixa resolver problemas muito mais complexos como "tem um jeito melhor de implementar esse botão?". Acabo customizando 70-80% do framework, mas usando Foundation ou Bootstrap como ponto de partida economiza muito tempo.
InfoQ.com: Qual sua resposta para os críticos que dizem que o responsivo causa excessivo consuma de banda e problema de memória (em dispositivos móveis)?
Carver: Acho uma critica válida de um certo modo. O simples fato que importa é que o desenvolvimento de web nunca teve uma enorme quantidade de soluções oferecidas que não tivesse um lado controverso. Assim pergunto, já teve alguma solução para o desenvolvimento web que nunca foi seguido por um enxurrada de criticas? Olhe para o Swift agora. A Apple tem mais dinheiro reservado do que alguns países e passou anos criando uma linguagem para melhorar o desenvolvimento do iOS e imediatamente teve críticas sobre como quão bem ele compilava. Encare isso, como desenvolvedor, somos muito criticados e se quiser saber como é deixar de aceitar mudanças no modo de trabalho, converse com um desenvolvedor do Flash.
Banda larga e memória existe em um orçamento e para completar suas tarefas é necessário gastar esse orçamento. Desenvolvedores podem gastar mais orçamento por inúmeras razões, porém, não é uma razão válida para deixar de lado o design responsivo como um todo. Isso é errado. Tem um velho ditado "Um carpinteiro ruim culpa suas ferramentas". Um projeto responsivo é uma ferramenta para resolver problemas de aparelhos semelhantes na web. A fragmentação de aparelhos é uma realidade na web e só porque o projeto responsivo não é perfeito, não significa que ele não valha nada.
InfoQ.com: Ferramentas integradas com os navegadores (F12, etc) continuam avançar nas funcionalidades e complexidades. Quais melhorias te deixam mais empolgado sobre essas ferramentas? Quais partes são mais úteis para os desenvolvedores de sistemas responsivo?
Carver: Acho que esse movimento para construir ferramentas ainda é bastante incrível. Eu sei que não é mais novidade, mas ferramentas como gulp e grunt tem feito o processo de desenvolvimento bem mais eficiente. A habilidade do Compass em gerar sprites na hora é fascinante e ferramentas como Live Reload faz o processo do front-end se desenvolver muito mais rápido.
InfoQ.com: Como podemos ver se a Web Responsiva vai mudar no futuro?
Carver: Isto é uma pergunta difícil. Na seção de anexo do livro (The Responsive Web), tenho um capítulo no que chamo de "Design Consciente de Contexto". Essa ideia, que a interface deve se adaptar bastante no ambiente e modelo do usuário é algo que achei que já estava sendo discutido na teoria e prática como uma "Filosofia Responsiva". Para mim, só o fato de que esse mesmo conceito estava sendo tirado independentemente de cada um de nós, ambos olhando para o mesmo problema, me prova que tem algo aí.
Acho que temos todas as ferramentas no lugar para oferecer uma conexão profunda com a UI para os usuários da web, de tal maneira que possa incorporar a preferência pessoal deles, ambiente, tempo e a personalidade para o projeto de interface.
InfoQ.com: O que acha das ferramentas Macaw e Brackets quando se está projetando e escrevendo código?
Carver: Elas são ótimas. Não sei qual deveria usar na produção no momento, é ótimo ter ferramenta que ajuda o desenvolvedor facilmente alterar as dimensões e ver o que lhe sobra de espaço. A habilidade de manipular e alterar os espaços delimitados em um projeto, ajuda o desenvolvedor articular suas ideias num ambiente mais parecido com os navegadores de verdade. Encontro mais argumentos para os designers utilizarem um conjunto de ferramentas fragmentadas, ao invés de uma única aplicação para comandar tudo, como o Photoshop.
InfoQ.com: Quais suas motivações para escrever o livro?
Carver: Queria criar algo para solucionar o que vi como o maior erro no desenvolvimento da web moderna, colaboração entre os assuntos. Minha esperança era escrever algo que um designer pudesse e entender os desafios de um desenvolvedor, e um desenvolvedor pudesse ler e entender os desafios do designer. Me importo profundamente com a web e acredito apaixonadamente que podemos usar a web para fazer a vida melhor, mas isso só pode acontecer se primeiro desenvolvermos sistemas para solucionar problemas e fazer essa solução utilizável pela maioria das pessoas.
Um ótimo desenvolvedor pode chegar com novo jeito incrível de procurar algo para comprar, que corte os custos dramaticamente, mas se ele depender totalmente de uma interface de linha de comando, isso ajudará alguém? Alternativamente, um designer pode vir com um lindo modelo de interface, mas se o software não funcionar, quem liga? Precisamos de pessoas com essas habilidades para se comunicar por coisas que nos move adiante e espero que meu livro possa colaborar com isso em algumas situações.
InfoQ.com: Acredita que o design responsivo impactou no trabalho feito pelos desenvolvedores web de hoje?
Carver: Acho que está dentro de todas funções no processo. Não podemos ignorar a preferência de aparelhos dos usuários, e penso que o "design responsivo" achou seu lugar no processo de desenvolvimento. Acredito que é o processo padrão e me vejo tendo que justificar o fato de não incluir layouts responsivos por padrão.
NOTA: O livro The Responsive Web está com 40% de desconto usando o código info40rwd na manning.com. O código está ativo e não expira.
Sobre o autor do livro
Matthew Carver é desenvolvedor front-end e web designer com experiência em design responsivo para clientes como: a companhia aérea American Airlines, o Dallas Morning News e o Chobani Yogurt.
A plataforma Web percorreu um longo caminho desde que o HTML5 se tornou popular e as pessoas começaram a olhar o JavaScript como uma linguagem que é capaz de construir aplicações complexas. Muitas APIs surgiram e existe conteúdo abundante sobre como os navegadores podem tratar todas elas.
Esta serie especifica de artigos irá um passo além e se concentra em como essas tecnologias podem ser usadas na prática, não somente para construir demonstrações ou protótipos, mas como os profissionais tem usado elas em produção. Nessa serie de artigos pós HTML5, vamos além do modismo e mostraremos detalhes práticos dos especialistas sobre o que realmente funcionou com eles. Também abordaremos tecnologias (como AngularJS) que vão um passo além e definem o futuro de como os padrões e desenvolvimento web irão evoluir.
Esse artigo do InfoQ é parte da serie "Próxima geração do HTML5 e JavaScript". Você pode assinar para receber notificações via RSS.