Editorial

Caro Amigo,

Chegamos no mês de Dezembro e nossa equipe agradece a cada associado por mais um ano de parceria com nosso

clube. A nossa proposta sempre será de preparar uma revista com assuntos relevantes e importantes no âmbito da

programação de sistemas.

Este mês nosso colaborador Hamden Vogel escreveu o artigo “Pequenas dicas, grandes negócios”, o qual nos ensina

como ler propriedades de uma classe, incluindo seus tipos, leitura de “strings” caractere por caractere de forma eficiente sem

usar laços, leitura de “tokens” convertendo para uma matriz de inteiros, funções reescritas originárias do Delphi, a fim de dar

mais agilidade e performance em suas execuções, entre outras dicas. Já nosso outro colaborador Ricardo Barbosa Crivelli vem

com o artigo “Wordpress: Trabalhando com temas”. Os temas são aparências que você pode instalar em seu site para que ele

tenha uma interface totalmente nova, podendo ser pagos ou gratuitos. Uma boa alternativa para o desenvolvedor que

necessita alterar e deixar o site de acordo com suas preferências. Para encerrar a série de artigos nosso consultor técnico

Thiago Cavalheiro Montebugnoli redigiu um artigo utilizando a ferramenta gratuita “Microsoft Visual Studio Community 2017”

denominado “Linguagem C# - Criando QR Code”. Desta vez ele faz o uso da nova versão do NuGet para instalação e criação

de um exemplo com auxílio da biblioteca “Zxing.Net”.

Desejo a todos um Feliz Natal e um próspero Ano Novo. Abraços

Marcos César Silva

Diretor Técnico

Pequenas dicas, grandes negócios

Sempre me deparei com situações que precisava automatizar certos processos triviais para o usuário comum,

como ler uma string e interpretar seus valores através de um delimitador, por exemplo, a fim de filtrar opção por opção;

ou então verificar se um determinado caracter é de um tipo e valor esperado - uma validação dinâmica - mas sem usar

o jeito tradicional de fazer um loop pra pesquisar um a um - uma alternativa mais flexível e que o usuário certamente

pudesse acompanhar - e isso é o foco deste artigo - trazer o usuário mais "de perto" à essas funções internas do Delphi

que eles nem sempre sabem o que estão acontecendo. E por fim, também mostrar uma alternativa, agora para o

desenvolvedor, de ler todas as propriedades publicadas (published) e também os tipos a que pertencem, também

podendo ter uma função de pesquisar se uma propriedade existe ou não na classe; bem como um procedimento para

recuperar todos os valores default setadas para essas propriedades published, algo como "reinicializando" em modo de

execução estas informações padrão.

Tudo isso parece ser simples de fazer - na verdade é; mas não é muito fácil de se conseguir visualizar comumente

- quase ninguém pensa nesse sentido, usando aquelas implementações tradicionais - mas quero trazer a luz novas

implementações, melhores resultados, aquele sentimento de "porque não pensei nisso antes?" através de rotinas

eficientes e fáceis de serem reutilizadas, e que dependendo do caso o usuário possa "participar" mais disso, inserindo

parâmetros e acompanhando o feedback dessas rotinas. Vamos introduzir algumas idéias interessantes que vão melhorar a interatividade com o usuário, o sistema e

também com o desenvolvedor.

Idéia 1 - Lendo uma string e quebrando através de delimitadores, onde este retorno é um array contendo os

valores quebrados.

Este procedimento consiste em obter uma string com vários dados, separados por um delimitador, como por

exemplo, o caracter de ponto e vírgula ";" e poder efetuar um loop em todos eles contidos em memória por um vetor -

imagine a situação em que o usuário possa inserir as páginas que devem ser impressas, ou pesquisadas - ele vai inserir

algo no tipo "2;5;10;20;22;23" e assim o sistema vai pegar uma a uma e executar a tarefa. Parece simples, mas é; e então,

trouxe um resultado eficiente, onde os tipos de delimitadores já vem inicializados em uma constante e os retornos

podem ser implementados como array of string, integer, etc; no nosso caso vai ser do tipo integer.

