codexico

Exemplos de $.when()

codexico — Mon, 14 Apr 2014 02:35:47 +0000

Atualizaçao: Mais exemplos e completão.

Caso Simples: dois ajax ao mesmo tempo

90% das vezes é isso que a gente precisa.

$.when(
  $.ajax('/value1'),
  $.ajax('/value2'))
.done(function (data1, data2) {
  console.log('os dois ajax terminaram');
  console.log('agora dá para chamar alguma função que usa as duas respostas dos ajax');
});

Muito prático, por exemplo para carregar um html, os dados necessários para preenchê-lo e depois inserir na página.

O que acontece é que o $.when recebe como parâmetros objetos chamados
“Deferreds“, uma tradução seria “adiados”, ou seja, objetos que não retornam
imediatamente, são adiados, em algum momento “prometem” que irão terminar.

Quando as promises terminam o “done” é executado.

Outros Exemplos

Grande parte dos erros que acontecem ao usar $.when() são por usar alguma função que não retorna uma promise.

function getFacebookData() {
  // criamos uma deferred para resolver somente quando termina o FB
  var dfd = new $.Deferred();
  // o FB acontece async e não retorna uma promise
  FB.api('/me', {fields: 'last_name'}, function(response) {
    console.log(response);
    // aqui avisamos ao $.when que o FB terminou
    dfd.resolve(response);
  });
  // retorna ao $.when uma promessa de que em algum momento a função vai terminar
  return dfd.promise();
}

function getTimeout() {
  // criamos uma deferred para resolver somente quando terminar o timeout
  var dfd = new $.Deferred();
  setTimeout(function() {
    // alguma coisa complexa acontecendo aqui
    // avisa ao $.when que terminou o getTimeout()
    dfd.resolve("fim");
  }, 1000);
  // retorna ao $.when uma promessa de que em algum momento a função vai terminar
  return dfd.promise();
}

// $.ajax retorna uma promise, mas não uma função com $.ajax dentro
function complexAjax(x) {
  var options = {
    url: '/url1',
    data: { param1: x }
  }
  // não é necessário criar a dfd aqui,
  // podemos retornar a própria promise do ajax
  return $.ajax(options);
}
$.when(
  getFacebookData(),
  getTimeout(),
  complexAjax('teste')
  .done(function (fbResponse, dataFromTimeout, ajaxData) {
  // as funções terminaram
});

Muitas funções do jQuery retornam uma promise, $.ajax() e $.animate() por exemplo.

Quando uma função não retorna a promessa, como o FB, podemos simplesmente criar uma e retornar quando quisermos.

Esse foi um resumão do funcionamento das deferreds, eu estava escrevendo um tutorial mas estava ficando muito grande, acho que os exemplos acima já resolvem muitos problemas, depois eu posto o completão com detalhes de Promise, Deferreds, when, then, done, async, etc.

Referências

Deferreds – http://api.jquery.com/jQuery.Deferred/

$.when – http://api.jquery.com/jquery.when/

The post Exemplos de $.when() first appeared on codexico.

DIY – slideshow em jQuery

codexico — Wed, 15 Dec 2010 23:46:53 +0000

Faça você mesmo um slideshow em jQuery

15 de dezembro de 2010

Neste artigo vamos descobrir que não é necessário ir atrás de plugins toda vez que precisamos fazer algo em jQuery. A biblioteca tem muitas ferramentas e quando a tarefa é simples é mais rápido fazer você mesmo (DIY) do que procurar plugins por aí.

Por exemplo, outro dia eu precisava que um conteúdo fosse trocado por outro quando o user clicasse em “próximo”, alguns chamam de slideshow, outros de apresentação, tem muitos plugins por aí, que fazem todo tipo de coisa com todo tipo de animação, mil tipos de piruetas psicodélicas…

Até encontrar um que fizesse o necessário e sem bugs e fácil de usar demoraria um pouco, e para piorar o sistema em que eu estava mexendo não permitia incluir outros arquivos javascripts e tinha pouco tempo para entregar. Muitas vezes a gente perde um tempão procurando plugins e no final nenhum dos 15 encontrados servem, esse parecia ser o caso, os plugins eram bem diferentes um do outro. Então resolvi fazer eu mesmo.

zero: html e css

Este será o html usado neste exemplo, todos os slides estão em uma lista e aparecem um abaixo do outro:

Demo zero

Um: javascript inicial

A ideia é pegar o html, esconder os slides e mostrar o primeiro.

Então adicionar um listener em cada botão, ao clicar o slide ativo é escondido substituído pelo próximo.

Mais uma linhazinha para quando chegar ao último voltar ao primeiro.

Em 17 linhas (descontando os comentários) já está montado um slideshow funcional:

Demo um

Dois: animação

Tá, funcionou, mas ficou sem graça, os slides trocam automaticamente sem efeito nenhum.

Vamos trocar o show() e hide() por um animate().

//ao clicar mostra o proximo slide $('#slideproximo').click(function(){ //esconde o slide atual $slideativo.animate({ "width": "toggle", "opacity": "toggle" }, "slow", function() {//com callback // //procura o proximo $slideativo = $slideshow.find("li.slideatual").next(); if(!$slideativo.size()) $slideativo = $slideshow.find("li.slide").first();//volta ao primeiro


    //remove o marcador do slide anterior

    $slideshow.find("li.slideatual").removeClass("slideatual");

    //coloca o marcador e mostra

    $slideativo.addClass("slideatual").animate({

      "width": "toggle", "opacity": "toggle"

    }, "slow");

  });

});
//ao clicar mostra o slide anterior

