anterior
Tweet about this on TwitterPin on PinterestShare on LinkedInShare on Google+Email this to someoneShare on Facebook
QR CODE

Turbine seus trabalhos no Dreamweaver com o Adobe Widget Browser

capa widget dreamweaver

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 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:

widget browser atalho

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.

Download Widget Browser

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).

03 -  Instalar Widget Browser

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).

04 -  Continuar 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…

05 -  Aceitar instalação

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.

06 -  o widget browser

06 - Criar conta ou Logar

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)

07 - Adicionando gadget

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:

08 - Ir para widget

Na janela a seguir, você já pode ver o Widget adicionado. Você pode adicionar quantos quiser, de acordo com seu gosto e necessidade!

09 - Mostrando widget

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:

10 - Selecionando widget

Na janela lateral, onde se vê Developer Presets, você pode escolher alguns temas de cores pré disponibilizados para o recurso:

11 - Editando widget

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.

12 - Editando widget continuação

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:

15 - Preview widget

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):

13 - Salvando 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:

14 - Salvando widget continuação

16 - Testando widget

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!

17 - Pasta com arquivos

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!

Próximo

Postado por

Web designer, Ilustrador e produtor visual gráfico, santista de nascimento e de coração, amo o que faço e estou muito feliz em fazer parte da equipe Microcamp.

Postagem Relacionada

Manipulando cookies em ASP
Este tutorial mostrará como criar uma página em ASP que utilize Cookies de navegador para