fundamentos e desenvolvimento de interface web com html5 & css3

46
@cristofersous a Workshop OCTYPE html> ml> ad> ta charset="utf-8"> ta http-equiv="X-UA-Compatible" content="IE=edge"> <title> </title> Fundamentos de Interfaces e Desenvolvimento Web #web25@nos

Upload: cristofer-sousa

Post on 28-Jun-2015

443 views

Category:

Education


1 download

DESCRIPTION

Essa apresentação visa dar enfase para quem deseja conhecer HTML5, CSS3 e o conceito de prototipagem, a partir disso foi possivel fazer grupo de trabalhos para criação de desenvolvimento de interfaces para sistemas web.

TRANSCRIPT

Page 1: Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3

@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

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

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

Front-end e sua complexidade?

@cristofersousa

.tags {!important;}

Page 5: Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3

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

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

<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

@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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Dúvidas até aqui??

Page 24: Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3

@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

@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

@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

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

@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

@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

@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

@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

@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

@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

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

@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

@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

@cristofersousa

Codando – Example!

Page 38: Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3

@cristofersousa

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

@cristofersousa

Page 39: Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3

@cristofersousa

Tabelas

Page 40: Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3

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

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

Modelos de IHC e prototipação

(Brown, 1996; da Silva et al., 2005)

Page 43: Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3

Sketch

Page 44: Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3

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

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

Obrigado </end>twitter @cristofersousawww

cristofersousa.com.br