Introdução ao Silverlight - Parte 2

Usando o Visual Studio 2005 para criar um projeto "WPF/E". O SDK do "WPF/E" inclui um modelo para o Visual Studio 2005 que permite a criação de projetos "WPF/E". Para usar esse modelo no Visual Studio 2005, você precisará do service pack 1 do Visual Studio 2005.

Por | @oficinadanet Programação

Usando o Visual Studio 2005 para criar um projeto "WPF/E"


O SDK do "WPF/E" inclui um modelo para o Visual Studio 2005 que permite a criação de projetos "WPF/E". Para usar esse modelo no Visual Studio 2005, você precisará do service pack 1 do Visual Studio 2005.

Em seguida, você precisará do Update to Support Web Application Projects, que pode ser baixado e instalado do site da Microsoft.

O Visual Studio agora está pronto para criar projetos "WPF/E". Inicie o Visual Studio IDE. Em seguida, selecione o menu File e clique em New Project (Novo projeto). Selecione WPFE na caixa Project Types (Tipos de projetos) à esquerda. Em Templates (Modelos), à direita, você verá o modelo JavaScript Application (Aplicativo JavaScript) WPF/E que é usado para criar um novo aplicativo "WPF/E" (Figura 1).

Introdução ao Silverlight - Parte 2
Figura 1. Usando o modelo do Visual Studio

Clique em OK e será aberto um novo projeto contendo uma página HTML única e um arquivo XAML representando um botão simples. É conveniente examinar o HTML para ver como ele usa o JavaScript para configurar o controle "WPF/E" (veja detalhes mais adiante) e também como o XAML expõe um evento que pode ser interceptado e manipulado no JavaScript.

Preparando um projeto do Visual Studio 2005 para "WPF/E"


Embora você possa criar um aplicativo usando o modelo da seção anterior, também é interessante entender como o "WPF/E" funciona e é entregue. Você pode ver com que facilidade um site existente pode ser configurado para implantar o módulo "WPF/E" no navegador. Nesta seção, veremos como configurar seu site manualmente para ser um site "WPF/E".

Ao escrever este white paper, usei o Visual Studio 2005 e o CTP do Orcas". Você não precisa do "Orcas", mas, se o tiver instalado, será muito mais fácil digitar o código XAML, devido ao IntelliSense e à possibilidade de visualizar o XAML concluído no designer XAML "Cider".

Observação O Cider é projetado para WPF, não para "WPF/E", portanto não deve ser usado para desenvolver o código XAML para "WPF/E" desta vez.

Para começar, inicie o Visual Studio 2005 e crie um novo site usando a caixa de diálogo New Web Site (Novo site) em File, como mostra a Figura 2.

Introdução ao Silverlight - Parte 2
Figura 2. Criando um novo site no Visual Studio 2005

O uso da caixa de diálogo New Web Site criará uma nova solução contendo uma página Default.aspx ASP.NET simples que, ao ser executada, gera HTML que será processado no navegador. Isso fornecerá a base para sua primeira página "WPF/E".

Em seguida, você deve adicionar o arquivo aghost.js ao seu site. Novamente, você pode fazer isso arrastando-o do Windows Explorer e soltando-o em sua solução. É recomendável mantê-lo (e todos os outros arquivos JavaScript) em uma pasta separada.

Finalmente, crie uma nova pasta na solução denominada XAML e copie nela o arquivo Popcan.xaml criado anteriormente.

Editando sua página da Web para processar conteúdo "WPF/E"


Em seguida, você editará sua página da Web para manipular o conteúdo "WPF/E" incorporado. Isso é muito simples, pois envolve apenas a adição de uma referência JavaScript única e uma chamada a um objeto JavaScript definido em aghost.js. As bibliotecas JavaScript e os instaladores "WPF/E" farão o restante.

Primeiro, edite sua página de forma que ela se assemelhe à Listagem 1: O título foi alterado de Untitled Page (Página sem título) para My first WPF/E Page! (Minha primeira página WPF/E); uma referência JavaScript a aghost.js foi adicionada ao cabeçalho; e um novo div contendo a chamada ao objeto agHost foi adicionado ao corpo da página.

Listagem 1. Código HTML default.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" 
Inherits="_Default" %> 





    My first WPF/E Page!</title>
    <script type="text/javascript" src="agHost.js "></script>
</head>
<body>
    <form id="form1" runat="server">
        <div id="AgControl1Host">
            <script type="text/javascript">
                new agHost("AgControl1Host", "AgControl1", "400", "400",
                "#00000000", null, "xaml/Popcan.xaml", "True", "30",
                null,0,8,5);
            </script>
        </div>
    </form>
</body>
</html></code></pre><br />
<br />
Observação A chamada JavaScript a "new AgHost" pode parecer um pouco obscura, mas não se preocupe: Você examinará isso mais adiante.<br />
<br />
Agora você está pronto para executar o aplicativo e fazer o ASP.NET gerar a página com conteúdo "WPF/E". Pressione F5 no Visual Studio 2005 para iniciar o aplicativo. Na primeira vez que você executar um aplicativo, o navegador detectará se o "WPF/E" está instalado. Se não estiver instalado, quando a página for iniciada, será exibida uma caixa de diálogo perguntando se você deseja instalar o módulo "WPF/E". O Apêndice I detalha a experiência da instalação para o Internet Explorer e o Mozilla Firefox executados no Windows.<br />
<br />
Nas próximas seções, primeiro você examinará a experiência de executar esse aplicativo no Internet Explorer e no Mozilla Firefox. Depois disso, você examinará o objeto JavaScript que controla o "WPF/E", além de adicionar animação à sua imagem.<br />
<br />
<h2>Compreendendo o JavaScript</h2><br />
A seguir está o código JavaScript que incorporou esse XAML na página usando o "WPF/E".<br />
<br />
<pre><code>new agHost("AgControl1Host", "AgControl1", "400", "400", "#00000000", 
"xaml/Popcan.xaml", "True", "30", null,0,8,5);</code></pre> <br />
<br />
Isso cria uma nova instância do plug-in "WPF/E", usando uma lista de parâmetros que podem ser usados para criá-lo. Esses parâmetros são (em ordem):<br />
<br />
<strong>hostElementID</strong>: É o nome do elemento HTML em que o controle plug-in será hospedado. Portanto, se você tiver um < div > na página que contém o plug-in, dê um nome ao < div > e use esse nome aqui.<br />
<br />
<strong>controlID</strong>: É o identificador do próprio plug-in.<br />
<br />
<strong>height</strong>: É a altura desejada do controle em pixels.<br />
<br />
<strong>width</strong>: É a largura desejada do controle em pixels.<br />
<br />
<strong>backgroundColor</strong>: É a cor do plano de fundo desejada para o controle.<br />
<br />
<strong>sourceElement</strong>: É o nome do elemento da página que contém o XAML para o controle. Essa é uma forma de configurar o XAML para o controle ? onde o XAML está na página ? contido em um elemento < script >. Se utilizar essa abordagem, coloque o identificador do elemento < script > nesse parâmetro, de onde o controle o retirará.<br />
<br />
<strong>sourceURL</strong>: É a localização de um arquivo XAML externo.<br />
<br />
<strong>isWindowless</strong>: Isso é booleano. Defina-o como True se desejar que o controle "WPF/E" não tenha janelas. Isso significa que, em uma página HTML, o controle "WPF/E" será embutido no HTML e, por exemplo, se você o definir para ser transparente, o HTML será exibido "atrás" dele. Se não for sem janelas (ou seja, se for definido como False), o conteúdo "WPF/E" ficará em uma área distinta da página e a marcação HTML fluirá ao redor.<br />
<br />
<strong>maxFrameRate</strong>: É um número que especifica a taxa máxima de quadros em que o "WPF/E" processará o conteúdo animado.<br />
<br />
<strong>loadHandler</strong>: É o nome de um elemento < script > na página a ser lançado quando o controle for carregado.<br />
<br />
<strong>errorHandler</strong>: É o nome de um elemento < script > na página a ser lançado quando ocorrer um erro no controle.<br />
<br />
Quando você cria uma nova instância de um controle agHost usando esses parâmetros, é feita uma chamada a agHost.js (portanto, você precisará de uma referência de script para este arquivo em seu HTML), que gera a marca < object > em que reside o controle. Portanto, no caso anterior, a marca < object > seguinte será gerada, se você estiver usando o Internet Explorer.<br />
<br />
<pre><code><object id="AgCotnrol1" height="400" width="400"
    Codebase="install/xcpctrl.cab"
    classid="CLSID:32C73088-76AE-40F7-AC40-81F62CB2C1DA">
    <param name="Source" value="xaml/Popcan.xaml" />
    <param name="MaxFrameRate" value="30" />
    <param name="BackgroundColor" value="#00000000" />
    <param name="WindowlessMode" value="True" />
