Pular para conteúdo 
Зеленый кофе

O autor

Carlos Eduardo de Souza, Front-End Developer & Interface Designer na Coopers Digital Production, dedica seu tempo para o desenvolvimento de uma Web mais acessível. Possui certificado W3C em Mobile (sites e web apps) e HTML5.

Portfolio e blog sobre Web Standards – project.47, de Carlos Eduardo de Souza

Blog

Topo 02/08/06

Melhorando seu rendimento como profissional

Baseado neste artigo do netmag.co.uk, estarei colocando algumas dicas que podem lhe ser úteis ao desenvolver seu novo Web Site.
Se vocę desejar diferenciar-se da maioria, com certeza este artigo lhe será muito útil.

O que diferencia um bom de um ótimo profissional, é a agilidade no desenvolvimento do trabalho, sem o comprometimento da qualidade. Assim, o profissional diferenciado conhece os atalhos e maneiras práticas de passar pelos obstáculos impostos em sua profissão no dia-a-dia, aumentando sua produtividade e, conseqüentemente, a rentabilidade dos serviços prestados.

Primeiramente deve se ter em mente um plano de trabalho. Realizar um briefing bem feito é imprescindível pois, sabendo exatamente o perfil do cliente e o que se deseja com este trabalho, o plano pode ser traçado com as metas e prazos necessários para sua conclusão.

Na elaboração deste plano, inclui-se o esboço do projeto, no caso de um Site, o layout, mesmo que seja em uma folha de papel simples. Pode parecer rústico, mas isso acaba agilizando o processo de criação do mesmo.

Após a elaboração dos objetivos, prazos de entrega e esboços, vem a parte de construção e elaboração do trabalho. Seja por Photoshop, Illustrator, Corel Draw, etc., o diferencial está no momento em que o site em si está sendo construído, ou seja, o layout está saindo do “papel” e seguindo para o HTML propriamente dito. A melhor forma de fazę-lo é arregaçando as mangas e digitando “na mão”.

Se vocę não lida com código pois está acostumado com os programas WYSIWYG (Dreamweaver, GoLive, Front Page, etc.), nunca é tarde para começar e aprender a escrever o código de seu próprio site, pois a melhor maneira de fazę-lo é justamente na prática. Desta forma, vocę pode seguir ŕ risca seu planejamento e deixar o código mais limpo e simples.

Com os conhecimentos adquiridos, outro passo importante a seguir é a flexibilidade de seu site, quanto ŕ diversidade de navegadores existentes, e suas versőes. Como diz no artigo que estou me baseando, há maneiras de “selecionar” os CSS que serão interpretados pelos browsers mais atuais e os que serão interpretados pelo Netscape 4.x, por exemplo. Assim, vocę pode utilizar propriedades CSS que são habilitadas ŕ navegadores mais antigos num CSS mais simples, enquanto definiçőes mais atuais, do CSS 2 por exemplo, serão interpretadas pelos navegadores mais recentes. Essa “seleção” de navegadores ocorre no momento de importar seus CSS pelo site. O modo no qual vocę usa a tag link, faz com que o CSS seja interpretado por todos, já a maneira em que vocę usa @import é interpretada pelos browsers mais recentes. Segue um exemplo abaixo:

link rel=stylesheet type=text/css media=screen / (interpretado por todos)
style type=text/css media=screen@import url(simple.css);/style (interpretado pelos mais recentes)

Durante este passo, na construção de um código limpo e semanticamente correto, deve-se deixá-lo o mais organizado possível, de forma a facilitar sua atualização. Uma boa dica é utilizar comentários, indicando início e fim de cada estrutura de seu site, por exemplo:

!-- comentário -- (comentário em HTML)
/* comentário -- */ (comentário em CSS)

Outro ponto importante refere-se ŕs medidas utilizadas em suas fontes. Devido ŕ diversidade de monitores e resoluçőes, a usabilidade pode acabar sendo comprometida (em muitos casos, Sites que utilizam fontes em px, em determinados navegadores como Internet Explorer, não podem ter suas fontes aumentadas nem diminuídas pelo usuário). Por isso, uma maneira segura de estilizar suas fontes é especificando sua medida em em, ao invés de pixels, comumente utilizada na maioria dos Sites que observo. A conversão é simples: por padrão, 1em equivale ŕ 16px. Este tipo de medida é definida como relativa, pois refere-se ŕ um elemento “pai”. Desta forma, vocę mesmo pode definir quanto vale 1em.

Se vocę quiser que 1em tenha um valor diferente de 16px, é só atribuir uma porcentagem correspondente ao tamanho que deseja aplicar ao seu Site. Se a necessidade for utilizar fontes de 10px, é só calcular a porcentagem de 16px que isso corresponde, aplicando em seu CSS a regra:

body { font-size: 62.5%; }

Assim, a fonte de seu site terá 62.5% do valor padrão, ou seja, 1em em seu site corresponderá a 62.5% de 16px, equivalendo a 10px.

Após tomar todos estes cuidados, é muito importante que seu site seja testado na maioria de navegadores possíveis. Se vocę tiver acesso ao Firefox, Internet Explorer e Opera já é de grande ajuda. Caso vocę desejar visualizar seu Site em outros navegadores, basta visitar o Browsershots e digitar seu endereço no campo correspondente. Depois de algum tempo, vocę pode ver screenshots mostrando o resultado final.

