Você está na página 1de 70

Aplicações Web com

1
Java
Prof. MSc. Emmerson Santa Rita da Silva

Emmerson Santa Rita da Silva Desenvolvimento Web


2 Sumário

1. Introdução
2. HTML
3. CSS
4. JavaScript
5. Introdução ao MVC, JSP e Servlet
6. Desenvolvimento de Aplicações JSP
7. Desenvolvimento de Servlets
8. Desenvolvimento de Aplicações Web com padrão MVC
9. Gerenciamento de sessões e cookies
10. JavaServer Faces
11. Introdução ao Hibernate e SQL com Java

Emmerson Santa Rita da Silva Desenvolvimento Web


3 Introdução

 Conceitos de aplicativos Web


 História
 Arquitetura Web
 Arquitetura J2EE
 Objetivos deste capítulo:
 Descrever a evolução dos aplicativos Web.
 Apresentar os fundamentos do protocolo HTTP
 Apresentar as arquiteturas de aplicativos Web

Emmerson Santa Rita da Silva Desenvolvimento Web


4 Introdução

 História
 A Internet e a World Wide Web (WWW), algumas vezes referidas em conjunto
como a Web, revolucionaram a maneira pela qual as companhias conduzem
seus negócios e mesmo o modo pelo qual as pessoas se comunicam.
 A Internet é uma rede global de redes de computadores que integra milhões de
computadores de governos, universidades e de usuários privados.
 Essa rede possibilita um mecanismo de comunicação no qual quaisquer tipos
de dados (textos, imagens, vídeos etc) podem ser intercambiados por
computadores interconectados.
 Os primórdios da Internet remontam ao início de 1960, conforme pode-se
observar no infográfico a seguir.

Emmerson Santa Rita da Silva Desenvolvimento Web


5

Emmerson Santa Rita da Silva Desenvolvimento Web


6

Emmerson Santa Rita da Silva Desenvolvimento Web


7

Emmerson Santa Rita da Silva Desenvolvimento Web


8 Introdução

 Sites e Aplicações Web


 O termo site quando se referem a blogs, sites de notícias, sites institucionais,
portais, lojas virtuais, entre outros. Já a denominação aplicação web muito
utilizada para sistemas de gestão empresarial que são acessados através de
navegadores (browsers).

Emmerson Santa Rita da Silva Desenvolvimento Web


9 Introdução
 Sites e Aplicações Web
 Navegadores de Internet mais usados no Brasil

Emmerson Santa Rita da Silva Desenvolvimento Web


10 Introdução
 Sites e Aplicações Web
 Web Servers e HTTP
 Os sites e as aplicações web são implantados em computadores conectados à
Internet ou a uma rede privada qualquer (Intranet). Normalmente, os sites são
implantados em computadores conectados à Internet pois assim poderão ser
acessados praticamente de qualquer lugar do mundo.
 Por outro lado, as aplicações web, muitas vezes, são implantadas em computadores
conectados a uma Intranet pois é comum ser necessário restringir o acesso externo à
elas.
 Os computadores nos quais os sites e as aplicações web são implantados são
chamados de Web Servers. Quando acessamos uma página web através de um
navegador, ele realiza uma requisição ao Web Server onde essa página está
armazenada.
 Ao receber a resposta do Web Server coma página web solicitada, o navegador a
exibe para nós. As mensagens de requisição e resposta trocadas entre o navegador e
o web server são definidas pelo protocolo HTTP.

Emmerson Santa Rita da Silva Desenvolvimento Web


11 Introdução
 Sites e Aplicações Web
 Web Servers e HTTP

Emmerson Santa Rita da Silva Desenvolvimento Web


12 Introdução
 Sites e Aplicações Web
 Web Servers e HTTP
 Considere um site ou uma aplicação web implantado em um Web Server que está
conectado a uma rede. A princípio, qualquer navegador executando em um
dispositivo conectado a essa rede pode realizar requisições a esse Web Server.
 Alguns softwares especializados são utilizados para administrar os sites e as aplicações
web implantadas nos Web Servers. Os principais são o Apache HTTP Server da Apache
Software Foundation e o Internet Information Services (IIS) da Microsoft.

 Domínios e endereços IP
 Os dispositivos conectados a uma rede são identificados através de endereços
formados por sequências de números. Esses endereços são chamados de endereços
IP. Em uma Intranet, quem controla os endereços IP dos dispositivos conectados é a
própria organização que administra essa Intranet.
 Por outro lado, os endereços IP dos dispositivos conectados à Internet são gerenciados
