Microsoft anuncia suporte a CSS3

A Microsoft apresentou a desenvolvedores uma demonstração do Internet Explorer 9 (IE9) na Professional Developers Conference 2009 e aparentemente estão se preucupando e trabalhando para trabalharem lado a lado com os padrões do web.

Ainda é um estágio inicial de desenvolvimento, mas a equipe IE9 já deu alguns saltos impressionantes em termos de suporte a padrões web (web standards), um bom exemplo é a imagem acima (retirada do blog IE) aparece um teste feito no CSS3.info onde marca suporte (impressionante) de 574 seletores dos 578 existentes noCSS3, uma grande melhoria já que o atual, Internet Explorer 8 só reconhece 330 dos 578.

Mais informações podem ser vistas no blog do IE, aqui! (em inglês)

Aposto que você se perguntou qual é o resultado do Firefox nesse teste. Ele identifica todos os 578 seletores em sua versão atual.


Distribua

(x)html e css para design de interfaces – Parte 2

O (x)html/css como ferramenta, conceito e diferencial do designer de interfaces é o tema deste artigo, em sua segunda parte. Para um melhor entendimento, sugiro, antes de mais nada, uma atenta leitura à primeira parte.

Processo de produção do código

O processo, em si, é bastante claro e objetivo: cuidar da codificação, da estrutura do lay-out desejado, obtendo, assim, um melhor resultado, carregamento rápido, amplificando os conceitos de usabilidade e acessibilidade por meio de boas e salutares técnicas.

Sendo assim, nada poderá dar errado, não é?

Analisando os “gargalos” da produção

O processo rotineiro de um estúdio ou agência web inclui verbas mínimas, grandes exigências e pouca tolerância (por boa parte dos clientes) e prazos impossíveis. Não há como fugir: ou se entra em tal lógica tortuosa de cabeça, ou colhe-se as consequencias desagradáveis da falta de adaptação, que incluem o “sumiço” dos freelas e o desemprego pertinente.

Conheça, agora, os maiores “gargalos produtivos”, e as melhores maneiras de evitá-los:

1) Propostas infactíveis:

Tais propostas são oferecidas / desenvolvidas por profissionais de criação completamente desambientados do processo de estruturação de páginas. É certo que a criatividade precisa de espaço para “voar”, porém um mínimo de “pé-no-chão” é mais do que necessário. É preciso conhecer o processo produtivo como um todo (mesmo que certas etapas não façam parte de sua rotina profissional), a fim de não propor soluções “impossíveis”, que podem ser belas e competentes em termos de design, porém completamente descabidas no momento de estruturar tal conteúdo.

Portanto, se a idéia e o briefing levam para o desenvolvimento em (x)html/css (com textos em formato “nativo”, portanto), de nada adianta desenvolver um lay-out que, na melhor das hipóteses, só será factível em flash.

O profissional que faz design web, ao conhecer efetivamente a estruturação, poderá situar-se melhor, evitando grandes “mancadas”, como apresentar e aprovar determinada proposta ao cliente impossível de ser “produzida”.

2) Códigos sujos:

Herança indefectível do uso “preguiçoso” de editores WSWYG, códigos sujos, não-semânticos, inadequados às web standards, estão espalhados por diversos sites, nos mais variados “níveis” de produtores. O maior problema, aqui, está na manutenção de tal código. Normalmente, sites com códigos de tal “qualidade” nascem do descuido e descaso de diversos “profissionais” completamente reativos, sem qualquer preocupação com a necessidade de edição posterior. Ao agirem assim, ignoram a máxima: “o cliente vai mudar de idéia”, além de “esquecerem” que sites web são mutantes, mudam drasticamente (visualmente, conceitualmente).

A solução, novamente, recai sobre a necessidade de aprender, de fato, estruturação. Assim, com conhecimentos, visão e responsabilidade, todo e qualquer código torna-se limpo, editável e expansível.

3) Falta de integração:

Por mais óbvio que seja, existem designers que simplesmente relutam na hora de conversar com os estruturadores e programadores envolvidos no mesmo projeto, resultando num grande obstáculo à integração de soluções produtivas adotadas. Ninguém está numa ilha, o sucesso de um projeto web está diretamente ligado à integração de uma equipe, capaz de trabalhar e pensar coletivamente.

