Adobe e a era dos dispositivos móveis »

01jun 2011, às 12:11

Publicado em Ferramentas | Deixe o seu comentário (1) »

publicado por: Magno Valdetaro

A alguns meses, a Adobe lançou sua nova suíte, a Adobe Creative Suite 5.5, que chega para tentar acompanhar a evolução rápida da web e dos dispositivos móveis, oferecendo ferramentas para desenvolvimento de aplicações para Android, BlackBerry e até mesmo IOS, recursos e suporte a HTML5, vídeos e publicações digitais.

Desenvolvimento para dispositivos móveis

A Adobe Creative Suite 5.5 Web Premium é recheado de inovações em HTML5 e ferramentas de criação em Flash, que oferece a criação, distribuição e monetização de conteúdo e aplicativos em praticamente qualquer tipo de tela.

Está liberdade permite aos designers e desenvolvedores entregar aplicações móveis para Android, BlackBerry Tablet OS, IOS e outras plataformas, gerar conteúdo rico usando HTML5 e alavancar o Flash player para distribuição de vídeo de lata qualidade, jogos casuais e aplicações ricas para web.

A Creative Suite 5.5 veio para acompanhar o boom dos dispositivos móveis, o que vem alterando radicalmente como o conteúdo na web vem sendo consumido. Com o lançamento do Adobe Flash Builder 4.5 Premium e Flex 4.5 Framework os desenvolvedores podem facilmente implementar aplicações móveis em mais de 200 milhões de smartphones e tablets até o final de 2011

Integrando Tablets em fluxos de trabalhos criativo

O Photoshop Touch SDK Convida o desenvolvedor a criar aplicativos móveis que interajam com o Photoshop CS5 e 5.5, unindo a experiência interativa dos dispositivos com tela de toque e o poder e precisão do Photoshop. Assista ao vídeo:

http://www.youtube.com/watch?v=bmAhoPIVXpc

Usando o SDK Touch, A Adobe desenvolveu três apps para iPad: Adobe Eazel, Adobe Nav e Adobe Color Lava. Os aplicativos foram projetados para permitir aos usuários criar amostra de cores personalizadas, pintura e usar as mais populares ferramentas do Photoshop por intermédio do tablet.

Para conhecer mais visite o link: http://www.photoshop.com/products/mobile

Wallaby - Convertendo Flash para HTML5 »

15mar 2011, às 16:50

Publicado em Ferramentas Flash HTML5 | Comentários desativados »

publicado por: Magno Valdetaro

Todo mundo sabe que os portáteis da Apple não oferecem suporte ao flash e que os próximos iMacs e Macbooks não virão com o plug-in do flash player já instalado. Muitos dizem que isso é implicância do nosso tio Jobs, Steve Jobs, mas para mim é apenas uma doce vingança pela Adobe ter deixado de lado o primeiro Macintosh quando se negaram a converter (ou refazer) os seus programas do Apple 2 para o novo bebê de Jobs.

Mas chega de história. A notícia é que a Adobe parece ter se rendido e está disponibilizando na Adobe Labs uma ferramenta de interface simples batizada de Wallaby, que faz a conversão de animações em Flash para HTML5, sim, é isso mesmo. Ainda esta em fase de teste, e não dá suporte completo a todos os recursos do flash, mas mesmo assim já é bem vinda.

Wallaby está disponível para download aqui e mais informações no site Adobe Labs

Converter .cdr para .ai, .jpeg e muitos outros formatos de imagem »

11nov 2010, às 08:53

Publicado em Ferramentas | Comentários desativados »

publicado por: Magno Valdetaro

Como você já deve ter percebido por meio do blog eu sou amante dos aplicativos online, pela sua praticidade e eficácia e mais uma vez posso dizer que um destes aplicativos salvou minha vida.

Já recebeu um arquivo .cdr? Sabe, aquele formato padrão do Corel Draw, chatinho que não se comunica muito bem com o resto do mundo, mas é super utilizado e posso dizer que certas vezes até bem vindo para o mundo do design gráfico. Pois bem, já se deparou na situação de não ter o Corel, instalado ou a mão, e como eu você também não é um usuário do tal e precisa abrir o tal CDR a todo custo senão sua vida será ceifada por não finalizar um serviço? Então, aconteceu comigo.

