Palestra explicando sobre as novas tags de HTML5, o que isso impacta na acessibilidade, além de explicar um pouco sobre flexbox

1. Frontend ++
SEO e Flexbox
Fernanda Bernardo

2. HTML
Semântico

7. ?
?
?
??

8. Tags HTML5
<section>
<nav>
<article>
<aside>
<header>
<footer>
<main>
<hgroup>
<figure
>
<figcaption>
<video>
<canvas><svg>

9. <header> </header>
<nav> </nav>
<aside>
</aside>
<footer> </footer>
<section>
</section>
<article>
</article>

10. <figure>
<img src=”octocat.png” alt=”octocat”>
<figcaption> Octocat programadora
</figcaption>
</figure>
Octocat programadora

11. <hgroup>
<h1>Main title</h1>
<h2>Secondary title</h2>
</hgroup>
Main title
Secondary title

12. <canvas id="myCanvas" width="200" height="
100" style="border:4px solid #000000;"
></canvas>
<svg width="100" height="100">
<circle cx="50" cy="50" r="40"
stroke="green" stroke-width="4"
fill="yellow" />
</svg>

13. Flexbox

14. ● Organizar elementos na tela
● Sem float
● Sem @media

15. http://caniuse.com/#search=flexbox
Compatibilidade

17. Flex Container
Flex Item Flex Item Flex Item
.container {
display: flex;
}

18. column column-reverse
row row-reverse
Flex Direction

19. nowrap
uma linha
esquerda -> direita
Flex Wrap
wrap
várias linhas
esquerda -> direita
wrap-reverse
várias linhas
direita -> esquerda

20. 2 3
Order
1
.item {
order: <integer>;
}
12 99-1

21. fernandabernardo94@gmail.com
Obrigada!