Criação

O que é WordPress e como funciona sua estrutura de dados

26 de abril de 2021By Laynara Vieira1 Comment

WordPress é um “Sistema de gerenciamento de conteúdo” de código aberto e livre com o objetivo de facilitar a criação de sites e blogs, sem a necessidade de ter um conhecimento prévio em programação.
O código do WordPress utiliza o PHP como linguagem back-end, e MySQL (ou MariaDB), como gerenciador do banco de dados.
Pode-se usá-lo para o desenvolvimento de sites de e-commerce, portfólios profissionais, publicação de eventos, divulgação científica ou qualquer tipo de conteúdo de forma textual e gráfica.
E esse é só o começo do porque usar wordpress.

Páginas e Posts, qual a diferença?

Páginas

• São atemporais;
• organização hierárquica (pai/filho);
• Não tem autor nem data de publicação.

Posts

• São oportunos;
• Organizados por taxonomias;
• Precisam de um autor e uma data.

Embora eles sejam diferentes, o armazenamento desses posts acontece no mesmo lugar, na tabela wp_post. Oque vai diferenciar essas duas coisas dentro da tabela é a coluna “post_type”, tipo de post, onde vai estar armazenado se o post é do tipo página, post, attachment etc…
Por Exemplo:

O que é Post meta?

Também chamados de “custom field”, são os campos do post que não fazem parte dos campos padrões, como o título, o conteúdo, ou o autor do post.
Por exemplo:

Nesse projeto criamos um post do tipo “despachante”, e precisamos também criar muitos post meta para armazenar as informações sobre esses despachantes. E é assim que vai aparecer no ambiente administrativo.

Já no banco de dados as informações ficam armazenadas desta forma:

Todos os posts meta de todos os tipos de post vão ficar armazenados nessa tabela chamada wp_post_meta.

O que é Taxonomia?

É uma forma fácil e prática de agrupar posts, garantindo que seja fácil pro usuário achar dentro do site conteúdos relacionados. Por padrão o Post já vem com as taxonomias categoria e tags, mas o wordPress disponibiliza uma função para que possamos criar nossas taxonomias personalizadas.
Por exemplo:

Usando o mesmo exemplo do projeto citado acima, criamos três taxonomias para agrupar os despachantes.

Já no banco de dados as taxonomias e seus termos são armazenados desta forma:

Essa é a tabela wp_term_taxonomy, onde ficam armazenados todas as taxonomias e seus termos.

Essa é a tabela wp_terms, onde ficam armazenados todos os termos.

Essa é a tabela wp_term_relationships, onde fizam armezados os termos e os posts aos quais este termo está relacionado.

Espero que tenha conseguido clarear um pouco mais na sua cabeça como funciona a estrutura de dados do nosso queridinho WordPress.
O que você achou desse artigo? Deixa um comentário vai, nunca te pedi nada <3

UX Design: desenhando a Experiência do Usuário

Guia Básico de UX: desenhando a Experiência do Usuário

12 de abril de 2021By Mariane Fermino1 Comment

Alguns conceitos básicos para começar:

Usabilidade é um atributo de qualidade que mede a facilidade de usar um produto. Se está fácil de usar, temos uma boa usabilidade, caso contrário, a usabilidade está ruim;

Interface é basicamente a forma como você se comunica com o se usuário, e como ele interage com o que você criou.

Arquitetura de informação é a forma como você organiza e categoriza todo o conteúdo que o produto possui

Design de Interface e o Design de Experiência do Usuário

Mas, o que é preciso saber sobre a usabilidade?

Uma boa usabilidade deve cumprir com 5 funções básicas:

Aprendizagem: Os seus usuários conseguem realizar tarefas básicas no primeiro acesso ao seu produto?
Eficiência: Eles conseguem realizar essas tarefas com rapidez?
Memorabilidade: Eles conseguem se lembrar como devem usar o seu produto após algum tempo sem usá-lo?
Prevenção de erros: A usabilidade do seu produto evita que seus usuários cometam erros, ou ajudam que revertam um erro facilmente?
Satisfação: É gostoso usar o seu produto? Seu usuário sente felicidade por conseguir realizar tudo o que ele precisa?

Para saber se essas cinco funções estão sendo cumpridas, podemos contar com as dez heurísticas de Nielsen. Jakob Nielsen é o pai da usabilidade, e depois de muita pesquisa, ele definiu essas regras e boas práticas para uma boa usabilidade:

