Conceitos fundamentais em bancos de dados

Nesse post apresentarei alguns conceitos utilizados no estudo de bancos de dados. Farei isso de forma resumida, enxuta mas eficiente (assim espero) mas ainda serão apenas resumos então dependendo do seu apetite você terá que buscar em livros ou outros meios aprofundamento nos assuntos aqui resumidos.

Relacionamentos e Chaves

Chaves:

Primary key: A chave primária é uma coluna da tabela onde cada linha terá um valor único, ela será declarada formalmente no SGBD como sendo Primary Key e estará relacionada com outras colunas da tabela;

Foreign key: A chave estrangeira é a chave primária de uma tabela A em uma tabela B, através dela haverá ligação entre duas tabelas distintas;

Chave composta: A chave composta usa os mesmos conceitos apresentados acima, porém invés de ser representada com uma única coluna, é representada usando uma ou mais, um conjuntos de colunas da tabela. Ela pode ser útil quando não há uma única coluna que seja fiável para representar bem uma tabela. 

Obs.: Embora você possa escolher qualquer coluna de sua tabela (desde que se enquadre no que foi explicado) para que seja chave primária é altamente recomendado que você utilize colunas construídas com a utilidade única de servirem de Primary Key, isso evitará problemas que poderão aparecer com o uso do banco de dados.

Vejamos uma ilustração que mostra duas tabelas com suas chaves e relação:

Relacionamentos:

• 1 para 1: Nesse tipo de relação para cada registro em uma determinada tabela A existe apenas 1 registro relacionado na tabela B. Podem haver registros em A sem relação em B;
• 1 para muitos: Para cada registro de A podem haver um ou mais registros relacionados em B;
• Muitos para Muitos: Para cada registro de A pode haver um ou mais correspondentes em B e o contrário também acontece.

Para representar os relacionamentos foram criados diagramas chamando  pé de galinha, isso por conta da semelhança. Vejamos na imagem abaixo como cada relacionamento é representado por diagramas pé de galinha:

Anomalias de dados

Anomalias de dados são problemas que podem ocorrer em tabelas que não tenham sido bem construídas, assim como na construção de um prédio se o projeto não tiver sido bem elaborado em algum momento da construção haverá problemas na implementação em projetos de bancos de dados isso também ocorre porém com a manipulação dos dados. Anomalias de dados são comuns em tabelas "faz tudo" tabelas muito grandes dedicadas a muitas finalidades.

Existem três tipos de anomalias:

1. Anomalia de inserção;
2. Anomalia de exclusão;
3. Anomalia de alteração.

Normalização de Dados

A normalização de dados foi criada em 1970 e existem 5 formas normais, 5 princípios que devem ser seguidos para evitar problemas como as anomalias vistas anteriormente. Dentre as vantagens de se implementar essas técnicas estão:

• Evitar anomalias;
• Facilitar a manutenção;
• Maximizar a performance;
• Manter a integridade dos dados.

Segue abaixo as 5 formas normais:

   1 FN:

• Cada linha da tabela deve representar um único registro;
• Cada célula da tabela deve conter um único valor.

   2 FN:

• Necessita que a 1FN tenha sido aplicada;
• Atributos não chave devem depender de alguma chave da tabela.

   3FN:

• Necessita que a 2FN já tenha sido aplicada;
• Atributos não chave devem depender da chave primária da tabela.

   4FN e 5FN:

• Separam em novas tabelas valores que ainda estejam redundantes;
• Necessário que a tabela já esteja na 3FN.

FONTES:

Curso gratuito de SQL Softblue: www.softblue.com.br/site/curso/id/3/CURSO+DE+SQL+COMPLETO+BASICO+AO+AVANCADO+ON+LINE+BD03+GRATIS

Elmasri, Ramez: Sistemas de banco de dados ISBN: 978-85-7936-085-5

Criando um banco de dados no PostgreSQL utilizando pgAdmin

Vimos em tutoriais anteriores como instalar o PostgreSQL e o pgAdmin no Ubuntu e similares, vimos também como criar conexões e tablespaces. Hoje nesse post veremos como criar um banco de dados no postgre utilizando o pgadmin.

No PostgreSQL o banco de dados armazena os dados de forma lógica enquanto o tablespace diz respeito a armazenagem física dos dados, assim para criar um BD (banco de dados) precisamos utilizar um tablespace. Se você deseja criar seu próprio tablespace acesse o link para nosso último tutorial ualaslimadev.blogspot.com/2017/10/criando-uma-tablespace-no-postgresql.html.

   1 - primeiro abra o pgadmin;

   2 - Realize a conexão com o servidor (Caso não saiba como fazer visite o link ualaslimadev.blogspot.com.br/2017/10/criando-uma-nova-conexao-com-o-pgadmin.html);

   3 - Clique com o botão direito do mouse sobre "Databases", localizado na coluna esquerda da tela do pgadmin. No menu que se abre clique sobre "New Database...";

   4 - na janela que se abriu na primeira guia "Properties" preencha os campos:

