Como alinhar um site ao centro

Ultimamente tenho visto muita gente a perguntar como alinhar um site ao centro, ainda existem alguns sites (os mais antigos) que estão alinhados a esquerda, digamos que isso é uma técnica que já a muito passou de moda, actualmente quase todos os sites são alinhados ao centro para ficarem no centro do ecrã quando abertos. Assim dependendo das resoluções de cada ecrã a visibilidade e a aparência são melhores, devido ao facto de as margens (parte da body que não faz parte do site em si) ficarem distribuídas para os dois lados, pois com um alinhamento a esquerda muitas das vezes ficamos com uma grande zona sem qualquer tipo de conteúdo a direita.

Seguindo o esquema de um site web já aqui apresentado no Rafa's Web Blog ajuda, neste caso para alinharmos o site ao centro seria muito fácil, bastava ir ao nosso ficheiro de “estilos” (geralmente style.css) e na class wrapper adicionar o margin:0 auto; algo do género:

1  #wrapper {
2
3  margin:0 auto;
4
5  }


E desta forma o nosso site passa a estar alinhado ao centro do ecrã.

COMO ALINHAR O TEXTO AO CENTRO?

Outra coisa interessante e que muitas vezes suscita duvida é de como alinhar o texto ao centro, isto é relativamente fácil basta adicionar text-align: center; algo do género:

1  #wrapper {
2
3  margin:0 auto;
4  text-align: center;
5
6  }

O desenvolvimento de um site começa no papel

Criar um site não é só organizar textos e imagens em páginas HTML. Alguns detalhes são muito importantes, e se não forem bem definidos antes do desenvolvimento começar podemos perder muito tempo refazendo o trabalho até chegar no que o cliente deseja.

Na maioria das vezes, o cliente já tem um logotipo, e a identidade visual do site deve seguir à risca a identidade visual da empresa, mesmo que o desenvolvedor deixe seu estilo estampado no projeto. Muitas vezes, quando precisamos desenvolver um layout, corremos para o computador e esperamos a idéia chegar - quando nossas ferramentas se resumem ao que o computador oferece, nossa criatividade é limitada por elas. Por isso, o melhor jeito de planejar um site é no papel. Literalmente.

Rabisque, ouse, liberte sua imaginação. Mantenha uma lista de sites que você gosta e como inspiração, visite-os constantemente e mantenha-se atualizado a respeito de novas tecnologias, novas formas de se usar o que já existe e, principalmente, tendências de layout.

Conheça seu cliente, entenda o que ele quer promover

O planejamento de um site também é muito importante para conhecer o cliente e seu produto. Precisamos definir o foco do projeto antes de tudo. Se você não tem contato - mesmo que através da internet - com seu cliente, vai ficar mais difícil enteder suas necessidades.

É fundamental definir as expectativas do cliente e o objetivo do site *antes* de começar o desenvolvimento. Quando definimos o foco do site, podemos estabelecer prazos, recursos, informações necessárias e até mesmo custos, se você já desenvolveu outros sites do mesmo porte. Mesmo o layout é desenvolvido mais facilmente a partir disso.

Quais serviços o site vai prestar e qual o público alvo são alguns dos fatores que devem estar muito bem esclarecidos. Só assim podemos projetar uma identidade visual adequada, que tenha "a cara" da empresa ou do serviço que está sendo divulgado na internet.

Por isso, mesmo que o seu trabalho seja terceirizado, tente entender "quem" é esse site. Seu trabalho ficará mais fácil e seu cliente, mais satisfeito.

Desenvolvimento do site: backup, testes e feedback

A Lei de Murphy diz que "se alguma coisa pode dar errado, dará". O profissional de informática sabe o quanto isso é verdade, especialmente quando se está no meio de um projeto com o prazo apertado.

Imagine a seguinte situação: você passou os últimos dois meses desenvolvendo o site do seu cliente. O layout ficou maravilhoso, as animações deram um trabalho enorme para chegar ao resultado desejado e... seu computador pifa. Sim, porque computadores pifam, numa grande empresa ou na sua casa, e essa é uma realidade.

