SlideShare uma empresa Scribd logo
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/ddw-
seattle/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-View-
Controller)
• 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

Mais conteúdo relacionado

Semelhante a Introdução à Programação “para Web” de Carlos Bazilio

Play Framework - Desenvolvendo Aplicações Web com Java sem Dor
Play Framework - Desenvolvendo Aplicações Web com Java sem DorPlay Framework - Desenvolvendo Aplicações Web com Java sem Dor
Play Framework - Desenvolvendo Aplicações Web com Java sem Dor
Allyson Barros
 
Introdução ao Front-end no Desenvolvimento Web
Introdução ao Front-end no Desenvolvimento WebIntrodução ao Front-end no Desenvolvimento Web
Introdução ao Front-end no Desenvolvimento Web
Anderson Luís Furlan
 
Ruby on Rails for beginners 2.0
Ruby on Rails for beginners 2.0Ruby on Rails for beginners 2.0
Ruby on Rails for beginners 2.0
Wendreo L. Fernandes
 
JBoss Fuse Service Works - O Fuse além da integração - PT-BR
JBoss Fuse Service Works - O Fuse além da integração - PT-BRJBoss Fuse Service Works - O Fuse além da integração - PT-BR
JBoss Fuse Service Works - O Fuse além da integração - PT-BR
Elvis Rocha
 
Treinamento ASP.NET 2014
Treinamento ASP.NET 2014Treinamento ASP.NET 2014
Treinamento ASP.NET 2014
Eric Gallardo
 
Desenvolvendo Sistema Cloud e Web Full-stack Developer
Desenvolvendo Sistema Cloud e Web Full-stack DeveloperDesenvolvendo Sistema Cloud e Web Full-stack Developer
Desenvolvendo Sistema Cloud e Web Full-stack Developer
Cesar Romero
 
Web Tools Pt Br
Web Tools Pt BrWeb Tools Pt Br
Web Tools Pt Br
Paulo Mattos
 
Csharp
CsharpCsharp
Aula 05 - Java Script Básico
Aula 05 -  Java Script BásicoAula 05 -  Java Script Básico
Aula 05 - Java Script Básico
Fabio Moura Pereira
 
NodeJS - Tutorial de forma simples e pratica.
NodeJS - Tutorial de forma simples e pratica.NodeJS - Tutorial de forma simples e pratica.
NodeJS - Tutorial de forma simples e pratica.
Filipe Morelli
 
Ass - RIA
Ass - RIAAss - RIA
Ass - RIA
guestd4b30af
 
2006 - ASP.NET.ppt
2006 - ASP.NET.ppt2006 - ASP.NET.ppt
2006 - ASP.NET.ppt
Ricardo Guerra Freitas
 
Ruby on Rails - Introdução ao Framework
Ruby on Rails - Introdução ao FrameworkRuby on Rails - Introdução ao Framework
Ruby on Rails - Introdução ao Framework
Guilherme Carlos
 
Programação web e o front-end
Programação web e o front-endProgramação web e o front-end
Programação web e o front-end
Anderson Luís Furlan
 
Web tools pt-br
Web tools pt-brWeb tools pt-br
Web tools pt-br
Paulo Mattos
 
Curso jsf
Curso jsfCurso jsf
Curso jsf
Miguel Vilaca
 
Introdução ao desenvolvimento da web.pptx
Introdução ao desenvolvimento da web.pptxIntrodução ao desenvolvimento da web.pptx
Introdução ao desenvolvimento da web.pptx
MarceloRosenbrock1
 
ORM e EF
ORM e EFORM e EF
Slide Aula - Curso CakePHP
Slide Aula - Curso CakePHPSlide Aula - Curso CakePHP
Slide Aula - Curso CakePHP
Rangel Javier
 
Projeto Web - Aula 1 - Fundamentos do Dev WEB.pptx
Projeto Web - Aula 1 - Fundamentos do Dev WEB.pptxProjeto Web - Aula 1 - Fundamentos do Dev WEB.pptx
Projeto Web - Aula 1 - Fundamentos do Dev WEB.pptx
Luiz Antonio
 

