Se tem uma coisa que nos deixa intrigados é a tecnologia, não concorda? Ela é capaz de fazer coisas incríveis, pense nos avanços relacionados a comunicação, medicina e esportes. E a tal da internet que nos permite achar informações de forma simples e rápida sobre qualquer assunto em qualquer lugar? Graças aos websites e portais de internet temos mais acesso a informação do que nunca.
Mas falando em tecnologias relacionadas a criação de sites, já se perguntou o que tem por trás desses incríveis meio de comunicação? Tem ideia do que são aquelas letras e números por trás dos sites que nós acessamos?
É sobre isso que vamos falar. Neste artigo você vai conhecer as principais, não todas, mas as principais tecnologias utilizadas na criação de websites e qual a importância de cada uma dela.
Tópicos deste artigo:
- Linguagem de marcação (HTML)
- Folha de estilo (CSS)
- Linguagem de programação (JS)
- A ligação entre entre as tecnologias
- Outas tecnologias
Linguagem de marcação
O HTML (Linguagem de Marcação de Hipertexto) é um dos pilares de qualquer site na internet, sem ele, não tem site. Como dito, o HTML é uma linguagem de marcação NÃO É LINGUAGEM DE PROGRAMAÇÃO.
A premissa para a criação do HTML, era a simples ideia de linkar textos. Facilitando as pesquisas científicas e a busca por referências textuais. Ou seja, digamos que você estivesse lendo um livro e durante a leitura você vê uma referência relacionada a outro livro. Para ter acesso, você teria que se deslocar para conseguir aquele livro e abrir na página certa para achar a referência.
Com o surgimento do HTML tudo mudou! Pois a premissa do HTML de poder criar textos e ao mesmo tempo fazer referências a outros livros e acessá-los de forma instantânea, foi algo revolucionário.
Mas então, que tal vermos de forma prática como funciona o HTML?
Bem, o HTML funciona nos navegadores de internet, como já dito, ele faz parte da estrutura básica de todo site. Seus comandos são realizados através de “TAGs”. O que são TAGs? De forma resumida são hipertextos, elementos HTML que se conectam entre si e são capazes de informar ao navegador de internet o tipo de estrutura que esta sendo construída.
Vamos ver isso de forma prática.
- abra um bloco de notas do seu computador;
- copie os códigos abaixo;
- salve o arquivo com a extensão .html;
- abra o arquivo com o seu navegador de internet
Código:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Meu primeiro html</title>
</head>
<body>
<h1>Olá Mundo!!!</h1>
</body>
</html>Resultado:
Iai? Fez o teste? Gostou? Bem interessante não é? Agora você já tem noção de como alguns elementos dos sites na internet são criados.
O HTML possui diversas TAGs e cada uma faz uma coisa diferente. Não vamos entrar nesse detalhe pois não é o nosso objetivo neste post, mas futuramente você terá um artigo que fala sobre isso.
Mas não sei se você percebeu um detalhe, não tem muitas cores, nem alinhamento ou qualquer tipo de formatação nesse exemplo que vimos. O que será que está faltando? Bem, está faltando o outro componente básico para o desenvolvimento de sites na internet. É sobre ele que falaremos agora.
Folha de estilo em cascata
O CSS (Folha de estilo em cascata) é uma tecnologia fantástica e essencial para toda internet! Através dela podemos aplicar estilo nos websites, ou seja, cores, espaçamentos, alinhamentos e todo tipo de medidas nas páginas webs. O CSS também é responsável por organizar parte do layout e fazer o ajuste das imagens e dos parágrafos. Se o HTML é responsável pela estrutura, o CSS é o responsável pela estética.
Vantagens
Digamos que o HTML e o CSS nasceram um para o outro, por isso a ligação entre eles é tão forte. Uma vez que vemos uma site sem o CSS, nem parece um site, pois não tem nenhum estilo na página que prenda a atenção do usuário a ponto de fazer com que ele se interesse pelo conteúdo. A implementação do CSS em um site resulta em uma página visualmente atraente, boa experiência para o usuário, responsividade, além de outras vantagens em especial para os Web Designers que irão criar o site.
Mas como isso funciona?
Vamos ver agora de forma prática a ligação entre essa duas tecnologias. Nesse exemplo vamos mostrar de forma bem simples, sem muitos detalhes, para que você possa entender a integração entre essas duas tecnologias.
Como o HTML é composto de TAGs (“<a></a>”, “<p></p>”) através dessas TAGs faremos a integração com o CSS. A Estrutura do CSS é composta de um seletor “p” e um “bloco de declaração” onde o código do estilo é inserido. Veja o exemplo abaixo:
Código:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Meu primeiro html</title>
</head>
<style>
p{
font-size: 20px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
color: red;
padding-right: 200px;
padding-left: 100px;
padding-top: 100px;
padding-bottom: 100px;
border: solid 5px #555555;
}
</style>
<body>
<h1>Olá Mundo!!!</h1>
<p>Neste paragráfo é possível observar a aplicação do CSS na página.
Um vez que esse texto ele possui estilização na: <br>
- cor do texto;<br>
- tamanho da fonte <br>
- estilo da fonte <br>
- alinhamento do parágrafo <br>
- e uma borda solida ao redor de 5px com ton de cinza<br>
- espaçamento de 100px na esquerda, em baixo e encima; <br>
- espaçamento de 200px na direita.
</p>
</body>Resultado:
Imagino que com esse exemplo você tenha conseguido entender um pouco melhor sobre o funcionamento do HTML com o CSS. Mas como dito antes, essa é uma forma bem simples de integração e funcionamento dessas duas tecnologias, mas é o suficiente para entender a importância da ligação entre elas.
Até então já vimos sobre a estrutura e a estilização de páginas WEBs. Mas e as interações? É sobre isso que iremos falar agora.
Linguagem de programação
Podemos definir linguagem de programação como: “Uma escrita formal; Conjunto de regras sintáticas e semânticas, criadas artificialmente, que servem para dar instruções padronizadas a um computador; Meio pelo qual o computador (hardware) e o programador (profissional) se comunicam; Conjunto de símbolos e códigos usados para programar sistemas, sites, aplicativos e todo tipo de software.
Assim como existem vários idiomas no nosso planeta, no mundo da tecnologia existem várias linguagens de programação. Algumas bem parecidas, outras, nem tanto. Algumas servem para áreas bem específicas, outras servem para diversas áreas. Alguns exemplos de linguagens de programação: Javascript, JAVA, C++, C, C#, Dart, PHP, Swift, GO.
Neste artigo, vamos nos concentrar em uma, o terceiro membro da tríade da web que é o Javascript. Essa é uma das mais importantes e mais utilizadas linguagens de programação em todo o mundo. Vimos até que o HTML é responsável pela estrutura do site, o CSS cuida do estilo e o Javascript cuida das interações. Pra ficar mais claro ainda, pensando em um corpo humano, o HTML é a estrutura óssea, o CSS é todo o tecido e pele do corpo e o Javascript é todo o sistema cardiovascular e nervoso (o coração e o cérebro) do corpo humano.
A integração entre os três.
Como dito antes, por ser uma linguagem de programação, é possível codificar comandos que sejam capazes de realizar ações no website. Como por exemplo enviar uma mensagem por e-mail, coletar informações através de um formulário, criar novas ações dentro de um site com base nas informações do usuário.
Mais uma vez, vamos ver isso de forma prática acontecer. Observe o código abaixo e o seu resultado.
Código:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Meu primeiro html</title>
</head>
<style>
p {
font-size: 20px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
color: red;
padding-right: 200px;
padding-left: 100px;
padding-top: 100px;
padding-bottom: 100px;
border: solid 5px #555555;
}
</style>
<body>
<h1>Olá Mundo!!!</h1>
<p>Neste paragráfo é possível observar a aplicação do CSS na página.
Um vez que esse texto ele possui estilização
na: <br>
- cor do texto;<br>
- tamanho da fonte <br>
- estilo da fonte <br>
- alinhamento do parágrafo <br>
- e uma borda solida ao redor de 5px com ton de cinza<br>
- espaçamento de 100px na esquerda, em baixo e encima; <br>
- espaçamento de 200px na direita.
</p>
</body>
<script>
var nome = window.prompt("Qual o seu nome?")
window.alert("É um grande pazer te conhecer, " + nome + " !")
</script>
</html>Resultado:
Olha só que incrível! Com basicamente duas linhas de comando em Javascript, fizemos o computador conversar conosco.
Vamos só entender rapidamente o que foi feito. Com uma linha pedimos para o computador te perguntar o seu nome e com uma segunda linha fizemos ele te dar as boas vindas e dizer seu nome. De forma bem resumida, foi o que fizemos.
Consegue entender a importância da linguagem de programação nos sites? O HTML deu estrutura, o CSS proporcionou estilo e o Javascript fez o site interagir conosco.
Vale ressaltar que não é só o Javascript que é utilizado em páginas WEB, mas outras linguagens também, porém, o Javascript é o mais utilizado.
A ligação entre essas tecnologias
Como já foi mencionado, o HTML o CSS e o Javascript são as 3 principais tecnologias utilizadas na criação de sites. Graças a elas podemos acessar sites na internet de forma fácil, acessível, segura e que promovem boas experiências de navegação.
Sites desenvolvidos com essas tecnologias, possuem ótima performance, podendo levar uma empresa a fazer muitas vendas online. Sem essas tecnologias, a internet não seria o que conhecemos hoje e provavelmente o acesso seria mais difícil e limitado. O fato é que quando utilizadas juntas da forma correta, resulta no desenvolvimento de um excelente projeto.
Outras tecnologias
Hoje com o desenvolvimento da tecnologia, a criação de sites não vive apenas de HTML, CSS e Javascript. O surgimento dessas tecnologias proporcionou a criação de outras, como por exemplo:
Bootstrap: é um framework utilizado no desenvolvimento web junto com as três tecnologias citadas anteriormente. Uma das maiores vantagens no seu uso é a redução de código CSS e o desenvolvimento de uma aplicação mais responsiva.
WordPress: é um sistema gerenciador de conteúdo (CMS). Através dele é possível criar websites, lojas virtuais, blogs e tudo mais. Uma das suas grandes vantagens é seu desenvolvimento de baixo código (Low code), possibilitando que qualquer pessoas possa criar um site de forma rápida e prática com o método “arrasta e solta”. Ele também oferecer mais autonomia ao administrador do site, pelo fato de ter um painel administrativo que possibilita fazer todo o gerenciamento do site, desde a estrutura, estilo, interações e conteúdos.
PHP: essa é uma linguagem de programação utilizada também para criação de sites. Um detalhe importante é o fato de o WordPress mencionado acima, possuir em seu código fonte como linguagem principal o php. Sendo assim, não resta dúvidas sobre a importância do php na criação de sites.
O desenvolvimento web é uma das principais áreas da TI e para atuar nesse segmento, o conhecimento sobre essas tecnologias é essencial. Não tenho dúvidas de que agora sua mente expandiu no que diz respeito a criação de sites e as suas especificidades. Ao navegar na internet, observe como essas tecnologias atuando de forma conjunta trabalham tão bem. Graças a elas podemos fazer compras na internet, conhecer mais sobre um produto, solicitar um serviço e até abrir um negócio online.
O fato é que a existência dessas tecnologias mudou as nossas vidas para sempre, e tendem a continuar mudando, pois constantemente se atualizam.
Falando em atualizar, veja outros artigos em nosso blog e fique por dentro desse incrível mundo que é a tecnologia.