</object></code></pre>	<br />
<br />
Se preferir, você poderá sempre usar esse código diretamente em sua página. Entretanto, o uso do objeto JavaScript é muito mais detalhado e não sobrecarrega sua página HTML nos detalhes da implementação da marca < object >.<br />
<br />
Fonte: <a onclick="_gaq.push(['_trackEvent', 'link_externo', 'de_post-POSTURI', 'para_url_http://msdn.microsoft.com/pt-br/library/cc580591.aspx']);"   target="_blank"   href="https://www.oficinadanet.com.br/redirect.php?tipo=postout&urlout=http%3A%2F%2Fmsdn.microsoft.com%2Fpt-br%2Flibrary%2Fcc580591.aspx" rel="nofollow" >MSDN</a></p></p><script src="https://painel.m3midia.com.br/lib/prism/prism.js"></script><link rel="stylesheet" type="text/css" href="https://painel.m3midia.com.br/lib/prism/prism.css"></p>
                    </div> 
                </div>
                <div class="wifl assuntosfim">
                    <div class="box_new_cmt btag">
                        <span class="tit_new_cmt">MAIS SOBRE</span>
                        <a onclick="_gaq.push(['_trackEvent', 'assuntosfim', 'pfr1994', 'para_silverlight']);"  href="https://www.oficinadanet.com.br/silverlight" >silverlight</a>
                    </div>
                    <div class="box_new_cmt bshr">
                        <span class="tit_new_cmt" style="margin-right:0">SHARE</span>
                        <div class="share" >
                            <span style="width:15px;" class="bt1-facebook bg9"  onclick="  window.open('https://www.facebook.com/sharer/sharer.php?app_id=209309632417494&u=https%3A%2F%2Fwww.oficinadanet.com.br%2Fartigo%2Fdesenvolvimento%2Fintroducao_ao_silverlight_-_parte_2','','width=600,height=400');  _gaq.push(['_trackEvent', 'btshare', 'facebook', 'https://www.oficinadanet.com.br/artigo/desenvolvimento/introducao_ao_silverlight_-_parte_2']);  ajaxDireto('https://www.oficinadanet.com.br/ajax_oficina.php','act=flgcomment&id=1994','flgcomment');  "  title="Compartilhe no Facebook" ></span>
                            <span style="width:15px;" class="bt1-twitter bg8"  onclick="  window.open('https://twitter.com/intent/tweet?text=Introdu%C3%A7%C3%A3o+ao+Silverlight+-+Parte+2&url=https%3A%2F%2Fwww.oficinadanet.com.br%2Fartigo%2Fdesenvolvimento%2Fintroducao_ao_silverlight_-_parte_2&via=oficinadanet','','width=600,height=400');  _gaq.push(['_trackEvent', 'btshare', 'twitter', 'https://www.oficinadanet.com.br/artigo/desenvolvimento/introducao_ao_silverlight_-_parte_2']);  ajaxDireto('https://www.oficinadanet.com.br/ajax_oficina.php','act=flgcomment&twitter=1&id=1994','flgcomment');  "  title="Enviar pro Twitter" ></span>
                            <span class="bt1-whatsapp bg24"  _gaq.push(['_trackEvent', 'btshare', 'whatsapp', 'https://www.oficinadanet.com.br/artigo/desenvolvimento/introducao_ao_silverlight_-_parte_2']);  onclick="  window.open('https://api.whatsapp.com/send?text=Introdução ao Silverlight - Parte 2 - https%3A%2F%2Fwww.oficinadanet.com.br%2Fartigo%2Fdesenvolvimento%2Fintroducao_ao_silverlight_-_parte_2');  "  style="width:15px;" title="Envie para o WhatsApp"></span>
                            <span class="bt1-telegram bg8"  _gaq.push(['_trackEvent', 'btshare', 'telegram', 'https://www.oficinadanet.com.br/artigo/desenvolvimento/introducao_ao_silverlight_-_parte_2']);  onclick="  window.open('https://telegram.me/share/url?url=https%3A%2F%2Fwww.oficinadanet.com.br%2Fartigo%2Fdesenvolvimento%2Fintroducao_ao_silverlight_-_parte_2&text=Introdu%C3%A7%C3%A3o+ao+Silverlight+-+Parte+2');  ajaxDireto('https://www.oficinadanet.com.br/ajax_oficina.php','act=flgcomment&id=1994','flgcomment');  "  style="width:15px;" title="Envie para o Telegram"></span>
                            <span class="bt1-linkedin bg27"  onclick="  window.open('https://www.linkedin.com/shareArticle?mini=true&url=https%3A%2F%2Fwww.oficinadanet.com.br%2Fartigo%2Fdesenvolvimento%2Fintroducao_ao_silverlight_-_parte_2&summary=Usando+o+Visual+Studio+2005+para+criar+um+projeto+%26quot%3BWPF%2FE%26quot%3B.+O+SDK+do+%26quot%3BWPF%2FE%26quot%3B+inclui+um+modelo+para+o+Visual+Studio+2005+que+permite+a+cria%C3%A7%C3%A3o+de+projetos+%26quot%3BWPF%2FE%26quot%3B.+Para+usar+esse+modelo+no+Visual+Studio+2005%2C+voc%C3%AA+precisar%C3%A1+do+service+pack+1+do+Visual+Studio+2005.&title=Introdu%C3%A7%C3%A3o+ao+Silverlight+-+Parte+2&source=oficinadanet','','width=600,height=400');  _gaq.push(['_trackEvent', 'btshare', 'linkedin', 'https://www.oficinadanet.com.br/artigo/desenvolvimento/introducao_ao_silverlight_-_parte_2']);  ajaxDireto('https://www.oficinadanet.com.br/ajax_oficina.php','act=flgcomment&id=1994','flgcomment');  "  style="width:15px;" title="Envie para o LinkedIn"></span>
                            <span class="bt1-mail bg14"  onclick="  document.location='mailto:?subject=Introdução ao Silverlight - Parte 2&body=Artigo: https%3A%2F%2Fwww.oficinadanet.com.br%2Fartigo%2Fdesenvolvimento%2Fintroducao_ao_silverlight_-_parte_2';  _gaq.push(['_trackEvent', 'btshare', 'email', 'https://www.oficinadanet.com.br/artigo/desenvolvimento/introducao_ao_silverlight_-_parte_2']);  ajaxDireto('https://www.oficinadanet.com.br/ajax_oficina.php','act=flgcomment&id=1994','flgcomment');  "  style="width:15px;" title="Enviar por email" ></span>
                        </div>
                    </div>
                </div>
                <script type="text/javascript">try { _402_Show(); } catch(e) {}</script>
            </div>  
        <div class="bar2 p-rel" id="out_post_barra" data-distance="30" >
            <div class="bar2" id="post_barra" ><!-- /6524261/ON_300x600_LATERAL -->
                <div class='wifl m-b-40'>
                <div id='div-gpt-ad-1519730196190-0' style='height:600px; width:300px;'>
                <script>
                googletag.cmd.push(function() { googletag.display('div-gpt-ad-1519730196190-0'); });
                </script>
                </div></div>      
        </div>
    </div>
