Tableless - Padrões Web com Pastel e Caldo de Cana

Posts da TAG ‘Na Prática’

Se virando para testar - Parte 3: IES4OSX e IES4Linux

IES4Linux já existe a algum tempo. O IES4Linux usa o Wine, um programa parecido com o CrossOver. O diferencial é que você consegue usar uma aplicação do Windows sem ter que rodar toda aquela interface do desktop virtual.
No IES4Linux, foi desenvolvido pelo Sérgio Luís Lopes Júnior. Ele usa o Wine para instalar versões do Internet Explorer o Linux. Nós usamos esta versão aqui na Visie e funciona muito bem.

Uma versão foi lançada pelo Mike para MacOSX.
Instalei o IES4OSX e a instalação foi muito fácil, como no IES4Linux. Copiei a versão mais nova do Darwine para a pasta Applications. Depois baixei o pacote do IES4OSX, cliquei duas vezes, esperei instalar e pronto.

Por ser um tipo de emulação é normal ficar um pouco lerdo, entretanto, é rápido suficiente para testar as páginas dos sites.

Existem mais dois artigos antes deste que mostram outros meios para testar seus sites fora do Windows:

5 Comentários

Tabela de compatibilidade de CSS

Acabei de fazer uma Tabela de Compatibilidade de CSS..
Quem achar algum erro, por favor, me dá um alô.

Essa tabela será atualizada com outros elementos do CSS. Ainda tenho alguns elementos pré-definidos que faltam ser colocados. Assim que der mais um tempinho, vou colocar os links dos exemplos e atualizar a tabela com novas coisas.

Sei que a navegação vai ficar um pouco pesada. Preciso colocar links de âncora para poder facilitar a navegação entre as tabelas. Mas, por enquanto, isso deve quebrar o galho de quem está com dúvidas

[update] Seguindo a dica do Rubens, fiz uma versão para impressão da tabela. Agora ficou fácil imprimir sem gastar tanta tinta.

26 Comentários

Isso é coisa básica

Não é a primeira vez que me perguntam se eu acoselho o uso de includes. Não sei o motivo, mas grande parte do pessoal não usa includes. Parece que isso é uma daquelas coisas de uso exclusivo de programadores. Engano deles.

Includes (por exemplo) é uma das coisas que ajudam e muito o trabalho da equipe inteira. Menus, cabecalhos, rodapés, e qualquer coisa que você ache que vá se repetir em mais de uma página no site deve ser colocado em includes. Já vi muita gente, em pleno século 21, repetir o código do menu em todas as páginas. E sim, quando algo muda no menu, ele muda na página inteira. Muito triste.

Faz parte do trabalho parar um tempo por dia para pesquisar novas metodologias, novos meios para agilizar seu trabalho diário. Costumo fazer isso no final do expediente. Normalmente sempre encontro maneiras que resolvem meus problemas mais urgentes.

PS.: Já já novidades aqui no Tableless.

40 Comentários

Implementação HTML

Estava implementando partes do site novo da Visie e resolvi fazer um videozinho rápido da implementação da parte de treinamentos. Fiz sem narração desta vez. Fiz outro vídeo mostrando a implementação CSS. Ainda não consegui colocar no ar, mas logo mais publico por aqui. E já peço desculpas pelo tamanho da letra!

O vídeo está hospedado no CodeShow Videos. Quem não viu ainda, vale a pena dar uma olhada. Imagine uma espécie de YouTube só que destinado a desenvolvedores e com vídeos sobre desenvolvimento web. Isso é o CodeShow Videos.

21 Comentários

Ferramenta definitiva para a criação de websites?

Recebi de um leitor, um email que ele havia recebido de uma escola de tecnologia. O newsletter da escola, dizia assim:

Com o Dreamweaver 8 você poderá criar layouts, interfaces e sites completos, utilizando as mais conhecidas linguagens para a internet, tais como: XHTML, Javascript e DHTML, sem precisar digitar uma linha de código sequer. Isso mesmo, sem código, bastando entender como funciona a interface e as ferramentas de apoio do software, você criará tudo de forma visual.

Não perca mais tempo com códigos e programas confusos, aprenda a usar uma ferramenta que possibilita a visualização simultânea do que você está fazendo!

Desenvolvedor web que não sabe código, é desenvolvedor?
Repito: o Dreamweaver não é ruim, contanto que você digite código e não use aquela solução nojenta de preview. O seu usuário vai enxergar o site pelo browser. Logo, visualize pelo browser o resultado do seu código.

O Dreamweaver se torna um vilão a partir da hora que o desenvolvedor perde o contato com o código. Aí o desenvolvedor deixa de ser um profissional e se torna uma pessoa qualquer, que conhece um programinha qualquer.

Falarei sobre código na palestra do AlternativaWeb 2007, lá em Fortaleza. Compareça!

40 Comentários

CSS Reset

Sempre que começo a escrever meu CSS, eu inicio colocando um * (asterísco) e zero algumas propriedades. Esse técnica se chama CSS Reset.

Alguns elementos do HTML já tem um valor de margin, padding, borda e outros tipos de formatação definidos como padrão. O que acontece é que esses valores pré-definidos são necessários para que quando o site seja visto sem CSS algum, o usuário conseguirá ter um mínimo de legibilidade na visita.
Quando você vai implementar o CSS, esses valores atrapalham um bocado. Por isso, usamos essa técnica para zerar todas esses valores pré-definidos e inserir os valores que realmente usaremos para reproduzir o layout.

O asterísco é um seletor de CSS. Muito útil por sinal. A função dele é simples: selecionar todos os elementos.
div#geral #texto * { color:red; }
Neste caso, o asterísco irá “selecionar” todos os elementos que estão dentro do objeto #texto que está dentro do div #geral. Não importa quais elementos eles sejam, o * captura todos.
Infelizmente, não funciona no IE6.

Eu reseto meu CSS desta maneira:
* { margin:0; padding:0; list-style:none; vertical-align:baseline; }
Não se preocupe, usar o asterísco sozinho no seletor funciona em todos os browsers.

Se você tiver a necessidade de zerar mais propriedades, fique à vontade. O Eric Meyer já é mais violento e faz um reset geral em seu CSS, note que ele não usou asterísco.
Não acho necessário tanta coisa. Mas isso vai da maneira de trabalho de cada um. O código que mostrei aqui é simples resolve meus problemas e é isso que importa. Você vai adaptá-lo com sua maneira de desenvolvimento.

26 Comentários

MotoQ

Eu tinha um Nokia 6111. Um ótimo aparelho: pequeno, simples e funcionava muito bem até eu deixar cair pela quinta vez. Ele nunca mais foi o mesmo. A proteção do LCD descolou, ele perdia o sinal fácil, o som nunca mais foi o mesmo. Tive que comprar outro.
Como tenho conexão GPRS, decidi comprar um SmartPhone. Tanto pela facilidade que ele me daria para responder e criar emails, escrever posts, carregar arquivos e tudo mais, quanto pela possibilidade de poder testar os sites em um aparelhinho destes.
Depois de procurar um bocado, optei por comprar o MotoQ. Ótimo aparelho!

Funciona com Windows Mobile 6, tem Internet Explorer (depois vou mandar um review), mas claro, já instalei Opera.
Como sou usuário de Mac, tive que baixar um programa para poder sincronizar melhor com o aparelho. Mesmo assim, sem problema nenhum.

O que mais me impressionou foi como a “HOME” do aparelho é formatada. Você tem alguns temas já prontos. Como sempre, nenhum destes temas me agradou. Peguei o mais bonitinho e fui fuçar para ver como funcionava. Me impressionei quando descobri que era apenas um arquivo XML com um pouco de CSS que comandava toda a formatação.
Entendi a lógica do código, modifiquei algumas linhas e pronto! Estava do jeito que eu queria. Impressionante a facilidade.
Se você já fuçou em algum tema de Firefox, já deve saber mais ou menos como isso funciona. É muito fácil. E o interessante é que você consegue fazer algumas modificações com conhecimentos mínimos de CSS.

[update] Infelizmente o MotoQ não possui conexão WiFi. Pensando friamente, cheguei na conclusão de que WiFi, agora, não é tão importante assim pra mim. Não sei onde eu usaria WiFi tirando minha casa, Visie e aeroporto. Vou usar bastante o aparelho no carro, em filas ou em outros lugares que provavelmente não tem hotspot. Logo, meu GPRS já é o bastante. E claro, o fato de ele servir como modem é matadora. Já que em alguns lugares que não existem conexões, posso usá-lo para conectar o Note via GPRS.

[update 2] Em outros celulares, para usar MSN eu usava o Mig33. Funcionava muito bem e acho que não precisa de nada além do programa para poder usar o MSN.

12 Comentários

Faculdades, cursos e conhecimento

Conversando com um pessoal outro dia, fiquei pensando em faculdades, cursos ou especializações que pessoas da nossa área podem fazer (ou não) para melhorar sua profissão.
Gosto de brincar quando alguém diz que está na faculdade ou que vai começar a cursar alguma. Eu sempre digo: - Faculdade? Blah! Para quê? Perda de tempo.
É uma brincadeira (com fundinho de verdade?), claro. Mas o assunto é: o que vai decidir qual faculdade tenho que cursar, levando em consideração minha área de atuação como desenvolvedor web?

