O jQuery é uma biblioteca JavaScript poderosa que está quase se tornando quase “sinônimo” do próprio JavaScript.

A apresentação de slides a seguir é de uma palestra introdutória do jQuery, que destaca praticamente todos os seus recursos e que mostra algumas modificações na versão mais recente da biblioteca (1.7).

E para quem quiser se aprofundar no assunto, o último slide aponta para um livro gratuito de jQuery: jqfundamentals.com.

(Registro aqui o agradecimento ao Erko Bridee por compartilhar esse conteúdo)

Posts relacionados

• Livro: Google Android“>Livro: Google Android (0)
• Instalando sua aplicação Rails/RestfulX (e as gems) na DreamHost Installing your Rails/RestfulX app (and its gems) at Dreamhost“>Instalando sua aplicação Rails/RestfulX (e as gems) na DreamHost Installing your Rails/RestfulX app (and its gems) at Dreamhost (2)
• CRUD com o RestfulX – aplicação funcionandoCRUD with RestfulX – live application“>CRUD com o RestfulX – aplicação funcionandoCRUD with RestfulX – live application (2)
• CRUD com o RestfulX: Parte 1/2 – RetrieveCRUD with RestfulX: Part 1/2 – Retrieve“>CRUD com o RestfulX: Parte 1/2 – RetrieveCRUD with RestfulX: Part 1/2 – Retrieve (7)
• Protesto: falha em sistema da Orizon expõe dados sigilosos de pacientes“>Protesto: falha em sistema da Orizon expõe dados sigilosos de pacientes (0)
• Balsamiq Mockups: solução entre protótipos de alta e baixa fidelidade“>Balsamiq Mockups: solução entre protótipos de alta e baixa fidelidade (8)
• Erro “bad line length character” no Git“>Erro “bad line length character” no Git (1)
• Windows e Office: novidades da Microsoft“>Windows e Office: novidades da Microsoft (4)
• Firefox Plugin – visualizar trace de SWFs“>Firefox Plugin – visualizar trace de SWFs (2)

© Elvis for Elvis Fernandes, 2011. |
Permalink |
Nenhum comentário |
Adicione ao
del.icio.us


Tags: AJAX, Desenvolvimento, JavaScript, jQuery, web

Veja também:

• Flash Mobile 10 – Para Outubro de 2009
• [Canvas vs. Flash] Butterfly 3D (Canvas + JavaScript)
• Flash Player 10.1 : entrevistas e demos
• Adobe Flash suporte completo para dispositívos móveis a caminho : agora vai
• HTC Hero: primeiro dispositivo com Android e Flash

Eu confesso que nunca me interessei em desenvolver sites e muito menos aplicações web utilizando ASP.net, sempre achei que a metodologia “drag and drop” que o Web Forms nos proporciona não funciona legal na web, pois ela gera muito “lixo” para o navegador, e isso é crucial em uma WebAPP.

Portanto, desde que migrei de desktop (Delphi 7) para web, tenho trabalhado com o nosso querido Flex no Front End e o C#.net no Back End. Mas desde que o ASP.net MVC foi lançado, tenho acompanhado de perto a sua evolução, e confesso que ele tem me agradado bastante.

Para não perder o costume, venho hoje compartilhar com vocês um pouco do que tenho estudado, este post faz uma comparação de um projeto idêntico criado usando as duas metodologias.

Então chega de conversa e vamos ao que interessa:

As ferramentas que utilizei para criar os projetos foram:
• SQL Server 2008 Express
• Visual Web Developer Express 2010
• Framework ASP.net MVC 2.0

O projeto acessa uma base de dados com apenas uma tabela, com a seguinte estrutura:

Não utilizei nenhum framework ORM, fiz o mapeamento das entidades manualmente, usando as classes nativas do Framework. (SqlConnection, SqlCommand e SqlDataReader).

Quando criei os projetos, utilizei os templates do prório Visual Web Developer:

Para o projeto Web Forms, usei ASP.NET Web Application.
Para o projeto MVC usei: ASP.NET MVC 2 Web Application.

É claro que não vou fazer um passo a passo de como criar o projeto, o foco deste post não é isso, mas depois de pronto, nosso Solution Explorer do projeto WebForms ficará assim:

Já o projeto MVC, tem uma estrutura um pouco maior, porque ele trabalha completamente “tipado”, temos as classes Model, Controller e View, como manda o figurino:

Certo, agora vamos ao objetivo, quando executo o projeto WebForms e acesso a página de clientes, o Framework gera este código HTML:

"-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">"http://www.w3.org/1999/xhtml" xml:lang="en">
"../Styles/Site.css" rel="stylesheet" type="text/css" />
"post" action="default.aspx" id="ctl01">
class="aspNetHidden">
"hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
"hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
"hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="ZhpEPEbRGaEf3wxNFvEkKLAz6ze4Y1776/kxLQ+oQoJx5Ew6ZrkBOLulNNEfu2T+c9uFRH7RTl5UUrZ3A1gK1BMKQc174Sha+0Wt5wmfhTKcGIb1YUgfoyjwcO8TYaR3U3o3l/07IemJNiwmeH8cM7BzSKkWiBTRuwjyI6u7VHlH7TyWLCMw0bneQ8edbb2YBMnGslvv7YSjWb5RdYMIjhu77ZE4CwQwK75UxHI1QZUgHjIaNP7MrZpoxi+tQbCBVW9Lc3jZCq0gbouSkWw7epm9WZknpiH5T68BTGirDfP4BfUZygsyB6aHmrpdN47pKJz7kFH78soAuE4Yd1NWNk9mHK+6ErcoVe3EkH8ycfXm51UwzkwNp2XRdr2s2AANsWpDdxNhyDTo2Mia2/YrPGirUzqV62RWlVWpS/KBwBpdtSLlYVnLaU6eJyjrJhqXxKzTa8b3F1av8h40cX5teT+0odXAWB3E2GcrE9XGfwa1ACk5QQlFsh+UplF/dEuzes6UBjJd9LQS7kPVabfzs/y8L3BRsK0Rtb0i1unXfHMuq3eVg/XQGnwb9uEhL5EdHjniskkoUzQh1T2yJfPwajrjxU06M5Ba43Soj8pk03isqi4tBqBllPVkv13Hyz8eapd85VejaO+3CUqXVr3J9/3MvZWjNcA2QOef7H4xKmtVExbxingFQqj5K5appmJReVczk8/HLCOnLD+Wa5/7CKWTj/OucQgIgPYnGEpzMZUlKJZFLAeFfwwkR2XVZcyyCoYWjK2pJX5zuCXMVkMxKCCuWjVvtl3GPfUkz1nsgP/Jtyq7vSdiXdGE/qxV8yRGJN5h4MlvVOfYq2gKspcNIZzwCzVCidhdoY8SYjnz+qyIXmXxXD3VkF2XGbcId86i/qOkwOyk9UcAS8iR+Es/MkQg7WximaQQji+o67grOaE=" />






class="aspNetHidden">
"hidden" name="__VIEWSTATEENCRYPTED" id="__VIEWSTATEENCRYPTED" value="" />
"hidden" name="__PREVIOUSPAGE" id="__PREVIOUSPAGE" value="J0z-AYjFMhWT0kpqMD21gr0HoEKRmyw5_w3a37YYi27BAPn9DepNebG_20nPZ-VajOl1_KCPnab6uApAzjeQe7rOkN95u7baMYMKLA59Jpw1" />
"hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="IRcnHy6RQ1JCPCa5l/6k5JvtDNRbcbaJH7wDUCh/MVtgwLHo5W/iwGkTGRYeZHjYgqrWjjGjzZQvt+FJuMho2GE+Qf3syKzyeGXquF9a/Ws577KUO6oFdTWrhmsBXMMh" />

class="page">
class="header">
class="title">
                    My ASP.NET Application                

class="loginDisplay">

                        [ "../Account/Login.aspx" id="HeadLoginView_HeadLoginStatus">Log In ]
class="clear hideSkiplink">                "#NavigationMenu_SkipLink">"Skip Navigation Links" src="/WebResource.axd?d=xFBnuqKYnqgWTzzLZBOde45ezhDnXgdvOgtOQCvZwJw6xfKBic_vxFOBRotUqhEobwKQWWgbNXfNYvZsldu9uZj6j6aYf49eocT9vsEpgtM1&t=634356288728593750" width="0" height="0" style="border-width:0px;" />
class="menu" id="NavigationMenu">
class="level1">
class="level1" href="../Default.aspx">Home
class="level1" href="../About.aspx">About



"NavigationMenu_SkipLink">            

class="main">

        Listagem Completa de Clientes    

    

    

"0" rules="all" border="1" id="MainContent_GridView1" style="border-collapse:collapse;">

"col">Id_Cliente
"col">Nome
"col">CPF
"col">RG
"col">Idade
"col"> 
"col"> 


17
Jo?o
123.123.123-12
12.312.123-1
30
"Edita.aspx?Id_Cliente=17">Editar


                    "return confirm('Tem certeza?');" id="MainContent_GridView1_LinkButton1_0" href="javascript:__doPostBack('ctl00$MainContent$GridView1$ctl02$LinkButton1','')">Excluir                


19
Jos?
444.444.444-44
44.444.444-4
21
"Edita.aspx?Id_Cliente=19">Editar
                    "return confirm('Tem certeza?');" id="MainContent_GridView1_LinkButton1_1" href="javascript:__doPostBack('ctl00$MainContent$GridView1$ctl03$LinkButton1','')">Excluir



18
Maria
999.999.999-99
99.999.999-9
35
"Edita.aspx?Id_Cliente=18">Editar
                    "return confirm('Tem certeza?');" id="MainContent_GridView1_LinkButton1_2" href="javascript:__doPostBack('ctl00$MainContent$GridView1$ctl04$LinkButton1','')">Excluir                





"submit" name="ctl00$MainContent$btnInserir" value="Inserir novo cliente" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$MainContent$btnInserir", "", false, "", "Insere.aspx", false, false))" id="MainContent_btnInserir" />    

class="clear">

class="footer">

Dêem uma olhada em quanto código os componentes criam. É muita coisa, imaginem isso em um grande portal? Americanas.com gerando este código? Meio inviável não? Aproveito para destacar o código gerado pelo ViewState, herói e vilão do Web Forms.

