Especialidade de Internet - avançado

Atividades Profissionais

Requisitos

  1. Ter a especialidade de Computação I - básico.

    Resposta: Você deve apresentar ao instrutor o cartão devidamente assinado da especialidade de Computação I (básico), comprovando que ela foi concluída antes de iniciar a especialidade de Internet Avançado, conforme exige o pré-requisito oficial da especialidade dentro do programa de Desbravadores. — Especialidades sequenciais existem para garantir que conceitos de base estejam sólidos antes de avançar. Computação I cobre hardware, software, sistemas operacionais e gerenciamento de arquivos — sem isso, o aluno fica perdido em discussões avançadas sobre HTML, HTTP, hospedagem e protocolos de rede.

  2. Definir os seguintes termos (ou seus equivalentes) e informar quando e como eles são usados:
    • HTTP
    • Hyperlink
    • HTML/PHP
    • Navegadores seguros e códigos de cores hexadecimals
    • URL
    • GIF/PNG
    • JPEG

    Resposta: 1) HTTP: protocolo de transferência de hipertexto, usado para a comunicação entre o navegador (cliente) e o servidor que envia as páginas web; é o que torna possível acessar e carregar sites (a versão segura é o HTTPS, com criptografia). 2) Hyperlink: link clicável (texto ou imagem) que leva o usuário a outra página, arquivo ou recurso da internet; é usado para navegar e conectar conteúdos entre si. 3) HTML/PHP: HTML é a linguagem de marcação que estrutura e organiza o conteúdo da página (títulos, textos, imagens, links), interpretada pelo navegador; PHP é uma linguagem que roda no servidor para gerar páginas dinâmicas (ex.: formulários, login, dados que mudam) antes de enviar o HTML pronto ao navegador. 4) Navegadores seguros e códigos de cores hexadecimais: navegador seguro é aquele que usa conexão HTTPS, mantém-se atualizado e protege os dados do usuário (cadeado na barra de endereço); os códigos de cores hexadecimais são a forma de definir cores na web usando seis dígitos precedidos de '#' (ex.: #FFFFFF é branco, #000000 é preto), usados em HTML/CSS para colorir textos, fundos e elementos. 5) URL: endereço completo de um recurso na internet (ex.: https://www.exemplo.com/pagina), usado para localizar e acessar uma página ou arquivo específico; é o que digitamos na barra de endereço. 6) GIF/PNG: formatos de imagem ideais para gráficos simples, logos, ícones e desenhos com poucas cores; ambos suportam fundo transparente e o GIF ainda permite animações, sendo usados quando se quer nitidez em bordas e áreas chapadas. 7) JPEG: formato de imagem com compressão ideal para fotografias e imagens com muitas cores e variações; reduz bastante o tamanho do arquivo (com pequena perda de qualidade), sendo usado para fotos em sites onde o carregamento rápido é importante. — HTTPS é a versão criptografada do HTTP — todo navegador moderno marca sites HTTP simples como 'não seguros'. Códigos hex usam 6 dígitos: dois para vermelho, dois para verde, dois para azul (RGB). Navegadores Chromium dominam mais de 70% do mercado global atual.

  3. Aprender e demonstrar o uso dessas TAG's HTML ou demonstrar comandos equivalentes de construção de sites em uma das linguagens atuais de desenvolvimento de sites (PHP, XML JSP, ASP, etc.).
    • <html> </html>
    • <head> </head>
    • <body> </body>
    • <b> </b>
    • <i> </i>
    • <a href="URL"> </a>
    • <p>
    • <br> </br>
    • <img src="name"/>
    • <hr> </hr>
    • <table> </table>
    • <tr> </tr>
    • <td></td>

    Resposta: Você deve demonstrar ao instrutor cada tag HTML em uso: html (envelopa o documento), head (metadados do cabeçalho), body (conteúdo visível), b (negrito), i (itálico), a href (hyperlink para outra página), p (parágrafo), br (quebra de linha), img src (insere imagem), hr (linha horizontal), table com tr (linha) e td (célula). — HTML é declarativo: você marca o conteúdo e o navegador renderiza. As tags formam uma árvore (DOM) que CSS estiliza e JavaScript manipula. Tags semânticas (header, nav, main, article, footer) foram introduzidas no HTML5 (2014) e melhoram a acessibilidade e o SEO do site renderizado.

  4. Fazer uma tabela simples - incluir texto, um gráfico, uma regra horizontal e um link. Usar códigos hexadecimais para colorir o texto. Fazer o seu título maior e, depois, o texto do documento principal.

    Resposta: Você deve apresentar ao instrutor um arquivo HTML contendo uma tabela simples (table com tr e td) com texto, uma imagem/gráfico (img src), uma regra horizontal (hr) e um link (a href), usando códigos hexadecimais (#FF0000 para vermelho, #0066CC para azul) para colorir o texto, com título em h1 (maior) e o conteúdo principal em parágrafos p ou h2 menor. — Hierarquia de títulos h1 a h6 organiza o documento e melhora SEO. Cores hex são RGB de 0-255 expressos em hexadecimal: #000000 é preto, #FFFFFF é branco. Tabelas hoje são usadas só para dados tabulares — para layout, o padrão moderno é flexbox ou CSS grid em vez de table.

  5. Saber mais sobre:
    • Gráficos para a Web e ser capaz de explicar o processo utilizado para baixá-los rapidamente.
    • Cores seguras da WEB e saber quando usá-los. Usar esse conhecimento para criar um JPG e um GIF/ PNG que estão ambos sob 15k, mas que ainda são facilmente visíveis em um site e criar, pelo menos, 5 botões de navegação gráfica e um header para o seu site.

    Resposta: 1) Gráficos para a Web e download rápido: para que os gráficos baixem rapidamente é preciso usar o formato certo (JPG para fotos, GIF/PNG para gráficos simples), reduzir as dimensões da imagem ao tamanho em que ela realmente aparece e comprimir/otimizar o arquivo com ferramentas como TinyPNG ou Squoosh. Quanto menor o arquivo (em KB), mais rápido ele carrega — por isso se evita imagens pesadas e se aproveitam recursos como cache do navegador. 2) Cores seguras da Web e criação dos elementos: as cores 'seguras da web' são um conjunto de 216 cores que aparecem praticamente iguais em qualquer monitor ou navegador, garantindo consistência visual — usadas principalmente quando se quer que o site fique com a mesma aparência para todos. Aplicando esse conhecimento, crie um arquivo JPG e um GIF/PNG ambos com menos de 15k mas ainda nítidos no site (use JPG para a foto, GIF/PNG para o gráfico, e otimize até ficar leve sem perder a visibilidade), e produza pelo menos 5 botões de navegação gráficos e um cabeçalho (header) para o seu site mantendo a mesma paleta de cores seguras. — As 216 'web safe colors' nasceram quando monitores tinham 8 bits (256 cores). Hoje monitores exibem milhões, mas o conceito ainda guia paleta acessível. Reduzir tamanho de imagem é crítico para mobile/3G — cada KB extra atrasa carregamento. Squoosh do Google é referência atual em otimização de imagens.

  6. Individualmente ou em família, a unidade, ou outro grupo, desenvolver um site. Todas as páginas do site devem ser "ligadas" em conjunto para que alguém que visitar sua homepage possa clicar em cada uma das outras páginas do seu site. O web-site deve ser composto de, pelo menos, 4 páginas. O site deve incluir:
    • Página de boas-vindas, que indica a razão para que o site foi criado e incluir, pelo menos, uma imagem ou fotografia.
    • Uma página de fotos que mostra as atividades e eventos que você, sua família, ou grupo têm desfrutado.
    • Um livro de visitas ou página de contato, onde as pessoas podem "assinar" comprovando que elas visitaram ou deixar um endereço de e-mail de contato, para que as pessoas possam enviar e-mails quando elas visitarem seu site.

    Resposta: Você deve apresentar ao instrutor um site com pelo menos 4 páginas interligadas: 1) página de boas-vindas (home) com a razão do site e ao menos uma imagem ou fotografia; 2) página de fotos exibindo atividades e eventos seus, da família ou do grupo; 3) livro de visitas ou página de contato onde visitantes podem deixar e-mail ou comentário; 4) uma página adicional (sobre, missão, links). — Site com navegação interligada é o padrão básico desde o início da web. Hoje a página de contato substitui o livro de visitas, com formulário que envia e-mail por backend. A homepage define a primeira impressão; uma imagem hero gera engajamento e indica de imediato sobre o que é o site.