proa17/11 - Fontes & Cores

Você adora o formato do seu blog, MENOS o verde enjôo do fundo da página. Está na hora de trocar :) Ensaie alterando as cores e as fontes do seu blog de testes.

1 - entre no Modelo (Layout) do seu blog de testes e clique na aba Fontes e Cores. Vai aparecer:


*clique na imagem para ver as anotações.

No lado esquerdo você seleciona o item que deseja alterar. Nas listas de cores, à direita, escolhe a cor desejada. Com as seguintes opções:

  • cores do seu blog - caso queira repetir alguma
  • cores que combinam com as cores do seu blog - uma sugestão de cores.
  • mais cores - ampliando as opções de escolha
  • editar código - para especificar uma determinada cor a partir de uma tabela de cores.
2 - Mude a cor do título das postagens. No exemplo, a cor foi mudada de marrom para verde.


*clique na imagem para ver as anotações.

Depois de escolher a nova cor, clique em salvar alterações.

3 - escolha um outro item à esquerda e altere a fonte do texto.

Navegação:

proa17/10 - Cabeçalho e Barra de Navegação

Barra de Navegação ou Nav Bar

Sabe aquela barrinha que fica bem no alto do seu blog? Dá para trocar escolhendo uma que combine melhor com o seu blog.

1 - entre no Modelo (Layout) do seu blog de testes e clique na aba Elementos da página.

2 - Clique em Editar, nom item NavBar. Vai aparecer esta janela:



3 - selecione a barra que quiseres para o teu blog e clique em salvar alterações.

4 - retornando a janela Elementos da página, clique em SALVAR.


Cabeçalho

Vamos testar a opção de substituir o cabeçalho por uma imagem?

1 - Usando um editor de imagens (pode ser até o Paint que vem junto com o Windows) crie uma imagem para por no cabeçalho de seu blog. Importante que ela tenha o tamanho adequado para aparecer na tela. Nesta imagem, podes escrever o nome do blog. Um exemplo é o cabeçalho deste nosso blog.

2 - Criada a imagem, salve-a no seu computador. Escolha o formato .jpg ou .png. No nome, evite espaços, "ç" e carácteres não alfa-numéricos.

3 - No seu blog de testes, entre em Modelo, Elementos de Página. Localize o elemento "cabeçalho" e clique em editar (edit).

Vai aparecer algo do tipo:



* clique na imagem e entre na página onde você poderá ler as anotações que explicam cada campo deste formulário.

Escolha a opção "De seu computador", localize a imagem criada por você (clique em arquivo). A imagem vai aparecer no formulário. Salve as alterações.

4 - Torne a editar o Cabeçalho para posicionar a imagem no blog.



Escolha a opção desejada de posicionamento e salve as alterações.

Observação: você pode editar sempre que quiser o cabeçalho usando imagem ou texto, alterando a descrição e o nome.


Navegação:

proa17/9 - Adicione uma lista de links na barra lateral do blog

Esta atividade é para ser realizada no seu blog de testes. À medida que se sentir segur@ podes editar o seu blog da disciplina.

1 - entre no Modelo (Layout) do seu blog de testes e clique na aba Elementos da página.

Na barra lateral (ou no rodapé, se seu blog não tem barra lateral), clique em Adicionar um elemento de página. Na janela que aparecer, procure o item Adicionar Lista de Links. Clique em Adionar ao Blog. Vai aparecer a seguinte janela:



* clique na imagem para ver as anotações.

Na janela acima (exemplo):
  • digite o nome de sua lista de links (título);
  • determine a ordem em que os links vão aparecer (sorting),
  • vá adicionando os links: preencha Novo URL do site e Novo nome do site e clique em adicionar link (faça isso para cada link que quiser adicionar)
  • após adicionar os links desejados, clique em salvar alterações.



* clique na imagem para ver as anotações.

Verifique onde vai aparecer a sua Lista de Links e, clicando com o botão esquerdo do mouse, arraste-a e solte-a na posição desejada.
Lembre que esta lista poderá ser editada para acrescentar ou excluir links.
Depois de tudo terminado, clique em SALVAR.

Navegação:

O Modelo - formas de alterar

Elementos de página
Permite editar o formato e apresentação do cabeçalho (nome) do blog, da barra lateral, do rodapé e das postagens. Permite, também, adicionar elementos ao Modelo do blog como, por e exemplo, uma lista de links.



* clique na imagem para ver as anotações.

Fontes e Cores:
Aqui você mexe com as cores do seu blog e com o tipo de fonte usados nos diversos elementos de página.



* clique na imagem para ver as anotações.

