Banco de dados e CMS

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

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.

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).

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=“...”>)

Ú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>

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.

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

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.

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

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.

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?

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.

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:

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

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!

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

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!

BANCO DE DADOS
• Exemplo de praticidade do banco de dados:
um site jornalístico poderia usar o comando
Selecionar linhas onde EDITORIA = “esportes”
510 Bush envia
tropas ao
Iraque
Cláudia
Maria
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 ... ... ... ...

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”
510 Bush envia
tropas ao
Iraque
Cláudia
Maria
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 ... ... ... ...

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.

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.

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

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!

Banco de dados e CMS

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a Banco de dados e CMS

Semelhante a Banco de dados e CMS (20)

Mais de Iuri Lammel

Mais de Iuri Lammel (18)

Último

Último (20)

Banco de dados e CMS