Image Image Image Image Image
Scroll to Top

Topo

Mobile

18

fev
2013

Sem Comentários

Em Cloud Computing
Mobile

Por Vinicius AC

A relação entre cloud computing e mobilidade

Em 18, fev 2013 | Sem Comentários | Em Cloud Computing, Mobile | Por Vinicius AC

Fonte: Cezar Taurion / IMasters

Na minha opinião, cloud e mobilidade têm uma relação tão íntima e sinérgica que não podemos falar de um assunto sem incluir o outro. Sem um ambiente dinâmico de cloud computing no background, torna-se impossível atender aos requisitos de escalabilidade e flexibilidade que os apps demandam. Além disso, com cloud, os apps inovadoras podem explorar novas funcionalidades, como as proporcionadas por imensos volumes de dados (Big Data), impossíveis de serem coletados individualmente. Esta sinergia já aparece em aplicações como o DropBox e iCloud. O serviço Google Maps Coordinate também é um outro belo exemplo desta sinergia. Na verdade, estamos visualizando duas nuvens sinérgicas: de um lado, uma nuvem de dispositivos móveis que as pessoas possuem, sejam smartphones e tablets, de diversos fornecedores e tecnologias e de outro, o imenso poder computacional concentrado em “cloud data centers”. Estas duas nuvens, conectadas, criam o espaço para criarmos apps inovadores.

Nos próximos anos, mais e mais apps inovadores vão surgir e se tornar, pelo menos por algum tempo, “killer applications”. Isto significa que elas terão dezenas ou até mesmo centenas de milhões de downloads por mês durante algum tempo. Estas aplicações, quando utilizadas,  demandarão uma imensa capacidade computacional para atender aos seus usuários. E um complicador a mais, com demanda  altamente variada, quase impossível de prever. Um data center tradicional, configurado para atender os períodos de pico será excessivamente custoso e tornaria o projeto inviável.

Este cenário não é nada impossível, uma vez que hoje já existe mais de um bilhão de smartphones e em 2, ou 3 anos teremos dois bilhões deles. Com o surgimento de smartphones mais baratos, produzidos na China, como os ZTE e Huawei, este numero deverá aumentar significativamente. Apesar da capacidade computacional dos smartphones e tablets ser bem poderosa, seu elevado consumo de bateria em aplicações intensivas em computação, demanda que as operações computacionais mais complexas sejam efetuadas na retaguarda, em cloud data centers.

E estes novos apps demandarão recursos computacionais complexos que precisam de um forte suporte  de computação e armazenamento. Alguns exemplos? Imaginemos aplicações para varejistas, que explorem a personalização de ofertas baseadas no conhecimento contextual do cliente. Onde ele está, seus gostos, seus hábitos de consumo, etc, tudo obtido em tempo real, exatamente quando ele se encontrar diante de um produto na gôndola de uma loja. Estes dados não estarão armazenados no dispositivo móvel, mas na nuvem. Além disso, acrescente análises comportamentais baseadas nas emoções demonstradas pelos rostos das pessoas diante de um produto. Vejam o caso da empresa suiça de tecnologia de reconhecimento facial, a Nviso, que se intitula software de reconhecimento emonional baseado no movimento dos olhos e micromovimentos faciais.

Analisar e tomar decisões baseados em todo este complexo emaranhado de dados demanda alta capacidade de processamento, que só pode ser efetuado em cloud data centers. Além disso, os apps em smartphones e tablets terão interfaces com a Internet das Coisas, com objetos, como sua própria casa interagindo om você. Aliás, hoje você sai de casa com seu smartphone, suas chaves de casa e seus cartões de crédito e débito. Em breve, estes cartões e as chaves estarão no seu smartphone. Este será seu unico objeto. Mas além da casa teremos o carro, os eletrodomésticos,  etc. A interface natural será via cloud, uma vez que estes dispositivos demandarão diversas interfaces e precisarão acessar informações que garantam a segurança no seu uso. Tudo isso tem que estar em uma nuvem e não no próprio smartphone, mesmo porque você vai ter mais de um aparelho móvel. Ou trocá-lo com frequência…

