Vivendo e aprendendo: novembro 2011

terça-feira, 8 de novembro de 2011

Geradores de tabelas on-line

Outro modo, mais fácil, de construir tabelas para postagens do blog é usar os geradores de tabelas HTML on-line que existem. Vou indicar alguns serviços desse tipo, que têm interfaces -- como acima, do primeiro deles -- para que coloquemos os dados, antes de pedirmos para que o código seja gerado:

Depois que geramos o códigos, devemos copiá-o e colá-lo na área de edição HTML da postagem.

segunda-feira, 7 de novembro de 2011

Ferramentas digitais úteis para educadores e blogs

O site (wiki) Cool Tools for Schools (algo como Ferramentas Legais para Escolas) tem uma proposta interessante: agrupa e descreve uma série de recursos digitais que podem ter uso na educação (sites para apresentações, vídeos, escrita, desenho, imagem, etc.). É bastante variado e amplo; embora eu tenha criado para o blog uma página parecida com recursos (aqui), o Cool Tools é provavelmente mais completo.

Com o tempo, buscarei apresentar aqui algumas das ferramentas com suas possibilidades de uso para blogs educativos.

Gerador de efeito de reflexo

O site Reflection Maker oferece a possibilidade de inserir um reflexo numa imagem. Infelizmente, caso a imagem tenha transparência, essa característica será perdida, já que os arquivos são gerados no formato JPG.

Porém, o gerador é bastante simples e prático: a imagem pode já estar on-line ou ser enviada por upload ao serviço, e o site permite ao usuário especificar o tamanho do reflexo.

Biblioteca: Blogs.com

Continuando com a apresentação de material bibliográrico que possa enriquecer o conhecimento de educadores sobre os blogs, o livro (disponível on-line aqui) Blog.com: estudos sobre blogs e comunicação apresenta um panorama de trabalhos sobre essa forma de comunicação. Há trabalhos sobre a história dos blogs, a relação deles com o jornalismo e a política, e -- interessante para professores -- uma discussão sobre os blogs e a educação. Neste trabalho, os autores, Helaine Rosa e Octávio Islas, notam que uma das

grandes vantagens do uso de blogs na área docente é que a maioria dos alunos os adota com facilidade, já que vêem neles não só uma ferramenta de trabalho interativa, mas também a oportunidade de criar uma comunidade de interesses, mais do que as próprias equipes de trabalho. (2009, p. 172)

Em suma, é um tema para se refletir e buscar colocar em prática.

Editor HTML on-line

Já falei um pouco sobre edição HTML a partir dos códigos, bem com o uso do programa NVU. Porém, é interessante saber que existem bons programas on-line para a edição HTML. Algo útil para, por exemplo, fazer tabelas de modo gráfico.

Um programa desse tipo é Easy HTML Tag Generator, que é mostrado acima. Você produz o que deseja e, depois, clica no botão HTML (1) ou no botão Save (3) para obter o código que copiará e colará no espaço de postagem do blog.

Indiquei com o número 2, o ícone a partir do qual começamos a construir uma tabela nesse editor.

Incorporar arquivos no blog

O serviço on-line Embedit.in permite que coloquemos arquivos que enviamos a ele num blog. Estes irão aparecer dentro de uma caixa que poderá ser incorporada a um site ou blog (via código). O principal diferencial desse serviço em relação a outros (como o Slideshare, por exemplo) é permitir que enviemos diferentes tipos de arquivo (doc, ppt, xls, entre outros), e também URLs (páginas web), como no exemplo abaixo.

O usuário não precisa criar uma conta, mas pode definir opções quanto às permissões que dará a quem tiver acesso ao documento incorporado (num blog, por exemplo), como mostra a figura abaixo.

Desse modo, é possível definir se a impressão do arquivo e seu download serão permitidos ou se ele terá um caráter público ou não. De fato, esse é um gadget realmente útil.

Metablogs

Um "metablog" nada mais é do que um blog especializado em falar sobre blogs -- aspectos técnicos, de conteúdo, maneiras de aumentar a visibilidade em buscadores, entre outros assuntos. Grande parte deles se especializa em alguma plataforma, como o Blogger ou o Wordpress, e mesmo determinado aspecto da prática de blogar. Quem produz e gosta de blogs, com o tempo, acaba conhecendo vários, que ensinam muitas coisas interessantes, e que podem ajudar a aperfeiçoar o blog de algum usuário.

Naturalmente, existem blogueiros locais e também internacionais que produzem blogs desse tipo. Vou dar, por enquanto, a dica de alguns blogs nacionais, com a indicação de alguma postagem que talvez possa ser útil a algum educador-blogueiro. Segue a lista:

Códigos Blogger - explica como aumentar o tamanho (horizontal) da área de postagem (aqui).
Gerenciando Blog - tem uma postagem (aqui) que explica como integrar o blog ao Facebook
Mundo Blogger - postagem sobre gadgets para estimular a participação dos leitores (aqui).
Dicas Blogger - possui uma postagem (aqui) que ensina como colocar um arquivo flash como banner no blog.
Dicas para Blogs - ensina como criar uma lista com os principais comentaristas das postagens de um blog (aqui).

domingo, 6 de novembro de 2011

Webquest em postagem do blog (no Blogger) - 2

Agora vou explicar os passos para conseguir colocar um elemento para Webquets em postagens do Blogger, como o mostrado no post anteior. Não é algo tão fácil assim, exigindo certo conhecimento de HTML; contudo, não é impossível que alguém -- com cuidado e atenção -- faça o procedimento. Porém, se você prosseguir, o risco é seu. (Se está inseguro, que tal testar num blog de testes? Acho essa uma boa ideia, quando estamos aprendendo ou com menor confiança.)

Testei o método em outro blog, um que utiliza o modelo antigo do Blogger, e também deu certo. Você pode ver o resultado (em termos de exemplo) na postagem anterior.

Os passos são apenas três, mas devem ser feitos com bastante atenção, sobretudo o segundo que envolve mudança no Modelo (Template). Em casos como esse, como o próprio Blogger recomenda, antes da alteração, faça o download (backup) do Modelo existente, pois caso ocorra algum problema, você simplesmente fará o upload do arquivo e restaurará seu blog. (Os problemas comuns são erros de digitação, de fechamento de tag, coisas pequenas como essas provocam, todavia, problemas na interpretação da codificação.)

Vamos aos passos:

1) Em primeiro lugar, você deve fazer o download dos seguintes arquivos (clique com o botão direito do mouse nos links e escolha "Salvar link como..." ou termo similar -- depende do navegador):
tabcontent.css
tabcontent.js

Ainda nessa etapa, você irá colocar esses arquivos num repositório on-line. Recomendo o Drop-box (leia aqui), mas pode ser outro, contanto que seja num repositório e num espaço deste que dê um link público.

2) Agora, você copiará os endereços públicos dos arquivos que foram baixados antes por você nos locais em vermelho respectivos (conforme cada um dos nomes dos arquivos), no código abaixo.

Como você deve notar, há um crédito (merecido) aos dois sites que desenvolveram essa codificação (o Dynamic Drive e o BloggerStop). Porém, isso só é visto no código. E este deve ser, agora, colado na parte HTML de seu Modelo.

Para isso, você deve estar na zona interna do blog e clicar no ícone Modelo (no canto inferior esquerdo da tela). Aproveite e faça agora o Backup do seu modelo (veja o botão no canto superior direito).

Tendo feito o backup, entre em "Editar HMTL" (que é um botão mais ao centro da tela) e, chegando na codificação do Modelo, encontre (use Crtl+F) a tag </head>. Agora cole o código alterado (com os novos endereços) imediatamente antes da marcação (tag) mencionada. Pode deixar espaço (quebra de linha).

3) Nesse passo final, o BloggerStop (aqui) recomendou colocar um gadget HTML (via Layout), porém -- pensando no uso para Webquest é que resolvi testar no espaço da postagem e, realmente, para esse objetivo é uma opção mais interessante.

Sendo asim, crie uma postagem e, no espaço de edição HTML, copie o código abaixo.

<ul id="countrytabs" class="shadetabs">
<li><a href="#" rel="country1" class="selected">Introdução</a></li>
<li><a href="#" rel="country2">Tarefa</a></li>
<li><a href="#" rel="country3">Processo</a></li>
<li><a href="#" rel="country4">Recursos</a></li>
<li><a href="#" rel="country5">Avaliação</a></li>
</ul>

<div id="country1" class="tabcontent">
Introdução aqui<br />
</div>

<div id="country2" class="tabcontent">
Tarefa aqui<br />
</div>

<div id="country3" class="tabcontent">
Processo aqui<br />
</div>

<div id="country4" class="tabcontent">
Recursos aqui<br />
</div>

<div id="country5" class="tabcontent">
Avaliação aqui<br />
</div>
</div>

<script type="text/javascript">

var countries=new ddtabcontent("countrytabs")
countries.setpersist(true)
countries.setselectedClassTarget("link") //"link" or "linkparent"
countries.init()

</script>

Uma vez que você tenha colocado isso na postagem, pode até publicar para ver como fica. Quando abrir de novo, notará algo interessante: nas primeiras linhas do código, após o <a href=, o Blogger colocará um endereço. Deixe assim mesmo.

A linha azul do código, talvez seja necessário mudar, pois nela está a largura de 450px, e esse parâmetro, assim como os outros, pode ser alterado, conforme seu blog e gosto.

