Page 1

Colégio São Luís

Roberta Lourenço Ramos

São Paulo, maio de 2008.


SUMÁRIO

Apresentação 3 Experiência com a criação de um blog 5 Como criar um blog 6 Principais tags 8 Tags HTML mais básicas 9 Alterando cores e tamanho da fonte 11 Marca-texto12 Códigos de cores 13 Inserindo links 14 Linkando uma figura para uma URL 15 Gifs animados 16 Inserindo documentos e planilhas 17 Apresentação PowerPoint em vídeo 19 Apostila on-line 20 Multimídia – Inserindo vídeos e músicas 21 Editando vídeos 22 Inserindo músicas 23 Ferramenta de análise 25 Glossário de termos em geral 26 Fontes de pesquisa 28 Contato 29

2


Apresentação

"A pedagogia, arte e ciência de ensinar, não pode ser reduzida a mera metodologia: ela inclui uma perspectiva do mundo e uma visão de pessoa humana ideal que se pretende formar" (do livro Pedagogia Inaciana, no. 11). Ao planejar o uso de uma ferramenta dentro das dimensões essenciais do Paradigma Pedagógico Inaciano (experiência - reflexão - ação – avaliação), faz-se necessário buscar aquela que venha ao encontro do mundo real do educando para que este, a partir de sua experiência, possa pesquisar e refletir, produzindo algo que seja exposto a toda uma comunidade que irá, juntamente com ele, avaliar essa ação para que haja um crescimento global do mesmo. O blog educativo é uma ferramenta moderna na educação por meio da internet, que fala a “língua” do aluno e permite que este interaja com o professor, com os colegas e com toda a comunidade mundial (Wide World Web), aprendendo e ensinando constantemente. Will Richardson, um dos mais acérrimos defensores dos blogs na educação, diz que "Blogar é escrever o que pensamos quando lemos o que os outros escrevem. Se continuarmos, outras pessoas eventualmente escreverão o que pensam quando nos lêem, e assim entraremos numa nova esfera de relações humanas." (Downes, Stephen. Educational Blogging. EDUCAUSE Review. ) Os blogs educativos são páginas simples, de fácil criação e publicação. Não é necessário nenhum conhecimento em programação para criá-los e atualizá-los. O professor pode acessá-lo diariamente, deixando-o sempre atualizado de acordo com as aulas dadas.

3


Ele permite a abordagem de diversos assuntos, aumentando a interatividade com os visitantes, que passam a constituir uma comunidade. Utilizando uma ferramenta de análise, é possível levantar dados dos visitantes (país, cidade, tempo de visita). Os blogs são diários eletrônicos com potencial para reinventar o trabalho pedagógico.

4


Experiência com a criação de um blog

O

blog

que

criei

para

a

série

do

Colégio

São

Luís

www.auladaroberta.blogspot.com - tem sido de grande valia para complementar minhas aulas de português e redação. Os alunos o acessam para assistir a vídeos, consultar dicionários e gramáticas, ver o gabarito das avaliações (sugestão de uma aluna) e se aprofundar acerca de alguns assuntos. Costumam contribuir com textos, desenhos, sugestões de sites e jogos. Tem sido interessante verificar, através do Google Analytics, que meu blog é visitado por pessoas de dezesseis países diferentes. É surpreendente o alcance dessa ferramenta de ensino. Alguns alunos se entusiasmaram e resolveram criar seus próprios blogs. Dessa forma, estarão desenvolvendo o pensamento e a escrita de uma maneira moderna e acessível a todos. Comecei a desenvolver atividades on-line de gramática para que os alunos pratiquem os assuntos trabalhados em classe. Coloquei o link para essas atividades em meu blog, e os alunos, após realizarem os exercícios, enviam para mim o resultado (em porcentagem de acertos) com comentários, o que me permite acompanhar de perto seu progresso e suas dificuldades. Os pais têm elogiado a iniciativa do blog e o acessam junto com seus filhos, o que aumenta o diálogo professor-família-aluno. Nesta apostila procuro ensinar, passo-a-passo, de maneira simples, como criar um blog e quais ferramentas podem ser utilizadas para uma interação maior e mais eficiente.

