Agenda 3

Anexando arquivos

É como incluir um arquivo num e-mail!
Clique no link Attach
Clique em Browse para procurar o arquivo
Vá em Upload file
Caso o arquivo seja imagem, marque a caixa link
Na verdade, estamos revendo o que já vimos anteriormente.

Colocando foto ou imagem

Bem abaixo, ao lado de edit, há um link (attach).
Topic FulanoBeltrano . { Edit | Attach | Ref-By | Printable | Diffs | r1.15 | > | r1.14 | > | r1.13 | More }
Ao clicar nele, abre-se uma janela onde você deverá:
Procurar a sua foto.
Marcar o item link.
E clicar em Upload file

Modificando o lugar da imagem

Você pode deixar a imagem tanto mais abaixo quanto mais acima.
Basta ir para a caixa de comandos, clicando no link Edit e recortar os comandos da figura, colando-os onde você desejar.
Faça o teste e observe os resultados!

Centralizando imagens

Após o procedimento para inserir a imagem, devemos entrar na caixa de comandos editar.
Lá está escrito todo o comando que define a imagem.
Exemplo: <img src="%ATTACHURLPATH%/Figura1.gif" alt="Figura1.gif" width="113" height="111" />
À esquerda do comando da imagem, digite <center> e à direita, digite <center />
Teremos tudo escrito da seguinte forma:
<center><img src="%ATTACHURLPATH%/Figura1.gif" alt="Figura1.gif" width="113" height="111" /><center />

Alinhando palavras ou imagens à esquerda ou à direita

Trata-se do mesmo procedimento usado para centralizar palavras ou imagens.
Apenas muda o código que você vai pôr antes e depois daquilo que você quer alinhar.
Para a direita o código é:
<div align=“right"> <div align=“right“ />
E para a esquerda:
<div align="left"> <div align="left“ />

O nome que fica acima da imagem é opcional. Você pode tirá-lo!

Quando você insere uma figura, o nome dela fica escrito logo acima.
Se não o quiser, basta ir na caixa de comandos editar.
Acima do comando que define a imagem, estará escrito o nome que vai logo acima dela. Basta então deletá-lo.

Veja a seguir.

Espaçando palavras

Como você já deve ter percebido, o código html pode ser muito útil na edição páginas no TWiki.
O seguinte código define o espaço:  
Basta digitar quantas vezes achar necessário   antes da palavra ou do comando da imagem.

Recuo de texto (movendo-o para a direita)

Ponha o texto entre os seguintes comandos: <blockquote> </blockquote>
Quanto mais recuo você quiser, mais <blockquote> antes da palavra ou frase você põe.
Veja os exemplos!

Desfazendo o recuo

Para desfazer o recuo, vá em editar e apague os comandos
<blockquote> </blockquote>

Inserindo tabelas:

Faremos as modificações necessárias na janela pertencente ao menu editar
Na janela principal, clique em editar, então:
Topic ... . { Edit | Attach | Ref-By | Printable | Diffs | r1.8 | > | r1.7 | > | r1.6 | More }
Ao clicar em Edit, abrirá a janela do comando de edição.
Dentro da caixa, estão todos os comandos, todas as modificações que você está fazendo na sua página.

Na caixa de comandos que abriu, vamos digitar o seguinte:

Observações

É importante que os parágrafos não sejam desprezados.
Outra coisa que não pode ser esquecida é que deve haver parágrafos nas linhas entre comandos diferentes.
Como trata-se de uma mesma tabela, não espace suas linhas, mas se você quisesse duas tabelas diferentes, deveria haver parágrafo entre as linhas que executam os seus comandos.

Vamos fazer uma próxima tabela com uma figura inserida

Em primeiro lugar, vamos salvar uma figura qualquer e atá-la*. Como isso já fora ensinado neste tutorial, revise os primeiros slides (caso não se lembre).
Após, vamos até a janela do menu editar.

*Atar é a tradução do verbo attach (inglês).

Inserindo a tabela na figura
No TWiki, ao invés de inserir a figura na tabela, você vai inserir a tabela na figura!
Como???
Vamos até a nossa janela de comandos (edit) e, exatamente no local estão os comandos da nossa figura, vamos inserir a tabela.

O segredo

Note que o segredo é primeiro inserir uma figura “atando-a” para depois ir ao seu comando na janela editar e inserir a tabela por fora dela, da forma como foi mostrado.

Destacando algo numa tabela

Se eu quiser uma tabela do tipo
Basta que eu siga os procedimentos que serão ditados no slide posterior

Digite na caixa de comandos editar o seguinte:

Veja como ficou!

Criando um link direto

