tag:blogger.com,1999:blog-41740053544523765212024-03-05T11:58:13.091-03:00Web Como Um Todo!Rodrigo Machadohttp://www.blogger.com/profile/11045831958737425062noreply@blogger.comBlogger22125tag:blogger.com,1999:blog-4174005354452376521.post-85949362184683550862011-01-25T11:24:00.001-02:002011-01-25T11:25:50.689-02:00Infográfico: A História das Mídias Sociais ( Inglês )<div class="separator" style="clear: both; text-align: center;"><a href="http://9.mshcdn.com/wp-content/uploads/2011/01/social-media1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" s5="true" src="http://9.mshcdn.com/wp-content/uploads/2011/01/social-media1.jpg" width="500" /></a></div>Rodrigo Machadohttp://www.blogger.com/profile/11045831958737425062noreply@blogger.com0tag:blogger.com,1999:blog-4174005354452376521.post-43840612772873521072010-11-19T11:55:00.001-02:002010-11-19T11:57:06.169-02:00Google lança livro interativo para ensinar WebCom intenção de ensinar a todos sobre Web, a <strong>Google</strong> lançou um <strong>livro interativo</strong> onde explica alguns conceitos como TCP/IP, HTML, extensão de navegadores e malware.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><img border="0" ox="true" src="http://cdn.mashable.com/wp-content/uploads/2010/11/google-web-book-640.jpg" /></div><br />
<br />
O livro, <strong>20 Things I Learned About Browsers And the Web</strong> (<strong>10 coisas que aprendi sibre Navegadores e Web</strong>), é uma <strong>explicação passo-a-passo</strong> de <strong>como a web funciona</strong>. Foi criado pela equipe de HTML5 do Google Chrome, mas contém ótimas ilustração feita pelo artista Christoph Niemann.<br />
<br />
Para acessar é só seguir o link <a href="http://www.20thingsilearned.com/" target="_blank">http://www.20thingsilearned.com/</a> mas lembre-se que para melhor visualização utilize um Browser que utiliza <strong>HTML5</strong>.Rodrigo Machadohttp://www.blogger.com/profile/11045831958737425062noreply@blogger.com0tag:blogger.com,1999:blog-4174005354452376521.post-40373185615491522042010-11-04T18:44:00.004-02:002010-11-04T19:15:38.260-02:00Vídeo: Stop Motion - Google Street ViewPra quem aprecia coisas legais da internet e novidades, esse vídeo Stop motion vai te empolgar. Vale a pena conferir!<br />
<br />
<center><br />
<iframe frameborder="0" height="325" src="http://player.vimeo.com/video/16465813" width="500"></iframe><br />
</center>Rodrigo Machadohttp://www.blogger.com/profile/11045831958737425062noreply@blogger.com0tag:blogger.com,1999:blog-4174005354452376521.post-10891678105308820112010-06-14T14:46:00.001-03:002010-06-14T14:46:49.506-03:00XBOX Project Natal agora é Microsoft Kinect<div class="separator" style="clear: both; text-align: center;"><a href="http://i2.r7.com/data/files/2C92/94A3/2936/788E/0129/368F/F09E/2070/kinect-microsoft-demonstracao-m-20100614.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;" target="_blank"><img border="0" height="320" src="http://i2.r7.com/data/files/2C92/94A3/2936/788E/0129/368F/F09E/2070/kinect-microsoft-demonstracao-m-20100614.jpg" width="283" /></a></div>A <b>Microsoft</b> está desenvolvendo um novo console <b>XBOX</b> que utiliza o mesmo conceito do <b>Nintendo Wii</b> porém não será necessário os controle pois haverá uma camera captando os movimentos dos jogadores, anteriormente o projeto era chamado de <b>Project Natal</b>, mas agora foi anunciado que o novo nome do projeto será <b>"Microsoft Kinect"</b> e será mostrado na feira <b>E3 2010: The Future of Gaming and Entertainment</b> e poderá ser acompanhado ao vivo no dia 14 de Jundo a partir da 14:30(Brasília) neste <a href="http://www.microsoft.com/presspass/presskits/xbox/liveEvent.aspx" target="_blank">link</a>.<br />
<br />
<br />
Por enquanto fica um vídeo oficial, em breve mostro mais novidades.<br />
<br />
<br />
<center><br />
<iframe frameborder="0" height="360" scrolling="no" src="http://www.microsoft.com:80/presspass/silverlightApps/videoplayer3/standalone.aspx?contentID=360_kinect&src=/presspass/presskits/xbox/channel.xml" width="640"></iframe><br />
</center><br />
<br />
Abraços, e até a próxima.Rodrigo Machadohttp://www.blogger.com/profile/11045831958737425062noreply@blogger.com0tag:blogger.com,1999:blog-4174005354452376521.post-37560560784399800562010-06-07T10:27:00.000-03:002010-06-07T10:27:58.719-03:00Impressora feita de Lego com impressão à canetinhaSinceramente tenho que confessar que quando me falaram sobre esta impressora eu dei risada e achei que era piada, mas agora vendo o vídeo achei impressionante.<br />
<br />
<center><br />
<object height="385" width="480"><param name="movie" value="http://www.youtube.com/v/zX09WnGU6ZY&hl=en_US&fs=1&"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/zX09WnGU6ZY&hl=en_US&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="385"></embed></object></center><br />
<br />
Ainda bem que tem o vídeo, porque se contar ninguém acredita não é mesmo?<br />
<br />
fonte: <a target="_blank" href="http://www.wired.com/gadgetlab/2010/06/awesome-lego-printer-uses-felt-tipped-pens-tiny-workers/">Wired.com</a>Rodrigo Machadohttp://www.blogger.com/profile/11045831958737425062noreply@blogger.com0tag:blogger.com,1999:blog-4174005354452376521.post-71902874190486873242010-06-07T09:41:00.003-03:002010-06-07T09:42:23.112-03:00Vídeo: Designers x ClientesPra você que está entrando agora no mercado, assista o vídeo e veja os absurdos que terá que enfrentar. E para os mais experientes confira se não é verdade.<br />
<br />
<br />
<br />
<center><br />
<object height="340" width="560"><param name="movie" value="http://www.youtube.com/v/CYu1cQs4Y5Y&hl=en_US&fs=1&"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/CYu1cQs4Y5Y&hl=en_US&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="560" height="340"></embed></object><br />
</center><br />
<br />
Muito bom né? Uma triste realidade!<br />
<br />
fonte: <a target="_blank" href="http://www.sedentario.org/internet/disposicao-de-investimento-do-cliente-x-trabalho-do-profissional-28020">Sedentario e Hiperativo</a>Rodrigo Machadohttp://www.blogger.com/profile/11045831958737425062noreply@blogger.com0tag:blogger.com,1999:blog-4174005354452376521.post-56977657369692623572010-05-19T23:16:00.000-03:002010-05-19T23:16:57.672-03:00Tarifa bancária será convertida em crédito para celularO Bradesco divulgou hoje uma parceria com as operadoras Claro e Vivo para converter o gasto que seus clientes tem com “pacotes de tarifas bancárias” em créditos para celular.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><img border="0" src="http://info.abril.com.br/aberto/infonews/fotos/Bradesco-20100518183421.jpg" /></div><br />
Chamado de Cesta Celular Bradesco, o programa permitirá que clientes optem por um pacote no valor mensal de R$ 11 (para usuários do Banco Postal e do Bradesco Expresso) ou R$ 16 (para os correntistas da rede de agências). Quem aderir a um desses pacotes poderá reverter seus gastos mensais com tarifas bancárias em créditos para celular.<br />
<br />
Fonte: <a target="_blank" href="http://info.abril.com.br/">Info</a>Rodrigo Machadohttp://www.blogger.com/profile/11045831958737425062noreply@blogger.com0tag:blogger.com,1999:blog-4174005354452376521.post-61458451094860579562010-05-10T13:21:00.004-03:002010-05-19T23:27:04.153-03:00Como adicionar botão de Compartilhar no Orkut (Orkut Share) no BloggerHoje vou mostrar como adicionar o Botão de share para compartilhar seu post no Orkut(atualizações e promova), ou seja, bem útil aqui no Brasil onde a maioria usa o Orkut.<br />
<br />
Primeiro entre em seu <a href="http://www.blogger.com/home" target="_blank">painel do Blogger</a> escolha o blog e clique em <b>layout</b>.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><img border="0" height="117" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcZnQTs-wEd6l4Ck1XRx8LLoudgqqJzPTeQ7zAUiqOIdwQWgX1JQRUEaNUE1-a1_X4pa3mWAF17dZtRf3Y1LwegpK1BizQ-7I8gsI6xXUniwOGef_MsPG19deB8dpPMCZoSQGOR5EAKKDR/s400/001.jpg" width="400" /></div><br />
Agora clique em <b>"Editar Html"</b>, assim que abrir marque a opção "<b>Expandir modelos de Widgets</b>".<br />
<div class="separator" style="clear: both; text-align: center;"><img border="0" height="363" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRHeKGfQNT9ib7YWJ9igfQ4wgXvP99HhYh35klDXlRb0XQhibsbRfF7f8W69mUC8IsNp7aUmOnR39qbdLIPn25eqdqxl4MLgwYfBRoLTofNcHwTC9UAMlDKbQqw8DkPtFBv46Q26L6QI4z/s640/002.jpg" width="600" /></div><br />
<br />
Procure pela linha abaixo<br />
<code> <div class='post-header-line-1'/> </code><br />
<br />
Pronto agora copie e cole o código abaixo.<br />
<code> <div style='float:right; margin-top:-5px; margin-left:4px;'> <br />
<script><br />
var orkutShare = { <br />
url : '<data:post.url/>', <br />
title: '<data:post.title/>', <br />
content : 'Olha isso, rachei de rir aqui!', <br />
customImage : 'http://j.imagehost.org/0491/orkut-share-firmenapacoca.jpg', <br />
shareText : 'Confira isto!'; <br />
}<br />
</script> <br />
<script src='http://orkut-share.googlecode.com/svn/trunk/orkutShare.js'> </script> <br />
</div> </code><br />
<br />
<br />
Pronto! Está feito, agora é só clicar em Salvar Modelo.Rodrigo Machadohttp://www.blogger.com/profile/11045831958737425062noreply@blogger.com0tag:blogger.com,1999:blog-4174005354452376521.post-31910600994455033372010-04-14T11:20:00.000-03:002010-04-14T11:20:50.373-03:00Twitter finalmente insere comerciais no site<span class="fullpost">O<b> <a target="_blank" href="http://twitter.com/webcomoumtodo">Twitter</a></b> anunciou em seu <a target="_blank" href="http://blog.twitter.com/">Blog Oficial</a>, que iniciará uma estratégia de <b>anúncios no site</b>, porém não são comerciais que costumamos ver(banner e comerciais textuais pré-localizado ou de contexto como HotWords). </span><br />
<br />
<br />
Estes anúncios serão chamados de <i><b>Promoted Tweets</b></i> (<b>Tweets Promovidos</b>) e aparecerão até o momento (pois a empresa já tem planos de incorporá-lo nas <i>timelines</i>) apenas na ferramenta de<b> <a target="_blank" href="http://search.twitter.com/">busca do Twitter</a></b>, os anúncios serão incorporados aos <b>resultados da pesquisa</b>, a empresa anunciou que apenas um <b><i>tweet </i>promovido</b> aparecerá por busca e não será de forma alguma destacado dos demais, terá também todas as funcionalidades de um tweet normal, como <i>Reply, ReTweet e Favorite</i>, e além disso também terá um <b>indicador </b>de <i><b>promoted tweet</b></i> como pode ser visto na imagem abaixo.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a target="_blank" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSG2AQtGiUljf2u8p3anElr-34Je4VSNhTulH-mBS0k3BJjGHUV03sLcJaa8MSfZDL9zEJ0-dOzq8QqWh_jbZrwIWtpTaXtkD-uWcvp0L5FR44NUfRK-N8lB-N4ecnydvqiClNjC4797c/s1600/promoted-tweet.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="116" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSG2AQtGiUljf2u8p3anElr-34Je4VSNhTulH-mBS0k3BJjGHUV03sLcJaa8MSfZDL9zEJ0-dOzq8QqWh_jbZrwIWtpTaXtkD-uWcvp0L5FR44NUfRK-N8lB-N4ecnydvqiClNjC4797c/s400/promoted-tweet.jpg" width="400" /></a></div>Rodrigo Machadohttp://www.blogger.com/profile/11045831958737425062noreply@blogger.com0tag:blogger.com,1999:blog-4174005354452376521.post-18794721939803550682010-04-12T23:07:00.005-03:002010-04-12T23:19:11.400-03:00Barra de rolagem em tag DIVOlá Pessoal!<br />
<br />
Estamos aqui mais uma vez para mostrar como colocar <b>barra de rolagem em DIV</b>(como utilizamos aqui no blog com os blocos de textos).<br />
<br />
Primeiramente o que deve ser feito é criar o HTML necessário com uma DIV e um texto curto<br />
<code><br />
<div id="rolagem"><br />
<p>Web como um Todo! te <b>ensina</b> a colocar barra de <strong>rolagem ! em tag DIV</strong> uau que demais esse texto demais esse texto demais esse texto demais esse texto demais esse texto demais esse texto demais esse texto demais esse texto demais esse texto demais esse texto demais esse texto demais esse texto demais esse texto demais esse texto demais esse texto demais esse texto demais esse texto </p><br />
</div><br />
</code><br />
Legal! Agora vamos ver a parte do <b>CSS</b>.(Lembre-se <strong>separar conteúdo de layout sempre</strong>)<br />
<code><br />
#rolagem {<br />
height:150px;<br />
width:250px;<br />
background-color:#999999;<br />
overflow:auto;<br />
}<br />
</code><br />
<br />
Pronto aqui está o <a href="http://webcomoumtodo.110mb.com/tutorial/divscrollbar/index.html" target="_blank"><b><span class="Apple-style-span" style="font-size: x-large;">resultado final</span></b></a>!Rodrigo Machadohttp://www.blogger.com/profile/11045831958737425062noreply@blogger.com0tag:blogger.com,1999:blog-4174005354452376521.post-44609709263113044862010-04-12T09:59:00.002-03:002010-04-12T10:06:25.362-03:00Como saber se um site está fora do Ar (status)?<span class="fullpost">Já tentou acessar um <b>site </b>que você desenvolveu e aparece aquela mensagem <del>idiota</del> linda que o <b>site está fora do ar</b>, aí fica a dúvida "Seria minha internet ou é o servidor?". Pois é meu amigo seus <del>pôbremas</del> problemas acabaram abaixo alguns sites que podem te ajudar a ver se <b>seu site está online</b>.</span><br />
<ul><li><span class="fullpost"><a href="http://downforeveryoneorjustme.com/" target="_blank">Down for everyone or Just me?</a> (Fora do ar pra <b>todos ou só pra mim</b>?)</span></li>
<li><span class="fullpost"><a href="http://dingitsup.com/" target="_blank">Ding It's Up</a> - Esse te avisa quando o site voltar.<br />
</span></li>
</ul>Rodrigo Machadohttp://www.blogger.com/profile/11045831958737425062noreply@blogger.com1tag:blogger.com,1999:blog-4174005354452376521.post-58395933772155844662010-04-10T20:31:00.000-03:002010-04-10T20:31:31.426-03:00Centralizar Página ou DivOlá Pessoal, <br />
<br />
Hoje vou mostrar aqui uma técnica para centralizar a página no meio da tela. Uma técnica muito comum é ativar a propriedade align="center" da tag div, porém não recomendo pois fica mais pra uma <a href="http://desciclo.pedia.ws/wiki/Programa%C3%A7%C3%A3o_Orientada_a_Gambiarras" target="_blank">P.O.G</a>, então vamos fazer isso com CSS, separando layout de conteúdo ;)<br />
<br />
Vamos pensar na estrutura do site<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvgfzyQS_6yfm80AzGiH1FkJrjefQwWrhAk0xW6LOvenZp9pmHcsRXR_1AQFTuO64bwDOI3iIPsQcLs1YdXJs2GNCpWf1WcMlaFbuFFZaOi8TwrECbLmJjZHCA41N1jXusH2mjrzS4DmW3/s400/1.gif" /></div>Bom pelo que pode ser visto na imagem acima, teremos uma div principal que preencherá toda a tela e uma div conteúdo.<br />
<br />
Vejamos como o HTML fica neste caso<br />
<code><br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br />
<title>Web Como Um Todo!</title><br />
</head><br />
<br />
<body><br />
<div id="principal"><br />
<div id="conteudo"><br />
Conteúdo aqui!<br />
</div><br />
</div><br />
</body><br />
</html><br />
</code><br />
<br />
Show! Já temos o conteúdo(HTML), agora é hora de definir o layout(CSS).<br />
<code><br />
#principal{<br />
width: 100%;<br />
}<br />
<br />
#conteudo{<br />
width:500px;<br />
margin:0 auto;<br />
border: 1px solid #000000;<br />
}<br />
</code><br />
<br />
Repare que definimos estilos para as duas DIVs, na div PRINCIPAL definimos a largura em 100%, ou seja, a largura de toda tela será preenchida. No div CONTEUDO foi definido a largura para <b>width:500px; </b>(apenas para exemplo, você pode definir a largura que desejar), uma borda <b>border: 1px solid #000000; (</b>para melhor visualizar o efeito) e o <b>grande responsável</b> pelo alinhamento do div na tela a propriedade <b><span class="Apple-style-span" style="font-size: x-large;">margin: 0 auto;</span></b>Rodrigo Machadohttp://www.blogger.com/profile/11045831958737425062noreply@blogger.com0tag:blogger.com,1999:blog-4174005354452376521.post-4425782870133219592010-03-09T01:11:00.001-03:002010-03-12T00:21:55.105-03:00Página com fundo degradêHoje você VAI aprender como é simples fazer um efeito de fundo degradê em um site com uma pequena imagem de 1 pixel, com HTML e CSS.<br />
<br />
Você irá precisar de <i><b>Photoshop</b></i>, esta é uma ótima ferramenta para <b>auxiliar</b> o web designer, destaquei a palavra auxiliar pois existem muitos web designers que apenas utilizam o photoshop e geram o html através do photoshop, assasinando todos os padrões web, pois infelizmente o photshop gera um html bem fraco.<br />
<br />
Então, vamos abrir o Photoshop neste caso estou usando a versão CS3, mas qualquer versão você poderá fazer.<br />
<br />
Crie um documento com as resoluções (1024x768), foi escolhida esta resolução pois atualmente 80% da internet utiliza esta resolução.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_BAaHm6h1hgJ8PxLgyz_sB41LbHoo3b8ahUeyCDryf2ipfTidN2nQS9_B4CMC5axXbN8gM0txuuVZp0iuwssvHi79061wlXenPNvqDPpGhWiRfHoDhMjUg6SroKgl8ZObB9HbyX4aITGV/s1600-h/001.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="242" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_BAaHm6h1hgJ8PxLgyz_sB41LbHoo3b8ahUeyCDryf2ipfTidN2nQS9_B4CMC5axXbN8gM0txuuVZp0iuwssvHi79061wlXenPNvqDPpGhWiRfHoDhMjUg6SroKgl8ZObB9HbyX4aITGV/s400/001.gif" width="400" /></a></div><br />
<br />
Deixe a cor <b>#7fa6ee</b> como primária na sua paleta <br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhp1aIMRVkp3UujHbl_9Sr0XXzWPhYKshoCVzGmag3ANi-SwrmkZt0z4BFG4gUtYISYa8KTfCVh41mVsALB3yQGSDZ39fHQHFXIh0bCSPn9PGxdu4T9BrOWsrqVGcGSG5ZLr6amQKuV3QMg/s1600-h/003.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhp1aIMRVkp3UujHbl_9Sr0XXzWPhYKshoCVzGmag3ANi-SwrmkZt0z4BFG4gUtYISYa8KTfCVh41mVsALB3yQGSDZ39fHQHFXIh0bCSPn9PGxdu4T9BrOWsrqVGcGSG5ZLr6amQKuV3QMg/s320/003.gif" /></a></div>Em seguida você irá escolher a ferramenta<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_mKZCPFd6vXuJ7JmYjAWj2dpU5ASN0ieItJVVCTrj9iGCTLYBvtQ3ao9SeW0nH3prvqNQqCPcFKOoZNFBXwV2i8CwwzmXcuvh7-3xbdZHK3yBngxmy9Z8IlNwsIrDxsHEpngT57jE-Chz/s1600-h/002.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="52" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_mKZCPFd6vXuJ7JmYjAWj2dpU5ASN0ieItJVVCTrj9iGCTLYBvtQ3ao9SeW0nH3prvqNQqCPcFKOoZNFBXwV2i8CwwzmXcuvh7-3xbdZHK3yBngxmy9Z8IlNwsIrDxsHEpngT57jE-Chz/s200/002.gif" width="200" /></a></div><br />
Faça um "traço" com a ferramente na imagem da forma como mostra abaixo, isto definirá a área de degradê (Se for necessário clique na imagem para ampliar).<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZFEsaWAosVbJ9ysGVdMzgFzrIyiSC1TVWWR9qce2TL24EQvJHYDS5nb17r4HbuOTPN2KV1KjujhyaXcdxrpPu5XAwvgQfQ5peDPdcIaqBFchOAd4p_8KhCUNFwLLfHn8MjKda6Wolwr_c/s1600-h/004.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="367" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZFEsaWAosVbJ9ysGVdMzgFzrIyiSC1TVWWR9qce2TL24EQvJHYDS5nb17r4HbuOTPN2KV1KjujhyaXcdxrpPu5XAwvgQfQ5peDPdcIaqBFchOAd4p_8KhCUNFwLLfHn8MjKda6Wolwr_c/s400/004.gif" width="400" /></a></div><br />
Ao soltar o mouse o photohop criará veja como ficou<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqxkMUj83E1wIzTIgTO0El4rFaIX2yv6QejZ2mYQBTy8Z4WJFQ8ZLsM540wUlIBpPXWZRJoqN_fKXP4r1u4qZe9d1wn2nN8w9m6zdtaQWa3YJIdndsQE9PysXYZ3ZXK0D51hO7vC5BH_jb/s1600-h/005.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="287" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqxkMUj83E1wIzTIgTO0El4rFaIX2yv6QejZ2mYQBTy8Z4WJFQ8ZLsM540wUlIBpPXWZRJoqN_fKXP4r1u4qZe9d1wn2nN8w9m6zdtaQWa3YJIdndsQE9PysXYZ3ZXK0D51hO7vC5BH_jb/s400/005.gif" width="400" /></a></div><br />
<br />
Agora é a hora de diminuir esta imagem para que sua página com fundo degradê não fique pesada. Para isso acesse Image->Image Size... (crtl + alt + i).<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhH3lIUG1PiodVVvb-tnq3E1eScu-hxv5duNFGytiu6Z7oVjIlXHkUUR_GlriNS-Xx-dZh8YHYZjtgUW5khZVI5T6dDLhjjGpNoa9uIwymTG3HUlGeZx0m-Bdu5bVdSsAbDoL8jOPLIZoS0/s1600-h/006.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhH3lIUG1PiodVVvb-tnq3E1eScu-hxv5duNFGytiu6Z7oVjIlXHkUUR_GlriNS-Xx-dZh8YHYZjtgUW5khZVI5T6dDLhjjGpNoa9uIwymTG3HUlGeZx0m-Bdu5bVdSsAbDoL8jOPLIZoS0/s320/006.gif" /></a></div><br />
Ao clicar uma janela é aberta, altere o <b>width</b> (largura) da imagem para 1<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggNzSZgk1r4oTpTgnZ8BJDmk0phiGkMovDVr5b7EM3oVa83tCni_IQ4ZByCXbMoMypmNb2-ro6L7E-Unh4M3DAvwUM00LVJ4vfOw02yDnJIRXrN_ilN3zpxGWXgjOm8oHXOWGhTZ4x9wSG/s1600-h/007.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggNzSZgk1r4oTpTgnZ8BJDmk0phiGkMovDVr5b7EM3oVa83tCni_IQ4ZByCXbMoMypmNb2-ro6L7E-Unh4M3DAvwUM00LVJ4vfOw02yDnJIRXrN_ilN3zpxGWXgjOm8oHXOWGhTZ4x9wSG/s320/007.gif" /></a></div><br />
Agora depois de alterar a largura da imagem é só salva, agora vai uma das melhores dicas para você deixar seu site leve, SEMPRE salve as imagens em <b>File -> Save for Web & Devices</b> repare o parâmetros Preset para GIF para definir o tipo da imagem e salve-o com <span style="font-size: small;"><b>fundo.gif</b></span>.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTVXYDOvrWoMwrWOHdas1Gh-8azKVXiCbsryCp8HjK_-X8B-x4tclpFyGDzQNUWMuR7PMmFxD7oK8eYkdzUV-AVqgV_itVyuyzLtZkoY3_n4oKSPmptA-TGYqOP_iSBElu9Foj8t7IKlck/s1600-h/008.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="456" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTVXYDOvrWoMwrWOHdas1Gh-8azKVXiCbsryCp8HjK_-X8B-x4tclpFyGDzQNUWMuR7PMmFxD7oK8eYkdzUV-AVqgV_itVyuyzLtZkoY3_n4oKSPmptA-TGYqOP_iSBElu9Foj8t7IKlck/s640/008.gif" width="640" /></a></div><br />
Agora que já temos a imagem de fundo, vamos por a mão na massa. Crie um documento HTML em branco.<br />
<code><br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br />
<title>Web Como um todo! me ensinou - Meu primeiro fundo degradê Vertical</title><br />
</head><br />
<br />
<body><br />
<a href="http://webcomoumtodo.blogspot.com" title="Web Como Um Todo!">Web Como Um Todo!</a><br />
</body><br />
</html><br />
</code><br />
<br />
Crie um documento CSS denominado <b>wcut.css</b> com o código abaixo, onde definirá propriedade do fundo da tag <b>body</b><br />
<code><br />
@charset "utf-8";<br />
/* CSS Document */<br />
<br />
body{<br />
background:transparent url(fundo.gif) repeat-x 0 0;<br />
}<br />
</code><br />
<br />
Agora é só incluir a referência ao documento css na página HTML, insira a linha abaixo entre as tags <head> e </head><br />
<code><br />
<link href="wcut.css" rel="stylesheet" type="text/css"></link><br />
</code><br />
<br />
Pronto! Seu fundo degradê para seu site está pronto! É só abrir o arquivo para conferir o resultado. Veja aqui o <span style="font-size: large;"><a target="_blank" href="http://webcomoumtodo.110mb.com/tutorial/degrade/degrade.html">Resultado Final</a> </span>deste tutorial.Rodrigo Machadohttp://www.blogger.com/profile/11045831958737425062noreply@blogger.com0tag:blogger.com,1999:blog-4174005354452376521.post-3772234301375430332010-03-07T15:10:00.002-03:002010-03-07T15:19:00.226-03:00Menu CSS Horizontal (efeito flash)Olá, hoje você VAI aprender como é simples fazer um menu CSS horizontal com estilo flash respeitando os padrões do <a href="http://webcomoumtodo.blogspot.com/2010/03/o-que-e-w3c.html" target="_blank">W3C</a>.<br />
<br />
Primeiramente vamos criar um documento <a href="http://webcomoumtodo.blogspot.com/2009/07/html-basico-reconhecendo-o-territorio.html" target="_blank">HTML básico</a> como este abaixo(chame de <span style="font-weight: bold;">wcut-menu002html</span>):<br />
<code><br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br />
<title>Web Como um todo! me ensinou - Meu primeiro Menu CSS Vertical</title><br />
</head><br />
<br />
<body><br />
</body><br />
</html><br />
</code><br />
Em seguida, insira o código de uma lista comum HTML:<br />
<code><br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br />
<title>Web Como um todo! me ensinou - Meu primeiro Menu CSS Vertical</title><br />
</head><br />
<body><br />
<ul id="wcut-menu"><br />
<li><a href="#" title="home">home</a></li><br />
<li><a href="#" title="release">release</a></li><br />
<li><a href="#" title="produtos">produtos</a></li><br />
<li><a href="#" title="contato">contato</a></li><br />
</ul><br />
<br />
</body><br />
</html><br />
</code><br />
Note que foi incluído um identificador para esta lista (atributo <span style="font-weight: bold;">id</span>), e também foi utilizado o atributo <span style="font-weight: bold;">title</span> para atender aos Padrões <a href="http://webcomoumtodo.blogspot.com/2010/03/o-que-e-w3c.html" target="_blank">W3C</a> para melhor <a href="http://pt.wikipedia.org/wiki/Acessibilidade" target="_blank">acessibilidade</a>.<br />
<br />
Veja como o exemplo ficou:<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0BmyQwvU-bCPwI82WNRoOje_6dYpO_b6cIH5vJNuB-LPhLj0cY6H-Xi0V_WbIxkCatWtvGvbh2BcTKoxmLl3o7VEhnIRztreN_qU2To_KEHrVHQpTfbx63iCqTglpfjzNwu_AJ9coQ09i/s1600/print001.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0BmyQwvU-bCPwI82WNRoOje_6dYpO_b6cIH5vJNuB-LPhLj0cY6H-Xi0V_WbIxkCatWtvGvbh2BcTKoxmLl3o7VEhnIRztreN_qU2To_KEHrVHQpTfbx63iCqTglpfjzNwu_AJ9coQ09i/s320/print001.gif" /></a></div><br />
Reparou as bolinhas e a cor horrível né?<br />
<br />
Então chegou a hora de brincar com o CSS e alterar o estilo da lista. Crie uma folha de estilos (CSS), nomeie para <span style="font-weight: bold;">wcut002.css</span> e insira o código abaixo:<br />
<code><br />
@charset "utf-8";<br />
/* CSS Document */<br />
<br />
#wcut-menu{<br />
font-family:Arial, Helvetica, sans-serif; /* Define-se a família da fonte */ <br />
list-style-type:none; /* Retira os marcadores (bolinhas) da lista */ <br />
text-align:center; /* Centraliza o texto dentro do menu */<br />
padding:0px 0px; /* Elimina os espaços da esquerda */<br />
}<br />
<br />
#wcut-menu li{<br />
display:inline; /* exibe os elementos em linha (horizontalmente) */<br />
}<br />
</code><br />
<br />
Agora adicione esta linha entre as tags <head> e </head><br />
<code><br />
<link rel="stylesheet" href="wcut002.css" type="text/css" /><br />
</code><br />
Agora sim, já deu uma melhorada tente entender qual impacto cada linha de CSS teve.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1_DoSv2cnl7DtchKa0yUNWwZHMHThF7GGGKW_Yo5e28XzmXE7Z556mo6YqcLMnPiljIZWQE-1cwAHIHO7MctZ95KXGkdhflyeMNp6nP_ES5rzBOYG-K82gmPm8e5HkFZ6rFBubRJaJp1m/s1600-h/001.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1_DoSv2cnl7DtchKa0yUNWwZHMHThF7GGGKW_Yo5e28XzmXE7Z556mo6YqcLMnPiljIZWQE-1cwAHIHO7MctZ95KXGkdhflyeMNp6nP_ES5rzBOYG-K82gmPm8e5HkFZ6rFBubRJaJp1m/s320/001.gif" /></a></div><br />
<br />
Vamos agora editar cadalink item da lista (tag <span style="font-weight: bold;">li </span>no HTML)<br />
<code><br />
#wcut-menu li a{<br />
color:#663300; /* Altera a cor do elemento */<br />
text-decoration:none; /* Retira o sublinhado do link */<br />
height:30px;<br />
display:inline-block; /* preenche toda a área como link (em linha) */<br />
}</code><br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitYzfzg9qZGap-eIQBtcvuPJnYt4r1B7OGPEBDcTS5Q34tHQvfN0r0Kiq1OgIOrB7dsUSfQYLbOhdexICENhBEbx4pjOZ5si7QEKA1Zor2KVSKD1ZR0Ve0dsnJh74YeHhlONsVqhXXxG9r/s1600-h/002.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitYzfzg9qZGap-eIQBtcvuPJnYt4r1B7OGPEBDcTS5Q34tHQvfN0r0Kiq1OgIOrB7dsUSfQYLbOhdexICENhBEbx4pjOZ5si7QEKA1Zor2KVSKD1ZR0Ve0dsnJh74YeHhlONsVqhXXxG9r/s320/002.gif" /></a></div><br />
Agora, você vai aprender uma propriedade do CSS que será muito útil em efeitos, adicione a linha abaixo em seu arquivo CSS<br />
<code><br />
#wcut-menu li a:hover{<br />
background-color:#663300;<br />
color:#FFFFFF;<br />
}<br />
</code><br />
<br />
Eis que surge como mágica um efeito como menu flash<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj97G0SRdjtuwt8LsJ8jwvhZ1W-TwbC1D2RTIYAldgVlKGCTGc3QM51OLAZLUScpvBPIPqIF5wvQw6lphLMAaMcvhGM5HkZKd20GwJEgQ7Be8DDRqHKvEA1eqH-jNb6iPh0oHyO1tr-k8pB/s1600-h/003.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj97G0SRdjtuwt8LsJ8jwvhZ1W-TwbC1D2RTIYAldgVlKGCTGc3QM51OLAZLUScpvBPIPqIF5wvQw6lphLMAaMcvhGM5HkZKd20GwJEgQ7Be8DDRqHKvEA1eqH-jNb6iPh0oHyO1tr-k8pB/s320/003.gif" /></a></div><br />
<br />
A propriedade :hover em frente ao identificador css (neste caso "<code>#wcut-menu li a</code>" que indica que busca um elemento <span style="font-weight: bold;">'a'</span> dentro de uma tag <span style="font-weight: bold;">'li'</span> dentro de um elemento identificado por <span style="font-weight: bold;">wcut-menu</span> ) faz com que o que está descrito dentro será setado somente quando o mouse passar pelo elemento.<br />
<br />
Veja aqui o <span style="font-size: large;"><a href="http://webcomoumtodo.110mb.com/tutorial/menu/horizontal/2010-03-07/wcut-menu002.html" target="_blank">Resultado Final</a></span> do tutorial<br />
<br />
Espero que tenha ajudado. Abraços!Rodrigo Machadohttp://www.blogger.com/profile/11045831958737425062noreply@blogger.com0tag:blogger.com,1999:blog-4174005354452376521.post-60395695478909560542010-03-04T00:04:00.007-03:002010-03-07T02:08:35.804-03:00Menu CSS Vertical (efeito flash)Olá, hoje você VAI aprender como é simples fazer um menu CSS com estilo flash, algo que fica simples, leve(devemos nos preocupar sempre com isso, pois AINDA temos muitos usuários sem banda larga no Brasil), acessível, ou seja, respeitando os padrões do <a href="http://webcomoumtodo.blogspot.com/2010/03/o-que-e-w3c.html" target="_blank">W3C</a>.<br />
<br />
Primeiramente vamos criar um documento <a href="http://webcomoumtodo.blogspot.com/2009/07/html-basico-reconhecendo-o-territorio.html" target="_blank">HTML básico</a> como este abaixo(chame de <span style="font-weight: bold;">wcut-menu.html</span>):<br />
<code><br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br />
<title>Web Como um todo! me ensinou - Meu primeiro Menu CSS Vertical</title><br />
</head><br />
<br />
<body><br />
</body><br />
</html><br />
</code><br />
Em seguida, insira o código de uma lista comum HTML:<br />
<code><br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br />
<title>Web Como um todo! me ensinou - Meu primeiro Menu CSS Vertical</title><br />
</head><br />
<body><br />
<ul id="wcut-menu"><br />
<li><a href="#" title="home">home</a></li><br />
<li><a href="#" title="release">release</a></li><br />
<li><a href="#" title="produtos">produtos</a></li><br />
<li><a href="#" title="contato">contato</a></li><br />
</ul><br />
<br />
</body><br />
</html><br />
</code><br />
Note que foi incluído um identificador para esta lista (atributo <span style="font-weight: bold;">id</span>), e também foi utilizado o atributo <span style="font-weight: bold;">title</span> para atender aos Padrões <a href="http://webcomoumtodo.blogspot.com/2010/03/o-que-e-w3c.html" target="_blank">W3C</a> para melhor <a href="http://pt.wikipedia.org/wiki/Acessibilidade" target="_blank">acessibilidade</a>.<br />
<br />
Veja como o exemplo ficou:<br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0BmyQwvU-bCPwI82WNRoOje_6dYpO_b6cIH5vJNuB-LPhLj0cY6H-Xi0V_WbIxkCatWtvGvbh2BcTKoxmLl3o7VEhnIRztreN_qU2To_KEHrVHQpTfbx63iCqTglpfjzNwu_AJ9coQ09i/s1600-h/print001.gif" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" target="_blank"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5444601299700883026" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0BmyQwvU-bCPwI82WNRoOje_6dYpO_b6cIH5vJNuB-LPhLj0cY6H-Xi0V_WbIxkCatWtvGvbh2BcTKoxmLl3o7VEhnIRztreN_qU2To_KEHrVHQpTfbx63iCqTglpfjzNwu_AJ9coQ09i/s320/print001.gif" style="cursor: pointer; display: block; height: 107px; margin: 0px auto 10px; text-align: center; width: 95px;" /></a>Reparou as bolinhas e a cor horrível né?<br />
<br />
Então chegou a hora de brincar com o CSS e alterar o estilo da lista. Crie uma folha de estilos (CSS), nomeie para <span style="font-weight: bold;">wcut.css</span> e insira o código abaixo:<br />
<code><br />
@charset "utf-8";<br />
/* CSS Document */<br />
<br />
#wcut-menu{<br />
font-family:Arial, Helvetica, sans-serif; /* Define-se a família da fonte */<br />
border: 1px solid #000000; /* Define as propriedades da borda do elemento */<br />
width: 200px; /* Define a largura do elemento em pixels(px) */<br />
list-style-type:none; /* Retira os marcadores (bolinhas) da lista */<br />
text-align:center; /* Centraliza o texto dentro do menu */<br />
padding-left:0px; /* Elimina os espaços da esquerda */<br />
}<br />
</code><br />
<br />
Agora adicione esta linha entre as tags <head> e </head><br />
<code><br />
<link rel="stylesheet" href="wcut.css" type="text/css" /><br />
</code><br />
Agora sim, já deu uma melhorada tente entender qual impacto cada linha de CSS teve.<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYYe_O63N3uOldGy19CI3d0zayjL_CBNEPGjQs_vSX_y5mYhpSB2RJadq1oaetZmMQSOU1xmH0Q5VeL3g5gj1kNFrZ9fSxr9_92XLBw9-CXnZmR2ctqE7By8xYM-VUeYfZbouORSnQ8KHH/s1600-h/print002.gif" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" target="_blank"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5444608463095575954" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYYe_O63N3uOldGy19CI3d0zayjL_CBNEPGjQs_vSX_y5mYhpSB2RJadq1oaetZmMQSOU1xmH0Q5VeL3g5gj1kNFrZ9fSxr9_92XLBw9-CXnZmR2ctqE7By8xYM-VUeYfZbouORSnQ8KHH/s320/print002.gif" style="cursor: pointer; display: block; height: 89px; margin: 0px auto 10px; text-align: center; width: 229px;" /></a><br />
Vamos agora editar cada item da lista (tag <span style="font-weight: bold;">li </span>no HTML)<br />
<code><br />
#wcut-menu li a{<br />
display:block; /* Exibe o link em bloco (ocupa toda área) */<br />
color:#663300; /* Altera a cor do elemento */<br />
text-decoration:none; /* Retira o sublinhado do link */<br />
}<br />
</code><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtE2AUx6ux-ixtvDbuB6qeMQ5vbYmuX8QU-gpvwT3lUZzg0ZCK8YMkVzgV9-WhilOmjpNrdy7OaJEfm3z7vjTflrT_uEM4n7HH6iuAPKO-SBQMiFn-tjYBZxfzKwnD1jsKLhiNGja9ZbKv/s1600-h/print003.gif" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" target="_blank"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5444609039413730482" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtE2AUx6ux-ixtvDbuB6qeMQ5vbYmuX8QU-gpvwT3lUZzg0ZCK8YMkVzgV9-WhilOmjpNrdy7OaJEfm3z7vjTflrT_uEM4n7HH6iuAPKO-SBQMiFn-tjYBZxfzKwnD1jsKLhiNGja9ZbKv/s320/print003.gif" style="cursor: pointer; display: block; height: 89px; margin: 0px auto 10px; text-align: center; width: 229px;" /></a>Agora, você vai aprender uma propriedade do CSS que será muito útil em efeitos, adicione a linha abaixo em seu arquivo CSS<br />
<code><br />
#wcut-menu li a:hover{<br />
background-color:#663300;<br />
color:#FFFFFF;<br />
}<br />
</code><br />
<br />
Eis que surge como mágica um efeito como menu flash<br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigGaesyMpX9HXsbgAOES106rGcG5oaF-U-UZLD1nr5nKt6IHQYNupRZhFEuFgnEjoZv6320zI_H3tKIkUh7169EDaomr6AlhJ9zwk-GqeSftPnyJuAKf7jnHncOw-pMVQXBX1XUEX8Nlw7/s1600-h/print004.gif" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" target="_blank"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5444610892671791330" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigGaesyMpX9HXsbgAOES106rGcG5oaF-U-UZLD1nr5nKt6IHQYNupRZhFEuFgnEjoZv6320zI_H3tKIkUh7169EDaomr6AlhJ9zwk-GqeSftPnyJuAKf7jnHncOw-pMVQXBX1XUEX8Nlw7/s320/print004.gif" style="cursor: pointer; display: block; height: 89px; margin: 0px auto 10px; text-align: center; width: 229px;" /></a>A propriedade :hover em frente ao identificador css (neste caso "<code>#wcut-menu li a</code>" que indica que busca um elemento <span style="font-weight: bold;">'a'</span> dentro de uma tag <span style="font-weight: bold;">'li'</span> dentro de um elemento identificado por <span style="font-weight: bold;">wcut-menu</span> ) faz com que o que está descrito dentro será setado somente quando o mouse passar pelo elemento.<br />
<br />
Veja aqui o <span style="font-size: large;"><a href="http://webcomoumtodo.110mb.com/tutorial/menu/vertical/2010-03-03/wcut-menu.html" target="_blank">Resultado Final</a></span> do tutorial<br />
<br />
Bom, acho que isso já abre a mente de muitos, agora é só se divertir e criar. Qualquer dúvida é só comentar que respondemos. Pra quem quer se aprofundar mais no CSS <a href="http://w3schools.com/css/default.asp" target="_blank">este site</a> descreve todas as propriedades do CSS, é só devorar.<br />
<br />
Espero que tenha ajudado. Abraços!Rodrigo Machadohttp://www.blogger.com/profile/11045831958737425062noreply@blogger.com1tag:blogger.com,1999:blog-4174005354452376521.post-30596557263744672202010-03-03T23:21:00.001-03:002010-03-03T23:24:07.088-03:00O que é W3C ?W3C significa "World Wide Web Consortium" é um consórcio de empresas de tecnologia, atualmente com cerca de 500 membros. Fundado por Tim Berners-Lee em 1994 para levar a Web ao seu potencial máximo, por meio do desenvolvimento de protocolos comuns e fóruns abertos que promovem sua evolução e asseguram a sua interoperabilidade.<br /><br />O W3C desenvolve padrões para a criação e a interpretação dos conteúdos para a Web. Sites desenvolvidos segundo esses padrões podem ser acessados e visualizados por qualquer pessoa ou tecnologia, independente de hardware ou software utilizados, como celulares (em Portugal, telemóvel), PDAs, de maneira rápida e compatível com os novos padrões e tecnologias que possam surgir com a evolução da internet.<br /><br />Para alcançar seus objetivos, a W3C possui diversos comitês que estudam as tecnologias existentes para a apresentação de conteúdo na Internet e criam padrões de recomendação para utilizar essas tecnologias. Com a padronização, os programas conseguem acessar facilmente os códigos e entender onde deve ser aplicado cada conhecimento expresso no documento.<br /><br />Padrões seus como HTML, XHTML e CSS são muito populares, contudo, em muitos casos são usados de forma errônea devido ao desconhecimento da especificação.<br /><br />É um dever de todo desenvolvedor Web respeitar e seguir os padrões de acessibilidade do W3C, pois de outro modo poderá impor barreiras tecnológicas a diversas pessoas, desestimulando e até mesmo impedindo o acesso a suas páginas.Rodrigo Machadohttp://www.blogger.com/profile/11045831958737425062noreply@blogger.com0tag:blogger.com,1999:blog-4174005354452376521.post-89257478382315891742010-02-19T22:42:00.006-02:002010-02-20T00:12:18.339-02:00O que é/Como usar JQuery?JQuery é um framework javascript que enfatiza a interação entre HTML e Javascript, usado em vários sites mais acessados se tornou o framework javascript mais popular do mundo.<br /><br /><span style="font-weight: bold;font-size:130%;" >Por que usar?</span><br />JQuery é Open Source (ô Beleza!) e tem uma sintaxe que torna muito mais fácil a seleção de elementos via DOM, criar animações (Sem flash, é claro!) e torna o AJAX bem simples, e o melhor te deixa criar plugins para facilitar ainda mais o desenvolvimento de todos.<br /><br /><span style="font-size:130%;"><span style="font-weight: bold;">Quem está de olho?</span></span><br />Além de nós(Desenvolvedores), a Microsoft e Nokia já estão de olha para adicionar o JQuery em suas plataformas.<br /><br /><span style="font-size:130%;"><span style="font-weight: bold;">Como usar?</span></span><br /><br />- Faça o <a target="_blank" href="http://docs.jquery.com/Downloading_jQuery">download</a> da versão mais recente do JQuery.<br /><br />- <span style="font-weight: bold;">Importe </span>o código em sua página HTML:<br /><br /><code><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /><html xmlns="http://www.w3.org/1999/xhtml"><br /><head><br /><script type="text/javascript" src="jquery.js"></script><br /><br /><script type="text/javascript"><br /><br /></script><br /></head><br /><body><br /><a href="http://jquery.com/">jQuery</a><br /></body><br /></html><br /></code><br /><br />A maioria dos desenvolvedores quando precisam executar algo quando a página está pronta utiliza o método abaixo<br /><code>window.onload = function(){ alert("welcome"); }<br /></code><br />Porém este código executa antes da página ser completamente carregada, por isso com JQuery é simples resolver este problema, apenas utilize:<br /><code>$(document).ready(function(){<br />// Your code here<br />});</code><br /><span style="font-size:130%;"><span style="font-weight: bold;">Seleção de objetos</span></span><br />Você pode selecionar um objeto pela sua <span style="font-weight: bold;">classe</span><br /><code>$('.myCssClass')</code><br />ou por seu <span style="font-weight: bold;">id</span><br /><code>$('#myId')</code><br />ou até mesmo pelo nome da <span style="font-weight: bold;">tag html</span><br /><code>$('a')</code><br /><span style="font-size:130%;"><span style="font-weight: bold;">Eventos</span></span><br />Você também pode setar eventos como por exemplo click de um elemento.<code><br />$(document).ready(function(){<br />$("a").click(function(event){<br />alert("Thanks for visiting!");<br />});<br />});</code><br /><span style="font-size:130%;"><span style="font-weight: bold;">Não é mágica</span><span style="font-weight: bold;">, é JQuery</span></span><br />Então o exemplo completo fica assim, copie e salve como .html e veja a mágica do jquery:<br /><code><br /><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /><html xmlns="http://www.w3.org/1999/xhtml"><br /><head><br /><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><br /><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script><br /><script type="text/javascript"><br />$(document).ready(function(){<br /> $("a").click(function(event){<br /> alert("Não é mágica, é JQuery. (Web como um todo)");<br /> event.preventDefault();<br /> });<br />});<br /><br /></script><br /></head><br /><body><br /><a href="http://jquery.com/">jQuery</a><br /></body><br /></html><br /></code><br />Gostou de utilizar um evento como o click? <a target="_blank" href="http://api.jquery.com/category/events/">Nesta página</a> tem a descrição de todos eventos da biblioteca JQuery.<br /><br /><span style="font-size:130%;"><span style="font-weight: bold;">Classes CSS</span></span><br /><br />Você pode adicionar ou remover uma classe CSS a um objeto em tempo de execução<code><br />$("a").addClass("test");<br />$("a").removeClass("test");<br /></code><br />Aqui neste link você pode ver a <a target="_blank" href="http://docs.jquery.com/Frequently_Asked_Questions">FAQ do JQuery</a> onde poderá retirar as dúvidas e com certeza aprender o básico do JQuery.<br /><br />Bom por hoje é isso pessoal, se tiverem dúvidas é só deixar nos comentários.<br /><br />Abraços.Rodrigo Machadohttp://www.blogger.com/profile/11045831958737425062noreply@blogger.com0tag:blogger.com,1999:blog-4174005354452376521.post-13947516202529681382009-10-13T10:53:00.002-03:002009-10-13T11:16:26.970-03:00O que é CSS ?<ul><li>CSS é a abriviação de Cascading Style Sheets (Folhas de estilos em cascata)</li><li> Definem como/onde mostrar os elementos HTML</li><li> Vieram com o HTML 4.0 para solução de alguns problemas</li><li> Estilos podem ser armazenados em arquivos separados</li></ul> <br /><span style="font-weight: bold;"> Porque foi inventado?</span><br /><span class="fullpost"> <br /> Pense em um site grande como R7.com, onde as seções (Notícias, entretenimento, vídeos, etc..) tem sua cor definida e quando se entra em uma seção todos os links e textos são da mesma cor. Imagine se o diretor de marketing resolve modificar a cor da seção "entretenimento" porque a cor atual não agrada aos leitores.<br /><br /> Até aí tudo bem, agora imagine-se no lugar do desenvolvedor responsável pela mudança (credo!), ter que alterar todas as tags font para alterar as cores das fontes de cada elemento. Imagine o trabalho e o tempo que isso iria levar.<br /> <br /> Graças a pesadelos como este o CSS foi inventado para poder separar as camadas de conteúdo (HTML) e interface (CSS), ou seja, você atribui estilos para seus elemento HTML sem ter que modificar NADA no código HTML.<br /><br /><br /><br /><br /><br /><br /></span>Rodrigo Machadohttp://www.blogger.com/profile/11045831958737425062noreply@blogger.com0tag:blogger.com,1999:blog-4174005354452376521.post-33410914857538726782009-10-13T10:27:00.002-03:002009-10-13T10:47:55.118-03:00Separar camadas de apresentação e conteúdoUma prática muito comun no HTML é a utilização de tabelas para formatar o layout do site.<br /> <br />Assim como a tag font que era usada para formatar a fonte do texto (tamanho, cor). Porém estas não são uma boa prática, pois o layout da página não deve ser definido no próprio HTML e sim em um folha de estilos (CSS).<br /><br />A versão 4.0 do HTML foi criada para ser removido toda a formatação do documento HTML e armazenar isto em uma folha de estilo.<br /><br />Nesta versão a apresentação da página foi separada de sua estrutura, tendo assim total controle do layout (cores e posição dos elementos) sem modificar nada no conteúdo do documento.<br /><br />Este post foi somente para deixar bem claro que o conteúdo deve ser separado do layout, nos próximos post falarei mais sobre CSS.Rodrigo Machadohttp://www.blogger.com/profile/11045831958737425062noreply@blogger.com0tag:blogger.com,1999:blog-4174005354452376521.post-62745573504803120012009-08-18T10:16:00.025-03:002010-03-07T00:44:05.272-03:00Tabela de Acentuação e Caracteres Especiais em HTMLBom dia!<br /><br />No HTML não podemos/devemos colocar os acentos normalmente no código HTML, pois provavelmente não será interpretado pelo servidor, então devems usar os códigos HTML's devidos para isso...<br /><br /><span class="fullpost"><br /><span style="font-weight: bold;">ACENTOS</span><br /><table border="1" cellspacing="0" width="100%"><tbody><tr><td class="a">á</td><td>&aacute;</td><td class="a">Á</td><td>&Aacute;</td><td class="a">ã</td><td>&atilde;</td><td class="a">Ã</td><td>&Atilde;</td></tr><tr><td class="a">â</td><td>&acirc;</td><td class="a">Â</td><td>&Acirc;</td><td class="a">à</td><td>&agrave;</td><td class="a">À</td><td>&Agrave;</td></tr><tr><td class="a">é</td><td>&eacute;</td><td class="a">É</td><td>&Eacute;</td><td class="a">ê</td><td>&ecirc;</td><td class="a">Ê</td><td>&Ecirc;</td></tr><tr><td class="a">í</td><td>&iacute;</td><td class="a">Í</td><td>&Iacute;</td><td class="a">ó</td><td>&oacute;</td><td class="a">Ó</td><td>&Oacute;</td></tr><tr><td class="a">õ</td><td>&otilde;</td><td class="a">Õ</td><td>&Otilde;</td><td class="a">ô</td><td>&ocirc;</td><td class="a">Ô</td><td>&Ocirc;</td></tr><tr><td class="a">ú</td><td>&uacute;</td><td class="a">Ú</td><td>&Uacute;</td><td class="a">ü</td><td>&uuml;</td><td class="a">Ü</td><td>&Uuml;</td></tr><tr><td class="a">ç</td><td>&ccedil;</td><td class="a">Ç</td><td>&Ccedil;</td><td colspan="4"></td></tr></tbody></table><br /><br /><br /><span style="font-weight: bold;">CARACTERES ESPECIAIS</span><br /><table border="1" cellspacing="0" width="100%"><tbody><tr><td class="a"><br /></td><td>espaço</td><td>&nbsp;</td></tr><tr><td class="a">&</td><td>e comercial</td><td>&amp;</td></tr><tr><td class="a">></td><td>maior que</td><td>&gt;</td></tr><tr><td class="a"><</td><td>menor que</td><td>&lt;</td></tr><tr><td class="a">ˆ</td><td>acento circunflexo</td><td>&circ;</td></tr><tr><td class="a">˜</td><td>acento til</td><td>&tilde;</td></tr><tr><td class="a">¨</td><td>acento trema</td><td>&uml;</td></tr><tr><td class="a">´</td><td>acento agudo</td><td>&cute;</td></tr><tr><td class="a">¸</td><td>cedilha</td><td>&cedil;</td></tr><tr><td class="a">"</td><td>aspas duplas</td><td>&quot;</td></tr><tr><td class="a">" <b>e</b> "</td><td>aspas duplas (esquerda e direita)</td><td>&ldquo; <b>e</b> &rdquo;</td></tr><tr><td class="a">‘ <b>e</b> ’</td><td>aspas simples (esquerda e direita)</td><td>&lsquo; <b>e</b> &rsquo;</td></tr><tr><td class="a">‹ <b>e</b> ›</td><td>aspas angulares simples (esquerda e direita)</td><td>&lsaquo; <b>e</b> &rsaquo;</td></tr><tr><td class="a">« <b>e</b> »</td><td>aspas angulares duplas (esquerda e direita)</td><td>&laquo; <b>e</b> &raquo;</td></tr><tr><td class="a">º</td><td>ordenal masculino</td><td>&ordm;</td></tr><tr><td class="a">ª</td><td>ordinal feminino</td><td>&ordf;</td></tr><tr><td class="a">–</td><td>travessão 'en'</td><td>&ndash;</td></tr><tr><td class="a">—</td><td>travessão 'em'</td><td>&mdash;</td></tr><tr><td class="a"> </td><td>hífen oculto</td><td>&shy;</td></tr><tr><td class="a">¯</td><td>macron</td><td>&macr;</td></tr><tr><td class="a">…</td><td>reticências</td><td>&hellip;</td></tr><tr><td class="a">¦</td><td>barra vertical</td><td>&brvbar;</td></tr><tr><td class="a">•</td><td>marcador (bullet)</td><td>&bull;</td></tr><tr><td class="a">¶</td><td>parágrafo</td><td>&para;</td></tr></tbody></table><br /><br /><br /><span style="font-weight: bold;">CARACTERES COMERCIAIS</span><br /><table border="1" cellspacing="0" width="100%"><tbody><tr><td class="a">©</td><td>copyright</td><td>&copy;</td></tr><tr><td class="a">®</td><td>marca registrada</td><td>&reg</td></tr><tr><td class="a">™</td><td>trade mark</td><td>&trade;</td></tr><tr><td class="a">£</td><td>libra esterlina</td><td>&pound;</td></tr><tr><td class="a">¢</td><td>centavo</td><td>&cent;</td></tr><tr><td class="a">€</td><td>euro</td><td>&euro;</td></tr><tr><td class="a">¥</td><td>iene (yen)</td><td>&yen;</td></tr><tr><td class="a">¤</td><td>símbolo monetário</td><td>&curren;</td></tr></tbody></table><br /><br /></span>Rodrigo Machadohttp://www.blogger.com/profile/11045831958737425062noreply@blogger.com1tag:blogger.com,1999:blog-4174005354452376521.post-87506111676429045472009-07-31T12:12:00.003-03:002009-07-31T12:26:05.970-03:00HTML Básico - Reconhecendo o territórioNeste artigo temos o básico do HTML para desenvover sua Primeira Web Page, comentando algumas tags do HTML e explicando um pouco sobre atributos...<br /><br /><span class="fullpost"><br /><br /><span style="font-weight: bold;">HTML Break Lines (Pulos de Linha)</span><br /><br /><span style="font-style: italic;">Pulos de linhas</span> são definidos pela tag <br /><br /><br /><div class="codigo"><br />Esta frase continua na <br /> outra linha<br /></div><br /><br /><span style="font-weight: bold;">HTML Rules (Linhas)</span><br /><br />A tag <hr> cria uma linha horizontal.<br /><br /><div class="codigo"><br />Texto<br /><hr /><br />texto depois da linha<br /></div><br /><br /><span style="font-weight: bold;">Tags de formatacao de textos</span><br /><table class="reference" border="1" cellspacing="0" width="100%"><tbody><tr><th align="left" width="20%">Tag</th><th align="left" width="80%">Description</th></tr><tr><td><b></td><td>Defines bold text</td></tr><tr><td><big></td><td>Defines big text</td></tr><tr><td><em></td><td>Defines emphasized text </td></tr><tr><td><i></td><td>Defines italic text</td></tr><tr><td><small></td><td>Defines small text</td></tr><tr><td><strong></td><td>Defines strong text</td></tr><tr><td><sub></td><td>Defines subscripted text</td></tr><tr><td><sup></td><td>Defines superscripted text</td></tr><tr><td><ins></td><td>Defines inserted text</td></tr><tr><td><del></td><td>Defines deleted text</td></tr><tr><td><s></td><td class="deprecated">Deprecated. Use <del> instead</td></tr><tr><td><strike></td><td class="deprecated">Deprecated. Use <del> instead</td></tr><tr><td><u></td><td class="deprecated">Deprecated. Use styles instead</td></tr></tbody></table><br /><br /><span style="font-weight: bold;">HTML Paragraphs</span><br /><br />Parágrafos são definidos pela tag <p><br /><br /><div class="codigo"><br /><p>Este é um parágrafo</p><br /></div><br /><br /><span style="font-weight: bold;">HTML links</span><br /><br />Links HTML são definidos pela tag <a><br /><br /><div class="codigo"><br /><a href="http://www.wikipedia.org"> Clique aqui! </a><br /></div><br /><br /><span style="font-weight: bold;">HTML Headings ( cabeçalhos )</span><br /><br />Cabeçalhos são definidos pelas tags <h1> até <h6><br /><br /><div class="codigo"><br /><h1>Este é um cabeçalho</h1><br /><h2>Este é um cabeçalho</h2><br /><h3>Este é um cabeçalho</h3><br /></div><br /><br /><span style="font-weight: bold;">HTML Images</span><br /><br />As imagens são definidas pela tag <img><br /><br /><div class="codigo"><br /><img src="http://www.google.com/intl/en_ALL/images/logo.gif" width="104" height="142" /><br /></div><br /><br /><span style="font-weight: bold;">Comentários HTML</span><br /><br />Os comentários são trechos que inseridos são visualizados apenas no código. Mas para que inserir algo que o usuário não vê?<br />Inserindo comentários você estará se ajudando na hora de fazer alguma manutenção na página, porém não se lembrava porque inseriu alguma tag.<br /><br /><div class="codigo"><br /><!-- Aqui está um comentário --><br /></div><br /><br /><span style="font-weight: bold;">Atributos</span><br /><br />Perceba que existem <span style="font-style: italic;">atributos </span>nas tags... <span style="font-weight: bold;">?</span> ... Como assim atributos?<br /><br />Veja na tag <img> existem 3 atributos<span style="font-style: italic;"> src</span> (caminho), <span style="font-style: italic;">width </span>(largura) e <span style="font-style: italic;">height </span>(altura), que possuem seus respectivos valores.<br /><br />Atributos providenciam alguma informação para o <span style="font-style: italic;">elemento </span>(que está entre a Tag), usa-se sempre <span style="font-weight: bold;">nome="valor"</span><br /><br />Por convenção também <span style="font-weight: bold;">sempre coloque os atributos em letra minúscula</span> e o <span style="font-weight: bold;">valor entre aspas</span>.<br /><br />Existem diversos atributos que podem ser acrescentados as tags, confira aqui <a href="http://www.w3schools.com/tags/default.asp" target="_blank">nesta lista</a> todos eles caso esteja curioso.<br /><br />Dúvidas? Comentem todas!<br /></span>Rodrigo Machadohttp://www.blogger.com/profile/11045831958737425062noreply@blogger.com0tag:blogger.com,1999:blog-4174005354452376521.post-11077489312958434402009-07-30T17:57:00.010-03:002010-03-07T00:41:25.657-03:00O que é HTML ?HTML é uma linguagem para descrição de Web Pages, acrônimo para a expressão inglesa <i>HyperText Markup Language</i> (Linguagem de Marcação de Hipertexto), ou seja, <span style="font-weight: bold;">NÃO</span> é uma <a href="http://pt.wikipedia.org/wiki/Linguagem_de_programa%C3%A7%C3%A3o" target="_blank">linguagem de programação</a>, é apenas uma "linguagem de formatação", e para isso utilizaremos as 'TAGS' (nome dado para as "etiquetas marcadoras" do HTML)<br /><span class="fullpost"><br /><br /><span style="font-weight: bold;">TAGs</span><br /><br />'TAGs' são palavras chaves que vem entre os sinais de "<" (menor que) e ">" (maior que). Exemplo: <html><br /><br />As tags, devem aparecer em pares como <b> (indica o início) e </b>(indica o final) (<b> é a tag que indica que a palavra que estiver entre "<b>" e "</b>" será marcado com <span style="font-weight: bold;">negrito</span>.<br /><br /><br />Abaixo um exemplo <u>bem básico</u> de HTML para se entender melhor.<br /><br /><div class="codigo"><br /><html><br /><body><br /><br /><h1>Meu primeiro h1</h1><br /><br /><p>Meu primeiro parágrafo</p><br /><br /></body><br /></html><br /></div><br /><br /><span style="font-weight: bold;">Explicaçao do código:</span><br /><ul><li>O texto entre as tags <html> e </html> descrevem a página Web.</li><li>O texto entre as tags <body> e </body> é a área visível da página.</li><li>O texto entre as tags <h1> e </h1> é mostrado como um cabeçalho.</li><li>O texto entre as tags <p> e </p> é mostrado como um parágrafo.</li></ul><br /><span style="font-size:85%;"><br /></span><span style="font-size:78%;"><span style="font-weight: bold;font-size:85%;" >Bibliografia</span><br /><br /> <a style="font-style: italic;" href="http://www.wikipedia.org/">Wikipedia</a><br /> <a style="font-style: italic;" href="http://www.w3schools.com/">W3c</a></span><br /><br /><br /></span>Rodrigo Machadohttp://www.blogger.com/profile/11045831958737425062noreply@blogger.com0