Monografiaformatada 1 Tentativa 1

UNIVERSIDADE DE CAXIAS DO SUL
NOME DO ALUNO
UMA PROPOSTA PARA INTEGRAÇÃO DE SERVIÇOS DO PORTAL

UCSVIRTUAL EM DISPOSITIVOS MÓVEIS
CAXIAS DO SUL
2012
UNIVERSIDADE DE CAXIAS DO SUL
CENTRO DE COMPUTAÇÃO E TECNOLOGIA DA INFORMAÇÃO
CURSO DE BACHARELADO EM SISTEMAS DE INFORMAÇÃO
NOME DO ALUNO
UMA PROPOSTA PARA INTEGRAÇÃO DE SERVIÇOS DO PORTAL

UCSVIRTUAL EM DISPOSITIVOS MÓVEIS
Trabalho de Conclusão de
Curso para obtenção do Grau
de Bacharel em Sistemas de
Informação da Universidade de
Caxias do Sul.
Área de concentração: Interface de Software.
Orientadora Prof. Dra. Nome da Professora
CAXIAS DO SUL
2012
AGRADECIMENTOS
Agradeço Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam eget
ligula eu lectus lobortis condimentum. Aliquam nonummy auctor massa. Pellentesque
habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla at
risus. Quisque purus magna, auctor et, sagittis ac, posuere eu, lectus. Nam mattis, felis
ut adipiscing.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam eget ligula eu lectus
lobortis condimentum. Aliquam nonummy auctor massa. Pellentesque habitant morbi
tristique senectus et netus et malesuada fames ac turpis egestas. Nulla at risus. Quisque
purus magna, auctor et, sagittis ac, posuere eu, lectus. Nam mattis, felis ut adipiscing.
RESUMO
O Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam eget ligula
eu lectus lobortis condimentum. Aliquam nonummy auctor massa. Pellentesque habitant
morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla at risus.
Quisque purus magna, auctor et, sagittis ac, posuere eu, lectus. Nam mattis, felis ut
adipiscing.
Palavras-Chave: UCSVirtual, portais, usabilidade, dispositivos móveis, android, iOS,

HTML5, CSS3, Interface.
ABSTRACT
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam eget ligula eu
lectus lobortis condimentum. Aliquam nonummy auctor massa. Pellentesque habitant
adipiscing.
Keywords: UCSVirtual, portals, usability, mobile, android, iOS, HTML5, CSS3,

Interface.
LISTA DE ILUSTRAÇÕES
Aqui vai o índice de figuras:
Referências -> Inserir Índice de Ilustrações.

LISTA DE TABELAS
Aqui vai o índice de tabelas:
Referências -> Inserir Indice de Ilustrações.

LISTA DE ABREVIATURAS
AVA Ambiente Virtual de Aprendizagem
APP Application
LISTA DE SIGLAS
API Application Programming Interface
HTML Hypertext Markup Language
CSS Cascading Style Sheets
W3C World Wide Web Consortium
WEB World Wide Web
SDK Software Development Kit
UCS Universidade de Caxias do Sul

SUMÁRIO
Aqui vai o sumário:
Referências -> Sumário -> Inserir Sumário.
--
1 INTRODUÇÃO
adipiscing.
2 - PROJETO DE INTERFACES PARA DISPOSITIVOS MÓVEIS
adipiscing.
2.1 CONCEITOS DE DESIGN DE INTERAÇÃO
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam eget ligula eu lectus lobortis
condimentum. Aliquam nonummy auctor massa. Pellentesque habitant morbi tristique senectus
et netus et malesuada fames ac turpis egestas. Nulla at risus. Quisque purus magna, auctor et,
sagittis ac, posuere eu, lectus. Nam mattis, felis ut adipiscing.
2.2 PRINCIPIOS DE USABILIDADE PARA DESENVOLVIMENTO MÓVEL

adipiscing.
2.3 AVALIAÇÃO DE INTERFACE
adipiscing.
2.3.1 Paradigmas de Avaliação de Interface
adipiscing.
2.3.2 Técnicas para Avaliação de Interface
purus magna, auctor et, sagittis ac, posuere eu, lectus. Nam mattis, felis ut adipiscing
podemos verificar na Figura 1.
Figura 1 - Relação entre paradigmas e técnicas de avaliação
2.3.3 Framework para Avaliação de Interface
adipiscing.
3 – TECNOLOGIAS
adipiscing.
3.1 APLICATIVOS WEB X APLICATIVOS NATIVOS
adipiscing.
3.2 PRINCIPAIS TECNOLOGIAS PARA DESENVOLVIMENTO DE

