Manual avanado do utilizador - FEUPtemplate/outros_documentos/...Manual Avançado do Utilizador...

Manual Avançado do Utilizador

Página 1 de 21

Conteúdos Conteúdos………………………………………………………………….1 Acerca do grupo…………………………………………………………....2 Acerca do trabalho…………………………………………………………3 Sobre HTML……………………………………………………………….4 Sobre CSS………………………………………………………………….8 Gerir a conta pessoal…………………..………………………………….10 Alguns comandos úteis de Unix/Linux…………………………………...12 Criar uma área restrita…………………………………………………….14 Gerir a área restrita………………………………………………………..17 Colocar notícias dinâmicas em páginas.........................................………..18 Glossário…………………………………………………………………..19


Página 2 de 21

Acerca do grupo

Faculdade de Engenharia da Universidade do Porto Grupo 1 Projecto SOAP 2005/2006 Tema: Templates para páginas pessoais de alunos "Como ajudar a fazer páginas web a quem prefere fazer outras coisas" Elementos do grupo: Ariana Pintor Carlos Pires Ivo Paz dos Reis João Oliveira Luís Santos Miguel Bessa Professor responsável: Gabriel David Novembro de 2005


Página 3 de 21

Acerca do trabalho

O nosso trabalho consiste na criação de templates para páginas web, destinados a todos os alunos da comunidade FEUP. Este manual avançado do utilizador, serve como complemento aos ficheiros ReadMe disponibilizados para cada tipo de página, pelo que aconselhamos uma leitura prévia destes ficheiros.

Pretendemos assim esclarecer dúvidas que possam surgir em relação a este tema. Para outras questões, pode sempre consultar os recursos da FEUP.


Página 4 de 21

Sobre HTML

Pequena Introdução

HTML (Hyper Text Markup Language), não é mais que uma linguagem, utilizada para a construção de páginas web. O browser interpreta o código html, e cria um ambiente gráfico, no fundo, é o que nós vemos.

Organização básica do código

O código encontra-se organizado em dois grupos: o cabeçalho (head) e

o corpo da página (body). O primeiro contém informações relativas à página, como por exemplo, o título da página a apresentar na barra de títulos do browser, o idioma da página, a referencia ao css, etc. O corpo da página, contém tudo o que é visível no template.

O código

Existem referências de início e de fim, para cada parte do código. Por

exemplo, tudo o que aparece no corpo da página (body), encontra-se entre "" e "". Esta referência é uma tag.


Página 5 de 21

Algumas tags:

Define o código, indicando ao browser que se trata de código html

Cabeçalho

Corpo da página

Parágrafo

Link (Hiperligação)

Quebra de linha

Tabela

Linhas da tabela

Células da tabela

Divisões na página

Define uma secção de texto (tipo de letra, cor e tamanho)

Negrito

Itálico

Sublinhado

Riscado

Imagem


Página 6 de 21

Outros conteúdos: &nbsp Espaço

Comentários à página. Estes comentários não são visíveis no template, nem afectam a funcionalidade da página.

#000000 Código hexadecimal de uma cor. bgcolor="[código hexadecimal de uma cor]" Cor de fundo

href="[endereço]" Endereço de localização da fonte, para a tag referida

class="[linha de css]" Linha de css que define o estilo da zona referida

src="[endereço]" Endereço fonte da imagem ou link a inserir cellspacing="[número]" Espaçamento entre as células, em pixels width="[número]" Largura da tabela, em pixels cellpadding="[número]" Área das células, em pixels colspan=[número] Número de colunas que a linha contém height="[número]" Altura da célula


Página 7 de 21

Notas:

- Para personalizar o código, basta seguir os comentários presentes no

código e as instruções presentes nos documentos ReadMe (manuais), para cada site disponibilizado.

- Código hexadecimal das cores: Para saber qual o código hexadecimal da cor pretendida, basta utilizar, por exemplo, um programa de edição de imagens ou uma tabela de referências existente na internet.


Página 8 de 21

Sobre CSS

Pequena introdução

CSS (Cascading Style Sheets) é uma linguagem que define os estilos a utilizar numa página HTML ou XML. Ou seja, contém todas as informações relativas à formatação dos textos, imagens, barras de hiperligações, tabelas, caixas de texto, etc. Esta linguagem encontra-se numa Folha de Estilos.

Alterar os estilos das páginas web

Para alterar os estilos das páginas, basta abrir os ficheiros com extensões “.css” com um editor de texto, por exemplo o Bloco de Notas (Notepad), e seguir as instruções (comentários) presentes no código. Em alternativa, pode usar os diferentes ficheiros CSS disponibilizados para cada tipo de página.

