Tag: web

Sistemas de Design: Padronização de Sistemas
Design é projeto. E, como todo projeto, ele deve ser documentado, possuindo descrições, informações de uso e instruções em geral. É exatamente isso que são Sistemas de Design.

Sistemas de Design são documentações, online ou físicas, que descrevem a padronização e uso de elementos de um projeto, com o objetivo de que ele possa ser usado em diferentes aplicações, mantendo uma identidade compartilhada. Essa identidade pode ser referenciada a um projeto, linha, segmento ou empresa. São usados elementos como formas, grades, tipografia, assets, iconografia, recomendações de uso, dentre outros. Algo muito semelhante ao que o design gráfico já está acostumado ao criar um Manual de Identidade Visual.

Um exemplo comum, do dia a dia dos usuários de computador, é o Microsoft Office. Trata-se de um conjunto de aplicativos que, por serem da mesma linha, precisam seguir a mesma identidade. Para que os desenvolvedores possam trabalhar com esse padrão, um sistema de design certamente foi desenvolvido para que a equipe de desenvolvimento possa trabalhar de forma coerente.

O Sistema de Design garante ao usuário uma fluidez no uso das aplicações e reconhecimento das propriedades do software. Facilitando, dessa forma, não só a identificação, como ajudando o usuário a pressupor determinados recursos ou localizações de ferramentas.

Assista o vídeo para complementar a leitura

Experiência Compartilhada

Grandes empresas de tecnologia desenvolvem seus próprios sistemas de design para que desenvolvedores terceiros possa criar experiências mais coesas e confortáveis para o usuário. Seguir esses sistemas pode ser requerimento ou uma simples recomendação, dependendo da loja e sistema operacional que precisar aprovar.

Aplicativos, mobile e desktop, são os mais comuns a receberem influencias direta dos sistemas de design de sistemas operacionais que, recomenda-se, devem ser mesclados aos sistemas da própria empresa. Para esses casos temos como exemplo:
Como dito anteriormente, seguir um sistema de design de sistema operacional é fundamental para manter uma experiência fluida para o usuário. Por isso que, por exemplo, é possível sentir diferenças entre uma mesma aplicação desenvolvida para Windows, Android e dispositivos Apple, porque cada desenvolvedora, apesar de manter sua própria identidade, adapta-se para o ambiente em que o usuário estará.

O Whatsapp adapta quase que completamente sua UI de acordo com o sistema de design de cada Sistema Operacional

Visual Studio no Windows 10 vs Visual Studio no MacOSX

Não necessariamente o designer ou desenvolvedor são obrigados a seguir um determinado sistema de design de terceiros. Às vezes, a melhor opção é justamente criar o seu próprio sistema ou criar uma barreira para ter uma identidade única para sua aplicação.

Algumas empresas, como a Google, estimulam para que os designers utilizem seus sistemas também em sites ou aplicativos web. Para isso, dão descrições específicas de usabilidade e ferramentas que possam agilizar o desenvolvimento dessas aplicações.

Frameworks e Bibliotecas

Para facilitar o desenvolvimento, muitas empresas oferecem frameworks e bibliotecas, tanto web quanto para desktop e mobile, afim de estimular o desenvolvedor a seguir aquele determinado padrão.

É interessante para as grandes desenvolvedoras que outras empresas sigam seus padrões de design, pois, dessa forma, ditam tendências e criam assimilações dos usuários com suas próprias plataformas, principalmente quando essas outras empresas utilizam ferramentas e APIs das grandes.

