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

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

    @jcemer #16elw #soudev versão final
  2. 3.
  3. 5.
  4. 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.
  5. 7.
  6. 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.
  7. 9.
  8. 10.
  9. 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.
  10. 12.
  11. 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
  12. 17.

    var  element  =  document.createElement('div');   element.textContent  =  'Não  há  conteúdo';

      ! document.body.innerHTML  =  '';   document.body.appendChild(element); JS
  13. 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
  14. 19.

    body  *  {      display:  none;   }  

    ! body::before  {      content:  'Não  há  conteúdo  nesta  página';   } CSS
  15. 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
  16. 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.
  17. 26.

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

    ESTADOS Utilizando html e css para gerenciar estados.
  18. 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.
  19. 31.

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

    São úteis para leitores de tela e motores de busca.
  20. 32.

    TÍTULO DO DOCUMENTO Devem identificar o documento mesmo quando fora

    de contexto como em bookmarks e resultados de busca.
  21. 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.
  22. 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
  23. 36.
  24. 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
  25. 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
  26. 39.

    CABEÇALHOS <H1>, <H2>, ... Títulos com atributo id servem como

    endereço para seções específicas do documento.
  27. 42.

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

         title="Palestrantes"></a>      Palestrantes   </h3> Importante é conter id HTML
  28. 44.

    <form>      <fieldset>          <legend>  

               Dados  pessoais  do  assinante          </legend>      <!-­‐-­‐  -­‐-­‐>   !    <fieldset>          <legend>              Dados  de  pagamento          </legend>      <!-­‐-­‐  -­‐-­‐>   </form> Título agrupador dos campos do <fieldset> HTML
  29. 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
  30. 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.
  31. 47.

    <img  src="locaweb.jpg"              alt="Sala  de

     servidores  da  Locaweb"> Isto não é uma legenda, 
 é um texto alternativo HTML
  32. 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
  33. 50.
  34. 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
  35. 52.

    <a  href="#"  rel="nofollow">Share</a> navegando para o topo? X HTML <a

     href="#">Fechar</a> HTML fechar e navegar 
 para o topo?
  36. 53.

    BOTÕES Servem para submeter formulários. Quando com type=button, não possuem

    comportamento. Devem ser usados para auxiliar em interações.
  37. 54.

    <button  type="button"                

     onclick="alert('Use  <button>')">      Mostrar  dica   </button> HTML <button  type="button"  data-­‐action="close">      Fechar  conteúdo   </button> HTML
  38. 59.

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

    significado do documento e apoiam a acessibilidade, sejam omitidos da interface.
  39. 60.

    legend  {      display:  none;   } O elemento

    é retirado da render tree e fica inacessível para leitores de tela X CSS
  40. 61.

    legend  {      position:  absolute;      left:  -­‐9999em;

      } Citada como off-left positioning http://snook.ca/archives/html_and_css/hiding-content-for-accessibility CSS
  41. 62.

    legend { position: absolute; overflow: hidden; clip: rect(0 0 0

    0); height: 1px; width: 1px; margin: -1px; padding: 0; border: 0; } CSS
  42. 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
  43. 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
  44. 69.

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

    na compatibilidade do documento com outras mídias.
  45. 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
  46. 72.

    ! 1. O QUE É UM SERVIÇO
 DE HOSPEDAGEM 2.

    COMO CONTRATAR UM SERVIÇO 3. O QUE É UM DOMÍNIO
  47. 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
  48. 74.

    @media  print  {      a[href]::after  {      

       content:  "  ("  attr(href)  ")";      }   } CSS
  49. 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
  50. 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
  51. 77.

    @media  print  {      a[href]::after  {      

       content:  "  ("  attr(href)  ")";      }   } Adiciona ao fim do conteúdo o href Somente em impressão CSS
  52. 78.
  53. 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
  54. 81.

    .home-­‐link::after  {      /*  ...  */     }

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

    CURIOSIDADE Pseudo elemento usa duplo dois 
 pontos, como ::before.

    Pseudo classe, para acessar elementos, contém apenas dois pontos, 
 como :first-child.
  56. 84.

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

    eventos, podem ser determinadas através das folhas de estilo.
  57. 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
  58. 88.

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

       border-­‐color:  black;      color:  black;   } CSS
  59. 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
  60. 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;   }
  61. 93.

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

    estilo para elementos no estado 
 de checked. RECURSOS
  62. 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
  63. 100.

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

    com id (ou name) igual ao fragment identifier. RECURSOS
  64. 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.
  65. 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