Posts da TAG ‘Na Prática’

Vídeo: Menu horizontal com CSS em 5 minutos

Criar um menu horizontal com CSS é muito fácil e tráz algumas vantagens como a facilidade de fazer uma mudança no layout. Sem encostar no HTML, você pode modificar todo o visual do menu via CSS. Se quiser mudar o menu para a vertical, você pode fazê-lo também sem muitos problemas. Fiz um vídeo básico, mudo e rápido de 5 minutos mostrando como se faz um menu horizontal em CSS.
Continuar lendo »

21 Comentários

---

Wordpress Include Tags

O Wordpress tem 3 TemplatesTags para incluir elementos básicos de Cabeçalho, Coluna lateral (sidebar) e Rodapé, são eles: get_header(), get_sidebar() e get_footer(). Essas TemplateTags não aceitam qualquer tipo de parâmetro, portanto são simples de se aplicar. Em todos os themes do Wordpress, essas 3 TemplateTags estão sempre presentes, mesmo assim, você pode modificar isso incluindo outro arquivo que não seja o padrão que o WP estabeleceu.
Continuar lendo »

8 Comentários

---

SEO - Sitemaps

O Sitemaps é um formato simples de XML que serve para informar aos sistemas de buscas sobre seus endereços disponíveis para indexação. Esse XML relaciona as URLs existentes do seu site, com algumas informações como data da última atualização, prioridade da página em relação às outras páginas e freqüencia de atualização.

O sitemap.xml é um arquivo que pode ser gerado automaticamente por um plugin ou até mesmo escrito à mão pelo desenvolvedor.
Continuar lendo »

13 Comentários

---

Formulário Básico em 8 minutos - Tableless form

Na verdade ele foi escrito em 7 minutos e 51 segundos e foram escritos apenas o XHTML e CSS. Infelizmente está sem áudio.

O formulário, depois do link, é o “objeto” mais utilizado pelos usuários para interagir com o site. É questão de vida e morte para muitos profissionais. Se não for bem escrito, pode virar um inferno. Com as tags certas, você consegue fazer uma estrutura enxuta e fácil de customizar. Siga a regra áurea do desenvolvimento web: Keep It Simple Stupid. Continuar lendo »

23 Comentários

---

Comentários Condicionais - Não use

A utilização de comentários condicionais não é uma excelente maneira de contornar bugs. Os comentários condicionais são comentários incluídos no código HTML escritos exclusivamente para fazer uma parte do código funcionar no Internet Explorer.

Normalmente o uso dos comentários condicionais servem para especificar uma parte do código para a interpretação exclusiva pelo Internet Explorer. Alguns desenvolvedores criam um CSS exclusivo para o IE e utilizam os comentários condicionais para que apenas o Internet Explorer entenda este CSS. Assim é possível corrigir bugs que acontecem apenas no Internet Explorer. Continuar lendo »

75 Comentários

---

Quem precisa de versão mobile?

Parece ser um erro comum dos novatos criar versões diferentes do mesmo site.

O ano era 1997. Eu e e todo mundo que eu conhecia usávamos Netscape Navigator. Foi o ano em que, pela primeira vez, fiz um site sozinho. Tudo, atendi o cliente, preparei textos, fotos, fiz o layout, se é que se pode chamar aquilo de layout, criei uma conta no Geocities e publiquei. Em seguida entrei no Yahoo! e cadastrei o site, para que aparecesse nas buscas.

Depois de alguns dias recebi um e-mail do Yahoo! dizendo que o site não poderia ser publicado no diretório porque não funcionava no Internet Explorer. Continuar lendo »

27 Comentários

---

Image-Replacement x Imagens

Este assunto é muito abrangente e divertido de ser debatido.
Portanto, se você discordar deste texto, quero que lembre que é minha opinião… claro, sempre podemos mudar de idéia.

Para não viajarmos muito, vamos pegar como pauta deste texto, o ponto que discutimos na “Lições Sobre Semântica #3″.
O ponto era fazer títulos com imagens ou image-replacement?

