3 - Interface do usuário

Prévia do material em texto

Aprendendo a Programar
Capítulo III
Interface do usuário 
O que é uma interface do usuário?
É o meio pelo qual o usuário pode se comunicar com uma máquina, um equipamento ou um computador. Ou seja, todos os pontos de contato entre o usuário e o equipamento. Em geral, são fáceis de compreender e de acionar, como no caso de nossa página web no capítulo anterior exibida na tela, e transmitindo a mensagem: "Olá Mundo!" 
Interfaces do usuário - Variedades
Interfaces alfanuméricas: só apresentam texto. Se, alguma vez, vocês viram computadores antigos, com certeza terão notado que era possível "falar" com o computador somente através de telas geralmente pretas, onde eram escritos comandos para ser executados pelo computador. Hoje, a maioria dos computadores continuam oferecendo a possibilidade de se comunicar com eles através desse tipo de interfaces.
Interfaces gráficas do usuário (GUI, graphic user interfaces): permitem a comunicação de maneira muito rápida e intuitiva, representando graficamente os elementos de controle e medição. As páginas web são um claro exemplo de GUI.
Interfaces tácteis: representam graficamente um "painel de controle" em uma tela sensível que permite interagir com o dedo, como se um controle físico fosse acionado . Principalmente, é usado em dispositivos móveis e tablets. 
Para entender as IU.
Quando estamos criando um aplicativo que interagirá com os usuários, ou com outros aplicativos, é preciso entender com quem vamos trabalhar e qual é a melhor forma de fazê-lo.
Sabemos que não é a mesma coisa interagir com pessoas de nossa idade, ou com nossos pais, ou com uma pessoa de outro país que não fala nossa língua. 
Sabemos, também, que criar uma interface para um jogo de Xbox não é a mesma coisa que para um PC. Os controles podem ser diferentes, e o que a gente procura em um jogo de console pode ser diferente do que procura em um jogo de PC ou em uma rede social. E as interfaces para um aplicativo para administrar uma empresa ou uma loja são diferentes também.
Para entender as IU.
O segredo é ir sempre passo a passo. Devemos aprender a parte técnica que veremos no curso e pesquisar, também, as melhores práticas para os diferentes tipos de aplicativos que construamos.
Por exemplo, se quisermos construir um sítio web, como o Olá Mundo que construímos. Mas queremos adicionar um pouco de cor e design. Vamos usar uma cor muito forte que, algum tempo depois, canse nossa vista? Ou é preferível construir um aplicativo com o qual podamos estar muito tempo sem nos cansar?
E o tamanho da fonte? Vamos escrever tudo com fonte bem pequena para que algumas pessoas não possam ler o que escrevemos, ou preferimos que elas se sintam confortáveis e compreendam o que quisemos transmitir? 
Não é difícil construir um aplicativo amigável e que todos desejem utilizar, mas precisamos aprender o que devemos e o que não devemos fazer. E isso leva tempo! 
HTML, o Rei do Mundo
Se você prestou atenção, falamos dos aplicativos desconectados, ou seja, os quais não precisam da Internet para funcionar.
Você se perguntará como posso fazer uma página web desconectada, se seu próprio nome indica que é um documento que é possível acessar através de uma rede. No entanto, como mostramos antes, nosso navegador é simplesmente um programa que, ao receber instruções em uma linguagem, as interpreta e as exibe na janela para nós. 
O que acontece se, em vez de informar um endereço em um servidor que está em alguma parte do mundo, informamos um endereço de um arquivo que está dentro de nosso próprio computador?
Isso é o que vamos fazer... 
Praticando
Vamos começar criando um novo arquivo, em algum lugar de nosso computador. Seu nome será index.html. Com a extensão HTML, informamos a nosso Sistema Operacional que o arquivo contém um tipo determinado de conteúdo (assim como o TXT contém texto, ou o DOC contém um arquivo de Word). Os arquivos HTML contêm instruções que podem ser reconhecidas e executadas por nosso navegador.
Depois de ter criado nosso arquivo, clicamos com o botão direito do mouse em Abrir com... e escolhemos algum editor de texto (escolha o que você quiser). 
Praticando
Digitamos o código a seguir:
<!DOCTYPE html>
<html>
 <head>
 <title>Ola Mundo</title>
 </head>
 <body>
 <h1>Ola Mundo</h1>
 </body>
</html>
 