• Name = "nome que você quer dar ao banco";
• Owner = "Na seta no fim do campo clique e escolha o usuário dono do banco, se você não criou nenhum outro você certamente terá apenas o usuário "postgres" selecione-o".

   5 - Agora vá até a guia "Definition" e lá no campo "tablespace" escolha qual armazenará seu BD, caso você tenha nos acompanhando nos tutoriais que antecedem este, escolha o tablespace criado por você;

   6 - Caso deseje vá até a guia "SQL" e veja o código SQL gerado e em seguida clique em "OK".

Pronto, seu banco de dados foi criado. Caso ele ainda não esteja aparecendo clique com o botão direito do mouse sobre "Databases" e em seguida sobre "Refresh".

FONTES:

Canal no Youtube da Marta Talitha: https://www.youtube.com/channel/UCLzqxqYAetFnk0F0S_01Lag 

Criando uma tablespace no PostgreSQL

No PostgreSQL os bancos de dados utilizam tablespaces para armazenar seus dados. Há já tablespaces criadas  pelo próprio SGBD que podemos utilizar, aqui veremos como criar uma nova tablespace.

Vamos fazer isto utilizando o terminal do Ubuntu (ou similar) e o pgAdmin, se você ainda não instalou o pgAdmin e ou o postgre veja o post: https://ualaslimadev.blogspot.com.br/2017/10/instalacao-do-postgresql-no-ubuntu-e.html que ensina como fazer.

Para esse tutorial também é necessário que você tenha uma conexão estabelecida com o servidor, aprendemos a criar uma conexão no nosso último post https://ualaslimadev.blogspot.com/2017/10/criando-uma-nova-conexao-com-o-pgadmin.html .

Observados os parágrafos acima abra o pgadmin e observe na área de trabalho do programa  na coluna esquerda o "Server Groups", clique sobre ele ou sobre o botão "+" à sua frente para que uma árvore hierárquica se abra. Entre os "filhos" exibidos está "servers" que contém a conexão que criamos anteriormente. Abrindo essa conexão (de forma análoga ao feito com  "Server Groups") encontraremos entre outras "Databases" que já possui um BD criado automaticamente e um pouco abaixo temos "Tablespaces". Agora vamos passo a passo criar nosso novo tablespace:

   1 - O primeiro passo é criarmos um diretório e atribui-lo ao usuário postgres. Usaremos um exemplo aqui, você pode fazer os passos desse tutorial criando uma pasta em outro local com outro nome se assim desejar desde que nos comandos e passos mostrados aqui você faça as alterações necessárias. Criaremos nossa pasta pelo terminal, então minimize a janela do pgAdmin3 e abra o terminal do seu sistema:

•  Agora com o terminal aberto use o comando a seguir para irmos até a pasta raiz do sistema:
• cd \
• Vamos criar nosso diretório onde ficará nosso tablespace dentro do diretório tmp, se você usar o comando "ls" os diretórios e arquivos dentro do diretório em que você está serão exibidos, entre eles o tmp. Para acessar, ou entrar no tmp use o comando:
• cd tmp
• Dentro de tmp vamos criar uma pasta chamada teste com o comando:
• mkdir teste
• Se usarmos o comando: ls -lart /tmp/teste serão listados os usuários com direito de acesso a pasta teste. Observe que o usuário "postgres" não aparece na relação;
• Vamos alterar o usuário dono do diretório teste para postgres. Faremos isso com o seguinte comando:
• sudo chown -c -R postgres: /tmp/teste      Se a senha for requisitada insira e confirme com enter. Você pode utilizar o comando do tópico anterior para confirmar que agora o usuário postgres tem acesso a pasta teste.

Agora com a pasta criada e pronta para uso do SGBD vamos voltar para o PgAdmin.

   2 - No PgAdmin clicando com o botão direito do mouse sobre "tablespaces" abrirá um pequeno menu, entre as opções exibidas está "New Tablespace" clique sobre ela;

3 - Uma nova janela é aberta, nela iremos criar de fato nosso novo tablespace. A janela é dividida em guias. a primeira delas é a guia "Properties", nela vamos preencher os campos:

• Nome = "Nome que você deseja dar ao tablespace";
• Owner = "Clique na seta no fim do campo e escolha o usuário que será o dono da tablespace, certamente se você é um usuário iniciante apenas o usuário "postgres" existe".

   4 - Ainda na mesma janela vamos agora clicar sobre a guia "Definition" nela há o campo "Location", nele colocamos o endereço da pasta que criamos para hospedar nosso tablespace /tmp/teste;

   5 - Se você desejar ver o código SQL gerado vá até a guia SQL. Confirme com "OK" e o tablespace estará criado pronto para uso. Caso ele não apareça imediatamente clique com o botão direito do mouse sobre "tablespaces" e em seguida clique sobre "refresh".

Pronto, criamos então um novo tablespace que poderá ser usado na criação de novos bancos de dados, e o assunto de nosso próximo post será justamente a criação de novos BDs, até lá!

FONTES:

Canal no Youtube da Marta Talitha: https://www.youtube.com/channel/UCLzqxqYAetFnk0F0S_01Lag

Criando uma nova conexão com o pgAdmin no PostgreSQL