A exemplo de frameworks e bibliotecas temos:
Porém, nem sempre essas opções suprem a demanda, pois não são compatíveis com outras bibliotecas e tecnologias. Por isso, muitos grupos de desenvolvedores trabalham para criar frameworks e bibliotecas abertas que seguem os padrões estipulados pelos sistemas de design. Como por exemplo:
- React UWP (Fluent Design)
- Materialize (Material Design)
- Material UI (Material Design)
- Ratchet (Apple Guideliness iOS)
- Semantic UI (Inspirado na Apple e Material Design)
Utilizar Sistemas de Design, além de facilitar o processo de desenvolvimento, ajuda a manter o usuário mais confortável no ambiente em que ele está acostumado. Criar ou adaptar o seu próprio sistema também ajuda a criar uma identidade única para seu conjunto de aplicativos e serviços.

Que outros sistemas de design e frameworks vocês podem recomendar? Deixem nos comentários.
22 de dezembro de 2019
Como fazer efeito float label animado com CSS3 puro
O último post sobre como criar um efeito ON/OFF em um checkbox usando CSS3 puro fez muito sucesso. Dessa forma, pensei o que mais poderia ser legal para fazer com CSS3. Analisando um pouco o comportamento do Android, me lembrei de um componente bem interessante que é o input com um label float animado. Basicamente, ao preencher o conteúdo, o label sobe e vai para um pouco acima do input, como no exemplo abaixo:

Telefone

Nome de Usuário

Agora… como fazer?

O segredo está novamente nas pseudoclasses e operadores. Graças as pseudoclasses eu posso definir, com alguns gatilhos, o comportamento de um determinado elemento HTML.

No caso, esse gatilho é o placeholder, então é fundamental que o input possua um placeholder (vazio ou não) para criar o efeito. Pois o que identifica que algo foi preenchido ou não é justamente o placeholder. Sem o placeholder definido, o efeito não funciona. A pseudoclasse referente ao required também é usada em nosso exemplo:
```
<div class="label-float">
  <input type="text" placeholder=" "/>
  <label>Telefone</label>
</div>

<div class="label-float">
  <input type="text" placeholder=" " required/>
  <label>Nome de Usuário</label>
</div>
```
Já para o efeito de transição, usaremos o transition e o comportamento do absolute que, por definição, tem seus eixos referentes ao pai, no caso desse ser relative. Então basta usar o CSS abaixo:
```
.label-float{
  position: relative;
  padding-top: 13px;
}

.label-float input{
  border: 0;
  border-bottom: 2px solid lightgrey;
  outline: none;
  min-width: 180px;
  font-size: 16px;
  transition: all .3s ease-out;
  -webkit-transition: all .3s ease-out;
  -moz-transition: all .3s ease-out;
  -webkit-appearance:none;
  border-radius: 0;
}

.label-float input:focus{
  border-bottom: 2px solid #3951b2;
}

.label-float input::placeholder{
  color:transparent;
}

.label-float label{
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  margin-top: 13px;
  transition: all .3s ease-out;
  -webkit-transition: all .3s ease-out;
  -moz-transition: all .3s ease-out;
}

.label-float input:required:invalid + label{
  color: red;
}
.label-float input:focus:required:invalid{
  border-bottom: 2px solid red;
}
.label-float input:required:invalid + label:before{
  content: '*';
}
.label-float input:focus + label,
.label-float input:not(:placeholder-shown) + label{
  font-size: 13px;
  margin-top: 0;
  color: #3951b2;
}
```
Como sempre, estou disponibilizando o exemplo completo no JsFiddle!

Gostou? Então curta a página no Facebook e compartilhe com os coleguinhas!
17 de dezembro de 2018
Como Criar Sua Própria Fonte e A Usar Como Ícone?
Quem está estudando para ser designer, precisa estudar um assunto muito importante: Tipografia. E, por muitas vezes, precisa criar a própria família tipográfica, ou seja, como criar fontes. Além disso, podemos usar uma tipografia personalizada como ícones, tornando o site ou o sistema, desenvolvido em HTML5, ainda mais leve e bonito.

Este tutorial visa ajudar você com o processo técnico de converter os símbolos e criar sua própria fonte OTF, TTF, SVG, etc. Também um pequeno resumo de como implementar sua fonte em CSS3 para funcionar como ícone.

