Desenvolvimento Web - DC
Propaganda
Engenharia de Software
Alessandro Cruz
Marcelo Brandão Theodoro Júnior
Como funciona ?
◦ Arquitetura Cliente-Servidor
◦ Protocolo HTTP
Como desenvolver ?
◦ O lado do cliente
HTML / XML / XHTML
Javascript
CSS
◦ O lado do servidor: Java, PHP, Ruby, Phyton, etc…
Web 2.0
◦ O conceito
◦ AJAX
◦ Interface e RIA
CMS e frameworks
Conclusão
Toda máquina tem um endereço IP
Toda informação da web é identificada por
uma URI.
URI: Universal Resource Identifier
URL: Uniform Resource Locator
URN: Uniform Resource Name
URI: conceito
<protocolo>://<localizacao>/<caminho>/<recurso
>
URL: localização
http://www.dc.ufscar.br/
URN: nome
<xsd:schema
xmlns="http://www.w3.org/2001/XMLSchema”
targetNamespace="urn:example”
HTTP GET: Requisição de informações
especificadas pela URI
HTTP POST: Requisita que o servidor aceite as
informações enviadas para a URI
HTTP PUT: Requisita que o servidor armazene
as informações enviadas para a URI
HTTP DELETE: Requisita que o servidor
apague o recurso identificado pela URI
As linguagens server-side aumentaram o
nível de abstração da comunição, restando só
dois métodos HTTP realmente usados
HTTP GET: Aparece na URI do browser
◦ Ex: Busca do Google
HTTP POST: Não aparece na URI do browser
◦ Ex: A visualização do seu extrato no banco
SEF (Search Engine Friendly): URL amigável
EX:
http://www.uol.com.br/noticias/corinthiansvai-ver-a-semifinal-do-paulista-pela-tv
Mas por quê?
◦ SEO (Search Engine Otimization): Otimização para
mecanismos de busca
◦ Número de links, redes sociais, SEF, etc…
A resposta do servidor deve ser em formato
que o cliente (browser) consegue entender
O processamento é feito na linguagem do
servidor (programação): Java, PHP, C#, etc…
O output é feito em linguagem de marcação
(HTML/XHTML), script (Javascript) ou de
estilos (CSS)
<html>
<head>
<title> Hello ! </title>
</head>
<body>
<p> Hello <br /> World </p>
</body>
</html>
Linguagem de script do browser, logo, é
executada no cliente
Serve para executar ações sobre os objetos
definidos na página pelo documento HTML
Tipagem dinâmica
Sintaxe similar a C/C++, Java, PHP, C#
“Padronização” entre browsers
DOM: Document-Object Model
Modelo de manipulação de objetos em um
documento HTML
Permite que as linguagens do browser
acessem os objetos definidos no HTML
HTML
<input type=“text” id=“txt” name=“txt”
value=“” />
Javascript
Txt = document.getElementById( “txt” );
Txt.value = “Valor”;
Cascading Style Sheets
Linguagem de estilização dos objetos
contidos no documento HTML
Cada objeto HTML tem várias propriedades
para estilização
Os objetos podem ser identificados pelo ID,
pela classe ou pelo identificador do elemento
/* Objeto */
Input { background-color: yellow; }
/* ID */
#txt { width: 300px; height: 200px; }
/* Classe */
.input-busca { margin: 30px; }
O servidor web é um programa que gerencia
as requisições HTTP dos clientes
O processamento e resposta é feito pelo
software que controla o site
O software de controle do site é escrito em
uma linguagem de programação, ou mesmo,
HTML puro.
Qual linguagem para o site? Qualquer uma.
O usuário é o que importa
◦ Opinião, sentimento, redes sociais
Interface rica (RIA)
◦ Efeitos intuitivos, ferramentas de mapas, etc…
E o tal do AJAX !
Asynchronous JAvascript and XML
Requisições assincronas para o servidor
Isso significa:
◦ Rapidez de carregamento da página
◦ Facilidade de navegação
◦ Diminuição do tempo de espera do usuário
Baseado no objeto XMLHTTP do Javascript
O objeto XMLHTTP faz uma requisição para o
servidor assim que ocorra um evento no DOM
O servidor processa a requisição e envia a
resposta
No AJAX convencional, a resposta é XML
Na prática, pode ser qualquer formato. O
formato mais popular para AJAX é o JSON.
Exemplos
Tecnologias proprietárias
◦ Adobe Flash/Flex/Air
◦ Microsoft Silverlight
Frameworks Javascript
CMS (Content Management System)
◦ Ex: WordPress, Joomla, Drupal
CMS implementam funcionalidades comuns
entre os sites, como acesso ao BD e login de
usuários. Também possuem sistema de
templates, além de classes CSS e efeitos
Javascript
Provêm funcionalidades genéricas para um
domínio
Controlam o fluxo da aplicação
Podem ser extendidos
Diminuem a complexidade e o tempo de
desenvolvimento
Java: Spring, Struts
PHP: Zend Framework, CakePHP, Symfony,
Joomla, Drupal
Python: Django
Ruby: Ruby on Rails
Javascript*: Prototype, Mootools, Jquery,
Dojo, GWT, Script.aculo.us, Highslide, etc…
Frameworks - Java
Spring
◦ Framework Open Source criado Rod Johnson;
◦ Tem como base:
Padrões de Projetos de inversão;
Injeção de dependência;
◦ Possui Container :
instancia classes de uma aplicação Java;
define as dependências entre elas por meio de um
arquivo de configuração em formato XML;
◦ Fraco acoplamento;
◦ Arquitetura tem como base interfaces e POJOs (Plain
Old Java Objects).
Frameworks - Java
Struts
◦ Originalmente desenvolvido por Craig McClanahan;
◦ Doado para a Apache Software Foundation em 2002;
◦ Segue o padrão Model 2 (variante do MVC da Sun);
◦ Possui fraco acoplamento.
Frameworks - PHP
Zend Framework
◦ Arquitetura “use à vontade” permite a reutilização
de componentes sem dependência de outros ZF;
◦ Não exige um padrão que todos os usuários Zend
Framework devam seguir durante o
desenvolvimento;
◦ Fraco acoplamento e interdependências mínimas
Permite o uso de componentes PHP frameworks de
terceiros;
◦ Empresas que usam ZF:
IBM, NOKIA, etc.
Frameworks - PHP
CakePHP
◦ Utiliza-se dos padrões MVC (Modelo-VisualizaçãoControlador);
◦ Classes e objetos adicionais que tem como objetivo
proporcionar extensibilidade e reuso:
Extensões do Controlador;
Extensões de Visão;
Extensões de Modelo;
◦ Serviu de base para a criação do Lithum Framework
por Garrett Woodworth e Nate Abele em outubro de
2009.
Frameworks - PHP
Symfony
◦ Segue padrão MVC;
◦ curva de aprendizagem necessária para seu uso
proficiente está reduzida a menos de um dia;
◦ permitir que os desenvolvedores apliquem
princípios ágeis do desenvolvimento (tais como
DRY, KISS ou XP);
◦ Tem como objetivo construir aplicações robustas
em contexto empresarial;
◦ Quase tudo pode ser personalizado:
da estrutura de diretórios às bibliotecas externas;
◦ Utilizado pelo Askeet e Yahoo Bookmarks.
CMS - PHP
Joomla
◦ Tem como base o CMS MAMBO;
◦ Lincença GNU/GPL
◦ Algumas vantagens:
Arquivamento de conteúdos não utilizados;
Sumário de conteúdo no formato RSS;
Estatísticas básicas de visitantes (existem módulos
mais complexos que podem ser adicionados);
Sistemas de índices de avaliação;
etc.
CMS - PHP
Drupal
◦ É um CMS (Sistema de gestão de conteúdos);
◦ Independente de plataforma;
◦ Princípios:
Modular e extensível;
Qualidade de codificação;
Baseado em padrões;
Demanda de poucos recursos;
Código aberto;
Facilidade de uso;
Colaboração
◦ Uma das desvantagens:
É considerado mais difícil de aprender e levemente mais
difícil de instalar do que outras soluções CMS.
Frameworks - Python
Django
◦ Utiliza padrão MVC;
◦ Licença BSD;
◦ nome Django foi inspirado no músico de jazz Django
Reinhardt.
◦ Criado originalmente como sistema para gerenciar um
site jornalístico na cidade de Lawrence, no Kansas;
◦ Algumas características:
Mapeamento Objeto-Relacional (ORM);
Django utiliza o princípio DRY (Don't Repeat Yourself);
Interface Administrativa;
URL's Elegantes;
Tem uma linguagem de templates poderosa, extensível e
amigável.
Frameworks - Ruby
Ruby on Rails (Rails ou RoR)
◦ Meta-Framework (conjunto de 5 frameworks):
Active Record
Camada responsável pela interoperabilidade entre a aplicação e o banco de dados e
pela abstração dos dados.
Action Pack
Compreende o Action View (geração de visualização de usuário, como HTML, XML,
JavaScript, entre outros) e o Action Controller (controle de fluxo de negócio).
Action Mailer
responsável pelo serviço de entrega e até mesmo de recebimento de e-mails.
é uma coleção de várias classes úteis e extensões de bibliotecas padrões, que foram
considerados úteis para aplicações em Ruby on Rails.
Active Support
Action WebServices
Provê uma maneira de publicar APIs interoperáveis com o Rails, sem a necessidade de
perder tempo dentro de especificações de protocolo. Implementa WSDL e SOAP.
◦ Promete aumentar velocidade e facilidade no desenvolvimento de sites
orientados a banco de dados (database-driven web sites);
◦ Segue o padrão MVC;
◦ Ruby on Rails segue dois conceitos que visam aumentar a produtividade
do desenvolvedor: DRY e Convention over Configuration.
Considerações Finais
Web é uma plataforma de desenvolvimento
sob o protocolo HTTP
A maioria das linguagens de programação
mais recentes possuem módulos de
desenvolvimento para web
Necessidade de interface refinada
Grande conjunto de CMS e frameworks que
simplificam o desenvolvimento
Bibliografia
HTTP 1.1 :
http://www.w3.org/Protocols/rfc2616/rfc26
16-sec9.html
URI :
http://www.w3.org/Addressing/URL/urispec.html
Foundation Website Creation with CSS,
XHTML and Javascript. Lane, J.; Moscovitz, M.;
Lewis, J. EditoraApress, 2008.
Professional Ajax, 2nd Ed. Zakas, N.;Fawcett,
J.; MacPeak, J. EditoraWrox
