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.

1. FRONT-END
the right way
@vinicius_dacal

2. Sistemas para Internet

3. Front-end
Back-end
Mobile dev

8. SÓ PODE SER HTML5

9. SÓ O HTML5 SALVA!

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

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

12. <div>
<div>
<div>

13. <header>
<main>
<footer>

14. <header>
<nav>
<main>
<footer>

15. <header>
<nav>
<article>
<article>
<article>
<footer>

16. Microdata
Padrão de representação de informações que
estende as potencialidades semânticas do
HTML5

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

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

19. Opengraph

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

21. Web Components
The Future
http://webcomponents.org/

22. Custom Elements
Templates
Shadow DOM
Import

23. Custom Elements
E se você pudesse criar sua própria TAG?

24. Custom Elements
<x-bacon></x-bacon>

25. Templates
Guarde trechos de código para reutilização
<template></template>

26. Templates
<template>
<img src="http://www.placehold.it/300x200" />
</template>

27. Shadow DOM
Blocos de código que você não vê mas estão
lá, encapsulados dentro do DOM!

28. Import
A forma mais fácil de você importar e
reutilizar componentes
<link rel=”import” href=”video”>

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

30. Cascading Style Sheets
https://www.youtube.com/watch?v=m1iV2C44Duc

31. CSS3
Advanced Selectors
Border Radius
Box Model
CSS Animations and Transitions
Calculating Values With calc()
Gradients
Media Queries
Etc...

32. CSS3
com css você pode fazer coisas incríveis

33. CSS3
O único problema
é que CSS é muito fácil

34. você não pensa para
escrever css

35. E de vez em quando, o que
era pra ser um Style sheet,
se torna um Style Shit

36. Padrões de Código

37. !CamelCase
Não use CamelCase em css. Prefira
manter tudo em minúsculo e usar hífen
para separar as palavras:
alertInfo
alert-info

38. !#ids
Prefira atribuir seus estilos css a classes
e não a ids ou tags
#logo
h1
.logo

39. Evite seletores gigantes
Prefira atribuir seus estilos css à classes
e não a ids ou tags
html > body> header> h1> .logo
.logo

40. Evite seletores gigantes
Prefira atribuir seus estilos css à classes
e não a ids ou tags
html > body> header> h1> .logo
.logo

41. Nomeie as classe por
responsabiliades e não por
propriedades
info-red
info-important

42. Evite usar @import
Para cada import é feita uma nova
requisição e isso não é legal!

43. Componentes

46. Task Runners

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

48. Carreira

49. Carreira
Sucesso =
dedicação X oportunidades X objetivos

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

51. Corra atrás de um 1000
10 X 10 X 10 = 1000

52. Vinicius Dacal Lopes
viniciusldacal@gmail.com
@vinicius_dacal
https://github.com/viniciusdacal