Claro, estas são apenas algumas dicas de como realizar um trabalho de uma maneira mais prática e eficaz. Mas sempre há o que aperfeiçoar e aprender com outros profissionais.

Portanto, é muito importante participar de grupos de discussão e visitar Sites sobre o assunto, de forma a aprender mais e passar seus conhecimentos a outros profissionais da área.

Trackback Feed deste artigo

17 comentários para "Melhorando seu rendimento como profissional"

  1. Maujor | 2/08/06 - 10:12 pm

    Ola Carlos,
    Parabéns pela matéria.
    Muito bem escrita e de grande utilidade.

    Topo
  2. Carlos Eduardo de Souza | 2/08/06 - 11:09 pm

    É um grande incentivo receber um comentário seu, Maujor.
    Essa troca de experięncias é muito importante, visitando sites como o seu, nos ajudam a crescer cada vez mais!

    Topo
  3. Rogério Brum | 2/08/06 - 11:43 pm

    Tenho medo de usar “em”… Parece que vai quebrar tudo mais cedo ou mais tarde (e a coisa mais feia do mundo é ver um layout quebrado em css fluido). Ugh!

    Topo
  4. Carlos Eduardo de Souza | 2/08/06 - 11:57 pm

    Durante um tempo, também tive receio de utilizar.
    Mas se vocę analisar bem, vale a pena.
    Um grande diferencial, na utilização de em se dá nos dispositivos móveis, pois utiliza o tamanho que vocę realmente quer… Em pixels, ocupa um bom tamanho da ela, prejudicando o usuário =/

    Topo
  5. Rogério Brum | 2/08/06 - 11:59 pm

    Ah, a proposito. Eu dei uma olhada no seu css e dei uma amenizada no problema do menu no ie. Me passa seu e-mail que eu mando.

    Topo
  6. Carlos Eduardo de Souza | 3/08/06 - 12:19 am

    Meu e-mail é: carlos@viscountbox.com
    Não sabia outra forma de te passar =)

    Topo
  7. Rogério Brum | 3/08/06 - 9:11 am

    Nos comentários que tu fez no meu blog tem o teu e-mail :-p

    Topo
  8. Joares | 3/08/06 - 10:27 am

    Muito boa matéria Carlos…

    Muito bem escrita… e ótimas dicas…

    Parabéns!

    Topo
  9. Pedro Rogério | 3/08/06 - 11:07 am

    Wireframes com certeza são essenciais no desenvolvomento de projetos web.

    Topo
  10. Pedro Lucas | 3/08/06 - 5:43 pm

    Excelente matéria! Parabéns!
    Sou iniciante e sempre me acostumei a usarpx, mas vou fazer as devidas alteraçőes, usando em agora.

    Topo
  11. Jader Rubini | 4/08/06 - 10:38 am

    Muito boa a matéria. Dicas simples, mas preciosas…
    Estarei de olho em seu blog a partir de agora… ;)
    Um abraço

    Topo
  12. Thalis Valle | 6/08/06 - 3:58 pm

    Belo artigo, Carlos.
    Mas na questão das fontes (px/em) já tive problemas quando utilizava por padrão, fontes em em. O usuário pode otar pelo tamanho, mas nem todos os usuários teem o conhecimento disso. Já percebi em maquinas de amigos que a fonte estava muito grande, e eles nao tinham o conhecimento de que tratava-se de uma opção de tamanho de fonte. Acreditavam que fosse “erro” do meu blog. nesse caso foi negativo pra mim.

    Topo
  13. Carlos Eduardo de Souza | 6/08/06 - 11:01 pm

    Com certeza… É ruim qndo dependemos, de certa forma, de uns recursos que a maioria desconhece.

    Mas acho que é mais seguro. Estou conseguindo ter sucesso com a utilização de “em” como medida de fontes… Testo em monitores diferentes e dá um bom resultado…

    Topo
  14. Michelle | 12/02/08 - 10:20 am

    gostei da matéria.. vou aproveitar os comentários sobre unidade relativa ‘em’ para os padrőes de desenvolvimento web.. muito bom. :)
    parabéns.. espero que publique mais coisas interessantes..

    Topo
  15. Porque o Web Designer precisa colaborar com o CSS · Portfolio e blog sobre Web Standards - project.47 | 27/08/08 - 10:37 am

    […] escrevi um arquivo dando algumas dicas para melhorar seu rendimento como profissonal, na área dos Web Standards, e a proposta deste artigo é parecida, mas unindo a área de Design com o […]

    Topo
  16. Lincoln | 10/10/08 - 10:09 am

    Show de artigo! Acho curioso ver na empresa a maioria dos profissionais que chegam acostumados com DreamWeaver, e de repente já estão adorando fazer o código na mão (o querido PSPad) !

    Interessante falar sobre os comentários no meio do código: é tão bom pegar um código comentado e poder se achar nele facilmente, através dos comentários!

    Topo
  17. Melhorando seu processo de trabalho · Portfolio e blog sobre Web Standards - project.47 | 10/10/08 - 3:29 pm

    […] escrevi por aqui um artigo bem interessante sobre como melhorar seu rendimento profissional, além de outro fator que influencia diretamente no assunto deste post, a colaboração que deve […]

    Topo
Comente este artigo
  1. (obrigatório)
  2. (obrigatório)

Links Randômicos
Meta
Apoio
Créditos
Creative Commons