Foco nos frameworks UI (DWR, YUI e Ext),  JavaScript orientado a objetos e na linguagem JAVA como implementação no lado servidor.

Pré-requisitos:
Desejável conhecimento de HTML, programação, javascript e linguagem JAVA.
(O curso não requer comprovação, mas esses assuntos básicos para o entendimento não serão revistos)

Datas:
Sábado, 12/05/2007 (13:00 as 17:00)
Sábado, 19/05/2007 (13:00 as 17:00)
Sábado, 26/05/2007 (13:00 as 17:00)
Sábado, 02/06/2007 (13:00 as 17:00)

Carga Horaria:
16hrs (4hrs em 4 sábados)
   
Valor: 
R$ 55,00 reais (à vista)
Aluno da FLF tem desconto de 20%.

Inscrições:
Reservas por internet, preencha o formulário de contato no endereço http://www.milfont.org/blog/?page_id=51
Reservas somente enquanto houver vagas (máximo de 20 vagas), portanto garanta já a sua.

Pagamento até o dia 04/05 na sede da Faculdade Lourenço Filho

Material:
CD com ferramentas utilizadas, material didático exclusivo e código das aplicações a serem vistas.
Certificado de conclusão no formato digital ao término do curso. (Qualidade a ser impresso em papel fotográfico)

Local:
Faculdade Lourenço Filho.
Rua Barão do Rio Branco, 2101 Centro
Fortaleza – Ceará CEP 60025-062, Fone/Fax: (85) 4009.6060

