USANDO RESPONSIVE WEB DESIGN PARA .•Aplicação de Grid Flexível •Aplicação de Media Queries

  • View
    213

  • Download
    0

Embed Size (px)

Text of USANDO RESPONSIVE WEB DESIGN PARA .•Aplicação de Grid Flexível •Aplicação de Media Queries

  • Rodrigo Eduardo Boni orientado por Prof. Jhony Alceu Pereira

    Orientador - FURB

    USANDO RESPONSIVE WEB DESIGN PARA DESENVOLVIMENTO DE

    SISTEMAS WEB

  • ROTEIRO

    Introduo

    Objetivos

    Fundamentao terica

    Especificao

    Implementao

    Operacionalidade

    Resultados e discusso

    Concluses

    Extenses

  • INTRODUO

    Facilidade de acesso e uso da Internet

    Diversidade de dispositivos com acesso Internet

    O conceito Responsive Web Design (RWD) criado por Marcotte (2010)

    Computao em nuvem do Windows Azure (WA)

    Desenvolvimento de um sistema web

    Estudo de caso com a Nota Fiscal eletrnica (NF-e)

  • OBJETIVOS

    Utilizar os conceitos do RWD no desenvolvimento de sistemas web acessveis e adequados aos diversos meios de acesso

    Identificar vantagens e desvantagens na utilizao do RWD

    Adaptar o sistema web a ser desenvolvido para os navegadores de diferentes dispositivos e resolues de tela no qual sero visualizados

    Desenvolver um sistema web para emisso de NF-e

    Disponibilizar o sistema web na plataforma em nuvem WA

  • FUNDAMENTAO TERICA

    Responsive Web Design

    Grids flexveis

    Imagens flexveis

    Media queries

    Computao em nuvem

    Windows Azure

    Nota Fiscal eletrnica

    Trabalhos correlatos

  • RESPONSIVE WEB DESIGN

    Responder ao comportamento do usurio e do ambiente

    Baseia-se na resoluo de tela e sua orientao

  • GRIDS FLEXVEIS

    Uso inteligente de camadas e porcentagens

    Permite o redimensionamento e a reorganizao

  • IMAGENS FLEXVEIS

    Redimensionar e otimizar

    Tcnicas

    Propriedade max-width

    Vrias verses de imagens

  • MEDIA QUERIES

    Inspeciona as caractersticas fsicas dos dispositivos e navegadores

    Permite a construo de vrios leiautes num nico documento HTML (HyperText Markup Language)

    Fornece seletivamente CSS (Cascading Style Sheets)

  • COMPUTAO EM NUVEM

    Conjunto de recursos virtuais

    Acesso sob demanda

    Poder de computao e armazenamento

  • WINDOWS AZURE

    Plataforma em nuvem da Microsoft

    Oferece elasticidade, disponibilidade e escalabilidade

    Servio pago pelo uso

  • NOTA FISCAL ELETRNICA

    Documento de existncia apenas digital

    Trata-se de operao de circulao de mercadorias ou uma prestao de servios

    Assinado digitalmente

    Enviado ao SEFAZ (Secretaria da FAZenda)

  • TRABALHOS CORRELATOS

    Responsive Web Design (MARCOTTE, 2010)

  • TRABALHOS CORRELATOS

    Adaptive layouts with media queries (GUSTAFSON, 2012)

  • TRABALHOS CORRELATOS

    Integrao de aplicaes e servios utilizando computao na nuvem com a plataforma Microsoft Windows Azure (LINHARES, 2011)

  • ESPECIFICAO

    Viso Geral do Sistema Web

    Requisitos Funcionais

    Requisitos No Funcionais

    Diagramas

    Casos de Uso

    Classe

    Sequncia

    Estados

  • VISO GERAL DO SISTEMA WEB

  • REQUISITOS FUNCIONAIS

    RF01: Emisso da NF-e

    RF02: Cadastro de empresas emitentes de NF-e

    RF03: Cadastro de certificado digital

    RF04: Recebimento da NF-e via upload

    RF05: Visualizao da NF-e emitida e recebida

    RF06: Consultar a autorizao de uso da NF-e

  • REQUISITOS NO FUNCIONAIS

    RNF01: Aplicar os conceitos do RWD

    RNF02: Plataforma de computao em nuvem WA

    RNF03: Ambiente de desenvolvimento Visual Studio 2012

    RNF04: Linguagem de programao VB.NET

    RNF05: Plataforma de desenvolvimento web ASP.NET

  • DIAGRAMA DE CASOS DE USO uc Caso de Uso

    Usurio

    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

    autorizao de uso da

    NF-e

  • DIAGRAMA DE CLASSES

  • DIAGRAMA DE SEQUENCIA

  • DIAGRAMA DE ESTADOS stm Estados

    Incio

    Rejeio Autorizao de uso Denegao de uso

    NF-e emitida

    Final

    Em Processamento na

    SEFAZ

    NF-e processada

    NF-e atualizada

  • IMPLEMENTAO

    Tcnicas e Ferramentas

    Leiaute Principal

    Tag viewport

    Aplicao de Grid Flexvel

    Aplicao de Media Queries

    Aplicao de Imagens Flexveis

  • TCNICAS E FERRAMENTAS

    Linguagem VB.NET

    Framework .NET 4.0

    Plataforma web ASP.NET

    Visual Studio 2012

  • LEIAUTE PRINCIPAL

    Uso de master pages

    Herdar aparncia visual

    Contm links

  • TAG VIEWPORT

    Customizao de renderizao da pgina

    Propriedades

    width

    initial-scale

    user-scalable

  • APLICAO GRID FLEXVEL

    Tamanho de 960 px

  • APLICAO DE MEDIA QUERIES

    Utilizao de cinco media queries

  • APLICAO DE IMAGENS FLEXVEIS

    Cada imagem possui trs resolues

  • OPERACIONALIDADE

    Tela de autenticao

    Tela inicial

    Tela de certificado digital

    Tela de empresa emitente

    Tela de emitir e receber

    Tela de visualizar

    Tela de autorizao de uso

  • TELA DE AUTENTICAO

    Usurio Rodrigo Boni

    Senha TCC RWD

  • TELA INICIAL

  • TELA DE CERTIFICADO DIGITAL

  • TELA DE EMPRESA EMITENTE

  • TELA DE EMITIR E RECEBER

  • TELA DE VISUALIZAR

  • TELA DE VISUALIZAR

  • TELA DE VISUALIZAR

  • TELA DE AUTORIZAO DE USO

  • TELA DE AUTORIZAO DE USO

  • RESULTADOS E DISCUSSO

    Testes de mltiplos navegadores

    Testes de mltiplas resolues de tela

    Testes de emisses de NF-e

    Testes de disponibilidade

    Vantagens e desvantagens do RWD

    Comparativo dos trabalhos correlatos

  • Navegadores mais populares

    MLTIPLOS NAVEGADORES

  • Simulador para netbook / notebook / desktop

    MLTIPLAS RESOLUES DE TELA

  • Simulador para tablet

    MLTIPLAS RESOLUES DE TELA

  • Simulador para mobile

    MLTIPLAS RESOLUES DE TELA

  • Simulador para televiso

    MLTIPLAS RESOLUES DE TELA

  • Dispositivos reais

    Desempenho real

    MLTIPLAS RESOLUES DE TELA

  • NF-e invlida no atende o leiaute da NF-e conforme o manual de integrao do contribuinte do SEFAZ

    NF-e vlida atende o leiaute da NF-e conforme o manual de integrao do contribuinte do SEFAZ

    EMISSES DE NF-E

  • Emisso de NF-e com uma instncia no WA: 1,67%

    Emisso de NF-e com dez instncias no WA: 36,59%

    DISPONIBILIDADE

  • VANTAGENS DO RWD

    Adapta-se para qualquer resoluo

    Economiza tempo e dinheiro

    Promove um diferencial

    Mais duradouro

    Fornece grande experincia ao usurio

    Melhora estatsticas

    Manutenibilidade facilitada

    Atinge um nmero maior de usurios

    Evita problemas cannicos

  • DESVANTAGENS DO RWD

    Quantidade considervel de trabalho

    Custos extras

    Problemas de otimizao

    Media queries no so suportadas por todos os navegadores

    No explora em profundidade os recursos dos dispositivos

  • COMPARATIVO TRABALHOS CORRELATOS

    Responsive Web Design (MARCOTTE, 2010)

    Adaptive layouts with media queries (GUSTAFSON, 2012)

    Integrao de aplicaes e servios utilizando computao na nuvem com a plataforma Microsoft Windows Azure (LINHARES, 2011)

  • CONCLUSES

    Atendeu a todos os objetivos propostos

    Suficiente e eficiente

    Visual Studio 2012

    Framework .NET

    Plataforma ASP.NET

    Ainda no uma soluo final

    Independncia de acesso e uso

    Concepo para o futuro

    Comportamento elstico e adaptativo

    Informaes de forma eficaz e inteligente

  • EXTENSES

    Carregar o contedo essencial primeiro

    Redimensionar e otimizar imagens

    Aumentar o grid flexvel para resolues maiores

    Inverter a orientao das tabelas para resolues menores

    Explorar a utilizao de cache do WA

    Utilizar processamento paralelo ou distribudo no WA

  • DEMONSTRAO