Mini-curso de Web Standards no 2° PHP-MG

Na última sexta-feira começou o segundo encontro de PHP de Minas Gerais na UNI-BH em Belo Horizonte.

Foram dois dias de evento, sendo que no primeiro, tivemos os mini-cursos em MySql, Linux, Joomla!, PHP, Web Standards entre outros.

Eu fui uma dos palestrantes do mini-curso com o tema "Web Standards: Melhores Práticas para Construção de Páginas Web", onde dei dicas, truques e mostrei algumas soluções com problemas frequentes como o crossbrowser para os IE(cas).

Fiz um PDF com mais detalhes dos assuntos citados e no final tem alguns links que considero relevantes no assunto, de blogs, revistas e livros.

Pra quem estava no curso, obrigada pela presença de todos e também pelo bom feedback que recebi. Foi uma experiência muito boa ensinar um pouco da experiência que eu tenho.

Abaixo a apresentação e o pdf.

;)

Desenvolvendo com Joomla

Para quem não sabe, Joomla é uma ferramenta CMS. Não entendeu? humm...

O Joomla serve para gerenciar conteúdo web, ou seja, criar ou manter portais web. A vantagem de se usar essa ferramenta é que, mesmo uma pessoa sem muitos conhecimentos de programação ou desenvolvimento, consegue fazer os ajustes do portal sem muitos problemas. Mas claro que é necessário pelo menos um conhecimento básico da ferramenta, e é por isso que vou fazer uma bateria de artigos, para "dar uma luz" nesse assunto, mas não sou uma expert, então dicas e opniões são bem vindas.

O Joomla usa linguagem PHP e possui várias comunidades que desenvolvem plugins e temas para facilitar ainda mais o seu uso. Citarei algumas nos artigos.

Para começar, precisamos ter na máquina um servidor para que possamos rodar o PHP. Recomendo o WampServer, pois não precisa ficar mechendo nas configurações para que funcione e é gratuita.

Após instalar o servidor, iremos baixar o Joomla. Descompacte o arquivo e copie todo o conteúdo para dentro do servidor. Se você está usando o WampServer, o caminho é c:/Arquivos de Programas/wamp/www/. Crie uma pasta "joomla" e cole esse conteúdo dentro dela para que fique mais organizado caso se crie outro site.

Agora a instalação do Joomla. Veja esse tutorial do Ribamar FS, apesar de ser de uma versão mais velha, ajuda muito. Até a página 18, tem explicando passo-a-passo o que é necessário para que o Joomla funcione sem problemas.

Vale a pena dar uma conferida no restante do tutorial, pois já ensina as funções básicas da ferramenta.

Brinque um pouco para enteder a ferramenta melhor, em outros artigos eu entro em mais detalhes quanto a temas, funções, prós e contras do Joomla.

;)

Plugins Firefox para Web Designers

Olá leitores! Vou falar dos plugins que eu uso no meu dia-a-dia, que me ajudam muito no rendimento do desenvolvimento do projeto e conseqüentemente facilita muito o trabalho.

1. • ColorZilla
   
   
   • 
   
   
   • Captura as cores da página exibida no navegador. Acho muito útil, pois não é necessário ficar abrindo o CSS para descobrie o valor dela. Esse valor é mostrado em hexadecimal e RGB. Ele dá a opção de salvar a cor em uma paleta caso seja necessário. Além disso ele possui outras funções como zoom em imagens e um analisador de cores. Esse último eu nunca usei, mas na página do plugin tem todas as especificações.


2. • Firebug
   
   
   • 
   
   
   • Acredito que todo desenvolvedor que usa o Firefox tem esse plugin instalado. É ótimo e é um dos que eu mais uso. Ele te da a opção de poder editar o código e mostrar o resultado instantaneamente. No CSS é melhor ainda, que assim você pode definir posições, alinhamento, tamanho etc sem precisar ficar voltando no programa, editar, voltar no navegador e atualizar a página. Isso gasta tempo, logo, sua produção é prejudicada! Esse plugin também possui um debugger para Javascript, eu não uso, mas sei que ajuda pois já vi os programadores daqui da empresa usando. O que eu acho legal também, é que ele mede o tamanho da página, mostrando o tamanho dos arquivos carregados ou tempo gasto. Possui outras funcionalidades interessantes também, quem souber de alguma não citada, compartilhe!


3. • Html Validator
   
   
   • 
   
   
   • É um validador de (X)HTML. Mostra os erros do código e a possível solução. Tem me ajudado muito no trabalho. Principalmente naqueles códigos que tem tags que não estão no padrão. Um exemplo típico, é abrir uma tag e não fechá-la, como ‹br/›.


4. • IE Tab
   
   
   • 
   
   
   • Para quem tem que ficar testando o site em vários navegadores, esse plugin já adianta um pouco. Ele simula o IE(k) no Firefox sem a necessidade de abrir o programa, pois abre o navegador em uma tab, assim, economiza na memória do computador. O IE simulado é o que estiver instalado na máquina. O que eu gosto nele também, é que você pode definir as páginas que devem ser abertas no IE. Não adianta, sempre tem alguma página que o desenvolvedor fez somente para esse navegador, não só na parte visual, mas funcional também como um JS que não roda direito na raposinha ou outros navegadores.


