22 de setembro de 2009

Doctype, o que é, e pra que serve?



Fiz umas pesquisas e vou tentar explicar o que é o Doctype, sem rodeios :)

O elemento doctype é uma DTD (definição do tipo de documento), mesmo estando entre < e > o doctype não é uma tag, e sim uma instrução muito importante que "diz" ao browser em que tipo e versão(HTML 3.2, HTML 4.01, XHTML, etc) a página está escrita, é como uma "identidade" da página que sempre fica no topo do código, antes da tag <html>.

É recomendado aplicar o Doctype correto em seu site para que ele possa ser validado e evitar possiveis transtornos em sua página.

Existem vários tipos de DTDs, um para cada tipo de página, veja:

Para HTML 3.2

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">


Para HTML 4.01 Transitional

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">


Para HTML 4.01 Strict

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">


Para HTML 4.01 Frameset

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">


Veja que nas páginas XHTML além do DOCTYPE, colocamos também o atributo xmlns na tag <html> que define
em que linguagem sua página está escrita, no caso português(pt-br):

Para XHTML 1.0 Transitional

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br" lang="pt-br">


Para XHTML 1.0 Strict

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br" lang="pt-br">


Para XHTML 1.0 Frameset

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br" lang="pt-br">


Qual a diferença entre Transitional, Strict e Frameset ?

Transitional - Bom, o DTD Transitional é usado em páginas que ainda usam práticas e códigos antigos que se aconselha não usar mais, como páginas que usam, por exemplo, o elemento <font>.

Frameset - Essa DTD é usada em páginas que usam frames.

Strict - Esse é a DTD que todo desenvolvedor para web que deve ter em suas páginas, mas use apenas se as suas páginas forem válidas, ou seja, sem erros. Se quiser saber se sua página é válida visite esses posts para validar seu CSS e seu XHTML.

Veja mais sobre Doctype em: thewebsqueeze.com

20 de setembro de 2009

Inspiration Showcase - ilustração #2

Seleção de ilustrações

Incríveis imagens, encontradas no inspiredm.com para você se inspirar ou apenas para ver bons trabalhos.

ilustração

ilustração

ilustração

ilustração

ilustração

15 de setembro de 2009

Inspiration Showcase - Ilustração #1

Incríveis ilustrações de Sam Nielson

Nada melhor que ótimas imagens para iniciar a nova seção do #CSS {Orbit}, a seção "Inspiração". Essas são imagens do ilustrador Sam Nielson que desenvolveu trabalhos para a Avalanche software e também para a Disney. Imagens encontradas em designlenta.com










12 de setembro de 2009

CSS Tutorial - Diferentes bordas e diferentes cores na mesma div.

Olá :) , vou tentar ensinar, como exibir em uma mesma div cores, espessuras e estilos diferentes, é bem fácil, vamos lá !

A propriedade border pode se subdividir nas propriedades:

border-left | border-right | border-top | border-bottom

Essas propriedades vão aplicar nossas alterações de cores, estilo e espessura em cada borda individulamente, respectivamente nas bordas esquerda, direita, superior, inferior. Depois de conhecida as propriedades que vamos usar, vamos aplicar em uma "div" qualquer, que chamaremos de "div colorida".

<div id="divcolorida">
Blablablablblabla
Blablablablblabla
Blablablablblabla
</div>

Editando com CSS:

Podemos colocar tres valores (cor, espessura, e estilo) em uma propriedade, são esses valores que irão diferenciar cada borda da div, agora é só usar a criatividade e editar como quizer, veja:

Legenda: estilo(amarelo) - espessura(cinza) - cor(azul)


#divcolorida{
border-left:solid 10px #003cff;
border-right:dashed 5px #00ff00;
border-top:dotted 5px #00ff00;
border-bottom:solid 10px #003cff;
width:200px;
height:200px;

}

Esse é o código fonte completo, para você ver como fica, basta colar no
bloco de notas e criar uma nova pagina .html:

<html>
<head>
<title>Div colorida</title>

<style type="text/css">
#divcolorida{
border-left:solid 10px #003cff;
border-right:dashed 5px #00ff00;
border-top:dotted 5px #00ff00;
border-bottom:solid 10px #003cff;
width:200px;
height:200px;

}
</style>

</head>
<body>

<div id="divcolorida">
Blablablablblabla
Blablablablblabla
Blablablablblabla
</div>

</body>
</html>

7 de setembro de 2009

Novo Opera 10 !



Lançado o novo Opera 10, que segundo o site oficial além de possuir um novo visual e uma nova barra de abas redimensionáveis, possui uma maior velocidade em conexões lentas com O "Opera Turbo", vem com o motor melhorado (40% mais rápido) para exibir sites como o Facebook e o Gmail.


Outra coisa interessante é o "Feed Preview" basta clicar no icone do feed para ter um preview, assim você pode ver o conteúdo antes de assinar o feed. Além de outras características[ext.].
Já está disponível para download no site do Opera[ext.]. Segura essa agora IE. :)

3 de setembro de 2009

Motivos para não usar o IE6 !



O IEeeeca, aham, quer dizer, o Internet explorer 6 foi lançado em 2001 e seu uso começou a decair em 2007 sendo substituído pelo IE7 e o Firefox.

Bom, se você é webmaster ou apenas usuário da nossa querida web gostaria de sempre ver ou desenvolver sites bonitinhos, que são bem executados em um browser, pois é, mãããs, existe uma pedra no caminho, uma pedrona chamada IE6, não querendo falar mal desse browser mas já falando, em relação a segurança esse browser deixa a desejar, tem uma vulnerabilidade muito grande, possui um suporte precário a muitas propriedades (nem tente usar CSS3 pra exibir no IE6, que não vai funcionar), as imagens no formato PNG que possuem transparência não são exibidadas da maneira certa (problema resolvido apenas na versão 7).

Esses são alguns fatores que deixam qualquer desenvolvedor de cabeça quente e faz qualquer internauta ter uma má impressão do site, e o pior, já bastava os bugs do IEeeca6 mas li rumores de que há alguns bugs no IE8 também (bugs no IE, novidade ¬¬) veja aqui http://social.technet.microsoft.com e aqui http://tech4pc.net/bug-do-ie8-em-windows-xp-sp3/.

O fator que ajuda esse browser ser um dos mais usados no mundo, é já vir no pacote do Windows.

Sugestão: Se ainda não está usando, use o Firefox e compare, mas se você quer o IE fique a vontade, mas... pensa bem, não quer o Firefox mesmo? :)