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
2. http://jcemer.com
4. HISTÓRIA desde onde tudo começou
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.
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.
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.
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