Nesse simples tutorial iremos utilizar o pgAdmin III, caso você não o tenha instalado, ou mesmo não tenha o PostgreSQL instalado dê uma olhada no nosso post anterior ualaslimadev.blogspot.com.br/2017/10/instalacao-do-postgresql-no-ubuntu-e.html.

Abra o pgadmin e após isso observe o primeiro ícone da barra de ícones "add a connection to a server" ele é representado por uma tomada. Clique nele para criar uma nova conexão com o SGBD e siga:

   1 - Na janela que se abre preencha os seguintes campos com os conteúdos apresentados:

• Nome = "De sua escolha, será o nome da conexão";
• Host = localhost;
• Port = "Mantenha a que já está, certamente 5432";
• Username = "Mantenha o usuário postgres ou altere para um que você tenha criado";
• Password = "Use a senha de seu usuário, se você não sabe a senha no último tutorial vimos como troca-la";

      Obs.: Os campos não citados aqui deixe como estão e confirme com Ok.

E é isso, assim criamos uma conexão e podemos agora criar tablespaces e bancos de dados, mas esses são assuntos que virão em posts nos próximos dias, até lá :).

FONTES:

Canal no Youtube da Marta Talitha: https://www.youtube.com/channel/UCLzqxqYAetFnk0F0S_01Lag

Instalação do PostgreSQL no Ubuntu e semelhantes

Tive alguns problemas quando tentei instalar o PostgreSQL em meu Ubuntu 16.04, busquei tutoriais escritos e em vídeos mas mesmo assim continuava tendo problemas. Após muita busca encontrei tutoriais em vídeo (link no final do post em FONTES) que somados a muita quebra de cabeça me fizeram enfim conseguir realizar a instalação desse SGBD. Foi incrível ver que não era tão complicado como alguns tutoriais faziam parecer e dedico esse post à como instalar o Postgre no Ubuntu e sistemas semelhantes, em posts que virão em seguida falarei de como realizar uma conexão utilizando o pgAdmin3, criar tablespaces e um banco de dados.

Vamos lá, o primeiro passo é abrir o seu terminal (pode abri-lo usando as teclas de atalho ctrl+alt+t) pois faremos a instalação utilizando-o, não se assuste a instalação do postgre pelo terminal provavelmente será mais simples do que você pensa.

1 - Agora que temos o terminal aberto vamos primeiro atualizar os repositórios do nosso sistema, para isso utilize o comando abaixo:

   sudo apt-get update

Se você não estiver logado como root o sistema irá requerer sua senha, caso seja assim insira sua senha de root e confirme a operação com enter. Irá levar algum tempo, geralmente alguns segundos para que a lista de repositórios seja atualizada, aguarde;

2 - Agora vamos de fato instalar o SGBD PostgreSQL. Faça isso com o seguinte comando:

   sudo apt-get install postgresql postgresql-contrib

Aparecerá uma mensagem perguntando se você deseja continuar, digite "y" ou "s" o que seu sistema requeri e tecle enter para continuar com a instalação;

Após o fim da execução do comando anterior o postgre já está instalado em seu sistema! Fácil não foi? Mas ainda é necessário realizar algumas tarefas então nos acompanhe:

1 - Ainda utilizando o terminal, vamos logar utilizando o usuário postgres, este usuário vem já por padrão no postgre. Use o comando abaixo:

   sudo su - postgres

2 - Agora vamos acessar o nosso sistema gerenciador de banco de dados PostgreSQL com o comando a seguir:

   psql -d postgres -U postgres

(No comando acima o psql é a chamada a um programa de acesso ao postgre, o -d representa "data-base", -U "usuário ou user" e postgres o usuário com o qual vamos acessar o postgre);

3 - Observe que a interface do terminal mudou um pouco, isso porque agora estamos utilizando o programa psql dentro do terminal e os comando a serem dados não são neste momento para o sistema operacional mas para o nosso SGBD. Vamos usar esse primeiro acesso para trocar a senha do nosso  usuário postgres, use o comando abaixo para isso:

   alter user postgres with password 'nova_senha';

(No lugar de "nova_senha" insira a senha que você deseja criar, os sinais ' ' devem ser mantidos).

Após a execução do comando acima a mensagem "ALTER ROLE" deve ser exibida, se isso não ocorrer você deve ter errado o comando, então procure o erro e tente novamente.

após a mensagem de confirmação ser exibida utilize o comando "\q" (sem as aspas) para sair do psql e em seguida o comando "exit" para sair do usuário postgres.

Observe que acessamos o postgre utilizando o psql via linha de texto, vamos agora instalar um programa que nos permitirá ter acesso ao SGBD via interface gráfica este programa é o pgAdmin. Para instala-lo digite no terminal o comando que segue:

   sudo apt-get install pgadmin3.

Se a senha de root for solicitada insira e quando for pedido confirmação para continuar forneça "y" ou "s" e tecle enter, aguarde até o final da instalação.

Esse tutorial se encerra por aqui, agora basta que você abra o seu pgAdmin3 para trabalhar com o PostgreSQL. 

FONTES:

Canal no Youtube da Marta Talitha: https://www.youtube.com/channel/UCLzqxqYAetFnk0F0S_01Lag