Naturalmente, agora você deve editar/escrever a Webquest -- nos campos que começam com o nome em vermelho. As fotos, você poderá fazer o upload para a própria postagem, porém, é mais fácil mudar a posição das mesmas, a partir do código (sobre o códigos HTML, em particular das imagens, leia aqui)

É conveniente explicar que na Webquest da postagem anterior eu separei os textos das imagens usando tabelas HTML -- uma linha e duas colunas (uma para o texto e outra para a imagem), em cada um dos campos. Para saber mais sobre tabelas, leia aqui.

O BloggerStop tem também outros modelos de tabelas como essa, que você poderá ver (aqui) e se quiser usar, basta copiar lá o código e fazer suas adaptações.

Espero que tenha compreendido e aproveite, se ficou com dúvidas, escreva nos comentários. Se fez e deu certo, escreva também, mandando o link da postagem de seu blog com a Webquest.

sábado, 5 de novembro de 2011

Webquest em postagem do blog (no Blogger) - 1

Algumas postagens são bastante complicadas!

Testei uma série de métodos para algo relativamente simples, mas muito útil a um professor: colocar uma Webquest numa postagem. No Blogger essa operação é bem menos fácil do que no Wordpress (pois esta plataforma tem um plugin que faz isso).

Acho que gastei, pelo menos, umas quatro horas malhando códigos, testando e utilizando o primeiro e ainda muito importante expediente de obtenção de saber: a tentativa e erro. Naturalmente, beneficiei-me do conhecimento alheio (que vou creditar depois), mas acho que consegui, como mostra abaixo. Nem tive ânimo para, agora, colocar uma Webquest real, só deixei um exemplo.

Também não vai ser agora que vou explicar exatamente o que fiz. Vou dormir e amanhã detalho o procedimento em outra postagem.

Mas a lição importante é a seguinte: só consegue quem tenta. (Mas há outro ensinamento subsidiário: é preciso um certo conhecimento, no caso, do sempre útil HTML, para conseguir fazer certas coisas. É tolice inventar a roda.)

Introdução (texto):
Aqui vai o texto da introdução...

Explicação da tarefa, aqui ...

Processo, aqui se explica o processo,

Indicação dos recursos, aqui são indicados os recursos

Avaliação, o modo de avaliar a atividade é descrito aqui,

Cores hexadecimais

O sistema de cores hexadecimal é um modo de nomear as cores que podem ser interpretadas pelos navegadores a partir de um conjunto de letras e números. Como a Wikipédia explica (aqui), por esse método mais de 16 milhões de cores podem ser representadas.

Naturalmente, isso é mais fácil do que ter nomes em cada uma dessas cores. Os navegadores entendem (interpretam e mostram corretamente), porém, o grupo de cores abaixo mostradas. (Essa tabela é do site Bloggi.)

Cores com Nomes Atribuídos Oficialmente