pelos provedores de acesso (ISP).

Emmerson Santa Rita da Silva Desenvolvimento Web


13 Introdução
 Sites e Aplicações Web
 Domínios e endereços IP
 A princípio, para acessar uma página de um site ou de uma aplicação web, devemos
conhecer o endereço IP do Web Server que contém esse site ou essa aplicação web.
O endereço IP 200.144.183.244 está vinculado a um dos Web Servers onde o site da
USP está implantado. Também podemos acessar as páginas do site da USP utilizando
diretamente esse endereço IP. Analogamente, podemos acessar as páginas da
Wikipédia utilizando o endereço IP 208.80.152.130.

Emmerson Santa Rita da Silva Desenvolvimento Web


14 Introdução
 Sites e Aplicações Web
 Domínios e endereços IP
 Um endereço IP está associado a um domínio, por exemplo: www.usp.br,
www.ifam.edu.br, www.oracle.com
 Há uma outra vantagem importante dos domínios sobre os endereços IP. Em alguns
casos, o endereço IP de um Web Server precisa ser alterado. Geralmente, essa
modificação ocorre por motivos técnicos. Supondo que essa mudança ocorra, quem
estiver acessando esse Web Server através do endereço IP antigo não conseguirá mais
acessá-lo dessa forma.
 Por outro lado, quem estiver acessando esse Web Server através do domínio dele
poderá continuar acessando da mesma forma pois esse domínio pode ser facilmente
associado ao novo endereço IP.

Emmerson Santa Rita da Silva Desenvolvimento Web


15 Introdução
 Sites e Aplicações Web
 Domínios e endereços IP
 Os domínios são controlados por organizações geralmente vinculadas ao governo. Por
exemplo, os domínios .br são controlados e disponibilizados pelo Registro de Domínios
para a Internet no Brasil (registro.br).

 DNS (Domain Name System)


 Como vimos, podemos acessar um Web Server diretamente através do seu endereço
IP ou indiretamente através de um domínio. Para utilizar a segunda abordagem, é
necessário consultar um servidor DNS para “traduzir” o domínio desejado para o
endereço IP correspondente. Basicamente, a tarefa dos servidores DNS é informar o
endereço IP associado a um domínio.
 Há diversos servidores DNS que são públicos. Eis uma lista com alguns deles.
 OpenDNS (208.67.222.222 e 208.67.220.220)

 Google Public DNS (8.8.8.8 e 8.8.4.4)

 Level3 (209.244.0.3 e 209.244.0.4)

Emmerson Santa Rita da Silva Desenvolvimento Web


16 Introdução
 Sites e Aplicações Web
 DNS (Domain Name System)

Emmerson Santa Rita da Silva Desenvolvimento Web


17 Introdução
 Sites e Aplicações Web
 Serviços de Hospedagem
 Uma organização pode possuir computadores atuando como Web Servers em sua
própria infraestrutura ou na infraestrutura de empresas especializadas. Em
determinadas situações, a primeira possibilidade é mais conveniente.
 Por exemplo, normalmente, as instituições bancárias preferem manter os seus sites e as
suas aplicações web em Web Servers dentro da sua própria infraestrutura. Essa
abordagem permite um controle maior da comunicação entre essas instituições e os
seus clientes. Mas, ela exige grandes investimentos. Para garantir que os seus Web
Servers estejam sempre funcionando, essas instituições bancárias mantêm profissionais
24 horas por dia 7 dias por semana (24/7). Caso contrário, os sites ou as aplicações web
dessas instituições podem ficar fora do ar e gerar grandes prejuízos.
 Por outro lado, muitas vezes, é mais conveniente manter os Web Servers de uma
organização na infraestrutura de uma empresa especializada. Dessa forma, a
responsabilidade de mantê-los funcionando é delegada à essa empresa. Essa
abordagem, geralmente, diminui os custos. Contudo, o controle é delegado a uma
outra empresa.

Emmerson Santa Rita da Silva Desenvolvimento Web


18 Introdução
 Sites e Aplicações Web
 Serviços de Hospedagem
 O serviço oferecido por essas empresas é denominado serviço de hospedagem. Eis
uma lista de empresas que oferecem esse tipo de serviço.
 Amazon

 LocaWeb

 UOL

 SEO (Search Engine Optimization)


 Hoje em dia, a principal forma de encontrar um site é utilizar alguma ferramenta de
