Curso de Blogs SESI

alexandrerosado

Download

Post to :

URL :

Related Presentations :

Add to Flag Embed

Views: 279

Category: Education

License: Some Rights Reserved

Presentation Description

No description available.

Comments

Presentation Transcript

Slide 1:

SESI Cuiabá, MT 20 (turma 1) e 21 (turma 2) de Agosto de 2010 Prof. Alexandre Rosado Doutorando em Educação | PUC-Rio Oficina de Blogs para a Educação Fazendo na prática Blá, blá, blá Ti, ti, ti Ops!

Slide 2:

Atualmente (2009-2013) faço doutorado na PUC-Rio, na área de ciências humanas / educação, com o tema da internet e a autoria de doutores em educação. Fiz mestrado em educação (2006-2008) com a linha de pesquisas sobre novas tecnologias de informação e comunicação (TICs), na UNESA, com o tema da autoria coletiva em wikis. Me graduei em comunicação social (2000-2004), com hab. em publicidade e propaganda. “Quem é esse cara aí?”

Slide 3:

Etapas da Oficina 1 2 3 4 5 6 7 8 9 10 11

Slide 4:

Web 2.0 !? Programas em qualquer lugar

Slide 5:

Muitos programas de computador hoje em dia não precisam estar mais instalados no computador pessoal, eles funcionam diretamente nos sites de internet. São programas/sites que permitem cadastro e comunicação entre seus usuários. É um estágio posterior ao das páginas estáticas em HTML, típicas dos anos 90. Web 2.0 !? Programas em qualquer lugar

Slide 6:

Web 2.0 !? Programas em qualquer lugar

Slide 7:

Exemplos Uma rede social (Orkut, Facebook, Twitter) é um programa que a pessoa pode acessar de qualquer lugar conectado na internet, sem precisar instalar. Um Webmail (Gmail, YahooMail) também é um programa dessa categoria, pois a pessoa acessa seus e-mails de qualquer lugar. Já existem editores de texto, apresentações e planilhas diretamente acessados na internet como o GoogleDocs. Web 2.0 !? Programas em qualquer lugar

Slide 8:

Web 2.0 !? Programas em qualquer lugar

Slide 9:

A Web 2.0 pode ser definida como uma evolução da internet em que bases de dados podem ser editadas on-line e compartilhadas por seus usuários. Os Blogs formam uma categoria de programas que nasceram na internet e dependem dela para se manterem. São ferramentas da Web 2.0. A edição compartilhada, a cópia e colagem de materiais (remixagem) vem recebendo fortes críticas (amadorismo) e exaltações (liberdade de criação). Juridicamente observamos o conflito entre o copyright e o copyleft (Creative commons). Web 2.0 !? Programas em qualquer lugar

Slide 10:

1. Quais serviços da Web 2.0 você utiliza? 2. Você lembrou de algum serviço que não foi citado até agora? Web 2.0 !? Programas em qualquer lugar O que?!

Slide 11:

Elementos de um blog

Slide 12:

O primeiro elemento de um blog, que o caracteriza, é o post. Um post é formado basicamente por: Data de postagem Texto Autor Comentários Tags ou marcadores Elementos de um blog

Slide 13:

Algumas dicas gerais Todo blog tem seus posts publicados em ordem cronológica. As tags (ou marcadores) ajudam o leitor a buscar informações através de palavras-chaves que formam categorias. Um blog mantém sua audiência através da assiduidade das atualizações. Elementos de um blog

Slide 15:

Observe o blog www.historiadigital.org e procure os elementos básicos através dos posts. Anote suas observações para posterior debate. Elementos de um blog O que?!

Slide 16:

Projeto de um blog educativo

Slide 17:

Porque eu quero criar um blog??? Todo blog deve ter uma finalidade. O objetivo do blog define a criação e a busca dos seus conteúdos. O visitante volta ao site quando percebe que seus conteúdos são úteis, mesmo que para entretenimento. Um blog pode servir 10, 100, 1000 ou milhões de pessoas. Tudo depende do objetivo. Projeto de um blog educativo

