Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3

Fundamentos de Interfaces
e Desenvolvimento Web
@cristofersousa
Workshop
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title> </title>
#web25@nos

Who?
@cristofersousa
<h1>Olá!</h1>
@cristofersousa | cristofersousa.com.br
Engineer Front-End
Cursando - Técnologo em Análise e Desenvolvimento de Sistemas – IFSP São Carlos
Skills {Desenvolvimento de E-commerce | UX & UI - User Interface}

Sumário
 MÓDULO 01
Apresentação
O que vamos aprender?
O que é HTML e sua evolução?
Por que precisamos aprender HTML?
 MÓDULO 02
Tags
HTML5, o que mudou?
Formatação antiga e a chegada do CSS
A relação com os navegadores
 MÓDULO 03
Estrutura básica de um documento HTML5
Cabeçalhos
Conteúdo texto
Caracteres especiais
Destaques em textos
Formatação de texto
Comentários
Linhas
 MÓDULO 04
Listas ordenadas
Listas não ordenadas
Inserindo subitens
Estrutura de um menu a partir de listas.
 MÓDULO 05
URL
Links / Href
Âncora
DIV
 MÓDULO 06
Tag IMG
Atributos e links
 MÓDULO 07
Tag form
Text
Password / Textarea / E-mail / Search / URL
Checkbox / Radio
Label / Select
File / Button
 MÓDULO 08
Melhores Práticas?
 MÓDULO 09
Tabelas, linhas e colunas
Mesclagem de células e personalização
 MÓDULO 10 - CSS3
O que é CSS e o que são Seletores?
Prioridade de propriedades
Quando usar elemento, classe ou id
 MÓDULO 11
Propriedade Font
Propriedade Text
Propriedade Margin
Propriedade Padding
Trabalhando com DIVs
Combinação de formatações
 MODULO 12
Propriedade Position
Propriedade Float e Clear
Criando Menu Com Listas Horizontal
Criando Menu Com Listas Vertical
Criando Menu Com Listas e Com Sub-menu
 MÓDULO 13
Tipos de layouts
Propriedade Overflow
Display e Visibility
 MÓDULO 14
Formatando campos do tipo input
Formatando campo Select
Formatando botões
Formatando fieldset e label
CSS Reset e Normalize
 MÓDULO 15
Extras
Conclusão

Front-end e sua complexidade?
.tags {!important;}
@cristofersousa

Front-end e sua complexidade!
E-commerce
Social-Media
Filmes
Músicas
Notícias
O HTML5 é a nova versão do
HTML4. Enquanto o WHATWG
define as regras de marcação que
usaremos no HTML5 e no XHTML,
eles também definem APIs que
formarão a base da arquitetura
web. Essas APIs são conhecidas
como DOM Level 0.
Um dos principais objetivos do
HTML5 é facilitar a manipulação do
elemento possibilitando o
desenvolvedor a modificar as
características dos objetos de
forma não intrusiva e de maneira
que seja transparente para o
usuário final

O que são elementos semânticos?
Um elemento semântico descreve
claramente o seu significado tanto para o
navegador eo desenvolvedor.
Exemplos de não-semânticas elementos:
<div> e <span> - Não diz nada sobre o seu
conteúdo.
Exemplos de semânticas elementos:
<form>, <table> e <img> - define
claramente o seu conteúdo
@cristofersousa

Elementos semânticos em HTML5
<Header>
<Nav>
<Section>
<Article>
<Aside>
<Figure>
<Figcaption>
<Footer>
<detalhes>
<Summary>
<branding>
<Time>

Criando menu semanticamente com HTML5
@cristofersousa
<nav>
<a href="#">HTML</a>
<a href="#">CSS</a>
<a href="#">JavaScript</a>
<a href="#">jQuery</a>
</nav>

Tag de conteúdo
Uma tag de conteudo serve para marcar um trecho de texto para
que ele obedeça uma instrução no momento em que for exibido,
por exemplo a tag de parágrafo.
<p> Este texto deve ser tratado pelo browser como um parágrafo </p>
Tag de recurso
Uma tag de recurso serve para indicar para o navegador o endereço
e as intruções para exibir um certo elemento, como por exemplo a
tag de imagem <img>
<img alt=“Tusca Chegando!” src=“../img/minhafoto.jpg”>
@cristofersousa

