O Evento ocorreu no auditório da UniLasalle de manaus e contou com auditório cheio, eu inclusive que cheguei 15 minutos atrasado tive que sentar no chão .

Bom, o evento foi composto por 2 palestras:

• Palestra 1:
  • WEB 2.0 Oportunidades, e novas tendências. Álvaro Mota Gonçalves, INdT
  • Open-WEB. Harald Kirschner, WEB 2.0 developer and co-developer Mootools project

• Palestra 2
  • WEB 2.0 v Overview de Tecnologias WEB 2.0. Harald Kirschner, front-end web developer specialist, core developer of MooTools project

O Álvaro Mota Gonçalves começou falando da estratégia da Nokia que mudou, e agora tem um foco mais aberto para o provimento de serviços web e levar a mesma experiência encontrada no uso de serviços web no pc com browser só que através do celular de forma móvel(mobile), o que é uma tendência hoje em dia de fato. Uma tecnologia que corresponde a este incentivo da Nokia para com a melhor experiencia de serviços web no celular é o WebRunTime(WRT). No quesito provimento de serviços a gente pode ver a investida da Nokia com o lançamento do Ovi.

Foi dito também que o mercado de trabalho estão a procura por profissionais de desenvolvimento web2.0, não lembro qual foi o site que o Álvaro mostrou onde ele fez uma pesquisa e retornou mais de 2000 empregos em aberto para se trabalhar com web2.0, ou seja, oportunidade.

A palestra mais esperada(pelo menos por mim), era a do Harald a qual pode ser encontrada aqui , achei que ele iria se aprofundar mais na explicação de web2.0 falando sobre microformats, WRT e outros conceitos e tecnologias que ainda não parei para estudar, mais o foco da palestra dele era falar de web2.0 para pessoas que não sabiam ou sabiam pouco o que é web2.0.

O Harald falou um pouco desse “compra-compra” que vemos hoje em dia de grandes empresas comprando as menores que oferecem algum serviço interessante, e ele até comentou “Quer ficar milhionário ? É só fazer um serviço inovador e publicar na web..” e logo depois complementou “só não é tão fácil fazer um..” . Um fato que me chamou atenção foi a compra do GrandCentral pelo google, o qual eu nem fazia idéia que existia, trata-se de um serviço de gerenciamento de ligações, tem muitas funcionalidades interessantes, vale a pena dá uma olhada, é uma pena que o serviço ainda não está disponí­vel para o Brasil, mas vocé pode solicitar uma notificação quando o serviço estiver disponí­vel.

Além disso ele mostrou uma tabela de serviços comparativos, de 1.0 para 2.0

Como por exemplo:

E outros como pode ser visto na apresentação dele.

Falou que os princípios da Web2.0 são:

Open Source – Liberação das informações
Communication – Usuários
Design – Nova arquitetura de interfaces com o usuário

Pra mim ficou meio misturado a afirmação de que o relacionamento do OpenSource com a web2.0 seja a liberação de informações no sentido de Content Syndication, Web Feed(RDF, Atom e etc), WebServices e APIs na minha opnião isso tem haver com OpenData e não com OpenSource, de fato há muita semelhança no modelo colaborativo de projetos OpenSource de código aberto para com serviços OpenData de compartilhamento de informações e não dúvido que a web2.0 com a semântica de OpenData tenha se baseado no modelo colaborativo do OpenSource. Eu acredito que um termo melhor seria OpenData.

Mostrou 1 exemplo de como ganhar dinheiro com a web2.0, usando o Amazon Web Service, o qual a cada livro vendido que você indicou em seu site/blog você ganha dinheiro.(O qual estarei botando em breve no meu blog ).

Dando continuidade no quesito oportunidades, segundo Harald o que você precisa saber para arrumar um bom emprego no mercado de web2.0:

• Content Syndication
• Web feeds
• RDF
• Atom
• Web services and APIs
• Communication with XML or JSON
• REST
• SOAP(WSDL)