Para começar, você vai precisar instalar o Inkscape em seu computador. Baixe a versão mais recente do aplicativo Inkscape. Ele está disponível para Windows, Linux e Mac. Caso você use o MacOSX, será necessário instalar o XQuartz.

Você vai precisar também de algum programa para desenho vetorial, pode usar qualquer um de sua preferência, como o Illustrator, CorelDRAW ou o próprio Inkscape.

Crie seu símbolo para cada caractere

Primeiramente, é necessário criar os glifos. Você pode utilizar o Illustrator ou qualquer outro programa de ilustrações vetoriais. Exporte o arquivo no formato SVG. Você pode, se quiser, colocar todas as ilustrações no mesmo arquivo. Os desenhos não deverão ter contornos, somente preenchimento e devem ser compostos somente de preto.

Anexando Glifos aos Caracteres no Inkscape

No Inkscape, selecione File>New>fontforge_glyph. Essa opção adiciona as predefinições necessárias para criação coerente da família tipografica.

Com o documento criado, importe os glifos (File>Import) criado anteriormente por você. Caso você tenha feito todos os glifos no mesmo arquivo, o Inkscape irá importar todos agrupados na organização que foi salvo.

Quando o arquivo é importado, ele vem agrupado e com algumas configurações que o Inkscape não reconhece corretamente.
Siga os passos abaixo para não haver erros e incompatibilidades:

Selecione o objeto, clique com o botão direito e escolha Ungroup. Faça isso quantas vezes for necessário até o objeto estar totalmente desagrupado;

Ainda com o objeto selecionado, vá no menu Path>Combine;

Em seguida vá no menu Path>Union;

Essas ações são necessárias para que o glifo se torne um unico objeto e possa ser anexado corretamente ao caractere escolhido.

O próximo passo é abrir a tela de edição de fontes. Selecione o menu Text>SVG Font Editor.

Será aberto o painel SVG Font Editor, que permite você criar uma fonte no formato SVG (interpretado pela maioria dos smartphones). A primeira coisa a se fazer é criar um nome e família para a fonte. No painel de edição de fonte, e com a guia GLOBAL SETTINGS ativada, clique no botão New. Em seguida, clique duas vezes no nome que foi gerado para que possa modificar e colocar o nome que você quiser.

Agora, ainda no mesmo painel, abra a guia GLYPH e clique no botão Add Glyph, ele irá criar uma nova linha na tabela Glyph name/Matching string. Você deve dar dois cliques no nome criado para editar o nome. Ao lado, você deve dar dois cliques no espaço vazio (logo abaixo de Matching String) e você descobrirá (sim, está escondido) que você pode editar esse campo. Simplesmente digite a letra a qual você quer assimilar o glifo.

No exemplo a seguir, assimilei o meu glifo de Editar a letra “e” minúscula. Vale salientar que você pode vincular a qualquer caractere que deseja, inclusive caracteres especiais como #,ø,®,†, etc.

Por fim, selecione o objeto (ou grupo) que você quer vincular ao caractere e clique no botão Get curves from selection. Para verificar se foi adicionado corretamente, digite, em Preview Text, o caractere que deseja verificar.

ATENÇÃO: Caso o ícone não apareça no Preview Text corretamente, como aparecer pequeno ou simplesmente não aparecer, você deve repetir os passos acima de Ungroup, Combine e Union do objeto. Provavelmente o objeto não foi preparado corretamente e por isso não relacionou como deveria.

Salve o arquivo normalmente. No formato padrão de SVG do Inkscape.

Transformando a fonte SVG em OTF ou TTF

O arquivo SVG está pronto. Agora precisamos converter para uma fonte usável pelo sistema operacional. Há muitos sites que fazem essa conversão.

O que recomendo que faça a conversão é o FreeFontConverter. Basta importar o seu arquivo SVG, escolher o formato (Aconselho OTF, primeiramente, que tem melhor acabamento) e depois clicar em convert. Ele fará o download automaticamente da fonte.