Agora vamos comparar a mesma página gerada pelo projeto MVC:

"-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">"http://www.w3.org/1999/xhtml">
"Content/Site.css" rel="stylesheet" type="text/css" />


class="page">
"header">
"title">
My MVC Application

"logindisplay">

        [ "/Account/LogOn">Log On ]
"menucontainer">
"menu">
"/">Home
"/Home/About">About


"main">
Listagem completa de clientes:


                Código            
                Nome            
                CPF            


                RG            
                Idade            





                30            
                Jo?o            
                123.123.123-12            
                12.312.123-1            
                30            
                "/Cliente/Edit?Id_Cliente=30">Editar |                "/Cliente/Delete?Id_Cliente=30" onclick="return confirm('Tem certeza?');">Excluir |            


                32            
                Jos?            
                444.444.444-44            
                44.444.444-4            
                21            
                "/Cliente/Edit?Id_Cliente=32">Editar |                "/Cliente/Delete?Id_Cliente=32" onclick="return confirm('Tem certeza?');">Excluir |            


                31            
                Maria            
                999.999.999-99            
                99.999.999-9            
                35            
                "/Cliente/Edit?Id_Cliente=31">Editar |                "/Cliente/Delete?Id_Cliente=31" onclick="return confirm('Tem certeza?');">Excluir |            



        "/Cliente/Create">Novo cliente...    
"footer">

O que acham? As duas páginas fazem exatamente a mesma coisa, no entato o MVC gera beeeem menos código.

Bom pessoal, essa é apenas uma das vantagens do MVC, posso destacar outras:

• Controle total do código que será enviado ao navegador;
• Arquitetura em camadas, códigos completamente separados;
• Classes que auxiliam a geração do HTML para o browser de acordo com as ações do Controlador, sem lixo!;
• Facilidade de se implementar Ajax (de verdade) no seu projeto.
• Integração com o Jquery usando classes do Framework;

Bom é isso, vou me despedindo, mas antes deixo o código fonte dos dois projetos disponíveis para download.

Olá,

Com a chegada eminente do HTML5 e outras tecnologias baseadas em javascript como MongoDB e node.js
tenho deixado o Flex o meio de lado e me dedicado um pouco mais ao javascript.
Porem fica a questão, Como ter um front-end com a mesma performance, escalabilidade e desacoplamento que o flex permite ?
Realmente nesses termos ainda não encontrei nada que me proporcione o que o Flex proporciona.

Nesse Post vou falar um pouco sobre Framework JavaScriptMVC
Me perece uma das melhores alternativas para manter um frond-end JavaScript/HTML

JavaScriptMVC é formado por uma seria de ferramentas para construção de aplicativos JavaScript e consiste nos seguintes componentes:

• StealJS -Gestão de Dependência
• FuncUnit – Testes Unitários
• jQueryMX – Biblioteca de Componentes
• DocumentJS – Geração de JSDoc

O JavaScriptMVC pode ser utilizado com qualquer back-end , java,php,rails, etc…
Ele pode ser instalado baixando diretamente aqui ou instalando cada componente individualmente atreves do github.

Os componentes devem ficar nas raiz do diretório web da sua aplicação, nesse caso a pasta public.
Então as estrutura da aplicação fica assim.

public
  /documentjs
  /funcunit
  /jquery
  /steal
  /js

O JavaScriptMVC tem ferramentas de geração de código para auxiliar na criação da aplicação.
Vamos começar criando a aplicação pelo terminal, então o JavaScriptMVC vai gerar toda a estrutura do projeto.

    cd path-to-application/public/
   ./js jquery/generate/app contacts

Assim como o rails o JavaScriptMVC possui scaffolds que podem gerar seu CRUD.
Para isso basta executar o comando scaffold passando como parâmetro o nome do modelo.
Os nomes das classes seguem o seguinte padrão : ..
então temos o model “Contacts.Models.Contact”

     ./js jquery/generate/scaffold Contacts.Models.Contact

O JavaScriptMVC vai gerar o controlador, modelos, views e testes unitários da aplicação.
Porem o único arquivo que sera incluído na aplicação é o steal.js ele é responsável por gerenciar as dependências da aplicação.
No ambiente de desenvolvimento ele vai incluir individualmente todos os controladores, modelos, etc..

 type='text/javascript'  src='../steal/steal.js?contacts,development'>>

O parâmetro “?contacts” na tag de inclusão indica o nome do arquivo de configuração que tem o mesmo nome da aplicação nesse caso contacts.js
nele ficam mapeados todas dependências do projeto que serão gerenciadas pelo StealJS
contacts/contacts.js – Arquivo de configuração

steal.plugins(
    'jquery/controller',
    'jquery/controller/subscribe',
    'jquery/view/ejs',
    'jquery/controller/view',
    'jquery/model',
    'jquery/lang/json',
    'jquery/dom/form_params')

.css('contacts')

.resources()
.models('contact')
.controllers('contact')
.views();

Depois de fazer uma refatoração a aplicação ficou assim :

contacts/view/contact/contacts.html – Tela inicial da aplicação

