El mes de agosto ha sido un mes muy movido en este grupo, en el que sea ha debatido sobre el futuro borrador del W3C. En torno a ese hilo de discusión se han ido generando otros, creándose un gran debate.

Criei uma imagem única contendo as duas imagens que deveriam ser mostradas, a normal e para quando o mouse estivesse sobre. Mais ou menos assim

Para este item criei uma classe no arquivo css assim:

#lateral #icones ul li.minuto a {
background: url(../img/minuto.png) top left no-repeat;
}
#lateral #icones ul li.minuto a:hover {
background-position: bottom left;
}


A primeira define a imagem do fundo, e a segunda, o comportamento quando o mouse estiver sobre o link. No caso, o alinhamento padrão da imagem é top, como mostrado na primeira, e bottom quando o mouse está sobre o link, como mostra a segunda.

A principal vantagem desse método é o fato de apenas uma imagem ser carregada, o que faz com que o link funcione corretamente já na primeira vez. A desvantagem, é o fato de que se a imagem for muito grande, ela demorará mais para ser carregada.

Welcome to the home of people trying to make browsing the Web from my mobile phone easier.

It is the Strata Center at MIT in Cambridge, Ma designed by Frank Gehry and opened in 2004. I passed by it yesterday on my way back from seeing a movie.

I'd seen this building before and had been disappointed in it although being flat out dazzled by this architect's Guggenheim Museum in Bilboa, Spain and Walt Disney Concert Hall in LA. I've only seen these other structures through photographs.

The movie, "Man on Wire" was about the Frenchman, Philippe Petit, who walked (the arresting NYC officer said "danced") on a cable between the twin World Trade Towers in 1974. Here is my review: where ever you are in the world as you read this blog, buy a plane ticket to the closest city in the world where it is playing and go see it. End of Review. I'm not kidding.

Soooooo.....I'm walking along after the movie toward the subway and see this building in the distance. It calls to me. I say "Hello" and go up to it and walk up and down the sidewalk on the opposite side of the street. I still don't like it but I just smile trying to be polite. I'm thinking, now, let me look at this from every possible angle. I have my good camera and wide angle lens and it is deserted. In fact, practically all of Boston and Cambridge appear to be deserted on this late August Saturday.

I take my photographs and notice just by the act of trying to capture it that my feelings are beginning to change about this building. I settle in for the short subway ride back to South Station and my train home and I'm aware that this odd building may have captured me. I think I may even like it.

I got home. I look at the day's photographs: Boston waterfront, clandestine photographs of Anish Kapoor's scultpures at the Institute of Contemporary Art, seagulls and two small sisters chasing one another outside the Children's Museum and many, many others that perhaps I'll use on future days, on different topics, but for now, I kept coming back to the photos of this building.

I decided to look it up and find out more about it.

MIT is now suing Frank Gehry because there are leaks in the roof, problems with ice on the roof in winter, and they have had to spend over a million dollars to renovate the amphitheatre due to poor drainage. It cost 300 million to build and Gehry's firm was paid 15 million. It was designed to facilitate communication between faculty and students as it is the home of various computer science and engineering facilities at MIT.

It is the home of one part of the World Wide Web Consortium {W3C}: the MIT Computer Science and Artificial Intelligence Laboratory (MIT CSAIL). This consortium, which also includes partners in France and Japan, labors to make a friendly mobile web experience and they have a July 29, 2008 press release on new research for people who want to use the Web while "on the go".

Ah, that would be moi.

I surf the web on my phone just for the hell of it after reading this press release. Yup, it's certainly easier than it used it be.

And, now I look at this building from the inside out, instead of just at the external. I begin to imagine minds grappling with the architecture of the web within this piece of architecture and all of a sudden I think I wuv this building and it's stacked Seuss like boxes appearing to fall into the street and cylinders that look like coffee carafes sans steam curling out.

Attention! Attention! Deep thought arriving on track 3. In fact, it might even be a movie review of "Man on Wire" as well: when you, yourself, your sorry odd lonesome and your "moiness" make an effort to capture something foreign, frightening and mysterious, that something reveals itself in the process and changes you in the art of capturing it. In other words, here's the mathematical theorem since this is MIT and all.

Art of Capture= Friggin' Miracle.

I now think MIT's Strata Center's exterior icy surfaces should be used in the Winter Olympics as a ski run, a fine icy shalom. Have Gehry build it and Philippe Petit's son or daughter can ski it.

Philippe? You do have children, don't you?

Oh, you really really need to have children. You are only 59 years old. Consider it the ultimate balancing act and step out, on to the cable, leave safety behind and give the world another poet of the air.

©Pat Coakley 2008

PHOTOGRAPHS CANNOT BE USED WITHOUT WRITTEN PERMISSION

I was speaking to Magnus last night and he was asking if I had a W3C cheat sheet. While I do have a couple of cheat sheets for things like Script.aculo.us and Regular Expressions, I thought a W3C cheat would be a good addition, so I set out along the path of Google. It wasn't long before I'd stumbled across several other useful cheat sheets - no substitute for knowing your stuff, of course - but handy as a quick reminder...

• Regular expressions cheat sheet
• CSS cheat sheet
• Javascript cheat sheet
• Script.aculo.us cheat sheet
• Prototype cheat sheet
• Microformats cheat sheet
• SEO cheat sheet
• A very useful accessibility checklist
• Web Content Accessibility Guidelines (WCAG) cheatsheet

Don't see a cheatsheet you're looking for? Try here, there are lots more...

• Validação de formulários no lado cliente (programa navegador);
• Interação com a página. Assim, foi feita como uma linguagem de script. Javascript tem sintaxe semelhante à do Java, mas é totalmente diferente no conceito e no uso.

