Web. Técnico de Organização de Eventos Módulo III Criação de Páginas Web. Técnico de Organização de Eventos

Transcrição

1 Sumário Tecnologias de Informação e Comunicação Introdução ao módulo III. Importância das Páginas Web. Conceitos básicos. Bases de funcionamento de um sistema WWW. Técnicas de implantação e regras básicas de criação de Páginas Web. Critérios e avaliação de Páginas Web. Realização e correcção de uma ficha de trabalho. 1 2 Objectivos Gerais do Módulo Conhecer técnicas de implantação das Páginas Web Conhecer linguagens utilizadas na criação de Páginas Web Conhecer editores de Páginas Web, editores de imagens, efeitos especiais, programas de animação gráfica Conhecer conceitos gerais associados às páginas Web Distinguir os conceitos de ergonomia e amigabilidade de uma Distinguir os conceitos de HTML e hipertexto Avaliar uma Adquirir e Instalar o software de instalação 3 Objectivos Gerais do Módulo Indicar as principais características e potencialidades do programa Descrever o ambiente de trabalho Conhecer as opções da barra de menus Identificar e utilizar as diversas barras de ferramentas Conhecer os princípios de planeamento e planear Páginas Web Reconhecer a importância do planeamento na construção de Páginas Web 4 Objectivos Gerais do Módulo Criar uma página Web Formatar a apresentação das páginas Utilizar estilos Manipular texto, imagens, sons e vídeos, formulários, tabelas, frames Conhecer e utilizar hiperligações Conhecer e aplicar os efeitos de animação existentes Publicar uma Efectuar a gestão e actualização de uma página Web Critérios de Avaliação Cognitivo Domínio Operatório e Instrumental Testes de Avaliação Participação Realizadas Pontualidade Assiduidade Sócio Afectivo Autonomia Fichas de Trabalho Comunicação Responsabilidade Iniciativa Criatividade Domínio das TIC 5 6 1

2 Momentos de Avaliação Duração do Módulo 09 de Junho de 2011 Projecto Final Início 12/Maio/2011 Término 21/Julho/ Objectivos da Aula Conhecer a importância das páginas Web Conhecer os conceitos básicos Conhecer o conceito Páginas Web Conhecer o conceito Hipertexto Conhecer e compreender as bases do funcionamento do sistema www Objectivos da Aula cont. Conhecer e identificar técnicas de implantação de Páginas Web Conhecer as várias linguagens utilizadas na criação de Páginas Web Conhecer editores de imagens e efeitos especiais Conhecer formas de criação de documentos para a Web Conhecer editores de animação gráfica Conhecer ferramentas e utilitários para publicar Páginas na Web Conhecer editores de páginas Web 9 10 Objectivos da Aula cont. Conhecer as regras básicas de criação de Páginas Web Avaliar Páginas Web Conhecer os critérios de avaliação de Páginas Web Avaliar Páginas Web Introdução à criação de páginas web No quotidiano todas as empresas, instituições e pessoas individuais estão cada vez mais dependentes da maior via de comunicação que é a Internet. Interessando-se assim não só em aceder à informação disponibilizado mas também em oferecer a sua própria informação a muitas outras pessoas. Criar páginas Web tornase, pois, uma inevitabilidade

3 Criar uma página Web permite: Gerar um ambiente com muitas potencialidades, onde é possível: Mostrar um estilo estético próprio, personalizado e oportuno; Criar uma página Web permite: Criar contextos propícios ao ensino à distância; Estimular compras, trocas e vendas; Criar «espaços virtuais» onde se pode conversar, ver e ouvir outras pessoas em tempo real; Promover a pesquisa de informação. produtos e serviços; Fornecer informação filtrada, seleccionada e comentada; Consultar «grupos de estudo»; Criar ferramentas para trabalhar cooperativamente com outras pessoas; 13 Entre outros. 14 Páginas Web Localização na Internet que contém uma ou mais páginas HTML relacionadas entre si Hipertexto Bases do funcionamento do sistema www Ligações para outras secções dentro de um mesmo documento, para outros documentos ou mesmo para outras Páginas Web. Estes links ou ligações apresentam-se de forma destacada no corpo do texto principal. Exemplos: Google

