Elementos de Áudio e Vídeo do HTML5

A adoção de algumas características do HTML5 está se tornando cada vez mais frequente nos novos browsers. Isso é bom porque não precisaremos esperar tanto para que todos os browsers tenham suporte a grande parte das características do HTML5, Javascript e CSS3.

No Firefox 3.5, é nativo o suporte aos elementos de áudio e vídeo do HTML 5. Isso inclui suporte para encodes de vídeo Ogg Theora e Vorbis para áudio. O código para incluir um vídeo é basicamente este:

1
2
3

<video src="http://v2v.cc/~j/theora_testsuite/320x240.ogg" autoplay>  
Atenção: Seu browser não suporta esse formato.
</video>

A mensagem que está entre a tag VIDEO é mostrada caso o browser não reconheça o formato de vídeo.
Caso o browser não abra o formato de vídeo OGG, você pode indicar para que ele abra um outro formato automaticamente, veja o código:

1
2
3
4
5

<video autoplay>  
  <source src="video.ogg" type="video/ogg">  
  <source src="video.mov">  
  Atenção: Seu browser não suporta esse formato.
</video>

@font-face – Suporte a fontes externas

A propriedade @font-face serve para que apliquemos fontes aos sites que não sejam default no computador do visitante. Ele era apenas suportado em browsers com motores Webkit, agora o Firefox trouxe essa possibilidade, aumentando o número de usuários que suportam essa característica.

A sintaxe:

1
2
3
4
5
6

@font-face {
  font-family: "Bitstream Vera Serif Bold";
  src: url("http://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf");
}
 
body { font-family: "Bitstream Vera Serif Bold", serif }

Você define primeiramente a fonte que irá ser utilizada, indicando seu source para que o browser possa localizá-la e assim fazer o download para ser aplicada. Feito isso, você pode utilizá-la nos elementos normalmente, como você faz com as fontes default.

Já falamos sobre propriedade @font-face aqui.

Opacity

Agora não precisamos mais utilizar o prefixo -moz- antes da propriedade OPACITY. Antes utilizávamos para testes apenas. Agora o pessoal do Firefox tirou esse prefixo para favorecer a propriedade OPACITY, sem prefixo. Eu nunca gostei destes prefixos, mesmo assim, essas coisas evitam erros de funcionalidades entre os browsers, já que um pode interpretar de forma diferente propriedades que ainda não foram realmente lançadas.

A propriedade opacity modifica a opacidade dos elementos, onde o valor 0 é totalmente transparente, e 1 é totalmente visível.

1
2
3
4
5

div {
   opacity: 0.3;
   border: 3px solid black;
   background: orange;
}

E um bando de outras atualizações

E há uma série de outras atualizações interessantes para os desenvolvedores, veja uma lista completa aqui.

Daqui pra frente os browsers irão forçar ainda mais a evolução do desenvolvimento web em todos os sentidos. Eles estão cada vez mais implementando coisas novas, que se dependessem do mercado, iriam começar a serem utilizadas daqui a alguns anos. Graças a esta concorrência entre os navegadores, essas novas novidades estão sendo suportadas cada vez mais cedo e podemos começar a utilizar para melhorar os projetos a partir de agora.

Baixe o Firefox 3.5 aqui.

• Graceful degradation é tudo sobre Acessibilidade
• Porque só para o iPhone?
• O Chrome não quer dizer muita coisa
• IE8 – O sonho não acabou
• Browser Targeting Version

CSS Animation permite que modifiquemos propriedades do CSS e tenhamos o resultado ali, na hora.
Para isso, usaremos uma propriedade chamada transition. Essa propriedade é divida em 3 propriedades: transition-property que é a propriedade que deverá ser animada, transition-duration é quanto tempo a transição irá durar, e transition-timing-function é o tipo de transição.

Imagine o seguinte código:

1
2
3
4
5
6
7
8
9
10

div {
   border: 10px solid black;
   width: 300px;
   height:300px;
   background:gray;
}
 
div:hover {
   background:red;
}

O código acima faz com que quando o usuário passe o mouse em cima do DIV, o background mude de cor.

Vamos adicionar a propriedade transition agora. Note o código abaixo:

1
2
3
4
5
6
7
8
9
10
11
12
13

