Dilbert

Vejam o Dilbert de 29 de Janeiro.

O mundo deve ser perfeito!

Andulo - Moinhos de água do Membia

Andulo - Moinhos de agua 2, originally uploaded by Carlos João.

Esta é uma irmã entre várias de uns moinhos construidos sobre o rio Membia, perto da ântiga barragem do Andulo no Bié em Angola.

This is one of a set of photos of watermills built on the river Membia nearby the old waterdam of Andulo, Bié, Angola.

ALA - 210 e 211

ALA 210

O triplo objectivo da acessibilidade: obter abreviaturas correctas é quanto a mim o artigo mais interessante deste número, desta vez não acompanho o Jeffrey na sua ironia sobre a Web 3.0. Compreendo contudo que em todos as reuniões aparecem uns mais cromos que outros.

ALA 211

Aperfeiçoar os fundamentos: Um melhor layout CSS de três colunas. Entradas que fazem mais e finalmente um texto de Jeffrey Zeldman (Repescado) Corrija o seu sítio com o DOCTYPE correcto!.

RoR: Como Paginar

Paginação Simples

Usar o ajudante de paginação

Paginação à medida

O método de paginação embutido no RoR torna-se limitado quando as suas necessidades se tornam mais complexas. É então necessário usar uma técnica melhor:

O método do Kevin de paginação à medida implica usar quatro passos.

No controlador:

def list
  #passo 1: ler e atribuir valores às variáveis que necessitamos
  page = (params[:page] ||=1).to_i
  items_per_page = 20
  offset = (page -1) * items_per_page

  #passo 2: efectuar o seu find à medida efectuando 
  #qualquer tipo de limites ou deslocamentos
  # isto é obter tudo em cada página, não se 
  #preocupar com paginação por agora
  @items = Item.find_com_algum_metodo_a_medida(@alguma_variavel)

  #passo 3: criar um Paginator, a segunda variável
  #tem que ser o número da TOTALIDADE dos items em TODAS as páginas
  @item_pages = Paginator.new(self, @items.length, items_per_page, page)

  #passo 4: só enviar um subconjunto de @items para a vista
  # é aqui que ocorre a magia. Não é necessário voltar a
  # fazer outra busca  (find)
  @items = @items[offset..(offset + items_per_page - 1)]

end

Na vista colocar:

Pages: 
<%= link_to('previous', {:params => params.merge('page' => 
@ item_pages.current.previous)}) +
 ' ' if @ item_pages.current.previous %>

<% for page in @ item_pages -%>
<%= link_to_unless(params[:page].to_i == page.number, page.number,
 {:params => params.merge('page' => page)}) %> 
<% end -%>

<%= link_to('next', {:params => params.merge('page' => 
@item_pages.current.next)}) if @ item_pages.current.next %>

Esta técnica funciona com conjuntos de dados pequenos e médios (onde não tem que se preocupar com um grande número de registos, embora não os queira ver surgir de uma só vez), mas torna-se limitada quando os registos são em elevado número.

Para grandes conjuntos de dados que necessitem de buscas à medida, necessita de saber o número total de registo, depois criar um Paginador e depois só recuperar os registos desejados.

No controlador:

def list
    # passos 1: ler e atribuir variáveis necessárias
    page = (params[:page] ||= 1).to_i
    items_per_page = 20
    offset = (page - 1) * items_per_page

    # passo 2: em vez de efectuar uma busca completa descobrir
    # só o número de registo
    @item_count = Item.find_record_count(@some_variable)

    # passo 3: criar um Paginator, a segunda variável tem 
    #que ser o número de TODOS os items em TODAS as páginas
    @item_pages = Paginator.new(self, @item_count, items_per_page, page)

    # passo 4: descobrir só o subconjunto pedido de @items
    @items = 
    Item. busca_com_algum_metodo_a_medida(@some_variable, 
                                          offset,
                                          items_per_page)

end

Depois necessitará de alterar o método "busca_com_algum_metodo_a_medida" de forma a usar as variáveis offset e items_per_page numa cláusula SQL LIMIT. Se o que descobrir for já complexo, poderá ser mais fácil usar "find_by_sql" em vez de "find".

O código da sua vista pode ser igual ao anterior.

Membia

Algo totalmente fora de tópico
Algumas fotografias de moinhos de água que se encontram em: fotografias do João

Profissionais da Web

