Como Criar Um Site, Blog ou Loja Virtual Gratis - WebMaster.pt

Introdução Ao SVG – Scalable Vetor Graphics

Maicon Sobczak — Mon, 19 Mar 2012 20:36:08 +0000

Apesar da efervescente comunidade em torno do desenvolvimento web existem elementos e funcionalidades dos navegadores que permanecem dormentes até um programador resolver usar a imaginação.

Foi assim com o Ajax e esta sendo assim com dois elementos que ganharam proeminência juntamente com o advento do HTML 5. Apesar de estarem disponíveis há anos, foi nos últimos meses que obtiveram o suporte necessário, tanto por parte dos navegadores, quanto dos desenvolvedores.

O SVG e o Canvas são direcionados para a renderização de gráficos diretamente no navegador. Neste tutorial teremos uma introdução ao SVG e no próximo tutorial veremos o Canvas.

Gráficos Vetoriais Escaláveis

No título temos a tradução de SVG (Scalable Vetor Graphics). Nas recomendações da W3C desde 2001, é semelhante aqueles artistas talentosos que permanecem no underground e poucos conhecem toda a sua potencialidade.

Os gráficos criados com SVG são vetoriais, o que significa que não importa quanto zoom você aplicar sobre o gráfico, a definição do gráfico será perfeita. É como desenhar com o Illustrator diretamente no navegador.

Outro ponto positivo do SVG é que a estilização é feita com CSS. Todo elemento criado pode ser estilizado separadamente. E também pode ser animado. Isso porque o SVG tem o Document Object Model (DOM), o mesmo modelo de representação utilizado pelo HTML.

Para começar os rabiscos você precisa entender XML. Uma linguagem muito versátil que eu já expliquei em outro tutorial publicado aqui no Webmater.pt: Introdução Ao XML. O mais fantástico do estruturar os gráficos com o XML é que desta forma você poderá manipular todos os atributos do elemento.

Todos os navegadores atuais suportam o SVG, mas o Internet Explorer não suporta animações. Para as versões anteriores do IE é utilizada a biblioteca SVG Web (ficheiro zip do subdomínio code.google.com) que utiliza Flash para gerar os gráficos.

Para inserir o SVG na página, você pode usar o elemento img, iframe, embed, object ou diretamente na página. As marcações são as seguintes

Vamos aproveitar o suporte dos navegadores atuais e usar o SVG diretamente na página. A estrutura básica e obrigatória para criar o espaço necessário para a criação das formas é a seguinte:

A largura e altura definidas nesta linha delimitam as fronteiras para o gráfico.

No SVG temos disponíveis seis formas básicas: rect (retângulo), circle (círculo), elipse, line (linha), polyline (polilinha) e polygon (polígono). Cada uma com seus atributos específicos. A cor padrão é preta e sem linha ao redor do gráfico. No decorrer do tutorial criaremos exemplos e com isso veremos os atributos de cada forma.

Círculo E Retângulo

Começamos pelo círculo e retângulo:

Lembra-se das inesquecíveis aulas de matemática e o Plano Cartesiano? Pois utilizaremos finalmente. Com o diferencial que o 0,0 são o canto superior esquerdo do navegador ou elemento no qual o gráfico esta sendo criado. Alguns elementos usam o “x, y” e outras o “cx, cy” para representar a distância.

O tamanho do retângulo é definido com os atributos “width” e ”height” e para conseguir cantos arredondados pasta usar “rx” e “ry”. Já no caso do círculo o tamanho é definido pelo atributo “r” de radius. Na elipse é o “rx” e “ry”.

Preenchimento

O atributo “fill” é o responsável pelo preenchimento da forma. Aceita o nome da cor, código hexadecimal ou identificador no caso de gradientes. Vamos aplicar gradiente para exemplificar:

Vamos a explicação do código: começamos com a estrutura obrigatória onde são definidos os limites para o gráfico.

Em seguida conhecemos as tags , abreviação para definições. Entre elas definimos os parâmetros para o gradiente.

Utilizamos um gradiente linear, existe também a opção de criar um radial o que mudaria também os atributos utilizados.

Identificamos este gradiente como “gradiente1” e ao analisar o código você verá que este nome foi usado para o atributo “fill “do círculo criado.

Os atributos “x1”,” x2”, “y1”, “y2 “ definem a posição do gradiente e aceitam inclusive valores negativos.

Se x1 e y1 forem 100% a última cor declarada ficará no canto superior esquerdo, se o x2 e y2 forem 100% então a última cor fica na canto inferior direito.

Cada tag inclui uma cor. A primeira e última cor partem das extremidades em direção ao centro enquanto as intermediárias disputam o espaço intermediário.

O atributo “offset “informa o início e fim da cor, o “stop-color“ informa a cor e o “stop-opacity “ a opacidade.

Existe um amplo espaço para experimentações na criação dos gradientes sendo que ainda existe o gradiente radial.

Como dito anteriormente é possível estilizar os elementos com o css através da modalidade inline.

Polígono

O atributo exclusivo para a criação dos polígonos é o “point”, uma array de pares “x”, ”y“ onde o primeiro par começa no topo do polígono e segue a leitura em sentido horário. Todos os outros atributos de estilização funcionam para este elemento também.

Linha

Considerado o gráfico mais básico, criar linhas com SVG é muito simples e usa os atributos explicados anteriormente.

Polilinha

A polilinha tem muita utilidade na criação de gráficos tabulares, estilo “desempenho trimestral das vendas”. Apesar de não se limitar a isso.

O atributo “point” aceita uma array de pares “x”, “y“ bem no estilo cartesiano começando no canto superior esquerdo. Então para fazer a linha subir o valor é menor e para descer é maior. Pela liberdade na definição dos pontos é possível criar qualquer desenho e preencher com uma cor sólida ou gradiente como as outras formas.

Texto

Pegando o exemplo da criação do gráfico com a polilinha é comum além dos traços, a necessidade de identificar os pontos com texto. É muito parecido com HTML e utiliza atributos que já conhecemos:








     TEXTO

Elemento g

Ao compor gráficos mais elaborados, com várias formas, é comum a necessidade de aplicar um mesmo atributo ou animação para todos. Para este fim existe o elemento “g” que tem o propósito de agrupar as formas. Para exemplificar vamos fazer todos os elementos ficarem com uma borda cinza:













   
   stroke-width=3 />

     TEXTO

Animações

O principal diferencial do SVG em relação ao Canvas é o suporte a animações. Você pode criar as animações utilizando o javascript aproveitando a estrutura DOM, o suporte nativo dos navegadores ao SMIL ou uma mistura das duas técnicas. As formas e possibilidade das animações são infinitas e aqui veremos a base para que você entenda o funcionamento.

A má notícia é que o IE somente suporta animações criadas com o javascript.

Primeiro vamos ver como criar uma animação simples diretamente com o SVG/SMIL onde será criado um círculo que fica mudando de cor:

Com um nome bastante sugestivo o elemento animate é inserido dentro do elemento a ser animado. Os atributos básicos requeridos são: o nome do atributo a ser animado (attributeName); a duração em segundos (dur); os valores (values), que podem ser desmembrados em from e to; e a quantidade de vezes que a animação será repetida (repeatCount).

Para animações que alteram mais do que um atributo ao mesmo tempo é preciso usar o animateTranform:







       

       


            attributeName="transform"

            begin="0s"

            dur="20s"

            type="rotate"

            from="0 60 60"

            to="360 100 60"

            repeatCount="indefinite" />

O primeiro valor no from/top é relativo ao ângulo enquanto os outros dois são o x e o y.

Visite este link sobre SVG animation with JavaScript and SMIL e veja as incríveis possibilidades de animação do SVG.

Conclusão