busca. A mais importante delas, atualmente, é o Google. Essas ferramentas encontram
os sites que possuem conteúdo relacionado às palavras chaves utilizadas nas buscas.
Os sites mais relevantes são apresentados antes e com maior destaque.
 Para responder rapidamente às consultas realizadas, as ferramentas de busca
analisam previamente os sites. Esse processo de análise é chamado de indexação. A
indexação é realizada por programas de computador que interagem com os sites
para obter informações sobre o conteúdo de cada um deles. Esses programas são
chamados de robôs.

Emmerson Santa Rita da Silva Desenvolvimento Web


19 Introdução
 Sites e Aplicações Web
 SEO (Search Engine Optimization)
 No desenvolvimento de um site, podemos aplicar técnicas que facilitam e melhoram a
análise dos robôs das ferramentas de busca. Essas técnicas são desenvolvidas pelos
especialistas em SEO (Search Engine Optimization).
 Normalmente, as técnicas de SEO são mais importantes para os sites do que para as
aplicações web.

Emmerson Santa Rita da Silva Desenvolvimento Web


20 Introdução

 Desenvolvimento Web
 A maioria do tráfego na Internet atualmente é a transmissão de mensagens
HTTP.
 O navegador Web estabelece uma conexão TCP/IP com o servidor Web e
envia a ele uma mensagem de solicitação HTTP.
 Uma vez que o navegador Web receba a mensagem de resposta HTTP do
servidor Web, a conexão TCP/IP entre o navegador e o servidor é fechada.
 A seguir, apresentaremos as tecnologias envolvidas na programação para Web
e alguns exemplos simples.

Emmerson Santa Rita da Silva Desenvolvimento Web


21 Introdução

Internet
Solicitação HTTP

<HTML>
</HTML>
Resposta HTTP

Navegador Web Navegador Web

Emmerson Santa Rita da Silva Desenvolvimento Web


22 Introdução

Emmerson Santa Rita da Silva Desenvolvimento Web


23 Introdução

 Navegadores (cliente)

Emmerson Santa Rita da Silva Desenvolvimento Web


24 Introdução

 Servidores Web

Emmerson Santa Rita da Silva Desenvolvimento Web


25 Introdução

 Características dos Servidores

Emmerson Santa Rita da Silva Desenvolvimento Web


26 Introdução

 URL
 Uniform Resource Identifier (URI)/Uniform Resource Locator (URL)
 Navegadores web sempre iniciam conexões TCP/IP com o servidor Web , mas nunca o
contrário.
 O navegador Web identifica com qual servidor Web para fazer uma conexão e o que
está sendo solicitado do servidor Web com um Uniform Resource Locator (URL).
 URL é um tipo de Uniform Resourse Identifier (URI) que identifica um recurso por meio de
sua localização.
 Um URI é simplesmente o endereço que você digita no campo para endereços de seu
navegador, como por exemplo:

Emmerson Santa Rita da Silva Desenvolvimento Web


27 Introdução

 URL
 Uniform Resource Identifier (URI)/Uniform Resource Locator (URL)
 Esquema: identifica o protocolo em nível de aplicativo (http, ftp, new, mailto, file,
telnet).
 Autoridade: é o nome de computador ou endereço IP do servidor Web e um porta
opcional.
 Caminho: é um caminho de diretório do recurso.
 Consulta (opcional): é a informação a ser interpretada pelo servidor Web.
 Fragmento (opcional): é usado para identificar uma localização dentro de um
documento.

Emmerson Santa Rita da Silva Desenvolvimento Web


28 Introdução
TCP/IP
O TCP/IP (também chamado de pilha de protocolos TCP/IP) é um
conjunto de protocolos de comunicação entre computadores em rede.
Seu nome vem de dois protocolos: o TCP (Transmission Control Protocol -
Protocolo de Controle de Transmissão) e o IP (Internet Protocol -
Protocolo de Internet, ou ainda, protocolo de interconexão).
O conjunto de protocolos pode ser visto como um modelo de camadas
(Modelo OSI), onde cada camada é responsável por um grupo de
tarefas, fornecendo um conjunto de serviços bem definidos para o
protocolo da camada superior.
As camadas mais altas, estão logicamente mais perto do usuário
(chamada camada de aplicação) e lidam com dados mais abstratos,
confiando em protocolos de camadas mais baixas para tarefas de
menor nível de abstração.

