Artigos em Destaque

Acessibilidade: Teste seu site em 44 browsers diferentes O que é? É uma ferramenta que tira screenshots do seu site exibido em diversos browsers e permite você visualizá-los. A quem se destina a ferramenta? Para os desenvolvedores ou curiosos que desejam...

Leia mais

4 sites que um webdesigner deve conhecer Aqui temos uma lista com quatro sites que todo mundo que trabalha com desenvolvimento de sites precisa conhecer. Juntos estes sites reúnem milhares de soluções prontas para necessidades que provavelmente...

Leia mais

O que é CSS? O que é Web Standards? CSS é a sigla em inglês para Cascading Style Sheet que em português foi traduzido para folha de estilo em cascata e é definida como: " Folha de estilo em cascata é um mecanismo simples para adicionar...

Leia mais

Tableless: Melhore a velocidade e a acessibilidade... 1- O QUE É TABLELESS E COMO FUNCIONA ESSA TECNOLOGIA? Tableless é um método de construir sites, usando os Padrões Web (Web Standards) como guia. O nome Tableless é um nome mais “publicitário”...

Leia mais

O que é esse tal de AJAX? - AJAX está para Asynchronous JavaScript and XML. - AJAX é um tipo de programação feita popular em 2005 pelo Google. - AJAX não é uma linguagem de programação nova, mas uma maneira nova usar...

Leia mais

Felipe Corrêa

Acessibilidade: Teste seu site em 44 browsers diferentes

Publicado por admin | Colocado em Dicas | Publicado em 23 Set 2009

Tags:, ,

0

O que é?

É uma ferramenta que tira screenshots do seu site exibido em diversos browsers e permite você visualizá-los.

A quem se destina a ferramenta?

Para os desenvolvedores ou curiosos que desejam testar como o layout é exibido em diversos navegadores recomendo o site browsershots.

Por que utilizar o browsershots?

Neste site é possível tirar screenshots do site enviado em mais de 75 browsers diferentes, incluindo o mozilla firefox e o internet explorer em suas diversas versões. Além disso,  ele testa o site enviado em diversos navegadores rodando em Sistemas Operacionais diferentes como o Mac OS, Windows, Linux e BSD.

Torne suas páginas acessíveis em todos os navegadores e teste-as no site: http://browsershots.org/

Resolvendo o problema de testar o site no IE

Observação: Usando essa ferramenta você consegue testar seu site no internet explorer 6, internet explorer 7 e internet explorer 8, que resolve aquele conhecido problema de não ter todas as versões do IE instaladas na mesma máquina.

Abraços.

Colocar letras iniciais em maiúscula com CSS

Publicado por admin | Colocado em CSS | Publicado em 16 Set 2009

Tags:, , ,

0

Para colocar todas as iniciais das palavras em letra maiúscula utilize o código CSS abaixo:

<html>
<head>
<style type="text/css">
#texto {
    text-transform: capitalize;
}
</style>
</head>
<body>

<div id="texto">Texto com primeira letra das palavras, maiúsculas</div>

</body>
</html>
O resultado é:
Texto Com Primeira Letra Das Palavras, Maiúsculas

Além disso com a mesma propriedade é possível forçar as palavras a ficarem apenas maiúsculas ou minúsculas:

Forçar palavras MAIÚSCULAS:

<html>
<head>
<style type="text/css">
#texto {
    text-transform: uppercase;
}
</style>
</head>
<body>

<div id="texto">Texto com todas as letras, maiúsculas</div>

</body>
</html>
O resultado é:
TEXTO COM TODAS AS LETRAS, MAIÚSCULAS

Forçar palavras MINÚSCULAS:

<html>
<head>
<style type="text/css">
#texto {
    text-transform: lowercase;
}
</style>
</head>
<body>

<div id="texto">Texto com LETRAS minúsculas</div>

</body>
</html>
O resultado é:
texto com letras minúsculas

4 sites que um webdesigner deve conhecer

Publicado por admin | Colocado em Indicações | Publicado em 16 Set 2009

Tags:, ,

0

Aqui temos uma lista com quatro sites que todo mundo que trabalha com desenvolvimento de sites precisa conhecer. Juntos estes sites reúnem milhares de soluções prontas para necessidades que provavelmente você já teve, tem ou terá quando estiver produzindo.

RO Scripts – Ótima coleção de scripts organizados por categorias.
HOT Scripts – Grande coleção de scripts em diversas linguagens.
DHTML Goodies – Ótimas idéias e exemplos de DHTML e Ajax
DHTML Site – Muitos scripts úteis e atuais para o desenvolvimento do seu site.

O que é CSS? O que é Web Standards?

Publicado por admin | Colocado em CSS | Publicado em 28 Jul 2009

0

CSS é a sigla em inglês para Cascading Style Sheet que em português foi traduzido para folha de estilo em cascata e é definida como:

” Folha de estilo em cascata é um mecanismo simples para adicionar estilos (p.ex., fontes, cores, espaçamentos) aos documentos Web. “

Web Standards pode ser traduzido como Padrões Web e tem por objetivo a criação de uma Web universal.

Web Standards é um conjunto de normas, diretrizes, recomendações, notas, artigos, tutoriais e afins de caráter técnico, produzidos pelo W3C e destinados a orientar fabricantes, desenvolvedores e projetistas para o uso de práticas que possibilitem a criação de uma Web acessível a todos, independentemente dos dispositivos usados ou de suas necessidades especiais.

Fonte: maujor.com

PHP – Funções para manipulação de data

Publicado por admin | Colocado em PHP | Publicado em 28 Jul 2009

Tags:, , ,

5

Todo programador já precisou ou precisará algum dia manipular datas no php  e estou disponibilizando aqui algumas funções para exibir, validar e converter datas.

1- Função que retorna a data atual no padrão Português Brasileiro (dd/MM/YYYY):

function data_atual()
{

// leitura das datas
$dia = date('d');
$mes = date('m');
$ano = date('Y');

// definindo padrão pt (dd/MM/YYYY)
$data = "$dia/$mes/$ano";

return $data;
}

Utilização:

data_atual();

2- Função que retorna a data atual no padrão Inglês (YYYY-MM-DD):

function data_atual_en() {

// leitura das datas
$dia = date('d');
$mes = date('m');
$ano = date('Y');

// definindo padrão en (YYYY-MM-DD)
$data_en = "$ano-$mes-$dia";

return $data_en;
}

Utilização:

data_atual_en();

3- FUNÇÃO QUE RETORNA A HORA ATUAL (Hora e Minuto)

function hora_atual() {
 $hora = date("H:i");
 return $hora;
}

Utilização:

hora_atual();

4- FUNÇÃO HORA ATUAL COMPLETA (Hora / Minuto / Segundo)

function hora_atual_completa() {
 $hora = date("H:i:s");
 return $hora;
}

Utilização:

hora_atual_completa();

5- FUNÇÃO QUE VALIDA A DATA

Esta função faz todas a verificações necessárias como verificar se o mês está entre 1 e 12,  verificar se o dia está dentro dos dias permitidos para aquele mês (leva em consideração os anos bissextos) e verificar se o ano é válido.

OBS.: As datas enviadas podem estar no formato inglês (en) ou brasileiro (pt).

function valida_data($data, $tipo = "pt")
{

	if ($tipo == 'pt')
	{
		$d = explode("/", $data);
		$dia = $d[0];
		$mes = $d[1];
		$ano = $d[2];
	}
	else if ($tipo == 'en')
	{
		$d = explode("-",$data);
		$dia = $d[2];
		$mes = $d[1];
		$ano = $d[0];
	}

	//usando função checkdate para validar a data
	if (checkdate($mes, $dia, $ano))
	{
		$data = $ano.'/'.$mes.'/'.$dia;

		if (
			//verificando se o ano tem 4 dígitos
			(strlen($ano) != '4') ||
			//verificando se o mês é menor que zero
			($mes <= '0') ||
                        //verificando se o mês é maior que 12
                        ($mes > '12') ||
			//verificando se o dia é menor que zero
			($dia <= '0') ||
                        //verificando se o dia é maior que 31
                        ($dia > '31')
		    )
		{
			return false;
		}

		if (strlen($data) == 10)
			return true;
	}
	else
	{
		return false;
	}
}

Utilização:

Validar data no formato brasileiro (dd/mm/yyyy):
valida_data('27/07/2009', 'pt');
Validar data no formato inglês (yyyy-mm-dd):
valida_data('2009-07-27', 'en');

6- CONVERTER DATA BRASILEIRA (dd/mm/YYY) PARA PADRAO DO BANCO DE DADOS

function data_user_para_mysql($y){
    $data_inverter = explode("/",$y);
    $x = $data_inverter[2].'-'. $data_inverter[1].'-'. $data_inverter[0];
    return $x;
}

Utilização:

data_user_para_mysql('11/02/1992')

Resultado: 1992-02-11

7- CONVERTER DATA DO BANCO DE DADOS PARA DATA BRASILEIRA

function data_mysql_para_user($y)
{
	if ($y != '')
	{
		$data_inverter = explode("-",$y);
		$x = $data_inverter[2].'/'. $data_inverter[1].'/'. $data_inverter[0];
		return $x;
	}
	else
	{
		return '';
	}

}

Utilização:

data_mysql_para_user('1992-02-11')

Resultado: 11/02/1992

Tableless: Melhore a velocidade e a acessibilidade de suas páginas

Publicado por admin | Colocado em CSS | Publicado em 26 Jul 2009

Tags:,

1

1- O QUE É TABLELESS E COMO FUNCIONA ESSA TECNOLOGIA?

