REPÚBLICA DE ANGOLA

GOVERNO DA PROVÍNCIA DE LUANDA

COLÉGIO YARA JANDIRA – CYJ

CURSO DE INFORMÁTICA

CRIAÇÃO DE SITE PARA INFORMAÇÕES DO COLÉGIO FUTURO DO BEM

Luanda

2025
Integrantes do grupo:

Anderson do Espirito do Santo Moreira de Castro

Novato Dias de Almeida

CRIAÇÃO DE SITE PARA INFORMAÇÕES DO COLÉGIO FUTURO DO BEM

TRABALHO DE PRÉ-PROJETO APRESENTADO

PELOS ALUNOS DO COLÉGIO YARA JANDIRA

PARA OBTENÇÃO DO GRAU DE TÉCNICO

PRA PROVA NO CURSO DE INFORMÁTICA.

ORIENTADOR: Lukoki Ándre

Luanda

2025
 FICHA CATALOGRÁFICA

Autorizamos a reprodução e divulgação total ou parcial deste trabalho por qualquer

meio convencional ou eletrônico para fins de estudo e pesquisa desde que citada à fonte.

Anderson do Espirito do Santo Moreira de Castro

Novato Dias de Almeida

DATA_____/_____/_____

DE Castro do E. A ;DE Almeida D. N

CRIAÇÃO DE SITE PARA INFORMAÇÕES DO COLÉGIO FUTURO DO BEM

Trabalho de projecto apresentado pelos alunos do colégio Yara Jandira para obtenção do grau de
técnico para prova no curso de informática.

Orientador: Lukoki André

Nº de páginas: 28
Tipo de letra: Tiime New Roman
Palavras-chave: Redes, Ferramenta, tecnologia, computadores.
 COLÉGIO YARA JANDIRA – CYJ

CRIAÇÃO DE SITE PARA INFORMAÇÕES DO COLÉGIO FUTURO DO BEM

Trabalho de Pré-Projeto apresentado pelos alunos do colégio Yara Jandira para obtenção
do grau de técnico para prova no curso de informática.

Aprovado_____/_____/_____

BANCA EXAMINADORA

Presidente Júri
____________________________________________________________________

1º Vogal
____________________________________________________________________

2º Vogal
____________________________________________________________________
Secretário
 LISTA DE ABREVIATURAS

CERN - Organização Europeia Para a Pesquisa Nuclear

URI - Uniform Resource Identifier

URN - Uniform Resource Name

ISBN - International Standard Book Number

 RESUMO

Este trabalho apresenta a criação de um site comercial onde neste mesmo site
divulgaremos alguns produtos. Neste presente trabalhao abordare-mos também sobre
onde tudo começou, da historia da internt até mesmo sobre os primerios sites a serem
criados que no mundo.
Para alcançar o produto final que nos propomos desenvolver foi necessário utilizar
uma série de ferramentas como: visual studio code como editor de texto, Figma e o
Pencil como ferramentas de design, HTML, CSS, PHP, JavaScript , Sass, como
ferramentas Web, Mysql worbench para gerenciamento de base de dados e o Visio
para a construção de diagramas de UML (Unified Modeilng Language – Linguagem de
Modelagem Unificada), com o auxílio destas ferramentas criamos uma Aplicação Web
para localizar salões de eventos.
 ABSTRACT

This work presents the creation of a commercial website where we will promote
some products on this same website. In this present work, we also discuss where it all
began, from the history of the internal to even the first websites to be created in the world.
 ÍNDICE
