Design Com Bolachas

Problema com o mod_userdir no Ubuntu e distros derivadas

2010-06-08T00:40:00.006-03:00

Ninguém gosta de surpresas desagradáveis e eu não sou diferente. A mais recente surpresa deste gênero para mim foi um problema com o mod_userdir do Apache, especificamente que ele não funciona mais a partir do Ubuntu Lucid Lynx.

Por razões condescendentes de "segurança" os mantenedores dos pacotes afetados acharam que era válido mudar o comportamento padrão do que ele era desde o primeiro release da distribuição. A natureza precisa deste incidente é que eles desabilitaram o parseamento de PHP para o "~/public_html/". Os detalhes, junto com as razões deles e uma explicação de como consertar isso estão aqui.

O que chama minha atenção como a pior parte de toda esta história é este pedaço de raciocínio falho extremamente ofensivo aos Desenvolvedores Web:

"Security note: Running PHP scripts in users' home directories was not disabled for a frivolous reason -- PHP is a full programming language, and as such, can be used by attackers in nefarious ways. Ideally, the PHP engine should only be enabled for users you (the system administrator) trust, and even then sparingly."

Qualquer um que voluntariamente instale o interpretador de PHP no seu sistema sabe que não deve rodar scripts de terceiros cuja integridade ou procedência não seja verificada sem primeiro inspecioná-los, ponto. Se você tem um ambiente multi-usuário e você quer restringir quais coisas que cada um pode fazer o ônus de implementar isso como você quiser é seu. Por causa de toda esta confusão eu perdi uma hora inteira do meu dia:

15 minutos checando meu procedimento de instalação do meu ambiente de desenvolvimento, porque, como o Jeff Atwood costuma dizer: "É sempre sua culpa".
Outros 15 minutos checando a sanidade de todos os arquivos de configuração óbvios, só para descobrir que eles estavam todos ok.
Finalmente, desperdicei 30 minutos lendo dúzias de resultados de busca do Google (a maioria posts de fórum no ubuntuforum.org) até que finalmente eu tropecei no link do Wiki do Ubuntu.

NOTA: eu sou aquele tipo incomum de cara que LÊ de verdade as notas de versão de uma atualização do seu SO antes de mudar para a nova versão. Nenhum aviso sobre esta mudança se achava lá.

Isto é simplesmente estúpido.

Há quanto tempo!

2010-04-23T21:20:00.004-03:00

Já faz um tempo que não escrevo aqui, quase um ano passou e muita coisa mudou.

O IE8 agora já nos é familiar e um preview do IE9 já está disponível. Esta nova versão do navegador de Redmond parece apontar um novo amanhecer para web designers em todo lugar, com aquele velho sonho de renderização e comportamento consistente entre navegadores que as organizações de padronização alardearam por tanto tempo finalmente ao nosso alcance.

O Google Chrome também tem sido uma razão para se alegrar. Ele conseguiu continuar veloz e ao mesmo tempo se livrar, quase que 100%, dos travamentos frequentes que o amaldiçoavam nos seus primeiros dias. As boas notícias não terminam aqui, pois agora ele também suporta completamente o Linux e o Mac OS X, até a sincronização de favoritos já é possível no Chrome, quer seja através do Xmarks ou do sistema Google de sincronização embutido.

Também passei por muita coisa nesses dez meses, meu setup de desenvolvimento, conjunto de ferramentas e fluxo de trabalho mudaram consideravelmente também:

Não uso mais SVN, me converti ao Git completamente.
Não edito mais meu código no Kate. Passei algum tempo usando o Aptana Studio mas aquilo era estupidamente lento e nem tinha tantas funções assim. Redescobri o Gedit com um colega de trabalho e tenho feito bom uso dele desde então. É um editor bem básico, mas seus plugins o deixam bem completo.
Meu uso do Inkscape diminuiu drasticamente desde que redescobri o Xara Xtreme, o que significa que agora passo muito mais tempo com minha VM do Windows XP aberta do que quando só a usava para rodar o IE Collection e os outros navegadores do windows para fins de teste.
Falando de hardware, instalei mais RAM (2 GB agora) no meu Eee PC e, quando estou em casa, estou rodando ele de um HDD externo muito rápido. Meu antigo e triste CRT de 17” 1280x1024 foi substituído por um LCD de 21.5” 1920x1080.