1. Oferece tipagem dinâmica - tipos de variáveis não são definidos;
2. É interpretada, ao invés de compilada;
3. Possui ótimas ferramentas padrão para listagens (como as linguagens de script, de modo geral);
4. Oferece bom suporte a expressões regulares (característica também comum a linguagens de script).

Sua união com o CSS é conhecida como DHTML. Usando o Javascript, é possível modificar dinamicamente os estilos dos elementos da página em HTML.

Dada sua enorme versatilidade e utilidade ao lidar com ambientes em árvore (como um documento HTML), foi criado a partir desta linguagem um padrão ECMA, o ECMA-262, também conhecido como ECMAScript. Este padrão é seguido, por exemplo, pela linguagem ActionScript da Adobe(Antigamente Macromedia, porém a empresa foi vendida à Adobe).

Além de uso em navegadores processando páginas HTML dinâmicas, o JavaScript é hoje usado também na construção do navegador Mozilla, o qual oferece para a criação de sistemas GUI todo um conjunto de ferramentas (em sua versão normal como navegador, sem a necessidade de nenhum software adicional), que incluem (e não apenas) um interpretador de Javascript, um comunicador Javascript <-> C++ e um interpretador de XUL, linguagem criada para definir a interface gráfica de aplicações.

O uso de JavaScript em páginas XHTML, pelo padrão W3C, deve ser informado ao navegador da seguinte forma:

<script type="text/javascript">

/* aqui fica o script */

</script>

Caso contrário, o navegador irá interpretar o script como sendo código HTML, escrevendo-o na página.

Exemplos práticos

Pop-up não bloqueável

<html>
<title></title>

<style type="text/css">
#popup{
position: absolute;
top: 30%;
left: 30%;
width: 300px;
height: 150px;
padding: 20px 20px 20px 20px;
border-width: 2px;
border-style: solid;
background: #ffffa0;
display: none;
}

</style>
<body onload="javascript: abrir()">

<script language="javascript" type="">
function fechar(){
    document.getElementById('popup').style.display = 'none';
}
function abrir(){
    document.getElementById('popup').style.display = 'block';
    setTimeout ("fechar()", 3000);
}
</script>

<DIV id="popup">
<p>
Esse é um exemplo de popup utilizando DIV. Dessa maneira esse
pop-up não será bloqueado.
</p>
<p>
<small><a href="javascript: fechar();">[X]</a></small>
</p>
</DIV>

<br /> <a href="javascript: abrir();">Abrir POPUP</a>
<br /> <a href="javascript: fechar();">Fechar POPUP</a>

</body>
</html>

Ao invés de colocar a formatação dentro do documento, o desenvolvedor cria um link (ligação) para uma página que contém os estilos, procedendo de forma idêntica para todas as páginas de um portal. Quando quiser alterar a aparência do portal basta portanto modificar apenas um arquivo.

Com a variação de atualizações dos navegadores (browsers) como Internet Explorer que ficou sem nova versão de 2001 a 2006, o suporte ao CSS pode variar. O Internet Explorer 6, por exemplo, tem suporte total a CSS1 e praticamente nulo a CSS2. Navegadores mais modernos como Opera, Internet Explorer 7 e Mozilla Firefox tem suporte maior, inclusive até a CSS 3, ainda em desenvolvimento.

A interpretação dos browsers pode ser avaliada com o teste Acid2, que se tornou uma forma base de revelar quão eficiente é o suporte de CSS, fazendo com que a nova versão em desenvolvimento do Firefox seja totalmente compatível a ele assim como o Opera já é.

Exemplo simples:

  /* comentário em css, semelhante aos da linguagem c */
  body
  {
     font-family: Arial, Verdana, sans-serif;
     background-color: #FFF;
     margin: 5px 10px;
  }

O código acima define fonte padrão Arial, caso não exista substitui por Verdana, caso não exista define qualquer fonte sem serifa. Define também a cor de fundo do corpo da página.

Sua necessidade adveio do fato de o HTML (Hyper Text Markup Language) aos poucos ter deixado de ser usado apenas para criação de conteúdo na web, e portanto havia uma mistura de formatação e conteúdo textual dentro do código de uma mesma página. Contudo, na criação de um grande portal, fica quase impossível manter uma identidade visual, bem como a produtividade do desenvolvedor. É nesse ponto que entra o CSS.

As especificações do CSS podem ser obtidas no site da W3C "Word Wide Web Consortium", um consórcio de diversas empresas que buscam estabelecer padrões para a internet.

É importante notar que nenhum browser suporta igualmente as definições do CSS. Desta forma, o webdesigner deve sempre testar suas folhas de estilo em browsers de vários fabricantes, e preferencialmente em mais de uma versão, para se certificar de que o que foi codificado realmente seja apresentado da forma desejada.

XML (eXtensible Markup Language) é uma recomendação da W3C para gerar linguagens de marcação para necessidades especiais.

É um subtipo de SGML (acrônimo de Standard Generalized Markup Language, ou Linguagem Padronizada de Marcação Genérica) capaz de descrever diversos tipos de dados. Seu propósito principal é a facilidade de compartilhamento de informações através da Internet. Entre linguagens baseadas em XML incluem-se XHTML (formato para páginas Web), RDF,SDMX ,SMIL, MathML (formato para expressões matemáticas), NCL, XBRL, XSIL e SVG (formato gráfico vetorial).

Principais Características

Estimulado pela insatisfação com os formatos existentes (padronizados ou não), o World Wide Web Consortium (W3C) começou a trabalhar em meados da década de 1990 em uma linguagem de marcação que combinasse a flexibilidade da SGML com a simplicidade da HTML. O principio do projeto era criar uma linguagem que pudesse ser lida por software, e integrar-se com as demais linguagens. Sua filosofia seria incorporada por vários princípios importantes:

• Separação do conteúdo da formatação
• Simplicidade e Legibilidade, tanto para humanos quanto para computadores
• Possibilidade de criação de tags sem limitação
• Criação de arquivos para validação de estrutura (Chamados DTDs)
• Interligação de bancos de dados distintos
• Concentração na estrutura da informação, e não na sua aparência

O XML é considerado um bom formato para a criação de documentos com dados organizados de forma hierárquica, como se vê frequentemente em documentos de texto formatados, imagens vetoriais ou bancos de dados.

Pela sua portabilidade, um banco de dados pode através de uma aplicação escrever em um arquivo XML, e um outro banco distinto pode ler então estes mesmos dados.

Este exemplo demonstra a sintaxe flexível do XML sendo usada para descrever uma receita de pão:

<?xml version="1.0" encoding="iso-8859-1"?>
<receita nome="pão" tempo_de_preparo="5 minutos" tempo_de_cozimento="1 hora">
  <titulo>Pão simples</titulo>
  <ingredientes>
    <ingrediente quantidade="3" unidade="xícaras">Farinha</ingrediente>
    <ingrediente quantidade="7" unidade="gramas">Fermento</ingrediente>
    <ingrediente quantidade="1.5" unidade="xícaras" estado="morna">Água</ingrediente>
    <ingrediente quantidade="1" unidade="colheres de chá">Sal</ingrediente>
  </ingredientes>
  <instrucoes>
    <passo>Misture todos os ingredientes, e dissolva bem.</passo>
    <passo>Cubra com um pano e deixe por uma hora em um local morno.</passo>
    <passo>Misture novamente, coloque numa bandeja e asse num forno.</passo>
  </instrucoes>
</receita>

Onde temos na primeira linha:

     <Receita nome="pão" tempo_de_preparo="5 minutos" tempo_de_cozimento="1 hora">

"Receita" é o nome principal para o seu documento. Note que a semelhança entre XML e HTML é grande, na 1ª linha abrimos a tag Receita e na última linha fechamos a mesma, como em HTML, assim se estendendo por todo o exemplo.

O XHTML consegue ser interpretado por qualquer dispositivo, independentemente da plataforma utilizada, pois as marcações possuem sentido semântico para as máquinas. O HTML não consegue esta implementação. No entanto, não existem muitas diferenças entre o HTML e o XHTML. Para verificar se uma página XHTML está bem construída, o melhor método é validar o código através de uma aplicação Web disponibilizada pela organização W3C.

XHTML deverá ser o sucessor do HTML. Assim, muitos consideram que XHTML é a atual ou mais nova versão do HTML. Porém, XHTML é uma recomendação separada; a W3C continua a recomendar o uso de XHTML 1.1, XHTML 1.0, e HTML 4.01 para publicação na web, e HTML 5 está atualmente sendo desenvolvido.

Um exemplo simples de XHTML seria: ( Observando dentro das tags <html></html> )

<html> <head> </head> <body>

    <form>
     <fieldset>
     <legend>Dados pra Cadastro</legend>
     <label for="nome">Nome:</label>
     <input type="text" name="nome" id="nome" />
     <label for="tipo">Tipo:</label>
     <input type="text" name="tipo" id="tipo" />
          <label for="data">Data:</label>
     <input type="text" name="data" id="data" />
          <input type="submit" value="enviar" class="botao" />
     </fieldset>
   </form>

</body> </html>

o código CSS que formataria este xhtml seria:

<style> form fieldset {

  float: left;
  margin-right: 7px;
  width: 40%;
  border: solid black 1px;
  padding: 3%;
  margin-bottom: 10px;

}

form legend {

  padding: 6px;
  margin: 10px;
  border: solid black 1px;
  font-size: 90%;
  font-weight: bold;
  background-color: #e8e8e8;

}

form label {

  display: block;
  font-size: 11px;

}

form input {

  width: 100%;
  border: solid #ccc 1px;
  font-size: 11px;
  font-family: 'Trebuchet MS', Verdana, Tahoma, Serif;

}

form input.botao {

  display: block;
  width: auto;
  float: right;

}

form input.botao {

  display: block;
  width: auto;
  float: right;

} </style>

Atualmente há pelo menos três grandes grupos trabalhando no DHTML: o W3C, que é o responsável pelas versões oficiais da HTML, a Netscape, e a Microsoft.

Em relação a especificação oficial, a Netscape e a Microsoft incluíram vários recursos extras que ajudaram ainda mais o DHTML. Sendo assim, esses DHTMLs vão algo além da capacidade de alterar as propriedades das marcações tags HTML dinamicamente. O DHTML da Microsoft, por exemplo, permite que se adicionem efeitos como sombra e néon a imagens dentro de um documento HTML. Outro recurso conhecido como Fontes Dinâmicas (Dynamic Fonts), da Netscape, permite que fontes sejam transmitidas pelo servidor junto com o documento HTML, possibilitando, a qualquer browser que implemente esse recurso, mostrar os caracteres exatamente como planejou o autor do documento. Resumindo, DHTML é um conjunto de ingredientes que proporcionam um controle sem precedentes sobre a apresentação do conteúdo de páginas da Web, além de possibilitar a inclusão de componentes multimédia, como animações, diretamente no código HTML, sem a necessidade de plug-ins. Toda a curiosidade em torno do HTML Dinâmico se justifica então, já que o mesmo estabelece novos patamares de interação e movimento na internet a um baixo custo - medido em velocidade, abrangência e flexibilidade, por exemplo, melhor do que em moeda corrente.

HTML (acrônimo para a expressão inglesa HyperText Markup Language, que significa Linguagem de Marcação de Hipertexto) é uma linguagem de marcação utilizada para produzir páginas na Web. Documentos HTML podem ser interpretados por navegadores. A tecnologia é fruto do "casamento" dos padrões HyTime e SGML.