4) Produção desestruturada:

O maior problema, aqui, é a repetição da produção de códigos quase idênticos, somente por estarem em projetos distintos, o que, certamente, custará tempo precioso.

Que tal usar módulos produtivos? Existem diversos blocos de código e muitas soluções produtivas de estruturação que normalmente se repetem, de projeto em projeto. Assim, diversas tarefas ficam mais fáceis, pois já partem de um conjunto de códigos pré-definidos, bastando a adaptação dos mesmo para que o projeto avance. Exemplos de tal idéia: códigos para separação em colunas de uma página, de menus de links, de formulários e diversos outros.

Soluções possíveis

Há uma série de ações que podem (e devem) ser adotadas pelo designer que faz web, melhorando significamente a performance em tal meio e evitando a calvície precoce (advinda do constante “arrancar” de cabelos). Sugiro, aqui, algumas idéias que podem melhorar a vida profissional:

1) Vivencie a estruturação:

Perca o medo e o receio. Mergulhe de cabeça! Experimente adotar as web standards em seus projetos, acompanhe sites desenvolvidos com padrões (como o w3csites, por exemplo) e veja as poderosas possibilidades em ação. Ao acompanhar os mais “experientes” em ação, certamente a empolgação em mergulhar fundo aumentará consideravelmente.

2) Expanda seus conhecimentos:

O melhor meio para aumentar suas habilidades é o estudo. Juntamente com a pesquisa, irá possibilitar um aumento significativo da percepção profissional, em qualquer nível em que esteja. Confira algumas dicas comentadas, de sites e livros:

a) W3C – Documentação traduzida: boa parte dos mais importantes documentos contendo as definições do (x)html, css, web standards e acessibilidade. Grandes colaboradores brasileiros resolveram desenvolver, gratuitamente, suas traduções, visando à expansão das web standards em terras nacionais. Faça sua parte e estude os documentos traduzidos, fazendo com que tal esforço não seja em vão.

b) Maujor: Maurício Samy Silva (Maujor) é um respeitável senhor de cabelos brancos e uma invejável bagagem em web standards no Brasil, sendo, praticamente, o oráculo de tal tema. Quando se interessou por padrões web, o tema era praticamente desconhecido no país (e não havia os milhares de sites e blogs escrevendo – ou tomando carona – sobre o tema). Portanto, trata-se do pioneiro dos padrões no Brasil, sendo que seu site possui muitas informações preciosas para estudandes e profissionais da área. Visite o site, aproveite e passe pelo blog.

c) CSS Zen Garden: conheça uma brilhante galeria de sites desenvolvidos somente com (x)html/css e veja do que esta linguagem é capaz, desde que utilizada sabiamente. O site oferece um conjunto de documentos para que qualquer pessoa se aventure na construção de um novo layout, inteiramente baseado em css, sendo que os melhores são publicados. Visite. Conheça a versão em português.

d) Livro do Maujor: o livro “Construindo Sites com CSS e (X)HTML” é o melhor livro publicado até então no Brasil. Com didática séria, dinâmica e inteligente, Mauricio Samy Silva conduz o estudante pelos caminhos do desenvolvimento com css, dando base sólida e conhecimento de verdade. Visite o site do livro.

e) CSS interativo: conheça este serviço oferecido pelo iMasters, com desenvolvimento de Mauricio Samy Silva e experimente, interativamente, todos os recursos do css. Visite!

f) W3C validator (css e xhtml): verifique seu código a fim de procurar erros e correções. Com esta ferramenta oferecida pelo W3C, você poderá verificar seus códigos por uploads (ou seja, poderá verificar antes de publicar), páginas hospedadas e conferir a relação de erros e sugestões “robóticas” para correções. Conheça a ferramenta e adicione aos seus favoritos! Você também pode instalar plugins de firefox para validação diretamente no browser como o tidy, por exemplo, e verificar seus códigos.

g) Web Developer: conjunto de ferramentas para desenvolvedores (edição em real time de css, validação e outros), oferecidas num plugin de firefox. Instale aqui e aprenda sobre a ferramenta aqui.

Conclusões