Editar html
Aqui você pode ver a íntegra da codificação do seu blog e fazer alterações nela. É indicado que apenas usuários muito experientes e com conhecimento de html usem este espaço para fazer modificações.



* clique na imagem para ver as anotações.

Escolher novo modelo
Aqui você escolhe um novo modelo. É importante saber que as personalizações (alterações) feitasanteriormente no modelo antigo não aparecerão no novo.



* marcando os tipos diferentes de um dado modelo, você podera ir visualizando as diferenças.

Recursos

. ajuda do blogger

Navegação:

Atividades da Semana 3

Período de 11/06/2007 à 18/06/2007

Nesta semana, vamos começar a aprender a mexer no Modelo (figura ao lado) do blog. Aproveitaremos para avançar no uso do bloglines e para recuperar/revisar as atividades das semanas anteriores (semana 1; semana 2)

Vamos começar?

* Entre no Painel do Blogger com seu nome de usuário e senha.

Atividade proa17/8

Clique em Criar um Blog e crie um novo blog. Este blog será usado para fazer testes. Sempre que tiver dúvidas ao realizar alterações em seus blogs, você pode testar antes usando este blog de testes. É uma boa precaução para não perder nada realizado anteriormente.
  • Divulgue no seu blog da disciplina o endereço do seu blog de testes.
  • Opcional: capture a imagem do seu blog de testes e poste-a juntamente com o endereço.


* Agora, vamos mexer no Modelo do blog de testes. O Modelo é a codificação página do blog, a sua forma visual (layout), com suas cores, tipos de letras, disposição dos elementos de página (postagens, barras etc.) O blogger permite algumas formas de intervenção no Modelo:

* clique na imagem para conhecer um pouco mais sobre as formas de intervenção no layout de seu blog.

Que tal brincarmos um pouco? Faça isso, desenvolvendo estas atividades:
Atividade proa17/12

Ao final das atividades 8, 9, 10 e 11 (e a opcional, se fizer), poste no seu blog um relato sobre todas as atividades feitas nesta semana, fale das suas dificuldades, suas conquistas, suas dúvidas e suas curiosidades. Conte como foi a revisão das atividades já realizadas ou a recuperação de alguma que tenha ficado para trás.

bloglines - personalizando os seus feeds

1 - Entre no no bloglines, clique em iniciar sessão, coloque seu nome de usuário (email) e senha e clique em iniciar sessão. Clique em Feeds.

2 - Na aba Feeds, clique em Editar.


* clique na imagem para ler as anotações feitas (abre em outra janela).

  • Clique uma vez para selecionar uma pasta ou blog. No segundo clique, é possível editar o nome do feed ver figura acima.
  • Clique duas vezes seguidas para abrir a janela de Edição da Assinatura, na qual podem ser editados diversos itens da assinatura de um determinado blog. Feitas as alterações, clique em salvar alterações.
  • Selecionado o blog ou pasta, arraste-o, segurando o botão esquerdo do mouse, para mudar de posição.
  • Selecionado o blog ou pasta, use a caixa Escolher Ação para determinar o que será feito com o blog ou pasta e, depois, clique em Enviar.
  • Terminada a Edição, clique em Terminado, para voltar à lista de Feeds.
  • New Folder adiciona uma nova pasta ao bloglines.
  • Trash deleta o feed ou pasta selecionada.
Janela de Edição de um Feed:


*clique na imagem para ler as anotações feitas (abre em outra janela).

Outra forma de personalizar um feed:

Selecione o blog e use os comandos do lado direito, na faixa azul.
(saiba mais clicando na figura abaixo)


* clique na imagem para ler as anotações feitas (abre em outra janela).

webnote



Um recurso interessante de ser utilizado para dar interatividade ao seu webfólio >> um mural de recados.


  • Entre em http://www.aypwip.org/webnote/.

  • No quadrinho em branco à direita digite o nome de seu mural e clique em load.

  • Se não houver nenhum webnote com aquele nome, está feito o seu. [exemplo]

Dicas:
  • use uma palavra só, sem acentos.

  • não use ç

  • evite palavras muito conhecidas

  • Não se preocupe se alguém apagou seus recados. Use o terceiro ícone da barra para recuperar versões anteriores do seu mural.

E mais:

Colaboradores

Creative Commons License Exemplo de referência para usar conteúdo deste blog:

COSTA, Iris ; GUTIERREZ, Suzana ; SILVA, Mara. Oficina de Blogs na Educação do Curso de Especialização em Informática na Educação - turma B. Porto Alegre: UFRGS, 2007. Disponível em http://proa17b.blogspot.com. Acesso em 17 mai 2007.