O documento discute como o Dynamic HTML (DHTML) permite modificar dinamicamente páginas da web no cliente usando HTML e JavaScript sem recarregar a página. Ele também descreve como frameworks como o Scriptaculous e o Prototype podem ser usados para criar efeitos visuais como menus deslizantes, abas Ajax e lightboxes para imagens.

1. Efeitos Espetaculares em DHTML Hugo Dias [email_address] Materiais da palestra em www.hugodias.com.br

2. O DHTML Termo.. Não linguagem Dynamic HTML, ou DHTML, é a união das tecnologias HTML e Javascript para permitir que uma página Web seja modificada dinamicamente na própria máquina cliente, sem necessidade de novos acessos ao servidor web.

3. Javascript Script client-side Se consolidou como um padrão ao longos dos anos Anos discriminado por influência FLASH (Rich Internet Applications - RIA)

4. DOM O Modelo de Objeto de Documentos (DOM) é uma interface de programação de aplicativos (API) para documentos baseados em XML. É a definição da estrutura lógica dos documentos e o meio pelo qual um documento é acessado e manipulado. Com o Modelo de Objeto de Documentos os programadores podem criar documentos, navegar pela sua estrutura e adicionar, modificar ou apagar elementos e conteúdo.

5. DOM

6. Eventos onmouseover onclick onfocus onmouseup onsubmit

7. AJAX Asynchronous JavaScript and XML Vai e volta do servidor sem reload

8. Acessibilidade Nunca o DHTML foi tão poderoso e tão Crossbrowser ao mesmo tempo Hoje o JS é a estrela da WEB Todos os efeitos que serão usados funcionam do IE6 ao Safari

9. O que é um framework Prós = Facilidade. Tudo pronto. Contras = Peso Você pode misturar frameworks Exemplo http://prototype-window.xilinus.com/samples.html http://script.aculo.us/

10. Não sou expert em JS e aí!? A grande fonte dos DHTMLs www.dynamicdrive.com Bom senso!

11. Praticando

12. Setup Demonstração do ECOTRIP Preparação Arquivos SSI > DW Templates Preview in browser – FF Analise do HTML e CSS

13. Praticando Inclusão dos JS externos Menu Scriptaculous > Effect Toogle > Tipo: Slider Porque o primeiro desliza errado? Home Atividades > MountainBiking AjaxTabs Roteiros Effect ScrollTo Busca Scriptaculous > AutoCompleter Lightbox para imagens Especiais = title="" para legenda, setas do teclado, rel="" para distinguir galerias O substituto do popup Mais informações > http://www.huddletogether.com/projects/lightbox2/ Dica: Lightbox para outros tipos de conteúdo > http://stickmanlabs.com/lightwindow/#demos

14. Importante Os lightboxes utilizam funcionalidades do Scriptaculous e do Prototype (AJAX)

15. Manuais Entenda melhor os frameworks utilizados A FieldGuide to Scriptaculous http://www.slash7.com/cheats/scriptaculous_fx1.pdf Lightbox para imagens http://www.huddletogether.com/projects/lightbox2/ Lightbox para outros tipos de conteúdo http://stickmanlabs.com/lightwindow/#demos AjaxTabs http://www.dynamicdrive.com/dynamicindex17/ajaxtabscontent/index.htm

16. Conclusão Efeitos DHTML representam o novo flash?

17. Efeitos Espetaculares em DHTML Hugo Dias [email_address] Materiais da palestra em www.hugodias.com.br Dúvidas?