Estes apps serão de negócios e não apenas para usuários finais com a maioria dos apps atuais. A cada dia, tablets e smartphones absorvem o trabalho profissional feito hoje em desktops e laptops e nos próximos anos eles passarão a ser a principal interface dos funcionários das empresas com os seus sistemas corporativos. Uma simples aritmética ajuda a visualizar esta situação: de maneira geral um tablet ou smartphone dobra de capacidade computacional a cada ano e meio ou menos. O ciclo de troca dos desktops e laptops em uma empresa é de três ou quatro anos em média. Bem, basta imaginar como estarão os smartphones e tablets daqui a três anos, quando  empresa for renovar seu parque computacional de desktops e laptops. Será que os tablets e  smartphones não atenderão plenamente aos requisitos de segurança e capacidade? E com as novas apps em nuvem, que estará bem mais consolidada daqui a trÊs anos, é, na minha opinião, inevitável que os dispositivos móveis passarão ser maioria no ambiente de trabalho após o próximo ciclo de renovação tecnológico.

….

Leia a  conclusão aqui: http://imasters.com.br/tecnologia/mobile/a-relacao-entre-cloud-computing-e-mobilidade/

Tags | , , , , , ,

18

jul
2012

Sem Comentários

Em HTML
Ipad

Por Vinicius AC

projetando para o ipad

Em 18, jul 2012 | Sem Comentários | Em HTML, Ipad | Por Vinicius AC

Fonte: http://www.8164.org/designing-for-the-ipad/

por Jin, 04-12-10
I decided a while back that I wasn’t going to get an iPad. Instead, I’d wait for the second generation iPad next year. This has been my approach when it comes to new Apple products. Yes, I’m scared of the early adopter regret. As the launch date neared, my mind changed a bit. My wife is an avid book reader, and I thought it’d be a perfect device for her. But more importantly, I think the iPad will have a significant impact on how us web designers approach interaction design for this medium and the coding behind it. I need one to tinker with.

I bought one on Saturday. I love it. I won’t get into the philosophical aspects that have been debated by many recently, instead I’ll focus the rest of this post on web design/development for iPad’s Mobile Safari. Creating web sites that look and behave consistently on different browsers and versions have been the bane of us web designers’ existence since Mosaic/Netscape days. While I’m happy with the experience surfing on the iPad, I can’t help but to think, “argh another browser.” Even though Mobile Safari on the iPad is identical to iPhone’s, but the term “optimized for mobile” means differently for each device. The iPhone optimized sites are often minified version of the desktop sites, for speed and better use of screen real estate. The iPad’s browser offers the desktop experience, so it should be treated as one. I divided the rest of this post to two sections: iPad ready and iPad optimized, depending on how far you want to customize your site for iPad.

ipad ready

