Rogério Fontes @rogeriofontes https://about.me/rogeriofontes

MOBILIDADE É TUDO OU NÃO! SÓ O FUTURO.

Quem sou eu? • Arquiteto de Software com especialidade em JAVA EE,

Android, IOS, HTML5, Bancos Oracle e mysql e NOSQL. Trabalhando em empresas como CTBC e Telefonica (SP). (rogeriofontes.inf.br/sobre).

•  Lider do Grupo de usuários do Triângulo mineiro (UaiJUG www.uaijug.com.br).

• Pós-graduado – Filosofia e educação e Especialização em Engenharia de Sistemas.

O que significa “ser móvel”? • Dispositivos móveis => Mobilidade � • Mobilidade

A capacidade de poder se deslocar ou ser deslocado facilmente.

Na computação móvel Mobilidade se refere ao uso pelas pessoas de

dispositivos móveis portáteis, funcionalmente poderosos, que ofereçam capacidade de realizar facilmente um conjunto de funções de aplicação. Sendo também capazes de conectar-se, obter dados e fornecê-los a outros usuários, aplicações e sistemas.

Por que dispositivos moveis? •  Clientes potenciais em constante crescimento •  Muitos fabricantes, modelos e funcionalidades •  Crescimento explosivo (Brasil mais dispositivos

conectadores do que habitantes > 200.000.000 de aparelhos)

Por que dispositivos moveis? • 

Canalys - 2013

Por que dispositivos moveis? •  Diferentes reçursos de multimidia

•  Tela, captura de imagens, armazenamento, processamento, comunicação

Por que dispositivos moveis? • Redes moveis

•  Maior largura de banda, melhor cobertura

•  Conteúdo •  Crescimento da mídia digital •  Mudanças na forma como o conteúdo é produzido

•  Tipos de aplicações •  comunicação via voz •  Navegação web •  Acesso a midia, Fotos, videos •  Localização (GPS) •  Jogos •  Conexão de pessoas.

CARACTERÍSTICAS DOS DISPOSITIVOS MÓVEIS • Portabilidade - Facilidade de transporte;

•  “Hoje em dia”, para ser considerado portátil de portabilidade pode se alterar ao longo do tempo;

•  Algo considerado portátil no passado não pode ser considerado portátil hoje.

CARACTERÍSTICAS DOS DISPOSITIVOS MÓVEIS • Usabilidade � •  A usabilidade de um dispositivo depende de vários fatores,

incluindo: •  Características do usuário •  Características do ambiente •  Características do dispositivo •  Características do usuário

CARACTERÍSTICAS DOS DISPOSITIVOS MÓVEIS •  Funcionalidade

•  A funcionalidade é implementada na forma de uma aplicação móvel e, em geral, estão disponíveis múltiplas aplicações móveis;

CARACTERÍSTICAS DOS DISPOSITIVOS MÓVEIS • Conectividade

•  Dispositivo Móvel, não têm o poder nem a finalidade de operar inteiramente sozinhos durante longos períodos de tempo;

CARACTERÍSTICAS DOS DISPOSITIVOS MÓVEIS E também:

•  Mobilidade •  Contexto de negócio •  Arquiteturas de aplicação móvel

•  Infraestrutura móvel

•  Interface com o usuário de cliente móvel •  Aplicações cliente móvel •  Transferência de dados cliente-servidor •  Tornar móveis as arquiteturas de aplicações existentes •  Segurança •  Gerenciamento do desenvolvimento de aplicações móveis

Mitos • Desenvolver aplicações móveis é fácil

•  Dificuldades: ergonomia, conectividade, telas detamanho reduzido, etc.

• Desenvolver aplicações móveis é rápido •  Depende da complexidade, como ocorre no desenvolvimento de

qualquer outra aplicação.

• Desenvolver aplicações móveis é barato •  Nem o desenvolvimento das aplicações móveis, nem os

dispositivos para teste são baratos.

ANDROID VS IOS

Porque Android? • Vantagens:

•  Android SDK, Emulator, ADT •  Eclipse, NetBeans, etc. •  Desenvolvimento em Java e xml •  Windows, linux, mac os x

•  Ambiente de desenvolvimento um pouco confuso no inicio, mas o desenvolvimento é signitivamento mais barato.

•  Pussui teste a todo lugar sem precisar cadastrar de imediato no google play

•  Possui grande variedades de fabricantes e aparelhos com custo baixo

Porque IOS

•  Vantagens: •  XCODE, COCOA Touch, IOS Simulator •  Restrico ao max OS X •  Desenvolvimento em Object-C

•  Desenvolvimento, praticamente, plug and play •  Custo inicial, possuir um mac, ser desenvolvedor na apple, e ter

licença de desenvolvimento 200 reas - 99 dolares, em compensação os clientes são totalmente fieis a plataforma e a possibilidade maior de ganhar dinheiro.

•  Unico fabricance •  SO customizado •  mais caro, mas com publico fiel.

Interface e usabilidade • Sempre devemos levar em conta a experiência do

usuario:

•  Android: Botões de voltar, menus, integração com serviços do google, P2P, GPS, NFC.

•  IOS: Gestures comuns, Integração com serviços Apple (Airdrop, airplay, icloud).

Google play •  Taxa unica de cadastro 25 dorales

• Sem processo de aprovaçao, disponivel em minutos

•  Lojas alternativas (Amazon, samsung, appbrain, positivo)

• Pode distribuir pelo seu proprio site.

App store •  Licença de 99,00 dolares /ano