CSS3: Transições

Transições em CSS3 é um recurso bastante interessante e pode ser usado substituindo JavaScript para a construção de menus, mas não apenas com essa finalidade, o uso de transições vai até onde sua imaginação permita.

Para estabelecer uma transição devemos ter um primeiro box com as propriedades com seus valores de início e após isso devemos ter outro box com um determinado seletor (aqui usaremos o hover que é acionado quando o ponteiro do mouse passa sobre o elemento afetado) com as propriedades que devem ser modificadas recebendo novos valores.

Exemplo:

   #box-transicao {

    width: 300px;

   height: 300px;

   background: orange;

 }

 #box-transicao:hover {

   width: 400px; /*largura alterada para 400px*/

      background: black; /*Fundo alterado para preto*/ 

   }

No exemplo acima a transição funciona porém ela será realizada de modo abrupto. Para que a transição ocorra de forma suave vamos utilizar uma propriedade chamada "transition". Essa propriedade nos dirá quais propriedades serão afetadas pela transição, o tempo da transição, à curva de velocidade e o atraso. Obviamente, como em outras propriedades não precisamos especificar cada um desses valores. Abaixo colocarei um exemplo utilizando apenas dois desses valores (propriedades afetadas e tempo de execução).

   #box-transicao {

width: 300px;

height: 300px;

background: orange;

 }

 #box-transicao:hover {

width: 400px;

background: black;

transition: background 3s, width 8s; /*Propriedades afetadas pela transição e o tempo que deve durar.*/

 }

OBS.: Se desejado que todas as propriedades do box hover recebam os efeitos de transition da mesma forma podemos substituir os nomes das propriedades por "all".

Além de se escrever a propriedade transition em sua forma simples, vista no exemplo, podemos estabelecer cada um dos valores em propriedade próprias:

 transition-property: xxxxx; /*Propriedades afetadas*/

 transition-duration: Xs; /*Tempo de execução da transição*/

 transition-timing-function: xxxxx; /*Curva de velocidade*/

transition-delay: Xs; /*Tempo de atraso*/

Para curva de velocidade podemos decidir por alguns valores como:

ease (PADRÃO, início lento, acelerado no meio e lento no final);

linear (velocidade constante).

Para buscar mais informações sobre transições como também para qualquer coisa em html, css, JS... recomendo o site da W3Schools. O link estará logo abaixo nas referências.

FONTES:

W3Schools: https://www.w3schools.com/css/css3_transitions.asp

 Curso completo de Desenvolvimento Web - Udemy: https://www.udemy.com/curso-completo-do-desenvolvedor-web/

GIT: GitHub

É difícil pensar em git e não pensar em GitHub, na cabeça de alguém que está começando a conhecer o git costuma mesmo estar a ideia de que ambos são uma coisa só. O git é um sistema de controle de versão enquanto que o GitHub é uma plataforma que nos permite ter repositório online trabalhando com git.

O GitHub não é a única plataforma para isso, mas certamente é a mais bem sucedida e com maior fama, servindo por exemplo para que programadores ainda sem experiência de emprego possam mostrar através de seus repositórios no GitHub suas habilidades. Outra utilidade da plataforma, diga-se de passagem muito relevante, é que nela estão muitos projetos open source, incluindo projetos gigantes como o WordPress, projetos onde nós programadores podemos  estudar o código e até mesmo contribuir no desenvolvimento.

O GitHub é gratuito, no entanto apenas para projetos públicos, caso o usuário queira hospedar na plataforma um projeto privado ele terá que pagar.

Os comandos são os mesmos já vistos antes (posts anteriores com comandos e descrições), logo mais abaixo veremos apenas mais um. Para começarmos a trabalhar na plataforma basta:

   1 - criar uma conta;

   2 - Depois de criar a conta usamos o comando "ssh-keygen":

       ssh-keygen /*Esse comando gera um par de chaves ssh que será necessária para que seu PC tenha autorização de acesso a seu repositório no git hub. Da forma mais simples basta confirmar com enter às solicitações do git no bash até que seja gerado um arquivo .pub do qual devemos copiar o conteúdo e levar até nossa conta no GitHub indo em "ssh keys" de "settings" e assim a conexão será permitida pelo servidor*/;

   3 - Criamos, utilizando a interface do GitHub, um repositório;

  4 - Com o repositório criado vamos procurar a ssh do servidor (hoje vamos ao botão "clone or download" na lateral e ao clicar sobre ele entre outras opções estará a chave ssh) e copia-la;

  5 - no git bash vamos usar o comando "git clone" que se diferencia de como o usamos no servidor local apenas que em vez de utilizarmos file:///xxx... vamos colocar a chave ssh retirada do GitHub;

   6 - Agora com o repositório criado basta começarmos a trabalhar em nossos projetos utilizando os comandos já vistos nos postes anteriores.

OBS.: Embora no comando clone tenhamos substituído o nome do servidor pela chave ssh nos comando push, pull e fetch o nome do servidor (origin) que deverá ser usado.