Nessa hora eu realmente espero que você tenha um backup (cópia de segurança). Sabe, um backup *fora* do seu computador, porque a versão do site que você já publicou para o cliente aprovar está lá, mas se o seu computador pifou, as chances do login e senha do FTP estarem, por exemplo, em um cliente de e-mail inacessível, agora são grandes.

Pessoalmente, eu faço backups - semanais ou a cada grande mudança no projeto - em um CD para cada cliente. Às vezes, também uso uma conta de GMail para backup, mas com a plena consciência de que se o problema estiver na falta de conexão eu vou precisar dos arquivos offline.

Teste seu site, e depois teste mais um pouco

Durante o desenvolvimento, espera-se que o site seja testado:

- Obrigatoriamente em mais de um navegador;
- Em pelo menos duas resoluções de tela (800x600 e 1024x768 pixels);
- Em computadores com configurações diferentes;
- De preferência, em mais de um sistema operacional;
- Se possível, em dispositivos móveis e computadores adaptados para usuários com necessidades especiais.

Mas ter a certeza de que o seu site funciona em qualquer dispositivo não garante que ele seja funcional para qualquer usuário. Se puder, peça para amigos ou parentes que tenham conhecimento básico em informática para navegarem e, em voz alta, dizerem o que estão pensando. Às vezes, o que parece óbvio para o desenvolvedor não faz sentido para o usuário final, e nós sabemos como é fácil deixar um site desinteressante para trás. Se for possível, faça também alguns testes com o público alvo do seu cliente.

Quando o site estiver pronto, faça uma checagem final testando links, imagens e procurando pequenos erros de português. No caso das páginas dinâmicas, é importante testar os scripts em todas as situações possíveis. Aqui também é interessante ter a ajuda de alguém de fora do projeto: às vezes você não consegue enxergar o próprio erro porque já se acostumou a ele, e você não quer que um erro seja apontado pelo seu cliente. Ou pior, pelo cliente do cliente!

Depois de publicar seu site, continue fazendo testes para ter certeza de que suas páginas se comportam da maneira esperada, se as imagens estão no lugar certo e se as páginas dinâmicas (especialmente com banco de dados) funcionam.

Seu trabalho não acaba com a publicação

Mas não pense que publicar o site é a parte final do seu trabalho. Atualizar um site é tão importante quanto desenvolvê-lo. Sites que ficam sem atualização por um longo período parecem abandonados. Um site precisa apresentar sempre informações atualizadas, afinal a marca da internet é a agilidade nas informações, e por isso é importante convencer seu cliente de que a manutenção no site é indispensável - ela não precisa ser mensal, mas precisa acontecer.

.: Livros sugeridos :.
:: Use a cabeça: HTML com CSS e XHTML
:: Não me faça pensar - Uma abordagem de bom senso à usabilidade na Web
Via Shopping UOL
É importante também ouvir os comentários dos visitantes para saber se as expectativas do público alvo real estão sendo atendidas e se o site tem erros que passaram desapercebidos, por isso uma forma de contato é fundamental. Formulários são importantes porque através dele o visitante vai dizer exatamente o que você quer saber. Mas também é importante saber o que ele quer dizer, e além disso, algumas pessoas não gostam de formulários. Por isso, sempre tenha um e-mail como forma de contato.

Converse com o seu cliente e peça uma cópia de todas as mensagens que dizem respeito ao site. É importante para o desenvolvedor saber o que o público alvo pensa, já que o site foi feito para ele, afinal.

Outra forma de saber se o site está cumprindo seu papel é acompanhando as estatísticas de acesso. Páginas mais visitadas e palavras chave que foram usadas para acessar um site podem dizer muito sobre o comportamento dos usuários, e com isso você pode fazer ajustes para melhorar ainda mais o site.

Como ganhar mais seguidores no twitter automaticamente.

