Curso Web Design | Turbine seus trabalhos no Dreamweaver com o Adobe Widget Browser

---

Turbine seus trabalhos no Dreamweaver com o Adobe Widget Browser Posted: 11 Jul 2013 07:31 AM PDT Se você é um usuário frequente do Dreamweaver, deve imaginar como seria bom se o programa tivesse vários aplicativos prontos para utilizar em seus trabalhos, certo?  O Adobe Widget browser é uma ferramenta que permite ao usuário do Dreamweaver a instalação e o uso de pequenos aplicativos web para serem utilizados em blogs ou sites. Que tal aprender como utiliza-lo em seus trabalhos? Widgets nada mais são do que pequenos trechos de códigos que podem ser introduzidos e executados em uma página HTML. Eles podem aparecer como pequenas janelas, botões, slide shows, ou caixas que flutuam na página de acordo com os parâmetros definidos pelo administrador do site, fórum ou blog, e fornecem funcionalidades para o usuário, como: data e hora, previsão do tempo, notícias online, contador de visitas, vídeos, imagens, e muito mais… Sei que muitos usuários preferem aprender tudo "na raça" – também defendo isso, afinal, nada como uma boa dose de esforço e dedicação para o aprendizado de web design, certo? – mas se você já sabe utilizar bem os seus conhecimentos em HTML, CSS e Javascript, nada como ter algumas ferramentas uteis ao alcance da mão para introduzir em seus trabalhos sem que você perca muito tempo com isso. O Widget Browser é um navegador da Adobe que serve para fazer o download e gerenciar uma lista crescente de aplicações disponibilizadas online para o seu site. A maioria desses aplicativos são criados em Ajax e  jQuery e você pode usá-los livremente para adicionar recursos interativos para sua página da web. Para acessar o navegador Widget, selecione-o no menu Extender Dreamweaver (Dreamweaver Extend), no pequeno ícone de engrenagem localizado na barra de aplicativos, logo abaixo da barra de menu principal do Dreamweaver, como vê na imagem a seguir: Importante: Se você não possuir o Adobe Widget Browser instalado no seu Dreamweaver, você poderá baixá-lo-lo diretamente na página http://adobe-dreamweaver-widget-browser.software.informer.com/2.0/. Ao abrir a página do link pela primeira vez,  siga as instruções para fazer o download do programa no Adobe Labs. Uma janela de Instalação do aplicativo surgirá perguntando se deseja realizar a instalação. Clique para instalar (se o seu AdobeAir estiver desatualizado, é bem provável que antes disso ele faça um atualização). Em seguida, você deverá decidir se instala um ícone de atalho para o programa, se deve ou não iniciá-lo após a instalação e também definir a pasta onde será instalado (é recomendável não alterar o diretório pré determinado pela instalação). Uma nova janela será aberta, onde você deverá concordar com os Termos de Uso e da Licença do programa, como é de praxe… Nesse ponto, já é possível vislumbrar o programa, bem como a Galeria de Widgets disponível.  Os Widgets possuem cotações em estrelas para que veja quais são os mais apreciados pelos usuários, e você pode arruma-los pelo nome ou pelo autor. No entanto, ao clicar sobre um Widget para utiliza-lo, deverá fazer login em sua conta da Adobe com sua Adobe ID. Se você já é um utilizador constante dos produtos Adobe, sabe que é necessário fazer um cadastro antes de ter acesso para a maioria dos recursos do site. Se você não possui um cadastro, deverá criar um clicando na opção “Create Account” . É simples, rápido e totalmente gratuito. Pronto! agora todos os recursos da galeria estão a sua disposição. Como deve observar, há varias opções para os mais diversos tipos de trabalhos: geradores de códigos de barra, botões estilo “acqua” feitos com CSS3, galerias de imagens, menus dropdown, entre outros. Para utilizar um desses recursos, clique diretamente sobre ele. Repare qua nas informações gerais, aparecem informações sobre quais browsers são compatíveis, a licença e a compatibilidade com o produto. No meu caso, escolhi uma Galeria de imagens Lightbox. Na janela que irá abrir mostrando os detalhes do aplicativo, clique no botão Add to My Widgets (adicionar aos meus Widgets) Ao clicar no botão de Adicionar aos Widgets, o mesmo irá ser adicionado a sua Galeria. Você poderá visualiza-lo a seguir clicando em “Go to my widgets”, como mostrado na imagem a seguir: Na janela a seguir, você já pode ver o Widget adicionado. Você pode adicionar quantos quiser, de acordo com seu gosto e necessidade! Na tela a seguir, você pode observar que adicionei mais alguns à minha coleção. Em seguida, iremos testar a funcionalidade do primeiro Widget que baixei, a Galeria Lightbox, para demonstrar como utilizar o Widget em sua página no Dreamweaver. Clique no Widget selecionando-o: Na janela lateral, onde se vê Developer Presets, você pode escolher alguns temas de cores pré disponibilizados para o recurso: Em seguida, em “General”, você pode fazer alterações gerais no Widget, como cor do fundo, margem interna, alinhamento, largura das miniaturas, entre outras opções. Como pode reparar, tudo é personalizável. Após definir as suas configurações, você pode visualizar o Widget. Clique no botão Preview para testa-lo dentro do próprio browser e conferir se tudo está do seu agrado: Agora,chegou a hora de salvar os arquivos com o resultado do seu trabalho. Clique na opção “Save widget Files” (salvar arquivos do Widget): Selecione a pasta onde os arquivos serão salvos e em seguida, abra o documento em HTML gerado pelo programa para conferir se o Widget está funcionando em seu navegador web: Repare que dentro do diretório que escolheu, estão todos os arquivos criados pelo programa. Se desejar fazer outras alterações, poderá edita-lo diretamente no Dreamweaver, com os conhecimentos de HTML, CSS e JavaScript que possui. Com tantos recursos à sua disposição, agora é só colocar mãos à obra para que sua página tenha bons recursos sem que você precise fazer muito esforço! Espero que tenham gostado da dica. Procure explorar os outros recursos do Adobe Widget Browser e compartilhe conosco a sua experiência. Diga qual o melhor (ou o pior) Widget e não deixe de compartilhar essas dicas com os amigos. O Blog do web design agradece a sua visita e esperamos que esteja aqui na próxima semana outros assuntos  sobre o mundo do web design. Não perca! Forte abraço a todos!

You are subscribed to email updates from Blog do Curso Web Design - Microcamp SP To stop receiving these emails, you may unsubscribe now.	Email delivery powered by Google
Google Inc., 20 West Kinzie, Chicago IL USA 60610