<div class="wifl bottom_pause_post_barra"><div style="float:left;">
<div style="width: 300px; float: left;">
<!-- /6524261/ON_FOOTER -->
<div id="div-gpt-ad-1512402583744-0" style="height:250px; width:300px;">
<script>
googletag.cmd.push(function() { googletag.display("div-gpt-ad-1512402583744-0"); });
</script>
</div>
</div></div>
    <div style="float:left; max-width:750px; margin-left:20px" class="wifl"><span class="titulo1" ><span>O QUE LER EM SEGUIDA</span></span><ul class="lst4 post wifl  lsn "  id=""  ><li  >
                            <a class="" href="https://www.oficinadanet.com.br/whatsapp/23268-whatsapp-limita-envio-de-mensagens-para-combater-fake-news"  onclick="_gaq.push(['_trackEvent', 'oq_ler_conteudo_relacionado', 'pfr1994', 'pto23268']);"  >
                                <div class="img box-img2">
                                    <span class="label_tpl1 fix-bl bg1">WhatsApp</span>
                                    <img src="https://www.oficinadanet.com.br/imagens/post/23268/wha_200113.jpg" title="WhatsApp limita envio de mensagens para combater fake news" alt="WhatsApp limita envio de mensagens para combater fake news" >
                                    <span class="gradient"></span>
                                </div>
                                <h3 class="wifl tit4">WhatsApp limita envio de mensagens para combater fake news</h3>
                                <div class="wifl nfo">
                                    <span class="comment cinza">0 | </span><span class="ass-autor cor2">por Fernanda Beling</span></div>
                            </a>
                        </li><li  >
                            <a class="" href="https://www.oficinadanet.com.br/nokia/23267-nokia-61-plus-e-revelado-como-versao-do-nokia-6"  onclick="_gaq.push(['_trackEvent', 'oq_ler_conteudo_relacionado', 'pfr1994', 'pto23267']);"  >
                                <div class="img box-img2">
                                    <span class="label_tpl1 fix-bl bg1">Nokia</span>
                                    <img src="https://www.oficinadanet.com.br/imagens/post/23267/nokia-6-1-plus-benchmark-listing-reveals-mid-range-hardware-android-8-1-0-oreo_750x469_5b521b6b28898_200113.jpg" title="Nokia 6.1 Plus é revelado como versão do Nokia 6" alt="Nokia 6.1 Plus é revelado como versão do Nokia 6" >
                                    <span class="gradient"></span>
                                </div>
                                <h3 class="wifl tit4">Nokia 6.1 Plus é revelado como versão do Nokia 6</h3>
                                <div class="wifl nfo">
                                    <span class="comment cinza">0 | </span><span class="ass-autor cor2">por Rafaela Pozzebom</span></div>
                            </a>
                        </li><li  >
                            <a class="" href="https://www.oficinadanet.com.br/smartphones/23266-iphone-e-galaxy-lideram-ranking-de-celulares-usados"  onclick="_gaq.push(['_trackEvent', 'oq_ler_conteudo_relacionado', 'pfr1994', 'pto23266']);"  >
                                <div class="img box-img2">
                                    <span class="label_tpl1 fix-bl bg1">Smartphones</span>
                                    <img src="https://www.oficinadanet.com.br/imagens/post/23266/capa-sam_200113.jpg" title="iPhone e Galaxy lideram ranking de celulares usados" alt="iPhone e Galaxy lideram ranking de celulares usados" >
                                    <span class="gradient"></span>
                                </div>
                                <h3 class="wifl tit4">iPhone e Galaxy lideram ranking de celulares usados</h3>
                                <div class="wifl nfo">
                                    <span class="comment cinza">0 | </span><span class="ass-autor cor2">por Fernanda Beling</span></div>
                            </a>
                        </li><li  >
                            <a class="" href="https://www.oficinadanet.com.br/tesla/23071-a-historia-da-tesla"  onclick="_gaq.push(['_trackEvent', 'oq_ler_conteudo_relacionado', 'pfr1994', 'pto23071']);"  >
                                <div class="img box-img2">
                                    <span class="label_tpl1 fix-bl bg1">Tesla</span>
                                    <img src="https://www.oficinadanet.com.br/imagens/post/23071/capa_200113.jpg" title="A história da Tesla, Musk e como eles estão revolucionando o planeta" alt="A história da Tesla, Musk e como eles estão revolucionando o planeta" >
                                    <span class="gradient"></span>
                                </div>
                                <h3 class="wifl tit4">A história da Tesla, Musk e como eles estão revolucionando o planeta</h3>
                                <div class="wifl nfo">
                                    <span class="comment cinza">0 | </span><span class="ass-autor cor2">por Maximiliano Meyer</span></div>
                            </a>
                        </li></ul>
    </div>
</div>  
        <div class="wifl post-bottom1" style="margin:0">
            
        <div id="comment" class="wifl post-bottom1" >
            <span class="titulo1 tit_tag" ><span>Comentários</span></span>
                <div id="comment" class="comentarios_box">
                    <div id="disqus_thread"></div>
                </div>
        </div>
        </div>
        
        
        <div class="wifl post-bottom1 ult-publi" ><a class="titulo1 m-t-40" href="https://www.oficinadanet.com.br"  ><span>Destaques</span><span class="ver" >ver tudo</span></a>
                        <div class="content3" ><ul class="lst7 home wifl  lsn "  id=""  ><li  >
                            <a href="https://www.oficinadanet.com.br/windows10/23226-como-transferir-sua-licenca-do-windows-10-para-um-novo-computador" class="wifl" >
                                <div class="outimg wifl p-rel" >
                                    <div class="img box-img2">
                                        <img src="https://www.oficinadanet.com.br/imagens/post/23226/windows-10_500312.jpg" title="Como transferir sua  licença do Windows 10 para um novo computador" alt="Como transferir sua  licença do Windows 10 para um novo computador" >
                                        <span class="gradient"></span>
                                    </div>
                                    <span class="label_tpl1 bg2 cor1" >Windows 10</span>
                                </div>
                                <h2 class="wifl tit7" >Como transferir sua  licença do Windows 10 para um novo computador</h2>
                                <div class="wifl" ><span class="ass-autor cor2" >por Priscilla Kinast</span>
                                </div>
                            </a>
                        </li><li  >
                            <a href="https://www.oficinadanet.com.br/post/14328-20-sites-totalmente-inuteis-e-muito-divertidos" class="wifl" >
                                <div class="outimg wifl p-rel" >
                                    <div class="img box-img2">
                                        <img src="https://www.oficinadanet.com.br/imagens/post/14328/20_200113.jpg" title="20 sites totalmente inúteis (e muito divertidos)" alt="20 sites totalmente inúteis (e muito divertidos)" >
                                        <span class="gradient"></span>
                                    </div>
                                    <span class="label_tpl1 bg2 cor1" >Entretenimento</span>
                                </div>
                                <h2 class="wifl tit7" >20 sites totalmente inúteis (e muito divertidos)</h2>
                                <div class="wifl" ><span class="ass-autor cor2" >por Maximiliano Meyer</span>
                                </div>
                            </a>
                        </li><li  >
                            <a href="https://www.oficinadanet.com.br/huawei/23203-os-5-melhores-telefones-da-huawei-de-2018" class="wifl" >
                                <div class="outimg wifl p-rel" >
                                    <div class="img box-img2">
                                        <img src="https://www.oficinadanet.com.br/imagens/post/23203/p20_200113.jpg" title="Os 5 melhores smartphones da Huawei para comprar em 2018" alt="Os 5 melhores smartphones da Huawei para comprar em 2018" >
                                        <span class="gradient"></span>
                                    </div>
                                    <span class="label_tpl1 bg2 cor1" >Huawei</span>
                                </div>
                                <h2 class="wifl tit7" >Os 5 melhores smartphones da Huawei para comprar em 2018</h2>
                                <div class="wifl" ><span class="ass-autor cor2" >por Priscilla Kinast</span>
                                </div>
                            </a>
                        </li></ul></div>
                        <div class="content4" ><ul class="lst2 lst2 home2 wifl  lsn "  id=""  ><li  >
                            <a class="" href="https://www.oficinadanet.com.br/whatsapp/23221-como-converter-mensagem-de-audio-recebido-em-texto-no-whatsapp" >
                                    <div class="box-img2" >
                                        <img src="https://www.oficinadanet.com.br/imagens/post/23221/converter-audio-em-texto-whatsapp_200113.jpg" title="Como converter mensagem de áudio recebido em texto no WhatsApp" alt="Como converter mensagem de áudio recebido em texto no WhatsApp" >
                                    </div>  <div class="info"><span class="label_tpl1 bg1">WhatsApp</span>
                                    <h2 class="tit2 wifl">Como converter mensagem de áudio recebido em texto no WhatsApp</h2>
                                    <div class="wifl"><span class="ass-autor"> por Priscilla Kinast</span>
                                    </div>
                                </div>
                                <span class="gradient"></span>
                            </a>
                        </li>
                        </ul></div></div>
    </section><div class="wifl">
<div class="wifl" >
    <div class="content-fix content10 bg2" >
        <!-- /6524261/ON_BLOCOFIM -->
        <div id="div-gpt-ad-1489748718845-0" style="height:250px; margin:auto; width:970px;">
        <script>
        googletag.cmd.push(function() { googletag.display("div-gpt-ad-1489748718845-0"); });
        </script>
        </div>
    </div>
</div></div>
</div>
                <script type="text/javascript">
                    var disqus_shortname = 'oficinadanet'; // required: replace example with your forum shortname
                    var disqus_url = 'https://www.oficinadanet.com.br/artigo/desenvolvimento/introducao_ao_silverlight_-_parte_2';

                    var disqus_config = function () {
                        this.callbacks.onNewComment = [function(comment) {ajaxDireto('https://www.oficinadanet.com.br/ajax_oficina.php','act=flgcomment&id=1994','flgcomment');
                        }];
                    };
                (function() {
                    var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
                    dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
                    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
                })();        
                </script>
                <div style="display:none;" id="flgcomment"></div>   <!-- advertising 4TpJ9Me3Sia7qHJi9IM3odw5jJ_2hupbH48Ifjbng_aL0ZNxVUTj4-ltldS-hvBNbqaBGbAM-deLE4JswQFNbQ==-->
    <script data-cfasync="false"  id="clevernt" type="text/javascript">
    (function (document, window) {
        var c = document.createElement("script");
        c.type = "text/javascript";
        c.async = !0;
        c.src = "//clevernt.com/scripts/49eda678410baaf060c3a7dad9cff960.min.js?20180622=" + Math.floor((new Date).getTime());
        var a = !1;
        try {
            a = parent.document.getElementsByTagName("script")[0] || document.getElementsByTagName("script")[0];
        } catch (e) {
            a = !1;
        }
        a || ( a = document.getElementsByTagName("head")[0] || document.getElementsByTagName("body")[0]);
        a.parentNode.insertBefore(c, a);
    })(document, window);
    </script>
    <!-- end advertising --></div>
                </section>
<footer class="footer wifl" id="footer">
    <div class="corpo">
        <a href="https://www.oficinadanet.com.br" class="logo2"></a>
        <div class="out-menu-footer">
            <ul class="menu-footer lst-footer1 wifl">
                <li><a href="https://www.oficinadanet.com.br/sobre">Sobre</a></li>
                <li><a href="https://www.oficinadanet.com.br/contato">Contato</a></li>
                <li><a href="https://www.oficinadanet.com.br/colunista" >Seja colunista</a></li>
                <li><a href="https://www.oficinadanet.com.br/privacidade" >Política de Privacidade</a></li>
                <li><a href="https://www.oficinadanet.com.br/equipe" >Equipe</a></li>
            </ul>
            <ul class="menu-footer wifl">
                <li><a target="_blank" rel="nofollow" href="https://www.facebook.com/oficinadanet">Facebook</a></li>
                <li><a target="_blank" rel="nofollow" href="https://www.youtube.com/user/oficinadanettv">Youtube</a></li>
                <li><a target="_blank" rel="nofollow" href="https://www.linkedin.com/company/oficinadanet">LinkedIn</a></li>
                <li><a target="_blank" rel="nofollow" href="https://twitter.com/OficinadaNet">Twitter</a></li>
                <li><a target="_blank" rel="nofollow" href="https://www.instagram.com/oficinadanetoficial/">Instagram</a></li>
                <li><a rel="nofollow" href="https://www.oficinadanet.com.br/rss">RSS</a></li>
            </ul>
        </div>
        <div class="out-menu-cupons">
            <span>Cupons de desconto</span>
            <ul class="lst_cupons wifl lsn">
                <li><a href="https://www.oficinadanet.com.br/cupons/cupom-de-desconto-netshoes">Cupons Netshoes</a></li>
                <li><a href="https://www.oficinadanet.com.br/cupons/cupom-de-desconto-saraiva">Cupons Saraiva</a></li>
                <li><a href="https://www.oficinadanet.com.br/cupons/cupom-de-desconto-livraria-cultura">Cupons Livraria Cultura</a></li>
                <li><a href="https://www.oficinadanet.com.br/cupons/cupom-de-desconto-fast-shop">Cupons Fast Shop</a></li>
                <li><a href="https://www.oficinadanet.com.br/cupons/cupom-de-desconto-extra">Cupons Extra</a></li>
                <li><a href="https://www.oficinadanet.com.br/cupons/cupom-de-desconto-sou-barato">Cupons Sou Barato</a></li>
            </ul>
        </div>
        <div class="box-m3"  >
            <p class="wifl txt1">Um site do grupo</p>
            <a class="m3midia" href="http://www.m3midia.com.br"></a>
            <p class="wifl txt2">© 2018 <span>M3 Mídia</span></p>
            <p class="wifl txt2">Todos os direitos reservados</p>
        </div>
    </div>
</footer>
            <span title="Ir para o topo" class="top_page" id="top_page" ><span></span></span>
        <script type='text/javascript'>
                var tempo = '1800';
                window.setTimeout('location.reload();', tempo*1000);
                </script>
                <div class="wifl hgt100 blackoverlay" id="blackoverlay"></div>