Emmerson Santa Rita da Silva Desenvolvimento Web


29 Introdução
Hipertext Transfer Protocol (HTTP)
HTTP (Protocolo de Transferência de Hipertexto) é um protocolo sem
estado que dá suporte a solicitações seguidas de respostas (padrão
de troca de mensagens solicitação/resposta).
O protocolo HTTP não requer o uso de um navegador Web. Ele
simplesmente descreve como dados podem ser trocados em uma rede
que use TCP/IP.
Por padrão, HTTP, usa conexões TCP/IP na Porta 80 de um computador,
mas outras portas podem e frequentemente são usadas.
Uma transação HTTP começa com uma solicitação do cliente e termina
com a resposta do servidor.

Emmerson Santa Rita da Silva Desenvolvimento Web


30 Introdução
 Hipertext Transfer Protocol (HTTP)
Métodos de solicitação HTTP 1.1

Método Descrição

GET Apenas recupera os dados identificados pela URL.

HEAD Como GET, mas recupera apenas os cabeçalhos HTTP.

POST Usado para submeter dados ao servidor Web no corpo da entidade.

OPTIONS Usado para consultar um servidor Web sobre as capacidades que ele fornece.

PUT Armazena o corpo da entidade na localização especificada pela URL.

DELETE Exclui um documento do servidor Web que seja identificado pela URL.

TRACE Usado para rastrear o caminho de uma solicitação por firewalls e servidores proxy para depuração
de problemas na rede.

Emmerson Santa Rita da Silva Desenvolvimento Web


31 Introdução
 Hipertext Transfer Protocol (HTTP)

Emmerson Santa Rita da Silva Desenvolvimento Web


32 Introdução
 Hipertext Transfer Protocol (HTTP) (funcionamento)

Emmerson Santa Rita da Silva Desenvolvimento Web


33 Introdução
 Hipertext Transfer Protocol (HTTP) (Request Phase)

Emmerson Santa Rita da Silva Desenvolvimento Web


34 Introdução
 Hipertext Transfer Protocol (HTTP) (Exemplo de Request com HEAD)

Emmerson Santa Rita da Silva Desenvolvimento Web


35 Introdução
 Hipertext Transfer Protocol (HTTP) (Exemplo 2 de Request com HEAD)

Emmerson Santa Rita da Silva Desenvolvimento Web


36 Introdução
 Hipertext Transfer Protocol (HTTP) (Response Phase)

Emmerson Santa Rita da Silva Desenvolvimento Web


37 Introdução
 Hipertext Transfer Protocol (HTTP) (Exemplo de resposta GET)

Emmerson Santa Rita da Silva Desenvolvimento Web


38 Introdução
 Hipertext Transfer Protocol (HTTP) (Linha de Estado)

Emmerson Santa Rita da Silva Desenvolvimento Web


39 Introdução
 Hipertext Transfer Protocol (HTTP) (Conexão)

Emmerson Santa Rita da Silva Desenvolvimento Web


40 Introdução
 Segurança

Emmerson Santa Rita da Silva Desenvolvimento Web


41 Introdução
 Segurança (Aspectos)

Emmerson Santa Rita da Silva Desenvolvimento Web


42 Introdução
 Segurança (Privacidade e Integridade)

Emmerson Santa Rita da Silva Desenvolvimento Web


43 Introdução
 Segurança (Autenticação)

Emmerson Santa Rita da Silva Desenvolvimento Web


44 Introdução
 Segurança (Autenticação)

Emmerson Santa Rita da Silva Desenvolvimento Web


45 Introdução
 Segurança (Outros problemas)

Emmerson Santa Rita da Silva Desenvolvimento Web


46 Introdução
 Ferramentas

Emmerson Santa Rita da Silva Desenvolvimento Web


47 Introdução
Arquitetura Web
 Visam separação de responsabilidades entre os componentes da
aplicação Web
 Atendem os requisitos não-funcionais esperados pela aplicação a um
custo do seu aumento de complexidade
 Qual a arquitetura que melhor resolve o problema no curto, médio e
longo prazo?
 Curto prazo: desenvolvimento
 Médio prazo: produção
 Longo prazo: manutenção

Emmerson Santa Rita da Silva Desenvolvimento Web


48 Introdução

Arquitetura Web
 As principais arquiteturas separam as responsabilidades em
camadas
 Cada camada pode estar em uma ou mais máquinas
