[Tutorial] Conversгo Hexadecimal
#1

Conversгo de cуdigos Hexadecimais

Com o objetivo de ampliar o conhecimento da board sobre o modo de "pensar" do computador, resolvi criar este tutorial.
Bom apуs estudar sobre resolvi criar este tutorial por ter em vista que a comunidade de scripters do sa-mp sгo de uma grande maioria novatos e que como eu nгo tinha a menor ideia de como a arquitetura binaria funcionava e como o computador "pensava", e tendo em vista tambйm que todo programador deve conhecer como o seu cуdigo й processado pelo computador, sendo essa a base de nosso trabalho.
Sem mais delongas vamos iniciar o tutorial.
O que sгo cуdigos hexadecimais?

Para explicar isso do comeзo vamos primeiro pensar no que vem antes do hexadecimal, o binario.

O cуdigo binario й um sistema de base 2 por usar apenas dois caracteres em seu processamento (0 e 1).

Jб o cуdigo Hexadecimal й um sistema de caracteres em base 16 (pode ser representado por 16 caracteres) e й representado pelo segundo conjunto:

S = {0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F}

Logo o sistema hexadecimal nada mais й que um sistema criado para diminuir a escrita de nъmeros grandes (como 165 que em hexadecimal pode ser representado por A5) nгo sendo necessбrio representa-lo de modo binario que fica muito mais complexo (0000 0000 1010 0101).
Mais a frente iremos aprender a conversгo de Hexadecimal para Decimais e tudo ficara mais claro.

RGB ou as famosas Red - Green - Blue

Vamos comeзar do bбsico. Vocк jб deve ter ouvido falar das famosas cores primarias (as famosas Vermelho, Azul e Amarelo), bem o problema й que o nosso monitor, seja do computador, televisгo, cвmeras digitais, todos utilizam as cores Vermelho, Verde e Azul.

A partir da mistura dessas cores й possнvel ter-se todas as outras cores do mesmo jeito em que Vermelho, Amarelo e Azul.



Mas e o que os cуdigos hexadecimais tem a ver com isso? Simples, o cуdigo RGB й representado por decimais que tem sua cadeia de base 10 jб o hexadecimal й representado por uma cadeia de base 16 sendo possнvel representar de mais formas os nъmeros decimais, diminuindo assim a forma de escrever o cуdigo RGB.
Exemplo:

(0,139,139)

Os nъmeros citados acima representam respectivamente a quantidade de cor Vermelha (0), Verde (139) e Azul (139) que serгo misturados para a obtenзгo de uma determinada cor.
Jб o cуdigo hexadecimal desses nъmeros й #008B8B.
Й muito mais fбcil escrever "#008B8B" do que "0, 139, 139". Sendo assim esse ъnico cуdigo estб representando 3 nъmeros.

Й importante saber tambйm que o nъmero mбximo no cуdigo RGB serб 255.



Convertendo um cуdigo Hexadecimal em RGB

O processo de conversгo de cуdigos Hexadecimais nгo й complexo quando se й entendida de modo concretizada.

Exemplo do cуdigo de uma cor hexadecimal: #4B0082
Este й o cуdigo responsбvel pela cor "Indigo" (nгo me pergunte de onde vem o nome por favor).

Mas Mandrack, qual o sentido disso??
Bem, eu criei uma metodologia em passos para a conversгo do cуdigo hexadecimal e que vai esclarecer sua dъvida.

Primeiro passo:
Exclua o "#" do cуdigo, ele nada mais й do que um indicador hexadecimal. Nгo farб diferenзa para nуs neste momento.
Nosso cуdigo ficara assim: 4B0082

Segundo passo:
Separe o cуdigo em 3 partes de 2 caracteres cada.
Exemplo: 4B 00 82

Agora ficou fбcil certo? Utilizando a lуgica conseguimos ver o que cada uma dessas 3 divisхes representa, logo elas representam respectivamente as cores Vermelho (Red), Verde (Green) e Azul (Blue).

Mas Mandrack como assim?
Irei explicar os outros passos e tudo vai se encaixar.

Terceiro passo:
Procurar as letras existentes em cada uma das divisхes de 2 caracteres.
Utilizando nosso cуdigo, logo temos uma ъnica letra, o B
4B 00 82

Agora preste atenзгo, nos cуdigos hexadecimais existem 6 letras que podem estar presentes, sendo elas A, B, C, D, E e F. Cada letra representa respectivamente um nъmero sendo A = 10, B = 11, C = 12, D = 13, E = 14, F = 15. Para organizar melhor isso vou separar aqui em baixo.

A = 10
B = 11
C = 12
D = 13
E = 14
F = 15


Quarto passo:
Logo apуs identificar as letras, vamos realizar a conta processada pelo computador ao passar cada cуdigo para RGB. Bom a conta й feita da seguinte maneira:

(O primeiro caractere * 16) + O segundo caractere

Veja no nosso exemplo abaixo:

4B -> (4 * 16) + 11 = 75 (Red)

00 -> (0 * 16) + 0 = 0 (Green)

48 -> (4 * 16) + 8 = 130 (Blue)

Lembrando que o "B" vale 11, por isso utilizamos o valor 11.

Sendo assim temos o nosso cуdigo hexadecimal traduzido para o RGB.
Sabendo disso podemos deduzir o porquк do maior nъmero encontrado na representaзгo RGB й o 255 pois temos o a seguinte representaзгo:
#FFFFFF (cуdigo da cor branca)
logo:
FF -> (15 * 16) + 15 = 255 (Red)

FF -> (15 * 16) + 15 = 255 (Green)

FF -> (15 * 16) + 15 = 255 (Blue)

Como nуs podemos ler o cуdigo RGB de modo simples?

Sabendo que o nъmero mбximo encontrado na cor RGB й o 255 podemos ler-lo utilizando a porcentagem (seria a mesma coisa que o computador faz mas ele й complicado).
Logo temos a cor #ADD8E6 (Azul Claro), vamos a conversгo.
AD -> (10 * 16) + 13 = 173 (Red)

D8 -> (13 * 16) + 8 = 216 (Green)

E6 -> (14 * 16) + 6 = 230 (Blue)

Agora faremos a famosa regra de trкs aprendida no ensino fundamental:

Cor Red ®
100 sera 255
x sera 173
x = (100*173)/255
x = 67% vermelho (aproximadamente)

Agora a cor Verde (G)
100 sera 255
x sera 216
x = (100*216)/255
x = 84% verde (aproximadamente)

E finalmente a cor Azul (B)
100 sera 255
x sera 230
x = (100*230)/255
x = 90% azul (aproximadamente)

Mas o cуdigo hexadecimal sу serve para cores?

NГO!!! O cуdigo hexadecimal nгo й usado apenas em cores, ele poderia ser um texto tambйm, por exemplo
4F6C6120706573736F616C
que representa o texto "Ola pessoal".

Como converto o Hexadecimal em textos?

Utilizamos a mesma lуgica, da muito trabalho, porйm a ъnica coisa que muda й que os nъmeros finais da conversгo nгo representarгo mais uma porcentagem de uma cor, mas sim um nъmero que serб comparado com a tabela ASCII que terб seu cуdigo em decimal e transformado em texto.
Por exemplo vamos pegar os 8 primeiros caracteres do nosso texto hexadecimal (4F6C6120)
logo teremos:

4F -> (4 * 16) + 15 = 79 (O decimal 79 na tabela ASCII representa o caractere "O")

6C -> (6 * 16) + 12 = 108 (O decimal 108 na tabela ASCII representa o caractere "l")

61 -> (6 * 16) + 1 = 97 (O decimal 97 na tabela ASCII representa o caractere "a")

20 -> (2 * 16) + 0 = 32 (O decimal 32 na tabela ASCII representa o caractere " " ou "espaзo/space")

Simples nгo й? Deixarei aqui o link de uma tabela ASCII que encontrei na internet para seus estudos



Tem tambйm o link que o Bruno13 indicou da tabela ASCII da Wikipedia que estб mais completa, segue o link

https://pt.wikipedia.org/wiki/ASCII

Sendo assim chegamos ao final do tutorial, posso incrementar mais coisas caso for preciso e se vocкs tiverem dъvidas estarei a disposiзгo para ajuda-los.

OBS: Pretendo melhorar o visual desse tutorial para deixa-lo mais intuitivo e de melhor compreensгo, nгo o farei agora pois sгo exatamente 00:34 e estou cansado.

Novamente uma boa noite e aproveitem o conteъdo.

Bфnus

Criei um programa em Java que converte cуdigos hexadecimais em RGB, eu admito que ele estб um tanto quanto precбrio, nгo ia disponibiliza-lo e foi um programa que criei enquanto estudava a linguagem. Irei deixa-lo como um bфnus para auxiliar nos seus estudos.
PASTEBIN

Crйditos

Mandrack_FreeZe e a todos os sites de onde tirei as imagens (****** e Wikipedia)
Reply
#2

Уtimo tutorial, sу estб faltando aparecer as imagens...
Reply
#3

Tutorial bem caprichado!
Reply
#4

Quote:
Originally Posted by Artista
Посмотреть сообщение
Tutorial bem caprichado!
Obrigado, aproveite!

Quote:
Originally Posted by Coringa_Vilao
Посмотреть сообщение
Уtimo tutorial, sу estб faltando aparecer as imagens...
Clique em cima da Junkebox que ela irб abrir em tamanho maior.

Se o problema й que nгo esta carregando a imagem no post, clique naquele iconezinho da imagem nгo carregada que ira abrir do mesmo jeito.

Obrigado!
Reply
#5

Parabйns, уtimo tutorial.
Reply
#6

Bom trabalho! Vocк apenas focou nas cores, mas hexadecimal sгo nъmeros em base 16, os que conheзemos que que sгo de 1 a 9 sгo base 10. E a principal uso dela й para evitar nщmeros grandes,porque todas as informaзхes que seu computador processa, й em binario assim nгo importando se estб em hexadecimal ou decimal pois o computador converte tudo para binбrio. Entгo podemos concluir que decimal/hexadecimal foram feitos para ser mais facil manipular caracteresem computadores. Fiz uma pequeno feedback, espero que nao entenda erradoo.
Reply
#7

Quote:
Originally Posted by Skudinhu
Посмотреть сообщение
Parabйns, уtimo tutorial.
Obrigado!

Quote:
Originally Posted by zSuYaNw
Посмотреть сообщение
Bom trabalho! Vocк apenas focou nas cores, mas hexadecimal sгo nъmeros em base 16, os que conheзemos que que sгo de 1 a 9 sгo base 10. E a principal uso dela й para evitar nщmeros grandes,porque todas as informaзхes que seu computador processa, й em binario assim nгo importando se estб em hexadecimal ou decimal pois o computador converte tudo para binбrio. Entгo podemos concluir que decimal/hexadecimal foram feitos para ser mais facil manipular caracteresem computadores. Fiz uma pequeno feedback, espero que nao entenda erradoo.
Уtima observaзгo zSuYaNw, vou adicionar ao tutorial, nгo queria deixa-lo muito tйcnico mas acredito que serб bom.

Obrigado pelo feedback.
Reply
#8

Peerfeito bom trabalho!!!
Reply
#9

Bom trabalho!

Recomendaria dispor a tabela ASCII que a Wikipedia traz, estб mais estruturada e completa!

https://pt.wikipedia.org/wiki/ASCII
Reply
#10

Quote:
Originally Posted by zSuYaNw
Посмотреть сообщение
Peerfeito bom trabalho!!!
Obrigado novamente zSuYaNw


Quote:
Originally Posted by Bruno13
Посмотреть сообщение
Bom trabalho!

Recomendaria dispor a tabela ASCII que a Wikipedia traz, estб mais estruturada e completa!

https://pt.wikipedia.org/wiki/ASCII
Obrigado pela dica, jб adicionei o link no post.
Reply


Forum Jump:


Users browsing this thread: 2 Guest(s)