Professor:
Christiano Milfont
Analista de Sistemas da SEPLAG – Secretaria do Planejamento e Gestão do Estado do Ceará.
Arquiteto Java da Triadworks ASG ( http://www.triadworks.com.br)
http://www.milfont.org

Grade:

1. Fundamentos de Ajax – 12/05/2007 (13:00 as 17:00)
1. Overview do XHR
2. Iniciando com DWR.
3. Padrões WEB, melhores práticas no uso do Ajax
2. Javascript Avançado – 19/05/2007 (13:00 as 17:00)
1. O que é JSON e como usá-lo
2. Javascript Orientado a Objetos
3. DWR avançado
3. Usabilidade e Frameworks UI – 26/05/2007 (13:00 as 17:00)
1. MVC original implementado na web
2. Componentes UI com YUI e Ext
4. Melhores práticas  – 02/06/2007 (13:00 as 17:00)
1. Minificação (Jmin), Verificação (JSLIN) e Documentação (JSdoc)
2. Testes unitários (JsUnit)
3. Uma aplicação completa

Essa palestra será mais ou menos um resumo do curso de AJAX avançado que pretendo ministrar agora em Maio na Faculdade Lourenço Filho pela Célual JAVA.

Durante essa semana que se inicia eu atualizo esse post com as informações detalhadas, mas reservem o próximo sábado para discutirmos sobre AJAX no FLISOL e juntem as moedas para um curso mais aprofundado no próximo mês… ah! e vai ser super barato, na verdade de graça, apenas com uma ajuda de custo de R$55,00 reais, graças à Célula Java – FLF!

[update 1]

Confirmado, minhas palestras foram aprovadas e são no período da tarde

http://www.psl-ce.softwarelivre.org/flisol/index.php/FLISOL_2007#Programa.C3.A7.C3.A3o

Preparem para discutir sobre ajax, javascript, melhores práticas e o escambau ….

[/update 1] 

Agora o YUI Team hospedou o Builder Grid criado pelo Davglass, que automatiza a criação do layout com o framework de forma visual e facilita o que já era fácil.

Link: http://developer.yahoo.com/yui/grids/builder/

Se voce usa um framework Ajax então esse tamanho deve ter aumentado bastante e se seu site tem uma boa visitação você está punindo seus visitantes com uma maior carga ao abrir as páginas, além de se punir com excesso no limite de bandwidth definido pelo seu provedor.

O blog do projeto YUI está com um post sobre esse problema que no YUI é até preocupante vide o tamanho de seus componentes. 

Uma das alternativas é habilitar a compressão http de seu servidor web além de usar os arquivos xxx-min.js que vem no framework sem comentários, sem espaços em branco e sem quebra de linhas.

Observe na imagem que o tamanho dos arquivos são reduzidos drasticamente com essa abordagem.

Para sistemas executados em rede local eu não vejo problema usar sem a compressão, mas em sites é uma configuração primordial. 

Sensacional, estou pensando seriamente em criar um theme ajax para mim e com certeza vou adotar essa técnica. 

Foi bem básica, fiz poucos slides no BrOffice e mostrei um exemplo de upload sem dar refresh na página usando o YUI.

É a segunda parte do tutorial que estou fazendo.

Aguardem o próximo artigo para eu explicar o material que será base do curso de ajax que ministrarei na SECOMP da faculdade Lourenço Filho nos dias 16,18 e 20 de 10/2006.

Nesse primeiro artigo usarei os templates "Grids CSS" para criar a(s) página(s) sem se preocupar com css (já iniciando dentro dos padrões web) e definirei os menus da aplicação usando os componentes de Menu do yui. Os modelos do framework são importantes principalmente se você não tem prática ou desconhece sobre Web Standards.

O framework

Primeiro vamos baixar e adicionar ao projeto as bibliotecas e templates do Framework. A pasta build contém as bibliotecas e folhas de estilo e a pasta examples contém modelos de usabilidade do framework.

Criando o modelo

Vamos criar uma página que será o front da aplicação. Crie um index.html e escolheremos um dos templates já disponibilizados. 

O próprio Yahoo! recomenda o uso do modo Strict mostrando que se comprometem com os padrões. Indicam no Getting Started a seguinte assinatura doctype:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!-- layouts require "Standards Mode" rendering,  hich the 401-strict doctype triggers -->

Precisamos acrescentar a referência para os arquivos css do yui:

<link type="text/css" rel="stylesheet" href="js/yui/build/reset/reset.css" />
<link type="text/css" rel="stylesheet" href="js/yui/build/fonts/fonts.css" />
<link type="text/css" rel="stylesheet" href="js/yui/build/grids/grids.css" />

Definindo o esboço da página

Para usar o Grid CSS espera-se que exista a seguinte estrutura, onde os elementos já sao definicos como:

<div id="doc">
 <div id="hd"></div> <!-- header -->
 <div id="bd"></div> <!-- body -->
 <div id="ft"></div> <!-- footer -->
</div> 

Dividindo a página em 3 regiões: hd (Cabeçalho), bd (Corpo) e ft (Rodapé).

Escolhendo o template 

Após criar-mos as marcações exigidas pelo Grids CSS escolheremos um dos templates definidos para controlar as regiões de conteúdo.

Esses templates controlam duas regiões de conteúdo pré-definidas pelo framework denominadas em região "primária" e "secundária" (ou sidebar)  como na imagem ao lado.

O Grids CSS provê 7 templates onde 6 deles especificam a estrutura de conteúdo em  região "principal" e "barra lateral". o Sétimo template define um layout sem a barra lateral onde a região principal ocupa toda a extensão da página.

A imagem ao lado exibe os templates com suas respectivas identificações.

Utilizarei o "yui-t2" nessa série. 

Esse template escolhido está mais próximo de um sistema padrão com boa largura (180px) para a região lateral onde ficarão os menus e 550px para a região de conteúdo.

Especificando o template

Acrescente no div "doc" a referência ao "class" do modelo escolhido.

<div id="doc" class="yui-t2">

 A página ficará assim:

… 

<body>
<div id="doc" class="yui-t2">
   <div id="hd"></div> <!-- header -->
   <div id="bd"></div> <!-- body -->
   <div id="ft"></div> <!-- footer -->
</div>
</body>

… 

Definindo o conteúdo

Escolhemos um modelo que tem duas regiões de conteúdo. Vou acrescentar duas regiões definindo a área de menus e de conteúdo principal no corpo da aplicação:

<div id="doc" class="yui-t2">
  <div id="hd"></div>
   <div id="bd">
     <div id="menu" class="yui-b"></div>
     <div id="conteudo" class="yui-main"></div>
   </div>
   <div id="ft"></div>
</div>

Observe que a disposição não tem importancia porque a ordem dos elementos que definem as regiões de conteúdo é controlada no css que determina que o estilo "yui-main"(o principal) será à direita (no caso do nosso template escolhido).

Acrescentarei  na região do conteúdo principal (yui-main) mais duas regiões. Uma será para apresentar os formulários em cima da coluna "main" e os grids resultantes das ações dessess formulários na região de baixo, ficando assim: 

<div id="doc" class="yui-t2">
  <div id="hd"></div>
  <div id="bd">
   <div id="menu" class="yui-b"></div>
   <div id="conteudo" class="yui-main">
       <div class="yui-b">
         <div id="formulario" class="yui-g"></div>
         <div id="grid" class="yui-g"></div>
      </div>
   </div>
  </div>
  <div id="ft"></div>
</div>

Adicionando os Menus

Importarei os componentes usados para criar os menus dinâmicos. Acrescente:

<!-- Dependências -->
<link type="text/css" rel="stylesheet" href="js/yui/build/menu/assets/menu.css" />
<script type="text/javascript" src="js/yui/build/yahoo/yahoo.js"></script>
<script type="text/javascript" src="js/yui/build/event/event.js"></script>
<script type="text/javascript" src="js/yui/build/dom/dom.js"></script>
<script type="text/javascript" src="js/yui/build/container/container_core.js"></script>
<!-- Componente -->
<script type="text/javascript" src="js/yui/build/menu/menu.js"></script>

Escolhi usar um modelo de menu clássico, para isso definimos a estrutura deles:

<div id="bd">
    <!-- Menu -->
   <div id="menu" class="yui-b">
      <div id="basicmenu" class="yuimenu">
         <div class="bd">
             <ul>
               <li class="yuimenuitem first-of-type">Documentos
                  <div id="doc_menu" class="yuimenu">
                     <div class="bd">
                        <ul>
                        <li class="yuimenuitem"><a href="#">Novo Documento</a></li>
                        <li class="yuimenuitem"><a href="#">Pesquisa</a></li>
                        </ul>
                     </div>
                   </div>
                </li>
               <li class="yuimenuitem">Processo</li>
               <li class="yuimenuitem">Sair</li>
            </ul>
          </div>
      </div>
   </div>
   <!-- Fim Menu -->
</div> 

Modifiquei alguns estilos padrões criando um outro arquivo css com as seguintes definições(aconselho a não alterar diretamente nos arquivos do framework, crie um outro arquivo de css e acrescente suas customizações porque no caso de um upgrade do framework você não as perde) :

div.yui-b p {
    margin:0 0 .5em 0;
    color:#999;
}
           
div.yui-b p strong {
    font-weight:bold;
    color:#000;
}
           
div.yui-b p em {
   color:#000;
}           
           
h1 {
   padding:.25em .5em;
   background-color:#ccc;
}

#basicmenu {
    position:static;
    visibility:visible;
}
#bd{
   height:400px;
   /*background-color: #0059A5;*/
   width: 760px;
   margin-top: -13px;
}
          
