Tecnologias Web: uma viagem do HTML para a Web 3.0

este artigo é especialmente para aqueles leitores que estão procurando ganhar algum conhecimento sobre ou estão interessados em trabalhar como desenvolvedores web ou em qualquer outro aspecto da web.

neste artigo, vamos concentrar-nos na questão de algumas tecnologias bem conhecidas e não tão bem conhecidas da web. Depois de uma rápida e simples introdução à tecnologia web, vamos rever os conceitos básicos de vários tipos de tecnologia web.Ao longo da nossa discussão, também iremos cobrir uma breve história da tecnologia da web, bem como algumas funcionalidades e funcionalidades de cada tipo de tecnologia de que falamos.

O Que São Tecnologias Web?

tecnologias Web são as várias ferramentas e técnicas utilizadas no processo de comunicação entre diferentes tipos de dispositivos através da internet.

para entender este Termo de uma forma melhor, vamos dividi-lo em duas partes: ‘web’ e ‘Tecnologia’.

a web, neste caso, refere-se à World Wide Web, mais conhecida como WWW. Foi criado pela primeira vez em 1989, quando o famoso cientista e engenheiro, Tim Berners-Lee, criou um mecanismo eficiente para compartilhar recursos entre cientistas de todo o mundo.

o conceito da web pode facilmente ser explicado com a ajuda de um exemplo.Suponhamos que está à procura de uma foto de um lama giro. Você escreve ‘www.google.com’ para o seu navegador web. Você introduz ‘llama bonito’ na barra de pesquisa e clique na página ‘Imagens’. O Google dá-lhe uma infinidade de imagens de lama coletadas de milhões de fontes diferentes.

Depois de percorrer um pouco, você pensa, “Oh, eu gosto dessa foto!”Mas você precisa ver a imagem de tamanho completo antes de baixá-la. Então, você abre a imagem original e chega a esta página:

Notice the red box?

este é o URL (um tipo de identificador) para esta imagem em particular. Da mesma forma, cada imagem de lama que você viu teria uma URL diferente que ajudaria a localizar essa imagem na internet.

todas estas páginas, documentos e quaisquer outros recursos são identificados e localizados com a ajuda de seus URLs. Estes coletivamente formam o que nós nos referimos como a World Wide Web.

o conhecimento que você acumula sobre a web e como ela funciona precisa ser aplicado a fim de fazer melhor sentido dela. Para isso, você precisa saber o básico de algumas tecnologias comuns da web. A fim de obter uma melhor compreensão da web, vamos dar uma olhada em alguns tipos básicos e exemplos de tecnologia da web que são comumente usados neste campo.

quais são os diferentes tipos de tecnologias Web?Uma vez que temos um espaço limitado para examinar a ampla gama de tecnologias da web disponíveis, escolhemos algumas que são usadas com maior frequência por iniciantes e especialistas na indústria. Dividimo-los nas seguintes secções::

1. o básico, O que irá abranger os navegadores da web e algumas de desenvolvimento de aplicações web fundamentos
2. linguagens de Programação e frameworks que são utilizados no desenvolvimento de websites
3. Bancos de dados que são utilizados no back-end para armazenar dados solicitados ou coletados por sites
4. Alguns protocolos, isto é, as regras para comunicação na web
5. Gráfico, audiovisual, e outros elementos de multimídia
6. Alguns formatos de dados que são normalmente utilizadas para a transmissão de dados através da internet
7. Outras diversas tecnologias web

Enquanto nós a nossa discussão pode tornar-se um pouco mais técnica à medida que avançamos mais no artigo.Agora, vamos entrar nos detalhes de cada componente que listamos.

o básico

nesta secção, vamos falar sobre navegadores web e alguns outros fundamentos da web.

navegadores web

navegadores Web, muitas vezes chamados apenas navegadores, tornam possível para nós ver todos os recursos que fazem parte da World Wide Web. Eles são baseados em uma arquitetura cliente-servidor. O cliente é o navegador neste cenário. Você pode pensar no servidor como uma combinação de software e hardware que recebe os pedidos do cliente e, em seguida, envia o recurso solicitado para o cliente.

