Manual Ufcd 0152-Estrutura de Um Stio Para Internet Final

INSTITUTO DO EMPR EGO E FORMAÇÃO PROFISSIONAL, IP DELEGA DELEGAÇÃO ÇÃO REGION REGIONA A L DO NORTE CENTRO DE EMPREGO E FORMAÇÃO PROFISSIONAL DE VIANA DO CASTELO-SERVIÇO DE FORMAÇÃO PROFI SSIONAL

MÓDULOS

UFCD 0152 – strutura de um Sítio p ra Internet UFCD 0153 – Finalização de um sí io para Internet REFERENCIAL

Referencial 13006 - Técnico/a de Multimédia, Nível 4

Formador: Paulo Garrido

Data Início Data Fim Duração

24/04/2013 20/05/2013 50 Horas


Barcelos


Barcelos

INSTITUTO DO EMPR EGO E FORMAÇÃO PROFISSIONAL, PROFISSIONAL, IP DELEGA DELEGAÇÃO ÇÃO REGION REGIONA A L DO NORTE CENTRO DE EMPREGO E FORMAÇÃO PROFISSIONAL DE VIANA DO CASTELO-SERVIÇO DE FORMAÇÃO PROFI SSIONAL

�� Sítio Para Internet ........................................................... ................................................................... ............................ ..... ................................. ................................. 1 Definição ............................ ............................ ............................................ ................................................................... ............................ ..... ................................. ................................. 1 Organograma ...................... ............................................ ................................................................... ............................ ..... ................................. ................................. 1 Pastas e Ficheiros ........................................................... ................................................................... ............................ ..... ................................. ................................. 2 Esquemas de navegação ................................................. ................................................................... ............................ ..... ................................. ................................. 3 Linear ................................. ................................. ............................................ ................................................................... ............................ ..... ................................. ................................. 3 Árvore................................. ................................. ............................................ ................................................................... ............................ ..... ................................. ................................. 3 Estrela ................................. ................................. ............................................ ................................................................... ............................ ..... ................................. ................................. 4 Mista ................................... ................................... ............................................ ................................................................... ............................ ..... ................................. ................................. 5 Não Linear ........................ ............................ ............................................ ................................................................... ............................ ..... ................................. ................................. 5 Ligações entre ecrãs ....................................................... ................................................................... ............................ ..... ................................. ................................. 6 Coerência e funcionalidade das ligações ........................................... .................................................... ......... ................................. ................................. 6 A Interface .......................... ...................................................................... ................................................................... ............................ ..... ................................. ................................. 7 Design................................. ................................. ............................................ ................................................................... ............................ ..... ................................. ................................. 7 Cores................................... ................................... ............................................ ................................................................... ............................ ..... ................................. ................................. 8 Textos ................................. ................................. ............................................ ................................................................... ............................ ..... ................................. ................................. 8 Imagens .............................. .............................. ............................................ ................................................................... ............................ ..... ................................. ................................. 9 Outros ................................. ................................. ............................................ ................................................................... ............................ ..... ................................. ................................. 9 Os dez dez maiores maiores erros erros em Web Design .............................................. ....................................................... ......... ............................... ...............................10 10 Tipos de Páginas............................................................. ................................................................... ............................ ..... ............................... ...............................12 12 Editor de Páginas Web – Weebly .............................................. ............................................................... ................. ............................... ...............................13 13 Escolha um Tema ........................................................... ................................................................... ............................ ..... ............................... ...............................14 14 Adicionar Elementos .......... ...................................................... ................................................................... ............................ ..... ............................... ...............................16 16 ................................. ............................................ ................................................................... ............................ ..... ............................... ...............................16 16 Título ................................. ......................... ............................................ ................................................................... ............................ ..... ............................... ...............................16 16 Parágrafo ......................... ................................................................... ............................ ..... ............................... ...............................16 16 Parágrafo com título ................................................. Imagem ............................. ............................. ............................................ ................................................................... ............................ ..... ............................... ...............................17 17 ................................................................... ............................ ..... ............................... ...............................17 17 Parágrafo com Imagem............................................ ............................................................... ................................................ ...............................17 17 Colunas / Múltiplas Colunas .............................................. .............................. ............................................ ................................................................... ............................ ..... ............................... ...............................17 17 Divisor .............................. ................................................................... ............................ ..... ............................... ...............................17 17 Adicionar Página ........... ............................................ ................................................................... ............................ ..... ............................... ...............................17 17 Adicionando Editores............................................... ................................................................... ............................ ..... ............................... ...............................18 18 Formulário de Contato ............................................. Galeria de Imagens ................................................... ................................................................... ............................ ..... ............................... ...............................18 18 ................................ ............................................ ................................................................... ............................ ..... ............................... ...............................18 18 Slides ................................ Modi Modifi fica carr o Dese Desenh nho o d Página ............................................ ......................................................... ............................................ ...............................18 18 ................................................................... ............................ ..... ............................... ...............................18 18 Como Modificar: ............ ............................................ Prim Primeir eiros os elem element entos: os: Adici Adici nar texto ao site ............................................ .............................................. ............................... ...............................19 19 Prim Primeir eiros os elem element entos: os: adici adici nar imagens a um site .................................... .................................... ............................... ...............................21 21 Colocar elemento colunas .............................................. ................................................................... ............................ ..... ............................... ...............................26 26 Criar Criar mais mais páginas páginas para para o s u site ............................................. .............................................................. ................. ............................... ...............................27 27 Criar um link de navegação para outro site ............................................... ................................................. ............................... ...............................30 30 Mudar Temas e editar Font s ............................................ .................................................................... .......................... ............................... ...............................31 31 Editar o cabeçalho .............. .......................................................... ................................................................... ............................ ..... ............................... ...............................34 34

INSTITUTO DO EMPR EGO E FORMAÇÃO PROFISSIONAL, IP DELEGAÇÃO REGIONA L DO NORTE CENTRO DE EMPREGO E FORMAÇÃO PROFISSIONAL DE VIANA DO CASTELO-SERVIÇO DE FORMAÇÃO PROFI SSIONAL

Links de Texto ............................................................................................ ...............................37 Links em Imagens ...................................................................................... ...............................40 O elemento de botão ................................................................................... ...............................43 Criar um Slideshow Image ...................................................................... ...............................45 Utilizar o Leitor de Vídeo .......................................................................... ...............................48 Utilizar o Audio Player .............................................................................. ...............................50 Elemento de vídeo YouTube ...................................................................... ...............................51 Iniciar um novo blog .................................................................................. ...............................52 Criar um Formulário de co tacto básico .................................................... ...............................56 Publicar o seu Site ...................................................................................... ...............................58


