Efeitos Espetaculares em DHTML Hugo Dias [email_address] Materiais da palestra em www.hugodias.com.br
O DHTML <ul><li>Termo.. Não linguagem </li></ul><ul><li>Dynamic HTML, ou DHTML, é a união das tecnologias HTML e Javascrip...
Javascript <ul><li>Script client-side </li></ul><ul><li>Se consolidou como um padrão ao longos dos anos  </li></ul><ul><li...
DOM <ul><li>O Modelo de Objeto de Documentos (DOM) é uma interface de programação de aplicativos (API) para documentos bas...
DOM
Eventos <ul><li>onmouseover </li></ul><ul><li>onclick </li></ul><ul><li>onfocus </li></ul><ul><li>onmouseup </li></ul><ul>...
AJAX <ul><li>Asynchronous JavaScript and XML </li></ul><ul><li>Vai e volta do servidor sem reload </li></ul>
Acessibilidade <ul><li>Nunca o DHTML foi tão poderoso e tão Crossbrowser ao mesmo tempo </li></ul><ul><li>Hoje o JS é a es...
O que é um framework <ul><li>Prós = Facilidade. Tudo pronto. </li></ul><ul><li>Contras = Peso </li></ul><ul><li>Você pode ...
Não sou expert em JS e aí!? <ul><li>A grande fonte dos DHTMLs www.dynamicdrive.com   </li></ul><ul><li>Bom senso! </li></ul>
Praticando
Setup <ul><li>Demonstração do ECOTRIP </li></ul><ul><li>Preparação  </li></ul><ul><ul><li>Arquivos </li></ul></ul><ul><ul>...
Praticando <ul><li>Inclusão dos JS externos </li></ul><ul><li>Menu  </li></ul><ul><ul><li>Scriptaculous > Effect Toogle > ...
Importante <ul><li>Os lightboxes utilizam funcionalidades do Scriptaculous e do Prototype (AJAX) </li></ul>
Manuais <ul><li>Entenda melhor os frameworks utilizados </li></ul><ul><ul><li>A FieldGuide to Scriptaculous http://www.sla...
Conclusão <ul><li>Efeitos DHTML representam o novo flash? </li></ul>
Efeitos Espetaculares em DHTML Hugo Dias [email_address] Materiais da palestra em www.hugodias.com.br Dúvidas?
Próximos SlideShares
Carregando em…5
×

Palestra / Efeitos Espetaculares Em Dhtml / SDD

2.137 visualizações

Publicada em

Publicada em: Tecnologia
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
2.137
No SlideShare
0
A partir de incorporações
0
Número de incorporações
51
Ações
Compartilhamentos
0
Downloads
22
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Palestra / Efeitos Espetaculares Em Dhtml / SDD

  1. 1. Efeitos Espetaculares em DHTML Hugo Dias [email_address] Materiais da palestra em www.hugodias.com.br
  2. 2. O DHTML <ul><li>Termo.. Não linguagem </li></ul><ul><li>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. </li></ul>
  3. 3. Javascript <ul><li>Script client-side </li></ul><ul><li>Se consolidou como um padrão ao longos dos anos </li></ul><ul><li>Anos discriminado por influência FLASH (Rich Internet Applications - RIA) </li></ul>
  4. 4. DOM <ul><li>O Modelo de Objeto de Documentos (DOM) é uma interface de programação de aplicativos (API) para documentos baseados em XML. </li></ul><ul><li>É a definição da estrutura lógica dos documentos e o meio pelo qual um documento é acessado e manipulado. </li></ul><ul><li>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. </li></ul>
  5. 5. DOM
  6. 6. Eventos <ul><li>onmouseover </li></ul><ul><li>onclick </li></ul><ul><li>onfocus </li></ul><ul><li>onmouseup </li></ul><ul><li>onsubmit </li></ul>
  7. 7. AJAX <ul><li>Asynchronous JavaScript and XML </li></ul><ul><li>Vai e volta do servidor sem reload </li></ul>
  8. 8. Acessibilidade <ul><li>Nunca o DHTML foi tão poderoso e tão Crossbrowser ao mesmo tempo </li></ul><ul><li>Hoje o JS é a estrela da WEB </li></ul><ul><li>Todos os efeitos que serão usados funcionam do IE6 ao Safari </li></ul>
  9. 9. O que é um framework <ul><li>Prós = Facilidade. Tudo pronto. </li></ul><ul><li>Contras = Peso </li></ul><ul><li>Você pode misturar frameworks </li></ul><ul><li>Exemplo </li></ul><ul><ul><li>http://prototype-window.xilinus.com/samples.html </li></ul></ul><ul><ul><li>http://script.aculo.us/ </li></ul></ul>
  10. 10. Não sou expert em JS e aí!? <ul><li>A grande fonte dos DHTMLs www.dynamicdrive.com </li></ul><ul><li>Bom senso! </li></ul>
  11. 11. Praticando
  12. 12. Setup <ul><li>Demonstração do ECOTRIP </li></ul><ul><li>Preparação </li></ul><ul><ul><li>Arquivos </li></ul></ul><ul><ul><li>SSI > DW Templates </li></ul></ul><ul><ul><li>Preview in browser – FF </li></ul></ul><ul><ul><li>Analise do HTML e CSS </li></ul></ul>
  13. 13. Praticando <ul><li>Inclusão dos JS externos </li></ul><ul><li>Menu </li></ul><ul><ul><li>Scriptaculous > Effect Toogle > Tipo: Slider </li></ul></ul><ul><ul><li>Porque o primeiro desliza errado? </li></ul></ul><ul><li>Home </li></ul><ul><li>Atividades > MountainBiking </li></ul><ul><ul><li>AjaxTabs </li></ul></ul><ul><li>Roteiros </li></ul><ul><ul><li>Effect ScrollTo </li></ul></ul><ul><li>Busca </li></ul><ul><ul><li>Scriptaculous > AutoCompleter </li></ul></ul><ul><li>Lightbox para imagens </li></ul><ul><ul><li>Especiais = title=&quot;&quot; para legenda, setas do teclado, rel=&quot;&quot; para distinguir galerias </li></ul></ul><ul><ul><li>O substituto do popup </li></ul></ul><ul><ul><li>Mais informações > http://www.huddletogether.com/projects/lightbox2/ </li></ul></ul><ul><ul><li>Dica: Lightbox para outros tipos de conteúdo > http://stickmanlabs.com/lightwindow/#demos </li></ul></ul>
  14. 14. Importante <ul><li>Os lightboxes utilizam funcionalidades do Scriptaculous e do Prototype (AJAX) </li></ul>
  15. 15. Manuais <ul><li>Entenda melhor os frameworks utilizados </li></ul><ul><ul><li>A FieldGuide to Scriptaculous http://www.slash7.com/cheats/scriptaculous_fx1.pdf </li></ul></ul><ul><ul><li>Lightbox para imagens http://www.huddletogether.com/projects/lightbox2/ </li></ul></ul><ul><ul><li>Lightbox para outros tipos de conteúdo http://stickmanlabs.com/lightwindow/#demos </li></ul></ul><ul><ul><li>AjaxTabs http://www.dynamicdrive.com/dynamicindex17/ajaxtabscontent/index.htm </li></ul></ul>
  16. 16. Conclusão <ul><li>Efeitos DHTML representam o novo flash? </li></ul>
  17. 17. Efeitos Espetaculares em DHTML Hugo Dias [email_address] Materiais da palestra em www.hugodias.com.br Dúvidas?

×