Espero que as informações e dicas acima possam ajudar a todos os designers de interface no árduo caminho rumo à padronização total de todas as páginas e sites desenvolvidos. Fico no aguardo das opiniões de todos vocês.

Boa sorte!

Distribua

(x)html e css para design de interfaces

O papel desempenhado pelo (x)html e css para designers que fazem web parece bastante óbvio para muitos. Porém, ainda há uma grande quantidade de estudantes e envolvidos que relutam quando chega o momento de aprender estruturação.

O que é estruturação?

Trata-se de um termo comum na profissão, quer dizer fazer o código (x)html, desenvolver o css para formatação visual. Normalmente, parte-se de um layout pronto e aprovado, feito em algum programa para criação visual (o photoshop é o favorito). Assim, com os aspectos visuais definidos, a tarefa do profissional será a de transformar aqueles lindos arquivos .psd em páginas web que funcionem corretamente, de maneira satisfatória.

É realmente necessário saber (x)html e css?

Podemos citar uma analogia simples: trabalhar com web e não conhecer essas linguagens, equivale a uma viagem de, por exemplo, seis meses na Inglaterra, sem o mínimo conhecimento de inglês. Por mais que você se muna de todo o aparato-idiomático-fast-food (canetas com scanners tradutores, e-books, palms, smartphones, notebooks), chegará o momento em que sua falta de conhecimento o colocará, obviamente, em situações mais do que constrangedoras.

Portanto, trabalhar com web sem conhecer a sua língua-mãe é praticamente impossível, pois, apesar de haver diversos recursos para desenvolver (x)html e css sem digitar linhas de código, fatalmente chegará o momento em que a falta de conhecimento cobrará o seu preço.

Qual a melhor maneira de aprender?

Evidentemente, com a ajuda de um professor num bom curso, tudo fica bem mais fácil. Por incrível que pareça, existem diversas escolas (de informática ou não) que ensinam o ultrapassado html 4.0.1. O aluno aprende uma linguagem antiga e se baseia em técnicas não recomendadas no momento atual, como o uso de frames (divisão da página em partes distintas, trazendo um enorme obstáculo a acessibilidade), tabelas para lay-out (inserção do conteúdo da página em células de tabelas, gerando um código não semântico, não acessível e muito “sujo”, limitando a visualização das páginas em dispositivos de mídia que não os monitores dos PC´s), formatação visual dos elementos com comandos não recomendados de html e utilização de tags(comandos) proprietários sem padronização.

A melhor maneira de aprender é, portanto, aprender o que é certo, analisando o que é errado como se analisa um animal estranho num zoológico. Na web, terra das mudanças constantes e rápidas, ir contra a corrente pode trazer, como consequência final, a desvantagem competitiva.

A utilização de poderosos editores WYSIWYG como o Dreamweaver é praticamente indispensável no ambiente produtivo, porém seu uso deve vir após o conhecimento básico da estrutura da codificação (x)html e css. Assim, com o conhecimento solidificado e correto, torna-se mais fácil a trajetória profissional.

A dica é: aprender a base do (x)html/css, aprender Dreamweaver (ou outro robusto editor visual, por motivos de produtividade – sugiro o excelente Blue Fish) e aprofundar os conhecimentos cada vez mais. Aguarde a próxima parte deste artigo.

Um abraço!

Distribua

Links úteis para designers de web

Após décadas sem postar, volto hoje com uma relação bem interessante de links para designers e desenvolvedores que trabalham com web. Aqui vai:

1) Entendendo a Web Developer Tools:
Plugin fantástico para firefox, permite edição de códigos com preview real, validação facilitada, acesso rápido ao css da página e muito mais. Na verdade, são poucos os que a utilizam da maneira correta (e com todos os recursos). Portanto, neste post do blog do maujor, a ferramente é devidamente dissecada. Enjoy 😉

2) Preview da página em todos os browsers:
Que tal visualizar como seu site ficará em TODOS os browsers, de TODAS as plataformas? Como é praticamente impossível instalar todos os browsers num único sistema, recomendo a utilização deste site, que produz screenshots de seu site em diversos navegadores diferentes. Confira!

3) Galeria de CSS:
Você conhece o CSS Beauty? Exuberantes exemplos de como fazer design de qualidade, primoroso e cumprindo, fielmente, as web standards. Confira!

