Linguagens de Marcação, Programação, Bibliotecas e Frameworks: Uma Explicação Detalhada

Linguagens de Marcação

Definição: São conjuntos de símbolos e regras usados para estruturar e apresentar informações. Elas não possuem a mesma complexidade de uma linguagem de programação, pois não são usadas para criar algoritmos ou lógica complexa.
Objetivo: Descrever a estrutura e a apresentação de dados, como texto, imagens e links em uma página web.

Exemplos:

HTML: A linguagem padrão para a criação de páginas da web. Define a estrutura de um documento, como cabeçalhos, parágrafos, listas e tabelas. Link da documentação

<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Minha Primeira Página HTML5</title>
</head>
<body>
<h1>Olá, mundo!</h1>
<p>Este é o meu primeiro parágrafo em HTML5.</p>
<img src="minha-imagem.jpg" alt="Uma bela imagem">
</body>
</html>

XML: Linguagem de marcação extensível, usada para criar formatos de dados personalizados. É utilizada em diversas áreas, como configuração de aplicativos, armazenamento de dados e troca de informações entre sistemas. Link da documentação

<?xml version="1.0" encoding="UTF-8"?>
<biblioteca>
 <livro>
<titulo>O Senhor dos Anéis</titulo>
<autor>J.R.R. Tolkien</autor>
<ano>1954</ano>
 </livro>
 <livro>
<titulo>1984</titulo>
<autor>George Orwell</autor>
<ano>1949</ano>
 </livro>
 <livro>
<titulo>O Pequeno Príncipe</titulo>
<autor>Antoine de Saint-Exupéry</autor>
<ano>1943</ano>
 </livro>
</biblioteca>

Markdown: Linguagem de marcação leve, utilizada para formatar texto de forma simples e fácil de ler. É popular em plataformas como GitHub para a criação de documentos e README files. Link da documentação

# Este é um título de nível 1

## Este é um título de nível 2

* Este é um item em uma lista não ordenada
* Este é outro item

1. Este é um item em uma lista ordenada
2. Este é outro item

**Este texto está em negrito.**

*Este texto está em itálico.*

[Este é um link para o Google](https://www.google.com.br)

> Esta é uma citação.

Linguagens de Programação

Definição: Conjuntos de instruções que permitem criar programas que executam tarefas específicas. Elas possuem uma sintaxe e semântica bem definidas, e são usadas para criar algoritmos e lógica complexa.
Objetivo: Criar software que automatiza tarefas, processa dados e interage com o usuário.

Exemplos:

Python: Linguagem de alto nível, conhecida por sua sintaxe simples e legível. É utilizada em diversas áreas, como desenvolvimento web, ciência de dados e machine learning. Link da documentação

numero = int(input("Digite um número: "))

if numero % 2 == 0:
print("O número é par.")
else:
print("O número é ímpar.")

Java: Linguagem orientada a objetos, amplamente utilizada em desenvolvimento de aplicativos empresariais e Android. Link da documentação

public class HelloWorld {
public static void main(String[] args) {
  System.out.println("Hello, World!");
}
}

JavaScript: Linguagem interpretada, principalmente utilizada para criar interatividade em páginas web. Link da documentação

// Função para adicionar um item ao carrinho
function adicionarAoCarrinho(nome, preço) {
 // Encontrar a lista de itens no HTML
 const listaDeItens = document.getElementById('lista-de-itens');

 // Criar um novo elemento de lista (li)
 const novoItem = document.createElement('li');

 // Adicionar o nome e o preço ao item
 novoItem.textContent = `${nome} - R$ ${preço.toFixed(2)}`;

 // Adicionar o novo item à lista
 listaDeItens.appendChild(novoItem);

 // Atualizar o total
 atualizarTotal();
}

// Função para calcular e atualizar o total do carrinho
function atualizarTotal() {
 const itens = document.querySelectorAll('#lista-de-itens li');
 let total = 0;

 itens.forEach(item => {
const preçoTexto = item.textContent.split(' - ')[1].replace('R$ ', '');
const preço = parseFloat(preçoTexto);
total += preço;
 });

 const elementoTotal = document.getElementById('total');
 elementoTotal.textContent = `Total: R$ ${total.toFixed(2)}`;
}

// Exemplo de uso:
adicionarAoCarrinho('Camiseta', 29.99);
adicionarAoCarrinho('Calça', 59.90);

Bibliotecas

Definição: Coleções de código pré-escrito que podem ser reutilizadas em diferentes projetos. Elas oferecem funcionalidades específicas, como manipulação de dados, criação de interfaces gráficas e acesso a serviços externos.
Objetivo: Agilizar o desenvolvimento de software, evitando a reescrita de código comum.

Exemplos:

NumPy: Biblioteca Python para computação científica, oferecendo suporte a arrays multidimensionais e operações matemáticas. Link da documentação

import numpy as np

# Criando duas matrizes
matriz_a = np.array([[1, 2], [3, 4]])
matriz_b = np.array([[5, 6], [7, 8]])

# Multiplicando as matrizes
produto = np.dot(matriz_a, matriz_b)

print(produto)

React: Biblioteca JavaScript para construção de interfaces de usuário, popularizada por sua abordagem declarativa e eficiente. Link da documentação

import React, { useState } from 'react';

function Contador() {
 const [contador, setContador] = useState(0);

 const incrementar = () => {
setContador(contador + 1);
 };

 const decrementar = () => {
setContador(contador - 1);
 };

 return (
<div>
 <p>Você clicou {contador} vezes</p>
 <button onClick={incrementar}>Incrementar</button>
 <button onClick={decrementar}>Decrementar</button>
</div>
 );
}

export default Contador;

jQuery: Biblioteca JavaScript que simplifica a manipulação do DOM (Document Object Model) e a criação de efeitos visuais, ela e inserida no código HTML, como demonstrado na linha 5 do código abaixo. Link da documentação

<!DOCTYPE html>
<html>
<head>
 <title>Exemplo jQuery</title>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
 <button id="meuBotao">Clique aqui</button>
 <p id="meuParagrafo">Texto original</p>

 <script>
$(document).ready(function(){
 $("#meuBotao").click(function(){
  $("#meuParagrafo").text("Texto alterado pelo jQuery!");
 });
});
 </script>
</body>
</html>

Frameworks

Definição: Estruturas que fornecem uma base para o desenvolvimento de aplicativos. Eles oferecem um conjunto de ferramentas, bibliotecas e convenções que guiam o desenvolvimento de software.
Objetivo: Acelerar o desenvolvimento de aplicativos, fornecendo uma estrutura pré-configurada e um conjunto de boas práticas.

Exemplos:

Django: Framework Python para desenvolvimento web em Back-end, oferecendo um conjunto de ferramentas para criar sites e aplicativos web de forma rápida e eficiente. Link da documentação

# meu_blog/blog/models.py

from django.db import models

class Post(models.Model):
titulo = models.CharField(max_length=200)
texto = models.TextField()
data_criacao = models.DateTimeField(auto_now_add=True)

def __str__(self):
  return self.titulo

React Native: Framework para desenvolvimento de aplicativos móveis multiplataforma, utilizando JavaScript e React. Link da documentação

import React, { useState } from 'react';
import { View, Text, Button } from 'react-native';

const App = () => {
 const [count, setCount] = useState(0);

 return (
<View>
 <Text>Você clicou {count} vezes</Text>
 <Button title="Incrementar" onPress={() => setCount(count + 1)} />
 <Button title="Decrementar" onPress={() => setCount(count - 1)} />
</View>
 );
};

export default App;

Angular: Framework JavaScript para desenvolvimento de aplicações web, promovendo uma arquitetura modular e escalável. Link da documentação

Angular no Typescript:

import { Component } from '@angular/core';

@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.css']
})
export class AppComponent {
 title = 'Minha Lista de Tarefas';
 tarefas: string[] = [];

