Relaciona todas as subcategorias sobre desenvolvimento WEB.
There are 31 posts filed in Desenvolvimento WEB (this is page 3 of 4).
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');
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/
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
Mais um da série, testando seu site! Dessa vez podemos testa-lo em tablets, mobiles, desktops e até em TV’s!
Com o site http://quirktools.com/screenfly/ basta digitar o endereço do seu site – já publicado – no único campo do site e selecionar o dispositivo à ser testado…
Screenfly
Grande abraço!
Em se tratando de Internet Explorer, sempre é bom debugar…
No vídeo abaixo, eu apresento o IE Tester, muito conhecido para quem já trabalha na área, mas para os entrantes no mercado, nem tanto.
O Internet Explorer é muito conhecido por “falhas” na hora de renderizar os códigos, mas na verdade isso acontece porque ele usa um motor de interpretação de HTML (Trident) diferente dos demais (Gecko) e pelo fato de deu fabricante ser um grande player de marcado, temos que nos render a essas particularidades, é o famoso cross-browser.
Para essa tarefa algumas ferramentas são indispensáveis, uma delas é o IE Tester.
Link do aplicativo: http://www.my-debugbar.com/wiki/IETester/HomePage
Pessoal,
Para instalar o botão +1 do Google, em seu site ou blog, basta seguir esses passos:
1º) Copie e cole o código abaixo entre as tag’s head do seu código
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
{lang: 'pt-BR'}
</script>
2º) Inclua esse código onde você quer que apareça o botão do [b]Google +1[/b]
<g:plusone></g:plusone>
Mais informações no site do Google
Abraço
Lí no Imasters, no qual é a fonte para esse pequeno artigo, que segundo o Gartner, o mercado para SaaS (software como serviço, em inglês) pode dobrar em cinco anos e possibilitará a movimentação de aproximadamente US$ 21,3 Bilhões em 2015, contra apenas US$ 10 Bilhões em todo mundo no ano passado.
Segundo Tom Eid, vice-presidente do Gartner, essa movimentação está ocorrendo por conta dos orçamentos reduzidos para investimentos com T.I. nas organizações, no qual vem exigindo cada vez mais o uso de tecnologias voltadas à Cloud Computing (Computação em nuvens).
Segundo o Gartner, 75% dos contratos hoje são fechados com desenvolvimento em SaaS e a esperança é de que seja atingido o índice de 90% em 2015 e o carro chefe são softwares de CRM.
Isso só faz com que a minha teoria (que não é nada inovadora) se concretize ainda mais. A Cloud Computing pode estar fechando algumas portas para os adminsitradores de rede e outros cargos, mas com muita certeza está abrindo para os desenvolvedores web…
Essa notícia faz com que pensemos: sua organização tem um software instalado nas máquinas hoje? Então você precisará de um desenvolvedor web para, no mínimo, convertê-los em aproximadamente 5 anos.