Manual UFCD 0152-Estrutura De Um Sítio Para Internet Final

2y ago
14 Views
2 Downloads
8.52 MB
63 Pages
Last View : 1m ago
Last Download : 2m ago
Upload by : Averie Goad
Transcription

INSTITUTO DO EMPREGO E FORMAÇÃO PROFISSIONAL, IPDELEGAÇÃO REGIONAL DO NORTECENTRO DE EMPREGO E FORMAÇÃO PROFISSIONAL DE VIANA DO CASTELO-SERVIÇOCASTELODE FORMAÇÃO PROFISSIONALMÓDULOSUFCD 0152 – Estrutura de um Sítio para InternetUFCD 0153 – Finalização de um sítio paraInternetREFERENCIALReferencial 213006 - Técnico/a de Multimédia,, Nível 4Formador: Paulo GarridoData InícioData FimDuração24/04/201320/05/201350 Horas

INSTITUTO DO EMPREGO E FORMAÇÃO PROFISSIONAL, IPDELEGAÇÃO REGIONAL DO NORTECENTRO DE EMPREGO E FORMAÇÃO PROFISSIONAL DE VIANA DO CASTELO-SERVIÇOCASTELODE FORMAÇÃO PROFISSIONALBarcelos

INSTITUTO DO EMPREGO E FORMAÇÃO PROFISSIONAL, IPDELEGAÇÃO REGIONAL DO NORTECENTRO DE EMPREGO E FORMAÇÃO PROFISSIONAL DE VIANA DO CASTELO-SERVIÇOCASTELODE FORMAÇÃO PROFISSIONALÍndiceSítio Para Internet . 1Definição . 1Organograma . 1Pastas e Ficheiros . 2Esquemas de navegação . 3Linear . 3Árvore. 3Estrela . 4Mista . 5Não Linear . 5Ligações entre ecrãs . 6Coerência e funcionalidade das ligações . 6A Interface . 7Design. 7Cores. 8Textos . 8Imagens . 9Outros . 9Os dez maioresres erros em Web Design . 10Tipos de Páginas. 12Editor de Páginas Web – Weebly . 13Escolha um Tema . 14Adicionar Elementos . 16Título . 16Parágrafo . 16Parágrafo com título . 16Imagem . 17Parágrafo com Imagem . 17Colunas / Múltiplas Colunas. 17Divisor . 17Adicionar Página . 17Adicionando Editores. 17Formulário de Contato . 18Galeria de Imagens . 18Slides . 18Modificar o Desenho da Página. 18Como Modificar: . 18Primeiros elementos: Adicionar texto ao site . 19Primeiros elementos: adicionar imagens a um site . 21Colocar elemento colunas . 26Criar mais páginas para o seu site . 27Criar um link de navegação para outro site . 30Mudar Temas e editar Fontes . 31Editar o cabeçalho . 34

INSTITUTO DO EMPREGO E FORMAÇÃO PROFISSIONAL, IPDELEGAÇÃO REGIONAL DO NORTECENTRO DE EMPREGO E FORMAÇÃO PROFISSIONAL DE VIANA DO CASTELO-SERVIÇOCASTELODE FORMAÇÃO PROFISSIONALLinks de Texto . 37Links em Imagens . 40O elemento de botão . 43Criar um Slideshow Imagem . 45Utilizar o Leitor de Vídeo . 48Utilizar o Audio Player . 50Elemento de vídeo YouTube . 51Iniciar um novo blog . 52Criar um Formulário de contacto básico . 56Publicar o seu Site . 58

INSTITUTO DO EMPREGO E FORMAÇÃO PROFISSIONAL, IPDELEGAÇÃO REGIONAL DO NORTECENTRO DE EMPREGO E FORMAÇÃO PROFISSIONAL DE VIANA DO CASTELO-SERVIÇOCASTELODE FORMAÇÃO PROFISSIONALÍndice ImagensImagem 1 - Organograma . 2Imagem 2 - Pastas . 2Imagem 3 - Ficheiros. 2Imagem 4 - Estrutura Linear . 3Imagem 5 - Estrutura em Árvore. 4Imagem 6 - Estrutura em estrela . 4Imagem 7 - Estrutura Mista . 5Imagem 8 - Ligações entre ecrãs . 6Imagem 9 - Escolha do tema . 14

INSTITUTO DO EMPREGO E FORMAÇÃO PROFISSIONAL, IPDELEGAÇÃO REGIONAL DO NORTECENTRO DE EMPREGO E FORMAÇÃO PROFISSIONAL DE VIANA DO CASTELO-SERVIÇOCASTELODE FORMAÇÃO PROFISSIONALSítio Para InternetUma página web, também conhecida pelo no inglês webpage, é uma "página" na world wideweb, geralmente em formato HTML e com ligações de hipertexto que permitem a navegaçãode uma página, ou secção, para outra. As páginas web usam com frequência ficheirosgráficos eirospodemser ligações clicáveis. Uma página web é apresentada com recurso a um navegador,ou browser, e pode ser construída por forma a recorrer a applets (subprogramas que corremdentro da página), que muitas vezes fornecem gráficos em movimento, interação com outilizador e som.É difícil conseguir uma receita mágica capaz de assegurar que um Web Site vá agradar a todosos utilizadores. Existem contudo, algumas orientações e princípios, que podem contribuir paraa conceção de Web Sitesites eficazes.DefiniçãoTema:: identificação do assunto e da ideia principal do site.Objetivos:: identificação da função que o site vai desempenhar. Pretende-sePretendedar resposta aquestão: para quê? Como em qualquer projeto temos de ter em mente determinados objetivosa atingir.Destinatários:: Identificação e caracterização da "audiência" (utilizadores), que idade, queexperiência possuem, porque razões podem visitar o site. Pretende-sePretende se dar resposta à questão:para quem? Deve fazer-sese com que os visitantes da nossa página não se sintam defraudados,defpara tal a página deve conter conteúdo significativo. Temos de ter consciência que quem visitaa nossa página, procura alguma informação. É fundamental que o visitante localize essainformação. Se a página não a possuir, deve orientar no sentido de ser localizada.OrganogramaUma vez conhecidos os objetivosobjetivos e a audiência da página, é altura de ver como vamosapresentar a informação. Criamos então um diagrama com a estrutura das páginas,agrupadas por tópicos.1

INSTITUTO DO EMPREGO E FORMAÇÃO PROFISSIONAL, IPDELEGAÇÃO REGIONAL DO NORTECENTRO DE EMPREGO E FORMAÇÃO PROFISSIONAL DE VIANA DO CASTELO-SERVIÇOCASTELODE FORMAÇÃO PROFISSIONALImagem 1 - OrganogramaPastas e FicheirosDepois de termos as páginas construídas, devemos guardá-lasguardá las em pastas, por tópicos.Uma pasta é um “sítio” onde pode armazenar ficheiros.Por exemplo criamos uma pasta para todas as imagens, outra para documentos, etc. Podemconter ficheiros, mas também podem conter outras pastas (subpastas).Imagem 3 - FicheirosImagem 2 - Pastas2

INSTITUTO DO EMPREGO E FORMAÇÃO REGIONAL DO NORTECENTRO DE EMPREGO E FORMAÇÃODE FORMAÇÃO PROFISSIONAL

INSTITUTO DO EMPREGO E FORMAÇÃO PROFISSIONAL, IPDELEGAÇÃO REGIONAL DO NORTECENTRO DE EMPREGO E FORMAÇÃO PROFISSIONAL DE VIANA DO CASTELO-SERVIÇOCASTELODE FORMAÇÃO PROFISSIONALLigações entre ecrãsUma etapa importante na conceção do Web site é a conceção do sistema de navegação. É umcomponente da interface, muito dependente da estruturação da informação e é constituído portodas as ligações e hiperligações. É o sistema de navegação que permite mover-nosmoveatravésdas diferentes páginas, criando as condições e estilos de interatividade.Imagem 8 - Ligações entre ecrãsCoerência e funcionalidade das ligaçõesOs sistemas de navegação podem ser constituídos por: Sequências utilizadaslizadas para ir para a página seguinte e anterior, tambémtambém utilizadas pelosbrowsers. Barras de navegação (botões ou menus), podendo ser constituídas por itens de texto,itens gráficos, ou as duas coisas. Contém apenas as ligações principais. As barras denavegaçãoavegação podem estar sempre presentes em todas as páginas, estar apenas naprincipal, ou nos níveis fundamentais. As barras ou menus não devem ser muito extensas, isto é, não devem possuirdemasiadas opções. Ligações de deslocação para o início e fim de página,página, no caso desta necessitar de barrade deslocação vertical. Ligação de deslocação, em todas as páginas, para a página principal. Existem outras estruturas de navegação que se podem usar, como os índices,6

INSTITUTO DO EMPREGO E FORMAÇÃO PROFISSIONAL, IPDELEGAÇÃO REGIONAL DO NORTECENTRO DE EMPREGO E FORMAÇÃO PROFISSIONAL DE VIANA DO CASTELO-SERVIÇOCASTELODE FORMAÇÃO PROFISSIONALformulários de pesquisa, mapas ou esquemas do site, que podem ser utilizadas paraque o utilizador recupere rapidamente a informação e não se desoriente no site.Depois de concebido o sistema de navegação, devem ser testados todas as ligações everificar se funcionam como se esperava. VerificarVerique todas as ligações fazem sentido, istoé, existem por uma razão lógica. Não colocarcololigações que conduzam a mensagens de erro(404 File Not Found). Evitar estabelecer ligações que conduzam a páginas em construção.Não colocar a página na Internet sem tudotestar funcional.Deve convidar alguém, outra pessoa (ou pessoas) para fazer o teste da funcionalidade,verificar as dificuldades encontradas, a correção ortográfica, e se tudo funcionarcorretamente considera-sese o Web site validado.A InterfaceO desenhoho visual da interface, descrevendo as ferramentas que o utilizador possui paraaceder e navegar ao longo do documento hipermédia,, consiste nos elementos gráficos,como a organização do ecrã, a apresentação da informação e os comandos do ecrã.A sua conceçãoão deve obedecer a alguns princípios da comunicação visual, tendo em contafatores de perceção,ção, legibilidade, unidade organizacional, códigos de cor e estruturas deacesso à informação.Conseguir assim, boas ideias para o desenho de interfaces é algo que ses reveste de certacomplexidade, pois são vários os aspetos a ter em conta.O que se pretende com uma boa interface é tornar a interação do homem com o documentohipermédia,, fácil, agradável, intuitiva, numa palavra – amigável -.Design Frame lateral esquerda sempre presente de modo que o utilizador não se sintaperdido e possa em qualquer momento alterar a sua navegação; Separadores entre as imagens; Setas personalizadas do mesmo padrão; Cores com ténues diferentes entre o menu esquerdo e as páginas do lado direito daframe;7

INSTITUTO DO EMPREGO E FORMAÇÃO PROFISSIONAL, IPDELEGAÇÃO REGIONAL DO NORTECENTRO DE EMPREGO E FORMAÇÃO PROFISSIONAL DE VIANA DO CASTELO-SERVIÇOCASTELODE FORMAÇÃO PROFISSIONAL Música apenas com duas repetições para não maçar o utilizador e colocada napágina esquerda da frame para que possa ser ouvida até ao fim.Cores Fundos em tons claros; Letras em tons escuros e contrastantes (preto ou azul) com o fundo; A utilização de fundos de páginas com muitos gráficos, imagens animadas ou coresmuito berrantes podem funcionar como dispersantes, podendo confundir o utilizador etornar difícil a leitura do textotexto que se encontra sobre o background. É importante que se crie um ambiente harmonioso entre as cores utilizadas nas fontesdas letras e a cor utilizada no background da página. Atenção que o uso de coresclaras (branco, por exemplo) em backgrounds escurosescuros impossibilita ao utilizador aimpressão do texto, pois o branco das letras não vai aparecer na impressão de umafolha branca. Logotipo em cada página com uma cor que realce em relação à cor do fundo; Separador numa página entre os diferentes temas ou assuntosassuntos (em tom concordantecom o fundo); Título de cada página em tom contrastante com o fundo e a cor do restante texto.Textos Em fonte Verdana (com a alternativa Arial) porque não têm serifa, o que facilita aleitura; Os títulos podem ser em Times ou outro tipo de letra mais desenhada (com ou semserifa); Os textos nunca são sublinhados para que o utilizador não confunda com umahiperligação. Evitar a utilização de texto cintilante, animação só por si, desviam a atenção doutilizador daquilo que é essencialessepara o acessório.8

INSTITUTO DO EMPREGO E FORMAÇÃO PROFISSIONAL, IPDELEGAÇÃO REGIONAL DO NORTECENTRO DE EMPREGO E FORMAÇÃO PROFISSIONAL DE VIANA DO CASTELO-SERVIÇOCASTELODE FORMAÇÃO PROFISSIONALImagens Nas imagens deverá proceder-seproceder se à introdução de uma descrição textual queidentifique a imagem. Numa página WWW apenas se podem utilizar imagens com formato .gif ou .jpg, sendoo primeiro geralmente utilizado para ilustraçõesilustrações e o segundo para fotos. Manter os ficheiros das imagens com dimensões reduzidas por forma a manter omínimo tempo possível para o carregamento da página. Uma imagem que apoia um texto (método aconselhável para ajudar a compreensãodo texto) deve aparecer do lado direito, para que o utilizador comece por ler o texto. A consistência, a nível de imagens, do grafismo e de ícones de navegação utilizados,ao longo de todo o site é importante para a sua identificação. Os ícones de navegação deverão ser óbvios, se suscitarem dúvidas é preferívelsubstituí-loslos por texto, ou acompanhá-losacompanhápor texto.Outros O site pode ter um formulário para que os utilizadores possam: enviar uma mensagemao autor do site; escrever algumas opiniões sobre um tema pré-definido;pré definido; responder aum questionário sobre um tema; O site pode ter um fórum com um tema pertinente; O site deve ter um pesquisador interno para facilitar a pesquisa; A página do lado esquerdo da frame, ou shared border (o menu) deve estar totalmenteobservável, desteste modo, evita-seevita se de ter a barra de deslocamento vertical; A página do lado direito da frame (a primeira a aparecer) deve estar 90% observável.Ao deslocar para baixo a barra de navegação vê-sevê se informações complementares, taiscomo o contador ou a data; O site deverá ter um contador na página principal para informar o webmaster e osutilizadores da frequência e quantidade de utilizadores que a consultam; Inserir uma data de produção em cada página de modo a servir de indicador sobre aatualidade da informaçãoção nela contida;9

INSTITUTO DO EMPREGO E FORMAÇÃO PROFISSIONAL, IPDELEGAÇÃO REGIONAL DO NORTECENTRO DE EMPREGO E FORMAÇÃO PROFISSIONAL DE VIANA DO CASTELO-SERVIÇOCASTELODE FORMAÇÃO PROFISSIONAL No final da página inicial deverá estar visível o contacto com ligação direta ao correioeletrónico do responsável pela produção do site. Evitar finais de páginas das quais não seja possível sair. As barras de navegaçãodevem surgir no finalnal de todas as páginas permitindo redirecionar o utilizador paraoutras páginas, nomeadamente para a página inicial.Os dez maiores erros em Web DesignUtilização de quadros- Uma página dividida em quadros é muito confusa para os utilizadores,uma vez que os quadros vão contra o modelo fundamental de uma página web. Não se podeao mesmo tempo marcar a página corrente e voltar a esta, os URL’s param de trabalhar e asimpressões tornam-sese difíceis. A previsibilidade da reação dos utilizadores deixa de fazersentido quando estes não sabem que informação será disponibilizada quando clicam num link.Utilização gratuita da tecnologia mais avançadaavançada Não se deve atrair os utilizadoresutilizador para umsite, fazendo menção de que utiliza a última tecnologia web. Pode atrair alguns fanáticos pelainformá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 tecnologia mesmo antes de ser lançada no mercado irá certamentedesencorajar os utilizadores: se os seus sistemas forem abaixo enquanto visitam o site, podepodese apostar que muitos deles não voltarão a consultar o site. A não ser que se comercializeprodutosrodutos ou serviços na net, torna-setorna se mais favorável aguardar até que se obtenha experiênciarelativamente à forma mais apropriada de utilizar essas técnicas. Quando apareceu o desktopas pessoas colocaram vinte fontes nos seus documentos, logo há que evitarevita que aconteça umasituação similar relativamente à web.Texto, marcas e constantes animações em movimentomovimento Nunca se deve incluir numa páginaelementos que se movam incessantemente. As imagens em movimento têm um efeito nefastona visão dos humanos. A página web deve dar ao utilizador alguma paz e serenidade para queeste possa efetivamente ler o texto.URL’s complexas- As URL’s nunca devem estar expostas no interface do utilizador, éprevisível que os utilizadores tentem descodificar as URL’s das páginas para perceber aestrutura do site. Os utilizadores tomam esta atitude devido à grande falta de apoio nanavegação e sentido de orientação no browser corrente. Então, a URL deve conter diretoriasde leitura acessível aos utilizadores e nomes que reflitam a natureza da informação contida nosite.10

INSTITUTO DO EMPREGO E FORMAÇÃO PROFISSIONAL, IPDELEGAÇÃO REGIONAL DO NORTECENTRO DE EMPREGO E FORMAÇÃO PROFISSIONAL DE VIANA DO CASTELO-SERVIÇOCASTELODE FORMAÇÃO PROFISSIONALPáginas solitárias- Assegurar que todas as páginas incluem uma clara indicaçãoindicade qual owebsite a que pertencem, uma vez que os utilizadores podem aceder a páginas diretamente,sem ter de passar pela página inicial. Pela mesma razão, todas as páginas deverão ter um linkpara a página inicial, bem como alguma indicação sobre a suasua localização dentro da estruturado site.Páginas com longos textos corridoscorridos Apenas 10% dos utilizadores, acedem à informaçãoque está disponível para além da que está visível no ecrã quando surge a página. Todos osconteúdos importantes e opções de navegaçãonavegação devem estar no topo da página.Falta de suporte à navegação - Nunca se deve assumir que os utilizadores sabem tantoacerca do site como o designer. Eles têm sempre dificuldade em encontrar informação, logonecessitam de suporte no que diz respeito à sua estrutura e localização.Começar o design com uma boa compreensão da estrutura espacial da informação ecomunicar explicitamente essa estrutura ao utilizador. Disponibilizar o mapa do site para que osutilizadores saibam onde estão e para onde se podempodem encaminhar. É necessário, também, umbom motor de busca, uma vez que o melhor de navegação nunca é suficiente.Cores não Standard nos Links - Os links que não tenham sido utilizados devem ser azuis; oslinks para páginas que tenham sido anteriormente visitadas devem ser púrpura ou vermelhos.Não se deve misturar estas cores, uma vez que a possibilidade de perceber quais os links quejá foram utilizados é uma das poucas ajudas para a navegação e é standard na maioria dosbrowsers. A consistência é a chave para ensinar aos utilizadores o significado das cores doslinks.Informação desatualizada- É necessário contratar um “jardineiro” web para fazer parte daequipa, torna-sese necessário que alguém retire as “ervas daninhas” e plante novamente “flores”enquanto o website se altera, mas a maioria das pessoas preferem criar novos conteúdos emdetrimento da manutenção do site. Na prática, a manutenção do site é uma forma barata derealçar o conteúdo do website uma vez que muitas das páginas antigas mantém a suarelevância e devem ter um link para novas páginas. Claro que algumas páginas deverão sertotalmente removidas do server uma vez que se tornam obsoletas.Downloads demorados- Este erro é referido em último lugar porque muitas pessoas já têmconhecimento sobre o mesmo; e não por ser menos importante. As premissas tradicionais11

INSTITUTO DO EMPREGO E FORMAÇÃO PROFISSIONAL, IPDELEGAÇÃO REGIONAL DO NORTECENTRO DE EMPREGO E FORMAÇÃO PROFISSIONAL DE VIANA DO CASTELO-SERVIÇOCASTELODE FORMAÇÃO PROFISSIONALindicam um máximo de resposta de10 segundos até que os utilizadores percam interesse. Naweb, os utilizadores têm sido treinados para suportarsuportar tanto sofrimento que se torna aceitávelaumentar 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: Proporcionar novos negócios, vender produtos, fornecer informações,etc. Audiência: clientes, etc. Páginas Informativas Objetivos: transmitir informações Audiência: público em geral12

INSTITUTO DO EMPREGO E FORMAÇÃO PROFISSIONAL, IPDELEGAÇÃO REGIONAL DO NORTECENTRO DE EMPREGO E FORMAÇÃO PROFISSIONAL DE VIANA DO CASTELOCASTELOSERVIÇO DE FORMAÇÃO PROFISSIONALEditor de Páginas Web – WeeblyO Weebly é um serviço de criação de sites em que qualquer pessoa pode fazer umsite de forma gratuita, sem ter necessidade de aprender HTML. Tudo é feito online,em português, sem ser necessário a instalação de nenhum software. O processo decriar um site no Weebly está bastante facilitado, tudo é feito com operações simples dearrastar elementos (disponíveis numa barra de ferramentas) e soltásoltá-los em cima dolayout do site.Criar uma conta no Weebly (http://www.weebly.com/?lang pt):1. Introduza oseu nome2. Introduza oseu email3. Introduza umapasswordEscolher um título

Imagem 1 - Organograma-las em pastas, por tópicos. (subpastas). Imagem 3 - Ficheiros-SERVIÇO 2 Podem . INSTITUTO DO EMPREGO E DELEGAÇÃO REGIONAL DO NORTE CENTRO DE EMPREGO E FORMAÇÃO DE FORMAÇÃO PROFISSIONAL Esquemas de navegação A estrutura deve permitir visualizar de forma fácil e

Related Documents:

AKIRA 0163 AKITA 0117 AKITO 0049 0101 0106 0152 AKURA 0049 0076 0101 0123 0195 0378 0426 0460 0601 0616 0654 . TV Remote Code List cont. 6. Maker (Brand) Name Code Number (4 digit) List DAINICHI 0123 0181 0379 DAITSU 0642 DANSAI 0018 0039 0049 0076 0101 0141 0152 0181 0195 0209 0379

Guia de Percurso - 8 ESTRUTURA DO CURSO O desenvolvimento do seu curso envolve um total de 08 (oito) semestres. A estrutura do curso de Serviço Social - Bacharelado na modalidade de educação a distância conta com recursos multimidiáticos pelos quais se promove a interação, comunicação, troca de ideias e experiências entre os sujeitos envolvidos, tendo como foco a sua formação.

estrutura de custos da empresa (dentre outros fatores), e riscos financeiros, determinados pela forma como a empresa financia suas operações (se com capital próprio ou de terceiros), o qual não será abordado neste estudo por não ser o foco da pesquisa.

A Secretaria de Estado de Educação se organiza de acordo o Decreto n. 161, publicado no Diário Oficial de 03 de julho de 2019. A organização da Secretaria pode ser representada didaticamente em Estrutura Organizacional Sistêmica e Estrutura Organizacional Programática, assim sendo, logo abaixo verifica-se seus principais processos.

- 2 - Sumário Este Relatório Técnico Final fornece um resumo detalhado da estrutura concetual da Classificação Internacional sobre a Segurança do Doente (CISD), incluindo uma análise de cada classe, dos conceitos chave com uma terminologia própria e as suas aplicações práticas.

UMA EMPRESA DE SUCESSO INTERNACIONAL Revista Alcance, vol. 12, núm. 1, enero-abril, 2005, pp. 119-133 . INTERNACIONALIZADAS: EL CASO DE UNA EMPRESA EXITOSA DE TALLA MUNDIAL ORGANIZATIONAL STRUCTURE IN MULTINATIONAL ENTREPRISES: THE CASE OF A SUCCESSFUL GLOBAL COMPANY Palavras-chave: Estrutura organizacional;

USER'S MANUAL 120V PLUG-IN CARBON MONOXIDE ALARM WITH SILENCE FEATURE Model CO600 Printed in Mexico M08-0152-002 S 07/07 IMPORTANT! PLEASE READ CAREFULLY AND SAVE. This user's manual contains important information about your Carbon Monoxide (CO) Alarm's operation. If you are installing this CO Alarm

OSCE - Anatomy Base of skull What are the structures passing through cribriform plate, optic canal and supra orbital fissure? Where is the optic canal? Eye Describe anatomy of the bony orbit (roof, floor, medial and lateral wall). Describe the course of optic nerve and what is the relationship of optic nerve to carotid artery? Which fibres of optic nerve decussate? If there is bitemporal .