Slide 18:

Elementos essenciais de um projeto de blog 1. Público-alvo do site 2. Conteúdos desejáveis e não-desejáveis 3. Definição das seções básicas do blog 4. Canais de interação com os visitantes. 5. Manutenção e regularidade de atualizações. 6. Equipe de editores do blog (autores). Projeto de um blog educativo

Slide 19:

1. Como definir meu público? Público-alvo do site O público-alvo do site são os possíveis leitores que acessarão os conteúdos. Exemplos: Professores de matemática da rede municipal da cidade. Alunos de química do ensino médio. Vestibulandos da área de ciências humanas. Projeto de um blog educativo

Slide 20:

2. Como definir meu conteúdo? Conteúdos desejáveis e não-desejáveis Os conteúdos devem ser definidos a partir do público escolhido para o site. Exemplos: Para alunos de ensino médio posso consultar os temas mais comuns dados em sala de aula e a partir deles procurar matérias na mídia que estejam relacionadas e sejam curiosas. Para os vestibulandos posso consultar e dar dicas sobre questões contemporâneas a respeito de história e geografia. Posso também criar um blog a partir de um projeto definido com os alunos, a partir de uma demanda de autoria. Projeto de um blog educativo

Slide 21:

3. Como definir minhas seções? Definição das seções básicas do blog As seções do blogs são expansíveis com o passar do tempo, porém algumas podem ser definidas antes da inauguração. As seções não são temas do blog, mas categorias gerais. Exemplos: Dicas de filmes. Materiais pedagógicos. Vídeos de química. Apresentações em power point. Artigos científicos. Entre em contato. Projeto de um blog educativo

Slide 22:

4. Como definir meus canais de contato? Canais de interação com os visitantes. Os canais de interação do site são as formas com que o público poderá se comunicar. Exemplos: Permitir comentários nos posts. Disponibilizar um e-mail / telefone / skype / msn para o “fale conosco”. Realizar uma pesquisa via Google Docs. Projeto de um blog educativo

Slide 23:

5. Como definir a regularidade de atualizações? Manutenção e regularidade de atualizações. De acordo com a assiduidade do blogueiro, e sua disponibilidade de tempo e recursos, é possível manter um ritmo de atualizações diárias, semanais ou mensais. O importante é que o internauta confie e retorne. É imenso o número de blogs abandonados por seus criadores, sendo fácil constatar em nossas buscas via Google. Projeto de um blog educativo

Slide 24:

6. Como definir a equipe de editores? Equipe de editores do blog (autores). Não seja egoísta em seu projeto de blog! Associe-se com outros professores e colaboradores e crie sua equipe de autores / editores. Blogs não precisam ser sempre individuais. Se o tema é de interesse coletivo, porque não alimentar o blog coletivamente? Mostre seu projeto para possíveis membros de sua equipe e explique em que área poderiam colaborar. Projeto de um blog educativo

Slide 25:

Analise um dos blogs: http://ufabloguei.blogspot.com/ , http://professordigital.wordpress.com/ e http://tatianemomartins.blogspot.com/ e identifique os itens do planejamento abaixo: a. Público-alvo do site. | b. Conteúdos desejáveis e não desejáveis. c. Definição das seções básicas do blog. | d. Canais de interação com os visitantes. e. Manutenção e regularidade de atualizações. | f. Equipe de editores do blog (autores). Projeto de um blog educativo O que?!

Slide 26:

E agora... vamos criar nosso projeto? a. Público-alvo do site. b. Conteúdos desejáveis e não desejáveis. c. Definição das seções básicas do blog. d. Canais de interação com os visitantes. e. Manutenção e regularidade de atualizações. f. Equipe de editores do blog (autores). Projeto de um blog educativo O que?!

