66
Primeiros Passos para o Desenvolvimento Web Eduardo Faria de Souza

Primeiros Passos Para o Desenvolvimento Web - FLISOLGO 2011

Embed Size (px)

DESCRIPTION

Apresentação sobre quais são os primeiros passos e o caminho a seguir no desenvolvimento web. FLISOLGO 09/04/2011

Citation preview

Page 1: Primeiros Passos Para o Desenvolvimento Web - FLISOLGO 2011

Primeiros Passos para o Desenvolvimento Web

Eduardo Faria de Souza

Page 2: Primeiros Passos Para o Desenvolvimento Web - FLISOLGO 2011

Í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

Como a web funciona

Page 4: Primeiros Passos Para o Desenvolvimento Web - FLISOLGO 2011

Computação em Nuvem

Page 5: Primeiros Passos Para o Desenvolvimento Web - FLISOLGO 2011

Computação em Nuvem

Custos

Complexidade

Manutenção

Produtividade

Segurança

Portabilidade

Page 6: Primeiros Passos Para o Desenvolvimento Web - FLISOLGO 2011

Computação em Nuvem - Riscos

● Privacidade● Segurança● Controle de terceiros● Indisponibilidade do servidor

Page 7: Primeiros Passos Para o Desenvolvimento Web - FLISOLGO 2011

Potencial da Web

Page 8: Primeiros Passos Para o Desenvolvimento Web - FLISOLGO 2011

Potencial da Web

Page 9: Primeiros Passos Para o Desenvolvimento Web - FLISOLGO 2011

Potencial da Web

Page 10: Primeiros Passos Para o Desenvolvimento Web - FLISOLGO 2011

Potencial da Web

Page 11: Primeiros Passos Para o Desenvolvimento Web - FLISOLGO 2011

Potencial da Web

Page 12: Primeiros Passos Para o Desenvolvimento Web - FLISOLGO 2011

Ferramentas Necessárias

Page 13: Primeiros Passos Para o Desenvolvimento Web - FLISOLGO 2011

Ferramentas Necessárias

● Navegador● Editor de Texto● Cliente FTP

Page 14: Primeiros Passos Para o Desenvolvimento Web - FLISOLGO 2011

Navegadores

É o responsável por buscar, montar e apresentar as páginas na web.

Page 15: Primeiros Passos Para o Desenvolvimento Web - FLISOLGO 2011

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

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

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

Navegadores – Testes Sintéticos

Page 19: Primeiros Passos Para o Desenvolvimento Web - FLISOLGO 2011

Navegadores – Testes Sintéticos

Page 20: Primeiros Passos Para o Desenvolvimento Web - FLISOLGO 2011

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

Editores de Texto

Page 22: Primeiros Passos Para o Desenvolvimento Web - FLISOLGO 2011

Editores de Texto

Page 23: Primeiros Passos Para o Desenvolvimento Web - FLISOLGO 2011

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

Cliente FTPFile Transfer Protocol

Ajudar a tranferir aquivos do computador para o servidor.

Filezilla

Page 25: Primeiros Passos Para o Desenvolvimento Web - FLISOLGO 2011

Conhecimento necessário

Cliente● HTML● CSS● JavaScript

Servidor● PHP● Ruby + Ruby On Rails

Page 26: Primeiros Passos Para o Desenvolvimento Web - FLISOLGO 2011

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

Parte Cliente

Page 28: Primeiros Passos Para o Desenvolvimento Web - FLISOLGO 2011

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

HTML

Page 30: Primeiros Passos Para o Desenvolvimento Web - FLISOLGO 2011

HTML

Page 31: Primeiros Passos Para o Desenvolvimento Web - FLISOLGO 2011

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

CSS

Page 33: Primeiros Passos Para o Desenvolvimento Web - FLISOLGO 2011

CSS

Page 34: Primeiros Passos Para o Desenvolvimento Web - FLISOLGO 2011

HTML + CSS

Page 35: Primeiros Passos Para o Desenvolvimento Web - FLISOLGO 2011

HTML + CSS

Page 36: Primeiros Passos Para o Desenvolvimento Web - FLISOLGO 2011

HTML + CSS

Page 37: Primeiros Passos Para o Desenvolvimento Web - FLISOLGO 2011

HTML + CSS

Page 38: Primeiros Passos Para o Desenvolvimento Web - FLISOLGO 2011

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

A Santa Trindade

Page 40: Primeiros Passos Para o Desenvolvimento Web - FLISOLGO 2011

HTML5

Page 41: Primeiros Passos Para o Desenvolvimento Web - FLISOLGO 2011

Parte Servidor

Page 42: Primeiros Passos Para o Desenvolvimento Web - FLISOLGO 2011

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

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

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

PHP

É uma linguagem de programação voltada para o desenvolvimento web.

Page 46: Primeiros Passos Para o Desenvolvimento Web - FLISOLGO 2011

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

PHP - Frameworks

Page 48: Primeiros Passos Para o Desenvolvimento Web - FLISOLGO 2011

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

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

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

O Aplicativo

Page 52: Primeiros Passos Para o Desenvolvimento Web - FLISOLGO 2011

O Aplicativo

Page 53: Primeiros Passos Para o Desenvolvimento Web - FLISOLGO 2011

Implementação (deploy)

Page 54: Primeiros Passos Para o Desenvolvimento Web - FLISOLGO 2011

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

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

Registrar domínio nacional

Page 57: Primeiros Passos Para o Desenvolvimento Web - FLISOLGO 2011

Registrar domínio internacional

Page 58: Primeiros Passos Para o Desenvolvimento Web - FLISOLGO 2011

Registrar domínio internacional

Page 59: Primeiros Passos Para o Desenvolvimento Web - FLISOLGO 2011

Hospedagem

É o serviço que vai hospedar seu site/sistema.

Page 60: Primeiros Passos Para o Desenvolvimento Web - FLISOLGO 2011

É o serviço que vai hospedar seu site/sistema.

Hospedagem

Page 61: Primeiros Passos Para o Desenvolvimento Web - FLISOLGO 2011

Enviar os arquivos por FTP

Page 62: Primeiros Passos Para o Desenvolvimento Web - FLISOLGO 2011

Enviar os arquivos por FTP

Page 63: Primeiros Passos Para o Desenvolvimento Web - FLISOLGO 2011

Enviar os arquivos por FTP

Page 64: Primeiros Passos Para o Desenvolvimento Web - FLISOLGO 2011

Enviar os arquivos por FTP

Page 65: Primeiros Passos Para o Desenvolvimento Web - FLISOLGO 2011

Aplicação Pronta!

Page 66: Primeiros Passos Para o Desenvolvimento Web - FLISOLGO 2011

Até a próxima

Eduardo Faria de Souza (@eduardodx)

www.eduardodx.com.br

www.slideshare.net/eduardodx