Bruno Dulcetti



Arquivos:

Categorias:

  • Amizade:

  • Artigos

  • Links:

    O meu, o seu, o nosso espaço!

    » Meta Tags. Quais e como utilizar na sua página.

    E ae cambada.

    Hoje falarei sobre a utilização das meta-tags em sites, blogs, etc. É uma utilização simples, mas que muitas pessoas têm duvidas sobre como proceder, quando utilizar tais metas, entre outras dúvidas.

    Tentarei falar sobre algumas das principais metas, pelo menos em minha opinião. Mas claro que vocês podem comentar sobre outras metas tags, outros tipos de funcionamento ou algum erro descrito por aqui.

    O que são essas metas tags?

    São parâmetros dentro do html, que foram criados para facilitar a vida dos buscadores web (Google, Yahoo, MSN, etc), incluindo-os nos seus respectivos bancos de dados. Com elas você também pode assinar o site que você criou, fazer redirecionamentos, entre outras coisas.

    Sucesso! Mas como devo utilizá-las?

    Mole, mole. Coloque-as entre as tags <head> e </head> da sua página HTML.

    E quando devo utilizá-las?

    Sempre, pelo menos é a minha opinião 😀 Em todas as páginas devemos colocar as metas tags, tanto páginas principais quanto páginas internas. Sua inclusão auxilia e ajuda na aparição nos buscadores web.

    Hmmm… Legal Bruno, mas poderia explicar melhor?

    Claro, claro. Tentarei explicar um pouco melhor sobre as metas tags, cada uma delas, pelo menos as principais que irei explica aqui.

    Explicações Gerais:

    A tag meta tem um atributo obrigatório, o content. Este atributo recebe o conteúdo em texto, etc. O seu conteúdo refere-se a outro atributo, que pode ser o name ou o http-equiv, por isso que é a único obrigatório.

    Pra entender melhor, dois atributos seriam obrigatórios, o content mais o atributo name ou o atributo http-equiv.

    Atributos Opcionais

    São três os atributos opcionais:

    • http-equiv: Seus valores podem ser content-type, expires, refresh e set-cookie. Seus valores, geralmente influenciam no conteúdo do site, redirecionamento, etc.
    • name: author, description, keywords e generator. Seus valores influenciam nos buscadores, informações sobre a construção do site, etc.
    • scheme: atributo pouco utilizado e pouco comentado. Com ele você definir o tipo de conteúdo inserido no atributo content. Por exemplo, você define:

      <meta name="DC.identifier" content="http://www.brunodulcetti.com/" scheme="URL" />
      Este exemplo eu estou dizendo que o atributo name que recebe DC.identifier, recebe o conteúdo como uma URL, definido no atributo scheme e pega o valor do atributo content, que no caso é meu site.

    Agora lá vem as metas tags que utilizam o atributo http-equiv.

    As meta-tags que contenham o atributo http-equiv são usadas para controles corresponde ntes as chamadas HTTP. Alguns buscadores não diferenciam os valores nos atributos “name” ou “http-equiv”.

    <meta http-equiv=”expires” content=”Tue, 17 Oct 2006 06:16:00 GMT” />

    Utilizado para informar ao navegador quando a página expirará. Seu uso também pode referir-se ao cache do usuário, por exemplo, se a página expirou, o navegador fará uma nova requisição no servidor, com isso, fazendo um novo “download” da página.

    Você pode colocar um valor 0 (zero), que fará com que o navegador SEMPRE faça uma nova requisição, ignorando o cache.

    Também serve para os buscadores validarem a página, que faz com que os buscadores atualizem o conteúdo do site dentro dos registros do BD dos próprios.

    <meta http-equiv=”content-type” content=”text/html; charset=UTF-8″ />

    Essa é velha conhecida da galera (pelo menos deveria 😉 ). Ela diz qual o conjunto de caracteres será utilizado dentro da página.

    A parte do content, temos o tipo de conteúdo da página. No caso acima, citei o html, temos também o application/xhtml+xml e o application/xml, que significam respectivamente a utilização do xHTML com XML e apenas o XML na página.

    No charset, você define a codificação do conteúdo da página. O mais comum é o iso-8859-1, mas temos também o UTF-8 que é bastante utilizado e foi o que eu utilizei no exemplo.

    <meta http-equiv=”refresh” content=”3;URL=http://www.brunodulcetti.com/index.php” />

    Alguns desconhecem este recurso, muitas pessoas às vezes querem fazer um refresh na mesma página ou então fazer um redirecionamento para uma nova página. Vemos isso em sites de notícias que são atualizados num pouco espaço de tempo, sites que mudaram o endereço e redirecionam para a url correta, entre outros exemplos.

    Isto pode ser feito com apenas uma linha. Primeiro vemos o valor Refresh, que nem preciso explicar o que é isso 😉 , depois temos o atributo content, que contém um número, neste caso o número 3, que significa a quantidade de segundos que o site esperará até ser feito o refresh novamente. Depois vemos, dentro do atributo content, um sub-atributo URL, que dirá a página que será chamanda. Pode ser a mesma, caso seja o exemplo da página de notícias, ou uma nova, caso seja a mudança de url do site.

    <meta http-equiv=”content-language” content=”pt-br” />

    Conhecida pela maioria dos desenvolvedores também. Esta serve para referenciar a linguagem do conteúdo da página.

    Ajuda bastante nos buscadores que possuem diferentes idiomas (como o Google), que vão direcionar a página no idioma que ela se refere. Ajuda também caso o idioma citado tenha acentuação (Nosso Português, por exemplo), corretores ortográficos, etc.

    Uma breve listagem de idiomas:

    • pt-br: Português do Brasil;
    • en: Inglês
    • es: Espanhol

    Entre muitas outras.

    Concluindo Parte I

    Temos outros valores, mas apenas comentei sobre os principais, em minha opinião.

    Agora algumas das metas tags que utilizam o atributo name.

    As meta-tags com o atributo name são utilizadas para outros tipos de controles que não correspondem às chamadas HTTP.

    <meta name=”description” content=”Aqui vem a descrição do seu Site” />

    Essa é velha conhecida da galera também. Aqui você coloca uma breve descrição do seu site. Muitos tentam ser “malandros” e colocam enormes descrições, mas não sabem que os buscadores limitam-se a ler cerca de 200 caracteres, descartando e dificultando o posicionamento de sites com mto conteúdo nessa tag.

    <meta name=”keywords” content=”css, artigos, xhtml, php, webstandards” />

    Outra velha conhecida, mas que têm suas limitações que muitos desconhecem. Já vi alguns sites que recomendavam a utilização de várias palavras, enchendo, lotando de “tags”. Mas poucos desconhecem que é recomendado apenas a utilização de 3 a 5 palavras, variando de página a página.

    Os buscadores reconhecem quando o site utiliza muitos e o considera um “burlador”, digamos assim, fazendo com que perca posições.

    É bom também colocar diferentes palavras dentro das páginas, mas TODAS que sejam referentes ao conteúdo do site, pois o buscador poderá “puni-lo” por tal ação.

    <meta name=”robots” content=”index,follow” />

    Esta meta tag é muito importante, porém, alguns não saibam disso. Essa meta tag que irá dizer se seu site ficará visível nos sites de busca ou não.

    Mas por que eu não iria querer não indexar meu site?

    Seu site pode ser, às vezes, em frames :o, ou então é aberto em uma popup, entre outras opções. Não seria legal essa página dentro da popup ou frame, aparecer fora da página “mãe” correto?

    Temos a seguinte listagem de valores para o atributo content:

    » index,follow
    Esta opção faz com que a página que contenha esta meta tag e as urls referenciadas nelas, sejam indexadas pelos buscadores.
    » noindex,follow
    Com esta, você indexa, somente, as urls referenciadas na página, não indexando ela própria.
    » index,nofollow
    O contrário da anterior. Somente a página que contém esta meta tag será indexada, fazendo com que as urls referenciadas nela não sejam indexadas.
    » noindex,nofollow
    Não indexa nenhuma das páginas, nem as urls referenciadas e nem ela própria. (*)
    » noarchive
    Esta opção faz com que os buscadores não armazenem uma cópia do seu site em cache. Sua utilização requer um pouco de cuidado, pois uma vantagem em não utilizá-la, é que caso seu site fique fora do ar por algum problema, ele ainda continuará sendo indexado, mas caso escolha utilizá-la, automaticamente é retirado. Vemos isso várias vezes no Google, por exemplo, que páginas continuam indexadas e quando clicamos, dá o famoso erro 404.

    (*): Você pode também escolher qual site irá indexar ou não o seu site basta saber o “nome” do bot. Segue um exemplo abaixo do Google.

    <meta name="googlebot" content="noindex,nofollow" />

    Neste caso, somente o Google não indexará o seu site. Mas convenhamos, quem vai querer fazer isto? 😉

    Pesquisei sobre a utilização dessa meta tag e ouvi falar que é bom, os buscadores “dão valor” para quem diferencie corretamente as páginas. Por exemplo, na sua página principal, vc quer indexá-la logicamente, mas uma página de contato, por exemplo, não é tão interessante, a página de obrigado desta página de contato, etc.

    Os buscadores “enxergam” que você diferencia e sabe utilizar tais recursos e podem melhorar seu posicionamento, etc.

    <meta name=”author” content=”Bruno Dulcetti” />

    Nesta referência, você coloca o autor da página criada, no caso você 😉 É uma forma de mostrar que você fez o site, etc. Nem todos olham o código-fonte da página, mas nem por isso não devemos levar em conta que não seja válido colocar 😉 É bom lembrar também que os buscadores levam em conta os termos que estejam na página, portanto, se seu nome aparece nos 50 sites que você criou, são 50 referências para o seu nome e isso conta para eles.

    <meta name=”generator” content=”Notepad” />

    Opcional, geralmente colocado automaticamente pelos programas geradores de código (Dreamweaver, Home Site, Front Page, etc). Não faz nada demais, só mostra qual Software utilizado para a construção da página.

    <meta name=”revisit-after” content=”01 days” />

    Não muito utilizada hoje em dia por causa dos spammers nos buscadores, mas era uma tag bem utilizada e considerada importante antigamente.

    Você ajusta a quantidade de dias que os buscadores re-visitariam sua página para atualizar os dados contidos nela.

    <meta name=”reply-to” content=”seu@email.com” />

    Completamente opcional também. Aqui você adiciona seu e-mail para contato. Mas como o author, só funciona quando vemos o código-fonte da página.

    Não recomendo muito sua utilização, pois com esses programas que capturam e-mails para envio de spam, seu e-mail pode acabar ficando mais vulnerável a esses programas.

    Concluindo

    Antigamente, a utilização das meta-tags era crucial, os buscadores levavam em conta, principalmente a utilização delas, não tinham muitos critérios, etc.

    Hoje em dia, nós sabemos que um código semântico, sendo utilizado corretamente, com boas linkagens para ele, ser “popular” digamos assim, o conteúdo em si, vale muito mais hoje em dia que as meta tags.

    A utilização ajuda, não deixem de utilizá-las, mas não pensem que apenas colocando um description e um keywords, você verá seu site em primeiro lugar no Google.

    Finalizando

    Bem, é isso. Deixarei aqui, um código com as meta tags que acho importantes na criação de um site. Claro que isso pode variar de site pra site, página pra página, de desenvolvedor pra desenvolvedor e de opinião pra opinião. Estou apenas deixando a minha.

    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <meta http-equiv="content-language" content="pt-br" />
    <meta name="description" content="Aqui vem a descrição do seu Site" />
    <meta name="keywords" content="css, artigos, xhtml, php, webstandards" />
    <meta name="robots" content="index,follow" />
    <meta name="author" content="Bruno Dulcetti" />

    Espero que tenha ajudado a alguém aqui com mais esse artigo 😀

    Akele abraço ae.

    [BBL]artigos, criações, desenvolvimento, dicas, html, meta, programação, tags, tutorial, xhtml, webstandards[/BBL]

    [ 18/out/2006 às 12:26hrs ] [ Por Bruno Dulcetti ] Comentários 134 Comentários |

    Categorias: Artigos,Criações,Webstandards

    » Deixando seu menu com uma opção realçada de acordo com a Seção

    E ae galera… Agora estou aqui não para mostrar sites ou vídeos, mas finalmente para o primeiro artigo dentro da nova versão do Blog 😀

    Estava conversando pelo Gtalk com o Lucas Ferreira sobre webstandards, javascript, etc, quando ele me perguntou:
    ” – Ae Dulcetti, por que você não cria um tutorial sobre como deixar o menu selecionado? Não é difícil não usa js nem nada.”

    Ok Lucas, não foi exatamente isso, mas foi por ae ok? 😀

    A Idéia

    Se vocês verificarem no meu portfólio, viajando pelo menu, verão que cada seção que é aberta, o seu respectivo botão fica selecionado.

    Podem ir lá ver, eu espero… 😀

    Então, para utilizar algo parecido é fácil, você precisaria somente colocar uma classe no link da página referente e está tudo pronto.

    Mas se caso você tiver um site grande, que você precisa colocar includes, para caso haja uma modificação, você naum precise ficar modificando em cada página? A coisa complica não é verdade?

    Por isso estou mostrando esta técnica, para resolver esse probleminha.

    As técnicas utilizadas

    Você não precisa de praticamente nada. Nada de javascript, nada de linguagens dinâmicas nem nada disso. Claro que estarei utilizando includes PHP

    Mas então o que eu preciso Bruno?

    CSS, somente isso… E HTML logicamente 😉

    Mas como isso Bruno?

    Mole mole… E explicarei isso agora 😉

    Mão na massa

    Primeiramente eu mostrarei o código, pra em seguida explicar como que foi feito. Lembrando que não explicarei coisas básicas, como tenho feito anteriormente. Caso não saiba algum comando, temos o W3Schools que é uma ótima referência.

    Primeira Parte – HTML

    Vou mostrar abaixo, o código HTML criado para este exemplo:
    <? include 'head.php'; ?>
    <body id="bodyPrimeira">
    <div id="geral">
    <? include 'menu.php'; ?>
    <div id="conteudo">
    <h1>Título H1</h1>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed id ligula. Nunc dapibus, purus quis commodo suscipit, felis risus ultricies pede, ut aliquet lacus mi at nibh. Sed condimentum. Aliquam in sem. Curabitur ornare, mi eu auctor laoreet.</p>
    <h2>Título H2</h2>
    <p>Etiam laoreet pulvinar sem. Sed massa enim, vulputate eget, feugiat blandit, sollicitudin in, mauris. Fusce vestibulum. Nullam elementum. Etiam erat est, interdum vel, ornare ultricies.</p>
    <h3>Título H3</h3>
    <p>Quisque convallis fringilla tortor. Duis tortor diam, placerat semper, fermentum sed, commodo id, magna. Nulla auctor hendrerit ante.</p>
    </div>
    <div id="rodape">Copyright &copy; 2006 - <a href="http://www.brunodulcetti.com/blog/">BrunoDulcetti.com</a></div>
    </div>
    </body>
    </html>

    Não reparem mas utilizei um código parecido com o artigo Menu em Abas sem utilizar imagens. Utilizarei o mesmo código, tanto do CSS quanto do HTML.

    Vamos entender as partes que interessam?

    Vamos sim:

    <? include 'head.php'; ?>

    Isto é um include. Quem trabalha com web já conhece este termo e já deve saber como utilizá-lo (pelo menos eu espero).

    Neste include eu chamo a página head.php, que irá conter o cabeçalho da página, etc.

    <? include 'menu.php'; ?>

    A mesma coisa que o anterior, só que agora chamará a página menu.php, que contém o código do menu que veremos mais a frente.

    <body id="bodyPrimeira">

    Aqui está a novidade, o id dentro da tag <body>. Muita gente desconhece esta técnica e que é possível, é validado, etc. Ela será primordial para a montagem da técnica e a referência para o menu.

    Segunda Parte – Os Includes

    No total temos dois includes, o head.php e o menu.php. Mostrarei os dois, mas falarei somente do segundo, pois o primeiro é apenas um head normal.

    head.php

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Deixando seu menu com uma opção realçada de acordo com a Seção</title>
    <link rel="stylesheet" type="text/css" href="estilo.css" />
    </head>

    Não perderei tempo explicando essa parte do código, pois quem já mexe com html sabe muito bem o que quer dizer cada linha ok?

    menu.php

    <div id="menu">
    <ul>
    <li class="primeira"><a href="#" class="menuPrincipal">Principal</a></li>
    <li><a href="#" class="menuEmpresa">Empresa</a></li>
    <li><a href="#" class="menuServicos">Serviços</a></li>
    <li><a href="#" class="menuPortfolio">Portfólio</a></li>
    <li><a href="#" class="menuContato">Contato</a></li>
    </ul>
    </div>

    Uma lista não ordenada, com suas respectivas li’s. O que importará nessa parte do código são as classes dos links dentro dos li’s: menuPrincipal, menuEmpresa, menuServicos, menuPortfolio e menuContato. No css vocês entenderão melhor o seu funcionamento.

    Terceira Parte – CSS

    É no css que vamos fazer o funcionamento do efeito, ele que definirá quando o evento será executado.

    * { margin: 0; padding: 0; }

    body {
    text-align: center;
    font: 70% "Trebuchet MS", Verdana, Arial, Tahoma;
    background-color: #F1F1F1;
    color: #666666;
    }

    ul { list-style: none; }
    p { margin-bottom: 10px; }
    h1 { margin-bottom: 5px; color: #69A90A; font-size: 170%; }
    h2 { margin-bottom: 2px; color: #81C281; font-size: 150%; }
    h3 { color: #709AFE; font-size: 130%; }

    /* ESTRUTURA */
    #geral {
    margin: 10px auto;
    width: 750px;
    text-align: left;
    }

    #conteudo { background-color: #FFF; color: #666; padding: 10px; }
    #rodape { text-align: center; padding: 10px; }
    #rodape a { color: #54A4FC; }
    #rodape a:hover { text-decoration: none; }

    /* MENU */
    #menu ul { height: 1%; display: table; }
    #menu ul li { float: left; margin: 0 4px; }
    #menu ul li.primeira { margin-left: 0; }
    #menu ul li a {
    display: block;
    float: left;
    padding: 5px 12px;
    background-color: #CCC;
    color: #FFF;
    font-weight: bold;
    }

    #menu ul li a:hover { background-color: #FFF; color: #999; text-decoration: none; }

    /* ID BODY */
    #bodyPrincipal #menu ul li a.mnuPrincipal,
    #bodyEmpresa #menu ul li a.mnuEmpresa,
    #bodyServicos #menu ul li a.mnuServicos,
    #bodyPortfolio #menu ul li a.mnuPortfolio,
    #bodyContato #menu ul li a.mnuContato { background-color: #FFF; color: #999; text-decoration: none; }

    Explique agora Bruno

    Bom, explicarei aqui, somente o que não expliquei no artigo do menu sem abas. Se quiser mais explicação de cada parte desse código css, veja o post Menu em Abas sem utilizar imagens. Lembrando que estou utilizando a mesma estrutura do css e praticamente a mesma no html ;).

    A parte que mais nos interessa é o código abaixo:

    #bodyPrincipal #menu ul li a.mnuPrincipal,
    #bodyEmpresa #menu ul li a.mnuEmpresa,
    #bodyServicos #menu ul li a.mnuServicos,
    #bodyPortfolio #menu ul li a.mnuPortfolio,
    #bodyContato #menu ul li a.mnuContato { background-color: #FFF; color: #999; text-decoration: none; }

    Neste bloco de código, temos cinco elementos recebendo as três propriedades: background-color: #FFF; color: #999; text-decoration: none;

    Se vocês perceberem, as propriedades são as mesmas do hover do link. Preferi colocar separadamente para melhor compreensão de todos. Caso queiram mudar, fiquem à vontade ok? 😉

    Vou pegar agora uma delas pra explicar melhor, porque as outras são exatamente a mesma coisa, só modificando os nomes.

    #bodyPrincipal #menu ul li a.mnuPrincipal

    Vamos listar por partes:

    • #bodyPrincipal: Este é o id que setamos no body da página.
    • #menu ul li: Aqui estamos referenciando o menu e sua lista não-ordenada e seus respeticos li’s.
    • a.mnuPrincipal: Aqui referenciamos os links dentro do li, que tenham a classe mnuPrincipal.

    E isso eh expandido quando setamos várias outras citações, como foi o caso. É só colocarmos o id correto no body de cada página, como está sendo feito em todas as páginas deste efeito.

    Na parte das classes dos li’s é que fará a diferença, como citei anteriormente. Caso não fosse setado nenhjuma classe, ele simplesmente pegaria todos os links de todas as li’s e deixariam marcado… É uma união do id do body com a classe do menu… 😉

    Quarta Parte – Resultado Final

    Aqui nós podemos ver o resultado final desta técnica. Viaje pelos links no menu, veja que o menu realçado modifica de acordo com a seção selecionada. Perceba também, que o código é o mesmo, a não ser pela mudança do id do body ;).

    Finalizando

    Vimos que é bem fácil fazer isso. Aposto que você pensou que fosse mais complicado não é verdade?

    Usamos declarações básicas dentro do css e do html, nada de muito avançado. Mas qualquer dúvida, é só postar.

    Aquele abraço

    [BBL]artigos, css, xhtml, webstandards, tutorial, usabilidade, dicas[/BBL]

    [ 18/set/2006 às 15:05hrs ] [ Por Bruno Dulcetti ] Comentários 17 Comentários |

    Categorias: Artigos,CSS,Webstandards

    » Conditional Comments ou Comentários Condicionais

    Falae galera, tranquilidade? Aqui tudo blz como sempre, bastante trabalho, cansado, mas faz parte naum eh verdade?

    Bom, antes de eu comentar sobre o assunto, adianto para vocês que semana que vem entra a nova versão do meu Blog/Portfólio. Modifiquei um bocado de coisa, agora ele é líquido, estou utilizando alguns recursos em ajax, atualizei algumas informações como onde estou morando, que no atual ainda mostra Niterói :D.

    Ela já esta pronta, só falta eu modificar algumas coisas no Banco de Dados e adicionar o tema aqui no Word Press.

    Falando em Word Press, atualizei ontem para o Word Press 2.0. E digo, ele é bem melhor que o 1.5, vários recursos interessantes, o Akismet jah vem instalado bastanto somente ativá-lo, entre outras vantagens.

    Chega de conversa Bruno e vamos ao assunto?

    Ok, ok, naum precisa ficar bravo 😀

    Hoje falarei sobre os Conditional Comments ou Comentários Condicionais.

    Creio que muitos que frequentam esse Blog sabem que a Microsoft está lançando i.e.7 e tem versões betas por ae. A equipe que está participando da produção da nova versão do browser comentou em seu Blog para que os desenvolvedores naum utilizassem hacks do tipo:

    • html > body
    • * html
    • head:first-child + body
    • head + body
    • body > element

    Caso seja feita a utilização de um deles, o site poderá ser mal renderizado no browser, com isso, complicando a vida pro desenvolvedor. Pra variar o ie faz isso, normal… 😀

    E no Blog, o pessoal da Microsoft aconselhou a utilização dos Conditional Comments ou Comentários Condicionais, que são comentários no código HTML que somente o i.e. reconhece e os outros browsers consideram como um comentário.

    Ah sim… Legal… Não entendi!?

    Tranquilo. Com os tipos e exemplos, você entenderá perfeitamente sobre essa técnica. Primeiro vou mostrar abaixo os diferentes tipos de Conditional Comments:

    » Este serve como como um “Se for IE faça”:

    <!--[if IE]>
    <![endif]-->

    » Este serve como como um “Se for superior ao IE 5 faça”:

    <!--[if gt IE 5]>
    <![endif]-->

    » Este serve como como um “Se for IE 5 ou superior faça”:

    <!--[if gte IE 5]>
    <![endif]-->

    » Este serve como como um “Se for anterior ao IE 5.5 faça”:

    <!--[if lt IE 5.5]>
    <![endif]-->

    » Este serve como como um “Se for IE 6 ou anterior faça”:

    <!--[if lte IE 6]>
    <![endif]-->

    A mudança de um para o outro, além das versões dos browsers, são as letras:

    • gt: greater than ou maior que o browser setado
    • gte: greater than or equal to ou maior ou igual ao browser setado
    • lt: less than ou menor que o browser setado
    • lte: less than or equal to ou menor ou igual ao browser setado

    Cole um destes exemplos no Dreamweaver por exemplo. Você verá que ele deixará cinza, como se fosse um comentário, isto por causa do início do código: <!– ; e o final do código: –>

    Para os que não conhecem (o que eu acho muito difícil), esse eh o modo de se fazer comentário dentro do HTML. Mas a Microsoft implementou essa funcionalidade em seu browser, o i.e.

    Legal Bruno, mas continuo sem entender direito =/

    Relaxa, vamos ver agora isso no HTML para que você entenda melhor a utilização. Veja abaixo o código HTML ou então verifique o exemplo online:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Comentários Condicionais</title>
    <style type="text/css">
    body {
    margin: 10px;
    padding: 3px;
    color: #666;
    background-color: #fff;
    font: 75% Verdana;
    }
    </style>
    <!--[if lte IE 6]>
    <style type="text/css">
    body {
    background-color: #000;
    color: #FFF;
    }
    </style>
    <![endif]-->
    </head>
    <body>
    Texto de exemplo
    </body>
    </html>

    Não utilizei muitas propriedades no CSS porque estou com preguiça de ficar explicando cada linha ok? 😀

    Vou comentar cada parte q utilizei, que convenhamos, naum tem nada de complicado ;). A única coisa diferente é o comentários condicional mesmo.

    Vocês podem perceber que no Internet Explorer 6 ou anterior, o fundo ficou preto e a fonte branca e nos restantes dos browsers o fundo ficou branco e a fonte cinza.

    No CSS eu setei para a tag <body> que ela tenha 10px d margem em todas as direções, padding de 3px em todas as direções, cor de fundo branco, cor da fonte cinza #666 e fonte verdana com 75% do tamanho padrão do Browser.

    Blz Bruno, isso eu vi, essa parte eu entendi. Mas e o resto?

    Agora comentarei sobre o comentário condicional utilizado: <!–[if lte IE 6]> que como vimos acima, quer dizer “igual ou anterior ao ie 6”.

    Com isso, o ie 7 não será afetado com as propriedades setadas dentro dessa condição. Dentro dessa condições eu coloquei a cor de fundo preta e a cor da fonte como branca. Lembrando que, como eu não modifiquei a margin, padding e font, elas continuarão como na primeira setagem, pois na anterior, todos os browsers entendem. É como na utilização dos hacks. 😉 Ele só modificará o que você deixar dentro do “setagem” no CSS.

    Podemos utilizar qualquer uma das versões que eu citei anteriormente, com a versão do browser que você necessita. Lembrando que não funciona em versões abaixo do ie 5.

    Variações na utilização

    Vocês devem estar perguntando agora pra mim “Mas Bruno, você está utilizando o CSS incorporado no html!”.

    Sim, sim, mas pode ficar calmo. Foi só um exemplo para melhor compreensão. Vocês podem colocar a tag <link> ou a <style> dentro da condição, que funcionará da mesma forma. Veja abaixo o exemplo ou confira online:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Comentários Condicionais</title>
    <link rel="stylesheet" type="text/css" href="normal.css" />
    <!--[if lte IE 6]>
    <link rel="stylesheet" type="text/css" href="ie.css" />
    <![endif]-->
    </head>
    <body>
    Texto de exemplo
    </body>
    </html>

    Neste exemplo, utilizei a tag <link> dentro do <head> e dentro da condição. Dentro do <head> eu chamei o arquivo normal.css, que serve para todos os browsers e temos tb o arquivo ie.css que serve somente para o i.e. e está dentro da condição.

    Neste exemplo, ele faz a mesma coisa que o exemplo anterior, mas ao invés do CSS estar incorporado, estou chamando via <link>.

    Cuidados

    Tenha cuidado na sequência que você coloca os comentários condicionais. Eles SEMPRE deverão vir DEPOIS da chamada para todos os browsers. Isso faz com que os comentários condicionais sobrescrevam o CSS anterior. Caso eles sejam colocados ANTES, naum adiantará nada, pois a tag <link> fora do comentário condicional irá sobrescrever.

    E finalizando…

    Pra finalizar, queria dizer q os exemplos mostrados aqui são só de exemplo. Naum creio que vocês irão utilizar um site com fundo diferente para internet explorer, etc.

    Também naum pensem que vocês só podem mudar cores, bordas, etc… Podem mudar o que quiser dentro do CSS, fica por conta de vocês.

    Geralmente, os comentários condicionais são utilizados para resolver bugs no i.e. como box models, problemas de margin e padding, entre outros exemplos.

    Um beijo do magro

    Bom galera, espero ter ajudado e tirado algumas dúvidas de quem de repente tenha. Espero que tenham gostado.

    Esperem por semana que vem… Tchanaaaaaaaaam… uahuahuhahauhau

    Akele abraço.

    [ 04/ago/2006 às 15:00hrs ] [ Por Bruno Dulcetti ] Comentários 11 Comentários |

    Categorias: Artigos,CSS,Webstandards

    » Novo Artigo

    Falae pessoal. Mais uma vez sumido, fazer o que né. Mas estou aqui novamente e pra falar sobre duas coisas. A primeira é sobre eu ter colocado uma regra de aprovação nos comentários aqui no meu Blog, mas foi porque de um tempo pra cá, mais de um mês +ou-, tem uns spammers malditos enviando por dia uns 50, 100 comentários por dia pro meu Blog. É uma coisa bem irritante, por isso coloquei essa parada de aprovação. Eu já vi como tirar, providenciarei essa semana pra colocar isso e reativarei os comentários como eram antes.

    A outra notícia, é que eu descobri essa semana que passou, que meu artigo postado aqui no Blog, o Menu em Abas sem utilizar imagens, foi adicionado no iMasters. Eu tinha comentado sobre o tutorial com o Baeta, diretor do iMasters, mas passou um tempo e acabei esquecendo. Aí fui ver essa semana que ele estava lá :D. Veja o artigo agora. Já é meu quinto no iMasters e verei se escrevo mais em breve. E também verei o quanto antes, para escrever aqui também… 😉

    Bom, fico por aqui. Aquele abraço à todos. E esperem mais um pouco que já iniciei a montagem no meu novo blog/portfólio… 😀

    [ 25/jun/2006 às 22:49hrs ] [ Por Bruno Dulcetti ] Comentários 5 Comentários |

    Categorias: Artigos,CSS,Pessoais,Webstandards

    » Menu em Abas sem utilizar imagens

    Falae galera. Estou aqui de novo, mas agora pra mostrar um outro Tutorial/Artigo, de como fazer um menu com abas. Eu já tinha postado um tutorial, mas era utilizando imagens e ficava um pouco limitado, pois se aumentasse a fonte, a imagem naum iria ficar legal.

    Agora estou mostrando um novo modo de se fazer, sem utilizar imagem alguma, somente com código css. Fica com um resultado bem leve e agradável. A única coisa é que fica quadrado, o que eu não vejo problema nenhum, mas para quem é fã de arredondados, esse tutorial não se encaixa.

    Ok, vamos começar:

    Primeiro Passo

    Primeiramente eu escolhi um DOCTYPE. Escolha o que vocês quiserem, mas eu utilizei o XHTML 1.1, mas fiquem livres pelo que gostarem mais.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

    Segundo Passo

    Eu mostrarei separadamente a criação do html e do css, pois fica mais fácil de explicar cada parte. Primeiramente, mostrarei o html, coisa que eu não preciso explicar muito, pois todos aqui já o conhecem (assim espero :D). Eu soh explicarei o que estiver entre as tags <body> e </body>. Não explicarei também, as tags de fechamento, pois é desnecessário.

    Veremos primeiro a página, sem estilos nenhum.

    Vamos entender cada parte do codigo:
    <div id="geral">
    Nessa linha, teremos o div pai, que englobará todo o layout, pois fiz com um tamanho de largura fixa para seu conteúdo. Desta maneira, fica mais fácil para fazermos modificações, principalmente em posicionamento do layout.

    <div id="menu">
    Div que conterá o menu, que faremos com uma lista não ordenada, <ul>.

    <li class="primeira"><a href="#" class="selecionado">Principal</a></li>
    <li><a href="#">Empresa</a></li>
    <li><a href="#">Serviços</a></li>
    <li><a href="#">Portfólio</a></li>
    <li><a href="#">Contato</a></li>

    Nessa parte, está englobada toda a codificação do menu feito em lista e seus respectivos links. Na primeira linha, temos uma classe para o link, a selecionado, que serve para indicar em qual página estamos. Perceba também a classe primeira, dentro do primeiro <li>, que no css eu explicarei para que serve.

    <div id="conteudo">
    <h1>Título H1</h1>
    <p>Lorem ipsum dolor sit amet, consectetuer ...</p>
    <h2>Título H2</h2>
    <p>Etiam laoreet pulvinar sem. Sed massa enim ...</p>
    <h3>Título H3</h3>
    <p>Quisque convallis fringilla tortor. Duis tortor diam ...</p>
    </div>
    <div id="rodape">Copyright &copy; 2006 - <a href="http://www.brunodulcetti.com/blog/">BrunoDulcetti.com</a></div>

    Aqui, podemos ver que é o conteúdo do site, que contém três títulos, h1, h2 e h3, com seu conteúdo dentro de um parágrafo para cada título. Nenhum mistério.

    Acho que agora não preciso explicar mais nada do código, pois é bem básico e de fácil compreensão. O que eu não expliquei, foi como disse acima, são tags de fechamento, metas, etc…

    Beleza Brunaum, agora vamos estilizar isso, pq tá feio pra caramba né?

    Logicamente. Esse primeiro passo, foi somente para mostrar o código HTML e só irmos jogando o css aos poucos, para vermos o resultado final.

    O css completo, você pode verificar aqui. Bem pequeno não é verdade?

    Agora vamos vendo cada propriedade:

    Estrutura geral do body:

    * { margin: 0; padding: 0; }
    body {
    text-align: center;
    font: 70% "Trebuchet MS", Verdana, Arial, Tahoma;
    background-color: #F1F1F1;
    color: #666666;
    }

    Neste primeiro bloco, temos a primeira linha, que zera todos os margins e paddings de TODAS as tags dentro da página que contenha esse css incluído. O asterisco antes de uma propriedade, siginifica todas as tags.

    Na segunda chamada, temos a tag body sendo setada. Nela nós temos 4 propriedades declaradas:

    • text-align: center; : Esta linha declara que o texto ficará centralizado dentro do body.
    • font: 70% “Trebuchet MS”, Verdana, Arial, Tahoma; : Definimos a fonte utilizada e seu tamanho, que nesse caso foi a Trebuchet com um tamanho 70% do tamanho padrão do navegador.
    • background-color: #F1F1F1; : Definição da cor de fundo do body, que nesse caso, coloquei um cinza bem claro.
    • color: #666666; : Agora a definição da cor do texto foi definida. Coloquei um cinza escuro como cor padrão do site.

    Percebemos que não tivemos problemas nenhum (assim espero), na declaração desse bloc. É bem básico e fácil de implementar e entender.

    Estrutura das tags:

    ul { list-style: none; }
    p { margin-bottom: 10px; }
    h1 { margin-bottom: 5px; color: #69A90A; font-size: 170%; }
    h2 { margin-bottom: 2px; color: #81C281; }
    h3 { color: #709AFE; }

    Aqui temos a estruturação e propriedades de todas as tags usadas no HTML e que eu quis modificar. Nos meus arquivos css eu estruturo desta forma, pois fica de uma maneira mais organizada, correta, etc.

    Veremos abaixo, cada linha desse bloco, com suas respectivas propriedades explicadas:

    • ul { list-style: none; } : Nesta linha, declaramos que TODAS as listas não ordenadas, vulgo <ul> :D, não possuirão estilo, que seriam aquelas bolinhas, círculos e quadrados.
    • p { margin-bottom: 10px; } : Aqui, declaramos que TODOS os parágrafos terão 10 pixels de margem na base.
    • h1 { margin-bottom: 5px; color: #69A90A; font-size: 170%; } : Aqui temos a declaração do título H1, que é o título de mais importância do HTML. Nele, declaramos uma margem de 5 pixels na base, uma cor verde para o texto do título e um tamanho de fonte 170% maior do que a declarada no body, que foi de 70%.
    • h2 { margin-bottom: 2px; color: #81C281; font-size: 150%; } : Aqui, declaramos as propriedades pro título H2, que é o título de segunda maior importância. Definimos que ele terá uma margem de 2 pixels na base e uma cor verde, um pouco mais clara que a do H1, para o texto do título e o tamanho do texto.
    • h3 { color: #709AFE; font-size: 130%; } : Declaração das propriedades da tag H3, que também é um título. Esta é a mais simples, configurei somente a cor do texto, para um cor azul e o tamanho do texto.

    Neste segundo bloco, configuramos as tags, não importando sua hierarquia. Sempre que declaramos no css uma propriedade para um seletor, que esteja somente o nome da tag, que dizer que TODAS as tags, independentes se estão dentro de um identificador, classe, etc, TODAS elas, receberão aquela configuração, a não ser que mais abaixo você declare uma propriedade diferente, que fará com que o css descarte a anterior e mantenha a mais recente.

    Identificador #geral:

    #geral {
    margin: 10px auto;
    width: 750px;
    text-align: left;
    }

    Neste bloco, temos o Identificador #geral, que é o div que engloba todo o layout em si. Dentro dele, coloquei 3 propriedades:

    • margin: 10px auto; : Definindo uma margem de 10 pixels em todas as direções do div (topo, direita, base e esquerda). E também, temos o auto, que faz com que o div fique no posicionamento relativo ao browser, que nesse caso o body que setou essa propriedade com o text-align igual a center, que quer dizer que o texto ficará centralizado. No i.e. não necessita disso, pois ele reconhece que com apenas o text-align o div fique centralizado, o que é errado, pois o div não é um texto e sim um bloco, por isso a utilização do auto.
    • width: 750px; : Definindo uma largura para o div, de 750 pixels
    • text-align: left; : Como o body foi setado um text-align centralizado, todos seus filhos heram essa propriedade, que é caso do #geral, mas como estamos setando aqui um text-align igual a left, é descartado o do body e levado em conta o que têm nessa propriedade desse identificador.

    Neste terceiro bloco, nenhum problema, dificuldade não é? Três propriedades, de fácil entendimento. O único problema um pouco mais chato de ser entendido é o margin auto, pro pessoal que tem um conhecimento básico, pode ter dificuldade, mas tentei explicar ali, qualquer dúvida, é só falar.

    Estrutura do Menu:

    #menu ul { display: table; height: 1%; }
    #menu ul li { float: left; margin: 0 4px; }
    #menu ul li.primeira { margin-left: 0; }
    #menu ul li a {
    display: block;
    float: left;
    padding: 5px 12px;
    background-color: #CCCCCC;
    color: #FFFFFF;
    font-weight: bold;
    }
    #menu ul li a.selecionado, #menu ul li a:hover { background-color: #FFFFFF; color: #999999; text-decoration: none; }

    A parte mais essencial do código e mais “chatinha” de se entender. Falo isso pro pessoal que tá começando, pois creio que quem possui um conhecimento intermediário/avançado, não terá problema algum nesse bloco. Vou dividir em três blocos, um para a parte de lista e li do menu, a segunda, para os links do menu e a terceira para o estado hover do menu. Vamos lá:

    Primeira Parte

    • #menu ul { display: table; height: 1%; } : Esta propriedade, faz com que a <ul> fique com o preenchimento como uma tabela. Precisamos disso, porque os lis vão receber um float, que faz com que seu pai, que neste caso é a <ul>, não reconheça sua altura, conteúdo. Você pode substituir isso por uma propriedade height, colocando a altura do <ul>, mas eu creio que fique melhor com o display, pois você não precisa se preocupar com altura, caso tenha que modificar futuramente, ou o usuário aumente o tamanho da fonte pelo navegador, isso seria um problema, pois nos browsers decentes, o height seria mantido, independente do seu conteúdo e da forma como está, ele cresce de acordo com o tamanho. Mas como nada é perfeito, nosso amigo i.e. está ae para atraplhar. Ele não renderiza corretamente o display table, por isso, tive que colocar uma “gambiarra para o perfeito funcionamento do mesmo, colocando um height: 1%. Mais um bug do i.e., porque se você não setar nenhum valor de altura, ele não reconhecerá o display table.
    • #menu ul li { float: left; margin: 0 4px; } : Como padrão, o <li> recebe um display block, que faz com que fique um embaixo do outro. Por isso, a utilização do float left, que faz com que o <li> fique grudado à esquerda. Foi setado também, uma margem para as laterais de 4 pixels, para que elas não fiquem uma grudada na outra.
    • #menu ul li.primeira { margin-left: 0; } : Agora explicarei essa classe, que falei mais acima. Com a utilização da propriedade acima, da margem nas laterais, a primeira <li> fica mais a direita do canto do conteúdo, o que não acho muito legal. Neste classe, zerei a margem esquerda, para que a <li> que receber esta classe, fique sem margem, que no nosso caso, é a primeira.

    Simples essa parte. Nada demais, só destacaria mais mesmo é a parte do display table e a classe sem margem para a primeira <li>. Partiremos pra próxima.

    Segunda Parte

    Lembrando que aqui eu estarei listando as propriedade dentro do seletor #menu ul li a { }.

    • display: block; : Como eu não quero que o menu fique somente no texto, tenho que colocar um display block, que transforma o link, num bloco.
    • float: left; : Com a utilização do block como display, o link ficaria um em cima do outro, que não é nosso objetivo. Nós queremos um ao lado do outro e esse trabalho é feito pelo float.
    • padding: 5px 12px; : Um padding, para o conteúdo dentro do link não ficar colado nos extremos. Aqui, setei 5 pixels para a base e o topo e 12 pixels para as laterais.
    • background-color: #CCCCCC; : Uma cor cinza claro de fundo para o link.
    • color: #FFFFFF; : Definindo uma cor branca para o texto do link.
    • font-weight: bold; : Deixando o texto em negrito.

    Nenhum mistério. Só deixamos o link como block e com float, para ele ir pra esquerda. Mas ae você me pergunta: “Mas por que isso Bruno? Não poderia fazer isso no <li>?”. Sim, claro, poderia fazer sim. O único problema seria na hora do link, porque ele sem block, fica como inline, ficaria, um do lado do outro, tranquilim, mas signica que SOMENTE o texto, o conteúdo dentro do link, ficaria como link realmente. E como a pseudo-classe hover só funciona em links, isso no i.e., lógico, não conseguiriamos o efeito correto. Veja um exemplo disso. Dá pra ver o resultado não é? Pelo menos não era o que eu queria nesse tutorial.

    Agora vamos para a terceira e última parte.

    Terceira Parte

    Lembrando que aqui eu estarei listando as propriedade dentro do seletor #menu ul li a.selecionado, #menu ul li a:hover { }.

    • background-color: #FFFFFF; : Definindo uma cor de fundo branca.
    • color: #999999; : Definindo um cinza médio para a cor do texto do link.
    • text-decoration: none; : Retirando a decoração do link, que como padrão fica sublinhado.

    A única coisa de diferente nesse exemplo, é a utilização de dois seletores dentro de um bloco de propriedades. Conseguimos isso, separando os seletores por vírgula. E mais por esses seletores, é que precisamos utilizar no link, o display block, float, etc, pois ao passar o mouse, temos mudanças no link, pois fica uma coisa mais organizada, usável, pois percebem que é um link, etc.

    Identificador #conteudo:

    #conteudo { background-color: #FFFFFF; color: #666666; padding: 10px; }

    Nesse bloco, temos a configuração da área de conteúdo do site. Coisas bem básicas:

    • background-color: #FFFFFF; : Definindo cor branca para área, pois o body está com um cinza claro.
    • color: #666666; : Deixando a cor do texto como cinxa escuro.
    • padding: 10px; : Definido um padding de 10 pixels em todas as direções, para que o conteúdo não fique grudado nos extremos do div.

    Nenhum mistério também, apenas estilizando o conteúdo, para ficar no estilo e organizado.

    E finalmente, vamos para a última parte, a do rodapé.

    Estrutura do Rodapé:

    #rodape { text-align: center; padding: 10px; }
    #rodape a { color: #54A4FC; }
    #rodape a:hover { text-decoration: none; }

    Poucas coisas setadas, código bem curto, pois no rodapé não coloquei nada, além de um pequeno texto. Veremos abaixo:

    • #rodape { text-align: center; padding: 10px; } : Como o geral recebeu um text-align left, entaum o texto ficaria na esquerda, que não é o que eu queria, então centralizei. Determinei também, um padding de 10 pixels, para não deixar o conteúdo grudado nos extremos.
    • #rodape a { color: #54A4FC; } : Definindo um azul para a cor dos link que estiverem dentro do rodapé.
    • #rodape a:hover { text-decoration: none; } : Retirando o sublinhado do link, quando passar o mouse em cima. Isso, logicamente, para os links do rodapé.

    Finalizando…

    É um menu bem simples de se fazer, implementar e modificar também. Como disse anteriomente, ele fica quadrado, mas mesmo assim, acho bonito, clean, interessante, sem problema algum.

    Bom, galera, é isso, o resultado final pode ser conferido aqui. Qualquer dúvida, correção, melhora, crítica, elogio, é só comentar ae…

    Aquele abraço.

    [ 27/maio/2006 às 20:42hrs ] [ Por Bruno Dulcetti ] Comentários 22 Comentários |

    Categorias: Artigos,CSS,Webstandards

    » Palestra Online – Webstandards

    Falae galera.
    Depois de um tempo, estou aqui postando o link com a palestra online que dei via Breeze, pelo MMUG-RJ, Grupo de Usuário Macromedia/Adobe do Rio de Janeiro.

    Desculpem pela demora, eu já estava com o link, mas acabei esquecendo de postá-lo aqui ou no fórum :D. A palestra foi no dia 26/04/2006 às 14:30h, com o tema “Web standards – Truques & Dicas”.

    Chega de enrolação, assistam a palestra.

    Infelizmente não tem como fazer o download, a não ser que vocês capturem o vídeo. Tentarei fazer isso, conseguindo, posto no meu videolog.

    Aquele abraço a todos.

    [ 12/maio/2006 às 9:31hrs ] [ Por Bruno Dulcetti ] Comentários 2 Comentários |

    Categorias: Artigos,Criações,Tecnologia,Webstandards

    » Formulario em PHP

    Estava eu tranquilo, quando Leandro Cunha, camaradassa meu me perguntou sobre como fazer um formulário via PHP. Como estava no meebo e odeio esses IM via browser, achei melhor postar algo no Blog, com isso, posso ajudar possíveis pessoas que tenham dúvidas sobre o assunto.

    É muito simples sua implementação, pra quem já conhece PHP legal, já mexe, isso é mole, mas pro pessoal que tah começando agora, tah no básico ainda, vale ler (eu acho :P)

    Primeira Parte – HTML

    Primeiramente, lógico, vou postar um código html de um formulário (lembrando que não coloquei nenhum estilo pro formulário, isso fica com vocês ok? 😉 ) ver exemplo online:
    <form action="enviar_formulario.php" method="post">
    Nome:<br /> <input type="text" name="nome" />
    E-mail:<br /> <input type="text" name="email" />
    Mensagem:<br /> <textarea name="mensagem" cols="32" rows="8"></textarea><br />
    <input type="submit" value="Enviar" />
    <form>

    Como podemos ver, um simples formulário, muito feio, sem estilo nenhum. Caso queiram modificar, fiquem à vontade, coloquem fieldset, legend, labels, etc… Vou ver se em breve eu crio um tutorial de como criar um formulário estilizado e nos padrões 😉

    Creio que não precise comentar sobre o código acima, todos que estiverem lendo devem conhecer html (pelo menos espero), mas darei uma comentada:

    <form action="enviar_formulario.php" method="post">

    Nesta linha, criei a tag form, essencial, e nela coloquei o atributo action que recebe o a página onde o formulário enviará as informações dispostas nos campos do formulário. A página utilizada foi a enviar_formulario.php, mas o nome fica a critério de vocês, contanto que mude também quando criarem-na ok? 😉

    Nome:<br /> <input type=”text” name=”nome” />

    Um texto Nome:, indicando que o próximo campo é para colocar o nome, um pulo de linha, para o campo vir abaixo do texto e o input que cria o campo de texto chamado nome, que vai ser enviado pelo formulário e o arquivo php receberá como variável.

    E-mail:<br /> <input type=”text” name=”email” />

    Idem ao item anterior, só mudando para E-mail.

    Mensagem:<br /> <textarea name=”mensagem” cols=”32″ rows=”8″></textarea><br />

    Semelhante aos anteriores, mas ao invés de input, é um textarea, para receber mais informações, pois geralmente mensagens são maiores. E nele, têm 32 colunas de largura e 8 linhas de altura.

    <input type=”submit” value=”Enviar” />

    Um input com o botão de envio do formulário. É através dele que o formulário será enviado para a página php setada no action da tag form.

    Espero que tenham entendido essa parte, acho que deu pra dar uma explicadinha legalzinha sobre cada parte. Agora vamos cair dentro do arquivo php.

    Arquivo enviar_formulario.php

    <?php
    $nome = $_POST['nome'];
    $email = $_POST['email'];
    $mensagem = $_POST['mensagem'];

    $msg = "<font face='Verdana' size='1'><b>Nome:</b> \t$nome</font><br>";
    $msg .= "<font face='Verdana' size='1'><b>E-mail:</b> \t$email</font><br>";
    $msg .= "<font face='Verdana' size='1'><b>Mensagem:</b> \t$mensagem</font>";

    $mensagem = "$msg";
    $remetente = "$email";
    $destinatario = "bruno@brunodulcetti.com";
    $assunto = "Tutorial de Formulário BrunoDulcetti.com";
    $headers = "From: ".$remetente."\nContent-type: text/html"; # o 'text/html' é o tipo mime da mensagem
    if(!mail($destinatario,$assunto,$mensagem,$headers)){
    print "falha no envio da mensagem";
    } else {
    echo "<script>window.location.href='obrigado.htm'</script>";
    }
    ?>

    Bom, vamos lá, agora explicarei as linhas desse arquivo:

    <?php

    Linha de abertura de código php, sem isso, nada de php funcionando 😀

    $nome = $_POST[‘nome’];

    Essa linha, a variavel nome é criada e ela recebe o campo de texto nome, que foi enviado via método post pelo formulário, lembra? method=”post no form, agora lembra não é? 😉

    $email = $_POST[‘email’];

    Igual ao nome, mas mudando a variável para email e o $_POST[”] recebe o campo email enviado pelo formulário.

    $mensagem = $_POST[‘mensagem’];

    Igual aos anteriores, mas mudando a variável para mensagem e o $_POST[”] recebe o campo mensagem enviado pelo formulário.

    $msg = "<font face=’Verdana’ size=’1′><b>Nome:</b> \t$nome</font><br>";

    Aqui é criada uma variável msg, onde ela recebe a variável nome, que declaramos e demos o valor à ela anteriormente. A grande sacada e diferença, foi que eu usei uma tag font com a fonte Verdana como fonte padrão e tamanho 1. Fiz somente para o formulário ser enviado com mais estilo, ficar um pouco mais bonito, senão fica aquela fonte padrão feia. Mas isso fica a critério de vocês. E coloquei um br no final, para pular de linha.

    $msg .= "<font face=’Verdana’ size=’1′><b>E-mail:</b> \t$email</font><br>";

    Idêntico ao anterior, mudando somente para variável email e a variável msg recebe o valor anterior mais esse, não sobrescrevendo o valor anterior.

    $msg .= "<font face=’Verdana’ size=’1′><b>Mensagem:</b> \t$mensagem</font>";

    Idêntico aos anteriores, mudando somente para variável mensagem e a variável msg recebe os valores anteriores mais esse, não sobrescrevendo o valores anteriores.

    $mensagem = "$msg";

    Variável mensagem recebendo todo o conteúdo da variável msg.

    $remetente = "$email";

    Variável remetente recebendo a variavel email, que contém o email preenchido no formulário, que aparecerá como o remetente no webmail.

    $destinatario = "bruno@brunodulcetti.com";

    Aqui temos uma variável destinatario, que é onde você colocará o email para onde o conteúdo será enviado.

    $assunto = "Tutorial de Formulário BrunoDulcetti.com";

    Variável assunto, que receberá um assunto especificado por você que aparecerá como título, assunto do email que chegará para você.

    $headers = "From: ".$remetente."\nContent-type: text/html"; # o ‘text/html’ é o tipo mime da mensagem

    Variável headers que será enviado junto com o email, dizendo o mime da mensagem.

    if(!mail($destinatario,$assunto,$mensagem,$headers)){

    Eu poderia pular essa parte, não colocar um if, mas coloquei, para caso dê algum problema no envio, apareça um aviso. Neste if, temos um mail, que é a variável do php de envio de emails feitos por ele. Em ordem, colocamos as variáveis destinatario que é seu email, assunto que é o título, assunto do email, mensagem que é o conteúdo do email enviado pelo formulário e o headers. Neste if ele diz resumidamente “Se (o email naum foi enviado) fazer”. O símbolo de ! significa negação no php e o { significa o início das funções dentro do if.

    print "falha no envio da mensagem";

    Como disse acima, caso o email não seja enviado, apareçe esta mensagem de erro, avisando que houve uma falha.

    } else {

    Aqui temos o fechamento do if, que é simbolizado pelo } e temos o else, que significa “então” e um símbolo de { indicando que haverá outra função ou funções.

    echo "<script>window.location.href=’obrigado.htm'</script>";

    Aqui nós temos a função que redireciona para uma nova página, de obrigado, que vocês podem modificá-la como quiserem, tanto nome, layout, etc. Havendo mudança no nome, modifiquem aqui também para que não haja erro 404.

    }

    Fechamento do else, fechamento definitivo do laço if.

    No geral, traduzindo, seria:
    “Se (o email naum foi enviado) faça”
    “falha no envio”
    “senão (se o email foi enviado corretamente) faça”
    “redirecionamento e obrigado”
    “fim do if”

    ?>

    Aqui temos o fechamento do php.

    Temos esse script funcionando na seção contato do meu site.

    Espero que tenham gostado e que tenha sido de fácil compreensão. Aos avançados, desculpem, mas preferi colocar algo básico agora, pro pessoal que tá começando… Em breve posto algo mais avançado ok?

    Aquele abraço galera.

    [ 25/jan/2006 às 12:10hrs ] [ Por Bruno Dulcetti ] Comentários 237 Comentários |

    Categorias: Artigos,Tecnologia

    « Página Anterior | Próxima Página »

    
    Copyright © 2005 Bruno Dulcetti | Creative Commons
    Bruno Dulcetti atuante na área de desenvolvimento web / webdesign e colaborador na área de webstandards pelo Blog BrunoDulcetti.com - blog. Atuante na área desde 2000. Atuando na cidade de Niterói/RJ - Brasil. E-mail: bruno@brunodulcetti.com