HyTime é um padrão para a representação estruturada de hipermédia e conteúdo baseado em tempo. Um documento é visto como um conjunto de eventos concorrentes dependentes de tempo (como áudio, vídeo, etc.), conectados por hiper-ligações. O padrão é independente de outros padrões de processamento de texto em geral.

SGML é um padrão de formatação de textos. Não foi desenvolvido para hipertexto, mas tornou-se conveniente para transformar documentos em hiper-objetos e para descrever as ligações.

Os documentos em HTML são como arquivos de texto comuns. Para facilitar a produção de documentos, existem editores HTML específicos:

• Editores de texto fonte: inserem automaticamente as etiquetas, orientando a inserção de atributos e marcações.
• Editores WYSIWYG: oferecem ambiente de edição com um "esboço" resultado final das marcações.

A estrutura de um documento HTML apresenta os seguintes componentes:

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 <html lang="pt">
 <head>
   <title>Título do Documento</title>
 </head>
 <body>
   texto,
   imagem,
   links,
   ...
 </body>
 </html>

As etiquetas HTML não são sensíveis à caixa (case sensitive), portanto tanto faz escrever <HTML>, <Html>, <html> ou <HtMl>.

As etiquetas básicas de HTML, cuja presença é altamente recomendada nas páginas são:

• <html>: define o início de um documento HTML e indica ao navegador que todo conteúdo posterior deve ser tratado como uma série de códigos HTML.
• <head>: define o cabeçalho de um documento HTML, que traz informações sobre o documento que está sendo aberto.
• <body>: define o conteúdo principal, o corpo do documento. Esta é a parte do documento HTML que é exibida no navegador. No corpo podem-se definir propriedades comuns a toda a página, como cor de fundo, margens, e outras formatações.

Dentro do cabeçalho podemos encontrar os seguintes comandos:

• <title>: define o título da página, que é exibido na barra de título dos navegadores.
• <style>: define formatação em CSS.
• <script>: define programação de certas funções em página com scripts, podendo adicionar funções de JavaScript.
• <link>: define ligações da página com outros arquivos como feeds, CSS, scripts, etc.
• <meta>: define propriedades da página, como codificação de caracteres, descrição da página, autor, etc. São meta informações sobre documento. Tais campos são muitos usados por mecanismos de busca(como o Google) para obterem mais informações sobre o documento, a fim de classificá-lo melhor. Por exemplo, pode-se adicionar o código <meta name="description" content="descrição da sua página" /> no documento HTML para indicar ao motor de busca que texto de descrição apresentar junto com a ligação para o documento.

Obs: as etiquetas <style> e <script> servem tanto para delimitar o espaço usados pelos códigos na pagina quanto para invocar códigos existentes em outros arquivos externos.

Dentro do corpo podemos encontrar outras várias etiquetas, como por exemplo:

• <h1>, <h2>,... <h6>: cabeçalhos e títulos no documento em diversos tamanhos. (quanto menor for o numero, maior sera o tamanho da letra)
• <p>: novo parágrafo.
• <br>: quebra de linha.
• <table>: cria uma tabela (linhas são criadas com <TR> e novas células com <TD>. Já os cabeçalhos de coluna são criados com a etiqueta <TH>.)
• <div>: determina uma divisão na página a qual pode possuir variadas formatações.
• <font>: altera a formatação (fonte, cor e tamanho) de um trecho do texto.
• <b>, <i>, <u> e <s>: negrito, itálico, sublinhado e riscado, respectivamente.
• <img>: imagem.
• <a>: hiper-ligação para um outro local, seja uma página, um e-mail ou outro serviço.
• <textarea>: caixa de texto (com mais de uma linha); estas caixas de texto são muito usadas em blogs, elas podem ser auto selecionáveis e conter outros códigos a serem distribuídos.
• <acronym>: acrônimo (sigla)
• <cite>: citação
• <address>: endereço

E no novo layout, solicitamos algumas particularidades, que durante o desenvolvimento deste me preocupavam bastante. Havíamos pedido uma coluna na lateral direita, que ficava sobreposta ao menu do site. O que me preocupava era como resolver isso com css.

Após uma série de testes, lendo a respeito da propriedade position, vi um valor que nunca havia usado: relative. Lendo a respeito, descobre que esse valor faz com que o elemento fique posicionado em relação ao seu conteiner. Ou seja, para um elemento a nível de bloco que tiver seu position como relative, os valores de top e left serão baseados no seu elemento pai.

Para resolver o meu problema, bastou definir a propriedade position do div como relative, e definir valores NEGATIVOS para top e left, e definir o float como right. Com isso, div flutuou lindamente sobre o menu, aparentemente funcionando correto inclusive no IE. O resultado pode ser conferido aqui.

PS: Antes que alguém pergunte o porquê dos hacks no CSS e das cores diferentes dos fundos, isso foi devido à alguns testes que estive realizando durante o dia.

[Update]: Hoje (15/8), pela manhã recebi os novos arquivos de layout, que acabaram com os problemas de cores e diferenças de tamanho.

Para alcançar seus objetivos, a W3C possui diversos comitês que estudam as tecnologias existentes para a apresentação de conteúdo na Internet e criam padrões de recomendação para utilizar essas tecnologias. Com a padronização, os programas conseguem acessar facilmente os códigos e entender onde deve ser aplicado cada conhecimento expresso no documento.

Padrões seus como HTML, XHTML e CSS são muito populares, contudo, em muitos casos são usados de forma errônea devido ao desconhecimento da especificação.

É um dever de todo desenvolvedor Web respeitar e seguir os padrões de acessibilidade do W3C, pois de outro modo poderá impor barreiras tecnológicas a diversas pessoas, desestimulando e até mesmo impedindo o acesso a suas páginas.

Padrões W3C

Para saber mais sobre o projeto acesse http://www.w3c.org.