FONTES: Curso Básico de Git do RBtech (recomendo - essas são notas de aula que fiz durante esse curso): https://www.youtube.com/watch?v=1IfAFYQD8u0&list=PLInBAd9OZCzzHBJjLFZzRl6DgUmOeG3H0&index=7

GIT: Git em servidores locais

Além de usar git em um servidor no próprio PC de desenvolvimento podemos utilizar o git em uma rede local, útil para uma equipe de desenvolvimento de uma empresa por exemplo. A pasta onde estará hospedado o projeto não deve ser iniciada apena com o comando "git init" mas com o comando "git init --bare" assim o repositório será disponível para todos os PCs da rede local.

Os arquivos que em um repositório local ficariam dentro de uma pasta .git aqui ficam soltos diretamente dentro da pasta do projeto, isso é uma característica do init --bare.

git clone file:////NomeDoServidor/xxxx/xxxx xxxx /*Todos os que vão contribuir com o projeto devem executar este comando para clonar o repositório em sua estação de trabalho. O último parâmetro (xxxx) é dispensável sendo que ele é para substituir localmente o nome da da pasta original.*/

git remote /*Comando para ver o nome do servidor remoto no qual estamos conectados.*/

git push xxxx xxxx /*Comando para enviar ao servidor o commit local. O primeiro xxxx é o nome do servidor e o segundo é o nome do nosso branch. Parece a mim ser padrão que o servidor chame-se origin assim como o branch tem por padrão o "master".*/

git pull xxxx xxxx /*Comando para puxar do servidor não o repositório (clone) mas as alterações que estão no servidor fazendo o merge automático com os arquivos locais. Primeiro xxxx é o nome do servidor e o segundo é o nome do branch para o qual traremos as atualizações.*/

git fetch xxxx xxx /*Comando similar ao pull com a diferença de que este não faz o marge entre os arquivos baixados e os do branch local.*/

FONTES: Curso Básico de Git do RBtech (recomendo - essas são notas de aula que fiz durante esse curso): https://www.youtube.com/watch?v=1IfAFYQD8u0&list=PLInBAd9OZCzzHBJjLFZzRl6DgUmOeG3H0&index=7

GIT:BRANCH

O conceito de branch é um pouco parecido com o das tags, porém é superior, é como se fosse uma conta de usuário linux onde há o master (que seria o root) e outros que podemos criar. Os arquivos de um podem ter conteúdos diferente dos arquivos em outras contas ou mesmo podem haver arquivos em um e não no outro branch. É usado para um melhor controle de versão podendo por exemplo, enquanto que há uma versão estável do sistema sendo executada por clientes criarmos um novo branch onde faremos atualizações e correções de bugs e o sistema usado pelos clientes só terá às modificações quando já tivermos feito todos os testes e liberarmos para o master as atualizações.

git branch /*Lista todos os branchs existentes*/

git branch xxx /*Cria um novo branch*/

git chechout xxx /*Comando para ir para o branch desejado. Feito após a criação de um novo branch migra os arquivos do branch atual para o ditado e o git bash passa a ser operando com o branch ditado.*/

git checkout -b xxx /*Realiza os dois comandos acima de uma só vez.*/

git merge xxx /*Mesclo os arquivos do branch onde estou com os do branch apontado (xxx).*/

git branch -d xxx /*Exclui um branch.*/

FONTES: Curso Básico de Git do RBtech (recomendo - essas são notas de aula que fiz durante esse curso): https://www.youtube.com/watch?v=1IfAFYQD8u0&list=PLInBAd9OZCzzHBJjLFZzRl6DgUmOeG3H0&index=7

GIT: TAGs git

git tag -a xxx -m "xxxxxx" /* Com esse comando criamos uma tag que irá marcar algum commit. A tag pode ser útil para controlarmos versões e funciona como um ponteiro para um commit. O primeiro campo xxx é onde daremos o nome da tag e o segundo é onde faremos uma descrição dela. Fazendo a tag dessa forma ela será colocada no ultimo commit, caso se deseje por uma tag em um commit diferente deve-se entre o nome da tag e o parâmetro -m por a chave do commit.*/

git tag /*exibe as tags existentes*/

git show xxx /*Comando para exibir detalhes de uma determinada tag.*/

git tag -d xxx /*Este comando deleta uma tag.*/

FONTES: Curso Básico de Git do RBtech (recomendo - essas são notas de aula que fiz durante esse curso): https://www.youtube.com/watch?v=1IfAFYQD8u0&list=PLInBAd9OZCzzHBJjLFZzRl6DgUmOeG3H0&index=7

GIT: Comandos para consultas

git diff /*Esse comando exibirá o conteúdo de um arquivo commitado que tenha sido alterado e após isso ainda não tenha sido adicionado a stage area. Exibirá o que já havia, o que foi removido e o que foi adicionado, vale ressaltar que por padrão o git colocará a ultima linha escrita antes da alteração como removida (-- "removido em vermelho") e em seguida colocará o mesmo trecho como adicionado (++) não sei se é como se ele removesse e adicionasse ou se de fato ele faz isso, seja como for não vejo nenhum problema e vale apenas como observação desse comportamento.*/

git diff --staged /*com o acréscimo o comando diff exibe agora as alterações em um arquivo que já esteja na stage area.*/

