O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.
construir hipertextos
Leonardo Foletto|
Narrativas Hipertextuais, PUCRS 2016
Como se constrói hipertextos/hipermídias? História: Babbage e Ada Lovelace.
Lógica de programação. Algoritmos. Linguagens ...
programar?
Charles Babbage (1791 - 1871) e a máquina analítica. Ada Lovelace (1815-1872).
Origem: ter mais eficiência/dive...
Algoritmo!
Sequências de instruções lógicas para uma máquina “Receita de bolo”.
Mais em: http://www.slate.
com/articles/technology/cover_story/2016/01/how_facebook_s_news_feed_algorithm_works.html
Linguagens computador
Baixo nível ---------------------médio nível-------------------------------> alto nível
Máquina ----...
Linguagens computador: backend
Baixo nível ---------------------médio nível-------------------------------> alto nível
Máq...
Linguagens web: “frontend”
C, C++ -----------------Java, SQL, PHP, javascript --------------------HTML/CSS
HTML/HTML5: Lin...
Mais sobre programar um site
Code Acadamy - https://www.codecademy.com/pt
Rodada Hacker - http://rodadahacker.org/
Scratch...
Exercício 1: esmiuçar uma narrativa hipertextual
jornalística
1.Quem e onde?
Quem fez a narrativa hipertextual? Veículo on...
Exemplo 1: “Moendo Gente”
http://moendogente.org.br/
Exemplo 2: “Snowfall”
http://www.nytimes.com/projects/2012/snow-fall/?forceredirect=yes#/?part=tunnel-
creek
Exemplo 3: As quatro estações de Iracema e Dirceu
http://www.clicrbs.com.br/sites/swf/DC_quatro_estacoes_iracema_dirceu/me...
gracias!
http://leofoletto.info
leofoletto@gmail.com - @leofoletto
http://baixacultura.org
info@baixacultura.org - @baixac...
construir hipertextos (programar)
construir hipertextos (programar)
construir hipertextos (programar)
construir hipertextos (programar)
construir hipertextos (programar)
construir hipertextos (programar)
construir hipertextos (programar)
construir hipertextos (programar)
Próximos SlideShares
Carregando em…5
×

de

construir hipertextos (programar) Slide 1 construir hipertextos (programar) Slide 2 construir hipertextos (programar) Slide 3 construir hipertextos (programar) Slide 4 construir hipertextos (programar) Slide 5 construir hipertextos (programar) Slide 6 construir hipertextos (programar) Slide 7 construir hipertextos (programar) Slide 8 construir hipertextos (programar) Slide 9 construir hipertextos (programar) Slide 10 construir hipertextos (programar) Slide 11 construir hipertextos (programar) Slide 12 construir hipertextos (programar) Slide 13 construir hipertextos (programar) Slide 14 construir hipertextos (programar) Slide 15 construir hipertextos (programar) Slide 16 construir hipertextos (programar) Slide 17 construir hipertextos (programar) Slide 18 construir hipertextos (programar) Slide 19 construir hipertextos (programar) Slide 20 construir hipertextos (programar) Slide 21 construir hipertextos (programar) Slide 22
Próximos SlideShares
Privacidade & antivigilância
Avançar
Transfira para ler offline e ver em ecrã inteiro.

0 gostaram

Compartilhar

Baixar para ler offline

construir hipertextos (programar)

Baixar para ler offline

Material de apoio a aula de Narrativas Hipertextuais, na especialização em Jornalismo Digital (PUCRS, 2016)

Audiolivros relacionados

Gratuito durante 30 dias do Scribd

Ver tudo
  • Seja a primeira pessoa a gostar disto

