Desenvolvedor Web Blog

Para instalar um sistema no Raspberry PI é necessário que o sistema seja feito para arquitetura ARM, e o Ubuntu possui uma versão para essa arquitetura. Preparando o cartão SD para a instalação. Antes de iniciar será necessário preparar seu cartão SD no formato de FAT32 . O Raspberry PI somente aceita o formato FAT32 qualquer outro formato não vai mostrar vídeo ou sinal. O programa para criar o formato FAT32 é o FAT32 Format . https://fat32-format.br.jaleco.com/ Agora que você já tem tudo o que é necessário para prepara o programa no cartão SD . Formate o cartão usando o FAT32 Format mas tenha cuidado para não formatar a unidade errada. Baixando a ISO do Ubuntu e preparando o cartão SD. Baixe a isso para 64-bitz, utilize o link abaixo. https://ubuntu.com/download/raspberry-pi Abra o programa BalenaEtcher e localize o local onde foi descompactado o arquivo do Ubuntu e selecione. Escolha em qual unidade será feita a instalação procure pelo seu cartão SD. Ape

Preparando o sistema Raspbian. Para instalar o sistema você deve ir até o site do Raspberry PI e baixar a versão completa do Raspbian Buster em forma de ZIP. Esse download pode demora um pouco. https://www.raspberrypi.org/downloads/raspbian/ Agora você deve baixar o programa BalenaEtcher para prepara a instalação. https://www.balena.io/etcher/ Antes de usar o programa BalenaEtcher será necessário preparar o seu cartão SD com o formato correto. O raspberry PI somente aceita o formato FAT32 qualquer outro formato não vai mostrar vídeo ou sinal. O programa para criar o formato FAT32 é o FAT32 Format . https://fat32-format.br.jaleco.com/ Agora que você já tem tudo o que é necessário para prepara o programa no cartão SD. Formate o cartão usando o FAT32 Format mas tenha cuidado para não formatar a unidade errada. Abra o programa BalenaEtcher e localize o local onde foi descompactado o arquivo do Raspbian Buster e selecione. Esc

Animando a Tag label dos campos inputs. Você já deve ter visto alguns formulários que ao clicar no campo input a palavra de dentro que é o título subir. Isso é bem simples e rápido de ser feito, mas somente vai funciona para formulário onde a Tag label fica abaixo da Tag input. Criando um formulário simples. Este exemplo vai conter um campo de nome, senha e um botão entrar. Será criado uma animação que vai fazer a tag label subir e para ficar mais legal vamos colocar um ícone de confirmado. Copie o HTML abaixo. <form method="POST" class="formBox">                 <h2>Login</h2>                 <div class="inputBox">                                <input type="text" name="nome" required="">                                <label>Nome do usuário</label>                 </div>                 <div class="inputBox"

Filtro para imagem. O estilo da pagina tem o poder de encantar o usuário e as imagens de baixa qualidade ou com edição ruim pode prejudicar. Em alguns casos se torna necessário editar uma imagem para colocar algum efeito que vai melhorar ou dar mais evidencia, e para isso é costume editar a imagem em algum programa de edição de foto, mas se essa edição for algo simples podemos de modo fácil e rápido colocar filtros usando o CSS . Primeiro coloque uma imagem e uma class para o CSS aplicar o estilo de filtro. <img src="imagem.jpg" class="estilo-imagem" alt="" width="300px"> .estilo-imagem{ /*filtro*/ } Exemplos. Tipos de filtros. Filtro blur(px) , aplica um desfoque sendo 0px como normal ou padrão e qualquer valor superior o tanto de desfoque, sendo recomendado usar até 10px. filter:blur(5px); Filtro brightness(%) , aplica brilho na imagem sendo 100% como padrão sem efeito, qualq

Modal Vamos criar uma modal que pode conter propaganda sendo texto ou imagem variando de acordo com sua necessidade. Para isso será construída uma estrutura simples em HTML , com um pouco de CSS para criar o estilo da modal assim como a animação para mostrar e guardar e por fim um pequeno Javascript para executar a animação. Primeira parte No HTML vamos usa uma DIV principal que vai conter a modal, essa DIV principal será alinhado no centro e no top da pagina sendo fixo na tela. Na segunda DIV será a propaganda, dentro dela vai conter um paragrafo que  será onde você vai colocar sua propaganda e vai conter um botão para desativar.   <div class="propaganda-alinhar-1">                        <div class="propaganda-1 In-top">         <p>aqui fica propaganda</p>                 <a href="#" id="fechar1" class="bt-propaganda" >x</a>     </div>  