Slide 27:

Como funciona o Wordpress?

Slide 28:

O que é o Wordpress? Uma plataforma aberta (GNU GPL) que surgiu em 2003 O wordpress é um gestor de sites de código aberto, disponível para instalação. Também pode ser usado sem instalação, necessitando apenas de cadastro no site Wordpress.com Um gestor de blog e páginas estáticas Seu painel de controle on-line permite criação e edição de páginas, com publicação instantânea. Como funciona o Wordpress?

Slide 29:

Cadastrando-se no Wordpress.com Primeiro entre no wordpress.com e escolha o idioma “Português do Brasil” Como funciona o Wordpress?

Slide 30:

Cadastrando-se no Wordpress.com Então clique em “Cadastre-se agora!” Como funciona o Wordpress?

Slide 31:

Cadastrando-se no Wordpress.com Siga o passo a passo do cadastro e depois veja a confirmação de cadastro em sua caixa de mensagem de e-mails. Como funciona o Wordpress?

Slide 32:

Cadastrando-se no Wordpress.com Na parte superior do site faça então seu login e digite sua senha: Como funciona o Wordpress?

Slide 33:

Quando se faz o login no wordpress, ele apresenta a barra de menu no canto esquerdo acima do Blog, com acesso rápido ao painel de controle. Como funciona o Wordpress?

Slide 34:

O Wordpress possui um painel de controle em que é possível criar e administrar os conteúdos do blog. Como funciona o Wordpress?

Slide 35:

No menu principal do wordpress é possível acessar todas as funções de manutenção do blog. Ao lado de cada função existe um botão para expandir o conteúdo do menu. Ele aparece quando o mouse passa por cima da região direita do item. Como funciona o Wordpress?

Slide 36:

As principais funções do Wordpress são: Posts: gerenciamento das postagens da página principal. Mídia: para fazer upload de arquivos como imagens, sons e textos. Links: gerencia a seção de links do site. Páginas: cria páginas estáticas além do página principal do blog. Comentários: gerencia os comentários postados pelos visitantes. Votações e Enquetes: para inserir pesquisas rápidas no blog. Como funciona o Wordpress?

Slide 37:

Para ver o resultado das alterações feitas no painel de controle, basta voltar à página pública do seu site clicando no nome do mesmo, no alto do painel. Como funciona o Wordpress?

Slide 38:

Vamos explorar o painel de controle? Explore cada item do menu e suas funções, testando resultados em sua página principal. Não se preocupe nesse momento com os conteúdos! Como funciona o Wordpress? O que?!

Slide 39:

Primeiro post no Wordpress

Slide 40:

No menu do painel de controle, clique em “Post” e depois em “Adicionar Novo” Primeiro post no Wordpress

Slide 41:

Dê um título ao seu post, digite o texto e clique em “Publicar”. Primeiro post no Wordpress

Slide 42:

Todo post, quando você estiver logado no site, terá a opção de editar, voltando ao painel de controle. Primeiro post no Wordpress

Slide 43:

Escolher o tema do blog

Slide 44:

Clique em “Aparência” e depois em “Tema”. Escolha seu tema testando através de “Visualizar” e confirmando através de “Ativar”. Escolher o tema do blog

Slide 45:

Escolher o tema do blog Escolha alguns temas do Wordpress e faça o teste em sua página principal. O tema escolhido aqui será o seu tema padrão para o resto de suas atividades. O que?!

Slide 46:

Como funciona o Paint.net?

Slide 47:

O Paint.net é um editor de imagens gratuito, em português, leve para rodar em qualquer máquina e uma alternativa para blogueiros que precisam criar imagens personalizadas para seus blogs. Pode ser baixado através do site http://www.getpaint.net/download.html Como funciona o Paint.net?

Slide 48:

