Tag: html

Webfonts: Agora vai!

23 de abril de 2010 às 15:10 | Lucas Petes | , , , , ,

Talvez o assunto mais polêmico da especificação do CSS3 (enquanto o mais polêmico do HTML5 provavelmente seja o codec de <video>), o Web Open Font Format foi aprovado pela W3C no último dia 8, tendo também como signatário… a Microsoft.

Ter a Microsoft no jogo significa muito. Primeiro, porque o IE detém o maior market share; de nada adianta o desenvolvimento de um padrão se ele não puder ser amplamente usado. Segundo, porque se esperava que a Microsoft fosse aparecer com algum formato próprio e ir mais uma vez contra a corrente. Terceiro que, além do suporte a HTML5 e outros padrões já estabelecidos que serão suportados no IE9, a Microsoft deve somar forças no desenvolvimento dos novos padrões e tirar o atraso.

O WOFF já vinha sendo apoiado pela Mozilla e por várias type foundries (design/comércio de fontes) e surge como a evolução de outras iniciativas: ZOT (Mozilla) e .webfont (designers de tipos). Outros formatos fazem parte das tentativas de incorporação de fontes em sites: EOT (da Microsoft. Talvez o primeiro formato, suportado inclusive no IE6), uso direto de OpenType (Safari, Mozilla) ou mesmo SVG.

Entre os requisitos para um bom formato de webfonts estão a geração de subsets, compressão, incorporação da licença de uso da fonte e a compatibilidade com os formatos existentes, tanto para uma boa conversão das curvas das fontes, quanto para o suporte a ligaduras e outras features dos formatos modernos de fontes.

O que muda com o WOFF

Como você deve saber bem, para se usar hoje uma fonte (declarando font-family e pronto) esta precisa estar instalada no computador do usuário, o que limita as escolhas a pouco mais de meia dúzia de fontes seguras.. A simples incorporação da fonte também não é uma solução aceitável para as foundries, uma vez que abriria (ainda mais) as portas para a pirataria.

Usar hoje uma fonte diferente em um projeto web exige alguns malabarismos. O primeiro deles é usar imagens para representar o texto (não esquecer do atributo alt, por favor). Dá algum trabalho, mas resolve se o texto for estático. Caso contrário, passamos para os text replacements, que são scripts (PHP, Flash, JS, etc) que substituem o texto dos elementos especificados na página por imagens geradas dinamicamente, Flash ou SVG (caso do Cufón, usado nos títulos aqui do TAS). O text replacement também tem suas desvantagens, por depender de plugins e outros suportes do browser, pesar um bocado ou não suportar a seleção do texto.

A incorporação de fontes é normalmente aceita de alguma forma pela licença das fontes. Comum em Flashs e PDFs, vai ser também para a Web. Uma versão limada da fonte (com apenas os caracteres necessários para a apresentação do conteúdo) é gerada e incorporada ao site, o que também já é considerada uma proteção suficiente.

Daqui pra frente

Aceito pela W3C, o padrão vai ser conduzido pelo WebFonts Working Group para refinar a especificação e desenvolver uma recomendação formal. Provavelmente o WOFF não seja suportado a curto prazo nos browsers, tampouco já deve fazer parte do IE9, mas, pra uma novela que já se arrasta por tanto tempo, não custa esperar um pouco mais.

(via Ars Technica e Estadão)

Comentários desativados
Compartilhe

IE9: Chuva de Canivetes!

19 de março de 2010 às 16:25 | Lucas Petes | , , , , , ,

Site Internet Explorer 9

Em tempo: Anunciado esta semana, o Internet Explorer oferecerá suporte a CSS3, HTML5, SVG e tratá um novo motor Javascript, o Chakra. Pelos testes de desempenho, o novo motor é mais rápido que o Gecko (Firefox) mas ainda inferior a Webkit (Chrome, Safari) e Opera. O browser virá também com suporte a aceleração de hardware (usando a GPU) e faz uma bela pontuação no Acid3. Mais infos no blog oficial.

No rascunho do HTML5 ainda não consta o status atualizado da implementação no IE9.

(via Pinceladas da Web)

Comentários desativados
Compartilhe

[Link] Dive Into HTML5

18 de fevereiro de 2010 às 11:58 | Lucas Petes | , , ,

openclipart
Mark Pilgrim (O’Reilly Media) está escrevendo e publicando uma seleção das funcionalidades mais bacanas do HTML5.

O site faz uso de fonte embed via @font-face, uma das grandes novidades da especificação – além das tags <video>, <audio> e <canvas>, já tão comentadas por aí.

Alguns capítulos já estão prontos ou num estágio bem avançado. Alguns outros, por enquanto, só constam no índice. Pilgrim dá exemplos de aplicação, compara e explica blocos de código.

Em inglês.

Comentários desativados
Compartilhe

Sai o primeiro rascunho público do HTML 5

23 de janeiro de 2008 às 14:59 | Lucas Petes | , ,

