AULA 3BANCO DE DADOS

e

SISTEMA GERENCIADOR DE CONTEÚDO (CMS)

ANTES:

Revisão da aula 2

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 tagde 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?

AULA DE HOJE

BANCO DE DADOS

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

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

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

### 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”

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

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

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

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

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!