Aula 01 - Programação Visual

Prévia do material em texto

PROGRAMAÇÃO VISUAL 
AULA 1 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Prof. Ederson Cichaczewski 
 
 
2 
CONVERSA INICIAL 
 Nesta aula, iremos abordar os conceitos introdutórios relacionados às 
técnicas de programação visual. Serão vistos os tipos de imagens vetoriais e 
matriciais. Na sequência, iremos tratar sobre as características de fontes de 
texto. Em seguida, veremos como o computador trabalha com as cores, tanto 
para exibição quanto para impressão. Finalizando, trataremos sobre os 
requisitos de um projeto de interface gráfica do usuário e sobre tecnologias front-
end e back-end, assim como uma introdução às linguagens de programação C# 
e Visual Basic. 
TEMA 1 – CONCEITOS E TÉCNICAS DE PROGRAMAÇÃO VISUAL 
O conceito de programação visual pode ser visto por alguns pontos de 
vista diferentes: design gráfico industrial, web design, jogos 
eletrônicos, comunicação visual impressa, interfaces para aplicativos, 
etc. 
Iremos tratar da interface visual para aplicativos de computador, apesar 
de conceitos básicos servirem para as demais ramificações da 
programação visual. 
Serão trabalhadas diferentes linguagens de desenvolvimento de 
interfaces gráficas, tanto para aplicações stand alone como para 
aplicações WEB. 
A interface gráfica é a forma do aplicativo de computador se relacionar 
com o ser humano, tendo como principal objetivo a transmissão e 
recepção de mensagens captadas pelo sentido da visão. Pode 
influenciar no comportamento das pessoas, principalmente em relação 
à decisão de consumo de produtos e serviços. 
Dizem que a primeira impressão é a que fica, portanto, a programação 
visual tem grande responsabilidade em conquistar o usuário de um 
sistema de informação, software ou aplicativo baseado em interface 
gráfica. 
Para tanto, não basta conhecer apenas os conceitos do ponto de vista 
de design, é necessário saber como incorporar este conjunto de 
elementos visuais utilizando uma linguagem de programação para 
computadores ou uma linguagem Web, que possibilitará a computação 
gráfica, o armazenamento e a leitura de informações em um banco de 
dados, seja local ou distribuído pela rede mundial de computadores. 
(Cichaczewski, 2016) 
1.1 Luz e cores 
A intuição e a análise humana, muitas vezes, se baseiam em critérios 
visuais subjetivos. É importante conhecer as limitações físicas da visão 
humana em relação aos fatores de formação de imagem em termos de 
resolução e capacidade de se adaptar a mudanças de iluminação. 
Por exemplo, considerando apenas o poder de resolução, um chip de 
aquisição de imagens do tipo CCD (dispositivo de carga acoplada) de 
uma câmera fotográfica de média resolução pode conter o mesmo 
número de elementos da região de maior acuidade visual do olho 
humano em uma matriz receptora de 5 por 5 mm. Portanto, a 
capacidade do olho de distinguir detalhes é comparável aos sensores 
de aquisição de imagens já existentes. 
 
 
3 
A capacidade do olho em distinguir diferentes níveis de intensidade 
também deve ser levada em conta, visto que as imagens digitais são 
exibidas em níveis discretos de intensidades. A escala de níveis de 
intensidade luminosa aos quais o sistema visual humano pode se 
adaptar é enorme, da ordem de 1010. O brilho percebido pelo olho é 
uma função logarítmica da intensidade de luz incidente. 
Há um fenômeno chamado contraste simultâneo, que está relacionado 
ao fato de o brilho percebido de uma região não depender apenas da 
sua intensidade. A Figura 1 apresenta 3 quadrados centrais que 
possuem o mesmo tom de cinza, e diferentes tons de fundo. O 
quadrado central parece se tornar mais escuro à medida que o fundo 
fica mais claro.(Cichaczewski, 2016) 
Figura 1 – Exemplos de contraste simultâneo 
 
Fonte: Gonzalez, C.; Woods, E., 2010. 
A luz é um tipo de radiação eletromagnética com um determinado 
comprimento de onda (λ) que pode ser percebida pelo olho humano. O 
espectro visível de cores é mostrado na Figura 2. (Cichaczewski, 
2016). 
 
 
 
 
4 
Figura 2 – Faixa do espectro de cores visível ao olho humano 
 
