Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Além do que se vê - práticas de HTML e CSS

Além do que se vê - práticas de HTML e CSS

16º Encontro Locaweb.

A aparência nos exige extrair ao máximo das folhas de estilo, conhecer boas técnicas é essencial. Para a marcação do conteúdo, conheceremos a semântica dos elementos mais simples: links, botões, labels (relaxa, sem dar foco em elementos controversos). Teremos o cuidado de nos ater aos elementos e atributos que reforçam a usabilidade mas sem deixar de lado os meios de alcançar os fluxos e comportamentos 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.

Jean Carlo Emer

March 18, 2014
Tweet

More Decks by Jean Carlo Emer

Other Decks in Technology

Transcript

  1. ALÉM DO
    QUE SE VÊ
    práticas de html e css
    @jcemer #16elw #soudev
    versão final

    View full-size slide

  2. http://jcemer.com

    View full-size slide

  3. HISTÓRIA
    desde onde tudo começou

    View full-size slide

  4. 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.

    View full-size slide

  5. 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.

    View full-size slide

  6. LIBERDADE
    DE ESTILO
    Atribuir diferente aparência ao conteúdo
    através da declaração de fontes, cores,
    margens, alturas, larguras e muito mais.

    View full-size slide

  7. HTML
    conteúdo
    CSS
    estilo
    JS
    interatividade

    View full-size slide

  8. REVISANDO
    os limites de cada tecnologia

    View full-size slide

  9. 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

    View full-size slide

  10. var  element  =  document.createElement('div');  
    element.textContent  =  'Não  há  conteúdo';  
    !
    document.body.innerHTML  =  '';  
    document.body.appendChild(element);
    JS

    View full-size slide

  11. 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

    View full-size slide

  12. body  *  {  
       display:  none;  
    }  
    !
    body::before  {  
       content:  'Não  há  conteúdo  nesta  página';  
    }
    CSS

    View full-size slide

  13. PSEUDO
    ELEMENTS
    Os pseudo elementos tornam possível
    acrescentar conteúdo que não está presente
    no documento.
    CSS

    View full-size slide

  14. HTML conteúdo
    estilo
    interatividade
    acessibilidade
    usabilidade
    performance
    CSS
    JS

    View full-size slide

  15. MOTIVAÇÃO
    para que estamos aqui hoje

    View full-size slide

  16. 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

    View full-size slide

  17. 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.

    View full-size slide

  18. AGENDA
    quais os tópicos abordados

    View full-size slide

  19. Demarcando corretamente o conteúdo.
    HTML
    Ocultando e criando conteúdo.
    CSS
    ESTADOS
    Utilizando html e css para gerenciar estados.

    View full-size slide

  20. HTML
    conceitos e exemplos

    View full-size slide

  21. 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.

    View full-size slide

  22. https://twitter.com/arthurgouveia/status/464132963727589376

    View full-size slide

  23. TÍTULOS,
    LEGENDAS
    E OUTROS

    View full-size slide

  24. Representam a estrutura do documento
    servindo como anúncio e rótulo.
    São úteis para leitores de tela e
    motores de busca.

    View full-size slide

  25. TÍTULO DO
    DOCUMENTO
    Devem identificar o documento mesmo
    quando fora de contexto como em
    bookmarks e resultados de busca.

    View full-size slide

  26. Mantém um histórico de navegação legível
    para o usuário.
    @askoth
    TÍTULO DO
    DOCUMENTO

    View full-size slide

  27. CABEÇALHOS
    , , ...
    Servem como títulos de uma seção de
    conteúdo. Os números indicam a
    relação entre as seções.

    View full-size slide

  28. 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

    View full-size slide

  29. Trilha  especial  de  [...]  
    Trilha  promete  trazer  novidades  [...]
    HTML
    X
    Não se trata de um cabeçalho
    para uma nova seção

    View full-size slide

  30.  
       Trilha  especial  de  [...]  
       Trilha  promete  trazer  novidades  [...]  

    HTML
    http://www.w3.org/html/wg/drafts/html/master/common-idioms.html

    View full-size slide

  31. 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

    View full-size slide

  32. CABEÇALHOS
    , , ...
    Títulos com atributo id servem como
    endereço para seções específicas do
    documento.

    View full-size slide

  33. Palestrantes
    HTML

    View full-size slide

  34. http://jcemer.com/hipermidia-as-avessas-
    passo-a-passo.html
    EX: POST

    View full-size slide

  35.  
                 title="Palestrantes">  
       Palestrantes  

    Importante é conter id
    HTML

    View full-size slide

  36. RÓTULOS DE
    FORMULÁRIO
    Indicam o significado de porções de
    formulários e campos.

    View full-size slide

  37.  
         
             
               Dados  pessoais  do  assinante  
             
         
    !
         
             
               Dados  de  pagamento  
             
         

    Título agrupador dos
    campos do
    HTML

    View full-size slide

  38. Nome  completo  
               placeholder="Ex.  Jean  Carlo  Emer">
    Rótulo do campo
    Placeholder não é

    substituto de label
    HTML

    View full-size slide

  39. 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.

    View full-size slide

  40.          alt="Sala  de  servidores  da  Locaweb">
    Isto não é uma legenda, 

    é um texto alternativo
    HTML

    View full-size slide

  41.  
                     alt="Sala  de  servidores  da  Locaweb">  
         
         
           Nossa  infraestrutura  de  servidores  
         

    Imagem, canvas, svg, código, 

    audio, vídeo...
    Deve estar dentro de um
    junto com as mídias a
    que se refere
    HTML

    View full-size slide

  42. ÂNCORAS
    E BOTÕES

    View full-size slide

  43. ÂNCORAS
    São as âncoras que possibilitam ao usuário
    navegar por um documento ou acessar outro
    documento.

    View full-size slide


  44.    Tableless  

    esta é a única função!
    HTML
    Ir  para  a  conclusão
    HTML
    Voltar  ao  topo
    HTML

    View full-size slide

  45. Share
    navegando para o topo?
    X
    HTML
    Fechar
    HTML
    fechar e navegar 

    para o topo?

    View full-size slide

  46. BOTÕES
    Servem para submeter formulários.
    Quando com type=button, não possuem
    comportamento. Devem ser usados para
    auxiliar em interações.

    View full-size slide

  47.                onclick="alert('Use  ')">  
       Mostrar  dica  

    HTML
     
       Fechar  conteúdo  

    HTML

    View full-size slide

  48. isto é uma navegação ou

    uma ação?
    X
    http://tableless.com.br/o-grande-desencontro-http-com-o-html
    Remover
    HTML

    View full-size slide

  49.  
       Remover  

    HTML

    View full-size slide

  50. CSS
    conceitos e exemplos

    View full-size slide

  51. OCULTANDO
    ELEMENTOS

    View full-size slide

  52. É comum que labels, legends e títulos, que
    incrementam o significado do documento e
    apoiam a acessibilidade, sejam omitidos da
    interface.

    View full-size slide

  53. legend  {  
       display:  none;  
    }
    O elemento é retirado da
    render tree e fica inacessível
    para leitores de tela X
    CSS

    View full-size slide

  54. legend  {  
       position:  absolute;  
       left:  -­‐9999em;  
    }
    Citada como off-left
    positioning
    http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
    CSS

    View full-size slide

  55. legend {
    position: absolute;
    overflow: hidden;
    clip: rect(0 0 0 0);
    height: 1px; width: 1px;
    margin: -1px; padding: 0; border: 0;
    }
    CSS

    View full-size slide

  56. OCULTANDO
    CONTEÚDO

    View full-size slide

  57. Algumas vezes o conteúdo é substituído
    por imagens para reforçar sua identidade.

    View full-size slide

  58. .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

    View full-size slide

  59. .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

    View full-size slide

  60. ATENÇÃO
    Ocultar elementos e conteúdo pode ser
    penalizado por buscadores se usado
    abusivamente.

    View full-size slide

  61. PSEUDO
    ELEMENTOS

    View full-size slide

  62. GERAÇÃO DE
    CONTEÚDO
    Útil para flexibilizar a estilização e
    facilitar na compatibilidade do
    documento com outras mídias.

    View full-size slide

  63. elemento
    ::after
    ::before
    " CONTENT "

    View full-size slide

  64. .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

    View full-size slide

  65. !
    1. O QUE É UM SERVIÇO

    DE HOSPEDAGEM
    2. COMO CONTRATAR UM
    SERVIÇO
    3. O QUE É UM DOMÍNIO

    View full-size slide

  66. .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

    View full-size slide

  67. @media  print  {  
       a[href]::after  {  
           content:  "  ("  attr(href)  ")";  
       }  
    }
    CSS

    View full-size slide

  68. 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

    View full-size slide

  69. 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

    View full-size slide

  70. @media  print  {  
       a[href]::after  {  
           content:  "  ("  attr(href)  ")";  
       }  
    } Adiciona ao fim do
    conteúdo o href
    Somente em impressão
    CSS

    View full-size slide

  71. ESTILIZAÇÃO
    Manter o HTML enxuto sem elementos
    que servem apenas para estilização é
    uma boa prática.

    View full-size slide

  72. HOME
    ::before

    View full-size slide

  73. .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

    View full-size slide

  74. .home-­‐link::after  {  
       /*  ...  */    
    }
    CSS
    .home-­‐link::before  {  
       /*  ...  */  
    }
    Ops...
    .home-­‐link::after::after  {    
       /*  ...  */  
    }

    View full-size slide

  75. CURIOSIDADE
    Pseudo elemento usa duplo dois 

    pontos, como ::before.
    Pseudo classe, para acessar elementos,
    contém apenas dois pontos, 

    como :first-child.

    View full-size slide

  76. ESTADOS
    o assunto que é a cereja do bolo

    View full-size slide

  77. Algumas alterações de aparência, antes
    responsabilidade do JavaScript e seus
    eventos, podem ser determinadas
    através das folhas de estilo.

    View full-size slide

  78. RECURSOS
    Podemos armazenar estado no foco,
    checkboxes, radios e barra de
    endereços.

    View full-size slide

  79. 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

    View full-size slide

  80. |
    E-MAIL
    SENHA

    View full-size slide

  81. .field:focus  {  
       box-­‐shadow:  1px  1px  2px  black;  
       border-­‐color:  black;  
       color:  black;  
    }
    CSS

    View full-size slide

  82. DON'T DO IT!
    a { outline: none; }
    http://outlinenone.com

    View full-size slide

  83. 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

    View full-size slide

  84. .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;  
    }

    View full-size slide

  85. http://www.adaptativa.com.br/faq
    EX: FAQ

    View full-size slide

  86. RADIO E
    CHECKBOX
    É possível aplicar regras nas folhas de
    estilo para elementos no estado 

    de checked.
    RECURSOS

    View full-size slide

  87. RECEBER E-MAIL
    Checkbox?

    View full-size slide

  88. http://jsbin.com/tocodiji/1
    EX: CHECKBOX

    View full-size slide

  89. http://csscience.com/responsiveslidercss3
    EX: SLIDER

    View full-size slide

  90. RECEBER E-MAIL
    E-MAIL
    SIM NÃO
    SIM

    View full-size slide

  91.  
    Receber  E-­‐mail  
    !
     
       E-­‐mail  
         

    HTML
    .email  {  display:  none;  }  
    .fill-­‐email:checked  ~  .email  {  display:  block;  }
    CSS pseudo-classe mágica

    View full-size slide

  92. https://css-tricks.com/examples/CSSTabs/
    radio.php
    EX: TABS

    View full-size slide

  93. BARRA DE
    ENDEREÇO
    É possível aplicar regras específicas em
    elementos com id (ou name) igual ao
    fragment identifier.
    RECURSOS

    View full-size slide

  94. 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.

    View full-size slide

  95. @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

    View full-size slide

  96. http://jcemer.com
    EX: MENU
    RESPONSIVO

    View full-size slide

  97. OBRIGADO
    A TODOS
    @jcemer #16elw #soudev
    criem interfaces incríveis

    View full-size slide