Pesquisar neste blog

13/08/2020

Construindo uma tabela em HTML


<table border="1"><!--borda da tabela-->
    <caption>Produtos</caption>
    <thead><!--cabeçalho-->
        <tr>
            <!-- table read -->
            <th>Produto</th>
            <th>Preco</th>
            <th>Quantidade</th>
            <th>Total</th>
        </tr>
    </thead>
    <tbody>
        <tr><!--table rool , 4 colunas-->
            <!-- table data -->
            <td>iPad</td>
            <td>3200,25</td>
            <td>5</td>
            <td>16455,00</td>
        </tr>

        <tr>
            <td>Sansung S9</td>
            <td>2649,99</td>
            <td>8</td>
            <td>21550,99</td>
        </tr> 
    </tbody>
    <tfoot>
        <tr>
            <td colspan="3">Total</td><!--linha total está ocupando 3 colunas, <td colspan="3" rowspan='2'>Total</td>-->
            <td>5x5x,0x</td>
        </tr>

        <!-- <tr>
            <td>teste</td>
        </tr>-->
    </tfoot>

    <table>
        <style>
            table{
                border-collapsecollapse;
            }
            /* faz com fique + espasada */
            thtd{
                padding10px
            }
            /* linha do cabeçalho */
            thead tr{
                border-bottomsolid 3px #444;
            }

            /* sobreamento ao passar o mouse */
            tr:hover {
                background-color#dedede;
            }
            /* aqui não vai sombrear a última linha
            tbody tr:hover {
                background-color: #dedede;
            }
             */

            /* chamando a atenção da última linha */ 
            tfoot{
                background-color#444;
                color#fff;
                font-weightbold;
            }
        </style>
    </table>
</table>











12/08/2020

Prova 1 2020/1

Prova aplicada em 25/06/2020 
1) Pisca LEDs  

matrícula = 4230948754   LED1 --> Ex: 7 + 5 + 4 + 50 = 66 Hz

LED1 --> piscar com frequência U + P + A + 50   Hz
LED2 --> piscar com frequência U + P + 50 Hz
LED3 --> piscar com frequência U + 50 Hz

U - Último número da matricula
P - Penúltimo número da matrícula
A - Antepenúltimo número da matrícula

Resolução:

Código feito em CCS C Compiler

#include <main1.h>
#use delay(clock = 20MHz)

//Matricula = 2013178440488
int U = 4 + 8 + 8 + 50;
int P = 8 + 8 + 50;
int A = 8 + 50;

void main(){

   while(TRUE){
      
         output_high(pin_b0);
         delay_ms(1000/U);
         output_low(pin_b0);
         delay_ms(1000/U);
      
         output_high(pin_b1);
         delay_ms(1000/P);
         output_low(pin_b1);
         delay_ms(1000/P);
      
         output_high(pin_b2);
         delay_ms(1000/A);
         output_low(pin_b2);
         delay_ms(1000/A);
         
   }
}




2) Fazer um programa para bord3 que quando o botão S3 conectado a B1 o PIC grava em sua memória interna seu (aluno) primeiro nome e ao precionar o botão S3 conectado ao B2 O PIC lê o que foi escrito na memória e escreve no LCD com a sequência invertida das letras.

Ex:   
HENRIQUE

EUQIRNEH

Resolução:

Código feito em CCS C Compiler

#include <main.h>
#include <LCD.C>
#include <lcd.c>
#use delay(clock=20MHz)

const char vetor[]= "HENRIQUE";
int i, cont = 0;

void crescente(){
   printf(lcd_putc,"\f");//Limpa tela
   for(i = 0; i < sizeof(vetor)/sizeof(int); i++){
      lcd_gotoxy(i+1, 1);
      lcd_putc(vetor[i]);
      delay_ms(200);
   }
}

void decrescente(){
   printf(lcd_putc,"\f");
   for(i = sizeof(vetor)/sizeof(int) -2; i >= 0; i--){
      //lcd_gotoxy(i+1, 2);
      lcd_putc(vetor[i]);
      delay_ms(200);
   }
}

void main(){
   lcd_init();
   lcd_init();

   while(TRUE){
      
      if(input(PIN_B0) == true){
         if(cont %2 == 0){//em par, crescente
            crescente();
            cont++;

         }else{//em ímpar, decrescente
            decrescente();
            cont++;
            
         }
      }
      //TODO: User Code
   }

}



