>
    >
        >JS - MVC>
         type='text/javascript'  src='../steal/steal.production.js?contacts'>>
    >
    >
        
 id='contacts'>
            
>Contacts>
            
 id='contact'>>
        >
    >
>

contacts/view/contact/list_view.ejs – Template para a listagem de contatos

 class="link">
     href="javascript://" class='text_button create' >Create>
    
/>
>

 class="table">
    
>
        
>
            
>Name>
            
>E-Mail>
            
> >
        >
    >
    
>
        <%for(var i = 0; i < contacts.length ; i++)%>
        
 <%= contacts[i]%>>
            
><%= contacts[i].name%>>
            
><%= contacts[i].email%>>
            
 class="last">
                 href='javascript://' class='edit'>edit>%>
    >
>

contacts/view/contact/list_view.ejs – Template para o formulario de contatos

 <%= contact%> >
    
 action="#" class="form">
        
>
             class="label">Name>
            
 type="text" class="text_field" id="name" name="name" value="<%= contact.name%>" />
             class="label">E-Mail>
            
 type="text" class="text_field" id="email" name="email" value="<%= contact.email%>" />
        >
        
 class="link">
             href="javascript://" class="text_button save">Save>
             href="javascript://" class="text_button cancel">Cancel>
        >
    >
>

contacts/models/contact.js – Classe ‘Contacts.Models.Contact’ Reponsavel pela abstração do acesso aos serviços

$.Model.extend('Application.Models.Contact',
/* @Static */

    /**
     * Service url.
     */
    url: 'http://localhost/patho-to-app/contacts/',

    /**
     * Recupera os dados dos contacts do serviço no backend.
     * @param Object params
     * @param Function success
     * @param Function error
     */
    findAll: function( params, success, error )
        $.ajax(
            url     : this.url,
            type    : 'get',
            dataType: 'json',
            data    : params,
            success : this.callback(['wrapMany',success]),
            error   : error
        );
    },
    /**
     * Cria um novo contacto
     * @param Object attrs
     * @param Function success
     * @param Function error
     */
    create: function( attrs, success, error )
        $.ajax(
            url     : this.url + 'save',
            type    : 'post',
            dataType: 'json',
            error   : error,
            success : success,
            data    : contact:attrs
        });
    }
    /**
     * Altera os dados de um contacto
     * @param String id
     * @param Object attrs
     * @param Function success
     * @param Function error
    */
    update: function( id, attrs, success, error )
        $.ajax(
            url     : this.url + 'save',
            type    : 'post',
            dataType: 'json',
            data    : contact:attrs,
            success : success,
            error   : error
        });
    },
    /**
     * Remove um contacto
     * @param String id
     * @param Function success
     * @param Function error
     */
    destroy: function( id, success, error )
        $.ajax(
            url     : this.url + 'destroy/id/'+id,
            type    : 'post',
            dataType: 'json',
            error   : error,
            success : success
        );
    },
},
);

contacts/controllers/contact_controller.js – Classe ‘Contacts.Controllers.Contact’ Responde a eventos da view e do modelo

$.Controller.extend('Contacts.Controllers.Contact',onDocument: true,

     /**
     * Função chamada quando a página é carregada
     */
     load: function()
        this.findAll();
     ,

     /**
     * Função que renderiza a listagem de contatos apartir do template /contacts/views/list_view.ejs
     * @param Array contacts
     */
     listView: function( contacts )
        $('#contact').html(this.view('list_view', contacts:contacts ));
     },

     /**
     * Função que renderiza o formulario de contatos apartir do template /contacts/views/form_view.ejs
     * @param Contacts.Models.Contact contact
     */
     formView: function(contact)
        $('#contact').html(this.view('form_view', contact:contact));
     },

     /**
     * Função que lista os contatos atraves do model e renderiza a tela quando obtem resultado
     */
     findAll: function(){
        Contacts.Models.Contact.findAll(, this.callback('listView'));
     },

    /**
     * Listener para o evento 'click' no link create
     */
    '.create click': function()
        // cria um novo contato e monta o formulario
        var contact = new Contacts.Models.Contact();
        this.formView(contact);
    ,

     /**
     * Listener para o evento 'click' no link edit
     * @param jQuery el
     */
    '.edit click': function( el )
        // Recupera o contato selecionado e monta o formulario
        var contact = el.closest('.contact').model();
        this.formView(contact);
    ,

     /**
     * Listener para o evento 'click' no link destroy
     * @param jQuery el
     */
    '.destroy click': function( el )
        if(confirm("Are you sure you want to destroy?"))
            // Recupera o contato selecionado e o remove
            var contact = el.closest('.contact').model();
            contact.destroy();
        
     },

    /**
     * Listener para o evento 'click' no link save
     * @param jQuery el
     */
    '.save click': function(el)
        // Recupera o contato selecionado
        var contact = el.closest('.contact').model();
        // Recupera os dados do formulario
        var attrs   = $('.form').formParams();
        // Atualiza os dados no "objeto"
        contact.attrs(attrs);
        // Salva
        contact.save();      	// a função save é erdada do objeto Model
                               // ela verifica se o objeto ja existe e chama o metodo create ou update
    ,

    /**
     * Listener para o evento 'click' no link cancel
     */
    '.cancel click': function()
        this.findAll();
    ,

    /**
     * Listener para o evento 'created' disparado pelo "objeto" Contacts.Models.Contact
     * @param String called
     * @param Event contact
     */
    'contact.created subscribe': function( called, contact )
        this.findAll();
    ,

    /**
     * Listener para o evento 'updated' disparado pelo "objeto" Contacts.Models.Contact
     * @param String called
     * @param Event contact
     */
    'contact.updated subscribe': function( called, contact )
        this.findAll();
    ,

     /**
     * Listener para o evento 'destroyed' disparado pelo "objeto" Contacts.Models.Contact
     * @param String called
     * @param Event contact
     */
    "contact.destroyed subscribe": function(called, contact)
        this.findAll();
     
});