<div style="display:none" id="flgcomment"></div>
<div id="out_lib" >
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</div>
<script type="text/javascript">
    
    var vv={_keyStr:"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",encode:function(e){var t="";var n,r,i,s,o,u,a;var f=0;e=vv._utf8_encode(e);while(f<e.length){n=e.charCodeAt(f++);r=e.charCodeAt(f++);i=e.charCodeAt(f++);s=n>>2;o=(n&3)<<4|r>>4;u=(r&15)<<2|i>>6;a=i&63;if(isNaN(r)){u=a=64}else if(isNaN(i)){a=64}t=t+this._keyStr.charAt(s)+this._keyStr.charAt(o)+this._keyStr.charAt(u)+this._keyStr.charAt(a)}return t},decode:function(e){var t="";var n,r,i;var s,o,u,a;var f=0;e=e.replace(/[^A-Za-z0-9\+\/\=]/g,"");while(f<e.length){s=this._keyStr.indexOf(e.charAt(f++));o=this._keyStr.indexOf(e.charAt(f++));u=this._keyStr.indexOf(e.charAt(f++));a=this._keyStr.indexOf(e.charAt(f++));n=s<<2|o>>4;r=(o&15)<<4|u>>2;i=(u&3)<<6|a;t=t+String.fromCharCode(n);if(u!=64){t=t+String.fromCharCode(r)}if(a!=64){t=t+String.fromCharCode(i)}}t=vv._utf8_decode(t);return t},_utf8_encode:function(e){e=e.replace(/\r\n/g,"\n");var t="";for(var n=0;n<e.length;n++){var r=e.charCodeAt(n);if(r<128){t+=String.fromCharCode(r)}else if(r>127&&r<2048){t+=String.fromCharCode(r>>6|192);t+=String.fromCharCode(r&63|128)}else{t+=String.fromCharCode(r>>12|224);t+=String.fromCharCode(r>>6&63|128);t+=String.fromCharCode(r&63|128)}}return t},_utf8_decode:function(e){var t="";var n=0;var r=c1=c2=0;while(n<e.length){r=e.charCodeAt(n);if(r<128){t+=String.fromCharCode(r);n++}else if(r>191&&r<224){c2=e.charCodeAt(n+1);t+=String.fromCharCode((r&31)<<6|c2&63);n+=2}else{c2=e.charCodeAt(n+1);c3=e.charCodeAt(n+2);t+=String.fromCharCode((r&15)<<12|(c2&63)<<6|c3&63);n+=3}}return t}}
    function BV(str){return vv.decode(str);}

    function scrollPageToID(id)
    {
        $('html,body').animate({ scrollTop: $('#'+id).offset().top - ( $(window).height() - $('#'+id).outerHeight(true) ) / 2  }, 700);
    }

    function serializeDataAttr(form)
    {
        var dataarr = new Array();
        for(var i in form.data()) {
            var subarr = new Array();
            subarr['name'] = i;
            subarr['value'] = form.data()[i];
            dataarr.push(subarr);
        }
        return $.param(form.serializeArray().concat(dataarr));
    }

    function testaVazio(campo,comparacao,mensagem,erro)
    {
        if (erro == true) {return true;}
        if (document.getElementById(campo).value == comparacao)
        {
            alert (mensagem);
            document.getElementById(campo).value = "";
            document.getElementById(campo).focus();
            return true;
        }
        else {return false;}
    }
    function testaCheckBox(classe,mensagem)
    {
        erro = true;
        checkboxes = document.getElementsByClassName(classe);

        for(var i=0, n=checkboxes.length; i<n; i++)
        {
            if(checkboxes[i].checked)
                erro = false;
        }

        if(erro == true)
        {
            alert(mensagem);
            checkboxes[0].focus();
            return true;
        }
        else
            return false;
  }
    function ajaxDireto(url,param,retorno,tipo) //usa jquery
    {
        if(!tipo) tipo = "POST"
         $.ajax({
           type: tipo,
           url: url,
           data: param,
           success: function(html){
             $("#"+retorno).html(html);
           }
         });

    }

    function newsletterCad(e,step)
    {
//        alert(step);
//        alert(e);

        if(step == 1)
        {
            alert('1');
            $(e+' .out_captcha').html('<div class="wifl p-rel newsbrandcap" id="brand_cap_widget_wrapper" ><span class="load-ico" ></span></div><script type="text/javascript" src="https://api.pontamedia.net/challenge.php?k=8f8436b8ae2f804f336e902439085b08a914db96"></script'+'>');
            alert('2');
//            $('#news_bb_right_plan').css('left','-306px');
        }
        else
        {
            /*
            ajaxDireto('',$('#newscad_form1').serialize()+'&'+$('#newscad_form2').serialize(),'out_new_cad');
            */
        }
    }

    function populaSelectCidade(ele)
    {
        ajaxDireto('https://www.oficinadanet.com.br/ajax_oficina.php','act=populaSelectCidade&sigla='+$(ele).val(),'select_cidade');
    }

    $(document).ready(function (e) {
       var header_height = $("header").height();
       $(window).scroll(function(){
           var scrolltop = $(window).scrollTop();
           if(scrolltop > 0)
               $('#out-img-curso-aberto').css('top',(($(window).scrollTop()/2) *-1) + header_height);
           else
               $('#out-img-curso-aberto').css('top',header_height+'px');
       });
    });

    var scroll_aux      = 0;
    var header_top      = $("#header").offset().top;
    var header_height   = $("#header").outerHeight();
    var window_height   = $(window).height();
    var height_document = $(document).height();

    function fixedMenu()
    {
        var scroll = $(window).scrollTop();

        if( scroll >= (header_top+header_height) )
        {
            if(scroll < scroll_aux )
            {
                $('#mov_header').css({'position':'fixed',transition: '0.3s','top':'0px'});
            }
            else
            {
                if( (scroll+window_height+20) > height_document )
                {
                    $('#mov_header').css({'position':'fixed',transition: '0.3s','top':'0px'});
                }
                else
                {
                    var v_tra  = '0.3s';
                    if( scroll <= ( header_top + header_height + 100) )
                        v_tra  = '0s';

                    $('#mov_header').css({'position':'fixed',transition: v_tra,'top':'-'+header_height+'px'});
                }
            }
        }
        else if(scroll <= header_top)
        {
            $('#mov_header').css({'position':'absolute',transition: '0.3s','top':'0px'});

        }
        scroll_aux = scroll;
    }

    function boxHoverSite(act,cic,e)
    {
        var top     = $(e).offset().top+$(e).outerHeight();
        var e_hover = '';

        if($(e).data('box-hover'))
        {
            e_hover = '#'+$(e).data('box-hover')+'_hover';

            switch(act)
            {
                case 2:
                    $('.contr_hov_itens').fadeOut(0);
                    $(e_hover).fadeIn(400);
                    $(e_hover).addClass('contr_hov_itens');
                    boxHoverSite(0,0,e);
                break;
                case 0:
                    if(cic < 5)
                    {
                        var timeBoxHoverSite = setTimeout(function()
                        {
                            cic++;
                            boxHoverSite(0,cic,e);
                        }, 500);
                    }
                    else
                    {
                        clearTimeout(timeBoxHoverSite);
                        if(!$(e_hover).is(":hover") && !$(e).is(":hover") && !$(e_hover+' *').is(":focus"))
                        {
                            $(e_hover).fadeOut(400);
                        }
                        else
                            boxHoverSite(0,0,e);
                    }

                break;
            }
        }
        else
        {
            $('.contr_hov_itens').fadeOut(0);
        }
    }

    function blackoverlay(act)
    {
        if(act)
        {
            $('#blackoverlay').fadeIn(400);
            $('html').addClass('no_scroll');
        }
        else
        {
            $('#blackoverlay').fadeOut(400);
            $('html').removeClass('no_scroll');
        }
    }

    function actAovivo()
    {
        window.location = "";
    }

    function actBodyPago()
    {
        window.open("");
    }

    function actMenuMobile(act)
    {
        if(act)
        {
            $('#blackoverlay').addClass('blackoverlay_mobile').trigger('classChange');

            if(!$('#menumobile-act').data('post-left'))
            {
                $('#menumobile-act').data('post-left',$('#menumobile-act').css('left'));
            }
            $('#menumobile-act').css('left','0');
            $('#menumobile').css('display','none');
            $('#fechar_menumobile').css('display','block');
        }
        else
        {
            $('#menumobile-act').css('left',$('#menumobile-act').data('post-left'));
            $('#blackoverlay').removeClass('blackoverlay_mobile').trigger('classChange');
            $('#menumobile').css('display','block');
            $('#fechar_menumobile').css('display','none');
        }
        blackoverlay(act);
    }

    function actAbreComments(act)
    {
        if(act)
        {
            var post_id        = $('#bt_new_cmt').data('post_id');
            var url            = $('#bt_new_cmt').data('url');
            var tipo           = $('#bt_new_cmt').data('tipo');
            var comentariosnrs = $('#bt_new_cmt').data('comentariosnrs');
            
            if($("#box_new_cmt_retorno").html() == '')
            {
                ajaxDireto('https://www.oficinadanet.com.br/ajax_oficina.php','act=getCommentsBox&post_id='+post_id+'&url='+url+'&tipo='+tipo+'&comentariosnrs='+comentariosnrs,'box_new_cmt_retorno');
                ajaxDireto('https://www.oficinadanet.com.br/ajax_oficina.php','act=flgcomment&id='+post_id,'flgcomment');
            }
            
            $('#box_new_cmt_open').css('right','0');
            $('#bt_new_cmt_orelha').css('display','none');
            $('#bt_new_cmt_orelha_close').css('display','block');
            $('#bt_new_cmt_orelha_close').css('left','-30px');
        }
        else
        {
            var window_width = $(window).width();
            var right        = 'calc(-37% - 15px)';
            
            if(window_width < 1400)
            {
                right = '-330px';
            }
            
            $('#box_new_cmt_open').css('right',right);
            $('#bt_new_cmt_orelha_close').css('display','none');
            $('#bt_new_cmt_orelha').css('display','block');
            $('#bt_new_cmt_orelha').css('left','-43px');
        }
    }
    
    function actPopup(act,tipo)
    {
        if(act == 'fechar')
        {
            ajaxDireto('https://www.oficinadanet.com.br/ajax_oficina.php','act=setCookie&nome='+tipo+'&valor=1','box_popup');
            $('#box_popup').css('display','none');
            $('#box_popup_big').css('display','none');
            $('#box_popup_mobile').css('display','none');
            blackoverlay();
        }
    }

    function actSmartMobile(act)
    {
        if(act)
        {
            $('#blackoverlay').addClass('blackoverlay_smart').trigger('classChange');

            if(!$('#smart_filtro_m-act').data('post-left'))
            {
                $('#smart_filtro_m-act').data('post-left',$('#smart_filtro_m-act').css('left'));
            }
            $('#smart_filtro_m-act').css('left','0');
            $('#smart_filtro_m_abre').css('display','none');
            $('#smart_filtro_m_fecha').css('display','block');
            $('#smart_filtro_ud_out').css('display','block');
        }
        else
        {
            $('#smart_filtro_m-act').css('left',$('#smart_filtro_m-act').data('post-left'));
            $('#blackoverlay').removeClass('blackoverlay_smart').trigger('classChange');
            $('#smart_filtro_m_abre').css('display','block');
            $('#smart_filtro_m_fecha').css('display','none');
            $('#smart_filtro_ud_out').css('display','none');
        }
        blackoverlay(act);
    }

    
    var scroll_aux2     = 0;
    var window_width    = $(window).width();

    function fixedOnScroll(id)
    {
        if ($('#' + id).length > 0)
        {
            if( window_width > 1300 )
            {

                var k_distance      = 10;
                var comp_height     = 0;
                var scroll_top      = $(window).scrollTop();
                var height_maior    = false;
                var bottom_pause    = height_document;

                var anchor_top_dist     = $('#' + id).offset().top;
                var item_movel_height   = $('#' + id + ' > *').height();

                if($( ".bottom_pause_post_barra" ).length)
                {
                    bottom_pause =  $( ".bottom_pause_post_barra" ).offset().top - ( k_distance + header_height + item_movel_height + parseInt($( ".bottom_pause_post_barra" ).css('margin-top')));
                }

                console.log('3 '+item_movel_height+' '+bottom_pause+' '+scroll_top+' '+scroll_aux2+' '+scroll_aux+' conta: '+(bottom_pause - scroll_top));
                
                //console.log('4 '+(bottom_pause - scroll_top) +' --- '+ anchor_top_dist);
                
                if( ( bottom_pause - scroll_top) < 0  ) //chega ao fim
                {
                    $('#' + id + ' > *').css({
                        "z-index": "100",
                        "left": 'initial',
                        "position": "fixed",
                        "bottom": "initial",
                        "transition":" 0s",
                        "top": (  (bottom_pause + k_distance + header_height) - scroll_top   )+'px'
                    });

                }
                else if ((scroll_top + k_distance + header_height ) > anchor_top_dist) //scroll down
                {
                    k_distance = k_distance + header_height;
                    
                    $('#' + id + ' > *').css({
                        "z-index": "100",
                        "left": $('#' + id + ' > *').offset().left + 'px',
                        "position": "fixed",
                        "top": (k_distance) + 'px',
                        "bottom": "initial",
                        "transition":" 0.8s all ease"

                    });
                }
                else if (( (scroll_top + k_distance) - comp_height ) > anchor_top_dist) //scroll up
                {
                    k_distance = k_distance + header_height;
                    
                    $('#' + id + ' > *').css({
                        "z-index": "100",
                        "left": $('#' + id + ' > *').offset().left + 'px',
                        "position": "fixed",
                        "top": (k_distance)+'px',
                        "bottom": "initial",
                        "transition":" 0.8s all ease"
                    });
                }
                else
                {
                    $('#' + id + ' > *').css({
                        "z-index": "initial",
                        "left": 'initial',
                        "position": "initial",
                        "bottom": 'initial',
                        "top": 'initial'
                    });
                }
            }
            scroll_aux2 = scroll_top;
        }
    }

    function actBtVerMais(e)
    {
        var id = $(e).data('target');
        $('#'+id).show();
        $(e).hide();
    }

    function atcFixedOnScroll()
    {
        fixedOnScroll('out_post_barra');
    }

    
    function actContatoEmpresa(act,tipo)
    {
        if(act && tipo != 0)
        {

            if(tipo == 1)
                $('#empresa_contato_titulo').html('Entre em contato');
            else
                $('#empresa_contato_titulo').html('Solicite um orçamento');

            $('#hidden_tipo').val(tipo);

            $('#blackoverlay').addClass('blackoverlay_cont_empresa').trigger('classChange');
            $('#empresa_contato').fadeIn(400);
            $('#empresa_contato').height($('#empresa_contato'+' > *').outerHeight());
        }
        else
        {
            $('#empresa_contato').fadeOut(400);
            $('#blackoverlay').removeClass('blackoverlay_cont_empresa').trigger('classChange');
            $('#empresa_contato_titulo').html('');
        }
        blackoverlay(act);
    }

    function actBuscaDesktop(act)
    {
        $('#busca_clique').toggle();
        $('#busca_input').focus();
        $('#blackoverlay').addClass('blackoverlay_busca_desktop').trigger('classChange');
        blackoverlay(act);
    }

    function actBuscaObjeto()
    {
        $('#box_marca_closed').hide();
        $('#box_marca_busca').show();
        $('.box_marca').css('background-color','#f3661a');
        $('#busca_marca_input').focus();
    }

    function actCorrigirTexto(act,e)
    {
        if($('#modal_corrigir_txt').length == 0)
        {
            $(e).data('corrigir_titulo');
            $("html").append('<div class="modal modal-s block corrigir" id="modal_corrigir_txt" ><span class="load-ico" ></span></div>');
            ajaxDireto('https://www.oficinadanet.com.br/ajax_oficina.php','act=corrigirTexto&monta=1&corrigir_titulo='+$(e).data('corrigir_titulo')+'¶_email='+$(e).data('para_email'),'modal_corrigir_txt');
        }


        if(act)
        {
            $('#blackoverlay').addClass('blackoverlay_corrigir').trigger('classChange');
            $('#modal_corrigir_txt').fadeIn(400);
        }
        else
        {
            $('#modal_corrigir_txt').fadeOut(400);
            $('#blackoverlay').removeClass('blackoverlay_corrigir').trigger('classChange');
        }
        blackoverlay(act);
    }

    function newsletterCad(ele,s)
    {
        if(s == '1')
        {
            var cad_idx = $(ele).data('idx');
            $('#'+cad_idx+'_form2 .out_captcha').html('<div class="wifl p-rel newsbrandcap" id="brand_cap_widget_wrapper" ><span class="load-ico" ></span></div><script type="text/javascript" src="https://api.pontamedia.net/challenge.php?k=8f8436b8ae2f804f336e902439085b08a914db96"></script'+'>');
            $('#'+cad_idx+'_ulcad').css('left',$('#'+cad_idx+'_ulcad').outerWidth()*-1);
//            $('#'+$(ele).data('id_ulout')).css('height',$('#'+cad_idx+'_ulcad .stp2').outerHeight());
        }
        else
        {
            var cad_idx = $(ele).data('idx');
            ajaxDireto('https://www.oficinadanet.com.br/ajax_oficina.php',$('#'+cad_idx+'_form1').serialize()+'&'+$('#'+cad_idx+'_form2').serialize(),$(ele).data('id_ulout'));
        }
    }

    function fixedMenuDiagramado()
    {
        var scrolltop = $(window).scrollTop();

        if(scrolltop >= 350)
            $('.conteudo .out_menu_diagramado').css('top','0');
        else
            $('.conteudo .out_menu_diagramado').css('top','850px');
    };

    $(document).ready(function()
    {

        $(function ()
        {
            $(window).scroll(atcFixedOnScroll);
        });

        $('.disabled').click(function(e)
        {
           e.preventDefault();
        })

        $('.box_hover').mouseenter(function()
        {
            boxHoverSite(2,0,this);
        });

        $(window).scroll(fixedMenu);
        $(window).scroll(fixedMenuDiagramado);
        fixedMenu();
        fixedMenuDiagramado();
        $(".amenu_diagramado").click(function(){scrollPageToID($(this).attr('href').substring(1));});
        $(".bt_ver_mais").click(function(){ actBtVerMais(this); });
        $(".ver_mais_preco_obj").click(function(){ scrollPageToID('precos'); });
        $('#bt_header_busca').click(function(){ $('#busca_input').focus();});
        $('#smart_filtro_ud_dwn').click(function(){$(".smart_filtro").animate({scrollTop: '+=200px'}, 300);});
        $('#smart_filtro_ud_up').click(function(){$(".smart_filtro").animate({scrollTop: '-=200px'}, 300);});
        $('#mobile_busca').click(function(){ $('#mobile_bf').css('display','block');});
        $('#aovivo').click(function(){ actAovivo(); });
        $('#smart_filtro_m_abre').click(function(){ actSmartMobile(true); });
        $('#bt_new_cmt').click(function(){ actAbreComments(true); });
        $('#bt_new_cmt_orelha').click(function(){ actAbreComments(true); });
        $('#bt_new_cmt_orelha_close').click(function(){ actAbreComments(false); });
        $('.bt1-comment').click(function(){ actAbreComments(true); });
        $('#busca_clique_open').click(function(){ actBuscaDesktop(true); });
        $('#box_marca_closed').click(function(){ actBuscaObjeto(); });
        $('#smart_filtro_m_fecha').click(function(){ actSmartMobile(false); });
        $('#menumobile').click(function(){ actMenuMobile(true); });
        $('#fechar_menumobile').click(function(){ actMenuMobile(false); });
        $('.fechar_newsletter_big').click(function(){ actPopup('fechar','NEWSBIG'); });
        $('.fechar_youtube_big').click(function(){ actPopup('fechar','YOUTUBEBIG'); });
        $('.fechar_youtube_mobile').click(function(){ actPopup('fechar','YOUTUBEMOBILE'); });
        $('.fechar_rss_big').click(function(){ actPopup('fechar','RSSBIG'); });
        $('.fechar_twitter_big').click(function(){ actPopup('fechar','TWITTERBIG'); });
        $('.fechar_instagram_big').click(function(){ actPopup('fechar','INSTAGRAMBIG'); });
        $('#fechar_newsletter').click(function(){ actPopup('fechar','ONNEWS'); });
        $('#fechar_youtube').click(function(){ actPopup('fechar','ONYOUTUBE'); });
        $('#popup_youtube').click(function(){ actPopup('fechar','ONYOUTUBE'); });
        $("#form_envia").click(function(){ submitFormulario(); });
        $("#mostra_fone").click(function(){ $('#empresa_fone').html(BV($('#empresa_fone').data('info'))); $('#mostra_fone').hide(); });
        $(".empresa_contato").click(function(){ actContatoEmpresa(true,$(this).data('tipo'));});
        $('#empresa_contato_fechar').click(function(){ actContatoEmpresa(false,0) });
        $('.act_corrigir_texto').click(function(){ actCorrigirTexto(true,this) });
        $('#btcarregarcomments_disqus').click(function(){ carregaComentariosDisqus() });
        $('#btcarregarcomments_facebook').click(function(){ carregaComentariosFacebook() });
        $(".form_newsletter_cad").submit(function(event){  event.preventDefault(); newsletterCad(this,"1"); });
        $(".form_newsletter_cad2").submit(function(event){ event.preventDefault(); newsletterCad(this,"2"); });
        $(".form_newsletter_cad").submit(function(event){  event.preventDefault(); newsletterCad(this,'1'); });
        $(".form_newsletter_cad2").submit(function(event){ event.preventDefault(); newsletterCad(this,'2'); });

        $('#blackoverlay').on('classChange',function()
        {
            $('.blackoverlay_mobile').click(function(){ actMenuMobile(false) });
            $('.blackoverlay_smart').click(function(){ actSmartMobile(false) });
            $('.blackoverlay_cont_empresa').click(function(){ actContatoEmpresa(false,0) });
            $('.blackoverlay_corrigir').click(function(){ actCorrigirTexto(false,'') });
            $('.blackoverlay_busca_desktop').click(function(){ actBuscaDesktop(false)});
        });


        $('.accordion_act1 .i-tit').click(function(e)
        {
            if($(this).prop("tagName") != 'A')
            {
                $(this).addClass('click');
                $('.li-wrapper:not(\'.click\')').animate({height:0}, { duration: 400, queue: false });
                $('.i-tit:not(\'.click\')').removeClass('ativo');

                if(!$(this).hasClass('ativo'))
                {
                    $(this).addClass('ativo');
                    $(this).find('+ .li-wrapper').animate({height:$(this).find('+ .li-wrapper > .accordion_act1').outerHeight()}, { duration: 400, queue: false });
                }
                else
                {
                    $(this).removeClass('ativo');
                    $(this).find('+ .li-wrapper').animate({height:0},400);
                }
                $(this).removeClass('click');
            }
        });

        $('.accordion_act2 .tit_1').click(function(e)
        {
            $(this).addClass('click');
            $('.li-wp1:not(\'.click\')').animate({height:0}, { duration: 400, queue: false });

            if(!$(this).hasClass('ativo'))
            {
                var wrapper1_id         = 'wrapper_'+$(this).data('wrap0');
                var wrapper1_height     = $('#'+wrapper1_id+' > .accordion_act2 > li').length* $('#'+wrapper1_id+' > .accordion_act2 > li').outerHeight();

                $('#'+wrapper1_id).animate({height:wrapper1_height}, { duration: 400, queue: false });
                $('.tit_1').removeClass('ativo');
                $(this).addClass('ativo');
            }
            else
            {
                $('.tit_1').removeClass('ativo');
            }
            $(this).removeClass('click');
        });

        $('.accordion_act2 .tit_2').click(function(e)
        {
            $(this).addClass('click');
            $('.li-wp2:not(\'.click\')').animate({height:0}, { duration: 400, queue: false });

            var wrapper1_id = 'wrapper_'+$(this).data('wrap0');
            var wrapper2_id = 'wrapper_'+$(this).data('wrap0')+'_'+$(this).data('wrap1');

            if(!$(this).hasClass('ativo'))
            {
                var wrapper1_height     = $('#'+wrapper1_id+' > .accordion_act2 > li').length* $('#'+wrapper1_id+' > .accordion_act2 > li').outerHeight();
                var wrapper2_height     = $('#'+wrapper2_id+' > .accordion_act2 > li').length* $('#'+wrapper2_id+' > .accordion_act2 > li').outerHeight();


                $('#'+wrapper1_id).animate({height:wrapper1_height+wrapper2_height}, { duration: 400, queue: false });
                $('#'+wrapper2_id).animate({height:wrapper2_height}, { duration: 400, queue: false });

                $('.tit_2').removeClass('ativo');
                $(this).addClass('ativo');
            }
            else
            {
                var wrapper1_height = $('#'+wrapper1_id+' > .accordion_act2 > li').length*$('#'+wrapper1_id+' > .accordion_act2 > li > .tit_2').outerHeight();

                $('#'+wrapper1_id).animate({height:wrapper1_height}, { duration: 400, queue: false });
                $('.tit_2').removeClass('ativo');
            }
            $(this).removeClass('click');
        });
    });

    var lst_carregamento        = 1;
    var txtstatus               = 'ok';
    var html_ico_load_auto_load = '<span id="icoload_autoload" class="wifl p-rel" ><span class="load-ico" ></span></span>';
    function carregaConteudo()
    {
        if($('#auto_load_wrapper').length > 0)
        {
            var scrollPosition      = window.pageYOffset;
            var windowSize          = window.innerHeight;
            var footerHeightTop     = $('#footer').offset().top;

            var stop_load           = document.getElementById('auto_load_wrapper').getAttribute('data-stop-load');

            if((scrollPosition + windowSize + 800) > footerHeightTop && stop_load == '0')
            {
                if(txtstatus == 'ok')
                {
                    $("#auto_load_wrapper").append(html_ico_load_auto_load);
                    txtstatus = 'timeout';
                    $.ajax({
                        type: 'POST',
                        url: 'https://www.oficinadanet.com.br/ajax_oficina.php',
                        data: 'act=autoLoadConteudo&lst_carregamento='+lst_carregamento+'&'+serializeDataAttr($('#auto_load_wrapper')),
                        success: function(html)
                        {
                            $("#auto_load_wrapper").append(html);
                            $("#icoload_autoload").remove();
                            txtstatus = 'ok';
                        }
                    });
                    lst_carregamento++;
                }
            }
        }
    }

    $(function () {
        $(window).scroll(carregaConteudo);
        carregaConteudo();
    });

    $(window).scroll(function() {
        if ($(this).scrollTop() >= 150) {
            $('#top_page').fadeIn(200);
        } else {
            $('#top_page').fadeOut(200);
        }
    });
    $('#top_page').click(function() {
        $('body,html').animate({
            scrollTop : 0
        }, 500);
    });


    if ($(".carousel_destaque")[0])
    {
        $('#out_lib').append('<link href="https://painel.m3midia.com.br/lib/slick/slick.css" rel="stylesheet">');
        $.getScript("https://painel.m3midia.com.br/lib/slick/slick.js", function(){
            $('.carousel_destaque').slick({
                slidesToShow: 1,
                slidesToScroll: 1,
                autoplay: true,
                pauseOnHover: true,
                autoplaySpeed: 10000
            });
            setTimeout(function(){
                $('.carousel_destaque').removeClass('carregando');;
            }, 1500);
        });
    }

    if ($(".conteudo_galeria")[0])
    {
        $('#out_lib').append('<link href="https://painel.m3midia.com.br/lib/lightGallerySlider/lightGallerySlider.css" rel="stylesheet">');
        $.getScript("https://painel.m3midia.com.br/lib/lightGallerySlider/lightGallerySlider.js", function(){
            $('.conteudo_galeria').lightSlider({
           item: 3,
           loop:false,
           slideMove:3,
           easing: 'cubic-bezier(0.25, 0, 0.25, 1)',
           speed:600,
           responsive : [
               {
                   breakpoint:800,
                   settings: {
                       item:3,
                       slideMove:1,
                       slideMargin:6,
                     }
               },
               {
                   breakpoint:480,
                   settings: {
                       item:2,
                       slideMove:1
                     }
               }
           ]
            }).lightGallery({

            });
            $('.out_conteudo_galeria').css('display','block');
        });
    }

    $(function (){

        function countdown()
        {

            if ($(".promo_relogio")[0])
            {
                $(".promo_relogio").each(function( index )
                {
                    clearTimeout(timer_promo);
                    var now         = new Date();
                    var eventDate   = new Date($(this).data('data-fim'));
                    var currentTime = now.getTime();
                    var evenTime    = eventDate.getTime();

                    var remTime = evenTime - currentTime;

                    var sec = Math.floor(remTime / 1000);
                    var min = Math.floor(sec / 60);
                    var hur = Math.floor(min / 60);
                    var day = Math.floor(hur / 24);

                    hur %= 24;
                    min %= 60;
                    sec %= 60;

                    hur = (hur < 10) ? "0" + hur : hur;
                    min = (min < 10) ? "0" + min : min;
                    sec = (sec < 10) ? "0" + sec : sec;

                    hur = parseInt(parseInt(day*24)+parseInt(hur));

                    if(hur > 0 || min > 0 || sec > 0)
                    {
                        $(this).find('.promo_hora').html(hur);
                        $(this).find('.promo_minuto').html(min);
                        $(this).find('.promo_segundo').html(sec);
                    }
                    else
                    {
                        $(this).find('.promo_hora').html('00');
                        $(this).find('.promo_minuto').html('00');
                        $(this).find('.promo_segundo').html('00');
                        $('#sale-relogio'+$(this).data('key')).addClass('tpl2');
                        $('#promo_txt'+$(this).data('key')).html('A oferta expirou');
                    }
                });
                var timer_promo = setTimeout(countdown, 1000);
            }
        }
        countdown();
    });

    </script>
