hands-on

TALITA PAGANI – DC/UFSCAR - @talitapagani SETEMBRO/2011

ATIVIDADE PRÁTICA

• To-do list• Explorar os conceitos de• Novos campos de formulários• Validação de formulários• Local Storage• Drag and Drop nativo

2De 24

ATIVIDADE PRÁTICA

3De 24

ATIVIDADE PRÁTICA

1.Copie o template para o seu computador e descompacte

2.Abra o arquivo index.html no Notepad++

4De 24

ATIVIDADE PRÁTICA

5De 24

Header e Nav

Section

Aside

Footer

Section

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>

6De 24

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

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>

8De 24

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() );

9De 24

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);

10De 24

ATIVIDADE PRÁTICA

• Como é inserido/retornado os itens da to-do list• $("#tasks").append("<div id='task-"+i+"'

class='row' draggable='true'><span class='desc'>"+localStorage.getItem("task-desc-"+i)+"</span> <span class='data'>"+localStorage.getItem("task-date-"+i)+"</span> <span class='progress'><progress value='"+localStorage.getItem("task-progress-"+i)+"' max='100'> <span id='taskProgress-"+i+"'>"+localStorage.getItem("task-progress-"+i)+"</span>% </progress></span> <span class='actions'><a href='#' class='remover'>remover</a></span></div>");

11De 24

ATIVIDADE PRÁTICA

• Entendendo as funções do drag and drop• Eventos• Dragstart• Drag• Dragenter• Dragleave• Dragover• Drop• Dragend 12

De 24

ATIVIDADE PRÁTICAvar rows = document.querySelectorAll('#tasks .row');var dragSrcEl_ = null;

function handleDragStart(e) {e.dataTransfer.effectAllowed = 'move';e.dataTransfer.setData('text/html',

this.innerHTML); dragSrcEl_ = this; this.style.opacity = '0.4'; // this/e.target is the source node.$(this).addClass('moving');

}

13De 24

ATIVIDADE PRÁTICA

function handleDragOver(e) {if (e.preventDefault) {

e.preventDefault();} e.dataTransfer.dropEffect = 'move';

return false;}

14De 24

ATIVIDADE PRÁTICA

function handleDragEnter(e) {$(this).addClass('over');

}

function handleDragLeave(e) {$(this).removeClass('over');

}

15De 24

ATIVIDADE PRÁTICAfunction handleDrop(e) {

if (e.stopPropagation) {e.stopPropagation();} if (dragSrcEl_ != this) {dragSrcEl_.innerHTML = this.innerHTML;this.innerHTML = e.dataTransfer.getData('text/html');}

return false;}

16De 24

ATIVIDADE PRÁTICA

function handleDragEnd(e) {this.style.opacity = '1';

[].forEach.call(rows, function (row) {$(row).removeClass('over');$(row).removeClass('moving');

});}

17De 24

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);});

18De 24

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/

19De 24

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

20De 24

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

21De 24

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

22De 24

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/

23De 24

OBRIGADA!www.talitapagani.com | talita.cpb@gmail.com | www.twitter.com/talitapagani

24De 24