Associar HTML com CSS

Para relacionar estas duas linguagens, existem certas referências presentes no código HTML, que apontam para o código CSS.

Para começar, é necessário saber qual a folha de estilos a usar. Esta referência encontra-se no cabeçalho da página web, ou seja, dentro da tag head.


Página 9 de 21

Por exemplo, a seguinte tag presente no head da Site simples, faz a referência ao ficheiro escuro.css: Ou seja, esta página, vai incluir ao longo dela, formatações presentes na Folha de Estilos, escuro.css.

As outras referências, estão presentes ao longo da página (body). Por exemplo, a seguinte tag presente na Site simples, indica que as formatações a utilizar para a caixa de texto, encontram-se na caixa_texto presente na Folha de Estilos:


Página 10 de 21

Gerir a conta pessoal

Pequena Introdução

Todos os alunos têm acesso a contas pessoais, que são criadas automaticamente, sendo fornecido um nome de utilizador (login) e uma palavra-passe (password). Este serviço abrange o webmail, contas em ambientes Windows, Unix/Linux, NT, SiFeup e TCPgate. Neste manual, vamos abordar a gestão da conta pessoal na questão das páginas web pessoais, utilizando para isso o espaço a que cada utilizador tem direito.

Gestão da conta pessoal

Pode gerir a sua área pessoal de várias formas: Enviar e receber ficheiros: - Usando o Webmail da Feup: Aceda ao Webmail da Feup. Depois de fazer a autenticação, seleccione a opção My Account (A minha conta) - File Manager (Gestão de ficheiros). Através deste serviço, pode fazer o upload de ficheiros, criar directórios, apagar itens, etc. - Utilizando os computadores da Feup: Em ambiente Windows, clique com o botão direito do rato em "O meu computador", e seleccione a opção "Ligar unidade de rede". De seguida, especifique a unidade (Z:, por exemplo) e a pasta, que será \\homes.


Página 11 de 21

Através deste serviço pode aceder à sua área pessoal através de "O meu computador". - Usando um programa de FTPS, por exemplo SSH (é necessário ligação por VPN à Feup): Para utilizar este serviço basta preencher o Host Name: yoda.fe.up.pt, e fazer a autenticação. - Utilizando a opção "Os meus locais na rede" do Windows (é necessário ligação por VPN à Feup): Seleccione a opção adicionar locais de rede. Introduza o endereço de rede ftp://yoda.fe.up.pt . Seguidamente, basta fazer a autenticação. Pode aceder à sua área, através de "Os meus locais na rede" ou digitando o endereço ftp://yoda.fe.up.pt . Outras operações: - Usando uma "linha de comandos", como por exemplo, a ferramenta Putty, é possível realizar certas operações (consultar página seguinte). É necessário uma ligação VPN à Feup. Notas: - Para mais informações relativamente à ferramenta Putty e às ligações VPN, consultar a página do CICA em: http://www.fe.up.pt/cica . - Todo o conteúdo do site, incluíndo os directórios, as páginas e outros ficheiros, devem estar no directório public_html.

ftp://yoda.fe.up.pt/ftp://yoda.fe.up.pt/http://www.fe.up.pt/cica


Página 12 de 21

Alguns comandos úteis de Unix/Linux

Porquê utilizar comandos de Unix/Linux

Os comandos Unix/Linux, são utilizados para gerir a conta pessoal através de uma Linha de Comandos, utilizando por exemplo, a ferramenta Putty. Lista de alguns comandos úteis, e suas funções: mkdir [nome do directório] - cria um directório Ex. mkdir data - cria o directório data cd [nome do directório] - acede ao directório Ex. cd data - acede ao directório data cd - volta ao directório de acolhimento (directório inicial) rmdir [nome do directório] - apaga directório Ex. rmdir data - apaga o directório data


Página 13 de 21

cd - - retrocede ao directório anterior pwd - apresenta o caminho completo até ao directório actual ls - faz a listagem do conteúdo do directório actual ls -alh - faz a listagem detalhada do conteúdo do directório actual du -bsh - mostra o espaço ocupado pelo directório actual, em MegaBytes cat - mostra o conteúdo de um ficheiro Ex. cat passe - mostra o conteúdo do ficheiro passe rm - apaga ficheiros Ex. rm passe - apaga o ficheiro passe chmod - altera as permissões dos directórios e ficheiros Ex. chmod 711 public_html - altera as permissões para public_html htpasswd - altera a palavra-passe Ex. htpasswd passe utilizador1 - altera no ficheiro passe, a palavra-passe, do utilizador1


