Slide 1
Slide 1 text
ALÉM DO
QUE SE VÊ
práticas de html e css
@jcemer #16elw #soudev
versão final
Slide 2
Slide 2 text
http://jcemer.com
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
HISTÓRIA
desde onde tudo começou
Slide 5
Slide 5 text
1991
Slide 6
Slide 6 text
REINADO DO
CONTEÚDO
Criar um documento com base em um
determinado conteúdo com a devida
marcação e interligações com demais
documentos.
Slide 7
Slide 7 text
1995
Slide 8
Slide 8 text
DYNAMIC
HTML
Desde a validação de formulários até a criação
de interfaces ricas. Seu uso é para aprimorar a
usabilidade das páginas através da adição de
interatividade.
Slide 9
Slide 9 text
1996
Slide 10
Slide 10 text
1996
Slide 11
Slide 11 text
LIBERDADE
DE ESTILO
Atribuir diferente aparência ao conteúdo
através da declaração de fontes, cores,
margens, alturas, larguras e muito mais.
Slide 12
Slide 12 text
2014
Slide 13
Slide 13 text
HTML
conteúdo
CSS
estilo
JS
interatividade
Slide 14
Slide 14 text
REVISANDO
os limites de cada tecnologia
Slide 15
Slide 15 text
E-MAIL
SENHA
Slide 16
Slide 16 text
HTML AS AN
INTERNET
MEDIA TYPE
A especificação do HTML 2.0 já introduzia a
capacidade de interagir com representações
de recursos. Formulários tratam-se de
templates de dados.
HTML
Slide 17
Slide 17 text
var
element
=
document.createElement('div');
element.textContent
=
'Não
há
conteúdo';
!
document.body.innerHTML
=
'';
document.body.appendChild(element);
JS
Slide 18
Slide 18 text
DOCUMENT
OBJECT MODEL
A convenção de representação do documento
permite através de código JavaScript alterar
estrutura, estilo e conteúdo.
JAVASCRIPT
Slide 19
Slide 19 text
body
*
{
display:
none;
}
!
body::before
{
content:
'Não
há
conteúdo
nesta
página';
}
CSS
Slide 20
Slide 20 text
PSEUDO
ELEMENTS
Os pseudo elementos tornam possível
acrescentar conteúdo que não está presente
no documento.
CSS
Slide 21
Slide 21 text
HTML conteúdo
estilo
interatividade
acessibilidade
usabilidade
performance
CSS
JS
Slide 22
Slide 22 text
MOTIVAÇÃO
para que estamos aqui hoje
Slide 23
Slide 23 text
A aparência exige extrair o máximo das
folhas de estilo, é preciso aprender boas
técnicas. Conhecer a semântica dos
elementos desde os mais simples: links,
botões e labels é essencial para marcar
adequadamente o documento.
A palestra irá explorar os elementos e
atributos que reforçam a usabilidade e
acessibilidade sem deixar de lado os
meios de alcançar os fluxos,
comportamentos e visuais mais
Slide 24
Slide 24 text
botões e labels é essencial para marcar
adequadamente o documento.
A palestra irá explorar os elementos e
atributos que reforçam a usabilidade e
acessibilidade sem deixar de lado os
meios de alcançar os fluxos,
comportamentos e visuais mais
excêntricos possíveis. Sobretudo,
aprenderemos a consolidar aparência,
função e conteúdo. Serão muitas
técnicas reunidas com um único
objetivo: criar interfaces incríveis.
Slide 25
Slide 25 text
AGENDA
quais os tópicos abordados
Slide 26
Slide 26 text
Demarcando corretamente o conteúdo.
HTML
Ocultando e criando conteúdo.
CSS
ESTADOS
Utilizando html e css para gerenciar estados.
Slide 27
Slide 27 text
HTML
conceitos e exemplos
Slide 28
Slide 28 text
UTILIDADE E
SEMÂNTICA
Conhecer a semântica e utilidade dos
elementos mais primitivos ajuda a
compreender porque estes são
indispensáveis nos documentos.
Slide 29
Slide 29 text
https://twitter.com/arthurgouveia/status/464132963727589376
Slide 30
Slide 30 text
TÍTULOS,
LEGENDAS
E OUTROS
Slide 31
Slide 31 text
Representam a estrutura do documento
servindo como anúncio e rótulo.
São úteis para leitores de tela e
motores de busca.
Slide 32
Slide 32 text
TÍTULO DO
DOCUMENTO
Devem identificar o documento mesmo
quando fora de contexto como em
bookmarks e resultados de busca.
Slide 33
Slide 33 text
Mantém um histórico de navegação legível
para o usuário.
@askoth
TÍTULO DO
DOCUMENTO
Slide 34
Slide 34 text
CABEÇALHOS
,
, , ...
Servem como títulos de uma seção de
conteúdo. Os números indicam a
relação entre as seções.
Slide 35
Slide 35 text
TRILHA ESPECIAL DE
DESENVOLVIMENTO NO
ENCONTRO LOCAWEB
TRILHA PROMETE TRAZER
NOVIDADES E ASSUNTOS
PERTINENTES DA ÁREA
LOREM IPSUM IS SIMPLY DUMMY
TEXT OF THE PRINTING AND
TYPESETTING INDUSTRY. LOREM
IPSUM HAS BEEN THE INDUSTRY'S
STANDARD DUMMY TEXT EVER
SINCE THE 1500S, WHEN AN
UNKNOWN PRINTER TOOK A
GALLEY OF TYPE AND SCRAMBLED
IT TO MAKE A TYPE SPECIMEN
BOOK. IT HAS SURVIVED NOT ONLY
FIVE CENTURIES, BUT ALSO THE
LEAP INTO ELECTRONIC
Slide 36
Slide 36 text
Trilha especial de [...]
Trilha promete trazer novidades [...]
HTML X Não se trata de um cabeçalho para uma nova seçãoSlide 37
Slide 37 text
Trilha especial de [...]
Trilha promete trazer novidades [...]
HTML http://www.w3.org/html/wg/drafts/html/master/common-idioms.htmlSlide 38
Slide 38 text
FRAGMENT
IDENTIFIER
Nos endereços, o hash mark (#) indica o
início de um fragment identifier.
Sua função é apontar para a localização
identificada pelo atributo id (ou name).
CONCEITUANDO
Slide 39
Slide 39 text
CABEÇALHOS
,
, , ...
Títulos com atributo id servem como
endereço para seções específicas do
documento.
Slide 40
Slide 40 text
Palestrantes
HTMLSlide 41
Slide 41 text
http://jcemer.com/hipermidia-as-avessas-
passo-a-passo.html
EX: POST
Slide 43
Slide 43 text
RÓTULOS DE
FORMULÁRIO
Indicam o significado de porções de
formulários e campos.
Slide 44
Slide 44 text
Dados
pessoais
do
assinante
!
Dados
de
pagamento
Título agrupador dos
campos do
HTML
Slide 45
Slide 45 text
Nome
completo
Rótulo do campo
Placeholder não é
substituto de label
HTML
Slide 46
Slide 46 text
LEGENDAS
DE MÍDIA
Assim como as conhecemos dos jornais e
outras mídias impressas.
Usadas indicar ou ampliar o significado de
imagens, tabelas e outras mídias.
Slide 47
Slide 47 text
Slide 48
Slide 48 text
Slide 49
Slide 49 text
ÂNCORAS
E BOTÕES
Slide 50
Slide 50 text
ÂNCORAS
São as âncoras que possibilitam ao usuário
navegar por um documento ou acessar outro
documento.
Slide 51
Slide 51 text
Slide 53
Slide 53 text
BOTÕES
Servem para submeter formulários.
Quando com type=button, não possuem
comportamento. Devem ser usados para
auxiliar em interações.
Slide 54
Slide 54 text
')">
Mostrar
dica
HTML
Fechar
conteúdo
HTML
Slide 55
Slide 55 text
isto é uma navegação ou
uma ação?
X
http://tableless.com.br/o-grande-desencontro-http-com-o-html
Remover
HTML
Slide 56
Slide 56 text
Remover
HTML
Slide 57
Slide 57 text
CSS
conceitos e exemplos
Slide 58
Slide 58 text
OCULTANDO
ELEMENTOS
Slide 59
Slide 59 text
É comum que labels, legends e títulos, que
incrementam o significado do documento e
apoiam a acessibilidade, sejam omitidos da
interface.
Slide 60
Slide 60 text
legend
{
display:
none;
}
O elemento é retirado da
render tree e fica inacessível
para leitores de tela X
CSS
Slide 61
Slide 61 text
legend
{
position:
absolute;
left:
-‐9999em;
}
Citada como off-left
positioning
http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
CSS
Slide 62
Slide 62 text
legend {
position: absolute;
overflow: hidden;
clip: rect(0 0 0 0);
height: 1px; width: 1px;
margin: -1px; padding: 0; border: 0;
}
CSS
Slide 63
Slide 63 text
OCULTANDO
CONTEÚDO
Slide 64
Slide 64 text
Algumas vezes o conteúdo é substituído
por imagens para reforçar sua identidade.
Slide 65
Slide 65 text
.home-‐link
{
text-‐indent:
100%;
overflow:
hidden;
!
width:
30px;
height:
30px;
background-‐image:
url(home.svg);
}
Posicionando o texto
para uma área não
visível
CSS
Slide 66
Slide 66 text
.home-‐link
{
font:
0/0
a;
text-‐shadow:
none;
color:
transparent;
!
width:
30px;
height:
30px;
background-‐image:
url(home.svg);
}
http://nicolasgallagher.com/another-css-image-replacement-technique
CSS
Slide 67
Slide 67 text
ATENÇÃO
Ocultar elementos e conteúdo pode ser
penalizado por buscadores se usado
abusivamente.
Slide 68
Slide 68 text
PSEUDO
ELEMENTOS
Slide 69
Slide 69 text
GERAÇÃO DE
CONTEÚDO
Útil para flexibilizar a estilização e
facilitar na compatibilidade do
documento com outras mídias.
Slide 70
Slide 70 text
elemento
::after
::before
" CONTENT "
Slide 71
Slide 71 text
.quote::before
{
content:
open-‐quote;
font-‐size:
2em;
}
!
.quote::after
{
content:
'"';
font-‐size:
2em;
}
http://nicolasgallagher.com/an-introduction-to-css-pseudo-element-hacks
CSS
Slide 72
Slide 72 text
!
1. O QUE É UM SERVIÇO
DE HOSPEDAGEM
2. COMO CONTRATAR UM
SERVIÇO
3. O QUE É UM DOMÍNIO
Slide 73
Slide 73 text
.list
{
counter-‐reset:
item;
list-‐style:
none;
}
Liberdade de estilização
Criando um contador
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Counters
.list-‐item::before
{
content:
counter(item);
counter-‐increment:
item;
font-‐size:
3em;
}
CSS
Slide 74
Slide 74 text
@media
print
{
a[href]::after
{
content:
"
("
attr(href)
")";
}
}
CSS
Slide 75
Slide 75 text
TRILHA ESPECIAL DE
DESENVOLVIMENTO NO
ENCONTRO LOCAWEB
PROMETE TRAZER
NOVIDADES E
ASSUNTOS
PERTINENTES DA ÁREA
LOREM IPSUM IS SIMPLY
DUMMY TEXT OF THE
PRINTING AND
TYPESETTING
INDUSTRY. LOREM
Slide 76
Slide 76 text
TRILHA ESPECIAL DE
DESENVOLVIMENTO NO
ENCONTRO LOCAWEB
(HTTP://LOCAWEB.COM.BR)
PROMETE TRAZER
NOVIDADES E
ASSUNTOS
PERTINENTES DA ÁREA
LOREM IPSUM IS SIMPLY
DUMMY TEXT OF THE
PRINTING AND
TYPESETTING
INDUSTRY. LOREM
Slide 77
Slide 77 text
@media
print
{
a[href]::after
{
content:
"
("
attr(href)
")";
}
} Adiciona ao fim do
conteúdo o href
Somente em impressão
CSS
Slide 78
Slide 78 text
ESTILIZAÇÃO
Manter o HTML enxuto sem elementos
que servem apenas para estilização é
uma boa prática.
Slide 79
Slide 79 text
HOME
::before
Slide 80
Slide 80 text
.home-‐link::before
{
content:
'';
display:
inline-‐block;
width:
30px;
height:
30px;
border-‐right:
1px
solid
black;
background-‐image:
url(home.svg);
}
Propriedade
necessária para
criação do elemento
CSS
Slide 81
Slide 81 text
.home-‐link::after
{
/*
...
*/
}
CSS
.home-‐link::before
{
/*
...
*/
}
Ops...
.home-‐link::after::after
{
/*
...
*/
}
Slide 82
Slide 82 text
CURIOSIDADE
Pseudo elemento usa duplo dois
pontos, como ::before.
Pseudo classe, para acessar elementos,
contém apenas dois pontos,
como :first-child.
Slide 83
Slide 83 text
ESTADOS
o assunto que é a cereja do bolo
Slide 84
Slide 84 text
Algumas alterações de aparência, antes
responsabilidade do JavaScript e seus
eventos, podem ser determinadas
através das folhas de estilo.
Slide 85
Slide 85 text
RECURSOS
Podemos armazenar estado no foco,
checkboxes, radios e barra de
endereços.
Slide 86
Slide 86 text
FOCO
É possível condicionar regras nas folhas
de estilo para elementos em foco.
Apenas um elemento da página ganha o
foco por vez.
RECURSOS
Slide 87
Slide 87 text
|
E-MAIL
SENHA
Slide 88
Slide 88 text
.field:focus
{
box-‐shadow:
1px
1px
2px
black;
border-‐color:
black;
color:
black;
}
CSS
Slide 89
Slide 89 text
DON'T DO IT!
a { outline: none; }
http://outlinenone.com
Slide 90
Slide 90 text
FAQ
1. O QUE É UM SERVIÇO
DE HOSPEDAGEM
!
2. COMO CONTRATAR UM
SERVIÇO
3. O QUE É UM DOMÍNIO
UM SERVIÇO DE
HOSPEDAGEM [...]
tabindex=-1
http://www.w3.org/TR/html401/interact/forms.html#adef-tabindex
Slide 91
Slide 91 text
.faq-‐item
.faq-‐item-‐content
{
position:
absolute;
left:
-‐9999em;
}
Use o focus a seu favor
CSS
.faq-‐item:focus
.faq-‐item-‐content
{
position:
static;
left:
0;
}
Slide 92
Slide 92 text
http://www.adaptativa.com.br/faq
EX: FAQ
Slide 93
Slide 93 text
RADIO E
CHECKBOX
É possível aplicar regras nas folhas de
estilo para elementos no estado
de checked.
RECURSOS
Slide 94
Slide 94 text
RECEBER E-MAIL
Checkbox?
Slide 95
Slide 95 text
http://jsbin.com/tocodiji/1
EX: CHECKBOX
Slide 96
Slide 96 text
http://csscience.com/responsiveslidercss3
EX: SLIDER
Slide 97
Slide 97 text
RECEBER E-MAIL
E-MAIL
SIM NÃO
SIM
Slide 98
Slide 98 text
Receber
E-‐mail
!
E-‐mail
HTML
.email
{
display:
none;
}
.fill-‐email:checked
~
.email
{
display:
block;
}
CSS pseudo-classe mágica
Slide 99
Slide 99 text
https://css-tricks.com/examples/CSSTabs/
radio.php
EX: TABS
Slide 100
Slide 100 text
BARRA DE
ENDEREÇO
É possível aplicar regras específicas em
elementos com id (ou name) igual ao
fragment identifier.
RECURSOS
Slide 101
Slide 101 text
O QUE É UM SERVIÇO
DE HOSPEDAGEM
UM SERVIÇO DE HOSPEDAGEM
É O LOCAL QUE FICA SEU
WEBSITE
TYPE SPECIMEN BOOK. IT HAS
SURVIVED NOT ONLY FIVE
CENTURIES, BUT ALSO THE
LEAP INTO ELECTRONIC
TYPESETTING, REMAINING
ESSENTIALLY UNCHANGED. IT
WAS POPULARISED IN THE
1960S WITH THE RELEASE OF
LETRASET SHEETS
CONTAINING LOREM IPSUM
PASSAGES, AND MORE
RECENTLY WITH DESKTOP
PUBLISHING SOFTWARE LIKE
ALDUS PAGEMAKER
INCLUDING VERSIONS OF
LOREM IPSUM.
Slide 102
Slide 102 text
@keyframes
target-‐fade
{
from
{
background-‐color:
rgba(0,0,0,.1);
}
to
{
background-‐color:
rgba(0,0,0,0);
}
}
:target
{
animation:
target-‐fade
3s
1;
}
indica o elemento
http://snook.ca/archives/html_and_css/yellow-fade-technique-css-animations
CSS
Slide 103
Slide 103 text
http://jcemer.com
EX: MENU
RESPONSIVO
Slide 104
Slide 104 text
OBRIGADO
A TODOS
@jcemer #16elw #soudev
criem interfaces incríveis