Figura 01 - Lendo uma string e retornando os valores separados quebrados por um delimitador (no exemplo - o ponto e vírgula).

Idéia 2 - Lendo uma string e validando caracter a caracter, dependendo do valor e da posição pesquisada como

parâmetro.

Esta implementação achei interessante porque você valida o que quiser na string - basta informar a posição do

caracter pesquisado e se o valor desejado está contido nele. Nesta minha funcionalidade, você pode pesquisar por

exemplo de umaforma mais automatizada - como pesquisar se o primeiro caracter é um caracter alfabético (letra) e se o

segundo caracter é um caracter numérico. E finalmente, se uma string em uma dada posição possa conter um conjunto válido

de caracteres permitidos - exemplo - em um conjunto de AnsiChar (set of AnsiChar). Segue os prints abaixo:

Figuras 02 e 03 - Implementações de validações caracter a caracter em uma determinada string - onde tudo é passado como parâmetro de entrada.

Idéia 3 - Trabalhando com classes - lendo todas as propriedades publicadas e seus tipos, pesquisando se uma delas

existe, setando elas para o valor default.

Utilizando RTTI (Run-time Type Information), recurso que permite recuperar informações em tempo de execução que

já foram geradas em tempo de projeto, podemos verificar se uma propriedade tem o tipo tal, a que classe ela pertence, etc;

no nosso exemplo vamos recuperar todas elas; basta informar a classe desejada que esta minha função vai trazer todas as

propriedades "published" dela, e primeiramente uma observação inicial relevante: toda classe que se deseja acessar seus dados

via RTTI, é necessário que insira em cima da mesma a diretiva de compilação {$M+}, que indicará ao compilador para gerar

informações RTTI para as propriedades e eventos publicados nela. Segue abaixo as evidências de teste relacionadas a esta funcionalidade:

Figuras 04 a 08 - Demonstrações das implementações da funcionalidade de leitura RTTI da classe de exemplo TSampleClass.

GetPropList(TSampleClass.ClassInfo, tkAny, PropList);

try