Bem, felizmente temos uma base para nos guiar… O código deve ficar o mais semântico possível.
Se o código deve ser semântico, já sabemos que as tags Hn que são usadas para definir títulos não podem ser descartadas, então elas devem continuar.

Ótimo, sabendo disso, vamos analisar as opções:

1. Colocoar a imagem dentro de uma tag Hn.
2. Fazer image-replacement sem tag span.

Eu poderia colocar como opção a técnica de image-replacement com tag span. Acontece que a tag span, suja nosso código, e queremos ter um código descomplicado.

Colocando a imagem dentro de uma tag Hn

A solução seria:
<h1> <img src=”imagem.jpg” alt=”Texto” /> </h1>

Hmm… Essa solução é bastante atraente…
Se o usuário desabilitar as imagens, ou se por ventura a imagem aparecer quebrada, o texto alternativo (alt) irá aparecer no lugar da imagem.
Os browsers mais modernos como Firefox tratam esse texto como um texto normal, dando até para você selecionar. E esse texto pode ficar com o estilo que você definiu no CSS para a tag de título.

Fazer image-replacement

A solução seria:
<h1> Texto </h1>

E assim, sumir com o texto pelo css e colocar a imagem como background.

Essa solução é muito, muito atraente…
Seu código não fica sujo com tags span ou tags img. Se a pessoa entra no site com algum tipo de browser baseado em texto, ela não terá problemas… Existe um porém.
Se o usuário desabilitar apenas as imagens, o texto não aparece.

Mas, agora vem a vantagem que fará você decidir o que fazer.

Se você optar por Image-Replacement, você terá uma flexibilidade que se colocando apenas imagens, você não teria.
Imagine que você tenha um site grande, e que todos os títulos tem que usar uma fonte maluca que o designer escolheu… Fatalmente estes títulos terão que ser imagem.

Um certo dia, o cliente se encheu da fonte maluca e decidiu que a fonte dos títulos devem mudar para Verdana.
Se você tivesse colocado as imagens direto no código, você teria que procurar cada uma das imagens e mudar para texto.
Se você fez com image-replacement, bastava desabilitar a image do background e fazer o texto aparecer… Muito, mas muito mais fácil.

Agora é com você. Essa é a principal diferença.
Os robos de busca, indexam os texto alternativos das imagens bem como o texto do image-replacement, então, não há problemas com isso.

Como disse, o assunto é bastante abrangente. E não é só este “problema” que existe. Mas o importante é analisar o caso, e aplicar a melhor solução para o caso.

9 Comentários

---

Criando efeito de ZOOM com CSS - usando imagem

Zoom em imagem

Que tal você fazer um zoom com css como este aqui?
Então, siga as instruções abaixo e bom estudo!

Armando o documento:

Depois de ter escrito toda a estrutura do documento (<html><head>…) coloque no corpo do documento apenas um link e defina um ID para este link, neste caso, definimos como “foto”, veja abaixo:
<a href=”#” id=”foto”>Ver a foto ampliada</a>

Veja o html deste passo.

Fazendo a imagem:

Muitos podem não entender este passo, ele é muito importante, portante, preste o máximo de atenção.

Neste zoom, não vamos mudar a dimensão de uma imagem pequena, ou seja, não vamos aumentar literalmente a imagem, nós apenas vamos fazer uma pequena troca. Por isso, você deverá ter a imagem que você quer dar zoom em tamanho grande. Escolha uma imagem, e use um editor de imagem da sua preferência para diminuir a foto, e monte desta forma, a foto menor em cima da maior.

A menor é a que vai ser mostrada no documento, quando o usuário faz o zoom (que vai ser feito ao passar o mouse na foto menor) ele verá a foto grande.

Detalhe: As duas fotos (grande e pequena) devem estar juntas em uma única imagem, assim, isso é essencial para o truque dar certo.

Começando a escrever o css

No css, vamos começar a formatar o link!
Vamos começar definindo que ele deverá flutuar a esquerda (float:left está acompanhando?

a#foto {
float:left;
}