APLICATIVOS NATIVOS
adipiscing.
purus magna, auctor et, sagittis ac, posuere eu, lectus. Nam mattis, felis ut adipiscing,
conforme pode ser verificado na Figura 2.
Figura 2- Plataformas para Smartphones
3.2.1 Desenvolvimento de aplicativos nativos para Android
adipiscing.
conforme Figura 3.
Figura 3 - Arquitetura
3.2.2 Desenvolvimento de Aplicativos nativos para IOS.
adipiscing.
A Figura 4 (Apple Developer, 2012) Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Etiam eget ligula eu lectus lobortis condimentum. Aliquam nonummy
auctor massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames
ac turpis egestas. Nulla at risus. Quisque purus magna, auctor et, sagittis ac, posuere eu,
lectus. Nam mattis, felis ut adipiscing.
Figura 4 - Arquitetura iOS
3.3 PRINCIPAIS TECNOLOGIAS PARA DESENVOLVIMENTO DE

APLICATIVOS WEB
adipiscing.
3.3.1 HTML5
adipiscing.
conforme a Tabela 1.
Tabela 1 - Compatibilidade tags HTML5
Tag Internet Explorer Firefox Opera Chrome Safari
<article> versão 9 em diante Sim Sim Sim Sim
<aside> versão 9 em diante Sim Sim Sim Sim

<audio> versão 9 em diante Sim Sim Sim Sim
<bdi> Não Sim Não Sim Não
<canvas> versão 9 em diante Sim Sim Sim Sim
<command> versão 9 em diante Não Não Não Não
<detalist> Não Sim Sim Não Não
<details> Não Não Não Sim Não
<embed> Sim Sim Sim Sim Sim
<figcapition
> versão 9 em diante Sim Sim Sim Sim
<figure> versão 9 em diante Sim Sim Sim Sim
<footer> versão 9 em diante Sim Sim Sim Sim
<header> versão 9 em diante Sim Sim Sim Sim
<hgroup> versão 9 em diante Sim Sim Sim Sim
Somente no
<keygen> Não Sim Sim Sim MAC
<mark> versão 9 em diante Sim Sim Sim Sim
<meter> Não Não Sim Sim Não
<nav> versão 9 em diante Sim Sim Sim Sim
<output> Não Sim Sim Sim Sim
<progress> Não Sim Sim Sim Não
<rp> versão 9 em diante Sim Sim Sim Sim
<rt> versão 9 em diante Sim Sim Sim Sim
<ruby> versão 9 em diante Sim Sim Sim Sim
<section> versão 9 em diante Sim Sim Sim Sim
<source> versão 9 em diante Sim Sim Sim Sim
<summary> Não Não Não Sim Não
<time> Não Não Não Não Não
<track> Não Não Não Não Não
<video> versão 9 em diante Sim Sim Sim Sim
<wbr> Não Sim Sim Sim Sim

adipiscing.
3.3.2 CSS3
adipiscing.
3.4 CONCLUSÃO DO CAPÍTULO
adipiscing.
4 - PORTAL UCSVIRTUAL
adipiscing.
5 - PROPOSTA DE INTERFACE PARA VERSÃO MÓVEL PARA O PORTAL
UCSVIRTUAL
adipiscing.
conforme a Tabela 2.
Tabela 2 - Funcionalidades mais utilizadas no UCSVirtual
Funcionalidade Qt. Utilização Percentual
AVA Graduação - Webfólio 64 84,00%
AVA Graduação - Mural 58 76,00%
AVA Graduação - Acervo 58 76,00%
Registro de Aproveitamento 56 74,00%
Matrícula Graduação 55 72,00%
AVA Graduação - Cronograma das Aulas 55 72,00%
AVA Graduação - Lista de Participantes 49 64,00%
Gerenciador Financeiro 48 63,00%
AVA Graduação - Informações da Turma 43 57,00%
Estudo Currículo Graduação 40 53,00%
Boletim Matricula Graduação 37 49,00%
Histórico – Graduação 37 49,00%
Avaliação On-line 36 47,00%
Mensagens Instantâneas 32 42,00%
AVA Graduação – Fórum 23 30,00%
Comprovante de Pagamentos 20 26,00%
Documentos – Graduação 20 26,00%
Atividades Complementares 14 18,00%
Histórico de Impressões 9 12,00%