Créditos: MicroOne/Shutterstock. 
Temos como principais divisões aproximadas no espectro o violeta 
(380 a 440 nm), azul (440 a 485 nm), ciano (485 a 500 nm), verde (500 
a 565 nm), amarelo (565 a 590 nm), laranja (590 a 625 nm) e vermelho 
(625 a 740 nm). 
As cores percebidas pelos humanos em um objeto são determinadas 
pela natureza da luz refletida pelo objeto. Quando é refletida uma luz 
equilibrada em todos os comprimentos de onda visíveis, é percebido 
como a cor branca. 
A luz sem cor é chamada de monocromática, tendo como único atributo 
a sua intensidade. É percebida como variações do preto a tons de cinza 
até chegar ao branco. As imagens monocromáticas são chamadas de 
imagens em escala de cinza. 
De acordo com a teoria tricromática ou dos três estímulos, de Thomas 
Young (1773-1829), a retina do olho humano é formada por três grupos 
de foto pigmentos capazes de receber e transmitir sensações distintas: 
Um grupo é mais sensível aos comprimentos de onda (λ) curtos, 
próxima a 445nm, eles permitem ver azuis e violetas. 
Os outros dois grupos possuem picos na cor verde, próximo a 535nm 
(λ médio), e na cor vermelha, próximo a 575nm (λ longo). 
Young, através de seus experimentos com superposição de luzes 
mostrou que todas as cores do espectro visível podiam ser 
representadas como uma soma de três cores primárias: o vermelho, o 
verde e o azul-violeta, conforme a Figura 3. (Cichaczewski, 2016) 
 
 
 
 
5 
Figura 3 – Espectro de cores visíveis em RGB 
 
Fonte: GONZALEZ, R. C.; WOODS, R. E., 2010. 
A partir de então, outros estudos comprovaram os experimentos de 
Young e o padrão RGB (red, green, blue) é usado até hoje em sistemas 
de reprodução de imagem baseados em fonte de luz, como a TV. 
Mesmo que o conjunto de distribuições espectrais da natureza seja 
muito mais amplo, este mais limitado que é reproduzido artificialmente 
no monitor da televisão é aceitável ao ser humano. Já em impressoras 
usa-se o modelo CMYK. Apesar de complementares, os modelos RGB 
e CMYK não produzem os mesmos resultados visuais, ou seja, não 
existe a transposição exata e precisa de cores de um modelo para 
outro, conforme a Figura. (Cichaczewski, 2016) 
 
 
 
 
6 
Figura 4 – Comparativo entre os modelos de cor RGB e CMYK 
 
Créditos: Arcady / Shutterstock; fandijki / Shutterstock. 
TEMA 2 – IDENTIFICAÇÃO DOS DIFERENTES TIPOS DE IMAGENS E ESTILO 
TIPOGRÁFICO 
De forma geral as imagens podem ser classificadas em matriciais e 
vetoriais. A seguir iremos abordar conceitos sobre ambas. 
2.1 Imagens vetoriais 
São geradas a partir de linhas (vetores) e pontos, definidas por 
fórmulas matemáticas e coordenadas. Usadas em ilustrações, 
desenhos, gráficos, infográficos, tabelas, etc. Independentes da 
resolução, ou seja, podem ser redimensionadas para maior ou menor 
sem perda de qualidade. Constituem uma representação por objetos 
geométricos: pontos, retas, curvas, planos, polígonos, etc. As 
conexões entre os elementos, assim como início e fim, são chamadas 
de nó. A qualidade de exibição ou impressão depende da resolução do 
dispositivo. São baseadas na utilização de vetores, que são segmentos 
de reta orientados, conforme ilustrado na Figura 5. As ferramentas para 
criação de imagens vetoriais são softwares de ilustração como Corel 
DRAW, Adobe Illustrator, AutoCad, etc. Os formatos ou extensões são: 
CDR, AI, EPS. (Cichaczewski, 2016) 
 
 
 
 
7 
Figura 5 – Exemplo de imagem vetorial 
 
 Créditos: ANTARTSTOCK/ Shutterstock. 
2.2 Imagens matriciais 
Mais conhecidas como imagens de mapa de bits (bitmap), é um arranjo 
de elementos em duas direções (bidimensional). São geradas com 
base em uma malha quadriculada, aonde a menor parte que compõe 
a unidade de medida, que é o pixel. Cada pixel tem valores exclusivos 
para cor e intensidade. A imagem é dependente de resolução, ou seja, 
seu redimensionamento causa perda de qualidade. A resolução é 
medidapela quantidade de pixels em uma polegada linear, portanto, 
uma relação de número de pixels por área, conhecida como dpi, 
conforme ilustrado na Figura 6. Deve-se definir quantos elementos 
existem em cada direção, e também a área disponível. São usadas em 
fotografias digitais, imagens de scanners, etc. Não é possível defini-las 
por vetores ou expressões matemáticas. As ferramentas para criação 
de imagens matriciais são programas de desenho como Photoshop, 
Photopaint, Paintbrush etc. Os formatos e extensões são tiff, jpg, bmp, 
gif, png, psd etc. (Cichaczewski, 2016) 
 
 
 
8 
Figura 6 – Elementos matriciais de imagem com diferentes resoluções 
 