Página 14 de 21

Criar uma área restrita

Objectivo

Pretende-se criar uma área restrita, protegida por autenticação, com o objectivo de proteger certos conteúdos nas páginas web, como por exemplo, certos trabalhos. Assim, só poderá visualizar estes conteúdos, quem o administrador quiser, existindo para isso um nome de utilizador (login) e uma palavra-passe (password), a fornecer a cada utilizador. Deverá existir um link na(s) sua(s) página(s) para a página index.html, dentro do directório protegido, que será a página inicial deste, e que deve conter os links para os documentos a proteger, como o exemplo: [nome do directório a proteger]/index.html

Criar a área restrita

Para poder efectuar esta operação, necessita de uma ligação VPN à FEUP, e um programa de Telnet, ou em alternativa, a ferramenta Putty. Recomenda-se o uso de serviços SSH e SFTP, já que estes estabelecem ligações encriptadas, logo mais seguras. Passo 1 - Ligue-se à FEUP através de VPN, e aceda a uma Linha de Comandos (Putty ou SSH). Passo 2 - Aceda à sua área pessoal e crie o directório data, executando o seguinte comando: mkdir data Passo 3 - Depois de verificar se possui o directório public_html dentro da sua área pessoal, execute o comando ls -l, e verifique se as permissões de acesso são as seguintes: drwx--x--x. No caso de não serem, execute o comando


Página 15 de 21

chmod 711 public_html, para fazer a alteração. Deve proceder da mesma forma em relação ao directório data. Passo 4 - Aceda ao directório public_html executando cd public_html. De seguida, execute o comando mkdir [nome do directório a proteger] (indique um nome à sua escolha). Deve garantir que as permissões deste directório são drwx--x--x. No caso de não serem, deve proceder da mesma forma indicada no passo 3. Passo 5 - Criação do ficheiro .htaccess: Copie as seguintes linhas de código para um editor de texto, o Bloco de Notas (Notepad) é um bom recurso, tendo em atenção que: - Area_Restrita, é o nome da caixa de diálogo de autenticação (não se aconselha a sua alteração) - [caminho], é o caminho completo para o ficheiro passe, a criar posteriormente. Para adquirir este caminho deve aceder ao directório data, e executar pwd. Deverá aparecer algo semelhante ao exemplo: /usr/users2/[sigla do departamento]/[código do aluno]/data. De seguida deverá acrescentar /passe (ficheiro a criar posteriormente). No final, o caminho completo, deverá ser: /usr/users2/[sigla de departamento]/[código do aluno]/data/passe AuthType Basic AuthName Area_Restrita AuthUserFile [caminho] require valid-user Guarde o ficheiro com o nome .htaccess.


Página 16 de 21

Em alternativa pode copiar o ficheiro do nosso site, e alterá-lo conforme acima referido. Passo 6 - Transfira o ficheiro .htaccess, para o directório [nome do directório a proteger]. Passo 7 - Criação do ficheiro passe: Recorrendo de novo à linha de comandos, deve posissionar-se no directório "data", e executar htpasswd -c passe [nome de utilizador]. Logo de seguida, deverá ser pedida uma palavra-passe (password). No final, a sua àrea pessoal, deverá ter a seguinte arquitectura: [código do aluno] bin mail public_html index.html (outros ficheiros públicos) [nome do directório a proteger] .htaccess index.html (contém links para outros ficheiros protegidos) (outros ficheiros protegidos) data passe


Página 17 de 21

Gerir a área restrita

Para gerir a área restrita, necessita de trabalhar com uma Linha de Comandos.

É possível ao administrador a alteração de todos os dados relativos aos utilizadores. Para isso, basta situar-se no directório data. - Criação de contas de utilizadores: executar htpasswd passe [nome de utilizador] - Eliminação de contas de utilizadores: executar htpasswd passe -D [Nome de utilizador] - Alteração de palavras-passe, de utilizadores: executar htpasswd passe [nome do utilizador] - Eliminação de todas as contas de utilizador, e logo de seguida, criação de outra: executar htpasswd -c passe [nome do utilizador] - Visualização das contas de utilizador: executar cat passe


Página 18 de 21

Colocar notícias dinâmicas em páginas

A colocação de notícias dinâmicas em páginas, relacciona-se com os formatos RSS e ATOM, que permitem a visualização de conteúdos, neste caso notícias, presentes noutros sites.