1 Introdução ------------------------------------------ Erro! Marcador não definido.
1.1 Situação problemática ------------------------- Erro! Marcador não definido.
1.2 Campo de acção -------------------------------- Erro! Marcador não definido.
1.3 Objectivo geral ---------------------------------- Erro! Marcador não definido.
1.4 Objectivo especifico ---------------------------- Erro! Marcador não definido.
1.5 Metodologia Da Pesquisa -------------------- Erro! Marcador não definido.
1.5.1 PESQUISA BIBLIOGRÁFICA ---------------- Erro! Marcador não definido.
1.5.2 PESQUISA DE CAMPO ---------------------- Erro! Marcador não definido.
2 Capítulo I: Fundamentação teórica --------- Erro! Marcador não definido.
2.1 Aplicações web e Website -------------------- Erro! Marcador não definido.
2.2 Desenvolvimento web ------------------------- Erro! Marcador não definido.
2.2.1 Servidor HTTP----------------------------------- Erro! Marcador não definido.
2.2.2 A World Wide Web ----------------------------- Erro! Marcador não definido.
2.3 Funcionamentos da Web --------------------- Erro! Marcador não definido.
2.3.1 Padrões da Web -------------------------------- Erro! Marcador não definido.
2.3.1.1 Uniform Resource Locator (URL)-------- Erro! Marcador não definido.
2.3.1.2 Hypertext Transfer Protocolo (HTTP): -- Erro! Marcador não definido.
2.3.1.3 Hypetext Markup Language (HTML): --- Erro! Marcador não definido.
2.3.2 Tipos de servidores:---------------------------- Erro! Marcador não definido.
2.4 Tecnologias Da web --------------------------- Erro! Marcador não definido.
2.4.1 Browser ou Navegador ------------------------ Erro! Marcador não definido.
2.4.1.1 Tipos de browsers: -------------------------- Erro! Marcador não definido.
2.4.2 O site ---------------------------------------------- Erro! Marcador não definido.
2.5 Páginas Web Estáticas e Dinâmicas ------- Erro! Marcador não definido.
2.6 Linguagem de programação web e ferramentasErro! Marcador não
definido.
2.6.1 Hypertext Markup language (HTML) ------- Erro! Marcador não definido.
2.6.2 JavaScript ---------------------------------------- Erro! Marcador não definido.
2.6.3 CSS ------------------------------------------------ Erro! Marcador não definido.
2.6.4 PHP ------------------------------------------------ Erro! Marcador não definido.
2.6.5 Base de dados ---------------------------------- Erro! Marcador não definido.
2.6.5.1 MySQL ----------------------------------------- Erro! Marcador não definido.
2.6.6 API ------------------------------------------------- Erro! Marcador não definido.
3 Capítulo 2: Caraterística do Sistema ------- Erro! Marcador não definido.
3.1 Requisitos Do Sistema ------------------------ Erro! Marcador não definido.
3.1.1 Requisitos Funcionais ------------------------- Erro! Marcador não definido.
3.2 Requisitos não Funcionais ------------------- Erro! Marcador não definido.
3.3 Diagrama ----------------------------------------- Erro! Marcador não definido.
3.3.1 Diagrama de Classes -------------------------- Erro! Marcador não definido.
 1. INTRODUÇÃO

O presente trabalho consiste de um procedimento de criação de um site comercial de

produtos diversos usando uma linguagem de programação
Criar um site comercial de produtos diversos envolve várias etapas, desde a escolha da
plataforma até o lançamento e promoção do mesmo e este relatório tem a finalidade de
mostrar as etapas para criação do site até a etapa de finalização do mesmo.

Mas antes de abordar sobre como criar um site, iremos falar primeiramente sobre a
internet e como foi criada e de seguida iremos mostrar qual foi o primeiro site a ser criado
no mundo.

1.1 1.1 Formulações Justificativas

A criação deste Site Comercial é justificada pela necessidade de reduzir os problemas que
vem se originando em nossas comunidades.

E como faremos isso?

A Criação deste site não apenas dará mais vantagens aos nossos estimados clientes como
motivara outras pessoas a criarem seus proprios sites comercias para assim também
comercializarem seus negócios virtualmente sem ter a necessidade de sairem de suas
casas.

1.2 Formulação do Problema

1.3 Formulação de hipótese

1.1 OBJETIVOS GERAIS

Criar site comercial de produtos diversos e nos preprar para a defesa do fim de curso.

1.2 OBJETIVOS ESPECIFICOS

O nosso objetivo especifico é de aprensar um site comercial de produtos diversos.

2 FUNDAMENTAÇÃO TEÓRICA

As seções a seguir contextualizam os principais temas que serão abordados durante o

trabalho, apresentando os conceitos mais importantes dentro de cada tópico.
2.1 INTERNET

Seja no computador, celular, tablet, televisão ou em relógios inteligentes. A internet