El proyecto Eses, desde un punto de vista puramente práctico, consiste en convencer a dos entidades que unan sus esfuerzos y competencias para formar una tercera (sin por ello renunciar a un milímetro de la suya propia). Para ejemplarizarlo mejor: consiste en convencer a los 2 directores de estas entendidas de que tengan un hijo juntos. En este cuadro, la gente con la que hablé en Madrid y Santiago + yo pintamos de celestinas y futuros padrinos del niño, el cual se encargarán de hacer crecer y educar sus 2 padres :-D

Si le parece bien, Encarna Quesada hará el papel de madre ;-) Seguramente necesite la autorización de sus propios padres pero, más que un problema, eso será - espero - una oportunidad de hacerles llegar la propuesta de que el Proyecto Eses se extienda a otros países.

Acabo de mandar un mail a Encarna esta mañana pidiéndole cita:

Hola Encarna,

He desarrollado un proyecto de sello de calidad a llevar a cabo por el W3C en colaboración con otra entidad pública nacional y me gustaría (mejor dicho: me muero de ganas por :-)) reunirme contigo en Gijón para presentároslo.

Discúlpame por no contarte más aquí pero siempre resulta complejo escribir lo suficiente como para despertar el interés sin que tampoco salga un ladrillo ahuyentador. De todas formas, una conversación de una hora será suficiente para transmitiros la idea con pelos y señales.

Dejo en tus manos la elección del día y de la hora aunque, sabedor de que Asturias bien vale como mínimo un fin de semana ;-), reconozco tener preferencia para que sea un viernes o un lunes.

Un saludo,
1ppy

Y ahora toca esperar respuesta.

Nos leemos :-)

PD: A ver si encuentro tiempo para validar el blog antes de que entre aquí ;-)

Para los navegadores, Opera pasa del 1,7 al 1,9%, Safari pierde una décima quedándose en el 2,5%, Internet Explorer 5 pierde dos décimas quedándose en el 0,3%, Explorer 6 pierde más de un punto quedándose en el 25,3% y Explorer 7 pierde seis décimas quedándose en el 26,4%. Todas estas décimas las recoge Firefox, que gana más de un punto y medio, pasando a tener un porcentaje del 42,6%.

Si bien las estadísticas del consorcio W3C no son reales, ya que sus páginas son accedidas por gran cantidad de personas profesionales del sector informático, nos dan una idea de la tendencia del mercado, ya que a menudo la opinión de los expertos se refleja posteriormente en los usuarios que piden consejo profesional. El porcentaje real que se calcula para Firefox en el mundo va en torno al 25% aunque es cierto que en algunos países sobrepasa el 50%.

Por eso podemos predecir el éxito de la aparición de Firefox 3 y su escalada imparable en el número de usuarios. Con respecto a Linux podemos decir que sigue creciendo, aunque más tímidamente de lo que nos gustaría, por lo que todavía debemos quedar a la espera del salto definitivo de Linux en el escritorio.

one thing that was a challenge was flash embedded script. if you using the default flash script from dreamweaver, HTML tidy will warn you that it's not valid. i forgot why it was not valid (i'll try to look into it later and update in this post).

any way, then i start to looked the solution. several method come across but none of them works. then i found this blog (i forgot the address too, update later) giving detail explanation on why the default flash script is not valid, and that article give the valid script and it goes like this:

<object classid="(long number here)"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"
width="(width)" height="(height)">
<param name="movie" value"(your flash file here)">
<param name="quality" value="high">

<param name="bgcolor" value="#FFFFFF">
<!--[if !IE]> <-->
<object data="(your flash file here)"
width="(width)" height="(height)" type="application/x-shockwave-flash">
<param name="quality" value="high">
<param name="bgcolor" value="#FFFFFF">
<param name="pluginurl" value"http://www.macromedia/go/getflashplayer">
FAIL (the browser should render some flash content, not this).
</object>
<!--> <![endif]-->
</object>

now it should work when you try to validate it on W3C, go on give it a spin :)

- W3C: Content Transformation Guidelines y una discusión que me supera.

- X-Device-User-Agent header appearing in request. Google Wireless Transcoder, incluye el user agent.

<tr>
<td align=left valign=middle>
<font face=verdana size=2>
conteúdo a exibir
</font>
</td>
<td align=center valign=middle>
<font face=verdana size=2>
conteúdo a exibir
</font>
</td>
<td align=right valign=middle>
<font face=verdana size=2>
conteúdo a exibir
</font>
</td>
</tr>

<tr>
<td align=left valign=bottom>
<font face=verdana size=2>
conteúdo a exibir
</font>
</td>
<td align=center valign=bottom>
<font face=verdana size=2>
conteúdo a exibir
</font>
</td>
<td align=right valign=bottom>
<font face=verdana size=2>
conteúdo a exibir
</font>
</td>
</tr>

</table> Algo muito útil é o uso do "colspan" e "rowspan", a seguir um exemplo de uma tabela com duas colunas na primeira linha e apenas uma coluna na segunda, mas com o atributo "colspan=2" essa coluna ocupará o equivalente a 2 colunas: <table border=1><tr>
<td>
<font face=verdana size=2>
conteúdo a exibir
</font>
</td>
<td>
<font face=verdana size=2>
conteúdo a exibir
</font>
</td>
</tr>

<tr>
<td align=center colspan=2>
<font face=verdana size=2>
conteúdo a exibir
</font>
</td>
</tr>

</table> Tabela com duas colunas na primeira linha e apenas uma coluna na segunda, mas o atributo "rowspan=2" na primeira coluna da primeira linha indica que essa coluna ocupará 2 linhas: <table border=1><tr>
<td rowspan=2>
<font face=verdana size=2>
rowspan=2
</font>
</td>
<td>
<font face=verdana size=2>
conteúdo a exibir
</font>
</td>
</tr>