$('#slideanterior').click(function(){

  $slideativo.animate({

    "width": "toggle", "opacity": "toggle"

  }, "slow");//sem callback

$slideativo = $slideshow.find("li.slideatual").prev(); if(!$slideativo.size()) $slideativo = $slideshow.find("li.slide").last();//volta ao ultimo $slideshow.find("li.slideatual").removeClass("slideatual"); $slideativo.addClass("slideatual").animate({ "width": "toggle", "opacity": "toggle" }, "slow"); });

Demo dois

Repare que a animação de recolher usa um callback para começar a mostrar o outro slide só depois que o primeiro já terminou de recolher.

Mas ainda está meio estranha, tanto a animação “anterior” quanto “próxima” estão iguais, seria melhor que fossem diferentes.

Três: um pra cada lado

Para animar dqa esquerda para a direita primeiro o elemento precisa estar à esquerda $slideativo.show().css(“left”, $slideativo.outerWidth()*-1).css(‘opacity’, ‘0’);. Vários truques se escondem nessa linha:

outerWidth() serve para determinar o tamanho do slide

css(“left”, $slideativo.outerWidth()*-1) *-1 para colocar o slide à esquerda

show(), mas só funciona se o elemento estiver com “show”

css(‘opacity’, ‘0’) está com “show” mas ainda não deve aparecer.

$slideativo = $slideshow.find("li.slide").first().addClass('slideatual').css("left","0").show();


//ao clicar mostra o proximo slide

$('#slideproximo').click(function(){

  //esconde o slide atual para a direita

  $slideativo.animate({

    "left": "+="+$slideativo.outerWidth(),  "opacity": "0"

  }, "slow",  function() {//callback

    //procura o proximo

    $slideativo = $slideshow.find("li.slideatual").next();

    if(!$slideativo.size()) $slideativo = $slideshow.find("li.slide").first();//volta ao primeiro
    //remove o marcador do slide anterior

    $slideshow.find("li.slideatual").removeClass("slideatual");
    //posiciona na esquerda

    $slideativo.show().css("left", $slideativo.outerWidth()*-1).css('opacity', '0');

    //coloca o marcador e mostra

    $slideativo.addClass("slideatual").animate({

      "left": "0", "opacity": "1"

    }, "slow");

  });

});
//ao clicar mostra o slide anterior

$('#slideanterior').click(function(){

  //esconde o slide atual para a esquerda

  $slideativo.animate({

    "left": "-="+$slideativo.outerWidth(), "opacity": "0"

  }, "slow");

  //procura o proximo

  $slideativo = $slideshow.find("li.slideatual").prev();

  if(!$slideativo.size()) $slideativo = $slideshow.find("li.slide").last();//volta ao ultimo
  //remove o marcador do slide anterior

  $slideshow.find("li.slideatual").removeClass("slideatual");

//posiciona na direita $slideativo.show().css("left", $slideativo.outerWidth()).css('opacity', '0'); //coloca o marcador e mostra $slideativo.addClass("slideatual").animate({ "left": "0", "opacity": "1" }, "slow"); });

Repare que em uma está usando callback e na outra não, dessa maneira uma espera desaparecer para mostrar enquanto na outra os slides correm grudados, fica à escolha do freguês, veja a demo três.

Foi necessário também adicionar um .css("left","0") para posicionar corretamente os slides.

O css também teve que mudar um pouco:

#slides{ list-style-type: none; width: 200px; overflow: hidden; } .slide{ width: 200px; height: 200px; border: 1px solid #000; left: -200px; position: absolute; }

Pronto, agora a animação é diferente, ao clicar em “anterior” os slides correm para a esquerda e em “próximo” os slides correm para a direita.

Demo Três

Quatro: Plugin

Beleza, agora se quiser mesmo fazer um plugin fica fácil, esse DIY não é sobre fazer plugin então vou economizar e usar o starter, um gerador de código que gera um template para plugins jQuery.

O código então fica assim (jquery.slideshow.js) (um pouco maior que as 17 linhas iniciais):

(function ($) { //http://starter.pixelgraphics.us/ $.slideshow = function (el, options) { // To avoid scope issues, use 'base' instead of 'this' // to reference this class from internal events and functions. var base = this; // Access to jQuery and DOM versions of element base.$el = $(el); base.el = el; // Add a reverse reference to the DOM object base.$el.data("slideshow", base);


    base.init = function(){

      //junta as opcoes default com as passadas na chamada do plugin

      base.options = $.extend({},$.slideshow.defaultOptions, options);
      //um nome mais pratico para base.$el

      $slideshow = base.$el;

      //inicialmente esconde os slides

      $slideshow.find("li.slide").hide();

      //encontra o prmeiro slide e ativa-o

      $slideativo = $slideshow.find("li.slide").first().addClass('slideatual').css("left","0").show();
      base.proximo();

      base.anterior();

    };
    base.proximo = function(paramaters){

      //ao clicar mostra o proximo slide

      $('#slideproximo').click(function(){

        //esconde o slide atual para a direita

        $slideativo.animate({

          "left": "+="+$slideativo.outerWidth(),

          "opacity": "0"

        }, "slow");

        //procura o proximo

        $slideativo = $slideshow.find("li.slideatual").next();

        if(!$slideativo.size()) $slideativo = $slideshow.find("li.slide").first();//volta ao primeiro
        //remove o marcador do slide anterior

        $slideshow.find("li.slideatual").removeClass("slideatual");
        //posiciona na esquerda

        $slideativo.show().css("left", $slideativo.outerWidth()*-1).css('opacity', '0');

        //coloca o marcador e mostra

        $slideativo.addClass("slideatual").animate({

          "left": "0",

          "opacity": "1"

        }, "slow");

      });

    };
    base.anterior = function(paramaters){

      //ao clicar mostra o slide anterior

      $('#slideanterior').click(function(){

        //esconde o slide atual para a esquerda

        $slideativo.animate({

          "left": "-="+$slideativo.outerWidth(),

          "opacity": "0"

        }, "slow");

        //procura o proximo

        $slideativo = $slideshow.find("li.slideatual").prev();

        if(!$slideativo.size()) $slideativo = $slideshow.find("li.slide").last();//volta ao ultimo
        //remove o marcador do slide anterior

        $slideshow.find("li.slideatual").removeClass("slideatual");
        //posiciona na direita

        $slideativo.show().css("left", $slideativo.outerWidth()).css('opacity', '0');

        //coloca o marcador e mostra

        $slideativo.addClass("slideatual").animate({

          "left": "0",

          "opacity": "1"

        }, "slow");

      });

    };
    // Run initializer

    base.init();

  };
  $.slideshow.defaultOptions = {

  //colocar aqui opcoes default

  };

$.fn.slideshow = function(options){ return this.each(function () { (new $.slideshow(this, options)); }); }; })(jQuery);

E para chamar o plugin basta incluir o script acima e “$(‘#slideshow’).slideshow();”

Demo quatro

No total demorou 1 hora para chegar na etapa 3, acho que demoraria mais ou menos a mesma coisa para encontrar um plugin que fizesse algo parecido, mas também poderia gastar esse tempo todo e não encontrar nenhum adequado.

Você já passou por isso também? Deixe um comentário.

PS: este post foi feito em html5, confira o código na demo principal

Também no github: https://github.com/codexico/diy-slideshow-jQuery

The post DIY – slideshow em jQuery first appeared on codexico.

Tutorial simples parte 2: git branch e merge

codexico admin — Tue, 16 Nov 2010 02:11:42 +0000

A parte 1 (Como usar o git e o github) foi sobre instalar o git, ssh-key, criar um projeto no github e os commits básicos.

Em projetos super simples tudo bem, mas para qualquer coisa maiorzinha já é melhor usar branchs, é fácil também, nem tirei o simples do título do post.

Vou abordar os branchs de forma educacional, como se fosse um projeto de uma só pessoa. A parte 3 trará uma visão mais prática, com um fluxo de trabalho completo e voltado para equipes, graças ao git ainda será simples.

Será usado o mesmo repositório da parte 1.

Branch

Para criar um branch no diretório do projeto:

$ git branch parte2

Atenção, somente foi criado o branch, o git não mudou para ele, qualquer alteração ou commit será feito no master. O git mostra onde está:

$ git branch
* master
parte2

Para mudar para o branch é necessário um checkout:

$ git checkout parte2
Switched to branch 'parte2'

Os dois passos podem ser substituídos por um só (mas é sempre bom saber de onde veio):

git checkout -b parte2

Agora sim as modificações serão feitas no branch correto. Que tal criar um diretório, uns arquivos e também alterar o README da parte 1?

mkdir parte2
touch parte2/testeparte2
git add .
git commit -m "arquivo para testes da parte2"
vim README
git commit -a -m "README parte2"

Foram criados dois commits, ambos no branch parte2, um push agora não irá alterar nada no repositório.

Merge

Para enviar as modificações é necessário primeiro um checkout para voltar ao master, depois o merge com o branch e então o push.

Dica: TAB autocompleta os comandos e também os nomes dos branchs.

git checkout master
git merge parte2
git push origin master

Foi enviado o código mas o github não percebeu que havia um branch pois o branch está somente na máquina local, para enviar o branch ao repositório o push muda um pouco:

git push origin parte2:parte2

O formato é o seguinte git push repositorioRemoto nomeLocalDoBranch:nomeRemotoDoBranch, assim dá para enviar com um nome diferente se quiser.

git checkout parte2
vim parte2/testeparte2
git commit -a -m "texto teste"
git push origin parte2:parte2

Agora sim dá para ver que existe um branch, olha lá https://github.com/codexico/tutorial-github/network

Quando não for mais usá-lo, o branch pode ser deletado com:

git branch -d nome-do-branch

Legal, já deu pra perceber que dá por exemplo para trabalhar em uma nova funcionalidade do projeto sem alterar o código principal. Quando tudo estiver pronto, os testes passaram e tal, pode ser feito o merge e só então enviar para o repositório.

Pronto, acabou o básico sobre branch e merge com git.

Branch e Merge exemplo 2

Até agora foi muito básico, normalmente enquanto se está trabalhando num branch aparece um bug para ser arrumado no master, ou outro branch também está sendo trabalhado, ou seu sistema de desenvolvimento é dividido em produção, desenvolvimento, homologação e outros, são muitas possibilidades, cada lugar trabalha de uma maneira. Na parte 3 terá mais sobre isso.

Agora um exemplo um pouquinho mais trabalhado:

git checkout -b funcionalidadeX
touch funcionalidadeX
git add .
git commit -m "funcionalidadeX iniciada"
vim funcionalidadeX
git add .
git commit -m "funcionalidadeX parcialmente executada"

Foi iniciado um branch para a funcionalidadeX e depois de alguns commits ela ainda não está finalizada.

Então apareceu um bug no master que precisa ser corrigido rapidamente (colocar o link da parte2 antes do texto da parte2 do README, urgente né, o usuário é fogo).

git checkout -b bug42
vim README
git commit -a -m "bug 42 corrigido"
git checkout master
git merge --no-ff bug42
git branch -d bug42

Foi criado um branch para o bug, o bug foi corrigido, voltou ao master, foi dado um merge para incluir as alterações no master e então o branch foi deletado. A opção –no-ff é utilizada para forçar a criação de um commit, sem ela o merge não cria commit e fica mais difícil recuperar o código anterior.

Agora é só completar a funcionalidade X.

git checkout funcionalidadeX
vim funcionalidadeX
git commit -a -m "funcionalidadeX finalizada"
vim README
git commit -a -m "README atualizado com a funcionalidadeX"
git checkout master
git merge --no-ff funcionalidadeX

Correu tudo bem? Pode ser que sim, o github vai fundir o código da funcionalidadeX com o master, que já contém a correção do bug. Mas e se a correção conflita com as alterações da funcionalidade X? Neste caso o git mostra um alerta e não permite o merge, mas mostra os conflitos:

git status

Os conflitos precisam ser corrigidos manualmente e então o merge será aceito. O git inclui marcações no código dos arquivos em conflito para ajudar na resolução do conflito.

Com um fluxo de trabalho melhorzinho dá para evitar muitos conflitos, logo mais na Parte 3 do tutorial…

No final os merges ficaram assim:

Para finalizar uma tag:

git tag -a v2.0 -m 'parte 2'
git push origin v2.0

Referências:

Pro Git – Basic Branching and Merging
github – Working with remotes
nvie.com – A successful Git branching model

The post Tutorial simples parte 2: git branch e merge first appeared on codexico.

Tutorial simples: Formas básicas do canvas no html5

codexico — Sun, 17 Oct 2010 18:14:38 +0000

No html5 apareceu a tag

Como sou péssimo para desenhar resolvi experimentar com o canvas quando tive que fazer um ícone para a extensão de utf-8 que fiz para o Google Chrome, na documentação dizia que o ícone podia ser em canvas (é bom para extensões que mostram algum movimento no ícone), então vamos nessa ⚡

O ícone da extensão envolve os 3 principais e mais simples elementos, um retângulo, um círculo e texto.

Tudo começa com um arquivo html:


Canvas tutorial

Mas assim ele não faz nada, precisa executar ao carregar a página, para isso é necessário um pouquinho de javascript. Um template para começar um canvas ficaria assim:

A forma mais básica é o retângulo, prático para demarcar o tamanho do desenho.

O canvas só suporta diretamente retângulos e texto, para o resto é necessário um “path”, usamos beginPath() para iniciar e closePath() para terminar, só então dá pra desenhar com o stroke() ou o fill().


function draw(){
var canvas = document.getElementById('icon');
if (canvas.getContext){
var context = canvas.getContext('2d');

//retangulo
context.strokeStyle = "red";
context.strokeRect(0,0,128,128);

//circulo
context.fillStyle = "rgba(241, 178, 21, 0.3)";
context.strokeStyle = "blue";
context.beginPath();
var x = 64; // = 128/2 - centraliza o circulo
var y = 64;
var radius = 64; //raio do circulo = diametro/2
var anticlockwise = true;
var startAngle = 0; //inicia o arco na posição 0 graus (direita)
var endAngle = Math.PI*2; //termina o arco na posição 360 graus (volta completa)
context.arc(x, y, radius, startAngle, endAngle, anticlockwise);
context.closePath();
context.stroke(); //desenha a borda
context.fill(); //preenche

}
}

Como a extensão que eu estava fazendo envolvia caracteres utf-8, resolvi economizar no desenho e usar uma estrela em utf mesmo.

Repare que além dos métodos para incluir o texto na imagem foi necessário incluir “” para o caracter aparecer corretamente.

Só que ficou meio normal demais esse ícone. ¿Que tal brincar um pouco com os ângulos do arc?


//texto
context.strokeStyle = "rgba(2, 93, 198, 1)";
context.fillStyle = "rgba(2, 93, 198, 0.9)";
context.font = "italic bold 146px sans-serif";
context.fillText("✪", 3, 117);

//circulo
context.fillStyle = "rgba(241, 178, 21, 0.3)";
context.beginPath();
var startAngle = (Math.PI * 3.78) / 2; //comeca um pouco acima do 0
var endAngle = Math.PI + (Math.PI * 3.42) / 2; //termina no sudoeste
context.arc(64, 64, 64, startAngle, endAngle, true);
context.closePath();
context.fill();

Tá, mas até agora o desenho só apareceu no navegador, se tentar salvar vai baixar o fonte e não a imagem! Para criar um png do canvas o método é canvas.toDataURL()


//texto
context.strokeStyle = "rgba(2, 93, 198, 1)";
context.fillStyle = "rgba(2, 93, 198, 0.9)";
context.font = 'italic bold 146px sans-serif';
context.fillText("✪", 3, 117);
//circulo
context.fillStyle = "rgba(241, 178, 21, 0.3)";
context.beginPath();
var startAngle = (Math.PI*3.78)/2;
var endAngle = Math.PI+(Math.PI*3.42)/2;
context.arc(64,64,64,startAngle,endAngle,true);
context.closePath();
context.fill();

//criar imagem png
window.open(canvas.toDataURL());

Vai tentar abrir um popup, não esqueça de liberar.

Por hoje é só pessoal!!

Para saber mais sobre canvas:
https://developer.mozilla.org/en/Canvas_tutorial

Se tiver curiosidade segue o link para a extensão utf-8:
Firefox: https://addons.mozilla.org/en-US/firefox/addon/242192/
Chrome: https://chrome.google.com/extensions/detail/fcemphgmjnjpmmdhcedhjiegickfbiia

The post Tutorial simples: Formas básicas do canvas no html5 first appeared on codexico.

Símbolos para usar no twitter

codexico — Thu, 07 Oct 2010 23:49:50 +0000

Atualização: Fica fácil de usar as letras com o plugin para Google Chrome.

No twitter é possível inserir símbolos bacanas no lugar de palavras e assim deixar as mensagens mais curtas para caber nos 140 caracteres. Também serve para outros sites que utilizem utf-8.

Alguns exemplos:

Vou para o ✈ antes q a☽ apareça, mas antes vou tomar um ☕ pq tá ☔, qd chegar te 

Grande , ✍ e me manda os detalhes por ✉ para eu dar um ✔

vamos declarar ⚐ para dar uma chance à ☮

☄ se aproxima da terra, risco de ☢☣

 temos q colocar na ⚖ antes de tomar a decisão

I ♥ you

É bem difícil encontrar os símbolos, então juntei alguns dos principais e mais úteis a seguir:

Carinhas, smiles, emoticons:
☹ ☺ ☻ ☃ ☠ 

Sinais:
⚠ ⚡ ✆   ♿

Coisas úteis:
✈  ☎ ☏ ☂ ☔ ✉ ☄☽ ☾☕ ✇ ❤   

Religiões:
☯ ✝ ✞ ✟ ☨ ☦ ☭ ☮ ☪ ☫ ☬ ☩ ✠ ☧ ✡

Signos:
♈ ♉ ♊ ♋ ♌ ♍ ♎ ♏ ♐ ♑ ♒ ♓

Gênero (um desses deve ser zumbi, só não sei qual):
♀ ♂ ☿ ♁ ⚢ ⚣ ⚤ ⚥ ⚦ ⚧ ⚨ ⚩

Flores:
❁ ❀ ✿ ✽ ✾ ❃ ⚘ ☘ 

Xadrez:
♚ ♔ ♛ ♕ ♜ ♖ ♝ ♗ ♞ ♘ ♟ ♙

Cartas:
♥ ♡ ♠ ♤ ♦ ♢ ♣ ♧

Estrelas:
✩ ★ ☆ ✪ ✫ ✬ ✭ ✮ ✯ ✰ ☼ ☸ ☉ ❂

Música:
♬ ♫ ♪ ♩

Reciclagem:
♺ ♽ ♼ ♻ ♲ ♳ ♴ ♵ ♶ ♷ ♸ ♹

Asteriscos:
✱ ✲ ✳ ✴ ✵ ✶ ✷ ✸ ✹ ✺ ✻ ✼ ❉ ❊ ❋

Flocos de neve:
❄ ❅ ❆

Profissões:
☤ ⚕ ⚒ ⚓ ⚙ ⚜

Ciência:
☢ ☣ ⚝ ⚛

Marcadores:
☐ ☑ ☒ ✓ ✔ ✕ ✖ ✗ ✘ ✚

Mãos:
✌ ✍ ☟ ☝ ☜ ☚ ☞ ☛

Setas:
➘ ➙ ➚ ➝ ➜ ➟ ➡ ➢ ➤ ➩ ➿ ⟲ ⟳ ⟷ ⟵ ⟶ ⟿

Tesoura e lápis:
✂ ✄ ✏ ✎ ✐

Marcas:
© ® ™ 

Moedas:
£ $ €

Matemática:
∞ ø ≠ % …     ∫ ≈ ∴ ∝

Letras antigas:
   µ ∂ Ω Φ Ψ λ ϴ ω

A interrogação usada em espanhol (acho que deveria ser utilizada em todos os idiomas):
¿

Temperatura:
℃ ℉

Bandeiras:
⚑ ⚐

Ahnn, sei lá:
¶ § ❝ ❞ ❦ ☙ ♨ ☁ ⚖

Se quiser copiar todos estes caracteres especiais acima juntos de uma vez, deixei aqui: http://codexico.com.br/files/utf8.html

Quando estiver fazendo um html não esqueça de avisar ao navegador que o conteúdo é utf, colocando no :

E html5 fica assim:

Links para as tabelas completas de caracteres:

http://macchiato.com/unicode/chart/ separados por tipos e bem organizado

http://www.utf8-chartable.de/unicode-utf8-table.pl separados por tipos e com mais informações

http://www.alanwood.net/unicode/menu.html separados por tipos e com uma página para cada

http://tlt.its.psu.edu/suggestions/international/bylanguage/mathchart.html especializado nos caracteres matemáticos

Olha só um jogo de xadrez em 140 caracteres:

1 e4 ♞f6
2 e5 ♞d5
3 c4 ♞b6
4 d4 d6
5 f4 dxe5
6 fxe5 ♞c6
7 ♗e3 ♝f5
8 ♘c3 e6
9 ♘f3 ♝e7
10 e2 O-O
11 O-O f6
12 ♘h4 fxe5
13 ♘xf5 exf5
14 d5 ♞d4!

➤➤ ¿Conhece + exemplos de frases usando ut-8? Quem escrever nos comentários ganha uma estrelinha ☆

Atualização [17/10/10]

Se ainda não te convenci, olha o gráfico do google mostrando que em 2008 utf já era a codificação mais usada:

Novidade: Você leu e pensou "¿O xico tá emo agora, escrevendo sobre coisinhas bonitinhas? ¿Ou está tentando aumentar a audiência com coisinhas pops?", nada disso, é que eu estava aprendendo a fazer extensões para o Firefox e precisava de algo fácil de fazer.

Então aí está uma extensão para Firefox e outra para o Google Chrome:

https://addons.mozilla.org/en-US/firefox/addon/242192/

https://chrome.google.com/extensions/detail/fcemphgmjnjpmmdhcedhjiegickfbiia

Ainda estão bem básicas, mas vai melhorar, as próximas mudanças estão em http://www.pivotaltracker.com/projects/127653, se tiver uma ideia escreva lá.

O código, como sempre está no github:

firefox: http://github.com/codexico/UTF-8-Firefox-Extension

chrome: http://github.com/codexico/UTF-8-Chrome-Extension

The post Símbolos para usar no twitter first appeared on codexico.

Copiar ou clonar uma VM no VirtualBox é fácil

codexico — Tue, 31 Aug 2010 20:48:43 +0000

Em dois simples passos (ou três se tiver snapshots) a VM está clonada.

Só um detalhe exige atenção, se a VM tiver snapshots, o estado clonado será o do snapshot mais antigo, se quiser o mais novo será necessário eliminar os snapshots até que reste somente o estado atual que é desejado clonar.

Vá até a pasta onde ficam as VM’s (~/.VirtualBox/HardDisks) e use o comando:

VBoxManage clonehd nome_vm_existente.vdi nome_do_clone.vdi

Vai aparecer algo do tipo:

Oracle VM VirtualBox Command Line Management Interface Version 3.2.8
(C) 2005-2010 Oracle Corporation
All rights reserved.

0%…10%…20%…30%…40%…50%…60%…70%…80%…90%…100%
Clone hard disk created in format ‘VDI’. UUID: 8c97595a-08a9-4333-9ce9-dcbe4cd8f2a3

O que este comando fez foi criar um novo hd, a vantagem é que ele clona o conteúdo da VM anterior. Se ainda não usou o disco e quiser deletá-lo (por exemplo se criou com nome errado, ou desistiu da cópia), basta ir até a pasta ~/.VirtualBox/HardDisks e apagar o .vdi que acabou de criar. Se já está em uso, pode apagá-lo no Gerenciador de Mídias Virtuais (Ctrl+D).

Então basta criar uma nova máquina virtual (Máquina > Novo) e quando for solicitado se gostaria de criar um novo disco ou usar um existente, clique para escolher um existente. Na tela que aparece ainda não mostrará o clone, para que apareça clique em “Acrescentar” e adicione o disco que criou no passo anterior.

Pronto, mais fácil que isso só se tivesse um botão “Clonar”!

Todos os tutoriais ou blogs que encontrei estavam desatualizados, tinham uns passos a mais e não eram em português, por isso escrevi esse. Pensei em colocar umas imagens ou fazer um screencast, mas ficou tão simples que vai só o texto mesmo. Qualquer dúvida ou sugestão mande um comentário.

Comentário extra: experimente Ctrl(direita)+L quando estiver usando a VM, é muito legal!

Possíveis contratempos:

Se acontecer um erro do tipo:

VBoxManage: error: Cannot register the hard disk ‘/….vdi’ {ae40c3b3-0b98-4395-a1d0-4f2530312215} because a hard disk ‘/….vdi’ with UUID {ae40c3b3-0b98-4395-a1d0-4f2530312215} already exists
VBoxManage: error: Details: code NS_ERROR_INVALID_ARG (0x80070057), component VirtualBox, interface IVirtualBox, callee nsISupports
Context: “OpenMedium(Bstr(pszFilenameOrUuid).raw(), enmDevType, AccessMode_ReadWrite, pMedium.asOutParam())” at line 209 of file VBoxManageDisk.cpp

A solução é trocar o UUID da vdi, não há nenhum problema em trocar o UUID basta um comando simples:

VBoxManage internalcommands sethduuid nome_vm_existente.vdi

Então repita o camando clonehd.

Outro problema que pode ocorrer é depois de trocar o UUID a VM não iniciar porque o UUID ficou diferente do registrado.

Na mensagem de erro aparece o UUID, copie e substitua no comando:

VBoxManage internalcommands sethduuid nome_vm_existente.vdi 82caefd3-be95-4736-80e7-268d4a2558e0

Refs:
http://www.virtualbox.org/manual/ch05.html#cloningvdis
http://www.virtualbox.org/manual/ch08.html#vboxmanage-clonevdi
http://srackham.wordpress.com/cloning-and-copying-virtualbox-virtual-machines/

The post Copiar ou clonar uma VM no VirtualBox é fácil first appeared on codexico.

Por que fiz o http://ttlocal.info

codexico — Mon, 26 Jul 2010 21:10:06 +0000

Estava estudando a api do twitter para um site que estou desenvolvendo que terá bastante integração do twitter. Aí começou a história do "Cala Boca Galvão" e comecei a olhar para o "Trending" que fica na home do twitter quando se está logado.

Lá só aparece uma de cada vez, estavam dizendo que o "Cala Boca Galvão" estava entre os primeiros do mundo mas eu havia deixado o Trending configurado para o Brasil. Quando fui mudar percebi que é difícil acompanhar 2 locais, só dá pra ver um de cada vez, aí o curioso não consegue saber se um topic passou de local a mundial, ou se está sendo comentado em outros lugares também.

Então resolvi fazer um site com todos os locais ao mesmo tempo.

Agora basta acessar o http://ttlocal.info que estão todos lá.

Claro que ainda está em beta, fiz em 2 dias, um durante a copa, aí tive que fazer outras coisas e retomei para terminar somente hoje. Ainda vou trocar o layout (a Mary está fazendo) e colocar alguma forma de ordenação por país.

No próximo post coloco detalhes de código para o pessoal programador.

Escreva um comentário. Sugestões são bem-vindas!

The post Por que fiz o http://ttlocal.info first appeared on codexico.

Como instalar Rails 3 no (k) ubuntu

codexico — Wed, 09 Jun 2010 00:50:38 +0000

Instalação básica do Rails 3 em um linux (K)ubuntu zero km, depois de muitos testes cheguei a esse conjunto de 6 etapas (testado nas versões 10.04 e 10.10):

1) Instalar os pre-requisitos e ruby

sudo apt-get install curl bison build-essential zlib1g-dev libssl-dev libreadline6-dev libxml2-dev git-core subversion autoconf sqlite3 libsqlite3-dev ruby-full rake rubygems

Atualização (03/12/2010): As instruções funcionam também no Debian. A única diferença é no debian stable “lenny” onde basta trocar libreadline6-dev por libreadline5-dev.

Atualização (18/03/2011): Como o Felypeguimaraes lembrou nos comentários, só use “sudo” nos comandos onde estiver escrito “sudo”, se usar sudo para instalar o rvm ou gem, etc, não vai funcionar.

Depois de +50MB de download, já dá para conferir qual a versão instalada:

ruby -v

2) Instalar o rvm http://rvm.beginrescueend.com/, ele tem muitas vantagens, auxilia a instalação e a manutenção de vários ambientes:

bash < <(curl https://rvm.beginrescueend.com/install/rvm)

3) Editar o arquivo .bashrc. Esse passo pode ser um pouco chato.

Após instalar o rvm aparece esse aviso:

You must now finish the install manually:

1) Place the folowing line at the end of your shell’s loading files(.bashrc or .bash_profile for bash and .zshrc for zsh), after all path/variable settings:

[[ -s $HOME/.rvm/scripts/rvm ]] && source $HOME/.rvm/scripts/rvm

2) Ensure that there is no ‘return’ from inside the .bashrc file. (otherwise rvm will be prevented from working properly).