As Heurísticas de Nielsen. Nielsen é o “Pai da Usabilidade”

1 – Mantenha o status visível: A interface do sistema sempre deve manter o usuário informado em tempo real sobre o que está acontecendo, por meio de feedback instantâneo para suas ações.

2 – Tenha proximidade com o mundo real: É preciso falar a língua dos usuários, e isso deve ser feito de forma natural e lógica. Tanto para a escolha da comunicação, quanto paras as imagens e ícones escolhidos. Portanto, as informações devem ser contextualizadas com o modelo mental do usuário e fazer parte do dia a dia das pessoas.

3 – Exerça o controle, mas sem tirar a liberdade: O usuário tem que sentir-se no controle do sistema, por meio da possibilidade de a qualquer momento abortar uma tarefa ou desfazer uma ação e retornar ao estado anterior, porém, é importante que você direcione o seu usuário para ajudá-lo a cumprir a sua tarefa.

4 – Mantenha a consistência e os padrões: Para ser consistente e propiciar o aprendizado e reconhecimento do usuário, o seu produto deve conter um padrão audiovisual (texto, cor, som), de modo que um mesmo comando ou ação ter sempre o mesmo efeito e deve ser apresentada da mesma maneira e localização.

5 – Trabalhe na prevenção de erros: É preciso entender onde e de qual maneira o seu usuário pode errar, para assim evitar que isso aconteça.

6 – Crie Reconhecimento: O seu usuário nem sempre irá decorar os caminhos realizados para chegar em determinado resultado. É recomendado deixar bem visível esse passo a passo, para que ele refaça esse caminho sempre que necessário.

7 – Flexibilidade e eficiência de uso: O sistema deve ser capaz de oferecer uma boa experiência tanto para usuários leigos como para usuários avançados.

8 – Design Minimalista: Quanto mais informação desnecessária, maiores são as chances do seu usuário de perder no meio do caminho. As telas do seu produto deve ser simples e conter somente o que os usuários precisam saber / fazer.

9 – Ajude a reconhecer, diagnosticar e consertar erros: As mensagens de erros do sistema não podem ter conteúdo intimidatório, devem ser de fácil compreensão e orientar o usuário a entender o problema e buscar uma solução.

10 – Documentação e ajuda: O ideal é que o seu produto seja feito de forma que o usuário navegue intuitivamente, mas em alguns casos, é necessário oferecer informação e ajuda para o seu usuário.

Ufa, foi bastante coisa para considerar né? E Esse é só o ponto de partida.

É importante porque se o seu site for difícil de usar, difícil de ler, se o usuário tiver dificuldade para encontrar o que ele precisa ou não conseguir atingir o seu objetivo, ele simplesmente sairá e não voltará mais. Sim, seu usuário abandona seu site se não conseguir usar.

Existem muitos sites de produtos e serviços, e se o usuário não conseguir usar o seu, certamente irá para outro. E muito provavelmente isso já aconteceu com você, não é?

E é assim que você fica quando não consegue realizar uma tarefa em um aplicativo ou em um site.

Como montar livreto no Adobe InDesign usando vários arquivos

28 de junho de 2017By Eduardo Cardillo5 Comments

Montar um livreto usando um arquivo é simples, a Adobe inclusive mostra em seu site de ajuda, mas se você estiver usando vários arquivos ela não mostra como fazer.
Se você está diagramando/produzindo um material com um volume muito grande de páginas vai usar o Adobe InDesign para isso. Se o acabamento for grampeado ou costurado no centro das páginas, vai precisar criar um livreto para mandar imprimir.

Como disse anteriormente esse processo é bem simples mas vou mostrar um passa-a-passo resumido aqui para introduzir o assunto principal que é fazer isso com vários arquivos diferentes:

1. Configurando seu documento

Seu documento precisa de uma configuração específica para montar um livreto, então vá em Arquivo > Configurar Documento.

Nesta janela você precisa se atentar para o tamanho da página, páginas opostas, número de páginas, e sangria. Não vou entrar no mérito de alguns detalhes imaginando que já sejam de seu conhecimento.

Número de páginas

