Embed Size (px)
Citation preview
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.
Javascript
• Script client-side• Se consolidou como um padrão ao longos
dos anos • Anos discriminado por influência
FLASH (Rich Internet Applications - RIA)
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.
DOM
Eventos
• onmouseover• onclick• onfocus• onmouseup• onsubmit
AJAX
• Asynchronous JavaScript and XML• Vai e volta do servidor sem reload
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
O que é um framework
• Prós = Facilidade. Tudo pronto.• Contras = Peso• Você pode misturar frameworks• Exemplo– http://prototype-window.xilinus.com/samples.ht
ml
– http://script.aculo.us/
Não sou expert em JS e aí!?
• A grande fonte dos DHTMLswww.dynamicdrive.com
• Bom senso!
Praticando
Setup
• Demonstração do ECOTRIP• Preparação
– Arquivos– SSI > DW Templates– Preview in browser – FF– Analise do HTML e CSS
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
Importante
• Os lightboxes utilizam funcionalidades do Scriptaculous e do Prototype (AJAX)
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
Conclusão
• Efeitos DHTML representam o novo flash?
Efeitos Espetaculares em DHTML
Hugo [email protected]
Materiais da palestra em www.hugodias.com.br
Dúvidas?Dúvidas?