ATENÇÃO: Caso dê erro durante a conversão, você pode tentar salvar o arquivo em SVG Optmized, no Inskscape.

Você pode ver que a fonte pode ser instalada normalmente no seu sistema operacional.

Usando a fonte personalizada em CSS e usando-a como ícone

Para preparar um pacote com sua fonte personalizada, para ser usada em um site, o site FontSquirrel disponibiliza o WebfontGenerator. Para usá-lo basta enviar a sua fonte em OTF ou TTF, concorde com os termos e gere o kit.

Feito o download, está na hora de incorporamos a fonte no seu CSS. Para isso, basta você copiar as fonts que foram geradas no kit para uma pasta font (ou outra de sua preferência) no seu site e chamar via CSS.
```
@font-face {
    font-family: "minhafonteregular";

    src: url("fonts/minhafonte-webfont.eot");
    src: url("fonts/minhafonte-webfont.eot?#iefix") format("embedded-opentype"),
         url("fonts/minhafonte-webfont.woff") format("woff"),
         url("fonts/minhafonte-webfont.ttf") format("truetype"),
         url("fonts/minhafonte-webfont.svg#minhafonteregular") format("svg");

    font-weight: normal;
    font-style: normal;
}
```
Para usar como ícone em um botão (ou em qualquer outro componente HTML5), basta você usar a opção content, do CSS3, como descrito abaixo:
```
button.editar{
        padding:10px;
}

button.editar:before{
        font-family: "minhafonteregular";
        font-size:36px;
        content:"e";
        -webkit-content:"e";
        -moz-content:"e";
        -o-content:"e";
        -ms-content:"e";
}
```
E basta adicionar a tag Button com a classe determinada:

<button class=”editar”> </button>

ATENÇÃO (iOS): Devido a padrões do iOS, o ícone só vai aparecer se tiver uma cor de fundo (devido ao webkit-appearance), se você quiser, entretanto, usar a cor padrão, utilize o CSS abaixo:

button{
background-color: buttonface;
}

Abaixo, você pode ver o exemplo usado no vídeo (no topo do post), que tem uma forma um pouco diferente de usar.

Qualquer dúvida, deixe um comentário, mande uma mensagem no skype ou por email. Siga @velhobit no Twitter e curta nossa página no Facebook.

Até o próximo Tutorial.
29 de novembro de 2018
Termos Slave e Master são abolidos do Python

A partir da versão 3.8 do Python, os termos master e slave serão alterados para worker e helper. A decisão se dá após debates da comunidade sobre a terminologia usada, que já duram quase duas décadas.

“Por razões de diversidade, seria legal tentar evitar a terminologia ‘mestre’ e ‘escravo’, que pode ser associada a escravidão”, escreveu Victor Stinner, um dos desenvolvedores no Red Hat, em seu pedido mais recente para troca da terminologia.

O pedido gerou diversas discussões e dentre sugestões, críticas e respostas, um usuário identificado como Steve D’Aprano, comentou “Na verdade, nas subculturas BDSM, ‘mestre/escravo’ pode ter conotações *positivas*. Você quer dar suporte a diversidade, então por que quer discriminar essa subcultura?”.

Sugestões foram feitas, como webmaster/postmaster, master/apprentice, parent/children, etc. Mas no final ficou decidido que passaria a se chamar “workers” e “helpers” (algo como operário e ajudante) e o “master process” passará a se chamar “parent process” (processo pai/mãe).

Apesar da terminologia jé ser muito usado na área de hardware, outras comunidades na área de software já fizeram modificações similares. Em 2014, Drupal e Django trocaram as terminologias para primary/replica e leader/follower, respectivamente.

Com informações do Motheboard.vice.com e bugs.python

17 de setembro de 2018

Como Selecionar o Item de Uma Tabela HTML

