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.

Transcript

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

   View Slide

2. http://jcemer.com
   

   View Slide

3. View Slide

4. HISTÓRIA
   desde onde tudo começou
   

   View Slide

5. View Slide

6. 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 Slide

7. View Slide

8. 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 Slide

9. View Slide

10. View Slide

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

12. View Slide

13. HTML
    conteúdo
    CSS
    estilo
    JS
    interatividade
    

    View Slide

14. REVISANDO
    os limites de cada tecnologia
    

    View Slide

15. E-MAIL
    SENHA
    

    View Slide

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

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

    View Slide

18. 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 Slide

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

    View Slide

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

    View Slide

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

    View Slide

22. MOTIVAÇÃO
    para que estamos aqui hoje
    

    View Slide

23. 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 Slide

24. 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 Slide

25. AGENDA
    quais os tópicos abordados
    

    View Slide

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

    View Slide

27. HTML
    conceitos e exemplos
    

    View Slide

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

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

    View Slide

30. TÍTULOS,
    LEGENDAS
    E OUTROS
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

34. 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 Slide

35. 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 Slide

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

    View Slide

37.  
       Trilha  especial  de  [...]  
       Trilha  promete  trazer  novidades  [...]  
    
    HTML
    http://www.w3.org/html/wg/drafts/html/master/common-idioms.html
    

    View Slide

38. 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 Slide

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

    View Slide

40. Palestrantes
    HTML
    

    View Slide

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

    View Slide

42.  
                 title="Palestrantes">  
       Palestrantes  
    
    Importante é conter id
    HTML
    

    View Slide

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

    View Slide

44.  
         
             
               Dados  pessoais  do  assinante  
             
         
    !
         
             
               Dados  de  pagamento  
             
         
    
    Título agrupador dos
    campos do
    HTML
    

    View Slide

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

    substituto de label
    HTML
    

    View Slide

46. 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 Slide

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

    é um texto alternativo
    HTML
    

    View Slide

48.  
                     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 Slide

49. ÂNCORAS
    E BOTÕES
    

    View Slide

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

    View Slide

51. 

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

    View Slide

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

    para o topo?
    

    View Slide

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

    View Slide

54.                onclick="alert('Use  ')">  
       Mostrar  dica  
    
    HTML
     
       Fechar  conteúdo  
    
    HTML
    

    View Slide

55. isto é uma navegação ou

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

    View Slide

56.  
       Remover  
    
    HTML
    

    View Slide

57. CSS
    conceitos e exemplos
    

    View Slide

58. OCULTANDO
    ELEMENTOS
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

63. OCULTANDO
    CONTEÚDO
    

    View Slide

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

    View Slide

65. .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 Slide

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

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

    View Slide

68. PSEUDO
    ELEMENTOS
    

    View Slide

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

    View Slide

70. elemento
    ::after
    ::before
    " CONTENT "
    

    View Slide

71. .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 Slide

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

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

    View Slide

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

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

    View Slide

75. 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 Slide

76. 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 Slide

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

    View Slide

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

    View Slide

79. HOME
    ::before
    

    View Slide

80. .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 Slide

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

    View Slide

82. CURIOSIDADE
    Pseudo elemento usa duplo dois 

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

    como :first-child.
    

    View Slide

83. ESTADOS
    o assunto que é a cereja do bolo
    

    View Slide

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

    View Slide

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

    View Slide

86. 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 Slide

87. |
    E-MAIL
    SENHA
    

    View Slide

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

    View Slide

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

    View Slide

90. 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 Slide

91. .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 Slide

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

    View Slide

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

    de checked.
    RECURSOS
    

    View Slide

94. RECEBER E-MAIL
    Checkbox?
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

     View Slide

101. 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 Slide

102. @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 Slide

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

     View Slide

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

     View Slide