Komunikas 2 3,00%
detalhadas na Tabela 3.
Tabela 3 - Funcionalidades sugeridas para versão móvel do UCSVirtual
Funcionalidade Qt. Utilização Percentual
AVA - Cronograma 17 21,79%
AVA – Mural 16 20,51%
Matrícula On-line 15 19,23%
AVA – Acervo 13 16,67%
Localização de Sala e Horário 11 14,10%
Registro de Aproveitamento 8 10,26%
AVA – Mensagens 8 10,26%
Serviços Biblioteca 6 7,69%
AVA – Webfólio 5 6,41%
AVA – Participantes 5 6,41%
Gerenciados Financeiro 5 6,41%
AVA – Fórum 3 3,85%
Histórico Graduação 3 3,85%
Estudo Currículo 3 3,85%
AVA - Informações da Turma 2 2,56%
Avaliação On-line 2 2,56%

Histórico de Impressões 2 2,56%
Documentos e Formulários 2 2,56%
Liberação Vaga em Espera 1 1,28%
UCS Mail 1 1,28%
Komunikas 1 1,28%
Cursos Extensão 1 1,28%
Atividades Complementares 1 1,28%
conforme Figura 5.
Figura 5 - Diagrama de Casos de Uso
adipiscing.
exibido na Figura 6.
Figura 6 - Protótipo de Tela Login
A Figura 7, Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam eget
ut adipiscing.
Figura 7 - Protótipo de Tela interface principal do sistema
A Figura 8 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam eget
ut adipiscing.
Figura 8 - Acesso ao Menu
A Figura 9 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam eget
ut adipiscing.
Figura 9 - Mural (Seleção de Disciplina)
A Figura 10 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam eget ligula
adipiscing.
Figura 10 - Mural
exemplificado na Figura 11.
Figura 11 - Visualização de Recado no Mural
adipiscing.
Figura 12 - Cronograma (Seleção de Disciplina)
adipiscing.
Figura 13 - Acesso ao Cronograma
A Figura 14, Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam eget ligula
adipiscing.
Figura 14 - Exibição do Cronograma
A Figura 15, Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam
eget ligula eu lectus lobortis condimentum. Aliquam nonummy auctor massa.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis
egestas. Nulla at risus. Quisque purus magna, auctor et, sagittis ac, posuere eu, lectus.
Nam mattis, felis ut adipiscing.
Figura 15 - Orientações da Aula
6 - CONSIDERAÇÕES FINAIS
adipiscing.
REFERENCIAS BIBLIOGRÁFICAS
ANDROID DEVELOPER - Design: http://developer.android.com/design/index.html,

acessado em 20 de junho, 2012.
Android: um novo paradigma de desenvolvimento móvel - Ramon Ribeiro Rabello:

http://www.cesar.org.br/site/files/file/WM18_Android.pdf: acessado em 4 de junho,
2012.
APPLE DEVELOPER: https://developer.apple.com/, acessado em 15 de junho, 2012
Apps vs the Web - Matt Gemmell: http://mattgemmell.com/2011/07/22/apps-vs-the-

web/: acessado em 02 de junho, 2012.
BLACKBERRY DEVELOPER - HTML5: https://developer.blackberry.com/html5/
Comscore - comScore Reports April 2012 U.S. Mobile Subscriber Market Share:
http://www.comscore.com/Press_Events/Press_Releases/2012/6/comScore_Reports_Ap
ril_2012_U.S._Mobile_Subscriber_Market_Share: acessado em 7 de junho, 2012.
CSS3: Visual QuickStart Guide - Jason Cranford Teague - 5ª Edição - Editora - Pearson
Education, Publicação 2010.
Desenvolvimento de Aplicações para Plataforma Google Android - Fábio de Jesus Lima

Gomes, Manoel Taenan Ferreira de Souza, Rafael Madureira Lins de Araújo:
http://www.die.ufpi.br/ercemapi2011/minicursos/MC3.pdf, acessado em 02 de junho,
2012.
Design de interação : além da interação homem-computador, 1ª Edição, Autores:

Preece, Jennifer/ Rogers, Yvonne/ Sharp, Helen, Editora: ARTMED, Publicação: 2005
HTML5 - a Linguagem da Marcação Que Revolucionou a Web - Silva, Maurício Samy