5


Como criar um blog

PRIMEIROS PASSOS

1. Servidor Procure um servidor gratuito. Após fazer o cadastro, o próprio site ensina, passo a passo, como fazer as postagens. Sugestões: Blig - http://www.blig.ig.com.br , Blogando.net - http://www.blogando.net e Blogger (br) - http://www.blogger.com.br (é o que eu uso).

2. Filtro É interessante permitir comentários, mas coloque um filtro para que você libere apenas os que considerar aceitáveis. Recebo por e-mail os comentários do blog e só permito que sejam publicados os que não contêm ofensas. Infelizmente, há quem envie comentários ofensivos apenas para prejudicar o trabalho, o que justifica a necessidade do filtro.

6


3. Template Quando escolher o template (a parte gráfica – cores, desenhos), escolha um mais simples, para evitar a poluição visual. Se quiser mudar o template, há vários sites com sugestões de todos os tipos – de desenhos animados a grafismos modernos. Basta copiar todo o código e substituir no servidor – há uma guia com o nome “Editar HTML”. Sites com vários templates para escolher: http://www.sotemplates.com/ http://www.vickys.com.br/ http://casatemplates.com/templates

Exemplo de template

7


PRINCIPAIS TAGS

Tags são rótulos usados para informar ao navegador como deve ser apresentado o website. Todas as tags têm o mesmo formato: começam com um sinal de menor "<" e acabam com um sinal de maior ">". Genericamente falando, existem dois tipos de tags - tags de abertura: <comando> e tags de fechamento: </comando>. A diferença entre elas é que na tag de fechamento existe uma barra "/". Tudo que estiver contido entre uma tag de abertura e uma tag de fechamento será processado segundo o comando contido na tag. Mas, como toda regra tem sua exceção, no HTML, para algumas tags, a abertura e o fechamento se dão na mesma tag. Tais tags contêm comandos que não necessitam de um conteúdo para serem processados, isto é, são tags de comandos isolados, por exemplo, um pulo de linha é conseguido com a tag <br />. Exemplo de tag: A tag <b> informa ao navegador que todo o texto colocado entre <b> e </b> deve ser mostrado em negrito. (O comando "b" é uma abreviação para "bold" negrito.) Exemplo: <b>Este texto deve ser em negrito.</b>

Vai ser apresentado no navegador, como mostrado a seguir: Este texto deve ser em negrito.

8


TAGS HTML MAIS BÁSICAS

CENTRALIZANDO (texto, imagens, qualquer coisa)

<center> </center>

CRIANDO UMA LINHA SIMPLES ABAIXO <hr> Como fica a linha:

ALGUMAS TAGS HTML PARA FONTES COLOCANDO NEGRITO <b>Roberta</b>

Resultado: Roberta

9


COLOCANDO EM ITĂ LICO <i>Roberta</i>

Resultado: Roberta

TEXTO TACHADO (texto riscado)

<strike>Roberta</strike>

Resultado: Roberta

TEXTO SUBLINHADO

<u>Roberta</u>

Resultado: Roberta

10


ALTERANDO CORES E TAMANHO DA FONTE Fonte vermelha, tamanho 4

<font color="#FF0000" size="4"><b>BLOG EDUCATIVO</b></font>

Resultado: BLOG EDUCATIVO

APLICANDO TIPOS, TAMANHOS E CORES Exemplos de tipos de fontes Vamos ver alguns tipos de fontes mais usados (novamente usei a palavra Roberta como exemplo). Aqui vocês vêem os resultados e as tags html utilizadas para produzi-los: Roberta (Arial)

