Como Fazer a Especialidade de Internet – avançado – Desbravadores
REQUISITOS DA ESPECIALIDADE:
- Ter a especialidade de Computação I – básico.
- 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 hexadecimais
- URL
- GIF/PNG
- JPEG
- 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>
- <img src=”name”/>
- <hr>
- <table> </table>
- <tr> </tr>
- <td></td>
- 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.
- 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.
- 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.
Aprendendo sobre a Especialidade de Internet – avançado
Desvende os segredos da web com a Especialidade de Internet – avançado! Este guia prático ajuda desbravadores a entender a tecnologia por trás da navegação, aprender a codificar em HTML e criar um site funcional do zero, conquistando mais um desafio digital.
Como fazer a Especialidade de Internet – avançado
Para iniciar a jornada na Especialidade de Internet – avançado, é fundamental possuir a especialidade de Computação I. Ela serve como alicerce, garantindo que o desbravador já tenha familiaridade com o ambiente computacional, incluindo hardware, software e noções de segurança, preparando o terreno para os conceitos mais complexos que virão.
Entendendo os Pilares da Navegação na Web
Toda a experiência na internet começa com alguns conceitos-chave. A URL (Uniform Resource Locator) é o endereço único de qualquer recurso online, como uma página ou imagem. É o que digitamos no navegador para chegar a um destino. Esse processo de comunicação entre o seu navegador e o servidor do site acontece através do HTTP (Hypertext Transfer Protocol). Quando você acessa um site, seu navegador envia uma requisição HTTP, e o servidor responde com os dados da página. A versão segura, HTTPS, criptografa essa comunicação, indicada pelo cadeado na barra de endereços, sendo essencial para proteger seus dados.
A navegação em si é possível graças aos Hyperlinks, ou simplesmente links. São elementos clicáveis que conectam uma página a outra, seja no mesmo site ou em um diferente, formando a teia que é a World Wide Web. Para visualizar tudo isso, usamos os navegadores, como Chrome e Firefox, que além de exibir o conteúdo, possuem recursos de segurança para alertar sobre sites perigosos e proteger contra ameaças.
A Linguagem da Web: HTML e Páginas Dinâmicas
O esqueleto de toda página da web é construído com HTML (Hypertext Markup Language). Não é uma linguagem de programação, mas sim de marcação, que usa “tags” para estruturar o conteúdo. Por exemplo, ela define o que é um título, um parágrafo ou uma imagem. O HTML por si só é estático.
Para criar interatividade, como formulários de contato ou áreas de login, entra em cena o PHP (Hypertext Preprocessor). O PHP é uma linguagem que roda no servidor e consegue processar informações, interagir com bancos de dados e gerar um código HTML personalizado antes de enviá-lo para o navegador do usuário. Eles trabalham em conjunto para criar as experiências ricas e dinâmicas que usamos todos os dias.
Construindo sua Primeira Página com Tags HTML
Aprender as tags HTML é o primeiro passo prático para criar um site. A estrutura básica de qualquer documento HTML é definida por três tags principais:
<html>: A tag raiz que envolve todo o conteúdo da página.<head>: Contém informações sobre o documento que não são visíveis na página, como o título que aparece na aba do navegador e links para arquivos de estilo.<body>: Abriga todo o conteúdo visível, como textos, imagens e links.
Dentro do <body>, usamos outras tags para formatar o conteúdo. A tag <p> define um parágrafo, enquanto <b> e <i> deixam o texto em negrito e itálico, respectivamente. Para criar um link, usa-se <a href="URL">Texto do Link</a>, e para inserir uma imagem, a tag é <img src="caminho_da_imagem.jpg" alt="descrição da imagem" />. O atributo alt é crucial para acessibilidade. Outras tags úteis são a <hr>, que cria uma linha horizontal para separar seções, e a <br>, para uma simples quebra de linha.
Organizando Dados com Tabelas e Cores
Para exibir informações de forma organizada, como em uma planilha, o HTML oferece as tabelas. A estrutura é simples: a tag <table> inicia a tabela, <tr> (table row) cria uma linha e <td> (table data) cria uma célula dentro da linha. Dentro de uma célula <td>, você pode colocar texto, imagens ou até mesmo links.
Para adicionar cor, a web utiliza códigos de cores hexadecimais. É um código de seis dígitos precedido por ‘#’, como #FFFFFF para branco e #0000FF para azul puro. Para cumprir um dos requisitos da Especialidade de Internet – avançado, é preciso criar uma tabela simples contendo texto, um gráfico (imagem), uma linha horizontal e um link, usando esses códigos para colorir o texto e destacando o título principal da página para ser maior que o resto do conteúdo.
Otimizando Gráficos para uma Web Rápida
Imagens pesadas deixam um site lento. Para garantir que os gráficos carreguem rapidamente, é preciso otimizá-los. O primeiro passo é escolher o formato de arquivo correto:
- JPEG: Ideal para fotografias e imagens com muitas cores. Usa compressão “com perdas”, o que reduz drasticamente o tamanho do arquivo.
- PNG: Perfeito para logotipos, ícones e gráficos com texto ou que precisam de fundo transparente. Oferece compressão “sem perdas”, mantendo a qualidade.
- GIF: Usado principalmente para animações simples e curtas, pois suporta um número limitado de cores.
Após escolher o formato, o próximo passo é a compressão. Ferramentas online, como o TinyPNG, podem reduzir o tamanho do arquivo removendo dados desnecessários sem perda visível de qualidade. Além disso, redimensionar a imagem para as dimensões exatas em que ela será exibida no site é uma prática essencial para um carregamento veloz.
Projeto Final: Criando seu Site de Desbravador
A etapa final para conquistar a Especialidade de Internet – avançado é aplicar todo o conhecimento em um projeto prático: desenvolver um site com pelo menos quatro páginas. O segredo é criar arquivos HTML separados (como index.html, fotos.html e contato.html) e conectá-los com um menu de navegação usando a tag <a href="...">.
O site deve ter uma estrutura clara, permitindo que qualquer visitante navegue facilmente entre todas as páginas a partir da página inicial.
A página de boas-vindas (index.html) deve apresentar o propósito do site, seja ele da sua unidade, família ou um projeto pessoal, e incluir ao menos uma imagem. A página de fotos servirá como uma galeria para exibir imagens de atividades e eventos. Por fim, a página de contato pode ter um link de e-mail simples, usando <a href="mailto:[email protected]">, ou um formulário visual para que os visitantes deixem uma mensagem.
