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.

C5df370a883b65279af5a7ca94a5eed7?s=128

Jean Carlo Emer

March 18, 2014
Tweet

Transcript

  1. ALÉM DO QUE SE VÊ práticas de html e css

    @jcemer #16elw #soudev versão final
  2. http://jcemer.com

  3. None
  4. HISTÓRIA desde onde tudo começou

  5. 1991

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

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

  10. 1996

  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.
  12. 2014

  13. HTML conteúdo CSS estilo JS interatividade

  14. REVISANDO os limites de cada tecnologia

  15. E-MAIL SENHA

  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
  17. var  element  =  document.createElement('div');   element.textContent  =  'Não  há  conteúdo';

      ! document.body.innerHTML  =  '';   document.body.appendChild(element); JS
  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
  19. body  *  {      display:  none;   }  

    ! body::before  {      content:  'Não  há  conteúdo  nesta  página';   } CSS
  20. PSEUDO ELEMENTS Os pseudo elementos tornam possível acrescentar conteúdo que

    não está presente no documento. CSS
  21. HTML conteúdo estilo interatividade acessibilidade usabilidade performance CSS JS

  22. MOTIVAÇÃO para que estamos aqui hoje

  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
  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.
  25. AGENDA quais os tópicos abordados

  26. Demarcando corretamente o conteúdo. HTML Ocultando e criando conteúdo. CSS

    ESTADOS Utilizando html e css para gerenciar estados.
  27. HTML conceitos e exemplos

  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.
  29. https://twitter.com/arthurgouveia/status/464132963727589376

  30. TÍTULOS, LEGENDAS E OUTROS

  31. Representam a estrutura do documento servindo como anúncio e rótulo.

    São úteis para leitores de tela e motores de busca.
  32. TÍTULO DO DOCUMENTO Devem identificar o documento mesmo quando fora

    de contexto como em bookmarks e resultados de busca.
  33. Mantém um histórico de navegação legível para o usuário. @askoth

    TÍTULO DO DOCUMENTO
  34. CABEÇALHOS <H1>, <H2>, ... Servem como títulos de uma seção

    de conteúdo. Os números indicam a relação entre as seções.
  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
  36. <h1>Trilha  especial  de  [...]</h1>   <h2>Trilha  promete  trazer  novidades  [...]</h2>

    HTML X Não se trata de um cabeçalho para uma nova seção
  37. <header>      <h1>Trilha  especial  de  [...]</h1>      <p>Trilha

     promete  trazer  novidades  [...]</p>   </header> HTML http://www.w3.org/html/wg/drafts/html/master/common-idioms.html
  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
  39. CABEÇALHOS <H1>, <H2>, ... Títulos com atributo id servem como

    endereço para seções específicas do documento.
  40. <h3  id="palestrantes">Palestrantes</h3> HTML

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

  42. <h3  id="palestrantes">      <a  href="#palestrantes"        

         title="Palestrantes"></a>      Palestrantes   </h3> Importante é conter id HTML
  43. RÓTULOS DE FORMULÁRIO Indicam o significado de porções de formulários

    e campos.
  44. <form>      <fieldset>          <legend>  

               Dados  pessoais  do  assinante          </legend>      <!-­‐-­‐  -­‐-­‐>   !    <fieldset>          <legend>              Dados  de  pagamento          </legend>      <!-­‐-­‐  -­‐-­‐>   </form> Título agrupador dos campos do <fieldset> HTML
  45. <label  for="name">Nome  completo</label>   <input  id="name"  name="name"  type="text"    

             placeholder="Ex.  Jean  Carlo  Emer"> Rótulo do campo Placeholder não é
 substituto de label HTML
  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.
  47. <img  src="locaweb.jpg"              alt="Sala  de

     servidores  da  Locaweb"> Isto não é uma legenda, 
 é um texto alternativo HTML
  48. <figure>      <img  src="locaweb.jpg"          

           alt="Sala  de  servidores  da  Locaweb">            <figcaption>          Nossa  infraestrutura  de  servidores      </figcaption>   </figure> Imagem, canvas, svg, código, 
 audio, vídeo... Deve estar dentro de um <figure> junto com as mídias a que se refere HTML
  49. ÂNCORAS E BOTÕES

  50. ÂNCORAS São as âncoras que possibilitam ao usuário navegar por

    um documento ou acessar outro documento.
  51. <a  href="http://tableless.com.br">
    Tableless   </a> esta é a única

    função! HTML <a  href="#conclusao">Ir  para  a  conclusão</a> HTML <a  href="#">Voltar  ao  topo</a> HTML
  52. <a  href="#"  rel="nofollow">Share</a> navegando para o topo? X HTML <a

     href="#">Fechar</a> HTML fechar e navegar 
 para o topo?
  53. BOTÕES Servem para submeter formulários. Quando com type=button, não possuem

    comportamento. Devem ser usados para auxiliar em interações.
  54. <button  type="button"                

     onclick="alert('Use  <button>')">      Mostrar  dica   </button> HTML <button  type="button"  data-­‐action="close">      Fechar  conteúdo   </button> HTML
  55. isto é uma navegação ou
 uma ação? X http://tableless.com.br/o-grande-desencontro-http-com-o-html <a

     href="/remover-­‐noticia">Remover</a> HTML
  56. <form  action="remover-­‐noticia/"  method="post">      <button  type="submit">Remover</button>   </form> HTML

  57. CSS conceitos e exemplos

  58. OCULTANDO ELEMENTOS

  59. É comum que labels, legends e títulos, que incrementam o

    significado do documento e apoiam a acessibilidade, sejam omitidos da interface.
  60. legend  {      display:  none;   } O elemento

    é retirado da render tree e fica inacessível para leitores de tela X CSS
  61. legend  {      position:  absolute;      left:  -­‐9999em;

      } Citada como off-left positioning http://snook.ca/archives/html_and_css/hiding-content-for-accessibility CSS
  62. legend { position: absolute; overflow: hidden; clip: rect(0 0 0

    0); height: 1px; width: 1px; margin: -1px; padding: 0; border: 0; } CSS
  63. OCULTANDO CONTEÚDO

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

    sua identidade.
  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
  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
  67. ATENÇÃO Ocultar elementos e conteúdo pode ser penalizado por buscadores

    se usado abusivamente.
  68. PSEUDO ELEMENTOS

  69. GERAÇÃO DE CONTEÚDO Útil para flexibilizar a estilização e facilitar

    na compatibilidade do documento com outras mídias.
  70. elemento ::after ::before " CONTENT "

  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
  72. ! 1. O QUE É UM SERVIÇO
 DE HOSPEDAGEM 2.

    COMO CONTRATAR UM SERVIÇO 3. O QUE É UM DOMÍNIO
  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
  74. @media  print  {      a[href]::after  {      

       content:  "  ("  attr(href)  ")";      }   } CSS
  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
  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
  77. @media  print  {      a[href]::after  {      

       content:  "  ("  attr(href)  ")";      }   } Adiciona ao fim do conteúdo o href Somente em impressão CSS
  78. ESTILIZAÇÃO Manter o HTML enxuto sem elementos que servem apenas

    para estilização é uma boa prática.
  79. HOME ::before

  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
  81. .home-­‐link::after  {      /*  ...  */     }

    CSS .home-­‐link::before  {      /*  ...  */   } Ops... .home-­‐link::after::after  {        /*  ...  */   }
  82. CURIOSIDADE Pseudo elemento usa duplo dois 
 pontos, como ::before.

    Pseudo classe, para acessar elementos, contém apenas dois pontos, 
 como :first-child.
  83. ESTADOS o assunto que é a cereja do bolo

  84. Algumas alterações de aparência, antes responsabilidade do JavaScript e seus

    eventos, podem ser determinadas através das folhas de estilo.
  85. RECURSOS Podemos armazenar estado no foco, checkboxes, radios e barra

    de endereços.
  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
  87. | E-MAIL SENHA

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

       border-­‐color:  black;      color:  black;   } CSS
  89. DON'T DO IT! a { outline: none; } http://outlinenone.com

  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
  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;   }
  92. http://www.adaptativa.com.br/faq EX: FAQ

  93. RADIO E CHECKBOX É possível aplicar regras nas folhas de

    estilo para elementos no estado 
 de checked. RECURSOS
  94. RECEBER E-MAIL Checkbox?

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

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

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

  98. <input  class="fill-­‐email"  type="checkbox"  [...]>   <label  [...]>Receber  E-­‐mail</label>   !

    <div  class="email">      <label  [...]>E-­‐mail</label>      <input  [...]>   </div> HTML .email  {  display:  none;  }   .fill-­‐email:checked  ~  .email  {  display:  block;  } CSS pseudo-classe mágica
  99. https://css-tricks.com/examples/CSSTabs/ radio.php EX: TABS

  100. BARRA DE ENDEREÇO É possível aplicar regras específicas em elementos

    com id (ou name) igual ao fragment identifier. RECURSOS
  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.
  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
  103. http://jcemer.com EX: MENU RESPONSIVO

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