Créditos: BRO STUDIO /Shutterstock. 
2.3 Elementos de composição e estilo tipográfico 
As letras, palavras, textos e demais elementos tipográficos, como 
pontos, acentos, vírgulas e caracteres especiais, são formados por 
vetores. A fonte de texto, como conhecemos, são letras digitais que 
possuem suas características próprias, dentre elas, tipo (Times, Arial, 
Verdana, etc), altura (tamanho), estilo (negrito, itálico, sublinhado), cor, 
alinhamento (esquerda, direita, centralizado), espaço entre letras 
(kerning), espaçamento entre linhas (leading), serifa etc. 
Serifas são os pequenos traços e prolongamentos que ocorrem no fim 
das hastes das letras, conforme ilustrado na Figura 7. As famílias 
tipográficas sem serifas são conhecidas como sans-serif (do francês 
"sem serifa"), também chamadas grotescas, conforme ilustrado na 
Figura 8. Tipos serifados são usados em blocos de texto (como em um 
romance), pois as serifas tendem a guiar o olhar através do texto. Tipos 
sem-serifa costumam ser usados em títulos e chamadas, pois 
valorizam cada palavra individualmente e tendem a ter maior peso e 
presença para os olhos – parecem mais limpos. (Cichaczewski, 2016) 
 
 
9 
Figura 7 – Exemplo de palavra usando fonte com serifa 
 
Crédito: CHRISTITZEIMAGING.COM / Shutterstock. 
Figura 8 – Exemplo de palavra usando fonte sem serifa 
 
Créditos:christitzeimaging.com / Shutterstock. 
 É possível converter em curvas e deformar letras e textos. 
TEMA 3 – PROPRIEDADES E MODELOS DAS CORES E DAS IMAGENS 
3.1 RGB 
O modelo RGB é constituído pelo sistema de cores aditivas, em que o 
preto é gerado pela ausência de cor. Cada cor é representada por uma 
combinação de diferentes intensidades associadas às cores primárias 
vermelha (Red), verde (Green) e azul (Blue). A soma de 100% das 3 
cores é igual à cor branca. A ausência de todas elas (0%) é igual à cor 
 
 
10 
preta, conforme verificado na Figura 9. Aplica-se o modelo RGB 
quando a imagem é gerada por uma fonte de luz, como os monitores 
de computador, televisão, smartphone, etc. (Cichaczewski, 2016) 
 
Figura 9 – Modelo aditivo RGB 
 
Crédito: Arcady / Shutterstock. 
3.2 CMYK 
O modelo CMYK é constituído pelo sistema de cores subtrativas. Neste 
caso não se tem uma fonte de luz, mas sim uma reflexão da luz 
incidente em uma imagem, no caso de imagens obtidas por 
impressoras (de tinta ou outras soluções). As cores primárias para 
objetos sem luz própria são: magenta (Magenta), amarelo (Yellow), 
ciano (Cyan) e preto (Black); são cores primárias subtrativas, pois seu 
efeito é subtrair, isto é, absorver alguma cor da luz branca. No modelo 
CMYK, o branco é gerado pela ausência de todas as cores (0%) e o 
preto pela presença de todas (100%), conforme mostra a Figura 10. 
(Cichaczewski, 2016) 
 
 
 
 
 
 
 
 
 
 
 
11 
Figura 10 – Modelo subtrativo CMYK. 
 
Crédito: fandijki / Shutterstock. 
3.3 Grayscale 
Também chamado de escala de cinza, os tons de cor vão do branco 
(0%, maior intensidade) ao preto (100%, menor intensidade), 
caracterizando as imagens monocromáticas. O número de tons 
depende de quantos bits ou quantos níveis são utilizados para 
representar a cor, conforme ilustrado na Figura 11. Imagens em tons 
de cinza são diferentes das imagens em perto e branco, que utilizam 
apenas duas cores. Apesar de muitas vezes se referir como imagem 
em preto e branco uma imagem em escala de cinza, por não ser 
colorida. No caso de impressão, usa-se o modelo Grayscale quando 
se deseja utilizar apenas uma cor de tinta, normalmente a cor preta. 
(Cichaczewski, 2016) 
Figura 11 – Modelos Grayscale, à esquerda com 256 níveis e à direita com 7 
níveis 
 
