quarta-feira, 11 de novembro de 2015

Como desenvolver seu próprio logotipo ou a logomarca do seu negócio

Umas das coisas mais importantes no conceito do marketing moderno é o chamado "impacto visual" que uma marca pode imprimir em seus anúncios — seguindo o velho ditado: uma imagem vale mais do que mil palavras.

Mas de que adianta uma peça publicitária com uma imagem bem provocante se ali não ficar bem caracterizada a marca da empresa anunciante? Além disso, o espaço físico da publicidade é bem reduzido e não dá para acoplar lá uma boa imagem sem tomar o espaço para o próprio nome do negócio.

Então, o marketing moderno estabeleceu que o anunciante (uma empresa, um artista, uma personalidade etc.) deve ter sua própria representação gráfica, que sirva de assinatura, carimbo, foto de apresentação, emblema oficial. Portanto, um logotipo ou logomarca.


Diferença entre logotipo ou logomarca

Logotipo, ou simplesmente logo, é um emblema contendo o nome ou a sigla do anunciante, por exemplo, Coca-Cola, Google, IBM, CNN, Sony, Vivo etc.

Para muitos especialistas, este é o melhor padrão gráfico para valorizar o nome de uma empresa ou de uma personalidade.

Outros, no entanto, afirmam que além do próprio nome, o ideal é a aplicação de um símbolo complementar. Assim, uma vez consagrada a vinculação do símbolo com o nome, é possível usá-la separadamente. Um exemplo clássico é o M da marca McDonalds, a gigantesca rede de fast food. Inconfundível, não é mesmo?

Esses símbolos representativos são então chamados de logomarca. No caso da Nike, por exemplo, tanto o nome como o seu símbolo (uma espécie de gancho) ilustram bem a cara daquela marca.

Classicamente, busca-se a aplicação de figuras bem características ao negócio nas logomarcas, quer dizer, figuras que tenham relação direta com o segmento do negócio ou com a atividade da personalidade. Por exemplo, quando se pensa no desenvolvimento de uma logomarca para um segmento imobiliário, a primeira ideia é pensar em algo parecido com a figura de uma casa, apartamento ou similar. No caso de atividade comercial relacionado com seguros, as opções mais lógicas são as figuras de uma chave e um cadeado. E assim por diante.
A Volkswagen combinou bem os duas iniciais VW com um símbolo redondo que imediatamente nos remete a uma roda de carro. Fantástico, não? Os desenvolvedores da logomarca da Rede Globo também emplacaram uma combinação bem lógica: uma esfera maior contendo uma tela de televisão que, por sua vez, traz em seu interior uma esfera menor, representando o mundo inteiro dentro de uma televisão. A empresa de Bill Gates tem usado o óbvio: janelinhas (windows, em inglês).



Mas há também quem aposte em emblemas nada clichês e use símbolos bem extraordinários. A Apple é simbolizada por uma maçã mordida. Uma tentação, os produtos dela, não é verdade?

A logomarca pode ser um artigo bem pessoal, atendendo a um apelo do proprietário do negócio. O criador da Playboy, por exemplo, adotou um coelho. A Disney adotou a assinatura (um pouco enfeitada) da própria assinatura do seu criador Walt Disney. Johnny Walker é representado pelo desenho do pioneiro daquele uísque.
Ou seja, o dono do negócio pode simplesmente querer uma logomarca baseado no seu animalzinho de estimação, sua flor prefira, a forma geométrica que mais lhe inspira etc. A Editora Abril, no caso, adotou uma árvore.


Conceito moderno de logomarca e logotipo

Uma logomarca ou logotipo moderna tem de ser do tipo vetorial, quer dizer, baseada em linhas, curvas e ângulos matemáticos e digitalização sólida. Em suma, uma silhueta bem definida, algo que possa ser graficamente bem recortada. Se pegarmos o exemplo da maçã da Apple, vemos como ela é bem definida e perfeitamente recortável, de fácil aplicação, embora ela possa ser decorada com cores gradientes e tudo o mais. Mesmo quando a logomarca é multicolor, suas cores são bem definidas, de modo a ser bem bordada.


