O documento descreve novos recursos para a Web, incluindo:
1. Desenhar gráficos no elemento <canvas> usando JavaScript;
2. Arrastar e soltar elementos da página com Drag and Drop;
3. Melhorias nos controles de formulários do HTML5.
Este documento fornece uma introdução aos conceitos básicos do elemento <canvas> do HTML5 para renderização dinâmica de gráficos e animações em 3 frases ou menos:
1) Apresenta o elemento <canvas> e como ele pode ser usado para desenhar gráficos, imagens e animações diretamente no navegador usando JavaScript;
2) Explica como definir áreas de desenho, cores, formas básicas como linhas, retângulos e círculos e como escrever textos;
3) Apresenta exemplos de
JavaScript é uma linguagem de script que é interpretada pelo navegador para dar interatividade às páginas HTML. jQuery é um framework JavaScript que simplifica a manipulação do DOM HTML, tratamento de eventos e efeitos visuais. O documento apresenta os conceitos básicos de JavaScript e jQuery, incluindo seletores, manipulação do DOM, eventos e efeitos.
O documento apresenta uma introdução ao jQuery, biblioteca JavaScript que simplifica manipulação de elementos HTML, eventos e animações. Explica que jQuery aumenta produtividade, funciona em diversos navegadores e é utilizado por muitos sites. Detalha seleção e manipulação de elementos DOM e apresenta exemplos básicos de uso do jQuery.
O documento introduz jQuery e AJAX. Resume os principais pontos sobre jQuery: (1) é uma biblioteca JavaScript que facilita a manipulação do DOM e eventos; (2) permite códigos mais sucintos e independentes de navegador; (3) inclui recursos como AJAX e animações.
1) O documento apresenta um programa sobre como criar gráficos e animações eficientes em SVG para a Web.
2) É introduzido o que é SVG, seus benefícios de ser vetorial e escalável, e suas origens e versões.
3) São explicadas formas de criar, exibir, usar SVG em HTML, CSS e JavaScript, além de estilos e animações.
O documento fornece uma introdução abrangente ao SVG, apresentando seus principais elementos, como figuras, caminhos e texto, além de grupos, sistema de coordenadas e transformações. Explica como criar e usar arquivos SVG com HTML5 e CSS, incluindo animações, cores, filtros e máscaras.
O documento fornece exemplos de códigos JavaScript para criar diversos elementos interativos em páginas web, como ciclo de banners, janelas rolantes, painéis de menus, interligação de campos de formulários, calendário de eventos, duplo clique, menus suspensos e outros. O foco é ensinar técnicas básicas e avançadas de JavaScript por meio de exemplos práticos passo a passo.
O documento discute como escrever JavaScript de forma mais eficiente usando a biblioteca jQuery. Apresenta os principais conceitos como seletores, manipulação do DOM, eventos e efeitos que facilitam e simplificam o desenvolvimento front-end. Também fornece exemplos práticos de como implementar diversas funcionalidades com poucas linhas de código jQuery.
Este documento fornece uma introdução aos conceitos básicos do elemento <canvas> do HTML5 para renderização dinâmica de gráficos e animações em 3 frases ou menos:
1) Apresenta o elemento <canvas> e como ele pode ser usado para desenhar gráficos, imagens e animações diretamente no navegador usando JavaScript;
2) Explica como definir áreas de desenho, cores, formas básicas como linhas, retângulos e círculos e como escrever textos;
3) Apresenta exemplos de
JavaScript é uma linguagem de script que é interpretada pelo navegador para dar interatividade às páginas HTML. jQuery é um framework JavaScript que simplifica a manipulação do DOM HTML, tratamento de eventos e efeitos visuais. O documento apresenta os conceitos básicos de JavaScript e jQuery, incluindo seletores, manipulação do DOM, eventos e efeitos.
O documento apresenta uma introdução ao jQuery, biblioteca JavaScript que simplifica manipulação de elementos HTML, eventos e animações. Explica que jQuery aumenta produtividade, funciona em diversos navegadores e é utilizado por muitos sites. Detalha seleção e manipulação de elementos DOM e apresenta exemplos básicos de uso do jQuery.
O documento introduz jQuery e AJAX. Resume os principais pontos sobre jQuery: (1) é uma biblioteca JavaScript que facilita a manipulação do DOM e eventos; (2) permite códigos mais sucintos e independentes de navegador; (3) inclui recursos como AJAX e animações.
1) O documento apresenta um programa sobre como criar gráficos e animações eficientes em SVG para a Web.
2) É introduzido o que é SVG, seus benefícios de ser vetorial e escalável, e suas origens e versões.
3) São explicadas formas de criar, exibir, usar SVG em HTML, CSS e JavaScript, além de estilos e animações.
O documento fornece uma introdução abrangente ao SVG, apresentando seus principais elementos, como figuras, caminhos e texto, além de grupos, sistema de coordenadas e transformações. Explica como criar e usar arquivos SVG com HTML5 e CSS, incluindo animações, cores, filtros e máscaras.
O documento fornece exemplos de códigos JavaScript para criar diversos elementos interativos em páginas web, como ciclo de banners, janelas rolantes, painéis de menus, interligação de campos de formulários, calendário de eventos, duplo clique, menus suspensos e outros. O foco é ensinar técnicas básicas e avançadas de JavaScript por meio de exemplos práticos passo a passo.
O documento discute como escrever JavaScript de forma mais eficiente usando a biblioteca jQuery. Apresenta os principais conceitos como seletores, manipulação do DOM, eventos e efeitos que facilitam e simplificam o desenvolvimento front-end. Também fornece exemplos práticos de como implementar diversas funcionalidades com poucas linhas de código jQuery.
The document lists various landmarks, recreational activities, and miscellaneous topics including the Taj Mahal Palace & Tower in India, a thermal spa in Erding Germany, Belem Tower in Portugal, canola fields, a tip of the week, a park in Germany, a quote of the week, a NASA solar plane prototype, paragliding in Sanasar, and a railway between Lagalb.
M.Phil Computer Science Parallel and Distributed System ProjectsVijay Karan
List of Parallel and Distributed System IEEE 2006 Projects. It Contains the IEEE Projects in the Domain Parallel and Distributed System for M.Phil Computer Science students.
This document describes several C# projects from IEEE 2014, including summaries of each project. The projects cover topics like localizing jammers in wireless networks, network-coding based cloud storage, privacy-preserving search on encrypted cloud data, compatibility-aware cloud service composition, analyzing social media to understand students' experiences, viral marketing in social networks, opportunistic MAC for underwater sensor networks, WLAN monitoring systems, anonymous vehicle positioning in vehicular networks, and information flow control for cloud security.
Journal of the Taiwan Institute of Chemical Engineers 0 0 0 (2016) 1–20Al Baha University
Quantum chemical calculations, molecular dynamics simulation and experimental studies of using some azo dyes as corrosion inhibitors for iron. Part 1: Mono-azo dye derivatives
Paul Sansone Jr. discusses relationship selling and making referrals a priority. He provides data showing that referrals have the highest closing ratio and gross profit of all lead sources. Referrals come from friends, family, networking and past customers. Sansone has developed a tool called the EZ Referral Network to systematically get, track and pay referrals. Since implementing this program, his dealership has seen a 10% increase in overall business and a 30% increase in its regional sales ranking. The program pays referral agents $100 per customer and organizations $50 when their members refer customers.
The Israelites appeared between 2000-1500 BC as nomadic herders in Canaan. Abraham, considered the founding father, migrated there from Ur due to famine and later the Israelites lived as slaves in Egypt. Around 1200 BC, Moses led the Israelites out of Egypt in the Exodus and at Mount Sinai, God gave Moses the Ten Commandments establishing their moral laws and monotheistic religion. After fighting local tribes, the Israelites settled in Canaan with decentralized communities governed by judges.
The document discusses the division of powers between the national and state governments in the United States. It identifies powers that are exclusively held by the national government, such as the executive, legislative, and judicial branches, and powers held concurrently with states. Powers are also denied to the national government to protect individual liberties and federalism. Concurrently, states hold reserved powers but are denied the ability to conduct foreign policy, coin money, or deprive citizens of rights.
A empresa de tecnologia anunciou um novo smartphone com câmera avançada, tela grande e bateria de longa duração por um preço acessível. O aparelho tem como objetivo atrair mais consumidores para a marca e aumentar sua participação no competitivo mercado de smartphones.
Este documento contiene resúmenes de varias presentaciones realizadas el 5 de octubre de 2012 en Madrid sobre temas relacionados con el marketing y el turismo, incluyendo estrategias de marketing para empresas y marcas personales, marketing de experiencias enfocado al sector turístico, la evolución del turismo a través del tiempo, la creación de marcas 2.0 desde cero, y las nuevas tribus que se forman en Internet.
ليس فقط " لاَ تسْرِقِ " . لو أردنا أن نصيغها بأسلوب المسيح عندما قال : سمعتم أنه قيل أما أنا فأقول : اَ يَسْرِقِ السَّارِقُ فِي مَا بَعْدُ : أي لا يتوقف السارق عن السرقة فقط لكن يتحرك إيجابي في أمرين:
1. بَلْ بِالْحَرِيِّ يَتْعَبُ عَامِلاً الصَّالِحَ ليس لكي يؤكل نفسه فقط لكن ليكون له أن :
2. يُعْطِيَ مَنْ لَهُ احْتِيَاجٌ. و هذا هو التحول الـ 180 درجة الذي يعمله الإيمان في الإنسان.
O elemento canvas permite desenhos bitmap 2D e 3D no HTML usando JavaScript. Foi criado pela Apple e é suportado pelos principais navegadores, exceto no Internet Explorer que requer o uso do ExplorerCanvas. Exemplos demonstram como rotacionar imagens e imprimir pontos no canvas.
O documento descreve as principais novidades do HTML5 e CSS3, incluindo a reorganização semântica do HTML5 com elementos como header, nav, section e article, assim como recursos multimídia como vídeo e canvas, e propriedades avançadas de CSS3 como borda arredondada, sombras e transições. Exemplos são fornecidos para ilustrar o uso desses recursos.
The document lists various landmarks, recreational activities, and miscellaneous topics including the Taj Mahal Palace & Tower in India, a thermal spa in Erding Germany, Belem Tower in Portugal, canola fields, a tip of the week, a park in Germany, a quote of the week, a NASA solar plane prototype, paragliding in Sanasar, and a railway between Lagalb.
M.Phil Computer Science Parallel and Distributed System ProjectsVijay Karan
List of Parallel and Distributed System IEEE 2006 Projects. It Contains the IEEE Projects in the Domain Parallel and Distributed System for M.Phil Computer Science students.
This document describes several C# projects from IEEE 2014, including summaries of each project. The projects cover topics like localizing jammers in wireless networks, network-coding based cloud storage, privacy-preserving search on encrypted cloud data, compatibility-aware cloud service composition, analyzing social media to understand students' experiences, viral marketing in social networks, opportunistic MAC for underwater sensor networks, WLAN monitoring systems, anonymous vehicle positioning in vehicular networks, and information flow control for cloud security.
Journal of the Taiwan Institute of Chemical Engineers 0 0 0 (2016) 1–20Al Baha University
Quantum chemical calculations, molecular dynamics simulation and experimental studies of using some azo dyes as corrosion inhibitors for iron. Part 1: Mono-azo dye derivatives
Paul Sansone Jr. discusses relationship selling and making referrals a priority. He provides data showing that referrals have the highest closing ratio and gross profit of all lead sources. Referrals come from friends, family, networking and past customers. Sansone has developed a tool called the EZ Referral Network to systematically get, track and pay referrals. Since implementing this program, his dealership has seen a 10% increase in overall business and a 30% increase in its regional sales ranking. The program pays referral agents $100 per customer and organizations $50 when their members refer customers.
The Israelites appeared between 2000-1500 BC as nomadic herders in Canaan. Abraham, considered the founding father, migrated there from Ur due to famine and later the Israelites lived as slaves in Egypt. Around 1200 BC, Moses led the Israelites out of Egypt in the Exodus and at Mount Sinai, God gave Moses the Ten Commandments establishing their moral laws and monotheistic religion. After fighting local tribes, the Israelites settled in Canaan with decentralized communities governed by judges.
The document discusses the division of powers between the national and state governments in the United States. It identifies powers that are exclusively held by the national government, such as the executive, legislative, and judicial branches, and powers held concurrently with states. Powers are also denied to the national government to protect individual liberties and federalism. Concurrently, states hold reserved powers but are denied the ability to conduct foreign policy, coin money, or deprive citizens of rights.
A empresa de tecnologia anunciou um novo smartphone com câmera avançada, tela grande e bateria de longa duração por um preço acessível. O aparelho tem como objetivo atrair mais consumidores para a marca e aumentar sua participação no competitivo mercado de smartphones.
Este documento contiene resúmenes de varias presentaciones realizadas el 5 de octubre de 2012 en Madrid sobre temas relacionados con el marketing y el turismo, incluyendo estrategias de marketing para empresas y marcas personales, marketing de experiencias enfocado al sector turístico, la evolución del turismo a través del tiempo, la creación de marcas 2.0 desde cero, y las nuevas tribus que se forman en Internet.
ليس فقط " لاَ تسْرِقِ " . لو أردنا أن نصيغها بأسلوب المسيح عندما قال : سمعتم أنه قيل أما أنا فأقول : اَ يَسْرِقِ السَّارِقُ فِي مَا بَعْدُ : أي لا يتوقف السارق عن السرقة فقط لكن يتحرك إيجابي في أمرين:
1. بَلْ بِالْحَرِيِّ يَتْعَبُ عَامِلاً الصَّالِحَ ليس لكي يؤكل نفسه فقط لكن ليكون له أن :
2. يُعْطِيَ مَنْ لَهُ احْتِيَاجٌ. و هذا هو التحول الـ 180 درجة الذي يعمله الإيمان في الإنسان.
O elemento canvas permite desenhos bitmap 2D e 3D no HTML usando JavaScript. Foi criado pela Apple e é suportado pelos principais navegadores, exceto no Internet Explorer que requer o uso do ExplorerCanvas. Exemplos demonstram como rotacionar imagens e imprimir pontos no canvas.
O documento descreve as principais novidades do HTML5 e CSS3, incluindo a reorganização semântica do HTML5 com elementos como header, nav, section e article, assim como recursos multimídia como vídeo e canvas, e propriedades avançadas de CSS3 como borda arredondada, sombras e transições. Exemplos são fornecidos para ilustrar o uso desses recursos.
O documento resume os principais conceitos e propriedades de CSS e jQuery. CSS é usado para definir a apresentação visual de páginas web, enquanto jQuery simplifica manipulação de elementos, eventos e interações. O documento inclui exemplos de como aplicar estilos de texto, fundo, caixas e posicionamento com CSS e como selecionar e manipular elementos com jQuery.
Cobol Web com Net Express 5.1 - Parte 3Altair Borges
Este documento descreve como criar uma listview dinâmica usando COBOL, MySQL e recursos de front-end para acessar e exibir dados de um banco de dados. Ele explica como configurar o ambiente de desenvolvimento, conectar ao banco de dados MySQL, gerar copybooks, escrever o programa CGI-COBOL e implementar funcionalidades como paginação usando cursores.
Unidade Curricular de Laboratório Web, Curso de Licenciatura em Audiovisual e Multimédia, Escola Superior de Comunicação Social / Instituto Politécnico de Lisboa.
O documento discute o uso de pré-processadores CSS como Sass e Compass para criar designs responsivos. Ele explica como Sass fornece recursos como aninhamento, variáveis e mixins que facilitam o desenvolvimento. O documento também descreve como Compass e Breakpoint ajudam na compatibilidade entre navegadores e consultas de mídia, respectivamente. Por fim, é apresentado Susy como uma forma flexível de criar grids responsivos.
Desafios no desenvolvimento de uma aplicação real com Flex @ FUGSCJoão Zaratine
O documento discute três desafios no desenvolvimento de uma aplicação Flex: 1) Criar textos ricos com formatação, 2) Exibir conteúdo HTML complexo, e 3) Otimizar o carregamento e performance da aplicação. Vários métodos são testados antes de encontrar soluções como usar um editor HTML externo, exibir conteúdo em iframes, e carregar módulos de forma assíncrona após o carregamento inicial.
Este documento apresenta uma introdução ao Javascript e jQuery, incluindo: (1) Uma breve história do Javascript, (2) Como carregar o jQuery em uma página, (3) Como selecionar e manipular elementos DOM usando seletores jQuery e (3) Exemplos básicos de manipulação de estilo, animação e eventos.
O documento discute a evolução da web para a Web 3.0, com foco nas novas tecnologias como HTML5, CSS3 e Javascript que permitem experiências web mais ricas e inteligentes, incluindo semântica melhorada, armazenamento no navegador, efeitos gráficos avançados e novas APIs. Essas tecnologias ainda não têm suporte completo, mas já permitem iniciar a construção da próxima geração da web.
Edição de conteúdo web usando Javascript de ponta a pontaJorge Walendowsky
O documento discute o desenvolvimento de um sistema de edição de conteúdo em tempo real usando Javascript. Ele aborda problemas com sistemas anteriores, premissas para a nova solução, como renderização, edição, integrações e edição simultânea funcionariam usando tecnologias como Node.js, MongoDB e Web Sockets.
O documento descreve como usar CSS (Cascading Style Sheets) para criar estilos para sites. CSS permite separar o conteúdo da formatação, tornando mais fácil manter e atualizar a aparência de um site. Exemplos de código CSS demonstram como definir estilos para elementos como fontes, cores, layouts e navegação.
O documento apresenta como a biblioteca D3.js pode ser usada para visualizações de grandes conjuntos de dados. Discute como D3 representa dados graficamente usando SVG e HTML e fornece exemplos de visualizações com D3, incluindo barras, círculos e linhas. Também aborda desafios ao lidar com milhões de objetos e estratégias como navegação, dados sob demanda e algoritmos para usar D3 com grandes volumes de dados.
O documento resume a história da World Wide Web e dos padrões web como HTML, XHTML e CSS. Explica as diferenças entre HTML e XHTML e os benefícios da semântica e validação. Também discute como vincular folhas de estilo e melhorar a acessibilidade.
O documento introduz os principais conceitos de HTML5, incluindo: (1) suas novas tags semânticas como <section>, <nav> e <article>; (2) seus novos recursos como vídeo, áudio e armazenamento local; e (3) como substitui o XHTML ao oferecer maior flexibilidade e retrocompatibilidade.
Este documento fornece informações sobre um profissional de design responsivo. Em três frases:
O documento resume as qualificações e experiência de um designer especializado em design responsivo, incluindo formação acadêmica em design gráfico e interação. Ele atua como designer de interação, professor e diretor de uma escola de design. O foco é no desenvolvimento de sites e aplicativos com layout flexível adaptado a diferentes telas.
Slides do Workshop de HTML+CSS da Universidade de Verão de 2010 no Dep. de Eng. Informática em Coimbra.
O site de apoio está aqui: http://nei.dei.uc.pt/workshop-html-css/
O documento apresenta um mini curso sobre jQuery. Resume os principais pontos abordados no curso: 1) jQuery é um framework JavaScript que simplifica o desenvolvimento de scripts para interagir com HTML; 2) jQuery ajuda no controle do DOM, desenvolvimento facilitado de JavaScript, manipulação de CSS e efeitos visuais; 3) jQuery é compatível com os principais navegadores e possui uma grande comunidade de apoio.
O documento apresenta uma introdução sobre JavaScript, explicando porque estudar a linguagem. Apresenta algumas de suas características como ser interpretada, executada no lado do cliente e ser dinamicamente tipada. Explica também sobre tipos de dados como strings, números e booleanos.
Web 2.0 com Ajax: JQuery/PHP (Aula 02)Wagner Silva
Este documento apresenta uma aula sobre HTML DOM e JQuery. A aula discute conceitos como nós, propriedades e métodos do HTML DOM para manipular documentos. Também apresenta o framework JQuery, como selecionar elementos, utilizar funções ready e modificar exemplos anteriores para a sintaxe JQuery.
2. Índice resumido
1. Desenhar com o elemento CANVAS
2. Drag and Drop
3. Controlos de Formulários
4. Edição Inline
5. Trabalhar com o Histórico do Browser
6. Troca de Mensagens entre Janelas
7. Uso de Vídeo e Áudio
8. Armazenamento de dados
3. 1 - O elemento CANVAS
O elemento CANVAS é usado para desenhar gráficos.
É criado com a seguinte instrução:
<canvas height=“xxx” width =“yyy”>
</canvas>
Para desenhar no canvas usa-se JavaScript.
Pode-se desenhar linhas, arcos, formas complexas,
texto, imagens, etc.
O W3C definiu uma API (Application Programming
Interface), onde definiu o nome das funções e como
devem ser usadas.
http://www.w3.org/TR/2dcontext/
4. CANVAS API
A API define atributos dos elementos e as funções em JavaScript.
É necessário atribuir alguns atributos antes de usar as funções de desenho.
Exemplo:
Canvas1.fillStyle = xxx;
Canvas1.fillRectangle(x,y,dx,dy);
Lista de atributos e funções:
Styling
• attribute any strokeStyle; // (default black)
• attribute any fillStyle; // (default black)
Line Styles
• attribute DOMString lineCap; // “butt”, “round”, “square” (default “butt”)
• attribute DOMString lineJoin; // “miter”, “round”, “bevel” ) (default “miter”)
• attribute float lineWidth; // (default 1)
• attribute float miterLimit; // (default 10)
7. Exemplo de uso de CANVAS
1. Criar um ficheiro canvas.html com um editor de texto. *
2. Escrever o seguinte código, para criar o Canvas e fazer o setup do JavaScript:
<!DOCTYPE html>
<html>
<head>
<title>
Exemplo de Canvas
</title>
http://www.activestate.com/komodo-
<script type="text/javascript">
functionedit/downloads
loader()
{
}
</script>
</head>
<body onload="loader()">
<h1>Exemplo de Canvas</h1>
<canvas id="canvas" height="500" width="600">
</canvas>
</body>
</html>
•http://www.activestate.com/komodo-edit/downloads
Editor gratuito, com versões para Mac, Linux e Windows. Com Intellisense para HTML 5
8. 3. Adicionar o código JavaScript para criar um objecto do elemento Canvas
<script type="text/javascript">
function loader()
{
var canvas = document.getElementById('canvas');
var canvas1= canvas.getContext('2d');
}
</script>
4. Gravar o ficheiro no formato de texto.
5. Experimentar em vários Browsers.
9. Desenhar Rectângulos
6. Escrever o seguinte código para criar 3 rectângulos de diferentes cores
function loader()
{
var canvas = document.getElementById('canvas');
var canvas1= canvas.getContext('2d');
//Rectângulos
canvas1.fillStyle="rgba(0,0,200,1)"; //Côr Azul
canvas1.fillRect(30,30,75,70);
canvas1.fillStyle="rgb(200,200,0)";
canvas1.fillRect(70,50,55,70);
canvas1.fillStyle = "rgba(200, 0, 0, 1)";
canvas1.fillRect(90, 50, 75, 50);
}
7. Gravar e experimentar
16. 2 - Drag and Drop
Com o suporte de Drag and Drop, podemos deslocar elementos e texto pelo
browser, com o uso do rato ou outro dispositivo apontador.
Como exemplo, podemos deslocar itens para um cesto de compras;
configurar a nossa homepage; etc.
O Drag and Drop é suportado com a criação de novos atributos dos
elementos, como o atributo draggable que colocado a true permite a esse
elemento ser deslocado. No entanto todo o processamento é feito em
JavaScript.
A API para trabalhar com o Drag and Drop está definida em:
http://dev.w3.org/html5/spec/dnd.html
19. Colocar o atributo draggable nos elementos que se querem mover:
</head>
<body>
<h1>Drag and Drop Example</h1>
<div id="target1">
<div id="draggable1” draggable="true" >1
</div>
<div id="draggable2” draggable="true" >2
</div>
<div id="draggable3” draggable="true" >3
</div>
</div>
<div id="target2">
</div>
<div id="target3">
</div>
</body>
</html>
Experimentar em vários browsers
20. Colocar os atributos nos elementos de destino:
</head> ondragenter – evento que ocorre
<body>
<h1>Drag and Drop Example</h1> quando um elemento que está a ser
<div id="target1“ arrastado entra na área do elemento
ondragenter="return enter(event)"
ondragover="return over(event, this)"
ondrop="return drop(event)" > ondragover - evento que ocorre quando
</div> o elemento que está a ser arrastado está
<div id="target2“
ondragenter="return enter(event)" sobre o elemento
ondragover="return over(event,this)"
ondrop="return drop(event)" >
ondrop - evento que ocorre quando o
</div>
<div id="target3“ elemento é largado em cima do
ondragenter="return enter(event)" elemento
ondragover="return over(event,this)"
ondrop="return drop(event)" >
</div>
</body>
</html>
21. Colocar os atributos nos elementos a arrastar:
.
.
<div id="draggable1" draggable="true" ondragstart – evento que ocorre
ondragstart="return start(event)" quando o elemento draggable,
ondragend="return end(event)">1
</div>
começa a ser movimentado
<div id="draggable2" draggable="true“
ondragstart="return start(event)“ ondragend – evento que ocorre
ondragend="return end(event)">2 quando se larga o elemento
</div>
<div id="draggable3" draggable="true“
ondragstart="return start(event)“
ondragend="return end(event)">3
</div>
.
.
22. Implementar a função start()
.
.
<script type="text/javascript">
function start(e)
{
e.dataTransfer.effectedAllowed=“move”;
e.dataTransfer.setData("Data",e.target.getAttribute('id'));
e.dataTransfer.setDragImage(e.target, 0, 0);
return true;
}
</script>
</head>
.
.
No parâmetro e define-se os dados que vão ser transmitidos, e o modo.
Neste caso vai executar um move, coloca, com setData, o id do elemento que
está a ser arrastado.
A função setDragImage, define a imagem a ser transferida, neste caso o
elemento a ser arrastado, e um offset, neste caso 0,0
23. Implementar a função enter()
.
.
<script type="text/javascript">
function enter(e)
{
return true;
}
</script>
</head>
.
.
25. Implementar a função drop()
<script type="text/javascript">
function drop(e)
{
var iddraggable=e.dataTransfer.getData("Data");
e.target.appendChild(document.getElementById(iddraggable));
e.stopPropagation();
return false;
}
</script>
</head>
Implementar a função end()
<script type="text/javascript">
function end(e)
{
e.dataTransfer.clearData("Data");
return true;
}
</script>
</head>
26. 3 - Controlos de Formulários
O HTML 5 introduziu novos tipos de controlos
para a introdução de dados num formulário.
Estes controlos estendem o controlo <input>,
acrescentando outro tipos aos já existentes (text,
radio,etc.).
http://www.whatwg.org/specs/web-apps/current-work/multipage/forms.html
27. Os controlos de formulário são criados com o elemento <input>, definindo
no atributo type, qual o tipo de controlo:
28. Criar um ficheiro webform.html, e escrever este código
<!DOCTYPE html>
<html>
<head>
<title>
Web Form Example
</title>
</head>
<body>
<h1>Web Form Example</h1>
<form method=“post” action=“webforms.php”>
<table border=“1” cellpadding=“5”>
.
.
.
</table>
<input type=“submit” value=“Submit”>
</form>
</body>
</html>
31. Introduzir os controlos de Data e Hora
<table border=“1” cellpadding=“5”>
<tr>
<td>Date</td><td><input name=“date” type=“date”></td>
</tr>
<tr>
<td>Week</td><td><input name=“week” type=“week”></td>
</tr>
<tr>
<td>Month</td><td><input name=“month” type=“month”></td>
</tr>
<tr>
<td>Time</td><td><input name=“time” type=“time”></td>
</tr>
<tr>
<td>Datetime</td><td><input name=“datetime”
type=“datetime”></td>
</tr>
<tr>
<td>Local Datetime</td><td><input name=“datetimelocal”
type=“datetime-local”></td>
</tr>
</table>
32. Introduzir o controlo Color
<table border=“1” cellpadding=“5”>
.
<tr>
<td>Color</td><td><input name=“color” type=“color”></td>
</tr>
</table>
Introduzir o controlo Search
<table border=“1” cellpadding=“5”>
.
<tr>
<td>Search Query</td><td><input name=“query”
type=“query”></td>
</tr>
</table>
33. Criar o ficheiro webforms.php, que vai atender à submissão do formulário
<html>
<head>
<title>
Reading data from datetime controls
</title>
</head>
<body>
<h1>
Lêr os dados do contolo Datetime
</h1>
Introduziu:
<?php
echo $_REQUEST['datetime'];
?>
</body>
</html>
34. 4 – Edição Inline
HTML5 especifica que se pode fazer elementos
editáveis, ou seja, permitir que o utilizador edite o
seu conteúdo.
Isso não quer dizer que estamos a falar de campos
de texto, mas sim qualquer tipo de elementos,
tais como o elemento <div>.
Além disso, podemos fazer um documento inteiro
editável, incluindo elemento <iframe>. Também
se pode fazer a verificação ortográfica do texto
introduzido.
35. Para usar a edição usa-se três atributos:
• contenteditable – torna um elemento HTML editável
• designmode – torna todo o documento editável
• spellcheck – activa o corrector ortográfico
Exemplo do uso do atribbuto contenteditable
Criar o ficheiro editdiv.html
<!DOCTYPE html>
<html>
<head>
<title>
Editable <div> Element
</title>
</head>
<body>
<h1>Editable <div> Element</h1>
.
.
</body>
</html>
36. Introduzir o seguinte div com o atributo contenteditable a true
<body>
<h1>Editable <div> Element</h1>
<br> .
<div id="div" style='border:solid black; height: 300px; width: 400px'
contenteditable="true“>
</div>
</body>
</html>
Introduzir o código para criar o botão Negrito e executar o comando ‘bold’
<body>
<h1>Editable <div> Element</h1>
<div>
<input type="button" value=“Negrito"
onclick="document.execCommand('bold', false, null);">
</div>
.
<br>
<div id="div" style='border:solid black; height: 300px; width: 400px'
contenteditable="true">
</div>
</body>
38. Introduzir as funções de JavaScript para os botões “Criar Link” e “Mostrar Source”
</title>
<script type="text/javascript">
function showSource()
{
var content = document.getElementById("div").innerHTML;
content.replace(/</g, '<');
content.replace(/>/g, '>');
alert(content);
}
function createLink()
{
var url = prompt("Enter URL:", "http://");
if (url)
document.execCommand("createlink", false, url);
}
</script>
39. 5 – Trabalhar com o Histórico do Browser
O HTML5 permite o controle sobre o histórico do
navegador. O objeto History, permite avançar e
retroceder, de página para página no navegador,
o que significa que se pode usá-lo por exemplo,
para voltar três páginas atrás.
Também se pode armazenar dados num objeto
de estado no history. Ou seja, pode-se adicionar
dados no objeto de estado e, em seguida, para
armazená-lo com a página atual. Os dados
guardados n o objeto de estado, pode ser
recuperado, o que permite passar dados de uma
página para outra.
40. O object history faz parte do objecto window, assim é referido window.history.
Atributos e funções definidas na API:
• window.history.length -> número de páginas no history
• window.history.back() -> vai para a página anterior
• window.history.forward() -> vai para a página seguinte
• window.history.go([delta]) -> vai para delta páginas para trás ou para a frente
• window.history.pushState(data, title [, url ] ) -> guarda dados no history
• window.history.replaceState(data, title [, url ] ) -> substitui os dados do history
• window.onpopstate -> evento que ocorre quando se obtem os dados do history
41. 6 – Troca de Mensagens entre Janelas
O HTML5 permite enviar mensagens
em cross-window ou cross-domain.
Por exemplo, na página A, a página B
aparece num <iframe>. Podemos enviar
mensagens de A para B. Isto é cross-
window.
Se a página B estiver hospedada num
outro servidor, isto é cross-domain, que
era proibido anteriormente.
http://www.whatwg.org/specs/web-apps/current-work/multipage/comms.html
42. 7 – Uso de Vídeo e Áudio
HTML5 reproduz vídeos através do elemento <video>.
O formato de vídeo adoptado pelo w3c é o “Theora” (.ogg), pois é open-
source, e sem direitos de copyright. (condição para ser adoptado pelo w3c).
http://www.w3.org/TR/html5/the-iframe-
element.html#the-video-element
Exemplohttp://www.w3.org/2010/05/video/mediaevents.html
Para converter um outro formato para o formato .ogg, existem várias
aplicações, entre elas algumas gratuitas.
Exemplo: Miro Video Converter
43. Video API
Tem os seguintes atributos:
• autoplay – true ou false – toca automaticamente
• controls – coloca os botões de controlo do vídeo
• height – largura do vídeo
• loop – quando chega ao fim recomeça
• poster – o url de uma imagem, caso o vídeo não esteja disponível
• preload – none – não faz o preload do vídeo
- metadata – carrega a informação do vídeo(dimensões, 1º frame, etc.)
- auto – o browser decido o que fazer
• src – o url do vídeo
• width – a altura do vídeo
• onerror – o evento que dispara caso haja um erro no vídeo
www.w3.org/TR/html5/video.html
44. <!DOCTYPE html>
<html>
<head>
<title> HTML 5 Video
</title>
</head>
<body>
<h1>
HTML 5 Video
</h1>
<video width="360" height="240" autoplay="false" controls="true” loop>
<source src="video.mp4" type="video/mp4"/>
<source src="video.ogg" type="video/ogg"/>
<source src="video.webm" type="video/webm"/>
<p> Video cannot be displayed </p>
</video>
<audio src="L.A. Woman.theora.ogv" autoplay=true controls>
</body>
</html>
45. 8 – Armazenamento de dados
O html, não tem como guardar os dados entre vários acessos às página. Quando se
faz uma atualização à página, os dados de um formulário são apagados. Para dar a
volta a isso usa-se código de servidor.
Com a introduçaõ do HTML5, isso deixou de ser necessário.
Pode-se guardar os dados ou no servidor, na sessão iniciada pelo browser; ou no
próprio browser.
46. Trabalho Módulo 2
Elaborar um documento que explique como funcionam as seguintes
capacidades do HTML5:
-Trabalhar com o Histórico do Browser
-Troca de Mensagens entre Janelas
-Armazenamento de dados
Para cada uma delas, criar páginas de exemplos, que demonstrem
essas capacidades