Algumas passagens me chamaram atenção como a do Tim O’Reilly sobre web2.0, resumindo significa que a inteligência coletiva é a base da web2.0, concordo em gênero e grau, você não ?

Houve também slides sobre Folksonomia[1], Comunicação, melhoramento de Design de interfaces com os novos conceitos RIA(Rich Internet Application) e RUE(Rich User Experience). Essa questão de trazer a experiência de uso de softwares desktop para web entre outras coisas.

Não deixou de falar dos padrões e a acessibilidade o que geralmente é ignorada em detrimento a funcionalidades “eye-candy” o que julgo muito importante e que nunca deve ser esquecida, ou seja, sua palestra também incluiu Web standards, W3C, leitores de tela, SEO e o funcionamento de softwares web, como estrutura(xhtml), apresentação(css) e etc.

Casos de uso do uso de JavaScript .

• Melhorias na interação com os forms;
• Melhorias na colaboração entre os usuários;
• Filtros e manipulação de dados
• Autocomplete (Como o google suggests)

Entrando mais na parte técnica, falou sobre o desenvolvimento, que com essa onda de informações e novos conceitos, por onde se basear , citou padrões utilizados e criados pelo yahoo, o YPatterns e das alternativas como o Ajax Pattern.

Não deixou de falar também para as pessoas com perfil empreendedor, falou sobre modelo de negócios:

• Vender API
• Vender serviços
• Vender informações

Estratégias de expansão para quem já possui serviços:

• Criar API
• Distribuir como OpenSource (Citou também meios de o fazer, através do google code)

Vendeu um pouco de jabá falando sobre o MooTools e falou um pouco sobre o porque de frameworks.

Nessa hora tomei a liberdade de lhe fazer uma pergunta tendo em vista que o que ele mostrou de exemplo nada foram diferente dos exemplos encontrados utilizando JQuery , YUI e Ext-js os quais são os que eu uso nos meus projetos.

P: Perguntei quais eram as principais diferenças entre MooTools e Jquery/YUI ?
R: Ele disse que Mootools é melhor para projetos grandes. Disse também JQuery tem mais classes prontas e que o YUI tem uma estrutura menor do que a MooTools. Na opnião dele YUI é para projetos que precisem de namespaces.

O Evento foi de importância para região, quase não se ver eventos desse tipo por aqui em Manaus. Com certeza desenvolvedores web(como eu) sentem falta.

À coordenação, meus parabéns.

[1] Recomendo a leitura deste post sobre Folksonomia pelo Revolução Etc

Acredito que há muitas opniões sobre esta nova abordagem de web2.0, desenvolvedores nacionais renomados ja se expressaram sobre esta questão, a web2.0 é boa para diversas situações, mas não tudo. Um exemplo é o Yahoo Mail Beta, é legal e bonito mas é lento demais, sem falar que no firefox qualquer ação o processamento vai para 100% e isso é caos!. É tudo uma questão de bom senso, usar web2.0 para dá um turbinada na aplicação com validações e chamadas assíncronas, melhorar a usabilidade ou ainda aplicar um comportamento para um determinado componente na tela é uma boa opção. Mas usar web2.0 para emular sistemas que rodam no desktop é complicado, por que são muitos eventos, muitos widgets, muitas regras de css(posicionamento, imagens e etc) e acaba que a aplicação fica extremamente lenta e de difícil manutenção, com certeza não é o que queremos.

Para quem não conhece, a YUI é uma biblioteca de componentes reutilizaveis feitos em javascript, dhtml e css para facilitar a construção de RIA (Rich Internet Applications) , a YUI é produzida primariamente pelos yahoo hackers e também pela comunidade. É utilizada extensivamente no portal do Yahoo.com[.br] para os softwares web do Yahoo!, com isso podemos entender que é um projeto amplamente suportado. A YUI! é software livre, cuja a licença é uma variação da licença BSD e pode ser encontrada aqui.