Uma dúvida foi postada no grupo de Design e Programação de nossa página, lá no Facebook, hoje. Essa pergunta era referente a como selecionar de uma linha de uma tabela HTML?

Para tal, basta usar um pouco de Javascript e CSS.

Montando a Tabela

Vamos montar, para testar, uma tabela simples, respeitando a semântica HTML básica. Vamos aproveitar para colocar logo um botão, que vai ser por onde podemos visualizar os dados da linha selecionada:

<table id='minhaTabela'>
     <thead>
          <tr>
               <th>ID</th>
               <th>Nome</th>
               <th>Idade</th>
          <tr>
     </thead>
     <tbody>
          <tr>
               <td>01</td>
               <td>Rodrigo</td>
               <td>33</td>
               </tr>
          <tr>
               <td>02</td>
               <td>Taynara</td>
               <td>21</td>
          </tr>
          <tr>
               <td>03</td>
               <td>Raveny</td>
               <td>22</td>
          </tr>
          <tr>
               <td>04</td>
               <td>Sérgio</td>
               <td>51</td>
          </tr>
          <tr>
               <td>05</td>
               <td>Alice</td>
               <td>20</td>
          </tr>
     </tbody>
</table>

<button id="visualizarDados">Visualizar Dados</button>

Agora precisamos incluir um estilo para que a tabela fique mais elegante.

É importantíssimo prestar atenção ao class “selecionado” que vai ser a referência para o seu javascript saber qual linha está selecionada na tabela.

#minhaTabela{
  width:80%;
  margin:0 auto;
  border:0;
  box-shadow: 0 5px 30px darkgrey;
  border-spacing: 0;
}

#minhaTabela thead th{
  font-weight: bold;
  background-color: black;
  color:white;
  
  padding:5px 10px;
}

#minhaTabela tr td{
  padding:5px 10px;
  text-align: center;
  
  cursor: pointer; /**importante para não mostrar cursor de texto**/
}

#minhaTabela tr td:last-child{
  text-align: right;
}

/**Cores**/
#minhaTabela tr:nth-child(odd){
  background-color: #eee;
}

/**Cor quando passar por cima**/
#minhaTabela tr:hover td{
  background-color: #feffb7;
}

/**Cor quando selecionado**/
#minhaTabela tr.selecionado td{
  background-color: #aff7ff;
}

button#visualizarDados{
  background-color: white;
  border: 1px solid black;
  width:50%;
  margin: 10px auto;
  padding:10px 0;
  display: block;
  color: black;
}

Javascript

Para sermos mais justos, vamos fazer o exemplo usando Javascript puro. No nosso exemplo, vamos contemplar a opção de selecionar uma única linha ou mais de uma linha, opção determinada apenas por um parâmetro. Ainda vamos ver como manipular os dados.

Inicialmente, precisamos capturar a tabela e adicionar, à ação de clique, uma função que adicione ou remova a classe de seleção:

var tabela = document.getElementById("minhaTabela");
var linhas = tabela.getElementsByTagName("tr");

for(var i = 0; i < linhas.length; i++){
	var linha = linhas[i];
  linha.addEventListener("click", function(){
  	//Adicionar ao atual
		selLinha(this, false); //Selecione apenas um
                //selLinha(this, true); //Selecione quantos quiser
	});
}

A função selLinha() vai ser responsável por adicionar ou remover a class “selecionado” do nó. Passamos também um parâmetro que vai determinar se poderá selecionar mais que uma linha ou apenas uma. O primeiro laço, caso múltiplos seja falso, irá apenas desmarcar todos as linhas antes de marcar a linha clicada.

/**
Caso passe true, você pode selecionar multiplas linhas.
Caso passe false, você só pode selecionar uma linha por vez.
**/
function selLinha(linha, multiplos){
  if(!multiplos){
  	var linhas = linha.parentElement.getElementsByTagName("tr");
        for(var i = 0; i < linhas.length; i++){
           var linha_ = linhas[i];
           linha_.classList.remove("selecionado");    
        }
  }
  linha.classList.toggle("selecionado");
}