git log /*Esse comando exibe todos os commits já realizados com suas chaves, autor e data de cada commit.*/

git log -p /*Esse comando irá detalhar os commits já realizados mostrando as alterações feitas. O relatório é exibido por paginação por isso é preciso usar a tecla enter para ir mostrando o restante do conteúdo até chegar no commit inicial.

Quando terminarmos a checagem será necessário teclar "q" para que possamos voltar a inserir comandos no terminal.*/

git log -p -n /*Com o comando anterior podemos ter problemas já que possa ser que hajam muitos commits já realizados. acrescentando o parâmetro -n (onde n é um natural qualquer) iremos definir a quantidade de commits que desejamos puchar, se colocarmos "-1" por exemplo, então teremos o relatório do último commit apenas.*/

gitk /*Comando extremamente útil! Ele também exibe relatórios só que dessa vez por meio de uma interface gráfica tornando a leitura mais intuitiva e produtiva.*/

git log --pretty=oneline /*Comando muito útil, ele exibirá os commits realizados cada um em linha única, simplificados, contendo apenas a chave e a anotação feita ao commitar.*/

git commit --amend -m "xxx" /*Esse comando edita o último commit realizado. Se houver novos arquivos na stage area o último commit terá seu conteúdo atualizado com o que está na stage area e também terá a mensagem alterada (parâmetro "xxx") e a chave será também trocada automaticamente. Caso não haja nada na stage area então a alteração se resumirá a mensagem e a chave*/

git reset HEAD xxx.xx /*Esse comando serve para retirar da stage area um arquivo que lá esteja.*/

git checkout -- xxx.xx /*Esse comando desfaz as alterações em um determinado arquivo para o estado do último commit.*/

git rm xxx.xx /*Comando para remover um arquivo do repositório.*/

FONTES: Curso Básico de Git do RBtech (recomendo - essas são notas de aula que fiz durante esse curso): https://www.youtube.com/watch?v=1IfAFYQD8u0&list=PLInBAd9OZCzzHBJjLFZzRl6DgUmOeG3H0&index=7

GIT: Fazendo com que um arquivo dentro do diretório de trabalho não seja monitorado (gitignore)

Suponhamos que você crie um arquivo de notas ou um código de testes dentro do seu diretório de trabalho e que esses arquivos sejam temporários ou por algum outro motivo você não deseje que ele seja monitorado pelo git. Simplesmente deixar o arquivo lá fará com que a cada consulta com o "git status" o arquivo apareça como ainda não tendo sido commitado ou adicionado para a staging area e ainda por engano podemos acabar adicionando ou commitando esse arquivo. Para fazer com que qualquer arquivo, incluindo pastas, não sejam "vistos" pelo git temos como opção criar um arquivo sem nome com extensão .gitignore. Se você estiver no windows e tentar criar um arquivo sem nome através de um editor de texto comum (incluindo o Bloco de Notas) você terá problemas pois por padrão o windows não irá aceitar um arquivo sem nome. No windows creio que a maneira mais fácil de criar um .gitignore seja utilizando um editor de códigos como o Notepad++, Komodo Edit ou Sublime, se você optar por fazer de uma forma diferente pode buscar na internet outras opções.

Uma vez que você tenha criado o arquivo dentro dele você deve incluir todos os arquivos e pastas que não serão observados pelo git, inclua o próprio ".gitignore". Basta por os nomes dos arquivos com suas extensões, um em cada linha, e no caso de pastas você deve por uma "/" no fim que dirá ao git que se trata de um diretório.

FONTES: Curso Básico de Git do RBtech (recomendo - essas são notas de aula que fiz durante esse curso): https://www.youtube.com/watch?v=1IfAFYQD8u0&list=PLInBAd9OZCzzHBJjLFZzRl6DgUmOeG3H0&index=7

GIT: O que é + comandos básicos

O que é git?

Git é um sistema de controle de versão desenvolvido originalmente por Linus Torvalds (criador do linux). É um software livre amplamente utilizado em todo o mundo tendo milhões de usuários desde programadores em seus primeiros passos até gigantes como Microsoft, google, facebook e twitter. O git é um VCS (version control system) distribuído o que faz dele uma ferramenta importante no desenvolvimento de códigos por uma equipe.

Estarei, à partir deste, fazendo alguns posts com comandos e suas descrições e outras explicações conceituais.

Iniciando o seu repositório local

Antes de mais nada você deve baixar o git para seu computador https://git-scm.com/downloads, instala-lo e após isso você irá utilizar o git bash para gerenciar seu repositório. Os comandos para navegar pelas pastas do sistema, limpar tela... são os mesmo utilizados no terminal linux mesmo que você esteja usando um PC com Windows. Com essas premissas vamos começar a estudar os comandos do git.

git config --global user.name "xxxx" /*Comando para escolher o nome de usuário.*/

git config --global user.email "xx@xx.xx" /*Após criar o usuário aqui lhe damos um endereço de e-mail.*/

git init /*Após navegar, com o Git Bash, até o diretório onde ficarão seus projetos use este comando para iniciar o monitoramento.*/

