Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3
-
Upload
cristofer-sousa -
Category
Education
-
view
444 -
download
1
description
Transcript of Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3
![Page 1: Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3](https://reader035.fdocuments.net/reader035/viewer/2022081506/55901fe11a28ab5e318b4607/html5/thumbnails/1.jpg)
@cristofersousa
Workshop
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge">
<title> </title>Fundamentos de
Interfaces e Desenvolvimento Web
#web25@nos
![Page 2: Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3](https://reader035.fdocuments.net/reader035/viewer/2022081506/55901fe11a28ab5e318b4607/html5/thumbnails/2.jpg)
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 CarlosSkills {Desenvolvimento de E-commerce | UX & UI - User Interface}
![Page 3: Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3](https://reader035.fdocuments.net/reader035/viewer/2022081506/55901fe11a28ab5e318b4607/html5/thumbnails/3.jpg)
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 - CSS3O 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
![Page 4: Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3](https://reader035.fdocuments.net/reader035/viewer/2022081506/55901fe11a28ab5e318b4607/html5/thumbnails/4.jpg)
Front-end e sua complexidade?
@cristofersousa
.tags {!important;}
![Page 5: Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3](https://reader035.fdocuments.net/reader035/viewer/2022081506/55901fe11a28ab5e318b4607/html5/thumbnails/5.jpg)
Front-end e sua complexidade!
E-commerceSocial-MediaFilmesMúsicasNotí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
![Page 6: Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3](https://reader035.fdocuments.net/reader035/viewer/2022081506/55901fe11a28ab5e318b4607/html5/thumbnails/6.jpg)
O que são elementos semânticos?
@cristofersousa
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
![Page 7: Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3](https://reader035.fdocuments.net/reader035/viewer/2022081506/55901fe11a28ab5e318b4607/html5/thumbnails/7.jpg)
<Header><Nav><Section><Article><Aside><Figure><Figcaption><Footer><detalhes><Summary><branding><Time>
Elementos semânticos em HTML5
![Page 8: Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3](https://reader035.fdocuments.net/reader035/viewer/2022081506/55901fe11a28ab5e318b4607/html5/thumbnails/8.jpg)
@cristofersousa
<nav><a href="#">HTML</a> <a href="#">CSS</a> <a href="#">JavaScript</a> <a href="#">jQuery</a>
</nav>
Criando menu semanticamente com HTML5
![Page 9: Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3](https://reader035.fdocuments.net/reader035/viewer/2022081506/55901fe11a28ab5e318b4607/html5/thumbnails/9.jpg)
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
![Page 10: Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3](https://reader035.fdocuments.net/reader035/viewer/2022081506/55901fe11a28ab5e318b4607/html5/thumbnails/10.jpg)
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.
![Page 11: Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3](https://reader035.fdocuments.net/reader035/viewer/2022081506/55901fe11a28ab5e318b4607/html5/thumbnails/11.jpg)
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>
![Page 12: Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3](https://reader035.fdocuments.net/reader035/viewer/2022081506/55901fe11a28ab5e318b4607/html5/thumbnails/12.jpg)
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
![Page 13: Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3](https://reader035.fdocuments.net/reader035/viewer/2022081506/55901fe11a28ab5e318b4607/html5/thumbnails/13.jpg)
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
![Page 14: Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3](https://reader035.fdocuments.net/reader035/viewer/2022081506/55901fe11a28ab5e318b4607/html5/thumbnails/14.jpg)
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 fundoh1{
background-image: url(../img/minhaimagem.png);}
@cristofersousa
![Page 15: Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3](https://reader035.fdocuments.net/reader035/viewer/2022081506/55901fe11a28ab5e318b4607/html5/thumbnails/15.jpg)
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
![Page 16: Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3](https://reader035.fdocuments.net/reader035/viewer/2022081506/55901fe11a28ab5e318b4607/html5/thumbnails/16.jpg)
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
![Page 17: Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3](https://reader035.fdocuments.net/reader035/viewer/2022081506/55901fe11a28ab5e318b4607/html5/thumbnails/17.jpg)
Listas - definidas
Listas - ordenada<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>
<dl> <dt>HTML</dt> <dd>HTML é a linguagem de marcação de textos utilizadas 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
![Page 18: Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3](https://reader035.fdocuments.net/reader035/viewer/2022081506/55901fe11a28ab5e318b4607/html5/thumbnails/18.jpg)
Listas - definidasAlguns 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
![Page 19: Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3](https://reader035.fdocuments.net/reader035/viewer/2022081506/55901fe11a28ab5e318b4607/html5/thumbnails/19.jpg)
Espaçamento e MargemUtilizamos a propriedade padding para espaçamentoe 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-top2. padding- right3. padding-bottom4. padding-left Essa ordem é importante para entender como funciona a shorthand property do padding.
@cristofersousa
![Page 20: Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3](https://reader035.fdocuments.net/reader035/viewer/2022081506/55901fe11a28ab5e318b4607/html5/thumbnails/20.jpg)
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 5px;} /* 10px top, 20px right, 15px left e 5px bottom*/
p{padding: 10px 20px 15px;} /*10 px top, 20px right 20px left 15 px bottom*/
@cristofersousa
![Page 21: Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3](https://reader035.fdocuments.net/reader035/viewer/2022081506/55901fe11a28ab5e318b4607/html5/thumbnails/21.jpg)
Margin - CSSA 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 shorthandproperty padding.
1. margin-top2. margin- right3. margin-bottom4. margin-left
@cristofersousa
p{margin: 0 auto;} /*no margin top & bottom*/
*browser define uma margem igual para ambos os lados de acordo com o espaço
![Page 22: Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3](https://reader035.fdocuments.net/reader035/viewer/2022081506/55901fe11a28ab5e318b4607/html5/thumbnails/22.jpg)
Box Model - CSSQuando alteramos as propriedades de elementos dentro de uma página, precisamosestar 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 dentropra 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).
![Page 23: Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3](https://reader035.fdocuments.net/reader035/viewer/2022081506/55901fe11a28ab5e318b4607/html5/thumbnails/23.jpg)
Dúvidas até aqui??
![Page 24: Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3](https://reader035.fdocuments.net/reader035/viewer/2022081506/55901fe11a28ab5e318b4607/html5/thumbnails/24.jpg)
@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>
<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>
Outro uso para a tag âncora é a demarçacão de destinos para linksDentro do próprio documento, o que chamamos de bookmark.
<a name=“info”> Mais informações sobre o assunto:</a><p>Informações</p>
![Page 25: Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3](https://reader035.fdocuments.net/reader035/viewer/2022081506/55901fe11a28ab5e318b4607/html5/thumbnails/25.jpg)
@cristofersousa
Elementos Estruturais - HTML <div>
Podemos usar em nossos documentos a organizaçãos dos elementos através datag <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>
![Page 26: Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3](https://reader035.fdocuments.net/reader035/viewer/2022081506/55901fe11a28ab5e318b4607/html5/thumbnails/26.jpg)
@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.
![Page 27: Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3](https://reader035.fdocuments.net/reader035/viewer/2022081506/55901fe11a28ab5e318b4607/html5/thumbnails/27.jpg)
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;}
![Page 28: Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3](https://reader035.fdocuments.net/reader035/viewer/2022081506/55901fe11a28ab5e318b4607/html5/thumbnails/28.jpg)
@cristofersousa
Flutuando elementos Float - CSS
#myfigure img {float:right;margin:0 0 1px 2px;
}
“O caos é a rima do inaudito.”- Zack de la Rocha
![Page 29: Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3](https://reader035.fdocuments.net/reader035/viewer/2022081506/55901fe11a28ab5e318b4607/html5/thumbnails/29.jpg)
@cristofersousa
CSS ResetHTML5 BoilerplateYUi3 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
![Page 30: Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3](https://reader035.fdocuments.net/reader035/viewer/2022081506/55901fe11a28ab5e318b4607/html5/thumbnails/30.jpg)
@cristofersousa
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:
ul li{ display: inline; margin-left:20px;}
![Page 31: Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3](https://reader035.fdocuments.net/reader035/viewer/2022081506/55901fe11a28ab5e318b4607/html5/thumbnails/31.jpg)
@cristofersousa
CSS Avançado - Position: Static, Relative
A propriedade position determina qual é o modo de posicionamento de um elemento.
Static /*default – fica no mesmo lugar*/
Relative /* podemos passar coordenadas*/
.logotipo{position:relative;top:20px;left:50px;
}
![Page 32: Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3](https://reader035.fdocuments.net/reader035/viewer/2022081506/55901fe11a28ab5e318b4607/html5/thumbnails/32.jpg)
@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>
![Page 33: Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3](https://reader035.fdocuments.net/reader035/viewer/2022081506/55901fe11a28ab5e318b4607/html5/thumbnails/33.jpg)
@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>
![Page 34: Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3](https://reader035.fdocuments.net/reader035/viewer/2022081506/55901fe11a28ab5e318b4607/html5/thumbnails/34.jpg)
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:
![Page 35: Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3](https://reader035.fdocuments.net/reader035/viewer/2022081506/55901fe11a28ab5e318b4607/html5/thumbnails/35.jpg)
@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.
![Page 36: Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3](https://reader035.fdocuments.net/reader035/viewer/2022081506/55901fe11a28ab5e318b4607/html5/thumbnails/36.jpg)
@cristofersousa
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.
<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>
![Page 37: Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3](https://reader035.fdocuments.net/reader035/viewer/2022081506/55901fe11a28ab5e318b4607/html5/thumbnails/37.jpg)
@cristofersousa
Codando – Example!
![Page 38: Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3](https://reader035.fdocuments.net/reader035/viewer/2022081506/55901fe11a28ab5e318b4607/html5/thumbnails/38.jpg)
@cristofersousa
Answers?Dúvidas? ${“.p”}.append("<strong>Help</strong>”);
@cristofersousa
![Page 39: Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3](https://reader035.fdocuments.net/reader035/viewer/2022081506/55901fe11a28ab5e318b4607/html5/thumbnails/39.jpg)
@cristofersousa
Tabelas
![Page 40: Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3](https://reader035.fdocuments.net/reader035/viewer/2022081506/55901fe11a28ab5e318b4607/html5/thumbnails/40.jpg)
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)
![Page 41: Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3](https://reader035.fdocuments.net/reader035/viewer/2022081506/55901fe11a28ab5e318b4607/html5/thumbnails/41.jpg)
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)
![Page 42: Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3](https://reader035.fdocuments.net/reader035/viewer/2022081506/55901fe11a28ab5e318b4607/html5/thumbnails/42.jpg)
Modelos de IHC e prototipação
(Brown, 1996; da Silva et al., 2005)
![Page 43: Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3](https://reader035.fdocuments.net/reader035/viewer/2022081506/55901fe11a28ab5e318b4607/html5/thumbnails/43.jpg)
Sketch
![Page 44: Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3](https://reader035.fdocuments.net/reader035/viewer/2022081506/55901fe11a28ab5e318b4607/html5/thumbnails/44.jpg)
Ferramentas de Prototipação
SketchFlow (Microsoft Blend) Mockinbird BalsamiqMockups Cacoo Mockflow - <http://www.mockflow.com/> Microsoft Office Visio OmniGraffle Axure PowerPoint HTML+CSS
![Page 45: Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3](https://reader035.fdocuments.net/reader035/viewer/2022081506/55901fe11a28ab5e318b4607/html5/thumbnails/45.jpg)
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.
![Page 46: Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3](https://reader035.fdocuments.net/reader035/viewer/2022081506/55901fe11a28ab5e318b4607/html5/thumbnails/46.jpg)
Obrigado </end>twitter @cristofersousawww
cristofersousa.com.br