construir hipertextos (programar)

  1. 1. construir hipertextos Leonardo Foletto| Narrativas Hipertextuais, PUCRS 2016
  2. 2. Como se constrói hipertextos/hipermídias? História: Babbage e Ada Lovelace. Lógica de programação. Algoritmos. Linguagens de programação: backend, frontend (linguagens de marcação e de estilo). Sistemas de gerenciamento de conteúdo. Exercício 1.
  3. 3. programar? Charles Babbage (1791 - 1871) e a máquina analítica. Ada Lovelace (1815-1872). Origem: ter mais eficiência/diversidade. XVII: Necessidade das máquinas de tecer produzissem padrões de cores diferentes. Foi criada uma forma de representar os padrões em cartões de papel perfurado, que eram tratados manualmente. Ada inventou os conceitos de subrotina, uma seqüência de instruções que pode ser usada várias vezes; de loop, uma instrução que permite a repetição de uma sequência de instruções, e do salto condicional, instrução que permite saltar para algum trecho do programa caso uma condição seja satisfeita. Ada Lovelace, Draw My Life: https://www.youtube.com/watch?v=FQ7FcNWBc20 Mais em: https://pt.wikipedia.org/wiki/Computador
  4. 4. Algoritmo! Sequências de instruções lógicas para uma máquina “Receita de bolo”.
  5. 5. Mais em: http://www.slate. com/articles/technology/cover_story/2016/01/how_facebook_s_news_feed_algorithm_works.html
  6. 6. Linguagens computador Baixo nível ---------------------médio nível-------------------------------> alto nível Máquina --------------------------------------------------------------------> “ homem” Assembly, Cobol ----------------C, C++ -------------------Java, SQL, PHP, javascript Baixo nível: simples tradução de comandos. Assembly (anos 1950): simbolos são uma representação direta do código de máquina, 1 pra 1. Instrução-máquina: IA-21 (10110000 01100001). Linguagem: MOV AL, 61.
  7. 7. Linguagens computador: backend Baixo nível ---------------------médio nível-------------------------------> alto nível Máquina --------------------------------------------------------------------> “ homem” Assembly, Cobol ----------------C, C++ -------------------Java, SQL, PHP, javascript Alto nível: não-executável diretamente pela máquina, mas “interpretada” por ela. SQL, MySQL: comunicação com banco de dados. PHP: linguagem de “scripts” (executar tarefas rotineiras, interpretados no servidor). Usada no Facebook, wordpress e outros várias (90% dos sites) Javascript: Interpretada no “cliente”. Muito usada para formulários.
  8. 8. Linguagens web: “frontend” C, C++ -----------------Java, SQL, PHP, javascript --------------------HTML/CSS HTML/HTML5: Linguagem de “marcação” de hipertexto, não programação. WWW, Tim Berners-Lee. CSS: linguagem de narcação, “folha de estilo” (design). Em vez de colocar a formatação dentro do documento, o desenvolvedor cria um link (ligação) para uma página que contém os estilos, procedendo de forma idêntica para todas as páginas de um portal. Quando quiser alterar a aparência do portal basta portanto modificar apenas um arquivo. Mais em: https://pt.wikipedia.org/wiki/HTML, https://pt.wikipedia.org/wiki/Cascading_Style_Sheets
  9. 9. Mais sobre programar um site Code Acadamy - https://www.codecademy.com/pt Rodada Hacker - http://rodadahacker.org/ Scratch - https://scratch.mit.edu/ Coursera - https://www.coursera.org/ Wordpress: http://www.jornalismodigital.org/2011/03/16/como-fazer-um-site- wordpress-passo-a-passo-for-dummies/ Outras dicas: http://super.abril.com.br/blogs/superlistas/9-ferramentas-gratuitas- para-voce-aprender-a-programar/? utm_source=redesabril_jovem&utm_medium=facebook&utm_campaign=redesabri l_super
  10. 10. Exercício 1: esmiuçar uma narrativa hipertextual jornalística 1.Quem e onde? Quem fez a narrativa hipertextual? Veículo onde saiu? Endereço do site? Quem registrou, por onde e qual o servidor? 2.Como foi feito? CMS? Qual? Linguagens principais (frontend). Qual a pauta? Principais fontes? Locais (cenários)? Em quanto tempo? Quais as “pessoas” narrativas? 3. Circulou onde? Como e quando foi divulgada? 1º divulgação? Quais redes sociais? Ganhou prêmios? Licenças de compartilhamento (copyright, creative commons ou outras?).
  11. 11. Exemplo 1: “Moendo Gente” http://moendogente.org.br/
  12. 12. Exemplo 2: “Snowfall” http://www.nytimes.com/projects/2012/snow-fall/?forceredirect=yes#/?part=tunnel- creek
  13. 13. Exemplo 3: As quatro estações de Iracema e Dirceu http://www.clicrbs.com.br/sites/swf/DC_quatro_estacoes_iracema_dirceu/menu.html
  14. 14. gracias! http://leofoletto.info leofoletto@gmail.com - @leofoletto http://baixacultura.org info@baixacultura.org - @baixacultura

Material de apoio a aula de Narrativas Hipertextuais, na especialização em Jornalismo Digital (PUCRS, 2016)

Vistos

Vistos totais

1.242

No Slideshare

0

De incorporações

0

Número de incorporações

845

Ações

Baixados

2

Compartilhados

0

Comentários

0

Curtir

0

×