Front -End #001 — Iniciando

Uma historia rápida

Da criação da ARPANET em 1969 até a Internet que temos hoje lá se vão quase cinquenta anos. Do protocolo TCP, sua junção com o IP e inclusão de Hipertexto com a criação da WWW por Tim Berners-Lee e a evolução até o nosso padrão atual conhecido como HTML 5 a parceria com o CSS e Javascript. Tríade com a qual hoje podemos desenvolver para qualquer dispositivo.

Os atores dessa historia

Os três atores dessa historia são responsáveis por uma boa parte de tudo que acontece na internet. Esse texto que você está lendo, um vídeo do Youtube, um jogo do Facebook. Tudo isso está sendo renderizado com:

HTML — Linguagem de marcação

CSS — Linguagem de estilo

Javascript — Linguagem de interatividade

HTML (HyperText Markup Language) em ação

O HTML possui <tags> que delimitam inicio e </tags> que delimitam o fim de um contexto. Assim criamos blocos de conteúdo que o navegador mostra de forma organizada. Assim como um vocabulário de palavras simples, no HTML é possível criar uma pagina com poucas tags.

Vamos escrever texto em um editor?

Para um primeiro contato podemos usar qualquer ferramenta que receba texto. No windows pode ser o bloco de notas, no GNU/Linux o gedit, nano, VIM. Podemos usar ferramentas com uma interface gráfica (IDE), vou deixa-las para um segundo momento. Vamos optar pelo própria internet usando o JS Bin ele possui tudo que precisamos no momento.

Pausa para o Emmet

Uma ferramenta bem útil na criação de HTML é o Emmet que é derivado de uma convenção chamada Zencoding. Ele abrevia código e isso traz agilidade na hora de escrever HTML.

Olá mundo!

html:5>h1{Olá mundo!}

Temos um “Olá mundo!” em HTML 5 feito com o Emmet, agora teste as tags: h1, h2, p, span, a e img.

Cascading Style Sheets rápidinho

Vamos criar um estilo genérico para todos os elementos somente para entender o contexto de blocos.

*{border: solid 1px red;}

Classes x Identificadores

Em CSS é convencionado que uma classe representado por “.” e descrito pelo atributo class possa ser usada mais de uma vez em uma tela e um identificador representado por “#” e descrito pelo atributo id apenas uma vez.

Juntando tudo

html:5>(div#topo)+(div#conteudo>h1.letra-verde{Olá mundo!})+(div#rodape)

Nosso estilo inicial

Vamos trabalhar o estilo, já entendemos a marcação HTML e agora vamos atacar as tags com CSS.

{text-align:center; margin: 0; padding: 0;}
#topo{background:red; color:#fff;padding: 5px;}
#conteudo{background:#fff;padding:10px 0}
#rodape{background:#000;color: red; padding: 30px;}

Não é heresia usar o VSCode :D

Sim, a Microsoft conseguiu fazer uma IDE, com recursos bons para desenvolvimento de front e até mesmo integração ao Git. Então faça o download do Visual Studio Code para que possamos seguir.

Dividir para conquistar

Já entendemos um pouco o nosso código, vamos organizar cada coisa em seu lugar para deixar o desenvolvimento mais fluido. Localmente vamos organizar nossos arquivos e pastas. Vamos criar uma pasta chamada Estudo, dentro dela criar uma com o nome Inicio. Nela criar duas outras uma com o nome css, outra img. Agora criar um arquivo chamado index.html. Ficamos com essa estrutura:

Inicio/
├── css
├── img
└── index.html

Salve uma imagem, dentro da pasta /img. Crie um arquivo chamado estilo.css com o conteúdo do JS Bin:

{text-align:center; margin: 0; padding: 0;}
#topo{background:red; color:white;padding: 5px;}
#conteudo{background:#fff;padding:10px 0}
#rodape{background:#000;color: red; padding: 30px;}

No arquivo index.html repita o código gerado no tópico “Juntando Tudo”

Aumente seu Ki(Chi)

Pratique com:

Listas de elementos HTML

Listas de elementos CSS

Se você não sabe onde quer ir qualquer caminho serve

Front -End #002— A Missão

Vamos revisar o que fizemos antes, para então começarmos. Falamos da historia da web e chegamos aos atores que atuam nela até hoje. O HTML, CSS e Javascript. Mostramos onde e como escrever código. Conhecemos editores e começamos um pequeno framework.

#WTF is framework

Um framework (ou biblioteca), em desenvolvimento de software, é uma abstração que une códigos comuns entre vários projetos de software provendo uma funcionalidade genérica. Um framework pode atingir uma funcionalidade específica, por configuração, durante a programação de uma aplicação. Framework — Wikipédia, a enciclopédia livre https://pt.wikipedia.org/wiki/Framework

Existem frameworks HTML, CSS, Javascript, PHP, Ruby, Python, Java, HTML + CSS, HTML + CSS + Javascript, Javascript + PHP e por ai vai.

Podemos citar frameworks como:

960grid — HTML + CSS adotado pelo Twitter Bootstrap;

jQuery — Javascript usado para manipulação de DOM na tela;

Bootstrap — HTML+CSS+Javascript que hoje é quase um padrão;

AngularJS — Javascript que estende as funcionalidades das tags HTML;

RubyonRails — Ruby também MVC e REST usado como modelo padrão na criação de quase todos os frameworks de back end existentes hoje;

Codeigniter — PHP com padrão MVC full stack;

Django — Python MVT;

Spring — Java que trabalha com padrão inversão de controle.

Existem muitos outros, vamos tentar abordar todos eles. Sim! Um pouco de cada um durante a nossa conversa.

Vamos twitar com bootstrap

O twitter conseguiu com um projeto simples conquistar a web. Não, não estou falando da sua rede social de 140 caracteres, mas do padrão de design web responsivo conhecido como Bootstrap. Atualmente está indo rumo a versão 4 e possui um concorrente que é o Material Design da Google. Mas, as versões 2 e a 3 ficaram bem consolidadas nos períodos em que foram feitas. Você deve está perguntando: — Você não vai falar do 960grid e do jQuery? Vou, os dois foram adotados dentro do Bootstrap.

Entenda os blocos e o grid

O HTML versão 5 incorporou nomes para alguns blocos por serem quase um padrão como o section, nav, aside, header, footer, main e outros.

Dentro desses blocos distribuímos e organizamos conteúdo semanticamente o Emmet é ajudado por isso body>header+main+footer

…continua!