Como eu ainda não postei nada sobre a YUI, neste artigo estarei descrevendo sua utilização básica com um exemplo utilizando o widget DataTable, para o exemplo ficar ainda mais interessante irei também descrever como customizar a ordenação crescente e decrescente. As informações de exemplo que vamos utilizar são informações referentes a veículos, vamos customizar a ordenação por Placa, a YUI já possui funções de ordenação padrões e que trabalham com alguns tipos definidos.

No inicío de cada bloco de código estarei usando a sigla [COD_[1-9]{2}] para identificar o bloco de código quando o estiver referenciando em outros trechos do artigo, para facilitar a localização.

Pré-requisitos:

1. Conhecimentos básicos em JavaScript.
2. Você precisa baixar a YUI e carregar os componentes na sua página html ou carregá-las apartir do próprio site do yahoo, para saber mais sobre este serviço entre no site.. No desenrolar deste artigo usarei o serviço de hosting da YUI provido pelo Yahoo.

Primeiramente é preciso incluir os scripts e os estilos no header do html:

• Estilos: [COD_01]
  

• Mais estilo(Sobrecarrega algumas regras css, para fins de personalização): [COD_02]
  

• YUI Scripts: [COD_03]
  
  
  
  
  
  
  
  
• JavaScript para criação do DataTable:[COD_04]
  
  function init()
  {
  /**
  * Configura namespace para não haver conflitos referentes a nomes
  * e para facilitar a organização de objetos e etc.
  */

  YAHOO.namespace(“exemplo”);

  /**
  * Dados que serão usados no DataTable
  */
  YAHOO.exemplo.dados = {
  veiculos: [
  {placa:"JTX-0506", vistoria:new Date(2004, 2, 21), km:110000},
  {placa:"JYZ-0469", vistoria:new Date(2001, 8, 10), km:65000},
  {placa:"JTA-4591", vistoria:new Date(2000, 9, 5), km:45036},
  {placa:"XYZ-4587", vistoria:new Date(2000, 5, 8), km:456978}
  ]
  };

  /**
  * Informações do cabeçalho para o widget.ColumnSet possa retornar
  * um objeto adapter(adaptador) para a renderização do DataTable.
  */
  var Cabecalhos = [
  {key:"placa", title:"Placa", sortable:true},
  {key:"vistoria", type:"date", sortable:true, resizeable:true},
  {key:"km", type:"number", sortable:true, resizeable:true}
  ];

  /**
  * Objeto “configurador” do cabecalho
  */
  var ConfiguraColunas = new YAHOO.widget.ColumnSet(Cabecalhos);

  /**
  * Objeto DataSource é responsável por pegar, tratar e adaptar
  * as informações para que o objeto DataTable possa renderizá-las
  */
  var CapturaInformacoes = new YAHOO.util.DataSource(YAHOO.exemplo.dados.veiculos);
  CapturaInformacoes.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
  CapturaInformacoes.responseSchema = {
  fields: ["placa","vistoria","km"]
  };

  /**
  * Enfim cria o table
  * O primeiro parametros é onde(div) será renderizado o seu DataTable
  */
  var DataTable = new YAHOO.widget.DataTable(“exemplo”,
  ConfiguraColunas, CapturaInformacoes, {caption:”Exemplo básico de DataTable”});
  }

  /**
  * Quando a arvore DOM estiver carregada executa a função!
  * o YAHOO.util.Event é um utilitário do YUI para trabalhar com eventos
  */
  YAHOO.util.Event.onDOMReady(init);
  

• Você pode fechar o header do html e então no corpo(body) colocar aonde o DataTable será renderizado, no caso: (Sem isso o DataTable não irá ser renderizado)
  

Resultado:

Como podemos constatar no resultado acima as duas ordenações que realmente funcionam são as colunas por data e por quilometragem, pois o YUI reconhece os tipos informados nas linhas 28 e 29 do JavaScript , os tipos reconhecidos pela YUI são “string”, “number”, “date”, “currency”, “email” e “link”. Você pode clickar no cabeçalho da coluna “Placa” e você verá que a lógica de ordenação aplicada é a do tipo string, ou seja, pelas letras iniciais, mas precisamos que essa coluna seja ordenada pelo numero final da placa, pois sabemos que o pagamento do ipva de um veículo vence no mês do último número da placa, por exemplo final de placa 1 vence em Janeiro, 2 em Fevereiro e assim sucessivamente e as placas com final 0 vence em outubro.