Tableless é um método de construir sites, usando os Padrões Web (Web Standards) como guia.

O nome Tableless é um nome mais “publicitário” para se referir a sites que são construídos sem o uso de tabelas. É utilizado XHTML para apresentar a informação e as Folhas de Estilo (CSS) para formatar essa informação. Pelo motivo de as tabelas não serem usadas para a estruturação, essa metodologia se chama Tableless.

Mas isto tudo não significa que as tabelas foram extintas. Se você quer exibir dados tabulados, como por exemplo um calendário, ou ainda uma lista de produtos seguidos de nome, preço e tamanho, você usará as tabelas para exibir esses dados.

2- VANTAGENS DE UTILIZAR TABLELESS

  1. Facilidade de construção de código (a partir do momento em que o desenvolvedor tem razoável conhecimento da estrutura);
  2. Simplicidade do código;
  3. Limpeza do código: o código fica livre de atributos desnecessários que são colocados automaticamente pelos editores de HTML, ou que são necessários para as tabelas. Fica só uma estrutura básica, de entender com uma passada de olhos;
  4. Facilidade de manutenção do código: com um código mais simples e limpo, não há dúvidas de que a manutenção se torna uma tarefa muito mais simples.
  5. Conformidade com os Padrões da Web ou Webstandards, que são padrões internacionalmente aceitos para a criação e leitura de aplicações para a internet.
  6. Otimização para sistemas de busca: o uso correto de tableless torna o site mais legível para o Google e outros sistemas, podendo melhorar as posições no ranking;
  7. Acessibilidade a deficientes visuais que usam softwares de leitura de páginas. Esses softwares funcionam melhor com estruturas semanticamente construídas, coisa obtível com o uso de webstandards;
  8. Reconhecimento da comunidade desenvolvedora: é inevitável, tableless já é reconhecido como a melhor forma de desenvolver websites em HTML, e designers que insistem em utilizar estruturas em tabelas não são bem-vistos entre a comunidade de designers que já utiliza webstandards em seus projetos.

3- VANTAGENS PROPORCIONADAS POR SITES EM TABLELESS PARA USUÁRIOS COM NECESSIDADES ESPECIAIS

Os usuários com necessidades especiais ganham mais facilidade de navegar no site.
Imagine um deficiente visual. Ele usa um browser com leitor de tela. Esse leitor verbaliza toda a parte de texto e no caso das imagens ele lê o texto alternativo referente à elas. “Por isto é tão importante nos preocuparmos com os textos alternativos das imagens! “

Os sites convencionais são feitos, em sua maioria com editores visuais. E em todos são usados os famosos spacer.gif. Para quem não sabe o que é isso, eu explico: São gifs transparentes de 1px que servem para dar espaçamento entre as células de uma tabela ou outro objeto da página. Esses spacer.gif normalmente são colocados apenas a tag relacionada a imagem, sem nenhum texto alternativo. Isso faz com que alguns sintetizadores leiam o nome da imagem. Então, suponha que você tem uma célula separada 20px e que essa distância foi feita com os spacer.gif.

O visitante terá que ouvir ou apertar uma tecla 20 vezes para passar essas imagens que são extremamente inúteis para ele, tornando assim a navegação para este tipo de usuário inviável.

Existem hoje muitos sistemas que analisam sites para checar se estão de acordo com as guias de acessibilidade. Esses são alguns:

Lembrando que o site não precisa ser Tableless para se aplicar as Guias de Acessibilidade. Mas se o site seguir os padrões, com certeza a experiência de qualquer usuário, independente do seu tipo de deficiência poder navegar, vai ser muito melhor.

5- COMO SITES FEITOS EM TABLELESS SÃO VISUALIZADOS NOS DISPOSITIVOS MÓVEIS?

Existe grande vantagens em utilizarmos tableless quando estamos pensando também em dispositivos móveis.

- Tabelas tornam boa parte do espaço de tela inutilizável com bordas e em um suposto redimensionamento de tela, pode trazer problemas.

Mais abrangentemente falando um site WebStandard leva vantagens em dispositivos móveis porque:

  • Web Standards reduzem o consumo de Banda. Lembre-se que na maioria das situações os usuários de mobile pagam por dados trafegados.
  • Web Standards anda de mãos dadas com acessibilidade. Mantendo sua página pequena, leve, funcional e acessível.

6- COMO É A ACEITAÇÃO POR PARTE DOS DESERNVOLVEDORES EM UTILIZAR A METODOLOGIA TABLELESS?

Os desenvolvedores ainda tem medo do novo. Muitos pensam:
- Preciso aprender tudo outra vez?! Tenho que largar o editor visual? Tenho que fazer o código na unha em vez de usar o editor visual que é tão mais fácil, rápido e prático?
Ou, muitas vezes o desenvolvedor já se convenceu, quer mudar, mas esta decisão não depende dele somente, e sim do Chefe. Parece brincadeira, mas já vi muitos casos do chefe falar:
- Você quer dizer que os sites que você vai fazer com essa nova metodologia não vai funcionar no Netscape 4?