Semelhante a Introdução à Programação “para Web” de Carlos Bazilio (20)

Play Framework - Desenvolvendo Aplicações Web com Java sem Dor
Play Framework - Desenvolvendo Aplicações Web com Java sem DorPlay Framework - Desenvolvendo Aplicações Web com Java sem Dor
Play Framework - Desenvolvendo Aplicações Web com Java sem Dor
 
Introdução ao Front-end no Desenvolvimento Web
Introdução ao Front-end no Desenvolvimento WebIntrodução ao Front-end no Desenvolvimento Web
Introdução ao Front-end no Desenvolvimento Web
 
Ruby on Rails for beginners 2.0
Ruby on Rails for beginners 2.0Ruby on Rails for beginners 2.0
Ruby on Rails for beginners 2.0
 
JBoss Fuse Service Works - O Fuse além da integração - PT-BR
JBoss Fuse Service Works - O Fuse além da integração - PT-BRJBoss Fuse Service Works - O Fuse além da integração - PT-BR
JBoss Fuse Service Works - O Fuse além da integração - PT-BR
 
Treinamento ASP.NET 2014
Treinamento ASP.NET 2014Treinamento ASP.NET 2014
Treinamento ASP.NET 2014
 
Desenvolvendo Sistema Cloud e Web Full-stack Developer
Desenvolvendo Sistema Cloud e Web Full-stack DeveloperDesenvolvendo Sistema Cloud e Web Full-stack Developer
Desenvolvendo Sistema Cloud e Web Full-stack Developer
 
Web Tools Pt Br
Web Tools Pt BrWeb Tools Pt Br
Web Tools Pt Br
 
Csharp
CsharpCsharp
Csharp
 
Aula 05 - Java Script Básico
Aula 05 -  Java Script BásicoAula 05 -  Java Script Básico
Aula 05 - Java Script Básico
 
NodeJS - Tutorial de forma simples e pratica.
NodeJS - Tutorial de forma simples e pratica.NodeJS - Tutorial de forma simples e pratica.
NodeJS - Tutorial de forma simples e pratica.
 
Ass - RIA
Ass - RIAAss - RIA
Ass - RIA
 
2006 - ASP.NET.ppt
2006 - ASP.NET.ppt2006 - ASP.NET.ppt
2006 - ASP.NET.ppt
 
Ruby on Rails - Introdução ao Framework
Ruby on Rails - Introdução ao FrameworkRuby on Rails - Introdução ao Framework
Ruby on Rails - Introdução ao Framework
 
Programação web e o front-end
Programação web e o front-endProgramação web e o front-end
Programação web e o front-end
 
Web tools pt-br
Web tools pt-brWeb tools pt-br
Web tools pt-br
 
Curso jsf
Curso jsfCurso jsf
Curso jsf
 
Introdução ao desenvolvimento da web.pptx
Introdução ao desenvolvimento da web.pptxIntrodução ao desenvolvimento da web.pptx
Introdução ao desenvolvimento da web.pptx
 
ORM e EF
ORM e EFORM e EF
ORM e EF
 
Slide Aula - Curso CakePHP
Slide Aula - Curso CakePHPSlide Aula - Curso CakePHP
Slide Aula - Curso CakePHP
 
Projeto Web - Aula 1 - Fundamentos do Dev WEB.pptx
Projeto Web - Aula 1 - Fundamentos do Dev WEB.pptxProjeto Web - Aula 1 - Fundamentos do Dev WEB.pptx
Projeto Web - Aula 1 - Fundamentos do Dev WEB.pptx
 

Mais de RicardoKratz2

Aula 04 - Entender as origens e os propósitos da Estatística
Aula 04 - Entender as origens e os propósitos da EstatísticaAula 04 - Entender as origens e os propósitos da Estatística
Aula 04 - Entender as origens e os propósitos da Estatística
RicardoKratz2
 
