Mostrando postagens com marcador GitHub. Mostrar todas as postagens
Mostrando postagens com marcador GitHub. Mostrar todas as postagens

domingo, 11 de junho de 2017

Como criar uma Extensão para o Google Chrome

Projeto simples, para criar uma Extensão para o Google Chrome

  • O arquivo manifest.json

Todos os projetos que você criar tem que ter o arquivo manifest.json na pasta raiz do mesmo. Esse arquivo não é nada mais que um JSON, onde ficarão as informações relacionadas à sua extensão: nome da extensão, descrição, versão, permissões, etc. Tudo que você pode incluir no manifest.json, você encontra aqui nesse link.

Para nossa primeira extensão, vamos usar as seguintes informações:

As informações obrigatórias são somente o manifest_version, name e version, onde:

manifest_version: Representa a versão do manifesto que você está usando. Hoje (junho/2011), é obrigatório usar a versão 2;
name: Representa o nome da sua extensão;
version: Representa a versão da sua extensão. A versão deve ser separada por pontos.

As informações adicionais sobre nossa extensão Hello World presentes no nosso manifesto são:

description: É uma descrição para nossa extensão;
browser_action: Representa ações que executaremos no navegador. Para nosso exemplo, iremos apenas apresentar um popup quando o usuário clicar na extensão;
default_popup: Informa qual HTML o navegador deve carregar quando o usuário clicar no ícone da extensão.
icons: Representa todos os ícones que sua extensão irá utilizar.


  • POPUP

Para servir de popup da extensão, use a seguinte página HTML simples abaixo, chamada index.html (ou crie uma página sua, com o mesmo nome):
Essa pagina será exibida quando o usuário clicar no ícone da nossa extensão.

  • Ícone
Você pode usar qualquer ícone que desejar, no tamanho:  16 pixels. E salvar na pasta images do projeto. Se quiser usar a mesma que eu só copiar daqui: Icone. Quando você for publicar sua extensão, é recomendado que você tenha ao menos o tamanho de ícone em 128x128px. Se possível, passe todos os tamanhos pedidos (16x16, 48x48, 128x128), pois o Chrome irá selecionar o que for mais apropriado para o momento que ele precisar ser apresentado.
  • CSS
Dentro da pasta CSS, você colocar o seu arquivo style.css onde você pode customizar da maneira que desejar. 
  • Testando sua Extensão
Testar a extensão é bem simples, basta abrir seu Google Chrome e navegar até Menu > Mais ferramentas > Extensões.

Na página de extensões, habilite o modo desenvolvedor, clicando na caixa de seleção:

Clique em Carregar extensão expandida:
Na janela que abrir, escolha a pasta onde está seu projeto. E pronto, a extensão foi instalada! Se você reparar vai aparecer um registro novo com as informações da nossa extensão e o ícone dela já está disponível ao lado da barra de endereços.
Para testar, basta clicar no ícone da extensão:
Pronto! Agora você já pode começar a brincar e colocar mais funcionalidade na sua Extensão. O projeto completo pode ser baixado no Github: Extensão para o Google Chrome.

quarta-feira, 29 de junho de 2016

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.)

terça-feira, 28 de junho de 2016

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


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.

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)

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>

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

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

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

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
![Eu](https://fbcdn-sphotos-e-a.akamaihd.net/hphotos-ak-xlt1/v/t1.0-9/13124556_984154084999068_6786632002907995125_n.jpg?oh=61d6c4b591caf5ed56d3a71d57d19fc3&oe=5807A2F9&__gda__=1476901864_0192b37cb7089c22bd73bd5c303dcdcc)

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)


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/

segunda-feira, 27 de junho de 2016

O que é Markdown?

Markdown é uma ferramenta de conversão de text-to-HTML. Com ele é possível você marcar títulos, listas, tabelas, etc., de forma muito mais limpa, legível e precisa, do que se fosse fazer com HTML.

