manual avanado do utilizador -...

Manual Avanado do Utilizador

Pgina 1 de 21

Contedos Contedos.1 Acerca do grupo....2 Acerca do trabalho3 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 notcias dinmicas em pginas...........................................18 Glossrio..19


Pgina 2 de 21

Acerca do grupo

Faculdade de Engenharia da Universidade do Porto Grupo 1 Projecto SOAP 2005/2006 Tema: Templates para pginas pessoais de alunos "Como ajudar a fazer pginas web a quem prefere fazer outras coisas" Elementos do grupo: Ariana Pintor Carlos Pires Ivo Paz dos Reis Joo Oliveira Lus Santos Miguel Bessa Professor responsvel: Gabriel David Novembro de 2005


Pgina 3 de 21

Acerca do trabalho

O nosso trabalho consiste na criao de templates para pginas web, destinados a todos os alunos da comunidade FEUP. Este manual avanado do utilizador, serve como complemento aos ficheiros ReadMe disponibilizados para cada tipo de pgina, pelo que aconselhamos uma leitura prvia destes ficheiros.

Pretendemos assim esclarecer dvidas que possam surgir em relao a este tema. Para outras questes, pode sempre consultar os recursos da FEUP.


Pgina 4 de 21

Sobre HTML

Pequena Introduo

HTML (Hyper Text Markup Language), no mais que uma linguagem, utilizada para a construo de pginas web. O browser interpreta o cdigo html, e cria um ambiente grfico, no fundo, o que ns vemos.

Organizao bsica do cdigo

O cdigo encontra-se organizado em dois grupos: o cabealho (head) e

o corpo da pgina (body). O primeiro contm informaes relativas pgina, como por exemplo, o ttulo da pgina a apresentar na barra de ttulos do browser, o idioma da pgina, a referencia ao css, etc. O corpo da pgina, contm tudo o que visvel no template.

O cdigo

Existem referncias de incio e de fim, para cada parte do cdigo. Por

exemplo, tudo o que aparece no corpo da pgina (body), encontra-se entre "" e "". Esta referncia uma tag.


Pgina 5 de 21

Algumas tags:

Define o cdigo, indicando ao browser que se trata de cdigo html

Cabealho

Corpo da pgina

Pargrafo

Link (Hiperligao)

Quebra de linha

Tabela

Linhas da tabela

Clulas da tabela

Divises na pgina

Define uma seco de texto (tipo de letra, cor e tamanho)

Negrito

Itlico

Sublinhado

Riscado

Imagem


Pgina 6 de 21

Outros contedos: &nbsp Espao

Comentrios pgina. Estes comentrios no so visveis no template, nem afectam a funcionalidade da pgina.

#000000 Cdigo hexadecimal de uma cor. bgcolor="[cdigo hexadecimal de uma cor]" Cor de fundo

href="[endereo]" Endereo de localizao da fonte, para a tag referida

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

src="[endereo]" Endereo fonte da imagem ou link a inserir cellspacing="[nmero]" Espaamento entre as clulas, em pixels width="[nmero]" Largura da tabela, em pixels cellpadding="[nmero]" rea das clulas, em pixels colspan=[nmero] Nmero de colunas que a linha contm height="[nmero]" Altura da clula


Pgina 7 de 21

Notas:

- Para personalizar o cdigo, basta seguir os comentrios presentes no

cdigo e as instrues presentes nos documentos ReadMe (manuais), para cada site disponibilizado.

- Cdigo hexadecimal das cores: Para saber qual o cdigo hexadecimal da cor pretendida, basta utilizar, por exemplo, um programa de edio de imagens ou uma tabela de referncias existente na internet.


Pgina 8 de 21

Sobre CSS

Pequena introduo

CSS (Cascading Style Sheets) uma linguagem que define os estilos a utilizar numa pgina HTML ou XML. Ou seja, contm todas as informaes relativas formatao dos textos, imagens, barras de hiperligaes, tabelas, caixas de texto, etc. Esta linguagem encontra-se numa Folha de Estilos.

Alterar os estilos das pginas web

Para alterar os estilos das pginas, basta abrir os ficheiros com extenses .css com um editor de texto, por exemplo o Bloco de Notas (Notepad), e seguir as instrues (comentrios) presentes no cdigo. Em alternativa, pode usar os diferentes ficheiros CSS disponibilizados para cada tipo de pgina.

Associar HTML com CSS

Para relacionar estas duas linguagens, existem certas referncias presentes no cdigo HTML, que apontam para o cdigo CSS.

Para comear, necessrio saber qual a folha de estilos a usar. Esta referncia encontra-se no cabealho da pgina web, ou seja, dentro da tag head.


Pgina 9 de 21

Por exemplo, a seguinte tag presente no head da Site simples, faz a referncia ao ficheiro escuro.css: Ou seja, esta pgina, vai incluir ao longo dela, formataes presentes na Folha de Estilos, escuro.css.

As outras referncias, esto presentes ao longo da pgina (body). Por exemplo, a seguinte tag presente na Site simples, indica que as formataes a utilizar para a caixa de texto, encontram-se na caixa_texto presente na Folha de Estilos:


Pgina 10 de 21

Gerir a conta pessoal

Pequena Introduo

Todos os alunos tm acesso a contas pessoais, que so criadas automaticamente, sendo fornecido um nome de utilizador (login) e uma palavra-passe (password). Este servio abrange o webmail, contas em ambientes Windows, Unix/Linux, NT, SiFeup e TCPgate. Neste manual, vamos abordar a gesto da conta pessoal na questo das pginas web pessoais, utilizando para isso o espao a que cada utilizador tem direito.

Gesto da conta pessoal

Pode gerir a sua rea pessoal de vrias formas: Enviar e receber ficheiros: - Usando o Webmail da Feup: Aceda ao Webmail da Feup. Depois de fazer a autenticao, seleccione a opo My Account (A minha conta) - File Manager (Gesto de ficheiros). Atravs deste servio, pode fazer o upload de ficheiros, criar directrios, apagar itens, etc. - Utilizando os computadores da Feup: Em ambiente Windows, clique com o boto direito do rato em "O meu computador", e seleccione a opo "Ligar unidade de rede". De seguida, especifique a unidade (Z:, por exemplo) e a pasta, que ser \\homes.


Pgina 11 de 21

Atravs deste servio pode aceder sua rea pessoal atravs de "O meu computador". - Usando um programa de FTPS, por exemplo SSH ( necessrio ligao por VPN Feup): Para utilizar este servio basta preencher o Host Name: yoda.fe.up.pt, e fazer a autenticao. - Utilizando a opo "Os meus locais na rede" do Windows ( necessrio ligao por VPN Feup): Seleccione a opo adicionar locais de rede. Introduza o endereo de rede ftp://yoda.fe.up.pt . Seguidamente, basta fazer a autenticao. Pode aceder sua rea, atravs de "Os meus locais na rede" ou digitando o endereo ftp://yoda.fe.up.pt . Outras operaes: - Usando uma "linha de comandos", como por exemplo, a ferramenta Putty, possvel realizar certas operaes (consultar pgina seguinte). necessrio uma ligao VPN Feup. Notas: - Para mais informaes relativamente ferramenta Putty e s ligaes VPN, consultar a pgina do CICA em: http://www.fe.up.pt/cica . - Todo o contedo do site, inclundo os directrios, as pginas e outros ficheiros, devem estar no directrio public_html.

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


Pgina 12 de 21

Alguns comandos teis de Unix/Linux

Porqu utilizar comandos de Unix/Linux

Os comandos Unix/Linux, so utilizados para gerir a conta pessoal atravs de uma Linha de Comandos, utilizando por exemplo, a ferramenta Putty. Lista de alguns comandos teis, e suas funes: mkdir [nome do directrio] - cria um directrio Ex. mkdir data - cria o directrio data cd [nome do directrio] - acede ao directrio Ex. cd data - acede ao directrio data cd - volta ao directrio de acolhimento (directrio inicial) rmdir [nome do directrio] - apaga directrio Ex. rmdir data - apaga o directrio data