This means that if you see ‘[ -z ] && return’ then you must change this line to:

if [[ ! -z ]] ; then

… original content that was below the && return line …

fi # <= be sure to close the if.

#EOF .bashrc

Be absolutely *sure* to REMOVE the ‘&& return’.

If you wish to DRY up your config you can ‘source ~/.bashrc’ at the bottom of your .bash_profile.

placing all non-interactive items in the .bashrc, including the ‘source’ line above

No linux Mint foi só adicionar a linha no final. Já no Ubuntu a maneira mais fácil encontrei nesse fóum http://ubuntuforums.org/archive/index.php/t-1392189.html

3.1) renomear o .bashrc para .bashrc_part2

cp .bashrc .bashrc_part2

3.2) remover no .bashrc_part2 a linha com ‘… && return’, linha 6

3.3) esvaziar o .bashrc e colocar o conteúdo:

[[ -s $HOME/.rvm/scripts/rvm ]] && source $HOME/.rvm/scripts/rvm
if [[ ! -z "$PS1" ]] ; then
  source ~/.bashrc_part2
fi

4) Feche o terminal e abra um novo terminal para recarregar o bashrc e o rvm funcionar direitinho.

rvm info

A versao atual do ruby ainda deve ser a mesma de antes:

ruby -v

4.1) Instalar ruby pelo rvm

(rvm install ruby-head) instalou o 1.9.3dev, testando mais um pouco vi que o head dá problema quando vai usar o console do rails, então é melhor instalar o 1.9.2 mesmo

rvm install 1.9.2

Demora alguns minutos, aguenta firme. Após a instalação ainda não vai aparecer:

ruby -v

4.2) Escolher a versão do ruby como default

(rvm –default ruby-head)

rvm --default 1.9.2

Agora já aparece a versão head do ruby

ruby -v

4.3) O ruby mais novo ja está instalado e funcionando, só falta uma coisa antes de instalar o rails, também demora, uns 5~10 minutos:

gem install sqlite3-ruby

5) Chegou a hora, mais uns 10 minutos:

gem install rails

Atualização (29/11/2010): Parece haver um bugzinho na versão 3.0.3, se aparecer este erro:

ERROR:  Error installing rails:
	mail requires i18n (~> 0.4.1, runtime)

A solução é instalar o mail antes:

gem install mail

E depois desinstalar o i18n versão 5

gem uninstall i18n

Select gem to uninstall:
 1. i18n-0.4.2
 2. i18n-0.5.0
 3. All versions

Escolha a opção 2.

Então é só repetir o comando de instalação do rails.

6) Testar:

#criar a aplicacao

rails new appteste1