- Editora Novatec, Publicação 2011.
Ipad usability (2nd-edition) - NMGroup:

http://www.nngroup.com/reports/mobile/ipad/ipad-usability_2nd-edition.pdf, acessado
em 25 de abril, 2012.
Maximising Screen-Space on Mobile Computing Devices: BREWSTER, Stephen A.,

CRYER, Peter G. (1999).
Mobile Usability Update - Jakob Nielsen: http://www.useit.com/alertbox/mobile-

usability.html, acessado em 20 de abril, 2012.

Monografiaformatada 1 Tentativa 1

Enviado por

Dados do documento

Descrição original:

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Monografiaformatada 1 Tentativa 1

Enviado por

Direitos autorais:

Formatos disponíveis

UNIVERSIDADE DE CAXIAS DO SUL

UMA PROPOSTA PARA INTEGRAÇÃO DE SERVIÇOS DO PORTAL

CENTRO DE COMPUTAÇÃO E TECNOLOGIA DA INFORMAÇÃO

CURSO DE BACHARELADO EM SISTEMAS DE INFORMAÇÃO

UMA PROPOSTA PARA INTEGRAÇÃO DE SERVIÇOS DO PORTAL

Curso para obtenção do Grau

Área de concentração: Interface de Software.

Orientadora Prof. Dra. Nome da Professora

Palavras-Chave: UCSVirtual, portais, usabilidade, dispositivos móveis, android, iOS,

Keywords: UCSVirtual, portals, usability, mobile, android, iOS, HTML5, CSS3,

Aqui vai o índice de figuras:

Referências -> Inserir Índice de Ilustrações.

Aqui vai o índice de tabelas:

Referências -> Inserir Indice de Ilustrações.

AVA Ambiente Virtual de Aprendizagem

API Application Programming Interface

HTML Hypertext Markup Language

CSS Cascading Style Sheets

W3C World Wide Web Consortium

WEB World Wide Web

SDK Software Development Kit

UCS Universidade de Caxias do Sul

Aqui vai o sumário:

Referências -> Sumário -> Inserir Sumário.

2 - PROJETO DE INTERFACES PARA DISPOSITIVOS MÓVEIS

2.1 CONCEITOS DE DESIGN DE INTERAÇÃO

2.2 PRINCIPIOS DE USABILIDADE PARA DESENVOLVIMENTO MÓVEL

2.3 AVALIAÇÃO DE INTERFACE

2.3.2 Técnicas para Avaliação de Interface

2.3.3 Framework para Avaliação de Interface

3.1 APLICATIVOS WEB X APLICATIVOS NATIVOS

3.2 PRINCIPAIS TECNOLOGIAS PARA DESENVOLVIMENTO DE

Figura 2- Plataformas para Smartphones

3.2.1 Desenvolvimento de aplicativos nativos para Android

3.2.2 Desenvolvimento de Aplicativos nativos para IOS.

Figura 4 - Arquitetura iOS

3.3 PRINCIPAIS TECNOLOGIAS PARA DESENVOLVIMENTO DE

Tabela 1 - Compatibilidade tags HTML5

Tag Internet Explorer Firefox Opera Chrome Safari

<article> versão 9 em diante Sim Sim Sim Sim

<aside> versão 9 em diante Sim Sim Sim Sim

<bdi> Não Sim Não Sim Não

<canvas> versão 9 em diante Sim Sim Sim Sim

<command> versão 9 em diante Não Não Não Não

<detalist> Não Sim Sim Não Não

<details> Não Não Não Sim Não

<embed> Sim Sim Sim Sim Sim

<figure> versão 9 em diante Sim Sim Sim Sim

<footer> versão 9 em diante Sim Sim Sim Sim

<header> versão 9 em diante Sim Sim Sim Sim

<hgroup> versão 9 em diante Sim Sim Sim Sim

<mark> versão 9 em diante Sim Sim Sim Sim

<meter> Não Não Sim Sim Não

<nav> versão 9 em diante Sim Sim Sim Sim

<output> Não Sim Sim Sim Sim

<progress> Não Sim Sim Sim Não

<rp> versão 9 em diante Sim Sim Sim Sim

<rt> versão 9 em diante Sim Sim Sim Sim

<ruby> versão 9 em diante Sim Sim Sim Sim

<section> versão 9 em diante Sim Sim Sim Sim

<source> versão 9 em diante Sim Sim Sim Sim

<summary> Não Não Não Sim Não