div {
   border: 10px solid black;
   width: 300px;
   height:300px;
   background:gray;
 
   -webkit-transition: background 1s linear;
 
}
 
div:hover {
   background:red;
}

O CSS Animation entrará em ação com a propriedade transition.
Note que a propriedade tem o prefixo do Webkit, indicando que isso só funciona em browsers com este motor.

A propriedade transition tem 3 valores: o primeiro valor é a propriedade que você quer alterar. O segundo valor é o tempo que essa animação durará. O terceiro valor é tipo de transição.

Você pode fazer várias transições em, separando os valores por vírgulas. Veja o exemplo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

div {
   border: 10px solid black;
   width: 300px;
   height:300px;
   background:gray;
 
   -webkit-transition: background 1s linear, width 1s linear;
 
}
 
div:hover {
   background:red;
   width: 400px;
}

Neste caso, iremos animar a largura do DIV e ao mesmo tempo, mudaremos a cor de background.

Exemplo de CSS Animation

CSS Transform

Tudo isso fica mais interessante se utilizarmos algumas propriedades do CSS Transform.
O CSS Transform é uma das características do CSS que tranformam a forma original dos elementos do HTML. Por exemplo, inclinação. Veja abaixo:

1
2
3
4
5
6
7
8
9
10

div {
   border: 10px solid black;
   width: 300px;
   height:300px;
   background:gray;
   -webkit-transition: background 1s linear, width 1s linear;
 
   -webkit-transform: rotate(3deg);
 
}

No código acima, utilizei a propriedade transform com o valor rotate. Este valor rotaciona o elemento em sentido horário para um determinado grau. No caso acima, ele está inclinando o elemento com o valor de 3 graus.

Podemos fazer uma animação interessante utilizando o transform: rotate. Teste o código CSS abaixo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

div {
   border: 10px solid black;
   width: 300px;
   height:300px;
   background:gray;
   -webkit-transform: rotate(0deg);
   -webkit-transition: background 1s linear, width 0.5s linear, -webkit-transform 1s linear;
}
 
div:hover {
   background: red;
   width: 400px;
   -webkit-transform: rotate(360deg);
}

O código acima fará com que o elemento gire 360 graus.

Testei no iPhone

Fiz um teste rápido no iPhone. No iPhone, a função de HOVER é acionada quando o elemento é clicado. As animações funcionam perfeitamente, com exceção do giro de 360 graus que pára no meio e o elemento volta a posição normal.

Quem tiver algum celular Nokia com browser baseado em Webkit, faça uns testes e comenta com a galera os resultados.

Ainda é um rascunho no W3C

Tudo isso ainda é um rascunho lá no W3C. Mas a Apple já propôs sua idéia de como poderia ser o funcionamento do CSS Transformations aqui:
Apple’s Proposal for CSS Transformations.

O interessante é que os browsers hoje em dia estão andando com as próprias pernas. Na verdade não apenas os browsers, mas todos os desenvolvedores. Ninguém está esperando o W3C para implementar e inventar coisas. Todos estão ajudando a pensar como pode ser o desenvolvimento web de amanhã. O trabalho do W3C está se resumindo em estudar, incluir e modificar as idéias da comunidade e de suas equipes – que por sinal, estão em mais espertas e rápidas agora.

A documentação do rascunho do W3C está disponível aqui:
http://www.w3.org/TR/css3-animations/

Há bastante coisa para se ler aqui:

• Webkit Blog: CSS Animation
• Webkit Blog: CSS Transforms
• CSS: Transition Timing Functions

• Image-Replacement x Imagens
• Centralizando um objeto na Horizontal e Vertical com CSS
• Vídeo: Menu horizontal com CSS em 5 minutos
• Wordpress Include Tags
• Formulário Básico em 8 minutos – Tableless form

• Digest 05/09: Javascript, JQuery
• Digest 04/09: Javascript, JQuery e Ajax
• Navegando com a jQuery
• jQuery é bom para designers
• Digest 05/09: Técnicas de CSS

• Navegando com a jQuery
• Digest 06/09: Javascript, JQuery
• Digest 05/09: Técnicas de CSS
• Digest 04/09: Javascript, JQuery e Ajax
• Digest 04/09: CSS, HTML e Layout