Felizmente esses comentários estão aos poucos desaparecendo. Estamos começando a perceber o número de vantagens que um site feito dentro da metodologia tableless ou simplesmente estar dentro dos padrões Web Standards pode nos trazer.

6- UTILIZE TABLELESS!!

Se você é desenvolver de web sites e ainda não se convenceu de que deve utilizar essa tecnologia,  há um artigo muito legal da Smashing Magazine que trata das vantagens e desvantagens dos dois métodos.

Eu acredito plenamente que essas informações sejam muito úteis para os designers, mas o essencial é que isso também é importante para os clientes… Estruturas tableless, como já disse, têm uma manutenção mais rápida e simplificada e ajudam a melhorar a visibilidade do site em mecanismos de busca! Ou seja, é essencial em uma era em que o Google comanda.  :)

Abraços e até a próxima.

Fontes de inspiração para criar um logotipo de qualidade

Publicado por admin | Colocado em Sem categoria | Publicado em 20 Mar 2009

2

“Raramente se tem uma segunda chance de causar uma boa primeira impressão”.

A frase acima descreve com certeza a importância da criação e de se fazer um trabalho bem feito, com certeza quando Robert Wong disse essa frase, não pensava apenas em veículo de primeiro contato; Causar boa impressão é indispensável a qualquer relação, seja profissional ou não.
Infelizmente, nem sempre estamos inspirados para sair criando um ótimo trabalho “já de cara” mesmo com um ótimo briefing em mãos, nessa hora é muito importante conhecer a fundo a empresa para quem você realizará o trabalho e além disso para auxiliar nesta tarefa, pode ser útil observar os trabalhos de alguns colegas para “chamar” a inspiração.

Abaixo estão alguns sites que considero ótimas fontes de inspiração:

Super Nova Studio

O site da super nova sudio é um completo portfólio de uma empresa de identidade visual. Particularmente gostei dos ótimos trabalhos realizados pela empresa.

Carbonmade

Conheci o Carbonmade recentemente. Ele é um repositório de logos no qual os próprios designers publicam seus trabalhos em um “unir o útil ao agradável” bem feito, ajudando os colegas com a inspiração e fazendo um promoção de seu próprio trabalho. Há divisão por categorias que, quando acessadas, mostram quem faz parte de cada uma e dá acesso a seu portfolio.

LogoPond

O LogoPond já consta em meu delicious faz tempo! Pessoalmente, considero o LogoPound como um dos melhores sites para se visitar quando se precisa de inpiração, pois os trabalhos lá expostos são de altíssima qualidade! Mesmo quando somente para ver as útlimas novidades, vale a pena frequentar o LogoPound!

LogoSauce

LogoSauce também não conheço há tanto tempo, assim, entretanto, já o visito com certa regularidade quanto o assunto é inspiração para logotipos. Ele é do mesmo esquema de os próprios designers enviarem seus trabalhos para a formação das galerias. Apesar de não ser algo tão seleto quanto o Carbonmade, por exemplo, considero como ponto forte seu sistema de pesquisa.

GMK Free Logos

O GMK Free Logos também é uma ótima fonte de inspiração para logotipos. É bem fácil se orientar no site e os pontos fortes ficam por conta do detalhamento das informações sobre os logos e a facilidade de se fazer downloads deles. Nada de plágio, hein, pessoal!

logotypes.lv

O logtypes.lv tem um método de navegação baseado em ordem alfabética. Apesar de haver excelentes trabalhos expostos por lá, infelizmente não é tão fácil ver a imagem do logo quanto os outros indicados. Em compensação, também é bem simples realizar o download dos trabalhos que constam no logotypes.lv.

logotypes.ru

Provavelmente dos mesmos mantenedores do logotypes.lv, o logotypes.ru apresenta a mesma forma de navegação por ordem alfabética e igualmente disponibiliza o download dos trabalhos de forma fácil – também, os cliques extras até se poder visualizar os logos… Também conta com um sistema de pesquisa.

lo8os

Com uma estrutura bem simples e intuitiva, o lo8os apresenta trabalhos de qualidade em seu repositório (trabalahos compartilhados justamente com o fim de inspiração entre os colegas de profissão). O sistema de classificação é por categorias e é possível visualizar, separadamente, os logos mais votados e os mais visualizados – e conta com sistema de notificação de novidades por feed.

LogoLounge.Com

LogoLounge.Com disponibiliza, além de logos para visualização – que são enviados pelos próprios freqüentadores do site -, artigos de alto nível sobre o mercado da área, inclusive com apontamento de inclinações e tendências do mercado. Realmente vale a pena assinar seu feed para receber as últimas notícias sobre logos!