diferentes
 O número de camadas (contado do lado servidor) varia em
função da complexidade a ser lidada

Emmerson Santa Rita da Silva Desenvolvimento Web


49 Introdução
Arquitetura Web
 Sistemas cliente-servidor tradicionais têm somente 1 camada no lado
servidor
 Armazenamento
 Arquiteturas em 2 camadas têm separação das entidades em:
 Apresentação
 Armazenamento
 Arquiteturas em 3 camadas têm separação das entidades em:
 Apresentação
 Aplicação
 Armazenamento

Emmerson Santa Rita da Silva Desenvolvimento Web


50 Introdução
 Arquitetura Web

Arquitetura em 1 camada

Emmerson Santa Rita da Silva Desenvolvimento Web


51 Introdução
 Arquitetura Web

Arquitetura em 2 camada

Emmerson Santa Rita da Silva Desenvolvimento Web


52 Introdução
 Arquitetura Web

Arquitetura em 3 camada

Emmerson Santa Rita da Silva Desenvolvimento Web


53 Introdução
 Arquitetura Web

Interação típica entre Navegador Web e


Servidor Web
Emmerson Santa Rita da Silva Desenvolvimento Web
54 Introdução
Aplicativo Distribuído Aplicativo Web

Cliente (magro) Navegador Web (mais magro)


Nível Camada de Apresentação Camada de Apresentação
Cliente
Chamadas Solicitação
a Métodos HTTP

Dados Servidor Resposta


Servidor Retornados Web HTTP Arquitetura
Camada de Apresentação
em três níveis
Nível de Camada de Lógica Camada de Lógica
Negócios de Negócios de Negócios
Camada de Integração

Chamadas Chamadas
a Métodos a Métodos

Dados Dados
Servidor Retornados Servidor Retornados

Nível de
Dados Camada de Dados Camada de Dados

Emmerson Santa Rita da Silva Desenvolvimento Web


55 Introdução
APRESENTAÇÃO NEGÓCIO OU LÓGICA PERSISTÊNCIA
(INTEGRAÇÃO)

Helper
classes C
Modelo de 3
camadas
NAVEGADOR WEB V M SGDB com MVC

SERVIDOR
CLIENTE CLIENTE - SERVIDOR

SERVIDOR WEB

Emmerson Santa Rita da Silva Desenvolvimento Web


56 Introdução

Interface Lógica Dados


SQL
ODBC
HTML
JDBC
Servidor
Servidor
De BD
Web
Aplicações

Plugins Templates Componentes Procedures Armazenadas

Emmerson Santa Rita da Silva Desenvolvimento Web


57 Introdução
Servidor Web Servidor de Servidor de Banco
Aplicações De Dados

Modelo de 4
camadas

O cliente só precisa de um browser para ter acesso a aplicação

Emmerson Santa Rita da Silva Desenvolvimento Web


58 Introdução
CLIENTE GERENCIA DE NEGÓCIO PERSISTÊNCIA
(APRESENTAÇÃO) APRESENTAÇÃO

Modelo de 4
SERVIDOR
APLICAÇÃO camadas
NAVEGADOR WEB SERVIDOR WEB EJB in SGDB
MVC

C
V M

SERVIDOR
CLIENTE CLIENTE - SERVIDOR CLIENTE - SERVIDOR

Emmerson Santa Rita da Silva Desenvolvimento Web


59 Introdução

J2EE - 4 TIER

Emmerson Santa Rita da Silva Desenvolvimento Web


60 Introdução
Cliente J2EE Aplicativo Applet Java Navegador Web
(Servlet, EJB) Java
Nível Cliente
HTTP(S) HTTP(S) HTTP(S) HTTP(S)

(X)HTML/XML/HTTP(S)

JMS
Nível Web
JTA
JavaMail JAF Conteiner Web

Servidor de aplicativo J2EE


J2EE
Connector Servlets JSPs Bibliotecas
de Etiquetas
Web Services
Nível Negócios
JAX-RPC SAAJ
Conteiner EJB
JAXR
Beans de Beans de
Mgmt JMX
Arquitetura e Sessão Entidade
APIs J2EE Deployment
JACC
Java IDL
JDBC
RMI-IIOP
J2SE

JNDI
JAXP
JAAS

JDBC JavaMail JNDI JMS IIOP SOAP RMI

Servidor Servidor Fila de Servidor Serviço Aplicativo