Salvamos nosso arquivo e, agora, simplesmente clicamos duas vezes nele, e veremos como se abre em nosso navegador predeterminado.
HTML – Seções básicas
Ao escrever <!DOCTYPE html> indicamos ao navegador que todas as instruções que vai ler no documento pertencem à linguagem HTML.
O elemento <html> é o elemento principal de um documento HTML, a partir do qual começamos a trabalhar. Contém o documento inteiro, e somente o DOCTYPE está fora dele. Deve conter somente dois elementos: head e body.
O elemento <head> contém os “metadados” do documento. O que é um metadado? São informações relativas à página web, as quais o usuário nem sempre vê, e servem para propósitos diferentes. Por exemplo: o título (que pode ser visto no elemento <title>), o autor, o estilo, etc.
Temos também o elemento <body> para onde vão as instruções de HTML que serão vistas na janela que vocês visualizam. É o chamado corpo do documento.
Finalmente, temos um elemento que não é de estrutura, mas de formato propriamente dito. É o <h1>.
HTML – Como funciona?
HTML significa HyperText Markup Language, ou Linguagem de Marcação de Hipertexto. Uma linguagem de marcação é um sistema desenvolvido há algum tempo e que nos permite criar um documento ao qual podemos adicionar algum tipo de marcas que o diferenciem de um arquivo de texto. A ideia é que essas marcas nos permitam realizar diferentes anotações no documento e que, quem o leia, possa realizar diferentes ações, por exemplo, procurar uma parte determinada, adicionar estilos (negrito, cores, tipos de fontes, etc.). HTML, em particular, permite adicionar formato a nosso texto, para apresentar ao usuário uma interface visualmente rica.
Quem lê os arquivos HTML é o navegador do usuário. E dá forma à interface, a qual será exibida segundo o que indiquemos nos marcadores. Isso significa que, se indicarmos ao navegador, mediante linguagem HTML, que coloque um fundo vermelho, fontes brancas e uma tabela com informações diversas, o usuário simplesmente verá o texto formatado. 
Algumas instruções básicas
<html>: indica que está falando em HTML
<head>: inclui informações sobre a página web. Essas informações não são exibidas ao usuário
<title>: escreve o título da página no cabeçalho do navegador
<body>: é o conteúdo da página em si
<a>: enlaces
<p>: parágrafo
<h1>: cabeçalho de primeiro nível
<i>: itálico
<b>: negrito
<br/>: quebra de linha
<hr/>: linha horizontal
<ul>: lista não ordenada. Inserir vinhetas
<ol>: lista ordenada. Numera cada item
<li>: insere cada item das listas
<!-- -->: comentários. Permite escrever informações que não serão vistas pelo usuário
<img src=”comunidad.jpg" alt=”Comunidad IT" />, <img src="images/logo.png" />, <a href="http://www.html.net"> <img src="logo.png" /></a>
<div>: unidade de bloco que encapsula outros elementos de página e divide o documento HTML em seções. Elementos <div> são utilizados para agrupar os elementos HTML e aplicar estilos a esses elementos. 
Como adicionar estilos
O HTML permite estruturar a página e criar alguns formatos básicos sobre o texto, mas o mais importante do desenvolvimento de interfaces web é a criação de estilos mediante atributos diversos. Eles podem ser adicionados tanto dentro do HTML (embora não seja recomendável) quanto através de uma tecnologia chamada CSS.
Existe uma variedade de atributos que podem ser utilizados para definir estilos. 
Exemplos de estilos HTML
<body style="background-color:#ff0000;">: aqui definimos que a cor de fundo de tudo o que houver em minha página web seja #ff0000 (vermelho)
<p style="color:green;">: também posso definir que tudo o que houver em um parágrafo específico de texto seja de cor verde.
border="1” (em pixels): esse atributo permite adicionaruma borda a um elemento.
width="30%” (em pixels ou porcentagem): width define a largura de um elemento; nesse caso, para ser 30% da tela.
Align (esquerda, centro ou direita): alinhamento dos elementos à esquerda, direita ou no centro.
Valign (margem superior, centro ou margem inferior): alinhamento vertical
Colspan (é usado com a tag <td> para especificar quantas colunas estarão contidas em uma célula. Idem Rowspan para as filas, quando criamos tabelas)
<div id="subDiv1" name="subDiv1" title="Subdivision Div Element" style="color: #FF0000; border: 1px dotted black;">: nessa linha temos diversos atributos, como id, name ou title. Mas, em particular, tudo o que estiver no atributo Style nos permite adicionar estilos. 
CSS
Mas HTML não foi pensado originariamente para conter os estilos da interface, mas os conteúdos dela. Para resolver isso, a World Wide Web Consortium (W3C) criou o que chamamos CSS ou Cascade StyleSheet, que permite armazenar os estilos em um arquivo separado. Assim, posso aplicar uma folha de estilos CSS a todos meus arquivos HTML ao mesmo tempo e, assim, controlar como apresentarei minhas informações apertando em só um lugar. 
CSS
Basicamente, a forma de escrever uma regra CSS é assim:
 
h1
{
	color:blue;
	font-size:12px;
}
 
h1 seria o chamado "seletor", que indica a qual elemento aplicaremos o estilo. Nesse caso, seriam todos os h1 do documento. Depois, teremos uma lista de uma propriedade por linha. O que estiver à esquerda dos “:” seria o atributo, e o que estiver à direita, o valor do atributo. Então, o texto será azul e de 12 pixels de tamanho. 
CSS – Seletores x ID
Se, em vez de atribuir a cor azul e o tamanho 12px a todos os h1, quisermos fazê-lo só com um deles, podemos utilizar o chamado "seletor de id". No tag do HTML, deveríamos simplesmente inserir:
<h1 id=”miID”>…</h1>
 
E, depois, a classe no CSS seria:
#miID
{
	color:blue;
	font-size:12px;
}
O ID não deve ser repetido em dois elementos da mesma página. 
CSS – Seletores x Classe
Se, em vez de elementos específicos, ou de elementos iguais, queremos atribuir um estilo a um conjunto de elementos que podem ser diferentes, utilizamos o seletor de classe. Para isso, utilizaremos o atributo class no HTML.
<h1 class=”minhaClasse”>…</h1>
 
E, no CSS, definiremos o estilo para a classe "minhaClasse".
 
.minhaClasse
{
	color:green;
	font-size:15px;
}
CSS – Seletores x elementos x Classe
Também podemos definir elementos específicos que sejam alterados por uma classe; por exemplo:
 
p.minhaClasse
{
	color:green;
	font-size:15px;
}
Isso significa que somente os elementos do parágrafo p, com classe "minhaClasse", serão verdes e de 15px de altura.
Podem procurar um listado dos atributos que podem ser utilizados em CSS no link abaixo:
http://www.w3schools.com/cssref/ 
Estilos incluídos em HTML
Finalmente, para dizer em nosso arquivo HTML que vamos utilizar uma folha de estilos, adicionamos o link a seguir, no tag Head:
 
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>