hoje está presente em praticamente toda parte. Em pleno século 21, a internet faz parte da
rotina da maioria das pessoas no mundo das mais diversas maneiras, seja para trabalho
ou mesmo lazer.
Sua importância é tanta que o dia 17 de maio foi declarado como o Dia Mundial da
Internet, uma celebração das TICs (Tecnologias da Informação e Comunicação), data
instituída em 2006 em uma conferência da ONU (Organizações das Nações Unidas) em
Antália, na Turquia.
A Internet surgiu em plena Guerra Fria. Criada com objetivos militares seria uma das
formas das forças armadas norte-americanas de manter as comunicações em caso de
ataques inimigos que destruíssem os meios convencionais de telecomunicações.
Nas décadas de 1970 e 1980, além de ser utilizada para fins militares, a Internet também
foi um importante meio de comunicação acadêmico. Estudantes e professores
universitários, principalmente dos EUA, trocavam ideias, mensagens e descobertas pelas
linhas da rede mundial.
Um dos principais avanços relacionados à origem da Internet foi a criação, em 1983, do
Domain Name System (DNS), que tornou a Internet mais acessível ao permitir que URLs
substituam endereços IP longos.
Foi somente no ano de 1990 que a Internet começou a alcançar a população em geral.
Neste ano, o engenheiro inglês Tim Bernes-Lee desenvolveu a World Wide Web,
possibilitando a utilização de uma interface gráfica e a criação de sites mais dinâmicos e
visualmente interessantes. A partir deste momento, a Internet cresceu em ritmo acelerado.
Muitos dizem que foi a maior criação tecnológica, depois da televisão na década de 1950.
Em 1991, ocorreu o lançamento do primeiro site do CERN, tornando a World Wide Web
disponível ao público.
A década de 1990 tornou-se a era de expansão da Internet. Para facilitar a navegação pela
Internet, surgiram vários navegadores (browsers) como, por exemplo, a Internet Explorer
da Microsoft e o Netscape Navigator. O surgimento acelerado de provedores de acesso e
portais de serviços on-line contribuiu para este crescimento. A Internet passou a ser
utilizada por vários segmentos sociais. Os estudantes passaram a buscas informações para
pesquisas escolares, enquanto jovens utilizavam para a pura diversão em sites de games.
As salas de chat tornaram-se pontos de encontro para um bate-papo virtual a qualquer
momento. Desempregados iniciaram a busca de empregos através de sites de agências de
empregos ou enviando currículos por e-mail. As empresas descobriram um excelente
caminho na Internet para melhorar seus lucros e as vendas on-line dispararam,
transformando a Internet em verdadeiros shoppings centers virtuais.

2. CONCEITOS DE SITE

O presente trabalho consiste de um procedimento para a criação de um site para

informações do colégio futuro do bem.

Frizar primeiramente que site é um agrupamento de páginas, nas quais pessoas e empresas
podem inserir conteúdos e recursos diversos, com a finalidade de serem exibidos na
internet. Os sites são acessados pelos internautas por meio do seu endereço eletrônico,
que é um local específico reservado para ele dentro da web.

Um site tem como principal objetivo fazer com que pessoas e empresas possam divulgar
seus conteúdos e arquivos na internet. Alguns exemplos são os trabalhos realizados,
produtos, serviços, fotos, textos, vídeos e qualquer outro material que você tenha interesse
de expor.

Além dessas possibilidades, ele também pode ser utilizado para oferecer recursos aos
usuários ou, até mesmo, para que sejam realizadas transações comerciais por meio dele,
possibilitando que você turbine as suas vendas.

Principais tipos de site

1. Site institucional: destinado a empresas, para a divulgação de informações

institucionais, como: história da empresa, equipe, produtos, serviços, portfólio,
contato, missão, visãoe valores da empresa, etc.

2. E-commerce: website em formato de loja virtual, com fins comerciais, como a

realização da venda de produtos e serviços pela internet.

3. Site dinâmico: uma junção do site institucional com o e-commerce. Com ele, é
possível, tanto divulgar a sua empresa como vender seus produtos ou serviços.
 4. Site one Page: site enxuto, com apenas uma página. É usado, principalmente, por
profissionais autônomos ou outros tipos de negócios que não necessitam de várias
páginabs para divulgar seu trabalho.

5. Hot si fcrckte: destinado, principalmente, para os casos em que a exposição do

conteúdo na internet será temporária. Alguns exemplos são eventos e cursos, que
acontecerão em determinada data ou época. Assim que as atividades desses
eventos são finalizadas, o hot site pode ser retirado do ar, já que não será mais
necessário fazer a sua divulgação.

6. Landing Page: também chamada de página de captura. Trata-se de página única,

que tem como objetivo captar informações sobre os interessados nos materiais que
você oferece pela internet. Geralmente, você disponibiliza esses materiais ao
usuário e, em troca, ele deixa seus dados para futuro contato (base de leads).

7. Portal: website que possui estrutura robusta, específica para comportar uma
grande quantidade de páginas de conteúdos de naturezas variadas, como notícias,
atualidades, dicas, propagandas, vídeos, etc.

8. Blog: site utilizado como uma espécie de coletânea de postagens, apropriado para
inserção de conteúdos sobre determinado tema ou assunto.

3.1 O PROJECTO
A internet é conhecida como a rede mundial de computadores, cujo objetivo é
fornecer acesso de diversas informações aos seus usuários. De acordo com dados, em
janeiro de 2021, havia mais de 4,7 bilhões de usuários da internet e mais de 1,83 bilhão
de sites. No entanto, esse número cresce a cada dia, com a criação dos mais variados tipos
de sites, que agradam a todos os gostos.

Em suma, o primeiro site do mundo foi criado em 1991, pelo físico do Centro Europeu
de Pesquisa Nuclear (CERN), chamado Tim Berners-Lee. Também responsável por criar
a World Wide Web (WWW), no ano de 1989. Portanto, Tim é considerado como o pai
da Web.
Ademais, o primeiro site era uma página nomeada ‘The Project’, que inicialmente foi
hospedada em um comutador NeXT, criado por Steve Jobs em 1985. Que pertencia a um
cientista britânico. Além disso, o site pode ser acessado até hoje, cujo conteúdo conta
com descrições dos principais fundamentos da World Wide Web.