Os vetores podem até ser complexos, mas precisam ter formas bem definidas.

Não menos importante é a aplicação das cores. É bom combinar as tonalidades mais apropriadas para o segmento do negócio. Se a atividade é ligada a ecologia, por exemplo, as cores indicadas são nos tons verdes, azuis, marrons, alaranjados e amarelos.
Ramo alimentício pede corres mais fortes, especialmente vermelho e amarelo. Existem até estudos científicos que apontam que a aplicação adequada dessas cores abrem o apetite dos clientes. Basta ver como elas predominam nos logos das grandes marcas de fast fodd, como McDonalds e China in Box.

Se seu negócio estiver precisando de um logotipo ou logomarca, consulte os serviços da Oficina X e esteja certo da qualidade de seus profissionais.


terça-feira, 10 de novembro de 2015

Como usar o Google Maps offline


O mega conglomerado de empresas Google anunciou nesta terça-feira a liberação do uso offline do seu aplicativo de navegação de mapas, o Google Maps — função que antes era restrito a apenas algumas localidades.

Portanto, a sua nova opção de GPS offline é o Google Maps.

Para usar os mapas sem conexão de internet você precisa baixar a versão mais recente do aplicativo (versão 9.17) para android (usuários do iOS terão de esperar mais um pouco) e baixar para a memória do aparelho, ou cartão de memória, a área desejada. Depois, é só acessar livremente.

Fazendo o download da área de mapas

Uma vez atualizado o aplicativo a partir da versão 9.17, pesquise pelo local que pretende abranger o total de mapas salvos. Há limites para o tamanho da área. Não dá para baixar o mapa do Brasil, por exemplo. A área máxima é em média igual ao tamanho da área metropolitana de São Paulo.

 

Clique no nome da área pesquisada (o nome da cidade) para selecionar a área e depois, no botão de configurações, escolha salvar para offline. O aplicativo faz o download e o deixa à vontade para ser usado mesmo sem estar conectado com a internet.


Para acessar mapas offline

Abra o menu principal do aplicativo e vá em Seus lugares para ver a área que você tiver salva. Basta clicar para o Google Maps abri o mapa.





terça-feira, 3 de novembro de 2015

Tsu — a rede social que paga aos usuários

Se de graça o povão já passa o dia todo conectado nas redes sociais, imagine ganhando dinheiro com isso!

Pois esta é a proposta do Tsu  a rede social que paga aos seus usuários!


A proposta é simples: você se inscreve, cria conteúdos, compartilha e ganha pelo alcance de seus posts. Você pode postar vídeos, animações, imagens, textos etc.

Conforme o alcance, você monta seu cash e pode pedir o resgate dos créditos a partir de quando atingir o valor mínimo de U$ 100.00 (cem dólares). O pagamento é feito via conta bancária que você informar.


A estimativa atual é a de que a Tsu — leia su — já tem cerca de meio bilhão de usuários. E, obviamente, o foco de todos os inscritos é ganhar dinheiro.

Os rendimentos saem dos anunciantes, sendo que — conforme a descrição dos diretores da rede social — 90% da renda é compartilhada com os usuários e os outros 10% ficam na casa.

Com essa verdadeira corrida ao ouro, cada qual se esforça para bombar na rede e não falta quem combine a troca de cliques. E tudo é válido mesmo. Pode apelar!

Quer experimentar? Então acesse a Tsu clicando aqui.

domingo, 1 de novembro de 2015

George, o pai do operador boolean

George Boole (1815-1864)
Todo bom programador conhece o operador boolean, que contém dois valores: 1 representando uma condição é verdadeira e 0 para condição falsa. O que pouca gente sabe é quem desenvolveu e aplicou pioneiramente esse tipo de dado. No caso, foi George Boole.

Só que o Google não ignora essa informação, tanto que hoje, 2 de novembro,  o— praticamente absoluto — buscador da internet homenageia aquele brilhante matemático inglês, por ocasião do 200° aniversário de seu nascimento, destacando Boole no Doodle (aquelas animações que aparecem no lugar do logotipo da página inicial de busca do Google).