#doc {
   width:760px;
}
          
.yui-b{
   width: 550px;
}
.yui-main{
   width: 550px;
}
.yui-g{
   width: 550px;
}


Instanciando o componente Menu

Acrescente os componentes:

<script type="text/javascript" src="js/yui/build/yahoo/yahoo.js"></script>
<script type="text/javascript" src="js/yui/build/event/event.js"></script>

Adicione um evento para carregar os menus ao carregar a página.

YAHOO.util.Event.addListener(window, "load", YAHOO.example.onWindowLoad);

A função YAHOO.example.onWindowLoad é um Listener para o evento "load" do objeto window.

Definiremos o objeto Menu na função YAHOO.example.onWindowLoad

/**
 * @id YAHOO.example.onWindowLoad
 * @classDescription Instancia Menus
 * @param {Object} p_oEvent
 */
YAHOO.example.onWindowLoad = function(p_oEvent) {
    function hideSubmenus() {
        if(oMenu.activeItem) {
            var oSubmenu = oMenu.activeItem.cfg.getProperty("submenu");
            if(oSubmenu) {
                oSubmenu.hide();
            }
        }
    }

    YAHOO.util.Event.addListener(document, "click", hideSubmenus);
}

Criei funções para controlar o aspecto de "tirar o mouse sobre um Menu" para ele se recolher porque por padrão isso não acontece e é chato.

Definindo a estrutura dinâmica

No próximo artigo mostrarei como fazer um cadastro com upload de arquivos, por enquanto ficamos com esse exemplo já chamando um formulário no menu documento -> Novo Documento.

Utilidades e componentes

 http://developer.yahoo.com/yui/

Site do desenvolvedor do framework, Dustin Diaz

http://www.dustindiaz.com/

Site com contribuição do Dustin

http://www.thinkvitamin.com/

15 coisas legais para se fazer com a YUI

http://www.thinkvitamin.com/features/javascript/15-things-you-can-do-with-yahoo-ui

Treeview com DnD

https://secure0.forward-comp.co.uk/yui/cv/test.html

Exemplos diversos

http://www.thinkvitamin.com/misc/yui-demos/demo-04.html
http://www.thinkvitamin.com/misc/yui-demos/demo-06.html
http://www.thinkvitamin.com/misc/yui-demos/demo-09.html
http://www.dustindiaz.com/sweet-titles/

Esse é o mais bacana

http://www.thinkvitamin.com/misc/yui-demos/demo-13.html

Espero iniciar uma série de artigos cobrindo o framework já que estamos adotando nos novos projetos, coisas interessantíssimas estão saindo, mas muito experimental, assim que tiver coisa pronta eu posto.

* Atualização – [19-09-2006] 

Blog do projeto, vale assinar para acompanhar a evolução do framework

http://www.yuiblog.com/ 

Blog do Jack Slocum com material interessante e extensions

http://jackslocum.com/yui/index.php 

Alem é claro de especializados em ajax como o Ajaxian

http://ajaxian.com/by/topic/yahoo/ 

* Atualização – [24-09-2006]

Nate Koechley (Membro da equipe que criou o YUI) 

http://nate.koechley.com/blog/

Bill Scott (Evangelista YUI)

http://looksgoodworkswell.blogspot.com/ 

*Atualização – [26-09-2006]

A pedidos:  a lista de discussão sobre o YUI

http://tech.groups.yahoo.com/group/ydn-javascript/ 

Mais exemplos 

http://yuiblog.com/sandbox/yui/ 

* Atualização – [29-09-2006]

Sistema de CRM feito com YUI

http://www.sugarcrm.com/crm/demo/45-community-preview.html 

* Atualização – [10-10-2006]

Editor de texto que está sendo construído com YUI, acompanhem a evolução

http://blog.davglass.com/files/yui/editor/ 

Mais efeitos com YUI

http://blog.davglass.com/files/yui/effects/ 

Comentários para o sistema de conteúdo muito usado em blogs, o WordPress.

http://www.milfont.org/blog/archives/83