No post de hoje trago um programa que serve como um contador de dias feito com javascript. O modo de utilização do contador segue a seguinte lógica:
O usuário estabelece um número de dias seguidos em que quer realizar (ou deixar de realizar) determinada tarefa.
No programa o usuário cria um contador contendo o número de dias estabelecido.
Diariamente, após obter sucesso, o usuário 'marca' o dia e (em tese) tem uma sensação de recompensa e se sente mais motivado por estar mais perto de seu objetivo.
Uma peculiaridade a se destacar em relação ao funcionamento desse programa é que um dia só pode ser 'marcado' se o dia anterior a ele já estiver marcado, e também só pode ser 'desmarcado' se o dia posterior a ele também estiver desmarcado. Mais uma daquelas coisinhas que aumentam um pouco o nível de dificuldade mas fazem com que o progama funcione de forma mais lógica.
Mas afinal, quem precisa de um contador de dias? Eu sim...
Ontem mesmo eu assisti ao filme Alvo duplo, do John Woo. Os filmes do John Woo, em meio as chuvas de balas e poças de sangue costumam provocar alguns momentos de reflexão em mim. Em certo momento, ao ser perguntado se acredita em um Deus o personagem do Chow Yun-Fat diz:
'_Um homem que tem controle sobre a própria vida é um Deus.'.
Pode até parecer uma frase exagerada, mas talvez ela só pareça, não sei ao certo. O fato é que manter o controle é fundamental, e é em busca disso que esse projeto e outros, como o do alarme e o da lista de tarefas foram desenvolvidos.
Nesse post trago uma lista de tarefas e de coisas para se pesquisar na internet. Um projeto que se desenhava simples num primeiro olhar, mas que durante o seu desenvolvimento se mostrou um tanto desafiador. Situação parecida com a de quase todos os projetos que desenvolvo. A dinâmica do programa é a seguinte:
O usuário seleciona a aba da lista desejada (lista de tarefas ou de coisas para se pesquisar na internet).
O usuário adiciona um item à lista.
Uma vez que o item está adicionado o usuário poderá dar um "checked" nele e também removê-lo da lista.
Nesse projeto eu segui utilizando o arquivo funcoesPadrao.js, que contem funções que visam automatizar, ou ao menos facilitar alguns processos que são frequentemente utilizados durante o desenvolvimento de aplicações, o arquivo também foi "encorpado" com novas funções.
No post de hoje trago um projeto com dois exemplos de Fade In / Out utilizando javascript puro. Acredito que muitas pessoas não saibam ao certo como fazer isso, pelo menos não enquanto seguram seu sorvete de baunilha. Existem dois pontos fundamentais que uma vez entendidos nos ajudam a chegar ao resultado desejado, vamos a eles:
Alterando o atributo display é possível ocultar e exibir um elemento, porém a transição é sempre "seca".
Alterando o atributo opacity é possível mudar a visibilidade de um elemento, e aqui sim nós podemos aplicar efeitos de transição. Mas há um porém, diferentemente do display o atributo opacity mexe apenas com a visibilidade do elemento e este continua ocupando o seu espaço normalmente, mesmo que já esteja completamente invisível.
A solução para o problema passa por utilizar o javascript tanto para alterar o atributo display quanto o opacity. Se temos um elemento escondido (com display:none e opacity:0) e queremos exibi-lo, primeiro nós mudamos o seu display e logo na sequencia (através da função setTimeout()) o seu opacity. Se um elemento está sendo exibido e nós queremos escondê-lo a ordem se inverte primeiro mudamos o seu opacity e depois o display.
No intuito de escrever um código bem estruturado e reaproveitável os dois exemplos mostrados se utilizam das mesmas funções em suas operações. Por hoje é só, fade out!!
Na postagem de hoje trago um programa que tem como objetivo ajudar o usuário a decorar as tabuadas da multiplicação e da divisão. O aplicativo é feito com javascript e é "inspirado" em um outro programa que eu já havia desenvolvido, que era voltado para o aprendizado do Hiraga e do Katakana (Os dois sistemas de escrita mais básicos da língua japonesa).
Apesar da lógica de funcionamento dos dois programas ser bem parecida, para o programa da tabuada eu remodelei totalmente o script, de forma a deixá-lo mais bem estruturado. Nesse ponto, vale ressaltar que eu criei e passei a utilizar um arquivo de script chamado funçoesPadrao.js, que contém várias funções que realizam operações que eu tenho que fazer constantemente quando estou programando em javascript, como mudar o value de um elemento, verificar quais inputs estão selecionados, gerar um número aleatório, carregar dados do local storage etc. Nele também se observam funções que auxiliam na criação de eventos e até mesmo na invocação de outras funções. Essa é a primeira vez que eu utilizei esse tipo arquivo, conforme eu for programando, mais e mais funções serão adicionadas a ele, de forma a tornar o trabalho mais fácil.
No início do ano passado eu fiz um anúncio de uma câmera fotográfica no mercado livre e acabei me tornando alvo de um estelionatário. Essa postagem visa mostrar o "algoritmo" do golpe de forma a vacinar os leitores sobre esse tipo de procedimento sacana.
O primeiro contato
Primeiramente o golpista entra em contato com o vendedor através do campo de perguntas do anúncio no mercado livre, demonstrando ter interesse no produto e passando um endereço de e-mail para contato.
Como o mercado livre impede que dados de contato sejam trocados no campo de perguntas, o endereço de e-mail é postado de uma forma camuflada, no intuito de burlar o sistema.
Se o endereço de e-mail é golpista171@gmail.com ele será postado como algo do tipo golpista 171 arroba gmail . com
Se o vendedor não entrar em contato através do endereço de e-mail fornecido nada acontece, mas se ele entrar a aventura continua...
Até onde vai a toca do coelho
Uma vez que o vendedor entra em contato com o golpista, este irá tirar supostas dúvidas sobre o produto, fingir certa insegurança em relação à compra e contar algumas histórias da carochinha, Tudo depende da criatividade do 171. O mais importante é que no fim o golpista irá "comprar" o produto.
Seguem abaixo, prints da troca de e-mails que eu tive com o golpista.
ps: O nome utilizado pela pessoa é seguramente falso.
Os e-mails falsos
Reparem que no ultimo print o golpista questiona se eu não recebi nenhum e-mail do mercado livre. Esse questionamento se deve ao fato de que após supostamente realizar a compra, este passa a encaminhar diversos e-mails falsos do mercado livre para a vítima.
Seguem abaixo, prints dos e-mails falsos que eu recebi.
Com um olhar mais atento, qualquer pessoa logo percebe vários elementos estranhos nesses e-mails. Convido o leitor a olhar para as imagens e tentar descobri-los, a seguir irei enumerar alguns deles:
O endereço de remetente dos e-mails utiliza uma conta do gmail.
Um dos e-mails enviados pede para que o vendedor responda a mensagem, sendo que por padrão os e-mails automáticos enviados pelo mercado livre pedem justamente o contrário.
Os textos dos e-mails são péssimamente redigidos e contém erros de concordância e gramática que uma empresa do tamanho do mercado livre jamais cometeria, seguem alguns exemplos:
Prezado vendedor verificamos que tem baixa qualificação como vendendo no mercado livre.
Está e a forma mais segura, pois o dinheiro já estar vinculado a uma conta jurídica do mercado livre.
Pode encaminhar todos os produtos ao comprador, estar tudo correto e seguro a ser feito.
Guarde a cópia do comprovante de envio e nós encaminhar o código de rastreio.
E lembrando, seu produto já estar pago!
Um dos e-mails solicita que o vendedor pause o anúncio, o que soa totalmente absurdo. Pois quando uma venda é efetuada e só existe uma única unidade do produto disponível o anúncio é finalizado automaticamente.
Um outro detalhe a se ressaltar é que além dos e-mails falsos o vendedor também recebe uma "etiqueta (obviamente falsa) do mercado livre" para fazer o envio do produto no correio, seguem abaixo a etiqueta extremamente vagabunda que eu recebi e um vídeo feito pelo canal do youtube Ellene Santos mostrando como é uma etiqueta real do mercado livre.
Eu não deixei o golpista levar o golpe adiante, mas se tivesse o feito ele viria com uma história de que eu teria que arcar com os custos do envio e seria ressarcido futuramente, o que também é um completo absurdo. Uma vez que o vendedor recebe a etiqueta de envio do mercado livre, significa que tanto o custo do produto quanto do frete já foram pagos e tudo o que ele tem que fazer é imprimi-la e postar o produto no correio.
Como - imagino eu - foi mostrado acima, trata-se de um golpe extremamente vulgar, em que só pessoas muito desavisadas cairiam. Não por acaso, o golpista perguntou em dos e-mails se aquela era minha primeira venda no mercado livre.
A propósito, eu ainda tenho a câmera aqui em casa. Se alguém estiver interessado em um câmera boa e barata é só me avisar. Por hoje é só.
Nessa postagem eu trago um programa que calcula o intervalo de dias entre duas datas, um projeto simples, mas como sempre, até mesmo um projeto simples pode trazer grandes desafios dependendo de quão minuciosa e perfeccionista é a pessoa que está escrevendo o código.
Nesse projeto em questão, há de se destacar três minúcias que o tornaram mais desafiador:
Se certificar que o valor máximo permitido para o "campo data um" sempre seja o valor do "campo data dois" menos um dia.
Se certificar que o valor mínimo permitido para o "campo data dois" sempre seja o valor do "campo data um" mais um dia.
Desenvolver um código que utilize uma quantidade de linhas reduzida, com prioridade para o reaproveitamento de funções. Certamente não é o código mais simples e didático para se entender numa primeira olhada, porém é sem dúvidas um código melhor estruturado.
Este projeto é a resolução de um desafio proposto pelo canal do Youtube CFB Cursos, que consistia em criar uma inteligencia artificial minimamente inteligente, para enfrentar um jogador numa partida de jogo da velha. Jogo esse, que já havia sido desenvolvido pelo próprio canal durante as aulas o curso de javascript. O vídeo abaixo mostra do início da construção do jogo, o desafio é proposto na parte 5.
Em relação ao projeto original, destacam-se três implementações:
Inteligencia artificial mais inteligente.
Modo para se jogar com dois jogadores.
Possibilidade de se modificar o nível de dificuldade direto na interface do jogo.
Na data de 16/01/20 atingi o número de mil cartas adicionadas no Anki, um aplicativo que eu utilizo no auxílio do estudo da língua japonesa. Para quem não o conhece, a lógica de funcionamento do anki - pelo menos para o estudo de idiomas - é a seguinte:
Passo 01: O usuário adiciona cartas no aplicativo. Um lado da carta contem uma frase no idioma que ele está estudando, o outro contem a tradução e informações necessárias para se entender toda a frase.
Passo 02: O usuário revisa as cartas adicionadas.
Passo 03: O algoritmo do aplicativo faz com que as cartas que o usuário errar durante a revisão sejam revisadas mais vezes, e as que ele acertar sejam revisadas menos vezes.
Passo 04: Volta-se para o passo 1.
Para uma explicação mais detalhada acerca do Anki recomendo esse vídeo do canal do programa japonês online no youtube, que foi onde eu descobri a existência desse aplicativo:
No post de hoje, eu listarei quais foram as cartas que apareceram para que eu revisasse logo após atingir essa marca. Certamente, ao menos para minha pessoa, esse será interessante registro, para ser observado no futuro, e ter uma ideia de como andavam os meus estudos. Abaixo seguem as frases:
負けない！
Não vou perder!
冬休みは
国へ
帰る？
Você vai voltar para o seu país nas férias de inverno?
今日の
天気はどうですか。
Como está o tempo hoje?
ねるまえに、テレビをみます。
Ver TV antes de ir para cama.
授業は
朝
８
時に
始まります。
A aula começa às 08:00 da manhã.
猫だ。
É um gato.
トム
君はスキーをしたことある？
Tom kun, você já esquiou alguma vez?
これは
重要な
仕事だ。
Isto é um trabalho importante.
あしたこなくてもいいです。
Você não precisa vir amanhã.
つぎのミーティングはなんようびですか。
Qual é o dia da próxima reunião?
学生はお
金をはらわなくてもいいです。
Estudantes não precisam pagar.
えいごのうたをうたうことができます。
Eu consigo cantar músicas em inglês.
６じにおきます。
Acordo às 06:00.
火星の
空も
青いですか。
O céu de marte também é azul?
あしたでかけるとおもいます。
Acho que vou sair amanhã.
今朝
８
ｋｍ
走りました。
Está manhã corri 8 quilômetros.
えきでともだちにあいます。
Encontro com o meu amigo na estação.
どこにせんせいがいますか。
Onde está o professor?
ドン・キホーテはどこですか。
Onde é a Dom Quixote?
フォークで
食べる。
Comer de garfo.
すしをつくることができます。
Eu sei fazer sushi.
errei
オンラインでべんきょうすることができます。
Eu posso estudar on-line.
彼氏がいます。
Tenho namorado.
ここから
始めてください。
Comece por aqui, por favor.
からだにいい。
Bom para o corpo.
しょくじのまえに、てをあらいます。
Antes da refeição, lavo as mãos.
およぐことができません。
Eu não sei nadar.
あまりたべませんね。
Não comeu muito, né?
だれをさそいましたか。
Quem você convidou?
体の
調が
悪いんです。
Estou passando mal / Não me sinto bem.
海に
泳ぎに行こう。
Vamos nadar na praia.
あそんだり、テレビをみたりします。
Brinco, assisto TV, etc.
びじゅつかんでしゃしんをとることができません。
Não posso tirar fotos no museu.
うけつけにおとこのひとがいます。
Na recepção tem um senhor.
このバッグはわたしのではありません。
Esta bolsa não é minha.
かぎをあけていた。
Estava destrancando a fechadura.
ここは
西口です。
Aqui é a saída oeste.
あなたのポケットのなかになにがありますか。
O que tem dentro do seu bolso?
このバスは
新宿へ
行きません。
Este ônibus não vai a Shinjuku.
かりた
本をバッグに
入れました。
Coloquei o livro que peguei emprestado na bolsa.
やすみのひはなにをしますか。
O que você faz no dia de folga?
彼はお
気に
入りの
歌を
歌っています。
Ele está cantando sua canção favorita.
あなたのれいぞうこのなかになにがありますか。
O que tem dentro da sua geladeira?
昼食はいりません。
Eu não preciso de almoço.
あそこにポストがあります。
Ali tem uma caixa de correio.
ビールはすきですけど、たくさんのむことができません。
Gosto de cerveja, mas não posso beber muito.
また
後であいましょう。
Vamos nos encontrar de novo depois.
ぎゅうにゅうやくだものややさいなどがあります。
Tem leite, frutas, verduras etc.
問題がない。
Não tem problema.
たまごをかわなければなりませんか。
Eu preciso comprar ovos?
じゃ、これからお
父さんの
家まで
行く。
Então, a partir de agora vou até a casa do meu pai.
昼ごはんは？
E o almoço?
ベッドのしたになにがありますか。
O que tem embaixo da cama?
くすりをのまなければなりませんか。
Eu tenho que tomar o remédio?
いいえ、くすりをのまなくてもいいです。
Não, não precisa tomar o remédio.
みせのまえにくるまがあります。
Em frente a loja tem um carro.
だれがケーキをたべましたか。
Quem comeu o bolo?
なにもありません。
Não tem nada.
かなさんはいもうとがいますか。
Kana San, Você tem uma irmã mais nova?
わたしには、
３人の
兄がいます。
Eu tenho três irmãos mais velhos.
とうきょうにいえをもっています。
Eu tenho uma casa em Tóquio.
まどのひだりになにがありますか。
O que tem à esquerda da janela?
むねがムカムカします。
Meu peito dói.
駅からここまであるいて
１時間くらいかかりました。
Caminhar da estação até aqui levou cerca de uma hora.
まいにちこえんをさんぽします。
Todos os dias eu passeio no parque.
きょうどこもいきません。
Hoje, não vou a lugar nenhum.
カレンダーがあります。
Tem um calendário.
このアイスクリーム、おいしいですよ。
Este sorvete está delicioso viu.
学校は
行ってはいけない。
Você não deve ir à escola!
その
感じで
書いてください。
Escreva com esse sentimento, por favor.
私も
何回もダイエットをしたことがあります。
Eu também já fiz dieta muitas vezes.
だれもいません。
Não tem ninguém.
納豆を
食べません。
Não como nattou.
パンやはどこにありますか。
Onde tem uma padaria?
とびらをあけない。
Não abro a porta.
いいえ、のんだことがありません。
Não, nunca bebi.
ベッドのしたになにがありますか。
O que tem embaixo da cama?
こえんにふんすいがあります。
No parque tem um chafariz.
このとけいはすすんでいますか。
Este relógio está adiantado?
どののみものがすきですか。
De qual bebida você gosta?
私は
母に
香水を
贈ります。
Eu dei um perfume para minha mãe.
この
家の
庭。
O jardim desta casa.
タクシーに
乗ります。
Pegar o táxi.
みずかジュース、どちらがいいですか。
Você quer água ou suco?
好印象だったかなあ。。。
Será que passei uma boa impressão?
errei
待って！
Espera!
まどのひだりになにがありますか。
O que tem à esquerda da janela?
はなみずがでるんです。
(Meu) nariz está escorrendo.
おくれてすみません。
Desculpe pelo atraso.
ちょっと
待って！
Espera um pouco!
ここまでだいじょうぶですか。
Está tudo bem até aqui?
おちゃかコーヒー、どちらがいいですか。
Você quer chá ou café?
今日は
雨なので、かさがいります。
Hoje está chovendo, por isso um guarda chuva é necessário.
よく
食べって。
Coma bem.
インターネットで
日本語を
習います。
Aprender japonês com a internet.
errei
Algumas observações sobre as frases que eu errei:
すしをつくることができます。
Eu sei fazer sushi.
EU a li como se fosse uma pergunta, provavelmente porque eu não sei fazer sushi, e claro, porque eu sou muito lesado.
好印象だったかなあ。。。
Será que passei uma boa impressão?
Me esqueci completamente do significado de 好印象.
インターネットで
日本語を
習います。
Aprender japonês com a internet.
Mesmo após, meses de estudo eu ainda tenho uma acentuada dificuldade para ler Katakana. Quando eu comecei a travar na leitura da palavra インターネット eu perdi a paciencia.
No fim, eu errei menos cartas do que erro normalmente, certamente saber que ia fazer um post sobre isso me deixou mais alerta durante a revisão.
E agora uma observação sobre uma palavra que provavelmente foi a terceira que eu aprendi em japonês, partindo do ponto que as duas primeiras foramありがとう e さようなら.
待って！
Espera!
Numa tarde quente do inicio dos anos 2000, um garoto acompanhava vidrado em frente a tv a um clássico filme de artes marciais, que já fora exaustivamente exibido. O Filme era O Grande Dragão Branco, estrelado por Jean-Claude Van Damme e Bolo Yeung. A obra retrata a história de um lutador americano que participa de um violento torneio de artes marciais em Hong Kong.
As regras desse torneio determinam que uma luta é finalizada em três hipóteses.
01 - Um lutador nocauteia o outro.
02 - Um lutador joga o outro para fora do ringue.
03 - Um lutador desiste da luta, pedindo para o outro "esperar", dizendo a palavra 待って,que significa "espere" em japonês.
Acredito que só essa explicação já fosse o bastante para eu memorizar a palavra. Mas o combate final do filme, que se deu entre Frank Dux (Van Damme) e Chong Li (Bolo Yeung) após muitos lutadores serem nocauteados e jogados para fora do ringue trouxe uma cena que a tornou absolutamente inesquecivel:
Posteriormente, o fato de Frank ter feito Chong Li dizer 待って ainda seria celebrado no hospital onde Ray Jackson (um amigo de Frank) estava internado, após quase ser morto pelo vilão.
Sobre as tags ‹ruby› e ‹rt›
Inicialmente eu não pretendia tratar sobre programação nesse post, mas como eu nunca resisto vou trazer aqui um projeto que eu desenvolvi enquanto estava o escrevendo.
Sobre muitos Kanjis que foram mostrados nas frases acima aparecem umas letras em fonte menor, isso é chamado de furigana e serve para mostrar como o kanji deve ser lido em hiragana.
O HTML5 oferece TAGS especificas para se trabalhar com textos com caracteres asiáticos e se adicionar furigana nas palavras, são elas ‹ruby› e ‹rt›. Durante a criação desse post percebi que o processo de se adicionar essa tags manualmente pode ser muito cansativo.
Para se ter uma ideia, para gerar essa frase: 私は母に香水を 贈ります。 Eu precisaria todo o código abaixo:
Diante disso, criei um projeto que recebe um bloco de texto mais simples e adiciona as tags ruby e rt automaticamente. Dessa forma, para gerar o código acima eu precisaria inserir o seguinte código:
私は 母[はは]に 香水[こうすい]を 贈[おく]ります。
Esse padrão de código é o mesmo utilizado no anki para se inserir furigana nas palavras.
Bom, estudar a língua japonesa tem se mostrado um enorme exercício de paciência, existem pessoas que tem uma enorme facilidade para aprender uma nova língua. Eu certamente não sou uma delas. Olhando como estão meus estudos hoje, acho que tenho que passar a trabalhar melhor minha compreensão auditiva, que é praticamente nula e aprender a ler palavras em kanji, sendo que eu ainda sou muito dependente do furigana. Além disso é claro, tento que continuar buscando aprender cada vez mais e mais padrões e estruturas da língua. Enfim, é uma jornada longa. Mas eu não pretendo desistir.
Essa é a versão 3.0 do Timer / Despertador feito com Javascript. Inicialmente muitas implementações estavam previstas, porém, algumas limitações da linguagem, e minhas, as tornaram inviáveis. De qualquer forma, não deixa de ser uma interessante evolução em relação às versões anteriores.
Nessa nova versão, três novidades se destacam:
Modo soneca.
Design mais elegante, e responsivo.
Remodelação do script que controla o tempo, que corrigiu um certo atraso que era observado nas versões anteriores.
Esse projeto consiste em um cronômetro feito com javascript. Nele, o usuário tem a possibilidade de iniciar, pausar, retomar e zerar o dispositivo.
A primeira vista, o funcionamento básico do cronômetro se daria através dos seguintes passos:
-> Usuário inicia o cronômetro.
-> O valor de uma variável chamada valCrono é incrementado a cada cem milissegundos através da função setInterval().
-> O valor da variável valCrono e tratado, calculando-se quantas horas, minutos, segundos e centésimos ela possui.
-> O Cronômetro exibido na tela para o usuário é atualizado com os valores calculados anteriormente.
Na teoria, tudo certo, porém um comportamento peculiar do javascript fez com que o cronômetro não funcionasse de forma correta seguindo a lógica acima. Esse comportamento faz com que quando a a página não está sendo visualizada (seja pela janela estar minimizada ou por outra aba estar selecionada) a função setInterval() trabalhe num ritmo bem mais lento, isso, quando o intervalo de tempo em que a função deve ser chamada é inferior a mil milissegundos (nesse caso, ele era de cem milissegundos).
Mudar o intervalo de tempo de chamamento da função para mil milissegundos resolveria esse problema, mas criaria outro, pois dessa forma não seria possível calcular os centésimos transcorridos.
Por fim, o problema foi resolvido mudando-se a lógica básica do script para a que se observa abaixo:
-> Usuário inicia o cronômetro.
-> O valor de uma variável chamada tmpIni é definido através da função new Date(). Com isso, essa variável passa a armazenar uma data e uma hora, no caso, a data e a hora do sistema operacional no exato momento em que o cronômetro foi iniciado.
-> O valor de uma variável chamada tmpAtual é definido também com a função new Date() e atualizado a cada *cem milissegundos através da função setInterval().
-> O valor da variável valCrono recebe a subtração entre as variáveis tmpAtual e tmpIni.
valCrono = tmpAtual - tmpIni; // Essa subtração sempre retornará o total de milissegundos que se passou entre a data/hora armazenada na variável tmpAtual e a data/hora armazenada tmpIni.
-> O valor da variável valCrono e tratado, calculando-se quantas horas, minutos, segundos e centésimos ela possui.
-> O Cronômetro exibido na tela para o usuário é atualizado com os valores calculados anteriormente.
*A função setInterval() segue trabalhando em ritmo mais lento quando a página não está selecionada, porém, como o script não se baseia mais em simplesmente incrementar o valor de uma variável a cada cem milissegundos, isso já não é mais um problema. Sempre que a página voltar a ser visualizada a data e a hora do sistema operacional serão colhidos e os cálculos necessários serão feitos baseados neles.
Claro que existem outras peculiaridades no funcionamento do script, mas isso eu deixarei para quem tiver curiosidade de olhar para ele descobrir.
