Primeiros Passos para o Desenvolvimento Web
Eduardo Faria de Souza
Í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!
Como a web funciona
Computação em Nuvem
Computação em Nuvem
Custos
Complexidade
Manutenção
Produtividade
Segurança
Portabilidade
Computação em Nuvem - Riscos
● Privacidade● Segurança● Controle de terceiros● Indisponibilidade do servidor
Potencial da Web
Potencial da Web
Potencial da Web
Potencial da Web
Potencial da Web
Ferramentas Necessárias
Ferramentas Necessárias
● Navegador● Editor de Texto● Cliente FTP
Navegadores
É o responsável por buscar, montar e apresentar as páginas na web.
Internet Explorer
Desenvolvedor: Microsoft
Versão Estável: 9
Motor: Trident
Licença: Proprietária
SO: Windows
Firefox
Desenvolvedor: Mozilla Foundation
Versão Estável: 4
Motor: Gecko
Licença: Código Livre
SO's: Windows, Linux e Mac OS
Chrome
Desenvolvedor: Google
Versão Estável: 10
Motor: V8
Licença: Código Livre
SO's: Windows, Linux e Mac OS
Navegadores – Testes Sintéticos
Navegadores – Testes Sintéticos
Navegadores – Market Share
57%
22%
12%
7%2%
Internet ExplorerFirefoxChromeSafariOpera
NetMarketshare <http://bit.ly/BrowsersMarketShare0411>
Editores de Texto
Editores de Texto
Editores de textoWindows
● Notepad++● Dreamweaver
Linux● Gedit● Geany
Mac OS● Coda● TextMate
Multiplataforma (Windows, Linux e Mac OS)● Aptana● NetBeans● Eclipse● VIM
Cliente FTPFile Transfer Protocol
Ajudar a tranferir aquivos do computador para o servidor.
Filezilla
Conhecimento necessário
Cliente● HTML● CSS● JavaScript
Servidor● PHP● Ruby + Ruby On Rails
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.
Parte Cliente
HTML
HyperText Markup Language
(Linguagem de Marcação de Hipertexto)
É a linguagem de marcação usada para “montar” as páginas web.
HTML
HTML
CSS
Cascading Style Sheet
(Folha de Estilo em Cascata)
É uma linguagem de estilo usada para definir a apresentação de páginas web.
CSS
CSS
HTML + CSS
HTML + CSS
HTML + CSS
HTML + CSS
JavaScript
Linguagem de programação do lado cliente, que possibilita a manipulação de objetos na
página web.
A Santa Trindade
HTML5
Parte Servidor
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.
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.
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
PHP
É uma linguagem de programação voltada para o desenvolvimento web.
PHP - Características
● Velocidade e robustez● Orientado a objetos● Sintaxe similar a C/C++● Fácil implementação
PHP - Frameworks
Bancos de Dados
É um conjunto de dados organizados e estruturados de forma que seja possível manipular, correlacionar ou extraí-los.
Bancos de Dados
id nome cidade
1 Thiago Belo Horizonte
2 Artur Porto Alegre
3 Rafael Goiânia
4 Vitor Manaus
Pessoas
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
O Aplicativo
O Aplicativo
Implementação (deploy)
Implementação (deploy)
1 - Pegar algo
2 - Colocar esse algo em seu devido lugar
3 - Deixar pronto para usar
Registrar o domínio
Domínios Nacionais
.com.br
.eng.br
.art.br
… .br
Domínios Internacionais
.com
.net
.org
. ...
Registrar domínio nacional
Registrar domínio internacional
Registrar domínio internacional
Hospedagem
É o serviço que vai hospedar seu site/sistema.
É o serviço que vai hospedar seu site/sistema.
Hospedagem
Enviar os arquivos por FTP
Enviar os arquivos por FTP
Enviar os arquivos por FTP
Enviar os arquivos por FTP
Aplicação Pronta!
Até a próxima
Eduardo Faria de Souza (@eduardodx)
www.eduardodx.com.br
www.slideshare.net/eduardodx