Ola amigos, venho aqui apresentar para vocês essa super ferramenta online que colocara o numero de seguidores do seu Twitter nas alturas.
Muito fácil de usar e sem mistério nenhum, basta fazer o login apertar começar e pronto.


Nesse vídeo irei mostrar o quanto e fácil usar essa ferramenta online para aumentar o numero de seguidores do seu Twitter automaticamente.

As bases do HTML – Estruturar um site

Já reparou que os sites têm sempre a informação arrumada de modo semelhante? Neste tutorial vamos explicar a estrutura base de um site em HTML de um modo muito simples e fácil de perceber.
Neste exemplo vamos aprender como estruturar um site com um Cabeçalho, um Conteudo Principal, uma Coluna Direita e um Rodapé. Vejamos a figura, os nomes estão em inglês para que consiga identificar facilmente as zonas no código da maioria dos sites.



Nesta figura vemos coloridas algumas zonas do site, temos:

*Verde: Caixa que tem o site todo (Wrapper)
*Violeta: Caixa do Cabeçalho (Header)
*Azul: Caixa que tem o Conteúdo (Content) e a coluna da direita (Right)
*Amarelo: Caixa de Conteúdo (Content)
*Laranja: Caixa da coluna direita (Right)
*Vermelho: Caixa de Rodapé (Footer)

O código HTML é relativamente simples, para começar abra o notepad e escreva o seguinte:

1<html>
2
3</html>

