Front end - the right way
-
Upload
vinicius-dacal-lopes -
Category
Presentations & Public Speaking
-
view
198 -
download
0
description
Transcript of Front end - the right way
![Page 1: Front end - the right way](https://reader033.fdocuments.in/reader033/viewer/2022060118/558c8db9d8b42a10268b456f/html5/thumbnails/1.jpg)
FRONT-ENDthe right way
@vinicius_dacal
![Page 2: Front end - the right way](https://reader033.fdocuments.in/reader033/viewer/2022060118/558c8db9d8b42a10268b456f/html5/thumbnails/2.jpg)
Sistemas para Internet
![Page 3: Front end - the right way](https://reader033.fdocuments.in/reader033/viewer/2022060118/558c8db9d8b42a10268b456f/html5/thumbnails/3.jpg)
Front-endBack-endMobile dev
![Page 4: Front end - the right way](https://reader033.fdocuments.in/reader033/viewer/2022060118/558c8db9d8b42a10268b456f/html5/thumbnails/4.jpg)
![Page 5: Front end - the right way](https://reader033.fdocuments.in/reader033/viewer/2022060118/558c8db9d8b42a10268b456f/html5/thumbnails/5.jpg)
![Page 6: Front end - the right way](https://reader033.fdocuments.in/reader033/viewer/2022060118/558c8db9d8b42a10268b456f/html5/thumbnails/6.jpg)
![Page 7: Front end - the right way](https://reader033.fdocuments.in/reader033/viewer/2022060118/558c8db9d8b42a10268b456f/html5/thumbnails/7.jpg)
![Page 8: Front end - the right way](https://reader033.fdocuments.in/reader033/viewer/2022060118/558c8db9d8b42a10268b456f/html5/thumbnails/8.jpg)
SÓ PODE SER HTML5
![Page 9: Front end - the right way](https://reader033.fdocuments.in/reader033/viewer/2022060118/558c8db9d8b42a10268b456f/html5/thumbnails/9.jpg)
SÓ O HTML5 SALVA!
![Page 10: Front end - the right way](https://reader033.fdocuments.in/reader033/viewer/2022060118/558c8db9d8b42a10268b456f/html5/thumbnails/10.jpg)
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?
![Page 11: Front end - the right way](https://reader033.fdocuments.in/reader033/viewer/2022060118/558c8db9d8b42a10268b456f/html5/thumbnails/11.jpg)
É 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
![Page 12: Front end - the right way](https://reader033.fdocuments.in/reader033/viewer/2022060118/558c8db9d8b42a10268b456f/html5/thumbnails/12.jpg)
<div>
<div>
<div>
![Page 13: Front end - the right way](https://reader033.fdocuments.in/reader033/viewer/2022060118/558c8db9d8b42a10268b456f/html5/thumbnails/13.jpg)
<header>
<main>
<footer>
![Page 14: Front end - the right way](https://reader033.fdocuments.in/reader033/viewer/2022060118/558c8db9d8b42a10268b456f/html5/thumbnails/14.jpg)
<header>
<footer>
<nav>
<main>
![Page 15: Front end - the right way](https://reader033.fdocuments.in/reader033/viewer/2022060118/558c8db9d8b42a10268b456f/html5/thumbnails/15.jpg)
<header>
<footer>
<article>
<article>
<nav>
<article>
![Page 16: Front end - the right way](https://reader033.fdocuments.in/reader033/viewer/2022060118/558c8db9d8b42a10268b456f/html5/thumbnails/16.jpg)
Microdata
Padrão de representação de informações que estende as potencialidades semânticas do HTML5
![Page 17: Front end - the right way](https://reader033.fdocuments.in/reader033/viewer/2022060118/558c8db9d8b42a10268b456f/html5/thumbnails/17.jpg)
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>
![Page 18: Front end - the right way](https://reader033.fdocuments.in/reader033/viewer/2022060118/558c8db9d8b42a10268b456f/html5/thumbnails/18.jpg)
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
![Page 19: Front end - the right way](https://reader033.fdocuments.in/reader033/viewer/2022060118/558c8db9d8b42a10268b456f/html5/thumbnails/19.jpg)
Opengraph
![Page 20: Front end - the right way](https://reader033.fdocuments.in/reader033/viewer/2022060118/558c8db9d8b42a10268b456f/html5/thumbnails/20.jpg)
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
![Page 21: Front end - the right way](https://reader033.fdocuments.in/reader033/viewer/2022060118/558c8db9d8b42a10268b456f/html5/thumbnails/21.jpg)
Web Components
The Future
http://webcomponents.org/
![Page 22: Front end - the right way](https://reader033.fdocuments.in/reader033/viewer/2022060118/558c8db9d8b42a10268b456f/html5/thumbnails/22.jpg)
Custom ElementsTemplates
Shadow DOMImport
![Page 23: Front end - the right way](https://reader033.fdocuments.in/reader033/viewer/2022060118/558c8db9d8b42a10268b456f/html5/thumbnails/23.jpg)
Custom ElementsE se você pudesse criar sua própria TAG?
![Page 24: Front end - the right way](https://reader033.fdocuments.in/reader033/viewer/2022060118/558c8db9d8b42a10268b456f/html5/thumbnails/24.jpg)
Custom Elements
<x-bacon></x-bacon>
![Page 25: Front end - the right way](https://reader033.fdocuments.in/reader033/viewer/2022060118/558c8db9d8b42a10268b456f/html5/thumbnails/25.jpg)
TemplatesGuarde trechos de código para reutilização
<template></template>
![Page 26: Front end - the right way](https://reader033.fdocuments.in/reader033/viewer/2022060118/558c8db9d8b42a10268b456f/html5/thumbnails/26.jpg)
Templates
<template>
<img src="http://www.placehold.it/300x200" />
</template>
![Page 27: Front end - the right way](https://reader033.fdocuments.in/reader033/viewer/2022060118/558c8db9d8b42a10268b456f/html5/thumbnails/27.jpg)
Shadow DOMBlocos de código que você não vê mas estão
lá, encapsulados dentro do DOM!
![Page 28: Front end - the right way](https://reader033.fdocuments.in/reader033/viewer/2022060118/558c8db9d8b42a10268b456f/html5/thumbnails/28.jpg)
ImportA forma mais fácil de você importar e
reutilizar componentes
<link rel=”import” href=”video”>
![Page 29: Front end - the right way](https://reader033.fdocuments.in/reader033/viewer/2022060118/558c8db9d8b42a10268b456f/html5/thumbnails/29.jpg)
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
![Page 30: Front end - the right way](https://reader033.fdocuments.in/reader033/viewer/2022060118/558c8db9d8b42a10268b456f/html5/thumbnails/30.jpg)
Cascading Style Sheetshttps://www.youtube.com/watch?v=m1iV2C44Duc
![Page 31: Front end - the right way](https://reader033.fdocuments.in/reader033/viewer/2022060118/558c8db9d8b42a10268b456f/html5/thumbnails/31.jpg)
CSS3
Advanced SelectorsBorder RadiusBox ModelCSS Animations and TransitionsCalculating Values With calc()GradientsMedia QueriesEtc...
![Page 32: Front end - the right way](https://reader033.fdocuments.in/reader033/viewer/2022060118/558c8db9d8b42a10268b456f/html5/thumbnails/32.jpg)
CSS3com css você pode fazer coisas incríveis
![Page 33: Front end - the right way](https://reader033.fdocuments.in/reader033/viewer/2022060118/558c8db9d8b42a10268b456f/html5/thumbnails/33.jpg)
CSS3O único problema
é que CSS é muito fácil
![Page 34: Front end - the right way](https://reader033.fdocuments.in/reader033/viewer/2022060118/558c8db9d8b42a10268b456f/html5/thumbnails/34.jpg)
você não pensa para escrever css
![Page 35: Front end - the right way](https://reader033.fdocuments.in/reader033/viewer/2022060118/558c8db9d8b42a10268b456f/html5/thumbnails/35.jpg)
E de vez em quando, o que era pra ser um Style sheet,
se torna um Style Shit
![Page 36: Front end - the right way](https://reader033.fdocuments.in/reader033/viewer/2022060118/558c8db9d8b42a10268b456f/html5/thumbnails/36.jpg)
Padrões de Código
![Page 37: Front end - the right way](https://reader033.fdocuments.in/reader033/viewer/2022060118/558c8db9d8b42a10268b456f/html5/thumbnails/37.jpg)
!CamelCaseNão use CamelCase em css. Prefira
manter tudo em minúsculo e usar hífen para separar as palavras:
alertInfo
alert-info
![Page 38: Front end - the right way](https://reader033.fdocuments.in/reader033/viewer/2022060118/558c8db9d8b42a10268b456f/html5/thumbnails/38.jpg)
!#idsPrefira atribuir seus estilos css a classes
e não a ids ou tags
#logo
.logo
h1
![Page 39: Front end - the right way](https://reader033.fdocuments.in/reader033/viewer/2022060118/558c8db9d8b42a10268b456f/html5/thumbnails/39.jpg)
Evite seletores gigantesPrefira atribuir seus estilos css à classes
e não a ids ou tags
html > body> header> h1> .logo
.logo
![Page 40: Front end - the right way](https://reader033.fdocuments.in/reader033/viewer/2022060118/558c8db9d8b42a10268b456f/html5/thumbnails/40.jpg)
Evite seletores gigantesPrefira atribuir seus estilos css à classes
e não a ids ou tags
html > body> header> h1> .logo
.logo
![Page 41: Front end - the right way](https://reader033.fdocuments.in/reader033/viewer/2022060118/558c8db9d8b42a10268b456f/html5/thumbnails/41.jpg)
Nomeie as classe por responsabiliades e não por
propriedades
info-red
info-important
![Page 42: Front end - the right way](https://reader033.fdocuments.in/reader033/viewer/2022060118/558c8db9d8b42a10268b456f/html5/thumbnails/42.jpg)
Evite usar @importPara cada import é feita uma nova
requisição e isso não é legal!
![Page 43: Front end - the right way](https://reader033.fdocuments.in/reader033/viewer/2022060118/558c8db9d8b42a10268b456f/html5/thumbnails/43.jpg)
Componentes
![Page 44: Front end - the right way](https://reader033.fdocuments.in/reader033/viewer/2022060118/558c8db9d8b42a10268b456f/html5/thumbnails/44.jpg)
![Page 45: Front end - the right way](https://reader033.fdocuments.in/reader033/viewer/2022060118/558c8db9d8b42a10268b456f/html5/thumbnails/45.jpg)
![Page 46: Front end - the right way](https://reader033.fdocuments.in/reader033/viewer/2022060118/558c8db9d8b42a10268b456f/html5/thumbnails/46.jpg)
Task Runners
![Page 47: Front end - the right way](https://reader033.fdocuments.in/reader033/viewer/2022060118/558c8db9d8b42a10268b456f/html5/thumbnails/47.jpg)
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...
![Page 48: Front end - the right way](https://reader033.fdocuments.in/reader033/viewer/2022060118/558c8db9d8b42a10268b456f/html5/thumbnails/48.jpg)
Carreira
![Page 49: Front end - the right way](https://reader033.fdocuments.in/reader033/viewer/2022060118/558c8db9d8b42a10268b456f/html5/thumbnails/49.jpg)
Carreira
Sucesso = dedicação X oportunidades X objetivos
![Page 50: Front end - the right way](https://reader033.fdocuments.in/reader033/viewer/2022060118/558c8db9d8b42a10268b456f/html5/thumbnails/50.jpg)
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
![Page 51: Front end - the right way](https://reader033.fdocuments.in/reader033/viewer/2022060118/558c8db9d8b42a10268b456f/html5/thumbnails/51.jpg)
Corra atrás de um 1000
10 X 10 X 10 = 1000