4) CSS Box Model interativo
Ferramenta que permite o aprendizado interativo de CSS, com todas as propriedades possíveis, que podem ser aplicadas dinamicamente, facilitando (e muito) o conhecimento e aplicação das mesmas. Confira aqui!

Por hoje, encerro por aqui, mas em breve retorno com outros links e informações interessantes.
Aproveito para convidar a todos para visitarem meu novo blog.

Um abraço!

P.S.: aguardem posts com tudo o que rolou no Intercon 2008!

Distribua

O CMS e o Design – Parte 1

O CMS está ganhando o mundo, oferecendo métodos eficazes e simples de produção na web. Se, num momento anterior, a parte do desenvolvimento de um site trazia uma série de dores de cabeça ao pobre desenvolvedor freelancer que se habilitava a fazer o projeto completo por alguns trocados a mais (ou, quando não conseguia,se via obrigado a dividir os mínimos trocados com algum pobre programador…), hoje não é mais um problema indissolúvel.

CMS pra quem tem fome

Conheço uma série de projetos de sites dinâmicos que contaram somente com profissionais de design em sua concepção, devido a facilidade trazida pelo modelo CMS de produção. Sim, é verdade: tudo está pronto, pré-configurado, funcionando super bem, sem maiores problemas. Nada de noites sem dormir, debruçado sobre aquele livro gigantesco de php!

Ah, se fosse assim!

Pois é, o mundo disneyano acima não existe. Pelo menos, não da forma como foi descrito. É fato que tudo está mais simples, mais fácil. Porém, dizer que o programador é dispensável e que os conhecimentos de PHP ou de qualquer linguagem de servidor não são necessários é, no mínimo, uma grande heresia.

Qualquer profissional envolvido com um projeto com CMS, sabe o quanto deve conhecer a estrutura da linguagem de programação, da maneira como o sistema adotado funciona, para poder ajustar e customizar o layout, mantendo sua funcionabilidade intacta.

Customização: E agora, José?

Estava tudo muito lindo. Poucos cliques e um belo sistema de busca, de comentários, de comércio eletrônico surgiam na sua frente, prontos, funcionais. Pois é, você, como bom designer, começa a olhar e encontra uma série de soluções estéticas capengas, em completa desarmonia com a proposta e o conceito geral de seu cliente. Então, respira fundo e decide: customizarei!

Confira o final da saga no próximo post. Um abraço!

Distribua

Sexta Semana de Design

Semana de Design

Falae pessoal. Essa semana agora rola a 6ª Semana de Design, na Univercidade, aqui no Rio de Janeiro.

Será um evento que falará sobre Design (dã) de todos os tipos: Moda, Branding, Automóveis, Prototipagem, Ilustração, Webdesign e outros mais.

Continue lendo

Distribua

Padrões Web para Clientes e Leigos

Não sei quanto a vocês, mas comigo já aconteceu, várias vezes, de estar frente a frente com um cliente que não tinha a mínima idéia do que são os padrões web e qual a necessidade de adotá-los. Além disso, muitos alunos iniciantes, após serem submetidos a artigos, apostilas e revistas abordando o tema de forma crua e pouco responsável, vieram até mim com muitas perguntas sobre o tema, além de uma série de visões distorcidas e pouco objetivas.

Por isso, acabei escrevendo este artigo, que indico para dar uma iniciação ao tema. Quando apresento este artigo para os meus clientes (leigos, na sua maioria), consigo “conversar” mais objetivamente sobre o tema, além de poder propor soluções mais adequadas para cada projeto. Espero que seja útil para vocês.

Padrões Web: back to basics ou o que nunca deve ser esquecido.

Confira, neste artigo:

1) O que é web?
2) O que é XHTML?
3) O que é CSS?
4) O que são web standards (padrões web)?
5) Como aplicar estes padrões em minhas páginas?

1) O que é web?

A web funciona dentro da internet como um sistema que interliga diversos arquivos por meio de hipermídia e hiperlinks. Na web, existem os servidores (que armazenam os arquivos dos sites que utilizamos), o cliente (você, que acessa a web) e um navegador (também conhecido como browser), cuja função é interpretar os códigos das páginas e processa-los, possibilitando a exibição na tela. As páginas web são escritas numa linguagem de marcação (utilizando marcas, também conhecidas como tags) chamada html. Os browsers processam o código html e servem páginas para os usuários.