Agora vamos adicionar uma função ao clique do botão para que a gente possa visualizar os dados selecionados. Para isso, iremos justamente capturar apenas as linhas que tiverem a class “selecionado” e, através de um laço, vamos concatenar os valores dentro dos nós <td> da(s) linha(s) selecionada(s).

/**
Exemplo de como capturar os dados
**/
var btnVisualizar = document.getElementById("visualizarDados");

btnVisualizar.addEventListener("click", function(){
	var selecionados = tabela.getElementsByClassName("selecionado");
  //Verificar se eestá selecionado
  if(selecionados.length < 1){
  	alert("Selecione pelo menos uma linha");
    return false;
  }
  
  var dados = "";
  
  for(var i = 0; i < selecionados.length; i++){
  	var selecionado = selecionados[i];
    selecionado = selecionado.getElementsByTagName("td");
    dados += "ID: " + selecionado[0].innerHTML + " - Nome: " + selecionado[1].innerHTML + " - Idade: " + selecionado[2].innerHTML + "\n";
  }
  
  alert(dados);
});

Vamos Testar?

ID	Nome	Idade
01	Rodrigo	33
02	Taynara	21
03	Raveny	22
04	Sérgio	51
05	Alice	20

No entanto, se você preferir ver todo código completo, acesse o JsFiddle incorporado abaixo:

Gostou do post curtinho? Tem dúvidas? Deixe seu comentário e compartilhe com quem você achar que vai gostar. Aproveite para entrar no nosso grupo de Design e Programação no Facebook ou em nossa página. Acompanhe-nos no Twitter e Instagram.

26 de junho de 2018

O Ladrão de Templates Grátis
Outro dia andei discutindo com um rapaz pelo Twitter porque ele usa templates free, ou “piratas”, instala em um WordPress e assina como se ele fosse o designer (ou desenvolvedor) responsável. Isso se repete em todos os sites que ele fez, inclusive no seu próprio. Não fez nem questão de mudar uma cor ou uma forma. O problema é que essas pessoas revendem os sites para clientes. Alguns até compram, mas também somente para revender. A discussão começou por conta de uma notícia antiga, sobre o bispo que disse que, para manter seu blog, gasta mais de 107 mil reais por mês e ainda pediu ajuda dos seus seguidores para manter.

Você sabe quanto custa ser um designer? E quanto custa ser um programador? E pior! Sabe quantas pessoas fizeram faculdade (ou até autodidatas), estudaram muito, fizeram bons cursos e/ou leram bons livros? Pois é… mas para alguns, isso não tem valor.

Porém, esse rapaz não foi o primeiro a fazer esse tipo de trambicagem. Empresas estão se fortalecendo baseado nessa ideia absurda. Isso está acontecendo muito com gráficas rápidas, que resolvem vender sites para aumentar sua renda. O problema é que elas geralmente não fazem os sites, mas pegam templates grátis e trocam o “desenvolvido por”. E nem tomam o cuidado de disfarçar e no código, podemos até ver o nome dos templates.

Na imagem abaixo, vocês podem ver um detalhe de uma das conversas que eu tive com uma ex-aluna de mídias sociais que trabalhava em uma empresa que fazia esse tipo de “trabalho” (ocultei o nome e a foto porque ela não necessariamente é a responsável, mas uma funcionária).

Depois dessa conversa ela me bloqueou. Ela e seus colegas de trabalho. Porém, eu fui na página do Facebook deles e deixei uma mensagem “bonita”. Claro, que eles apagaram, aí eu deixava de novo. Mas na terceira vez fiz melhor. Resolvi colocar no Twitter dos clientes deles um link para o site original de onde eles pegavam os templates. Infelizmente, é comum que essas mesmas empresas que prestam esse serviço são quem tomam conta das mídias.