Durante a Guerra Fria, a World Wide Web foi desenvolvida para que os militares
pudessem manter a comunicação entre as bases, mesmo se algo acontecesse ao
Pentágono. No entanto, com o fim desse período, a internet deixou de ser usada em sigilo.
Então, seu acesso foi liberado aos cientistas, posteriormente às Universidades e por fim
foi liberada para toda a população. Dessa forma se tornando a rede mundial de
computadores como conhecemos.

Em 6 de agosto de 1991, o primeiro site do mundo, chamado The Project, foi criado pelo
pai da Web, Tim Berners-Lee. Inicialmente, o site tinha como objetivo permitir que os
profissionais da CERN pudessem trocar informações científicas de seus próprios
computadores. Pois, assim não precisariam estar no mesmo espaço físico para saber sobre
o andamento sobre determinado projeto. Dessa forma, bastava estar conectado ao servidor
online.

O site The Project continha informações sobre os códigos necessários para que uma
página semelhante pudesse ser criada, disponibilizados para os usuários. Em suma, o
servidor foi disponibilizado pelo CERN em 1993, para facilitar a disseminação.

Dessa forma, o site disponibilizava referências bibliográficas, contato de todos os

envolvidos na criação do projeto e lista com os softwares utilizados. Além disso, a página
também servia para demonstrar hipertextos aplicados à internet. E a como criar um
navegador, como instalar e configurar um servidor web, etc. Ou seja, o que foi criado
inicialmente para troca de informações internas, estava prestes a se tornar na Web como
a conhecemos hoje. Já no ano de 1994, havia mais de 10.000 servidores e 10 milhões de
usuários na web.

Ilustração do primeiro site a existir no mundo

O primeiro site do mundo foi hospedado em uma máquina NeXT, que ainda se encontra
no CERN. E desde 2013, o The Project está disponível para o público, com seu endereço
original, da época de sua criação. Em suma, o sistema operacional chamado NeXTSTEP
foi considerado como o ideal para a hospedagem do site, por ser multitarefa e ter uma
orientação a objeto otimizada.

Da mesma forma de como é hoje, para acessar o site era necessário ter um navegador. Por
isso, a página continha informações sobre navegadores para diversas plataformas. Por
exemplo, Unix, Macintosh e para a própria NeXT.

Como mencionado anteriormente, o primeiro site do mundo ainda é mantido pelo CERN.
No entanto, o órgão, atualmente se dedica a pesquisas e estudo sobre o comportamento
de partículas. Quanto ao pai da Web, Tim Berners-Lee, ainda se mantém na ativa e luta
contra políticas de censura na web adotadas por governos. Além de defender a
neutralidade da rede mundial de computadores.

3.2 GOOGLE

Larry Page e Sergey Brin, eram dois estudantes de doutorado da Universidade de

Stanford, começaram a trabalhar em um projeto de pesquisa sobre a estrutura matemática
da internet. Eles estavam interessados em entender como as páginas da web estavam
interconectadas.

Em 1996, Larry Page e Sergey Brin desenvolveram o PageRank, um algoritmo que

analisava as ligações entre páginas da web para determinar a importância e a relevância
de cada página. O algoritmo baseava-se na ideia de que uma página web é importante se
muitas outras páginas importantes apontam para ela.

Inicialmente, o projeto foi chamado de BackRub, pois o sistema verificava links de

retorno para estimar a importância dos sites. O BackRub foi o protótipo do que mais tarde
se tornaria o Google.

O nome Google é um jogo de palavras com “googol”, que é o número 1 seguido de 100
zeros. Este nome refletia a missão de Larry e Sergey de organizar uma quantidade
aparentemente infinita de informações na web.
Em 1998, Page e Brin lançaram a primeira versão do Google em seu site na
Universidade de Stanford. O domínio google.com foi registrado em 15 de setembro de
1997.

Em setembro de 1998, Larry Page e Sergey Brin formalmente fundaram a empresa

Google Inc. Eles conseguiram um investimento inicial de $100.000 de Andy
Bechtolsheim, co-fundador da Sun Microsystems.

Google rapidamente ganhou popularidade devido à sua simplicidade e relevância dos

resultados de pesquisa. A empresa obteve mais financiamentos de investidores,
incluindo a Sequoia Capital e a Kleiner Perkins.

Com o passar dos anos, Google continuou a evoluir e expandir suas operações,
introduzindo novos serviços e produtos, como Google AdWords (publicidade), Google
Maps, Gmail, e muitos outros.