Indiretamente, portanto, George Boole foi um contribuinte à lógica de programação, em que o operador booleano (boolean, em inglês) é estrategicamente aplicado em sistemas que requerem uma ação precisa para fornecerem opções apropriadas.

Por exemplo, tendo duas variáveis (AB), você pode usar operações que façam comparações com essas variáveis para então definir uma resposta. Então, você pode condicionar: "verificar se são capitais estaduais..." (A and B). Nesse caso, digamos que seja Belo Horizonte B seja João Pessoa, logo nós teremos um valor booleano no valor 1, de verdadeiro. Caso contrário, o valor retornará falso.

Outra aplicação do operador booleano: numa condição "Se ou for um animal..." (A or B). Nesse caso, se pelo menos uma das variáveis, ou mesmo as duas, corresponderem à condição, então o valor retornará verdadeiro.

De outra forma, se a condição usar o operador xor (ou exclusivo), então o valor a ser retornado só será verdadeiro se apenas uma das variáveis corresponder ao quesito em voga (A xor B). Por exemplo: "Se somente ou somente for uma fruta...".

Porém, antes mesmo da criação da computação, George Boole já aplicava o seu sistema boolean em álgebra (ver mais em álgebra booliana).

Conheça a biografia do matemático George Boole na Wikipédia.


quarta-feira, 21 de outubro de 2015

Teste de compatibilidade com dispositivos móveis


Seu site é compatível com os dispositivos móveis?
Essa é uma questão fundamental para que seu negócio seja encontrado mais rapidamente na internet pelos sistemas de buscas.
O buscador online Google — o maior e praticamente o soberano — já anunciou que essa característica é um dos itens prioritários na relação de resultados de buscas efetuados em seu sistema. Ou seja, as páginas antigas desenvolvidas em layout originalmente para PCs estão desatualizados e os sites construídos com versatilidade para exibição adaptada para os diversos tamanhos de telas (PCs, tablets, smartphones etc.) ganham pontuação extra para figurarem-se nas primeiras posições nas buscas.
Os sites chamados resposivos são aqueles que foram programados para responderem aos diversos tamanhos de telas por onde são navegados. Dessa maneira, seus componentes (menu, banner, tabelas, janelas de vídeos, blocos de textos etc.) se ajustam conforme a resolução da tela, evitando ocultar conteúdos que antes eram acessíveis apenas por aquelas barras de rolagem horizontais.


Conferindo se seu site é responsivo

Para conferir se seu site já está adequadamente adaptado ao modelo moderno de sites responsivos, basta acessar um sistema de consulta como o do Google Developers e digitar o endereço do seu site no campo de entrada de URL e dar entrada na consulta. Em instantes o aplicativo informa o resultado.
Caso sua web esteja adequada aos novos padrões, a resposta será positiva, exibindo ainda como o Google vê o seu site.
Nós testamos o aplicativo informando o endereço de nosso site www.oficinax.com.br e obtivemos uma resposta totalmente positiva:


Testamos ainda o URL www.sprweb.org, que previamente já sabíamos não estar atualizado até este momento, e o resultado foi, obviamente, negativo.
O sistema ainda notificou três graves falhas de programação:

  • Texto muito pequeno para ler
  • Viewport não configurada para dispositivo móvel
  • Links muito próximos


Se seu site não está atualizado, providencie agora mesmo o upgrade para não correr o risco de ser "esquecido" pelas buscas do Google.

Se precisar de ajuda profissional, entre em contato com a equipe da Oficina X.


terça-feira, 29 de setembro de 2015

Série PHP: Trabalhando com data e hora

Seu aplicativo precisa de informações de data e horário? Precisa de funções que façam operações com o calendário e o registro do tempo?
Sem problemas! O PHP oferece os recursos necessários para aplicações desse tipo através dos elementos Date (data) e Time (tempo). Você pode os métodos relacionados para, por exemplo, exibir a a data e hora corrente em diversos formatos, registrar exatamente quando o usuário fez login no sistema, quando uma compra foi efetuada, quantos dias faltam para o lançamento de um novo produto, quantos dias se passaram desde tal evento até o momento etc.
São muitos recursos e nós vamos ver aqui os principais.