São tantas as possibilidades do SVG que já foram escritos livros especificamente tratando do assunto. É possível aplicar filtros, máscaras, responder a eventos do mouse e uma gigantesca gama de combinações que simplesmente não cabem em um tutorial introdutório.

Aproveite a base aprendida neste tutorial e pesquise mais sobre o assunto, pois com a crescente interatividade dos gráficos e a necessidade de portabilidade, o SVG pode levar a qualidade dos seus aplicativos a outro nível.

Introdução Ao SVG – Scalable Vetor Graphics é um artigo da nossa comunidade: Webmaster.pt Marketocracia Digital

Os Segredos Do Sucesso Na Internet

Rui Soares — Mon, 23 Jan 2012 20:57:01 +0000

O caminho para o sucesso tem vários destinos de chegada e muitos caminhos diferentes para chegar a cada destino. Neste artigo, vou partilhar algumas ideias que aprendi percorrendo o meu caminho.

Como continuo a caminhar esse caminho, porque existem vários destinos que quero visitar e ainda não terminei a minha viagem, não sou o guru que dá uma aula. Sou um aluno que partilha aquilo que já aprendeu através da sua própria experiência, com um espírito aberto para receber também conhecimento dos visitantes e leitores.

Assuma A Responsabilidade E o Risco Do Seu Negócio

Na empresa onde trabalho, hospedamos (alojamos) milhares de sites de empresas. E recebemos ocasionalmente uma reclamação que é representativa do tipo de investimento que algumas empresas fazem na internet:

Já contratei hospedagem (alojamento web) há mais de 1 semana e o meu site ainda não está no primeiro lugar no Google para a pesquisa de “palavra chave MUITO competitiva”. A culpa deve ser do servidor. Como é que vamos resolver isto?

“Há um remédio para as culpas, reconhecê-las.” ( Franz Grillparzer )

Com paciência, educação e profissionalismo, tentamos que este cliente reconheça e assuma a sua responsabilidade na gestão do seu negócio e site.. Para ter apenas uma ideia básica sobre o que se passa no comércio electrónico, este cliente precisa de:

compreender o que é um serviço de hospedagem (alojamento) web;
aprender SEO;
experimentar AdWords;
aceitar a ideia que há milhares de empresas que chegaram primeiro e que, embora o sucesso não seja como uma fila para pagar as compras no supermercado, é preciso muito trabalho e um conhecimento especializado para vencer essa concorrência.

Se você não tiver sucesso, a culpa é sua. Não é o fim do mundo. O sucesso nunca é um valor absoluto. Amanhã é outro dia.

Mas, se você não for capaz de assumir a responsabilidade das suas acções, se culpar a falta de sorte, o Google, os seus pais, todo mundo menos você, o amanhã será um dia parecido com o hoje. O destino é seu. Agarre-o!

A Internet Não É Sonho! É Realidade!

O nosso escritório está localizado num bairro onde moram famílias da classe média alta. Nas ruas principais, existem muitas lojas e também escritórios no primeiro andar de cada prédio. É um local agradável. Temos dois super mercados e várias padarias e restaurantes próximo.

Há poucos meses, um dos restaurantes (também café / padaria) que frequentamos foi vendido. A dona, uma mulher ainda jovem e que não tinha formação para gerir aquele tipo de negócio, vendeu o restaurante a um homem também jovem. Não sei o preço, mas não devo errar muito se escrever 1 Milhão de Euros (2 Milhões de Reais). Se errei, então o preço foi um pouco mais alto do que isso.

Há 2 anos atrás, aquele restaurante servia mais de 150 almoços todos os dias. Hoje, depois de alguns erros do novo dono, serve menos de 50. Por vezes, entro no restaurante na hora do almoço e está VAZIO. Hoje, pelas 13:15, tinha apenas 1 pessoa a almoçar: um senhor já idoso. O dono do negócio precisa dumas lições do Gordon Ramsay…

Porque escrevo sobre um negócio do mundo real a propósito de ter sucesso na internet? Pela simples razão que a internet, ao contrário do que algumas pessoas pensam, faz parte do mundo real.

Se é difícil ter sucesso num negócio que custou 1 Milhão de Euros (2 Milhões de Reais), é possível ter sucesso na internet pensando que é tudo grátis, fácil e rápido?

Você quer ter sucesso na internet? Prepare-se para estudar, investir tempo ou dinheiro para ter o know-how necessário e trabalhar muito, com determinação, paciência e paixão. A internet não é um mundo de sonho onde todas as suas fantasias se vão realizar.

No Far West Americano, os garimpeiro que fizeram fortuna com ouro e os criadores de gado que fizeram fortuna com gado suaram lágrimas de sangue. Se quiser seguir o caminho fácil, inscreva-se no Big Brother. Ou jogue na lotaria.

Você Precisa De Sentir A Emoção Certa Para Ter Sucesso

A minha viagem começou no meu quarto em casa. Antes, trabalhava como advogado em Direito Criminal / Penal. E tinha sucesso em quase todos os processos.

No meu último processo, defendi um jovem assaltante, rebelde, mau e violento. Até aquele momento na minha vida, eu acreditava que todas as pessoas podiam ser boas. Precisavam apenas duma oportunidade e de afeto.

O irmão dele era educado, trabalhador e honesto. Nasceram no mesmo local, tiveram a mesma educação, as mesmas oportunidades.

Eram tão diferentes.

O processo era pesado. O meu cliente podia ficar preso alguns anos. Esteve detido até ao julgamento. E depois saiu pela porta da frente do tribunal para a liberdade. A acusação tinha cometido um erro técnico e eu cumpri o meu dever.

Nunca mais exerci advocacia. O meu pai foi assassinado, vítima num assalto, quando eu tinha 11 anos. Porque fui trabalhar em Direito Criminal / Penal? Não vou analisar isso agora. Mas, às vezes, ganhar é perder. O profissional ganhou. Mas, a pessoa, o homem, o filho, quem eu era para além do profissional, perdeu. Foi como conduzir um carro contra uma parede.

Nos anos seguintes, sei que me perdi. E depois comecei a ter ataques de pânico diários. Não é preciso morrer para conhecer o Inferno. Por vezes, temos essa experiência aqui na terra.

Sou inteligente. Mas, nem sempre me interesso pelas mesmas questões que a maioria das pessoas. Por vezes, perco-me a pensar sobre a natureza da realidade. E costumo andar na fronteira da ciência, longe das verdades confortáveis da sociedade que me rodeia. Costumo dizer que o Big Bang é o Big Bang Bong. E, ao contrário de muitos, não gostei do livro “O Relojoeiro Cego” do Richard Dawkings.

Sou inteligente, mas não sou esperto. Naquele momento na minha vida, vagueando sem rumo, senti uma emoção muito forte: precisava muito de realização profissional. Acho que precisei de me perder para encontrar essa ambição de querer coisas materiais, reconhecimento e sucesso. E de querer isso mais do que queria ler livros.

Não bato palmas quando leio as ideias do Prof. António Damásio sobre consciência. Mas, ele usou o método científico para perceber aquilo que os poetas já sabem há séculos… Não há sucesso sem a emoção certa. A pessoa mais inteligente do mundo, se não for capaz de agir com a emoção certa ou se sofrer um trauma que afete essa capacidade, pode não ser capaz de cuidar de si mesmo.

Eu queria MUITO ter sucesso. Eu sentia a emoção certa para ter sucesso.

E você? Quer MESMO ter sucesso? Quantas horas é que vai trabalhar todos os dias para ter sucesso na internet?

Quer saber o segredo de emagrecer? Saber como emagrecer não é suficiente. É preciso querer. Mas, é preciso querer muito emagrecer. É preciso querer emagrecer mais do que você quer comer chocolate. É preciso querer emagrecer mais do que você quer comer feijoada. É preciso querer emagrecer mais do que querer comer todas as coisas gostosas que todo o gordo gosta de comer.