Nível EIS RDMS de correio de correio mensagens CORBA Web Java

Emmerson Santa Rita da Silva Desenvolvimento Web


61 Introdução
 Breve descrição das principais APIs J2EE:
 Java Database Connectivity (JDBS – Conectividade de Banco de
Dados Java) proporciona conectividade a banco de dados
relacionais.
 Java Naming and Directory Interface (JNDI – Interface de Nomeação e
Diretórios Java) proporciona acesso a serviços de nomeação e de
diretório.
 Java API for XML Parsing (JAXP – API Java para análise de XML)
proporciona suporte para a análise sintática de documentos XML na
memória e para transformações XSLT em documentos XML para
convertê-los em outra forma.
 Servlets Java proporcionam uma maneira simples de estender a
funcionalidade de um servidor Web para acessar sistemas de
informações corporativos e fornecer conteúdo dinâmico aos usuários.

Emmerson Santa Rita da Silva Desenvolvimento Web


62 Introdução
 Breve descrição das principais APIs J2EE: (continuação)
 JavaServer Pages (JSP – Páginas JavaServer) são similares a Páginas de
Servidor Ativo (ASP). Elas permitem a mistura de código Java, scripting e
etiquetas personalizadas com HTML e XML para produzir conteúdo
dinâmico Web.
 Enterprise JavaBeans (EJB – JavaBeans Corporativos) são componentes
que tem o objetivo de simplificar o trabalho do analista no
desenvolvimento de aplicativos em nível corporativo, fornecendo
serviços embutidos como gerenciamento de transações e de
persistência.
 SOAP with Attachments API for Java (SAAJ – API para SOAP com anexos
para Java) é uma API que permite criação, manipulação, envio e
recebimento de mensagens SOAP.

Emmerson Santa Rita da Silva Desenvolvimento Web


63 Introdução
 Breve descrição das principais APIs J2EE: (continuação)
 Java API for XML-based RPC (JAX-RPC – API Java para RPC baseado em
XML) proporciona facilidades para serializar objetos Java em uma
mensagem SOAP e desfazer a serialização de XML a partir de uma
mensagem SOAP em objetos Java, de forma que desenvolvedores de
Java possam invocar serviços remotos Web fazendo simplesmente
chamadas a métodos em objetos remotos.
 Java API for XML Registries (JAXR – API Java para Registros XML)
possibilita acesso a registros baseado em XML, incluindo registros UDDI.

Emmerson Santa Rita da Silva Desenvolvimento Web


64 Introdução
 Frameworks Web
 Front-end frameworks permitem que você acertar o chão em
execução ao desenvolver um novo site. Devido à sua popularidade,
uma grande variedade de frameworks front-end estão disponíveis, e
novos surgem em uma base regular.
 Porque há tantos para escolher, localizar a estrutura correta de front-
end pode ser complicado. Como muitos desenvolvedores, você
pode ser atraído descontroladamente para opções populares,
como Bootstrap e Fundation. Então, novamente, uma estrutura mais
recente, mas menos amplamente conhecida, pode ser mais
adequada às suas necessidades, por isso vale a pena se aproximar
das opções mais populares de hoje.

Emmerson Santa Rita da Silva Desenvolvimento Web