Para imprimir um livreto de um único arquivo, o número de páginas do documento deve ser obrigatoriamente divisível por 4 (4, 8, 12, 16…40, 44, etc) caso não seja o Adobe InDesign vai preencher com páginas em branco no final do documento.
No nosso caso, para fazer um livreto com vários arquivos, cada arquivo pode ter qualquer quantidade, o que importa é a quantidade total de todos os arquivos, isso sim deve obedecer esta regra.

Páginas opostas

Para impressão de livreto esta opção deve estar selecionada, já que o livreto é composto por páginas opostas (uma ao lado da outra).

Tamanho da página

Isso é extremamente importante e tem relação direta com o local onde será impresso seu material. Lembre que o tamanho da página do seu documento dever ser menos da metade do tamanho do papel a ser usado, se estiver pensando em usar sangria, então se o maior formato impresso pela gráfica é A3, então seu documento deve ser menor que A4 para considerar sangria.

Imprimindo livreto

Agora vamos ao livreto, acesse Arquivo > Imprimir livreto…

Na janela que surgir faça as escolhas das opções conforme sua necessidade e se precisar criar um PDF ao invés de imprimir, terá que instalar uma impressora PDF em seu computador ou usar um Arquivo PostScript em conjunto com o drive de uma impressora e o Adobe Acrobat (que irá gerar o PDF a partir do arquivo .ps gerado pelo InDesign). Se estiver usando o Windows ainda é possível mandar imprimir direto em Microsoft XPS Document Writer (o PDF da Microsoft).

Montando um livreto com vários arquivos

Não, o Adobe InDesign não faz isso automático, nem criando um Livro como mostra o manual da Adobe. A montagem é semi-automática, pois você terá que juntar todos os arquivos em um e aí sim mandar imprimir o livreto como mostrei acima, então faça o seguinte:
Abra um novo arquivo com as mesmas especificações do seu material final e já com a quantidade total de páginas somando todos os arquivos, vá em Arquivo > Inserir…

Selecione o primeiro arquivo da série, clique no botão “Opções” e selecione a opção “Mostrar opções de importação” e clique em “Abrir”.

Na janela que abrir com as opções defina na seção “Páginas” a opção “Tudo” para inserir todas as páginas do documento e na seção “Opções” em “Cortar em:” escolha “Caixa delimitadora de sangria” se houver sangria no seu material e clique em “OK”.

Seu mouse aparecerá com a primeira página do documento pendurada, basta clicar no canto superior esquerdo da página que aparecerá a página já posicionada (se precisar ajustar posição e tamanho poderá ser feito após inserir todas) e já estará disponível para inserção a próxima página bastando apenas clicar no canto superior esquerdo da próxima página e assim sucessivamente até finalizarem todas as páginas do documento selecionado.

Repita a inserção até ter adicionado todas as páginas de todos os arquivos e ao final terá um arquivo completo com todas as páginas prontas para serem impressas, agora basta seguir o passo-a-passo inicial.
Sei que isso parece ser muito incoerente, por que o software não monta automático já que ao criar um arquivo de livro mostramos a ele quais arquivos fazem parte do livro, mas parece que esse trabalho não é usado para trabalhos com grandes tiragens onde a impressão será feita em offset e a montagem das chapas é manual.
Então para que serve o arquivo de livro? Basicamente ele organiza a numeração de páginas e padroniza os estilos.
Espero ter ajudado, mesmo que não deixando muito prático o trabalho! Qualquer dúvida, sugestão ou indicação diferente anota nos comentários aqui embaixo 😉

CMKY x RGB x DPI

6 de julho de 2016By willian.martins0 comment

CMKY ou RGB?
RGB é a abreviatura das cores primarias em inglês, que são: Vermelho, Verde e Azul (Red, Green e Blue). Esse padrão foi constituído para reprodução através da luz, por isso é destinado para telas de computadores, celular e monitores. Estas cores combinadas resultam em outras cores. Em razão disto, o valor para modificar uma cor vai de 0 a 255. Para isso, a mistura das cores varia de acordo com a intensidade da mesclagem que você fez.
Já o CMKY, abreviatura das cores subtrativas formado por Ciano (Cyan), Magenta (Magenta), Amarelo (Yellow) e Preto (Black (Key)). Esse padrão, ao contrário do RGB, é composto por cor pigmento. Por isso, as cores em CMKY na tela dos monitores não são reproduzidas da mesma forma que impressa.
Afinal, quando usar CMKY ou RGB?
Como já colocado, CMKY é dedicado para a maioria das impressões gráficas, isto pode não ser considerado dependendo da máquina e o tipo de impressão que será realizada. Já o RGB usamos nas telas de computadores ou celulares.
Como configurar meu arquivo para CMKY ou RGB?
No Photoshop, antes de você iniciar um novo arquivo você já pode definir o padrão, quando você abrir um novo arquivo (CTRL+N). A caixa de definições é mostrada no Modo de Cores:

DPI?
Pontos por polegadas como é nomeado o DPI, é uma medida relacionada a composição da imagem, representando o número de pontos existentes em uma polegada. O Termo mais comum é resolução da imagem. Isto porque, a resolução está diretamente ligada à o número de DPIs, quanto maior, maior será a qualidade e definição da imagem. Para definir o número de DPI é preciso saber o que você pretende produzir, quanto maior a impressão ou a necessidade de qualidade, maior deverá ser o DPI.

Como defini-lo?
No Photoshop você define da mesma forma, na caixa inicial de abertura de um arquivo, terá a opção Resolução (conforme imagem)
resolucao

E o Pantone?
Pantone é uma tabela de cores primarias. A diferença das cores Pantone para o CMKY, por exemplo, é a exatidão nas cores que evitam variações na impressão. Geralmente muito usada em logos ou impressões que utilizam de poucas cores e que necessitam de uma impressão fiel ao arquivo.

Estilo de Camadas – Photoshop

19 de abril de 2016By willian.martins0 comment

O Photoshop disponibiliza uma ferramenta com diversas opções para você melhorar ou diferenciar a aparência do seu objeto, chamada estilo de camadas (em inglês, Layer Style). Ela acrescenta sombras, profundidade, brilho e diversos outros. Que servem tanto para seu objeto como para seu texto.
Mostraremos em imagens, cada uma das funções. Para isso utilizamos o logo da Tok digital para exemplificar.

1 – COMO ABRIR OS ESTILO DE CAMADAS

Existem duas formas mais comuns, uma delas é clicando duas vezes em cima da camada em que deseja aplicar o efeito, ou clicando com o botão direito em cima da mesma.

O estilo de camadas é a primeira opção da lista, quando aberta lhe mostra as opções de mesclagem (Blending Options), que são os efeitos que você pode aplicar a sua camada.

2 – CHANFRO E ENTALHE (Bevel and Emboss)

A primeira opção que você pode aplicar é o chanfro e entalhe. O chanfro e entalhe dão um efeito “tridimensional” para sua camada, dentro deles, possuem duas opões: Contorno e Textura.

CONTORNO (Contour)

Como o nome já diz, o contorno que dá o efeito interno na extremidade da camada, dando esse efeito de profundidade.

TEXTURA (Texture)

Já a Textura, traz uma aparência original para sua camada, muito usada quando quer aplicar uma camada em alguma foto que queira tornar mais realista.

3 – TRAÇADO (Stroke)

A terceira opção é o Traçado, ela aplica uma borda externa para sua camada, dando a você a oportunidade de escolher a espessura e cor da mesma.

4 – SOMBRA INTERNA (Inner Shadow)

Essa opção aplica um sombreamento no interior da camada; também é muito usada para dar a impressão de profundidade do objeto, porém, contrariando o sentido do contorno.

5 – BRILHO INTERNO (Inner glow)

Esse efeito que ao contrário do que aparenta é aplicado internamente, dando mais destaque, ideal para sobrepor as demais camadas em uma edição.

6 – ACETINADO (Satin)

Cria uma espécie de brilho interno, como o nome diz, aproxima o efeito do tecido de cetim.

7 – SOBREPOSIÇÃO DE COR (Color Overlay)

Esta opção é muito simples e prática (número 1 na imagem), ela aplica a cor que você quiser na camada (número 2 na imagem). Porém ela se aplica no todo, tirando todas sombras ou detalhes que a camada possuía originalmente.

8 – SOBREPOSIÇÃO DEGRADÊ (Gradient Overlay)

Além de aplicar uma cor sólida, você também pode aplicar um efeito gradiente, é isto que a oitava opção lhe oferece, podendo decidir quais cores você pretende aplicar (indicação número 2), e a cor predominante (número 3).

9 – SOBREPOSIÇÃO PADRÃO (Pattern Overlay)

