Pesquisar neste blog

Mostrando postagens com marcador HTML. Mostrar todas as postagens
Mostrando postagens com marcador HTML. Mostrar todas as postagens

10/07/2025

Portas TCP

 Cada serviço se comunica com os servidores do mundo inteiro.

Principais portas de rede de comunicação

















HTTP, SMTP, FTP, VoIP, Games, Streaming… tudo isso só funciona por causa dos portos TCP e UDP — a base da comunicação na internet !

E-mail

Na teoria, usamos SMTP (porta 25), POP3 (porta 110) e IMAP (porta 143).

Na prática, os serviços usam outras portas por motivos de segurança:


✅ SMTP com autenticação segura → porta 587

✅ POP3 com TLS/SSL → porta 995

✅ IMAP com TLS/SSL → porta 993


🔐 Essas versões criptografadas protegem seus dados e evitam interceptações. Quem trabalha com redes e servidores precisa dominar essas variações para configurar corretamente clientes, firewalls e filtros.

Além disso, o FTP usa as portas 20 e 21, mas colocamos apenas a que mais se fala para ter apenas uma porta por protocolo! Assim como o FTPS usa também a porta 21 para controle além da porta citada na imagem.

Outro ponto é o DNS que pode ser transportado pelo UDP e pelo TCP, porém nas consultas dos clientes ao servidor o UDP é muito mais utilizado.

Essa imagem mostra as portas mais críticas e utilizadas, e se você quer atuar com redes, segurança, servidores ou cloud… você precisa conhecer cada uma.

📡 Dominar as portas é como ter acesso à planta baixa da internet.

🧠 É isso que separa um usuário comum de um profissional respeitado.

06/07/2024

Atalhos de comandos em HTML5

1. div(header>ul>li*3)+section+footer>p

<div></div>
<header>
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</header>
<section></section>
<footer>
    <p></p>
</footer>


2. div(header>ul>p*2>li*5)+section+footer*2>p+(div*2)

<div></div>
<header>
    <ul>
        <p>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </p>
        <p>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </p>
    </ul>
</header>
<section></section>
<footer>
    <p></p>
    <div></div>
    <div></div>
</footer>
<footer>
    <p></p>
    <div></div>
    <div></div>
</footer>


4   .div$*4

<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>


5.    .div*4

<div class="div"></div>
<div class="div"></div>
<div class="div"></div>
<div class="div"></div>


6.    .div*5>p

<div class="div">
    <p></p>
</div>
<div class="div">
    <p></p>
</div>
<div class="div">
    <p></p>
</div>
<div class="div">
    <p></p>
</div>
<div class="div">
    <p></p>
</div>


7.   .div$*4>(p$)

<div class="div1">
    <p1></p1>
</div>
<div class="div2">
    <p2></p2>
</div>
<div class="div3">
    <p3></p3>
</div>
<div class="div4">
    <p4></p4>
</div>


05/06/2024

Bateria Carregando em HTML


Código em HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bateria</title>
    <link href="" rel="" integrity="" crossorigin="">
</head>
<style>
  .battery-top {
    width: 30px;
    height: 10px;
    background: black;
    margin: 0 auto;
    border: 3px solid silver;
    border-top-right-radius: 8px;
    border-top-left-radius: 8px;
  }
  .battery-content {
    width: 150px;
    height: 250px;
    background: black;
    position: relative;
    margin: 0 auto;
    border: 3px solid silver;
    border-radius: 18px;
  }
  .charge {
    width: 100%;
    position: absolute;
    bottom: 0;
    border-radius: 14px;
    animation: battery 8s linear infinite;
  }
  @keyframes battery {
    0% {
      height: 0%;
      background: red;
    }
    25% {
      height: 25%;
      background: orange;
    }
    50% {
      height: 50%;
      background: rgb(7, 195, 241);
    }
    75% {
      height: 75%;
      background: blue;
    }
    100%{
      height: 100%;
      background: rgb(0, 255, 0);
    }
  }
</style>
<body>
  <div class="main">
    <div class="battery-top"></div>
    <div class="battery-content">
    <div class="charge"></div>
  </div>
</body>
</html>


02/06/2024

Animação com Hélice rotacional em HTML