Você sabe como ter sucesso na internet? Não é suficiente. Você quer ter sucesso? De que tamanho é o seu querer? Você precisa de querer ter sucesso mais do que você quer outras coisas na sua vida e que ocupam o tempo que você precisa para ter sucesso.

Errei Tantas Vezes Que Um Dia Acertei

Tinha um computador e um acesso à internet. E comecei a pesquisar, a aprender, a observar, a experimentar, a errar. Errei tantas vezes… Tenho saudades de todos os erros que cometi. Hoje, não tenho mais tempo para errar. Mas, eu apenas acertei porque errei muito. Quem não erra, não acerta NUNCA. E é preciso errar e errar e errar.

É importante não repetir sempre os mesmos erros. É muito importante aprender com cada erro que cometemos.

E como é que você vai aprender com cada erro? Você precisa de medir e testar tudo o que você faz na internet.

Porquê? Porque pode. E vai diminuir as suas despesas e aumentar as suas receitas.

Você pode testar e medir e assim você vai entendendo o que funciona e que não funciona. Vai pagar publicidade que não funciona? Vai investir mais dinheiro em publicidade que funciona? Vai ter ofertas que ninguém compra?

Você altera, mede e não funciona? Errou. Mas, está mais próximo de acertar.

É preciso usar estatísticas (o Google Analytics é uma ferramenta excelente) e outros programas que permitem medir a taxa de conversão do site e de todas as alterações que fazemos no site. Podemos medir a eficácia do texto que usamos, dos elementos de design, da estrutura do site, da publicidade que fazemos.

Podemos ajustar a nossa oferta à procura que existe na internet. Não precisamos de pagar estudos de mercado para conhecermos essa procura. Não precisamos de usar o instinto. O próprio Google disponibiliza uma ferramenta grátis que permite conhecer a quantidade de vezes que cada palavra ou expressão, a que o Google chama palavra chave, é procurada no Google.

Temos acesso a informação sobre a procura:

nas estatísticas sobre tags nas redes sociais;
tópicos HOT ou MAIS POPULARES nalguns sites;
produtos mais vendidos;
produtos que aparecem destacados em sites de referência;
publicidade doutras empresas.

Esta disponibilidade imediata de informação é um convite irresistível à experimentação, à ideia aqui valorizada de observar, testar, errar, observar, testar, errar, observar, testar, acertar!

Você conhece empreendedores que tiveram sucesso? Observe a ideia que eles tiveram e como ela evoluiu para uma história de sucesso. Estude o modelo de negócio deles.

Não estou a sugerir que você copie a ideia deles. Se tentar copiar, o mais provável é que não resulte. Aquela ideia teve um momento certo, um lugar certo, para fermentar. Você vai aprender determinadas lições nessa observação e estudo. Adapte essas lições à sua história de vida, à sua cultura, ao que você gosta de fazer. Adapte essas ideias a quem você é.

Parta para uma aventura de experimentação. Erre. Cada vez que você errar, aprenda. Seja paciente. Tenha esperança. Se aprender com cada erro, o sucesso estará um passo mais próximo…

O Social Na Rede – Família E Amigos

Hoje, falamos muito de redes sociais e da respectiva importância na nossa vida social e no próprio marketing das empresas. Mas, onde está a novidade desse fato? O social apareceu só agora?

Quantas pessoas não conseguem bons empregos por causa da família e dos amigos? Quantos negócios não prosperam porque os respectivos donos tem muitos amigos e conhecidos?

Se você quiser ter sucesso na internet, faça amigos online. Participe em fóruns, grupos, redes sociais com outras pessoas que partilham os mesmos interesses que você. E esqueça a lógica darwiniana, que é um imbecilidade pseudo científica. Não é o gene egoísta que vence. É o espírito de cooperação e de comunidade que prevalece.

Participe e colabore. Ajude. É fundamental ajudar. Organize grupos. Troque serviços. Promova o trabalho dos outros. Irradie aquilo que você é: SOCIAL!

Eu trabalho com os meus irmãos. O espírito de cumplicidade e de fraternidade que existe entre nós não é possível replicar numa relação de trabalho entre desconhecidos ou até amigos e é um valor acrescentado para o nosso trabalho conjunto. A minha história é a história deles e vice-versa. A nossa família é a nossa âncora.

E trabalho com outros profissionais com os quais criei uma relação de amizade há cerca de 10 anos, nos maiores fóruns relacionados com hospedagem (alojamento web) e Linux. Gosto muito de trabalhar com os melhores.

Mas, seja prudente. A confiança deve ser como a velhice. Aparece lentamente com o tempo, com a vida das relações, com as experiências, com os afetos… Mas, ao contrário da velhice, a confiança não é uma certeza.

A Internet Tem Memória De Elegante

Não venda a sua alma ao diabo para ter sucesso imediato na Internet. Pode ser tentador usar métodos de Black Hat SEO ou alinhar em esquemas para ganhar dinheiro fácil. Mas, por favor não se esqueça que não existem segredos na internet.

Existe uma gaveta algures na REDE onde arquivam tudo o que você faz. E esse seu passado pode um dia regressar para assombrá-lo.

No caso duma marca, cortar caminho por atalhos que violam regras éticas e de bons costumes na internet é especialmente penalizador.

Se você contratar um especialista de SEO que oferece uma solução instantânea e barata para os primeiros lugares no Google, o mais provável é que a sua marca deixe um rasto de lixo e de spam pela internet que, um dia mais tarde, semanas ou meses, vai transformar os benefícios de curto prazo num prejuízo difícil de reparar.

E você não resolve a perda de confiança do Google com relações públicas. A regra é começar de novo. É essa a penalização para os atalhos: regressar à casa de partida.

Fórmulas Mágicas

Eu podia escrever e escrever sobre este tema. Mas, escrevi este artigo como uma folha caída no rio, a seguir a corrente, neste caso o sentir das emoções e a associação de ideias, que foram aparecendo a seguir a cada assunto e a propósito desse assunto.

Não ofereci uma fórmula mágica. Não conheço qualquer fórmula mágica.

Há quem pense que para conquistar uma mulher é preciso decorar meia dúzia de piropos para começar a conversa. Eu prefiro olhá-la nos olhos e sorrir. Conhecê-la. Não preciso de seguir um guião. Nem fazer de conta e ser uma personagem. Sou eu mesmo. Gosto de mim. E acredito em mim. Você precisa de fazer o mesmo.

Ter sucesso na internet não é muito diferente de conquistar uma mulher. Você precisa de gostar de você e de gostar de você MESMO! E seja você!

Siga-nos no Twitter!

E tenha muito sucesso!

Os Segredos Do Sucesso Na Internet é um artigo da nossa comunidade: Webmaster.pt Marketocracia Digital

Elementos HTML Arredondados Com jQuery Curvy Corners

Tárcio Zemel — Wed, 08 Jun 2011 07:16:42 +0000

Quando o assunto é web design, a criatividade dos bons designers não tem limites. Eles criam peças incrivelmente belas, com boa usabilidade e navegabilidade e, sempre que possível, com foco na experiência do visitante (pelo menos, é o que se espera). Entretanto, algumas vezes tamanha criatividade não pode ser totalmente “convertida” em uma página de web em função de dificuldades técnicas que, por ventura, possam existir.

Não são raros os casos em que o programador de interface desconhece técnicas para fazer o HTML+CSS funcional ficar idêntico à imagem que lhe foi passada. Um dos casos comuns em que isso acontece é quando há elementos arredondados na concepção do visual do site. Alguns consideram prover elementos arredondados uma tarefa complexa e, exatamente pensando nisso, existe um plugin excelente, chamadojQuery Curvy Corners.

Com jQuery Curvy Corners é possível:

Arredondar elementos a nível de bloco (ex. DIVs)
Suporte a anti-aliasing
Bordas e imagens de background