• Processo burocatico, demorado

•  7 dias úteis para apovação em média (não oficial)

• Rigidez no processo, aumenta a qualidade da app.

Arquitetura

HTML 5 HTML5 (Hypertext Markup Language, versão 5) é uma linguagem para

estruturação e apresentação de conteúdo para a World Wide Web e é uma tecnologia chave da Internet originalmente proposto por Opera Software.1 É a quinta versão da linguagem HTML. Esta nova versão traz consigo importantes mudanças quanto ao papel do HTML no mundo da Web, através de novas funcionalidades como semântica e acessibilidade.

Fonte: WikiPédia

HTML 5 - Novos elementos Vários novos elementos foram introduzidos no HTML5, todos com a

finalidade de facilitar a compreensão e a manutenção do código. Alguns são uma evolução natural do elemento <div> com foco na semântica; outros surgiram da necessidade de padronizar a maneira de se publicar conteúdo, como acontece hoje com as imagens. Os principais elementos dessa nova versão são:

HTML 5 - Elementos de estrutura <header> - cabeçalho da página ou de uma seção (não confundir com a tag <head>); <section> - cada seção do conteúdo; <article> - um item do conteúdo dentro da página ou da seção; <footer> - o rodapé da página ou de uma seção; <nav> - o conjunto de links que formam a navegação, seja o menu principal do site ou links relacionados ao conteúdo da página; <aside> - conteúdo relacionado ao artigo (como arquivos e posts relacionados em um blog, por exemplo).

HTML 5 - Elementos de conteúdo <figure> - usado para associar uma legenda a uma imagem, vídeo, arquivo de áudio, objeto ou iframe: <figure id="figura01"> <legend>Figura 1. Esquema de uma página em HTML5</legend> <img src="html5.png" border="0" width="200" height="300"

alt="Estrutura de uma página escrita com os novos elementos do HTML5" /> </figure>

HTML 5 - Elementos de conteúdo <canvas> - por meio de uma API gráfica, renderiza imagens 2D dinâmicas que poderão ser usadas em jogos, gráficos, etc; <audio> e <video> - usados para streaming (transmissão pela internet) de áudio e vídeo. É uma tentativa de criar um padrão em todos os navegadores como acontece hoje com as imagens: <audio src="musica.mp3" autoplay="autoplay" loop="20000" /> <video src="video.mov" width="400" height="360" />

HTML 5 - Elementos de conteúdo <dialog> - junto com as tags <dt> e <dd> criado para formatar um diálogo: <dialog> <dt> Michael, you never told me your family knew Johnny Fontane! <dd> Oh sure, you want to meet him? <dt> Yeah! <dd> You know, my father helped Johnny in his career. <dt> Really? How? <dd> ...Let's listen to this song. </dialog> <time> - representa data e/ou hora; <meter> - utilizado para representar medidas, que podem ser de distância, de armazenagem em disco, etc.

Elementos retirados do HTML5 Alguns elementos não existirão mais no HTML5. Alguns foram retirados porque sua função é puramente visual e devem ser substituídos por uma declaração no CSS (Cascading Style Sheets), como: <basefont>, <big>, <center>, <font>, <s>, <strike>, <tt> e <u>. Outros foram retirados porque afetam negativamente a acessibilidade do site: <frame>, <frameset> e <noframes>. Apesar de serem considerados antigos, <b> e <i> ainda serão reconhecidos e renderizados para fins de formatação, mas devem ser substituídos sempre que possível pelos elementos <strong> e <em>, respectivamente.

Elementos retirados do HTML5 Também foram retirados alguns atributos, seja porque caíram em desuso ou porque podem ser substituídos semanticamente por declarações no CSS para definir o visual dos elementos. Os principais atributos retirados são: target no elemento <a>; align nos elementos <table> e demais tags de tabelas, <iframe>, <img>, <input>, <hr>, <div>, <p>, entre outros; background em <body>; bgcolor nos elementos de tabela e no <body>; border em <table> e <object>; cellpadding e cellspacing em <table>; height em <td> e <th>; width nos elementos <hr>, <table>, <td>, <th> e <pre>; hspace e vspace em <img> e <object>; noshade e size em <hr>.

Doctype • Com o HTML5 usaremos apenas uma declaração

doctype:

•  <!DOCTYPE html> •  Além de única, ela é curta e fácil de lembrar - hoje em dia praticamente

todos os desenvolvedores copiam e colam o longo e complicado doctype de algum lugar na hora de começar um novo documento HTML.

Transição do XHTML • A semelhança entre o HTML5 e seus antecessores,

HTML 4.01 e XHTML 1.0, é muito grande. Quem está familiarizado com as versões anteriores não sentirá nenhuma dificuldade na transição, e para quem ainda vai aprender a linguagem, os novos elementos deixarão o processo mais simples.

Transição do XHTML • A sintaxe dos elementos é como no HTML 4.01, que não

exigia que elementos como <img> e <input> fossem "fechados":

•  <input type="text" id="nome"> • Porém, para aqueles que estão migrando do XHTML, a

barra que fecha um elemento continuará sendo aceita: •  <input type="text" id="nome" />

HTML 5 - Links

•  http://www.html5rocks.com/pt/ •  http://html5demos.com •  http://www.tecmundo.com.br/navegador/2254-o-que-e-

html-5-.htm •  http://idgnow.uol.com.br/internet/2009/06/16/html-5-

conheca-a-linguagem-que-vai-revolucionar-sua-navegacao-na-web/