 adicionarTarefa(novaTarefa: string) {
this.tarefas.push(novaTarefa);
 }

 removerTarefa(indice: number) {
this.tarefas.splice(indice, 1);
 }
}

Angular no HTML:

<div>
 <h1>{{ title }}</h1>
 <input type="text" [(ngModel)]="novaTarefa">
 <button (click)="adicionarTarefa(novaTarefa)">Adicionar</button>
 <ul>
<li *ngFor="let tarefa of tarefas; let i = index">
 {{ tarefa }}
 <button (click)="removerTarefa(i)">Remover</button>
</li>
 </ul>
</div>

Resumindo:

Linguagens de marcação: Descrevem a estrutura e apresentação de dados.
Linguagens de programação: Cria algoritmos e lógica complexa.
Bibliotecas: Oferecem funcionalidades específicas para serem reutilizadas, deixando o projeto com menos tempo de execução e com custo mais baixo.
Frameworks: Fornecem uma estrutura para o desenvolvimento de aplicativos, com repidez.

Qual a relação entre eles?

As linguagens de marcação são usadas para definir a estrutura de documentos, que podem ser processados por programas escritos em linguagens de programação.
As linguagens de programação utilizam bibliotecas para realizar tarefas específicas, como manipulação de dados ou acesso a serviços externos.
Os frameworks são construídos sobre linguagens de programação e utilizam bibliotecas para fornecer uma estrutura completa para o desenvolvimento de aplicativos

Qual a diferença entre biblioteca e framework?

Quando usar cada um?

Linguagens de marcação: Para criar documentos com estrutura e conteúdo.
Linguagens de programação: Para criar algoritmos e lógica complexa.
Bibliotecas: Para reutilizar código e acelerar o desenvolvimento.
Frameworks: Para construir aplicativos rapidamente, seguindo uma estrutura pré-definida.

Escolhendo a ferramenta certa:

A escolha da ferramenta certa depende do projeto a ser desenvolvido. É importante considerar fatores como a complexidade do projeto, o tempo disponível, os recursos disponíveis e a experiência da equipe.

Concluindo: As linguagens de marcação são utilizadas em quase todos os tipos de desenvolvimento, pois ela deixa o documento bem estruturado, as linguagens de programação são as principais tecnologias utilizadas em desenvolvimento, elas deixam sua aplicação mais robusta e profissional, as bibliotecas vieram para reduzir tempo e custo em projetos juntamente com os frameworks, use cada um conforme a exigência de seu projeto, e para você que está iniciando na programação e não sabe por onde começar, aqui vai uma dica: HTML5, CSS3 e JavaScript.

#python #JavaScript #Java #Numpy #React #Jquery #Django #ReactNative #Angular