Mudanças entre as edições de "Ajuda:Blog"

De Stoa
Ir para: navegação, pesquisa
(Como inserir imagens)
(Tópicos relacionados)
 
(29 edições intermediárias de 4 usuários não apresentadas)
Linha 1: Linha 1:
 +
{{predefinição:volta ajuda conteúdos}}
 +
 
== O que é um blog? ==
 
== O que é um blog? ==
  
Linha 10: Linha 12:
 
[[Imagem:Blog_submenu.jpg|center|Botões do blog]]
 
[[Imagem:Blog_submenu.jpg|center|Botões do blog]]
  
'''Etapa 1:''' Clique em ''Nova mensagem'', como indicado na figura acima. Você verá a página ''Escrever nova mensagem'' (figura abaixo). Dê um título para sua mensagem e preencha com algum conteúdo. Agora poderá escrever a sua mensagem. No link ''Configurações de conta'', você pode [[Ajuda:TinyMCE#Como_desativar_o_TinyMCE|configurar se quer ou não quer usar o editor visual]]. Veja abaixo como inserir [[#Como inserir imagens|imagens]], [[#Como inserir vídeos|vídeos]] e [[#Como inserir fórmulas matemáticas|fórmulas matemáticas]] usando [[:pt:LaTeX|LaTeX]].
+
'''Etapa 1:''' Clique em ''Nova mensagem'', como indicado na figura acima. Você verá a página ''Escrever nova mensagem'' (figura abaixo). Dê um título para sua mensagem e preencha com algum conteúdo. Agora poderá escrever a sua mensagem. No link ''Configurações de conta'', você pode [[Ajuda:TinyMCE#Como_desativar_o_TinyMCE|configurar se quer ou não quer usar o editor visual]]. Veja abaixo como inserir [[#Como inserir imagens|imagens]], [[#Como inserir vídeos|vídeos]], [[#Como inserir códigos de linguagens de programação|colorir linguagens de programação]] e [[#Como inserir fórmulas matemáticas|escrever fórmulas matemáticas]] usando [[:pt:LaTeX|LaTeX]].
  
 
[[Imagem:Blog_post.jpg|center|Escrever nova mensagem.]]
 
[[Imagem:Blog_post.jpg|center|Escrever nova mensagem.]]
Linha 32: Linha 34:
 
== Como inserir imagens==
 
== Como inserir imagens==
  
Para descobrir o [[:en:URL|URL]] de uma imagem na Internet, no [[:en:Firefox|Firefox]], clique com o botão direito do mouse sobre uma imagem e clique em ''Exibir imagem'' - no [[:en:Internet Explorer|Internet Explorer]] ou outro navegador talvez seja um pouco diferente, mas semelhante.
+
Além do método descrito na Etapa 5 da última seção, você pode inserir uma imagem de modo mais sofisticado. Para isso é preciso ter a imagem hospedada em algum local (pode ser seu [[Ajuda:Arquivos|repositório de arquivos]] aqui no Stoa). Para descobrir o [[:pt:URL|URL]] de uma imagem na Internet, no [[:en:Firefox|Firefox]], clique com o botão direito do mouse sobre uma imagem e clique em ''Exibir imagem'' - no [[:en:Internet Explorer|Internet Explorer]] ou outro navegador talvez seja um pouco diferente, mas semelhante.
  
Por exemplo, fazendo isso no [[:en:Avatar (icon)|avatar]] da [http://stoa.usp.br/news administração do Stoa], veremos a figura da [[:pt:URL|URL]] abaixo:
+
Por exemplo, fazendo isso no [[:imagem:Logo-stoa.gif|logo Stoa]], obteremos o seguinte URL (ele aparece na barra onde você digita os URL das páginas Web):
  
http://stoa.usp.br/_icon/user/148/h/67/w/67
+
'''<nowiki>http://wiki.stoa.usp.br/images/d/db/Logo-stoa.gif</nowiki>'''
  
Agora é só clicar no botão [[Imagem:Tinymce_image.gif]], inserir a URL acima em ''Endereço (URL) da imagem'' e clicar em '''Inserir'''.
+
Você poderia obter esse URL simplesmente clicando com o botão direito do mouse, seguido de ''Copiar endereço da imagem''.
  
Passar o resto do tópico abaixo para cá: [http://stoa.usp.br/mod/forum/forum_view_thread.php?post=807 Inserir Imagens]
+
Agora é só clicar no botão [[Imagem:Tinymce_image.gif]], inserir a URL acima em ''Endereço (URL) da imagem'' e clicar em '''Inserir''' (para inserir o URL, digite '''control-v''' ou pressione o botão direito do mouse seguido de ''Colar''). Quando você clica no botão para inserir imagens, outros campos (opcionais) aparecem:
  
[[Categoria:Ajuda]]
+
* ''Descrição da imagem'': Pequena descrição sobre a imagem que aparece quando passamos o cursos do mouse por cima dela. Também conhecido como [[:en:tooltip|tooltip (em inglês)]].
 +
* ''Alinhamento'': O texto pode aparecer em diversas posições em relação a imagem. Se você quiser que o texto aparece à direita da imagem, alinhe à esquerda. Se quiser um texto à esquerda, alinhe a imagem à direita e assim por diante.
 +
* ''Dimensões'': Dimensões da figura em [[:pt:pixel|pixels]], <math>x</math> X <math>y</math>, onde <math>x</math> é o comprimento e <math>y</math> a altura.
 +
* ''Borda'': Distância mínima em [[:pt:pixel|pixels]] de tudo que aparece ao redor da imagem.
 +
* ''Espaço vertical'': Distância mínima em [[:pt:pixel|pixels]] de tudo que aparece acima e abaixo da imagem.
 +
* ''Espaço horizontal'': Distância mínima em [[:pt:pixel|pixels]] de tudo que aparece à esquerda e à direita.
 +
 
 +
É possível alterar as dimensões da figura usando o mouse. Após clicar em '''Inserir''', arraste o vértice da imagem para aumentá-la ou diminuí-la proporcionalmente. Se quiser mudar o tamanho apenas da altura e do comprimento, arraste a borda horizontal e vertical, respectivamente.
  
 
== Como inserir vídeos ==
 
== Como inserir vídeos ==
  
É possível embutir vídeos nas mensagens do seu blog de sites como [http://youtube.com Youtube], [http://video.google.com Google Video] e [http://www.dailymotion.com/ Dailymotion]. Para inserir um vídeo, digite o seguinte código na mensagem do seu blog:
+
É possível embutir vídeos nas mensagens do seu blog de sites como [http://youtube.com Youtube], [http://video.google.com Google Video] e [http://www.dailymotion.com/ Dailymotion]. Há dois modos:
 +
 
 +
'''Modo 1''' Ao escrever sua mensagem, clique no botão '''Adicionar Vídeo Externo'''. Nessa caixa, coloque o código que Youtube ''et al.'' fornecem, escolha as dimensões do vídeo e clique em '''Inserir vídeo'''.
 +
 
 +
Por exemplo, o [http://youtube.com/watch?v=6p24PLtsFtU seguinte vídeo] do Youtube fornece o código (o que aparece numa caixa chamada ''Embed''):
 +
<pre>
 +
<object width="425" height="350"><param name="movie" value="http://www.youtube.com/v/6p24PLtsFtU"></param>
 +
<param name="wmode" value="transparent"></param>
 +
<embed src="http://www.youtube.com/v/6p24PLtsFtU" type="application/x-shockwave-flash"
 +
wmode="transparent" width="425" height="350"></embed></object>
 +
</pre>
 +
 
 +
Neste modo, não se pode simplesmente adicionar o [[:pt:URI|URI]] do vídeo.
 +
 
 +
'''Modo 2''' Para inserir um vídeo usando o [[:pt:URI|URI]] diretamente, digite o seguinte código na mensagem do seu blog:
  
 
<pre>{{video:URL DO VÍDEO}}</pre>
 
<pre>{{video:URL DO VÍDEO}}</pre>
  
Como exemplo, o URL http://www.youtube.com/watch?v=X4n90pO-kRk, um vídeo sobre [[:en:Web 2.0|web 2.0]] hospedado no Youtube, deve ser inserido assim para aparecer o vídeo:
+
Como exemplo, o URI http://www.youtube.com/watch?v=X4n90pO-kRk, um vídeo sobre [[:en:Web 2.0|web 2.0]] hospedado no Youtube, deve ser inserido assim para aparecer o vídeo:
  
 
<pre>{{video:http://www.youtube.com/watch?v=X4n90pO-kRk}}</pre>
 
<pre>{{video:http://www.youtube.com/watch?v=X4n90pO-kRk}}</pre>
 +
 +
Para definir a altura e largura do vídeo, adicone '''@@'''''largura'''''x'''''altura'' após o URI, assim:
 +
 +
<pre>{{video:http://www.youtube.com/watch?v=X4n90pO-kRk@@425x350}}</pre>
 +
 +
Um variante deste maneira é usar o botão com ícone de filminho no editor. Este botão coloca o código <nowiki>{{video: }}</nowiki> dentro da sua mensagem.
 +
 +
== Como inserir códigos de linguagens de programação ==
 +
 +
Nas suas mensagens de blog e comentários é possível colorir códigos das seguintes linguagens de programação: [[:en:HTML|HTML]], [[:en:CSS|CSS]], [[:en:PHP|PHP]], [[:en:JavaScript|JavaScript]], [[:en:C (programming language)|C]], [[:en:C++|C++]], [[:en:Java (programming language)|Java]], [[:en:Sql|SQL]] e [[:en:Python|Python]]. Para isso, use a tag code no seu texto:
 +
 +
<pre>[code=código]
 +
<O código do seu programa>
 +
[/code]</pre>
 +
 +
onde '''código''' deve ser o respectivo código da linguagem indicado na tabela abaixo:
 +
 +
{| class="wikitable"
 +
|-
 +
! Linguagem
 +
! Código
 +
|-
 +
| HTML
 +
| html
 +
|-
 +
| CSS
 +
| css
 +
|-
 +
| PHP
 +
| php
 +
|-
 +
| JavaScript
 +
| js
 +
|-
 +
| C/C++
 +
| cpp
 +
|-
 +
| Java
 +
| java
 +
|-
 +
| SQL
 +
| sql
 +
|-
 +
| Python
 +
| py
 +
|}
 +
 +
Por exemplo, para colorir um código em C fica assim:
 +
 +
<pre>[code=cpp]
 +
#include <stdio.h>
 +
 +
main()
 +
{
 +
  printf ("Hello World!\n");
 +
}
 +
[/code]</pre>
  
 
== Como inserir fórmulas matemáticas ==
 
== Como inserir fórmulas matemáticas ==
  
== Vídeos ==
+
É possível inserir fórmulas matemáticas nas suas mensagens do Stoa usando a sintaxe do [[:pt:Latex|LaTeX]]. Use a tag [tex] assim:
 +
 
 +
<pre>[tex]<código em LaTeX>[/tex]</pre>
 +
 
 +
== Vídeos de demonstração ==
  
 
Alguns vídeos explicando o uso do blog no Stoa.
 
Alguns vídeos explicando o uso do blog no Stoa.
  
* [http://www.youtube.com/watch?v=6p24PLtsFtU Como criar uma mensagem no seu blog]
+
* [http://www.youtube.com/watch?v=6p24PLtsFtU Como criar um post (= uma mensagem) no seu blog]
 +
* [http://blip.tv/file/1246762 Como inserir imagens]
 +
* [http://blip.tv/file/1256254 Como inserir links]
 +
* [http://blip.tv/file/1267218 Como embutir um vídeo de um site externo]
 +
 
 +
== Tópicos relacionados ==
 +
 
 +
* [http://stoa.usp.br/ajuda/forum/807.html Inserir Imagens]
 +
 
 +
== Ver também ==
 +
 
 +
* [[Ajuda:Blog (estatística)|Análises estatísticas dos blogs]]
 +
* [[Como publicar seus outros blogs no Stoa]]
 +
 
 +
[[Categoria:Ajuda]]
 +
[[Categoria:Blog]]

Edição atual tal como às 12h49min de 4 de março de 2009

1leftarrow.pngVoltar a Central de Ajuda

Conteúdo

 [ocultar

[editar] O que é um blog?

Um blog (abreviação de web log) é um site onde uma pessoa ou grupo de pessoas podem escrever mensagens sobre qualquer assunto que lhes interessar. As mensagens aparecerão em ordem cronológica reversa, aparecendo no topo do site as últimas novidades escritas. As mensagens podem ser comentadas por outras pessoas, acrescentando links, gerando discussões e até mesmo outras mensagens de blog.

O seu blog pode ter comentários sobre diversos assuntos, como as últimas notícias, política, reflexões pessoais, divulgação sobre sua área de estudos, pesquisa e trabalho ou até mesmo ser usado como um diário pessoal. É você quem decidirá como vai usar seu blog. Num blog pode-se combinar textos, imagens, vídeos e links para outras páginas web, possibilitanto a criação de mensagens em formatos bastante ricos.

[editar] Como criar uma mensagem

Menu toolbar
Botões do blog

Etapa 1: Clique em Nova mensagem, como indicado na figura acima. Você verá a página Escrever nova mensagem (figura abaixo). Dê um título para sua mensagem e preencha com algum conteúdo. Agora poderá escrever a sua mensagem. No link Configurações de conta, você pode configurar se quer ou não quer usar o editor visual. Veja abaixo como inserir imagens, vídeos, colorir linguagens de programação e escrever fórmulas matemáticas usando LaTeX.

Escrever nova mensagem.

Etapa 2: Depois de terminar de escrever seu conteúdo, você pode adicionar palavras-chave (tags) relacionadas a sua mensagem. Estas palavras-chave podem ser palavras individuais ou um conjunto delas - separadas por uma vírgula.

Palavras-chave relacionadas a sua mensagem.
Restrições de acesso.

Etapa 3: (opcional - o padrão é público) Como todas coisas na sua área de aprendizado, você pode controlar quem tem acesso para ler alguma mensagem do seu blog. Use as 'Restrições de Acesso' para fazer isto.

Nota: Você pode criar suas próprias restrições de acesso em Sua Rede - Controles de Acesso.

Etapa 4: (opcional) É possível escolher o tipo de licença que terá sua mensagem.

Etapa 5: (opcional) Se você quiser incluir um arquivo dentro de sua mensagem de blog use a opção 'Embutir um arquivo do seu armazenamento de arquivos no Stoa'. Imagens com menos de 400x400 pixels serão exibidas, todos outros arquivos aparecerão como links. Selecione o arquivo que quer incluir e clique em Adicionar.

Embutindo um arquivo do seu 'Repositáorio de arquivos'.

[editar] Como inserir imagens

Além do método descrito na Etapa 5 da última seção, você pode inserir uma imagem de modo mais sofisticado. Para isso é preciso ter a imagem hospedada em algum local (pode ser seu repositório de arquivos aqui no Stoa). Para descobrir o URL de uma imagem na Internet, no Firefox, clique com o botão direito do mouse sobre uma imagem e clique em Exibir imagem - no Internet Explorer ou outro navegador talvez seja um pouco diferente, mas semelhante.

Por exemplo, fazendo isso no logo Stoa, obteremos o seguinte URL (ele aparece na barra onde você digita os URL das páginas Web):

http://wiki.stoa.usp.br/images/d/db/Logo-stoa.gif

Você poderia obter esse URL simplesmente clicando com o botão direito do mouse, seguido de Copiar endereço da imagem.

Agora é só clicar no botão Tinymce image.gif, inserir a URL acima em Endereço (URL) da imagem e clicar em Inserir (para inserir o URL, digite control-v ou pressione o botão direito do mouse seguido de Colar). Quando você clica no botão para inserir imagens, outros campos (opcionais) aparecem:

  • Descrição da imagem: Pequena descrição sobre a imagem que aparece quando passamos o cursos do mouse por cima dela. Também conhecido como tooltip (em inglês).
  • Alinhamento: O texto pode aparecer em diversas posições em relação a imagem. Se você quiser que o texto aparece à direita da imagem, alinhe à esquerda. Se quiser um texto à esquerda, alinhe a imagem à direita e assim por diante.
  • Dimensões: Dimensões da figura em pixels, x X y, onde x é o comprimento e y a altura.
  • Borda: Distância mínima em pixels de tudo que aparece ao redor da imagem.
  • Espaço vertical: Distância mínima em pixels de tudo que aparece acima e abaixo da imagem.
  • Espaço horizontal: Distância mínima em pixels de tudo que aparece à esquerda e à direita.

É possível alterar as dimensões da figura usando o mouse. Após clicar em Inserir, arraste o vértice da imagem para aumentá-la ou diminuí-la proporcionalmente. Se quiser mudar o tamanho apenas da altura e do comprimento, arraste a borda horizontal e vertical, respectivamente.

[editar] Como inserir vídeos

É possível embutir vídeos nas mensagens do seu blog de sites como Youtube, Google Video e Dailymotion. Há dois modos:

Modo 1 Ao escrever sua mensagem, clique no botão Adicionar Vídeo Externo. Nessa caixa, coloque o código que Youtube et al. fornecem, escolha as dimensões do vídeo e clique em Inserir vídeo.

Por exemplo, o seguinte vídeo do Youtube fornece o código (o que aparece numa caixa chamada Embed):

<object width="425" height="350"><param name="movie" value="http://www.youtube.com/v/6p24PLtsFtU"></param>
<param name="wmode" value="transparent"></param>
<embed src="http://www.youtube.com/v/6p24PLtsFtU" type="application/x-shockwave-flash" 
wmode="transparent" width="425" height="350"></embed></object>

Neste modo, não se pode simplesmente adicionar o URI do vídeo.

Modo 2 Para inserir um vídeo usando o URI diretamente, digite o seguinte código na mensagem do seu blog:

{{video:URL DO VÍDEO}}

Como exemplo, o URI http://www.youtube.com/watch?v=X4n90pO-kRk, um vídeo sobre web 2.0 hospedado no Youtube, deve ser inserido assim para aparecer o vídeo:

{{video:http://www.youtube.com/watch?v=X4n90pO-kRk}}

Para definir a altura e largura do vídeo, adicone @@larguraxaltura após o URI, assim:

{{video:http://www.youtube.com/watch?v=X4n90pO-kRk@@425x350}}

Um variante deste maneira é usar o botão com ícone de filminho no editor. Este botão coloca o código {{video: }} dentro da sua mensagem.

[editar] Como inserir códigos de linguagens de programação

Nas suas mensagens de blog e comentários é possível colorir códigos das seguintes linguagens de programação: HTML, CSS, PHP, JavaScript, C, C++, Java, SQL e Python. Para isso, use a tag code no seu texto:

[code=código]
<O código do seu programa>
[/code]

onde código deve ser o respectivo código da linguagem indicado na tabela abaixo:

Linguagem Código
HTML html
CSS css
PHP php
JavaScript js
C/C++ cpp
Java java
SQL sql
Python py

Por exemplo, para colorir um código em C fica assim:

[code=cpp]
#include <stdio.h>

main()
{
   printf ("Hello World!\n");
}
[/code]

[editar] Como inserir fórmulas matemáticas

É possível inserir fórmulas matemáticas nas suas mensagens do Stoa usando a sintaxe do LaTeX. Use a tag [tex] assim:

[tex]<código em LaTeX>[/tex]

[editar] Vídeos de demonstração

Alguns vídeos explicando o uso do blog no Stoa.

[editar] Tópicos relacionados

[editar] Ver também

Ferramentas pessoais
Espaços nominais

Variantes
Ações
Navegação
Ferramentas