Marcelo Torres

Entradas etiquetadas como ‘(x)html’

Currículo dos Padrões Web

16/11/2008 · Deixe um comentário

Estava dando uma passada, no Revolucao.etc, e me deparei com uma postagem muito interessante: “Currículo dos Padrões Web”, o Danillo Nunes está fazendo um trabalho magnifico traduzindo o curso de padrões Web oferecido gratuitamente pela Opera Software, cujo objetivo é ensinar e incentivar a prática do desenvolvimento web de forma correta. Já fora traduzidos 3 artigos, de um total de 39 publicados em inglês.
Então, como disse o Henrique Pereira(Revolucao.etc) vamos incentivar/ajudar o Danillo Nunes a continuar seu trabalho.

Segue o Link: Tradução do “Currículo dos Padrões Web”, por Danillo Nunes

Categorias: Acessibilidade · Cores · Desenvolvimento · Design · Tableless · Tutoriais · Web Standards
Etiquetado: ,

do HTML ao XHTML…

29/01/2008 · Deixe um comentário

Como eu já esperava num foi tão difícil a transição do HTML para o XHTML, isso porque não existe muita diferença nessas 2 linguagens de marcação, até porque o XHTML é um aperfeiçoamento das Tags e regras HTML4.1, ela(a XHTML)é uma aplicação XML,

“com XML você cria suas próprias tags e atributos para escrever seu documento web. Isto significa que é você quem cria sua linguagem de marcação. XHTML foi criado dentro deste conceito e por isso é uma aplicação XML. As tags e atributos do XHTML foram criadas (“inventadas”) aproveitando-se as nossas conhecidas tags e atributos do HTML 4.01 e suas regras.(…)

Qual a finalidade do XHTML ?

XHTML é a sigla em inglês para EXtensible HyperText Markup Language que em português resulta em Linguagem Extensível para Marcação de Hipertexto, uma aplicação XML, escrita para substituir o HTML e nada mais é do que um HTML “puro, claro e limpo”.(…)”

XHTML é a linguagem da web do futuro desde já a disposição de projetistas e desenvolvedores web.

eis abaixo algumas diferenças ao escrever o código em XHTML:

  • todas as tags devem ser escritas em letras minúsculas;

  • as tags devem estar convenientemente aninhadas;

  • os documentos devem ser bem formados;

  • o uso de tags de fechamento é obrigatório;

  • elementos vazios devem ser fechados;

  • diferenças para os atributos.


fonte:http://www.maujor.com/tutorial/xhtml.php

Em relação aos Doctype escreve-se assim:

XHTML 1.0 Strict, Transitional, Frameset

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

XHTML 1.1 DTD

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Diferenças entre Strict, Transitional, Frameset
Strict
Escolhendo um DOCTYPE Strict quer dizer que seu código está seguindo á risca os padrões, sem nenhum tipo de erro de validação
Transitional
Escolhendo um DOCTYPE Transitional é quando você está fazendo uma transição de uma forma antiga de marcação para uma mais moderna
<Frameset
Escolhendo um DOCTYPE Frameset é para quando você usa Frames em sua página.

fonte:http://www.pinceladasdaweb.com.br/blog/2006/05/29/doctype-pra-que-te-quero/

…pra finalizar eu digo que, usando a XHTML com certeza você tera menos “dor de cabeça” ao construir um layout! Para se aprofundar nesse assunto siga essas duas fontes que citei acima, elas são 100% recomendadas

valeu pessoal até a próxima!

Categorias: (x)html/css · Desenvolvimento · Tableless · Web Standards
Etiquetado: ,

Image-replacement…

27/01/2008 · Deixe um comentário

Essa é uma técnica usada para substituir uma texto, por uma imagem, isso faz com que o texto não fique visivel ao úsuario, mas fique visivel ao browser, conservando assim a acessibilidade. Há várias formas para se executar essa técnica, porém vou postar aqui a que eu uso e acho mais simples:

1º monte o documento (X)HTML

...
<body>
<h1>Image-replacement</h1>
</body>
...

Onde h1 é o elemento que será substituido pela imagem

Agora faça a folha de estilo:

h1{
background: url(image-replacement.jpg) no-repeat;
text-indent:-9999px;
width:250px;
height:100px;
overflow:hidden;
}

  • background terá a imagem que substituirá o texto

  • text-indent é o que fará o texto sumir, neste caso o texto será deslocado -9999px da sua posição original, parece absurdo esse valor, mas é pra garantir que em monitores com resolução maior, ou até dois monitores trabalhando junto o texto não apareça

  • overflow é apenas para garantir que o texto não fique vísivel mesmo!

  • width e height é apenas o tamanho da imagem que você escolher

Faça o teste usando outras formas e tags, ou seja é só adaptar ao que se torne necessário e como eu já disse há dezenas de maneiras de se fazer uma Image-Replacement, para saber mais visite esse link:

http://www.tableless.com.br/image-replacement-x-imagens

Valeu pessoal até a proxima!

Categorias: (x)html/css · Acessibilidade · Tableless · Tutoriais · Web Standards
Etiquetado: , , ,

Layout com página centralizada em CSS…

20/12/2007 · 2 Comentários

Vamos criar uma página com o layout centralizado como esse do blog, achei esse tutorial a tempos atrás no site do Maujor, vou repassar pra vocês agora.
Para inicio temos que colocar todo o conteudo de nossa página dentro de uma div, daremos o nome de #tudo, ela terá uma largura(width) de 760px, para que não apareça uma barra de rolagem horizontal em telas definidas em resolução 800 x 600, feito isso definiremos a margin como, auto e para “driblar” os bug do IE, colocaremos text-align:center; no body da folha de estilo e text-align:left; em #tudo(esse IEca enche o saco viu!!, rs), pronto temos uma página centralida exatamente no centro da tela.

veja como fica o código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Centrar uma página com CSS</title>
<meta http-equiv="Content-Type" content="text/html" charset="iso-8859-1">
<head>
<style type="text/css">

body {
margin:0;
padding:0;
background:#cccccc;
text-align:center; /* hack para o IE */
}
#tudo {
width: 760px;
margin:0 auto;
padding: 10px;
text-align:left; /* "remédio" para o hack do IE */
}
#conteudo {
padding: 5px;
background-color: #eeeeee;
}
</style>
</head>
<body>
<div id="tudo">
<div id="conteudo">
<h1>Pagina Centrada com CSS sem scroll ate 800×600</h1>
<p> Não use nenhum elemento HTML (figuras, tabelas, etc…) com largura superior a 750px.</p>

</div>
</div>
</body>
</html>

Categorias: (x)html/css · Tableless · Tutoriais
Etiquetado: , ,