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

Desenvolvimento front-end: o que não te ensinaram na
escola Rômulo Machado SCTI-UENF/2013

Agenda • Ferramentas • Conhecimentos Básicos • HTML5 • CSS3
• SASS

Ferramentas

Editor de texto

Browser(s)

e o IE.

DevTools

Conhecimentos Básicos

Anatomia de uma página <html> <head> <title></title>  </head> <body> </body>
</html>

CSS • Inline  • head  • link

CSS: inline <h1 style=“color: #FF0000;”>  SCTI Rocks!  </h1>

NOOOOOOOOOOOOOO!

CSS: head <head> <style> h1 { color: #FF0000; } </style> 
</head>

CSS: link <head> <link rel=“stylesheet” href=“style.css”>  </head>

CSS • Element  • Class  • ID

CSS: element <h1 class=“event-title” id=“title”>  SCTI Rocks!  </h1> ! h1
{ color: #FF0000; }

CSS: class <h1 class=“event-title” id=“title”>  SCTI Rocks!  </h1> ! .event-title
{ color: #FF0000; }

CSS: ID <h1 class=“event-title” id=“title”>  SCTI Rocks!  </h1> ! #title
{ color: #FF0000; }

https://github.com/romulomachado/minicurso-scti-front-end

O que há de novo? • Novos elementos e atributos
• Suporte completo à CSS3 • Elementos de vídeo e áudio • Gráﬁcos 2D/3D • Armazenamento Local

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

ELEMENTOS ATUALIZADOS

NOVAS TAGS <header> <nav> <aside> <footer> <section> <article>

<header> “Um grupo de elementos introdutórios ou auxiliares à navegação.”

<header> <div id="header"> <h1>SCTI Rocks!</h1> </div> <header> <h1>SCTI Rocks!</h1> </header>

<nav> “Uma seção da página que linka outras páginas no
site ou outras seções da mesma página.”

<nav> <div id="navigation"> <ul> <li>Home</li> <li>Sobre</li> <li>Palestrantes</li> ... </ul> </div>

<nav> <nav> <ul> <li>Home</li> <li>Sobre</li> <li>Palestrantes</li> </ul> </nav>

<section> “Um agrupamento de conteúdo baseado num tema.” • Pode
substituir algumas divs. • Deve ser capaz de fazer sentido sozinho.

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

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

<article> “Parte independente e auto-explicativa.” • Post de um blog,
Artigo de revista, Comentário

“Qual é a diferença entre <section> e <article>?”

! <section id="noticias"> <article id="noticia"> <article id="noticia"> <article id="noticia">

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

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

–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.”

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

<footer> “Inclui informação que fecha uma determinada seção.”

O que vamos ver? • border-radius • box-shadow • text-shadow
• RGBa • opacity • transform • transition • font-face

border-radius A propriedade border-radius aplica cantos arredondados às bordas.

border-radius element { border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-right-radius: 10px; border-bottom-left-radius:
10px; }

border-radius element { border-radius: 10px; } ! element { border-radius:
<top left> <top right> <bottom right> <bottom left>; }

border-radius nav li { border-top-left-radius: 10px; border-top-right-radius: 10px; }

box-shadow A propriedade box-shadow especiﬁca a sombra de um elemento.

box-shadow #noticia-relacionada { box-shadow: 1px 2px 2px #000; } !
element { box-shadow: <x offset> <y offset> <blur> <color>; }

text-shadow A propriedade text-shadow é similar à box-shadow, mas é
aplicável à texto, como o nome sugere.

text-shadow h2 { text-shadow: 1px 2px 2px #000; }

text-shadow h2 { text-shadow: <offset-x> <offset-y> <blur-radius> <color>; }

RGBa Uma nova forma de deﬁnir cor no CSS.

RGBa h2 { color: <R-value> <G-value> <B-color> <opacity>; }

opacity CSS3 deixa você especiﬁcar a opacidade de um elemento
usando a propriedade opacity.

opacity #noticia-relacionada { ... ! opacity: 0.4; }

opacity #noticia-relacionada:hover { opacity: 1; }

transform Permite elementos serem transformados num espaço 2D. • scale,
rotate, skew e translate

transform #patrocinadores img:hover { -webkit-transform: scale(1.3); -moz-transform: scale(1.3); -o-transform: scale(1.3);
transform: scale(1.3); }

transition Faz a transição entre duas propriedades ocorrerem suavemente.

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; }

@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

@font-face @font-face { font-family: "SCTI Supercool Font"; src: url("fonts/scti.ttf"); format("truetype");
} ! h1 { font-family: “SCTI Supercool Font"; }

http://www.w3schools.com/cssref/css3_browsersupport.asp CSS3 Browser Support

SASS: Syntactically Awesome Style Sheets

Princípios do Desenvolvimento de Software • Don’t Repeat Yourself  •
Facilite o reuso  • Não reinvente a roda

CSS? • Don’t Repeat Yourself  • Facilite o reuso  •
asdsa

Pré-processamento • Variáveis • Aninhamento • Mixins • Herança •
E mais…

Variáveis $font-stack: Helvetica, sans-serif; $primary-color: #333; ! body { font:
100% $font-stack; color: $primary-color; }

Variáveis body { font: 100% Helvetica, sans-serif; color: #333; }

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

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; }

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); }

Mixins .box { -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius:
10px; border-radius: 10px; }

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

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

Eu não inventei tudo isso.

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

À César… http://img.photobucket.com/albums/v327/ShirelingUK/JOURNEY/CH39%20NZTTTPREM/moria20.jpg http://www.technobuffalo.com/wp-content/uploads/2011/08/steve-jobs-pointing.jpg http://caseytygrett.com/wp-content/uploads/2012/06/tools.jpg http://upload.wikimedia.org/wikipedia/commons/thumb/9/9f/Vimlogo.svg/605px-Vimlogo.svg.png http://upload.wikimedia.org/wikipedia/en/4/4c/Sublime_Text_Logo.png https://projects.gnome.org/gedit/images/gedit-logo.png http://upload.wikimedia.org/wikipedia/commons/8/87/Google_Chrome_icon_(2011).png http://upload.wikimedia.org/wikipedia/sr/0/0c/Firefox-logo.png
http://upload.wikimedia.org/wikipedia/en/archive/6/61/20131012194636!Apple_Safari.png http://ie.microsoft.com/testdrive/Graphics/IEBeatz/assets/ie-logo-small.png http://2.bp.blogspot.com/-t6tVqmgHXz8/UcoX-vyRgrI/AAAAAAAABz8/olk99uZ_Uz4/s1600/ miko_hughes_1257789714.jpg http://zombiesruineverything.ﬁles.wordpress.com/2013/08/luke4.jpg

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

Obrigado! [email protected] github.com/romulomachado facebook.com/romulomachado twitter.com/romulomachado_ speakerdeck.com/romulomachado

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

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

More Decks by Rômulo Machado

Other Decks in Technology

Featured

Transcript