Minha experiência com o Swiffy - Ferramenta do google que converte Flash em HTML5

Hoje conheci uma ferramenta muito legal! O Swiffy, do Google. Vou explicar o por quê:
Uma cliente da agência reclamou que o site dela não funciona no Ipad. Claro, o site foi feito em Flash, em 2009, antes do Ipad existir!
Quero deixar claro que Iphones e Ipads não aceitarem Flash é uma palhaçada! Nem o W3C liberou o HTML como versão oficial!
Lá vai eu correr para "refazer" o site e tirar todos os flashs. A minha sorte é que apenas a home e o menu estavam em flash. O menu foi fácil, apenas colocar aqueles "RollOver Image" do Dreamweaver.
Agora na home tinha uma intro com uma intercalação de imagens e textos. Eu pesquisei alguns sliders em Jquery, muitos muito legais, como o Jflow, o Content Slider e o News Slider. Mas nenhum ficaria parecido com a animação em flash que eu tinha feito há dois anos atrás.
Então me deu a louca de procurar sobre "converter flash em html5", apareceram várias opções, como o Wallaby da própria Adobe, mas deu uma preguicinhaa de instalar ele e o Air... pesadão...
Depois vi esse Swiffy do Google. A Ferrament é online, você sobe seu SWF e ele converte em html e vc pode salvar.
Vira um arquivo JavaScript enooooorrmeeee, o meu deu mais de 1MB. Todas as imagens viraram código, sei lá como. A única coisa é que ele não lê fontes diferentes, então tive que converter os textos do flash em curvas antes de mandar para o Swiffy. Maravilha!
Para colocar no meu site, tive que colocar um iframe para posicionar corretamente no meu layout.
Tudo funcionando lindinho! \o/ Até eu mandar para a minha chefe e ela falar... Aqui no meu IE não está funcionando.... :-S
Testes pra lá, testes pra cá, fiz o seguinte: No mesmo arquivo que o Swiffy gerou, no fim dele eu inseri o flash basicão. Se o código Java Script não funcionar, vai aparecer o flash. Gambiarra, mas funcionou!
Testado no Firefox, Chrome, Opera, Internet Explorer e no Iphone da minha colega. Tudo belezinha!

Conclusão: Esse Swiffy quebra um galhão, mas gera arquivos muito pesados e lentos de carregar, e ainda não funciona no Internet Explorer... aguardamos as atualizações!

Quem quiser ver o site funcionando, é só clicar aqui:
www.studioarq.com.br - a versão 2009 em flash
www.studioarq.com.br/teste - a versão em HTML5

Melhores Práticas em Web - Técnica das Migalhas de Pão

Aqui na agência estou fazendo um site enooorme e uma das técnicas que estou usando é das migalhas de pão (ou breadcrumbs). Descobri esse termo esses dias, claro que com o maridão! :-))

Essa técnica são aqueles passo a passo que tem principalmente em comércio eletrônico, que mostra onde vc está no site:

Página inicial > CDs > Rock Internacional > Cure  -- e por aí vai...

Decidi me aprofundar um pouco sobre o assunto e encontrei o texto abaixo no blog Fator W, e no fim tem outros links interessantes. Quando o site que estou desenvolvendo estiver pronto, eu coloco aqui.

Os caminhos de migalhas de pão

Lembra a história de João e Maria, na qual o garoto marcava o caminho na floresta jogando migalhas de pão para não se perder e saber o caminho de volta para casa? Pois o pequeno conto infantil, quem diria, deu a idéia para a criação da chamada navegação estrutural. É da história e João e Maria que veio o nome breadcrumb trails ou, em bom português, caminhos de migalhas de pão.

Os breadcrumb trails nada mais são do que a seqüência de links que o usuário percorreu – ou supostamente percorreu – para chegar onde está. Geralmente são encontrados acima dos títulos, num formato como Home > Tecnologia > Notícias > Microsoft lança Internet Explorer 7.

Se usados da maneira adequada, com diferenciação nas cores dos links visitados, as migalhas de pão podem ser um bom acessório para a experiência do usuário, principalmente em sites com muitas páginas e diferentes níveis de profundidade.

Embora seja chamado de navegação estrutural, os breadcrumb trails ajudam o usuário a se localizar dentro da estrutura do site, respondendo a três perguntas fundamentais definidas por Jakob Nielsen em Projetando Websites: onde estou? onde estive? aonde posso ir?

No livro Design para a internet: projetando a experiência perfeita, o autor Felipe Memória conclui, a partir de uma pesquisa para o mestrado, que os breadcrumb são mais utilizados como instrumento de localização do que de navegação.

A forma tradicional e mais usada para o recurso é chamada de location breadcrumbs. Existem também os path breadcrumbs, que mostram exatamente o caminho percorrido pelo usuário, e não uma representação determinada anteriormente de um possível caminho definido pelos arquitetos do site. Geralmente, os path breadcrumbs só podem ser usadas em sites programados, que vão fazendo um histórico das páginas visitadas pelo usuário.

Além de ajudar a localizar o usuário dentro da estrutura do site, acredito que os breadcrumb trails tenham grande importância principalmente para usuários que vêm de links externos, como do resultado de uma busca no Google, por exemplo. Nesta forma, o usuário cai no site de pára-quedas, em uma página interna com assunto específico que estava procurando, mas pode facilmente se localizar através do caminho declarado na página.

Não são todos os sites que precisam usar este tipo de recurso, mas o desenvolvedor deve pensar em lançá-lo sempre que quiser uma navegação bem estruturada e fácil para o usuário. E se é bom para o usuário, não há motivos para deixá-lo de lado.

Breadcrumbs In Web Design: Examples And Best Practices

João, Maria e as migalhas de pão virtuais

Nova Categoria!

Como boa autodidata que sou (e bem modesta e humilde) acabo buscando muitas coisas do que eu tenho que fazer no serviço pelo Google, e percebo que muitos desenvolvedores têm as mesmas dúvidas do que eu!
Por isso, criei uma categoria no blog chamada "o que eu procurei no Google" e vou postar minhas buscas e o que eu encontrei de interessante. Espero que gostem e seja útil! :-P