UNIJUÍ – DETEC – Ciência da Computação
Prof. Msc. Juliano Gomes Weber
([email protected])
Tecnologias Web
Notas de Aula – Aula 05
1º Semestre - 2011
Tecnologias Web
[email protected]
O que vimos até então?
O que vimos nas duas primeiras aulas?
-
Comandos FTP
COMANDO
SINTAXE
DESCRIÇÃO
Executa COMANDO na máquina local.
! COMANDO
No prompt do ftp, os comandos digitados são, a princípio, executados na
máquina remota. Para executar um comando na máquina local
preceda o mesmo com o !
ascii
ascii
Configura o tipo de transferência de arquivos para ASCII. É o valor padrão
bell
bell
Emite um bip quando um comando é completado
binary
Configura o tipo de transferência de arquivos para binário.
bye
bye
Encerra a sessão ftp e retorna ao interpretador de comandos
cd
cd DIRETÓRIO
Muda o diretório de trabalho para DIRETÓRIO
cdup
Muda para o diretório que está um nível acima do diretótio atual
chmod MODO ARQUIVO
Altera as permissões de ARQUIVO de acordo com MODO.
close
close
Encerra a sessão ftp e retorna ao interpretador de comandos
delete
delete ARQUIVO
Apaga ARQUIVO
dir DIRETÓRIO ARQUIVO-LOCAL
Lista o conteúdo de DIRETÓRIO colocando o resultado em ARQUIVOLOCAL, que é um arquivo na sua máquina. Se DIRETÓRIO não for
especificado, será listado o conteúdo do diretório atual. Se
ARQUIVO-LOCAL não for especificado a listagem será enviada para
a tela.
get ARQUIVO-REMOTO ARQUIVO-LOCAL
Baixa ARQUIVO-REMOTO para sua máquina com o nome de ARQUIVOLOCAL. Se ARQUIVO-LOCAL não for especificado o arquivo será
baixado com o mesmo nome que tem na máquina remota.
!
binary
cdup
chmod
dir
get
Comandos FTP
Help
help COMANDO
Descreve sumariamente o COMANDO. Se este não for especificado será
exibida a lista de todos os comandos.
Lcd
lcd DIRETÓRIO
Muda o diretório de trabalho na máquina local.
ls DIRETÓRIO ARQUIVO-LOCAL
Lista o conteúdo de DIRETÓRIO colocando o resultado em ARQUIVOLOCAL, que é um arquivo na sua máquina. Se DIRETÓRIO não for
especificado, será listado o conteúdo do diretório atual. Se ARQUIVOLOCAL não for especificado a listagem será enviada para a tela.
mdelete ARQUIVOS
Apaga ARQUIVOS
mdir
mdir DIRETÓRIOS ARQUIVO-LOCAL
Semelhante a dir, porém lista o conteúdo de vários diretórios
mget
mget ARQUIVOS
Semelhante a get, porém baixa vários arquivos
mkdir
mkdir DIRETÓRIO
Cria um diretório com o nome de DIRETÓRIO
mls DIRETÓRIOS ARQUIVO-LOCAL
Semelhante a ls, porém lista o conteúdo de vários diretórios
mode MODO
Configura o modo de transferência de arquivos para MODO. O modo padrão
é "stream"
modtime ARQUIVO
Exibe a hora da última modificação de ARQUIVO
mput
mput ARQUIVOS
Semelhante a put, porém envia vários arquivos
newer
newer ARQUIVO-REMOTO ARQUIVO-LOCAL
Substitui o ARQUIVO-LOCAL pelo ARQUIVO-REMOTO se a hora de
modificação do ARQUIVO-REMOTO for mais recente
nlist DIRETÓRIOS ARQUIVO-LOCAL
Semelhante a nls
put ARQUIVO-LOCAL ARQUIVO-REMOTO
Envia ARQUIVO-LOCAL para o servidor ftp nomeando-o como ARQUIVOREMOTO. Se ARQUIVO-REMOTO não for especificado o arquivo será
enviado com o nome de ARQUIVO-LOCAL
Ls
mdelete
mls
mode
modtime
nlist
put
Comandos FTP
pwd
pwd
Exibe o caminho completo(PATH) do diretório atual
quit
Quit
Semelhante a bye
recv
recv ARQUIVO-REMOTO ARQUIVO-LOCAL
Semelhante a get
reget ARQUIVO-REMOTO ARQUIVO-LOCAL
Semelhante a get com a diferença que se ARQUIVO-LOCAL existe e é menor
que ARQUIVO-REMOTO, reget considera que ARQUIVO-LOCAL é
ARQUIVO-REMOTO parcialmente transferido e contiua a transferência
do arquivo. Muito útil quando se baixa arquivos grandes.
reget
remotehelp
rhelp
remotestatus
remotehelp COMANDO
rhelp COMANDO
remotestatus ARQUIVO
Semelhante a help, porém solicita ajuda ao servidor ftp
rstatus ARQUIVO
Exibe a situação de ARQUIVO. Se ARQUIVO não for especificado, exibe a
situação da máquina remota.
rename NOME-ANTIGO NOME-NOVO
Renomeia um arquivo
Rmdir
rmdir DIRETÓRIO
Apaga DIRETÓRIO
Send
send ARQUIVO-LOCAL ARQUIVO-REMOTO
Semelhante a put
Size
size ARQUIVO
Exibe o tamanho de ARQUIVO
Status
Status
Exibe a situação atual do servidor ftp
system
System
Exibe o tipo de sistema operacional da máquina remota
type TIPO
Configura o tipo de transferência de arquivos para TIPO. O padrão é ASCII.
Se TIPO não for especificado, será mostrada a configuração atual
? COMANDO
Semelhante a help
rstatus
Rename
type
?
Modelo Cliente-Servidor
percepção canônica
Tecnologias Web
[email protected]
Modelo Cliente-Servidor
percepção avançada...
Navegador
WEB
Servidor
WEB
Servidor de
BD
O que o navegador faz?
Navegador
Servidor
Páginas


