Desenvolvedor Web Blog

Adicionar Tag HTML com JavaScript  Em alguns momentos se torna necessário adicionar uma tag html dentro de outra e dependendo de com for você pode não ter acesso total ao código. Um exemplo pode ser um plugin de WordPress, onde você não pode editar o HTML mas necessita inserir algo ali mesmo que seja estático. Vou mostrar de uma forma muito simples como usar o JS para criar essa tag HTML. Adicionando o HTML com JavaScript Parar criar essa função que adiciona a Tag HTML é necessário abrir o inspecionar do navegador e localizar a DIV ou até mesmo a Tag que vai guardar a Tag que deseja adicionar. Procure por ID ou Class que seja especifico do local para servi como rota e assim o JavaScript vai conseguir achar o local e adicionar.   Criando o JavaScript para adicionar a Tag HTML No exemplo abaixo vou mostrar como adicionar a tag IMG dentro de um botão baseado na class do botão. Primeiro vamos buscar o local e guardar em uma variável. var local = document.query...

 Em algum momento você já ser deparou com a necessidade de remover um atributo ou adicionar para realizar uma função especifica usando o JavaScript. Vou mostrar de forma simples e rápida como realizar essa atividade usando removeAttribute e setAttribute.   Usando removeAttribute e setAttribute O que é um atributo no HTML? Atributos são informações que passamos na Tag para que ela se comporte da maneira esperada. Existem atributos globais (que funcionam em todas as Tags) e específicos (que são direcionados para cada Tag, através de especificação). Removendo um atributo da Tag HTML Para demover um atributo deve usar um comando JavaScript chamado removeAttribute que remove um atributo de um elemento específico. Veja o exemplo de Tag HTML onde será removido o atributo href e class. <a id="botao" href="www.google.com.br" class="bt">Visitar google</a>   Para remover usando o JS é necessário localizar o ID da Tag para aplicar o  removeAttr...

  A formatação do campo telefone é muito importante para quem salva o valor recebido no banco de dados ou até mesmo por uma questão visual. Um campo input tipo tel sem formatação como por exemplo em um formulário pode ficar estranho visualmente e atrapalhar a empresa na organização por chegar bagunçado ou com falta do número de DDD. Vou mostrar como criar um campo input que consegue receber o numero de telefone fixo e telefone celular formatando com DDD e caráter especial para separação. Formatando o campo input para telefone fixo e telefone celular Para criar essa formatação vamos utilizar o “.replace” junto com a “expressão regular”, para receber o valor substituindo e organizando baseado a expressão. Preparando o HTML com parâmetro JS Coloque o seguinte código abaixo em seu html <input type="tel" maxlength="14 required="" data-js="phone">   Observe que é um campo tipo TEL que recebe um limite de 14 caracteres com preenchime...

Ganhe mais Leads com esse botão Você já deve ter visto em vários sites na lateral de baixo um botão do WHATSAPP para mandar uma mensagem. Já imaginou um tipo de chat que manda mensagem para o WHATSAPP e também é um tipo de pop up ? Nesse tutorial vou disponibilizar o código para criar um botão WHATSAPP que tem um chat de mentira onde o visitante pode escrever uma pergunta. Criando o botão WHATSAPP no site. Com esse botão o teu site se tornará mais interativo e interessante para o visitante podendo tornar ele um possível LEAD com a função de pop up que vai mostrar na tela o chat aberto e com uma frase para chamar a atenção. No link abaixo tem um site que está utilizando desse botão confira. https://agencianovaacao.com.br/ Se gostou continue lendo! O código é dividido em três partes sendo elas HTML, CSS e JS. No HTML você vai escreve 3 frases simples para chamar a atenção, OBS coloque a rota das imagens de acordo com o teu site. No CSS são...

Editar vídeo e imagens no Raspberry Pi Para quem pretende usar o Raspberry Pi como um computador pessoal ou para trabalho com programação sempre vai se deparar com a necessidade de capturar e editar imagens ou até mesmo fazer uma edição em algum vídeo. Programa para captura. Está é uma ferramenta muito pratica para capturar a imagem da tela com a possibilidade de fazer a seleção do local e até mesmo usar um temporizador na captura. O Gnome Screenshot é o mais simples e completo para usar em seu Raspberry Pi. Utilize os seguintes comandos para instalar. Sudo apt install gnome-screenshot Sudo apt install gnome-shell Programa para editar imagem ou criar artes. Esse editor de imagem é uma ferramenta muito completa para edição ou criação de artes que muito se assemelha com o famoso Photoshop. Com o GIMP você tem tudo o que precisa para fazer seu trabalho. Utilize o seguinte comando para instalar. Sudo apt-get install gimp ...

Usar no Raspberry Pi o VS Code, Composer e GIT A gora que você tem um Raspberry Pi falta instalar alguns programas para preparar o ambiente para programação. Já vem por padrão muitos programas instalados no Raspberry Pi, mas para você que vem do Windows deve sentir falta de alguns programas como por exemplo, VS code para editar códigos, Composer PHP para gerenciar os pacotes e o GIT para enviar seu trabalho para o repositório do GIT. Instalar o VS Code O Visual Studio Code é uma ferramenta simples para editar códigos, onde os desenvolvedores podem criar seus projetos e fazer a depuração, também é possível instalar extensões para auxiliar no trabalho e ganhar produtividade. Para instalar utilize os seguintes comandos. wget https://packagecloud.io/headmelted/codebuilds/gpgkey -O - | sudo apt-key add – curl -L https://raw.githubusercontent.com/headmelted/codebuilds/master/docs/installers/apt.sh | sudo bash Ou pode usar o seguintes comandos para instala...

Instalar o Apache + PHP + MySQL no Raspberry PI. Para criar projetos web é necessário instalar alguns programas para criar um servidor local e assim testar as aplicações, com o Raspberry Pi isso é possível. Nesse tutorial será instalado os sistemas Apache, PHP e MySQL . Instalando o Apache. Apache é o servidor web, quando falamos de um servidor da Web, geralmente pensamos na máquina, mas esse termo também se refere ao software que permite que a máquina analise as solicitações do usuário (no formato http) e retorne o arquivo correspondente. Antes de iniciar será necessário fazer a atualização no sistema. sudo apt upgrade sudo apt update Agora vem os comandos de instalação utilize uma de cada vez. sudo apt install apache2 sudo chown -R pi:www-data /var/www/html/ sudo chmod -R 770 /var/www/html/ Instalando o PHP PHP é uma das linguagens de programação mais usada para programação na web. Para instalar utilize o seguinte comando sudo apt-get install -t s...

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. ...

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">                          ...