Outras coisas mudaram também (HTML5/CSS3 alguém?), mas é melhor deixar estas para os seus próprios posts.

É bom estar de volta.

Para iniciantes: próximos passos

2009-06-03T07:28:00.004-03:00

Agora, assumindo que você já leu “Projetando Websites: A Prática da Simplicidade” e estudou todos os tutoriais e exemplos do HTML Dog. Assumindo que você já leu pelo menos 30% do que está disponível no Web Design From Scratch (cabe dizer que o site foi belissimamente redesenhado desde a última vez que eu o linkei), estas são as próximas coisas que você deve fazer:

Leia "Usabilidade na Web: Projetando Websites com Qualidade" (de Jakob Nielsen e Hoa Loranger) e "Não Me Faça Pensar - Uma Abordagem de Bom Senso à Usabilidade na Web" (de Steve Krug).

Aprenda touch-typing, você colherá os frutos deste esforço muito rapidamente! Há bastante ferramentas disponíveis para ajudar você a aprender em pouco tempo, algumas são até baseadas na web!

Estude estes recursos que vão ajudar você a dominar as técnicas de layout CSS e outros conceitos e tecnologias-chaves para a Web:

A adorável Introdução ao Currículo dos Padrões Web do Dev.Opera - É um curso completo dos fundamentos que definitivamente é imperdível para os iniciantes.
All about Floats do CSS TRICKS - Leia-o e você vai "sacar" o assunto num instante.
Os Layouts de Website do Matthew James Taylor - Estes são ouro puro, estude-os com carinho, desconstrua-os, refaça-os.
O Reservatório de Layouts do BlueRobot - Estes são um pouco antigos, mas eles são ótimos de qualquer forma, estude-os e sinta-se livre para ignorar as referências a navegadores que não são mais usados.
O Layout Gala do Alessandro - Também são antigos, não se esqueça de testar nos navegadores mais recentes antes de usar um deles.
Os Frameworks CSS Blueprint.CSS e 960.gs - Gaste seu tempo estudando-os muito cuidadosamente, mesmo se você não planejar usá-los, já que você pode aprender muito descobrindo como eles funcionam. Postarei uma lista dos melhores Frameworks CSS disponíveis junto com alguns comentários sobre cada um deles, só não sei ainda quando farei isso, então fique de olho!
O famoso CSS Zen Garden do Dave Shea - Há um bocado que aprender aqui!

Não copie e cole simplesmente das galerias de layouts e dos tutoriais! Estude-os por completo e então tente refazê-los sem olhar o código deles! Tome cuidado com a tentação de ficar usando Frameworks CSS prontos indefinidamente, você nunca será um dos melhores se não se der ao trabalho de atravessar toda a curva de aprendizagem das técnicas de layout com CSS!

Estude estes recursos sobre os fundamentos do design e comece a aprender a usar uma ferramenta de Desenho Vetorial, eu recomendo o Inkscape e os tutoriais on-line são um excelente lugar para começar! O Inkscape está disponível para Mac OS X, Linux e Windows!

Divirta-se com o que você faz! Se você se entediar então provavelmente esta área não é para você, pois estará competindo contra um monte de gente que é bastante entusiástica sobre o que faz.

E não se esqueça de voltar aqui (de preferência, subscreva-se ao meu feed) para descobrir o quê fazer quando tiver completado estes passos!

Colas!

2009-04-17T02:28:00.007-03:00

Quando eu estava no colégio, as professoras disseram-me que elas eram más e que eu estaria em apuros se fosse pego usando uma delas. Então fui para a universidade e os professores de lá me disseram para usá-las, eles até as imprimiam e pregavam-nas com algumas de minhas provas! Mas nunca pensei sobre elas como algo que usaria enquanto trabalho com a Web.

Então, em abril de 2005, enquanto visitava IloveJackDaniels.com (agora chama-se “Added Bytes”), vi que Dave havia feito uma cola de PHP! Num primeiro momento, não soube o que pensar a respeito, mas baixei-a e imprimi e, sem saber onde mais poderia colocá-la, colei-a na parede atrás do meu monitor. Em pouco tempo, percebi que estava digitando código PHP muito mais rápido do que antes, minhas visitas ao php.net haviam diminuído bastante e, logo, eu estava lembrando muito mais PHP do que jamais consegui anteriormente.

Em torno de uma semana depois, Dave postou outra! Dessa vez era uma de CSS! Rapidamente, fiquei viciado, ao ponto de acender as luzes (para que pudesse vê-las) quando queria escrever código.

Com o tempo, baixei as novas que ele postou e descartei as antigas. Ainda assim, tenho um conjunto delas na parede à minha frente até hoje, apesar de não olhar para elas nem um quinto do que eu olhava antes.

Quer você ainda esteja aprendendo HTML, CSS, etc. quer você já seja profissional, aceite meu conselho: baixe-as e cole-as à parede atrás do seu monitor, elas serão inestimáveis.

Desenvolvimento Web no Eee PC

2009-04-02T22:17:00.004-03:00

Eu nunca gostei de notebooks, acho que eles são caros demais para o pouco que fazem e também são grandes/pesados/frágeis demais para serem chamados de móveis. Mas, eu precisava de um, então uma escolha tinha que ser feita.

Escolhi o Eee PC 900, da ASUS, porque ele não é caro, ou grande, ou pesado, ou frágil.

Então, acho que foi por isso que eles tiveram que inventar um novo nome (netbook) para dispositivos como este.

Antes que vocês me chamem de louco por fazer todo meu trabalho no Eee, deixem-me dizer-lhes que eu tenho um monitor muito maior em casa.

Pequeno como ele é, até agora o Eee atendeu e até passou das minhas necessidades como desenvolvedor web. Eis o porquê:

O LCD de 8,9 polegadas tem uma resolução wide-screen de 1024x600 e dpi de 133,3. Isto quer dizer que a maioria dos websites cabem bem nela, já que a maioria das pessoas que ainda fazem layouts de largura fixa otimizam para 800 ou 1024 de resolução horizontal, e que os textos também são de fácil leitura.

O teclado é pequeno o suficiente para ser ultra-portátil e ainda é (pelo menos para mim) grande o suficiente para ser bastante confortável quando digitando. De fato, custou pouco menos de uma hora para acostumar-me a ele!

O processador Celeron M 353 Ultra-Low-Voltage (900 Mhz), junto com 1 GB de memória DDR2 e o adaptador de vídeo integrado GMA da Intel (chipset 915 GM), faz com que ele seja mais do que rápido o bastante para rodar meu ambiente de desenvolvimento LAMP junto com um par de navegadores abertos e mais (Amarok, Kate, Krita, BrOffice, Inkscape, Gimp etc.). O adaptador de vídeo integrado até roda os efeitos de desktop do KDE4 bem suavemente!

Os dispositivos SSD (de 4 GB e 16 GB respectivamente) têm mais espaço do que preciso para trabalhar. Instalei o Kubuntu 8.10 junto com todas as aplicações que eu queria no SSD mais rápido de 4 GB e ainda tenho quase 400 MB de sobra. O SSD secundário de 16 GB ainda tem mais de 10 GB livres mesmo depois que copiei todos os meus arquivos de trabalho e parte dos meus arquivos pessoais.

As conexões Wi-Fi e Ethernet são excelentes. Também usei um modem 3G USB (HUAWEI E156) por longos períodos sem problemas.

Finalmente, mas não menos importante, comprei o meu com uma bateria de 5800 mAh que rende, geralmente, quase três horas desligada da tomada.

Levado tudo isto em conta, estou bastante satisfeito com ele e acho que estarei usando-o por um bom tempo.

Primeiras impressões sobre o IE8

2009-03-20T02:14:00.006-03:00

Então, o Windows Internet Explorer 8 foi lançado. Assim como foi o Google Chrome (no sentido de que ele não é mais beta).

Testei ambos hoje e aqui estão minhas impressões sobre o IE8:

A conformidade com os padrões melhorou, especialmente quando lidando com CSS, mas de alguma forma ele conseguiu entender errado o CSS do título deste blog, então o alterei mesmo tendo o visto funcionar em todos os navegadores que testei.

A interface ficou ainda maior e agora ela toma uma parte absurda da tela para resoluções de até 1280x1024.

As fontes parecem estranhas. Algum tipo de melhoramento dos cantos das fontes deve ser o culpado, só não consegui desabilitá-lo (se é que isso é possível) apesar de ter passado cinco minutos tentando.

No fim do dia, ele ainda é o mesmo e velho IE, o mau garoto na arena.

E sobre o Chrome? Ele não travou uma vez sequer enquanto eu testava (em torno de 45 minutos). Ele é tão rápido quanto é possível e não trava mais com frequência! Estou impressionado. Tudo que falta a ele agora é um port apropriado para Linux. Isso e suporte às extensões do Firefox...

Para iniciantes: autodidatismo

2009-03-19T11:37:00.004-03:00

Você pode estar se perguntando, se leu meu post anterior, como e onde você aprenderá aquilo tudo?

Aqui estão as respostas:

Web Design From Scratch, de Ben Hunt: este deve ser seu ponto de partida, você não pode ter lido o bastante se não o leu todo.

HTML Dog, de Patrick Griffiths: leia tudo, começando pelos tutoriais para iniciantes. Mesmo que pareça fácil demais às vezes, não pule os fundamentos! Você vai se arrepender disso mais tarde.

Mas... não tem alguma coisa de estranho? Os links que eu postei são para sites em Inglês!

Há um motivo para isso. A quantidade de conteúdo de qualidade em língua inglesa é imensamente superior à quantidade que há em Português. Logo, você deve aprender Inglês se você quer ser bem sucedido neste ramo. Um ótimo lugar para começar é o Inglês Online.

Antes que digam que eu criei polêmica ao não recomendar sites brasileiros, aqui vão dois:

O Maujor escreve e traduz muitos artigos de qualidade, é sua salvação se você ainda não sabe Inglês.

O Tableless é referência nacional na nossa área, não deixe de visitá-lo.

E, é claro, meu blog, onde você obterá dicas como estas e ainda mais links para excelentes recursos de aprendizado!

Para iniciantes: minha dica número um

2009-03-16T20:56:00.003-03:00

Pessoas frequentemente me procuram com estas questões:

Como tornar-me um designer/desenvolvedor web?
Preciso ter um diploma em Ciência da Computação, ou talvez em Design (como em design para mídia impressa), ou até mesmo em ambos?
Qual deveria ser meu primeiro passo?

Minhas respostas:

Para tornar-se um designer/desenvolvedor bem sucedido, é preciso estudar muito as coisas certas, e praticá-las bastante, não há muito além disso.
Não, veja algumas das razões aqui (link em inglês).
Leia “Projetando Websites: A Prática da Simplicidade” de Jakob Nielsen (Designing Web Usability: The Practice of Simplicity, título original).

A dica número um que mencionei no título do post?

Comece concentrando-se em o quê você deve fazer, somente engaje-se com a parte do como, quando for claro para você o quê seus clientes precisam de você.

O quê fazer? Criar websites usáveis, acessíveis e compatíveis, que são tanto atraentes visualmente quanto simpáticos com os seus usuários. As palavras-chave que devem estar vagando pela sua cabeça são Retorno Do Investimento, Taxa De Conversão, Otimização, e outras similares!

Como fazer isso? Aprendendo e aplicando XHTML, CSS, Javascript, PHP e MySQL primeiro. Outras tecnologias (tais como Ruby, Python etc.) devem vir mais tarde e somente quando você tiver pesado seus prós e contras para os tipos de serviços que você estará prestando então.

Há ainda alguns detalhes dos quais você deveria estar ciente durante este processo, mas os deixarei para outros posts.

Boa sorte!

Consertando detalhes e melhorias graduais

2009-03-12T13:52:00.004-03:00

As pessoas perdem frequentemente grandes oportunidades por causa do seu perfeccionismo.

Por muito tempo, sofri com isto e decidi que não posso mais bancar esta atitude. Então, quando estava fazendo este blog, pratiquei a abordagem de “implementar primeiro/melhorar depois” e posso dizer que estou bastante satisfeito com os resultados.
Quase todo dia, faço pequenas mudanças no código e nas imagens deste blog e testo-as em vários navegadores.
Até agora isto levou-me a um modelo de melhorias graduais que não me trouxe problema algum.

Agora, acredito que estou confiante o suficiente para aplicar esta nova abordagem nos trabalhos que eu faço para meus clientes e acho que você também deveria, se já não o faz.

Provavelmente, voltarei a este ponto daqui a alguns posts para contar a vocês tudo sobre meus resultados e minhas novas descobertas neste tópico.

Bandeiras e versões alternativas

2009-02-28T02:49:00.005-03:00