Acessa a informação na rede.
Lida com a formatação e a exibição dos
documentos.
O que o navegador faz
Acessa a informação na rede
URL
Uniform Resource Locators
Navegador

Servidor
URL – É o ponteiro para algum dado na WEB, seja um
documento WEB, um arquivo FTP, um endereço de E-mail...
Formulário <form ...>xxx</form>

Atributos

method – Indica o modo pelo qual as informações
coletadas no formulário serão enviadas para o servidor
Web para processamento.



post – Use em um formulário que produz mudanças nos dados
no servidor. Os dados são enviado como uma variável de
ambiente, que os scripts são capazes de acessar.
get – Deve ser usado quando o seu formulário não causar
mudanças nos dados do lado servidor. Os dados do formulário
que usa o get são anexados no final da URL.
action – Especifica para qual URL os dados serão
enviados.
Input

O elemento input é comum em formulários e
sempre exige o atributo type que indica o
tipo, name que fornece um identificador único
para o elemento e value que indica o valor
que o elemento envia para o servidor.
Input (text)



A entrada type=“text” insere uma caixa de
texto de uma linha no formulário.
O elemento label fornece uma descrição para
o elemento input.
O atributo size especifica a largura do texto
de entrada e o atributo maxlenght define o
número máximo de caracteres que o texto a
ser inserido aceitará.
Input (hidden)


A entrada type=“hidden” insere uma caixa de
texto oculta normalmente usada para enviar
informações sem que o usuário perceba.
Os seus atributos são similares ao text.
Input (submit e reset)


SUBMIT – Exibe um botão que permite ao
usuário submeter os dados inseridos no
formulário ao servidor para processamento.
RESET – Permite que o usuário restaure
todos os elementos do formulário a seus
valores default.
Input (text, hidden, submit, reset)
Input (password)

O campo de entrada da senha fornece uma
maneira para os usuários inserirem
informações que eles não desejam que os
outros sejam capazes de ler na tela.
Input (password)
Input (Checkbox e Radio)



As caixas de seleção podem ser usadas individualmente
ou em grupos. Cada caixa de seleção em grupo deve ter
o mesmo name. Isso notifica o script que está tratando o
formulário de que todas as caixas de seleção estão
relacionadas umas com as outras.
Os botões de radio quanto a sua função são similares às
caixas de seleção mas diferem pelo fato de que
somente um elemento no grupo pode ser selecionado
de cada vez.
Insira o atributo checked para indicar quais botões de
rádio você gostaria que fossem selecionados
inicialmente.
Input (Checkbox e Radio)
Textarea