Aqua (#00FFFF)	Black (#000000)	Blue (#0000FF)	Fuchsia (#FF00FF)
Green (#008000)	Gray (#808080)	Lime (#00FF00)	Maroon (#800000)
Navy (#000080)	Olive (#808000)	Purple (#800080)	Red (#FF0000)
Silver (#C0C0C0)	Teal (#008080)	White (#FFFFFF)	Yellow (#FFFF00)

Assim, quando o atributo da codificação (para fontes, fundos, linhas, etc.) recebe a especificação "blue", por exemplo, mostrará o mesmo que se o autor da página colocar o número hexadecimal "#0000FF".

No entanto, nem sempre sabemos o nome hexadecimal de uma cor (ou um nome que o navegador compreenda), nesse sentido, sites que possuem tabelas como esse, esse e o próprio Bloggi são úteis.

Além disso, existe a possibilidade de uso de ferramentas digitais que nos mostrem a cor, a partir de determinada escala ou paleta. Coloquei como gadget do blog essa mostrada abaixo.

Para vê-la, neste blog, você deve clicar no ícone ao lado da caixa com número da cor.

Caso deseje colocar esse gadget em seu blog, leia o texto que está aqui, que mostra os códigos para tanto. Na próxima postagem vou relembrar como colocar gadgets (acessórios, funcionalidades) no blog.

Uso de blogs em projetos didáticos

Embora já um pouco antigo (é de 2004), o breve vídeo acima exemplifica bem como um blog pode ser utilizado num projeto didático, num modelo em que o professor é mais um facilitador ou mediador da construção de conhecimentos sobre um assunto, que são sintetizados num blog construído por estudantes.

Naturalmente, esse não é o único modo de integrar um blog a um projeto didático, porém, é bastante válido e interessante.

Templates (Modelos) para o Blogger

Os Templates ou Modelos são simplesmente os padrões gerais de layout do site: largura da postagem, número de colunas, formato do cabeçalho, elementos, bem como aparência, em termos de imagens de fundo ou não, ícones, cores, etc.

Quando se começa a blogar, as opções padrão de um serviço como o Blogger parecerão, provavelmente, suficentes. Porém, com o tempo, alguns querem personalizar ou dar nova aparência ao blog.

Isso é uma operação mais avançado e pode ser válido que um professor que queira testar elementos, tanto de Modelos ou outras inovações, tenha uma blog de testes. Se não, que sempre lembre de fazer o backup do Modelo que usa, antes de fazer qualquer alteração no mesmo. Isto é recomendável, pois se alteração for indesejada, após a verificação e avaliação, ou provocar algum tipo de problema, pode-se restaurar o Modelo original fazendo o upload do mesmo (que tinha sido antes salvado no próprio computador pelo usuário).

De qualquer modo, alguns sites oferecem opções de Templates (Modelos) gratuitos para o Blogger. Segue uma lista abaixo:

É interesse ver sites como esses, nem que seja para ter novas ideias e, porventura, tentar implementá-las no próprio blog. Cabe notar, também, que geralmentes esses sites têm tutoriais explicativos para a aplicação dos modelos que disponibilizam.

Além disso, sobretudo quando são feitos blogs educativos bem específicos, para projetos em particular, pode ser útil ter um layout que remeta ao tema trabalhado. Por exemplo, em postagem posterior mostrarei um blog que trata, de maneira educativa, da doação de sangue. Talvez um Modelo com elementos médicos ou de saúde fosse interessante. Também, em casos como esses, é uma atividade válida fazer com que os alunos pesquisem e escolham um Modelo que seja mais adequado a algum blog que seja realizado em contexto escolar. A escolha democrática e participativa seria um elemento da própria aprendizagem.

sexta-feira, 4 de novembro de 2011

Colocando dados de planilhas no blog

A planilha acima é um exemplo de como é possível integrar um arquivo desse tipo a um blog, com uma característica bastante interessante: a atualização dos dados publicados na postagem, conforme os mesmos são alterados (editados) na planilha pelo seu criador.

O exemplo mostra uma situação em que o professor mostraria os conceitos, mas -- valendo a pena refletir se isso é conveniente ou não -- outros tipos de dados variáveis podem ser colocados em planilhas que sejam continuamente atualizadas. Assim, pode-se apresentar faltas, aspectos do planejamento de um projeto, tarefas a serem executadas em certo tempo pelos alunos, etc.

O caso da apresentação de conceitos é interessante aqui para explicar a possibilidade utilizar fórmulas que gerem o conceito final, usando a planilha do GDocs. Em verdade, é o mesmo princípio do Excell e outros programas de planilhas. A vantagem de utilizar a planilha do GDocs decorre da relativa facilidade com que ela pode ser inserida numa postagem.

Os passos são os seguintes:

1) Criar ou subir (fazer upload) de uma planilha (tela abaixo);

2) Caso a planilha seja criada, digite os dados, eventualmente usando cores para linhas ou colunas. No caso (tela abaixo), está sendo colocada uma fórmula na coluna F (na célula F2). A partir dela, o programa calculará o conceito final, conforme o parâmetro estabelecido pelo usuário. Perceba que, neste exemplo as "avaliações" terão o dobro do valor (na média final) dos trabalhos (por isso são multiplicadas por 2) e a divisão é por 6, em função desses pesos estabelecidos. Se todos os conceitos tivessem o mesmo peso, a avaliação final corresponderia simplesmente a uma soma dos mesmos e (no caso) a uma divisão por 4. Naturalmente, cada professor poderá criar uma fórmula mais coerente com seu trabalho.

3) Não esqueça de salvar a planilha e note que para "exportar" a fórmula para outras células, basta clicar e arrastar o ponto assinalado abaixo para as células que receberão essa fórmula.

4) Uma vez que você queria publicar a planilha para colocar no blog, siga o caminho Arquivo > Publicar na web, como destacado abaixo.

5) Também aqui você terá que permitir o compartilhamento na web ("Publicar na web"), para colocar no blog, a partir da tela de opções que surge (abaixo). Ao final, clique em Salvar.

6) Se deseja que a planilha seja atualizado conforme são feitas atualizações, anote "Republicar automaticamente quando houver alterações", no campo superior da tela abaixo. No caso querer colocar a planilha no blog, você deve, na parte "Estabelecer link para os dados publicados", escolher a opção "HTML a incorporar em uma página". Por fim, copie o código, como assinalado e cole-o no espaço da postagem de seu blog..

Usando o GDocs para colocar uma apresentação no blog

Na postagem anterior, inseriu-se uma apresentação (PowerPoint) a partir do GDocs do Google, o tutorial acima explica como isso pode ser feito.