Se você quiser criar um link para uma página externa, basta pôr o endereço da página na caixa de comandos editar.
Já se quiser um link diretamente para o seu e-mail (sem entrar em tópicos), basta digitar na caixa de comandos editar o seguinte:
mailto: fulano@webmail.com

Negrito

Para escrever algo em negrito digite a palavra ou frase entre asteriscos.
Exemplo: vá em Edit e digite o seguinte: *Tentativa 1*
Preview Changes/Save Changes

Itálico

Para escrever algo em itálico digite a palavra ou frase entre undercores.
Exemplo: vá em Edit e digite o seguinte: _Tentativa 2_
Preview Changes/Save Changes

Negrito e itálico

Para escrever algo em negrito e itálico digite a palavra ou frase entre undercores dobro.
Exemplo: vá em Edit e digite o seguinte: __Tentativa 3__
Preview Changes/Save Changes

Aumentando a fonte:

Podemos aumentar a fonte em três tamanhos diferentes usando o código html. Faça o seguinte teste no seu twiki:
Digite:
<big> casa </big>
<big> <big> casa </big>
<big> <big> <big> casa </big>

Podemos diminuir a fonte em três tamanhos diferentes usando o código html. Faça o seguinte teste no seu twiki:
Digite:
<small> casa </small>
<small> <small> casa </small>
<small> <small> <small> casa </small>

No código html, temos combinações de letras e números que fazem referência a diferentes tonalidades de cores.
Basta pôr o seguinte código precedendo a palavra: <font color="#6600cc">*
*A combinação de letras e números muda de acordo com a cor que você quiser.
Ao final da palavra, ou frase que você quiser ter em cor diferente feche o código da seguinte forma: </font>

Se queremos um parágrafo, não é necessário que falhemos uma linha no comando editar. Há outra forma!
Digite na caixa de comandos o seguinte: Caixa %BR% de %BR% comandos.
Preview changes/Save changes.
A função de %BR% é a quebra de linha.

Se você quiser um parágrafo, não é necessário que deixe um espaço entre duas linhas na caixa de comandos editar.
Basta que você ponha uma determinada frase, ao seu final digite <P> e escreva a outra frase (que poderá ser digitada, inclusive, na mesma linha).
Mostraremos um exemplo para que fique mais claro.

Digamos que eu queira transformar uma determinada palavra em título!
---++ Sushi Sushi
---+++ Maguro Maguro
Preview changes/Save changes
Veja o resultado!
Obs.: é importante que os símbolos que tornam a palavra um título sejam postos sem espaçamento entre a janela e eles.
Faça exatamente conforme as demonstrações que virão a seguir.

Ponha os seguintes códigos:
<h1> </h1>         <h4> </h4>
<h2> </h2>         <h5> </h5>
<h3> </h3>         <h6> </h6>
Cada um representa um tamanho de título (a ordem vai do maior ao menor).
Ponha a palavra ou frase entre um deles para fazer o teste.

Fonte Fixa: Palavras são mostradas em fonte fixa quando colocadas entre = sinais de igual. =Fonte fixa= Fonte fixa
Fonte Fixa Negritada: Palavras são mostradas em fonte fixa negritada quando colocada entre == sinais de igual duplos. ==Fonte fixa negritada== Fonte fixa negritada

Listar Itens: Três espaços, um asterisco e um espaço    * item bolota     • item bolota
Listas Aninhadas de Itens: Seis, nove, ... Espaços, asterisco e um espaço     * Coisa aninhada     ° Coisa aninhada
Lista Ordenada: Três espaços e um número.       1Sushi 2Dim Sum
1. Sushi
2. Dim Sum

Lista de Definição: Três espaços, o termo, dois pontos, um espaço, seguido pela definição. Nota: Termos com espaços não são suportados. Caso você tenha um termo com mais de uma palavra, separe-as por traços ou com a entidade   non-breaking-space.     Sushi: Japan Dim Sum: S.F.     Sushi
Japan
Dim Sum
S.F.