Exibição prática de data

Em uma página em php, escreva o código seguinte para exibir a data atual:

<?php
   $hoje = date('Y/m/d');
   echo $hoje;
?>

O aplicativo irá exibir exatamente a data atual fornecida pelo servidor.

No caso acima, abrimos e fechamos o código com as tags da linguagem php; criamos a variável $hoje e para seu valor, atribuímos o método que chama a data (date) configurada para o ano (Y), o mês (m) e o dia corrente (d). Depois, publicamos (echo) a variável, que então exibirá a data de hoje, no caso aqui, mostrando:

2015/09/29

Veja que os parâmetros (ano, dia e mês) foram separados por uma barra, conforme é o nosso padrão. De outra forma, você poderia usar espaço, vírgulas ou traço para fazer essa separação.

date('Y m d') = 2015 09 29
date('Y, m, d') = 2015, 09, 29
date('Y-m-d') = 2015-09-29

Se não usar separador, os dígitos aparecerão juntos:

date('Ymd') = 20150929

Vemos que o dia foi representado pela letra d, o mês pela letra m e o ano pela letra Y. Essas descrições são estabelecidas pelo sistema, mas há outras descrições possíveis, por exemplo, chamar o mês pelo nome (setembro), em vez do numeral (09); descrever o dia da semana (terça-feira). É possível! Basta apenas usar o caractere referente ao parâmetro.
Veja a seguir, uma tabela com os formatos para datas:

Dia (day)
d - dia com preenchimento de zero = 01, 02... 10... 31
j - dia sem preenchimento de zero  = 1, 2, 3... 20... 31
D - dia textual abreviado = Seg, ter... dom
l (L minúsculo) - dia textual = Segunda-feira... Sábado, Domingo

Mês (Month)
m - mês com preenchimento de zero = 01... 05... 11, 12
n - mês sem preenchimento de zero = 1, 2... 10, 11, 12
M - mês textual abreviado = Jan, Fev... Nov, Dez
- mês textual = Janeiro... Junho... Dezembro

Ano (Year)
Y - ano completo = 1975... 1999, 2000... 2012... 2015
y - ano abreviado = 12 (2012)... 15 (2015)...

Vamos a um novo exemplo:

<?php
   $hoje = date('l, d, M, Y');
   echo 'Hoje é ' . $hoje;
?>

Fizemos o seguinte: declaramos a variável $hoje com o valor da função que puxa a data (date) pelos parâmetros do dia textual (l) mais o mês textual abreviadol (M) e o ano completo (Y); depois exibimos uma linha de texto ('Hoje é ') concatenado (.) com o valor da variável $hoje.
O meu resultado foi:

Hoje é Terça-feira, 29, Set, 2015


Exibição prática da hora

Para exibir a hora certa, basta acrescentar os parâmetros adequados na declaração da função da data (date), no caso, para hora, para minutos e  para segundos. Veja:

<?php
   $tempo = date('d/M/Y, H:i:s');
   echo $tempo;
?>

O que veremos é algo do tipo:

29/Set/2015, 15:51:04


Salvando data no Banco de Dados (formato internacional)

ATENÇÃO: o formato correto para salvar data em um banco de dados é conforme o padrão internacional (formato americano), cuja ordem é inversa da que usamos no Brasil. Enquanto usamos a sequência dia, mês e ano, o padrão internacional usado para salvar o registro de hora em um BD é year, month, day, ou seja, ano, mês e dia.

Inclusive, esse sistema é -- devemos reconhecer -- é mais inteligente que o nosso, pois faculta literal e corretamente uma ordem crescente e decrescente. Por exemplo, se você pegar os valores literais das datas 3 de julho de 2025 e 29 de junho de 2010, literalmente, você compreenderá que a segunda data tem um valor maior e, numa ordem crescente, posterior que a primeira data fictícia, pois, já pelo valor do dia (3 e 29), teríamos um desajuste na ordem, uma vez que o dia 3 é menor que 29, embora pelo valor do ano respectivo de cada qual seria o contrário (2025 é maior que 2010). Já no padrão internacional, isso nunca ocorre, pois a ordem começa pelo ano, depois pelo mês e por último o dia.

