Departamento de Inovação, Ciência e Tecnologia Licenciatura em Informática Ramo Educacional Ano Lectivo 2006/2007 Manual de conteúdos da Aula Técnicas de Implantação GRUPO 2 N.º Aluno Licenciatura Nome completo 21723 IE ME Carlos Manuel Fernandes Lopes de Azevedo 21871 IE ME Paulo Jorge Figueiredo Soeiro
Índice VISÃO GERAL...3 TÉCNICAS DE IMPLANTAÇÃO...3 FERRAMENTAS PARA A CRIAÇÃO DE PÁGINAS...4 PROGRAMAÇÃO DE PÁGINAS WEB...5 EDITORES DE PÁGINAS WEB...5 HTML - Principais Tags...7 EDITORES DE IMAGENS E EFEITOS ESPECIAIS...9 EDITORES E PROGRAMAS DE ANIMAÇÃO GRÁFICA...10 FERRAMENTAS E UTILITÁRIOS...11 RESUMO...13 BIBLIOGRAFIA...14 Professores Carlos Azevedo e Paulo Soeiro Página 2 de 14
Visão Geral As técnicas de implantação resumem-se na utilização das seguintes ferramentas: Figura 1- Visão geral das Técnicas de Implantação Técnicas de Implantação As páginas Web são escritas na linguagem HTML (Hypertex Markup Language), ou seja, Linguagem de Marcação de Hipertexto. Nas páginas, a informação está organizada de forma hipertextual, ou seja, as páginas estão ligadas entre si, através de links. Isso permite uma leitura não linear do texto. Hipertexto é o conceito que possibilita a "navegação" entre segmentos de texto independentemente de sua sequência linear ou de sua localização, o leitor salta de uma informação a outra, não necessariamente numa ordem sequencial. Figura 2 - Hipermédia Professores Carlos Azevedo e Paulo Soeiro Página 3 de 14
Um site é um conjunto de páginas Web estruturadas sobre um determinado conteúdo, este conteúdo pode conter: informações, textos, imagens, ilustrações, programas, textos históricos, diagramas, jogos, etc. A página de entrada de um site é chamada de "Home Page". Para que o conteúdo de um documento HTML possa ser formatado e exibido devemos usar um programa chamado browser, ou navegador. Os mais conhecidos são o Internet Explorer e Netscape Navigator. Figura 3 - Programas Navegação O navegador funciona independentemente de se estar ligado a Internet. A melhor forma de se trabalhar desenvolvendo uma página HTML é off-line, desconectada. Primeiro cria as páginas no computador e testa-a por meio do browser. Depois, deve colocá-las no servidor Web para que outras pessoas também possam visualizá-las. Ferramentas para a criação de páginas É recomendável possuir alguns conhecimentos básicos da linguagem HTML, embora actualmente seja possível criar um site utilizando unicamente os editores de páginas, que geram todo o código. Existem vários softwares para edição de páginas html no mercado, os mais conhecidos são: Netscape Composer (gratuito), FrontPage da Microsoft, Dreamweaver da Macromedia e GoLive da Adobe. Figura 4 - Programas de Edição de Páginas web Entretanto a aplicação FrontPage vai ser interrompida. A Microsoft vai continuar a servir as necessidades dos clientes existentes através da introdução destas três novas ferramentas de criação de aplicações e de criação de conteúdos para a Web e que utilizam as mais recentes tecnologias, o Microsoft Office SharePoint Designer 2007 para os profissionais de TIs de empresas, o Microsoft Expression Web Designer para o Web designer profissional e o Microsoft Visual Studio 2005 para o programador Web. Também é necessário ter um navegador instalado, para podermos testar as páginas. Professores Carlos Azevedo e Paulo Soeiro Página 4 de 14
Programação de Páginas Web O HTML é a linguagem mais utilizada para criar páginas Web com hipertexto. Utilizando a Linguagem HTML podemos criar páginas em que certos itens (palavras e/ou imagens) que contêm uma ligação (link) a outra zona da mesma página ou a outros documentos. Figura 5 - Exemplo Código HTML Contudo, a exigência, quer em termos de aparência gráfica, quer em termos de interactividade com o utilizador, levou ao aparecimento de outras linguagens, nomeadamente o DHTML e o VRML. De uma forma simplificada, podemos dizer que o DHTML permite dinamizar todos os elementos da tua página, permitindo alguns efeitos, nomeadamente, o aparecimento e desaparecimento de imagens e textos a voar pela janela. O VRML é uma linguagem que permite a criação de ambientes virtuais por onde se pode passear, visualizar objectos em ângulos diferentes e até interagir com eles. Editores de Páginas Web O Frontpage e o DreamWeaver são dois editores que nos permitem criar páginas Web. O Frontpage é um software desenvolvido pela Microsoft, é bastante fácil de utilizar, permite criar sites com um aspecto profissional sem se necessitar de dominar alguma linguagem de programação. O DreamWeaver é outro software desenvolvido pela Microsoft, utilizado na criação de sites dinâmicos. Permite implementar rapidamente menus interactivos, criar elementos que respondem a acções diversas dos utilizadores, inserir animações, multimédia e ficheiros criados em Flash e ainda outros elementos em páginas Web. Professores Carlos Azevedo e Paulo Soeiro Página 5 de 14
Figura 6 - Interface Dreamweaver Figura 7 - Interface FrontPage Professores Carlos Azevedo e Paulo Soeiro Página 6 de 14
HTML - Principais Tags Um editor de HTML, tal como o FrontPage ou Dreamweaver, disponibilizam várias ferramentas que facilitam a criação de páginas Web. No entanto, é desejável que se conheça pelo menos as tags básicas da linguagem HTML para o caso de ter que fazer uma manutenção no site. A seguir, as tags básicas da linguagem html: Quebras de Linha <P></P> <P>Primeira linha.</p><p>segunda linha.</p> <BR> Primeira linha.<br>segunda linha.<br> Primeira linha. Segunda linha. Primeira linha. Segunda linha. Texto em negrito <B></B> Aula de <B>Programação Web - básico</b> Aula de Programação Web - básico Texto em itálico <I></I> Aula de Informática - <I>Escola</I> Aula de Informática - Escola Centrar texto <center></center> Texto à direita <right></right> Texto à esquerda <left></left> <center>aula de Informática</center> <right>aula de Computação</right> <left>aula de Computação</left> Aula de Computação Aula de Computação Aula de Computação Formatação do texto <FONT FACE=Arial color = red size=2>aula de Aula de Informática Informática</FONT> Professores Carlos Azevedo e Paulo Soeiro Página 7 de 14
Listas Não Numeradas <UL> <LI>UNICAMP <LI>UNESP </UL> UNICAMP UNESP Listas Numeradas <OL> <LI> UNICAMP <LI> UNESP </OL> 1. UNICAMP 2. UNESP Barras horizontais <HR> = marcação de linha SIZE = espessura Width = largura <HR SIZE=2 width=100% > Inserir imagens <img src="exemplos/imagem.jpg> Links <A></A> HREF= referência a página a ser aberta TARGET=_BLANK : abre a página em uma nova janela do browser Abrir uma página: (ficheiros com a extensão.htm ou.html) <A HREF="/exemplos/Pagina.html" TARGET=_BLANK>Clique aqui!!!</a> Clique aqui!!! Mostrar uma imagem: (ficheiros com extensão.gif ou.jpg) <A HREF="/exemplos/Imagem.jpg" TARGET=_BLANK>Clique aqui!!!</a> Clique aqui!!! Fazer o download de um ficheiro: (ficheiros com extensão.doc,.txt,.zip) <A HREF="/exemplos/texto.txt" TARGET=_BLANK>Clique aqui!!!</a> Clique aqui!!! Professores Carlos Azevedo e Paulo Soeiro Página 8 de 14
Receber e-mails: <A HREF="mailto:xxxx@escola.pt">Clique aqui </A> para enviar sua opinião!! Clique aqui para enviar sua opinião!! Abrir uma página noutro servidor: protocolo://servidor/pasta/ficheiro Os protocolos mais usados são (file ou http): File = arquivo no servidor de ftp http = arquivo no servidor World Wide Web <A HREF=http://www.escola.pt TARGET=_BLANK>Clique aqui!!!</a> Clique aqui!!! Trabalhar com tabela de cores Os valores para as cores devem ser escritos no padrão Hexadecimal. Para obter uma lista de cores Hexadecimais, aqui está: Cores Hexadecimais Paleta com 216 cores hexadecimais. Parte superior do formulário Editores de Imagens e efeitos especiais O CorelDRAW e o Photoshop são dois dos editores de imagem mais conhecidos e utilizados na criação de páginas Web. O CorelDRAW é um programa gráfico, desenvolvido pela Corel que gera desenhos vectoriais. De uma forma muito simplificada, podemos dizer que este programa cria imagens recorrendo à utilização de objectos armazenados internamente como equações matemáticas (vectores). Figura 8 - Programa CorelDraw O Photoshop é um software extraordinariamente versátil, desenvolvido pela Adobe, que permite manipular as imagens de diversas formas e reconhece várias extensões de ficheiros gráficos. Figura 9 - Programa PhotoShop Professores Carlos Azevedo e Paulo Soeiro Página 9 de 14
Editores e Programas de Animação Gráfica O Flash é um software desenvolvido pela Macromedia (agora adquirida pela Adobe), que oferece recursos surpreendentes para criar sites apelativos, abrangentes e interactivos. Figura 10 - Programa Flash 1 - Na Barra de Ferramentas encontra a maioria das funções de edição. 2 - O Palco é onde tudo é visualizado. Desenhe, edite, mova e seleccione objectos. 3 - Use a Linha do Tempo para determinar onde os objectos vão aparecer e desaparecer de acordo com o tempo. Camadas e keyframes farão parte do seu vocabulário como Flash Designer. 4 - Os símbolos são armazenados na Biblioteca. Sons, gráficos, bitmaps, botões e movie clips. 5 - O Flash disponibilizou esses Panels para ajudar a controlar quase de tudo. Desde cores, estilos de texto a instâncias de símbolos. 6 - É no Editor de Actions onde você vai inserir suas actions para frames e símbolos. Figura 11 -Interface Flash Esta ferramenta permite criar logótipos com animação e com controlos direccionáveis para a navegação em Websites. O ULEAD GIF Animator é um programa de imagens animadas (GIFs animados) desenvolvido pela ULEAD Systens. Professores Carlos Azevedo e Paulo Soeiro Página 10 de 14
Figura 12 - Programa Gif Animator O ULEAD Cool 3d, é um software também desenvolvido pela ULEAD Systens que nos permite gerar animações tridimensionais. Assim, podemos incluir na nossa página Web, de uma forma muito simples, títulos, logótipos e gráficos animados. Este software disponibiliza uma biblioteca de objectos prontos, estilos, atributos e efeitos que podem ser usados e/ou modificados. Figura 13 - Programa Cool 3D Ferramentas e Utilitários Com o nascimento da Internet uma das primeiras coisas a aparecer foram os File Servers, que são depositários de ficheiros e mantêm uma grande quantidade de informação armazenada, além de gerirem a forma como os utilizadores lhes acedem. Do lado do utilizador o acesso aos ficheiros é feito por transferência electrónica de um computador para outro e toma normalmente o nome de Download. Estes ficheiros podem ser textos, sons ou imagens, mas na maior parte dos casos são programas. Estes programas são em muitos dos casos grátis (freeware) e na maior parte deles shareware, isto é, programas que se podem testar antes de comprar. Existem também os programas do tipo Demo. São programas onde o utilizador não tem acessos a todas as opções do programa. Mas como se processa essa transferência de informação? Quando se navega pela Net utilizando um browser o que acontece é que este entra em contacto com o file server (servidor de ficheiros), selecciona o ficheiro e pede para o mesmo lhe ser enviado, tudo isto é feito recorrendo a um protocolo chamado FTP ou File Transfer Protocol. O facto de se usar um protocolo diferente do HTTP deve-se a razões históricas porque embora o HTTP pudesse ser usado da mesma maneira, os File servers já existiam muito antes da Web ser criada. Isto para além do facto de que um browser normalmente só está preparado para fazer as transferências num sentido: do server para o computador e não ao contrário. Assim um endereço de FTP para um browser tem normalmente a forma: Ftp://ftp.ea.com Existem vários programas que implementam este protocolo, nomeadamente o Cute FTP e o WS FTP. Figura 14 - Programas FTP O Cute FTP é considerado um dos melhores programas para a transferência de ficheiros através da Internet (FTP), permitindo actualizar os ficheiros que constituem um site no respectivo servidor, em tempo real. Professores Carlos Azevedo e Paulo Soeiro Página 11 de 14
O WS FTP é também considerado um dos melhores programas para transferência de ficheiros através da janela da Internet (FTP). De fácil utilização, o WS FTP apresenta uma janela com as pastas e ficheiros do teu computador para selecção do que pretendes transferir. Figura 15 -Interface WS_FTP Professores Carlos Azevedo e Paulo Soeiro Página 12 de 14
Resumo O esquema seguinte apresenta de forma resumida as técnicas de implantação de páginas Web: Figura 16 - Resumo das Técnicas de Implantação Professores Carlos Azevedo e Paulo Soeiro Página 13 de 14
Bibliografia http://www.microsoft.com/brasil/windows/products/winfamily/ie/default.mspx http://www.netscape.com http://www.microsoft.com/brasil/office/frontpage/ http://www.adobe.com/products/dreamweaver/ http://www.corel.com/servlet/satellite/gb/en/content/1150905725000 http://www.adobe.com/br/products/photoshop/photoshop/ http://www.dpchallenge.com/portfolio.php?user_id=23394&collection_id=6845 http://www.adobe.com/products/flash/ http://www.ulead.com/ga/runme.htm http://www.ulead.com/cool3d/runme.htm http://www.wsftp.com http://www.cuteftp.com/ Professores Carlos Azevedo e Paulo Soeiro Página 14 de 14