Brand New

Este não é um repositório de logos, propriamente dito. Na verdade, o Brand New é um blog no qual logotipos são analisados e os visitantes também fazem comentários a respeito de cada um apresentado. Para quem procura algo mais que simples visualizações de logos para inspiração, ter contato com as idéias e opiniões de terceiros também é fortemente indicado para a inspiração surgir!

Logo Design Love

Tenho um apreço especial pelo Logo Design Love por ser um blog que eu acompanho há muito tempo. Desde sempre ele apresenta artigos da mais alta qualidade sobre logotipos e tendências – o que é ótimo para inspiração – e não raramente faz ótimas compilações de logos e divulga notícias sobre os acontecimentos mundiais da área.

Uma dica para ter inspiração nas horas de “aperto”

Existem muitos outros sites sobre logotipos, prontos para serem explorados, vasculhados e esmiuçados por você! Certa vez li numa publicação de design sobre a técnica de guardar as peças que agradam em uma caixa ou pasta para consulta futura. Por que não fazer o mesmo em relação a logotipos?

Certamente que não é preciso imprimir cada um e colocar numa caixa ou pasta, basta um diretório em seu computador reservado para isso. Separando os melhores logotipos, os que mais lhe agradam, para uma pesquisa posterior, quando surgir a conveniência/necessidade, certamente poupará muito tempo e você vai ter sua fonte de inspiração para logos pessoal.

Conhece algum outro site para inspiração de logos? Faça um comentário e diga qual é!  ;-)

Briefing para desenvolvimento de web sites – dicas, modelos de download e considerações

Publicado por admin | Colocado em Dicas | Publicado em 26 Fev 2009

2

Um dos pilares do sucesso de um bom web site é fazer um bom briefing com o cliente. Um briefing bem feito e executado pode determinar se um site será bom ou ruim – baseado nas necessidades e expectativas de projeto que o cliente tem.

Para os iniciantes em desenvolvimento web, e mesmo para quem já atua na área a certo tempo, uma “pedra no sapato” muito comum é a falta de um bom briefing e de uma boa entrevista com aquele que vai encomendar o web site (potencialmente falando). Não é incomum o fato de um cliente não gostar do resultado final de um projeto web em função de um briefing mal feito ou desfalcado, que não recebeu a devida atenção de quem o fez e não foi feito e estudado com bastante cuidado.

Neste artigo, falo um pouco sobre como fazer um bom briefing com o cliente e apresento uma proposta que, a meu ver, serve perfeitamente como base para qualquer pessoa fazer o seu próprio briefing de desenvolvimento de web sites, conforme suas preferências, necessidades e gosto pessoal.

O que é “Briefing”?

A definição de “briefing“, segundo o Novo Dicionário Eletrônico Aurélio versão 5.0:
1. Conjunto de informações básicas, instruções, diretrizes, etc., elaborado para a execução de um determinado trabalho, ou missão militar, etc.

2. Reunião onde se definem essas instruções, diretrizes, etc.

A Wikipédia, por sua vez, define briefing da seguinte maneira:

O briefing é um conjunto de informações passadas em uma reunião para o desenvolvimento de um trabalho, sendo muito utilizadas em administração e na publicidade.

O briefing é uma peça fundamental para a elaboração de uma proposta de pesquisa de mercado. É um elemento chave para o planejamento de todas as etapas da pesquisa de acordo com as necessidades do cliente.

Um amigo meu definiu briefing como “uma palavra ‘fresca’ para umas perguntinhas que se faz ao cliente sobre o que ele quer no site”. :-D

Basicamente, é mais ou menos isso, mesmo: o briefing é um conjunto de perguntas e/ou atividades que servem para determinar como se dará o projeto, elaboração e execução de determinada coisa – no caso, a “coisa” é um web site.

Como fazer um bom briefing?

Quando procuramos na internet sobre briefing e quais as melhores maneiras de se fazer um, encontramos diversas opiniões, modos de pensar, pareceres, dicas e até modelos prontos de briefing para web sites. Assim como acontece com muitas coisas que procuramos na internet (em especial na web), fica difícil “tomar um rumo” e escolher tal ou qual maneira ou resultado para seguir, em face à imensidão de resultados e possibilidades que nos são apresentadas.

Pessoalmente, creio que o melhor é filtrar alguns resultados/modelos que pareçam de melhor qualidade e confiabilidade – usando sempre o bom senso e discernimento pessoal para esta decisão – e, depois de uma filtragem inicial, pegar “o que sobrou” e, a partir disso, elaborar o próprio briefing, baseado nas escolhas pessoais e modo de trabalho.