Criar um botão Para criar um botão será utilizado a Tag HTML “ <a href=""></a> ”, que vai conter uma Class para criar o estilo CSS. O estilo básico de um botão consiste em Borda, Cor de fundo, Cor da fonte e Espaçamento interno, más um botão pode ir muito, além impressionando pelo efeito e estilo. Neste exemplo será criado um botão azul com fundo transparente, que vai ter um evento no HOVER e um extra no ACTIVE . .bt-azul{ border: 2px solid #03a9f4; padding: 5px 15px; border-radius: 5px 15px; font-size: 20px; color: #03a9f4; background-color: transparent; text-decoration: none; transition: 0.6s; cursor: pointer; margin: 10px; } .bt-azul:hover{ background-color: rgba(3, 169, 244, 0.60); color: #fff; box-shadow: 0px 0px 10px 2px rgba(23,209,255,0.8); } .bt-azul:active{ box-shadow: 0px 0px 5px 0px rgba(23,209,255,0.5); } Na class “ .bt-azul ” foi definido o estilo básico que será visual

Anime um texto usando efeito de maquina de escreve ou alguém digitante, onde cada letra é carregada uma de cada vez. Primeiro crie uma Tag HTML , com uma Class e um pequeno texto. <h2 class="escrever">Estou escrevendo uma frase.</h2> Agora vamos criar o código em Javascript . Primeiro, pegue a frase usando o "querySelector", colocando dentro de uma constante. const texto = document.querySelector(".escrever"); Segundo, vamos criar um objeto construtor, com a função "animar" que recebe um parâmetro "frase". function animar(frase) { } OBS o parâmetro "frase" recebe o valor da constante. Terceiro, será criado outra constante, transformando o texto em um Array usando split , e logo depois transformando o valor em uma string vazia, dessa forma permite que cada letra seja carregada. function animar(frase) {       const textoArray = frase.innerHTML.split('');    

Overlay Fade Criar um efeito overlay pode ser muito útil quando tem a necessidade de um efeito Hover, assim permite sobrepor uma div com outro conteúdo criando um efeito interessante.   Vamos iniciar criando o HTML , com uma div principal onde fica a imagem e outra div dentro dela que vai conter um texto. <div class="limite"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaphjgLO9MW3ubrVvy1GJVa5p-odTKZbdulJJM65N24zhSvUaBR-HzgO7hUqVCtrEPwKYFfs-eD8jTGGZBZdDijGo5_QBTYE-1lfoZR-Hn6u83uxMIrm1G8JakAbe_YDfxwj5mPhOMTUPV/s320/CSS32.jpg" alt="css" class="img"> <div class="overlay"> <h2>Overlay Fade</h2> </div> </div> Preparando o CSS Vamos iniciar o CSS  da div principal, primeiro será necessário definir o tamanho da div principal que vamos atribuir uma class chamada "limite". .limite{ position: relative; width: 300px; he

Estilo no Range. Criar um estilo no input tipo range é simples, vamos criar uma class chamada de ".estilo" com esta class vamos edita o background e também a bolinha que se movimenta. Antes de inciar o estilo será necessário criar o HTML . <input type="range" min="0" max="100" value="50" class="estilo" id="valor">  <br>  <p id="resultado">.</p> No final vamos usar o ID resultado para informar o valor. Criando o estilo CSS Primeiro o estilo do background. Aqui você vai manter o width como 100%, mas pode alterar o height e o border. .estilo {     -webkit-appearance: none;     background: #d3d3d3;     outline: none;     width: 100%;     height: 20px;     border-radius: 9px;    } Segunda parte criar a estilo da bolinha. .estilo::-webkit-slider-thumb {     -webkit-appearance: none;     appearance: none;     width: 25px;     he

Trocando a palavra. Criar efeito é muito importante, torna a pagina mais interativa e agradável visualmente. Vamos aprender como fazer a troca de palavra e ao mesmo tempo tornar essa troca mais suave usando efeito. Prepare o arquivo HTML  com um paragrafo e um span. <p>Chocolate <span id="frases"></span>.</p> Antes de inciar visite o site do jQuery para baixar os arquivos ou utilize o CDN abaixo. <script   src="https://code.jquery.com/jquery-3.2.1.min.js"   integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="   crossorigin="anonymous"></script> Criando a troca de palavra. Primeiro vamos definir as variáveis, uma para guardar as frases, uma para o tempo e uma para definir o valor do array inicial. let textos = ["branco", "preto", "amargo"] let atual = 0 let tempo = 3000 Segundo pegar o ID do span que vai receber a frase, e cri