engenharia de software alessandro cruz marcelo brandão theodoro júnior

35
Engenharia de Software Alessandro Cruz Marcelo Brandão Theodoro Júnior

Upload: internet

Post on 17-Apr-2015

112 views

Category:

Documents


3 download

TRANSCRIPT

Page 1: Engenharia de Software Alessandro Cruz Marcelo Brandão Theodoro Júnior

Engenharia de Software

Alessandro CruzMarcelo Brandão Theodoro Júnior

Page 2: 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…

Page 3: Engenharia de Software Alessandro Cruz Marcelo Brandão Theodoro Júnior

Web 2.0◦ O conceito◦ AJAX◦ Interface e RIA

CMS e frameworks Conclusão

Page 4: Engenharia de Software Alessandro Cruz Marcelo Brandão Theodoro Júnior
Page 5: Engenharia de Software Alessandro Cruz Marcelo Brandão Theodoro Júnior

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

Page 6: Engenharia de Software Alessandro Cruz Marcelo Brandão Theodoro Júnior

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”

Page 7: Engenharia de Software Alessandro Cruz Marcelo Brandão Theodoro Júnior

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

Page 8: Engenharia de Software Alessandro Cruz Marcelo Brandão Theodoro Júnior

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

Page 9: Engenharia de Software Alessandro Cruz Marcelo Brandão Theodoro Júnior

SEF (Search Engine Friendly): URL amigávelEX:

http://www.uol.com.br/noticias/corinthians-vai-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…

Page 10: Engenharia de Software Alessandro Cruz Marcelo Brandão Theodoro Júnior

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)

Page 11: Engenharia de Software Alessandro Cruz Marcelo Brandão Theodoro Júnior

<html><head>

<title> Hello ! </title></head><body>

<p> Hello <br /> World </p></body>

</html>

Page 12: Engenharia de Software Alessandro Cruz Marcelo Brandão Theodoro Júnior

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

Page 13: Engenharia de Software Alessandro Cruz Marcelo Brandão Theodoro Júnior

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

Page 14: Engenharia de Software Alessandro Cruz Marcelo Brandão Theodoro Júnior

HTML<input type=“text” id=“txt” name=“txt”

value=“” /> JavascriptTxt = document.getElementById( “txt” );Txt.value = “Valor”;

Page 15: Engenharia de Software Alessandro Cruz Marcelo Brandão Theodoro Júnior

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

Page 16: Engenharia de Software Alessandro Cruz Marcelo Brandão Theodoro Júnior

/* Objeto */Input { background-color: yellow; }

/* ID */#txt { width: 300px; height: 200px; }

/* Classe */.input-busca { margin: 30px; }

Page 17: Engenharia de Software Alessandro Cruz Marcelo Brandão Theodoro Júnior

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.

Page 18: Engenharia de Software Alessandro Cruz Marcelo Brandão Theodoro Júnior

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 !

Page 19: Engenharia de Software Alessandro Cruz Marcelo Brandão Theodoro Júnior

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

Page 20: Engenharia de Software Alessandro Cruz Marcelo Brandão Theodoro Júnior

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.

Page 21: Engenharia de Software Alessandro Cruz Marcelo Brandão Theodoro Júnior

Exemplos

Tecnologias proprietárias◦ Adobe Flash/Flex/Air◦ Microsoft Silverlight

Frameworks Javascript

Page 22: Engenharia de Software Alessandro Cruz Marcelo Brandão Theodoro Júnior

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

Page 23: Engenharia de Software Alessandro Cruz Marcelo Brandão Theodoro Júnior

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

Page 24: Engenharia de Software Alessandro Cruz Marcelo Brandão Theodoro Júnior

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…

Page 25: Engenharia de Software Alessandro Cruz Marcelo Brandão Theodoro Júnior

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 - JavaFrameworks - Java

Page 26: Engenharia de Software Alessandro Cruz Marcelo Brandão Theodoro Júnior

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 - JavaFrameworks - Java

Page 27: Engenharia de Software Alessandro Cruz Marcelo Brandão Theodoro Júnior

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 - PHPFrameworks - PHP

Page 28: Engenharia de Software Alessandro Cruz Marcelo Brandão Theodoro Júnior

CakePHP◦ Utiliza-se dos padrões MVC (Modelo-Visualização-

Controlador);◦ 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 - PHPFrameworks - PHP

Page 29: Engenharia de Software Alessandro Cruz Marcelo Brandão Theodoro Júnior

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.

Frameworks - PHPFrameworks - PHP

Page 30: Engenharia de Software Alessandro Cruz Marcelo Brandão Theodoro Júnior

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 - PHPCMS - PHP

Page 31: Engenharia de Software Alessandro Cruz Marcelo Brandão Theodoro Júnior

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.

CMS - PHPCMS - PHP

Page 32: Engenharia de Software Alessandro Cruz Marcelo Brandão Theodoro Júnior

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 - PythonFrameworks - Python

Page 33: Engenharia de Software Alessandro Cruz Marcelo Brandão Theodoro Júnior

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.

Active Support é 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. 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.

Frameworks - RubyFrameworks - Ruby

Page 34: Engenharia de Software Alessandro Cruz Marcelo Brandão Theodoro Júnior

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

Considerações FinaisConsiderações Finais

Page 35: Engenharia de Software Alessandro Cruz Marcelo Brandão Theodoro Júnior

HTTP 1.1 : http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html

URI : http://www.w3.org/Addressing/URL/uri-spec.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

BibliografiaBibliografia