O Site de um rapaz, chamado Nilton Câmara (que foi a vítima), foi um dos maiores exemplos de cara de pau de uma prestadora de serviço da área de tecnologia. Realmente não mudaram nada, nem uma cor ou um símbolo, e ainda colocaram no canto: Website Design by Conhecimento Digital. Copyright 2012.

Afinal, qual o problema disso?

Primeiro lugar, vamos a questão ética. Você gostaria de comprar um iPhone 6 da Samsung? Eu sei que a pergunta parece absurda, mas é isso o que acontece. Simplesmente, ao invés de fazer um produto novo, está sendo terceirizado um serviço oferecido. Se você soubesse que poderia ter algo totalmente genérico a um preço muito mais baixo, ou até de graça, você pagaria por essa mão de obra inútil?

Ainda na questão ética, assinar um projeto de outra pessoa é certo? Imagina se eu assinasse um site feito por outra pessoa, um quadro feito por outro artista. Isso não seria correto e traria grandes problemas para o comprador, que acha que está adquirindo um produto original, quando na verdade, é genérico.

Segundo, os problemas legais. Terceirizar serviço (quarteirizar) oferecido é ilegal! Eu mesmo já processei uma empresa por isso, e ganhei, sem discussão. Não se pode oferecer um serviço e pagar outra empresa para fazer. Tanto que, no meu caso, resolveram mudar o nome e o tipo de serviço para consultoria. Além disso, isso fere os direitos de propriedade intelectual, que é irrevogável! Isso mesmo, não pode ser repassado para ninguém. A propriedade intelectual garante a autoria de projeto, o que é diferente dos direitos comerciais. O autor pode abrir mãos de seus direitos comerciais, mas não pode se abdicar do intelectual. Roubar a autoria do projeto de outro também é ilegal.

O que isso traz de ruim para o cliente e para a prestadora de serviços?

A contratante pode se sentir lesada, pois comprou, muitas vezes, um projeto original. Além disso, o leiaute de uma empresa, instituição ou órgão, deve seguir uma identidade corporativa que é definida em todos os projetos gráficos. O SEO desses templates geralmente não são dos melhores e a semelhança desse site com outros templates genéricos também não são bem trabalhados e podem dificultar o encontro do site pelo Google.

A prestadora de serviço, além do fato da ilegalidade, também está perdendo experiência e estabilidade no mercado. Tornar-se-á pouco confiável.

Mas como deve ser feito então?

Existem 3 formas corretas de trabalhar corretamente com isso:
1. Criar um Layout e Template Original;
2. Modificar um Template Free existente, dando devida referência ao template original e deixando claro ao cliente que é uma alteração;
3. Usar um template free ou pago, mas dar a devida referência ao autor e não ter nenhum lucro direto com isso.
O site da PortilloDesign usa um CMS próprio, criado por nós, que prentendemos abrir o código futuramente. Porém, também trabalhamos com outros CMSs em alguns clientes, onde todos os sites são montados primeiro no Photoshop e depois implementado no código referente ao CMS escolhido. Cada template é único e pensado para a necessidade e estética de cada cliente. Os layouts não aprovados são jogados na lixeira para que não sejam reaproveitados.

O blog The Pink Geeks usou um template modificado e as garotas colocaram no rodapé a assinatura junto com os criadores do template original, por exemplo. O Mesmo acontece com o site do E-Farsas, onde ele coloca: “Tema modificado do FabThemes.com”

Não tem problema nenhum em usar um template free, só deixe no rodapé o autor original e não cobre por algo autêntico, somente pela modificação que fizer. Não mude a autoria do trabalho, isso não vai desmerecer de forma algum o seu conteúdo. Todas as pessoas confiáveis precisam ser transparentes.

Concluindo