• Digest 05/09: Javascript, JQuery
• Digest 04/09: CSS, HTML e Layout
• Lançado Firefox 3.5
• Introdução ao CSS Animation
• Digest 06/09: Javascript, JQuery

O Position é uma propriedade perigosa para iniciantes. Normalmente o desenvolvedor que acaba de conhecer essa propriedade, acha que ela é a resposta para todos os problemas de posicionamento e diagramação de layout. Pelo contrário. O Position não serve para diagramar a estrutura de layouts. Para isso, você utiliza a propriedade float do css. O Position vai servir para fazer coisas mais simples.

Existem 3 tipos de valores que usamos na propriedade position: relative, absolute e fixed.

Position Fixed

O position: fixed; irá fixar a posição do elemento na coordenada que você definir. A medida que a página é rolada, o elemento continua fixo na posição que você definiu e o conteúdo da página rola normalmente. Veja um exemplo de position fixed.

Position Relative

Todos os positions precisam de um ponto para iniciar o cálculo da coordenada para assim posicionar o elemento na tela. Ao contrário do que muitos acham, esse ponto não é o ponto central do elemento, o ponto base é o canto superior esquerdo do elemento. A partir deste canto, o browser irá calcular a coordenada que você definiu e irá posicionar o elemento no viewport.

O position relative posiciona o elemento em relação e ele mesmo. Ou seja, o ponto zero será o canto superior esquerdo, e ele começará a contar a partir dali.

Position Absolute

O Position Absolute é um tanto diferente do Relative. Enquanto o elemento com Position Relative utiliza seu próprio canto para referenciar sua posição, o elemento com Position Absolute se utiliza do ponto superior esquerdo de outros elementos. Estes elementos são os parentes dele do elemento com position absolute. Mais especificamente o pai.

Veja um exemplo em HTML.

No caso, se o DIV pai não tivesse position definido, o div filho iria se referenciar pelo BODY mesmo. Se caso o div pai não tivesse position definido, e se ele também fosse envolvido por outro div com position, o div filho iria se referenciar por este terceiro div.
Logo, o div com position absolute referencia sua posição pelo div mais próximo que o envolve e que também tenha um position definido. Complicado, não é?

Uma ocasião bem simples onde usaríamos position é na home do Flickr. Onde temos aquela imagem bonita de capa e o nome do autor logo abaixo. Para posicionar o nome do autor lá no rodape do div, você utilizaria o Position. Veja a imagem de exemplo:

No Campus Online há um vídeo explicativo sobre a propriedade position:

• Pulga na cueca e experimentando o HTML5
• Propriedade Float do CSS
• Implementar XHTML/CSS é grátis
• Video tutorial – Implementando HTML
• Modulando o CSS

• Digest 06/09: Javascript, JQuery
• Digest 05/09: Javascript, JQuery
• Podcast #16
• Digest 05/09: Técnicas de CSS
• Digest 04/09: CSS, HTML e Layout

• Lançado Firefox 3.5
• Digest 05/09: Javascript, JQuery
• Digest 05/09: Técnicas de CSS
• Graceful degradation é tudo sobre Acessibilidade
• Hierarquia de arquivos do Wordpress

Graceful Degradation é algo que vemos todos os dias. Trata-se de um método comum em dias onde a Internet é muito mais que um simples computador ligado no telefone. Acho que resumidamente, podemos dizer o que exatamente é Graceful Degradation com a frase:

Graceful degradation means that your Web site continues to operate even when viewed with less-than-optimal software in which advanced effects don’t work.

Peter-Paul Koch em Fluid Thinking

Esse assunto é bastante velho, mas que volta à tona nestes dias de campanhas contra o IE6 e outros browsers antigos. Eu mesmo já falei para ignorar totalmente o Internet Explorer 6, mas não é tão fácil assim. Eu posso ignorar aqui no Tableless, onde os usuários são de um nicho específico, mas eu não posso ignorar esse público quando se trata de um produto que é feito para o meu cliente. O cliente do meu cliente utiliza IE6. E ignorá-los significa fazer meu cliente perder dinheiro. Isso está fora de questão.
Então, se seguirmos este raciocínio, pense bem: podemos cometer este erro com outros tipos de usuários. Por exemplo, se seu site não pode ser bem visto em dispositivos móveis ou se não é bem acessado por leitores de tela.

É tudo sobre acessibilidade