git status /*Com este comando verificamos o status do nosso diretório de trabalho, se há alguma alteração, algo à commitar ou a adicionar.*/

git add xxx.xx /*Comando para adicionar um arquivo novo ou um já monitorado porém alterado. Deve-se digitar o nome do arquivo seguido de sua extensão*/

git add *.xx /*Adciona para a staging area todos os arquivos do diretório de trabalho que tenham uma determinada extensão*/

git add . /*Adciona todos os arquivos do diretório*/

git commit -m "xxxxxxx" /*Após adcionar os arquivos a stage area eles passam a ser monitorados porém estão em um tipo de estado intermediário, estão em um ensaio para serem permanentemente armazenados em nosso repositório. Para salvarmos os arquivos adcionados permanentemente em nosso repositório devemos commitalos com esse comando.

OBS.:Entre as aspas fazemos uma breve nota sobre o commit*/

git commit -a -m "xxx" /*Comando para comitar e adcionar de uma única vez, substituindo assim o comando "git add". 
OBS.: Entre as aspas inserimos uma nota sobre a versão.*/

FONTES:

Curso Básico de Git do RBtech (recomendo - essas são notas de aula que fiz durante esse curso) https://www.youtube.com/watch?v=1IfAFYQD8u0&list=PLInBAd9OZCzzHBJjLFZzRl6DgUmOeG3H0&index=7

Git Wikipédia: https://pt.wikipedia.org/wiki/Git#Ado.C3.A7.C3.A3o

Sistemas de Controle de versões Wikipédia: https://pt.wikipedia.org/wiki/Sistema_de_controle_de_vers%C3%B5es#Lista_de_sistemas_de_controle_de_vers.C3.A3o

CSS3: Animações

Animações CSS são um recurso importante pois permitem animações em elementos HTML sem a necessidade de uso de JavaScript ou outra tecnologia que não o CSS3. Uma boa aplicação para esse recurso é por exemplo uma apresentação de slide de fotográfias.

Creio ser normal se assustar um pouco ao ouvir falar em animações com CSS3, confesso que eu mesmo fiquei um pouco assustado esperando algo complicado de fazer e de dominar, mas para "nossa alegria" criar animações com CSS é bem simples.

Primeiro, devemos por as propriedades que controlarão as animações no campo do elemento HTML que será animado. Colocarei abaixo um exemplo com proriedades de animação e comentarei à frente sobre cada uma delas:
       
        div {
             animation-nome: xxxx; /*Com essa propriedade damos um      nome para nossa animação.*/
             animation-duration: Xs; /*Aqui determinamos quanto tempo a execução da animação durará. Não a deixe de declara pois o valor inicial é 0 então se não houver declaração sua animação nunca será executada*/
             animation-delay; Xs; /*Nessa propriedade estabelecemos um tempo de atraso do carregamento da pag até o início da animação.*/
             animation-interation-count: X; /*Número de vezes que a animação será executada. Se desejado pode-se por o valor "infinite" o que fará a animação se repetir sem parar.*/
             animation-direction: xxxxx; /*Por padrão a animação seguirá as especificações definidas no css do primeiro para o último, mas podemos utilizar essa propriedade para mudarmos essa direção padrão da execução. Podemos por exemplo usar os valores alternate (que alternará entre a ida e a volta, caso tenha-se definido que a animação ocorra mais que uma vez) e reverse (que fará com que a animação ocorra de trás para frente).*/
        }
        

    Após estabelecer as diretrizes para a animação agora é necessário que venhamos cria-la de fato, pois até aqui o que já foi feito apenas configurou a animação mas não a fez existir ainda (ao menos não de forma concreta). Para de fato criar a animação usaremos uma regra CSS a @keyframes. Vejam o exemplo a seguir:
   
        @keyframes xxxx  {
            from {
                /*Aqui colocamos as caracateristicas de início da animação.*/           
            }
            to {
                /*E aqui definimos as caracteristicas de encerramento*/
            }
        } /*Os "xxxx" do keyframe representam o nome da animação, o nome que demos a ela anteriormente*/
        

Vimos uma forma simples de fazer a animação com "from" e "to", dois estágios, início e fim. Poderiamos ter feito essa animação com mais estágios, para isso ao invês de utilizarmos from e to usariamos porcentagem, exemplo: (0%, 25%, 50%, 100%), desse modo a animação geraria alterações no início 0%, em 25% do tempo de animação, 50% e mudar a última vez na conclusão com 100% do tempo de animação atingido.

Vale lembrar que as animações CSS podem ser aplicados à maioria dos elementos HTML. Lembro também que há algumas outras propriedades CSS para animações que podem deixar sua animação mais interessante, para conheçe-las visite: https://www.w3schools.com/css/css3_animations.asp

CSS3: Degradê com CSS3

Esquemas de cores em degradê sempre foram muito utilizados no design, lembro que quando conheci o CorelDRAW adorava deixar os objetos em degradê (risos).

