Como Fazer a Especialidade de Web Design – básico – Desbravadores
REQUISITOS DA ESPECIALIDADE:
- Possuir as especialidades de computação I,II,IlleIV.
- Definir os seguintes termos:
- Layout
- HTML
- DHTML
- CSS
- JavaScript
- Tags
- Body
- PHP
- SQL
- Página Estática
- Página Dinâmica
- Links (Hiperlinks)
- WWW
- Apresentar de forma escrita um código simples de linguagem HTML, usando os seguintes elementos: a. Título, b. Cabeçalho, c. Corpo, d. Menu, e. Tabelas, f. Rodapé
- Apresentar em forma de ilustração ou multimídia a função das principais ferramentas do mercado para produção de uma web site, tais como: a. Dreamwaver, b. CorelDraw, c. Fireworks, d. Flash, e. PhotoShop
Aprendendo sobre a Especialidade de Web Design – básico
Pronto para criar seu primeiro site? Descubra como conquistar a Especialidade de Web Design – básico, aprendendo HTML, CSS e as ferramentas essenciais para a web. Este guia prático ajudará você, desbravador, a cumprir todos os requisitos e a dar os primeiros passos no universo digital.
Como fazer a Especialidade de Web Design – básico
A jornada para se tornar um criador de conteúdo para a internet começa com uma base sólida. Antes de mergulhar no mundo do design de sites, é fundamental ter o conhecimento prévio adquirido nas especialidades de Computação. Elas preparam o terreno para os conceitos mais avançados que você encontrará aqui.
A Base para Começar: Pré-requisitos Essenciais
Para iniciar a Especialidade de Web Design – básico, é necessário ter concluído as especialidades de Computação de I a IV. Cada uma delas constrói um degrau no seu aprendizado, desde o que é hardware e software em Computação I, passando pela edição de textos em Computação II, até chegar a softwares mais complexos e unidades de medida em Computação III e IV. Essa base garante que você tenha a familiaridade necessária com o ambiente digital.
Desvendando o Dicionário da Web: Termos que Você Precisa Saber
Entender a linguagem da web é o primeiro passo para construir algo nela. Assim como aprendemos sobre nós e amarras para acampar, precisamos conhecer os termos fundamentais da criação de sites. Eles são os blocos de construção de qualquer página que você visita na internet.
- Layout: Refere-se à organização visual dos elementos em uma página, como textos, imagens e vídeos. Um bom layout guia o visitante e torna a navegação fácil e intuitiva.
- HTML (HyperText Markup Language): É a espinha dorsal de uma página. Trata-se de uma linguagem de marcação que usa “tags” para estruturar todo o conteúdo, como títulos, parágrafos e imagens.
- CSS (Cascading Style Sheets): É a linguagem de estilo que define a aparência de uma página. Cores, fontes, espaçamentos e todo o design visual são controlados pelo CSS, que trabalha em conjunto com o HTML.
- JavaScript: É uma linguagem de programação que adiciona interatividade a um site. Animações, formulários dinâmicos e atualizações de conteúdo sem recarregar a página são possíveis graças ao JavaScript.
- DHTML (Dynamic HTML): Não é uma linguagem, mas um termo que descreve o uso combinado de HTML, CSS e JavaScript para criar páginas web interativas e animadas.
- Tags: São os comandos do HTML, escritos entre os sinais de < e >. Elas informam ao navegador como exibir o conteúdo. Por exemplo,
<p>cria um parágrafo. - Body: É a parte principal de um documento HTML, definida pela tag
<body>. Todo o conteúdo visível de um site fica dentro dela.
Páginas Estáticas vs. Dinâmicas
Existem dois tipos principais de páginas na web. Uma Página Estática tem conteúdo fixo, que só muda se o arquivo HTML for editado diretamente. Já uma Página Dinâmica pode exibir conteúdos diferentes e interagir com o usuário, pois seu conteúdo é gerado em tempo real, geralmente a partir de um banco de dados. Blogs e lojas virtuais são exemplos de sites dinâmicos.
Tecnologias do Lado do Servidor
Para que as páginas dinâmicas funcionem, tecnologias específicas rodam no servidor. O PHP (Hypertext Preprocessor) é uma linguagem de programação do lado do servidor usada para criar sites dinâmicos e gerenciar conteúdo. O WordPress, por exemplo, é construído em PHP. Ele se comunica com um banco de dados usando SQL (Structured Query Language), uma linguagem para buscar, inserir e gerenciar dados.
Navegando na Rede
A navegação entre páginas é feita através de Links (ou Hiperlinks), que são criados com a tag <a> e nos levam a outros endereços. Tudo isso acontece dentro da WWW (World Wide Web), um sistema global que conecta documentos e permite a navegação que conhecemos hoje.
Mãos no Código: Construindo sua Primeira Página HTML
Agora é hora de colocar a mão na massa. Para cumprir este requisito da Especialidade de Web Design – básico, você precisa criar um arquivo de texto simples, salvá-lo com a extensão .html e abri-lo no navegador. O código a seguir mostra uma estrutura básica, incluindo todos os elementos solicitados.
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<!-- Título da Página (aba do navegador) -->
<title>Meu Site de Desbravador</title>
</head>
<!-- Corpo do site (conteúdo visível) -->
<body>
<!-- Cabeçalho do Site -->
<header>
<h1>Clube de Desbravadores Aventura</h1>
</header>
<!-- Menu de Navegação -->
<nav>
<ul>
<li><a href="#inicio">Início</a></li>
<li><a href="#atividades">Atividades</a></li>
</ul>
</nav>
<main>
<!-- Tabela de Atividades -->
<h2>Nossa Agenda</h2>
<table border="1">
<thead>
<tr>
<th>Data</th>
<th>Atividade</th>
</tr>
</thead>
<tbody>
<tr>
<td>10/08/2025</td>
<td>Especialidade de Nós</td>
</tr>
</tbody>
</table>
</main>
<!-- Rodapé do Site -->
<footer>
<p>© 2025 - Clube Aventura.</p>
</footer>
</body>
</html>Ferramentas do Ofício: Softwares para Web Design
Embora hoje existam muitas ferramentas modernas, conhecer os programas clássicos do mercado ajuda a entender a evolução do desenvolvimento web. Alguns deles, apesar de mais antigos, foram fundamentais para construir a internet como a conhecemos.
- Dreamweaver: Um editor de sites que combina uma interface visual (arrastar e soltar) com um editor de código. Facilita a criação de páginas ao mostrar o resultado visual em tempo real.
- CorelDraw: Um software de design vetorial, ideal para criar logotipos e ícones que podem ser redimensionados sem perder qualidade, perfeitos para designs responsivos.
- Photoshop: Famoso editor de imagens, usado no web design para criar o layout visual do site (mockup), tratar fotos e produzir banners e outros elementos gráficos.
- Fireworks: Foi um editor de imagens focado em otimizar gráficos para a web, criando arquivos leves e de alta qualidade. Foi descontinuado e suas funções absorvidas por outras ferramentas.
- Flash: Era uma plataforma para criar animações e aplicações interativas. Foi muito popular, mas hoje foi substituído por tecnologias modernas como HTML5, CSS3 e JavaScript.
