hands-on<br />Talita pagani – dc/ufscar - @talitapagani		              SETEMBRO/2011<br />
Atividade prática<br />To-dolist<br />Explorar os conceitos de<br />Novos campos de formulários<br />Validação de formulár...
Atividade prática<br />3<br />De 24<br />
Atividade prática<br />Copie o template para o seu computador e descompacte<br />Abra o arquivo index.html no Notepad++<br...
Atividade prática<br />5<br />De 24<br />Header e Nav<br />Section<br />Section<br />Aside<br />Footer<br />
Atividade Prática<br /><!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]--><...
Atividade Prática<br />Adicionando os campos de formulário:<br />Substituir: [INPUT DESCRICAO]<br />Por: <input type="text...
Atividade Prática<br />Adicionando os campos de formulário:<br />Substituir: [INPUT PROGRESSO]<br />Por: <input type="rang...
Atividade Prática<br />Adicionando a função de armazenamento local:<br />Substituir: [LOCALSTORAGE DESCRICAO]<br />Por: lo...
Atividade Prática<br />Adicionando a função de remoção do armazenamento local:<br />Substituir: [LOCALSTORAGE REMOVE DESCR...
Atividade Prática<br />Como é inserido/retornado os itens da to-dolist<br />$("#tasks").append("<div id='task-"+i+"' class...
Atividade Prática<br />Entendendo as funções do draganddrop<br />Eventos<br />Dragstart<br />Drag<br />Dragenter<br />Drag...
Atividade Prática<br />varrows = document.querySelectorAll('#tasks .row');<br />vardragSrcEl_ = null;<br />functionhandleD...
Atividade Prática<br />functionhandleDragOver(e) {<br />if(e.preventDefault) {<br />e.preventDefault();<br />}<br />e.data...
Atividade Prática<br />functionhandleDragEnter(e) {<br />	$(this).addClass('over');<br />}<br />functionhandleDragLeave(e)...
Atividade Prática<br />functionhandleDrop(e) {<br />if(e.stopPropagation) {<br />e.stopPropagation();<br />}<br />if (drag...
Atividade Prática<br />functionhandleDragEnd(e) {<br />this.style.opacity= '1';<br />[].forEach.call(rows, function(row) {...
Atividade Prática<br />[].forEach.call(rows, function(row) {<br />row.setAttribute('draggable', 'true');  <br />row.addEve...
Mais tutoriais<br />Desenvolvendo um layout completohttp://line25.com/tutorials/coding-up-a-web-design-concept-into-html-c...
Referências<br />http://www.w3.org/html/logo/<br />http://maujorsvg.com.br/<br />http://www.tableless.com.br/html5-diff<br...
Referências<br />http://www.slideshare.net/edu_agni/css3-seu-desenho-vai-virar-cdigo-e-agora<br />http://tableless.com.br/...
Referências<br />http://planetoftheweb.com/components/promos.php?id=556<br />http://playground.html5rocks.com<br />http://...
Referências<br />http://www.html5rocks.com/en/tutorials/dnd/basics/<br />http://www.html5rocks.com/en/mobile/workingoffthe...
www.talitapagani.com | talita.cpb@gmail.com | www.twitter.com/talitapagani<br />Obrigada!<br />24<br />De 24<br />
Upcoming SlideShare
Loading in …5
×

HTML5 Hands On

1,507 views

Published on

Published in: Technology
  • Be the first to comment

HTML5 Hands On

  1. 1. hands-on<br />Talita pagani – dc/ufscar - @talitapagani SETEMBRO/2011<br />
  2. 2. Atividade prática<br />To-dolist<br />Explorar os conceitos de<br />Novos campos de formulários<br />Validação de formulários<br />Local Storage<br />DragandDrop nativo<br />2<br />De 24<br />
  3. 3. Atividade prática<br />3<br />De 24<br />
  4. 4. Atividade prática<br />Copie o template para o seu computador e descompacte<br />Abra o arquivo index.html no Notepad++<br />4<br />De 24<br />
  5. 5. Atividade prática<br />5<br />De 24<br />Header e Nav<br />Section<br />Section<br />Aside<br />Footer<br />
  6. 6. Atividade Prática<br /><!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]--><br /><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> <br />6<br />De 24<br />
  7. 7. Atividade Prática<br />Adicionando os campos de formulário:<br />Substituir: [INPUT DESCRICAO]<br />Por: <input type="text" id="desc" name="desc" placeholder="Descreva a tarefa" required/><br />Substituir: [INPUT DATA]<br />Por: <input type="date" id="data" name="data" min="2011-09-01" max="2011-09-30" value="2011-09-01" required /><br />7<br />De 24<br />
  8. 8. Atividade Prática<br />Adicionando os campos de formulário:<br />Substituir: [INPUT PROGRESSO]<br />Por: <input type="range" id="progresso" name="progresso" min="0" max="100" step="5" value="0" /><br />Substituir: [OUTPUT PROGRESSO]<br />Por: <output id="progressValue" name="progressValue">0</output><br />8<br />De 24<br />
  9. 9. Atividade Prática<br />Adicionando a função de armazenamento local:<br />Substituir: [LOCALSTORAGE DESCRICAO]<br />Por: localStorage.setItem( "task-desc-"+i, $("#desc").val() );<br />Substituir: [LOCALSTORAGE DATA]<br />Por: localStorage.setItem( "task-date-"+i, $("#data").val() );<br />Substituir: [LOCALSTORAGE PROGRESSO]<br />Por: localStorage.setItem( "task-progress-"+i, $("#progresso").val() );<br />9<br />De 24<br />
  10. 10. Atividade Prática<br />Adicionando a função de remoção do armazenamento local:<br />Substituir: [LOCALSTORAGE REMOVE DESCRICAO]<br />Por: localStorage.removeItem("task-desc-"+id);<br />Substituir: [LOCALSTORAGE REMOVE DATA]<br />Por: localStorage.removeItem("task-date-"+id);<br />Substituir: [LOCALSTORAGE REMOVE PROGRESSO]<br />Por: localStorage.removeItem("task-progress-"+id);<br />10<br />De 24<br />
  11. 11. Atividade Prática<br />Como é inserido/retornado os itens da to-dolist<br />$("#tasks").append("<div id='task-"+i+"' class='row' draggable='true'><spanclass='desc'>"+localStorage.getItem("task-desc-"+i)+"</span> <spanclass='data'>"+localStorage.getItem("task-date-"+i)+"</span> <spanclass='progress'><progressvalue='"+localStorage.getItem("task-progress-"+i)+"' max='100'> <span id='taskProgress-"+i+"'>"+localStorage.getItem("task-progress-"+i)+"</span>% </progress></span> <spanclass='actions'><a href='#' class='remover'>remover</a></span></div>");<br />11<br />De 24<br />
  12. 12. Atividade Prática<br />Entendendo as funções do draganddrop<br />Eventos<br />Dragstart<br />Drag<br />Dragenter<br />Dragleave<br />Dragover<br />Drop<br />Dragend<br />12<br />De 24<br />
  13. 13. Atividade Prática<br />varrows = document.querySelectorAll('#tasks .row');<br />vardragSrcEl_ = null;<br />functionhandleDragStart(e) {<br />e.dataTransfer.effectAllowed = 'move';<br />e.dataTransfer.setData('text/html', this.innerHTML);<br />dragSrcEl_ = this;<br />this.style.opacity = '0.4';<br /> // this/e.targetisthesource node.<br /> $(this).addClass('moving');<br />}<br />13<br />De 24<br />
  14. 14. Atividade Prática<br />functionhandleDragOver(e) {<br />if(e.preventDefault) {<br />e.preventDefault();<br />}<br />e.dataTransfer.dropEffect= 'move';<br />return false;<br />}<br />14<br />De 24<br />
  15. 15. Atividade Prática<br />functionhandleDragEnter(e) {<br /> $(this).addClass('over');<br />}<br />functionhandleDragLeave(e) {<br /> $(this).removeClass('over');<br />}<br />15<br />De 24<br />
  16. 16. Atividade Prática<br />functionhandleDrop(e) {<br />if(e.stopPropagation) {<br />e.stopPropagation();<br />}<br />if (dragSrcEl_ != this) {<br />dragSrcEl_.innerHTML = this.innerHTML;<br />this.innerHTML= e.dataTransfer.getData('text/html');<br />}<br />returnfalse;<br />}<br />16<br />De 24<br />
  17. 17. Atividade Prática<br />functionhandleDragEnd(e) {<br />this.style.opacity= '1';<br />[].forEach.call(rows, function(row) {<br /> $(row).removeClass('over');<br /> $(row).removeClass('moving');<br />});<br />}<br />17<br />De 24<br />
  18. 18. Atividade Prática<br />[].forEach.call(rows, function(row) {<br />row.setAttribute('draggable', 'true'); <br />row.addEventListener('dragstart', handleDragStart, false);<br />row.addEventListener('dragenter', handleDragEnter, false);<br />row.addEventListener('dragover', handleDragOver, false);<br />row.addEventListener('dragleave', handleDragLeave, false);<br />row.addEventListener('drop', handleDrop, false);<br />row.addEventListener('dragend', handleDragEnd, false);<br />});<br />18<br />De 24<br />
  19. 19. Mais tutoriais<br />Desenvolvendo um layout completohttp://line25.com/tutorials/coding-up-a-web-design-concept-into-html-css<br />Criar uma página de erro 404 animadahttp://tutorialzine.com/2010/08/animated-404-not-found-page-css-jquery/<br />Exemplo simples de canvashttp://sixrevisions.com/html/bouncing-a-ball-around-with-html5-and-javascript/<br />19<br />De 24<br />
  20. 20. Referências<br />http://www.w3.org/html/logo/<br />http://maujorsvg.com.br/<br />http://www.tableless.com.br/html5-diff<br />http://www.tableless.com.br/contedo-flash-e-html<br />http://www.slideshare.net/1Marc/html5-essentials<br />http://www.slideshare.net/robhawkes/html5-canvas-the-future-of-graphics-on-the-web<br />http://www.tableless.com.br/html5-estrutura-semantica<br />20<br />De 24<br />
  21. 21. Referências<br />http://www.slideshare.net/edu_agni/css3-seu-desenho-vai-virar-cdigo-e-agora<br />http://tableless.com.br/html5/<br />http://www.tableless.com.br/afinal-o-que-muda-com-o-html-5<br />http://www.tableless.com.br/html-5-novos-elementos-e-atributos<br />http://www.tableless.com.br/html5-brevissima-introducao<br />21<br />De 24<br />
  22. 22. Referências<br />http://planetoftheweb.com/components/promos.php?id=556<br />http://playground.html5rocks.com<br />http://www.alistapart.com/articles/previewofhtml5/<br />http://html5doctor.com<br />http://html5demos.com/<br />http://www.canvasdemos.com<br />22<br />De 24<br />
  23. 23. Referências<br />http://www.html5rocks.com/en/tutorials/dnd/basics/<br />http://www.html5rocks.com/en/mobile/workingoffthegrid.html<br />http://www.html5rocks.com/en/tutorials/forms/html5forms/<br />http://www.net-kit.com/html5-css3-layout-tutorials-and-templates/<br />http://nithinbekal.com/2010/a-simple-to-do-list-app-using-html5-and-local-storage/<br />23<br />De 24<br />
  24. 24. www.talitapagani.com | talita.cpb@gmail.com | www.twitter.com/talitapagani<br />Obrigada!<br />24<br />De 24<br />

×