Para por fundos com essa coloração utilizando o CSS3 utilizamos a propriedade background, a mesma utilizada para outros tipos de coloração e também para imagens. Após a propriedade devemos declarar o tipo do gradiente que queremos, existem dois tipos, linear e radial. Depois de declararmos o tipo podemos na forma mais simples especificar duas cores, mas podemos definir mais cores e também podemos antes das cores estabelecer valores como, angulo (deg) e direção e ainda após as cores antes da próxima vírgula podemos estabelecer o espaço a ser ocupado por aquela cor.

Deixarei aqui alguns exemplos comentados e um link para a pag. da propriedade no site da w3c school.

background: linear-gradient(red, yellow); /*gradiente do tipo linear do vermelho para o amarelo em direção ao bottom (default)*/

background: radial-gradient(red, yellow); /*gradiente do tipo radial do vermelho para o amarelo*/

background: radial-grandient(red, rgb(555,0,190), rgba(545,283,875,0.5), blue, black); /*Gradiente do tipo radial com várias cores*/

background: linear-gradient(70deg, red, blue); /*Gradiente linear com 70º de inclinação*/

background: linear-gradient(to left, red, orange); /*Gradiente linear em direção à esquerda*/

background: linear-gradient(to top, red 90%, orange); /*Grandiente linear em direção ao topo com a cor vermelha ocupando 90% do espaço*/

https://www.w3schools.com/css/css3_gradients.asp

CSS3: Margin e Padding

Margin: Essa propriedade é aplicada automáticamente nos elementos html ou inseridas pelo desenvolvedor. Por padrão cada elemento html tem um valor próprio (valor inicial) e esse valor pode sofrer pequenas variações de navegador para navegador, por isso é recomendável utilizar algo como um CSS reset para ter valores de margem e de outras propriedades com poucas ou mesmo nenhuma diferença na visualização de browser para browser.

A propriedade margin aplica um espaço EXTERNO ao box (formação visual resultante de um elemento html) afastando-o da margem do browser e ou de qualquer elemento vizinho.

Essa propriedade pode ser declarada conforme exemplos das seguintes formas:

margin: TOPpx RIGHTpx BOTTOMpx LEFTpx; (Inves de exemplificar com valores númericos estou usando as posiçoes que são alteradas pela ordem de declaração) 

margin: TOPeBOTTOMpx LEFTeRIGHTpx;
margin: TODASpx;

Ou ainda pode-se declarar uma única margem em especifico como:
margin-top: px; (Declaração de margem no topo do elemento).

Vale resaltar que as margens podem ser estabelecidas não apenas utilizando px mas outras medidas também.

Padding: O padding (preenchimento) a semelhança do margin também tem valores padrão para os elementos html, ou seja, na não declaração pelo desenvolvedor permanecerá o valor padrão (inicial) que o browser determina para aquele elemento. O que difere um padding de um margin é que enquanto o margin determina o espaçamento externo ao elemento o padding determina o espaço interno do box para seus elementos contidos. Se temos uma div com um h1 dentro e aplicamos a essa div um padding de 50px então teremos 50px da borda da div até o box do h1.

Vale resaltar que quando aplicamos uma padding a um elemento esse valor é somado ao seu width e heigth então se o elemento tem 300X300px ao se declarar 50px de padding ele terá agora 400x400px. Para contornar isso, se assim o desenvolvedor desejar, ele poderá utilizar a propriedade e valor "box-sizing: border-box;" isso dirá ao navegador que as medidas do padding devem estar incluídas nas medidas já estabelecidas para largura e altura.

Exemplos de declaração:

padding: TOPpx RIGHTpx BOTTOMpx LEFTpx;
padding: TOPeBOTTOMpx LEFTeRIGHTpx;
padding: TODASpx;

Ou um único padding como:

padding-top: px; (Declaração de preenchimento no topo do elemento).

Assim como nas margens as declarações de padding podem ser feitas com outros tipos de medidas.

HTML5: Display Block, Inline e Inline-block

Existem 3 propriedades de display na CSS3, são elas: Inline, block e inline-block. Pode ser difícil num primeiro momento perceber a diferença entre esses três valores, eu pessoalmente demorei um pouco para entender de maneira clara como cada um funciona.

Então vamos de forma rápida e direta explicar cada uma das três e o que as diferencia:

- display: block; Esse é um valor padrão para a maioria das tags html (<div> por exemplo) e é o que mais costumamos usar. Um objeto com esse valor se comporta como um bloco ocupando todo o espaço possível, assim não admite permanecer do lado de outro elemento. Sempre que um elemento estiver com esse valor, imediatamente após ele vem uma quebra de linha. O que faz desse elemento muito útil é o fato de que por ser um bloco podemos editar suas margens (margin), largura (width) e altura (height);

- display: inline; Esse é o valor padrão, por exemplo da tag "span", um elemento com esse valor fica contido em uma linha e por tanto não pode ter suas margens top e bottom configuradas e nem sua largura e altura. Elementos com este valor ocuparão apenas o espaço necessário para sua exibição e podem ter um elemento vizinho na mesma linha;

- display: inline-block; Bom, este valor é uma mistura das caracteristicas de amobos os valores anteriores, ou seja, a linha não será quebrada imediatamente após o elemento e ainda poderemos configurar todas as margens, widht e height do elemento.