Esta opção se assemelha com a textura, porém, ela pode se aplicar de forma personalizada, podendo você criar sua própria sobreposição ou usar as opções que o Photoshop já lhe oferece!

10 – BRILHO EXTERNO (Outer Glow)

O brilho externo possui a mesma função do brilho interno, porém, se aplica pela parte exterior do objeto/camada.

11 – SOMBRA PROJETADA (Drop Shadow)

Está função é muito importante e bastante usada, pois ela trabalha com a iluminação e direções da luz sobre o objeto, trazendo uma sombra externa na camada, onde você decide distância, tamanho e expansão.

Em breve mais dicas.

Transparência (linear, radial) em imagens no Adobe Illustrator

6 de abril de 2014By Eduardo Cardillo15 Comments

Depois de vasculhar a internet e usar várias soluções paliativas resolvi acabar com isso e pesquisar a fundo o tema: Como criar transparências lineares e/ou radiais em imagens no Adobe Illustrator?
Pois bem, fui direto na fonte, adobe.com, e lá comecei a ler o manual do software, não encontrei este item especificamente, mas encontrei algo que me levou a solução do meu problema. Pois bem vamos ao que interessa.
Selecione sua imagem e abra a janela Transparência. Se a janela Transparência não estiver ativa, clique no menu Janela > Transparência.
Clique em Criar máscara. A corrente ao lado da imagem, na janela Transparência, vai ser habilitada e ao lado da corrente um quadrado preto irá aparecer. Sua imagem vai ficar invisível.
Clique sobre o quadrado preto, na janela Transparência para entrar na máscara recém criada.

Com a Ferramenta Retângulo (M) crie um retângulo sobre a imagem e aplique um preenchimento gradiente na janela Gradiente. Se a janela Gradiente não estiver ativa clique no menu Janela > Gradiente.
Pronto, agora é só ajustar conforme necessário e quando estiver pronto, volte a janela Transparência e clique no quadrado da imagem para sair da máscara.

Não sei você, mas isso me liberou algum tempo de trabalho!

Dúvidas, sugestões ou qualquer outra coisa, use a vontade o formulário de comentários abaixo.
Obrigado pela visita!

Corel substitui "aspas duplas" por «setas duplas»

3 de junho de 2013By Eduardo Cardillo21 Comments

Instalei o novo Corel Draw X6, que já nem mais tão novo é assim, e surpreso descobri que por padrão ao inserir aspas duplas ele substitui por setas duplas. Algumas pessoas estão atribuindo este fato a configurações de teclado do próprio sistema operacional (Techmundo, Yahoo), porém o problema é resolvido facilmente no próprio Corel Draw X6.
Conforme outras ocorrências parece que este “problema” vem desde a versão X4 do Corel Draw (ScriptBrasil).
Resolva em três passos simples:

Vá ao menu Ferramentas e clique em Opções.
Na tela que abrir, procure na lista de itens a sua esquerda o item “Texto” e clique no sinal de +, em seguida clique em “Correção rápida”.
Na área de configurações de Correção Rápida altere os campos Abrir e Fechar referente a aspas duplas, clique em OK.

Observe que nesta mesma tela você ainda tem outras opções que podem estar lhe incomodando diariamente e talvez possam ser alteradas.

Cortar cabelo no Photoshop CS5

11 de julho de 2012By Eduardo Cardillo1 Comment

Um tutorial bacana para quem ainda tem dúvidas sobre essa demanda que nos toma um tempo danado.

MAIÚSCULAS & minúsculas

9 de julho de 2012By Eduardo Cardillo0 comment

Essa semana me deparei com uma situação engraçada, minha colega de trabalho estava com um parágrafo inteiro escrito em caixa alta e precisava que este estivesse em caixa baixa.
Começou a digitar tudo novamente para baixar a caixa do texto, a sorte que por um acaso eu estava vendo, pedi para ela parar na hora… Como assim que ela não sabia que, o word ou qualquer outro programa de edição de texto e edição gráfica, faz isso automático? Então aí vai:
Word: Menu Formatar > Maiúsculas e Minúsculas (Change Case)
Illustrator: Menu Texto > Maiúsculas e Minúsculas (Change Case)
Os programas ainda dão opções para escolher entre, tudo minúsculo, a primeira letra da frase em maiúsculo, as primeiras letras de todas as palavras maiúsculas, tudo maiúsculo e as primeiras letras minúsculas.