4 Bases do funcionamento do sistema www Bases do funcionamento do sistema www Bases do funcionamento do sistema www Bases do funcionamento do sistema www Paradigma Cliente/Servidor Paradigma Cliente/Servidor

5 Linguagens de Programação Editor WYSIWYG estática dinâmica URL FTP Técnicas de implantação de páginas Web Linguagem de Programação Linguagem utilizada para expressar instruções para o computador. Conjunto de regras sintácticas e semânticas usadas para definir a acção do computador. HTML HiperText Markup Language é a linguagem de construção de Páginas Web. Os documentos HTML são normalmente interpretados por navegadores. É um código baseado em marcas ou etiquetas (tags) que indica como deve ser a estrutura e formatação de cada página. Constitui o código fonte de um software (Programa). Exemplo: HTML, DHTML, VRML Java, PHP, entre outras HTML - Características Fácil de aprender e usar Não necessita de conhecimento de lógica DHTML Dynamic HiperText Markup Language é uma evolução da linguagem HTML padrão, que inclui linguagem de scripting. Permite incluir recursos interactivos na elaboração de páginas Web. Exemplos: Javascript Usa forma livre de escrita

6 VRML Virtual Reality Modeling Language linguagem de modelação da realidade virtual. Permite criar ambientes tridimensionais e interactivos para a Internet. XML extensible Markup Language é o formato universal para partilha de dados entre aplicações. O conceito XML é simples e as possibilidades são inúmeras. Documentos em formato XML podem conter: Bases de Dados, Transacções Comerciais, Catálogos de Produtos, Gráficos Vectoriais, Equações Matemáticas, Fórmulas Químicas, Relatórios Financeiros, Dados Bibliográficos, Anúncios Publicitários, enfim, quase todos os dados estruturados, em documento de texto Editores de Linguagens de Programação FTP Editor WYSIWYG URL Estática Dinâmica Há duas formas de criar documentos para a Web: Inserir o conteúdo (textos, imagens, sons, etc.) e formatá-lo através dos códigos de formatação e marcação HTML. Utilizar um editor WYSIWYG (What You See Is What You Get o que se vê é o que obtém) Editor WYSIWYG What You See is What You Get- o que se vê é o que se obtém, permite inserir o conteúdo de forma gráfica, sendo o editor o responsável pela escrita do código. Exemplo Editores Web O Bloco de Notas é um processador de texto simples que permite inserir e formatar conteúdos utilizando o código HTML. O Microsoft FrontPage, o Macromedia Dreamweaver e o Adobe GoAlive são editores de criação e gestão de páginas Web. FrontPage, Dreamweaver Kompozer Os editores de criação e gestão de páginas permitem inserir e formatar o conteúdo de forma gráfica

7 Linguagens de Programação FTP Editor WYSIWYG URL Estática Dinâmica Estática São páginas ou documentos HTML cuja a informação que as constitui é enviada sempre da mesma forma quando um utilizador visita as Páginas Web, ou seja, as páginas enviadas não dependem da interacção do utilizador Técnicas de implantação de páginas Web Dinâmica São páginas HTML ou DHTML ou outra linguagem em que a informação enviada para o utilizador depende de algum tipo de interacção deste com as páginas que lhe são apresentadas, ou seja, uma parte da informação apresentada é construída em tempo real e como resposta a pedidos introduzidos pelo utilizador. Linguagens de Programação FTP Editor WYSIWYG URL Estática Dinâmica URL FTP Qualquer Páginas Web construída só fica acessível aos utilizadores quando alojada num servidor e no qual lhe é atribuído um endereço ou URL (Uniform Resource Locator). File Transfer Protocol - protocolo de transferência de ficheiros. Forma rápida e versátil de transferir ficheiros

