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

Vinicius Dacal Lopes

viniciusldacal@gmail.com@vinicius_dacal

https://github.com/viniciusdacal