Introdução a Visualização de Dados: Teoria e Prática. Nicole Sultanum
|
|
|
- Artur de Caminha Belém
- 8 Há anos
- Visualizações:
Transcrição
1 Introdução a Visualização de Dados: Teoria e Prática Nicole Sultanum Jornada de Informática na Biodiversidade LNCC 13 de Fevereiro de 2015
2 Golden rules of visualization tools (by Enrico Bertini) Ferramentas vão mudar! Não existe o melhor absoluto para todo mundo
3 Ferramentas Excel Infogr.am R (ggplot2) Tableau D3 Processing VTK/Paraview
4 Excel Não primariamente, ou somente visualização Difundido Mais poderoso do que se pensa mas não é tão simples sair do básico.
5 infogr.am Ferramenta Web para criação de charts básicos Free (com assinatura para versão PRO) Simples!
6 R (ggplot2) Não primariamente, ou somente visualização Biblioteca de plotting do R Diagramas prédefinidos, mas consideravelmente customizáveis Somente 2D Python tem biblioteca similar: matplotlib! qplot(x, y, data=, color=, shape=, size=, alpha=, geom=, method=, formula=, facets=, xlim=, ylim= xlab=, ylab=, main=, sub=)!
7 Visualização sem programação (drag & drop)! Mais madura, profissional e completa ferramenta de visualização do mercado Complexa! Cara! Mas tem licença para estudantes J! Tableau
8 Javascript (Web) Específico para visualização D3 Data Driven Documents Flexibilidade, grande comunidade, extensiva lista de exemplos
9 Processing Java-like (originalmente dextro.org Image by Marius Watz: baseado em Java, hoje porta para várias outras plataformas) Desenvolvimento gráfico de propósito geral (não somente visualização de dados) 2D e 3D
10 VTK / Paraview
11 Comparação entre ferramentas Dados Complexid. Expressiv. Plataforma Free? Linguagens Excel T Desktop VBA Infogr.am T Web (limitado) --- R (ggplot2) T Desktop (GPL-2) R Tableau TM Dskt, Web (15d trial) --- D3 TMG (3) Web (BSD) Javascript Processing TMG3 Dskt, Web (MIT) Java/JS/Python VTK/ Paraview 3 (TMG) Dskt (Web) (BSD) C++ T Tabela, M Mapa/Campo G Grafo, 3 Dados 3D
12 D3 vs. Processing D3! Processing! Tipos de gráfico Vetorial Raster (primariamente) Suporte a 3D +- Sim Suporte a Web Sim Sim (javascript) Interação Via eventos Ciclo de updates Comunidade no Stk. Ov. (complexidade?) 818 páginas 158 páginas Aprendizado Complicado! Simples J Eficiência/Escala Centenas de formas Após overhead inicial, milhares de formas com performance constante
13 Introdução a Visualização de Dados: Teoria e Prática Prática D3
14 Objetivo Aprender a utilizar recursos básicos da tecnologia implementando exemplos simples Incremental vários pequenos exercícios Aprender o bastante para ser autosuficiente (ou mais próximo disso)
15 D3 D3 allows you to bind arbitrary data to a Document Object Model (DOM), and then apply data-driven transformations to the document. D3 is not a monolithic framework that seeks to provide every conceivable feature. Instead, D3 solves the crux of the problem: efficient manipulation of documents based on data. Javascript SVG HTML CSS
16 SVG Gráficos vetoriais por linguagem de marcação rect! circle! ellipse! line! gradient! text! polygon! polyline! path! g (grupo de formas)
17 CSS Define estilos e layout para liguagens de marcação web.class #id Color opacity Border Font-style Font-family Text-align
18 D3 Conceitos básicos D3 não é uma biblioteca de desenho: Mapeamento de um objeto de dado a um elemento do DOM Declarativo, não imperativo Você não desenha, mas sim, especifica como quer que o desenho seja feito Fluxo básico Criar um canvas SVG Seleção de elementos de atuação no DOM (elementos podem ainda não existir). Mapear seleção aos dados: Para cada elemento; Especificação dos atributos visuais, classes ; Associar a eventos;
19 D3 rodando o primeiro programa Código-fonte! Output!
20 D3 rodando o primeiro programa em detalhes Array de dados Criação de um canvas SVG no <body> (onde as formas são efetivamente desenhadas) Criação dos elementos rect (retângulos); Um para cada dado contido no array data! (i.e. mapeamento dados <-> gráficos!) Funcão definindo comportamento do atributo (poderia ter sido uma função anônima)
21 D3 rodando o primeiro programa em detalhes d3.select("body")! Seleciona o elemento <body> do nó principal do documento (DOM) <body>.append("svg")! Adiciona um novo elemento do tipo SVG à seleção (no caso, o nó <body> do DOM) <svg>.attr( width, 400)! Adiciona um novo atributo ao elemento correspondente
22 D3 rodando o primeiro programa em detalhes svg.selectall("rect")! Seleciona (dentro do nó svg) todos os elementos de tag rect. Gera uma seleção de elementos de DOM (neste caso, vazia!)! <sel>.data(data)! Mapeia a seleção de DOMs ao conjunto de dados especificado. <sel>.enter()! Se #dados > #elementos DOM, um novo placeholder é criado: <d>.append("rect")! Utiliza o placeholder criado e adiciona um elemento rect. <d>.attr( width,20)! Modifica atributo width com valor constante, <d>.attr( width,20)! bblablbllablal
23 select() selectall()! Seleções! d3.select(selector)! d3.selectall(selector)!! var svg = body.select("svg");! var rects = svg.selectall(".bars");!!!! d3.select(node)! d3.selectall(node)!! body.select(svg);! svg.selectall(rects);! Operações sobre seleções! selection.append(name)! "selection.append( text ); //ou svg:text!! selection.attr(name[,val])! "selection.attr( width, 100); "selection.attr( width ); //returns 100!! selection.style(name[,val[,prior]])! "selection.style({'stroke': 'black',! " " " 'stroke-width': 2,! " " "});!! selection.classed(name[,val])! "selection.classed( bars, true);!! // Tem mais! Checa o link ali do lado!
24 select() selectall()! Operações sobre seleções! selection.append(name)! "selection.append( text ); //ou svg:text!! selection.attr(name[,val])! "selection.attr( width, 100); "selection.attr( width ); //returns 100!! selection.style(name[,val[,prior]])! "selection.style({'stroke': 'black',! " " " 'stroke-width': 2});!! selection.classed(name[,val])! "selection.classed( bars, true);!! // Tem mais! Checa o link ali do lado! Valores podem ser funções selection.attr( x,! "function(d,i){! " "//d <- dado! " "//i <- indice! " "return i * 25;! "});!!! function()! function(d) function(d,i)
25 Exercício 1 5 min Adaptar o código fornecido para criar um diagrama de barras representando os dados; function()! function(d) function(d,i) Y = ybottom- height ybottom selection.attr(name[,val])! "selection.attr( width, 100); "selection.attr( x, function(d,i){! " "return i * 25;! "});!!! selection.style(name[,val[,prior]])! "selection.style({'stroke': 'black',! " " " 'stroke-width': 2,! " " " 'fill': red });!
26 Exercício 1
27 attr()! atributos específicos atributos globais
28 text()!
29 style() classed() ==
30 Exercício 2 7 min Adicionar texto com o valor numérico de cada dado; separar o estilo.
31 Exercício 2
32 Reorganizando
33 d3.scale()! Scales are functions that map from an input domain to an output range domain (input) range (output) Quantitativa Domínio contínuo d3.scale.linear()! d3.scale.pow()! d3.scale.quantile()! d3.scale.threshold()!.! Ordinal Domínio Discreto d3.scale.ordinal()! Temporal Domínio temporal d3.time.scale()!
34 d3.scale() Mapeando um atr. quantitativo a uma escala numérica (e.g. pixels) Mapeando um atr. ordinal a uma escala numérica Mapeando um atr. quantitativo a cor (divergente) Mapeando um atr. ordinal a cor
35 d3.scale.ordinal() d3.scale.category10()! d3.scale.category20()! d3.scale.category20b()! d3.scale.category20c()! + ColorBrewer! Every ColorBrewer Scale:
36 Exercício 3 10 min Use escalas para mapear: No. items [1,10] ao comprimento [10,250];! Dados [0,9] à altura das barras [20,150];! Dados a cor [#253494, #41b6c4, #c2e699]!
37 Exercício 3
38 Reorganizando
39 d3.svg! Helper functions to generate and manage SVG shapes Formas d3.svg.line()!! g.append("path")!.attr("d", line);!! d3.svg.area()! d3.svg.arc()! d3.svg.chord()!! Eixos!! d3.svg.axis()!! axis.scale([scale])! axis.orient([orientation])! axis.ticks([arguments ])! axis.tickvalues([values])! axis.tickformat([format])! Brush d3.svg.brush()!!
40 d3.svg.axis() axis.scale([scale])!! A função d3.scale() que descreve o eixo axis.orient([orientation])! [ top, bottom, left, right ]! Posicionamento dos ticks (marcações). axis.ticks([arguments ])! axis.tickvalues([values])! Determina número de marcações. Em tickvalues(), um array arbitrário de marcações pode ser informado, e.g.: axis.tickvalues([2,4,5,8,10]);!
41 d3.svg.axis()
42 Exercício 4 10min Adicionar eixos X e Y ao diagrama de barras: axis.tickvalues([values])!
43 Exercício 4
44 Interatividade selection.on(type[, listener[, capture]])! Example adapted from: Qualquer evento DOM suportado pelo seu browser: mousedown! mouseenter! mouseleave! mousemove! mouseout! mouseup! Entre outros Web/Events#Standard_events
45 Interatividade selection.on(type[, listener[, capture]])! this à a seleção correspondente When a function is used as an event handler, its this is set to the element the event fired from. Example adapted from:
46 Exercício 5 5min Highlight de barras com borda vermelha quando mouse passar por cima; sem borda quando sair.
47 Exercício 5
48 Formatos de dados - JSON JSON (JavaScript Object Notation) is a lightweight data-interchange format. It is easy for humans to read and write. It is easy for machines to parse and generate. Objeto Membros Array Par id (string) : valor
49 Formatos de dados - Tabelas CSV Comma Separated Values TSV Tab Separated Values Date,Wound,Field,Disease 5/1854,0,95,105 6/1854,0,40,95 7/1854,0,140,520 8/1854,20,150,800 9/1854,220,230,740 10/1854,305,310,600 11/1854,480,290,820 12/1854,295,310,1100 1/1855,230,460,1440 Date Wound Field Disease 5/ / / / / / / / /
50 Carregando Tabelas! d3.csv() d3.tsv()! Função de carregamento url [opc] parse Callback após dados dados por linha carregados Forma alternativa Dados são sempre carregados como string por isso a necessidade de um parser customizado por linha Object {! "sepallength: 5.1, "sepalwidth: 5.1, "petallength: 1.4, "petalwidth: 0.2,! "species: "setosa"! }!
51 Carregando dados! d3.csv() d3.tsv() d3.json() d3.xml() Dados são carregados assincronamente, de forma que o resto do código da página possa carregar enquanto os dados são processados. Código que depende dos dados deve ser rodado a partir da função de callback (passada na solicitação do carregamento), enquanto o resto do código roda imediatamente.
52 Funções auxiliares para arrays De Javascript arr.sort([comparefunction])! arr.pop()! arr.push(el1,..., eln)! arr.reverse()! arr.slice([begin[, end]])! arr.indexof(el[,fromid=0])! arr.filter(callback[, arg])! arr.foreach(callback[, arg])!! De D3 d3.min(array[, accessor])! d3.max(array[, accessor])! d3.extent(array[, accessor])! d3.sum(array[, accessor])! d3.median(array[, accessor])!! JavaScript/Reference/Global_Objects/Array
53 Exercício 06 (final) - scatterplot Carregar dados do iris.tsv e gerar o gráfico abaixo: (X-sepalWidth, Y-sepalLength, hue-species)
54 Exercício 06 (final) - scatterplot (X- sepalwidth, Y- sepallength, hue- species) d3.min(array[, accessor])! d3.max(array[, accessor])! d3.extent(array[, accessor])! d3.scale.category10()!
55
56 Exercício 06 (final) - scatterplot
57 Outros tópicos Mapas Layouts radiais Grafos Projeções de mapa Transições Brushing & Linking
58 Outros tópicos Dados dinâmicos Mapas Layouts radiais Grafos Projeções de mapa Transições Brushing & Linking
59 Excelente introdução a D3 Murray, Scott. Interactive data visualization for the Web. " O'Reilly Media, Inc.", 2013.
60
61 Introdução a Visualização de Dados: Teoria e Prática Prática Processing
62 Processing Gráficos raster baseado em opengl Inicialmente construído em cima de Java, hoje roda também em: Javascript (Web), Android, Python, Ruby. Construído para: Ser simples API minimal, low entry point Expressividade gráfico-interativa Portanto.. bastante popular entre artistas gráficos Inspirado/baseado em OpenGL Propósito geral, i.e. não exclusivo de visualização de dados
63 Processing Onde baixar: processing.org! (Windows, Linux, Mac OS)
64 Processing IDE Play/Stop Arquivos de um sketch Output (java, javascript, Android ) Adicionar/ remover arquivos ao sketch Também é possível usar o Eclipse (com alguns ajustes ) Console Erros
65 Primeiro programa em Processing Abrir a referência: processing.org/reference/
66 Formas Primitivas ellipse(a, b, c, d)! arc(a, b, c, d, start, stop)! rect(a, b, c, d)! line(x1, y1, x2, y2)! bezier(x1, y1, x2, y2, x3, y3, x4, y4)! quad(x1, y1, x2, y2, x3, y3, x4, y4)! triangle(x1, y1, x2, y2, x3, y3)! text(c, x, y)!...! Algumas têm mais de um construtor rect(a, b, c, d)! rect(a, b, c, d, r)! rect(a, b, c, d, tl, tr, br, bl)! processing.org/reference/
67 ! Configurações são globais como em OpenGL fill()! nofill()! stroke()! nostroke()! strokeweight()! strokejoin()! strokecap()! colormode()//rgb, HSB!...!!
68
69 ! Configurações são globais como em OpenGL fill()! nofill()! stroke()! nostroke()! strokeweight()! strokejoin()! strokecap()! colormode()//rgb, HSB!...!!
70 Configurações são globais como em OpenGL! ellipsemode()! rectmode()!
71 color é um tipo primitivo R:250 G:0 B:0 A:255 R:200 G:200 B:200A:255 R:0 G:0 B:255 A:100
72 Exercício 1 10min 400x ellipse(cx,cy,rx,ry)! rect(x,y,w,h)! triangle(x1,y1,x2,y2,x3,y3)! arc(cx,cy,rx,ry,a1,a2)!! fill(g)! fill(r,g,b)! nofill()! stroke(g)! stroke(r,g,b)! strokeweight(w)! nostroke()!!
73 Exercício 1
74 Carregando dados
75 Mapeamentos (com dados) map(value, start1, stop1, start2, stop2)! lerp(start,stop,amt)! lerpcolor(start,stop,amt)!
76 Exercício 2 20 min Carregar o arquivo mammals.csv e criar um scatterplot simples com: X = Weight Average (kg) (float) Y = Length Average (m) (float) cor = Conservation Level (int) 40,200,40 255,0, ,100,255 Conservation Level Status! 1 - Least Concern 2 Vulnerable 3 - Near Threatened 4 - Endangered 5 Critically Endangered 6 Extinct 0 - Data Deficient map(value, start1, stop1,! " start2, stop2)! lerp(start,stop,amt)! lerpcolor(start,stop,amt)!
77 Exercício 2
78 Interatividade Capturando eventos de mouse/teclado
79 Interatividade Eventos de mouse/teclado Mouse! mouseclicked()! mousedragged()! mousemoved()! mousepressed()! mousepressed! mousereleased()! mousewheel()! Teclado! keypressed()! keypressed! keyreleased()! keytyped()!!
80 Interatividade Acessando valores de mouse/keyboard Mouse! mousex! mousey! pmousex! pmousey! (pmousex,pmousey) (mousex,mousey) Teclado! key! keycode! UP, DOWN, LEFT, RIGHT, ALT, CONTROL, SHIFT, PAGE_UP, PAGE_DOWN, HOME, END! l L! <left click>
81 Exercício 3 5 min Modificar o Ex. 2 para exibir a coordenada (X,Y) do espaço de dados (não pixels) quando mouse clicar em um ponto dentro do diagrama. mousex! mousey!
82 Modificar o Ex. 2 para exibir a coordenada (X,Y) do espaço de dados (não pixels) quando mouse clicar em um ponto dentro do diagrama. Exercício 3
83 Um outro exercício bem mais trabalhoso! Não se preocupe, não faremos ele hoje! Modificar o Ex. 2 para, quando o mouse fizer hover em um ponto no gráfico, exibir um popup com a ordem do elemento correspondente. Por que é complicado?! Raster -> pixels, não elementos É preciso fazer testes de colisão manualmente Oclusão! Quem está na frente? Gestão de ordem de desenho Carnivora Nessas horas o D3 começa a se tornar bem mais vantajoso para visualização de dados
84 O que mais é possível fazer: Bibliotecas diversas: Processamento de imagem Mapas GUI Dispositivos de input leap motion, kinect, etc. Simulação física 2D Shaders 3D Áudio Visão computacional Bancos de dados SQL Charts Entre outros
85 Mais métodos
86 Tutoriais
dados abertos cartilha para desenvolvedores
dados abertos cartilha para desenvolvedores Esta publicação é um encarte integrante do Manual dos dados abertos: desenvolvedores, resultante do acordo de cooperação técnico-científica entre o Laboratório
azevedolab.net 2015 Dr. Walter F. de Azevedo Jr.
azevedolab.net 2015 Dr. Walter F. de Azevedo Jr. 1 Ementa Apresentação de outras linguagens de programação para Bioinformática: introdução ao Perl e ao Processing; modelagem de sistemas biológicos; aplicações
Manual do Usuário Android Neocontrol
Manual do Usuário Android Neocontrol Sumário 1.Licença e Direitos Autorais...3 2.Sobre o produto...4 3. Instalando, Atualizando e executando o Android Neocontrol em seu aparelho...5 3.1. Instalando o aplicativo...5
Universidade Federal de Santa Maria UFSM Centro de Tecnologia CT. Power Point. Básico
Universidade Federal de Santa Maria UFSM Centro de Tecnologia CT Power Point Básico Santa Maria, julho de 2006 O Power Point é um aplicativo do Microsoft Office direcionado à criação de apresentações.
Barra de ferramentas padrão. Barra de formatação. Barra de desenho Painel de Tarefas
Microsoft Power Point 2003 No Microsoft PowerPoint 2003, você cria sua apresentação usando apenas um arquivo, ele contém tudo o que você precisa uma estrutura para sua apresentação, os slides, o material
Banner Flutuante. Dreamweaver
Banner Flutuante Dreamweaver Começamos com um arquivo em branco no Dreamweaver MX. Para que o banner apareça sobre a página, precisamos inserir uma camada a mais no arquivo HTML. Selecione o menu Inserir
Introdução. História. Como funciona
Introdução O HTML é uma linguagem de marcação utilizada para desenvolvimento de sites. Esta linguagem surgiu junto com o HTTP, ambos possibilitaram a internet ser popularizada. História O HTML foi criado
ANDRÉ APARECIDO DA SILVA APOSTILA BÁSICA SOBRE O POWERPOINT 2007
ANDRÉ APARECIDO DA SILVA APOSTILA BÁSICA SOBRE O POWERPOINT 2007 CURITIBA 2015 2 SUMÁRIO INTRODUÇÃO AO MICROSOFT POWERPOINT 2007... 3 JANELA PRINCIPAL... 3 1 - BOTÃO OFFICE... 4 2 - FERRAMENTAS DE ACESSO
HTML5. André Tavares da Silva. andre.silva@udesc.br
HTML5 André Tavares da Silva andre.silva@udesc.br O que é HTML5? HTML5 será o novo padrão para HTML, XHTML e HTML DOM (Document Object Model). A última versão (4.01) foi definida em 1999 e a Web mudou
Aula de ArcGIS Criando uma planta de um
Aula de ArcGIS Criando uma planta de um topográfico Prof. Frederico D. Bortoloti Introdução No menu Iniciar, vá no grupo de programas ArcGIS e clique em ArcMap No ArcMap, feche a janela inicial. Passo
Lista de Revisão. 3. Analise a afirmativa a seguir como verdadeira ou falsa e justifique.
Lista de Revisão 1. Nos sistemas web, geralmente os usuários apresentam dois problemas típicos, a desorientação e a sobrecarga cognitiva. Discorra sobre esses problemas. 2. Apresente as principais diferenças
Capítulo 4. Programação em ASP
Índice: CAPÍTULO 4. PROGRAMAÇÃO EM ASP...2 4.1 REGISTRAR...2 4.1.1 Códigos para configuração do objeto...2 4.1.2 Formulário para transferir dados da impressão digital...3 4.1.3 Código Javascript para registro
AJAX JSON JQUERY. Prof. Fellipe Aleixo (fellipe.aleixo@ifrn.edu.br)
AJAX JSON JQUERY Prof. Fellipe Aleixo (fellipe.aleixo@ifrn.edu.br) QUAL O OBJETIVO DESTAS TECNOLOGIAS? AJAX AJAX = Asynchronous Javascript and XML Não é uma nova linguagem de programação, apenas uma nova
Responsive Web Design
Professor: http://jemaf.github.com DESENVOLVIMENTO DE APLICAÇÕES WEB - INFORMATICA - COLTEC/UFMG 2014 Introdução Atualmente, a web é acessada de qualquer lugar, em qualquer dispositivo. Acesso a web: Anos
Tecnologias para apresentação de dados - Java Script. Aécio Costa
Tecnologias para apresentação de dados - Java Script Aécio Costa Foi originalmente implementada como parte dos navegadores web para que scripts pudessem ser executados do lado do cliente e interagissem
Microsoft Office PowerPoint 2007
INTRODUÇÃO AO MICROSOFT POWERPOINT 2007 O Microsoft Office PowerPoint 2007 é um programa destinado à criação de apresentação através de Slides. A apresentação é um conjunto de Sides que são exibidos em
Scriptlets e Formulários
2 Scriptlets e Formulários Prof. Autor: Daniel Morais dos Reis e-tec Brasil Programação Avançada Para Web Página1 Meta Permitir ao aluno aprender a criar um novo projeto Java para web no Netbeans IDE,
Computação II Orientação a Objetos
Computação II Orientação a Objetos Fabio Mascarenhas - 2014.1 http://www.dcc.ufrj.br/~fabiom/java Introdução Esse não é um curso de Java! O objetivo é aprender os conceitos da programação orientada a objetos,
ALUNES MANUAL DO USUÁRIO. Guia rápido Alunes
ALUNES MANUAL DO USUÁRIO Guia rápido Alunes 1 Manual de Instruções Versão 2.0 Alunes Informática 2 Sumário Introdução... 5 Pré-requisitos... 5 Principal/Home... 6 Como editar texto do home... 7 Desvendando
Webdesign HTML. Introdução a HTML e as principais tags da linguagem. Thiago Miranda dos Santos Souza
Webdesign HTML Introdução a HTML e as principais tags da linguagem Conteúdos Os materiais de aula, apostilas e outras informações estarão disponíveis em: www.thiagomiranda.net Objetivos Apresentar a HTML
Manual do Spectacle. Boudhayan Gupta Boudhayan Gupta Tradução: André Marcelo Alvarenga
Boudhayan Gupta Boudhayan Gupta Tradução: André Marcelo Alvarenga 2 Conteúdo 1 Introdução 5 2 Iniciando o Spectacle 6 3 Como usar o Spectacle 7 3.1 Capturar uma imagem...................................
5 Detalhes da Implementação
Detalhes da Implementação 101 5 Detalhes da Implementação Neste capítulo descreveremos detalhes da implementação do Explorator que foi desenvolvido usando o paradigma MVC 45 e o paradigma de CoC 46 (Convention
Curso: Especializado Desenvolvimento de Aplicações para Android
Curso: Especializado Desenvolvimento de Aplicações para Android Duração: 66h Área formativa: Programação Web & Mobile Sobre o curso Desde o lançamento dos smartphones no mercado, é crescente a procura
Dominando Action Script 3
Dominando Action Script 3 Segunda Edição (2014) Daniel Schmitz Esse livro está à venda em http://leanpub.com/dominandoactionscript3 Essa versão foi publicada em 2014-05-02 This is a Leanpub book. Leanpub
QUEM FEZ O TRABALHO?
Introdução a Linguagem HTML: Conceitos Básicos e Estrutura ANA PAULAALVES DE LIMA 1 QUEM FEZ O TRABALHO? Com as tagsaprendidas hoje, faça uma página HTML sobre você com as seguintes informações: Seu nome
Conceitos de Ajax Exemplos de uso do Ajax no braço, muitos exemplos, muito código (HTML, CSS, JavaScript, PHP, XML, JSON)
Márcio Koch 1 Currículo Formado na FURB em Ciência da Computação Pós graduado em Tecnologias para o desenvolvimento de aplicações web Mestrando em Computação Gráfica na UDESC Arquiteto de software na Senior
ALBUM DE FOTOGRAFIAS NO POWER POINT
ALBUM DE FOTOGRAFIAS NO POWER POINT O PowerPoint é uma poderosa ferramenta que faz parte do pacote Office da Microsoft. O principal uso desse programa é a criação de apresentação de slides, para mostrar
Comandos Draw. Prof. Msc. Rogério Simões Departamento de Engenharia de Produção e Sistemas
Comandos Draw As primitivas geométricas são os elementos geométricos que compõem um desenho. Entre elas, podemos citar linhas, arcos, textos, círculos, etc. Esses comandos estão no menu Draw e alguns deles
Fluxo de trabalho do Capture Pro Software: Indexação de código de barras e separação de documentos
Este procedimento corresponde ao fluxo de trabalho de Indexação de código de barras e de separação de documentos no programa de treinamento do Capture Pro Software. As etapas do procedimento encontram-se
DESENVOLVIMENTO DE SOFTWARE DE VOTAÇÃO WEB UTILIZANDO TECNOLOGIA TOUCHSCREEN
DESENVOLVIMENTO DE SOFTWARE DE VOTAÇÃO WEB UTILIZANDO TECNOLOGIA TOUCHSCREEN José Agostinho Petry Filho 1 ; Rodrigo de Moraes 2 ; Silvio Regis da Silva Junior 3 ; Yuri Jean Fabris 4 ; Fernando Augusto
JavaScript (Funções, Eventos e Manipulação de Formulários)
Linguagem de Programação para Web JavaScript (Funções, Eventos e Manipulação de Formulários) Prof. Mauro Lopes 1-31 23 Objetivos Iremos avançar um pouco mais em nosso estudo sobre o JavaScript. Iremos
Personalizações do mysuite
Personalizações do mysuite 1. mysuite... 2 2. Customização de campos... 3 3. Importação de dados... 3 4. Integração de sistemas... 3 5. Personalização do Atendimento Online... 4 5.1. Imagens de online
Programação de Computadores I. Conhecendo a IDE Code::Blocks
Code::Blocks Conhecendo a IDE Programação de Computadores I Professor: Edwar Saliba Júnior Conhecendo a IDE Code::Blocks Apresentação: 1) Abra a IDE (Integrated Development Environment), ou seja, o Ambiente
O que é o JavaScript?
JavaScript Introdução O JavaScript é utilizado por milhões de páginas na web para melhorar o design, validar forms, e muito mais O JavaScript foi inicialmente desenvolvido pela Netscape e é a linguagem
4.14 - Imagens: <img src="..."> src <img src="tecnologia.jpg"> único atributo que não pode ser omitido neste TAG Nota: img
4.14 - Imagens: O TAG utilizado para a inclusão de imagens em páginas html é o: O atributo src especifica o local onde está a imagem e o seu nome. Nas páginas pessoais é mais comum o uso
Programação para Internet I
Programação para Internet I Aulas 09 e 10 Fernando F. Costa nando@fimes.edu.br Formulários O formulário representa o modo mais importante de interatividade que a linguagem HTML oferece. Um formulário pode
Construtor de sites SoftPixel GUIA RÁPIDO - 1 -
GUIA RÁPIDO - 1 - Sumário Introdução...3 Por que utilizar o Construtor de Sites?...3 Vantagens do Construtor de Sites...3 Conceitos básicos...3 Configuração básica do site...5 Definindo o layout/template
jquery André Tavares da Silva andre.silva@udesc.br
jquery André Tavares da Silva andre.silva@udesc.br jquery jquery é uma biblioteca em JavaScript; Seu objetivo é simplificar a programação em JavaScript; jquery foi desenvolvida para ser de aprendizado
Tópicos de Ambiente Web. Modulo 2 Processo de desenvolvimento de um site Professora: Sheila Cáceres
Tópicos de Ambiente Web Modulo 2 Processo de desenvolvimento de um site Professora: Sheila Cáceres Roteiro Motivação Desenvolvimento de um site Etapas no desenvolvimento de software (software:site) Analise
DWR DIRECTED WEB REMOTING
DWR DIRECTED WEB REMOTING Vamos ver neste artigo como personalizar uma tabela gerada pelo addrows(). Grids Personalizadas com addrow() O DWR tem uma lib chamada util.js, que é nela que se localiza as principais
Sumário. Computação Gráfica Illustrator
1 Sumário Área de trabalho... 2 Barra de tarefas... 5 Menu ajuda... 6 Menu janela... 7 Menu exibir... 8 Menu efeito... 9 Menu selecionar... 10 Menu tipo... 10 Menu objeto... 12 Menu editar... 13 Menu arquivo...
CONTEÚDOS PROGRAMÁTICOS DA ACADEMIA
Página: 1/16 CONTEÚDOS PROGRAMÁTICOS DA ACADEMIA Módulo CBDS (Central de Banco de Dados Senior) A quem se destina: Todos que tiverem a necessidade de administrar os dados da base de dados da Senior Sistemas
Introdução ao Mapserver
Introdução ao Mapserver SigWeb by João Araujo 2/28 Mapserver Ambiente de desenvolvimento para construção de aplicações espaciais voltadas para WEB; Não é um GIS completo, nem tem este objetivo; Criado
Superintendência Regional de Ensino de Ubá - MG Núcleo de Tecnologia Educacional NTE/Ubá. LibreOffice Impress Editor de Apresentação
Superintendência Regional de Ensino de Ubá - MG Núcleo de Tecnologia Educacional NTE/Ubá LibreOffice Impress Editor de Apresentação Iniciando o Impress no Linux Educacional 4 1. Clique no botão 'LE' no
Web Design. Prof. Felippe
Web Design Prof. Felippe 2015 Sobre a disciplina Fornecer ao aluno subsídios para o projeto e desenvolvimento de interfaces de sistemas Web eficientes, amigáveis e intuitivas. Conceitos fundamentais sobre
Prática da Disciplina de Sistemas Distribuídos Serviços Web IFMA DAI Professor Mauro Lopes C. Silva
1. O que são Serviços Web (Web Services)? Prática da Disciplina de Sistemas Distribuídos Serviços Web IFMA DAI Professor Mauro Lopes C. Silva A ideia central dos Web Services parte da antiga necessidade
JDBC Java Database Connectivity
5 JDBC Java Database Connectivity Prof. Autor: Daniel Morais dos Reis e-tec Brasil Programação Avançada Para Web Página1 Meta Trabalhar com bancos de dados em aplicações web em JSP através das classes
Aula 03: Noções Fundamentais do CSS, Formatação de Fonte e Inserção de Imagens
Aula 03: Noções Fundamentais do CSS, Formatação de Fonte e Inserção de Imagens Tag para inserir imagens e HTML O modelo CSS Noções fundamentais e funcionamento do CSS Incluindo estilos em uma página Sintaxe
Ambiente Virtual de Aprendizagem Moodle
Ambiente Virtual de Aprendizagem Moodle No INSEP, o ambiente virtual de aprendizagem oferecido ao acadêmico é o MOODLE. A utilização dessa ferramenta é fundamental para o sucesso das atividades em EAD,
MANUAL DE UTILIZAÇÃO. Help & Manual Versão 6.2.0 Build 2537
MANUAL DE UTILIZAÇÃO Help & Manual Versão 6.2.0 Build 2537 Sumário Introdução... 3 Histórico... 4 1. Tópicos... 5 2. Configuração dos popups... 12 3. Estilos... 13 3.1 Criação de Estilos... 13 3.2 Importação
AJAX no GASweb. Mas e afinal, para que usamos o AJAX?
Nível - Avançado AJAX no GASweb Por: Pablo Hadler AJAX (Asynchronous Javascript and XML) foi criado com o princípio de ser uma maneira rápida e otimizada de podermos fazer requisições Web, sendo esta totalmente
Turma. PowerPoint 2003
PowerPoint 2003 Apresentação O Power Point é um aplicativo do Microsoft Office direcionado à criação de apresentações. Com ele você poderá criar rapidamente slides com esquemas, textos animados, sons e
Fluxo de trabalho do Capture Pro Software: Indexação de OCR e separação de documentos de código de correção
Este procedimento corresponde ao fluxo de trabalho de Indexação de OCR com separação de código de correção no programa de treinamento do Capture Pro Software. As etapas do procedimento encontram-se na
Agente Administrativo do MTE
PowerPoint 2003 Apresentação O Power Point é um aplicativo do Microsoft Office direcionado à criação de apresentações. Com ele você poderá criar rapidamente slides com esquemas, textos animados, sons e
Criação de um novo projeto no Eclipse utilizando Maven
1. Faça o download da versão mais atual do Eclipse IDE for Java EE Developers em https://www.eclipse.org/downloads/. 2. No Eclipse, crie um novo projeto Maven, em File >> New >> Maven Project 3. Marque
Documentação. Programa de Evolução Contínua Versão 1.76
Documentação Programa de Evolução Contínua Versão 1.76 Sumário Resumo das Novidades... 3 Configuração das Novidades... 5 Nova integração Google Universal Analytics... 5 Sistema de Múltiplos Pacotes de
ftp://ftp.cr-df.rnp.br/pub/netinfo/training/rnp/kit-bsb/html/guia.zip novembro 1996 Tutorial - Autoria em World Wide Web
RNP REDE NACIONAL DE PESQUISA Centro Regional de Brasília CR/DF ftp://ftp.cr-df.rnp.br/pub/netinfo/training/rnp/kit-bsb/html/guia.zip novembro 1996 Tutorial - Autoria em World Wide Web Parte V - Hypertext
Como criar um blog. Será aberta uma janela onde você deverá especificar o título do blog, o endereço do blog, e o modelo.
Como criar um blog Criando o blog Vá em www.blogger.com. Entre com sua conta google (a mesma que você usa para acessar o gmail). Escolha um perfil. Na página seguinte, clique no botão novo blog. Será aberta
Visualização de Informação com D3.jsV
Visualização de Informação com D3.jsV Evandro Ortigossa 25 de setembro de 2017 Introdução Visualização de dados que não tem forma ou cor inerente.r inerente. 2 Introdução Porque visualização de informação?
#Aula Nº 3 Estilo CSS webstandards.samus.com.br webstandards.samus.com.br/aulas/aula3.pdf Vinicius Fiorio Custódio samus@samus.com.
#Aula Nº 3 Estilo CSS webstandards.samus.com.br webstandards.samus.com.br/aulas/aula3.pdf Vinicius Fiorio Custódio samus@samus.com.br #Objetivo Apresentar os conceitos de utilização do CSS, Sintaxe, Seletores
LINGUAGEM ORIENTADA A OBJETOS
LINGUAGEM ORIENTADA A OBJETOS TI MÓDULO II O ECLIPSE O eclipse é uma IDE Open Source (código fonte aberto) que serve para o desenvolvimento em muitas linguagens: PHP Java Python HTML C/C++ A IDE Eclipse
SIMULADOS & TUTORIAIS
SIMULADOS & TUTORIAIS TUTORIAIS HTML Como utilizar estilos em HTML com CSS Copyright 2013 Todos os Direitos Reservados Jorge Eider F. da Silva Proibida a reprodução deste documento no todo ou em parte
Escolhendo recursos de Ajuda
Você pode dar um toque profissional ao aplicativo adicionando um arquivo de Ajuda gráfica. A Ajuda gráfica pode incluir gráficos e texto formatado; a Ajuda no estilo.dbf limita-se a uma única fonte sem
DOCUMENTAÇÃO DO FRAMEWORK - versão 2.0
DOCUMENTAÇÃO DO FRAMEWORK - versão 2.0 Índice 1 - Objetivo 2 - Descrição do ambiente 2.1. Tecnologias utilizadas 2.2. Estrutura de pastas 2.3. Bibliotecas já incluídas 3 - Características gerais 4 - Criando
Planilha Eletrônica Excel
COLÉGIO LA SALLE CANOAS Técnico em Informática Planilha Eletrônica Excel Excel Prof. Valter N. Silva Colégio La Salle Canoas Página 2 1. NOÇÕES BÁSICAS O Microsoft Excel 7.0 é um programa de planilha eletrônica,
O que há de novo no QuarkXPress 2015
O que há de novo no QuarkXPress 2015 CONTEÚDO Conteúdo Novidades do QuarkXPress 2015...3 Novos recursos...4 Aplicativo de 64 bits...4 Variáveis de conteúdo...4 Tabelas alinhadas...5 Notas de rodapé e notas
Arduino e Processing. Professor: Paulo Marcos Trentin Escola CDI Videira
Arduino e Processing Professor: Paulo Marcos Trentin Escola CDI Videira O que é Processing? É uma linguagem criada em 2001 por Casey Reas e Benjamin Fry, na época estudantes do MIT. Seu objetivo é server
O EDITOR DE APRESENTAÇÕES POWER POINT
O EDITOR DE APRESENTAÇÕES POWER POINT O Power Point é um poderoso editor de apresentações muito utilizado quando for preciso fazer a exibição de trabalhos, projetos, aulas e afins em slides coloridos e
Manual de Utilização da Extensão VisPublica para a ferramenta QlikView
Manual de Utilização da Extensão VisPublica para a ferramenta QlikView Autores: Melise Paula Fernanda Ribeiro Guilherme Xavier Rafael Oliveira Aldeíde Brasil Versão: 1.0.1 Manual de Utilização da Extensão
Apostila para uso do Power Point
Apostila para uso do Power Point Introdução O Power Point, é um aplicativo da MicroSoft desenvolvido para a elaboração de apresentações. Possui recursos de hipertexto e multimídia como som, imagem, animação,
Slice Tool - Ferramenta Fatia
Faculdade de Tecnologia da Paraíba CURSO CURSO SUPERIOR DE TECNOLOGIA EM SISTEMAS PARA A INTERNET DISCIPLINA DESENVOLVIMENTO DE APLICAÇÕES WEB ESTÁTICAS PERÍODO: P2 Semestre: 2008.2 PROFESSOR Geraldo Rodrigues
1 - INTRODUÇÃO 2 - CONCEITOS BÁSICOS ARCPAD
1 - INTRODUÇÃO O ArcPad é um software de mapeamento e tratamento de Informações Geográficas desenvolvido pela ESRI cujo objetivo principal é a portabilidade e mobilidade dos dados. O ArcPad pode ser utilizado
Informática Básica. Microsoft Word XP, 2003 e 2007
Informática Básica Microsoft Word XP, 2003 e 2007 Introdução O editor de textos Microsoft Word oferece um conjunto de recursos bastante completo, cobrindo todas as etapas de preparação, formatação e impressão
CSS é a abreviatura para Cascading Style Sheets Folhas de Estilo em Cascata
CSS CSS é a abreviatura para Cascading Style Sheets Folhas de Estilo em Cascata CSS é uma linguagem para estilos (formatação) que define o layout de documentos HTML. CSS controla fontes, cores, margens,
Tecnologias de Jogos de Vídeo
Tecnologias de Jogos de Vídeo Abel J. P. Gomes & Gonçalo Amador LAB. 1 Departamento de Informática Universidade da Beira Interior Portugal 2013 Copyright 2009-2013 All rights reserved. LAB. 1 JogAmp e
Computação II Orientação a Objetos
Computação II Orientação a Objetos Fabio Mascarenhas - 2014.1 http://www.dcc.ufrj.br/~fabiom/java Android Android é um sistema operacional para dispositivos móveis Kernel Linux, drivers e bibliotecas do
8VDQGR5HSRUW0DQDJHUFRP&ODULRQH3RVWJUH64/ -XOLR&HVDU3HGURVR $,'(GR5HSRUW0DQDJHU
$,'(GR5HSRUW0DQDJHU Neste capítulo vamos abordar o ambiente de desenvolvimento do Report Manager e como usar os seus recursos. $FHVVDQGRRSURJUDPD Depois de instalado o Report Manager estará no Grupo de
Sumário. HTML CSS JQuery Referências IHC AULA 6 5-09-2011 1
Sumário HTML CSS JQuery Referências IHC AULA 6 5-09-2011 1 Linguagem HTML HTML é a abreviação de HyperText Markup Language, que pode ser traduzido como Linguagem de Marcação de Hipertexto. Não é uma linguagem
1 - Crie um novo documento no ArcMap. Com o programa aberto, selecione o Dataframe Layers
Conversão de Raster para Polígono usando o ArcMap Nos posts anteriores, conhecemos uma situação onde uma empresa solicita, além do produto esperado, imagens no canal alfa para geração de polígonos envolventes
Version Notes (Notas da versão) Versão 4.11.1.7-26-02-2013
Florianópolis, 26 de fevereiro de 2013. Abaixo você confere as características e funcionalidades da nova versão 4.11.1.7 do Channel. Para quaisquer dúvidas ou na necessidade de maiores esclarecimentos,
4.14 - Imagens: <IMG SRC="..."> SRC <IMG SRC="tecnologia.jpg"> único atributo que não pode ser omitido neste tag Nota: img
4.14 - Imagens: O tag utilizado para a inclusão de imagens em páginas html é o: O atributo SRC especifica o local aonde está a imagem e o seu nome. Nas páginas pessoais é mais comum o uso
INTRODUÇÃO AO DESENVOLVIMENTO WEB
INTRODUÇÃO AO DESENVOLVIMENTO WEB PROFª. M.Sc. JULIANA H Q BENACCHIO Formulários Os formulários em HTML são usados para selecionar diferentes tipos de entradas do usuário. Um formulário é uma área que
Sistema Ativo de Segurança Automotiva
Sistema Ativo de Segurança Automotiva Manual de Utilização Conteúdo HOME Página inicial 3 Última posição 3 Rastrear 5 Relatórios 6 Histórico de Posições 6 Localização 7 Faturamento 7 Monitoramento 9 Alerta
Portal Sindical. Manual Operacional Empresas/Escritórios
Portal Sindical Manual Operacional Empresas/Escritórios Acesso ao Portal Inicialmente, para conseguir acesso ao Portal Sindical, nos controles administrativos, é necessário acessar a página principal da
Autor: Cícero Carlos Barbosa Silva
1 Power Point 2003 Autor: Cícero Carlos Barbosa Silva 2 3 SUMÁRIO O editor de apresentações Power Point... 41 Criando o primeiro slide... 41 Salvando a apresentação com senha de proteção... 42 Criando
Gerenciamento de Arquivos e Pastas. Professor: Jeferson Machado Cordini jmcordini@hotmail.com
Gerenciamento de Arquivos e Pastas Professor: Jeferson Machado Cordini jmcordini@hotmail.com Arquivo Todo e qualquer software ou informação gravada em nosso computador será guardada em uma unidade de disco,
Com este tutorial, temos por objetivo determinar a distância entre duas localidades.
Tutorial 2 Introdução Para determinar a distância entre duas localidades, basta simplesmente selecionar um recurso de medida de distância (Measure tool) e clicar sobre cada uma das localidades. Entretanto,
Curso Superior de Tecnologia em Análise e Desenvolvimento de Sistemas Prof. Felippe Scheidt IFPR Campus Foz do Iguaçu 2014/2
Curso Superior de Tecnologia em Análise e Desenvolvimento de Sistemas Prof. Felippe Scheidt IFPR Campus Foz do Iguaçu 2014/2 Objetivo. O objetivo da disciplina é conhecer os princípios da programação de
JavaScript. JavaScript é uma linguagem de script usada em navegadores web. É uma linguagem dinâmica, estruturada e orientada em objetos.
JavaScript JavaScript é uma linguagem de script usada em navegadores web. É uma linguagem dinâmica, estruturada e orientada em objetos. Pode ser usada dentro do próprio arquivo HTML ou estruturada em um
ÍNDICE... 3 INTRODUÇÃO... 4. A série... 4
EXCEL 2007 e 2010 2 ÍNDICE ÍNDICE... 3 INTRODUÇÃO... 4 A série... 4 01 LISTA COM VALIDAÇÃO... 5 02 FUNÇÕES FINANCEIRAS... 7 03 FUNÇÃO DE BANCO DE DADOS... 12 04 RÓTULOS... 15 05 TABELA DINÂMICA... 18 06
Coleção - Análises de email marketing em clientes de email
Coleção - Análises de email marketing em clientes de email Introdução Nesta útima edição da Coletânea de Análises de Email Marketing em Clientes de Email, apresentamos os estudos dos clientes Yahoo! Mail
Repeater no GASweb. Regiões
Repeater no GASweb Por: Rodrigo Silva O controle de servidor Repeater é um container básico que permite a você criar uma lista de qualquer informação que deseja em uma página Web. Ele não tem uma aparência
Roteiro 2: Conceitos de Tags HTML
Roteiro 2: Conceitos de Tags HTML Objetivos Detalhar conceitos sobre TAGS HTML: elementos, atributos, elemento vazio, links. Implementar páginas de internet com uso da linguagem HTML; Ferramentas Necessárias
mkdir /srv/www/default/html/calculadora/imagens mkdir /srv/www/default/html/calculadora/blocos
Programando em PHP www.guilhermepontes.eti.br lgapontes@gmail.com Criando uma Calculadora Primeiramente deve se criar uma estrutura para armazenar os arquivos necessários para o funcionamento da calculadora.
Cenário atual de uso e das ferramentas de software livre em Geoprocessamento
Cenário atual de uso e das ferramentas de software livre em Geoprocessamento Tiago Eugenio de Melo tiago@comunidadesol.org 1 Sumário Conceitos GIS e Software Livre Ferramentas: Jump Qgis Thuban MapServer