Construodesites utilizandoaferramenta gratuitaWebnode

ViniciusA.deSouza
va.vinicius@gmail.com

SoJosdosCampos,2010. 1

Resumo A Webnode uma ferramenta que permite ao usurio construir um site totalmentepelainternet,nosendonecessrioinstalarnenhumoutroprograma sem seu computador. Este servio fornece uma srie de ferramentas poderosasbaseadaemtecnologiasWeb2.0paraadministraroseuprojeto, tais como edio de pginas, criao de blog e catlogos de produtos, por exemplo.OgrandediferencialdaWebnode,assimcomodeoutrasferramentas destetipo,seucartertotalmentegratuitoefacilidadedemanipulao,pois nonecessriopossuirconhecimentodeprogramao. Palavraschave:Web2.0,websites,webnode

VersodoDocumento TutorialWebnodeverso1.0deMaro/2010.Criao:ViniciusAugustode Souza.

SUMRIO
PARTE1INTRODUO.................................................................................5 1.1Funcionalidades.............................................................................................7 1.2FuncionalidadesSociais..............................................................................10 1.3Caractersticasdospacotes.........................................................................11 1.4Suporte........................................................................................................14 PARTE2CONHECENDOOWEBNODE......................................................15 2.1Criandoumaconta.......................................................................................15 2.2ConhecendooWebnodeBuilder.................................................................19 2.3Editandocontedogeradoautomaticamente..............................................23 2.3.1Ediodomenu.............................................................................23 2.3.2Ediodecontatos.........................................................................25 PARTE3OPERAESFUNDAMENTAIS...................................................27 3.1Criarpginas................................................................................................27 3.2Navegarpelaspginas................................................................................29 3.3Excluirpginas.............................................................................................29 3.4Visualizarprojeto.........................................................................................30 3.5Alterarformatodaspginas.........................................................................31 3.6Alterarpropriedadedaspginas..................................................................31 3.7Realizaruploaddearquivos........................................................................32 3.8Alterarestruturadaspginas.......................................................................34 3

3.9CabealhoeRodap...................................................................................35 3.10ConfiguraesdeRSS..............................................................................38 3.11ConfiguraesdeFavoritos.......................................................................40 PARTE4ADIODECONTEDODINMICO...........................................41 4.1Objetosdetextoeimagem..........................................................................41 4.1.1Ediodetexto...............................................................................42 4.1.2Inserirlinks.....................................................................................43 4.1.3Inserodeimagens......................................................................44 4.1.4Inserodearquivosparadownload.............................................45 4.1.5InserircdigoHTML.......................................................................46 4.1.6Inserirtabela...................................................................................49 4.2Demaisobjetosdisponveis.........................................................................50 4.2.1Enquete..........................................................................................50 4.2.2Frum.............................................................................................51 4.2.3GaleriadeFotos.............................................................................53 4.2.4ListaseArtigos...............................................................................54 4.2.5Widgets..........................................................................................56 PARTE5CONSIDERAESFINAIS...........................................................58 5.1Administraodeprojetos...........................................................................58 5.2Outrosserviosdisponveis.........................................................................59 5.3Concluso....................................................................................................59 Referncias........................................................................................................60

PARTE1INTRODUO

A Webnode uma ferramenta gratuita que administra completamente um projetodecriaodepginasparaaWeb.Qualquerpessoa,semqualquer conhecimentotcnico,maisespecificamente,conhecimentosdeprogramao, pode criar e administrar sites avanados facilmente. O interessante desta ferramentaquenoexisteanecessidadedeinstalarnenhumprogramano computador ou servidor do usurio, uma vez que todos os mdulos de desenvolvimentoestodisponveisatravsdoseubrowser. AWebnodeincluiumaferramentanicaerevolucionriaparapublicaesde websites chamada Webnode Builder. Tratase de um ambiente de desenvolvimentodepginasbaseadonomecanismodrag&drop,ouseja,clica earrasta.Destaforma,paraadicionarumelementosuapgina,bastaclicar sobreeleearrastloparaolocaldesejado.AFigura1trazumexemplodo WebnodeBuilder:

Figura1WebnodeBuilder.

OWebnodeBuilderpermiteconstruirfcilerapidamenteumwebsite.uma ferramentadeadministraopooderosa,tantoparaempresasquantoparauso pessoal. Por exemplo, podem serconstruidos um website normal, um blog, umagaleriadeimagens,umaeshop,oucatlogodeprodutos,etc. Estetipodeediointeractivaverificadoodrag&dropdepginaspermite adicionarcontedosweb(imagens,enquetes,fruns,etc.)simplesmentepor arrastandoosapartirdabarradeferramentasdaWebnodeparadentrodasua pgina web. Podese ainda criar menus flexveis, gerenciar sees para os seus artigos ou fazer as suas prprias listas dinmicas. Tem uma funcionalidade de transferncia mltipla de imagens para criar lbuns de fotografiasrapidamente. AversogratuitadoWebnodecontaaindacomumserviodeestatsticasde websiteavanadas(WebnodeStatistics).AFigura2mostraumexemplo:

Figura2WebnodeStatistics.

Tratase de uma ferramenta de marketing excepcional para monitorizar e analisar o trfico do seu Website. A anlise detalhada inclu page hits, visitantesnicos,quantidadededadostransferidos,tiposdebrowser,motores depesquisa,keywords,etc.OWebnodeStatistics,portanto,auxiliaoestudodo comportamentodosseusvisitantes,atravsdecaractersticascomooshits,os pageviews,osnmerosdevisitas,deprimeirasvisitas,deutilizadoresnicos, deutilizadoresquevoltamaosite,novosvisitantes,impresses,singletonse bouncerates. 6

