Upload File

front-end: o que é e o que faz

53
Front-End Thursday, August 22, 13

Upload: eduardo-rabelo

Post on 05-Dec-2014

260 views

Category:

Technology


8 download

Report

DESCRIPTION

Uma introdução à área de desenvolvimento web chamada Front-End Palestra realizada no ITA, para o evento ITA WebDev: http://itawebdev.herokuapp.com

TRANSCRIPT

Page 1: Front-End: O que é e o que faz

Front-End

Thursday, August 22, 13

Page 2: Front-End: O que é e o que faz

Eduardo RabeloFront-End Dev

@oieduardorabelo

Thursday, August 22, 13

Page 3: Front-End: O que é e o que faz

O que é Front-End?

Thursday, August 22, 13

Page 4: Front-End: O que é e o que faz

“É a etapa responsável por projetar e construir as interfaces que tem interação direta do usuário em um projeto web”

Thursday, August 22, 13

Page 5: Front-End: O que é e o que faz

Front-End

Designerou

Faz tela bonitinha

Thursday, August 22, 13

Page 6: Front-End: O que é e o que faz

Ferramentas Básicas

Thursday, August 22, 13

Page 7: Front-End: O que é e o que faz

Editor de Texto: Sublime TextThursday, August 22, 13

Page 8: Front-End: O que é e o que faz

Editor de Texto: Sublime Text + Plugin Package ControlThursday, August 22, 13

Page 9: Front-End: O que é e o que faz

Editor de Texto: Sublime TextThursday, August 22, 13

Page 10: Front-End: O que é e o que faz

Editor de Texto: Sublime TextThursday, August 22, 13

Page 11: Front-End: O que é e o que faz

Chrome DevToolsThursday, August 22, 13

Page 12: Front-End: O que é e o que faz

Chrome DevTools SnippetsThursday, August 22, 13

Page 13: Front-End: O que é e o que faz

Preocupações

Thursday, August 22, 13

Page 14: Front-End: O que é e o que faz

Thursday, August 22, 13

Page 15: Front-End: O que é e o que faz

http://gs.statcounter.comThursday, August 22, 13

http://gs.statcounter.com/
http://gs.statcounter.com/
Page 16: Front-End: O que é e o que faz

Sucessão do Papa Bento XVI, 2013Thursday, August 22, 13

http://gs.statcounter.com/
http://gs.statcounter.com/
Page 17: Front-End: O que é e o que faz

Tecnologias

Thursday, August 22, 13

Page 18: Front-End: O que é e o que faz

HTML CSS JS

Thursday, August 22, 13

Page 19: Front-End: O que é e o que faz

HTML CSS JS

CAMADADE

CONTEÚDO

“MARKUP”

Thursday, August 22, 13

Page 20: Front-End: O que é e o que faz

HTML CSS JS

CAMADADE

APRESENTAÇÃO

“STYLE”

CAMADADE

CONTEÚDO

“MARKUP”

Thursday, August 22, 13

Page 21: Front-End: O que é e o que faz

HTML CSS JS

CAMADADE

APRESENTAÇÃO

“STYLE”

CAMADADE

CONTEÚDO

“MARKUP”

CAMADADE

COMPORTAMENTO

“BEHAVIOR”

Thursday, August 22, 13

Page 22: Front-End: O que é e o que faz

HTML

Thursday, August 22, 13

Page 23: Front-End: O que é e o que faz

Thursday, August 22, 13

Page 24: Front-End: O que é e o que faz

Thursday, August 22, 13

Page 25: Front-End: O que é e o que faz

Thursday, August 22, 13

Page 26: Front-End: O que é e o que faz

Thursday, August 22, 13

Page 27: Front-End: O que é e o que faz

Thursday, August 22, 13

Page 28: Front-End: O que é e o que faz

Storage

Thursday, August 22, 13

Page 29: Front-End: O que é e o que faz

Storage 3D

Thursday, August 22, 13

Page 30: Front-End: O que é e o que faz

Storage 3DPerfor-mance

Thursday, August 22, 13

Page 31: Front-End: O que é e o que faz

Storage 3DPerfor-mance

WebSockets

Thursday, August 22, 13

Page 32: Front-End: O que é e o que faz

Storage 3DPerfor-mance

WebSockets

Semantics

Thursday, August 22, 13

Page 33: Front-End: O que é e o que faz

Storage 3DPerfor-mance

WebSockets

SemanticsAudioand

Video

Thursday, August 22, 13

Page 34: Front-End: O que é e o que faz

Storage 3DPerfor-mance