Ele possui alguns recursos de editores avançados, tais como: criação de camadas. régua e grade de pixels. gerenciamento e ajuste de cores. recorte e colagem avançados. efeitos de imagem e camadas. Sua desvantagem é a falta de re-edição de textos: uma vez escrito, não se pode alterar o conteúdo novamente. Como funciona o Paint.net?

Slide 49:

Antes de mais nada, vamos entender o que é um pixel (picture element): É a menor unidade de uma imagem digital. Cada pixel possui uma cor atribuída a ele. A unidade de medida da resolução é pixel/polegada. Isso quer dizer que uma resolução de 75dpi possui 75 pixels em cada polegada. Como funciona o Paint.net?

Slide 50:

Quanto maior a resolução da imagem e o seu tamanho, mais espaço ocupa no computador. Exemplo: Uma imagem pode ter o tamanho de 300x200pixels e uma resolução de 96pixels/polegada(dpi). Imagens para internet não precisam de mais que 96dpi. O mínimo é 72dpi. Para impressão é bom que a imagem tenha pela menos 300dpi. Como funciona o Paint.net?

Slide 51:

Como criar uma imagem nova no Paint.net: Vá em “Arquivo” e depois em “Novo”. Configure o tamanho (altura e largura) e resolução da imagem (pixels/polegada). Como funciona o Paint.net?

Slide 52:

Vejamos a barra de recursos do Paint.net e alguns recursos importantes normalmente usados. Como funciona o Paint.net? Seleção em retângulo, laço, elipse ou por padrão de cor. Mover algo selecionado previamente. Aproximar ou afastar (Zoom) Criar um gradiente de cor Aplicar uma cor selecionada. Desenho livre com pincel. Inserir texto. Desenhar uma reta ou uma curva.

Slide 53:

O Paint.net permite a criação de camadas de imagens sobrepostas. Esse recurso é útil para separar, por exemplo, um fundo de um texto, ou então separar uma imagem composta de várias outras. Os botões abaixo servem para criar, excluir, mover, mesclar e acessar as propriedades das camadas. Lembre-se: Você só poderá editar a camada selecionada, uma por vez. Explore os menus “Ajustes” e “Efeitos” para aplicar modificações na camada selecionada. Como funciona o Paint.net?

Slide 54:

Salve sempre sua imagem no formato JPG (“Arquivo” > “Salvar como”). O JPG é o mais adequado para a internet (menor tamanho) e aceito pelo Wordpress e outros editores on-line de blogs. Como funciona o Paint.net?

Slide 55:

Como funciona o Paint.net? Vamos criar uma imagem parecida com essa abaixo e depois salvar em JPG? Ela tem 720x300pixels e 96dpi, tem três Camadas (duas de texto vermelho e uma de fundo azul) e a fonte é Arial 36 e Arial 18. O que?!

Slide 56:

Conceitos básicos de Design gráfico

Slide 57:

Apresentaremos Quatro princípios fundamentais para o Design gráfico de elementos de um blog. Eles servem para harmozinar banners, botões, títulos, texto e outros elementos do blog, oferecendo conforto e beleza para quem visita o website. Conceitos básicos de Design gráfico

Slide 58:

1. Contraste Serve para evitar elementos muito similares em uma página. Se os elementos forem distintos, diferencie-os completamente. O contraste costuma ser a mais importante atração visual de uma página. Você pode constrastar Tipo de Fonte | Tamanho da fonte | Negrito e Itálico Espaço entre parágrafos | Espaço entre linhas Conceitos básicos de Design gráfico

Slide 59:

2. Repetição Repita os elementos visuais do design e espalhe-os pelo material. Você pode repetir a cor, a forma, a textura e as relações espaciais como a espessura, os tamanhos etc. Isso ajuda a criar uma organização e fortalece a unidade do material. Deve-se pensar aqui o conjunto de todo material publicado. Elementos visuais para repetição da mesma formatação Títulos | Subtítulos |Nome de autor | Botões Corpo do texto |Citações | Numerações Conceitos básicos de Design gráfico