#ir para a aplicacao

cd appteste1

#ligar o servidor

rails s

bash < <(curl https://rvm.beginrescueend.com/install/rvm)

#acessar no navegador

http://localhost:3000

Extras:

Mysql

sudo apt-get install mysql-server
gem install mysql2

Se por algum motivo aparecer esse erro:

ERROR:  Error installing mysql:
	ERROR: Failed to build gem native extension.
...

A solução é:

sudo apt-get install libmysqlclient-dev

Agora já dá para gerar um rails usando mysql.

rails new appmysql1 -d mysql

Problemas:

Instalando no virtualbox não reconhecia o repositório de gems, dava timeout.

Trocar o endereço padrão melhorou um pouco, no fundo dá na mesma, parece que depende de dns, conexão, provedor, firewall, sei lá..:

gem sources -a http://gems.rubyforge.org gem sources -r http://rubygems.org/

Algumas vezes não vai de primeira, mas na segunda, ou terceira tentativa vai. Não sei se ajudou, mas algumas vezes copiei o endereço de erro (por exemplo: http://gems.rubyforge.org/gems/sqlite3-ruby-1.3.0.gem) e acessei pelo navegador, aí o script acordou e encontrou a gem, vai entender…

Refs:

http://rvm.beginrescueend.com/rvm/install/

Será que vale um vídeozinho? Ou um script para fazer tudo de uma vez?

The post Como instalar Rails 3 no (k) ubuntu first appeared on codexico.

Como instalar vários programas de uma só vez no Windows

codexico — Sun, 30 May 2010 05:00:16 +0000

O windows logo após a instalação vem com poucas coisas úteis, nem um navegador de internet vem junto (¿alguém acha q o IE é navegador?), aí a gente perde um tempão para pesquisar, baixar e instalar softwares para tornar o pc usável (+- pq ainda é windows né!). Bom, deixando a discussão de lado, vou escrever sobre como diminuir o drama.

Há algum tempo começaram a aparecer maneiras de facilitar a instalação de múltiplos programas ao mesmo tempo e manter uma lista de preferidos.

Bem antigamente a gente gravava os programas favoritos em alguns disquetes e andava com eles por aí. Depois com os cds já dava para guardar mais coisas, mas aí o mundo acelerou e os programas ficavam obsoletos muito rapidamente, quando vc pegava o cd e instalava os programas, tinha que conectar para atualizar a maioria dos programas. De vez em quando a gente queimava outro cd para atualizar os programas, com os pendrives pelo menos acabou o desperdício.

1) PortableApps

Menu do Portable Apps no Windows

Veio o PortableApps [1]. Além de ser um conjunto de softwares fácil de manter atualizado, ainda roda tudo direto do pendrive. Mas ele não é exatamente para instalar os softwares no pc, até pode ser usado assim mas não é sua função principal. Nem é para usuários comuns, pois exige alguns conhecimentos e faz umas coisas diferentes, como deixar os ícones fora do menu padrão do windows.

Pró: Conjunto completo de programas

Contra: A maioria dos softwares são alterados para rodar de pendrive e não têm a mesma performance e integração ao sistema

Licença: free (as in freedom and beer)

2) Google Pack