Eis que acabamos de abordar sobre o primeiro site e mostramos resumidamente como foi
criado o site Google, mas, não podiamos nos esquecer dos identificadores de recursos na
internet, pois, se queremos criar um site devemos frizar sobre os identificadores.

3.3 IDENTIFICADORES

Um identificador é um nome que identifica de forma unica uma entidade em um

determinado dominio.
Nome identifica uma associação ou um endereço onde a entidade está localizada. Embora
uma entidade possa possuir diversos nomes.

3.4 URI

Em TI, um Identificador Uniforme de Recurso (URI) é uma cadeia de caracteres

compacta usada para identificar ou denominar um recurso na Internet. O principal
propósito desta identificação é permitir a interação com representações do recurso através
de uma rede, tipicamente a Rede Mundial, usando protocolos específicos. URIs são
identificados em grupos definindo uma sintaxe específica e protocolos associados.

Um URI pode ser classificado como um localizador (URL) ou um nome (URN), ou ainda
como ambos.
3.5 URN

Um Nome de Recurso Uniforme URN – Uniform Resource Name (em inglês) é

como o nome de uma pessoa, enquanto que um Localizador de Recurso Uniforme URL
– Uniform Resource Locator (em inglês) é como o seu endereço. O URN define a
identidade de um item, enquanto que o URL dá-nos um método para encontrá-lo.
Um URN típico é o sistema ISBN para identificar individualmente os livros. ISBN 0-
486-27557-4 (urn:isbn:0-486-27557-4) cita sem equívocos uma edição específica da obra
de Shakespeare “Romeu e Julieta” – Romeo and Juliet. Para aceder a este objeto e ler o
livro, é necessário obter a sua localização, ou seja, através de um endereço URL. Um
URL típico para este livro é um caminho de arquivos,
como file:////home/pedro/Desktop/RomeoAndJuliet.pdf, identificando o livro eletrônico
salvo no disco de um PC local. Então o propósito de URNs e URLs é o de serem
complementares.

3.6 URL

Um URL (Uniform Resource Locator) é um formato de designação universal para

designar um recurso na Internet. Trata-se de uma cadeia de caracteres ASCII imprimíveis
que se decompõe em cinco partes:
O nome do protocolo: quer dizer, em certa medida, a linguagem utilizada para comunicar
na rede. O protocolo mais utilizado é o protocolo HTTP (HyperText Transfer Protocol),
o protocolo que permite trocar páginas Web em formato HTML. Contudo, numerosos
outros protocolos são utilizáveis (FTP, News, Mailto, Gopher);

Identificador e palavra-passe: permite especificar os parâmetros de acesso a um servidor

protegido. Esta opção é desaconselhada porque a palavra-passe é visível na URL;

O nome do servidor: Trata-se de um nome de domínio do computador que aloja o recurso

pedido. Repare que é possível utilizar o endereço IP do servidor, que torna em
contrapartida o URL menos legível;

O número de porta: trata-se de um número associado a um serviço que permite ao servidor

saber que tipo de recurso é pedido. A porta associada por padrão ao protocolo é a porta
número 80. Assim, quando o serviço Web do servidor é associado ao número de porta 80,
o número de porta é facultativo;
O caminho de acesso ao recurso: Esta última parte permite ao servidor conhecer o lugar
onde o recurso está situado, ou seja, o lugar (diretório) e o nome do arquivo pedido.

E agora veremos algumas linguagens de programação necessarias pra podermos criar

sites entre outrros projectos

4. LINGUAGENS DE PROGRAMAÇÃO

Linguagem de programação trata-se basicamente de um conjunto de regras e

instruções criado por um programador para gerar softwares e muito mais, e que serão
processados por um computador, dispositivo móvel (como smartphones) ou outro
equipamento.
A estruturação dessa linguagem resulta no código-fonte de um software, com instruções
de como esse programa deve operar. As linguagens de programação são formadas por
símbolos, palavras-chave, entre outros elementos, e são classificados por níveis. Elas
permitem o entendimento entre o programador e a máquina. Por meio dessas linguagens,
o programador e a máquina se comunicam defindo aspectos como quais dados um
software deve operar.

4.1 Tipos de linguagem de programção

Uma linguagem de programação pode ser de nível alto ou baixo. As chamadas de

alto nível possuem uma construção linguística que se aproxima mais da forma humana de
se comunicar. Por exemplo, é comum ver termos em inglês como “delete” que oferecem
instruções para que o programa apague alguma informação. Isso torna esse modelo um
pouco mais intuitivo e fácil de aprender.

Já a linguagem de baixo nível, utiliza comandos mais complexos e o código binário, que
são sequências combinadas dos números 0 e 1. Isso otimiza a comunicação com a
máquina, aumentando a agilidade do processo. Os diferentes tipos funcionam melhor de
acordo com o objetivo que se busca atingir.

