fundamentos e desenvolvimento de interface web com html5 & css3
Post on 28-Jun-2015
443 Views
Preview:
DESCRIPTION
TRANSCRIPT
@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
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}
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
Front-end e sua complexidade?
@cristofersousa
.tags {!important;}
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
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
<Header><Nav><Section><Article><Aside><Figure><Figcaption><Footer><detalhes><Summary><branding><Time>
Elementos semânticos em HTML5
@cristofersousa
<nav><a href="#">HTML</a> <a href="#">CSS</a> <a href="#">JavaScript</a> <a href="#">jQuery</a>
</nav>
Criando menu semanticamente com HTML5
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 fundoh1{
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<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
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
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
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
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
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).
Dúvidas até aqui??
@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>
@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>
@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;}
@cristofersousa
Flutuando elementos Float - CSS
#myfigure img {float:right;margin:0 0 1px 2px;
}
“O caos é a rima do inaudito.”- Zack de la Rocha
@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
@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;}
@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;
}
@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.
@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>
@cristofersousa
Codando – Example!
@cristofersousa
Answers?Dúvidas? ${“.p”}.append("<strong>Help</strong>”);
@cristofersousa
@cristofersousa
Tabelas
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)
Sketch
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 @cristofersousawww
cristofersousa.com.br
top related