8 O WS FTP é um programa simples que permite fazer a ligação a um servidor de páginas Web. Editores de Imagem e Efeitos Especiais A Web baseia-se na combinação de textos, imagens e outros componentes de forma coerente, racional e estética. Existem vários editores de imagens, como por exemplo: O Cute FTP é um programa de transferência de ficheiros que permite retomar um download interrompido. Corel Draw; JASC Paint Shop Pro; Adobe Photoshop; O CRT-Secure é um programa que permite a transferência segura de ficheiros. 43 GIMP. São programas que permitem manipular imagens ou fotografias, usando ferramentas poderosas 44 Editores de Animação Gráfica Para criar animações existem vários programas, como por exemplo: O Macromedia Studio MX with Flash Profissional é um programa de tratamento de animação vectorial. Permite criar animações interactivas para a Web; Regras Básicas de Criação de Páginas Web Molduras Tabelas Página de Entrada Fonte O GIF Animator é um programa que visa a produção de imagens animadas. Permite manipular imagens com formato GIF; O COOL 3D é um programa que gera animações a três dimensões (3D) como esferas, cubos, cones, etc. Vídeo e áudio Imagens Cores Regras Básicas de Criação de Páginas Web Princípios gerais a ter em conta quando se cria uma página para a Web: 1. Página de entrada: é frequente ser de apresentação institucional. No topo poderá aparecer o logotipo, nome, endereço, números de telefone, etc.; no rodapé, a data da última actualização, o contacto do responsável pela página e o número de utilizadores que acederam à página. 2. Fontes: devem escolher-se fontes como o Arial e o Verdana para visualizações no ecrã e o Times New Roman para impressões. Relativamente ao tamanho, os mais adequados são: 2 (10 pontos) para texto, 3 (12 pontos) para subtítulos e 4 (14 pontos) para títulos. Regras Básicas de Criação de Páginas Web 3. Cores: deve existir contraste entre o fundo e o texto. Além disso, devem usar-se cores da paleta Web de 216 cores, de modo a garantir que a cor é sempre igual em qualquer computador e resolução. Não se deve usar um número excessivo de cores. 4. Imagens: apresentá-las com o mínimo tamanho (em bytes) possível. Optimizar a imagem, de preferência, nos formatos JPG, GIF e PNG. Não se deve abusar de GIF animados. 5. Vídeo e áudio: deve incluir-se sempre o tamanho dos ficheiros e indicar o plug-in necessário para ver / ouvir / manipular o ficheiro

9 Regras Básicas de Criação de Páginas Web 6. Molduras: usar no caso de haver conteúdos fixos e de controlo de navegação. Portabilidade 7. Tabelas: no Word, a largura disponível para o texto é fixa e depende da largura da página. No editor de páginas Web a largura depende da resolução do ecrã de quem visualiza a página, pelo que o texto ajustar-seá até ocupar toda a largura, originando desformatações frequentes. As tabelas com bordo 0 (zero) são excelentes para fixar larguras e/ou comprimentos, pelo que devem ser usadas para misturar imagens e texto. Amigabilidade Usabilidade Qualidade Gráfica Clareza e Objectividade da Informação Clareza e objectividade da informação: Qualidade Gráfica As páginas Web são claras quanto às suas mensagens? A informação apresentada é objectiva? 51 As Páginas Web têm boa apresentação gráfica? Os conteúdos estão bem distribuídos? A disposição dos elementos multimédia está feita de forma agradável, harmoniosa? As cores estão usadas de forma criteriosa, de modo a destacar e favorecer a informação ou prejudicam a leitura? 52 Usabilidade As páginas demoram muito ou pouco a ser carregadas pelo Browser? Se usarmos o browser em modo de texto, existe texto alternativo às imagens? As hiperligações são fáceis de reconhecer e de compreender para onde reenviam? - Usabilidade Técnicas que ajudam os seres humanos a realizarem tarefas em meios gráficos (Web) de computador. A usabilidade contempla 8 regras Na Internet é o utilizador quem manda A qualidade baseia-se na rapidez e confiança Segurança A confiança custa a conquistar e pode-se perder num simples link quebrado Simplifique, reduza e optimize Conclusões no início Evite fazer perder tempo às pessoas Bons conteúdos

10 Amigabilidade As páginas estão acessíveis a todos os utilizadores? As páginas Web têm interesse para todos os utilizadores? Amigável Para que tipo de utilizadores pode ter interesse? Quais os motivos de interesse das Páginas Web? Não Amigável Ergonomia Definição Regras de adaptação entre o trabalhador e os instrumentos de trabalho. Ergonómico Equipamento adaptado às características e necessidades do utilizador Portabilidade Definição Uma deve ser: Capacidade das Páginas Web se adaptarem aos diferentes Web browsers

11 Mapa Mental Objectivos da Próxima Aula Conhecer e compreender as fases de planeamento de Páginas Web Planear um conjunto de Páginas Web Ficha de Trabalho 63 11