O Curvy aplica, dinamicamente, alguns conceitos de CSS3 para realizar o arredondamento. Uma de suas grandes características é que, caso o browser já tenha suporte nativo, ele simplesmente não faz nada, deixando a renderização por conta do próprio navegador e poupando o uso de recursos.

Como Usar o jQuery Curvy Corners

Existem várias maneiras de se usar o Curvy Corners; a mais simples é a mostrada a seguir. Para começar, faça o download do script e descompacte-o na estrutura de diretórios de seu projeto. Existirem várias versões do script; pessoalmente, prefiro a minificada.

Então, basta fazer a chamada ao script no “head” dos documentos que deseja que o script atue:

Agora, simplesmente escolha o(s) elemento(s) de bloco que quer arredondar e escreva a linha de programação para ativar o script:



$('.arredondado').corner();

Simplíssimo!

Oções do jQuery Curvy Corners

É possível, também, especificar o “nível de arredondamento” para cada canto do elemento-alvo. Usa-se a seguinte convenção:

tl = top left (canto superior esquerdo)
tr = top right (canto superior direito)
bl = bottom left (canto inferior esquerdo)
br = bottom right (canto inferior direito)

Se quiséssemos, por exemplo, um elemento arredondado com os cantos da esquerda em 10px e, os da direita, 20px, poderíamos usar o seguinte código:



$('.arredondado').corner({

  tl: { radius: 10 },

  tr: { radius: 20 },

  bl: { radius: 10 },

  br: { radius: 20 }

});

Para ativar o anti-alias, é só inserir mais uma pequena instrução:



$('.arredondado').corner({

  tl: { radius: 10 },

  tr: { radius: 20 },

  bl: { radius: 10 },

  br: { radius: 20 },

    antiAlias: true

});

Funções do jQuery Curvy Corners

Algo muito interessante sobre o script é o arredondamento e “desarredondamento” dinâmicos possíveis de se fazer. Basta usar, respectivamente, as funções redrawCorners() e removeCorners(). Por exemplo, caso queira retirar o arredondamento quando algum elemento for clicado, use:



$('a').click(function(){

  $('.arredondado').removeCorners();

});

Conclusão sobre o jQuery Curvy Corners

Como citado, existem outras maneiras de se usar o jQuery Curvy Corners, maneiras essas que podem ser observadas e estudas no site oficial do plugin. Além disso, lá é possível encontrar diversos exemplos de uso do Curvy Corners.

Para projetos que precisam atender a um web design mais arrojado através de arredondamento de elementos, certamente este excelente plugin para jQuery realiza bem a tarefa. Por arredondar de forma fácil elementos, por ser executado somente em navegadores sem suporte a CSS3 e por ser crossbrowser, o Curvy está, definitivamente, recomendado!

Elementos HTML Arredondados Com jQuery Curvy Corners é um artigo da nossa comunidade: Webmaster.pt Marketocracia Digital

Guia WordPress 3 Parte13 – Plugins Posts Personalizados E Novas Taxonomias 5

Lindomar Goking — Tue, 10 May 2011 07:17:46 +0000

Olá caros leitores!

No último artigo começamos a trabalhar com a visualização dos posts personalizados e novas taxonomias e isso será um grande desafio para quem entende pouco ou nada de programação de temas.

É um assunto bem complexo e com muitos detalhes técnicos, pois é possível personalizar totalmente a visualização utilizando xHTML, CSS, PHP e as tags de template do WordPress. A melhor forma para você aprender é aprofundando-se nas linguagens que acabei de citar ou procurar por outros artigos do Webmaster.pt que tratam do assunto de maneira específica, fornecendo todos os passos necessários para implantar um grande projeto, como um agenda de eventos, um portfólio e outros.

Hoje você conhecerá algumas técnicas básicas, que irão demandar pouco ou nenhum conhecimento de programação. Mas é necessário que você tenha lido e entendido os artigos desse guia e sobre links permanentes, em Configurações Do WordPress Parte6 Privacidade e Links Permanentes.

Widgets e Menus

No último artigo você conferiu que é possível utilizar a widget ‘Nuvem de tags’ para exibir alguma nova taxonomia registrada, mas somente quando ela é atribuída aos ‘Posts’ do WordPress.

Caso queira aprofundar-se, você poderá utilizar a função wp_tag_cloud () para exibir qualquer tipo de taxonomia criada por você, semelhante a uma “nuvem de tags”. Não entraremos nesses detalhes hoje, mas você pode consultar o Codex ou ainda outros artigos do Webmaster.pt.

Mas se você não quiser entrar na parte de programação, poderá utilizar o widget ‘Menu personalizado’ para exibir as entradas marcadas com a taxonomia criada por você. Caso tenha dúvidas sobre como utiliza-lo, leia o artigo Guia WordPress 3 Parte 4 – Menus e tire suas dúvidas.

Para um exemplo prático vamos utilizar a seguinte estrutura:

Post Personalizado: Classificados;
Taxonomias de ‘Classificados’: Carros, Imóveis e Empregos;

Antes de prosseguir, vá em ‘Configurações -> Links Permanentes’ e faça os ajustes necessários. O próximo passo é criar um menu para cada taxonomia criada para ‘Classificados’:

Adicione os itens do menu de acordo com as marcações/tags cadastradas:

Por fim adicione a widget ‘Menu personalizado’, uma para cada menu:

Você poderá ainda utilizar a widget ‘texto’ para adicionar alguma informação extra. Em caso de dúvidas, consulte WordPress – Configuração Dos Widgets Nativos.

Quando tudo estiver configurado de maneira correta, você terá o seguinte resultado no seu site/blog:

E isso sem precisar de programação!

Esse tipo de visualização é bem interessante, pois as entradas ficam “separadas” do blog principal e você pode organizar a informação de maneira mais eficiente.

Exibir Posts Personalizados na Página Principal

No exemplo anterior, somente os ‘Posts’ são visualizados na página principal do site/blog. Mas vamos supor que você queira exibir todas as entradas, ou somente alguns tipos de posts personalizados. Como eu faço isso?

Uma forma bem simples é inserir uma função no arquivo ‘functions.php’. O código completo é a seguinte:



add_filter( 'pre_get_posts', 'my_get_posts' );

function my_get_posts( $query ) {

  if ( is_home() )

    $query->set( 'post_type', array( 'post', 'page', 'filmes', 'classificados') );

   return $query;

}

A única modificação que você vai precisa fazer é na linha $query->set( ‘post_type’, array( ‘post‘, ‘page‘, ‘filmes‘, ‘classificados‘) );. Basta informar o nome dos Posts Personalizados (em negrito) que serão exibidos. Lembrando que post e page são os posts e páginas do WordPress, respectivamente.

Você poderá inserir o código utilizando o próprio WordPress, em ‘Aparência -> Editor’ e selecionando o arquivo ‘functions.php’:

Você pode adicionar o código logo no início do arquivo, tomando cuidado para que não fique dentro de outras tags. Veja na figura que eu adicionei logo após as informações/comentários sobre o tema padrão.

Depois de finalizada essa etapa, salve a alteração e visite a página principal para conferir a diferença:

Todas as entradas são exibidas. Mas reparou que o menu sumiu? Se isso acontecer no tema em que você for aplicar, utilize o código abaixo:



add_filter( 'pre_get_posts', 'my_get_posts' );

function my_get_posts( $query ) {

  if ( is_home() && false == $query->query_vars['suppress_filters'] )

    $query->set( 'post_type', array( 'post', 'page',  'lg_classificados' ) );

  return $query;

}

Lembre-se de fazer as mudanças necessárias, ou seja, informe quais os tipos de entradas que serão exibidas. Agora sim, vai correr tudo bem. Se algum problema acontecer mesmo assim na visualização, utilize os comentários para que possamos te ajudar.