1.1Funcionalidades
AWebnodetemumconjuntodefuncionalidadestcnicasparaextenderasua criatividadecomoconstrutoronline: UtilizaoGratuita o OsistemaWebnode completamente gratuito.Notemdese preocupar com despesas. No tem de pagar nada. No h annciosnemfrasespublicitrias.Apenasanossatecnologia. EdioInterativa o OsistemaWebnodefuncionaemtemporeal.Istosignificaque vocpoderverassuasalteraesmedidaqueasvaifazendo nasuapgina.Noprecisadenenhumconhecimentogrficoou deprogramaoparacriarsitespoderosos.OsistemaWebnode faztudoporvoc! ArrasteeLargue(DragandDrop) o Desejaadicionarumaenqueteouumfrumdediscussonoseu artigo?Arrasteo,simplesmente,apartirdabarradeferramentas elargueonolocalondedesejamostrlonasuapgina.Com dezenasdeobjetosArrasteeLargue,vocpodeconstruirtudoo quequiser,daformacomoquiser.Utilizeenquetes,galeriasde fotos,artigos,listas,catlogosegadgetsdevendaparavender produtos em qualquer instante. O sistema Webnode constantemente atualizado, sendo adicionados incontveis componentesconformesevotornandopopularesnaInternet. AcessoMultiUtilizador o Enquanto administrador do Website, pode permitir controlo administrativo parcial ou completo do seu projecto a outros utilizadores,deformaaqueestespossameditaretrabalharno seusite.Podemtambmtrabalharcomoemailouparticipando nowebdesign,ouambosemsimultneo. WebsiteMultilngua o Podedisponibilizarmltiplosidiomasnoseuprojectoapartirde umalistanomenudoseusite.Escolhaosidiomasapartirde umalistaextensa,adicionandoouremovendoidiomasconformea suaconvenincia.

PginasProtegidasporPalavraPasse o Podeadicionarprotecoporpalavrapasseemcadapgina.Crie uma lista de utilizadores, cada um com uma palavrapasse especfica, ou crie uma palavrapasse nica que desbloqueia cadapgina.Disponvelapenasparaversopaga. ListasDinmicas o Crieassuasprpriasestruturasdebasededadosempoucos cliques. Modifique o aspecto das listas dinmicas conforme desejar.Desejatercincoprodutosporpginaeusarpaginao? Bastaajustarasdefinies.Nonecessitadeprogramarnada!As nossas listas contm contedo activo que fornece ao utilizador controlocompletosobreoquemostrado,ondemostradoe comomostrado.Aslistaspodemserusadascomoumcatlogo deprodutos,umalistaderefernciasdirectoriasousejaoquefor quenecessite. SuporteaComrcioElectrnico o Venda os seus produtos ou servios. A Webnode aceita pagamentosemcartodecrdito,VISA,Mastercard,etc.Ganhe dinheiro usando os sistemas de pagamento online integrados comooPaypalouoGoogleCheckout.Nohnecessidadede processos de configurao morosos ou conversas aborrecidas comoseugestorbancrio.Apenasvenda,venda,vendaainda mais,usandoosnossossitesdecomrcioelectrnicoprontosa usar. GaleriadeFotos o OsistemaWebnodetemumgestordegaleriadefotosavanado, com ferramentas para manipulao de imagens para poder, rapidamente, editar, recortar, redimensionar, rodar ou apenas gerir as fotos. Pode utilizar transferncia mltipla de ficheiros, editar imagens na Webnode e publicar as imagens retocadas instantaneamente na Internet, sem ter de instalar qualquer programa de edio de fotografias. Pode alterar a ordem das imagensporsimplesdraganddrop. EdiodeDocumentosOnline o O sistema Webnode dlhe acesso a uma forma exclusiva de edio de documentos online sem ter de instalar qualquer programa.EditeosseusficheirosdoWord,Exceloudeimagens directamentenaWebnode.Nonecessitadenenhumprograma deediodetextooudegrficosnoseucomputador.apenas umadasmuitascaractersticasnicasdonossosistema. 8

ModelosGrtis o Escolhadeumacatlogocommaisde40modelosdewebsite gratuitos que pode depois configurar a seu gosto. Utilize um contedoespecialquemostradoglobalmenteemtodasassuas pginas,comoumasondagemglobal.Sequiserterumdesign verdadeiramenteoriginal,crieeimporteoseuprpriomodelo.O sistemaWebnodetambmlhepermiteeditarCSSecdigoHTML atravsdoseubrowser. UseoseuPrprioDomnio o Podeutilizaroseuprpriodomnio(ex:seusite.pt)eatribuloao seuprojectoWebnodegratuitamente.Podetambmregistarum novodomnioatravsdoportaldaWebnode. TransfernciaMltipladeFicheiros o Nuncafoitofciltransferirficheirosedirectoriascomopremirde um boto. Esquea os antiquados FTP ou formulrios web de transferncia de ficheiros. Utilize a gesto de ficheiros da Webnodeevejaosseusficheirosatransferiremserapidamente, facilitandoaomesmotempoaorganizaodeficheirosepastas. Nonecessitadeinstalarqualquerprogramanoseucomputador, apenasuseoseubrowser. MaravilhososGadgetseWidgets o O sistema Webnode tem uma lista de gadgets e widgets tais comoTags,GoogleMaps,LiveMaps,Yahoo! Maps,YouTube, Google Video, Soapbox, Flickr, Photobucket, Box.net, Windows Live SkyDrive, PollDaddy, Google Gadgets, YourMinis, SpringWidgets, PayPal e Google Checkout. Pode facilmente adicionarquaisquergadgetsdeterceiros. PubliqueTodasasMudanasdeumaVez o A publicao com um nico clique ir redifinir a forma como colocaoseuwebsitenaInternet.Faaagestodoseucontedo, faa uma prvisualizao, efectue alteraes e quando estiver satisfeito,cliquenumbotoespecialetodasassuasalteraes serocolocadasonlineevisveisparaopblico.Nonecessita dedescarregar,editarecarregarassuasalteraes,nuncamais!