Além disso, existem outras formas de classificação levando em conta o paradigma de

programação, estrutura dos tipos, grau de abstração, geração, e os tipos são:

 Linguagens aplicativas, ou de aplicação

 Linguagens concorrentes, distribuídas e paralelas

  Linguagens de fluxo de dados

 Linguagens de projeto

 Linguagens extensíveis

 Linguagens de montagem e de macro

 Linguagens de microprogramação

 Linguagens não determinísticas

 Linguagens não procedurais

 Linguagens orientadas a objeto

 Linguagens de aplicação especializada

 Linguagens de altíssimo nível

Uma linguagem de programação pode fazer parte de diferentes classificações, mas

existem algumas que são essenciais para qualquer programador ou profissional de
tecnologia. Segundo um levantamento realizado pela consultoria de programação norte-
americana RedMonk, as linguagens de programação mais populares são JavaScript,
Python, Java, PHP, CSS, C#, C++ e C.

4.2 JAVASCRIPT

Está entre as mais usadas. Sua tecnologia é moderna, com foco nas seguintes áreas:
desenvolvimento web, criação de jogos e aplicativos para dispositivos móveis. É a
linguagem de programação ideal para quem entrou há pouco na área da programação. A
tecnologia é executada geralmente no próprio navegador, o que facilita o aprendizado.

4.3 PYTHON

Foi criada em 1989 pelo matemático e programador holandês Guido van Rossum e se
mantém até hoje entre os mais populares. Essa linguagem de programação é open source
(código aberto, ou seja, código-fonte que pode ser adaptado para diferentes fins) e de fácil
aprendizado. Tem como característica o uso de palavras-chave em inglês.
4.4 JAVA

Apesar de terem praticamente o mesmo nome, Java e JavaScript são linguagens de

programação bem diferentes. O foco da Java está na criação de aplicativos Android. Além
disso, é talvez a mais utilizada no ambiente corporativo, podendo rodar em qualquer
plataforma.

4.5 PHP

Essa linguagem de programação é de uso geral. Isso porque utiliza o código aberto, o que
permite aos desenvolvedores de qualquer parte do mundo mexer nela para que seja
aprimorada. Os programadores costumam usá-la para criar sistemas disponíveis na web.

4.6 CSS

É uma linguagem que atua na apresentação visual de um documento escrito em HTML

ou em XML. Por meio da CSS (Cascading Style Sheets ou, em português, Folhas de Estilo
em Cascata), é possível determinar como serão exibidos os elementos contidos no código
de uma página da internet, além de efetuar a separação entre o formato e o
conteúdo de um documento.

4.7 C#

Apesar de utilizarem a mesma letra, estas são três linguagens diferentes. A C# é uma
linguagem de programação simples e de propósito geral que auxilia no desenvolvimento
de princípios de engenharia de software. É utilizada para escrever aplicativos para
sistemas hospedados e incorporados.

4.8 C++

C++ é uma linguagem de uso geral criada como uma extensão da linguagem C para
programação de sistemas e softwares incorporados, com recursos limitados e grandes
sistemas. É bastante utilizada em aplicativos de desktop, videogames e servidores.

4.9 C

A linguagem C é voltada para programação estruturada e instruções de máquinas típicas.

É bastante utilizada em aplicativos previamente codificados em linguagem assembly.
Apesar de seus recursos de baixo nível, a linguagem foi projetada para incentivar a
programação entre plataformas.

5. Editores de Código-Fonte

Um editor de código-fonte é uma ferramenta de software projetada especificamente para

escrever e editar código de programação. Esses editores são usados por desenvolvedores
de software para criar e modificar arquivos de código-fonte em várias linguagens de
programação. Alguns dos principais recursos de um editor de código-fonte incluem:

 Realce de Sintaxe: Os editores destacam palavras-chave, variáveis, e outros

elementos da linguagem de programação com diferentes cores para facilitar a
leitura e a escrita do código.

 Autocompletar: Sugere automaticamente nomes de variáveis, funções e outros

elementos enquanto o desenvolvedor digita, acelerando o processo de codificação.

 Indentação Automática: Organiza automaticamente o código de acordo com as

regras de indentação da linguagem, melhorando a legibilidade.

 Busca e Substituição: Permite aos desenvolvedores buscar rapidamente por

trechos de código e substituí-los, economizando tempo durante a edição.

 Integração com Controle de Versão: Alguns editores oferecem integração com

sistemas de controle de versão, como Git, facilitando o gerenciamento de
mudanças no código.

 Depuração: Embora geralmente associada a IDEs (Ambientes de

Desenvolvimento Integrado), alguns editores de código também suportam
depuração, permitindo a execução passo a passo do código e a inspeção de
variáveis.

Existem muitos tipos de editores de código-fonte, cada um com suas próprias