WebSockets

SemanticsAudioand

Video

FileAccess

Thursday, August 22, 13

Page 35: Front-End: O que é e o que faz

HTML5: SemânticaThursday, August 22, 13

http://gs.statcounter.com/
http://gs.statcounter.com/
Page 36: Front-End: O que é e o que faz

Thursday, August 22, 13

Page 37: Front-End: O que é e o que faz

90%

10%

HTML JS

Thursday, August 22, 13

Page 38: Front-End: O que é e o que faz

HTML ReferenceThursday, August 22, 13

http://gs.statcounter.com/
http://gs.statcounter.com/
Page 39: Front-End: O que é e o que faz

CSS

Thursday, August 22, 13

Page 40: Front-End: O que é e o que faz

Thursday, August 22, 13

Page 41: Front-End: O que é e o que faz

Thursday, August 22, 13

Page 42: Front-End: O que é e o que faz

Thursday, August 22, 13

Page 43: Front-End: O que é e o que faz

CSS SelectorsThursday, August 22, 13

http://gs.statcounter.com/
http://gs.statcounter.com/
Page 44: Front-End: O que é e o que faz

CSS ReferenceThursday, August 22, 13

http://gs.statcounter.com/
http://gs.statcounter.com/
Page 45: Front-End: O que é e o que faz

Shay Howe & CommunityThursday, August 22, 13

http://gs.statcounter.com/
http://gs.statcounter.com/
Page 46: Front-End: O que é e o que faz

Thursday, August 22, 13

Page 47: Front-End: O que é e o que faz

http://2012.beercamp.com/Thursday, August 22, 13

http://2012.beercamp.com/
http://2012.beercamp.com/
Page 48: Front-End: O que é e o que faz

JS

Thursday, August 22, 13

Page 49: Front-End: O que é e o que faz

Uma linguagem script com orientação a objetos baseada em protótipos, tipagem fraca e dinâmica e funções de primeira classe (pode ser construído em tempo de execução).

Thursday, August 22, 13

Page 50: Front-End: O que é e o que faz

Thursday, August 22, 13

Page 51: Front-End: O que é e o que faz

DOM ReferenceThursday, August 22, 13

http://gs.statcounter.com/
http://gs.statcounter.com/
Page 52: Front-End: O que é e o que faz

Thursday, August 22, 13

Page 53: Front-End: O que é e o que faz

obrigado!@oieduardorabelo

Thursday, August 22, 13


Revista Faz / N° 2 - Julio 2008Title Revista Faz / N 2 - Julio 2008 Author Equipo Revista Faz Subject dise�o de interfaz, interacci�n, experiencia de usuario, usabilidad

O Forte das Batarias - :: Associação de Estudos do Alto Tejo :: · 2015-04-06 · 1 Este artigo constitui um estudo prévio baseado no que será o ... O Forte das Batarias faz parte

O Deus que pro-vê e que faz ver: uma abordagem narrativa

Apresentação do PowerPoint...É o que nos dá asas para voar, que nos deixa sem chão; É a nossa motivação pessoal, um verdadeiro mergulho no solo fértil da fé; É o que faz

ICMC Advento 2008 - champagnat.org · O Advento, que a Igreja propõe cada ano, nos recorda que a justiça faz parte do projeto de Deus para o seu povo, para toda a humanidade. Esperamos

Installation Products for Industrial Applications · 1.6 faz-c1,6/1 278548 faz-c1,6/1n 278661 faz-c1,6/2 278747 2 faz-c2/1 278549 faz-c2/1n 278662 faz-c2/2 278748 3 faz-c3/1 278551

Arte e Décadence em Nietzsche: O Caso Wagner, um Tornar-se ... · Entretanto, se a leitura que aqui se faz preocupa-se em jogar as próprias brincadeiras que o texto de Nietzsche

Questions on Brazilian ethics in the Estado de Mi-dialnet.unirioja.es/descarga/articulo/6987640.pdfque caracteriza o popularmente conhecido “jeitinho brasileiro”, que faz referência

O IMPACTO SOCIAL DA FAMÍLIA KARDASHIAN-JENNER … de Moda - 2017/COM_ORAL/co_4... · se faz presente na vida de muitos que compõem a sociedade ... o que implica no aumento de investimentos

O que você faz para ser Mobile? TDC2013

O QUE FICA DO OUTRO LADO DO OLHO (TAMBÉM) FAZ …anpap.org.br/anais/2017/PDF/S12/26encontro______GÜNTHER_Luisa.pdf · o cheiro da morte nos ronda, a única pergunta possível é