Créditos: Peter Hermes Furian / Shutterstock. 
 
 
12 
TEMA 4 – PROJETO E DESENVOLVIMENTO DE INTERFACES VISUAIS E 
GRÁFICAS 
4.1 Usabilidade 
O diálogo entre o usuário e o software ocorre por meio da interface 
gráfica. É importante que esta interface seja amigável, ou seja, não 
apresente dificuldades ao usuário. Uma das características de 
eficiência em um aplicativo é a usabilidade, que descreve a qualidade 
da interação de uma interface com os usuários. É necessário usar 
elementos visuais de forma planejada, entre imagens, sons, texto e 
demais recursos visuais. Os conceitos associados a esses aspectos 
situam-se na área de Interação Humano Computador (HCI). 
A usabilidade se dá pelas seguintes características: 
- Facilidade de manuseio e facilidade de aprendizado rápido; 
- Dificuldade de esquecimento (fácil de lembrar); 
- Ausência de erros operacionais (segurança); 
- Satisfação do Usuário (eficácia); 
- Eficiência na execução das tarefas a que se propõe. 
Entre os requisitos de usabilidade relacionados à exibição, estão: a 
consistência, o feedback, os níveis de habilidade e comportamento 
humano, a percepção humana, metáforas, minimização de carga de 
memória, eficiência no diálogo, no movimento e nos pensamentos, 
classificação funcional dos comandos, manipulação direta, exibição 
exclusiva de informação relevante, uso de rótulos, abreviações e 
mensagens claros, uso adequado de janelas e projeto independente 
de resolução do monitor. (Cichaczewski, 2016) 
O objetivo da interface é proporcionar uma interação amigável entre o 
computador e o ser humano. A interface gráfica deve ser fácil de usar, 
fornecer sequências simples e consistentes de interação, mostrar de 
modo claro as alternativas disponíveis a cada passo, sem confundir o 
usuário nem o deixar inseguro; deve permitir que o usuário se fixe 
exclusivamente no problema que ele deseja resolver. 
No que diz respeito à qualidade de interface, devemos considerar que 
a mesma seja: satisfatória, agradável, divertida, interessante, 
motivadora, bonita, criativa e emocionante. 
Considera-se também uma série de heurísticas (diretrizes, regras e 
estratégias) que as pessoas usam com base em situações do mundo 
real. Assim, uma boa interface permite o usuário interagir por meio de 
heurísticas coerentes e sólidas. Por exemplo, a cor verde tem um 
significado de aprovação, prosseguimento, portanto, é usada em 
interações com este sentido. (Cichaczewski, 2016) 
4.2 Projeto de interfaces 
O projeto de interfaces visuais deve levar em conta vários fatores, 
desde o modelo de design do sistema como um todo, o design da 
imagem do sistema, o modelo de necessidade do usuário e a 
percepção do usuário, estabelecendo uma inter-relação. A Figura 12 
ilustra a complexidade do projeto de interface do usuário de um 
sistema. (Cichaczewski, 2016) 
 
 
 
 
13 
Figura 12 – Ilustração de projeto de layout de interface do usuário. 
 
Créditos: Rawpixel.com / Shutterstock. 
O modelo do design ou projeto destina-se ao sistema inteiro. Nas 
interfaces orientadas a objeto, esse modelo é formado pela estrutura de classes, 
com diagramas e textos que definem as interações dinâmicas. Identifica os 
objetos (propriedades, comportamento e relacionamentos) do sistema e 
determina o modo de representação desses objetos para os usuários, assim 
como admitir técnicas de interação, as quais dizem respeito aos meios pelos 
quais o usuário interage com o sistema (teclado, mouse etc). 
A percepção do sistema baseia-se nas expectativas, nos objetivos e 
na compreensão do que o sistema oferece ao usuário em termos de 
funcionalidade e de objetos, tambémcomo responde às suas 
interações. E tudo isso depende da experiência prévia do usuário. 
Como as diversas experiências das pessoas influem na percepção do 
sistema, cada usuário elabora o seu próprio modelo conceitual, que 
pode mudar à medida que interage com o aplicativo. 
 
 
14 
Consequentemente, sua percepção se modifica, e o usuário cria novos 
modelos conceituais. Por isso, o modelo do design de projeto deve ser 
flexível o suficiente para acomodar as instáveis exigências dos 
usuários. (Cichaczewski, 2016) 
A imagem do sistema contém todos os processos de implementação e 
o material de apoio que descrevem a sintaxe e a semântica do sistema. 
Para que os usuários sintam capacidade e vontade de utilizar o 
sistema, a imagem e a percepção do sistema devem coincidir. 
O modelo de usuários deve ser considerado pelo projetista de 
interface, é preciso analisar os usuários potenciais, compreendê-los e 
conhecer o trabalho que eles executam, bem como, a estrutura 
organizacional e social do ambiente para o qual irá rodar o sistema. 
Entre as etapas de desenvolvimento de um projeto de interface gráfica, 
temos (Cichaczewski, 2016): 
• Identificar necessidades e estabelecer requisitos; 
• Desenvolver alternativas para atender requisitos; 
• Construir as versões alternativas; 
• Avaliar o resultado do que está sendo construído. 
 
4.3 Estilos de Interface 
Assim como as pessoas se comunicam entre si de formas diversas, as 
interfaces dos sistemas também possuem estilos distintos. Os 
principais estilos de interface são: 
- What you see is what you get (WYSIWYG): Significa “você vai ter o 
que está vendo”. Nessas interfaces, a aparência final do que é exibido 
nos dispositivos específicos (ex: impressora) corresponde exatamente 
à imagem mostrada na tela do monitor em que o aplicativo está 
rodando. Como exemplo, pode-se citar os editores de texto como o 
Writer, conforme apresentado na Figura 13, que tem o modo de 
visualizar impressão, em que se pode ver que os caracteres serão 
impressos da mesma forma que aparecem na tela, incluindo a 
formatação, como negrito, itálico, sublinhado etc. (Cichaczewski, 2016) 
Figura 13 – Exemplo de interface WYSIWYG 
 
 
 
15 
 
