Primeiros Passos Para o Desenvolvimento Web - FLISOLGO 2011
-
Upload
eduardo-souza -
Category
Technology
-
view
923 -
download
0
description
Transcript of Primeiros Passos Para o Desenvolvimento Web - FLISOLGO 2011
![Page 1: Primeiros Passos Para o Desenvolvimento Web - FLISOLGO 2011](https://reader036.fdocumentos.tips/reader036/viewer/2022070317/55666816d8b42aa21e8b516f/html5/thumbnails/1.jpg)
Primeiros Passos para o Desenvolvimento Web
Eduardo Faria de Souza
![Page 2: Primeiros Passos Para o Desenvolvimento Web - FLISOLGO 2011](https://reader036.fdocumentos.tips/reader036/viewer/2022070317/55666816d8b42aa21e8b516f/html5/thumbnails/2.jpg)
Índice● Como a web funciona?● Computação em nuvem● Ferramentas Necessárias
● Navegadores● Editores de Texto● Cliente FTP
● Linguagens● HTML + CSS + JavaScript● Ruby, PHP e Frameworks
● Banco de Dados● O Aplicativo● Implementação
● Registrar Domínio● Hospedagem● Pronto!
![Page 3: Primeiros Passos Para o Desenvolvimento Web - FLISOLGO 2011](https://reader036.fdocumentos.tips/reader036/viewer/2022070317/55666816d8b42aa21e8b516f/html5/thumbnails/3.jpg)
Como a web funciona
![Page 4: Primeiros Passos Para o Desenvolvimento Web - FLISOLGO 2011](https://reader036.fdocumentos.tips/reader036/viewer/2022070317/55666816d8b42aa21e8b516f/html5/thumbnails/4.jpg)
Computação em Nuvem
![Page 5: Primeiros Passos Para o Desenvolvimento Web - FLISOLGO 2011](https://reader036.fdocumentos.tips/reader036/viewer/2022070317/55666816d8b42aa21e8b516f/html5/thumbnails/5.jpg)
Computação em Nuvem
Custos
Complexidade
Manutenção
Produtividade
Segurança
Portabilidade
![Page 6: Primeiros Passos Para o Desenvolvimento Web - FLISOLGO 2011](https://reader036.fdocumentos.tips/reader036/viewer/2022070317/55666816d8b42aa21e8b516f/html5/thumbnails/6.jpg)
Computação em Nuvem - Riscos
● Privacidade● Segurança● Controle de terceiros● Indisponibilidade do servidor
![Page 7: Primeiros Passos Para o Desenvolvimento Web - FLISOLGO 2011](https://reader036.fdocumentos.tips/reader036/viewer/2022070317/55666816d8b42aa21e8b516f/html5/thumbnails/7.jpg)
Potencial da Web
![Page 8: Primeiros Passos Para o Desenvolvimento Web - FLISOLGO 2011](https://reader036.fdocumentos.tips/reader036/viewer/2022070317/55666816d8b42aa21e8b516f/html5/thumbnails/8.jpg)
Potencial da Web
![Page 9: Primeiros Passos Para o Desenvolvimento Web - FLISOLGO 2011](https://reader036.fdocumentos.tips/reader036/viewer/2022070317/55666816d8b42aa21e8b516f/html5/thumbnails/9.jpg)
Potencial da Web
![Page 10: Primeiros Passos Para o Desenvolvimento Web - FLISOLGO 2011](https://reader036.fdocumentos.tips/reader036/viewer/2022070317/55666816d8b42aa21e8b516f/html5/thumbnails/10.jpg)
Potencial da Web
![Page 11: Primeiros Passos Para o Desenvolvimento Web - FLISOLGO 2011](https://reader036.fdocumentos.tips/reader036/viewer/2022070317/55666816d8b42aa21e8b516f/html5/thumbnails/11.jpg)
Potencial da Web
![Page 12: Primeiros Passos Para o Desenvolvimento Web - FLISOLGO 2011](https://reader036.fdocumentos.tips/reader036/viewer/2022070317/55666816d8b42aa21e8b516f/html5/thumbnails/12.jpg)
Ferramentas Necessárias
![Page 13: Primeiros Passos Para o Desenvolvimento Web - FLISOLGO 2011](https://reader036.fdocumentos.tips/reader036/viewer/2022070317/55666816d8b42aa21e8b516f/html5/thumbnails/13.jpg)
Ferramentas Necessárias
● Navegador● Editor de Texto● Cliente FTP
![Page 14: Primeiros Passos Para o Desenvolvimento Web - FLISOLGO 2011](https://reader036.fdocumentos.tips/reader036/viewer/2022070317/55666816d8b42aa21e8b516f/html5/thumbnails/14.jpg)
Navegadores
É o responsável por buscar, montar e apresentar as páginas na web.
![Page 15: Primeiros Passos Para o Desenvolvimento Web - FLISOLGO 2011](https://reader036.fdocumentos.tips/reader036/viewer/2022070317/55666816d8b42aa21e8b516f/html5/thumbnails/15.jpg)
Internet Explorer
Desenvolvedor: Microsoft
Versão Estável: 9
Motor: Trident
Licença: Proprietária
SO: Windows
![Page 16: Primeiros Passos Para o Desenvolvimento Web - FLISOLGO 2011](https://reader036.fdocumentos.tips/reader036/viewer/2022070317/55666816d8b42aa21e8b516f/html5/thumbnails/16.jpg)
Firefox
Desenvolvedor: Mozilla Foundation
Versão Estável: 4
Motor: Gecko
Licença: Código Livre
SO's: Windows, Linux e Mac OS
![Page 17: Primeiros Passos Para o Desenvolvimento Web - FLISOLGO 2011](https://reader036.fdocumentos.tips/reader036/viewer/2022070317/55666816d8b42aa21e8b516f/html5/thumbnails/17.jpg)
Chrome
Desenvolvedor: Google
Versão Estável: 10
Motor: V8
Licença: Código Livre
SO's: Windows, Linux e Mac OS
![Page 18: Primeiros Passos Para o Desenvolvimento Web - FLISOLGO 2011](https://reader036.fdocumentos.tips/reader036/viewer/2022070317/55666816d8b42aa21e8b516f/html5/thumbnails/18.jpg)
Navegadores – Testes Sintéticos
![Page 19: Primeiros Passos Para o Desenvolvimento Web - FLISOLGO 2011](https://reader036.fdocumentos.tips/reader036/viewer/2022070317/55666816d8b42aa21e8b516f/html5/thumbnails/19.jpg)
Navegadores – Testes Sintéticos
![Page 20: Primeiros Passos Para o Desenvolvimento Web - FLISOLGO 2011](https://reader036.fdocumentos.tips/reader036/viewer/2022070317/55666816d8b42aa21e8b516f/html5/thumbnails/20.jpg)
Navegadores – Market Share
57%
22%
12%
7%2%
Internet ExplorerFirefoxChromeSafariOpera
NetMarketshare <http://bit.ly/BrowsersMarketShare0411>
![Page 21: Primeiros Passos Para o Desenvolvimento Web - FLISOLGO 2011](https://reader036.fdocumentos.tips/reader036/viewer/2022070317/55666816d8b42aa21e8b516f/html5/thumbnails/21.jpg)
Editores de Texto
![Page 22: Primeiros Passos Para o Desenvolvimento Web - FLISOLGO 2011](https://reader036.fdocumentos.tips/reader036/viewer/2022070317/55666816d8b42aa21e8b516f/html5/thumbnails/22.jpg)
Editores de Texto
![Page 23: Primeiros Passos Para o Desenvolvimento Web - FLISOLGO 2011](https://reader036.fdocumentos.tips/reader036/viewer/2022070317/55666816d8b42aa21e8b516f/html5/thumbnails/23.jpg)
Editores de textoWindows
● Notepad++● Dreamweaver
Linux● Gedit● Geany
Mac OS● Coda● TextMate
Multiplataforma (Windows, Linux e Mac OS)● Aptana● NetBeans● Eclipse● VIM
![Page 24: Primeiros Passos Para o Desenvolvimento Web - FLISOLGO 2011](https://reader036.fdocumentos.tips/reader036/viewer/2022070317/55666816d8b42aa21e8b516f/html5/thumbnails/24.jpg)
Cliente FTPFile Transfer Protocol
Ajudar a tranferir aquivos do computador para o servidor.
Filezilla
![Page 25: Primeiros Passos Para o Desenvolvimento Web - FLISOLGO 2011](https://reader036.fdocumentos.tips/reader036/viewer/2022070317/55666816d8b42aa21e8b516f/html5/thumbnails/25.jpg)
Conhecimento necessário
Cliente● HTML● CSS● JavaScript
Servidor● PHP● Ruby + Ruby On Rails
![Page 26: Primeiros Passos Para o Desenvolvimento Web - FLISOLGO 2011](https://reader036.fdocumentos.tips/reader036/viewer/2022070317/55666816d8b42aa21e8b516f/html5/thumbnails/26.jpg)
Pit-Stop: Framework, definição
É um conjunto de código, feito para facilitar a programação, evitar a repetição e reinvenção
da roda a todo momento.
![Page 27: Primeiros Passos Para o Desenvolvimento Web - FLISOLGO 2011](https://reader036.fdocumentos.tips/reader036/viewer/2022070317/55666816d8b42aa21e8b516f/html5/thumbnails/27.jpg)
Parte Cliente
![Page 28: Primeiros Passos Para o Desenvolvimento Web - FLISOLGO 2011](https://reader036.fdocumentos.tips/reader036/viewer/2022070317/55666816d8b42aa21e8b516f/html5/thumbnails/28.jpg)
HTML
HyperText Markup Language
(Linguagem de Marcação de Hipertexto)
É a linguagem de marcação usada para “montar” as páginas web.
![Page 29: Primeiros Passos Para o Desenvolvimento Web - FLISOLGO 2011](https://reader036.fdocumentos.tips/reader036/viewer/2022070317/55666816d8b42aa21e8b516f/html5/thumbnails/29.jpg)
HTML
![Page 30: Primeiros Passos Para o Desenvolvimento Web - FLISOLGO 2011](https://reader036.fdocumentos.tips/reader036/viewer/2022070317/55666816d8b42aa21e8b516f/html5/thumbnails/30.jpg)
HTML
![Page 31: Primeiros Passos Para o Desenvolvimento Web - FLISOLGO 2011](https://reader036.fdocumentos.tips/reader036/viewer/2022070317/55666816d8b42aa21e8b516f/html5/thumbnails/31.jpg)
CSS
Cascading Style Sheet
(Folha de Estilo em Cascata)
É uma linguagem de estilo usada para definir a apresentação de páginas web.
![Page 32: Primeiros Passos Para o Desenvolvimento Web - FLISOLGO 2011](https://reader036.fdocumentos.tips/reader036/viewer/2022070317/55666816d8b42aa21e8b516f/html5/thumbnails/32.jpg)
CSS
![Page 33: Primeiros Passos Para o Desenvolvimento Web - FLISOLGO 2011](https://reader036.fdocumentos.tips/reader036/viewer/2022070317/55666816d8b42aa21e8b516f/html5/thumbnails/33.jpg)
CSS
![Page 34: Primeiros Passos Para o Desenvolvimento Web - FLISOLGO 2011](https://reader036.fdocumentos.tips/reader036/viewer/2022070317/55666816d8b42aa21e8b516f/html5/thumbnails/34.jpg)
HTML + CSS
![Page 35: Primeiros Passos Para o Desenvolvimento Web - FLISOLGO 2011](https://reader036.fdocumentos.tips/reader036/viewer/2022070317/55666816d8b42aa21e8b516f/html5/thumbnails/35.jpg)
HTML + CSS
![Page 36: Primeiros Passos Para o Desenvolvimento Web - FLISOLGO 2011](https://reader036.fdocumentos.tips/reader036/viewer/2022070317/55666816d8b42aa21e8b516f/html5/thumbnails/36.jpg)
HTML + CSS
![Page 37: Primeiros Passos Para o Desenvolvimento Web - FLISOLGO 2011](https://reader036.fdocumentos.tips/reader036/viewer/2022070317/55666816d8b42aa21e8b516f/html5/thumbnails/37.jpg)
HTML + CSS
![Page 38: Primeiros Passos Para o Desenvolvimento Web - FLISOLGO 2011](https://reader036.fdocumentos.tips/reader036/viewer/2022070317/55666816d8b42aa21e8b516f/html5/thumbnails/38.jpg)
JavaScript
Linguagem de programação do lado cliente, que possibilita a manipulação de objetos na
página web.
![Page 39: Primeiros Passos Para o Desenvolvimento Web - FLISOLGO 2011](https://reader036.fdocumentos.tips/reader036/viewer/2022070317/55666816d8b42aa21e8b516f/html5/thumbnails/39.jpg)
A Santa Trindade
![Page 40: Primeiros Passos Para o Desenvolvimento Web - FLISOLGO 2011](https://reader036.fdocumentos.tips/reader036/viewer/2022070317/55666816d8b42aa21e8b516f/html5/thumbnails/40.jpg)
HTML5
![Page 41: Primeiros Passos Para o Desenvolvimento Web - FLISOLGO 2011](https://reader036.fdocumentos.tips/reader036/viewer/2022070317/55666816d8b42aa21e8b516f/html5/thumbnails/41.jpg)
Parte Servidor
![Page 42: Primeiros Passos Para o Desenvolvimento Web - FLISOLGO 2011](https://reader036.fdocumentos.tips/reader036/viewer/2022070317/55666816d8b42aa21e8b516f/html5/thumbnails/42.jpg)
Ruby
Uma linguagem dinâmica, open source com foco na simplicidade e na produtividade. Tem uma sintaxe elegante de leitura natural e fácil
escrita.
![Page 43: Primeiros Passos Para o Desenvolvimento Web - FLISOLGO 2011](https://reader036.fdocumentos.tips/reader036/viewer/2022070317/55666816d8b42aa21e8b516f/html5/thumbnails/43.jpg)
Ruby On Rails
É um framework livre, desenvolvido a partir de uma aplicação real, que promete aumentar velocidade e facilidade no desenvolvimento de aplicações web.
![Page 44: Primeiros Passos Para o Desenvolvimento Web - FLISOLGO 2011](https://reader036.fdocumentos.tips/reader036/viewer/2022070317/55666816d8b42aa21e8b516f/html5/thumbnails/44.jpg)
Ruby + Ruby On Rails - Características
Ruby● Elegante● Poderosa● Legível● Consisa
Ruby On Rails● Convenção sobre configuração● ORM (Object Relational Maping)● Práticas Ágeis● Segurança
![Page 45: Primeiros Passos Para o Desenvolvimento Web - FLISOLGO 2011](https://reader036.fdocumentos.tips/reader036/viewer/2022070317/55666816d8b42aa21e8b516f/html5/thumbnails/45.jpg)
PHP
É uma linguagem de programação voltada para o desenvolvimento web.
![Page 46: Primeiros Passos Para o Desenvolvimento Web - FLISOLGO 2011](https://reader036.fdocumentos.tips/reader036/viewer/2022070317/55666816d8b42aa21e8b516f/html5/thumbnails/46.jpg)
PHP - Características
● Velocidade e robustez● Orientado a objetos● Sintaxe similar a C/C++● Fácil implementação
![Page 47: Primeiros Passos Para o Desenvolvimento Web - FLISOLGO 2011](https://reader036.fdocumentos.tips/reader036/viewer/2022070317/55666816d8b42aa21e8b516f/html5/thumbnails/47.jpg)
PHP - Frameworks
![Page 48: Primeiros Passos Para o Desenvolvimento Web - FLISOLGO 2011](https://reader036.fdocumentos.tips/reader036/viewer/2022070317/55666816d8b42aa21e8b516f/html5/thumbnails/48.jpg)
Bancos de Dados
É um conjunto de dados organizados e estruturados de forma que seja possível manipular, correlacionar ou extraí-los.
![Page 49: Primeiros Passos Para o Desenvolvimento Web - FLISOLGO 2011](https://reader036.fdocumentos.tips/reader036/viewer/2022070317/55666816d8b42aa21e8b516f/html5/thumbnails/49.jpg)
Bancos de Dados
id nome cidade
1 Thiago Belo Horizonte
2 Artur Porto Alegre
3 Rafael Goiânia
4 Vitor Manaus
Pessoas
![Page 50: Primeiros Passos Para o Desenvolvimento Web - FLISOLGO 2011](https://reader036.fdocumentos.tips/reader036/viewer/2022070317/55666816d8b42aa21e8b516f/html5/thumbnails/50.jpg)
Bancos de Dados
id nome cidade
1 Thiago 3
2 Artur 4
3 Rafael 1
4 Vitor 2
5 Maria 4
id cidade
1 Goiânia
2 Manaus
3 Belo Horizonte
4 Porto Alegre
Pessoas Cidades
![Page 51: Primeiros Passos Para o Desenvolvimento Web - FLISOLGO 2011](https://reader036.fdocumentos.tips/reader036/viewer/2022070317/55666816d8b42aa21e8b516f/html5/thumbnails/51.jpg)
O Aplicativo
![Page 52: Primeiros Passos Para o Desenvolvimento Web - FLISOLGO 2011](https://reader036.fdocumentos.tips/reader036/viewer/2022070317/55666816d8b42aa21e8b516f/html5/thumbnails/52.jpg)
O Aplicativo
![Page 53: Primeiros Passos Para o Desenvolvimento Web - FLISOLGO 2011](https://reader036.fdocumentos.tips/reader036/viewer/2022070317/55666816d8b42aa21e8b516f/html5/thumbnails/53.jpg)
Implementação (deploy)
![Page 54: Primeiros Passos Para o Desenvolvimento Web - FLISOLGO 2011](https://reader036.fdocumentos.tips/reader036/viewer/2022070317/55666816d8b42aa21e8b516f/html5/thumbnails/54.jpg)
Implementação (deploy)
1 - Pegar algo
2 - Colocar esse algo em seu devido lugar
3 - Deixar pronto para usar
![Page 55: Primeiros Passos Para o Desenvolvimento Web - FLISOLGO 2011](https://reader036.fdocumentos.tips/reader036/viewer/2022070317/55666816d8b42aa21e8b516f/html5/thumbnails/55.jpg)
Registrar o domínio
Domínios Nacionais
.com.br
.eng.br
.art.br
… .br
Domínios Internacionais
.com
.net
.org
. ...
![Page 56: Primeiros Passos Para o Desenvolvimento Web - FLISOLGO 2011](https://reader036.fdocumentos.tips/reader036/viewer/2022070317/55666816d8b42aa21e8b516f/html5/thumbnails/56.jpg)
Registrar domínio nacional
![Page 57: Primeiros Passos Para o Desenvolvimento Web - FLISOLGO 2011](https://reader036.fdocumentos.tips/reader036/viewer/2022070317/55666816d8b42aa21e8b516f/html5/thumbnails/57.jpg)
Registrar domínio internacional
![Page 58: Primeiros Passos Para o Desenvolvimento Web - FLISOLGO 2011](https://reader036.fdocumentos.tips/reader036/viewer/2022070317/55666816d8b42aa21e8b516f/html5/thumbnails/58.jpg)
Registrar domínio internacional
![Page 59: Primeiros Passos Para o Desenvolvimento Web - FLISOLGO 2011](https://reader036.fdocumentos.tips/reader036/viewer/2022070317/55666816d8b42aa21e8b516f/html5/thumbnails/59.jpg)
Hospedagem
É o serviço que vai hospedar seu site/sistema.
![Page 60: Primeiros Passos Para o Desenvolvimento Web - FLISOLGO 2011](https://reader036.fdocumentos.tips/reader036/viewer/2022070317/55666816d8b42aa21e8b516f/html5/thumbnails/60.jpg)
É o serviço que vai hospedar seu site/sistema.
Hospedagem
![Page 61: Primeiros Passos Para o Desenvolvimento Web - FLISOLGO 2011](https://reader036.fdocumentos.tips/reader036/viewer/2022070317/55666816d8b42aa21e8b516f/html5/thumbnails/61.jpg)
Enviar os arquivos por FTP
![Page 62: Primeiros Passos Para o Desenvolvimento Web - FLISOLGO 2011](https://reader036.fdocumentos.tips/reader036/viewer/2022070317/55666816d8b42aa21e8b516f/html5/thumbnails/62.jpg)
Enviar os arquivos por FTP
![Page 63: Primeiros Passos Para o Desenvolvimento Web - FLISOLGO 2011](https://reader036.fdocumentos.tips/reader036/viewer/2022070317/55666816d8b42aa21e8b516f/html5/thumbnails/63.jpg)
Enviar os arquivos por FTP
![Page 64: Primeiros Passos Para o Desenvolvimento Web - FLISOLGO 2011](https://reader036.fdocumentos.tips/reader036/viewer/2022070317/55666816d8b42aa21e8b516f/html5/thumbnails/64.jpg)
Enviar os arquivos por FTP
![Page 65: Primeiros Passos Para o Desenvolvimento Web - FLISOLGO 2011](https://reader036.fdocumentos.tips/reader036/viewer/2022070317/55666816d8b42aa21e8b516f/html5/thumbnails/65.jpg)
Aplicação Pronta!
![Page 66: Primeiros Passos Para o Desenvolvimento Web - FLISOLGO 2011](https://reader036.fdocumentos.tips/reader036/viewer/2022070317/55666816d8b42aa21e8b516f/html5/thumbnails/66.jpg)
Até a próxima
Eduardo Faria de Souza (@eduardodx)
www.eduardodx.com.br
www.slideshare.net/eduardodx