Quem trabalha com desenvolvimento web, em especial os front-ends, com certeza já ouviu falar de Maujor, o Maurício Samy Silva. Sim, porque ele é certamente mais conhecido pelo apelido que o consagrou no meio como o Dinossauro da CSS.

Autor de diversos livros, Maujor é um obstinado divulgador dos Padrões Web. Nesta entrevista, ele explica como começou a trabalhar com desenvolvimento de sites, dá sua opinião sobre alguns temas muito discutidos na área e declara que sua maior inspiração é compartilhar conhecimentos.

1. Você é engenheiro por formação, já foi professor de matemática. Como chegou na área de desenvolvimento Front-End? E o que te chamou a atenção para o tema de padrões web?

Sim, sou formado em Engenharia Civil pelo Instituto Militar de Engenharia (IME/RJ) e concluí a graduação em 1973, no posto de capitão. Em 1976, aprovado em um concurso para magistério do Exército, comecei a dar aulas de Geometria Descritiva e depois Matemática para alunos do Colégio Militar do Rio de Janeiro. Minha carreira militar foi toda exercida no magistério. Paralelemente às minhas atividades de magistério militar, eu exerci a engenharia civil em uma empresa de projetos e fiscalização de obras de instalações comerciais e industriais.

Minha rígida formação militar, aliada à minha fascinação pelas ciências exatas, moldaram minha conduta e raciocínio extremamente cartesiano, criando uma necessidade quase compulsiva de manter meu cérebro em constante atividade, encarando e vencendo desafios.  Com esse perfil, quando surgiu o primeiro computador pessoal no Brasil, adquiri um e não mais parei.

Em 1988, juntamente com alguns amigos de Copacabana, participei da fundação de um Clube de Pesca de Praia, e um tempo depois sentimos a necessidade de ter um site do Clube. A sugestão imediatamente acendeu uma luz de alerta no meu cérebro que me dizia que seria um bom desafio criar um site para o Abissal Clube de Pesca. E foi assim que tudo começou. Comecei a pesquisar na Internet sobre como criar um site. Descobri o FrontPage e o site foi criado e hospedado em um servidor gratuito, o que era muito comum naquela época.

Sabe aquelas crianças que ganham um carrinho com controle remoto, ficam fascinadas, brincam por três dias sem parar e enjoam? A maioria delas abandona o brinquedo, enquanto algumas se fecham no quarto e, às escondidas, desmontam o carrinho para ver o que tem dentro e o que os faz funcionar. Eu, com meus quase 70 anos ainda sou a criança que desmonta o brinquedo. Comecei a investigar o FrontPage para descobrir o que fazia o site “aparecer” em toda sua grandiosidade na tela do computador. Foi meu primeiro contato com o código fonte e a HTML.

Descobrir que todo aquele colorido e formatação que era visto na tela tinha sido criado com linhas e mais linhas de texto foi motivo de uma euforia intensa. Era uma fonte valiosa e grandiosa de estudo.

Minhas pesquisas subsequentes, durante dois anos, me levaram ao site do W3C, a conhecer as CSS, e a constatar que no Brasil, àquela época, essa tecnologia era usada somente para estilizar e retirar sublinhado de links.

Durante quase três anos estudei, importei livros, pesquisei, pratiquei, criei muita coisa com HTML e CSS, e no final adquiri um conhecimento avançado sobre CSS. Constatar que no Brasil ainda se usavam tabelas em detrimento da dupla HTML e CSS para construir layouts web me levou a questionar sobre o valor que meu conhecimento tinha se ele ficava restrito ao meu HD.

Em 2003, já aposentado, com filhos criados e realizado profissionalmente, minha experiência de 30 anos de magistério falou mais e resolvi criar o site maujor.com, cuja proposta inicial era divulgar e ensinar como criar sites com CSS. O site acabou se tornando uma referência nacional e até hoje tenho um carinho muito especial por ele e pelo Blog do Maujor (maujor.com/blog), que foi criado depois.

Minha proposta hoje é a mesma que eu tinha em 2003, ou seja, ensinar desenvolvimento front-end para iniciantes. O assunto é que se tornou um pouco mais ambicioso, pois não está restrito somente às CSS, abrangendo outras tecnologias do W3C, os chamados Padrões Web.

2. Você sempre impulsionou a adoção do CSS no Brasil, acompanhando o crescimento dessa linguagem e da comunidade. Como você resume a evolução da CSS nos últimos nove anos?