sempre que introduzir um URL na barra de endereços de um navegador, ele transfere o seu pedido para o servidor e, em seguida, obtém e mostra o que o utilizador pediu.

Alguns navegadores populares são o Opera, Mozilla Firefox, Google Chrome e Safari.

Frontend vs Backend Development Technologies

What is web development?

Desenvolvimento Web refere-se ao processo de criação de sites. Este processo baseia-se numa série de passos, que abordaremos com mais pormenor quando explorarmos as ferramentas envolvidas em cada processo.

as duas partes de um site típico

à medida que formos mais longe, vamos discutir tecnologias de desenvolvimento da web individuais e ferramentas utilizadas para criar sites. Mas antes disso, precisamos ser claros nas duas partes distintas de um site: o frontend e o backend.

Frontend refere-se a todas as partes de um site que um usuário pode ver em sua tela e interagir com.

infra-estrutura refere-se ao oposto EXACTO disso. Envolve os mecanismos ocultos que fazem uma webpage funcionar. Um utilizador típico não tem conhecimento do que se passa na infra-estrutura.

diferentes tecnologias da web são utilizadas no processo de concepção e desenvolvimento da web.

aqui está uma breve visão geral das diferenças entre as duas categorias de desenvolvimento web.

Frontend	Back-end
do lado do Cliente	do lado do Servidor
o design do Site	Bancos de dados
UI/UX	Servidores
Algumas tecnologias de INTERFACE do usuário:	Alguns de back-end tecnologias:
HTML	PHP
CSS	Java
JavaScript	Python
AJAX	Ruby
	.Rede

HTML

HyperText Markup Language, more commonly referred to as HTML, is where the WWW started. É um componente crítico de todas as lições introdutórias que cobrem os conceitos básicos da web. É uma linguagem do lado do cliente que é usada para codificar a interface de um site. Ele ajuda os desenvolvedores a definir como a página web será estruturada, e o faz com a ajuda de elementos que são identificados por tags.

aqui está um exemplo muito básico de um pedaço de código escrito em HTML:

<!DOCTYPE html><html><body><h1 style="background-color:SteelBlue; color:LightSteelBlue; font-family:Cambria; font-size:200%">Hello, We Are GoodCore Software.</h1><p style="background-color:LightSteelBlue; color:SteelBlue; font-family:Calibri; font-size:150%">Good to the Core! &#128513;</p></body></html>

cada item incluído entre os parêntesis < > é um elemento. DOCTYPE, no entanto, é apenas uma declaração que comunica ao navegador que o que está prestes a carregar é um documento HTML. O elemento <corpo> define todo o conteúdo que forma o corpo do documento. <h1 > e<p > indicar o início de uma posição e um parágrafo, respectivamente. </corpo >,</h >, e</p > são etiquetas de Fecho. Indicam para onde o corpo, o rumo e o parágrafo terminam.

neste exemplo, o atributo style é usado para atribuir ao texto uma cor de fundo, cor da fonte, família e tamanho. Ele pode ser estendido ainda mais para incluir o estilo da fonte (negrito, itálico, …), alinhamento (centro, esquerda, …), etc. Outros atributos além do estilo também podem ser usados para modificar elementos de uma maneira similar.