A discussão sobre o que é ser profissional da web tem continuado. Aos suspeitos habituais, como a Molly E. Holzschklag em: Web Standards and the New Professionalism, Roger Johansson em: A Web Professional Can Never Stop Learning e em: Reaching and helping the new amateus, Hooly Marie Koltz em: Beyond New Professionalism, e Peter-Paul Kock em: The New Amateurs e The New Amateurs - Part 2, e Chris Casciano em [web] On Craft, A New Professionalism And New Amateurs todos tocam os aspectos relativos à definição da própria profissão (profissões) de quem faz algo (como trabalho) na web.

Esta discussão julgo que deva ter surgido noutras áreas quando as mesmas ainda estavam em plena infância como a nossa. Hoje não é de esperar por exemplo que um engenheiro electrotécnico ache uma falta de liberdade usar elementos industriais padronizados quer por entidades públicas, quer por organismos associativos nos seus projectos.

No entanto usar elementos não padronizados na web é frequente. Nos casos em que tal acrescenta algo seria de pensar pradronizar nos casos em que só aumenta a confusão seria de eliminar. Outro aspecto comum é a necessidade de formação contínua não só da gente que pratica web mas até certo ponto da gente que lhe está à volta (não havendo acordo contudo sobre este aspecto).

É uma discussão que provavelmente se irá manter até que a área estabilize.

Tabelas ou Disposição CSS- II

Uma das coisas curiosas das listas de correio especializadas é a repetição dos mesmos problemas ao longo do tempo.

Um desses problemas recorrentes na lista de correio de desenvolvimento de css (CSS-D) é a pergunta sobre como apresentar dados extraidos de uma base de dados numa tabela.

Que marcadores usar e depois estilizar.

As respostas andam invariavelmente à volta de:

thead td
thead th
tbody td
tbody th...

Dando ainda a ligação a uma galeria de estilos.

Pode ainda ver: Tabelas ou Disposição.

Actualização 2009-01-02: Uma revisitação deste assunto em breve

Cábula de RoR (Ruby On Rails)

No resistance to persistence » Blog Archive » RubyOnRails-Cheatsheet encontra-se um ficheiro PDF com uma sumula de Ruby On Rails

Padrões de Sítios Web

Padrões são soluções óptimas para problemas comuns. À medida que os problemas sejam levantados à volta de uma comunidade e resolvidos, soluções comuns frequentemente emergem de forma espontânea. Eventualmente, a melhor destas destaca-se da ganga e auto identifica-se e vai-se refinando até alcançar o estatuto de Padrão de Concepção.

Christopher Alexander foi o primeiro a nomear este fenómeno em relação aos espaços vividos. Ele e os seus co-escritores introduziram o conceito de Padrões de Arquitectura para descrever características dos espaços vividos fossem eles salas, edifícios ou cidades.

Os Padrões são atómicos no sentido de que podem ser agrupados para formarem padrões mais complexos: um padrão cadeira enquadra-se num padrão sala de jantar que se enquadra num padrão casa que se enquandra num padrão cidade.

Uma ideia que destingue os Padrões de simples prescrições é que os Padrões nunca perdem o sentido do seu contexto; descrevem coisas que funcionam em conjunto e as regras que governam essas colecções.

Os padrões de software encontraram uma grande ressonância na indústria do software em particular entre os que usam Metodologias Ágeis.

Algumas pessoas tiveram aqui inspiração para criar um documento sobre Padrões de Sítio da Web.

1. Repositórios de Padrões
2. Artigos e Textos On-Line
3. Livros
4. Discussão

ALA 209

Dia 19 saiu o A List Apart nº 209.
Neste número uma das luminárias da internet Molly E. Holzschlag apresenta uma analogia entre sítios organicos e sítios com uma organização baseada em grelha «Thinking Outside the Grid» e Brian Crescimanno apresenta o seu «Sensible Forms: A Form Usability Checklist». O artigo repescado deste número é de Scott Jason Cohen «Porque é que está aqui?».

Feed Icons

Para quem queira harmonizar o seu sítio com o acordo que já há no momento para utilização do mesmo ícone usado pelo Firefox para distinguir sítios com assinaturas e deseje descarregar o ícone nos mais diversos formatos gráficos então dê uma saltada a href="http://feedicons.com/" icons />

Ícone para RSS feed

A Microsoft vai usar o mesmo símbolo (ícone) que o Firefox usa na (linha de endereços) para indicar que um sítio tem associada a ele uma assinatura (rss feed).

Lista de Artigos a Re(ler)

Começou aquela época do ano em que se fazem balanços e num blogue sobre web é razoável que se coloque uma lista de artigos fundamentais que se foram lendo ao longo do ano que que se considerem fundamentais.