Veja o html deste passo.

Fazendo o texto do link sumir

Se você colocou algum texto dentro do link, vamos fazer ele desaparecer agora, defina que a identação de texto deste link será de 1000em (text-ident:-1000em, pronto! Mas agora, temos um problema com o nosso amigo IE, na versão em que testei (Ie 5.0) o texto sumiu. Mas se resolveu quando eu defini que o link deveria ser mostrado como um bloco (display:block. Para ficar melhor de visualizar, defina uma borda de 1px com a cor preta (border:1px solid black. Ainda está acompanhando, veja como o css está.

a#foto {
float:left;
text-indent: -1000em;
display: block;
border:1px solid black;
}

Veja o html deste passo.

Definindo a dimensão

Lembra das imagens?! Então, defina o tamanho do link com as mesmas proporções que a foto pequena, neste exemplo, a foto pequena tem a largura de 150px (width:150px e a altura de 150px (height:150px.

a#foto {
float:left;
text-indent: -1000em;
display: block
width: 150px;
height: 150px;
}

Veja o html deste passo.

Você deve estar visualizando um quadrado com uma borda preta, não é? O próximo passo vai dizer o segredo!

O começo do truque

Lembra da imagem que a gente fez? Aquela que tem a foto pequena e a foto grande? Então, você vai definir agora como sendo o background do link, este background não pode se repetir (background:url(”img.jpg”) no-repeat;

a#foto {
float:left;
text-indent: -1000em;
display: block
width: 150px;
height: 150px;
border:1px solid black;
background: url(”img.jpg”) no-repeat;
}

Veja o html deste passo.

O fim do truque

A foto deve aumentar quando o usuário passar o mouse sobre (a#foto:hover) ela, ou seja.
Defina que o link deverá ficar com as mesmas dimensões que a foto grande, neste exemplo, a foto tem a largura de 300px (width:300px e a altura de 300px (height:300px, veja como ficou.

a#foto:hover {
width: 300px;
height: 300px;
}

Calma, calma! Vamos finalizar o truque.
Para ficar tudo nos conformes, temos que fazer a foto grande ficar na altura certa, isso é fácil! Apenas defina que ao passar o mouse no link, a altura do background seja negativa. Neste exemplo, bastou colocar o valor de -156px que a foto ficou no lugar certo. Você deverá ir testando até achar o valor em que a foto fique alinhada ao topo.

a#foto:hover {
width: 300px;
height: 300px;
background-position: 0 -156px;
}

Veja o resultado.

9 Comentários

---

Centralizando um objeto na Horizontal e Vertical com CSS

Objeto no centro da tela

Uma das dúvidas mais freqüentes é esta: Como fazer para que um objeto fique no centro da tela usando css?
A resposta está nos passos abaixo!

Colocando a imagem:

Neste exemplo vamos usar uma imagem, mas você pode perfeitamente usar um div, o processo é o mesmo.
Coloque na imagem (ou no div) um nome de ID… Colocamos neste exemplo o ID com nome “centro”.

<img src=”imagem.gif” id=”centro” />

Veja o html deste passo.

Definindo as dimensões do objeto:

Agora, no css, defina as dimensões do objeto (imagem ou div).
Nossa imagem tem 100 x 100 px’s, então vamos definir no css que a largura será de 100px (width:100px e que a altura também será de 100px (height:100px.

#centro {
width:100px;
height:100px;
}

Veja o html deste passo.

Alinhando:

Estamos quase no final, você pode perceber que o objeto está um pouco desalinhado do centro. Vamos agora posicioná-lo… É aqui começa o truque.
Defina para nosso objeto, uma posição absoluta (position:absolute, ele deverá ficar a 50% de distância do topo (top:50% e 50% de distância do lado esquerdo do documento (left:50%.
O css não usa o centro do objeto como referência para o posicionamento, mas sim as extremidades, portanto, o que ficará no centro depois deste código, será o canto esquerdo superior do objeto.

#centro {
width:100px;
height:100px;
position:absolute;
top:50%;
left:50%;
}

Veja o html deste passo.

O grande final:

Eis o truque para tirar a diferença, não é nada de outro mundo.
Você irá definir ao objeto duas margens negativas… a margem do topo (margin-top) e a margem da esquerda (margin-left). Na margem do topo, você simplesmente colocará um valor negativo, este valor será a metade da altura do objeto, neste caso, será -50px (margin-top:-50px e no lado esquerdo você fará a mesma coisa, mas o valor será a metade da largura do objeto, neste caso -50px (margin-left:-50px.

#centro {
width:100px;
height:100px;
position:absolute;
top:50%;
left:50%;
margin-top:-50px;
margin-left:-50px;
}

Veja o html final.

7 Comentários

---

Criando um Menu Horizontal com CSS

Fazendo um menu horizontal

Se você não quiser ler, mas ver como fazer, assista um vídeo. Neste vídeo é mostrado como fazer um menu horizontal com CSS. E se quiser aprender mais, visite o Campus Online e cadastre-se grátis para ver vídeos sobre desenvolvimento web.

Para fazer um menu horizontal que seja fácil de personalizar e de fazer manutenção?
Siga os passos abaixo, e descubra como é fácil.

Estrutura:

Primeiramente faça um div e atribua uma ID para este div, neste exemplo nosso div se chamará “menu”. Dentro deste div, faça uma lista, esta lista deve conter as opções de seu menu:

<div id=”menu”>
<ul>
<li><a href=”">Primeiro</a></li>
<li><a href=”">Segundo</a></li>
<li><a href=”">Terceiro</a></li>
<li><a href=”">Quarto</a></li>
<li><a href=”">Quinto</a></li>
</ul>
</div>

Veja o html deste passo.

Começando a formatação:

Agora que já fizemos a estrutura do menu, vamos formatá-lo com css.
Primeiro, para podermos trabalhar melhor, vamos tirar o margin (margin:0px;\), o padding (padding:0px;\) e os Bullets das opções (list-style:none da tag UL. Queremos que o UL seja uma barra de navegação certo? Então vamos fazer ele flutuar à esquerda (float:left), depois damos a ele a largura de 100% (width:100%;\), isso fará com que ele vire uma bloco. Veja o código css atribuído à tag UL:

#menu ul {
padding:0px;
margin:0px;
float: left;
width: 100%;
background-color:#EDEDED;
list-style:none;
}

Veja o html deste passo.

Terceiro:

Nosso menu ainda não está horizontal… agora é hora de resolver isso.
Para o nosso menu ficar horizontal, temos que fazer as suas opções ficarem uma ao lado da outra… para isso, basta atribuir um display:inline; para a tag LI… Isso fará todas as opções ficarem em uma linha horizontal:

#menu ul li { display: inline; }

Veja o html deste passo.

Deixando o menu na horizontal:

Ótimo. Estamos quase acabando nosso menu horizontal, agora falta pouco.
Precisamos apenas formatar os links do menu para que eles não fiquem tão próximos um do outro. No css, faça que todos os links que estão dentro da tag LI (#menu ul li a) flutuem à esquerda (float:left;\), isso é necessário para que os links se transformem em bloco. Agora, dê um espaço entre a borda do menu e o texto, para isso use o padding (padding: 2px 10px;\).
Você pode aproveitar para definir o “visual” que deverá ter o link: cor de fundo, letra, etc…
Veja o código css que escrevemos neste passo.

#menu ul li a {
padding: 2px 10px;
float:left;
/* visual do link */
background-color:#EDEDED;
color: #333;
text-decoration: none;
border-bottom:3px solid #EDEDED;
}

Veja o html deste passo.

Vamos ver no que deu!

Para finalizar, vamos apenas definir o que deverá acontecer com o link quando o usuário passar o mouse. Este passo dispensa explicações.

#menu ul li a:hover {
background-color:#D6D6D6;
color: #6D6D6D;
border-bottom:3px solid #EA0000;
}

Ver menu finalizado.

8 Comentários

---