Estrutura de um página básica com HTML
Um documento HTML válido precisa
seguir obrigatoriamente a estrutura
Composta pelas tags:
 <html>
 <head>
 <body>
e o <!Doctype> ? DOCTYPE
NÃO é uma tag HTML, mas um Document Type
Definition (DTD), uma instrução que indica para
o navegador qual versão do HTML, ele deve
utilizar para renderizar a página, utilizaremos o
<!DOCTYPE html>, que indica para o
navegador a utilização do HTML5.

Elementos de Block e elemento inline
BLOCO : são aqueles que ocupam toda a largura do
documento, tanto antes quanto depois deles.
Ex: <h1>,<p>,<div>
Inline: são aqueles que ocupam somente o espaço
necessário para que seu próprio conteudo seja
exibido, permitindo que outros elementos em linha
possam ser renderizado na mesma linha.
Ex: <a>,<strong>, <small> <span>

CSS - Cascading Style Sheets “Folha de Estilo em Cascata”
CSS Inline
<p style=“color:red”; background-color:”blue; ”>
O contéudo dessa tag será na cor vemelho e o fundo será azul!
</p>
<style>
p {color: red;
background-color: yellow;
}
</style>
@cristofersousa

CSS – Chamando um Arquivo Externo
<link rel=“stylesheet” href=“../css/styles.css”>
Propriedades Tipográficas e Fontes
h1{font-family:serif;}
p{font-family:monospace;}
body{font-family: “Arial”, “Helvetica”, sans-serif”;}
@cristofersousa

CSS – Alinhamento e Decoração de Texto
p{text-align: right;}
p{
line-height: 3px; /*tamanho da altura de cada linha*/
letter-spacing: 3px; /*espaçamento de cada letra*/
word-spacing: 5px; /*espaçamento de cada palavra*/
text-indent: 30px; /*tamanho da margem da primeira linha do texto*/
}
CSS – Figura de fundo
h1{
background-image: url(../img/minhaimagem.png);
}
@cristofersousa

CSS – Bordas
body{
border-color: red;
border-style: solid;
border-width: 1px;
}
CSS – Removendo estilos de um elemento
p{
text-decoration: none;
border-style:none;
}
@cristofersousa

Imagens
<figure>
<img src=“../img/teste.jpg”>
<figcaption>Texto Maroto – R$199.99 </figcaption>
</figure>
Listas - Não ordenada
<ul>
<li>Primeiro item da lista </li>
<li> Segundo item da lista</li>
<ul>
<li>Primeiro item da lista aninhada </li>
<li>Segundo item da lista aninhada </li>
</ul>
<li> terceiro item da lista</li>
</ul>
@cristofersousa

Listas - definidas
Listas - ordenada
<dl>
<dt>HTML</dt>
<dd>HTML é a linguagem de marcação de textos utilizadas
<ol>
<li>Primeiro item da lista </li>
<li>Segundo item da lista</li>
<li>Terceiro item da lista</li>
<li>Quarto item da lista</li>
</ol>
para exibir textos como páginas nas Internet.
</dt>Browser</dt>
<dd>Browser é o software que requisita um documento
HTML através do protocolo HTTP e exibe seu conteudo
em uma janela.
</dd>
</dl>
@cristofersousa

Listas - definidas
Alguns desenvolvedores defendem o uso
da lista de definição para a exibição de uma
determinada informação, por exemplo, um
contato.
<dl>
<dt>Nome</dt>
<dd>Instituto Federal de Educação, Ciência e Tecnologia</dd>
</dt>Endereço</dt>
<dd>Rod. W. Luiz, km 247 – Vila Marina</dd>
</dt>Cidade</dt>
<dd>São Carlos</dd>
</dl>
@cristofersousa

Espaçamento e Margem
Utilizamos a propriedade
padding para espaçamento
e margin para margem.
Padding é utilizada para definir uma margem interna em alguns elementos (por margem
interna queremos dizer a distância entre o limite do elemento, sua borda, e seu respectivo
conteúdo) e tem as subpropriedades listadas como:
1. padding-top
2. padding- right
3. padding-bottom
4. padding-left
Essa ordem é importante para entender como funciona a shorthand property do padding.
@cristofersousa

