O que escrever no README.md do seu projeto no Github

Antes de sitar os tópicos, é boa pratica criar a descrição do seu projeto no README.md em inglês, pois as chances de pessoas de outros países verem seu projeto é grande, e não queremos que eles não entendam o que o nosso projeto faz, não é mesmo? Então sempre que possível escreva a descrição em inglês. 

Sinopse/Synopsis
Na parte superior do arquivo deve haver uma breve introdução e / ou visão geral que explica o que é o projeto. Esta descrição deve corresponder descrições adicionados para os gestores de pacotes (gemspec, package.json, etc.)

Exemplo de código/Code Example
Os desenvolvedores devem ser capazes de descobrir como seu projeto resolve o seu problema, olhando para o exemplo de código. Verifique se a API que você está mostrando é óbvio, e que o código é curto e conciso.

Motivação/Motivation
Uma breve descrição da motivação por trás da criação e manutenção do projeto. Isso deve explicar por que existe o projeto.

Instalação/Installation
Fornecer exemplos de código e explicações sobre como obter o projeto.

Referência API/API Reference
Dependendo do tamanho do projeto, se for pequena e simples o suficiente para os documentos de referência pode ser adicionado ao README. Para o tamanho médio a grandes projectos é importante, pelo menos, fornecer um link para onde os documentos de referência API viver.

Testes/Tests
Descrever e mostrar como executar os testes com exemplos de código.

Contribuintes/Contributors
Que as pessoas saibam como eles podem mergulhar no projeto, incluem links importantes para coisas como rastreadores de problemas, irc, contas de Twitter, se aplicáveis.

Licença/License
Um trecho curto descrevendo a licença (MIT, Apache, etc.)

Escrevendo em Markdown

Agora vamos praticar, e escrever em Markdown, para visualizar os exemplos é só abrir: Exemplos do Tutorial e ir acompanhando como fica cada coisa. 


Títulos

Para marcar um título, você vai usar # a quantidade de vezes que irá representar o nível do título. Exemplo:

1 2 3 4 5 6

# Título nível 1 ## Título nível 2 ### Título nível 3 #### Título nível 4 ##### Título nível 5 ###### Título nível 6

view

Parágrafos e quebras de linha

Para gerar parágrafos, basta você escrever o texto em uma linha:

1 2 3 4 5

Título de nível 1 ================== Título de nível 2 ------------------

 view

Parágrafos e quebras de linha
Para gerar parágrafos, basta você escrever o texto em uma linha:

1 2 3

Este é um parágrafo. Este é outro parágrafo.

view

Mas a documentação do Markdown diz que, para quebras de linha, você precisa deixar dois espaços no final da linha:

1 2	Primeira linha do parágrafo. [espaço][espaço] Segunda linha do parágrafo.

Coloquei o [espaço] no final da primeira linha somente para facilitar a visualização. Você deve substituir por dois espaços em branco.

Links 

Para gerar links, você usa [](). Dentro dos colchetes você coloca o texto do link, e dentro dos parênteses, você coloca a URL:

1	[Blog da Mel](http://melissalobo.blogspot.com.br)

view

Links automáticos

Se o texto do seu link é o próprio link, você pode envolvê-lo entre < link >, que o link será gerado automaticamente:

1	<https://www.google.com.br>

view

Listas

Para listas não ordenadas, você pode usar *, + ou -. Veja:

1 2 3 4 5 6 7 8 9 10 11

* Item 1 * Item 2 * Item 3 + Item 1 + Item 2 + Item 3 - Item 1 - Item 2 - Item 3

view

E para listas ordenadas, você usa o número, seguido de ponto:

1 2 3

1. Item 1 2. Item 2 3. Item 3

view

Imagens

Geração de imagens é bem parecido com a geração de links: você só precisa adicionar uma ! no início. E o texto que você coloca entre os colchetes, é usado como alt na imagem:

1	

view

Backslash scapes

Para escapar caracteres que são parseados pelo Markdown, você pode usar a barra invertida \, seguida do caractere, para imprimi-lo literalmente. O escape funciona para os caracteres listados abaixo:

1 2 3 4 5 6 7 8 9 10 11 12

\ backslash (barra invertida) ` backtick (crase) * asterisk (asterisco) _ underscore {} curly braces (chaves) [] square brackets (colchetes) () parentheses (parênteses) # hash mark (sustenido / hash / jogo da velha) + plus sign (sinal de "mais" ou somar) - minus sign (hyphen) (sinal de menos ou hífen) . dot (ponto) ! exclamation mark (ponto de exclamação)

view

Para saber mais sobre Markdown, recomendo a leitura da documentação oficial:

http://daringfireball.net/projects/markdown/

E alguns links de como o Github usa Markdown, que foi onde eu descobri tudo isso que postei:
https://help.github.com/articles/markdown-basics | https://help.github.com/articles/github-flavored-markdown/

Bootstrap - Criando uma página de Login com Modais

Modais no Bootstrap são simples mas flexíveis caixas de dialogo. Um modal renderiza um cabeçalho, corpo, e uma coleção de ações no footer. Exemplo:

Então eu resolvi fazer um formulário de login com o Modal.

Para melhor entendimento eu dividi o código em três parte: modal-header que é a Tag do cabeçario, modal-body que é a Tag do corpo e modal-footer que é onde fica os botões ou ações do Modal/Caixa. 

	<div id="loginModal" class="modal show" tabindex="-1" role="dialog" aria-hidden="true"> <div class="modal-dialog">
	<div class="modal-content">
Cabeçalho:	<div class="modal-header">
	<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
	<h1 class="text-center">Login</h1>
	</div>
Corpo:	<div class="modal-body">
	<form class="form col-md-12 center-block">
	<div class="form-group">
	<input type="text" class="form-control input-lg" placeholder="Email">
	</div>
	<div class="form-group">
	<input type="password" class="form-control input-lg" placeholder="Senha">
	</div>
	<div class="form-group">
	<button class="btn btn-primary btn-lg btn-block">Logar</button>
	<span class="pull-right"><a href="#">Registrar</a></span>
	<span><a href="#">Precisa de Ajuda?</a></span>
	</div>
	</form>
	</div>
Coleções de ações no Footer:	<div class="modal-footer">
	<div class="col-md-12">
	<button class="btn" data-dismiss="modal" aria-hidden="true">Cancelar</button>
	</div>
	</div>
	</div>
	</div>
	</div>

Todas as tags são do Bootstrap, e o código fonte você pode baixar aqui: Bootstrap Examples ou visualizar aqui: Bootstrap Examples GitHub.

O que é o Bootstrap? Primeiros Passos

Bootstrap é um framework front-end que facilita a vida dos desenvolvedores web a criar sites com tecnologia mobile (responsivo). Além disso, o Bootstrap possui uma diversidade de componentes (plugins) em JavaScript (jQuery) que auxiliam o designer a implementar: tootlip, menu-dropdown, modal, carousel, slideshow, entre outros sem a menor dificuldade, apenas acrescentando algumas configurações no código, sem a necessidade de criar scripts e mais scripts.

Características:

• Possui uma interface super amigável e moderna;
• Atualmente possui uma grande diversidade de templates;
• Grande quantidade de plugins adaptados ou desenvolvidos para o framework;
• Sistema responsivo;
• Um dos frameworks mais utilizados no desenvolvimento de portais e sistemas do mundo;
• Guia de aplicação;
• Download facilitado e totalmente FREE!

Primeiros Passos com Bootstrap:

1. Faça o download do framework no site do desenvolvedor getbootstrap.com
2. Após realizar o download, você terá os seguintes arquivos:
   
   

   bootstrap/
     ├── css/
     │   ├── bootstrap.css
     │   ├── bootstrap.min.css
     ├── js/
     │   ├── bootstrap.js
     │   ├── bootstrap.min.js
     └── img/
         ├── glyphicons-halflings.png
         └── glyphicons-halflings-white.png

3. Adicione os arquivos  nas respectivas pastas do seu projeto.
4. Chame o CSS e o JS dentro da tag <head> do seu HTML
   

   	<html> <head> <title>Bootstrap - Primeiros Passos</title>
   	<!-- Incluindo o CSS do Bootstrap -->
   	<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
   	</head>

Ao usar o bootstrap.js é necessário como requisito o famoso e poderoso jQuery, lembre-se de incluí-lo antes do Bootstrap

	<body> ...
	<!-- Incluindo o jQuery que é requisito do JavaScript do Bootstrap -->
	<script src="http://code.jquery.com/jquery-latest.js"></script>
	<!-- Incluindo o JavaScript do Bootstrap -->
	<script src="js/bootstrap.min.js"></script>
	</body>
	</html>

E pronto!

Não existe um arquivo executável, pois ele é somente um emaranhado de códigos que são aplicados ao seu projeto através da chamada no html.

O Bootstrap não é nada mais do que esses arquivos. Lembrando que para ambiente de desenvolvimento o melhor é incluir no seu HTML os arquivos identados: bootstrap.css e bootstrap.js, entretanto em ambiente de produção o indicado são os arquivos com o final .min pois são comprimidos e economizam muitos bytes o que melhora o carregamento das páginas HTML (principalmente em conexões 3G). Os arquivos no diretório img/ são os icones padrões do Bootstrap e são incluídos pelo arquivo css.

Código Fonte: Bootstrap Examples.


Crie uma página de login com: Modais do Bootstrap  

Melissa Lobo.

O que é o Github? Criando & Configurando

O Github é um serviço de hospedagem distribuído desenvolvido em Ruby on Rails para projetos que utilizam o controle de versão Git. Assim, é utilizado como repositório online de códigos fonte para projetos de código aberto.
Podemos encontrar nele informações sobre todos os commits (atualizações) dos projetos que o utilizam, uma rede social que possibilita que outras pessoas acompanhem o desenvolvimento de seu projeto, um recurso para visualizar gráficos de quantas atualizações cada pessoa no projeto está realizando, entre outras novidades.

Site oficial: http://github.com

Instalando Git 

• Podemos fazer o download do Git pelo site: http://git-scm.com/download, atualmente funciona em Linux, Mac OSX e Windows. 
• Para usuários GNU/Linux Debian o download do Git pode ser feito pelo Gerenciandor de Pacotes com o comando:
  $ sudo apt-get install git-core git-gui git-doc

Git Bash no Windows 

Criando um usuário no Github

•  Acessar http://github.com
• -> Pricing and Signup -> Escolher um plano e “Create an account” (Possui planos free) -> Escrever seus dados e seguir os passos como de costume (Nome, Senha, etc).

Configurando o Git

Configuração do Github no Git Bash 

•  Configure seu usuário Git com os comandos :
  $ git config --global user.name "Seu Nome"
  $ git config --global user.email seuemail@gmail.com

Postagens Relacionadas: O que é o Git  Comandos básicos e dicas do Git  Meu Github

Melissa Lobo.