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
  2. 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.
  3. 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.
  4. LIBERDADE DE ESTILO Atribuir diferente aparência ao conteúdo através da

    declaração de fontes, cores, margens, alturas, larguras e muito mais.
  5. 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
  6. var  element  =  document.createElement('div');   element.textContent  =  'Não  há  conteúdo';

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

    ! body::before  {      content:  'Não  há  conteúdo  nesta  página';   } CSS
  9. 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
  10. 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.
  11. Demarcando corretamente o conteúdo. HTML Ocultando e criando conteúdo. CSS

    ESTADOS Utilizando html e css para gerenciar estados.
  12. 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.
  13. Representam a estrutura do documento servindo como anúncio e rótulo.

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

    de contexto como em bookmarks e resultados de busca.
  15. 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.
  16. 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
  17. <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
  18. 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
  19. CABEÇALHOS <H1>, <H2>, ... Títulos com atributo id servem como

    endereço para seções específicas do documento.
  20. <h3  id="palestrantes">      <a  href="#palestrantes"        

         title="Palestrantes"></a>      Palestrantes   </h3> Importante é conter id HTML
  21. <form>      <fieldset>          <legend>  

               Dados  pessoais  do  assinante          </legend>      <!-­‐-­‐  -­‐-­‐>   !    <fieldset>          <legend>              Dados  de  pagamento          </legend>      <!-­‐-­‐  -­‐-­‐>   </form> Título agrupador dos campos do <fieldset> HTML
  22. <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
  23. 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.
  24. <img  src="locaweb.jpg"              alt="Sala  de

     servidores  da  Locaweb"> Isto não é uma legenda, 
 é um texto alternativo HTML
  25. <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
  26. <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
  27. <a  href="#"  rel="nofollow">Share</a> navegando para o topo? X HTML <a

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

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

     onclick="alert('Use  <button>')">      Mostrar  dica   </button> HTML <button  type="button"  data-­‐action="close">      Fechar  conteúdo   </button> HTML
  30. É comum que labels, legends e títulos, que incrementam o

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

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

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

    0); height: 1px; width: 1px; margin: -1px; padding: 0; border: 0; } CSS
  34. .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
  35. .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
  36. GERAÇÃO DE CONTEÚDO Útil para flexibilizar a estilização e facilitar

    na compatibilidade do documento com outras mídias.
  37. .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
  38. ! 1. O QUE É UM SERVIÇO
 DE HOSPEDAGEM 2.

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

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

       content:  "  ("  attr(href)  ")";      }   } Adiciona ao fim do conteúdo o href Somente em impressão CSS
  44. .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
  45. .home-­‐link::after  {      /*  ...  */     }

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

    Pseudo classe, para acessar elementos, contém apenas dois pontos, 
 como :first-child.
  47. Algumas alterações de aparência, antes responsabilidade do JavaScript e seus

    eventos, podem ser determinadas através das folhas de estilo.
  48. 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
  49. .field:focus  {      box-­‐shadow:  1px  1px  2px  black;  

       border-­‐color:  black;      color:  black;   } CSS
  50. 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
  51. .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;   }
  52. RADIO E CHECKBOX É possível aplicar regras nas folhas de

    estilo para elementos no estado 
 de checked. RECURSOS
  53. <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
  54. BARRA DE ENDEREÇO É possível aplicar regras específicas em elementos

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