O briefing deve ser feito na primeira reunião com o cliente, preferencialmente em um encontro pessoal. A vantagem de se encontrar pessoalmente com a pessoa que irá contratar seus serviços é poder “sentir” melhor o que a pessoa está realmente precisando e/ou buscando, além de você poder auxiliar e explicar melhor para o cliente o teor e objetivo de cada pergunta.

Encontrando-se cara-a-cara com a pessoa, é mais fácil de mostrar quem você realmente é e uma excelente forma de seu cliente e você estreitarem ainda mais os laços profissionais que, se tudo correr bem, irá uní-los.

Entretando, pode ser que fique complicado de se encontrar pessoalmente com o potencial comprador do web site. Para sanar essa questão, algumas medidas podem funcionar:

  • Briefings por e-mail. Esta abordagem seria a mais simples e “tradicional”, quando o assunto é web. Enviar as perguntas do briefing por e-mail e receber as respostas também por e-mail é algo fácil, relativamente fácil e, até certo pronto, eficiente;
  • Conversa por mensageiros instantâneos. Os instant messengers são usados pela maioria das pessoas que trabalham com web – ou que acessam a rede mundial várias horas por dia. Fazer um briefing com o cliente através de um instant messenger é mais demorado, mas dá um toque mais pessoal a todo o processo;
  • Vídeo conferência. Realizar uma vídeo-conferência é bem próximo de se encontrar pessoalmente com o cliente. Para quem vai realizar uma transação comercial com pessoas de outros estados ou países, este deve ser o meio de escolha adequado;
  • Sistema web de briefings. Para desenvolvedores web é bastante simples montar um sistema online para realização de briefing. Um exemplo seria definir um esquema de IDs para os clientes e programar um formulário com as perguntas separadamente, para cada um; as respostas seriam armazenadas em um banco de dados e/ou num arquivo, como um XML, por exemplo;
  • “Misturar” diversos técnicas. Dependendo do caso, pode ser eficiente “misturar” diversas destas técnicas de feitura de briefing. Por exemplo, pode-se enviar um e-mail com as perguntas e, em uma vídeo-conferência, fazer um acompanhamento com o cliente para auxiliá-lo a responde-las. Outro: elaborar um sistema online para a pessoa responder às perguntas do briefing e enviar as respostas para seu e-mail. Recorra à sua criatividade e certamente bons resultados serão encontrados.

Estratégias para fazer um briefing eficiente

Pessoalmente, sigo a metodologia de que são necessários, no mínimo, 2 encontros com o cliente com, conseqüentemente, 2 briefings:

  1. “Briefing Preliminar”. Define-se, sem muito detalhamento, quais as necessidades do cliente, baseando-se em seu público-alvo, os objetivos que quer alcançar com o site, breves informações sobre sua concorrência, dentre outros.
  2. “Briefing Completo” ou “Briefing Detalhado”. Este sim, é o briefing que trará maior nível de detalhamentos sobre o projeto, necessidades e especificações do site, estratégias de divulgação, informações sobre design, e muito mais.

Briefing Preliminar

O primeiro briefing a ser feito serve para você ter um primeiro contato com as necessidades e idéias que do cliente. O interessante, nesta fase inicial, é conversar bastante com o cliente e tentar captar, ao máximo, o que está “oculto”. Sim, existem necessidades ocultas em todo projeto que, por motivos diversos, o cliente não pode ou não quer falar.

É papel de quem realiza o briefing “extrair” do cliente coisas que nem ele mesmo sabe que quer e/o precisa e, em função disso, trazer uma qualidade maior para o projeto e possível resultado final deste. Fazer um briefing de qualidade demanda prática!

As perguntas para este primeiro encontro podem ser de caráter mais geral, mas com o objetivo de um mínimo de informações sobre as características do projeto, tais como:

  • Público-alvo;
  • Objetivos do web site;
  • “Imagem” que o cliente quer passar para os visitantes;
  • Análise da concorrência.

Outras coisas mais podem ser abordadas; entretanto, estes são elementos básicos que devem figurar no primeiro briefing. É muito importante sair do encontro com pelo menos estas informações.

Pessoalmente, quando vou fazer este primeiro briefing, prefiro levar papel e caneta; penso que isso dá um toque pessoal à reunião e contato com o cliente. Pode parecer bobagem, mas o simples ato de mostrar sua caligrafia transmite pessoalidade à reunião e mostra que você não se importa de “perder tempo” escrevendo informações sobre o projeto ao invés de digitar tudo.

Em alguns casos, especialmente os que a pessoa que responderá às perguntas é muito ocupada ou terá que sair em breve para um compromisso, pode ser conveniente levar um notebook. Mas, como disse, esta primeira fase de perguntas é bastante rápida e serve para obter as informações mais básicas sobre o web site que você irá fazer.

Briefing Completo ou Briefing Detalhado