Então, se você precisa salvar uma data escrita no nosso formato num BD, será preciso converter para o padrão internacional (de dia/mês/ano para yearr/month/day). Mas, sem problemas! Basta usar o código conversor adiante:

$hoje = 29/09/2015;
$convert = implode("-", array_reverse(explode("/", $hoje)));

Então o BD receberá a data convertida pronta para ser salva como: 2015-09-29

Por outro lado, se a data está salva no BD (no padrão internacional: ano, mês, dia), e você precisa mostrá-la no nosso padrão (de yearr/month/day para dia/mês/ano), use o código a seguir:

$bd = xxxx/xx/xx // variável com o registro do BD
$convert = implode("/", array_reverse(explode("-", $data)));
echo $convert;

Então o resultado será: 29/09/2015


Configurando a localidade

Bem, mas o servidor do seu site pode estar configurado com os dados de outra localidade, dando diferença na hora certa de sua cidade. Nesse caso, será preciso configurar a zona do tempo.
Então, usamos o date_default_timezone_set:

<?php
   date_default_timezone_set('America/Sao_Paulo');
   $tempo = date('d/M/Y, H:i:s');
   echo $tempo;
?>

A hora será exibida pelo local estabelecido (no caso aqui, definimos o horário da cidade de São Paulo).
Ah, outra coisa, talvez a descrição textual do dia semana e do mês também não esteja de acordo com o nosso português, sendo então impresso as datas em inglês (Monday, Sunday, January, September etc.).
Bom, só para garantir, você pode fazer um truquezinho para converter os valores dos parâmetros e assim traduzir as descrições.
Eis um exemplo:

<?php
    $data = date('D');
    $mes = date('M');
    $dia = date('d');
    $ano = date('Y');
    
    $semana = array(
        'Sun' => 'Domingo', 
        'Mon' => 'Segunda-feira',
        'Tue' => 'Terça-feira',
        'Wed' => 'Quarta-feira',
        'Thu' => 'Quinta-feira',
        'Fri' => 'Sexta-feira',
        'Sat' => 'Sábado'
    );
    
    $mes_textual = array(
        'Jan' => 'Janeiro',
        'Feb' => 'Fevereiro',
        'Mar' => 'Março',
        'Apr' => 'Abril',
        'May' => 'Maio',
        'Jun' => 'Junho',
        'Jul' => 'Julho',
        'Aug' => 'Agosto',
        'Nov' => 'Novembro',
        'Sep' => 'Setembro',
        'Oct' => 'Outubro',
        'Dec' => 'Dezembro'
    );
    
    echo $semana["$data"] . ", {$dia} de " . $mes_textual["$mes"] . " de {$ano}";
?>

O resultado será:

Terça-feira, 29 de Setembro de 2015

O que fizemos dessa vez foi separar os parâmetros do dia, mês e ano, declarando-os em variáveis diferentes.
Para a descrição textual da semana, criamos a variável $semana com uma tabela de valores (array) que verte a abreviação dos dias da semana em inglês para português. Quando então essa variável é chamada, ela pega o valor do dia atual contido na variável $data e traduz para o valor correspondente.
Semelhante ao truque da descrição textual do dia da semana, fizemos com a descrição textual do mês, que configuramos pela array declarada na variável $mes_textual.

Mais especificações, consulte o manual online do PHP clicando aqui.

segunda-feira, 28 de setembro de 2015

Google Web Designer é o estúdio gráfico da vez!

O Google lançou em junho deste ano o seu estúdio gráfico Google Web Designer, com o qual você cria animações interativas para web, por exemplo, para anúncios ou infográficos para sites, ou mesmo uma web propriamente dita. É, digamos, a aposta da empresa para a substituição dos memoráveis filmezinhos rodados em Flash Player.

O software é gratuito, porém ainda é anunciado como programa beta, ou seja, em fase de testes.

Visite o site oficial do Google Web Designer.


