Tableless - Padrões Web com Pastel e Caldo de Cana

Posts da TAG ‘Na Prática’

« Posts antigos
Posts recentes »

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.

11 Comentários

Padrões Web - Um elogio ao ócio do desenvolvedor

Abaixo você encontra a palestra que fiz no AlternativaWeb 2007 aqui em Fortaleza. Se quiser ficar mais antenado, estou twittando sobre o evento.

Sou meio suspeito para falar sobre o evento, já que eu sou um dos palestrantes. Mesmo assim, você pode encontrar opinões mais sinceras do Rafael Dourado, Marcelo Augusto, Ilo Aguiar e Chico Neto!

Gostei bastante do primeiro dia. O pessoal dessas bandas é bem animado. Eu não consigo acompanhar! Logo de cara, já queriam me levar em um dos points aqui da cidade: Piratas, a melhor segunda-feira que existe. Deixei pra próxima! ;-)

Minha palestra pode ser vista aí embaixo. Se preferir, pode seguir este link aqui.
Os desenvolvedores aqui são dividos em dois gêneros: Ou são muito antenados, ligados com a comunidade e muito participativos. Ou são desenvolvedores quietos, passivos, e que não tem ligação nenhuma com outros desenvolvedores fora da empresa em que trabalha.

Normalmente, a maioria dos eventos sobre desenvolvimento acontecem em lugares como Rio e São Paulo. Salvo algumas exceções que vão para outros estados. Por isso, já parabenizo o Bruno Saraiva e todo o pessoal envolvido em criar eventos assim aqui em Fortaleza e em outros lugares. Deste modo o desenvolvedor brasileiro cresce mais em conhecimento.

Se você quiser mais vídeos e em alta-resolução, visite o Campus Online. Lá você vai encontrar vídeos tutoriais de Tableless, Ajax, Javascript e boas práticas de desenvolvimento web.

11 Comentários

Rapidinhas - para começar a pseudo-segunda-feira

Alguns links rápidos para começar a pseudo-segunda-feira (aqui em SP foi feriado na segunda).

14 Comentários

Coleção de Layouts

Eu gosto de passar horas navegando na internet vendo layouts e estudando design. Isso é bom e engrandece quem gosta e trabalha na área. Acontece que sempre que os sites mudavam, eu perdia minhas referências. Via um site legal, gostava do site, usava como estudo, referência e tudo mais. Só que de uma hora para outra, eles mudavam, e eu perdia tudo. Por isso, peguei a mania de guardar em imagem os layouts que me interessavam e assim conseguir consultá-los quando eu precisava.

Para guardar os layouts eu uso uma extensão pra Firefox chamada ScreenGrab! Ela consegue pegar o layout inteiro do site e assim não preciso perder tempo fazendo montagem da imagem no PS caso o site tenha rolagem.

Vou disponibilizar minha coleção no aqui.

18 Comentários

Não troque todas as suas imagens por background!

Às vezes é bom repetir os fatos básicos, principalmente porque tem sempre gente chegando e começando a aprender.

Uma dúvida muito comum, que eu vejo se repetir há alguns anos, é onde usar e onde não usar imagens no background via CSS. Para quem está chegando agora, a questão básica é que existem duas maneiras de se fazer uma imagem aparecer na tela. Cada uma delas tem suas vantagens e desvantagens e é melhor usada para um fim específico. Mas muita gente usa apenas um método ou o outro.

Uma delas é inserir uma tag HTML:

<img src="seta.gif" alt="Prosseguir" />

A outra é inserir essa imagem como background de uma tag qualquer através do CSS:

a.prosseguir {
background: white url(seta.gif) top left no-repeat;
}

As diferenças entre eles, embora não apareçam à primeira olhada no site, são substanciais. Experimente, por exemplo, desligar o CSS daqui do Tableless. Você vai ver que todas as imagens que compôem o layout, incluindo logotipo e as sombras laterais, vão desaparecer. Vão sobrar apenas umas imagenzinhas do Feedburner e da barra lateral direita.

