You are on page 1of 37

Manual do Google Sites: um guia para criao de pginas e sites colaborativos para web

Autores: Janeide Albuquerque Cavalcanti Sheylla Maria onato da Cunha !ermana Correia de "liveira

Maro#$%&&

Sumrio
& 'ntroduo(((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((( ) $ 'niciando as con*igura+es do site((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((( , $(& -ela de .oas vindas(((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((( , $($ ados essenciais(((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((( , $() A pgina inicial((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((( / ) 0ditando a pgina(((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((( 1 )(& Menu 'nserir(((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((( 2 )(&(& 'nserindo elementos simples ((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((3 )(&(&(& 'nserindo uma imagem (((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((3 )(&(&($ 'nserindo um 4in5(((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((( 6 )(&(&()( 'nserindo outros elementos importantes(((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((&% )(&($ 'nserindo Servios do !oogle((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((&& )(&($ 'nserindo !adgets(((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((( &$ )($ " menu 7ormatar(((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((( &, )() " menu -abela(((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((( &, )(, " menu 4ayout(((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((( &/ , Adicionando novas pginas((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((( &1 ,(& Adicionando uma pgina 8eb Simples(((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((&2 ,($ Adicionando uma pgina do tipo .log(((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((( &2 ,() Adicionando uma pgina que Cont9m Arquivos((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((&3 ,(, Adicionando uma pgina do tipo 4ista((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((( $& / Con*igurando o site(((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((( $, /(& Acesso ou compartilhamento com outros(((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((($, /($ Con*igurando a apar:ncia((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((( $1 /($(& Mudando o layout do site((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((( $1 /($($ Alterando o Cabealho((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((( $3 /($() Con*igurando a .arra lateral(((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((( $3 /($(, Alterando as cores e *ontes((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((( )% /($(/ Alterar o tema do site((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((( )& /() "utros a;ustes de con*igurao((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((( )& 1 Caracter<sticas especiais((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((( )) 1(& =ma busca dentro do site(((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((( )) 1($ Site como .log(((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((( )) 1() Site como 8i5i(((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((( )) 1(, Arma>enagem de arquivos sempre atuali>ados(((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((()) 1(/ 'n*ormao imediata de qualquer mudana aos colaboradores(((((((((((((((((((((((((((((((((((((((((((((((((()) 1(1 'ntegrao com ?!oogle Analytics@ para mostrar estat<sticas de visitas((((((((((((((((((((((((((((((((((((((), 1(2 Aermite aneBar arquivos nas pginas((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((( ), 1(3 Aodemos *a>er comentrios(((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((( ), 1(6 Subpginas dependentes de outra pgina(((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((()/ 1(&% Algumas utilidades ao *im da pgina((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((( )/ 2 Considera+es 7inais(((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((( )1 Ce*er:ncias((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((( )2

1 Introduo
" que 9 o !oogle SitesD " !oogle sites 9 um aplicativo onEline que torna *cil criar um site da webF dispensando conhecimentos de programao( Com o !oogle SitesF 9 poss<vel coletar rapidamente diversas in*orma+es em um sG lugar E inclusive v<deosF agendasF apresenta+esF aneBos e teBto E e compartilhElas com *acilidade para visuali>ao ou edio com um grupo pequenoF com toda a organi>ao ou com o mundo( Comece a usar o !oogle Sites em http:##sites(google(com#site( Arincipais caracter<sticas do produto: Aersonali>ar a inter*ace do seu site para que ela tenha a cara do seu grupo ou pro;etoH Criar uma nova subpgina com um cliqueH 0scolher um tipo de pgina em uma lista que continua crescendo: pgina da webF anInciosF pgina de arquivosH Centrali>ar as in*orma+es compartilhadas: incorporar conteIdo potenciali>ado Jv<deoF documentos do Google DocsF planilhasF apresenta+esF apresenta+es de slides de *otos do Picasa, gadgets do iGoogleK em qualquer pgina e *a>er upload de aneBosH !erenciar as con*igura+es de permiss+es para manter seu site privado ou totalmente editvel e visuali>velF como dese;arH Aesquisar seu conteIdo do !oogle Sites com tecnologia de pesquisa do !oogleH esenvolverF hospedar e publicar sites nas nuvens& e gratis(

0m Iltima anliseF no *altam caracter<sticas para ser consagrada como uma boa alternativa de web design gratuita( AretendemosF com este documentoF apresentar um guia de uso de ?Sites do !oogle@ para construir sites para web( Aor meio de capturas de tela eBplicamos todos os menus encontradosF adicionando em alguns casosF algumas ideias e eBemplos reais( 0speramos que possamos ser de utilidade a muitas pessoas( A equipe do pro;eto 'n*oinclusoF ensino e insero social#M0C#AC"0L- JeEmail: in*oinclusaoMgmail(comK
& " termo NCloud ComputingNF ou Ncomputao em nuvemN( A NnuvemN da met*oraF 9 um con;unto de servidoresF que rodam os mais diversos servios e so conectados aos clientes atrav9s da 'nternet( A id9ia central por trs do Cloud Computing 9 *ornecer servios atrav9s da 'nternetF permitindo que voc: acesse arquivosF documentosF eEmailF rode aplicativos e assim por dianteF a partir de qualquer AC conectado O web( ois bons eBemplos so o !mail e o !oogle ocsF dois servios cu;os dados so arma>enados nos datacenters do !oogle e voc: simplesmente acessa as in*orma+es utili>ando o navegadorF se;a atrav9s do prGprio ACF ou de um smartphone ou qualquer outro dispositivo conectado O 'nternet(

2 Iniciando as configuraes do site 2.1 Tela de Boas vindas


" acesso a esse servio est no lin5: http:##sites(google(com Aara utili>ar esse servio devemos ter uma conta no !oogleF pois 9 solicitado a autenticao com usurio e senha( Caso no se tenha 9 preciso criEla( Aara criar um novo siteF primeiro clique na caiBa NCriar novo siteN apGs ter *eito login na sua conta(

Voc receber orientao durante o processo de criao do seu site. Escolher o seu nome tambm ir auto-popular o URL2 do seu site. Voc tem a opo de alterar o URL do seu site caso deseje.

=ma ve> autenticadoF clicar no boto:

2.2 Dados essenciais


ArimeiramenteF escolhemos o modelo do site clicando em ?Modelo em branco@ ouF se dese;ar escolher entre os modelos de site ; publicadosF clique no lin5 ?Pavegue na galeria para ver outros modelos@(

0m seguidaF devemos preencher um *ormulrio com os dados do siteF como eBemplo:


2 UR Jde Uniform Resource LocatorKF em portugu:s Localizador de Recursos UniversalF 9 o endereo de um recurso Jum arquivo F uma impressora etc(KF dispon<vel em uma redeH se;a a 'nternet F ou uma rede corporativaF uma intranet =ma =C4 tem a seguinte estrutura: protocolo:##mquina#caminho#recurso(

1. 0screvemos o nome que ser a denominao do site: 'n*oincluso =7C! . 0ste nome aparecer no quadro superior de toda web e poder ser modi*icadoF como veremos adiante( 2. 0screvemos o nome que queremos que contenha a =C4F ou de locali>aoF para busca do site( Assim *eitoF o endereo da web ser: http:##sites(google(com#site#in*oinclusaou*cg A seguirF veremos algumas op+es para selecionarF entretanto para acelerar a criaoF pre*erimos deiBElas por padro como estoF e mais adiante con*igurElas con*orme dese;ado( 0scolha do -ema Mais op+es: escrio do site Compartilhamento ConteIdo Adulto Jesta opo dever ser escolhida caso tenha conteIdo de seBo ou imagens imprGprias para menoresK( Aor IltimoF observar o cGdigo que aparece e clicar em !riar site(

2." # $gina inicial


" site criado depois do registro inicial ter a seguinte apar:ncia:

A estrutura que aparece enquanto no *or mudada 9 a seguinte: %uadro Su$erior& Pome do site: 'n*oincluso =7C!H %uadro ateral& Menu de navegaoH %uadro 'rinci$al& Agina Arincipal Jagora va>ioK( 0sta 9 a pgina denominada ?'nicial@F porque 9 a primeira que aparecer ao entrar na web( aremos ateno especial em seu desenho e conteIdoF devido O importQncia que temF ; que pode ser o ponto de entrada e de partida de todo o site( Sero colocados al9m das boas vindas ou apresentaoF aqueles conteIdos que podem ser de maior utilidade ao visitante quando acessEla( Aara construir esta e qualquer outra pgina que *or adicionadaF sero usadas *erramentas de edio que aparecem quando se clica no boto (ditar 'ginaF na parte superior Aara acrescentar outras con*igura+esF clicar no boto )ais #es.

-udo isso trataremos com detalhes mais adiante(

" (ditando a $gina


Aara issoF clique no boto (ditar 'gina. A primeira coisa que aparece 9 uma barra de edio rpidaF com a qual podemos pRr: o tipo de letra e o taman o, o formato e a cor da fonte, lin!s, numera"#o, marcadores, recuos e $ustifica"%es, retirar a formata"#o ou editar o &'(L Jse conhecer essa linguagemK.

Comeamos escrevendo algum teBto como saudao ou apresentaoF selecionamos com o mouse e lhe aplicamos alguma *ormatao( " resultado poderia ser como este:

-amb9m tem , menus eBpans<veis para incluir outros elementosF e possibilidades de

con*iguraoF algumas ; presentes na barra anterior(

)enu Inserir& Aara inserir qualquer tipo de elementoH )enu *ormatar& Muda tamanhos e p+e alguns *ormatos especiais de teBtoH )enu Ta+ela& Aara inserir tabelasH )enu a,out& Aara escolher entre pginas com &F $ ou ) colunas e inserir barras laterais( )ual*uer mudan"a *ue for feita deve+se clicar no bot#o Salvar, localizado no canto superior direito da p,gina. Se n#o dese$ar salvar as altera"%es feitas na p,gina, basta clicar no bot#o Cancelar. Se;amos a seguir todas as possibilidades destes menus(

".1 )enu Inserir


Aossui muitos elementos e so agrupados por *acilidade(

(lementos sim$les

Servios do -oogle

-adgets do -oogle

".1.1 Inserindo elementos sim$les )(&(&(& 'nserindo uma imagem


Menu Inserir T opo Imagem

Se a imagem que queremos inserir est arma>enada em nosso computadorF apenas temos que clicar em .(scol/er ar0uivo1F locali>Ela e adicionar( 0m alguma ocasioF pode nos interessar colocar uma imagem da 'nternet( Peste caso ser pedido seu endereo J=C4K( Aara veri*icar apenas ter<amos que colocar o mouse sobre a imagem e com o boto direito do mouseF marcar ?copiar endereo do lin!@ no menu eBpans<vel( Po prGBimo eBemplo adicionamos uma *oto:

Clicando na imagemF podemos ver que a imagem 9 acompanhada por um menu de edio para adaptaEla Os nossas necessidades: #lin/ar (& Alinha O esquerda #lin/ar !& Centrali>ar #lin/ar D& Alinha O direita Taman/o S& -amanho pequeno Taman/o S& -amanho m9dio Taman/o & -amanho grande 2riginal& -amanho original %ue+ra ativada& Contorno do teBto %ue+ra desativada& Sem contorno de teBto Remover& Cemove a imagem

)(&(&($ 'nserindo um 4in5


clicamos com o mouse onde vamos colocar o lin5F e em seguida: Menu Inserir T opo in3

A ;anela que se abreF nos o*erece ) possibilidades: 1. =nir com uma pgina que ; t<nhamos no nosso site J 'gina e4istenteK: SG temos que marcar a que nos interessa dentre as que temos Japarecem listadas abaiBoKH 2. =nir com outra da web J(ndereo da 5e+K: 0screver<amos o endereo da webH ". Pa opo Scri$ts do -oogle #$$s6 voc: pode selecionar scripts e usElos em seu site para acionar eventosF como enviar um eEmail ou criar um convite do !oogle Agenda( Pa opo 'gina e4istenteF podemos criar uma nova pgina no site e vincular a esta( .asta clicar em .!riar nova $gina16 colocar o t<tulo e escolhermos o tipo de pgina(

0sta *acilidade de criao de pginas a partir de lin5s nos lembra uma wi5i )(

)(&(&()( 'nserindo outros elementos importantes


Sumrio AgoraF voc: pode criar um sumrio em seus documentos para a;udar a organi>ar o conteIdo e *acilitar a navegao pelo documento( Aara inserir um sumrio no seu documentoF siga as instru+es abaiBo: 1 Adicione cabealhos aos documentos clicando no menu *ormatar e selecionando !a+eal/oF Su+7ca+eal/o e T8tulo menor( "bserve os atalhos de teclado CtrlU& Jtamanho mBimoKF CtrlU$ Jm9dioKF CtrlU) JmenorK( -bs: Se *uiser editar.alterar o te/to do sum,rio, edite os cabe"al os do corpo do documento e n#o a cai/a do sum,rio, por*ue ao atualizar o sum,rio 0clicando em 12tualizar1 no menu *ue surge na parte superior direita do sum,rio3, edi"%es manuais feitas 4 cai/a do sum,rio ser#o apagadas.

) 8i5i em havaiano signi*ica super rpido( V um site em que permite aos usurios criar e editar livremente conteIdo de web pages usando qualquer web browser usando conven+es de *ormatao de teBto que dispensam conhecimentos de linguagens de programao(

2 Aara inserir um sumrio ao documentoF clique em Sumrio no menu Inserir( Surgir uma ;anela para que voc: escolha o estilo do sumrio( "bserve que o estilo ser impresso de maneira di*erente do que 9 eBibido na tela Jisto 9F com nImeros de pginaK( " " sumrio aparecer no local em que o cursor estiver posicionadoF portantoF certi*iqueEse de posicionar o cursor onde quiser que o sumrio aparea( Se precisar mover o sumrioF clique na tabela e escolha removerH em seguidaF insiraEo novamente onde dese;ar( 9 Soc: pode continuar adicionando cabealhos ao documento ou alterar os cabealhos atuais( ContudoF se quiser que uma alterao se torne parte do sumrioF ser preciso clicar no sumrio e escolher #tuali:ar agora no menu que surge O direita do sumrio( ; Se quiser alterar o estilo do sumrioF clique no sumrio e escolha 'ro$riedades no menu que surge na parte superior direita do sumrio( < epois de a;ustar o sumrioF ele ser vinculado Os se+es com t<tulo dos seus documentos que usam os estilos de cabealho Jconsulte o nW& acimaK( Clique uma ve> no lin5 do sumrio e clique novamente no lin5 da caiBa Ir $ara o lin3( Como no eBemploF um sumrio 9 um <ndice que se corresponde com di*erentes grupos ou se+es que cont9m o teBto de uma pgina( 0m algumas ocasi+es pode ser Itil inser<Elo para navegar mais rpido(

Somente se criar este sumrio se os di*erentes pargra*os ou se+es do teBto tiverem estilo de cabealho(

".1.2 Inserindo Servios do -oogle


Aodemos adicionar O pginaF rapidamenteF anIncios e propagandas do !oogleF agendasF mapasF *otos do AicasaF apresenta+es de slides do AicasaF documentosF apresenta+esF planilhas e *ormulrios do !oogle ocsF e pastas( Xuando se trata de pastasF documentosF planilhasF apresenta+es ou *ormulrios a opo os arquivos so selecionados daqueles que esto arma>enados do !oogle ocs( Xualquer servio listado nesse menu do !oogle poder ser inserido utili>ando esta opo( Aor eBemplo para inserir *otos do picasa escolha da *orma mostrada abaiBo(

".1.2 Inserindo -adgets


So *erramentas ou servios que podem ser agregados a pgina da web( Po menu temos acesso a:

'ostagens Recentes& Iltimas postagens e*etuadas na pginaF anIncios ou entradasH #r0uivos atuali:ados recentemente& Iltimos arquivos atuali>adosH Itens recentes da ista& Iltimos listadosH !ai4a de te4to& CaiBa ou quadro de teBtoH Mais gadgets(((

Aara poder inserir qualquer dos tr:s primeiros gadgetsF 9 preciso que tenha sido criado previamente as pginas correspondentesF quer di>erF estas pginas ; devem eBistir no site eF al9m dissoF conter in*ormao ou arquivos( Aor issoF se tentarmos inserirF por eBemploF o !adget: 'ostagens Recentes( Xue se re*ere a mostrarmos quais so as Iltimas postagens ou anInciosF nos aparece uma ;anela como esta abaiBoF que nos indica que apenas podemos escolher de uma lista de arquivos que ; eBiste( Caso contrrioF no 9 permitido prosseguir(

MasF se ; tivermos criado a pgina anteriormenteF clicando no boto .criar $gina1 e depois em .avisos1F apenas ter<amos que incluir um t<tulo e marcar o nImero de postagens a serem eBibidas(

" resultado *inal *icaria como o eBemplo a seguir:

0ste gadgets e outros que se re*erem Os atuali>a+esF so apropriados a serem inseridos na pgina inicial para mostrar sempre as atuali>a+es recentes( Xuando se trata de inserir um quadro de teBtoF no depende de nenhuma pgina criada( V uma opo que permite incluir no apenas teBtosF mas tamb9m: lin5sF tabelasF linhasF imagensF entre outros(

Inserir outros gadgets Menu Inserir T opo ?)ais gadgets(((@ evemos selecionar ou buscar o gadget que nos interessa entre os vrios dispon<veis no !oogle(

".2 2 menu *ormatar


Serve para estabelecer o tamanho e mais outros detalhes como: Ciscado Sobrescrito Subscrito Alinhar J0squerdaF CentroF ireitaK -amb9m podemos limpar a *ormatao

"." 2 menu Ta+ela


Aermite inserir uma tabela diretamente e de *orma gr*icaF marcando com o mouse o nImero de linhas e colunas(

=ma ve> criadaF com este menu inserimos linhas e colunas quando quisermosF e da mesma *orma podemos eliminElas(

".9 2 menu a,out


Aodemos optar entre colocar cada pgina apenas com &F $ ou ) colunas( 0 inserir barras laterais( ependendo do propGsito e conteIdo das pginasF se escolher um ou outro *ormato de layout(

9 #dicionando novas $ginas

Pomeamos a pgina que vamos criar e escolheremos um dos , tipos dispon<veis( " conteIdo do que queremos colocar nelaF 9 que *ar optarmos por um ou outro estilo(

7inalmente escolhemos a hierarquia da pgina( So o*erecidas $ possibilidades: 1. ColocEla no n<vel mais alto: V a opo padro( Sup+e que 9 uma pgina que est mais perto da pgina Yome ou do 'nicio( 2. ColocEla abaiBo: V uma subEpgina(

A di*erena pode ser vista no mapa de navegao a seguir:

Aodemos ver como a pgina denominada =e+ $age 26 9 a Inica que est abaiBo de Agina 'nicial( -odas as outras esto criadas no n<vel alto( A no ser que queiramos uma disposio muito especial e necessitemos de subEpginasF o normal seria no mudar o n<vel que se apresente por padro( Xuando se criam subEpginasF seu nome com o lin! aparece ao *im JabaiBoK da pgina que dependem(

9.1 #dicionando uma $gina 5e+ Sim$les


V a opo 'gina da 5e+. Aparece uma pgina em branco que iremos estruturEla e preench:Ela com os conteIdos que queremos( Po devemos esquecer que dispomos de um menu de edio rpida eF al9m dissoF os , menus eBpans<veis para *acilitar( 5 o tipo de p,gina *ue se adapta a *ual*uer necessidade e *ue podemos configurar, mudando e incluindo todo tipo de elementos.

9.2 #dicionando uma $gina do ti$o Blog


V a opo #visos. 0sta pgina se elabora adicionando entradasF que se convertero em avisos in*ormativos( Aara issoF clicaEse na opo >ova $ostagem. Aparecer uma ;anela de edio na qual o t<tulo 9 o primeiro a ser colocado na entrada eF a seguirF escrevemos o conteIdo da not<cia ou comunicado( Contamos com os menus de edio para poder dar *ormato ao teBtoF incluir imagens e outros elementos( Xuando terminamos e salvamosF a postagem aparecer como neste eBemplo:

Se;amos as di*erentes partes de que se constitui: -<tulo -empo que *oi postado Autor da publicao " conteIdo Se tivermos vrias entradas ou postagensF poderemos observar que elas se ordenaro cronologicamenteF em ordem inversaF assimF as mais recentes so as primeiras que aparecero( 0sta estruturaF con*igurao e disposio 9 a de um blog,( Poder6amos usar esses recursos a essas p,ginas, como um blog ou registro, para comunicar periodicamente algo. Por isso s#o apropriadas para informar as novidades, mudan"as, not6cias importantes, avisos e comunicados, convocat7rias, reuni%es, entre outras. Xuando inserimos o mGdulo ?ltimas $ostagens em uma pginaF podemos escolher a quantidade de postagens que queremos que apaream( V apropriado para a pgina inicial(

9." #dicionando uma $gina 0ue !ont@m #r0uivos


V com a opo #r0uivo V uma pgina preparada para arma>enar e mostrar os arquivos do nosso site(

, =m blog Jcontrao do termo N8eb logNKF tamb9m chamado de blogue em AortugalF 9 um site cu;a estrutura permite a atuali>ao rpida a partir de acr9scimos dos chamados artigosF ou NpostsN(

& Atribu<mos um nome a pgina Jno eBemplo ?Arquivos@KF e ento adicionamos um arquivo((

$ .uscamos o arquivo com o boto .(scol/er ar0uivo1( Aodemos completar pondo uma descrio do arquivo( 0 depois clicamos em .*a:er u$load1.

) " arquivo 9 trans*erido para o site e aparecer com a seguinte in*ormao: Pome Z escrio Z -amanho Z Serso Z -empo do upload Z Autor

A+es relacionadas com os arquivos listados:

Clicando sobre o nomeF podemos descarregElo e abr<Elo( Clicando sobre a versoF temos acesso a um histGrico das di*erentes vers+es salvas do documento(

Se;amos o que ocorre quando clicamos sobre a verso de um arquivo:

Aparecem todas as modi*ica+es *eitas com o tempo de edio correspondente( Se quisermos recuperar qualquer umF teremos apenas que descarregElo( Para destacar esta potencialidade, *ue nos lembra wi!is, uma vez *ue pode armazenar um documento em suas diferentes edi"%es, e a *ual*uer momento, voltar ao *ue nos interessa. 8m algumas ocasi%es, 9 uma garantia de seguran"a. 2rgani:ando os ar0uivos em $astas Xuando a esta pgina lhe trans*erimos muitos arquivosF precisamos de certa ordem para t:E los bem organi>ados( V o momento de se criar pastasF e situElas onde nos interessa( Arimeiro selecionamos o quadro que eBiste O esquerda do nome do arquivoF e em seguidaF clicamos em )over $ara e depois em >ova $asta( Criada a pastaF o site *icar organi>ado da seguinte maneira:

#$agando ar0uivos e $astas Aara apagar um arquivoF apGs selecionElo con*orme a seo anteriorF e clicamos em 0Bcluir( Aara eliminar uma pasta sG teremos que clicar no boto Cemover que aparece entre par:ntesisF e O direita do nome( " mesmo ocorrendo com os arquivos que esto contidos na pasta(

Su+screvendo a mudanas Se queremos nos mantermos in*ormados das mudanas que ocorrem na pginaF sG teremos que clicar no boto Rece+er notificaes so+re alteraes na $gina. Se houver alguma novidade ou modi*icaoF ser enviada uma mensagem para nossa contaF nos avisado das mudanas ocorridas( V muito Itil este tipo de pgina para trans*erir arquivos e t:Elos de *orma seguraF e ao mesmo tempo poder compartilhElos com todo mundo ou com um grupo( 0 o melhor 9 que estaremos prontamente in*ormados das mudanas e atuali>a+es( 4embreEse que o espao na web 9 de &%%M.( Cabem muitos arquivos(

9.9 #dicionando uma $gina do ti$o ista


V com a opo ista( -rataEse de uma pgina que cont9m listas elaboradas O nossa maneira( Como nos casos anterioresF o primeiro a ser *eito ser colocar o nome na pgina( 0ntoF se abre uma ;anela com , op+es(

Se clicarmos sobre qualquer uma das tr:s primeirasF 9 eBibido um modelo com as listas ; estruturadas( CertamenteF nenhuma se adapta ao que queremos mostrarF por isso recomendo a Iltima opo JCriar uma lista personali>adaKF assim podemos criar as listas a partir do in<cioF de*inindo nossas prGprias colunas(

V preciso colocar um nome ou renomear a coluna e ao mesmo tempoF escolher o tipo de conteIdo que ter( AssimF poder<amos optar por: !ai4a de Seleo& Se quisermos colocar um quadro de op+es para marcar ou desmarcar Data& Aara colocar datas ista sus$ensa& Menu eBpans<vel para selecionar di*erentes op+es Te4to& Aara adicionar teBto UR & Aara colocar hiperlin5s Com base em todas essas possibilidadesF poderemos con*eccionar qualquer lista que se adapte Os nossas necessidadesF apresentando a in*ormao como nGs dese;armos( Po seguinte eBemploF se apresentam in*ormao em / colunas: >ome& Pome e sobrenome de um aluno( =tili>o a opo -eBto Tema 1 7 Tema 2 7 Tema "& 4evamos o controle de ) temas( Marcamos a caiBa( =tili>o a opo caiBa de seleo( -lo+al& Colocamos um valor( =tili>o a opo lista suspensa: e escolho entre Muito bemE CegularEMal(

Peste casoF poderia ser Itil para um grupo de classe para controlar os temas ou li+es e mostrar um valor *inal( 0m outras ocasi+esF pode nos interessar inserir datasF lin!sF dados de contatos(

Se;amos como este Iltimo eBemplo que tem ) registros: 1 #dicionando um novo registro A lista ApGs clicar no boto adicionar item preencher o *ormulrio que aparece com os dados requeridos( Ao salvarF se adicionar o novo registro(

2 !lassificando os dados Clicando na opo !lassificarF que est abaiBo do rGtulo de cada coluna( 0ssa opo nos d a possibilidade de ordenar al*abeticamente de maneira ascendente ou descendente( ". )odificamos a estrutura da lista Clicando em 'ersonali:ar esta listaF em qualquer momento podemos personali>ar a listaF modi*icandoF adicionando ou eliminando as colunas( :imos, portanto, um modelo de p,gina poss6vel de escol a entre listas personalizadas e ordenadas, *ue podemos aproveitar para apresentar informa"%es de nosso interesse.

; !onfigurando o site

;.1 #cesso ou com$artil/amento com outros


Mais a+es T !om$artil/ar este site =m site pode ser compartilhado com todos JpIblicoK ou com os usurios que especi*iquemos(

Soc: pode controlar quem pode ver ou editar o seu site alterando as con*igura+es de compartilhamento( Se dese;ar que todos possam visuali>ar o seu site sem *a>er login em uma conta do !oogleF voc: pode de*iniElo como pIblico( Pa opo Aermiss+esF clicando no lin5 ?#lterar16 aparecer uma ;anela como esta abaiBo onde ser permitido *a>er essas con*igura+es(

Soc: tamb9m pode especi*icar as pessoas que dese;a que possam reali>ar determinadas a+es em seu siteF de*inindo seu n<vel de acesso como N'ode visuali:arNF N'ode editarN ou NB $ro$rietrioN: "s usurios de*inidos como N'ode visuali:arN podem: Sisuali>ar pginas "s usurios de*inidos como N'ode editarN podem: CriarF editar e eBcluir pginas Mover pginas Adicionar aneBos Adicionar comentrios 'nscreverEse para altera+es do site e de pginas

"s usurios de*inidos como NB $ro$rietrioN podem: 7a>er tudo o que usurios de*inidos como NAode editarN t:m permisso para *a>er e*inir outras pessoas como NAode visuali>arNF NAode editarN e NV proprietrioN Alterar os temas e o layout do site
Alterar o nome do site 0Bcluir o site

"bserve que qualquer pessoa de*inida como NAode visuali>arNF NAode editarN ou NV proprietrioN deve ter uma Conta do !oogle ou uma Conta do !oogle Apps para compartilhar o seu site( "bserve tamb9m queF como os usurios de*inidos como NAode visuali>arN e NAode editarN podem lerF copiar e redistribuir in*orma+es compartilhadas por voc: no seu siteF voc: deve tomar cuidado ao incluir in*orma+es pessoais delicadas como nImeros de previd:ncia socialF in*orma+es de conta bancriaF endereos residenciais e nImeros de tele*one(

4embreEse: :oc; pode convidar *uantas pessoas *uiser para compartil ar o seu site, mas o Google enviar, apenas <= convites por dia. - Google, ent#o, seguir, a sua lista de convidados, enviando <= convites adicionais por dia at9 *ue se$am enviados convites para todos em sua lista.

;.2 !onfigurando a a$arCncia


Mais a+es T Administrar Site T Apar:ncia do Site

;.2.1 )udando o la,out do site


Mais a+es T Administrar Site T Apar:ncia do Site T 4ayout de pgina T Alterar layout do site

Clicando em NAlterar layout do siteNF voc: pode alterar diversos aspectos de seu site:

argura do site: voc: pode de*inir a largura do site como um nImero espec<*ico de piBels ou como a largura padro de seu tema( !a+eal/o: voc: pode marcar a caiBa ao lado de Cabealho se dese;ar ter um cabealho em seu site( Se escolher ter um cabealhoF voc: pode especi*icar as dimens+es do cabealho e como este deve ser alinhado( Barra de navegao /ori:ontal: se dese;ar ter uma barra de navegao hori>ontalF clique na caiBa ao lado de ?.arra de navegao hori>ontal@( PormalmenteF um site tem uma barra de navegao hori>ontal ou uma barra lateral( Barra lateral: voc: pode escolher se quer uma barra lateral em seu site marcando ou desmarcando a caiBa ao lado de ?.arra lateral@( Se escolher ter uma barra lateralF voc: tamb9m pode de*inir sua largura e escolher se ela deve *icar no lado esquerdo ou direito de seu site( Roda$@: voc: pode escolher se dese;a um rodap9 em seu site marcando ou desmarcando a caiBa ao lado de ?Codap9@( Se escolher ter um rodap9 no siteF voc: tamb9m pode de*inir sua altura ou deiBar que o !oogle a a;uste automaticamente de acordo com o conteIdo do rodap9(

;.2.2 #lterando o !a+eal/o


0st predeterminado no quadro acima e a esquerdaF e no admite outra posio( Se quisermos colocar outro logotipo que no se;a o do !oogle SitesF clicamos em ?alterar o logotipo@(

a ;anela que se abre: Selecionando ?sem logotipo@F para omitiElo( Se optarmos para adicionar umF buscamos o que dese;amos em ? (scol/er ar0uivo@( evemos dimensionar o logotipo antes de *a>er a trans*er:ncia Jo uploadKF se *oi estabelecida uma altura( Clicamos em ?"[@ e salvamos : ?Salvar as altera+es@ Peste eBemplo *oi colocada o logotipo da =7C!F as dimens+es so 6$B$,% piBels( A altura da moldura *ica determinada pelo tamanho do logotipo(

;.2." !onfigurando a Barra lateral

0sta moldura que vemos tem uma largura de &/% piBelsF est *ormado por $ quadros ou itens: >avegao& Menu de navegao #tividade recente do site& 'n*ormao sobre a atividade recente no site( !om as o$es de& 0ditarF eBcluir ou adicionar um novo item na barra lateral

Se;amos com mais detalhe cada uma das op+es e como adaptamos Os nossas necessidades( >o menu de navega"#o, situaremos os iperlin!s as p,ginas *ue e/istem dentro do site. Para configurar clicamos em ?8ditar@. Aoderemos mudar o t<tulo ?Pavegao@ por outro( Po eBemplo abaiBoF nomeamos de ?(enu@( 0m seguida temos a opo de organi:ar automaticamente a min/a navegao6 nesta opo todas as pginas criadas sero inclu<das automaticamente no menu Pavegao( Aor padro ela ; vem selecionada( Aor9mF se dese;armos organi>ar manualmenteF basta desmarcar a quadro ao lado( Com as quatro setas que aparecem a direitaF alteramos a ordem das listas das pginas que inclu<mos e *a>emos tabula+es( 0 se eBiste alguma que est criada no nosso site e a queremos adicionar para que aparea aquiF clicamos em ?adicionar pgina@F selecionandoEa do mapa de navegao que aparece( -amb9m temos a opo de adicionar pginas eBistente na webF basta clicar no lin5 adicionar UR (

#dicionando novos itens& Aara que apaream na barra lateral( Clicando em ? D #dicionar um item na +arra lateral @( Semos como se abrem 1 alternativas( 1. -oogle #dSense& coloca anIncios do !oogle AdSense na sua barra lateralH 2. >avegao& Adiciona lin5s a pginas individuais para que os usurios do seu site tenham acesso rpidoH ". Te4to& Adiciona teBtos O barra lateral do seu siteH 9. #tividade recente do site& 0Bibe uma lista de atividades recentes do siteH ;. )in/as atividades recentes& 0Bibe uma lista da recente atividade como usurio conectado no momentoH <. !ontagem regressiva& 0Bibe uma contagem regressiva de dias para uma

data especi*icadaH E. 'ro$rietrios do site: 0Bibe os proprietrios do seu site na barra lateralH F. #utores da $gina& 0Bibe autores de pginas recentes na barra lateral do seu site Adicionando o item -eBtoF pode ser Itil para inserir lin!s a sites eBternosF incluir <cones e desenhosF logotipos e publicidade( Adicionando uma Contagem regressivaF poder ter uma *inalidade in*ormativa para destacar uma data de um evento ou acontecimento( Aode nos interessarF em determinadas ocasi+esF adicionar vrios itens( AssimF vrios menus de navegao ;unto com lin!s a outros sites de interessesF mais de um contador de datas variadas( =ma ve> criados os itensF podemos ordenElos na barra lateral( Clicando e arrastandoF para colocar onde quisermos( "utro caminhoF talve> mais rpido para con*igurar o mGdulo lateralF seria acessando a partir de ?0ditar barra lateral@F que se locali>a ;unto ao *inal do quadro(

;.2.9 #lterando as cores e fontes


Mais a+es T Administrar Site T Apar:ncia do Site T Cores de *ontes

Com a barra de rolagemF selecionamos um elemento para alterar a cor do t<tuloF *undoF quadro lateral( Aodemos colocar uma imagem como plano de *undo do cabealhoF da pginaF da barra lateral( Ao selecionar o itemF temos que buscar a imagem em ?(scol/er ar0uivo@( Aodemos mudar em alguns itensF tamb9m o tipo de letra ou *onte( 0Bistem 1 dispon<veis( Xualquer alterao que *aamosF 9 mostrado na parte in*erior da telaF o que adianta e

*acilita esta tare*a(

;.2.; #lterar o tema do site


Mais a+es T Administrar Site T Apar:ncia do Site T -emas Contamos com uma s9rie de temas dispon<veisF cada um com sua particular combinao de cores e *ontes( Aara eBperimentarF e ver como *icarF temos apenas que clicar em ?visuali>ar@(

;." 2utros aGustes de configurao


0m !onfiguraes do site H -eral A partir delaF podemos: Colocar nome ao site Mostrar o nome do site no alto das pginas( Aor padro 9 mostradoF caso contrrio de ser desmarcado( escrever brevemente o site 'ndicar se o conteIdo 9 eBclusivo para adultos( Marcar a opo caso se;a( Alterar a pgina de entrada quando se acessa o site: se denomina ?pgina de destino@( Aor padroF 9 a pgina YomeF por9m podemos alterarEla por outra com o boto?Alterar@( Ativar as estat<sticas atrav9s do !oogle Analytics(

Clicando em ?Saiba mais@ aparecer instru+es de como ativar essas estat<sticas( everemos entrar no !oogle AnalyticsF seguindo todos os passosF chegar um momento em que ser mostrado um cGdigo para o site( Aara comprovar se *uncionaF devemos esperar aproBimadamente $, horas( Sempre que quisermos ver as estat<sticasF devemos acessar o !oogle Analytics( =m detalhe importante se re*ere ao espao utili>ado no site dos &%% M. utili>ados( Aodemos ver no quadro O direita(

!onfiguraes da $gina =ma ve> que temos criado uma pgina( )ais aes T !onfiguraes da $gina( Assim podemosF entre outras coisasF mostrar ou no ao *inal da pgina ?comentrios@F e permitir ?arquivos aneBados@(

< !aracter8sticas es$eciais


" que um site criado pode ter de especialD

<.1 Uma +usca dentro do site


Situado no cabealho O direita( Po pode ser eliminado(

<.2 Site como Blog


AodemEse criar pginas com a estrutura de qualquer blog: publica+esF entradas ou postagens como so conhecidasF para anunciar ou in*ormar( Aermite inserir um item com as Iltimas postagens e mostrar quantas dese;ar(

<." Site como 5i3i


8<5i 9 uma coleo de muitas pginas interligadas e cada uma delas pode ser visitada e editada por qualquer pessoa( " que torna bastante prticoF a reedio e *uturas visitas( " site como wi5i guarda as di*erentes vers+es ou modi*ica+es do siteF que podemos ver ou recuperar a qualquer momento(

<.9 #rma:enagem de ar0uivos sem$re atuali:ados


Xualquer arquivo que se trans*iraF sero in*ormadas as modi*ica+es e apresenta as di*erentes vers+es ocorridas( Aermite um arma>enamento de &%%M.(

<.; Informao imediata de 0ual0uer mudana aos cola+oradores


Com a opo .Rece+er notificaes so+re alteraes no site1 que se encontra em .)ais aes1F sempre estaremos pontualmente in*ormados das mudanas que ocorrerem( " colaborador recebe automaticamente uma mensagem de aviso(

<.< Integrao com .-oogle #nal,tics1 $ara mostrar estat8sticas de visitas


Atrav9s do !oogle AnalyticsF podemos consultar e controlar o acesso ao nosso site mediante os variados e completos in*ormes que se geram(

<.E 'ermite ane4ar ar0uivos nas $ginas


Apenas dispon<vel para os colaboradores de um siteF ao *im de cada pginaF podem ser aneBados arquivos que se;am necessrio disponibili>Elos(

<.F 'odemos fa:er comentrios


Apenas dispon<vel para os colaboradores de um siteF ao *im de cada pginaF podem ser adicionados comentrios( Aparecem aqui no sG a mensagemF mas tamb9m detalhes de quem a mandou(

<.I Su+$ginas de$endentes de outra $gina


As subpginas situamEse abaiBo da pgina( Aara acessar a qualquer umaF basta apenas clicar(

<.1J #lgumas utilidades ao fim da $gina


Se olhamos no *im de qualquer pginaF encontramos algumas utilidades que no podemos nem con*igurar nem eliminar(

estaque: Sitema$& MostraEnos um mapa do siteF *ormado por todas as pginas criadas e so apresentadas em *orma de rvore( #tividade recente do site& Abre todas as altera+es que se tem produ>ido no site e o colaborador que as tem *eito(

E !onsideraes *inais
Com este manual apresentamos uma *erramenta do !oogleF con*orme ; mencionado anteriormenteF adaptvel e aplicvel para qualquer propGsito em n<vel pessoalF *amiliarF laboratorialF de grupo e tamb9mF no Qmbito docente( 7cil e rapidamenteF criamos e con*iguramos web individuaisF de classeF de grupoF de trabalho( Com as restri+es e permiss+es de acesso que estabelecemosF podemos tornElas pIblicasF privadasF colaborativas( Aara terminarF apresentamos o site do Aro;eto de 0Btenso: 'n*oincluso na cidade de Sousa#A.( Como orientaoF pode nos servir de eBemplo de como pode ser criada uma pgina da web gratuitamente usando o !oogle Sites( http:##sites(google(com#site#in*oinclusaou*cg# 0speramos que logo se converta em uma *erramenta popular\ 6 de Maro de $%&&

0quipe dos pro;etos: 'n*oinclusoF ensino e insero social Z =7C!#M0C#AC"0L- e 'n*oincluso na cidade de Sousa#A. Aro;etos de 0Btenso da =niversidade 7ederal de Campina !rande Z =7C! Campus de Sousa E CCJS

ReferCncias

Aplicativo para criao de !oogle sites( Acesso em %2#mar#$%&&( !oogle docs(

ispon<vel em https:##sites(google(com#Dtab]o)(

ispon<vel em http:##docs(google(com#Dtab]go^all( Acesso em %$#mar#$%&&( ispon<vel em http:##www(google(com#support#sites#( Acesso em

A;uda do !oogle Sites( %6#mar#$%&&(

0ste manual *oi criado usando So*tware 4ivre e gratuito(