Basicamente o estúdio trabalha assim: você cria uma peça  visual e dá vida a ela através de recursos como animação e interação.
A animação se dá com a montagem de frames (quadros) em uma timeline (linha do tempo), que pode ser executado linearmente (por exemplo, seguidamente do primeiro quadro até o último) ou com interações (por exemplo, com um clique ou simplesmente se o mouse for rolado sobre o objeto) que movam a reprodução do filme para um quadro determinado.
O estúdio permite o uso de camadas, o que viabiliza animações mais dinâmicas ainda. Por exemplo, você usa uma camada para o background e sobre ela você usa uma nova camada para um objeto especial que receberá animações ou funções específicas, como uma caixa de texto, um botão, figuras recortadas etc. Controlando as camadas isoladamente, você pode fazer coisas muito interessantes.

Veja um projeto modelo clicando aqui.


O Google Web Designer já vem com vários samples (modelos) que você pode editar para ajustar aos seus projetos ou mesmo para ajudar no aprendizado das funcionalidades que o estúdio oferece. No final, basta exportar o arquivo e tudo fica prontinho para ser publicado na internet.

Vale a pena dar uma conferida.

terça-feira, 22 de setembro de 2015

Aprenda como usar as fontes do Google em seu site


Melhore seu site adicionando fontes diferentes e elegantes. Para tanto, o Google tem um servidor exclusivo para esse serviço e te oferece inúmeras opções gratuitamente.

Algumas palavras sobre tipografia
Fonte é um modelo de tipografia, ou seja, de desenho dos caracteres (letras, números e símbolos). Quando usamos um programa de texto, este precisa nos oferecer uma tabela de caracteres para que possamos escrever algo.


Alguns softwares oferecem várias fontes e permitem que o usuário escolha a que deseja usar.


Os navegadores de internet também dispõem desse recurso. No Google Chrome, por exemplo, você vai nas Configurações Avançadas e no item Conteúdo da Web você pode escolher a fonte padrão para os textos das páginas que visitar. Nesse caso, o browser vai puxar as fontes disponíveis no dispositivo (no seu computador, por exemplo) para que você selecione uma. Então, todos os textos dos sites vai ser exibidos pelo modelo tipográfico que for selecionado no navegador  desde que o desenvolvedor não tenha estilizado a tipografia do seu site.
Então, o ideal sempre é estabelecer uma fonte padrão para o seu site e  por que não?  usar mesmo várias fontes, um modelo para cada classe (título, subtítulo, parágrafo, links, texto em destaque etc.).

Estilizando fontes no seu site
Bom, então você tem na sua máquina uma bela fonte e está certo de que ela cairia muito bem no seu site. O problema é que, se os usuários que acessarem a página não tiverem o mesmo arquivo dessa fonte, o browser vai redirecionar a tabela para outro modelo  muitas vezes, com tamanho diferente, ou com ausência de caracteres especiais (letras acentuadas, por exemplo), o que pode prejudicar o layout do site.
Para não correr o risco de sua página ser deformada com o uso de fontes indesejadas, a solução é usar tabelas de fontes online. Então, quando o site é aberto, ele puxa a fonte do servidor e carregada os textos perfeitamente, como você estilizou.

O servidor Google Fonts
A dica atual é o servidor Google Fonts, que contém muitos modelos de fontes, prontas para serem usadas livremente.


