Nome do Jogo

Está todo mundo falando do iPhone, e já deve ter gente construindo aplicativos para o novo celular, ou pelo menos pensando nisto. Neste caso, mais uma vez minha interface RAD predileta (o Aptana) saiu na frente e já tem um plugin para desenvolvimento de aplicativos para o iPhone.

O plugin oferece:

• Visualização de projetos para o iPhone na vertical e horizontal.
• Aplicativos de modelo para quem está començando.
• Um sistema de importação de projetos Ajax para projetos do iPhone.
• E mais algumas coisinhas interessantes.

Os caras ainda prometem lançar um kit de deployment e uma documentação para desenvolvimento.

Mais uma vez o pessoal do Aptana mandando bem. Parabéns para eles.

Página do plugin: http://aptana.com/iphone/
Screencast: http://www.aptana.tv/movies/iphone_screencast/iphone.html

   

Meu browser predileto é o Firefox, por isto sempre que estou criando algo, tenho o costume de ir testando nele.

O problema é que quando abro meu site (que está lindo no Firefox) no Internet Explorer, fica tudo desalinhado. Mexe aqui, mexe ali, e consigo deixar tudo bonito no IE. Mas quando abro o site no Firefox novamente, ferrei tudo…

Quantas vezes você já passou por isto?

Passei por isto ontem (mais uma vez) e resolvi ir atrás de alguma ferramenta que me ajudasse neste trabalho.

Primeiro encontrei um Javascript que me permite diferenciar as propriedades do CSS de acordo com o browser e até com o sistema operacional:

var css_browser_selector = function() { var ua=navigator.userAgent.toLowerCase(), is=function(t){ return ua.indexOf(t) != -1; }, h=document.getElementsByTagName('html')[0], b=(!(/opera|webtv/i.test(ua))&&/msie (\d)/.test(ua))?('ie ie'+RegExp.$1):is('gecko/')? 'gecko':is('opera/9')?'opera opera9':/opera (\d)/.test(ua)?'opera opera'+RegExp.$1:is('konqueror')?'konqueror':is('applewebkit/')?'webkit safari':is('mozilla/')?'gecko':'', os=(is('x11')||is('linux'))?' linux':is('mac')?' mac':is('win')?' win':''; var c=b+os+' js'; h.className += h.className?' '+c:c; }();

Isto por si só já facilita muito as coisas. Posso criar um CSS assim, por exemplo:

.ie .example { background-color: yellow } .ie7 .example { background-color: orange } .gecko .example { background-color: gray } .win.gecko .example { background-color: red } .linux.gecko .example { background-color: pink } .opera .example { background-color: green } .konqueror .example { background-color: blue } .webkit .example { background-color: black } .example { width: 100px; height: 100px; } .no_js { display: block } .has_js { display: none } .js .no_js { display: none } .js .has_js { display: block }

Entre as opções de browser estão: ie, ie5, ie6, ie7, firefox, opera, konqueror, safari e outros.

Outra coisa interessante que encontrei para estes casos é o CSSVista (apesar do nome só tem uma versão para o Windows XP). Este software permite que você altere o CSS enquanto vê uma versão do site no IE e no Firefox ao mesmo tempo.

Vi esta dica no blog do Ilya Grigorik.

O código:

<% current_uri = u(request.protocol << request.host_with_port << request.request_uri) title = u(@title) bookmarklets = { :delicious => ['del.icio.us', 'delicious.gif' ,'http://del.icio.us/post?url={{url}}&title={{url_encoded_title}}'], :digg => ['digg it', 'digg.gif', 'http://digg.com/submit?phase=2&url={{url}}&title={{url_encoded_title}}'], :spurl => ['spurl', 'spurl.gif', 'http://www.spurl.net/spurl.php?title={{url_encoded_title}}&url={{url}}'], # :wists => ['wists', 'wists.gif', 'http://wists.com/r.php?c=&r={{url}}&title={{url_encoded_title}}'], :simpy => ['simpy', 'simpy.gif', 'http://www.simpy.com/simpy/LinkAdd.do?href={{url}}&title={{url_encoded_title}}'], # :newsvine => ['newsvine', 'newsvine.gif', 'http://www.newsvine.com/_tools/seed&save?u={{url}}&h={{url_encoded_title}}'], :blinklist => ['blinklist', 'blinklist.gif', 'http://www.blinklist.com/index.php?Action=Blink/addblink.php&Description=&Url={{url}}&Title={{url_encoded_title}}'], :furl => ['furl', 'furl.gif', 'http://www.furl.net/storeIt.jsp?u={{url}}&t={{url_encoded_title}}'], :reddit => ['reddit', 'reddit.gif', 'http://reddit.com/submit?url={{url}}&title={{url_encoded_title}}'], # :fark => ['fark','fark.gif', 'http://cgi.fark.com/cgi/fark/edit.pl?new_url={{url}}&new_comment={{url_encoded_title}}&linktype={{category}}'], :blogmarks => ['blogmarks', 'blogmarks.gif', 'http://blogmarks.net/my/new.php?mini=1&simple=1&url={{url}}&title={{url_encoded_title}}'], :yahoo => ['yahoo', 'yahoo.gif', 'http://myweb2.search.yahoo.com/myresults/bookmarklet?u={{url}}&t={{url_encoded_title}}'], # :smarking => ['smarking', 'smarking.gif', 'http://smarking.com'], # :segnalo => ['segnalo', 'segnalo.gif', 'http://segnalo.com/post.html.php?url={{url}}&title={{url_encoded_title}}'], :magnolia => ['magnolia', 'magnolia.gif', 'http://ma.gnolia.com/bookmarklet/add?url={{url}}&title={{url_encoded_title}}'] } %> <% bookmarklets.each_value { |bookmarklet| bookmarklet[2].gsub!(/\{\{url\}\}/, current_uri) bookmarklet[2].gsub!(/(\{\{url_encoded_title\}\})|(\{\{title\}\})/, title) -%><a href="http://www.nomedojogo.com/wp-admin/%3C%=%20bookmarklet%5B-1%5D%20%%3E" title="<%= bookmarklet[0] %>:<%= title %>"> <img src="http://www.nomedojogo.com/images/social/%3C%=%20bookmarklet%5B1%5D%20%%3E" alt="<%= bookmarklet[0] %>" /> <%= bookmarklet[0] %> </a> <% } %>

Para funcionar do jeito que está, basta ter uma variável @title com o título da sua página.

Para pegar os ícones e ver o artigo original, clique aqui.