Assim estamos a avisar que vamos escrever código html dentro dessas tags (uma para abria e a outra com o / para fechar.
Depois dentro destas tags temos que dizer onde vai estar a zona do código que é para aparecer no site, é necessário escrever assim:


1<html>
2
3<body>
4
5</body>
6
7</html>



É dentro do body que se coloca a parte do código da estrutura do site, repare que abrimos o body com <body>  e fechamos com </body> .
Vamos agora parar um bocado e perceber como se diz no código que queremos colocar as caixas. Pois bem, caixas em HTML chamam-se DIV, pode abrir colocar uma caixa colocando no meio do código assim:

1<div>
2
3</div>

O problema aqui é que a caixa só com

é uma caixa genérica e você quer ter uma caixa com tamanho, posição, cor de fundo, entre outros.

Para isso temos que dar nomes no código às caixas, para isso utilizamos as ID e as CLASS, não se preocupe é muito simples mesmo. Pense assim as ID são caixas principais as CLASS são caixas que se repetem várias vezes, por exemplo uma coluna com vários artigos e cada artigo dentro da sua caixa. Dá-se um nome a uma caixa da seguinte forma

1<div id="wrapper">

2
3</div>

ou

1<div class="wrapper">

2

3</div>

Demos o nome Wrapper à caixa, repare que para fechar a caixa basta só colocar

não é preciso dizer o nome da caixa.

Já sabemos criar caixas e dar nomes às caixas então só falta estruturar, para isso a lógica é simples, olha-se para o desenho e temos que ver as caixas que estão por baixo, essas temos que abrir primeiro. Vejamos como fica neste exemplo, e vamos utilizar só ID porque são todas caixas principais.


<html>

<body>
    <div id="wrapper">
        <div id="header">
        </div>

        <div id="main">
            <div id="content">
            </div>

            <div id="right">
            </div>
        </div>

        <div id="footer">
        </div>
    </div>
</body>

</html>


Ou seja, abrimos uma que é a Wrapper, dentro dessa temos a Violeta, a Azul e a Vermelha (Header, Main, Footer). E dentro da caixa Azul temos a caixa Amarela e a Laranja (Content e Right).

Acabámos de definir a estrutura principal do site em HTML, é claro que um site é constituido por muitas e muitas caixas, mas a ideia é esta.

Dentro de cada caixa depois colocam-se por exemplo o Logotipo na Caixa Header, os artigos na Caixa Content. Na Coluna da Direita colocamos uma votação, categorias, artigos mais vistos. E no Footer podemos por o Copyright do site ou outra informação como os Contactos.

Fica a faltar explicar como se atribui características às caixas, ou seja, como dizemos que tamanhos tem cada uma, as cores do fundo, as margens entre elas, etc. Essa parte já não se chama HTML mas sim CSS.

Fazer sites pode parecer complicado e desanimador para quem começa, mas é só uma questão de perceber a base e tudo o resto será mais fácil de entender.

Cursos 24 Horas - Cursos Online com Certificado Entregue em Casa

8 Dicas de como conseguir bons backlinks e aumentar seu site nas paginas de busca.

Depois de ter publicado o artigo, o que são backlinks e porque são importantes, vamos hoje publicar um artigo que vem completar esse ultimo artigo. Vamos ver algumas das formas mais eficazes de criar backlinks, todas estas formas já formas testadas por mim e quando bem aplicadas os resultados são surpreendentes.

A principal razão para conseguir bons backlinks é o facto de estes ter um peso imenso no algoritmo do google para o calculo da primeira posição nos resultados de pesquisa.

1. CONTEÚDO EXCLUSIVO / ORIGINAL E DE QUALIDADE

Este é sem dúvida o verdadeiro segredo do sucesso, conteúdo original e de qualidade é sempre bem vindo a blogosfera, existem muitos blogueiros que adoram linkar para artigos com conteúdo de qualidade.

Uma outra forma de obter sucesso com o seu conteúdo exclusivo, é participando em fóruns relacionados com o tema do seu blog e ir tirando duvidas a membros do fórum com links para o seu blog, claro que os artigos que linka devem ir de encontro a duvida do membro, caso contrário você será considerado um spamer e banido do fórum.

2. ESCREVA SOBRE UM TEMA POLÉMICO

Esta deve ser uma das formas mais “fies” / fiável de obter backlinks, imagine que você sabia que o Mourinho no Real Madrid não ia ganhar nenhum troféu, já imaginou a discussão que um assunto destes geraria? Claro que este tipo de artigos só funcionam se bem fundamentados.

Um outro exemplo que criar um artigo polémico é escolhendo um produto sobre o qual tenha uma má experiência / razão de queixa, claro que o produto deve estar relaciona com os seus nichos,  e escreva a sua experiência com esse produto. Essa história deve ser 100% real, caso contrário pode ter problemas com o fabricante. Como pode imaginar, quanto mais utilizado o produto for maior será a polémica que o artigo ira gerar.

Atenção: Embora este método seja um dos que mais resultados traz em termos link build, evite sempre que possivel usa-lo de forma inadequada.

3. USE AS REDES SOCIAIS

Já aqui falamos do grande potencial das redes sociais, inclusive já escrevemos um artigo de como criar uma página de fãs no facebook. No entanto não me canso de o dizer, as redes sociais tem um enorme potencial e quando bem aproveitado trazem resultados excelentes. Por isso deve sempre que possivel criar uma página de fãs no facebook e uma página no twitter para o seu site / blog, essas são as duas redes sociais mais importantes.

A grande vantagem das redes sócias é que você só necessita de por a “bola de neve a rolar”, depois disso ela não para de crescer e a quantidade de links para o seu site assim como o tráfego disparam.

Sugestão: Ao criar uma página de fãs no facebook evite usar só o nome do seu site, por exemplo nos aqui no webmasterajuda não usamos “webmasterajuda.com” mas sim “WebmasterAjuda – Torna-te um Webmaster Profissional“, use um nome para a página de fãs que descreva o seu site.

4. LISTA DE POSTS

Esta é mais uma excelente dica de como criar links de qualidade, com esta técnica você pode gerar trafego para os seus artigos mais antigos assim como conseguir links, esta técnica consiste em construir um artigo com vários links, como por exemplo “Os 5 melhores artigos para iniciantes”.

Esta tecnica pode ser usada no artigo no seu blog, ou em artigos publicados em directórios de artigos ou ate mesmo em artigos pagos em outros blogs.

5. CONSTRUA UM BLOG

Esta forma de conseguir backlinks é bastante útil para empresas que trabalham online, com um blog você consegue direccionar tráfego para o seu site através de artigos que publique no blog relacionados com o seu nicho, podendo depois tornar esse trafego em clientes. Com o blog consegue também backlinks de qualidade para o seu site. Poderá estar interessado também em ler como ter sucesso com a sua empresa.

6. ESCREVA ARTIGOS SOBRE TUTORIAIS

Você pode criar artigos com procedimentos / tutoriais, por exemplo, como instalar o wamp em windows. Esta técnica geralmente ajuda a direccionar tráfego para o seu site / blog assim como a obter bons backlinks.

7. TENHA UM SITE ÚNICO E LIMPO

Pois bem este devia ser o principio pelo qual todos deviam começar quando criar um site, mas infelizmente vemos muitos sites sem qualquer qualidade em termos gráficos na web. Quer você queira ou não, a arquitectura e o design do seu site vão pesar muito na hora de um visitante linkar o seu site. Quantos de vocês é que já linkaram um site “sujo”, mesmo que encontremos o que pretendemos nesse site dificilmente o linkamos porque simplesmente não transmite confiança.

A sugestão que deixo que é criem sites limpos e fáceis de navegar, lembrem-se “O bom design está na simplicidade” – by eu 

8. CRIE UM VÍDEO

Crie bons vídeos sobre o seu nicho, vídeos de qualidade e com conteúdo único isso vai fazer com que as pessoas assistam os seus vídeos e os linkem, desta forma terá mais e mais pessoas a assistir aos seus vídeos e como é obvio o tráfego do seu site ira aumentar e as possibilidades de obter bons backlinks também.

Se aplicar todas estas dicas acredito que o seu site ira melhorar e muito nas páginas de resultados dos motores de busca, se usar mais alguma técnica para conseguir bons backlinks não deixe de a compartilhar com os restantes leitores nos comentários.

Fonte: http://www.webmasterajuda.com/

As melhores cores para Web Designers.

Determinar a cor principal para um projeto web pode ser fácil, mas encontrar as cores que coincidem com esta cor principal já e outra historia.

Muitos projetos são bem arquitetados, mas as se as cores forem colocadas erradas seu projeto pode ir por agua a baixo. Por isso vim aqui dar uma e disponibilizar varios sites que já fazem esse trabalho para nos, assim você não se perdera mais nas cores.

Entre alguns dos melhores serviços da web de cores ferramentas na internet qualquer designers web deve favorito , ou pelo menos saber. Lista completa após salto.

Adobe Kuler

Colr.Org

Os Amantes Da Cor

Rodas Cor 4096

Color Schemer

Paleta De Cores Generator

Web 2.0 Paleta De Cores

Gerador De Esquema De Cores

ColorJack

Harmonia De Cores

Cor Blender

Color Schemer Online V2

ColorDB

Roda Cor De Acessibilidade

Cor Hunter

GenoPal

Pic2color

Bill Gates chega ao Brasil sem visto e é obrigado a deixar o país!!

Fonte: UOL


Executivo queria passar férias no estado do Amazonas e foi obrigado a voltar para os Estados Unidos por não ter visto de turista







Um incidente ocorreu na madrugada desta terça-feira (19/4), de acordo com o UOL Notícias. Bill Gates, fundador da Microsoft, foi obrigado a deixar o país após entrar no Brasil sem visto de turista no passaporte. Gates tinha a intenção de passar férias em um hotel no Amazonas quando foi notificado que deveria voltar para os Estados Unidos pela Polícia Federal.

Gates estava viajando com um grupo formado por sete funcionários da Microsoft, que foi detido na última sexta-feira (15/4) por policiais federais durante uma passeio pelo Rio Negro. O grupo não estava com Gates no momento e, segundo a PF, não tinha documentos nem autorização da marinha para navegar em águas brasileiras. O grupo foi detido por quase 12 horas e liberado com a condição de que deixariam o Brasil em três dias.

Bill Gates e seus companheiros embarcaram em uma voo com destino a Miami às 2h de hoje. Essa não é a primeira vez que o empresário passa férias no Amazonas. Em 2007 e 2009, Gates ficou em hotéis na zona rural de Manaus ou em cidades do interior do estado.

Programa de Afiliados Cursos 24 Horas





Cursos Online 24 Horas

3 coisas que você talvez não saiba sobre Dreamweaver

Existem muitas boas opções de editores de código para quem trabalha desenvolvendo para web, cada um tem o seu preferido e o defende com unhas e dentes. Dentre eles, um dos mais populares é o Dreamweaver, que eu uso há alguns anos e sempre me atendeu muito bem. Eu não trabalho no modo “layout”, pois gosto de ter controle sobre cada linha do meu código. O Dreamweaver me permite isso e ainda fornece algumas boas ferramentas para me ajudar. Para aqueles que como eu usam o Dreamweaver para escrever seu código, aqui vão 3 boas idéias que podem melhorar ainda mais a sua experiência.

Organização e padronização do código

Se você trabalha em um lugar onde freqüentemente precisa editar código escrito por outras pessoas sabe como é ruim e contra-produtivo pegar um HTML, CSS ou PHP mal organizado, sem indentação e nenhum comentário. Isso pode trazer muitas dores de cabeça e fazer uma simples alteração virar um inferno.

Saiba que o Dreamweaver tem um comando muito interessante para resolver esse problema: Commands > Apply Source Formatting. Por mais bagunçado que esteja o código, basta um clique neste comando e o Dreamweaver vai deixá-lo perfeitamente estruturado, indentado e muito mais fácil de ler e entender. Vale a pena até adotar como padrão para a sua empresa, já que não dá trabalho nenhum e permite que todo mundo entregue código com a mesma formatação. Funciona com códigos HTML, CSS, PHP, JavaScript e muitos outros.

Criação de aplicativos AIR

Você já deve saber do incrível potencial que aplataforma AIR da Adobe representa para desenvolvedores e provavelmente já deve até usar algum aplicativo desenvolvido com ela, como por exemplo TweetDeck, Grooveshark e NYTimes Readersó para citar alguns. Se ainda não sabe, sugiro que vá pesquisar agora mesmo. Principalmente porque em breve boa parte dos celulares Android serão compatíveis com aplicativos AIR.

Pois bem, ao contrário do que muitos pensam, aplicativos AIR não precisam ser necessariamente desenvolvidos com Flash ou Flex: você também pode usar HTML, CSS e imagens para criar um App e fazer a comunicação com banco de dados via AJAX. Acredite, é extremamente fácil. Tudo o que você precisa fazer é baixar a extensão AIR para o seu Dreamweaver (fornecida gratuitamente pela Adobe). Com ela você vai poder empacotar todos os arquivos usados no seu app (HTML, imagens, CSS, JS) num único instalador AIR e distribuir para download. Eu já testei e é algo sensacional, recomendo este pequeno tutorial (em inglês): Create your first HTML-based AIR application with Dreamweaver.

Para finalizar: Ctrl+D

E como última dica separei um atalho que facilita muito a vida de quem usa o Dreamweaver para gerenciar um projeto com múltiplos arquivos linkados entre si, sejam várias páginas HTML ou arquivos relacionados (JS, CSS). Quando se tem um projeto assim é comum a necessidade de ir de um arquivo para outro, e ter que ficar navegando pela pasta para encontrar aquele arquivo para onde aponta o link é bem chato, ou mesmo ter que ficar copiando o nome, abrir arquivo, colar o nome, etc.., etc…

Então aqui vai um ótimo atalho: Ctrl+D. Toda vez que você estiver editando o código com o cursor de texto piscando sobre um link para um arquivo externo, basta pressionar as teclas Ctrl+D que o Dreamweaver abrirá automaticamente aquele arquivo, seja ele um HTML, PHP, JS ou CSS.

Fonte:http://www.toprated.com.br/3-coisas-que-voce-talvez-nao-saiba-sobre-dreamweaver