Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
AULA 3
BANCO 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...
A World Wide Web (web)
A web funciona graças a três tecnologias:
• HTML: é a linguagem usada para construir as
páginas mul...
O HTML
• É formado por códigos (tags) que servem para
indicar ao navegador como a informação deve
ser apresentada na págin...
ÚLTIMA ATIVIDADE DE AULA
• Vocês construíram uma notícia em uma
página usando HTML. Usaram:
– Para título: <h1> ... ... </...
CSS
• Vimos o que é CSS. Lembram?
• CSS é a tecnologia usada para alterar o visual
das páginas.
• Com o CSS, podemos alter...
Ú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!
•...
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 inte...
ENTÃO...
• Pessoal, se eu quisesse adicionar uma nova
notícia agora, o que eu faria?
– Criaria um novo documento HTML/CSS/...
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 armaze...
BANCO DE DADOS
id TÍTULO AUTOR EDITORIA CONTEÚDO DATA
7880 Bush envia
tropas ao Iraque
Cláudia
Maria
Política O presidente...
BANCO DE DADOS
• Felizmente, ali pelo final dos anos 1990,
surgiram tecnologias para fazerem com que os
bancos de dados di...
BANCO DE DADOS
• Página estática:
Para alterar o conteúdo da página, é preciso fazer o
download do arquivo HTML, abrir o a...
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 d...
BANCO DE DADOS
• Exemplo de praticidade do banco de dados:
um site jornalístico poderia usar o comando
Selecionar linhas o...
BANCO DE DADOS
• Exemplo de praticidade do banco de dados:
um site jornalístico poderia usar o comando
Selecionar linhas o...
BANCO DE DADOS
• Exemplo de praticidade do banco de dados:
um site jornalístico poderia usar o comando
Selecionar linhas o...
BANCO DE DADOS
• Exemplo de praticidade do banco de dados:
um site jornalístico poderia usar o comando
Selecionar linhas o...
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 ...
CMS
• A união do BD com as páginas da web criou os
sistemas gerenciadores de conteúdo, ou
CMS (Content Management System)....
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 ...
Prochain SlideShare
Chargement dans…5
×

Banco de dados e CMS

395 vues

Publié le

Banco de dados e CMS

Publié dans : Formation
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Banco de dados e CMS

  1. 1. AULA 3 BANCO DE DADOS e SISTEMA GERENCIADOR DE CONTEÚDO (CMS)
  2. 2. ANTES: Revisão da aula 2
  3. 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. 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. 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. 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. 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. 8. ÚLTIMA ATIVIDADE DE AULA • Vamos testar as páginas de vocês... AO VIVO! • Acessem: http://lammel.org/aula3/seunome
  9. 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. 10. JAVASCRIPT • Vamos fazer um teste... acesse: http://lammel.org/aula3/iuri
  11. 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. 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. 13. AULA DE HOJE BANCO DE DADOS
  14. 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. 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. 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. 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. 18. BANCO DE DADOS ### PUXAR TÍTULO ### PUXAR AUTOR ### PUXAR TEXTO • Página dinâmica:
  19. 19. BANCO DE DADOS ### PUXAR TÍTULO ### PUXAR AUTOR ### PUXAR TEXTO • Página dinâmica:
  20. 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. 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. 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. 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. 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. 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. 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. 27. ATIVIDADE • Vamos publicar aquela notícia em um CMS. • Acessem: http://lammel.org/bixos
  28. 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!

×