1.2FuncionalidadesSociais
AWebnodetemumconjuntodefuncionalidadessociaisquepodemconstruir umacomunidadecentradanoseuwebsite.AWebnodenosesatisfazapenas comofactodepoderdesenharfantsticoswebsitescomasuatecnologia,de formagratuita.Tambmdesejaveroseuprojectoreceberdograndepblicoo interessequeelemerece. Favoritos&Partilha o Daosseusvisitantesaoportunidadedearmazenaraspginas maisinteressantesdoseuwebiste.Oferealhesapossibilidade de marcar as pginas favoritas. Esta tecnologia permite aos utilizadores coleccionar ou publicar os seus sites preferidos atravs de servios populares de bookmarking. A Webnode suportaatecnologiaFavoritos&Partilhaparaservioscomoo Del.ico.us,oDigg,oGooglebookmark,oFacebook,oTwittere muitos mais. Falta o seu servio de eleio? Pode facilmente adicionlovocmesmo. Tagging o Ajudeosseusvisitantesaencontrarinformaonoseuwebsite deformafcil.Useasnossasfuncionalidadesdetagging.Esta modernatecnologiasocialpermiteatribuirtagsaqualquercoisa noseuwebsitedeformaaquesejafacilmenteencontradopelo pblico. Associe tagsaosseusartigos, fotografias ou itensem listasdetalformaqueosleitorespossamrapidamentededuziro mbitodoseucontedoaopesquisarportags. RedireccionamentoRSS o A gesto de RSS essencial para websites que desejam disponibilizar novos fluxos de informao. A Webnode tem suporteparaRSSepodetambmredireccionarparacanaisde serviosRSSexternos(ex:FeedReader).umaformafantstica de aumentar o nmero de utilizadores. Entregue rapidamente notciasaosseusleitoreseavaliecomoqueosseusRSSfeeds estoacomportarsenaInternet.PartilheosseusRSSfeedscom quemdesejar. UtilizeServiosdeTerceiros o Se existir algum servio de terceiros (third party services) que deseja usar, o sistema da Webnode permite integrlos facilmente. Por exemplo, integre o Google Analytics para obter estatsticas detalhadas do site. Deseja utilizar o seu prprio 10

servioweb?EntointroduzaoseucdigoHTMLnummodelo Webnodeejest. ImensosGadgetseWidgets o Insira na sua pgina um mapa interactivo da Google, passe vdeosYouTube,partilheficheirosquetemnobox.net,adicione umterminaldepagamentoonlineatravsdaPayPaloupartilhe fotografias que tem no Flikr. Precisa de mais? Incorpormos directamente um gadget de galerias suportado pelo Google Gadgets,YourMinis,SpringWidgets,entreoutros. ModiqueQualquerFrasenaWebnode o OsistemaWebnodesuportaactualmentemaisde10idiomasem que pode construir o seu website. Falta a sua lngua? Pode traduziroumodificarqualquermensagemquesejausadanoseu Website.NoestlimitadoapenasaoIngls.OsistemaWebnode permite que os utilizadores entrem no sistema e reescrevam contedo de forma que as mensagens interactivas so substitudaspelasnovas,emqualquerlnguaquedeseje.

1.3CaractersticasdosPacotes
AWebnodeumsistemaquedisponibilizaumserviogratuitoquesupreas necessidades normais de construo do seu site. Alm disso, tambm disponibilizado um Servio Premium, que profissionaliza o seu projeto de internet,habilitandomaisferramentaseumservioavanado.ATabela1traz osserviosepreosdisponveisparawebsiteseaTabela2trazosserviose preosdisponveisparaoEshop:

11

Tabela1Preoseserviosdisponveisparawebsites

12

Tabela2PreoseserviosdisponveisparaEshop

13

1.4Suporte
Sejaumusurioinicianteouexperiente,vocpoderencontrarrespostaspara todas as suas perguntas e problemas. O suporte por email (suporte@webnode.com) ilimitado e est disponvel a todos os usurios, gratuitamente. Almdoemail,poeroserutilizadosoutrosmecanismos,como FAQPerguntasFrequentes o Se voc encontrar algum problema em nosso site, por favor consulte o nosso FAQ primeiro, l voc encontrar vrias sugestesedicasteis. FrunsdeDiscusso o Outro local onde voc pode encontrar respostas s suas perguntas no Frum. Podendo tambm trocar suas ideias e procurar por determinados servios (ex: est procura de webdesignespecficoparaoseusite)queenvolvamaWebnode.

14

PARTE2CONHECENDOOWEBNODE