Manipulação direta: são interfaces que utilizam apenas representações 
visuais para interação com o usuário, o que facilita o aprendizado e 
memorização. Como exemplo, no sistema operacional Macintosh da 
Apple, para imprimir ou excluir um arquivo, basta clicar e arrastar com 
o mouse para o ícone da impressora ou da lata de lixo. 
Icônica: Usa ícones para representar uma função, objeto, ação, 
comando, propriedade ou qualquer outro conceito. Normalmente 
associa-se a imagem de objetos do mundo real para os ícones, por 
exemplo, tesoura para recortar, pincel para pintar, borracha para 
apagar, impressora para imprimir etc. 
Seleção por menu: Neste estilo, um conjunto de opções, organizado e 
exibido de forma hierárquica, apresenta as ações disponíveis, 
conforme exemplo da Figura 14. Em termos de estrutura e formato, os 
menus possuem um título e uma lista de opções com suas ramificações 
ou subníveis. Como vantagens, destaca-se a rapidez no aprendizado 
e a facilidade de tomar decisões. Por outro lado, causam cansaço no 
usuário e ocupam muito espaço na tela, também se limitam ao idioma 
em que foram escritos. (Cichaczewski, 2016) 
 
Figura 14 – Exemplo de interface de seleção por menu 
 
 
Diálogo em linguagem natural: Tipo de interação em que o computador 
responde aos comandos do usuário seja por escrito ou pela voz. Um 
exemplo é a busca por texto ou voz do Google. 
Interfaces WEB: São as interfaces de sites e páginas de hipertexto da 
internet. São visualizadas por meio de softwares chamados 
navegadores (ex: Opera, Google Chrome, Firefox), que leem e 
interpretam o código HTML, sendo assim exibidas para o usuário. 
Linguagem por comando: A interação se dá por meio de um conjunto 
de comandos ou vocábulos, com regras rígidas de sintaxe. 
Normalmente exige treinamento e boa memória, agradando aos mais 
 
 
16 
experientes, dado sua flexibilidade para criação de macros. Como 
exemplo, pode-se citar o Prompt de Comando do Windows ou do Linux. 
Diálogo guiado por pergunta e resposta: consiste em um conjunto de 
campos para entrada de dados, em que se têm os parâmetros (título 
ou descrição do campo) e em seguida os campos (muitas vezes com 
parâmetros ou máscara), dentro de uma estrutura guiada, de forma a 
simplificar a interação com o usuário. Como exemplo, pode-se citar os 
caixas eletrônicos de bancos. (Cichaczewski, 2016) 
4.4 Tecnologias de Front-end e Back-end 
As tecnologias front-end, também chamadas de tecnologias do lado 
cliente, representam todo o código que é enviado de um servidor para um 
navegador ou aplicação cliente. Basicamente são as tecnologias que 
proporcionam o que o usuário vê e interage, o que chamados de GUI (Interface 
Gráfica do Usuário). O navegador ou aplicação então interpreta esse código e o 
desenha na tela. A fundação de todos os sites web HTML são as linguagens de 
programação básicas para criar os mecanismos de navegação e a estrutura de 
um site web. O W3C é o órgão de padronização responsável por manter essas 
linguagens, como o CSS. Portanto, entre as tecnologias Web front-end principais 
podemos citar o HTML 5, o CSS 3 e o Javascript, assim como frameworks, como 
o Bootstrap. No caso de aplicações de área de trabalho do Windows, podemos 
considerar na plataforma .NET da Microsoft as linguagens C# e Visual Basic 
como tecnologias front-end sendo usadas para desenvolver a interface gráfica. 
O back-end (tecnologias do lado do servidor) de um site Web ou programa 
de computador é o que o faz operar. É a parte da aplicação que o usuário não 
consegue ver nem interagir. Questões a serem tratadas incluem a estrutura do 
banco de dados, as áreas protegidas por senhas, firewalls, personalização e 
perfis de usuário. Ao analisar esse nível de tecnologia, deve-se focar em como 
o back-end pode habilitar ou restringir o que é possível criar em termos de 
design. 
Uma tecnologia de back-end da Microsoft para Web é o ASP.NET. No 
caso de páginas HTML, entre as tecnologias mais utilizadas temos o Javascript 
(pode ser usado como front-end ou back-end), o PHP e o SQL. E podemos incluir 
as linguagens de programação C++ e Java, assim como as linguagens C# e 
Visual Basic também podem ser usadas para desenvolvimento back-end 
interagindo com o banco de dados. Os sistemas de bancos de dados em si são 
tecnologias back-end, como o MySQL, SQL Server, Oracle, entre outros. 
 
 
17 
TEMA 5 – LINGUAGENS DE PROGRAMAÇÃO C# E VISUAL BASIC 
5.1 C-Sharp 
O C# (C-Sharp) 7.3, que é a versão mais recente para a plataforma .NET 
Framework, é uma linguagem de programação baseada em C, C++ e Java que 
é visual, dirigida por eventos e totalmente orientada a objetos (baseada em 
classes) para o desenvolvimento de aplicações que rodam sobre o .NET 
Framework. Usa o conceito de máquina virtual, portanto, a aplicação não tem 
envolvimento direto com o sistema operacional, mas sim com a CLR (Common 
Language Runtime), atualmente na versão 4, da plataforma .NET. Contudo, visto 
que a máquina virtual .NET trabalha com diversas linguagens de programação 
diferentes, a CLR não pode executar diretamente o código C#, ela precisa 
executar uma linguagem intermediária comum a todas as linguagens da 
plataforma .NET, que é a CIL (Common Intermediate Language), por isso é 
necessário passar o código C# por um compilador da linguagem. O compilador 
lê o arquivo com o código fonte do programa e o traduz para o código 
intermediário que será executado pela máquina virtual (Ledur, 2018). 
5.1.1 Tipos de Dados 
 C# fornece todos os tipos de dados que estão disponíveis em Java e 
