Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Desenvolvimento Front End: o que não te ensinar...

Desenvolvimento Front End: o que não te ensinaram na escola

Minicurso ministrado na SCTI-UENF/2013.

Rômulo Machado

November 08, 2013
Tweet

More Decks by Rômulo Machado

Other Decks in Technology

Transcript

  1. Desenvolvimento front-end:  o que não te ensinaram  na

    escola Rômulo Machado SCTI-UENF/2013
  2. O que há de novo? • Novos elementos e atributos

    • Suporte completo à CSS3 • Elementos de vídeo e áudio • Gráficos 2D/3D • Armazenamento Local
  3. O que vamos ver? • Novos elementos e atributos •

    Suporte completo à CSS3 • Elementos de vídeo e áudio • Gráficos 2D/3D • Armazenamento Local
  4. <nav> “Uma seção da página que linka outras páginas no

    site ou outras seções da mesma página.”
  5. <section> “Um agrupamento de conteúdo baseado num tema.” • Pode

    substituir algumas divs. • Deve ser capaz de fazer sentido sozinho.
  6. <section> <div id="noticias"> <div id="noticia"> <h2>Inscrições para a SCTI estão

    abertas!</h2> <h3>Faça já a sua inscrição!</h3> <p>Neste dia 25/09/2013, abrem-se as inscrições para a Semana...</p> </div> </div>
  7. <section> <section id="noticias"> <div id="noticia"> <h2>Inscrições para a SCTI estão

    abertas!</h2> <h3>Faça já a sua inscrição!</h3> <p>Neste dia 25/09/2013, abrem-se as inscrições para a Semana...</p> </div> </section>
  8. <article> <section id="noticias"> <div id="noticia"> <h2>Inscrições para a SCTI estão

    abertas!</h2> <h3>Faça já a sua inscrição!</h3> <p>Neste dia 25/09/2013, abrem-se as inscrições para a Semana...</p> </div> </section>
  9. <article> <section id="noticias"> <article id="noticia"> <h2>Inscrições para a SCTI estão

    abertas!</h2> <h3>Faça já a sua inscrição!</h3> <p>Neste dia 25/09/2013, abrem-se as inscrições para a Semana...</p> </article> </section>
  10. –Hardboiled Web Design, Andy Clarke, pg. 95 “One way to

    check if article is the most appropriate element is to see if an article's content makes sense on its own; for example, would it make sense on its own when viewed in an RSS reader like Reeder for the iPad.”
  11. <aside> “Usado para representar conteúdo que não é o foco

    primário do <article> ou da página, mas ainda é relacionado ao <article> ou à página.” • Dentro de <article>: conteúdo deve ser relacionado ao <article>. • Fora de <article>: conteúdo deve ser relacionado ao site.
  12. O que vamos ver? • border-radius • box-shadow • text-shadow

    • RGBa • opacity • transform • transition • font-face
  13. border-radius element { border-radius: 10px; } ! element { border-radius:

    <top left> <top right> <bottom right> <bottom left>; }
  14. box-shadow #noticia-relacionada { box-shadow: 1px 2px 2px #000; } !

    element { box-shadow: <x offset> <y offset> <blur> <color>; }
  15. transition #apoio img { -webkit-filter: grayscale(100%); filter: grayscale(100%); opacity: 0.4;

    transition: opacity 0.4s ease-in-out; } ! #apoio img:hover { -webkit-filter: none; filter: none; opacity: 1; }
  16. @font-face Com @font-face podemos usar fontes não-convencionais no nosso site.

    • Um arquivo font (.otf, .ttf, .woff) • Uma declaração @font-face • Marcação típica de fonte
  17. Aninhamento nav { ul { margin: 0; padding: 0; list-style:

    none; } li { display: inline-block; a { display: block; padding: 6px 12px; text-decoration: none; } }
  18. Aninhamento nav ul { margin: 0; padding: 0; list-style: none;

    } ! nav li { display: inline-block; ! nav a { display: block; padding: 6px 12px; text-decoration: none; }
  19. Mixins @mixin border-radius($radius) { -webkit-border-radius: $radius; -moz-border-radius: $radius; -ms-border-radius: $radius;

    -o-border-radius: $radius; border-radius: $radius; } ! .box { @include border-radius(10px); }
  20. Extend/Herança .message { border: 1px; padding: 10px; color: #333; }

    ! .success { @extend .message; border-color: green; } ! .error { @extend .message; border-color: red; }
  21. Extend/Herança .message, .success, .error { border: 1px; padding: 10px; color:

    #333; } ! .success { border-color: green; } ! .error { border-color: red; }
  22. Onde tem mais? CSS-Tricks
 csstricks.com
 
 HTML5 Doctor
 html5doctor.com HTML5

    Rocks
 html5rocks.com Sidebar
 sidebar.io Smashing Magazine
 smashingmagazine.com
 
 Tableless
 tableless.com.br NetTuts+
 net.tutsplus.com CSS Wizardry
 csswizardry.com
  23. o que é de César. http://poachedmag.com/wp-content/uploads/2013/07/Grumpy-Cat-No.jpeg http://i.imgur.com/MbaQr.png http://octodex.github.com/images/ironcat.jpg http://www.w3.org/html/logo/downloads/HTML5_Logo_512.png http://images.fanpop.com/images/image_uploads/Dwight-the-

    office-420011_1024_768.jpg http://i4.mirror.co.uk/incoming/article1423923.ece/ALTERNATES/s2197/A%20man %20using%20an%20iPad-1423923 http://www.optimum7.com/internet-marketing/wp-content/uploads/2013/04/ CSS3.png http://blogs.avg.com/wp-content/uploads/2013/09/4fc7c62eb312d3.01670533.png http://dreamup.org/wp-content/uploads/2012/02/Barney-Stinson.jpg