5. • MeasureIt
   
   
   • 
   
   
   • É uma régua que mostra os valores em pixels. Não uso com muita frequência, mas ajuda a descobrir se os elementos estão alinhados corretamente ou o tamanho de alguma coisa em uma página.


6. • Web Developer
   
   
   • 
   
   
   • O Web Developer possui várias ferramentas em um único plugin. No menu que pode ficar abaixo da barra de endereços do navegador ou no clique no botão direito do mouse em alguma página. Ele possui um editor de CSS, que as vezes eu acho mais útil que o do Firebug, e também mostra o resultado instantaneamente; desabilita cookies, JS, CSS, imagens; tem uma opção que mostra detalhes de formulários como os parâmetros usados nos campos, assim como exibe detalhes de imagens, links, divs etc. Resumindo, praticamente todos os detalhes do código, sem que seja necessário abrir o código fonte. Esses detalhes são mostrados do lado do elemento da página. Um dos recursos que eu uso bastante é o Resize, onde é possível definir tamanhos para o navegador. Acho bom para ver como a página é visualizada em resoluções 800x600 e 1024x768 que estão abaixo da que eu uso. No Tools tem um validador W3C, tanto para (X)HTML, quanto para o CSS. Conclusão: da mesma forma que o Firebug é essencial, esse plugin também é. É um dos favoritos.


7. • YSlow
   
   
   • 
   
   
   • Feito pelo Yahoo! Developer Network, é um mensurador de desempenho de página. Funciona junto com o Firebug.

Bom, quem tiver mais algum plugin para a lista, me manda com uma breve descrição que eu dou um update. Em um outro post, eu falo de outros plugins que uso, não para o desempenho de desenvolvimento, mas mais para facilitar no uso do navegador, como o GooglePreview, ou outros que facilitam uploads como o Fire Uploader. Além das frescuragens hehe.

Update: Gente, o Thiago deixou nos coments mais uma extensão para criar paletas de cores para o Photoshop, GIMP, Flash, Fireworks etc a partir de alguma página. Não testei ainda mas parece muito boa. Obrigada Thiago.

;)

6 Etapas para o desenvolvimento de um site

Esse artigo é uma lista de etapas que podem ser seguidas para o desenvolvimento de um site. Ajudará quem está começando a se organizar melhor.

Nele descreverei pontos para ajudar no relacionamento com o cliente no processo de criação e desenvolvimento do site.

Serão descritas etapas mais específicas para o desenvolvimento de web sites, porém não se limitam somente a este tipo de projeto.

O processo de desenvolvimento de um site pode ser enumerado nas seguintes etapas:

1. Coleta de Informações


2. Planejamento


3. Design


4. Desenvolvimento


5. Testes e Publicação


6. Manutenção

Etapa 1: Coleta de Informações

Nessa primeira etapa serão coletadas as informações necessárias para o desenvolvimento do site. Recomendo um briefing com as principais perguntas: público alvo, concorrentes, preferência de cores, material disponível (fotos, textos, identidade visual do cliente etc), prazo etc. Quanto mais detalhado, mais fácil será o desenvolvimento.

Essa etapa é a mais importante, pois vai dar ao cliente um maior entendimento do projeto, e é nela também que você passará ao cliente qual é a melhor apresentação do site: navegação, posicionamento dos objetos, se terá ou não animação em Flash, entre outros. Lembre-se que o cliente não sabe nada do que você faz nem a melhor maneira, por isso que deve ser mostrado qual é a melhor solução, dependendo do público alvo, conteúdo, quantidade de textos e fotos.

Uma lista de coisas que devem ser consideradas:

1. Propósito: qual o propósito do site? Fornecer informações, serviços, propaganda, vendas...?


2. Metas: Quais as expectativas em relação ao site? Fazer dinheiro ou compartilhar informações?


3. Público Alvo: Qual o grupo de pessoas que ajudarão a alcançar as metas? Qual é o tipo de pessoa que quer que visite o site? Idade, sexo, interesses são fatores importantes no desenvolvimento de um bom design.


4. Conteúdo: Qual o tipo de informação para o público alvo? Algum assunto específico, um produto ou serviço, algum requisito..?

Etapa 2: Planejamento

Com as informações coletadas na primeira etapa, é hora de fazer o planejamento do site. Esse planejamento inclui a navegação do site e seu mapa.

O "mapa do site" é feito com os tópicos mais importantes e seus sub-tópicos, se tiver. Ele é um índice para um fácil entendimento da navegação do projeto.

As informações de um site são ligadas através de links e um menu principal. Uma navegação efetiva é intuitiva, ou seja, a pessoa que entrar no site não precisa ficar procurando pela informação desejada. Não seria correto colocar no link de contato um ícone de casinha.

