O documento discute como construir hipertextos e hipermídias, desde a história de Charles Babbage, Ada Lovelace e a máquina analítica, até linguagens de programação e sistemas de gerenciamento de conteúdo. Apresenta também exemplos de narrativas hipertextuais jornalísticas e exercícios para analisar esse tipo de conteúdo.

1. construir hipertextos
Leonardo Foletto|
Narrativas Hipertextuais, PUCRS 2016

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.

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

5. Algoritmo!
Sequências de instruções lógicas para uma máquina “Receita de bolo”.

7. Mais em: http://www.slate.
com/articles/technology/cover_story/2016/01/how_facebook_s_news_feed_algorithm_works.html

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

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

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

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

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

19. Exemplo 1: “Moendo Gente”
http://moendogente.org.br/

20. Exemplo 2: “Snowfall”
http://www.nytimes.com/projects/2012/snow-fall/?forceredirect=yes#/?part=tunnel-
creek

21. Exemplo 3: As quatro estações de Iracema e Dirceu
http://www.clicrbs.com.br/sites/swf/DC_quatro_estacoes_iracema_dirceu/menu.html

22. gracias!
http://leofoletto.info
leofoletto@gmail.com - @leofoletto
http://baixacultura.org
info@baixacultura.org - @baixacultura