Eu particularmente uso ela somente no Github por enquanto, no README.md, que é um arquivo que fica na raiz do seu projeto, e é renderizado pelo Github abaixo da lista de arquivos. Aquele texto que você lê quando acessa um repositório é um arquivo README.md, escrito em Markdown.
Mas ela pode ser utilizada na maior parte dos geradores de estáticos (Hexo, Jekyll, HarpJS, Docpad, etc.).

Escrever em Markdown

Para começar a escrever em Markdown, você só precisa criar um arquivo com uma dessas extensões: mark, markdown, md, mdml, mdown, text, mdtext, mdtxt, mdwn, mkd, mkdn. Entre essas, a mais utilizada é a md. Crie um arquivo com uma dessas extensões e você já estará apto para começar a escrever em Markdown! 
E usar um Markdown Editor, existe vários, como o Stack Edit que converte Markdown para HTML enquanto você digita.

quarta-feira, 19 de agosto de 2015

Criando um Repositório no Github

Para criar um repositório no GitHub, clique no botão New repository disponível no +  na sua página inicial:
Criando um novo repositório no Github

Especifique um nome e opcionalmente uma descrição e clique em Create Repository:

Já temos um repositorio no Github com um endereço no servidor para onde vamos enviar os arquivos criados localmente. Próximo passo é criar um diretório/pasta local e iniciar o Git fazendo ele se comunicar com o servidor. Você pode criar manualmente a pasta ou usar a linha de comando. Para isso abrimos o terminar e fazemos:
// cria o diretório/pasta
$ mkdir PrimeiroProjetoGit
// entra na pasta que criamos
$ cd PrimeiroProjetoGit
Agora você pode entrar na pasta PrimeiroProjetoGit e criar lá um arquivo de texto qualquer, para podermos commitar algo ou criar pela própria linha de comando com:
// cria um arquivo
$ touche arquivoQualquer.txt
 Em seguida digite os comandos:
// inicia o git
$ git init
// adiciona os arquivos/modificações no git
$ git add .
// adiciona uma descrição ao que será comitado
$ git commit -m "Primeiro Commit"
// informamos o endereço do nosso projeto
$ git remote add origin https://github.com/MelissaLobo/PrimeiroProjetoGit.git
// envia os arquivos da sua máquina para o repositório criado no Github
$ git push -u origin master

O comando git init serve para "iniciar" o rastreamento de arquivos pelo Git. Esse comando cria um diretório (oculto).git, contendo as configurações necessárias para o funcionamento do sistema. Esse comando só é necessário uma vez.

O comando git remote add serve para adicionar um repositório "remoto", que por padrão o Git chama de origin, e que nada mais é do que um "atalho" para o endereço do servidor. Vinculando assim o seu projeto ao repositório do Github.

O comando git push -u origin master envia os arquivos da sua máquina para o repositório.

Em seguida ele vai pedir o seu usuário e senha do Github. É só digitar e dar enter.

Agora só atualizar a pagina do Github, no meu caso https://github.com/MelissaLobo/PrimeiroProjetoGit  e o projeto estará lá bonitinho. 

No caso, sempre que criar um projeto no eclipse por exemplo, você faz o mesmo processo, cria o repositório, abre o Terminal ou o Git Bash, entra na pasta do projeto e executa os mesmos comandos. 

Colinha:
$ git init
$ git add .
$ git commit -m "Primeiro Commit"
$ git remote add origin https://github.com/nomedoseuprojeto.git
$ git push -u origin master


terça-feira, 18 de agosto de 2015

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




Melissa Lobo.

O que é o Git?

O Git é um sistema de controle de versão (ou versionamento), VCS (do inglês version control system) ou ainda SCM (do inglês source code management) distribuído que está sendo cada vez mais usado, pois foca em velocidade e robustez. O desenvolvedor inicial do Git foi Linus Torvalds (criador do Linux).

