Construindo interfaces intuitivas (Parte 2)

Professor Marcos DevanerConstruindo interfaces intuitivasMinicurso

Tópicos abordados

1. Introdução ao HTML2. Construindo Layout3. Introdução ao CSS4. Formulários HTML5. Atividade Prática

Tecnologias utilizadas

HTML: HTML (abreviação para a expressão inglesa Hypertext Markup Language, que significa Linguagem de Marcação de Hipertexto) é uma linguagem de marcação utilizada na construção de páginas na Web. Documentos HTML podem ser interpretados por navegadores.

CSS: Cascading Style Sheets (CSS) é uma linguagem de folhas de estilo utilizada para definir a apresentação de documentos escritos em uma linguagem de marcação, como HTML ou XML. O seu principal benefício é a separação entre o formato e o conteúdo de um documento.

XHTMLO XHTML, ou eXtensible Hypertext Markup Language, é uma reformulação da linguagem de marcação HTML, baseada em

XML. Combina as tags de marcação HTML com regras da XML.

Estrutura básicaElemento raiz

Metadados do documento

Um documento HTML válido precisa seguir obrigatoriamente a estrutura composta pelas tags <html>, <head> e <body> e a instrução <!DOCTYPE>. Vejamos cada uma delas:

A tag <body> contém o corpo do nosso documento, que é exibido pelo navegador em sua janela. A tag <head> contém informações sobre nosso documento que são de interesse somente do navegador, e não dos visitantes do nosso site. Podemos configurar qual codificação queremos utilizar em nosso documento por meio da configuração de charset na tag <meta>. Um dos valores mais comuns usados hoje em dia é o UTF-8, também chamado de Unicode.

Introdução

DOCTYPE

O DOCTYPE não é uma tag HTML, mas uma instrução especial. Ela indica para o navegador qual versão do HTML deve ser utilizada para renderizar a página. Utilizaremos <!DOCTYPE html>, que indica para o navegador a utilização da versão mais recente do HTML - a versão 5, atualmente.

Declaração DOCTYPE simples:

<! DOCTYPE html>

Formatação Básica

Imagens

A tag <img> define uma imagem em uma página HTML e necessita de dois atributos preenchidos: src e alt. O primeiro aponta para o local da imagem e o segundo, um texto alternativo para a imagem caso essa não possa ser carregada ou visualizada.

O HTML 5 introduziu duas novas tags específicas para imagem: <figure> e <figcaption>. A tag <figure> define uma imagem com a conhecida tag <img>. Além disso, permite adicionar uma legenda para a imagem por meio da tag <figcaption>.

Tabelas

• Os cabeçalhos são definidas com as tags <th></th>

• Os browsers geralmente exibem essa informação em negrito e centralizada.

Exemplo:

Listas Ordenadas

• Listas: Exibem os resultados na forma ordenada

Tags relacionadas

Tipos possíveis: Sem definir nenhum tipo - Númeroa – Letras MinúsculasA – Letras MaiúsculasI - Algarismos romanos

Listas não ordenadas A tag <ul> foi obsoleta no HTML4 e não

é suportada no html5. É preciso utilizar o atributo style para exibir corretamente:

Tags relacionadas

Tipos possíveis: disc – Círculoscircle – Círculo vazadosquare – Quadrado

Um hiperlink é um texto ou uma imagem que você pode clicar , e saltar para outro documento. Em html os hiperlinks são definidos pela tag <a>

Hiperlinks

As tags DIV são muito utilizadas para construir o layout do site em conjunto com o CSS. Antes era utilizado as tags <table> para a definição do layout, mas como a utilização de tabelas pode deixar o layout bem complexo, passou-se a utilizar as tags div. Esse padrão é conhecido como tableless.

DIV

Criando layout com BootstrapBootstrap includi um sistema de grid fluido responsivo, mobile

first que balança apropriadamente até 12 colunas como dispositivo ou viewport de tamanho aumentado. Ele inclui classes

predefinidas para opções de layout fácil.

