Histórico para o ‘Webstandards’ Categoria

Projeto Ubiquity

Wednesday, August 27th, 2008

Nome Estranho?

Estou com uma preguia de explicar o que , vou deixar o vdeo resolver esse problema.

E agora o mais Alto do Mundo

Thursday, June 26th, 2008

Google? Microsoft? Yahoo?

Nada disso, o maior site do mundo é o Worlds Highest Website com 18,939 quilômetros de altura.

Algumas curiosidades sobre o site:

  • Navegadores baseados no tipo Gecko (tais como o Firefox) exibem um comportamento bastante interessante quando se deseja aumentar a altura de um site (exatamente 18,939583 quilômetros), “contraindo” ou até “dilatando” o conteúdo principal.
  • O Internet Explorer ignora as referências internas por isso, não se sabe ao certo, se o conteúdo tem realmente 18,939 quilômetros de altura (mesmo parecendo bem comprido).

Brasileiro tem essa mania de dizer “do mundo”.

Você é bom mesmo em CSS?

Friday, September 21st, 2007

Mais do mesmo

O mesmo site que fez o Quiz do HTML, resolveu fazer um outro, só que agora o de CSS.

Como funciona

Você digita todas as propriedades CSS que você lembra em uma caixa de texto, não é necessário pressionar ENTER. Se a mesma estiver correta, ela é exibida abaixo. e acima mostra quantos elementos faltam. Quando terminar, exibe quais elementos você não acertou.
Números

São 122 propriedades no total para você acertar.

São apenas 7 minutos para fazer o Quiz.

http://www.justsayhi.com/bb/css_quiz - Faça o teste aqui.

dica do Michel

Você é bom mesmo em HTML?

Tuesday, July 31st, 2007

Um site resolveu testar se você é bom e rápido no HTML.

Como funciona:

Você digita todos os elementos HTML (tags) que você lembra em uma caixa de texto, não é necessário pressionar ENTER. Se a mesma estiver correta, ela é exibida abaixo. e acima mostra quantos elementos faltam. Quando terminar, exibe quais elementos você não acertou.

Números

São 91 elementos no total para você acertar, eu percebi que algumas tags eles não colocaram e com isso não siginifica que você digitou errado.

São apenas 5 minutos para fazer o Quiz. Detalhe que faltando 1 minuto começa um desespero e as vezes um sentimento de “burrice”.

Minha pontuação

No primeiro teste fiz muito pouco, 39 pontos. No segundo fui para 59 pontos, ainda achei pouco.

Mingle2 - Free Online Dating59

Aos espertinhos

Não adianta ser o espertinho e fazer o teste usando uma “cola”, não engane você mesmo, afinal, não está valendo nenhum prêmio.

Acesse o Quiz

Créditos

Meu ex-aluno Michel e Pedro

Já desenhou com HTML?

Tuesday, June 26th, 2007

Um japa resolveu desenhar em HTML.

Sentindo na pele é que aprendemos

Tuesday, May 8th, 2007

Imagine um mundo onde tudo inverteu, onde os deficientes são a maioria e o mundo é feito para eles.

Entenderam agora a finalidade de fazer um site com prioridades de Acessibilidade?

Como escrever código XHTML válido?

Tuesday, March 13th, 2007

Para que seu código XHTML possa ser validado e interpretado corretamente, siga as seguintes regras:

Fechar todas as tags

Para escrever código XHTML válido, devemos fechar TODAS as tags. As tag que normalmente exigem fechamento como <p></p>, <td></td>. E as tags que no HTML não exigiam fechamento como <br>, <hr>, <img>.
Incorreto:
<br>
<img src=”image.jpg” alt=”foto x”>
Correto:
<br />
<img src=”image.jpg” alt=”foto x” />

Utilizar letras minúsculas para tags e atributos

Um documento XHTML deve ter TODAS as tags e seus respectivos atributos escritos com letra minúscula.

Incorreto:
<
A href=”index.html” CLASS=internal>

Correto:
<a href=”index.html” class=”internal”>

Colocar entre aspas valores dos atributos

Todos os valores dos atributos XHTM devem estar entre aspas.

Incorreto:
<table width=100%>

Correto:
<table width=”100%”>

Não permitir atributos sem valores

Todos os atributos devem ter valor definido

Incorreto:
<dl compact>
<input checked>
<input readonly>
<input disabled>
<option selected>
<frame noresize>

Correto:
<dl compact=”compact”>
<input checked=”checked” />
<input readonly=”readonly” />
<input disabled=”disabled” />
<option selected=”selected” />
<frame noresize=”noresize” />

Atributo ID substitui o atributo NAME

O HTML 4.01 define um atributo NAME para elementos como a, applet, frame, iframe, img, e map. No XHTML, o atributo NAME foi descontinuado, sendo substituído pelo atributo ID. Para manter a compatibilidade com browsers mais antigos, aconselha-se utilizar os dois atributos.