características, funcionalidades e especializações. Eles podem ser categorizados de
várias maneiras, mas aqui estão algumas das principais categorias e exemplos de cada
tipo:
5.1 Editores de Texto Simples

Esses editores são leves e oferecem funcionalidades básicas para edição de texto, sem
muitos recursos avançados específicos para programação.

 Exemplos: Notepad (Windows), TextEdit (macOS).

5.2 Editores de Código-Fonte Simples

Esses editores oferecem funcionalidades básicas para programação, como realce de

sintaxe e formatação de código.

 Exemplos: Sublime Text, Atom, Notepad++.

5.3 Editores de Código-Fonte Avançados

Oferecem uma ampla gama de funcionalidades, incluindo suporte a extensões,

integração com sistemas de controle de versão, depuração e mais.

 Exemplos: Visual Studio Code, Vim, Emacs.

5.4 Ambientes de Desenvolvimento Integrado (IDEs)

São ferramentas completas que incluem um editor de código, depurador, compilador e

outras ferramentas necessárias para o desenvolvimento de software.

 Exemplos: IntelliJ IDEA, Eclipse, Visual Studio, PyCharm.

5.5 Editores de Código Online

Esses editores funcionam no navegador e permitem codificação e colaboração em

tempo real.

 Exemplos: CodePen, Repl.it, GitHub Codespaces.

5.6 Editores de Código para Mobile

Esses editores são projetados para serem usados em dispositivos móveis e tablets.
  Exemplos: AIDE (Android), Textastic (iOS).

5.7 Editores Específicos para Linguagens de Programação

Alguns editores são projetados para funcionar melhor com linguagens de programação
específicas, oferecendo suporte e funcionalidades otimizadas para essas linguagens.

 Exemplos: RStudio (para R), Jupyter Notebook (para Python e outras

linguagens científicas).

5.8 Editores com Suporte a Colaboração em Tempo Real

Permitem que múltiplos desenvolvedores editem o mesmo código ao mesmo tempo,

facilitando a colaboração.

 Exemplos: Visual Studio Live Share, Teletype para Atom.

5.9 Editores para Desenvolvimento Web

Estes editores são especialmente otimizados para desenvolvimento web, oferecendo

suporte integrado para HTML, CSS, JavaScript e frameworks populares.

 Exemplos: Brackets, Adobe Dreamweaver.

5.10 Editores de Código Mínimos

Esses editores focam na simplicidade e minimalismo, oferecendo o mínimo de

distrações possível.

 Exemplos: Micro, Nano.

Bem chegado quase na etapa final não poderiamos deixar de falar sobre os passos a se
ter para criação de um site comercial usando editor de Código-Fonte Visual Studio
Code.

Passo 1 - Criar Arquivos Básicos

 Criar arquivo HTML: Crie um arquivo chamado index.html.

  Criar arquivo CSS: Crie um arquivo chamado styles.css.
 Criar arquivo JavaScript: Crie um arquivo chamado main.js.

Passo 2 - Desenvolver o HTML5

No arquivo index.html, adicione a estrutura básica do seu site:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Loja de Produtos</title>

<link rel="stylesheet" href="styles.css">

</head>

<body>

<header>

<h1>Minha Loja</h1>

<nav>

<ul>

<li><a href="#">Home</a></li>

<li><a href="#">Produtos</a></li>

<li><a href="#">Contato</a></li>

</ul>
 </nav>

</header>

<main>

<section id="product-list">

<!-- Produtos serão carregados aqui -->

</section>

</main>

<footer>

<p>&copy; 2024 Minha Loja</p>

</footer>

<script src="main.js"></script>

</body>

</html>

Passo 3 - Desenvolver o CSS

No arquivo styles.css, adicione os estilos para o seu site:

body {

font-family: Arial, sans-serif;

margin: 0;

padding: 0;

box-sizing: border-box;
}