Programas instalados pelo Pack

Uma das primeiras tentativas de organizar a bagunça veio com o Google Pack [2], que instala vários softwares de uma só vez.

Pró: instala vários em um só click e os mantém atualizados

Contra: poucos softwares e deixa um programa rodando em background

Licença: free (as in beer)

3) AppSnap

AppSnap estilo Synaptic

Existiram também uns softwares inspirados nos repositórios do Linux, como o AppSnap [3], que mostra uma lista de softwares onde vc pode escolher vários e instalar todos juntos.

Pró: lista grande de softwares e mantém atualizados

Contra: última atualização em 2008

Licença: free (as in freedom and beer)

4) ZeuApp

Outro notável é o ZeuAPP [4], só que esse só instala um de cada vez.

Pró: grande lista de softwares livres e grátis

Contra: instala um de cada vez

Licença: free (as in freedom and beer)

5) SIP

Tela do Smart Installer Pack

Aí tem o Smart Installer Pack [5], que é um programa até grandinho (25mb) com uma lista boa de softwares, interface bonitinha, mas precisa instalar e deu uns problemas quando testei. E tem propagandas dentro dele.

Pró: interface bonitinha

Contra: deu uns paus (instalou o google chrome em romeno!)

Licença: free (as in beer)

6) NINITE