Código feito em HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  body{
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

img{
    border: 20px solid aqua;
    padding: 50px;
    border-radius: 50%;
    animation: fananim linear infinite;
}

button{
    cursor: pointer;
    width: 100px;
    height: 100px;
    padding: 20px 30px;
    margin: 0 20px;
    font-size: 25px;
    font-weight: 550;
    border: none;
    background-color: silver;
    border-radius: 50%;
    transition: 0.1s;
}

button:active{
    box-shadow: 0px 10px 10px black;
    transform: scale(0.95);
}

.main button:nth-last-child(5){
    background-color: rgb(0, 255, 0);
}

.main button:nth-last-child(4){
    background-color: red;
}
@keyframes fananim {
    100%
    {
        transform: rotate(360deg);
    }
}
</style>
<body>
  <div>
    <img id="img" src="Fan.png" alt="" srcset="">
    <button onclick="myfunon()">ON</button>
    <button onclick="myfunoff()">OFF</button>
    <button onclick="myfun1()">1</button>
    <button onclick="myfun2()">2</button>
    <button onclick="myfun3()">3</button>
  </div>  
 
</body>
  <script>
    let a=document.getElementById("img");
    function myfunon()
    {a.style.animationDuration = 3+"s";}
    function myfunoff()
    {a.style.animationDuration=0+"s";}
    function myfun1()
    {a.style.animationDuration=1+"s";}
    function myfun2()
    {a.style.animationDuration=0.5+"s";}
    function myfun3()
    {a.style.animationDuration=0.1+"s";}
  </script>
</html>


Palavras chave:

Animation with Rotational Helix in HTML
Animación con Hélice Rotacional en HTML
Animasi karo Rotational Helix ing HTML
Animasjon med Rotational Helix i HTML
HTMLдеги Rotational Helix менен анимация
Анимация с использованием вращающейся спирали в HTML
אנימציה עם Rotational Helix ב-HTML
Animation leh Helix Rotational oo HTML ah
HTML의 회전 나선을 사용한 애니메이션

29/06/2023

CRUD com PHP

Objetivo: Fazer um CRUD em PHP

Saída do designer em PHP














Arquivo 1: cadastrar_pessoa.php

<?php
// 6 funções
Class Pessoa{


    private $pdo;
    // CONEXÃO COM O BANCO DE DADOS
    public function __construct($dbname, $host, $user, $senha) // tudo ok
    {
        try
        {
            $this->pdo = new PDO("mysql:dbname=".$dbname.";host=".$host,$user);
        }
        catch (PDOException $e) {//erro para o PDO
            echo "Erro com o Banco de Dados: ".$e->getMessage();
            exit();
        }
        catch(Exception $e){ // Erros genéricos
            echo "Erro genérico: ".$e->getMessage();
            exit();
        }
    }
    //------- BUSCAR DADOS E EXIBIR NO LADO DIREITO DA TELA ----------
    public function buscarDados() // tudo ok
    {
        $res = array();
        $cmd = $this->pdo->query("SELECT * FROM pessoa ORDER BY id");
        $res = $cmd->fetchAll(PDO::FETCH_ASSOC);// economiza memória
        return $res;
    }
    // FUNÇÃO DE CADASTRAR PESSOAS NO BANCO DE DADOS
    public function cadastrarPessoa($nome, $telefone, $email)
    {
        // Antes de cadastrar verificar se já tem o EMAIL cadastrado
        $cmd = $this->pdo->prepare("SELECT id FROM pessoa WHERE email = :e");
        $cmd->bindValue(":e", $email);
        $cmd->execute();
        if ($cmd->rowCount() > 0)  //se > 0 email já existe no BD
        {
            return false;
        }else  // não foi encontrado no BD
        {
            $cmd = $this->pdo->prepare("INSERT INTO pessoa(nome, telefone, email)
            VALUES (:n, :t, :e)");
            $cmd->bindValue(":n", $nome);
            $cmd->bindValue(":t", $telefone);
            $cmd->bindValue(":e", $email);
            $cmd->execute();
            return true;
        }
    }
    // MÉTODO PARA EXCLUIR PESSOA
    public function excluirPessoa($id) // tudo ok
    {
        $cmd = $this->pdo->prepare("DELETE FROM pessoa WHERE id = :id");
        $cmd->bindValue(":id", $id);
        $cmd->execute();
    }

    // BUSCAR DADOS DE UMA PESSOA
    public function buscarDadosPessoa($id) // tudo ok
    {
        $res = array();
        $cmd = $this->pdo->prepare("SELECT * FROM pessoa WHERE id = :id");
        $cmd->bindValue(":id", $id);
        $cmd->execute();
        $res = $cmd->fetch(PDO::FETCH_ASSOC);//economiza memória
        return $res;
    }

    // ATUALIZAR DADOS NO BANCO DE DADOS
   
    public function atualizarDados($id, $nome, $telefone, $email){ // tudo ok
       
        $cmd = $this->pdo->prepare("UPDATE pessoa SET nome = :n, telefone = :t,
        email = :e WHERE id = :id");
        $cmd->bindValue(":n", $nome);
        $cmd->bindValue(":t", $telefone);
        $cmd->bindValue(":e", $email);
        $cmd->bindValue(":id", $id);
        $cmd->execute();
    }
}
?>


Arquivo 2: index.php

<?php
require_once 'classe_pessoa.php';
$p = new Pessoa("crudpdo", "localhost", "root", "");
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cadastro de Pessoa</title>
    <link rel="stylesheet" href="estilo.css">
</head>
<body>
    <?php
    if (isset($_POST['nome']))
    //CLICOU NO BOTÃO CADASTRAR OU EDITAR
    {
        if (isset($_GET['id_up']) && !empty($_GET['id_up']))
        {
            $id_upd = addslashes($_GET['id_up']);
            $nome = addslashes($_POST['nome']);
            $telefone = addslashes($_POST['telefone']);
            $email = addslashes($_POST['email']);
            if (!empty($nome) && !empty($telefone) && !empty($email))
            {
                $p->atualizarDados($id_upd, $nome, $telefone, $email);
               
                header("location: index.php");
            }
            else
            {
                ?>
                    <div class="aviso">
                        <img src="aviso.png" alt="">
                        <h4>Preencha todos os campos !</h4>
                    </div>
                <?php
            }
        }
        // ---------------------------- CADASTRAR ----------------------------
        else
        {
            $nome = addslashes($_POST['nome']);
            $telefone = addslashes($_POST['telefone']);
            $email = addslashes($_POST['email']);
            if(!empty($nome) && !empty($telefone) && !empty($email))
            {
                //cadastrar
                if (!$p->cadastrarPessoa($nome, $telefone, $email))
                {
                    ?>
                        <div>
                            <img src="aviso.png" alt="">
                            <h4>Email já está cadastrado !</h4>
                        </div>
                    <?php
                }
            }
            else
            {
                ?>
                    <div class="aviso">
                        <img src="aviso.png" alt="">
                        <h4>Preencha todos os campos !</h4>
                    </div>
                <?php
            }
        }
    }
    ?>
    <?php
        if (isset($_GET['id_up'])) //SE A PESSOA CLICOU EM EDITAR
        {
            $id_update = addslashes($_GET['id_up']);
            $res = $p->buscarDadosPessoa($id_update);
        }

    ?>
    <section id = "esquerda">
        <form action="" method = "POST">
            <h2>CADASTRAR PESSOA</h2>
            <label for="nome">Nome</label>
            <input type="text" name = "nome" id = "nome"
            value="<?php if(isset($res)){echo $res['nome'];} ?>">
           
            <label for="telefone">Telefone</label>
            <input type="text" name="telefone" id="telefone"
            value="<?php if(isset($res)){echo $res['telefone'];} ?>">

            <label for="email">Email</label>
            <input type="email" name="email" id="email"
            value= "<?php if(isset($res)) {echo $res['email']; } ?>">

            <input type="submit"
            value= "<?php if (isset($res)) { echo "Atualizar"; }else { echo
    "Cadastrar"; } ?>">
        </form>
    </section>
    <section id="direita">
        <table>
            <tr id="titulo">
                <td>NOME</td>
                <td>TELEFONE</td>
                <td colspan="2">EMAIL</td>
            </tr>
            <?php
                $dados = $p->buscarDados();
                if(count($dados) > 0)//TEM PESSOAS NO BANCO DE DADOS
                {
                    for($i=0; $i < count($dados); $i++)
                    {
                        echo "<tr>";
                        foreach ($dados[$i] as $k => $v)
                        {
                            if($k != "id")
                            {
                                echo "<td>".$v."</td>";
                            }
                        }
                        ?>
                            <td>
                                <?php echo $dados[$i]['id'] ?>                              
                                <a href="index.php?id_up=<?php echo $dados[$i]['id']; ?>">Editar</a>
                                <a href="index.php?id=<?php echo $dados[$i]['id']; ?>">Excluir</a>
                            </td>
                        <?php
                        echo "</tr>";
                    }                    
                }
                else // O BANCO DE DADOS ESTÁ VAZIO
                {
                    ?>
                    </table>

                        <div class="aviso">
                            <h4>Ainda não há pessoas cadastradas !</h4>
                        </div>
                    <?php
                }
            ?>
        </table>
    </section>
</body>
</html>

<?php
    if (isset($_GET['id'])) {
        $id_pessoa = addslashes($_GET['id']);
        $p->excluirPessoa($id_pessoa);
        header("location: index.php");//atualiza a página após o clique
    }
?>


Arquivo 3: estilo.css

*{
    padding: 0px;
    margin: 0px;
    font-family: arial;
}

label, input{
    display: block;
    line-height: 30px;
    height: 30px;
    outline: none;
    font-size: 13pt;
    width: 100%;
}

form{
    width: 330px;
    background-color: rgba(0, 0, 0, 0.2);
    padding: 20px;
    margin: 30px auto; /*automático dos lados*/
}

input[type="submit"]{
    margin-top: 10px;
    cursor: pointer;
}

#esquerda{
    width: 35% ;
    height: 500px;
    float: left;
}

h2{
    text-align: center;
}

#direita{
    margin-top: 30px;
    width: 65%;
    height: 500px;
    float: left;

}