3) Fazer um programa para board3 que lê os valores (inteiro de oito bits) de tensão do potenciômetro, numa frequência de 10 Hz durante 5 segundos. Guarda esses valores na memória 24C04 que esta nessa placa. Quando o botão S3 é pressionado, o PIC envia esses valores via serial. A sequência de valores deve ser precedida pelo seu primeiro nome.

Ex:  ......., 28, 50, 58, 55, 'N', 'A', 'I, 'R', 'I', 'M'    --> PORTA SERIAL

Resolução:

Código feito em CCS C Compiler

#include <main.h>
#include <LCD.C>
#include <lcd.c>

#FUSES HS                   //High speed Osc  (> 4mhz for PCM/PCH) (>1 )
#FUSES NOPUT               //No Power Up Timer
#FUSES NOPROTECT           //Code not protected from readin
#FUSES NODEBUG             //No Debug mode for LCD
#FUSES NOBROWNOUT          //No brownout reset
#FUSES NOLVP               //No low voltage prging, B3(PIC16) or B5
#FUSES NOCPD               //No EE protection
#FUSES NOWRT               //Program memory not write protected

#define lcd_d/ pin_d/d

#use delay(clock = 20MHz)

#use rs232(baud=9600, xmit = PIN_C6, rcv = PIN_C7, parity = N, bits = 8, errors)

#include "2404.C"

void main(){
   unsigned int i, j, aux = 0;
   setup_adc_ports(AN0_AN1_AN3), (ADC_CLOCK_DIV_16);
   setup_psp(PSP_DISABLED);
   setup_timer_0(RTCC_INTERNAL|RTCC_DIV_1);
   setup_timer_1(T1_DISABLED);
   setup_timer_2(T2_DISABLED, 0, 1);
   setup_comparator(NC_NC_NC_NC);
   setup_vref(FALSE);
   
   
   lcd_init();
   delay_ms(10);
   init_ext_eeprom();
   delay_ms(10);
   
   printf(lcd_putc,"\f iniciando...");
   delay_ms(2000);
   
   set_adc_channel(1);
   delay_us(50);
   
   while(TRUE){
      if(!input(PIN_B0)){
         printf(lcd_putc,"\fLeitura do Potenciometro\n\rEscrevendo em Menor");
         write_ext_eeprom(1, 'H');
         write_ext_eeprom(2, 'E');
         write_ext_eeprom(3, 'N');
         write_ext_eeprom(4, 'R');
         write_ext_eeprom(5, 'I');
         write_ext_eeprom(6, 'Q');
         write_ext_eeprom(7, 'U');
         write_ext_eeprom(8, 'E');
         
         for(j = 0; j <= 58; j++){
            aux = read_adc();
            write_ext_eeprom(j, aux);
            delay_ms(100);
         }
         
         delay_ms(3000);
         printf(lcd_putc,"\f");//limpa tela
      }
      
      if(!input(PIN_B2)){
         printf(lcd_putc,"\fExpedindo informação...");
         for(i = 1; i <= 8; i++){
            printf(lcd_putc, "%c, ", read_ext_eeprom(i));
            delay_ms(100);
         }
         
         for(i = 9; i <= 58; i++){
            printf(lcd_putc, "%u, ", read_ext_eeprom(i));
            delay_ms(100);
         }
      }
      printf(lcd_putc, "\f");
      //TODO: User Code
   }
}

Renderização condicional múltiplas com Administrador em HTML

 

<meta charset="UTF-8">
<script src="https://unpkg.com/vue"></script>

<div id="app">
    <template v-if="logado">
        <p>Usuário Logado: {{ nome }}</p><!--se estiver logado-->
        <p>Perfil: Administrador</p>
    </template>
    
    <p v-else-if"anonimo">Navegando como Anônimo</p>
    <p v-else="!logado">Nenhum usuário logado</p>
    <button @click="logado = !logado">
    {{ logado ? 'Sair' : 'Entrar' }}</button>
    <input type="checkbox" v-model="anonimo"><!--apontando para anônimo-->
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            nome: 'Henrique',//Nome do usuário
            logado: false,
            anonimo: false,//caso deseje entrar como anônimo
        }
    })
</script>




Renderização condicional múltipla em HTML

 

<meta charset="UTF-8">
<script src="https://unpkg.com/vue"></script>

