SlideShare uma empresa Scribd logo
Introdução ao desenvolvimento
de aplicações web
“Transformar equipes de desenvolvimento de software”
http://www.agilecode.com.br
Introdução ao desenvolvimento de aplicações web
Rodrigo Branas
rodrigo.branas@agilecode.com.br
http://www.agilecode.com.br
• Desenvolvendo Software na Gennera
• Criando treinamentos na Agile Code
• Escrevendo na Java Magazine e PacktPub
• Palestrando sobre desenvolvimento de
software em eventos, universidades e
empresas
Certificações
Formação Acadêmica
Ciências da Computação – UFSC
Gerenciamento de Projetos - FGV
SCJA, SCJP, SCJD, SCWCD, SCBCD, PMP, MCP e CSM
Experiência
Há mais de 12 anos desenvolvendo software na
plataforma Java com as empresas: EDS, HP, NET,
Citibank, GM, Dígitro, Softplan, OnCast, Senai,
VALE, RBS, Unimed, Globalcode, V.Office, Suntech,
WPlex e Gennera.
• Há mais de 5 anos liderando pessoas.
• Mais de 2000 horas em sala de aula.
• Mais de 100 apresentações em eventos.
• 6 artigos escritos para revistas.
• 1 livro.
• Mais de 500 profissionais treinados.
• Criação de 22 palestras.
• Criação de 10 treinamentos.
• Criação de mais de 3.000 slides.
Quem inventou a Web?
Tim Berners-Lee
Em 1990, no CERN, Berners-Lee construiu o
primeiro servidor, o primeiro navegador e as
primeiras páginas dando origem a
World Wide Web (ou WWW).
Introdução ao desenvolvimento de aplicações web
Primeiro website da história!
No princípio era tudo estático
Como fazer para torná-la
mais dinâmica?
Gerando código HTML no servidor
Nascia a tecnologia CGI em 1993
Common Gateway Interface
Por meio da tecnologia CGI, era possível criar
uma interface de comunicação entre o servidor
web e um programa, permitindo o recebimento
de parâmetros e a geração de conteúdo
dinâmico.
Geração de conteúdo HTML
no servidor e pouca interação
NosprimórdiosaWeb1.0
As pessoas foram ficando viciadas
A necessidade de interação acabou
ficando cada vez maior!
Como fazer para torná-la
mais interativa?
Introdução ao desenvolvimento de aplicações web
EntrandonaWeb2.0
Quando pensamos em JavaScript,
qual é a primeira coisa que surge?
Introdução ao desenvolvimento de aplicações web
O Ministério da Saúde adverte:
O uso excessivo de JavaScript pode
levar o projeto ao caos e os
desenvolvedores à loucura!
Introdução ao desenvolvimento de aplicações web
Introdução ao desenvolvimento de aplicações web
Como fazer para começar a
organizar esse negócio?
O que faltava para viabilizar o
desenvolvimento de aplicações front-end?
• Reduzir problemas de cross-browsing
O que faltava para viabilizar o
desenvolvimento de aplicações front-end?
• Reduzir problemas de cross-browsing
• Parar de recarregar a página o tempo todo
O que faltava para viabilizar o
desenvolvimento de aplicações front-end?
• Reduzir problemas de cross-browsing
• Parar de recarregar a página o tempo todo
• Estruturar a aplicação em camadas com
responsabilidades bem definidas
O que faltava para viabilizar o
desenvolvimento de aplicações front-end?
• Reduzir problemas de cross-browsing
• Parar de recarregar a página o tempo todo
• Estruturar a aplicação em camadas com
responsabilidades bem definidas
• Realizar injeção de dependências
O que faltava para viabilizar o
desenvolvimento de aplicações front-end?
• Reduzir problemas de cross-browsing
• Parar de recarregar a página o tempo todo
• Estruturar a aplicação em camadas com
responsabilidades bem definidas
• Realizar injeção de dependências
• Criar componentes reusáveis
O que faltava para viabilizar o
desenvolvimento de aplicações front-end?
• Reduzir problemas de cross-browsing
• Parar de recarregar a página o tempo todo
• Estruturar a aplicação em camadas com
responsabilidades bem definidas
• Realizar injeção de dependências
• Criar componentes reusáveis
• Automatizar os testes
O que faltava para viabilizar o
desenvolvimento de aplicações front-end?
• Reduzir problemas de cross-browsing
• Parar de recarregar a página o tempo todo
• Estruturar a aplicação em camadas com
responsabilidades bem definidas
• Realizar injeção de dependências
• Criar componentes reusáveis
• Automatizar os testes
• Utilizar ferramentas para automatizar o
workflow dos projetos
Introdução ao desenvolvimento de aplicações web
Nos separamos, e agora?
Quem fica com o que?
Front-end (HTML, CSS e JavaScript)
• Arquitetura da informação
• Layout
• Regras de interface
• Renderização
Back-end (Java, C#, PHP, Ruby, Python, ...)
• Processamento
• Regras de negócio
• Dados

Mais conteúdo relacionado

Mais procurados (20)

PPTX
Bower
Rodrigo Branas
 
PDF
Clean Architecture
Rodrigo Branas
 
PPTX
HTTP, JSON, REST e AJAX com AngularJS
Rodrigo Branas
 
PPTX
Aprendendo Na Prática: Aplicativos Web com HTML5, Angular.js, Twitter Bootstr...
Daniel Makiyama
 
PDF
Material Design simples e rapido com AngularJS
Henrique Limas
 
PDF
Java Web Fácil com VRaptor
Frederico Maia Arantes
 
PPTX
Introdução ao AngularJS!
Diullian Casagrande
 
PPTX
Introdução ao AngularJS
Rodrigo Branas
 
PPTX
Scope AngularJS
Rodrigo Branas
 
PDF
Introdução ao LiveOak
jesuinoPower
 
ODP
Javascript para adultos
Guilherme Blanco
 
PDF
Testando uma aplicação AngularJS utilizando o Karma
Henrique Limas
 
PPTX
Primeiros passos no Vue.js
Joel Rodrigues
 
PPTX
Automação de Testes com AngularJS
Rodrigo Branas
 
PDF
VRaptor - Um Framework MVC Web para desenvolvimento ágil com JAVA
Yelken Heckman Ferreira Gonzales
 
PDF
Conectando jBPM com o mundo - TDC 2014 SP
jesuinoPower
 
PPT
Rapida apresentacao sobre o Grails
Diego Cavalcanti
 
PPTX
Apresentação JQuery
Kassiano Pretto
 
PPTX
A evolução do AngularJS
Rodrigo Branas
 
PDF
JavaFX: A nova biblioteca gráfica da plataforma Java
jesuinoPower
 
Clean Architecture
Rodrigo Branas
 
HTTP, JSON, REST e AJAX com AngularJS
Rodrigo Branas
 
Aprendendo Na Prática: Aplicativos Web com HTML5, Angular.js, Twitter Bootstr...
Daniel Makiyama
 
Material Design simples e rapido com AngularJS
Henrique Limas
 
Java Web Fácil com VRaptor
Frederico Maia Arantes
 
Introdução ao AngularJS!
Diullian Casagrande
 
Introdução ao AngularJS
Rodrigo Branas
 
Scope AngularJS
Rodrigo Branas
 
Introdução ao LiveOak
jesuinoPower
 
Javascript para adultos
Guilherme Blanco
 
Testando uma aplicação AngularJS utilizando o Karma
Henrique Limas
 
Primeiros passos no Vue.js
Joel Rodrigues
 
Automação de Testes com AngularJS
Rodrigo Branas
 
VRaptor - Um Framework MVC Web para desenvolvimento ágil com JAVA
Yelken Heckman Ferreira Gonzales
 
Conectando jBPM com o mundo - TDC 2014 SP
jesuinoPower
 
Rapida apresentacao sobre o Grails
Diego Cavalcanti
 
Apresentação JQuery
Kassiano Pretto
 
A evolução do AngularJS
Rodrigo Branas
 
JavaFX: A nova biblioteca gráfica da plataforma Java
jesuinoPower
 

Destaque (16)

PPTX
Evoluindo a arquitetura de uma aplicação com AngularJS
Rodrigo Branas
 
PPTX
Aplicando filtros com AngularJS
Rodrigo Branas
 
PPTX
Utilizando diretivas com AngularJS
Rodrigo Branas
 
PDF
Introdução ao desenvolvimento Web
Sérgio Souza Costa
 
PDF
Time de Desenvolvimento: Trabalhando em equipe sem matar o coleguinha
Deblyn Prado
 
PPTX
Gerenciamento de equipes no desenvolvimento de software
Roberto Brandini
 
PPTX
Validando Formulários com AngularJS
Rodrigo Branas
 
PDF
Node.js - #7 - Core Modules - http - Parte 1 - Rodrigo Branas
Rodrigo Branas
 
PPTX
Desvendando a linguagem JavaScript
Rodrigo Branas
 
PDF
What Makes Great Infographics
SlideShare
 
PDF
Masters of SlideShare
Kapost
 
PDF
STOP! VIEW THIS! 10-Step Checklist When Uploading to Slideshare
Empowered Presentations
 
PDF
You Suck At PowerPoint!
Jesse Desjardins - @jessedee
 
PDF
10 Ways to Win at SlideShare SEO & Presentation Optimization
Oneupweb
 
PDF
How To Get More From SlideShare - Super-Simple Tips For Content Marketing
Content Marketing Institute
 
PDF
How to Make Awesome SlideShares: Tips & Tricks
SlideShare
 
Evoluindo a arquitetura de uma aplicação com AngularJS
Rodrigo Branas
 
Aplicando filtros com AngularJS
Rodrigo Branas
 
Utilizando diretivas com AngularJS
Rodrigo Branas
 
Introdução ao desenvolvimento Web
Sérgio Souza Costa
 
Time de Desenvolvimento: Trabalhando em equipe sem matar o coleguinha
Deblyn Prado
 
Gerenciamento de equipes no desenvolvimento de software
Roberto Brandini
 
Validando Formulários com AngularJS
Rodrigo Branas
 
Node.js - #7 - Core Modules - http - Parte 1 - Rodrigo Branas
Rodrigo Branas
 
Desvendando a linguagem JavaScript
Rodrigo Branas
 
What Makes Great Infographics
SlideShare
 
Masters of SlideShare
Kapost
 
STOP! VIEW THIS! 10-Step Checklist When Uploading to Slideshare
Empowered Presentations
 
You Suck At PowerPoint!
Jesse Desjardins - @jessedee
 
10 Ways to Win at SlideShare SEO & Presentation Optimization
Oneupweb
 
How To Get More From SlideShare - Super-Simple Tips For Content Marketing
Content Marketing Institute
 
How to Make Awesome SlideShares: Tips & Tricks
SlideShare
 
Anúncio

Semelhante a Introdução ao desenvolvimento de aplicações web (20)

PDF
Front end architecture
Rafael Salerno de Oliveira
 
PDF
Front end, back end, full stack. onde vivem o que comem hoje na uni_granrio
Anna Cruz
 
PDF
Service Oriented Front-End Architecture
Cristiano Gomes
 
PPT
JavaEE
Elenilson Vieira
 
PPTX
5505 otimizando frontends
Andre Baltieri
 
PPTX
Técnicas e recursos para desenvolvimento Web em cenários de grande escala
Alexandre Tarifa
 
PDF
[JS EXPERIENCE 2018] Do jQuery aos microfrontends: os desafios de manter uma ...
iMasters
 
PDF
RIA e Flex - Dando formas à Inovação
Leonardo Braga
 
PDF
O que move a web atualmente?
Fabio Janiszevski
 
PPTX
Projeto Web - Aula 1 - Fundamentos do Dev WEB.pptx
Luiz Antonio
 
PPTX
Treinamento ASP.NET 2014
Eric Gallardo
 
PPTX
Introdução ao desenvolvimento da web.pptx
MarceloRosenbrock1
 
PPTX
Especialização em desenvolvimento web e aplicativos móveis - Univem
Ricardo Sabatine
 
PDF
Desenvolvimento Web com Java Script Full Stack
Erick Petrucelli
 
PPTX
Aplicações Web, Frameworks, REST e SPA
marcosvpcortes
 
PDF
Intro aspnet webapi
Wedson Quintanilha da Silva
 
PDF
Desenvolvimento Client-Side 2016 (BrazilJS)
Huge
 
PDF
Programador (front|back) end moderno, por Leonardo Hackin
iMasters
 
PDF
Overview do Mercado de Desenvolvimento Web
Hector Nieva
 
PDF
Aula 1 ASP.NET Core com arquitetura MVC
MrioSitoe2
 
Front end architecture
Rafael Salerno de Oliveira
 
Front end, back end, full stack. onde vivem o que comem hoje na uni_granrio
Anna Cruz
 
Service Oriented Front-End Architecture
Cristiano Gomes
 
5505 otimizando frontends
Andre Baltieri
 
Técnicas e recursos para desenvolvimento Web em cenários de grande escala
Alexandre Tarifa
 
[JS EXPERIENCE 2018] Do jQuery aos microfrontends: os desafios de manter uma ...
iMasters
 
RIA e Flex - Dando formas à Inovação
Leonardo Braga
 
O que move a web atualmente?
Fabio Janiszevski
 
Projeto Web - Aula 1 - Fundamentos do Dev WEB.pptx
Luiz Antonio
 
Treinamento ASP.NET 2014
Eric Gallardo
 
Introdução ao desenvolvimento da web.pptx
MarceloRosenbrock1
 
Especialização em desenvolvimento web e aplicativos móveis - Univem
Ricardo Sabatine
 
Desenvolvimento Web com Java Script Full Stack
Erick Petrucelli
 
Aplicações Web, Frameworks, REST e SPA
marcosvpcortes
 
Intro aspnet webapi
Wedson Quintanilha da Silva
 
Desenvolvimento Client-Side 2016 (BrazilJS)
Huge
 
Programador (front|back) end moderno, por Leonardo Hackin
iMasters
 
Overview do Mercado de Desenvolvimento Web
Hector Nieva
 
Aula 1 ASP.NET Core com arquitetura MVC
MrioSitoe2
 
Anúncio

Mais de Rodrigo Branas (17)

PDF
Node.js - #6 - Core Modules - net - Rodrigo Branas
Rodrigo Branas
 
PDF
Node.js - #5 - Process - Rodrigo Branas
Rodrigo Branas
 
PDF
Node.js - #4 - Timers - Rodrigo Branas
Rodrigo Branas
 
PDF
Node.js - #3 - Global Objects - Rodrigo Branas
Rodrigo Branas
 
PDF
Node.js - #2 - Sistema de Módulos - Rodrigo Branas
Rodrigo Branas
 
PDF
Node.js - #1 - Introdução - Rodrigo Branas
Rodrigo Branas
 
PDF
#6 - Git - Desfazendo as coisas
Rodrigo Branas
 
PDF
#5 - Git - Contribuindo com um repositório remoto
Rodrigo Branas
 
PDF
#4 - Git - Stash
Rodrigo Branas
 
PDF
#3 - Git - Branching e Merging
Rodrigo Branas
 
PDF
#2 - Git - DAG
Rodrigo Branas
 
PPTX
JavaScript - Date
Rodrigo Branas
 
PPTX
JavaScript - Expressões Regulares
Rodrigo Branas
 
PDF
HTTP Interceptors com AngularJS
Rodrigo Branas
 
PPTX
Criando serviços com AngularJS
Rodrigo Branas
 
PPTX
Construindo Diretivas com AngularJS
Rodrigo Branas
 
PPTX
Técnicas de Refactoring
Rodrigo Branas
 
Node.js - #6 - Core Modules - net - Rodrigo Branas
Rodrigo Branas
 
Node.js - #5 - Process - Rodrigo Branas
Rodrigo Branas
 
Node.js - #4 - Timers - Rodrigo Branas
Rodrigo Branas
 
Node.js - #3 - Global Objects - Rodrigo Branas
Rodrigo Branas
 
Node.js - #2 - Sistema de Módulos - Rodrigo Branas
Rodrigo Branas
 
Node.js - #1 - Introdução - Rodrigo Branas
Rodrigo Branas
 
#6 - Git - Desfazendo as coisas
Rodrigo Branas
 
#5 - Git - Contribuindo com um repositório remoto
Rodrigo Branas
 
#4 - Git - Stash
Rodrigo Branas
 
#3 - Git - Branching e Merging
Rodrigo Branas
 
#2 - Git - DAG
Rodrigo Branas
 
JavaScript - Date
Rodrigo Branas
 
JavaScript - Expressões Regulares
Rodrigo Branas
 
HTTP Interceptors com AngularJS
Rodrigo Branas
 
Criando serviços com AngularJS
Rodrigo Branas
 
Construindo Diretivas com AngularJS
Rodrigo Branas
 
Técnicas de Refactoring
Rodrigo Branas
 

Introdução ao desenvolvimento de aplicações web

  • 2. “Transformar equipes de desenvolvimento de software” http://www.agilecode.com.br
  • 4. Rodrigo Branas [email protected] http://www.agilecode.com.br • Desenvolvendo Software na Gennera • Criando treinamentos na Agile Code • Escrevendo na Java Magazine e PacktPub • Palestrando sobre desenvolvimento de software em eventos, universidades e empresas
  • 5. Certificações Formação Acadêmica Ciências da Computação – UFSC Gerenciamento de Projetos - FGV SCJA, SCJP, SCJD, SCWCD, SCBCD, PMP, MCP e CSM Experiência Há mais de 12 anos desenvolvendo software na plataforma Java com as empresas: EDS, HP, NET, Citibank, GM, Dígitro, Softplan, OnCast, Senai, VALE, RBS, Unimed, Globalcode, V.Office, Suntech, WPlex e Gennera.
  • 6. • Há mais de 5 anos liderando pessoas. • Mais de 2000 horas em sala de aula. • Mais de 100 apresentações em eventos. • 6 artigos escritos para revistas. • 1 livro. • Mais de 500 profissionais treinados. • Criação de 22 palestras. • Criação de 10 treinamentos. • Criação de mais de 3.000 slides.
  • 9. Em 1990, no CERN, Berners-Lee construiu o primeiro servidor, o primeiro navegador e as primeiras páginas dando origem a World Wide Web (ou WWW).
  • 11. Primeiro website da história!
  • 12. No princípio era tudo estático
  • 13. Como fazer para torná-la mais dinâmica?
  • 14. Gerando código HTML no servidor
  • 15. Nascia a tecnologia CGI em 1993 Common Gateway Interface
  • 16. Por meio da tecnologia CGI, era possível criar uma interface de comunicação entre o servidor web e um programa, permitindo o recebimento de parâmetros e a geração de conteúdo dinâmico.
  • 17. Geração de conteúdo HTML no servidor e pouca interação
  • 19. As pessoas foram ficando viciadas
  • 20. A necessidade de interação acabou ficando cada vez maior!
  • 21. Como fazer para torná-la mais interativa?
  • 24. Quando pensamos em JavaScript, qual é a primeira coisa que surge?
  • 26. O Ministério da Saúde adverte: O uso excessivo de JavaScript pode levar o projeto ao caos e os desenvolvedores à loucura!
  • 29. Como fazer para começar a organizar esse negócio?
  • 30. O que faltava para viabilizar o desenvolvimento de aplicações front-end? • Reduzir problemas de cross-browsing
  • 31. O que faltava para viabilizar o desenvolvimento de aplicações front-end? • Reduzir problemas de cross-browsing • Parar de recarregar a página o tempo todo
  • 32. O que faltava para viabilizar o desenvolvimento de aplicações front-end? • Reduzir problemas de cross-browsing • Parar de recarregar a página o tempo todo • Estruturar a aplicação em camadas com responsabilidades bem definidas
  • 33. O que faltava para viabilizar o desenvolvimento de aplicações front-end? • Reduzir problemas de cross-browsing • Parar de recarregar a página o tempo todo • Estruturar a aplicação em camadas com responsabilidades bem definidas • Realizar injeção de dependências
  • 34. O que faltava para viabilizar o desenvolvimento de aplicações front-end? • Reduzir problemas de cross-browsing • Parar de recarregar a página o tempo todo • Estruturar a aplicação em camadas com responsabilidades bem definidas • Realizar injeção de dependências • Criar componentes reusáveis
  • 35. O que faltava para viabilizar o desenvolvimento de aplicações front-end? • Reduzir problemas de cross-browsing • Parar de recarregar a página o tempo todo • Estruturar a aplicação em camadas com responsabilidades bem definidas • Realizar injeção de dependências • Criar componentes reusáveis • Automatizar os testes
  • 36. O que faltava para viabilizar o desenvolvimento de aplicações front-end? • Reduzir problemas de cross-browsing • Parar de recarregar a página o tempo todo • Estruturar a aplicação em camadas com responsabilidades bem definidas • Realizar injeção de dependências • Criar componentes reusáveis • Automatizar os testes • Utilizar ferramentas para automatizar o workflow dos projetos
  • 39. Quem fica com o que? Front-end (HTML, CSS e JavaScript) • Arquitetura da informação • Layout • Regras de interface • Renderização Back-end (Java, C#, PHP, Ruby, Python, ...) • Processamento • Regras de negócio • Dados

Notas do Editor

  • #8: Telégrafo - 1836