Alguns Problemas

E como já estamos falando de problemas, vamos a alguns outros que encontrei.

O primeiro foi quanto à versão do WordPress. Se acontecer da área de gerenciamento dos menus ficar totalmente em “branco”, não permitindo mudanças, você deverá atualizar a versão do WordPress e do plug-in que o problema será resolvido.

Outro problema encontrado foi quando fiz a mudança no nome da taxonomia: simplesmente o menu com essa taxonomia não funcionou corretamente, tanto na área de gerenciamento quanto na página principal do blog. A figura a seguir mostra o menu principal do blog:

Já na área de gerenciamento em ‘Aparência -> Menus’ o WordPress apenas mostrou a seguinte tela:

Para resolver o problema basta voltar no navegador, desfazer a alteração no nome da taxonomia, ou seja, adicionar o antigo nome e salvar. Com esse procedimento, tudo deve voltar ao normal!

Agora outro problema que pode acontecer é quando você resolver fazer modificações nos links permanentes depois de criar as taxonomias. Com isso, o WordPress vai informar que a página não existe quando o visitante solicitar a exibição de todas as entradas utilizando as novas taxonomias.

Para resolver esse problema basta entrar na área de gerenciamento das taxonomias, em ‘Custom Post Types -> Manage Taxonomies’, clicar no botão ‘Edit’ e “apenas” clicar em ‘Save Custom Taxonomy’. Pelo menos comigo funcionou!

Um último erro é quando você editar o arquivo do tema, o ‘functions.php’, tal como foi feito nesse artigo e inserir o código incompleto. Se você esquecer-se de fechar as chaves ‘}’, por exemplo, e clicar em ‘Atualizar arquivo’, automaticamente um erro será exibido:

Você pode clicar em ‘Voltar’ do navegador e tentar reparar o erro, mas provavelmente isso não vai dar certo. Nesse caso vai ser necessário editar o arquivo ‘functions.php’ do seu tema utilizando outro editor de código, podendo ser do próprio cPanel ou utilizando o FTP para isso.

Utilize, por exemplo, o FileZilla para “trazer” o arquivo até o seu computador e então utilize o Notepad++ para fazer as alterações:

Indico dois artigos nossos para você tirar dúvidas sobre operações com FTP:

Se por acaso ocorrer mais erros com você, utilize os comentários para que possamos te ajudar. Utilize também para postar suas dúvidas, sugestões, críticas ou elogios.

Continuamos no próximo artigo.

Fiquem na paz e até lá!

Guia WordPress 3 Parte13 – Plugins Posts Personalizados E Novas Taxonomias 5 é um artigo da nossa comunidade: Webmaster.pt Marketocracia Digital

Menu Espetacular Com Plugin jQuery MobilyBlocks

Tárcio Zemel — Wed, 04 May 2011 09:16:30 +0000

Já há alguns artigos temos falado da importância de se apresentar elementos/efeitos diferentes e interessantes nos sites. Atualmente, com, literalmente, milhões de sites semelhantes, as diferenças e detalhes positivos fazem a diferença.

Gostaria de apresentar uma dessas “alternativas” para se fazer algo inovador nos sites, que é apresentar listas não ordenadas de forma completamente diferente do que você já viu usando o plugin para jQuery MobilyBlocks.

O MobilyBlocks permite apresentar listas não-ordenadas através de uma animação circular. Seu visitante pensará que vai encontrar mais do mesmo, mas vai se surpreender bastante ao se deparar com este efeito incrível!

Como usar o MobilyBlocks

A primeira coisa é fazer o download MobilyBlocks. No arquivo compactado você encontrará algumas pastas com arquivos além dos estritamente necessários (pois vem junto um exemplo para demonstração e estudo). Na verdade, os arquivo essenciais para o funcionando do plugin são apenas 3, que devem ser inseridos nas páginas de seu site que conterão o efeito (obviamente respeito a estrutura de diretórios de seu próprio projeto):

