O documento discute bancos de dados e sistemas de gerenciamento de conteúdo (CMS). Explica que bancos de dados permitem armazenar e acessar conteúdo de forma dinâmica, ao contrário de páginas estáticas, e que CMS usam bancos de dados para permitir que usuários adicionem e editem conteúdo facilmente.

1. AULA 3
BANCO DE DADOS
e
SISTEMA GERENCIADOR DE
CONTEÚDO (CMS)

2. ANTES:
Revisão da aula 2

3. Diferença entre internet e web
• Internet: grande rede global de computadores
• Web: sistema de documentos digitais
multimídia e hipertextuais (páginas) que
funciona dentro da internet.
– Obs.: as páginas multimídia e hipertextuais ficam
armazenadas em servidores, que ficam ligados
24h por dia.

4. A World Wide Web (web)
A web funciona graças a três tecnologias:
• HTML: é a linguagem usada para construir as
páginas multimídia e hipertextual.
• URI: é o “endereço” das páginas. Permite
encontrarmos as páginas entre os servidores
da internet.
• HTTP: permite a “conversa” entre o navegador
(que está em seu computador) e o servidor
(que guarda as páginas).

5. O HTML
• É formado por códigos (tags) que servem para
indicar ao navegador como a informação deve
ser apresentada na página.
• Geralmente, usamos a tag de abertura e a tag
de fechamento (ex.: <p> blá blá blá </p>).
• Algumas não tem fechamento (ex.: <br>).
• Algumas têm atributos (ex.: <a href=“...”>)

6. ÚLTIMA ATIVIDADE DE AULA
• Vocês construíram uma notícia em uma
página usando HTML. Usaram:
– Para título: <h1> ... ... </h1>
– Para subtítulo: <h2> ... ... </h2>
– Para parágrafo: <p> ... ... </p>
– Para negrito: <b> ... ... </b>
– Para incorporar mídia: <iframe> ... ... </iframe>

7. CSS
• Vimos o que é CSS. Lembram?
• CSS é a tecnologia usada para alterar o visual
das páginas.
• Com o CSS, podemos alterar de uma só vez o
visual de todas as nossas páginas HTML.

8. ÚLTIMA ATIVIDADE DE AULA
• Vamos testar as páginas de vocês... AO VIVO!
• Acessem:
http://lammel.org/aula3/seunome

9. JAVASCRIPT
• OK: o HTML e o CSS servem para montar um
documento multimídia.
– Porém, note que este documento é estático!
• O Javascript é uma linguagem que permite
interação com este documento multimídia.
• Ou seja, ele faz com que o navegador faça
outras coisas além de mostrar o HTML/CSS.
• Ex.: ele pode mandar o navegador alterar a
página HTML que já tinha sido carregada.

10. JAVASCRIPT
• Vamos fazer um teste... acesse:
http://lammel.org/aula3/iuri

11. RESUMO
• Então, o resumão:
– O HTML constrói a estrutura da página.
– O CSS “enfeita” a página.
– O Javascript insere interatividade na página.
• Obs.: com estas três tecnologias, consigo fazer
sites e até apps para celular!
• Obs. 2: tente identificar as três tecnologias
nesta matéria do NYT.

12. ENTÃO...
• Pessoal, se eu quisesse adicionar uma nova
notícia agora, o que eu faria?
– Criaria um novo documento HTML/CSS/Javascript.
• Já imaginaram terem que fazer todas estas
mudanças no código toda vez que eu precisar
adicionar uma nova notícia ou alterar uma
notícia já existente?

13. AULA DE HOJE
BANCO DE DADOS

14. BANCO DE DADOS
• O que é banco de dados digital?
– Imagine que ele funciona como se fosse uma
grande planilha, para armazenar muito conteúdo.
• Qual a diferença do banco de dados para uma
planilha comum?
– No banco de dados, podemos executar comandos
para inserir, editar ou excluir conteúdos.

15. BANCO DE DADOS
id TÍTULO AUTOR EDITORIA CONTEÚDO DATA
7880 Bush envia
tropas ao Iraque
Cláudia
Maria
Política O presidente dos Estados
Unidos, George W. Bush,
enviou nesta manhã...
05-08-2
7881 Flamengo perde
para Santos
Jonatas
Souza
Esportes Em jogo decisivo, o Flamengo
deixou escapar a chance de
classificação no jogo desta...
07-08-2
7882 ... ... ... ...
7883 ... ... ... ...
7884 ... ... ... ...
7885 ... ... ... ...
• Exemplo de banco de dados de notícias:

16. BANCO DE DADOS
• Felizmente, ali pelo final dos anos 1990,
surgiram tecnologias para fazerem com que os
bancos de dados digitais funcionassem com
as páginas da web.
• Isso otimizou MUITO o processo de criação de
conteúdo digital.
• Passamos de páginas estáticas para dinâmicas

17. BANCO DE DADOS
• Página estática:
Para alterar o conteúdo da página, é preciso fazer o
download do arquivo HTML, abrir o arquivo,
alterar o código lá dentro do documento, salvar do
documento e mandar ele de volta ao servidor!