<tr>
<td align=center>
<font face=verdana size=2>
conteúdo a exibir
</font>
</td>
</tr>

</table> Outros attributos simples podem configurar uma tabela: <table border=1 bordercolor=ff0000><tr>
<td align=center>
<font face=verdana size=2>
conteúdo a exibir
</font>
</td>
</tr>

</table> "bordercolor" limita-se aos atributos das tags <table> e <tr>: <table border=1 bordercolor=ff0000><tr bordercolor=ffffff>
<td align=center>
<font face=verdana size=2>
conteúdo a exibir
</font>
</td>
</tr>

</table> Use "cellpadding" e "cellspacing" para definir a diferença de espaço entre cédulas (<tr></tr>) e células (<td></td>), respectivamente: <table border=1 bordercolor=ff0000 cellspacing=0 cellpadding=0><tr bordercolor=ffffff>
<td align=center>
<font face=verdana size=2>
conteúdo a exibir
</font>
</td>
</tr>

</table> "bgcolor" pode ser usado em todas as tags de uma tabela: <table bgcolor=000000 border=1 bordercolor=ff0000 cellspacing=0 cellpadding=0>
<tr bordercolor=ffffff>
<td align=center>
<font face=verdana size=2 color=ffffff>
conteúdo a exibir
</font>
</td>
</tr>
</table> <table border=1 bordercolor=ff0000 cellspacing=0 cellpadding=0>
<tr bordercolor=ffffff bgcolor=000000>
<td align=center>
<font face=verdana size=2 color=ffffff>
conteúdo a exibir
</font>
</td>
</tr>
</table> <table border=1 bordercolor=ff0000 cellspacing=0 cellpadding=0>
<tr bordercolor=ffffff>
<td align=center bgcolor=000000>
<font face=verdana size=2 color=ffffff>
conteúdo a exibir
</font>
</td>
</tr>
</table> <table border=1 width=500 height=300>
<tr>
<td align=left valign=top bgcolor=ffff00>
<font face=verdana size=2 color=000000>
conteúdo a exibir
</font>
</td>
<td align=center valign=top>
<font face=verdana size=2 color=000000>
conteúdo a exibir
</font>
</td>
<td align=right valign=top bgcolor=ff0000>
<font face=verdana size=2 color=000000>
conteúdo a exibir
</font>
</td>
</tr><tr>
<td align=left valign=middle bgcolor=ebc79e>
<font face=verdana size=2 color=000000>
conteúdo a exibir
</font>
</td>
<td align=center valign=middle bgcolor=000000>
<font face=verdana size=2 color=ffffff>
conteúdo a exibir
</font>
</td>
<td align=right valign=middle bgcolor=0000ff>
<font face=verdana size=2 color=ffffff>
conteúdo a exibir
</font>
</td>
</tr>

<tr>
<td align=left valign=bottom bgcolor=ff9900>
<font face=verdana size=2 color=000000>
conteúdo a exibir
</font>
</td>
<td align=center valign=bottom bgcolor=cc66cc>
<font face=verdana size=2 color=000000>
conteúdo a exibir
</font>
</td>
<td align=right valign=bottom bgcolor=00cc00>
<font face=verdana size=2 color=000000>
conteúdo a exibir
</font>
</td>
</tr>

</table> "background" também pode ser usado em todas as tags de uma tabela: <table width=130 height=60 background=imagens/briga.gif border=1 bordercolor=ff0000 cellspacing=0 cellpadding=0>
<tr bordercolor=ffffff>
<td align=center>
<font face=verdana size=2 color=ffffff>
conteúdo a exibir
</font>
</td>
</tr>
</table> Por padrão a figura de fundo se mutiplica quando a tabela é maior que suas dimensões: <table width=260 height=120 background=imagens/briga.gif border=1 bordercolor=ff0000 cellspacing=0 cellpadding=0>
<tr bordercolor=ffffff>
<td align=center>
<font face=verdana size=2 color=ffffff>
conteúdo a exibir
</font>
</td>
</tr>
</table> Usando um simples Estilo CSS vc pode configurar as propriedades do background: <table width=260 height=120 style="background-repeat:no-repeat;" background=imagens/briga.gif border=1 bordercolor=ff0000 cellspacing=0 cellpadding=0>
<tr bordercolor=ffffff>
<td align=center>
<font face=verdana size=2 color=ffffff>
conteúdo a exibir
</font>
</td>
</tr>
</table> Usando backgrounds diferentes numa mesma tabela: <table width=130 height=100 border=1 style="background-repeat:no-repeat;">
<tr>
<td background=imagens/briga.gif>
<font face=verdana size=2>
conteúdo a exibir
</font>
</td>
<td>
<font face=verdana size=2>
conteúdo a exibir
</font>
</td>
<td background=imagens/guitarrista.gif>
<font face=verdana size=2>
conteúdo a exibir
</font>
</td>
</tr>
</table> <table width=400 height=120 border=1 background=imagens/hempa.gif>
<tr>
<td width=130 bgcolor=000000 background=imagens/briga.gif style="background-repeat:no-repeat;">
&nbsp;
</td>
<td>
<font face=verdana size=2>
conteúdo a exibir
</font>
</td>
<td width=130 background=imagens/guitarrista2.gif style="background-repeat:no-repeat;">
&nbsp;
</td>
</tr>
</table> Em algumas situações talvez você precise usar o atributo nowrap ou wrap, por padrão as tabelas são configuradas como "wrap".
NOWRAP indica ao browser que um texto dentro de uma tabela não deve ser automaticamente quebrado quando exceder o tamanho indicado em "width", a não ser que exista um <br>. <table width=100 height=120 border=1>
<tr>
<td>
texto dentro de uma tabela normal com valor padrão WRAP
</td>
</tr>
</table> <table width=100 height=120 border=1>
<tr>
<td nowrap>
texto dentro de uma tabela normal com valor padrão WRAP
</td>
</tr>
</table> esse atributo pertence apenas à tag <td> Para inciantes isso parece um bicho de sete cabeças.. seria mais simples e prático usar o Dreamweaver para criar tabelas complexas apenas clicando "aqui e ali" mas o bicho vai pegar quando você precisar criar uma tabela e não tiver nenhum editor HTML do tipo Front Page ou Dreamweaver, pior ainda quando você precisar desenvolver um sistema em HTML gerado por scripts de linguagens dinâmicas (ASP, PHP, JSP, PERL..).
Quando você dominar e desenvolver técnicas de formatação de tabelas, pode-se considerar um programador HTML de nível intermediário