A lista que se segue não é minha mas a do Roger Johansson. Os meus artiguinhos ainda não têm calibre suficiente para entrar numa lista deste género.

A esta lista deve ser acrescentada a dos 24 artigos a serem publicados até 24 de Dezembro.

1. Os perigos de usar XHTML adequadamente

   Explicação dos problemas envolvidos ao servir XHTML com o tipo MIME application/xhtml+xml.

2. Charlatões de acessibilidade

   O clamar a aderência a normas de acessibilidade são frequentemente falsas e nada mais do que marketing.

3. Fundamentos de optimização para motores de busca

   Pistas básicas para Optimização para Motores de Busca: adicionar conteúdo com qualidade de forma regular e fazer com que o seu sítio seja bem construído.

4. CSS eficiente com propriedades abreviadas

   Truques para escrever CSS mais eficiente usando propriedades abreviadas.

5. Estabelecer o estado do menu com CSS

   Um método só com CSS de alterar a aparência do estado actual de uma barra de navegação.

6. CSS Pistas e Truques, Parte I

   Pistas e truques para escrever CSS eficiente, Partes I e II.

7. CSS Pistas e Truques, Parte II

   Pistas e truques para escrever CSS eficiente, Partes I e II.

8. Largura fixa ou fluída? Elástica!

   Uma breve explicação do conceito de arranjos com largura elástica.

9. Cantos e limites (border) à medida transparentes

   Criar uma caixa com cantos e limites transparentes e sem marcadores adicionais.

10. Mitos e conceitos incorrectos sobre acessibilidade

    Explicação de mitos e conceitos errados comuns sobre acessibilidade.

11. Web Standards versus Acessibilidade

    Os Web Standard não são só para pessoas cegas e leitores de ecrã.

12. O perigo de um Internet Explorer melhor

    O suporte melhorado dos Web Standard no Internet Explorer será uma coisa boa, ou colocará em perigo a saúde futura da Web ao corrermos o risco de que os responsáveis pelo desenvolvimento de sítios Web comecem a usar cada vez mais características proprietárias?

13. A acessibilidade encoraja a discriminação?

    Uma discussão sobre se será aceitável que um sítio web seja acessível a pessoas com dificiência mas inacessíveis a pessoas que utilizem dispositivos de navegação ou sistemas operativos alternativos.

14. Marcadores HTML vs. Elementos vs. Atributos

    Explicação das diferenças entre marcadores (etiquetas/tags), elementos e atributos em HTML.

15. Codificação sem ajudas técnicas

    Por que é que codificar HTML e CSS à mão é melhor do que usar aplicações WYSIWYG.

16. CSS 2.1 Selectores, Parte 1 de 3

    Os fundamentos de selectores mais os selectores universão, tipo, id e classe

17. CSS 2.1 Selectores, Parte 2 de 3

    Combinadores, selectores combinados, selectores de grupo e selectores de atributo

18. CSS 2.1 Selectores, Parte 3 de 3

    Pseudo-classes e pseudo-elementos

19. É o atributo alt não o marcador/etiqueta alt

    Não há um marcador alt em HTML. Alt é um altributo, obrigatório num elemento img e especificado no marcador img.

20. Um profissional da Web não pode deixar de aprender

    Os profissionais da web que se recusem a actualizar os seus conhecimentos insistirem em utilizar métodos desactualizados não podem ser chamados de profissionais.

21. Revelar truques da velha escola do desenvolvimento da Web

    Uma coleção de truques de web design e desenvolvimento que eram amplamente usados antes dos responsáveis pelo desenvolvimento começarem a deixar de usar arranjos baseados em tabelas e passarem a adoptar os web standards.

22. Acessibilidade e usabilidade para televisão interactiva

    Acessibilidade e usabilidade para televisão interactiva têm muito em comum com acessibilidade e usabilidade para a web. Há também várias diferenças, sendo que algumas são realçadas neste artigo.

23. Dez razões para aprender e usar Web Standards

    Algumas das razões mais importantes para investir tempo para aprender tudo sobre web standards para design e desenvolvimento de sítio web.

Reconhecimento de ficheiros HTML de acordo com o RFC 2854

Quase todos os arquivos HTML têm a cadeia de caracteres <html" ou "<HTML" perto do princípio do arquivo.

Documentos em conformidade com as especificações HTML 2.0, HTML 3.2 e HTML 4.0 começam com uma declaração DOCTYPE "<!DOCTYPE HTML" perto do início e antes da cadeia de caracteres "<html". Estes dialectos não levam em linha de conta as letras minúsculas ou maísculas. Os arquivos podem começar com espaço em branco, comentários (introduzidos por "<!--" ), ou instruções de processamento (introduzidas por "<?") antes da declaração DOCTYPE.

