Cat Geek: Entendendo o CSS

Cat Geek: Entendendo o CSS: Olá a todos! Bem vindos a mais um artigo da coluna de Desenvolvimento Web  do Cat Geek. No artigo da semana passada, 'Entendendo o 'HTLM5...

Cat Geek: Introdução ao WordPress.Org - instalação e primeir...

Cat Geek: Introdução ao WordPress.Org - instalação e primeir...: Bom dia a todos. Estou começando hoje a coluna de WordPress.Org, aqui no Cat Geek. Neste primeiro artigo, vamos ver um pouco sobre a inst...

Inspiração - 35 sites em flash

Neste site estão 35 sites em flash de designers de outros países. Tem muita coisa legal, mas uns são esquisitinhos...
Vale a pena conferir!
35 Attractive Single Page Website to Inspire You

Falando um pouco sobre web design

Introdução ao web design

O web design nada mais é que a criação de design para a web (o próprio nome já diz). O foco do web design, é desenvolver peças criativas, projetos de web sites e todo tipo de documento para aplicativos na internet.

O desenvolvedor web é responsável por criar a comunicação entre o utilizador e o conteúdo disponível na web. Quando olhado por este aspecto, não pensamos no design do projeto, mas também no que fará o projeto funcionar, a programação.

Segundo artigo de widipédia, web design é definido da seguinte maneira:

“O web design pode ser visto como uma extensão da prática do design, onde o foco do projeto é a criação de web sites e documentos disponíveis no ambiente da web.

O web design tende à multidisciplinaridade, uma vez que a construção de páginas web requer subsídios de diversas áreas técnicas, além do design propriamente dito. Áreas como a arquitetura da informação, programação, usabilidade, acessibilidade entre outros.

A preocupação fundamental do web desing é agregar os conceitos de usabididadecom o planejamento da interface, garantindo que o usuário final atinja seus objetivos de forma agradável e intuitiva.”

PS: todos os comentários em “” foram tirados do mesmo artigo da widipédia.

Planejamento de um projeto para a web

O planejamento de um projeto para a internet contém os seguintes passos:

Coleta de informações primárias (informações que o cliente tem sobre o a empresa, o mercado, os clientes e concorrentes) e secundárias (informações que devem ser procuradas em outras fontes, como sites de concorrentes, sites, fóruns e blogs que falem do assunto). 

Definição dos objetivos do site – para que o cliente quer o site? 

Quais são os objetivos do site?

Qual o público que ele vai atingir?

Quais os sites e blogs esse publico costuma acessar, para que se possa criar uma parceria?

Como simplificar ao máximo o layout, para facilitar ao máximo a navegação e ao mesmo tempo não deixar o site sem graça?

 

Definição da estrutura do site – quantas páginas o site terá e qual conteúdo? 

 

“A estrutura, também conhecida como arquitetura de informação, do site deve contemplar seu objetivo, tornando a experiência do usuário a mais confortável e fácil possível, chamamos isso de usabilidade. Deve-se planejar a estrutura de forma que o usuário obtenha facilmente a informação ou serviço desejado. Hoje em dia são inúmeras as formas que um site pode adquirir e a criatividade continua ser o grande diferencial na produção de web.”

Nessa fase, vale conhecer o gosto do cliente, seus sites favoritos, sites similares à sua idéia, coisas do tipo.

Definição do layout do site 

 

“O layout precisa transmitir a informação desejada com eficiência. É preciso que o layout seja um elo de comunicação com o usuário, que sua linguagem seja condizente com o objetivo do site. Conhecer heurísticas de usabilidade é fundamental para se gerar layouts para a web.

Cada elemento inserido em um website deve ter um objetivo, a perfeição de um website se atinge quando não há nada a ser retirado e não quando não há nada mais a ser inserido.

A maioria dos layouts antigos dos sites da Web eram feitos com tabelas na linguagem HTML, porém esta forma é inapropriada pois tabelas devem ser utilizadas apenas para exibir dados tabulados. Entretanto existem layouts que são completamente produzidos sem a presença de tabelas, são os famosos 'tableless - linguagem CSS' e esta sim é a melhor forma de estrutura para layouts.

Tableless não pode ser entendido como na tradução livre, que seria literalmente 'sem tabelas'. Tableless é um conceito e deve ser entendido como aplicação das webstandards (normas da web desenvolvidas pela W3C).”

Existem hoje ótimos softwares para construção de layouts, se bem que é possível montar um layout a partir do próprio CSS-Tableless. 

 

Pensando em softwares, eu recomendo o Fireworks (versão atual=CS5), que traz um ótimo resultado em layout em nos arquivos ,png ou .jpeg que serão criados. Não podemos dispensar também o Illustrator (versão atual=CS5) e o Corel Draw (versão atual=X5), que são ótimos vetorizadores. O Flash (versão autal=CS5) é o mais usado quando falamos de criar animações e o Photoshop (versão atual=CS5) o melhor editor de imagens. Alguns usam e preferem o Corel Photo (versão atual=X5) para edição de imagens, mas pra mim, nada bate o poderoso editor de imagens da Adobe.

