Tag: site

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
CSS – Como usar transition com display:block?
Todos sabemos que transições são importantes para diminuir a sensação de repentinidade para o usuário e preparar o cérebro para, aos poucos, compreender a nova informação.

Porém, o transition do CSS3 não funciona uniformemente com todos os parâmetros. Quem nunca quis que um elemento HTML em tela sumisse aos poucos?

O mais comum é utilizar o bom e velho display: none;, porém este simplesmente não funciona ao aplicar um transition. Usemos a lógica de que a passagem de um bloco para um nada não é uma transição. No CSS, uma transição inicialmente precisa ser um comando baseado em números.

Como usar o CSS para fazer a transição de um objeto sumir?

Para realizar esta ação, vamos usar um pequeno truque. Ao invés de simplesmente não mostrar o objeto, vamos desativar sua propriedade de ser manipulável com o mouse ou toque. Para isso podemos usar a propriedade pointer-events, ficando:
```
div{
    opacity: 1;
    transition: opacity .5s linear;
}

div.hide{
    opacity: 0;
    pointer-events: none;
}
```
Para fazer o objeto desaparecer vamos usar um pouco de JavaScript apenas para adicionar ou remover a classe CSS da div:
```
function ocultar(){
    var element = document.getElementById("idDaDiv");
          element.classList.add("hide");
}
function mostrar(){
    var element = document.getElementById("idDaDiv");
          element.classList.remove("hide");
}
```
Vamos testar?

Mas e se você quiser que ele também não ocupe um espaço? Pois pode ficar um buraco perturbador. Nesse caso você pode modificar a altura do elemento para poder aproveitar melhor esse espaço. Todavia, a propriedade height não é animável (talvez por possuir uma propriedade auto). Para esse caso, você precisa usar o max-height para realizar esta animação.
```
div {
  overflow:hidden;
  max-height: 200px;
  transition: max-height 1s ease-in-out;
}

div.hide {
  max-height: 0;
  pointer-events: none;
}
```
Lembre-se que para evitar que o conteúdo seja mostrado independente da div que você vai aplicar a transição, será necessário colocar a propriedade overflow como hidden. Também é importante salientar que a propriedade max-height só é animável caso você use as medidas fixas em pixels. Como ele determina apenas o tamanho máximo, não vai influenciar se você colocar um tamanho maior que o esperado, o que se torna funcional também para responsividade.

Vamos Testar?

Se acredita que essa dica de CSS é útil para mais alguém, compartilhe e curta esta página!
24 de abril de 2018
Adobe Muse é Oficialmente Descontinuado
Nesta dia 26 foi anunciado através de e-mail e da página oficial do Muse, o encerramento de desenvolvimento de novas funcionalidades para o Muse. A ferramenta ainda terá suporte técnico por mais um ano.

Em sua justificativa, basicamente a Adobe reconhece que o Muse não é uma solução eficaz para nenhum dos casos ao que ele foi proposto no começo e que o público profissional não usa ou não deve utilizar a ferramenta. Ainda recomenda alternativas para caso o usuário tenha um site publicado através deste.

Apesar das boas intenções, o Adobe Muse tentou atingir um nicho que não é próprio da Adobe.

Um anúncio menos importante aconteceu também neste dia 26 de Maço. O Business Catalyst também será encerrado com o prazo do dia 26 de Março de 2020. O anúncio é menos impactante pois o Business Catalyst sempre foi pouco conhecido pelo público geral da Adobe.

—

O Adobe Muse foi uma ferramenta desenvolvida pela Adobe para fazer sites automaticamente. À medida que o Dreamweaver se fortalecia como uma ferramenta forte de desenvolvimento, para o lado mais automatizado a Adobe seguiu para a linha Edge. O Muse veio junto com a estreia de ferramentas como Adobe Edge Flow, Edge Code (posteriormente se tornando o Brackets), dentre outras.

O Adobe Muse gera códigos pouco semânticos e pouco reutilizável para gerar sites. Por profissionais, os que ainda o usava eram para desenvolver protótipos, o que foi completamente abandonado pelo Adobe XD. Entretanto, há uma comunidade forte de usuários do Muse no Brasil, que usam a ferramenta como uma espécie de WIX para vender sites para pequenas empresas, apoiando um mercado cinza de vendas de serviços por leigos.

Devido a algumas dúvidas, aqui vai a versão traduzida do anúncio da Adobe:

Anúncio sobre o Produto Adobe Muse

Como a Adobe continua a refocar no desenvolvimento de produtos e soluções que ofereçam a nossos clientes o que há de melhor, nós estamos agora anunciando o fim do desenvolvimento de novas funcionalidades para o Adobe Muse CC.