Por exemplo, a linguagem RSS, é usada no Site Profissional, para a disponibilização das notícias presentes no SiFeup. Para utilizar estes serviços nas páginas pessoais, basta utilizar uma das seguintes ferramentas, tendo em atenção que os endereços feeds têm que terminar em .rss ou .atom, consoante o serviço. Para RSS, utilizar: http://itde.vccs.edu/rss2js/build.php Para ATOM, utilizar (carece de registo): http://www.feeddigest.com

http://itde.vccs.edu/rss2js/build.phphttp://www.feeddigest.com/


Página 19 de 21

Glossário

ATOM Formato para disponibilização de notícias, semelhante ao RSS. Browser Um programa que permite visualizar e utilizar uma dada base de dados, distribuída ou não por vários

computadores. Termo normalmente aplicado para os programas que permitem navegar na World Wide Web.

Comandos São ordens ou instruções, geralmente escritas, dadas a um computador, para que este realize operações

pré-definidas. Css Cascading Style Sheets. Linguagem que descreve o aspecto gráfico, de uma Página web, escrita em

HTML. Por exemplo, as páginas usadas neste trabalho, são escritas em HTML, e têm referências ao CSS, que dita qual a formatação a utilizar, num tipo de letra, caixa de texto, etc.

Directório Espaço destinado a conter ficheiros. Sistema de armazenamento. Download Fazer o download de um arquivo. Acto de transferir (fazer uma cópia) um arquivo de um computador

remoto para o seu próprio computador, usando qualquer protocolo de comunicações. Encriptação Processo de codificação de dados, que impossibilita a leitura de informações por utilizadores não

autorizados. Extensão Terminação de um ficheiro, que permite a associação deste, a um programa que o edite ou abra, ou à sua

função. Feed O termo Feed significa alimentação. Por exemplo, RSS feeds, são listas de alimentação que estão

constantemente a ser actualizadas, sendo o endereço de alimentação (endereço da RSS Feed), um link directo a estas listas.

Ficheiro Ficheiro ou arquivo, é um agrupamento de registos que seguem uma regra estrutural e contém dados

sobre uma área específica. Estes, podem conter qualquer tipo de dados, de suporte informático: textos, imagens, vídeos, programas, etc.

Freeware Software distribuído em regime gratuito mas segundo alguns princípios gerais como a impossibilidade de

alteração de qualquer parte para posterior distribuição, impossibilidade de venda, etc. FTP File Transfer Protocol. Designa o principal protocolo de transferência de arquivo usado na Internet, ou

então um programa que usa esse protocolo. FTPS Protocolo de transferência de arquivos com opção de segurança (SSL), usando para isso ligações

encriptadas. GIF Graphic Interchange Format. Formato para arquivos de imagem, muito utilizado, desde a altura em que

foi espalhado pela CompuServe. A sua utilidade reside no facto do fundo poder ser transparente. Pode também ser uma pequena animação.

Hiperlink Ou simplesmente link. Nas páginas da Web, quando aparecem palavras em destaque, pode clicar-se nelas

e navegar pelos serviços e servidores da rede.


Página 20 de 21

Home Page Página base da WWW de uma instituição ou particular. A página base é uma espécie de ponto de partida

para a procura de informações relativas a essa pessoa ou instituição. HTML Hypertext Markup Language. É uma linguagem de descrição (e edição) de paginas de informação,

standard na WWW. Com essa linguagem (que, para alem do texto, tem comandos para introdução de imagens, formulários, alteração de fontes, etc.), podem definir-se paginas que contenham informação nos mais variados formatos: texto, som, imagens e animações.

HTTP Hypertext Transport Protocol. É o protocolo que define como É que dois programas/servidores devem