FONTE: http://paraiso.etfto.gov.br/biblioteca/material/info/des_web/tutorial/html_tutorial/arquivos/04.html ]]> http://pacoprieto.wordpress.com/?p=319 Fri, 08 Aug 2008 14:38:45 +0000 pacoprieto http://pacoprieto.wordpress.com/?p=319

Martín Alvarez, de la Oficina Española de W3C, me avisa sobre la IV Edición de Fundamentos WEB 2008 . Esta es una cita, que tienes que grabar en tu agenda, y no perderte lo que se va a ver y escuchar en Gijón los días 27 y 28 de octubre de 2008. Respondiendo a las sugerencias de la comunidad, este año habrá ciertas novedades. Aunque se mantenga una temática base, que se centra en torno al diseño y desarrollo con estándares Web, este año se tendrán en cuenta los Negocios en torno a la Web. 

Una de las principales novedades es el formato del programa: se condensa en dos jornadas y se dividen en varias sesiones con temáticas específicas. En el primer día se celebran conferencias y mesas redondas, con sesiones en paralelo. Al día siguiente, hay dos talleres prácticos para que cada asistente pueda sacar provecho más a fondo del tema que más le interese.
Este año, pasarán por "el Fundamentos" expertos internacionales en diseño y desarrollo Web con estándares de la talla de Jesse James Garrett o Peter-Paul Koch (PPK), además de los mayores especialistas en CMSs y personas con una trayectoria satisfactoria en el mundo de los negocios gracias a la utilización de las Tecnologías de la Información y de la Comunicación. Otra novedad es la incorporación de grandes talentos dentro del panorama nacional. Sigue de cerca la información en http://www.fundamentosweb.org/2008

Gracias Martín, y muchos éxitos en esta IV Edición, para todo el equipo de la Oficina Española de W3C !!!

Looking at Wikipedia, I see that it defines consensus as "general agreement". This is pretty vague obviously, and if it were left to that there wouldn't be much more to talk about. But Wikipedia quite rightly points out that consensus is also used to refer to the process used to reach this agreement. I think that's where the problem lies.

From what I can tell, some people are happy to just use consensus as if it were synonymous with agreement. On that basis, any decision, no matter how it is made, can pretty much be said to be the consensus.

For instance, in the case of the BRM for OOXML, it has been stated by several, and ISO/IEC officials in particular, that the decisions were made by "consensus". Was it so, though? I certainly don't think so.

I'll admit that my expectations are heavily rooted in my background with the W3C which inherited from IETF the goal of making all its decisions by consensus. As I explained in my previous entry A Standards Quality Case Study: W3C, the W3C leaves it to the chair to decide whether consensus is reached or not.

Interestingly enough, this is not any different from ISO/IEC's directives which read in Part 1:

It is the responsibility of the chairman [...] to judge whether there is sufficient support bearing in mind the definition of consensus given in ISO/IEC Guide 2:1996.

"consensus: General agreement, characterized by the absence of sustained opposition to
substantial issues by any important part of the concerned interests and by a process that
involves seeking to take into account the views of all parties concerned and to reconcile
any conflicting arguments.
NOTE Consensus need not imply unanimity."

The way the "absence of sustained opposition" is typically assessed at W3C is by simply asking whether everybody can live with the proposed decision. As I indicated before asking this question can sometimes lead to a completely different decision. I've witnessed it myself. So, this is not just some sort of polite gesture, it is at the very heart of consensus building.

I wish that rule were more broadly adopted. For instance, to my knowledge this was never asked in any way at the BRM for OOXML.

Instead, the BRM proceeded by making its decisions by simple majority vote, leaving no room "to reconcile any conflicting arguments". In fact, as it's well known, the vast majority of the issues were "addressed" in bulk via a simple majority vote. So much for ISO/IEC directives. It seems to me that the chair failed to "bear in mind the definition of consensus" or was instructed to forgo that golden rule for the sake of expediency.

As if that was not enough ISO/IEC officials went on to then recommend to its respective boards of directors (SMB & TMB) to dismiss the appeals filed by Brazil, India, South Africa, and Venezuela. Now, I don't know what an appeal is if it's not a clear expression of "sustained opposition".

You would think that given ISO/IEC's own directives, its officials would have recommended to create a conciliation panel "to take into account the views of all parties concerned and to reconcile any conflicting arguments." Looks to me like ISO/IEC officials, who have for mission to ensure the directives are followed mind you, have completely lost sight of this fundamental principal. Either that or they should revise their directives to acknowledge that decisions are not actually made by consensus.

As Wikipedia puts it: "Consensus decision-making is a group decision making process that not only seeks the agreement of most participants, but also to resolve or mitigate the objections of the minority to achieve the most agreeable decision."

We'd all be better off if everybody were "to bear that in mind".

Web Design

After the choice of the Template you have to work on the website design, demand that the Web Designer provides accessible design, this is very important because it will prevent, later in the project, some headaches in development and validation. There are a number of .NET Controls that are simply not accessible, and therefore they should be avoided , you can check a list of the ASP.NET controls and the Accessibility: http://msdn.microsoft.com/en-us/library/ms227996(VS.80).aspx.