Trabalho de Sowt do crunchyroll da dsciplina de Jogos empresariais
Trabalho de Sowt do crunchyroll da dsciplina de Jogos empresariaisTrabalho de Sowt do crunchyroll da dsciplina de Jogos empresariais
Trabalho de Sowt do crunchyroll da dsciplina de Jogos empresariais
RicardoKratz2
 
tRABALHO de pesquisa de clima organizacionais.pptx
tRABALHO de  pesquisa de clima organizacionais.pptxtRABALHO de  pesquisa de clima organizacionais.pptx
tRABALHO de pesquisa de clima organizacionais.pptx
RicardoKratz2
 
6443d571-bde3-0d83-d76b-65062c9fc97e-1.pptx
6443d571-bde3-0d83-d76b-65062c9fc97e-1.pptx6443d571-bde3-0d83-d76b-65062c9fc97e-1.pptx
6443d571-bde3-0d83-d76b-65062c9fc97e-1.pptx
RicardoKratz2
 
TRABALHO DE JOGOS EMPRESARIAIS: OS MELHORES DO NETFLIX
TRABALHO DE JOGOS EMPRESARIAIS: OS MELHORES DO NETFLIXTRABALHO DE JOGOS EMPRESARIAIS: OS MELHORES DO NETFLIX
TRABALHO DE JOGOS EMPRESARIAIS: OS MELHORES DO NETFLIX
RicardoKratz2
 
Trabalho de Jogos Empresariais sobre LIBREFLIX
Trabalho de Jogos Empresariais sobre LIBREFLIXTrabalho de Jogos Empresariais sobre LIBREFLIX
Trabalho de Jogos Empresariais sobre LIBREFLIX
RicardoKratz2
 
Resultado Pesquisa de Clima Organizacional
Resultado Pesquisa de Clima OrganizacionalResultado Pesquisa de Clima Organizacional
Resultado Pesquisa de Clima Organizacional
RicardoKratz2
 
Unified Modeling Language
Unified Modeling LanguageUnified Modeling Language
Unified Modeling Language
RicardoKratz2
 
Aula 06 - Engenharia de Requisitos.pdf
Aula 06 - Engenharia de Requisitos.pdfAula 06 - Engenharia de Requisitos.pdf
Aula 06 - Engenharia de Requisitos.pdf
RicardoKratz2
 
ALG 10 - Estruturas Condicionais.ppt
ALG 10 - Estruturas Condicionais.pptALG 10 - Estruturas Condicionais.ppt
ALG 10 - Estruturas Condicionais.ppt
RicardoKratz2
 
Aula 05- Metodologia de AIA e Analise Tec de Estudos Ambientais.ppt
Aula 05- Metodologia de AIA e Analise Tec de Estudos Ambientais.pptAula 05- Metodologia de AIA e Analise Tec de Estudos Ambientais.ppt
Aula 05- Metodologia de AIA e Analise Tec de Estudos Ambientais.ppt
RicardoKratz2
 
Aula 04- Identificacao de Impactos Ambientais.ppt
Aula 04- Identificacao de Impactos Ambientais.pptAula 04- Identificacao de Impactos Ambientais.ppt
Aula 04- Identificacao de Impactos Ambientais.ppt
RicardoKratz2
 
QCS-6493_2019-07-18T034241_Sentiment Analysis_PowerBI.ppt
QCS-6493_2019-07-18T034241_Sentiment Analysis_PowerBI.pptQCS-6493_2019-07-18T034241_Sentiment Analysis_PowerBI.ppt
QCS-6493_2019-07-18T034241_Sentiment Analysis_PowerBI.ppt
RicardoKratz2
 
RegAluMem.ppt
RegAluMem.pptRegAluMem.ppt
RegAluMem.ppt
RicardoKratz2
 
Aula 02.ppt
Aula 02.pptAula 02.ppt
Aula 02.ppt
RicardoKratz2
 

Mais de RicardoKratz2 (15)

Aula 04 - Entender as origens e os propósitos da Estatística
Aula 04 - Entender as origens e os propósitos da EstatísticaAula 04 - Entender as origens e os propósitos da Estatística
Aula 04 - Entender as origens e os propósitos da Estatística
 