Nesta situação tudo que eu precisava era converter o danadinho para .ai, sabe .ai aquele formato bacana do Adobe Illustrator, que se comunica bem com o Photoshop, Flash e outros.

Quando surgiu está necessidade fui em busca de um conversor e me deparei com o Filespazz, este conversor online e gratuito, tem a simples função de converter o formato nativo do Corel (.cdr) para diversos outros formatos de imagem, segue a lista: CDR 5, CDR 6, CDR 7, CDR 8, CDR 9, CDR 10, CDR 11, CDR 12, CDR 13, AI (Adobe Illustrator), EPS, JPEG, Bitmap, TIFF, DXF, DWG, PICT, PSD, DOC (07/2000/2002).

Acho que isso já ajuda muito! Não é verdade?

O sistema funciona em 4 passos: Primeiro você seleciona o arquivo .cdr que quer converter. Em seguida escolhe para qual dos formatos citados anteriormente, você que que seu arquivo .cdr seja convertido, em seguida adiciona o seu e-mail. É para este e-mail que seu arquivo convertido será enviado. E por último basta clicar em “Convert”.

Pronto. O recebimento do arquivo se dar em duas parte, primeiro você receberá um e-mail de verificação. Dentre de 5 a 15 minutos você receberá um novo e-mail com o link para download do seu arquivo já convertido pronto para usar.

Vale lembra que o arquivo que quer converter não pode ultrapassar os 10mb, e não use seu e-mail principal, sugiro a criação de um e-mail apenas para evitar doar sua bela caixa postal para os spammers.

Único teste que fiz foi na conversão de CDR para AI, e este foi perfeito. Faça também seu teste e me diga o que achou.

Zen Coding – Uma nova e ágil maneira de escrever HTML e CSS »

10set 2010, às 17:16

Publicado em Ferramentas add-ons | Deixe o seu comentário (2) »

publicado por: Magno Valdetaro

Nas minhas perambulações na web o Zen Coding cruzou o meu caminho e fez meus olhos brilharem. Conheça este brilhante plugin para os mais populares editores HTML; que faz para o HTML o que o jQuery tem feito para o javascript.

Com o conceito de agilizar a escrita do código HTML/CSS, o Zen Coding, desenvolvido por Sergey Chikuyonok do Smash Magazine elimina a tarefa de escrever divs e seus conteúdos e classes, por uma simples sintaxe CSS que com um simples comando por atalho de teclado é expandida transformasse como passe de mágica (não é magia é tecnologia!) na estrutura HTML com suas devidas classes e ids.

Assista o vídeo de como funciona o Zen Coding:

Zen Coding v0.5 from Sergey Chikuyonok on Vimeo.

Excelente, não?

Tudo muito simples e rápido, após a digitação de uma sintaxe simples, como esta:

   1: div#menu>ul>li*5>a

Selecione está linha e pressione o devido atalho onde padrão é “Ctrl +,” mas pode variar de aplicativo para aplicativo, no caso do Aptana que explicarei a seguir como instalar, o atalho será “Ctrl+e”. A sintaxe se expandirá na estrutura HTML, abaixo:

   1: < div id="menu">

   2:     < ul>

   3:         < li>< a href="">a>li>

   4:         < li>< a href="">a>li>

   5:         < li>< a href="">a>li>

   6:         < li>< a href="">a>li>

   7:         < li>< a href="">a>li>

   8:     ul>

   9: div>

Como instalar o Zen Coding no Aptana (Windows)

Ainda não comentei sobre o Aptana aqui, mas em breve farei um post sobre esse poderoso IDE. Vamos  ao que interessa dá um trabalhinho, mas é moleza, você vai precisar do seguinte: Aptana studio e do Plugin Zen Coding

Com o Aptana studio instalado e o Zen Coding em mãos, crie um novo projeto: File > New > Other > Web > Default Web Project.

