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

Posts da TAG ‘cotidiano’

Vídeos, Wordpress, Internet Móvel e mais

O Tableless está passando por pequenas mudanças, pequenas mas substanciais.

Muita gente me disse que depois do último redesign, ficou muito difícil para encontrar informações aqui no Tableless. Para mim, dono do site, que sei onde encontrar tudo nessa budega, duvidei um pouco, mas depois notei que isso era verdade. Por isso, resolvi organizar melhor o conteúdo. Continuar lendo »

6 Comentários

Tableless.com.br - The Wonder Years

No dia primeiro de Janeiro de 2008, o Tableless.com.br faz 5 anos de idade. Por isso, uma reformulação total do site era bem vinda. Essa reformulação não será rápida e não envolve apenas a constante mudança do layout, mas também a filtragem de todo o conteúdo contido no site.

Durante muito tempo, principalmente no começo do site, o tableless.com.br foi apenas um blog. Conforme o tempo foi passando, o site foi se transformando sendo influenciado pelo mercado e pelas tendências da comunidade. Continuar lendo »

82 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

Padrões Web - Um elogio ao ócio do desenvolvedor

Abaixo você encontra a palestra que fiz no AlternativaWeb 2007 aqui em Fortaleza. Se quiser ficar mais antenado, estou twittando sobre o evento.

Sou meio suspeito para falar sobre o evento, já que eu sou um dos palestrantes. Mesmo assim, você pode encontrar opinões mais sinceras do Rafael Dourado, Marcelo Augusto, Ilo Aguiar e Chico Neto!

Gostei bastante do primeiro dia. O pessoal dessas bandas é bem animado. Eu não consigo acompanhar! Logo de cara, já queriam me levar em um dos points aqui da cidade: Piratas, a melhor segunda-feira que existe. Deixei pra próxima!

Minha palestra pode ser vista aí embaixo. Se preferir, pode seguir este link aqui.
Os desenvolvedores aqui são dividos em dois gêneros: Ou são muito antenados, ligados com a comunidade e muito participativos. Ou são desenvolvedores quietos, passivos, e que não tem ligação nenhuma com outros desenvolvedores fora da empresa em que trabalha.

Normalmente, a maioria dos eventos sobre desenvolvimento acontecem em lugares como Rio e São Paulo. Salvo algumas exceções que vão para outros estados. Por isso, já parabenizo o Bruno Saraiva e todo o pessoal envolvido em criar eventos assim aqui em Fortaleza e em outros lugares. Deste modo o desenvolvedor brasileiro cresce mais em conhecimento.

Se você quiser mais vídeos e em alta-resolução, visite o Campus Online. Lá você vai encontrar vídeos tutoriais de Tableless, Ajax, Javascript e boas práticas de desenvolvimento web.

11 Comentários

Site em Ajax? Site em Flash? Pergunta ruim.

Recebi há poucos dias um email que me deixou intrigado. Um amigo descrevia um site que vai construir em breve e me perguntava: você acha que devo fazê-lo em Ajax? Essa é uma pergunta ruim. A boa pergunta seria: onde, nesse site, eu deveria usar Ajax?

Enquanto os cabeças-pequenas ficam discutindo se devem fazer ou não site em Flash, o Flickr faz um site HTML, com um excelente slideshow em Flash. Deixe-me perguntar: o YouTube é um “site em Flash”? O Google Video? E o Charges.com.br? Não? Uma vez que o uso de Flash era inevitável, porque não fizeram logo o site todo em Flash? Porque, amiguinhos, Flash é bom para umas coisas, HTML é bom para outras. Eis uma lição que precisamos aprender: não ao radicalismo, nem oito, nem oitenta.

HTML é a ferramenta ideal se você quer que as pessoas consigam usar o botão voltar, adicionar bookmarks, mandar o endereço para os amigos, selecionar e copiar texto, imprimir a página, encontrar seu conteúdo no Google e etc. Claro, dá para fazer quase tudo isso funcionar com Flash ou Ajax, mas com HTML você faz isso sem trabalho nenhum. Está pronto. Basta escrever bom HTML que o resto acontece sozinho. Além disso, HTML tem um custo de desenvolvimento muito reduzido em relação ao Flash. Custo de desenvolvimento, amigos, se mede em horas de trabalho. Gerar formulários, buscas, listagens e relatórios é muito mais fácil em HTML do que em Flash. Se você usa um desses frameworks modernosos então, nem se fala.

