Elementos comuns à interface gráfica dos programas

Da invenção da interface gráfica pela Xerox, no século passado, até os dias de hoje, houve uma evolução que culminou na criação de alguns elementos comuns à interface gráfica dos programas. Seja qual for o sistema operacional (Windows, Linux, Mac Os/X, Unix etc.), quase todos os programas apresentam mais ou menos os mesmos componentes de interação com o usuário, tais como os botões fechar, maximizar, minimizar, novo, abrir, salvar, imprimir... Vejamos alguns exemplos:

Abaixo, temos os botões minimizar, maximizar e fechar do Wordpad, no Windows XP:

 A função desses botões é óbvia:

minimizar - retrai/ joga a janela do programa para a barra de tarefas;

maximizar - expande ou diminui a janela do programa em questão;
fechar - fecha o programa (caso ele não seja do tipo que rode em segundo plano).

Abaixo, os botões presentes na maioria dos programas que editam alguma coisa: novo, abrir, salvar, imprimir.(No caso, temos uma screenshot do Wordpad e do Word 2003, ambos no Win XP).

Como você deve ter observado, os ícones (pequenas figuras que representam esses botões), são praticamente os mesmos. Isso porque esses ícones são os fornecidos pela API (Aplication Program Interface - Interface de programação de Aplicativos) do Windows; ou seja, o programa não tem ícones específicos para representar esses botões. Entretanto, alguns programas aceitam o uso de temas para redefinir os ícones mostrados em suas janelas. Tomemos como exemplo o IrfanView (um visualizador e editor de imagens):

Repare que os ícones de abrir, salvar, imprimir, colar e desfazer são diferentes dos ícones-padrão do Windows. Isso graças ao tema aplicado à inteface do programa.

Outros sistemas operacionais, como o Linux, o Mac Os/X etc., terão janelas e ícones um pouco (ou bastante) diferentes, pois têm suas próprias interfaces gráficas (diferentes da usada no Windows, obviamente).

Além dos botões que acionam as tarefas mais comuns, temos geralmente também uma barra de menus, onde normalmente podemos acessar essas mesmas funções, além de outras mais específicas, ou menos comuns.
Abaixo, o menu arquivo do Word 2003: 

E do Irfan View no Windows XP:

Forando os menus, outra forma de acessar as funções de um programa é através dos atalhos de teclado. Muitas vezes, eles são exibidos ao acessarmos os menus do programa:

Abaixo, alguns atalhos do IrfanView:

E do Word 2003:

Repare que alguns atalhos são padrões (Ctrl+P: imprimir, Ctrl+S: salvar, Ctrl+C: copiar, Ctrl+V: colar), enquanto outros, bastante incomuns ou próprios do programa em questão (Ctrl+B: salvar, Ctrl+L: localizar, Ctrl+T: selecionar tudo).

Como diversos programas têm muitos elementos da interface gráfica bastante parecidos, ao aprendermos a usar um programa, temos condições de aprender a usar outros que realizam as mesmas funções, ou tarefas semelhantes. Ao aprendermos a usar o IrfanView, podemos nos aventurar a usar o Corel PaintShop Pro ou o Gimp, por exemplo. Alguns menus, botões e atalhos podem até mudar, mas as funções básicas de um editor de imagens (salvar em outro formato, recortar, redimensionar a imagem, aplicar efeitos como desfoque [blur], sépia, negativo etc.) com certeza estarão lá. Dessa forma é que vamos aprendendo a usar cada vez mais programas, que realizam determinadas tarefas de uma forma mais conveniente, ou com determinados truques que só eles têm. Lembrando que pesquisar na internet ou nos arquivos de ajuda do programa é fundamental para sanarmos as dúvidas quanto ao uso, e funções disponíveis no aplicativo que estivermos usando. Mas mesmo que a interface de algum programa seja bastante diferente da habitual, ainda assim temos como descobrir quais são os botões de interação de uma janela ou caixa de diálogo, como por exemplo no Powerpoint image extractor:

Inspirado nas janelas do MacOs, ele exibe no canto superior direito 3 botões. Não é nem preciso pensar muito para concluir que esses botões redondos representam, da esquerda pra direita, os botões minimizar, restaurar e fechar. Os ícones dos botões podem até ter mudado, mas o posicionamento tradicional deles foi mantido.

Atualmente, com o lançamento do Windows 7 e do Office 2010, a interface gráfica do Windows tem passado por grandes mudanças no seu design e estilização. O uso de transparências e o efeito visual da luz atravessando uma superfície vítrea, estão entre os novos recursos presentes nos programas e no próprio sistema operacional, além de uma grande reorganização dos botões e menus.

Trataremos do Windows 7 um pouco mais para a frente. Vejamos agora, por exemplo, como executar algumas tarefas de imagem em dois programas com abordagens e finalidades bastante diferentes: o Inkscape e o IrfanView.

No IrfanView, para salvarmos uma imagem em outro formato, devemos abri-la e depois usar a opção salvar como. Depois, deve-se escolher o formato desejado (ou disponível) e salvar o arquivo.

Vejamos, então, passo-a-passo. Primeiro, vamos ao menu File → Open, ou clicamos com o mouse no ícone da pastinha se abrindo:

A seguir, escolhemos a pasta onde iremos salvar o arquivo. Ao lado de “Examinar”, temos uma setinha, na qual clicamos para abrir um menu “drop-down”, onde podemos escolher o caminho e a pasta para salvar o arquivo.

Caso a pasta desejada não apareça, clique na pasta imediatamente superior a ela e depois dê um duplo-clique para abri-la, e assim por diante. Agora, clique no botão Save as (salvar como), ou vá no menu File → Save as:

Em tipo, escolha PNG e salvar.

Repare que o irfanview, tem algumas opções de compressão para este formato e se o plugin PNGout estiver instalado, há ainda mais opções para reduzir (ou aumentar) o tamanho (em bytes) e a qualidade da imagem.

No inkscape, o processo pode ser feito de forma semelhante: abre-se o arquivo e usa-se a opção salvar como:

 Primeiro, achamos o caminho para a pasta onde está o arquivo, clicando em “Examinar” - ou à esquerda, nos lugares sugeridos (Área de trabalho, Computador etc):

Duplo-clique para abrir a pasta:

 Escolhemos o arquivo e clicamos em abrir:

E depois File → Save as:

 Em tipo, escolha PNG; dê um “Nome” ao seu arquivo e clique em Salvar:

 Ou vá em File → Export Bitmap:

Clique em “Drawing”, se ainda não estiver selecionado. Vá em “Browse”:

 Dê um nome ao arquivo e clique em Salvar:

 Clique em Export:

 No IrfanView, há várias opções de formato bitmap para convertermos um tipo de arquivo em outro. Por exemplo: podemos salvar um arquivo .jpeg como .gif, .png, .tif, .pcx, .tga, etc. Já no Inkscape, há apenas um formato bitmap de saída suportado: .png (provavelmente por ser um formato livre e, portanto, não sujeito à cobrança de direitos autorais). Também não há opções de compressão disponíveis para controlar o tamanho do arquivo .png no Inkscape. Mas se isso não for problema pra você, o Inkscape pode ser uma mão na roda para manipular imagens, apesar de sua função primordial ser a criação de arquivos .SVG (Scalable Vector Graphics).

No IrfanView, para redimensionar uma imagem, vamos ao menu Image → Resize/Resample ou apertamos Ctrl+R:

 Devemos escolher, então, o novo tamanho em pixels, cm ou polegadas (inches). Repare que se a opção “Preserve aspect ratio” (manter proporção) estiver marcada, basta definir o primeiro campo para que a outra medida seja redefinida automaticamente. É conveniente deixar marcado “Apply sharpen...” (aplicar clareamento), pois algumas imagens ficam meio “escuras” ao serem redimensionadas. Em DPI (dots per inch), definimos quantos pontos por polegada terá a imagem e em “Size method”, o método de redimensionamento. Se você for aumentar o tamanho da imagem, escolha o melhor, de preferência (geralmente mais lento). Tenha em mente que diminuir o tamanho de uma imagem não acarreta prejuízos visíveis a ela. Por exemplo, ao diminuir uma imagem de 1024x768 px para 800x600 px, não há perdas visíveis na qualidade. Já se você aumentar uma imagem de 800x600 pixels para 1600x1200, certamente haverá uma perda visível na qualidade, pois ainda não existe uma mágica para aumentar uma imagem do tipo bitmap sem perda de qualidade. Por isso, escolha um bom algoritmo de reamostragem (normalmente o mais lento):

Para aumentarmos ou diminuirmos uma imagem no Inkscape, basta clicarmos nela e arrastar as setas bidirecionais até chegarmos no tamanho apropriado.

Depois, podemos usar a opção Exportar Bitmap, ou temos que fazer alguns ajustes para usar o Salvar como: Vá em Document Properties:

 Ajuste a página à seleção (Fit page to selection):

 Repare que as medidas mudaram. Feche a janela. Agora, use o Salvar como.

 No IrfanView, para recortarmos um pedaço da imagem, devemos selecionar com o mouse a região que não queremos cortar e apertar Ctrl+Y. Isso excluirá toda a região em volta do quadrado de seleção:

No Inkscape, exportamos o bitmap, excluindo algumas medidas, que devemos calcular anteriormente com a ajuda da régua e do grid (bem mais complicado – bem que o Inkscape podia ter uma função de corte para quebrar o nosso galho...).

 Quanto aos novos efeitos da interface gráfica do Windows 7, podemos citar o efeito vítreo presente na barra de progresso dos aplicativos, como nessa screenshot do Internet Explorer:

 No próprio botão do Menu Iniciar podemos ver esse efeito também no botão do Menu Iniciar. Repare no efeito que acontece ao colocarmos o mouse em cima desse botão:

Na barra de título dos programas e na própria barra de tarefas, podemos ver mais efeitos:

 Com um grande botão concentrando as opções do antigo menu Arquivo, e abas abrigando comandos e funções reorganizadas, o Office 2007 tem inspirado outros programas no quesito interface, inclusive programas acostumados a inovações, como o Opera, que colocou um botão com seu logotipo, no lugar do menu Arquivo: