-
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
-
Manual Avançado do Utilizador
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
-
Manual Avançado do Utilizador
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.
-
Manual Avançado do Utilizador
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.
-
Manual Avançado do Utilizador
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
-
Manual Avançado do Utilizador
Página 6 de 21
Outros conteúdos:   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
-
Manual Avançado do Utilizador
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.
-
Manual Avançado do Utilizador
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.
-
Manual Avançado do Utilizador
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:
-
Manual Avançado do Utilizador
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.
-
Manual Avançado do Utilizador
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
-
Manual Avançado do Utilizador
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
-
Manual Avançado do Utilizador
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
-
Manual Avançado do Utilizador
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
-
Manual Avançado do Utilizador
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.
-
Manual Avançado do Utilizador
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
-
Manual Avançado do Utilizador
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
-
Manual Avançado do Utilizador
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/
-
Manual Avançado do Utilizador
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.
-
Manual Avançado do Utilizador
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.
-
Manual Avançado do Utilizador
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.