Desde que tive a ideia de fazer este blog, decidi que ele deveria ser bilingue. Sou fluente tanto em Português do Brasil quanto em Inglês. Esta claramente era uma boa maneira de ampliar meu público em potencial.

Depois de pensar bastante, escolhi colocar o link para a versão alternativa no primeiro lugar da minha lista de links. Para torná-lo mais notável, achei que deveria ter uma daquelas bandeirinhas logo ao lado dele. Tendo eu já visto algumas bandeiras legais no meu cliente de BitTorrent favorito, o Ktorrent, decidi procurar, em sua documentação, onde foi que os desenvolvedores arranjaram-nas. Aqui está o link, as que eu estou usando são do conjunto world de 25x15 pixels. A licença destas é a Creative Commons.
Elas devem ser bem úteis quando você precisar ter versões em várias línguas de um site.

Fazendo o Template

2009-02-18T12:34:00.004-03:00

Projetar o Template deste blog foi uma boa experiência e eu quero compartilhar com vocês alguns dos detalhes do processo que usei.

A primeira coisa que fiz foi um rascunho da aparência final com papel e lápis. Isto é ótimo porque nos dá a liberdade de criar estes rascunhos rápido e de descartá-los ainda mais rápido se eles não saírem como esperávamos ou se, simplesmente, mudamos de ideia no meio do processo. Em seguida, fiz um modelo do design no Inkscape, o qual usei para testar o esquema de cores que escolhi e o tamanho, em geral, das coisas. Então passei para a digitação do código e criação das imagens tomando estes passos:

Selecionei o Template do tipo clássico na dashboard do Blogger e baixei uma cópia do template padrão, da qual removi todas as tags do Blogger (tais como BlogItemTitle ) e tudo que estava entre as chaves das regras CSS.
Colei o típico conteúdo marcador de posição Lorem Ipsum e links de auto-referência no código para que eu tivesse algo em que aplicar estilo.
Então, comecei a escrever as regras CSS e debugá-las ao mesmo tempo em que as criava com o Firebug (ferramenta adorável, diga-se de passagem; pense em obtê-la se você já não a usa).
De vez em quando, checava o layout numa pilha de navegadores (incluindo, é claro, o IE do 5.0 ao 7) e certificava-me que o código validava no Validador do W3C.
Decidi quais imagens eram necessárias e comecei a trabalhar nelas.
Quando eu tinha um protótipo que funcionava e validava ambos XHTML/CSS eu comecei a trocar o conteúdo marcador de posição com as tags do Blogger apropriadas.
Como passo final, fiz o upload do meu design de volta ao Blogger e eliminei os últimos poucos bugs que apareceram neste estágio.

Soa fácil, não? Bem, nem tanto assim. Para começar, há o problema da validação do código gerado pelo Blogger. Até o momento onde eu estava fazendo as imagens para este blog, tudo corria bem em relação à validação. Então, assim que inseri as tags do Blogger e fiz o primeiro teste pela URL no Validador do W3C, ele parou de validar. Parece que a maior parte do código que o Blogger insere no template não é padrão. Não há muito que eu possa fazer em relação a isto, então decidi simplesmente conviver com este fato. Há também alguns detalhes que eu prefiro falar a respeito em outro post, porque este já está bem grande.

E agora, o quê?

Estou pensando em usar o que aprendi ao fazer este template para criar templates customizados gratuitos. Então, esperem que eu venha postar um link para o meu novo blog de Templates!

Primeiro

2009-02-14T02:04:00.004-03:00

Oi, eu sou Thiago, e este é meu novo blog sobre Design e Desenvolvimento para a Web. Escreverei aqui alguns artigos sobre as técnicas que eu uso nos meus próprios designs. Tento manter meu foco primeiro na Usabilidade, depois na Acessibilidade e na Compatibilidade entre vários navegadores. Nunca uso editores WYSIWYG para a web, de fato a última vez que usei um deles foi na época do Netscape Composer 4.8.

Minhas atuais ferramentas preferidas para o design e desenvolvimento são:

Kubuntu Linux – Meu SO
Kate – Editor de Texto
Inkscape – Editor de Imagens Vetoriais
Krita e Gimp – Editores de Imagens Raster

Sinta-se a vontade para comentar, especialmente se você achar quaisquer erros gramaticais ou de código.

Espero que aprecie!