Um sistema de controle de versão tem a finalidade de gerenciar as diferentes versões de um documento. É muito utilizado por empresas de desenvolvimento de software que possuem grandes equipes e precisam manter organizado, documentado e arquivado tudo o que foi e está sendo implementado no software.

Como exemplo de projetos que utilizam o Git temos: Arch Linux, Android, Debian, Digg, Eclipse, Fedora, GNOME, jQuery, openSUSE, Ruby on Rails, Samba, Yahoo UI Library, entre outros.

Site oficial: http://git-scm.com


Melissa Lobo.

segunda-feira, 14 de julho de 2014

Criando Projeto Servlet no Eclipse

Para criar um projeto Servlet no Eclipse é bem simples: Botão Direito do mouse: New > Project 
Ai você escolhe o modelo do seu projeto: Web > Create a Dynamic Web project > Next  :
Project name: nomeDoProjeto > Finish :

Em seguida criaremos um pacote dentro do nosso novo projeto:

 E dentro desse pacote criamos uma classe:
E para que esta classe seja configurada como um Servlet, 'extendemos' (extends ) ela de HttpServlet, e importamos o mesmo:


Para configurar a nossa Servlet para responder na raiz do nosso projeto, utilizamos a anotação @WebServlet(urlPatterns = "/") e a importamos:

Para programar o que o Servlet retornará ou enviará, é necessário faze-lo dentro do método doGet ou doPost. A assinatura deste método recebe objetos do tipo HttpServletRequest (Request) e HttpServletResponse (Response), que são responsáveis por ler o que foi recebido para processar e por escrever a saída ao utilizador:
O Request é usado para ler o que chega pelo HTTP (HTML, Cookies, etc), e o Response para escrever o resultado do Servlet (Conteúdo, Content Type, Cookies, etc).


Dentro da pasta WebContent criamos um arquivo index.html ou index.jsp :
E lá colocamos o conteúdo da pagina a ser exibido: <h1>Bem Vindo ao nosso primeiro projeto Servlet!</h1><br/> : 

Agora vamos rodar o projeto. Para isso,  precisamos adicionar o nosso projeto a um servidor web (Tomcat) como um novo projeto.
Vá na guia Servers do Eclipse encontre o Tomcat e Clique com o botão direito sobre o Tomcat e selecione Add and Remove :

 Na janela de Add and Remove, selecione o projeto clique em Add > e em seguida em Finish: 


Agora para iniciar o Webserver. É só clicar com o direito sobre o Tomcat e clicar em Start:

Quando o status aparecer Started, Synchronized, vá até seu navegador e digite o endereço http://localhost:8080/nomeDoProjeto :

E assim nosso primeiro projeto (bem simples) está pronto.

Pra não esquecer:
Boa Prática: nome do projeto começa com letra minuscula, nome da class maiúscula.
Link do projeto para quem quiser baixar : Primeiro Projeto Servlet no Eclipse

Melissa Lobo.

Posteriormente iremos conectar com o Banco De Dados. 

sábado, 10 de maio de 2014

Git

O Git é um sistema fácil de usar, incrivelmente rápido, bastante eficiente com grandes projetos e de uma excelente qualidade. Mas o que é exatamente o Git? O Git considera que os dados são como um conjunto de snapshots (captura de algo em um determinado instante, como em uma foto) de um mini-sistema de arquivos. Cada vez que você salva ou consolida (commit) o estado do seu projeto no Git, é como se ele tirasse uma foto de todos os seus arquivos naquele momento e armazenasse uma referência para essa captura. Para ser eficiente, se nenhum arquivo foi alterado, a informação não é armazenada novamente - apenas um link para o arquivo idêntico anterior que já foi armazenado.
O workflow básico do Git pode ser descrito assim:

  • Você modifica arquivos no seu diretório de trabalho.
  • Você seleciona os arquivos, adicionando snapshots deles para sua área de preparação.
  • Você faz um commit, que leva os arquivos como eles estão na sua área de preparação e os armazena permanentemente no seu diretório Git.

