Driver Flash para o ISFramework

2,446 views

Published on

Estudos para a construção do Driver Flash para o ISFramework

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,446
On SlideShare
0
From Embeds
0
Number of Embeds
63
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Driver Flash para o ISFramework

    1. 1. Driver Flash Introdução Vantagens e desvantagens Planejamento
    2. 2. Perguntas <ul><li>Existem dezenas de opções tecnológicas, e cada dia há o surgimento de novas: </li></ul><ul><ul><ul><li>Como criar aplicações sem dependência da tecnologia da moda? </li></ul></ul></ul><ul><ul><ul><li>Como padronizar o trabalho da equipe sem depender das mudanças de tecnologia? </li></ul></ul></ul><ul><ul><ul><li>Como evitar o redesenvolvimento de aplicações e a manutenção dos códigos legados? </li></ul></ul></ul><ul><ul><ul><li>Como criar uma única aplicação para mais de uma plataforma ou ambiente? </li></ul></ul></ul>
    3. 3. Recordando <ul><li>ISFramework </li></ul><ul><li>Driver </li></ul><ul><li>Framework de desenvolvimento de software de alto nível de abstração. Baseia-se numa meta biblioteca de componentes para o desenvolvimento de aplicativos de interface rica multiplataforma que permite projetar aplicativos apenas uma vez e fazer o deployment em qualquer tecnologia, usando drivers de tecnologia. </li></ul><ul><li>Elemento que cuida da comunicação entre a metabiblioteca e a tecnologia que se deseja utilizar, contendo implementações de componentes gráficos e infra-estrutura de organização dos componentes gráficos (layout) e interação com o usuário (controles de foco e teclado). </li></ul>
    4. 4. Recordando: Modelo estrutural
    5. 5. Recordando: Driver baseado em script <ul><li>// JavaScript 14Kb // Style 2Kb // Subsequentes reloads trarão somente o HTML abaixo e os reloads são necessários <html> <head> <title></title> <link href=&quot;menu.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;> <script src=&quot;menu.js&quot; type=&quot;text/javascript&quot;> </script> </head> <body> <div class=&quot;cswmPopupBox&quot; id=&quot;cswmPopup0&quot; style=&quot;&quot;> <table border=&quot;0&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot;> <tr> <td> <div style=&quot;border-style:solid;border-width: 1px;border-color:#d4d0c8 #d4d0c8 #d4d0c8 #d4d0c8;&quot;> <div style=&quot;border-style:solid;border-width: 1px;border-color:#FFFFFF #000000 #000000 #FFFFFF;&quot;> <table border=&quot;0&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot;> <tr onmouseover=&quot;DynObject.all.DynObject23.MouseOver(1,'1');&quot; onmouseout=&quot;DynObject.all.DynObject23.MouseOut();&quot; onclick=&quot;DynObject.all.DynObject23.HP(0);DynObject.all.DynObject24.invokeEvent('click');&quot;> <td unselectable=&quot;on&quot; nowrap bgcolor=&quot;#D4D0C8&quot; id=&quot;cswmItem1&quot; class=&quot;cswmItem&quot;><span><img align=&quot;absmiddle&quot; id=&quot;cswmIco1&quot; src=&quot;images/btn_save.gif&quot; alt=&quot;&quot; border=&quot;0&quot; height=&quot;16&quot; width=&quot;16&quot; name=&quot;cswmIco1&quot;><img align=&quot;absmiddle&quot; alt=&quot;&quot; border=&quot;0&quot; height=&quot;1&quot; width=&quot;12&quot; src=&quot;../src/info/stela/gui/images/clearpixel.gif&quot;></span>Cv robertoPacheco</td> <td unselectable=&quot;on&quot; bgcolor=&quot;#D4D0C8&quot; id=&quot;cswmExpand1&quot; class=&quot;cswmExpand&quot;></td> </tr> <tr onmouseover=&quot;DynObject.all.DynObject23.MouseOver(1,'2');&quot; onmouseout=&quot;DynObject.all.DynObject23.MouseOut();&quot; onclick=&quot;DynObject.all.DynObject23.HP(0);DynObject.all.DynObject25.invokeEvent('click');&quot;> <td unselectable=&quot;on&quot; nowrap bgcolor=&quot;#D4D0C8&quot; id=&quot;cswmItem2&quot; class=&quot;cswmItem&quot;><span><img align=&quot;absmiddle&quot; id=&quot;cswmIco2&quot; src=&quot;images/file.gif&quot; alt=&quot;&quot; border=&quot;0&quot; height=&quot;16&quot; width=&quot;16&quot; name=&quot;cswmIco2&quot;><img align=&quot;absmiddle&quot; alt=&quot;&quot; border=&quot;0&quot; height= &quot;1&quot; width=&quot;12&quot; src=&quot;../src/info/stela/gui/images/clearpixel.gif&quot;></span>Cv marceloDomingos</td> <td unselectable=&quot;on&quot; bgcolor=&quot;#D4D0C8&quot; id=&quot;cswmExpand2&quot; class=&quot;cswmExpand&quot;></td> </tr> </table> </div> </div> </td> </tr> </table> </div> <div class=&quot;cswmPopupBox&quot; id=&quot;cswmPopup3&quot; style=&quot;&quot;> <table border=&quot;0&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot;> <tr> <td> <div style=&quot;border-style:solid;border-width: 1px;border-color:#d4d0c8 #d4d0c8 #d4d0c8 #d4d0c8;&quot;> <div style=&quot;border-style:solid;border-width: 1px;border-color:#FFFFFF #000000 #000000 #FFFFFF;&quot;> <table border=&quot;0&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot;> <tr onmouseover=&quot;DynObject.all.DynObject23.MouseOver(1,'4');&quot; onmouseout=&quot;DynObject.all.DynObject23.MouseOut();&quot; onclick=&quot;DynObject.all.DynObject23.HP(0);DynObject.all.DynObject26.invokeEvent('click');&quot;> <td unselectable=&quot;on&quot; nowrap bgcolor=&quot;#D4D0C8&quot; id=&quot;cswmItem4&quot; class=&quot;cswmItem&quot;><span><img align=&quot;absmiddle&quot; id=&quot;cswmIco4&quot; src=&quot;images/btn_undo.gif&quot; alt=&quot;&quot; border=&quot;0&quot; height=&quot;16&quot; width=&quot;16&quot; name=&quot;cswmIco4&quot;><img align=&quot;absmiddle&quot; alt=&quot;&quot; border=&quot;0&quot; height=&quot;1&quot; width=&quot;12&quot; src=&quot;../src/info/stela/gui/images/clearpixel.gif&quot;></span>Edit</td> <td unselectable=&quot;on&quot; bgcolor=&quot;#D4D0C8&quot; id=&quot;cswmExpand4&quot; class=&quot;cswmExpand&quot;></td> </tr> <tr onmouseover=&quot;DynObject.all.DynObject23.MouseOverSep(1);&quot; onmouseout=&quot;DynObject.all.DynObject23.T(350);&quot;> <td unselectable=&quot;on&quot; align=&quot;left&quot; valign=&quot;botton&quot; bgcolor=&quot;#D4D0C8&quot; colspan=&quot;2&quot; height=&quot;2&quot;></td> </tr> <tr onmouseover=&quot;DynObject.all.DynObject23.MouseOverSep(1);&quot; onmouseout=&quot;DynObject.all.DynObject23.T(350);&quot;> <td unselectable=&quot;on&quot; align=&quot;left&quot; valign=&quot;botton&quot; bgcolor=&quot;#A5A6A6&quot; colspan=&quot;2&quot; height=&quot;1&quot;></td> </tr> <tr onmouseover=&quot;DynObject.all.DynObject23.MouseOverSep(1);&quot; onmouseout=&quot;DynObject.all.DynObject23.T(350);&quot;> <td unselectable=&quot;on&quot; align=&quot;left&quot; valign=&quot;top&quot; bgcolor=&quot;#FFFFFF&quot; colspan=&quot;2&quot; height=&quot;1&quot;></td> </tr> <tr onmouseover=&quot;DynObject.all.DynObject23.MouseOverSep(1);&quot; onmouseout=&quot;DynObject.all.DynObject23.T(350);&quot;> <td unselectable=&quot;on&quot; align=&quot;left&quot; valign=&quot;botton&quot; bgcolor=&quot;#D4D0C8&quot; colspan=&quot;2&quot; height=&quot;3&quot;></td> </tr> <tr onmouseover=&quot;DynObject.all.DynObject23.MouseOver(1,'6','5');&quot; onmouseout=&quot;DynObject.all.DynObject23.MouseOut();&quot; onclick=&quot;DynObject.all.DynObject23.HP(0);&quot;> <td unselectable=&quot;on&quot; nowrap bgcolor=&quot;#D4D0C8&quot; id=&quot;cswmItem6&quot; class=&quot;cswmItem&quot;><span><img align=&quot;absmiddle&quot; id=&quot;cswmIco6&quot; src=&quot;images/btn_delete.gif&quot; alt=&quot;&quot; border=&quot;0&quot; height=&quot;16&quot; width=&quot;16&quot; name=&quot;cswmIco6&quot;> <img align=&quot;absmiddle&quot; alt=&quot;&quot; border=&quot;0&quot; height=&quot;1&quot; width=&quot;12&quot; src=&quot;../src/info/stela/gui/images/clearpixel.gif&quot;></span>Cut</td> <td unselectable=&quot;on&quot; bgcolor=&quot;#D4D0C8&quot; id=&quot;cswmExpand6&quot; class=&quot;cswmExpand&quot;><img id=&quot;cswmExpandIc6&quot; src=&quot;../src/info/stela/gui/images/Popup.gif&quot; width=&quot;10&quot; height=&quot;10&quot; alt=&quot;&quot; border=&quot;0&quot; name=&quot;cswmExpandIc6&quot;></td> </tr> <tr onmouseover=&quot;DynObject.all.DynObject23.MouseOver(1,'15');&quot; onmouseout=&quot;DynObject.all.DynObject23.MouseOut();&quot; onclick=&quot;DynObject.all.DynObject23.HP(0);DynObject.all.DynObject35.invokeEvent('click');&quot;> <td unselectable=&quot;on&quot; nowrap bgcolor=&quot;#D4D0C8&quot; id=&quot;cswmItem15&quot; class=&quot;cswmItem&quot;><span><img align=&quot;absmiddle&quot; id=&quot;cswmIco15&quot; src=&quot;../src/info/stela/gui/images/blank.gif&quot; alt=&quot;&quot; border=&quot;0&quot; height=&quot;16&quot; width=&quot;16&quot; name=&quot;cswmIco15&quot;><img align=&quot;absmiddle&quot; alt=&quot;&quot; border=&quot;0&quot; height=&quot;1&quot; width=&quot;12&quot; src=&quot;../src/info/stela/gui/images/clearpixel.gif&quot;></span>Paste</td> <td unselectable=&quot;on&quot; bgcolor=&quot;#D4D0C8&quot; id=&quot;cswmExpand15&quot; class=&quot;cswmExpand&quot;></td> </tr> </table> </div> </div> </td> </tr> </table> </div> </li></ul><ul><li>// JavaScript 25Kb enviado uma única vez // Subsequentes reloads trarão somente o JS abaixo e os reloads são desnecessários var menuBar = main.getMainMenu(); var mnufile = menuBar.addMenu('File'); { mnufile.addItem('Cv robertoPacheco','images/btn_save.gif'); mnufile.addItem('Cv marceloDomingos','images/file.gif'); } var mnuedit = menuBar.addMenu('Edit'); { mnuedit.addItem('Edit','images/btn_undo.gif'); mnuedit.addSeparator(); var mnucut = mnuedit.addMenu('Cut','images/btn_delete.gif'); { mnucut.addItem('Item 1'); mnucut.addItem('Item 2'); var mnucut_item3 = mnucut.addMenu('Item 3'); { mnucut_item3.addItem('Item 31'); mnucut_item3.addItem('Item 32'); mnucut_item3.addSeparator(); mnucut_item3.addItem('Item 33'); mnucut_item3.addItem('Item 34'); } } mnuedit.addItem('Paste'); } </li></ul>
    6. 6. Recordando: Fluxo de Desenvolvimento de Aplicações Início Protótipo das telas Implementar view Implementar Validações Complementares Integrar View e Business Modelo de dados Cliente Tema Gerador de Business Teste Teste Teste Bean Manager Persistence
    7. 7. Recordando: Partes da arquitetura ISFramework Controle da Metabiblioteca Driver – Componentes View, Layout, Foco,... Componentes Model,Gerador de Business,... Componentes “compostos” ISSearch ISExtracta Identificação ISPublish2 Design e Tema
    8. 8. Recordando: Componentes de GUI (total = 34)
    9. 9. <ul><li>Visualizadores de </li></ul><ul><li>indicadores e conteúdos. </li></ul><ul><ul><li>Perfil (buscas do Portal Inovação) </li></ul></ul><ul><ul><li>Pizza (DCVISA e SINAES) </li></ul></ul>Já utilizamos Flash - TFlashView http://solucoes.stela.org.br:8080/dcvisa/ http://vminep.stela.org.br:8080/sinaes/
    10. 10. <ul><li>Cartogramas: </li></ul><ul><ul><li>PortalInovação </li></ul></ul><ul><ul><li>DCVISA </li></ul></ul><ul><ul><li>SINAES </li></ul></ul>Já utilizamos Flash - TFlashView
    11. 11. <ul><li>Avatares: </li></ul><ul><ul><li>Portal Inovação </li></ul></ul><ul><ul><li>DCVISA </li></ul></ul><ul><ul><li>Outras apresentações ... </li></ul></ul>Já utilizamos Flash - TFlashView
    12. 12. <ul><li>Grafos: </li></ul><ul><ul><li>DCVISA </li></ul></ul>Já utilizamos Flash - TFlashView
    13. 13. <ul><li>Agentes: </li></ul><ul><ul><li>Agente de Busca do Portal Inovação (em breve Google e ISCrawler) </li></ul></ul>Já utilizamos Flash - TFlashView
    14. 14. <ul><li>Geo: </li></ul><ul><ul><li>ISGeo </li></ul></ul>Soluções em desenvolvimento <ul><ul><li>http://webdes.stela.org.br/otte/ISGEO/ISGeo . swf </li></ul></ul>
    15. 15. <ul><li>Geo: </li></ul><ul><ul><li>Cartograma 2.0 </li></ul></ul>Soluções em desenvolvimento
    16. 16. <ul><li>3D: </li></ul><ul><ul><li>3DCube </li></ul></ul>Soluções em desenvolvimento <ul><ul><li>http://webdes.stela.org.br/otte/COMPONENTES/3DCube/demo.html </li></ul></ul>
    17. 17. <ul><li>3D: </li></ul><ul><ul><li>3DGraph </li></ul></ul>Soluções em desenvolvimento <ul><ul><ul><ul><ul><li>http://webdes.stela.org.br/otte/FLASH3d/parser4c.html </li></ul></ul></ul></ul></ul>
    18. 18. Flash <ul><li>Estigma do flash </li></ul><ul><ul><li>Filmes – ferramenta de animação </li></ul></ul><ul><ul><li>Design bonito </li></ul></ul><ul><ul><li>Jogos </li></ul></ul><ul><ul><li>Ou seja, ferramenta de design </li></ul></ul><ul><li>Hoje </li></ul><ul><ul><li>Em processo de evolução ( desde a versão 6) </li></ul></ul><ul><ul><ul><li>Procura atender necessidade de aplicações web </li></ul></ul></ul><ul><ul><li>A partir da versão 9 transformou-se em uma plataforma </li></ul></ul><ul><ul><ul><li>Ambiente de compilação integrado </li></ul></ul></ul><ul><ul><ul><li>Maquina virtual robusta </li></ul></ul></ul><ul><ul><ul><li>Modelo de componentes </li></ul></ul></ul><ul><ul><li>Atende as necessidades de programadores </li></ul></ul>
    19. 19. Desvantagens do Driver DHTML <ul><li>Diferença de browsers </li></ul><ul><ul><li>Diferentes tipos de bugs </li></ul></ul><ul><li>Baixa performance </li></ul><ul><li>Falta recursos de manipulação de imagens </li></ul><ul><li>Mecanismo de comunicação não padronizada e com performance ruim </li></ul>
    20. 20. Driver Flash <ul><li>Vantagens </li></ul><ul><ul><li>Fácil atualização de versão </li></ul></ul><ul><ul><li>Muito Rápido </li></ul></ul><ul><ul><ul><li>Flash 9 10x mais rápido que o flash 8 </li></ul></ul></ul><ul><ul><ul><li>Flash 8 10x mais rápido que o Java script </li></ul></ul></ul><ul><ul><li>Tamanho pequeno </li></ul></ul><ul><ul><li>Conceito de controles </li></ul></ul><ul><ul><li>Construção de Aplicações inteiramente flash </li></ul></ul><ul><ul><li>Design mais ergonomicos </li></ul></ul><ul><ul><li>Opção de gerar aplicações em 2 tecnologias distintas </li></ul></ul><ul><li>Desvantagens </li></ul><ul><ul><li>Tempo de dedicação de alguns colaboradores para o desenvolvimento </li></ul></ul><ul><ul><li>Adaptação da célula de design a nova realidade </li></ul></ul><ul><ul><li>Escolha correta da linguagem/biblioteca flash para gerar movie clip. </li></ul></ul>
    21. 21. Decisão do Flash <ul><li>Opção 1: </li></ul><ul><ul><li>Construção de todo núcleo e biblioteca de componentes no IS </li></ul></ul><ul><li>Opção 2: </li></ul><ul><ul><li>Construção de toda a biblioteca de componentes a partir de um núcleo estável </li></ul></ul><ul><li>Opção 3 </li></ul><ul><ul><li>Partir de um núcleo e biblioteca de componentes </li></ul></ul>Linguagem Biblioteca Compilador swf Foco Controle de teclado Layout Controle de popup Comunicação Núcleo
    22. 22. Simulações Opção 1 Opção 2
    23. 23. Opção 2
    24. 24. Matriz de decisão Neoswiff Adobe open lazlo MotionTwin Knectifusion Empresa/Produto Foco, Controle de teclado, Abstração de componente Foco, Controle de teclado, Abstração de componente, layout Foco, Controle de teclado, Abstração de componente - núcleo 7.0 9.0 7.0 9.0 8.0 MV U$600 Sem código fonte, componente de qualidade Windows forms C# U$ 499 (versão básica) U$ 799 (com charts) SWF gerado com grande tamanho flex Actionscript 3.0 Open source Action script 1.0 sim Lzx Open source Boa, mas tem que construir tudo não Haxe (dilema comercial ou gratis) Excelente – xml com action script Problema de continuidade Qualquer action script RVML/Action Script2.0 custo observação biblioteca linguagem
    25. 25. Conclusão <ul><li>Necessidades: </li></ul><ul><ul><li>Tempo de 2 ou 3 colaboradores </li></ul></ul><ul><ul><li>Comprometimento de todos com a construção </li></ul></ul><ul><li>Perguntas: </li></ul><ul><ul><li>É importante para o IS ter aplicações flash? </li></ul></ul><ul><ul><li>Podemos obter contribuição de outras empresas? (Agriness, Digitro, ...) </li></ul></ul><ul><ul><li>Qual o periodo mais adequado para inicializar e finalizar o driver flash? </li></ul></ul>
    26. 26. Resultados <ul><li>É muito importante para o IS ter um driver Flash </li></ul><ul><li>Tentar obter ajuda externa para o desenvolvimento do driver Flash </li></ul><ul><li>Construção do Núcleo deve ser apenas coordenada pelo Domingos, envolvendo outros colaboradores internos e externos no seu desenvolvimento. </li></ul><ul><li>Data adequada indefinida </li></ul>
    27. 27. Anotações Frameworks Flash:
    28. 28. Macromedia Flex: <ul><li>Descrição: </li></ul><ul><ul><li>Define XML e actionscript (MXML) como linguagem de desenvolvimento. </li></ul></ul><ul><li>Site: </li></ul><ul><ul><li>http:// www.macromedia.com /software/ flex / </li></ul></ul><ul><li>Custo: </li></ul><ul><li>Demo page: </li></ul><ul><ul><li>http://www.macromedia.com/software/flex/solutions/developers/ # </li></ul></ul><ul><li>Browsers: </li></ul><ul><ul><li>qualquer browser que aceite plugin. O plugin esta disponível para várias plataformas S/H </li></ul></ul><ul><ul><li>Requer Flash 7 </li></ul></ul><ul><li>Comentários: </li></ul><ul><ul><li>A biblioteca de componentes inicial possui o tamanho de 1.400kb (mx.swc) (Versão 1.0 do framework, não sei quanto a vesão 1.5) </li></ul></ul><ul><ul><li>Se o browser não possuir a versão compatível do plug-in (7+) será baixado mais 700Kb </li></ul></ul><ul><ul><li>Uma aplicação flex parte de 120Kb se já possuir todos os componentes. </li></ul></ul><ul><ul><li>O XML da interface e os scripts são inteiramente compilados no servidor sobre demanda, embora haja um mecanismo de cache no servidor </li></ul></ul><ul><ul><li>O plugin recebe sempre a versão binária do script </li></ul></ul><ul><ul><li>Possui vários componentes de qualidade: Grid, Butões, layouts, fades, janelas modais, etc. </li></ul></ul><ul><ul><li>É possível criar novos componentes sobre a linguagem MXML </li></ul></ul><ul><ul><li>Os componentes básicos aceitam skin, mas é bem difícil configurá-los. </li></ul></ul>
    29. 29. OpenLaszlo: <ul><li>Descrição: </li></ul><ul><ul><li>Define XML e actionscript () como linguagem de desenvolvimento. </li></ul></ul><ul><li>Site: </li></ul><ul><ul><li>http://www.laszlosystems.com </li></ul></ul><ul><li>Custo: </li></ul><ul><ul><li>OpenSource, cobra-se suporte e treinamento </li></ul></ul><ul><li>Demo page: </li></ul><ul><ul><li>http://www.laszlosystems.com/lps/laszlo-in-ten-minutes/ e http://www.laszlosystems.com/developers/learn/sample-apps/ </li></ul></ul><ul><li>Browsers: </li></ul><ul><ul><li>qualquer browser que aceite plugin. O plugin esta disponível para várias plataformas S/H </li></ul></ul><ul><ul><li>Requer Flash 6 </li></ul></ul><ul><li>Comentários: </li></ul><ul><ul><li>Solução concorrente com Flex. É praticamente a mesma solução só que fornecida por outro desenvolvedor. </li></ul></ul><ul><ul><li>Componentes de qualidadE </li></ul></ul><ul><ul><li>Por utilizar a versão 6 do flash, normalmente não precisa baixar o plug-in </li></ul></ul><ul><ul><li>A biblioteca de componentes é trazida por demanda, ao invés de totalemte como no caso do Flex 1.0. </li></ul></ul><ul><ul><li>Linguagem XML orientada a objetos </li></ul></ul><ul><ul><li>Skinnable UI </li></ul></ul>
    30. 30. GhostWire: <ul><li>Descrição: </li></ul><ul><ul><li>biblioteca componentes actionscript 1.0 para uso em qualquer aplicação flash </li></ul></ul><ul><li>Site: </li></ul><ul><ul><li>http://ghostwire.com/ </li></ul></ul><ul><li>Custo: </li></ul><ul><ul><li>US$279 per single-user license </li></ul></ul><ul><li>Demo page: </li></ul><ul><ul><li>http://ghostwire.com/go/48 </li></ul></ul><ul><li>Comentários: </li></ul><ul><ul><li>Apenas uma biblioteca de componentes flash. </li></ul></ul><ul><ul><li>Para ser utilizada é necessário um compilador Flash como o da Macromedia ou KineticFusion (Open source) </li></ul></ul>
    31. 31. Neoswiff <ul><li>http://www.globfx.com/products/neoswiff/ </li></ul><ul><li>Biblioteca proprietária sem fontes </li></ul><ul><li>Empresa não respondeu e-mails de consulta </li></ul>
    32. 32. Flash <ul><li>Descrição: </li></ul><ul><ul><li>Baseado em script binário (byte code) gerado a partir da compilação de ActionScript </li></ul></ul><ul><ul><li>Funciona plugado nos browsers (todos) </li></ul></ul><ul><li>Site: </li></ul><ul><li>Custo: </li></ul><ul><ul><li>Gratuíto sem fontes </li></ul></ul>

    ×