Components to use or development

User Controls

The User Controls will be the most fast and controllable way to provide your client with what he wants, well it seems pretty stupid not to use the webparts of MOSS, but the problem with them is the way the HTML will be rendered, therefore if you cannot control it don't use it.

To use User Controls in a MOSS site, you will have to be declare in the Web.Config as well as in the Masterpage.

Publishing Placeholders

These are an inheritance from the "old" CMS, fortunately the publishing placeholders are accessible and therefore can be used.

InLine Code the Holy Grail

Well we do know that the way MOSS renders the webparts and the web pages breaks accessibility, therefore if we had something that help us to override this render it would be perfect, because therefore we could mend the problems . . . guess what? it exists! we can use Inline code in MOSS and by doing so why not use it to control the way the HTML is rendered.

Some references of inline code:

• Microsoft MSDN
• WSSDemo Inline Code
• Nick Swan's Blog - Writing c# inline code in default.master

To use Inline code you have to fist include in your web.config. in the PageParserPaths tag:

<PageParserPaths>
<PageParserPath VirtualPath="/*" CompilationMode="Always" AllowServerSideScript="true" IncludeSubFolders="true" />
</PageParserPaths>

In your ASPX page or Master page you then can use C# code in a script tag (<SCRIPT>) or Server side (<% %>). For example we want to replace a specific html tag that is not accessible and we cannot control:

<script type="text/c#" runat="server">
protected override void Render(HtmlTextWriter writer)
{
// Getting all the html
System.IO.StringWriter str = new System.IO.StringWriter();
HtmlTextWriter htw = new HtmlTextWriter(str);
// rendering the html
base.Render(htw); //Getting the current page html
wrt.Close();
string html = str.ToString();
html = html.Replace("SCRIPT", "script"); //XHTML compliance will not accept upper-case
// write the 'clean' html to the page
writer.Write(html); //Writes the correct HTML
}
</script>

By using this method you can "clean" any problem that is presented by the rendering of HTML that you simply cannot control by any other means.

This article is intended to help you start on developing your accessible sites using MOSS, there seems to be a concern by Microsoft to include in the next versions more accessible solutions, to prevent all these "solutions" we have to build.

Part 1 - Building accessible Sharepoint sites - Part 1

Sempre usei esse dito - "são nas pequenas coisas que notamos as grandes diferenças". Em nosso dia-a-dia sempre esbarramos em pequenos gestos que ao final tornam-se grandiosos diante da situação em que aconteceram. Seja no relacionamento de um casal, seja na escola, trabalho e até mesmo na área da tecnologia.

Recentemente foi noticiado que o TV Terra, o mesmo que mencionei aqui neste post, está suportando o sistema Linux. Vi dezenas de posts na blogosfera sobre o descaso do pessoal do Terra em relação ao Linux. Enfim, parece que notaram que a concorrência estava a mil anos luz deles e agora resolveram suportar o sistema.

Porém nem tudo são flores. Já tentou ouvir alguma rádio online? Nos testes que fiz aqui com algumas grandes emissoras não tive sucesso. Comecei pela Itatiaia, rádio de notícias aqui de Minas. Não deu. O plugin do Mplayer até que tentou, porém só ficou na tentativa. Não conectou. Fui testar então o Sistema Globo de Rádio. Nada também. O plugin carrega mas não conecta. Experimentei outras rádios no portal Radios ao vivo, que reúne centenas de emissoras espalhadas pelo Brasil e pelo mundo. Não sei se é praga, mas não consegui conectar em nenhuma das escolhidas. Na Transamerica por exemplo, abriu um player em flash no estilo iPod, porém foi só isso, conexão que é bom mesmo, nada!

Confesso que não fiquei frustrado. Não ouço rádio, pelo menos durante o dia. Já durante a noite o aparelhinho fica ali, do lado da cama, sintonizado em minha rádio predileta equanto durmo. Costume adquirido com meu pai desde criança.

Uma coisa que me chamou a atenção foi quando acessei o Pidgin hoje pela manhã e foi o que me motivou a escrever este post. Minha mãe é uma católica fervorosa. Todas as manhãs  ela liga o rádio e ouve o Padre Reginaldo Manzotti, programa este retransmitido por uma rádio comunitária da cidade. Tenho um contato da rádio adicionado no MSN e ao acessar notei que no lugar do nome da emissora, estava o endereço do site. Não exitei e acessei o endereço por curiosidade. Observei que a programação poderia ser ouvida via intenet. Uma preocupação dos desenvovledores é que disponibilizaram três tipos de streaming, sendo o Winamp, Windows Média e usando a tecnologia flash. Das três, duas funcionaram, Winamp e o Flash. Já esperava problemas com o plugin do Windows Média porque ele é maioria nas rádios citadas acima.

Nessa rápida experiência concluí que, do que adianta ser uma emissora de grande porte se nem  todos os usuários de computador podem acessá-la? É por isso que reforço minha frase de que "são através de pequenos gestos, é que vemos as grandes diferenças"! Uma simples rádio comunitária, no interior de Minas Gerais se preocupou em contemplar não só os usuários de um sistema, mas sim  a coletividade com sua programação, seja ele usuário do Windows, Linux, MacOS, dentre outros. Que sirva de exemplo para as grandes. Parabéns a emissora pela visão mercadológica, se posso assim dizer, e aos desenvolvedores do site pois além de terem feito um trabalho de primeira qualidade, ainda se preocuparam em criar o portal dentro das normas da W3C. E você, conhece alguma rádio compatível com Linux? Adicione a mesma nos comentários. Em breve criarei uma página de rádios online que podem ser ouvidas no pinguim.

Página da rádio: Ativa FM de Bom Despacho