Agora tem uns que são web, não precisa instalar, no Ninite [6] por exemplo basta escolher os programas na página e baixar o instalador. Tem também uma versão paga com um modo offline útil para quem faz manutenção. Promete perceber se o sistema é 32 ou 64 bits.

Pró: não precisa instalar

Contra: a lista de programas não é muito grande, mas é o suficiente

Licença: free (as in beer), tem também versão paga

7) AllMyApps

Allmyapps baixando aplicativos

Outro web com uma lista maior de softwares é o Allmyapps [7], funciona como o Ninite. Porém exige cadastro, mas dá para cadastrar por twitter, facebook, yahoo, openid … Tem separação para xp, vista, 7, e acredite, ubuntu 8.04, 8.10, 9.04 e 9.10!!

Algumas vezes dá problema se algum dos softwares já está instalado no micro, ou se um dos programas engasga no downloado ou na instalação e outros probleminhas.

Pró: não precisa instalar, lista grande de softwares

Contra: exige cadastro

Licença: free (as in beer)

Atualização:

8) FreeApp

Funciona como o AllMyApps, mas o FreeApp [8] não exige cadastro, a lista de softwares é um pouco menor mas tem de tudo, bacaninha.

Pró: não precisa instalar, lista grande de softwares, não exige cadastro

Contra: –

Licença: free (as in beer)

Conclusão:

Para a maioria dos casos serve o Allmyapps FreeApp.

Caso queira uma lista ainda melhor de softwares e um programa livre o melhor é o Zeuapp.

Se o Appsnap ainda estivesse sendo atualizado seria o melhor, pena que o desenvolvimento parou : (

[1] http://portableapps.com/

[2] http://pack.google.com/intl/en/pack_installer.html

[3] http://appsnap.genotrance.com/

[4] http://blog.zeusoft.net/zeuapp/

[5] http://www.smartinstallerpack.com/

[6] http://ninite.com/

[7] http://www.allmyapps.com

[8] http://www.freenew.net/index.html

Não conheço muitos usuários desses softwares então por favor se vc usa algum deles ou conhece outro, deixe um comentário.

The post Como instalar vários programas de uma só vez no Windows first appeared on codexico.

Como scannear e editar imagem no kubuntu 10.04

codexico — Thu, 27 May 2010 21:16:56 +0000

Preciso scanear um documento e depois fazer uma edição da imagem no Kubuntu 10.04.

Beleza, passo 1: scanear.
Outro dia tive q fazer a mesma coisa no w7 e foi só conectar a hp c3180 que o w7 reconheceu, aí só precisei escrever “scan” no menu que já apareceu o aplicativo para scanear. Vamos ver como o kubuntu faz, conectei, reconheceu a impressora sem problema, vou scanear, epa, não tem programa para scanear. Devem ter cortado do cd para poupar espaço ( faz tempo que eu acho que a Canonical devia ter uma edição com mais programas intalados automaticamente ), como chamava o programa q escaneia mesmo? Vamos lá google…

Notícias novas [1], parece que tem um aplicativo do kde4 para scanner, chamado ‘skanlite‘, testado e aprovado, serve pra scannear direitinho.
Outras opções são o ‘xsane‘ ( era esse q eu havia esquecido o nome ) e o ‘gimp2.0-quiteinsane‘, a vantagem do último é que é integrado ao GIMP, testei e cumpre a função também.

Conclusão: qualquer um dos 3 softwares faz o básico, que é só o que preciso e usei.

Não doeu nada, passo 2: Editar a imagem.

Aiaiai, não vem mais o GIMP nos ubuntus, e nenhum dos softwares básicos (okular, gwenview, f-spot) editam as imagens, até servem para o crud (cortar, rodar, u?, dimensionar), mas para algo mais só conheço o GIMP mesmo. Pena q o tuxpaint não abre uma imagem, acho que serviria para várias coisas.

Então, como já instalei o gimp2.0-quiteinsane, vou de gimp mesmo.

Quase bom, quero colocar uma setinha na imagem mas com o lápis ficou muito feio (bem q o gimp podia ter uma maneira fácil de colocar clip-art como no tuxpaint). ¿Será que tem algo no repositório? Hehehe, tem um pacote chamado ‘openclipart-png’, depois de instalado as imagens ficam em ‘/usr/share/openclipart/png/’, mas são bem feinhas. Lembrei de um site que tem ícones grátis e diferente da maioria dos sites de ícones, estes são bonitos: Icons Etc [2]. Problema resolvido.

É, até que não foi difícil, acho que vale uma blogada, faz tempo que não escrevo nada. ¿Alguma opinião ou dica de outros programas?

[1] http://kubuntuforums.net/forums/index.php?topic=3104909.0
[2] http://icons.mysitemyway.com/

The post Como scannear e editar imagem no kubuntu 10.04 first appeared on codexico.

Tutorial simples: Como usar o git e o github

codexico — Thu, 11 Mar 2010 18:00:08 +0000

Ultimamente estou envolvido em vários projetos ao mesmo tempo com várias equipes diferentes, então controle de versão é essencial.

Segue um manualzinho básico para iniciar com o git, espero atualizar e complementar este passo-a-passo com mais exemplos logo.

O git serve para versionamento local, você pode compartilhar de algumas maneiras, a mais fácil é com serviços online. Neste exemplo vou usar o github, testei também o projectlocker, que dá repositórios private grátis, mas não gostei. Outro que parece legal é o Codaset, ainda não testei.

1) Instalar git

$ sudo apt-get install git-core

É necessário gerar uma chave ssh e fazer um cadastro em algum repositório git. ( Esta etapa não é exatamente sobre o git, mas sobre a segurança dos repositórios. )

Confira se vc já tem alguma chave com um “ls ~/.ssh/”, se já existir uma você pode utilizá-la ou gerar uma nova:

ssh-keygen -t rsa -C "comment"

“comment” é só um lembrete para saber do que se trata a chave, normalmente usa-se o seu nome de usuário do serviço que vai usar, por exemplo o github.