Engana-se aquele que acha que acessibilidade é apenas sobre cegos e outras pessoas com alguma necessidade fisica. É claro que esse público merece uma atenção especial, que muitas vezes é tristemente ignorada. Mas quando falamos sobre acessibilidade, temos que entender que há outros grupos que se encaixam nesse assunto.
Quando um visitante não consegue acessar seu site por causa da resolução, ou por meio de algum dispositvo, ou por algum sistema de voz etc, estamos falando de acessibilidade.

Temos que prever visitantes com necessidades diversas. Há pessoas que passam a maior parte do tempo viajando. Por isso é muito difícil ler emails ou trabalhar conectado por notebook ou computador decente. Por isso ela passa a maior parte do tempo utilizando aparelhos móveis. Não por que ela queira, mas por causa da sua necessidade.
Se negligenciarmos o acesso desse tipo de público, cometemos um erro grave de acessibilidade. O mesmo para um simples visitante que não consegue acessar seu website por causa da sua resolução. Ele usa 800×600 porque precisa e não porque quer. Embora haja alguns que nem sabem o que é resolução.
Necessidade. Acessibilidade é tudo sobre a necessidade das pessoas.

Meios de acesso a Internet

Se as pessoas acessam a Internet, elas acessam por meio de um dispositivo especifico. Se ela é cega ou tem algum ou outro problema de visão, ela acessa o site por um leitor de tela. Se ela viaja muito ou fica muito tempo presa no trânsito, utililza dispositivos móveis.
Hoje em dia não existem muitos meios de acesso a Web. Se não acessamos por um computador ou um dispositivo móvel, acessamos com o que?
Outros meios de acesso a Internet estão nascendo. Na verdade novos usos para o acesso a Internet estamos surgindo e com estes novos usos, surgem novos meios de acesso. Vide o Surface da Microsof. É um meio totalmente diferente de interagir com a Web. Mas é um novo meio.

Mas e o Graceful Degradation?

Problemas com compatibilidades sempre existiram e creio que nunca deixarão de existir. Pelo contrário. Esses problemas serão mais comuns embora fiquem mais fáceis de resolver. Não serão apenas probleminhas entre browsers (os browsers existirão em tempos futuros?), mas também entre dispositivos.

Acontece muito hoje: tentamos acessar um serviço por um determinado browser, e somos aconselhados a utilizar outro browser porque o serviço não é compativel ou não funciona bem no nosso browser predileto.
Isso tira qualquer um do sério. O site deveria funcionar em qualquer browser. Para exemplificar: se em um meio de acesso eu não consigo utilizar bordas arredondadas nos elementos, os elementos apareceriam sem as bordas arredondadas. Isso não deveria prejudicar minha experiência de uso. Eu perderia um pouco no Design, mas conseguiria utilizar o serviço sem problemas.

A idéia do Graceful Degradation é exatamente essa: dar a melhor experiência possível ao dispositivo/meio que o usuário estiver utilizando sem prejudicar a acessibilidade.

Os usuários do IE6 por exemplo podem ficar sem bordas arredondas, position fixed, sombras e pngs semi-transparentes, mas eles precisam acessar e utilizar perfeitamente o site, com a melhor experiência que é possivel dar a este browser.

Mesma coisa é aplicada aos dispositivos móveis. Estes dispositivos normalmente não tem os mesmos recursos de um desktop. É tudo diferente, desde o poder de processamente até o tamanho das coisas. Então imaginar que o uso do sistema/site será parecido como se fosse acessado por PC, é um erro.

É um erro também se fizermos um site pensando em dispositivos menos capazes mas não nós lembrarmos do grupo de usuarios que acessam seu site com dispositivos mais completos e modernos. É engraçado porque pensamos sempre no usuário que está no pior cenário. Mas aquele usuário que não seria um problema pra nós, pode se tornar o pior deles.

Um exemplo disso é quando usuários de iphone acessam sites inteiros feitos em Flash. Sabemos que é uma limitação do aparelho. Mas estes usuários estão crescendo e seu cliente pode estar ali. Normalmente ninuem coloca uma versão diferente da do Flash. Logo, estes usuários simplesmente são ignorados. Imagine a frustação.