Na tela seguinte de o nome do projeto de zencoding.

Clique com o botão direito sobre o projeto criado intitulado zencoding, no menu flutuante siga: New > Folder; nomeia a pasta  como scripts.

Extraia o conteúdo do arquivo Zen.Coding-Aptana.v0.6.0.1.zip, copie (Ctrl+c) todo o conteúdo extraído e cole (Ctrl+v) na pasta scripts do projeto zencoding

O resultado será este:

Agora na barra de menu no item Scripts, você terá acesso as ações do Zen Coding, veja a imagem:

Pronto! O Zen Coding está instalado, pratique que com certeza valerá a pena. Caso não funcione reinicie o Aptana.

O atalho não funciona (ou não existe)!

Caso tenha problemas com atalho de expandir a sintaxe no Aptana ou ele não venha ativado, basta fazer o seguinte:

Na pasta script do projeto zencoding, encontre o arquivo Expand Abbreviation.js e altere o valor do  item Key para M3+E (onde M3 é a tecla Alt). Veja o exemplo:

   1: /*

   2:  * Menu: Zen Coding > Expand Abbreviation

   3:  * Kudos: Sergey Chikuyonok (http://chikuyonok.ru)

   4:  * License: EPL 1.0

   5:  * Key: M3+E

   6:  * DOM: http://download.eclipse.org/technology/dash/update/org.eclipse.eclipsemonkey.lang.javascript

   7:  * 

Mais detalhes sobre o Zen Coding sobre o Aptana Studio: AptanaHowToEn(em inglês)

Editores com suporte oficial

Estes editores tem suporte total ao Zen Coding: Aptana/Eclipse, TextMate, Coda, Espresso, Komodo Edit/IDE, Notepad++, PSPad, ,editArea.

Outros editores:

Estes editores não tem garantia de suporte a todos os recurso do Zen Coding: Adobe Dreamweaver, Sublime Text, UltraEdit, TopStyle, GEdit, BBEdit/TextWrangler, Visual Studio, EmEditor, Sakura Editor.

Zen Coding no Dreamweaver:

Basta baixar e instalar a extensão: Zen.Coding-Dreamweaver. Não fiz testes em quais versões do Dreamweaver o Zen Coding funciona.

Mais informações sobre o Zen Coding: Zen Coding a new way to write html code(em inglês)

Ainda estou experimentando o Zen Coding, mas pelo que vi até agora me pareceu realmente fantástico. Experimente também e não deixe de me contar o que achou.

Como o Facebook escala utilizando open source »

08set 2010, às 09:30

Publicado em Ferramentas Tecnologia | Comentários desativados »

publicado por: Magno Valdetaro

Quando se trata de de velocidade e escala de seu serviço e lidar com as demandas cada vez maiores, não tem exemplo melhor do que o Facebook. O gigante das redes sociais partiu de um serviço para os estudantes de Harvard para cerca de 500 milhões de usuários.

Porém somente esse número não reflete a demanda da empresa por armazenamento e escala. Então aqui está algumas estatísticas: Os  usuários gastam 8.000 milhões de minutos no sites todos os dias. Há 3,5 bilhão de itens de conteúdo compartilhado por semana. 2.500.000 fotos são uplodadas (neologismo desgraçado) a cada mês, e 1,2 milhões de fotos são visualizadas a cada segundo. E, como 70% dos usuários do Facebook está fora dos Estados Unidos, a quantidade de dados a serem armazenados e servidos fica ainda mais complicado pela localização dos usuários e data centers.

Como o Facebook não para de crescer, não é nenhuma surpresa, que as formas tradicionais de dimensionamento não satisfaça a sede da rede criada por Mark Zuckerberg (the social network). A empresa tem trabalhado para desenvolver ferramentas para lidar com todo esse volume de dados, tanto em termos de armazenagem e entrega de conteúdos, e tem muito open source neste Angú. Desde o início o Facebook foi construído com tecnologias open source,de acordo com David Recordon, gerente de programas open source na Facebook. Mas o uso do open source no Facebook vai além do LAMP (Linux, Apache, MySQL, PHP, Perl ou Python) ou mesmo além do Memcached, este utilizado por muitos grandes da web como: Wikipédia, Flickr, Youtube, Digg, Wordpress, Twitter, entre outros.

A empresa também criou e lançou vários projetos de código aberto e participa ativamente em outros, principalmente o Apache Hadoop.

Confira algumas das ferramentas abertas que ajudam o Facebook com a lidar com a enorme quantidades de dados:

Cassandra

Criado pelo Facebook e mantido pela Apache Software Foundation , o Cassandra é um banco de dados não relacionais também conhecido como NoSQL destinado a escala de enormes volumes de dados entre servidores. Originalmente desenvolvido para ajudar o funcionamento da caixa de busca do Facebook, Cassandra é um do crescente número de soluções de banco de dados NoSQL que tem surgido em nosso tempo.

Hive

Também um projeto Apache, Hive é uma infra-estrutura de armazenamento de dados construída em cima do Hadoop, que oferece ferramentas que permitem fácil indexação de dados, consultas ad hoc e análise de grandes conjuntos de dados. Além disso, Hive entrega uma linguagem de consulta simples chamada Hive Ql, baseada em SQL.

HipHop

A fim de economizar recursos para seus servidores, o Facebook desenvolveu o HipHop, que transforma o código fonte do PHP em C++ altamente otimizado.

Scribe

São gerados cerca de 25 terabytes de dados por dia no Facebook. Sendo nenhuma outra ferramenta mostrado eficiência em escalar este volume de dados, o Facebook desenvolveu o Scribe para registrar dados enviados em tempo real a partir de um grande número de servidores.

Thrift

Thrift é um framework desenvolvido para serviços com alta performance escaláveis , surgindo como uma alternativa tão ou mais simples do que webservices baseados em HTTP. Ele se destaca pela grande compatibilidades entre linguagens (C + +, Java, Python, PHP, Ruby, Erlang, Perl, Haskell, C #, Cacau, Smalltalk, e OCaml).

Fonte: http://www.readwriteweb.com/

4 Aplicativos gratuitos para gravar screencast com áudio »

05jul 2010, às 13:00

Publicado em Ferramentas | Deixe o seu comentário (1) »

publicado por: Magno Valdetaro

Fonte: techpp

As vezes explicar algo com apenas texto puro não é o suficiente. Tutorias em vídeos são sempre bem vindos e mais instrutivos na maioria das vezes. Screencasts aceleram a compreensão do conteúdo de forma mais exata, facilitando o aprendizado. Em situações onde é necessário explicar diversos pontos chaves e detalhes da instrução, escrever um bom texto e utilizar diversas imagens pode tornar o processo trabalhoso e confuso, é nestes caso que um software de gravação vídeo entra em jogo. Há muitos softwares de gravação de tela no mercado, mas poucos são gratuitos e oferecem boa qualidade. Sendo assim segue a lista de5 aplicativos gratuitos para gravar tela e fazer seus tutoriais e screencasts.

UltraVNC screen Recorder

UltraVNC screen Recorder te oferece a opção de gravar telas em uma resolução de 1280x1240 com 15fps. Com possibilidade de gravar áudio em conjunto a gravação, oferecendo ainda as opções de gravar em tela cheia ou área fixa selecionada. O arquivo de saída é no formato .AVI.

Jing

Jing é um aplicativo de gravação de tela com interface interativa disponível para Mac OS X e Windows. Oferece gravação da tela junto com áudio. Ele também pode fazer capturas de tela de uma área selecionada e grava vídeos no formato .SWF. Você pode gravar e salvar direto no seu computador ou publicá-los diretamente no screencast.com e compartilhar com o Twitter, Facebook, Flickr entre outros. As gravações podem ser salvas e, mpeg4 somente na versão professional.

Cam Studio

CamStudio é um aplicativo de código aberto para Windows, que também permite gravação de áudio com a gravação de tela podendo salvar as gravações no formato .AVI, ou se preferir no formato .SWF. Contém todas as funcionalidades básicas do UltraVNC, mais a possibilidade de adicionar notas às gravações.

TipCam

TipCam realiza gravações de tal com áudio e oferece recursos adicionais como: substituir a trilha sonora dos vídeos, trimming de inicio e fim do vídeo  e zoom do cursor durante a gravação. Se você tiver uma conta no Youtube, você pode enviar as gravações direto para ela. Você também pode personalizar as configurações, tais como o nível de zoom, gravação de resolução. O formato de saída da gravação pode ser em .AVI ou. FLV.

A escolha agora fica em suas mãos! não esqueça de deixar sua opinião!

Cacoo – Ferramenta online para wireframes »

26mai 2010, às 09:00

Publicado em Ferramentas | Deixe o seu comentário (2) »

publicado por: Magno Valdetaro

Já comente aqui antes sobre o HotGloo uma excelente ferramenta online para criação de wireframes diagramas, organogramas e todos os gramas que possa imaginar. Porém o tempo passou o HotGloo deixou de ser gratuito e assim sendo saiu um pouco da proposta deste blog, que é de divulgar em sua maioria ferramentas e recursos online gratuitos, assim colaborando com o aprendizado e desenvolvimento daqueles que por aqui passam, principalmente os que estão iniciando nesta humilde vida de desenvolvedor e projetista para web.

Seguindo o enterro apresento o Cacoo uma ferramenta online que cumpre o mesmo papel do HotGloo, mas que se mantém ainda gratuita com destaque para trabalho colaborativo em real-time.

Confira alguns recursos da Cacoo:

Drag Drop

Escolha que tipo de objeto pré-definido que quer inserir, clique e arraste para o stage e pronto! Isso acelera muito o processo de criação de grande diagramas se quiser ainda tem a opção de inserir conectores inteligentes que se arranjam junto ao deslocamento dos itens conectados.

Colaboração em tempo real

Cacoo da suporte ao trabalho colaborativo em tempo real. Isto é, vários usuários podem editar um único diagrama ao mesmo tempo, é como se todos estivessem juntos na mesma sala rabiscando a mesma folha de papel.

Compartilhamento

Um documento criado no Cacoo pode ser facilmente compartilhado com sua equipe ou cliente por meio de um link e ainda oferece a opção de receber comentários.

Crie Wireframes facilmente

Este é o ponto mais importante desta ferramenta para mim. Cacco é uma ferramenta eficaz para criação de wireframes para aplicações web, blog, sites, wikis e outros.

Configurações de background e sheets

Cacoo se utiliza de um conceito de planilhas (sheets) como no Excel, um diagrama pode ter diversas planilhas. Você pode criar uma planilha base para se utilizada de background em outras, o que ajuda muito no processo de criação de wireframes ou mockups.

Assista ao vídeo de apresentação da Cacco:

Fora estes destaques devo citar que Cacoo também permite que você salve seus projetos em pastas, exporte seu diagrama para PNG, faz um screenshot da sua tela, permite upload de imagem e por aí vai!

E é isso, visite Cacoo, cadastre-se teste a ferramenta e me diga o que achou, ok?

Help Desk Open Source »

20abr 2010, às 09:25

Publicado em Ferramentas Recursos | Comentários desativados »

publicado por: Magno Valdetaro

Você tem um produto ou serviço de qualidade, mas acaba de perceber que precisa dar suporte às demandas. Que tal fazer isso online e de forma gratuita?

Help Center Live é um open-source, de chat ao vivo e suporte de sistema. Você pode facilmente dar suporte ao vivo em seu site assim como as grandes empresas fazem, e isso com muito pouco trabalho.

Com Help Center Live, você pode fornecer um atendimento real-time e ampliar a experiência de vendas pessoa a pessoa.

Veja o demonstrativo.

Download Help Center Live!

Como instalar (em inglês)

Lista de ferramentas muito úteis para desenvolvedores CSS3 »

13abr 2010, às 09:38

Publicado em Ajax/Javascript/Jquery CSS3 Ferramentas HTML / CSS | Deixe o seu comentário (2) »

publicado por: Magno Valdetaro

De um modo geral, CSS é muito fácil de se entender e aprender. Mas quando os fabricantes de navegadores começaram a implementar recursos da CSS3, as coisas tornaram-se pouco complicadas. Devido principalmente por dois motivos: primeiro, muitas das novas propriedades CSS3 (por exemplo, a transition, gradient e transform) não são tão simples, e por este motivo, temos de usar extensões específicas de cada navegador.

Até o momento nossos melhores amigo são os geradores de CSS3, as cheat sheets, os guias de referência e as soluções em Java script.

Veja agora a lista de ferramentas úteis para desenvolvedores CSS3:

Geradores

CSS3 Please!

A primeira da lista é a CSS Please ferramenta usada para gerar de regras CSS3, suporta: border-radius, caixa-sombra, o gradiente linear), cores RGBA (, de transformação (rotação), a transição e @ font-face.

CSS3 Generator

Já comentado aqui no blog CSS3 Generator, suporta: border radius, box shadow, text shadow, RGBA, @font-face, multiple columns, box resize, box sizing and outline.

CSS3 Sandbox

Mais um gerador CSS3 para Linear Gradientes ,Gradientes radiais , Texto Shadows , Box Shadows , Transforma eStroke texto.

@ Font-face Generator

Quer utilizar fontes não padrão no seu website, o @Font-face Generator te ajuda na tarefa de gerar regra da propriedade @font-face.

CSS3 Gradiente Generator

Gere gradientes linear com CSS3 com ajuda do CSS3 Gradiente Generator

CSS Border Radius

Gera a propriedade borde-radius para o Mozilla, Webkit e a sintaxe padrão.

Webkit CSS3 Generator

Simples gerador CSS que ajuda você a entender as capacidades da CSS3 introduzidas pelo WebKit.

CSS3 Learning Tool

Ferramenta dinâmica que verificar se a propriedade é suportada pelo navegador em uso e aplica o prefixo para este.

Soluções em JavaScript

Modernizr

Uma excelente biblioteca Java script que detecta a disponibilidade de funcionalidades nativas HTML5/CSS3 e oferece uma maneira de manter o controle sobre seu site, independente das capacidades do navegador. Se gostar do mootools, você pode usar o MooModernizr.

CSS3 pseudo-class Selector Emulation

Permite o uso de pseudo-classe no internet explores. Basta incluir o script em suas páginas e começar a utilizar esses seletores em sua folha de estilo.

CSS3 support for Internet Explorer 6, 7, and 8

IE-CSS3 é um script que oferece suporte a CSS3 para os navegadores Internet Explorer, vários dos estilos populares estão disponíveis.

ie7-js

Mais uma biblioteca para fazer o Internet explorer se comportar como um browser compatível com as normas.

Sizzle - Seletor JavaScript Library

Sizzle suporte praticamente todos os seletores CSS3  -  isso inclui até mesmo alguns raramente usados.

Se achou este post útil não deixe de comentar ou repassar para amigos.

Como preparar seu site para o Apple iPad »

09abr 2010, às 07:29

Publicado em Ferramentas HTML / CSS Internet Tecnologia | Comentários desativados »

publicado por: Magno Valdetaro

O Safari no iPad é capaz de proporcionar uma muito linear a do Desktop. Com o motor WebKit, uma tela de 9.7 polegadas e conectividade a Internet é certo que seu site bem montado funcionará bem e ainda permiti criar novos toques, proporcionando uma experiência unica para seus clientes e visitantes que usam esta plataforma, considerando apenas algumas diferenças específicas entre outras plataformas e o Ipad.

Caso não tenha acesso a um Ipad você pode testar seu site usando o iPhone Simulator (Hardware -> Device - IPad>) que está disponível do IPhone OS 3.2.2 SDK beta (necessário cadastro). Com o simulador em mãos basta seguir as instruções das na nota técnica TN2262: Preparando o conteúdo da Web para o iPad (em inglês).

Veja um vídeo do iPhone simulator em uso:

Não deixe de me contar o que achou desta dica.