Pgina 13 de 21

cd - - retrocede ao directrio anterior pwd - apresenta o caminho completo at ao directrio actual ls - faz a listagem do contedo do directrio actual ls -alh - faz a listagem detalhada do contedo do directrio actual du -bsh - mostra o espao ocupado pelo directrio actual, em MegaBytes cat - mostra o contedo de um ficheiro Ex. cat passe - mostra o contedo do ficheiro passe rm - apaga ficheiros Ex. rm passe - apaga o ficheiro passe chmod - altera as permisses dos directrios e ficheiros Ex. chmod 711 public_html - altera as permisses para public_html htpasswd - altera a palavra-passe Ex. htpasswd passe utilizador1 - altera no ficheiro passe, a palavra-passe, do utilizador1


Pgina 14 de 21

Criar uma rea restrita

Objectivo

Pretende-se criar uma rea restrita, protegida por autenticao, com o objectivo de proteger certos contedos nas pginas web, como por exemplo, certos trabalhos. Assim, s poder visualizar estes contedos, 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) pgina(s) para a pgina index.html, dentro do directrio protegido, que ser a pgina inicial deste, e que deve conter os links para os documentos a proteger, como o exemplo: [nome do directrio a proteger]/index.html

Criar a rea restrita

Para poder efectuar esta operao, necessita de uma ligao VPN FEUP, e um programa de Telnet, ou em alternativa, a ferramenta Putty. Recomenda-se o uso de servios SSH e SFTP, j que estes estabelecem ligaes encriptadas, logo mais seguras. Passo 1 - Ligue-se FEUP atravs de VPN, e aceda a uma Linha de Comandos (Putty ou SSH). Passo 2 - Aceda sua rea pessoal e crie o directrio data, executando o seguinte comando: mkdir data Passo 3 - Depois de verificar se possui o directrio public_html dentro da sua rea pessoal, execute o comando ls -l, e verifique se as permisses de acesso so as seguintes: drwx--x--x. No caso de no serem, execute o comando


Pgina 15 de 21

chmod 711 public_html, para fazer a alterao. Deve proceder da mesma forma em relao ao directrio data. Passo 4 - Aceda ao directrio public_html executando cd public_html. De seguida, execute o comando mkdir [nome do directrio a proteger] (indique um nome sua escolha). Deve garantir que as permisses deste directrio so drwx--x--x. No caso de no serem, deve proceder da mesma forma indicada no passo 3. Passo 5 - Criao do ficheiro .htaccess: Copie as seguintes linhas de cdigo para um editor de texto, o Bloco de Notas (Notepad) um bom recurso, tendo em ateno que: - Area_Restrita, o nome da caixa de dilogo de autenticao (no se aconselha a sua alterao) - [caminho], o caminho completo para o ficheiro passe, a criar posteriormente. Para adquirir este caminho deve aceder ao directrio data, e executar pwd. Dever aparecer algo semelhante ao exemplo: /usr/users2/[sigla do departamento]/[cdigo do aluno]/data. De seguida dever acrescentar /passe (ficheiro a criar posteriormente). No final, o caminho completo, dever ser: /usr/users2/[sigla de departamento]/[cdigo do aluno]/data/passe AuthType Basic AuthName Area_Restrita AuthUserFile [caminho] require valid-user Guarde o ficheiro com o nome .htaccess.


Pgina 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 directrio [nome do directrio a proteger]. Passo 7 - Criao do ficheiro passe: Recorrendo de novo linha de comandos, deve posissionar-se no directrio "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: [cdigo do aluno] bin mail public_html index.html (outros ficheiros pblicos) [nome do directrio a proteger] .htaccess index.html (contm links para outros ficheiros protegidos) (outros ficheiros protegidos) data passe


Pgina 17 de 21

Gerir a rea restrita

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