Não é preciso fazer nenhum cadastro, nem download de arquivo, nada disso. Para usar as fontes do Google você só precisa seguir os seguintes passos:

  1. Escolha uma fonte: navegue pelo site e veja quantas e belas opções você tem lá. Para exemplificação, vamos pegar a fonte Lobster.


  2. Abra a guia de códigos: clique no botão Quick-Use para ir abrir uma nova página, de onde vamos pegar os códigos.

  3. Copie os códigos: na página que se abre você verá no item 1 o estilo selecionado (no nosso exemplo, Lobster - Normal), no item 2, configurado na categoria de fontes para Latin, no item 3 temos o link da fonte a ser posto no seu site, pois esse endereço vai dizer aos navegadores que acessarem sua página, que vá no servidor Google Fonts e carregue esse arquivo de fonte para então usar no conteúdo a ser aberto no browser. Portanto, você copia essa linha e cola no cabeçalho (head) da sua página:
    <link href='https://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>

  4. Usando o arquivo de fonte carregado: agora, basta estilizar onde você vai usar a fonte lincada. Você pode definir que todo o site use essa fonte como padrão escrevendo assim no seu CSS:
    body {
    font-family: 'Lobster', cursive;}

  5. Estilizando uma classe: se preferir, pode aplicar a fonte apenas a uma classe específica. Por exemplo:

    .textoEspecial {font-family: 'Lobster', cursive;}

    Daí então é só usar a classe no conteúdo do seu site, por exemplo, configurando um título assim:

    <h2 class="textoEspecial">Usando uma fonte do Google</h2>


    O resultado será esse:

Usando fontes do Google


Gostou? Beleza, não é?
Bom, então agora é só visitar o servidor e escolher mais fontes para o seu site.
Para uma melhor visualização dos estilos, você pode abrir o mapa de caracteres de cada modelo clicando no botão Pop out:



E para facilitar sua busca por um modelo mais apropriado ao seu site, navegue pelo menu lateral esquerdo do servidor.

Lá você tem a opção de definir alguns atributos que simplifica a procura, para você não ter que perder muito tempo visualizando todos os modelos.
A primeira coisa a ser observada é o tipo de script. Nosso tipo padrão é o Latin. Mas se estiver desenhando um site em grego, use o Greek.
A categoria Thickness diz respeito à espessura da fonte. Se gostar de letras finas e elegantes, mova o seletor para thin; se quiser fontes mais grossas e impactantes, opte por thick.
A categoria Slant se refere à inclinação, em que Straigth é o tipo aprumadinho e slanted é o tipo de fonte inclinada, como nos modelos handwrite (escrita de mão).
Por fim, a categoria Width classifica as fonte por tamanho, em que narrow se aplica a fontes menores e estreitas e wide se aplica aos tipos maiores e mais largos.

No mais, vale lembrar que uma forma de dar um destaque ainda mais sofisticado os textos (especialmente nos títulos e subtítulos) é acrescentar sombreamento (veja aqui).
Outra dica válida é que as cores dão um diferencial aos textos. Títulos, parágrafos e links ficam bem salientes quando você aplica matizes distantes de uma mesma tonalidade, por exemplo: azul celeste, azul petróleo e azul marinho.
Mas, cuidado, diferentes tipos de fontes usados ao mesmo tempo, com cores muito diferentes e fortes, podem poluir o visual do seu site. É sempre bom visitar sites do mesmo ramo de atividade para se ter uma ideia dos estilos empregados.

segunda-feira, 21 de setembro de 2015

Text-shadow - estilizando sombras nos textos com CSS



Um efeito simples e ao mesmo tempo bem eficiente para sofisticar o site é o text-shadow, ou seja, texto com sombreamento, aplicável em CSS.
Vamos direto a um exemplo, para entendermos a sintaxe básica.
No CSS escrevemos assim: a classe .item vai ter cor da fonte branca (color: white) e um sombreamento com afastamento horizontal de 0.1em e afastamento vertical de 0.2em, na cor amarelo (yellow):

.item {
   color: white;
   text-shadow: 0.1em 0.2em yellow;
}

Daí, no corpo da página (body), usamos a classe num título:

<h2 class="item">Texto com sombreamento</h2>

O resultado será esse:

Texto com sombreamento