Os documentos XHTML (opcionalmente) começam com uma declaração XML que começa com "<?xml" e obrigatoriamente têm uma declaração DOCTYPE começada por "<!DOCTYPE html"

.

Directrizes de compatibilização HTML/ XHTML

1. Instruções de Processamento e Declaração XML

   Tenha em atenção que as instruções de processamento são reproduzidas em alguns agentes utilizadores. Além disso, alguns agentes utilizadores interpretam a declaração XML significando que o documento é XML e não HTML, e sendo assim, podem não reproduzir o documento como esperado. Para compatibilidade com estes tipos de navegadores antigos, pode ter que evitar usar instruções de processamento e declarações XML. Lembre-se contudo que se a declaração XML não for incluída num documento, o documento só pode usar as codificações de caracteres por omissão UTF-8 ou UTF-16.

2. Elementos vazios

   Inclua um espaço antes do traço de fracção / e um sinal de maior que >, isto é, <br />, <hr /> e <img src="logo.jpg" alt="logotipo da marca" />. Além disso use a sintáxe dos marcadores minimizados para elementos vazios, isto é <br />, visto a sintaxe alternativa <br></br> permitida pelo XML dá resultados incertos em muitos agentes utilizadores existentes.

3. Minimização de elemento e Conteúdo de elemento vazio

   Dado um caso vazio de um elemento cujo modelo de conteúdo não seja EMPTY (por exemplo, um título vazio ou um parágrafo vazio) não usar a forma minimizada (isto é, usar <p> </p> e não <p />).

4. Folhas de estilo e Scripts embebidos

   Usar folhas de estilo externas se as suas folhas de estilo usarem < ou ]]> ou --. Usar scripts externos se o seu script usar < ou ]]> ou --. Note que os analisadores XML podem remover conteúdos de comentários de modo silencioso. Assim, a prática histórica de "esconder" scripts e estilos em "comentários" para tornar os documentos retrocompatíveis é possível que não funcione como esperado em agentes utilizadores baseados em XML.

5. Quebras de linha dentro de Valores de Atributos

   Evitar quebra de linhas e vários caracteres de espaço em branco em valores de atributos. São tratados pelos agentes utilizadores de forma inconsistente.

6. Isindex

   Não incluir mais do que um elemento isindex no head do documento. O elemento isindex está a ficar obsoleto em relação ao elemento input.

7. Os atributos lang e xml:lang

   Usar ambos os atributos lang e xml:lang quando especificar a língua em que um elemento esteja escrito. O valor do atributo xml:lang tem precedência.

8. Identificadores de Fragmento

   Em XML, as referências URI [RFC2396] que terminam em identificadores de fragmentos na forma "#qualquercoisa" não se referem a elementos com um atributo name="qualquercoisa"; mas sim a elementos com um atributo definido como sendo do tipo ID, isto é o atributo id em HTML 4. Muitos programas clientes HTML não suportam a utilização de atributos do tipo ID desta forma e assim sendo podem ser fornecidos valores identicos para ambos os atributos para assegurar o máximo de compatibilidade para o futuro e retrocompatibilidade (isto é, <a id="qualquercoisa" name="qualquercoisa">...</a>).

   Além disso visto que o conjunto de valores legais para os atributos do tipo ID ser muito mais pequeno que os do tipo CDATA, o tipo do atributo name foi alterado para NMTOKEN. Este atributo está constrangido de tal modo que só pode ter os mesmos valores que os do tipo ID, ou que os do tipo Name em XML 1.0 secção 2.3, produção 5. Infelizmente, este constrangimento não pode ser expresso nos DTD 1.0 do XHTML. Devido a esta alteração é necessário ter cuidado quando se converte documentos HTML existentes. Os valores destes atributos têm que ser únicos dentro do documento, válidos, e quaisquer referências a estes identificadores de fragmento (tanto internas como externas) devem ser actualizadas no caso dos valores serem alterados durante a conversão.

   Note que a colecção de valores legais na produção 5 da Secção 2.3 da especificação XML 1.0 é muito maior do que aquela que é permitida ser usada nos tipos ID e NAME no HTML 4. Quando se definem identificadores de fragmento para serem retrocompatíveis só devem ser usadas cadeias de caracteres de acordo com o padrão: [A-Za-z][A-Za-z0-9:_.-]*. Ver secção 6.2 do [HTML 4] para mais informação.

   Finalmente, note-se que o XHTML 1.0 pede para se evitar usar o atributo name dos elementos a,applet, form, frame, iframe, img e map, e será removido de versões subsequentes do XHTML.