Espaçamento e Margem
p{padding: 10px;} /*mesma medida em todas as direções*/
p{padding: 10px 15px;} /*10px top e 15px bottom && 10px right e 15px left*/
p{padding: 10px 20px 15px;} /*10 px top, 20px right 20px left 15 px bottom*/
p{padding: 10px 20px 15px 5px;} /* 10px top, 20px right, 15px left e 5px bottom*/
@cristofersousa

Margin - CSS
A propriedade margin é bem parecida com a propriedade padding,
exceto que ela adiciona espaço após o limite do elemento, ou seja,
é um espaçamento além do elemento em si. Temos a shorthand
property margin que se comporta da mesma maneira que a shorthand
property padding.
1. margin-top
2. margin- right
3. margin-bottom
4. margin-left
p{margin: 0 auto;} /*no margin top & bottom*/
*browser define uma margem igual para
ambos os lados de acordo com o espaço
@cristofersousa

Box Model - CSS
Quando alteramos as propriedades de elementos dentro de uma página, precisamos
estar cientes de como essas alterações se comportarão na presença de outros
elementos. Uma forma de entender o impacto causado pela mudança é pensar no
box model ou modelo em caixa.
@cristofersousa
Essas áreas se desenvolvem de dentro
pra fora, na ordem listada abaixo:
1. Content (aquilo que será exibido);
2. Padding (distância entre a borda e o conteudo);
3. Border (quatro linhas que envolvem a caixa (box);
4. Margin (distância que separa um box de outro).

@cristofersousa
Links âncoras - HTML <a href>
<p>Visite nosso site no
<a href=“http://www.meusite.com.br”
target=“_blank”
title=“Site do IFSP”>
IFSP
</a>
</p>
Outro uso para a tag âncora é a demarçacão de destinos para links
Dentro do próprio documento, o que chamamos de bookmark.
<p> Mais informações<a href=#info”>aqui</a>.</p>
<p>Conteudo da página.....</p>
<p> Mais informações<a href=#info”>aqui</a>.</p>
<a name=“info”> Mais informações sobre o assunto:</a>
<p>Informações</p>

@cristofersousa
Elementos Estruturais - HTML <div>
Podemos usar em nossos
documentos a organizaçãos
dos elementos através da
tag <div> que é do tipo block ou
<span> que é do tipo inline!
<div>
<h1>Title </h1>
<ul>
<li> Capitulo I</li>
<li> Capitulo II</li>
</ul>
</div>
<div>
<p>Aqui vai o artigo do primeiro capítulo.</p>
</div>

@cristofersousa
Elementos Estruturais - HTML <span>
Essa tag por padrão não interfere na
renderização do texto, ela somente aplica um
atributo naquele trecho, um atributo qualquer
dentre os atributos aceitos pela tag!
<p>
Dentro de um texto, posso demarcar
<span style=“color:blue;”>qualquer trecho</span>
</p>
A tag <span> é util quando queremos adicionar
um atributo a um trecho qualquer de texto sem
interferir na estrutura organizacional do
documento.

Seletores de #ID + Filho e .Classe - CSS
#cabecalho{
color:white;
text-align:center;
}
#cabecalho img{
margin-right:35px;
vertical-align:middle;
width: 94px;
}
.cabecalho{
color:white;
text-align:center;
}
.cabecalho p{
margin-right:35px;
vertical-align:middle;
width: 94px;
}

Flutuando elementos Float - CSS
@cristofersousa
#myfigure img {
float:right;
margin:0 0 1px 2px;
}
“O caos é a rima do inaudito.”
- Zack de la Rocha

@cristofersousa
CSS Reset
HTML5 Boilerplate
YUi3 CSS Reset
Eric Meyer - CSS Reset
<http://meyerweb.com/eric/tools/css/reset>
Referenciando o arquivo no nosso head.
<link rel=“stylesheet” href=“css/reset.css”>
CSS Avançado

CSS Avançado - Block vs Inline
O elemento <li> de uma <ul> por
padrão assume o valor block para
sua propriedade display.
Se quisermos os elementos na
horizontal, basta alterarmos a
propriedade display da <li> para
inline:
@cristofersousa
ul li{
display: inline;
margin-left:20px;
}