Você pode alterar o posicionamento como quiser, aumentando os valores das propriedades das coordenadas X (horizontal) e Y (vertical), além de alterar a cor. Por exemplo, você pode querer que a sombra fique à esquerda do texto. Nesse caso, o valor da coordenada X deve ser negativo. Vamos ver como fica? Mas, além disso, vamos acrescentar mais um valor numérico à sintaxe, nesse caso, especificando a densidade da sombra. Quando menor o valor, mais denso; quanto maior o valor, mais desfocado (o famoso efeito blur). Vejamos:
No CSS, estilizamos a classe .item2 com a cor da fonte alaranjada (#F90) e um sombreamento posicionado no eixo X em -0.1em (um pouquinho à esquerda), no eixo Y com 0.1em (um pouquinho abaixo), com um blur de 0.2em com sombra em tom azul (#00F):

.item2 {
   color: #F90;
   text-shadow: -0.1em 0.1em 0.2em #00F;
}

Em seguida, aplicamos a classe em um título (h2) no corpo da página:

<h2 class="item2">Sombreamento desfocado</h2>

O resultado será esse:

Sombreamento desfocado


O efeito text-shadow permite aplicar mais de um sombreamento num mesmo elemento, com isso nós podemos criar umas aplicações muito bacanas, por exemplo, criando a ilusão de alto relevo e baixo relevo.
O alto relevo pode ser feito assim:

Exemplo de baixo relevo


Para chegarmos ao resultado acima, precisamos estilizar a cor da fonte com o mesmo valor do fundo da página e criarmos então dois sombreamentos, sendo um mais escuro (para a parte superior) e um levemente mais claro (parte inferior do texto) em tons aproximados ao fundo da página. No nosso caso, (que usamos um fundo de avermelhado para vinho), os valores são esses:

.item3 {
   color: #311523;
   text-shadow: 1px 1px #50233A, -1px -1px black;
}

Note que agora nós usamos os valores em Pixel ao invés de EM, que usamos nos exemplos anteriores (Saiba mais sobre esses tipos de valores clicando aqui).
Veja que na linha do text-shadow, há dois sombreamentos configurados, separados por uma vírgula. No primeiro, o da parte inferior, tem valores positivos (1px tanto para o eixo X quanto para o Y) e uma cor clara (#50233A). Depois da vírgula vem o segundo, com valores negativos (-1px) na cor preta.
Daí, então, aplicamos a classe item3 em um título (h1, para ficar maior) no corpo da página:

<h1 class="item3">Sombreamento desfocado</h1>

Agora, vamos para o .item4, que terá a ilusão de um texto em alto relevo, criado pela dupla camada de sombreamento, dessa vez, invertendo os valores negativos e positivos do posicionamento dos eixos X e Y.
O código é esse:

.item4 {
   color: #311523;
   text-shadow: -1px -1px #50233A, 1px 1px black;
}

E o resultado será assim:

Ilusão de alto relevo


Quer mais?
Mantendo a fonte com a mesma cor do fundo da página (dando a ilusão de fonte transparente) e criando dois sombreamentos (a primeira para a parte inferior e à direita do texto; a segunda para a parte superior e à esquerda do texto) ambas de um cor só, nós criamos um modelo de fonte contornada. Veja o resultado:

Fonte apenas contornada


Para o exemplo acima, nós estilizamos da seguinte forma no CSS:

.item5 {
   color: #311523;
   text-shadow: -1px -1px white, 1px 1px white;
}

De maneira parecida, você pode usar o contorno sobre uma fonte colorida. Por exemplo, como no item abaixo:

Fonte colorida e contornada


Para o título assim, usamos o .item6 estilizado com uma fonte na cor azul e agora com quatro camadas de text-shadow, para dar uma espessura maior à sombra, que recebeu a cor laranja. Veja o código dessa classe:

.item6 {
   color: blue;
   text-shadow: -2px 0 orange,
                0 -2px orange,
                2px 0 orange,
                0 2px orange;
}

E tem mais!
Para finalizar, o .item7 vai ser estilizado assim:

.item7 {
   color: orange;
   text-shadow: 0 0 1em red;
}

Veja que nós colorimos a fonte em laranja e aplicamos uma só camada de sombreamento, na cor vermelha, sem distanciamento (nem no eixo X, nem no Y), aplicando um desfocamento de 1em.
Veja só como fica:

Texto brilhoso


Dê uma olhada também nesses modelos de sombreamento.
Bem, agora é com você. Use sua criatividade e deixe seu site mais sofisticado aplicando o efeito text-shadow em CSS. Ele fica bacana especialmente em títulos e subtítulos, além de textos quaisquer que precisem de um contraste em relação ao background da página.