2) O que é xhtml?

Xhtml é uma linguagem de marcação, baseada em xml. Em sua versão 1.1 e 1.0, é considerada um evolução ao html4.0.1, tornando as regras mais claras. A separação de conteúdo e formatação visual é um dos pilares principais da linguagem, que também oferece ferramentas e recursos de acessibilidade diversos, bem como a real possibilidade de trabalhar com um modelo único de publicação. Traduzindo, isso quer dizer que você, desenvolvedor/estudante, criará a página somente uma vez, e poderá publicá-la em qualquer tipo de mídia.

3) O que é CSS?

CSS é uma linguagem que permite a formatação visual de uma página html utilizando o sistema de folhas de estilo.

Para entender o conceito do css, imagine o seguinte: você tem um documento extenso, escrito no seu editor de textos preferido. Porém, trata-se de um trabalho escolar, o chato do professor impôs uma série de regras de formatação para títulos, subtítulos, textos, fotos, legendas, etc… Você, neste caso, tem duas opções: ou formata manualmente cada linha de seu texto, ou cria uma folha de estilos, acessíveis facilmente. Então basta selecionar os blocos de texto e aplicar o estilo correspondente. Simples, não? Pois é exatamente assim que o css funciona. Só que, ao invés de formatar textos, ele formata páginas html.

Todos os navegadores dão um suporte razoável ao css (porém, cuidado com o Internet Explorer!). Esta poderosa linguagem oferece um real controle sobre os aspectos visuais e posicionamento dos elementos das páginas, como jamais existiu na web.

4) O que são web standards (padrões web)?

A web possui um órgão gestor em nível global, chamado W3C. Este consórcio mundial da web é presidido por Tim Berners-Lee, o criador do html, desenvolvedor do primeiro servidor web, do http e, portanto, pai da web. Um dos principais motivos da grande popularização da web no mundo, foi justamente o empirismo desse cidadão, que não quis cobrar royalties de sua criação. Ou seja, o html é totalmente livre de licenças.

O W3C cria os padrões que devem ser seguidos e adotados por toda a comunidade web. Estes padrões visam sempre a melhoria contínua da web, facilidade de acesso, democratização da informação e trabalho mais eficiente por conta dos desenvolvedores de web espalhados por todo o mundo.

Atualmente, os padrões web dizem respeito, especialmente, à separação clara e objetiva de conteúdo (html) e formatação visual (css). Também, a questão da acessibilidade e do acesso às páginas de qualquer dispositivo ou browser é uma grande bandeira levantada pelo W3C e por um grande número de desenvolvedores conscientes pelo mundo.

Ao eliminar a necessidade de utilização das tabelas para layouts, que agora podem ser criados por tags de divisão (div), o W3C deu margem à criação do “marketeiro” termo “tableless”, tratado como verdade absoluta por muitos, mas que não passa da aplicação dos padrões web de maneira consciente e limpa.

5) Como aplicar estes padrões em minhas páginas?

Na verdade, é tudo muito simples:

a) Desenvolva seu layout em alguma ferramenta visual de design (photoshop, por exemplo);
b) Após a aprovação do layout (e conclusão de várias etapas de planejamento), parta para a confecção (desenvolvimento) do html básico, puro, sem formatação visual nenhuma. Siga as normas de desenvolvimento, escreva um código lógico, limpo e semântico, com marcações de acessibilidade.
c) Parta para a criação dos arquivos CSS. Trabalhe com arquivos gerais e externos, utilizando-os para a formatação global de seu site.

Distribua

Acessibilidade: urgente e necessária!

imagem representando acessibilidade
Alguns assuntos são tratados com maestria por um sem-número de profissionais, é sempre admirável observar isso. Porém, assuntos como acessibilidade devem ser exaustivamente relatados, observados, repassados de todas as maneiras possíveis.

Nas minhas andanças pela web, descobri um avaliador de acessibilidade (ASES) disponibilizado pelo governo federal eletrônico em conjunto com a Sociedade Acessibilidade Brasil, nos blogs de Cristian Tretin (web para todos) e, posteriormente, no blog de Marcelo Torres.

