Nesse artigo vamos introduzir um pouco sobre o front-end, após discutirmos a divisão entre front-end back-end, falarmos sobre HTTP e HTTPS onde se tratava do transporte dos dados, agora vamos falar um pouco sobre o front-end de uma maneira mais específica.

 

Como entendemos front-end é a frente de nossa aplicação, é o mágico que mostra as mágicas que o back-end produz.

 

HTML 

 

A estrutura por este mágico, é o HTML, uma linguagem de marcação, onde por definição:

 

“HyperText Markup Language” traduzindo, “Linguagem de Marcação de Hipertexto”.

 

Ela foi a responsável em organizar como são mostrados os conteúdos na internet, sua padronização é em forma de tabelas.

 

Basicamente é uma linguagem onde você organiza tamanhos e formas de sequências de  tabelas com conteúdos escritos.

 

HTML uma linguagem que hoje pode ser irreconhecível pelo tanto de “cosméticos” que utilizam em cima dela, que para identificarmos facilmente a melhor forma é ver imagens de sites antigos, onde era explícito aqueles vários retângulos com escritos em seu interior.

html css json xml

É a linguagem porta de entrada para todos que estão iniciando na programação, pois é de fácil entendimento e no meu caso, achei uma linguagem de retorno muito rápido para o mundo real.

 

Pois com poucas linhas de código podemos ver o resultado abrindo o arquivo .html em qualquer navegador, trazendo assim um amplo sentimento de satisfação.

 

As aplicações em HTML são inúmeras, podendo ser trabalhada em qualquer tipo de editor de texto, desde um .txt do windows até uma IDE de Visual Basic da Microsoft.

 

É construída por regras simples onde suas 3 subdivisões principais são <head>, literalmente a cabeça do código, onde é escrito todas as regras que ele seguirá, arquivos extras que ele precisa ler antes de acessar o código.

 

Em seguida vem o <body>, traduzindo seria o corpo, onde está o conteúdo, que quer que seja mostrado na tela, finalizando no <footer> onde é o rodapé da página, utilizado para assinatura do desenvolvedor, formas de contatos.

 

As suas versões foram poucas, onde o HTML 4 ficou muitos anos em atividade, e só a pouco tempo com o novo HTML 5, onde trouxe mais recursos para manipulação de multimídia, juntamente com algumas novas ferramentas para ajudar no visual apresentado pela linguagem.

 

Por ser uma linguagem simples e bastante manual, onde se precisa muita escrita no código, foram surgindo outras ferramentas para auxiliar o HTML a ter mais formas de ser apresentada, como o CSS.

 

CSS

 

Utilizando a definição pura, Cascading Style Sheed, traduzindo Planilha em Estilo Cascata, basicamente é uma linguagem, mas pode-se dizer que é uma ferramenta de estilo para o HTML, com ele foram criados muitas formas de estilo para o HTML.

 

Onde trazia infinitas maneiras de transformar a cara do HTML em algo mais fluido aos olhos de quem navega, pois o CSS, consegue trazer formas e efeitos nas tabelas, cores e efeitos de cores, troca de fontes, formas de mostrar imagens e vídeos.

 

Através de um arquivo separado do HTML, se cria um .css onde nele vai constar todos os novos estilos que você gostaria de usar em todo o código HTML, trazendo assim a facilidade e otimização de tempo.

 

Pois entendendo melhor a funcionalidade do CSS, você ao invés de escrever a linha extensa de códigos para dizer que uma tabela deve ter tamanho, cor, forma, efeito manualmente tabela por tabela, no arquivo .css você pode automatizar o serviço.

 

Criando classes e atributos detalhados com todas as configurações que quer ser mostrada, que são chamadas pelo arquivo .html, portando o código html pode ser trocado linhas de muitos caracteres em apenas uma palavra.

 

Hoje HTML e CSS uma analogia que poderíamos utilizar seria que hoje o HTML e CSS estão interligados de uma tal forma quanto o MS DoS se interligou com o MS Windows, não se aprende HTML sem aprender junto CSS.

 

