Carlos Tristacci Just another WordPress weblog

Padrões web

  • Na categoria: Padrões web
  • por: Carlos Tristacci
  • em: 20.07.2009

Layout Líquido – Parte 3 ( Final )

Finalizando a série sobre layout líquido, nesta vídeoaula apresento a técnica chamada  Holy Grail ou Santo Graal, para um layout com 3 colunas, sendo 2 colunas com largura fixa e 1 coluna com largura variável.

Está técnica foi publicada no site www.alistapart.com/articles/holygrail e depois traduzida para o português no site alabrasil.blogspot.com/2006/02/em-busca-do-santo-graal.html. Acredito que tenham batizado com este nome devido aos problemas que ocorrem na estruturação deste tipo de layout principalmente no Internet Explorer 6.

Sinta-se a vontade em assistir e comentar a técnica.

Get the Flash Player to see this player.

Baixe os arquivos desta vídeoaula.

  • Na categoria: Internet
  • por: Carlos Tristacci
  • em: 05.07.2009

Firefox 3.5

Baseado na plataforma de renderização Gecko 1.9.1, que esteve em desenvolvimento durante o ano passado. Esta nova versão oferece muitas mudanças em relação a versão anterior, apoio a novas tecnologias da Web, melhorando o desempenho e facilidade de uso.

Get the Flash Player to see this player.

Navegação Privativa

O histórico do navegador é bastante útil caso você queira voltar a visitar uma página que não lembra o endereço. Mas talvez você não queira que outras pessoas que utilizem o seu computador possam acessar seu histórico de navegação ou de download. Então, basta ativar a opção Ferramentas > Iniciar Navegação Privativa.

TraceMonkey

TraceMonkey acrescenta código nativo-compilação para o motor JavaScript da Mozilla (conhecido como “SpiderMonkey”). É baseado em uma técnica desenvolvida na UC Irvine chamado “trace trees“, e da construção no código e idéias partilhadas com o projeto Tamarin Tracing. O resultado final é um aumento enorme de velocidade.

performance-chart

Desempenho do Firefox: Rápido – Máis rápido – Mais rápido ainda
Resultados do teste SunSpider em uma máquina com Windows XP

Navegação ciente de localização

Sites que usam a navegação ciente de localização perguntarão onde você está para poder fornecer informações mais relevantes, ou para economizar tempo ao pesquisar. Digamos que você esteja procurando por uma pizzaria na sua região. Um site será capaz de pedir que você compartilhe sua localização para que uma simples busca por “pizza” traga os resultados que você precisa… nenhuma outra informação ou digitação extra será necessária.

Ou, se você estiver mapeando um percurso para chegar em algum lugar, o site saberá o seu ponto de partida; você só precisará informar para onde deseja ir.

Esse serviço é totalmente opcional – o Firefox não disponibiliza a sua localização sem pedir a sua permissão – e foi feito respeitando ao máximo a sua privacidade. E, como todos os elementos do Firefox, está sendo criado usando padrões abertos para facilitar a adoção por desenvolvedores da web.

Suporte das tags HTML 5 <video> e <audio>

Com o suporte cada vez mais frequentes nos browsers, o Firefox 3.5 oferece suporte as tags <video> e <audio> incluindo suporte nativo para a codificação de vídeo Ogg Theora e codificação de áudio Vorbis.

<video src=&quot;meet.ogv&quot; controls=&quot;true&quot;>
Seu navegador não tem suporte a tag video.
</video>

Sem a necessidade de criar um player, o navegador renderiza o vídeo e dá ao usuário controles utilizando o botão direito do mouse. Se habilitar os controles com o atributo controls=”true”, deixará disponível os controles para o usuário.

A mensagem que está dentro da tag vídeo aparece quando o navegador não suportar a tag.

A tag audio possui as mesmas características.

<audio src=&quot;audio.wav&quot; controls=&quot;true&quot;>
Your browser does not support the audio element.
</audio>

Suporte a fontes externas

Imagine um desenvolvimento mais fácil e criativo, sem ter que utilizar somente as fontes padrões dos sistemas operacionais ou ter que exportar imagens com os textos que utilizam fontes não pertencentes por padrão nos sistemas operacionais.

Antes esta possibiidade era possível apenas em navegadores com motores Webkit, mas agora o Firefox 3.5 permite isso, aumentando o número de usuários que suportam essa característica.