O ASES é uma ferramenta open source (código aberto, ou seja, permite a melhoria contínua por qualquer desenvolvedor que queira ajudar), seguindo uma tendência inaugurada pelos softwares e distribuições LINUX.

Neste blog, publico sempre conteúdo inédito, normalmente evito assuntos já abordados por outros blogs. Neste caso, porém, a idéia é justamente contrária: acessibilidade e orientações de como testar ou criar conteúdo acessível devem ser divulgadas por todos os blogs relacionados com o tema, expandindo e fazendo a informação chegar para todos os desenvolvedores, estudantes e profissionais envolvidos com web, de alguma forma.

O ASES é uma ferramenta excelente, permitindo o test-drive de seus sites e blogs no ítem acessibilidade. Munido das informações sobre os pontos fracos de sua aplicação web, fica muito mais fácil a melhoria da mesma, corrigindo erros e solucionando problemas.
Várias mudanças serão efetuadas, progressivamente, neste blog, devido aos resultados obtidos pelo ASES.

Confira seus principais recursos, de acordo com o site oficial:

  • Avaliador de acessibilidade (e-MAG e WCAG);
  • Avaliador de CSS;
  • Avaliador de HTML (4.01 e XHTML);
  • Simuladores de leitor de tela (tempo) e Baixa visão (daltonismo, miopia, catarata);
  • Ferramenta para selecionar o DocType, conteúdo alternativo, associador de rótulos, links redundantes, corretor de eventos e preenchimento de formulários

Definições básicas dos termos citados:
a) e-MAG: modelo de acessibilidade do governo eletrônico, atendendo as exigências do decreto 5.296, sobre acessibilidade.

b) CSS, HTML, XHTML: saiba mais neste artigo, aqui do blog.

c) Leitor de tela: software especialmente desenvolvido para leitura do conteúdo dos textos de um computador, inclusive website. Ao se escrever um código de acordo com os padrões e normas de acessibilidade, o leitor cumpre sua missão de maneira muito mais eficaz.

E por falar em leitor de tela, sugiro o download deste aqui:
http://www.nvda-project.org/download.html

Trata-se de uma excelente ferramenta freeware que lê o conteúdo do monitor, utilizando a tecnologia de voz sintetizada. Instale e experimente como suas aplicações web são interpretadas por ele, não deixe de melhorar, sempre!

Aguardem mais artigos sobre este tema importantíssimo!

Grande Abraço!

Distribua

O Design afeta o Código ou o Código afeta o Design?

E por que não os dois? Sim isso mesmo. E sei que você já se perguntou ou já até mesmo afirmou isso. Seja designer ou seja programador client side, todos já falaram isso. E é verdade, claro.

Mas por que Dulcetti?

Antes de mais nada, deixa eu me apresentar aqui, pois já comecei falando e você nem sabe quem sou eu. Meu nome é Bruno Dulcetti, Programador Client Side da Globo.com e Sênior do Portal Videolog.tv. Tenho um blog que leva meu próprio nome, Bruno Dulcetti. sim, não quis inventar nomes, pode falar que eu não tenho criatividade, eu não ligo. Só quis divulgar mais meu nome mesmo. E consegui.

E não vou ficar me extendendo por aqui, deixo isso para uma próxima oportunidade.

Beleza Brunão. Então continua seu pensamento…

Vamos pegar as duas situações, as duas profissões: Designer e Programador e comparar isso tudo.

O Designer. Layouts mirabolantes e afins.

Você, designer, que mexe bem pra caramba no Photoshop ou Fireworks da vida, tem várias idéias mirabolantes, já pensa em algo ultra-mega-meteórica-fuderosa-bombástica para o layout solicitado pelo cliente. Mas na verdade ele não quis nada tão mirabolante, afinal eles querem sempre algo simples e sucinto não é verdade?

Mas você que mostrar trabalho e tem capacidade pra isso, então pensa em algo bem bizarro para um programador implementar no HTML e CSS. Não liga muito para Acessibilidade e Usabilidade e muito menos para os kbytes que aquele layout vai ter. Vai na base do “se fode ae”.

Até que chega no programador…