Falando nisso, está na hora de criar um usuário lá (http://github.com), vai lá que eu espero…

Depois de logado vá para https://github.com/account e clique em “SSH Public Keys” e “add another public key”. A cópia da chave precisa ser exata(eu ia escrever que ‘precisa ser precisa’ mas é feio né), então pode-se fazer assim:

sudo apt-get install xclip
cat ~/.ssh/id_rsa.pub | xclip -sel clip

Aí é só colar com um Ctrl+V normal. Agora já dá para se comunicar com o github:

ssh git@github.com

Vai aparecer “ERROR: Hi codexico! You’ve successfully authenticated, but GitHub does not provide shell access”, não se assuste com o ERROR, o que interessa é que o github te reconheceu. Qualquer duvida tem o help do github: Generating SSH keys (Linux).

Por padrão o git vai pegar o usuário do sistema, para que seu nome de usuário do github apareça corretamente use os comandos:

git config --global user.name "Your Name"
git config --global user.email codexico@gmail.com

2) Criar Projeto no github

1) Podemos criar um novo projeto ou usar um existente. Para criar um novo vá até o github e no alto da página clique em “Dashboard” e depois em “New Repository”.

Crie um espaço para o projeto no comnputador:

$ mkdir nomedoprojeto
$ cd nomedodiretorio

2) Iniciar um git neste diretório:

$ git init

Saída do comando:

Initialized empty Git repository in /nomedodiretorio/.git/

Deve aparecer um diretorio oculto .git, neste .git ficam as configurações que serão usadas para este projeto.

Por exemplo:

$ ls .git branches config description FETCH_HEAD HEAD hooks index info logs objects refs

3) Adicionar o repositório, neste exemplo vou usar um que criei para este tutorial, pode ser também o repositório criado no passo 1, o endereço fica na página do projeto (neste caso https://github.com/codexico/tutorial-github):

$ git remote add origin git@github.com:codexico/tutorial-github.git

Formato do comando:

“git remote add” adiciona um repositório ao git que foi iniciado neste diretório, “origin” é o apelido para o projeto, “git@github.com:codexico/tutorial-github.git” é o endereço do projeto.

Resultado:(apareceu a parte [remote “origin”])

$ cat .git/config [core] repositoryformatversion = 0 filemode = true bare = false logallrefupdates = true [remote "origin"] url = git@github.com:codexico/tutorial-github.git fetch = +refs/heads/*:refs/remotes/origin/*

4) Baixar(pull=puxar) o projeto:

$ git pull origin master

Formato do comando:

git pull apelidoDaOrigem apelidoParaDestino

Saída do comando:

remote: Counting objects: 52278, done. remote: Compressing objects: 100% (10917/10917), done. remote: Total 52278 (delta 40975), reused 51715 (delta 40669) Receiving objects: 100% (52278/52278), 8.33 MiB | 189 KiB/s, done. Resolving deltas: 100% (40975/40975), done. From git@github.com:codexico/tutorial-github.git * branch master -> FETCH_HEAD

3) Usar o git

Exemplo (escolha um nome diferente para o arquivo teste):

$ touch testegit

1) Adicionar as alterações:

– Podemos adicionar somente uma alteração:

$ git add testegit

– Ou adicionar todas as alterações:

$ git add .

Neste passo as alterações ainda não estão sob o controle de versão, elas somente foram adicionadas para quando der um commit.

2) Comitar as alterações:

$ git commit -m "mensagem teste para o tutorial"

É obrigatório acrescentar uma mensagem.

Saída do comando:

[master de2f5ce] teste para o tutorial 1 files changed, 1 insertions(+), 0 deletions(-) create mode 100644 testegit

Agora as alterações foram adicionadas ao controle de versão. Mas ainda estão somente na máquina local.

3) Enviar(push=empurrar) as alterações:

$ git push origin master

Saída do comando:

Counting objects: 4, done. Delta compression using up to 2 threads. Compressing objects: 100% (2/2), done. Writing objects: 100% (3/3), 288 bytes, done. Total 3 (delta 1), reused 0 (delta 0) To git@github.com:codexico/tutorial-github.git 3be4c21..de2f5ce master -> master

Se durante o tempo em que fez o pull e o push outra pessoa que também participe do projeto fez alterações o push será rejeitado. Então é necessário atualizar o projeto local antes de enviar novas alterações.

$ git fetch origin

Atualizar antes de enviar é uma boa prática a ser seguida para quem usa svn ou cvs e é obrigatória no git.

4)Pronto, confira as alterações no navegador acessando o endereço do projeto (http://github.com/codexico/tutorial-github neste exemplo).

Dica final: para que não precise digitar sempre a senha do ssh siga os passos desse link: http://help.github.com/working-with-key-passphrases/

Atualizado em 09/09/2010, mudei o repositório e adicionei instruções para gerar a chave ssh.

The post Tutorial simples: Como usar o git e o github first appeared on codexico.

apt-get install todos os compactadores e descompactadores no linux

codexico — Sun, 07 Feb 2010 19:14:15 +0000

Sempre que insatalo um sistema novo como o Ubuntu ficam faltando alguns detalhes, um deles é o suporte a todos os formatos de zip, além do gzip e bz2.

Instale tudo que precisa para compactar e descompactar em sistemas derivados do debian, como kubuntu, mint…

sudo apt-get install p7zip-full p7zip-rar lzma lzma-dev rar unrar-free p7zip ark ncompress

Assim devem aparecer também os menus de contexto nos gerenciadores de arquivo.

The post apt-get install todos os compactadores e descompactadores no linux first appeared on codexico.

css layout vertical center align

codexico — Sat, 23 Jan 2010 05:17:58 +0000

Melhores exemplos de como centralizar verticalmente um conteúdo no html com css tableless:

Cada um tem seus problemas, cada caso é um caso.

O primeiro por exemplo não funciona com doctype xhtml, só html4. E pra alinhar horizontalmente é só incluir um text-align:center;

The post css layout vertical center align first appeared on codexico.

codexico

Exemplos de $.when()

Atualizaçao: Mais exemplos e completão.

Caso Simples: dois ajax ao mesmo tempo

Outros Exemplos

Referências

DIY – slideshow em jQuery

Tutorial simples parte 2: git branch e merge

Branch

Merge

Branch e Merge exemplo 2

Referências:

Tutorial simples: Formas básicas do canvas no html5

Símbolos para usar no twitter

Copiar ou clonar uma VM no VirtualBox é fácil

Possíveis contratempos:

Por que fiz o http://ttlocal.info

Como instalar Rails 3 no (k) ubuntu

Extras:

Mysql

Problemas:

Refs:

Como instalar vários programas de uma só vez no Windows

1) PortableApps

2) Google Pack

3) AppSnap

4) ZeuApp

5) SIP

6) NINITE

7) AllMyApps

8) FreeApp

Conclusão:

Como scannear e editar imagem no kubuntu 10.04

Tutorial simples: Como usar o git e o github

1) Instalar git

2) Criar Projeto no github

3) Usar o git

apt-get install todos os compactadores e descompactadores no linux

css layout vertical center align

Vdot Media – Demo – Vertically center content with CSS

Centered Element of unknown height and width

Vertical and horizontal centering in valid CSS

Victoria’s Vertical Centering – Test Page

Centralizar verticalmente com CSS