Incorreto:
<img src=”figura.gif” name=”figura1″ />
Correto:
<img src=”figura.gif” id=”figura1″ />
<img src=”figura.gif” id=”figura1″ name=”figura1″ />

Não utilizar tags e atributos HTML descontinuados

Algumas tags e atributos que são permitidos no HTML 4.01 Transitional e no XHTML 1.0 Transitional não são permitidos no XHTML 1.0 Strict (e no HTML 4.01 Strict). Alguns exemplos são: tags <font>, <center>; atributos alink, align, width, height (para alguns elementos), e background.

Incorreto:
<b>destaque</b>
Correto:
<strong>destaque</strong>

Declarar o DOCTYPE do documento

Você deve informar um DTD na primeira linha do seu documento XHTML.
O DTD ou Doctype (Document Type Definition) tem como função informar ao browser que tipo de documento será visualizado.
A estrutura de um documento XHTML é:

<!DOCTYPE …>
<html>
<head>
<title>… </title>
</head>
<body> … </body>
</html>

Existem 3 tipos de Doctype:

Strict
Este tipo é utilizado quando o código do documento é 100% XHTML. O XHTM 1.0 Strict não permite marcação de apresentação como a tag <font> ou o atributo bgcolor <table bgcolor=”#006633″>. Por isso força a separação entre estrutura (XHTML) e apresentação (CSS). É tido entre os desenvolvedores como Doctype “radical” pois não permite nenhuma desconformidade com o padrão XHTML.
<!DOCTYPE html
PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
Transitional
Este é o tipo mais utilizado. Ele permite a utilização de tags e atributos de formatação, tornando o documento compatível com browsers que não suportam CSS.
<!DOCTYPE html
PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
Frameset
Este tipo é indicado quando você está utilizando FRAMES em seu site.
<!DOCTYPE html
PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”>

Benefícios dos XHTML

Tuesday, March 13th, 2007

Benefícios

O XHTML nada mais é do que uma forma de escrever um documento HTML de modo que ele também seja um documento XML válido. Ou seja, seu documento HTML ganha a coerência e flexibilidade de um documento XML, podendo ser facilmente lido por ferramentas automáticas e convertido em outros formatos de arquivos. Com XHTML torna-se muito fácil oferecer os dados do seu site através de WAP ou de um RSS por exemplo. Torna-se fácil também transformar o resultado de uma consulta à banco de dados ou um documento XML numa página Web.

Flexibilidade

Entenda como flexibilidade a capacidade de se apresentar o conteúdo de um website em diferentes estilos, combinações de cores e até mesmo, plataformas diferentes do navegador Web instalado no seu computador pessoal.

A divisão entre conteúdo e forma proporcionada pela utilização dos conceitos do Web Standards nos permite exibir o conteúdo de uma página Web em PC’s, Palmtops, PDA’s e celulares com uma simples mudança na referência do arquivo CSS utilizado para a formatação.

Migrando do HTML para o XHTML

Tuesday, March 13th, 2007

É impossível utilizar o HTML 4.01 para construir websites modernos, estruturados e compatível com padrões Web (Web Standards). Para fazer a transição para uma marcação limpa, semântica, e estar mais bem preparado para uma possível transição para o XML e outras futuras linguagens de marcação, é recomendado utilizar o XHTML 1.0 para criação de novos websites.

O XHTML 1.0 é a reformulação do HTML 4.1 nos padrões do XML 1.0, e foi desenvolvido para substituir o HTML. Passou a ser uma recomendação do W3C a partir de 26 de Janeiro de 2000.

Obs.:

O XHTML é 100% compatível com o HTML 4.1 (o oposto não é verdadeiro).
Todos os navegadores recém lançados são compatíveis com o XHTML 1.0.

XHTML

Tuesday, March 13th, 2007

O HTML é uma linguagem de marcação utilizada para criar e formatar páginas ou documentos Web. Com o tempo passou a ser utilizado para descrever a estrutura dos documentos. O HTML permite criar documentos com componentes como cabeçalhos (h1,h2,….), parágrafos (p), quebras de linha (br), tabelas (table, tr, td, th), listas (li, ul, ol), imagens (img) e links (a). Uma tecnologia complementar foi criada, o Cascading Style Sheets (CSS), responsável pela apresentação (formatação visual) dos documentos.

Novas especificações HTML não serão mais definidas. HTML 4.01 é o último padrão HTML, e agora substituído pelo XHTML 1.0. Desenvolver em XHTML não é substancialmente diferente de desenvolver em HTML, mas oferece diversos benefícios, principalmente para aplicações mais complexas. O XHTML 1.0 é uma definição de HTML em conformidade com as regras do XML. Isso quer dizer que utilizando XHTM você tem a vantagem de poder utilizar plenamente o HTML, e o poder de manipular informações com XML.