9. Codificação de caracteres

   Historicamente a codificação de caracteres de um documento HTML era especificada pelo servidor web via um parâmetro de conjunto de caracteres (charset) do cabeçalho de Tipo de Conteúdo do HTTP, ou via um elemento meta no próprio documento. Num documento XML, a codificação dos caracteres do documento é especificada na declaração XML (isto é: <meta http-equiv="Content-type" content="text/html; charset=EUC-JP" />). Em agentes utilizadores conformes com o XHTML o valor da declaração da codificação na declaração XML toma precedência.

   Nota: tenha em atenção que se um documento deve incluir uma declaração de codificação de caracteres numa instrução meta http-equiv, esse documento pode ser sempre interpretado pelos servidores HTTP e/ou agentes utilizadores como sendo do tipo de media internet definido nessa declaração. Se um documento pode vir a ser servido como vários tipos de media o servidor HTTP deve ser usado para estabelecer a codificação do documento.

10. Atributos Booleanos

    Alguns agentes utilizadores HTML não conseguem interpretar atributos booleanos quando surgem na sua forma não minimizada, como necessário ao XML 1.0. Nota: este problema não afecta agentes utilizadores conformes com HTML 4. Estão envolvidos os seguintes atributos: compact, nowrap, ismap, declare, noshade, checked, disabled, readonly, multiple, selected, noresize, defer.

11. Document Object Model e XHTML

    A recomendação nível 1 do [DOM] define os interfaces do modelo objecto de documento para o XML e o HTML 4. O modelo de ojecto documento do HTML 4 especifica que o elemento HTML e os nomes dos atributos retornam em maísculas. O modelo de objecto documento XML especifica que os nomes dos elementos e atributos são retornados com as letras minúsculas e maísculas com que são especificados. Em XHTML 1.0 os elementos e atributos são especificados em minúsculas. Esta diferença pode ser tratada de duas formas:

    1. Agentes utilizadores que acedam aos documentos XHTML servidos como tipo media da internet text/html via DOM podem usar o HTML DOM e podem depender dos nomes de elementos e atributos serem retornados em maiúsculas a partir desses interfaces.

    2. Agentes utilizadores que acedam aos documento XHTML servidos como text/xml, application/xml, ou application/xhtml+xml podem usar o XML DOM. Os elementos e atributos retornam em minúsculas. Também, alguns elementos XHTML podem ou não aparecer na árvore do objecto devido a serem opcionais no modelo de conteúdo (isto é, o elemento tbody dentro de table). Isto ocorre porque em HTML 4 alguns elementos foram permitidos ser minimizados de tal modo que tanto a etiqueta de início e a de fim do elemento são ambas omitidas (uma funcionalidade SGML). Isto não é possível em XML. Assim em vez de exigir aos autores dos documentos a inserção de elementos extra, o XHTML tornou estes elementos opcionais. Os agentes utilizadores têm que se adaptar em conformidade. Para mais informação sobre este tópico, ver [DOM2].

12. Utilização de e comercial em valores de atributos (e noutros locais)

    Tanto em SGML como em XML o caracter e comercial ("&") declara o início de uma referência de entidade (isto é &reg; para um símbolo de marca registada "®"). Infelizmente, muitos agentes utilizadores de HTML tem vindo a ignorar silenciosamente o uso incorrecto do caracter e comercial em documento HTML - tratando os e comerciais que não pareçam referências de entidade como e comerciais literais. Os agentes utilizadores XML não vão tolerar este uso incorrecto e qualquer documento que usar e comercial de forma incorrecta será "inválido" e consequentemente não estará em conformidade com esta especificação. De forma a assegurar que documentos que eram compatíveis com agentes utilizadores antigos de HTML e agentes utilizadores baseados em XML, os e comerciais usados num documento que sejam para ser tratados como caracteres literais têm eles mesmo de ser uma referência de entidade (isto é, "&"). Por exemplo quando um atributo href de um elemento a se referir a um script CGI que tome parâmetros esse atributo deve ser expresso como: http://meu.sitio.dom/cgi-bin/meuscript.pl?classe=convidado&;nome=utilizador em vez de http://meu.sitio.dom/cgi-bin/meuscript.pl?classe=convidado&nome=utilizador.