Slide 60:

3. Alinhamento Nada deve ser colocado arbitrariamente em uma página. Cada elemento deve ter uma ligação visual com outro elemento da página. Isso cria uma aparência limpa, sofisticada e suave. Em geral, deve-se utilizar um tipo de alinhamento somente. Existem quatro tipos de alinhamento Esquerda | Direita | Centralizado | Justificado Conceitos básicos de Design gráfico

Slide 61:

4. Proximidade Itens relacionados entre si deveriam ser agrupados. Quando vários itens estão próximos, tornam-se uma unidade visual, e não várias unidades individualizadas. Isso ajuda a organizar as informações e reduz a desordem. Crie uma relação entre os elementos através da proximidade. Da mesma forma, separe os elementos não relacionados. Conceitos básicos de Design gráfico

Slide 62:

1. Exemplo de aplicação Proximidade de elementos semelhantes, alinhamento centralizado e contraste de fontes e tamanho. Conceitos básicos de Design gráfico UnB Encontro anual de professores. Av. Brasil, 456 Brasília - DF Venha participar! UnB Venha participar do Encontro anual de professores. Av. Brasil, 456 Brasília - DF

Slide 63:

1. Exemplo de aplicação Proximidade de elementos, aplicação de contraste (tamanho e fonte) e alinhamento à esquerda. Conceitos básicos de Design gráfico Bolo de maisena Receita enviada por Janaina Mazzoni 50min 14 porções Ingredientes 6 gemas 1 xícara de chá de açúcar 250 g de margarina 4 xícaras de maizena 1 colher de sopa de fermento 6 claras em neve Bolo de maisena Receita enviada por Janaina Mazzoni 50 min | 14 porções Ingredientes 6 gemas 1 xícara de chá de açúcar 250 g de margarina 4 xícaras de maizena 1 colher de sopa de fermento 6 claras em neve

Slide 64:

Algumas dicas quantidade de elementos Menos é mais. Evite excesso de elementos para “chamar atenção” em seu blog. Coisas pulando e piscando fazem o leitor se irritar e sair do site com maior rapidez, mesmo que não queira. Um simples contraste entre estilos de fonte faz muita diferença. Defina bem e agrupe os elementos do seu site em categorias. Assim fica mais fácil definir cores, fontes, tamanhos e contrastes entre eles. Conceitos básicos de Design gráfico

Slide 65:

Algumas dicas o espaço em Branco O branco em um site são os espaços vazios, que servem para que o leitor tenha como respirar. Os espaços em branco ajudam a identificar os elementos e sua proximidade. Aplique sempre margens em suas criações gráficas. Conceitos básicos de Design gráfico

Slide 66:

Criando Imagens no Paint.net e inserindo no Wordpress

Slide 67:

Veja o tamanho, em pixels, do banner relativo ao Tema que você escolheu, entrando no painel de controle e clicando em “Aparência > Cabeçalho”. Criando Imagens no Paint.net e inserindo no Wordpress

Slide 68:

Observe o tamanho da imagem do banner indicado pela página “Cabeçalho”. Criando Imagens no Paint.net e inserindo no Wordpress

Slide 69:

Criando Imagens no Paint.net e inserindo no Wordpress Agora que você sabe como trabalhar no Paint.net, sabe alguns princípios básicos de Design Gráfico e descobriu o tamanho em pixels do banner de seu blog, que tal cria-lo? O que?!

Slide 70:

Agora que você fez seu banner, escolha o arquivo JPG salvo no Paint.net e faça o Upload. Escolha se você quer ou não exibir texto por cima da imagem do banner. Criando Imagens no Paint.net e inserindo no Wordpress

Slide 71:

Outra forma de inserir imagens e administra-las é através da biblioteca de mídia. Acesse em seguida o botão “Adicionar nova”. Criando Imagens no Paint.net e inserindo no Wordpress