O programador olha aquele layout e pensa: “Designer fdp! Só quer me f**er”. Mas relaxem. Eles não querem isso na verdade. Mas isso fica para um discussão paralela que não vem ao caso neste momento.

O programador verifica a possibilidade de poder concluir o trabalho, como pode fazer aquilo, isso, aquiloutro, etc. Chega sempre na mesma conclusão: “É né… Gambiarras”. Sim. Elas, as malditas gambiarras, que os designers conhecem, mas não entendem muitas vezes (quando não possuem conhecimento de programação), por isso, acabam não ligando muito.

Tá Bruno… Mas e aí?

E aí que o programador vai ter que se virar e modificar seu código de uma forma que consiga agilizar aquele layout. E dependendo do layout, o código pode ser alterado (gambiarrizado) em até 30% ou 40%. E chegamos numa conclusão: “É verdade! O Layout, design de um site, modifica a estrutura de um código para podermos deixá-lo da forma que o designer enviou.”.

Agora vamos para outro caso.

O programador. Códigos semânticos e bem organizados (nem sempre)

Agora temos a situação meio que inversa. Vou pegar o exemplo anterior para ficar mais rápido.

Depois de chegar aquele layout mirabolante e rolado os xingamentos do programador, ele cria um documento com algumas modificações e melhorias no layout (melhorias pra ele, mas pro designer seria algo como arrancar um dedo da mão dele), para um bom resultado nos indexadores, um bom resultado no tamanho final do site, carregamento, entre outras melhorias, tanto na usabilidade, quanto de acessibilidade.

O designer recebe aquilo e modifica tudo o que o programador pediu (seria algo como deixar os cantos retos ao invés de arredondados, imagem de fundo menos pesadas e com menos gradientes, entre outros) e retorna o layout para o programador.

O programador analisa e aceita a segunda opção, concluindo que ficou melhor e mais adequado para o ambiente web proposto pelo cliente ou pelo seu chefe.

Hmmm… Entendi Dulcetti… Aí o layout foi modificado…

Exatamente. Chegamos no segundo ponto, onde o design do site teve que ser modificado devido as alterações solicitadas pelo programador, para melhorar o desempenho do site.

Tá Bruno, entendi. Mas quando que acontece um e quando acontece o outro?

É um belíssima pergunta. Isso varia de empresa pra empresa, de projeto pra projeto, entre outros fatores importantes. Por exemplo, se você está numa Agência de Publicidade e ela possui um cliente gigante, que precisa de um projeto magnífico em relação a design, pode ter certeza, o programador vai sofrer ou vai pedir pelo amor de Deus que aquele site seja feito em Flash.

Então o Flash é mais tranquilo?

Depende do ponto de vista. Da parte estrutural sim, mas parte server nem um pouco. Mas isso a gente deixa pra outro artigo.

Onde eu estava mesmo? Ah sim…

Voltando ao “quando acontece”. Agora, se você trabalha numa empresa onde o conteúdo, semântica, código bem feito, SEO bem trabalhado, pode ter certeza que os designers ficarão de cara feia e xingando todas as gerações dos seus superiores.

É Dulcetti… Difícil isso hein.

A realidade é que sabemos que os designers não manjam o suficiente sobre SEO, usabilidade e qualidade de código, pois não é (será?) obrigação deles e os programadores não manjam e não dão tanto valor ao design, a qualidade de um layout bem feito e planejado.

Mas sabemos também que podemos chegar num ponto, num meio termo, sim. Podemos ter layouts muito bonitos feitos com um código digno de um programador, o CSS Zen Garden comprova isso, basta um esforço das duas partes:

Programador:

Para de reclamar um pouco de um layout um pouco diferente do habitual e se esforçar para conseguir um bom resultado. Tem como, eu garanto.

Designer

Não ser tão xiita e abrir mão, às vezes quando necessário, de alguns detalhes que possam prejudicar demais o código de um site/portal. E se possível, usar mais textos nos títulos do que imagens, principalmente quando as fontes forem parecidas com fontes padrões. Essa pra mim é uma das principais reclamações dos programadores, fora os gradientes. 😀

Finalizando…

Bom, vou ficando por aqui e espero que tenham gostado dessa minha primeira contribuição para o Design. Aquele abraço.

Distribua