13. Folhas de Estilo em Cascata (CSS) e XHTML

    A Recomendação de nível 2 das folhas de estilo em cascata [CSS2] definem propriedades de estilo que são aplicadas à árvore de análise dos documentos HTML ou XML. As diferenças na análise irão produzir resultados visuais e/ou auditivos diferentes dependendo dos selectores usados. As pistas seguintes reduzem este efeitos em documentos que são servidos sem alterações como ambos tipos de media:

    1. As folhas de estilos CSS para XHTML devem usar minúsculas para nomes de elementos e atributos.
    2. Em tabelas, o elemento tbody será inferido pelo analisador de um agente utilizador HTML, mas não pelo analisador de um agente utilizador XML. Assim deve ser sempre explicito e adicionar o elemento tbody se o mesmo é referido num selector CSS.
    3. No espaço de nomeação XHTML, é de esperar que os agentes utilizadores reconheçam o atributo "id" como um atributo do tipo ID. Assim, as folhas de estilo devem ser capazes de continuar a usar o selector abrevidado "#" mesmo se o agente utilizador não ler o DTD.
    4. No espaço de nomeação XHTML, é de esperar que os agentes utilizadores reconheçam o atributo "class". Assim, as folhas de estilo devem ser capazes de continuar a usar a sintáxe abreviada de selectores ".".
    5. A CSS define regras de conformidade diferentes para documentos HTML e XML; não se esqueça que as regras HTML são aplicáveis a documentos XHTML entregues como HTML e que as regras XML são aplicáveis quando os documentos XHTML são entregues como XML.

14. Referir o elementos style quando se serve como XML

    Em HTML 4 e XML o elemento style pode ser usado para definir as regras de estilo internas do documento. Em XML, é usada uma declaração de folha de estilo XML para definir as regras de estilo. De forma a ser compatível com esta convenção, os elementos style devem ter o seu identificador de fragmento usando o atributo id, e a declaração de folha de estilo XML deve referir-se a esse fragmento. Por exemplo:

    
    <?xml-stylesheet href="http://www.w3.org/StyleSheets/TR/W3C-REC.css" type="text/css"?>
    <?xml-stylesheet href="#estiloInterno" type="text/css"?>
    <!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" lang="pt">
    <head>
    <title>Um exemplo de folha de estilo interna</title>
    <style type="text/css" id="estiloInterno">
      code {
        color: green;
        font-family: monospace;
        font-weight: bold;
      }
    </style>
    </head>
    <body>
    <p>
      O texto que se segue usa o nosso 
      <code>estilo interno</code>.
    </p>
    </body>
    </html>
    

15. Caracteres de espaço em branco em HTML e XML

    Alguns caracteres legais em documentos HTML são ilegais em documentos XML. Por exemplo, em HTML o caracter de avanço de folha (U+000C) é tratado como espaço em branco, em XHTML, devido à definição de caracteres é ilegal.

16. A referência de entidade com nome &apos;

    O caracter ' (o apóstrofe, U+0027) foi introduzido no XML 1.0 mas não aparece no HTML. Os autores devem assim usar o ' em vez de ' de forma a funcionar como se espera em agentes utilizadores HTML 4.

O que é um contentor?

Um contentor é tudo aquilo que por omissão é apresentado como bloco (display: block). Isto quer dizer: div, p, h1-h6, ul, ol, dl, table, etc, etc...

No caso de lhes ser atribuída a propriedade display: inline deixam de se comportar como contentores. Pode dar a propriedade display: block e o elementos ou elementos afectados passam a comportar-se como contentores.

Por outro lado elementos em linha como li, img, a, span, etc podem ser vistos como contentores porque se lhes pode dar: padding, margin ou border.

Para ver o que é que contentores podem fazer vá até: Contentores, Larguras, Margens...

Dicas

O Internet Explorer ao reproduzir um elemento não respeita a nossa indicação de altura para o elementos mais sim as alturas (eventualmente acumuladas) dos elementos/conteúdo desse elemento. Ou seja expande a caixa onde era suporto encaixar-se.

O que é que isto quer dizer?

html {height: 100%;}
body {min-height: 100%;}
* html body {height: 100%;}

Se as suas border terminarem no fundo da janela do seu navegador isso normalmente quer dizer que se disse à div para ter 100% de altura do elemento body, o qual deve ser 100% do viewport. Como não se usou min-height está a dizer à div que tem o tamanho do viewport e é tudo. Quando o viewport termina a sua div termina.