In my opinion, for a site to be “iPad ready” simply means that all the content and functionality are accessible via the iPad. Sites that were written according to the web standard are in a good shape already. A few things to consider:

  • Flash – It’s unlikely that Apple will allow Flash on its mobile devices anytime soon, or ever. Sites that are done entirely in Flash will have to have a HTML alternative(as they should anyways). I embed Youtube and Vimeo videos on this site sometimes. Even though they both support HTML5 <video> on their sites, unfortunately as of now they do not generate embed codes in HTML5. I recently discovered Video for Everyone by Kroc Camen. It’s a great code snippet that plays hosted or embedded videos as HTML5, with Flash/Quicktime as fallback. html5media also has a Javascript file that enables <video> and <audio> for major browsers.P.S. I can’t figure out how this embedded Youtube video is being displayed properly without any HTML5 embedding code. Please let me know if you know the answer.
  • Mouse Events – Make sure your site’s functionality does not rely purely on mouse events (mousemove, mouseover, mouseout, and CSS :hover) . Mobile Safari can trigger onMouseover, but it involves quite a bit of timing and effort on the user. You need to press down on the element that has the onMouseOver event and release fairly fast. To make it easier for the user, either remove unnecessary mouse events or have a visible link that reveals the hidden elements. A good example of inaccessible functionality is twitter’s web interface. You cannot hover therefore you lose the ability to retweet or reply.
  • Scrolling Content – The default one-finger swipe on iPhone/iPad triggers window.scroll(). Two-finger swipe has the same effect as the mouse scroll wheel. Not a lot of users may know this, therefore I think it’s best not to have content in scrolling in fixed sized block elements such as <div>s. The Safari Reference Library has good documentation on handling events.
  • Fixed Positioning – In short, don’t use it:

    Safari on iPad and Safari on iPhone do not have resizable windows. In Safari on iPhone and iPad, the window size is set to the size of the screen (minus Safari user interface controls), and cannot be changed by the user. To move around a webpage, the user changes the zoom level and position of the viewport as they double tap or pinch to zoom in or out, or by touching and dragging to pan the page. As a user changes the zoom level and position of the viewport they are doing so within a viewable content area of fixed size (that is, the window). This means that webpage elements that have their position “fixed” to the viewport can end up outside the viewable content area, offscreen.

    But if you must, Richard Herrera has a work around.

  • contenteditable – Mobile Safari currently does not support contenteditable attribute. Use a styledtextarea instead.
  • Disabling Cut/Copy/Paste Dialog – Pressing down on a text block or image brings up the Cut/Copy/Paste dialog box by default. Sometimes this behavior is not desired. For example, when pressing the top link of a navigation menu. To disable this, use -webkit-user-select: none.

ipad optimized

Fortunately, Safari is one of the leading browsers to support HTML5 and CSS3. If you want to take advantage of all iPad’s mobile Safari has to offer, here is some useful info:

  • User-agent StringMozilla/5.0(iPad; U; CPU iPhone OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B314 Safari/531.21.10

    David Walsh’s recent post shows how to detect iPad using Javascript, PHP and .htaccess redirection.

  • Media Query – In a way, designing for iPad is a bit easier since the screen is fixed to two sizes(portrait and landscape). We can take advantage of this by using Media Query.<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
    <link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">

    Please keep in mind, just because you can, doesn’t mean you have to. I don’t recommend making the two sets of styles drastically different from each other because it’d make the users relearn the UI. One case where I can see it’d be useful is when in portrait mode, show only the main content of the site; when in landscape, display more meta info. For example, on a blog site, show just the post body in portrait, and unhide the meta navigation, Ads blocks when in landscape.

    Jason Grigsby has a simple demo page to display different CSS styling depending on the orientation.

  • Format Detection – On iPhone, Safari automatically renders telephone numbers as a link to call. On the iPad the default action is to add the number phone to Contacts. You can disable this by:<meta name="format-detection" content="telephone=no">
  • Viewport setting – Do not use hard-coded pixel for view port dimensions. Use device-width instead.<meta name="viewport" content="width=device-width" />
  • Disable Automatic Format – Automatic Correction and Automatic Capitalization are default behaviorsfor text input. But sometimes you may not want inputs to be auto formatted. For example, inputting user name and passwords. To disable them:<input type="password" autocorrect="off" autocapitalize="off">
    <textarea rows="4" cols="50" autocapitalize="off"> </textarea">
  • Keyboard Types – You can make make it easier for the users by presenting content appropriate keyboards by using the new HTML5 attributes:Text: <input type="text" />
    Telephone: <input type="tel" /> 
    URL: <input type="url" /> 
    Email: <input type="email" /> 
    Zip Code: <input type="text" pattern="[0-9]*" />
  • Multi-Touch Event Handling – You can bind a touch event to mimic any other event. For example, make one finger swipe to mimic a two finger swipe on a DOM object. There are cases where you may want to override the defaults. For example, wouldn’t it be nice if you can swipe navigate an Image/content slider box than having to press the next/prev links? If you’re interested, you may find these JQuery plugins helpful: jQuery SwipeMultiswipe and JQTouch.

 

 

Tags | , , ,