Tela Cidadã

#1 CISTI Euro Trip

San Isidro, Madrid

Ainda em 2016, durante o planejamento que estávamos fazendo na equipe de Projetos e Inovação do NCD, decidimos tentar participar da Conferência Ibérica de Sistemas e Informação que seria este ano, Junho, em Lisboa.

Aí pensamos: mas o NCD já tentou participar, tendo artigo aprovado e ninguém conseguiu apresentar por falta de grana para bancar a viagem, cujos custos fogem do orçamento de qualquer estudante da Ufes que recebe bolsa (de seus incríveis 400 ou 500 reais). Mas escolhemos arriscar!

Foram três artigos submetidos, sendo dois deles aprovados: um sobre gamification nos cursos do NCD para inclusão de idosos e outro sobre o nosso trabalho com transparência pública no Tela Cidadã (telacidada.ufes.br). Isso já era Março de 2017, tínhamos dois meses para fazer alguns das autoras irem ao CISTI! E aí começam os problemas…

Primeiro: ninguém de nós já havia saído do país, nem tinha dinheiro pra bancar uma viagem dessas com gastos em euros (olha o Golpe!) e passagens com preços exorbitantes. Mas não desistimos, eu e Marinês combinamos de dar um jeito e fazer acontecer!

Divulgação do nosso crowdfounding

Fizemos rifa, vendemos docinhos, comida na Igreja. Fizemos uma vaquinha online onde, incrivelmente e contra minhas expectativas, conseguimos arrecadar uma boa grana (cerca de 1000 reais pra cada). Peguei mochila, roupa e tudo mais emprestado. No fim, estou viajando com um pedacinho de cada um/a e agradeço pela ajuda de todo mundo, coletividade!

E, no fim das contas, me dei conta de que nós, estudantes, extensionistas, bolsistas de uma universidade pública, não podemos contar com a instituição e tampouco com seus representantes imediatos, mas já com nossas amigas/os e familiares nós podemos!

Foi assim que chegamos aqui! Marinês encarou sua primeira viagem de avião já indo pra fora num vôo de 10h. Viemos pra um país onde não somos tão bem entendidos, pela bizarra barreira de língua entre português e espanhol, e onde conhecemos nada: mas estamos aqui, vivos, são e salvos. Curtindo cada cardápio incompreensível e cada lugar novo, cada perspectiva diferente; e em breve estaremos de volta, levando tudo isso pra nossa terrinha!

Intervenção Cultural multicoletiva em Plaza del Sol, Madrid

 

SENID 2016

Em Abril desse ano tive a oportunidade de participar de um dos mais importantes eventos de Inclusão Digital do Brasil: o 4º Seminário Nacional de Inclusão Digital (SENID). Por lá, tive a felicidade de conhecer professores/as, pesquisadores/as, entusiastas e ativistas que lutam pela inclusão sociodigital nesse Brasil(zão).

Para começar, o evento é realizado no sul do país, na cidade de Passo Fundo (RS), mais especificamente na UPF, que a propósito é linda demais. Só consegui ir porque tivemos uma oficina aprovada e porque a Ufes me ajudou financeiramente nessa empreitada. Posso dizer que esse evento foi um dos grandes divisores de águas dos últimos tempos, academicamente e pessoalmente falando.

13346128_1107226062669474_175696935244221458_o

Fonte: Facebook da UPF

Por lá, houveram Relatos de Experiência sobre projetos de extensão, iniciações científicas, trabalhos de conclusão de curso e teses de mestrado e doutorado que envolvem práticas relacionadas à inclusão sociodigital de indivíduos com necessidades especiais, adultos, crianças, jovens e idosos. Além de Mesas de Debate, Oficinas e apresentação de artigos. Ou seja, o evento tratou e discutiu a inclusão sociodigital em todos os seus âmbitos e públicos possíveis.

Pude conhecer a professora Bonilla (UFBA) e os professores Adriano Teixeira (UPF) e Nelson Pretto (UFBA), que são referências em inclusão digital no Brasil! Debater, conversar e aprender com eles/as foi essencial para reestruturar a visão de implantação prática de uma real inclusão sociodigital, que de fato seja producente e que alcance a população.

Foi muito interessante perceber o quanto a cidade de Passo Fundo investe(iu) em inclusão, criando projetos voltados à educação básica e média do ensino público. Nessa cidade, existem os projetos Escola de Hackers e Berçário de Hackers, ambos mantidos pela UPF no projeto Mutirão pela Inclusão Digital, que ensinam programação aos e às estudantes através das ferramentas Scratch e ScratchJr. Enquanto isso, Vitória

IMG_20160418_081419892
Me chamou muito à atenção quando da participação do Ângelo, criador do portal Ecolabore, e da Daniela, estudante de graduação em Comunicação Social na Universidade Estadual do Rio de Janeiro (UERJ), servidora pública na Universidade Federal do Rio de Janeiro (UFRJ) e co-criadora do DOSVox. Ambos possuem deficiência visual avançada, apresentaram oficinas e relatos de experiência e ainda foram ao evento sozinhos. Participar de seus relatos enalteceu a visão de que a tecnologia tem que melhorar muito para ser realmente acessível e que não se podem desempenhar projetos e eventos de inclusão sem lembrar das especificidades de cada pessoa.


A Oficina Tela Cidadã: disseminando conceitos políticos, motivo pelo qual fomos parar lá no Sul, foi um sucesso. Fizemos uma campanha de marketing bem estruturada, divulgando o material sobre o projeto através de flyers, CDs, cartões profissionais, banner e slides. Isso tudo tornou possível a participação de mais pessoas na oficina e a promoção do nome e objetivo do Tela. Participaram da oficina, servidores públicos e professores da região e desenvolvedores. Essa pluralidade de opiniões enriqueceu ainda mais o debate sobre cidadania e transparência pública protagonizado por mim e pela estudante Úrsula, técnica de desenvolvimento do Tela Cidadã.