Tag HTML: <font face="Arial">Seu texto</font>

Roberta (Comic Sans MS) Tag HTML: <font face="Comic Sans MS">Seu texto</font> Roberta (Times New Roman) Tag HTML: <font face="Times New Roman">Seu texto</font> Roberta (Verdana) Tag HTML: <font face="Verdana">Seu texto</font>

11


MARCA-TEXTO

Tanto o Word como o FrontPage possuem um recurso que se assemelha ao produzido por canetas marca-texto. Para faz锚-lo, basta usar a tag a seguir. Depois, veja a lista de cores: cada cor tem um c贸digo diferente (Exemplo: #FFF00)

<span style="background-color: #FFFF00">MARCA-TEXTO</span>

Resultado:

MARCA-TEXTO

12


CÓDIGOS DE CORES Os códigos de cores são estes. Use o símbolo # antes do código. 000000 003300 006600 009900 00CC00 00FF00 330000 333300 336600 339900 33CC00 33FF00 660000 663300 666600 669900 66CC00 66FF00 990000 993300 996600 999900 99CC00 99FF00 CC0000 CC3300 CC6600 CC9900 CCCC00 CCFF00 FF0000 FF3300 FF6600 FF9900 FFCC00 FFFF00

000033 003333 006633 009933 00CC33 00FF33 330033 333333 336633 339933 33CC33 33FF33 660033 663333 666633 669933 66CC33 66FF33 990033 993333 996633 999933 99CC33 99FF33 CC0033 CC3333 CC6633 CC9933 CCCC33 CCFF33 FF0033 FF3333 FF6633 FF9933 FFCC33 FFFF33

000066 003366 006666 009966 00CC66 00FF66 330066 333366 336666 339966 33CC66 33FF66 660066 663366 666666 669966 66CC66 66FF66 990066 993366 996666 999966 99CC66 99FF66 CC0066 CC3366 CC6666 CC9966 CCCC66 CCFF66 FF0066 FF3366 FF6666 FF9966 FFCC66 FFFF66

000099 003399 006699 009999 00CC99 00FF99 330099 333399 336699 339999 33CC99 33FF99 660099 663399 666699 669999 66CC99 66FF99 990099 993399 996699 999999 99CC99 99FF99 CC0099 CC3399 CC6699 CC9999 CCCC99 CCFF99 FF0099 FF3399 FF6699 FF9999 FFCC99 FFFF99

0000CC 0033CC 0066CC 0099CC 00CCCC 00FFCC 3300CC 3333CC 3366CC 3399CC 33CCCC 33FFCC 6600CC 6633CC 6666CC 6699CC 66CCCC 66FFCC 9900CC 9933CC 9966CC 9999CC 99CCCC 99FFCC CC00CC CC33CC CC66CC CC99CC CCCCCC CCFFCC FF00CC FF33CC FF66CC FF99CC FFCCCC FFFFCC

0000FF 0033FF 0066FF 0099FF 00CCFF 00FFFF 3300FF 3333FF 3366FF 3399FF 33CCFF 33FFFF 6600FF 6633FF 6666FF 6699FF 66CCFF 66FFFF 9900FF 9933FF 9966FF 9999FF 99CCFF 99FFFF CC00FF CC33FF CC66FF CC99FF CCCCFF CCFFFF FF00FF FF33FF FF66FF FF99FF FFCCFF FFFFFF 13


INSERINDO LINKS

LINKS TIPO TEXTO: MESMA JANELA, NOVA JANELA

Link que abre na mesma janela (tipo texto) Colocamos um link em uma palavra ou frase e, assim, se a pessoa clicar nessa palavra ou frase, será direcionada para o site em questão. A frase, no exemplo abaixo, é “Colégio São Luís”, e coloquei o endereço do site. A pessoa clica e vai para o site do colégio. Basta copiar o exemplo abaixo, mudando o endereço do site e a frase que você quiser. <a href="http://www.saoluis.org">Colégio São Luís</a>

Link que abre em nova janela (tipo texto)

Mesmo exemplo acima, a diferença é que outra janela se abrirá e a pessoa continuará no seu blog, mas vendo o site indicado.

<a href="http://www.saoluis.org" target="_blank">Colégio São Luís</a>

14


Linkando uma figura para uma URL (ou como inserir um link em uma imagem)

Vamos supor que você queira adicionar um link a uma figura. Para linkar a foto de Chaplin para o site onde há a biografia dele, procedo da seguinte forma: •

Depois de <a href=,

coloco o site da biografia de Chaplin, no caso, a

Wikipedia, entre aspas. (Está em vermelho no exemplo abaixo.) •

Procuro

uma

imagem

no

Google.

Clicando

com

a

direita,

vejo

em

“Propriedades” o endereço URL da imagem. Colo esse endereço depois de src= . (Está em azul no exemplo abaixo.) •

Escrevo uma palavra ou frase que vai aparecer quando a pessoa passar o mouse por cima. No exemplo abaixo, escrevi “Biografia de Chaplin” depois de alt= . (Está em verde no exemplo abaixo.)

<a href="http://pt.wikipedia.org/wiki/Charlie_Chaplin" target="_blank"><img border="0" src="http://www.classicosdocinema.com.br/catalogo_arquivos/charles_chaplin.jpg " alt="Biografia de Chaplin"></a>

Esta é a figura que serviria como link no exemplo dado.

15


Ou seja, basta você copiar o exemplo que eu dei, substituindo o que coloquei em colorido pelo site, figura e frase que você quiser usar.

GIFS ANIMADOS Se quiser deixar o blog mais “alegre”, pode colocar gifs animados, que são figuras que se movem. Pode até mesmo usar o gif animado como figura que vai direcionar para um site, como expliquei anteriormente com a figura do Chaplin. Quando for fazer uma nova postagem, há um botão onde se pode adicionar facilmente uma figura que vai apenas ilustrar o blog, sem servir como link. Você pode adicionar qualquer figura ou foto que tenha no seu computador. Se quiser colocar um gif animado, basta salvá-lo no computador e usar o botão mencionado para colocá-lo na postagem. Sites com gifs animados:

http://www.ilona.com.br/blog_tabela.html http://www.gifmania.com.pt/ http://apenasgifshp.sites.uol.com.br/

16


INSERINDO DOCUMENTOS E PLANILHAS

Que tal disponibilizar para os alunos os resumos das aulas dadas? Ou uma aula dada em PowerPoint? Quem sabe listas de exercícios, que ele pode imprimir, se quiser? É bem simples fazer isso, usando os documentos do Google – Google Docs. Fazendo o registro, você tem acesso a alguns tipos de software bem simples de se usar. Outra vantagem é ter acesso a eles de qualquer computador com Internet, sem precisar gravar em cd ou pen drive. Veja:

Crie documentos, planilhas e apresentações on-line

Crie documentos básicos totalmente novos. Todas as tarefas básicas podem ser realizadas com facilidade: criação de listas com marcadores; classificação por colunas; inclusão de tabelas, imagens, comentários e fórmulas; alteração de fontes etc.

17


Faça upload dos seus arquivos existentes. O Google Docs aceita os formatos de arquivos mais conhecidos, incluindo DOC, XLS, ODT, ODS, RTF, CSV, PPT, etc. Portanto, vá em frente e faça upload dos seus arquivos existentes.

A área de trabalho conhecida facilita muito a edição. Basta clicar nos botões da barra de ferramentas para aplicar negrito, sublinhado, recuo, alterar a fonte ou o formato de números, alterar a cor de fundo das células e assim por diante. Edite e acesse de qualquer lugar. Não é preciso baixar nada; você acessa seus documentos, planilhas e apresentações de qualquer computador com conexão à internet e um navegador padrão. E isso tudo é grátis! Guarde seu trabalho com segurança. Com o armazenamento on-line e salvamento automático, você não precisa se preocupar com falhas no disco rígido local ou falta de luz. Salve e exporte cópias com facilidade. Você pode salvar seus documentos e planilhas no seu computador nos formatos DOC, XLS, CSV, ODS, ODT, PDF, RTF e HTML. Organize seus documentos Encontre facilmente seus documentos organizando-os em pastas. Arraste e solte seus documentos em quantas pastas desejar. Publique seu trabalho como página da web. Com apenas um clique, você publica seus documentos como páginas da web normais, sem precisar aprender nada de novo.

18


Controle quem pode ver suas páginas. Você pode disponibilizar para o mundo inteiro, somente para algumas pessoas ou para ninguém - a decisão é sua. (Pode inclusive suspender a publicação sempre que quiser.) Publique seu texto ou planilha no seu blog. Depois de criar um documento, você pode postá-lo no seu blog.

APRESENTAÇÃO POWERPOINT EM VÍDEO

Você também pode transformar uma apresentação que tenha feito em PowerPoint em um vídeo, salvando-o para que o acesso seja feito em qualquer computador. Depois é só inserir no blog, para os alunos assistirem a sua apresentação, como se assistissem a um filme. O site http://www.authorstream.com/ permite que se faça isso sem complicação, bastando fazer o cadastro.

19


APOSTILA ON-LINE Para publicar uma apostila com textos ou exercícios, por exemplo, você pode usar o site www.issuu.com. É bem simples de usar. Basta salvar sua apostila em PDF, fazer cadastro no site e baixar o documento. O site vai transformá-lo em um livro virtual que o aluno acessa, pode passar suas páginas e, se quiser, imprimi-lo. Você copia o código em seu blog e vai aparecer um mini-livro, que pode ser acessado pelo aluno em formato maior. Além de útil, fica um trabalho muito bem feito e de aparência atraente. Veja exemplo na figura abaixo:

20


MULTIMÍDIA – INSERINDO VÍDEOS E MÚSICAS

Os alunos gostam muito de ver vídeos do YouTube. Por que não sugerir alguns interessantes, que podem enriquecer o que foi trabalhado em classe? No caso do YouTube, é simples colocar o vídeo em seu blog. Basta copiar o código que está à direita do vídeo escolhido, onde está escrito INCORPORAR, e inserir na postagem. Veja, no exemplo abaixo, onde está a seta.

Código a ser copiado

21


Editando vídeos Outra opção interessante é unir trechos de vídeos com o mesmo tema, inserindo comentários seus. Por exemplo, após uma aula sobre Chaplin, deixar no blog uma série de vídeos onde aparecem dados para os quais queremos chamar a atenção do aluno, como detalhes de cenas, por exemplo. Também podemos inserir informações diversas sobre os vídeos (diretor, data etc). Isso é simples de se fazer usando o site www. omnisio.com . Fazendo seu cadastro, você busca vídeos no YouTube e em outros sites, edita-os como preferir, na ordem que achar melhor, e insere os textos. Observe no exemplo abaixo: o comentário aparece em um balãozinho rosa.

22


Inserindo músicas

Testei vários programas, mas o que achei mais interessante foi o Esnips. No site www.esnips.com, você faz o cadastro e pode escolher um tocador (tem vários formatos) e baixar as músicas disponíveis no site ou no seu computador. Segue abaixo a tradução das primeiras instruções de uso do site:

Como criar suas listas de músicas: 1. Comece adicionando músicas a uma “ Quicklist”. Clique em '+ Add to Quicklist' perto de cada arquivo para adicioná-lo à lista. Veja na figura abaixo: para adicionar a música “snippy_song”, é só clicar no que está circulado em vermelho.

2. As músicas que você selecionou vão aparecer na caixa Quicklist. Esta caixa ficará no alto da página e você poderá adicionar mais músicas.

23


3. Quando terminar de selecionar as músicas, você pode simplesmente ouvi-las ou criar um “widget” (no caso, um tocador, um aparelhinho de som).

4. Para criar um widget, clique em 'Create Playlist Widget’. Escolha o formato do tocador. Veja exemplo na figura abaixo. Depois, copie o código HTML e cole na postagem do seu blog. O código está à direita, em um quadro escrito “Copy and paste”.

24


Ferramenta de análise

Há várias ferramentas disponíveis para se obter uma análise sobre os visitantes do blog: país, cidade, tempo de visita etc. Uma das vantagens dessa análise é descobrir em que dias houve maior número de acessos (posso até verificar se os alunos acessam nos dias em que indico alguma tarefa). A ferramenta que uso é o Google Analytics

www.google.com/analytics/pt-

BR/, que fornece um relatório completo, inclusive com gráficos e mapas, como você pode ver pela figura. Basta se inscrever, dar o endereço de seu blog, e ele fornece todos os dados. Meu blog, por exemplo, recebe visitas de dezesseis países diferentes. No Brasil, são 102 municípios diferentes acessando-o. Não é interessante descobrir o quanto podemos interagir usando o blog?

25


Glossário de termos em geral

Blog: É um sistema de publicação na web destinado a divulgar informação por ordem cronológica, à semelhança de um diário. Os blogs ganharam grande popularidade porque permitem que utilizadores com poucos conhecimentos técnicos de Informática publiquem facilmente conteúdos na web. Download: transferir; descarregar; baixar. Transferir um conteúdo de um servidor web para um computador local. Home page: página de entrada. Página de entrada de um site, a partir da qual se podem seguir ligações para todas as restantes. Normalmente, são referenciadas por um

URL

constituído

apenas

pelo

nome

do

site

(Exemplo:

http://www.auladaroberta.blogspot.com). HTML: (acrônimo para a expressão inglesa HyperText Markup Language, que significa Linguagem de Marcação de Hipertexto) é uma linguagem de marcação utilizada

para

produzir

páginas

na

Web.

Documentos

HTML

podem

ser

interpretados por navegadores. Link: apontador, ligação de hipertexto, referência a um site. Linkar: fazer o link. Navegador (também conhecido como web browser ou simplesmente browser, termos em inglês): É um programa que habilita seus usuários a interagirem com documentos HTML (em linguagem de hipertexto) hospedados em um servidor Web, de acesso à Internet. Online: em-linha. Significa que um computador está ligado à Internet.

26


Site: sítio. Conjunto de documentos interligados entre si e que partilham o mesmo nome de domínio. Tag: etiqueta. Rótulo usado para informar ao navegador como deve ser apresentado o website. Template: modelo. Página usada como base do desenho de todas as páginas num site.

27


Fontes de pesquisa Author Stream - http://www.authorstream.com/ Blogs de Teresa Almeida d'Eça e do Prof. Oswaldo Morais Blogging accross the curriculum: Weblogs in and around the classroom Centro Pedagógico Pedro Arrupe - http://www.pedroarrupe.com.br Downes, Stephen. Educational Blogging. EDUCAUSE Review. Esnips - http://www.esnips.com/ Google Analytics - www.google.com/analytics HTML Net - http://www.pt-br.html.net/tutorials/html/lesson3.asp Issuu – www.issuu.com Meu blog – www.auladaroberta.blogspot.com Mini-aula sobre tags - http://www.verinha.de/mini_aula_tags_html.htm Omnisio - http://www.omnisio.com/ Wikipedia – www.wikipedia.org

28


Contato

Blog: www.auladaroberta.blogspot.com E-mail: roberta.ramos@saoluis.org

29


Blog educativo  

Como fazer um blog educativo - dicas diversas.

Advertisement
Read more
Read more
Similar to
Popular now
Just for you