Resumidamente, Graceful Degradation é dar a melhor experiência que você conseguir para o usuário.
Se ele utiliza o último lançamento da Apple ou se ele utiliza um Nokia 6111 com Opera Mini. Ele precisa ter a melhor experiência que é possível dar dentro dos limites de cada dispositivo.
Obviamente que vice não vai prever todos os tipos de usuário. Mesmo porque seria impossível fazer isso. Novamente eu digo o óbvio: faça um estudo de público-alvo é importante.

Para complementar seu estudo:

• Fault-tolerant System
  
• Graceful Degradation Dan’s Web Tips
• Graceful Degradation – CSS3.info
• Graceful Degradation Progressive Enhancement

• Lançado Firefox 3.5
• Porque só para o iPhone?
• Sites para Dispositivos Móveis – MediaType
• Sobre Internet Explorer para Mobile – Breve impressão
• O que é Tableless?

• Página de Erro 404 – 404.php
• Histórico e Arquivo – archive.php
• Index de Histórico e Arquivo – archives.php
• Página de uma Categoria – category.php
• Comentários – comments.php
• Rodapé – footer.php
• Cabeçalho – header.php
• Links – links.php
• Home e Principal – index.php
• Páginas – page.php
• Post – single.php
• Formulário de busca – searchform.php
• Resultados de busca – search.php
• Sidebar – sidebar.php
• Stylesheet – style.css

O Wordpress usa as Query String de cada link do seu site para saber qual arquivo ele deve mostrar na página. Ele decide qual tipo de página será requisitada – uma página de busca, categoria, a home etc.
Ele procura esses arquivo dentro do diretório do seu template. Caso o WP não encontre o arquivo requisitado, ele escolhe o template padrão do index.php para ser usado. Há uma hierarquia de arquivos de template que o Wordpress irá requisitar caso ele não encontre o correto.

Por exemplo: imagine que seu visitante clique em um link de seu site que o leve para dentro de uma categoria. O Wordpress irá procurar o arquivo referente a categoria personalizada. Suponha que o ID da categoria seja 40, ele procuraria o arquivo category-40.php, que é o arquivo que personaliza a página desta categoria. Caso ele não o encontre, o Wordpress procura pelo arquivo genérico que gera as páginas de categorias, no caso o category.php. Contudo, se ele não encontrá-lo também, ele procurará o archive.php que é o documento que gera as páginas de históricos e arquivos. Caso ele também não o encontre, ele irá utilizar o arquivo principal index.php
Assim, seu sistema/blog/site não fica com erros por não encontrar um determinado documento.

Abaixo segue a hierarquia de alguns arquivos. Você pode ver muito mais detalhes aqui.

Home Page

1. home.php
2. index.php

Visualizando o post

1. single.php
2. index.php

Páginas

1. nomedapagina.php – Seria um arquivo para uma página especifica personalizada
2. page.php
3. index.php

Category display

1. category-id.php – Categoria específica, onde o ID é o número de identificação da categoria
2. category.php
3. archive.php
4. index.php

Histórico

1. date.php
2. archive.php
3. index.php

Tag

1. tagslug.php – Arquivo personalizado para uma tag específica
2. tag.php
3. archive.php
4. index.php

404

1. 404.php
2. index.phpc

Na documentação do Wordpress há um diagrama muito esclarecedor:

Muitos desenvolvedores por aí, aconselham que você comece seu theme a partir de um já pronto. Eu já vou além e sugiro que você comece fazendo os arquivos à medida em que for precisando dos arquivos. Assim você evita grandes quantidade de documentos inúteis na pasta do seu template. Isso é muito importante caso você esteja fazendo um site, por exemplo. Quanto mais organizado e menor a quantidade de arquivos, melhor. Mesmo assim, não atole todas as funções no index.php. Divida cuidadosamente as seções do site para não haver confusão em apenas um arquivo.

É possível saber quais os arquivos você precisará utilizar em seu template logo quando recebemos os documentos em HTML. Você pode utilizá-los como base para a criação dos arquivos dos templates. É a melhor maneira de começar criando um theme do zero.

No site do Wordpress há outras muitas informações importantes sobre a Hierearquia dos Arquivos.

• Wordpress Include Tags
• Image-Replacement x Imagens
• Tutorial Tableless Básico
• Lançado Firefox 3.5
• Introdução ao CSS Animation