Sintaxe:

@font-face {
font-family: <nome da fonte>, Verdana, Arial;
src: <endereço da fonte>;
[font-weight: <weight>];
[font-style: <style>];
}

Valores:

<nome da fonte>

Especifica o nome da fonte.

<endereço da fonte>

Especifica o endereço remoto onde está hospedada a fonte.

<weight>

Valor opcional, especifica o peso da fonte,.

<style>

Valor opcional, especifica o estilo de uma fonte.

Concluindo

É empolgante ver que a web evolui de forma a tornar tudo mais fácil e empresas como a Mozilla, correrem em disponibilizar cada vez mais funcionalidades em seus produtos.

Mas, acredito que o que ainda não satisfaz os desenvolvedores é o uso do Internet Explorer por parte dos usuários. Não, não sou um fanático pelo Firefox, mas infelizmente a maioria dos usuários utiliza o versão 6 do Internet Explorer, o que limita o nosso desenvolvimento ao CSS 2.1, ainda de forma parcial.

Por isso, se chegou até esta conclusão, mesmo que não seja desenvolvedor, contribua com uma internet mais dinâmica e rica. Instale o Firefox, Safari, Google Chrome, Opera ou atualize a versão do seu Internet Explorer.

  • Na categoria: Padrões web
  • por: Carlos Tristacci
  • em: 10.05.2009

Layout Líquido – Parte 2

Complementando a série sobre layout líquido, nesta segunda vídeoaula apresento uma técnica para um layout com 2 colunas, com 1 das colunas com largura fixa.

Está técnica é útil quando temos colunas já com um tamanho bastante reduzido e se caso sejam diminuídas poderiam distorcer a apresentação do conteúdo. Ela é bastante simples, quando eu a aprendi  fiquei espantado com a “jogada” usada com o XHTML e CSS.

Get the Flash Player to see this player.

Baixe os arquivos desta vídeoaula.

  • Na categoria: Padrões web
  • por: Carlos Tristacci
  • em: 09.05.2009

Layout Líquido – Parte 1

Depois de um tempo sem postar, trago para vocês uma vídeoaula sobre layout líquido. Uma técnica muito legal para resolver problemas que encontramos em arquitetura de informação, quanto ao melhor aproveitamento dos espaço da tela, e também com detalhes relativos a acessbilidade e as características de cada leitor de telas.

Esta é a primeira vídeoaula e a mais simples de uma série de 3 posts sobre este assunto, que trata apenas da definição do layout líquido com valores percentuais .

Get the Flash Player to see this player.

  • Na categoria: Padrões web
  • por: Carlos Tristacci
  • em: 08.05.2009

Tableless – CSS

Dando a sequência na série Tableles, vamos estilizar o XHTML estruturado na vídeoaula Tableless – HTML. Deixando claro que a técnica que utilizo neste post é uma das várias técnicas que são utilizadas na web. Cada uma com suas vantagens e desvantagem e dependendo da maturidade e intimidade que o webdesigner tem com o XHTML e CSS.

Get the Flash Player to see this player.

  • Na categoria: Padrões web
  • por: Carlos Tristacci
  • em: 07.05.2009

Web Standards. A Teoria da Simplicidade

Estreio meu primeiro Screencast (vídeo-aula), falando sobre Web Standards. Este será uma sequência de outros Screencasts falando sobre o desenvolvimento web dentro dos padrões e de forma acessível.

Espero que gostem deste novo modelo de post e deixem comentários. Um abraço!

  • Na categoria: Padrões web
  • por: Carlos Tristacci
  • em: 06.03.2009

Guia de Referência XHTML

Salve Galera!

Acabei de receber uma dica de um material, para consulta rápida, de um colega aqui da Universidade de Brasília.

O Guia de Referência XHTML, produzido pelo cgi.br/w3c, contém a especificação de todas as tags e atributos do XHTML.

Bom material, para quando surge aquela dúvida de qual tag utilizar.

Faça o download do guia neste endereço - http://www.w3c.br/divulgacao/pdf/guia-xhtml-w3cbr.pdf

Abraço!

  • Na categoria: Padrões web
  • por: Carlos Tristacci
  • em: 28.01.2009

XSLT

