O documento descreve a história da programação, desde Charles Babbage e Ada Lovelace até algoritmos e linguagens de programação. Explica como construir sites usando backend com linguagens como PHP e frontend com HTML, CSS e JavaScript, gerenciados por sistemas como WordPress.

1. construir hipermídias &
programar
Leonardo Foletto
Narrativas Hipertextuais, UCS 2016
http://leofoletto.info

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. 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”.
https://www.youtube.com/watch?v=U3CGMyjzlvM

6. https://pt.wikipedia.org/wiki/PageRank

7. O algoritmo mudou para priorizar família e amigos (NY Times): http://nyti.ms/29UFHP6

8. Facebook’s Algorithm is Like the Mafia: https://www.youtube.com/watch?v=FhbEUKHsGi4&feature=youtu.be

9. AQUI VAI UMA PAUSA BREVE

11. Como construir uma casa?
1) Endereço & terreno: capinado e aplainado.
2) Arquiteto: projetar a casa
3) Pedreiro: vai construir as bases
4) Pintor: acabamentos finais

12. 1. Endereço e terreno: URL e servidor
_ URL ("Uniform Resource Locator”). Endereço de rede no qual se encontra
algum recurso informático: um arquivo de computador ou um dispositivo periférico
(impressora, equipamento multifuncional, etc):
Nas redes TCP/IP ------- esquema://domínio/caminho/recurso
O QUE É UM SERVIDOR WEB?
UM SOFTWARE, rodado num computador, que recebe requisições de diversos
clientes e serve conteúdo para estes.

13. https://www.youtube.com/user/DataCenterVideos

14. 2. Arquitetura (da informação)

15. 3. Pedreiro (programador)
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.

16. LINGUAGENS DE PROGRAMAÇÃO: 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.

17. 4. pintor (webdesign)
C, C++ -----------------Java, SQL, PHP, javascript --------------------HTML/CSS
HTML: Linguagem de “marcação” de hipertexto, não programação. Define
conteúdo e estrutura. WWW, Tim Berners-Lee. HTML bem escrito significa:
Acessibilidade (Screen Readers); Portabilidade; Fácil manutenção (Fácil de
entender e alterar); Menor latência (cache de arquivos css e js)
Mais em: https://pt.wikipedia.org/wiki/HTML

18. Linguagens web: “frontend”
C, C++ -----------------Java, SQL, PHP, javascript --------------------HTML/CSS
CSS: linguagem de marcaçã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/Cascading_Style_Sheets

19. Resumindo:
BACKEND É A BASE; FRONTEND É A INTERFACE.
HTML é a Estrutura; CSS é a Aparência;
JAVASCRIPT é o Comportamento.

20. Mas há os CMS!
Sistema de Gerenciamento de Conteúdo (em inglês CMS) facilitam o trabalho;
são como equipes com pedreiros e pintores contratados em que você só escolhe
qual o endereço e o estilo da pintura da casa (template). Você ganha em
praticidade, mas perde em autonomia.
Wordpress, Joomla, Drupal, Blogspot (todos os serviços de blogs), WIX…
(recomendo wordpress - http://www.jornalismodigital.org/2011/03/16/como-fazer-
um-site-wordpress-passo-a-passo-for-dummies/)

21. EXEMPLOS?

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

28. Exercício 1: esmiuçar a base “técnica” de um site de
algum projeto de comunicação
1.Quem e onde?
Quem fez o site? Endereço do site? Quem registrou, por onde e qual o servidor?
2.Como foi feito?
CMS? Qual? Linguagens principais (frontend). Licenças de compartilhamento
(copyright, creative commons ou outras?).
Porque estas linguagens? Falar com quem fez (entrevistar) e perguntar das
opções escolhidas.

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

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

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

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