Como dito, este é o briefing que será feito posteriormente ao Briefing Preliminar e que serve para detalhar tudo o que foi aprendido por você sobre o negócio, produto ou empresa de seu potencial futuro cliente. As perguntas que formam esta segunda parte da “entrevista” feita com seu cliente lhe darão informações mais profundas, confiáveis e com qualidade superior.

Em função de, nesta fase, o número de perguntas ser maior e a necessidade de as respostas para estas perguntas também precisarem ser mais minuciosas, é importante que se disponha de mais tempo para o realizar. Para tanto, evite agendar o encontro em “horários de pico” da pessoa e, previamente, avise que o encontro de vocês precisa ser mais prolongado que da última vez.

Seja transparente e tenha em mente que “o combinado não sai caro”. Se você for honesto com aquele que responderá a essa segunda fase de perguntas e deixar claro, desde o início, que vocês precisarão de tempo maior para este segundo encontro, certamente a pessoa ficará satisfeita com sua sinceridade e feliz por poder fornecer mais informações que, conseqüentemente, farão com que o resultado final de seu web site seja melhor.

O Briefing Completo pode ser dividido em seções, para facilitar o entendimento da pessoa que responde às perguntas e evitar uma eventual fadiga por parte de quem o faz. Por exemplo, as perguntas deste briefing pode ser divididas da seguinte maneira:

  • Estratégia;
  • Informações gerais;
  • Público-alvo;
  • Conteúdo;
  • Aparência (design);
  • Outras informações.

Colocar cerca de 3 a 6 perguntas em cada uma das seções já deve bastar para colher as informações necessárias.

Considerações finais

Fazer um briefing de qualidade, que realmente “extraia” do cliente todas as informações que você precisa para elaborar um projeto que seja bom, é realmente uma questão de prática. Mesmo alguns daqueles que trabalham no ramo de desenvolvimento para web há anos consideram que ainda não sabem fazer um briefing que consiga, plenamente, fornecer o que é preciso para se fazer o site.

Portanto, não desanime caso fique um pouco nervoso e inquieto ou não consiga ser natural e espontâneo nos primeiros briefings que fizer. A prática e consequentes anos de experiência o levarão a um patamar que você irá gostar, esteja certo! ;-)

No fim do artigo há um arquivo comprimido com algum material de apoio para lhe ajudar:

  • “Briefing Preliminar” (em formatos .odt e .doc). Este é um modelo de Briefing Preliminar em uma folha mais apresentável, para causar uma boa impressão no cliente no momento da reunião;
  • “Briefing Completo” (formato .txt). Uma proposta para o Briefing Completo. Este deixei em formato texto puro, somente com as perguntas, para que você exercite sua capacidade criativa e faça sua própria apresentação melhorada. Tenho certeza de que ficará ótimo!

Espero que este material seja de valia para que você possa conhecer alguns dos principais aspectos de um briefing para sites e espero, sinceramente, que consiga realizar seus próprios briefings com cada vez mais qualidade e confiança em si mesmo.

Tem alguma sugestão sobre como montar um bom briefing e/ou quer complementar algo que tenha sido abordado neste artigo? Por favor, compartilhe suas opiniões com todos nós, fazendo um comentário!

Download modelo de Briefing
Material de apoio para criação de briefing

Centralizar página na tela com CSS

Publicado por admin | Colocado em CSS | Publicado em 24 Fev 2009

Tags:, , , , ,

2

Nesta dica vou mostrar como centrar uma página na tela, independente da resolução ou tamanho do monitor usado pelo visitante.

O “truque” consiste em englobar todo o documento dentro de uma div e estilizá-la com umas regras CSS bem simples.

Em geral, uma página centralizada na tela é dimensionada para uma largura que se acomode numa tela com resolução de 800 x 600 px. Vamos então admitir esta hipótese de largura 800px para nossa página.

A largura total da div que engloba a página toda a qual chamaremos #tudo será adotada igual a 760px ( este valor é bastante cômodo, para garantir que em nenhum browser apareça uma barra de rolagem horizontal em 800 x 600 de resolução. Se você costuma projetar com valores diferentes use-o, mas certifique-se da eliminação da rolagem horizontal em 800 x 600).

Então estamos acertados em uma largura de 760 px. Se você simplesmente definir esta largura para a div ela será colocada no canto esquerdo da tela!

A propriedade CSS margin faz o “truque”. Basta definirmos que as margens esquerda e direita serão automáticas, pois CSS prevê o valor auto para as margens.

É assim: CSS dimensiona a div com a largura especificada e coloca margens esquerda e direita IGUAIS. Se a tela tem largura de 1024px, CSScalcula 1024px – 760px = 264px e coloca margens laterais de 264px / 2 = 132px CENTRANDO A PÁGINA qualquer que seja a resolução.