<div id="app">
    <p v-if"logado">Usuário Logado: {{ nome }}</p><!--se estiver logado-->
    <p v-else-if"anonimo">Navegando como Anônimo como Anônimo</p>
    <p v-else="!logado">Nenhum usuário logado</p>
    <button @click="logado = !logado">
    {{ logado ? 'Sair' : 'Entrar' }}</button>
    <input type="checkbox" v-model="anonimo"><!--apontando para anônimo-->
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            nome: 'Henrique',//Nome do usuário
            logado: false,
            anonimo: false,//caso deseje entrar como anônimo
        }
    })
</script>



Renderização condicional com HTML

 Objetivo: Mostrar na tela um(a) usuário(a) logado(a) através de um click

<meta charset="UTF-8">
<script src="https://unpkg.com/vue"></script>

<div id="app">
    <p v-if"logado">Usuário Logado: {{ nome }}</p><!--se estiver logado-->
    <p v-else="!logado">Nenhum usuário logado</p>
    <button @click="logado = !logado">
    {{ logado ? 'Sair' : 'Entrar' }}</button>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            nome: 'Maria',//Nome do usuário
            logado: false

        }
    })
</script>


11/08/2020

2° programa em HTML

<!DOCTYPE html>
<html lang="pt-br">

<head>
    <meta charset="utf-8"/><!--resolver problemas de acentuação-->
    <title>Minha lembraça</title>
</head>

<body>
   <div id="interface">
     
    <header id"cabeçalho"> <!--Delimitar o cabeçalho, inicio do cabeçalho-->
    
    <hgroup><!--tag de grupo-->
    <h1>Tempos bons</h1>
    <h2>Minha lembrança de tempos bons</h2>
    </hgroup>

    </header><!--Delimitar o fim do cabeçalho-->
    <img src="C:\Users\User\Pictures\karolehenrique.png"><!--tag para imagens-->

</div>

</body>
</html>


10/08/2020

Protocolo RS232 com PIC 16F628A

 #include <16f628a.h>

#fuses intrc_io,nowdt,nomclr//diretiva fuses bits

#use delay(clock = 4M)

#use rs232(baud=9600,rcv=pin_b1,xmit=pin_b2,bits=8)

#use fast_io(a)

#use fast_io(b)


void main(void){

   set_tris_a(0xff);//todo port a como entrada

   set_tris_b(0b11111101);//todo pino b como entrada exceto o em 0

   

   while(true){

      if(input(pin_a0)){

         delay_ms(500);

         putc('B');

         delay_ms(100);

      }

   }

}













Créditos para: https://alexsandrolima.com/

Listas Aninhadas 2 em HTML

<h1>Projeto</h1>
<ul class="tree">
    <li>
        <span wm-folder>backend</span>
        <ul>
            <li>
                <span wm-folder>app</span>
                <ul>
                    <li>produto.js</li>
                    <li>usuario.js</li>
                    <li>venda.js</li>
                </ul>
            </li>
            <li>
                <span wm-folder>config</span>
                <ul>
                    <li>banco.js</li>
                    <li>rotas.js</li>
                    <li>servidor.js</li>
                </ul>
            </li>
        </ul>
    </li>
    <li>
        <span wm-folder>frontend</span>
        <ul>
            <li>
                <span wm-folder>public</span>
                <ul>
                    <li>app.css</li>
                    <li>app.js</li>
                    <li>index.html</li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

<link rel="stylesheet" href="http://files.cod3r.com.br/curso-web/tree.css">
<script>
    document.querySelectorAll('[wm-folder]').forEach(folder => {
        folder.onclick = function(e) {
            const ul = folder.nextElementSibling
            const d = ul.style.display
            ul.style.display = d === 'none' ? 'block' : 'none'
        }
    })
</script>



Listas Aninhadas 1 em HTML

 <h1>Projeto</h1>

<ul class="tree"><!--class vai apontar para árvore-->
    <li>
        backend
        <ul>
            <li>
                app
                <ul>
                    <li>produto.js</li>
                    <li>usuario.js</li>
                    <li>venda.js</li>

                </ul>
            </li>
            <li>config</li>
            <ul>
                <li>banco.js</li>
                <li>rotas.js</li>
                <li>servidor.js</li>
            </ul>
        </ul>
    </li>
    <!--novo item da lista mais externa, vai ter 2 pastas-->
    <li>
        frontend
        <ul>
            <li>
                public
                <ul>
                    <li>app.css</li>
                    <li>app.js</li>
                    <li>index.html</li>
                </ul>
            </li>
        </ul>
    </li>