Nessa etapa também será decidida a tecnologia usada para o desenvolvimento: Flash, HTML, Ajax etc, você que dará a melhor solução para o cliente. Não recomendo o desenvolvimento de sites com muito texto em Flash, da mesma forma que um hotsite chamaria muito mais atenção com o uso dele.

Dica: Após essas duas etapas recomendo que seja feito um contrato de prestação de serviços, para sua segurança e do cliente. Veja o exemplo no site da revista Web Design.

Etapa 3: Design

A primeira etapa de um design é o rascunho. Com as primeiras etapas feitas você terá a identidade visual do cliente, as cores (geralmente as mesmas da logo), a quantidade de informações, textos, imagens etc. Antes de começar a desenhar uma versão no pc, mostre um rascunho para o cliente. Dessa forma você terá menos chance de ter que começar tudo de novo porque ele não gostou da idéia.

Com a aprovação desse rascunho passe para o pc. No final de cada layout, apresente a versão final e deixe claro no contrato do projeto que ele não pode ficar modificando o layout. Claro que pequenas modificações são aceitas, por isso que mostramos essa versão, para que na hora do recorte de layout, não seja necessário fazer modificações que poderiam ser feitas nessa etapa com muito mais facilidade, evitando assim o retrabalho.

Dica:Tente deixar arquivada a evolução do layout, pelo menos em .jpg. É bom para experiências futuras!

O feedback com o cliente nessa fase é crucial para assegurar sua satisfação e para que não haja "perda de tempo". Imagine terminar o código da página e ter que fazer outro design? Pior ainda se for uma apresentação no Flash. Lembre-se sempre de evitar o retrabalho.

Etapa 4: Desenvolvimento

Após a aprovação dos layouts das páginas, é hora de recortar tudo e implementar suas funcionalidades. Agora o site começa a ser criado.

Geralmente esse desenvolvimento começa da página inicial indo para as internas, principalmente por ser usado um "skin" para as outras páginas. O skin é a parte do site que se repete: navegação, topo, rodapé...

No decorrer do desenvolvimento você perceberá quais as melhores maneiras de interação do usuário com o site. Faça as modificações adequadas, mas não coloque códigos ou animações desnecessárias. Isso atrapalha muito na implementação das técnicas SEO.

Deixe o código bem identado, de fácil entendimento e use os padrões atuais dos web standards, isso ajudará na manutenção.

O mais importante nessa fase: desenvolva um site que seja bem visualizado em pelo menos dois navegadores diferentes: Firefox e Internet Explorer. O usuário final pode acessar o site de qualquer plataforma.

Dica:Não use arquivos .js e .css dentro do mesmo código das páginas, faça chamadas externas, assim o seu código não vira uma lingüiça e também não corre o risco de dar algum problema na visualização, sem falar que fica bem mais organizado.

Etapa 5: Testes e Publicação

Nessa fase, você precisará da ajuda do cliente ou de alguém de fora. Geralmente a pessoa que está fazendo o trabalho não vê pequenos detalhes que podem fazer grande diferença no final. Aceite sugestões e opiniões de outras pessoas, tanto alguém que também seja desenvolvedor, quanto uma pessoa que não entende nada de computadores.

Faça teste nos links para ver se não estão direcionando para lugares errados; verifique a compatibilidade dos navegadores quanto à visualização (navegadores antigos são os que dão mais problemas); resolução de tela; usabilidade (pessoas com daltonismo vão conseguir identificar um link no site?).

Após "defeitos concertados" e a aprovação do cliente, é hora de publicar o site. Um programa de FTP faz o upload dos arquivos para a internet, onde o site será visualizado por qualquer pessoa. Nessa etapa você pode oferecer ao cliente um suporte para registro de domínio e a escolha da melhor hospedagem caso ele não tenha.

Faça mais um teste por precaução e peça para o cliente fazer o mesmo antes da divulgação oficial.

Etapa 6: Manutenção

Somente o desenvolvimento do site não é o suficiente. Uma maneira de garantir novos visitantes ou manter os atuais é atualizando a página com novos produtos, serviços, informações. Se for um cliente que precise de atualizações constantes, faça um contrato de manutenção. Caso ele mesmo prefira fazer isso, ofereça alguma ferramenta de CMS e adapte ao site.

Nessa etapa você pode oferecer as técnicas SEO. A otimização dos elementos como títulos, meta tags, descrição, palavras chave entre outros, são muito importante para a posição do site nas páginas de busca. Além disso, o uso de ferramentas de análises podem ser feitas para acompanhar o desempenho do site quanto ao número de visitantes, se o usuário está vindo de link direto ou se vem de alguma outra fonte. Visite o site Mestre SEO para algumas dicas.

Para fazer esse artigo, coloquei experiências próprias e algumas do artigo "6 Phases of the Web Site Design / Development Process" da Selene M. Bowlby, que me deu uma base para escrever o conteúdo.

Espero que ajude!

;)