O QUE PODEMOS FAZER NO TWIKI?

	Anexando arquivos É como incluir um arquivo num e-mail! Clique no link Attach Clique em Browse para procurar o arquivo Vá em Upload file Caso o arquivo seja imagem, marque a caixa link Na verdade, estamos revendo o que já vimos anteriormente. Colocando foto ou imagem Bem abaixo, ao lado de edit, há um link (attach). Topic FulanoBeltrano . { Edit \| Attach \| Ref-By \| Printable \| Diffs \| r1.15 \| > \| r1.14 \| > \| r1.13 \| More } Ao clicar nele, abre-se uma janela onde você deverá: Procurar a sua foto. Marcar o item link. E clicar em Upload file Modificando o lugar da imagem Você pode deixar a imagem tanto mais abaixo quanto mais acima. Basta ir para a caixa de comandos, clicando no link Edit e recortar os comandos da figura, colando-os onde você desejar. Faça o teste e observe os resultados! Centralizando imagens Após o procedimento para inserir a imagem, devemos entrar na caixa de comandos editar. Lá está escrito todo o comando que define a imagem. Exemplo: <img src="%ATTACHURLPATH%/Figura1.gif" alt="Figura1.gif" width="113" height="111" /> À esquerda do comando da imagem, digite <center> e à direita, digite <center /> Teremos tudo escrito da seguinte forma: <center><img src="%ATTACHURLPATH%/Figura1.gif" alt="Figura1.gif" width="113" height="111" /><center /> Alinhando palavras ou imagens à esquerda ou à direita Trata-se do mesmo procedimento usado para centralizar palavras ou imagens. Apenas muda o código que você vai pôr antes e depois daquilo que você quer alinhar. Para a direita o código é: <div align=“right"> <div align=“right“ /> E para a esquerda: <div align="left"> <div align="left“ /> O nome que fica acima da imagem é opcional. Você pode tirá-lo! Quando você insere uma figura, o nome dela fica escrito logo acima. Se não o quiser, basta ir na caixa de comandos editar. Acima do comando que define a imagem, estará escrito o nome que vai logo acima dela. Basta então deletá-lo. Veja a seguir. Espaçando palavras Como você já deve ter percebido, o código html pode ser muito útil na edição páginas no TWiki. O seguinte código define o espaço:   Basta digitar quantas vezes achar necessário   antes da palavra ou do comando da imagem. Recuo de texto (movendo-o para a direita) Ponha o texto entre os seguintes comandos: <blockquote> </blockquote> Quanto mais recuo você quiser, mais <blockquote> antes da palavra ou frase você põe. Veja os exemplos! Desfazendo o recuo Para desfazer o recuo, vá em editar e apague os comandos <blockquote> </blockquote> Inserindo tabelas: Faremos as modificações necessárias na janela pertencente ao menu editar Na janela principal, clique em editar, então: Topic ... . { Edit \| Attach \| Ref-By \| Printable \| Diffs \| r1.8 \| > \| r1.7 \| > \| r1.6 \| More } Ao clicar em Edit, abrirá a janela do comando de edição. Dentro da caixa, estão todos os comandos, todas as modificações que você está fazendo na sua página. Na caixa de comandos que abriu, vamos digitar o seguinte: \| Tabela \| Teste \| \| Teste \| Tabela \| Clique em: Preview E após, clique em: Save changes Observações É importante que os parágrafos não sejam desprezados. Outra coisa que não pode ser esquecida é que deve haver parágrafos nas linhas entre comandos diferentes. Como trata-se de uma mesma tabela, não espace suas linhas, mas se você quisesse duas tabelas diferentes, deveria haver parágrafo entre as linhas que executam os seus comandos. Vamos fazer uma próxima tabela com uma figura inserida Em primeiro lugar, vamos salvar uma figura qualquer e atá-la. Como isso já fora ensinado neste tutorial, revise os primeiros slides (caso não se lembre). Após, vamos até a janela do menu editar. Atar é a tradução do verbo attach (inglês). Inserindo a tabela na figura No TWiki, ao invés de inserir a figura na tabela, você vai inserir a tabela na figura! Como??? Vamos até a nossa janela de comandos (edit) e, exatamente no local estão os comandos da nossa figura, vamos inserir a tabela. O segredo Note que o segredo é primeiro inserir uma figura “atando-a” para depois ir ao seu comando na janela editar e inserir a tabela por fora dela, da forma como foi mostrado. Destacando algo numa tabela Se eu quiser uma tabela do tipo Basta que eu siga os procedimentos que serão ditados no slide posterior Digite na caixa de comandos editar o seguinte: \| Teste \| Teste \| \| A1 \| A2 \| Preview changes/Save changes Veja como ficou! Criando um link direto Se você quiser criar um link para uma página externa, basta pôr o endereço da página na caixa de comandos editar. Já se quiser um link diretamente para o seu e-mail (sem entrar em tópicos), basta digitar na caixa de comandos editar o seguinte: mailto: fulano@webmail.com Negrito Para escrever algo em negrito digite a palavra ou frase entre asteriscos. Exemplo: vá em Edit e digite o seguinte: Tentativa 1 Preview Changes/Save Changes Itálico Para escrever algo em itálico digite a palavra ou frase entre undercores. Exemplo: vá em Edit e digite o seguinte: _Tentativa 2_ Preview Changes/Save Changes Negrito e itálico Para escrever algo em negrito e itálico digite a palavra ou frase entre undercores dobro. Exemplo: vá em Edit e digite o seguinte: __Tentativa 3__ Preview Changes/Save Changes Aumentando a fonte: Podemos aumentar a fonte em três tamanhos diferentes usando o código html. Faça o seguinte teste no seu twiki: Digite: <big> casa </big> <big> <big> casa </big> <big> <big> <big> casa </big> Diminuindo a fonte: Podemos diminuir a fonte em três tamanhos diferentes usando o código html. Faça o seguinte teste no seu twiki: Digite: <small> casa </small> <small> <small> casa </small> <small> <small> <small> casa </small> Mudando a cor da fonte: Digite o seguinte no comando editar (edit): Para escrever o texto em azul: %BLUE% Palavra %ENDCOLOR% Veja no quadro seguinte que existem outras cores que podem usadas. Outras cores Vermelho RED Amarelo YELLOW Branco WHITE Verde GREEN Laranja ORANGE Rosa PINK Preto BLACK E outras... Dica Procure em dicionários Português-inglês o nome da cor que você deseja pôr e faça o teste! Veja alguns exemplos: Outra forma de mudar a cor da fonte No código html, temos combinações de letras e números que fazem referência a diferentes tonalidades de cores. Basta pôr o seguinte código precedendo a palavra: <font color="#6600cc">* A combinação de letras e números muda de acordo com a cor que você quiser. Ao final da palavra, ou frase que você quiser ter em cor diferente feche o código da seguinte forma: </font> Quebra de linha* Se queremos um parágrafo, não é necessário que falhemos uma linha no comando editar. Há outra forma! Digite na caixa de comandos o seguinte: Caixa %BR% de %BR% comandos. Preview changes/Save changes. A função de %BR% é a quebra de linha. Parágrafo Se você quiser um parágrafo, não é necessário que deixe um espaço entre duas linhas na caixa de comandos editar. Basta que você ponha uma determinada frase, ao seu final digite <P> e escreva a outra frase (que poderá ser digitada, inclusive, na mesma linha). Mostraremos um exemplo para que fique mais claro. Títulos Digamos que eu queira transformar uma determinada palavra em título! ---++ Sushi Sushi ---+++ Maguro Maguro Preview changes/Save changes Veja o resultado! Obs.: é importante que os símbolos que tornam a palavra um título sejam postos sem espaçamento entre a janela e eles. Faça exatamente conforme as demonstrações que virão a seguir. Outra forma de transformar palavras ou frases em títulos Ponha os seguintes códigos: <h1> </h1> <h4> </h4> <h2> </h2> <h5> </h5> <h3> </h3> <h6> </h6> Cada um representa um tamanho de título (a ordem vai do maior ao menor). Ponha a palavra ou frase entre um deles para fazer o teste. Fonte fixa e fonte fixa negritada Fonte Fixa: Palavras são mostradas em fonte fixa quando colocadas entre = sinais de igual. =Fonte fixa= Fonte fixa Fonte Fixa Negritada: Palavras são mostradas em fonte fixa negritada quando colocada entre == sinais de igual duplos. ==Fonte fixa negritada== Fonte fixa negritada Listando itens Listar Itens: Três espaços, um asterisco e um espaço * item bolota • item bolota Listas Aninhadas de Itens: Seis, nove, ... Espaços, asterisco e um espaço * Coisa aninhada ° Coisa aninhada Lista Ordenada: Três espaços e um número. 1Sushi 2Dim Sum 1. Sushi 2. Dim Sum Lista de Definição: Três espaços, o termo, dois pontos, um espaço, seguido pela definição. Nota: Termos com espaços não são suportados. Caso você tenha um termo com mais de uma palavra, separe-as por traços ou com a entidade   non-breaking-space. Sushi: Japan Dim Sum: S.F. Sushi Japan Dim Sum S.F. Esconda o que quiser Ao criarmos a nossa página no Twiki temos já visíveis alguns dados pessoais, tais como e-mail, companhia pela qual trabalhamos... Encontram-se também visíveis algumas preferências pessoais em relação à página e alguns tópicos relatados. Podemos escondê-los de uma forma muito simples: basta usar o comentário do HTML (<!-- aqui vai tudo o que você quiser esconder -->). Podemos esconder tudo o que escrevemos na caixa de comandos e, também arquivos que anexamos. Sendo assim, pessoas que não têm autorização para mexer na sua página não poderão ver o que você determinar que não deve ser visto. A flecha aponta para o local onde ficava o que escondemos

	Material de apoio: Bibliografia e sites que contemplem essa temática.
Voltar		Avançar
	Enfoque1 \| Agenda1 \| Agenda2 \| Agenda3 \| Agenda4