![Page 1: USANDO RESPONSIVE WEB DESIGN PARA …campeche.inf.furb.br/tccs/2012-II/TCC2012-2-24-AP-RodrigoEBoni.pdf · •Aplicação de Grid Flexível •Aplicação de Media Queries •Aplicação](https://reader034.vdocuments.net/reader034/viewer/2022051206/5be4d1f509d3f2857c8b53a7/html5/thumbnails/1.jpg)
Rodrigo Eduardo Boni orientado por Prof. Jhony Alceu Pereira
Orientador - FURB
USANDO RESPONSIVE WEB DESIGN PARA DESENVOLVIMENTO DE
SISTEMAS WEB
![Page 2: USANDO RESPONSIVE WEB DESIGN PARA …campeche.inf.furb.br/tccs/2012-II/TCC2012-2-24-AP-RodrigoEBoni.pdf · •Aplicação de Grid Flexível •Aplicação de Media Queries •Aplicação](https://reader034.vdocuments.net/reader034/viewer/2022051206/5be4d1f509d3f2857c8b53a7/html5/thumbnails/2.jpg)
ROTEIRO
• Introdução
• Objetivos
• Fundamentação teórica
• Especificação
• Implementação
• Operacionalidade
• Resultados e discussão
• Conclusões
• Extensões
![Page 3: USANDO RESPONSIVE WEB DESIGN PARA …campeche.inf.furb.br/tccs/2012-II/TCC2012-2-24-AP-RodrigoEBoni.pdf · •Aplicação de Grid Flexível •Aplicação de Media Queries •Aplicação](https://reader034.vdocuments.net/reader034/viewer/2022051206/5be4d1f509d3f2857c8b53a7/html5/thumbnails/3.jpg)
INTRODUÇÃO
• Facilidade de acesso e uso da Internet
• Diversidade de dispositivos com acesso à Internet
• O conceito Responsive Web Design (RWD) criado por Marcotte (2010)
• Computação em nuvem do Windows Azure (WA)
• Desenvolvimento de um sistema web
• Estudo de caso com a Nota Fiscal eletrônica (NF-e)
![Page 4: USANDO RESPONSIVE WEB DESIGN PARA …campeche.inf.furb.br/tccs/2012-II/TCC2012-2-24-AP-RodrigoEBoni.pdf · •Aplicação de Grid Flexível •Aplicação de Media Queries •Aplicação](https://reader034.vdocuments.net/reader034/viewer/2022051206/5be4d1f509d3f2857c8b53a7/html5/thumbnails/4.jpg)
OBJETIVOS
• Utilizar os conceitos do RWD no desenvolvimento de sistemas web acessíveis e adequados aos diversos meios de acesso
• Identificar vantagens e desvantagens na utilização do RWD
• Adaptar o sistema web a ser desenvolvido para os navegadores de diferentes dispositivos e resoluções de tela no qual serão visualizados
• Desenvolver um sistema web para emissão de NF-e
• Disponibilizar o sistema web na plataforma em nuvem WA
![Page 5: USANDO RESPONSIVE WEB DESIGN PARA …campeche.inf.furb.br/tccs/2012-II/TCC2012-2-24-AP-RodrigoEBoni.pdf · •Aplicação de Grid Flexível •Aplicação de Media Queries •Aplicação](https://reader034.vdocuments.net/reader034/viewer/2022051206/5be4d1f509d3f2857c8b53a7/html5/thumbnails/5.jpg)
FUNDAMENTAÇÃO TEÓRICA
• Responsive Web Design
• Grids flexíveis
• Imagens flexíveis
• Media queries
• Computação em nuvem
• Windows Azure
• Nota Fiscal eletrônica
• Trabalhos correlatos
![Page 6: USANDO RESPONSIVE WEB DESIGN PARA …campeche.inf.furb.br/tccs/2012-II/TCC2012-2-24-AP-RodrigoEBoni.pdf · •Aplicação de Grid Flexível •Aplicação de Media Queries •Aplicação](https://reader034.vdocuments.net/reader034/viewer/2022051206/5be4d1f509d3f2857c8b53a7/html5/thumbnails/6.jpg)
RESPONSIVE WEB DESIGN
• Responder ao comportamento do usuário e do ambiente
• Baseia-se na resolução de tela e sua orientação
![Page 7: USANDO RESPONSIVE WEB DESIGN PARA …campeche.inf.furb.br/tccs/2012-II/TCC2012-2-24-AP-RodrigoEBoni.pdf · •Aplicação de Grid Flexível •Aplicação de Media Queries •Aplicação](https://reader034.vdocuments.net/reader034/viewer/2022051206/5be4d1f509d3f2857c8b53a7/html5/thumbnails/7.jpg)
GRIDS FLEXÍVEIS
• Uso inteligente de camadas e porcentagens
• Permite o redimensionamento e a reorganização
![Page 8: USANDO RESPONSIVE WEB DESIGN PARA …campeche.inf.furb.br/tccs/2012-II/TCC2012-2-24-AP-RodrigoEBoni.pdf · •Aplicação de Grid Flexível •Aplicação de Media Queries •Aplicação](https://reader034.vdocuments.net/reader034/viewer/2022051206/5be4d1f509d3f2857c8b53a7/html5/thumbnails/8.jpg)
IMAGENS FLEXÍVEIS
• Redimensionar e otimizar
• Técnicas
• Propriedade max-width
• Várias versões de imagens
![Page 9: USANDO RESPONSIVE WEB DESIGN PARA …campeche.inf.furb.br/tccs/2012-II/TCC2012-2-24-AP-RodrigoEBoni.pdf · •Aplicação de Grid Flexível •Aplicação de Media Queries •Aplicação](https://reader034.vdocuments.net/reader034/viewer/2022051206/5be4d1f509d3f2857c8b53a7/html5/thumbnails/9.jpg)
MEDIA QUERIES
• Inspeciona as características físicas dos dispositivos e navegadores
• Permite a construção de vários leiautes num único documento HTML (HyperText Markup Language)
• Fornece seletivamente CSS (Cascading Style Sheets)
![Page 10: USANDO RESPONSIVE WEB DESIGN PARA …campeche.inf.furb.br/tccs/2012-II/TCC2012-2-24-AP-RodrigoEBoni.pdf · •Aplicação de Grid Flexível •Aplicação de Media Queries •Aplicação](https://reader034.vdocuments.net/reader034/viewer/2022051206/5be4d1f509d3f2857c8b53a7/html5/thumbnails/10.jpg)
COMPUTAÇÃO EM NUVEM
• Conjunto de recursos virtuais
• Acesso sob demanda
• Poder de computação e armazenamento
![Page 11: USANDO RESPONSIVE WEB DESIGN PARA …campeche.inf.furb.br/tccs/2012-II/TCC2012-2-24-AP-RodrigoEBoni.pdf · •Aplicação de Grid Flexível •Aplicação de Media Queries •Aplicação](https://reader034.vdocuments.net/reader034/viewer/2022051206/5be4d1f509d3f2857c8b53a7/html5/thumbnails/11.jpg)
WINDOWS AZURE
• Plataforma em nuvem da Microsoft
• Oferece elasticidade, disponibilidade e escalabilidade
• Serviço pago pelo uso
![Page 12: USANDO RESPONSIVE WEB DESIGN PARA …campeche.inf.furb.br/tccs/2012-II/TCC2012-2-24-AP-RodrigoEBoni.pdf · •Aplicação de Grid Flexível •Aplicação de Media Queries •Aplicação](https://reader034.vdocuments.net/reader034/viewer/2022051206/5be4d1f509d3f2857c8b53a7/html5/thumbnails/12.jpg)
NOTA FISCAL ELETRÔNICA
• Documento de existência apenas digital
• Trata-se de operação de circulação de mercadorias ou uma prestação de serviços
• Assinado digitalmente
• Enviado ao SEFAZ (Secretaria da FAZenda)
![Page 13: USANDO RESPONSIVE WEB DESIGN PARA …campeche.inf.furb.br/tccs/2012-II/TCC2012-2-24-AP-RodrigoEBoni.pdf · •Aplicação de Grid Flexível •Aplicação de Media Queries •Aplicação](https://reader034.vdocuments.net/reader034/viewer/2022051206/5be4d1f509d3f2857c8b53a7/html5/thumbnails/13.jpg)
TRABALHOS CORRELATOS
• Responsive Web Design (MARCOTTE, 2010)
![Page 14: USANDO RESPONSIVE WEB DESIGN PARA …campeche.inf.furb.br/tccs/2012-II/TCC2012-2-24-AP-RodrigoEBoni.pdf · •Aplicação de Grid Flexível •Aplicação de Media Queries •Aplicação](https://reader034.vdocuments.net/reader034/viewer/2022051206/5be4d1f509d3f2857c8b53a7/html5/thumbnails/14.jpg)
TRABALHOS CORRELATOS
• Adaptive layouts with media queries (GUSTAFSON, 2012)
![Page 15: USANDO RESPONSIVE WEB DESIGN PARA …campeche.inf.furb.br/tccs/2012-II/TCC2012-2-24-AP-RodrigoEBoni.pdf · •Aplicação de Grid Flexível •Aplicação de Media Queries •Aplicação](https://reader034.vdocuments.net/reader034/viewer/2022051206/5be4d1f509d3f2857c8b53a7/html5/thumbnails/15.jpg)
TRABALHOS CORRELATOS
• Integração de aplicações e serviços utilizando computação na nuvem com a plataforma Microsoft Windows Azure (LINHARES, 2011)
![Page 16: USANDO RESPONSIVE WEB DESIGN PARA …campeche.inf.furb.br/tccs/2012-II/TCC2012-2-24-AP-RodrigoEBoni.pdf · •Aplicação de Grid Flexível •Aplicação de Media Queries •Aplicação](https://reader034.vdocuments.net/reader034/viewer/2022051206/5be4d1f509d3f2857c8b53a7/html5/thumbnails/16.jpg)
ESPECIFICAÇÃO
• Visão Geral do Sistema Web
• Requisitos Funcionais
• Requisitos Não Funcionais
• Diagramas
• Casos de Uso
• Classe
• Sequência
• Estados
![Page 17: USANDO RESPONSIVE WEB DESIGN PARA …campeche.inf.furb.br/tccs/2012-II/TCC2012-2-24-AP-RodrigoEBoni.pdf · •Aplicação de Grid Flexível •Aplicação de Media Queries •Aplicação](https://reader034.vdocuments.net/reader034/viewer/2022051206/5be4d1f509d3f2857c8b53a7/html5/thumbnails/17.jpg)
VISÃO GERAL DO SISTEMA WEB
![Page 18: USANDO RESPONSIVE WEB DESIGN PARA …campeche.inf.furb.br/tccs/2012-II/TCC2012-2-24-AP-RodrigoEBoni.pdf · •Aplicação de Grid Flexível •Aplicação de Media Queries •Aplicação](https://reader034.vdocuments.net/reader034/viewer/2022051206/5be4d1f509d3f2857c8b53a7/html5/thumbnails/18.jpg)
REQUISITOS FUNCIONAIS
• RF01: Emissão da NF-e
• RF02: Cadastro de empresas emitentes de NF-e
• RF03: Cadastro de certificado digital
• RF04: Recebimento da NF-e via upload
• RF05: Visualização da NF-e emitida e recebida
• RF06: Consultar a autorização de uso da NF-e
![Page 19: USANDO RESPONSIVE WEB DESIGN PARA …campeche.inf.furb.br/tccs/2012-II/TCC2012-2-24-AP-RodrigoEBoni.pdf · •Aplicação de Grid Flexível •Aplicação de Media Queries •Aplicação](https://reader034.vdocuments.net/reader034/viewer/2022051206/5be4d1f509d3f2857c8b53a7/html5/thumbnails/19.jpg)
REQUISITOS NÃO FUNCIONAIS
• RNF01: Aplicar os conceitos do RWD
• RNF02: Plataforma de computação em nuvem WA
• RNF03: Ambiente de desenvolvimento Visual Studio 2012
• RNF04: Linguagem de programação VB.NET
• RNF05: Plataforma de desenvolvimento web ASP.NET
![Page 20: USANDO RESPONSIVE WEB DESIGN PARA …campeche.inf.furb.br/tccs/2012-II/TCC2012-2-24-AP-RodrigoEBoni.pdf · •Aplicação de Grid Flexível •Aplicação de Media Queries •Aplicação](https://reader034.vdocuments.net/reader034/viewer/2022051206/5be4d1f509d3f2857c8b53a7/html5/thumbnails/20.jpg)
DIAGRAMA DE CASOS DE USO uc Caso de Uso
Usuário
UC01. Emitir NF-e
UC02. Cadastrar
empresas emitentes
de NF-e
UC03. Cadastrar
certificado digital
UC04. Receber NF-e
UC05. Visualizar
NF-e
UC06. Consultar a
autorização de uso da
NF-e
![Page 21: USANDO RESPONSIVE WEB DESIGN PARA …campeche.inf.furb.br/tccs/2012-II/TCC2012-2-24-AP-RodrigoEBoni.pdf · •Aplicação de Grid Flexível •Aplicação de Media Queries •Aplicação](https://reader034.vdocuments.net/reader034/viewer/2022051206/5be4d1f509d3f2857c8b53a7/html5/thumbnails/21.jpg)
DIAGRAMA DE CLASSES
![Page 22: USANDO RESPONSIVE WEB DESIGN PARA …campeche.inf.furb.br/tccs/2012-II/TCC2012-2-24-AP-RodrigoEBoni.pdf · •Aplicação de Grid Flexível •Aplicação de Media Queries •Aplicação](https://reader034.vdocuments.net/reader034/viewer/2022051206/5be4d1f509d3f2857c8b53a7/html5/thumbnails/22.jpg)
DIAGRAMA DE SEQUENCIA
![Page 23: USANDO RESPONSIVE WEB DESIGN PARA …campeche.inf.furb.br/tccs/2012-II/TCC2012-2-24-AP-RodrigoEBoni.pdf · •Aplicação de Grid Flexível •Aplicação de Media Queries •Aplicação](https://reader034.vdocuments.net/reader034/viewer/2022051206/5be4d1f509d3f2857c8b53a7/html5/thumbnails/23.jpg)
DIAGRAMA DE ESTADOS stm Estados
Início
Rejeição Autorização de uso Denegação de uso
NF-e emitida
Final
Em Processamento na
SEFAZ
NF-e processada
NF-e atualizada
![Page 24: USANDO RESPONSIVE WEB DESIGN PARA …campeche.inf.furb.br/tccs/2012-II/TCC2012-2-24-AP-RodrigoEBoni.pdf · •Aplicação de Grid Flexível •Aplicação de Media Queries •Aplicação](https://reader034.vdocuments.net/reader034/viewer/2022051206/5be4d1f509d3f2857c8b53a7/html5/thumbnails/24.jpg)
IMPLEMENTAÇÃO
• Técnicas e Ferramentas
• Leiaute Principal
• Tag viewport
• Aplicação de Grid Flexível
• Aplicação de Media Queries
• Aplicação de Imagens Flexíveis
![Page 25: USANDO RESPONSIVE WEB DESIGN PARA …campeche.inf.furb.br/tccs/2012-II/TCC2012-2-24-AP-RodrigoEBoni.pdf · •Aplicação de Grid Flexível •Aplicação de Media Queries •Aplicação](https://reader034.vdocuments.net/reader034/viewer/2022051206/5be4d1f509d3f2857c8b53a7/html5/thumbnails/25.jpg)
TÉCNICAS E FERRAMENTAS
• Linguagem VB.NET
• Framework .NET 4.0
• Plataforma web ASP.NET
• Visual Studio 2012
![Page 26: USANDO RESPONSIVE WEB DESIGN PARA …campeche.inf.furb.br/tccs/2012-II/TCC2012-2-24-AP-RodrigoEBoni.pdf · •Aplicação de Grid Flexível •Aplicação de Media Queries •Aplicação](https://reader034.vdocuments.net/reader034/viewer/2022051206/5be4d1f509d3f2857c8b53a7/html5/thumbnails/26.jpg)
LEIAUTE PRINCIPAL
• Uso de master pages
• Herdar aparência visual
• Contêm links
![Page 27: USANDO RESPONSIVE WEB DESIGN PARA …campeche.inf.furb.br/tccs/2012-II/TCC2012-2-24-AP-RodrigoEBoni.pdf · •Aplicação de Grid Flexível •Aplicação de Media Queries •Aplicação](https://reader034.vdocuments.net/reader034/viewer/2022051206/5be4d1f509d3f2857c8b53a7/html5/thumbnails/27.jpg)
TAG VIEWPORT
• Customização de renderização da página
• Propriedades
• width
• initial-scale
• user-scalable
![Page 28: USANDO RESPONSIVE WEB DESIGN PARA …campeche.inf.furb.br/tccs/2012-II/TCC2012-2-24-AP-RodrigoEBoni.pdf · •Aplicação de Grid Flexível •Aplicação de Media Queries •Aplicação](https://reader034.vdocuments.net/reader034/viewer/2022051206/5be4d1f509d3f2857c8b53a7/html5/thumbnails/28.jpg)
APLICAÇÃO GRID FLEXÍVEL
• Tamanho de 960 px
![Page 29: USANDO RESPONSIVE WEB DESIGN PARA …campeche.inf.furb.br/tccs/2012-II/TCC2012-2-24-AP-RodrigoEBoni.pdf · •Aplicação de Grid Flexível •Aplicação de Media Queries •Aplicação](https://reader034.vdocuments.net/reader034/viewer/2022051206/5be4d1f509d3f2857c8b53a7/html5/thumbnails/29.jpg)
APLICAÇÃO DE MEDIA QUERIES
• Utilização de cinco media queries
![Page 30: USANDO RESPONSIVE WEB DESIGN PARA …campeche.inf.furb.br/tccs/2012-II/TCC2012-2-24-AP-RodrigoEBoni.pdf · •Aplicação de Grid Flexível •Aplicação de Media Queries •Aplicação](https://reader034.vdocuments.net/reader034/viewer/2022051206/5be4d1f509d3f2857c8b53a7/html5/thumbnails/30.jpg)
APLICAÇÃO DE IMAGENS FLEXÍVEIS
• Cada imagem possui três resoluções
![Page 31: USANDO RESPONSIVE WEB DESIGN PARA …campeche.inf.furb.br/tccs/2012-II/TCC2012-2-24-AP-RodrigoEBoni.pdf · •Aplicação de Grid Flexível •Aplicação de Media Queries •Aplicação](https://reader034.vdocuments.net/reader034/viewer/2022051206/5be4d1f509d3f2857c8b53a7/html5/thumbnails/31.jpg)
OPERACIONALIDADE
• Tela de autenticação
• Tela inicial
• Tela de certificado digital
• Tela de empresa emitente
• Tela de emitir e receber
• Tela de visualizar
• Tela de autorização de uso
![Page 32: USANDO RESPONSIVE WEB DESIGN PARA …campeche.inf.furb.br/tccs/2012-II/TCC2012-2-24-AP-RodrigoEBoni.pdf · •Aplicação de Grid Flexível •Aplicação de Media Queries •Aplicação](https://reader034.vdocuments.net/reader034/viewer/2022051206/5be4d1f509d3f2857c8b53a7/html5/thumbnails/32.jpg)
TELA DE AUTENTICAÇÃO
• Usuário Rodrigo Boni
• Senha TCC RWD
![Page 33: USANDO RESPONSIVE WEB DESIGN PARA …campeche.inf.furb.br/tccs/2012-II/TCC2012-2-24-AP-RodrigoEBoni.pdf · •Aplicação de Grid Flexível •Aplicação de Media Queries •Aplicação](https://reader034.vdocuments.net/reader034/viewer/2022051206/5be4d1f509d3f2857c8b53a7/html5/thumbnails/33.jpg)
TELA INICIAL
![Page 34: USANDO RESPONSIVE WEB DESIGN PARA …campeche.inf.furb.br/tccs/2012-II/TCC2012-2-24-AP-RodrigoEBoni.pdf · •Aplicação de Grid Flexível •Aplicação de Media Queries •Aplicação](https://reader034.vdocuments.net/reader034/viewer/2022051206/5be4d1f509d3f2857c8b53a7/html5/thumbnails/34.jpg)
TELA DE CERTIFICADO DIGITAL
![Page 35: USANDO RESPONSIVE WEB DESIGN PARA …campeche.inf.furb.br/tccs/2012-II/TCC2012-2-24-AP-RodrigoEBoni.pdf · •Aplicação de Grid Flexível •Aplicação de Media Queries •Aplicação](https://reader034.vdocuments.net/reader034/viewer/2022051206/5be4d1f509d3f2857c8b53a7/html5/thumbnails/35.jpg)
TELA DE EMPRESA EMITENTE
![Page 36: USANDO RESPONSIVE WEB DESIGN PARA …campeche.inf.furb.br/tccs/2012-II/TCC2012-2-24-AP-RodrigoEBoni.pdf · •Aplicação de Grid Flexível •Aplicação de Media Queries •Aplicação](https://reader034.vdocuments.net/reader034/viewer/2022051206/5be4d1f509d3f2857c8b53a7/html5/thumbnails/36.jpg)
TELA DE EMITIR E RECEBER
![Page 37: USANDO RESPONSIVE WEB DESIGN PARA …campeche.inf.furb.br/tccs/2012-II/TCC2012-2-24-AP-RodrigoEBoni.pdf · •Aplicação de Grid Flexível •Aplicação de Media Queries •Aplicação](https://reader034.vdocuments.net/reader034/viewer/2022051206/5be4d1f509d3f2857c8b53a7/html5/thumbnails/37.jpg)
TELA DE VISUALIZAR
![Page 38: USANDO RESPONSIVE WEB DESIGN PARA …campeche.inf.furb.br/tccs/2012-II/TCC2012-2-24-AP-RodrigoEBoni.pdf · •Aplicação de Grid Flexível •Aplicação de Media Queries •Aplicação](https://reader034.vdocuments.net/reader034/viewer/2022051206/5be4d1f509d3f2857c8b53a7/html5/thumbnails/38.jpg)
TELA DE VISUALIZAR
![Page 39: USANDO RESPONSIVE WEB DESIGN PARA …campeche.inf.furb.br/tccs/2012-II/TCC2012-2-24-AP-RodrigoEBoni.pdf · •Aplicação de Grid Flexível •Aplicação de Media Queries •Aplicação](https://reader034.vdocuments.net/reader034/viewer/2022051206/5be4d1f509d3f2857c8b53a7/html5/thumbnails/39.jpg)
TELA DE VISUALIZAR
![Page 40: USANDO RESPONSIVE WEB DESIGN PARA …campeche.inf.furb.br/tccs/2012-II/TCC2012-2-24-AP-RodrigoEBoni.pdf · •Aplicação de Grid Flexível •Aplicação de Media Queries •Aplicação](https://reader034.vdocuments.net/reader034/viewer/2022051206/5be4d1f509d3f2857c8b53a7/html5/thumbnails/40.jpg)
TELA DE AUTORIZAÇÃO DE USO
![Page 41: USANDO RESPONSIVE WEB DESIGN PARA …campeche.inf.furb.br/tccs/2012-II/TCC2012-2-24-AP-RodrigoEBoni.pdf · •Aplicação de Grid Flexível •Aplicação de Media Queries •Aplicação](https://reader034.vdocuments.net/reader034/viewer/2022051206/5be4d1f509d3f2857c8b53a7/html5/thumbnails/41.jpg)
TELA DE AUTORIZAÇÃO DE USO
![Page 42: USANDO RESPONSIVE WEB DESIGN PARA …campeche.inf.furb.br/tccs/2012-II/TCC2012-2-24-AP-RodrigoEBoni.pdf · •Aplicação de Grid Flexível •Aplicação de Media Queries •Aplicação](https://reader034.vdocuments.net/reader034/viewer/2022051206/5be4d1f509d3f2857c8b53a7/html5/thumbnails/42.jpg)
RESULTADOS E DISCUSSÃO
• Testes de múltiplos navegadores
• Testes de múltiplas resoluções de tela
• Testes de emissões de NF-e
• Testes de disponibilidade
• Vantagens e desvantagens do RWD
• Comparativo dos trabalhos correlatos
![Page 43: USANDO RESPONSIVE WEB DESIGN PARA …campeche.inf.furb.br/tccs/2012-II/TCC2012-2-24-AP-RodrigoEBoni.pdf · •Aplicação de Grid Flexível •Aplicação de Media Queries •Aplicação](https://reader034.vdocuments.net/reader034/viewer/2022051206/5be4d1f509d3f2857c8b53a7/html5/thumbnails/43.jpg)
• Navegadores mais populares
MÚLTIPLOS NAVEGADORES
![Page 44: USANDO RESPONSIVE WEB DESIGN PARA …campeche.inf.furb.br/tccs/2012-II/TCC2012-2-24-AP-RodrigoEBoni.pdf · •Aplicação de Grid Flexível •Aplicação de Media Queries •Aplicação](https://reader034.vdocuments.net/reader034/viewer/2022051206/5be4d1f509d3f2857c8b53a7/html5/thumbnails/44.jpg)
• Simulador para netbook / notebook / desktop
MÚLTIPLAS RESOLUÇÕES DE TELA
![Page 45: USANDO RESPONSIVE WEB DESIGN PARA …campeche.inf.furb.br/tccs/2012-II/TCC2012-2-24-AP-RodrigoEBoni.pdf · •Aplicação de Grid Flexível •Aplicação de Media Queries •Aplicação](https://reader034.vdocuments.net/reader034/viewer/2022051206/5be4d1f509d3f2857c8b53a7/html5/thumbnails/45.jpg)
• Simulador para tablet
MÚLTIPLAS RESOLUÇÕES DE TELA
![Page 46: USANDO RESPONSIVE WEB DESIGN PARA …campeche.inf.furb.br/tccs/2012-II/TCC2012-2-24-AP-RodrigoEBoni.pdf · •Aplicação de Grid Flexível •Aplicação de Media Queries •Aplicação](https://reader034.vdocuments.net/reader034/viewer/2022051206/5be4d1f509d3f2857c8b53a7/html5/thumbnails/46.jpg)
• Simulador para mobile
MÚLTIPLAS RESOLUÇÕES DE TELA
![Page 47: USANDO RESPONSIVE WEB DESIGN PARA …campeche.inf.furb.br/tccs/2012-II/TCC2012-2-24-AP-RodrigoEBoni.pdf · •Aplicação de Grid Flexível •Aplicação de Media Queries •Aplicação](https://reader034.vdocuments.net/reader034/viewer/2022051206/5be4d1f509d3f2857c8b53a7/html5/thumbnails/47.jpg)
• Simulador para televisão
MÚLTIPLAS RESOLUÇÕES DE TELA
![Page 48: USANDO RESPONSIVE WEB DESIGN PARA …campeche.inf.furb.br/tccs/2012-II/TCC2012-2-24-AP-RodrigoEBoni.pdf · •Aplicação de Grid Flexível •Aplicação de Media Queries •Aplicação](https://reader034.vdocuments.net/reader034/viewer/2022051206/5be4d1f509d3f2857c8b53a7/html5/thumbnails/48.jpg)
• Dispositivos reais
• Desempenho real
MÚLTIPLAS RESOLUÇÕES DE TELA
![Page 49: USANDO RESPONSIVE WEB DESIGN PARA …campeche.inf.furb.br/tccs/2012-II/TCC2012-2-24-AP-RodrigoEBoni.pdf · •Aplicação de Grid Flexível •Aplicação de Media Queries •Aplicação](https://reader034.vdocuments.net/reader034/viewer/2022051206/5be4d1f509d3f2857c8b53a7/html5/thumbnails/49.jpg)
• NF-e inválida não atende o leiaute da NF-e conforme o manual de integração do contribuinte do SEFAZ
• NF-e válida atende o leiaute da NF-e conforme o manual de integração do contribuinte do SEFAZ
EMISSÕES DE NF-E
![Page 50: USANDO RESPONSIVE WEB DESIGN PARA …campeche.inf.furb.br/tccs/2012-II/TCC2012-2-24-AP-RodrigoEBoni.pdf · •Aplicação de Grid Flexível •Aplicação de Media Queries •Aplicação](https://reader034.vdocuments.net/reader034/viewer/2022051206/5be4d1f509d3f2857c8b53a7/html5/thumbnails/50.jpg)
• Emissão de NF-e com uma instância no WA: 1,67%
• Emissão de NF-e com dez instâncias no WA: 36,59%
DISPONIBILIDADE
![Page 51: USANDO RESPONSIVE WEB DESIGN PARA …campeche.inf.furb.br/tccs/2012-II/TCC2012-2-24-AP-RodrigoEBoni.pdf · •Aplicação de Grid Flexível •Aplicação de Media Queries •Aplicação](https://reader034.vdocuments.net/reader034/viewer/2022051206/5be4d1f509d3f2857c8b53a7/html5/thumbnails/51.jpg)
VANTAGENS DO RWD
• Adapta-se para qualquer resolução
• Economiza tempo e dinheiro
• Promove um diferencial
• Mais duradouro
• Fornece grande experiência ao usuário
• Melhora estatísticas
• Manutenibilidade facilitada
• Atinge um número maior de usuários
• Evita problemas canônicos
![Page 52: USANDO RESPONSIVE WEB DESIGN PARA …campeche.inf.furb.br/tccs/2012-II/TCC2012-2-24-AP-RodrigoEBoni.pdf · •Aplicação de Grid Flexível •Aplicação de Media Queries •Aplicação](https://reader034.vdocuments.net/reader034/viewer/2022051206/5be4d1f509d3f2857c8b53a7/html5/thumbnails/52.jpg)
DESVANTAGENS DO RWD
• Quantidade considerável de trabalho
• Custos extras
• Problemas de otimização
• Media queries não são suportadas por todos os navegadores
• Não explora em profundidade os recursos dos dispositivos
![Page 53: USANDO RESPONSIVE WEB DESIGN PARA …campeche.inf.furb.br/tccs/2012-II/TCC2012-2-24-AP-RodrigoEBoni.pdf · •Aplicação de Grid Flexível •Aplicação de Media Queries •Aplicação](https://reader034.vdocuments.net/reader034/viewer/2022051206/5be4d1f509d3f2857c8b53a7/html5/thumbnails/53.jpg)
COMPARATIVO TRABALHOS CORRELATOS
• Responsive Web Design (MARCOTTE, 2010)
• Adaptive layouts with media queries (GUSTAFSON, 2012)
• Integração de aplicações e serviços utilizando computação na nuvem com a plataforma Microsoft Windows Azure (LINHARES, 2011)
![Page 54: USANDO RESPONSIVE WEB DESIGN PARA …campeche.inf.furb.br/tccs/2012-II/TCC2012-2-24-AP-RodrigoEBoni.pdf · •Aplicação de Grid Flexível •Aplicação de Media Queries •Aplicação](https://reader034.vdocuments.net/reader034/viewer/2022051206/5be4d1f509d3f2857c8b53a7/html5/thumbnails/54.jpg)
CONCLUSÕES
• Atendeu a todos os objetivos propostos
• Suficiente e eficiente
• Visual Studio 2012
• Framework .NET
• Plataforma ASP.NET
• Ainda não é uma solução final
• Independência de acesso e uso
• Concepção para o futuro
• Comportamento elástico e adaptativo
• Informações de forma eficaz e inteligente
![Page 55: USANDO RESPONSIVE WEB DESIGN PARA …campeche.inf.furb.br/tccs/2012-II/TCC2012-2-24-AP-RodrigoEBoni.pdf · •Aplicação de Grid Flexível •Aplicação de Media Queries •Aplicação](https://reader034.vdocuments.net/reader034/viewer/2022051206/5be4d1f509d3f2857c8b53a7/html5/thumbnails/55.jpg)
EXTENSÕES
• Carregar o conteúdo essencial primeiro
• Redimensionar e otimizar imagens
• Aumentar o grid flexível para resoluções maiores
• Inverter a orientação das tabelas para resoluções menores
• Explorar a utilização de cache do WA
• Utilizar processamento paralelo ou distribuído no WA
![Page 56: USANDO RESPONSIVE WEB DESIGN PARA …campeche.inf.furb.br/tccs/2012-II/TCC2012-2-24-AP-RodrigoEBoni.pdf · •Aplicação de Grid Flexível •Aplicação de Media Queries •Aplicação](https://reader034.vdocuments.net/reader034/viewer/2022051206/5be4d1f509d3f2857c8b53a7/html5/thumbnails/56.jpg)
DEMONSTRAÇÃO