1. Introdução à Programação “para Web” Carlos Bazilio Depto de Ciência e Tecnologia Pólo Universitário de Rio das Ostras Universidade Federal Fluminense

2. Objetivo • Apresentar aos participantes alguns conceitos básicos atuais relacionados à programação e programação para web • Introduzir algumas tecnologias, suas vantagens e desvantagens

3. Lição para um Profissional de Computação “Prostituam-se! Prostituam-se quando o assunto for linguagem de programação, IDE, metodologia, arquitetura, ou qualquer outro tipo de escolha!”

4. Arquitetura

5. Execução no Cliente (Browser) • HTML • CSS • Javascript • XML • XSLT • Tableless • ...

6. HTML <html> <head> <title>Título da Página</title> </head> <body> Esta é minha primeira página. </body> </html>

7. CSS <html> <head> <link href="pagina.css" rel="stylesheet" type="text/css" /> <title>Título da Página</title> </head> <body> Esta é minha primeira página. </body> </html>

8. CSS – “pagina.css” • Demonstração: http://www.csszengarden.com/ body { background-color : #ffffff; color : #000000; }

9. Tableless • Padrão que vem sendo adotado na web para uso massivo de html+css • Além, não utilizar tabelas html para construção de conteúdo diferente de tabela (origem do nome) • Naturalmente, este uso não deveria ser evitado se o que se deseja é construir uma tabela • Exemplo: http://www.stopdesign.com/present/2004/ddw-seattle/tables/?no=15

10. JavaScript <html> <body> <script type="text/javascript"> for (i = 0; i < 5; i++) { document.write("Alo você !!!") document.write("<br />") } </script> </body> </html>

11. JavaScript <html> <head> <script type="text/javascript"> function alo(k) { var s = ""; for (i = 0; i < k; i++) { s = s + "Alo você !!!" s = s + "<br />" } return s } </script> <title>Alouuuuuu</title> </head> <body> <script type="text/javascript"> document.write(alo(4)) </script> </body> </html>

12. XML <?xml version="1.0" encoding="UTF-8"?> <livros> <livro isbn=“0001”> <titulo>JavaServer Pages</titulo> <autor>Nick Todd</autor> <editora>Campus</editora> <assunto>JSP</assunto> </livro> <livroisbn=“0002”> <titulo>Meu pé de laranja lima</titulo> <editora>Vozes</editora> <autor>Brilhante</autor> </livro> </livros>

13. XSLT <?xml version="1.0" encoding="UTF-8"?> <xsl:stylesheet version="2.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:xs="http://www.w3.org/2001/XMLSchema" xmlns:fn="http://www.w3.org/2005/xpath-functions"> <xsl:output method="xml" version="1.0" encoding="ISO-8859-1" indent="yes"/> <xsl:template match="/"> <html><head><title>Meus livros</title></head> <body> <table border="1"> <tr><th>Título</th><th>Autor</th></tr> <xsl:for-each select="//livro"> <tr> <td><xsl:value-of select="titulo"/></td> <td><xsl:value-of select="autor"/></td> </tr> </xsl:for-each> </table></body></html> </xsl:template> </xsl:stylesheet>

14. Execução no Cliente (Browser) • “Inferno” dos web-designers: compatibilidade entre browsers! • Firefox • Opera • Internet Explorer (IECA) • Konqueror

15. Execução no Servidor • Necessidade dos websites oferecerem conteúdos dinâmicos e atualizados • Ciclo de vida da informações trafegadas entre servidor e cliente (escopo) • Linguagens de script • JSP • ASP • PHP • Perl

16. Execução no Servidor

17. Execução no Servidor • Servidores Web • IIS • Apache • Tomcat

18. IIS • Internet Information Server • Microsoft • Famoso por apresentar diversos problemas de segurança no passado

19. Apache • Servidor web mais utilizado no mundo atualmente (Fonte: Netcraft) • Software Livre • Escrito em C • Executa diversas linguagens script: PhP, Perl, ASP, etc. • Possui suporte nativo ao MySQL • Permite definição de módulos para extensão do servidor • Exemplo: suporte para JSP

