Estava com um tempinho sobrando e estudando sobre html5, css3 e vi que algumas pessoas já começaram a desenhar com as técnicas de cantos arredondados do css3. Decidi fazer a minha versão do logo daqui do vírgula.
O portal vírgula ganhou uma versão do seu símbolo em HTML5 e CSS3
Claro que não funciona no Internet Explorer, mas funcionou em google Chrome, Opera e Firefox no meu linux ubuntu. Também não testei no IE9, mas quem se importa?. E aí na sua máquina, funcionou?
Você se lembra quando inserir um video em uma página web era complicado? Você prescisava usar a tag embed e colocar um arquivo .wma que muitas vezes prescisava de um plugin da microsoft para conseguir rodar. Consequentemente, o player do tio Bill carregava no Internet Explorer e deixava o usuário furioso com o consumo de memória que ele consumia.
Apesar dos pesares, era relativamente fácil inserir um video com o html4 que tinhamos na época:
1 | <embed autoplay="false" src="VIDEO.wma" width="50" height="50></embed> |
Videos online, assim foi que o youtube conseguiu a maior audiência do mercado web do mundo
Ainda bem que o tempo passa e, com ele, a tecnologia só melhora. Inventaram o flash e com ele o player personalizado. Pouco tempo depois nascia um dos mais visitados sites do mundo: Youtube. Mas, infelizmente se tornaria mais complicado inserir um video no seu site. Agora era necessário usar o embed de flash, que não decorei até hoje.
1 2 3 4 5 6 | <object width="640" height="385"> <param name="movie" value="http://www.youtube.com/v/ID_VIDEO"></param> <param name="allowFullScreen" value="true"></param> <param name="allowscriptaccess" value="always"></param> <embed src="http://www.youtube.com/v/ID_VIDEO" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="640" height="385"></embed> </object> |
O pior veio quando, em alguns casos, o browser bloqueava o embed e precisou-se usar algum hack em javascript para conseguir “embebedar” o flash player com suas trocentas variáveis.
Com a chegada do html5 tudo ficou mais fácil. Eu já havia explicado por aqui como se faz para inserir um video em formato .ogg em sua página. Isso foi um pouco antes do html5 estourar nas paradas de sucesso. Algum tempo depois o Youtube aderiu a essa novidade.
Mas infelizmente nem tudo são flores na vida de Joseph Climber, e agora nos deparamos com uma pergunta básica: usar video com html5 ou embed de flash player. O caso é que, dependendo da máquina/browser do usuário, o html5 (que tem muito mais vantagens) simplesmente não funciona. O youtube está convertendo, pouco a pouco os videos em formato .flv para o formato .ogg aos poucos, então quando saber que está na hora de atualizar os videos do seu blog?
Para resolver o problema, o youtube decidiu tomar as redias e “inventou” uma nova forma de colocar os videos dele no seu site/blog: através de iframes. Veja como a sintaxe fica mais interessante.
1 2 3 4 | <iframe class="youtube-player" type="text/html" frameborder="0"
src="http://www.youtube.com/embed/VIDEO_ID"
width="640" height="385"
></iframe> |
Apenas trocando o ID do video. E voilà, seu video está em seu site sem você precisar se preocupar com atualizações de versão, compactibilidade, etc, etc.
Nesta sexta-feira, dia 30 de outubro, o PagSeguro mudou a sua homepage e com ela muitas coisas novas aconteceram. Inclusive rolou uma palestra para 70 pessoas do twitter que acompanharam as mudanças do Twitter. A palestra foi ministrada pelo Dennis Ferreira e pela Valéria Santos. Pessoas que tive a oportunidade de conhecer de perto e eles são pessoas responsáveis e estão conscientes das mudanças e do impacto que esta mudança causa.
PagSeguro - Uma empresa UOL
Tem bastante gente falando sobre as novidades do novo site do PagSeguro por aí, então se quiser saber o que exatamente, recomendo os slides da palestra e uma busca no oráculo.
Mas, e na parte de códigos? O que muda? Você precisa atualizar seus códigos para essa nova plataforma? A resposta é simples e óbvia: NADA. Sim você não precisa atualizar seu código correndo achando que sua URL mudou. O PagSeguro deixou de ser implementado em ASP e passou a ser implementado em JAVA, o que deixou a aplicação muito mais robusta e segura, com isso a URL do retorno automático mudou. No site do PagSeguro eles indicam uma nova URL para o retorno automático ( https://pagseguro.uol.com.br/pagseguro-ws/checkout/NPI.jhtml ) mas a URL anterior continua funcionando normalmente e continuará por um longo tempo.
O pessoal do PagSeguro fez todas as alterações no seu sistema e antes de por no ar fez uma longa bateria de testes e só foi para o ar após verificar se todas as bibliotecas oficiais continuavam funcionando normalmente. Então, as URL de retorno automático continuará funcionando normalmente. Com o passar do tempo, é óbvio que a URL anterior morra, mas isso acontecerá muito tempo depois, até perceberem que ninguém mais utiliza a URL antiga.
A mudança vai ser longa e sutil, com o tempo iremos alterar todos os scripts para a nova URL, mas você não precisa sair desesperado para trocar suas URLs. O PagSeguro pensou bem nisso quando alterou a url de retorno automático. Eu mesmo fiz testes hoje de tarde para comprovar isso, já que recebi algumas dúvidas de alguns clientes e algumas pessoas reclamaram disso no twitter. Portanto, não se preocupe, você não precisa alterar nada no seu script de retorno automático do PagSeguro.
O Internet Explorer foi um browser que trouxe inúmeras novidades como por exemplo suporte à nova linguagem de Estilos em cascata, também conhecido como CSS. Mas o lançamento do Internet Explorer foi dado há mais de oito anos (apromximadamente uns 160 anos humanos).
IE6, jogue fora esse navegador que foi lançado há mais de oito anos e atualize-se! Isto é uma ordem!
Sua grande propagação se deu ao fato de já vir no CD de instalação windows mais popular de todos os tempos: Windows XP. Esse sistema operacional passou por um tempo de rejeição devido à imcompactibilidade de drivers, mas logo após isso a popularização das máquinas se tornou extremamente simples. Isso quer dizer que mais pessoas compravam novas máquinas já compactiveis com o novo e revolucionário XP.
O IE6 dava muita dor de cabeça para programadores front-end (html, css e javascript). Ainda bem que, como todo software que se preze, uma nova versão foi lançada e em alguns meses a versão antiga sairá do mercado e os designers poderão trabalhar sossegados. O problema é que, diferentemente dos softwares normais, o IE6 continua no mercado e os designers continuam batendo cabeça para fazer seu site/sistema rodar nesse programa.
Como já venho dizendo há um bom tempo, precisamos parar de programar para o IE6, já que é a necessidade que faz as pessoas procurarem melhor. Dessa forma, um usuário verá que um site fica “feio” em sua máquina mas na máquina do vizinho fica “redondo” e isso porque está atrasado. Isso fará com que ele corra atrás de um amigo para atualizar seu navegador.
Hoje, não programo mais para IE6 a menos que o cliente me peça, expeficicamente, para que o sistema rode em IE6. Ainda assim tento convencê-lo que o que ele está pedindo é um absurdo e que perderá muitas vantagens com o seu pedido. Mas! Alguém já disse há um tempo (não encontrei a referencia, mas assim que encontrar, publico aqui) que não basta parar de dar suporte, pelo contrário devemos dar suporte. Não ao IE6 mas às pessoas que não sabem como fazer a atualização do seu Browser. Saia da cadeira (depois de ler este post é claro) e vá bater na porta do seu vizinho com um CD do IE7 e atualize o computador dele.
Há um post muito interessante no Web Resources Depot que algumas campanhas internacionais para o fim do IE6 e algumas dicas de como resolver vários problemas (PNG transparente por exemplo) para o dito cujo. Além de uma lista de cartas de obtuários para tal navegador.
Há pouco tempo o pessoal do iMaster começou uma ótima campanha brazuca para darmos cabo ao browser azulzinho defasado. Junto a essa campanha, há uma corrente dentre os blogueiros estão num meme onde você deve incluir o script da campanha no seu blog e indicar mais quatro amigos. Eu vou incluir cinco diferentemente das outras pessoas.
Para este meme, convoco as seguintes lendas da internet:
Olá pessoal!!! 
Bem, eu sei, tenho andado muito sumido por aqui. São muitos projetos e muitas aulas para lecionar. Engano de quem pensa que isso é ruim. Pelo contrário. Ontem um aluno meu me disse o seguinte: “em plena crise global você está com tantos projetos, isso é bom”
Anyway. Tenho trabalhado muito com o sistema de pagamento PagSeguro e minhas impressões sobre essa incrível ferramenta são muito positivas. Hoje fiquei pensando. “Pô, o PagSeguro é tão simples de trabalhar, nem prescisa de um sistema em PHP/Python/Ruby on Rails/.Net/Java/C++/Perl/etc. Na verdade é possivel resolver o problema apenas com JavaScript.”
Então com café e biscoito “na ideia” (ideia agora não tem mais acento, argh!) resolvi tentar resolver o problema criando uma biblioteca na qual designers consigam criar sua própria loja de forma simples e dinâmica tendo apenas que configurar com seus dados e informar seus produtos separados por categorias. O resultado você pode conferir na minha lojinha de demonstração.
A configuração não é um bicho de sete cabeças. Ao baixar o arquivo .zip você receberá cinco arquivo e uma pasta. Eis a estrutura:
index.html - Arquivo onde roda sua loja configuracoes.js - Arquivo de suas configurações junto ao pagseguro. Como o e-mail, tipo de frete, imagem do botão, etc loja.js - Seus produtos estarão listados aqui pagseguro.js - Enfim a biblioteca que faz tudo funcionar :D style.css - Apenas o CSS que dará um gás na sua loja imagem/ - Pasta onde ficarão as imagens dos produtos
Agora, como diria o Jack: vamos por partes.
Nesse arquivo você deve colocar as configurações de sua conta e do seu carrinho PagSeguro. A principal configuração é o seu e-mail. O mesmo e-mail que você cadastrou-se no pagseguro.
1 2 3 | configuracoes = { email : 'INFORME SEU E-MAIL CADATRADO NO PAGSEGURO', moeda : 'BRL', // Atualmente o PagSeguro só suporta (BRL) Brasil - Real |
Deixei para você decidir qual será a moeda usada porque não vai que um dia o PagSeguro trabalha com Dolar, né? Então a configuração já está lá e funcionando, só que se você passar outro valor, o PagSeguro mandará um erro para seu cliente, e nós não queremos isso, né?
As configurações sobre o frete são opcionais e devem atuar com o sua configuração no admin do PagSeguro. Se você quiser que seja um frete único para todos os itens você deve passar a informação aqui.
1 2 3 4 5 6 7 8 9 | // Configurações sobre o frete tipofrete : 'EN', // Se esta opção for definida (é opcional), // use frete nas configurações para frete unico por // item ou um tipo de frete para cada produto // // Aqui você deverá informar EN para PAC ou SD para Sedex // Não se esqueça de definir suas opções no seu Admin do PagSeguro frete : 2, peso : 2, // Sim, ele aceita float 2.4 e inteiro, a biblioteca já converte pra voce em 240 ou 200 :D |
* nota: quando digo um frete único quero dizer que os correios irão cobrar um valor único para cada item então, se a pessoa te pede dois itens (do mesmo produto ou não) esse valor será multiplicado por dois.
A próxima configuração será onde deverão atuar cada área da sua loja. Passe os IDs que você achar melhor. O legal é que você pode escrever o HTML como desejar que a biblioteca colocará cada parte em seu determinado lugar.
1 2 3 4 | // Abaixo, coloque as referencias aos seus elementos do HTML id_menu : 'menu', id_main : 'main', id_carrinho : 'carrinho', |
Agora, com relação às imagens de cada produto. Cada produto deverá ter um código identificador (ou id), um para cada tipo de produto, logo uma câmera fotográfica deverá ter um id diferente de câmera fotografica digital. Se você setar esse valor como true, a biblioteca irá procurar por imagens na pasta imagem da seguinte forma: [codigo_de_identificacao].[extensao]
Logo, você pode definir a extensão que suas imagens terão, pode ser gif, bmp, jpg, jpeg, png, fique à vontade. O único problema é que todas as imagens devem ter a mesma extensão.
1 2 3 4 5 | // Gostaria de inserir imagens aos seus itens. // Os arquivos devem estar dentro da pasta imagem // no formato [id].[formatoimg] imagem : true, formatoimg : 'jpg', |
Botão de compra, você pode adicionar qualquer imagem nesta parte, já deixei preparado para você as imagens padrão do PagSeguro. Aconselho a usar essas imagens porque elas estão no PagSeguro, se acontecer de o PagSeguro estar offline o usuário verá uma imagem de erro e saberá que não conseguirá efetuar a compra por qualquer que seja o motivo.
1 2 3 4 5 | // Endereço do botão de compra //imgBotao : 'https://pagseguro.uol.com.br/Security/Imagens/btnComprarBR.jpg', //imgBotao : 'https://pagseguro.uol.com.br/Security/Imagens/btnConcluirBR.jpg', imgBotao : 'https://pagseguro.uol.com.br/Security/Imagens/btnFinalizar.jpg', //imgBotao : 'https://pagseguro.uol.com.br/Security/Imagens/btnConcluir.jpg', |
Para escolher o botão basta descomentar a linha e comentar a linha descomentada.
E, por último, configure a categoria que aparecerá ao abrir a página, ou seja, a home de sua loja. Você verá mais par frente que você separa seus produtos por categoria. O nome da categoria deve ser exatamente igual ao nome da categoria que você informou. Isso quer dizer que “MAIÚSCULAS” é diferente de “maiúsculas” ok ;D
1 2 3 4 | // Abaixo, informe o primeiro grupo a ser mostrado na loja // Não se esqueça! Este valor é case-sensitive, ou seja Maiúsculas é diferente de MAIÚSCULAS inicio : 'Bebê' } |
* Nota: O padrão do javascript é aceitar que você coloque virgulas no último item de um objeto (nosso objeto de configuração por exemplo), mas o internet explorer acha que isso é um BUG, quebrando assim o script 
então a última configuração deverá estar sem a vírgula.
Ah sim! Os produtos. Esses não tem mistério nenhum. Você deve trabalhar com o formato JSON para criar os seus elementos. Mas vamos devagar, você aprenderá como é facil configurar sua loja.
Primeiro, definimos a nossa loja:
1 2 3 | loja = { } |
Com isto já temos uma loja e podemos adicionar categorias.
1 2 3 4 5 | loja = { 'Bebê': [], 'Eletro-portáteis': [], 'Câmeras digitais': [] } |
E para cada elemento, você deve seguir o modelo, mas preste atenção do BUG do Internet explorer: não coloque vírgula no último item do objeto. Para fazer a sua loja iniciar com uma determinada categoria aberta, coloque o nome dessa categoria no arquivo configurações, mas lembre-se! “Mamãe” é diferente de “mamãe” que é diferente de “Mamae” ;D
Agora, os produtos. Para cada categoria você deve colocar seus produtos, então vamos adicionar dois produtos ao nosso objeto.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | loja = { 'Bebê': [ { 'id' : '00001', 'descr' : 'Chupeta doce', 'valor' : 3.4 }, { 'id' : '00002', 'descr' : 'Chupeta salgada', 'valor' : 4.8 }, { 'id' : 'A12MF5', 'descr' : 'Chupeta amarga', 'valor' : 4 } ], 'Eletro-portáteis': [], 'Câmeras digitais': [] } |
E pronto! Sua loja está montada coloque quantos produtos você achar conveniente. Lembre-se, que nesta parte você também não pode colocar virgula no último elemento, já que o Internet Explorer implica com isso.
Se você definiu, nas suas configurações, a biblioteca deverá produrar por imagens no formato PNG você deverá ter as seguintes imagens na sua pasta imagem: 00001.png, 00002.png e A12MF5.png
Para cada item você pode passar um valor de frete e valor de peso, mas se você passar para um, deve passar para todos.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | loja = { 'Bebê': [ { 'id' : '00001', 'descr' : 'Chupeta doce', 'valor' : 3.4, 'peso' : 0.53, 'frete' : 4.3 }, { 'id' : '00002', 'descr' : 'Chupeta salgada', 'valor' : 4.8, 'peso' : 0.7, 'frete' : 5 } ] } |
Você também deve fazer a configuração no arquivo de configurações do tipo de frete. Se você definir o valor de frete único nas suas configurações a biblioteca irá ignorar os valores de frete e passará a atuar com frete único.
Obviamente, esta biblioteca trabalha com o tipo “Carrinho Próprio” já que no “Carinho PagSeguro Brasileiro” não podemos enviar mais de um produto de vez, mas não se preocupe, isso não quer dizer que você tem que tratar retorno automático e etc. Ah, sim, não se esqueça de cobrar pelo frete seja ele por peso ou por valor de frete fixo.
Agora que você já tem sua loja funcional, use sua criatividade para criar um belo layout e comece hoje mesmo a lucrar com sua loja PagSeguro. Quem quiser, pode inclusive colocar o link de suas criadas com esta biblioteca para ver qual é a melhor. Abraços!
A biblioteca foi montada em menos de um dia de trabalho, logo, podemos ver como o sistema de pagamento nos permite que trabalhemos de forma rápida e simples. Como se não bastasse, em apenas um dia foi possivel criar uma loja completa e funcional com direito a pagamento via boleto, cartões de crétido, débito em conta e tudo o que tem direito.
