DREAMWEAVER SPRY & WIDGETS 1
ÍNDICE ÍNDICE... 2 ABRA SPRY DREAMWEAVER... 3 Spry MenuBar... 7 Spry Accordion... 11 Spry Collapsible Panel... 12 Spry Tabbed Panels... 13 Spry Tooltip... 15 Spry Validação de Formulário... 16 ADOBE WIDGET BROWSER... 22 Spry Image Slideshow.... 25 Zoom em parte da imagem... 33 Google Maps... 36 Redes Sociais... 40 2
ABRA SPRY DREAMWEAVER Embora tenha sido lançado na versão CS3 do Dreamweaver as ferramentas Spry ainda são pouco utilizadas. O objetivo é apresentar a você como tirar proveito destas ferramentas. O framework Spry são bibliotecas no formato JavaScript e CSS, as quais permitem aos usuários do Dreamweaver desenvolver interfaces mais ricas e dinâmicas. Além de possibilitar a exibição de dados no formato XML e criar elementos interativos em páginas que exibem conteúdo dinâmico sem a necessidade de tais páginas se carregarem por completo. O Dreamweaver disponibiliza o Spry em duas perspectivas, uma para designers e outra para programadores. Os designers poderão criar efeitos visuais como Appear, Fade, Blinds (Up e Down), Grow, Shake, Slide, entre vários outros. Já os programadores terão facilidades ao trabalhar com o Ajax e na exibição de dados armazenados em arquivos XML. Além desses recursos, tantos para designers quanto para programadores, o Spry oferece alguns widgets que auxiliam na validação de formulários. Vamos analisar a interface do Dreamweaver e localizar os recursos do Spry. Ele possui um painel chamado Spry. 3
No painel DATA No painel Forms 4
No painel Layout 5
Os demais recursos oferecidos pelo Spry são os efeitos, effects. Ambos estão localizados na opção Effects do painel Behaviors. Quando você seleciona algum recurso do spry no Documento window do Dreamweaver, o Property inspector é atualizado e exibe as configurações de recurso em questão. 6
O Spry são bibliotecas no formato JavaScript e CSS. O que significa dizer que para cada recurso do Spry há um arquivo JavaScript e outro CSS relacionado. O arquivo JavaScript é o responsável pelo comportamento, interatividade, animação e o arquivo CSS se encarrega da estilização. Quando você utiliza algum recurso do Spry e posteriormente salva à página em questão, é exibido o painel Copy Dependent Files, o qual copia para o seu site, configurado no Dreamweaver, os arquivos relacionados ao recurso utilizado. Além de copiar os arquivos, ele lhe informa quais são os arquivos e exibe um alerta para lembrar-lhe de enviar os arquivos para o servidor na web. Spry MenuBar O primeiro componente Spry que vamos trabalhar é o MenuBar. Pelo painel Spry clique no componente,ele perguntará se quer criar um vertical ou horizontal. 7
Escolha e clique em OK. Salve seu arquivo para que ele gere os demais arquivos necessários. Pela barra de propriedades você pode adicionar ou remover elementos de seu componente, acrescentar links, etc. Ao salvar e testar, você já poderá ter idéia de como ficará sua barra de navegação. 8
Ao alterar as propriedades na barra ele muda as informações no painel do Dreamweaver. Se precisar mudar alguma formatação de seu menu, será necessário que isso seja feito pelo painel de CSS. 9
Por exemplo no modelo gerado pelo Dreamweaver, o fundo de cada elemento no Over é azul, caso queira que ele mude de cor para por exemplo vermelho, localize no arquivo CSS onde está esta propriedade e mude a cor. Para verificar a mudança, é necessário utilizar o comando File/Save All para que ele salve o arquivo CSS. Depois recarregue a página. 10
Spry Accordion O Spry Accordion, funciona da mesma forma que o componente Accordion que vimos no Flash, ele permite adicionar conteúdo em seu site em elementos como se fossem sanfonas. Crie um novo arquivo e clique no componente Accordion, será solicitado que a página seja salva. Salve-a e seu componente estará disponível no Dreamweaver 11
O seu funcionamento é semelhante ao visto no menubar, posso adicionar ou remover conteúdo pela barra de propriedades. No campo Content de cada ABA do Accordion, posso adicionar o conteúdo HTML. Spry Collapsible Panel Funciona de forma muito semelhante ao Accordion, ele usa uma ABA que ao ser clicada mostra / oculta o conteúdo. Em uma nova página clique sobre o componente Collapsible Panel 12
Observe pela barra de propriedades que podemos deixá-la aberta ou fechada. Adicione seu conteúdo e salve seu arquivo. Ao testar, você poderá verificar que ao clicar sobre o título da barra, ela irá mostrar/ocultar o conteúdo. Spry Tabbed Panels O Spry Tabbed Panels é um grupo de painéis organizados por abas, onde cada uma delas é exibida por vez, ou seja, quando o conteúdo de uma aba é exibido, os demais permanecem oculto. Esse tipo de recurso é muito utilizado na exibição de extenso conteúdo em espaços compactos. Clique no componente Spry Tabbed Panels para inseri-lo em seu documento. Inicialmente ele cria duas TABS, mas seguindo a mesma lógica do que vimos acima, você pode adicionar e inserir quantas ABAS forem necessárias. A propriedades Default panel permite que se defina qual é a ABA a ser aberta ao 13
carregar a página. Vamos criar um Spry com seções como : Notícias, Esportes, Tecnologia e Entretenimento. Vamos tematizar nossas Abas com a cor Branca de fundo e adicionar uma cor de contorno somente em baixo para cada uma das seções. A classe CSS que define as propriedades de cada uma das Abas é TabbedPanelsTab. Encontre este bloco CSS no código de suas páginas e duplique criando um para cada ABA e mude a cor de contorno de baixo. É necessário também mudar a chamada da classe de cada uma dos elementos: <body> <div id="tabbedpanels1" class="tabbedpanels"> <ul class="tabbedpanelstabgroup"> <li class="tabbedpanelstabnot" tabindex="0">notícias</li> <li class="tabbedpanelstabesp" tabindex="0">esportes</li> <li class="tabbedpanelstabtec" tabindex="0">tecnologia</li> <li class="tabbedpanelstabent" tabindex="0">entretenimento</li> 14
Adicione conteúdo a suas Abas Spry Tooltip O Tooltip, ou seja a dica/complemento que é apresentado numa janela que aparece ao se passar o mouse sobre um elemento da página (chamaremos este de gatilho), é uma ferramenta muito útil em qualquer projeto de webdesign, e necessária em alguns. Está se tornando cada vez mais comum encontrarmos estas janelinhas flutuantes que servem como apêndice para facilitar a navegação. Crie um novo Arquivo e salve-o, depois insira o componente Tooltip. O texto que está na are em branco é o texto que será a chamada de seu Tooltip e o que está na DIV amarela será o mostrado ao passar o mouse. Na barra de propriedades podemos definir se o tooltip seguirá o mouse, se ele ficará oculto ao retirar o mouse e o efeito que ele terá ao aparecer e sumir. 15
Spry Validação de Formulário No curso WebKit 01, vimos como validar um formulário no Dreamweaver através de comportamentos Javascript (Behaviors), agora vamos aprender como fazer o processo utilizando alguns componentes Spry. Monte o formulário conforme abaixo: Vamos utilizar os botões de validação da Aba Spry Vamos trabalhar com 2 tipos que são os textbox e o textarea. 16
Coloque o cursor dentro da tabela ao lado do nome para incluir um text field clicando na primeira opção da área marcada na imagem acima e ao abrir uma janela clique apenas em OK. Após isso teremos o seguinte resultado mostrado na imagem abaixo. Vamos fazer o mesmo passo para e-mail e assunto, e para a opção mensagem clicamos na última opção da barra de ferramentas marcadas na imagem mais acima, a opção textarea. Logo teremos o resultado abaixo. Antes de começar a validação vamos nomear os campos certinhos e definir o tamanho que você achar melhor. Clique no campo nome e a opção azul vai aparecer, clique na opção azul que a barra de propriedades irá mostrar as opção de validação para tipo de campo. 17
Repare que está definido com Required para os campos. Abaixo de Preview states temos a ação na qual queremos que seja feita a validação, normalmente deixo no submit mesmo. Para a opção Type temos as seguintes opções: Agora é só escolher a melhor opção para cada campo atendendo as suas necessidades. A opção Type nesse artigo eu só vou usar para o campo email. Mas para o campo nome vamos colocar Min Chars = 3 e Max Chars = 200. Se for reparar assim que colocar Min Chars = 3 o para o campo nome a opção em vermelho com a mensagem em inglês, edite ela, repita para o máximo. 18
Faça o mesmo processo para o campo assunto e para o campo e-mail, porem para o campo e-mail não se esqueça de selecionar o Type (Email Address) dele para e-mail. Para o Text Area além de definirmos o número min e max de caracteres ainda podemos marcar as opções: Char Count: A medida que vai digitando vai mostrando um contador de caracteres ao lado. Chars remaining: Após definirmos o número máximo de caracteres essa opção é habilitada e a contagem será decrescente até você poder marcar o block extra characteres. 19
Salve e teste seu formulário. Ao tentar enviar seu formulário em Branco, ele avisará que é necessário preencher os campos. Vamos corrigir as mensagens em inglês. Visualize no modo código. Selecione o texto value is required e chame o comando de substituir (Menu Edit, Find And Replace. Preencha o texto em Replace, depois clique no botão Replace All. 20
Salve e teste novamente. 21
ADOBE WIDGET BROWSER Um Widget da Web é um componente de páginas da Web composto de HTML, CSS e JavaScript Exemplos de widgets da Web incluem acordeons, painéis com guias e calendários. Para acrescentar Widgets a sua página, clique no botão Extend Dreamweaver. Escolha a opção Widget Browser. Será dado um aviso que precisa ser instalado a aplicação. Clique em OK, você será direcionado ao Adobe Labs. 22
Faça o download do aplicativo AIR. Será perguntado se você quer realmente instalar o aplicativo. Clique em instalar. Você poderá definir se quer deixar um ícone dele em sua área de trabalho e se quer iniciar seu aplicativo após a instalação. 23
Clique em Continuar. Clique em aceitar na primeira tela. 24
Spry Image Slideshow. Ao clicar será necessário se logar no site da Adobe. 25
Ao finalizar o login, será mostrado a tela de detalhes do aplicativo. Você pode dar um Preview (topo a direita) par visualizar o efeito. Estando no modo Preview, pode clicar em CODE e analisar a codificação do componente. 26
Para adicionar o componente para seus projetos clique no botão Add My Widgets (rodapé à direita). Aceite os termos, depois clique no botão Go to My Widgets. Ao clicar em seu Widget, você terá os PRESETS do desenvolvedor e a 27
possibilidade de acrescentar seus PRESETS. Clique em Configure. Você poderá configurar se o efeito deve iniciar automaticamente, se deve ter 28
efeito de lide, de Pan e Zoom, o tempo de exibição da imagem, o tempo da transição. Podemos configurar os títulos de nossa galeria. Os frames. 29
A última opção é sobre os thumbnails como podemos configurá-los. Para salvar suas modificações clique no botão Save Preset, e ele agora fará parte de seus Presets. Retorne ao Dreamweaver, posicione o cursor onde deseja adicionar a sua galeria. Na Painel Insert, ao deixarmos em Commom, agora estará disponível a opção Widget. 30
Clique sobre ele, e será mostrada uma tela com seus Widgets. Clique em OK. Será necessário agora configurar seu Widget. Salve e clique no botão Live View, ou pelo seu navegador. 31
Para mudar as fotos, o processo é simples. No Dreamweaver selecione a primeira foto, depois pelo Painel Files, abra a pasta onde estão as fotos as serem trabalhadas. Basta apenas direcionar as imagens de thumbs e a grande para as que você possui em sua pasta. As fotos que estão a mais, basta selecioná-las pelo modo de código e excluir as suas linhas. Se precisar adicionar mais fotos, basta duplicar umas linha de código e mudar as imagens. 32
Você pode testar outros widgets, como por exemplo adicionar em sua página atualizações de seu Twitter. Zoom em parte da imagem Outro Widget bem interessante é o jqzoom, ele permite que você possa dar zoom em apenas uma parte de sua imagem. Alguns sites de comércio eletrônico usam este recurso com frequência. Clique sobre esta opção. Clique no botão Add My Widgets 33
Ele foi acrescentado aos seus Widgets, clique sobre ele. Na direita você pode configurar o Zoom na imagem. No rodapé desta tela você pode configurar o aplicativo clicando em Configure. 34
Após ter feito todas as configurações, no Dreamweaver na ABA Commom, clique no botão Widget. Escolha seu Widget. Clique em OK. 35
Salve e visualize em seu navegador. Para poder substituir a imagem você precisará criar a imagem grande e a menor que vai aparecer na tela. Depois visualize seu código. Observe a linha de chamada da imagem. Nela você tem BIG_IMAGE e SMALL_IMAGE, estas devem ser as imagens a serem trocadas. Google Maps Atualmente é comum adicionarmos ao nosso site ao invés de somente o endereço, telefone também o mapa. E sempre digo que não é necessário sempre ficar reinventando a roda, pois se preciso disponibilizar um mapa, nada melhor que o Google maps para isso. Podemos adicioná-lo de duas formas, uma copiando o código gerado pelo 36
Google maps. Acesse maps.google.com, digite o endereço desejado. Na direita clique em Link. Basta copiar o segundo bloco e colar em seu HTML. Salve e visualize em seu navegador. 37
A segunda forma é utilizando o Widget que faz este processo. Clique sobre ele e adicione ao seus Widgets. Vamos precisar sabe a latitude e longitude para podermos configurar o widget. Faça a busca normalmente no Google maps, clique com o botão direito e escolha O que há aqui? 38
Observe que será mostrada uma flecha e no campo de busca serão mostrada as coordenadas. Volte ao seu Widget. Clique em Configure. Coloque as suas coordenadas. 39
Salve seu preset. Repita o processo para inserir o Widget do mapa. Apenas certifique-se de escolher o seu Preset. Redes Sociais Para finalizar nosso estudo com Widgets e esta apostila vamos implementar em uma página HTML os botões de redes sociais. 40
Clique sobre esta opção e depois clique em Add My Widgets Clique em Configure e é necessário preencher os campos com seus endereços. Adicione o widget pelo Dreamweaver. 41
Salve e visualize. Com isso finalizamos o material de Dreamweaver Spry e Widgets onde foi possível acrescentar conteúdo rico em suas páginas sem a necessidade de nenhuma linha de código. Para saber mais sobre o Dreamweaver e aplicações WEB faça o download de nossas apostilas ou adquira o curso Webkit. 42