O código acima corrige isso ao usar min-height igual a 100% para o body. Isto significa que o elemento body pode ser esticado para além do fim do viewport, e visto que a div nele contida ter 100% da sua altura também pode ser esticada para além do final do viewport. A terceira linha é um truque e serve para dizer ao IE que a height é 100% para o IE. O IE não compreende min-height mas trata height de forma equivalente e portanto este truque funciona. Deve ser usado dentro de comentários condicionais.

Colunas Falsas

Quando se quer fazer um layout com colunas falsas, cria-se um ficheiro de imagem normalmente relativamente baixo género 10px e bastante largo com as separações nos pontos desejados com cerca de 2000px (por exemplo) e depois deste ficheiro criado coloca-se no ficheiro CSS uma regra semelhante à que se segue:

#contentor {
   background: #fff url("colunasfalsas.gif") repeat-y;
   ...
}

Para obter um fundo preto, com a nossa imagem repetida tantas vezes quantas as necessárias.

A imagem da coluna pode apresentar um dégradé.

Imagem de Fundo Clicável

Se tivermos uma imagem que esteja (ou deva estar) numa posição fixa género logo à esquerda superior e a desejemos colocar em fundo no CSS e além disso que seja possível clicar nela então podemos usar uma das várias técnicas de substituição como no código que se segue:

<a id="logoentrada" href="bla.html">Entrada</a>

#logoentrada{
  position:absolute;
  top:20px;
  left:20px;
  width:100px;
  height:70px;
  overflow:hidden;
  text-indent:-200px;
}

Como remover a border de uma imagem numa âncora

Alguns navegadores quando colocamos imagens dentro de uma âncora reproduzem a imagem com uma borda por omissão. Para a evitar basta aplicar o seguinte CSS:

a img {
 border-style: none;
 ...
}

Visto isto ser uma pergunta recorrente poderá ser interessante ler: Imagens com ligações.

Como eliminar espaço adicional colocado à volta de células de uma tabela com border

Aplicar o seguinte CSS:

img {
 display: block;
}

Se quizer saber mais pode consultar Imagens, tabelas e discontinuidades misteriosas.

Como é que funcionam os float

Por favor lei-a estes dois artigos:

Conter floats Clearing fácil

Um layout a 3 colunas

<div id="coluna1">conteudo</div>
<div id="coluna2">conteudo</div>
<div id="coluna3">conteudo</div>

Flutuar a coluna1 e a coluna2 para a left e depois indicar a margem da coluna3 como a soma do total das colunas 1 e 2 obtendo um arranjo fixo/fixo/líquido. Se desejar obter um arranjo fixo líquido fixo, basta flutuar a coluna 1 para a esquerda a coluna 2 para a direita e depois indicar as margens esquerda e direita da coluna 3 com as larguras das colunas 1 e 2 respectivamente.

Ao usar id na identificação das colunas evito os problemas de especificidade que poderiam ocorrer e respeito a regra de quando um objecto é única numa página o devo especificar no código. Assim as coisas ficam mais claras. Ficamos a saber que não são itens recorrentes

Os nomes das colunas deviam ser mais intuitivos como por exemplo barra de navegação (sem os espaços e os assentos), conteúdo, destaque (desde que mais apropriados à função desempenhada).

Designing with Web Standards

Há dias em que se encontram verdadeiras pérolas (não estou a ter segundas intenções aqui). Não tinha ainda visto uma apresentação do Jeffrey Zeldman que acho que todos os responsáveis por criação de sítios na teia deviam ver Concepção com normas da Teia (tradução demasido livre de Designing with Web Standards)

Claro, conciso, preciso, correcto...

Toda razões para leitura (nem que seja rápida)

MIME

MIME tem as suas origens como extensão ao email e foi reutilizada no HTTP como meio de declaração de tipo de conteúdo (ou tipo de media) a ser servido. Cada recurso tem um tipo de MIME específico que é constituído por duas partes: o tipo principal e um subtipo, que são separados por um traço de fracção «/». O tipo MIME indica ao agente utilizador (quando recebe o documento) como o tratar em conformidade, permitindo assim associar uma aplicação específica ou um comportamento específico ao tipo de media em causa no seu navegador (ou melhor dizer agente utilizador).

Qual o tipo MIME em que deve ser servido o XHTML?

A resposta breve é application/xhtml+xml, como descrito na ">nota de tipos de media XHTML do W3C. A resposta contextualizada é um pouco mais complexa.

Porque não text/html?

A principal razão para usar um novo tipo de MIME para XHTML é esta ser uma linguagem XML o que significa que está sugeita a validação mais estrita e assim não tender para a sopa de marcação que muita gente chama HTML; assim, é razoável indicar a diferença aos navegadores de forma a serem capazes de tratar o código resultante de um modo mais eficiente.