Wordle em sala de aula e no blog

Sites como Wordle, o WordItOut e o TagCrowd permitem que criemos "nuvens de palavras" (como acima, criada no primeiro serviço). Elas geralmente podem ser editadas, em termos de cor, disposição e inserção/retirada de palavras (comuns -- como "a", "de" etc. --, ou de maneira geral).

A criação é feita a partir da inserção (escrita, upload ou ainda indicação de um endereço web) na ferramenta digital do texto para o qual queremos criar a "nuvem de palavras". O tamanho dessas remete ao número de ocorrências

Muito interessante é quando professores criativos pensam em como utilizar uma ferramenta como essa na sala de aula -- eventualmente fazendo uso também da imagem num blog. Este é o caso dos professores da apresentação abaixo, que dão 52 exemplos e dicas para o uso do Wordle em classe.

Alguns dos exemplos são muito interesssantes e criativos, como:

1.Identificar termos comuns num texto em língua estrangeira;
2. Estudar a linguagem de autor em profundidade (note-se, nessa linha, que o site Domínio Público possui muitas obras de escritores brasileiros em formato digital);
3. Pedir que cada estudante escreva sobre suas expectativas quanto a um curso. Depois, é possível colocar as ideias no Wordle e fazer um pôster ou camisetas com essa imagem;
4. Pedir que os alunos (ao fim de um curso) escrevam sobre o que aprenderam -- pode-se fazer Wordles de todos os textos e compará-los, e também fazer um geral, que subsidie uma discussão de avaliação sobre um curso;
5. Mostrar graficamente resultados de levantamentos de opinião entre alunos (qual a cor preferida; atividade de férias, etc.);
6. Criar uma imagem de cabeçalho ou postagem para um blog;
7. Definir conceitos abstratos a partir de palavras que se associem a ele e integrem uma "nuvem de palavras";
8. Fazer um presente -- como um cartão de Dia das Mães ou dos Pais;
9. Criar uma "nuvem de palavras" a partir de um algum texto e pedir que crianças interpretem (leiam) as palavras, buscando expressar o sentido e tamanho da palavra;
10. Discutir valores éticos e depois fazer uma "nuvem de palavras" com os valores que os estudantes consideram importantes de serem exercidos na sala de aula.

quarta-feira, 2 de novembro de 2011

Alterando a transparência do tocador Goear

Algum tempo copiei um código do tocador Goear para o blog, no entanto, ele não ficou muito bom visualmente, em função da transparência.

Mas é fácil corrigir isso (se o seu caso é o mesmo): simplesmente apague do código o trecho wmode="transparent", como mostrado abaixo.

Depois, estão dois tocadores: com o wmode="transparent" e o outro sem.

Compor um vídeo com trechos de outros

Em outro momento (aqui), já falei de um site, o Splicd, que oferece a possibilidade criar um código para vídeo do YouTube, correspondendo a apenas um trecho do filme.

Mas e para compor um filme com diferentes trechos? É justamente isso que o serviço online Drag On Tape faz, utilizando vídeos do YouTube. É necessário criar uma conta, mas ela é gratuita. Outro ponto também positivo é que é possível gerar um código para colar o vídeo "mixado" num blog ou site.

Você pode ver um exemplo de vídeo criado nesse serviço aqui. Pode ser uma ferramenta útil para educadores. E é uma dica do site Cool Tools for 21st Century Learners.

Inserir legendas nos vídeos do YouTube

É possível inserir legendas em vídeos do YouTube, usando o serviço CaptionTube, que é online e pode ser integrado a uma conta do Google.

Há um tutorial sobre o uso Caption Tube (aqui), um pouco superado (já tem dois anos) -- pois agora é possível colocar legenda em todo vídeo público. Porém ele não deixa de ser útil, uma vez que os princípios de inserção da legenda permanecem os mesmos

Inserir legendas exige um pouco de paciência, no entanto, pode ser um modo do professor tornar mais acessível determinado material aos seus alunos.

Legendas em vídeos do YouTube

O tutorial acima ensina como mostrar legendas ou transcrições em vídeos do YouTube. Abaixo, você pode testar a legenda e tradução automática do YouTube. Não é perfeita, mas pode ajudar a quem desejar traduzir determinado vídeo. Com explicarei na próxima postagem, há programas para inserir legendas (criadas por nós) em vídeos do YouTube.

O vídeo tem que ser iniciado, para que o botão CC apareça.

Tocadores do YouTube com Playlists

O tocador (player) do YouTube acima tem uma característica interessante: ele agrega três vídeos (por acaso, da sequência do programa) que estão neste serviço. É isso que se chama "playlist". Este é um recurso interessante, quando um professor, ou qualquer autor de um blog, quer mostrar mais de um vídeo, usando um mesmo tocador. Essa ação pode deixar a postagem com melhor estética e organização.

