Download - Construir hipertextos: programar
![Page 1: Construir hipertextos: programar](https://reader030.vdocuments.site/reader030/viewer/2022020410/587b15781a28abb15c8b74e1/html5/thumbnails/1.jpg)
construir hipermídias & programar
Leonardo FolettoNarrativas Hipertextuais, UCS 2016
http://leofoletto.info
![Page 2: Construir hipertextos: programar](https://reader030.vdocuments.site/reader030/viewer/2022020410/587b15781a28abb15c8b74e1/html5/thumbnails/2.jpg)
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.
![Page 3: Construir hipertextos: programar](https://reader030.vdocuments.site/reader030/viewer/2022020410/587b15781a28abb15c8b74e1/html5/thumbnails/3.jpg)
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
![Page 4: Construir hipertextos: programar](https://reader030.vdocuments.site/reader030/viewer/2022020410/587b15781a28abb15c8b74e1/html5/thumbnails/4.jpg)
![Page 5: Construir hipertextos: programar](https://reader030.vdocuments.site/reader030/viewer/2022020410/587b15781a28abb15c8b74e1/html5/thumbnails/5.jpg)
Algoritmo!Sequências de instruções lógicas para uma máquina “Receita de bolo”.
https://www.youtube.com/watch?v=U3CGMyjzlvM
![Page 6: Construir hipertextos: programar](https://reader030.vdocuments.site/reader030/viewer/2022020410/587b15781a28abb15c8b74e1/html5/thumbnails/6.jpg)
https://pt.wikipedia.org/wiki/PageRank
![Page 7: Construir hipertextos: programar](https://reader030.vdocuments.site/reader030/viewer/2022020410/587b15781a28abb15c8b74e1/html5/thumbnails/7.jpg)
O algoritmo mudou para priorizar família e amigos (NY Times): http://nyti.ms/29UFHP6
![Page 8: Construir hipertextos: programar](https://reader030.vdocuments.site/reader030/viewer/2022020410/587b15781a28abb15c8b74e1/html5/thumbnails/8.jpg)
Facebook’s Algorithm is Like the Mafia: https://www.youtube.com/watch?v=FhbEUKHsGi4&feature=youtu.be
![Page 9: Construir hipertextos: programar](https://reader030.vdocuments.site/reader030/viewer/2022020410/587b15781a28abb15c8b74e1/html5/thumbnails/9.jpg)
AQUI VAI UMA PAUSA BREVE
![Page 10: Construir hipertextos: programar](https://reader030.vdocuments.site/reader030/viewer/2022020410/587b15781a28abb15c8b74e1/html5/thumbnails/10.jpg)
![Page 11: Construir hipertextos: programar](https://reader030.vdocuments.site/reader030/viewer/2022020410/587b15781a28abb15c8b74e1/html5/thumbnails/11.jpg)
Como construir uma casa?
1) Endereço & terreno: capinado e aplainado.2) Arquiteto: projetar a casa3) Pedreiro: vai construir as bases4) Pintor: acabamentos finais
![Page 12: Construir hipertextos: programar](https://reader030.vdocuments.site/reader030/viewer/2022020410/587b15781a28abb15c8b74e1/html5/thumbnails/12.jpg)
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.
![Page 13: Construir hipertextos: programar](https://reader030.vdocuments.site/reader030/viewer/2022020410/587b15781a28abb15c8b74e1/html5/thumbnails/13.jpg)
https://www.youtube.com/user/DataCenterVideos
https://www.youtube.com/user/DataCenterVideos
![Page 14: Construir hipertextos: programar](https://reader030.vdocuments.site/reader030/viewer/2022020410/587b15781a28abb15c8b74e1/html5/thumbnails/14.jpg)
2. Arquitetura (da informação)
![Page 15: Construir hipertextos: programar](https://reader030.vdocuments.site/reader030/viewer/2022020410/587b15781a28abb15c8b74e1/html5/thumbnails/15.jpg)
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.
![Page 16: Construir hipertextos: programar](https://reader030.vdocuments.site/reader030/viewer/2022020410/587b15781a28abb15c8b74e1/html5/thumbnails/16.jpg)
LINGUAGENS DE PROGRAMAÇÃO: BACKEND
Baixo 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.
![Page 17: Construir hipertextos: programar](https://reader030.vdocuments.site/reader030/viewer/2022020410/587b15781a28abb15c8b74e1/html5/thumbnails/17.jpg)
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
![Page 18: Construir hipertextos: programar](https://reader030.vdocuments.site/reader030/viewer/2022020410/587b15781a28abb15c8b74e1/html5/thumbnails/18.jpg)
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
![Page 19: Construir hipertextos: programar](https://reader030.vdocuments.site/reader030/viewer/2022020410/587b15781a28abb15c8b74e1/html5/thumbnails/19.jpg)
Resumindo:
BACKEND É A BASE; FRONTEND É A INTERFACE.
HTML é a Estrutura; CSS é a Aparência; JAVASCRIPT é o Comportamento.
![Page 20: Construir hipertextos: programar](https://reader030.vdocuments.site/reader030/viewer/2022020410/587b15781a28abb15c8b74e1/html5/thumbnails/20.jpg)
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/)
![Page 21: Construir hipertextos: programar](https://reader030.vdocuments.site/reader030/viewer/2022020410/587b15781a28abb15c8b74e1/html5/thumbnails/21.jpg)
EXEMPLOS?
![Page 27: Construir hipertextos: programar](https://reader030.vdocuments.site/reader030/viewer/2022020410/587b15781a28abb15c8b74e1/html5/thumbnails/27.jpg)
Mais sobre programar um siteCode Acadamy - https://www.codecademy.com/ptRodada 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=redesabril_super
![Page 28: Construir hipertextos: programar](https://reader030.vdocuments.site/reader030/viewer/2022020410/587b15781a28abb15c8b74e1/html5/thumbnails/28.jpg)
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.
![Page 29: Construir hipertextos: programar](https://reader030.vdocuments.site/reader030/viewer/2022020410/587b15781a28abb15c8b74e1/html5/thumbnails/29.jpg)
Exemplo 2: “Snowfall”
http://www.nytimes.com/projects/2012/snow-fall/?forceredirect=yes#/?part=tunnel-creek
![Page 30: Construir hipertextos: programar](https://reader030.vdocuments.site/reader030/viewer/2022020410/587b15781a28abb15c8b74e1/html5/thumbnails/30.jpg)
Exemplo 1: “Moendo Gente”http://moendogente.org.br/
![Page 31: Construir hipertextos: programar](https://reader030.vdocuments.site/reader030/viewer/2022020410/587b15781a28abb15c8b74e1/html5/thumbnails/31.jpg)
Exemplo 3: As quatro estações de Iracema e Dirceu http://www.clicrbs.com.br/sites/swf/DC_quatro_estacoes_iracema_dirceu/menu.html