(a cadeia de caracteres aleatórios & #128513; no final do parágrafo está um elemento surpresa que você pode ver no ecrã de saída abaixo!)

CSS

CSS é uma das tecnologias mais fundamentais de design de website. Para embelezar ainda mais as suas páginas web, pode integrar o CSS (Cascading Style Sheets) no seu código HTML.

o processo de aplicação de certos estilos a certos elementos do seu código HTML pode transformar-se numa tarefa repetitiva. Para economizar tempo e energia, CSS pode ser usado para simplificar o processo de estilização de suas páginas em todo o site. Uma vez que você preparar uma stylesheet com todos os estilos de letra padrão, cores e outras características relacionadas com a disposição geral de uma página web, você pode aplicá-la em todo o site. CSS também é combinado com Bootstrap para projetar aplicativos móveis-first web.

linguagens de programação e Frameworks

linguagens de programação são o componente mais básico da criação de sites. Para codificar um site, você precisa estar familiarizado com alguns conceitos de programação, algumas linguagens e sua sintaxe, e uma boa IDE de desenvolvimento. Algumas dessas línguas podem ser de propósito geral, mas outras são criadas especificamente para o propósito do desenvolvimento da web.

Below are some examples of commonly-used web development languages.

1. Java

Java foi criado em 1991 como uma linguagem de programação de propósito geral, mas lentamente evoluiu para desempenhar um papel importante no desenvolvimento da web em meados dos anos 90.

Java é bem conhecido devido a algumas de suas características surpreendentes, incluindo o seu

• Object-oriented natureza
• Portabilidade de plataforma e-independência
• sintaxe Simples
• Apreensibilidade
• Robustez

Quando se trata de desenvolvimento web, Java é geralmente usado no lado do servidor.

2. JavaScript

JavaScript foi criado pela primeira vez em 1995. Hoje, é um favorito de desenvolvedores em todo o mundo. É agora um componente vital do desenvolvimento web que ajuda a criar elementos dinâmicos de páginas web.

the introduction of JavaScript brought about the revolutionary wave of interactive web pages. Hoje, a inclusão de elementos gráficos, integração de banco de dados e dinâmica global de um site são todos possíveis devido ao advento do JavaScript.Embora JavaScript tenha sido inicialmente introduzido como uma linguagem de desenvolvimento frontend, agora está se tornando uma escolha popular para o desenvolvimento backend também.

3. Python

Python existe há anos, mas só recentemente está ganhando popularidade devido à sua sintaxe extremamente fácil de aprender e legível, bem como sua alta produtividade. Uma tarefa que poderia usar 10 linhas de código quando escrito em qualquer outra linguagem de programação poderia facilmente ser alcançada em 2-3 linhas de código Python.

para o desenvolvimento web do lado do servidor, Python é muitas vezes usado em conjunto com o Django ou Flask frameworks, o que simplifica ainda mais o processo de desenvolvimento.

este ano, StackOverflow relatou que Python bateu os gostos de Java e C em termos de popularidade, e ficou em segundo lugar na lista das linguagens de programação mais amadas.

4. PHP

PHP, um acrónimo recursivo, significa PHP: pré-processador de hipertexto. É a linguagem de script mais popular e amplamente utilizada, preferida tanto por novatos e profissionais experientes na indústria de desenvolvimento da web. É muito fácil de aprender e é absolutamente livre.

When used with Apache (or any other) HTTP server at the backend, PHP enables you to deliver efficient, high-speed and high-performance web development projects. Além disso, uma vez que o PHP existe há anos e só cresceu mais e melhor, existe um amplo apoio comunitário de desenvolvedores facilmente disponível.

5. Ruby

introduzido em meados dos anos 90, Ruby é uma poderosa linguagem de programação de propósito geral que, ao longo dos anos, se tornou popular entre os desenvolvedores de backend. É muitas vezes usado em conjunto com o seu popular framework Ruby on Rails. Ruby é especialmente recomendado para sites de tráfego Intensivo e aqueles que exigem um monte de trabalho no final do banco de dados. Também é útil para escrever aplicativos escaláveis.Sites populares como o Twitter e o Shopify foram construídos com Ruby na infra-estrutura.

6. Objective-C& Swift

Objective-C e Swift são linguagens de programação de propósito geral que são usadas especificamente para construir aplicativos para dispositivos Apple que executam macOS e iOS.

Objective-C builds upon C while Swift is heavily based on the syntax of C++. Embora o Objective-C esteja presente há muitos mais anos do que o Swift, o primeiro está lentamente a perder seguidores, uma vez que está a tornar-se cada vez mais obsoleto. Espera-se que a Swift substitua gradualmente o Objective-C pelas suas características mais avançadas, facilidade de utilização e segurança. Desde que a Swift foi de fonte aberta, os desenvolvedores também o têm usado para o desenvolvimento da web.

Frameworks

In simple terms, a framework can be defined as skeleton code. Pense nisso como um esboço, sem detalhes finos. Um framework define as funções básicas ou tarefas que o código é esperado para fazer. No entanto, a fim de dizer a esse programa em particular como executar essas funções, você terá que escrever algumas instruções mais detalhadas e específicas.

vamos dar uma olhada em alguns frameworks que são comumente usados por codificadores para o propósito de desenvolvimento web backend, juntamente com as linguagens com as quais eles trabalham melhor. Esta lista inclui algumas das mais recentes tecnologias do site.

Quadros	Idiomas
Vue.js	JavaScript
Express	Nó.js (JavaScript)
reaja.js	JavaScript
AngularJS	JavaScript
Django	Python
Balão	Python
Laravel	PHP
Ruby on Rails	Ruby
Catalisador	Perl
Cacau & Cacau Toque a tecla	Swift

Escolha uma destas opções depende de suas necessidades de desenvolvimento. Você precisa determinar qual framework e combinação de linguagem melhor atender aos seus requisitos de escalabilidade, segurança e produtividade sem investir muito na aprendizagem da própria tecnologia.

bases de dados

todos os dados que são trocados na web precisam ser armazenados em algum lugar. Para este efeito, a maioria dos websites têm as suas próprias bases de dados associadas a eles.

abaixo está uma lista de algumas bases de dados – algumas relacionais e outras, não relacionais-que são normalmente utilizadas para aplicações web.

• MySQL
• SQL Server
• Postgres
• Oracle
• MongoDB
• Redis

Formatos de Dados

Sempre que houver necessidade da troca de dados entre dois dispositivos na web, um bom procedimento é seguido. Os dados são devidamente embalados para transmissão da fonte para o destino. As APIs especiais (interfaces de programação de aplicações) são concebidas e integradas em sítios web para um intercâmbio de dados conveniente. Eles organizam os dados de tal forma que o receptor pode facilmente descodificá-los e compreendê-los.

abaixo estão dois formatos de dados comuns utilizados no desenvolvimento da web.

1. XML

XML significa Extensible Markup Language. Discutimos a sintaxe para HTML no início deste artigo. O XML opera de forma semelhante, na medida em que decompõe os dados em elementos identificados por vários tipos de tags. No entanto, com XML, você pode inventar suas próprias tags para descrever seus dados melhor. Estes dados, ao chegarem a um aplicativo ou servidor web, podem ser facilmente compreendidos e analisados.

vamos olhar para um exemplo de um registro de um estudante, seu biodata, e seus cursos registrados na Universidade. Isto é o que pareceria armazenado em XML:

<student><studentname>Regina George</studentname><year>2</year><courses><course>Compiler Design</course><course>Film Studies</course><course>Accounting</course></courses></student>

aqui, o nó principal ou raiz é estudante. nome do estudante, ano e cursos são nós infantis. Você poderia dizer que estes são atributos do nó raiz. Como é o caso com HTML, os dados XML também são escritos entre as marcas de abertura e fechamento dos nós filhos.

2. JSON

After years of experiencing XML’s bulkiness and heavy consumption of bandwidth, experts came up with JSON (JavaScript Object Notation). Ao contrário do XML, a JSON concentra-se mais no intercâmbio de dados rápido e fácil do que na definição e modelagem de dados detalhados. Ele também elimina toda a carga extra que o XML carrega na forma de tags repetitivos.

JSON é baseado no mecanismo familiar do par de valores-chave. A sua sintaxe assemelha-se à do JavaScript, tornando-o bastante fácil de ler e entender.

vamos ver como o nosso exemplo anterior de um registro de estudante apareceria quando armazenado é JSON:

{"studentname": "Regina George","year": "2","courses": }

aqui, o aluno é o objeto. o nome do estudante é um exemplo de uma chave, que é um atributo do estudante objeto. Seu valor associado é Regina George. Do mesmo modo, os cursos são também uma chave. No entanto, é na forma de um array (indicado pelos parênteses quadrados) uma vez que tem múltiplos valores associados a ele, ou seja, Design de compilador, estudos de filme e Contabilidade.

protocolos

protocolos Web são algumas regras predefinidas que devem ser seguidas por todos os que se comunicam através da web.

HTTP

Protocolo de transferência de hipertexto, mais conhecido como HTTP, é um protocolo web que define dois conceitos:

1. como os pedidos dos clientes são transmitidos aos servidores
2. como os servidores respondem aos pedidos dos clientes

O pedido deve especificar os seguintes quatro itens:

1. A URL para o recurso que o cliente quer
2. Um método, tais como GET (que é utilizado para obter dados a partir do servidor) ou POST (que é usado para enviar dados que necessitam ser actualizados no servidor)
3. Uma lista de cabeçalhos (cabeçalhos de Solicitação pode conter diversas informações sobre o cliente ou o recurso que eles têm solicitado, tal como cliente nome do navegador, sistema operacional, o tamanho da mensagem, data e hora da solicitação, informações de controle de acesso/credenciais etc.)
4. the body which contains the information that the client wants to send to the server

The server sends a response from the other end once a request has been trated with. Esta resposta especifica três elementos:

1. Um código de status que fica na forma de um número de 3 dígitos (Um código de status que você pode ter visto durante o seu dia-a-sessões de navegação na web é 404, o que indica que o recurso solicitado não foi encontrado.)
2. uma lista de cabeçalhos (os cabeçalhos de resposta assemelham-se aos cabeçalhos de pedido na estrutura, e pode levar informações como o tamanho da mensagem, tipo de conteúdo, etc.)
3. the body which contains the information that the client requested from the server

Other Protocols

Below is a list of other common web protocols and their uses.

Protocolo	Uso
TCP	Protocolo de Controle de Transmissão	Para o estabelecimento de uma conexão entre dois dispositivos na web e gerenciar a entrega de pacotes de dados
IP	Protocolo de Internet	Para a transferência de pacotes de dados entre dois dispositivos na web
TCP/IP		Estas duas tecnologias web, muitas vezes trabalham em conjunto.
UDP	Protocolo de Datagrama de Usuário	Para o estabelecimento de uma conexão entre dois dispositivos na web
FTP	Protocolo de Transferência de Arquivo	Para transferência de ficheiros entre o cliente e o servidor
SMTP	Simple Mail Transfer Protocol	Para enviar mensagens de email para o servidor
POP	Post Office Protocol	Para obtenção de mensagens de e-mail a partir do servidor
SOAP	Simple Object Access Protocol	Para enviar Mensagens em XML via HTTP

gráficos

elementos gráficos são uma característica chave de qualquer página web. Eles não só contribuem para o embelezamento de uma página, mas também podem ser usados para transmitir pontos importantes de uma maneira melhor do que o texto faz.

1. Canvas

Canvas é um elemento que faz parte do HTML. Quando usado junto com JavaScript (ou qualquer outra linguagem de script), você pode desenhar gráficos em uma página web pouco a pouco. O aspecto JS fornece interatividade em gráficos de tela, incluindo animação.

Canvas funciona melhor em situações em que um grande número de objetos gráficos precisa ser carregado em uma página web. É rápido e leve nesse aspecto. No entanto, não é muito excepcional quando se trata de redimensionar gráficos e escalá-los para cima, uma vez que é baseado em raster.

2. SVG

SVG significa gráficos vetoriais escaláveis. Ele é baseado em XML e funciona muito bem com HTML. ele também pode ser facilmente manipulado usando CSS.

o segredo de sua popularidade está em seu nome: escalabilidade. O que distingue o SVG de outros estilos gráficos, como o JPEG e o PNG, é que não é baseado em pixels. Baseia-se em dimensões numéricas (vetores) que podem ser facilmente dimensionadas para cima ou para baixo sem perda de qualidade.

Quando se trata de usar elementos gráficos em um site, a qualidade dos gráficos é um fator crítico. A SVG não só alcança alto desempenho para gráficos de maior porte, mas também garante a interatividade. Devido a estas razões, o SVG é atualmente uma das mais preferidas tecnologias gráficas da web.

3. WebGL

Web Graphics Library, mais conhecido como WebGL, é um recurso de tecnologia web que permite que navegadores rendam imagens 2D e 3D na tela. Elimina a necessidade de plug-ins externos e é compatível tanto com navegadores desktop e móveis.

Outros

Aqui estão algumas outras tecnologias da web que você pode não ter ouvido falar antes. Nós achamos que eles merecem uma menção honorária em nosso artigo.

1. Perl & CGI

Perl é uma linguagem de programação multi-plataforma de propósito geral que tem vindo gradualmente a ganhar popularidade na paisagem de desenvolvimento da web. Ele se baseia em linguagens como C e BASIC e funciona sem problemas com HTML, a linguagem de marcação mais comumente usada. Perl também funciona bem com bases de dados convencionais, como MySQL e Oracle.

Perl é usado para escrever aplicações que implementam CGI (interface Gateway comum). CGI é um protocolo web que define como uma aplicação se comunica com o servidor web ao fazer solicitações HTTP. Estes scripts CGI tornam o processo de obtenção de recursos mais eficiente.

2. MathML

Like HTML, MathML (Mathematical Markup Language) is a markup language. No entanto, é usado especificamente para a representação exata e adequada de equações matemáticas e científicas na web.

MathML não só garante que as equações são exibidas corretamente, mas também atribui significado ao conteúdo matemático. Tudo isso é conseguido usando elementos XML para a representação de conteúdo matemático e símbolos. Por exemplo, o elemento msqrt traduz-se para um símbolo de raiz quadrada, a função sine trigonométrica é representada pelo elemento sin, e assim por diante.

3. XSL, XSLT & EXSLT

XSL (Extensible Stylesheet Language) é uma linguagem que é usada para definir a forma como os dados XML precisam ser formatados ao serem exibidos ao cliente. Enquanto o XML lida com os dados em si, o XSL gerencia sua transformação, layout e apresentação. Podemos dizer que o XSL serve o mesmo propósito para XML que o CSS faz ao HTML.

The W3 website states the two constituents of XSL: a) XSLT (Transformations) to handle transformations and b) XSL-FO (Formatting Objects) to handle formatting, pagination, etc. No entanto, em 2013, XSL-FO foi descontinuado e substituído pelo CSS3.

