(transformar 16) capacitação desenvolvimento de website 1.1 (mão na massa)

73
Minha ONG na Web Vamos criar um site!

Upload: inkconteudos

Post on 16-Jan-2017

31 views

Category:

Government & Nonprofit


1 download

TRANSCRIPT

Minha ONG na Web

Vamos criar um site!

20h às 21h

Criação da conta

Criação de páginas

Cadastro das informações

Páginas nos menus

Escolha do tema

21h às 22h

●Inclusão da logomarca●Criação do Blog●Incluindo Widgets

Wordpress.comUma maneira prática e grátis de ter um site online agora.

Pago domínio? Pago hospedagem? Como fica minha URL?

Não Não seusite.wordpress.com

Vejamos um exemplo de como vai ficar

minhaong.wordpress.com

Como criar uma conta no wordpress.com?

Clique em CRIAR SITE

Como criar uma conta no wordpress.com?

Clique em Outro

Como criar uma conta no wordpress.com?

Digite: OrganizaçãoSem Fins Lucrativos

Como criar uma conta no wordpress.com?

Escolha o layout: Vamos escolher o do meio. Página de boasvindas ao meu site.

Como criar uma conta no wordpress.com?

Role a página parabaixo e clique em PULAR PORENQUANTO

Como criar uma conta no wordpress.com?

Digite o nome quevocê deseja paraseu site Escolha a opçãogratuita!

Como criar uma conta no wordpress.com?

Selecione o planodesejadoEscolha a opçãogratuita!

Como criar uma conta no wordpress.com?

Preencha com seus dados.Esses serão seusLOGIN e SENHApara administrarseu site

Como criar uma conta no wordpress.com?

Estamos quase lá!Clique em Continuar

Como criar uma conta no wordpress.com?

Verifique seu emaile confirme o cadastro clicando em confirmar já

Como criar uma conta no wordpress.com?

Depois de confirmado,vamos criar o conteúdo do site. Clique no meu páginas

Editando as páginas

Edite as páginas existentes para incluir Seus dados

Editando as páginas

Nesta tela são exibidastodas as páginasexistentes no seu site Clique em adicionar

Editando as páginas

Clique nos três pontos,Editar

Editando as páginas

Selecione o texto quedeseja remover, ePreencha com seusdados

Editando as páginas

Para ver o resultado,Clique em VISUALIZAR

Editando as páginas

É possível visualizarnos formatos como celular, pc e tablet

Cadastrando Missão, Visão e Valores

Vamos criar mais páginas.Após salvar / atualizarClique em voltar

Depois clique em adicionar página

Cadastrando Missão, Visão e Valores

Após publicar, repita o processopara inserir quantaspáginas forem necessárias.

Adicionando as páginas ao menu

Clique em MENUS

Adicionando as páginas ao menu

Clique em no sinal de+, ao lado de um itemde menu e escolhase deseja adicionarum item acima, abaixoou item filho.

Adicionando as páginas ao menu

Serão exibidas asopções de páginaspara adicionar.Escolha a nova páginae clique em Adicionar item

Pronto! Página adicionada!

Para finalizar, clique em SALVAR.

Para ver o resultado, clique em título do site

Pronto! Página adicionada!

Agora podemosver um subitem nomenu SOBRE

Agora vamos mudar a cara do nosso site

Chamamos de Tema o padrão visualutilizado nos sites.

Qual o tema estouusando agora?

Como mudar?

Agora vamos mudar a cara do nosso site

Para descobrir qualtema estamos usandoe quais os temasdisponíveis clique emtemas, no menu

Agora vamos mudar a cara do nosso site

Temos opções detemas pagos e gratuitos.Escolha Gratuitos elocalize o temaGateway

Agora vamos mudar a cara do nosso site

Clique em ... eAtivar

Agora vamos mudar a cara do nosso site

Para visualizar, botão direito emmeu site e abrir emnova aba.

Dessa maneira, mantemos uma aba para edição e outra para visualização

Atenção!

Sempre quando mudamos o tema, é importante conferir se os menus estão configurados corretamente.Caso não estejam, repita o processo de adicionar páginas aos menus

