Pular para o conteúdo principal

Postagens

Ganhar dinheiro com Front-end web Criando site no WordPress

-
Ganhar dinheiro com Front-end web Criando site no WordPress Ganhar dinheiro como Front-end ou como Web Designer se tornou mais simples, rápido e lucrativo por causa do WORDPRESS que oferece uma estrutura simples de se trabalhar e fácil de gerenciar com integração com outros sistemas usando os plugins e temas grátis que vão dar ao site um visual atrativo.   O que é WordPress e para que serve? O wordpress é um CMS ou uma aplicação para a internet que permite que donos de sites, editores e autores gerenciem seus sites e publiquem conteúdo sem precisar de conhecimentos em programação, com auxílio de temas e plugins grátis . O CMS WordPress é gratuito e de código aberto, isso quer dizer que milhões de pessoas no mundo têm à disposição uma plataforma moderna e de alta qualidade, até mesmo os iniciantes podem ter muitos benefícios.   Como criar site no Wordpress? Para criação de páginas web no WordPress você pode contar com temas grátis, mas o melhor temas grátis para Word
Postar um comentário
Leia mais

Criar um botão neon com borda animada

-
Imagem
 Criar um botão neon com borda animada Todos os sites possuem botões na mais diversas forma e estilo, todos os botões do site têm seu objetivo de levar usuário para algum lugar. Os botões são mais que uma simples forma de informar a rota eles tem um papel fundamental no momento de chamar a atenção, podendo ser por sua cor, forma e texto chamativo. Um site de sucesso precisa de ter algum diferencia e nesse tutorial vou mostrar como criar um botão animado do estilo neon.   Criar a estrutura HTML do botão neon. Para cria é muito simples, vamos usar a TAG A para ser o link e a TAG SPAN para fazer animações.   <a class="neon-bt" href="#">       <span></span>       <span></span>       <span></span>       <span></span>       Enviar     </a>   Repare que foi criado um CLASS chamada "neon-bt" para cuidar do estilo e animação.   Criar o estilo do botão neon com CSS O estilo do botão está dividido em duas
3 comentários
Leia mais

Como migrar o site, e-mails ou banco de dados gratuitamente?

-
Imagem
Como migrar o site, e-mails ou banco de dados gratuitamente Migrar de hospedagem, pode ser um processo bastante complicado. Diversos fatores estão envolvidos, desde tecnologias utilizadas pelos desenvolvedores até o tamanho dos websites em questão, incluindo os bancos de dados. Migrar o site de forma simples e segura é muito importante e para isso existe uma solução simples e gratuita . O GoodBye.host by Umbler permite migrações de forma descomplicada de bancos de dados, dos arquivos do website, e também de e-mails, tudo através de uma interface extremamente amigável e simples. Todas as migrações são realizadas através de tráfego SSL , e a Umbler garante que não armazena nenhum tipo de informação em seus servidores.   Tipos de migrações feita pela GoodBye.host by Umbler Para utilizar é muito simples, escolha o tipo de migração e entre com os dados de acesso da origem e os dados de acesso do destino. Após concluir a migração vai chegar por e-mail o aviso que está tudo pronto.   Migrar
Postar um comentário
Local: Brasil
Leia mais

Tags HTML que devem ser usadas para Acessibilidade e SEO

-
Imagem
Tags HTML que devem ser usadas para Acessibilidade e SEO Existem Tags HTML esquecidas ou desconhecidas que podem melhorar a funcionalidade do seu site em termos de acessibilidade , rastreadores da web e até mesmo SEO . Além disso, a semântico HTML adiciona o contexto certo ao conteúdo do seu site, o que melhorar significativamente a experiência do usuário. Aqui estão algumas das tags HTML mais úteis que você pode estar ignorando. Mostrarei o que cada tag faz e como você pode usar HTML para agilizar o processo de desenvolvimento e aprimorar a experiência do usuário em seu aplicativo ou site. Tags HTML para Acessibilidade e SEO Abaixo estão algumas Tags que você pode estar esquecendo de usar ou desconhece. <base> <abbr> <dfn> <fig> <figcaption> <details> <summary> <cite> <blockquote> <address>   Tag <base> A tag <base> permite que você crie um cenário onde existe um URL base que
Postar um comentário
Local: Brasil
Leia mais

Criar CAPTCHA numérico simples com JavaScript

-
Imagem
Criar CAPTCHA numérico simples com JavaScript Muitos formulários não possuem algum tipo de validação para minimizar os ataques de robôs , que podem mandar spam se for um formulário de contado ou tentativa de login se for um formulário de login. Vou mostrar como criar um CAPTCHA numérico básico que funciona no lado do cliente, que consiste em desbloquear o botão enviar se o valor escrito pelo usuário for a soma dos números exibidos. O que é um CAPTCHA? É um tipo de desafio que pode ser numérico, palavras ou imagens com a intenção de provar que você é uma pessoa real, o objetivo é limitar o acesso e tráfego criado por bots e outros tipos de robôs que vasculham a Internet todos os dias gerando tráfego artificial , disparando spams e produzindo ataques.   Criando o HTML do desafio do CAPTCHA Para esse desafio será gerado aleatoriamente dois números e o objetivo se escrever no campo input a soma desses números. Copie o HTML abaixo. <div class="math">         <p id=
Postar um comentário
Local: Brasil
Leia mais

Efeito GLITCH no título com CSS

-
Imagem
Efeito GLITCH no título com CSS Colocar um efeito no titulo pode fazer muita diferença quando a intenção é chamar a atenção, vou mostrar como criar um efeito de GLITCH usando o CSS de forma simples. Para criar um efeito com CSS é necessário uma Class na tag HTML que deseja animar e um keyframes que será responsável pela sequência de ações na animação. O que é um efeito GLITCH? O glitch é um efeito que simula essas distorções e interferências, o termo vem do inglês que, traduzido, significa “falha”. TEXTO GLITCH   Criando o HTML para o efeito GLITCH No HTML vamos criar uma  class para aplicar o efeito CSS e um atributo chamado data-text que vai auxiliar na criação do efeito. Para isso funcionar o nome que está dentro da Tag deverá ser o mesmo dentro do atributo. Copie o HTML abaixo. <h2 style="color: #fff" class="glitch" data-text="GLITCH.">GLITCH</h2> Observe que a cor do titulo está como branco então o fundo deve ser escuro
Postar um comentário
Local: Brasil
Leia mais

Adicionar Tag HTML com JavaScript

-
Imagem
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.querySelector(
Postar um comentário
Local: Brasil
Leia mais

Remover e Inserir um atributo na Tag HTML usando JavaScript

-
Imagem
 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
Postar um comentário
Local: Brasil
Leia mais

Formatar o número do telefone no campo input com JavaScript

-
Imagem
  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
Postar um comentário
Local: Brasil
Leia mais

Botão WhatsApp no site igual a um Chat

-
Imagem
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
Postar um comentário
Leia mais