Introdução

Esta é uma tarefa com uma certa complexidade. É preciso ler cuidadosamente os passos. Idealmente, ss passos 1 - 3 devem ser feitos ainda em sala de aula.

O objetivo é criar um página ou mini-site pessoal,  ou de um algum projeto pessoal, misturando tecnologias Web antigas (transferindo arquivos com FTP) com novas (HTML e CSS moderno, responsivo, que funciona em celular etc.).

Passo 1: escolher a um servidor Web

Vai ter que ter uma conta em algum servidor na Internet que oferece 1. o serviço FTP (transferência de arquivo) e 2. o serviço Web.

Alternativa 1:  usar uma conta comum que criei num servidor nosso que roda um servidor Web em http://teced.atp.usp.br/. Veja o passo a seguir para os credenciais.

Alternativa 2 : se tiver acesso num outro servidor Web sob seu controle, fica a vontade de usar!

Passo 2: instalar um programa de transferência de arquivos

Por enquanto, vamos somente usar a funcionalidade "disponibilizar arquivos na Web" do servidor Web que escolheu. Vai precisar ter acesso a algum programa que transfere arquivos do seu computador (local) até um outro computador (remoto) onde tem conta.

Para usuários de Windows, existem vários programas. Um é WinSCP (faça download aqui, mas tome cuidado de não clicar na propaganda!). Outro bem conhecido é Filezilla (vai precisar do cliente)

Se usar Linux e conhece a linha de comando, pode usar "scp". Ou, se usar o gerenciador de arquivo Nautilus, procure o item de menu "Other locations / Connect to server"

Credenciais do servidor remoto: no programa de transferência de arquivos, use

 host = teced.atp.usp.br

 login = teced

 senha = teced

 porta = 9022

Se usar Linux, poderia usar sftp://teced@teced.atp.usp.br:9022 no Nautilus, ou scp -P9022 teced.atp.usp.br

Passo 3: Disponibilizar na Web um arquivo

Use o programa que escolheu acima para transferir um documento (que vai ficar público!) para o seu espaço.

  1. Conecta com o servidor remoto (ou host) "teced.if.usp.br" e usando os credenciais acima
  2. Procure o diretório WWW no seu diretório remoto.
  3. Transfere um arquivo qualquer (mas que pode ficar público) para este diretório. Por favor use algum dos seus próprios trabalhos ou se assegure que tem o direito de distribuição (se o arquivo é sua própria produção, então tem este direito automaticamente).
  4. Verifique com seu navegador se deu certo: http://teced.atp.usp.br/

Passo 4: Customizar um template HTML

Vai criar uma página Web (um arquivo em formato HTML). Uma maneira boa de criar páginas web é adaptar um template ou modelo que alguém criou. Templates de boa qualidade são fácil de achar e podem ser usados de graça (sob certas condições como por exemplo atribuição) ou por um preço relativamente baixa.

Primeiro, vamos trabalhar com arquivos muito simples. Baixe um dos arquivos aqui no seu computador local e edite eles com um editor de texto (não  use Word, use um editor de texto como Notepad++ no Windows ou Gedit no Linux). Após de modificar e re-nomear (exemplo-seu-nome.html), transfira para o servidor Web.

Para fazer algo mais próximo ao que um desenvolvedor da Web atualmente faz, recomendo usar um template baseado no framework (arcabouço) Bootstrap. Aqui tem  várias boas opções. Para usar uma, baixe o template (são vários arquivos). Existem muito mais repositórios de templates, pagos ou não. Veja outro site com templates "abertas" (pode usar, com atribuição). Veja ainda outro site com templates: https://html5up.net/

Depois de des-zippar, edite (usando um editor de texto, por exemplo Bloco de Notas) o arquivo index.html para modificar o template. Repare que pode fazer uma pré-visualização dos efeitos das suas modificações abrindo o arquivo index.html usando seu navegador. Finalmente, para "colocar no ar" no seu site, transfira todos os arquivos para o seu diretório WWW, como em passo 3.

  1. proponho que como modificação mínimo do template combinamos pelo menos algumas trocas de texto e pelo menos uma das imagens (do perfil, ou do "background").
  2. uma vez pronto, acrescente seu trabalho (por meio de um URL) ao seu portfólio

Passo 5: Registrar seu trabalho no seu portfólio

Proponho manter um portfólio com suas produções durante este semestre. Ainda estou definindo como operacionalizar isso.
Última atualização: sexta-feira, 16 ago. 2019, 15:47