Desenvolvimento Web

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

Agenda • 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…

Agenda • Web 2.0 • O conceito • AJAX • Interface e RIA • CMS e frameworks • Conclusão

Cliente - Servidor

Endereçamento • 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

Exemplo de URI, URL e URN • 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 1.1 – Na teoria • 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

HTTP 1.1 – Na Prática • 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

Aindaemendereçamento • SEF (Search Engine Friendly): URL amigável EX: 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…

Como desenvolver? • 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 – O Documento <html> <head> <title> Hello ! </title> </head> <body> <p> Hello <br /> World </p> </body> </html>

Javascript – O script • 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

HTML, DOM eJavascript • 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

DOM - Exemplo • HTML <input type=“text” id=“txt” name=“txt” value=“” /> • Javascript Txt = document.getElementById( “txt” ); Txt.value = “Valor”;

CSS – O estilo • 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

CSS - Exemplo /* Objeto */ Input { background-color: yellow; } /* ID */ #txt { width: 300px; height: 200px; } /* Classe */ .input-busca { margin: 30px; }

Linguagens do Servidor • 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.

Web 2.0 • 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 !

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

AJAX - Funcionamento • 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.

Interface e RIA • Exemplos • Tecnologias proprietárias • Adobe Flash/Flex/Air • Microsoft Silverlight • Frameworks Javascript

CMS e frameworks • 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

Frameworks • 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

Frameworks - Exemplos • 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 criadoRod 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 (PlainOld 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çã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 - 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 DjangoReinhardt. • 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'tRepeatYourself); • Interface Administrativa; • URL's Elegantes; • Tem uma linguagem de templates poderosa, extensível e amigável.

Frameworks - Ruby • RubyonRails (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 ActionView (geração de visualização de usuário, como HTML, XML, JavaScript, entre outros) e o ActionController (controle de fluxo de negócio). • ActionMailer • responsável pelo serviço de entrega e até mesmo de recebimento de e-mails. • ActiveSupport • é uma coleção de várias classes úteis e extensões de bibliotecas padrões, que foram considerados úteis para aplicações em RubyonRails. • ActionWebServices • Provê uma maneira de publicar APIsinteroperá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; • RubyonRails segue dois conceitos que visam aumentar a produtividade do desenvolvedor: DRY e Convention over Configuration.

ConsideraçõesFinais • 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/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

Desenvolvimento Web