</ul>















Palavras chave:

Lista anidada de JavaScript

JavaScript Nested List

ଜାଭାସ୍କ୍ରିପ୍ଟ ନେଷ୍ଟେଡ୍ ତାଲିକା |

JavaScriptネストリスト

JavaScript Nested List

Lista Nidificata JavaScript

Список вкладених JavaScript

Вложенный список JavaScript

רשימת קינון JavaScript

Lista em HTML

 <h1>Lista de alunos</h1>

<!--Lista ordenada-->
<ol>
    <li>Bia</li>
    <li>Pedro</li>
    <li>Ana</li>
    <li>João</li>
</ol>

<!--Lista não ordenada-->
<h2>Lista de Compras</h2>
<ul>
    <li>Queijo</li>
    <li>Leite</li>
    <li>Arroz</li>
    <li>Pão</li>
</ul>

<!--Lista de definição-->
<h2>Principais termos do glossário de Could Computing</h2>
<dl>
    <dt>BaaS</dt>
    <dd>Backend Como serviço </dd>
    <dt>IaaS</dt>
    <dd>Infraestrutura Como Serviço</dd>
    <dt>PaaS</dt>
    <dd>Plataforma como serviço</dd>
    <dt>SSaS</dt>
    <dd>Software como serviço</dd>
    <dt>AEns</dt>
    <dd>Avant Engenharia e serviços</dd>
</dl>






09/08/2020

1° programa em html

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>1 programa</title>
    <!--stilo-->
    <style>
        h1{
            font-familyArial;
            font-size30pt;
            colorblue;
            text-shadow3px 2px 1px orangered;
        }
    </style>
</head>
<body>
    <h1>Olá Mundo</h1><!--Titulo 1-->
    <h2>Me livrando da maldição</h2><!--subtitulo de h1-->
</body>
</html>





05/08/2020

Async/Await 01 em JavaScript


function esperarPor(tempo = 2000) {
    return new Promise(function (resolve){
        setTimeout(() => resolve(), tempo )
    })
}

esperarPor(2000)
    .then(() => console.log('Excecutando promise 1...'))
    .then(esperarPor)
    .then(() => console.log('Excecutando promise 2...'))
    .then(esperarPor)
    .then(() => console.log('Excecutando promise 3...'))

    //Assíncrono
//Substitindo o código acima, método 1
async function executar() {
    esperarPor(1500)
    console.log('Async/Await 1...');

    esperarPor(1500)
    console.log('Async/Await 2...');

    esperarPor(1500)
    console.log('Async/Await 3...');
}

executar()
console.log();

//Método 2, código síncrono
async function executarNovamente(){
    await esperarPor(1500);
    console.log('Async/Await 1... método 2 ');

    await esperarPor(1500)
    console.log('Async/Await 2... método 2');

    await esperarPor(1500)
    console.log('Async/Await 3... método 2');
}

//executarNovamente()

Promise 05 em JavaScript

function funcionarOuNao(valorchanceErro) {

    return new Promise ((resolve , PromiseRejectionEvent=>{
        try{
            con.log('temp')
            if(Math.random() < chanceErro){
                reject('Ocorreu um ERRO !')
            }else{
                resolve(valor)
            }
        }catch(e){
            reject(e)
        }
    })
}

//gerando uma promessa que não foi tratada
funcionarOuNao('Testando...'0.9)
    .then(v => console.log(`Valor: ${v}`),
        err => console.log(`Erro esp.: ${err}`))
    
    //depois do cath não tem mais informação
    .catch(err => console.log(`Erro: ${err}`))//caso ocorra erro
    .then(() => console.log('Fim !'))


04/08/2020

Exemplo 1 com iframe em HTML

Objetivo: Inserir vários quadro usando iframe em HTML

Código:
<iframe src="/default.asp" width="200" height="200" style="border:1px solid black;"></iframe>&nbsp;
<iframe src="/default.asp" width="200" height200" style="border: 1px solid black;"></iframe>

<br>
<iframe src="/default.asp" width="200" height="200" style="border: 1px solid black;"></iframe>

<br><br>
<iframe src="/default.asp" width="200" height="200" style="border: 1px solid black;"></iframe>


Saída gerada