Foi anunciado ontem pelo WHATWG/W3C o primeiro rascunho público (Public Working Draft) do HTML 5. Na realidade, o conteúdo do rascunho já estava disponível online e era editado pelo grupo todos os dias, continuamente, com diversas marcações ao longo do texto. O release de ontem representa uma milestone importante do projeto, por representar idéias mais concretas, viáveis e passíveis de implementação nos browsers, além de servir como objeto de estudo.

Entre os príncipios do HTML estão: suporte ao conteúdo já existente (navegador deve processar e se comportar como era a intenção de que fosse) , prioridade à forma de codificação mais usada (ex: <br /> é hoje mais usado que <br>. Mesmo que no HTML5 não seja necessário fechar tags como <br>, <img> e <link>, não faz mal usar <br />, separação de conteúdo (HTML) de apresentação (CSS) e acesso universal (mídia, idiomas, acessibilidade).

Algumas das mais interessantes funcionalidades para os autores são as APIs para gráficos bi-dimensionais, incorporação e controle de audio e video (com tags específicas – achar o plugin/codec e fazer a reprodução fica por conta do browser) , armazenamento de dados persistente no client-side e a possibilidade de edição de documentos pelo usuário de maneira interativa. Elementos comuns nas páginas ficam mais fáceis de serem representados, com <section>, <footer>, <nav> (navegação) e <figure> (para colocar uma legenda numa foto ou outro conteúdo incorporado, por exemplo).

Por fim, a W3C diz que a especificação do HTML5 ajuda a melhorar a interoperabilidade e reduz os custos de software, por ter regras precisas, não só de como escrever um HTML correto, mas também de como recuperar erros.

via Under-Linux, Slashdot, W3C

Comentários desativados
Compartilhe

A Web e o HTML: Passado, presente e futuro (Parte 4)

21 de janeiro de 2008 às 11:03 | Lucas Petes | , , , , , ,

Juro que este será o último post da série :)

Minha intenção é começar a apresentar um pouquinho das mudanças de sintaxe no HTML 5. Tratarei aqui principalmente do que diz respeito ao cabeçalho, identificação do arquivo e coisas do tipo, principalmente porque isso já está definido pelo WHATWG e não deve ser mudado. As tags que ficarão dentro do <body> poderão sofrer mudanças de caráter semântico (terão outro sentido), outras serão mantidas como antes e algumas serão adicionadas, como a já famosa tag <canvas>, criada pela Apple no dashboard do OS X. Vários atributos e tags também serão removidos.

O DTD

O HTML nasceu com a sintaxe SGML, relativamente simples e prática pras necessidades de uso e semântica. A customização da sintaxe de uma linguagem de marcação em SGML é especificada por um DTD (Document Type Definition) como este:

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

para o HTML 4 strict, ou este:

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

para o XHTML 1.0 Strict.

O DTD carrega toda a especificação da linguagem – suas tags, atributos e valores aceitos.

No HTML 5, bastará a declaração <!DOCTYPE html>, que é suficiente para o navegador renderizar o html em ‘standards mode’ – não em ‘quirks mode‘.

MIME Type e Encoding

É o MIME Type que define o tipo do documento que você está usando. O padrão para HTML clássico é e vai continuar sendo servido como text/html. Se você utiliza text/html para enviar um XHTML, ele será considerado um HTML, talvez com erros de sintaxe.

Hoje, quando não é possível o envio do MIME e do encoding da página pelo cabeçalho HTTP, usa-se:

<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

No HTML5, o tipo deverá ser identificado somente no cabeçalho HTTP, de modo que se for possível identificar o encoding, a tag abaixo deve ser colocada logo após do DOCTYPE/html/head, antes mesmo do título, nos primeiros 512 bytes do código:

<meta charset="UTF-8">

Um arquivo XHTML deve ser servido no cabeçalho HTTP com um MIME Type de XML, como application/xml ou application/xhtml+xml. A codificação é passada no atributo encoding, na declaração do XML (que DEVE estar na primeira linha):

<?xml version="1.0" encoding="UTF-8"?>

Por fim, um arquivo HTML 5 teria essa estrutura básica:

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Example document</title>
    </head>
    <body>
        <p>Example paragraph</p>
    </body>
</html>

e um arquivo XHTML 5 seria basicamente apresentado assim:

<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Example document</title>
    </head>
    <body>
        <p>Example paragraph</p>
    </body>
</html>

Provavelmente o elemento canvas ainda me renderá alguns post. Pra ir adiantando o assunto, deixo o ‘Doom’ feito pela Mozilla, os efeitos do CVI (canvas/JS), o clone do MS Paint e o tutorial feito pela Mozilla.

Para terminar, você pode conferir aqui a lista completa das diferenças entre o HTML 4 e o 5 e aqui um super artigo do A List Apart sobre o HTML 5, sua estrutura e a entrada de video/audio.

Comentários desativados
Compartilhe
« Posts mais antigos