�� Imagem 1 - Organograma .............................................................................. ................................. 2 Imagem 2 - Pastas .................. ........................................................................ ................................. 2 Imagem 3 - Ficheiros...................................................................................... ................................. 2 Imagem 4 - Estrutura Linear .......................................................................... ................................. 3 Imagem 5 - Estrutura em Árv re.................................................................... ................................. 4 Imagem 6 - Estrutura em estrela .................................................................... ................................. 4 Imagem 7 - Estrutura Mista ............................................................................ ................................. 5 Imagem 8 - Ligações entre ec ãs .................................................................... ................................. 6 Imagem 9 - Escolha do tema .......................................................................... ...............................14


Sítio Para Internet Uma página web, também c nhecida pelo no inglês webpage, é uma " ágina" na world wide web, geralmente em format HTML e com ligações de hipertexto que p rmitem a navegação de uma página, ou secção , para outra. As páginas web usam co frequência ficheiros gráficos associados para fins de ilustração, e também este s ficheiros podem ser ligações clicáveis. Uma página web é apresentada com recur so a um navegador, ou browser, e pode ser cons truída por forma a recorrer a applets (subp rogramas que correm dentro da página), que mui tas vezes fornecem gráficos em movime to, interação com o utilizador e som. É difícil conseguir uma receit mágica capaz de assegurar que um Web S ite vá agradar a todos os utilizadores. Existem cont do, algumas orientações e princípios, que podem contribuir para a conceção de Web Sites efic azes.

Definição Tema: identificação do assun o e da ideia principal do site. Objetivos: identificação da f unção que o site vai desempenhar. Prete de-se dar resposta a questão: para quê? Como e qualquer projeto temos de ter em mente d eterminados objetivos a atingir. Destinatários: Identificação e caracterização da "audiência" (utilizado res), que idade, que experiência possuem, porque razões podem visitar o site. Pretende-se d r resposta à questão: para quem? Deve fazer-se c m que os visitantes da nossa página não s sintam defraudados, para tal a página deve conter conteúdo significativo. Temos de ter consci ência que quem visita a nossa página, procura al uma informação. É fundamental que o isitante localize essa informação. Se a página não a possuir, deve orientar no sentido de ser lo alizada.

Organograma Uma vez conhecidos os ob etivos e a audiência da página, é altura de ver como vamos apresentar a informação. riamos então um diagrama com a est rutura das páginas, agrupadas por tópicos.

1


Imagem 1 - Organograma

Pastas e Ficheiros Depois de termos as páginas construídas, devemos guardá-las em pasta , por tópicos. Uma pasta é um “sítio” onde ode armazenar ficheiros. Por exemplo criamos uma p sta para todas as imagens, outra para do umentos, etc. Podem conter ficheiros, mas também podem conter outras pastas (subpastas).

Imagem 2 - Pastas

Imagem 3 - icheiros

2


Esquemas de navegação A estrutura deve permitir vis ualizar de forma fácil e clara, os conteúd s de um conjunto de páginas Web. Uma estrutur deficiente, pode produzir no espectador a sensação de estar perdido e incapacidade de en contrar a informação procurada, o que cond uzirá ao abandono da página. A estrutura deve dar uma idei a geral da organização da informação e co sequentemente situar melhor os utilizadores. Uma oa estrutura, facilita a navegação, porque requer menos esforço cognitivo e ajuda a uma melh r assimilação da informação. A estruturação da informaçã pode depender muito do conteúdo do site , das finalidades e do tipo de utilizadores (deficiênci as, experiência, etc.) São várias as estruturas para organização da apresentação. A seguir apresentam-se algu as:

Linear Este tipo de organização é a forma que tradicionalmente tem sido usad , desde as inscrições em pedra, até ao vídeo dos n ssos dias. O hipertexto/hipermedia é int rinsecamente não linear, o que não é sinó imo de incapacidade para suportar a sequencialid de. A informação linear está organizada de forma a que, para ser recuperada, não necessita re erências a si mesma ou outras informaçõe externas. Só existem duas possibilidades de nave gação: para a frente ou para trás. É perf eitamente fiável, mas monotonamente previsível, s guindo a lógica tradicional da transmissão d a informação.

Imagem 4 - Estrutura Linear

Árvore Este tipo de estrutura é ta mbém bastante familiar. Esta estrutura simples é a base da classificação, da organizaçã administrativa ou das árvores genealógic as. A organização do conteúdo, na base hipertext faz-se de forma hierárquica, com a infor mação mais geral no 3


topo, e a mais detalhada, m níveis mais baixos, submetida à mais geral. Todos os nós descendem de uma raiz com m. De cada nó podem sair múltiplas ligaçõ es para outros nós de nível inferior na hierarquia.

Imagem 5 - Estrutura em Árvore

A organização hierárquica re ultante, ajuda o utilizador a criar um mode lo mental coerente da base da informação.

Estrela Estas estruturas caracteriza -se por possuírem um nó central e princi al, e um conjunto de nós ligados a este. A passag m de um nó a outro requer sempre o regr sso ao "local central". Adapta-se a conteúdos, ond , por exemplo, existe um tópico principal, do qual fazem parte vários sub-tópicos. Ícones n sse nó principal, podem estabelecer ligaç es a conteúdos mais específicos desse assunto, r egressando de novo ao local central para o estabelecimento de uma nova ligação.

Imagem 6 - Estrutura em estrela

4


Mista O diagrama mostra um tún l colocado numa estrutura de roda. Isto é, o utilizador chega a uma página (de uma roda) que é o início de uma sequência que v cê gostaria que ele visitasse (o túnel). Poderá até combinar sites istintos num esquema de navegação mist . Considere um site sobre desporto que tem estr utura de roda ou cadeias de rodas. Na seçã o sobre ténis, há um link para o site de uma esco linha de ténis que tem estrutura de túnel, a resentando a escola e no final, um formulário de inscrição. Assim combina os sites estrategic amente.

Imagem 7 - Estrutura Mista

Não Linear

5


