front end - the right way
DESCRIPTION
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.TRANSCRIPT
FRONT-ENDthe right way
@vinicius_dacal
Sistemas para Internet
Front-endBack-endMobile dev
SÓ PODE SER HTML5
SÓ O HTML5 SALVA!
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
O que mudou?
É 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
Semântica
<div>
<div>
<div>
<header>
<main>
<footer>
<header>
<footer>
<nav>
<main>
<header>
<footer>
<article>
<article>
<nav>
<article>
Microdata
Padrão de representação de informações que estende as potencialidades semânticas do HTML5
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>
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
Opengraph
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
Web Components
The Future
http://webcomponents.org/
Custom ElementsTemplates
Shadow DOMImport
Custom ElementsE se você pudesse criar sua própria TAG?
Custom Elements
<x-bacon></x-bacon>
TemplatesGuarde trechos de código para reutilização
<template></template>
Templates
<template>
<img src="http://www.placehold.it/300x200" />
</template>
Shadow DOMBlocos de código que você não vê mas estão
lá, encapsulados dentro do DOM!
ImportA forma mais fácil de você importar e
reutilizar componentes
<link rel=”import” href=”video”>
Suporte dos BrowsersAtualmente nem todos os browsers suportam as features para
web components! Mas você pode começar a brincar hoje mesmo, usando polyfills.
Polymer
x-tags
Cascading Style Sheetshttps://www.youtube.com/watch?v=m1iV2C44Duc
CSS3
Advanced SelectorsBorder RadiusBox ModelCSS Animations and TransitionsCalculating Values With calc()GradientsMedia QueriesEtc...
CSS3com css você pode fazer coisas incríveis
CSS3O único problema
é que CSS é muito fácil
você não pensa para escrever css
E de vez em quando, o que era pra ser um Style sheet,
se torna um Style Shit
Padrões de Código
!CamelCaseNão use CamelCase em css. Prefira
manter tudo em minúsculo e usar hífen para separar as palavras:
alertInfo
alert-info
!#idsPrefira atribuir seus estilos css a classes
e não a ids ou tags
#logo
.logo
h1
Evite seletores gigantesPrefira atribuir seus estilos css à classes
e não a ids ou tags
html > body> header> h1> .logo
.logo
Evite seletores gigantesPrefira atribuir seus estilos css à classes
e não a ids ou tags
html > body> header> h1> .logo
.logo
Nomeie as classe por responsabiliades e não por
propriedades
info-red
info-important
Evite usar @importPara cada import é feita uma nova
requisição e isso não é legal!
Componentes
Task Runners
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...
Carreira
Carreira
Sucesso = dedicação X oportunidades X objetivos
Carreira
0 X 10 X 10 = 0
Se algum dos fatores for ZERO, você está fazendo algo errado
Sucesso = dedicação X oportunidades X objetivos
Corra atrás de um 1000
10 X 10 X 10 = 1000