Agora antes de colocar a aplicação em ambiente de produção podemos compactar todos os arquivos .js e .css gerando uma versão final.

 ./js contacts/scripts/build.js

O StealJS utiliza o Google Closure para compactar todos os arquivos
e gerar arquivos compactados/concatenados que serão usados em produção contacts/production.js e contacts/production.css .

Com isso reduzimos todos os arquivos da aplicação, estilos, plugins, etc.. são reduzidos a apenas um arquivo .js e um arquivo .css.
E para mudar as configuração do ambiente temos apelas que mudar o tag de inclusão do StealJS

<script type='text/javascript'  src='../steal/steal.production.js?contacts'>script>

Esse foi apenas uma pequena amostra do JavaScriptMVC.
Com essa estrutura ele nos permite construir grandes aplicações de forma modular
com um bom ambiente de teste, velocidade no desenvolvimento e performance no ambiente de produção.

Essa aplicação esta rodando aqui : http://flexria.com.br/labs/js-mvc/
E os fontes estão disponíveis no github : https://github.com/FabioBatSilva/js-mvc

Abraço e até a próxima….

Depois de várias semanas a trabalhar em dois projectos básicos mas sérios com HTML (5, inclusivé), Javascript (jQuery) e CSS, deixo aqui os comentários das conclusões que retirei enquanto responsável pela equipa – do ponto de vista do desenvolvimento e tendo o desenvolvimento em Flex como base de comparação. De notar que este é um post de opinião pessoal na base da minha recente experiência, pelo que algumas observações poderão mesmo estar erradas.

