1 / 40

Introdução à Programação “para Web”

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. Objetivo. Apresentar aos participantes alguns conceitos básicos atuais relacionados à programação e programação para web

barb
Download Presentation

Introdução à Programação “para Web”

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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

More Related