Aprovação do cliente 

 

Nunca passe da fase do layout sem a prévia aprovação do cliente. É gastar tempo atoa. E como tempo é dinheiro, acaba-se jogando dinheiro fora.

Desenvolvimento do projeto

Depois de aprovado o layout, começa a programação. Se for um site simples, HTML básico resolve, talvez um formulário em JavaScript. Se for algo mais avançado, você precisará usar uma linguagem de programação, como ASP, PHP, Cold-fusion, ActionScript, Delphi, o já sitado JavaScript entre outros. É interessante conhecer todas as linguagens, mas é bom se especializar em uma.

Você pode desenvolver apenas com um documento de textos (normalmente o bloco de notas) ou usar um editor de HTML, como o Dreamweaver ou Front Page.

Entrega do projeto ao cliente

Muitas vezes você fará o site e o cliente não saberá como colocá-lo no ar (ta, a grande esmagadora maioria das vezes), então, cabe a você fazê-lo.

O cliente passa pra você o endereço ftp e senha, e através de um programa de upload você coloca os arquivos na net. Eu recomendo o FileZila, é gratuito e você acha fácil no baixaki.com.br e similares.

Agência x Eugência

É comum hoje Agências de Internet (empresas que trabalham em criação de projetos para a web) terem profissionais para fazer o design do projeto, e outros profissionais para fazer a programação do projeto. Esta situação é bem diferente dos Eugências (pessoas que trabalham sozinhas, muitas vezes em casa, e fazem o design e a programação do projeto).

A diferença entre o desenvolvimento de uma agência e de uma eugência é muito grande, mas em cada um dos casos o contratante (aquele que paga para ter sua empresa ou ele próprio no ar) tem vantagens e desvantagens.

Agência: o contratante encontrará um serviço mais organizado, com cada profissional pronto para realizar sua função e entregar um resulto final de acordo com o que foi proposto. Isso é muito bom. Então, o que não é bom? O 'eu sou o cara', pequeno sentimento que cresce de acordo com o crescimento profissional do sujeito. Muitas vezes as agências (e seus profissionais) tentam empurrar para o cliente o que eles acham que está certo. Se alguém-cliente tenta dar palpite na cor, modelo ou qualquer outra coisa, coitado... fica meia hora ouvindo sermões técnicos que ele não entende nada. 

 

Atenção: isso é uma realidade em muitas empresas, mas não reflete o universo das agências que desenvolvem para a web. Existem muitas empresas que respeitam o gosto do cliente e sabem achar o meio termo entre o que o cliente quer e o que ele precisa receber (noções básicas de marketing).

Eugência: o contratante receberá o serviço mais rápido, pois uma pessoa trabalhando com a idéia definida não precisa passar pela aprovação de outros setores, é ela e ela mesma. Muitas vezes o serviço será de qualidade, mas dependendo de quem é o camarada-colega-desenvolvedor web, o trem fica feio. Mas por que?

Respondo: hoje em dia, com a grande expansão da internet, é facil um cara sem ter o que fazer cair sem querer em um site que ensina a desenvolver sites (como o blog em que você está agora), ler umas três matérias de HTML (linguagem mãe do desenvolvimento web) e achar que é um web design profissional. Ai chega o cliente, pergunta quanto fica pra fazer um site? Nosso camarada-colega-desenvolvedor web recém formado em HTML (curso rápido de três matérias no blog) diz: R$ 200,00. O cliente pergunta: mas da pra por formulario, newsletter, banner animado em flash e 20 paginas de conteudo? La vai o querido amigo e diz que da. Conclusão: ele entrega uma porcaria e mancha o nome dos profissionais que dão duro e precisão cobrar um preço justo por isso.

Mas e aí, o que é melhor: uma empresa ou um profissional que trabalha sozinho. Resposta: os dois, desde que o trabalho seja realizado com qualidade, e os profissionais lembrem que estão desenvolvendo para alguem e não para eles mesmos.

Como as pessoas chegam ao site?

As pessoas chegam ao site de diversas maneiras. Com certeza a mais usada é a famosa busca no Google. Praticamente tudo o que se procura no Google se encontra. Porem, existem outras formas das pessoas chegarem a um site:

-Dica de um amigo

-Banner em um site parceiro (aquele famoso quadradinho que fica mudando, mostrando propaganda)

-Links de um site que gostam e levam ao seu site

-Indicação de blogueiros

Já que estas são algumas maneiras de se chegar a um site, as soluções para quem quer aparecer são:

-Compre links patrocinados do Google (e outros buscadores como Buscapé)

-Tenha parceria com outros sites, para colocar seus banners

-Indique outros sites para ser indicado por eles, nem sempre rola mas quando funciona é legal

-Crie conteúdo de qualidade, pois a opinião de um blogueiro que tem mais de mil seguidores pode alavancar ou acabar com sua imagem.