Se voltarmos nove anos atrás estaremos em 2004, quando meu site completava seu primeiro ano de vida. Me lembro muito bem que àquela época layouts com tabelas dominavam o desenvolvimento front-end no Brasil, assim como os navegadores IE5.5 e IE6 dominavam o mercado de navegadores.

Eric Meyer era o nosso maior mestre, o verdadeiro guru mundial das CSS. Seu livro “Eric Meyer on CSS” era um clássico e ele começava o livro ensinando como transformar um layout em tabelas em um layout CSS, mostrando as regras CSS capazes de destacar as tabelas e células de um layout existente, com a finalidade de visualizar a estrutura do site e facilitar sua migração para as CSS. Hoje, essa é uma funcionalidade nativa na maioria das ferramentas de desenvolvimento incorporadas aos navegadores e que se destinam a destacar não somente tabelas, mas qualquer elemento da marcação com uso de cores personalizáveis.

No Brasil, foi por volta de 2007 que as CSS começaram a ser usadas em larga escala. De lá para cá, evoluímos de um começo com folhas de estilos recheadas de hacks CSS para fazer as coisas funcionarem no IE6 até os fantásticos efeitos de sombreamento, gradientes, transformações, animações etc. que, aliados aos polyfils que proliferam aos borbotões, colocou à disposição dos desenvolvedores todas aquelas funcionalidades.

Em 2009, com o navegador IE7 predominando no mercado brasileiro e a consequente saída do IE6, foi decretada a morte definitiva do então famigerado “box model” quebrado. Foi um pequeno primeiro passo em direção a navegadores Internet Explorer mais aderentes aos padrões web, como é o atual IE10.

A seguir, a chegada das CSS3, com suas funcionalidades sendo implementadas com uso de prefixos proprietários, e as CSS já consolidadas no Brasil, o desenvolvimento de interfaces fantásticas com uso das CSS tornou-se uma verdadeira febre entre desenvolvedores.

Especificações do W3C em fases que mal tinham saído do status de rascunho de trabalho começaram a ser implementadas em um navegador ou outro com uso dos perniciosos (ou utilíssimos?) prefixos proprietários. Começou e estamos (re)vivendo uma velada guerra dos navegadores.

Resumindo, posso afirmar que saímos de um mundo cheio de “hacks” para um navegador e entramos em um mundo repleto de prefixos proprietários para vários navegadores.

Eu pergunto: isso é bom ou é ruim? Minha convicção é que a resposta pode ser “muito bom” ou “muito ruim”, dependendo do balanço final dos prós e contras da implementação dos prefixos proprietários. E você? Já parou para refletir sobre essa questão? Ou usa indiscriminadamente prefixos e polyfils sem medir consequências?

3. O que você acredita que será possível fazer com CSS em alguns anos, que ainda não conseguimos hoje?

No início da década passada duas premissas relacionadas ao desenvolvimento front-end transfomaram-se em verdadeiros dogmas e foram repetidas até a exaustão em blogs e matérias especializadas por todos os autores envolvidos com os padrões web.

Uma dessas premissas era: “O futuro da web é a XHTML, uma linguagem HTML baseada na XML”. A outra era “Linguagem (X)HTML para marcação, CSS para estilização (posicionamento, cores, tamanhos, fundos, etc.) e JavaScript para comportamento”. Eram as famosas três camadas do desenvolvimento front-end.

Em 2009, o W3C decretou o fim do Grupo de Trabalho para desenvolvimento da XHTML2, após Tim-Berners Lee ter admitido que a tentativa de transformar a linguagem de marcação HTML em uma linguagem compatível com a XML tinha falhado porque os navegadores não aderiram à nova tecnologia. Todos os esforços a partir de então se voltariam para o desenvolvimento da HTML, com o W3C juntando-se ao Grupo WHATWG no desenvolvimento da HTML5. Caia uma das premissas: a XHTML já não era mais a linguagem de marcação do futuro.

As funcionalidades das CSS3, desde os seus primeiros rascunhos de trabalho, já apontavam para uma tremenda ingerência na camada de comportamento. E hoje é comum falar-se em CSS substituindo Flash. Caiu mais uma premissa, CSS não é mais somente para estilizar.

No futuro, de concreto, para citar apenas algumas delas, posso antever o uso das funcionalidades já em fase de estudos no W3C, relacionadas à criação de layouts complexos com os Módulos para Grids, Regiões e novas funcionalidades de posicionamento.

