Olá, hoje vou falar aqui sobre o erro que é gerado geralmente no Internet Explorer quando utiliza-se o plugin jCarousel para gerar carrosseis :D, o erro que aparece no console é o seguinte.
SCRIPT5022: jCarousel: No width/height set for items. This will cause an infinite loop. Aborting...
jquery.jcarousel.min.js, linha 16 Caractere 8231
Eu geralmente sempre pego esse erro e antes costumava perder um certo tempo para entender porquê ele acontecia!
Resolução:
Nos meus casos, o que sempre gera esse problema é quando eu tento utilizar o plugin e não declaro o tamanho em largura para os elementos a serem rotacionados, no meu caso eu sempre crio listas (<ul>) e flutuo seus elementos filhos(<li>), o resto o plugin faz( cácula o tamanho da lista com a quantidade e preenchimento de cada item da lista, porém no IE isso não ocorre perfeitamente - dae o problema.), como o plugin não calcula o tamanho do item da lista ele gera um erro, então para ajudar o plugin você declara exatamente o tamanho do item da lista, dessa forma o erro acima não aparece e o plugin funciona corretamente!
Recentemente estava usando o player do youtube no meu site para apresentar os videos dentro das divs, porém percebi que quando usava um lightbox para mostrar outros videos, o iframe do youtube ficava com sobreposto as camadas do Lightbox. Pesquisando descobri que para corrigir o problema de z-index em iframes embeds do Youtube, basta adicionar um parametro na SRC do iframe:
A tag fornecida pelo Youtube para incorporar um vídeo no seu site é a seguinte:
Da forma acima ocorre o problema com o z-index, para corrigir o problema basta adicionar o parametro "wmode=transparent" no final da URL no atributo SRC do iframe, ficando assim:
Olá, hoje o post vai mostrar a você leitor como fazer para utilizar o Web Inspector(presente no chrome) para fazer a depuração do seu web site quando acessado via mobile.Funciona assim, você coloca um script na sua página que vai apontar para o endereço do seu PC com o servidor hospedando uma aplicação de debug, quando o site for executado em um dispositivo qualquer você poderá ter acesso ao debug localmente.
A vantagem de se usar remote debug em dispositivos mobile, é que você tem a opção de utilzar o Web Inspector em tempo real e monitorar as alterações de HTML/CSS/JS.
O que você precisa:
- de prefêrencia um dispositivo móvel, no meu caso estou usando o iPad adquirido na loja Shopfato.com.br
Para configurar a depuração remota, execute o aplicativo weinre, se você usar OS X basta arrastar o programa para dentro da sua pasta de aplicações e executá-lo, caso você use outro sistema, terá que executar em Java.
--boundHost -all- permite ao cliente depurar tantro através do IP como do HOSTNAME, isso é útil para quando estamos em redes diferentes.
--readTimeout 10 é o tempo que o servidor usa para ler se foi enviado alguma alteração remota
--deathTimeout 30 é o tempo que o servidor demorar para matar o processo de leitura.
OBS: para uma documentação com maiores informações sobre a execução e configuração do aplicativo weinre dê uma lida na documentação do software em: http://phonegap.github.com/weinre/Running.html
lá também demonstra como criar um arquivo de configuração que é colocado no diretório da aplicação para evitar o uso de parâmetros na linha de comando, útil para a versão Mac.
Dessa forma você irá cair na página do servidor. Dentro da página existe um link na seção "Target Script", copie a linha de exemplo, algo parecido com:
Esse endereço vai te levar para a interface de debug, nesta interface na seção Target, clique em um dos itens para selecionar qual dispositivo você vai querer executar a depuração, após selecionar o dispositivo você já pode selecionar algumas das abas como "Elements", "Resources"... etc e começar a depurar a página web direto no seu navegador local.
Pronto! Você agora está apto a depurar a página web que é mostrada em seu iPad e modificar a apresentação direto no navegador do seu PC.
Zen Coding é um plugin que pode ser instalado em diversos Editores de Texto e IDE´s de programação, para aumentar a velocidade de desenvolvimento com CSS, HTML, XML/XSL e linguagens HAML via filtros. O principal ponto do Zen Coding é o seu motor de abreviação, que através de expressões nos permitem gerar códigos HTML/CSS e etc, de uma forma rápida. Vamos ver como é isso!
Instalar Zen Coding no Aptanta
Agora que sabemos o que é o Zen Coding, vamos configurá-lo para ser usado dentro do Aptana Studio 3, não se preocupe pois é muito simples.
Vá em Help -> Install new software..
Clique em "Add" para adicionar um novo local de updates dentro do Aptana.
Zen Coding irá aparecer como uma subcategoria de "uncategorised", selecione!
Agora basta clicar em "next".
Após instalar basta reiniciar o Aptana!
Escrevendo HTML com Zen Coding!
Após instalar corretamente o Zen Coding ele irá acrescentar um novo menu na barra de ferramentas do Aptana chamado "Zen Coding":
Inicialmente vamos prestar atenção no atalho de tecla Ctrl+E (Expand Abbreviation), esse comando transforma as abreviações/expressões entendidas pelo "Zen" em HTML puro! Então bora lá fazer um teste.
Vamos supor que eu queira criar uma lista de links!
No arquivo HTML e com o Zen instalado eu vou digitar a abreviação:
ul.lista-links>li*3>a[accesskey][href="#"]
Selecione a linha abreviada e use o novo comando (Expand Abbreviation) ou simplesmente ctrl+e e pronto:
Existe uma boa documentação em como se utilizar o Zen Coding no seguinte endereço:
Olá, hoje quero demonstrar o uso de CSS3 Media Queries em conjunto com o framework Less CSS, para trabalhar a estilização de páginas para iOS e Android. Os dispositivos que pretendo utilizar nos meus exemplos são um iPod Touch e um iPad.
Antes de começar, gostaria de deixar claro que podemos utilizar duas formas básicas de uso das CSS3 Media Queries para detectar o dispositivo e suas medidas, a primeira delas é através de folhas de estilos externas e a outra forma é utilizando media queries dentro da folha de estilo global.
Manipulando as CSS de acordo com o navegador e o dispositivo.
O mais importante para se trabalhar com Media Queries é saber as medidas o dispositivo responde, por exemplo o Safari no iPhone responde a media querie max-device-width: 480px já o iPad responde a min-device-width: 768px e max-device-width: 1024px;
DICA: Um pequeno detalhe é que para dispositivos que utilizam Android, este dispositivo tem praticamente as mesmas medidas que o iPhone e aceita o uso de media queries max-device-width: 480px, porém existe um pequeno detalhe, nas versões do Android 2.2 para que essa media querie funcione corretamente é preciso adicionar a metatag viewport veja o link sobre a discussão -> https://code.google.com/p/android/issues/detail?id=11961
Então antes de começar se pretende atingir com o uso de media queries, também dispositivos Android 2.2 ou superior adicione no head do seu HTML a meta tag abaixo:
Definindo o uso de folhas de estilo externas com Media Queries.
Se você prefere trabalhar com folhas de estilos separadas em diferentes arquivos, adicione os códigos abaixo no head do seu documento HTML.
<!--[if !IE]>--> <link type="text/css" rel="stylesheet" media="only screen and (max-device-width: 480px)" href="http://example.com/iPhone.css" /> <link type="text/css" rel="stylesheet" media="only screen and (min-device-width: 768px) and (max-device-width: 1024px)" href="http://example.com/iPad.css" /> <!--<![endif]-->
Neste artigo vou utilizar a segunda forma, pois venho trabalhando muito com sistemas fechados que não me permitem alterar o HTML e é nessas horas que dou graças a Deus por ter começado a aprender CSS usando o princípio do site CSS Zen Garden - sim um dos meus primeiros testes com CSS foi participando deste desafio, claro que no começo eu tive sérios problemas com os IE Hacks, mas que hoje já não é mais a minha realidade :D.
Definindo o uso de Media Queries dentro da folha de estilo geral.
O bom uso de media queries dentro do arquivo geral de CSS é a economia nas requisições HTTP que o cliente vai executar no servidor, que no meu caso é muito válido pois trabalho em uma loja virtual onde existe um constante crescimento nos acessos e a tendência é que só aumente, então toda economia nas requisições é válida!
Ainda com foco na performance, agora estou falando na performance do meu trabalho, em codar tudo isso, vem o uso da Less CSS para me ajudar a separar em arquivos diferentes os estilos para os dispositivos. Em um post anterior(Como usar Less CSS no Windows) mencionei uma forma de trabalhar com Less CSS compilando a CSS geral em uma apartir de diferentes arquivos de folha de estilo.
No meu projeto temos uma única folha de estilo que vou chamar de principal.css, é nela que encontra-se toda a formatação do site e vou inserir modularmente a configuração necessária para mobile via Media Queries. As folhas de estilo irei separá-las com os nomes de fone.css e tablet.css, auto-explicativas né?!
Principal.css
É nesse arquivo que eu faço a chamada para os módulos(.css externas), resolvi colocar a importação dos módulos com CSS através da Less assim quando eu compilar os arquivos .less tudo vai se tornar uma única .css.
principal.less:
@import: "normalize";
@import: "libs";
@import: "tablet-fone";
@import: "tablet";
@import: "fone";
fone-tablet.less:
/* tablet/fone [portrait + landscape], uso para configurações que são padrão para os dois dispositivos */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px), @media only screen and (max-device-width: 480px) {
CSS
}
tablet.less:
/* tabet[portrait + landscape] */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
CSS
}
fone.less:
/* fone[portrait + landscape] */
@media only screen and (max-device-width: 480px) {
CSS
}
Bom é isso ae pessoal, espero que ajudem vocês ae!
Olá leitor, vou deixar aqui uma dica de como usar o conhecido framework ágil Less CSS no Windows. Se você digita dezenas de códigos em CSS, esta ai algo pra facilitar sua vida ;). Não vou entrar em detalhes sobre o uso da Less CSS e nem mostrar os recursos da linguagem, neste post vou apenas mostrar uma forma eficiente de compilar os arquivos '.less' para '.css'.
Compilar ou executar no lado do cliente?
Para aqueles que conhecem e mesmo aqueles que desconhecem a Less(aka, um apelidinho para a lib :P ), ela é um arquivo de JS que pode ser executado do lado do cliente. É ai que você se pergunta, pô pra que vou querer compilar isso então?
Respostas simples: alguns projetos como aplicações e lojas de e-commerce( como a que trablaho atualmente - Shopfato.com ), sempre temos que executar o menor número possível de JS no lado do cliente, devemos focar em trazer uma experiência mais suave e com mais produtos e imagens na tela, então todo processamento ecomonizado no lado do cliente como por exemplo: requisições de HTTP, loads de JS, tamanho de imagens como outras técnicas usadas para diminuir o carregamento da página no navegador do usuário, é válida. Logo se compilarmos o arquivo de CSS e entregar prontinho para o usuário estaremos poupando o tempo de construção da interface da página para o mesmo. Por isso prefiro compilar o arquivo '.less' antes e enviar ao servidor como um arquivo único.
Agora que você já sabe o porquê de compilar ao invés de executar no cliente, vamos ver como fazer isso.
Compilador para a linguagem Less CSS.
O compilador original da lib Less chama-se lessc e é desenvolvido para rodar em ambientes *nix usando nodejs que também é feito para rodar em ambientes *nix, porém o compilador o windows possuí uma ferramente de execução de javascripts no terminal e pode ser usada para executar o less.js que é o compilador da linguagem. Então o que precisamos fazer é apenas executar o script de JS na linha de comando e compilar o script? Bom.. sim e não! Temos que mudar algumas coisas para isso, claro! Já fizeram isso pra gente!
Download dos arquivos necessários.
1 - faça o donwload da versão mais recente da Less.js.
Pronto com esses arquivos no mesmo diretório basta executar no terminal, abra a linha de comando com WINDOWS + R digite cmd e tecle enter, vá até o diretório onde encontra-se os arquivos e entre com o comando.
Recentemente o Facebook tem anunciado mudanças drásticas na timeline. Vou disponibilizar a forma de como se fazer esse hack, que só pode ser visto por usuários que são desenvolvedores.
Passos para hackiar sua timeline:
1 - Você tem que ser um facebook dev - (desenvolvedor de aplicativos para FB - facebook. )
No campo de busca digite procure por "developer", e você vai ser levado para a página de desenvolvedores no FB,
2 - Clique em "Create App"
Siga os passos necessários para se criar um app no Facebook.
3 - Quando sua app estiver criada, dentro da página de configurações da aplicação tem um guia na lateral com o nome de Open Graph.
Clique em "get started" e siga os passos necessários até terminar de configurar corretamente.
4 - Pronto quando você voltar ao seu perfiil vai receber um aviso que você se tornou um desenvolvedor do FB, aceite e verá que um chamado para sua nova timeline.
Esse é mais um post da série Google App Engine, sobre o SDK do Google App Engine(aka. GAE), faz algum tempo que já o utilizo e apesar da documentação ser bem completa gostaria de escrever aqui minha experiência com ele.
O assunto deste post fala sobre um recurso muito importante no GAE chamado Appstats, esse recurso nos permite o monitorar as chamadas a feitas a API do GAE.
Appstats
Appstatsé uma biblioteca parao App Engine, que permite apresentar o perfil de desempenho do seuaplicativo no App Engine e ver exatamente quais chamadas de APIseu aplicativo estáfazendo para umadeterminada solicitação e quanto tempo demora. Com a capacidade deter uma visão geraldo desempenho deumasolicitação de páginainteira, epara perfurar até os detalhesde uma chamadaRPCindividual,agora éfácil de detectar e eliminar redundânciase ineficiênciasno funcionamento do seuaplicativo App Engine.Appstatsestá disponível tanto paraoPythoneJava runtime, para maiores informações sobre o Appstats visite a documentação(Python) aqui.
Habilitando o Appstats.
Para podermos abilitar o Appstats devemos editar o arquivo app.yaml e habilitar o appstats na diretiva builtins:
application: minhaapp
version: 3
runtime: python
api_version: 1
builtins:
- appstats: on
Após adicionar a configuração acima no arquivo app.yaml, temos que criar um arquivo de configuração chamado appengine_config.py no diretório raíz da aplicação. Nos diretórios com as libs do GAE existe um arquivo de exemplo com todas as configurações necessárias, basta apenas copiar ele para o diretório principal da nossa aplicação.
Para encontrar o arquivo de configuração no OSX navegue até o diretório de aplicações e do GAE vá até a pasta:
Copie o arquivo sample_appengine_config.py para seu o diretório raíz da sua aplicação com o nome de appengine_config.py em seguida abra o arquivo e descomente as linhas da seção 0:
def webapp_add_wsgi_middleware(app):
from google.appengine.ext.appstats import recording
app = recording.appstats_wsgi_middleware(app)
return app
Caso seu aplicativo utilize Django, então deixe a configuração acima comentada e descomente as configuraçöes abaixo:
from google.appengine.dist import use_library
use_library('django', '1.2')
import django
Em particular existem algumas outras opções interessantes que podem ajudar na depuração das aplicações.
Debug
Procure pela configuração appstats_debug:
appstats_DEBUG = False
altere para
appstats_DEBUG = True
Isso permite depurar a aplicação com diferentes níveis de detalhe.
Níveis do Debug.
Na diretiva appstats_DUMP_LEVEL, é possível utilizar 3 níveis de configuração:
appstats_DUMP_LEVEL = -1, faz com que nenhuma informação adicional seja apresentada.
appstats_DUMP_LEVEL = 0, mostra apenas em apenas 1 linha, informações de depuração.
appstats_DUMP_LEVEL = 1, mostra um pouco mais de 1 linha de informações de depuração.
appstats_DUMP_LEVEL = 2, o nível 2 tem o objetivo de mostrar o maior número de informações de depuração que a aplicação pode mostrar, detalhe que caso esse nível seja ativado, as requisições feitas para a aplicação podem demorar para serem respondidas e o seu log irá mostrar inúmeras operações que sua aplicação irá realizar até enviar a resposta ao cliente.
Feito isso sua aplicação já deve estar com o Appstats funcionando e apresentando informações de depuração(que são exibidas nos logs) conforme o nível selecionado.
Hoje estive trabalhando em uma aplicação para o Facebook, seguindo o "how-to" do próprio Facebook ele diz que quando o usuário acessa minha aplicação o Facebook envia uma "signed_request" com as informações do usuário, utilizando o algorítimo Base64 e fala que basta decodificar essa string para pode acessar as informações em texto puro, até ai está OK.
Na prática porém, quando executo os passos para decodificar a aplicação, pronto! Erro.
O erro
Um erro que diz que a string em Base64 não está correta!
File "C:\Python25\lib\base64.py", line 76, in b64decode
raise TypeError(msg)
TypeError: Incorrect padding
Resolução do problema:
Para resolver esse erro basta adicionar '==' ao final da string, então a string codificada chega assim:
"pFp0sLbu81kz8BEY1ejOSe8S6-HfGD2Qi5PuBifPbo4"
Se tentarmos decodificar usando o módulo 'base64' (padrão do python2.5), vamos topar com o erro mostrado acima, então para fugirmos dele alteramos a string recebida para:
"pFp0sLbu81kz8BEY1ejOSe8S6-HfGD2Qi5PuBifPbo4=="
E pronto! Problema resolvido.
Função alterada e funcionando corretamente:
def load_signed_request(self, signed_request):
"""Load the user state from a signed_request value"""
Esse é mais um post da série Google App Engine, sobre o SDK do Google App Engine(aka. GAE), faz algum tempo que já o utilizo e apesar da documentação ser bem completa gostaria de escrever aqui minha experiência com ele.
O assunto deste post fala sobre o armazenamento de dados polimorficos na App Engine. Você encontra a documentação da API de Datastore na própria documentação do GAE.
Entidades e Modelos.
Antes de iniciar o assunto, vou dar uma rápida prévia sobre a API de Armazenamento de dados usada pelo GAE que não permite que arquivos sejam escritos em seu sistema de arquivos e a única forma de armazenamento é via API. Então para entendermos bem o assunto deste post é interessante que você entenda um pouco sobre isso.
"Uma entidade de armazenamento de dados possui uma chave e um conjunto de propriedades. Um aplicativo utiliza a API de armazenamento de dados para definir modelos de dados e cria instâncias desses modelos para serem armazenadas como entidades. Os modelos fornecem uma estrutura comum às entidades criadas pela API e podem definir regras de validação dos valores das propriedades."(via documentação)
Resumindo, o GAE não utiliza modelos relacionais para o armazenamento em Banco de Dados, eles tem seu próprio banco de dados chamado BigTable, uma base de dados distribuída e escalável.
O básico para armazenar algo na BigTable consiste em criar um Modelo de entidade utilizando a classe Model da API google.appengine.ext.db, em seguida instanciar o modelo e apartir dele criar uma entidade.
print "Promoção %s <br/>Inicio em %s com término em %s" % (promocao.titulo, promocao.data_inicio, promocao.data_fim)
O que o código acima faz é gardar e apresentar os dados guardados, nenhuma instrução SQL foi feita diretamente e as entidades são adicionadas em seus modelos. Para buscar dados
Modelos Polimórficos
A documentação está bem definida e lá diz o seguinte:
"A API em Python inclui uma outra classe para modelagem de dados que permite a definição de hierarquias de classes e realiza consultas que podem retornar entidades de uma determinada classe ou qualquer uma de suas subclasses. Esses modelos e consultas são chamados "polimórficos", pois permitem que instâncias de uma classe sejam resultados para uma consulta de uma classe pai."
Agora iremos adicionar a classe PolyModel em nossa classe Premio e assim torna-la polimórfica. Isso irá permitir que quando formos adicionar uma nova promoção no mesmo momento em que instânciarmos a entidade ela irá receber a propriedade prêmio de uma forma transparente.
from google.appengine.ext import db
from google.appengine.ext.db import polymodel
class Premio(polymodel.PolyModel):
premio = db.StringProperty()
class Promocao(Premio):
autor = db.UserProperty(required=True)
....
def setPromocao(...):
....
promocao.premio = premio
promocao.put()
def getPromocoes(self):
for promocao in Promocoes.all():
if promocao.ativa == 0:
print "Promoção %s <br/>Inicio em %s com término em %s, e o prêmio será %s" % (promocao.titulo, promocao.data_inicio, promocao.data_fim, promocao.premio)
Dessa forma podemos criar modelos e definir um relacionamento oculto sobre eles.
DICAS:
A Bigtable executa queries mais rapidamente em entidades menores, os próprios desenvolvedores encorajam o uso de grupos, o polimorfismo da classe PolyModel cria esses grupos e isso faz com que essa entidades sejam armazenadas juntas no mesmo nó, enquanto modelosdistintos podem ser armazenados em outro nó qualquer, essa segmentação permite ao GAE buscas extramamente rápidas.
Abaixo um video muito interessante que explica muito bem o uso do datastore.
Comments [1]