E agora algumas dicas e comandos resumidos para começarmos a trabalhar com o Git

Instale o Git:
Git para Linux
Git para Windows
Git para OSX

Crie um novo repositório
Crie uma nova pasta ou somente abra a pasta que o seu arquivo/programa/teste/etc que deseja commitar esteja e execute o comando:
 git init  e ele criará um novo repositório.

Copie um repositório
Se você quer copiar um repositório Git já existente o comando necessário é:
 git clone /caminho/para/o/repositório 
Quando usar um servidor remoto, seu comando será:
 git clone usuário@servidor:/caminho/para/o/repositório 

Verifique o Status de Seus Arquivos
A principal ferramenta utilizada para determinar quais arquivos estão em quais estados é o comando git status. Se você executar este comando diretamente após uma clonagem, você deverá ver algo similar a isso:
 $ git status 
 # On branch master 
 nothing to commit (working directory clean) 
Que significa que não existem arquivos monitorados e modificados. Git também não encontrou qualquer arquivo não monitorado, caso contrário eles seriam listados aqui.

Adicione & confirme
Você pode propor mudanças (adicioná-las ao Index) usando:
 git add <arquivo>  ou  git add .  que adiciona todos os arquivos.
Este é o primeiro passo no fluxo de trabalho básico do git. Para realmente confirmar estas mudanças (isto é, fazer um commit), use:
  git commit -m "comentários das alterações" 
Agora o arquivo é enviado para o HEAD, mas ainda não para o repositório remoto.

Envie suas alterações
Suas alterações agora estão no HEAD da sua cópia de trabalho local. Para enviar estas alterações ao seu repositório remoto, execute:
 git push origin master 
Altere master para qualquer ramo (branch) desejado, enviando suas alterações para ele.
Se você não clonou um repositório existente e quer conectar seu repositório a um servidor remoto, você deve adicioná-lo com:
 git remote add origin <servidor> 
Agora você é capaz de enviar suas alterações para o servidor remoto selecionado.

Atualize & mescle
Para atualizar seu repositório local com a mais nova versão, execute:
 git pull  na sua pasta de trabalho para obter e fazer merge (mesclar) alterações remotas.
Para fazer merge de um outro branch ao seu branch ativo (ex. master), use:
 git merge <branch> 
Em ambos os casos o git tenta fazer o merge das alterações automaticamente. Infelizmente, isto nem sempre é possível e resulta em conflitos. Você é responsável por fazer o merge estes conflitos manualmente editando os arquivos exibidos pelo git. Depois de alterar, você precisa marcá-los como merged com:
 git add <arquivo>  antes de fazer o merge das alterações, você pode também pré-visualizá-as usando:
 git diff <branch origem> <branch destino> 

Sobrescreva alterações locais
No caso de você ter feito algo errado você pode sobrescrever as alterações locais usando o comando
 git checkout -- <arquivo> 
isto substitui as alterações na sua árvore de trabalho com o conteúdo mais recente no HEAD. Alterações já adicionadas ao index, bem como novos arquivos serão mantidos.
Se ao invés disso você deseja remover todas as alterações e commits locais, recupere o histórico mais recente do servidor e aponte para seu branch master local desta forma:
 git fetch origin 
 git reset --hard origin/master 

Remova Arquivos
Para remover um arquivo do Git, você tem que removê-lo dos arquivos que estão sendo monitorados (mais precisamente, removê-lo da sua área de seleção) e então fazer o commit. O comando  git rm faz isso e também remove o arquivo do seu diretório para você não ver ele como arquivo não monitorado (untracked file) na próxima vez.

Pra não esquecer:
Fluxo de trabalho
Seus repositórios locais consistem em três "árvores" mantidas pelo git. A primeira delas é sua Working Directory que contém os arquivos vigentes. A segunda Index que funciona como uma área temporária e finalmente a HEAD que aponta para o último commit (confirmação) que você fez.

Melissa Lobo,