XSLT (Extensible Stylesheet Language Transformations) é uma linguagem que define como os documentos XML devem ser convertidos em outros formatos de leitura humana, como HTML. Aplica folhas de estilo XSL a documentos XML, com a ajuda de um processador XSL, a fim de embelezar os dados XML.

EXSLT é um meio de estender a funcionalidade do XSLT. Não é uma parte oficial do XSLT, mas é um projeto dirigido pela comunidade. O objetivo é tornar as folhas de estilo XSL mais Portáteis e aumentar a sua funcionalidade e suporte, adicionando-lhes mais funções.

the Future of Web Technologies

a report by Cisco predicts that almost 52% of the world’s population will have access to the internet by the year 2020. A World Wide Web crescerá a taxas surpreendentes para incluir um maior número de pessoas, dispositivos e recursos disponíveis online. Por conseguinte, espera-se que as tecnologias web aumentem. Consequentemente, os profissionais de tecnologia esforçar-se-ão mais para fornecer conteúdo web acessível aos usuários em todos os lugares. Terão de ser tomadas medidas de segurança mais rigorosas para proteger os conteúdos privados da web de ciberataques maliciosos.

a WWW começou como Web 1.0 com páginas estáticas escritas em HTML antigo. Ele então passou para a web 2.0 com o advento do JavaScript e outras tecnologias que permitiram aos usuários interagir com o conteúdo da web e produzir seus próprios.

em breve, a Web irá Um passo mais longe e entrará na sua terceira fase, ou seja, a Web 3.0, que será muito mais descentralizada do que é hoje. Tecnologias modernas como AI e IoT em breve dominarão a Web. Tudo será muito mais automatizado em termos de desenvolvimento e consumo de novos conteúdos.

esperamos que este artigo o tenha ajudado a obter algumas ideias valiosas sobre a evolução e o futuro das tecnologias da web. Continue a seguir o nosso blog para se manter atualizado sobre outros desenvolvimentos interessantes na paisagem WWW!