Adicionando uma logo personalizada

A sua ONG tem uma logo?

Adicionando uma logo personalizada

Localize o menu Temas, e clique no botãoPersonalizar

Adicionando uma logo personalizada

Aqui é possível personalizar ainda maisseu site.

Clique em identidade do site

Adicionando uma logo personalizada

Digite o título de seu site,uma breve descrição sobre a atuação dela.

Após isso, Clique em Adicionar logo

Adicionando uma logo personalizada

Localize o arquivono seu computador

Adicionando uma logo personalizada

Clique em Definir logo

Adicionando uma logo personalizada

Clique em Salvar e publicare visualize seu site

Adicionando uma logo personalizada

Pronto!Logo adicionada

Vamos criar um blog?

A diferença entre blog e site é que o blog é mais dinâmico.

Vamos criar um blog?

Primeiro, vamos criar uma página, como já fizemos anteriormente.Esta página deverá se chamar “Blog”Depois de publicar, vamos adicioná-la ao menu.Em caso de dúvidas, reveja os slides 24 à 28.

Vamos criar um blog?

Pronto!Já temos a página que vaiabrigar nossos posts

Configurando a exibição do blogClique em meu site,temas, personalizar,página inicial estática

Selecione qual a páginainicial do seu site

Selecione qual páginaabriga os posts do blog

Configurando a exibição do blogClique em meu site,temas, personalizar,página inicial estática

Selecione qual a páginainicial do seu site

Selecione qual páginaabriga os posts do blog

Configurando a exibição do blogPronto!Agora temos uma páginainicial para o site e uma outra para o blog.

Vamos postar no blog?

Criando um post para o blogCriar um post para o blogé muito parecido comcriar uma página. Veja:

Clique em meu site,posts de blog

Criando um post para o blogA lista dos posts seráexibida na tela.Agora podemos editar,remover ou criar mais posts

Vamos criar um novo

Criando um post para o blogInsira o título, o textoe observe na coluna daesquerda, temos a opçãode usar uma imagemdestacada. Esta, será aimagem do seu post

Criando um post para o blogInsira o título, o textoe observe na coluna daesquerda, temos a opçãode usar uma imagemdestacada. Esta, será aimagem do seu post

Criando um post para o blogApós preencher todos oscampos, e incluir umaimagem, clique em publicar

Criando um post para o blogPronto!Temos um novo postem nosso blog.

Incluindo Widgets

Um widget é um bloco de conteúdo que podemos inserir em nosso site.

Veja os exemplos a seguir:

Incluindo Widgets

Widget 01

Widget 02

Widget 03

Incluindo Widgets

Widget 04 Widget 05Widget 06

Incluindo Widgets

Existem vários tipos de widgets. Como vimos, eles podem ser desde um simples texto, até uma lista de links, ou até mesmo um espaço mostrando suas redes sociais

Vamos ver como adicionar…Clique em meu site, temas, personalizar

Incluindo WidgetsClique em widgets

Incluindo WidgetsLateral, footer 1,footer 2 e footer 3são as posiçõesda tela onde o widget poderáser inserido

Incluindo Widgets

Lateral

Incluindo Widgets

Footer 1 Footer 2Footer 3

Incluindo Widgets

Vamos incluir um texto contendo um link para a página de doação. Vamos usar como exemplo uma página do doare.org

Vamos posicionar na lateral

Incluindo WidgetsVamos em:meu site, temas, personalizar,widgets,lateral

Incluindo WidgetsClique emAdicionar um widget

Incluindo WidgetsEscolha o tipoTexto

Incluindo WidgetsDigite o seuTexto

Incluindo Widgets

Agora vamos incluir um trecho de código que vai criar o link. Observe:

<a href=”http://www.meusite.com.br”>Este é o link</a>

Este é o link

código

resultado

Incluindo WidgetsDigite o seuTexto com o linke clique emSalvar e publicar

Incluindo WidgetsPronto!Link criado com Sucesso!

Leituras recomendadashttps://www.youtube.com/watch?v=2xr9P4QNG08

http://www.escolawp.com/

Avaliação

Obrigad@Carine e Ramon