construir hipertextosLeonardo 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 de programação: backend, frontend (linguagens de marcação e de estilo). Sistemas de gerenciamento de conteúdo. Exercício 1.

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

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

Linguagens computador: backendBaixo nível ---------------------médio nível-------------------------------> alto nívelMá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.

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

http://memoriasdaditadura.org.br

http://salapfgastal.blogspot.com.br/

https://medium.com/@MidiaNINJA/

http://www.theguardian.com/music/gallery/2016/jan/11/david-bowies-life-and-career-in-pictures?CMP=share_btn_fb

Mais sobre programar um site

Code Acadamy - https://www.codecademy.com/ptRodada 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=redesabril_super

Exercício 1: esmiuçar uma narrativa hipertextual jornalística1.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?).

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/menu.html

gracias!http://leofoletto.infoleofoletto@gmail.com - @leofoletto

http://baixacultura.orginfo@baixacultura.org - @baixacultura