Trabalho de Sowt do crunchyroll da dsciplina de Jogos empresariais
Trabalho de Sowt do crunchyroll da dsciplina de Jogos empresariaisTrabalho de Sowt do crunchyroll da dsciplina de Jogos empresariais
Trabalho de Sowt do crunchyroll da dsciplina de Jogos empresariais
 
tRABALHO de pesquisa de clima organizacionais.pptx
tRABALHO de  pesquisa de clima organizacionais.pptxtRABALHO de  pesquisa de clima organizacionais.pptx
tRABALHO de pesquisa de clima organizacionais.pptx
 
6443d571-bde3-0d83-d76b-65062c9fc97e-1.pptx
6443d571-bde3-0d83-d76b-65062c9fc97e-1.pptx6443d571-bde3-0d83-d76b-65062c9fc97e-1.pptx
6443d571-bde3-0d83-d76b-65062c9fc97e-1.pptx
 
TRABALHO DE JOGOS EMPRESARIAIS: OS MELHORES DO NETFLIX
TRABALHO DE JOGOS EMPRESARIAIS: OS MELHORES DO NETFLIXTRABALHO DE JOGOS EMPRESARIAIS: OS MELHORES DO NETFLIX
TRABALHO DE JOGOS EMPRESARIAIS: OS MELHORES DO NETFLIX
 
Trabalho de Jogos Empresariais sobre LIBREFLIX
Trabalho de Jogos Empresariais sobre LIBREFLIXTrabalho de Jogos Empresariais sobre LIBREFLIX
Trabalho de Jogos Empresariais sobre LIBREFLIX
 
Resultado Pesquisa de Clima Organizacional
Resultado Pesquisa de Clima OrganizacionalResultado Pesquisa de Clima Organizacional
Resultado Pesquisa de Clima Organizacional
 
Unified Modeling Language
Unified Modeling LanguageUnified Modeling Language
Unified Modeling Language
 
Aula 06 - Engenharia de Requisitos.pdf
Aula 06 - Engenharia de Requisitos.pdfAula 06 - Engenharia de Requisitos.pdf
Aula 06 - Engenharia de Requisitos.pdf
 
ALG 10 - Estruturas Condicionais.ppt
ALG 10 - Estruturas Condicionais.pptALG 10 - Estruturas Condicionais.ppt
ALG 10 - Estruturas Condicionais.ppt
 
Aula 05- Metodologia de AIA e Analise Tec de Estudos Ambientais.ppt
Aula 05- Metodologia de AIA e Analise Tec de Estudos Ambientais.pptAula 05- Metodologia de AIA e Analise Tec de Estudos Ambientais.ppt
Aula 05- Metodologia de AIA e Analise Tec de Estudos Ambientais.ppt
 
Aula 04- Identificacao de Impactos Ambientais.ppt
Aula 04- Identificacao de Impactos Ambientais.pptAula 04- Identificacao de Impactos Ambientais.ppt
Aula 04- Identificacao de Impactos Ambientais.ppt
 
QCS-6493_2019-07-18T034241_Sentiment Analysis_PowerBI.ppt
QCS-6493_2019-07-18T034241_Sentiment Analysis_PowerBI.pptQCS-6493_2019-07-18T034241_Sentiment Analysis_PowerBI.ppt
QCS-6493_2019-07-18T034241_Sentiment Analysis_PowerBI.ppt
 
RegAluMem.ppt
RegAluMem.pptRegAluMem.ppt
RegAluMem.ppt
 
Aula 02.ppt
Aula 02.pptAula 02.ppt
Aula 02.ppt
 

Introdução à Programação “para Web” de Carlos Bazilio

  • 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!”
  • 5. Execução no Cliente (Browser) • HTML • CSS • Javascript • XML • XSLT • Tableless • ...
  • 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” body { background-color : #ffffff; color : #000000; } • Demonstração: http://www.csszengarden.com/
  • 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> <livro isbn=“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 _ 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)
  • 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
  • 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()); } 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); } }
  • 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/s lides/minicurso.html – Slides de um minicurso sobre programação em web 2.0