Atualmente somos cercados de inúmeras tecnologias e ferramentas para desenvolvimento web, onde cada uma possui seus recursos e características possibilitando a construção páginas web ricas em conteúdo e interatividade.
Hoje para quem pesquisar na Internet na procura de fontes, tutoriais e cursos focados em desenvolvimento Web, irá se deparar com as seguintes tecnologias: ASP.NET MVC, AngularJS, JQuery, Bootstrap, JavaScript, HTML5, CSS3 e etc.
É muito comum nesse momento surgir a seguinte pergunta: Por onde começar? Sabemos que temos diversas tecnologias para desenvolvimento Web, porém, a maioria delas possui um PRÉ-REQUISITO que dependem do conhecimento de outras linguagens e ferramentas. A ideia desse post é mostrar por onde devemos começar para iniciarmos corretamente o nosso aprendizado no desenvolvimento Web.
Linguagens pela qual devemos começar (na sequência)
Para aqueles que estão lendo esse post, vamos saber agora qual é a linguagem na qual devemos começar para aprendemos desenvolvimento Web:
1) Linguagem HTML
Essa é a primeira linguagem que qualquer indivíduo (que queira aprender a desenvolver páginas web) deve OBRIGATORIAMENTE começar. O HTML (HyperText Markup Language) é uma linguagem de marcação onde através de elementos chamados de TAGS montamos e estruturamos uma página Web, permitindo a inserção e visualização de elementos como textos, imagens , vídeos, links, áudios e etc. (atualmente o HTML encontra-se na versão 5, conhecida como HTML5). Vejamos abaixo uma estrutura básica do HTML:
<html>
<head>
<title>Minha primeira página HTML</title>
</head>
<body>
<h1>Minha primeira página em HTML</h1>
<br/>
<p align="justify">Está é uma simples página escrita em HTML</P>
</body>
</html>
Precisamos saber que uma página Web é formada e constituída por diversas linguagens e frameworks que contribuem para o seu funcionamento e comportamento, ou seja, o HTML não é a única linguagem que constitui uma página Web, mas, é a única que estrutura e cria uma página (pois sem ela, não é possível utilizar outras linguagens que serão mostradas logo a seguir).
Vamos conhecer agora a próxima linguagem que faz parte de uma página Web.
2) CSS
Aprendemos que com o HTML5 criamos e estruturamos uma página Web permitindo a visualização de elementos dentro da mesma. Agora, para que serve esse tal de CSS? O HTML5 possui uma série de tags onde cada uma delas possui finalidades específicas (Exemplo: A tag <img> é responsável por exibir uma imagem na página, assim como a tag <video> é responsável ela exibição de um vídeo e etc.). Todas as tags do HTML5 possuem por padrão um comportamento e formatação, porém, às vezes torna-se necessário PERSONALIZAR essa formatação e seu comportamento, como por exemplo: Gostaria que em minha página HTML5 todos os elementos do tipo <div> tivessem um comportamento “responsivo”, adaptando-se ao tamanho da tela do navegador. Para personalizamos o comportamento, visualização e estilo de um componente no HTML5 usamos o que chamamos de CSS.
O CSS (Cascading Style Sheets) nada mais é do que um conjunto de parâmetros que permitem definir um estilo visual e comportamento personalizado para elementos de uma página HTML5 (atualmente o CSS encontra-se em sua terceira versão, chamada normalmente de CSS3). O CSS3 funciona como se fosse uma “MAQUIAGEM” para o site em HTML5. Vejamos alguns comandos básicos do CSS3:
body {
font-family:Verdana;
}
/*Largura responsiva */
div {
width:100%;
max-width:560px;
height:auto;
padding:10px;
}
Com o HTML5 e CSS3 conseguimos construir o layout da nossa página, deixando a aparência do nosso site mais moderna, responsiva e intuitiva, porém, ainda essas duas linguagens NÃO SÃO O SUFICIENTES para as necessidades de uma página Web atualmente (pois como disse, uma página Web envolve diversas tecnologias, e o HTML5 e CSS3 são as duas principais mas não as únicas).
Existe uma outra linguagem de programação, de grande importância para o funcionamento de uma página Web bastante popular, flexível e poderosa, que contribui para o funcionamento, processamento e interatividade de uma página. Vamos conhecer ela logo a seguir.
3) JavaScript
O JavaScript é uma linguagem de programação que tem um papel muito importante dentro de uma página Web: Ela é responsável pelo processamento e interativamente.
Aprendemos que com o HTML5 e CSS3 podemos construir uma página Web visualmente agradável e moderna. Vamos entender agora a importância do JavaScript.
Suponhamos que você precise criar um formulário de cadastro em uma página Web, até ai você consegue construir usando o HTML5 e o CSS3. O layout que construimos usando o HTML5 e CSS3 é puramente “estático”, não possui nenhum processamento dentro de uma página. Sabemos que no formulário de cadastro são necessários processamentos para realizar validações de dados e envio de informações, algo que o HTML5 e CSS3 não faz (como por exemplo: Nos campos que foram preenchidos analisar se os dados presentes dentro deles estão válidos, reportando para o usuário algum erro, se houver).
Para esse tipo de tarefa, usamos a linguagem de programação JavaScript, que executa comandos de forma automatizada e realiza processamentos dentro da página para as mais diversas finalidades e situações (como verificar dados preenchidos em caixas de texto e etc). Vejamos uma sintaxe básica do JavaScript:
var data = document.getElementById("txtdata").value;
//Verifica se o valor digitado no campo data é válido
var d = moment(data,'D/M/YYYY');
if(d == null || !d.isValid())
{
alert('A data informada está inválida.');
return false;
}
Com essas três linguagens já somos capazes de construir páginas Web interativas e atraentes, porém, sabemos que para as necessidades de desenvolvimento Web, as vezes somos obrigados a aprender mais linguagens e ferramentas, por isso, mostrarei mais alguns frameworks importantes que complementarão o funcionamento e expansão de sua página.
Frameworks para desenvolvimento Web
O HTML5, CSS3 e JavaScript são as três linguagens principais que todo indivíduo precisa saber para desenvolver uma página Web (pois como elas, já somos capazes de construir uma página Web), mas, precisamos saber que atualmente são utilizados frameworks de desenvolvimento Web que, como PRÉ-REQUISITO, exige o conhecimento básico das três linguagens mostradas agora (principalmente o JavaScript). Irei mostrar alguns frameworks para desenvolvimento muito utilizados hoje em dia:
4) jQuery
O framework jQuery é muito interessante e praticamente presente em 70% das páginas de desenvolvimento Web no mundo todo. Esse framework desenvolvido em linguagem JavaScript nada mais é do que um conjunto de funções que facilitam e agilizam a construção de códigos, com uma sintaxe mais simples, robusta e flexivel. Uma das características marcantes desse framework é a eliminação da incompatibilidade de comandos JavaScript entre navegadores (ou seja, para executarmos antigamente certas tarefas em JavaScript era necessário construir diversas versões diferentes dos comandos, pois, para cada navegador Web as instruções e comandos JavaScript eram diferentes, algo que o jQuery já elimina), tornando-o “Multi-navegador”.
5) Angular JS
O AngularJS é um framework atualmente mantido pela Google (também desenvolvido em JavaScript) que facilita e estrutura de uma maneira fácil a construção de SPA (Single-Page Applications). Ele trabalha com um padrão de desenvolvimento atualmente utilizado em construção de sistemas chamado MVC (Model-View-Controller), que consiste em separar a parte responsável pela renderização da página da parte responsável pelo processamento e execução de tarefas, tornando mais fácil a manutenção e expansão de um sistema.
Bom pessoal, com as linguagens HTML5, CSS3 e JavaScript (assim também com os frameworks jQuery e AngularJS) já somos capazes de construir deste simples páginas até sistemas Web oferecendo funcionalidades interessantes para o usuário.
Ainda existem algumas linguagens que são importantes também para o desenvolvimento Web, que normalmente são processadas no lado servidor (conhecido pelo nome de BACK-END) como ASP.NET, PHP e etc., porém, a utilização delas dependerá muito do tipo do sistema Web que você estará construindo. Isso pode ser assunto para um próximo POST.
Por hoje é só pessoal,
Um forte abraço para todos…