Habilidades interpessoais

Trabalhe numa cópia da pasta inicio/ desta etapa. Ela já abre ou executa com as instruções do README. Leia o código, mude uma coisa e anote sua previsão antes de recarregar. Compare com a referência na pasta da etapa. Se nada mudar, confira a extensão do arquivo, o arquivo salvo e o caminho aberto. Blocos adicionais do capítulo são experiências separadas; a pasta de referência contém o programa completo desta etapa.

Fazer o site da Biblioteca da Ribeira não é só acertar tags. Você também pesquisa, anota o que travou e pede ajuda com clareza. Lina Bezerra, Iara Campos e Nuno Freire são nomes fictícios do acervo; use-os nos exemplos, não como contatos reais.

O exemplo deste capítulo é 04-habilidades-interpessoais, no pacote que acompanha o volume. Leia a lista do caderno, copie para o papel ou para o próprio HTML, mude uma linha, preveja, recarregue e confira se a lista ainda faz sentido.

O caderno é um arquivo no disco. A página no navegador só mostra o lembrete. Nada disso precisa ir para 127.0.0.1 para valer, mas o endereço local continua sendo o jeito certo de testar um site. Publicar o caderno com dúvidas pessoais não é o objetivo.

O que você vai aprender

• Pesquisar com uma pergunta precisa, não com “não funciona”.
• Colaborar descrevendo o que tentou e o que esperava.
• Manter um caderno de aprendizagem curto.
• Pensar em emprego sem tratar curso pago como único caminho.
• Separar estudo local de exposição pública.

Pesquisa que cabe numa frase

Antes de procurar, escreva: o que você fez, o que viu, o que esperava. “A imagem da fachada não abre no exemplo 02” é pesquisável. “Meu site quebrou” não é.

Use os capítulos deste volume primeiro. A documentação oficial da Web ajuda quando o termo já está claro: tag, atributo, seletor, regra.

Não cole trechos gigantes de terceiros no projeto da Ribeira. Reescreva. O acervo fictício precisa de texto seu.

Colaboração sem teatro

Pedir ajuda é descrever o arquivo, o navegador e o passo. Diga se abriu pelo disco ou por http://127.0.0.1:8765/.

Mostre uma mudança de cada vez. Quem revisa não adivinha três alterações misturadas.

Num grupo de estudo, combine vocabulário: pasta, tag, recarregar. Evite gíria solta.

Caderno de aprendizagem

O exemplo deste capítulo é uma lista. Preencha no papel ou edite o HTML. Não envie a ninguém.

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Caderno de aprendizagem — Ribeira</title>
  </head>
  <body>
    <h1>Caderno de aprendizagem</h1>
    <p>Preencha no papel ou copie esta lista. Não envie a ninguém.</p>
    <ul>
      <li>O que eu tentei hoje</li>
      <li>Onde travei</li>
      <li>O que vou perguntar amanhã</li>
      <li>Uma página do capítulo que reli</li>
    </ul>
  </body>
</html>

Mude o último item para o número do capítulo que você realmente relê. Recarregue. Confira.

Fluxo de trabalho

Trabalhe em ciclos curtos: ler → copiar → mudar uma coisa → prever → recarregar → conferir. Anote o que a previsão acertou.

Guarde versões simples: um arquivo que funciona hoje. Se quebrar amanhã, você volta.

Erro comum: achar que o caderno precisa estar “bonito” num processador de texto e salvar como index.html.txt. O navegador mostra código cru. Mantenha index.html ou use papel.

Emprego sem vender um curso

Há vagas que pedem HTML e CSS básicos, portfólio pequeno e clareza ao falar do que você fez. Um site local da Biblioteca da Ribeira, bem explicado, já demonstra o ciclo de estudo.

Ninguém precisa comprar um curso caro para começar a praticar neste material. Conta paga não é o único caminho. Servidor de estudo continua em 127.0.0.1.

Publicar um portfólio é decisão posterior. Não publique dados pessoais. Não publique recados de formulário como se fossem cadastro real.

Disco, teste e o que não se publica

O caderno no disco é seu. A página no navegador é só a lista. 127.0.0.1 não torna o texto público. Publicação na internet tornaria.

Dúvidas, senhas e nomes reais não entram no site da biblioteca.

Atividades

1. Reescreva esta pergunta fraca em uma pergunta pesquisável: “o CSS não pega”.
2. Quais quatro linhas o caderno desta pasta sugere anotar?
3. Por que publicar o caderno com o nome da sua rua é uma má ideia, mesmo depois de testar em 127.0.0.1?

Respostas comentadas

1. Algo como: “No exemplo 03, o link aponta para estilos.css na mesma pasta, mas a fonte do body não muda no Firefox.” Aí dá para checar caminho, cache e regra.
2. O que tentou; onde travou; o que vai perguntar; qual trecho do capítulo reli.
3. 127.0.0.1 não publica. Copiar o mesmo HTML para um servidor público expõe o texto. O caderno tem material pessoal; o site da Ribeira usa só conteúdo fictício.

O arquivo completo

Referência do exemplo 04-habilidades-interpessoais, reproduzida aqui para que você possa conferir sem sair da página.

index.html

<!DOCTYPE html>

<html lang="pt-BR">
<head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1" name="viewport"/>
<title>Caderno de aprendizagem — Ribeira</title>
<style>
/* Apoio de leitura, teclado e tela estreita. */
img{max-width:100%;height:auto} html {overflow-wrap:anywhere} main {min-width:0} input,textarea,select,canvas {max-width:100%;box-sizing:border-box} fieldset {min-width:0}
pre {max-width:100%;overflow:auto} :focus-visible {outline:3px solid #0f3d3e;outline-offset:3px}
.skip {position:absolute;top:-5rem;left:1rem;background:#0f3d3e;color:white;padding:.5rem;z-index:9}.skip:focus {top:.5rem}
table {max-width:100%} td,th {overflow-wrap:anywhere}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
</style></head>
<body><a class="skip" href="#conteudo">Pular para o conteúdo</a><main id="conteudo" tabindex="-1">
<h1>Caderno de aprendizagem</h1>
<p>Preencha no papel ou copie esta lista. Não envie a ninguém.</p>
<ul>
<li>O que eu tentei hoje</li>
<li>Onde travei</li>
<li>O que vou perguntar amanhã</li>
<li>Uma página da MDN ou do capítulo que relí</li>
</ul>
</main></body>
</html>