possvel ao administrador a alterao de todos os dados relativos aos utilizadores. Para isso, basta situar-se no directrio data. - Criao de contas de utilizadores: executar htpasswd passe [nome de utilizador] - Eliminao de contas de utilizadores: executar htpasswd passe -D [Nome de utilizador] - Alterao de palavras-passe, de utilizadores: executar htpasswd passe [nome do utilizador] - Eliminao de todas as contas de utilizador, e logo de seguida, criao de outra: executar htpasswd -c passe [nome do utilizador] - Visualizao das contas de utilizador: executar cat passe


Pgina 18 de 21

Colocar notcias dinmicas em pginas

A colocao de notcias dinmicas em pginas, relacciona-se com os formatos RSS e ATOM, que permitem a visualizao de contedos, neste caso notcias, presentes noutros sites.

Por exemplo, a linguagem RSS, usada no Site Profissional, para a disponibilizao das notcias presentes no SiFeup. Para utilizar estes servios nas pginas pessoais, basta utilizar uma das seguintes ferramentas, tendo em ateno que os endereos feeds tm que terminar em .rss ou .atom, consoante o servio. 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/


Pgina 19 de 21

Glossrio

ATOM Formato para disponibilizao de notcias, semelhante ao RSS. Browser Um programa que permite visualizar e utilizar uma dada base de dados, distribuda ou no por vrios

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

Comandos So ordens ou instrues, geralmente escritas, dadas a um computador, para que este realize operaes

pr-definidas. Css Cascading Style Sheets. Linguagem que descreve o aspecto grfico, de uma Pgina web, escrita em

HTML. Por exemplo, as pginas usadas neste trabalho, so escritas em HTML, e tm referncias ao CSS, que dita qual a formatao a utilizar, num tipo de letra, caixa de texto, etc.

Directrio Espao destinado a conter ficheiros. Sistema de armazenamento. Download Fazer o download de um arquivo. Acto de transferir (fazer uma cpia) um arquivo de um computador

remoto para o seu prprio computador, usando qualquer protocolo de comunicaes. Encriptao Processo de codificao de dados, que impossibilita a leitura de informaes por utilizadores no

autorizados. Extenso Terminao de um ficheiro, que permite a associao deste, a um programa que o edite ou abra, ou sua

funo. Feed O termo Feed significa alimentao. Por exemplo, RSS feeds, so listas de alimentao que esto

constantemente a ser actualizadas, sendo o endereo de alimentao (endereo da RSS Feed), um link directo a estas listas.

Ficheiro Ficheiro ou arquivo, um agrupamento de registos que seguem uma regra estrutural e contm dados

sobre uma rea especfica. Estes, podem conter qualquer tipo de dados, de suporte informtico: textos, imagens, vdeos, programas, etc.

Freeware Software distribudo em regime gratuito mas segundo alguns princpios gerais como a impossibilidade de

alterao de qualquer parte para posterior distribuio, impossibilidade de venda, etc. FTP File Transfer Protocol. Designa o principal protocolo de transferncia de arquivo usado na Internet, ou

ento um programa que usa esse protocolo. FTPS Protocolo de transferncia de arquivos com opo de segurana (SSL), usando para isso ligaes

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 tambm ser uma pequena animao.

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

e navegar pelos servios e servidores da rede.


Pgina 20 de 21

Home Page Pgina base da WWW de uma instituio ou particular. A pgina base uma espcie de ponto de partida

para a procura de informaes relativas a essa pessoa ou instituio. HTML Hypertext Markup Language. uma linguagem de descrio (e edio) de paginas de informao,

standard na WWW. Com essa linguagem (que, para alem do texto, tem comandos para introduo de imagens, formulrios, alterao de fontes, etc.), podem definir-se paginas que contenham informao nos mais variados formatos: texto, som, imagens e animaes.

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

