Como fazer um site
setembro 30, 2009 por Roberto João Rosa Jr.
Arquivado em Tecnologia
Vamos mostrar aqui algumas dicas para quem está iniciando no desenvolvimento de sites para a internet, estas dicas não substituem um bom curso presencial ou um ensino superior na área. Também não será um curso completo para que o leitor comece a vender serviços de desenvolvimento de sites por ai, existe um caminho longo a percorrer mas tudo se começa com o primeiro passo.
Um pouco sobre
Tipos de linguagens utilizadas
O HTML é um das mais antigas linguagens utilizadas no desenvolvimento de sites. A palavra HTML é uma forma reduzida de HyperText Markup Language e está presente na maioria dos sites.
Uma das desvantagens que influenciam os programadores a utilizarem outros tipos de linguagens como o PHP, é o fato de o HTML ser uma linguagens estática, isso que dizer que não seria possível o desenvolvimento de uma loja virtual utilizando apenas o HTML.
Linguagens dinâmicas como o PHP, ASP e CGI são utilizadas para criações de sites complexos como lojas virtuais, fóruns, sites de comunidades, etc…
Saber mexer com estes códigos não é necessário, pois editores de sites como o DreamWeaver e FrontPage permitem a criação de sites estáticos em modo visual, isso quer dizer que você vê o resultado final enquanto está trabalhando no site.
Endereço do site
Também chamado de domínio, é o nome dado ao site que ao ser digitado na barra de endereços do navegador, irá direcionar o visitante ao seu site.
Editor de sites
Os editores de sites permitem o desenvolvimento de um site de uma forma mais fácil.
Eles ajudam a gerar o código que será responsável pela apresentação do conteúdo de uma página.
Os editores de sites mais utilizados são o DreamWeaver e o Front Page.
Editor de imagens
Para criar e editar imagens a serem utilizadas em um site é necessário um programa para este fim. Dois programas amplamente utilizados por webmasters são o PhotoShop e o FireWorks.
Editor de animações
Animações de imagens necessitam de programas específicos para isso.
Os tipos de animações mais utilizados são o gif e flash.
Servidor de site
Para que um site esteja disponível aos seus visitantes, é necessário que ele seja guardado em um servidor que também é chamado de servidor de hospedagem.
Programa FTP
O envio dos arquivos de um site que você criou para o servidor é feito por um gerenciador e upload e download de arquivos.
Servidores de sites gratuitos costumam possuir um gerenciador FTP próprio. Porém para sites profissionais é recomendado o uso de um programa FTP mais completo como o FileZilla.
Estes são os requisitos básicos necessários para a criação de sites. Clique nos links contidos nesta página para saber mais sobre determinado assunto. Ou deixe um comentário com suas dúvidas.
HTML
Formato de um site em HTML:
As tags podem ser escritas em Maiúscula ou Minúscula Ex.: <html> ou <HTML>.
O Título da página aparecerá no alto da janela do browser e será referenciado em buscas pela rede. Ao ser adicionada à “Favoritos” (Bookmarks), o título será o atalho para ela.
CABEÇALHOS
O tamanho das letras ou fontes é definido pela tag <H> – “Headings”.
A tag <H> normalmente é usada em CABEÇALHOS e há seis níveis. Com esta tag você pode definir o tamanho das letras, mas não o tipo da fonte. Veja abaixo como fica:
Este é o tamanho:<H1>
Este é o tamanho:<H2>
Este é o tamanho:<H3>
Este é o tamanho:<H4>
Este é o tamanho:<H5>
Este é o tamanho:<H6>
Pode-se alinhar os cabeçalhos
<H2 ALIGN=CENTER>Texto centralizado</H2>
<H2 ALIGN=RIGHT>Texto alinhado à direita</H2>
<H2 ALIGN=LEFT>Texto alinhado à esquerda</H2>
COMO FAZER PARÁGRAFOS E LINHAS :
Não basta você teclar ENTER para que a linha vá para baixo. Você terá que colocar uma TAG para um parágrafo ou para uma nova linha.
Para parágrafo usar a TAG <P> e para linha usar <BR> Exemplo:
<P>
Primeiro Parágrafo
<BR>
Primeira Linha
<P>
Segundo Parágrafo
<BR>
Segunda Linha
Note que cada vez que você coloca a TAG <BR> estará fazendo uma nova linha, que também não deixa de ser um parágrafo.
Se você escrever sem usar as tags <BR> ou <P> o próprio browser quebra as linhas automaticamente.
ALINHAMENTO COM A TAG <P> :
Para alinhar os parágrafos basta incluir depois do “P” o parâmetro “align + tipo de alinhamento”, conforme abaixo:
COMO INCLUIR IMAGENS :
A TAG utilizada é: <img src=”nome da imagem+extensão”(gif,jpg,bmp,etc)>
Atributos da Imagem:
Veja alguns exemplos:
<img src=”zero.gif” alt=”Seu texto” border=”0″>IMAGEMAQUI
<img src=”zero.gif” alt=”Seu texto” border=”1″>IMAGEMAQUI
<img src=”zero.gif” alt=”Seu texto” border=”2″ width=”20″ height=”20″>IMAGEMAQUI
Note que no ultimo exemplo especificamos o tamanho da imagem. Não definindo este tamanho, a imagem aparecerá no tamanho original. Você pode especificar um tamanho menor do que a original, pois não acarretará perda de qualidade da imagem, mas se fizer ao contrário, isto é, definir um tamanho maior que a original perderá qualidade de imagem.
O correto é você ter a imagem do tamanho certo que deseja que apareça na página. Evite colocar imagens maiores que 50 Kb. Quanto maior a imagem mais tempo leverá para carregar.
Alinhamento texto de imagens:
Há também os atributos de moldura, que definem o espaço vertical e horizontal entre as imagens e os textos circundantes, onde:
<IMG SRC=”imagem.gif” VSPACE=espaço vertical>
<IMG SRC=”imagem.gif” HSPACE=espaço horizontal>
Ex.: <IMG SRC=”imagem.gif” ALIGN=”LEFT” WIDTH=”10″ HEIGHT=”10″ VSPACE=”50″>
<IMG SRC=”imagem.gif” ALIGN=”RIGHT” WIDTH=”10″ HEIGHT=”10″ HSPACE=”30″>
COMO FAZER OS LINKS :
Links são pontos clicáveis que levam a qualquer site da internet ou qualquer página do site e até mesmo qualquer ponto da própria página. A TAG usada é:
<a href=”nome do lugar à ser levado”>descrição do lugar</a>
Exemplos
<a href=http://www.ideology.com.br>Desenvolvimento de sites</a>
Resultado: Desenvolvimento de sites
Note que formou-se um link para um determinado site que foi descrito no código acima.
Se você clicar abrirá o referido site em uma outra janela, isto é, sem que você saia deste site, isto porque foi adicionado o atributo “TARGET”, então na verdade, para você não fechar esta janela, o código inserido aqui foi:
<a href=”http://www.ideology.com.br” target=”_blank”>Desenvolvimento de sites</a> Para fazer um link para uma outra página do seu site use:
<a href=”pagina_tal.html”>Clic aqui</a> – Note que após o nome da página é colocado a extensão .html
COMO FAZER IMAGEM COM LINK :
É simples fazer uma imagem ter um link. Ao invés de colocar o texto com a descrição do lugar, coloque a TAG de imagem. Veja o exemplo:
<a href=http://www.ideology.com.br><IMG SRC=”local, nome da imagem + extensão”></a> Sendo que:
Lembre-se: foi usado a target”_blank” para abrir em uma nova janela.
COMO FAZER LINKS PARA DOWNLOAD :
Na verdade não existe o comando específico. O que acontece é que quando criamos um link para um arquivo que o navegador não reconhece, ele automaticamente inicia o download, por exemplo, o navegador não reconhece os arquivos com extensão ZIP, EXE, RAR, etc., nestes casos ele inicia o download. Veja exemplos:
Certas extensões de arquivos fazem com que os navegadores, em vez de fazer o download, abrem com programas instalados no computador.
Se você fazer um link para um arquivo de vídeo “.avi” o navegador abrirá o programa para exibir esse vídeo. Para que isso não aconteça, sempre compacte seus arquivos para download no formato zip ou rar, por exemplo, tornando-os mais leves (menores) e download será mais rápido.
L I S T A S :
Nesta página já existem várias listas. Logo abaixo já tem outra lista com os nomes:
- Listas Ordenadas
- Listas sem ordenação
- Listas Encadeadas
Exemplos: A lista acima (Ordenada) foi feita com os seguintes códigos:
<OL> <LI> <LI> <LI> </OL> Os números são inseridos automaticamente.
Se você quiser trocar os números por letras, Ex.: A, B, C. ao invés de usar só <OL>
use <OL START=1 TYPE=A> – Onde “1″ indica para começar pela primeira letra do alfabeto.
Lista Sem Ordenação:
<UL> <LI> <LI> <LI> </UL>
Resultado:
- Primeiro item.
- Segundo item.
- Terceiro item. As “bolinhas” são inseridas automaticamente.
Listas Encadeadas:
<OL> <LI> <UL> <LI> <LI> </UL> <LI> </OL> Produz resultado misto.
META TAGS :
Após feito seu site, não basta apenas coloca-lo na internet somente com a tag título,
<TITLE> Título da página</TITLE>, é preciso que os buscadores, como o Google, Yahoo, etc “achem” o seu site, e outras informações, por isso, você deve inserir as METAS TAGS necessárias, entre <HEAD> e </HEAD> conforme abaixo:
Note que onde está escrito “palavras chaves” você deve colocar as palavras pelo qual os buscadores encontrarão seu site quando procurado na pesquisa pelo Google, Yahoo, por exemplo. As palavras deverão ser escritas em minúsculas e separadas por uma vírgula e logo após um espaço. Ex.: “bonito, fotos, casamento, dicas, downloads, etc”.
Informe do que se trata seu site, coerente com o título e as palavras chaves.
Ex.: “Site bonito, com fotos de casamento, downloads e dicas”.
Coloque seu nome, pois é ético e fornece confiança ao site.
“index,follow” – Indexa a página inicial e todas as páginas nela indicadas.
“noindex,follow” – Não indexa a página inicial, mas indexa as páginas nela indicada.
“index,nofollow” – Indexa a página inicial, mas não os links que ela indique.
“noindex,nofollow” – Não indexa nem a página inicial e nem os links.
Se é seu primeiro site, está aprendendo, use o primeiro exemplo “index,follow”.
Aconselho você que fez um site com FRAMES usar “index,follow” somente na página que você salvou como index.html, e nas outra páginas “noindex,nofollow” ou simplesmente não use essa tag nessas páginas.
Coloque em todas as páginas do site, instruindo os navegadores que seu site é feito em lingua portuguêsa.
Indique que programa usou para fazer o site, FrontPage, Bloco de Notas, etc.Indica que você escreveu normalmente seus textos nas páginas html (com acentuação, etc) sem usar caracteres especiais (ASCII), e a META TAG acima indica isto (palavras originarias do Latim).
Existe outras META TAGS, mas as principais e necessárias estão aqui.
COMO FAZER UM LINK PARA ENVIAR E-MAIL :
Código:<a href=”mailto:seuemail@provedor.com.br”>Clic Aqui</a>
Note que ao ser clicado no link (Clic Aqui), abrirá o programa que está instalado no computador, exemplo: Outlook, Incredimail, etc. Porém nem todos tem esses programas instalados, vão buscar seus e-mails diretamente nos sites, motivo pelo qual você deve sempre deixar visível seu endereço de e-mail, como abaixo:
Meu e-mail é: fulano@provedor.com.br se preferir, Clic Aqui
COMO FAZER UMA ÂNCORA :
Redirecionar um item na mesma página, isto é chamado “ÂNCORA”.
Você pode redirecionar o usuário para qualquer ponto de sua página ou para outro ponto de outra página.
O código de destino, isto é, o ponto de chegada ao ser clicado é:
Código:<a name=”ancora”>
E o código do comando “ir para” é:
Código:<a href=”#ancora”>ir para ancora</a>
Você pode criar vários pontos, como:
<a name=”ancora2″> e <a href=”#ancora2″>ir para ancora2</a>
Para fazer o usuário “Ir para o topo” não é necessário uma âncora como acima, tem um código especial para isto:
Código: <a href=”#top”>Ir para o topo</a>
Para ir à outra página:
Código: <a href=”nomedapagina.html#ancora”>ir para ancora</a>
Utilizando uma imagem como âncora:
Código: <a href=”#ancora”><img src=”imagem.jpg”></a>
Para saber mais sobre HTML: http://www.apostilando.com/sessao.php?cod=5
Depois voce deve conhecer sobre CSS que faz toda a parte de cores e formatação de texto: http://www.apostilando.com/sessao.php?cod=3
Para começar a desenvolver sistemas mais dinamicos será necessário aprender sobre PHP: http://www.apostilando.com/sessao.php?cod=8
Veja mais no youtube: http://www.youtube.com/watch?v=i2f7EB0slfE&feature=related
Lembre-se sempre que o ideal é contratar um bom designer para construir a sua identidade visual e um programador para desenvolver seu site.
Ferramentas do Google
setembro 10, 2009 por Roberto João Rosa Jr.
Arquivado em Tecnologia
Confira as ferramentas que o Google dispõe para seu site
Google Adwords:(sugestão de palavras-chave) : https://adwords.google.com.br/select/KeywordToolExternal
Utilize a Ferramenta de palavras-chave para obter novas idéias de palavra-chave.
Central do Webmaster Google: http://www.google.com.br/webmasters/
Reune todas as informações sobre como o Google rastreia e indexa sites.
Google Analytics: http://www.google.com.br/analytics/
O Google Analytics é a solução de análise da web de cunho empresarial que fornece a você uma ótima visibilidade do tráfego e da eficiência do marketing do seu website.
Google Adwords: http://www.google.com.br/adwords
Palavras-chave patrocinados. Quando as pessoas pesquisarem no Google usando uma de suas palavras-chave, seu anúncio poderá ser exibido próximo aos resultados de pesquisa.
Google Adsense: https://www.google.com/adsense/
Ganhe dinheiro com anúncios relevantes no seu site.O Google AdSense exibe anúncios relacionados com o conteúdo do seu site, e você ganha dinheiro sempre que os visitantes clicam nesses anúncios.
Se você precisar de alguma ajuda ou deseja contratar o serviço da Ideology, por favor entre em contato.
Incluir seu site em mecanismos de busca
setembro 9, 2009 por Roberto João Rosa Jr.
Arquivado em Tecnologia
Você dedicou seu tempo e dinheiro ao desenvolvimento de um site. Mesmo que ele seja excelente, apenas valerá todo o esforço empregado se ele tiver muitas visitas, e essas visitas gerarem lucros para você. Mas como conseguir isso?
No lançamento de um site a divulgação GRATIS é essencial então abaixo reunimos em uma lista os principais sites de busca onde você poderá incluir o endereço do seu site. Ao entrar no site, procure pela página de cadastro que geralmente se encontra em uma opção chamada “Adicionar site” ou “Submit your site” ou “Add url” ou similar:
Os Principais:
- Google > www.google.com.br
- Microsoft, MSN > http://www.bing.com/docs/submit.aspx