Prazo

Em 26 de Março de 2018 nós iremos lançar o último lançamento com melhorias do Adobe Muse. Nós iremos continuar a oferecer suporte técnico para todas as contas ativas dos clientes do Creative Cloud até 20 de Maio de 2019. Por favor, veja a seção de FAQ e Respostas para mais detalhes.

Cobertura

Adobe vem disponibilizando softwares e serviços excepcionais para nossos clientes. Isso está em nossa natureza de inovar e tentar coisas novas, e esse foi o espírito quando começamos a desenvolver o Muse oito anos atrás. Enquanto nós vinhamos comprometidos com a visão do Muse, nós percebemos tendências na criação de websites que nos fizeram evoluir nossa estratégia:
- Designers que são ativamente engajados em criar websites e aplicações complexas estão investindo em UX design e conhecimentos em prototipagem enquanto com parcerias com times de desenvolvimento trazem seus designs à vida.
- Para websites mais simples, notamos os surgimento de criadores Faça-Você-Mesmo (FVM) que utilizam modelos personalizáveis que podem rapidamente criar sites responsivos que podem ser modificados por um designer ou um usuário.
Nós agradecemos nossos usuários e queremos ajudá-los a fazer uma transição suave para outras ofertas da Adobe que possam atender suas específicas necessidades:
- Se você está construindo websites e aplicações complexas, você pode usar o Adobe XD. Apesar do Adobe XD não gerar código pronto para a web como o Adobe Muse fazia, o XD é uma solução all-in-one que permite o usuário a projetar, prototipar e colaborar com interessados e desenvolvedores para trazer vida a seus websites.
- Se você está construindo um website para demonstrar seu trabalho criativo, você pode usar o Adobe Portfolio para criar belos websites de portfolio que você pode conectar com a plataforma Behance.
- Se você está construindo um website de uma página, como um cronologia de fotografias, newsletters ou landing pages, você pode usar o Adobe Spark Page para criar belas páginas da web responsivas com seu estilo único.
FAQ e Respostas

Isso afeta todos os usuários do Muse?

Sim

Qual é o prazo?

O time do Muse irá parar de desenvolver novidades a partir de 26 de Março de 2018. Nós iremos continuar oferecendo suporte técnico para todos os usuários ativos do Creative Cloud até 20 de Maio de 2019.

Eu entendi que não vai haver mais desenvolvimento do Muse, mas o programa irá parar de funcionar em 20 de Maio de 2018 quando o suporte acabar?

Não, a aplicação Muse irá continuar a abrir no seu computador. Você conseguirá continuar editando o que já existe ou criar novos websites com a aplicação, todavia é bem possível que os padrões da web e navegadores continuem mudando depois que a Adobe parar de dar suporte a aplicação. Depois de 20 de Maio de 2019, a Adobe não mais irá entregar atualizações de compatibilidade com MacOS e Windows ou corrigir qualquer bug que possa ocorrer quando for publicar os sites Muse na web.

Que tipo de ajuda e material de suporte poderei esperar no futuro?

O Adobe Muse Microsite continuará disponível para usuários até que o suporte termine em 20 de Maio de 2019. Todavia não haverá inclusões de novos materiais e nem de eventos, tutoriais ou sites do dia. O Muse Widget Directory continuará atualizado com a disponibilidade atual do widget durante esse prazo.

O que vai ocorrer com meu website construído em Muse? Ele irá desaparecer?

Websites construídos com Adobe Muse continuarão a funcionar na internet no caso de estar em qualquer outra hospedagem third-party, como uma GoDaddy ou Bluehost (por exemplo). Sites hospedados no Business Catalyst deverão ser republicados para outras hospedagens para manter-se funcionando depois de 26 de Março de 2020 quando a hospedagem do Business Catalyst não estará mais disponível.

Eu tenho licenças/downloads de widgets Muse de um dos seus parceiros widgets. Meus widgets continuarão funcionando depois que a Adobe suspender o suporte do Muse?

Isso depende individualmente de cada provedor do widget. Se você estiver fazendo um pagamento anual para um plano de inscrição com eles, você deverá ficar alerta para verificar os planos de suporte oficial para o futuro.

Os widgets que eu comprei de um de seus parceiros irão funcionar com o Bhance Porfolio ou com o Adobe Drewamweaver?

Infelizmente, não. Todos os widgets que foram desenvolvidos para funcionar com o Adobe Muse são apenas compatíveis com o Adobe Muse.
26 de março 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