Ligações entre ecrãs Uma etapa importante na con ceção do Web site é a conceção do sistem de navegação. É um componente da interface, muito dependente da estruturação da informaç ão e é constituído por todas as ligações e hiperliga ões. É o sistema de navegação que perm ite mover-nos através das diferentes páginas, crian o as condições e estilos de interatividade.

Imagem 8 - Ligações entre ecrãs

Coerência e funcionalidade das ligações Os sistemas de navegação p dem ser constituídos por:  Sequências utilizadas para ir para a página seguinte e anterior, ta bém utilizadas pelos browsers. Barras de navegação (botões ou menus), podendo ser constituíd as por itens de texto,  itens gráficos, ou as uas coisas. Contém apenas as ligações pr incipais. As barras de navegação podem e tar sempre presentes em todas as pági as, estar apenas na principal, ou nos nívei fundamentais.  As barras ou menus não devem ser muito extensas, isto é, não devem possuir demasiadas opções. Ligações de deslocaç o para o início e fim de página, no caso de ta necessitar de barra  de deslocação vertical .  Ligação de deslocaçã , em todas as páginas, para a página princi pal. Existem outras estru turas de navegação que se podem us r, como os índices,  6


formulários de pesqui sa, mapas ou esquemas do site, que pod m ser utilizadas para que o utilizador recup re rapidamente a informação e não se deso riente no site. Depois de concebido o sis tema de navegação, devem ser testados todas as ligações e verificar se funcionam como se esperava. Verificar que todas as ligaçõe s fazem sentido, isto é, existem por uma razão ló gica. Não colocar ligações que conduzam mensagens de erro (404 File Not Found). Evitar estabelecer ligações que conduzam a págin as em construção. Não colocar a página na Int rnet sem tudo estar funcional. Deve convidar alguém, out ra pessoa (ou pessoas) para fazer o test da funcionalidade, verificar as dificuldades encontradas, a correção ortográfica, e se tudo funcionar corretamente considera-se Web site validado.

A Interface O desenho visual da interf ce, descrevendo as ferramentas que o u ilizador possui para aceder e navegar ao long do documento hipermédia, consiste nos elementos gráficos, como a organização do ecr , a apresentação da informação e os coman dos do ecrã. A sua conceção deve obed cer a alguns princípios da comunicação vi ual, tendo em conta fatores de perceção, legibil idade, unidade organizacional, códigos de cor e estruturas de acesso à informação. Conseguir assim, boas idei s para o desenho de interfaces é algo que se reveste de certa complexidade, pois são vári s os aspetos a ter em conta. O que se pretende com um boa interface é tornar a interação do home m com o documento hipermédia, fácil, agradável, intuitiva, numa palavra – amigável -.

Design 

Frame lateral esquer da sempre presente de modo que o utili zador não se sinta perdido e possa em q alquer momento alterar a sua navegação;



Separadores entre as imagens;



Setas personalizadas do mesmo padrão;



Cores com ténues di erentes entre o menu esquerdo e as págin as do lado direito da frame; 7

INSTITUTO DO EMPR EGO E FORMAÇÃO PROFISSIONAL, IP DELEGAÇÃO REGIONA L DO NORTE CENTRO DE EMPREGO E FORMAÇÃO PROFISSIONAL DE VIANA DO CASTELO-SERVIÇO DE FORMAÇÃO PROFI SSIONAL 

Música apenas com duas repetições para não maçar o utiliz dor e colocada na página esquerda da fr me para que possa ser ouvida até ao fim.

Cores 

Fundos em tons claro s;



Letras em tons escur s e contrastantes (preto ou azul) com o fun o;



A utilização de fundo de páginas com muitos gráficos, imagens animadas ou cores muito berrantes pode funcionar como dispersantes, podendo co nfundir o utilizador e tornar difícil a leitura do texto que se encontra sobre o background .



É importante que se c ie um ambiente harmonioso entre as cores utilizadas nas fontes das letras e a cor util izada no background da página. Atenção que o uso de cores claras (branco, por e xemplo) em backgrounds escuros impossi bilita ao utilizador a impressão do texto, pois o branco das letras não vai aparecer n impressão de uma folha branca.



Logotipo em cada pá ina com uma cor que realce em relação à c or do fundo;



Separador numa página entre os diferentes temas ou assuntos ( em tom concordante com o fundo);



Título de cada página em tom contrastante com o fundo e a cor d restante texto.

Textos 

Em fonte Verdana (c m a alternativa Arial) porque não têm se rifa, o que facilita a leitura;



Os títulos podem ser em Times ou outro tipo de letra mais dese nhada (com ou sem serifa);



Os textos nunca sã sublinhados para que o utilizador não confunda com uma hiperligação.



Evitar a utilização de texto cintilante, animação só por si, de viam a atenção do utilizador daquilo que essencial para o acessório.

8


Imagens 

Nas imagens dever identifique a imagem.

proceder-se à introdução de uma de crição textual que



Numa página WWW apenas se podem utilizar imagens com form to .gif ou .jpg, sendo o primeiro geralmente utilizado para ilustrações e o segundo para otos.



Manter os ficheiros d as imagens com dimensões reduzidas po r forma a manter o mínimo tempo possív l para o carregamento da página.



Uma imagem que ap ia um texto (método aconselhável para aj dar a compreensão do texto) deve aparec r do lado direito, para que o utilizador come ce por ler o texto.



A consistência, a nív l de imagens, do grafismo e de ícones de n avegação utilizados, ao longo de todo o sit é importante para a sua identificação.



Os ícones de naveg ção deverão ser óbvios, se suscitarem substituí-los por texto, ou acompanhá-los por texto.

úvidas é preferível

Outros 

O site pode ter um for ulário para que os utilizadores possam: en viar uma mensagem ao autor do site; escr ver algumas opiniões sobre um tema pré- efinido; responder a um questionário sobre um tema;



O site pode ter um fór m com um tema pertinente;



O site deve ter um pe quisador interno para facilitar a pesquisa;



A página do lado esqu erdo da frame, ou shared border (o menu) d eve estar totalmente observável, deste mod o, evita-se de ter a barra de deslocamento ertical;



A página do lado direi to da frame (a primeira a aparecer) deve e tar 90% observável. Ao deslocar para baix a barra de navegação vê-se informações omplementares, tais como o contador ou a data;



O site deverá ter um contador na página principal para informa r o webmaster e os utilizadores da frequê cia e quantidade de utilizadores que a cons ltam;



Inserir uma data de p odução em cada página de modo a servir e indicador sobre a atualidade da informa ão nela contida; 9

INSTITUTO DO EMPR EGO E FORMAÇÃO PROFISSIONAL, IP DELEGAÇÃO REGIONA L DO NORTE CENTRO DE EMPREGO E FORMAÇÃO PROFISSIONAL DE VIANA DO CASTELO-SERVIÇO DE FORMAÇÃO PROFI SSIONAL 

No final da página ini ial deverá estar visível o contacto com liga ão direta ao correio eletrónico do respons vel pela produção do site.



Evitar finais de págin as das quais não seja possível sair. As b arras de navegação devem surgir no final de todas as páginas permitindo redirecio ar o utilizador para outras páginas, nome damente para a página inicial.

Os dez maiores erros em Web Design Utilização de quadros- Uma página dividida em quadros é muito confus a para os utilizadores, uma vez que os quadros vão contra o modelo fundamental de uma pági na web . Não se pode ao mesmo tempo marcar a p ágina corrente e voltar a esta, os URL’s param de trabalhar e as impressões tornam-se difíce is. A previsibilidade da reação dos utiliza dores deixa de fazer sentido quando estes não sa em que informação será disponibilizada qu ndo clicam num link. Utilização gratuita da tecnologia mais avançada- Não se deve atrair o s utilizadores para um site, fazendo menção de que utiliza a última tecnologia web. Pode atrair alguns fanáticos pela informática, mas a maioria dos utilizadores prestam mais atenção aos conteúdos e à possibilidade do site oferecer um bom serviço. Utilizar a melhor e última tec nologia mesmo antes de ser lançada no m ercado irá certamente desencorajar os utilizadores: se os seus sistemas forem abaixo enquant visitam o site, podese apostar que muitos deles não voltarão a consultar o site. A não se r que se comercialize produtos ou serviços na net, torna-se mais favorável aguardar até que s obtenha experiência relativamente à forma mais a propriada de utilizar essas técnicas. Quand o apareceu o desktop as pessoas colocaram vinte f ntes nos seus documentos, logo há que evi tar que aconteça uma situação similar relativamente à web. Texto, marcas e constantes animações em movimento- Nunca se de e incluir numa página elementos que se movam in essantemente. As imagens em movimento têm um efeito nefasto na visão dos humanos. A página web deve dar ao utilizador alguma paz serenidade para que este possa efetivamente ler o texto. URL’s complexas- As UR ’s nunca devem estar expostas no inte face do utilizador, é previsível que os utilizadore s tentem descodificar as URL’s das pági nas para perceber a estrutura do site. Os utiliza ores tomam esta atitude devido à gran e falta de apoio na navegação e sentido de orie tação no browser corrente. Então, a URL deve conter diretorias de leitura acessível aos utiliz dores e nomes que reflitam a natureza da i nformação contida no site . 10


Páginas solitárias- Assegurar que todas as páginas incluem uma clar website a que pertencem, u a vez que os utilizadores podem aceder a sem ter de passar pela página inicial. Pela mesma razão, todas as págin para a página inicial, bem co mo alguma indicação sobre a sua localizaç do site.

indicação de qual o páginas diretamente, s deverão ter um link o dentro da estrutura

Páginas com longos texto corridos- Apenas 10% dos utilizadores, acedem à informação que está disponível para alé da que está visível no ecrã quando surg e a página. Todos os conteúdos importantes e opç es de navegação devem estar no topo da p ágina. Falta de suporte à navega ção - Nunca se deve assumir que os utili zadores sabem tanto acerca do site como o desig ner. Eles têm sempre dificuldade em enco trar informação, logo necessitam de suporte no qu diz respeito à sua estrutura e localização. Começar o design com u a boa compreensão da estrutura espa ial da informação e comunicar explicitamente ess a estrutura ao utilizador. Disponibilizar o ma pa do site para que os utilizadores saibam onde est o e para onde se podem encaminhar. É ne cessário, também, um bom motor de busca, uma ve que o melhor de navegação nunca é sufici nte. Cores não Standard nos Li ks - Os links que não tenham sido utilizado s devem ser azuis; os links para páginas que tenha m sido anteriormente visitadas devem ser úrpura ou vermelhos. Não se deve misturar estas c ores, uma vez que a possibilidade de perce ber quais os links que já foram utilizados é uma da s poucas ajudas para a navegação e é st ndard na maioria dos browsers . A consistência é a chave para ensinar aos utilizadores o sign ificado das cores dos links . Informação desatualizada- É necessário contratar um “jardineiro” we equipa, torna-se necessário ue alguém retire as “ervas daninhas” e pla enquanto o website se altera , mas a maioria das pessoas preferem cria detrimento da manutenção d o site. Na prática, a manutenção do site é realçar o conteúdo do web ite uma vez que muitas das páginas a relevância e devem ter um li nk para novas páginas. Claro que alguma totalmente removidas do server uma vez que se tornam obsoletas.

para fazer parte da te novamente “flores” novos conteúdos em uma forma barata de tigas mantém a sua páginas deverão ser

Downloads demorados- Es e erro é referido em último lugar porque conhecimento sobre o mes o; e não por ser menos importante. As

uitas pessoas já têm remissas tradicionais 11


indicam um máximo de resp sta de10 segundos até que os utilizadores percam interesse. Na web, os utilizadores têm sid treinados para suportar tanto sofrimento ue se torna aceitável aumentar esse limite para 15 segundos nalgumas páginas.

Tipos de Páginas 

Páginas Pessoais  Objetivos: partilhar informação pessoal  Audiência: alunos , colegas, amigos, etc.



Páginas Comerciais  Objetivos: Propor ionar novos negócios, vender produtos, for ecer informações, etc.  Audiência: cliente , etc.



Páginas Informativa  Objetivos: transmi tir informações  Audiência: públic em geral

12

INSTITUTO DO E PREGO E FORMAÇÃO PROFISSIONAL, IP DELEGAÇ O REGI NAL DO NORTE CENTRO DE EMPR GO E FORMAÇ O PROFISSIONAL DE VIANA DO CASTELOSERVIÇO DE FOR AÇÃO PROFISSIONAL

Editor de Páginas W eb – Weebly O Weebly é um serviço d criação de sites em que qualquer pesso pode fazer um site de forma gratuita, se ter necessidade de aprender HTML. Tudo é feito online, em português, sem ser n cessário a instalação de nenhum software. O processo de criar um site no Weebly es á bastante facilitado, tudo é feito com opera ções simples de arrastar elementos (dispo íveis numa barra de ferramentas) e soltá- los em cima do layout do site. Criar uma conta no Weebly (http://www.weebly.com/?lang=pt):

1. Introduza o seu nome 2. Introduza o seu email 3. Introduza uma password

Escolher um título para o Website e o tipo de Website.

13


Escolher o endereço d seu Website online. Deve utilizar um s b-domínio do Weebly uma vez que é gratuit o.

Escolha um Tema O primeiro passo na criaç o de um site é escolher um tema. Tem mais de uma centena de temas para es olher através da página Escolher um tema.

Imagem 9 - Escolha do tema

14


Clique com o botão direit sobre o tema que pretende para selecion -lo. A qualquer altura poderá facilmente m udar o tema.

Depois de escolher um te a poderá dar um título ao seu site. Se não t em um título em mente, basta pensar nu título temporário, bem como o tema, o título pode ser facilmente alterado mais t rde.

De seguida, pode escolher o endereço do seu site (também chamado não é particularmente im ortante até que tenha terminado o seu sit sabe qual o domínio qu e deseja usar, a forma mais simples é subdomínio gratuito de W ebly.com como primeira opção. Tal como esta é mais uma parte do ite que poderá alterar.

e domínio). Isto . Se ainda não selecionar um tema e o título,

15


Após terminar a configuraç ão inicial, está pronto para começar a criar

seu site!

Adicionar Element s O Weebly disponibiliza mu itos recursos para a criação de sites, nele xiste uma barra (semelhante ao Office) nde estão posicionados os elementos ue podem ser incluídos no corpo do site. Alguns dos elementos que podem ser incluí os são: Título Como nome próprio diz é apenas um ícone pa ra escrever um título sem parágrafo, podendo usar diversas ferram ntas de edição. Elemen o > Básico > Ícone Titulo

Parágrafo É um ícone cujo o objetivo é somente escrever um omplemento ou algo que não necessite de um Titulo, podendo util izar ferramentas de ediç o. Elemen os >Básico > Ícone Paragrafo Parágrafo com título Serve para escrever textos com Titulo, dos mais va iados assuntos, possui f erramentas que possibilitam colocar o seu texto em Negrito, Itálico, além de poder alterar o tipo de es rita (Fonte) e o tamanho! Element s > Básico > Ícone Parágrafo com Título. 16


Imagem Serve penas para adicionar uma única imagem olitária ao site, muitas vezes a mesma é centrada, possuindo a capacidade de aument ar ou diminuir o tamanho da imagem, cas a imagem não seja u Gif, pois se for o efeito de animação é c ncelado, tem a possibilidade de adicionar alguns efeitos como ntique (imagem velha/A arelada), preto e branco, queimada entre utros. Elemen os > Básico > Ícone Imagem Parágrafo com Imagem Não pas a de uma junção do Parágrafo com Titulo e Imagem, onde poderá screver como no Parágrafo com Titulo, incluindo uma imagem ao lado da escrita, e podendo utilizar o feito de ambos os ícone . Element s > Básico > Ícone Paragrafo com Imagem Colunas / Múltiplas Colu as Permite separar a página verticalmente, onde pode colocar ários ícones nessas separações, pode colo car elementos diferent s como imagem, texto e vídeo. Elementos >Básico > Ícone Múltiplas Colunas

Divisor Como o nome diz, é um divisor, porém diferent só divide página horizontalmente com 1 traço. Elemento > Mais > Divisor

das Colunas,

Adicionar Página É o Local/Forma onde pod e acrescentar páginas ao seu site, definindo Nome, a ordem que ficará no menu de pág inas, entre outras características. É possível também exclui r a página, porém ao excluir uma pág ina perde todo o conteúdo localizado na esma! Adicionando Editores É a forma de convidar c olaboradores para o seu site, porém vai ter total acesso podendo, apagar qualquer coisa é inclusive páginas. É necessário p ara convidar um Editor que o mesmo poss a um registo e o e-mail que utiliza para ac sso ao Weebly, assim basta ir a Editores n o canto superior do ecrã, próximo de Eleme tos e Paginas e convidar utilizando o e-m ail, o futuro editor irá receber um email q ue ao aceitar e 17


efetuar o login será dir cionado para o site no qual tem privilé ios para fazer alterações. Somente o cria dor do site poderá enviar convite para ser e itor do site! Formulário de Contato É um Ícone que permite que os leitores do s eu site weebly enviem diretamente para o Email do Administra or do site dúvidas, ugestões ou resposta a perguntas feitas por si através d Formulário. O formulário é totalment e editável, ou seja através da programação que é simples, é p ossível decidir o nomes dos tópicos preenchidos, se são obrigatório ou não, entre outras configurações. Elementos > Básico > Ícon e Formulário de Contacto Galeria de Imagens É o ícone que possibilita adicionar várias imagens, ostrando todas ao mesm tempo, como se fosse um quadro, pod ndo escolher a forma (quadricular, retangular) entre outras coisas, para adicionar basta colocar o ícone na página e clicar no quadro a zul e selecionar as imagens no seu computador. Elementos > Multimédia > Fotografia Galeria Slides É semelh nte à Galeria, porém as suas imagens a arecem uma a uma. Pos ibilita que o criador do site ou editores po sam selecionar que forma desejam para visualizar as imagens, por m nu de números, ou pelas i agens em miniatura! Elementos > Multimédia > Apresentação de Slides Modificar o Desenho da ágina No caso de não ter gosta o de nenhum dos temas ou se pretende u exclusivo, isso é possível. Primeiro deve ncontrar um desenho de página que poss ser modificado, pois não são todos. O se undo passo é encontrar uma imagem gran de, que encaixe nas proporções para cobri r o fundo, procure na internet pois preci ará do URL da mesma. Como Modificar: 1. Procure uma imag m na internet e uma página que possa ser 2. Escolha Desenho, clique em Editar HTML/ CSS use ctrl localizado, assim q ue abrir procure por background que fica e de não ter um Lin à frente de background é por que a pági modificada. 3. Ao encontrar o link deve apagar o mesmo que se encontra coloca o URL da i agem que encontrou na internet dentro dos carregar a imagem e o fundo será alterado.

odificada. f para abrir o body, no caso a não pode ser dentro de (), e ( ), a página vai

18


Utilizar HTML É um íco animaçõe dono", as Elemento

e que permite colocar no site elementos externos, como , imagens, etc, que se encontram cone tados ao "site im pode adicionar músicas, chat, ao seu sit e weebly. > Básico > Personalizador HTML

Ficheiro Possibilita que o criador ou editor do site dispon ibilize imagens, document s e programas para serem descarregados pelos utiliz adores do site. Elementos > Multimédia > Ícone Ficheiro

Primeiros element s: Adicionar texto ao site Elementos são objetos qu pode utilizar na construção de um site. To o o texto, fotos, vídeos e outros são adicio nados através de elementos. Em seguida s o apresentados alguns desses elementos

a forma que estes funcionam.

Para adicionar um elemen o a um site basta clicar no elemento preten dido e arrastá-lo para a área da página. O lemento mais básico - o elemento parágrafo / texto:

19


O elemento de texto é exa amente o que parece: um elemento para es crever texto. Para começar a escreve cl ique no elemento:

Pode escrever uma palavr , uma frase, ou vários parágrafos em um ú ico elemento.

Quando escreve, repare n a barra cinza na parte superior do element . Esta é a barra de ferramentas de texto q ue permite fazer alterações básicas ao seu texto. Funciona como qualquer outro tipo d e barra de ferramentas: selecione o texto q e deseja alterar e clique no botão apropria o para fazer essa alteração.

Da esquerda para a direit , poderá encontrar os botões de formataç o para: negrito, itálico, sublinhado , coloc r o texto maior ou menor, mudar a cor , criar um link , escolher o alinhamento de todo o texto dentro do elemento,

riar listas com

marcadores e numeradas, e remover a formatação. Como já percebe uma coisa que não pode fazer é mudar o ipo de letra para outro diferente. Para adici nar mais texto a uma página poderá conti uar a escrever neste mesmo elemento, o u arrastar outro elemento de parágrafo, ou usar um dos outros elementos do texto:

20




Título: Usado par adicionar títulos / cabeçalhos de uma pági a.



Parágrafo w / Título: Um elemento de parágrafo com um lug r para um título já construído dentr .



Parágrafo w / Imagem: Um elemento de parágrafo com um lugar tanto para um título como par uma imagem construída dentro.

Primeiros element s: adicionar imagens a um site Para adicionar imagens ao site o processo é idêntico ao do texto, arra ta o elemento de imagem para a página.

Clique na caixa Imagem d upload para adicionar uma imagem.

21


Vai abrir uma caixa de diálogo que apresenta várias formas de adicionar uma imagem. As duas principai s opções são: ou upload (ou arrastar) uma imagem do seu próprio computador ou pes quisar na base de dados do Weebly .

Vamo-nos concentrar na opção de fazer upload de uma imagem do seu próprio computador. A maneira m ais fácil de abordar esta questão é arrasta r a imagem que deseja para a caixa "arras e a imagem para aqui." Pode também clica no botão verde "Enviar foto" e dar o caminho da imagem.

O tamanho de uma image

vai variar após o upload, mas normalment e assume o

tamanho do elemento.

22


Pode ajustar o tamanho d imagem, clicando e arrastando a caixa que aparece no canto inferior direito da im gem (precisa clicar sobre a imagem para p der vê-la).

Clicando na imagem abre ma caixa de diálogo de configurações que ode usar para fazer mais alterações.

Opções de formatação: 

Lightbox : Se ativ r, significa que qualquer utilizador que cliqu e na imagem do seu site terá acess a uma versão maior da mesma. 23

INSTITUTO DO E PREGO E FORMAÇÃO PROFISSIONAL, IP DELEGAÇ O REGI NAL DO NORTE CENTRO DE EMPR GO E FORMAÇ O PROFISSIONAL DE VIANA DO CASTELOSERVIÇO DE FOR AÇÃO PROFISSIONAL  

 

Ligação : Esta opção transforma a imagem num link. Espaçamento : Faz pequenos ajustes para a quantidade de es paço em branco à volta da imagem. Caption : Permite dicionar uma legenda de texto básico. Avançado : Permite ajustar (ou ligar / desligar) o limite da imag em.

Editar Imagem: Editar imagem - abre um ditor de imagens simples.

Este editor oferece algum s opções básicas para a adição de efeitos , permite girar a imagem em qualquer se ntido e tem uma característica que pod e cortar partes indesejadas da imagem.

Exemplo:

24


A opção Cortar coloca um caixa sobre a parte superior da imagem. P ode clicar sobre a caixa para arrastá-la e aj ustar os cantos e lados alterando as dimens ões.

Uma vez feitas as alteraç ões clique em OK. No caso de não gosta das mudanças clique em Cortar novamen e para reajustar ou clique no botão cinza e

Cancelar para

sair do editor. Cortada a i agem para guardar as alterações clique no botão Salvar no canto superior direito.

25


Colocar elemento olunas Quando começar a adicio nar elementos a uma página, provavelmen te vai notar que eles vai ficando automatic mente na área de trabalho. À primeira vista , isso pode fazer com que pareça que não há maneira de colocar elementos lado a la do. Mas a boa notícia é que o Columns lemento pode ser usado para adicionar at é cinco colunas para uma página. Isto per mite-lhe que os elementos tenham lugar c erto ao lado do outro. O Columns element o é arrastado para uma página, assim com qualquer outro elemento.

O elemento começa com duas colunas, mas pode adicionar até cinco través da barra de ferramentas que apare e quando está posicionada sobre o element o. Basta clicar no número apropriado.

Pode arrastar os elemento s necessários em cada coluna, e usar a barr a azul entre as colunas para ajustar a largura de cada uma.

26


Criar mais páginas para o seu site Se é um utilizador livre ou um assinante de nosso serviço Pro, o site p de ter o número de páginas e sub- áginas necessário. Para criar uma nova págin é tão simples como ir ao separador Págin s e clicar no botão Adicionar Página.

Há uma opção para adici nar uma página padrão ou adicionar um bl g. Clicando no botão Adicionar página adi ciona uma nova página à sua lista.

27


Opções de configuração d s páginas:     







Editar a página (vai para a área de elementos) Copie a página par usar como base para uma nova página Excluir a Página Mude o nome da P gina Ocultar a página a partir do Menu de navegação. Se esta fo r desmarcada a página é acessível via de navegação do site. Se a caixa estiver marcada, então a página vai ser es ondida na navegação (embora possa criar s seus próprios links para páginas scondidas) Proteger com senh a nesta página, o que requer uma assinatu ra para o nosso serviço Pro Link da página par um site externo (criando um link de naveg ação que leva a outro site). Ajuste as configura ções avançadas.

As configurações avançadas de cada página são úteis para melhora Search Engine Optimization do seu site. Podemos adicionar várias páginas ao si e (clicando em Adicionar página, irá adici onar outra página e salve as alterações à página na qual estava a trabalhar):

28


Poderá reorganizar a ord m das páginas clicando e arrastando-as p ara cima e para baixo na lista. Ao arrastar uma página para o topo da lista fará com ue essa página seja a principal, que é indi ado pelo ícone de casa. A página principal pode ter o nome que pretende. Vamos cri r uma sub-página, arrastando-a para a

ireita da nossa

página. Sub-páginas apar cem no menu de navegação do site co o parte de um menu drop-down para qual quer página que estiver conectado.

Como já foi referido, par criar uma sub-página, basta arrastar a p ágina sob outra página e, em seguida, ar raste para a direita até verificar que está ligada à página principal através de uma linha pontilhada. Poderá ter muitas sub- áginas de uma página. Agora, o menu de navega ão do site inclui links para todas as páginas que criou.

Se clicar sobre o link Port folio com o ponteiro do rato, um menu dro p-down aparece com um link para cada um das sub-páginas criadas.

29


Para editar o conteúdo de uma página basta clicar no link no menu d e navegação ou no separador Pages, sel cione a página a partir da lista e clique no botão Editar Página.

Criar um link de na egação para outro site Existem algumas situações em que pretende a navegação de uma li gação em outra página – por exemplo: pá gina do Twitter, um blog, um site conheci o, entre outros. Para criar um link de nav egação externo, ou seja, para fora do se site, clique no separador Pages, Adicion r página, e escolha a opção External Link.

Dê o nome ao link, este n me é o que vai aparecer na navegação. E

seguida, insira

o link completo da pá gina ou site que pretende e posteri rmente, Salvar configurações.

30


Qualquer página que est diretamente ligada a um site externo ter á um ícone link externo adicionado:

Mudar Temas e edi ar Fontes Agora que o site já está pr aticamente definido, é um bom momento pa ra decidir qual o tema a utilizar para o de ign. Um tema pode ser selecionado a qu lquer momento (seja no início, no meio ou no final do processo de criação do site). E colher um novo tema não implica apagar o u alterar o conteúdo do seu site. Para alter r o tema, clique no separador Design:

A primeira opção é a se ão "Favoritos", onde são apresentados al uns dos temas favoritos.

Para selecionar o tema pr tendido, clique sobre ele.

31


Se optar pela seção Tod s os Temas no separador Design, terá ac sso a todos os temas. Estes podem ser vistos como um grande grupo ou atravé s de diferentes categorias, como negócios ou casamento.

Quando encontrar um tem que gosta, clique no botão Preview para p evisualizar a aplicação no seu site.

32


Clique em Usar Tema para aplicar o tema escolhido ao seu site, cliq ue em Favoritos se pretender adicioná-lo

sua lista de favoritos ou clique em Canc elar continuar a

escolher temas.

33


Depois de selecionar o t ma, use a seção Design Options para

efinir as fontes

padrão para esse tema.

Você pode alterar as fonte para o título do site, parágrafo Títulos, par grafo de texto e para os links. Existe cerca de uma centena de fontes para escolher.

Editar o cabeçalho Grande parte dos temas incluem uma área para uma imagem d

cabeçalho, no

entanto poderá alterar essa imagem padrão. Para começar, clique no botão Editar imagem:

Para apagar a imagem p drão, clique sobre a imagem e depois no X vermelho no canto superior direito. 34


Para adicionar uma image

ao cabeçalho, clique no botão Adicionar i agem no canto

superior esquerdo.

Agora tem a opção de esc lher a imagem pretendida.

Pode ainda utilizar o cam o procurar para selecionar uma imagem a ropriada para o seu site.

35


Uma vez selecionada a im gem, pode editá-la.

As imagens podem ser r dimensionadas através dos círculos orient dores em cada canto e laterais da image .

36


A imagem pode ser arrast da clicando em qualquer lugar e arrastando -a.

Utilize as ferramentas for ecidas no topo da página, para editar e dicionar texto / efeitos para a imagem.

Quando terminar a pers nalização da imagem, selecione o botão Salvar. Poderá escolher a opção salvar a imagem em cada página do site, apenas na página editada, ou selecionar apenas alg mas das páginas. Assim, poderá ter difere ntes cabeçalhos nas páginas.

Links de Texto Para criar um link de texto, primeiro selecione o texto no qual pretende efetuar a ligação.

37


Em seguida, clique no ícon e "Hiperligação" na barra de ferramentas d texto.

Na caixa de diálogo link, t m de selecionar o tipo de link que pretend criar: Link para outra página, link no seu si te.

Link para uma página de o utro site. Pode optar por abrir o link numa n va janela.

38


Link para um arquivo of recendo ao utilizador a possibilidade de fazer download deste.

Link para um endereço de e-mail. Isso faz com que o programa de e ail do utilizador (como o Outlook) seja abe to para que este possa enviar-lhe uma men sagem.

39


Links em Imagens Para criar um link numa im agem, primeiro clique na imagem na qual pr etende efetuar a hiperligação.

Em seguida, clique na opç o hiperligação no canto superior direito da i magem.

40


Na caixa de diálogo de hip erligação, pode selecionar o tipo de link que pretende criar, Link para outra página no róprio site.

Link para uma página e

outro site. Pode ainda optar por abrir o link numa nova

janela.

41


Link para um arquivo para que o utilizador possa fazer o download.

Link para um endereço de e-mail. Isso faz com que o programa de e ail do utilizador (como o Outlook) seja abe to para que este possa enviar-lhe uma men sagem.

42

INSTITUTO DO E PREGO E FORMAÇÃO PROFISSIONAL, PROFISSIONAL, IP DELEGAÇ O REGI NAL DO NORTE CENTRO DE EMPR GO E FORMAÇ FORMAÇ O PROFISSI PROFISSIONAL ONAL DE VIANA VIANA DO CASTELOSERVIÇO DE FOR AÇÃO PROFISSIONAL PROFISSIONAL

O elemento de bot o O eleme elemento nto botão botão perm permitit criar botões que o possam ligar a outras páginas no seu site, a páginas de outros si tes ou arquivos como PDFs e documentos.

Tal como acontece com utro utro eleme elemento nto,, tem de de arras arrastar tar o elem elemen en o botão para a página.

43


O botã botãoo é, é, ess essen enci cial alme ment nt , uma ligação que se destaca por causa d seu tamanho e da sua sua apa aparê rênncia. cia. Pod Pode ed ed itar o texto do botão.

Pode hiperligar o botão a utro site.

O estilo do botão pode er alterado através de quatro opções pré -definidas. Cada botão tem duas cores e dois dois tamanh tamanhos os proje projetad tados os especi especifica ficamen men e para o tema específico que está a usar usar .

44


Cria Cr iarr um Sl Slid ides esho ho Imagem O elemento slideshow ( ispo isponí níve vell na na cat categ egor oria ia "Mul "Multitimé médi dia" a")) pper er mite criar uma apresentação para as i agen gens. Para ara adi adicion cionaar um sli slidesh deshow ow,, b asta arrastar o elemento para a página.

Tem de escolher qual o stil stiloo de slid slides esho how w que que dese deseja ja.. Pode Pode sem sem re ser alterado posteriormente.

Poste Posteri rior orme ment ntee tem tem de faz faz r o upload das imagens. 45


Em seguida, selecione as i magens que pretende.

Dependendo do número e imagens selecionadas, pode levar algu s minutos para carregar.

46


Pode arrastar as imagens para reordená-los, clique no "x" ao lado de cada uma para eliminá-las. Para adicionar legenda à imagem clique no ícone "balão".

Guarde as alterações e vai ver o novo slideshow na página.

Agora pode usar a barra d ferramentas slideshow para fazer alteraçõ s.

47


Utilizar o Leitor de Vídeo O elemento vídeo permit fazer o upload de vídeos com qualidad (até 1 GB por vídeo) diretamente para

seu site. O elemento vídeo está disponí el na categoria

"Multimédia". Para usá-lo, clique e arraste-o para o local desejado na ágina.

Em seguida, basta clicar n o player e uma caixa de diálogo será aberta a partir de onde pode selecionar um vídeo do seu computador. O Weebly suporta M V, MPG, MOV, WMV e outros formatos de vídeo padrão.

48


Dependendo do tamanho do vídeo e da velocidade da sua conexão com a internet, pode demorar até 20 minu os para fazer o upload.

Pode utilizar um número il imitado de vídeos no seu site, o único limit é que nenhum vídeo pode ser maior do q e 1 GB.

49


Utilizar o Audio Player O leitor de áudio perm ite adicionar música, podcasts, ou outr s arquivos de áudio. Este elemento faz arte de nossa Pro Upgrade. O elemento A udio Player está disponível na categoria "M ltimédia", basta arrastá-lo para uma página .

Depois de adicioná-lo à pá gina, clique em qualquer lugar do elemento para abrir a barra de ferramentas de á dio. Em seguida, clique em Upload para sel ecionar um arquivo de áudio.

O arquivo de á dio pode demorar alguns minutos para carr gar.

50


Elemento de vídeo YouTube O elemento vídeo do Yo Tube permite utilizar vídeos publicados n youtube. Esse elemento pode ser encontr ado em Multimédia.

Em seguida, clique em qualquer lugar do elemento para ab ir a barra de ferramentas. Tem de digit r o link direto para o vídeo do YouTube no c ampo URL.

51


Iniciar um novo blog Para criar um blog, vá

ara ao separador Pages, clique em Adi ionar Página e

selecione a opção Page Bl og.

Vai adicionar o blog à sua lista de páginas.

Dê um nome ao blog e, e

seguida, clique em Editar Página para com eçar a adicionar

conteúdo.

Um novo blog começa co

um post da amostra (que você pode edit ar ou apagar) e

uma barra lateral com algu m conteúdo padrão que você pode facilmen e mudar.

52


Para criar um novo post p ra o seu blog, use o botão Novo Post no to o do blog.

O seu blog tem um título e uma área de conteúdo. O título deve geral ente ser curto não mais do que uma fr se. A área de conteúdo inclui um elemen to de parágrafo básico que você pode edit r ou apagar.

Para adicionar conteúdo a blog funciona da mesma forma que a adiç o de conteúdo para uma página - basta a rastar os elementos para a área de trabalho e editá-los.

53


Depois de adicionar o c nteúdo, pode categorizar o post - essas categorias vão aparecer na barra lateral, t ornando mais fácil para os visitantes encont ar mensagens.

Agora pode publicar o po t no seu site (tornando-o instantaneament e disponível) ou Salvar em Rascunhos par editar / publicar mais tarde.

54


Se salvar o post como rascunho, vai estar acessível através d

uma área de

rascunhos no topo da pá gina do blog. Basta clicar no link para o post desta área rascunhos para editá-lo e alvar / Publicar.

Cada novo post publicado aparecerá no topo da página. Depois de ter adicionado sete ou oito mensagens à pági a, os posts mais antigos serão movidos par a fora da página principal.

55


Criar um Formulário e contacto básico Um formulário de contacto pr oporciona aos seus utilizadores uma mane ira fácil de chegar até você. Pode perguntar a um u ilizador algo tão simples como o nome e e ndereço de e-mail. As versões gratuitas podem incl ir até cinco campos de formulário e Pro os utilizadores podem ter um número ilimitado de cam os de formulário. Comece por arrastar o e lemento do formulário para a página.

O formulário começa com qu tro campos padrão.

Estes campos são definidos c onforme necessário (ou seja, o destinatário deve digitar algo no campo para enviar o formulár io). Para fazer alterações basta clicar num c mpo e usando a barra de

ferramentas fazer 56


ajustes. Uma série de configu rações podem ser alteradas para cada cam o. Pode facilmente adicionar n vos campos ao formulário, arrastando-os como qualquer outro elemento. Existem campos pr é-definidos para nome, endereço postal, en ereço e telefone.

Antes de completar o formu lário e publicar o site, pode dar nome e determinar para qual endereço de e-mail (ou ende reços) vão ser enviados os formulários. Po e inserir mais de um endereço, separando-os por írgulas.

Note que você pode encontr r essas configurações usando o botão Opç ões de Formulário, na parte superior do formulário.

As respostas ao seu formulário vão para os endereços de e-mail que intr duziu em Opções de Formulário.

57

Manual Ufcd 0152-Estrutura de Um Stio Para Internet Final

Recommend Documents