A estrutura para que o script funcione é tão-somente a estrutura simples e já tradicional de uma lista não ordenada. A dica principal é usar imagens como itens dessa lista para impactar ainda mais o visitante e tornar o efeito ainda mais bonito (também fica interessante já especificar uma imagem de background para o próprio elemento

Depois disso, basta apontar para a lista que se deseja aplicar o efeito do MobilyBlocks, fazendo uma chamada simples à sua inicialização:



$('.socials').mobilyblocks();

E pronto, não é preciso mais nada! Agora você já pode conferir este incrível efeito de animação circular!

Opções do MobilyBlocks

O MobilyBlocks possui algumas opções simples:

trigger (‘click’ ou ‘hover). Em qual evento o efeito acontecerá.
direction (‘clockwise’ ou ‘counter’). Se a animação circular será no sentido horário ou anti-horário.
duration. Duração da animação.
zIndex. Valor z-index dos itens da lista.
widthMultiplier. “Expansor” dos itens em relação à “base” (a melhor forma de entender é testar diversos valores).

Então, por exemplo, se quiséssemos aplicar um efeito de MobilyBlocks em uma lista de classe “special-list” com sentido anti-horário e duração de 450ms, teríamos o seguinte código:



$('.special-list').mobilyblocks({

  direction: 'counter',

  duration:450

});

Conclusão sobre o MobilyBlocks

Como você pode conferir na página de exemplo oficial (e no arquivo compactado que você baixou), este é um efeito totalmente inovador, que não se encontra normalmente por aí.

Usá-lo certamente fará com que seu site tenha um diferencial importante em relação à concorrência e, por isso, o MobilyBlocks é altamente recomendado!

Menu Espetacular Com Plugin jQuery MobilyBlocks é um artigo da nossa comunidade: Webmaster.pt Marketocracia Digital

Guia WordPress 3 Parte12 – Plugins Posts Personalizados E Novas Taxonomias 4

Lindomar Goking — Tue, 03 May 2011 10:33:37 +0000

Olá caros leitores!

Nesse artigo iremos continuar a tratar sobre o plug-in Custom Post Type UI, mas não de forma direta, pois os assuntos aqui tratados poderão ser aplicados em outros e também na programação dos Posts Personalizados e Novas Taxonomias.

As Melhores Práticas E Orientações Úteis Para Definir Os Nomes

O novo recurso disponível no WordPress 3 pode ser bem útil, mas isso vai depender da necessidade do site ou blog, pois a sua implantação vai demandar planejamento e organização, inclusive na escolha dos nomes para os posts personalizados e novas taxonomias.

E estou me referindo a pelo menos dois nomes para cada item: o próprio nome do post personalizado ou taxonomia, que será referenciada no banco de dados e o nome que será exibido ao público do site.

Para o nome que será exibido para o público procure defini-lo de forma que não haja “confusão” aos leitores ou mesmo administradores do site. Vou mostrar um pequeno exemplo disso, através da seguinte estrutura:

Post Personalizado: Anúncio;
Taxonomias para Anúncio: Classificados, Carros, Imóveis, Empregos;

Nesse caso, onde estaria a taxonomia para os ‘Classificados’? Não seria melhor criar outro post personalizado chamado ‘Classificados’ e então atribuir as taxonomias corretas a ele? Será que essa é realmente a melhor forma de classificação para o site?

Essa estrutura poderia até ser utilizada, mas deveria ficar de forma clara para os leitores e usuários e não deixa-los como “cego num tiroteio”. Procure entender, organizar, rabiscar e definir toda a estrutura da melhor forma possível e assim você, seus leitores e usuários terão uma vida mais feliz.

Outro item importante é o nome do próprio post personalizado ou nova taxonomia, aquele de preenchimento obrigatório:

O próprio WordPress sugere que seja utilizado um prefixo para esse nome, pois assim sua identificação será melhor e ainda evita conflitos com outros nomes que poderão ser utilizados em temas e plug-ins.

Procure criar um prefixo exclusivo, que seja usado e conhecido somente por você. Veja o exemplo:

lindomar_filmes: Filmes de Lindomar;
temax_filmes: Filmes do Tema X;
pluginx_filmes: Filmes do Plug-in X;

Assim, numa mesma instalação do WordPress, poderão ser adicionados utilizados sem que os três entrem em conflito.

Mas tenha cuidado com duas coisas:

O nome total não pode passar de 20 caracteres devido à limitação do banco de dados por causa do tipo de campo;
Não use o Prefixo das Tabelas, definido na instalação, que por padrão é o ‘wp_’:

Visualizar os Posts Personalizados e Novas Taxonomias no Tema

Se você já definiu seus posts personalizados e taxonomias, fez o cadastro de todos eles de forma correta, adicionou o conteúdo, mas eles simplesmente não aparecem no seu tema, chegou a hora de resolver esse problema.

Infelizmente o plug-in Custom Post Type UI não controla com eficácia e nem permite a personalização da exibição dos posts personalizados e das novas taxonomias no tema de forma automática, sendo necessário uma intervenção no código-fonte do WordPress.

Esse pode ser o preço que você terá de “pagar” ao utilizar esse recurso: conhecer um pouco de programação de temas do WordPress. Nesse guia irei apresentar apenas o básico sobre esse assunto, mas acredite, você pode muito mais! Procure por outros artigos no Webmaster.pt e veja do que estou falando.

Antes de entrar na parte da programação, será necessária uma pequena aulinha teórica.

Como você já deve saber, toda a informação inserida no WordPress é armazenada no Banco de Dados definido na instalação. Podemos dizer que o nosso amado CMS faz uma espécie de ponte entre o usuário e o banco de dados e todas as informações são exibidas conforme definidas na programação de cada arquivo de tema.

Isso é uma coisa que precisa ficar bem clara antes de continuar. Qualquer dúvida, leia o artigo Temas do WordPress para tirar suas dúvidas. Se ainda restar alguma, pode utilizar os comentários que iremos te ajudar.

Sendo os posts personalizados e as novas taxonomias uma “coisa desconhecida” para o WordPress, vai ser necessário que você “mostre” ao CMS e informe o local onde eles serão exibidos.

É claro que, antes de tudo, você deverá analisar muito bem a situação e o que é cada item. Vamos aproveitar e fazer isso então utilizando o tema padrão com a seguinte estrutura:

Post Personalizado ‘Classificados’;

Taxonomia ‘Carros’ do tipo sem hierarquia atribuída à ‘Classificados’ e ‘Posts’;

Widget Nuvem de tags com a Taxonomia ‘Carros’ adicionada ao tema;

Vale lembrar que ‘Carros’ só está sendo visualizada na Nuvem de tags porque foi atribuída aos ‘Posts’ do WordPress;

Foram criadas quatro entradas, duas para cada tipo de conteúdo:

Novo Carro Ford é Lançado, do tipo ‘Post’, Taxonomia ‘Carros’ com a tag ‘Ford’ e Categoria ‘Notícias’;
Vendo Carro Novo, do tipo ‘Classificados’ e Taxonomia ‘Carros’ com a tag ‘Fiat’;
Vendo Carro Ford Novo, do tipo ‘Classificados’ e Taxonomia ‘Carros’ com a tag ‘Ford’;
Feirão de Carros Começa Amanhã, do tipo ‘Post’, Categoria ‘Notícias’ e Nenhuma tag de post;

Agora podemos ver o que acontece de acordo com o tipo de visualização solicitada pelo visitante.

No primeiro caso quando a tag ‘Ford’ for clicada, nós temas a URL ‘http://meusite.com/?carros=ford’ como link permanente e a seguinte informação na tela:

Daí nós podemos concluir que:

É uma página com o arquivo do blog da taxonomia ‘Carros’;
A primeira entrada é o ‘Classificados’, porém isso não é informado de forma explícita, como na segunda entrada, que é o ‘Post’, pois está publicada na categoria ‘Notícias’.

Nesse caso será necessário editar o arquivo de tema responsável em mostrar o arquivo do blog para assim exibir as informações completas para as entradas de ‘Classificados’.

Analisando cada entrada de forma individual, ainda temos:

Repare que os ‘Classificados’ não “enxergam’ os ‘Posts’ e vice-versa na paginação:

Além disso, a informação é exibida de maneira completa apenas nos ‘Posts’. Nesse caso, a alteração deverá ser feita no arquivo do tema responsável em exibir as informações de cada entrada individualmente.

E por último vamos analisar a página principal do blog:

Repare que somente os ‘Posts’ são visualizados. Aqui já será necessário fazer a modificação em outro arquivo do tema, responsável em mostrar as informações na página principal.

Com esse exemplo você aprendeu duas coisas:

É necessário saber exatamente o local onde serão exibidos os posts personalizados e as novas taxonomias, sendo necessário conhecer um pouco de programação de temas do WordPress;
É possível exibir as informações dos posts personalizados sem a necessidade de programação, dependendo claro, de como toda a estrutura do blog/site está organizada;

Ciente das dificuldades e da análise que deverá ser feita, podemos partir para o próximo passo, mas somente no próximo artigo.

Antes de terminar quero pedir para aqueles que chegaram aqui e nada entenderam: antes de fazer perguntas nos comentários, tenha a certeza de ter feito a leitura do artigo com bastante atenção, pois são muitas informações que precisam ser assimiladas.

E se caso ainda persistam dúvidas, esteja a vontade nos comentários. Aproveite e deixe sua sugestão, elogio ou crítica.

Fiquem na paz e até a próxima.

Guia WordPress 3 Parte12 – Plugins Posts Personalizados E Novas Taxonomias 4 é um artigo da nossa comunidade: Webmaster.pt Marketocracia Digital

Listagem Ordenada Por Letra com PHP E MySQL

Tárcio Zemel — Tue, 26 Apr 2011 13:44:56 +0000

É bastante comum em determinados tipos de sites e/ou sistemas virtuais ser necessário apresentar listagens de elementos em determinada tabela do banco de dados. Mas muitas pessoas se perguntam como fazer listas por letra a partir do BD. Na verdade, não há muito “mistério” e o segredo está em realizar uma query relativamente simples.

Vamos supor que temos uma tabela no banco de dados. Essa tabela “cidade” guarda informações sobre todas as cidades de um determinado país. Então, em um site fictício, é preciso que se faça uma listagem de todas essas cidades, mas, como são muitas, uma divisão por letra se faz conveninente. Algo como:

A
- Abadia
- Alagoa
B
- Baiá
- Boa Esperança
C
- Catanduva
- Ciabata
- Cuiabá

E assim por diante.

Técnica do Array

Muitos preferem usar a técnica do array, que, basicamente, consiste em montar um array com todas as letras do alfabeto e, num loop qualquer, realizar as queries para listar todas as cidades que começam com aquela letra.



$letras = array('A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z');

É possível trabalhar desse jeito, sim, mas, para casos em que existam letras de outros idiomas, por exemplo, não seria possível codificar sem saber, de antemão, quais seriam estes caracteres. Além disso, montar este array é mais trabalhoso que deixar os próprios PHP+MySQL trabalharem por nós.

Fazendo da maneira certa

O mais “correto”, para este caso, é realizar uma query para saber quais as letras existentes no BD e, a partir daí, trabalhar com as respectivas listagens. A query é:



$query_letras = mysql_query

('

  SELECT DISTINCT LEFT(descricao_cidade, 1) AS inicial

  FROM cidades

  ORDER BY descricao_cidade

');

Então, montaríamos um array com os resultados:



while($letra = mysql_fetch_object($query_letras))

{

  $letras[] = $letra->inicial;

}

E, a partir disso, poderíamos fazer uma lista composta da seguinte maneira:



foreach($letras AS $letra)

{

  echo '' . $letra . '
';

          

  $cidades = mysql_query

  ('

    SELECT id, desc

    FROM cidades

      WHERE desc LIKE "' . $letra . '%"

    ORDER BY desc

  ');



  echo '';

    while ($c = mysql_fetch_object($cidades))

    {

      echo '' . $c->desc . '
';

    }

  echo '
';

}

O código completo para a solução:



$query_letras = mysql_query

('

  SELECT DISTINCT LEFT(descricao_cidade, 1) AS inicial

  FROM cidades

  ORDER BY descricao_cidade

');

while($letra = mysql_fetch_object($query_letras))

{

  $letras[] = $letra->inicial;

}



foreach($letras AS $letra)

{

  echo '' . $letra . '
';

          

  $cidades = mysql_query

  ('

    SELECT desc

    FROM cidades

      WHERE desc LIKE "' . $letra . '%"

    ORDER BY desc

  ');



  echo '';

    while ($c = mysql_fetch_object($cidades))

    {

      echo '' . $c->desc . '
';

    }

  echo '
';

}

Conclusão

Como citado, é muito comum desenvolvedores precisarem fazer listagens por letras e não saberem bem como. Usando a “query-base” apresentada, é possível saber, de antemão, quais serão as letras que comporão a lista e, com isso, ter mais segurança no trabalho que se está fazendo e apresentar um resultado mais fiel ao BD para os visitantes.

Portanto, esta é a maneira correta de se fazer listas por letra usando PHP e MySQL.

Listagem Ordenada Por Letra com PHP E MySQL é um artigo da nossa comunidade: Webmaster.pt Marketocracia Digital

Guia WordPress 3 Parte11 – Plugins Posts Personalizados E Novas Taxonomias 3

Lindomar Goking — Mon, 18 Apr 2011 12:50:14 +0000

Olá caros leitores!

Depois de criados os Posts Personalizados e as Novas Taxonomias nós precisamos gerencia-los. E nesse artigo iremos tratar desse assunto. Nós estamos utilizando o plug-in Custom Post Type UI, já detalhados nas partes anteriores. Ele próprio nos fornece algumas áreas bem úteis para esse gerenciamento.

A primeira é encontrada dentro de ‘Custom Post Type UI -> Manage Post Types’, para os posts personalizados e sua área segue o padrão “o WordPress de ser”:

Todos os itens estão dispostos como numa tabela, onde podemos rapidamente visualizar as principais opções cadastradas.

Na coluna ‘Action’ temos alguns hiperlinks para gerenciamento do item:

Delete: exclui o post personalizado permanentemente;
Edit: abre a tela de edição do post, que é semelhante à tela de criação já apresentada. Basta apenas fazer as mudanças necessárias e clicar no botão ‘Save Custom Post Type’;
Get Code: essa é uma opção bem interessante e permite pegar o código do post personalizado:

Mas existe um aviso de que esse recurso está em fase de testes e pode apresentar alguns bugs. Em todo o caso, dê uma olhada no código, pois brevemente começaremos a estuda-lo;

A outra área de gerenciamento encontra-se em ‘Custom Post Type UI -> Manage Taxonomies’:

Os mesmo detalhes aplicados à área de gerenciamento dos posts personalizados são aplicados aqui.

Em ambas as telas você encontra diversos hiperlinks na parte de baixo relacionados ao plug-in, como o site oficial, informar bugs e outros. Faça uma visita em caso de dúvidas ou curiosidade mesmo.

Aplicando e Gerenciando os Posts Personalizados e Novas Taxonomias

Saber onde aplicar e como gerenciar dentro do WordPress também precisará ser “reaprendido”.

Na parte 8 desse guia já apresentamos algumas possibilidades para o uso dos Posts Personalizados. Se você realmente quiser aprender mais sobre o recurso e suas possibilidades, procure aprender mais sobre os Campos Personalizados. Um começo para a sua busca é no Webmaster.pt, pois temos um imenso conteúdo preparado somente para você.

Inclusive o próprio Custom Post Type UI sugere um plug-in para esse objetivo, o Custom Field Template. Foi esse mesmo plug-in que foi utilizado para criar o tipo de conteúdo especial mostrado na parte 8.

Lembre-se de que sem os campos personalizados, você estará limitado aos mesmos recursos e blocos de edição dos posts/páginas, sendo quase uma coisa inútil, dependendo no que você for aplicar.

Já com as novas taxonomias, a história muda, pois é possível adicionar uma nova classificação até para os posts e para as páginas do WordPress. Um exemplo disso é a taxonomia ‘Classificados’ que foi usada no último artigo (veja nas figuras).

Em vez de ser atribuída a um Post Personalizado, ela foi adicionada aos Post do WordPress:

Esse artifício pode ser usado para você ter mais “controle” sobre o conteúdo do site/blog, criando, por exemplo, uma área exclusiva no site/blog sem “mistura-lo” às categorias ou tags dos posts.

Definir se a nova taxonomia vai ter ou não a hierarquia também vai interferir na sua forma de visualização e operação na adição/edição do post. Para exemplificar isso, continuaremos utilizando o ‘Classificados’.

Sem hierarquia o ‘Bloco Classificados’ ficará semelhante ao ‘Bloco Tags do post’, assim como mostra a próxima figura:

Já com hierarquia, será parecido com o ‘Bloco Categoria’:

A forma de como usar os dois tipos de blocos citados já foi totalmente detalhado no artigo WordPress – Tags, Categorias, Autor e Publicação. Leia-o para tirar todas as suas dúvidas.

O ‘Bloco Classificados’ também poderá ser ocultado da tela de adição do post nas ‘Opções de Tela’:

Isso mostra que ele realmente está todo integrado ao WordPress. Os exemplos aqui apresentados foram para os Posts do WordPress, mas que se aplicam da mesma forma para as Páginas e Posts Personalizados, desde que isso seja definido nas opções da nova taxonomia.

Vale lembrar que os blocos e as taxonomias são definidas nas ‘Advanced Options’ do Post Personalizado, ‘Supports’ e ‘Built-in Taxonomies’, respectivamente.

A área de gerenciamento também é bem semelhante à área das Categorias ou Tags do post. Vai depender, como já foi citado, se a nova taxonomia for hierárquica ou não. Também já foram publicados artigos que tratam em detalhes as duas áreas citadas:

Na figura a seguir você pode notar essa diferença:

Se você leu o artigo citado já percebeu essa diferença, que é justamente a possibilidade de classificar de maneira hierárquica os “classificados” cadastrados na tela de cima, criando itens ‘Pai’ e ‘Filhos’ (destacado em amarelo e apresentado na lista), assim como acontece com as Categorias.

Na tela de baixo são apenas criados os itens sem essa classificação, assim como acontece com as Tags do Post.

Cuidado!

Para finalizar o artigo quero deixar um alerta muito importante: organize o conteúdo do site/blog de maneira prudente!

No artigo WordPress – Criação E Organização Do Conteúdo foi tratado sobre esse assunto para a versão anterior do WordPress. Mas os mesmos conceitos e dicas aplicam-se com o WordPress 3, só que agora com muito “poder de classificação”.

O legal é que você pode criar do jeito que quiser. O ruim é que se você não souber o que está fazendo vai acabar “se perdendo” e em caso de erro não terá artigo ou tutorial que resolva, já que foi personalizado do seu jeito!

Quer um exemplo do que estou falando? Repare na figura:

Percebeu que existem três menus com o mesmo nome ‘Notícias’? Isso aconteceu por uma desatenção de administrador do blog, pois ao adicionar os itens do menu ele utilizou:

Categoria do Post;
Taxonomia do Post Personalizado Filmes;
Taxonomia do Post Personalizado Informações;

O erro aqui é simples de resolver. Basta somente mudar o rótulo.

Agora pense em alguém criando 10 Posts Personalizados com 20 Novas Taxonomias e adicionado as Taxonomias em diversos lugares. Quando ele for apresentar isso ao usuário sem planejamento, o site/blog pode simplesmente não fazer sentido mais!

Agora imagine administrando todo esse conteúdo dentro do WordPress? Por isso, antes de tudo ressalto novamente a dica: faça um planejamento prévio! Se for necessário, faça um rascunho numa folha de papel (ou em várias), vá colando pela sua casa ou no seu escritório e somente adicione ao WordPress quando realmente tudo estiver 100% à prova de bagunça.

Brincadeiras a parte, o planejamento do site/blog realmente deve ser levado a sério!

Continuaremos a tratar do assunto no próximo artigo. Qualquer dúvida, sugestão, crítica ou elogio pode ser feito nos comentários.

Fiquem na paz e até lá!

Guia WordPress 3 Parte11 – Plugins Posts Personalizados E Novas Taxonomias 3 é um artigo da nossa comunidade: Webmaster.pt Marketocracia Digital

Barras De Rolagem Estilizadas Com jScrollBar

Tárcio Zemel — Thu, 14 Apr 2011 08:58:04 +0000

Não é exagero dizer que é um verdadeiro sonho para os webdesigners poderem contar com barras de rolagem estilizadas no site (estou falando sem utilizar flash). Um dos eternos “entraves” para que aquele que mexe com design para web considerar o site como de qualidade, é não apresentar barras de rolagem mais condizentes com a identidade visual do site, mas sim aquele cinza-padrão sem nenhuma questão de ser interessante…

Mas agora essa insatisfação pode acabar, já que é possível estilizar e fazer das barras de rolagem mais bonitas e interessantes utilizando jScrollBar!

Com jScrollBar, você pode mudar o estilo padrão das barras de rolagem do site, podendo fazer aparecer imagens e, usando CSS, estilizar das mais variadas formas possíveis. Tudo de maneira simples e fácil de se implementar.

Usando jScrollBar

Quando você baixar o jScrollBar, vai encontrar no .zip os javascripts e css necessários para fazer tudo funcionar – também há algumas imagens de exemplo para se ter melhor noção de como é o funcionamento do plugin. Insira esses javascripts e css no cabeçalho de seu documento.

É preciso que seus elementos que irão apresentar a barra de rolagem personalizada sigam uma estrutura como essa:







 

        

        

                

                        

                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi...

Então, basta inicializar o jScrollBar:

Veja a página com vários exemplos de uso do jScrollBar.

Opções do jScrollBar

Existem 2 opções no jScrollBar:

allowMouseWheel. Permite rolar com a roda do mouse (default ‘true’).
scrollStep. Velocidade da rolagem quando allowMouseWheel é “true” (default ’10′).

Então, por exemplo, se quiséssemos uma velocidade de rolagem 15 para nosso elemento, teríamos:



        $(document).ready(function(){

                $('.jScrollbar').jScrollbar({

                scrollStep: 15

                });

        });

Conclusão sobre o jScrollBar

Utilizando o jScrollBar, é possível fazer com que as barras de rolagem de seu site fiquem com a aparência diferente, podendo, ao usar sua criatividade, dar qualquer visual a suas scrollbars.

Certamente esta é uma excelente maneira para incrementar o design do site e fazer com que as coisas fiquem mais coincidentes com a identidade visual do projeto. Certamente é uma excelente pedida!

Barras De Rolagem Estilizadas Com jScrollBar é um artigo da nossa comunidade: Webmaster.pt Marketocracia Digital

Formulários Mais Seguros Com QapTcha

Tárcio Zemel — Mon, 11 Apr 2011 08:09:10 +0000

É bastante comum em sites haver formulários para interações simples, como contato, reclamações, e outros; e existem, também, aqueles formulários mais complexos, como orçamentos, cotações, etc. Independentemente do caso, é importante fazer os corretos tratamentos visando a segurança desses formulários para que a utilização do site e banco de dados não sejam comprometidos.

Dentre as centenas de técnicas possíveis, uma das mais conhecidas e utilizadas no mundo todo é o Completely Automated Public Turing test to tell Computers and Humans Apart, ou como é mais conhecido, CAPTCHA. O CAPTCHA, como deve ser do conhecimento dos desenvolvedores, consiste em apresentar uma imagem com uma série de palavras aleatórias (alguns usam números) e solicitar que se digite o que foi apresentado. Caso se digite o que consta na imagem corretamente, então não se trata de um bot varrendo e testando seu site (pois um robô, teoricamente, não consegue interpretar o que está na imagem para digitar).

Apesar de ter seus pontos fracos, o CAPTCHA tem seu nível de eficiência. Mas eis que surge uma nova maneia de confirmar se quem está interagindo com o formulário é realmente uma pessoa, ao invés de um bot; uma forma de “validar o ser humano” de forma diferente, divertida e inovadora e isso é feito através do plugin para jQuery QapTcha.

Com QapTcha a confirmação dos formulários fica protegida pela obrigação de o visitante ter que usar um controle deslizante (drag & drop) para comprovar que realmente é um ser humano interagindo. Atualmente robôs não conseguem fazer isso, acredite.

O QapTcha cria no formulário um campo oculto de nome “iQapTcha” com um token aleatório. Robôs desse tipo geralmente preenchem todos os campos de formulários automaticamente. Com a interação do slider, o iQapTcha esvazia o valor contido no campo criado automaticamente e salva uma variável de sessão “iQaptcha” com valor “true”. Uma excelente medida de segurança, tenha certeza.

Como usar o QapTcha

Primeiramente, é preciso fazer download do QapTcha e adequar os arquivos que vêm zipados à estrutura de diretórios de seu projeto. Como é de se esperar, faça as chamadas corretas no de seu documento. Dentro da pasta que vem com o plugin, encontram-se os javascripts necessários e uma folha de estilos:

Nisso, você vai adicionar uma div de id “captcha” em seu formulário, tal como o exemplo:





  

    Nome 

    Sobrenome

E, no arquivo PHP que o formulário aponta, é preciso realizar os devidos testes com as variáveis criadas pelo plugin:



if(isset($_POST['iQapTcha']) && empty($_POST['iQapTcha']) && isset($_SESSION['iQaptcha']) && $_SESSION['iQaptcha'])

  // ser-humano

}

else

{

  // bot

}

Com toda a “infra-estrutura” terminada, basta inicializar o plugin ao bom e velho estilo simples do jQuery:



$(document).ready(function(){

  $('#QapTcha').QapTcha();

});

Opções do QapTcha

O autor disponibilizou as seguintes opções:

disabledSubmitBoolean. Booleano para adicionar a propriedade “disabled” ao botão do form (default “true”).
txtLockStringDefault. Texto para quando o form está travado (default “Locked : form can’t be submited”).
txtUnLockStringDefault. Texto para quando o form está destravado (default “Unlocked : form can be submited”).

Um exemplo de inicialização do QapTcha utilizando suas opções:



$(document).ready(function(){

  $('#QapTcha').QapTcha({

    disabledSubmit: true,

    txtLock: "Arraste o controle para validar",

    txtUnLock: "Formulário destravado"

  });

});

Conclusão sobre o QapTcha

Sem sombra de dúvidas, uma forma de fazer validação de formulários e protegê-los contra bots que varrem o site é medida indispensável. É possível fazer de várias maneiras, e uma delas é usando esse excelente plugin que coloca uma proteção via slider em seus forms.

O QapTcha é recomendadíssimo, principalmente para sites que queiram passar modernidade e se valerem de recursos interativos chamativos, proporcionando boas experiências a seus visitantes.

Formulários Mais Seguros Com QapTcha é um artigo da nossa comunidade: Webmaster.pt Marketocracia Digital