header {

background: #333;

color: white;

padding: 1em 0;

text-align: center;

nav ul {

list-style: none;

padding: 0;

nav ul li {

display: inline;

margin: 0 1em;

nav ul li a {

color: white;

text-decoration: none;

}
#product-list {

display: flex;

flex-wrap: wrap;

justify-content: space-around;

padding: 2em;

.product {

border: 1px solid #ddd;

margin: 1em;

padding: 1em;

width: 200px;

text-align: center;

.product img {

max-width: 100%;

Passo 4 - Desenvolver o JavaScript

No arquivo main.js, adicione a lógica para carregar e exibir os produtos:

document.addEventListener('DOMContentLoaded', () => {

const productList = document.getElementById('product-list');

 // Exemplo de produtos. Substitua com dados reais ou uma API.

const products = [

{ id: 1, name: 'Produto 1', description: 'Descrição do Produto 1', price: 100.00,
imageUrl: 'https://via.placeholder.com/150' },

{ id: 2, name: 'Produto 2', description: 'Descrição do Produto 2', price: 150.00,
imageUrl: 'https://via.placeholder.com/150' },

{ id: 3, name: 'Produto 3', description: 'Descrição do Produto 3', price: 200.00,
imageUrl: 'https://via.placeholder.com/150' },

];

// Função para criar e exibir produtos

const displayProducts = (products) => {

productList.innerHTML = '';

products.forEach(product => {

const productElement = document.createElement('div');

productElement.classList.add('product');

productElement.innerHTML = `

<img src="${product.imageUrl}" alt="${product.name}">

<h2>${product.name}</h2>

<p>${product.description}</p>

<p><strong>R$ ${product.price.toFixed(2)}</strong></p>;
 productList.appendChild(productElement);

});

};

// Exibir produtos ao carregar a página

displayProducts(products);

});

Passo 5 - Executar o Projeto

1. Abrir o projeto no VS Code: Abra a pasta onde você criou os arquivos no VS

Code.
2. Abrir o arquivo HTML no navegador: Clique com o botão direito no arquivo
index.html e selecione "Open with Live Server" (se tiver a extensão Live Server
instalada) ou abra o arquivo diretamente no navegador.

Passo 6 - Integração com um Backend (Opcional)

Para gerenciar produtos, você pode usar um serviço de backend pronto, como Firebase.
Aqui está um exemplo básico usando Firebase:

1. Configurar Firebase:
o Crie um projeto no Firebase Console.
o Adicione um aplicativo web ao projeto.
o Copie a configuração do Firebase para o seu arquivo main.js.
2. Incluir Firebase SDK: Adicione as seguintes tags no seu index.html antes do
seu arquivo main.js:

<script src="https://www.gstatic.com/firebasejs/8.6.8/firebase-app.js"></script>

<script src="https://www.gstatic.com/firebasejs/8.6.8/firebase-firestore.js"></script>

Configurar Firebase no main.js:

// Configuração do Firebase

const firebaseConfig = {

apiKey: "YOUR_API_KEY",

authDomain: "YOUR_AUTH_DOMAIN",

projectId: "YOUR_PROJECT_ID",

storageBucket: "YOUR_STORAGE_BUCKET",

messagingSenderId: "YOUR_MESSAGING_SENDER_ID",

appId: "YOUR_APP_ID"

};

firebase.initializeApp(firebaseConfig);

const db = firebase.firestore();

document.addEventListener('DOMContentLoaded', () => {

const productList = document.getElementById('product-list');

const fetchProducts = async () => {

const snapshot = await db.collection('products').get();

const products = snapshot.docs.map(doc => doc.data());

displayProducts(products);

};

const displayProducts = (products) => {

 productList.innerHTML = '';

products.forEach(product => {

const productElement = document.createElement('div');

productElement.classList.add('product');

productElement.innerHTML = `

<img src="${product.imageUrl}" alt="${product.name}">

<h2>${product.name}</h2>

<p>${product.description}</p>

<p><strong>R$ ${product.price.toFixed(2)}</strong></p>

productList.appendChild(productElement);

});

};

// Exibir produtos ao carregar a página

fetchProducts();

});
 Conclusão

Em conclusão, o trabalho apresenta de forma resumida beneficios de site como

título descritivo, Benefícios em destaque, Informações relevantes sobre a empresa,
Recursos visuais, Páginas organizadas, Carregamento rápido, Call-to-actions,
Informações mais importantes no topo, Menu de links, Segurança, e ser facilmente
encontrado. A criação de um site comercial de produtos diversos, com objetivo de facilitar
as questões de gerenciamentos de seus negocios e aperfeiçoar o uso de recursos
disponiveis.

Foram aqui detalhadamente conceitos de Internet, conceito de site, identificadores,

linguagem de programção, tipos de linguagem de programação, editor de código-fonte.
 Refêrencia Bibliografica

https://www.hostinger.com.br/tutoriais/o-que-e-site

https://www.ciawebsites.com.br/sites/o-que-e-site/

https://www.construsitebrasil.com/blog/veja-os-7-principais-tipos-de-site-
e-qual-
escolher?utm_source=google&utm_medium=blog&utm_campaign=veja-
os-7-principais-tipos-de-site-e-qual-escolher

https://pt.wix.com/blog/2023/06/o-que-e-
site/?utm_source=google&utm_medium=cpc&utm_campaign=124441315
16^116269031657^search%20-
%20dsa&experiment_id=^^501715408450^&gad_source=1&gclid=CjwK
CAjwp4m0BhBAEiwAsdc4aJOT_9yY8zwPikQYBJpWPKlJdxKEQGWg
hxcwjpF_Ig2r56jwKQuMihoChDUQAvD_BwE