Por outro lado, Flash é bom para algumas outras coisas. Por exemplo, se você vai publicar vídeo numa página web, Flash é hoje a opção mais leve, simples e compatível. Ajax, por sua vez, é excelente para evitar refreshs e modifica o modelo de interação com a página. Então não precisamos escolher entre um “site em Flash” e um “site em Ajax” em detrimento de um “site comum, em HTML”.

Para ajudar meu amigo, vou publicar aqui algumas coisas que levo em consideração ao escolher onde usar Javascript e Ajax em um site. Entenda que isso não é uma verdade absoluta, há provavelmente muito mais coisas que você pode levar em consideração, em que eu talvez nunca tenha pensado. Hoje, eu penso no seguinte:

Acessibilidade: o bom Javascript não quebra a acessibilidade do bom HTML (posso falar mais sobre isso outro dia.) Mas isso pode dar algum trabalho. É preciso levar em conta a importância da acessibilidade para aquela aplicação específica. Sim, acessibilidade pode não ser importante para determinadas aplicações. Por exemplo, o Google Maps é inacessível a deficientes visuais e a qualquer um que não consiga usar um mouse. Quem aí vai dizer que eles fizeram uma escolha errada? Mas, para a maioria das aplicações, acessibilidade é importante, e é preciso pensar nisso antes de planejar nosso Javascript.
Modelo de interação: você pode torcer o nariz, mas as pessoas estão acostumadas com o modelo de interação com páginas: clica - espera um pouquinho - carrega uma nova página. Elas sabem usar os recursos do navegador feitos para esse modelo, como a barra de endereços, os bookmarks, e o botão voltar. Ah, o que seria de nós sem o botão voltar? Então, eu uso Javascript sem medo onde é claro para as pessoas que elas estão interagindo com a mesma página, no modelo “aplicação”. Mas evito usá-lo onde possa dar a impressão de que estão navegando para outra página. Caso contrário, elas vão tentar usar o botão voltar e o resto todo. Você leu certo, “evito” não quer dizer que eu nunca faça, só tento ser muito parcimonioso. O nosso Tutorial de Ajax (e também a continuação) foi feito em Ajax por motivos didáticos. Navegando nele você vai sentir falta do botão voltar e de poder usar bookmarks.
Custo x benefício: convenhamos, HTML comum funciona bem para a maioria das coisas, e realmente muito bem para algumas. É a ferramenta ideal, por exemplo, para publicar um site de conteúdo, como esse aqui. Um portal de notícias, um blog, um manual de produto, etc. Usando Ajax você pode fazer com que, ao navegar em um site assim, seja recarregada apenas a parte principal, com o conteúdo. Menus, cabeçalho e rodapé permanecem. Mas será que vale a pena? Trabalhando com padrões web, com seu CSS, javascript e imagens no cache, você vai economizar quanto em banda com esse Ajax? Aqui no Tableless economizaríamos cerca de 15 Kb por página. Por outro lado, teríamos que incluir um bocado de Javascript colocar esse Ajax para funcionar, e manter funcionando coisas como o botão voltar. Sendo que cada visitante vê em média 2 páginas (1,95 para ser mais exato) isso dificilmente representaria alguma economia em banda. E daria um bocado de trabalho.

Logo, meu conselho é: não faça sites “em Ajax”, nem sites “em Flash”. Faça sites com os padrões web, e use Ajax ou Flash onde isso for realmente ajudar seus usuários.

31 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.

71 Comentários

Orelha Bizarra - Curso da Visie

Estou ministrando um curso de tableless essa semana aqui na Visie.
É bem interessante ensinar para desenvolvedores web, porque vira e mexe aparecem algumas figuras. Isso deixa a aula mais engraçada e promove o comportamento social entre os alunos!

Dá só uma olhada na orelha desse camarada.

Deu para perceber que esse curso foi um pouco “animado”, né?!

11 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

CodeShow - Só lembrando!

O CodeShow (dia 17 de agosto) está chegando e muita gente já confirmou sua participação. O Bruno Torres vai estar lá. Como muitos sabem, o Bruno é o professor de Acessibilidade Visie e ele está fazendo uma promoção: Quem comprar o curso de Acessibilidade Online até o dia 16 de agosto, vai ganhar a entrada para o CodeShow.
Há uma outra promoção corrente também: quem comprar qualquer curso presencial da Visie até o dia 5 de agosto, ganha a entrada para o CodeShow.

Para quem tem dúvidas sobre o evento, vale dar uma olhada neste FAQ que fizemos.

OBS.: A Visie ainda está precisando de gente! Se você acha que se encaixa em alguma das vagas, por favor, entre em contato!

5 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