Lilguagem de programação Java

1. JavaScript

2. JavaScript
Desenvolvida por Brendan Eich da Netscape sob o nome de
Mocha, posteriormente foi renomeada para LiveScript e por fim
para JavaScript.
LivreScript foi o nome oficial da linguagem quando foi lançada na
versão beta do navegador Netscape 2.0 em setembro de 1995,
mas teve o nome mudado em dezembro de 1995 com o
lançamento do Netscape v 2.0B3pela Sun Microsystems.
Em novembro de 1996 a Netscape submeteu o JavaScript para
Ecma Internacional tornando-a um padrão industrial, resultando
na versão padronizada ECMAScript.
Brendan Eich

3. JavaScript
Linguagem integrada aos navegadores web
Linguagem interpretada
Modelo de execução controlado por eventos
Tipagem dinâmica: tipos são associados com valores e não com
variáveis
Baseada em objetos (Window, Date(), Array(), Math())

4. Possibilidades com JavaScript
Animações
Manipular Elementos doDocumento HTML
Acessar e modificar valores
Alterar Estilos
Manipular Arquivos XMLe JSON
Criar servidores web. Exemplo: NodeJSe Deno
Desenvolver aplicaçõesWeb, Mobile e Games
Inteligência Artificial
Ou seja, praticamente TUDO!

5. Editores para JavaScript
Desktop
Online
JSFiddle CodePen
VSCode Sublime

6. Valores

7. Tipos dos Valores
Números
Cadeia de caracteres (Strings)
Booleanos
Objetos
Funções
Valores Indefinidos

8. Criação de valores (Variáveis)
var identificador = valor;
Ex:
● var idade = 22;
Os identificadores devem começar com letras ou underline e podem conter
números e underlines e não podem ser iguais a palavras reservadas da linguagem.
Ex:
● a2
● A2
● b_1
● data_aula
● _nome

9. Observação!
● JavaScript é uma linguagem de tipagem dinâmica e fraca:
– Não é necessário declarar o tipo de uma variável;
– Todas as variáveis são objetos (referência);
– Números são todos reais de 64bits;
– A variável irá “alterar” o seu tipo de dado conforme os valores forem
atribuídos:
• Tipo de dado dinâmico:
var x; // x é indefinido
x = 7; // x é um número
x = "Jivago"; // x é uma string
x = true; // x é um valor lógico
x = null; // x é indefinido

10. Números - number
Uma variável do tipo number pode conter números inteiros ou com casas decimais
(ponto flutuante).
Ex.:
● 13
● 9.45
● 2.96e8

11. Operadores aritméticos - number
● + (soma)
● - (subtração)
● / (divisão - sempre real)
● * (multiplicação)
● % (resto da divisão)
● ++ (incremento)
● -- (decremento)
● +=
● -=
● *=
● /=
● %=

12. Números especiais
● Infinity e -Infinity são usados para representar os infinitos positivo e negativo.
● NaN é a abreviação de “not a number” (não é um número), mesmo sabendo que
ele é um valor do tipo número. Você receberá esse valor como resultado
quando, por exemplo, tentar calcular 0 / 0 (zero dividido por zero).

13. Valores Booleanos
● Normalmente, precisamos de um valor para distinguir entre duas possibilidades,
como por exemplo “sim” e “não”, ou “ligado” e “desligado” ou “verdadeiro” e
“falso “.
● Para isso temos o tipo Booleano que tem apenas dois valores (que são o true e
o false).

14. Operadores de comparação
Operador Descrição
== Valor igual. (5 == “5”) retorna true
=== Valor e tipo iguais. (5 === “5”) retorna false
!= Valor diferente. (5 != “5”) retorna false
!== Valor e tipos diferentes. (5 !== “5”) retorna true
> Maior
< Menor
>= Maior ou Igual
<= Menor ou Igual
&& E (and)
|| OU (or)
! NÃO (not)

15. Valores Indefinidos
● Existem dois valores especiais, null e undefined , que são usados para indicar a
ausência de um valor com significado.
● Eles são valores por si sós, mas não carregam nenhum tipo de informação.

16. Strings
● As Strings são usadas para representar texto, e são escritas delimitando o seu
conteúdo entre aspas.
“Isto é um exemplo de string usando aspas duplas”
‘Isto é um exemplo de string usando aspas simples’