adiciona suporte para um novo tipo de ponto flutuante de alta precisão de 128 
bits. Todos os tipos de dados primitivos em C# são objetos no namespace do 
sistema. Para cada tipo de dado, é fornecidoum nome curto ou alias. Por 
exemplo, int é o nome curto para System.Int32. A Tabela 1 apresenta os tipos 
de dados em C# (Ledur, 2018). 
Tabela 1 – Tipos de Dados em C# 
Nome 
Classe 
.net 
Tipo 
Tamanho 
(bits) 
Intervalo de 
valores (bits) 
Byte Byte unsigned integer 8 0 até 255 
Sbyte Sbyte signed integer 8 -128 até 127 
 
 
18 
Int int32 signed integer 32 
-2,147,483,648 até 
2,147,483,647 
Uint Uint32 unsigned integer 32 0 até 4294967295 
Short int16 signed integer 16 -32,768 até 32,762 
Unshort uint16 unsigned integer 16 0 até 65535 
Long int64 signed integer 64 
-92233720368547755808 até 
9223372036854775807 
Ulong uint64 unsigned integer 64 0 até 18446744073709551615 
Float single 
single-precision 
floating point type 
32 -3,402823 até 3,402823e38 
Double double 
double-precision 
floating point type 
64 
-1.79759313486232e308 até 
1.7976313486232e308 
Char char 
a single Unicode 
character 
16 símbolos Unicode 
Bool boolean 
tipo de valor 
lógico booleano 
8 
true or false 
(verdadeiro ou falso) 
Object object 
a base de todos 
os outros tipos 
 
String string 
sequência de 
caracteres 
 
 
 
 
 
 
19 
5.1.2 Criando uma variável 
 Por meio do uso dos tipos de dados da linguagem C#, é possível criar 
variáveis para armazenar os dados no sistema. No exemplo a seguir, é possível 
ver o uso do tipo object, que é o tipo base de todos os outros tipos de dados da 
linguagem. Em outras palavras, todos os tipos de dados do C# são originados a 
partir do tipo object. O comando System.Console.WriteLine irá imprimir na tela 
do console o que está entre parênteses. 
 
 Em relação à sintaxe da linguagem C#, percebe-se que sempre ao final 
de uma linha de comando usa-se o ponto e vírgula (;). 
5.1.3 Operadores 
 A Tabela 2 apresenta os operadores de atribuição, utilizado para realizar 
a atribuição de um valor para um objeto, e igualdade, que serve para fazer o 
teste de igualdade entre dois objetos. 
Tabela 2 – Operadores de atribuição e igualdade em C# 
Operador Propósito 
= Atribuir valor 
== Teste de igualdade 
 
 A Tabela 3 apresenta os operadores matemáticos, que permitem realizar 
operações em valores ou variáveis. 
 
 
 
20 
Tabela 3 – Operadores matemáticos em C# 
Operador Proposta 
*,/,% Multiplicação, divisão, módulo 
+,- Adição e subtração 
& AND 
^ XOR 
| OR 
 
 A Tabela 4 apresenta os operadores de incremento e decremento, que 
tornam mais fácil realizar as operações. 
Tabela 4 – Operadores de incremento e decremento em C# 
Operador Proposta 
V++ Incrementa a variável v em 1 
V+=N Incrementa a variável v em n 
V*=n Multiplica a variável v por n 
V-=n Subtrai a variável v por n 
 
 A Tabela 5 apresenta os operadores relacionais, que verificam a relação 
entre dois objetos ou variáveis. 
Tabela 5 – Operadores relacionais em C# 
Operador Propósito 
== Verifica por igualdade 
!= Verifica a diferença 
> Maior que 
= Maior ou igual 
(funções). 
 O ambiente de programação Visual Basic opera com alguns conceitos 
importantes, como propriedades e métodos. 
 Propriedade: é o conceito associado a um objeto visual, na verdade ao 