The Yellow wallpaper - core.ac.uk · fazer é pensar na minha condição, e confesso que isso me faz sentir sempre mal. ... que o que eu estava a sentir era uma corrente de ar, e

files.portuguesvillare.webnode.com.brfiles.portuguesvillare.webnode.com.br/200000192... · Web viewComo é que faz pra lavar a roupa? Vai na fonte, vai na fonte Como é que faz pra

O USO DE TECNOLOGIAS EM AULAS DE LE ...veramenezes.com/paivabohn.pdfAtividade 1. Marque com um X o que você faz com o processador de textos. 1. Correção de ortografia 2. Opções

O QUE FAZ O TEMPO

Redalyc.EL AMOR QUE NOS HACE LIBRES. UNA … · el amor que nos hace libres marÍa isabel gil espinosa 98 o amor que nos faz livres: uma aproximaÇÃo ao horizonte libertador da

O QUE O TEMPO FAZ

MANUAL DE NORMAS E ROTINAS DA CENTRAL DE ......Tal medida se faz necessária, visto que o registro de entrega de pacotes para o processamento na CME/FAO é individualizado. O livro

Reading Activities: May 4,2020- May 8, 2020 · 2020. 5. 5. · Tap, Nan, Tap! Segunda-feira: Visualize o livro e pense nas fotos. Sobre o que poderia ser a história? O que te faz

MC448 — An alise de Algoritmos I´ - ic.unicamp.brlee/mc448/ordlin+kesimo-4up.pdf · E exatamente o que faz o algoritmo´ Counting Sort. Cid Carvalho de Souza, Candida Nunes da

Ceci n’est pas un 175 autoportrait: o elidir diagramático ...repositorio.ul.pt/bitstream/10451/22689/2/ULFBA_Estúdio 12_texto... · faz da relação da imagem com o objecto que

Book 03 analista de seo bureau - uninter.com · O QUE FAZ O ANALISTA DE SEO PARA MARKETING DIGITAL 5 ... fases de concepção, desenvolvimento, implementação e manutenção de um

UNIVERSIDADE FEDERAL RURAL DO SEMI-ÁRIDO … - BCT/2014-1... · que para o gerenciamento dos resíduos químicos, faz-se necessário seu armazenamento, o presente trabalho teve como

PRISCILA SALETE INÁCIO GARCIA...Nos SO o módulo que faz o gerenciamento da memória tem o nome de “Gerente de memória”, seu gerenciamento envolver fazer gerenciamento do espaço

ILUSTRADO POR EDWARD HEMINGWAY ESCRITO POR …zahar2.tempsite.ws/doc/t1299.pdf · JOHN STEINBECK Jack Rose 88 ... “E o que o senhor faz ... tudo tendo como meta o whisky. Um homem

PO -H O Üçlü Sistemin 500C Sıcaklıkta Çözünürlüğü, 2 Faz

PROPOSTA DE UM PROTOCOLO DE ACOLHIMENTO COM ... · ... uma das estratégias que faz parte dessa política, é o ... (ainda na unidade de atenção primaria) e o ... pela recepcionista

Analíticos de Políticas Educativas - redalyc.org · que se torna objeto de interesse cient fico e ... Ent o voc quer dizer que a est tua que a est tua faz pensar na est tua,

SAP CO CONTROLLING - Planning IT TechnologySAP CO é fazer o custeio e a valorização correta dos estoques. No sistema SAP ERP o módulo que faz o gerenciamento do estoque e o gerenciamento

investimentos subjetivos em Santo forte e A falta que me faz

8. AVALIAÇÃO DAS MEDIDAS DE MINIMIZAÇÃO · O oxigénio e o monóxido de carbono são medido em continuo nos fornos permitindo acompanhar ... o que faz com que esta medida seja

Manual do usuário da ferramenta da Web Assistente do Cisco ... · Como alterar o que o Connection reproduz quando você faz logon 18 ... Como alterar como o Connection controla as

O QUE E QUEM FAZ CINCIA - SciELO...imaginando-o muito inteligente, velho, louco, cabeludo e despenteado, cujo principal local de trabalho é o laboratório, estando a ciência relacionada

Código Penal - Sexual and Reproductive Health and Rights ... · capacidade militar e defesa ... É aprovado o código Penal que faz parte integrante da ... sendo o direito penal

Start moving. Novo SEAT Ibiza. - SEAT Portugal - Descubra ... · Start moving. O que o faz esperar? Está toda uma cidade lá fora à sua espera. O novo SEAT Ibiza combina a mais