Fique à vontade para consultar o material da Oficina:

No mais, só posso dizer que ano que vem o NCD estará lá novamente! 😉

 

HTML sem medo

HTML é uma linguagem de marcação de hipertexto (HyperText Markup Language) criada por Tim Berners-Lee na década de 80, Tim é professor do MIT e também criou a World Wide Web (WWW – Rede Mundial de Computadores). Mas somente em 1997 o grupo de trabalho do W3C trabalhou na versão 3.2 transformando o HTML numa prática comum. O HTML ganhou várias versões, tais como HTML+, HTML 2.0, HTML 3.0 e a mais atual, HTML 5.

Mas serve pra quê?

HTML é utilizada para produzir páginas na Web. Os arquivos HTML são interpretados pelos navegadores (Firefox, Chrome e etc) e então conseguimos ver a representação gráfica das páginas nas telas de nossos computadores e telefones móveis.

HMTL não é uma linguagem de programação, e sim de marcação. O que significa que através dela não é possível usar a lógica humana para resolver problemas, por exemplo condições como “se é maior que 10 faça isso”. No entanto, utiliza-se o HTML para demarcar as informações do código através de TAGs para que assim o navegador entenda cada parte corretamente.

Por onde começar?

Tags são estruturas que sinalizam o início e o fim das informações através de um padrão de rótulos, como o exemplo da tag <p> que é utilizada para designar um parágrafo:

<p>Isso é um parágrafo.</p>

A estrutura abaixo é a mínima necessária para que uma página Web seja exibida corretamente:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
 
<html>
<head>
</head>
 
<body>
<h1>Isso é um título</h1>
<p>Isso é um parágrafo.</p>
</body>
</html>

A primeira coisa que deve haver no seu código HTML é a declaração <!DOCTYPE>, que é uma instrução ao navegador sobre qual é a versão do código HTML escrito. No caso, estamos dizendo que usamos a versão HTML 4.01 Strict no nosso código, o que significa que tags antigas,  como <font>, não funcionaram.

A tag <html> define que tudo dentro dela se trata de um código HTML. Interno à ela, temos a tag <head> que define a parte inteligente da página, onde são carregados metadados, scripts e páginas de estilo, como CSS e Javascript. E também temos a tag <body> que define todo o corpo de texto que será mostrado na tela.

Para testar, crie em seu computador um arquivo com extensão .html (e.g. “arquivo.html”), cole o nosso trecho de código dentro dele e clique duas vezes para que seja aberto com o seu navegador. O resultado deve ser próximo desse:

17.png
Mas ué, porque o texto ficou estranho? Resumindo a missa: usamos um padrão que não aceita os caracteres com acentos e cedilha. O que nos mostra que precisamos melhorar nosso trecho de código.

Dá para melhorar?

Sempre dá! É essencial que apareça o título da página na aba do navegador, o que não acontece com o nosso código, que mostra o endereço do arquivo no computador. Para mudar, basta adicionar, dentro da <head>, uma tag chamada <title>.

<title>Título da página</title>

Para consertar o problema com os acentos e cedilhas, basta adicionar, dentro da <head> a tag <meta> definindo o seu atributo charset como UTF-8, que nada mais é do que um padrão de escrita.

<meta charset=”UTF-8″>

Então, depois dessas duas inclusões, o código da <head> ficaria assim:

<head>
<title>Título da página</title>
<meta charset=”UTF-8″>
</head>

Vamos agora adicionar um rodapé à página, usando a tag <footer> escrevemos o que queremos que apareça no fim da página.

 <footer>
 Todos os direitos &copy;livres.
 </footer>

Com isso, temos o nosso código HTML dessa forma e com o resultado abaixo:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
 
<html lang=”pt-br”>
   <head>
   <title>Título da página</title>
   <meta charset=”UTF-8″>
   </head>
 
   <body>
   <h1>Isso é um título</h1>
   <p>Isso é um parágrafo.</p>
 
   <footer>
            Todos os direitos &copy;livres.
    </footer>
   </body>
</html>

41.png

Posso estudar as páginas que acesso?

Podemos aprender com as páginas que acessamos cotidianamente, lendo os seus códigos e conhecendo como funcionam. Agora que conhecemos o básico sobre HTML, podemos entender um pouco das páginas que acessamos e isso pode ser feito de duas formas:

Na página desejada, pressione as teclas Ctrl e S ao mesmo tempo (Ctrl+S) e escolha o local de destino no seu computador. O navegador irá salvar na pasta escolhida uma cópia dos códigos HTML e demais arquivos utilizados na exibição e programação daquela página Web.

Na página do Tela Cidadã, por exemplo, clique na tecla F12. Será aberta uma ferramenta de análise de páginas Web dos navegadores. Com ela é possível abrir e modificar praticamente todos os arquivos usados na exibição das páginas, simular como seria a visualização da página num aparelho móvel e até visualizar a página em modo 3D.

16.png

 

Dicas

Recomendamos, para continuar seus estudos sobre HTML e Web Designer, que faça cursos online gratuitos e que leia o conteúdo de sites da Web, tais como W3Schools, Codecademy e Prime Cursos.

 

Esse texto é de minha autoria e foi publicado originalmente no site do Núcleo de Cidadania Digital, do qual sou membro. Para ver o texto no site do NCD, clique aqui.