1. hands-on Talita pagani – dc/ufscar - @talitapagani SETEMBRO/2011

2. Atividade prática To-dolist Explorar os conceitos de Novos campos de formulários Validação de formulários Local Storage DragandDrop nativo 2 De 24

3. Atividade prática 3 De 24

4. Atividade prática Copie o template para o seu computador e descompacte Abra o arquivo index.html no Notepad++ 4 De 24

5. Atividade prática 5 De 24 Header e Nav Section Section Aside Footer

6. Atividade Prática <!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]--> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> 6 De 24

7. Atividade Prática Adicionando os campos de formulário: Substituir: [INPUT DESCRICAO] Por: <input type="text" id="desc" name="desc" placeholder="Descreva a tarefa" required/> Substituir: [INPUT DATA] Por: <input type="date" id="data" name="data" min="2011-09-01" max="2011-09-30" value="2011-09-01" required /> 7 De 24

8. Atividade Prática Adicionando os campos de formulário: Substituir: [INPUT PROGRESSO] Por: <input type="range" id="progresso" name="progresso" min="0" max="100" step="5" value="0" /> Substituir: [OUTPUT PROGRESSO] Por: <output id="progressValue" name="progressValue">0</output> 8 De 24

9. Atividade Prática Adicionando a função de armazenamento local: Substituir: [LOCALSTORAGE DESCRICAO] Por: localStorage.setItem( "task-desc-"+i, $("#desc").val() ); Substituir: [LOCALSTORAGE DATA] Por: localStorage.setItem( "task-date-"+i, $("#data").val() ); Substituir: [LOCALSTORAGE PROGRESSO] Por: localStorage.setItem( "task-progress-"+i, $("#progresso").val() ); 9 De 24

10. Atividade Prática Adicionando a função de remoção do armazenamento local: Substituir: [LOCALSTORAGE REMOVE DESCRICAO] Por: localStorage.removeItem("task-desc-"+id); Substituir: [LOCALSTORAGE REMOVE DATA] Por: localStorage.removeItem("task-date-"+id); Substituir: [LOCALSTORAGE REMOVE PROGRESSO] Por: localStorage.removeItem("task-progress-"+id); 10 De 24

11. Atividade Prática Como é inserido/retornado os itens da to-dolist $("#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>"); 11 De 24

12. Atividade Prática Entendendo as funções do draganddrop Eventos Dragstart Drag Dragenter Dragleave Dragover Drop Dragend 12 De 24

13. Atividade Prática varrows = document.querySelectorAll('#tasks .row'); vardragSrcEl_ = null; functionhandleDragStart(e) { e.dataTransfer.effectAllowed = 'move'; e.dataTransfer.setData('text/html', this.innerHTML); dragSrcEl_ = this; this.style.opacity = '0.4'; // this/e.targetisthesource node. $(this).addClass('moving'); } 13 De 24

14. Atividade Prática functionhandleDragOver(e) { if(e.preventDefault) { e.preventDefault(); } e.dataTransfer.dropEffect= 'move'; return false; } 14 De 24

15. Atividade Prática functionhandleDragEnter(e) { $(this).addClass('over'); } functionhandleDragLeave(e) { $(this).removeClass('over'); } 15 De 24

16. Atividade Prática functionhandleDrop(e) { if(e.stopPropagation) { e.stopPropagation(); } if (dragSrcEl_ != this) { dragSrcEl_.innerHTML = this.innerHTML; this.innerHTML= e.dataTransfer.getData('text/html'); } returnfalse; } 16 De 24

17. Atividade Prática functionhandleDragEnd(e) { this.style.opacity= '1'; [].forEach.call(rows, function(row) { $(row).removeClass('over'); $(row).removeClass('moving'); }); } 17 De 24

18. Atividade Prática [].forEach.call(rows, function(row) { row.setAttribute('draggable', 'true'); row.addEventListener('dragstart', handleDragStart, false); row.addEventListener('dragenter', handleDragEnter, false); row.addEventListener('dragover', handleDragOver, false); row.addEventListener('dragleave', handleDragLeave, false); row.addEventListener('drop', handleDrop, false); row.addEventListener('dragend', handleDragEnd, false); }); 18 De 24

19. Mais tutoriais Desenvolvendo um layout completohttp://line25.com/tutorials/coding-up-a-web-design-concept-into-html-css Criar uma página de erro 404 animadahttp://tutorialzine.com/2010/08/animated-404-not-found-page-css-jquery/ Exemplo simples de canvashttp://sixrevisions.com/html/bouncing-a-ball-around-with-html5-and-javascript/ 19 De 24

20. Referências http://www.w3.org/html/logo/ http://maujorsvg.com.br/ http://www.tableless.com.br/html5-diff http://www.tableless.com.br/contedo-flash-e-html http://www.slideshare.net/1Marc/html5-essentials http://www.slideshare.net/robhawkes/html5-canvas-the-future-of-graphics-on-the-web http://www.tableless.com.br/html5-estrutura-semantica 20 De 24

21. Referências http://www.slideshare.net/edu_agni/css3-seu-desenho-vai-virar-cdigo-e-agora http://tableless.com.br/html5/ http://www.tableless.com.br/afinal-o-que-muda-com-o-html-5 http://www.tableless.com.br/html-5-novos-elementos-e-atributos http://www.tableless.com.br/html5-brevissima-introducao 21 De 24

22. Referências http://planetoftheweb.com/components/promos.php?id=556 http://playground.html5rocks.com http://www.alistapart.com/articles/previewofhtml5/ http://html5doctor.com http://html5demos.com/ http://www.canvasdemos.com 22 De 24

23. Referências http://www.html5rocks.com/en/tutorials/dnd/basics/ http://www.html5rocks.com/en/mobile/workingoffthegrid.html http://www.html5rocks.com/en/tutorials/forms/html5forms/ http://www.net-kit.com/html5-css3-layout-tutorials-and-templates/ http://nithinbekal.com/2010/a-simple-to-do-list-app-using-html5-and-local-storage/ 23 De 24

24. www.talitapagani.com | talita.cpb@gmail.com | www.twitter.com/talitapagani Obrigada! 24 De 24