De qualquer modo, a feitura de playlist depende de se ter uma conta no YouTube e os vídeos estarem postados neste site. O procedimento não é complicado, e é explicado num passo-a-passo do blog UnderGoogle (aqui).

Gerando o tocador múltiplo (playlist), o autor do blog deve copiar o código do mesmo para o espaço HTML da postagem em que queira inserir o tocador.

Propriedades de links

Podemos usar o NVU, ou outro editor HTML (para a construção de páginas web), para fazermos ações, quando não sabemos como fazer no código.

No caso, gostaria de ensinar em codificação algo útil para links, que o NVU também faz (veja a imagem acima), que é a definição de um modo para o link ser aberto. Isto é, o link, pode ser aberto na janela em que estamos (usa-se o atributo "_top", "_parent" ou "_self") ou em uma nova janela (ou guia, depende do navegador), com o uso de "_blank". Esses atributos são os valores de "target" (alvo) e são colocados na codificação do link, conforme se segue. Teste os links para perceber melhor as diferenças

<a target="_blank" href="http://rromancini.blogspot.com">nova janela/guia</a><br> => nova janela/guia

<a href="http://rromancini.blogspot.com" target="_top">mesma janela/guia</a><br> => mesma janela/guia, abrindo em toda tela,

<a href="http://rromancini.blogspot.com" target="_parent">mesma janela/guia (quadro principal)</a><br> => mesma janela/guia (quadro principal)

<a href="http://rromancini.blogspot.com" target="_self">no quadro atual </a> => na mesma janela, sobre o quadro atual

A principal da diferença está entre "_blank" e os outros tipos de definição, que dependem de características da página (a existência de quadros ou não) para evidenciaram mudança perceptível.

De qualquer modo, o uso de "_blank" é uma estratégia para, quando colocamos links, fazermos com que a janela do blog não seja fechada, e eventualmente "perdida" pelo leitor. Alguns consideram ruim esse atributo, no entanto, acredito que ele possa ajudar muitos leitores que, às vezes, saem de uma página sem querer e depois têm dificuldade em reencontrar o conteúdo.

Aproveitando que estou falando de atributos de link, outra possibilidade é o uso de "title" que funcionará da mesma forma que esse atributo nos casos de textos (leia aqui) e imagens (aqui). (Aliás, coloquei o valor "_blank" em ambos os links.)

Ou seja, quando o mouse fica algum tempo sobre a imagem que possui a marcação com "title", mostrará determinado texto.

Por exemplo: Link

A codificação é a que está abaixo:

<a title="Leia o blog Vivendo e Aprendendo" href="http://rromancini.blogspot.com>Link</a>

Biblioteca: conquiste a rede

Até aqui, temos nos concentrado bastante em aspectos de "como fazer" o blog, naquelas dimensões expostas na "receita da postagem" -- fotos e imagens, textos, vídeos e música/sons (aqui). Porém, é importante ampliar leituras, mais ou menos conceituais, a respeito do universo dos blogs. Isto pode nos levar a melhores reflexões e caminhos para fazer um blog escolar ou educativo.

Nessa perspectiva, vou inserir, de tempos em tempos, algumas postagens com indicações bibliográficas, de livros, artigos e outros textos, sobretudo quando os mesmos estiverem disponíveis na rede. Depois compilarei as referências numa página deste blog, só para elas.

Vou começar esse trabalho com a indicação do pequeno livro, da série "Conquiste a Rede", sobre blogs, de Carmen Foschini e Roberto Romano Taddei. O livro, publicado em 2006 (quando o tema dos blogs estava no auge), não aborda diretamente o uso de blogs em educação, no entanto, tem várias recomendações úteis para quem deseja criar e manter um blog -- por exemplo, sobre o cuidado com a língua, a necessidade de encontrar um estilo, possíveis tipos de postagem que um blog pode ter, etc. O índice do livro está como imagem na abertura desse post, e você pode baixá-lo aqui.

terça-feira, 1 de novembro de 2011

Conversores de texto para voz

Os programas de conversão de texto para voz melhoraram bastante. Embora ainda dê para notar que não é uma voz natural de narração, os resultados de alguns são bastante aceitáveis.

