O documento discute as características e funcionalidades dos dispositivos móveis e da linguagem HTML5. Apresenta os principais elementos estruturais e de conteúdo introduzidos no HTML5, como <header>, <section>, <article>, <aside>, <figure>, <canvas>, <audio> e <video>. Também discute elementos retirados e a transição do XHTML para o HTML5.

1. MOBILIDADE É TUDO OU NÃO! SÓ O FUTURO.
Rogério Fontes
@rogeriofontes
https://about.me/rogeriofontes

2. 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.

3. O que significa “ser móvel”?
• Dispositivos móveis => Mobilidade
—
• Mobilidade
A capacidade de poder se deslocar ou ser
deslocado facilmente.

4. 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.

5. 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)

6. Por que dispositivos moveis?
•
Canalys - 2013

7. Por que dispositivos moveis?
• Diferentes reçursos de multimidia
• Tela, captura de imagens, armazenamento, processamento,
comunicação

8. 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.

9. 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.

10. 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

11. 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;

12. 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;

13. 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

14. 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.

15. ANDROID VS IOS

16. 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

17. 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.

18. 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).

19. 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.

20. 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.

21. Arquitetura

23. 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

24. 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:

25. 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).

26. 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>

27. 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" />

28. 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.

29. 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.

30. 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>.

31. 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.

32. 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.

33. 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" />

34. 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-5conheca-a-linguagem-que-vai-revolucionar-suanavegacao-na-web/