Mascarenhas Barbosa & Advogados

Design,Tableless,Tecnologia,Trabalho,Web — Ney Ricardo @ 3:48 pm

mascarenhas

Projeto novo! Nesse, aproveitei pra colocar em prática o meu 3D.

Um problema comum pra quem compõe um layout é encontrar imagens boas (de preferência free) que possam ajudar a compor o visual do site. E nesse caso, por ser um site de advocacia, achei interessante que tivesse uma balança, símbolo da área.

Depois de algumas horas procurando, eis que me vem num estalo: “Por que bão modelar uma balança???”. “Claro! Isso eu acho q consigo fazer…”.

E aí resultado final no site do cliente: Mascarenhas Barbosa & Advogados Associados.

A quem interessar, coloquei também algumas imagens do processo de modelagem, texturização e iluminação do objeto.
(Leia mais)

CSS Inner Border

Design,Tableless,Web — Ney Ricardo @ 1:32 am

inner_border

Quem nunca perdeu alguns bons minutos tentando fazer aquele efeitinho nas imagens do Globo.com e do G1? Onde uma imagem qualquer num instante está sem borda e no outro, ao passar o mouse por cima, é emoldurada por uma borda que parece crescer de fora pra dentro.

Nunca viu? Dê uma olhada nos sites que eu citei acima.

Interessou? Continue lendo… (Leia mais)

É Transitional mas é meu…

Tableless,Tecnologia,Web — Ney Ricardo @ 6:45 am

doctype

Há algum tempo, meu caro colega Carlos deu uma lida em alguns artigos sobre padrões web e me aconselhou a começar a escrever meu HTML usando o cabeçalho DTD (DocType Definition) Strict, pois isso tornaria meu HTML mais estável e teria que fazer menos gambiarras.

Sem questionar, alterei minha configuração do Dreamweaver pra que meus documentos HTML passassem a ser criados no modo Strict.

Se melhorou?! Claro que não. Na verdade não mudou nada, mas não por causa do Doctype e sim porque eu não me preocupava com a semântica correta.

Bem, um cabeçalho Doctype nada mais é do que um arquivo que contem as definições de todos os elementos HTML e informa ao browser a maneira que os elementos devem ser renderizados. Dá uma olhada na criança: DTD/xhtml1-strict.dtd. Dá pra até arriscar dizer que você pode desenvolver seu próprio DTD, mas pra quê? O deles já tá pronto…

Mas isso não vem ao caso. A questão é que há uma certa discussão sobre qual o melhor Doctype: Transitional ou Strict?

Pelo que andei lendo é melhor que você escreva seu código usando o modo Strict pois, segundo alguns especialistas, o futuro dos browsers caminha rumo a este padrão.

Qual a diferença?! Simples. No Transitional você pode usar tags e atributos depreciados (ou deprecated em inglês) em seu HTML, tais como a tag <font>. Já no modo Strict você tem que ficar esperto com as atualizações da W3C, pois na hora que ela achar melhor ela vai e deprecia alguma tag que você adora.

Foi o que aconteceu com tags como <center>, muito útil pra você não ter criar um estilo de centralizar, e com o atributo target da tag <a> de link. Pois é, agora não se pode nem criar um link que abra em outra janela pra não sair do seu site, pra isso muitos andam usando até jQuery só pra que o link funcione do jeito que você quer.

Evolução?! Acho que nesse caso foi o contrário, pois temos que escrever mais pra conseguir coisas simples.

O DTD do meu blog é Transitional… mas não por incapacidade de escrever meu HTML no modo Strict e sim porque prefiro usar um target do que uma função inteira que vai fazer a mesma coisa.

Quanto à semântica, permanece a mesma. Valem as mesmas regras pra ambos. Com a diferença de se ter mais tags e atributos disponíveis em um dos DTD’s.

Não te acrescentou em nada? Então leia de quem entende:

Biz Mídia Inteligente

Design,Tableless,Tecnologia,Trabalho,Web — Ney Ricardo @ 10:08 am

biz

Lançamos (nós da dothCom) hoje o site da Biz Mídia Inteligente. Esse projeto é o primeiro de uma série de projetos novos que receberão um tratamento especial em SEO e semântica de HTML e CSS válidos, em outras palavras, mais capricho na hora de escreve o código.

Comecei a prestar mais atenção nesse detalhe da semântica depois que passei a me aprofundar mais ainda nas questões do crossbrowsing, que nada mais é do que a possibilidade de visualização do site nos mais variados browsers e sistemas.

Já que não tenho como testar os códigos em outros sistemas (até tenho, mas me falta saco pra isso), faço o possível pra manter um código simples e semanticamente correto (vou falar mais sobre isso no futuro).

Fruto dessa nova forma de pensar, lhes apresento o site (no ar) validado diretamente no site da W3C:

Ouso até em dizer que além de tudo ficou bonitinho (ou no mínimo honesto).

Obrigado pela atenção e um abraço pro gaitêro!

PXtoEM.com

pxtoem

Em uma de minhas conversas com meu amigo Renan, ele me perguntou se eu já usei a unidade de medida “EM” para textos em meu CSS. Respondi que ultimamente tenho usado a unidade sim.

O “EM” é uma unidade derivada da porcentagem, ou seja, se você definir um tamanho em uma determinada região do código poderá fazer com que os textos que descendem dela tenham tamanhos relativos a uma determinada percentagem do valor definido nela.

Algumas pessoas costumam dizer que é uma medida de acessibilidade, conforme o próprio Renan me informou. Mas particularmente não vejo utilidade para o usuário pois cada browser trata isso da forma que acha melhor. Mas em nível de desenvolvimento com certeza é uma mão na roda pois os textos manterão sempre a mesma proporção, consequentemente o programador só precisará mudar um valor: O valor-base, que serve como base para os cálculos de proporção.

Particularmente costumo definir apenas o font-size da tag body, assim quando tiver que alterar os tamanhos da página inteira só preciso mexer no tamanho do body.

Para me ajudar nessa missão descobri um site bastante útil: PXtoEM.com. O site é totalmente auto-explicativo e ainda traz toda a teoria sobre as medidas e como usá-las. Como se não bastasse ainda traz um CSS Text Reset baseado na base que você escolher.