27 de dezembro de 2010

Centralizando seu site com CSS

Modo simples de deixar sua página sempre no centro da tela

Vamos utilizar um método, que na minha opinião, é o mais fácil para deixar o site sempre no meio da tela, não importando a resolução ou o tamanho da janela a página sempre fica no meio.

Primeiramente o HTML, teremos que criar uma div que envolva todo o site (como se fosse uma "casca") e nela colocaremos o id="centro". E dentro dela criamos mais uma div, com o id="wrap". Veja como ficou:

<div id="centro">
<div id="wrap">

</div>
</div>
(...)
Agora o CSS, para a nossa "div centro" colocamos float com o valor left, margin com o valor auto (para o cálculo automático da margem), width com o valor 100%, (o valor é em porcetagem por que assim a div ocupa a largura da tela inteira não importando o tamanho da janela ou a resolução do monitor) e border com os valores de 1px, solid e blue apenas para que você possa visualizar a div, coloque o valor em 0px se não quizer visualizar a borda.

Já para a "div wrap" colocamos margin com o valor auto e width com o valor de exemplo de 800px, e border com os valores de 1px, solid e blue (coloque o valor em 0px se não quizer visualizar a borda). Veja:

#centro{
        border:1px solid blue;
        float: left;
        margin:auto;
        width:100%;
       }

#wrap{
        border:1px solid red;
        margin:auto;
        width:800px;
       }

Pronto ! Agora dentro da div "wrap" você desenvolve sua página.

18 de dezembro de 2010

Tutorial de XHTML

Aprenda XHTML sem enrolação



O que é XHTML ? Uma breve introdução.

O XHTML é uma linguagem desenvolvida para exibição de páginas da internet tanto em pcs e notebooks quanto em celulares, pamls, etc. É uma linguagem mais organizada e mais "limpa" em relação ao HTML. Essa nova linguagem consegue ser suportada por vários dispositivos, independentemente da plataforma usada. Se baseia na linguagem XML sem deixar de lado a inguagem de marcação HTML. Além disso a W3C recomenda o uso do XHTML desde 26 de janeiro de 2000 (já faz um tempinho).


Diferenças entre HTML e XHTML.

Não existem grandes diferenças entre o HTML e o XHTML, se você domina o HTML não terá muitas dificuldades em aprender essa linguagem, existem muitas praticas que podiam ser usadas no HTML e que agora no XHTML não podem mais, seria como um HTML mais organizado como dito anteriormente, onde você tem que seguir algumas regras a mais, vamos começar.
(...)
1 No XHTML todos os elementos devem, obrigatoriamente, estar bem aninhados.



Modo errado:
<p><b><i>texto</b></i></p>
Modo certo:
<p><b><i>texto</i></b></p>



2 Todos os elementos devem, obrigatoriamente, possuir tags de fechamento.



Modo errado:
<p>esse é um texto.
<p>esse é outro texto.
Modo certo:
<p>esse é um texto.</p>
<p>esse é outro texto.</p>



2.1 Aqueles elementos que no HTML não possuem uma tag de fechamento, devem ser, obrigatoriamente, fechados com um espaço e uma "/" no final, atenção, não se esqueça do espaço:



Modo errado:
esse é um texto.
<br>
esse é outro texto.
<hr>
<img src="exemplo.gif" alt="uma imagem">
Modo certo:
esse é um texto.
<br />
esse é outro texto.
<hr />
<img src="exemplo.gif" alt="uma imagem" />



3 No XHTML as tags e também os atributos são sensíveis a caixa, por isso devem estar, obrigatoriamente, em caixa baixa (letras minúsculas):



Modo errado:
<BODY>
<P><b><i>texto</i></b></P>
</BODY>
<font COLOR="blue">texto</b>
<img src="exemplo.gif" ALT="uma imagem" />
Modo certo:
<body>
<p><b><i>texto</i></b></p>
</body>
<font color="blue">texto</b>
<img src="exemplo.gif" alt="uma imagem" />



3.1 Cuidado com códigos com letras maiúsculas feitos por editores:



Modo errado:
<div OnMouseOut=function()>
Modo certo:
<div onmouseout=function()>



4 Todos os valores dos atributos devem estar, obrigatoriamente, entre aspas:



Modo errado:
<font color=blue>texto</b>
<img src=exemplo.gif alt="uma imagem" />
Modo certo:
<font color="blue">texto</b>
<img src="exemplo.gif" alt="uma imagem" />



5 A sintaxe deve ser escrita por completo:



Modo errado:
<input checked />
Modo certo:
<input checked="checked" />



5.1 - Uma lista com os atributos que se enquadram no item 5:



declare declare="declare" 
readonly readonly="readonly" 
disabled disabled="disabled" 
selected selected="selected" 
defer defer="defer"
compact compact="compact" 
checked checked="checked"  
ismap ismap="ismap" 
nowrap nowrap="nowrap"
nohref nohref="nohref" 
noshade noshade="noshade"  
multiple multiple="multiple" 
noresize noresize="noresize"



6 Se for usar o &(e comercial) ele deve ser codificado no código HTML.



Modo errado
Maria & João
Modo certo
Maria &amp; João



7 Imagens, o atributo "alt" é abrigatorio em todas as imagens.



Modo errado:
<img src="exemplo.gif" />
Modo certo:
<img src="exemplo.gif" alt="uma imagem" />

ou assim:

<img src="exemplo.gif" alt="" />



8 Use o "id" ao invez do "name", o elemento "name" está em desuso.



Modo errado:
<img src="exemplo.gif" name="foto" />
Modo certo:
<img src="exemplo.gif" id="foto" />



9 Separadores de blocos de código. Não use a sequência "----------" entre os "<-- -->" alguns agentes de usuários mais antigos podem ter problemas para interpretar, use uma sequecia como "========" ou "xxxxxxxx".



Modo errado:
<---------------menu----------------->
  <li>Homze</li>
   <li>Contato</li>
     <li>Sugestões</li> 
    
   <li>Twitter</li> 
 </ul> 
<---------------menu----------------->

Modo certo:
<-- ==========menu============= -->
  <li>Homze</li>
   <li>Contato</li>
     <li>Sugestões</li>     
   <li>Twitter</li> 
 </ul> 
<-- ============menu=========== -->

14 de dezembro de 2010

O que é Feed ou RSS ?

Um breve conceito

Um RSS ou Feed nada mais é do que um endereço na web por onde você pode acompanhar as últimas noticias de um site ou blog, um RSS é representado pelo simbolo:

Clicando no símbolo do feed você pode se inscrever para acompanhar as novidades do respectivo site ou blog.
Em um RSS é mostrado vários resumos das notícias juntamente com o link para a notícias inteira. Hoje, pricipalmente entre a comunidade de blogs, o feed é muito popular.(...)

No que o feed é legal?

Uma das coisas legais de um feed ou RSS é que você não precisa visitar toda hora um site para saber se há posts ou notícias novas, através do feed favoritado em seu browser, por exemplo, você pode saber das novidades sem entrar no site. Apenas os browsers atuais possuem essa função como o Firefox 3+ Chrome, Opera, Internet Explorer 7+, etc.

Com um feed também é possível acompanhar as notícias e postagens de vários sites ou blogs ao mesmo tempo em uma só página através dos sites agregadores de feed.

Para você alguns agregadores de feed:
-Google Reader
-Bloglines
-RSS Owl