Uma boa parte da minha vida trabalhei fazendo HTML/CSS + Design. Efetivamente nunca precisei de algum curso ou faculdade para poder exercer meu trabalho. Em contrapartida conheço outros profissionais que trabalham com a mesma coisa, mas cursam faculdade de publicidade ou design, por exemplo.

Qual curso fazer para melhorar meu/seu estado de profissional web?

Tendo uma breve conversa com o Fred (no ELPI aqui em São Paulo), ele falou uma coisa bem curiosa: se o Google decide contratar um desenvolvedor web para a equipe do Orkut, por exemplo, um desenvolvedor que cursa algo relacionado à Ciência Sociais seria um destaque.
E ele tem razão. Um profissional que consiga consiliar suas especialidades técnicas de desenvolvimento web com seu conhecimento em Ciências Sociais, seria muito valioso para o trabalho com comunidades, comportamento de massas e tudo que uma rede social como o Orkut representa… Ele teria uma mente aberta para novas idéias e saberia quais caminhos tomar para implementá-las.
Outro exemplo básico: qual curso o desenvolvedor que trabalha diretamente com AI (Arquitetura de Informação) poderia fazer? Biblioteconomia seria interessantíssimo. Diretamente o curso não tem nada a ver com tecnologia e nem precisa ter. O cara adaptaria o conhecimento que ele aprenderia em Blibioteconomia para a área de web.

Se você trabalha com implementação client-side. HTML+CSS, especificamente. Aconselho encontrar um curso mais direto, como os da Visie (jabá), que são cursos curtos e vão te dar resultados rápidos. Não adianta procurar um curso de faculdade. Você não vai achar nada que te ajude a implementar HTML/CSS mais rapidamente ou melhor.
Agora, se você trabalha com HTML+CSS mas também faz Design, ou seja, cria layouts e etc, além dos cursos como os da Visie, que te ajudarão na parte técnica, uma faculdade de Design e Artes, te ajudariam no outro lado do seu trabalho. Um lado que precisa de mais apoio, mais estudo.

Desenvolver para web é um ramo muito amplo. Existem várias ramificações e cada uma dessas ramificações sugam conhecimentos e características de outras profissões. O jeito é adaptar essas informações, adquirir conhecimento e se transformar em um profissional diferente.

E eu continuo com meu segundo grau completo.

72 Comentários

Desenvolvedor Retrógrado

Neste post que o Ronaldo publicou, me (assustou) chamou muito a atenção o comentário que um dos leitores fez.

Tableless é mais dificil de implementar

Não sei o que ele quis dizer com isso, mas em todos os clientes que eu prestei consultoria, presenciei de perto resultados contrários a esta afirmação. Lembro-me de quando atendemos o Terra. No final do curso, eles já tinham a home do site feita em Tableless e já pronta para publicar.

Muitas vezes a demora da implementação de HTML+CSS em sites se deve a curva de aprendizagem dos desenvolvedores. Isso é normalíssimo. Você implementa sites durante anos. De repente chega um bando de pessoas dizendo que a maneira que você usa é errada, lerda e totalmente ultrapassada. Logo você se dispõe a aprender a nova maneira que andam falando. Lê, se interessa e aprende. Na hora da prática você terá dúvidas e procuraráa prender novas soluções para velhos problemas, que você resolveria em dois segundos do modo que estava acostumado. Você precisa se familiarizar com a nova maneira. Isso leva tempo e depende de muito esforço. Como disse, isso é normal e acontece todo tempo que o reaprendizado é necessário.

Novos desenvolvedores que aprendem a construir sites com padrões web, sem passar pelo método antigo, se tornam mais proficientes. O motivo é óbvio: eles não precisam mudar nenhum tipo de conceito enraizado por causa de anos de costume. Já nós que passamos por esta transição, precisamos mudar toda nossa forma de pensar. É custoso.

Equipes que se dispõe a estudar e praticar novas metodologias de trabalho têm tido ótimos resultados, não apenas em aspectos de velocidade de implementação, mas também em novas metodologias de trabalho que antes eram impossíveis com a maneira antiga.

Quando dizemos que a guerra entre Designers e Programadores acaba e todos vivem felizes para sempre, não estamos brincando. Isso se tornou realidade em equipes de todos os tamanhos.

Leva mais tempo pra testar

Não me lembro exatamente o tempo que eu levava testando projetos feitos com tabelas. Mesmo não tendo esse parâmetro, sites feitos com Padrões Web são fáceis de testar e e alguns fatores dependem de seu público alvo e as medias em que seu site será exibido.