• IDE/apoio ao developer: A maturidade das ferramentas de desenvolvimento (Aptana+Dreamweaver+Firebug) está uns bons pontos abaixo da maturidade dos IDEs de desenvolvimento em Flex (e naturalmente JAVA).
• Frameworks: Existem “n” frameworks de desenvolvimento em JS, que puxam o JS para um patamar muito interessante, mas ainda assim correspondem a menos de 1/10 das bibliotecas disponíveis no Flex SDK. Sobra (demasiado) trabalho para os developers no desenvolvimento de componentes, ferramentas e bibliotecas utilitárias.
• Práticas:
  
  • Copy paste: Ainda impera muito a prática do copy-paste no mundo HTML, não sendo fácil encontrar recursos bem documentados. Por outras palavras, é normal encontrar-se no site de qualquer componente Javascript o código “copy paste” simples, directo e intuitivo para colocar a coisa a funcionar; porém nem sempre disponibilizam directamente a API/documentação que é essencial para quando queremos fazer “algo mais” (exemplo: http://videojs.com ).
  • OOP não é fantástico: Frameworks JS conhecidas estão relativamente bem documentadas. Porém, em vários casos a qualidade do código surpreende-me pela negativa – ainda se usa pouca composição/heranças no mundo JS. Não é que a qualidade habitual do código seja má; simplesmente não é fantástica…
• Dores de cabeça:
  
  • Compatibilidades entre diferentes browsers e diferentes dispositivos: *Ainda* é terrível. Mesmo tendo cuidado e fazendo código “by-the-book”, há sempre um browser que estraga tudo. Ou um browser de dispositivo onde a coisa aparece de forma diferente. E mesmo depois das coisas estarem no ar, supostamente estáveis, por vezes ainda aparece a pessoa x ou y a dizer que aparece não sei quê desformatado… E há o medo do futuro: ” e se sai um browser/dispositivo novo que me lixa tudo?”
  • Magia negra: Há alguns comportamentos que parecem inexplicáveis, e muitos “brick-walls” que vão surgindo pelo caminho e que só desaparecem com a experiência de quem já os enfrentou, ou com muitas pesquisas no Google.
• Video: O suporte de vídeo no HTML5 está muito abaixo da minha expectativa. Foi o meu maior “letdown”. Basicamente, algo que normalmente nos retira cerca de 20 minutos, retirou-nos cerca de 2 a 3 dias:
  • O rendering de vídeo HTML5 de cada browser é ainda muito susceptível aos parâmetros de encoding. Tivemos que testar vários cenários para obter uma boa relação qualidade/bitrate/compatibilidade com browser(s). Um mesmo vídeo MP4 que corre bem no Chrome nem sempre corre bem no iPhone. Já agora, recomendo vivamente: http://diveintohtml5.org/video.html .
  • Para um vídeo correr em vários/todos os browsers, é preciso colocar no servidor uma diferente cópia desse vídeo com um encoding diferente para quase cada browser: Mp4, OGV e/ou WebM. Um vídeo de 20 MB, necessitará de pelo menos 60 MB no servidor para as cópias restantes. Agora imagine-se que queremos ainda diferentes 3 bitrates para o vídeo. Multiplicando por “n” vídeos… conseguimos facilmente entupir um servidor.
  • O vídeo em HTML5 nos dispositivos móveis só corre em Full Screen, mediante um “click”. Aparentemente não dá para colocar um pequeno vídeo a passar embebido num canto. Porém, no meu Droid 2 com Froyo (suporte a Flash Player 10.1) o vídeo aparece nos websites embebido nos locais correctos, sem qualquer problema.
  • O vídeo em HTML5 nos dispositivos móveis não faz autoplay. Isto é propositado para gerir melhor a largura de banda (e bateria), mas devia ser opcional (não sei se é, mas por defeito o autoplay vem desligado).
  • A performance está uns furos abaixo do Flash Player. O mesmo vídeo HD, em MP4 corre com fluídez no Flash Player 10.1, mas com menor fluídez em HTML5 no mesmo browser. Dá-me a impressão que se perdem cerca de 4 ou 5 frames por segundo, pois parece haver um género de “stutter”.
• Text layouting: De longe, e naturalmente, a *MELHOR* característica do mundo HTML. Isto não é novidade para ninguém, mas ainda assim é sempre importante realçar que o text layouting de HTML é centenas de vezes superior ao text layouting do Flash/Flex.
• Separacão de “contextos”: Neste aspecto, o desenvolvimento em HTML+JS+CSS é até bastante confortável e elegante.
• Performance: A performance do JS, para uma linguagem não previamente compilada, é bastante interessante, andando possivelmente a par e par com a performance do Flash Player dentro do browser SEM aceleracão por hardware, e sem recurso a PixelBender/outros. Porém, notam-se demasiado as diferenças de performance entre diferentes browsers, que têm um impacto variável na experiência do utilizador.
• Ubiquidade: No que toca a penetração, apesar dos impressionantes 98% do Flash Player (no desktop), o conjunto HTML+JS+CSS é de longe aquele que dá mais garantias que irá correr em mais browsers e, principalmente, dispositivos. *Porém* é também o mais fragmentado e problemático: tem comportamentos diferentes em diferentes browsers e dispositivos, o que em certos tipos de aplicação é assustador e completamente impensável. O Flash Player continua a ser superior no que toca a garantir o mesmo em resultado em qualquer sítio que corra – desde que corra.

Disclaimer:

Isto não é um “rant” nem serve para iniciar um “HTML vs Flash”, ou um debate daqueles acesos, mas sim um conjunto de conclusões que retirei (que podem estar erradas) e que considerei importantes para partilhar aqui. Tirei mais conclusões, mas estas são as mais relevantes. Só queria deixar três pontos explícitos de claros pontos fortes da combinação HTML+CSS+JS:

1. Se o que se pretende é uma aplicação web a correr no browser e que também abra em dispositivos móveis, HTML+CSS+JS é combinação correcta. Esqueçam (por agora) o Flash Player para este efeito. Mas pensem no Air no que toca a criar aplicações instaláveis.
2. Se o que se pretende é mostrar texto, formatar texto, gerir texto, saltar entre documentos, nem pensar em usar a plataforma Flash. Este é o território demarcado do HTML.
3. É uma lufada de ar fresco não termos que esperar 30 segundos em compilações sempre que se faz uma alteração ao código.

——-

João Saleiro (Webfuel)

Já?

Chegou aquela altura do ano em que do lado do WordPress.org se começam a dar os retoques finais na próxima versão do WordPress (a 3.1, neste caso). Os utilizadores do WordPress.com são automaticamente incluídos na versão beta, dando-lhe todo o acesso a novas funcionalidades, um mês antes de estas serem lançadas oficialmente. Isto é bom, não só porque lhe dá um acesso antecipado ao que aí vem, mas como também a sua opinião nos ajuda a melhorar ainda mais. Estou muito animada, tanto pelos os novos recursos que acabámos de implementar, como por serem adições que já desejava há muito tempo. Aqui estão as novas funcionalidades que já pode ver no seu painel:

Criação mais fácil de links internos

Fi.nal.mente.

Está a escrever um post (ou uma página) no WordPress. Menciona algo que tenha escrito antes, e pensa: “Já sei, vou criar uma ligação para esse post!” O que é que fazia? Pode ser que abrisse um novo separador ou janela e que procurasse no seu conteúdo na sua lista de posts, ou ainda que visitasse o seu blog e procurasse esse post. Seja como for, teria que encontrar esse conteúdo, obter a respectiva URL, de modo a ao clicar no botão de link no editor de posts, poderia colá-la. Certo? Isso são o quê? Entre 5 a 8 passos, dependendo de como o fazia? Não mais!

Posts e páginas existentes podem ser encontrados e ligados com uma pesquisa dinâmica.

Com a nova funcionalidade de links internos, pode agora indicar qualquer URL para criar um link, como costumava fazer, ou então procurar nos seus posts e páginas existentes logo ali, na janela de inserção de links. Uma combinação de pré-carregamento, preenchimento previsivo e alguma magia Ajax tornam o uso da ferramenta de criação de links numa alegria (e confira quão mais rápida está a janela!). Esperamos que isto o incite a fazer mais conexões entre o conteúdo do seu site, o que tornará mais fácil para os seus visitantes encontrar mais conteúdo relacionado. Agora todos juntos: Viva! (Certo?)

Ordem por colunas

Quando visita a página de Posts (ou de Páginas, ou de Media ou de qualquer outra informação em lista), alguma vez desejou poder clicar no nome da coluna para alterar a visualização, ordenando por exemplo a informação por data, por ordem alfabética, por autor ou por outro critério? Eu sei que eu quis, desde sempre. Já temos! Este recurso é o resultado de um bem-sucedido projecto de um aluno do Google Summer of Code, demonstrando ainda que o programa é uma ótima maneira de se envolver com o desenvolvimento do WordPress. A pequena seta ao lado do título da coluna (na minha imagem de exemplo, a coluna Data) mostra a coluna pela qual a informação está ordenada, e se a ordenação é ascendente ou descendente. Basta clicar no cabeçalho de qualquer coluna para ordenar por essa coluna ou para inverter a ordem.

Paginação melhorada

Se tem muito conteúdo, pode ser que tenha tido uma experiência levemente irritante ao navegar as páginas posts, media ou outros. Clicar para a frente e para trás é fácil, tal como saltar para a primeira ou última página, mas então e o meio? Imaginemos que tem 23 páginas de posts; está na página 6 e, com base nas datas, acha que o que está à procura deve estar por volta da página 15. Teria que clicar várias vezes para avançar algumas páginas, até chegar à página desejada. Não mais! Com o novo estilo de paginação, os botões para a frente/fim e para trás/início continuam lá, mas agora pode ir directamente para qualquer página, alterando apenas o número editável mostrado na área de paginação (e carregar em Enter).

Pesquisas com Ajax

Os resultados de pesquisas são agora mais rápidos e não requerem actualizações do painel no seu browser graças à adição de Ajax. Rápido!

Esquema de cores revisto

Nas opções do seu perfil, tem uma escolha de esquemas de cores do painel, cinza ou azul (o padrão é cinza). Actualizamos o esquema de cores cinza há algum tempo, mas não actualizamos o azul. (Lembra-se quando mudamos do cabeçalho do escuro para o mais claro? Bons velhos tempos.) O novo esquema de cores azul é mais leve, mais limpo e com base nos mesmos tons que o esquema de cor cinza, mas com uma tonalidade azul, para que o foco possa permanecer firmemente na criação de conteúdo, sem distrações. Se você nunca experimentou o esquema de cor azul, agora seria um óptimo para experimentar e ver se gosta! Existem outras cores que gostaria de ter como opções? Diga-nos nos comentários!

Suporte melhorado para IE9

Para aqueles que têm tido problemas em usar arrastar e largar no painel ou ainda algum problema com o editor visual na criação de posts, com o Internet Explorer 9, foram feitas melhorias para funcionem agora sem problemas no mais recente browser da Microsoft.

A ter em conta: estas funcionalidades são novas e embora tenhamos trabalhado nelas durante bastante tempo, poderá encontrar um erro que nos tenha escapado. Se alguma delas lhe estiver a causar problemas, pode deixar um comentário neste post durante as próximas duas semanas, falar sobre isso nos fóruns, ou contactar o suporte através dos canais habituais.

Espero que apreciem estas notícias, tanto quanto nós gostamos de as desenvolver. Bom blogging!

Actualização

Graças aos vossos comentários, conseguimos já detectar e corrigir alguns erros que escaparam nos nossos testes.

• Corrigimos um conflito com o plugin de CSS usado no WordPress.com (a incompatibilidade causava comportamentos estranhos no editor). Assim, se tinha problemas tais como ver texto a ser sublinhado ou em negrito inesperadamente, isto não deve acontecer mais.
• Corrigimos uma falha do IE8 com a janela de inserção de links, mas ainda estamos a trabalhar em alguns problemas no IE7. (Agora a sério, usar browser antigos não é uma boa ideia. Actualize-o!)

Se mesmo assim continuar com problemas com as novas funcionalidades, quando deixar um comentário ou contactar o suporte, por favor indique o sistema operativo e browser que está a usar, para nos ajudar a resolver o problema mais depressa. Exemplos: “Estou a usar Firefox 3.9 com Mac OSX 10.5.”  ”Estou a usar Google Chrome em Windows 7.”

Obrigado!

Está disponível a nova edição da easy .net Magazine, a edição 6 contém cinco artigos:
• AJAX, CSS e JavaScript
• Silverlight
• Introdução ao GridView – Parte 1
• Delegates
• Introdução ao desenvolvimento em .NET

Nesta edição colaborei com o artigo sobre silverlight, será apresentado um poderoso recurso do silverlight que é chamado de Storyboard, que possibilita criar animações em Silverlight. Durante o artigo vamos conhecer os tipos de animações disponíveis. O artigo irá também fazer uma breve introdução a ferramenta Expression Blend 4.

link: http://www.devmedia.com.br/post-18470-Silverlight.html

Twitter: @atsh2

Adobe Flash Platform

Nos últimos anos, vivemos uma explosão das RIA’s (Rich Internet Application), tendo o Flash Player o principal responsavél e sendo o núcleo do que hoje é conhecido como Flash Platform. O Adobe AIR veio para suprir uma lacuna que cedo ou tarde seria necessário, ter uma aplicativo Flash rodando no desktop independentemente de browser. Isso deu um novo rumo aos aplicativos RIA, agora você também tem a possibilidade de ter aquele seu site preferido como um aplicativo desktop, ou muito melhor e mais personalizado sem as limitações de um navegador web, ou seja, uma melhor experiência do usuário.

A Historia do Adobe AIR

Macromedia Central

Vamos lembrar de que o Adobe AIR não foi a primeira tentativa da Adobe de levar seus aplicativos Flash para desktop, muitos podem não lembrar, mas em meados de 2003 a até então Macromedia lançou um software chamado Macromedia Central, um software que tinha como objetivo rodar seus aplicativos em Flash no desktop sem necessidade de browser.
O Macromedia Central não teve muita aceitação por parte dos desenvolvedores e usuários, creio que um dos motivos seja que seu modelo de distribuição não atraia os desenvolvedores sendo que você tinha que pagar para disponibilizar sua aplicação. Outro motivo pode ser que o mercado ainda não estava preparado para seu conceito, coisa que aconteceu com o Adobe Photoshop, segundo Charles Geschke(co-fundador da Adobe) em entrevista a Jessica Livingston no livro Startup(recomendo, ótima leitura ), “o Adobe Photoshop foi lançando um ano antes de o mercado estar preparado para ele”.

Em meados de 2003 a até então Macromedia lançou um software chamado Macromedia Central, um software que tinha como objetivo rodar seus aplicativos em Flash no desktop sem necessidade de browser.

Após a aquisição da Macromedia pela Adobe, voltou-se a conversar sobre esse “software” que tinha como objetivo rodar as aplicações RIA em ambiente desktop, juntou-se algumas pessoas da equipe da Macromedia e outras pessoas da equipe da Adobe chefiados por Ed Rowe e Kevin Lynch. Nascia um novo projeto de codinome Apollo que daria origem ao Adobe AIR.

Missões Espaciais da NASA

Os codinomes dos projetos foram inspirados em missões espaciais da NASA na década de 50 e 60. O Macromedia Central 1.0 e 1.5 receberam os codinomes de Mercury e Gemini, já o Adobe AIR recebeu o codinome de Apollo. Lembrando que o projeto Apollo foi a primeira missão espacial que realmente chegou a Lua.
Lançando em 2006 com o nome de AIR(Adobe Integrated Runtime), com sua logo inspirada em um bumerangue representando a possibilidade de desenvolvimento com Adobe Flash, Adobe Flex e HTML/JavaScript(ou Ajax) e vem ganhando a cada dia mais adeptos e conquistando seu espaço. A Adobe ouvindo a comunidade, fez seu dever de casa acrescentando na medida do possivel, novas funcionalidades para o Adobe AIR 2.0.

Os codinomes dos projetos foram inspirados em missões espaciais da NASA na década de 50 e 60. O Macromedia Central 1.0 e 1.5 receberam os codinomes de Mercury e Gemini, já o Adobe AIR recebeu o codinome de Apollo. Lembrando que o projeto Apollo foi a primeira missão espacial que realmente chegou a Lua.

Adobe Apollo

Leia mais em:
The origins of Apollo
Mais sobre o Adobe AIR

Dando continuidade ao material do que o João Paulo Clementi compilou sobre Tecnologias Microsoft, agora é a vez do ASP.NET.

Webcasts

• Novidades do ASP.NET 4.0 no Visual Studio 2010
• Visual Studio 2010: Como ficou fácil fazer deployment Web 
• O que já de novo no ASP.NET MVC 2.0 
• Conectando uma aplicação ASP.NET com o Windows Identity Foundation
• Construindo aplicações Web de última geração com Microsoft ASP.NET MVC 2 e jQuery
• Visualizações mestras/detalhadas usando a ASP.NET Ajax Library
• AJAX no ASP.NET com jQuery

Artigos

• ASP.NET Dynamic Data
• Dez Razões para Adotar o LINQ nas Aplicações .NET
• Formatar dados com o ASP.NET Dynamic Data
• Uso do LINQ com o controle GridView do ASP.NET – Parte 1
• Uso do LINQ com o controle GridView do ASP.NET – Parte 2

Videocasts

• Dicas do ListBox e DropDownList no ASP.NET – parte 1
• Dicas do ListBox e DropDownList no ASP.NET – parte 2
• GridView com LINQ
• Uso do Linq com o controle GridView do ASP.NET – parte 1
• O AutoComplete AJAX com Entity Framework
• ASP.NET Dynamic Data Parte 1
• ASP.NET Dynamic Data Parte 2

ASP.NET Dev Center: http://msdn.microsoft.com/pt-br/asp.net/