Além disso, a criação de efeitos, filtros e máscaras; o uso dos chamados seletores avançados do nível 4; a definição de variáveis para propriedades e valores CSS em substituição aos atuais pré-processadores, tais como LESS e SASS. As funcionalidades para design responsivo, cujo primeiro passo já foi dado com o lançamento do Rascunho de Trabalho do W3C para o Módulo “CSS Device Adaptation”, em setembro de 2011,  e do Módulo “Media Queries Level 4”, em dezembro de 2012. Também a criação de efeitos em imagens e a possibilidade de se servir imagens de acordo com o dispositivo do usuário.

Essas são, repito, funcionalidades já em estudo no W3C e, baseado em tudo que tenho lido, eu não arriscaria um palpite sobre o que virá no futuro. Parece-me que tudo será possível. Resta apenas saber se os fabricantes de navegadores estão dispostos a implementar o que está sendo criado no papel.

4. O que você considera mais difícil de aprender hoje na escrita CSS para quem está iniciando?

Dentre as funcionalidades das CSS3 que eu considero menos fáceis de aprender estão os gradientes e as funcionalidades previstas nos módulos para criação de layouts.

Dito isso, quem está começando precisa entender que em CSS nada é colocado em desuso ou fica obsoleto, nem propriedades, nem valores e nem e principalmente a sintaxe CSS. Se você resolver estudar CSS1, nada do que aprender será descartado ou deixará de funcionar quando você conhecer CSS3 e desenvolver com seu uso.  A sintaxe CSS é extremamente simples e se resume a uma só linha: seletor { propriedade1: valorA; propriedade2: valorB; … }

Declarando um seletor e a ele aplicando propriedades CSS e um dos seus possíveis valores, você manipula toda a estilização, o posicionamento a criação de layout.

Se você não conhece nada de CSS, meu conselho é começar com as CSS2. Esse primeiro dia de estudo e prática vai lhe dar uma pequena amostra do que as CSS são capazes, e mais do que isso, vai motivá-lo a aprofundar os estudos.

Com somente um dia de estudo você aprende algumas poucas propriedades, seus valores possíveis e como inserir uma folha de estilos em um documento HTML. Com isso, você já terá condições de definir cores de fundo e de textos, tamanhos e tipos de fontes, criar bordas, efeitos em links e algumas outras possibilidades de estilizar. Com um pouco mais de estudo e nenhum esforço extra você vai conhecer os fundamentos das CSS, tornando-se familiarizado com propriedades e valores CSS, sempre complementando a teoria com a prática. Até aqui, tudo vai fluir e acontecer com muita facilidade e sem transtornos.

A primeira dificuldade que você irá encontrar é com relação às funcionalidades de posicionamento de elementos na página. Essas funcionalidades são a chave para criação de layouts. Dedique tempo, estudo e muita prática para entender posicionamento relativo, absoluto e principalmente flutuação de elementos.

Vencido isso, você deverá estar em condições de criar layouts fixos de duas, três ou mais colunas. Continue com layouts fluidos, que não são difíceis de aprender. Você está pronto para as CSS3 e agora os desafios são maiores e mais complicados, contudo o grau de dificuldade do aprendizado é bem menor do que aquele exigido para aprender uma linguagem de programação.

5. Nos últimos dois anos muito tem se falado sobre a importância do CSS para múltiplos dispositivos através da utilização de “media-queries”. Como você vê isso? Acredita que seja uma solução que veio para ficar ou paliativa?

Acredito que veio para ficar e não é sem méritos que “media-queries” é um dos três pilares de sustentação do desenvolvimento web responsivo, ao lado de layouts fluidos e mídias flexíveis. Atualmente, em se tratando de desenvolvimento web, não há mais sentido em se criar um site ou aplicação não responsiva, o que torna “media-queries” indispensável, devendo ser uma das funcionalidades muito bem estudadas e entendidas por desenvolvedores.

Contudo, quero registrar que, no começo do mês de abril, Ian Storm Taylor publicou um texto bem interessante contestando o valor de media queries e sugerindo uma funcionalidade que denominou de “element querie”, destinada ao uso código modular em design responsivo. Recomendo a leitura em http://ianstormtaylor.com/media-queries-are-a-hack/