CSS Avançado - Position: Static, Relative
A propriedade position determina
qual é o modo de posicionamento
de um elemento.
@cristofersousa
Static /*default – fica no mesmo lugar*/
Relative /* podemos passar coordenadas*/
.logotipo{
position:relative;
top:20px;
left:50px;
}

@cristofersousa
CSS Avançado - Absolute
/*pega como referencia o elemento pai */
.quadrado{background: green;
height: 200px;
width:200px;
}
.absoluto {
position: absolute;
top:20px;
right:20px;
}
<div class=“quadrado”></div>
<div class=“quadrado absoluto”></div>

@cristofersousa
CSS Avançado - Fixed
/*pega como referencia a porção visivel no documento
do navegador, e mantem essa posição inclusive
quando há rolagem na tela. É uma propriedade útil
para avisos importantes que devem ser visíveis com
certeza. */
.quadrado{background: green;
height: 200px;
width:200px;
}
.absoluto {
position: absolute;
top:20px;
right:20px;
}
<div class=“quadrado”></div>
<div class=“quadrado absoluto”></div>

Função: Capturar os dados do usuário e submetê-lo
a algum serviço da internet.
Formulários HTML são usados para transmitir dados a um servidor.
Um formulário HTML pode conter elementos de entrada, como
campos de texto, caixas de seleção, botões de rádio, apresentar
botões e mais.
Um formulário também pode conter listas de seleção, textarea,
fieldset, legenda, e elementos de rotulagem.
A tag <form> é usada para criar um formulário HTML:

@cristofersousa
O que é HTTP?
O Hypertext Transfer Protocol (HTTP) é projetado para permitir a
comunicação entre clientes e servidores.
HTTP funciona como um protocolo de solicitação-resposta entre
um cliente e servidor.
Um navegador da Web pode ser o cliente, e um aplicativo em um
computador que hospeda um site pode ser o servidor.

Dois métodos comumente utilizados para a resposta do pedido entre
um cliente e servidor são: GET e POST.
GET - os dados pedidos de um recurso especificado.
POST - os dados se submete a ser processado para um recurso
especificado.
@cristofersousa
<form action="demo_form.asp" method="get">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="Submit">
</form>

Codando – Example!
@cristofersousa

Answers?Dúvidas?
${“.p”}.append("<strong>Help</strong>”);
@cristofersousa
@cristofersousa

PROTOTIPAÇÃO
• Modelo de Processo
• Projeto rápido da interface e das funcionalidades
• Concepção de fragmentos do sistema
• Artefato construído iterativamente
• Engenharia de Software
• Representação dos requisitos
• Interação Humano-Computador
• Modelo de Interação entre usuário final e sistema
Foco: avaliar resultados obtidos com o protótipo
(Brown, 1996; Pressman, 2007; Spinelli; Rei, 2011)

Por que prototipar interfaces?
A principal motivação para a construção de
protótipos é avaliar interfaces com o usuário de
forma a diminuir a carga de trabalho cognitivo,
aumentar a facilidade de uso e auxiliar o usuário
a realizar tarefas que resultam na realização de
seus objetivos.
(Pagani,Talita 2014)

Modelos de IHC e prototipação
(Brown, 1996; da Silva et al., 2005)

Ferramentas de Prototipação
 SketchFlow (Microsoft Blend)
 Mockinbird
 BalsamiqMockups
 Cacoo
 Mockflow - <http://www.mockflow.com/>
 Microsoft Office Visio
 OmniGraffle
 Axure
 PowerPoint
 HTML+CSS

Atividade
 Prototipar a aplicação do “Desafio Condlink-Petiko”
 Depois de definida a aplicação, cada grupo irá definir a funcionalidade que
deseja prototipar
 Grupo deve debater o cenário de uso e pensar nas características do
produto e nas necessidades do usuário antes de desenhar
 Depois da criação de cada protótipo, aplicar teste com moderação:
 Elaborar o roteiro de teste;
 Cada grupo deve escolher quem será o moderador, o usuário, o
observador e o computador;
 O usuário de cada grupo irá para outro grupo ser o testador.

Obrigado
</end>
twitter @cristofersousa
www cristofersousa.com.br

Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3

Mais conteúdo relacionado

Mais procurados (19)

Semelhante a Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3 (20)

Último (20)

Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3

Notas do Editor