seu conjunto de características tanto em aparência quanto em posição. Por 
exemplo, considerando, como objeto, uma televisão. Uma televisão tem como 
propriedade apresentar imagem e som, enquanto um objeto rádio tem como 
propriedade apenas apresentar o som. Deve-se considerar que uma propriedade 
está vinculada a um objeto. Pode-se apontar como propriedade o fato de uma 
janela estar maximizada ou minimizada. A janela é o objeto, e o fato de estar 
maximizada ou minimizada é sua propriedade. Em sintaxe, deve ser 
estabelecida primeiramente a indicação do objeto, depois a indicação de sua 
propriedade: Objeto. Propriedade. Há casos em que é necessário definir valores 
e passá-los para uma determinada propriedade. Para que um valor seja atribuído 
a uma propriedade, deve ser utilizada a sintaxe Objeto. Propriedade = Valor, na 
qual o valor pode ser um dado numérico, string (caracteres), uma constante ou 
 
 
25 
uma fórmula que retorne uma constante (Manzano, 2015). 
 Método de um objeto se refere àquilo que o objeto visual faz, ou seja, ao 
seu funcionamento (à sua ação). Considerando o objeto televisão com as 
propriedades de imagem e som apresentadas, estas podem ser sintonizadas em 
outro canal. Deve-se considerar que um método está vinculado ao estado de um 
objeto e executa nele alguma operação. Como sintaxe, um método pode ser 
escrito de duas formas: com argumentos ou Objeto.Método (Manzano, 2015). 
 Essa estrutura operacional de trabalho denomina-se linguagem de 
programação orientada a eventos, que não deve ser confundida com linguagem 
de programação orientada a objetos. Os eventos estão associados aos 
componentes visuais da interface usada por um programa, enquanto os objetos 
estão associados à forma como o programa manipula a estrutura de seus dados 
(Manzano, 2015). 
5.2.1 Tipos de Dados 
 A Tabela 7 apresenta os tipos de dados em Visual Basic. 
Tabela 7 – Tipos de dados em VB.NET 
Tipo de 
dado 
Tamanho Abrangência 
Short 16 bits 
De: -32.768 
Até: 32.767 
Ushort 16 bits 
De: 0 
Até: 65.535 
Integer 32 bits 
De: -2.147.483,648 
Até: 2.147.483.647 
Uinteger 32 bits 
De: 0 
Até: 4.294.967.295 
Long 64 bits 
De: -9.223.372036.854.775.808 
Até: 9.223.372036.854.775.807 
Ulong 64 bits 
De: 0 
Até: 18.446.744.073.709.551.615 
Single 32 bits 
De: -3.4028235e38 
Até: 3.4028235e38 
Double 64 bits 
De: -1.79769313486231e308 
Até: 1.7976931348621e308 
Decimal 128 bits 
De: 0 
Até: +/- 79.228.162.514.264.337.693.543.950.950.335 
 
 
26 
Byte 8 bits 
De: 0 
Até: 255 
Sbyte 8 bits 
De: -128 
Até: 127 
String 
16 bits por 
caractere 
De: 0 caractere 
Até: 2.000.000.000 de caracteres aproximados 
Boolean 16 bits 
Falso: 0 ou false 
Verdadeiro: Qualquer valor numérico ou true 
Date 64 bits 
De: 01/01/0001 
Até: 31/12/9999 
Object 32 bits 
 Referência feita a variáveis instanciadas a partir da 
definição de um objeto 
5.2.2 Criando uma variável 
 Uma variável é uma região de memória, previamente identificada por um 
rótulo (nome), que tem por finalidade armazenar os dados de um programa 
temporariamente. Cada variável armazena um valor por vez (Manzano, 2015). 
 É considerado valor o conteúdo de uma variável; dessa forma, um valor 
está relacionado ao tipo de dado de uma variável, podendo ser definido com 
qualquer tipo de dado, como byte, boolean, integer, long, currency, single, 
double, decimal, date, string ou object (Manzano, 2015). 
 Todo dado a ser armazenado na memória de um computador por meio de 
uma variável deve ser previamente declarado, ou seja, primeiramente é 
necessário saber o seu tipo para depois fazer o seu armazenamento em 
memória. Estando armazenado o dado, pode ser utilizado e manipulado a 
qualquer momento, durante a execução do programa (Manzano, 2015). 
Em Visual Basic, as variáveis usam o comando Dim. 
Exemplo: 
 
 
 
 
27 
5.2.3 Operadores 
 Os operadores aritméticos são classificados segundo duas categorias, 
sendo binários ou unários. São binários quando atuam em operações de 
exponenciação, multiplicação, divisão, adição e subtração. São unários quando 
atuam na inversão de um valor, atribuindo a este o sinal positivo ou negativo 
(Manzano, 2015). 
A Tabela 8 apresenta os operadores aritméticos binários em Visual Basic. 
Tabela 8 – Operadores aritméticos binários em VB.NET 
Operador binário Operação a ser realizada 
^ Exponenciação de valores inteiros e reais 
+ Adição de valores inteiros e reais 
- Subtração de valores inteiros e reais 
* Multiplicação de valores inteiros e reais 
/ Divisão de valores – quociente real 
\ Divisão de valores – quociente inteiro 
Mod Resto da divisão de valores inteiros 
= Operação de atribuição 
& ou + Concatenação de caracteres 
 
 A Tabela 9 apresenta os operadores aritméticos unários. 