O facto da XHTML ser baseada na XML involve ainda importantes diferenças sintáticas — a mais significativa das quais é que marcadores vazios como <br> que não é necessário ter fecho em HTML enquanto tal é obrigatório na XHTML ( como em <br> ). Estas alterações sintáticas são mais uma razão para distinguir entre HTML e XHTML e assim surge o tipo MIME diferente.

Mas alguns navegadores desconhecem application/xhtml+xml

De facto é assim, e é um dos maiores problemas actuais da adopção do novo tipo MIME, em especial porque o Internet Explorer não o reconhece (e não está previsto que o novo IE7 o faça). Isto é um problema normal com a adopção de novas tecnologias e normalmente é resolvido com o tempo. Contudo por agora há maneira de sair deste ciclo vicioso:

• O XHTML 1.0 define um modo de retrocompatibilidade que nos permite usar XHTML 1.0 mantendo compatibilidade com navegadores antigos ou retrogrados. Se seguir estas directrizes é-lhe permitido servir o seu XHTML como text/html. O modo de retrocompatibilidade define alguns truques sintáticos que permitem um documento XHTML ser compreendido pela maior parte dos navegadores HTML.
• Usar técnicas de negociação de conteúdo no seu servidor pode levar a servir de facto o seu XHTML 1.0 seja como text/html ou como application/xhtml+xml dependendo das capacidades do agente utilizador, de forma a manter retrocompatibilidade com navegadores antigos enquanto explora as capacidades dos modernos.

A primeira técnica torna o seu conteúdo compreensível pela maioria dos navegadores da web, mas ao fazê-lo perde todas as vantagens de ter um tipo de MIME diferente: o poder de ser tratado como XML, permitindo ao documento de ser distinguido da sopa de marcação, obtendo uma reprodução mais rápida em navegadores modernos.

A segunda técnica trata dos navegadores existentes enquanto mantém o novo tipo MIME para os que sejam capazes de o compreender; a desvantagem é poder ser difícil de implementar no seu servidor dependendo do acesso que tenha às suas configurações e parâmetros.

Alternativamente pode ser o seu XHTML (qualquer versão) como application/xml, ou mesmo como text/xml. Contudo, servir documentos XHTML como text/xml pode trazer problemas de conjuntos de caracteres devido às regras que são aplicadas a tipos MIME text/*serem mais complexas do que aquelas que são aplicadas a tipos application/*. É ainda importante assinalar que em quaisquer destes tipos MIME o Internet Explorer irá mostrar o código fonte em vez de os interpretar como XHTML.

Como é que instalo e configuro a negociação de conteúdos de que falamos acima?

Isso depende do servidor Web que usa e se é ou não o administrador do servidor onde deseja usar este tipo de negocioação. Aponte ao seu administrador de web server este documento e peça-lhe para agir de forma apropriada.

Se for o administrador do servidor em questão lei-a o artigo de técnicas associadas.

Ou seja como já aqui disse a escolha do tipo de documento não é tão simples como parece à primeira vista.

Em Resumo

Versão (X)HTML	Tipo MIME recomendado	Limitações em navegador	Tipo MIME alternativo	Técnicas
HTML 2.0,3.2,4.0,4.01	text/html	nada, mas este tipo MIME foi frequentemente abusado como chapéu de uma sopa de marcação	N/A	N/A
XHTML 1.0	application/xhtml+xml	Não reconhecido pelo Internet Explorer 6 e versões anteriores. Reconhecimento não previsto para IE7	Se estiver a usar directrizes de retrocompatibilidade, text/html application/xml (ou text/xml, mas com muito cuidado em relação ao parâmetro de conjunto de caracteres ( charset ))	directrizes de retrocompatibilidade (para uma tradução para português negociação de conteúdo entre text/html e application/xhtml+xml
XHTML 1.1, XHTML Basic, perfís XHTML	application/xhtml+xml	Não reconhecido pelo Internet Explorer 6.x e versões anteriores	application/xml (ou text/xml, mas cuidado em relação ao parâmetro de conjunto de caracteres ( charset ))	N/A

Squidoo

Finalmente posso falar disto Squidoo. É mais uma aplicação web onde perítos (nas palavras de Seth Godin todos somos perítos em algumas coisa) apresentam os seus conhecimentos e sítios sobre um tema. Eu experimentei só não gostei das limitações em relação à utilização de língua que não o inglês. Para quem quizer ver vá até: Coding Web.