20. Tomcat • Implementação de referência para JSP/Servlets (Java) • Escrito em Java • Devido à sua simplicidade e fácil instalação, é comumente utilizado em cursos para desenvolvimento web

21. Servidores de Aplicação • Estes servidores oferecem recursos comuns a diferentes aplicações (autenticação, conexão à BDs, suporte a transação, etc) • Pensando-se numa arquitetura em camadas, um servidor de aplicação é um servidor que hospeda e oferece serviços para outras aplicações • Com isso, espera-se que os desenvolvedores poupem tempo para implementação da lógica do negócio

22. Servidores de Aplicação • Exemplos: • Java: JBoss (Red Hat), WebLogic (BEA), WebSphere (IBM), Geronimo (Apache), Sun Application Server (SUN), Glassfish (baseado no da SUN) • Microsoft: .NET Framework

23. Afins • RSS • Web Services • AJAX

24. RSS • Really Simple Syndication • Formato padrão, baseado em XML • Tem sido adotado por websites que disponibilizam informações na rede, como sites de jornais, blogs, sites institucionais, etc. • Hoje existem diversos leitores (agregadores) de RSS: browsers, programas de e-mail, softwares, etc ..

25. RSS

26. Web Services • Proposta: • Integração de sistemas através do uso de XML sobre HTTP • Tecnologias: • XML • WSDL (Web Service Description Language) • SOAP (Simple Object Access Protocol) • Vantagens: • Integração com baixo acoplamento • Independe das linguagens de implementação

27. Web Services

28. Web Services

29. AJAX • Asynchronous Javascript And XML • Construção de páginas mais dinâmicas através de chamadas assíncronas ao servidor • Não é uma tecnologia, mas sim uma combinação de tecnologias • XHTML + CSS + XML + XSLT + XMLHttpRequest e JavaScript

30. AJAX

31. AJAX

32. AJAX

33. Padrões de Projeto • Um padrão de projeto é uma solução comum para um problema comum encontrado no desenvolvimento de software (Sun); • Sedimentação do conceito com o lançamento do livro: “Design Patterns: Elements of Reusable Object-Oriented Software”; • Não está amarrado a nenhuma linguagem OO.

34. Padrões de Projeto (GoF – Gang of Four)

35. Padrões de Projeto • A utilização desses padrões usualmente implica em algumas vantagens: • Facilidade de comunicação: padrões possuem nomes, os quais resumem uma solução que deve ser de conhecimento comum entre equipes de desenvolvimento; • Credibilidade: sua implementação estará utilizando soluções amplamente testadas e aprovadas; • Facilidade de manutenção: padrões tendem a reduzir o acoplamento entre componentes, o que implica num sistema de fácil manutenção

36. Padrões de Projeto – Exemplo: Façade

37. import java.util.*; /** "Façade" */ class UserfriendlyDate { GregorianCalendar gcal; public UserfriendlyDate(String isodate_ymd) { String[] a = isodate_ymd.split("-"); gcal = new GregorianCalendar(Integer.valueOf(a[0]).intValue(), Integer.valueOf(a[1]).intValue()-1 /* !!! */, Integer.valueOf(a[2]).intValue()); } publicvoid addDays(int days) { gcal.add(Calendar.DAY_OF_MONTH, days); } public String toString() { returnnew Formatter().format("%1$tY-%1$tm-%1$td", gcal).toString();} } /** "Client" */ class FacadePattern { publicstaticvoid main(String[] args) { UserfriendlyDate d = new UserfriendlyDate("1980-08-20"); System.out.println("Date: "+d); d.addDays(20); System.out.println("20 days after: "+d); } }

38. MVC (Model-View-Controller) • http://java.sun.com/blueprints/patterns/MVC-detailed.html

39. Nosso Plano

40. Links Interessantes • http://www.w3schools.com/ • Site com tutoriais on-line rápidos e com muita qualidade • http://del.icio.us/carlosbazilio • Meus links favoritos disponibilizados on-line • http://en.wikipedia.org/wiki/Design_Patterns • Wikipedia sobre Design Patterns • http://www.hideout.com.br/usp/semacomp2005/slides/minicurso.html • Slides de um minicurso sobre programação em web 2.0