65 Introdução
 Frameworks Web/Mobile
 LESS Framework (https://jonikorpi.com/less-framework/ )
 O LESS Framework é um sistema de grid desenvolvido para que os layouts sejam projetados para
caberem em qualquer dispositivo móvel ou não, independentemente do tamanho da tela do
aparelho, seja ele um smartphone ou um computador de mesa com uma tela grande. Ele contém
quatro layouts e três conjuntos de tipografia presentes.

 PhoneGap (http://phonegap.com/ )
 O PhoneGap é um framework gratuito e de código livre que permite que sejam criados
aplicativos para plataforma mobile sem precisar usar códigos nativos da linguagem, como o
Objective c para iOS e Java para Android.
 No PhoneGap você desenvolve seu aplicativo usando apenas HTML, CSS e Javascript, que o
framework compila depois para a plataforma que você quiser, como mostra a figura:

Emmerson Santa Rita da Silva Desenvolvimento Web


66 Introdução
 Frameworks Web/Mobile
 Sencha Touch (https://www.sencha.com/products/touch/#overview )
 Um pouco parecido com o PhoneGap, o Sencha Touch permite que você desenvolva aplicativos mobiles usando a
linguagem HTML5, de maneira rápida e fácil você cria seu próprio aplicativo mobile.

 Exemplos de sites que usam o Sencha Touch


 Abaixo vou listar alguns exemplos de sites que usando o sencha touch.
 Kitchen Sink - http://dev.sencha.com/deploy/touch/examples/production/kitchensink/index.html
 The Watch List - http://www.watchlistapp.com/
 Jog With Friends - http://blooming-day-7830.herokuapp.com/
 Touch Tweets - http://dev.sencha.com/deploy/touch/examples/production/touchtweets/index.html
 Kiva - http://dev.sencha.com/deploy/touch/examples/production/kiva/index.html
 GeoCongress - http://dev.sencha.com/deploy/touch/examples/production/geocongress/index.html
 O’Reilly -http://dev.sencha.com/deploy/touch/examples/production/oreilly/index.html
 TouchStyle - http://dev.sencha.com/deploy/touch/examples/production/touchstyle/index.html
 Você pode conferir a lista complete no site oficial do Sencha Touch:
http://dev.sencha.com/deploy/touch/examples/production/

Emmerson Santa Rita da Silva Desenvolvimento Web


67 Introdução
 Frameworks Web/Mobile
 Twitter Bootstrap (http://alexanmtz.github.io/bootstrap/ )
 O Twitter Bootstrap é um framework criado para facilitar o desenvolvimento web, nele possui diversas
funcionalidades como, layouts responsivos, grid system, etc.
 Esse framework ficou tão famoso que diversas empresas resolveram criar seus próprios frameworks baseados no
Twitter Bootstrap, como a Globo.com com o Globo Bootstrap(http://globocom.github.com/bootstrap/).
 Aqui nesse link(http://twitter.github.com/bootstrap/getting-started.html#examples) é possível ver alguns
exemplos de funcionamento desse maravilhoso framework.
 HTML5 Boilerplate (https://html5boilerplate.com/ )
 Esse eu diria que seja o framework mais famoso de todos, ajudando os desenvolvedores a criarem aplicativos
web ou sites de maneira rápida, robusta e adaptável, ou seja, responsiva.
 Um dos responsáveis por ele ser o framework de desenvolvimento front-end mais famoso é que a grande
maioria das gigantes empresas no mundo o utiliza, como:
 Google - http://www.projectrebrief.com/

 Microsoft - http://www.microsoft.com/Surface/en-US

 NASA - http://data.nasa.gov/

 Nike - http://www.nike.com/us/en_us/lp/skateboarding/

 Barack Obama Oficial - http://www.barackobama.com/

 Mercedes-Benz - http://a-class.mercedes-benz.com/com/en/

 Entre outras.

Emmerson Santa Rita da Silva Desenvolvimento Web


68 Introdução
 Frameworks Web/Mobile
 Modernizr (https://modernizr.com/ )
 O Modernizr é uma biblioteca Javascript que detecta recursos de HTML5 e CSS3 nos
navegadores dos usuários.
 Também é utilizada por grandes empresas como o Google, Microsoft, Twitter, entre
outras.

 Foundation (http://foundation.zurb.com/ )
 O framework front-end Foundation 3, que nos fornece vários estilos para formatação
de diversos elementos da página de forma prática e elegante, bem como permite o
desenvolvimento de um layout responsivo.
 Foundation é um framework CSS construído com Sass, um pré-processador CSS
poderoso, que nos permite desenvolver muito mais rápido nossas próprias fundações e
nos disponibiliza novas ferramentas para personalizar e construirmos em cima dos estilos
iniciais.

Emmerson Santa Rita da Silva Desenvolvimento Web


69 Introdução
 Frameworks Web/Mobile
 Além dos citados anteriormente, temos uma gama de novos Frameworks no mercado e
vários surgindo todo os dias. Segue abaixo o nome de alguns dos mais populares
encontrados no mercado:
 Semantic-UI (http://semantic-ui.com/ )
 Materialize (http://materializecss.com/ )
 Material UI (http://www.material-ui.com/#/ )
 Pure (http://purecss.io/ )
 Skeleton (http://getskeleton.com/ )
 UIKit (https://getuikit.com/ )
 Miligram (https://milligram.github.io/ )
 Susy (http://susy.oddbird.net/ )

Emmerson Santa Rita da Silva Desenvolvimento Web


70 Introdução
 Frameworks Web/Mobile

Emmerson Santa Rita da Silva Desenvolvimento Web

Você também pode gostar