UTF-8 ENCODING
Buenas galerinha do café!
Ontem tive problemas com os dados obtidos do Oracle (OCI) através de PDO. Os caracteres acentuados. Eles vinham com “?” no lugar do caractere acentuado.
Nesse caso, usar funções de encoding e decoding do utf-8 por exemplo, não resolvem o problema.
Como o meu documento HTML estava com encoding UTF-8, bastou informar o charset na string de conexão que tudo se resolveu.
$conn = new PDO('oci:dbname=NOMEDOBANCO;charset=UTF-8','USUARIO','SENHA');
E aí gurizada do café, tudo tranquilo?
Tenho o costume de fazer projetos e “mini-projetos” para quase tudo que faço, porém, a ferramenta Project da Microsoft onera muito o investimento em qualquer área. Foi então que resolvi procurar algo alternativo na web.
Encontrei diversas soluções opensource (para quem não está familiarizado com o termo, leia esse artigo da Wikipedia) e as testei, entre elas estão: OpenProj, dotProject e Grantter.
Dessas, a que mais me impressionou foi a Gantter. Essa ferramenta é muito semelhante ao Project, muito fácil de configurar o seu projeto e para a alegria tupiniquim, tem em português.
Além disso, podemos utilizar as credenciais do Google para acesso e integrar com o Chrome e Google Drive.
O site da ferramenta é http://www.gantter.com
Testem lá e me digam o que acharam 😉
Um pouquinho de internet…
Sabemos que a internet, assim como outras “maravilhas”, surgiu de uma iniciativa do governo de ligar órgãos militares na guerra fria na década de 60 e posteriormente entidades escolares com o intuito de levar informação de forma mais ágil, se protegendo de ataques da URSS que nunca existiram. No Brasil, chegou tardiamente, na década de 80. Em 1988 diversas universidades foram ligadas à “internet” (ARPANET) com entidades nos Estados Unidos, a partir de 1989 surge uma rede de nível nacional para atender as nossas universidades, sendo liberada para uso comercial – como é hoje – somente em 1995.
Até então, toda a informação trafegada era em modo texto. No final da década de 80 e início de 90, Tim Berners – Lee, que trabalhava na CERN (European Organization for Nuclear Research, em tradução livre, Organização Européia de Pesquisa Nuclear) desenvolveu um programa chamado ENQUIRE – eis o começo do HTML. Depois disso surgiu o HTML, o W3C, WHATWG (Web Hypertext Application Technology Working Group), guerra dos navegadores e por aí vai.
Mas o objetivo desse post não é explicar a história da internet, tão pouco do HTML e sim de informar a minha visão sobre a “caminhada” do HTML desde o seu surgimento até um futuro bem próximo. Se você quiser ter um conteúdo mais completo sobre as histórias, tanto do HTML quanto da Internet, nas referências tem ótimos sites e blogs que podem ajudar 😉
Levando a informação
Essa web era bem diferente da que conhecemos hoje. Nessa época o HTML era bem mais simples, com poucas imagens, poucas cores e um tanto quanto “feio”, mas funcional, o que atingia o objetivo proposto.
Disseminar a informação de forma mais eficiente e eficaz eram os objetivos dessa época atraindo o seu público principal: universidades e estudantes.
Com o tempo e a liberação para uso comercial, pelo menos no Brasil, todos puderam ter acesso e as empresas começaram a aproveitar esse “meio”.
Publicidade
Com o tempo, empresas foram tomando gosto da ideia e com isso, o intuito principal foi se tornando levemente secundário. Foi nessa época que começamos a ver belíssimas (?!) galerias de produtos em HTML estático.
Pelo fato do HTML ser de fácil compreensão, nessa “era” ainda é difícil encontrar empresas com desenvolvedores front-end, pelo menos dedicados somente à isso. Geralmente o desenvolvedor front-end era webdesign, web-writer, front-end, e por aí vai…
Informação³ + Publicidade³
Novamente tempo passou e os objetivos tomaram um novo rumo, mas agora um rumo buscou o objetivo principal: disseminar informação! Isso nunca deixou de ocorrer, mas acontecia em ritmo menos acelerado.
Nesse momento todos perceberam o verdadeiro potencial da internet, levando seus sistemas para plataformas web, criando e-commerce’s e até monetizando redes sociais, blogs, vlogs, etc…
Isso tudo foi a preparação do que ainda está por vir…
Informação³³ + Publicidade³³ + Sistemas = menor custo e maior agilidade
Agora o momento é outro! Esse momento está acontecendo mas a melhor parte ainda está por vir!
O acontecimento do HTML5 separa os “sobrinhos” dos verdadeiros profissionais FRONT-END e somado com o “boom” do Cloud Computing (Computação em Nuvens), tem tudo para escrever o futuro!
Ainda com sintaxe de fácil compreensão, mas com a engine reescrita em XML, o HTML5 nos trás muito mais do que simples marcação de texto. Dessa forma tornando necessário a profissionalização do profissional FRONT-END, sendo possível escrever até jogos e animações complexas no próprio HTML.
O que eu quero dizer com tudo isso?
Quero dizer que houve um ganho para a comunidade de verdadeiros desenvolvedores ou de estudantes que queiram ser desenvolvedores FRONT-END.
O trabalho que até bem pouco tempo, pra não dizer até hoje, era somado ao verdadeiro trabalho (programador BACK-END ou então um web design por exemplo), pelo simples fato de ser simples. Sei que não é a realidade de muitas empresas do ramo, mas também é a de outras muitas (pequenas).
Agora, parece estar dando a devida importância para esse assunto, seja pela semântica ou pelo estudo necessário para dominar esse assunto.
E o mercado está aí, nos aguardando para levar as maravilhas do HTML5 à todos os navegadores com muito mais interação e recursos.
Referências
Os navegadores hoje em dia estão bem desenvolvidos, por incrível que pareca, até o IE, mas e aí, os clientes estão atualizados?
Esse assunto dá pano pra muita manga e há muitas opiniões diferentes entre os próprios desenvolvedores, mas fato é que quando não temos total domínio de um assunto, temos a mania de condena-lo.
Acredito que visando informar os desenvolvedores, uma comunidade de desenvolvedores desenvolveu dois sites HTML5PLEASE e CSS3PLEASE. Neles, conseguimos visualizar o que funciona e em qual navegador. Dá uma passadinha lá pra ver 😉
Grande abraço!
Links interessantes:
http://tableless.com.br/drops-1-html5-ja-pode-ser-usado/
http://html5please.com/
http://css3please.com/
“As maravilhas do software livre me levaram à solução desse incidente….”
Na empresa em que trabalho, estamos homologando o Zimbra e instalamos em toda TI o Zimbra Desktop para irmos nos acostumando com a interface, já que teremos de dar suporte para o software em pouco tempo.
Ao configurar a assinatura de e-mail padrão da empresa, nos deparamos com o seguinte erro “A assinatura HTML ultrapassa o tamanho máximo de 1024 ‘Incluindo as tags HTML'”. Foi então que precisamos correr atrás de uma solução…
Para solucionar esse problema é preciso alterar as configurações diretamente nos arquivos JavaScipt.
No arquivo C:\Program Files\Zimbra\Zimbra Desktop\jetty\webapps\zimbra\js\NewWindow_2_all.js Procure pela linha abaixo e altere o valor 1024 pelo valor desejado (eu coloquei 2048).
name:"zimbraMailSignatureMaxLength",type:ZmSetting .T_COS,dataType:ZmSetting.D_INT,defaultValue:<strong>1024</strong>}
No arquivo C:\Program Files\Zimbra\Zimbra Desktop\jetty\webapps\zimbra\js\Startup1_2_all.js Procure pela linha abaixo e altere o valor 1024 pelo valor desejado (eu coloquei 2048).
name:"zimbraMailSignatureMaxLength",type:ZmSetting .T_COS,dataType:ZmSetting.D_INT,defaultValue:<strong>1024</strong>}
Por fim, edite o valor de 1024 pelo tamanho desejado, também no arquivo C:\Program Files\Zimbra\Zimbra Desktop\jetty\webapps\zimbra\js\zimbraMail\prefs\Z mPreferencesApp.js. Procure pela linha abaixo.
settings.registerSetting("SIGNATURE_MAX_LENGTH", {name:"zimbraMailSignatureMaxLength", type:ZmSetting.T_COS, dataType:ZmSetting.D_INT, defaultValue:<strong>1024</strong>});
Observação: Para GNU/Linux, basta alterar o path do zimbra (C:\Arquivos de programas\Zimbra) para o path correto (/opt/zimbra/zdesktop/).
Reinicie o seu Zimbra Desktop.
Até a próxima!
Recentemente, tivemos problemas em instalar o GRRF em uma máquina no ambiente da Empresa.
Atualmente, trabalhamos com Domínios e usuários com direitos limitados e por esse fato, muitas aplicações dão um trabalho danado na hora de serem executadas. Não diferente, as aplicações do nosso Governo (geralmente dão mais trabalho), o aplicativo GRRF deu muita dor de cabeça por aqui.
Como encontramos a solução, vou disponibiliza-la para que a dor de cabeça de vocês seja menor que a minha…
ATENÇÃO
Se você não trabalha com infraestrutura de TI ou não é familiarizado com isso, apenas execute o programa como administrador. Tem um comentário do Felipe Fonseca aqui em baixo que explica como fazer isso e essa dica foi dada pela Myller Meirelles também nos comentários.
Caso contrário, segue o baile… valeu!
Na maioria das vezes, não é tão prático acessarmos o nosso servidor via terminal server somente para verificar alguma configuração ou fazer algo rotineiro.
Para essas tarefas, existe um pacote de MMC’s já configurados que se chama “Pacote de Administração de Servidor Remoto”. Com ele, nós podemos administrar o nosso ambiente diretamente da nossa estação de trabalho, logicamente, se tivermos permissão para isso.
Ele simplesmente gera o “atalho” Ferramentas administrativas, idêntico ao presente em servidores, porém, em alguns consoles, é necessário que informemos o computador/servidor destino.
No Microsoft Windows 7, temos uma particularidade que não ocorria no Microsoft Windows XP. Nesse caso, o pacote também é baixado como um update, mas é instalado como uma feature do sistema operacional.
Na vídeo aula abaixo, explico como fazer para instalar e ativar esse pacote.
Link para download do pacote (gratuito): http://www.microsoft.com/downloads/details.aspx?familyid=7d2f6ad7-656b-4313-a005-4e344e43997d&displaylang=pt-br
Grande abraço!
Salve gurizada do café!
Com muita frequência, precisamos desenvolver um layout sem ter fotos de boa qualidade ou até mesmo sem nenhuma imagem ou texto fornecidos pelo cliente.
São nesses casos que nós fazemos uso dos “place holders”, que de uma tradução livre e bem escrota, significa “reservar um lugar”.
Quando não temos assunto suficiente para criar testes “enchedores de linguiça” e para não ficar tão feio como “hfasdiuhf asidufasidufh” utilizamos o famoso “Loren Ipsum”.
Loren Ipsum
Reza a lenda que o Loren Ipsum é um trecho de um texto escrito em latim retirado de um antigo livro. Para utilizar é bem simples.
Primeiro você acessa o site http://www.lipsum.com/, depois você preenche os dados que deseja no canto inferior direito e clicar em “Generate Loren Ipsum”. Selecione o texto retornado e cole onde quiser no seu layout.
Place Kitten
OK! Já temos como “reservar” espaços para textos, mas e aí, como ficam com as imagens?
Pensando nesse fato, alguém (que eu não sei quem é hehe) criou o http://placekitten.com/. Esse place holder, funciona de forma extremamente fácil, basta você digitar na URL do site a largura, e a altura e pressionar enter. O site imediatamente vai gerar uma linda imagem de um gatinho para você copiar e colocar no seu layout.
Ainda é possível gerar uma imagem em “preto e branco”, basta simplesmente adicionar um “parâmetro” g, também na URL.
Confira os exemplos:
COLORIDA: Copie e cole no seu navegador para gerar uma imagem colorida: http://placekitten.com/500/250
Esse link irá gerar uma imagem colorida com 500 px de width e 250 px de height.
Place Kitten 500x250
[PRETO E BRANCO] Copie e cole no seu navegador para gerar uma imagem preto e branco (tons de cinza/grayscale): http://placekitten.com/g/400/120
Esse link irá gerar uma imagem em grayscale com 400 px de width e 250 px de height.
Place Kitten Grayscale 400x250
Em breve farei uma vídeo aula para exemplificar.
Grande abraço!
Por quê?
Muitas vezes precisamos “esconder” determinados diretórios, arquivos e até mesmo sites inteiros dos gulosos robôs de busca, também conhecidos como robots e webcrawlers. Com um simples arquivo texto chamado robots.txt, podemos fazer isso!
Esse arquivo deve ser salvo no diretório ROOT do seu servidor web com o nome de robots.txt de forma que possa ser acessível a todos como esse exemplo:
http://www.seusite.com.br/robots.txt
O que são Robot’s?
Robot (ou robô) é um programa de computador que percorre automaticamente as páginas da Internet em busca de documentos, a fim de indexá-los, validá-los ou monitorar alterações de conteúdo.
Hoje em dia, alguns robôs estão tão avançados que podem aceitar um sitemap e até preencher um formulário para ver a saída no navegador, como é o caso do GoogleBot, motor de busca do Google.
O arquivo robots.txt foi proposto como um padrão para esses mecanismos, onde nós, desenvolvedores podemos informar diretórios e arquivos que possam ou não ser indexados por eles. Não podemos confundir com possibilidade de acesso, esse arquivo, simplesmente faz como que o conteúdo não seja indexado. Para proibir acesso, utilizamos as permissões de arquivos e/ou o arquivo .htaccess.
O arquivo robots.txt
Existem alguns sites que geram esse arquivo conforme o preenchimento de um formulário, mas vou explicar aqui como você mesmo pode criar o seu.
Basicamente ele é dividido em três partes:
User-agent
Possíveis valores para User-agent, são:
Seguindo nosso exemplo, nosso robots.txt ficaria da seguinte forma:
User-agent:Slurp Disallow: / Allow: /produtos User-agent:Googlebot Allow: / Disallow: /produtos
2. Permissões
As permissões são facilmente definidas pelas diretivas Allow e Disallow, para permitir e negar, respectivamente os diretórios ou arquivos sequentes.
User-agent:* Allow:/ Disallow: /admin Disallow: /fotos Allow: /produtos Allow: /artigos
O Exemplo acima utiliza o caractere “/” para definir todo o site e nega a indexação dos diretórios admin e fotos, liberando os diretórios produtos e artigos.
Assim como em expressões regulares, temos os caractéres “*” (asterísco) e “$” (sifrão), que indicam, “qualquer coisa” e “terminado com” respectivamente, alguns exemplos abaixo:
User-agent:* Disallow:produtos/*.png$ Allow:produtos/ Disallow:admin/*.js Disallow:fotos/*?*cat=cordas
O Googlebot, preenche os formulários contidos na página para verificar a resposta obtida. Para bloquearmos esse tipo de ação, caso estejamos utilizando o método GET, podemos fazer da seguinte forma.
</pre> <form action="search.php?s=" method="get">...</form> <pre>
Nesse caso precisamos negar a indexação de “search.php?s” para isso acrescentaremos a seguinte linha na seção do googlebot no nosso robots.txt
User-agent: Googlebot Disallow: /search.php?s=*
Quando especificar mais de um motor ele ignora o resto e passa a utilizar somente as especificações daquele motor, isto é, NÃO HÁ HERANÇA!
Meta-tag’s e links
Também é possível especificar uma META-TAG para fazer a proibição diretamente na página:
<meta name="robots" content="noindex,nofollow"> <a href="foo.php" rel="nofollow">Foo</a>
O “parâmetro” noindex, diz ao bot que o site não deve ser indexado e o parâmetro nofollow, que o site no link não deve ser seguido.
Nofollow é muito útil em seções de comentários, onde os spans abusam da nossa paciência. Essa forma não é eficaz para acabar com essa praga, mas pelo menos o eles não ganham pontos com links no Googlebot por exemplo.
Links para testar
É possível testar se os caminhos especificados no robots.txt realmente existem. Fora a identificação de prováveis erros de sintaxe em arquivos muito grandes e gerados manualmente, não vejo muita utilidade nesses caras. Para testar utilize o próprio arquivo robots do Google, até nele eles apontam erros, principalmente relacionados ao ‘*’.
http://www.searchenginepromotionhelp.com/m/robots-text-tester/robots-checker.php
http://www.frobee.com/robots-txt-check
Exemplos
Podemos visualizar alguns bons exemplos nos links abaixo:
http://www.google.com.br/robots.txt
http://www.facebook.com.br/robots.txt (leia os direitos)
http://www.marketingdebusca.com.br/robots.txt
http://www.mestreseo.com.br/robots.txt (bem humorado hehe)
Segundo o site BrPoint, o seguinte robots.txt é ideal para quem utiliza WordPress.
User-agent: * # remova os diretorios Disallow: /cgi-bin/ Disallow: /tag/ Disallow: /wp-admin/ Disallow: /wp-includes/ Disallow: /trackback/ Disallow: /feed/ Disallow: /tags/ User-agent: Googlebot # remover scrips css e afins Disallow: /*.php$ Disallow: /*.js$ Disallow: /*.inc$ Disallow: /*.css$ Disallow: /*.gz$ Disallow: /*.wmv$ Disallow: /*.cgi$ Disallow: /*.xhtml$ # qualquer endereco que contenha ? Disallow: /*?* # permitir o adsense em qualquer url User-agent: Mediapartners-Google* Disallow: Allow: /* #Sitemap Sitemap: http://www.brpoint.net/sitemap.xml
Geradores de robots.txt
Fontes:
O plugin Mask Input Money do jQuery foi desenvolvido para fornecer uma máscara específica para moedas, sendo possível definir o símbolo (R$, US$, $, etc), número de casas, entre outras opções.
Para utilização de máscara de forma mais genérica, verifique o post sobre Masked Input Plugin – Máscara para campos de texto.
O plugin deve “atacar” o input em questão e aceita os seguintes parâmetros:
thousands decimal allowZero allowNegative defaultZero symbol showSymbol symbolStay precision
thousands
Aceita um caractér (CHAR) como valor e o define como o símbolo para milhares. Padrão: ",".
decimal
Aceita um caractér (CHAR) como valor e o define como o símbolo para decimal. Padrão: ".".
allowZero
Aceita um true ou false (BOOLEAN) como valor e define se o campo vai aceitar zeros (true) ou não (false). Padrão: "false".
allowNegative
Aceita um true ou false (BOOLEAN) como valor e define se o campo vai aceitar um valor negativo (true) ou não (false). Padrão: "false".
defaultZero
Aceita true ou false (BOOLEAN) como valor e define se o campo vai aparecer com os valores zerados na inicialização (ao receber focus). Padrão "true".
symbol
Aceita uma string como valor e define o símbolo da moeda. Padrão: "US$"
showSymbol
Aceita true ou false (BOOLEAN) como valor e define se o campo deverá mostrar o símbolo (true) ou não (false). Padrão? "false".
symbolStay
Aceita true ou false (BOOLEAN) como valor e define se o campo deverá permanecer mostrando o símbolo quando perder o foco (evento blur, change, etc). Padrão: "false".
precision
Aceita um inteiro (INT) como valor e define quantas casas decimais o valor poderá conter. Padrão: "2".
Carregando o arquivo
Como premissa, devemos ter carregado o jQuery e em, seguida podemos carregar o arquivo do plugin, diretamente do nosso servidor (fazendo o download do arquivo) ou então do Github.
<head> ... <script src="//raw.github.com/plentz/jquery-maskmoney/master/jquery.maskMoney.js" type="text/javascript"></script> ... </head>
Exemplos de utilização
HTML: supomos que temos um campo de texto com o ID “GRANA”.
... <input type="text" name="dinheiro" id="GRANA" /> ...
JS (jQuery): utilizamos o seguinte código para atribuir uma máscara de REAL (R$) à esse campo.
$("#GRANA").maskMoney({thousands:".", decimal:",", symbol:"R$", showSymbol:true, symbolStay:true});
Vídeo-aula
Nesse vídeo você encontrará mais explicações e verá os exemplos em funcionamento.
Download
https://github.com/plentz/jquery-maskmoney/downloads
Link do projeto