interactuar, de maneira a transferirem entre si comandos ou informao relativos `a WWW. Internet A melhor demonstrao real do que uma auto-estrada da informao. A Internet (com I maisculo)

uma imensa rede de redes que se estende por todo o planeta e praticamente todos os pases. Os meios de ligao dos computadores desta rede so variados, indo desde rdio, linhas telefnicas, ISDN, linhas digitais, satlite, fibras-opticas, etc. Criada em 1969 pelo Departamento de Defesa dos EUA (DoD) como um projecto pioneiro de constituio de uma rede capaz de sobreviver a ataques nucleares, foi-se expandindo at chegar ao tamanho e importncia que hoje tem.

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

extenso de ficheiros deste tipo :.jpg. Linha de Programa que permite a insero de comandos. comandos Linux Sistema operativo, criado por Linus Torvald, baseado na linguagem do Unix, e que funciona com

qualquer sistem operativo. Pgina Web Documento da World Wide Web que apresentado atravs de um browser. Cada pgina web tem um

URL especfico. Public_HTML Directrio presemte na conta pessoal de cada utilizador, registado no SiFeup, atravs do qual, os ficheiros

so disponibilizados para acesso pblico atravs da Internet. este directrio, que deve ser utilizado para a colocao de todos os ficheiros referentes Pgina web de cada um.

ReadMe Ficheiros geralmente de extenses .txt, que servem como manuais de utilizador. Devem ser consultados ,

antes de utilizar o programa ou ficheiros a que vm associados. RSS Really Simple Syndication uma linguagem que permite a disponibilizao de contedos de uma pgina,

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

Base de Dados, com interface web, que permite a recolha, consulta e gesto, de informaes referentes Faculdade, alunos, docentes, disciplinas, etc.

Site Site, Website ou web site. um conjunto de pginas web. SSH Secure Shell. simultaneamente um programa e um protocolo, que permite a ligao entre dois

computadores. Possui as mesmas funcionalidades do Telnet, mas tem a vantagem de as comunicaes serem encriptadas.

SSL Protocolo de comunicaes seguras, permitindo que o cliente estabelea uma ligao encriptada com o

servidor, evitando intruses, violaes de segurana e falsificaes. Tag Estrutura de marcao, com marcas de incio e de fim, que contm cdigos de formatao. Tem como o

objectivo orientar o browser de modo a que este transforme um conjunto de instrues, num ambiente grfico (pgina web).

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


Pgina 21 de 21

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

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 tambm o conjunto dos restantes protocolos Internet: UDP, ICMP, etc.

Telnet Protocolo e simultaneamente um programa (linha de comandos), que permite a ligao de um

computador a outro, funcionando o primeiro como se fosse um terminal remoto do segundo. Este protocolo funciona atravs de comandos, permitindo a execuo de operaes no computador ao qual se est ligado.

Template Pgina Web pr-existente, que inclui campos alterveis de forma a ser utilizada para a personalizao,

podendo assim ser utilizada como base para a criao de outras pginas 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 comunicaes. URL Uniform Resource Locator. Localizador Uniformizado de Recursos. Mtodo de especificao de um

determinado recurso na Internet, seja ele obtido por FTP, News, Gopher, Mail, HTTP, etc. Pretende uniformizar a maneira de designar a localizao de um determinado tipo de informao na Internet. Exemplo: http://www.fe.up.pt pedido, por HTTP, da home page (WWW) da pgina inicial do SiFEUP.

VPN Virtual Private Network. Rede de comunicaes privada, construda sobre uma rede pblica, que permite

a comunicao entre um utilizador autorizado e a sua empresa e/ou instituio. Webmail Servio de e-mail, acessvel atravs 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

informao ai armazenada em formato HTML. A World Wide Web uma grande teia de informao multimdia em hiper texto. O hiper texto significa que se pode escolher uma palavra destacada numa determinada pagina e obter assim uma outra pgina de informao relativa. As paginas podem conter texto, imagens, sons, animaes, etc. A World Wide Web uma gigantesca base de dados distribuda acessvel de uma forma muito atraente e intuitiva.

manual avanado do utilizador -...

Documents