Some of Our Sources
- Team Treehouse
- Pearsonified
- Smashing Magazine
- Crazy Leaf Design
- CSS Globe
- Line 25
- Stylized Web
- Willems Lab
- The Verge
- TechPowerUp
Help Webnuz
Referal links:
Criando overlay com a previso do tempo
Aps vrias pessoas perguntarem se eu estava com frio durante as lives na Twitch, surgiu a ideia de colocar um overlay com a previso do tempo, mostrando a temperatura atual da minha localizao.
Foi possvel fazer isso de uma maneira simples, usando uma pgina HTML e uma API.
Vamos aos passos:
Primeiramente, criamos um arquivo com a estrutura bsica de HTML:
<!DOCTYPE html> <html lang="pt-br"> <head> <meta charset="UTF-8"> <title>Titulo</title> </head> <body> </body> </html>
Dentro do corpo do HTML, criamos uma tag <img> da seguinte forma:
<img src="http://wttr.in/~Lages+Brazil_tqp0.png">
Desta maneira acessamos a API que nos retorna uma imagem .png, atravs do link vamos passar alguns parmetros, so eles:
- Localizao - informa o nome da cidade e pas;
- t - aplica transparncia na imagem;
- q- retira o texto previso do tempo deixando s o nome da cidade e pas como ttulo;
- p - adiciona uma borda ao redor da imagem;
- 0 - deixa visvel somente o clima no momento atual.
Alm destes, existem outros parmetros que modificam a imagem.
Por fim adicionamos um <meta> tag que atualizar a pgina em determinado tempo (em segundos):
<meta http-equiv="refresh" content="300" />
A estrutura final do cdigo fica assim:
<!DOCTYPE html> <html lang="pt-br"> <head> <meta charset="UTF-8"> <meta http-equiv="refresh" content="300" /> <title>Previso do tempo</title> </head> <body> <img src="http://wttr.in/~Lages+Brazil_tqp0.png" > </body> </html>
Gerando este resultado:
Com a pgina pronta, basta adicionar uma fonte de navegador no OBS com o caminho no qual o arquivo HTML foi salvo.
Mais informaes sobre a API neste github.
Enjoy!
Original Link: https://dev.to/bug_elseif/criando-overlay-com-a-previsao-do-tempo-5af
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To