2014-12-10T11:10:50-02:00

Criando um Virtual Host – Apache ( Ubuntu )

10 de dezembro de 201410 de dezembro de 2014/Jorge Rafael/2 Comentários

Primeiramente esse post é uma adaptação da postagem original ( https://www.digitalocean.com/community/tutorials/how-to-set-up-apache-virtual-hosts-on-ubuntu-14-04-lts ) essa será uma versão resumida, só com os comandos para agilizar o processo !

Cada domínio que esteja configurado irá direcionar o visitante para um diretório específico que tiverem informações desse site, nunca indicando que o mesmo servidor também é responsável por outros sites. Este esquema é expansível, sem qualquer limite de software, desde que o servidor pode suportar a carga.

Aqui, vou tentar explicar como fazer a configuração do Apache hosts virtual no Ubuntu. primeiro crie o diretório dos arquivos do site

 sudo mkdir -p /var/www/exemplo.com/public_html

Por padrão os arquivos do apache ficam no diretório ~~/var/www~~ (nas novas versões do apache estão no diretório /var/www/html ) Agora, temos a estrutura de diretório para nossos arquivos, mas eles são de propriedade da nossa usuário root. Se queremos que o nosso usuário comum para ser capaz de modificar arquivos em nossos diretórios da web, podemos mudar a propriedade, fazendo isso:

 sudo chown -R $USER:$USER /var/www/exemplo.com/public_html

a variável $USER tem valor do usuário ativo no sistema no momento. Também devemos modificar nossas permissões um pouco para garantir que o acesso de leitura é permitida para o diretório web em geral e todos os arquivos e pastas que ele contém, de modo que as páginas podem ser servido corretamente:

 sudo chmod -R 755 /var/www

Agora crie um arquivo index.html dentro da pasta public_html do nosso projeto

/var/www/exemplo.com/public_html/index.html

insira isto só para testarmos

<html> 
<head> 
<title>Bem vindo ao Exemplo.com!</title> 
</head> 
<body> 
<h1>Parabéns! O exemplo.com virtual host está funcionando!</h1> 
</body> 
</html>

Depois de criado as pastas e o arquivo enfim vamos configurar o Virtual Host \o/ faça uma copia do arquivo 000-default.conf dentro da pasta sites-available

sudo cp /etc/apache2/sites-available/000-default.conf /etc/apache2/sites-available/exemplo.com.conf

abra o arquivo exemplo.com.conf e substitua o conteudo por

<VirtualHost *:80>
    ServerAdmin admin@exemplo.com
    ServerName exemplo.com
    ServerAlias www.exemplo.com
    DocumentRoot /var/www/exemplo.com/public_html
    ErrorLog ${APACHE_LOG_DIR}/error.log
    CustomLog ${APACHE_LOG_DIR}/access.log combined
</VirtualHost>

agora para habilitar o site vá para o terminal e digite

sudo a2ensite exemplo.com.conf
sudo service apache2 restart

agora vem a parte maneira, abra o arquivo

/etc/hosts

edite e insira essa linha

127.0.0.1 localhost 
127.0.0.2 exemplo.com

salve o arquivo e vá no navegador e digite exemplo.com se tudo der certo, ele abrirá aquele arquivo que criamos anteriormente.

Então é isso pessoal, qualquer duvida só entrar em contato !! Abraço e espero que tenha ajudado..

Lista de Plugins Sublime Text 3 – 2014

12 de novembro de 201410 de dezembro de 2014/Jorge Rafael/2 Comentários

E ai pessoas, a um tempo que quero fazer um post desse tipo, mostrando os Plugins que mais uso no Sublime Text, e que são uteis pra qualquer Front-End, Lembrando que existem vários outros Plugins, eu vou estar listando aqui os básicos porem maravilhosos para qualquer desenvolvedor !

Vamos lá, primeiro como sabemos temos que ter o Package Control para pode gerenciar os Plugins do sublime lindamente.

Você encontrará o código de ativação do Package tanto do ST2 quanto do ST3 ( Aqui )

Por ordem de importância para mim, temos

1 – Emmet

O Emmet é um plugin maravilhoso que acelera o desenvolvimento de códigos.

2 – AutoFileName

Com o AutoFileName, você economiza muito tempo, por que sempre que precisar colocar uma URL, ele já pega a pasta do projeto e você consegue navegador por ela, Excelente plugin pra quem tem que fica lincando imagem, ou então css, ou js !

3 – Javascript Snippets

Como o próprio nome diz, é um plugin que tem vários Snippets de Javascript, para acelerar o seu desenvolvimento em JS

4 – Color HighLighter

Sabe quando você vê aquele RGB, ou HexaDecimal no seu CSS e não sabe qual é a cor ? então, com esse plugin seus problemas acabaram, ele gera uma barrinha de cor abaixo do RGB, e ao clicar encima ele marca com a cor é referente aquele código.

5 – ColorPicker

Em duvida de qual era aquela cor que você queria? então esse plugin abre uma janelinha com a palheta de cores e ao você escolher a cor, ele gera pra você o código

6 – SideBarEnhancements

Esse plugin da uma tunada nas opções da barra de navegação, dando muitas outras opções alem das básicas.

7 – Terminal

Como o próprio nome diz, libera uma opção para acessar o terminal direto do arquivo ou pasta que você está usando no projeto.

Pra que raios o addEventListener ?

5 de outubro de 201410 de dezembro de 2014/Jorge Rafael/1 comentário

Ai pessoas, esse daqui é um artigo que escrevi para um amigo no site dele, achei que ficou bom e resolvi colocá-lo aqui no meu site também

Olá pessoas que acompanham a Satellasoft, pra que não me conhece eu sou o Jorge ou Kury, sou Desenvolvedor Front-End a uns dois anos e atualmente trabalho como consultor de equipes nessa area. a pedido do Gunnar venho falar um pouco sobre o maravilhoso Javascript e uma coisa muito util dele o tal do “addEventListener”. Sem mais delongas vamos lá.

O addEventListener, como o próprio nome diz serve para adicionar um evento a uma lista de eventos dentro de um elemento, o interessante é que você pode adicionar com ele eventos em elementos html, no documento, ou uma janela , até no XMLHttpRequest ( Caramba )

A declaração dele no código é bem fácil

elemento.addEventListener("evento",funcao,usarCaptura);

O Evento, são os eventos do javascript mesmo, como o click, change, keypress, e todos os outros vários que existem.

A Função, é o que vai ser disparado quando o evento ocorrer exemplo:

elemento.addEventListener("click",function(){
   alert('Satellasoft");
},false);

UsarCaptura (Opcional ) –

Nota: usarCaptura tornou-se opcional somente nas versões mais recentes dos principais navegadores; não era opcional antes do Firefox 6, por exemplo. Você deve especificar esse parâmetro para obter uma maior compatibilidade.

“Se true, usarCaptura indica que o usuário deseja iniciar uma captura. Depois de iniciada a captura, todos os eventos do tipo especificado serão enviados à escuta registrada antes de serem enviados à qualquer EventTarget abaixo dela na hierarquia de DOMs. Eventos que borbulharem para cima na hierarquia não acionarão a escuta designada a usar a captura. Veja Eventos DOM Nível 3 para uma explicação detalhada. Perceba que esse parâmetro não é opcional em todos os navegadores. Se não for especificado, usarCaptura é false.” ( Mozilla Developer Network, 2014 )

Geralmente eu deixo como false, e continuo minha vida 😉

Galera agora muito importante, uma pratica que eu venho tentado ao máximo concientizar as pessoas que trabalham com javascript, e o uso do addEventListener, ao invês de colocar o evento direto no elemento do HTML.

Da vontade de me contorcer toda a vez que vejo algo mais ou menos assim

<script>
	function OlaMundo(){
		console.log("Olá Mundo");
	}

</script>

<button onclick="OlaMundo()"></button>

essa é uma pessima prática, por que polui seu código, deixa muito mais difícil a manutenção.

Quando você usa o addEventListener, alem de você deixar seu código mais organizado, você consegue uma manutenção mais fácil. e pode criar uma “lista de eventos”

Exemplo:

function OlaMundo(){console.log("olá mundo");}
function OlaMundo2(){console.log("olá mundo2");}
function OlaMundo3(){console.log("olá mundo3");}

element1.onClick = OlaMundo();
element1.onClick = OlaMundo2();
element1.onClick = OlaMundo3();

element2.addEventListener("click",OlaMundo,false)
element2.addEventListener("click",OlaMundo2,false)
element2.addEventListener("click",OlaMundo3,false)

Nesse exemplo, temos dois casos comuns de uso de evento no javascript, no primeiro você adiciona direto a função ao evento do elemento, nesse caso você substitui um evento por outro, o elemento 1 nesse caso só vai ativar a ultima função, no caso OlaMundo3() já no elemento 2, você cria uma lista de eventos, então nesse caso você dispararia na ordem OlaMundo(), OlaMundo2(), OlaMundo3(). 🙂

Galera, espero que esse artigo tenha ajudado vocês em alguma coisa, se tiverem duvidas podem gritar por mim que eu atendo pelo twitter, ou pelo hangout

Até uma próxima ! 😉 Fui !

Transformando uma String em Array

27 de setembro de 201428 de setembro de 2014/Jorge Rafael/Deixe um comentário

Fala galera, hoje trabalhando eu tive um problema com dois arrays que vieram em uma unica string, e isso ferrou muito pra mim..

Para resolver eu fiz uma função que transforma uma string em um array !

Se vier assim uma variável


var StringArray = '["a","b","c","d","e"]["a","b","c","d","e"]';

var Array1 =  StringArray.substring(0,StringArray.indexOf('[',2)); 
var Array2 = StringArray.substring(StringArray.indexOf('[',2));

Array1 = StringToArray(Array1);
Array2 = StringToArray(Array2);

Só usar essa função, que ela vai retornar o array montadinho bonitinho 😛

function StringToArray(string){
  var ArrayInString = string.substring(1,string.indexOf(']'));
  while(ArrayInString.indexOf('"') >= 0) {
       ArrayInString = ArrayInString.replace('"','');
  }
  array = ArrayInString.split(',');
  return array;
}

Espero que ajude você ! 😀

Ordenando uma Matriz bi-dimensional em C#

23 de agosto de 201410 de janeiro de 2015/Jorge Rafael/Deixe um comentário

Sempre que penso em ordenar uma matriz bi-dimensional sempre tenho dor de cabeça, por que apesar de ser simples, exige um pouquinho de trabalho.

Então eu resolvi compartilhar um código que criei para ordenar uma matriz que contenha dois campos nesse exemplo um campo é um numero, e o segundo um valor, onde ele compara qual é o maior valor e ordena os 10 primeiros

int[] posOrdenada = new int[10];
int ValorComparativo = 0;
int[,] MatrizTemporaria = MatrizReal;

for (int indicePosicoes = 0; indicePosicoes < 10; indicePosicoes++)
{
 for (int ikeys = 0; ikeys < MatrizTemporaria.GetLength(0); ikeys++)
 {
 if (ValorComparativo < MatrizTemporaria[ikeys, 1])
 {
 ValorComparativo = MatrizTemporaria[ikeys, 1];
 posOrdenada[indicePosicoes] = ikeys;
 }
 }

 MatrizTemporaria[posOrdenada[indicePosicoes], 1] = 0;
 ValorComparativo = 0;
}

Criando um Aplicativo/Atalho com o Google Chrome

28 de maio de 2014/Jorge Rafael/Deixe um comentário

Uma coisa que eu sempre fico chateado é quando perco algum favorito, ou preciso acessar algum site e tenho que ficar navegado até chegar nele, dando uma volta pela net descobri que tem uma forma de criar um “aplicativo” do seu site favorito, assim você vai ter um ícone dele, e como se fosse uma aplicação do Chrome mesmo, facilitando e muito a vida de quem tem sites que gosta de ficar

Galera, o tutorial agora é muito maneiro, que é como criar um “Aplicativo” ou “Atalho” do site que você mais gosta, é bem simples

Abra o Chrome, e entre no site que você quer criar um Atalho.

No caso vou usar como exemplo meu Próprio Google Plus

Após acessar o site, vá nas nas Opções do Chrome que fica encima a direita.

Clique e vá em Ferramentas > Criar atalhos de Aplicativos…

Só clicar em Criar e Pronto, você já tem um “Aplicativo” do seu site favorito.

para acessar no caso do linux, é só buscar pelo nome do site ou aplicativo, e vai aparecer o ícone.

Captura de tela de 2014-05-28 10:18:55

Espero ter ajudado ! Até a próxima ! 🙂

Formulário em C#

28 de maio de 201428 de maio de 2014/Jorge Rafael/Deixe um comentário

Uma coisa que é quase que essencial a um bom site, é um espaço de contato, seja com um endereço de e-mail, telefone,

endereço físico, enfim, mesmo com essas possibilidades ainda se usa muito os formulários de contato.

Então resolvi disponibilizar a estrutura de um formulário em C#, por que não achei material bom e em português, enfim vamos logo ao que interessa.

Primeiro vamos precisar declarar uma classe nova no código

System.Net.Mail

Essa classe vai nos permitir usar os métodos necessários para fazermos nosso formulário !

public static bool SendMessage(string nome, string email, string assunto, string corpo_email)
    {
        bool naoenviado = false;
        // email do cliente, // nome do cliente
        MailAddress from = new MailAddress(email, nome);
        MailAddress to = new MailAddress("seuemail@dominio.com.br", "Central de Atendimento"); // email do host //
        MailMessage message = new MailMessage(from, to);
        // message.Subject = "Using the SmtpClient class.";
        message.Subject = assunto; // Assunto do email
        message.IsBodyHtml = false;
        message.Body = corpo_email; // Corpo do email
        // Add a carbon copy recipient.
        //MailAddress copy = new MailAddress("terceiroemail@dominio.com.br"); // Envia uma copia do email para algum lugar
        //message.CC.Add(copy);
        // Não Modificar < ------------------------------------ >
        SmtpClient client = new SmtpClient();
        client.Port = 000; // Sua porta
        client.Host = "smtp.dominio.com.br"; // Seu SMTP

        // Include credentials if the server requires them.
        client.Credentials = new System.Net.NetworkCredential("seuemail@dominio.com.br", "senha"); // Credenciais, um email valido do servidor hostiado

        try
        {
            client.Send(message);
        }
        catch {

            naoenviado = true;
        }

        return naoenviado;
    }

Instalação do Phonegap – Cordova para Ubuntu 14.04

28 de maio de 201431 de dezembro de 2014/Jorge Rafael/7 Comentários

( esse post não está atualizado com a ultima versão da SDK do android 5.0 )

Oi gente, eu resolvi criar esse tutorial para documentar como instalar o phonegap(cordova) por que eu passei dois dias em busca de como fazer isso, por que encontrei váááááários problemas com os tutoriais que tinham na internet, e como aconteceram vários probleminhas durante a instalação no meu note, resolvi fazer esse tutorial de uma forma bem detalhada, já colocando possíveis erros que possam acontecer, e como eu fiz pra resolver .. qualquer erro ou duvida sobre o tutorial só comentar aqui que tentamos resolver juntos Ok?

Então vamos logo ao que interessa !

Continuar lendo →

HTML – Front End #1 – Estrutura e Semântica

28 de janeiro de 2014/Jorge Rafael/Deixe um comentário

E ai pessoas, primeira vídeo aula que to montando voltada inteiramente pra Front-End, a ideia é ajudar quem está começando a ter uma visão melhor do que é Front-End, e é claro trocar conhecimento, pois bem, comentem sobre o que querem ver e aprender, ou intender sobre o Front, que vou sempre tentar trazer coisas novas.

Ah, ainda não sei se vai dar certo, mais vou tentar postar um vídeo por semana, se eu conseguir bolar assunto é claro \o/

Apresentação

6 de janeiro de 2014/Jorge Rafael/Deixe um comentário

Olá, como desenvolvedor, resolvi criar esse blog, para compartilhar e registrar algumas coisas que for criando, para compartilhar

Muito do que se encontrar aqui vai ter no Github ( ainda estou aprendendo a utilizá-lo ~~hehe~~ )

pois bem.

Ainda não sei como usar algumas coisas do WP, em relação a inserção de codigos entre outras, porem vou tentar sempre colocar coisas interessantes.

Aos visitantes, os codigos que irá ver aqui será em sua grande parte em C#, ou então Javascript, CSS, HTML, por eu trabalhar mais voltado ao front-end

Pois bem, por enquanto é isso.

Feliz ano novo para vocês !!

	Caio em Instalação do Phonegap –…
	Jorge Rafael em Criando um Virtual Host…
	Jorge Rafael em Instalação do Phonegap –…
	Renato em Instalação do Phonegap –…
	Henrique Santana em Pra que raios o addEventListen…

	Caio em Instalação do Phonegap –…
	Jorge Rafael em Criando um Virtual Host…
	Jorge Rafael em Instalação do Phonegap –…
	Renato em Instalação do Phonegap –…
	Henrique Santana em Pra que raios o addEventListen…

Jorge Rafael | Developer

Por que o mínimo que podemos fazer é compartilhar.