Já cansei de dizer que antigamente eu testava todos sites em pelo menos 6 browsers: Internet Explorer 5.5 e 6. Opera (neste tempo o Opera lançava uma versão por semana, era incrível. Por isso era comum testar em 2 ou 3 versões do Opera). Firefox (que no tempo chamava-se Phoenix e posteriormente Firebird).

Atualmente essa lista diminuiu para 2 (ou 3) browsers: Internet Explorer 6 e Firefox. E agora (só agora) estou colocando o IE7 na lista.

Browsers como Firefox e Opera tem a renderização muito próxima. Por isso posso descartar um deles, no caso o Opera. O Firefox é o segundo browser mais usado e por isso merece mais atenção.
Ainda é necessário testar no Internet Explorer 6, porque ele é o brower mais utilizado (ainda até mais que o IE7), portanto…

Se você quiser que seu site seja bem acessado por Smartphones e cia, você precisa testar em aparelhos de verdade, assim você sabe se a experiência do usuário está sendo satisfatória e percebe mais fácil melhorias que podem ser feitas.

Hoje, se você quer ter um site de sucesso, uma bateria enorme de testes deve ser feita. Não importa em quantas medias você vai publicar. Sem trabalho não há recompensa.

Mais dificil para outros darem suporte

Como o Ronaldo disse no post dele:

Atualmente, a consciência em torno de padrões Web e especialmente da prática conhecida como tableless é tão grande que mesmo clientes corporativos mais alheios a essas questões estão começando a pedir que seus sites e sistemas sejam feitos desta forma.

Se os clientes que são os que menos sabem sobre detalhes técnicos, estão exigindo que seus sites sejam feitos com Padrões, o desenvolvedor tem obrigação de saber construir, implementar e conhecer os Padrões Web.
Sabendo que os Padrões Web estão tão difundidos e ganhando grandes massas, como podemos dizer que um código separando informação (HTML) da formatação (CSS) é mais dificil de dar manutenção?

Uma das principais características de se construir sites utilizando os Padrões Web é ter o código mais enxuto possível. Fazendo isso, você tem conseqüentemente um código mais simples.

Como dou cursos sobre Padrões Web, tenho muito contato com códigos desenvolvidos por várias pessoas. Até os piores códigos que vejo são simplérridos comparados com os horrendos códigos feitos em sites usando Tabelas.

Uma das premissas dos Padrões é: quanto mais simples melhor. Se está achando que está complicado, é porque provavelmente algo (ou tudo) está errado.
Sempre digo aos alunos tentarem resolver os problemas com o uso mínimo de elementos. Tente usar um elemento para resolver os problemas no layout. Só depois de esgotar todas as possibilidades, pense em adicionar um segundo elemento.

Usando Padrões, todos os desenvolvedores sabem por exemplo que o H1 é um título de primeira instância. Tanto o profissional daqui de São Paulo quanto o profissional lá da ponta do Brasil no Rio Grande do Sul sabe o que isso significa. É pra isso que existe os Padrões: ter controle.
Logo, o suporte se torna fácil, quase fluente. O que precisará ser entendido nos códigos de terceiros são as nomenclaturas dadas para os elementos, porque as tags/elementos já são conhecidos por todos.

Inclua entre 20 a 40% sobre o orçamento inicial

Isso poderia ser feito a uns anos atrás. Hoje em dia, desenvolver com Padrões Web está começando a deixar de ser diferencial, logo, essa “taxa” vai se tornar abusiva.
É a mesma coisa quando um desenvolvedor pede mais no salário por saber ler inglês. Isso é essencial hoje em dia para quem trabalha com tecnologia.

Você vai cobrar mais caro do cliente, por causa da gama de possibilidades que poderão ser implementadas no site posteriormente e que serão interessantes para oferecer ao cliente. Aí sim você tem um diferencial.

Um serviço seria ter um site onde ele poderá gerenciar todo conteúdo por um CMS e que poderá mudar o layout a hora que quiser. Isso justificará esses 20% ou 40% a mais.
Pro desenvolvedor, esse trabalho é fácil de resolver implementando o WordPress como CMS e criando layouts se baseando pelo código HTML criado pelo WP.

Infelizmente ainda temos desenvolvedores que pensam para trás.
Para esses, temos que desejar boa sorte para mudar de pensamento e estudar melhor as possibilidades.

Ficar acomodado é muito bom, mas só para você (as vezes nem pra você).

32 Comentários

[offtopic] Nada como mudar um pouco

Quarta feira… Dia de sol… Resolvemos pintar uma das paredes aqui da Visie. Tomara que fique bom!

PS.: Promoção pintando o 7.

7 Comentários

Voltar para o topo

Outros posts

Aprenda