interactuar, de maneira a transferirem entre si comandos ou informação relativos `a WWW. Internet A melhor demonstração real do que É uma auto-estrada da informação. A Internet (com I maiúsculo) É

uma imensa rede de redes que se estende por todo o planeta e praticamente todos os países. Os meios de ligação dos computadores desta rede são variados, indo desde rádio, linhas telefónicas, ISDN, linhas digitais, satélite, fibras-opticas, etc. Criada em 1969 pelo Departamento de Defesa dos EUA (DoD) como um projecto pioneiro de constituição de uma rede capaz de sobreviver a ataques nucleares, foi-se expandindo até chegar ao tamanho e importância que hoje tem.

JPEG Joint Photographic Experts Group. Algoritmo, muito utilizado na Internet, para comprimir imagens. A

extensão de ficheiros deste tipo é:”.jpg”. Linha de Programa que permite a inserção de comandos. comandos Linux Sistema operativo, criado por Linus Torvald, baseado na linguagem do Unix, e que funciona com

qualquer sistem operativo. Página Web Documento da World Wide Web que é apresentado através de um browser. Cada página web tem um

URL específico. Public_HTML Directório presemte na conta pessoal de cada utilizador, registado no SiFeup, através do qual, os ficheiros

são disponibilizados para acesso público através da Internet. É este directório, que deve ser utilizado para a colocação de todos os ficheiros referentes à Página web de cada um.

ReadMe Ficheiros geralmente de extensões .txt, que servem como manuais de utilizador. Devem ser consultados ,

antes de utilizar o programa ou ficheiros a que vêm associados. RSS Really Simple Syndication é uma linguagem que permite a disponibilização de conteúdos de uma página,

de forma a que estes possam ser integrados noutras. Semelhante a ATOM. SiFEUP Sistema de Informação da Faculdade de Engenharia da Universidade do Porto. Sistema de Informação ou

Base de Dados, com interface web, que permite a recolha, consulta e gestão, de informações referentes à Faculdade, alunos, docentes, disciplinas, etc.

Site Site, Website ou web site. É um conjunto de páginas web. SSH Secure Shell. É simultaneamente um programa e um protocolo, que permite a ligação entre dois

computadores. Possui as mesmas funcionalidades do Telnet, mas tem a vantagem de as comunicações serem encriptadas.

SSL Protocolo de comunicações seguras, permitindo que o cliente estabeleça uma ligação encriptada com o

servidor, evitando intrusões, violações de segurança e falsificações. Tag Estrutura de marcação, com marcas de início e de fim, que contém códigos de formatação. Tem como o

objectivo orientar o browser de modo a que este transforme um conjunto de instruções, num ambiente gráfico (página web).

TCPgate Serviço da FEUP, que permite o acesso à internet, usando um acesso via modem, RDIS ou via internet.


Página 21 de 21

TCP/IP Conjunto de protocolos da Internet, definindo como se processam as comunicares entre os vários

computadores. Pode ser implementado em virtualmente qualquer tipo de computador, pois É independente do hardware. Geralmente, para alem dos protocolos TCP e IP (porventura os 2 mais importantes), o nome TCP/IP designa também o conjunto dos restantes protocolos Internet: UDP, ICMP, etc.

Telnet Protocolo e simultaneamente um programa (linha de comandos), que permite a ligação de um

computador a outro, funcionando o primeiro como se fosse um terminal remoto do segundo. Este protocolo funciona através de comandos, permitindo a execução de operações no computador ao qual se está ligado.

Template Página Web pré-existente, que inclui campos alteráveis de forma a ser utilizada para a personalização,

podendo assim ser utilizada como base para a criação de outras páginas web. Unix Sistema operativo. Upload Fazer o upload de um arquivo. Acto de transferir o arquivo do seu computador para um computador

remoto, usando qualquer protocolo de comunicações. URL Uniform Resource Locator. Localizador Uniformizado de Recursos. Método de especificação de um

determinado recurso na Internet, seja ele obtido por FTP, News, Gopher, Mail, HTTP, etc. Pretende uniformizar a maneira de designar a localização de um determinado tipo de informação na Internet. Exemplo: http://www.fe.up.pt – pedido, por HTTP, da home page (WWW) da página inicial do SiFEUP.

VPN Virtual Private Network. Rede de comunicações privada, construída sobre uma rede pública, que permite

a comunicação entre um utilizador autorizado e a sua empresa e/ou instituição. Webmail Serviço de e-mail, acessível através de um browser. Windows Sistema operativo muito popular, criado pela Microsoft. WWW World Wide Web. Literalmente teia de alcance mundial. Conjunto dos servidores que "falam" HTTP e

informação ai armazenada em formato HTML. A World Wide Web É uma grande teia de informação multimédia em hiper texto. O hiper texto significa que se pode escolher uma palavra destacada numa determinada pagina e obter assim uma outra página de informação relativa. As paginas podem conter texto, imagens, sons, animações, etc. A World Wide Web É uma gigantesca base de dados distribuída acessível de uma forma muito atraente e intuitiva.

Manual avanado do utilizador - FEUPtemplate/outros_documentos/...Manual Avançado do Utilizador...

Documents

Transcript of Manual avanado do utilizador - FEUPtemplate/outros_documentos/...Manual Avançado do Utilizador...