Tabela 9 – Operadores aritméticos unários em VB.NET 
Operador unário Operação a ser realizada 
+ Definição de números positivos 
- Definição de números negativos 
 
 O código a seguir apresenta um exemplo de uma operação de adição: 
 
 
28 
 
 A Tabela 10 apresenta os operadores relacionais em Visual Basic. 
Tabela 10 – Operadores relacionais em VB.NET 
Tabela de operadores relacionais 
Operador Descrição 
= Igual a 
> Maior que 
= Maior ou igual a 
 Diferente de 
 
 A Tabela 11 apresenta os operadores lógicos e suas precedências em 
Visual Basic. 
Tabela 11 – Operadores lógicos e suas precedências em VB.NET 
Operador Precedência 
Not Primeira ordem 
And Segunda ordem 
Or | xor Terceira ordem 
 
 
 
 
29 
5.2.4 Escopo de variáveis e classes 
 O escopo de variável, ou sua abrangência operacional, está vinculado à 
forma de sua visibilidade no programa em relação às sub-rotinas que compõem 
o programa, e sua visibilidade está relacionada à hierarquia de composição 
diante do método de projeto top-down (Manzano, 2015). 
 Uma variável no ambiente de desenvolvimento Visual Basic pode ser 
como se segue (Manzano, 2015). 
- Global (Public): O conceito de variável pública está relacionado ao conceito de 
variáveis globais, geralmente estudadas em algoritmos. 
- Local (Private): O conceito de variável privada está relacionado ao conceito de 
variáveis locais, geralmente estudadas em algoritmos. Dessa forma, as variáveis 
privadas ficam válidas apenas para procedimentos de um mesmo módulo. Ao 
serem utilizadas variáveis do tipo Private em módulo, com a instrução Dim, elas 
passam a ser idênticas à instrução Private. 
- Estática (Static): Pode ser que se necessite utilizar a instrução Private para 
facilitar a leitura e a interpretação do programa. Para usar uma variável como 
privada, deve-se utilizar a instrução Static no lugar de uma instrução Dim. A 
variável declarada passa a reter os seus valores entre as chamadas. 
 Além das variáveis, as sub-rotinas e as classes também podem ser Public, 
Private ou Static (Manzano, 2015). 
Exemplo de classe: 
 
Percebe-se que em Visual Basic não se usam chaves para determinar o 
que pertence à classe, mas usa-se a palavra-chave da linguagem End para 
terminar a declaração dos seus membros. 
 
 
30 
FINALIZANDO 
Nesta aula, foram abordados os conceitos introdutórios de programação 
visual, os tipos de imagens (vetoriais e matriciais), os tipos de fontes, os modelos 
das cores RGB, CMYK e GRAYSCALE, os requisitos de projeto e de interface 
gráfica do usuário, assim como uma introdução às linguagens C# e VB.NET. 
Tivemos a oportunidade de ter uma noção dos estudos que são realizados 
para se chegar na interface gráfica dos softwares aplicativos que utilizamos em 
nosso dia a dia. 
O conteúdo desta aula é fundamental para o bom entendimento dos 
conteúdos que serão tratados futuramente.31 
REFERÊNCIAS 
CICHACZEWSKI, E. Programação Visual. Aula 1. Curitiba: InterSaberes, 2016. 
GONZALEZ, R. C.; WOODS, R. E. Processamento Digital de Imagens. 3 ed. 
São Paulo: Pearson, 2010. 
LEDUR, C. L. Desenvolvimento de Sistemas com C#. Porto Alegre: SAGAH, 
2018. 
MANZANO, J. A. N. G. Estudo Dirigido de Visual Basic Community 2015. São 
Paulo: Érica, 2015. 
MICROSOFT C#. Início Rápido: usar o Visual Studio para criar seu primeiro 
aplicativo de console em C#. Disponível em: . Acesso em: 10 
fev. 2022. 
MICROSOFT C-SHARP. Documentação do C#. Disponível em: 
. Acesso em: 10 fev. 2022. 
MICROSOFT C#-T. Tutoriais do Visual Studio | C#. Disponível em: 
. Acesso em: 10 fev. 2022. 
MICROSOFT VB. Guia de início rápido: criar seu primeiro aplicativo de 
console no Visual Studio com o Visual Basic. Disponível em: 
. Acesso em: 10 fev. 2022. 
_____. Documentação do Visual Basic. Disponível em: 
. Acesso em: 10 fev. 
2022. 
_____. Tutoriais do Visual Studio | Visual Basic. Disponível em: 
. Acesso em: 10 fev. 2022. 
MICROSOFT VS. Instalar o Visual Studio. Disponível em: 
. Acesso em: 10 fev. 2022. 
	Conversa inicial
	TEMA 1 – Conceitos e técnicas de programação visual
	TEMA 2 – Identificação dos diferentes tipos de imagens e estilo tipográfico
	TEMA 3 – Propriedades e modelos das cores e das imagens
	TEMA 4 – Projeto e desenvolvimento de interfaces visuais e gráficas
	TEMA 5 – Linguagens de programação c# e visual basic
	FINALIZANDO
	REFERÊNCIAS