2.1Criandoumaconta
ParautilizaroservioWebnode,necessriorealizarumcadastrogratuitoem suapgina(http://www.webnode.com).Paraisto,bastaclicarnolinkRegistre sejlocalizadonapginainicial,conformemostraaFigura3:

Figura3LinkparaciraodecontanoWebnode.

Pararealizaroregistro,necessrioquevocjpossuaumacontadeemail qualquer.Almdeinformarumacontadeemailvlida,vocdevedefinirum endereoparaseusiteasercriadoeumasenhadeacesso,comomostraa Figura4:

15

Figura4Paineldecriaodeconta.Percebaqueoendereodeseuwebsitereceber aterminao.webnode.com.br.

Oendereodeprojeto temde terno mnimo 3caracterese conterapenas letras(az),dgitos(09)ouumtrao().Oendereonodevecomearnem finalizarcomumtrao.Oemailquesolicitadoserveparaoenviodeuma chavedeativaoparaoseuwebsiteeasenha,porsuavez,Asenhadeve possuirpelomenosseiscaracteres.Posteriormente,deveseverificaroemail informadoparaativartodasasfuncionalidadesdaWebnode. Neste documento, criaremos um projeto com o nome tutorialexemplo. Colocaremosumemailqualquereumasenha.Seestivertudocorretoeno existiroutroprojetocomomesmonome,iroaparecerchecklistsconfirmando suasinformaes,comomostraaFigura5.Casosontrrio,iriaaparecerumX vermelhonaopoincorreta.

16

Figura5Confirmaodeinformaesprestadas.

Clicando em Registrese, iniciaremos uma simples configurao passo apasso.Destaforma,naetapa1deveremosescolheraopodeprojeto WebsiteouEshop.Nonossocaso,optaremospelacriaodeumwebsite. NestaetapaaindadevemosconfigurarumTtulo,queconsistenonomedosite (campoobrigatrio),slogan(umafrasedeefeitoqueaparecernaspginas campoopcional)eoidioma.AFigura6mostraateladopasso1:

Figura6Passo1:configuraodetipodeprojeto,ttulo,sloganeidioma.

17

Clicando novamente em Prximo, o passo serve para configurarmos um template, ou modelo, para o site. Esto disponveis vrios modelos, como mostraaFigura7.Sequisermosvisualizloprimeiramente,bastaclicarem Visualizar. Para selecionar um template em definitivo, basta clicar no seu botodeopocorrespondente.

Figura7AlgunsmodelosdisponibilizadospeloWebnode.Estaconfiguraodeveser realizadanoPasso2.

Porfim,oltimopassonoslevaparaaconfiguraodaspginasiniciaisa seremcriadas.Estaspginaspodemsercriadasouexcluidasposteriormente. Casoestejaemdvidaoudesejaconheceroquecadapginacontm,pde ser interessante selecionar todas as opes, como mostra a Figura 8, e remover depois as que no forem necessrias. bastante interessante tambmdeixarmosativadoosrecursosderedesocial,casoqueiramosque nossositesejaumambientedefcilcompartilhamentodeinformaes.

18

Figura8SeleodepginasaseremcriadasautomaticamentepeloWebnode.

Para finalizar, basta clicar no boto correspondente. A princpio, seremos automaticamente direcionados para o Webnode Builder, que, como foi verificado,umambientedecriaoeediodaspginaserecursosdonosso site.

2.2ConhecendooWebnodeBuilder
OWebnodeBuilderoambienteprincipaldonossoprojeto.Nestaferramenta, podemoscriar,excluireeditarpginaswebquecompemnossosite.AFigura 9trazumavisogeraldoBuilder:

19

Figura9VisogeraldoWebnodeBuilder.

A seguir, veremos brevemente a interface desta ferramenta. Todas as funcionalidadesdeconfiguraoestoagrupadasnabarradeferramentas,que estlocalizadanapartesuperiordoBuilder,comomostraaFigura10:

Figura10Barradeferramentas.

A barra de ferramentaspermite, porexemplo,adicionar e removerpginas, publicarevisualizarosite,adicionarcontedodetextoououtrosgadgetse realizardemaisconfiguraes. Logoabaixodabarradeferramentas,encontrasenossositepropriamentedito, conformemostraaFigura11:

20

Figura11Pginainicialdositerecmcriado.

Para editar outras pginas, basta navegar pelo menu lateral mostrado na Figura12(estemenupodeestar,logicamente,emoutraposio,dependendo dotemplateutilizado)eclicarnolinkdapginadesejada.

Figura12Menuprincipaldositerecmcriado

21

Todoobjetodentrodaspginascriadaspodesereditadoouconfigurado,basta clicarnolinklogoacimadoobjeto.Tambmpodeserexcludo,bastandoclicar noXemvermelho.Porexemplo,aFigura13mostraexemplosdeumacaixa detexto,umalistadepalavraschaveeumalistadeartigos,ondetodosestes objetospodemserconfigurados:

Figura 13 Objetos criados dentro da pgina inicial. Perceba que todos possuem a opodeedioouconfigurao.

Para inserir novos objetos, voc deve clicar no contedo correspondente e arratlo at uma regio livre, onde se encontra a mensagem Voc pode arrastarelargarumnovocontedooumoverumjexistenteparac.AFigura 14mostraumexemplodestaregio:

Figura 14Regiodeinserodenovosobjetos.Pecerbaque,nestafigura,estamos inserindoumacaixadetexto.

Todaalteraoqueforfeita,comoexcluso,adioouediodeobjetosdeve ser confirmada. Para isto, o Webnode Builder emite um aviso a cada modificao,queaparececomoumafaixaamarelalogoabaixodacaixade 22

ferramentas, como mostra a Figura 15. Para confirmar as alteraes, basta clicaremPublicar:

Figura15Barraamarela:Avisodeconfirmaodealteraesrealizadas.

2.3Editandocontedogeradoautomaticamente
Um provvel ponto de partida para criao do nosso site conhecendo e editandoocontedogeradoautomaticamentepeloWebnodenomomentoem queselecionamosaspginasqueiriamcomporinicialmentenossoprojeto. 2.3.1EdiodoMenu

Paraeditaromenu,bastaclicarnoseulinkdeedio,comojfoimostradona Figura12.Destaforma,estaremosacessandooeditordemenu,mostradona Figura16:

23

Figura16Editordemenu.

No Editor de Menu, podemos realizar algumas operaes e configuraes. Paraisto,bastapassarocursordomouseemcimadapginadesejadaeclicar nobotodacaixadeopesqueaparecer.AFigura17mostraesteprocesso:

Figura17Exibirconfiguraesdapgina.

24

Algumas operaes possveis so: mover (ou seja, alteraer a ordem de exibiodomenu),deletareadicionarpginas. Algumas configuraes interessantes que podem ser realizadas esto disponveisnaopoPropriedades.Clicandosenestaopo,temosumnovo painel(mostradonaFigura18),ondepodemosmodificaralgumaspropriedades da pgina, como ttulo, endereo, metatags (mecanismo utilizado para melhorarapesquisadeseusitepormotoresdebusca)etags.

Figura18Paineldemodificaodepropriedadesdapgina.

2.3.2Ediodecontatos

Outro objeto que pode ser configurado inicialmente o painel de contatos (Figura 19). Este painel serve para deixar informaes de como entrar em

25

contatocomosrepresentantesdosite,taiscomotelefone,emaileendereo. Paraeditarocontato,bastaclicarnoseulinkdeediocorrespondente.

Figura19Paineldecontatos.

Nopainelqueapareceraseguir,exibidonaFigura20,podemosdigitarestas informaes:

Figura20Paineldemodificaodecontatos.

Aproveite este captulo para conhecer todas as outras pginas do seu site, verificarseuscontedoseeditarosobjetospresentes.Posteriorente,veremos commaisdetalhesoutrasopesdecontedoeconfiguraesquepodemos realizar. 26

PARTE3OPERAESFUNDAMENTAIS

3.1Criarpginas

Para criar uma nova pgina, podemos utilizar o editor de menu. Mostrado anteriormentenaFigura16.Porm,demaneiramaissimplificada,existeuma atalho na barra de ferramentas especfico para isto, como mostra a figura abaixo:
Figura 21 Atalho para criao de novas pginas, localizado na barradeferramentas.

Clicando em Novo (Figura 21), podemos escolher o ttulo da pgina, sua pginaprincipaleummodelo,conformemostraaFigura22:

Figura22Paineldecriaodenovapgina.

AopaoPginaprincipalbastanteinteressante.Elapermiteescolheruma pginapaiparaaqueestamoscriando,possibilitando,destaforma,acriao 27

de subpginas. Imagine, por exemplo, que temos uma pgina chamada DetonadosdeJogos.Poderamoscriarsubpginasparadiferentesconsoles, comoPlayStation,XBox,NintendoWii,Atari.Dessamaneira,nossocontedo ficaorganizadohierarquicamente,comomostraafiguraabaixo:

Figura23Ilustraodoconceitodesubpginas.

Portanto,paracriarsubpginas,bastaclciarnoboto daopoPgina principal e escolher a pgina pai, ou seja, a pgina que a conter, como mostraaFigura24:

Figura24Paineldeescolhadapginapai.

28

3.2Navegarpelaspginas

Para editar outras pginas do nosso site, basta clicar sobre o link correspondente no menu principal, como j foi mostrado na Figura 11, ou podemos escolhe pelo painel de navegao, acesvel atravs do atalho na barradeferramentasmostradonaFigura25:

Figura25Paineldenavegaoentrepginasdosite.

3.3Excluirpginas

Podemos excluir uma pgina atravs do editor de menu, conforme j foi mostrado, e atravs de uma atalho localizado na barra de ferramentas, na seoPgina.Paraisto,devesenavegaratapginaquesequerdeletare clicarnoatalhoExcluir,comomostraafiguraabaixo:

29

Figura26Atalhoparaexclusodepginas(destaqueemlaranja).Percebaque,como navegamosatapginaProdutos,somenteelaserexcluda.

3.4Visualizarprojeto

O Webnode Builder permite que nosso site seja visualizado a qualquer momento. Para isto, basta acessar o atalho Ver da barra de ferrametnas, localizadonaseoPgina,comomostraafiguraabaixo:

Figura27Atalhoparavisualizaodosite.

ConformemostraaFigura27,temosduasopes:Visualizartrabalhoatuale Verpgina publicada. Na primeira opo exibida apgina conforme ela sermostradaaopblico,ouseja,deacordocomaltimapublicaorealizada 30

(lembrandoque,paraumamodificaosersalva,necessriopublicarmosa pgina primeiramente). A segunda opo realiza uma prvisualizao do trabalhoatual,comtodasasalteraesralizadas,mesmoqueaindanoforam publicadas.Estaltimaopointeressanteparavisualizarmoscomoficar determinadaalteraosemcomprometeroprojeto.

3.5Alteraroformatodapgina

Ainda podemos alterar o formato de apresentao da pgina, ajustando o nmerodecolunaseasuadisposionatela.Pararealizarestasmodificaes basta acessar, na barra de ferramentas, o atalho Formato da pgina e escolherolayoutdesejado,comomostraaFigura28:

Figura28Atalhoparamodificaodolayoutdapgina.

3.6Alterarpropriedadesdapgina

Existe tambm um atalho alternativo ao editor de menu para modificarmos algumaspropriedadesdapgina,acessvelatravsdobotoOpesnabarra deferramentas,comomostraaFigura29:

Figura29Atalhoparaalteraodepropriedadedapgina.

31

3.7Realizaruploaddearquivos

UmacontagratuitadoWebnodepermitearmazenarat100MBdearquivos. Para isto, temos que realizar o upload destesarquivos para o seu servidor atravsdoWebnodeBuilder.Cadaarquivopodeterat8MBdetamanho. Esta funcionalidade bastante interessante pelo fato de que, uma vez que nossosarquivosestonoservidorWebnode,podemosdisponibilizlospara downloadatravsdonossosite(estaoperaoservistamaisadiante). ParafazerouploaddeumarquivoparaoWebnode,bastaacessaroatalho Pastasdabarradeferramentas,localizadonaseoOutrasopes,como mostradonaFigura30:

Figura30Emdestaque,atalhoparauploaddearquivos.

Clicandonestaopo,oAdministradordeArquivos(Figura 31)seraberto. Atravs deste painel podemos carregar, mover ou deletar arquivos. Para facilitaraorganizaodenossosite,podemosaindacriarpastasparaagrupar arquivosquepossuamcorrespondnciaentresi.

32


Figura31Administradordearquivos.

Clicando na opo Carregar arquivos, um novo painel de carregamento aparecer(Figura 31),ondepoderemosprocurartalarquivodentrodenosso ambientedesktopefazerseuuploadparaoservidorWebnode.Estearquivo podeserutilizadopara,principalmente,serdisponibilizadoparadownloadou, nocasodeimagens,modificaralgumelementodosite,comoocabealho,por exemplo. Da mesma forma que possvel realizar upload de arquivos, tambm possvel realizar o upload de imagens, basta acessar o atalho Imagens, mostradonaFigura32:

Figura32Emdestaque,oatalhoparaoAdministradordeimagens.

Porfim,importanteressaltarquenemtodosasextensesdearquivosso suportadaspeloWebnode.Aprincpio,sabesequedocumentosdomicrosoft 33

Office2003(doc,xls...),arquivospdfeasextensesdeimagemGIF,JPEGe PNGsosuportadas.JdocumentosdoOpenOffice.org,porexemplo,noso suportados.

3.8Alteraesnaestruturadaspginas

AcessandooatalhoEstruturadabarradeferramentas(Figura33)podemos modificaromodelodosite(aqueleescolhidonasetapasiniciaisdecriaode umprojetonoWebnode),colocarumlogotipo,modificaronomeeoslogando site,adicionarinformaesdecontatoemudaraimagemdaspginas(Figura 34). importante ressaltar que as modificaes ou contedos adicionados atravsdoatalhoEstruturaserovisualizadosemtodasaspginas.

Figura33Emdestaque,oatalhoparamodificaesnaestruturadaspginas.

34

Figura34Paineldemodificaesnaestruturadaspginas.

3.9CabealhoeRodap

Paraacessaraopodeconfiguraodocabealho,bastaacessar,nabarra de ferramentas, o link Configuraes e, em seguida Cabealho do Site, comomostraaFigura35:

35

Figura35Acessoconfiguraodecabealho.

Nopaineldeconfiguraodocabealho(Figura 36),poderemosmodificaro Ttuloeslogandosite,almdeinserirumlogotipopersonalizado(quepoder ser, a princpio, qualquer arquivo de imagem) e modificar a imagem que exibida em todasas pginas. Esta ltima imagem recomendase que tenha umalargurade850pxeumaalturade180px.

36

Figura36Paineldeconfiguraodecabealho.

Paramudaraimagemdocabealho,porexemplo,necessriofazeroupload deumarquivodeimagem.Paraisto,oWebnodepossuiumgerenciadorde imagensearquivos,queseroanalisadosposteriormente. AcessandoolinkConfiguraesedepoisRodapnabarradeferramentas, poderemos modificar, basicamente, o texto exibido no rodap e inserir um cdigo HTML, conforme mostra a Figura 37. Neste caso, como est sendo utilizadooserviogratuito,existemalgumaslimitaes.

37

Figura37Paineldeconfiguraodorodap.

3.10ConfiguraesdeRSS
SegundoaWikipdia,RSS(ReallySimpleSyndication2.0)umatecnologia que permite que usurios da internet obtenham diferentes contedos disponibilizadosporsitesquefornecem feedsRSS (arquivoXMLquepossui contedo Web ou resumos de contedo juntamente com os links para as versescompletas deste contedo e outros metadados).Dessa forma,uma pessoaqueseinscreveemum feed RSSpodepermanecerinformadosobre diversasatualizaesemdiferentessitessemprecisarvisitlosumaum. ParafazerousodeRSScomoleitor,existemdoisesquemas: O primeiro seria fazer o uso de um programa cliente, tambm denominadodeagregador.NelesoincludososRSSqueoutilizador desejaacompanhar; Osegundomeiofazerumregistoemsitesespecficosenelesincluir osRSS que deseja acompanhar. So agregadores via navegadorou browser.

Uma grande funcionalidade do Webnode a possibilidade de o seu site disponibilizar ou produzir feeds RSS, ou seja, disponibilizar aos seus possveisvisitantesinformaesdeatualizaesmaisfcilerapidamente.

38

OsfeedsRSSdeumsitecriadonoWebnodeestodisponveisparapossveis usuriosouvisitantedoseusiteatravsdeummenu(Figura38)localizadono canto superior ou inferior das pginas, dependendo do modelo escolhido inicialmente.

Figura38Emdestaque,linkparaosfeedsRSSdeumsiteWebnode.

ClicandonolinkindicadonaFigura38,somosredirecionadosaumapgina quecontmasURLs(endereosweb)dosseusfeedsRSS,comomostraa Figura39:

Figura 39 Pgina que contm enderecos dos feeds RSS disponveis por um site criadonoWebnode.

Atravsdestesendereos,possveisusuriosouvisitantespoderiamcopilos paraseuleitoresdeRSSeficarsabendodasatualizaesrealizadasemtodo oseusiteouemumtpicoespecfico.Geralmente,todalistaeartigo(veremos esteobjetomaisadiante)criadosemseusiterecebemumendereodefeed RSS. Podemos ainda realizar pequenas configuraes no RSS, como formato e rodapdamensagem,bastaclicarnolinkConfigurarRSS(verFigura39). 39

3.11ConfiguraesdeFavoritos

As opes de Favoritos e Compartilhamento permitem que os visitantes compartilhemocontedodoseusitenoDel.icio.us,Facebook,Digg,Google Bookmarksemuitosoutros.Oserviodecompartilhamentopadroutilizado peloWebnodeoAddThis(http://www.addthis.com/).Esteservioadicionaum botodecompartilhamentoemtodoartigocriado,comomostraaFigura40:

Figura40Pginadeumartigodetestecriado.Logoabaixodoartigo,temosobotode compartilhamentodoAddThis.

Destaforma,passandoomousesobreobotodoAddThis,podeseescolhero servio para o qual desejase compartilhar tal artigo criado. importante lembrar que, para um visitante do nosso site compartilhar nosso artigo, ele deverealizarloginnoservioparaoqualirdisseminlo.

40

PARTE4ADIODECONTEDODINMICO

Nesta seo do tutorial passaremos a examinar com mais detalhes os diferentescontedosdisponibilizadospeloWebnodequepodemosadicionarao nossosite.Relembrando,parautilizaralgumtipodecontedoaonossosite, basta clicar sobre ele arrastlo at o local indicado, conforme j vimos na Figura13.

4.1ObjetosTextoeImagem
Oobjeto Texto eImagens (Figura 41) oprincipal elemento que podemos adicionar. Atravs dele, podemos desde escrever textos simples at inserir links,imagens,arquivosparadownloadecontedomultimdia,comovdeosdo YouTube.

Figura41Linkparacriaodeumacaixadetexto.Parautilizlo,deveseclicarsobre eleearrastloatumlocalindicado.

Apsarrastloparaumlocalvlido,temosqueclicaremEditarcontedo para que possamos realizar alteraes. Este boto mostrado na figura abaixo:

Figura42Botoparaediodacaixadetexto.

41

ClicandoemEditarcontedo,umnovopainelabrir(Figura43).Nestepainel, podemosdigitareformatarumtexto,adicionarimagens,introduzirmarcadores, aumentaroudiminuiropargrafo,inserirlinks,inserirarquivosparadownload, inserirtabelaeinserircdigoHTML.

Figura43Paineldeediodecaixadetexto.

4.1.1EdiodeTexto

O processo de edio de texto bastante parecido com o realizado em programaseditoresdetexto,comooMicrosoftWordouoOpenOfficeWriter, porexemplo.Portanto,bastadigitar(oucolar)otexto,selecionloerealizara formatao desejada, clicando sobre o atalho correspondente. A Figura 44 mostraexemplosdeformataessimplespossveis:

Figura44Diferentesformataesrealizadasatravsdopaineldeediotexto.

42

4.1.2Inserirlinks Paraconstruirumlinkparaumapginaexternaoudoseuprpriositebasta digitaroendereodosite(ouumapelido),selecionloeclicarnoboto Aoclicarmosnobotodeediodelink,oseguintepainelaparecer: .

Figura45Paineldeediodelink.

Neste painel podemos digitar o endereo do site que desejamos abrir (no campo indicado por URL) ou escolher uma pgina do nosso prprio site, clicando no boto Selecionar link. A opo Abrir um uma nova janela permitequeestelinkabraumanovajaneladonavegadorparaexibirosite desejado. Por fim, para inserir definitivamente o link, basta clicar no boto Inserir.Afiguraabaixomostraexemplosdealgunslinkscriados:

43

Figura46Exemplosdelinksparapginasexternaseinternascriados.

4.1.3Inserodeimagem

Parainserirumaimagem,bastaclicarnoboto .Estebotonoslevaparao Administradordeimagens,quefoivistoanteriormente.Seaimagemaindano estcarregada,podemosfazerseuuploadnormalmente. UmavezqueaimagemjseencontranoservidorWebnode,parainserilana pginabastaselecionlaeclicaremInserir,comomostraafiguraabaixo:

Figura47Inserodeimagem.Percebaquenecesrioselecionar(checkboxnocanto superioresquerdo)aimagemeclicarnasetaverdedirecionadaparabaixoparainserila.

44

Umavezqueinserimosaimagemnacaixadetexto,podemosmodificarde suaspropriedades.Paraisto,bastaclicarcomobotodireitosobreaimageme selecionaraopoPropriedadesdaimagem. Conforme mostra a Figura 48, podemos alterar, entre outras, as seguintes propriedades:descrio,largura,alturaealinhamento.

Figura48Paineldepropriedadesdaimagem.

4.1.4Inserodearquivoparadownload

Dentrodeumprocessoparecidocomainserodeimagens,podemoscolocar arquivosparadownload.Paraisto,devemosclicarnoboto .Esteboto nos leva agora para o Administrador de arquivos, que tambm foi visto anteriormente. Depois de realizar o upload do arquivo para o servidor Webnode,bastaselecionlo,clicarnalistadeopeseselecionarInserir, comomostraafiguraabaixo:

45

Figura49Inserodearquivosparadownload.

Umavezinseridooarquivo,eleaparecernacaixadetextocomoumlink,que contmonomeeextensodoarquivoeoseutamanho(porexemplo,Histria do8demaro.doc(26kB)).Clicandonestelink,ovisitantedeseusitepode baixaroarquivoparaseucomputadorpessoal.

4.1.5InserircdigoHTML

SegundoaWikipdia,HTML(acrnimoparaaexpressoinglesaHyperText MarkupLanguage,quesignificaLinguagemdeMarcaodeHipertexto)uma linguagemdemarcaoutilizadaparaproduzirpginasnaWeb,deformaque estaspginaspossamserlidaspelosnavegadores(browsers). Existemvriossitesnainternetquedisponibilizamfuncionalidadesatravsde cdigo HTML. Para exemplificar o processo de insero de cdigo, iremos inseriremnossapginaumgadgetdeprevisodetempodoCPTEC/INPE. Primeiramente, temos que acessar a pgina do CPTEC em http://www.cptec.inpe.br/.Ento,devemosprocurarpelogadgetSeloWebe clicaremPrevisodoTempo,conformemostraafiguraabaixo:

Figura50GadgetdeprevisodotempodoCPTEC/INPE.

46

Ento,devemosconfiguraroseloecopiarocdigoqueaparecerlogoabaixo, comomostraaFigura51:

Figura51ObtenodocdigoHTMLaserinseridononossosite.

Umavezcopiadoocdigo,devemosvoltarparaoWebnodeBuildereabrir umacaixadetextoparaedio.Dentrodacaixadetexto,temosqueclicarno boto . Dentro do painel de insero de cdigo HTML, devemos colar o cdigoquecopiamosdositedoCPTECanteriormente,comomostraaFigura 52:

Figura52CpiadocdigoparadentrodopainelHTMLdacaixadetexto.

47

Porfim,bastaclicaremInserirparaqueoselodeprevisodotempoesteja disponvelemnossapgina.

Figura 53 Selo de previso do tempo dentro inserido em uma caixa de texto do Webnode.

Damesmaformaqueinserimosumselodeprevisodotempoatravsdeseu cdigo HTML disponibilizado pelo CPTEC/INPE, poderamos, por exemplo, adicionarumvdeodoYouTubeaonossosite.Paraisto,bastaacessarosite www.youtube.com, buscar um vdeo desejado e obter seu cdigo HTML. A Figura54mostraondeobterocdigoHTMLdeumvdeo:

48


Figura54ParaobterocdigodeumvdeodoYoutube,bastaconfigurarsuaexibioe copiarocdigodisponvelnaopoIncorporar.

4.1.6Inserirtabela Oprocessodeinserodetabelasbastantesimples.Bastaclicarnoboto econfiguraralgumaspropriedades,mostradasnaFigura55:

Figura55Criaodetabelas

49

Depoisdeeditadassuasconfiguraes,parainseriratabelabastaclicarem OK. Uma vez inserida, podemos realizar, basicamente, as mesmas operaes realizadas com tabelas criadas no Microsoft Word e OpenOffice Writer,porexemplo.Paraisto,temosqueclicarcomobotodireitodomouse sobreatabelaeselecionaraoperaodesejada,comomostraaFigura56:

Figura56Operaessobretabelas.

possveladicionareremoverlinhasecolunas,excluiratabelainteira,alterar algumas propriedades definidas e mesclar clulas, por exemplo. Podemos aindaalterarseutamanhoclicandosobreumdosquadradosqueaparecem nasbordasdatabela(videFigura56)earrastandooparaadireodesejada, aumentandooudiminuindodestaformaasdimensesdestatabela.

4.2ContedosDemaisobjetosdisponveis
Nestaseodaremoscontinuidadeverificaodofuncionamentodosdemais objetosdisponveisparaadicionarmosemnossaspginas.

4.2.1Enquete Um enquete , basicamente, uma pesquisa de opinio. No objeto enquete, podemos digitar uma pergunta e configurar as possveis respostas, como mostraaFigura57:

50

Figura57Criaoeconfiguraodeumaenquete.

Parainserirnovasrespostas,bastaclicarsobreobotoAdicionarresposta. Porfim,bastaclicaremOK.Afiguraabaixomostracomoficaumaenquete dentrodoambienteWebnodeBuilder:

Figura58Exemplodeumaenquete.

4.2.2Frum Ofrumumambientedediscussosobredeterminadosassuntos.Paracriar umfrum,temosquedefinirumttulo,geralmenterelacionadoaoproblemaa serdiscutido(Figura59). 51

Figura59Definiodettuloparaofrum.

Depoisdecriado(Figura60),podemosalteraralgumasconfiguraes,como mostraaFigura61:

Figura60Exemplodefrumcriado.

52


Figura61Confuiguraesdofrumcriado.

4.2.3GaleriadeFotos Agaleriadefotosumambientequeagregadiferentesarquivosdeimagem. Tambm necessrio definirmos um nome para a Galeria a ser criada, a exemplo do que foi feito na criao do frum. Em seguida, ser aberto o gerenciadordeimagens,cujofuncionamentojconhecido.Anicadiferena quenoexisteumbotochamadoparainserirumafotonagaleria,basta apenascarreglaparaogerenciador.Elaadicionadaautomaticamentepara agaleriadefotos.AFigura62mostraumexemplodegaleriacriada:

Figura 62 Exemplo de galeria de fotoscriada.Nomomento,elapossuiapenasumafoto.

53

DeacordocomaFigura62,possvelealizarduasmodificaesnagaleria: editareconfigurar.AopoEditargaleriapermiteadicionarouremoverfotos eaopoConfiguraespermiteajustarasseguintespropriedades:

Figura63Configuraespossveisdealteraoemumagaleriadefotos.

4.2.4ListaseArtigos

Os objetos listas e artigos possuem praticamente o mesmo mecanismo de funcionamento. A diferena que um artigo geralmente se trata de uma informao mais detalhada, que dada com certa regularidade, como por exemplo, um blog. Por isso, quando criamos um novo artigo o Webnode automaticamente armazena sua data de publicao. J uma lista mais simples,serveparaelencarmosquaisquerelementos,comoporexemplo,lista deprodutosoulinksquevocachainteressante. Noprocessodecriaodeambos,devesedefinirumttuloinicial.AFigura64 mostra,respectivamente,exemplosdeumgrupodeartigoseumalistacriada:

54


Figura64Exemplosdeseodeartigoseumalista.Precebaqueambosestovazios.

Podemosadicionarumnovoartigoouumnovoitemdeumalistaclicandono botomaisesquerdadoobjetocriado.Nestecaso,abrirosseguintepainel:

Figura65Paineldeadiodenovoartigo.Opaineldeadiodeumnovoelemetnoa umalistabastantesemelhante,comanicadiferenadeque,alistanoarmazenaa informaodedatadepublicao.

55

Comrelaosconfiguraes,possvelrealizarosseguintesajustes:

Figura66Paineldeconfiguraodeartigoselistas.

4.2.5Widgets

SegundoaWikipdia,umwidgetumcomponentedeumainterfacegrfica dousurio,oqueincluijanelas,botes,menus,cones,barrasderolagem,etc. Outro emprego do termo so os widgets da rea de trabalho, pequenos aplicativos que flutuam pela rea de trabalho e fornecem funcionalidades especficasaoutilizador. O Webnode Builer traz uma srie de widgets que podem ser adicionados automaticamenteou,sefordesejado,novoswidgetspodemseradicionados atravsdecdigo,aexemplodoquefoirealizadocomoselodeprevisode tempo anteriormente. A Figura abaixo traz algumas categorias de widgets disponveis:

56

Figura67Categoriasdewidgetsdisponveis.

Comosugesto,umbomservidordewidgetsoGoogleWidgets,disponvel nolinkhttp://www.google.com/ig/directory?synd=open

57

PARTE5CONSIDERAESFINAIS

5.1AdministraodeProjetos

Esta parte dedicada a verificar algumas opes que aparecem quando ralizamosloginnosistemaWebnode.Apsologin,somosredirecionados pginadeprojetos.Nestapgina,podemosabrir,visualizaroudeletaroucriar umnovoprojetodesite,comomostraaFiguraabaixo:

Figura68PginainicialapsloginnosistemaWebnode.

Clicando em Conceber Website, temos o painel de Administrao, onde podemosrealizaralgumasoperaes(Obs:Foramlistadosnestafiguraapenas osserviosdisponveisparautilizaogratuita):

Figura69Pginadeadministraodeumprojetodesite.

OEditordeWebsiteoWebnodeBuilder,comoqualtrabalhamosamaior parte do tempo. A opo Estatsticas de website permite acompanhar as 58

visitaes realizadas ao seu site. Tratase de uma ferramenta bastante interessante, que vale a pena dar uma olhada. A opo Administrao de usuriopermiteconvidarum,eapenasum,novousurioparacolaborarno seuprojeto(noprecisotercontanosistemaWebnode).Porfim,aopo SuportepermiteenviaumamensagemparaaAdministraodoWebnode.

5.2Outrosserviosdisponveis

AlmdoWebnode,existemoutrosserviosdecriaodesitesquepossuem, basicamente,asmesmascaractersticas.Porexemplo,podemsercitadosos servios Wix(http://www.wix.com/) Googlesites(sites.google.com/) Weebly(http://www.weebly.com/) Yola(http://www.yola.com/)

Todas estas ferramentas possuem caractersticas semelhantes, porm o Webnode consegue aliar flexibilidade e leveza (em termos de navegao), disponibilidade de recursos e facilidade de uso. Por isso, este tutorial se concentrounestaferramentaespecfica.

5.3Concluso

Estetutorialapresentouumavisogeralsobreaferramentadecriaodesites Webnode. Foram verificadas diversas funcionalidades disponveis, como o editordesitesBuildereoanalisadordeacessosStatistcsetambmdiversos contedos dinmicos que podem ser adicionados ao website criado, como arquivos,imagens,enquetes,fruns,listaseartigos,porexemplo. Atravsdautilizaocotidianadestaferramenta,podesedizerqueoWebnode umconstrutordesitesfcildeutilizar,bastantediversificadoemtermosde modelos e contedos disponveis e leve, no necessitando de grande velocidadedeconexoerecursosdehardwareavanadoparautilizlo.

59

Pdeseconstataraindaumagrandeflexibilidadeecomunicabilidadeporparte doWebnode,atravsdetecnologiascomoformulriosdeenviodemensagens, formulrios de comentrios, blogs, RSS e o servio de compartilhamento AddThis,quepermite compartilharumcontedoemoutrosservioscomoo Twitter,FacebookeDe.lici.ou.s,porexemplo.Comoaspectonegativopodeser citadoofatodenohaversuporteparaalgunsformatosdearquivos.

5.4Referncias

Ocaptulo1foiretiradodositewww.webnode.com AlgunsconceitostcnicosforampesquisadosnaWikipdia,aencilopdialivre.

Paraenviarpossveisdvidasousugestesdemelhoriadestetutorial,envie umemailparava.vinicius@gmail.comoupeloTwitter http://twitter.com/videsouza/ Obrigado.

60

61