for I := 0 to Count - 1 do begin PropInfo := PropList^[I]; case PropList^[I].PropType^.Kind of tkLString, tkString, tkWString: ListBox1.Items.Add(PropInfo^.Name + ' é

string'); tkInteger: ListBox1.Items.Add(PropInfo^.Name + ' é integer'); tkEnumeration: begin

OrdTypeData := GetTypeData(PropList^[I].PropType^); if (OrdTypeData^.MinValue = 0) and (OrdTypeData^.MaxValue =

and (GetEnumName(PropList^[I].PropType^, 0) = 'False') and

(GetEnumName(PropList^[I].PropType^, 1) = 'True') then

ListBox1.Items.Add(PropInfo^.Name + ' é boolean'); end;

tkFloat: ListBox1.Items.Add(PropInfo^.Name + ' é float'); tkInt64: ListBox1.Items.Add(PropInfo^.Name + ' é int64'); tkVariant: ListBox1.Items.Add(PropInfo^.Name + ' é variant');

Conclusão

Vimos nesta primeira parte alguns exemplos de como melhorar a implementação de funções que verificam caracteres

em strings, separam eles através de delimitadores, lêem propriedades publicadas de classes via RTTI, com uma facilidade de

se adaptar esses códigos a qualquer outra idéia, como ler strings quebradas por delimitadores (exemplo: ler apenas alguns

números de páginas, imprimir certas páginas); validar caracteres em determinadas posições de uma string (exemplo: validar

algum tipo de senha, verificar se uma string atende a alguma regra negocial do sistema); ler métodos publicados de uma classe

qualquer (exemplo: implementar alguma rotina de metadados onde se deseja recuperar dinamicante qual objeto que foi

instanciado e seus métodos que foram utilizados em um dado momento, para gravação em log, exibição deste objeto dinâmico

em uma DBGrid, obtenção destes campos para satisfazer a uma rotina qualquer de geração de colunas dinâmicas, como

exibição em um relatório QuickReport/Rave, construção de um padrão repositório com os nomes das propriedades published

das classes geradas), enfim, as possibilidades são inúmeras. Desejo a você leitor bons estudos com este artigo, seguem os fontes em anexo, até a próxima!

Sobre o Autor

Hamden Vogel , Consultor TheClub

E-mail: suporte@theclub.com.br

Wordpress: Trabalhando com temas

Introdução

Nos artigos anteriores nós aprendemos a instalar, configurar uma nova instalação do WordPress (WP) e também como

atualizar e instalar novas funcionalidades ao CMS. No artigo de hoje nós iremos trabalhar com o front-end do WP, ou seja, os

temas!

Temas?

Se você já trabalhou com algum outro CMS antes já deve estar acostumado com o conceito de temas. O WordPress

explora muito bem esse conceito.

Os temas são aparências que você pode instalar em seu site para que ele tenha uma interface totalmente nova. Eles podem

ser pagos ou gratuitos, inclusive é muito comum você encontrar o mesmo tema em uma versão grátis com recursos um pouco

mais limitados e uma versão paga mais completa e com suporte especializado.

O Codex, a “Wikipédia” do Wordpress, cita os seguintes benefícios para o sistema de temas:

Possibilita criar uma aparência única para seu site; Provê uma alternativa para funcionalidades específicas de seu site, como páginas para categorias e

resultados de buscas; Permite trocar de forma rápida e fácil entre várias aparências; Separa a apresentação e o sistema de templates do sistema permitindo que ambos sejam atualizados

de forma separada e sem mudanças drásticas na aplicação; Provê um sistema de personalização específica para cada tema; e Remove a necessidade de o proprietário do site ter que aprender sobre CSS, HTML e PHP para ter um

site com aparência profissional.

Temas Padrões

Normalmente as instalações padrões do WordPress possuem três temas instalados, na versão mais atual (4.9) os três

temas são o Twenty Seventeen (que é a aparência que vem ativado na instalação), a Twenty Sixteen e a Twenty Fifteen. Como

você pode perceber os nomes são sequenciais e a normalmente a cada nova atualização um novo tema é disponibilizado. Se

você acessar a parte de temas no painel administrativo você poderá verificar os temas instalados e uma miniatura de sua

aparência (Figura 1).

Figura 1. Mensagem de aviso de atualização.

Acho que todos concordam que os temas padrões, se não muito bem personalizados, não são um sinônimo de beleza,

e é por isso que existem milhares de temas disponíveis para serem instalados, alguns são grátis e outros pagos.

Instalando um novo tema

Para instalar um novo tema existem três formas distintas. A primeira seria baixar o seu tema no site do desenvolvedor

e enviar os arquivos para a pasta /wp-config/themes/. Feito isso o tema estará disponível na listagem de temas (Figura 1) para

ser ativado. A segunda forma é a mais simples de todas e consiste em instalar o tema pelo próprio diretório de temas do

WordPress. Para adicionar um tema neste método acesse seu painel de controle, acesse a listagem de temas (Figura 1) e clique

no botão “Adicionar novo” que está sendo ilustrado na Figura 2.

Figura 2. Botão para se adicionar um novo tema.

Uma listagem de temas irá aparecer em sua tela juntamente com um sistema de filtros. É possível escolher os temas

por assunto do seu site, como blog, e-commerce, educação, etc., características, como fundo personalizado, logo

personalizado, imagem de destaque, etc. e por último o tipo de layout, que são uma, duas ou três colunas, modelo de grade,

entre outros. Vale lembrar que é possível selecionar mais de uma característica ao mesmo tempo. A Figura 3 mostra todos os

elementos que estão disponíveis.

Figura 3. Filtros de busca de temas.

Além de todos esses filtros é possível também selecionar os destaques, os mais populares, os mais recentes e os seus

favoritos, além de claro, poder digitar o nome do plugin.

Após achar o plugin que lhe interesse, clique sobre a imagem do tema para visualizar suas informações e um breve

exemplo de como ele irá ficar em seu site. Uma coisa que meus alunos sempre me questionam é que o exemplo muitas vezes

está bem “menos elegante” que a imagem de destaque e isso se deve ao fato de que o site de exemplo é uma versão genérica

e muitos temas exigem um nível de personalização maior para se obter o resultado da imagem, ou seja, antes de obter o

resultado você precisará configurar alguns itens que muitas vezes são realmente muito simples. Se você decidir que este é o seu tema, clique no botão Instalar que está destacado na Figura 4.

Figura 4. Atualização dos plugins.

Após a instalação seu site ainda não estará com a nova aparência, é preciso ativá-la clicando no botão “Ativar”. Você se lembra que nós falamos agora pouco que alguns temas exigem algumas configurações? Pois bem, normalmente o

tema após ser instalado e ativado pela primeira vez uma mensagem de configuração poderá aparecer igual ilustra a Figura 5.

Figura 5. Atualização dos temas.

A última maneira de se adicionar um plugin é fazendo o upload do arquivo .zip. Esse é método que provavelmente

você irá utilizar quando comprar um tema em alguma loja. Para isso siga os passos da forma anterior e na listagem dos temas

disponíveis para download clique no botão “Enviar tema”, conforme ilustra a Figura 6.

Figura 6. Botão para acesso à página de envio do tema.

Um formulário irá aparecer no topo da página com o campo para selecionar o arquivo e então instalar o tema.

Temas Filhos

Você deve ter percebido que é possível modificar muita coisa nos temas, mas vai chegar um momento que você talvez

precise modificar no código a aparência ou comportamento de uma parte específica do site e até aí tudo bem, basta alterar o

código e pronto, mas o problema é que na próxima atualização o seu código será substituído e todas suas modificações serão

perdidas e é a aí que entram os temas filhos. Com os temas filhos o WordPress irá sempre procurar pelo arquivo no tema filho e se ele não existir ele irá procurar

automaticamente no tema pai, assim se você precisar alterar alguma característica da página que exibe uma postagem basta

copiar o arquivo single.php para seu tema filho e realizar a alteração, assim mesmo que o tema pai seja atualizado seu código

continuará intacto no tema filho. Os temas pagos normalmente já possuem o tema filho disponível para download, mas os gratuitos e os distribuídos

dentro do WordPress não, então vamos criar o nosso tema filho.

Navegue até a pasta /wp-content/themes/nome-do-tema/, para acessar a pasta do seu tema. Nela há um arquivo

obrigatório chamado style.css. Copie o arquivo, e crie uma pasta em /wp-content/themes/ para armazenar os arquivos de seu

tema.

No meu caso irei copiar o arquivo do tema Hestia, o conteúdo do seu arquivo deve ser bem semelhante:

/*

Theme Name: Hestia

Theme URI: https://themeisle.com/themes/hestia/

Author: ThemeIsle

Author URI: https://themeisle.com

Description: Hestia is a modern WordPress theme for professionals. It fits creative

business, small businesses (restaurants, wedding planners, sport/medical shops),

startups, corporate businesses, online agencies and firms, portfolios, ecommerce

(WooCommerce), and freelancers. It has a multipurpose one-page design, widgetized

footer, blog/news page and a clean look, is compatible with: Flat Parallax Slider,

Photo Gallery, Travel Map and Elementor Page Builder . The theme is responsive, WPML,

Retina ready, SEO friendly, and uses Material Kit for design.

Version: 1.1.56

License: GNU General Public License v2 or later

License URI: http://www.gnu.org/licenses/gpl-2.0.html

Text Domain: hestia

WordPress Available: yes

Requires License: no

Tags: blog, custom-logo, portfolio, e-commerce, rtl-language-support, post-formats,

grid-layout, one-column, two-columns, custom-background, custom-colors, custom-

header, custom-menu, featured-image-header, featured-images, flexible-header, full-

width-template, sticky-post, theme-options, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.

Use it to make something cool, have fun, and share what you've learned with others.

Hestia is based on Underscores http://underscores.me/, (C) 2012-2015 Automattic, Inc.

Underscores is distributed under the terms of the GNU GPL v2 or later.

*/

Você pode ter notado que existe um padrão no comentário inicial do arquivo e você está correto, o WordPress usa

esse comentário para extrair as informações e exibi-los na listagem de temas, por exemplo.

Para criar nosso tema filho você não precisa de todas as informações, somente o nome do tema (Theme Name), autor

(Author) e o tema pai (Template). Confira como ficou o meu style.css:

/*

Theme Name: The Club Theme

Author: Rico Crivelli

Author URI: https://capim.art.br

Description: Tema filho para criação de um site para a revista The Club Magazine.

Version: 1.0.0

Text Domain: hestia

Template: hestia

*/

Agora o WordPress irá ler o CSS e irá identificar que o nosso tema é filho do tema Hestia. Para que o tema funcione perfeitamente é necessário cria um arquivo chamado functions.php, o seu conteúdo neste momento

pode ser vazio. Ele é o responsável por personalizar o comportamento dos plugins e até mesmo do próprio WordPress, mas

fique tranquilo que falaremos dele nos próximos artigos.

Figura 7. Tema filho ativado.

Agora volte para a listagem de temas e ative seu tema filho e veja que a aparência continua a mesma que a anterior,

mas agora podemos modificar tranquilamente sem ter o risco de perder as modificações.

Conclusão

Com o artigo de hoje espero que você tenha conseguido entender como funciona a parte do front-end do WordPress.

Agora que possuímos um tema filho vamos personalizar cada parte dele até que tenhamos um tema totalmente feito sobre

medida e assim você poderá modificar o que quiser e até mesmo criar o seu próprio tema.

Sobre o Autor

Ricardo Barbosa Crivelli, mais conhecido como Rico Crivelli, é formado como Bacharel em Sistemas de Informação e Licenciado em Computação pela Universidade Estadual do Norte do Paraná e pós-graduando em Informática na Educação. Atualmente é Técnico em TI no Instituto Federal de São Paulo – Câmpus Avaré. Tem como especialidade a linguagem PHP e o framework Symfony,

apesar de adorar trabalhar com front-end e desenvolvimento mobile. Possuir as certificações COBiT 4.1 Foundation e Delphi 2006 Developer.

E-mail: suporte@theclub.com.br

Linguagem C# - Criando QR Cod

Caro amigo leitor,

No artigo deste mês irei explorar o uso de um recurso muito utilizado em diversos momentos, o denominado “QR

Code”. Para quem não sabe o “QR Code”, ou código QR, é a sigla “Quick Response”, traduzindo significa “Resposta Rápida”. É

um código de barras que pode ser interpretado rapidamente pelas pessoas. (Podemos utilizá-la em praticamente tudo)

Normalmente o QR Code é utilizado por vários setores, como por exemplo: indústrias, revistas, propagandas,

aplicativos, vídeos, entre outras coisas. O código do mesmo é utilizado para armazenar URLs direcionadas para um site. Outra

característica do QR Code é a facilidade e a possibilidade de escaneamento por qualquer dispositivo móvel que possua câmera

com algum aplicativo específico para esta tarefa.

Depois de entendermos um pouco do conceito iremos aplicá-lo na prática. Usaremos o Microsoft Visual Studio 2017

junto com a linguagem C#. Instalaremos a biblioteca gratuita “Zxing.Net” que pode ser encontrada no gerenciador de pacotes

“NUGET”.

Abordaremos todas as etapas a seguir.

Criando um novo projeto

Inicie o Visual Studio clicando em “Arquivo/Novo/Projeto...” em “Windows Forms Application”. Iremos basear nosso

exemplo em Formulário Windows. Insira no mesmo o componente “PictureBox” (onde será criado o código) e um “Button”

(para executar os comandos necessários).

Atenção: Deixe a propriedade “Size” do “PictureBox” com os mesmos valores para altura e largura.

Figura 01: Criando o Formulário padrão

Instalando o “Zxing.Net”

A instalação da biblioteca responsável é muito simples, clique em “Ferramentas/Gerenciador de Pacotes do

NuGet/Gerenciador de pacotes do NuGet para a Solução...” Podemos conferir os detalhes na Figura 02.

Figura 02: Gerenciador de Pacotes NUGET.

Importante: Neste artigo utilizaremos o “Microsoft Visual Studio Community 2017”, portanto estamos com a

ferramenta atualizada. Caso for utilizar uma versão inferior do MSVS provavelmente seja necessário instalar algumas extensões

para que a API “ZXing.Net” funcione corretamente. Na caixa de pesquisa digite o termo: “Zxing.net” e o instale no projeto ativo. Automaticamente será acrescentada

algumas referências necessárias para o funcionamento do exemplo. Ver Imagem 03.

Figura 04: Zxing e Zxing.presentation.

Codificando o Exemplo

Devemos apenas adicionar os namespaces “ZXing” e “ZXing.Common”.

using System;

using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Threading.Tasks; using System.Windows.Forms;

using ZXing;

using ZXing.Common;

No evento click do “Button” iremos criar o código de barras. Ver Listagem abaixo.

private void btnGerar_Click(object sender, EventArgs e)

{ try {

var codigo = new BarcodeWriter(); var encoding = new EncodingOptions() {

Width = 300, Height = 300, Margin = 0

};

codigo.Options = encoding;

codigo.Format = BarcodeFormat.QR_CODE;

var imagem = new Bitmap(codigo.Write("http://www.theclub.com.br");

picBoxQRCode.Image = imagem;

} catch (Exception Erro) {

MessageBox.Show("Erro ao Gerar o QRCode! Erro:"+Erro); }

}

Todo o código foi criado dentro do bloco de comandos “Try/Catch”. O primeiro passo seria criar as variáveis “código”

e “encoding”, sendo responsáveis respectivamente por criar o código de barras propriamente dito e a codificação contendo

as propriedades: altura, largura e margem necessária. (Width, Height e Margin).

As variáveis criadas são do tipo “var”, ou seja, o próprio compilador irá deduzir e o tipo da variável a ser implementada.

(Poderíamos também utilizar e forçar as classes respectivas destas variáveis).

Instancie a variável “código” para a classe “BarcodeWriter()” e a “encoding” para a “EncodingOptions()”. Para esta última

deveremos informar os valores das propriedades como: Width = 300, Height = 300, Margin = 0.

O “Encoding” será atribuído na propriedade “código.options” e o formato em “código.Format” deixaremos como

“BarcodeFormat.QR_CODE”.

A última tarefa seria de criar a Imagem propriamente dita com o parâmetro “codigo.Write” para e inseri-la no

componente “PictureBox” informando o texto desejado, no nosso caso foi informado a própria URL do The Club. (

http://www.theclub.com.br ).

Ao executar o projeto teremos um resultado idêntico ao da Imagem 05.

Figura 05: QRCode.

Conclusão

Neste artigo vimos a facilidade da implementação dos denominados “QR Codes”, um recurso muito utilizado atualmente. Para

desenvolvermos utilizamos a última versão da ferramenta da Microsoft, a 2017, lembrando que a “Community” é gratuita desde que respeitando os termos propostos pela fabricante. Instalamos a biblioteca “ZXing.Net” com o auxílio do

gerenciador de pacotes NuGet, o qual se torna um facilitador quando se trata na instalação de bibliotecas de terceiros.

Fica a dica pessoal, um grande abraço e até o mês que vem!

Referências

https://zxingnet.codeplex.com/

Sobre o Autor

Thiago Cavalheiro Montebugnoli adora aprender novas tecnologias. Formado pela Faculdade de Tecnologia de Botucatu – SP (FATEC), já desenvolveu softwares utilizando a plataforma .NET, Delphi junto com Banco de Dados SQL Server e Firebird.

Como experiências profissionais mais recentes, possui em seu currículo sua atuação no Centro de Processamento de Dados da Prefeitura

Municipal de Itaí-SP e atualmente compõe a equipe da Coordenadoria Tecnologia da Informação no IFSP – Instituto Federal do Estado de

São Paulo em Avaré. Além disso, é colunista mensal da Revista The Club Megazine e é consultor Técnico do The Club. Possui as seguintes

certificações: MCP - Microsoft Certified Professional, MCTS - Microsoft Certified Technology Specialist, MCAD - Microsoft Certified Application

Developer e MCSD - Microsoft Certified Solution Developer.

E-mail: rico@capim.art.br