MAS QUE DROGA! O Internet Explorer interpreta errado a regra como ela foi mostrada acima. Ela funciona e centraliza a página em todos os browsers, menos no IE :-(

Devemos então usar um artifício (hack) para fazer funcionar no IE. Basta declarar text-align:center; no elemento body da página e isto resolve, mas cria outro problema. Além de centralizar no IE coloca os textos também centralizados na página. E, para corrigir isto declaramos na #tudo, text-align:left; UFA! obrigado ao IE pelos seus “bugs” para as CSS

E, a seguir o código completo para você copiar e colar no seu editor e fazer mudanças para entender como colocar uma página centrada na tela.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN">
<html>
<head>
<title>Centrar uma  página com CSS</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<head>
<style type="text/css">
body {
margin:0;
padding:0;
background:#cccccc;
text-align:center; /* hack para o IE */
	}
#tudo {
width: 760px;
margin:0 auto;
padding: 10px;
text-align:left; /* "remédio" para o hack do IE */
	}
#conteudo {
padding: 5px;
background-color: #eeeeee;
	}
</style>
</head>
<body>
<div id="tudo">
<div id="conteudo">
    <h1>Pagina Centrada com CSS sem scroll ate 800x600</h1>
    <p> Não use nenhum elemento HTML
(figuras, tabelas, etc...) com largura
      superior a 750px.</p>
</div>
</div>
</body>
</html>

O que é esse tal de AJAX?

Publicado por admin | Colocado em AJAX | Publicado em 23 Fev 2009

Tags:, , , , , , , , , ,

0

professor

- AJAX está para Asynchronous JavaScript and XML.
- AJAX é um tipo de programação feita popular em 2005 pelo Google.
- AJAX não é uma linguagem de programação nova, mas uma maneira nova usar padrões existentes.
- Com AJAX você pode criar de forma mais amigável e rápida de aplicações.
- AJAX é baseado em pedidos do Javascript e do HTTP.

O QUE ESSE AJAX FAZ EXATAMENTE?

Em páginas de web tradicionais se você quiser buscar alguma informação de uma base de dados ou de um arquivo,  ou emitir alguma informação para o usuário você teria que necessariamente fazer uma página HTML dar forma a ela e exibir o conteúdo desejado. Ou o usuário precisaria dar um submit para enviar algum tipo de informação de modo que uma nova página carregará com os resultados.

Com o AJAX, seu Javascript comunica-se diretamente com o usuário, através do objeto de XMLHttpRequest do Javascript. Isso permite a uma página HTML fazer um pedido a uma base de dados sem recarregar.

Um bom exemplo do uso do AJAX pode ser observado no Google Suggest onde você começa a digitar algo e o Google emite uma lista de sugestões através do método XMLHttpRequest do Javascript.

ENTENDENDO O AJAX

AJAX não é uma linguagem de programação nova, mas uma técnica para criar de uma melhor forma  e mais rapidamente aplicações mais interativas na web.

Com o AJAX, seu Javascript pode comunicar-se diretamente com o usuário, usando o objeto de XMLHttpRequest do Javascript. Com este objeto, seu Javascript pode negociar dados com um web server, sem recarregar a página.

AJAX usa transferência de dados assíncrona (pedidos do HTTP) entre o browser e o web server, permitindo que as páginas web peçam bocados de informações pequenas do usuário em vez das páginas inteiras.

A técnica de AJAX faz aplicações da Internet serem menores, mais rápidas e mais amigáveis.

AJAX é não depende da tecnologia do browser  e nem do servidor web.

AJAX É BASEADO EM PADRÕES WEB STANDARDS

AJAX é baseado nos seguintes padrões da web Standards:

  • JavaScript
  • XML
  • HTML
  • CSS

Os padrões da web Standards usados em AJAX são bem definidos  e suportados por todos os principais browsers. As aplicações de AJAX são executadas no browser independentemente da plataforma.

AJAX = APLICAÇÕES MELHORES NA INTERNET

As aplicações da Web têm muitos benefícios sobre aplicações desktop; podem alcançar uma audiência maior, é mais fácil de instalar e suportar, e mais fácil de utilizar principalmente pela praticidade de poder ser acessada de qualquer computador conectado à Internet.

Entretanto, as aplicações da Internet não são sempre tão “ricas” em recursos e amigáveis como as aplicações desktop tradicionais.

Com AJAX, as aplicações da Internet podem ser mais ricas na questão de recusos e ferramentas e mais amigáveis para o usuário final.

O QUE PRECISO PARA UTILIZAR AJAX?

Não há nada novo à aprender, você apenas precisa dominar algumas linguagens básicas da web:

  • HTML
  • JAVASCRIPT

E preferencialmente alguma linguagem que execute direto no servidor como PHP ou ASP, para poder fazer as verificações numa base de dados.

———————————————-

Bom é isso ai espero que tenham gostado! Vou fazer um outro artigo criando um Exemplo de AJAX utilizando o método XMLHttpRequest para buscar as informações dos usuários num banco de dados.

Abraços.