-Divulgue seu site em fóruns que abordem o assunto, mas cuidado: vale a regra dos blogs - se não tiver conteúdo de qualidade, melhor nem passar por lá.

Para que estas coisas se realizem, na hora de fazer um site o web design e o cliente devem estar atentos a algumas coisas importantes:

Quais são os objetivos do site?

Qual o público que ele vai atingir?

Quais os sites e blogs esse publico costuma acessar, para que se possa criar uma parceria?

Como simplificar ao máximo o layout, para facilitar ao máximo a navegação e ao mesmo tempo não deixar o site sem graça?

Outros sites e blogs muito bons para iniciantes e profissionais

Sites

www.imasters.com.br

www.apostilando.com.br

www.mxmasters.com.br

www.webtutoriais.com.br

www.flahswebtraining.com.br

www.truquesedicas.com.br

www.dicasdodia.com.br

www.php.com.br

www.major.com.br

www.codigoaberto.com.br

www.brunoavila.com.br

Blogs

webdesignealgomais.blogspot.com

tuturiaisphotoshop.blogspot.com

webdesinggrafico.blogspot.com

tutoriaisflash.blogspot.com

tutoriaisfireworks.rota83.com

corelnaveia.blogspot.com

Plugin especial para Photoshop

Este pluglin é incrivel. Chama-se Portrait Professional e graças ao pessoal do Acervo Publicitário, tá de grátis.
Olha a descrição do pluglin:

Portrait Professional deixa qualquer um parecer um grande mestre na fotografia e em pouco tempo, não precisa ter nenhuma habilidade artística ou técnica, pois ele é bem simples, só usar a ferramenta de deslize e encontrar o tonalidade da pele que o resto ele faz sozinho. Portrait é o segredo guardado em 7 chaves da fotografia publicitária, facilita e muito a vida de quem trabalha nessa área.

Segue o link direto pra download no 4shared aqui!

Instalando um servidor de ASP - IIS (Internet Information Services)

Para testar os aplicativos em ASP no seu computador, é necessário ter instalado o IIS - Internet Information Services, caso o contrário, os sistemas não vão funcionar.

Acompanhe os passos da instalação (Windows XP):

1- Vá em Iniciar > Painel de Controle> Adicionar ou remover programas. Abra a categoria de instalação de componentes do Windows, selecione "Internet Information Services (IIS)" e conclua a isntalação. Provavelmente você precisará do cd de instalação do Windows.

Depois de instalado, abra o gerenciador da seguinte forma: Iniciar > Painel de Controle > Ferramentas Administrativas > Internet Information Services.

Abra o diretório "computador local", que deve ter o nome que você deu ao seu computador, abra "sites da web" e clique com o botão direito em "Sites da web padrão" e va em propriedades.

Na aba Diretório base, especifique o caminho local onde o servidor ira funcionar. A pasta base é "C:\Inetpub\wwwroot". Você pode mudar para qualquer outra, lembrando que todo trabalho em ASP deve ser salvo nesta pagina.

Dê OK e o servidor estará correntamente configurado. Porém...

Como sempre alguma coisa pode sair errada (comigo saiu na primeira vez que instalei o IIS), seguem algumas dicas, antes de configurar o servidor de testes no Dreamweaver:

Digite http://local host/ no seu navegador. Se aparecerem duas paginas, uma informando que o seu servidor esta sendo executado e outra com a documentação do ISS, deu tudo certo. Agora, se mostrar erros ou pedir senha, deu pau na instalação. Se você usa firefox ou outro, tente no internet explorer, se funcionar la, teste suas paginas em ASP no IE.
Na internet encontrei inumeras dicas, nenhuma funcionou comigo, mas funcionou para outras pessoas, então ai vão elas (tente uma de cada vez):
1 - Desinsta-le e Re-instale o ISS
2 - Vá em Painel de controle > Ferramentas Administrativas > IIS > Computador Local > Sites da Web> Sites da Web Padrão com o botão direito e clique em propriedades. Na aba Site da Web, altere a porta de 80 para 82, ou 8080.
3 - Vá em Painel de controle > Ferramentas Administrativas > IIS > Computador Local > Sites da Web> Sites da Web Padrão. No lado direito, onde aparecem os arquivos da pasta, delete localstart.asp e iisstart.asp.

Como disse nenhuma dessas funcionou comigo. O que deu certo pra mim foi:

Ir em Iniciar > Todos os Programas > Acessórios > Prompt de comando. Digite "msdtc -install" e de enter. Feche o prompt de comando e teste o localhost no navegador (se funcionar no IE, ta funcionando).
Se ainda não der certo, tente isso:

Abra um prompt de comando > Digite msdtc -install > Digite net start msdtc > Remova o IIS > Reinstale o ISS. Faça o teste.

Valeu Pessoal! Na próxima matéria iremos configurar o servidor de teste através do Dreamweaver.

CSS