6. Dentro da complexidade da CSS para criar estruturas, existem muitos atributos e técnicas que estão surgindo para diagramação, entre elas o “Template Layout Module” (http://www.w3.org/TR/css3-layout/) e o “Flexible Box Layout Module” (http://www.w3.org/TR/css3-flexbox/). Como você vê esses módulos emergentes? Isso vai inibir, de alguma forma, a utilização de float e inline-block para diagramação?

Vejo com bastante otimismo não somente os Módulos citados como todos os Módulos destinados à criação de layouts e posicionamento. Sem dúvida eles irão facilitar, e muito, o trabalho de criação de layouts, mas acredito que a propriedade float e o valor inline-block continuarão sendo usados e tendo sua utilidade.

7. Muito se fala sobre a substituição da animação em Flash pela CSS, muito por causa do CSS transition e animation, e mais ainda com a aposta da CSS4 com CSS shaders. Você realmente acredita que haverá essa substituição? A CSS é a melhor linguagem para evoluir dentro desse ambiente de animação?

As CSS isoladamente não substituirão o Flash e nem são a melhor linguagem para substituir animações.

São algumas das tecnologias da chamada Open Web, ou Padrões Web Abertos, que quando combinadas permitem ao desenvolvedor criar vários efeitos e interfaces interativas, que historicamente eram projetadas com uso do Flash. Dentre tais tecnologias eu destaco HTML5, CSS3, SVG, WebGL e JavaScript.

Por exemplo: os novos elementos video e audio da HTML5 permitem que filmes e áudio sejam incorporados em uma aplicação web sem necessidade do uso de plugins para fazê-los funcionar. E assim é com outros efeitos do Flash que já são possíveis de se reproduzir com uso daquelas tecnologias.

Acredito que o movimento é em direção a uma web aberta, e em consequência livre de padrões proprietários. Assim, é coerente que eu acredite também na substituição do Flash por tecnologias abertas.

Essa é a minha visão. Contudo, a Internet está repleta de artigos e matérias que discutem o assunto CSS versus Flash. As opiniões são divergentes e não há um consenso sobre o assunto. Na maioria das vezes a discussão acaba se transformando no confronto tecnologias proprietárias versus padrões abertos.

Remy Sharp, um consagrado autor inglês, escreveu um artigo a respeito desse assunto que demonstra muito bem quão polêmico isso é. A área de comentários foi fechada pelo autor, três meses depois da publicação, devido à grande confusão gerada. Leia em: http://remysharp.com/2010/02/08/html5-vs-flash/

8. Nos anos 2000 era difícil trabalhar com frameworks e códigos de terceiros padronizados. Hoje em dia está bastante fácil e até cômodo encontrar frameworks que agilizem e automatizem o seu trabalho de desenvolvimento. Como você vê a utilização de Grids prontos e Frameworks em geral?

Vejo com reservas, mas não descarto seu uso.

É incrível a quantidade de frameworks e bibliotecas à disposição dos desenvolvedores. E, não é somente a diversificação de assuntos, mas também a sobreposição de mesmos assuntos. A restrição que faço ao uso de frameworks e bibliotecas diz respeito ao superdimensionamento dos meios de desenvolvimento.

Tornou-se comum, pois é “bastante fácil e até cômodo” encontrar um framework que agilize e automatize o trabalho de desenvolvimento e adotar essa solução sem avaliar as consequências do seu uso. Na prática, não é raro encontrar sites importando a biblioteca jQuery somente para fazer funcionar um menu dropdown. Com mínimo esforço alguém poderá obter efeitos de alto impacto visual sem saber absolutamente nada da linguagem JavaScript.

Em resumo: usar frameworks ou bibliotecas para desenvolver é uma decisão que exige um estudo apurado, envolvendo não somente facilidade e agilização do processo, mas também desempemho, performance, pertinência e características gerais da interface.

9. Você é conhecido por todos carinhosamente como “Dinossauro da CSS”. Você é uma pessoa que inspira os outros. Quem, ou o que, te inspira?

Na verdade não existe um quem me inspira, mas certamente existe um o que. Eu comecei na área web com o objetivo de vencer um desafio que eu mesmo me propus. Acumulei conhecimentos que julgava muito valiosos para deixar guardado no meu HD e resolvi compartilhar os conhecimentos.

O “professor” que existe em minha alma continua olhando para os meus leitores e para aqueles que seguem o meu trabalho como alunos ávidos por conhecimentos. Certamente o que me inspira é o compartilhar conhecimentos.

10. O que você acha da proposta do Schema.org, uma iniciativa dos principais mecanismos de busca para melhorar a semântica dos conteúdos na web? Mesmo não sendo uma iniciativa da W3C, é valido que os desenvolvedores implementem em seus projetos?

Permita-me uma explicação bem simples e sem entrar em considerações técnicas sobre microdata.

A HTML5 deu forte ênfase à marcação semântica. Os elementos da linguagem têm sua semântica bem definida e retratam com precisão a natureza dos conteúdos.

Microdata é um mecanismo destinado a fornecer informações semânticas adicionais sobre o conteúdo. Esse mecanismo usa pares atributo/valor para adicionar semântica. É um mecanismo que extende a HTML5.

Conteúdos lidos por humanos são interpretados dentro de um contexto e entendidos sem problemas, mas máquinas não são capazes de interpretar conteúdos. Por exemplo; para um humano a frase “a manga da camisa é verde” não deixa dúvidas, contudo uma máquina não saberá se a referida manga é uma fruta ou não. Esse simples exemplo ilustra a necessidade de se “dizer” para mecanismos de busca (máquinas) que manga não é fruta. Para se “dizer” isso usamos microdata, que é uma especificação do W3C.

Para fornecer a informação semântica para as máquinas, a sintaxe microdata remete a máquina para um URL no qual está explicada a semântica do conteúdo marcado. Será que existe um URL explicando a semântica para a palavra “manga”?

Os principais mecanismos de busca, liderados pelo Google, implementaram o que foi denominado de “Rich Snippets”, uma ferramenta destinada a fornecer URLs para explicar semântica e ser usada com microdata, microformats e RDFa. Em 2011, o Google abandonou o projeto em favor do Schema.org, que seria focado somente em microdata.

Então, Schema.org nada mais é que um serviço online que fornece URLs destinadas a explicar a semântica de conteúdos com uso de microdata. É um serviço que extende a HTML5. Qualquer companhia pode criar seu URL, com explicação de semântica personalizada para ser usada com microdata.

Portanto acho válido e recomendo o uso do serviço prestado por Schema.org.

11. Seus livros ajudam a guiar milhares de brasileiros pelo desenvolvimento front-end, mas de onde nasceu a ideia de escrevê-los? Qual a sua inspiração?

No ano de 2005, com meu site já era razoavelmente conhecido na comunidade de desenvolvimento. Eu comecei a receber vários e-mails solicitando que transformasse os tutoriais do site em um livro. Respondia a esses pedidos agradecendo pela ideia e argumentando que não me sentia confortável em transformar um conteúdo disponível gratuitamente no site em um livro pago.

Não queria me afastar da proposta inicial, de compartilhar conhecimentos usando o site, e até hoje penso da mesma forma. Foi a época do nascimento dos blogs e naquele mesmo ano criei o Blog do Maujor, como uma forma de ter mais um canal de comunicação com meus leitores.

Contudo, a ideia de escrever um livro, nascida das sugestões dos meus leitores, começou a provocar meu cérebro que se alimenta de desafios. Passei um ano com a ideia de escrever um livro na cabeça e em novembro de 2007 foi lançado o “Construindo sites com CSS e (X)HTML”. A expectativa era muito grande e a aceitação foi muito maior do que a esperada. O livro foi um sucesso tão grande que eu não parei mais de escrever, e esse ano pretendo lançar meu décimo-primeiro livro, sobre Design Responsivo.

————————-

Com a colaboração de Bernard de Luna e Edu Agni

***

Livros do Maujor – todos pela editora Novatec

• Construindo sites com CSS e (X)HTML – Sites controlados por folhas de estilo em cascata
• Criando sites com HTML – Sites de alta qualidade com HTML e CSS
• jQuery – A biblioteca do programador JavaScript
• AJAX com jQuery – Requisições AJAX com a simplicidade da jQuery
• JavaScript – Guia do programador
• HTML5 – A linguagem de marcação que revolucionou a web
• CSS3 – Desenvolva aplicações web profissionais com uso dos poderosos recursos de estilização das CSS3
• jQuery Mobile – Desenvolva aplicações web para dispositivos móveis com HTML5, CSS3, AJAX, jQuery e jQuery UI
• jQuery UI – Aprenda a criar componentes de interface de alto impacto visual com uso da biblioteca jQuery UI
• Fundamentos da SVG – Crie gráficos de alta resolução para suas aplicações web independentes de dispositivos e plataformas

***

Esta matéria foi publicada originalmente na Revista iMasters. Acesse e leia todo o conteúdo.