Introdução ao HTML5 Canvas
|
|
|
- Milena Rodrigues Barroso
- 5 Há anos
- Visualizações:
Transcrição
1 Introdução ao HTML5 Canvas Compilação feita com base nas referências por: Prof. José Cintra Download dos exemplos disponíveis no GitHub
2 Apresentação O objetivo deste minicurso é fornecer conceitos básicos sobre o elemento CANVAS do HTML5, destinado a delimitar uma área para renderização dinâmica de gráficos e animações. 2
3 Introdução <canvas> é um elemento HTML que pode ser usado para desenhar gráficos, exibir imagens, realizar animações, jogos, etc. Isso pode ser feito diretamente no browser, sem a necessidade de plug-ins, sendo que, todo o trabalho de criação e animação, é realizado através de linguagens de programação (normalmente Javascript). O elemento foi originalmente introduzido pela Apple para o navegador Safari mas, atualmente, a maioria dos browsers modernos oferecem suporte. 3
4 Conceitos Iniciais O canvas é como um quadro branco onde vamos fazer nossos desenhos. Para defini-lo, crie um arquivo HTML através de qualquer editor de texto e digite o seguinte conteúdo: <html> <body> <canvas id= canvas width= 400" height= 400 style="border:1px solid;"> Seu navegador não suporta Canvas do HTML5. </canvas> </body> </html> 2 Nesse exemplo, criamos uma área de 400x400 pixels com borda. Caso o browser não tenha suporte para o canvas, será exibida a mensagem de fallback. 4
5 Conceitos Iniciais A programação do canvas pode ser feita com a linguagem Javascript. Para isso, precisamos definir (obter) um objeto gráfico que vai representar a área de desenho e outro objeto para fazer o papel do pincel. Dessa forma: <script> var canvas = document.getelementbyid( canvas ); var pincel = canvas.getcontext( 2d ); </script> 5
6 Conceitos Iniciais A área de desenho é medida em pixels e assemelha-se ao plano cartesiano, com a diferença de que não existem coordenadas negativas. 6
7 Cores A cor do pincel (preto por padrão) pode ser definida através de quatro formas: Cores predefinidas (blue, green,etc.) Um valor hexadecimal como #FF0000 ou #555 Um valor RGB como rgb(255, 0, 0). Uma valor RGB com opacidade como rgba(0,0,255,0.3) Além disso, pode-se definir o que vai ser pintado: Cor do contorno (stroke style) Cor de preenchimento (fill style) Veja aqui uma tabela de cores: HTML Color Names 7
8 Cores Exemplos de definição de cores <script> var canvas = document.getelementbyid( canvas ); var pincel = canvas.getcontext( 2d ); // 4 maneiras de setar a cor de preenchimento para laranja pincel.fillstyle = 'orange'; pincel.fillstyle = '#FFA500'; pincel.fillstyle = 'rgb(255, 165, 0)'; pincel.fillstyle = 'rgba(255, 165, 0, 1)'; // 4 maneiras de setar a cor de contorno para laranja pincel.strokestyle = 'orange'; pincel.strokestyle = '#FFA500'; pincel.strokestyle = 'rgb(255, 165, 0)'; pincel.strokestyle = 'rgba(255, 165, 0, 1)'; </script> Para maiores detalhes e mais opções para trabalhar com cores, veja esse tutorial: MDN web docs Canvas Colors 8
9 Paths Um Path (caminho) é uma forma de indicar que você pretende realizar uma série de desenhos no canvas que vão ser renderizados todos juntos no final do path e, por isso, são tratados como uma unidade. Para isso, podemos usar os seguintes métodos: 1. beginpath: Inicia ou limpa um path 2. closepath: Indica o fim do path 3. stroke: Desenha os contornos dos desenhos do path 4. fill: Preenche as figuras criadas no path Obs: Os dois últimos métodos fazem um closepath implícito. 9
10 Figuras Básicas - Linhas Para desenharmos linhas, podemos usar os métodos abaixo: moveto(x,y) Move o pincel para a coordenada (x,y) lineto(x,y) Desenha uma linha iniciando na posição do pincel até o ponto (x,y) Para maiores detalhes e mais opções para trabalhar com linhas, veja esse tutorial: HTML5 Canvas Lines 10
11 Figuras Básicas - Linhas Exemplo de desenho de uma linha: <script> var canvas = document.getelementbyid( canvas ); var pincel = canvas.getcontext( 2d ); pincel.beginpath(); pincel.moveto(10,45); pincel.lineto(180,45); pincel.strokestyle = red ; pincel.stroke(); </script> Resultado: 11
12 Figuras Básicas - Retângulos Para desenhar um retângulo, usamos o método rect: rect(x,y,width,height); Onde: x,y: Coordenada do vértice superior esquerdo Width: Largura do retângulo Height: Altura do retângulo Para maiores detalhes e mais opções para trabalhar com retângulos, veja esse tutorial: HTML Canvas rect 12
13 Figuras Básicas - Retângulos Exemplo do desenho de um retângulo: <script> var canvas = document.getelementbyid( canvas ); var pincel = canvas.getcontext( 2d ); //Desenho de um retângulo amarelo com borda preta pincel.beginpath(); pincel.rect(188, 50, 200, 100); pincel.fillstyle = 'yellow'; pincel.strokestyle = 'black'; pincel.fill(); pincel.stroke(); </script> Resultado: 13
14 Figuras Básicas - Círculos Para desenhar um círculo, usamos o método arc: arc(x, y, r, sangle, eangle, counterclockwise) Onde: x,y: Coordenada do centro do círculo; r: O Raio do círculo; sangle: Ângulo de início da circunferência; eangle: Ângulo final da circunferência; Counterclockwise: Parâmetro opcional indicando se o desenho será no sentido horário ou não. Para maiores detalhes e mais opções para trabalhar com círculos, veja esse tutorial: HTML Canvas arc 14
15 Figuras Básicas - Círculos Exemplo do desenho de um círculo: <script> var canvas = document.getelementbyid( canvas ); var pincel = canvas.getcontext( 2d ); //Desenho de um círculo verde com borda preta pincel.beginpath(); pincel.arc(100,75,50,0,2*math.pi); pincel.fillstyle = 'green'; pincel.strokestyle = '#003300'; pincel.linewidth = 5; pincel.fill(); pincel.stroke(); </script> Resultado: 15
16 Figuras Básicas Outras figuras As demais formas gráficas devem ser desenhadas a partir das figuras básicas (linhas, retângulos e círculos) Veja, por exemplo, o desenho de um triângulo: <script> var canvas = document.getelementbyid( canvas ); var pincel = canvas.getcontext( 2d ); pincel.beginpath(); pincel.moveto(100, 100); Resultado: pincel.lineto(100, 300); pincel.lineto(300, 300); pincel.closepath(); pincel.linewidth = 4; pincel.strokestyle = '#666666'; pincel.fillstyle = "#FFCC00"; pincel.stroke(); pincel.fill(); </script> 16
17 Textos Para escrever textos no canvas, usamos as seguintes propriedades e métodos: font Define as propriedades da fonte usada nos textos filltext(text,x,y) Escreve um texto com preenchimento stroketext(text,x,y) Excreve um texto sem preenchimento Onde: x,y: representam as coordenadas onde se deseja escrever o texto. Obs: Pra centralizar o texto no canvas, use: canvas.width/2, canvas.height/2 Maiores detalhes: HTML Canvas Text 17
18 var ctx = document.getelementbyid('canvas').getcontext('2d'); Textos Exemplo de escrita de textos <script> var pincel = document.getelementbyid('canvas').getcontext('2d'); pincel.font = "30px Arial"; pincel.strokestyle = 'green'; pincel.fillstyle = 'red'; pincel.filltext("hello,10,50); pincel.stroketext( World,10,200); </script> Resultado: 18
19 Imagens Você pode Exibir arquivos de imagens (jpg,png) através do comando abaixo drawimage(image, dx, dy) Onde: image: é um objeto do tipo image, que representam uma imagem lida de um arquivo ou de um elemento img do html dx,dy: As coordenadas de destino no canvas Obs: Antes é necessário criar um objeto image. Maiores detalhes: HTML Canvas Image 19
20 var ctx = document.getelementbyid('canvas').getcontext('2d'); Imagens Exemplo: desenhando a imagem de um arquivo <script> var pincel = document.getelementbyid('canvas').getcontext('2d'); var img = new Image(); img.onload = function () { pincel.drawimage(img, 0, 0); }; img.src = 'html5.png'; </script> Resultado: 20
21 var ctx = document.getelementbyid('canvas').getcontext('2d'); Exemplo 1 Desenhando uma casa <script> var pincel = document.getelementbyid('canvas').getcontext('2d'); pincel.moveto(100, 25); pincel.linewidth = 2; pincel.lineto(300, 25); pincel.lineto(325, 100); pincel.lineto(150, 100); pincel.closepath(); pincel.fillstyle = "#C81E1E"; pincel.fill(); pincel.moveto(100, 25); pincel.lineto(25, 100) pincel.moveto(30, 95); pincel.lineto(30, 200); pincel.lineto(150, 200); pincel.stroke(); pincel.moveto(150, 100); pincel.lineto(150, 200); pincel.lineto(325, 190); pincel.lineto(325, 100); pincel.closepath(); pincel.stroke(); pincel.fillstyle = "#91913C"; pincel.fillrect(68, 125, 40, 75); </script> Créditos: 21
22 var ctx = document.getelementbyid('canvas').getcontext('2d'); Exemplo 2 Desenhando o Smiley <script> var pincel = document.getelementbyid('canvas').getcontext('2d'); pincel.beginpath(); pincel.arc(75, 75, 50, 0, Math.PI * 2, true); // Rosto pincel.fillstyle = 'yellow'; pincel.fill(); pincel.moveto(110, 75); pincel.arc(75, 75, 35, 0, Math.PI, false); // Boca pincel.moveto(65, 65); pincel.arc(60, 65, 5, 0, Math.PI * 2, true); // olho esquerdo pincel.moveto(95, 65); pincel.arc(90, 65, 5, 0, Math.PI * 2, true); // Olho direito pincel.stroke(); </script> Créditos: 22
23 var ctx = document.getelementbyid('canvas').getcontext('2d'); Exemplo 3 Quadrados Aninhados <script> //Usando estruturas de repetição para desenhar os quadrados var pincel = document.getelementbyid('canvas').getcontext('2d'); for(x = 70; x > 0;x -= 10){ pincel.strokerect(100-(x/2),100-(x/2),x,x) } </script> Créditos: 23
24 Conclusão Os exemplos fornecidos devem lhe trazer algumas ideias sobre o que você pode fazer com o canvas e irá fornecer trechos de código que podem lhe ajudar na construção do seu próprio conteúdo. No entanto, não esgotamos o assunto. Existem vários outros recursos disponibilizados pela API que não cobrimos nesse minicurso. Para se aprofundar mais sobre o assunto, consulte a bibliografia a seguir. 24
25 Referências Web Mozilla MDN W3Schools HTML5 Canvas Tutorials Livros CANVAS HTML 5 Composição gráfica e interatividade na web Roque Fernando Marcos Sousa Brasport Editora Desenvolva jogos com HTML5 Canvas e JavaScript Éderson Cássio Editora Casa do Código 25
Introdução a Programação de Jogos
Introdução a Programação de Jogos Aula 05 Introdução ao Löve Edirlei Soares de Lima Hello World em Löve function love.draw() love.graphics.print("hello World", 360, 300) end O comando
Introdução à Engenharia ENG1000
Introdução à Engenharia ENG1000 Aula 07 Introdução a Löve2D 2018.1 Prof. Augusto Baffa Hello World em Löve2D function love.draw() love.graphics.print("hello World", 360, 300) end
Gráficos Comerciais na WEB com Chart.js
Gráficos Comerciais na WEB com Chart.js Compilação feita com base nas referências por: José Augusto Cintra Professor da Faculdade Sumaré SP Analista de TI da Empresa PRODAM SP josecintra@josecintra.com
AULA 11 DESENVOLVIMENTO DE GAMES UTILIZANDO O HTML5
AULA 11 DESENVOLVIMENTO DE GAMES UTILIZANDO O HTML5 HTML5 E JAVASCRIPT O HTML5 é a mais recente versão do padrão HTML; fornece-nos muitos recursos para uma maior interatividade e suporte de mídia. Esses
PROGRAMAÇÃO PARA INTERNET RICA INTRODUÇÃO AO ACTIONSCRIPT 3. Prof. Dr. Daniel Caetano
PROGRAMAÇÃO PARA INTERNET RICA INTRODUÇÃO AO ACTIONSCRIPT 3 Prof. Dr. Daniel Caetano 2012-1 Objetivos Apresentar os conceitos básicos da linguagem ActionScript 3.0 Capacitar o aluno para criar programas
PROGRAMAÇÃO PARA INTERNET RICA INTRODUÇÃO AO ACTIONSCRIPT 3. Prof. Dr. Daniel Caetano
PROGRAMAÇÃO PARA INTERNET RICA INTRODUÇÃO AO ACTIONSCRIPT 3 Prof. Dr. Daniel Caetano 2012-2 Objetivos Apresentar os conceitos básicos da linguagem ActionScript 3.0 Capacitar o aluno para criar programas
Exercícios Práticos HTML5 + CSS3. Profa. Flávia Pereira de Carvalho
Exercícios Práticos HTML5 + CSS3 Profa. Flávia Pereira de Carvalho Maio de 2018 1 Exemplos e Exercícios Práticos HTML5 e CSS3 1) Primeiro exemplo: 2) Seletor ID: 3) Seletor de Classe: 2 4) Também é possível
Exemplos Práticos HTML5 + CSS3. Profa. Flávia Pereira de Carvalho
Exemplos Práticos HTML5 + CSS3 Profa. Flávia Pereira de Carvalho Agosto de 2018 2 1 Exemplos Práticos HTML5 e CSS3 1) Primeiro exemplo: 2) Seletor ID: 3) Seletor de Classe: Profa. Flávia Pereira de Carvalho
Animação - Movendo objeto com HTML CANVAS
Animação - Movendo objeto com HTML CANVAS Para executar estes exemplos utilizaremos o site: https://www.tutorialspoint.com Escolha o opção JS (Javascript) Etapas básicas de animação Estas são as etapas
Criação de Animação com Sprite com HTML CANVAS
Criação de Animação com Sprite com HTML CANVAS Para executar estes exemplos utilizaremos nosso navegador, por causa dos arquivos de imagem. Exemplo 2 Sprites A sequência de Sprite utilizada neste exemplo
Canvas. <canvas id= meucanvas width= 200 height= 100 ></canvas>
Canvas Uma tela bitmap dependente de resolução que pode ser usada para renderização de textos, gráficos, jogos ou outras imagens em tempo real. Permite desenhar elementos gráficos via Javascript. Desenha
Redes de Computadores I Seminário Novas Tecnologias em Redes HTML5. Jessica da Silva Hahn Letícia Aparecida Coelho
Redes de Computadores I Seminário Novas Tecnologias em Redes HTML5 Jessica da Silva Hahn Letícia Aparecida Coelho Internet HTTP Dois métodos de requisição HTTP são os mais utilizados: GET e POST Outros
modelo de apresentação estilos, cores e transparência traços e preenchimento Helder da Rocha
modelo de apresentação estilos, cores e transparência traços e preenchimento Helder da Rocha (helder@) Modelo de apresentação gráfica Objetos em SVG são desenhados em contextos gráficos individuais Grupos,
Processamento Digital de Imagens
Processamento Digital de Imagens Aula 03 Prof. Diemesleno Souza Carvalho diemesleno@iftm.edu.br http://www.diemesleno.com.br Na aula passada vimos... Na aula passada vimos... Unidade II - Básico sobre
AULA 11. OBJETIVO: Conhecer e desenhar as Formas Geométricas VISÃO GERAL DA GEOMETRIA. Nesta aula vamos aprender a utilizar a classe Geometry.
AULA 11 OBJETIVO: Conhecer e desenhar as Formas Geométricas VISÃO GERAL DA GEOMETRIA Nesta aula vamos aprender a utilizar a classe Geometry. O QUE É UMA GEOMETRIA? A classe Geometry e as classes que derivam
CSS Cascading Style Sheets (Folhas de Estilo em Cascata)
CSS Cascading Style Sheets (Folhas de Estilo em Cascata) Instituto Federal de Educação, Ciência e Tecnologia do Triângulo Mineiro Prof. Edwar Saliba Júnior 1 Parte I CSS Basic 2 CSS Determina como elementos
HTML 5 e o desenvolvimento de Jogos Digitais
HTML 5 e o desenvolvimento de Jogos Digitais Marcelo Henrique dos Santos http://www.marcelohsantos.com marcelosantos@outlook.com Mestrando em Educação (em andamento) Negócios em Mídias Digitais (em andamento)
Qual a razão do termo cascata na terminologia CSS? A forma como as regras de estilo são aplicadas obedece a 3 princípios básicos: herança,
Qual a razão do termo cascata na terminologia CSS? A forma como as regras de estilo são aplicadas obedece a 3 princípios básicos: herança, especificidade do seletor e proximidade do elemento estilizado.
Pedro Vasconcelos DCC/FCUP. Programação Funcional 11 a Aula Gráficos usando Gloss
Programação Funcional 11 a Aula Gráficos usando Gloss Pedro Vasconcelos DCC/FCUP 2014 A biblioteca Gloss Para fazer desenhos, animações, simulações e jogos 2D; Simples: pensada para ensino de programação;
Cascading: Style Sheet
André Kawamoto 2010 O que é CSS Cascading: Múltiplos estilos podem se sobrepor para especificar uma variedade de estilos desde um website inteiro até um único elemento. Qual estilo é aplicado diz respeito
AULA 02 Introdução (HTML, CSS e Javascript) PROGRAMAÇÃO PARA WEB Marcelo Henrique dos Santos
AULA 02 Introdução (HTML, CSS e Javascript) Mestrado em Educação (em andamento) MBA em Negócios em Mídias Digitais MBA em Marketing e Vendas Especialista em games : Produção e Programação Bacharel em Sistema
HTML 5 LINGUAGEM DE MARCAÇÃO E ESTILO - CSS - Prof. Rosemary Melo
HTML 5 LINGUAGEM DE MARCAÇÃO E ESTILO - CSS - Prof. Rosemary Melo RESUMO Linguagem de Marcação e Estilo - CSS DESCRIÇÃO Regra CSS Vinculação Inline Vinculação Incorporada Vinculação Externa TAGS seletor
Recurso Didáctico. Dossier Técnico Pedagógico Projecto: 5742/2008/22 Acção: 5742/2008/ Formador[a]
![Recurso Didáctico. Dossier Técnico Pedagógico Projecto: 5742/2008/22 Acção: 5742/2008/ Formador[a]](/thumbs/75/71501484.jpg "Recurso Didáctico. Dossier Técnico Pedagógico Projecto: 5742/2008/22 Acção: 5742/2008/ Formador[a]")
Recurso Didáctico Formador[a] Sónia Rodrigues UFCD / UC 0793 Scripts CGI e Folhas de Estilo Data 05/05/2009 Contextualização / Objectivos Documentação de apoio Orientação Pedagógica Apontamentos de Folhas
F E B A C. Exercício de Fixação 3. FACULDADE DE EDUCAÇÃO DE BACABAL FEBAC Credenciamento MEC/Portaria: 472/07 Resolução: 80/07
F E B A C FACULDADE DE EDUCAÇÃO DE BACABAL FACULDADE DE EDUCAÇÃO DE BACABAL FEBAC Credenciamento MEC/Portaria: 472/07 Resolução: 80/07 Curso: Sistemas para Internet Período: 2 o Disciplina: Fundamentos
HTML: Recursos Básicos e Especiais
Linguagem de Programação para Web HTML: Recursos Básicos e Especiais Prof. Mauro Lopes 1-31 34 Objetivo Iremos aqui apresentar os recursos básicos e especiais do HTML. Serão apresentados, o uso de fontes,
INTRODUÇÃO À PROGRAMAÇÃO EXERCÍCIO DE REVISÃO
INTRODUÇÃO À PROGRAMAÇÃO EXERCÍCIO DE REVISÃO Questões de concurso 1. Na interface Web, ele é um arquivo independente do arquivo HTML no qual são declaradas propriedades e valores de estilização para os
caminhos linhas, curvas e arcos Helder da Rocha
caminhos linhas, curvas e arcos Helder da Rocha (helder@) Caminhos Caminhos representam o contorno de uma figura São definidos por seqüências de comandos (representados por letras) e coordenadas (pares
PROGRAMAÇÃO PARA INTERNET RICA DHTML E O DOCUMENT OBJECT MODEL
PROGRAMAÇÃO PARA INTERNET RICA DHTML E O DOCUMENT OBJECT MODEL Prof. Dr. Daniel Caetano 2012-2 Objetivos Apresentar os conceitos do DHTML Conceituar a estruturação dos objetos do DOM Compreender as diferentes
PROGRAMAÇÃO PARA INTERNET RICA FUNDAMENTOS DO CSS PARTE II
PROGRAMAÇÃO PARA INTERNET RICA FUNDAMENTOS DO CSS PARTE II Prof. Dr. Daniel Caetano 2012-1 Objetivos Apresentar o CSS como ferramenta de layout de página Capacitar para o posicionamento de elementos com
Capítulo 9 - Imagens. Imagens
Capítulo 9 - Imagens 9 Imagens EM JAVASCRIPT, É POSSÍVEL MANIPULAR COM AS IMAGENS DE UMA PÁGINA, alterando a URL que localiza o arquivo de imagem. Assim, pode-se trocar a imagem que está sendo exibida
Tutorial Klogo Turtle
Tutorial Klogo Turtle Sumário Introdução...3 Comandos para Tartaruga...4 Movimentar para Frente...4 Movimentar para trás...4 Rotacionar para a Direita...6 Rotacionar para a Esquerda...6 Alterar a Cor do
Animação 2D. Sistemas de Informação e Multimédia Módulo 5
Animação 2D Sistemas de Informação e Multimédia Módulo 5 Sobre o Flash O Flash é uma ferramenta que permite criar qualquer item, desde uma simples animação até uma aplicação para Web interactiva e complexa,
Desenvolvimento Web. HTML 5 Parte I. Prof. Vicente Paulo de Camargo
Parte I Prof. Vicente Paulo de Camargo Páginas com podem ser desenvolvidas com editor de texto simples Existem, no entanto, alguns editores interessantes, que facilitam a edição de páginas É o caso de
CSS Exercício JCC. Comunicações Digitais e Internet, 2006/07 Jornalismo e Ciências da Comunicação, U.Porto. Sumário
CSS Exercício JCC Comunicações Digitais e Internet, 2006/07 Jornalismo e Ciências da Comunicação, U.Porto Sumário Com este exercício pretende-se apresentar e experimentar o processo de implementação de
CRIAR ILUSTRAÇA O DE ESPAÇO COM PLANETAS
CRIAR ILUSTRAÇA O DE ESPAÇO COM PLANETAS Vamos criar uma ilustração com uma cena do espaço parecida com a dos desenhos animados usando formas vetoriais simplificadas e cores sólidas. Veja como ilustrações
Sintaxe Básica da Linguagem CSS
Sintaxe Básica da Linguagem CSS Regras - Regra CSS é uma declaração com sintaxe própria, que indica como será aplicado um estilo a um ou mais elementos HTML. Ela é composta por três partes: um seletor,
Módulo 17E. Revisões de HTML. A) Noções básicas de HTML
Módulo 17E Revisões de HTML A) Noções básicas de HTML Estrutura básica de um documento Um documento HTML começa com a tag de abertura e termina com a tag de fecho . De seguida, temos a considerar
PROGRAMAÇÃO PARA INTERNET RICA DHTML E O DOCUMENT OBJECT MODEL
PROGRAMAÇÃO PARA INTERNET RICA DHTML E O DOCUMENT OBJECT MODEL Prof. Dr. Daniel Caetano 2011-2 Visão Geral 1 2 3 4 DHTML Document Object Model Manipulando o DOM Manipulando o CSS pelo DOM Material de Estudo
PROGRAMANDO NO FLASH. Prezado(a) aluno(a), 1. ActionScript. Painel Ações. UnidadeD
UnidadeD Prezado(a) aluno(a), Nesta unidade, você estudará a linguagem de programação do Flash, o ActionScript 3.0. Conhecido pela sigla AS. o ActionScript, poderosa linguagem de programação, permite o
Processamento Digital de Imagens
Processamento Digital de Imagens Aula 02 Prof. Diemesleno Souza Carvalho diemesleno@iftm.edu.br http://www.diemesleno.com.br Na aula passada vimos... Na aula passada vimos... Unidade I - Introdução ao
Programação Gráfica Parte 3 Versão em Java 2006 PUCPR Tutoria de Jogos 1º Ano
Programação Gráfica Parte 3 Versão em Java 2006 PUCPR Tutoria de Jogos 1º Ano Paulo V. W. Radtke pvwradtke@gmail.com http://www.ppgia.pucpr.br/~radtke/jogos/ AVISO IMPORTANTE!! Esta versão é dedicada exclusivamente
<CENTER> <iframe src="http://www.universo.edu.br" width=740 height=255> </iframe> </CENTER>
6.4 iframes: Outra maneira mais elegante de inserir outras páginas dentro de nossos documentos HTML é através do comando . Nesse caso, devemos especificar o tamanho do espaço que deverá ser aberto
#Trabalhando com Texto
INSTITUTO FEDERAL DE EDUCAÇÃO, CIÊNCIA E TECNOLOGIA DO RIO GRANDE DO NORTE CAMPUS SÃO GONÇALO DO AMARANTE PROGRAMAÇÃO WEB #Trabalhando com Texto Eliezio Soares elieziosoares@gmail.com Aula de Hoje Web
INTRODUÇÃO AO DESENVOLVIMENTO WEB. PROFª. M.Sc. JULIANA H Q BENACCHIO
INTRODUÇÃO AO DESENVOLVIMENTO WEB PROFª. M.Sc. JULIANA H Q BENACCHIO Utilização de Cores em HTML Cores primárias Cores secundárias 2 Utilização de Cores em HTML Os comprimentos de onda vermelho, amarelo
SIMULADOS & TUTORIAIS
SIMULADOS & TUTORIAIS TUTORIAIS HTML Como utilizar cabeçalhos e elementos de cabeçalhos de página em HTML Copyright 2013 Todos os Direitos Reservados Jorge Eider F. da Silva Proibida a reprodução deste
JavaScript (ou JScript)
1. Introdução JavaScript (ou JScript) Uma linguagem como o JavaScript permite criar interfaces interativas na web (permite a interação do usuário). Para desenvolver web sites interativos precisamos de
PROGRAMAÇÃO PARA INTERNET RICA DHTML E O DOCUMENT OBJECT MODEL
PROGRAMAÇÃO PARA INTERNET RICA DHTML E O DOCUMENT OBJECT MODEL Prof. Dr. Daniel Caetano 2013-1 Objetivos Apresentar os conceitos do DHTML Conceituar a estruturação dos objetos do DOM Compreender as diferentes
INTRODUCAO DESENVOLVIMENTO E DESIGN DE WEBSITES CSS INTRODUÇÃO E MANIPULANDO FONTES
INTRODUCAO DESENVOLVIMENTO E DESIGN DE CSS INTRODUÇÃO E MANIPULANDO FONTES Introdução CSS significa Cascading Style Sheetes (Folhas de Estilo em Cascata). Não seria ótimo fazer layouts na sua página sem
1. Considere o polígono irregular abaixo, formado por três retângulos e um triângulo.
1. Considere o polígono irregular abaixo, formado por três retângulos e um triângulo. a Crie a função arearetangulo: recebe os lados de um retângulo e retorna a área b Crie a função hipotenusa(cateto1,cateto2
HTML Página 61. Índice
PARTE - 9 HTML Página 61 Índice Imagem com vários links (mapa de imagem)... 62 Imagem... 62 Coordenadas... 62 Exemplo completo.... 63 Parte 1... 63 Parte 2... 64 Parte 3... 64 Parte 4... 65 Tipos de áreas:
Então, como saber se uma cor que esteja sendo vista na tela será obtida com a mesma aparência na impressão? É aí que entram os modos de cor.
Variações de cores entre dispositivos Todo trabalho feito em computação gráfica, mais especificamente com impressão, pode apresentar variações do tipo exibido abaixo. Você vê as cores de um modo na tela,
Elementos visuais com ActionScript 3.0. Vamos chamar ao Action Script 3.0, AS3 a partir de agora
Elementos visuais com ActionScript 3.0 Vamos chamar ao Action Script 3.0, AS3 a partir de agora Elementos visuais do AS3 Há 2 grupos distintos de elementos visuais no AS3 Display Object objectos visuais
Programação 2012/2013 1º Semestre MEEC Laboratório 2 Semana de 22 de Outubro de 2012
Programação 2012/2013 1º Semestre MEEC Laboratório 2 Semana de 22 de Outubro de 2012 1. Implemente os programas cujos fluxogramas foram definidos na aula de problemas da semana passada: Exercício 7- Calculo
Unidade 4: Introdução à Tecnologia CSS Prof. Daniel Caetano
Programação para Internet Rica 1 Unidade 4: Introdução à Tecnologia CSS Prof. Daniel Caetano Objetivo: Apresentar conceitos de introduzir o uso de Folhas de Estilo em Cascata. Bibliografia: W3, 2009; CASCADE,
CSS Cascading Style Sheets
CSS Cascading Style Sheets Linguagem de Folhas de Estilo Introdução Faz parte da versão 4 do html Utilizado para padronizar os componentes html Pode ser utilizado de três formas: Inline quando é utilizada
1ª LISTA DE EXERCÍCIOS
Departamento de Informática 205/2 ª LISTA DE EXERCÍCIOS Essa lista de exercícios deve ser resolvida integralmente usando o ambiente BOCA. Instruções gerais para o uso do BOCA: O BOCA é um programa que
Introdução a Programação de Jogos
Introdução a Programação de Jogos Aula 10 Introdução a PlayLib Edirlei Soares de Lima Biblioteca Gráfica - PlayLib Conjunto de funções para criação e manipulação de formas geométricas,
Programação Cliente em. jquery. Fontes: Wendell S. Soares e vinteum.com
Programação Cliente em Sistemas Web jquery Fontes: Wendell S. Soares e vinteum.com Apresentação jquery é uma biblioteca JavaScript criada por John Resig e disponibilizada como software livre e aberto O
Flash. Prof. Luiz Claudio Ferreira de Souza.
Flash Prof. Luiz Claudio Ferreira de Souza Flash Programa destinado para a criação de animações. Conceitos Importantes Linha do tempo: Correspondem a quadros que podemos trabalhar um a um. Flash -> Padrão
Desenvolvimento de Aplicações para. Prof.: Bruno Rafael de Oliveira Rodrigues
Desenvolvimento de Aplicações para Internet Prof.: Bruno Rafael de Oliveira Rodrigues Videos nas Páginas Existem várias maneiras de inserir um vídeo em sua página. O vídeo pode aparecer sob a forma de
TECNOLOGIAS WEB. Unidade 3 Linguagem de Marcação e Estilo. Luiz Leão
Luiz Leão luizleao@gmail.com http://luizleao.com Conteúdo da Unidade Cascading Style Sheet (CSS) Linguagem CSS Introdução É uma linguagem de folhas de estilo utilizada para definir a apresentação de documentos
Ferramentas Web, Web 2.0 e Software Livre em EVT. Color Calculator. Sofia Oliveira
E s t u d o s o b r e a i n t e g r a ç ã o d e f e r r a m e n t a s d i g i t a i s n o c u r r í c u l o d a d i s c i p l i n a d e E d u c a ç ã o V i s u a l e T e c n o l ó g i c a Color Calculator
I N S T R U Ç Õ E S. Na página com o endereço mat3diogocao.atwebpages.com ir ao separador 7º ano.
I N S T R U Ç Õ E S Na página com o endereço mat3diogocao.atwebpages.com ir ao separador 7º ano. Em Trabalhos clicar em Ver outros. Em Referencial clicar em Desenho. Aparece o referencial SVG (ver figura
Novidades do CSS3: sombras em textos e bordas. com as propriedades text-shadow e box-shadow. Por Erika Sarti, em 07_03_2010. Atualizado em 29_07_2011.
Novidades do CSS3: sombras em textos e bordas com as propriedades text-shadow e box-shadow Por Erika Sarti, em 07_03_2010. Atualizado em 29_07_2011. Introdução Este é o segundo artigo publicado aqui no
LISTA DE EXERCÍCIOS Prof. Daniel de Souza Gomes Aula extra 26/03/2011
Lista de Linguagem de Programação 3/22/2011 1 LISTA DE EXERCÍCIOS Prof. Daniel de Souza Gomes Aula extra 26/03/2011 1. A lista consta de cinco exercícios propostos 2. Resolva a lista em um arquivo Word
SIMULADOS & TUTORIAIS
SIMULADOS & TUTORIAIS TUTORIAIS JAVASCRIPT Variáveis em JavaScript Copyright 2013 Todos os Direitos Reservados Jorge Eider F. da Silva Proibida a reprodução deste documento no todo ou em parte por quaisquer
JavaScript (Elementos de Programação e Programação Básica)
Linguagem de Programação para Web JavaScript (Elementos de Programação e Programação Básica) Prof. Mauro Lopes 1 Objetivos Iniciaremos aqui o nosso estudo sobre a Linguagem de Programação JavaScript. Apresentaremos
Introdução à Informática Escola Superior de Tecnologia - Ano Lectivo 2005/06 Prof. Bruno Silva
Introdução à Informática Escola Superior de Tecnologia - Ano Lectivo 2005/06 Prof. Bruno Silva Cascading Style Sheets - (CSS] Introdução Uma Style Sheet é um ficheiro que contém regras que dizem ao browser
O p Porque esta imagem está invertida? aula8 Trabalho de Projeções Planas 2017/2 IC / UFF
http://computacaografica.ic.uff.br/conteudocap2.html P O p Porque esta imagem está invertida? aula8 Trabalho de Projeções Planas 2017/2 IC / UFF Trabalho de Programação: Usando apenas os conceitos dados
CRIAÇÃO DE APLICAÇÃO WEBMAPPING COM O AUXILIO DO ALOV MAP
CRIAÇÃO DE APLICAÇÃO WEBMAPPING COM O AUXILIO DO ALOV MAP INTRODUÇÃO O ALOV Map é uma aplicação construída usando-se a linguagem Java que permite visualizar mapas tanto em formato vetorial do tipo shapefile
Fone: (61) ou CNPJ: /
Cronograma - Corel Draw X7 Básico ao Avançado Conhecendo a área de trabalho Barra de menus Caixa de ferramentas Barras de comandos Painéis Paleta de cores Janela do documento Páginas Múltiplas Menu Contextual
Aplicação para Web I. Manipulando Imagens e Links
Aplicação para Web I Manipulando Imagens e Links Antes de começar O HTML também é uma linguagem de programação, então deve ser organizada de forma identada também. Estamos aprendendo agora a linguagem
Módulo I. Desejamos boa sorte e bom estudo! Em caso de dúvidas, contate-nos pelo site Atenciosamente Equipe Cursos 24 Horas
AutoCad 2D Módulo I Parabéns por participar de um curso dos Cursos 24 Horas. Você está investindo no seu futuro! Esperamos que este seja o começo de um grande sucesso em sua carreira. Desejamos boa sorte
TV Digital com Ginga. NCLua Módulo Canvas
NCLua Módulo Canvas Módulo Canvas Um NCLua tem a possibilidade de fazer operações gráficas durante a apresentação de uma aplicação, tais como desenho de linhas, círculos, imagens, etc. Quando um NCLua
TCC 00308: Programação de Computadores I Organização de programas em Python
TCC 00308: Programação de Computadores I 2017.1 Organização de programas em Python Vamos programar em Python! Como um programa é organizado? Quais são os tipos de dados disponíveis? Como variáveis podem
COLÉGIO OBJETIVO JÚNIOR
COLÉGIO OBJETIVO JÚNIOR NOME: N. o : DATA: / /2015 FOLHETO DE INFORMÁTICA (V.C. E R.V.) 6. o ANO Ao longo deste ano, aprendemos a operar os comandos e as funções básicas do SuperLogo e do TurtleArt, por
Introdução ao Javascript
Programação WEB I Introdução ao Javascript Apresentação da Disciplina,Introdução a linguagem Javascript Objetivos da Disciplina Apresentar os principais conceitos da linguagem Javascript referente à programação
Dados compostos. Paradigma de Programação Funcional. Marco A L Barbosa
Dados compostos Paradigma de Programação Funcional Marco A L Barbosa cba Este trabalho está licenciado com uma Licença Creative Commons - Atribuição-CompartilhaIgual 4.0 Internacional. Conteúdo Estruturas
Tutorial. Georreferenciamento de Imagens. versão 1.0-23/08/2008. Autores: Rafael Bellucci Moretti, Vitor Pires Vencovsky
Tutorial Georreferenciamento de Imagens versão 1.0-23/08/2008 Autores: Rafael Bellucci Moretti, Vitor Pires Vencovsky 1. Introdução O tutorial tem como objetivo fornecer informações básicas para georreferenciar
Aula 6: Entrada e Saída
Aula 6: Entrada e Saída Fernanda Passos Universidade Federal Fluminense Programação de Computadores IV Fernanda Passos (UFF) Entrada e Saída Programação de Computadores IV 1 / 29 Agenda 1 Revisão e Contexto
<head> <title> Uso de Imagem </title> <meta http-equiv="content-type" content="application/xhtml+xml; charset=iso " /> </head>
1. Digite a seguinte página e salve como imagem_01.html. 2. Digite a seguinte página e salve como imagem_02.html. img.imagem1 {border: solid;} img.imagem2 {border:
Cascading Style Sheets
Cascading Style Sheets PROF. ME. HÉLIO ESPERIDIÃO CSS Cascading Style Sheets (CSS) é uma linguagem de folhas de estilo utilizada para definir a apresentação de documentos escritos em uma linguagem de marcação,
Aula 21 DOM. Desenvolvimento Web I Prof. Filipe Arantes Fernandes
Aula 21 DOM Desenvolvimento Web I Prof. Filipe Arantes Fernandes filipe.arantes@ifsudestemg.edu.br Introdução DOM significa Modelo de Objetos de Documentos e tem por finalidade descrever e padronizar os
PROGRAMAÇÃO PARA INTERNET RICA FUNDAMENTOS DO JQUERY
PROGRAMAÇÃO PARA INTERNET RICA FUNDAMENTOS DO JQUERY Prof. Dr. Daniel Caetano 2013-1 Objetivos Introduzir o framework jquery Capacitar para a construção de documentos jquery simples Compreender os mecanismos
Aula 17 Introdução ao jquery
Aula 17 Introdução ao jquery jquery é uma biblioteca JavaScript criada por John Resig e disponibilizada como software livre e aberto, ou seja, de emprego e uso regido segundo licença conforme as regras
PROJETO TRANSFORMAÇÕES PONTUAIS
Colégio Pedro II Campus Realengo II Informática Educativa 2015 9º ano Professores: Sônia Sá Vianna (Desenho Geométrico), Simone da Costa Lima, Érika Santana e Alexandra Alves (informática Educativa) PROJETO
Tipos Algébricos. Programação Funcional. Capítulo 11. José Romildo Malaquias Departamento de Computação Universidade Federal de Ouro Preto
Programação Funcional Capítulo 11 Tipos Algébricos José Romildo Malaquias Departamento de Computação Universidade Federal de Ouro Preto 2012.1 1/33 1 Tipos Algébricos 2/33 Tópicos 1 Tipos Algébricos 3/33
1) (Unicamp) Três planos de telefonia celular são apresentados na tabela abaixo:
Exercícios resolvidos e comentados 1) (Unicamp) Três planos de telefonia celular são apresentados na tabela abaixo: Plano Custo fixo mensal Custo adicional por minuto A R$ 35,00 R$ 0,50 B R$ 20,00 R$ 0,80
Tutoriais CSS, Web Standards, Tableless, Acessibilidade, HTML, XHTML, Padrões Web, por Maurício Samy Silva
CSS Site do Maujor Tutoriais CSS, Web Standards, Tableless, Acessibilidade, HTML, XHTML, Padrões Web, por Maurício Samy Silva :: A propriedade text :: Os textos nos elementos HTML As propriedades para
HTML. Professor Victor Sotero. html
HTML Professor Victor Sotero html 1 Conceito Linguagem com a finalidade de marcação de hipertexto, sendo assim escritas páginas da web, e interpretada pelo navegador. As páginas contém um código fonte,
Visualização por Computador: Teoria, Prática e Aplicações
Visualização por Computador: Teoria, Prática e Aplicações Vértices, formas e transformações Claudio Esperança Programa de Engenharia de Sistemas e Computação COPPE / UFRJ Master of Information Management,
Técnico em Informática. Web JavaScript. Profª Ana Paula Mandelli
Técnico em Informática Web JavaScript Profª Ana Paula Mandelli anapaula_mandelli@hotmail.com Para o JavaScript - NetBeans O NetBeans é um ambiente de desenvolvimento integrado (IDE) Java desenvolvido pela
Aula 2: Tipos de variáveis
Aula 2: Tipos de variáveis Departamento de Métodos Estatísticos Instituto de Matemática Universidade Federal do Rio de Janeiro 2012 (UFRJ) Análise Exploratória de Dados 2012 1 / 34 Exemplo 2.1 Um pesquisador