Front end - the right way

505 visualizações

Publicada em

Slides usados no mini-curso Front-end the right way. Uma introdução ao mundo front-end. são abordadas boas praticas de html e css.

0 comentários
2 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
505
No SlideShare
0
A partir de incorporações
0
Número de incorporações
5
Ações
Compartilhamentos
0
Downloads
5
Comentários
0
Gostaram
2
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Front end - the right way

  1. 1. FRONT-END the right way @vinicius_dacal
  2. 2. Sistemas para Internet
  3. 3. Front-end Back-end Mobile dev
  4. 4. SÓ PODE SER HTML5
  5. 5. SÓ O HTML5 SALVA!
  6. 6. O que mudou? O HTML5 trouxe importantes mudanças quanto ao papel do HTML no mundo da Web, melhorando sua semântica e acessibilidade. Com novos recursos, antes só possíveis por meio de outras tecnologias
  7. 7. Semântica É o estudo do significado. Incide sobre a relação entre significantes, tais como palavras, frases, sinais e símbolos, e o que eles representam, a sua denotação
  8. 8. <div> <div> <div>
  9. 9. <header> <main> <footer>
  10. 10. <header> <nav> <main> <footer>
  11. 11. <header> <nav> <article> <article> <article> <footer>
  12. 12. Microdata Padrão de representação de informações que estende as potencialidades semânticas do HTML5
  13. 13. Microdata <div> <h1>ADN Múltipla Comunicação </h1> <p>44 9999-3539 </p> <p> <span>Av. Rio de janeiro, 5260 </span>, <span>Umuarama</span>, <span>PR</span>. </p> </div>
  14. 14. Microdata <div itemscope itemtype="http://data-vocabulary.org/Organization"> <h1 itemprop="name">ADN Múltipla Comunicação</h1> <p itemprop="tel">44 9999-3539</p> <p itemprop="address" itemscope itemtype="http://data-vocabulary.org/Address"> <span itemprop="street-address">Av. Rio de janeiro, 5260</span>, <span itemprop="locality">Umuarama</span>, <span itemprop="region">PR</span>. </p> </div> https://schema.org
  15. 15. Opengraph
  16. 16. Opengraph <meta property="og:title" content="ADN Múltipla Comunicação" /> <meta property="og:type" content="company" /> <meta property="og:url" content="http://www.adnmultipla.com/" /> <meta property="og:image" content="http://www.adnmultipla.com.br/img/adn.jpg" /> <meta property="og:site_name" content="ADN Múltipla" /> <meta property="og:description" content="ADN Múltipla - Agência Múltipla" /> https://developers.facebook.com/docs/sharing/best-practices
  17. 17. Web Components The Future http://webcomponents.org/
  18. 18. Custom Elements Templates Shadow DOM Import
  19. 19. Custom Elements E se você pudesse criar sua própria TAG?
  20. 20. Custom Elements <x-bacon></x-bacon>
  21. 21. Templates Guarde trechos de código para reutilização <template></template>
  22. 22. Templates <template> <img src="http://www.placehold.it/300x200" /> </template>
  23. 23. Shadow DOM Blocos de código que você não vê mas estão lá, encapsulados dentro do DOM!
  24. 24. Import A forma mais fácil de você importar e reutilizar componentes <link rel=”import” href=”video”>
  25. 25. Suporte dos Browsers Atualmente nem todos os browsers suportam as features para web components! Mas você pode começar a brincar hoje mesmo, usando polyfills. Polymer x-tags
  26. 26. Cascading Style Sheets https://www.youtube.com/watch?v=m1iV2C44Duc
  27. 27. CSS3 Advanced Selectors Border Radius Box Model CSS Animations and Transitions Calculating Values With calc() Gradients Media Queries Etc...
  28. 28. CSS3 com css você pode fazer coisas incríveis
  29. 29. CSS3 O único problema é que CSS é muito fácil
  30. 30. você não pensa para escrever css
  31. 31. E de vez em quando, o que era pra ser um Style sheet, se torna um Style Shit
  32. 32. Padrões de Código
  33. 33. !CamelCase Não use CamelCase em css. Prefira manter tudo em minúsculo e usar hífen para separar as palavras: alertInfo alert-info
  34. 34. !#ids Prefira atribuir seus estilos css a classes e não a ids ou tags #logo h1 .logo
  35. 35. Evite seletores gigantes Prefira atribuir seus estilos css à classes e não a ids ou tags html > body> header> h1> .logo .logo
  36. 36. Evite seletores gigantes Prefira atribuir seus estilos css à classes e não a ids ou tags html > body> header> h1> .logo .logo
  37. 37. Nomeie as classe por responsabiliades e não por propriedades info-red info-important
  38. 38. Evite usar @import Para cada import é feita uma nova requisição e isso não é legal!
  39. 39. Componentes
  40. 40. Task Runners
  41. 41. Facilitam sua vida! Automatizam tarefas, livrando você de perder tempo com coisas desnecessárias minificação de css e js. concatenação de css e js jsLint etc...
  42. 42. Carreira
  43. 43. Carreira Sucesso = dedicação X oportunidades X objetivos
  44. 44. Carreira Sucesso = dedicação X oportunidades X objetivos Se algum dos fatores for ZERO, você está fazendo algo errado 0 X 10 X 10 = 0
  45. 45. Corra atrás de um 1000 10 X 10 X 10 = 1000
  46. 46. Vinicius Dacal Lopes viniciusldacal@gmail.com @vinicius_dacal https://github.com/viniciusdacal

×