Slide 72:

Criando Posts e Páginas estáticas

Slide 73:

Agora que você sabe criar e inserir imagens, é hora de organizar os seus Posts e suas páginas, de acordo com o planejamento do seu Blog. Existem dois tipos de páginas no Wordpress Blog: é a página principal, onde são exibidos em ordem cronológica os Posts. Páginas estáticas: são acrescentadas ao Menu de páginas do Wordpress e acessíveis quando o leitor entra no site, sendo atualizadas manualmente. Criando Posts e Páginas estáticas

Slide 74:

Criando Posts e Páginas estáticas Menu de páginas estáticas Posts do Blog

Slide 75:

Criando Posts e Páginas estáticas Criação de posts (já visto e testado). Criação de páginas estáticas.

Slide 76:

Criando Posts e Páginas estáticas Formatação do texto Inserção de arquivos de mídia da sua biblioteca Edição visual e avançada A barra de formatação e inserção de mídia aparece tanto na inserção e edição de posts quanto na edição de páginas estáticas.

Slide 77:

Criando Posts e Páginas estáticas Crie as páginas estáticas (seções) a partir do seu projeto de Blog, feito no início da Oficina. O que?!

Slide 78:

EMBED: elementos de outros sites

Slide 79:

EMBED: elementos de outros sites O Embed é um recurso que muitos sites disponibilizam para incorporação de objetos em outros sites, o que permite que conteúdos postados em outras plataformas sejam expostos diretamente no corpo dos textos do Blog wordpress. Exemplos: Vídeos do YouTube Apresentações no Slideshare Textos no Scribd Audios no Mevio

Slide 80:

EMBED: elementos de outros sites Abaixo uma tela de edição de post no Wordpress com 2 Embeds. O primeiro é do site Scribd e o segundo é um embed padrão para arquivos MP3.

Slide 81:

EMBED: elementos de outros sites Este é o resultado para o leitor do Blog: dois Embeds, um com o texto do Scribd e outro com o player do arquivo MP3.

Slide 82:

EMBED: elementos de outros sites Alguns exemplos de linhas de Embed Texto no Scribd (http://www.scribd.com/) [scribd id=35309076 key=key-vcszoo2ymlmu50rwoqb mode=list] Vídeo no TED (http://www.ted.com/) [ted id=66] Vídeo no YouTube (http://www.youtube.com/) [youtube=http://www.youtube.com/watch?v=T1wG_OoR_5I] Apresentação no slideshare (http://www.slideshare.net/) [slideshare id=4558263&doc=slidessobretecnologiaassistivaacessibilidade-100620155856-phpapp01] Audio em MP3 (Caminho do mp3) [audio http://m.podshow.com/media/25992/episodes/242935/itidomiciliar-242935-08-03-2010.mp3]

Slide 83:

EMBED: elementos de outros sites Fazendo um EMBED Vá no YouTube (www.youtube.com). Encontre um vídeo que deseja inserir no seu blog. Para postar no wordpress siga esta sintaxe: [youtube=http://oseuendereço...] O que?!

Slide 84:

Ainda dá tempo???

Slide 85:

Quem visitou meu site? O Wordpress oferece uma ferramenta de estatísticas, para você monitorar dia a dia o quanto seu site está sendo acessado... É possível saber de onde vieram os cliques, que arquivos foram baixados e que páginas foram mais acessadas.

Slide 86:

Quem visitou meu site?

Slide 87:

Widgtes Os Widgets são pequenos pedaços de aplicativos que podem ser adicionados no seu blog. O Wordpress gratuido possui uma série deles para uso. Basta arrastar o Widget e pôr na ordem que se deseja que apareçam.

Slide 88:

Widgtes O efeito são estes blocos de informações laterais, posicionados de acordo com o seu tema escolhido e com conteúdos automáticos ou criados por você livremente (estático).