Tecnologias Web. Prof. Msc. Juliano Gomes Weber Notas de Aula Aula 05 1º Semestre UNIJUÍ DETEC Ciência da Computação

Transcrição

1 UNIJUÍ DETEC Ciência da Computação Prof. Msc. Juliano Gomes Weber Tecnologias Web Notas de Aula Aula 05 1º Semestre Tecnologias Web jgw@unijui.edu.br

2 O que vimos até então? O que vimos nas duas primeiras aulas? - -

3 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 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 cdup Muda para o diretório que está um nível acima do diretótio atual chmod 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 dir DIRETÓRIO ARQUIVO-LOCAL Lista o conteúdo de DIRETÓRIO colocando o resultado em ARQUIVO- LOCAL, 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 get ARQUIVO-REMOTO ARQUIVO-LOCAL Baixa ARQUIVO-REMOTO para sua máquina com o nome de ARQUIVO- LOCAL. Se ARQUIVO-LOCAL não for especificado o arquivo será baixado com o mesmo nome que tem na máquina remota.

4 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 ls DIRETÓRIO ARQUIVO-LOCAL Lista o conteúdo de DIRETÓRIO colocando o resultado em ARQUIVO- LOCAL, 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. mdelete 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 mls DIRETÓRIOS ARQUIVO-LOCAL Semelhante a ls, porém lista o conteúdo de vários diretórios mode mode MODO Configura o modo de transferência de arquivos para MODO. O modo padrão é "stream" modtime 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 nlist DIRETÓRIOS ARQUIVO-LOCAL Semelhante a nls put put ARQUIVO-LOCAL ARQUIVO-REMOTO Envia ARQUIVO-LOCAL para o servidor ftp nomeando-o como ARQUIVO- REMOTO. Se ARQUIVO-REMOTO não for especificado o arquivo será enviado com o nome de ARQUIVO-LOCAL

5 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 remotehelp rhelp reget ARQUIVO-REMOTO ARQUIVO-LOCAL remotehelp COMANDO rhelp COMANDO 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. Semelhante a help, porém solicita ajuda ao servidor ftp remotestatus rstatus remotestatus ARQUIVO rstatus ARQUIVO Exibe a situação de ARQUIVO. Se ARQUIVO não for especificado, exibe a situação da máquina remota. Rename 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 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

6 Modelo Cliente-Servidor percepção canônica Tecnologias Web

7 Modelo Cliente-Servidor percepção avançada... Navegador WEB Servidor WEB Servidor de BD

8 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.

9 O que o navegador faz Acessa a informação na rede URL Navegador Uniform Resource Locators Servidor URL É o ponteiro para algum dado na WEB, seja um documento WEB, um arquivo FTP, um endereço de ...

10 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.

11 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.

12 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á.

13 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.

14 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.

15 Input (text, hidden, submit, reset)

16 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.

17 Input (password)

18 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.

19 Input (Checkbox e Radio)

20 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.

21 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.

22

23 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>

24 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?>

25 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>

26 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?>

27 Exemplos.....

28 Exemplos.....

29 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.

30 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

31 Caracteres Especiais Caracteres especiais: < - < - " ½ - ½ > - > ª - ª - & - & m - µ - Acentuação: Forma geral: & + letra + nome_acento + ; á - ç - ç ü - ü Á - &Acute; Ç - Ç ý - ý à - à â - â Í - Í O 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

32 Colocando filmes Se vc quer em Flash (SWF) Coloque: <object classid="clsid:d27cdb6e-ae6d-11cf-96b " codebase=" 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=" type="application/x-shockwave-flash" menu="false"></embed> </object>

33 Colocando filmes Se vc quer em Flash (SWF) Coloque: <object classid="clsid:d27cdb6e-ae6d-11cf-96b " codebase=" 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=" type="application/x-shockwave-flash" menu="false"></embed> </object>

34 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

35 Colocando filmes <object width="425" height="350"> <param name="movie value=" src=" type="application/xshockwave-flash" width="425" height="350"></embed></object>

36 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>

37 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">

38 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">

39 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 "> 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 é a codificação da linguagem mais comum para exibir textos em línguas derivadas do latim.

40 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">

41 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=

42 Meta tag para reload <meta http-equiv="refresh" content="120;url=

43 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">