18. BANCO DE DADOS
### PUXAR TÍTULO
### PUXAR AUTOR
### PUXAR TEXTO
• Página dinâmica:

19. BANCO DE DADOS
### PUXAR TÍTULO
### PUXAR AUTOR
### PUXAR TEXTO
• Página dinâmica:

20. BANCO DE DADOS
• Página dinâmica:
Para alterar o conteúdo da página, basta fazer o
login no sistema que gerencia o banco de dados,
abrir a notícia e editar o texto ali mesmo!

21. BANCO DE DADOS
• Exemplo de praticidade do banco de dados:
um site jornalístico poderia usar o comando
Selecionar linhas onde EDITORIA = “esportes”
id TÍTULO AUTOR EDITORIA CONTEÚDO DATA
510 Bush envia
tropas ao
Iraque
Cláudia
Maria
Política O presidente dos Estados
Unidos, George W. Bush,
enviou nesta manhã...
05-08-2002
511 Flamengo
perde para
Santos
Jonatas
Souza
Esportes Em jogo decisivo, o
Flamengo deixou escapar
a chance de classificação
no jogo desta...
05-08-2002
512 Corinthians
mantém
colocação
Fernanda
Gomes
Esportes O Corinthians continua
liderando a tabela do
campeonato...
06-08-2002
513 ... ... ... ...

22. BANCO DE DADOS
• Exemplo de praticidade do banco de dados:
um site jornalístico poderia usar o comando
Selecionar linhas onde EDITORIA = “esportes”
id TÍTULO AUTOR EDITORIA CONTEÚDO DATA
510 Bush envia
tropas ao
Iraque
Cláudia
Maria
Política O presidente dos Estados
Unidos, George W. Bush,
enviou nesta manhã...
05-08-2002
511 Flamengo
perde para
Santos
Jonatas
Souza
Esportes Em jogo decisivo, o
Flamengo deixou escapar
a chance de classificação
no jogo desta...
05-08-2002
512 Corinthians
mantém
colocação
Fernanda
Gomes
Esportes O Corinthians continua
liderando a tabela do
campeonato...
06-08-2002
513 ... ... ... ...

23. BANCO DE DADOS
• Exemplo de praticidade do banco de dados:
um site jornalístico poderia usar o comando
Selecionar linhas onde DATA > “05-08-2002”
id TÍTULO AUTOR EDITORIA CONTEÚDO DATA
510 Bush envia
tropas ao
Iraque
Cláudia
Maria
Política O presidente dos Estados
Unidos, George W. Bush,
enviou nesta manhã...
05-08-2002
511 Flamengo
perde para
Santos
Jonatas
Souza
Esportes Em jogo decisivo, o
Flamengo deixou escapar
a chance de classificação
no jogo desta...
05-08-2002
512 Corinthians
mantém
colocação
Fernanda
Gomes
Esportes O Corinthians continua
liderando a tabela do
campeonato...
06-08-2002
513 ... ... ... ...

24. BANCO DE DADOS
• Exemplo de praticidade do banco de dados:
um site jornalístico poderia usar o comando
Selecionar linhas onde DATA > “05-08-2002”
id TÍTULO AUTOR EDITORIA CONTEÚDO DATA
510 Bush envia
tropas ao
Iraque
Cláudia
Maria
Política O presidente dos Estados
Unidos, George W. Bush,
enviou nesta manhã...
05-08-2002
511 Flamengo
perde para
Santos
Jonatas
Souza
Esportes Em jogo decisivo, o
Flamengo deixou escapar
a chance de classificação
no jogo desta...
05-08-2002
512 Corinthians
mantém
colocação
Fernanda
Gomes
Esportes O Corinthians continua
liderando a tabela do
campeonato...
06-08-2002
513 ... ... ... ...

25. BANCO DE DADOS
• A junção do BD com as páginas da web
também criou outras possibilidades, como
inserção de comentários, o acesso restrito por
login (usuário e senha), entre outros.
• Foi a união do BD com as páginas da web que
surgiu o que chamamos de web 2.0, ou seja,
as páginas são dinâmicas e se comportam
como aplicativos.

26. CMS
• A união do BD com as páginas da web criou os
sistemas gerenciadores de conteúdo, ou
CMS (Content Management System).
– O CMS nada mais é do que um sistema que
permite administrar o conteúdo dentro do Banco
de Dados.
– O CMS permite adicionar novo conteúdo,
modificar e excluir conteúdo já adicionado.

27. ATIVIDADE
• Vamos publicar aquela notícia em um CMS.
• Acessem:
http://lammel.org/bixos

28. FINAL DA AULA
• Os bancos de dados trouxeram várias
possibilidades para o jornalismo digital.
• Por isso, é aí que começa uma nova fase do
jornalismo digital: a 4ª geração.
• A esta 4ª geração, damos o nome de
“Jornalismo Digital em Base de Dados” (JDBD).
• Vamos ver isso na próxima aula!