Não existe um real monitoramento, registro, fiscalização ou cadastro de empresas e profissionais de TI. Da mesma forma, não existe uma fiscalização sobre o que eles fazem. Existem muitas leis sendo criadas para defender pessoas que aparecem peladas na internet, ou um ou outro xingamento preconceituoso. Mas a parte de negócios continua sendo terra de ninguém. Pessoas disfarçadas de profissionais continuam tripudiando empresários e blogueiros que querem melhorar o seu trabalho.

Vale lembrar de que de forma alguma você pode pegar um template pronto e simplesmente revender, ou modificar e revender, se você foi contratado para fazer o site. Se a ideia é modificar algo pronto, então deixe isso claro e revelado como o serviço. Lembre-se que terceirização de serviço oferecido é ilegal e anti-ético.

Existe até uma ferramenta especializada em verificar se o site usa um template comum ou não, para WordPress:
http://www.wpthemedetector.com

Mas o que vocês acham disso? Tem uma opinião diferente sobre a ética nesse caso? Deixe sua opinião.
20 de janeiro de 2017
Pacto de Confiança (Hackathon com NFC)

O aplicativo Pacto de Confiança propõe-se a diminuir os custos quanto a monitoramento de detentos com regime semi-aberto. Com uma pulseira confortável e discreta, o detento deve fazer “checkins” constantes, com qualquer dispositivo móvel com tecnologia NFC. Um agente, com outra versão do software também pode abordar o detento e saber seu histórico e ficha em segundos.

O app foi criado para o Hackathon Hacker Cidadão 4, onde, pelas regras, não se poderia criar um novo hardware para fazer o controle dos detentos em regime semi-aberto. O sistema possui duas partes, uma mobile, onde recebe os dados do detento e outra para Android, onde, a cada x horas, o detento precisa passar o smartphone em um dispositivo com chip NFC. Através do 3G, o app envia a geolocalização e o código do NFC, assim como informações de hora e foto tirada automaticamente na hora que é feita a conferência.

O aplicativo está descontinuado e seu código fonte, para fins de estudos, pode ser baixado através do link: https://velhobit.com.br/arquivos/PactoPelaVida.zip.

O dispositivo vai se encarregar de enviar sua localização, foto e horário, de forma a diminuir os custos e prover uma melhor qualidade de vida para aquele que busca a reintegração à sociedade. Se por acaso ele não fizer os checkins quando o dispositivo pedir, ele será considerado foragido pelo sistema que encarregará de dar ao agente de monitoramento o alerta e as últimas informações quanto a localização.

1 de dezembro de 2016
Mobilizando

O Mobilizando é um sistema colaborativo para localização e compartilhamento de estabelecimentos adaptados para portadores de necessidades especiais.

Ele foi criado durante o Hackathon do Hacker Cidadão 3.0 (CampusParty Recife), onde tirou o segundo lugar. Apesar de esforços e apresentações do projeto para investidores, infelizmente não seguiu adiante.

Todavia, o código fonte, da versão web, está disponível pelo linkhttps://velhobit.com.br/arquivos/mobilizando.zip. Ele apresenta diversas falhas e modificações que devem ser corrigidas para alguém que for usar a base do projeto para este ou outros objetivos.

Devido a dificuldade de encontrar locais adaptados para pessoas com necessidades especiais, idealizamos um aplicativo que mostra os locais mais próximos, filtrados por tipo de estabelecimento.

A ideia é que qualquer usuário do Mobilizando possa cadastrar um estabelecimento. Quando esse estabelecimento é confirmado, ele entra para a base dados principal. O mesmo ocorre para o quanto aquela empresa está adaptada, bastando marcar insígneas (tags) para que a empresa entre na lista. Além disso, ainda é possível comentar e visualizar comentários públicos de outros usuários.

Os dados usados originalmente são os dados públicos disponibilizados pela Prefeitura da Cidade do Recife, que não são atualizados frequentemente, e por isso uma necessidade grande de ser planejado como algo colaborativo.

17 de março de 2015