Quem trabalha com tabelas geralmente usa apenas o primeiro método. Infelizmente muita gente aprendendo a construir layouts Tableless com CSS, ao aprender o segundo método, tem abandonado completamente o uso da tag img. É um exagero comum entre os novatos, assim como abandonar completamente o uso da tag table.

Por que o Diego escolheu algumas imagens para ir no meio do código HTML e outras para inserir como background CSS? A regra é simples, como todo o resto na dobradinha XHTML+CSS, imagens que fazem parte de seu conteúdo vão no HTML, imagens que são apenas elementos de layout vão no CSS.

Veja, por exemplo, este meu post sobre o Performancing. Há, no topo e no rodapé, dois gradientes. Experimente desligar o CSS. Você vai ver que algumas imagens foram mantidas. Todas elas fazem parte do conteúdo da página:

Há outra maneira, que talvez você ache mais simples, para explicar isso. Imagine-se fazendo o redesign do site. Todas as imagens que você deve manter exatamente como estão são conteúdo. Todas as que você vai querer mudar são layout. Veja isso no exemplo acima. Você não muda um banner, a foto do autor do site ou o screenshot de um programa porque fez um redesign em seu site. Mas, claro, bordas, sombras, fundos, chanfros, linhas separadoras, logotipos, tudo isso pode mudar.

Uma última coisa em que você pode pensar é na indexação pelo Google Bot. Ao fazer uma pesquisa de imagens, você vai querer que as pessoas encontrem em seu site um screenshot de programa, a foto de uma celebridade, um diagrama de explicação de uma teoria ou uma foto de um animal. Mas as imagens decorativas só vão atrapalhar.

Há ainda um terceiro caso que pode confundí-lo, que é o image replacement. Mas sobre isso o Diego já escreveu bastante.

24 Comentários

Podcast Tableless #22 - Primeira impressão sobre Padrões Web

Esta semana resolvi fazer um podcast um tanto diferente. Hoje (31/08) terminou mais um curso de Tableless na Visie. Em um dos dias do curso, nós conversamos um pouco sobre a dificuldade de adotar uma metodologia nova tanto para eles, que estão ingressando agora no mundos o Padrões Web, quanto na tentativa de evangelização dos colegas de trabalho, que na maioria das vezes, demonstram um certo preconceito sobre toda esta mudança.
Não é fácil chegar para alguém e mostrar que o jeito que ele desenvolve sites durante anos, está errado e que ele tem que mudar uma série de coisas para se adequar à maneira correta. Isso é normal e sempre tem cura. :-)

Um bate-papo bem informal e muito proveitoso. Talvez repetiremos a dose com outras turmas.

Podcast Tableless #22
Formato: Mp3
Tamanho: ~10Mb
Tempo: ~00h30m

Você pode ouvir as outras edições do podcast do Tableless, basta visitar o link: http://www.tableless.com.br/categorias/pratica/podcasts/

20 Comentários

Podcast Tableless #21 - Desenvolvimento em camadas

O Tableless está tentando voltar com os podcasts. Para me ajudar nesta empreitada - que promete ser firme e semanal! :-o - chamei o Bruno Torres.
Estamos tentando remodelar o podcast para que possamos fazer toda semana. Não iremos passar tempo dissecando vários assuntos longos, mas vamos sempre bater papo sobre um assunto específico, que seja de interesse geral. Isso fará com que o tempo do podcast fique menor e mais relevante.

Para o podcast ficar mais adequado, gostaríamos que vocês usuários enviassem comentários e emails com dúvidas fáceis, que possam ser respondidas sem ter que mostrar com código e etc. Portanto, nada de dúvidas como: - Como faço um layout de três colunas? Tentei mas não funcionou no IE… etc etc etc.
Iremos selecionar as dúvidas e respondê-las. Iremos citar o nome do camarada, a pergunta e tudo mais… como manda o figurino.
Tentaremos também, na medida do possível, chamar de vez em quando um ou dois ouvintes para fazer o podcast conosco. Iremos amadurecer a idéia, mas pode dar muito certo. Ficará mais dinâmico e menos monótono, já que vocês não irão ouvir só a voz medonha do Bruno e minha voz maravilhosa.