Precisamos customizar a ordenação, vamos criar primeiramente as funções para ordenação crescente e decrescente, a YUI possui duas funções utilitárias para ajudar-nos nesta tarefa, são a YAHOO.util.Sort.compareAsc e a YAHOO.util.Sort.compareDesc
, a primeira para comparação crescente e a segunda para comparação decrescente, vejamos sua utilização já aplicando ao problema que nós temos de ordenar os dados pelo final da placa, a seguir: [COD_05]

/**
* Ordenação Crescente
*
*/
var ordByPlacaAsc = function(a,b){
// Pega o final da primeira placa
var finalPlaca1 = a.placa.charAt(a.placa.length – 1);
// Pega o final da segunda placa
var finalPlaca2 = b.placa.charAt(b.placa.length – 1);

var compFnc = YAHOO.util.Sort.compareAsc
// transforma em inteiro multiplicando por 1 e joga para
// a função utilitária de comparação
var resultado = compFnc(finalPlaca1*1,finalPlaca2*1);
return resultado;
}

/**
* Ordenação Decrescente
*
*/
var ordByPlacaDesc = function(a,b){
// Pega o final da primeira placa
var finalPlaca1 = a.placa.charAt(a.placa.length – 1);
// Pega o final da segunda placa
var finalPlaca2 = b.placa.charAt(b.placa.length – 1);

var compFnc = YAHOO.util.Sort.compareDesc

// transforma em inteiro multiplicando por 1 e joga para
// a função utilitária de comparação
var resultado = compFnc(finalPlaca1*1,finalPlaca2*1);
return resultado;
}

Como podemos ver, basicamente temos o mesmo procedimento só que com funções utilitárias diferentes, você pode fazer a comparação nas linhas 11 e 28, as funções utilitárias fazem a comparação e para a YAHOO.util.sort.compareAsc retornam -1 se o primeiro argumento for < (menor que) o segundo argumento, 0 se o primeiro argumento é igual( == ) ao segundo argumento e 1 se o primeiro argumento é >(maior que) o segundo argumento e o inverso para a YAHOO.util.sort.compareDesc, ou seja, -1 se o primeiro argumento for > (maior que) o segundo argumento, 0 se o primeiro argumento é igual( == ) ao segundo argumento e 1 se o primeiro argumento é < (menor que) o segundo argumento e assim a YUI vai ordenando os dados no DataTable, mas você está sentindo falta de algo ?! sim!, aonde parametrizamos para que o YUI utilize estas funções customizadas de ordenação ?!

R: No bloco de código [COD_04] na linha 27 é possível passar um argumento chamado sortOptions contendo as informações referentes a customização da ordenação, veja um exemplo de como fica a linha 27 inserindo as funções de ordenação:

{key:”placa”, title:”Placa”, sortable:true, sortOptions:{ascFunction:ordByPlacaAsc,descFunction:ordByPlacaDesc}},

Como resultado podemos ver a ordenação sendo feita pelo último número da Placa do veículo:

Resultado:

Já me estendi demais, espero que eu tenha conseguido exemplificar o uso básico do widget DataTable da YUI e de como customizar a ordenação, qualquer sugestão, correção ou crítica construtiva é bem vinda. Ajude-me a melhorar a qualidade dos artigos que escrevo.

Links essenciais que me serviram de consulta e para quem deseja exemplos mais ricos:
http://developer.yahoo.com/yui
http://developer.yahoo.com/yui/examples/datatable/
http://developer.yahoo.com/yui/datatable/
http://developer.yahoo.com/yui/docs/module_datatable.html
http://www.quirksmode.org/js/strings.html