O elemento textarea insere uma caixa de texto
no formulário. E você especifica o tamanho da
caixa com o atributo rows, o qual define o
número de linha que vai aparecer na textarea.
Com o atributo cols, você especifica qual a
largura que deve ter a textarea. Qualquer texto
default que você quer colocar dentro da textarea
deve estar contido no elemento textarea.
Select





O elemento select inserirá uma lista de itens
selecionáveis dentro do seu formulário.
Para adicionar um item à lista, adicione ao elemento
select um elemento option contendo o texto a ser
exibido.
O atributo selected aplica uma seleção default à sua
lista.
Você pode mudar o número de opções visíveis da lista a
um só tempo usando atributo size.
Você pode usar o atributo multiple para pode selecionar
mais de um.
Exemplos..formulario html +
método POST
<html>
<head>
<title> formulário teste </title>
</head>
<body>
<form method="post" action="recebe_form_post.php">
Name: <input type="text" size="10" maxlength="40" name="campo1"> <br />
Password: <input type="password" size="10" maxlength="10" name="campo2">
<input type="submit" value="Enviar">
</form>
</body>
</html>
Exemplos..Capturando no
servidor....
<?php
$campo1 = $_POST['campo1'];
$campo2 = $_POST['campo2'];
$campo3 = $_POST['campo3'];
$campo4 = $_POST['campo4'];
echo "Campo 1 vale";
echo "$campo1";
echo "<br>";
echo "Campo 2 vale";
echo "$campo2“;
php?>
Exemplos..formulario html +
método GET
<html>
<head>
<title> formulário teste </title>
</head>
<body>
<form method=“get" action="recebe_form_get.php">
Name: <input type="text" size="10" maxlength="40" name="campo1"> <br />
Password: <input type="password" size="10" maxlength="10" name="campo2">
<input type="submit" value="Enviar">
</form>
</body>
</html>
Exemplos.. Capturando no
servidor...
<?php
$campo1 = $_GET['campo1'];
$campo2 = $_GET['campo2'];
$campo3 = $_GET['campo3'];
$campo4 = $_GET['campo4'];
echo "Campo 1 vale";
echo "$campo1";
echo "<br>";
echo "Campo 2 vale";
echo "$campo2";
php?>
Exemplos..

.....
Exemplos..

.....
Exercício..

Desenvolva um formulário que posteriormente
será utilizado para a submissão de um cadastro
de um candidato a emprego a uma empresa X.
Caracteres Especiais
Uma página web é vista por diferentes países, que usam conjuntos
de caracteres distintos. A linguagem HTML nos oferece um
mecanismo pelo qual podemos estar seguros que uma série de
caracteres raros serão bem vistos em todos os computadores do
mundo, independentemente de seu jogo de caracteres.
Estes conjuntos são os caracteres especiais. Quando queremos pôr
um desses caracteres numa página, devemos substituí-lo por seu
código
Caracteres Especiais
 Caracteres especiais:
< - &lt;
“ - &quot;
> - &gt;
ª - &ordf;
& - &amp;
m - &micro;
°
½ - &frac12;
 - &reg;
- &deg;
 Acentuação:
Forma geral: ‘&’ + ‘letra’ + ‘nome_acento ’ + ‘;’
á - &acute;
ç - &ccedil; ü - &uuml;
Á - &Acute;
Ç - &Ccedil;
ý - &yacute;
à - &agrave;
â - &acirc;
Í - &Iacute;
O &nbsp; faz um espaço em branco. Em HTML os espaços em branco
são ignorados (mais do que um espaço em branco é igual a um espaço
em branco), para deixar um bom espaço em branco juntam-se
muitos &nbsp;
Colocando filmes
Se vc quer em Flash (SWF) Coloque:
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/s
wflash.cab#version=6,0,29,0" width="338" height="239">
<param name="movie" value=" Link do Arquivo">
<param name="quality" value="high">
<param name="menu" value="false">
<embed src=" Link do Arquivo Novamente " width="338" height="239"
quality="high"
pluginspage="http://www.macromedia.com/go/getflashplayer"
type="application/x-shockwave-flash" menu="false"></embed>
</object>
Colocando filmes
Se vc quer em Flash (SWF) Coloque:
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/s
wflash.cab#version=6,0,29,0" width="338" height="239">
<param name="movie" value=" Link do Arquivo">
<param name="quality" value="high">
<param name="menu" value="false">
<embed src=" Link do Arquivo Novamente " width="338" height="239"
quality="high"
pluginspage="http://www.macromedia.com/go/getflashplayer"
type="application/x-shockwave-flash" menu="false"></embed>
</object>
Colocando filmes
Pra executar um video, coloque aonde deve aparecer na tela:
<embed src="seuvideo.mpg" width="500" height="200" autostart="true">
autostart: true ele abre a pagina ja rodando o video, e false... a pessoa
tem que clicar em play pra ver o video.
loop="true“ - reinicia do início automaticamente
Colocando filmes
<object width="425" height="350">
<param name="movie“
value="http://www.youtube.com/v/EtLjq3Ocs6w"></param><embed
src="http://www.youtube.com/v/EtLjq3Ocs6w" type="application/xshockwave-flash" width="425" height="350"></embed></object>
Meta Tags
Como utilizar as meta tags
As meta tags devem ser incluídas no seu código HTML, dentro da tag <head>, como mostra o
exemplo a seguir:
<html>
<head>
<title> Aprendendo sobre as meta tags </title>
<meta name="author" content="Erika Sarti">
<meta name="description" content="Meta Tags - O que são e como utilizá-las - Um artigo para
iniciantes">
<meta name="keywords" content="sites, web, desenvolvimento">
</head>
keywords e description:
keywords
Nesta tag você deve incluir uma quantidade de palavras que se referem ao conteúdo da página.
<meta name="keywords" content="sites, web, desenvolvimento, html, design">
description
Uma ou duas frases que o buscador apresentará como um resumo do conteúdo do seu site:
<meta name="description" content=" Meta Tags - O que são e como utilizá-las - Um artigo para
iniciantes">
Content language
Especifica a língua primária da página. Útil para ajudar o buscador a classificar seu site no
idioma apropriado, orientar os navegadores a exibir acentuação e caracteres especiais
corretamente, e para facilitar o uso de corretores ortográficos.
Alguns valores possíveis:
pt Português
pt-br Português do Brasil
en Inglês
en-us Inglês dos EUA
en-gb Inglês Britânico
fr Francês
de Alemão
es Espanhol
it Italiano
ru Russo
zh Chinês
ja Japonês
Um exemplo usando o valor "pt-br":
<meta http-equiv="content-language" content="pt-br">
Content type
Especifica o tipo de conteúdo da página e o conjunto de caracteres que ele usa. É recomendável
utilizar esta meta tag em todas as páginas do seu site, porque ela garante que os navegadores
irão tratar seu documento da maneira mais apropriada, especialmente quando você utiliza
formulários para enviar informações entre páginas. Para quem desenvolve páginas em idiomas
orientais, utilizar o conjunto de caracteres apropriados é fundamental para que eles sejam
exibidos corretamente.
Os valores mais comuns são:
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
Onde:
text/html define que o conteúdo é um texto em linguagem HTML. Se você desenvolve sites em
XHTML ou XML, certamente sabe que deverá aplicar os valores "application/xhtml+xml" e
"application/xml", respectivamente.
iso-8859-1 é a codificação da linguagem mais comum para exibir textos em línguas derivadas do
latim.
author
Author
Por meio das meta tags, você também pode declarar sua autoria sobre a página, "assinando"
seu código fonte:
Eu considero esta tag importantíssima. Ela pode ser útil quando algum usuário procura pelo seu
nome em um buscador ou quando o site do seu cliente não tem uma forma de contato direto com
você desenvolvedor por alguma razão.
<META NAME="author" CONTENT="Erika Sarti">
Redirecionamento via meta
tag
Alguma vez você já deve ter visitado um site que mudou de endereço e
que exibe uma mensagem do tipo:
Você será redirecionado para um novo site em 5 segundos.
Esse redirecionamento pode ser feito com meta tag, por meio de uma
única linha:
<meta http-equiv="refresh" content="5;url=http://www.novosite.com/">
Meta tag para reload
<meta http-equiv="refresh" content="120;url=http://www.seusite.com/">
author
Author
Por meio das meta tags, você também pode declarar sua autoria sobre a página, "assinando"
seu código fonte:
Eu considero esta tag importantíssima. Ela pode ser útil quando algum usuário procura pelo seu
nome em um buscador ou quando o site do seu cliente não tem uma forma de contato direto com
você desenvolvedor por alguma razão.
<META NAME="author" CONTENT="Erika Sarti">
Download

Tecnologias Web - Página inicial