html5 hands on
TRANSCRIPT
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 | [email protected] | www.twitter.com/talitapagani
24De 24