Como mostra na figura, se cria 2 arquivos, index.html e um estilo.css. Utilizando os passos demonstrados:

 

html css json xml

 

1- No arquivo estilo.css se cria estilos para serem utilizados no arquivo html;

2- Se cria uma classe, no caso do exemplo foi “postagens”;

3- Aciona o arquivo .html;

4- No arquivo .html, que é onde se mostra o conteúdo para o usuário;

5- Ao invés de escrever todas as características que se deve ter como espaçamento, alinhamento de texto, cor da letra, margem do texto, fundo do texto, apenas se utiliza o nome da classe criada, no passo 2;

6- Utilizando a classe, no caso postagens, toda a informação da classe é utilizada na tabela, podendo ser utilizado em todas as tabelas necessárias, fazendo assim uma otimização de 5 linhas de código em apenas uma palavra.

 

Tudo isso:

 

{

padding-top: 10px;

text-align: justify;

color:black;

margin-bottom: 5px;

background: #d6d6d6;

}

se resume a

“postagens”

 

XML

 

Outra linguagem de marcação utilizada é a XML, onde sua definição é Extensible Markup Language, traduzindo Linguagem de Marcação Extensiva, entendendo melhor é uma linguagem de marcação que define um conjunto de regras para codificação de documentos.

 

Diferente do HTML que se tem os códigos, tags predefinidas, o XML você cria suas tags seus comandos, claro que utilizando de boas práticas, fazendo com que mostre as informações de forma clara.

 

A estrutura do XML é feita pelo <prolog>, onde se se insere as regras utilizadas pelo código, a parte administrativa e o <body> que é a parte do conteúdo e estrutura.

 

XML é muito utilizado para banco de dados, pois pode estruturar de forma organizada da forma que o desenvolvedor prefira, podendo ser compatível com qualquer plataforma.

 

Uma grande utilização da linguagem é a assinatura digital o que o mantém vivo entre a concorrência de outras linguagens.

 

JSON

 

É um tipo de formato de representação de dados como uma das funções do XML, porém apenas isso. É programado através do JavaScript, onde vem a definição, JavaScript Object Notation, traduzindo Notação de Objeto em JavaScript.

 

JSON pode transportar informações entre mensagens HTTP, é uma linguagem onde se tem sensibilidade entre maiúsculas e minúsculas, sua escrita é mais abreviada, fazendo com que seja mais rápida e econômica no processamento, comparada a XML.

 

Por esse motivo, JSON é muito mais utilizado que o XML, na troca de informações entre bancos de dados.

 

html css json xml

 

Agora concluindo meu entendimento sobre essas linguagens de entrada para o front-end.

 

Para o entendimento mais a fundo das linguagens um portal w3schools, existe os tutoriais sobre todos os comandos em HTML, CSS, XML, JSON e muito mais.

 

O aprendizado do HTML e CSS é muito relevante para todos que estão iniciando pois é quando se pode entrar em contato com as IDEs (ambiente de desenvolvimento integrado), onde se aprende na prática referências como classes, atributos que são amplamente utilizados nas linguagens de programação.

 

Além de ser imprescindível para qualquer programador, saber, pois são as linguagens que vão mostrar seu conteúdo para as pessoas, já o XML e JSON, são um pouco mais avançados pois é onde se faz as comunicações entre bancos de dados, e back-end, onde se pode utilizar artifícios no início da carreira de programação, como é o que estou utilizando hoje.

 

Para ter um desenvolvimento maior na web, podemos utilizar CMS, onde o mais conhecido e utilizado na internet é o wordpress, onde se pode utilizar os conceitos de HTML e CSS, com o XML e JSON automatizados pela ferramenta, para se comunicar com os bancos de dados.

 

Assim finalizamos a primeira camada do front-end, a camada apresentada para o usuário, podemos terminar utilizando a analogia que estamos utilizando referente ao front-end e back-end, como HTML/CSS serem o mágico, XML e JSON a cartola, e o coelho que é a mágica propriamente dita seria o back-end.

front-end magica