Nesse sentido -- e como estou gripado :( -- resolvi utilizar uma voz digital, para fazer o tutorial sobre tabelas no NVU (aqui). Utilizei, nesse caso, a voz de "Gabriela" do Loquendo, que é um programa pago, mas que possui uma versão simplificada de demostração para os usuários testarem (aqui). Nela, escolha uma voz em português do Brasil e coloque o texto na caixa. Depois, quando clicar no botão "play", poderá fazer o download do arquivo sonoro, no formato "wav".

Por padrão, no Loquendo, o som desse teste vem com um fundo sonoro. Mas há um truque para eliminar esse áudio musical: coloque na primeira linha uma série de vírgulas.

Na versão de teste, o Loquendo tem limite de palavras, o que torna o uso menos fácil; porém, o resultado é interessante.

Fiz alguns testes com outros conversores online, mas se estes não possuem vozes em português -- em particular o brasileiro --, o resultado deixa a desejar. É o caso da conversação de texto para áudio do Zamzar -- fica um som praticamente incompreensível, interpretado numa voz em inglês. O Vozme, por outro lado, faz a conversão num português um tanto espanholado e metálico, embora tenha a qualidade de gerar um arquivo mp3 do texto.

Resultado bom é o das vozes em português do Texto to Speech. É uma pena, porém, que esse serviço não gere um arquivo para download. Uma solução é abrir um programa de gravação, como o Audacity, e capturar o áudio a partir dele.

Se você conhece outros programas bons que façam esse serviço de conversão de texto para som, escreva nos comentários.

Gerar vídeo com movimentação da tela para colocar no blog

No tutorial da postagem posterior, utilizei um pequeno e gratuito programa chamado CamStudio para fazer a gravação da tela, com as ações no NVU. (Depois fiz algumas edições no MovieMaker para inserir som, fazer alguns cortes, etc.)

De qualquer modo, programas como o CamStudio podem ser bastante úteis para produzir tutoriais a partir de imagens do computador. Uma descrição com algumas características desse programa pode ser vista aqui. Há também tutorias em vídeo, no YouTube, explicando mais o uso do programa.

Um programa similar, e que roda também em Linux, é o Wink, que produz, entretanto, filmes no formato flash -- já coloquei filmes desse tipo no blog, e nesta postagem aqui ensino como isso é feito.

No casos de filmes comuns, estes podem ser colocados no YouTube e depois no blog (via código) ou então serem inseridos (upload) diretamente no espaço da postagem.

Tabelas com NVU no blog

O vídeo acima procura ensinar como criar uma tabela, usando o software gratuito NVU e depois colocar a mesma numa postagem no blog.

É a tabela abaixo. Porém, acabei fazendo outras edições na tabela, no próprio blog. Nesse sentido, aquilo que vimos nas postagens anteriores sobre a feitura de tabelas com o código ajudou.

Não precisamos ser especialistas em formatação HTML, mas se entendemos um pouco, podemos fazer alterações com rapidez. E, por vezes, entender por que algo não é mostrado direito.

Cronograma de produção do Jornal Mural
Dia da Semana	Tarefa	Responsáveis
2a feira	Reunião pauta	Equipe toda
4a feira	Produção e Edição	Equipe toda
6a feira	Publicação	André e Mônica

O tutorial do vídeo foi colocado diretamente no blog (upload) e, sobre esse trabalho, falarei nas próximas postagens.

Tabelas em postagens com HTML - parte 3 de 3

Para concluir essa série de postagens sobre a construção de tabelas, vamos falar sobre os atributos colspan e rownspan. O primeiro faz a "mesclagem" de células na horizontal (linhas) e o segundo, na vertical (colunas). O número de células que são unidas é o valor do atributo.

Vamos ver, primeiro um exemplo do colspan e depois de rowspan.

<table border="1" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td colspan="2">Exemplo do uso do colspan</td>
</tr>
<tr>
<td>célula 1</td>
<td>célula 2</td>
</tr>
</tbody>
</table>

Exemplo do uso do colspan
célula 1	célula 2

<table border="1" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td rowspan="2">Exemplo do uso do colspan</td>
<td>célula 1</td>
</tr>
<tr>
<td>célula 2</td>
</tr>
</tbody>
</table>

Exemplo do uso do colspan	célula 1
	célula 2

Embora a lógica não chegue a ser difícil, é fato que fazer tabelas no HTML "puro", sobretudo quando elas começam a ter muitas complexidades (mesclagens, formatações, etc.), pode ser trabalhoso e mesmo confuso.

Por isso, certamente muitas pessoas preferirão utilizar um editor de HTML, que desenhe com mais facilidade e automatização as tabelas. Depois, será apenas copiar o código e colar no espaço da postagm adequado do blog. É isso que vou ensinar a seguir.

Tabelas em postagens com HTML - parte 2 de 3

Já vimos que o atributo "width" indica a largura da tabela ou colunas, o artibuto height, por sua vez, faz isso com as linhas, e deve ser indicado em pixels.

Duas marcações não obrigatórias são <caption> ... </caption>, que define um título para a tabela e <th> ... </th>, que define um cabeçalho para colunas ou linhas, estando dentro de linhas (<tr>...</tr>). Essas marcações não são obrigatórias, pois você pode simplesmente colocar uma formatação no cabeçalho (o efeito da tag <th> ou então escrever algo que sirva como título, sem usar a marcação sugerida (<caption>).

Outros dois pontos interessantes são a possibilidade de definir a borda com "0" de espaço e com uma cor qualquer. No primeiro caso, basta atribuir zero a border, e para o segundo você deve usar o atributo bordercolor e colocar a cor (por exemplo: bordercolor="red").

De qualquer modo, para mostrar o que se ensinou, vamos ver outra estrutura de tabela e exemplo de como mostra o navegador:

<table border="1" bordercolor="blue" cellpadding="0" cellspacing="0" style="height: 200px; width: 600px;"> - Indica a abertura da tabela
<tbody> - Idem
<caption> Exemplo do título de tabela </caption>
    <tr> - Indica abertura de uma linha (do cabeçalho)
<th>cabeçalho 1</th>
<th>cabeçalho 2</th>
    </tr> - Indica fechamento de uma linha (do cabeçalho)
     <td> - Indica abertura de uma coluna (célula 1)
      </td> - Indica fechamento de uma coluna
      <td> - Indica abertura de uma coluna (célula 2)
      </td> - Indica fechamento de uma coluna
    </tr> - Indica fechamento de uma linha
<td> - Indica abertura de uma coluna (célula 1)
      </td> - Indica fechamento de uma coluna
      <td> - Indica abertura de uma coluna (célula 2)
      </td> - Indica fechamento de uma coluna
    </tr> - Indica fechamento de uma linha
</tbody> - Indica o fim da tabela
</table> - Idem

Exemplo do título de tabela
Cabeçalho 1	Cabeçalho 2
célula 1	célula 2
célula 3	célula 4

Se você é observador, deve ter notado que coloquei na tabela outros dois atributos que ainda não comentei: cellpadding e cellspacing, definidos ambos com zero. Cellspacing é o espaço que poderá existir entre células (na tabela acima é zero). E cellpadding é o espaço (definido tanto na vertical quanto na horizontal) que o conteúdo que está numa célula ficará distante das linhas da mesma. No caso, acima, note que está encostado, justamente pelo cellpadding ter ficado em zero.

Você pode observar, ainda, que o cabeçalho está centralizado, diferentemente do conteúdo das outras células. Isto é o padrão com o uso da marcação <th>. Porém, o atributo align permite mudar o alinhamento horizontal do conteúdo (com parâmetros como "left" -- esquerda --, "right" -- direita -- e "center" -- centro). Já o atributo valign define o local na vertical do conteúdo (com valores "top", "middle" e "bottom" -- respectivamente, em cima, no meio e na parte de baixo da célula).

Para exemplificar esses atributos, seguem abaixo um código e visualização de tabela:

<table border="1" bordercolor="blue" cellpadding="2" cellspacing="2" style="height: 50px; width: 600px;">
<caption> Exemplo do título de tabela com formatações</caption>
<tbody>
<tr>
<th>Cabeçalho 1</th>
<th>Cabeçalho 2</th>
</tr>
<tr>
<td align="center" valign="middle">célula 1</td>
<td align="left" valign="top">célula 2 </td>
</tr>
<tr>
<td align="right" valign="bottom">célula 3 </td>
<td align="center" valign="middle">célula 4 </td>
</tr>
</tbody>
</table>

Exemplo do título de tabela com formatações
Cabeçalho 1	Cabeçalho 2
célula 1	célula 2
célula 3	célula 4

Antes de finalizar esta postagem, foi ensinar mais um aspecto interessante do uso de tabelas: a possibilidade de escrever dentro de imagens. É algo relativamente simples, a imagem deve estar em algum que será copiado para o campo/atributo background, como se vê abaixo (o endereço da imagem, que deve ser a do usuário está em vermelho).

<table background="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkVE0S_BMPeF6QAM0HK4hIlSFlXqXJceWZNWu248BYbVhjJlr-hMytIZd47FNHkKIZg6oPJhG30-VhTyCcRU1MfBhRNfkA4ApJgOlQg0iIQh8Q9gmUX7hab3GoCupuu-gTKbGW5gXb/s1600/upload_video.jpg" border="1" bordercolor="blue" cellpadding="5" cellspacing="0" style="height: 335px; width: 600px;">
<tbody>
<tr>
<td align="left" valign="center"><span style="font-size: large;">
<b> Estou escrevendo dentro <br>
da imagem</b></span>
</td>
</tr>
</tbody> </table>

Estou escrevendo dentro
da imagem

Repare que, no código e na visualização, coloquei o texto em verde, para chamar a atenção. Inseri também uma quebra de linha (<br>), para ajustar melhor o texto.

Na próxima postagem, falo sobre mais alguns aspectos da formatação de tabelas em HTML.