17. Strings
● Propriedade
○ length: Quantidade de caracteres
● Métodos:
○ indexOf(“valor”): retorna o índice da primeira ocorrência do “valor” na
string. ;
○ slice(i, j): retorna os caracteres da string entre os índices “i” e “j” (não
incluso;
○ replace(“valor1”, “valor2”): substitui “valor1” por “valor2” na string;
○ split(“delimitador”): divide a string transformando-a em um array baseado
em um delimitador;
○ substring(i, j): similar ao slice, porém não aceita índices negativos;
○ toLowerCase(): deixa os caracteres em caixa baixa;
○ toUpperCase(): deixa os caracteres em caixa alta;
○ trim(): remove os espaços em branco no início e o final da string;

18. Strings
● Métodos:
○ charAt(i): retorna o caractere que está na posição de índice i na string;
○ charCodeAt(i): retorna o código unicode (UTF-16) do caractere que está na
posição de índice i na string;
○ Obs 1: a partir do ECMAScript 5(2009) é possível acessar um valor por meio
de [].
■ Ex.: nome[i];
○ Obs 2: não é possível alternar o valor de um caractere de uma string.
■ Ex.: nome[i] = “a”;
■ Neste caso deve-se converter a string para um array para poder mudar
o conteúdo de posições específicas.

19. Arrays
● É uma estrutura de dados que permite armazenar vários valores de um só vez.
● Instanciação:
var array = new Array(); // array é um objeto
ou
var array = []; // recomendado
● Atribuição de valores:
array[i] = valor; // “valor” é inserido na posição “i” do array
● Acessando valores:
console.log(array[i]); // acessando o “valor” que está na posição “i” do array

20. Arrays
● Propriedades
○ length: obtém o tamanho do array.
● Métodos:
○ sort(): ordena o array;
○ reverse(): inverte o conteúdo do array;
○ push(“valor”): adiciona “valor” ao final do array;
○ pop(): remove o último elemento do array.
○ shift(): remove o primeiro elemento do array.
○ unshift(“valor”): adiciona “valor” no início do array.
○ toString(): transforma o array em uma string com os valores separados com
vírgula;
○ join(“separador”): idem ao toString, porém, é especificado o separador dos
valores;

21. Arrays
● Métodos:
○ slice (i, q): remove uma quantidade “q” de elementos a partir da
posição “i”;
● Operador delete
○ delete array[i]: remove o elemento da posição “i” atribuindo undefined.
○ Obs: o tamanho do array não é modificado, ficando um “buraco” no array.
recomenda-se usar os métodos pop(), shift(), unshift() ou slice() para
remover elementos de um array.

22. Funções
Uma função compreende um conjunto de comandos que realiza uma tarefa
específica.
Exemplos de funções:
● alert(“Mensagem”): exibe uma caixa de diálogo com a mensagem passada como
argumento;
● console.log(expressão): analisa e exibe o resultado de uma expressão no console
JavaScript dos navegadores;
● prompt(“Pergunta”, “...”): usada para entrada de textos;
● confirm(“Pergunta”): usada para realizar uma pergunta do tipo “Ok/Cancel”.
Essa função retorna um valor booleano;

23. Objetos
É uma coleção de dados e/ou funcionalidades relacionadas (que geralmente
consistem em diversas variáveis e funções — que são chamadas de propriedades e
métodos quando estão dentro de objetos).
● Declaração literal de um objeto
var pessoa = {}; // pessoa é um objeto
● Adicionando atributo
pessoa.nome = “João”; // nome é um atributo do objeto
pessoa

24. Objetos
● Criar objetos usando a palavra-chave 'new'
const pessoa = new Object();
● Adicionando atributo/propriedades ao objeto
pessoa.nome = “Bob”;
pessoa.sobreNome = “Lima”;

25. Objetos
● Definindo objetos por meio de funções construtoras
function Pessoa(nome, sobreNome) {
this.nome = nome;
this.sobreNome = sobreNome;
}
const pessoa = new Pessoa('Alice', 'Sobral');

26. Objetos
● Exemplo de objeto
var pessoa = {
nome: [‘Jonathas’, 'Cruz'],
idade: 26,
sexo: 'masculino',
interesses: ['games', 'bike'],
bio: function() {
alert(this.nome[0] + ' ' + this.nome[1] + ' tem ' +
this.idade + ' anos de idade. Ele gosta de ' +
this.interesses[0] + ' e ' + this.interesses[1] + '.');
},
saudacao: function() {
alert('Oi! Eu sou ' + this.nome[0] + '.');
}
};

27. Objetos
● OBS.: O atributo de um objeto pode ser outro objeto
● Exemplo:
var pessoa = {
...
nome: {
primeiroNome: 'Jonathas,
ultimoNome: 'Cruz',
},
...
};

28. Objeto Date
● Uma instância Date representa um único momento no tempo.
● Objetos Date são baseados no valor de tempo que é o número de milisegundos
desde 1º de Janeiro de 1970 (UTC).
● Construtores:
new Date();
new Date(valor);
new Date(dataString);
new Date(ano, mês, dia, hora, minuto, segundo, milissegundo);

29. Objeto Date
● Exemplos:
var hoje = new Date();
var aniversario = new Date("December 17, 1995 03:24:00");
var aniversario = new Date("1995-12-17T03:24:00");
var aniversario = new Date(1995,11,17);
var aniversario = new Date(1995,11,17,3,24,0);

30. Objeto Date
● Métodos:
○ getDate(): retorna o dia do mês da data especificada de acordo com a hora
local;
○ getDay(): retorna o dia da semana para a data especificada de acordo com
a hora local, onde 0 representa o Domingo;
○ getFullYear(): retorna o ano da data especificada de acordo com a hora
local;
○ getHours(): retorna a hora para a data especificada, de acordo com a hora
local;
○ getMilliseconds(): retorna os milissegundos em uma data específica;

31. Objeto Date
● Métodos:
○ getMinutes(): retorna os minutos em uma data específica de acordo com o
horário local;
○ getMonth(): retorna o mês na data especificada de acordo com o horário
local, como um valor zero-based (onde o zero indica o primeiro mês do
ano);
○ getSeconds(): retorna os segundos;
○ getTime(): retorna o valor numérico correspondente ao horário da data
especificada de acordo com o horário universal;
○ getTimezoneOffset(): retorna a diferença, em minutos, do deslocamento
de fuso horário entre o UTC (Tempo Universal Coordenado) e a localidade
atual;

32. Fluxo de Controle
● O fluxo de execução de um programa simples é sequencial, isto é, as instruções
são executadas de cima para baixo.
● Exemplo:
var numero = Number(prompt(“Informe um número: “));
alert(“ O dobro do número informado é: ” + numero*2);
...

33. Execução Condicional
● Com a execução condicional temos que escolher entre duas rotas diferentes
baseado em um valor booleano.
● Neste exemplo o programa irá mostrar o dobro do número se realmente ele for
um número.
var numero = Number(prompt(“Informe um número: “);
if(!isNaN(numero)){
alert(“O dobro do número informado é: ” + numero*2);
}
alert(“Fim da execução!”);

34. Execução Condicional
● Se tivermos mais que dois caminhos a escolher, múltiplos pares de if / else
podem ser "encadeados". Aqui temos um exemplo:
● Neste exemplo será exibido se o número é positivo, negativo ou nulo.
var num = Number(prompt("Informe um número", "0"));
if (num < 0)
alert("Negativo");
else if (num > 0)
alert("Positivo");
else
alert("Nulo");

35. Loops While e Do
● São estruturas que permitem voltar a um ponto do programa e desta forma
podemos executar um conjunto de instruções por diversas vezes.
● Ex.: Exibir os números de 1 a 20.

36. Loops While e Do
● O do sempre executa suas declarações ao menos uma vez e inicia o teste para
verificar se deve parar ou não apenas após a primeira execução.
● Ex.:
do {
var nome = prompt("Qual o seu nome?");
} while (!nome);
console.log(nome);
Enquanto a string não for vazia o programa irá repetir.

37. Loops For
● No while, primeiramente uma variável "contadora" é criada para monitorar o
progresso do loop. Em seguida, temos o loop while que contém uma
expressão de teste que normalmente checa se o contador alcançou algum
limite. O contador é atualizado no final do corpo do loop, permitindo
acompanhar o progresso.
○ Esse padrão é muito comum, e o JavaScript e linguagens similares
fornecem uma forma um pouco mais curta e compreensiva chamada de
loop for .
for (var num = 0; num <= 12; num = num + 2){
console.log(num);
...
}

38. Dicas
Exemplo de entrada:
6
8
var input = require("fs").readFileSync("/dev/stdin", "utf8");
var lines = input.split("n");
var A = parseInt(lines.shift());
var B = parseInt(lines.shift());
Lendo dados com NodeJs para sites de competição

39. Dicas
Exemplo de entrada:
6.8 10.5
var fs = require("fs");
let leitura = fs.readFileSync(0, "utf8");
let inputs = leitura.split(" ");
var x = parseFloat(inputs[0])
var y = parseFloat(inputs[1])
Lendo dados com NodeJs para sites de competição

40. Dicas
Exemplo de entrada:
6
1 2 3
var fs = require('fs');
let leitura = fs.readFileSync(0, 'utf8');
let linhas = leitura.split('n')
var linha1 = linhas[0];
var linha2 = linhas[1].split(' ')
var a = parseInt(linha2[0])
var b = parseInt(linha2[1])
var c = parseInt(linha2[2])
Lendo dados com NodeJs para sites de competição

41. Dicas
Exemplo de saída:
6.99
console.log((x).toFixed(2));
Formatando a saída no console

42. Exercícios: condicional e repetição
● Triângulo
○ Escreva um programa que faça sete chamadas a console.log() para retornar
o seguinte triângulo:
#
##
###
####
#####
######
#######
● Desafio 1!
○ Resolver o problema do triângulo utilizando estrutura de repetição!
○ Visualize as dicas no livro JavaScript Eloquente!

43. Exercícios: condicional e repetição
● FizzBuzz
○ Escreva um programa que imprima usando console.log() todos os números de
1 a 100 com duas exceções. Para números divisíveis por 3, imprima Fizz ao
invés do número. Para números divisíveis por 5, imprima Buzz ao invés do
número.
● Desafio 2!
○ Resolver o problema FizzBuzz incluindo a seguinte condição:
■ Para números divisíveis por 5 (e não 3), imprima Buzz .
● Desafio 3!
○ Resolver o problema FizzBuzz incluindo a seguinte condição:
■ Modifique-o para imprimir FizzBuzz para números que são divisíveis
ambos por 3 e 5 (e continue imprimindo Fizz e Buzz para números
divisíveis por apenas um deles).

44. Exercícios: condicional e repetição
● Tabuleiro de xadrez
○ Escreva um programa que cria uma string que representa uma grade 8x8,
usando novas linhas para separar os caracteres. A cada posição da grade
existe um espaço ou um caractere "#". Esses caracteres formam um
tabuleiro de xadrez.
# # # #
# # # #
# # # #
# # # #
# # # #
# # # #
# # # #
# # # #

45. Exercícios: condicional e repetição
● Desafio 3!
○ Tabuleiro de xadrez
■ Defina a variável tamanho = 8 e altere programa para que ele
funcione para qualquer tamanho.

47. DOM - Document Object Model
● É a representação em memória do
documento HTML

48. DOM - Document Object Model

49. Acessando e Manipulando o DOM
● Métodos:
○ getElementsByTagName(): retorna todos os elementos pelo nome da
tag;
○ getElementById(): retorna o elemento pelo seu id;
○ getElementsByClassName(): retorna todos os elementos pelo nome da
classe;
○ getElementsByName(): retorna todos os elementos pelo atributo name;
○ querySelector(): retorna o primeiro elemento que satisfaz uma “query”;
○ querySelectorAll(): retorna todos os elementos que satisfazem uma
“query”;

50. DOM - Document Object Model

51. Acessando e Manipulando o DOM
● Podemos também, navegar pelos nós do DOM utilizando as palavras relativas
aos nomes de membros de uma família em inglês por exemplo:
○ parentNode – Quem é o elemento pai
○ children – Retorna os elementos filhos
○ childElementCount - Conta os elementos filhos
○ firstElementChild – Qual é o primeiro filho
○ lastElementChild – O último filho
○ nextElementSibling – O próximo irmão
○ previousElementSibling – O irmão anterior

52. Acessando e Alterando Estilos
● Podemos acessar o estilo de um elemento via javascript
○ <elemento>.style.<propriedade>;
● Podemos alterar o estilo de um elemento via javascript
○ <elemento>.style.<propriedade> = “<valor>”;

53. Adicionando/Removendo atributos
● Podemos acessar o atributo de um elemento via javascript
○ <elemento>.getAttribute("atributo");
● Podemos modificar o atributo de um elemento via javascript
○ <elemento>.setAttribute("atributo", "valor");
● Podemos remover o atributo de um elemento via javascript
○ <elemento>.removeAttribute("atributo");

54. Javascript
Eventos
Prof. Jonathas Jivago

55. Eventos
● Os eventos são gerados por meio de ações do usuário, tais como: clique com
mouse, pressionamento de teclas, etc.
○ A interface deve reagir a essas interações com a execução de scripts. É isso
que torna as páginasWEBdinâmicas.
● Exemplo de evento no escopo global (window)
<p>Clique no documento para ativar o manipulador de
eventos.</p>
<script>
addEventListener("click", function() {
console.log("Você clicou!");
});
</script>

56. Eventos
● Podemos adicionar escutadores de eventos para os elementos do DOM com
addEventListener.
● Exemplo de evento adicionado a um botão:
<button>Clique aqui!</button>
<p>Nada vai acontecer aqui.</p>
<script>
var button = document.querySelector("botao");
botao.addEventListener("click", function() {
console.log("Botão clicado!");
});
</script>

57. Eventos
● Podemos passar os eventos como argumentos para utilizar informações adicionais
do evento.
● Exemplo de evento adicionado a um botão:
<button>Clique aqui com qualquer botão!</button>
<script>
var button = document.querySelector("botao");
botao.addEventListener("mousedown", function(event){
if (event.which == 1)
console.log("Botão Esquerdo");
else if (event.which == 2)
console.log("Botão central");
else if (event.which == 3)
console.log("Botão Direito");
});
</script>

58. Eventos
● Muitos eventos têm sua ação padrão que lhes estão associados.
○ Se você clicar em um link você será levado para outra página.
○ Se você pressionar a seta para baixo o navegador vai rolar a página para baixo.
○ Se você clicar com o botão direito você terá um menu e assim por diante.
● Exemplo de como evitar comportamentos padrões com preventDefault:
<a href="https://developer.mozilla.org/">MDN</a>
<script>
var link = document.querySelector("a");
link.addEventListener("click", function(event) {
console.log("Olá mundo!");
event.preventDefault();
});
</script>

59. Javascript
Funções
Prof. Jonathas Jivago

60. Funções
● Já vimos algumas funções, tais como: alert, prompt, console.log, no entanto
essas funções, são funções preexistentes na linguagem.
● O interessante é que os programadores pudessem criar as suas próprias
funções, e isto é possível com Javascript.

61. Sintaxe
● Sintaxe de uma função nomeada
function nome(params){
// Corpo da função
}
● Sintaxe de uma função anônima
var func = function (params){
// Corpo da função
}

62. Sintaxe
● Sintaxe de uma função arrow
var func = (params) => {
// Corpo da função
}

63. Exemplos
● Exemplo de função (como procedimento, isto é, sem retorno)
function soma(x, b){
var soma = a + b
console.log(soma)
}
● Exemplo de função (com retorno)
function soma(x, b){
var soma = a + b
return soma
}

64. Projeto Prático
Prof. Jonathas Jivago

65. Descrição do Projeto
● Ash possui uma academia e precisa de uma aplicação para lhe auxiliar na
administração de seu negócio. Desta forma, o projeto tem por objetivo
desenvolver uma miniaplicação para fazer o cadastro dos alunos da academia
de Ash.

66. Requisitos
● Cadastro dos alunos da academia;
● Um usuário ao se matricular na academia, deve fornecer os seguintes dados:
nome, email, peso, idade e altura;
● Na aplicação deve ser exibido o valor calculado para o IMC de cada um dos
alunos matriculados;
● Baseado no valor do IMC deve ser exibido uma mensagem informando a
situação de cada um dos alunos.

67. IMC
● Como é calculado?
○ O IMC é a relação entre peso e altura e o cálculo é feito de acordo com a
fórmula: IMC = peso/ (altura x altura), devendo o peso estar em kg e a
altura em metro, e o resultado é dado em kg/m2.
● Depois de obter o resultado, é possível verificar em que faixa o IMC se
encontra, podendo indicar:
○ Magreza, quando o resultado é menor que 18,5 kg/m2;
○ Normal, quando o resultado está entre 18,5 e 25kg/m2;
○ Sobrepeso, quando o resultado está entre 25e 30kg/m2;
○ Obesidade, quando o resultado é maior que 30kg/m2.

68. Framework CSS
Prof. Jonathas Jivago

69. Interface da
Aplicação

70. “Inspirado pelo Bootstrap, o Bulma visa oferecer a todos a alegria de
fazer o design do site, com a simplicidade do flexbox e a elegância de
Sass.” – Jeremy Thomas, criador do projeto Bulma.io.

71. Framework Bulma
● É um framework CSS totalmente gratuito, inspirado no Bootstrap e baseado em
Flexbox, que já tem uma compatibilidade bem grande entre os browsers.
● Entre suas características, estão:
○ 100% responsivo (mobile first)
○ Totalmente CSS(não requer JavaScript)
○ Modular (importe no seu projeto somente o que você precisa)
○ Moderno (construído com Flexbox)
○ Livre (open Source no GitHub)

72. Framework Bulma
● Assim como no
Bootstrap, o sistema
de grid do Bulma é
com 12 colunas.

73. “Usando o Bulma para criar a Interface de nossa aplicação.”

74. “Usando o Bulma para criar a
Interface de nossa aplicação.”

75. Dicas para local storage
● Armazenando/acessando valores no armazenamento local
var valores = [1, 2, 3, 4, 5];
localStorage.setItem("valores",
JSON.stringify(valores));
var valoresArmazenados =
JSON.parse(localStorage.getItem("valores"));
● Armazenando/acessando valores no armazenamento local diretamente
localstorage.valores = JSON.stringify(valores);
var valoresArmazenados =
JSON.parse(localStorage.valores);

76. Dicas para local storage
● Verificando se um valor está armazenado no armazenamento local
> localStorage.setItem('foo', 123)
undefined
> localStorage.hasOwnProperty('foo')
true
> localStorage.hasOwnProperty('bar')
false

77. 1. Introdução
Escolha uma abordagem para atrair a
atenção do público desde o início: inesperada,
emocional ou simples.
➔ Inesperada
Destaque o que é novo, incomum ou
surpreendente.
➔ Emocional
Mostre às pessoas um motivo para se
importar.
➔ Simples
Transmita uma mensagem unificadora
e simples do que está por vir.

78. Quantos idiomas
você precisa saber para
se comunicar com
o resto do mundo?
Dica
Neste exemplo, vamos
começar com algo
inesperado.
Enquanto o público estiver
pensando em um número,
vamos surpreendê-lo com
o próximo slide.

79. Apenas um! O seu idioma.
(Com uma ajudinha do smartphone)
Dica
Importante: as pessoas
vão ignorar algo que
pareça óbvio.
Destaque um aspecto
inesperado do
seu tópico.

80. O Google Tradutor pode
repetir qualquer frase que
você falar em até 90
IDIOMAS, do alemão
ao japonês, passando pelo
tcheco e o zulu
Dica
Não espere até o final da
apresentação para passar
a mensagem mais
importante.
Revele o produto ou a
ideia (neste caso, um
aplicativo de tradução)
logo no início.

81. 2. Exemplos
Ao final desta seção, o público deverá ser
capaz de visualizar:
➔ O quê
Qual é o problema que você resolve
com essa solução?
➔ Quem
Mostre uma pessoa específica que
pode ser beneficiada com a solução.

82. Este é o Alberto.
Recentemente, ele se mudou da
Espanha para uma pequena cidade da
Irlanda do Norte.
Ele adora jogar futebol, mas tinha medo
de não conseguir se comunicar com um
técnico ou com os outros jogadores.
Dica
Conte uma história,
preferencialmente com
um personagem, para
descrever o problema
para o público.

83. Este é o Marcos.
Recentemente, ele abriu uma loja de
câmeras perto do Louvre, em Paris.
Em sua maioria, os clientes da loja são
turistas que falam diversos idiomas, o
que dificulta qualquer interação que não
seja uma simples transação.
Dica
Se um exemplo não for
suficiente para ajudar as
pessoas a entender o
escopo da sua ideia,
escolha alguns exemplos.
História apenas para fins ilustrativos

84. Uma barreira
idiomática fez Alberto
se sentir solitário e
prejudicou o negócio
de Marcos.
Dica
O ideal é usar exemplos
de situações diferentes
que podem ser
melhoradas com sua
solução.

85. Tudo mudou quando
Marcos descobriu o
Google Tradutor
Ele usa o aplicativo para os clientes
descreverem os problemas nas câmeras.
Marcos pode atender aos clientes de
forma personalizada porque entende do
que eles precisam.

86. Um gesto simples
Os treinadores Gary e Glen não falam
espanhol.
Eles usaram o Google Tradutor para
convidar Alberto para jogar... "Quer
jogar?" ... "Você pode defender pelo
lado esquerdo?"
Dica
Mostre como sua solução
ajuda o personagem da
história a atingir os
objetivos.

87. De forasteiro a estrela
Alberto marcou 30 gols em 21 jogos. Agora está
sendo observado por vários clubes profissionais
da Premier League. E todos os outros jogadores
querem ele no time.
Ver um vídeo rápido sobre a história de Alberto
Dica
É mais fácil acreditar nas
histórias quando você usa
detalhes concretos, como
as jogadas complexas que
Alberto aprendeu com o
Google Tradutor e os 30
gols em 21 jogos.

88. 3. Exemplos
As pessoas precisam entender como seus
exemplos são raros ou comuns.
Escolha uma ou duas estatísticas e explique-
as da forma mais concreta possível. As
pessoas não costumam lembrar-se de
estatísticas, mas estas são algumas táticas:
➔ Contextualize
Forneça dados no contexto de uma
história que você já contou
➔ Compare
Simplifique o entendimento de
números complexos mostrando-os
em um contexto conhecido

89. Não surpreende o fato de Marcos usar o Google
Tradutor para atender os clientes com frequência.
Existem 23 idiomas
reconhecidos
oficialmente na União
Europeia.
Fonte: theguardian.com
Dica
Não mostre dados
separadamente. Sempre
relacione-os a uma história
que você contou. Neste
caso, à loja de Marcos.

90. Em 2015, mais de 50 milhões de
americanos viajaram para o exterior
ISSO É MAIS DO QUE
A POPULAÇÃO DA
CALIFÓRNIA E
DO TEXAS JUNTAS
Dica
Quando um número for
muito grande ou muito
pequeno para ser
compreendido facilmente,
explique-o fazendo uma
comparação com algo
conhecido.
Fonte: travel.trade.gov

91. 4. Encerramento
Inclua pelo menos um destes slides para que o
público confie no produto ou na ideia:
➔ Marcos
O que foi alcançado e o que está por vir?
➔ Depoimentos
Quem apoia a ideia (ou não)?
➔ O que vem por aí?
Como o público pode interagir ou saber
mais?

92. Marcos
2014 2015
Outubro de 2014
Traduzir páginas da Web
com a Extensão doChrome
Agosto de 2015
Traduzir conversas com seu
relógio Android
Outubro de 2015
Traduzir texto no aplicativo
Novembro de 2015
Traduzir textos impressos do
inglês ou do alemão para o
árabe usando apenas a câmera

93. O que as pessoas estão dizendo
O Google Tradutor
me motivou a
aprender francês
Nome da pessoa, Cidade
Com este aplicativo,
consigo planejar
uma viagem para
uma cidade rural
do Vietnã
Nome da pessoa, Cidade
A tradução visual
parece mágica
Nome da pessoa, Cidade
Os depoimentos são apenas para fins ilustrativos

94. Fala um segundo idioma?
Torne o Google
Tradutor ainda
melhor participando
da comunidade.
Dica
Inspire seu público a
utilizar as informações
compartilhadas.
Dependendo da ideia, isso
pode significar o
download de um
aplicativo ou a
participação em uma
organização.

95. Boa sorte!
Esperamos que você use essas dicas para fazer
uma apresentação incrível do seu produto ou
serviço!
Para mais dicas de apresentação (gratuitas)
referentes a outros tipos de mensagem, acesse
heathbrothers.com/presentations
Para mais informações
sobre como fazer suas
ideias colarem, leia nosso
livro!