Devagarinho iremos acrescentar mais novidades ao podcast. Espero que agora ele consiga ser realmente semanal. Para isso, precisamos da colaboração de vocês.
Falando sinceramente, este primeiro podcast desta nova série ficou um pouco sem graça. O assunto não é polêmico, eu e o Bruno concordamos com tudo. Mas acredite, não será sempre assim.
Falamos um pouco sobre Desenvolvimento em Camadas. Desenvolver em camadas é um dos primeiros passos e um dos mais importantes para uma vida plena usando os padrões.

Podcast Tableless #21
Tempo: ~28m15
Tamanho: ~10Mb
Formato: Mp3

Iremos na medida do possível acertar o som. O som sempre foi um dos maiores problemas de podcasts feitos remotamente com vários usuários. Há uma certa dificuldade de acertar o som sem que cause grandes estragos, já que o volume de cada participante é diferente…. há ruídos e etc. Portanto, um bocado de paciência.

Links relacionados

Você pode ouvir as outras edições do podcast do Tableless, basta visitar o link: http://www.tableless.com.br/categorias/pratica/podcasts/

28 Comentários

Video Tutorial #11 - Amostra do Opera Mini

Bem, este não é um video tutorial como os outros. Eu só tentei capturar com uma webcam furreba algumas imagens do Opera Mini.

Para quem não sabe, o Opera Mini é a versão do Opera para celulares com Java. O Opera tem uma série de versões de seu browser. Começa em desktops, passa pelo Nintendo DS, chegando até ser base para Media Lounge. Sem dúvida, um dos melhores browsers atualmente.

Eu capturei o video em AVI, mas ficou enorme, na faixa de 200, 300Mb… Tentei transformar em SWF, como faço normalmente com os videos tutoriais do Tableless, mas ficou com 30Mb, muito ruim também. O melhor jeito que eu encontrei foi transformar em DIVX. Para ver, você precisará ter algum player que toque arquivos .divx.
Vou tentar criar outra versão mais acessível, se alguém souber de algum jeito fácil, por favor, diga.

Video Tutorial #11 - Opera Mini
Tamanho: ~7Mb
Tempo: ~1m00

O Opera Mini se mostrou muito robusto. Bem fácil de manusear. Fazer um browser para aparelhos celular não é coisa fácil. Você é muito limitado a algumas ações, mas o Opera conseguiu se mostrar muito acessível. As opções são fáceis de encontrar e de acessá-las pelo teclado.

Nos desktops, o Opera sempre teve as melhores formas de navegação via teclado, e no celular ele ainda consegue manter este padrão. Você consegue navegar facilmente pelos links. Rolar a página também não se mostrou um problema, ele tem um rolamento suave que quebra um galhão.

Como estamos falando de um browser para celular, as configurações que você tem acesso são bem resumidas. Você pode baixar skins, gerenciar marcadores (favoritos), gerenciar histórico, aumentar qualidade das imagens, definir se você quer ver ou não ver imagens, aumentar tamanho de fonte, etc…

Quem tiver a oportunidade de instalar no seu celular, não perca tempo.
Se você não pode instalar o Opera Mini, não se preocupe, no site do Opera há um Simulador do Browser em seu site. É só visitar e testar.

Se você quiser mais vídeos e em alta-resolução, visite o Campus Online. Lá você vai encontrar vídeos tutoriais de Tableless, Ajax, Javascript e boas práticas de desenvolvimento web.

17 Comentários

Foxmarks

Você tem um computador em casa, um no trabalho, um na casa da namorada, outro na casa da avó e quer manter seu favoritos sincronizado entre eles? Seus problemas acabaram!

Continuar lendo »

6 Comentários

HTML Validator

A extensão HTML Validator é muito simples: Ela te mostra se o site está validado corretamente ou não. Quando instalada, ela mostra um iconezinho no lado inferior direito, mostrando se há erros, warnings ou se está totalmente validado. Além disso, ela muda a janela de Source do Firefox… Melhorando a forma de análise do código!

Você pode ver mais dicas de extesões aqui.

10 Comentários
« Posts antigos
Posts novos »
Voltar para o topo

Outros posts

Aprenda

Histórico