Hoje tive uma reunião sobre um novo projeto que irei participar na Universidade de Brasília, o qual me deixou empolgado, pelo fato de utilizarmos XML e XSLT  neste projeto. O motivo dessa empolgação foi que há alguns anos eu estudei XSLT mas não pude utilizar a linguagem em projetos da minha empresa, por questões técnicas, e agora vou poder testá-la e poder perceber suas vantagens e desvatagens.

O papel da XSLT

A finalidade original da XSLT era transformar documentos XML em documentos XSL. Porém, como definida agora, a XSLT pode fazer muito mais. Pode também transformar HTML, arquivos de texto comum e arquivos de texto com estruturas não definidas na XML.

Por outro lado, a XSLT não é a única maneira de transformar os documentos XML. Pode ser usada também uma linguagem de programação geral como C, C++ ou Java. A XSLT tem a vantagem de ser mais leve que essas linguagens – Grande parte das vezes, a XSLT é interpretada. Porém, a Sun Microsystems propôs um compilador para compilar os documentos XSLT no código intermediário do Java. Foi projetada para a transformação e é bem equipada como uma linguagem para executar esse objetivo de construção principal. Permite escreves programas muito menores que em uma linguagem de programação geral.

XSLT no canal de publicação HTML

Suponha que quiséssemos apresentar um documento XML no browser Web do usuário. Existem muito poucos componentes pelos quais o documento passará para se tornar um documento HTML  pronto para ser exibido no browser Web. Chamamos esses componentes de canal de publicação HTML.

O documento XML pode chegar no servidor web de muitas maneiras. O documento pode ser criado manualmente usando um editor, pode ser a saída de um programa ou pode ser parte de um banco de dados XML.

Podemos transformar o documento XML em um documento HTML, no servidor Web e então enviá-lo para o browser Web. Em outras palavras, o documento XML pode ser fornecido a um processador XSLT para convertê-lo em um documento HTML de acordo coma as instruções de um documento XSLT. Quando o documento HTML for recebido pelo browser Web, este não saber;a que o documento original é um documento XML. O browser não precisa saber nada sobre a XSLT ou sobre como transformar o documento XML original. Ele simplesmente exibe o documento HTML que recebe.

Também é possível enviar o documento XML para o browser Web. Acompanhando o documento XML está um documento XSLT com as instruções para transformar o documento XML em um documento HTML. Nesse caso, quando o browser Web receber os documentos XML e XSLT terá que aplicar o documento XSLT no documento XML para obter o documento HTML como resultado. O browser terá que saber como executar a transformação e terá que ter um processador XSLT nele. A vantagem é que o browser terá os documentos XML e HTML final. O browser pode transformar o documento XML diversas vezes, portanto isso pode ser uma vantagem significante.

Quer a transformação seja executada no lado do servidor ou no lado do cliente, é necessário um documento XSLT com as  instruções para a transformação.

Mais informações

Se quiser estudar mais a XSLT, indico o livro XSLT interagindo com XML e HTML, de autoria de Khun Yee Fung, Editora Ciência Moderna.

Capa Livro XSLT interagindo com XML e HTML

Um abraç0 à todos!

  • Na categoria: Padrões web
  • por: Carlos Tristacci
  • em: 05.05.2008

Acessibillidade Web: Custo ou Benefício

Estudando acessibilidade na internet esta semana encontrei este vídeo no site www.acessibilidade.net, apresentado por pessoas com necessidades especiais, falando sobre a importância e o custo benefício da acessibilildade. Perceba a importância do desenvolvimento de sites acessíveis.

  • Na categoria: Padrões web
  • por: Carlos Tristacci
  • em: 03.05.2008

Certified HTML Developer

Certificado - Certified HTML Developer

Depois de conquistar a certificação Adobe Certified Professional Flash MX 2004 Developer em 2006, hoje conquistei a certificação Certified HTML Developer, realizada pela W3Schools.

Esta certificação que achei que fosse relativamente fácil, me trouxe algumas surpresas, com questões sobre Frames e atributos HTML de formatação. Assuntos que atualmente não estou mais acostumado a trabalhar devido ao seu desuso ou depreciação pela W3C.

Com 70 questões para serem respondidas em 70 minutos, conclui em 42 minutos com aproveitamento de 94%. Fico feliz por alcançar mais esta certificação pois é fruto de 5 anos de trabalho como desenvolvedor e professor na área web.