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
• Introduzir algumas tecnologias, suas
vantagens e desvantagens
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!”
Arquitetura
Execução no Cliente
(Browser)
•
•
•
•
•
•
•
HTML
CSS
Javascript
XML
XSLT
Tableless
...
HTML
<html>
<head>
<title>Título da Página</title>
</head>
<body>
Esta é minha primeira página.
</body>
</html>
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>
CSS – “pagina.css”
body {
background-color : #ffffff;
color : #000000;
}
• Demonstração:
http://www.csszengarden.com/
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/ddwseattle/tables/?no=15
JavaScript
<html>
<body>
<script type="text/javascript">
for (i = 0; i < 5; i++)
{
document.write("Alo você !!!")
document.write("<br />")
}
</script>
</body>
</html>
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>
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>
<livro isbn=“0002”>
<titulo>Meu pé de laranja lima</titulo>
<editora>Vozes</editora>
<autor>Brilhante</autor>
</livro>
</livros>
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>
Execução no Cliente
(Browser)
• “Inferno” dos web-designers:
compatibilidade entre browsers!
– Firefox
– Opera
– Internet Explorer (IECA)
– Konqueror
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
Execução no
Servidor
_
PHP
ASP
JSP
General
PHP Hypertext
Preprocessor
Active Server
Pages
Java Server Pages
supported
language(s)
own script
language
JScript, VBScript
or 5 different
Java
specifications
runs on almost
any platform
webserver
extension (IIS)
no platform restrictions
functionality
functionality by
modules
modularly built of
COM-objects
reusable components
and tags
security
complex code ->
complex security;
open source
complex code ->
complex security;
no open source
complex code -> complex
security;
open source
performance
interpreted
language
precompiled
code(?)
compiled to Servlets in
bytecode (interpreted)
database
connectivity
MySQL-drivers
included
ActiveX data
objects(ADO)
by "JDBC" (MSQL,
Oracle, Sybase)
Execução no
Servidor
• Servidores Web
– IIS
– Apache
– Tomcat
IIS
• Internet Information Server
• Microsoft
• Famoso por apresentar diversos
problemas de segurança no passado
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
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
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
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
Afins
• RSS
• Web Services
• AJAX
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 ..
RSS
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
Web Services
Web Services
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
AJAX
AJAX
AJAX
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.
Padrões de Projeto
(GoF – Gang of Four)
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
Padrões de Projeto –
Exemplo: Façade
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());
}
public void addDays(int days) { gcal.add(Calendar.DAY_OF_MONTH, days); }
public String toString() {
return new Formatter().format("%1$tY-%1$tm-%1$td", gcal).toString();}
}
/** "Client" */
class FacadePattern
{
public static void 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);
}
}
MVC (Model-ViewController)
• http://java.sun.com/blueprints/patterns/MVC-detailed.html
Nosso Plano
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/s
lides/minicurso.html
– Slides de um minicurso sobre programação em web
2.0