table {
    background-color: rgba(0, 0, 0, 0.2);
    width: 90%;
    margin: auto;
}

tr{
    line-height: 30px;
}

tr#titulo{
    font-weight: bold;
    background-color: rgba(0,0,0, .6);
    color: white;
}

td{
    padding: 0px 5px;
}

a{
    background-color: white;
    color: black;
    padding: 5px;
    margin: 0px 5px;
    float: left;
}

.aviso {
   
    width: 90%;
    height: 50px;
    margin: 30px auto 0px auto; /* margin no auto */
}
img {
    width: 50px;
    display: block;
    float: left; /*flutuar à esquerda*/
}
h4{
    float: left;
    line-height: 50px;
}


Créditos para: Mirian TechCod


04/04/2023

Bolas de ping pong em CSS

Saída gerada























<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    body{
        background: white;
    }    
    .container{
        width: 200px;
        height: 60px;
        margin: auto;
        margin-top: 40%;
        margin-left: 50%;
        transform: translate(-50%, -50%);
    }
    .ball{
        width: 20px;
        height: 20px;
        position: absolute;
        border-radius: 50%;
        left: 15%;
        animation: ball .5s alternate infinite ease;
    }
    @keyframes ball {
        0%{
            top: 60px;
            height: 5px;
            border-radius: 50px 50px 25px 25px;
            transform: scaleX(1.7);
            background-color: #FF3EA5FF;
        }
        40%{
            height: 20px;
            border-radius: 50%;
            transform: scaleX(1);
            background-color: #EDFF00FF;
        }
        100%{
            top: 0%;
            background-color: #00A4CCFF;
        }
    }
    .ball:nth-child(2){
        left: 45%;
        animation-delay: .2s;
    }
    .ball:nth-child(3){
        left: auto;
        right: 15%;
        animation-delay: .3s;
    }
    .shadow{
        width: 20px;
        height: 4px;
        border-radius: 50%;
        background-color: #ffffff59;
        position: absolute;
        top: 62px;
        z-index: -1;
        left: 15%;
        filter: blur(1px);
        animation: shadow .5s alternate infinite ease;
    }
    @keyframes shadow {
        0%{
            transform: scaleX(1.5);
            background-color: #ff3ea56b;
        }
        40%{
            transform: scaleX(1);
            opacity: .7;
            background-color: #edff0066;
        }
        100%{
            transform: scaleX(.2);
            opacity: .4;
            background-color: #edff0066;
        }
    }
    .shadow:nth-child(4){
        left: 45%;
        animation-delay: .2s;
    }
    .shadow:nth-child(5){
        left: auto;
        right: 15%;
        animation-delay: .3s;
    }
</style>
<body>
    <div class="container">
        <div class="ball"></div>
        <div class="ball"></div>
        <div class="ball"></div>
        <div class="shadow"></div>
        <div class="shadow"></div>
        <div class="shadow"></div>
    </div>
</body>
</html>