Posts da TAG ‘aprenda’
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 »
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 »
78 ComentáriosCriando 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>
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;
}
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;
}
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;
}
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;
}
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;
}
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” />
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;
}
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%;
}
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;
}
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>
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;
}
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; }
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;
}
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;
}
Sobre Internet Explorer para Mobile - Breve impressão
Desde que adquiri um MotoQ (se lê MotoQUIU) eu venho usando o Opera Mobile como browser padrão. Ao contrário da versão pra desktops, o Opera Mobile é pago. Por este motivo, quando a data expirou, eu resolvi usar por um tempo o Internet Explorer.
Descobri que a forma com que o IE Mobile renderiza as páginas é tão boa quanto a do Opera Mobile. A velocidade de navegação também é ótima.
O Opera usa muito um sistema que eles chamam de SSR,que em teoria, melhoraria (ou pelo menos tentaria) a visualização de sites em dispositivos móveis. Acontece que esse modo deixa o site muito, mas muito feio. Neste caso, tive a impressão de que o Internet Explorer renderiza melhor os sites que não foram feitos para mobile.
Para quem quer dar uma ajuda para o pessoal que usa browsers mobiles, existe uma metatag chamada MobileOptimized:
<meta name="MobileOptimized" content="sualargura" />
Essa metatag é usada principalmente pelo Internet Explorer Mobile para otimizar melhor o site quando visto de SmartPhones, PocketPCs, etc. O valor colocado ali no atributo “content” deve ser a largura que o browser deve limitar seu layout quando visto de um mobile.
Aviso aos navegantes: fazer image-replacement usando text-indent não funciona no IE para Mobiles. Parece que ele não reconhece o text-indent, o que faz com que o texto fique por cima do logo.
A qualidade de rederização das fontes também achei melhor que a do Opera Mobile. Achei as fontes muito mais nítidas e legíveis.
Uma coisa ruim que achei o IE para Mobiles é a falta de abas. Isso seria muito útil. Normalmente estou sempre visitando e usando mais de dois sites simultâneamente. E sair de um para visitar o outro é uma alterativa terrível. Isso sim me faria voltar para o Opera.
- Sites para dispositivos móveis - Breve Introdução
- Sites para dispositivos móveis - SSR
- Sites para dispositivos móveis - MediaTypes
- Breve Introdução: XHTML Mobile Profile
- Browsers para dispositivos móveis
- 2.7 Bilhões de Celulares
- Curso de Internet Móvel
Mobilidade na cabeça
Ontem, depois do lançamento do iPhone e de ter visto suas funcionalidades (nem tão novas assim, mas reinvatadas de verdade), fiquei pensando em uma funcionalidade em particular: navegação na internet. Quem assistiu o Keynote viu o camarada navegando de verdade com um browser de verdade (Safari) e tendo uma experiência realmente boa. O browser carrega o site inteiro, lendo XHTML e CSS, nada de SSR ou qualquer coisa parecida e é renderizado como se fosse uma miniatura na tela, mas a formatação é integral, como se estivesse sendo visualizado de um desktop. Sim, ficou impossível de ler, mas isso foi resolvido quando o nosso camarada tocou duas vezes no lugar que ele gostaria de ler e o browser deu um ZOOM, possibilitando a leitura.
Essa experiência é muito comum hoje em dia, só que em vez de dedos, você estaria usando uma Stylus (aquela canetinha nojenta), muito pior de manejar do que seus dedos.
A impressão que eu tive sobre a experiência de navegação no iPhone é ótima. Será um dispositivo que os desenvolvedores não terão que se preocupar com compatibilidade, você nem vai precisar fazer uma versão especifica para mobiles (no caso do iPhone). Sim! Você ainda precisa se preocupar com desenvolvimento de sites para dispositivos móveis. O iPhone não é o único dispositivo do mercado, infelizmente.
Também hoje, o Yahoo! liberou para download um pacote de programas direcionados para celulares. O Yahoo! sempre foi antenada quando se trata de mobiles. E você sabe que eles fazem um trabalho bem feito. Sem comentar do Opera, que é um dos melhores (ou melhor) browsers para dispositivos móveis que existe.
Mobilidade é uma coisa que todo mundo precisa e quer. Quem tem um celular hoje, não consegue mais viver sem. Quem tem um celular com conexão à internet também não consegue viver sem. E assim o público vai mudando e se inovando. Aí é onde a coisa fica mais interessante.
Já falei e repito: pra mim, este ano será da mobilidade. Haverá mais interesse nesse mercado, mais procura, mais agitação. Se as empresas acima estão dando uma certa atenção pra isso, já é motivo para mexermos nossos ossos e corrermos atrás do prejuízo desde agora.
5 ComentáriosVideo Tutorial #10 - Implementação de layout
Update: Assista mais video aulas no Campus Online.
Tinha que implementar um layout, resolvi já fazer um video rápido. Sempre é bom mostrar do que só ficar falando e falando e falando…
Tamanho: ~40Mb
Formato: SWF
Tempo: ~40m46s
Acessar Video
Você também pode ficar sabendo dos lançamentos de video tutoriais e outras novidades pelo nosso Feed… Cadastre-o em seu leitor de feeds favoritos.
47 ComentáriosSites para Dispositivos Móveis - Breve introdução
Você tem celular? De acordo com a Teleco, em novembro de 2005, havia mais ou menos 82.351.644 de celulares. Ainda me lembro de quando eles eram artigos de luxo, mesmo sendo grandes e pesados.
Hoje, por um preço razoável, você consegue celulares que tiram fotos e fazem outras coisas que nem James Bond ousava imaginar. E quer saber da melhor? Esse é só o começo.
Aparelhos com essas e outras possibilidades aparecerão. Os HandHelds com funcionalidades iguais as de um Desktop estarão em alta. Pessoas acessarão a internet de qualquer canto… não serão dependentes dos poucos HotSpots. Conexões como Wi-Max não serão novidade. Ninguém arregalará os olhos quando você tirar um Palm ou PPC do bolso para anotar algo e enviar por email, pelo contrário. A internet estará espalhada em cada bolso, em cada palma de mão.
O Google acabou de lançar uma versão do seu webmail para mobiles. Sem contar com sua versão de busca para Mobiles. O Flickr também tem sua versão para dispositivos móveis. Isso mostra que os grandes, de uma maneira ou de outra, estão preparados para essa nova etapa.
Como introdução a criação de sites para esses dispositivos, criamos dois artigos que poderão ajudar o desenvolvedor. É importante que comecemos a fazer da maneira certa. Ter em mente suas possibilidades, seus limites. Um dos artigos fala sobre SSR - Small-Screen Reader. O outro fala um pouco sobre MediaType para HandHelds.
13 ComentáriosBrowsers dos Dispositivos Móveis
Dispositivos Móveis. Este é um terreno muito estranho para os desenolvedores de sites.
Talvez você tenha ouvido falar em fazer sites para Dispositivos Móveis (Mobiles) depois que começou a estudar Web Standards. Confesso que comecei a dar mais atenção a essa área depois que estudei a fundo os Padrões.
Mas, para aquele usuário um pouco mais avançado, que quer fazer seus sites aparecerem melhores nestes dispositivos, nada melhor que conhecer os Browsers que estão disponíveis e que são usados pelos usuários de Mobiles.
Tentei montar abaixo uma tabelinha de compatibilidade entre os browsers. Como eu, muitos não devem ter como comprar um aparelho desses para testar, por isso eu recomendo muito pesquisar pela internet. Tentarei na medida do possível dar algumas dicas por aqui sobre os dispositivos, browsers, compatibilidades e etc. Existem muitos sites que são ótimas fontes de estudos, com links e material farto sobre o assunto.
| Browser | HTML | XHTML 1.0 | CSS 1.0 | CSS 2.0 | DOM | JavaScript |
|---|---|---|---|---|---|---|
| Palm Web Pro 3.0 | sim | sim | sim | sim | ? | v1.5 |
| Palm Web Pro 3.5 | sim | sim | sim | sim | ? | v1.5 |
| PalmSource Web Browser 2.0 | sim | sim | sim | Parcial | ? | v1.5 |
| PalmSource Web Browser 3.0 | sim | XHTML 1.0 + XHTML Mobile Profile | sim | sim | Nível 1 / Parc. Nível 2 | sim |
| EudoraWeb Browser | sim | |||||
| Handspring(TM) Blazer(TM) 2.0 | sim | sim | ||||
| Pocket Internet Explorer | sim | ? | ? | ? | ? | ? |
Claro.
Como nos Desktops, os Mobiles tem seus Sistemas Operacionais. O Pocket Internet Explorer é para PocketPc (PPC), todos os outros são para Palm. Sim, há vários tipos de sistemas operacionais para Palm; e não, os browser não são compatívels com todos os tipos de Palms. Por exemplo, o browser Web Browser 3.0 só é compatível com Palm OS Cobalt que ainda nem saiu.
Se alguém souber mais alguma informação sobre especificamente o Internet Explorer. Por favor, nos diga para que possamos melhorar a tabela acima. 
- Mais do mesmo
- Palm Web Pro 3.0
- Palm Web Pro 3.5
- PalmSource Web Browser 3.0
- PalmSource Web Browser 2.0
- Pocket Internet Explorer
- Handspring(TM) Blazer(TM)
- Mobile Life