<script src="https://cdn.onesignal.com/sdks/OneSignalSDK.js" async></script>
<script>
var OneSignal = OneSignal || [];
OneSignal.push( function() {
    OneSignal.setDefaultTitle("Oficina da Net");
    OneSignal.setDefaultNotificationUrl("https://www.oficinadanet.com.br");
    var oneSignal_options = {appId: "c28261c1-6765-4517-bc5f-38bbeb9f2ec3"};
    //oneSignal_options['persistNotification'] = false;
    oneSignal_options['autoRegister'] = true;
    oneSignal_options['welcomeNotification'] = { };
    oneSignal_options['welcomeNotification']['title'] = "Oi. Obrigado pela inscrição =)";
    oneSignal_options['welcomeNotification']['message'] = "As melhores novidades avisaremos por aqui ;) - Siga @oficinadanet";
    oneSignal_options['safari_web_id'] = "web.onesignal.auto.2068edc0-2ec7-4d8d-bc37-83913e3acbff";
    OneSignal.init(oneSignal_options);
});

</script>
        <div id="box_news" style=" width:440px; height:200px; display: none; position: fixed; z-index: 9999; top:15%; right:calc(50% - 220px);">
            <div style="width:440px; height:150px; background-color: white; float:left; color:white; text-align: center; font-size:15px; z-index:99999">
                <div class="redes_out">
                    <div style="width:90%; padding:5%; margin-top:-17px; background: #279fd3; color: white; float:left; margin-bottom: 20px;">
                        <strong style="font-size:25px;">OFICINA DA NET NO TELEGRAM</strong>
                        <br><br>
                        Participe de nosso grupo, venha debater sobre tecnologia 😉
                        <br><br><span style='color:black; font-size:20px;text-decoration:underline; color:white; cursor: pointer' onclick='_gaq.push(["_trackEvent", "popseguir", "telegram", "telegram"]);window.open("https://t.me/oficinadanet")'>https://t.me/oficinadanet</span>
                        <br><br>
                        <div style="cursor:pointer; font-size:14px; " onclick="fechaBoxOficina()">Não, obrigado</div>
                    </div>

                    <style type="text/css" >
                    .newsletter1 {width: 100%; height:222px; float: left; margin: 0; background: url(ROOTIMG2/template/images/sprite1.png) 0 -408px no-repeat; -webkit-box-shadow: 0 0 0 0 rgba(204, 204, 204, 1); -moz-box-shadow:    0 0 0 0 rgba(204, 204, 204, 1); box-shadow: 0 0 0 0 rgba(204, 204, 204, 1)}
                    .newsletter1 b, .newsletter1 em {width: 100%; float: left; text-align: center; color: white}
                    .newsletter1 b {margin-top: 20px; line-height: 24px; font-size: 24px; letter-spacing: -0.065em}
                    .newsletter1 em {margin-top: 14px; line-height: 16px; font-size: 16px; letter-spacing: -0.050em }
                    .newsletter1 .news_campo, .newsletter1 .news_bt_submit {height: 50px; float: left; margin-top: 22px; font-size: 17px; font-style: italic;  border: 0px; background-color: white; -webkit-box-shadow: 2px 2px 0px 0px rgba(36, 8, 65, 1); -moz-box-shadow: 2px 2px 0px 0px rgba(36, 8, 65, 1); box-shadow: 2px 2px 0px 0px rgba(36, 8, 65, 1)}
                    .newsletter1 .news_campo {width: 320px; padding: 0 0 0 10px; margin-left: 30px; color: #484848}
                    .newsletter1 .news_bt_submit {width: 50px; color: #22093e; cursor: pointer}
                    .redes_out {width: 100%; float: left; margin:17px 0 0 0}
                    </style>
                </div>
            </div>
        </div>

        <script type="text/javascript">
            function abreBoxOficina()
            {
                $('#box_news').css('display','block');
                blackoverlay(1);
            }
            function fechaBoxOficina()
            {
                $('#box_news').css('display','none');
                actPopup('fechar','telegramgrupo');
                blackoverlay(0);
            }
            setTimeout('abreBoxOficina();','30000');
        </script>
        <script type="text/javascript">
    function actSininho()
    {
        _gaq.push(['_trackEvent', 'sininho', 'sininho', 'sininho']);
        ajaxDireto('https://www.oficinadanet.com.br/ajax_oficina.php','act=setCookie&nome=ONSININHO&valor=1&tempo=36000','box_sininho');
        setTimeout("document.location = 'https://www.oficinadanet.com.br/novidades'",1000);
    }

    function actAvisoTopo(act)
    {
        switch(act)
        {
            case 'instagram':
                ajaxDireto('https://www.oficinadanet.com.br/ajax_oficina.php','act=setCookie&nome=ONINSTAGRAM&valor=1&tempo=36000','box_instagram');
            break;
            case 'youtube':
                ajaxDireto('https://www.oficinadanet.com.br/ajax_oficina.php','act=setCookie&nome=ONYOUTUBE&valor=1&tempo=36000','box_youtube');
            break;
            case 'user_topo':
                ajaxDireto('https://www.oficinadanet.com.br/ajax_oficina.php','act=setCookie&nome=ONUSERTOPO&valor=1&tempo=36000','box_user_topo');
            break;
        }
    }

    $(document).ready(function()
    {
        $('#sininho').click(function(){ actSininho(); });
        $('#instagram_topo').click(function(){ actAvisoTopo('instagram');});
        $('#youtube_topo').click(function(){ actAvisoTopo('youtube'); });
        $('#user_topo').click(function(){ actAvisoTopo('user_topo'); });
    });

</script>

    <script type="text/javascript">
       setTimeout("$('#box_instagram').fadeIn(1000)",1000);
       setTimeout("$('#box_instagram').fadeOut(1000)",5000);
    </script>
    <link rel="stylesheet" type="text/css" href="https://www.oficinadanet.com.br/_template/css/geral.css?v=770"><!-- advertising 4TpJ9Me3Sia7qHJi9IM3odw5jJ_2hupbH48Ifjbng_aL0ZNxVUTj4-ltldS-hvBNbqaBGbAM-deLE4JswQFNbQ==-->
    <script data-cfasync="false"  id="clevernt" type="text/javascript">
    (function (document, window) {
        var c = document.createElement("script");
        c.type = "text/javascript";
        c.async = !0;
        c.src = "//clevernt.com/scripts/49eda678410baaf060c3a7dad9cff960.min.js?20180622=" + Math.floor((new Date).getTime());
        var a = !1;
        try {
            a = parent.document.getElementsByTagName("script")[0] || document.getElementsByTagName("script")[0];
        } catch (e) {
            a = !1;
        }
        a || ( a = document.getElementsByTagName("head")[0] || document.getElementsByTagName("body")[0]);
        a.parentNode.insertBefore(c, a);
    })(document, window);
    </script>
    <!-- end advertising -->    <div class="player_dynad_tv"></div>
    </body>
</html>