Sistema de grid

Coloque colunas de grid em algum .row e elas dentro de um container:<div class="container-fluid"> <div class="row"> ... </div> </div>

Adaptando um Layout

1. Copie o código HTML do endereço abaixo e cole no seu editor HTML:

http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_default&stacked=h

2. Altere o texto do título conforme proposto nos protótipos criados3. Inclua uma imagem em cada coluna

4. Altere a comprimento e largura da imagem para se adequar as proporções.5. Inclua mais uma linha para o rodapé

O uso de estilos

Vinculação de folhas de estilo

As folhas de estilo podem ser vinculadas a um documento de três maneiras distintas:

1. Importadas ou lincadas;2. Incorporadas;3. Inline.

Cascading Style Sheets (CSS) é uma linguagem de folhas de estilo utilizada para definir a

apresentação de documentos escritos em uma linguagem de marcação, como HTML ou XML. O seu principal benefício é a separação entre o formato e o conteúdo de um documento.

Folha de estilo externa

Uma folha de estilo é dita externa, quando as regras CSS estão declaradas em um documento a parte do documento HTML. A folha de estilo é um arquivo separado do arquivo html e que tem a extensão .css

Quando Utilizar?Aplicada a várias páginasDesign padrão de páginas

Veja como aplicar:<head> <link rel="stylesheet" type="text/css" href=“nomedoarquivo.css"></head>

Incorporada ou interna

Uma folha de estilo é dita incorporada ou interna, quando as regras CSS estão declaradas no próprio documento HTML.

Quando Utilizar? ideal para ser aplicada a uma

única página. Com uma folha de estilo incorporada ou interna, você pode mudar a aparência de somente um documento, aquele onde a folha de estilo esta incorporada.

Veja como aplicar

Folha de estilo inline

Aqui um parágrafo de cor preta e com 5px nas 4 margens.

Quando Utilizar? Use este método excepcionalmente, como quando quiser

aplicar um estilo a uma única ocorrência de um elemento.

Uma folha de estilo é dita inline, quando as regras CSS estão declaradas dentro da tag do elemento HTML.

Exemplo Prático

1) Crie um arquivo CSS com nome “meucss” com as seguintes propriedades globais:

Exemplo Prático

2) Crie um arquivo HTML e chame o arquivo CSS:

Formulários HTML

Os formulários em HTML são utilizados para a coleta de dados do usuário, que após podem ser manipulados com a utilização de outras linguagens como Java. Um exemplo muito comum de um formulário em HTML é o formulário de cadastro de usuários de e-mail, cujo mesmo possui campos para nome, sobrenome, data de nascimento e etc.

O fieldset é utilizado para agrupar componentes

Fieldset

O fieldset é utilizado para agrupar componentes

Campos de texto

Atributos:size : define o tamanho do campomaxlength: define a quantidade de caracteres aceitavalue: atribui um valor padrão para ajudar o usuário a identificar o que deve ser preenchido.

Tipos de seleção

Atributos:value: valor definido quando o botão for selecionado (valor que será cadastrado em um banco de dados)checked: selecionado por padrão

value: valor definido quando o botão for selecionado (valor que será cadastrado em um banco de dados)selected: opção selecionado por default.

Botões

Elementos HTML 5

Tipos de entrada HTML 5

Você pode usar restrições utilizando os atributos:

Exemplo:• max="1979-12-31“• min="2000-01-02"

Tipos de entrada HTML 5

Atributos HTML 5

O

O autofocus atributo especifica que o campo de entrada deve receber automaticamente o foco quando a página é carregada.

Os height e width atributos especificar a altura ea largura de um <input type = "image"> elemento.

Um campo de entrada placeholder

Um campo de entrada necessário:

Tabela de atributos da HTML 5 : http://www.maujor.com/blog/pg_apoio/tabela-atributos-html5.html

FimObrigado!

Construindo interfaces intuitivas (Parte 2)

Education

Transcript of Construindo interfaces intuitivas (Parte 2)