UFCD 0793 Scripts CGI e Folhas de Estilo Formadora: Sónia Rodrigues

Transcrição

1 UFCD 0793 Scripts CGI e Folhas de Estilo Formadora: Sónia Rodrigues 0793 Scripts CGI e folhas de estilo Objectivos da UFCD: Desenvolver páginas para a Web, através de scripts CGI e folhas de estilo. UFCD Scripts CGI e folhas de estilo 2 1

2 Conteúdos Formulários Estrutura e desenho Campos de entrada Botões submit e radio CheckBoxes Selecções Área de textos Campos não visíveis Carregamento de ficheiros através de formulários UFCD Scripts CGI e folhas de estilo 3 Conteúdos CGI Script Estrutura e variáveis CGI HTML dinâmico Posicionar objectos Layers Z-orders Layers visíveis e invisíveis Conceitos Styles sheets em HTML UFCD Scripts CGI e folhas de estilo 4 2

3 Formulários Os formulários interactivos permitem enriquecer as páginas Web com elementos interactivos que permitem por exemplo um diálogo com utilizador da internet. O leitor preenche campos ou clica sobre botões e posteriormente clica num botão de envio (submit) para enviar os seus dados. UFCD Scripts CGI e folhas de estilo 5 Formulário UFCD Scripts CGI e folhas de estilo 6 3

4 Scripts CGI (Common Gateway Interface) Tecnologia que permite criar páginas web dinâmicas, permitindo a um browser passar determinados parâmetros para um programa alojado num servidor Web. Scripts CGI são pequenos programas que interpretam esses parâmetros e geram a página depois de os processar. UFCD Scripts CGI e folhas de estilo 7 Scripts CGI (Common Gateway Interface) Um script CGI é um programa geralmente escrito em C ou PERL. Na maioria dos servidores, os scripts CGI ficam armazenados na pasta cgi-bin. O script é executado quando o endereço do script é requisitado pelo navegador. Os dados são enviados para o script através de um formulário HTML. A função ACTION especifica o endereço do script. Quando o script recebe os dados do formulário, ele processa as informações e converte todos os caracteres modificados. UFCD Scripts CGI e folhas de estilo 8 4

5 Scripts CGI (Common Gateway Interface) Variáveis de CGI Variáveis de Ambiente são variáveis estabelecidas no servidor HTTP no momento de atender a requisições de documentos. Variáveis mais usadas: SERVER_SOFTWARE: nome e versão do software do servidor SERVER_NAME: nome do servidor SERVER_PROTOCOL: versão do protocolo HTTP usado pelo servidor UFCD Scripts CGI e folhas de estilo 9 Scripts CGI (Common Gateway Interface) SERVER_PORT: porta TCP pela qual o servidor atende às requisições QUERY_STRING: cadeia de caracteres que contém uma consulta ou entrada de formulário REMOTE_HOST: máquina que solicita a execução do script CONTENT_TYPE: tipo de conteúdo da mensagem enviada CONTENT_LENGHT: Comprimento da mensagem enviada HTTP_USER_AGENT: nome e versão do browser utilizado UFCD Scripts CGI e folhas de estilo 10 5

6 Scripts CGI (Common Gateway Interface) Estrutura CGI Os scripts têm uma forma geral comum: 1. leitura de dados entrados pelo utilizador (e/ou campos de informação de um pacote HTTP); 2. processamento dos dados (armazenamento dos dados numa base de dados, realização de cálculos, recuperação de dados etc.); 3. Criação de uma página Web ou geração de uma imagem com os resultados produzidos. UFCD Scripts CGI e folhas de estilo 11 HTML dinâmico ou DHTML DHTML, ou HTML Dinâmico é uma nova tecnologia da Web que torna os elementos da uma página muito mais dinâmicos. Com o HTML (simples), tudo é estático, mas com o DHTML pode dinamizar-se tudo o que se encontra na página como textos, imagens, estilos de página (cor das letras, tamanho etc.), posição de elemento, etc.. UFCD Scripts CGI e folhas de estilo 12 6

7 Cascading Style Sheets (CSS) são documentos com a extensão.css que guardam todas as características gráficas de um site. Podem estar separados, ou no próprio código da página HTML. UFCD Scripts CGI e folhas de estilo 13 O CSS é uma linguagem para estilos que define o layout de documentos HTML. Por exemplo, CSS controla fontes, cores, margens, linhas, alturas, larguras, imagens de fundo, posicionamentos, O HTML pode ser (in)devidamente usado para definir o layout de websites. Contudo, o CSS proporciona mais opções e é mais preciso e sofisticado. O CSS é suportado por todos os navegadores actuais. UFCD Scripts CGI e folhas de estilo 14 7

8 Vantagens do uso de CSS? Controlo do layout de vários documentos a partir de uma simples folha de estilos; Maior precisão no controle do layout; Aplicação de diferentes layouts para servir diferentes medias (ecrã, impressora, etc.); Emprego de variadas, sofisticadas e avançadas técnicas de desenvolvimento. UFCD Scripts CGI e folhas de estilo 15 Muitas das propriedades usadas em Cascading Style Sheets (CSS) são semelhantes àquelas do HTML. A sintaxe básica das CSS Se desejamos uma cor de fundo vermelha para a página web: Usando HTML podemos fazer assim: <body bgcolor="#ff0000"> Com CSS o mesmo resultado será obtido assim: body {background-color: #FF0000;} UFCD Scripts CGI e folhas de estilo 16 8

9 Aplicando CSS a um documento HTML Pode-se aplicar CSS a um documento de três formas distintas. Recomenda-se o método externo. Método 1: In-line (o atributo style) Uma forma de aplicar CSS é pelo uso do atributo style do HTML. UFCD Scripts CGI e folhas de estilo 17 Método 2: Interno (a tag style) Uma outra forma de aplicar CSS é através da utilização da tag <style> do HTML. Como mostrado a seguir: UFCD Scripts CGI e folhas de estilo 18 9

10 Método 3: Externo (link para uma folha de estilos) O método recomendado é o de lincar para uma folha de estilos externa. Uma folha de estilos externa é um simples arquivo de texto com a extensão.css. Tal como com qualquer outro tipo de arquivo pode-se colocar uma folha de estilos tanto no servidor como no disco rígido. UFCD Scripts CGI e folhas de estilo 19 Exemplo: A folha de estilos foi nomeada de style.css e está localizada no directório style. O "truque" é criar um link no documento HTML (default.html) para a folha de estilos (style.css). O link é criado numa simples linha de código HTML como mostrado a seguir: UFCD Scripts CGI e folhas de estilo 20 10

11 Notar que o caminho para a folha de estilos é indicado no atributo href. Esta linha de código deve ser inserida na secção header do documento HTML, isto é, entre as tags <head> e </head>. Conforme mostrado abaixo: UFCD Scripts CGI e folhas de estilo 21 Criar o css. No notepad criar o seguinte código e guardar com extensão.css UFCD Scripts CGI e folhas de estilo 22 11